@hyperframes/studio 0.8.96 → 0.8.97

package/src/player/hooks/useTimelinePlayer.shadowReload.test.ts

@@ -543,6 +543,75 @@ describe("shadow reload store ownership and readiness", () => {
     unmount(root);
   });
 
+  it("takes a section the edit removed off the timeline, though the old document still has it", () => {
+    const { getApi, gen, liveIframe, shadowIframe, root } = setup();
+    const host = (id: string) =>
+      `<div id="${id}" data-composition-id="${id}" data-composition-src="compositions/${id}.html" data-start="0" data-duration="3"></div>`;
+    liveIframe.contentDocument!.body.innerHTML = `<div data-composition-id="main">${host("benefit")}<p id="a"></p></div>`;
+    shadowIframe.contentDocument!.body.innerHTML = `<div data-composition-id="main"><p id="a"></p></div>`;
+    const a = { id: "a", domId: "a", tag: "p", start: 0, duration: 3, track: 0 };
+    const benefit = {
+      id: "benefit",
+      domId: "benefit",
+      tag: "div",
+      kind: "composition" as const,
+      start: 0,
+      duration: 3,
+      track: 1,
+      compositionSrc: "compositions/benefit.html",
+    };
+    act(() => usePlayerStore.getState().setElements([a, benefit]));
+    (shadowIframe.contentWindow as Record<string, unknown>).__clipManifest = {
+      source: "hf-preview",
+      type: "timeline",
+      durationInFrames: 1260,
+      clips: [
+        { id: "a", label: "A", start: 0, duration: 3, track: 0, kind: "element", tagName: "p" },
+      ],
+    };
+    act(() => getApi().onShadowIframeLoad(gen));
+    act(() => getApi().onShadowReadyChange(gen, true));
+    expect(usePlayerStore.getState().elements.map((element) => element.id)).toEqual(["a"]);
+    unmount(root);
+  });
+
+  it("keeps a section the new document still hosts but its manifest misses, without dropping it once", () => {
+    const { getApi, gen, liveIframe, shadowIframe, root } = setup();
+    const film = `<div data-composition-id="main"><div id="benefit" data-composition-id="benefit"
+      data-composition-src="compositions/benefit.html" data-start="0" data-duration="3"></div><p id="a"></p></div>`;
+    liveIframe.contentDocument!.body.innerHTML = film;
+    shadowIframe.contentDocument!.body.innerHTML = film;
+    const a = { id: "a", domId: "a", tag: "p", start: 0, duration: 3, track: 0 };
+    // As enrichment adds it: no kind.
+    const benefit = {
+      id: "benefit",
+      domId: "benefit",
+      tag: "div",
+      start: 0,
+      duration: 3,
+      track: 1,
+      compositionSrc: "compositions/benefit.html",
+    };
+    act(() => usePlayerStore.getState().setElements([a, benefit]));
+    const seen: string[][] = [];
+    const stop = usePlayerStore.subscribe((state) =>
+      seen.push(state.elements.map((element) => element.id)),
+    );
+    (shadowIframe.contentWindow as Record<string, unknown>).__clipManifest = {
+      source: "hf-preview",
+      type: "timeline",
+      durationInFrames: 1260,
+      clips: [
+        { id: "a", label: "A", start: 0, duration: 3, track: 0, kind: "element", tagName: "p" },
+      ],
+    };
+    act(() => getApi().onShadowIframeLoad(gen));
+    act(() => getApi().onShadowReadyChange(gen, true));
+    stop();
+    expect(seen.every((ids) => ids.includes("benefit"))).toBe(true);
+    unmount(root);
+  });
+
   it("never writes a failed shadow's timeline into the store", () => {
     vi.spyOn(console, "error").mockImplementation(() => {});
     const { getApi, gen, root } = setup();

package/src/player/hooks/useTimelinePlayer.ts

@@ -28,6 +28,7 @@ export {
 import type { PlaybackAdapter, IframeWindow } from "../lib/playbackTypes";
 import { releaseStaticSeekCache, type StaticSeekCacheEntry } from "../lib/playbackAdapter";
 import { mergeTimelineElementsPreservingDowngrades } from "../lib/timelineDOM";
+import { findTimelineElementInIframe } from "../../hooks/timelineEditingHelpers";
 import { normalizeToZones } from "../components/timelineZones";
 import { applyPreviewAudioFlags, setPreviewPlaybackRate } from "../lib/timelineIframeHelpers";
 import { scrubMusicAtSeek, stopScrubPreviewAudio } from "../lib/playbackScrub";
@@ -92,6 +93,11 @@ export function useTimelinePlayer({
             elements,
             state.duration,
             resolvedDuration,
+            (element) =>
+              findTimelineElementInIframe(iframeRef.current, {
+                ...element,
+                kind: "composition",
+              }) !== null,
           ),
           state.timelineProjectId,
         ),

package/src/player/lib/timelineDOM.test.ts

@@ -71,6 +71,20 @@ describe("parseTimelineFromDOM — nested master time", () => {
   });
 });
 
+describe("parseTimelineFromDOM — repeated sections", () => {
+  it("names each instance by its authored id and keeps them apart", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="main" data-start="0" data-duration="20">
+        <div data-composition-id="card__hf1" data-hf-original-composition-id="card" data-start="0" data-duration="4"></div>
+        <div data-composition-id="card__hf2" data-hf-original-composition-id="card" data-start="4" data-duration="4"></div>
+      </div>
+    `);
+    const rows = parseTimelineFromDOM(doc, 20);
+    expect(rows.map((e) => e.label)).toEqual(["card", "card"]);
+    expect(new Set(rows.map((e) => e.id)).size).toBe(2);
+  });
+});
+
 describe("parseTimelineFromDOM — nested rows' keyframe basis", () => {
   const doc = () =>
     makeDoc(`
@@ -534,6 +548,17 @@ describe("mergeTimelineElementsPreservingDowngrades — genuine removal vs trans
     expect(merged.map((e) => e.id).sort()).toEqual(["a", "sub-child"]);
   });
 
+  it("drops a section whose host left the preview (undo of an agent's build)", () => {
+    const current = [
+      el("a"),
+      el("benefit-fresh", { compositionSrc: "compositions/benefit-fresh.html" }),
+    ];
+    const next = [el("a")]; // the reverted film's manifest: the built section is gone
+    const inPreview = (element: { id: string }) => element.id !== "benefit-fresh";
+    const merged = mergeTimelineElementsPreservingDowngrades(current, next, 30, 30, inPreview);
+    expect(merged.map((e) => e.id)).toEqual(["a"]);
+  });
+
   it("trusts the fresh scan fully when it is not shorter", () => {
     const current = [el("a"), el("b", { compositionSrc: "sub.html" })];
     const next = [el("a"), el("c")];

package/src/player/lib/timelineDOM.ts

@@ -265,7 +265,7 @@ export function parseTimelineFromDOM(
     const sourceFile = getTimelineElementSourceFile(el);
     const selectorIndex = getTimelineElementSelectorIndex(doc, el, selector);
     const label = getTimelineElementDisplayLabel({
-      id: el.id || compId || null,
+      id: el.id || el.getAttribute("data-hf-original-composition-id") || compId || null,
       label: el.getAttribute("data-timeline-label") ?? el.getAttribute("data-label"),
       tag: tagLower,
     });
@@ -382,6 +382,7 @@ export function mergeTimelineElementsPreservingDowngrades(
   nextElements: TimelineElement[],
   currentDuration: number,
   nextDuration: number,
+  stillInPreview: (element: TimelineElement) => boolean = () => true,
 ): TimelineElement[] {
   const safeCurrentDuration = Number.isFinite(currentDuration) ? currentDuration : 0;
   const safeNextDuration = Number.isFinite(nextDuration) ? nextDuration : 0;
@@ -403,7 +404,8 @@ export function mergeTimelineElementsPreservingDowngrades(
       // re-adds. A TOP-LEVEL element missing from the fresh scan was genuinely
       // removed (undo of a split, a delete), so let it go — otherwise undoing a
       // split leaves a ghost clip in the timeline even though the file is reverted.
-      element.compositionSrc != null,
+      element.compositionSrc != null &&
+      stillInPreview(element),
   );
   if (preserved.length === 0) return nextElements;
   return [...nextElements, ...preserved];

package/src/player/lib/timelineIframeHelpers.test.ts

@@ -9,6 +9,7 @@ import {
   stopScrubPreviewAudio,
 } from "./timelineIframeHelpers";
 import type { IframeWindow } from "./playbackTypes";
+import { findTimelineElementInIframe } from "../../hooks/timelineEditingHelpers";
 
 function makeDoc(html: string): Document {
   const d = document.implementation.createHTMLDocument();
@@ -42,6 +43,20 @@ describe("buildMissingCompositionElements — hfId (R7)", () => {
     expect([patched, updatedEls[0]?.compositionSrc]).toEqual([true, "compositions/scene.html"]);
   });
 
+  it("adds a host the lookup finds in its preview, as a composition", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root">
+        <div id="benefit-fresh" data-composition-id="benefit-fresh" data-composition-src="compositions/benefit-fresh.html"
+          data-start="0" data-duration="3"></div>
+      </div>
+    `);
+    const { missing } = buildMissingCompositionElements(doc, window as IframeWindow, [], 10);
+    const iframe = { contentDocument: doc } as unknown as HTMLIFrameElement;
+    expect(findTimelineElementInIframe(iframe, { ...missing[0]!, kind: "composition" })).toBe(
+      doc.getElementById("benefit-fresh"),
+    );
+  });
+
   it("harvests hfId from data-hf-id on composition host elements", () => {
     const doc = makeDoc(`
       <div data-composition-id="root">

package/src/player/store/playerStore.ts

@@ -257,10 +257,10 @@ interface BeatHistoryEntry {
 /** Selects like the marquee: the primary first, so its resets run, then the whole set. */
 function selectAroundPlayhead(
   state: PlayerState,
-  keep: (start: number, playhead: number) => boolean,
+  keep: (el: TimelineElement, playhead: number) => boolean,
 ): void {
   const playhead = state.isPlaying ? liveTime.latest() : state.currentTime;
-  const ids = state.elements.filter((el) => keep(el.start, playhead)).map((el) => el.key ?? el.id);
+  const ids = state.elements.filter((el) => keep(el, playhead)).map((el) => el.key ?? el.id);
   state.setSelectedElementId(ids[0] ?? null);
   state.setSelectedElementIds(new Set(ids));
 }
@@ -289,8 +289,8 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
 
   activeTool: "select",
   setActiveTool: (tool) => set({ activeTool: tool }),
-  selectLeftward: () => selectAroundPlayhead(get(), (start, playhead) => start < playhead),
-  selectRightward: () => selectAroundPlayhead(get(), (start, playhead) => start >= playhead),
+  selectLeftward: () => selectAroundPlayhead(get(), (el, t) => el.start < t),
+  selectRightward: () => selectAroundPlayhead(get(), (el, t) => el.start + el.duration > t),
 
   ...createKeyframeSlice(set, () => ({
     timelineProjectId: get().timelineProjectId,

package/src/utils/clipboardLook.test.ts

@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+import gsap from "gsap";
+import { afterEach, describe, expect, it } from "vitest";
+import { pasteTimelineClips } from "../hooks/useClipboard";
+
+const GOODBYE =
+  '<h2 id="goodbye" class="clip" data-start="1" data-duration="3" data-track-index="3">Goodbye</h2>';
+const FILM = `<!doctype html>
+<html>
+  <head>
+    <style>
+      #goodbye {
+        color: #f97316;
+        font-size: 96px;
+      }
+      #title { font-size: 72px; }
+    </style>
+  </head>
+  <body>
+    <div id="root" data-composition-id="main" data-start="0" data-duration="10">
+      <h1 id="title" class="clip" data-start="0" data-duration="10" data-track-index="0">Title</h1>
+      ${GOODBYE}
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      tl.from("#goodbye", { opacity: 0, y: 40, duration: 0.5 }, 1);
+      tl.to("#title", { opacity: 0.5, duration: 2 });
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>`;
+
+const goodbye = { html: GOODBYE, start: 1, duration: 3, track: 3 };
+
+/** Runs the film's own script with real GSAP and says when each tween starts, by its target's id. */
+function tweenStarts(html: string): Array<[string, number]> {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  document.body.innerHTML = doc.body.innerHTML;
+  const win = window as unknown as { __timelines: Record<string, gsap.core.Timeline> };
+  win.__timelines = {};
+  new Function("gsap", doc.querySelector("script")?.textContent ?? "")(gsap);
+  return win.__timelines
+    .main!.getChildren()
+    .map((tween) => [(tween.targets()[0] as Element).id, tween.startTime()] as [string, number])
+    .sort(([a], [b]) => a.localeCompare(b));
+}
+
+/** The declarations the film's styles give the rules for `selector`. */
+function rulesFor(html: string, selector: string): string[] {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(
+    new DOMParser().parseFromString(html, "text/html").querySelector("style")!.textContent!,
+  );
+  return Array.from(sheet.cssRules)
+    .filter(
+      (rule): rule is CSSStyleRule =>
+        rule instanceof CSSStyleRule && rule.selectorText === selector,
+    )
+    .map((rule) => rule.style.cssText);
+}
+
+describe("a pasted clip takes its original's look and motion", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("copies the id's rules and tweens for the renamed copy, moved to where it lands", () => {
+    const { content } = pasteTimelineClips(FILM, [goodbye], 4, [], true);
+
+    expect(content).toContain('id="goodbye-2"');
+    expect(rulesFor(content, "#goodbye-2")).toEqual(rulesFor(FILM, "#goodbye"));
+    expect(tweenStarts(content)).toEqual([
+      ["goodbye", 1],
+      ["goodbye-2", 4],
+      ["title", 1.5],
+    ]);
+    // The original's own motion is untouched: the copy's tween does not push the title's.
+    expect(tweenStarts(FILM)).toEqual([
+      ["goodbye", 1],
+      ["title", 1.5],
+    ]);
+  });
+
+  it("never moves the film's own tweens, whatever their timing, and runs a timeline declared in a block", () => {
+    const film = FILM.replace(
+      /    <script>[\s\S]*<\/script>/,
+      `    <script>
+      if (gsap) {
+        const tl = gsap.timeline({ paused: true });
+        const title = "#title";
+        tl.from("#goodbye", { opacity: 0, duration: 0.5, stagger: 0.1, delay: 0.2 }, 1);
+        tl.to(title, { opacity: 0.5, duration: 1 });
+        tl.addLabel("late", "+=0.5");
+        tl.to("#goodbye", { y: 10, duration: 0.5 }, "late");
+        for (const id of ["#title"]) tl.to(id, { x: 5, duration: 0.5 });
+        tl.to("#goodbye", { scale: 1.1, duration: 0.5 });
+        tl.to(title, { y: 5, duration: 0.5 });
+        window.__timelines["main"] = tl;
+      }
+    </script>`,
+    );
+    const { content } = pasteTimelineClips(film, [goodbye], 4, [], true);
+    const own = (html: string) => tweenStarts(html).filter(([id]) => id !== "goodbye-2");
+    expect(own(content)).toEqual(own(film));
+    // Only the tween at a number is copied: its copy starts 3 s after it (1.2 s with its delay), like the clip.
+    expect(tweenStarts(content).filter(([id]) => id === "goodbye-2")).toEqual([["goodbye-2", 4.2]]);
+  });
+
+  it("copies only the selectors naming the original, and leaves a style inside a script alone", () => {
+    const styleInScript = `document.head.insertAdjacentHTML("beforeend", "<style>#goodbye{color:red}</style>");`;
+    const film = FILM.replace(
+      "      #title { font-size: 72px; }",
+      "      #title, #goodbye { letter-spacing: 2px; }\n      #title { letter-spacing: 9px; }",
+    ).replace("      window.__timelines", `      ${styleInScript}\n      window.__timelines`);
+    const { content } = pasteTimelineClips(film, [goodbye], 4, [], true);
+
+    expect(rulesFor(content, "#goodbye-2")).toEqual([
+      ...rulesFor(film, "#goodbye"),
+      "letter-spacing: 2px;",
+    ]);
+    expect(content.match(/#title/g)?.length).toBe(film.match(/#title/g)?.length);
+    expect(content).toContain(styleInScript);
+  });
+
+  it("copies nothing for a clip from another file, whose id means something else here", () => {
+    const { content } = pasteTimelineClips(FILM, [goodbye], 4, []);
+    expect(rulesFor(content, "#goodbye-2")).toEqual([]);
+    expect(tweenStarts(content).map(([id]) => id)).toEqual(["goodbye", "title"]);
+  });
+});

package/src/utils/clipboardLook.ts

@@ -0,0 +1,82 @@
+import { copyAnimationsInScript } from "@hyperframes/parsers/gsap-writer-acorn";
+import { ID_ATTR_RE } from "./clipboardPayload";
+import { escapeRegex } from "./sourcePatcher";
+
+const ID_ATTRS = new RegExp(ID_ATTR_RE.source, "g");
+// One pass over both, so a `<style>` written inside a script's text is left as script.
+const BLOCKS =
+  /(<script\b(?![^>]*\bsrc=)[^>]*>)([\s\S]*?)(<\/script>)|(<style\b[^>]*>)([\s\S]*?)(<\/style>)/gi;
+
+/** Each id a paste renamed (`goodbye` to `goodbye-2`), from the same markup before and after the rename. */
+export function renamedIds(before: string, after: string): Map<string, string> {
+  const ids = (html: string) => Array.from(html.matchAll(ID_ATTRS), (match) => match[1] as string);
+  const renamed = ids(after);
+  const renames = new Map<string, string>();
+  ids(before).forEach((from, index) => {
+    const to = renamed[index];
+    if (to && to !== from) renames.set(from, to);
+  });
+  return renames;
+}
+
+/** Gives each renamed copy the look and motion its original has in `html`: a copy of every CSS rule keyed to
+ *  the original's id, and of every tween on it, moved by `delta` seconds. */
+export function carryLook(
+  html: string,
+  renames: ReadonlyMap<string, string>,
+  delta: number,
+): string {
+  let result = html;
+  for (const [from, to] of renames) {
+    result = result.replace(
+      BLOCKS,
+      (block, scriptOpen, script, scriptClose, styleOpen, css, styleClose) =>
+        scriptOpen !== undefined
+          ? scriptOpen + copyAnimationsInScript(script, `#${from}`, `#${to}`, delta) + scriptClose
+          : styleOpen !== undefined
+            ? styleOpen + withCopiedRules(css, from, to) + styleClose
+            : block,
+    );
+  }
+  return result;
+}
+
+// Top-level rules only: a rule inside @media or @supports is not copied.
+function withCopiedRules(css: string, from: string, to: string): string {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(css);
+  const id = new RegExp(`#${escapeRegex(from)}(?![\\w-])`, "g");
+  const excluded = new RegExp(`:not\\([^)]*#${escapeRegex(from)}(?![\\w-])`);
+  const indent = css.match(/\n([ \t]*)\S/)?.[1] ?? "";
+  const copies = Array.from(sheet.cssRules).flatMap((rule) => {
+    if (!(rule instanceof CSSStyleRule)) return [];
+    // Only the selectors naming the original, so the copy restyles nothing else.
+    const selectors = selectorList(rule.selectorText).filter(
+      (selector) => selector.match(id) && !excluded.test(selector),
+    );
+    if (selectors.length === 0) return [];
+    const copied = selectors.map((selector) => selector.replace(id, `#${to}`)).join(", ");
+    return [`\n${indent}${copied}${rule.cssText.slice(rule.selectorText.length)}`];
+  });
+  if (copies.length === 0) return css;
+  const body = css.trimEnd();
+  return body + copies.join("") + css.slice(body.length);
+}
+
+/** A selector list's own entries: its commas outside brackets and parentheses. */
+function selectorList(text: string): string[] {
+  const selectors: string[] = [];
+  let depth = 0;
+  let start = 0;
+  for (let index = 0; index < text.length; index++) {
+    const char = text[index];
+    if (char === "(" || char === "[") depth++;
+    else if (char === ")" || char === "]") depth--;
+    else if (char === "," && depth === 0) {
+      selectors.push(text.slice(start, index).trim());
+      start = index + 1;
+    }
+  }
+  selectors.push(text.slice(start).trim());
+  return selectors;
+}

package/src/utils/clipboardPayload.ts

@@ -12,7 +12,12 @@ export interface TimelineClipboardClip {
 }
 
 export type ClipboardPayload =
-  | { kind: "timeline-clip"; clips: TimelineClipboardClip[]; sourceFile: string }
+  | {
+      kind: "timeline-clip";
+      clips: TimelineClipboardClip[];
+      sourceFile: string;
+      projectId?: string;
+    }
   | {
       kind: "dom-element";
       html: string;
@@ -56,7 +61,8 @@ export function deserializeClipboardPayload(json: string): ClipboardPayload | nu
       );
     });
     if (clips.length === 0) return null;
-    return { kind: "timeline-clip", clips, sourceFile: obj.sourceFile };
+    const projectId = typeof obj.projectId === "string" ? obj.projectId : undefined;
+    return { kind: "timeline-clip", clips, sourceFile: obj.sourceFile, projectId };
   }
   if (obj.kind === "dom-element") {
     if (typeof obj.html !== "string") return null;

package/src/utils/studioFontHelpers.ts

@@ -52,7 +52,7 @@ export function injectPreviewGoogleFont(doc: Document, fontFamilyValue: string):
 }
 
 export function injectPreviewImportedFont(doc: Document, asset: ImportedFontAsset): void {
-  const id = `studio-imported-font-${asset.family.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+  const id = `studio-imported-font-${asset.path.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
   if (doc.getElementById(id)) return;
   const style = doc.createElement("style");
   style.id = id;
@@ -72,12 +72,15 @@ export function ensureImportedFontFace(
   const styleMatch = styleRe.exec(html);
   if (styleMatch) {
     const nextCss = `${styleMatch[2].trim()}\n${css}`.trim();
-    return html.replace(styleMatch[0], `<style data-hf-studio-fonts="true">\n${nextCss}\n</style>`);
+    return html.replace(
+      styleMatch[0],
+      () => `<style data-hf-studio-fonts="true">\n${nextCss}\n</style>`,
+    );
   }
 
   const styleTag = `<style data-hf-studio-fonts="true">\n${css}\n</style>`;
   if (/<\/head>/i.test(html)) {
-    return html.replace(/<\/head>/i, `  ${styleTag}\n  </head>`);
+    return html.replace(/<\/head>/i, () => `  ${styleTag}\n  </head>`);
   }
   return `${styleTag}\n${html}`;
 }