@hyperframes/studio 0.8.131 → 0.8.133

package/dist/index.d.ts

@@ -272,6 +272,8 @@ interface PlaybackReadinessSlice {
     previewBooted: boolean;
     setTimelineReady: (ready: boolean) => void;
     markPreviewBooted: () => void;
+    playLocked: boolean;
+    setPlayLocked: (locked: boolean) => void;
     /** Sets timelineReady once doc's readiness inputs settle, or immediately
      *  if doc is null. A wait a later call supersedes never wins the race.
      *  Waits for doc's load step first: it pauses and rewinds the preview, so a

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-BEcHKkGY.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dj21zXWA.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-D11atkBt.css">
   </head>
   <body>

package/dist/index.js

@@ -39,7 +39,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-DRVWEPO5.js";
+} from "./chunk-FOEID72M.js";
 import {
   Button,
   ContextMenu,
@@ -9099,100 +9099,37 @@ function paintsAbove(a, b) {
   if (a.domIndex != null && b.domIndex != null) return a.domIndex > b.domIndex;
   return false;
 }
-function boundaryZ(neighbours2, reduce) {
-  return neighbours2.length > 0 ? reduce(neighbours2.map((o) => o.zIndex)) : null;
-}
-function resolveEditedZ(edited, overlapping, overlappersOf, patchZ) {
-  const visualOverlap = overlapping.filter((o) => !o.isAudio);
-  if (visualOverlap.length === 0) return false;
-  const below = visualOverlap.filter((o) => laneIsAbove(edited, o));
-  const above = visualOverlap.filter((o) => laneIsAbove(o, edited));
-  const correct = below.every((o) => paintsAbove(edited, o)) && above.every((o) => paintsAbove(o, edited));
-  if (correct) return false;
-  const maxBelow = boundaryZ(below, (zs) => Math.max(...zs));
-  const single = trySingleZ(edited, below, above);
-  if (single != null) {
-    if (single !== edited.zIndex) patchZ(edited, single);
-    return single !== edited.zIndex;
-  }
-  const target = maxBelow != null ? maxBelow + 1 : 0;
-  const clamped = Math.max(0, target);
-  if (clamped !== edited.zIndex) patchZ(edited, clamped);
-  liftAbove(edited, overlappersOf, patchZ);
-  return true;
-}
-function zBetweenNeighbours(maxBelow, minAbove, correctAt) {
-  if (minAbove - maxBelow >= 2) {
-    const mid = Math.floor((maxBelow + minAbove) / 2);
-    return mid > maxBelow && mid < minAbove ? mid : null;
-  }
-  return correctAt(minAbove) ? minAbove : null;
-}
-function zBelowOnly(minAbove, correctAt) {
-  const candidate = minAbove - 1;
-  if (candidate >= 0) return candidate;
-  return correctAt(minAbove) ? minAbove : null;
-}
-function trySingleZ(edited, below, above) {
-  const maxBelow = boundaryZ(below, (zs) => Math.max(...zs));
-  const minAbove = boundaryZ(above, (zs) => Math.min(...zs));
-  const correctAt = (z) => {
-    const probe2 = { ...edited, zIndex: z };
-    return below.every((b) => paintsAbove(probe2, b)) && above.every((a) => paintsAbove(a, probe2));
-  };
-  if (maxBelow != null && minAbove != null)
-    return zBetweenNeighbours(maxBelow, minAbove, correctAt);
-  if (maxBelow != null) return maxBelow + 1;
-  if (minAbove != null) return zBelowOnly(minAbove, correctAt);
-  return null;
+function raisedZ(clip, overlapping) {
+  const below = overlapping.filter((o) => laneIsAbove(clip, o));
+  if (below.every((o) => paintsAbove(clip, o))) return null;
+  return Math.max(...below.map((o) => o.zIndex)) + 1;
 }
-function liftAbove(edited, overlappersOf, patchZ) {
-  const queue2 = [edited];
-  const raiseAbove = (clip, floor) => {
-    if (paintsAbove(clip, floor)) return;
-    patchZ(clip, floor.zIndex + 1);
-    queue2.push(clip);
-  };
-  while (queue2.length > 0) {
-    const floor = queue2.shift();
-    for (const other of overlappersOf(floor)) {
-      if (laneIsAbove(other, floor) && !paintsAbove(other, floor)) raiseAbove(other, floor);
-    }
-  }
+function loweredZ(clip, overlapping) {
+  const above = overlapping.filter((o) => laneIsAbove(o, clip));
+  if (above.every((o) => paintsAbove(o, clip))) return null;
+  const keepOver = overlapping.filter((o) => laneIsAbove(clip, o) && paintsAbove(clip, o));
+  const floor = Math.max(
+    0,
+    ...keepOver.map(
+      (o) => paintsAbove({ ...clip, zIndex: o.zIndex }, o) ? o.zIndex : o.zIndex + 1
+    )
+  );
+  const z = Math.max(floor, Math.min(...above.map((o) => o.zIndex)) - 1);
+  return z < clip.zIndex ? z : null;
 }
-function computeStackingPatches(elements, editedKeys) {
+function computeStackingPatches(elements, editedKeys, direction) {
   const editedSet = new Set(editedKeys);
-  if (editedSet.size === 0) return [];
-  const allResolved = elements.filter((e) => Number.isFinite(e.zIndex));
-  const editedScopes = new Set(allResolved.filter((e) => editedSet.has(e.key)).map(paintScopeKey));
-  const resolved2 = allResolved.filter((e) => editedScopes.has(paintScopeKey(e)));
-  const byKey = new Map(resolved2.map((e) => [e.key, { ...e }]));
-  const edited = resolved2.filter((e) => editedSet.has(e.key) && !e.isAudio).map((e) => byKey.get(e.key)).sort((a, b) => b.track - a.track);
-  const changed = /* @__PURE__ */ new Map();
-  const patchZ = (clip, z) => {
-    clip.zIndex = z;
-    changed.set(clip.key, z);
-  };
-  const all = [...byKey.values()];
-  const overlappersOf = (clip) => all.filter(
-    (o) => o.key !== clip.key && !o.isAudio && samePaintScope(clip, o) && overlapsInTime(clip, o)
-  );
-  for (const clip of edited) {
-    resolveEditedZ(clip, overlappersOf(clip), overlappersOf, patchZ);
-  }
-  const emitted = /* @__PURE__ */ new Set();
+  const live = elements.filter((e) => Number.isFinite(e.zIndex) && !e.isAudio).map((e) => ({ ...e }));
+  const edited = live.filter((e) => editedSet.has(e.key)).sort((a, b) => direction === "up" ? b.track - a.track : a.track - b.track);
   const patches = [];
   for (const clip of edited) {
-    if (changed.has(clip.key) && !emitted.has(clip.key)) {
-      patches.push({ key: clip.key, zIndex: changed.get(clip.key) });
-      emitted.add(clip.key);
-    }
-  }
-  for (const [key2, zIndex] of changed) {
-    if (!emitted.has(key2)) {
-      patches.push({ key: key2, zIndex });
-      emitted.add(key2);
-    }
+    const overlapping = live.filter(
+      (o) => o.key !== clip.key && overlapsInTime(clip, o) && samePaintScope(clip, o)
+    );
+    const zIndex = direction === "up" ? raisedZ(clip, overlapping) : loweredZ(clip, overlapping);
+    if (zIndex === null) continue;
+    clip.zIndex = zIndex;
+    patches.push({ key: clip.key, zIndex });
   }
   return patches;
 }
@@ -9841,7 +9778,6 @@ function commitDraggedClipMove(drag, deps) {
     if (multi?.keys.has(keyOf6(e))) return { ...e, start: multi.movedStart(e) };
     return e;
   });
-  const multiKeys = multi ? multi.keys : null;
   if (!isVertical || !deps.readZIndex || !deps.onStackingPatches) {
     void refreshAfterDurableLaneMove(
       persistMoveEdits(edits, deps, coalesceKey, "lane-reorder"),
@@ -9857,7 +9793,6 @@ function commitDraggedClipMove(drag, deps) {
         dragKey,
         drag.element.track,
         drag.previewTrack,
-        multiKeys,
         deps,
         coalesceKey
       )
@@ -9947,7 +9882,6 @@ function commitTrackInsert(drag, deps, multi) {
           dragKey,
           drag.element.track,
           drag.insertRow,
-          multi ? multi.keys : null,
           deps,
           coalesceKey
         )
@@ -9975,7 +9909,7 @@ function commitZMirrorLaneMove(element, move, deps, coalesceKey) {
     deps
   );
 }
-function syncStackingForEdit(candidate, dragKey, currentLane, aimedLane, multiKeys, deps, coalesceKey) {
+function syncStackingForEdit(candidate, dragKey, currentLane, aimedLane, deps, coalesceKey) {
   const { readZIndex, onStackingPatches } = deps;
   if (!readZIndex || !onStackingPatches) return Promise.resolve();
   if (aimedLane === currentLane) return Promise.resolve();
@@ -9990,11 +9924,11 @@ function syncStackingForEdit(candidate, dragKey, currentLane, aimedLane, multiKe
     domIndex,
     stackingContextId: el.stackingContextId ?? null
   }));
-  const editedKeys = [dragKey];
-  if (multiKeys) {
-    for (const k of multiKeys) if (k !== dragKey) editedKeys.push(k);
-  }
-  const patches = computeStackingPatches(stackingEls, editedKeys);
+  const patches = computeStackingPatches(
+    stackingEls,
+    [dragKey],
+    aimedLane < currentLane ? "up" : "down"
+  );
   if (patches.length === 0) return Promise.resolve();
   return Promise.resolve(onStackingPatches(patches, coalesceKey)).then(() => void 0);
 }
@@ -28278,6 +28212,7 @@ function usePlaybackKeyboard({
   );
   const shuttle = useCallback38(
     (direction) => {
+      if (usePlayerStore.getState().playLocked) return;
       if (shuttleDirectionRef.current === direction) {
         shuttleSpeedIndexRef.current = Math.min(
           shuttleSpeedIndexRef.current + 1,
@@ -31213,7 +31148,7 @@ function useTimelinePlayerLoop({
         const looping = usePlayerStore.getState().loopEnabled && dur > 0;
         setLoopStart(looping ? loopStart : null);
         if (time >= loopEnd) {
-          if (looping) {
+          if (looping && !usePlayerStore.getState().playLocked) {
             adapter.seek(loopStart, { keepPlaying: true });
             liveTime.notify(loopStart);
             adapter.play();
@@ -31506,7 +31441,7 @@ function pumpProbeQueue() {
 
 // src/player/lib/playbackSeek.ts
 function shouldResumeForwardPlaybackAfterSeek(input) {
-  return input.keepPlaying && !input.wasReverseShuttle && input.storeWasPlaying && (input.duration <= 0 || input.nextTime < input.duration);
+  return !input.playLocked && input.keepPlaying && !input.wasReverseShuttle && input.storeWasPlaying && (input.duration <= 0 || input.nextTime < input.duration);
 }
 function shouldStopAfterSeek(input) {
   return !input.keepPlaying || input.wasReverseShuttle;
@@ -31709,7 +31644,8 @@ function useTimelinePlayer({
     applyPreviewAudioFlags(iframeRef.current, audioMuted, audioVolume);
   }, []);
   const play = useCallback42(() => {
-    if (!usePlayerStore.getState().timelineReady) return;
+    const { timelineReady, playLocked } = usePlayerStore.getState();
+    if (!timelineReady || playLocked) return;
     stopRAFLoop();
     stopReverseLoop();
     stopScrubPreviewAudio();
@@ -31793,9 +31729,8 @@ function useTimelinePlayer({
   const pause = useCallback42(() => {
     stopReverseLoop();
     const adapter = getAdapter();
-    if (!adapter) return;
-    adapter.pause();
-    setCurrentTime(adapter.getTime());
+    adapter?.pause();
+    if (adapter) setCurrentTime(adapter.getTime());
     setIsPlaying(false);
     shuttleDirectionRef.current = null;
     shuttleSpeedIndexRef.current = 0;
@@ -31813,17 +31748,19 @@ function useTimelinePlayer({
       const duration = Math.max(0, adapter.getDuration());
       const nextTime = clampToDuration(time, duration);
       const keepPlaying = options?.keepPlaying === true;
+      const { playLocked, isPlaying: storeWasPlaying } = usePlayerStore.getState();
       const shouldResumeAfterSeek = shouldResumeForwardPlaybackAfterSeek({
         keepPlaying,
         wasReverseShuttle,
-        storeWasPlaying: usePlayerStore.getState().isPlaying,
+        storeWasPlaying,
         duration,
-        nextTime
+        nextTime,
+        playLocked
       });
       adapter.seek(nextTime, options);
       publishSeek(nextTime, options);
       setCurrentTime(nextTime);
-      if (!shouldResumeAfterSeek && !keepPlaying) scrubMusicAtSeek(iframeRef.current, nextTime);
+      if (!keepPlaying && !playLocked) scrubMusicAtSeek(iframeRef.current, nextTime);
       if (shouldResumeAfterSeek) {
         stopRAFLoop();
         applyPlaybackRate(usePlayerStore.getState().playbackRate);
@@ -31855,6 +31792,12 @@ function useTimelinePlayer({
       shuttleSpeedIndexRef
     ]
   );
+  useEffect35(
+    () => usePlayerStore.subscribe((state, prev) => {
+      if (state.playLocked && !prev.playLocked && state.isPlaying) pause();
+    }),
+    [pause]
+  );
   useEffect35(() => {
     return usePlayerStore.subscribe((state, prev) => {
       if (state.requestedSeekTime !== null && state.requestedSeekTime !== prev.requestedSeekTime) {