@hyperframes/studio 0.7.78 → 0.7.79

package/src/components/nle/TimelineResizeDivider.tsx

@@ -73,9 +73,9 @@ export function TimelineResizeDivider({
   );
 
   return (
-    // Horizontal resize divider: 3px visible seam (h-[3px]), 8px pointer-capture
+    // Horizontal resize divider: 3px visible seam (h-[3px]), 10px pointer-capture
     // zone via the absolutely-positioned inner hit area so the layout gap stays
-    // at 3px while draggability is preserved over the full 8px band.
+    // at 3px while draggability is preserved over the full band.
     <div
       role="separator"
       aria-orientation="horizontal"
@@ -94,8 +94,13 @@ export function TimelineResizeDivider({
       onPointerCancel={handlePointerUp}
       onKeyDown={handleKeyDown}
     >
-      {/* Expanded hit zone: 8px tall, centered on the 3px seam */}
-      <div className="absolute inset-x-0 -top-[2.5px] h-2" />
+      {/* Expanded hit zone, deliberately asymmetric: 4px up into the transport
+          row's vertical centring slack, the 3px seam, then 3px down into the
+          timeline card's border + toolbar padding. It stops at 10px rather than
+          the 24px WCAG 2.2 (2.5.8) target because that is all the dead space
+          there is: 28px transport buttons sit above and 28px toolbar buttons
+          below, and silently stealing their clicks is the worse bug. */}
+      <div className="absolute inset-x-0 -top-[4px] h-[10px]" />
       {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
       <div className="h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" />
     </div>

package/src/components/pointerTargetSize.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CompositionsTab } from "./sidebar/CompositionsTab";
+import { TimelineToolbar } from "./TimelineToolbar";
+
+// WCAG 2.2 (2.5.8) requires a 24x24 CSS pixel pointer target. happy-dom has no
+// CSS engine, so getBoundingClientRect() is 0x0 for everything here and the size
+// itself cannot be measured — these assert the utility classes that PRODUCE the
+// size instead, which is enough to fail if someone drops them. Real geometry
+// still needs a browser check.
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+(
+  window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
+).happyDOM.settings.disableIframePageLoading = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+});
+
+function mount(element: React.ReactNode) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => root?.render(element));
+  return host;
+}
+
+describe("pointer target sizing classes (proxy for WCAG 2.5.8, not a geometry check)", () => {
+  it("gives the timeline zoom slider a 24px box without changing its 2px track or 10px thumb", () => {
+    const host = mount(<TimelineToolbar />);
+    const slider = host.querySelector<HTMLInputElement>('input[aria-label="Timeline zoom"]');
+    if (!slider) throw new Error("zoom slider did not render");
+
+    expect(slider.className).toContain("h-6");
+    expect(slider.className).toContain("[&::-webkit-slider-runnable-track]:h-[2px]");
+    expect(slider.className).toContain("[&::-webkit-slider-thumb]:h-[10px]");
+    expect(slider.className).toContain("[&::-webkit-slider-thumb]:w-[10px]");
+  });
+
+  it("gives the composition card's render button a 24x24 box around its 14px glyph", () => {
+    const host = mount(
+      <CompositionsTab
+        projectId="demo"
+        compositions={["compositions/headline.html"]}
+        activeComposition={null}
+        onSelect={vi.fn()}
+        onRenderComposition={vi.fn()}
+      />,
+    );
+    const button = host.querySelector<HTMLButtonElement>('button[aria-label="Render headline"]');
+    if (!button) throw new Error("render button did not render");
+
+    expect(button.className).toContain("h-6");
+    expect(button.className).toContain("w-6");
+    expect(button.querySelector("svg")?.getAttribute("width")).toBe("14");
+  });
+});

package/src/components/sidebar/CompositionsTab.tsx

@@ -317,7 +317,10 @@ function CompCard({
             e.stopPropagation();
             onRender();
           }}
-          className={`flex-shrink-0 p-1 rounded transition-colors ${
+          // h-6 w-6 = the 24x24 WCAG 2.2 (2.5.8) minimum target; the 14px glyph
+          // is unchanged, only the box grows. The sibling "+" button is h-8 w-8,
+          // so the card row already has the room.
+          className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
             isRendering
               ? "text-neutral-600 cursor-not-allowed"
               : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"

package/src/hooks/gsapDragCommit.ts

@@ -12,7 +12,7 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeKeyframes";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
-import { computeElementPercentage, idSelector } from "./gsapShared";
+import { computeElementPercentage, idSelector, writeTargetSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
@@ -44,6 +44,23 @@ export interface GsapDragCommitCallbacks {
   fetchAnimations?: () => Promise<GsapAnimation[]>;
 }
 
+/**
+ * The target for a tween these helpers are about to CREATE. Callers derive
+ * `selector` with `selectorFromSelection`, which hands back a bare class for an
+ * id-less element: authoring that widens a one-element drag/resize/rotate into a
+ * write over every sibling sharing the class. Retargets of an EXISTING tween
+ * must NOT come through here (they keep `anim.targetSelector`, so a tween the
+ * author aimed at a group stays aimed at it).
+ *
+ * Null means no one-element form exists, and every caller drops the commit
+ * rather than falling back to `selector` (see writeTargetSelector): the drag
+ * reverts on the next reload, which is recoverable, where a `.group` write is
+ * not.
+ */
+function newTweenTarget(selection: DomEditSelection): string | null {
+  return writeTargetSelector(selection);
+}
+
 // Re-export for backward compatibility with existing imports.
 export function computeCurrentPercentage(
   selection: DomEditSelection,
@@ -65,17 +82,18 @@ export function parkPlayheadOnKeyframe(anim: GsapAnimation, pct: number): void {
 
 async function replaceKeyframedPositionHold(
   selection: DomEditSelection,
-  selector: string,
   existingSet: GsapAnimation,
   properties: { x: number; y: number },
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
 ): Promise<void> {
+  const target = newTweenTarget(selection);
+  if (!target) return;
   const persist = async (commit: GsapDragCommitCallbacks["commitMutation"]) => {
     await commit(
       selection,
       {
         type: "add",
-        targetSelector: selector,
+        targetSelector: target,
         method: "set",
         position: 0,
         properties,
@@ -174,7 +192,6 @@ export async function commitStaticGsapPosition(
       // least one hold on disk, then delete the corrupt tween in one transaction.
       await replaceKeyframedPositionHold(
         selection,
-        selector,
         existingSet,
         { x: newX, y: newY },
         callbacks.commitMutation,
@@ -199,11 +216,15 @@ export async function commitStaticGsapPosition(
   }
   // New static hold → a base `gsap.set` (off-timeline, no 0% keyframe marker), with
   // an instant patch so the first nudge shows immediately (no soft-reload flash).
+  // The patch reuses the WRITTEN target so the runtime moves exactly the element
+  // the source write names.
+  const target = newTweenTarget(selection);
+  if (!target) return;
   await callbacks.commitMutation(
     selection,
     {
       type: "add",
-      targetSelector: selector,
+      targetSelector: target,
       method: "set",
       position: 0,
       properties: { x: newX, y: newY },
@@ -212,7 +233,10 @@ export async function commitStaticGsapPosition(
     {
       label: "Move layer",
       softReload: true,
-      instantPatch: { selector, change: { kind: "global-set", props: { x: newX, y: newY } } },
+      instantPatch: {
+        selector: target,
+        change: { kind: "global-set", props: { x: newX, y: newY } },
+      },
     },
   );
 }
@@ -252,11 +276,13 @@ export async function commitStaticGsapRotation(
     return;
   }
   // New static hold → off-timeline `gsap.set` (no 0% keyframe marker) + instant patch.
+  const target = newTweenTarget(selection);
+  if (!target) return;
   await callbacks.commitMutation(
     selection,
     {
       type: "add",
-      targetSelector: selector,
+      targetSelector: target,
       method: "set",
       position: 0,
       properties: { rotation: newRotation },
@@ -265,7 +291,10 @@ export async function commitStaticGsapRotation(
     {
       label: "Rotate layer",
       softReload: true,
-      instantPatch: { selector, change: { kind: "global-set", props: { rotation: newRotation } } },
+      instantPatch: {
+        selector: target,
+        change: { kind: "global-set", props: { rotation: newRotation } },
+      },
     },
   );
 }
@@ -301,11 +330,13 @@ export async function commitStaticGsapSize(
     );
     return;
   }
+  const target = newTweenTarget(selection);
+  if (!target) return;
   await callbacks.commitMutation(
     selection,
     {
       type: "add",
-      targetSelector: selector,
+      targetSelector: target,
       method: "set",
       position: 0,
       properties: { width, height },
@@ -389,11 +420,13 @@ export async function commitKeyframedSizeFromResize(
   // transport applies both in one ordered batch; a plain commit fallback keeps the
   // same recoverable ordering. Only the transaction's result triggers the reload.
   const addLabel = `Resize (size keyframe ${pct.toFixed(0)}%)`;
+  const target = newTweenTarget(selection);
+  if (!target) return false;
   await callbacks.commitMutation(
     selection,
     {
       type: "add-with-keyframes",
-      targetSelector: selector,
+      targetSelector: target,
       position: roundTo3(ts),
       duration: roundTo3(td),
       keyframes,

package/src/hooks/gsapDragStaticSetHelpers.ts

@@ -1,6 +1,6 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { RuntimeTweenChange, SetPatchProps } from "./gsapRuntimePatch";
-import { isInstantHold } from "./gsapShared";
+import { isInstantHold, tweenTargetsElement } from "./gsapShared";
 
 /** The shape of an `update-property` mutation a static-set nudge POSTs. */
 interface UpdatePropertyMutation {
@@ -34,12 +34,13 @@ export function setPatchFromUpdateProperty(
 function findPositionSetAnimation(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
   return (
     animations.find(
       (a) =>
         a.method === "set" &&
-        a.targetSelector === selector &&
+        tweenTargetsElement(a.targetSelector, selector, element) &&
         ("x" in a.properties || "y" in a.properties),
     ) ?? null
   );
@@ -61,12 +62,16 @@ function findPositionSetAnimation(
 export function findExistingPositionWrite(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
-  const set = findPositionSetAnimation(animations, selector);
+  const set = findPositionSetAnimation(animations, selector, element);
   if (set) return set;
   return (
     animations.find(
-      (a) => a.targetSelector === selector && a.propertyGroup === "position" && isInstantHold(a),
+      (a) =>
+        tweenTargetsElement(a.targetSelector, selector, element) &&
+        a.propertyGroup === "position" &&
+        isInstantHold(a),
     ) ?? null
   );
 }
@@ -74,10 +79,14 @@ export function findExistingPositionWrite(
 export function findRotationSetAnimation(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
   return (
     animations.find(
-      (a) => isInstantHold(a) && a.targetSelector === selector && "rotation" in a.properties,
+      (a) =>
+        isInstantHold(a) &&
+        tweenTargetsElement(a.targetSelector, selector, element) &&
+        "rotation" in a.properties,
     ) ?? null
   );
 }
@@ -85,12 +94,13 @@ export function findRotationSetAnimation(
 export function findSizeSetAnimation(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
   return (
     animations.find(
       (a) =>
         isInstantHold(a) &&
-        a.targetSelector === selector &&
+        tweenTargetsElement(a.targetSelector, selector, element) &&
         ("width" in a.properties || "height" in a.properties),
     ) ?? null
   );

package/src/hooks/gsapKeyframeCacheHelpers.test.ts

@@ -276,6 +276,69 @@ describe("updateKeyframeCacheFromParsed", () => {
     expect(usePlayerStore.getState().gsapAnimations.get("scene.html#box")).toEqual([animation]);
   });
 
+  // `#stat3 .block` animates the BLOCK inside #stat3, not #stat3. An unanchored
+  // `^#([\w-]+)/` prefix match filed it under "stat3", which both stole the
+  // child's diamonds and collided with #stat3's own tween at the shared
+  // percentage (dropping #stat3's ease as ambiguous).
+  it("attributes a descendant selector to the child, not to its ancestor", () => {
+    const parent: GsapAnimation = {
+      id: "stat3-fromTo",
+      targetSelector: "#stat3",
+      method: "fromTo",
+      position: 8.88,
+      resolvedStart: 8.88,
+      duration: 0.25,
+      fromProperties: { y: 20 },
+      properties: { y: 0 },
+      ease: "power2.out",
+      propertyGroup: "position",
+    };
+    const child: GsapAnimation = {
+      id: "block-from",
+      targetSelector: "#stat3 .block",
+      method: "from",
+      position: 9.13,
+      resolvedStart: 9.13,
+      duration: 0.3,
+      properties: { opacity: 0 },
+      ease: "power2.in",
+      propertyGroup: "visual",
+    };
+    usePlayerStore.setState({
+      elements: [
+        { id: "stat3-clip", domId: "stat3", tag: "div", start: 8.88, duration: 1, track: 0 },
+      ],
+    });
+    const doc = {
+      querySelectorAll: (selector: string) =>
+        (selector === "#stat3 .block"
+          ? [{ id: "stat3-block" }]
+          : []) as unknown as NodeListOf<Element>,
+    } as unknown as Document;
+
+    updateKeyframeCacheFromParsed([parent, child], "scene.html", "stat3", {}, doc);
+
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#stat3")).toEqual([parent]);
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#stat3-block")).toEqual([child]);
+    // With the collision gone, #stat3's own curve survives instead of being
+    // deleted as an ambiguous same-percentage merge.
+    const parentKeyframes = cache().get("scene.html#stat3")?.keyframes ?? [];
+    expect(parentKeyframes.at(-1)?.ease).toBe("power2.out");
+    expect(parentKeyframes.some((keyframe) => "easeAmbiguous" in keyframe)).toBe(false);
+  });
+
+  it("attributes a descendant selector to nothing when there is no document", () => {
+    const child: GsapAnimation = {
+      ...animWithKeyframes("block-from"),
+      targetSelector: "#stat3 .block",
+    };
+
+    updateKeyframeCacheFromParsed([child], "scene.html", "stat3", {});
+
+    expect(cache().has("scene.html#stat3")).toBe(false);
+    expect(usePlayerStore.getState().gsapAnimations.has("scene.html#stat3")).toBe(false);
+  });
+
   it("does not cache a flat tween without animatable numeric properties", () => {
     const animation: GsapAnimation = {
       id: "flat-box",

package/src/hooks/gsapKeyframeCacheHelpers.ts

@@ -4,7 +4,7 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
-import { idFromSelector, toClipKeyframes } from "./gsapShared";
+import { resolveClipTimingBasis, resolveSelectorElementIds, toClipKeyframes } from "./gsapShared";
 import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
 
 export function updateKeyframeCacheFromParsed(
@@ -12,58 +12,65 @@ export function updateKeyframeCacheFromParsed(
   targetPath: string,
   selectionId: string | undefined,
   mutation: Record<string, unknown>,
+  doc?: Document | null,
 ): void {
-  const { setKeyframeCache, elements } = usePlayerStore.getState();
+  const { setKeyframeCache, elements, domClipChildren } = usePlayerStore.getState();
   const idsWithKeyframes = new Set<string>();
   const merged = new Map<string, KeyframeCacheEntry>();
   const sourceAnimations = new Map<string, GsapAnimation[]>();
   for (const anim of animations) {
-    const id = idFromSelector(anim.targetSelector);
     const kfSource =
       anim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(anim)?.keyframes ?? [];
-    if (!id || kfSource.length === 0) continue;
-    idsWithKeyframes.add(id);
-    // Every tween that fed keyframeCache also lands in gsapAnimations, group or
-    // not: a mixed-group tween (`{ x, opacity }` classifies to undefined) used to
-    // cache diamonds with no source animation behind them, so the collapsed row
-    // drew keyframes the expanded lanes couldn't render. Lane consumers do the
-    // group filtering themselves (animationContributesLane).
-    sourceAnimations.set(id, [...(sourceAnimations.get(id) ?? []), anim]);
+    if (kfSource.length === 0) continue;
+    // Attribute the tween to every element it actually animates. A leading-id
+    // match filed `#stat3 .block` under `#stat3`: the child's diamonds landed on
+    // its ancestor AND collided with the ancestor's own tween at the shared
+    // percentage, which the same-% merge then resolved by dropping the ease.
+    for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) {
+      idsWithKeyframes.add(id);
+      // Every tween that fed keyframeCache also lands in gsapAnimations, group or
+      // not: a mixed-group tween (`{ x, opacity }` classifies to undefined) used to
+      // cache diamonds with no source animation behind them, so the collapsed row
+      // drew keyframes the expanded lanes couldn't render. Lane consumers do the
+      // group filtering themselves (animationContributesLane).
+      sourceAnimations.set(id, [...(sourceAnimations.get(id) ?? []), anim]);
 
-    // Convert tween-relative percentages to clip-relative so diamonds
-    // render at the correct position within the timeline clip.
-    const timelineEl = elements.find(
-      (el) => el.domId === id || (el.key ?? el.id) === `${targetPath}#${id}`,
-    );
-    const clipKeyframes = toClipKeyframes(
-      kfSource,
-      anim,
-      timelineEl?.start ?? 0,
-      timelineEl?.duration ?? 1,
-    );
+      // Convert tween-relative percentages to clip-relative so diamonds
+      // render at the correct position within the timeline clip. The basis comes
+      // from the shared resolver, so this writer agrees with the AST load on both
+      // the sub-comp host fallback and the tween's own time frame.
+      const { elStart, elDuration } = resolveClipTimingBasis(
+        id,
+        targetPath,
+        elements,
+        domClipChildren,
+      );
+      const clipKeyframes = toClipKeyframes(kfSource, anim, elStart, elDuration);
 
-    const existing = merged.get(id);
-    if (existing) {
-      // deduplicateKeyframes owns the same-% merge (including the easeAmbiguous
-      // flag downstream lanes read); a second copy of that rule here is how the
-      // two writers drift.
-      existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
-    } else {
-      merged.set(id, {
-        ...anim.keyframes,
-        format: anim.keyframes?.format ?? "percentage",
-        keyframes: clipKeyframes,
-      });
+      const existing = merged.get(id);
+      if (existing) {
+        // deduplicateKeyframes owns the same-% merge (including the easeAmbiguous
+        // flag downstream lanes read); a second copy of that rule here is how the
+        // two writers drift.
+        existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
+      } else {
+        merged.set(id, {
+          ...anim.keyframes,
+          format: anim.keyframes?.format ?? "percentage",
+          keyframes: clipKeyframes,
+        });
+      }
     }
   }
   for (const [id, entry] of merged) {
     for (const key of elementCacheKeys(targetPath, id)) setKeyframeCache(key, entry);
     writeGsapAnimationsForElement(targetPath, id, sourceAnimations.get(id));
   }
-  const targetId =
-    idFromSelector((mutation as { targetSelector?: string }).targetSelector) ?? selectionId;
-  if (targetId && !idsWithKeyframes.has(targetId)) {
-    clearKeyframeCacheForElement(targetPath, targetId);
+  const mutationSelector = (mutation as { targetSelector?: string }).targetSelector;
+  const mutated = mutationSelector ? resolveSelectorElementIds(mutationSelector, doc) : [];
+  const targetIds = mutated.length > 0 ? mutated : selectionId ? [selectionId] : [];
+  for (const targetId of targetIds) {
+    if (!idsWithKeyframes.has(targetId)) clearKeyframeCacheForElement(targetPath, targetId);
   }
 }
 

package/src/hooks/gsapKeyframeCommit.ts

@@ -1,7 +1,7 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { absoluteToPercentageForAnimation, findTweenAtTime } from "../utils/globalTimeCompiler";
-import { PROPERTY_DEFAULTS, selectorFromSelection } from "./gsapShared";
+import { PROPERTY_DEFAULTS, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import { roundToCenti } from "../utils/rounding";
 
 type CommitFn = (
@@ -22,6 +22,9 @@ export async function commitKeyframeAtTimeImpl(
   properties: Record<string, number | string>,
   commitMutation: CommitFn,
 ): Promise<void> {
+  // Matching an authored tween is a string compare against what the author
+  // wrote, so it keeps using the selection's own selector; the NEW tween below
+  // is authored with the one-element form instead.
   const selector = selectorFromSelection(selection);
   if (!selector) return;
 
@@ -60,12 +63,18 @@ export async function commitKeyframeAtTimeImpl(
       },
     );
   } else {
+    // Null means the live DOM could not prove any one-element form. Falling
+    // back to the author's own selector would write the group-collapsing
+    // target this narrowing exists to prevent, so the keyframe is dropped
+    // instead (see writeTargetSelector).
+    const target = writeTargetSelector(selection);
+    if (!target) return;
     const defaultDuration = 0.5;
     await commitMutation(
       selection,
       {
         type: "add-with-keyframes" as const,
-        targetSelector: selector,
+        targetSelector: target,
         position: absoluteTime,
         duration: defaultDuration,
         keyframes: [

package/src/hooks/gsapResizeIntercept.ts

@@ -79,7 +79,7 @@ export async function tryGsapResizeIntercept(
   if (!anim || isInstantHold(anim)) {
     const sel = selectorFromSelection(selection);
     if (!sel) return false;
-    const sizeSet = anim ?? findSizeSetAnimation(animations, sel);
+    const sizeSet = anim ?? findSizeSetAnimation(animations, sel, selection.element);
 
     // If the element is animated (has a real tween, not just a static size
     // hold), keyframe the size at the playhead so other keyframes keep theirs —
@@ -242,7 +242,7 @@ export async function tryGsapResizeIntercept(
     const currentAnimations = fetchFallbackAnimations
       ? await fetchFallbackAnimations()
       : (resolved?.animations ?? animations);
-    const existingSet = findExistingPositionWrite(currentAnimations, selector);
+    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
     // Delta chosen so the drag-path math composes back to exactly `corrected`
     // (no drag scratch attrs exist during a resize, so base = gsapPos).
     await commitStaticGsapPosition(

package/src/hooks/gsapRuntimeBridge.ts

@@ -213,7 +213,7 @@ export async function tryGsapDragIntercept(
     const existingSet =
       posAnim && isInstantHold(posAnim) && posAnim.targetSelector === selector
         ? posAnim
-        : findExistingPositionWrite(resolvedAnimations, selector);
+        : findExistingPositionWrite(resolvedAnimations, selector, selection.element);
     await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,
@@ -301,7 +301,8 @@ export async function tryGsapRotationIntercept(
   // rotation set in place, else add a new one. This replaces the old
   // `--hf-studio-rotation` CSS-var fallback (the same dual-channel bug class).
   if (!anim || isInstantHold(anim)) {
-    const existingSet = anim ?? findRotationSetAnimation(resolvedAnimations, selector);
+    const existingSet =
+      anim ?? findRotationSetAnimation(resolvedAnimations, selector, selection.element);
     await commitStaticGsapRotation(selection, newRotation, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,

package/src/hooks/gsapScriptCommitHelpers.ts

@@ -2,17 +2,32 @@ import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mu
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 
 export { PROPERTY_DEFAULTS } from "./gsapShared";
-import { idSelector } from "./gsapShared";
+import { idSelector, matchesExactlyOne } from "./gsapShared";
 
+/**
+ * The selector to author a NEW tween against, minting an id on the element when
+ * it has no address of its own.
+ *
+ * `selection.selector` is only usable when it addresses ONE element:
+ * `buildStableSelector` hands back a bare class for an id-less element, so
+ * returning it unconditionally aimed "add animation" at every sibling sharing
+ * the class (the attribution blow-up that collapsed the timeline to one row,
+ * see writeTargetSelector). A non-unique selector falls through to the id mint
+ * below, which is the stronger fix here than a structural path: the id it writes
+ * back to the source also makes every later lookup for this element exact.
+ */
 export function ensureElementAddressable(selection: DomEditSelection): {
   selector: string;
   autoId?: string;
 } {
   if (selection.id) return { selector: idSelector(selection.id) };
-  if (selection.selector) return { selector: selection.selector };
 
   const el = selection.element;
   const doc = el.ownerDocument;
+  if (selection.selector && matchesExactlyOne(doc, selection.selector, el)) {
+    return { selector: selection.selector };
+  }
+
   const tag = el.tagName.toLowerCase();
   let id = tag;
   let n = 1;