From df1e80b5287ff71867bad1a1bfebb102cef7d5bf Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 13:15:09 -0400
Subject: Lay groundwork for Tailwind v4 upgrade

---
 .../src/components/editor/media-panel/tabbar.tsx   |  6 ++---
 .../components/editor/media-panel/views/media.tsx  |  2 +-
 apps/web/src/components/editor/preview-panel.tsx   | 26 +++++++++++-----------
 .../editor/properties-panel/text-properties.tsx    |  4 ++--
 apps/web/src/components/editor/snap-indicator.tsx  |  2 +-
 apps/web/src/components/editor/speed-control.tsx   |  2 +-
 apps/web/src/components/editor/timeline/index.tsx  | 14 ++++++------
 .../editor/timeline/timeline-element.tsx           |  2 +-
 .../editor/timeline/timeline-playhead.tsx          |  4 ++--
 9 files changed, 31 insertions(+), 31 deletions(-)

(limited to 'apps/web/src/components/editor')

diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index bce84a46..92482559 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -82,7 +82,7 @@ export function TabBar() {
               onClick={() => setActiveTab(tabKey)}
               key={tabKey}
             >
-              <tab.icon className="!size-[1.1rem]" />
+              <tab.icon className="size-[1.1rem]!" />
               <span className="text-[0.65rem]">{tab.label}</span>
             </div>
           );
@@ -114,10 +114,10 @@ function ScrollButton({
     <div className="bg-panel-accent w-12 h-full flex items-center justify-center">
       <Button
         size="icon"
-        className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"
+        className="rounded-[0.4rem] w-4 h-7 bg-foreground/10!"
         onClick={onClick}
       >
-        <Icon className="!size-4 text-foreground" />
+        <Icon className="size-4! text-foreground" />
       </Button>
     </div>
   );
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index f218dc14..d1533736 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -169,7 +169,7 @@ export function MediaView() {
 
     if (item.type === "audio") {
       return (
-        <div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
+        <div className="w-full h-full bg-linear-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
           <Music className="h-6 w-6 mb-1" />
           <span className="text-xs">Audio</span>
           {item.duration && (
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 639858d0..2c6cbf96 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -274,7 +274,7 @@ export function PreviewPanel() {
   const renderBlurBackground = () => {
     if (
       !activeProject?.backgroundType ||
-      activeProject.backgroundType !== "blur" ||
+      activeProject.backgroundType !== "blur-sm" ||
       blurBackgroundElements.length === 0
     ) {
       return null;
@@ -392,7 +392,7 @@ export function PreviewPanel() {
         return (
           <div
             key={element.id}
-            className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
+            className="absolute inset-0 bg-linear-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
           >
             <div className="text-center">
               <div className="text-2xl mb-2">🎬</div>
@@ -474,7 +474,7 @@ export function PreviewPanel() {
                 width: previewDimensions.width,
                 height: previewDimensions.height,
                 backgroundColor:
-                  activeProject?.backgroundType === "blur"
+                  activeProject?.backgroundType === "blur-sm"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
               }}
@@ -489,7 +489,7 @@ export function PreviewPanel() {
                   renderElement(elementData, index)
                 )
               )}
-              {activeProject?.backgroundType === "blur" &&
+              {activeProject?.backgroundType === "blur-sm" &&
                 blurBackgroundElements.length === 0 &&
                 activeElements.length > 0 && (
                   <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -675,7 +675,7 @@ function FullscreenToolbar({
             style={{ width: `${progress}%` }}
           />
           <div
-            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-sm bg-white border border-black/20"
+            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-xs bg-white border border-black/20"
             style={{ left: `${progress}%` }}
           />
         </div>
@@ -684,11 +684,11 @@ function FullscreenToolbar({
       <Button
         variant="text"
         size="icon"
-        className="!size-4 text-white/80 hover:text-white"
+        className="size-4! text-white/80 hover:text-white"
         onClick={onToggleExpanded}
         title="Exit fullscreen (Esc)"
       >
-        <Expand className="!size-4" />
+        <Expand className="size-4!" />
       </Button>
     </div>
   );
@@ -722,7 +722,7 @@ function FullscreenPreview({
   getTotalDuration: () => number;
 }) {
   return (
-    <div className="fixed inset-0 z-[9999] flex flex-col">
+    <div className="fixed inset-0 z-9999 flex flex-col">
       <div className="flex-1 flex items-center justify-center bg-background">
         <div
           className="relative overflow-hidden border border-border m-3"
@@ -730,7 +730,7 @@ function FullscreenPreview({
             width: previewDimensions.width,
             height: previewDimensions.height,
             backgroundColor:
-              activeProject?.backgroundType === "blur"
+              activeProject?.backgroundType === "blur-sm"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
           }}
@@ -745,7 +745,7 @@ function FullscreenPreview({
               renderElement(elementData, index)
             )
           )}
-          {activeProject?.backgroundType === "blur" &&
+          {activeProject?.backgroundType === "blur-sm" &&
             blurBackgroundElements.length === 0 &&
             activeElements.length > 0 && (
               <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -868,7 +868,7 @@ function PreviewToolbar({
           <DropdownMenuTrigger asChild>
             <Button
               size="sm"
-              className="!bg-panel-accent text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
+              className="bg-panel-accent! text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
               disabled={!hasAnyElements}
             >
               {getDisplayName()}
@@ -899,11 +899,11 @@ function PreviewToolbar({
         <Button
           variant="text"
           size="icon"
-          className="!size-4 text-muted-foreground"
+          className="size-4! text-muted-foreground"
           onClick={onToggleExpanded}
           title="Enter fullscreen"
         >
-          <Expand className="!size-4" />
+          <Expand className="size-4!" />
         </Button>
       </div>
     </div>
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index e147ea65..61dd806b 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -25,7 +25,7 @@ export function TextProperties({
       <Textarea
         placeholder="Name"
         defaultValue={element.content}
-        className="min-h-[4.5rem] resize-none bg-background/50"
+        className="min-h-18 resize-none bg-background/50"
         onChange={(e) =>
           updateTextElement(trackId, element.id, { content: e.target.value })
         }
@@ -63,7 +63,7 @@ export function TextProperties({
                   fontSize: parseInt(e.target.value),
                 })
               }
-              className="w-12 !text-xs h-7 rounded-sm text-center
+              className="w-12 text-xs! h-7 rounded-sm text-center
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
diff --git a/apps/web/src/components/editor/snap-indicator.tsx b/apps/web/src/components/editor/snap-indicator.tsx
index 053d119e..0a51e107 100644
--- a/apps/web/src/components/editor/snap-indicator.tsx
+++ b/apps/web/src/components/editor/snap-indicator.tsx
@@ -65,7 +65,7 @@ export function SnapIndicator({
 
   return (
     <div
-      className="absolute pointer-events-none z-[90]"
+      className="absolute pointer-events-none z-90"
       style={{
         left: `${leftPosition}px`,
         top: 0,
diff --git a/apps/web/src/components/editor/speed-control.tsx b/apps/web/src/components/editor/speed-control.tsx
index f2b0568d..b41cadfb 100644
--- a/apps/web/src/components/editor/speed-control.tsx
+++ b/apps/web/src/components/editor/speed-control.tsx
@@ -21,7 +21,7 @@ export function SpeedControl() {
           {SPEED_PRESETS.map((preset) => (
             <Button
               key={preset.value}
-              variant={speed === preset.value ? "default" : "outline"}
+              variant={speed === preset.value ? "default" : "outline-solid"}
               className="flex-1"
               onClick={() => setSpeed(preset.value)}
             >
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index bdb4433c..7a3011d0 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -543,7 +543,7 @@ export function Timeline() {
         {/* Timeline Header with Ruler */}
         <div className="flex bg-panel sticky top-0 z-10">
           {/* Track Labels Header */}
-          <div className="w-48 flex-shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
+          <div className="w-48 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
             {/* Empty space */}
             <span className="text-sm font-medium text-muted-foreground opacity-0">
               .
@@ -652,7 +652,7 @@ export function Timeline() {
           {tracks.length > 0 && (
             <div
               ref={trackLabelsRef}
-              className="w-48 flex-shrink-0 border-r border-black overflow-y-auto z-[200] bg-panel"
+              className="w-48 shrink-0 border-r border-black overflow-y-auto z-200 bg-panel"
               data-track-labels
             >
               <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
@@ -667,7 +667,7 @@ export function Timeline() {
                         <TrackIcon track={track} />
                       </div>
                       {track.muted && (
-                        <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
+                        <span className="ml-2 text-xs text-red-500 font-semibold shrink-0">
                           Muted
                         </span>
                       )}
@@ -745,7 +745,7 @@ export function Timeline() {
                             />
                           </div>
                         </ContextMenuTrigger>
-                        <ContextMenuContent className="z-[200]">
+                        <ContextMenuContent className="z-200">
                           <ContextMenuItem
                             onClick={(e) => {
                               e.stopPropagation();
@@ -775,13 +775,13 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
   return (
     <>
       {track.type === "media" && (
-        <Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+        <Video className="w-4 h-4 shrink-0 text-muted-foreground" />
       )}
       {track.type === "text" && (
-        <TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+        <TypeIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
       )}
       {track.type === "audio" && (
-        <Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+        <Music className="w-4 h-4 shrink-0 text-muted-foreground" />
       )}
     </>
   );
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index f581bbf0..0447d52a 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -358,7 +358,7 @@ export function TimelineElement({
           </div>
         </div>
       </ContextMenuTrigger>
-      <ContextMenuContent className="z-[200]">
+      <ContextMenuContent className="z-200">
         <ContextMenuItem onClick={handleElementSplitContext}>
           <Scissors className="h-4 w-4 mr-2" />
           Split at playhead
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index b33166c0..ea70419b 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -126,7 +126,7 @@ export function TimelinePlayhead({
   return (
     <div
       ref={playheadRef}
-      className="absolute pointer-events-auto z-[150]"
+      className="absolute pointer-events-auto z-150"
       style={{
         left: `${leftPosition}px`,
         top: 0,
@@ -142,7 +142,7 @@ export function TimelinePlayhead({
 
       {/* Playhead dot indicator at the top (in ruler area) */}
       <div
-        className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
+        className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
       />
     </div>
   );
-- 
cgit v1.3.1


From e3ecf4855a9dea317f4823bf1840703de7ec3f67 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 15:05:03 -0400
Subject: Correct `blur-sm` ➞ `blur`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/background-settings.tsx         |  8 ++++----
 apps/web/src/components/editor/preview-panel.tsx        | 12 ++++++------
 apps/web/src/components/ui/image-timeline-treatment.tsx |  4 ++--
 apps/web/src/stores/project-store.ts                    |  4 ++--
 apps/web/src/types/editor.ts                            |  2 +-
 apps/web/src/types/project.ts                           |  2 +-
 6 files changed, 16 insertions(+), 16 deletions(-)

(limited to 'apps/web/src/components/editor')

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
index 2a5a3ac0..7e27e574 100644
--- a/apps/web/src/components/background-settings.tsx
+++ b/apps/web/src/components/background-settings.tsx
@@ -7,7 +7,7 @@ import { colors } from "@/data/colors";
 import { useProjectStore } from "@/stores/project-store";
 import { PipetteIcon } from "lucide-react";
 
-type BackgroundTab = "color" | "blur-sm";
+type BackgroundTab = "color" | "blur";
 
 export function BackgroundSettings() {
   const { activeProject, updateBackgroundType } = useProjectStore();
@@ -20,7 +20,7 @@ export function BackgroundSettings() {
   };
 
   const handleBlurSelect = (blurIntensity: number) => {
-    updateBackgroundType("blur-sm", { blurIntensity });
+    updateBackgroundType("blur", { blurIntensity });
   };
 
   const tabs = [
@@ -30,7 +30,7 @@ export function BackgroundSettings() {
     },
     {
       label: "Blur",
-      value: "blur-sm",
+      value: "blur",
     },
   ];
 
@@ -60,7 +60,7 @@ export function BackgroundSettings() {
                         activeProject?.backgroundColor || "#000000",
                     });
                   } else {
-                    updateBackgroundType("blur-sm", {
+                    updateBackgroundType("blur", {
                       blurIntensity: activeProject?.blurIntensity || 8,
                     });
                   }
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 2c6cbf96..76eedb4f 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -211,7 +211,7 @@ export function PreviewPanel() {
     setDragState({
       isDragging: true,
       elementId: element.id,
-      trackId: trackId,
+      trackId,
       startX: e.clientX,
       startY: e.clientY,
       initialElementX: element.x,
@@ -274,7 +274,7 @@ export function PreviewPanel() {
   const renderBlurBackground = () => {
     if (
       !activeProject?.backgroundType ||
-      activeProject.backgroundType !== "blur-sm" ||
+      activeProject.backgroundType !== "blur" ||
       blurBackgroundElements.length === 0
     ) {
       return null;
@@ -474,7 +474,7 @@ export function PreviewPanel() {
                 width: previewDimensions.width,
                 height: previewDimensions.height,
                 backgroundColor:
-                  activeProject?.backgroundType === "blur-sm"
+                  activeProject?.backgroundType === "blur"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
               }}
@@ -489,7 +489,7 @@ export function PreviewPanel() {
                   renderElement(elementData, index)
                 )
               )}
-              {activeProject?.backgroundType === "blur-sm" &&
+              {activeProject?.backgroundType === "blur" &&
                 blurBackgroundElements.length === 0 &&
                 activeElements.length > 0 && (
                   <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -730,7 +730,7 @@ function FullscreenPreview({
             width: previewDimensions.width,
             height: previewDimensions.height,
             backgroundColor:
-              activeProject?.backgroundType === "blur-sm"
+              activeProject?.backgroundType === "blur"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
           }}
@@ -745,7 +745,7 @@ function FullscreenPreview({
               renderElement(elementData, index)
             )
           )}
-          {activeProject?.backgroundType === "blur-sm" &&
+          {activeProject?.backgroundType === "blur" &&
             blurBackgroundElements.length === 0 &&
             activeElements.length > 0 && (
               <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx
index eb0d0e9f..7a64be18 100644
--- a/apps/web/src/components/ui/image-timeline-treatment.tsx
+++ b/apps/web/src/components/ui/image-timeline-treatment.tsx
@@ -18,7 +18,7 @@ export function ImageTimelineTreatment({
   alt,
   targetAspectRatio = 16 / 9,
   className,
-  backgroundType = "blur-sm",
+  backgroundType = "blur",
   backgroundColor = "#000000",
 }: ImageTimelineTreatmentProps) {
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -50,7 +50,7 @@ export function ImageTimelineTreatment({
       {/* Background Layer */}
       {needsAspectRatioTreatment && imageLoaded && (
         <>
-          {backgroundType === "blur-sm" && (
+          {backgroundType === "blur" && (
             <div className="absolute inset-0">
               <img
                 src={src}
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index a34df511..7bb38039 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -23,7 +23,7 @@ interface ProjectStore {
   duplicateProject: (projectId: string) => Promise<string>;
   updateProjectBackground: (backgroundColor: string) => Promise<void>;
   updateBackgroundType: (
-    type: "color" | "blur-sm",
+    type: "color" | "blur",
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => Promise<void>;
   updateProjectFps: (fps: number) => Promise<void>;
@@ -273,7 +273,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   },
 
   updateBackgroundType: async (
-    type: "color" | "blur-sm",
+    type: "color" | "blur",
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => {
     const { activeProject } = get();
diff --git a/apps/web/src/types/editor.ts b/apps/web/src/types/editor.ts
index 12954df0..12b474fd 100644
--- a/apps/web/src/types/editor.ts
+++ b/apps/web/src/types/editor.ts
@@ -1,4 +1,4 @@
-export type BackgroundType = "blur-sm" | "mirror" | "color";
+export type BackgroundType = "blur" | "mirror" | "color";
 
 export interface CanvasSize {
   width: number;
diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts
index 623fd160..58d37b03 100644
--- a/apps/web/src/types/project.ts
+++ b/apps/web/src/types/project.ts
@@ -6,7 +6,7 @@ export interface TProject {
   updatedAt: Date;
   mediaItems?: string[];
   backgroundColor?: string;
-  backgroundType?: "color" | "blur-sm";
+  backgroundType?: "color" | "blur";
   blurIntensity?: number; // in pixels (4, 8, 18)
   fps?: number;
 }
-- 
cgit v1.3.1


From cd5642161b117fd5cb707cf9d405176459d9f37c Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 16:54:20 -0400
Subject: Swap background CSS inline style for tailwind utility

---
 apps/web/src/components/editor/selection-box.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'apps/web/src/components/editor')

diff --git a/apps/web/src/components/editor/selection-box.tsx b/apps/web/src/components/editor/selection-box.tsx
index 0a97c6f8..ca9d799f 100644
--- a/apps/web/src/components/editor/selection-box.tsx
+++ b/apps/web/src/components/editor/selection-box.tsx
@@ -49,10 +49,7 @@ export function SelectionBox({
   return (
     <div
       ref={selectionBoxRef}
-      className="absolute pointer-events-none z-50"
-      style={{
-        backgroundColor: "hsl(var(--foreground) / 0.1)",
-      }}
+      className="absolute pointer-events-none z-50 bg-foreground/10"
     />
   );
 }
-- 
cgit v1.3.1