@hyperframes/studio 0.7.37 → 0.7.39

package/src/components/editor/useDomEditCompositionRect.ts

@@ -0,0 +1,68 @@
+import { useState, type RefObject } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+
+export interface DomEditCompositionRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  scaleX: number;
+  scaleY: number;
+}
+
+function sameRect(a: DomEditCompositionRect, b: DomEditCompositionRect): boolean {
+  const d = (k: keyof DomEditCompositionRect) => Math.abs(a[k] - b[k]);
+  return (
+    d("left") < 0.5 &&
+    d("top") < 0.5 &&
+    d("width") < 0.5 &&
+    d("height") < 0.5 &&
+    d("scaleX") < 0.001 &&
+    d("scaleY") < 0.001
+  );
+}
+
+export function useDomEditCompositionRect({
+  iframeRef,
+  overlayRef,
+}: {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  overlayRef: RefObject<HTMLDivElement | null>;
+}): DomEditCompositionRect {
+  const [compRect, setCompRect] = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    scaleX: 1,
+    scaleY: 1,
+  });
+
+  useMountEffect(() => {
+    let frame = 0;
+    // fallow-ignore-next-line complexity
+    const update = () => {
+      frame = requestAnimationFrame(update);
+      const iframe = iframeRef.current;
+      const overlayEl = overlayRef.current;
+      if (!iframe || !overlayEl) return;
+      const iRect = iframe.getBoundingClientRect();
+      const oRect = overlayEl.getBoundingClientRect();
+      const left = iRect.left - oRect.left;
+      const top = iRect.top - oRect.top;
+      if (iRect.width <= 0 || iRect.height <= 0) return;
+      const doc = iframe.contentDocument;
+      const root = doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement;
+      const dw = Number.parseFloat(root?.getAttribute("data-width") ?? "");
+      const dh = Number.parseFloat(root?.getAttribute("data-height") ?? "");
+      const scaleX = dw > 0 ? iRect.width / dw : 1;
+      const scaleY = dh > 0 ? iRect.height / dh : 1;
+      const next = { left, top, width: iRect.width, height: iRect.height, scaleX, scaleY };
+      setCompRect((prev) => (sameRect(prev, next) ? prev : next));
+    };
+    frame = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(frame);
+  });
+
+  return compRect;
+}

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -46,6 +46,7 @@ import {
   startGesture as _startGesture,
   startGroupDrag as _startGroupDrag,
 } from "./domEditOverlayStartGesture";
+import { hugRectForElement } from "./domEditOverlayCrop";
 import {
   resolveSnapAdjustment,
   resolveResizeSnapAdjustment,
@@ -183,12 +184,18 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     if (g.kind === "drag") {
       const sc = g.snapContext;
       if (sc?.snapEnabled && sc.targets.length > 0) {
-        const movingRect = {
-          left: g.originLeft,
-          top: g.originTop,
-          width: g.originWidth,
-          height: g.originHeight,
-        };
+        // Snap the element's VISIBLE (crop-hugged) edges, not the full bounds.
+        const movingRect = hugRectForElement(
+          {
+            left: g.originLeft,
+            top: g.originTop,
+            width: g.originWidth,
+            height: g.originHeight,
+            editScaleX: g.editScaleX,
+            editScaleY: g.editScaleY,
+          },
+          g.selection.element,
+        );
         const allTargets = sc.compositionTarget
           ? [...sc.targets, sc.compositionTarget]
           : sc.targets;

package/src/components/editor/useDomEditOverlayRects.ts

@@ -4,6 +4,7 @@
  */
 import { useRef, useState, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
+import { hugRectForElement } from "./domEditOverlayCrop";
 import { type DomEditSelection, findElementForSelection } from "./domEditing";
 import {
   type GroupOverlayItem,
@@ -15,7 +16,7 @@ import {
   rectsEqual,
   resolveElementForOverlay,
   selectionCacheKey,
-  toOverlayRect,
+  toVisibleOverlayRect,
 } from "./domEditOverlayGeometry";
 
 function childRectsEqual(a: OverlayRect[], b: OverlayRect[]): boolean {
@@ -164,7 +165,7 @@ export function useDomEditOverlayRects({
             for (let i = 0; i < descendants.length; i++) {
               const child = descendants[i] as HTMLElement;
               if (!child.getBoundingClientRect) continue;
-              const r = toOverlayRect(overlayEl, iframe, child);
+              const r = toVisibleOverlayRect(overlayEl, iframe, child);
               if (r && r.width > 2 && r.height > 2) nextChildRects.push(r);
             }
             if (!childRectsEqual(childRectsRef.current, nextChildRects)) {
@@ -203,7 +204,8 @@ export function useDomEditOverlayRects({
           if (liveGroupKeys.has(key)) continue;
           liveGroupKeys.add(key);
           const el = resolveGroupElement(doc, groupSelection);
-          const rect = el ? groupAwareOverlayRect(overlayEl, iframe, el) : null;
+          const base = el ? groupAwareOverlayRect(overlayEl, iframe, el) : null;
+          const rect = base && el ? { ...base, ...hugRectForElement(base, el) } : base;
           if (el && rect)
             nextGroupItems.push({ key, selection: groupSelection, element: el, rect });
         }

package/src/components/nle/CompositionBreadcrumb.tsx

@@ -33,8 +33,9 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
           });
           onNavigate(stack.length - 2);
         }}
-        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors"
-        title="Back (Esc)"
+        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
+        title="Back (Esc, or double-click empty timeline)"
+        aria-label="Back to parent composition"
       >
         <ArrowLeft size={12} weight="bold" />
       </button>

package/src/components/nle/NLELayout.tsx

@@ -13,6 +13,7 @@ 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";
@@ -23,6 +24,7 @@ import {
   getTimelineToggleTitle,
 } from "../../utils/timelineDiscovery";
 import { ensureMotionPathPluginLoaded } from "../../utils/gsapSoftReload";
+import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 
 interface NLELayoutProps {
   projectId: string;
@@ -75,9 +77,7 @@ interface NLELayoutProps {
   onCompositionLoadingChange?: (loading: boolean) => void;
 }
 
-const MIN_TIMELINE_H = 100;
 const DEFAULT_TIMELINE_H = 220;
-const MIN_PREVIEW_H = 120;
 
 function subscribeFullscreen(cb: () => void) {
   document.addEventListener("fullscreenchange", cb);
@@ -138,13 +138,22 @@ export const NLELayout = memo(function NLELayout({
     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<HTMLDivElement | null>,
     onBlockDrop: onPreviewBlockDrop,
   });
@@ -289,7 +298,10 @@ export const NLELayout = memo(function NLELayout({
 
   useMountEffect(() => {
     fetch(`/api/projects/${projectId}/files/index.html`)
-      .then((r) => r.json())
+      .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<string, string>();
@@ -307,7 +319,11 @@ export const NLELayout = memo(function NLELayout({
         setCompositionSourceMap(map);
         onCompIdToSrcChange?.(map);
       })
-      .catch(() => {});
+      .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.
@@ -343,8 +359,24 @@ export const NLELayout = memo(function NLELayout({
     });
   }, [compIdToSrc]);
 
-  // Resizable timeline height
-  const [timelineH, setTimelineH] = useState(DEFAULT_TIMELINE_H);
+  // 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) => {
@@ -360,7 +392,6 @@ export const NLELayout = memo(function NLELayout({
 
   const fullscreenElement = useSyncExternalStore(subscribeFullscreen, getFullscreenElement);
   const isTimelineVisible = timelineVisible ?? true;
-  const isDragging = useRef(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const isFullscreen = fullscreenElement === containerRef.current && fullscreenElement != null;
 
@@ -382,37 +413,6 @@ export const NLELayout = memo(function NLELayout({
     onIframeRefStable.current?.(iframeRef.current);
   }, [compositionStack.length, refreshKey, iframeRef]);
 
-  // Resize divider handlers
-  const handleDividerPointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      if (timelineDisabled) return;
-      e.preventDefault();
-      isDragging.current = true;
-      (e.target as HTMLElement).setPointerCapture(e.pointerId);
-    },
-    [timelineDisabled],
-  );
-
-  const handleDividerPointerMove = useCallback(
-    (e: React.PointerEvent) => {
-      if (timelineDisabled) return;
-      if (!isDragging.current || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const mouseY = e.clientY - rect.top;
-      const containerH = rect.height;
-      const newTimelineH = Math.max(
-        MIN_TIMELINE_H,
-        Math.min(containerH - MIN_PREVIEW_H, containerH - mouseY),
-      );
-      setTimelineH(newTimelineH);
-    },
-    [timelineDisabled],
-  );
-
-  const handleDividerPointerUp = useCallback(() => {
-    isDragging.current = false;
-  }, []);
-
   // Keyboard: Escape to pop composition level
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -451,6 +451,7 @@ export const NLELayout = memo(function NLELayout({
               e.clientY <= rect.bottom;
             if (!inside) onSelectTimelineElement?.(null);
           }}
+          onDragEnter={handlePreviewDragEnter}
           onDragOver={handlePreviewDragOver}
           onDragLeave={handlePreviewDragLeave}
           onDrop={handlePreviewDrop}
@@ -465,6 +466,7 @@ export const NLELayout = memo(function NLELayout({
               directUrl={directUrl}
               suppressLoadingOverlay={hasLoadedOnceRef.current}
               onStageRef={handleStageRef}
+              onCompositionSizeChange={setPreviewCompositionSize}
             />
             {previewDragOver && (
               <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
@@ -491,16 +493,13 @@ export const NLELayout = memo(function NLELayout({
 
       {!isFullscreen && isTimelineVisible ? (
         <>
-          {/* Resize divider */}
-          <div
-            className="group h-2 flex-shrink-0 cursor-row-resize flex items-center justify-center z-10"
-            style={{ touchAction: "none" }}
-            onPointerDown={handleDividerPointerDown}
-            onPointerMove={handleDividerPointerMove}
-            onPointerUp={handleDividerPointerUp}
-          >
-            <div className="h-px w-full bg-white/10 transition-colors group-hover:bg-white/16 group-active:bg-white/22" />
-          </div>
+          <TimelineResizeDivider
+            timelineH={timelineH}
+            setTimelineH={setTimelineH}
+            persistTimelineH={persistTimelineH}
+            containerRef={containerRef}
+            disabled={timelineDisabled}
+          />
 
           {/* Timeline section */}
           <div
@@ -537,13 +536,17 @@ export const NLELayout = memo(function NLELayout({
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}
             {timelineDisabled && (
               <div
-                className="absolute inset-0 z-30 cursor-not-allowed bg-black/18"
+                className="absolute inset-0 z-30 cursor-not-allowed bg-black/18 flex items-center justify-center"
                 data-testid="timeline-loading-disabled-overlay"
-                aria-hidden="true"
+                role="status"
                 onPointerDown={(event) => event.preventDefault()}
                 onDragOver={(event) => event.preventDefault()}
                 onDrop={(event) => event.preventDefault()}
-              />
+              >
+                <span className="rounded-md bg-neutral-900/90 px-2.5 py-1 text-[11px] text-neutral-400">
+                  Loading composition…
+                </span>
+              </div>
             )}
           </div>
         </>

package/src/components/nle/NLEPreview.tsx

@@ -21,6 +21,8 @@ interface NLEPreviewProps {
   directUrl?: string;
   suppressLoadingOverlay?: boolean;
   onStageRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
+  /** Reports the authored composition size measured from the loaded preview. */
+  onCompositionSizeChange?: (size: PreviewCompositionSize | null) => void;
 }
 
 export function getPreviewPlayerKey({
@@ -123,6 +125,7 @@ export const NLEPreview = memo(function NLEPreview({
   directUrl,
   suppressLoadingOverlay,
   onStageRef,
+  onCompositionSizeChange,
 }: NLEPreviewProps) {
   const activeKey = getPreviewPlayerKey({ projectId, directUrl });
   const viewportRef = useRef<HTMLDivElement>(null);
@@ -170,13 +173,22 @@ export const NLEPreview = memo(function NLEPreview({
     return () => observer.disconnect();
   }, [compositionSize, portrait]);
 
+  const onCompositionSizeChangeRef = useRef(onCompositionSizeChange);
+  onCompositionSizeChangeRef.current = onCompositionSizeChange;
+
   const updateCompositionSizeFromPreview = useCallback(() => {
     const next = readPreviewCompositionSize(previewIframeRef.current);
+    // Pure updater — the parent notification happens in the effect below
+    // (updaters may run more than once under Strict Mode / concurrent React).
     setCompositionSize((prev) =>
       prev?.width === next?.width && prev?.height === next?.height ? prev : next,
     );
   }, []);
 
+  useEffect(() => {
+    onCompositionSizeChangeRef.current?.(compositionSize);
+  }, [compositionSize]);
+
   const setPreviewIframeRef = useCallback(
     (node: HTMLIFrameElement | null) => {
       previewIframeRef.current = node;
@@ -206,10 +218,17 @@ export const NLEPreview = memo(function NLEPreview({
       };
       zoomRef.current = clamped;
 
-      if (showHud && !zoomingRef.current) {
-        zoomingRef.current = true;
+      if (showHud) {
         const hud = hudRef.current;
-        if (hud) hud.style.opacity = "1";
+        if (hud) {
+          if (!zoomingRef.current) {
+            zoomingRef.current = true;
+            hud.style.opacity = "1";
+          }
+          // Live per-frame readout — without this the HUD shows an empty pill
+          // on the first-ever zoom and a stale percentage mid-gesture.
+          hud.textContent = isPreviewAtFit(clamped) ? "Fit" : `${Math.round(clamped.zoomPercent)}%`;
+        }
       }
 
       writeTransform(clamped);
@@ -254,7 +273,24 @@ export const NLEPreview = memo(function NLEPreview({
   const applyInitialZoom = useCallback(() => {
     const z = zoomRef.current;
     if (Math.abs(z.zoomPercent - 100) > 0.5 || Math.abs(z.panX) > 0.1 || Math.abs(z.panY) > 0.1) {
-      writeTransform(z);
+      // A pan persisted on a large window can restore the composition mostly
+      // off-screen in a smaller one; clamp against the current viewport first.
+      const viewport = viewportRef.current;
+      const rect = viewport?.getBoundingClientRect();
+      const sz = stageSizeRef.current;
+      if (rect && rect.width > 0 && rect.height > 0 && sz.width > 0 && sz.height > 0) {
+        const pan = clampPreviewPan({
+          panX: z.panX,
+          panY: z.panY,
+          zoomPercent: z.zoomPercent,
+          viewportWidth: rect.width,
+          viewportHeight: rect.height,
+          contentWidth: sz.width,
+          contentHeight: sz.height,
+        });
+        zoomRef.current = { ...z, ...pan };
+      }
+      writeTransform(zoomRef.current);
     }
   }, [writeTransform]);
 
@@ -474,7 +510,7 @@ export const NLEPreview = memo(function NLEPreview({
         <div
           ref={hudRef}
           className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 rounded-lg px-4 py-2 text-sm font-mono tabular-nums text-white/90 bg-black/60 backdrop-blur-sm shadow-lg"
-          style={{ opacity: 0, transition: "opacity 300ms ease-out" }}
+          style={{ opacity: 0, transition: "opacity 200ms ease-in" }}
           aria-live="polite"
         />
         {!isPreviewAtFit(settledZoom) && (

package/src/components/nle/TimelineResizeDivider.tsx

@@ -0,0 +1,97 @@
+import { useCallback, useRef } from "react";
+
+export const MIN_TIMELINE_H = 100;
+export const MIN_PREVIEW_H = 120;
+
+/**
+ * Horizontal drag/keyboard-resizable divider between the preview and the
+ * timeline. Implements the separator pattern: ArrowUp grows the timeline,
+ * ArrowDown shrinks it (mirrors the drag direction).
+ */
+export function TimelineResizeDivider({
+  timelineH,
+  setTimelineH,
+  persistTimelineH,
+  containerRef,
+  disabled,
+}: {
+  timelineH: number;
+  setTimelineH: React.Dispatch<React.SetStateAction<number>>;
+  persistTimelineH: (h: number) => void;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  disabled: boolean;
+}) {
+  const isDragging = useRef(false);
+  const timelineHRef = useRef(timelineH);
+  timelineHRef.current = timelineH;
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (disabled) return;
+      e.preventDefault();
+      isDragging.current = true;
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    },
+    [disabled],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (disabled) return;
+      if (!isDragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseY = e.clientY - rect.top;
+      const containerH = rect.height;
+      const newTimelineH = Math.max(
+        MIN_TIMELINE_H,
+        Math.min(containerH - MIN_PREVIEW_H, containerH - mouseY),
+      );
+      setTimelineH(newTimelineH);
+    },
+    [disabled, containerRef, setTimelineH],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    if (isDragging.current) persistTimelineH(timelineHRef.current);
+    isDragging.current = false;
+  }, [persistTimelineH]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (disabled) return;
+      if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+      e.preventDefault();
+      const containerH = containerRef.current?.getBoundingClientRect().height ?? Infinity;
+      const delta = e.key === "ArrowUp" ? 16 : -16;
+      setTimelineH((prev) => {
+        const next = Math.max(MIN_TIMELINE_H, Math.min(containerH - MIN_PREVIEW_H, prev + delta));
+        persistTimelineH(next);
+        return next;
+      });
+    },
+    [disabled, containerRef, setTimelineH, persistTimelineH],
+  );
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label="Resize timeline (arrow keys)"
+      aria-valuenow={Math.round(timelineH)}
+      aria-valuemin={MIN_TIMELINE_H}
+      aria-valuemax={Math.round(
+        (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H,
+      )}
+      tabIndex={0}
+      className="group h-2 flex-shrink-0 cursor-row-resize flex items-center justify-center z-10 outline-none focus-visible:bg-studio-accent/20"
+      style={{ touchAction: "none" }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="h-px w-full bg-white/10 transition-colors group-hover:bg-white/16 group-active:bg-white/22 group-focus-visible:bg-studio-accent/60" />
+    </div>
+  );
+}

package/src/components/nle/usePreviewBlockDrop.ts

@@ -1,8 +1,14 @@
-import { useCallback, useState, type RefObject } from "react";
+import { useCallback, useRef, useState, type RefObject } from "react";
 import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 
 interface UsePreviewBlockDropOptions {
   portrait?: boolean;
+  /**
+   * Authored composition size measured from the live preview. Preferred over
+   * the portrait fallback — hard-coding 1080/1920 places drops at the wrong
+   * spot for any composition authored at another size (square, 720p, 4K).
+   */
+  compositionSize?: { width: number; height: number } | null;
   stageRef: RefObject<HTMLDivElement | null>;
   onBlockDrop?: (blockName: string, position: { left: number; top: number }) => void;
 }
@@ -28,6 +34,7 @@ function resolveCompositionPosition(
   clientX: number,
   clientY: number,
   stageRect: DOMRect,
+  compositionSize: { width: number; height: number } | null | undefined,
   portrait: boolean | undefined,
 ): { left: number; top: number } | null {
   if (stageRect.width === 0 || stageRect.height === 0) return null;
@@ -35,8 +42,8 @@ function resolveCompositionPosition(
   const normalizedX = (clientX - stageRect.left) / stageRect.width;
   const normalizedY = (clientY - stageRect.top) / stageRect.height;
 
-  const compWidth = portrait ? 1080 : 1920;
-  const compHeight = portrait ? 1920 : 1080;
+  const compWidth = compositionSize?.width ?? (portrait ? 1080 : 1920);
+  const compHeight = compositionSize?.height ?? (portrait ? 1920 : 1080);
 
   return {
     left: Math.max(0, Math.min(normalizedX * compWidth, compWidth)),
@@ -58,10 +65,24 @@ function centerBlockAtPosition(
 
 export function usePreviewBlockDrop({
   portrait,
+  compositionSize,
   stageRef,
   onBlockDrop,
 }: UsePreviewBlockDropOptions) {
   const [isDragOver, setIsDragOver] = useState(false);
+  // dragenter/dragleave fire for every internal element boundary; a depth
+  // counter keeps the drop indicator steady instead of flickering.
+  const dragDepthRef = useRef(0);
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent) => {
+      if (!onBlockDrop) return;
+      if (!e.dataTransfer.types.includes(TIMELINE_BLOCK_MIME)) return;
+      dragDepthRef.current += 1;
+      setIsDragOver(true);
+    },
+    [onBlockDrop],
+  );
 
   const handleDragOver = useCallback(
     (e: React.DragEvent) => {
@@ -69,18 +90,20 @@ export function usePreviewBlockDrop({
       if (!e.dataTransfer.types.includes(TIMELINE_BLOCK_MIME)) return;
       e.preventDefault();
       e.dataTransfer.dropEffect = "copy";
-      setIsDragOver(true);
+      // dragenter/dragleave own the isDragOver flag (depth-counted).
     },
     [onBlockDrop],
   );
 
   const handleDragLeave = useCallback(() => {
-    setIsDragOver(false);
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) setIsDragOver(false);
   }, []);
 
   // fallow-ignore-next-line complexity
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
+      dragDepthRef.current = 0;
       setIsDragOver(false);
       if (!onBlockDrop) return;
 
@@ -96,14 +119,15 @@ export function usePreviewBlockDrop({
         e.clientX,
         e.clientY,
         stage.getBoundingClientRect(),
+        compositionSize,
         portrait,
       );
       if (!pos) return;
 
       onBlockDrop(block.name, centerBlockAtPosition(pos, block));
     },
-    [onBlockDrop, stageRef, portrait],
+    [onBlockDrop, stageRef, compositionSize, portrait],
   );
 
-  return { isDragOver, handleDragOver, handleDragLeave, handleDrop };
+  return { isDragOver, handleDragEnter, handleDragOver, handleDragLeave, handleDrop };
 }