chore: formatting

7 files changed, 357 insertions, 342 deletions

diff --git a/apps/web/src/components/editor/panels/assets/views/captions.tsx b/apps/web/src/components/editor/panels/assets/views/captions.tsx
index 9e394cfc..040df749 100644
--- a/apps/web/src/components/editor/panels/assets/views/captions.tsx
+++ b/apps/web/src/components/editor/panels/assets/views/captions.tsx
@@ -254,9 +254,7 @@ export function Captions() {
 											<HugeiconsIcon icon={AlertCircleIcon} size={16} />
 										</Button>
 									</TooltipTrigger>
-									<TooltipContent>
-										{diagnostic.message}
-									</TooltipContent>
+									<TooltipContent>{diagnostic.message}</TooltipContent>
 								</Tooltip>
 							))}
 						<Button
diff --git a/apps/web/src/components/editor/panels/assets/views/settings/background.tsx b/apps/web/src/components/editor/panels/assets/views/settings/background.tsx
index 0367559a..98847453 100644
--- a/apps/web/src/components/editor/panels/assets/views/settings/background.tsx
+++ b/apps/web/src/components/editor/panels/assets/views/settings/background.tsx
@@ -49,7 +49,9 @@ const BlurPreview = memo(
 			};

 

 			renderPreview();

-			return effectPreviewService.onPreviewImageReady({ callback: renderPreview });

+			return effectPreviewService.onPreviewImageReady({

+				callback: renderPreview,

+			});

 		}, [blur.value]);

 

 		return (

@@ -186,7 +188,12 @@ export function BackgroundContent() {
 

 	return (

 		<div className="flex flex-col">

-			<Section collapsible defaultOpen={true} sectionKey="background-blur" showTopBorder={false}>

+			<Section

+				collapsible

+				defaultOpen={true}

+				sectionKey="background-blur"

+				showTopBorder={false}

+			>

 				<SectionHeader>

 					<SectionTitle>Blur</SectionTitle>

 				</SectionHeader>

diff --git a/apps/web/src/components/editor/panels/properties/tabs/effects-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/effects-tab.tsx
index 759ced60..1b94ee2d 100644
--- a/apps/web/src/components/editor/panels/properties/tabs/effects-tab.tsx
+++ b/apps/web/src/components/editor/panels/properties/tabs/effects-tab.tsx
@@ -1,309 +1,309 @@
-"use client";

-

-import { useState } from "react";

-import type { ParamValues } from "@/lib/params";

-import type { Effect } from "@/lib/effects/types";

-import type { EffectElement, VisualElement } from "@/lib/timeline";

-import { effectsRegistry } from "@/lib/effects";

-import { useEditor } from "@/hooks/use-editor";

-import { useElementPreview } from "@/hooks/use-element-preview";

-import {

-	Section,

-	SectionContent,

-	SectionHeader,

-	SectionTitle,

-	SectionFields,

-} from "@/components/section";

-import { PropertyParamField } from "../components/property-param-field";

-import { Button } from "@/components/ui/button";

-import { HugeiconsIcon } from "@hugeicons/react";

-import {

-	Delete02Icon,

-	ViewIcon,

-	ViewOffSlashIcon,

-	MagicWand05Icon,

-} from "@hugeicons/core-free-icons";

-import { cn } from "@/utils/ui";

-import { Separator } from "@/components/ui/separator";

-import { useAssetsPanelStore } from "@/stores/assets-panel-store";

-

-export function StandaloneEffectTab({

-	element,

-	trackId,

-}: {

-	element: EffectElement;

-	trackId: string;

-}) {

-	const { renderElement, previewUpdates, commit } = useElementPreview({

-		trackId,

-		elementId: element.id,

-		fallback: element,

-	});

-

-	const effect: Effect = {

-		id: element.id,

-		type: element.effectType,

-		params: element.params,

-		enabled: true,

-	};

-

-	const previewParam = (key: string) => (value: number | string | boolean) => {

-		previewUpdates({

-			params: { ...(renderElement as EffectElement).params, [key]: value },

-		});

-	};

-

-	return (

-		<div className="flex flex-col h-full">

-			<div className="border-b px-3.5 h-11 shrink-0 flex items-center">

-				<SectionTitle>Effect</SectionTitle>

-			</div>

-			<EffectSection

-				effect={effect}

-				renderParams={(renderElement as EffectElement).params}

-				previewParam={previewParam}

-				onCommit={commit}

-			/>

-		</div>

-	);

-}

-

-export function ClipEffectsTab({

-	element,

-	trackId,

-}: {

-	element: VisualElement;

-	trackId: string;

-}) {

-	const [dragIndex, setDragIndex] = useState<number | null>(null);

-	const [dropIndex, setDropIndex] = useState<number | null>(null);

-	const editor = useEditor();

-	const { renderElement, previewUpdates, commit } = useElementPreview({

-		trackId,

-		elementId: element.id,

-		fallback: element,

-	});

-

-	const effects: Effect[] = element.effects ?? [];

-

-	const getRenderParams = ({ effectId }: { effectId: string }): ParamValues => {

-		return (

-			(renderElement as VisualElement).effects?.find((ef) => ef.id === effectId)

-				?.params ??

-			effects.find((ef) => ef.id === effectId)?.params ??

-			{}

-		);

-	};

-

-	const buildPreviewParam =

-		(effectId: string) =>

-		(key: string) =>

-		(value: number | string | boolean) => {

-			const updatedEffects = (

-				(renderElement as VisualElement).effects ?? []

-			).map((existing) =>

-				existing.id !== effectId

-					? existing

-					: { ...existing, params: { ...existing.params, [key]: value } },

-			);

-			previewUpdates({ effects: updatedEffects });

-		};

-

-	const handleDragStart = ({ index }: { index: number }) => setDragIndex(index);

-

-	const handleDragOver = ({

-		event,

-		index,

-	}: {

-		event: React.DragEvent;

-		index: number;

-	}) => {

-		event.preventDefault();

-		if (index !== dropIndex) setDropIndex(index);

-	};

-

-	const handleDrop = ({ toIndex }: { toIndex: number }) => {

-		if (dragIndex !== null && dragIndex !== toIndex) {

-			editor.timeline.reorderClipEffects({

-				trackId,

-				elementId: element.id,

-				fromIndex: dragIndex,

-				toIndex,

-			});

-		}

-		setDragIndex(null);

-		setDropIndex(null);

-	};

-

-	const handleDragEnd = () => {

-		setDragIndex(null);

-		setDropIndex(null);

-	};

-

-	return (

-		<div className="flex flex-col h-full">

-			<div className="border-b px-3.5 h-11 shrink-0 flex items-center">

-				<SectionTitle>Effects</SectionTitle>

-			</div>

-			{effects.length === 0 ? (

-				<EmptyView />

-			) : (

-				<ul className="flex flex-col">

-					{effects.map((effect, index) => {

-						const resolvedDragIndex = dragIndex ?? -1;

-						const isDragging = dragIndex === index;

-						const isDropTarget =

-							dropIndex === index && dragIndex !== null && dragIndex !== index;

-						const showTopDropIndicator =

-							isDropTarget && index < resolvedDragIndex;

-						const showBottomDropIndicator =

-							isDropTarget && index > resolvedDragIndex;

-

-						return (

-							<li

-								key={effect.id}

-								draggable

-								onDragStart={() => handleDragStart({ index })}

-								onDragOver={(event) => handleDragOver({ event, index })}

-								onDrop={() => handleDrop({ toIndex: index })}

-								onDragEnd={handleDragEnd}

-								className={cn(

-									"group list-none",

-									isDragging && "opacity-40",

-									showTopDropIndicator && "border-t-2 border-primary",

-									showBottomDropIndicator && "border-b-2 border-primary",

-								)}

-							>

-								<EffectSection

-									effect={effect}

-									renderParams={getRenderParams({ effectId: effect.id })}

-									previewParam={buildPreviewParam(effect.id)}

-									onCommit={commit}

-									onToggle={() =>

-										editor.timeline.toggleClipEffect({

-											trackId,

-											elementId: element.id,

-											effectId: effect.id,

-										})

-									}

-									onRemove={() =>

-										editor.timeline.removeClipEffect({

-											trackId,

-											elementId: element.id,

-											effectId: effect.id,

-										})

-									}

-								/>

-							</li>

-						);

-					})}

-				</ul>

-			)}

-		</div>

-	);

-}

-

-function EmptyView() {

-	const setActiveTab = useAssetsPanelStore((s) => s.setActiveTab);

-

-	return (

-		<div className="flex flex-col h-full items-center justify-center gap-4 text-center">

-			<HugeiconsIcon

-				icon={MagicWand05Icon}

-				className="size-10 text-muted-foreground"

-				strokeWidth={1}

-			/>

-			<div className="flex flex-col gap-2">

-				<h3 className="font-medium text-foreground">No effects</h3>

-				<p className="text-muted-foreground text-sm text-balance max-w-44">

-					Add effects to this layer from the Assets panel.

-				</p>

-			</div>

-			<Button

-				variant="default"

-				size="sm"

-				onClick={() => setActiveTab("effects")}

-			>

-				Open effects

-			</Button>

-		</div>

-	);

-}

-

-function EffectSection({

-	effect,

-	renderParams,

-	previewParam,

-	onCommit,

-	onToggle,

-	onRemove,

-}: {

-	effect: Effect;

-	renderParams: ParamValues;

-	previewParam: (key: string) => (value: number | string | boolean) => void;

-	onCommit: () => void;

-	onToggle?: () => void;

-	onRemove?: () => void;

-}) {

-	const definition = effectsRegistry.get(effect.type);

-

-	return (

-		<Section

-			sectionKey={onToggle ? `clip-effect:${effect.id}` : undefined}

-			showTopBorder={false}

-		>

-			<SectionHeader

-				className={cn(onToggle && "cursor-move")}

-				trailing={

-					onToggle && (

-						<div className="flex items-center gap-1">

-							<Button

-								variant={effect.enabled ? "secondary" : "ghost"}

-								size="icon"

-								aria-label={`Toggle ${definition.name}`}

-								onClick={onToggle}

-							>

-								<HugeiconsIcon

-									icon={effect.enabled ? ViewIcon : ViewOffSlashIcon}

-								/>

-							</Button>

-							<Button

-								variant="ghost"

-								size="icon"

-								aria-label={`Remove ${definition.name}`}

-								onClick={onRemove}

-							>

-								<HugeiconsIcon icon={Delete02Icon} />

-							</Button>

-						</div>

-					)

-				}

-			>

-				<SectionTitle

-					className={cn(onToggle && !effect.enabled && "text-muted-foreground")}

-				>

-					{definition.name}

-				</SectionTitle>

-			</SectionHeader>

-			<SectionContent

-				className={cn("p-0", onToggle && !effect.enabled && "opacity-50")}

-			>

-				<SectionFields>

-					{definition.params.map((param) => (

-						<div key={param.key} className="flex flex-col gap-3.5">

-							<div className="px-4">

-								<PropertyParamField

-									param={param}

-									value={renderParams[param.key] ?? param.default}

-									onPreview={previewParam(param.key)}

-									onCommit={onCommit}

-								/>

-							</div>

-							<Separator />

-						</div>

-					))}

-				</SectionFields>

-			</SectionContent>

-		</Section>

-	);

-}

+"use client";
+
+import { useState } from "react";
+import type { ParamValues } from "@/lib/params";
+import type { Effect } from "@/lib/effects/types";
+import type { EffectElement, VisualElement } from "@/lib/timeline";
+import { effectsRegistry } from "@/lib/effects";
+import { useEditor } from "@/hooks/use-editor";
+import { useElementPreview } from "@/hooks/use-element-preview";
+import {
+	Section,
+	SectionContent,
+	SectionHeader,
+	SectionTitle,
+	SectionFields,
+} from "@/components/section";
+import { PropertyParamField } from "../components/property-param-field";
+import { Button } from "@/components/ui/button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+	Delete02Icon,
+	ViewIcon,
+	ViewOffSlashIcon,
+	MagicWand05Icon,
+} from "@hugeicons/core-free-icons";
+import { cn } from "@/utils/ui";
+import { Separator } from "@/components/ui/separator";
+import { useAssetsPanelStore } from "@/stores/assets-panel-store";
+
+export function StandaloneEffectTab({
+	element,
+	trackId,
+}: {
+	element: EffectElement;
+	trackId: string;
+}) {
+	const { renderElement, previewUpdates, commit } = useElementPreview({
+		trackId,
+		elementId: element.id,
+		fallback: element,
+	});
+
+	const effect: Effect = {
+		id: element.id,
+		type: element.effectType,
+		params: element.params,
+		enabled: true,
+	};
+
+	const previewParam = (key: string) => (value: number | string | boolean) => {
+		previewUpdates({
+			params: { ...(renderElement as EffectElement).params, [key]: value },
+		});
+	};
+
+	return (
+		<div className="flex flex-col h-full">
+			<div className="border-b px-3.5 h-11 shrink-0 flex items-center">
+				<SectionTitle>Effect</SectionTitle>
+			</div>
+			<EffectSection
+				effect={effect}
+				renderParams={(renderElement as EffectElement).params}
+				previewParam={previewParam}
+				onCommit={commit}
+			/>
+		</div>
+	);
+}
+
+export function ClipEffectsTab({
+	element,
+	trackId,
+}: {
+	element: VisualElement;
+	trackId: string;
+}) {
+	const [dragIndex, setDragIndex] = useState<number | null>(null);
+	const [dropIndex, setDropIndex] = useState<number | null>(null);
+	const editor = useEditor();
+	const { renderElement, previewUpdates, commit } = useElementPreview({
+		trackId,
+		elementId: element.id,
+		fallback: element,
+	});
+
+	const effects: Effect[] = element.effects ?? [];
+
+	const getRenderParams = ({ effectId }: { effectId: string }): ParamValues => {
+		return (
+			(renderElement as VisualElement).effects?.find((ef) => ef.id === effectId)
+				?.params ??
+			effects.find((ef) => ef.id === effectId)?.params ??
+			{}
+		);
+	};
+
+	const buildPreviewParam =
+		(effectId: string) =>
+		(key: string) =>
+		(value: number | string | boolean) => {
+			const updatedEffects = (
+				(renderElement as VisualElement).effects ?? []
+			).map((existing) =>
+				existing.id !== effectId
+					? existing
+					: { ...existing, params: { ...existing.params, [key]: value } },
+			);
+			previewUpdates({ effects: updatedEffects });
+		};
+
+	const handleDragStart = ({ index }: { index: number }) => setDragIndex(index);
+
+	const handleDragOver = ({
+		event,
+		index,
+	}: {
+		event: React.DragEvent;
+		index: number;
+	}) => {
+		event.preventDefault();
+		if (index !== dropIndex) setDropIndex(index);
+	};
+
+	const handleDrop = ({ toIndex }: { toIndex: number }) => {
+		if (dragIndex !== null && dragIndex !== toIndex) {
+			editor.timeline.reorderClipEffects({
+				trackId,
+				elementId: element.id,
+				fromIndex: dragIndex,
+				toIndex,
+			});
+		}
+		setDragIndex(null);
+		setDropIndex(null);
+	};
+
+	const handleDragEnd = () => {
+		setDragIndex(null);
+		setDropIndex(null);
+	};
+
+	return (
+		<div className="flex flex-col h-full">
+			<div className="border-b px-3.5 h-11 shrink-0 flex items-center">
+				<SectionTitle>Effects</SectionTitle>
+			</div>
+			{effects.length === 0 ? (
+				<EmptyView />
+			) : (
+				<ul className="flex flex-col">
+					{effects.map((effect, index) => {
+						const resolvedDragIndex = dragIndex ?? -1;
+						const isDragging = dragIndex === index;
+						const isDropTarget =
+							dropIndex === index && dragIndex !== null && dragIndex !== index;
+						const showTopDropIndicator =
+							isDropTarget && index < resolvedDragIndex;
+						const showBottomDropIndicator =
+							isDropTarget && index > resolvedDragIndex;
+
+						return (
+							<li
+								key={effect.id}
+								draggable
+								onDragStart={() => handleDragStart({ index })}
+								onDragOver={(event) => handleDragOver({ event, index })}
+								onDrop={() => handleDrop({ toIndex: index })}
+								onDragEnd={handleDragEnd}
+								className={cn(
+									"group list-none",
+									isDragging && "opacity-40",
+									showTopDropIndicator && "border-t-2 border-primary",
+									showBottomDropIndicator && "border-b-2 border-primary",
+								)}
+							>
+								<EffectSection
+									effect={effect}
+									renderParams={getRenderParams({ effectId: effect.id })}
+									previewParam={buildPreviewParam(effect.id)}
+									onCommit={commit}
+									onToggle={() =>
+										editor.timeline.toggleClipEffect({
+											trackId,
+											elementId: element.id,
+											effectId: effect.id,
+										})
+									}
+									onRemove={() =>
+										editor.timeline.removeClipEffect({
+											trackId,
+											elementId: element.id,
+											effectId: effect.id,
+										})
+									}
+								/>
+							</li>
+						);
+					})}
+				</ul>
+			)}
+		</div>
+	);
+}
+
+function EmptyView() {
+	const setActiveTab = useAssetsPanelStore((s) => s.setActiveTab);
+
+	return (
+		<div className="flex flex-col h-full items-center justify-center gap-4 text-center">
+			<HugeiconsIcon
+				icon={MagicWand05Icon}
+				className="size-10 text-muted-foreground"
+				strokeWidth={1}
+			/>
+			<div className="flex flex-col gap-2">
+				<h3 className="font-medium text-foreground">No effects</h3>
+				<p className="text-muted-foreground text-sm text-balance max-w-44">
+					Add effects to this layer from the Assets panel.
+				</p>
+			</div>
+			<Button
+				variant="default"
+				size="sm"
+				onClick={() => setActiveTab("effects")}
+			>
+				Open effects
+			</Button>
+		</div>
+	);
+}
+
+function EffectSection({
+	effect,
+	renderParams,
+	previewParam,
+	onCommit,
+	onToggle,
+	onRemove,
+}: {
+	effect: Effect;
+	renderParams: ParamValues;
+	previewParam: (key: string) => (value: number | string | boolean) => void;
+	onCommit: () => void;
+	onToggle?: () => void;
+	onRemove?: () => void;
+}) {
+	const definition = effectsRegistry.get(effect.type);
+
+	return (
+		<Section
+			sectionKey={onToggle ? `clip-effect:${effect.id}` : undefined}
+			showTopBorder={false}
+		>
+			<SectionHeader
+				className={cn(onToggle && "cursor-move")}
+				trailing={
+					onToggle && (
+						<div className="flex items-center gap-1">
+							<Button
+								variant={effect.enabled ? "secondary" : "ghost"}
+								size="icon"
+								aria-label={`Toggle ${definition.name}`}
+								onClick={onToggle}
+							>
+								<HugeiconsIcon
+									icon={effect.enabled ? ViewIcon : ViewOffSlashIcon}
+								/>
+							</Button>
+							<Button
+								variant="ghost"
+								size="icon"
+								aria-label={`Remove ${definition.name}`}
+								onClick={onRemove}
+							>
+								<HugeiconsIcon icon={Delete02Icon} />
+							</Button>
+						</div>
+					)
+				}
+			>
+				<SectionTitle
+					className={cn(onToggle && !effect.enabled && "text-muted-foreground")}
+				>
+					{definition.name}
+				</SectionTitle>
+			</SectionHeader>
+			<SectionContent
+				className={cn("p-0", onToggle && !effect.enabled && "opacity-50")}
+			>
+				<SectionFields>
+					{definition.params.map((param) => (
+						<div key={param.key} className="flex flex-col gap-3.5">
+							<div className="px-4">
+								<PropertyParamField
+									param={param}
+									value={renderParams[param.key] ?? param.default}
+									onPreview={previewParam(param.key)}
+									onCommit={onCommit}
+								/>
+							</div>
+							<Separator />
+						</div>
+					))}
+				</SectionFields>
+			</SectionContent>
+		</Section>
+	);
+}
diff --git a/apps/web/src/lib/blog/query.ts b/apps/web/src/lib/blog/query.ts
index 9e04a5bb..91c2a514 100644
--- a/apps/web/src/lib/blog/query.ts
+++ b/apps/web/src/lib/blog/query.ts
@@ -47,7 +47,12 @@ const EMPTY_AUTHORS: MarbleAuthorList = {
 };

 

 function isMarbleConfigured() {

-	return !["", "placeholder", "build-placeholder", "your_workspace_key_here"].includes(key);

+	return ![

+		"",

+		"placeholder",

+		"build-placeholder",

+		"your_workspace_key_here",

+	].includes(key);

 }

 

 async function fetchFromMarble<T>({

diff --git a/apps/web/src/lib/feedback/components/feedback-popover.tsx b/apps/web/src/lib/feedback/components/feedback-popover.tsx
index 9bdc48f4..1b04bad6 100644
--- a/apps/web/src/lib/feedback/components/feedback-popover.tsx
+++ b/apps/web/src/lib/feedback/components/feedback-popover.tsx
@@ -166,18 +166,17 @@ function FeedbackPopoverContent({ onClose }: { onClose: () => void }) {
 			</Form>
 
 			{entries.length > 0 && (
-				<div className="border-t">
-					<div className="px-3 py-2">
-						<span className="text-xs font-medium text-muted-foreground">
-							Previous feedback
-						</span>
-					</div>
-					<div className="max-h-48 overflow-y-auto px-3 pb-3">
-						<div className="flex flex-col gap-2">
-							{entries.map((entry) => (
-								<FeedbackEntryItem key={entry.id} entry={entry} />
-							))}
-						</div>
+				<div className="border-t overflow-hidden">
+					<div
+						className="max-h-52 overflow-y-auto divide-y"
+						style={{
+							maskImage:
+								"linear-gradient(to bottom, black 70%, transparent 100%)",
+						}}
+					>
+						{entries.map((entry) => (
+							<FeedbackEntryItem key={entry.id} entry={entry} />
+						))}
 					</div>
 				</div>
 			)}
@@ -185,17 +184,29 @@ function FeedbackPopoverContent({ onClose }: { onClose: () => void }) {
 	);
 }
 
-function FeedbackEntryItem({ entry }: { entry: FeedbackEntry }) {
-	const formatted = new Date(entry.createdAt).toLocaleDateString(undefined, {
+function relativeDate(iso: string): string {
+	const diff = Date.now() - new Date(iso).getTime();
+	const mins = Math.floor(diff / 60_000);
+	if (mins < 1) return "just now";
+	if (mins < 60) return `${mins}m ago`;
+	const hrs = Math.floor(mins / 60);
+	if (hrs < 24) return `${hrs}h ago`;
+	const days = Math.floor(hrs / 24);
+	if (days < 7) return `${days}d ago`;
+	return new Date(iso).toLocaleDateString(undefined, {
 		month: "short",
 		day: "numeric",
 	});
+}
 
+function FeedbackEntryItem({ entry }: { entry: FeedbackEntry }) {
 	return (
-		<div className="rounded-md border px-2.5 py-2">
-			<p className="text-sm whitespace-pre-wrap break-words">{entry.message}</p>
-			<span className="mt-1 block text-xs text-muted-foreground">
-				{formatted}
+		<div className="px-3 py-2.5">
+			<p className="text-sm text-muted-foreground leading-snug whitespace-pre-wrap break-words">
+				{entry.message}
+			</p>
+			<span className="mt-1 block text-[11px] text-muted-foreground/50">
+				{relativeDate(entry.createdAt)}
 			</span>
 		</div>
 	);
diff --git a/apps/web/src/services/storage/migrations/__tests__/v1-to-v2.test.ts b/apps/web/src/services/storage/migrations/__tests__/v1-to-v2.test.ts
index 56c83403..9cea9a2e 100644
--- a/apps/web/src/services/storage/migrations/__tests__/v1-to-v2.test.ts
+++ b/apps/web/src/services/storage/migrations/__tests__/v1-to-v2.test.ts
@@ -1,7 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import {
-	DEFAULT_BACKGROUND_BLUR_INTENSITY,
-} from "@/lib/background/blur";
+import { DEFAULT_BACKGROUND_BLUR_INTENSITY } from "@/lib/background/blur";
 import { DEFAULT_BACKGROUND_COLOR } from "@/lib/background/color";
 import { DEFAULT_CANVAS_SIZE } from "@/lib/canvas/sizes";
 const DEFAULT_FPS = 30;
@@ -135,9 +133,7 @@ describe("V1 to V2 Migration", () => {
 
 			const settings = result.project.settings as Record<string, unknown>;
 			const background = settings.background as Record<string, unknown>;
-			expect(background.blurIntensity).toBe(
-				DEFAULT_BACKGROUND_BLUR_INTENSITY,
-			);
+			expect(background.blurIntensity).toBe(DEFAULT_BACKGROUND_BLUR_INTENSITY);
 		});
 
 		test("preserves currentSceneId", async () => {
diff --git a/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts b/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
index b6b38f3c..a19269cd 100644
--- a/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
+++ b/apps/web/src/services/storage/migrations/transformers/v1-to-v2.ts
@@ -1,6 +1,4 @@
-import {
-	DEFAULT_BACKGROUND_BLUR_INTENSITY,
-} from "@/lib/background/blur";
+import { DEFAULT_BACKGROUND_BLUR_INTENSITY } from "@/lib/background/blur";
 import { DEFAULT_BACKGROUND_COLOR } from "@/lib/background/color";
 import { DEFAULT_CANVAS_SIZE } from "@/lib/canvas/sizes";
 const DEFAULT_FPS = 30;