@hyperframes/studio 0.7.55 → 0.7.57

package/src/hooks/usePersistentEditHistory.ts

@@ -7,8 +7,10 @@ import {
   redoEditHistory,
   undoEditHistory,
   type BuildEditHistoryEntryInput,
+  type EditHistoryEntry,
   type EditHistoryKind,
   type EditHistoryState,
+  type EditHistoryTransitionResult,
 } from "../utils/editHistory";
 import {
   createIndexedDbEditHistoryStorage,
@@ -21,6 +23,7 @@ interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
   coalesceKey?: string;
+  coalesceMs?: number;
   files: BuildEditHistoryEntryInput["files"];
 }
 
@@ -35,11 +38,24 @@ interface UsePersistentEditHistoryOptions {
   now?: () => number;
 }
 
+/**
+ * Per-file content the restore just applied. `restored` is the bytes written to
+ * disk (the undo/redo target); `previous` is what was on disk immediately before
+ * (the current live preview state). The undo preview-sync diffs these to decide
+ * whether the restore is soft-reloadable (attributes/style/GSAP-script only) or
+ * needs a full iframe reload.
+ */
+interface ApplyRestoredFile {
+  previous: string;
+  restored: string;
+}
+
 interface ApplyResult {
   ok: boolean;
   reason?: "empty" | "content-mismatch";
   label?: string;
   paths?: string[];
+  files?: Record<string, ApplyRestoredFile>;
 }
 
 interface PersistentEditHistoryStoreOptions {
@@ -55,6 +71,18 @@ type EditHistoryMutation<T> = (state: EditHistoryState) => Promise<{
   result: T;
 }>;
 
+/** Pair the just-written (`restored`) bytes with the pre-write (`previous`) bytes per path. */
+function restoredFilesMap(
+  filesToWrite: Record<string, string>,
+  currentFiles: Record<string, string>,
+): Record<string, ApplyRestoredFile> {
+  const out: Record<string, ApplyRestoredFile> = {};
+  for (const [path, restored] of Object.entries(filesToWrite)) {
+    out[path] = { previous: currentFiles[path] ?? "", restored };
+  }
+  return out;
+}
+
 function createEntryId(now: number): string {
   return `edit-${now.toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
@@ -120,6 +148,52 @@ async function writeFilesWithRollback({
   }
 }
 
+/**
+ * Apply one undo/redo step: read current on-disk hashes, run the direction's
+ * transition, write the restored files with rollback, and shape the ApplyResult.
+ * `entry` is the stack top used to know which paths to hash before applying.
+ */
+async function applyHistoryStep(
+  currentState: EditHistoryState,
+  entry: EditHistoryEntry | undefined,
+  transition: (
+    state: EditHistoryState,
+    currentHashes: Record<string, string>,
+    now: number,
+  ) => EditHistoryTransitionResult,
+  now: () => number,
+  callbacks: ApplyCallbacks,
+): Promise<{ state: EditHistoryState; result: ApplyResult }> {
+  if (!entry) {
+    return { state: currentState, result: { ok: false, reason: "empty" } };
+  }
+  const { currentFiles, currentHashes } = await readCurrentFileHashes(
+    Object.keys(entry.files),
+    callbacks.readFile,
+  );
+  const result = transition(currentState, currentHashes, now());
+  if (!result.ok) {
+    return {
+      state: currentState,
+      result: { ok: false, reason: result.reason },
+    };
+  }
+  await writeFilesWithRollback({
+    files: result.filesToWrite,
+    rollbackFiles: currentFiles,
+    writeFile: callbacks.writeFile,
+  });
+  return {
+    state: result.state,
+    result: {
+      ok: true,
+      label: result.entry.label,
+      paths: Object.keys(result.entry.files),
+      files: restoredFilesMap(result.filesToWrite, currentFiles),
+    },
+  };
+}
+
 export function createPersistentEditHistoryStore({
   projectId,
   storage,
@@ -171,66 +245,26 @@ export function createPersistentEditHistoryStore({
       });
     },
     async undo(callbacks: ApplyCallbacks): Promise<ApplyResult> {
-      return mutate<ApplyResult>(async (currentState) => {
-        const entry = currentState.undo[currentState.undo.length - 1];
-        if (!entry) {
-          return {
-            state: currentState,
-            result: { ok: false, reason: "empty" },
-          };
-        }
-        const { currentFiles, currentHashes } = await readCurrentFileHashes(
-          Object.keys(entry.files),
-          callbacks.readFile,
-        );
-        const result = undoEditHistory(currentState, currentHashes, now());
-        if (!result.ok) {
-          return {
-            state: currentState,
-            result: { ok: false, reason: result.reason },
-          };
-        }
-        await writeFilesWithRollback({
-          files: result.filesToWrite,
-          rollbackFiles: currentFiles,
-          writeFile: callbacks.writeFile,
-        });
-        return {
-          state: result.state,
-          result: { ok: true, label: result.entry.label, paths: Object.keys(result.entry.files) },
-        };
-      });
+      return mutate<ApplyResult>((currentState) =>
+        applyHistoryStep(
+          currentState,
+          currentState.undo[currentState.undo.length - 1],
+          undoEditHistory,
+          now,
+          callbacks,
+        ),
+      );
     },
     async redo(callbacks: ApplyCallbacks): Promise<ApplyResult> {
-      return mutate<ApplyResult>(async (currentState) => {
-        const entry = currentState.redo[currentState.redo.length - 1];
-        if (!entry) {
-          return {
-            state: currentState,
-            result: { ok: false, reason: "empty" },
-          };
-        }
-        const { currentFiles, currentHashes } = await readCurrentFileHashes(
-          Object.keys(entry.files),
-          callbacks.readFile,
-        );
-        const result = redoEditHistory(currentState, currentHashes, now());
-        if (!result.ok) {
-          return {
-            state: currentState,
-            result: { ok: false, reason: result.reason },
-          };
-        }
-        await writeFilesWithRollback({
-          files: result.filesToWrite,
-          rollbackFiles: currentFiles,
-          writeFile: callbacks.writeFile,
-        });
-        return {
-          state: result.state,
-          result: { ok: true, label: result.entry.label, paths: Object.keys(result.entry.files) },
-        };
-      });
+      return mutate<ApplyResult>((currentState) =>
+        applyHistoryStep(
+          currentState,
+          currentState.redo[currentState.redo.length - 1],
+          redoEditHistory,
+          now,
+          callbacks,
+        ),
+      );
     },
   };
 }

package/src/hooks/usePreviewPersistence.ts

@@ -10,6 +10,14 @@ import type { EditHistoryKind } from "../utils/editHistory";
 import { createDomEditSaveQueue } from "../utils/domEditSaveQueue";
 import { flushStudioPendingEdits } from "../utils/studioPendingEdits";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { applyUndoRestoreToPreview, type UndoRestoreFile } from "../utils/gsapSoftReload";
+import { usePlayerStore } from "../player";
+
+/** The restore payload the undo/redo preview-sync consumes (from the history store). */
+interface HistoryPreviewRestore {
+  paths?: string[];
+  files?: Record<string, UndoRestoreFile>;
+}
 
 // ── Types ──
 
@@ -105,13 +113,12 @@ export function usePreviewPersistence({
   writeProjectFile: _writeProjectFile,
   recordEdit: _recordEdit,
   previewIframeRef,
-  activeCompPathRef: _activeCompPathRef,
+  activeCompPathRef,
   domEditSaveTimestampRef,
   reloadPreview,
   pendingTimelineEditPathRef,
 }: UsePreviewPersistenceParams) {
   void _recordEdit;
-  void _activeCompPathRef;
 
   const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState<string | null>(null);
 
@@ -190,12 +197,23 @@ export function usePreviewPersistence({
   // ── Sync preview after undo/redo ──
 
   const syncHistoryPreviewAfterApply = useCallback(
-    async (_paths: string[] | undefined) => {
-      // Motion data is now stored in HTML attributes — any undo/redo that touches HTML
-      // files triggers a full reload which picks up the changes automatically.
-      reloadPreview();
+    async (restore: HistoryPreviewRestore) => {
+      // Prefer an in-place soft reload for a soft-reloadable restore (the change
+      // is confined to the active comp's element attributes / inline-style and/or
+      // its GSAP script) — a full iframe remount blanks the frame black and
+      // re-flashes the WebGL context. applyUndoRestoreToPreview syncs the reverted
+      // attributes onto the live DOM and re-runs the timeline at the SAME playhead,
+      // falling back to reloadPreview for anything structural (split/delete undo),
+      // multi-file, sub-comp, or a permanent soft-reload failure.
+      applyUndoRestoreToPreview(
+        previewIframeRef.current,
+        activeCompPathRef.current,
+        restore.files,
+        usePlayerStore.getState().currentTime,
+        reloadPreview,
+      );
     },
-    [reloadPreview],
+    [previewIframeRef, activeCompPathRef, reloadPreview],
   );
 
   // ── Migrate legacy studio-motion.json ──

package/src/hooks/useRazorSplit.history.test.tsx

@@ -1,20 +1,25 @@
 // @vitest-environment happy-dom
 
-import React, { act } from "react";
-import { createRoot } from "react-dom/client";
+import { act } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ensureHfIds } from "@hyperframes/parsers/hf-ids";
+import { splitElementInHtml } from "@hyperframes/studio-server/source-mutation";
 import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
 import { useRazorSplit } from "./useRazorSplit";
 import { createPersistentEditHistoryStore } from "./usePersistentEditHistory";
 import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
-import { createEmptyEditHistory } from "../utils/editHistory";
+import {
+  createEmptyEditHistory,
+  hashEditHistoryContent,
+  undoEditHistory,
+} from "../utils/editHistory";
+import { createSplitFetchMock, mountProbe } from "./useRazorSplit.testHelpers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
-const ORIGINAL = `<div class="clip" id="clip1" data-start="0" data-duration="4">hi</div>`;
-const SPLIT =
-  `<div class="clip" id="clip1" data-start="0" data-duration="2">hi</div>` +
-  `<div class="clip" id="clip1-split" data-start="2" data-duration="2">hi</div>`;
+const ORIGINAL = `<div class="clip" id="clip1" data-start="0" data-duration="4" data-hf-id="hf-clip">hi</div>`;
+const SPLIT = splitElementInHtml(ORIGINAL, { id: "clip1" }, 2, "clip1-split").html;
 
 const element: TimelineElement = {
   id: "clip1",
@@ -28,13 +33,15 @@ const element: TimelineElement = {
 };
 
 type Split = (element: TimelineElement, splitTime: number) => Promise<void>;
+type SplitAll = (splitTime: number) => Promise<void>;
 
 interface Harness {
   disk: Record<string, string>;
   store: ReturnType<typeof createPersistentEditHistoryStore>;
   splitRef: { current: Split | undefined };
-  root: ReturnType<typeof createRoot>;
+  root: ReturnType<typeof mountProbe>;
   expected: string;
+  previewWrites: string[];
 }
 
 const SPLIT_GSAP = SPLIT.replace(
@@ -43,9 +50,10 @@ const SPLIT_GSAP = SPLIT.replace(
     'tl.set("#clip1-split",{x:0},2);window.__timelines["c"]=tl;</script>',
 );
 
-function mountRazorSplit(opts: { gsap?: boolean } = {}): Harness {
+function mountRazorSplit(opts: { gsap?: boolean; previewStamp?: boolean } = {}): Harness {
   const disk: Record<string, string> = { "index.html": ORIGINAL };
   const finalContent = opts.gsap ? SPLIT_GSAP : SPLIT;
+  const previewWrites: string[] = [];
 
   const storage = createMemoryEditHistoryStorage();
   const store = createPersistentEditHistoryStore({
@@ -109,23 +117,28 @@ function mountRazorSplit(opts: { gsap?: boolean } = {}): Harness {
       },
       recordEdit: store.recordEdit,
       domEditSaveTimestampRef: { current: 0 },
-      reloadPreview: () => {},
+      reloadPreview: () => {
+        if (!opts.previewStamp) return;
+        const stamped = ensureHfIds(disk["index.html"]);
+        const idsBefore = (disk["index.html"].match(/\bdata-hf-id=/g) ?? []).length;
+        const idsAfter = (stamped.match(/\bdata-hf-id=/g) ?? []).length;
+        if (idsAfter > idsBefore) {
+          disk["index.html"] = stamped;
+          previewWrites.push(stamped);
+        }
+      },
+      forceReloadSdkSession: () => {},
     });
     splitRef.current = handleRazorSplit;
     return null;
   }
 
-  const host = document.createElement("div");
-  document.body.append(host);
-  const root = createRoot(host);
-  act(() => {
-    root.render(<Component />);
-  });
+  const root = mountProbe(Component);
 
-  return { disk, store, splitRef, root, expected: finalContent };
+  return { disk, store, splitRef, root, expected: finalContent, previewWrites };
 }
 
-async function undoViaDisk(harness: Harness) {
+async function undoViaDisk(harness: Pick<Harness, "disk" | "store">) {
   return harness.store.undo({
     readFile: async (path) => harness.disk[path],
     writeFile: async (path, content) => {
@@ -140,6 +153,26 @@ afterEach(() => {
 });
 
 describe("useRazorSplit — split is undoable via edit history", () => {
+  it("keeps history aligned when preview reload checks hf-id persistence", async () => {
+    const harness = mountRazorSplit({ previewStamp: true });
+
+    await act(async () => {
+      await harness.splitRef.current!(element, 2);
+    });
+
+    const snapshot = harness.store.snapshot().state;
+    const entry = snapshot.undo.at(-1)!;
+    const currentHash = hashEditHistoryContent(harness.disk["index.html"]);
+    expect(entry.files["index.html"].afterHash).toBe(currentHash);
+
+    const undo = undoEditHistory(snapshot, { "index.html": currentHash }, 2000);
+    expect(undo.ok).toBe(true);
+    expect(undo.filesToWrite).toEqual({ "index.html": ORIGINAL });
+    expect(harness.previewWrites).toHaveLength(0);
+
+    act(() => harness.root.unmount());
+  });
+
   for (const gsap of [false, true]) {
     describe(gsap ? "with GSAP rewrite" : "plain HTML split", () => {
       let harness: Harness;
@@ -171,3 +204,100 @@ describe("useRazorSplit — split is undoable via edit history", () => {
     });
   }
 });
+
+const BATCH_ORIGINALS = {
+  "index.html": `<div class="clip" id="clip1" data-start="0" data-duration="4">one</div>`,
+  "scenes/two.html": `<div class="clip" id="clip2" data-start="0" data-duration="4">two</div>`,
+};
+
+const batchElements: TimelineElement[] = [
+  element,
+  {
+    ...element,
+    id: "clip2",
+    domId: "clip2",
+    sourceFile: "scenes/two.html",
+    track: 1,
+  },
+];
+
+interface SplitAllHarness {
+  disk: Record<string, string>;
+  store: ReturnType<typeof createPersistentEditHistoryStore>;
+  splitAllRef: { current: SplitAll | undefined };
+  root: ReturnType<typeof mountProbe>;
+}
+
+function mountRazorSplitAll(failOnSplit?: number): SplitAllHarness {
+  const disk: Record<string, string> = { ...BATCH_ORIGINALS };
+  const store = createPersistentEditHistoryStore({
+    projectId: "p1",
+    storage: createMemoryEditHistoryStorage(),
+    initialState: createEmptyEditHistory(),
+    now: () => 1000,
+    onChange: () => {},
+  });
+  let splitCount = 0;
+
+  vi.stubGlobal(
+    "fetch",
+    createSplitFetchMock(disk, () => {
+      splitCount++;
+      if (splitCount === failOnSplit) throw new Error("simulated split failure");
+    }),
+  );
+
+  const splitAllRef: { current: SplitAll | undefined } = { current: undefined };
+  function Component() {
+    const { handleRazorSplitAll } = useRazorSplit({
+      projectId: "p1",
+      activeCompPath: "index.html",
+      showToast: () => {},
+      writeProjectFile: async (path, content) => {
+        disk[path] = content;
+      },
+      recordEdit: store.recordEdit,
+      domEditSaveTimestampRef: { current: 0 },
+      reloadPreview: () => {},
+    });
+    splitAllRef.current = handleRazorSplitAll;
+    return null;
+  }
+
+  const root = mountProbe(Component);
+  usePlayerStore.setState({ elements: batchElements });
+  return { disk, store, splitAllRef, root };
+}
+
+describe("useRazorSplit — split-all batch history", () => {
+  afterEach(() => {
+    usePlayerStore.setState({ elements: [] });
+  });
+
+  async function runSplitAll(failOnSplit?: number) {
+    const harness = mountRazorSplitAll(failOnSplit);
+    await act(async () => {
+      await harness.splitAllRef.current!(2);
+    });
+    return harness;
+  }
+
+  it("records one undo entry that restores every split file", async () => {
+    const harness = await runSplitAll();
+
+    expect(harness.store.snapshot().canUndo).toBe(true);
+    const result = await undoViaDisk(harness);
+    expect(result.ok).toBe(true);
+    expect(harness.disk).toEqual(BATCH_ORIGINALS);
+    expect(harness.store.snapshot().canUndo).toBe(false);
+    act(() => harness.root.unmount());
+  });
+
+  it("restores completed writes and records no undo when a later split fails", async () => {
+    const harness = await runSplitAll(2);
+
+    expect(harness.disk).toEqual(BATCH_ORIGINALS);
+    expect(harness.store.snapshot().canUndo).toBe(false);
+    act(() => harness.root.unmount());
+  });
+});