fix: text measurement, rotation handle, video cache races, playback sync

Made-with: Cursor

3 files changed, 399 insertions, 469 deletions

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 515cb91a..6ee4b584 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,103 @@
-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);
+	};
+
+	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()}
+			/>
+			{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/text-edit-overlay.tsx b/apps/web/src/components/editor/panels/preview/text-edit-overlay.tsx
index aff77f0f..78114b27 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,151 @@
-"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 {
+	getElementLocalTime,
+	resolveTransformAtTime,
+} from "@/lib/animation";
+
+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 currentTime = editor.playback.getCurrentTime();
+	const localTime = getElementLocalTime({
+		timelineTime: currentTime,
+		elementStartTime: element.startTime,
+		elementDuration: element.duration,
+	});
+	const transform = resolveTransformAtTime({
+		baseTransform: element.transform,
+		animations: element.animations,
+		localTime,
+	});
+
+	const { x: posX, y: posY } = viewport.positionToOverlay({
+		positionX: transform.position.x,
+		positionY: transform.position.y,
+	});
+
+	const { x: displayScaleX } = viewport.getDisplayScale();
+
+	const scaledFontSize =
+		element.fontSize * (canvasSize.height / FONT_SIZE_SCALE_REFERENCE);
+
+	const lineHeight = element.lineHeight ?? DEFAULTS.text.lineHeight;
+	const fontWeight = element.fontWeight === "bold" ? "bold" : "normal";
+	const fontStyle = element.fontStyle === "italic" ? "italic" : "normal";
+	const canvasLetterSpacing = element.letterSpacing ?? 0;
+	const lineHeightPx = scaledFontSize * lineHeight;
+
+	const bg = element.background;
+	const shouldShowBackground =
+		bg.enabled && bg.color && bg.color !== "transparent";
+	const fontSizeRatio = element.fontSize / DEFAULTS.text.element.fontSize;
+	const canvasPaddingX = shouldShowBackground
+		? (bg.paddingX ?? DEFAULTS.text.background.paddingX) * fontSizeRatio
+		: 0;
+	const canvasPaddingY = shouldShowBackground
+		? (bg.paddingY ?? DEFAULTS.text.background.paddingY) * fontSizeRatio
+		: 0;
+
+	return (
+		<div
+			className="absolute"
+			style={{
+				left: posX,
+				top: posY,
+				transform: `translate(-50%, -50%) scale(${transform.scaleX * displayScaleX}, ${transform.scaleY * displayScaleX}) rotate(${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: scaledFontSize,
+					fontFamily: element.fontFamily,
+					fontWeight,
+					fontStyle,
+					textAlign: element.textAlign,
+					letterSpacing: `${canvasLetterSpacing}px`,
+					lineHeight,
+					color: "transparent",
+					caretColor: element.color,
+					backgroundColor: shouldShowBackground ? bg.color : "transparent",
+					minHeight: lineHeightPx,
+					textDecoration: element.textDecoration ?? "none",
+					padding: shouldShowBackground
+						? `${canvasPaddingY}px ${canvasPaddingX}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/transform-handles.tsx b/apps/web/src/components/editor/panels/preview/transform-handles.tsx
index 141359c8..2b81b557 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,145 @@
-"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,
+	ROTATION_HANDLE_OFFSET,
+	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 rotationAngleRad = (bounds.rotation * Math.PI) / 180;
+	const topCenterLocalY = -bounds.height / 2;
+	const topCenterScreen = toOverlay({
+		canvasX: bounds.cx - topCenterLocalY * Math.sin(rotationAngleRad),
+		canvasY: bounds.cy + topCenterLocalY * Math.cos(rotationAngleRad),
+	});
+	const rotationHandleScreen = {
+		x: topCenterScreen.x + Math.sin(rotationAngleRad) * ROTATION_HANDLE_OFFSET,
+		y: topCenterScreen.y - Math.cos(rotationAngleRad) * ROTATION_HANDLE_OFFSET,
+	};
+
+	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>
+	);
+}