@hyperframes/studio 0.7.77 → 0.7.79

package/src/hooks/gsapShared.writeTarget.test.ts

@@ -0,0 +1,289 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { parseGsapScript } from "@hyperframes/core/gsap-parser";
+import { addAnimationWithKeyframesToScript } from "@hyperframes/parsers/gsap-writer-acorn";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { buildStableSelector, getSelectorIndex } from "../components/editor/domEditingDom";
+import { resolveSelectorElementIds, tweenTargetsElement, writeTargetSelector } from "./gsapShared";
+import { commitKeyframeAtTimeImpl } from "./gsapKeyframeCommit";
+import { promoteSetToKeyframes } from "./useEnableKeyframes";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+/**
+ * A selection built the way production builds it (getDomLayerPatchTarget), so
+ * the class-only case under test is the real one: buildStableSelector hands back
+ * a BARE class for an element with no id / hf-id / composition id.
+ */
+function selectionFor(el: HTMLElement): DomEditSelection {
+  const selector = buildStableSelector(el);
+  return {
+    element: el,
+    id: el.id || undefined,
+    hfId: el.getAttribute("data-hf-id") || undefined,
+    selector,
+    selectorIndex: getSelectorIndex(document, el, selector, "index.html", null),
+    sourceFile: "index.html",
+    dataAttributes: { start: "0", duration: "2" },
+  } as unknown as DomEditSelection;
+}
+
+/** Five class-only siblings — the shape that made one add collapse the timeline. */
+function mountGroupSiblings(): HTMLElement[] {
+  document.body.innerHTML = `
+    <div id="scene" class="clip" data-start="0" data-duration="2">
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+    </div>
+  `;
+  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
+}
+
+const BASE_SCRIPT = `
+const tl = gsap.timeline({ paused: true });
+tl.to("#scene", { opacity: 1, duration: 0.5 }, 0);
+`.trim();
+
+const KEYFRAMES = [
+  { percentage: 0, properties: { x: 0 } },
+  { percentage: 100, properties: { x: 40 } },
+];
+
+/** Author the selector into a real script and read the tween's targets back. */
+function roundTripTargets(selector: string): { script: string; targets: string[] } {
+  const { script } = addAnimationWithKeyframesToScript(BASE_SCRIPT, selector, 0, 1, KEYFRAMES);
+  const added = parseGsapScript(script).animations.find((a) => a.targetSelector === selector);
+  if (!added) throw new Error(`written selector did not re-parse: ${selector}`);
+  return { script, targets: resolveSelectorElementIds(added.targetSelector, document) };
+}
+
+describe("writeTargetSelector", () => {
+  it("addresses exactly one element when the only identity is a shared class", () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[2]);
+
+    // Precondition: this is the defect's input — a bare class hitting all five.
+    expect(selection.selector).toBe(".group");
+    expect(document.querySelectorAll(".group")).toHaveLength(5);
+
+    const written = writeTargetSelector(selection);
+
+    expect(written).toBeTruthy();
+    expect(document.querySelectorAll(written!)).toHaveLength(1);
+    expect(document.querySelector(written!)).toBe(groups[2]);
+  });
+
+  it("keeps a unique #id target", () => {
+    document.body.innerHTML = `<div id="box" class="card"></div>`;
+    const el = document.querySelector<HTMLElement>("#box")!;
+
+    expect(writeTargetSelector(selectionFor(el))).toBe("#box");
+  });
+
+  it("prefers data-hf-id over a generated structural selector", () => {
+    document.body.innerHTML = `
+      <div id="scene"><div class="group"></div><div class="group" data-hf-id="hf-42"></div></div>
+    `;
+    const el = document.querySelectorAll<HTMLElement>(".group")[1]!;
+
+    const written = writeTargetSelector(selectionFor(el));
+
+    expect(written).toBe('[data-hf-id="hf-42"]');
+    expect(document.querySelector(written!)).toBe(el);
+  });
+
+  it("keeps an already-unique class selector as authored", () => {
+    document.body.innerHTML = `<div id="scene"><div class="header"></div></div>`;
+    const el = document.querySelector<HTMLElement>(".header")!;
+
+    expect(writeTargetSelector(selectionFor(el))).toBe(".header");
+  });
+
+  it("hands identity back to a data-hf-id ancestor part way up a deep chain", () => {
+    // Mixed identity: the walk must step past the id-less <section>, stop at the
+    // data-hf-id row, and NOT keep climbing to #outer.
+    document.body.innerHTML = `
+      <div id="outer">
+        <header></header>
+        <section>
+          <div data-hf-id="mid">
+            <div class="cell"></div>
+            <div class="cell"></div>
+            <div class="cell"></div>
+          </div>
+        </section>
+      </div>
+    `;
+    const el = document.querySelectorAll<HTMLElement>(".cell")[2]!;
+
+    const written = writeTargetSelector(selectionFor(el));
+
+    expect(written).toBe('[data-hf-id="mid"] > div:nth-child(3)');
+    expect(document.querySelectorAll(written!)).toHaveLength(1);
+    expect(document.querySelector(written!)).toBe(el);
+  });
+
+  it("falls through to the structural walk when the selection's selector is not valid CSS", () => {
+    document.body.innerHTML = `<div id="scene"><div></div><div></div></div>`;
+    const el = document.querySelectorAll<HTMLElement>("#scene > div")[1]!;
+    // querySelectorAll throws on this, so the "does it match exactly one?" rung
+    // must read as a miss rather than crashing the add.
+    const selection = { ...selectionFor(el), selector: "div[unclosed" } as DomEditSelection;
+
+    expect(writeTargetSelector(selection)).toBe("#scene > div:nth-child(2)");
+  });
+
+  it("returns null when a live DOM is present and no rung addresses one element", () => {
+    document.body.innerHTML = `<div id="scene"><div class="group"></div><div class="group"></div></div>`;
+    const el = document.querySelectorAll<HTMLElement>(".group")[1]!;
+    const selection = selectionFor(el);
+    expect(selection.selector).toBe(".group");
+    // Detached between selecting and committing: ownerDocument still resolves,
+    // but there is no parent to count a :nth-child position in. Returning
+    // ".group" here would re-author the very selector this function replaces.
+    el.remove();
+
+    expect(writeTargetSelector(selection)).toBeNull();
+  });
+
+  it("still returns the selection's own selector when there is no DOM to check against", () => {
+    const selection = {
+      selector: ".group",
+      sourceFile: "index.html",
+    } as unknown as DomEditSelection;
+
+    expect(writeTargetSelector(selection)).toBe(".group");
+  });
+});
+
+describe("writeTargetSelector — write/read round trip", () => {
+  it("re-parses and attributes the new tween to the one element it targeted", () => {
+    const groups = mountGroupSiblings();
+    // Ids let resolveSelectorElementIds name the attributed elements; the
+    // SELECTION still has none, so the write path still faces the bare class.
+    groups.forEach((el, i) => el.setAttribute("id", `group-${i}`));
+    const selection = { ...selectionFor(groups[2]), id: undefined } as DomEditSelection;
+
+    const written = writeTargetSelector(selection);
+    const { targets } = roundTripTargets(written!);
+
+    expect(targets).toEqual(["group-2"]);
+  });
+
+  it("does not widen the add to the element's four class siblings", () => {
+    const groups = mountGroupSiblings();
+    groups.forEach((el, i) => el.setAttribute("id", `group-${i}`));
+    const selection = { ...selectionFor(groups[0]), id: undefined } as DomEditSelection;
+
+    // The old bare-class write attributed the one add to every sibling — the
+    // attribution blow-up behind "one add collapsed the timeline to a single row".
+    expect(roundTripTargets(".group").targets).toHaveLength(5);
+
+    expect(roundTripTargets(writeTargetSelector(selection)!).targets).toHaveLength(1);
+  });
+});
+
+describe("existingTweenTargetSelector", () => {
+  it("keeps the narrowed target when a replace re-authors the tween", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[2]);
+    const commitMutation = vi.fn(async () => undefined);
+    // A tween a previous add already narrowed to one sibling. Re-deriving the
+    // target from the selection would widen it back to all five.
+    const setAnim = {
+      id: "a1",
+      targetSelector: "#scene > div:nth-child(3)",
+      method: "set",
+      position: 0,
+      properties: { x: 10 },
+    };
+
+    await promoteSetToKeyframes({ commitMutation } as never, selection, setAnim as never, 0, null);
+
+    const mutation = commitMutation.mock.calls[0]?.[0] as { targetSelector: string };
+    expect(mutation.targetSelector).toBe("#scene > div:nth-child(3)");
+    expect(document.querySelectorAll(mutation.targetSelector)).toHaveLength(1);
+  });
+
+  it("falls back to the selection when the tween's own target did not resolve", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[2]);
+    const commitMutation = vi.fn(async () => undefined);
+    const setAnim = {
+      id: "a1",
+      targetSelector: "targets[i]",
+      hasUnresolvedSelector: true,
+      method: "set",
+      position: 0,
+      properties: { x: 10 },
+    };
+
+    await promoteSetToKeyframes({ commitMutation } as never, selection, setAnim as never, 0, null);
+
+    const mutation = commitMutation.mock.calls[0]?.[0] as { targetSelector: string };
+    expect(mutation.targetSelector).toBe(".group");
+  });
+});
+
+describe("commitKeyframeAtTimeImpl — new-tween target", () => {
+  it("authors a one-element selector when no tween exists at the playhead", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[3]);
+    const commitMutation = vi.fn(async () => undefined);
+
+    await commitKeyframeAtTimeImpl(selection, 1, [], { x: 12 }, commitMutation);
+
+    const mutation = commitMutation.mock.calls[0]?.[1] as { targetSelector: string };
+    expect(mutation.targetSelector).not.toBe(".group");
+    expect(document.querySelectorAll(mutation.targetSelector)).toHaveLength(1);
+    expect(document.querySelector(mutation.targetSelector)).toBe(groups[3]);
+  });
+});
+
+describe("tweenTargetsElement", () => {
+  it("matches a tween narrowed to this element by a selector the selection does not use", () => {
+    const groups = mountGroupSiblings();
+    groups[2]!.id = "narrowed";
+
+    // The write half authored "#narrowed"; the read half still has ".group".
+    expect(tweenTargetsElement("#narrowed", ".group", groups[2])).toBe(true);
+  });
+
+  it("does not hand an individual element the group tween it merely inherits", () => {
+    const groups = mountGroupSiblings();
+
+    // Selecting one sibling by its own address must not let an edit mutate the
+    // ".group" tween: that write moves all five, not the one being nudged.
+    expect(tweenTargetsElement(".group", "#scene > div:nth-child(3)", groups[2])).toBe(false);
+  });
+
+  it("still edits a group tween when the group itself is the selection", () => {
+    const groups = mountGroupSiblings();
+
+    expect(tweenTargetsElement(".group", ".group", groups[0])).toBe(true);
+  });
+
+  it("does not match a target that is not a selector matches() understands", () => {
+    const groups = mountGroupSiblings();
+
+    expect(tweenTargetsElement("div[unclosed", ".group", groups[0])).toBe(false);
+  });
+});
+
+describe("commitKeyframeAtTimeImpl — no one-element target", () => {
+  it("drops the keyframe rather than authoring the bare class", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[3]!);
+    groups[3]!.remove();
+    const commitMutation = vi.fn(async () => undefined);
+
+    await commitKeyframeAtTimeImpl(selection, 1, [], { x: 12 }, commitMutation);
+
+    expect(commitMutation).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/keyframeCacheAstLoad.ts

@@ -1,6 +1,6 @@
 /**
- * Reading a composition file's GSAP tweens into the keyframe cache: fetch,
- * selector -> element id resolution, and the clip-relative timing basis.
+ * Reading a composition file's GSAP tweens into the keyframe cache: fetch and
+ * selector -> element id resolution.
  * Split from useGsapTweenCache to keep that file under the 600-line limit.
  */
 import type { GsapAnimation, GsapKeyframesData, ParsedGsap } from "@hyperframes/core/gsap-parser";
@@ -11,50 +11,15 @@ import {
   elementCacheKeys,
   writeGsapAnimationsForElement,
 } from "./gsapKeyframeCacheHelpers";
-import { idFromSelector, toClipKeyframes } from "./gsapShared";
+import { resolveClipTimingBasis, resolveSelectorElementIds, toClipKeyframes } from "./gsapShared";
 import {
   deduplicateKeyframes,
   isStaticPositionHold,
   synthesizeFlatTweenKeyframes,
 } from "./gsapTweenSynth";
 
-/**
- * Resolve a tween's target selector to the ids of the element(s) it animates.
- * A bare `#id` resolves directly; anything else (a class like `.dot`, a group
- * `.a, .b`, or a descendant selector) is matched against the live preview DOM so
- * class/selector tweens (e.g. `gsap.from(".dot", {stagger})`) attribute to every
- * element they animate — not just one parsed from the string. Falls back to a
- * leading `#id` when there's no DOM (so the cache still populates pre-iframe).
- */
-// fallow-ignore-next-line complexity
-export function resolveSelectorElementIds(
-  selector: string,
-  doc: Document | null | undefined,
-): string[] {
-  // A whole-selector id match (either shape) addresses exactly one element.
-  const bareId = /^(#[\w-]+|\[id="(?:\\.|[^"\\])*"\])$/.test(selector)
-    ? idFromSelector(selector)
-    : null;
-  if (bareId) return [bareId];
-  if (!doc) {
-    const lead = idFromSelector(selector);
-    return lead ? [lead] : [];
-  }
-  const ids = new Set<string>();
-  for (const part of selector.split(",")) {
-    const sel = part.trim();
-    if (!sel) continue;
-    try {
-      for (const el of Array.from(doc.querySelectorAll(sel))) {
-        if (el.id) ids.add(el.id);
-      }
-    } catch {
-      const lead = idFromSelector(sel);
-      if (lead) ids.add(lead);
-    }
-  }
-  return Array.from(ids);
-}
+export { resolveSelectorElementIds };
+
 /**
  * The slice of the parse response callers actually read. The endpoint returns
  * the full `ParsedGsap` (preamble/postamble and all), but nothing downstream of
@@ -103,37 +68,6 @@ export async function fetchParsedAnimations(
   }
 }
 
-/**
- * Clip-relative timing basis for an element. Sub-composition internals (e.g. pills
- * inside a scene) aren't timeline clips themselves — they're derived at expand time
- * — so they're absent from `elements`. Without a basis, elDuration defaulted to 1
- * and clip-relative keyframe percentages blew past 100% (rendering off the clip).
- * Fall back to the sub-comp HOST's bounds, resolved via domClipChildren (the host's
- * data-composition-src is stripped in the rendered DOM, so we can't query it).
- */
-export function resolveClipTimingBasis(
-  elementId: string,
-  sourceFile: string,
-  elements: ReadonlyArray<{
-    domId?: string;
-    key?: string;
-    id: string;
-    start: number;
-    duration: number;
-  }>,
-  domClipChildren: ReadonlyArray<{ id: string; hostId: string }>,
-): { elStart: number; elDuration: number } {
-  const direct = elements.find(
-    (el) => el.domId === elementId || (el.key ?? el.id) === `${sourceFile}#${elementId}`,
-  );
-  if (direct) return { elStart: direct.start, elDuration: direct.duration };
-  const hostId = domClipChildren.find((c) => c.id === elementId)?.hostId;
-  const host = hostId
-    ? elements.find((el) => el.domId === hostId || (el.key ?? el.id) === `index.html#${hostId}`)
-    : undefined;
-  return { elStart: host?.start ?? 0, elDuration: host?.duration ?? 1 };
-}
-
 /**
  * Read one composition file's tweens into the keyframe cache. Split out of the
  * hook so the effect can run it per file without re-nesting the whole body.