From 5931ddb77aac23ffe1b82d9d7c03afde3e671109 Mon Sep 17 00:00:00 2001
From: Hayden Bleasel <hello@haydenbleasel.com>
Date: Thu, 24 Jul 2025 14:41:34 -0700
Subject: feat: add ultracite (#452)

* Init ultracite

* Update scripts and biome.jsonc

* Update biome.jsonc

* Update biome.jsonc

* Update biome.jsonc

* Run format
---
 .../src/components/ui/image-timeline-treatment.tsx | 204 ++++++++++-----------
 1 file changed, 102 insertions(+), 102 deletions(-)

(limited to 'apps/web/src/components/ui/image-timeline-treatment.tsx')

diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx
index 31847df5..7a64be18 100644
--- a/apps/web/src/components/ui/image-timeline-treatment.tsx
+++ b/apps/web/src/components/ui/image-timeline-treatment.tsx
@@ -1,102 +1,102 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import type { BackgroundType } from "@/types/editor";
-
-interface ImageTimelineTreatmentProps {
-  src: string;
-  alt: string;
-  targetAspectRatio?: number; // Default to 16:9 for video
-  className?: string;
-  backgroundType?: BackgroundType;
-  backgroundColor?: string;
-}
-
-export function ImageTimelineTreatment({
-  src,
-  alt,
-  targetAspectRatio = 16 / 9,
-  className,
-  backgroundType = "blur",
-  backgroundColor = "#000000",
-}: ImageTimelineTreatmentProps) {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [imageDimensions, setImageDimensions] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const img = e.currentTarget;
-    setImageDimensions({
-      width: img.naturalWidth,
-      height: img.naturalHeight,
-    });
-    setImageLoaded(true);
-  };
-
-  const imageAspectRatio = imageDimensions
-    ? imageDimensions.width / imageDimensions.height
-    : 1;
-
-  const needsAspectRatioTreatment = imageAspectRatio !== targetAspectRatio;
-
-  return (
-    <div
-      className={cn("relative overflow-hidden", className)}
-      style={{ aspectRatio: targetAspectRatio }}
-    >
-      {/* Background Layer */}
-      {needsAspectRatioTreatment && imageLoaded && (
-        <>
-          {backgroundType === "blur" && (
-            <div className="absolute inset-0">
-              <img
-                src={src}
-                alt=""
-                className="w-full h-full object-cover filter blur-xl scale-110 opacity-60"
-                aria-hidden="true"
-              />
-              <div className="absolute inset-0 bg-black/20" />
-            </div>
-          )}
-
-          {backgroundType === "mirror" && (
-            <div className="absolute inset-0">
-              <img
-                src={src}
-                alt=""
-                className="w-full h-full object-cover opacity-30"
-                aria-hidden="true"
-              />
-            </div>
-          )}
-
-          {backgroundType === "color" && (
-            <div className="absolute inset-0" style={{ backgroundColor }} />
-          )}
-        </>
-      )}
-
-      {/* Main Image Layer */}
-      <div className="absolute inset-0">
-        <img
-          src={src}
-          alt={alt}
-          className="w-full h-full object-cover"
-          onLoad={handleImageLoad}
-        />
-      </div>
-
-      {/* Loading state */}
-      {!imageLoaded && (
-        <div className="absolute inset-0 flex items-center justify-center bg-muted/30">
-          <div className="animate-pulse text-xs text-muted-foreground">
-            Loading...
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import type { BackgroundType } from "@/types/editor";
+
+interface ImageTimelineTreatmentProps {
+  src: string;
+  alt: string;
+  targetAspectRatio?: number; // Default to 16:9 for video
+  className?: string;
+  backgroundType?: BackgroundType;
+  backgroundColor?: string;
+}
+
+export function ImageTimelineTreatment({
+  src,
+  alt,
+  targetAspectRatio = 16 / 9,
+  className,
+  backgroundType = "blur",
+  backgroundColor = "#000000",
+}: ImageTimelineTreatmentProps) {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageDimensions, setImageDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    setImageDimensions({
+      width: img.naturalWidth,
+      height: img.naturalHeight,
+    });
+    setImageLoaded(true);
+  };
+
+  const imageAspectRatio = imageDimensions
+    ? imageDimensions.width / imageDimensions.height
+    : 1;
+
+  const needsAspectRatioTreatment = imageAspectRatio !== targetAspectRatio;
+
+  return (
+    <div
+      className={cn("relative overflow-hidden", className)}
+      style={{ aspectRatio: targetAspectRatio }}
+    >
+      {/* Background Layer */}
+      {needsAspectRatioTreatment && imageLoaded && (
+        <>
+          {backgroundType === "blur" && (
+            <div className="absolute inset-0">
+              <img
+                src={src}
+                alt=""
+                className="w-full h-full object-cover filter blur-xl scale-110 opacity-60"
+                aria-hidden="true"
+              />
+              <div className="absolute inset-0 bg-black/20" />
+            </div>
+          )}
+
+          {backgroundType === "mirror" && (
+            <div className="absolute inset-0">
+              <img
+                src={src}
+                alt=""
+                className="w-full h-full object-cover opacity-30"
+                aria-hidden="true"
+              />
+            </div>
+          )}
+
+          {backgroundType === "color" && (
+            <div className="absolute inset-0" style={{ backgroundColor }} />
+          )}
+        </>
+      )}
+
+      {/* Main Image Layer */}
+      <div className="absolute inset-0">
+        <img
+          src={src}
+          alt={alt}
+          className="w-full h-full object-cover"
+          onLoad={handleImageLoad}
+        />
+      </div>
+
+      {/* Loading state */}
+      {!imageLoaded && (
+        <div className="absolute inset-0 flex items-center justify-center bg-muted/30">
+          <div className="animate-pulse text-xs text-muted-foreground">
+            Loading...
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
-- 
cgit v1.3.1