chore: normalize line endings

12 files changed, 1840 insertions, 1846 deletions

diff --git a/apps/web/src/components/editor/panels/preview/bookmark-note-overlay.tsx b/apps/web/src/components/editor/panels/preview/bookmark-note-overlay.tsx
index 4ace25ac..3d96f762 100644
--- a/apps/web/src/components/editor/panels/preview/bookmark-note-overlay.tsx
+++ b/apps/web/src/components/editor/panels/preview/bookmark-note-overlay.tsx
@@ -1,59 +1,59 @@
-"use client";
-
-import { useEditor } from "@/hooks/use-editor";
-import { findCurrentScene } from "@/lib/scenes";
-import { getBookmarksActiveAtTime } from "@/lib/timeline/bookmarks";
-
-export function BookmarkNoteOverlay() {
-	const editor = useEditor();
-	const currentTime = editor.playback.getCurrentTime();
-	const activeProject = editor.project.getActive();
-
-	if (!activeProject) {
-		return null;
-	}
-
-	const activeScene = findCurrentScene({
-		scenes: activeProject.scenes,
-		currentSceneId: activeProject.currentSceneId,
-	});
-
-	if (!activeScene) {
-		return null;
-	}
-
-	const bookmarks = activeScene.bookmarks;
-	const activeBookmarks = getBookmarksActiveAtTime({
-		bookmarks,
-		time: currentTime,
-	});
-	const bookmarksWithNotes = activeBookmarks.filter(
-		(bookmark) => bookmark.note != null && bookmark.note.trim() !== "",
-	);
-
-	if (bookmarksWithNotes.length === 0) {
-		return null;
-	}
-
-	return (
-		<div
-			className="pointer-events-none absolute top-2 left-2 flex flex-col gap-1.5"
-			aria-live="polite"
-		>
-			{bookmarksWithNotes.map((bookmark) => (
-				<div
-					key={bookmark.time}
-					className="flex max-w-[min(200px,50vw)] px-2.5 py-1.5 text-left text-white text-xs shadow-md backdrop-blur-sm"
-					style={{
-						backgroundColor: "rgb(0 0 0 / 0.5)",
-						borderLeft: bookmark.color
-							? `3px solid ${bookmark.color}`
-							: "3px solid var(--primary)",
-					}}
-				>
-					{bookmark.note}
-				</div>
-			))}
-		</div>
-	);
-}
+"use client";

+

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

+import { findCurrentScene } from "@/lib/scenes";

+import { getBookmarksActiveAtTime } from "@/lib/timeline/bookmarks";

+

+export function BookmarkNoteOverlay() {

+	const editor = useEditor();

+	const currentTime = editor.playback.getCurrentTime();

+	const activeProject = editor.project.getActive();

+

+	if (!activeProject) {

+		return null;

+	}

+

+	const activeScene = findCurrentScene({

+		scenes: activeProject.scenes,

+		currentSceneId: activeProject.currentSceneId,

+	});

+

+	if (!activeScene) {

+		return null;

+	}

+

+	const bookmarks = activeScene.bookmarks;

+	const activeBookmarks = getBookmarksActiveAtTime({

+		bookmarks,

+		time: currentTime,

+	});

+	const bookmarksWithNotes = activeBookmarks.filter(

+		(bookmark) => bookmark.note != null && bookmark.note.trim() !== "",

+	);

+

+	if (bookmarksWithNotes.length === 0) {

+		return null;

+	}

+

+	return (

+		<div

+			className="pointer-events-none absolute top-2 left-2 flex flex-col gap-1.5"

+			aria-live="polite"

+		>

+			{bookmarksWithNotes.map((bookmark) => (

+				<div

+					key={bookmark.time}

+					className="flex max-w-[min(200px,50vw)] px-2.5 py-1.5 text-left text-white text-xs shadow-md backdrop-blur-sm"

+					style={{

+						backgroundColor: "rgb(0 0 0 / 0.5)",

+						borderLeft: bookmark.color

+							? `3px solid ${bookmark.color}`

+							: "3px solid var(--primary)",

+					}}

+				>

+					{bookmark.note}

+				</div>

+			))}

+		</div>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/context-menu.tsx b/apps/web/src/components/editor/panels/preview/context-menu.tsx
index 13226378..677f35db 100644
--- a/apps/web/src/components/editor/panels/preview/context-menu.tsx
+++ b/apps/web/src/components/editor/panels/preview/context-menu.tsx
@@ -1,73 +1,73 @@
-"use client";
-
-import {
-	ContextMenuCheckboxItem,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuSeparator,
-} from "@/components/ui/context-menu";
-import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
-import { useEditor } from "@/hooks/use-editor";
-import { usePreviewStore } from "@/stores/preview-store";
-import { toast } from "sonner";
-
-export function PreviewContextMenu({
-	onToggleFullscreen,
-	containerRef,
-}: {
-	onToggleFullscreen: () => void;
-	containerRef: React.RefObject<HTMLElement | null>;
-}) {
-	const editor = useEditor();
-	const viewport = usePreviewViewport();
-	const { overlays, setOverlayVisibility } = usePreviewStore();
-
-	const handleCopySnapshot = async () => {
-		const result = await editor.renderer.copySnapshot();
-
-		if (!result.success) {
-			toast.error("Failed to copy snapshot", {
-				description: result.error ?? "Please try again",
-			});
-			return;
-		}
-	};
-
-	const handleSaveSnapshot = async () => {
-		const result = await editor.renderer.saveSnapshot();
-
-		if (!result.success) {
-			toast.error("Failed to save snapshot", {
-				description: result.error ?? "Please try again",
-			});
-			return;
-		}
-	};
-
-	return (
-		<ContextMenuContent className="w-56" container={containerRef.current}>
-			<ContextMenuItem onClick={viewport.fitToScreen} inset>
-				Fit to screen
-			</ContextMenuItem>
-			<ContextMenuSeparator />
-			<ContextMenuItem onClick={onToggleFullscreen} inset>
-				Full screen
-			</ContextMenuItem>
-			<ContextMenuItem onClick={handleSaveSnapshot} inset>
-				Save snapshot
-			</ContextMenuItem>
-			<ContextMenuItem onClick={handleCopySnapshot} inset>
-				Copy snapshot
-			</ContextMenuItem>
-			<ContextMenuSeparator />
-			<ContextMenuCheckboxItem
-				checked={overlays.bookmarks}
-				onCheckedChange={(checked) =>
-					setOverlayVisibility({ overlay: "bookmarks", isVisible: !!checked })
-				}
-			>
-				Show bookmark notes
-			</ContextMenuCheckboxItem>
-		</ContextMenuContent>
-	);
-}
+"use client";

+

+import {

+	ContextMenuCheckboxItem,

+	ContextMenuContent,

+	ContextMenuItem,

+	ContextMenuSeparator,

+} from "@/components/ui/context-menu";

+import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";

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

+import { usePreviewStore } from "@/stores/preview-store";

+import { toast } from "sonner";

+

+export function PreviewContextMenu({

+	onToggleFullscreen,

+	containerRef,

+}: {

+	onToggleFullscreen: () => void;

+	containerRef: React.RefObject<HTMLElement | null>;

+}) {

+	const editor = useEditor();

+	const viewport = usePreviewViewport();

+	const { overlays, setOverlayVisibility } = usePreviewStore();

+

+	const handleCopySnapshot = async () => {

+		const result = await editor.renderer.copySnapshot();

+

+		if (!result.success) {

+			toast.error("Failed to copy snapshot", {

+				description: result.error ?? "Please try again",

+			});

+			return;

+		}

+	};

+

+	const handleSaveSnapshot = async () => {

+		const result = await editor.renderer.saveSnapshot();

+

+		if (!result.success) {

+			toast.error("Failed to save snapshot", {

+				description: result.error ?? "Please try again",

+			});

+			return;

+		}

+	};

+

+	return (

+		<ContextMenuContent className="w-56" container={containerRef.current}>

+			<ContextMenuItem onClick={viewport.fitToScreen} inset>

+				Fit to screen

+			</ContextMenuItem>

+			<ContextMenuSeparator />

+			<ContextMenuItem onClick={onToggleFullscreen} inset>

+				Full screen

+			</ContextMenuItem>

+			<ContextMenuItem onClick={handleSaveSnapshot} inset>

+				Save snapshot

+			</ContextMenuItem>

+			<ContextMenuItem onClick={handleCopySnapshot} inset>

+				Copy snapshot

+			</ContextMenuItem>

+			<ContextMenuSeparator />

+			<ContextMenuCheckboxItem

+				checked={overlays.bookmarks}

+				onCheckedChange={(checked) =>

+					setOverlayVisibility({ overlay: "bookmarks", isVisible: !!checked })

+				}

+			>

+				Show bookmark notes

+			</ContextMenuCheckboxItem>

+		</ContextMenuContent>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/guide-overlay.tsx b/apps/web/src/components/editor/panels/preview/guide-overlay.tsx
index ad7a621f..4270fcb3 100644
--- a/apps/web/src/components/editor/panels/preview/guide-overlay.tsx
+++ b/apps/web/src/components/editor/panels/preview/guide-overlay.tsx
@@ -1,32 +1,32 @@
-"use client";
-
-import { getGuideById } from "@/lib/guides";
-import { usePreviewStore } from "@/stores/preview-store";
-import { usePreviewViewport } from "./preview-viewport";
-
-export function GuideOverlay() {
-	const activeGuide = usePreviewStore((state) => state.activeGuide);
-	const viewport = usePreviewViewport();
-	const guide = getGuideById(activeGuide);
-
-	if (!guide) {
-		return null;
-	}
-
-	return (
-		<div
-			className="pointer-events-none absolute"
-			style={{
-				left: viewport.sceneLeft,
-				top: viewport.sceneTop,
-				width: viewport.sceneWidth,
-				height: viewport.sceneHeight,
-			}}
-		>
-			{guide.renderOverlay({
-				width: viewport.sceneWidth,
-				height: viewport.sceneHeight,
-			})}
-		</div>
-	);
-}
+"use client";

+

+import { getGuideById } from "@/lib/guides";

+import { usePreviewStore } from "@/stores/preview-store";

+import { usePreviewViewport } from "./preview-viewport";

+

+export function GuideOverlay() {

+	const activeGuide = usePreviewStore((state) => state.activeGuide);

+	const viewport = usePreviewViewport();

+	const guide = getGuideById(activeGuide);

+

+	if (!guide) {

+		return null;

+	}

+

+	return (

+		<div

+			className="pointer-events-none absolute"

+			style={{

+				left: viewport.sceneLeft,

+				top: viewport.sceneTop,

+				width: viewport.sceneWidth,

+				height: viewport.sceneHeight,

+			}}

+		>

+			{guide.renderOverlay({

+				width: viewport.sceneWidth,

+				height: viewport.sceneHeight,

+			})}

+		</div>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/guide-popover.tsx b/apps/web/src/components/editor/panels/preview/guide-popover.tsx
index e6d3df51..bcac8075 100644
--- a/apps/web/src/components/editor/panels/preview/guide-popover.tsx
+++ b/apps/web/src/components/editor/panels/preview/guide-popover.tsx
@@ -1,100 +1,100 @@
-"use client";
-
-import { AnimatePresence, motion } from "motion/react";
-import { GUIDE_REGISTRY, getGuideById } from "@/lib/guides";
-import { usePreviewStore } from "@/stores/preview-store";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/utils/ui";
-
-export function GridPopover({ children }: { children: React.ReactNode }) {
-	const activeGuide = usePreviewStore((state) => state.activeGuide);
-	const toggleGuide = usePreviewStore((state) => state.toggleGuide);
-	const activeGuideDef = getGuideById(activeGuide);
-	const options = activeGuideDef?.renderOptions?.();
-
-	return (
-		<Popover>
-			<PopoverTrigger>{children}</PopoverTrigger>
-			<PopoverContent sideOffset={8} className="w-60 px-0">
-				<div className="flex flex-col gap-2 px-4">
-					<Label>Guides</Label>
-					<div className="grid grid-cols-3 gap-1">
-						{GUIDE_REGISTRY.map((guide) => (
-							<GridItem
-								key={guide.id}
-								label={guide.label}
-								preview={guide.renderPreview()}
-								isSelected={activeGuide === guide.id}
-								onClick={() => toggleGuide(guide.id)}
-							/>
-						))}
-					</div>
-				</div>
-				<AnimatePresence>
-					{options && (
-						<motion.div
-							initial={{ height: 0, opacity: 0 }}
-							animate={{ height: "auto", opacity: 1 }}
-							exit={{ height: 0, opacity: 0 }}
-							transition={{
-								height: { type: "spring", duration: 0.2, bounce: 0 },
-								opacity: { duration: 0.2 },
-							}}
-							className="overflow-hidden"
-						>
-							<Separator className="my-3" />
-							<div className="px-4">{options}</div>
-						</motion.div>
-					)}
-				</AnimatePresence>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-function GridItem({
-	label,
-	preview,
-	isSelected,
-	onClick,
-}: {
-	label: string;
-	preview: React.ReactNode;
-	isSelected?: boolean;
-	onClick: () => void;
-}) {
-	return (
-		<button
-			type="button"
-			onClick={onClick}
-			aria-pressed={isSelected}
-			className={cn(
-				"flex cursor-pointer rounded-sm flex-col gap-2 px-1.5 py-1.5 hover:bg-foreground/5",
-				isSelected && "bg-primary/5! text-primary",
-			)}
-		>
-			<div
-				className={cn(
-					"aspect-video bg-foreground/5 flex items-center justify-center rounded-sm",
-					isSelected && "bg-primary/5!",
-				)}
-			>
-				{preview}
-			</div>
-			<span
-				className={cn(
-					"text-xs",
-					isSelected ? "text-primary" : "text-muted-foreground",
-				)}
-			>
-				{label}
-			</span>
-		</button>
-	);
-}
+"use client";

+

+import { AnimatePresence, motion } from "motion/react";

+import { GUIDE_REGISTRY, getGuideById } from "@/lib/guides";

+import { usePreviewStore } from "@/stores/preview-store";

+import {

+	Popover,

+	PopoverContent,

+	PopoverTrigger,

+} from "@/components/ui/popover";

+import { Label } from "@/components/ui/label";

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

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

+

+export function GridPopover({ children }: { children: React.ReactNode }) {

+	const activeGuide = usePreviewStore((state) => state.activeGuide);

+	const toggleGuide = usePreviewStore((state) => state.toggleGuide);

+	const activeGuideDef = getGuideById(activeGuide);

+	const options = activeGuideDef?.renderOptions?.();

+

+	return (

+		<Popover>

+			<PopoverTrigger>{children}</PopoverTrigger>

+			<PopoverContent sideOffset={8} className="w-60 px-0">

+				<div className="flex flex-col gap-2 px-4">

+					<Label>Guides</Label>

+					<div className="grid grid-cols-3 gap-1">

+						{GUIDE_REGISTRY.map((guide) => (

+							<GridItem

+								key={guide.id}

+								label={guide.label}

+								preview={guide.renderPreview()}

+								isSelected={activeGuide === guide.id}

+								onClick={() => toggleGuide(guide.id)}

+							/>

+						))}

+					</div>

+				</div>

+				<AnimatePresence>

+					{options && (

+						<motion.div

+							initial={{ height: 0, opacity: 0 }}

+							animate={{ height: "auto", opacity: 1 }}

+							exit={{ height: 0, opacity: 0 }}

+							transition={{

+								height: { type: "spring", duration: 0.2, bounce: 0 },

+								opacity: { duration: 0.2 },

+							}}

+							className="overflow-hidden"

+						>

+							<Separator className="my-3" />

+							<div className="px-4">{options}</div>

+						</motion.div>

+					)}

+				</AnimatePresence>

+			</PopoverContent>

+		</Popover>

+	);

+}

+

+function GridItem({

+	label,

+	preview,

+	isSelected,

+	onClick,

+}: {

+	label: string;

+	preview: React.ReactNode;

+	isSelected?: boolean;

+	onClick: () => void;

+}) {

+	return (

+		<button

+			type="button"

+			onClick={onClick}

+			aria-pressed={isSelected}

+			className={cn(

+				"flex cursor-pointer rounded-sm flex-col gap-2 px-1.5 py-1.5 hover:bg-foreground/5",

+				isSelected && "bg-primary/5! text-primary",

+			)}

+		>

+			<div

+				className={cn(

+					"aspect-video bg-foreground/5 flex items-center justify-center rounded-sm",

+					isSelected && "bg-primary/5!",

+				)}

+			>

+				{preview}

+			</div>

+			<span

+				className={cn(

+					"text-xs",

+					isSelected ? "text-primary" : "text-muted-foreground",

+				)}

+			>

+				{label}

+			</span>

+		</button>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/handle-primitives.tsx b/apps/web/src/components/editor/panels/preview/handle-primitives.tsx
index 44b8a7f1..d4de3332 100644
--- a/apps/web/src/components/editor/panels/preview/handle-primitives.tsx
+++ b/apps/web/src/components/editor/panels/preview/handle-primitives.tsx
@@ -1,332 +1,332 @@
-"use client";
-
-import { cn } from "@/utils/ui";
-import { HugeiconsIcon } from "@hugeicons/react";
-import type { IconSvgElement } from "@hugeicons/react";
-
-export const HANDLE_SIZE = 10;
-export const HANDLE_HIT_AREA_SIZE = 18;
-export const ICON_HANDLE_RADIUS = 10;
-export const EDGE_HANDLE_THIN_SIZE = 6;
-export const EDGE_HANDLE_THICK_SIZE = 14;
-export const LINE_HIT_AREA_SIZE = 48;
-
-export function getResizeCursor({ angleDeg }: { angleDeg: number }): string {
-	const normalized = ((angleDeg % 180) + 180) % 180;
-	if (normalized < 22.5 || normalized >= 157.5) return "cursor-ew-resize";
-	if (normalized < 67.5) return "cursor-nwse-resize";
-	if (normalized < 112.5) return "cursor-ns-resize";
-	return "cursor-nesw-resize";
-}
-
-export function HandleButton({
-	screen,
-	cursor,
-	hitAreaSize,
-	className,
-	onPointerDown,
-	onPointerMove,
-	onPointerUp,
-	children,
-}: {
-	screen: { x: number; y: number };
-	cursor?: string;
-	hitAreaSize: number;
-	className?: string;
-	onPointerDown: (event: React.PointerEvent) => void;
-	onPointerMove: (event: React.PointerEvent) => void;
-	onPointerUp: (event: React.PointerEvent) => void;
-	children: React.ReactNode;
-}) {
-	return (
-		<button
-			type="button"
-			className={cn(
-				"absolute flex items-center justify-center outline-none",
-				cursor,
-				className,
-			)}
-			style={{
-				left: screen.x - hitAreaSize / 2,
-				top: screen.y - hitAreaSize / 2,
-				width: hitAreaSize,
-				height: hitAreaSize,
-				pointerEvents: "auto",
-			}}
-			onPointerDown={onPointerDown}
-			onPointerMove={onPointerMove}
-			onPointerUp={onPointerUp}
-			onPointerLeave={onPointerUp}
-			onKeyDown={(event) => event.key === "Enter" && event.preventDefault()}
-			onKeyUp={(event) => event.key === "Enter" && event.preventDefault()}
-		>
-			{children}
-		</button>
-	);
-}
-
-export function CornerHandle({
-	cursor,
-	screen,
-	onPointerDown,
-	onPointerMove,
-	onPointerUp,
-}: {
-	cursor?: string;
-	screen: { x: number; y: number };
-	onPointerDown: (event: React.PointerEvent) => void;
-	onPointerMove: (event: React.PointerEvent) => void;
-	onPointerUp: (event: React.PointerEvent) => void;
-}) {
-	return (
-		<HandleButton
-			screen={screen}
-			cursor={cursor}
-			hitAreaSize={HANDLE_HIT_AREA_SIZE}
-			onPointerDown={onPointerDown}
-			onPointerMove={onPointerMove}
-			onPointerUp={onPointerUp}
-		>
-			<div
-				className="rounded-sm bg-white"
-				style={{ width: HANDLE_SIZE, height: HANDLE_SIZE }}
-			/>
-		</HandleButton>
-	);
-}
-
-export function EdgeHandle({
-	edge,
-	screen,
-	rotation,
-	onPointerDown,
-	onPointerMove,
-	onPointerUp,
-}: {
-	edge: "right" | "left" | "bottom";
-	screen: { x: number; y: number };
-	rotation: number;
-	onPointerDown: (event: React.PointerEvent) => void;
-	onPointerMove: (event: React.PointerEvent) => void;
-	onPointerUp: (event: React.PointerEvent) => void;
-}) {
-	const isHorizontalEdge = edge === "right" || edge === "left";
-	const width = isHorizontalEdge
-		? EDGE_HANDLE_THIN_SIZE
-		: EDGE_HANDLE_THICK_SIZE;
-	const height = isHorizontalEdge
-		? EDGE_HANDLE_THICK_SIZE
-		: EDGE_HANDLE_THIN_SIZE;
-	const cursor = getResizeCursor({
-		angleDeg: isHorizontalEdge ? rotation : rotation + 90,
-	});
-
-	return (
-		<HandleButton
-			screen={screen}
-			cursor={cursor}
-			hitAreaSize={HANDLE_HIT_AREA_SIZE}
-			onPointerDown={onPointerDown}
-			onPointerMove={onPointerMove}
-			onPointerUp={onPointerUp}
-		>
-			<div
-				className="rounded-sm bg-white"
-				style={{ width, height, transform: `rotate(${rotation}deg)` }}
-			/>
-		</HandleButton>
-	);
-}
-
-export function IconHandle({
-	icon,
-	screen,
-	onPointerDown,
-	onPointerMove,
-	onPointerUp,
-}: {
-	icon: IconSvgElement;
-	screen: { x: number; y: number };
-	onPointerDown: (event: React.PointerEvent) => void;
-	onPointerMove: (event: React.PointerEvent) => void;
-	onPointerUp: (event: React.PointerEvent) => void;
-}) {
-	return (
-		<HandleButton
-			screen={screen}
-			hitAreaSize={ICON_HANDLE_RADIUS * 2}
-			className="rounded-full bg-white text-black shadow-sm"
-			onPointerDown={onPointerDown}
-			onPointerMove={onPointerMove}
-			onPointerUp={onPointerUp}
-		>
-			<HugeiconsIcon icon={icon} className="size-3" strokeWidth={2.5} />
-		</HandleButton>
-	);
-}
-
-export function BoundingBoxOutline({
-	center,
-	outlineWidth,
-	outlineHeight,
-	rotation,
-	cursor,
-	dashed = false,
-	onPointerDown,
-	onPointerMove,
-	onPointerUp,
-}: {
-	center: { x: number; y: number };
-	outlineWidth: number;
-	outlineHeight: number;
-	rotation: number;
-	cursor?: string;
-	dashed?: boolean;
-	onPointerDown?: (event: React.PointerEvent) => void;
-	onPointerMove?: (event: React.PointerEvent) => void;
-	onPointerUp?: (event: React.PointerEvent) => void;
-}) {
-	return (
-		<svg
-			className={cn("absolute overflow-visible", cursor)}
-			aria-hidden="true"
-			focusable="false"
-			style={{
-				left: center.x - outlineWidth / 2,
-				top: center.y - outlineHeight / 2,
-				width: outlineWidth,
-				height: outlineHeight,
-				transform: `rotate(${rotation}deg)`,
-				transformOrigin: "center center",
-				pointerEvents: onPointerDown ? "auto" : "none",
-			}}
-			onPointerDown={onPointerDown}
-			onPointerMove={onPointerMove}
-			onPointerUp={onPointerUp}
-			onPointerLeave={onPointerUp}
-		>
-			<rect
-				x={0.5}
-				y={0.5}
-				width={Math.max(outlineWidth - 1, 0)}
-				height={Math.max(outlineHeight - 1, 0)}
-				fill="transparent"
-				stroke="white"
-				strokeDasharray={dashed ? "4 4" : undefined}
-				strokeOpacity={0.75}
-				vectorEffect="non-scaling-stroke"
-				style={{ pointerEvents: onPointerDown ? "all" : "none" }}
-			/>
-		</svg>
-	);
-}
-
-export function ShapeOutline({
-	center,
-	outlineWidth,
-	outlineHeight,
-	rotation,
-	pathData,
-	cursor,
-	onPointerDown,
-	onPointerMove,
-	onPointerUp,
-}: {
-	center: { x: number; y: number };
-	outlineWidth: number;
-	outlineHeight: number;
-	rotation: number;
-	pathData: string;
-	cursor?: string;
-	onPointerDown?: (event: React.PointerEvent) => void;
-	onPointerMove?: (event: React.PointerEvent) => void;
-	onPointerUp?: (event: React.PointerEvent) => void;
-}) {
-	return (
-		<svg
-			className={cn("absolute overflow-visible", cursor)}
-			aria-hidden="true"
-			focusable="false"
-			style={{
-				left: center.x - outlineWidth / 2,
-				top: center.y - outlineHeight / 2,
-				width: outlineWidth,
-				height: outlineHeight,
-				transform: `rotate(${rotation}deg)`,
-				transformOrigin: "center center",
-				pointerEvents: onPointerDown ? "auto" : "none",
-			}}
-			onPointerDown={onPointerDown}
-			onPointerMove={onPointerMove}
-			onPointerUp={onPointerUp}
-			onPointerLeave={onPointerUp}
-		>
-			<path
-				d={pathData}
-				fill="transparent"
-				stroke="white"
-				strokeOpacity={0.75}
-				vectorEffect="non-scaling-stroke"
-				style={{ pointerEvents: onPointerDown ? "all" : "none" }}
-			/>
-		</svg>
-	);
-}
-
-export function LineOverlay({
-	start,
-	end,
-	onPointerDown,
-	onPointerMove,
-	onPointerUp,
-}: {
-	start: { x: number; y: number };
-	end: { x: number; y: number };
-	onPointerDown?: (event: React.PointerEvent) => void;
-	onPointerMove?: (event: React.PointerEvent) => void;
-	onPointerUp?: (event: React.PointerEvent) => void;
-}) {
-	const dx = end.x - start.x;
-	const dy = end.y - start.y;
-	const length = Math.sqrt(dx * dx + dy * dy);
-	const angleDeg = (Math.atan2(dy, dx) * 180) / Math.PI;
-	const cx = (start.x + end.x) / 2;
-	const cy = (start.y + end.y) / 2;
-
-	const sharedStyle = {
-		left: cx - length / 2,
-		width: length,
-		transform: `rotate(${angleDeg}deg)`,
-		transformOrigin: "center center",
-	};
-
-	return (
-		<>
-			{onPointerDown && (
-				<div
-					className="absolute"
-					style={{
-						...sharedStyle,
-						top: cy - LINE_HIT_AREA_SIZE / 2,
-						height: LINE_HIT_AREA_SIZE,
-						pointerEvents: "auto",
-					}}
-					onPointerDown={onPointerDown}
-					onPointerMove={onPointerMove}
-					onPointerUp={onPointerUp}
-					onPointerLeave={onPointerUp}
-				/>
-			)}
-			<div
-				className="pointer-events-none absolute"
-				style={{
-					...sharedStyle,
-					top: cy - 0.5,
-					height: 1,
-					backgroundColor: "white",
-					opacity: 0.75,
-				}}
-			/>
-		</>
-	);
-}
+"use client";

+

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

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

+import type { IconSvgElement } from "@hugeicons/react";

+

+export const HANDLE_SIZE = 10;

+export const HANDLE_HIT_AREA_SIZE = 18;

+export const ICON_HANDLE_RADIUS = 10;

+export const EDGE_HANDLE_THIN_SIZE = 6;

+export const EDGE_HANDLE_THICK_SIZE = 14;

+export const LINE_HIT_AREA_SIZE = 48;

+

+export function getResizeCursor({ angleDeg }: { angleDeg: number }): string {

+	const normalized = ((angleDeg % 180) + 180) % 180;

+	if (normalized < 22.5 || normalized >= 157.5) return "cursor-ew-resize";

+	if (normalized < 67.5) return "cursor-nwse-resize";

+	if (normalized < 112.5) return "cursor-ns-resize";

+	return "cursor-nesw-resize";

+}

+

+export function HandleButton({

+	screen,

+	cursor,

+	hitAreaSize,

+	className,

+	onPointerDown,

+	onPointerMove,

+	onPointerUp,

+	children,

+}: {

+	screen: { x: number; y: number };

+	cursor?: string;

+	hitAreaSize: number;

+	className?: string;

+	onPointerDown: (event: React.PointerEvent) => void;

+	onPointerMove: (event: React.PointerEvent) => void;

+	onPointerUp: (event: React.PointerEvent) => void;

+	children: React.ReactNode;

+}) {

+	return (

+		<button

+			type="button"

+			className={cn(

+				"absolute flex items-center justify-center outline-none",

+				cursor,

+				className,

+			)}

+			style={{

+				left: screen.x - hitAreaSize / 2,

+				top: screen.y - hitAreaSize / 2,

+				width: hitAreaSize,

+				height: hitAreaSize,

+				pointerEvents: "auto",

+			}}

+			onPointerDown={onPointerDown}

+			onPointerMove={onPointerMove}

+			onPointerUp={onPointerUp}

+			onPointerLeave={onPointerUp}

+			onKeyDown={(event) => event.key === "Enter" && event.preventDefault()}

+			onKeyUp={(event) => event.key === "Enter" && event.preventDefault()}

+		>

+			{children}

+		</button>

+	);

+}

+

+export function CornerHandle({

+	cursor,

+	screen,

+	onPointerDown,

+	onPointerMove,

+	onPointerUp,

+}: {

+	cursor?: string;

+	screen: { x: number; y: number };

+	onPointerDown: (event: React.PointerEvent) => void;

+	onPointerMove: (event: React.PointerEvent) => void;

+	onPointerUp: (event: React.PointerEvent) => void;

+}) {

+	return (

+		<HandleButton

+			screen={screen}

+			cursor={cursor}

+			hitAreaSize={HANDLE_HIT_AREA_SIZE}

+			onPointerDown={onPointerDown}

+			onPointerMove={onPointerMove}

+			onPointerUp={onPointerUp}

+		>

+			<div

+				className="rounded-sm bg-white"

+				style={{ width: HANDLE_SIZE, height: HANDLE_SIZE }}

+			/>

+		</HandleButton>

+	);

+}

+

+export function EdgeHandle({

+	edge,

+	screen,

+	rotation,

+	onPointerDown,

+	onPointerMove,

+	onPointerUp,

+}: {

+	edge: "right" | "left" | "bottom";

+	screen: { x: number; y: number };

+	rotation: number;

+	onPointerDown: (event: React.PointerEvent) => void;

+	onPointerMove: (event: React.PointerEvent) => void;

+	onPointerUp: (event: React.PointerEvent) => void;

+}) {

+	const isHorizontalEdge = edge === "right" || edge === "left";

+	const width = isHorizontalEdge

+		? EDGE_HANDLE_THIN_SIZE

+		: EDGE_HANDLE_THICK_SIZE;

+	const height = isHorizontalEdge

+		? EDGE_HANDLE_THICK_SIZE

+		: EDGE_HANDLE_THIN_SIZE;

+	const cursor = getResizeCursor({

+		angleDeg: isHorizontalEdge ? rotation : rotation + 90,

+	});

+

+	return (

+		<HandleButton

+			screen={screen}

+			cursor={cursor}

+			hitAreaSize={HANDLE_HIT_AREA_SIZE}

+			onPointerDown={onPointerDown}

+			onPointerMove={onPointerMove}

+			onPointerUp={onPointerUp}

+		>

+			<div

+				className="rounded-sm bg-white"

+				style={{ width, height, transform: `rotate(${rotation}deg)` }}

+			/>

+		</HandleButton>

+	);

+}

+

+export function IconHandle({

+	icon,

+	screen,

+	onPointerDown,

+	onPointerMove,

+	onPointerUp,

+}: {

+	icon: IconSvgElement;

+	screen: { x: number; y: number };

+	onPointerDown: (event: React.PointerEvent) => void;

+	onPointerMove: (event: React.PointerEvent) => void;

+	onPointerUp: (event: React.PointerEvent) => void;

+}) {

+	return (

+		<HandleButton

+			screen={screen}

+			hitAreaSize={ICON_HANDLE_RADIUS * 2}

+			className="rounded-full bg-white text-black shadow-sm"

+			onPointerDown={onPointerDown}

+			onPointerMove={onPointerMove}

+			onPointerUp={onPointerUp}

+		>

+			<HugeiconsIcon icon={icon} className="size-3" strokeWidth={2.5} />

+		</HandleButton>

+	);

+}

+

+export function BoundingBoxOutline({

+	center,

+	outlineWidth,

+	outlineHeight,

+	rotation,

+	cursor,

+	dashed = false,

+	onPointerDown,

+	onPointerMove,

+	onPointerUp,

+}: {

+	center: { x: number; y: number };

+	outlineWidth: number;

+	outlineHeight: number;

+	rotation: number;

+	cursor?: string;

+	dashed?: boolean;

+	onPointerDown?: (event: React.PointerEvent) => void;

+	onPointerMove?: (event: React.PointerEvent) => void;

+	onPointerUp?: (event: React.PointerEvent) => void;

+}) {

+	return (

+		<svg

+			className={cn("absolute overflow-visible", cursor)}

+			aria-hidden="true"

+			focusable="false"

+			style={{

+				left: center.x - outlineWidth / 2,

+				top: center.y - outlineHeight / 2,

+				width: outlineWidth,

+				height: outlineHeight,

+				transform: `rotate(${rotation}deg)`,

+				transformOrigin: "center center",

+				pointerEvents: onPointerDown ? "auto" : "none",

+			}}

+			onPointerDown={onPointerDown}

+			onPointerMove={onPointerMove}

+			onPointerUp={onPointerUp}

+			onPointerLeave={onPointerUp}

+		>

+			<rect

+				x={0.5}

+				y={0.5}

+				width={Math.max(outlineWidth - 1, 0)}

+				height={Math.max(outlineHeight - 1, 0)}

+				fill="transparent"

+				stroke="white"

+				strokeDasharray={dashed ? "4 4" : undefined}

+				strokeOpacity={0.75}

+				vectorEffect="non-scaling-stroke"

+				style={{ pointerEvents: onPointerDown ? "all" : "none" }}

+			/>

+		</svg>

+	);

+}

+

+export function ShapeOutline({

+	center,

+	outlineWidth,

+	outlineHeight,

+	rotation,

+	pathData,

+	cursor,

+	onPointerDown,

+	onPointerMove,

+	onPointerUp,

+}: {

+	center: { x: number; y: number };

+	outlineWidth: number;

+	outlineHeight: number;

+	rotation: number;

+	pathData: string;

+	cursor?: string;

+	onPointerDown?: (event: React.PointerEvent) => void;

+	onPointerMove?: (event: React.PointerEvent) => void;

+	onPointerUp?: (event: React.PointerEvent) => void;

+}) {

+	return (

+		<svg

+			className={cn("absolute overflow-visible", cursor)}

+			aria-hidden="true"

+			focusable="false"

+			style={{

+				left: center.x - outlineWidth / 2,

+				top: center.y - outlineHeight / 2,

+				width: outlineWidth,

+				height: outlineHeight,

+				transform: `rotate(${rotation}deg)`,

+				transformOrigin: "center center",

+				pointerEvents: onPointerDown ? "auto" : "none",

+			}}

+			onPointerDown={onPointerDown}

+			onPointerMove={onPointerMove}

+			onPointerUp={onPointerUp}

+			onPointerLeave={onPointerUp}

+		>

+			<path

+				d={pathData}

+				fill="transparent"

+				stroke="white"

+				strokeOpacity={0.75}

+				vectorEffect="non-scaling-stroke"

+				style={{ pointerEvents: onPointerDown ? "all" : "none" }}

+			/>

+		</svg>

+	);

+}

+

+export function LineOverlay({

+	start,

+	end,

+	onPointerDown,

+	onPointerMove,

+	onPointerUp,

+}: {

+	start: { x: number; y: number };

+	end: { x: number; y: number };

+	onPointerDown?: (event: React.PointerEvent) => void;

+	onPointerMove?: (event: React.PointerEvent) => void;

+	onPointerUp?: (event: React.PointerEvent) => void;

+}) {

+	const dx = end.x - start.x;

+	const dy = end.y - start.y;

+	const length = Math.sqrt(dx * dx + dy * dy);

+	const angleDeg = (Math.atan2(dy, dx) * 180) / Math.PI;

+	const cx = (start.x + end.x) / 2;

+	const cy = (start.y + end.y) / 2;

+

+	const sharedStyle = {

+		left: cx - length / 2,

+		width: length,

+		transform: `rotate(${angleDeg}deg)`,

+		transformOrigin: "center center",

+	};

+

+	return (

+		<>

+			{onPointerDown && (

+				<div

+					className="absolute"

+					style={{

+						...sharedStyle,

+						top: cy - LINE_HIT_AREA_SIZE / 2,

+						height: LINE_HIT_AREA_SIZE,

+						pointerEvents: "auto",

+					}}

+					onPointerDown={onPointerDown}

+					onPointerMove={onPointerMove}

+					onPointerUp={onPointerUp}

+					onPointerLeave={onPointerUp}

+				/>

+			)}

+			<div

+				className="pointer-events-none absolute"

+				style={{

+					...sharedStyle,

+					top: cy - 0.5,

+					height: 1,

+					backgroundColor: "white",

+					opacity: 0.75,

+				}}

+			/>

+		</>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/index.tsx b/apps/web/src/components/editor/panels/preview/index.tsx
index c625b9bf..8cfe7f49 100644
--- a/apps/web/src/components/editor/panels/preview/index.tsx
+++ b/apps/web/src/components/editor/panels/preview/index.tsx
@@ -9,7 +9,6 @@ import { useFullscreen } from "@/hooks/use-fullscreen";
 import { CanvasRenderer } from "@/services/renderer/canvas-renderer";
 import type { RootNode } from "@/services/renderer/nodes/root-node";
 import { buildScene } from "@/services/renderer/scene-builder";
-import { getLastFrameTime } from "@/lib/time";
 import { PreviewInteractionOverlay } from "./preview-interaction-overlay";
 import { BookmarkNoteOverlay } from "./bookmark-note-overlay";
 import { GuideOverlay } from "./guide-overlay";
@@ -134,12 +133,7 @@ function PreviewCanvas({
 
 	const render = useCallback(() => {
 		if (canvasRef.current && renderTree && !renderingRef.current) {
-			const time = editor.playback.getCurrentTime();
-			const lastFrameTime = getLastFrameTime({
-				duration: renderTree.duration,
-				fps: renderer.fps,
-			});
-			const renderTime = Math.min(time, lastFrameTime);
+			const renderTime = editor.playback.getCurrentTime();
 			const frame = Math.floor(renderTime * renderer.fps);
 
 			if (
diff --git a/apps/web/src/components/editor/panels/preview/preview-interaction-overlay.tsx b/apps/web/src/components/editor/panels/preview/preview-interaction-overlay.tsx
index 65c11726..515cb91a 100644
--- a/apps/web/src/components/editor/panels/preview/preview-interaction-overlay.tsx
+++ b/apps/web/src/components/editor/panels/preview/preview-interaction-overlay.tsx
@@ -1,117 +1,117 @@
-import { useState } from "react";
-import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
-import { usePreviewInteraction } from "@/hooks/use-preview-interaction";
-import type { SnapLine } from "@/lib/preview/preview-snap";
-import { TransformHandles } from "./transform-handles";
-import { MaskHandles } from "./mask-handles";
-import { SnapGuides } from "./snap-guides";
-import { TextEditOverlay } from "./text-edit-overlay";
-import { usePropertiesStore } from "../properties/stores/properties-store";
-import { useEditor } from "@/hooks/use-editor";
-
-export function PreviewInteractionOverlay() {
-	const [snapLines, setSnapLines] = useState<SnapLine[]>([]);
-	const editor = useEditor();
-	const viewport = usePreviewViewport();
-	const selectedElements = useEditor((e) => e.selection.getSelectedElements());
-	const activeTabPerType = usePropertiesStore((s) => s.activeTabPerType);
-
-	const selectedRef =
-		selectedElements.length === 1 ? selectedElements[0] : null;
-	const activeTrack = selectedRef
-		? editor.timeline.getTrackById({ trackId: selectedRef.trackId })
-		: null;
-	const activeElement =
-		activeTrack?.elements.find(
-			(element) => element.id === selectedRef?.elementId,
-		) ?? null;
-	const isMaskMode = activeElement
-		? activeTabPerType[activeElement.type] === "masks"
-		: false;
-
-	const {
-		onPointerDown,
-		onPointerMove,
-		onPointerUp,
-		onDoubleClick,
-		editingText,
-		commitTextEdit,
-	} = usePreviewInteraction({
-		onSnapLinesChange: setSnapLines,
-		isMaskMode,
-	});
-
-	const handlePointerDown = (event: React.PointerEvent) => {
-		if (viewport.handlePanPointerDown({ event })) {
-			return;
-		}
-
-		onPointerDown(event);
-	};
-
-	const handlePointerMove = (event: React.PointerEvent) => {
-		if (viewport.handlePanPointerMove({ event })) {
-			return;
-		}
-
-		onPointerMove(event);
-	};
-
-	const handlePointerUp = (event: React.PointerEvent) => {
-		if (viewport.handlePanPointerUp({ event })) {
-			return;
-		}
-
-		onPointerUp(event);
-	};
-
-	const handleContextMenu = (e: React.MouseEvent) => {
-		const x = e.nativeEvent.offsetX;
-		const y = e.nativeEvent.offsetY;
-		const outsideCanvas =
-			x < viewport.sceneLeft ||
-			x > viewport.sceneLeft + viewport.sceneWidth ||
-			y < viewport.sceneTop ||
-			y > viewport.sceneTop + viewport.sceneHeight;
-		if (outsideCanvas) {
-			e.stopPropagation();
-		}
-	};
-
-	return (
-		<div className="absolute inset-0">
-			<div
-				className="absolute inset-0 pointer-events-auto"
-				role="application"
-				aria-label="Preview canvas"
-				style={{
-					cursor: viewport.isPanning
-						? "grabbing"
-						: viewport.canPan
-							? "default"
-							: undefined,
-				}}
-				onPointerDown={handlePointerDown}
-				onPointerMove={handlePointerMove}
-				onPointerUp={handlePointerUp}
-				onPointerCancel={handlePointerUp}
-				onDoubleClick={onDoubleClick}
-				onDragStart={(e) => e.preventDefault()}
-				onContextMenu={handleContextMenu}
-			/>
-			{editingText ? (
-				<TextEditOverlay
-					trackId={editingText.trackId}
-					elementId={editingText.elementId}
-					element={editingText.element}
-					onCommit={commitTextEdit}
-				/>
-			) : isMaskMode ? (
-				<MaskHandles onSnapLinesChange={setSnapLines} />
-			) : (
-				<TransformHandles onSnapLinesChange={setSnapLines} />
-			)}
-			<SnapGuides lines={snapLines} />
-		</div>
-	);
-}
+import { useState } from "react";

+import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";

+import { usePreviewInteraction } from "@/hooks/use-preview-interaction";

+import type { SnapLine } from "@/lib/preview/preview-snap";

+import { TransformHandles } from "./transform-handles";

+import { MaskHandles } from "./mask-handles";

+import { SnapGuides } from "./snap-guides";

+import { TextEditOverlay } from "./text-edit-overlay";

+import { usePropertiesStore } from "../properties/stores/properties-store";

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

+

+export function PreviewInteractionOverlay() {

+	const [snapLines, setSnapLines] = useState<SnapLine[]>([]);

+	const editor = useEditor();

+	const viewport = usePreviewViewport();

+	const selectedElements = useEditor((e) => e.selection.getSelectedElements());

+	const activeTabPerType = usePropertiesStore((s) => s.activeTabPerType);

+

+	const selectedRef =

+		selectedElements.length === 1 ? selectedElements[0] : null;

+	const activeTrack = selectedRef

+		? editor.timeline.getTrackById({ trackId: selectedRef.trackId })

+		: null;

+	const activeElement =

+		activeTrack?.elements.find(

+			(element) => element.id === selectedRef?.elementId,

+		) ?? null;

+	const isMaskMode = activeElement

+		? activeTabPerType[activeElement.type] === "masks"

+		: false;

+

+	const {

+		onPointerDown,

+		onPointerMove,

+		onPointerUp,

+		onDoubleClick,

+		editingText,

+		commitTextEdit,

+	} = usePreviewInteraction({

+		onSnapLinesChange: setSnapLines,

+		isMaskMode,

+	});

+

+	const handlePointerDown = (event: React.PointerEvent) => {

+		if (viewport.handlePanPointerDown({ event })) {

+			return;

+		}

+

+		onPointerDown(event);

+	};

+

+	const handlePointerMove = (event: React.PointerEvent) => {

+		if (viewport.handlePanPointerMove({ event })) {

+			return;

+		}

+

+		onPointerMove(event);

+	};

+

+	const handlePointerUp = (event: React.PointerEvent) => {

+		if (viewport.handlePanPointerUp({ event })) {

+			return;

+		}

+

+		onPointerUp(event);

+	};

+

+	const handleContextMenu = (e: React.MouseEvent) => {

+		const x = e.nativeEvent.offsetX;

+		const y = e.nativeEvent.offsetY;

+		const outsideCanvas =

+			x < viewport.sceneLeft ||

+			x > viewport.sceneLeft + viewport.sceneWidth ||

+			y < viewport.sceneTop ||

+			y > viewport.sceneTop + viewport.sceneHeight;

+		if (outsideCanvas) {

+			e.stopPropagation();

+		}

+	};

+

+	return (

+		<div className="absolute inset-0">

+			<div

+				className="absolute inset-0 pointer-events-auto"

+				role="application"

+				aria-label="Preview canvas"

+				style={{

+					cursor: viewport.isPanning

+						? "grabbing"

+						: viewport.canPan

+							? "default"

+							: undefined,

+				}}

+				onPointerDown={handlePointerDown}

+				onPointerMove={handlePointerMove}

+				onPointerUp={handlePointerUp}

+				onPointerCancel={handlePointerUp}

+				onDoubleClick={onDoubleClick}

+				onDragStart={(e) => e.preventDefault()}

+				onContextMenu={handleContextMenu}

+			/>

+			{editingText ? (

+				<TextEditOverlay

+					trackId={editingText.trackId}

+					elementId={editingText.elementId}

+					element={editingText.element}

+					onCommit={commitTextEdit}

+				/>

+			) : isMaskMode ? (

+				<MaskHandles onSnapLinesChange={setSnapLines} />

+			) : (

+				<TransformHandles onSnapLinesChange={setSnapLines} />

+			)}

+			<SnapGuides lines={snapLines} />

+		</div>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/preview-viewport.tsx b/apps/web/src/components/editor/panels/preview/preview-viewport.tsx
index e38183af..8fd38768 100644
--- a/apps/web/src/components/editor/panels/preview/preview-viewport.tsx
+++ b/apps/web/src/components/editor/panels/preview/preview-viewport.tsx
@@ -1,576 +1,576 @@
-"use client";
-
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import {
-	canvasToOverlay,
-	getDisplayScale,
-	positionToOverlay,
-	screenPixelsToLogicalThreshold,
-	screenToCanvas,
-} from "@/lib/preview/preview-coords";
-import { clamp, isNearlyEqual } from "@/utils/math";
-import { PREVIEW_ZOOM } from "@/constants/editor-constants";
-
-const MIDDLE_MOUSE_BUTTON = 1;
-const IS_AT_FIT_EPSILON = 0.001;
-const IS_AT_ACTUAL_SIZE_EPSILON = 0.01;
-
-interface PreviewViewportContextValue {
-	canPan: boolean;
-	isAtFit: boolean;
-	isAtActualSize: boolean;
-	isPanning: boolean;
-	sceneHeight: number;
-	sceneLeft: number;
-	sceneTop: number;
-	sceneWidth: number;
-	zoomPercent: number;
-	canvasToOverlay: ({
-		canvasX,
-		canvasY,
-	}: {
-		canvasX: number;
-		canvasY: number;
-	}) => { x: number; y: number };
-	fitToScreen: () => void;
-	getDisplayScale: () => { x: number; y: number };
-	handlePanPointerDown: ({ event }: { event: React.PointerEvent }) => boolean;
-	handlePanPointerMove: ({ event }: { event: React.PointerEvent }) => boolean;
-	handlePanPointerUp: ({ event }: { event: React.PointerEvent }) => boolean;
-	positionToOverlay: ({
-		positionX,
-		positionY,
-	}: {
-		positionX: number;
-		positionY: number;
-	}) => { x: number; y: number };
-	panByScreenDelta: ({
-		deltaX,
-		deltaY,
-	}: {
-		deltaX: number;
-		deltaY: number;
-	}) => void;
-	resetPan: () => void;
-	scaleZoom: ({ factor }: { factor: number }) => void;
-	screenPixelsToLogicalThreshold: ({
-		screenPixels,
-	}: {
-		screenPixels: number;
-	}) => { x: number; y: number };
-	screenToCanvas: ({
-		clientX,
-		clientY,
-	}: {
-		clientX: number;
-		clientY: number;
-	}) => { x: number; y: number } | null;
-	setActualSize: () => void;
-	setViewportPercent: ({ percent }: { percent: number }) => void;
-	zoomIn: () => void;
-	zoomOut: () => void;
-}
-
-const PreviewViewportContext =
-	createContext<PreviewViewportContextValue | null>(null);
-
-interface PreviewViewportProviderProps {
-	children: React.ReactNode;
-	value: PreviewViewportContextValue;
-}
-
-interface PreviewViewportStateOptions {
-	canvasHeight: number;
-	canvasWidth: number;
-	viewportHeight: number;
-	viewportRef: React.RefObject<HTMLDivElement | null>;
-	viewportWidth: number;
-}
-
-interface PanSession {
-	centerX: number;
-	centerY: number;
-	clientX: number;
-	clientY: number;
-	pointerId: number;
-}
-
-function getClampedCenterAxis({
-	axisSize,
-	center,
-	scale,
-	viewportSize,
-}: {
-	axisSize: number;
-	center: number;
-	scale: number;
-	viewportSize: number;
-}): number {
-	if (axisSize <= 0 || scale <= 0 || viewportSize <= 0) {
-		return axisSize / 2;
-	}
-
-	const visibleHalfSpan = viewportSize / (2 * scale);
-	if (visibleHalfSpan >= axisSize / 2) {
-		return axisSize / 2;
-	}
-
-	return clamp({
-		value: center,
-		min: visibleHalfSpan,
-		max: axisSize - visibleHalfSpan,
-	});
-}
-
-function clampViewportCenter({
-	canvasHeight,
-	canvasWidth,
-	centerX,
-	centerY,
-	scale,
-	viewportHeight,
-	viewportWidth,
-}: {
-	canvasHeight: number;
-	canvasWidth: number;
-	centerX: number;
-	centerY: number;
-	scale: number;
-	viewportHeight: number;
-	viewportWidth: number;
-}): { x: number; y: number } {
-	return {
-		x: getClampedCenterAxis({
-			center: centerX,
-			axisSize: canvasWidth,
-			scale,
-			viewportSize: viewportWidth,
-		}),
-		y: getClampedCenterAxis({
-			center: centerY,
-			axisSize: canvasHeight,
-			scale,
-			viewportSize: viewportHeight,
-		}),
-	};
-}
-
-function getFitScale({
-	canvasHeight,
-	canvasWidth,
-	viewportHeight,
-	viewportWidth,
-}: {
-	canvasHeight: number;
-	canvasWidth: number;
-	viewportHeight: number;
-	viewportWidth: number;
-}): number {
-	if (
-		canvasHeight <= 0 ||
-		canvasWidth <= 0 ||
-		viewportHeight <= 0 ||
-		viewportWidth <= 0
-	) {
-		return 1;
-	}
-
-	return Math.min(viewportWidth / canvasWidth, viewportHeight / canvasHeight);
-}
-
-function getClampedZoom({ zoom }: { zoom: number }): number {
-	return clamp({
-		value: zoom,
-		min: PREVIEW_ZOOM.min,
-		max: PREVIEW_ZOOM.max,
-	});
-}
-
-export function PreviewViewportProvider({
-	children,
-	value,
-}: PreviewViewportProviderProps) {
-	return (
-		<PreviewViewportContext.Provider value={value}>
-			{children}
-		</PreviewViewportContext.Provider>
-	);
-}
-
-export function usePreviewViewportState({
-	canvasHeight,
-	canvasWidth,
-	viewportHeight,
-	viewportRef,
-	viewportWidth,
-}: PreviewViewportStateOptions): PreviewViewportContextValue {
-	const [zoom, setZoomState] = useState(1);
-	const [center, setCenter] = useState(() => ({
-		x: canvasWidth / 2,
-		y: canvasHeight / 2,
-	}));
-	const [isPanning, setIsPanning] = useState(false);
-	const panSessionRef = useRef<PanSession | null>(null);
-	const centerRef = useRef(center);
-	centerRef.current = center;
-
-	const fitScale = useMemo(
-		() =>
-			getFitScale({
-				canvasHeight,
-				canvasWidth,
-				viewportHeight,
-				viewportWidth,
-			}),
-		[canvasHeight, canvasWidth, viewportHeight, viewportWidth],
-	);
-	const viewportScale = fitScale * zoom;
-	const geometry = useMemo(
-		() => ({
-			canvasHeight,
-			canvasWidth,
-			centerX: center.x,
-			centerY: center.y,
-			scale: viewportScale,
-			viewportHeight,
-			viewportWidth,
-		}),
-		[
-			canvasHeight,
-			canvasWidth,
-			center.x,
-			center.y,
-			viewportHeight,
-			viewportScale,
-			viewportWidth,
-		],
-	);
-
-	const scaleZoom = useCallback(({ factor }: { factor: number }) => {
-		setZoomState((previousZoom) =>
-			getClampedZoom({
-				zoom: previousZoom * factor,
-			}),
-		);
-	}, []);
-
-	const panByScreenDelta = useCallback(
-		({ deltaX, deltaY }: { deltaX: number; deltaY: number }) => {
-			if (zoom <= 1 || (deltaX === 0 && deltaY === 0)) {
-				return;
-			}
-
-			setCenter((previousCenter) =>
-				clampViewportCenter({
-					canvasHeight,
-					canvasWidth,
-					centerX: previousCenter.x + deltaX / viewportScale,
-					centerY: previousCenter.y + deltaY / viewportScale,
-					scale: viewportScale,
-					viewportHeight,
-					viewportWidth,
-				}),
-			);
-		},
-		[
-			canvasHeight,
-			canvasWidth,
-			viewportHeight,
-			viewportScale,
-			viewportWidth,
-			zoom,
-		],
-	);
-
-	const resetPan = useCallback(() => {
-		setCenter({
-			x: canvasWidth / 2,
-			y: canvasHeight / 2,
-		});
-	}, [canvasHeight, canvasWidth]);
-
-	const fitToScreen = useCallback(() => {
-		setZoomState(1);
-		setCenter({
-			x: canvasWidth / 2,
-			y: canvasHeight / 2,
-		});
-	}, [canvasHeight, canvasWidth]);
-
-	const zoomIn = useCallback(() => {
-		setZoomState((previousZoom) =>
-			getClampedZoom({
-				zoom: previousZoom * PREVIEW_ZOOM.step,
-			}),
-		);
-	}, []);
-
-	const zoomOut = useCallback(() => {
-		setZoomState((previousZoom) =>
-			getClampedZoom({
-				zoom: previousZoom / PREVIEW_ZOOM.step,
-			}),
-		);
-	}, []);
-
-	const setActualSize = useCallback(() => {
-		const actualSizeZoom = fitScale > 0 ? 1 / fitScale : 1;
-		setZoomState(
-			getClampedZoom({
-				zoom: actualSizeZoom,
-			}),
-		);
-	}, [fitScale]);
-
-	const setViewportPercent = useCallback(
-		({ percent }: { percent: number }) => {
-			const targetZoom = fitScale > 0 ? percent / 100 / fitScale : 1;
-			setZoomState(getClampedZoom({ zoom: targetZoom }));
-		},
-		[fitScale],
-	);
-
-	const getViewportRect = useCallback(
-		() => viewportRef.current?.getBoundingClientRect() ?? null,
-		[viewportRef],
-	);
-
-	const screenToCanvasWithViewport = useCallback(
-		({ clientX, clientY }: { clientX: number; clientY: number }) => {
-			const viewportRect = getViewportRect();
-			if (!viewportRect) return null;
-
-			return screenToCanvas({
-				clientX,
-				clientY,
-				geometry,
-				viewportRect,
-			});
-		},
-		[getViewportRect, geometry],
-	);
-
-	const canvasToOverlayWithViewport = useCallback(
-		({ canvasX, canvasY }: { canvasX: number; canvasY: number }) =>
-			canvasToOverlay({
-				canvasX,
-				canvasY,
-				geometry,
-			}),
-		[geometry],
-	);
-
-	const positionToOverlayWithViewport = useCallback(
-		({ positionX, positionY }: { positionX: number; positionY: number }) =>
-			positionToOverlay({
-				geometry,
-				positionX,
-				positionY,
-			}),
-		[geometry],
-	);
-
-	const getDisplayScaleWithViewport = useCallback(
-		() => getDisplayScale({ geometry }),
-		[geometry],
-	);
-
-	const getLogicalThresholdForScreenPixels = useCallback(
-		({ screenPixels }: { screenPixels: number }) =>
-			screenPixelsToLogicalThreshold({
-				geometry,
-				screenPixels,
-			}),
-		[geometry],
-	);
-
-	const handlePanPointerDown = useCallback(
-		({ event }: { event: React.PointerEvent }) => {
-			if (event.button !== MIDDLE_MOUSE_BUTTON || zoom <= 1) {
-				return false;
-			}
-
-			event.preventDefault();
-			event.stopPropagation();
-
-			panSessionRef.current = {
-				centerX: centerRef.current.x,
-				centerY: centerRef.current.y,
-				clientX: event.clientX,
-				clientY: event.clientY,
-				pointerId: event.pointerId,
-			};
-			setIsPanning(true);
-			(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
-			return true;
-		},
-		[zoom],
-	);
-
-	const handlePanPointerMove = useCallback(
-		({ event }: { event: React.PointerEvent }) => {
-			const panSession = panSessionRef.current;
-			if (!panSession) {
-				return false;
-			}
-
-			event.preventDefault();
-			event.stopPropagation();
-
-			const deltaX = event.clientX - panSession.clientX;
-			const deltaY = event.clientY - panSession.clientY;
-			const nextCenter = clampViewportCenter({
-				canvasHeight,
-				canvasWidth,
-				centerX: panSession.centerX - deltaX / viewportScale,
-				centerY: panSession.centerY - deltaY / viewportScale,
-				scale: viewportScale,
-				viewportHeight,
-				viewportWidth,
-			});
-
-			setCenter(nextCenter);
-			return true;
-		},
-		[canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth],
-	);
-
-	const handlePanPointerUp = useCallback(
-		({ event }: { event: React.PointerEvent }) => {
-			const panSession = panSessionRef.current;
-			if (!panSession) {
-				return false;
-			}
-
-			if (
-				(event.currentTarget as HTMLElement).hasPointerCapture(
-					panSession.pointerId,
-				)
-			) {
-				(event.currentTarget as HTMLElement).releasePointerCapture(
-					panSession.pointerId,
-				);
-			}
-
-			panSessionRef.current = null;
-			setIsPanning(false);
-			return true;
-		},
-		[],
-	);
-
-	useEffect(() => {
-		setZoomState(1);
-		setCenter({
-			x: canvasWidth / 2,
-			y: canvasHeight / 2,
-		});
-		panSessionRef.current = null;
-		setIsPanning(false);
-	}, [canvasHeight, canvasWidth]);
-
-	useEffect(() => {
-		setCenter((previousCenter) =>
-			clampViewportCenter({
-				canvasHeight,
-				canvasWidth,
-				centerX: previousCenter.x,
-				centerY: previousCenter.y,
-				scale: viewportScale,
-				viewportHeight,
-				viewportWidth,
-			}),
-		);
-	}, [canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth]);
-
-	const sceneWidth = canvasWidth * viewportScale;
-	const sceneHeight = canvasHeight * viewportScale;
-	const sceneLeft = viewportWidth / 2 - center.x * viewportScale;
-	const sceneTop = viewportHeight / 2 - center.y * viewportScale;
-	const canPan = zoom > 1;
-	const zoomPercent = Math.round(viewportScale * 100);
-
-	return useMemo(
-		() => ({
-			canPan,
-			isAtActualSize: isNearlyEqual({
-				leftValue: viewportScale,
-				rightValue: 1,
-				epsilon: IS_AT_ACTUAL_SIZE_EPSILON,
-			}),
-			isAtFit: isNearlyEqual({
-				leftValue: zoom,
-				rightValue: 1,
-				epsilon: IS_AT_FIT_EPSILON,
-			}),
-			isPanning,
-			sceneHeight,
-			sceneLeft,
-			sceneTop,
-			sceneWidth,
-			zoomPercent,
-			canvasToOverlay: canvasToOverlayWithViewport,
-			fitToScreen,
-			getDisplayScale: getDisplayScaleWithViewport,
-			handlePanPointerDown,
-			handlePanPointerMove,
-			handlePanPointerUp,
-			panByScreenDelta,
-			positionToOverlay: positionToOverlayWithViewport,
-			resetPan,
-			scaleZoom,
-			screenPixelsToLogicalThreshold: getLogicalThresholdForScreenPixels,
-			screenToCanvas: screenToCanvasWithViewport,
-			setActualSize,
-			setViewportPercent,
-			zoomIn,
-			zoomOut,
-		}),
-		[
-			canPan,
-			viewportScale,
-			zoom,
-			isPanning,
-			sceneHeight,
-			sceneLeft,
-			sceneTop,
-			sceneWidth,
-			zoomPercent,
-			canvasToOverlayWithViewport,
-			fitToScreen,
-			getDisplayScaleWithViewport,
-			handlePanPointerDown,
-			handlePanPointerMove,
-			handlePanPointerUp,
-			panByScreenDelta,
-			positionToOverlayWithViewport,
-			resetPan,
-			scaleZoom,
-			getLogicalThresholdForScreenPixels,
-			screenToCanvasWithViewport,
-			setActualSize,
-			setViewportPercent,
-			zoomIn,
-			zoomOut,
-		],
-	);
-}
-
-export function usePreviewViewport() {
-	const context = useContext(PreviewViewportContext);
-	if (!context) {
-		throw new Error(
-			"usePreviewViewport must be used within PreviewViewportProvider",
-		);
-	}
-
-	return context;
-}
+"use client";

+

+import {

+	createContext,

+	useCallback,

+	useContext,

+	useEffect,

+	useMemo,

+	useRef,

+	useState,

+} from "react";

+import {

+	canvasToOverlay,

+	getDisplayScale,

+	positionToOverlay,

+	screenPixelsToLogicalThreshold,

+	screenToCanvas,

+} from "@/lib/preview/preview-coords";

+import { clamp, isNearlyEqual } from "@/utils/math";

+import { PREVIEW_ZOOM } from "@/constants/editor-constants";

+

+const MIDDLE_MOUSE_BUTTON = 1;

+const IS_AT_FIT_EPSILON = 0.001;

+const IS_AT_ACTUAL_SIZE_EPSILON = 0.01;

+

+interface PreviewViewportContextValue {

+	canPan: boolean;

+	isAtFit: boolean;

+	isAtActualSize: boolean;

+	isPanning: boolean;

+	sceneHeight: number;

+	sceneLeft: number;

+	sceneTop: number;

+	sceneWidth: number;

+	zoomPercent: number;

+	canvasToOverlay: ({

+		canvasX,

+		canvasY,

+	}: {

+		canvasX: number;

+		canvasY: number;

+	}) => { x: number; y: number };

+	fitToScreen: () => void;

+	getDisplayScale: () => { x: number; y: number };

+	handlePanPointerDown: ({ event }: { event: React.PointerEvent }) => boolean;

+	handlePanPointerMove: ({ event }: { event: React.PointerEvent }) => boolean;

+	handlePanPointerUp: ({ event }: { event: React.PointerEvent }) => boolean;

+	positionToOverlay: ({

+		positionX,

+		positionY,

+	}: {

+		positionX: number;

+		positionY: number;

+	}) => { x: number; y: number };

+	panByScreenDelta: ({

+		deltaX,

+		deltaY,

+	}: {

+		deltaX: number;

+		deltaY: number;

+	}) => void;

+	resetPan: () => void;

+	scaleZoom: ({ factor }: { factor: number }) => void;

+	screenPixelsToLogicalThreshold: ({

+		screenPixels,

+	}: {

+		screenPixels: number;

+	}) => { x: number; y: number };

+	screenToCanvas: ({

+		clientX,

+		clientY,

+	}: {

+		clientX: number;

+		clientY: number;

+	}) => { x: number; y: number } | null;

+	setActualSize: () => void;

+	setViewportPercent: ({ percent }: { percent: number }) => void;

+	zoomIn: () => void;

+	zoomOut: () => void;

+}

+

+const PreviewViewportContext =

+	createContext<PreviewViewportContextValue | null>(null);

+

+interface PreviewViewportProviderProps {

+	children: React.ReactNode;

+	value: PreviewViewportContextValue;

+}

+

+interface PreviewViewportStateOptions {

+	canvasHeight: number;

+	canvasWidth: number;

+	viewportHeight: number;

+	viewportRef: React.RefObject<HTMLDivElement | null>;

+	viewportWidth: number;

+}

+

+interface PanSession {

+	centerX: number;

+	centerY: number;

+	clientX: number;

+	clientY: number;

+	pointerId: number;

+}

+

+function getClampedCenterAxis({

+	axisSize,

+	center,

+	scale,

+	viewportSize,

+}: {

+	axisSize: number;

+	center: number;

+	scale: number;

+	viewportSize: number;

+}): number {

+	if (axisSize <= 0 || scale <= 0 || viewportSize <= 0) {

+		return axisSize / 2;

+	}

+

+	const visibleHalfSpan = viewportSize / (2 * scale);

+	if (visibleHalfSpan >= axisSize / 2) {

+		return axisSize / 2;

+	}

+

+	return clamp({

+		value: center,

+		min: visibleHalfSpan,

+		max: axisSize - visibleHalfSpan,

+	});

+}

+

+function clampViewportCenter({

+	canvasHeight,

+	canvasWidth,

+	centerX,

+	centerY,

+	scale,

+	viewportHeight,

+	viewportWidth,

+}: {

+	canvasHeight: number;

+	canvasWidth: number;

+	centerX: number;

+	centerY: number;

+	scale: number;

+	viewportHeight: number;

+	viewportWidth: number;

+}): { x: number; y: number } {

+	return {

+		x: getClampedCenterAxis({

+			center: centerX,

+			axisSize: canvasWidth,

+			scale,

+			viewportSize: viewportWidth,

+		}),

+		y: getClampedCenterAxis({

+			center: centerY,

+			axisSize: canvasHeight,

+			scale,

+			viewportSize: viewportHeight,

+		}),

+	};

+}

+

+function getFitScale({

+	canvasHeight,

+	canvasWidth,

+	viewportHeight,

+	viewportWidth,

+}: {

+	canvasHeight: number;

+	canvasWidth: number;

+	viewportHeight: number;

+	viewportWidth: number;

+}): number {

+	if (

+		canvasHeight <= 0 ||

+		canvasWidth <= 0 ||

+		viewportHeight <= 0 ||

+		viewportWidth <= 0

+	) {

+		return 1;

+	}

+

+	return Math.min(viewportWidth / canvasWidth, viewportHeight / canvasHeight);

+}

+

+function getClampedZoom({ zoom }: { zoom: number }): number {

+	return clamp({

+		value: zoom,

+		min: PREVIEW_ZOOM.min,

+		max: PREVIEW_ZOOM.max,

+	});

+}

+

+export function PreviewViewportProvider({

+	children,

+	value,

+}: PreviewViewportProviderProps) {

+	return (

+		<PreviewViewportContext.Provider value={value}>

+			{children}

+		</PreviewViewportContext.Provider>

+	);

+}

+

+export function usePreviewViewportState({

+	canvasHeight,

+	canvasWidth,

+	viewportHeight,

+	viewportRef,

+	viewportWidth,

+}: PreviewViewportStateOptions): PreviewViewportContextValue {

+	const [zoom, setZoomState] = useState(1);

+	const [center, setCenter] = useState(() => ({

+		x: canvasWidth / 2,

+		y: canvasHeight / 2,

+	}));

+	const [isPanning, setIsPanning] = useState(false);

+	const panSessionRef = useRef<PanSession | null>(null);

+	const centerRef = useRef(center);

+	centerRef.current = center;

+

+	const fitScale = useMemo(

+		() =>

+			getFitScale({

+				canvasHeight,

+				canvasWidth,

+				viewportHeight,

+				viewportWidth,

+			}),

+		[canvasHeight, canvasWidth, viewportHeight, viewportWidth],

+	);

+	const viewportScale = fitScale * zoom;

+	const geometry = useMemo(

+		() => ({

+			canvasHeight,

+			canvasWidth,

+			centerX: center.x,

+			centerY: center.y,

+			scale: viewportScale,

+			viewportHeight,

+			viewportWidth,

+		}),

+		[

+			canvasHeight,

+			canvasWidth,

+			center.x,

+			center.y,

+			viewportHeight,

+			viewportScale,

+			viewportWidth,

+		],

+	);

+

+	const scaleZoom = useCallback(({ factor }: { factor: number }) => {

+		setZoomState((previousZoom) =>

+			getClampedZoom({

+				zoom: previousZoom * factor,

+			}),

+		);

+	}, []);

+

+	const panByScreenDelta = useCallback(

+		({ deltaX, deltaY }: { deltaX: number; deltaY: number }) => {

+			if (zoom <= 1 || (deltaX === 0 && deltaY === 0)) {

+				return;

+			}

+

+			setCenter((previousCenter) =>

+				clampViewportCenter({

+					canvasHeight,

+					canvasWidth,

+					centerX: previousCenter.x + deltaX / viewportScale,

+					centerY: previousCenter.y + deltaY / viewportScale,

+					scale: viewportScale,

+					viewportHeight,

+					viewportWidth,

+				}),

+			);

+		},

+		[

+			canvasHeight,

+			canvasWidth,

+			viewportHeight,

+			viewportScale,

+			viewportWidth,

+			zoom,

+		],

+	);

+

+	const resetPan = useCallback(() => {

+		setCenter({

+			x: canvasWidth / 2,

+			y: canvasHeight / 2,

+		});

+	}, [canvasHeight, canvasWidth]);

+

+	const fitToScreen = useCallback(() => {

+		setZoomState(1);

+		setCenter({

+			x: canvasWidth / 2,

+			y: canvasHeight / 2,

+		});

+	}, [canvasHeight, canvasWidth]);

+

+	const zoomIn = useCallback(() => {

+		setZoomState((previousZoom) =>

+			getClampedZoom({

+				zoom: previousZoom * PREVIEW_ZOOM.step,

+			}),

+		);

+	}, []);

+

+	const zoomOut = useCallback(() => {

+		setZoomState((previousZoom) =>

+			getClampedZoom({

+				zoom: previousZoom / PREVIEW_ZOOM.step,

+			}),

+		);

+	}, []);

+

+	const setActualSize = useCallback(() => {

+		const actualSizeZoom = fitScale > 0 ? 1 / fitScale : 1;

+		setZoomState(

+			getClampedZoom({

+				zoom: actualSizeZoom,

+			}),

+		);

+	}, [fitScale]);

+

+	const setViewportPercent = useCallback(

+		({ percent }: { percent: number }) => {

+			const targetZoom = fitScale > 0 ? percent / 100 / fitScale : 1;

+			setZoomState(getClampedZoom({ zoom: targetZoom }));

+		},

+		[fitScale],

+	);

+

+	const getViewportRect = useCallback(

+		() => viewportRef.current?.getBoundingClientRect() ?? null,

+		[viewportRef],

+	);

+

+	const screenToCanvasWithViewport = useCallback(

+		({ clientX, clientY }: { clientX: number; clientY: number }) => {

+			const viewportRect = getViewportRect();

+			if (!viewportRect) return null;

+

+			return screenToCanvas({

+				clientX,

+				clientY,

+				geometry,

+				viewportRect,

+			});

+		},

+		[getViewportRect, geometry],

+	);

+

+	const canvasToOverlayWithViewport = useCallback(

+		({ canvasX, canvasY }: { canvasX: number; canvasY: number }) =>

+			canvasToOverlay({

+				canvasX,

+				canvasY,

+				geometry,

+			}),

+		[geometry],

+	);

+

+	const positionToOverlayWithViewport = useCallback(

+		({ positionX, positionY }: { positionX: number; positionY: number }) =>

+			positionToOverlay({

+				geometry,

+				positionX,

+				positionY,

+			}),

+		[geometry],

+	);

+

+	const getDisplayScaleWithViewport = useCallback(

+		() => getDisplayScale({ geometry }),

+		[geometry],

+	);

+

+	const getLogicalThresholdForScreenPixels = useCallback(

+		({ screenPixels }: { screenPixels: number }) =>

+			screenPixelsToLogicalThreshold({

+				geometry,

+				screenPixels,

+			}),

+		[geometry],

+	);

+

+	const handlePanPointerDown = useCallback(

+		({ event }: { event: React.PointerEvent }) => {

+			if (event.button !== MIDDLE_MOUSE_BUTTON || zoom <= 1) {

+				return false;

+			}

+

+			event.preventDefault();

+			event.stopPropagation();

+

+			panSessionRef.current = {

+				centerX: centerRef.current.x,

+				centerY: centerRef.current.y,

+				clientX: event.clientX,

+				clientY: event.clientY,

+				pointerId: event.pointerId,

+			};

+			setIsPanning(true);

+			(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);

+			return true;

+		},

+		[zoom],

+	);

+

+	const handlePanPointerMove = useCallback(

+		({ event }: { event: React.PointerEvent }) => {

+			const panSession = panSessionRef.current;

+			if (!panSession) {

+				return false;

+			}

+

+			event.preventDefault();

+			event.stopPropagation();

+

+			const deltaX = event.clientX - panSession.clientX;

+			const deltaY = event.clientY - panSession.clientY;

+			const nextCenter = clampViewportCenter({

+				canvasHeight,

+				canvasWidth,

+				centerX: panSession.centerX - deltaX / viewportScale,

+				centerY: panSession.centerY - deltaY / viewportScale,

+				scale: viewportScale,

+				viewportHeight,

+				viewportWidth,

+			});

+

+			setCenter(nextCenter);

+			return true;

+		},

+		[canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth],

+	);

+

+	const handlePanPointerUp = useCallback(

+		({ event }: { event: React.PointerEvent }) => {

+			const panSession = panSessionRef.current;

+			if (!panSession) {

+				return false;

+			}

+

+			if (

+				(event.currentTarget as HTMLElement).hasPointerCapture(

+					panSession.pointerId,

+				)

+			) {

+				(event.currentTarget as HTMLElement).releasePointerCapture(

+					panSession.pointerId,

+				);

+			}

+

+			panSessionRef.current = null;

+			setIsPanning(false);

+			return true;

+		},

+		[],

+	);

+

+	useEffect(() => {

+		setZoomState(1);

+		setCenter({

+			x: canvasWidth / 2,

+			y: canvasHeight / 2,

+		});

+		panSessionRef.current = null;

+		setIsPanning(false);

+	}, [canvasHeight, canvasWidth]);

+

+	useEffect(() => {

+		setCenter((previousCenter) =>

+			clampViewportCenter({

+				canvasHeight,

+				canvasWidth,

+				centerX: previousCenter.x,

+				centerY: previousCenter.y,

+				scale: viewportScale,

+				viewportHeight,

+				viewportWidth,

+			}),

+		);

+	}, [canvasHeight, canvasWidth, viewportHeight, viewportScale, viewportWidth]);

+

+	const sceneWidth = canvasWidth * viewportScale;

+	const sceneHeight = canvasHeight * viewportScale;

+	const sceneLeft = viewportWidth / 2 - center.x * viewportScale;

+	const sceneTop = viewportHeight / 2 - center.y * viewportScale;

+	const canPan = zoom > 1;

+	const zoomPercent = Math.round(viewportScale * 100);

+

+	return useMemo(

+		() => ({

+			canPan,

+			isAtActualSize: isNearlyEqual({

+				leftValue: viewportScale,

+				rightValue: 1,

+				epsilon: IS_AT_ACTUAL_SIZE_EPSILON,

+			}),

+			isAtFit: isNearlyEqual({

+				leftValue: zoom,

+				rightValue: 1,

+				epsilon: IS_AT_FIT_EPSILON,

+			}),

+			isPanning,

+			sceneHeight,

+			sceneLeft,

+			sceneTop,

+			sceneWidth,

+			zoomPercent,

+			canvasToOverlay: canvasToOverlayWithViewport,

+			fitToScreen,

+			getDisplayScale: getDisplayScaleWithViewport,

+			handlePanPointerDown,

+			handlePanPointerMove,

+			handlePanPointerUp,

+			panByScreenDelta,

+			positionToOverlay: positionToOverlayWithViewport,

+			resetPan,

+			scaleZoom,

+			screenPixelsToLogicalThreshold: getLogicalThresholdForScreenPixels,

+			screenToCanvas: screenToCanvasWithViewport,

+			setActualSize,

+			setViewportPercent,

+			zoomIn,

+			zoomOut,

+		}),

+		[

+			canPan,

+			viewportScale,

+			zoom,

+			isPanning,

+			sceneHeight,

+			sceneLeft,

+			sceneTop,

+			sceneWidth,

+			zoomPercent,

+			canvasToOverlayWithViewport,

+			fitToScreen,

+			getDisplayScaleWithViewport,

+			handlePanPointerDown,

+			handlePanPointerMove,

+			handlePanPointerUp,

+			panByScreenDelta,

+			positionToOverlayWithViewport,

+			resetPan,

+			scaleZoom,

+			getLogicalThresholdForScreenPixels,

+			screenToCanvasWithViewport,

+			setActualSize,

+			setViewportPercent,

+			zoomIn,

+			zoomOut,

+		],

+	);

+}

+

+export function usePreviewViewport() {

+	const context = useContext(PreviewViewportContext);

+	if (!context) {

+		throw new Error(

+			"usePreviewViewport must be used within PreviewViewportProvider",

+		);

+	}

+

+	return context;

+}

diff --git a/apps/web/src/components/editor/panels/preview/snap-guides.tsx b/apps/web/src/components/editor/panels/preview/snap-guides.tsx
index 744304ea..ced5e921 100644
--- a/apps/web/src/components/editor/panels/preview/snap-guides.tsx
+++ b/apps/web/src/components/editor/panels/preview/snap-guides.tsx
@@ -1,47 +1,47 @@
-"use client";
-
-import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
-import type { SnapLine } from "@/lib/preview/preview-snap";
-
-export function SnapGuides({ lines }: { lines: SnapLine[] }) {
-	const viewport = usePreviewViewport();
-
-	if (lines.length === 0) {
-		return null;
-	}
-
-	const toOverlayX = (logicalX: number) =>
-		viewport.positionToOverlay({
-			positionX: logicalX,
-			positionY: 0,
-		}).x;
-
-	const toOverlayY = (logicalY: number) =>
-		viewport.positionToOverlay({
-			positionX: 0,
-			positionY: logicalY,
-		}).y;
-
-	return (
-		<div className="pointer-events-none absolute inset-0" aria-hidden>
-			{lines.map((line) => {
-				if (line.type === "vertical") {
-					return (
-						<div
-							key={`vertical-${line.position}`}
-							className="absolute top-0 bottom-0 w-px bg-white/70"
-							style={{ left: toOverlayX(line.position) }}
-						/>
-					);
-				}
-				return (
-					<div
-						key={`horizontal-${line.position}`}
-						className="absolute left-0 right-0 h-px bg-white/70"
-						style={{ top: toOverlayY(line.position) }}
-					/>
-				);
-			})}
-		</div>
-	);
-}
+"use client";

+

+import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";

+import type { SnapLine } from "@/lib/preview/preview-snap";

+

+export function SnapGuides({ lines }: { lines: SnapLine[] }) {

+	const viewport = usePreviewViewport();

+

+	if (lines.length === 0) {

+		return null;

+	}

+

+	const toOverlayX = (logicalX: number) =>

+		viewport.positionToOverlay({

+			positionX: logicalX,

+			positionY: 0,

+		}).x;

+

+	const toOverlayY = (logicalY: number) =>

+		viewport.positionToOverlay({

+			positionX: 0,

+			positionY: logicalY,

+		}).y;

+

+	return (

+		<div className="pointer-events-none absolute inset-0" aria-hidden>

+			{lines.map((line) => {

+				if (line.type === "vertical") {

+					return (

+						<div

+							key={`vertical-${line.position}`}

+							className="absolute top-0 bottom-0 w-px bg-white/70"

+							style={{ left: toOverlayX(line.position) }}

+						/>

+					);

+				}

+				return (

+					<div

+						key={`horizontal-${line.position}`}

+						className="absolute left-0 right-0 h-px bg-white/70"

+						style={{ top: toOverlayY(line.position) }}

+					/>

+				);

+			})}

+		</div>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
index d3c61a24..aff77f0f 100644
--- a/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
+++ b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
@@ -1,212 +1,212 @@
-"use client";
-
-import { useCallback, useEffect, useRef } from "react";
-import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
-import { useEditor } from "@/hooks/use-editor";
-import type { TextElement } from "@/lib/timeline";
-import {
-	FONT_SIZE_SCALE_REFERENCE,
-} from "@/constants/text-constants";
-import { DEFAULTS } from "@/lib/timeline/defaults";
-import {
-	getMetricAscent,
-	getMetricDescent,
-	setCanvasLetterSpacing,
-} from "@/lib/text/layout";
-
-let cachedCanvas: HTMLCanvasElement | null = null;
-
-function getMeasurementContext(): CanvasRenderingContext2D | null {
-	if (!cachedCanvas) cachedCanvas = document.createElement("canvas");
-	return cachedCanvas.getContext("2d");
-}
-
-/**
- * Uses fontBoundingBox metrics (which CSS uses for line box layout) rather than
- * actualBoundingBox to model where the browser places the baseline within the
- * line box, then measures actual glyph bounds to find the visual center.
- */
-function measureCSSVisualCenterOffset({
-	lines,
-	fontString,
-	letterSpacingPx,
-	lineHeightPx,
-	displayFontSize,
-}: {
-	lines: string[];
-	fontString: string;
-	letterSpacingPx: number;
-	lineHeightPx: number;
-	displayFontSize: number;
-}): number {
-	const ctx = getMeasurementContext();
-	if (!ctx) return 0;
-
-	ctx.font = fontString;
-	ctx.textBaseline = "alphabetic";
-	setCanvasLetterSpacing({ ctx, letterSpacingPx });
-
-	const probe = ctx.measureText("M");
-	const fontAscent = probe.fontBoundingBoxAscent ?? displayFontSize * 0.8;
-	const fontDescent = probe.fontBoundingBoxDescent ?? displayFontSize * 0.2;
-	const halfLeading = (lineHeightPx - fontAscent - fontDescent) / 2;
-
-	let visualTop = Number.POSITIVE_INFINITY;
-	let visualBottom = Number.NEGATIVE_INFINITY;
-
-	for (let i = 0; i < lines.length; i++) {
-		const metrics = ctx.measureText(lines[i] || " ");
-		const baseline = i * lineHeightPx + halfLeading + fontAscent;
-		visualTop = Math.min(
-			visualTop,
-			baseline - getMetricAscent({ metrics, fallbackFontSize: displayFontSize }),
-		);
-		visualBottom = Math.max(
-			visualBottom,
-			baseline + getMetricDescent({ metrics, fallbackFontSize: displayFontSize }),
-		);
-	}
-
-	const cssBlockHeight = lines.length * lineHeightPx;
-	return (visualTop + visualBottom) / 2 - cssBlockHeight / 2;
-}
-
-export function TextEditOverlay({
-	trackId,
-	elementId,
-	element,
-	onCommit,
-}: {
-	trackId: string;
-	elementId: string;
-	element: TextElement;
-	onCommit: () => void;
-}) {
-	const editor = useEditor();
-	const viewport = usePreviewViewport();
-	const divRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		const div = divRef.current;
-		if (!div) return;
-		div.focus();
-		const range = document.createRange();
-		range.selectNodeContents(div);
-		const selection = window.getSelection();
-		selection?.removeAllRanges();
-		selection?.addRange(range);
-	}, []);
-
-	const handleInput = useCallback(() => {
-		const div = divRef.current;
-		if (!div) return;
-		const text = div.innerText;
-		editor.timeline.previewElements({
-			updates: [{ trackId, elementId, updates: { content: text } }],
-		});
-	}, [editor.timeline, trackId, elementId]);
-
-	const handleKeyDown = useCallback(
-		({ event }: { event: React.KeyboardEvent }) => {
-			const { key } = event;
-			if (key === "Escape") {
-				event.preventDefault();
-				onCommit();
-				return;
-			}
-		},
-		[onCommit],
-	);
-
-	const canvasSize = editor.project.getActive().settings.canvasSize;
-
-	if (!canvasSize) return null;
-
-	const { x: posX, y: posY } = viewport.positionToOverlay({
-		positionX: element.transform.position.x,
-		positionY: element.transform.position.y,
-	});
-
-	const { x: displayScaleX } = viewport.getDisplayScale();
-
-	const displayFontSize =
-		element.fontSize *
-		(canvasSize.height / FONT_SIZE_SCALE_REFERENCE) *
-		displayScaleX;
-
-	const lineHeight = element.lineHeight ?? DEFAULTS.text.lineHeight;
-	const fontWeight = element.fontWeight === "bold" ? "bold" : "normal";
-	const fontStyle = element.fontStyle === "italic" ? "italic" : "normal";
-	const displayLetterSpacing = (element.letterSpacing ?? 0) * displayScaleX;
-	const lineHeightPx = displayFontSize * lineHeight;
-	const lines = (element.content || "").split("\n");
-	const fontString = `${fontStyle} ${fontWeight} ${displayFontSize}px "${element.fontFamily}", sans-serif`;
-
-	const cssVisualCenterOffset = measureCSSVisualCenterOffset({
-		lines,
-		fontString,
-		letterSpacingPx: displayLetterSpacing,
-		lineHeightPx,
-		displayFontSize,
-	});
-
-	const bg = element.background;
-	const shouldShowBackground =
-		bg.enabled && bg.color && bg.color !== "transparent";
-	const fontSizeRatio = element.fontSize / DEFAULTS.text.element.fontSize;
-	const displayPaddingX = shouldShowBackground
-		? (bg.paddingX ?? DEFAULTS.text.background.paddingX) *
-			fontSizeRatio *
-			displayScaleX
-		: 0;
-	const displayPaddingY = shouldShowBackground
-		? (bg.paddingY ?? DEFAULTS.text.background.paddingY) *
-			fontSizeRatio *
-			displayScaleX
-		: 0;
-
-	return (
-		<div
-			className="absolute"
-			style={{
-				left: posX,
-				top: posY - cssVisualCenterOffset,
-				transform: `translate(-50%, -50%) scale(${element.transform.scaleX}, ${element.transform.scaleY}) rotate(${element.transform.rotate}deg)`,
-				transformOrigin: "center center",
-			}}
-		>
-			{/* biome-ignore lint/a11y/useSemanticElements: contenteditable required for multiline, IME, paste */}
-			<div
-				ref={divRef}
-				contentEditable
-				suppressContentEditableWarning
-				tabIndex={0}
-				role="textbox"
-				aria-label="Edit text"
-				className="cursor-text select-text outline-none whitespace-pre"
-				style={{
-					fontSize: displayFontSize,
-					fontFamily: element.fontFamily,
-					fontWeight,
-					fontStyle,
-					textAlign: element.textAlign,
-					letterSpacing: `${displayLetterSpacing}px`,
-					lineHeight,
-					color: element.color,
-					backgroundColor: shouldShowBackground ? bg.color : "transparent",
-					minHeight: lineHeightPx,
-					textDecoration: element.textDecoration ?? "none",
-					padding: shouldShowBackground
-						? `${displayPaddingY}px ${displayPaddingX}px`
-						: 0,
-					minWidth: 1,
-				}}
-				onInput={handleInput}
-				onBlur={onCommit}
-				onKeyDown={(event) => handleKeyDown({ event })}
-			>
-				{element.content || ""}
-			</div>
-		</div>
-	);
-}
+"use client";

+

+import { useCallback, useEffect, useRef } from "react";

+import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";

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

+import type { TextElement } from "@/lib/timeline";

+import {

+	FONT_SIZE_SCALE_REFERENCE,

+} from "@/constants/text-constants";

+import { DEFAULTS } from "@/lib/timeline/defaults";

+import {

+	getMetricAscent,

+	getMetricDescent,

+	setCanvasLetterSpacing,

+} from "@/lib/text/layout";

+

+let cachedCanvas: HTMLCanvasElement | null = null;

+

+function getMeasurementContext(): CanvasRenderingContext2D | null {

+	if (!cachedCanvas) cachedCanvas = document.createElement("canvas");

+	return cachedCanvas.getContext("2d");

+}

+

+/**

+ * Uses fontBoundingBox metrics (which CSS uses for line box layout) rather than

+ * actualBoundingBox to model where the browser places the baseline within the

+ * line box, then measures actual glyph bounds to find the visual center.

+ */

+function measureCSSVisualCenterOffset({

+	lines,

+	fontString,

+	letterSpacingPx,

+	lineHeightPx,

+	displayFontSize,

+}: {

+	lines: string[];

+	fontString: string;

+	letterSpacingPx: number;

+	lineHeightPx: number;

+	displayFontSize: number;

+}): number {

+	const ctx = getMeasurementContext();

+	if (!ctx) return 0;

+

+	ctx.font = fontString;

+	ctx.textBaseline = "alphabetic";

+	setCanvasLetterSpacing({ ctx, letterSpacingPx });

+

+	const probe = ctx.measureText("M");

+	const fontAscent = probe.fontBoundingBoxAscent ?? displayFontSize * 0.8;

+	const fontDescent = probe.fontBoundingBoxDescent ?? displayFontSize * 0.2;

+	const halfLeading = (lineHeightPx - fontAscent - fontDescent) / 2;

+

+	let visualTop = Number.POSITIVE_INFINITY;

+	let visualBottom = Number.NEGATIVE_INFINITY;

+

+	for (let i = 0; i < lines.length; i++) {

+		const metrics = ctx.measureText(lines[i] || " ");

+		const baseline = i * lineHeightPx + halfLeading + fontAscent;

+		visualTop = Math.min(

+			visualTop,

+			baseline - getMetricAscent({ metrics, fallbackFontSize: displayFontSize }),

+		);

+		visualBottom = Math.max(

+			visualBottom,

+			baseline + getMetricDescent({ metrics, fallbackFontSize: displayFontSize }),

+		);

+	}

+

+	const cssBlockHeight = lines.length * lineHeightPx;

+	return (visualTop + visualBottom) / 2 - cssBlockHeight / 2;

+}

+

+export function TextEditOverlay({

+	trackId,

+	elementId,

+	element,

+	onCommit,

+}: {

+	trackId: string;

+	elementId: string;

+	element: TextElement;

+	onCommit: () => void;

+}) {

+	const editor = useEditor();

+	const viewport = usePreviewViewport();

+	const divRef = useRef<HTMLDivElement>(null);

+

+	useEffect(() => {

+		const div = divRef.current;

+		if (!div) return;

+		div.focus();

+		const range = document.createRange();

+		range.selectNodeContents(div);

+		const selection = window.getSelection();

+		selection?.removeAllRanges();

+		selection?.addRange(range);

+	}, []);

+

+	const handleInput = useCallback(() => {

+		const div = divRef.current;

+		if (!div) return;

+		const text = div.innerText;

+		editor.timeline.previewElements({

+			updates: [{ trackId, elementId, updates: { content: text } }],

+		});

+	}, [editor.timeline, trackId, elementId]);

+

+	const handleKeyDown = useCallback(

+		({ event }: { event: React.KeyboardEvent }) => {

+			const { key } = event;

+			if (key === "Escape") {

+				event.preventDefault();

+				onCommit();

+				return;

+			}

+		},

+		[onCommit],

+	);

+

+	const canvasSize = editor.project.getActive().settings.canvasSize;

+

+	if (!canvasSize) return null;

+

+	const { x: posX, y: posY } = viewport.positionToOverlay({

+		positionX: element.transform.position.x,

+		positionY: element.transform.position.y,

+	});

+

+	const { x: displayScaleX } = viewport.getDisplayScale();

+

+	const displayFontSize =

+		element.fontSize *

+		(canvasSize.height / FONT_SIZE_SCALE_REFERENCE) *

+		displayScaleX;

+

+	const lineHeight = element.lineHeight ?? DEFAULTS.text.lineHeight;

+	const fontWeight = element.fontWeight === "bold" ? "bold" : "normal";

+	const fontStyle = element.fontStyle === "italic" ? "italic" : "normal";

+	const displayLetterSpacing = (element.letterSpacing ?? 0) * displayScaleX;

+	const lineHeightPx = displayFontSize * lineHeight;

+	const lines = (element.content || "").split("\n");

+	const fontString = `${fontStyle} ${fontWeight} ${displayFontSize}px "${element.fontFamily}", sans-serif`;

+

+	const cssVisualCenterOffset = measureCSSVisualCenterOffset({

+		lines,

+		fontString,

+		letterSpacingPx: displayLetterSpacing,

+		lineHeightPx,

+		displayFontSize,

+	});

+

+	const bg = element.background;

+	const shouldShowBackground =

+		bg.enabled && bg.color && bg.color !== "transparent";

+	const fontSizeRatio = element.fontSize / DEFAULTS.text.element.fontSize;

+	const displayPaddingX = shouldShowBackground

+		? (bg.paddingX ?? DEFAULTS.text.background.paddingX) *

+			fontSizeRatio *

+			displayScaleX

+		: 0;

+	const displayPaddingY = shouldShowBackground

+		? (bg.paddingY ?? DEFAULTS.text.background.paddingY) *

+			fontSizeRatio *

+			displayScaleX

+		: 0;

+

+	return (

+		<div

+			className="absolute"

+			style={{

+				left: posX,

+				top: posY - cssVisualCenterOffset,

+				transform: `translate(-50%, -50%) scale(${element.transform.scaleX}, ${element.transform.scaleY}) rotate(${element.transform.rotate}deg)`,

+				transformOrigin: "center center",

+			}}

+		>

+			{/* biome-ignore lint/a11y/useSemanticElements: contenteditable required for multiline, IME, paste */}

+			<div

+				ref={divRef}

+				contentEditable

+				suppressContentEditableWarning

+				tabIndex={0}

+				role="textbox"

+				aria-label="Edit text"

+				className="cursor-text select-text outline-none whitespace-pre"

+				style={{

+					fontSize: displayFontSize,

+					fontFamily: element.fontFamily,

+					fontWeight,

+					fontStyle,

+					textAlign: element.textAlign,

+					letterSpacing: `${displayLetterSpacing}px`,

+					lineHeight,

+					color: element.color,

+					backgroundColor: shouldShowBackground ? bg.color : "transparent",

+					minHeight: lineHeightPx,

+					textDecoration: element.textDecoration ?? "none",

+					padding: shouldShowBackground

+						? `${displayPaddingY}px ${displayPaddingX}px`

+						: 0,

+					minWidth: 1,

+				}}

+				onInput={handleInput}

+				onBlur={onCommit}

+				onKeyDown={(event) => handleKeyDown({ event })}

+			>

+				{element.content || ""}

+			</div>

+		</div>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/toolbar.tsx b/apps/web/src/components/editor/panels/preview/toolbar.tsx
index 56cb784a..5c183bbb 100644
--- a/apps/web/src/components/editor/panels/preview/toolbar.tsx
+++ b/apps/web/src/components/editor/panels/preview/toolbar.tsx
@@ -1,151 +1,151 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useEditor } from "@/hooks/use-editor";
-import { formatTimeCode } from "@/lib/time";
-import { invokeAction } from "@/lib/actions";
-import { EditableTimecode } from "@/components/editable-timecode";
-import { Button } from "@/components/ui/button";
-import {
-	FullScreenIcon,
-	GridTableIcon,
-	PauseIcon,
-	PlayIcon,
-} from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { getGuideById } from "@/lib/guides";
-import { Separator } from "@/components/ui/separator";
-import {
-	Select,
-	SelectTrigger,
-	SelectContent,
-	SelectItem,
-	SelectSeparator,
-} from "@/components/ui/select";
-import { PREVIEW_ZOOM_PRESETS } from "@/constants/editor-constants";
-import { usePreviewViewport } from "./preview-viewport";
-import { GridPopover } from "./guide-popover";
-import { usePreviewStore } from "@/stores/preview-store";
-
-export function PreviewToolbar({
-	onToggleFullscreen,
-}: {
-	onToggleFullscreen: () => void;
-}) {
-	const activeGuide = usePreviewStore((state) => state.activeGuide);
-	const activeGuideDefinition = getGuideById(activeGuide);
-
-	return (
-		<div className="grid grid-cols-[1fr_auto_1fr] items-center pb-3 pt-5 px-5">
-			<TimecodeDisplay />
-			<PlayPauseButton />
-			<div className="justify-self-end flex items-center gap-2.5">
-				<ZoomSelect />
-				<Separator orientation="vertical" className="h-4" />
-				<GridPopover>
-					<Button
-						variant={activeGuideDefinition ? "secondary" : "text"}
-						size="icon"
-					>
-						{activeGuideDefinition ? (
-							activeGuideDefinition.renderTriggerIcon()
-						) : (
-							<HugeiconsIcon icon={GridTableIcon} />
-						)}
-					</Button>
-				</GridPopover>
-				<Button variant="text" onClick={onToggleFullscreen}>
-					<HugeiconsIcon icon={FullScreenIcon} />
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-function TimecodeDisplay() {
-	const editor = useEditor();
-	const totalDuration = useEditor((e) => e.timeline.getTotalDuration());
-	const fps = useEditor((e) => e.project.getActive().settings.fps);
-	const [currentTime, setCurrentTime] = useState(() =>
-		editor.playback.getCurrentTime(),
-	);
-
-	useEffect(() => {
-		const handler = (e: Event) =>
-			setCurrentTime((e as CustomEvent<{ time: number }>).detail.time);
-		window.addEventListener("playback-update", handler);
-		window.addEventListener("playback-seek", handler);
-		return () => {
-			window.removeEventListener("playback-update", handler);
-			window.removeEventListener("playback-seek", handler);
-		};
-	}, []);
-
-	return (
-		<div className="flex items-center">
-			<EditableTimecode
-				time={currentTime}
-				duration={totalDuration}
-				format="HH:MM:SS:FF"
-				fps={fps}
-				onTimeChange={({ time }) => editor.playback.seek({ time })}
-				className="text-center"
-			/>
-			<span className="text-muted-foreground px-2 font-mono text-xs">/</span>
-			<span className="text-muted-foreground font-mono text-xs">
-				{formatTimeCode({
-					timeInSeconds: totalDuration,
-					format: "HH:MM:SS:FF",
-					fps,
-				})}
-			</span>
-		</div>
-	);
-}
-
-function ZoomSelect() {
-	const { isAtFit, zoomPercent, fitToScreen, setViewportPercent } =
-		usePreviewViewport();
-
-	const displayLabel = isAtFit ? "Fit" : `${zoomPercent}%`;
-
-	const onValueChange = (value: string) => {
-		if (value === "fit") {
-			fitToScreen();
-		} else {
-			setViewportPercent({ percent: Number(value) });
-		}
-	};
-
-	return (
-		<Select
-			value={isAtFit ? "fit" : String(zoomPercent)}
-			onValueChange={onValueChange}
-		>
-			<SelectTrigger className="tabular-nums">{displayLabel}</SelectTrigger>
-			<SelectContent>
-				<SelectItem value="fit">Fit</SelectItem>
-				<SelectSeparator />
-				{PREVIEW_ZOOM_PRESETS.map((preset) => (
-					<SelectItem key={preset} value={String(preset)}>
-						{preset}%
-					</SelectItem>
-				))}
-			</SelectContent>
-		</Select>
-	);
-}
-
-function PlayPauseButton() {
-	const isPlaying = useEditor((e) => e.playback.getIsPlaying());
-
-	return (
-		<Button
-			variant="text"
-			size="icon"
-			onClick={() => invokeAction("toggle-play")}
-		>
-			<HugeiconsIcon icon={isPlaying ? PauseIcon : PlayIcon} />
-		</Button>
-	);
-}
+"use client";

+

+import { useState, useEffect } from "react";

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

+import { formatTimeCode } from "@/lib/time";

+import { invokeAction } from "@/lib/actions";

+import { EditableTimecode } from "@/components/editable-timecode";

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

+import {

+	FullScreenIcon,

+	GridTableIcon,

+	PauseIcon,

+	PlayIcon,

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

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

+import { getGuideById } from "@/lib/guides";

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

+import {

+	Select,

+	SelectTrigger,

+	SelectContent,

+	SelectItem,

+	SelectSeparator,

+} from "@/components/ui/select";

+import { PREVIEW_ZOOM_PRESETS } from "@/constants/editor-constants";

+import { usePreviewViewport } from "./preview-viewport";

+import { GridPopover } from "./guide-popover";

+import { usePreviewStore } from "@/stores/preview-store";

+

+export function PreviewToolbar({

+	onToggleFullscreen,

+}: {

+	onToggleFullscreen: () => void;

+}) {

+	const activeGuide = usePreviewStore((state) => state.activeGuide);

+	const activeGuideDefinition = getGuideById(activeGuide);

+

+	return (

+		<div className="grid grid-cols-[1fr_auto_1fr] items-center pb-3 pt-5 px-5">

+			<TimecodeDisplay />

+			<PlayPauseButton />

+			<div className="justify-self-end flex items-center gap-2.5">

+				<ZoomSelect />

+				<Separator orientation="vertical" className="h-4" />

+				<GridPopover>

+					<Button

+						variant={activeGuideDefinition ? "secondary" : "text"}

+						size="icon"

+					>

+						{activeGuideDefinition ? (

+							activeGuideDefinition.renderTriggerIcon()

+						) : (

+							<HugeiconsIcon icon={GridTableIcon} />

+						)}

+					</Button>

+				</GridPopover>

+				<Button variant="text" onClick={onToggleFullscreen}>

+					<HugeiconsIcon icon={FullScreenIcon} />

+				</Button>

+			</div>

+		</div>

+	);

+}

+

+function TimecodeDisplay() {

+	const editor = useEditor();

+	const totalDuration = useEditor((e) => e.timeline.getTotalDuration());

+	const fps = useEditor((e) => e.project.getActive().settings.fps);

+	const [currentTime, setCurrentTime] = useState(() =>

+		editor.playback.getCurrentTime(),

+	);

+

+	useEffect(() => {

+		const handler = (e: Event) =>

+			setCurrentTime((e as CustomEvent<{ time: number }>).detail.time);

+		window.addEventListener("playback-update", handler);

+		window.addEventListener("playback-seek", handler);

+		return () => {

+			window.removeEventListener("playback-update", handler);

+			window.removeEventListener("playback-seek", handler);

+		};

+	}, []);

+

+	return (

+		<div className="flex items-center">

+			<EditableTimecode

+				time={currentTime}

+				duration={totalDuration}

+				format="HH:MM:SS:FF"

+				fps={fps}

+				onTimeChange={({ time }) => editor.playback.seek({ time })}

+				className="text-center"

+			/>

+			<span className="text-muted-foreground px-2 font-mono text-xs">/</span>

+			<span className="text-muted-foreground font-mono text-xs">

+				{formatTimeCode({

+					timeInSeconds: totalDuration,

+					format: "HH:MM:SS:FF",

+					fps,

+				})}

+			</span>

+		</div>

+	);

+}

+

+function ZoomSelect() {

+	const { isAtFit, zoomPercent, fitToScreen, setViewportPercent } =

+		usePreviewViewport();

+

+	const displayLabel = isAtFit ? "Fit" : `${zoomPercent}%`;

+

+	const onValueChange = (value: string) => {

+		if (value === "fit") {

+			fitToScreen();

+		} else {

+			setViewportPercent({ percent: Number(value) });

+		}

+	};

+

+	return (

+		<Select

+			value={isAtFit ? "fit" : String(zoomPercent)}

+			onValueChange={onValueChange}

+		>

+			<SelectTrigger className="tabular-nums">{displayLabel}</SelectTrigger>

+			<SelectContent>

+				<SelectItem value="fit">Fit</SelectItem>

+				<SelectSeparator />

+				{PREVIEW_ZOOM_PRESETS.map((preset) => (

+					<SelectItem key={preset} value={String(preset)}>

+						{preset}%

+					</SelectItem>

+				))}

+			</SelectContent>

+		</Select>

+	);

+}

+

+function PlayPauseButton() {

+	const isPlaying = useEditor((e) => e.playback.getIsPlaying());

+

+	return (

+		<Button

+			variant="text"

+			size="icon"

+			onClick={() => invokeAction("toggle-play")}

+		>

+			<HugeiconsIcon icon={isPlaying ? PauseIcon : PlayIcon} />

+		</Button>

+	);

+}

diff --git a/apps/web/src/components/editor/panels/preview/transform-handles.tsx b/apps/web/src/components/editor/panels/preview/transform-handles.tsx
index 88332625..141359c8 100644
--- a/apps/web/src/components/editor/panels/preview/transform-handles.tsx
+++ b/apps/web/src/components/editor/panels/preview/transform-handles.tsx
@@ -1,140 +1,140 @@
-"use client";
-
-import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
-import { useTransformHandles } from "@/hooks/use-transform-handles";
-import { isVisualElement } from "@/lib/timeline/element-utils";
-import {
-	getCornerPosition,
-	getEdgeHandlePosition,
-	getRotationHandlePosition,
-	type Corner,
-	type Edge,
-} from "@/lib/preview/element-bounds";
-import type { OnSnapLinesChange } from "@/hooks/use-preview-interaction";
-import {
-	BoundingBoxOutline,
-	CornerHandle,
-	EdgeHandle,
-	IconHandle,
-	getResizeCursor,
-} from "./handle-primitives";
-import { Rotate01Icon } from "@hugeicons/core-free-icons";
-
-const CORNERS: Corner[] = [
-	"top-left",
-	"top-right",
-	"bottom-left",
-	"bottom-right",
-];
-const EDGES: Edge[] = ["right", "left", "bottom"];
-
-export function TransformHandles({
-	onSnapLinesChange,
-}: {
-	onSnapLinesChange?: OnSnapLinesChange;
-}) {
-	const viewport = usePreviewViewport();
-	const {
-		selectedWithBounds,
-		hasVisualSelection,
-		handleCornerPointerDown,
-		handleEdgePointerDown,
-		handleRotationPointerDown,
-		handlePointerMove,
-		handlePointerUp,
-	} = useTransformHandles({ onSnapLinesChange });
-
-	if (!hasVisualSelection || !selectedWithBounds) return null;
-
-	const { bounds, element } = selectedWithBounds;
-	if (!isVisualElement(element)) return null;
-
-	const displayScale = viewport.getDisplayScale();
-
-	const toOverlay = ({
-		canvasX,
-		canvasY,
-	}: {
-		canvasX: number;
-		canvasY: number;
-	}) =>
-		viewport.canvasToOverlay({
-			canvasX,
-			canvasY,
-		});
-
-	const center = toOverlay({ canvasX: bounds.cx, canvasY: bounds.cy });
-	const outlineWidth = Math.abs(bounds.width) * displayScale.x;
-	const outlineHeight = Math.abs(bounds.height) * displayScale.y;
-
-	const rotationHandleCanvas = getRotationHandlePosition({ bounds });
-	const rotationHandleScreen = toOverlay({
-		canvasX: rotationHandleCanvas.x,
-		canvasY: rotationHandleCanvas.y,
-	});
-
-	const onPointerMove = (event: React.PointerEvent) =>
-		handlePointerMove({ event });
-	const onPointerUp = () => handlePointerUp();
-
-	return (
-		<div
-			className="pointer-events-none absolute inset-0 overflow-hidden"
-			aria-hidden
-		>
-			<BoundingBoxOutline
-				center={center}
-				outlineWidth={outlineWidth}
-				outlineHeight={outlineHeight}
-				rotation={bounds.rotation}
-			/>
-			{CORNERS.map((corner) => {
-				const cornerPosition = getCornerPosition({ bounds, corner });
-				const screen = toOverlay({
-					canvasX: cornerPosition.x,
-					canvasY: cornerPosition.y,
-				});
-				const angleDeg =
-					Math.atan2(screen.y - center.y, screen.x - center.x) *
-					(180 / Math.PI);
-				return (
-					<CornerHandle
-						key={corner}
-						cursor={getResizeCursor({ angleDeg })}
-						screen={screen}
-						onPointerDown={(event) =>
-							handleCornerPointerDown({ event, corner })
-						}
-						onPointerMove={onPointerMove}
-						onPointerUp={onPointerUp}
-					/>
-				);
-			})}
-			{EDGES.map((edge) => {
-				const edgePosition = getEdgeHandlePosition({ bounds, edge });
-				const screen = toOverlay({
-					canvasX: edgePosition.x,
-					canvasY: edgePosition.y,
-				});
-				return (
-					<EdgeHandle
-						key={edge}
-						edge={edge}
-						screen={screen}
-						rotation={bounds.rotation}
-						onPointerDown={(event) => handleEdgePointerDown({ event, edge })}
-						onPointerMove={onPointerMove}
-						onPointerUp={onPointerUp}
-					/>
-				);
-			})}
-			<IconHandle
-				icon={Rotate01Icon}
-				screen={rotationHandleScreen}
-				onPointerDown={(event) => handleRotationPointerDown({ event })}
-				onPointerMove={onPointerMove}
-				onPointerUp={onPointerUp}
-			/>
-		</div>
-	);
-}
+"use client";

+

+import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";

+import { useTransformHandles } from "@/hooks/use-transform-handles";

+import { isVisualElement } from "@/lib/timeline/element-utils";

+import {

+	getCornerPosition,

+	getEdgeHandlePosition,

+	getRotationHandlePosition,

+	type Corner,

+	type Edge,

+} from "@/lib/preview/element-bounds";

+import type { OnSnapLinesChange } from "@/hooks/use-preview-interaction";

+import {

+	BoundingBoxOutline,

+	CornerHandle,

+	EdgeHandle,

+	IconHandle,

+	getResizeCursor,

+} from "./handle-primitives";

+import { Rotate01Icon } from "@hugeicons/core-free-icons";

+

+const CORNERS: Corner[] = [

+	"top-left",

+	"top-right",

+	"bottom-left",

+	"bottom-right",

+];

+const EDGES: Edge[] = ["right", "left", "bottom"];

+

+export function TransformHandles({

+	onSnapLinesChange,

+}: {

+	onSnapLinesChange?: OnSnapLinesChange;

+}) {

+	const viewport = usePreviewViewport();

+	const {

+		selectedWithBounds,

+		hasVisualSelection,

+		handleCornerPointerDown,

+		handleEdgePointerDown,

+		handleRotationPointerDown,

+		handlePointerMove,

+		handlePointerUp,

+	} = useTransformHandles({ onSnapLinesChange });

+

+	if (!hasVisualSelection || !selectedWithBounds) return null;

+

+	const { bounds, element } = selectedWithBounds;

+	if (!isVisualElement(element)) return null;

+

+	const displayScale = viewport.getDisplayScale();

+

+	const toOverlay = ({

+		canvasX,

+		canvasY,

+	}: {

+		canvasX: number;

+		canvasY: number;

+	}) =>

+		viewport.canvasToOverlay({

+			canvasX,

+			canvasY,

+		});

+

+	const center = toOverlay({ canvasX: bounds.cx, canvasY: bounds.cy });

+	const outlineWidth = Math.abs(bounds.width) * displayScale.x;

+	const outlineHeight = Math.abs(bounds.height) * displayScale.y;

+

+	const rotationHandleCanvas = getRotationHandlePosition({ bounds });

+	const rotationHandleScreen = toOverlay({

+		canvasX: rotationHandleCanvas.x,

+		canvasY: rotationHandleCanvas.y,

+	});

+

+	const onPointerMove = (event: React.PointerEvent) =>

+		handlePointerMove({ event });

+	const onPointerUp = () => handlePointerUp();

+

+	return (

+		<div

+			className="pointer-events-none absolute inset-0 overflow-hidden"

+			aria-hidden

+		>

+			<BoundingBoxOutline

+				center={center}

+				outlineWidth={outlineWidth}

+				outlineHeight={outlineHeight}

+				rotation={bounds.rotation}

+			/>

+			{CORNERS.map((corner) => {

+				const cornerPosition = getCornerPosition({ bounds, corner });

+				const screen = toOverlay({

+					canvasX: cornerPosition.x,

+					canvasY: cornerPosition.y,

+				});

+				const angleDeg =

+					Math.atan2(screen.y - center.y, screen.x - center.x) *

+					(180 / Math.PI);

+				return (

+					<CornerHandle

+						key={corner}

+						cursor={getResizeCursor({ angleDeg })}

+						screen={screen}

+						onPointerDown={(event) =>

+							handleCornerPointerDown({ event, corner })

+						}

+						onPointerMove={onPointerMove}

+						onPointerUp={onPointerUp}

+					/>

+				);

+			})}

+			{EDGES.map((edge) => {

+				const edgePosition = getEdgeHandlePosition({ bounds, edge });

+				const screen = toOverlay({

+					canvasX: edgePosition.x,

+					canvasY: edgePosition.y,

+				});

+				return (

+					<EdgeHandle

+						key={edge}

+						edge={edge}

+						screen={screen}

+						rotation={bounds.rotation}

+						onPointerDown={(event) => handleEdgePointerDown({ event, edge })}

+						onPointerMove={onPointerMove}

+						onPointerUp={onPointerUp}

+					/>

+				);

+			})}

+			<IconHandle

+				icon={Rotate01Icon}

+				screen={rotationHandleScreen}

+				onPointerDown={(event) => handleRotationPointerDown({ event })}

+				onPointerMove={onPointerMove}

+				onPointerUp={onPointerUp}

+			/>

+		</div>

+	);

+}