Correct blur-sm ➞ blur

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,
                     });
                   }

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">

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}

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();

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;

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;
 }