@hyperframes/studio 0.7.37 → 0.7.38

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 };
 }