@hyperframes/studio 0.7.55 → 0.7.57

package/src/components/editor/DomEditSelectionChrome.tsx

@@ -0,0 +1,257 @@
+import type { RefObject } from "react";
+import { type DomEditSelection } from "./domEditing";
+import type { GroupOverlayItem, OverlayRect } from "./domEditOverlayGeometry";
+import type { BlockedMoveState, ResizeHandle } from "./domEditOverlayGestures";
+import type { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+import { DomEditCropHandles } from "./DomEditCropHandles";
+import { DomEditRotateHandle } from "./DomEditRotateHandle";
+import { resolveRotatedResizeCursor } from "./domEditResizeLocal";
+
+// Corner resize handles, Canva-style: one per corner, diagonal cursors.
+// Corners scale about the element center; the translate keeps the center
+// planted, so they need the manual-offset capability in addition to manual-size.
+const RESIZE_HANDLE_DEFS: Array<{
+  handle: ResizeHandle;
+  cursor: string;
+  x: "left" | "right";
+  y: "top" | "bottom";
+}> = [
+  { handle: "nw", cursor: "nwse-resize", x: "left", y: "top" },
+  { handle: "ne", cursor: "nesw-resize", x: "right", y: "top" },
+  { handle: "sw", cursor: "nesw-resize", x: "left", y: "bottom" },
+  { handle: "se", cursor: "nwse-resize", x: "right", y: "bottom" },
+];
+
+// Visible dot is 9px; the pointer target is a 16px invisible square centered
+// on the corner so click targets don't shrink with the smaller dot.
+const RESIZE_HANDLE_HIT_PX = 16;
+
+type CropInset = { top: number; right: number; bottom: number; left: number };
+const NO_CROP_INSET: CropInset = { top: 0, right: 0, bottom: 0, left: 0 };
+
+function resizeHandleStyle(
+  def: (typeof RESIZE_HANDLE_DEFS)[number],
+  overlayRect: { left: number; top: number; width: number; height: number },
+  cropInset?: CropInset,
+): React.CSSProperties {
+  const half = RESIZE_HANDLE_HIT_PX / 2;
+  const inset = cropInset ?? NO_CROP_INSET;
+  const style: React.CSSProperties = { cursor: def.cursor, touchAction: "none" };
+  // Position relative to the overlay container (not the selection box).
+  // This ensures the dots render as siblings of the box border div — strictly
+  // above it — rather than as children where the parent border can visually
+  // overlap the dot circle at the corner.
+  style.left =
+    def.x === "left"
+      ? overlayRect.left + inset.left - half
+      : overlayRect.left + overlayRect.width - inset.right - half;
+  style.top =
+    def.y === "top"
+      ? overlayRect.top + inset.top - half
+      : overlayRect.top + overlayRect.height - inset.bottom - half;
+  return style;
+}
+
+type GestureHandlers = ReturnType<typeof createDomEditOverlayGestureHandlers>;
+
+interface DomEditGroupChromeProps {
+  groupOverlayItems: GroupOverlayItem[];
+  groupBounds: OverlayRect;
+  allowCanvasMovement: boolean;
+  groupCanMove: boolean;
+  gestures: GestureHandlers;
+  onBoxMouseDown: (e: React.MouseEvent) => void;
+  onBoxClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+// Multi-selection chrome: per-member outlines plus a single draggable bounding
+// box spanning the union of the members.
+export function DomEditGroupChrome({
+  groupOverlayItems,
+  groupBounds,
+  allowCanvasMovement,
+  groupCanMove,
+  gestures,
+  onBoxMouseDown,
+  onBoxClick,
+}: DomEditGroupChromeProps) {
+  return (
+    <>
+      {groupOverlayItems.map((item) => (
+        <div
+          key={item.key}
+          aria-hidden="true"
+          className="pointer-events-none absolute rounded-xl border border-studio-accent/70"
+          style={{
+            left: item.rect.left,
+            top: item.rect.top,
+            width: item.rect.width,
+            height: item.rect.height,
+          }}
+        />
+      ))}
+      <div
+        data-dom-edit-selection-box="true"
+        className="pointer-events-auto absolute rounded-xl border border-studio-accent shadow-[0_0_0_1px_rgba(60,230,172,0.3)]"
+        style={{
+          left: groupBounds.left,
+          top: groupBounds.top,
+          width: groupBounds.width,
+          height: groupBounds.height,
+          cursor: allowCanvasMovement && groupCanMove ? "move" : "default",
+        }}
+        onPointerDown={(e) => {
+          if (!allowCanvasMovement || !groupCanMove || e.shiftKey) return;
+          gestures.startGroupDrag(e);
+        }}
+        onMouseDown={onBoxMouseDown}
+        onClick={onBoxClick}
+      />
+    </>
+  );
+}
+
+interface DomEditSelectionChromeProps {
+  selection: DomEditSelection;
+  overlayRect: OverlayRect;
+  allowCanvasMovement: boolean;
+  cropOutlineInsetPx?: { top: number; right: number; bottom: number; left: number };
+  boxRef: RefObject<HTMLDivElement | null>;
+  boxChromeClass: string;
+  boxClipPath: string | undefined;
+  selectionKey: string;
+  groupSelectionCount: number;
+  blockedMoveRef: RefObject<BlockedMoveState | null>;
+  gestures: GestureHandlers;
+  onStyleCommit?: (property: string, value: string) => Promise<void> | void;
+  onBoxMouseDown: (e: React.MouseEvent) => void;
+  onBoxClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+// Oriented selection chrome: a rotation wrapper spanning the overlay, rotated by
+// the element's live angle about the selection box CENTER. Its children (border
+// box, corner dots, and rotate handle) keep their existing
+// overlay-absolute positions — rotating the whole plane about the box center
+// lands them on the element's real transformed corners for free. At angle 0 the
+// transform is a no-op, so the chrome is pixel-identical.
+export function DomEditSelectionChrome({
+  selection,
+  overlayRect,
+  allowCanvasMovement,
+  cropOutlineInsetPx,
+  boxRef,
+  boxChromeClass,
+  boxClipPath,
+  selectionKey,
+  groupSelectionCount,
+  blockedMoveRef,
+  gestures,
+  onStyleCommit,
+  onBoxMouseDown,
+  onBoxClick,
+}: DomEditSelectionChromeProps) {
+  return (
+    <>
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          transformOrigin: `${overlayRect.left + overlayRect.width / 2}px ${overlayRect.top + overlayRect.height / 2}px`,
+          transform: overlayRect.angle ? `rotate(${overlayRect.angle}deg)` : undefined,
+        }}
+      >
+        {allowCanvasMovement && selection.capabilities.canApplyManualRotation && (
+          <DomEditRotateHandle
+            overlayRect={overlayRect}
+            cropOutlineInsetPx={cropOutlineInsetPx}
+            onStartRotate={(e) => {
+              e.stopPropagation();
+              gestures.startGesture("rotate", e);
+            }}
+          />
+        )}
+        <div
+          key={selectionKey}
+          ref={boxRef}
+          data-dom-edit-selection-box="true"
+          className={`pointer-events-auto absolute rounded-md ${boxChromeClass}`}
+          style={{
+            left: overlayRect.left,
+            top: overlayRect.top,
+            width: overlayRect.width,
+            height: overlayRect.height,
+            clipPath: boxClipPath,
+            cursor:
+              allowCanvasMovement && selection.capabilities.canApplyManualOffset
+                ? "move"
+                : "default",
+          }}
+          onPointerDown={(e) => {
+            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={onBoxMouseDown}
+          onClick={onBoxClick}
+        >
+          {cropOutlineInsetPx && (
+            <div
+              className="pointer-events-none absolute rounded-md border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+              style={{
+                left: cropOutlineInsetPx.left,
+                top: cropOutlineInsetPx.top,
+                right: cropOutlineInsetPx.right,
+                bottom: cropOutlineInsetPx.bottom,
+              }}
+            />
+          )}
+        </div>
+        {/* Resize-handle dots rendered as siblings of the selection box, not
+          children, so they paint strictly above the box border. Each handle
+          is positioned relative to the overlay container using the
+          overlayRect origin, matching the old child-relative offsets. */}
+        {allowCanvasMovement &&
+          selection.capabilities.canApplyManualSize &&
+          RESIZE_HANDLE_DEFS.map((def) =>
+            def.handle !== "se" && !selection.capabilities.canApplyManualOffset ? null : (
+              <div
+                key={def.handle}
+                className="pointer-events-auto absolute flex h-4 w-4 items-center justify-center"
+                style={{
+                  ...resizeHandleStyle(def, overlayRect, cropOutlineInsetPx ?? undefined),
+                  // Cursor rotates with the object: bucket the corner's base
+                  // diagonal + element rotation into the 8 CSS resize cursors.
+                  cursor: resolveRotatedResizeCursor(def.handle, overlayRect.angle ?? 0),
+                }}
+                onPointerDown={(e) => {
+                  e.stopPropagation();
+                  gestures.startGesture("resize", e, { resizeHandle: def.handle });
+                }}
+              >
+                <div className="pointer-events-none h-[12px] w-[12px] rounded-full border-[1.5px] border-studio-accent bg-white shadow-[0_0_3px_rgba(0,0,0,0.45)]" />
+              </div>
+            ),
+          )}
+      </div>
+      {/* Crop owns its element-local oriented frame. Keep it outside the chrome's
+          rotated plane or a rotated selection applies the angle twice. */}
+      {selection.capabilities.canCrop && groupSelectionCount <= 1 && (
+        <DomEditCropHandles
+          selection={selection}
+          overlayRect={overlayRect}
+          onStyleCommit={onStyleCommit}
+        />
+      )}
+    </>
+  );
+}

package/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<DomEditLayerItem> & { 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();
+  });
+});

package/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,
@@ -15,6 +15,7 @@ import {
 import { Layers } from "../../icons/SystemIcons";
 import { useLayerDrag, isLayerDraggable, type LayerReorderEvent } from "./useLayerDrag";
 import { computeReorderZValues, getElementZIndex } from "../../player/lib/layerOrdering";
+import { deriveTimelineStoreKey } from "../../player/lib/timelineElementHelpers";
 
 const TAG_ICONS: Record<string, string> = {
   video: "Vi",
@@ -49,6 +50,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 +151,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
@@ -238,9 +281,17 @@ export const LayersPanel = memo(function LayersPanel() {
         selector: layer.selector,
         selectorIndex: layer.selectorIndex,
         sourceFile: layer.sourceFile,
+        key: deriveTimelineStoreKey({
+          domId: layer.id,
+          selector: layer.selector,
+          selectorIndex: layer.selectorIndex,
+          sourceFile: layer.sourceFile,
+        }),
       }));
 
-      handleDomZIndexReorderCommit(entries);
+      // "layer-drag" keeps consecutive drops of the same sibling set coalescing
+      // into one undo step, without merging with a context-menu z action.
+      handleDomZIndexReorderCommit(entries, undefined, "layer-drag");
     },
     [handleDomZIndexReorderCommit],
   );

package/src/components/editor/OffCanvasIndicators.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+import { OffCanvasIndicators } from "./OffCanvasIndicators";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+it("rotates an off-canvas indicator with its element", () => {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <OffCanvasIndicators
+        rects={[{ key: "card", left: 80, top: 20, width: 40, height: 20, angle: 30 }]}
+        elements={{ current: new Map() }}
+        compRect={{ left: 0, top: 0, width: 100, height: 100 }}
+        selection={null}
+        groupSelections={[]}
+        activeCompositionPathRef={{ current: null }}
+        onSelectionChangeRef={{ current: () => undefined }}
+      />,
+    );
+  });
+
+  const indicator = host.querySelector<HTMLElement>('[role="button"]');
+  expect(indicator?.parentElement?.style.transform).toBe("rotate(30deg)");
+  expect(indicator?.parentElement?.style.transformOrigin).toBe("center");
+
+  act(() => root.unmount());
+  host.remove();
+});

package/src/components/editor/OffCanvasIndicators.tsx

@@ -7,6 +7,7 @@ export interface OffCanvasRect {
   top: number;
   width: number;
   height: number;
+  angle?: number;
 }
 
 interface OffCanvasIndicatorsProps {
@@ -21,6 +22,44 @@ interface OffCanvasIndicatorsProps {
   >;
 }
 
+function clipOutsideCanvas(
+  rect: OffCanvasRect,
+  compRect: { left: number; top: number; width: number; height: number },
+): string | undefined {
+  const angle = rect.angle ?? 0;
+  if (!angle) {
+    const left = Math.max(0, compRect.left - rect.left);
+    const top = Math.max(0, compRect.top - rect.top);
+    const right = Math.min(rect.width, compRect.left + compRect.width - rect.left);
+    const bottom = Math.min(rect.height, compRect.top + compRect.height - rect.top);
+    if (left >= right || top >= bottom) return undefined;
+    return `polygon(evenodd, 0 0, ${rect.width}px 0, ${rect.width}px ${rect.height}px, 0 ${rect.height}px, 0 0, ${left}px ${top}px, ${right}px ${top}px, ${right}px ${bottom}px, ${left}px ${bottom}px, ${left}px ${top}px)`;
+  }
+
+  const radians = (-angle * Math.PI) / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const toLocal = (x: number, y: number) => {
+    const dx = x - centerX;
+    const dy = y - centerY;
+    return `${rect.width / 2 + dx * cos - dy * sin}px ${rect.height / 2 + dx * sin + dy * cos}px`;
+  };
+  const left = compRect.left;
+  const top = compRect.top;
+  const right = left + compRect.width;
+  const bottom = top + compRect.height;
+  const canvas = [
+    toLocal(left, top),
+    toLocal(right, top),
+    toLocal(right, bottom),
+    toLocal(left, bottom),
+    toLocal(left, top),
+  ].join(", ");
+  return `polygon(evenodd, 0 0, ${rect.width}px 0, ${rect.width}px ${rect.height}px, 0 ${rect.height}px, 0 0, ${canvas})`;
+}
+
 /**
  * Dashed teal indicators for elements whose bounds extend past the composition
  * (the "gray zone"). The in-canvas portion is clipped away so only the
@@ -49,15 +88,15 @@ export function OffCanvasIndicators({
           return !groupSelections.some((g) => g.element === el);
         })
         .map((r) => {
-          const pos = { left: r.left, top: r.top, width: r.width, height: r.height };
-          const cL = Math.max(0, compRect.left - r.left);
-          const cT = Math.max(0, compRect.top - r.top);
-          const cR = Math.min(r.width, compRect.left + compRect.width - r.left);
-          const cB = Math.min(r.height, compRect.top + compRect.height - r.top);
-          const hasInside = cL < cR && cT < cB;
-          const clipOutside = hasInside
-            ? `polygon(evenodd, 0 0, ${r.width}px 0, ${r.width}px ${r.height}px, 0 ${r.height}px, 0 0, ${cL}px ${cT}px, ${cR}px ${cT}px, ${cR}px ${cB}px, ${cL}px ${cB}px, ${cL}px ${cT}px)`
-            : undefined;
+          const pos = {
+            left: r.left,
+            top: r.top,
+            width: r.width,
+            height: r.height,
+            transform: r.angle ? `rotate(${r.angle}deg)` : undefined,
+            transformOrigin: "center",
+          };
+          const clipOutside = clipOutsideCanvas(r, compRect);
           const selectOffCanvas = async () => {
             const el = elements.current.get(r.key);
             if (!el) return;
@@ -86,7 +125,7 @@ export function OffCanvasIndicators({
                 role="button"
                 tabIndex={0}
                 aria-label={`Select off-canvas element ${r.key}`}
-                className="pointer-events-auto absolute inset-0 border-2 border-dashed border-studio-accent/60 rounded-md cursor-pointer hover:border-studio-accent hover:bg-studio-accent/10 transition-colors"
+                className="pointer-events-auto absolute inset-0 border-2 border-dashed border-studio-accent/10 rounded-md cursor-pointer hover:border-studio-accent hover:bg-studio-accent/10 transition-colors"
                 style={clipOutside ? { clipPath: clipOutside } : undefined}
                 title={`Off-canvas: ${r.key} — click to select`}
                 onClick={handleClick}

package/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<SnapGuidesState | null>;
-  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++) {

package/src/components/editor/SnapToolbar.test.tsx

@@ -34,7 +34,6 @@ function AppHotkeyHarness() {
   const leftSidebarRef = useRef<LeftSidebarHandle | null>(null);
 
   useAppHotkeys({
-    toggleTimelineVisibility: vi.fn(),
     handleTimelineElementDelete: vi.fn(),
     handleTimelineElementSplit: vi.fn(),
     handleDomEditElementDelete: vi.fn(),