@hyperframes/studio 0.8.90 → 0.8.92

package/src/hooks/useTimelineAssetDropOps.test.tsx

@@ -6,6 +6,7 @@ import { useTimelineAssetDropOps } from "./useTimelineAssetDropOps";
 import { mountReactHarness } from "./domSelectionTestHarness";
 import { usePlayerStore } from "../player/store/playerStore";
 import type { TimelineElement } from "../player";
+import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -140,6 +141,143 @@ describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
     expect(written).toMatch(/<video id="clip"[^>]*data-track-index="1"/);
   });
 
+  // A clip shown on timeline row `row` and written on file track `track`.
+  const rowClip = (
+    id: string,
+    start: number,
+    duration: number,
+    shown: { tag?: string; row?: number; track?: number } = {},
+  ): TimelineElement => ({
+    id,
+    key: id,
+    tag: shown.tag ?? "div",
+    start,
+    duration,
+    track: shown.row ?? 0,
+    authoredTrack: shown.track ?? shown.row ?? 0,
+    hfId: `hf-${id}`,
+    domId: id,
+  });
+  const rowSource = (clips: TimelineElement[]) =>
+    [
+      '<main data-composition-id="scene" data-duration="10" data-width="1920" data-height="1080">',
+      ...clips.map(
+        (c) =>
+          `<${c.tag} data-hf-id="hf-${c.id}" id="${c.id}" data-start="${c.start}" data-duration="${c.duration}" data-track-index="${c.authoredTrack}"></${c.tag}>`,
+      ),
+      "</main>",
+    ].join("\n");
+  const writtenClip = (written: string, tag: string) =>
+    written.match(new RegExp(`<${tag} id="[^"]*"[^>]*>`))?.[0] ?? "";
+
+  it("lands an asset dropped on an occupied row at that row's nearest free time", async () => {
+    const subtitle = rowClip("subtitle", 0, 6);
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const getDrop = renderDropHook(rowSource([subtitle]), writeProjectFile, [subtitle]);
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 2, track: 0 }, 5);
+    });
+
+    const [, written] = writeProjectFile.mock.calls[0] as [string, string];
+    const clip = writtenClip(written, "video");
+    expect(clip).toContain('data-start="6"');
+    expect(clip).toContain('data-track-index="0"');
+    expect(written).toContain(
+      'id="subtitle" data-start="0" data-duration="6" data-track-index="0"',
+    );
+  });
+
+  // Drops two files (3 s images by default) onto `clips`; returns each written clip's start and track.
+  async function twoFileDrop(
+    clips: TimelineElement[],
+    placement: TimelineDropPlacement,
+    [names, tag] = [["one.png", "two.png"], "img"] as [string[], string],
+  ) {
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const uploadProjectFiles = vi.fn().mockResolvedValue(names);
+    const getDrop = renderDropHook(
+      rowSource(clips),
+      writeProjectFile,
+      clips,
+      undefined,
+      uploadProjectFiles,
+    );
+    const files = names.map((name) => new File([name], name));
+    await act(async () => {
+      await getDrop.file()(files, placement);
+    });
+    return writeProjectFile.mock.calls.map(([, written]) => {
+      const img = writtenClip(written as string, tag);
+      return [img.match(/data-start="([^"]*)"/)?.[1], img.match(/data-track-index="([^"]*)"/)?.[1]];
+    });
+  }
+
+  it("keeps a multi-file drop's clips off each other and off the row's clips", async () => {
+    const landed = await twoFileDrop([rowClip("a", 0, 4), rowClip("b", 8, 2)], {
+      start: 1,
+      track: 0,
+    });
+    // The first moves past a [0,4); the second is too long for [7,8) and goes after b.
+    expect(landed).toEqual([
+      ["4", "0"],
+      ["10", "0"],
+    ]);
+  });
+
+  it("puts a multi-file drop that opens a track back to back on that new track", async () => {
+    const landed = await twoFileDrop([rowClip("a", 0, 10)], {
+      start: 2,
+      track: 0,
+      insertRow: 0,
+      trackOrder: [0],
+    });
+    // Clip a moved down a row, so it no longer blocks the second file.
+    expect(landed).toEqual([
+      ["2", "0"],
+      ["5", "0"],
+    ]);
+  });
+
+  it("keeps a multi-file drop on the file track of the row it was dropped on", async () => {
+    const clips = [
+      rowClip("title", 0, 10, { track: 2 }),
+      rowClip("mid", 0, 1, { row: 1, track: 3 }),
+      rowClip("other", 0, 1, { row: 2, track: 5 }),
+    ];
+    // Row 0 is file track 2; the second file must not read that 2 back as row 2 (track 5).
+    expect(await twoFileDrop(clips, { start: 3, track: 0 })).toEqual([
+      ["10", "2"],
+      ["13", "2"],
+    ]);
+  });
+
+  it("reads a row's file track from every clip of the file, whether or not it names the file", async () => {
+    const unnamed = rowClip("unnamed", 0, 1, { row: 2, track: 0 });
+    const title = { ...rowClip("title", 0, 10), sourceFile: "index.html" };
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const getDrop = renderDropHook(rowSource([unnamed, title]), writeProjectFile, [unnamed, title]);
+    await act(async () => {
+      await getDrop()("pic.png", { start: 2, track: 0 }, 3);
+    });
+    const img = writtenClip(writeProjectFile.mock.calls[0][1] as string, "img");
+    expect(img).toContain('data-track-index="0"');
+    expect(img).toContain('data-start="10"');
+  });
+
+  it("keeps two audio files dropped on a visual row together, as a single one would go", async () => {
+    const clips = [
+      rowClip("title", 0, 10, { track: 1 }),
+      rowClip("music", 2, 3, { tag: "audio", row: 1, track: 0 }),
+    ];
+    const landed = await twoFileDrop(clips, { start: 12, track: 0 }, [["a.mp3", "b.mp3"], "audio"]);
+    // Audio length probing times out in this harness, so each file gets the 5 s default.
+    expect(landed).toEqual([
+      ["12", "0"],
+      ["17", "0"],
+    ]);
+  }, 30_000);
+
   it("refuses an asset drop before reading or writing when editing is blocked", async () => {
     const writeProjectFile = vi.fn().mockResolvedValue(undefined);
     const checkEditable = vi.fn(() => false);

package/src/hooks/useTimelineAssetDropOps.ts

@@ -30,14 +30,20 @@ import { extendRootDurationInSource } from "../utils/rootDuration";
 import { deriveTimelineStoreKeyForDomId } from "../player/lib/timelineElementHelpers";
 import { selectAndRevealTimelineElement } from "../player/components/timelineDropReveal";
 
-/** The first uploaded file opens the new track (if asked); the rest land on the lane it landed on. */
+/** The first uploaded file opens the new track (if asked); each next one aims right after the previous. */
 function fileDropPlacement(
   index: number,
   next: { start: number; track: number },
   dropped: TimelineDropPlacement | undefined,
-  landedTrack: number | undefined,
+  previous: TimelineElement | undefined,
 ): TimelineDropPlacement {
-  return index === 0 ? { ...dropped, ...next } : { ...next, track: landedTrack ?? next.track };
+  if (index === 0) return { ...dropped, ...next };
+  return previous ? { start: previous.start + previous.duration, track: previous.track } : next;
+}
+
+interface DropGesture {
+  placed: TimelineElement[];
+  onNewTrack: boolean;
 }
 
 function timelineDropTarget(
@@ -90,7 +96,8 @@ export function useTimelineAssetDropOps({
       assetPath: string,
       placement: TimelineDropPlacement,
       durationOverride?: number,
-    ): Promise<number | undefined> => {
+      gesture: DropGesture = { placed: [], onNewTrack: false },
+    ): Promise<TimelineElement | undefined> => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return undefined;
@@ -121,28 +128,32 @@ export function useTimelineAssetDropOps({
         const resolvedAssetSrc = resolveTimelineAssetSrc(targetPath, assetPath);
 
         const resolvedTargetPath = targetPath || "index.html";
-        const relevantElements = timelineElements.filter(
-          (te) => (te.sourceFile || activeCompPath || "index.html") === resolvedTargetPath,
-        );
-        const newElementZIndex = Math.max(1, relevantElements.length + 1);
+        const fileElements = timelineElements
+          .filter((te) => (te.sourceFile || activeCompPath || "index.html") === resolvedTargetPath)
+          .map((te) => ({ ...te, sourceFile: resolvedTargetPath }));
+        const newElementZIndex = Math.max(1, fileElements.length + gesture.placed.length + 1);
+        const tag = kind === "image" ? "img" : kind;
 
         let newId = "";
         let track = 0;
+        let start = normalizedStart;
         const insertAsset = (originalContent: string) => {
           newId = buildTimelineAssetId(assetPath, collectHtmlIds(originalContent));
           const resolved = resolveDropTrack({
             source: originalContent,
-            // insertRow counts the rows the timeline shows, so plan against those.
-            elements: relevantElements,
+            // Rows and insertRow count the rows the timeline shows; a track this drop opened has no others.
+            elements: gesture.onNewTrack ? [] : fileElements,
+            placed: gesture.placed,
             placement,
             dropped: {
               id: newId,
-              tag: kind === "image" ? "img" : kind,
+              tag,
               start: normalizedStart,
               duration: normalizedDuration,
             },
           });
           track = resolved.track;
+          start = resolved.start;
           return extendRootDurationInSource(
             insertTimelineAssetIntoSource(
               resolved.source,
@@ -151,7 +162,7 @@ export function useTimelineAssetDropOps({
                 hfId: `hf-${generateId()}`,
                 assetPath: resolvedAssetSrc,
                 kind,
-                start: normalizedStart,
+                start,
                 duration: normalizedDuration,
                 track,
                 zIndex: newElementZIndex,
@@ -162,7 +173,7 @@ export function useTimelineAssetDropOps({
                 ),
               }),
             ),
-            normalizedStart + normalizedDuration,
+            start + normalizedDuration,
           );
         };
 
@@ -178,7 +189,15 @@ export function useTimelineAssetDropOps({
         selectAndRevealTimelineElement(deriveTimelineStoreKeyForDomId(newId, targetPath));
         forceReloadSdkSession?.();
         reloadPreview();
-        return track;
+        const lane = placement.insertRow == null ? placement.track : track;
+        return {
+          id: newId,
+          tag,
+          start,
+          duration: normalizedDuration,
+          track: lane,
+          authoredTrack: track,
+        };
       } catch (error) {
         const message =
           error instanceof Error ? error.message : "Failed to drop asset onto timeline";
@@ -234,15 +253,18 @@ export function useTimelineAssetDropOps({
         placement ?? { start: 0, track: 0 },
         durations,
       );
-      let landedTrack: number | undefined;
+      const gesture: DropGesture = { placed: [], onNewTrack: false };
       for (const [index, assetPath] of uploaded.entries()) {
         const next = placements[index] ?? placements[0];
-        const track = await dropAssetAt(
+        const clip = await dropAssetAt(
           assetPath,
-          fileDropPlacement(index, next, placement, landedTrack),
+          fileDropPlacement(index, next, placement, gesture.placed.at(-1)),
           durations[index],
+          gesture,
         );
-        if (index === 0) landedTrack = track;
+        if (!clip) continue;
+        gesture.placed.push(clip);
+        if (index === 0 && placement?.insertRow != null) gesture.onNewTrack = true;
       }
     },
     [

package/src/hooks/useTimelineEditing.test.tsx

@@ -9,6 +9,18 @@ import { usePlayerStore, type TimelineElement } from "../player";
 import { jsonResponse, requestUrl } from "./fetchStubTestUtils";
 import { useElementLifecycleOps } from "./useElementLifecycleOps";
 import { useTimelineEditing } from "./useTimelineEditing";
+import {
+  buildMissingCompositionElements,
+  createTimelineElementFromManifestClip,
+  parseTimelineFromDOM,
+} from "../player/lib/timelineDOM";
+import type { ClipManifestClip, IframeWindow } from "../player/lib/playbackTypes";
+import { computeResizePreview } from "../player/components/timelineClipDragPreview";
+import {
+  buildTimelineGroupResizeMembers,
+  resolveTimelineGroupResizeChanges,
+} from "../player/components/timelineGroupEditing";
+import { createRuntimeStartTimeResolver } from "@hyperframes/core/runtime/start-resolver";
 
 vi.mock("../components/editor/manualEditingAvailability", async (importOriginal) => {
   const actual =
@@ -1969,3 +1981,375 @@ describe("useTimelineEditing effect saves report what happened", () => {
     unmount();
   });
 });
+
+// main 0 > intro 2 > logo 3 > badge 1: rows are master time, files are local.
+const NESTED_PREVIEW = `
+  <div data-composition-id="main" data-start="0" data-duration="20">
+    <div id="intro" data-hf-id="hf-intro" data-composition-id="intro" data-start="2" data-duration="10">
+      <div data-composition-id="intro" data-composition-file="compositions/intro.html">
+        <video id="vo" data-start="7" data-duration="2" data-hf-media-start-basis="global"></video>
+        <div id="logo" data-hf-id="hf-logo" data-composition-id="logo" data-start="3" data-duration="5">
+          <div data-composition-id="logo" data-composition-file="compositions/logo.html">
+            <div id="badge" data-hf-id="hf-badge" class="clip" data-start="1" data-duration="2"></div>
+            <div id="star" data-hf-id="hf-star" data-composition-id="star" data-start="1.5" data-duration="2">
+              <div data-composition-id="star" data-composition-file="compositions/star.html"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>`;
+const NESTED_FILES: Record<string, string> = {
+  "index.html": [
+    `<div data-composition-id="main" data-duration="20">`,
+    `  <div id="intro" data-composition-id="intro" data-composition-src="compositions/intro.html" data-start="2" data-duration="10"></div>`,
+    `</div>`,
+  ].join("\n"),
+  "compositions/intro.html": [
+    `<div data-composition-id="intro" data-duration="10">`,
+    `  <div id="intro-bg" class="clip" data-start="0" data-duration="10"></div>`,
+    `  <video id="vo" data-start="7" data-duration="2" data-hf-media-start-basis="global"></video>`,
+    `  <div id="logo" data-composition-id="logo" data-composition-src="compositions/logo.html" data-start="3" data-duration="5"></div>`,
+    `</div>`,
+  ].join("\n"),
+  "compositions/logo.html": [
+    `<div data-composition-id="logo" data-duration="5">`,
+    `  <div id="logo-bg" class="clip" data-start="0" data-duration="5"></div>`,
+    `  <div id="badge" class="clip" data-start="1" data-duration="2"></div>`,
+    `  <div id="star" data-composition-id="star" data-composition-src="compositions/star.html" data-start="1.5" data-duration="2"></div>`,
+    `</div>`,
+  ].join("\n"),
+};
+
+function setupNestedHarness() {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument!;
+  doc.body.innerHTML = NESTED_PREVIEW;
+  const row = (domId: string) => parseTimelineFromDOM(doc, 20).find((e) => e.domId === domId)!;
+  // The app's path: the runtime manifest's root clips, then the missing-host pass.
+  const manifestRow = (domId: string) => {
+    const intro = { id: "intro", start: 2, duration: 10, track: 0, kind: "composition" };
+    const clip = { ...intro, tagName: "div", compositionId: "intro" } as ClipManifestClip;
+    const hostEl = doc.getElementById("intro");
+    const roots = [createTimelineElementFromManifestClip({ clip, fallbackIndex: 0, doc, hostEl })];
+    const win = iframe.contentWindow as IframeWindow;
+    return buildMissingCompositionElements(doc, win, roots, 20).missing.find(
+      (e) => e.domId === domId,
+    )!;
+  };
+  const playsAt = (domId: string) => {
+    const resolver = createRuntimeStartTimeResolver({
+      includeAuthoredTimingAttrs: true,
+      documentRef: doc,
+    });
+    const el = doc.getElementById(domId)!;
+    return el.tagName === "VIDEO"
+      ? resolver.resolveMediaStartForElement(el)
+      : resolver.resolveStartForElement(el);
+  };
+  const writeProjectFile = vi.fn<(path: string, content: string) => Promise<void>>(async () => {});
+  const written = (path: string, domId: string, attr: string) => {
+    const call = writeProjectFile.mock.calls.find(([p]) => p === path);
+    if (!call) throw new Error(`nothing written to ${path}`);
+    const el = new DOMParser().parseFromString(call[1], "text/html").getElementById(domId);
+    return el?.getAttribute(attr);
+  };
+  const writtenRootDuration = (path: string) => {
+    const call = writeProjectFile.mock.calls.find(([p]) => p === path)!;
+    return new DOMParser()
+      .parseFromString(call[1], "text/html")
+      .querySelector("[data-composition-id]")
+      ?.getAttribute("data-duration");
+  };
+  const fetchMock = stubProjectFetch(NESTED_FILES);
+  const scaleCalls = () =>
+    fetchMock.mock.calls
+      .filter((call) => requestUrl(call[0]).includes("/gsap-mutations/"))
+      .map((call) => JSON.parse(String((call[1] as RequestInit).body)))
+      .filter((body) => body.type === "scale-positions");
+  usePlayerStore.getState().setDuration(20);
+  const hook = renderTimelineEditingHook({
+    timelineElements: parseTimelineFromDOM(doc, 20),
+    iframe,
+    onZIndexCommit: vi.fn().mockResolvedValue(undefined),
+    projectId: "p1",
+    writeProjectFile,
+    recordEdit: vi.fn(async () => {}),
+  });
+  return {
+    doc,
+    row,
+    manifestRow,
+    playsAt,
+    written,
+    writtenRootDuration,
+    writeProjectFile,
+    scaleCalls,
+    ...hook,
+  };
+}
+
+describe("useTimelineEditing: nested rows write composition-local starts", () => {
+  it("round-trips a depth-2 drag: drawn and played at the drop point, written local", async () => {
+    const h = setupNestedHarness();
+    const logo = h.row("logo");
+    expect(logo.start).toBe(5);
+
+    await act(async () => {
+      await h.move(logo, { start: 6, track: logo.track });
+    });
+
+    expect(h.written("compositions/intro.html", "logo", "data-start")).toBe("4");
+    expect(h.doc.getElementById("logo")?.getAttribute("data-start")).toBe("4");
+    expect(h.row("logo").start).toBe(6);
+    expect(h.playsAt("logo")).toBe(6);
+    expect(h.writtenRootDuration("compositions/intro.html")).toBe("10");
+    h.unmount();
+  });
+
+  it("round-trips a depth-3 drag through two enclosing hosts", async () => {
+    const h = setupNestedHarness();
+    const badge = h.row("badge");
+    expect(badge.start).toBe(6);
+
+    await act(async () => {
+      await h.move(badge, { start: 7, track: badge.track });
+    });
+
+    expect(h.written("compositions/logo.html", "badge", "data-start")).toBe("2");
+    expect(h.row("badge").start).toBe(7);
+    expect(h.playsAt("badge")).toBe(7);
+    expect(h.writtenRootDuration("compositions/logo.html")).toBe("5");
+    h.unmount();
+  });
+
+  it("round-trips a legacy root-time video inside a sub-composition, writing master time", async () => {
+    const h = setupNestedHarness();
+    const vo = h.row("vo");
+    expect(vo.start).toBe(7);
+
+    await act(async () => {
+      await h.move(vo, { start: 8, track: vo.track });
+    });
+
+    expect(h.written("compositions/intro.html", "vo", "data-start")).toBe("8");
+    expect(h.row("vo").start).toBe(8);
+    expect(h.playsAt("vo")).toBe(8);
+    h.unmount();
+  });
+
+  it("writes a local start on a head trim and leaves a tail trim's start alone", async () => {
+    const h = setupNestedHarness();
+    await act(async () => {
+      await h.resize(h.row("logo"), { start: 5.5, duration: 4.5, playbackStart: undefined });
+    });
+    expect(h.written("compositions/intro.html", "logo", "data-start")).toBe("3.5");
+    expect(h.written("compositions/intro.html", "logo", "data-duration")).toBe("4.5");
+    expect(h.row("logo")).toMatchObject({ start: 5.5, duration: 4.5 });
+
+    h.writeProjectFile.mockClear();
+    await act(async () => {
+      await h.resize(h.row("logo"), { start: 5.5, duration: 3, playbackStart: undefined });
+    });
+    expect(h.doc.getElementById("logo")?.getAttribute("data-start")).toBe("3.5");
+    expect(h.doc.getElementById("logo")?.getAttribute("data-duration")).toBe("3");
+    h.unmount();
+  });
+
+  it("scales a head-trimmed nested row's tweens over its local window", async () => {
+    const h = setupNestedHarness();
+    await act(async () => {
+      await h.resize(h.row("logo"), { start: 5.5, duration: 4.5, playbackStart: undefined });
+    });
+    expect(h.scaleCalls()).toEqual([
+      expect.objectContaining({ oldStart: 3, oldDuration: 5, newStart: 3.5, newDuration: 4.5 }),
+    ]);
+    h.unmount();
+  });
+
+  it("writes local starts and a local scale window for a nested group resize", async () => {
+    const h = setupNestedHarness();
+    await act(async () => {
+      await h.groupResize([{ element: h.row("logo"), start: 5.5, duration: 4.5 }]);
+    });
+    expect(h.written("compositions/intro.html", "logo", "data-start")).toBe("3.5");
+    expect(h.scaleCalls()).toEqual([
+      expect.objectContaining({ oldStart: 3, oldDuration: 5, newStart: 3.5, newDuration: 4.5 }),
+    ]);
+    h.unmount();
+  });
+
+  it("scales a legacy root-time video's tweens on its host's clock, single and group", async () => {
+    const window = { oldStart: 5, oldDuration: 2, newStart: 5.5, newDuration: 1.5 };
+    for (const group of [false, true]) {
+      const h = setupNestedHarness();
+      const vo = h.row("vo");
+      await act(async () => {
+        if (group) await h.groupResize([{ element: vo, start: 7.5, duration: 1.5 }]);
+        else await h.resize(vo, { start: 7.5, duration: 1.5, playbackStart: undefined });
+      });
+      expect(h.scaleCalls()).toEqual([expect.objectContaining(window)]);
+      h.unmount();
+      vi.unstubAllGlobals();
+    }
+  });
+
+  it("stops a head trim past the host's start at the host's start, end held", async () => {
+    const h = setupNestedHarness();
+    const logo = h.manifestRow("logo");
+    expect(logo).toMatchObject({ start: 5, duration: 5, parentCompositionStart: 2 });
+    const pps = 100;
+    const preview = computeResizePreview(
+      {
+        element: logo,
+        edge: "start",
+        originClientX: 0,
+        previewStart: 5,
+        previewDuration: 5,
+        started: true,
+        pointerId: 1,
+      },
+      -4 * pps,
+      { scroll: null, pps, buildSnapTargets: () => [] },
+    );
+    expect(preview).toMatchObject({ previewStart: 2, previewDuration: 8 });
+
+    await act(async () => {
+      await h.resize(logo, {
+        start: preview.previewStart,
+        duration: preview.previewDuration,
+        playbackStart: undefined,
+      });
+    });
+    expect(h.written("compositions/intro.html", "logo", "data-start")).toBe("0");
+    expect(h.written("compositions/intro.html", "logo", "data-duration")).toBe("8");
+    expect(h.row("logo")).toMatchObject({ start: 2, duration: 8 });
+    expect(h.scaleCalls()).toEqual([
+      expect.objectContaining({ oldStart: 3, oldDuration: 5, newStart: 0, newDuration: 8 }),
+    ]);
+    h.unmount();
+  });
+
+  it("stops a group head trim at the nested member's host start", async () => {
+    const h = setupNestedHarness();
+    const logo = h.manifestRow("logo");
+    const outro: TimelineElement = {
+      ...logo,
+      id: "outro",
+      key: "outro",
+      domId: undefined,
+      start: 12,
+      parentCompositionStart: 0,
+    };
+    const members = buildTimelineGroupResizeMembers(
+      [logo, outro],
+      new Set([logo.key ?? logo.id, "outro"]),
+      logo.key ?? logo.id,
+      "start",
+    )!;
+    const changes = resolveTimelineGroupResizeChanges(members, "start", -4);
+    const logoChange = changes.find((c) => c.key === (logo.key ?? logo.id))!;
+    expect(logoChange).toMatchObject({ start: 2, duration: 8 });
+
+    await act(async () => {
+      await h.groupResize([
+        { element: logo, start: logoChange.start, duration: logoChange.duration },
+      ]);
+    });
+    expect(h.written("compositions/intro.html", "logo", "data-start")).toBe("0");
+    expect(h.written("compositions/intro.html", "logo", "data-duration")).toBe("8");
+    expect(h.scaleCalls()).toEqual([
+      expect.objectContaining({ oldStart: 3, oldDuration: 5, newStart: 0, newDuration: 8 }),
+    ]);
+    h.unmount();
+  });
+
+  it("round-trips a depth-3 host from the manifest path", async () => {
+    const h = setupNestedHarness();
+    const star = h.manifestRow("star");
+    expect(star).toMatchObject({ start: 6.5, parentCompositionStart: 5 });
+
+    await act(async () => {
+      await h.move(star, { start: 7.5, track: star.track });
+    });
+
+    expect(h.written("compositions/logo.html", "star", "data-start")).toBe("2.5");
+    expect(h.playsAt("star")).toBe(7.5);
+    expect(h.manifestRow("star").start).toBe(7.5);
+    h.unmount();
+  });
+
+  it("clamps a nested row dropped before its host's start to the host's start", async () => {
+    const h = setupNestedHarness();
+    const logo = h.row("logo");
+    await act(async () => {
+      await h.move(logo, { start: 1, track: logo.track });
+    });
+    expect(h.written("compositions/intro.html", "logo", "data-start")).toBe("0");
+    expect(h.row("logo").start).toBe(2);
+    h.unmount();
+  });
+
+  it("writes local starts for nested rows in a group move", async () => {
+    const h = setupNestedHarness();
+    await act(async () => {
+      await h.groupMove([{ element: h.row("logo"), start: 6 }]);
+    });
+    expect(h.written("compositions/intro.html", "logo", "data-start")).toBe("4");
+    expect(h.row("logo").start).toBe(6);
+    h.unmount();
+  });
+
+  it("leaves a top-level row's start as written", async () => {
+    const h = setupNestedHarness();
+    const intro = h.row("intro");
+    expect(intro.parentCompositionStart).toBe(0);
+
+    await act(async () => {
+      await h.move(intro, { start: 3, track: intro.track });
+    });
+
+    expect(h.written("index.html", "intro", "data-start")).toBe("3");
+    expect(h.row("intro").start).toBe(3);
+    h.unmount();
+  });
+
+  it("hands the SDK a local start for a nested clip in the open file", async () => {
+    const source = [
+      `<div data-hf-id="hf-main" data-hf-root data-composition-id="main" data-duration="20">`,
+      `  <div id="intro" data-hf-id="hf-intro" data-composition-id="intro" data-start="2" data-duration="10">`,
+      `    <div id="clip" data-hf-id="hf-clip" data-start="1" data-duration="2"></div>`,
+      `  </div>`,
+      `</div>`,
+    ].join("\n");
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    iframe.contentDocument!.body.innerHTML = source;
+    const clip = parseTimelineFromDOM(iframe.contentDocument!, 20).find((e) => e.domId === "clip")!;
+    expect(clip.start).toBe(3);
+    const sdkSession = await openComposition(source);
+    const writeProjectFile = vi.fn<(...args: unknown[]) => Promise<void>>(async () => {});
+    stubProjectFetch(source);
+    usePlayerStore.getState().setDuration(20);
+    const hook = renderTimelineEditingHook({
+      timelineElements: [clip],
+      iframe,
+      onZIndexCommit: vi.fn().mockResolvedValue(undefined),
+      projectId: "p1",
+      writeProjectFile,
+      recordEdit: vi.fn(async () => {}),
+      sdkSession,
+      publishSdkSession: vi.fn<TimelinePublishSdkSession>(() => "published"),
+    });
+
+    await act(async () => {
+      await hook.move(clip, { start: 4, track: clip.track });
+    });
+
+    expect(writeProjectFile.mock.calls[0]?.[1]).toContain(
+      'id="clip" data-hf-id="hf-clip" data-start="2"',
+    );
+    hook.unmount();
+  });
+});