@hyperframes/studio 0.7.54 → 0.7.56

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

@@ -0,0 +1,303 @@
+// @vitest-environment happy-dom
+
+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,
+  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" data-hf-id="hf-clip">hi</div>`;
+const SPLIT = splitElementInHtml(ORIGINAL, { id: "clip1" }, 2, "clip1-split").html;
+
+const element: TimelineElement = {
+  id: "clip1",
+  tag: "div",
+  start: 0,
+  duration: 4,
+  track: 0,
+  domId: "clip1",
+  sourceFile: "index.html",
+  timingSource: "authored",
+};
+
+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 mountProbe>;
+  expected: string;
+  previewWrites: string[];
+}
+
+const SPLIT_GSAP = SPLIT.replace(
+  "</div>",
+  "</div><script>window.__timelines={};const tl=gsap.timeline({paused:true});" +
+    'tl.set("#clip1-split",{x:0},2);window.__timelines["c"]=tl;</script>',
+);
+
+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({
+    projectId: "p1",
+    storage,
+    initialState: createEmptyEditHistory(),
+    now: (() => {
+      let t = 1000;
+      return () => (t += 10);
+    })(),
+    onChange: () => {},
+  });
+
+  // Faithful stand-in for the studio-server file-mutation endpoints: the server
+  // writes the split to disk itself, then returns the patched content.
+  const fetchMock = vi.fn(async (url: string, init?: RequestInit) => {
+    const u = String(url);
+    if (u.includes("/gsap-mutations/")) {
+      if (opts.gsap) {
+        // Mirror the server: rewrites the GSAP script for the new id, writes to
+        // disk, returns the final content.
+        disk["index.html"] = SPLIT_GSAP;
+        return new Response(JSON.stringify({ ok: true, after: SPLIT_GSAP }), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        });
+      }
+      // The fixture has no GSAP script — mirror the server's 400 response.
+      return new Response(JSON.stringify({ error: "no GSAP script found in file" }), {
+        status: 400,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    if (u.includes("/file-mutations/split-element/")) {
+      disk["index.html"] = SPLIT;
+      return new Response(
+        JSON.stringify({ ok: true, changed: true, content: SPLIT, newId: "clip1-split" }),
+        { status: 200, headers: { "Content-Type": "application/json" } },
+      );
+    }
+    if (u.includes("/files/")) {
+      return new Response(JSON.stringify({ content: disk["index.html"] }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    void init;
+    throw new Error(`unexpected fetch: ${u}`);
+  });
+  vi.stubGlobal("fetch", fetchMock);
+
+  const splitRef: { current: Split | undefined } = { current: undefined };
+
+  function Component() {
+    const { handleRazorSplit } = useRazorSplit({
+      projectId: "p1",
+      activeCompPath: "index.html",
+      showToast: () => {},
+      writeProjectFile: async (path, content) => {
+        disk[path] = content;
+      },
+      recordEdit: store.recordEdit,
+      domEditSaveTimestampRef: { current: 0 },
+      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 root = mountProbe(Component);
+
+  return { disk, store, splitRef, root, expected: finalContent, previewWrites };
+}
+
+async function undoViaDisk(harness: Pick<Harness, "disk" | "store">) {
+  return harness.store.undo({
+    readFile: async (path) => harness.disk[path],
+    writeFile: async (path, content) => {
+      harness.disk[path] = content;
+    },
+  });
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+});
+
+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;
+      beforeEach(() => {
+        harness = mountRazorSplit({ gsap });
+      });
+      afterEach(() => {
+        act(() => harness.root.unmount());
+      });
+
+      it("records a single 'Split timeline clip' history entry that undo restores", async () => {
+        await act(async () => {
+          await harness.splitRef.current!(element, 2);
+        });
+
+        // The split reached disk.
+        expect(harness.disk["index.html"]).toBe(harness.expected);
+
+        // The split must be the top of the undo stack — not a prior/other entry.
+        expect(harness.store.snapshot().canUndo).toBe(true);
+        expect(harness.store.snapshot().undoLabel).toBe("Split timeline clip");
+
+        // Undo restores the exact pre-split file.
+        const result = await undoViaDisk(harness);
+        expect(result.ok).toBe(true);
+        expect(result.label).toBe("Split timeline clip");
+        expect(harness.disk["index.html"]).toBe(ORIGINAL);
+      });
+    });
+  }
+});
+
+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());
+  });
+});

package/src/hooks/useRazorSplit.test.ts

@@ -0,0 +1,269 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
+import { useRazorSplit } from "./useRazorSplit";
+import { createPersistentEditHistoryStore } from "./usePersistentEditHistory";
+import { createEmptyEditHistory } from "../utils/editHistory";
+import type { EditHistoryStorageAdapter } from "../utils/editHistoryStorage";
+import { createSplitFetchMock, mountProbe } from "./useRazorSplit.testHelpers";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const ROOT_FILE = "index.html";
+const SUBCOMP_FILE = "scenes/intro.html";
+
+// A root-level clip lives in index.html and is authored in local time already.
+const rootElement: TimelineElement = {
+  id: "root-clip",
+  tag: "div",
+  start: 0,
+  duration: 10,
+  track: 0,
+  domId: "root-clip",
+  sourceFile: ROOT_FILE,
+  timingSource: "authored",
+};
+
+// An expanded sub-comp child: `start` is in MASTER coordinates (offset by the
+// host's master start), `sourceFile` is the sub-comp, and `expandedParentStart`
+// is that host master start. Its authored time in the file is start - basis.
+const expandedChild: TimelineElement = {
+  id: "child-clip",
+  tag: "div",
+  start: 2,
+  duration: 6,
+  track: 1,
+  domId: "child-clip",
+  sourceFile: SUBCOMP_FILE,
+  timingSource: "authored",
+  expandedParentStart: 2,
+};
+
+interface SplitRequest {
+  path: string;
+  splitTime: number;
+  elementStart: number;
+  elementDuration: number;
+}
+
+type SingleSplit = (element: TimelineElement, splitTime: number) => Promise<void>;
+type SplitAll = (splitTime: number) => Promise<void>;
+
+interface Harness {
+  splitRequests: SplitRequest[];
+  singleRef: { current: SingleSplit | undefined };
+  allRef: { current: SplitAll | undefined };
+  root: ReturnType<typeof mountProbe>;
+}
+
+function mountRazorSplit(): Harness {
+  const disk: Record<string, string> = {
+    [ROOT_FILE]: `<div class="clip" id="root-clip" data-start="0" data-duration="10"></div>`,
+    [SUBCOMP_FILE]: `<div class="clip" id="child-clip" data-start="0" data-duration="6"></div>`,
+  };
+  const splitRequests: SplitRequest[] = [];
+
+  const fetchMock = createSplitFetchMock(disk, (path, body) => {
+    splitRequests.push({
+      path,
+      splitTime: body.splitTime,
+      elementStart: body.elementStart,
+      elementDuration: body.elementDuration,
+    });
+  });
+  vi.stubGlobal("fetch", fetchMock);
+
+  const singleRef: { current: SingleSplit | undefined } = { current: undefined };
+  const allRef: { current: SplitAll | undefined } = { current: undefined };
+
+  function Component() {
+    const { handleRazorSplit, handleRazorSplitAll } = useRazorSplit({
+      projectId: "p1",
+      activeCompPath: ROOT_FILE,
+      showToast: () => {},
+      writeProjectFile: async (path, content) => {
+        disk[path] = content;
+      },
+      recordEdit: async () => {},
+      domEditSaveTimestampRef: { current: 0 },
+      reloadPreview: () => {},
+    });
+    singleRef.current = handleRazorSplit;
+    allRef.current = handleRazorSplitAll;
+    return null;
+  }
+
+  const root = mountProbe(Component);
+  return { splitRequests, singleRef, allRef, root };
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ elements: [] });
+  vi.unstubAllGlobals();
+});
+
+describe("useRazorSplit — sub-comp coordinate rebasing", () => {
+  let harness: Harness;
+  beforeEach(() => {
+    harness = mountRazorSplit();
+  });
+  afterEach(() => {
+    act(() => harness.root.unmount());
+  });
+
+  it("rebases an expanded sub-comp child split into the sub-comp's local time", async () => {
+    // Master split time T = 5; host starts at 2, so local time is 3.
+    await act(async () => {
+      await harness.singleRef.current!(expandedChild, 5);
+    });
+
+    expect(harness.splitRequests).toHaveLength(1);
+    const req = harness.splitRequests[0];
+    expect(req.path).toBe(SUBCOMP_FILE);
+    expect(req.splitTime).toBe(3); // 5 - expandedParentStart(2), NOT 5
+    expect(req.elementStart).toBe(0); // 2 - 2, NOT the master start 2
+    expect(req.elementDuration).toBe(6);
+  });
+
+  it("leaves a root-level clip's coordinates unchanged", async () => {
+    // Master split time T = 4; no expandedParentStart, so nothing is rebased.
+    await act(async () => {
+      await harness.singleRef.current!(rootElement, 4);
+    });
+
+    expect(harness.splitRequests).toHaveLength(1);
+    const req = harness.splitRequests[0];
+    expect(req.path).toBe(ROOT_FILE);
+    expect(req.splitTime).toBe(4);
+    expect(req.elementStart).toBe(0);
+    expect(req.elementDuration).toBe(10);
+  });
+
+  it("rebases each element individually in a mixed razor-split-all gesture", async () => {
+    usePlayerStore.setState({ elements: [rootElement, expandedChild] });
+
+    // Master split time T = 3 lies inside both clips.
+    await act(async () => {
+      await harness.allRef.current!(3);
+    });
+
+    expect(harness.splitRequests).toHaveLength(2);
+    const rootReq = harness.splitRequests.find((r) => r.path === ROOT_FILE)!;
+    const childReq = harness.splitRequests.find((r) => r.path === SUBCOMP_FILE)!;
+
+    // Root clip: already local — master coordinates pass through untouched.
+    expect(rootReq.splitTime).toBe(3);
+    expect(rootReq.elementStart).toBe(0);
+
+    // Expanded child: rebased by its OWN expandedParentStart, not the root's.
+    expect(childReq.splitTime).toBe(1); // 3 - 2
+    expect(childReq.elementStart).toBe(0); // 2 - 2
+  });
+});
+
+// ── Bug 1: split must resync the SDK session so undo isn't refused ────────────
+
+const memoryStorage = (): EditHistoryStorageAdapter => {
+  const store = new Map<string, string>();
+  return {
+    load: async (k) => store.get(k) ?? null,
+    save: async (k, v) => {
+      store.set(k, v);
+    },
+  } as unknown as EditHistoryStorageAdapter;
+};
+
+interface UndoHarness {
+  singleRef: { current: SingleSplit | undefined };
+  disk: Record<string, string>;
+  store: ReturnType<typeof createPersistentEditHistoryStore>;
+  forceReloadSdkSession: ReturnType<typeof vi.fn>;
+  root: ReturnType<typeof mountProbe>;
+}
+
+function mountRazorSplitWithHistory(): UndoHarness {
+  const disk: Record<string, string> = {
+    [ROOT_FILE]: `<div class="clip" id="root-clip" data-start="0" data-duration="10"></div>`,
+  };
+  const store = createPersistentEditHistoryStore({
+    projectId: "p1",
+    storage: memoryStorage(),
+    initialState: createEmptyEditHistory(),
+    now: () => Date.now(),
+    onChange: () => {},
+  });
+  const forceReloadSdkSession = vi.fn();
+
+  const fetchMock = createSplitFetchMock(disk);
+  vi.stubGlobal("fetch", fetchMock);
+
+  const singleRef: { current: SingleSplit | undefined } = { current: undefined };
+  function Component() {
+    const { handleRazorSplit } = useRazorSplit({
+      projectId: "p1",
+      activeCompPath: ROOT_FILE,
+      showToast: () => {},
+      writeProjectFile: async (path, content) => {
+        disk[path] = content;
+      },
+      recordEdit: (input) => store.recordEdit(input),
+      domEditSaveTimestampRef: { current: 0 },
+      reloadPreview: () => {},
+      forceReloadSdkSession,
+    });
+    singleRef.current = handleRazorSplit;
+    return null;
+  }
+  const root = mountProbe(Component);
+  return { singleRef, disk, store, forceReloadSdkSession, root };
+}
+
+describe("useRazorSplit — undo integrity after split (Bug 1)", () => {
+  let h: UndoHarness;
+  beforeEach(() => {
+    h = mountRazorSplitWithHistory();
+  });
+  afterEach(() => {
+    act(() => h.root.unmount());
+  });
+
+  const readFile = () => ({
+    readFile: async (p: string) => h.disk[p],
+    writeFile: async (p: string, c: string) => {
+      h.disk[p] = c;
+    },
+  });
+
+  it("resyncs the SDK session after a split (matches every other server-write path)", async () => {
+    await act(async () => {
+      await h.singleRef.current!(rootElement, 4);
+    });
+    expect(h.forceReloadSdkSession).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies undo after a split without an external-change refusal", async () => {
+    await act(async () => {
+      await h.singleRef.current!(rootElement, 4);
+    });
+    const result = await h.store.undo(readFile());
+    expect(result.ok).toBe(true);
+    expect(result.reason).toBeUndefined();
+    // The file is restored to its pre-split bytes.
+    expect(h.disk[ROOT_FILE]).not.toContain("<!--split-->");
+  });
+
+  it("still trips the guard when the file is edited externally after a split", async () => {
+    await act(async () => {
+      await h.singleRef.current!(rootElement, 4);
+    });
+    // Simulate the user editing the file in their own editor after the split.
+    h.disk[ROOT_FILE] = `${h.disk[ROOT_FILE]}<!--hand-edit-->`;
+    const result = await h.store.undo(readFile());
+    expect(result.ok).toBe(false);
+    expect(result.reason).toBe("content-mismatch");
+  });
+});

package/src/hooks/useRazorSplit.testHelpers.ts

@@ -0,0 +1,64 @@
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { vi } from "vitest";
+
+export interface SplitBody {
+  splitTime: number;
+  elementStart: number;
+  elementDuration: number;
+}
+
+function decodePathFromUrl(url: string, marker: string): string {
+  const encoded = url.slice(url.indexOf(marker) + marker.length);
+  return decodeURIComponent(encoded);
+}
+
+/**
+ * Fetch mock shared by both harnesses: GSAP mutations 400 (no script in fixtures),
+ * split-element writes a `<!--split-->` marker so `changed` is true, and file reads
+ * echo the in-memory `disk`. `onSplit` (when set) records each split request's body.
+ */
+export function createSplitFetchMock(
+  disk: Record<string, string>,
+  onSplit?: (path: string, body: SplitBody) => void,
+) {
+  return vi.fn(async (url: string, init?: RequestInit) => {
+    const u = String(url);
+    if (u.includes("/gsap-mutations/")) {
+      // No GSAP script in the fixtures — mirror the server's 400 response.
+      return new Response(JSON.stringify({ error: "no GSAP script found in file" }), {
+        status: 400,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    if (u.includes("/file-mutations/split-element/")) {
+      const path = decodePathFromUrl(u, "/file-mutations/split-element/");
+      onSplit?.(path, JSON.parse(String(init?.body)) as SplitBody);
+      // Return content that differs from the original so `changed` is true.
+      const after = `${disk[path]}<!--split-->`;
+      disk[path] = after; // server writes the split to disk
+      return new Response(JSON.stringify({ ok: true, changed: true, content: after }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    if (u.includes("/files/")) {
+      const path = decodePathFromUrl(u, "/files/").replace(/\?.*$/, "");
+      return new Response(JSON.stringify({ content: disk[path] ?? "" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    void init;
+    throw new Error(`unexpected fetch: ${u}`);
+  });
+}
+
+/** Mount a render-only probe component into a fresh host and return its root. */
+export function mountProbe(Component: React.ComponentType): ReturnType<typeof createRoot> {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => root.render(React.createElement(Component)));
+  return root;
+}