@hyperframes/studio 0.7.56 → 0.7.58

package/src/hooks/useTimelineGroupEditing.ts

@@ -6,17 +6,20 @@ import {
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
   extendRootDurationIfNeeded,
-  finishTimelineTimingFallback,
-  foldGsapMutationIntoHistory,
   formatTimelineAttributeNumber,
   patchIframeDomTiming,
   persistTimelineBatchEdit,
-  readFileContent,
-  scaleGsapPositions,
-  shiftGsapPositions,
   type PersistTimelineBatchChange,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
+import {
+  captureDurationRollback,
+  finishGroupTimingGsapFallback,
+  readFileContent,
+  scaleGsapPositions,
+  shiftGsapPositions,
+  syncPreviewContentDuration,
+} from "./timelineTimingSync";
 
 export interface TimelineGroupMoveChange {
   element: TimelineElement;
@@ -34,6 +37,8 @@ export interface TimelineGroupResizeChange {
 export interface TimelineGroupCommitOptions {
   beforeTiming?: Promise<void>;
   coalesceKey?: string;
+  /** Per-entry undo coalesce window override (ms) — see EditHistoryEntry.coalesceMs. */
+  coalesceMs?: number;
 }
 
 interface UseTimelineGroupEditingOptions {
@@ -75,6 +80,15 @@ function resizeCoalesceKey(changes: readonly TimelineGroupResizeChange[]): strin
   return `timeline-group-resize:${changes.map((change) => change.element.hfId ?? change.element.id).join(",")}`;
 }
 
+function toSdkTimingChanges<T extends { element: TimelineElement }>(
+  changes: readonly T[],
+  timingUpdate: (change: T) => { start: number; duration?: number },
+): Array<{ hfId: string; timingUpdate: { start: number; duration?: number } } | null> {
+  return changes.map((change) =>
+    change.element.hfId ? { hfId: change.element.hfId, timingUpdate: timingUpdate(change) } : null,
+  );
+}
+
 function resizeHasPlaybackStartAdjustment(change: TimelineGroupResizeChange): boolean {
   return (
     change.playbackStart != null ||
@@ -125,6 +139,7 @@ export function useTimelineGroupEditing({
       label: string,
       batchChanges: PersistTimelineBatchChange[],
       coalesceKey: string,
+      coalesceMs?: number,
     ) => {
       await persistTimelineBatchEdit({
         projectId,
@@ -136,6 +151,7 @@ export function useTimelineGroupEditing({
         domEditSaveTimestampRef,
         pendingTimelineEditPathRef,
         coalesceKey,
+        coalesceMs,
       });
       forceReloadSdkSession?.();
     },
@@ -149,6 +165,56 @@ export function useTimelineGroupEditing({
     ],
   );
 
+  // Shared SDK fast path for group move/resize: eligible when nothing needs the
+  // server (no root-duration growth, one shared file, every change SDK-addressable
+  // and `eligible` per the caller's own gate). Returns whether the SDK handled it;
+  // false → caller falls through to the server batch persist.
+  const trySdkBatchPersist = useCallback(
+    async (input: {
+      changes: readonly { element: TimelineElement }[];
+      sdkChanges: Array<{
+        hfId: string;
+        timingUpdate: { start: number; duration?: number };
+      } | null>;
+      eligible: boolean;
+      needsExtension: boolean;
+      label: string;
+      coalesceKey: string;
+      coalesceMs?: number;
+    }): Promise<boolean> => {
+      const sharedPath = allChangesSharePath(input.changes, activeCompPath);
+      const canUseSdk =
+        !input.needsExtension &&
+        sharedPath !== null &&
+        input.eligible &&
+        input.sdkChanges.every((change) => change !== null);
+      if (!canUseSdk) return false;
+      return sdkTimingBatchPersist(
+        input.sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
+        sharedPath,
+        sdkSession,
+        {
+          editHistory: { recordEdit },
+          writeProjectFile,
+          reloadPreview,
+          domEditSaveTimestampRef,
+          compositionPath: activeCompPath,
+          readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
+        },
+        { label: input.label, coalesceKey: input.coalesceKey, coalesceMs: input.coalesceMs },
+      );
+    },
+    [
+      activeCompPath,
+      domEditSaveTimestampRef,
+      projectIdRef,
+      recordEdit,
+      reloadPreview,
+      sdkSession,
+      writeProjectFile,
+    ],
+  );
+
   const handleTimelineGroupMove = useCallback(
     (changes: TimelineGroupMoveChange[], options?: TimelineGroupCommitOptions) => {
       if (changes.length === 0) return Promise.resolve();
@@ -159,42 +225,50 @@ export function useTimelineGroupEditing({
         if (change.track != null) {
           attrs.push(["data-track-index", formatTimelineAttributeNumber(change.track)]);
         }
-        patchIframeDomTiming(previewIframeRef.current, change.element, attrs);
+        patchIframeDomTiming(previewIframeRef.current, change.element, attrs, activeCompPath);
       }
 
+      // TRACK-ONLY batch: every change keeps its start (moves never carry a
+      // duration change), so nothing timing-related changed — the batch only
+      // rewrites data-track-index, which the renderer never reads (documented
+      // in core runtime/timeline.ts; track is a studio lane concept). The live
+      // DOM patch above + the gesture owner's optimistic store update fully
+      // cover the UI, so after the persist there is nothing to GSAP-shift and
+      // nothing for the preview to recompute: skip the fallback below entirely.
+      // Running it anyway is what made the mirrored z-order lane move blink —
+      // a zero-delta batch yields no scriptText, and finishGroupTimingGsapFallback
+      // used to full-reload the iframe when there was no script to soft-swap
+      // (it now rebinds the runtime timing in place, but a track-only batch
+      // needs NO preview sync at all, so the skip stays).
+      const trackOnly = changes.every((change) => change.start === change.element.start);
+
       const maxEnd = Math.max(...changes.map((change) => change.start + change.element.duration));
+      // Snapshot the duration BEFORE the optimistic updates below so a failed
+      // persist can roll the readout + live root back (see captureDurationRollback).
+      const rollbackDuration = captureDurationRollback(previewIframeRef.current);
+      // needsExtension gates the SDK path (setTiming can't grow the root duration),
+      // so read the store BEFORE the readout sync below optimistically updates it.
+      // Track-only batches leave every clip end unchanged, so both this and the
+      // readout sync below are provable no-ops there — kept unconditional so the
+      // duration machinery stays on one code path.
       const needsExtension = extendRootDurationIfNeeded(maxEnd);
+      // Optimistic duration readout: content-driven (grow AND shrink), read from
+      // the just-patched live DOM. See syncPreviewContentDuration.
+      syncPreviewContentDuration(previewIframeRef.current);
       const coalesceKey = options?.coalesceKey ?? moveCoalesceKey(changes);
+      const coalesceMs = options?.coalesceMs;
       return enqueueGroupOperation("Move timeline clips", async (projectId) => {
         await options?.beforeTiming;
-        const sharedPath = allChangesSharePath(changes, activeCompPath);
-        const sdkChanges = changes.map((change) =>
-          change.element.hfId
-            ? { hfId: change.element.hfId, timingUpdate: { start: change.start } }
-            : null,
-        );
-        const canUseSdk =
-          !needsExtension &&
-          sharedPath !== null &&
-          changes.every((change) => change.track == null) &&
-          sdkChanges.every((change) => change !== null);
-        if (canUseSdk) {
-          const handled = await sdkTimingBatchPersist(
-            sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
-            sharedPath,
-            sdkSession,
-            {
-              editHistory: { recordEdit },
-              writeProjectFile,
-              reloadPreview,
-              domEditSaveTimestampRef,
-              compositionPath: activeCompPath,
-              readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
-            },
-            { label: "Move timeline clips", coalesceKey },
-          );
-          if (handled) return;
-        }
+        const handledBySdk = await trySdkBatchPersist({
+          changes,
+          sdkChanges: toSdkTimingChanges(changes, (change) => ({ start: change.start })),
+          eligible: changes.every((change) => change.track == null),
+          needsExtension,
+          label: "Move timeline clips",
+          coalesceKey,
+          coalesceMs,
+        });
+        if (handledBySdk) return;
 
         await persistServerBatch(
           projectId,
@@ -211,51 +285,45 @@ export function useTimelineGroupEditing({
               ),
           })),
           coalesceKey,
+          coalesceMs,
         );
-        await finishTimelineTimingFallback({
+        // Track-only: no timing delta → no GSAP positions to shift and no
+        // reload (see the trackOnly doc above). Mixed batches (any start
+        // change) keep the full fallback below.
+        if (trackOnly) return;
+        await finishGroupTimingGsapFallback({
+          projectId,
           iframe: previewIframeRef.current,
-          needsExtension,
-          rootDurationSeconds: maxEnd,
           reloadPreview,
-          gsapMutation: () =>
-            foldGsapMutationIntoHistory({
-              projectId,
-              paths: changes.map((change) => targetPathFor(change.element, activeCompPath)),
-              label: "Move timeline clips",
-              coalesceKey,
-              recordEdit,
-              gsapMutation: async () => {
-                let mutated = false;
-                for (const change of changes) {
-                  const delta = change.start - change.element.start;
-                  const domId = change.element.domId;
-                  if (delta === 0 || !domId) continue;
-                  const status = await shiftGsapPositions(
-                    projectId,
-                    targetPathFor(change.element, activeCompPath),
-                    domId,
-                    delta,
-                  );
-                  mutated = mutated || status.mutated;
-                }
-                return { mutated };
-              },
-            }),
-          onGsapError: (err) => console.error("[Timeline] Failed to shift GSAP positions", err),
+          label: "Move timeline clips",
+          errorLabel: "Failed to shift GSAP positions",
+          coalesceKey,
+          recordEdit,
+          activeCompPath,
+          changes,
+          resolveChangePath: (element) => targetPathFor(element, activeCompPath),
+          mutateChange: (change, changePath) => {
+            const delta = change.start - change.element.start;
+            const domId = change.element.domId;
+            if (delta === 0 || !domId) return null;
+            return shiftGsapPositions(projectId, changePath, domId, delta);
+          },
         });
+      }).catch((error) => {
+        // Failed persist: revert the optimistic duration readout + live root
+        // alongside the gesture owner's store rollback.
+        rollbackDuration();
+        throw error;
       });
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       enqueueGroupOperation,
       persistServerBatch,
       previewIframeRef,
-      projectIdRef,
       recordEdit,
       reloadPreview,
-      sdkSession,
-      writeProjectFile,
+      trySdkBatchPersist,
     ],
   );
 
@@ -274,45 +342,36 @@ export function useTimelineGroupEditing({
               : "data-media-start";
           liveAttrs.push([liveAttr, formatTimelineAttributeNumber(change.playbackStart)]);
         }
-        patchIframeDomTiming(previewIframeRef.current, change.element, liveAttrs);
+        patchIframeDomTiming(previewIframeRef.current, change.element, liveAttrs, activeCompPath);
       }
 
       const maxEnd = Math.max(...changes.map((change) => change.start + change.duration));
+      // Snapshot the duration BEFORE the optimistic updates below so a failed
+      // persist can roll the readout + live root back (see captureDurationRollback).
+      const rollbackDuration = captureDurationRollback(previewIframeRef.current);
+      // needsExtension gates the SDK path (setTiming can't grow the root duration),
+      // so read the store BEFORE the readout sync below optimistically updates it.
       const needsExtension = extendRootDurationIfNeeded(maxEnd);
+      // Optimistic duration readout: content-driven (grow AND shrink), read from
+      // the just-patched live DOM. See syncPreviewContentDuration.
+      syncPreviewContentDuration(previewIframeRef.current);
       const coalesceKey = options?.coalesceKey ?? resizeCoalesceKey(changes);
+      const coalesceMs = options?.coalesceMs;
       return enqueueGroupOperation("Resize timeline clips", async (projectId) => {
         await options?.beforeTiming;
-        const sharedPath = allChangesSharePath(changes, activeCompPath);
-        const sdkChanges = changes.map((change) =>
-          change.element.hfId
-            ? {
-                hfId: change.element.hfId,
-                timingUpdate: { start: change.start, duration: change.duration },
-              }
-            : null,
-        );
-        const canUseSdk =
-          !needsExtension &&
-          sharedPath !== null &&
-          changes.every((change) => !resizeHasPlaybackStartAdjustment(change)) &&
-          sdkChanges.every((change) => change !== null);
-        if (canUseSdk) {
-          const handled = await sdkTimingBatchPersist(
-            sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
-            sharedPath,
-            sdkSession,
-            {
-              editHistory: { recordEdit },
-              writeProjectFile,
-              reloadPreview,
-              domEditSaveTimestampRef,
-              compositionPath: activeCompPath,
-              readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
-            },
-            { label: "Resize timeline clips", coalesceKey },
-          );
-          if (handled) return;
-        }
+        const handledBySdk = await trySdkBatchPersist({
+          changes,
+          sdkChanges: toSdkTimingChanges(changes, (change) => ({
+            start: change.start,
+            duration: change.duration,
+          })),
+          eligible: changes.every((change) => !resizeHasPlaybackStartAdjustment(change)),
+          needsExtension,
+          label: "Resize timeline clips",
+          coalesceKey,
+          coalesceMs,
+        });
+        if (handledBySdk) return;
 
         await persistServerBatch(
           projectId,
@@ -327,56 +386,50 @@ export function useTimelineGroupEditing({
               }),
           })),
           coalesceKey,
+          coalesceMs,
         );
-        await finishTimelineTimingFallback({
+        await finishGroupTimingGsapFallback({
+          projectId,
           iframe: previewIframeRef.current,
-          needsExtension,
-          rootDurationSeconds: maxEnd,
           reloadPreview,
-          gsapMutation: () =>
-            foldGsapMutationIntoHistory({
+          label: "Resize timeline clips",
+          errorLabel: "Failed to scale GSAP positions",
+          coalesceKey,
+          recordEdit,
+          activeCompPath,
+          changes,
+          resolveChangePath: (element) => targetPathFor(element, activeCompPath),
+          mutateChange: (change, changePath) => {
+            const domId = change.element.domId;
+            const timingChanged =
+              change.start !== change.element.start || change.duration !== change.element.duration;
+            if (!timingChanged || !domId) return null;
+            return scaleGsapPositions(
               projectId,
-              paths: changes.map((change) => targetPathFor(change.element, activeCompPath)),
-              label: "Resize timeline clips",
-              coalesceKey,
-              recordEdit,
-              gsapMutation: async () => {
-                let mutated = false;
-                for (const change of changes) {
-                  const domId = change.element.domId;
-                  const timingChanged =
-                    change.start !== change.element.start ||
-                    change.duration !== change.element.duration;
-                  if (!timingChanged || !domId) continue;
-                  const status = await scaleGsapPositions(
-                    projectId,
-                    targetPathFor(change.element, activeCompPath),
-                    domId,
-                    change.element.start,
-                    change.element.duration,
-                    change.start,
-                    change.duration,
-                  );
-                  mutated = mutated || status.mutated;
-                }
-                return { mutated };
-              },
-            }),
-          onGsapError: (err) => console.error("[Timeline] Failed to scale GSAP positions", err),
+              changePath,
+              domId,
+              change.element.start,
+              change.element.duration,
+              change.start,
+              change.duration,
+            );
+          },
         });
+      }).catch((error) => {
+        // Failed persist: revert the optimistic duration readout + live root
+        // alongside the gesture owner's store rollback.
+        rollbackDuration();
+        throw error;
       });
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       enqueueGroupOperation,
       persistServerBatch,
       previewIframeRef,
-      projectIdRef,
       recordEdit,
       reloadPreview,
-      sdkSession,
-      writeProjectFile,
+      trySdkBatchPersist,
     ],
   );
 

package/src/player/components/PlayerControls.tsx

@@ -9,10 +9,8 @@ import { Tooltip } from "../../components/ui";
 import { ShortcutsPanel } from "./ShortcutsPanel";
 import { SpeedMenu } from "./SpeedMenu";
 import { useSeekBarDrag, resolveSeekPercent } from "./useSeekBarDrag";
-import { useState } from "react";
 
 export { resolveSeekPercent };
-type TimeDisplayMode = "time" | "frame";
 
 /* ── Icon sub-components ─────────────────────────────────────────── */
 
@@ -369,7 +367,8 @@ export const PlayerControls = memo(function PlayerControls({
   const outPoint = usePlayerStore((s) => s.outPoint);
   const setInPoint = usePlayerStore.getState().setInPoint;
   const setOutPoint = usePlayerStore.getState().setOutPoint;
-  const [timeDisplayMode, setTimeDisplayMode] = useState<TimeDisplayMode>("time");
+  const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
+  const setTimeDisplayMode = usePlayerStore.getState().setTimeDisplayMode;
 
   const progressFillRef = useRef<HTMLDivElement>(null);
   const progressThumbRef = useRef<HTMLDivElement>(null);
@@ -428,10 +427,11 @@ export const PlayerControls = memo(function PlayerControls({
 
   return (
     <div
+      // No own background/border: the transport blends into the preview
+      // panel's surface — buttons carry their own chrome.
       className="px-4 py-2 flex flex-wrap items-center gap-x-2 gap-y-1"
       aria-disabled={disabled || undefined}
       style={{
-        borderTop: "1px solid rgba(255,255,255,0.04)",
         paddingBottom: "calc(0.5rem + env(safe-area-inset-bottom))",
       }}
     >
@@ -456,7 +456,7 @@ export const PlayerControls = memo(function PlayerControls({
       >
         <button
           type="button"
-          onClick={() => setTimeDisplayMode((m) => (m === "time" ? "frame" : "time"))}
+          onClick={() => setTimeDisplayMode(timeDisplayMode === "time" ? "frame" : "time")}
           disabled={disabled}
           className="font-mono text-[11px] tabular-nums flex-shrink-0 w-[118px] text-left transition-colors disabled:pointer-events-none hover:opacity-80"
           style={{ color: "#A1A1AA", cursor: "pointer" }}

package/src/player/components/PlayheadIndicator.tsx

@@ -9,6 +9,8 @@
  * no matter how far the tracks are scrolled. The head is OUTLINE-only at rest and
  * FILLED while the playhead is actively held/scrubbed (`scrubbing`).
  */
+import { PLAYHEAD_HEAD_W } from "./timelineLayout";
+
 interface PlayheadIndicatorProps {
   /** CSS color, defaults to the HF accent variable */
   color?: string;
@@ -31,8 +33,11 @@ export function PlayheadIndicator({
 }: PlayheadIndicatorProps) {
   // Head chip dimensions — used to compute the centering offset and the
   // point where the vertical line starts (so it begins at the head's bottom
-  // edge rather than running through the hollow diamond center).
-  const HEAD_W = 9;
+  // edge rather than running through the hollow diamond center). The width is
+  // the shared PLAYHEAD_HEAD_W constant: getTimelinePlayheadLeft shifts the
+  // wrapper by -PLAYHEAD_HEAD_W/2 so the 1px line (centered at 50% of the
+  // wrapper) lands exactly on GUTTER + time * pps — the ruler ticks' center x.
+  const HEAD_W = PLAYHEAD_HEAD_W;
   const HEAD_H = 9;
   // marginTop(1) + HEAD_H = where the line should start.
   const HEAD_TOTAL_H = 1 + HEAD_H;