@hyperframes/studio 0.7.56 → 0.7.58

package/src/components/nle/AssetPreviewOverlay.test.tsx

@@ -0,0 +1,106 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
+import { AssetPreviewOverlay } from "./AssetPreviewOverlay";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) {
+    act(() => root?.unmount());
+    root = null;
+  }
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+  // reset() does not cover the out-of-loop seek request; clear it explicitly
+  // so a pending-seek test can't leak into the next one.
+  usePlayerStore.getState().clearSeekRequest();
+  useAssetPreviewStore.getState().clearPreviewAsset();
+});
+
+function mountOverlay(): void {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(<AssetPreviewOverlay />);
+  });
+}
+
+describe("AssetPreviewOverlay playback dismissal", () => {
+  it("dismisses immediately when opened while playback is ALREADY running", () => {
+    // The RAF playback loop bypasses the store, so no post-open store change
+    // will arrive — the dismiss check must be level-triggered, not edge-triggered.
+    usePlayerStore.setState({ isPlaying: true });
+    mountOverlay();
+
+    act(() => {
+      useAssetPreviewStore.getState().setPreviewAsset("assets/clip.mp3", "p1");
+    });
+
+    expect(useAssetPreviewStore.getState().previewAsset).toBeNull();
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it("dismisses immediately when opened while a seek is ALREADY in flight", () => {
+    // A pending out-of-loop seek (requestedSeekTime set, not yet consumed) may
+    // produce no further store change before currentTime settles — the on-open
+    // check must evaluate the full shared dismiss predicate, not just isPlaying.
+    usePlayerStore.setState({ isPlaying: false, requestedSeekTime: 3.2 });
+    mountOverlay();
+
+    act(() => {
+      useAssetPreviewStore.getState().setPreviewAsset("assets/clip.mp3", "p1");
+    });
+
+    expect(useAssetPreviewStore.getState().previewAsset).toBeNull();
+    expect(document.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it("stays open when the playhead is idle", () => {
+    mountOverlay();
+
+    act(() => {
+      useAssetPreviewStore.getState().setPreviewAsset("assets/clip.mp3", "p1");
+    });
+
+    expect(useAssetPreviewStore.getState().previewAsset).toBe("assets/clip.mp3");
+    expect(document.querySelector('[role="dialog"]')).not.toBeNull();
+  });
+
+  it("still dismisses when playback starts AFTER the preview opened", () => {
+    mountOverlay();
+
+    act(() => {
+      useAssetPreviewStore.getState().setPreviewAsset("assets/clip.mp3", "p1");
+    });
+    expect(useAssetPreviewStore.getState().previewAsset).toBe("assets/clip.mp3");
+
+    act(() => {
+      usePlayerStore.setState({ isPlaying: true });
+    });
+
+    expect(useAssetPreviewStore.getState().previewAsset).toBeNull();
+  });
+
+  it("still dismisses when the playhead is scrubbed after opening", () => {
+    usePlayerStore.setState({ currentTime: 2 });
+    mountOverlay();
+
+    act(() => {
+      useAssetPreviewStore.getState().setPreviewAsset("assets/clip.mp3", "p1");
+    });
+
+    act(() => {
+      usePlayerStore.setState({ currentTime: 4.5 });
+    });
+
+    expect(useAssetPreviewStore.getState().previewAsset).toBeNull();
+  });
+});

package/src/components/nle/AssetPreviewOverlay.tsx

@@ -2,15 +2,20 @@
  * CapCut-style asset preview overlay rendered inside PreviewPane.
  *
  * Shown when the user clicks an asset card that has NOT yet been added to the
- * timeline. Displays the media (image / video / audio) without modifying the
- * composition — no undo entry, no file mutation.
+ * timeline. Displays the media (image / video / audio) as a compact floating
+ * card over the canvas — the canvas stays visible behind a barely-tinted
+ * click-catcher — without modifying the composition (no undo entry, no file
+ * mutation).
  *
- * Dismiss: X button, Escape key, or click on the scrim.
+ * Dismiss: X button, Escape key, click outside the card, or any playhead
+ * activity (starting playback / seeking) — the canvas refocuses.
  * Switching to another not-added asset replaces the current preview.
  */
 import { useEffect, useCallback } from "react";
 import { VIDEO_EXT, IMAGE_EXT } from "../../utils/mediaTypes";
 import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { shouldDismissAssetPreview } from "../../utils/assetPreviewDismiss";
 import { resolveMediaPreviewUrl } from "../../player/components/thumbnailUtils";
 
 function basename(path: string): string {
@@ -37,11 +42,7 @@ function AssetPreviewMedia({
 }) {
   if (kind === "image") {
     return (
-      <img
-        src={serveUrl}
-        alt={name}
-        className="max-w-full max-h-[70vh] rounded-md object-contain shadow-2xl"
-      />
+      <img src={serveUrl} alt={name} className="max-w-full max-h-[40vh] rounded object-contain" />
     );
   }
   if (kind === "video") {
@@ -52,12 +53,12 @@ function AssetPreviewMedia({
         autoPlay
         muted
         playsInline
-        className="max-w-full max-h-[70vh] rounded-md shadow-2xl"
+        className="max-w-full max-h-[40vh] rounded"
       />
     );
   }
   return (
-    <div className="flex flex-col items-center gap-4 px-6 py-8 rounded-xl bg-neutral-900 border border-neutral-800">
+    <div className="flex flex-col items-center gap-3 px-6 py-4">
       <svg
         width="40"
         height="40"
@@ -94,6 +95,30 @@ export function AssetPreviewOverlay() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [previewAsset, handleKeyDown]);
 
+  // The canvas refocuses on any playhead activity: starting playback or a
+  // seek/scrub away from where the playhead sat when the preview opened
+  // dismisses it. openedTime is captured per preview open (previewAsset dep),
+  // so a stale render can never dismiss against the wrong reference time.
+  useEffect(() => {
+    if (!previewAsset) return;
+    const opened = usePlayerStore.getState();
+    const openedTime = opened.currentTime;
+    // Level-triggered, not edge-triggered: a preview opened while playback is
+    // ALREADY running (the RAF loop bypasses the store) or while a seek is
+    // already in flight gets no store change to react to, so evaluate the
+    // current state once, through the same shared predicate the subscription
+    // uses. openedTime is this snapshot's own currentTime, so the
+    // time-diverged branch can't false-positive at open — only the
+    // isPlaying / requestedSeekTime branches can fire here.
+    if (shouldDismissAssetPreview(openedTime, opened)) {
+      clearPreviewAsset();
+      return;
+    }
+    return usePlayerStore.subscribe((state) => {
+      if (shouldDismissAssetPreview(openedTime, state)) clearPreviewAsset();
+    });
+  }, [previewAsset, clearPreviewAsset]);
+
   if (!previewAsset || !previewProjectId) return null;
 
   const serveUrl = resolveMediaPreviewUrl(previewAsset, previewProjectId);
@@ -101,40 +126,39 @@ export function AssetPreviewOverlay() {
 
   return (
     <div
-      className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80"
+      className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/20"
       onClick={clearPreviewAsset}
       role="dialog"
       aria-label={`Preview: ${name}`}
-      aria-modal="true"
     >
-      {/* Close button */}
-      <button
-        className="absolute top-3 right-3 w-7 h-7 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white flex items-center justify-center transition-colors z-10"
-        onClick={(e) => {
-          e.stopPropagation();
-          clearPreviewAsset();
-        }}
-        aria-label="Close preview"
-      >
-        <svg
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth="2.5"
-          fill="none"
-          strokeLinecap="round"
-        >
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-      </button>
-
-      {/* Media */}
+      {/* Floating preview card — compact, canvas stays visible around it */}
       <div
-        className="flex flex-col items-center gap-3 max-w-[90%] max-h-[85%]"
+        className="relative flex flex-col items-center gap-2 max-w-[58%] rounded-lg border border-neutral-800 bg-neutral-950/95 p-2 pt-8 shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
+        {/* Close button */}
+        <button
+          className="absolute top-2 right-2 w-6 h-6 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white flex items-center justify-center transition-colors z-10"
+          onClick={(e) => {
+            e.stopPropagation();
+            clearPreviewAsset();
+          }}
+          aria-label="Close preview"
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            fill="none"
+            strokeLinecap="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
         <AssetPreviewMedia kind={resolveAssetKind(previewAsset)} serveUrl={serveUrl} name={name} />
 
         {/* Filename label */}

package/src/components/nle/PreviewOverlays.tsx

@@ -18,6 +18,10 @@ import {
 import { readStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { readHfId, type DomEditSelection } from "../editor/domEditing";
 import { buildStableSelector } from "../editor/domEditingDom";
+import { deriveTimelineStoreKey } from "../../player/lib/timelineElementHelpers";
+import { zReorderCoalesceKey } from "../../hooks/useElementLifecycleOps";
+import { useCanvasZOrderTimelineMirror } from "./useCanvasZOrderTimelineMirror";
+import { runZLaneGesture } from "./zLaneGesture";
 import type { BlockPreviewInfo } from "../sidebar/BlocksTab";
 import type { GestureRecordingState } from "../editor/GestureRecordControl";
 import type { ReactNode } from "react";
@@ -38,6 +42,8 @@ type ZIndexReorderEntry = {
   selector?: string;
   selectorIndex?: number;
   sourceFile: string;
+  /** Timeline store key — lets the commit update the store zIndex synchronously. */
+  key?: string;
 };
 
 /** Can this element be robustly re-targeted for a persisted z change? */
@@ -58,6 +64,12 @@ function selectedZIndexEntry(sel: DomEditSelection, zIndex: number): ZIndexReord
     selector: sel.selector,
     selectorIndex: sel.selectorIndex,
     sourceFile: sel.sourceFile,
+    key: deriveTimelineStoreKey({
+      domId: sel.id ?? undefined,
+      selector: sel.selector,
+      selectorIndex: sel.selectorIndex,
+      sourceFile: sel.sourceFile,
+    }),
   };
 }
 
@@ -75,7 +87,15 @@ function siblingZIndexEntry(
   const id = element.id || undefined;
   const selector = buildStableSelector(element);
   if (!canTargetZIndexElement(element, id, selector)) return null;
-  return { element, zIndex, id, selector, selectorIndex: undefined, sourceFile };
+  return {
+    element,
+    zIndex,
+    id,
+    selector,
+    selectorIndex: undefined,
+    sourceFile,
+    key: deriveTimelineStoreKey({ domId: id, selector, sourceFile }),
+  };
 }
 
 /** Short human-readable label for a dropped sibling, for the console warning below. */
@@ -88,14 +108,16 @@ function describeZIndexElement(element: HTMLElement): string {
 }
 
 // Resolve z-index patches into commit entries; a sibling with no stable
-// id/selector can't be written to source, so it is collected as a label for the
-// revert-on-reload warning instead.
-function resolveZIndexEntries(
+// id/selector can't be written to source, so it is returned as `dropped` for
+// the revert-on-reload warning (and a live-only style write, so the resolved
+// stacking order still renders coherently). Exported so tests can drive the
+// menu → commit path through the same wiring the app uses.
+export function resolveZIndexEntries(
   sel: DomEditSelection,
   patches: ReadonlyArray<{ element: HTMLElement; zIndex: number }>,
-): { entries: ZIndexReorderEntry[]; droppedLabels: string[] } {
+): { entries: ZIndexReorderEntry[]; dropped: Array<{ element: HTMLElement; zIndex: number }> } {
   const entries: ZIndexReorderEntry[] = [];
-  const droppedLabels: string[] = [];
+  const dropped: Array<{ element: HTMLElement; zIndex: number }> = [];
   for (const patch of patches) {
     if (patch.element === sel.element) {
       entries.push(selectedZIndexEntry(sel, patch.zIndex));
@@ -103,9 +125,9 @@ function resolveZIndexEntries(
     }
     const entry = siblingZIndexEntry(patch.element, patch.zIndex, sel.sourceFile);
     if (entry) entries.push(entry);
-    else droppedLabels.push(describeZIndexElement(patch.element));
+    else dropped.push(patch);
   }
-  return { entries, droppedLabels };
+  return { entries, dropped };
 }
 
 // fallow-ignore-next-line complexity
@@ -139,6 +161,7 @@ export function PreviewOverlays({
     handleDomEditElementDelete,
     handleDomZIndexReorderCommit,
   } = useDomEditActionsContext();
+  const mirrorZOrderToTimeline = useCanvasZOrderTimelineMirror();
 
   // fallow-ignore-next-line complexity
   const [snapPrefs, setSnapPrefs] = useState(() => {
@@ -205,19 +228,41 @@ export function PreviewOverlays({
         onRotationCommit={handleDomRotationCommit}
         onStyleCommit={handleDomStyleCommit}
         onDeleteSelection={handleDomEditElementDelete}
-        onApplyZIndex={(sel, patches) => {
-          const { entries, droppedLabels } = resolveZIndexEntries(sel, patches);
-          if (droppedLabels.length > 0) {
-            // The optimistic z-index has already been applied live at this point —
-            // these siblings just won't be written to source, so they'll revert to
-            // their prior stacking order on the next reload with no other signal.
+        onApplyZIndex={(sel, patches, action, crossed) => {
+          const { entries, dropped } = resolveZIndexEntries(sel, patches);
+          if (dropped.length > 0) {
+            // These siblings can't be written to source. Apply their live z
+            // anyway so the resolved stacking order renders coherently — it
+            // just reverts to the prior order on the next reload.
+            for (const patch of dropped) patch.element.style.zIndex = String(patch.zIndex);
             console.warn(
               "[studio] z-index reorder: dropping sibling(s) with no stable id/selector " +
                 "(will revert on reload):",
-              droppedLabels.join(", "),
+              dropped.map((patch) => describeZIndexElement(patch.element)).join(", "),
             );
           }
-          if (entries.length > 0) handleDomZIndexReorderCommit(entries);
+          if (entries.length === 0) return;
+          // Shared undo coalesce key: passed to BOTH the z persist and the
+          // timeline lane mirror below so editHistory folds the two records
+          // into one undo entry (same value handleDomZIndexReorderCommit would
+          // default to — passed explicitly so the mirror shares it by
+          // construction, not by formula duplication).
+          const coalesceKey = zReorderCoalesceKey(entries, action);
+          // One serialized z→lane transaction: the mirror runs only AFTER the
+          // z commit resolved AND reported durable targets, and a second rapid
+          // gesture cannot interleave between the two phases — see
+          // runZLaneGesture. A failed z commit already toasted + rolled back.
+          runZLaneGesture({
+            commitZ: () => handleDomZIndexReorderCommit(entries, coalesceKey, action),
+            mirror: () =>
+              mirrorZOrderToTimeline({
+                selectionKey: entries.find((e) => e.element === sel.element)?.key,
+                action,
+                crossed,
+                sourceFile: sel.sourceFile,
+                coalesceKey,
+              }),
+          }).catch(() => undefined);
         }}
         gridVisible={snapPrefs.gridVisible}
         gridSpacing={snapPrefs.gridSpacing}

package/src/components/nle/TimelinePane.test.ts

@@ -22,6 +22,7 @@ describe("TimelinePane move wrapper", () => {
       "clip-lane-move:7",
       "track-insert",
       onMoveElements,
+      Number.POSITIVE_INFINITY,
     );
     expect(onMoveElements).toHaveBeenCalledWith(
       [
@@ -32,6 +33,8 @@ describe("TimelinePane move wrapper", () => {
       ],
       "clip-lane-move:7",
       "track-insert",
+      // The per-gesture coalesce window rides along with the shared key.
+      Number.POSITIVE_INFINITY,
     );
   });
 

package/src/components/nle/TimelinePane.tsx

@@ -21,7 +21,9 @@ export function forwardRebasedTimelineMoveElements(
     edits: TimelineMoveEdit[],
     coalesceKey?: string,
     operation?: TimelineMoveOperation,
+    coalesceMs?: number,
   ) => Promise<void> | void,
+  coalesceMs?: number,
 ) {
   return onMoveElements(
     edits.map(({ element, updates }) => {
@@ -34,6 +36,7 @@ export function forwardRebasedTimelineMoveElements(
     }),
     coalesceKey,
     operation,
+    coalesceMs,
   );
 }
 
@@ -160,6 +163,7 @@ export function TimelinePane({
       edits: Array<{ element: TimelineElement; updates: Pick<TimelineElement, "start" | "track"> }>,
       coalesceKey?: string,
       operation?: TimelineMoveOperation,
+      coalesceMs?: number,
     ) => {
       // 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).
@@ -167,7 +171,13 @@ export function TimelinePane({
         trackStudioExpandedClipEdit({ action: "move" });
       }
       if (!onMoveElements) return;
-      return forwardRebasedTimelineMoveElements(edits, coalesceKey, operation, onMoveElements);
+      return forwardRebasedTimelineMoveElements(
+        edits,
+        coalesceKey,
+        operation,
+        onMoveElements,
+        coalesceMs,
+      );
     },
     [onMoveElements],
   );