@hyperframes/studio 0.8.81 → 0.8.83

package/src/editorGesturesExports.test.tsx

@@ -0,0 +1,236 @@
+// @vitest-environment happy-dom
+// Drives Studio's snapping and marquee by package name with a host's own iframe and overlay.
+import { act, type PointerEvent } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  collectSnapContext,
+  resolveSnapAdjustment,
+  SNAP_THRESHOLD_PX,
+  SnapGuideOverlay,
+  useMarqueeGestures,
+  usePlayerStore,
+  type MarqueeGestures,
+  type MarqueeGesturesDeps,
+  type MarqueeRect,
+} from "@hyperframes/studio";
+import { installReactActEnvironment, mountReactHarness } from "./hooks/domSelectionTestHarness";
+import {
+  collectDomEditLayerItems,
+  resolveDomEditSelection,
+} from "./components/editor/domEditingLayers";
+
+const rects = new Map<string, MarqueeRect>([
+  ["a", { left: 0, top: 0, width: 10, height: 10 }],
+  ["b", { left: 100, top: 100, width: 10, height: 10 }],
+]);
+
+vi.mock("./components/editor/domEditOverlayGeometry", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  isElementVisibleForOverlay: () => true,
+  toVisibleOverlayRect: (_overlay: unknown, _iframe: unknown, el: HTMLElement) => {
+    const rect = rects.get(el.id);
+    return rect ? { ...rect, editScaleX: 1, editScaleY: 1 } : null;
+  },
+}));
+vi.mock("./components/editor/domEditingElement", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  isElementComputedVisible: () => true,
+}));
+vi.mock("./components/editor/domEditingLayers", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  collectDomEditLayerItems: vi.fn((root: HTMLElement) =>
+    Array.from(root.children).map((element) => ({ element })),
+  ),
+  resolveDomEditSelection: vi.fn(async (element: HTMLElement) => ({ id: element.id })),
+}));
+
+installReactActEnvironment();
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.clearAllMocks();
+  usePlayerStore.setState({ previewBooted: false });
+});
+
+function MarqueeHost<T>(props: {
+  deps: MarqueeGesturesDeps<T>;
+  onState: (state: MarqueeGestures) => void;
+}) {
+  props.onState(useMarqueeGestures(props.deps as unknown as MarqueeGesturesDeps));
+  return null;
+}
+
+function mountMarquee<T>(extra: Partial<MarqueeGesturesDeps<T>> = {}) {
+  document.body.innerHTML = `<div data-composition-id="main" data-width="1920" data-height="1080">
+    <div id="a"></div><div id="b"></div></div>`;
+  const overlay = document.createElement("div");
+  overlay.setPointerCapture = vi.fn();
+  overlay.releasePointerCapture = vi.fn();
+  document.body.append(overlay);
+  const onSelect = vi.fn();
+  const deps: MarqueeGesturesDeps<T> = {
+    iframeRef: { current: { contentDocument: document } as unknown as HTMLIFrameElement },
+    overlayRef: { current: overlay },
+    activeCompositionPathRef: { current: "index.html" },
+    onMarqueeSelectRef: { current: onSelect },
+    ...extra,
+  };
+  let state: MarqueeGestures | undefined;
+  const root = mountReactHarness(<MarqueeHost deps={deps} onState={(next) => (state = next)} />);
+  const at = (x: number, y: number, shiftKey = false) =>
+    ({
+      clientX: x,
+      clientY: y,
+      pointerId: 7,
+      shiftKey,
+      currentTarget: overlay,
+    }) as unknown as PointerEvent<HTMLDivElement>;
+  const marquee = () => state as MarqueeGestures;
+  return { overlay, onSelect, root, at, marquee };
+}
+
+describe("marquee package export, driven by a host", () => {
+  const byId = { resolveHits: (elements: HTMLElement[]) => elements.map((el) => el.id) };
+
+  it("hands the elements a drag touched to the host's resolveHits and selects what it returns", async () => {
+    const { overlay, onSelect, at, marquee } = mountMarquee<string>(byId);
+    act(() => marquee().begin(at(1, 1)));
+    expect(overlay.setPointerCapture).toHaveBeenCalledWith(7);
+    act(() => marquee().onPointerMove(at(20, 20)));
+    expect(marquee().marqueeRect).toEqual({ left: 1, top: 1, width: 19, height: 19 });
+    expect(marquee().candidateRects).toEqual([rects.get("a")]);
+    await act(async () => marquee().onPointerUp(at(20, 20, true)));
+    expect(onSelect).toHaveBeenCalledWith(["a"], true);
+    expect(overlay.releasePointerCapture).toHaveBeenCalledWith(7);
+    expect(marquee().marqueeRect).toBeNull();
+  });
+
+  it("measures the candidates once per drag", async () => {
+    const { at, marquee } = mountMarquee<string>(byId);
+    act(() => marquee().begin(at(1, 1)));
+    act(() => marquee().onPointerMove(at(20, 20)));
+    act(() => marquee().onPointerMove(at(120, 120)));
+    await act(async () => marquee().onPointerUp(at(120, 120)));
+    expect(collectDomEditLayerItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("selects nothing on a release under the threshold, as a click", async () => {
+    const resolveHits = vi.fn(byId.resolveHits);
+    const { onSelect, at, marquee } = mountMarquee<string>({ resolveHits });
+    act(() => marquee().begin(at(1, 1)));
+    await act(async () => marquee().onPointerUp(at(2, 2)));
+    expect(onSelect).toHaveBeenCalledWith([], false);
+    expect(resolveHits).not.toHaveBeenCalled();
+  });
+
+  it("cancel() drops an active marquee and the release that follows selects nothing", async () => {
+    const { overlay, onSelect, at, marquee } = mountMarquee<string>(byId);
+    act(() => marquee().begin(at(1, 1)));
+    act(() => marquee().onPointerMove(at(20, 20)));
+    act(() => marquee().cancel());
+    expect(marquee().marqueeRect).toBeNull();
+    expect(marquee().candidateRects).toEqual([]);
+    expect(overlay.releasePointerCapture).toHaveBeenCalledWith(7);
+    await act(async () => marquee().onPointerUp(at(20, 20)));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("a pointercancel mid-drag drops the marquee without selecting", async () => {
+    const { onSelect, at, marquee } = mountMarquee<string>(byId);
+    act(() => marquee().begin(at(1, 1)));
+    act(() => marquee().onPointerMove(at(20, 20)));
+    act(() => marquee().onPointerCancel());
+    expect(marquee().marqueeRect).toBeNull();
+    await act(async () => marquee().onPointerUp(at(20, 20)));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("will not hand a host Studio's selections under the host's own pick type", () => {
+    const hostDeps: MarqueeGesturesDeps<string> = {
+      iframeRef: { current: null },
+      overlayRef: { current: null },
+      activeCompositionPathRef: { current: null },
+      onMarqueeSelectRef: { current: undefined },
+    };
+    // @ts-expect-error a host pick type needs its own resolveHits
+    const typed = () => useMarqueeGestures<string>(hostDeps);
+    expect(typed).toBeTypeOf("function");
+  });
+
+  it("resolves Studio edit selections when the host passes no resolveHits", async () => {
+    const { onSelect, at, marquee } = mountMarquee();
+    act(() => marquee().begin(at(1, 1)));
+    act(() => marquee().onPointerMove(at(20, 20)));
+    await act(async () => marquee().onPointerUp(at(20, 20)));
+    expect(resolveDomEditSelection).toHaveBeenCalledWith(
+      document.getElementById("a"),
+      expect.objectContaining({ skipSourceProbe: true }),
+    );
+    expect(onSelect).toHaveBeenCalledWith([{ id: "a" }], false);
+  });
+
+  it("passes pointer events that are not a marquee to Studio's gestures, and needs none", () => {
+    const gestures = { onPointerMove: vi.fn(), onPointerUp: vi.fn(), clearPointerState: vi.fn() };
+    const selectionRef = { current: null };
+    const withGestures = mountMarquee<string>({ ...byId, gestures, selectionRef });
+    act(() => withGestures.marquee().onPointerMove(withGestures.at(5, 5)));
+    act(() => withGestures.marquee().onPointerUp(withGestures.at(5, 5)));
+    act(() => withGestures.marquee().onPointerCancel());
+    expect(gestures.onPointerMove).toHaveBeenCalledTimes(1);
+    expect(gestures.onPointerUp).toHaveBeenCalledTimes(1);
+    expect(gestures.clearPointerState).toHaveBeenCalledWith(selectionRef);
+
+    const bare = mountMarquee<string>(byId);
+    expect(() => {
+      bare.marquee().onPointerMove(bare.at(5, 5));
+      bare.marquee().onPointerUp(bare.at(5, 5));
+      bare.marquee().onPointerCancel();
+    }).not.toThrow();
+  });
+});
+
+describe("snapping package export, driven by a host", () => {
+  it("snaps a host's drag to another element and draws the guide", async () => {
+    document.body.innerHTML = `<div data-composition-id="main" data-width="1920" data-height="1080">
+      <div id="a"></div><div id="b"></div></div>`;
+    const overlay = document.createElement("div");
+    const iframe = {
+      contentDocument: document,
+      getBoundingClientRect: () => ({ left: 0, top: 0, width: 1920, height: 1080 }),
+    } as unknown as HTMLIFrameElement;
+    const moving = document.getElementById("a") as HTMLElement;
+    const context = collectSnapContext({
+      overlayEl: overlay,
+      iframe,
+      excludeElements: new Set([moving]),
+    });
+    const snap = resolveSnapAdjustment({
+      movingRect: rects.get("a")!,
+      proposedDx: 98,
+      proposedDy: 0,
+      targets: context.targets,
+      threshold: SNAP_THRESHOLD_PX,
+      disabled: !context.snapEnabled,
+    });
+    expect(snap.dx).toBe(100);
+    expect(snap.guides.length).toBeGreaterThan(0);
+
+    // The guides draw once the host's preview has booted, as NLEPreview's player marks it.
+    usePlayerStore.setState({ previewBooted: true });
+    const snapGuidesRef = { current: { guides: snap.guides, spacingGuides: snap.spacingGuides } };
+    const root = mountReactHarness(
+      <SnapGuideOverlay
+        snapGuidesRef={snapGuidesRef}
+        compositionLeft={0}
+        compositionTop={0}
+        compositionWidth={1920}
+        compositionHeight={1080}
+      />,
+    );
+    await vi.waitFor(() => {
+      const guide = document.querySelector<HTMLElement>('[aria-hidden="true"] > div');
+      expect(guide?.style.display).toBe("");
+    });
+    await act(async () => root.unmount());
+  });
+});

package/src/hooks/canvasQuickSaves.test.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection, DomEditTextField } from "../components/editor/domEditing";
+import type { TimelineElement } from "../player/store/playerStore";
+import { buildTimelineMoveTimingPatch, persistTimelineEdit } from "./timelineEditingHelpers";
+import { useDomEditCommits } from "./useDomEditCommits";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const SOURCE =
+  '<!doctype html><html><head></head><body><div data-hf-id="hf-card" style="color: red">Card</div>' +
+  '<div id="clip" class="clip" data-start="1" data-duration="5" data-track-index="0"></div></body></html>';
+
+// The server patches whatever is on disk; the writer refuses a stale base like If-Match does.
+// The first write can be held mid-flight.
+function fakeProject() {
+  let disk = SOURCE;
+  const refused: string[] = [];
+  let writes = 0;
+  let release = () => {};
+  const firstWrite = new Promise<void>((resolve) => (release = resolve));
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: string, init?: RequestInit) => {
+      if (input.includes("/file-mutations/patch-element/")) {
+        const { operations } = JSON.parse(String(init?.body)) as {
+          operations: Array<{ property?: string; value?: string }>;
+        };
+        for (const op of operations) {
+          if (op.property === "color") disk = disk.replace(/color: \w+/, `color: ${op.value}`);
+        }
+        return Response.json({ ok: true, changed: true, matched: true, content: disk });
+      }
+      return Response.json({ content: disk });
+    }),
+  );
+  const writeProjectFile = async (path: string, content: string, expected?: string) => {
+    if (++writes === 1) await firstWrite;
+    if (expected !== undefined && expected !== disk && content !== disk) {
+      refused.push(path);
+      throw new Error(`409 conflict on ${path}`);
+    }
+    disk = content;
+  };
+  return { writeProjectFile, refused, release: () => release(), read: () => disk };
+}
+
+type Project = ReturnType<typeof fakeProject>;
+
+function mountCanvasCommits(project: Project) {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  iframe.contentDocument!.body.innerHTML =
+    '<div data-hf-id="hf-card" style="color: red">Card</div>';
+  const element = iframe.contentDocument!.querySelector<HTMLElement>('[data-hf-id="hf-card"]')!;
+  const selection = {
+    element,
+    label: "Card",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 120, height: 40 },
+    textContent: "Card",
+    dataAttributes: {},
+    inlineStyles: { color: "red" },
+    computedStyles: {},
+    textFields: [],
+    capabilities: { canSelect: true, canEditStyles: true, canMove: true, canResize: true },
+    hfId: "hf-card",
+    selector: '[data-hf-id="hf-card"]',
+    selectorIndex: 0,
+  } as unknown as DomEditSelection;
+  const captured: { current: ReturnType<typeof useDomEditCommits> | null } = { current: null };
+  const toasts: string[] = [];
+  function Probe() {
+    captured.current = useDomEditCommits({
+      activeCompPath: "index.html",
+      previewIframeRef: { current: iframe },
+      showToast: (message) => toasts.push(message),
+      queueDomEditSave: (save) => save(),
+      writeProjectFile: project.writeProjectFile,
+      editHistory: { recordEdit: async () => {} },
+      fileTree: [],
+      importedFontAssetsRef: { current: [] },
+      projectId: "p1",
+      projectIdRef: { current: "p1" },
+      reloadPreview: () => {},
+      domEditSelection: selection,
+      applyDomSelection: () => {},
+      clearDomSelection: () => {},
+      refreshDomEditSelectionFromPreview: () => {},
+      buildDomSelectionFromTarget: async () => null,
+      readOnlyPreview: false,
+    });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(createElement(Probe)));
+  return { hook: captured.current!, selection, toasts };
+}
+
+const selfText: DomEditTextField = {
+  key: "self",
+  label: "self",
+  value: "Card",
+  tagName: "div",
+  attributes: [],
+  inlineStyles: {},
+  computedStyles: {},
+  source: "self",
+};
+
+const moveClip = (project: Project) =>
+  persistTimelineEdit({
+    projectId: "p1",
+    activeCompPath: "index.html",
+    element: {
+      id: "clip",
+      key: "clip",
+      domId: "clip",
+      tag: "div",
+      start: 1,
+      duration: 5,
+      track: 0,
+    } as TimelineElement,
+    label: "Move clip",
+    buildPatches: (original, target) => buildTimelineMoveTimingPatch(original, target, 3, 5),
+    writeProjectFile: project.writeProjectFile,
+    recordEdit: async () => {},
+    pendingTimelineEditPathRef: { current: new Set<string>() },
+  });
+
+// Starts the second save while the first one's write is in flight; both must land unrefused.
+async function expectBothLand(
+  project: Project,
+  first: () => Promise<unknown>,
+  second: () => Promise<unknown>,
+) {
+  await act(async () => {
+    const saves = [first()];
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    saves.push(second());
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    project.release();
+    await Promise.allSettled(saves);
+  });
+  expect(project.refused).toEqual([]);
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = "";
+});
+
+describe("canvas edit commits share the file queue", () => {
+  it("lands a second canvas commit started while the first one's font write is held", async () => {
+    const project = fakeProject();
+    const { hook, selection, toasts } = mountCanvasCommits(project);
+    const font = {
+      family: "Imported",
+      path: "fonts/Imported.woff2",
+      url: "/api/projects/p1/preview/fonts/Imported.woff2",
+    };
+
+    await expectBothLand(
+      project,
+      () => hook.commitDomTextFields(selection, [selfText], { importedFont: font }),
+      () => hook.handleDomStyleCommit("color", "green"),
+    );
+
+    expect(toasts).toEqual([]);
+    expect(project.read()).toContain("@font-face");
+    expect(project.read()).toContain("color: green");
+  });
+
+  it("lands a canvas commit started while a timeline save is writing", async () => {
+    const project = fakeProject();
+    const { hook, toasts } = mountCanvasCommits(project);
+
+    await expectBothLand(
+      project,
+      () => moveClip(project),
+      () => hook.handleDomStyleCommit("color", "green"),
+    );
+
+    expect(toasts).toEqual([]);
+    expect(project.read()).toContain('id="clip" class="clip" data-start="3"');
+    expect(project.read()).toContain("color: green");
+  });
+});

package/src/hooks/gsapMutationClient.ts

@@ -0,0 +1,116 @@
+import { studioWriteHeaders } from "../utils/studioFileVersion";
+
+export class GsapPreviewConvergenceError extends Error {}
+export class GsapOwnershipProtocolError extends GsapPreviewConvergenceError {}
+
+/** Verify rollback ownership support before any GSAP mutation can land. */
+export async function requireGsapOwnershipProtocol(projectId: string): Promise<void> {
+  const response = await fetch(
+    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutation-capabilities`,
+  );
+  if (!response.ok) {
+    throw new GsapOwnershipProtocolError("Server does not support owned GSAP mutations");
+  }
+  const body = await response.json().catch(() => null);
+  if (!isRecord(body) || body.atomicOwnershipPairs !== true) {
+    throw new GsapOwnershipProtocolError("Invalid GSAP mutation capability response");
+  }
+}
+
+/** Atomically restore one GSAP mutation only while its exact output still owns
+ * the file. The server performs compare + write synchronously, eliminating the
+ * client GET→PUT window that could overwrite a successor edit. */
+export async function rollbackOwnedMutation(
+  projectId: string,
+  targetPath: string,
+  expected: string,
+  restore: string,
+): Promise<"restored" | "conflict"> {
+  if (targetPath.includes("\0") || targetPath.includes("..")) {
+    throw new Error(`Unsafe path: ${targetPath}`);
+  }
+  const response = await fetch(
+    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutation-rollback/${encodeURIComponent(targetPath)}`,
+    {
+      method: "POST",
+      // Deliberately unclaimed: a rollback runs because a mutation did not
+      // converge, so let the restored file reload the preview.
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ expected, restore }),
+    },
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to restore ${targetPath}`);
+  }
+  const result = (await response.json()) as { restored?: unknown; conflict?: unknown };
+  if (result.restored === true && result.conflict === false) return "restored";
+  if (result.restored === false && result.conflict === true) return "conflict";
+  throw new Error(`Invalid restore response for ${targetPath}`);
+}
+
+/** The server's GSAP-mutation response. `scriptText` is the rewritten root script for a soft
+ * reload, null when none came back: the caller then full-reloads when `mutated`, or rebinds
+ * the runtime timing in place when nothing was rewritten (see syncTimingEditPreview). */
+export type GsapMutationStatus = {
+  mutated: boolean;
+  scriptText: string | null;
+  /** Atomic whole-file ownership pair returned by the mutation endpoint. */
+  before?: string;
+  after?: string;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function readMutationStatus(value: unknown): GsapMutationStatus {
+  if (
+    !isRecord(value) ||
+    typeof value.mutated !== "boolean" ||
+    typeof value.before !== "string" ||
+    typeof value.after !== "string" ||
+    value.mutated !== (value.before !== value.after) ||
+    ("changed" in value && value.changed !== value.mutated)
+  ) {
+    throw new GsapOwnershipProtocolError("Invalid owned GSAP mutation response");
+  }
+  return {
+    mutated: value.mutated,
+    scriptText: typeof value.scriptText === "string" ? value.scriptText : null,
+    before: value.before,
+    after: value.after,
+  };
+}
+
+function readMutationError(value: unknown, fallback: string): string {
+  if (isRecord(value) && typeof value.error === "string") return value.error;
+  return fallback;
+}
+
+export async function postGsapMutation(
+  projectId: string,
+  filePath: string,
+  mutation: Record<string, unknown>,
+  fallback: string,
+): Promise<GsapMutationStatus> {
+  let response: Response;
+  try {
+    response = await fetch(
+      `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(filePath)}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+        body: JSON.stringify(mutation),
+      },
+    );
+  } catch (error) {
+    throw new GsapPreviewConvergenceError(`${fallback}: mutation outcome unknown`, {
+      cause: error,
+    });
+  }
+  const body: unknown = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new GsapPreviewConvergenceError(readMutationError(body, fallback));
+  }
+  return readMutationStatus(body);
+}

package/src/hooks/resizeObserverTestUtils.ts

@@ -0,0 +1,14 @@
+// Test-only ResizeObserver stand-in: a test delivers a size by hand with `reportResize`.
+let resizeCallback: ResizeObserverCallback | null = null;
+
+export function MockResizeObserver(callback: ResizeObserverCallback) {
+  resizeCallback = callback;
+  return { observe() {}, disconnect() {}, unobserve() {} };
+}
+
+export function reportResize(width: number, height: number): void {
+  resizeCallback!(
+    [{ contentRect: { width, height } } as ResizeObserverEntry],
+    {} as ResizeObserver,
+  );
+}

package/src/hooks/timelineAudioGroupCreate.ts

@@ -14,9 +14,9 @@ import { runtimeAudioId } from "../player/lib/timelineElementHelpers";
 import { invalidateGroupInfoCache } from "../player/lib/timelineGroupInfo";
 import { readTagSnippetByTarget, type PatchOperation } from "../utils/sourcePatcher";
 import {
-  applyPatchByTarget,
-  buildPatchTarget,
   findTimelineElementInIframe,
+  operationChanges,
+  patchTimelineChangesInSource,
   readFileContent,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
@@ -197,52 +197,30 @@ export async function createAudioGroupAndAssignMembers({
     property: HF_AUDIO_GROUP_ATTR,
     value: groupId,
   };
-  const originalByPath = new Map<string, string>();
-  const files: Record<string, string> = {};
+  const groupPath = activeCompPath || "index.html";
+  const byPath = groupElementsByTargetPath(elements, activeCompPath);
+  const files: Record<string, (current: string) => string> = {};
+  for (const targetPath of new Set([...byPath.keys(), groupPath])) {
+    files[targetPath] = (current) => {
+      let patched = patchTimelineChangesInSource(
+        current,
+        targetPath,
+        operationChanges(byPath.get(targetPath) ?? [], groupOperation),
+      );
+      if (targetPath === groupPath) patched = insertGroupElement(patched, groupId, groupLabel);
+      if (patched !== current) pendingTimelineEditPathRef.current.add(targetPath);
+      return patched;
+    };
+  }
 
   try {
-    for (const [targetPath, fileElements] of groupElementsByTargetPath(elements, activeCompPath)) {
-      let patchedContent = await readFileContent(projectId, targetPath);
-      originalByPath.set(targetPath, patchedContent);
-
-      for (const element of fileElements) {
-        const patchTarget = buildPatchTarget(element);
-        if (!patchTarget) {
-          throw new Error(`Timeline element ${element.id} is missing a patchable target`);
-        }
-        if (readTagSnippetByTarget(patchedContent, patchTarget) === undefined) {
-          throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
-        }
-        patchedContent = applyPatchByTarget(patchedContent, patchTarget, groupOperation);
-      }
-
-      files[targetPath] = patchedContent;
-      pendingTimelineEditPathRef.current.add(targetPath);
-    }
-
-    const groupPath = activeCompPath || "index.html";
-    let groupContent = files[groupPath];
-    if (groupContent === undefined) {
-      groupContent = await readFileContent(projectId, groupPath);
-      originalByPath.set(groupPath, groupContent);
-    }
-    const withGroupElement = insertGroupElement(groupContent, groupId, groupLabel);
-    if (withGroupElement !== groupContent) {
-      files[groupPath] = withGroupElement;
-      pendingTimelineEditPathRef.current.add(groupPath);
-    }
-
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
       label: groupLabel
         ? `Group ${elements.length} clips as ${groupLabel}`
         : `Group ${elements.length} voice clips`,
       files,
-      readFile: async (path) => {
-        const original = originalByPath.get(path);
-        if (original !== undefined) return original;
-        return readFileContent(projectId, path);
-      },
+      readFile: (path) => readFileContent(projectId, path),
       writeFile: writeProjectFile,
       recordEdit,
     });

package/src/hooks/timelineEditingHelpers.test.ts

@@ -12,6 +12,7 @@ import {
   type PersistTimelineBatchChange,
 } from "./timelineEditingHelpers";
 import type { TimelineElement } from "../player/store/playerStore";
+import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 import { usePlayerStore } from "../player/store/playerStore";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 import { timelineKeyframeSelectionKey } from "../player/components/timelineKeyframeIdentity";
@@ -244,6 +245,26 @@ describe("buildTimelineResizeTimingPatch", () => {
   });
 });
 
+describe("buildTimelineResizeTimingPatch — source in-point read as playback reads it", () => {
+  it.each([
+    ['data-playback-start="-1" data-media-start="2"', 4.5, 1.5],
+    ['data-playback-start="2"', 4.5, 1.5],
+    ['data-media-start="junk"', 5.5, 0.5],
+    ['data-media-start="1.5s"', 5.5, 0.5],
+  ])("%s, head to %s", (inPoint, start, expected) => {
+    const source = `<div id="root"><video id="a" class="clip" data-start="5" data-duration="3" ${inPoint}></video></div>`;
+    const element = el({ id: "a", tag: "video", domId: "a", start: 5, duration: 3 });
+    const host = document.createElement("div");
+    host.innerHTML = buildTimelineResizeTimingPatch(source, { id: "a" }, element, {
+      start,
+      duration: 8 - start,
+      playbackStart: undefined,
+    });
+    const video = host.querySelector("#a")!;
+    expect(readMediaOffsetSeconds((name) => video.getAttribute(name))).toBe(expected);
+  });
+});
+
 describe("persistTimelineBatchEdit", () => {
   const SOURCE = `<div id="root"><video id="a" class="clip" data-start="1" data-track-index="0"></video><video id="b" class="clip" data-start="2" data-track-index="1"></video></div>`;