@hyperframes/studio 0.8.100 → 0.8.101

package/dist/index.js

@@ -43,6 +43,7 @@ import {
   isTimelineIgnoredElement,
   liveTime,
   panelsInZone,
+  parseDockLayout,
   playbackStartAttributeForElement,
   previewElementFinder,
   readLayerRevealPriorZ,
@@ -66,7 +67,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-U3EE4ACX.js";
+} from "./chunk-7X4XRP3L.js";
 import {
   Button,
   ContextMenu,
@@ -3338,6 +3339,73 @@ function isLaneFree(elements, track2, start, end, excludeKey) {
   );
 }
 
+// src/player/components/timelineSnapping.ts
+function resolveSnapGuide(moving, trimming) {
+  const source = moving?.started ? moving : trimming;
+  if (source?.snapTime == null || source.snapType == null) return null;
+  return { time: source.snapTime, type: source.snapType };
+}
+var TIMELINE_SNAP_PX = 8;
+var TYPE_PRIORITY = {
+  playhead: 0,
+  "clip-edge": 1,
+  beat: 2
+};
+function collectTimelineSnapTargets(input) {
+  const byTime = /* @__PURE__ */ new Map();
+  const add = (time, type) => {
+    if (!Number.isFinite(time) || time < 0) return;
+    const rounded2 = Math.round(time * 1e3) / 1e3;
+    const existing = byTime.get(rounded2);
+    if (!existing || TYPE_PRIORITY[type] < TYPE_PRIORITY[existing.type]) {
+      byTime.set(rounded2, { time: rounded2, type });
+    }
+  };
+  for (const beat of input.beatTimes) add(beat, "beat");
+  for (const el of input.elements) {
+    if (input.excludeElementKey != null && (el.key ?? el.id) === input.excludeElementKey) continue;
+    add(el.start, "clip-edge");
+    add(el.start + el.duration, "clip-edge");
+  }
+  if (input.playheadTime != null && input.includePlayhead !== false)
+    add(input.playheadTime, "playhead");
+  return Array.from(byTime.values()).sort((a, b) => a.time - b.time);
+}
+function snapTimelineTime(time, targets, thresholdSecs) {
+  let best = null;
+  let bestDist = thresholdSecs;
+  for (const target of targets) {
+    const d = Math.abs(target.time - time);
+    if (d < bestDist || d === bestDist && best && TYPE_PRIORITY[target.type] < TYPE_PRIORITY[best.type]) {
+      bestDist = d;
+      best = target;
+    }
+  }
+  return best ? { time: best.time, target: best } : { time, target: null };
+}
+function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration2) {
+  if (targets.length === 0) return { start, snapTime: null, snapType: null };
+  const thresholdSecs = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
+  const startSnap = snapTimelineTime(start, targets, thresholdSecs);
+  const endSnap = snapTimelineTime(start + duration, targets, thresholdSecs);
+  const startMoved = startSnap.target !== null;
+  const endMoved = endSnap.target !== null;
+  let candidate = start;
+  let target = null;
+  if (startMoved && (!endMoved || Math.abs(startSnap.time - start) <= Math.abs(endSnap.time - (start + duration)))) {
+    candidate = startSnap.time;
+    target = startSnap.target;
+  } else if (endMoved) {
+    candidate = endSnap.time - duration;
+    target = endSnap.target;
+  }
+  const maxStart = Math.max(0, timelineDuration2 - duration);
+  const roundedCandidate = Math.round(candidate * 1e3) / 1e3;
+  const clamped = Math.max(0, Math.min(maxStart, roundedCandidate));
+  if (target && Math.abs(clamped - roundedCandidate) > 1e-6) target = null;
+  return { start: clamped, snapTime: target?.time ?? null, snapType: target?.type ?? null };
+}
+
 // src/player/components/timelineDragDrop.ts
 function applyJsonDropPayload(raw, pick, apply, placement) {
   try {
@@ -3358,12 +3426,20 @@ function resolveDropInsertRow(contentY, rowHeights, trackCount) {
   if (rowFloat >= trackCount) return null;
   return resolveInsertRow(rowFloat, trackCount);
 }
-function placeDrop(geometry, clientX, clientY, canInsertTrack) {
+function alignDropStart(placement, elements, pixelsPerSecond) {
+  const laneHasClips = placement.insertRow == null && elements.some((el) => el.track === placement.track);
+  if (!laneHasClips) return { ...placement, start: 0 };
+  if (!usePlayerStore.getState().timelineSnapEnabled) return placement;
+  const targets = collectTimelineSnapTargets({ elements, playheadTime: null, beatTimes: [] });
+  const threshold = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
+  return { ...placement, start: snapTimelineTime(placement.start, targets, threshold).time };
+}
+function placeDrop(geometry, elements, clientX, clientY, canInsertTrack) {
   const placement = resolveTimelineAssetDrop(geometry, clientX, clientY);
-  if (!canInsertTrack) return placement;
   const contentY = clientY - geometry.rectTop + geometry.scrollTop;
-  const insertRow = resolveDropInsertRow(contentY, geometry.rowHeights, geometry.trackOrder.length);
-  return insertRow == null ? placement : { ...placement, insertRow, trackOrder: geometry.trackOrder };
+  const insertRow = canInsertTrack ? resolveDropInsertRow(contentY, geometry.rowHeights, geometry.trackOrder.length) : null;
+  const aimed = insertRow == null ? placement : { ...placement, insertRow, trackOrder: geometry.trackOrder };
+  return alignDropStart(aimed, elements, geometry.pixelsPerSecond);
 }
 function invokeDropCallback(callback) {
   try {
@@ -3391,6 +3467,7 @@ function useTimelineAssetDrop({
   scrollRef,
   ppsRef,
   trackOrderRef,
+  elementsRef,
   rowGeometryRef,
   contentOrigin,
   onFileDrop,
@@ -3458,12 +3535,13 @@ function useTimelineAssetDrop({
           rowHeights: rowGeometryRef.current.rowHeights,
           trackOrder: trackOrderRef.current
         },
+        elementsRef.current,
         clientX,
         clientY,
         canInsertTrack
       );
     },
-    [scrollRef, ppsRef, trackOrderRef, rowGeometryRef, contentOrigin]
+    [scrollRef, ppsRef, trackOrderRef, elementsRef, rowGeometryRef, contentOrigin]
   );
   const handleAssetDragOver = useCallback6(
     (e) => {
@@ -3558,73 +3636,6 @@ function useTimelineAssetDrop({
 // src/player/components/useTimelineClipDrag.ts
 import { useRef as useRef7, useState as useState4, useCallback as useCallback7, useMemo as useMemo3, useEffect as useEffect7 } from "react";
 
-// src/player/components/timelineSnapping.ts
-function resolveSnapGuide(moving, trimming) {
-  const source = moving?.started ? moving : trimming;
-  if (source?.snapTime == null || source.snapType == null) return null;
-  return { time: source.snapTime, type: source.snapType };
-}
-var TIMELINE_SNAP_PX = 8;
-var TYPE_PRIORITY = {
-  playhead: 0,
-  "clip-edge": 1,
-  beat: 2
-};
-function collectTimelineSnapTargets(input) {
-  const byTime = /* @__PURE__ */ new Map();
-  const add = (time, type) => {
-    if (!Number.isFinite(time) || time < 0) return;
-    const rounded2 = Math.round(time * 1e3) / 1e3;
-    const existing = byTime.get(rounded2);
-    if (!existing || TYPE_PRIORITY[type] < TYPE_PRIORITY[existing.type]) {
-      byTime.set(rounded2, { time: rounded2, type });
-    }
-  };
-  for (const beat of input.beatTimes) add(beat, "beat");
-  for (const el of input.elements) {
-    if (input.excludeElementKey != null && (el.key ?? el.id) === input.excludeElementKey) continue;
-    add(el.start, "clip-edge");
-    add(el.start + el.duration, "clip-edge");
-  }
-  if (input.playheadTime != null && input.includePlayhead !== false)
-    add(input.playheadTime, "playhead");
-  return Array.from(byTime.values()).sort((a, b) => a.time - b.time);
-}
-function snapTimelineTime(time, targets, thresholdSecs) {
-  let best = null;
-  let bestDist = thresholdSecs;
-  for (const target of targets) {
-    const d = Math.abs(target.time - time);
-    if (d < bestDist || d === bestDist && best && TYPE_PRIORITY[target.type] < TYPE_PRIORITY[best.type]) {
-      bestDist = d;
-      best = target;
-    }
-  }
-  return best ? { time: best.time, target: best } : { time, target: null };
-}
-function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration2) {
-  if (targets.length === 0) return { start, snapTime: null, snapType: null };
-  const thresholdSecs = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
-  const startSnap = snapTimelineTime(start, targets, thresholdSecs);
-  const endSnap = snapTimelineTime(start + duration, targets, thresholdSecs);
-  const startMoved = startSnap.target !== null;
-  const endMoved = endSnap.target !== null;
-  let candidate = start;
-  let target = null;
-  if (startMoved && (!endMoved || Math.abs(startSnap.time - start) <= Math.abs(endSnap.time - (start + duration)))) {
-    candidate = startSnap.time;
-    target = startSnap.target;
-  } else if (endMoved) {
-    candidate = endSnap.time - duration;
-    target = endSnap.target;
-  }
-  const maxStart = Math.max(0, timelineDuration2 - duration);
-  const roundedCandidate = Math.round(candidate * 1e3) / 1e3;
-  const clamped = Math.max(0, Math.min(maxStart, roundedCandidate));
-  if (target && Math.abs(clamped - roundedCandidate) > 1e-6) target = null;
-  return { start: clamped, snapTime: target?.time ?? null, snapType: target?.type ?? null };
-}
-
 // src/player/components/timelineAuthoredMoveTarget.ts
 function canMoveTimelineElement(element) {
   return getTimelineEditCapabilities({
@@ -13033,6 +13044,7 @@ function useTimelineProviderState({
     scrollRef,
     ppsRef,
     trackOrderRef,
+    elementsRef: timelineElementsRef,
     rowGeometryRef,
     contentOrigin,
     onFileDrop: pinnedOnFileDrop,
@@ -33955,6 +33967,7 @@ var DomEditSaveQueueOpenError = class extends Error {
 function createDomEditSaveQueue(options = {}) {
   const failureThreshold = options.failureThreshold ?? DEFAULT_FAILURE_THRESHOLD;
   let tail = Promise.resolve();
+  let queuedCount = 0;
   let consecutiveFailures = 0;
   let breakerOpen = false;
   let drainError = null;
@@ -33993,13 +34006,14 @@ function createDomEditSaveQueue(options = {}) {
   return {
     enqueue(save) {
       if (breakerOpen) return Promise.reject(new DomEditSaveQueueOpenError());
+      queuedCount += 1;
       const queued = tail.catch(() => void 0).then(() => {
         if (breakerOpen) throw new DomEditSaveQueueOpenError();
         return run(save);
       });
       tail = queued.then(
-        () => void 0,
-        () => void 0
+        () => void (queuedCount -= 1),
+        () => void (queuedCount -= 1)
       );
       return queued;
     },
@@ -34011,6 +34025,7 @@ function createDomEditSaveQueue(options = {}) {
       if (drainError != null) return { status: "failed", error: drainError };
       return { status: "clean" };
     },
+    isIdle: () => queuedCount === 0,
     reset,
     destroy() {
       reset(false);
@@ -45120,12 +45135,13 @@ import { CornersIn, CornersOut, DotsThree, X as X2 } from "@phosphor-icons/react
 import { create as create6 } from "zustand";
 var useDockLayoutStore = create6((set, get) => ({
   controller: null,
+  panels: PANEL_IDS,
   openPanels: new Set(PANEL_IDS),
   visiblePanels: new Set(PANEL_IDS),
   activePanel: null,
   lastActive: {},
   pendingActivation: null,
-  attach: (controller) => set({ controller }),
+  attach: (controller, panels = PANEL_IDS) => set({ controller, panels }),
   detach: () => set({ controller: null, lastActive: {} }),
   sync: (snapshot3) => set((state) => {
     const lastActive = { ...state.lastActive };
@@ -45401,6 +45417,8 @@ var MIN_TIMELINE_H = 100;
 var MIN_SIDE_W = 200;
 var MIN_SIDE_W_FLOOR = 120;
 var DEFAULT_TIMELINE_H = 360;
+var DEFAULT_LEFT = ["compositions", "assets", "code", "catalog"];
+var DEFAULT_RIGHT = ["design", "layers", "renders", "variables"];
 function defaultSideWidths(viewportWidth) {
   const floor = sideMinimumWidth(viewportWidth);
   const left = Math.max(floor, Math.min(384, Math.round(viewportWidth * 0.257)));
@@ -45456,24 +45474,25 @@ function addRegisteredPanel(api, id, position) {
     ...position ? { position } : {}
   });
 }
-function buildEditLayout(api, viewportWidth) {
+function addSideColumn(api, ids, panels, direction) {
+  const [first, ...rest] = ids.filter((id) => panels.includes(id));
+  if (!first) return void 0;
+  addRegisteredPanel(api, first, { referencePanel: "preview", direction });
+  for (const id of rest)
+    addRegisteredPanel(api, id, { referencePanel: first, direction: "within" });
+  api.getPanel(first)?.api.setActive();
+  return first;
+}
+function buildEditLayout(api, viewportWidth, panels = PANEL_IDS) {
   api.clear();
   const widths = defaultSideWidths(viewportWidth);
   addRegisteredPanel(api, "preview");
   addRegisteredPanel(api, "timeline", { referencePanel: "preview", direction: "below" });
-  addRegisteredPanel(api, "compositions", { referencePanel: "preview", direction: "left" });
-  for (const id of ["assets", "code", "catalog"]) {
-    addRegisteredPanel(api, id, { referencePanel: "compositions", direction: "within" });
-  }
-  addRegisteredPanel(api, "design", { referencePanel: "preview", direction: "right" });
-  for (const id of ["layers", "renders", "variables"]) {
-    addRegisteredPanel(api, id, { referencePanel: "design", direction: "within" });
-  }
-  api.getPanel("compositions")?.api.setActive();
-  api.getPanel("design")?.api.setActive();
+  const left = addSideColumn(api, DEFAULT_LEFT, panels, "left");
+  const right = addSideColumn(api, DEFAULT_RIGHT, panels, "right");
   applySideMinimums(api, viewportWidth);
-  api.getPanel("compositions")?.group.api.setSize({ width: widths.left });
-  api.getPanel("design")?.group.api.setSize({ width: widths.right });
+  if (left) api.getPanel(left)?.group.api.setSize({ width: widths.left });
+  if (right) api.getPanel(right)?.group.api.setSize({ width: widths.right });
   api.getPanel("timeline")?.group.api.setSize({ height: DEFAULT_TIMELINE_H });
 }
 
@@ -45518,10 +45537,11 @@ function snapshot(api) {
     groupActivePanels
   };
 }
-function createController(api) {
+function createController(api, options) {
   const open = (id) => {
     if (api.getPanel(id)) return;
-    const { zone, reopen } = PANEL_DEFINITIONS[id];
+    const { zone, reopen: preferred } = PANEL_DEFINITIONS[id];
+    const reopen = zone === "center" || options.panels.includes(preferred.near) ? preferred : { near: "preview", direction: zone };
     const sibling = zone === "center" ? void 0 : panelsInZone(zone).find((other) => other !== id && api.getPanel(other));
     if (sibling) {
       addRegisteredPanel(api, id, { referencePanel: sibling, direction: "within" });
@@ -45543,11 +45563,12 @@ function createController(api) {
     },
     setTitle: (id, title) => api.getPanel(id)?.api.setTitle(title),
     setGroupVisible: (id, visible) => api.getPanel(id)?.group.api.setVisible(visible),
-    reset: () => buildEditLayout(api, window.innerWidth)
+    reset: () => buildEditLayout(api, options.dockWidth(), options.panels)
   };
 }
-function restoreOrBuild(api, projectId) {
-  const stored = readStudioUiPreferences(void 0, projectId).dockLayout;
+function restoreOrBuild(api, projectId, options) {
+  const { dockLayout } = readStudioUiPreferences(void 0, projectId, options.storageKey);
+  const stored = parseDockLayout(dockLayout, options.panels);
   if (stored) {
     try {
       api.fromJSON(stored);
@@ -45555,9 +45576,16 @@ function restoreOrBuild(api, projectId) {
     } catch {
     }
   }
-  buildEditLayout(api, window.innerWidth);
+  buildEditLayout(api, options.dockWidth(), options.panels);
 }
-function Root({ projectId, children }) {
+var windowWidth = () => window.innerWidth;
+function Root({
+  projectId,
+  panels = PANEL_IDS,
+  storageKey,
+  dockWidth = windowWidth,
+  children
+}) {
   const [slots, setSlots] = useState50({});
   const registerSlot = useCallback70((id, element) => {
     setSlots((prev) => {
@@ -45574,17 +45602,18 @@ function Root({ projectId, children }) {
   const onReady = useCallback70(
     ({ api }) => {
       disposeRef.current();
-      restoreOrBuild(api, projectId);
-      applySideMinimums(api);
+      const options = { panels, storageKey, dockWidth };
+      restoreOrBuild(api, projectId, options);
+      applySideMinimums(api, dockWidth());
       const root = api.groups[0]?.element.closest(".hf-dock");
       const disposeAccessibility = root ? installDockAccessibility(api, root) : () => {
       };
       const disposeTabFill = root ? installTabFill(api, root) : () => {
       };
-      const resizeObserver = new ResizeObserver(() => applySideMinimums(api, window.innerWidth));
+      const resizeObserver = new ResizeObserver(() => applySideMinimums(api, dockWidth()));
       if (root) resizeObserver.observe(root);
       const store = useDockLayoutStore.getState();
-      store.attach(createController(api));
+      store.attach(createController(api, options), panels);
       store.sync(snapshot(api));
       const pending2 = store.takePendingActivation();
       if (pending2) api.getPanel(pending2)?.api.setActive();
@@ -45592,7 +45621,7 @@ function Root({ projectId, children }) {
       const persist2 = () => {
         clearTimeout(timer);
         timer = setTimeout(() => {
-          writeStudioUiPreferences({ dockLayout: api.toJSON() }, void 0, projectId);
+          writeStudioUiPreferences({ dockLayout: api.toJSON() }, void 0, projectId, storageKey);
         }, PERSIST_DEBOUNCE_MS2);
       };
       const onDockChange = () => {
@@ -45601,11 +45630,11 @@ function Root({ projectId, children }) {
       };
       const subscriptions = [
         api.onDidAddPanel(() => {
-          applySideMinimums(api);
+          applySideMinimums(api, dockWidth());
           onDockChange();
         }),
         api.onDidMovePanel(() => {
-          applySideMinimums(api);
+          applySideMinimums(api, dockWidth());
           onDockChange();
         }),
         api.onDidRemovePanel(onDockChange),
@@ -45621,7 +45650,7 @@ function Root({ projectId, children }) {
         useDockLayoutStore.getState().detach();
       };
     },
-    [projectId]
+    [projectId, panels, storageKey, dockWidth]
   );
   return /* @__PURE__ */ jsxs71(SlotsContext.Provider, { value: { slots, registerSlot }, children: [
     /* @__PURE__ */ jsx101(
@@ -45656,6 +45685,7 @@ function Panel({ id, title, children }) {
 }
 function WindowMenu() {
   const openPanels = useDockLayoutStore((state) => state.openPanels);
+  const panels = useDockLayoutStore((state) => state.panels);
   const togglePanel = useDockLayoutStore((state) => state.togglePanel);
   const resetLayout = useDockLayoutStore((state) => state.resetLayout);
   const [open, setOpen] = useState50(false);
@@ -45686,7 +45716,7 @@ function WindowMenu() {
         role: "menu",
         className: "absolute right-0 top-8 z-50 w-44 rounded-md border border-neutral-800 bg-neutral-900 py-1 shadow-lg",
         children: [
-          PANEL_IDS.map((id) => /* @__PURE__ */ jsxs71(
+          panels.map((id) => /* @__PURE__ */ jsxs71(
             "button",
             {
               type: "button",
@@ -49064,6 +49094,13 @@ function inspectDrainFailures(results) {
   }
   return { firstFailure };
 }
+function focusedField() {
+  const active = document.activeElement;
+  return active instanceof HTMLElement && active.matches('input, textarea, select, [contenteditable="true"], [role="textbox"]') ? active : null;
+}
+function hasStudioPendingEdits() {
+  return pendingEditPromises.size > 0 || focusedField() !== null;
+}
 function trackStudioPendingEdit(result) {
   if (!result) return void 0;
   const promise = Promise.resolve(result);
@@ -49075,8 +49112,8 @@ function trackStudioPendingEdit(result) {
   return promise;
 }
 async function flushStudioPendingEdits() {
-  const active = document.activeElement;
-  if (active instanceof HTMLElement && active.matches('input, textarea, select, [contenteditable="true"], [role="textbox"]')) {
+  const active = focusedField();
+  if (active) {
     active.blur();
     await Promise.resolve();
     await waitForPostBlurEffects();
@@ -68103,6 +68140,60 @@ function useCaptionSync(projectId) {
 // src/hooks/usePersistentEditHistory.ts
 import { useCallback as useCallback97, useEffect as useEffect105, useMemo as useMemo65, useRef as useRef124, useState as useState104 } from "react";
 var EMPTY3 = { entries: [], back: null, forward: null };
+var OWN_ENTRIES_KEPT = 100;
+function createOwnHistory() {
+  const own = /* @__PURE__ */ new Map();
+  let next = null;
+  let changes = 0;
+  const remember = (id, files) => {
+    const known = own.get(id) ?? {};
+    for (const [path, { before, after }] of Object.entries(files)) {
+      known[path] = { before: known[path]?.before ?? before, after };
+    }
+    own.delete(id);
+    own.set(id, known);
+    if (own.size > OWN_ENTRIES_KEPT) own.delete(own.keys().next().value);
+  };
+  return {
+    remember,
+    overtake: () => {
+      changes += 1;
+      next = null;
+      return changes;
+    },
+    offered: (seen, view) => {
+      if (seen === changes) next = { undo: view.back, redo: view.forward };
+    },
+    changes: () => changes,
+    stepped: (entry2) => {
+      const undone = entry2.undoes ? own.get(entry2.undoes) : void 0;
+      if (!undone) return;
+      const swapped = Object.entries(undone).map(([path, f]) => [
+        path,
+        { before: f.after, after: f.before }
+      ]);
+      remember(entry2.id, Object.fromEntries(swapped));
+    },
+    afterOf: (id) => Object.fromEntries(Object.entries(id && own.get(id) || {}).map(([p, f]) => [p, f.after])),
+    predict: (direction) => {
+      const step = next?.[direction];
+      const files = step ? own.get(step.id) : void 0;
+      const paths = files ? Object.keys(files) : [];
+      if (!files || paths.length !== step.paths.length || !paths.every((p) => step.paths.includes(p)))
+        return null;
+      const restore = paths.map((path) => [
+        path,
+        { previous: files[path].after, restored: files[path].before }
+      ]);
+      return { id: step.id, files: Object.fromEntries(restore) };
+    },
+    clear: () => {
+      own.clear();
+      next = null;
+      changes += 1;
+    }
+  };
+}
 var DEFAULT_COALESCE_MS = 300;
 function historyUrl(projectId, path = "") {
   return `/api/projects/${encodeURIComponent(projectId)}/history${path}`;
@@ -68121,10 +68212,11 @@ async function post(url, body, headers = {}) {
   return { ok: false, status: response.status, error: reply?.error ?? `HTTP ${response.status}` };
 }
 function claimHeld(reply, label) {
-  if (reply.ok) return Boolean(reply.body?.claimed);
+  if (reply.ok)
+    return reply.body?.claimed?.id ?? null;
   if (reply.status !== 404)
     console.error(`"${label}" was not recorded as your edit: ${reply.error}`);
-  return false;
+  return null;
 }
 async function overwroteVersions(files) {
   const pairs = await Promise.all(
@@ -68162,38 +68254,47 @@ function usePersistentEditHistory({ projectId }) {
   const heldClaimRef = useRef124(null);
   const projectIdRef = useRef124(projectId);
   projectIdRef.current = projectId;
+  const [own] = useState104(createOwnHistory);
   const refresh = useCallback97(async () => {
     if (!projectId) return;
+    const seen = own.changes();
     const response = await fetch(historyUrl(projectId)).catch(() => null);
     const next = response?.ok ? await response.json() : EMPTY3;
-    if (projectIdRef.current === projectId) setView(next);
-  }, [projectId]);
+    if (projectIdRef.current !== projectId) return;
+    setView(next);
+    own.offered(seen, next);
+  }, [projectId, own]);
   useEffect105(() => {
     setView(EMPTY3);
     setLoaded(false);
     heldClaimRef.current = null;
+    own.clear();
     void refresh().finally(() => setLoaded(true));
-  }, [refresh]);
+  }, [refresh, own]);
   const recordEdit = useCallback97(
     async ({ label, coalesceKey, coalesceMs, files }) => {
       if (!projectId) return;
       const paths = Object.keys(files);
+      own.overtake();
       const reply = await post(historyUrl(projectId, "/claim"), {
         label,
         paths,
         overwrote: await overwroteVersions(files),
         ...coalesceKey && { coalesceKey, idleMs: coalesceMs ?? DEFAULT_COALESCE_MS }
       });
-      heldClaimRef.current = claimHeld(reply, label) && coalesceKey ? { paths, at: Date.now() } : null;
+      const claimed = claimHeld(reply, label);
+      if (claimed) own.remember(claimed, files);
+      heldClaimRef.current = claimed && coalesceKey ? { paths, at: Date.now() } : null;
       void refresh();
     },
-    [projectId, refresh]
+    [projectId, refresh, own]
   );
   const step = useCallback97(
     async (direction, callbacks) => {
       if (!projectId) return { ok: false, reason: "empty" };
       const next = direction === "undo" ? view.back : view.forward;
       const paths = [.../* @__PURE__ */ new Set([...next?.paths ?? [], ...heldClaimRef.current?.paths ?? []])];
+      own.overtake();
       const run = async () => {
         const previous = await readAll(paths, callbacks.readFile);
         const posted = await post(
@@ -68211,18 +68312,28 @@ function usePersistentEditHistory({ projectId }) {
           return { ok: false, reason: "content-mismatch", paths: files };
         }
         if (!reply.entry) return { ok: false, reason: "empty" };
+        own.stepped(reply.entry);
         const changed = reply.entry.files.map((file) => file.path);
         return {
           ok: true,
           label: reply.entry.label,
+          undoes: reply.entry.undoes,
           paths: changed,
-          files: await restoredFiles(changed, previous, callbacks.readFile)
+          files: await restoredFiles(
+            changed,
+            { ...own.afterOf(reply.entry.undoes), ...previous },
+            callbacks.readFile
+          )
         };
       };
       return callbacks.serialize ? callbacks.serialize(paths, run) : run();
     },
-    [projectId, view, refresh]
+    [projectId, view, refresh, own]
   );
+  const noteOutsideChange = useCallback97(() => {
+    own.overtake();
+    void refresh();
+  }, [own, refresh]);
   const undo = useCallback97((callbacks) => step("undo", callbacks), [step]);
   const redo = useCallback97((callbacks) => step("redo", callbacks), [step]);
   const state = useMemo65(() => {
@@ -68244,7 +68355,9 @@ function usePersistentEditHistory({ projectId }) {
     state,
     recordEdit,
     undo,
-    redo
+    redo,
+    predict: own.predict,
+    noteOutsideChange
   };
 }
 
@@ -69010,6 +69123,7 @@ function useFileManager({
 import { useCallback as useCallback103, useRef as useRef129, useState as useState107 } from "react";
 
 // src/utils/gsapUndoRestore.ts
+import { isCompositionTemplate as isCompositionTemplate2 } from "@hyperframes/parsers/hf-ids";
 function elementIdentityKey(el) {
   const hfId = el.getAttribute("data-hf-id");
   if (hfId) return `hf:${hfId}`;
@@ -69018,9 +69132,9 @@ function elementIdentityKey(el) {
   return null;
 }
 var IDENTITY_SELECTOR = "[id], [data-hf-id]";
-function identityElementMap(doc) {
+function identityElementMap(root) {
   const map = /* @__PURE__ */ new Map();
-  for (const el of doc.querySelectorAll(IDENTITY_SELECTOR)) {
+  for (const el of root.querySelectorAll(IDENTITY_SELECTOR)) {
     const key2 = elementIdentityKey(el);
     if (!key2) continue;
     if (map.has(key2)) return null;
@@ -69028,8 +69142,18 @@ function identityElementMap(doc) {
   }
   return map;
 }
-function normalizeSoftResidual(doc) {
-  for (const el of doc.querySelectorAll(IDENTITY_SELECTOR)) {
+function parseRestoreSource(html2) {
+  const doc = new DOMParser().parseFromString(html2, "text/html");
+  for (const template of Array.from(doc.querySelectorAll("template")).filter(
+    isCompositionTemplate2
+  )) {
+    template.replaceWith(template.content);
+  }
+  return doc;
+}
+function normalizeSoftResidual(root) {
+  const self = root.matches(IDENTITY_SELECTOR) ? [root] : [];
+  for (const el of [...self, ...root.querySelectorAll(IDENTITY_SELECTOR)]) {
     const id = el.getAttribute("id");
     const hfId = el.getAttribute("data-hf-id");
     for (const name of [...el.getAttributeNames()]) {
@@ -69038,7 +69162,7 @@ function normalizeSoftResidual(doc) {
     if (id) el.setAttribute("id", id);
     if (hfId) el.setAttribute("data-hf-id", hfId);
   }
-  for (const script of findGsapScriptElements(doc)) script.textContent = "";
+  for (const script of findGsapScriptElements(root)) script.textContent = "";
 }
 function attributesEqual(a, b) {
   const aNames = a.getAttributeNames();
@@ -69048,15 +69172,7 @@ function attributesEqual(a, b) {
   }
   return true;
 }
-function diffSoftReloadableRestore(previous, restored) {
-  let prevDoc;
-  let nextDoc;
-  try {
-    prevDoc = new DOMParser().parseFromString(previous, "text/html");
-    nextDoc = new DOMParser().parseFromString(restored, "text/html");
-  } catch {
-    return null;
-  }
+function diffRestoreDocs(prevDoc, nextDoc) {
   const prevByKey = identityElementMap(prevDoc);
   const nextByKey = identityElementMap(nextDoc);
   if (!prevByKey || !nextByKey) return null;
@@ -69067,10 +69183,12 @@ function diffSoftReloadableRestore(previous, restored) {
     if (!prevEl || prevEl.tagName !== nextEl.tagName) return null;
     if (!attributesEqual(prevEl, nextEl)) changedElementKeys.push(key2);
   }
-  normalizeSoftResidual(prevDoc);
-  normalizeSoftResidual(nextDoc);
-  if (prevDoc.documentElement.outerHTML !== nextDoc.documentElement.outerHTML) return null;
-  return { changedElementKeys };
+  const [prevRest, nextRest] = [prevDoc, nextDoc].map((doc) => {
+    const root = doc.documentElement.cloneNode(true);
+    normalizeSoftResidual(root);
+    return root.outerHTML;
+  });
+  return prevRest === nextRest ? changedElementKeys : null;
 }
 function syncElementAttributes(target, source) {
   for (const name of [...target.getAttributeNames()]) {
@@ -69089,16 +69207,84 @@ function syncStaleEditMarks(doc, restored) {
     }
   }
 }
-function readGsapScriptTexts(html2) {
-  const doc = new DOMParser().parseFromString(html2, "text/html");
-  return findGsapScriptElements(doc).map((script) => script.textContent ?? "");
-}
-function hasAmbiguousGsapScriptChange(previous, restored) {
-  const previousScripts = readGsapScriptTexts(previous);
-  const restoredScripts = readGsapScriptTexts(restored);
+function hasAmbiguousGsapScriptChange(previousScripts, restoredScripts) {
   if (previousScripts.length <= 1 && restoredScripts.length <= 1) return false;
   return previousScripts.length !== restoredScripts.length || previousScripts.some((script, index) => script !== restoredScripts[index]);
 }
+function restoreScripted(prevDoc, nextDoc, isActive) {
+  const [before, after] = [prevDoc, nextDoc].map(
+    (doc) => findGsapScriptElements(doc).map((script) => script.textContent ?? "")
+  );
+  const scripted = before.length > 0 || after.length > 0;
+  if (scripted && !isActive) return null;
+  return hasAmbiguousGsapScriptChange(before, after) ? null : scripted;
+}
+function liveScopes(doc, path, isActive) {
+  if (isActive) return [doc];
+  return Array.from(doc.querySelectorAll(`[data-composition-file="${CSS.escape(path)}"]`));
+}
+function scopeTargets(scope, keys, restoredByKey) {
+  const liveByKey = identityElementMap(scope);
+  if (!liveByKey) return null;
+  const targets = [];
+  for (const key2 of keys) {
+    const live = liveByKey.get(key2);
+    const restored = restoredByKey.get(key2);
+    if (!live || !restored || live.hasAttribute("data-hf-inner-root")) return null;
+    targets.push({ live, restored });
+  }
+  return targets;
+}
+function fileTargets(doc, path, isActive, file) {
+  const prevDoc = parseRestoreSource(file.previous);
+  const nextDoc = parseRestoreSource(file.restored);
+  const scripted = restoreScripted(prevDoc, nextDoc, isActive);
+  if (scripted === null) return null;
+  const keys = diffRestoreDocs(prevDoc, nextDoc);
+  const restoredByKey = identityElementMap(nextDoc);
+  if (!keys || !restoredByKey) return null;
+  const found = liveScopes(doc, path, isActive).map(
+    (scope) => scopeTargets(scope, keys, restoredByKey)
+  );
+  if (!found.length || found.includes(null)) return null;
+  return { targets: found.flat(), scripted };
+}
+function planRestoreTargets(doc, activeDocPath, files) {
+  const plan = { targets: [], scripted: false };
+  for (const [path, file] of Object.entries(files)) {
+    const found = fileTargets(doc, path, path === activeDocPath, file);
+    if (!found) return null;
+    plan.targets.push(...found.targets);
+    plan.scripted ||= found.scripted;
+  }
+  return plan;
+}
+function finalizeInPlace(iframe, win, currentTime) {
+  if (applySoftReloadFinalization(iframe, currentTime)) return true;
+  try {
+    win.__player?.seek?.(currentTime);
+    win.__hfStudioManualEditsApply?.();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function showRestoreInPlace(iframe, activeCompPath, files, currentTime) {
+  const doc = iframe?.contentDocument;
+  const win = iframe?.contentWindow;
+  const plan = doc && win ? planRestoreTargets(doc, activeCompPath ?? "index.html", files) : null;
+  if (!iframe || !win || !plan || plan.scripted) return null;
+  const before = plan.targets.map(({ live }) => [live, live.cloneNode(false)]);
+  for (const { live, restored } of plan.targets) syncElementAttributes(live, restored);
+  const putBack = (time) => {
+    if (iframe.contentDocument !== doc) return false;
+    for (const [live, attributes] of before) syncElementAttributes(live, attributes);
+    return finalizeInPlace(iframe, win, time);
+  };
+  if (finalizeInPlace(iframe, win, currentTime)) return putBack;
+  putBack(currentTime);
+  return null;
+}
 function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, reload) {
   const activeDocPath = activeCompPath ?? "index.html";
   const paths = files ? Object.keys(files) : [];
@@ -69106,51 +69292,23 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
     markScenesStale(iframe, paths);
     reload();
   };
-  if (!iframe || !files || paths.length !== 1 || paths[0] !== activeDocPath) {
-    reloadPreview();
-    return "full";
-  }
-  const doc = iframe.contentDocument;
-  const win = iframe.contentWindow;
-  if (!doc || !win) {
-    reloadPreview();
-    return "full";
-  }
-  const { previous, restored } = files[activeDocPath];
-  const diff = diffSoftReloadableRestore(previous, restored);
-  if (!diff) {
-    reloadPreview();
-    return "full";
-  }
-  if (hasAmbiguousGsapScriptChange(previous, restored)) {
-    reloadPreview();
-    return "full";
-  }
-  const liveByKey = identityElementMap(doc);
-  const restoredByKey = identityElementMap(new DOMParser().parseFromString(restored, "text/html"));
-  if (!liveByKey || !restoredByKey) {
+  const doc = iframe?.contentDocument;
+  const win = iframe?.contentWindow;
+  const plan = doc && files && win ? planRestoreTargets(doc, activeDocPath, files) : null;
+  if (!iframe || !doc || !files || !win || !plan) {
     reloadPreview();
     return "full";
   }
-  const changedTargets = [];
-  for (const key2 of diff.changedElementKeys) {
-    const liveEl = liveByKey.get(key2);
-    const restoredEl = restoredByKey.get(key2);
-    if (!liveEl || !restoredEl) {
-      reloadPreview();
-      return "full";
-    }
-    changedTargets.push({ live: liveEl, restored: restoredEl });
-  }
-  for (const target of changedTargets) syncElementAttributes(target.live, target.restored);
-  const restoredScript = extractGsapScriptText(restored);
-  const previousScript = extractGsapScriptText(previous);
+  for (const target of plan.targets) syncElementAttributes(target.live, target.restored);
+  const active = files[activeDocPath];
+  const restoredScript = active ? extractGsapScriptText(active.restored) : null;
+  const previousScript = active ? extractGsapScriptText(active.previous) : null;
   if (restoredScript && restoredScript !== previousScript) {
-    syncStaleEditMarks(doc, restored);
+    syncStaleEditMarks(doc, active.restored);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
-      authoredHtml: restored
+      authoredHtml: active.restored
     });
     if (result === "cannot-soft-reload") {
       reloadPreview();
@@ -69158,15 +69316,9 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
     }
     return "soft";
   }
-  if (applySoftReloadFinalization(iframe, currentTime)) return "soft";
-  try {
-    win.__player?.seek?.(currentTime);
-    win.__hfStudioManualEditsApply?.();
-  } catch {
-    reloadPreview();
-    return "full";
-  }
-  return "soft";
+  if (finalizeInPlace(iframe, win, currentTime)) return "soft";
+  reloadPreview();
+  return "full";
 }
 
 // src/player/lib/automationStoreSync.ts
@@ -69350,6 +69502,20 @@ function usePreviewPersistence({
     },
     [previewIframeRef, activeCompPathRef, reloadPreview]
   );
+  const showHistoryRestoreNow = useCallback103(
+    (files) => {
+      if (!domEditSaveQueueRef.current?.isIdle() || hasStudioPendingEdits()) return null;
+      const iframe = previewIframeRef.current;
+      const now2 = () => usePlayerStore.getState().currentTime;
+      const putBack = showRestoreInPlace(iframe, activeCompPathRef.current, files, now2());
+      if (!putBack) return null;
+      return () => {
+        if (putBack(now2())) syncStoredAutomationFromPreview(iframe?.contentDocument ?? null);
+        else void syncHistoryPreviewAfterApply({ paths: Object.keys(files) });
+      };
+    },
+    [previewIframeRef, activeCompPathRef, syncHistoryPreviewAfterApply]
+  );
   useMountEffect(() => {
     void clearLegacyStudioMotionFile(_readOptionalProjectFile, _writeProjectFile);
   });
@@ -69364,7 +69530,8 @@ function usePreviewPersistence({
     resetDomEditSaveQueueBreaker,
     applyCurrentStudioManualEditsToPreview,
     applyStudioManualEditsToPreview,
-    syncHistoryPreviewAfterApply
+    syncHistoryPreviewAfterApply,
+    showHistoryRestoreNow
   };
 }
 
@@ -79630,14 +79797,18 @@ function useStudioExternalFileChanges({
   fileManager,
   previewPersistence,
   pendingTimelineEditPathRef,
-  reloadPreview
+  reloadPreview,
+  onOutsideChange
 }) {
   const { flushPendingSourceSave, discardPendingSourceSave } = fileManager;
   const { drainPendingDomEditSaves, resetDomEditSaveQueueBreaker } = previewPersistence;
   const bumpThumbnailRevisions = usePlayerStore((state) => state.bumpThumbnailRevisions);
   const onAcceptedPersistedFileChange = useCallback143(
-    (_path, affectedCompositions) => bumpThumbnailRevisions(affectedCompositions),
-    [bumpThumbnailRevisions]
+    (_path, affectedCompositions) => {
+      onOutsideChange?.();
+      bumpThumbnailRevisions(affectedCompositions);
+    },
+    [bumpThumbnailRevisions, onOutsideChange]
   );
   const drainPendingChanges = useCallback143(async () => {
     const source = await flushPendingSourceSave();
@@ -80204,6 +80375,7 @@ function useEditHistoryActions({
   writeProjectFile,
   showToast,
   syncHistoryPreviewAfterApply,
+  showHistoryRestoreNow,
   waitForPendingDomEditSaves,
   onAfterUndoRedo,
   activeCompPath,
@@ -80220,11 +80392,20 @@ function useEditHistoryActions({
   const apply = useCallback145(
     async (direction) => {
       const noun = direction === "undo" ? "Undo" : "Redo";
-      await waitForPendingDomEditSaves();
-      const result = await editHistory[direction]({
-        readFile: readHistoryFile,
-        serialize: serializeHistoryFiles
-      });
+      const predicted = editHistory.predict?.(direction) ?? null;
+      const putBack = predicted ? showHistoryRestoreNow?.(predicted.files) ?? null : null;
+      let result = { ok: false, reason: "failed" };
+      let serverSteppedShown = false;
+      try {
+        await waitForPendingDomEditSaves();
+        result = await editHistory[direction]({
+          readFile: readHistoryFile,
+          serialize: serializeHistoryFiles
+        });
+        serverSteppedShown = Boolean(putBack && result.ok && result.label) && result.undoes === predicted?.id;
+      } finally {
+        if (putBack && !serverSteppedShown) putBack();
+      }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
           `Can't ${direction}: ${result.paths?.join(", ")} changed since that edit.`,
@@ -80237,7 +80418,8 @@ function useEditHistoryActions({
         return;
       }
       if (result.ok && result.label) {
-        const restore = { paths: result.paths, files: result.files };
+        const files = serverSteppedShown ? fromShown(result.files, predicted.files) : result.files;
+        const restore = { paths: result.paths, files };
         onAfterUndoRedo?.(restore);
         if (activeCompPath && result.paths?.includes(activeCompPath)) {
           forceReloadSdkSession?.();
@@ -80251,6 +80433,7 @@ function useEditHistoryActions({
       readHistoryFile,
       showToast,
       syncHistoryPreviewAfterApply,
+      showHistoryRestoreNow,
       waitForPendingDomEditSaves,
       serializeHistoryFiles,
       onAfterUndoRedo,
@@ -80262,6 +80445,15 @@ function useEditHistoryActions({
   const redo = useCallback145(() => apply("redo"), [apply]);
   return useMemo71(() => ({ undo, redo }), [undo, redo]);
 }
+function fromShown(files, shown2) {
+  if (!files) return files;
+  return Object.fromEntries(
+    Object.entries(files).map(([path, f]) => [
+      path,
+      { previous: shown2[path]?.restored ?? f.previous, restored: f.restored }
+    ])
+  );
+}
 
 // src/hooks/useAppHotkeys.ts
 function iframeContentWindow(iframe) {
@@ -80277,9 +80469,9 @@ function safeAddListener(t, type, h, capture = false) {
   } catch {
   }
 }
-function safeRemoveListener(t, type, h) {
+function safeRemoveListener(t, type, h, capture = false) {
   try {
-    t?.removeEventListener(type, h);
+    t?.removeEventListener(type, h, capture);
   } catch {
   }
 }
@@ -80306,6 +80498,7 @@ function useAppHotkeys({
   writeProjectFile,
   showToast,
   syncHistoryPreviewAfterApply,
+  showHistoryRestoreNow,
   waitForPendingDomEditSaves,
   handleCopy: handleCopy2,
   handlePaste: handlePaste2,
@@ -80329,6 +80522,7 @@ function useAppHotkeys({
     writeProjectFile,
     showToast,
     syncHistoryPreviewAfterApply,
+    showHistoryRestoreNow,
     waitForPendingDomEditSaves,
     onAfterUndoRedo,
     activeCompPath,
@@ -80385,38 +80579,17 @@ function useAppHotkeys({
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
-  const handleHistoryHotkey = useCallback146((event) => {
-    if (!(event.metaKey || event.ctrlKey) || shouldIgnoreHistoryShortcut(event.target)) return;
-    handleUndoRedoKey(
-      event,
-      () => void cbRef.current.handleUndo(),
-      () => void cbRef.current.handleRedo()
-    );
-  }, []);
   const syncPreviewHotkeys = useCallback146(
     (iframe) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
       const win = iframeContentWindow(iframe);
-      let doc = null;
-      try {
-        doc = iframe?.contentDocument ?? null;
-      } catch {
-        doc = null;
-      }
-      if (!win && !doc) return;
-      const handler = handleHistoryHotkey;
+      if (!win) return;
       const appHandler = handleAppKeyDown;
-      safeAddListener(win, "keydown", handler, true);
       safeAddListener(win, "keydown", appHandler, true);
-      doc?.addEventListener("keydown", handleHistoryHotkey, true);
-      previewHistoryCleanupRef.current = () => {
-        safeRemoveListener(win, "keydown", handler);
-        safeRemoveListener(win, "keydown", appHandler);
-        doc?.removeEventListener("keydown", handleHistoryHotkey, true);
-      };
+      previewHistoryCleanupRef.current = () => safeRemoveListener(win, "keydown", appHandler, true);
     },
-    [handleAppKeyDown, handleHistoryHotkey]
+    [handleAppKeyDown]
   );
   useEffect121(
     () => () => {
@@ -91802,7 +91975,8 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     fileManager,
     previewPersistence,
     pendingTimelineEditPathRef,
-    reloadPreview
+    reloadPreview,
+    onOutsideChange: editHistory.noteOutsideChange
   });
   const invalidateGsapCacheRef = useRef181(() => {
   });
@@ -91904,6 +92078,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     writeProjectFile: fileManager.writeProjectFile,
     showToast,
     syncHistoryPreviewAfterApply: previewPersistence.syncHistoryPreviewAfterApply,
+    showHistoryRestoreNow: previewPersistence.showHistoryRestoreNow,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
     handleCopy: handleCopy2,
     handlePaste: handlePaste2,
@@ -92792,6 +92967,7 @@ export {
   ConnectedDomEditOverlay,
   ContextMenu,
   DEFAULT_SHORTCUT_SECTIONS,
+  Dock,
   DomEditOverlay,
   DomEditProvider,
   EditorShell,
@@ -92887,6 +93063,7 @@ export {
   snapEngagedForTravel,
   useClipboard,
   useCompositionStack,
+  useDockLayoutStore,
   useDomEditSelectionContext,
   useDomEditSession,
   useDomGeometryCommit,