- {
- setActiveBlockParams(null);
- panelLayout.setRightPanelTab("design");
- }}
- recordingState={gestureState}
- recordingDuration={gestureRecording.recordingDuration}
- onToggleRecording={recordingToggle}
- sdkSession={sdkHandle.session}
- reloadPreview={reloadPreview}
- domEditSaveTimestampRef={domEditSaveTimestampRef}
- recordEdit={editHistory.recordEdit}
- onToggleElementHidden={timelineEditing.handleToggleElementHidden}
+
+ }
+ right={
+ panelLayout.rightCollapsed ? null : (
+
+
+ {/* Vertical resize divider: 3px visible seam, 8px pointer-capture zone via
+ the absolutely-positioned inner hit area. The outer element is w-[3px] so
+ it contributes only 3px of gap in the flex row; the inner -left-[2.5px]
+ element widens the hit area to 8px without affecting layout. */}
| void;
- handleTimelineAssetDrop: (
- assetPath: string,
- placement: Pick,
- ) => Promise | void;
- handleTimelineBlockDrop?: (
- blockName: string,
- placement: Pick,
- ) => Promise | void;
- handlePreviewBlockDrop?: (
- blockName: string,
- position: { left: number; top: number },
- ) => Promise | void;
- handleTimelineFileDrop: (
- files: File[],
- placement?: Pick,
- ) => Promise | void;
- handleTimelineElementMove: (
- element: TimelineElement,
- updates: Pick,
- ) => Promise | void;
- handleTimelineElementResize: (
- element: TimelineElement,
- updates: Pick,
- ) => Promise | void;
- handleTimelineGroupMove: (changes: TimelineGroupMoveChange[]) => Promise | void;
- handleTimelineGroupResize: (changes: TimelineGroupResizeChange[]) => Promise | void;
- handleToggleTrackHidden: (track: number, hidden: boolean) => Promise | void;
- handleToggleElementHidden: (elementKey: string, hidden: boolean) => Promise | void;
- handleBlockedTimelineEdit: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
- handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise | void;
- handleRazorSplit: (element: TimelineElement, splitTime: number) => Promise | void;
- handleRazorSplitAll: (splitTime: number) => Promise | void;
- setCompIdToSrc: (map: Map) => void;
- setCompositionLoading: (loading: boolean) => void;
- shouldShowSelectedDomBounds: boolean;
- blockPreview?: BlockPreviewInfo | null;
- isGestureRecording?: boolean;
- recordingState?: GestureRecordingState;
- onToggleRecording?: () => void;
- gestureOverlay?: ReactNode;
-}
-
-// fallow-ignore-next-line complexity
-export function StudioPreviewArea({
- timelineToolbar,
- renderClipContent,
- handleTimelineElementDelete,
- handleTimelineAssetDrop,
- handleTimelineBlockDrop,
- handlePreviewBlockDrop,
- handleTimelineFileDrop,
- handleTimelineElementMove,
- handleTimelineElementResize,
- handleTimelineGroupMove,
- handleTimelineGroupResize,
- handleToggleTrackHidden,
- handleToggleElementHidden,
- handleBlockedTimelineEdit,
- handleTimelineElementSplit,
- handleRazorSplit,
- handleRazorSplitAll,
- setCompIdToSrc,
- setCompositionLoading,
- shouldShowSelectedDomBounds,
- isGestureRecording,
- recordingState,
- onToggleRecording,
- blockPreview,
- gestureOverlay,
-}: StudioPreviewAreaProps) {
- const {
- projectId,
- activeCompPath,
- setActiveCompPath,
- previewIframeRef,
- handlePreviewIframeRef,
- timelineVisible,
- toggleTimelineVisibility,
- } = useStudioShellContext();
- const {
- refreshKey,
- captionEditMode,
- compositionLoading,
- isPlaying,
- refreshPreviewDocumentVersion,
- } = useStudioPlaybackContext();
- const compositionDimensions = useCompositionDimensions();
-
- const {
- domEditHoverSelection,
- domEditSelection,
- domEditGroupSelections,
- selectedGsapAnimations,
- } = useDomEditSelectionContext();
- const {
- handleTimelineElementSelect,
- handlePreviewCanvasMouseDown,
- handlePreviewCanvasPointerMove,
- handlePreviewCanvasPointerLeave,
- applyDomSelection,
- handleBlockedDomMove,
- handleDomManualDragStart,
- handleDomPathOffsetCommit,
- handleDomGroupPathOffsetCommit,
- handleDomBoxSizeCommit,
- handleDomRotationCommit,
- handleDomStyleCommit,
- handleGsapRemoveKeyframe,
- handleGsapMoveKeyframeToPlayhead,
- handleGsapMoveKeyframe,
- handleGsapResizeKeyframedTween,
- handleGsapUpdateMeta,
- handleGsapAddKeyframe,
- handleGsapConvertToKeyframes,
- handleGsapRemoveAllKeyframes,
- buildDomSelectionForTimelineElement,
- applyMarqueeSelection,
- } = useDomEditActionsContext();
- const selectedElementId = usePlayerStore((s) => s.selectedElementId);
- const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
- const timelineElements = usePlayerStore((s) => s.elements);
-
- // fallow-ignore-next-line complexity
- const [snapPrefs, setSnapPrefs] = useState(() => {
- const p = readStudioUiPreferences();
- return {
- snapEnabled: p.snapEnabled ?? true,
- gridVisible: p.gridVisible ?? false,
- gridSpacing: p.gridSpacing ?? 50,
- snapToGrid: p.snapToGrid ?? false,
- };
- });
-
- useTimelineSelectionPreviewSync({
- selectedElementId,
- selectedElementIds,
- timelineElements,
- domEditSelection,
- domEditGroupSelections,
- activeCompPath,
- buildDomSelectionForTimelineElement,
- applyDomSelection,
- applyMarqueeSelection,
- });
-
- // Resolve a timeline-diamond callback's clip-% to the keyframe's anim id + its
- // tween-relative percentage (shared by the delete/move keyframe callbacks): the
- // diamond reports a clip-% but the script ops key on the tween-%. Prefers the
- // anim in the keyframe's property group, falling back to the first keyframed one.
- const resolveKeyframeTarget = useCallback(
- // fallow-ignore-next-line complexity
- (pct: number): { animId: string; tweenPct: number } | null => {
- const cached = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
- const kf = cached?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
- const group = kf?.propertyGroup;
- const anim =
- (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
- selectedGsapAnimations.find((a) => a.keyframes);
- return anim ? { animId: anim.id, tweenPct: kf?.tweenPercentage ?? pct } : null;
- },
- [domEditSelection?.id, selectedGsapAnimations],
- );
-
- const handleTimelineGroupMovePreview = useCallback(
- (changes: TimelineGroupMoveChange[]) => {
- for (const change of changes) {
- patchIframeDomTiming(previewIframeRef.current, change.element, [
- ["data-start", formatTimelineAttributeNumber(change.start)],
- ]);
- }
- },
- [previewIframeRef],
- );
-
- const handleTimelineGroupResizePreview = useCallback(
- (changes: TimelineGroupResizeChange[]) => {
- for (const change of changes) {
- const attrs: Array<[string, string]> = [
- ["data-start", formatTimelineAttributeNumber(change.start)],
- ["data-duration", formatTimelineAttributeNumber(change.duration)],
- ];
- if (change.playbackStart != null) {
- attrs.push([
- change.element.playbackStartAttr === "playback-start"
- ? "data-playback-start"
- : "data-media-start",
- formatTimelineAttributeNumber(change.playbackStart),
- ]);
- }
- patchIframeDomTiming(previewIframeRef.current, change.element, attrs);
- }
- },
- [previewIframeRef],
- );
-
- // fallow-ignore-next-line complexity
- const timelineEditCallbacks = useMemo(
- () => ({
- onMoveElement: handleTimelineElementMove,
- onResizeElement: handleTimelineElementResize,
- onMoveElements: handleTimelineGroupMove,
- onResizeElements: handleTimelineGroupResize,
- onPreviewMoveElements: handleTimelineGroupMovePreview,
- onPreviewResizeElements: handleTimelineGroupResizePreview,
- onToggleTrackHidden: handleToggleTrackHidden,
- onToggleElementHidden: handleToggleElementHidden,
- onBlockedEditAttempt: handleBlockedTimelineEdit,
- onSplitElement: handleTimelineElementSplit,
- onRazorSplit: handleRazorSplit,
- onRazorSplitAll: handleRazorSplitAll,
- onDeleteAllKeyframes: () => {
- // Hold the element where it is (collapse keyframes to a static set) rather
- // than deleting the whole animation, deleting strands a stale GSAP base
- // that the next drag adds to, flinging the element off-screen.
- const anim = selectedGsapAnimations.find((a) => a.keyframes);
- if (!anim) return;
- handleGsapRemoveAllKeyframes(anim.id);
- },
- onDeleteKeyframe: (_elId: string, pct: number) => {
- const target = resolveKeyframeTarget(pct);
- if (target) handleGsapRemoveKeyframe(target.animId, target.tweenPct);
- },
- // Retime the keyframe to the playhead, preserving its value + ease.
- onMoveKeyframeToPlayhead: (_elId: string, pct: number) => {
- const target = resolveKeyframeTarget(pct);
- if (target) handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct);
- },
- // Drag-to-retime. The diamond reports clip-%s; resolveKeyframeTarget gives
- // the dragged keyframe's anim + tween-%. We convert the clip-% drop to an
- // absolute time (via the clip's timing basis) and let resolveKeyframeRetime
- // decide: a drop inside the tween window is a plain move (re-key tween-%); a
- // drop past the boundary (last keyframe past the end, first before the start)
- // resizes the tween, position/duration grow so the dragged keyframe lands at
- // the drop while every other keyframe keeps its absolute time (value+ease too).
- // fallow-ignore-next-line complexity
- onMoveKeyframe: (_elId: string, fromClipPct: number, toClipPct: number) => {
- const target = resolveKeyframeTarget(fromClipPct);
- const sel = domEditSelection;
- if (!target || !sel) return;
- const anim = selectedGsapAnimations.find((a) => a.id === target.animId);
- const tweenStart = anim ? resolveTweenStart(anim) : null;
- if (!anim || tweenStart === null) return;
- const tweenDuration = anim.duration ?? resolveTweenDuration(anim);
- const sourceFile = sel.sourceFile || activeCompPath || "index.html";
- const { elements, domClipChildren } = usePlayerStore.getState();
- const { elStart, elDuration } = resolveClipTimingBasis(
- sel.id ?? "",
- sourceFile,
- elements,
- domClipChildren,
- );
- const dropAbsTime = elStart + (toClipPct / 100) * elDuration;
- const decision = resolveKeyframeRetime({
- keyframes: anim.keyframes?.keyframes ?? [],
- draggedTweenPct: target.tweenPct,
- tweenStart,
- tweenDuration,
- dropAbsTime,
- });
- if (decision.kind === "move" && decision.toTweenPct != null) {
- handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct);
- } else if (
- decision.kind === "resize" &&
- decision.pctRemap &&
- decision.position != null &&
- decision.duration != null
- ) {
- handleGsapResizeKeyframedTween(
- target.animId,
- decision.position,
- decision.duration,
- decision.pctRemap,
- );
- }
- },
- onChangeKeyframeEase: (_elId: string, _pct: number, ease: string) => {
- for (const anim of selectedGsapAnimations) {
- if (anim.keyframes) handleGsapUpdateMeta(anim.id, { ease });
- }
- },
- // fallow-ignore-next-line complexity
- onToggleKeyframeAtPlayhead: (el: TimelineElement) => {
- const currentTime = usePlayerStore.getState().currentTime;
- const pct =
- el.duration > 0
- ? Math.max(0, Math.min(100, Math.round(((currentTime - el.start) / el.duration) * 100)))
- : 0;
- const anim = selectedGsapAnimations.find((a) => a.keyframes);
- if (anim?.keyframes) {
- const existing = anim.keyframes.keyframes.find((k) => Math.abs(k.percentage - pct) <= 1);
- if (existing) {
- handleGsapRemoveKeyframe(anim.id, existing.percentage);
- } else {
- handleGsapAddKeyframe(anim.id, pct, "x", 0);
- }
- } else {
- const flatAnim = selectedGsapAnimations.find((a) => !a.keyframes);
- if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id);
- }
- },
- }),
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [
- handleTimelineElementMove,
- handleTimelineElementResize,
- handleTimelineGroupMove,
- handleTimelineGroupMovePreview,
- handleTimelineGroupResize,
- handleTimelineGroupResizePreview,
- handleToggleTrackHidden,
- handleToggleElementHidden,
- handleBlockedTimelineEdit,
- handleTimelineElementSplit,
- handleRazorSplit,
- handleRazorSplitAll,
- handleGsapRemoveAllKeyframes,
- resolveKeyframeTarget,
- selectedGsapAnimations,
- handleGsapRemoveKeyframe,
- handleGsapMoveKeyframeToPlayhead,
- handleGsapMoveKeyframe,
- handleGsapResizeKeyframedTween,
- handleGsapUpdateMeta,
- handleGsapAddKeyframe,
- handleGsapConvertToKeyframes,
- buildDomSelectionForTimelineElement,
- projectId,
- activeCompPath,
- domEditSelection,
- ],
- );
-
- return (
-
handlePanelResizeStart("left", e)}
onPointerMove={handlePanelResizeMove}
@@ -167,7 +174,10 @@ export function StudioLeftSidebar({
setLeftWidth(Math.max(160, Math.min(maxLeft, leftWidth + delta)));
}}
>
-
+ {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
+
+ {/* Visible hairline */}
+
);
diff --git a/packages/studio/src/components/StudioPreviewArea.tsx b/packages/studio/src/components/StudioPreviewArea.tsx
deleted file mode 100644
index c033c828e4..0000000000
--- a/packages/studio/src/components/StudioPreviewArea.tsx
+++ /dev/null
@@ -1,500 +0,0 @@
-import { useState, useMemo, useCallback, type ReactNode } from "react";
-import { NLELayout } from "./nle/NLELayout";
-import { CaptionOverlay } from "../captions/components/CaptionOverlay";
-import { CaptionTimeline } from "../captions/components/CaptionTimeline";
-import { DomEditOverlay } from "./editor/DomEditOverlay";
-import { MotionPathOverlay } from "./editor/MotionPathOverlay";
-import { useCompositionDimensions } from "../hooks/useCompositionDimensions";
-import { SnapToolbar } from "./editor/SnapToolbar";
-import { StudioFeedbackBar } from "./StudioFeedbackBar";
-import type { TimelineElement } from "../player";
-import { usePlayerStore } from "../player/store/playerStore";
-import type { BlockedTimelineEditIntent } from "../player/components/timelineEditing";
-import {
- STUDIO_INSPECTOR_PANELS_ENABLED,
- STUDIO_KEYFRAMES_ENABLED,
- STUDIO_PREVIEW_MANUAL_EDITING_ENABLED,
- STUDIO_PREVIEW_SELECTION_ENABLED,
-} from "./editor/manualEditingAvailability";
-import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
-import { useDomEditActionsContext, useDomEditSelectionContext } from "../contexts/DomEditContext";
-import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
-import { resolveClipTimingBasis } from "../hooks/useGsapTweenCache";
-import { resolveKeyframeRetime } from "./editor/keyframeRetime";
-import { TimelineEditProvider } from "../contexts/TimelineEditContext";
-import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
-import { readStudioUiPreferences } from "../utils/studioUiPreferences";
-import type { GestureRecordingState } from "./editor/GestureRecordControl";
-import { useTimelineSelectionPreviewSync } from "../hooks/useTimelineSelectionPreviewSync";
-import type {
- TimelineGroupMoveChange,
- TimelineGroupResizeChange,
-} from "../hooks/useTimelineGroupEditing";
-import {
- formatTimelineAttributeNumber,
- patchIframeDomTiming,
-} from "../hooks/timelineEditingHelpers";
-
-export interface StudioPreviewAreaProps {
- timelineToolbar: ReactNode;
- renderClipContent: (
- element: TimelineElement,
- style: { clip: string; label: string },
- ) => ReactNode;
- // Timeline editing
- handleTimelineElementDelete: (element: TimelineElement) => Promise
-
- );
-}
diff --git a/packages/studio/src/components/TimelineToolbar.test.tsx b/packages/studio/src/components/TimelineToolbar.test.tsx
index 5ee23d5af3..0c21e5e043 100644
--- a/packages/studio/src/components/TimelineToolbar.test.tsx
+++ b/packages/studio/src/components/TimelineToolbar.test.tsx
@@ -2,7 +2,7 @@
import React, { act } from "react";
import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
import { usePlayerStore } from "../player/store/playerStore";
import { TimelineToolbar } from "./TimelineToolbar";
@@ -18,7 +18,7 @@ function renderToolbar() {
document.body.append(host);
const root = createRoot(host);
act(() => {
- root.render(
-
- {
- // Sync activeCompPath when user drills down via timeline double-click
- // or navigates back via breadcrumb, keeps sidebar + thumbnails in sync.
- // Guard against no-op updates to prevent circular refresh cascades
- // between activeCompPath → compositionStack → onCompositionChange.
- if (compPath !== activeCompPath) {
- setActiveCompPath(compPath);
- refreshPreviewDocumentVersion();
- }
- }}
- onIframeRef={handlePreviewIframeRef}
- previewOverlay={
- blockPreview ? (
-
-
-
- {blockPreview.videoUrl ? (
-
- ) : blockPreview.posterUrl ? (
- 
- ) : null}
-
- ) : captionEditMode ? (
-
-
- ) : undefined
- }
- timelineVisible={timelineVisible}
- onToggleTimeline={toggleTimelineVisibility}
- />
-
-
- Captions
-
-
-
-
-
- (
+ "../../utils/studioPreviewHelpers",
+ );
+ return {
+ ...actual,
+ getPreviewTargetFromPointer: previewHelperSpies.getPreviewTargetFromPointer,
+ };
+});
+
vi.mock("./domEditOverlayGeometry", async () => {
const actual = await vi.importActual(
"./domEditOverlayGeometry",
);
+ const stubRect = {
+ left: 24,
+ top: 36,
+ width: 180,
+ height: 72,
+ editScaleX: 1,
+ editScaleY: 1,
+ };
return {
...actual,
- toOverlayRect: () => ({
- left: 24,
- top: 36,
- width: 180,
- height: 72,
- editScaleX: 1,
- editScaleY: 1,
- }),
+ toOverlayRect: () => stubRect,
+ orientedOverlayRect: () => stubRect,
};
});
@@ -126,6 +142,103 @@ function createOverlayProps(args: {
};
}
+/**
+ * Stub element-level getBoundingClientRect to a fixed 800×450 rect (happy-dom
+ * returns all-zeros for unlaid-out elements, which gates the RAF compRect
+ * update). Returns a restore function to call in teardown.
+ */
+function stubViewportRect(): () => void {
+ const original = Element.prototype.getBoundingClientRect;
+ Element.prototype.getBoundingClientRect = function (): DOMRect {
+ return {
+ left: 0,
+ top: 0,
+ right: 800,
+ bottom: 450,
+ width: 800,
+ height: 450,
+ x: 0,
+ y: 0,
+ toJSON: () => ({}),
+ };
+ };
+ return () => {
+ Element.prototype.getBoundingClientRect = original;
+ };
+}
+
+/**
+ * Flush the mount's RAF ticks so the compRect update lands. Two animation-frame
+ * ticks: the first scheduled by useMountEffect's update(), the second by
+ * update()'s tail recursion.
+ */
+async function flushOverlayRaf(): Promise {
+ await act(async () => {
+ await new Promise((resolve) => {
+ requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+ });
+ });
+}
+
+/** A fully-populated DomEditSelection with per-test overrides (capabilities are
+ * merged so a test can flip a single flag without restating the whole set). */
+function makeDomEditSelection(
+ overrides: Partial = {},
+ capabilityOverrides: Partial = {},
+): DomEditSelection {
+ const base: DomEditSelection = {
+ element: document.createElement("div"),
+ id: "hero-title",
+ selector: ".hero-title",
+ selectorIndex: 0,
+ sourceFile: "index.html",
+ tagName: "div",
+ label: "Hero Title",
+ textContent: "Hello",
+ textFields: [],
+ capabilities: {
+ canEditText: true,
+ canEditLayout: true,
+ canMove: true,
+ canApplyManualOffset: true,
+ canApplyManualSize: false,
+ canApplyManualRotation: false,
+ canAdjustOpacity: true,
+ canAdjustFill: true,
+ canAdjustBorderRadius: true,
+ canAdjustStroke: true,
+ canAdjustShadow: true,
+ canAdjustZIndex: true,
+ },
+ computedStyle: {
+ display: "block",
+ position: "absolute",
+ },
+ };
+ return {
+ ...base,
+ ...overrides,
+ capabilities: { ...base.capabilities, ...capabilityOverrides },
+ };
+}
+
+/** Query the composition-canvas overlay and assert it mounted. */
+function getOverlay(host: HTMLElement): HTMLDivElement {
+ const overlay = host.querySelector('[aria-label="Composition canvas"]');
+ expect(overlay).toBeTruthy();
+ if (!overlay) throw new Error("Expected composition canvas overlay");
+ return overlay;
+}
+
+/** Dispatch a left-button pointerdown at (clientX, clientY) inside act(). */
+function dispatchOverlayPointerDown(target: Element, clientX = 120, clientY = 80): void {
+ act(() => {
+ target.dispatchEvent(
+ new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX, clientY }),
+ );
+ });
+}
+
describe("focusDomEditOverlayElement", () => {
it("focuses the canvas overlay without scrolling", () => {
const calls: Array = [];
@@ -144,41 +257,84 @@ describe("DomEditOverlay", () => {
gestureSpies.onPointerMove.mockClear();
gestureSpies.onPointerUp.mockClear();
gestureSpies.clearPointerState.mockClear();
+ previewHelperSpies.getPreviewTargetFromPointer.mockReset();
+ previewHelperSpies.getPreviewTargetFromPointer.mockReturnValue(null);
+ });
+
+ it("selects on the first click over an element even before a hover is resolved", async () => {
+ // Regression: this used to start a marquee whenever hoverSelectionRef was null.
+ // The RAF hover loop populates that ref ASYNCHRONOUSLY, so a genuine first
+ // click over an element read null and was misread as empty canvas — the
+ // marquee swallowed the selecting onMouseDown, so nothing selected until the
+ // SECOND click. With a synchronous pointer hit-test finding an element, the
+ // marquee must NOT start and onCanvasMouseDown must fire on the first click.
+ const restoreRect = stubViewportRect();
+ const originalPointerCapture = HTMLDivElement.prototype.setPointerCapture;
+ HTMLDivElement.prototype.setPointerCapture = () => {};
+
+ // An element IS under the pointer, but no hover has been resolved yet.
+ previewHelperSpies.getPreviewTargetFromPointer.mockReturnValue(document.createElement("div"));
+
+ const host = document.createElement("div");
+ document.body.append(host);
+ const root = createRoot(host);
+ const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
+ const onCanvasMouseDown = vi.fn();
+ const onMarqueeSelect = vi.fn();
+
+ function Harness() {
+ return React.createElement(DomEditOverlay, {
+ ...createOverlayProps({
+ iframeRef,
+ selection: null,
+ hoverSelection: null,
+ onSelectionChange: () => {},
+ }),
+ onCanvasMouseDown,
+ onMarqueeSelect,
+ });
+ }
+
+ act(() => {
+ root.render(React.createElement(Harness));
+ });
+ await flushOverlayRaf();
+
+ const overlay = getOverlay(host);
+
+ act(() => {
+ overlay.dispatchEvent(
+ new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 120, clientY: 80 }),
+ );
+ overlay.dispatchEvent(
+ new MouseEvent("mousedown", { bubbles: true, button: 0, clientX: 120, clientY: 80 }),
+ );
+ });
+
+ // No marquee started; the click reached the selecting mouse-down handler.
+ expect(onMarqueeSelect).not.toHaveBeenCalled();
+ expect(onCanvasMouseDown).toHaveBeenCalledTimes(1);
+
+ act(() => {
+ root.unmount();
+ });
+ HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
+ restoreRect();
+ host.remove();
});
it("does not start a drag from a stale hover target on canvas pointer-down", () => {
const host = document.createElement("div");
document.body.append(host);
const root = createRoot(host);
- const selection: DomEditSelection = {
- element: document.createElement("div"),
+ const selection = makeDomEditSelection({
id: "cta-label",
selector: ".cta-label",
- selectorIndex: 0,
- sourceFile: "index.html",
tagName: "span",
label: "CTA Label",
textContent: "Add to basket",
- textFields: [],
- capabilities: {
- canEditText: true,
- canEditLayout: true,
- canMove: true,
- canApplyManualOffset: true,
- canApplyManualSize: false,
- canApplyManualRotation: false,
- canAdjustOpacity: true,
- canAdjustFill: true,
- canAdjustBorderRadius: true,
- canAdjustStroke: true,
- canAdjustShadow: true,
- canAdjustZIndex: true,
- },
- computedStyle: {
- display: "inline",
- position: "static",
- },
- };
+ computedStyle: { display: "inline", position: "static" },
+ });
let currentSelection: DomEditSelection | null = null;
const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -202,19 +358,9 @@ describe("DomEditOverlay", () => {
root.render(React.createElement(Harness));
});
- const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
- expect(overlay).toBeTruthy();
+ const overlay = getOverlay(host);
- act(() => {
- overlay.dispatchEvent(
- new PointerEvent("pointerdown", {
- bubbles: true,
- button: 0,
- clientX: 120,
- clientY: 80,
- }),
- );
- });
+ dispatchOverlayPointerDown(overlay);
expect(gestureSpies.startGesture).not.toHaveBeenCalled();
expect(currentSelection).toBe(null);
@@ -233,53 +379,12 @@ describe("DomEditOverlay", () => {
// box (and other bounded UI) behind `compRect.width > 0` (added in the
// keyframes PR a468550f). Stub element-level getBoundingClientRect for
// the test so the RAF compRect update produces a real width.
- const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
- Element.prototype.getBoundingClientRect = function (): DOMRect {
- return {
- left: 0,
- top: 0,
- right: 800,
- bottom: 450,
- width: 800,
- height: 450,
- x: 0,
- y: 0,
- toJSON: () => ({}),
- };
- };
+ const restoreRect = stubViewportRect();
const host = document.createElement("div");
document.body.append(host);
const root = createRoot(host);
- const selection: DomEditSelection = {
- element: document.createElement("div"),
- id: "hero-title",
- selector: ".hero-title",
- selectorIndex: 0,
- sourceFile: "index.html",
- tagName: "div",
- label: "Hero Title",
- textContent: "Hello",
- textFields: [],
- capabilities: {
- canEditText: true,
- canEditLayout: true,
- canMove: true,
- canApplyManualOffset: true,
- canApplyManualSize: false,
- canApplyManualRotation: false,
- canAdjustOpacity: true,
- canAdjustFill: true,
- canAdjustBorderRadius: true,
- canAdjustStroke: true,
- canAdjustShadow: true,
- canAdjustZIndex: true,
- },
- computedStyle: {
- display: "block",
- position: "absolute",
- },
- };
+ const selection = makeDomEditSelection();
let currentSelection: DomEditSelection | null = selection;
const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -307,30 +412,16 @@ describe("DomEditOverlay", () => {
// Flush the mount's RAF tick so the compRect update lands before the
// pointer-down. Two animation-frame ticks: the first scheduled by
// useMountEffect's update(), the second by update()'s tail recursion.
- await act(async () => {
- await new Promise((resolve) => {
- requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
- });
- });
+ await flushOverlayRaf();
- const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLDivElement;
- expect(overlay).toBeTruthy();
+ getOverlay(host);
const selectionBox = host.querySelector(
'[data-dom-edit-selection-box="true"]',
) as HTMLDivElement;
expect(selectionBox).toBeTruthy();
- act(() => {
- selectionBox.dispatchEvent(
- new PointerEvent("pointerdown", {
- bubbles: true,
- button: 0,
- clientX: 120,
- clientY: 80,
- }),
- );
- });
+ dispatchOverlayPointerDown(selectionBox);
expect(currentSelection).toBe(selection);
expect(gestureSpies.startGesture).toHaveBeenCalledWith(
@@ -342,58 +433,17 @@ describe("DomEditOverlay", () => {
root.unmount();
});
HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
- Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+ restoreRect();
host.remove();
});
it("passes the tracked hover selection when clicking the existing selection box", async () => {
- const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
- Element.prototype.getBoundingClientRect = function (): DOMRect {
- return {
- left: 0,
- top: 0,
- right: 800,
- bottom: 450,
- width: 800,
- height: 450,
- x: 0,
- y: 0,
- toJSON: () => ({}),
- };
- };
+ const restoreRect = stubViewportRect();
const host = document.createElement("div");
document.body.append(host);
const root = createRoot(host);
- const selection: DomEditSelection = {
- element: document.createElement("div"),
- id: "hero-title",
- selector: ".hero-title",
- selectorIndex: 0,
- sourceFile: "index.html",
- tagName: "div",
- label: "Hero Title",
- textContent: "Hello",
- textFields: [],
- capabilities: {
- canEditText: true,
- canEditLayout: true,
- canMove: false,
- canApplyManualOffset: false,
- canApplyManualSize: false,
- canApplyManualRotation: false,
- canAdjustOpacity: true,
- canAdjustFill: true,
- canAdjustBorderRadius: true,
- canAdjustStroke: true,
- canAdjustShadow: true,
- canAdjustZIndex: true,
- },
- computedStyle: {
- display: "block",
- position: "absolute",
- },
- };
+ const selection = makeDomEditSelection({}, { canMove: false, canApplyManualOffset: false });
const hoverSelection: DomEditSelection = { ...selection, id: "hovered-sibling" };
const onCanvasMouseDown = vi.fn();
const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
@@ -414,11 +464,7 @@ describe("DomEditOverlay", () => {
root.render(React.createElement(Harness));
});
- await act(async () => {
- await new Promise((resolve) => {
- requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
- });
- });
+ await flushOverlayRaf();
const selectionBox = host.querySelector(
'[data-dom-edit-selection-box="true"]',
@@ -437,7 +483,7 @@ describe("DomEditOverlay", () => {
act(() => {
root.unmount();
});
- Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+ restoreRect();
host.remove();
});
});
@@ -513,130 +559,10 @@ describe("filterNestedDomEditGroupItems", () => {
});
});
-describe("resolveDomEditResizeGesture", () => {
- it("resizes width and height independently by default", () => {
- expect(
- resolveDomEditResizeGesture({
- originWidth: 240,
- originHeight: 120,
- actualWidth: 240,
- actualHeight: 120,
- scaleX: 1,
- scaleY: 1,
- dx: 30,
- dy: 12,
- uniform: false,
- }),
- ).toEqual({
- overlayWidth: 270,
- overlayHeight: 132,
- width: 270,
- height: 132,
- });
- });
-
- it("divides the cursor delta by the element's content scale (rescaled element)", () => {
- // Element renders at 2x via a GSAP scale: a 30px cursor delta must grow the
- // CSS box by only 15px so the RENDERED box tracks the pointer 1:1.
- const next = resolveDomEditResizeGesture({
- originWidth: 480, // 240 css x 2 content scale (overlay px at editScale 1)
- originHeight: 240,
- actualWidth: 240,
- actualHeight: 120,
- scaleX: 1,
- scaleY: 1,
- contentScaleX: 2,
- contentScaleY: 2,
- dx: 30,
- dy: 12,
- uniform: false,
- });
- expect(next.width).toBe(255);
- expect(next.height).toBe(126);
- // The overlay box keeps tracking the raw cursor.
- expect(next.overlayWidth).toBe(510);
- expect(next.overlayHeight).toBe(252);
- });
-
- it("treats a missing/invalid content scale as 1 (unscaled element)", () => {
- const next = resolveDomEditResizeGesture({
- originWidth: 240,
- originHeight: 120,
- actualWidth: 240,
- actualHeight: 120,
- scaleX: 1,
- scaleY: 1,
- contentScaleX: 0,
- contentScaleY: Number.NaN,
- dx: 30,
- dy: 12,
- uniform: false,
- });
- expect(next.width).toBe(270);
- expect(next.height).toBe(132);
- });
-
- it("snaps width and height to the same value when Shift is held", () => {
- expect(
- resolveDomEditResizeGesture({
- originWidth: 240,
- originHeight: 120,
- actualWidth: 240,
- actualHeight: 120,
- scaleX: 1,
- scaleY: 1,
- dx: 30,
- dy: 12,
- uniform: true,
- }),
- ).toEqual({
- overlayWidth: 270,
- overlayHeight: 270,
- width: 270,
- height: 270,
- });
- });
-
- it("uses the dominant pointer delta for uniform shrink", () => {
- expect(
- resolveDomEditResizeGesture({
- originWidth: 300,
- originHeight: 180,
- actualWidth: 300,
- actualHeight: 180,
- scaleX: 1,
- scaleY: 1,
- dx: 8,
- dy: -40,
- uniform: true,
- }),
- ).toMatchObject({
- width: 260,
- height: 260,
- });
- });
-
- it("writes source-local dimensions when the edited source is scaled down in master view", () => {
- expect(
- resolveDomEditResizeGesture({
- originWidth: 100,
- originHeight: 50,
- actualWidth: 400,
- actualHeight: 200,
- scaleX: 0.25,
- scaleY: 0.25,
- dx: 25,
- dy: 10,
- uniform: false,
- }),
- ).toEqual({
- overlayWidth: 125,
- overlayHeight: 60,
- width: 500,
- height: 240,
- });
- });
-});
+// Note: the resize SIZE math moved from the AABB screen-space
+// resolveDomEditResizeGesture (removed) to the local-space (OBB) model in
+// domEditResizeLocal.ts — see domEditResizeLocal.test.ts, which re-covers the
+// independent-axis, aspect-lock, and scaled-master-view cases plus rotated axes.
describe("resolveDomEditRotationGesture", () => {
it("rotates by the pointer angle around the element center", () => {
@@ -701,3 +627,43 @@ describe("resolveDomEditRotationGesture", () => {
expect(hasDomEditRotationChanged(0, 0)).toBe(false);
});
});
+
+// resolveResizeCenterAnchorOffset is the UNROTATED (AABB) fallback used only when
+// the element's real transformed corners can't be measured. Center-anchored: a
+// width/height change grows the box from its top-left, drifting the center by half
+// the size change per axis, so the pin translates back by that half-delta. It is
+// handle-independent — all four corners scale about the same center.
+describe("resolveResizeCenterAnchorOffset", () => {
+ it("grow: translates back by half the size change on both axes", () => {
+ expect(
+ resolveResizeCenterAnchorOffset({
+ originWidth: 200,
+ originHeight: 100,
+ overlayWidth: 230,
+ overlayHeight: 112,
+ }),
+ ).toEqual({ dx: -15, dy: -6 });
+ });
+
+ it("shrink: translates forward by half the (positive) size change", () => {
+ expect(
+ resolveResizeCenterAnchorOffset({
+ originWidth: 200,
+ originHeight: 100,
+ overlayWidth: 160,
+ overlayHeight: 80,
+ }),
+ ).toEqual({ dx: 20, dy: 10 });
+ });
+
+ it("no size change: zero offset", () => {
+ expect(
+ resolveResizeCenterAnchorOffset({
+ originWidth: 200,
+ originHeight: 100,
+ overlayWidth: 200,
+ overlayHeight: 100,
+ }),
+ ).toEqual({ dx: 0, dy: 0 });
+ });
+});
diff --git a/packages/studio/src/components/editor/DomEditOverlay.tsx b/packages/studio/src/components/editor/DomEditOverlay.tsx
index 8d89a3637d..e80799f315 100644
--- a/packages/studio/src/components/editor/DomEditOverlay.tsx
+++ b/packages/studio/src/components/editor/DomEditOverlay.tsx
@@ -1,5 +1,4 @@
-import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "react";
-import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
import { type DomEditSelection } from "./domEditing";
import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
import { useMarqueeGestures } from "./marqueeCommit";
@@ -16,17 +15,20 @@ import {
import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
import { OffCanvasIndicators, type OffCanvasRect } from "./OffCanvasIndicators";
import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+import { useDomEditNudge } from "./useDomEditNudge";
import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
import { GridOverlay } from "./GridOverlay";
import type { GestureRecordingState } from "./GestureRecordControl";
-import { DomEditCropHandles } from "./DomEditCropHandles";
-import { DomEditRotateHandle } from "./DomEditRotateHandle";
+import { DomEditGroupChrome, DomEditSelectionChrome } from "./DomEditSelectionChrome";
import { hugRectForElement } from "./domEditOverlayCrop";
import { useCropOverlay } from "../../hooks/useCropOverlay";
import { readDomEditSelectionShapeStyles, resolveBoxChromeClass } from "./domEditOverlayShape";
import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
import { useMountEffect } from "../../hooks/useMountEffect";
import { startOffCanvasIndicatorRefresh } from "./offCanvasIndicatorRefresh";
+import { CanvasContextMenu } from "./CanvasContextMenu";
+import type { ZOrderPatch } from "./canvasContextMenuZOrder";
+import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
// Re-exports for external consumers — preserving existing import paths.
export {
@@ -37,7 +39,6 @@ export {
export {
focusDomEditOverlayElement,
hasDomEditRotationChanged,
- resolveDomEditResizeGesture,
resolveDomEditRotationGesture,
} from "./domEditOverlayGestures";
export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
@@ -82,6 +83,19 @@ interface DomEditOverlayProps {
recordingState?: GestureRecordingState;
onToggleRecording?: () => void;
onMarqueeSelect?: (selections: DomEditSelection[], additive: boolean) => void;
+ /**
+ * Delete the selected canvas element.
+ * Wire to handleDomEditElementDelete from useDomEditActionsContext —
+ * same handler the Delete/Backspace hotkey uses.
+ */
+ onDeleteSelection?: (selection: DomEditSelection) => void;
+ /**
+ * Called with the resolved z-order patch list after an optimistic DOM update.
+ * The patch list is tie-aware and may include sibling elements (see
+ * canvasContextMenuZOrder). Wire to handleDomZIndexReorderCommit from
+ * useDomEditActionsContext. See CanvasContextMenu.tsx module comment.
+ */
+ onApplyZIndex?: (selection: DomEditSelection, patches: ZOrderPatch[]) => void;
}
// fallow-ignore-next-line complexity
@@ -106,6 +120,8 @@ export const DomEditOverlay = memo(function DomEditOverlay({
onRotationCommit,
onStyleCommit,
onMarqueeSelect,
+ onDeleteSelection,
+ onApplyZIndex,
}: DomEditOverlayProps) {
const overlayRef = useRef(null);
const boxRef = useRef(null);
@@ -122,8 +138,31 @@ export const DomEditOverlay = memo(function DomEditOverlay({
const snapGuidesRef = useRef(null);
const rafPausedRef = useRef(false);
+ // Context menu state: position of the right-click that opened it.
+ // contextMenuSelection is the element the menu targets — captured at right-click
+ // time so the menu can open even before the React selection state settles.
+ const [contextMenu, setContextMenu] = useState<{
+ x: number;
+ y: number;
+ sel: DomEditSelection;
+ } | null>(null);
+
const selectionRef = useRef(selection);
selectionRef.current = selection;
+
+ // Close the context menu whenever the selection moves off the element the menu
+ // targets (a click that reselects elsewhere, a deselect, or a preview reload
+ // that rebuilds the selection). Without this the menu can linger — orphaned —
+ // over a stale target after the underlying element is gone. A right-click that
+ // OPENS the menu also selects its target, so the common open path keeps the
+ // menu (same element) rather than immediately dismissing it.
+ useEffect(() => {
+ if (!contextMenu) return;
+ if (!selection || selection.element !== contextMenu.sel.element) {
+ setContextMenu(null);
+ }
+ }, [selection, contextMenu]);
+
const activeCompositionPathRef = useRef(activeCompositionPath);
activeCompositionPathRef.current = activeCompositionPath;
const groupSelectionsRef = useRef(groupSelections);
@@ -242,6 +281,23 @@ export const DomEditOverlay = memo(function DomEditOverlay({
snapGuidesRef,
});
+ // Arrow-key nudge (1px, Shift = 10px) — commits through the same
+ // path-offset callbacks as a drag, one undo entry per key burst.
+ const { flushNudge } = useDomEditNudge({
+ selection,
+ groupSelections,
+ allowCanvasMovement,
+ selectionRef,
+ overlayRectRef,
+ groupOverlayItemsRef,
+ gestureRef,
+ groupGestureRef,
+ blockedMoveRef,
+ onManualDragStartRef,
+ onPathOffsetCommitRef,
+ onGroupPathOffsetCommitRef,
+ });
+
const marquee = useMarqueeGestures({
iframeRef,
overlayRef,
@@ -371,6 +427,38 @@ export const DomEditOverlay = memo(function DomEditOverlay({
e.stopPropagation();
};
+ // Right-click: select element first (if not already selected), then open menu.
+ const handleContextMenu = useCallback(
+ async (event: React.MouseEvent) => {
+ event.preventDefault();
+
+ // If no element is selected yet, resolve it from the pointer position first.
+ const currentSel = selectionRef.current;
+ let activeSel: DomEditSelection | null = currentSel;
+ if (!currentSel) {
+ const pointerEvent = event as unknown as React.PointerEvent;
+ const resolved = await onCanvasPointerMoveRef.current(pointerEvent);
+ if (!resolved) return; // Nothing under the cursor — skip menu.
+ onSelectionChangeRef.current(resolved, { revealPanel: true });
+ // Use `resolved` directly: React state (and therefore selectionRef) won't
+ // update synchronously after onSelectionChange — we'd be reading stale null.
+ activeSel = resolved;
+ } else {
+ // Check if the user right-clicked on an unselected element (hover target).
+ const hover = hoverSelectionRef.current;
+ if (hover && hover.element !== currentSel.element) {
+ onSelectionChangeRef.current(hover, { revealPanel: true });
+ activeSel = hover;
+ }
+ }
+
+ if (!activeSel) return;
+ setContextMenu({ x: event.clientX, y: event.clientY, sel: activeSel });
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [],
+ );
+
return (
- Timeline
-
+ // The "TIMELINE" label is dropped for CapCut-like density — the pane's
+ // position (tracks right below) makes it self-evident.
+
+ | void;
}
-// Gap (px) between an edge handle and the element edge, so the handle sits
-// clear of the element body and can't intercept a move-drag.
-const EDGE_HANDLE_GAP = 8;
+// Hit-strip size (px) for an edge crop handle: THICKNESS extends outward from
+// the crop edge (flush against it, never over the element body, so a body
+// drag always MOVES), LENGTH runs along the edge. The visible pill is smaller
+// and centered inside the strip.
+const EDGE_HIT_THICKNESS = 12;
+const EDGE_HIT_LENGTH = 32;
-/** Place an edge handle just OUTSIDE the given crop edge (translate pushes it
- * fully past the boundary). Keeps the element body free for moving. */
+/** Place an edge handle's hit strip just OUTSIDE the given crop edge
+ * (translate pushes it fully past the boundary). Keeps the element body free
+ * for moving. Corners stay free for the selection's own resize handles. */
function edgeHandlePlacement(
edge: CropEdge,
rect: { left: number; top: number; width: number; height: number },
@@ -44,27 +48,36 @@ function edgeHandlePlacement(
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
if (edge === "top") {
- return { left: cx, top: rect.top - EDGE_HANDLE_GAP, transform: "translate(-50%, -100%)" };
+ return { left: cx, top: rect.top, transform: "translate(-50%, -100%)" };
}
if (edge === "bottom") {
- return {
- left: cx,
- top: rect.top + rect.height + EDGE_HANDLE_GAP,
- transform: "translate(-50%, 0)",
- };
+ return { left: cx, top: rect.top + rect.height, transform: "translate(-50%, 0)" };
}
if (edge === "left") {
- return { left: rect.left - EDGE_HANDLE_GAP, top: cy, transform: "translate(-100%, -50%)" };
+ return { left: rect.left, top: cy, transform: "translate(-100%, -50%)" };
}
- return {
- left: rect.left + rect.width + EDGE_HANDLE_GAP,
- top: cy,
- transform: "translate(0, -50%)",
- };
+ return { left: rect.left + rect.width, top: cy, transform: "translate(0, -50%)" };
}
const EDGES: CropEdge[] = ["top", "right", "bottom", "left"];
+/** Hit-strip + pill dimensions for an edge handle, keyed on its orientation. */
+function edgeHandleMetrics(vertical: boolean): {
+ hitWidth: number;
+ hitHeight: number;
+ cursor: string;
+ pillWidth: number;
+ pillHeight: number;
+} {
+ return {
+ hitWidth: vertical ? EDGE_HIT_THICKNESS : EDGE_HIT_LENGTH,
+ hitHeight: vertical ? EDGE_HIT_LENGTH : EDGE_HIT_THICKNESS,
+ cursor: vertical ? "ew-resize" : "ns-resize",
+ pillWidth: vertical ? 4 : 24,
+ pillHeight: vertical ? 24 : 4,
+ };
+}
+
/**
* Always-on crop, integrated with the selection (no crop "mode"): while a
* croppable element is selected its clip is lifted so the FULL content shows and
@@ -83,6 +96,7 @@ export function DomEditCropHandles({
}: DomEditCropHandlesProps) {
const gestureRef = useRef(null);
const [dragging, setDragging] = useState(false);
+ const [hotEdge, setHotEdge] = useState(null);
// readElementCropInsets returns null for a clip this tool can't represent
// (circle/polygon/non-px inset): the crop UI must fully stand down for that
// element — no lift, no handles — or select+deselect replaces the authored
@@ -304,6 +318,7 @@ export function DomEditCropHandles({
diff --git a/packages/studio/src/components/editor/DomEditOverlay.test.ts b/packages/studio/src/components/editor/DomEditOverlay.test.ts
index fbc8eccb26..736bd7ecb2 100644
--- a/packages/studio/src/components/editor/DomEditOverlay.test.ts
+++ b/packages/studio/src/components/editor/DomEditOverlay.test.ts
@@ -11,10 +11,10 @@ import {
hasDomEditRotationChanged,
resolveDomEditCoordinateScale,
resolveDomEditGroupOverlayRect,
- resolveDomEditResizeGesture,
resolveDomEditRotationGesture,
} from "./DomEditOverlay";
import type { DomEditSelection } from "./domEditing";
+import { resolveResizeCenterAnchorOffset } from "./domEditOverlayGestures";
// React 19 warns unless the test environment opts into act().
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -84,21 +84,37 @@ vi.mock("./useDomEditOverlayRects", async () => {
};
});
+const previewHelperSpies = vi.hoisted(() => ({
+ getPreviewTargetFromPointer: vi.fn<() => HTMLElement | null>(() => null),
+}));
+
+vi.mock("../../utils/studioPreviewHelpers", async () => {
+ const actual = await vi.importActual
+
diff --git a/packages/studio/src/components/editor/DomEditCropHandles.tsx b/packages/studio/src/components/editor/DomEditCropHandles.tsx
index 7ac3b485b0..ff90de33af 100644
--- a/packages/studio/src/components/editor/DomEditCropHandles.tsx
+++ b/packages/studio/src/components/editor/DomEditCropHandles.tsx
@@ -31,12 +31,16 @@ interface DomEditCropHandlesProps {
onStyleCommit?: (property: string, value: string) => Promise
{STUDIO_RAZOR_TOOL_ENABLED && (
-
+
+
+ {STUDIO_KEYFRAMES_ENABLED && (
+ // Always rendered (CapCut-style): with no keyframeable selection the
+ // button fades to a disabled state instead of unmounting, so the
+ // toolbar layout never shifts.
-
- );
- })()}
- {beatAnalysisReady &&
- (() => {
- const canAdd = canAddBeatAt(currentTime);
- return (
-
-
);
})()}
+ {(() => {
+ // Always rendered (CapCut-style): before beat analysis loads (or when
+ // the project has no analyzed music) the button fades to a disabled
+ // state instead of unmounting, so the toolbar layout never shifts.
+ const canAdd = beatAnalysisReady && canAddBeatAt(currentTime);
+ return (
+
+
+
+ );
+ })()}
-
+ <>
@@ -131,46 +154,65 @@ export function TimelineToolbar({
onClick={() => setActiveTool("razor")}
aria-label="Razor tool"
aria-pressed={activeTool === "razor"}
- className={`flex h-6 w-6 items-center justify-center transition-colors active:scale-[0.98] ${
- activeTool === "razor"
- ? "bg-neutral-700 text-neutral-200"
- : "text-neutral-500 hover:text-neutral-300"
- }`}
+ className={activeTool === "razor" ? flatActive : flatIdle}
>
-
-
+ {/* Divider: tool-mode | editing-actions */}
+
+
)}
- {STUDIO_KEYFRAMES_ENABLED && onToggleKeyframe && (
+
+
- focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay)
- }
+ onPointerDownCapture={(event) => {
+ // A pointer gesture supersedes a pending nudge burst — commit it first
+ // so the gesture's member snapshot starts from the nudged position.
+ flushNudge();
+ focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay);
+ }}
onPointerDown={handleOverlayPointerDown}
onMouseDown={handleOverlayMouseDown}
onPointerMove={marquee.onPointerMove}
onPointerLeave={() => onCanvasPointerLeaveRef.current()}
onPointerUp={marquee.onPointerUp}
onPointerCancel={marquee.onPointerCancel}
+ onContextMenu={handleContextMenu}
>
{hoverSelection && hoverRect && compRect.width > 0 && (
)}
{hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && compRect.width > 0 && (
- <>
- {groupOverlayItems.map((item) => (
-
- ))}
-
{
- if (!allowCanvasMovement || !groupCanMove || e.shiftKey) return;
- gestures.startGroupDrag(e);
- }}
- onMouseDown={suppressBoxMouseDown}
- onClick={handleBoxClick}
- />
-
+ {
- e.stopPropagation();
- gestures.startGesture("rotate", e);
- }}
- />
- )}
- & { zIndex?: string; locked?: boolean },
@@ -133,3 +134,66 @@ describe("isLayerDraggable", () => {
expect(isLayerDraggable(layer)).toBe(true);
});
});
+
+// ── liveTime throttle contract (mirrors the useEffect in LayersPanel) ──────
+// The panel subscribes to liveTime with a rAF + 100 ms trailing throttle so
+// it refreshes during scrubbing without a collectLayers call every frame.
+// These tests exercise the subscribe/unsubscribe contract that the effect
+// relies on.
+
+describe("liveTime subscribe / unsubscribe (LayersPanel scrub contract)", () => {
+ let rafCallbacks: FrameRequestCallback[];
+ let originalRaf: typeof requestAnimationFrame;
+ let originalCancelRaf: typeof cancelAnimationFrame;
+
+ beforeEach(() => {
+ rafCallbacks = [];
+ originalRaf = globalThis.requestAnimationFrame;
+ originalCancelRaf = globalThis.cancelAnimationFrame;
+ let nextId = 1;
+ globalThis.requestAnimationFrame = (cb) => {
+ const id = nextId++;
+ rafCallbacks.push(cb);
+ return id;
+ };
+ globalThis.cancelAnimationFrame = vi.fn();
+ });
+
+ afterEach(() => {
+ globalThis.requestAnimationFrame = originalRaf;
+ globalThis.cancelAnimationFrame = originalCancelRaf;
+ });
+
+ it("unsubscribing stops the callback from receiving further notifications", () => {
+ const cb = vi.fn();
+ const unsubscribe = liveTime.subscribe(cb);
+
+ liveTime.notify(1);
+ expect(cb).toHaveBeenCalledTimes(1);
+
+ unsubscribe();
+ liveTime.notify(2);
+ expect(cb).toHaveBeenCalledTimes(1); // no new call after unsubscribe
+ });
+
+ it("queuing a rAF on liveTime notify then flushing calls the refresh exactly once", () => {
+ const refresh = vi.fn();
+ const throttle = createRafThrottle(refresh, 100);
+ const unsubscribe = liveTime.subscribe(throttle.invoke);
+
+ // First notify enqueues one rAF
+ liveTime.notify(0.1);
+ expect(rafCallbacks).toHaveLength(1);
+ expect(refresh).not.toHaveBeenCalled();
+
+ // Second notify before rAF flush is ignored (rafId is set)
+ liveTime.notify(0.2);
+ expect(rafCallbacks).toHaveLength(1);
+
+ // Flush the rAF
+ rafCallbacks[0](performance.now());
+ expect(refresh).toHaveBeenCalledTimes(1);
+
+ unsubscribe();
+ });
+});
diff --git a/packages/studio/src/components/editor/LayersPanel.tsx b/packages/studio/src/components/editor/LayersPanel.tsx
index 915b81c6a6..b84bb47f61 100644
--- a/packages/studio/src/components/editor/LayersPanel.tsx
+++ b/packages/studio/src/components/editor/LayersPanel.tsx
@@ -7,7 +7,7 @@ import {
} from "./domEditing";
import { useStudioPlaybackContext, useStudioShellContext } from "../../contexts/StudioContext";
import { useDomEditContext } from "../../contexts/DomEditContext";
-import { usePlayerStore } from "../../player";
+import { usePlayerStore, liveTime } from "../../player";
import {
findMatchingTimelineElementId,
resolveTimelineSelectionSeekTime,
@@ -49,6 +49,34 @@ function isCompositionHost(el: HTMLElement): boolean {
return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
}
+/**
+ * A trailing-rAF + cooldown throttle: `invoke` runs `run` at most once per
+ * animation frame and no more often than `throttleMs`. `cancel` clears any
+ * pending frame (call on cleanup). Extracted so the throttle can be exercised
+ * directly in tests instead of being reconstructed there.
+ */
+export function createRafThrottle(
+ run: () => void,
+ throttleMs = 100,
+): { invoke: () => void; cancel: () => void } {
+ let rafId: number | null = null;
+ let lastFired = 0;
+ return {
+ invoke: () => {
+ const now = performance.now();
+ if (rafId !== null || now - lastFired < throttleMs) return;
+ rafId = requestAnimationFrame(() => {
+ rafId = null;
+ lastFired = performance.now();
+ run();
+ });
+ },
+ cancel: () => {
+ if (rafId !== null) cancelAnimationFrame(rafId);
+ },
+ };
+}
+
interface CollapsedState {
[key: string]: boolean;
}
@@ -122,6 +150,20 @@ export const LayersPanel = memo(function LayersPanel() {
}
}, [compositionLoading, collectLayers]);
+ // Subscribe to liveTime so the panel refreshes during scrubbing.
+ // liveTime bypasses React state (no re-renders per frame), so a plain
+ // usePlayerStore(s => s.currentTime) subscription never fires while the
+ // RAF loop is running. Throttle with a trailing rAF + 100 ms cooldown to
+ // avoid a collectLayers call on every animation frame.
+ useEffect(() => {
+ const throttle = createRafThrottle(collectLayers, 100);
+ const unsubscribe = liveTime.subscribe(throttle.invoke);
+ return () => {
+ unsubscribe();
+ throttle.cancel();
+ };
+ }, [collectLayers]);
+
const resolveSelection = useCallback(
(layer: DomEditLayerItem) => {
// Re-find the element from the live DOM — layer.element may be stale
diff --git a/packages/studio/src/components/editor/SnapGuideOverlay.tsx b/packages/studio/src/components/editor/SnapGuideOverlay.tsx
index 01faf85223..850d98adf5 100644
--- a/packages/studio/src/components/editor/SnapGuideOverlay.tsx
+++ b/packages/studio/src/components/editor/SnapGuideOverlay.tsx
@@ -1,7 +1,6 @@
-// fallow-ignore-file unused-file
import { memo, useRef, type RefObject } from "react";
import { useMountEffect } from "../../hooks/useMountEffect";
-import type { SnapGuide, SpacingGuide } from "./snapEngine";
+import { resolveGuideLineRect, type SnapGuide, type SpacingGuide } from "./snapEngine";
export interface SnapGuidesState {
guides: SnapGuide[];
@@ -17,22 +16,35 @@ const SPACING_BG = "rgba(255, 68, 204, 0.15)";
interface SnapGuideOverlayProps {
snapGuidesRef: RefObject;
- overlayWidth: number;
- overlayHeight: number;
+ /** Composition rect in overlay space — guide lines span exactly this rect. */
+ compositionLeft: number;
+ compositionTop: number;
+ compositionWidth: number;
+ compositionHeight: number;
}
export const SnapGuideOverlay = memo(function SnapGuideOverlay({
snapGuidesRef,
- overlayWidth,
- overlayHeight,
+ compositionLeft,
+ compositionTop,
+ compositionWidth,
+ compositionHeight,
}: SnapGuideOverlayProps) {
const guideElsRef = useRef<(HTMLDivElement | null)[]>([]);
const spacingElsRef = useRef<(HTMLDivElement | null)[]>([]);
const spacingLabelElsRef = useRef<(HTMLSpanElement | null)[]>([]);
- const overlayWidthRef = useRef(overlayWidth);
- overlayWidthRef.current = overlayWidth;
- const overlayHeightRef = useRef(overlayHeight);
- overlayHeightRef.current = overlayHeight;
+ const compositionRectRef = useRef({
+ left: compositionLeft,
+ top: compositionTop,
+ width: compositionWidth,
+ height: compositionHeight,
+ });
+ compositionRectRef.current = {
+ left: compositionLeft,
+ top: compositionTop,
+ width: compositionWidth,
+ height: compositionHeight,
+ };
useMountEffect(() => {
let frame = 0;
@@ -44,8 +56,7 @@ export const SnapGuideOverlay = memo(function SnapGuideOverlay({
const state = snapGuidesRef.current;
const guides = state?.guides ?? [];
const spacingGuides = state?.spacingGuides ?? [];
- const w = overlayWidthRef.current;
- const h = overlayHeightRef.current;
+ const composition = compositionRectRef.current;
for (let i = 0; i < MAX_GUIDES; i++) {
const el = guideElsRef.current[i];
@@ -58,17 +69,11 @@ export const SnapGuideOverlay = memo(function SnapGuideOverlay({
}
el.style.display = "";
- if (guide.axis === "x") {
- el.style.left = `${guide.position}px`;
- el.style.top = "0";
- el.style.width = "1px";
- el.style.height = `${h}px`;
- } else {
- el.style.left = "0";
- el.style.top = `${guide.position}px`;
- el.style.width = `${w}px`;
- el.style.height = "1px";
- }
+ const line = resolveGuideLineRect(guide, composition);
+ el.style.left = `${line.left}px`;
+ el.style.top = `${line.top}px`;
+ el.style.width = `${line.width}px`;
+ el.style.height = `${line.height}px`;
}
for (let i = 0; i < MAX_SPACING_GUIDES; i++) {
diff --git a/packages/studio/src/components/editor/SnapToolbar.test.tsx b/packages/studio/src/components/editor/SnapToolbar.test.tsx
index 9cac6538f1..29e73b463d 100644
--- a/packages/studio/src/components/editor/SnapToolbar.test.tsx
+++ b/packages/studio/src/components/editor/SnapToolbar.test.tsx
@@ -34,7 +34,6 @@ function AppHotkeyHarness() {
const leftSidebarRef = useRef(null);
useAppHotkeys({
- toggleTimelineVisibility: vi.fn(),
handleTimelineElementDelete: vi.fn(),
handleTimelineElementSplit: vi.fn(),
handleDomEditElementDelete: vi.fn(),
diff --git a/packages/studio/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts b/packages/studio/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts
new file mode 100644
index 0000000000..49065c709c
--- /dev/null
+++ b/packages/studio/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts
@@ -0,0 +1,214 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState, UseDomEditOverlayGesturesOptions } from "./domEditOverlayGestures";
+
+// Origin box (overlay px). The gesture-start center is its centroid; the
+// center-anchored resize must keep THIS point planted, which means the release
+// must commit a nonzero offset equal to minus half the size growth.
+const ORIGIN = { left: 0, top: 0, width: 200, height: 100 };
+const ORIGIN_CENTER = {
+ x: ORIGIN.left + ORIGIN.width / 2,
+ y: ORIGIN.top + ORIGIN.height / 2,
+};
+
+// Consistent geometry stub: model the physical truth the real DOM would report.
+// A CSS width/height change grows the box from its top-left, so the rendered
+// center drifts by half the size delta; the manual offset the gesture applies
+// (read back from the element's studio vars) pulls it back. `elementCornerOverlayPoints`
+// returns the four corners of that drifted box; `overlayCornersCentroid` (kept
+// real) averages them so the anchor loop can measure the true center each frame.
+vi.mock("./domEditOverlayGeometry", async () => {
+ const actual = await vi.importActual(
+ "./domEditOverlayGeometry",
+ );
+ const { readStudioBoxSize, readStudioPathOffset } = await import("./manualEditsDom");
+ const physicalCenter = (element: HTMLElement) => {
+ const size = readStudioBoxSize(element);
+ const width = size.width > 0 ? size.width : ORIGIN.width;
+ const height = size.height > 0 ? size.height : ORIGIN.height;
+ const offset = readStudioPathOffset(element);
+ return {
+ x: ORIGIN_CENTER.x + (width - ORIGIN.width) / 2 + offset.x,
+ y: ORIGIN_CENTER.y + (height - ORIGIN.height) / 2 + offset.y,
+ width,
+ height,
+ };
+ };
+ return {
+ ...actual,
+ elementCornerOverlayPoints: (_o: unknown, _i: unknown, element: HTMLElement) => {
+ const c = physicalCenter(element);
+ const hw = c.width / 2;
+ const hh = c.height / 2;
+ return {
+ nw: { x: c.x - hw, y: c.y - hh },
+ ne: { x: c.x + hw, y: c.y - hh },
+ sw: { x: c.x - hw, y: c.y + hh },
+ se: { x: c.x + hw, y: c.y + hh },
+ };
+ },
+ orientedOverlayRect: (_o: unknown, _i: unknown, element: HTMLElement) => {
+ const c = physicalCenter(element);
+ return {
+ left: c.x - c.width / 2,
+ top: c.y - c.height / 2,
+ width: c.width,
+ height: c.height,
+ editScaleX: 1,
+ editScaleY: 1,
+ angle: 0,
+ };
+ },
+ };
+});
+
+const { createDomEditOverlayGestureHandlers } = await import("./useDomEditOverlayGestures");
+
+function ref(current: T) {
+ return { current };
+}
+
+interface CommitCall {
+ size: { width: number; height: number };
+ offset: { x: number; y: number } | undefined;
+}
+
+function buildHarness() {
+ const element = document.createElement("div");
+ document.body.append(element);
+
+ const selection = {
+ element,
+ id: "box",
+ selector: "#box",
+ selectorIndex: 0,
+ sourceFile: "index.html",
+ tagName: "div",
+ label: "Box",
+ textContent: "",
+ textFields: [],
+ capabilities: {
+ canEditText: false,
+ canEditLayout: true,
+ canMove: true,
+ canApplyManualOffset: true,
+ canApplyManualSize: true,
+ canApplyManualRotation: false,
+ canAdjustOpacity: true,
+ canAdjustFill: true,
+ canAdjustBorderRadius: true,
+ canAdjustStroke: true,
+ canAdjustShadow: true,
+ canAdjustZIndex: true,
+ },
+ computedStyle: { display: "block", position: "absolute" },
+ } as unknown as DomEditSelection;
+
+ const commits: CommitCall[] = [];
+ const overlayEl = document.createElement("div");
+ const iframe = document.createElement("iframe");
+
+ const opts: UseDomEditOverlayGesturesOptions = {
+ overlayRef: ref(overlayEl),
+ iframeRef: ref(iframe),
+ boxRef: ref(document.createElement("div")),
+ selectionRef: ref(selection),
+ hoverSelectionRef: ref(null),
+ overlayRectRef: ref({
+ left: ORIGIN.left,
+ top: ORIGIN.top,
+ width: ORIGIN.width,
+ height: ORIGIN.height,
+ editScaleX: 1,
+ editScaleY: 1,
+ }) as never,
+ groupOverlayItemsRef: ref([]),
+ gestureRef: ref(null),
+ groupGestureRef: ref(null),
+ blockedMoveRef: ref(null),
+ rafPausedRef: ref(false),
+ suppressNextBoxClickRef: ref(false),
+ setOverlayRect: () => {},
+ setGroupOverlayItems: () => {},
+ onBlockedMoveRef: ref(() => {}),
+ onManualDragStartRef: ref(() => {}),
+ onPathOffsetCommitRef: ref(() => {}),
+ onGroupPathOffsetCommitRef: ref(() => {}),
+ onBoxSizeCommitRef: ref((_s, size, offset) => {
+ commits.push({ size, offset });
+ }),
+ onRotationCommitRef: ref(() => {}),
+ onCanvasPointerMoveRef: ref(() => Promise.resolve(null)),
+ onCanvasMouseDown: () => {},
+ snapGuidesRef: ref(null),
+ };
+
+ const handlers = createDomEditOverlayGestureHandlers(opts);
+ return { handlers, commits, selection };
+}
+
+type OverlayRectLike = {
+ left: number;
+ top: number;
+ width: number;
+ height: number;
+ editScaleX: number;
+ editScaleY: number;
+};
+
+function evt(clientX: number, clientY: number) {
+ return {
+ clientX,
+ clientY,
+ pointerId: 1,
+ button: 0,
+ altKey: false,
+ shiftKey: false,
+ preventDefault() {},
+ stopPropagation() {},
+ currentTarget: { setPointerCapture() {} },
+ } as unknown as React.PointerEvent;
+}
+
+afterEach(() => {
+ document.body.innerHTML = "";
+});
+
+describe("anchored corner resize — the release commit feeds the center-pin offset", () => {
+ it("onPointerUp passes a nonzero offset that keeps the center planted", () => {
+ const { handlers, commits } = buildHarness();
+
+ // Start an SE corner resize. Pointer starts 100px right of the center.
+ handlers.startGesture("resize", evt(ORIGIN_CENTER.x + 100, ORIGIN_CENTER.y), {
+ resizeHandle: "se",
+ });
+
+ // Drag outward to radial scale 1.5 (dist 150 / 100). Several frames so the
+ // per-frame center-pin anchor accumulates and converges into g.lastResizeAnchor.
+ for (let i = 0; i < 5; i++) {
+ handlers.onPointerMove(evt(ORIGIN_CENTER.x + 150, ORIGIN_CENTER.y));
+ }
+
+ handlers.onPointerUp(evt(ORIGIN_CENTER.x + 150, ORIGIN_CENTER.y));
+
+ expect(commits).toHaveLength(1);
+ const { size, offset } = commits[0]!;
+
+ // Proportional 1.5x growth of the 200x100 base.
+ expect(size.width).toBeCloseTo(300, 0);
+ expect(size.height).toBeCloseTo(150, 0);
+
+ // The committed offset must be present and nonzero — the open question.
+ expect(offset).toBeDefined();
+ if (!offset) return;
+ expect(offset.x).not.toBe(0);
+ expect(offset.y).not.toBe(0);
+
+ // And it must equal minus half the size growth, i.e. it re-pins the center to
+ // exactly the gesture-start center (offset = -(finalSize - origin)/2).
+ expect(offset.x).toBeCloseTo(-(size.width - ORIGIN.width) / 2, 0);
+ expect(offset.y).toBeCloseTo(-(size.height - ORIGIN.height) / 2, 0);
+ });
+});
diff --git a/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts b/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts
index 7e97d65d33..9e2bda99db 100644
--- a/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts
+++ b/packages/studio/src/components/editor/anchoredResizeReleaseShift.test.ts
@@ -8,6 +8,7 @@ import {
} from "./manualEditsDom";
import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
+import { computeNextResizeAnchor } from "./useDomEditOverlayGestures";
import type { PatchOperation } from "../../utils/sourcePatcher";
import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
@@ -16,15 +17,25 @@ import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
* CENTER, which must stay planted across the whole gesture — including after
* release, on every corner and at any rotation.
*
- * This file lands here with ONLY the persist round-trip test, which exercises the
- * real apply → persist → reload symbols that already exist at this point in the
- * stack. The two center-anchor CONVERGENCE tests (the release-shift root cause)
- * drive the exported `computeNextResizeAnchor` accumulator, which is extracted from
- * the resize pointermove branch of `useDomEditOverlayGestures.ts`. That gesture code
- * lands later in the stack (with the canvas glue swap), so those two tests are added
- * to this file at that point — importing the real production helper rather than a
- * test-local copy, so they can never pass against a stand-in that drifts from the
- * shipped math.
+ * Root cause of the original release "shift" (proved with a real-layout Chromium
+ * replay, see the anchor-loop test below): during a resize drag the per-frame
+ * anchor is derived from the element's LIVE measured center — which already carries
+ * the offset applied on the PREVIOUS frame — while `applyManualOffsetDragDraft`
+ * treats that anchor as the ABSOLUTE offset. So `fixedStart - centerNow` is really
+ * only the RESIDUAL correction, and using it as the absolute value makes the anchor
+ * OSCILLATE between the correct value and zero every frame:
+ * frame 0: offset 0 → center shifted by the resize → anchor = full amount → apply
+ * frame 1: offset applied → center back at fixedStart → anchor = 0 → apply 0 (un-pin!)
+ * frame 2: offset 0 again → anchor = full amount → ...
+ * Release commits `g.lastResizeAnchor` from whichever parity the last pointermove
+ * landed on, so the element lands EITHER pinned OR un-pinned — an unpredictable
+ * post-release "shift".
+ *
+ * Fix (useDomEditOverlayGestures pointermove, resize branch, fa4f39168): accumulate
+ * the residual onto the previously-applied anchor instead of using it as the
+ * absolute offset, so the loop converges to a stable value on every frame. The
+ * per-frame accumulation is the exported `computeNextResizeAnchor` helper (the one
+ * call site in the pointermove resize branch); tests 1 & 2 drive it directly.
*/
afterEach(() => {
@@ -66,10 +77,95 @@ function resolvedTranslatePx(el: HTMLElement): { x: number; y: number } {
}
describe("center-anchored corner resize — no shift after release", () => {
+ it("the per-frame center anchor converges (does NOT oscillate) — the release-shift root cause", () => {
+ // Model the pointermove anchor loop that pins the element's CENTER. The physical
+ // truth (confirmed in a real browser): the measured center sits at
+ // `fixedStart - appliedOffset` shifted by the resize — i.e. applying the offset
+ // moves the center back toward its gesture-start position. Here scale=1 so
+ // screen px == offset px. `trueAnchor` is the compensating offset that pins it.
+ const trueAnchor = { dx: -60, dy: -27 };
+ const fixedStart = { x: 500, y: 270 };
+
+ // `appliedOffset` mirrors what applyManualOffsetDragDraft set last frame.
+ let appliedOffset = { x: 0, y: 0 };
+ // `lastResizeAnchor` accumulator, exactly as g.lastResizeAnchor in the fix.
+ let lastResizeAnchor: { dx: number; dy: number } | undefined;
+
+ const anchorsSeen: Array<{ dx: number; dy: number }> = [];
+ for (let frame = 0; frame < 8; frame++) {
+ // Live measured center: the resize would put it at fixedStart + trueAnchor
+ // (un-anchored), and the currently-applied offset pulls it back by that
+ // offset. So centerNow = fixedStart - trueAnchor + appliedOffset.
+ const centerNow = {
+ x: fixedStart.x - trueAnchor.dx + appliedOffset.x,
+ y: fixedStart.y - trueAnchor.dy + appliedOffset.y,
+ };
+ // ── The fixed logic (accumulate residual onto the previous anchor) ──
+ const anchor = computeNextResizeAnchor(lastResizeAnchor, fixedStart, centerNow);
+ lastResizeAnchor = anchor;
+ anchorsSeen.push(anchor);
+ // applyManualOffsetDragDraft sets the absolute offset (scale 1) = anchor.
+ appliedOffset = { x: anchor.dx, y: anchor.dy };
+ }
+
+ // Every frame must report the same, correct anchor — no oscillation, so the
+ // committed value is parity-independent.
+ for (const a of anchorsSeen) {
+ expect(a).toEqual(trueAnchor);
+ }
+ // Guard against the OLD absolute formula regressing: with `anchor =
+ // fixedStart - centerNow` (no accumulation) the sequence would be
+ // [trueAnchor, 0, trueAnchor, 0, ...]; assert the last two frames agree.
+ expect(anchorsSeen.at(-1)).toEqual(anchorsSeen.at(-2));
+ });
+
+ it("the center stays fixed for every corner at any rotation (loop converges)", () => {
+ // The pin loop is handle- and rotation-independent: it always measures the
+ // element CENTER and drives it back to fixedStart. Simulate the loop for all
+ // four corners across unrotated + rotated gestures; the resize's raw center
+ // shift varies with corner/rotation (modelled as `rawShift`), but the loop must
+ // converge the measured center onto fixedStart every time.
+ const fixedStart = { x: 640, y: 360 };
+ const HANDLES = ["nw", "ne", "sw", "se"] as const;
+ const DEGS = [0, 30, 90, 137];
+ for (const handle of HANDLES) {
+ for (const deg of DEGS) {
+ const t = (deg * Math.PI) / 180;
+ // Raw (un-pinned) center shift the size write would cause this frame —
+ // a corner/rotation-dependent vector. Its exact value is irrelevant; the
+ // loop only needs to cancel it.
+ const seed = (HANDLES.indexOf(handle) + 1) * 11;
+ const rawShift = {
+ dx: Math.cos(t) * seed - Math.sin(t) * (seed / 2),
+ dy: Math.sin(t) * seed + Math.cos(t) * (seed / 2),
+ };
+ let appliedOffset = { x: 0, y: 0 };
+ let lastResizeAnchor: { dx: number; dy: number } | undefined;
+ let centerNow = { x: fixedStart.x, y: fixedStart.y };
+ for (let frame = 0; frame < 6; frame++) {
+ centerNow = {
+ x: fixedStart.x + rawShift.dx + appliedOffset.x,
+ y: fixedStart.y + rawShift.dy + appliedOffset.y,
+ };
+ const anchor = computeNextResizeAnchor(lastResizeAnchor, fixedStart, centerNow);
+ lastResizeAnchor = anchor;
+ appliedOffset = { x: anchor.dx, y: anchor.dy };
+ }
+ // After convergence the pinned center equals the gesture-start center.
+ const pinnedCenter = {
+ x: fixedStart.x + rawShift.dx + appliedOffset.x,
+ y: fixedStart.y + rawShift.dy + appliedOffset.y,
+ };
+ expect(pinnedCenter.x).toBeCloseTo(fixedStart.x, 9);
+ expect(pinnedCenter.y).toBeCloseTo(fixedStart.y, 9);
+ }
+ }
+ });
+
it("net translate after persist+reload equals the committed anchor offset (non-GSAP)", () => {
// The committed offset flows through the real apply → persist → reload chain
// unchanged (this hop was proved clean; the shift is upstream in the anchor
- // loop, tested with the gesture code, not in persistence).
+ // loop above, not in persistence).
const el = document.createElement("div");
el.style.setProperty("width", "200px");
el.style.setProperty("height", "100px");
diff --git a/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts b/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts
index 2bd16d839a..e048c16489 100644
--- a/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts
+++ b/packages/studio/src/components/editor/domEditOverlayGeometry.test.ts
@@ -1,6 +1,36 @@
// @vitest-environment jsdom
import { describe, expect, it } from "vitest";
-import { selectionCacheKey } from "./domEditOverlayGeometry";
+import {
+ orientedOverlayRect,
+ overlayCornersCentroid,
+ selectionCacheKey,
+} from "./domEditOverlayGeometry";
+
+describe("overlayCornersCentroid", () => {
+ it("averages the four corners (the rendered rotation center)", () => {
+ expect(
+ overlayCornersCentroid({
+ nw: { x: 10, y: 20 },
+ ne: { x: 110, y: 20 },
+ se: { x: 110, y: 80 },
+ sw: { x: 10, y: 80 },
+ }),
+ ).toEqual({ x: 60, y: 50 });
+ });
+
+ it("is unchanged by rotation — a rotated square's corners average to its center", () => {
+ // Unit square centered at (5,5), rotated 45deg about its center: corners land
+ // on the axis midpoints, whose average is still the center.
+ const c = overlayCornersCentroid({
+ nw: { x: 5, y: 5 - Math.SQRT2 / 2 },
+ ne: { x: 5 + Math.SQRT2 / 2, y: 5 },
+ se: { x: 5, y: 5 + Math.SQRT2 / 2 },
+ sw: { x: 5 - Math.SQRT2 / 2, y: 5 },
+ });
+ expect(c.x).toBeCloseTo(5, 9);
+ expect(c.y).toBeCloseTo(5, 9);
+ });
+});
describe("selectionCacheKey — hfId collision (R7)", () => {
it("produces distinct keys for two elements that differ only by hfId", () => {
@@ -11,3 +41,131 @@ describe("selectionCacheKey — hfId collision (R7)", () => {
expect(a).not.toBe(b);
});
});
+
+describe("orientedOverlayRect — rotation gate (perf fix, V15 18a/18b)", () => {
+ // jsdom has no DOMMatrix/DOMPoint; a minimal stand-in is enough to exercise the
+ // real (unmocked) orientedOverlayRect, unlike DomEditOverlay.test.ts and
+ // anchoredResizeCommitFeedsOffset.test.ts, which mock this module entirely.
+ class FakeDOMMatrix {
+ a = 1;
+ b = 0;
+ c = 0;
+ d = 1;
+ e = 0;
+ f = 0;
+ constructor(init?: string) {
+ const m = init ? /matrix\(([^)]+)\)/.exec(init) : null;
+ if (!m) return;
+ const parts = m[1]!.split(",").map((s) => Number.parseFloat(s.trim()));
+ [this.a, this.b, this.c, this.d, this.e, this.f] = parts as [
+ number,
+ number,
+ number,
+ number,
+ number,
+ number,
+ ];
+ }
+ transformPoint(pt: { x: number; y: number }) {
+ return {
+ x: this.a * pt.x + this.c * pt.y + this.e,
+ y: this.b * pt.x + this.d * pt.y + this.f,
+ };
+ }
+ }
+ class FakeDOMPoint {
+ constructor(
+ public x: number,
+ public y: number,
+ ) {}
+ }
+ // matrix() form of rotate(30deg), so the module's `new DOMMatrix(cs.transform)`
+ // parse (which expects "matrix(...)", not "rotate(...)") resolves correctly.
+ const ROTATE_30DEG_MATRIX =
+ "matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0)";
+
+ function stubRect(
+ el: Element,
+ rect: { left: number; top: number; width: number; height: number },
+ ) {
+ (el as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect = () =>
+ ({
+ left: rect.left,
+ top: rect.top,
+ width: rect.width,
+ height: rect.height,
+ right: rect.left + rect.width,
+ bottom: rect.top + rect.height,
+ x: rect.left,
+ y: rect.top,
+ toJSON() {
+ return this;
+ },
+ }) as DOMRect;
+ }
+
+ function buildHarness() {
+ const overlayEl = document.createElement("div");
+ document.body.appendChild(overlayEl);
+ stubRect(overlayEl, { left: 0, top: 0, width: 1000, height: 1000 });
+
+ const iframe = document.createElement("iframe");
+ document.body.appendChild(iframe);
+ stubRect(iframe, { left: 0, top: 0, width: 1000, height: 1000 });
+
+ const doc = iframe.contentDocument!;
+ const root = doc.createElement("div");
+ root.setAttribute("data-composition-id", "root");
+ root.setAttribute("data-width", "1000");
+ root.setAttribute("data-height", "1000");
+ doc.body.appendChild(root);
+
+ const el = doc.createElement("div");
+ root.appendChild(el);
+ stubRect(el, { left: 400, top: 450, width: 200, height: 100 });
+ Object.defineProperty(el, "offsetWidth", { value: 200, configurable: true });
+ Object.defineProperty(el, "offsetHeight", { value: 100, configurable: true });
+
+ const win = iframe.contentWindow as unknown as Window & {
+ DOMMatrix: unknown;
+ DOMPoint: unknown;
+ };
+ win.DOMMatrix = FakeDOMMatrix;
+ win.DOMPoint = FakeDOMPoint;
+
+ return { overlayEl, iframe, el };
+ }
+
+ it("unrotated element takes the cheap AABB path — matches the raw bounding rect, angle 0", () => {
+ const { overlayEl, iframe, el } = buildHarness();
+ const rect = orientedOverlayRect(overlayEl, iframe, el);
+ expect(rect).not.toBeNull();
+ expect(rect!.left).toBeCloseTo(400, 5);
+ expect(rect!.top).toBeCloseTo(450, 5);
+ expect(rect!.width).toBeCloseTo(200, 5);
+ expect(rect!.height).toBeCloseTo(100, 5);
+ expect(rect!.angle ?? 0).toBe(0);
+ });
+
+ it("rotated element takes the corner-geometry path — reports the live angle", () => {
+ const { overlayEl, iframe, el } = buildHarness();
+ el.style.transform = ROTATE_30DEG_MATRIX;
+ const rect = orientedOverlayRect(overlayEl, iframe, el);
+ expect(rect).not.toBeNull();
+ expect(rect!.angle).toBeCloseTo(30, 3);
+ });
+
+ it("gate re-evaluates every call — editing an element to rotated mid-session flips the path immediately", () => {
+ const { overlayEl, iframe, el } = buildHarness();
+ const before = orientedOverlayRect(overlayEl, iframe, el);
+ expect(before?.angle ?? 0).toBe(0);
+
+ el.style.transform = ROTATE_30DEG_MATRIX;
+ const after = orientedOverlayRect(overlayEl, iframe, el);
+ expect(after!.angle).toBeCloseTo(30, 3);
+
+ el.style.transform = "";
+ const restored = orientedOverlayRect(overlayEl, iframe, el);
+ expect(restored?.angle ?? 0).toBe(0);
+ });
+});
diff --git a/packages/studio/src/components/editor/domEditOverlayGeometry.ts b/packages/studio/src/components/editor/domEditOverlayGeometry.ts
index 11bcf811a0..adff6686fc 100644
--- a/packages/studio/src/components/editor/domEditOverlayGeometry.ts
+++ b/packages/studio/src/components/editor/domEditOverlayGeometry.ts
@@ -107,31 +107,49 @@ export function toVisibleOverlayRect(
}
/**
- * The element's live transform rotation, in DEGREES (screen/CSS convention, CW
- * positive), decomposed from its computed transform matrix (rotation = atan2(b, a)).
- * GSAP folds rotation and scale into the same matrix; this reads rotation only.
- * Returns 0 when the transform is "none" or unmeasurable — callers treat 0 as
- * axis-aligned. Skew is ignored (does not affect atan2(b, a)).
+ * getComputedStyle(element).transform decomposed into a DOMMatrix, read ONCE.
+ * Shared by orientedOverlayRect's rotation gate and elementCornerOverlayPoints
+ * so a single measurement pass serves both — constructing this twice per frame
+ * (one read per consumer) was redundant work; see orientedOverlayRect below.
*/
-function readElementRotationDegrees(iframe: HTMLIFrameElement, element: HTMLElement): number {
- const win = iframe.contentWindow;
- if (!win) return 0;
+interface ElementTransformSnapshot {
+ matrix: DOMMatrix;
+ cs: CSSStyleDeclaration;
+}
+
+function readElementTransformSnapshot(
+ win: Window,
+ element: HTMLElement,
+): ElementTransformSnapshot | null {
const DOMMatrixCtor = (win as Window & typeof globalThis).DOMMatrix;
- if (!DOMMatrixCtor) return 0;
- const transform = win.getComputedStyle(element).transform;
- if (!transform || transform === "none") return 0;
- let matrix: DOMMatrix;
+ if (!DOMMatrixCtor) return null;
+ const cs = win.getComputedStyle(element);
try {
- matrix = new DOMMatrixCtor(transform);
+ const matrix = new DOMMatrixCtor(cs.transform === "none" ? "" : cs.transform);
+ return { matrix, cs };
} catch {
- return 0;
+ return null;
}
+}
+
+/**
+ * The element's live transform rotation, in DEGREES (screen/CSS convention, CW
+ * positive), decomposed from its transform matrix (rotation = atan2(b, a)).
+ * GSAP folds rotation and scale into the same matrix; this reads rotation only.
+ * Skew is ignored (does not affect atan2(b, a)).
+ */
+function rotationDegreesFromMatrix(matrix: DOMMatrix): number {
const a = Number.isFinite(matrix.a) ? matrix.a : 1;
const b = Number.isFinite(matrix.b) ? matrix.b : 0;
const deg = (Math.atan2(b, a) * 180) / Math.PI;
return Number.isFinite(deg) ? deg : 0;
}
+/** Below this, orientedOverlayRect treats the element as unrotated and returns
+ * the AABB directly (see its doc comment) — tight enough to only swallow
+ * matrix-decomposition floating-point noise, never an actual rotation. */
+const ROTATION_GATE_EPSILON_DEG = 1e-4;
+
/** iframe→overlay mapping basis shared by every overlay-geometry function. */
interface OverlayRootScale {
iframeRect: DOMRect;
@@ -185,12 +203,14 @@ function computeOverlayRootScale(
};
}
-export function toOverlayRect(
+function toOverlayRect(
overlayEl: HTMLDivElement,
iframe: HTMLIFrameElement,
element: HTMLElement,
+ precomputedScale?: OverlayRootScale | null,
): OverlayRect | null {
- const scale = computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
+ const scale =
+ precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
if (!scale) return null;
const { iframeRect, overlayRect, rootScaleX, rootScaleY } = scale;
@@ -220,6 +240,14 @@ export function toOverlayRect(
* fixed: NW grabs the top-left, so the bottom-right (se) is the anchor, etc. */
export type FixedCorner = "nw" | "ne" | "sw" | "se";
+/** Distance between two overlay-px corner points — the edge-length math
+ * orientedOverlayRect uses to turn corners into a width/height. Exported so a
+ * caller already holding raw corners (e.g. a resize gesture mid-measurement)
+ * can derive the same dimensions without a second orientedOverlayRect call. */
+export function cornerEdgeLength(a: { x: number; y: number }, b: { x: number; y: number }): number {
+ return Math.hypot(b.x - a.x, b.y - a.y);
+}
+
/**
* The centroid (rendered center) of the four transformed corners from
* `elementCornerOverlayPoints`, in overlay px. This is the element's true rotation
@@ -247,15 +275,16 @@ export function elementCornerOverlayPoints(
overlayEl: HTMLDivElement,
iframe: HTMLIFrameElement,
element: HTMLElement,
+ precomputedScale?: OverlayRootScale | null,
+ precomputedTransform?: ElementTransformSnapshot | null,
): Record | null {
const win = iframe.contentWindow;
const doc = iframe.contentDocument;
if (!win || !doc) return null;
- const DOMMatrixCtor = (win as Window & typeof globalThis).DOMMatrix;
const DOMPointCtor = (win as Window & typeof globalThis).DOMPoint;
- if (!DOMMatrixCtor || !DOMPointCtor) return null;
+ if (!DOMPointCtor) return null;
- const scale = computeOverlayRootScale(overlayEl, iframe, doc);
+ const scale = precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, doc);
if (!scale) return null;
const { iframeRect, overlayRect, rootScaleX, rootScaleY } = scale;
@@ -266,18 +295,14 @@ export function elementCornerOverlayPoints(
// BCR by matching the AABB of the transformed corners to the real BCR — the
// constant offset cancels in the before/after difference the caller takes, but
// we resolve it fully here so callers can also read absolute overlay positions.
- const cs = win.getComputedStyle(element);
+ const transform = precomputedTransform ?? readElementTransformSnapshot(win, element);
+ if (!transform) return null;
+ const { matrix, cs } = transform;
const w = element.offsetWidth;
const h = element.offsetHeight;
const originParts = cs.transformOrigin.split(" ").map((p) => Number.parseFloat(p));
const ox = Number.isFinite(originParts[0]!) ? originParts[0]! : w / 2;
const oy = Number.isFinite(originParts[1]!) ? originParts[1]! : h / 2;
- let matrix: DOMMatrix;
- try {
- matrix = new DOMMatrixCtor(cs.transform === "none" ? "" : cs.transform);
- } catch {
- return null;
- }
const rel = (lx: number, ly: number): { x: number; y: number } => {
const p = matrix.transformPoint(new DOMPointCtor(lx - ox, ly - oy));
return { x: p.x, y: p.y };
@@ -321,20 +346,35 @@ export function elementCornerOverlayPoints(
* AABB and OBB coincide), so unrotated chrome is pixel-identical to today.
*
* Returns the plain AABB rect (angle 0) when the corner geometry can't be measured.
+ *
+ * Rotation gate: an unrotated element's OBB is numerically identical to its AABB
+ * (the comment above), so a cheap rotation read decides up front whether the
+ * (much pricier) corner-transform pass runs at all — for the overwhelming
+ * majority of selections, which aren't rotated, this call is just `toOverlayRect`
+ * plus one getComputedStyle/DOMMatrix read. The root scale and the transform
+ * snapshot are each computed once per call and threaded into both the rotation
+ * read and the corner math, instead of every helper re-measuring independently.
*/
export function orientedOverlayRect(
overlayEl: HTMLDivElement,
iframe: HTMLIFrameElement,
element: HTMLElement,
): OverlayRect | null {
- const base = toOverlayRect(overlayEl, iframe, element);
+ const scale = computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
+ if (!scale) return null;
+ const base = toOverlayRect(overlayEl, iframe, element, scale);
if (!base) return null;
- const corners = elementCornerOverlayPoints(overlayEl, iframe, element);
+
+ const win = iframe.contentWindow;
+ const transform = win ? readElementTransformSnapshot(win, element) : null;
+ const angle = transform ? rotationDegreesFromMatrix(transform.matrix) : 0;
+ if (Math.abs(angle) < ROTATION_GATE_EPSILON_DEG) return base;
+
+ const corners = elementCornerOverlayPoints(overlayEl, iframe, element, scale, transform);
if (!corners) return base;
- const angle = readElementRotationDegrees(iframe, element);
// Unrotated edge lengths (in overlay px): nw→ne is the width, nw→sw the height.
- const width = Math.hypot(corners.ne.x - corners.nw.x, corners.ne.y - corners.nw.y);
- const height = Math.hypot(corners.sw.x - corners.nw.x, corners.sw.y - corners.nw.y);
+ const width = cornerEdgeLength(corners.nw, corners.ne);
+ const height = cornerEdgeLength(corners.nw, corners.sw);
const centerX = (corners.nw.x + corners.se.x) / 2;
const centerY = (corners.nw.y + corners.se.y) / 2;
if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
diff --git a/packages/studio/src/components/editor/domEditOverlayGestures.ts b/packages/studio/src/components/editor/domEditOverlayGestures.ts
index 8f6949a549..c67e667af7 100644
--- a/packages/studio/src/components/editor/domEditOverlayGestures.ts
+++ b/packages/studio/src/components/editor/domEditOverlayGestures.ts
@@ -13,10 +13,20 @@ import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction"
export type GestureKind = "drag" | "resize" | "rotate";
+/** Which corner handle initiated a resize gesture. */
+export type ResizeHandle = "nw" | "ne" | "sw" | "se";
+
export const BLOCKED_MOVE_THRESHOLD_PX = 4;
-const MIN_RESIZE_EDGE_PX = 20;
const ROTATION_COMMIT_EPSILON_DEGREES = 0.05;
const ROTATION_SNAP_DEGREES = 15;
+/**
+ * Above this rotation, resize/move edge-snapping is bypassed. Industry editors
+ * (tldraw/Figma) don't edge-snap rotated boxes — the snap targets are axis-aligned
+ * AABBs, so snapping a rotated box's AABB to them shifts the box in a way the user
+ * can't predict; a wrong snap is worse than none. Rotation ~0 keeps snapping exactly
+ * as before.
+ */
+export const ROTATED_SNAP_BYPASS_DEGREES = 0.5;
export interface GestureState {
kind: GestureKind;
@@ -62,6 +72,19 @@ export interface GestureState {
snapContext?: SnapContext;
lastSnappedDx?: number;
lastSnappedDy?: number;
+ /** Corner the resize gesture grabbed (resize gestures only). */
+ resizeHandle?: ResizeHandle;
+ /** Last anchoring translation applied during a corner resize (overlay px). */
+ lastResizeAnchor?: { dx: number; dy: number };
+ /**
+ * The element's rendered CENTER in overlay px at gesture start (the centroid of
+ * its four real — possibly rotated — corners). A center-anchored resize keeps this
+ * point pinned; the per-frame anchor translation is computed as the shift of this
+ * exact center, not an AABB width/height delta (which only holds the center still
+ * when the element grows symmetrically from an unrotated layout box). Undefined
+ * when the corner geometry can't be measured (member creation still succeeded).
+ */
+ resizeFixedCenterStart?: { x: number; y: number };
}
export interface GroupGestureState {
@@ -89,48 +112,23 @@ export function focusDomEditOverlayElement(element: FocusableDomEditOverlay | nu
element?.focus({ preventScroll: true });
}
-export function resolveDomEditResizeGesture(input: {
+/**
+ * Overlay-px translation that keeps the element's CENTER fixed while a corner
+ * resizes: a CSS width/height change grows the layout box from its top-left, so
+ * the center drifts by half the size change on each axis; translating back by that
+ * half-delta re-pins the center. This is the UNROTATED (AABB) fallback used only
+ * when the element's real transformed corners can't be measured — the primary path
+ * pins the measured center (rotation-safe) in useDomEditOverlayGestures.
+ */
+export function resolveResizeCenterAnchorOffset(input: {
originWidth: number;
originHeight: number;
- actualWidth: number;
- actualHeight: number;
- scaleX: number;
- scaleY: number;
- // Rendered-per-CSS-pixel factor of the element itself (its live GSAP scale).
- // The CSS width/height the draft writes get multiplied by this on screen, so
- // the cursor delta must be divided by it — otherwise the box outruns the
- // pointer on a rescaled element and snaps back on release. Defaults to 1.
- contentScaleX?: number;
- contentScaleY?: number;
- dx: number;
- dy: number;
- uniform: boolean;
-}): { overlayWidth: number; overlayHeight: number; width: number; height: number } {
- const scaleX = input.scaleX > 0 ? input.scaleX : 1;
- const scaleY = input.scaleY > 0 ? input.scaleY : 1;
- const contentScaleX =
- input.contentScaleX !== undefined && input.contentScaleX > 0 ? input.contentScaleX : 1;
- const contentScaleY =
- input.contentScaleY !== undefined && input.contentScaleY > 0 ? input.contentScaleY : 1;
-
- if (input.uniform) {
- const deltaX = input.dx / (scaleX * contentScaleX);
- const deltaY = input.dy / (scaleY * contentScaleY);
- const delta = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX : deltaY;
- const side = Math.max(1, Math.max(input.actualWidth, input.actualHeight) + delta);
- return {
- overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, side * scaleX * contentScaleX),
- overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, side * scaleY * contentScaleY),
- width: side,
- height: side,
- };
- }
-
+ overlayWidth: number;
+ overlayHeight: number;
+}): { dx: number; dy: number } {
return {
- overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, input.originWidth + input.dx),
- overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, input.originHeight + input.dy),
- width: Math.max(1, input.actualWidth + input.dx / (scaleX * contentScaleX)),
- height: Math.max(1, input.actualHeight + input.dy / (scaleY * contentScaleY)),
+ dx: (input.originWidth - input.overlayWidth) / 2,
+ dy: (input.originHeight - input.overlayHeight) / 2,
};
}
@@ -214,7 +212,11 @@ export type UseDomEditOverlayGesturesOptions = {
(updates: DomEditGroupPathOffsetCommit[]) => Promise | void
>;
onBoxSizeCommitRef: RefObject<
- (s: DomEditSelection, n: { width: number; height: number }) => Promise | void
+ (
+ s: DomEditSelection,
+ n: { width: number; height: number },
+ offset?: { x: number; y: number },
+ ) => Promise | void
>;
onRotationCommitRef: RefObject<
(s: DomEditSelection, n: { angle: number }) => Promise | void
@@ -228,10 +230,3 @@ export type UseDomEditOverlayGesturesOptions = {
onCanvasMouseDown: (e: React.MouseEvent, o?: PreviewMouseDownOptions) => void;
snapGuidesRef: RefObject;
};
-
-/**
- * Corner identity for a chrome resize handle. Consumed by the selection
- * chrome + resize-local math; the gesture pipeline threads it through
- * startGesture options.
- */
-export type ResizeHandle = "nw" | "ne" | "sw" | "se";
diff --git a/packages/studio/src/components/editor/domEditOverlayStartGesture.ts b/packages/studio/src/components/editor/domEditOverlayStartGesture.ts
index 826c0a26dd..0d19aaa89e 100644
--- a/packages/studio/src/components/editor/domEditOverlayStartGesture.ts
+++ b/packages/studio/src/components/editor/domEditOverlayStartGesture.ts
@@ -20,7 +20,9 @@ import {
} from "./manualEdits";
import {
type OverlayRect,
+ elementCornerOverlayPoints,
filterNestedDomEditGroupItems,
+ overlayCornersCentroid,
selectionCacheKey,
} from "./domEditOverlayGeometry";
import {
@@ -178,7 +180,29 @@ export function startGesture(
initialPathOffset = result.member.initialPathOffset;
manualEditDragToken = result.member.gestureToken;
} else {
- manualEditDragToken = beginStudioManualEditGesture(sel.element);
+ // Center-anchored corner resize (CapCut model): the element scales about its
+ // CENTER, which stays planted. All four corners behave identically, so EVERY
+ // corner needs the manual-offset member that translates the element to re-pin
+ // its center per frame (the memberless else-branch is only a defensive fallback
+ // if member creation fails, e.g. the element can't take a manual offset).
+ const needsAnchorOffset = kind === "resize" && sel.capabilities.canApplyManualOffset;
+ if (needsAnchorOffset) {
+ const result = createManualOffsetDragMember({
+ key: selectionCacheKey(sel),
+ selection: sel,
+ element: sel.element,
+ rect,
+ });
+ if (result.ok) {
+ pathOffsetMember = result.member;
+ initialPathOffset = result.member.initialPathOffset;
+ manualEditDragToken = result.member.gestureToken;
+ } else {
+ manualEditDragToken = beginStudioManualEditGesture(sel.element);
+ }
+ } else {
+ manualEditDragToken = beginStudioManualEditGesture(sel.element);
+ }
}
const overlayBounds = overlayEl?.getBoundingClientRect();
@@ -186,6 +210,17 @@ export function startGesture(
const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
const iframe = opts.iframeRef.current;
+
+ // For a center-anchored corner resize, capture the element's rendered CENTER (the
+ // centroid of its four real, rotation-aware corners) now, so per-frame anchoring
+ // can pin that exact point instead of an axis-aligned width/height delta (which
+ // only holds the center still when the element grows symmetrically from an
+ // unrotated layout box). Present whenever an anchor member exists (all corners).
+ let resizeFixedCenterStart: { x: number; y: number } | undefined;
+ if (kind === "resize" && pathOffsetMember && overlayEl && iframe) {
+ const corners = elementCornerOverlayPoints(overlayEl, iframe, sel.element);
+ if (corners) resizeFixedCenterStart = overlayCornersCentroid(corners);
+ }
const snapContext =
(kind === "drag" || kind === "resize") && overlayEl && iframe
? collectSnapContext({
@@ -224,6 +259,8 @@ export function startGesture(
resizeAnchor,
manualEditDragToken,
snapContext,
+ resizeHandle: kind === "resize" ? (options?.resizeHandle ?? "se") : undefined,
+ resizeFixedCenterStart,
};
return true;
}
diff --git a/packages/studio/src/components/editor/domEditingDom.ts b/packages/studio/src/components/editor/domEditingDom.ts
index b1f341ca70..e01eb476bf 100644
--- a/packages/studio/src/components/editor/domEditingDom.ts
+++ b/packages/studio/src/components/editor/domEditingDom.ts
@@ -104,7 +104,7 @@ export function findClosestByAttribute(
// mounted root (it keeps `data-composition-id` but drops `data-composition-src`/
// `-file`), so a subcomp element's DOM ancestors no longer say which file it came
// from. This project-global map (composition-id → source file, built once from
-// index.html's clips — see NLELayout) recovers it. The studio loads one project at a
+// index.html's clips — see NLEContext/EditorShell) recovers it. The studio loads one project at a
// time, so module scope is the right lifetime; it's empty until set, in which case
// resolution falls back to the historical attribute-only behavior.
let compositionSourceMap: Map = new Map();
diff --git a/packages/studio/src/components/editor/manualEditsDomPatches.test.ts b/packages/studio/src/components/editor/manualEditsDomPatches.test.ts
index 3b5bf56132..5ef3a539fc 100644
--- a/packages/studio/src/components/editor/manualEditsDomPatches.test.ts
+++ b/packages/studio/src/components/editor/manualEditsDomPatches.test.ts
@@ -49,6 +49,7 @@ import {
buildMotionPatches,
buildClearMotionPatches,
} from "./manualEditsDomPatches";
+import { applyStudioBoxSize, applyStudioPathOffset } from "./manualEditsDom";
/* ── helpers ── */
@@ -267,6 +268,52 @@ describe("buildBoxSizePatches / buildClearBoxSizePatches", () => {
});
});
+/* ── Combined box-size + path-offset (anchored-corner resize) ──────────────── */
+
+describe("anchored-corner combined patch: [...buildBoxSizePatches, ...buildPathOffsetPatches]", () => {
+ // NW/NE/SW resize commits size AND anchor offset in ONE persist. The two
+ // builders read the same already-mutated element and are concatenated; this
+ // is only safe if their {type,property} keys are disjoint (no builder
+ // overwrites the other's op when the source patcher applies them in order).
+ it("concatenation of both builders emits disjoint {type,property} keys (no collision)", () => {
+ const e = div();
+ applyStudioBoxSize(e, { width: 300, height: 200 });
+ applyStudioPathOffset(e, { x: 10, y: 20 });
+
+ const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
+ const keys = combined.map(opKey);
+ expect(new Set(keys).size, `duplicate {type,property} key in combined patch: ${keys}`).toBe(
+ keys.length,
+ );
+ });
+
+ it("combined patch carries BOTH markers so a soft-reload re-hydrates size and offset together", () => {
+ const e = div();
+ applyStudioBoxSize(e, { width: 300, height: 200 });
+ applyStudioPathOffset(e, { x: 10, y: 20 });
+
+ const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
+ const has = (property: string) =>
+ combined.some((op) => op.type === "attribute" && op.property === property);
+ expect(has(STUDIO_BOX_SIZE_ATTR)).toBe(true);
+ expect(has(STUDIO_PATH_OFFSET_ATTR)).toBe(true);
+ });
+
+ it("order is size-first: every box-size op precedes every path-offset op", () => {
+ const e = div();
+ applyStudioBoxSize(e, { width: 300, height: 200 });
+ applyStudioPathOffset(e, { x: 10, y: 20 });
+
+ const boxKeys = new Set(buildBoxSizePatches(e).map(opKey));
+ const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
+ const lastBoxIdx = combined.reduce((acc, op, i) => (boxKeys.has(opKey(op)) ? i : acc), -1);
+ const firstOffsetIdx = combined.findIndex(
+ (op) => op.type === "attribute" && op.property === STUDIO_PATH_OFFSET_ATTR,
+ );
+ expect(firstOffsetIdx).toBeGreaterThan(lastBoxIdx);
+ });
+});
+
/* ── Rotation ────────────────────────────────────────────────────────────── */
describe("buildRotationPatches / buildClearRotationPatches", () => {
diff --git a/packages/studio/src/components/editor/offCanvasIndicatorRefresh.test.tsx b/packages/studio/src/components/editor/offCanvasIndicatorRefresh.test.tsx
index 3948989539..3d2321e748 100644
--- a/packages/studio/src/components/editor/offCanvasIndicatorRefresh.test.tsx
+++ b/packages/studio/src/components/editor/offCanvasIndicatorRefresh.test.tsx
@@ -2,11 +2,35 @@
import React, { act } from "react";
import { createRoot, type Root } from "react-dom/client";
-import { describe, expect, it } from "vitest";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
import { DomEditOverlay } from "./DomEditOverlay";
Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+// happy-dom (20.x) holds each MutationObserver's delivery callback ONLY via a
+// WeakRef (MutationObserverListener: `callback: new WeakRef(...)` — the arrow
+// has no strong referent). If V8 runs a GC between observe() and a mutation,
+// deref() returns undefined and mutation delivery silently stops — the
+// indicator-refresh loop never sees its dirty flag and these tests flake under
+// full-suite memory pressure (passing in isolation). Pin WeakRef to a strong
+// ref for this file so the real observer path stays deterministic.
+const RealWeakRef = globalThis.WeakRef;
+class StrongRef {
+ #value: T;
+ constructor(value: T) {
+ this.#value = value;
+ }
+ deref(): T {
+ return this.#value;
+ }
+}
+beforeAll(() => {
+ (globalThis as { WeakRef: unknown }).WeakRef = StrongRef;
+});
+afterAll(() => {
+ globalThis.WeakRef = RealWeakRef;
+});
+
const INDICATOR = '[aria-label="Select off-canvas element index.html:headline:0"]';
function domRect(left: number, top: number, width: number, height: number): DOMRect {
diff --git a/packages/studio/src/components/editor/snapEngine.test.ts b/packages/studio/src/components/editor/snapEngine.test.ts
index 1826aeab33..1d74b09e4b 100644
--- a/packages/studio/src/components/editor/snapEngine.test.ts
+++ b/packages/studio/src/components/editor/snapEngine.test.ts
@@ -5,8 +5,8 @@ import {
buildCompositionSnapTarget,
buildGridSnapEdges,
resolveSnapAdjustment,
- resolveResizeSnapAdjustment,
resolveEquidistanceGuides,
+ resolveGuideLineRect,
SNAP_THRESHOLD_PX,
type SnapTarget,
} from "./snapEngine";
@@ -385,88 +385,22 @@ describe("resolveSnapAdjustment", () => {
});
// ---------------------------------------------------------------------------
-// resolveResizeSnapAdjustment
+// resolveGuideLineRect
// ---------------------------------------------------------------------------
-describe("resolveResizeSnapAdjustment", () => {
- test("only right edge snaps on X", () => {
- // Moving rect at (100, 100) size 50x50, right=150.
- // Target left at 200. Propose dx=47 => proposed right=197. Dist to 200=3.
- const t = target("a", 200, 100, 100, 100);
- const result = resolveResizeSnapAdjustment({
- movingRect: rect(100, 100, 50, 50),
- proposedDx: 47,
- proposedDy: 0,
- targets: [t],
- threshold: SNAP_THRESHOLD_PX,
- disabled: false,
- });
- expect(result.dx).toBe(50); // right edge snaps to 200
- });
+describe("resolveGuideLineRect", () => {
+ const composition = rect(120, 80, 640, 360); // letterboxed inside the overlay
- test("only bottom edge snaps on Y", () => {
- // Moving rect at (100, 100) size 50x50, bottom=150.
- // Target top at 200. Propose dy=47 => proposed bottom=197. Dist to 200=3.
- const t = target("a", 100, 200, 100, 100);
- const result = resolveResizeSnapAdjustment({
- movingRect: rect(100, 100, 50, 50),
- proposedDx: 0,
- proposedDy: 47,
- targets: [t],
- threshold: SNAP_THRESHOLD_PX,
- disabled: false,
- });
- expect(result.dy).toBe(50); // bottom edge snaps to 200
- });
-
- test("left edge does NOT snap during resize", () => {
- // Target right at 150. Moving rect left=100. If drag were active,
- // left would snap. But during resize, only right edge snaps.
- // Moving rect at (100, 100) size 200x200, right=300.
- // Target right=150. Proposed dx=-153 => proposed right=147. Dist to 150=3.
- // This SHOULD snap right to 150 (dx = -150). But left stays at 100.
- const t = target("a", 50, 100, 100, 100); // right=150
- const result = resolveResizeSnapAdjustment({
- movingRect: rect(100, 100, 200, 200),
- proposedDx: -153,
- proposedDy: 0,
- targets: [t],
- threshold: SNAP_THRESHOLD_PX,
- disabled: false,
- });
- // Right edge: 300 + (-153) = 147 => snaps to 150, adjustment = +3, dx = -150
- expect(result.dx).toBe(-150);
- });
-
- test("disabled=true returns passthrough for resize", () => {
- const t = target("a", 200, 200, 100, 100);
- const result = resolveResizeSnapAdjustment({
- movingRect: rect(100, 100, 50, 50),
- proposedDx: 47,
- proposedDy: 47,
- targets: [t],
- threshold: SNAP_THRESHOLD_PX,
- disabled: true,
- });
- expect(result.dx).toBe(47);
- expect(result.dy).toBe(47);
- expect(result.guides).toHaveLength(0);
+ test("vertical guide (axis x) spans the composition's height at the snap x", () => {
+ expect(resolveGuideLineRect({ axis: "x", position: 440, from: 0, to: 0 }, composition)).toEqual(
+ { left: 440, top: 80, width: 1, height: 360 },
+ );
});
- test("resize produces guide lines", () => {
- const t = target("a", 200, 100, 100, 100);
- const result = resolveResizeSnapAdjustment({
- movingRect: rect(100, 100, 50, 50),
- proposedDx: 47,
- proposedDy: 0,
- targets: [t],
- threshold: SNAP_THRESHOLD_PX,
- disabled: false,
- });
- expect(result.guides.length).toBeGreaterThanOrEqual(1);
- const xGuide = result.guides.find((g) => g.axis === "x");
- expect(xGuide).toBeDefined();
- expect(xGuide!.position).toBe(200);
+ test("horizontal guide (axis y) spans the composition's width at the snap y", () => {
+ expect(resolveGuideLineRect({ axis: "y", position: 260, from: 0, to: 0 }, composition)).toEqual(
+ { left: 120, top: 260, width: 640, height: 1 },
+ );
});
});
diff --git a/packages/studio/src/components/editor/snapEngine.ts b/packages/studio/src/components/editor/snapEngine.ts
index 9cb4094975..6a64a22a29 100644
--- a/packages/studio/src/components/editor/snapEngine.ts
+++ b/packages/studio/src/components/editor/snapEngine.ts
@@ -410,62 +410,22 @@ export function resolveSnapAdjustment(input: {
}
// ---------------------------------------------------------------------------
-// resolveResizeSnapAdjustment — resize variant (only right/bottom snap)
+// resolveGuideLineRect — screen rect for rendering a snap guide line
// ---------------------------------------------------------------------------
-// fallow-ignore-next-line complexity
-export function resolveResizeSnapAdjustment(input: {
- movingRect: Rect;
- proposedDx: number;
- proposedDy: number;
- targets: SnapTarget[];
- gridEdges?: { x: SnapEdge[]; y: SnapEdge[] };
- threshold: number;
- disabled: boolean;
-}): SnapResult {
- if (input.disabled || input.threshold <= 0) {
- return DISABLED_RESULT(input.proposedDx, input.proposedDy);
+/**
+ * Full-length guide line spanning the composition: a vertical line (axis "x")
+ * runs the composition's height at the snapped x position; a horizontal line
+ * (axis "y") runs the composition's width. `composition` is the composition
+ * rect in overlay space — guide positions are already overlay-space, so the
+ * line must be offset by the composition's left/top (the canvas is usually
+ * letterboxed inside the overlay).
+ */
+export function resolveGuideLineRect(guide: SnapGuide, composition: Rect): Rect {
+ if (guide.axis === "x") {
+ return { left: guide.position, top: composition.top, width: 1, height: composition.height };
}
-
- const mr = input.movingRect;
- const proposedRight = rectRight(mr) + input.proposedDx;
- const proposedBottom = rectBottom(mr) + input.proposedDy;
-
- const xCandidates = collectCandidates(
- [proposedRight],
- input.targets,
- (t) => [t.left, t.centerX, t.right],
- input.gridEdges?.x,
- input.threshold,
- );
- const yCandidates = collectCandidates(
- [proposedBottom],
- input.targets,
- (t) => [t.top, t.centerY, t.bottom],
- input.gridEdges?.y,
- input.threshold,
- );
-
- const bestX = pickBest(xCandidates);
- const bestY = pickBest(yCandidates);
- const adjustedDx = input.proposedDx + (bestX?.adjustment ?? 0);
- const adjustedDy = input.proposedDy + (bestY?.adjustment ?? 0);
-
- const adjustedRect: Rect = {
- left: mr.left,
- top: mr.top,
- width: mr.width + adjustedDx,
- height: mr.height + adjustedDy,
- };
-
- const targetMap = new Map(input.targets.map((t) => [t.id, t]));
-
- return {
- dx: adjustedDx,
- dy: adjustedDy,
- guides: buildGuidesFromMatches(bestX, bestY, adjustedRect, targetMap),
- spacingGuides: [], // computed separately via resolveEquidistanceGuides
- };
+ return { left: composition.left, top: guide.position, width: composition.width, height: 1 };
}
// ---------------------------------------------------------------------------
diff --git a/packages/studio/src/components/editor/useDomEditOverlayGestures.ts b/packages/studio/src/components/editor/useDomEditOverlayGestures.ts
index 3bd0909ab5..ec18a9f4db 100644
--- a/packages/studio/src/components/editor/useDomEditOverlayGestures.ts
+++ b/packages/studio/src/components/editor/useDomEditOverlayGestures.ts
@@ -4,7 +4,6 @@
* Owns: onPointerMove, onPointerUp, clearPointerState.
* startGesture and startGroupDrag live in domEditOverlayStartGesture.ts.
*/
-import { setElementGsapPosition } from "../../utils/elementGsap";
import type { RefObject } from "react";
import { type DomEditSelection } from "./domEditing";
import {
@@ -30,36 +29,42 @@ import {
import {
type GroupOverlayItem,
type OverlayRect,
+ cornerEdgeLength,
+ elementCornerOverlayPoints,
+ orientedOverlayRect,
+ overlayCornersCentroid,
resolveDomEditGroupOverlayRect,
- toOverlayRect,
} from "./domEditOverlayGeometry";
import {
BLOCKED_MOVE_THRESHOLD_PX,
type GestureKind,
type GestureState,
type GroupGestureState,
+ type ResizeHandle,
type UseDomEditOverlayGesturesOptions,
+ ROTATED_SNAP_BYPASS_DEGREES,
hasDomEditRotationChanged,
- resolveDomEditResizeGesture,
resolveDomEditRotationGesture,
- type ResizeHandle,
+ resolveResizeCenterAnchorOffset,
} from "./domEditOverlayGestures";
+import { resolveCenterResizeSize } from "./domEditResizeLocal";
import {
startGesture as _startGesture,
startGroupDrag as _startGroupDrag,
} from "./domEditOverlayStartGesture";
import { hugRectForElement } from "./domEditOverlayCrop";
-import {
- resolveSnapAdjustment,
- resolveResizeSnapAdjustment,
- resolveEquidistanceGuides,
- SNAP_THRESHOLD_PX,
-} from "./snapEngine";
-/** Undo the resize draft's anchor pin: snap GSAP x/y back to the gesture base. */
-function restoreResizeAnchorPin(element: HTMLElement, g: GestureState): void {
- const anchor = g.resizeAnchor;
- if (!anchor || (anchor.pinX === 0 && anchor.pinY === 0)) return;
- setElementGsapPosition(element, anchor.baseGsapX, anchor.baseGsapY);
+import { resolveSnapAdjustment, resolveEquidistanceGuides, SNAP_THRESHOLD_PX } from "./snapEngine";
+
+/** Per-frame anchored-resize center accumulator: ADD the residual center correction
+ * (fixedStart − fixedNow) onto the previous anchor so the pin CONVERGES instead of
+ * oscillating (fa4f39168). Pure; exported for the release-shift characterization tests. */
+export function computeNextResizeAnchor(
+ prev: { dx: number; dy: number } | undefined,
+ fixedStart: { x: number; y: number },
+ fixedNow: { x: number; y: number },
+): { dx: number; dy: number } {
+ const base = prev ?? { dx: 0, dy: 0 };
+ return { dx: base.dx + (fixedStart.x - fixedNow.x), dy: base.dy + (fixedStart.y - fixedNow.y) };
}
export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
@@ -74,6 +79,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
height: g.originHeight,
editScaleX: g.editScaleX,
editScaleY: g.editScaleY,
+ // Every draft rect must carry the element's rotation: the rotation wrapper
+ // renders rotate(overlayRect.angle), so an omitted angle straightens the
+ // chrome for the duration of the draft (the "straightens while moving" bug).
+ angle: g.actualRotation,
});
};
const setDraftGroupOverlayItems = (next: GroupOverlayItem[]) => {
@@ -188,8 +197,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
actualAngle: g.actualRotation,
snap: e.shiftKey,
});
- const draftViaGsap = applyRotationDraftViaGsap(sel.element, rotated.angle);
- if (!draftViaGsap) {
+ if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
applyStudioRotationDraft(sel.element, rotated);
}
return;
@@ -197,7 +205,11 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
if (g.kind === "drag") {
const sc = g.snapContext;
- if (sc?.snapEnabled && sc.targets.length > 0) {
+ // Bypass edge-snapping for rotated elements — the snap targets and the
+ // snapped rect are axis-aligned, so snapping a rotated box's AABB shifts it
+ // unpredictably. Rotation ~0 keeps snapping exactly as before.
+ const dragRotated = Math.abs(g.actualRotation) >= ROTATED_SNAP_BYPASS_DEGREES;
+ if (!dragRotated && sc?.snapEnabled && sc.targets.length > 0) {
// Snap the element's VISIBLE (crop-hugged) edges, not the full bounds.
const movingRect = hugRectForElement(
{
@@ -251,6 +263,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
height: g.originHeight,
editScaleX: g.editScaleX,
editScaleY: g.editScaleY,
+ angle: g.actualRotation,
});
if (box) {
box.style.left = `${nextBoxLeft}px`;
@@ -260,90 +273,100 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
} else {
if (!box) return;
- const sc = g.snapContext;
- if (sc?.snapEnabled && sc.targets.length > 0) {
- const movingRect = {
+ // CENTER-ANCHORED size (CapCut model): the element scales proportionally
+ // about its CENTER — the scale is the pointer's RADIAL distance from the
+ // element center now over its distance at gesture start. Rotation-invariant
+ // (a distance ignores the angle) and continuous, so all four corners behave
+ // identically and there is no per-axis projection or edge-snapping. Base size
+ // is the element-local px size at gesture start (actualWidth/Height,
+ // GSAP-scale-aware). Corner drag is ALWAYS proportional; there is no
+ // free-form stretch gesture. Edge-snapping is intentionally NOT applied:
+ // with center anchoring both edges move symmetrically, so the corner-anchored
+ // snap math no longer holds — CapCut does not edge-snap during scale either.
+ const nextSize = resolveCenterResizeSize({
+ baseWidth: g.actualWidth,
+ baseHeight: g.actualHeight,
+ pointer: { x: e.clientX, y: e.clientY },
+ pointerStart: { x: g.startX, y: g.startY },
+ centerStart: { x: g.centerX, y: g.centerY },
+ });
+ applyStudioBoxSizeDraft(sel.element, nextSize);
+
+ const overlayEl = opts.overlayRef.current;
+ const iframe = opts.iframeRef.current;
+ const measureOrientedRect = () =>
+ overlayEl && iframe ? orientedOverlayRect(overlayEl, iframe, sel.element) : null;
+
+ // Keep the element's CENTER visually planted by translating it through the
+ // manual-offset channel (member created at gesture start, on every corner): pin
+ // the center by measuring the centroid of its real transformed corners after
+ // the size write and translating it back to its gesture-start center —
+ // rotation-safe for any transform-origin. Memberless is a defensive fallback.
+ let draftRect: OverlayRect;
+ if (g.pathOffsetMember) {
+ // Measure real corners ONCE — reused below, skipping a redundant measureOrientedRect call.
+ const corners =
+ overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, sel.element) : null;
+ const fixedStart = g.resizeFixedCenterStart;
+ let anchor: { dx: number; dy: number };
+ if (corners && fixedStart) {
+ // `centerNow` is measured on the LIVE element, which already carries the
+ // offset applied on the PREVIOUS frame. `applyManualOffsetDragDraft`
+ // treats its argument as the ABSOLUTE offset (from initialOffset 0), so
+ // `fixedStart - centerNow` is only the RESIDUAL correction — it must be
+ // ADDED to the offset already in flight, not used as the absolute value.
+ // Using it absolutely makes the anchor oscillate between the correct
+ // value and zero every frame (measure moves the center back to
+ // fixedStart → residual 0 → offset dropped → center un-pins → repeat).
+ // Release then commits whichever parity the last pointermove landed on,
+ // so the element "shifts a bit" after release. Accumulate onto the
+ // previous anchor to converge (fa4f39168).
+ const centerNow = overlayCornersCentroid(corners);
+ anchor = computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, centerNow);
+ } else {
+ // Geometry unmeasurable — fall back to the AABB half-delta.
+ const fallbackRect = measureOrientedRect();
+ anchor = resolveResizeCenterAnchorOffset({
+ originWidth: g.originWidth,
+ originHeight: g.originHeight,
+ overlayWidth: fallbackRect ? fallbackRect.width : g.originWidth,
+ overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight,
+ });
+ }
+ g.lastResizeAnchor = anchor;
+ applyManualOffsetDragDraft(g.pathOffsetMember, anchor.dx, anchor.dy);
+ // Re-measure the oriented box AFTER the anchor translate so it hugs the
+ // element's true rendered bounds every frame.
+ const anchoredRect = measureOrientedRect();
+ draftRect = anchoredRect ?? {
+ left: g.originLeft + anchor.dx,
+ top: g.originTop + anchor.dy,
+ width: corners ? cornerEdgeLength(corners.nw, corners.ne) : g.originWidth,
+ height: corners ? cornerEdgeLength(corners.nw, corners.sw) : g.originHeight,
+ editScaleX: g.editScaleX,
+ editScaleY: g.editScaleY,
+ angle: g.actualRotation,
+ };
+ } else {
+ // Re-measure the element's oriented box AFTER the size write. The size draft
+ // rounds/clamps and (with a centered transform-origin + GSAP scale) the real
+ // rendered size diverges from the CSS size, so measure rather than trust math.
+ const sizedRect = measureOrientedRect();
+ draftRect = sizedRect ?? {
left: g.originLeft,
top: g.originTop,
width: g.originWidth,
height: g.originHeight,
+ editScaleX: g.editScaleX,
+ editScaleY: g.editScaleY,
+ angle: g.actualRotation,
};
- const allTargets = sc.compositionTarget
- ? [...sc.targets, sc.compositionTarget]
- : sc.targets;
- const snap = resolveResizeSnapAdjustment({
- movingRect,
- proposedDx: dx,
- proposedDy: dy,
- targets: allTargets,
- gridEdges: sc.gridEdges ?? undefined,
- threshold: SNAP_THRESHOLD_PX,
- disabled: e.altKey,
- });
- dx = snap.dx;
- dy = snap.dy;
- opts.snapGuidesRef.current = { guides: snap.guides, spacingGuides: [] };
}
-
- const nextSize = resolveDomEditResizeGesture({
- originWidth: g.originWidth,
- originHeight: g.originHeight,
- actualWidth: g.actualWidth,
- actualHeight: g.actualHeight,
- scaleX: g.editScaleX,
- scaleY: g.editScaleY,
- contentScaleX: g.contentScaleX,
- contentScaleY: g.contentScaleY,
- dx,
- dy,
- uniform: e.shiftKey,
- });
- applyStudioBoxSizeDraft(sel.element, nextSize);
- // Pin the gesture anchor (top-left): with a live scale transform, the CSS
- // size change shifts the rendered box around the element center. Measure
- // the drift of the gesture-start corner and counter it via GSAP x/y —
- // accumulated onto the previous pin so the correction converges instead
- // of oscillating. The release-time position compensation re-measures the
- // drop, so the pin composes with the commit.
- const anchor = g.resizeAnchor;
- if (anchor) {
- const pinned = sel.element.getBoundingClientRect();
- const nextPinX = anchor.pinX + (anchor.anchorX - pinned.x);
- const nextPinY = anchor.pinY + (anchor.anchorY - pinned.y);
- if (
- setElementGsapPosition(
- sel.element,
- anchor.baseGsapX + nextPinX,
- anchor.baseGsapY + nextPinY,
- )
- ) {
- anchor.pinX = nextPinX;
- anchor.pinY = nextPinY;
- }
- }
- // Re-read BCR after applying dimensions. For elements with a GSAP
- // scale transform and centered transform-origin the visual top-left
- // drifts and the visual size diverges from the raw CSS size, so BCR
- // is the only accurate source for both.
- const overlayEl = opts.overlayRef.current;
- const iframe = opts.iframeRef.current;
- const refreshed = overlayEl && iframe ? toOverlayRect(overlayEl, iframe, sel.element) : null;
- const overlayLeft = refreshed ? refreshed.left : g.originLeft;
- const overlayTop = refreshed ? refreshed.top : g.originTop;
- const overlayWidth = refreshed ? refreshed.width : nextSize.overlayWidth;
- const overlayHeight = refreshed ? refreshed.height : nextSize.overlayHeight;
- box.style.left = `${overlayLeft}px`;
- box.style.top = `${overlayTop}px`;
- box.style.width = `${overlayWidth}px`;
- box.style.height = `${overlayHeight}px`;
- setDraftOverlayRect({
- left: overlayLeft,
- top: overlayTop,
- width: overlayWidth,
- height: overlayHeight,
- editScaleX: g.editScaleX,
- editScaleY: g.editScaleY,
- });
+ box.style.left = `${draftRect.left}px`;
+ box.style.top = `${draftRect.top}px`;
+ box.style.width = `${draftRect.width}px`;
+ box.style.height = `${draftRect.height}px`;
+ setDraftOverlayRect(draftRect);
}
};
@@ -419,9 +442,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
}
if (g.kind === "resize" && movedDistance < BLOCKED_MOVE_THRESHOLD_PX) {
- restoreResizeAnchorPin(sel.element, g);
restoreStudioBoxSize(sel.element, g.initialBoxSize);
- endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+ if (g.pathOffsetMember) {
+ restoreManualOffsetDragMembers([g.pathOffsetMember]);
+ } else {
+ endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+ }
if (box) {
box.style.width = `${g.originWidth}px`;
box.style.height = `${g.originHeight}px`;
@@ -449,8 +475,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
restoreStudioRotation(sel.element, g.initialRotation);
}
};
- const rotationChanged = hasDomEditRotationChanged(g.actualRotation, finalRotation.angle);
- if (!rotationChanged) {
+ if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
restoreRotation();
endStudioManualEditGesture(sel.element, g.manualEditDragToken);
return;
@@ -461,17 +486,14 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
applyStudioRotation(sel.element, finalRotation);
}
void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation))
- .catch((error) => {
- console.error("rotate commit failed", error);
+ .catch(() => {
if (
g.manualEditDragToken &&
isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
)
restoreRotation();
})
- .finally(() => {
- endStudioManualEditGesture(sel.element, g.manualEditDragToken);
- });
+ .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
} else if (g.kind === "drag") {
const dx = g.lastSnappedDx ?? e.clientX - g.startX;
const dy = g.lastSnappedDy ?? e.clientY - g.startY;
@@ -488,6 +510,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
height: g.originHeight,
editScaleX: g.editScaleX,
editScaleY: g.editScaleY,
+ angle: g.actualRotation,
});
if (box) {
box.style.left = `${nextBoxLeft}px`;
@@ -510,18 +533,34 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
opts.suppressNextBoxClickRef.current = true;
const finalSize = readStudioBoxSize(sel.element);
applyStudioBoxSize(sel.element, finalSize);
- void Promise.resolve(opts.onBoxSizeCommitRef.current(sel, finalSize))
- .catch((error) => {
- console.error("resize commit failed", error);
+ // Anchored corner resize (NW/NE/SW) also moved the element to keep the
+ // center planted. Land the size AND the anchor offset in a SINGLE
+ // box-size commit (one persist, one undo entry). The prior two-commit
+ // sequence re-stamped the element from source after the size-only persist
+ // but before the offset persist landed — that one frame (new size, old
+ // offset) was the release "jump". SE has no anchor member → size only.
+ const member = g.pathOffsetMember;
+ const anchor = g.lastResizeAnchor;
+ const finalOffset =
+ member && anchor && (anchor.dx !== 0 || anchor.dy !== 0)
+ ? applyManualOffsetDragCommit(member, anchor.dx, anchor.dy)
+ : null;
+ void Promise.resolve(
+ opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined),
+ )
+ .catch(() => {
if (
g.manualEditDragToken &&
isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
) {
- restoreResizeAnchorPin(sel.element, g);
restoreStudioBoxSize(sel.element, g.initialBoxSize);
+ if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
}
})
- .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+ .finally(() => {
+ if (member) endManualOffsetDragMembers([member]);
+ else endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+ });
}
};
@@ -539,9 +578,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
restoreGestureOverlayRect(g);
}
if (g?.mode === "box-size" && sel) {
- restoreResizeAnchorPin(sel.element, g);
restoreStudioBoxSize(sel.element, g.initialBoxSize);
- endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+ if (g.pathOffsetMember) {
+ restoreManualOffsetDragMembers([g.pathOffsetMember]);
+ } else {
+ endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+ }
restoreGestureOverlayRect(g);
}
if (g?.mode === "rotation" && sel) {
diff --git a/packages/studio/src/components/editor/useDomEditOverlayRects.ts b/packages/studio/src/components/editor/useDomEditOverlayRects.ts
index 70d35db452..e602eeb573 100644
--- a/packages/studio/src/components/editor/useDomEditOverlayRects.ts
+++ b/packages/studio/src/components/editor/useDomEditOverlayRects.ts
@@ -13,6 +13,7 @@ import {
groupOverlayItemsEqual,
isElementVisibleForOverlay,
groupAwareOverlayRect,
+ orientedOverlayRect,
rectsEqual,
resolveElementForOverlay,
selectionCacheKey,
@@ -157,7 +158,15 @@ export function useDomEditOverlayRects({
// backgroundless full-bleed scene above a subcomposition), which would wrongly
// hide the selection box. Occlusion stays for hover, where a false hide is cheap.
if (el && isElementVisibleForOverlay(el)) {
- const nextRect = groupAwareOverlayRect(overlayEl, iframe, el);
+ // Groups render as an AABB union of their members (a group OBB is out of
+ // scope); a single element renders as an oriented box that co-rotates
+ // with its transform. orientedOverlayRect gates on rotation internally
+ // (a cheap per-call check) and only pays for the full corner-transform
+ // measurement when the element is actually rotated — this RAF loop runs
+ // every frame for any single selection, so that gate matters here most.
+ const nextRect = el.hasAttribute("data-hf-group")
+ ? groupAwareOverlayRect(overlayEl, iframe, el)
+ : orientedOverlayRect(overlayEl, iframe, el);
setOverlayRect(nextRect);
const descendants = el.querySelectorAll("*");
if (descendants.length > 0 && descendants.length <= 60) {
diff --git a/packages/studio/src/components/nle/NLELayout.test.ts b/packages/studio/src/components/nle/NLELayout.test.ts
deleted file mode 100644
index c0aa410bbb..0000000000
--- a/packages/studio/src/components/nle/NLELayout.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { shouldDisableTimelineWhileCompositionLoading } from "./NLELayout";
-
-describe("timeline loading disable state", () => {
- it("disables the timeline while the composition loading overlay is visible", () => {
- expect(shouldDisableTimelineWhileCompositionLoading(true)).toBe(true);
- });
-
- it("reenables the timeline after composition loading finishes", () => {
- expect(shouldDisableTimelineWhileCompositionLoading(false)).toBe(false);
- });
-});
diff --git a/packages/studio/src/components/nle/NLELayout.tsx b/packages/studio/src/components/nle/NLELayout.tsx
deleted file mode 100644
index e91d861a43..0000000000
--- a/packages/studio/src/components/nle/NLELayout.tsx
+++ /dev/null
@@ -1,591 +0,0 @@
-import {
- useState,
- useCallback,
- useRef,
- useEffect,
- useSyncExternalStore,
- memo,
- type ReactNode,
-} from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
-import { useTimelinePlayer, PlayerControls, Timeline, usePlayerStore } from "../../player";
-import type { TimelineElement } from "../../player";
-import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
-import { NLEPreview } from "./NLEPreview";
-import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
-import { TimelineResizeDivider, MIN_TIMELINE_H, MIN_PREVIEW_H } from "./TimelineResizeDivider";
-import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
-import { useCompositionStack } from "./useCompositionStack";
-import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
-import { setCompositionSourceMap } from "../editor/domEditingDom";
-import { trackStudioExpandedClipEdit } from "../../telemetry/events";
-import {
- TIMELINE_TOGGLE_SHORTCUT_LABEL,
- getTimelineToggleTitle,
-} from "../../utils/timelineDiscovery";
-import { ensureMotionPathPluginLoaded } from "../../utils/gsapSoftReload";
-import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
-
-interface NLELayoutProps {
- projectId: string;
- portrait?: boolean;
- /** Slot for overlays rendered on top of the preview (cursors, highlights, etc.) */
- previewOverlay?: ReactNode;
- /** Slot rendered above the timeline tracks (toolbar with split, delete, zoom) */
- timelineToolbar?: ReactNode;
- /** Slot rendered below the timeline tracks */
- timelineFooter?: ReactNode;
- /** Increment to force the preview to reload (e.g., after file writes) */
- refreshKey?: number;
- /** Navigate to a specific composition path (e.g., "compositions/intro.html") */
- activeCompositionPath?: string | null;
- /** Callback to expose the iframe ref (for element picker, etc.) */
- onIframeRef?: (iframe: HTMLIFrameElement | null) => void;
- /** Callback when the viewed composition changes (drill-down/back) */
- onCompositionChange?: (compositionPath: string | null) => void;
- /** Custom clip content renderer for timeline (thumbnails, waveforms, etc.) */
- renderClipContent?: (
- element: TimelineElement,
- style: { clip: string; label: string },
- ) => ReactNode;
- onFileDrop?: (
- files: File[],
- placement?: Pick,
- ) => Promise | void;
- onDeleteElement?: (element: TimelineElement) => Promise | void;
- onAssetDrop?: (
- assetPath: string,
- placement: Pick,
- ) => Promise | void;
- onBlockDrop?: (
- blockName: string,
- placement: Pick,
- ) => Promise | void;
- onPreviewBlockDrop?: (
- blockName: string,
- position: { left: number; top: number },
- ) => Promise | void;
- onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
- onSelectTimelineElement?: (element: TimelineElement | null) => void;
- /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
- onCompIdToSrcChange?: (map: Map) => void;
- /** Whether the timeline panel is visible (default: true) */
- timelineVisible?: boolean;
- /** Callback to toggle timeline visibility */
- onToggleTimeline?: () => void;
- /** Notifies parent when composition loading state changes */
- onCompositionLoadingChange?: (loading: boolean) => void;
-}
-
-const DEFAULT_TIMELINE_H = 220;
-
-function subscribeFullscreen(cb: () => void) {
- document.addEventListener("fullscreenchange", cb);
- return () => document.removeEventListener("fullscreenchange", cb);
-}
-
-function getFullscreenElement() {
- return document.fullscreenElement;
-}
-
-export function shouldDisableTimelineWhileCompositionLoading(compositionLoading: boolean): boolean {
- return compositionLoading;
-}
-
-// fallow-ignore-next-line complexity
-export const NLELayout = memo(function NLELayout({
- projectId,
- portrait,
- previewOverlay,
- timelineToolbar,
- timelineFooter,
- refreshKey,
- activeCompositionPath,
- onIframeRef,
- onCompositionChange,
- renderClipContent,
- onFileDrop,
- onDeleteElement,
- onAssetDrop,
- onBlockDrop,
- onPreviewBlockDrop,
- onBlockedEditAttempt,
- onSelectTimelineElement,
- onCompIdToSrcChange,
- timelineVisible,
- onToggleTimeline,
- onCompositionLoadingChange: onCompositionLoadingChangeParent,
-}: NLELayoutProps) {
- const {
- iframeRef,
- togglePlay,
- seek,
- onIframeLoad: baseOnIframeLoad,
- refreshPlayer,
- } = useTimelinePlayer();
-
- // Reset timeline state when the project changes. Done in an effect, not during
- // render: reset() updates the player store, and updating another store/component
- // mid-render triggers React's "Cannot update a component while rendering a
- // different component" warning. The effect runs right after commit, so the new
- // project's first frame may briefly show prior timeline state before it clears.
- useEffect(() => {
- usePlayerStore.getState().reset();
- }, [projectId]);
-
- const stageRefForDrop = useRef(null);
- const handleStageRef = useCallback((ref: React.RefObject) => {
- stageRefForDrop.current = ref.current;
- }, []);
-
- // Authored composition size measured from the loaded preview — drives drop
- // coordinate mapping so blocks land where the user pointed on any comp size.
- const [previewCompositionSize, setPreviewCompositionSize] = useState<{
- width: number;
- height: number;
- } | null>(null);
-
- const {
- isDragOver: previewDragOver,
- handleDragEnter: handlePreviewDragEnter,
- handleDragOver: handlePreviewDragOver,
- handleDragLeave: handlePreviewDragLeave,
- handleDrop: handlePreviewDrop,
- } = usePreviewBlockDrop({
- portrait,
- compositionSize: previewCompositionSize,
- stageRef: stageRefForDrop as React.RefObject,
- onBlockDrop: onPreviewBlockDrop,
- });
-
- // Lightweight reload: change iframe src instead of destroying the Player.
- // refreshPlayer() saves the seek position and appends a cache-busting _t
- // param — the Player instance stays alive so the adapter is available for
- // saveSeekPosition() to read the current time before the reload.
- const prevRefreshKeyRef = useRef(refreshKey);
- useEffect(() => {
- if (refreshKey === prevRefreshKeyRef.current) return;
- prevRefreshKeyRef.current = refreshKey;
- refreshPlayer();
- }, [refreshKey, refreshPlayer]);
-
- const onIframeLoad = useCallback(() => {
- baseOnIframeLoad();
- // Pre-load + register MotionPathPlugin once so adding a motion path in the
- // studio doesn't take the async plugin-load flash path on the first soft
- // reload (the comp may not ship the plugin until it actually uses one).
- ensureMotionPathPluginLoaded(iframeRef.current);
- onIframeRef?.(iframeRef.current);
- }, [baseOnIframeLoad, iframeRef, onIframeRef]);
-
- const {
- compositionStack,
- updateCompositionStack,
- handleNavigateComposition,
- handleDrillDown: drillDown,
- masterSeekRef,
- compIdToSrc,
- setCompIdToSrc,
- } = useCompositionStack({
- projectId,
- activeCompositionPath,
- onCompositionChange,
- });
-
- // Wrap handleDrillDown to also scan the iframe DOM for data-composition-src
- const iframeRef_ = iframeRef;
- const handleDrillDown = useCallback(
- (element: TimelineElement) => {
- if (!element.compositionSrc) return;
- usePlayerStore.getState().setSelectedElementId(null);
- // Check compIdToSrc map first; then scan iframe DOM; then fall through to drillDown
- const compId = element.id;
- let resolvedPath = compIdToSrc.get(compId);
- if (!resolvedPath) {
- try {
- const doc = iframeRef_.current?.contentDocument;
- if (doc) {
- const host = doc.querySelector(
- `[data-composition-id="${CSS.escape(compId)}"][data-composition-src]`,
- );
- if (host) {
- resolvedPath = host.getAttribute("data-composition-src") || undefined;
- }
- }
- } catch {
- /* cross-origin */
- }
- }
- // Delegate with the resolved compositionSrc (may be same as original)
- drillDown({
- id: compId,
- compositionSrc: resolvedPath ?? element.compositionSrc,
- });
- },
- [compIdToSrc, drillDown, iframeRef_],
- );
-
- // Move/resize/split come from the timeline edit context, not props — the
- // wrappers below intercept expanded clips and must call the *real* handlers.
- // (Delete is a direct prop; it stays that way.)
- const { onMoveElement, onResizeElement, onSplitElement } = useTimelineEditContext();
-
- // An expanded sub-comp child reaches the normal edit handlers in its own
- // local coordinates: addressed by its real DOM id, with timeline time rebased
- // onto the sub-comp it lives in. The handlers then save + reloadPreview exactly
- // as they do for top-level clips — no separate live-DOM path.
- const toLocalElement = useCallback(
- (element: TimelineElement, basis: number): TimelineElement => ({
- ...element,
- id: element.domId ?? element.id,
- start: element.start - basis,
- }),
- [],
- );
-
- const handleMoveElement = useCallback(
- (element: TimelineElement, updates: Pick) => {
- const basis = element.expandedParentStart;
- if (basis === undefined) return onMoveElement?.(element, updates);
- trackStudioExpandedClipEdit({ action: "move" });
- onMoveElement?.(toLocalElement(element, basis), {
- ...updates,
- start: Math.max(0, updates.start - basis),
- });
- },
- [onMoveElement, toLocalElement],
- );
-
- const handleResizeElement = useCallback(
- (
- element: TimelineElement,
- updates: Pick,
- ) => {
- const basis = element.expandedParentStart;
- if (basis === undefined) return onResizeElement?.(element, updates);
- trackStudioExpandedClipEdit({ action: "resize" });
- onResizeElement?.(toLocalElement(element, basis), {
- ...updates,
- start: Math.max(0, updates.start - basis),
- });
- },
- [onResizeElement, toLocalElement],
- );
-
- const handleDeleteElement = useCallback(
- (element: TimelineElement) => {
- const basis = element.expandedParentStart;
- if (basis === undefined) return onDeleteElement?.(element);
- trackStudioExpandedClipEdit({ action: "delete" });
- return onDeleteElement?.(toLocalElement(element, basis));
- },
- [onDeleteElement, toLocalElement],
- );
-
- const handleSplitElement = useCallback(
- (element: TimelineElement, splitTime: number) => {
- const basis = element.expandedParentStart;
- if (basis === undefined) return onSplitElement?.(element, splitTime);
- trackStudioExpandedClipEdit({ action: "split" });
- return onSplitElement?.(toLocalElement(element, basis), Math.max(0, splitTime - basis));
- },
- [onSplitElement, toLocalElement],
- );
-
- // Composition ID → file path map from raw index.html
- const compIdToSrcRef = useRef(compIdToSrc);
- compIdToSrcRef.current = compIdToSrc;
-
- useMountEffect(() => {
- fetch(`/api/projects/${projectId}/files/index.html`)
- .then((r) => {
- if (!r.ok) throw new Error(`HTTP ${r.status}`);
- return r.json();
- })
- .then((data: { content?: string }) => {
- const html = data.content || "";
- const map = new Map();
- const re =
- /data-composition-id=["']([^"']+)["'][^>]*data-composition-src=["']([^"']+)["']|data-composition-src=["']([^"']+)["'][^>]*data-composition-id=["']([^"']+)["']/g;
- let match;
- while ((match = re.exec(html)) !== null) {
- const id = match[1] || match[4];
- const src = match[2] || match[3];
- if (id && src) map.set(id, src);
- }
- setCompIdToSrc(map);
- // Let DOM source-resolution recover a subcomposition element's source file
- // (the runtime drops the linkage when inlining — see getSourceFileForElement).
- setCompositionSourceMap(map);
- onCompIdToSrcChange?.(map);
- })
- .catch((err: unknown) => {
- // Non-fatal: drill-down still works via the iframe DOM scan; without
- // the map only source-file resolution for sub-comps degrades.
- console.warn("[studio] Couldn't load composition source map from index.html:", err);
- });
- });
-
- // Patch elements with compositionSrc whenever elements or compIdToSrc change.
- // eslint-disable-next-line no-restricted-syntax
- useEffect(() => {
- if (compIdToSrc.size === 0) return;
- const patchElements = (elements: TimelineElement[]): TimelineElement[] | null => {
- const map = compIdToSrcRef.current;
- if (map.size === 0) return null;
- let patched = false;
- const updated = elements.map((el) => {
- if (el.compositionSrc) return el;
- const src = map.get(el.id) ?? map.get(el.id.replace(/-(host|comp|layer)$/, ""));
- if (src) {
- patched = true;
- return { ...el, compositionSrc: src };
- }
- return el;
- });
- return patched ? updated : null;
- };
- const patched = patchElements(usePlayerStore.getState().elements);
- if (patched) usePlayerStore.getState().setElements(patched);
- let patching = false;
- return usePlayerStore.subscribe((state, prev) => {
- if (patching) return;
- if (state.elements === prev.elements || state.elements.length === 0) return;
- if (state.elements.every((el) => el.compositionSrc)) return;
- patching = true;
- const result = patchElements(state.elements);
- if (result) state.setElements(result);
- patching = false;
- });
- }, [compIdToSrc]);
-
- // Resizable timeline height — persisted alongside zoom/pan so the user's
- // workspace layout survives reloads.
- const [timelineH, setTimelineH] = useState(() => {
- const stored = readStudioUiPreferences().timelineHeight;
- return stored !== undefined && stored >= MIN_TIMELINE_H ? stored : DEFAULT_TIMELINE_H;
- });
- const persistTimelineH = useCallback((height: number) => {
- writeStudioUiPreferences({ timelineHeight: Math.round(height) });
- }, []);
- // A height persisted on a tall window can exceed this window's container and
- // collapse the flex-1 preview to 0px — clamp once the container is measurable
- // (the drag/keyboard paths already clamp; the restore path must too).
- useEffect(() => {
- const containerH = containerRef.current?.getBoundingClientRect().height;
- if (!containerH) return;
- const max = containerH - MIN_PREVIEW_H;
- setTimelineH((prev) => (prev > max ? Math.max(MIN_TIMELINE_H, max) : prev));
- }, []);
- const hasLoadedOnceRef = useRef(false);
- const [compositionLoading, setCompositionLoadingRaw] = useState(true);
- const setCompositionLoading = useCallback((loading: boolean) => {
- if (!loading) hasLoadedOnceRef.current = true;
- if (loading && hasLoadedOnceRef.current) return;
- setCompositionLoadingRaw(loading);
- }, []);
- const timelineDisabled = shouldDisableTimelineWhileCompositionLoading(compositionLoading);
-
- useEffect(() => {
- onCompositionLoadingChangeParent?.(compositionLoading);
- }, [compositionLoading, onCompositionLoadingChangeParent]);
-
- const fullscreenElement = useSyncExternalStore(subscribeFullscreen, getFullscreenElement);
- const isTimelineVisible = timelineVisible ?? true;
- const containerRef = useRef(null);
- const isFullscreen = fullscreenElement === containerRef.current && fullscreenElement != null;
-
- const toggleFullscreen = useCallback(() => {
- if (!containerRef.current) return;
- if (document.fullscreenElement) {
- void document.exitFullscreen();
- } else {
- void containerRef.current.requestFullscreen();
- }
- }, []);
-
- const currentLevel = compositionStack[compositionStack.length - 1];
- const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : undefined;
-
- const onIframeRefStable = useRef(onIframeRef);
- onIframeRefStable.current = onIframeRef;
- useEffect(() => {
- onIframeRefStable.current?.(iframeRef.current);
- }, [compositionStack.length, refreshKey, iframeRef]);
-
- // Keyboard: Escape to pop composition level
- const handleKeyDown = useCallback(
- (e: React.KeyboardEvent) => {
- if (e.key === "Escape" && compositionStack.length > 1) {
- updateCompositionStack((prev) => prev.slice(0, -1));
- }
- },
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [compositionStack.length],
- );
-
- // Suppress TS unused-var warning for masterSeekRef (used inside useCompositionStack)
- void masterSeekRef;
-
- return (
-
setContextMenu(null)}
- onCopy={onCopy}
- onDelete={onDelete}
- onRename={onRename}
- />
- )}
-
- );
+ onAddAssetToTimeline?: (path: string) => void;
}
export type UsageFilter = "all" | "used" | "unused";
@@ -200,20 +43,48 @@ export function countUsage(
/**
* Project-relative asset paths referenced by composition elements — the set the
* "in use" badge, used-first sort, and usage filter all key on. Element src is
- * the raw authored value (timelineElementHelpers sets entry.src =
- * getAttribute("src")), so it can be a relative path ("assets/x.png"), a
- * "./"-prefixed path, the served "/api/projects//preview/assets/x.png" form,
- * or carry a ?query — normalize all of them to the bare project path so they
- * match the asset-list entries. Pure — unit-tested.
+ * populated from the core runtime's `resolveNodeAssetUrl` which calls
+ * `new URL(raw, document.baseURI).toString()`, turning authored relative paths
+ * into fully-absolute URLs with percent-encoded characters, e.g.
+ * "assets/my file (1).mp4"
+ * → "http://localhost:3012/api/projects/demo/preview/assets/my%20file%20(1).mp4"
+ *
+ * This function normalizes every src shape to the bare project-relative path so
+ * it matches the asset-list entries:
+ * - Absolute URL → strip origin + /api/projects//preview/ prefix, decode %XX
+ * - Server-relative /api/…preview/… → same strip + decode
+ * - Relative "./"-prefixed or bare → strip leading ./ or /
+ * - ?query / #hash → dropped
+ *
+ * Pure — unit-tested.
*/
export function deriveUsedPaths(elements: Array<{ src?: string }>): Set {
const paths = new Set();
for (const el of elements) {
if (!el.src) continue;
- const s = el.src
+ let s = el.src;
+
+ // Strip absolute origin if present (http://host/path → /path)
+ try {
+ const u = new URL(s);
+ s = u.pathname + (u.search ? u.search : "") + (u.hash ? u.hash : "");
+ } catch {
+ // Not a valid absolute URL — leave as-is (relative path)
+ }
+
+ s = s
.replace(/^\/api\/projects\/[^/]+\/preview\//, "") // strip the dev serve prefix
.replace(/^\.?\//, "") // strip leading ./ or /
.split(/[?#]/)[0]; // drop query / hash
+
+ // Decode percent-encoded characters (spaces, parens, etc.) so the path
+ // matches the plain-text asset-list entries the server returns.
+ try {
+ s = decodeURIComponent(s);
+ } catch {
+ // Malformed encoding — use as-is
+ }
+
if (s) paths.add(s);
}
return paths;
@@ -225,6 +96,7 @@ export const AssetsTab = memo(function AssetsTab({
onImport,
onDelete,
onRename,
+ onAddAssetToTimeline,
}: AssetsTabProps) {
const fileInputRef = useRef(null);
const [dragOver, setDragOver] = useState(false);
@@ -232,17 +104,11 @@ export const AssetsTab = memo(function AssetsTab({
const [activeFilter, setActiveFilter] = useState("all");
const [usageFilter, setUsageFilter] = useState<"all" | "used" | "unused">("all");
const [searchQuery, setSearchQuery] = useState("");
- // Cross-project view: the global media-use cache (~/.media). The view itself
- // (GlobalAssetsView) owns its fetch — AssetsTab only tracks which scope is active.
const [viewMode, setViewMode] = useState<"local" | "global">("local");
const [manifest, setManifest] = useState<
Map
>(new Map());
- // Projects whose media manifest 404'd — most don't have one. Cache the miss so
- // we don't re-fetch (and spam the console) on every re-render; the effect was
- // also keyed on the `assets` array reference, which changes each render, so it
- // re-fired constantly. Key on a stable join + skip known-missing manifests.
const manifest404Ref = useRef>(new Set());
const assetsKey = assets.join("|");
useEffect(() => {
@@ -278,7 +144,6 @@ export const AssetsTab = memo(function AssetsTab({
cancelled = true;
};
}, [projectId, assetsKey]);
-
const handleDrop = useCallback(
(e: React.DragEvent) => {
e.preventDefault();
@@ -287,7 +152,6 @@ export const AssetsTab = memo(function AssetsTab({
},
[onImport],
);
-
const handleCopyPath = useCallback(async (path: string) => {
const copied = await copyTextToClipboard(path);
if (copied) {
@@ -295,22 +159,27 @@ export const AssetsTab = memo(function AssetsTab({
setTimeout(() => setCopiedPath(null), 1500);
}
}, []);
-
const elements = usePlayerStore((s) => s.elements);
const usedPaths = useMemo(() => deriveUsedPaths(elements), [elements]);
-
const mediaAssets = useMemo(() => {
const media = assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a));
const all = filterByUsage(media, usedPaths, usageFilter);
if (!searchQuery) return all;
const q = searchQuery.toLowerCase();
return all.filter((a) => {
- if (basename(a).toLowerCase().includes(q)) return true;
+ if (
+ a
+ .split("/")
+ .pop()
+ ?.replace(/\.[^.]*$/, "")
+ .toLowerCase()
+ .includes(q)
+ )
+ return true;
const rec = manifest.get(a);
return rec?.description?.toLowerCase().includes(q);
});
}, [assets, searchQuery, manifest, usageFilter, usedPaths]);
-
const categorized = useMemo(() => {
const groups: Record = { audio: [], images: [], video: [], fonts: [] };
for (const a of mediaAssets) {
@@ -327,15 +196,11 @@ export const AssetsTab = memo(function AssetsTab({
}
return groups;
}, [mediaAssets, usedPaths]);
-
const counts = useMemo(() => {
const c: Record = { all: mediaAssets.length };
for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
return c;
}, [mediaAssets, categorized]);
-
- // Usage counts over the full media set (independent of the active usage filter,
- // so the chips don't show their own filtered totals).
const usageCounts = useMemo(
() =>
countUsage(
@@ -344,12 +209,10 @@ export const AssetsTab = memo(function AssetsTab({
),
[assets, usedPaths],
);
-
const visibleCategories =
activeFilter === "all"
? FILTER_ORDER.filter((c) => categorized[c].length > 0)
: [activeFilter as MediaCategory].filter((c) => categorized[c].length > 0);
-
return (
{
- if (!allowCanvasMovement || e.shiftKey) return;
- if (selection.capabilities.canApplyManualOffset) {
- gestures.startGesture("drag", e);
- return;
- }
- e.preventDefault();
- e.stopPropagation();
- e.currentTarget.setPointerCapture(e.pointerId);
- blockedMoveRef.current = {
- pointerId: e.pointerId,
- startX: e.clientX,
- startY: e.clientY,
- notified: false,
- };
- }}
- onMouseDown={suppressBoxMouseDown}
- onClick={handleBoxClick}
- >
- {cropOutlineInsetPx && (
-
- )}
- {allowCanvasMovement && selection.capabilities.canApplyManualSize && (
- setContextMenu(null)}
+ onDelete={
+ onDeleteSelection
+ ? (sel) => {
+ setContextMenu(null);
+ onDeleteSelection(sel);
+ }
+ : undefined
+ }
+ onApplyZIndex={
+ onApplyZIndex
+ ? (patches) => {
+ onApplyZIndex(contextMenu.sel, patches);
+ }
+ : undefined
+ }
+ />
+ )}
);
diff --git a/packages/studio/src/components/editor/DomEditRotateHandle.tsx b/packages/studio/src/components/editor/DomEditRotateHandle.tsx
index 846539c50c..40ec8244b0 100644
--- a/packages/studio/src/components/editor/DomEditRotateHandle.tsx
+++ b/packages/studio/src/components/editor/DomEditRotateHandle.tsx
@@ -1,8 +1,12 @@
import type { PointerEvent as ReactPointerEvent } from "react";
import type { OverlayRect } from "./domEditOverlayGeometry";
-/** Rotate grab-handle above the selection. Anchors to the crop outline when
- * the element is cropped so it stays next to what's visible on screen. */
+/** Rotate handle below the selection: an attached circular-arrows icon chip
+ * (no connecting stem). Anchors to the crop outline when the element is
+ * cropped so it stays next to what's visible on screen. Presentation only —
+ * the rotation gesture measures pointer angles from the element CENTER
+ * (resolveDomEditRotationGesture), so the handle position doesn't affect the
+ * math. Sits 12px below the bbox, past the bottom crop handle's hit strip. */
export function DomEditRotateHandle({
overlayRect,
cropOutlineInsetPx,
@@ -15,27 +19,42 @@ export function DomEditRotateHandle({
const inset = cropOutlineInsetPx ?? { top: 0, right: 0, bottom: 0, left: 0 };
const visibleLeft = overlayRect.left + inset.left;
const visibleWidth = Math.max(0, overlayRect.width - inset.left - inset.right);
- const visibleTop = overlayRect.top + inset.top;
+ const visibleBottom = overlayRect.top + overlayRect.height - inset.bottom;
return (
- {
- e.stopPropagation();
- gestures.startGesture("resize", e);
- }}
- />
- )}
-
- {selection.capabilities.canCrop && groupSelections.length <= 1 && (
-
-
-
-
+
+
+
+
);
}
diff --git a/packages/studio/src/components/editor/LayersPanel.test.ts b/packages/studio/src/components/editor/LayersPanel.test.ts
index f34db36f07..4a3b6a239a 100644
--- a/packages/studio/src/components/editor/LayersPanel.test.ts
+++ b/packages/studio/src/components/editor/LayersPanel.test.ts
@@ -1,10 +1,11 @@
// @vitest-environment happy-dom
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
import { Window } from "happy-dom";
import type { DomEditLayerItem } from "./domEditingTypes";
-import { sortLayersByZIndex } from "./LayersPanel";
+import { createRafThrottle, sortLayersByZIndex } from "./LayersPanel";
import { isLayerDraggable } from "./useLayerDrag";
+import { liveTime } from "../../player";
function makeLayer(
overrides: Partial
- {/* Preview + player controls */}
-
- );
-});
diff --git a/packages/studio/src/components/nle/NLEPreview.tsx b/packages/studio/src/components/nle/NLEPreview.tsx
index 6c02dd6e05..8e634f7671 100644
--- a/packages/studio/src/components/nle/NLEPreview.tsx
+++ b/packages/studio/src/components/nle/NLEPreview.tsx
@@ -459,7 +459,7 @@ export const NLEPreview = memo(function NLEPreview({
-
-
- {!isFullscreen && isTimelineVisible ? (
- <>
- {
- const el = iframeRef.current?.parentElement ?? iframeRef.current;
- if (!el) return;
- const rect = el.getBoundingClientRect();
- const inside =
- e.clientX >= rect.left &&
- e.clientX <= rect.right &&
- e.clientY >= rect.top &&
- e.clientY <= rect.bottom;
- if (!inside) onSelectTimelineElement?.(null);
- }}
- onDragEnter={handlePreviewDragEnter}
- onDragOver={handlePreviewDragOver}
- onDragLeave={handlePreviewDragLeave}
- onDrop={handlePreviewDrop}
- >
-
-
-
- {!isFullscreen && previewOverlay}
-
- {!isFullscreen && compositionStack.length > 1 && (
-
-
-
-
- ) : !isFullscreen && onToggleTimeline ? (
- {
- if ((e.target as HTMLElement).closest("[data-clip]")) return;
- if (timelineDisabled) return;
- if (compositionStack.length > 1) {
- updateCompositionStack((prev) => prev.slice(0, -1));
- }
- }}
- >
-
- {timelineFooter && {timelineToolbar}
- {timelineFooter}
}
- {timelineDisabled && (
- event.preventDefault()}
- onDragOver={(event) => event.preventDefault()}
- onDrop={(event) => event.preventDefault()}
- >
-
- Loading composition…
-
-
- )}
-
-
- ) : null}
-
-
-
- Timeline
-
-
-
diff --git a/packages/studio/src/components/nle/TimelinePane.tsx b/packages/studio/src/components/nle/TimelinePane.tsx
index e82a64e691..b97cf7b161 100644
--- a/packages/studio/src/components/nle/TimelinePane.tsx
+++ b/packages/studio/src/components/nle/TimelinePane.tsx
@@ -95,8 +95,14 @@ export function TimelinePane({
const handleMoveElements = useCallback(
(
edits: Array<{ element: TimelineElement; updates: Pick }>,
- ) =>
- onMoveElements?.(
+ coalesceKey?: string,
+ ) => {
+ // Match the sibling handlers: report the telemetry when the batch touches at
+ // least one expanded sub-comp child (the clips being rebased to local coords).
+ if (edits.some(({ element }) => element.expandedParentStart !== undefined)) {
+ trackStudioExpandedClipEdit({ action: "move" });
+ }
+ return onMoveElements?.(
edits.map(({ element, updates }) => {
const basis = element.expandedParentStart;
if (basis === undefined) return { element, updates };
@@ -105,7 +111,9 @@ export function TimelinePane({
updates: { ...updates, start: Math.max(0, updates.start - basis) },
};
}),
- ),
+ coalesceKey,
+ );
+ },
[onMoveElements, toLocalElement],
);
diff --git a/packages/studio/src/components/nle/TimelineResizeDivider.tsx b/packages/studio/src/components/nle/TimelineResizeDivider.tsx
index d3bb1c84ee..fc27d76969 100644
--- a/packages/studio/src/components/nle/TimelineResizeDivider.tsx
+++ b/packages/studio/src/components/nle/TimelineResizeDivider.tsx
@@ -73,6 +73,9 @@ export function TimelineResizeDivider({
);
return (
+ // Horizontal resize divider: 3px visible seam (h-[3px]), 8px pointer-capture
+ // zone via the absolutely-positioned inner hit area so the layout gap stays
+ // at 3px while draggability is preserved over the full 8px band.
| void;
handleTimelineElementsMove: (
edits: Array<{ element: TimelineElement; updates: Pick }>,
+ coalesceKey?: string,
) => Promise | void;
handleTimelineElementResize: (
element: TimelineElement,
diff --git a/packages/studio/src/components/sidebar/AssetCard.tsx b/packages/studio/src/components/sidebar/AssetCard.tsx
new file mode 100644
index 0000000000..e2ef1bf4f6
--- /dev/null
+++ b/packages/studio/src/components/sidebar/AssetCard.tsx
@@ -0,0 +1,316 @@
+/**
+ * AssetCard and FontRow — visual asset tile / row components for the Assets panel.
+ * Extracted from AssetsTab.tsx to keep that file under the 600-line CI gate.
+ */
+import { useState, useEffect, useRef, useCallback } from "react";
+import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
+import { VIDEO_EXT, IMAGE_EXT } from "../../utils/mediaTypes";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import { ContextMenu } from "./AssetContextMenu";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
+import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior";
+import { basename, ext, truncateMiddle, formatDuration } from "./assetHelpers";
+
+/** Drag payload writer shared by the asset tile and the font row: copy effect
+ * plus the timeline-asset MIME and a plain-text path fallback. */
+function writeAssetDragData(e: React.DragEvent, asset: string): void {
+ e.dataTransfer.effectAllowed = "copy";
+ e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
+ e.dataTransfer.setData("text/plain", asset);
+}
+
+/** Open the row/tile context menu at the pointer, shared by asset tile + font row. */
+function openAssetContextMenu(
+ e: React.MouseEvent,
+ setContextMenu: (menu: { x: number; y: number }) => void,
+): void {
+ e.preventDefault();
+ setContextMenu({ x: e.clientX, y: e.clientY });
+}
+
+/**
+ * Lazily probe a video/audio URL for its duration via a hidden HTMLVideoElement
+ * (`preload="metadata"`). The manifest only covers ~/.media assets, so project
+ * assets in assets/ have no manifest entry — this fills the gap.
+ * Returns `undefined` until the probe completes; `null` if it failed.
+ */
+function useProbedDuration(src: string, skip: boolean): number | null | undefined {
+ const [duration, setDuration] = useState(undefined);
+ useEffect(() => {
+ if (skip) return;
+ let cancelled = false;
+
+ function probe(attempt: number) {
+ if (cancelled) return;
+ const vid = document.createElement("video");
+ vid.preload = "metadata";
+ vid.muted = true;
+ vid.onloadedmetadata = () => {
+ const d = Number.isFinite(vid.duration) && vid.duration > 0 ? vid.duration : null;
+ if (!cancelled) setDuration(d);
+ vid.onloadedmetadata = null;
+ vid.onerror = null;
+ vid.src = "";
+ };
+ vid.onerror = () => {
+ vid.onloadedmetadata = null;
+ vid.onerror = null;
+ vid.src = "";
+ if (!cancelled) {
+ if (attempt < 1) setTimeout(() => probe(attempt + 1), 50);
+ else setDuration(null);
+ }
+ };
+ vid.src = src;
+ }
+
+ probe(0);
+ return () => {
+ cancelled = true;
+ };
+ }, [src, skip]);
+ return duration;
+}
+
+export interface AssetCardProps {
+ projectId: string;
+ asset: string;
+ used: boolean;
+ duration?: number;
+ onCopy: (path: string) => void;
+ isCopied: boolean;
+ onDelete?: (path: string) => void;
+ onRename?: (oldPath: string, newPath: string) => void;
+ onAddAssetToTimeline?: (path: string) => void;
+}
+
+/**
+ * Thumbnail card for images and video assets. Renders in a 2-col grid.
+ *
+ * Click behaviour (CapCut-style):
+ * - Already added → selects the clip on the timeline (setSelectedElementId).
+ * - Not yet added → opens the asset preview overlay over the canvas.
+ * Drag behaviour is preserved: a pointer movement exceeding DRAG_THRESHOLD_PX
+ * before pointerup is treated as drag-start, not a click.
+ */
+// fallow-ignore-next-line complexity
+export function AssetCard({
+ projectId,
+ asset,
+ used,
+ duration,
+ onCopy,
+ isCopied,
+ onDelete,
+ onRename,
+ onAddAssetToTimeline,
+}: AssetCardProps) {
+ const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+ const [hovered, setHovered] = useState(false);
+ const fullName = asset.split("/").pop() ?? asset;
+ const name = basename(asset);
+ const extension = ext(asset);
+ const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
+ const isVideo = VIDEO_EXT.test(asset);
+ const isImage = IMAGE_EXT.test(asset);
+ const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
+ const resolvedDuration = duration ?? probedDuration ?? undefined;
+ const durationLabel = formatDuration(resolvedDuration ?? 0);
+
+ // Drag-threshold click gate: track pointer-down position so we can ignore
+ // pointer-up events that followed a real drag gesture.
+ const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
+
+ const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
+ const elements = usePlayerStore((s) => s.elements);
+ const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
+
+ const handlePointerDown = useCallback((e: React.PointerEvent) => {
+ pointerDownRef.current = { x: e.clientX, y: e.clientY };
+ }, []);
+
+ const handlePointerUp = useCallback(
+ (e: React.PointerEvent) => {
+ const origin = pointerDownRef.current;
+ pointerDownRef.current = null;
+ if (!origin) return;
+ if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
+ // Treat as click
+ if (used) {
+ const clip = findClipForAsset(elements, asset);
+ if (clip) {
+ setSelectedElementId(clip.key ?? clip.id);
+ return;
+ }
+ }
+ // Not added (or no matching clip found) → preview overlay
+ setPreviewAsset(asset, projectId);
+ },
+ [used, elements, asset, projectId, setSelectedElementId, setPreviewAsset],
+ );
+
+ return (
+ <>
+ setContextMenu(null)}
+ onCopy={onCopy}
+ onDelete={onDelete}
+ onRename={onRename}
+ onAddAtPlayhead={onAddAssetToTimeline}
+ />
+ )}
+
+ );
+}
+
+export interface FontRowProps {
+ asset: string;
+ used: boolean;
+ onCopy: (path: string) => void;
+ isCopied: boolean;
+ onDelete?: (path: string) => void;
+ onRename?: (oldPath: string, newPath: string) => void;
+ onAddAssetToTimeline?: (path: string) => void;
+}
+
+/**
+ * Compact row for font assets (no meaningful thumbnail; show ext badge + name).
+ */
+export function FontRow({
+ asset,
+ used,
+ onCopy,
+ isCopied,
+ onDelete,
+ onRename,
+ onAddAssetToTimeline,
+}: FontRowProps) {
+ const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+ const name = basename(asset);
+ const extension = ext(asset);
+
+ return (
+ <>
+ setContextMenu(null)}
+ onCopy={onCopy}
+ onDelete={onDelete}
+ onRename={onRename}
+ onAddAtPlayhead={onAddAssetToTimeline}
+ />
+ )}
+
+ );
+}
diff --git a/packages/studio/src/components/sidebar/AssetContextMenu.tsx b/packages/studio/src/components/sidebar/AssetContextMenu.tsx
index b23a74fbd0..d4e2e187c4 100644
--- a/packages/studio/src/components/sidebar/AssetContextMenu.tsx
+++ b/packages/studio/src/components/sidebar/AssetContextMenu.tsx
@@ -80,33 +80,3 @@ export function ContextMenu({
);
}
-
-export function DeleteConfirm({
- name,
- onConfirm,
- onCancel,
-}: {
- name: string;
- onConfirm: () => void;
- onCancel: () => void;
-}) {
- return (
-
-
+ {/* Expanded hit zone: 8px tall, centered on the 3px seam */}
+
+ {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
+
);
}
diff --git a/packages/studio/src/components/nle/useCompositionStack.ts b/packages/studio/src/components/nle/useCompositionStack.ts
index 5f7f7b8dcf..e7e0e2dc7f 100644
--- a/packages/studio/src/components/nle/useCompositionStack.ts
+++ b/packages/studio/src/components/nle/useCompositionStack.ts
@@ -1,4 +1,4 @@
-// Composition drill-down stack management for NLELayout
+// Composition drill-down stack management for NLEContext/EditorShell
import { useState, useCallback, useRef, useEffect } from "react";
import { usePlayerStore } from "../../player";
import type { CompositionLevel } from "./CompositionBreadcrumb";
diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
index 169888b4cf..2f9cc4878f 100644
--- a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
+++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
@@ -19,6 +19,7 @@ export interface TimelineEditCallbackDeps {
) => Promise writeAssetDragData(e, asset)}
+ onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
+ onPointerEnter={() => setHovered(true)}
+ onPointerLeave={() => setHovered(false)}
+ className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors ${
+ isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"
+ }`}
+ >
+ {/* Thumbnail */}
+
+
+ {contextMenu && (
+
+ {isImage && (
+ 
{
+ (e.target as HTMLImageElement).style.display = "none";
+ }}
+ />
+ )}
+ {isVideo && (
+ <>
+
+
+ {/* Filename caption */}
+
+ {truncateMiddle(fullName, 22)}
+
+
+ {extension}
+
+ )}
+
+ {/* "Added" badge — top-left */}
+ {used && (
+
+ Added
+
+ )}
+
+ {/* Duration badge — top-right, media only */}
+ {durationLabel && (
+
+ {durationLabel}
+
+ )}
+ onCopy(asset)}
+ onDragStart={(e) => writeAssetDragData(e, asset)}
+ onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
+ className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors ${
+ isCopied
+ ? "bg-studio-accent/10 border-l-2 border-studio-accent"
+ : "border-l-2 border-transparent hover:bg-neutral-800/50"
+ }`}
+ >
+
+
+ {contextMenu && (
+
+ {extension}
+
+
+
+ {name}
+
+
+
+ {extension}
+ {used && (
+
+ in use
+
+ )}
+
+
- Delete {name}?
-
- );
-}
diff --git a/packages/studio/src/components/sidebar/AssetsTab.test.ts b/packages/studio/src/components/sidebar/AssetsTab.test.ts
index 74b5c916e5..2ed54db44c 100644
--- a/packages/studio/src/components/sidebar/AssetsTab.test.ts
+++ b/packages/studio/src/components/sidebar/AssetsTab.test.ts
@@ -1,5 +1,6 @@
import { describe, expect, it } from "vitest";
import { filterByUsage, countUsage, deriveUsedPaths } from "./AssetsTab";
+import { truncateMiddle, formatDuration } from "./assetHelpers";
import { globalAssetRows } from "./GlobalAssetsView";
const assets = ["bgm.mp3", "logo.png", "orphan.wav"];
@@ -47,6 +48,39 @@ describe("deriveUsedPaths", () => {
"assets/logo.png",
]);
});
+
+ it("handles fully-absolute URLs produced by the core runtime (toAbsoluteAssetUrl)", () => {
+ // The runtime calls new URL(raw, document.baseURI).toString() which produces
+ // "http://localhost:3012/api/projects/demo/preview/assets/clip.mp4"
+ const used = deriveUsedPaths([
+ { src: "http://localhost:3012/api/projects/demo/preview/assets/clip.mp4" },
+ { src: "http://localhost:3012/api/projects/abc123/preview/assets/logo.png" },
+ ]);
+ expect(used.has("assets/clip.mp4")).toBe(true);
+ expect(used.has("assets/logo.png")).toBe(true);
+ expect(used.size).toBe(2);
+ });
+
+ it("decodes percent-encoded filenames (spaces, parens) so they match the asset list", () => {
+ // Files with spaces/parens: "assets/my file (1).mp4" authored in HTML
+ // → runtime resolves to "http://…/assets/my%20file%20(1).mp4"
+ const used = deriveUsedPaths([
+ { src: "http://localhost:3012/api/projects/p/preview/assets/my%20file%20(1).mp4" },
+ { src: "/api/projects/p/preview/assets/track%20one.mp3" },
+ ]);
+ expect(used.has("assets/my file (1).mp4")).toBe(true);
+ expect(used.has("assets/track one.mp3")).toBe(true);
+ expect(used.size).toBe(2);
+ });
+
+ it("round-trips: absolute URL with spaces matches filterByUsage against plain asset list", () => {
+ const used = deriveUsedPaths([
+ { src: "http://localhost:3012/api/projects/demo/preview/assets/my%20video.mp4" },
+ ]);
+ expect(filterByUsage(["assets/my video.mp4", "assets/other.png"], used, "used")).toEqual([
+ "assets/my video.mp4",
+ ]);
+ });
});
describe("countUsage", () => {
@@ -59,6 +93,68 @@ describe("countUsage", () => {
});
});
+describe("truncateMiddle", () => {
+ it("returns the original string when it fits within maxLen", () => {
+ expect(truncateMiddle("short.mp4", 20)).toBe("short.mp4");
+ expect(truncateMiddle("exact_length_str.mp4", 20)).toBe("exact_length_str.mp4");
+ });
+
+ it("truncates longer strings with an ellipsis in the middle", () => {
+ const result = truncateMiddle("2a37eabf-long-uuid-887d8.mp4", 20);
+ expect(result.length).toBeLessThanOrEqual(20);
+ expect(result).toContain("…");
+ // Preserves head
+ expect(result.startsWith("2a37eabf-long-uuid-8")).toBe(false); // head is shortened
+ expect(result.startsWith("2a37eabf")).toBe(true);
+ // Preserves tail
+ expect(result.endsWith("887d8.mp4")).toBe(false); // tail portion only
+ expect(result.endsWith(".mp4")).toBe(true);
+ });
+
+ it("preserves the full filename extension in the tail", () => {
+ const result = truncateMiddle("verylongnamehere12345.mp4", 14);
+ expect(result.endsWith(".mp4")).toBe(true);
+ expect(result.length).toBeLessThanOrEqual(14);
+ });
+
+ it("handles maxLen of 1 (degenerate)", () => {
+ const result = truncateMiddle("abcdef", 1);
+ // head = 0, tail = 0 → just the ellipsis
+ expect(result).toBe("…");
+ });
+
+ it("handles a string of exactly maxLen+1 chars", () => {
+ const result = truncateMiddle("abcdefgh", 7);
+ expect(result.length).toBeLessThanOrEqual(7);
+ expect(result).toContain("…");
+ });
+});
+
+describe("formatDuration", () => {
+ it("formats whole seconds as MM:SS", () => {
+ expect(formatDuration(28)).toBe("00:28");
+ expect(formatDuration(60)).toBe("01:00");
+ expect(formatDuration(90)).toBe("01:30");
+ expect(formatDuration(3661)).toBe("61:01");
+ });
+
+ it("rounds fractional seconds to nearest whole", () => {
+ expect(formatDuration(28.4)).toBe("00:28");
+ expect(formatDuration(28.6)).toBe("00:29");
+ });
+
+ it("returns empty string for non-positive values", () => {
+ expect(formatDuration(0)).toBe("");
+ expect(formatDuration(-1)).toBe("");
+ });
+
+ it("returns empty string for non-finite values", () => {
+ expect(formatDuration(NaN)).toBe("");
+ expect(formatDuration(Infinity)).toBe("");
+ expect(formatDuration(-Infinity)).toBe("");
+ });
+});
+
describe("globalAssetRows", () => {
const recs = [
{ id: "bgm_001", type: "bgm", description: "calm ambient" },
diff --git a/packages/studio/src/components/sidebar/AssetsTab.tsx b/packages/studio/src/components/sidebar/AssetsTab.tsx
index fb99cc3765..e1344c88e6 100644
--- a/packages/studio/src/components/sidebar/AssetsTab.tsx
+++ b/packages/studio/src/components/sidebar/AssetsTab.tsx
@@ -1,21 +1,12 @@
// fallow-ignore-file code-duplication
import { memo, useState, useCallback, useRef, useMemo, useEffect } from "react";
-import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
-import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, FONT_EXT } from "../../utils/mediaTypes";
-import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import { MEDIA_EXT, FONT_EXT } from "../../utils/mediaTypes";
import { copyTextToClipboard } from "../../utils/clipboard";
-import { ContextMenu } from "./AssetContextMenu";
import { usePlayerStore } from "../../player/store/playerStore";
-import {
- type MediaCategory,
- getCategory,
- basename,
- ext,
- CATEGORY_LABELS,
- FILTER_ORDER,
-} from "./assetHelpers";
+import { type MediaCategory, getCategory, CATEGORY_LABELS, FILTER_ORDER } from "./assetHelpers";
import { AudioRow } from "./AudioRow";
import { GlobalAssetsView } from "./GlobalAssetsView";
+import { AssetCard, FontRow } from "./AssetCard";
interface AssetsTabProps {
projectId: string;
@@ -23,155 +14,7 @@ interface AssetsTabProps {
onImport?: (files: FileList) => void;
onDelete?: (path: string) => void;
onRename?: (oldPath: string, newPath: string) => void;
-}
-
-// fallow-ignore-next-line complexity
-function ImageCard({
- projectId,
- asset,
- used,
- onCopy,
- isCopied,
- onDelete,
- onRename,
- size,
-}: {
- projectId: string;
- asset: string;
- used: boolean;
- onCopy: (path: string) => void;
- isCopied: boolean;
- onDelete?: (path: string) => void;
- onRename?: (oldPath: string, newPath: string) => void;
- size: "large" | "small";
-}) {
- const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
- const [hovered, setHovered] = useState(false);
- const name = basename(asset);
- const extension = ext(asset);
- const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
- const isVideo = VIDEO_EXT.test(asset);
- const isImage = IMAGE_EXT.test(asset);
-
- const thumbW = size === "large" ? "w-full" : "w-[50px]";
- const thumbH = size === "large" ? "h-[100px]" : "h-[32px]";
-
- return (
- <>
-
-
-
-
- onCopy(asset)}
- onDragStart={(e) => {
- e.dataTransfer.effectAllowed = "copy";
- e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
- e.dataTransfer.setData("text/plain", asset);
- }}
- onContextMenu={(e) => {
- e.preventDefault();
- setContextMenu({ x: e.clientX, y: e.clientY });
- }}
- onPointerEnter={() => setHovered(true)}
- onPointerLeave={() => setHovered(false)}
- className={`transition-colors cursor-pointer ${
- size === "large"
- ? `px-2.5 py-1 ${isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/30"}`
- : `px-2.5 py-1.5 flex items-center gap-2.5 ${
- isCopied
- ? "bg-studio-accent/10 border-l-2 border-studio-accent"
- : "border-l-2 border-transparent hover:bg-neutral-800/50"
- }`
- }`}
- >
- {size === "large" ? (
-
-
- {contextMenu && (
-
-
- ) : (
- <>
-
- {isImage && (
- {
- (e.target as HTMLImageElement).style.display = "none";
- }}
- />
- )}
- {isVideo &&
-
-
- {name}
-
- {extension}
- {used && (
-
- in use
-
- )}
-
-
- {isImage && (
- {
- (e.target as HTMLImageElement).style.display = "none";
- }}
- />
- )}
- {!isImage && (
- {extension}
- )}
-
-
-
- {name}
-
-
-
- )}
-
- {extension}
- {used && (
-
- in use
-
- )}
-
-
{/* Header — matches design panel Section pattern */}
- {/* Scope toggle — this project's assets vs the global media-use cache */}
+ {/* Scope toggle */}
{(["local", "global"] as const).map((m) => (