@hyperframes/studio 0.7.51 → 0.7.53

package/src/hooks/gsapRuntimePatch.test.ts

@@ -133,6 +133,69 @@ describe("patchRuntimeTweenInPlace — set tweens", () => {
   });
 });
 
+describe("patchRuntimeTweenInPlace — authored-opacity capture guard", () => {
+  function makeStampedEl(id: string, stamped: string | null, inlineOpacity: string) {
+    const style = new Map<string, string>([["opacity", inlineOpacity]]);
+    return {
+      el: {
+        id,
+        style: {
+          setProperty: (k: string, v: string) => void style.set(k, v),
+          removeProperty: (k: string) => void style.delete(k),
+        },
+        getAttribute: (name: string) => (name === "data-hf-authored-opacity" ? stamped : null),
+      },
+      style,
+    };
+  }
+
+  it("restores the stamped authored opacity before an opacity-touching patch", () => {
+    // Runtime transient (grading hide / mid-flight tween) baked into inline style.
+    const { el, style } = makeStampedEl("box", "0.75", "0");
+    const setTween = makeTween(
+      { vars: { opacity: 0.2, duration: 0 }, targetIds: ["box"], duration: 0 },
+      el,
+    );
+    const { iframe } = fakeIframe(el, [setTween]);
+
+    const ok = patchRuntimeTweenInPlace(iframe, "#box", {
+      kind: "set",
+      props: { opacity: 0.5 },
+    });
+
+    expect(ok).toBe(true);
+    // The re-init must capture the authored 0.75, not the transient 0.
+    expect(style.get("opacity")).toBe("0.75");
+    expect(setTween.vars.opacity).toBe(0.5);
+  });
+
+  it("removes inline opacity when the stamp recorded no authored value", () => {
+    const { el, style } = makeStampedEl("box", "", "0");
+    const setTween = makeTween(
+      { vars: { opacity: 0.2, duration: 0 }, targetIds: ["box"], duration: 0 },
+      el,
+    );
+    const { iframe } = fakeIframe(el, [setTween]);
+
+    patchRuntimeTweenInPlace(iframe, "#box", { kind: "set", props: { opacity: 0.5 } });
+
+    expect(style.has("opacity")).toBe(false);
+  });
+
+  it("leaves inline opacity alone for a position-only patch", () => {
+    const { el, style } = makeStampedEl("box", "0.75", "0");
+    const setTween = makeTween(
+      { vars: { x: 0, y: 0, duration: 0 }, targetIds: ["box"], duration: 0 },
+      el,
+    );
+    const { iframe } = fakeIframe(el, [setTween]);
+
+    patchRuntimeTweenInPlace(iframe, "#box", { kind: "set", props: { x: 10, y: 20 } });
+
+    expect(style.get("opacity")).toBe("0");
+  });
+});
+
 describe("patchRuntimeTweenInPlace — channel-aware set resolution", () => {
   it("patches the {x,y} set, not a co-located rotation-only set", () => {
     const el = { id: "dual" };

package/src/hooks/gsapRuntimePatch.ts

@@ -13,6 +13,7 @@
  * "Which tween" is resolved by the same all-timelines scan `readRuntimeKeyframes`
  * uses (`resolveRuntimeTween`), so read and write agree on the target.
  */
+import { applyAuthoredInlineOpacity, readStampedAuthoredOpacity } from "../utils/authoredOpacity";
 import {
   resolveRuntimeTween,
   type RuntimeTween,
@@ -235,6 +236,34 @@ function seekToCurrent(iframe: HTMLIFrameElement, timeline: RuntimeTimeline): vo
   player?.seek?.(Number.isFinite(currentTime) ? currentTime : 0);
 }
 
+/** Does this change touch the opacity channel (whose re-init reads inline style)? */
+function changeTouchesOpacity(change: RuntimeTweenChange): boolean {
+  if (change.kind === "set" || change.kind === "global-set")
+    return change.props.opacity !== undefined;
+  if (change.kind === "keyframes") return change.keyframes.some((step) => "opacity" in step);
+  return "opacity" in change.props;
+}
+
+/**
+ * A tween re-initialization (invalidate, or kill+recreate for keyframe-rebuild)
+ * captures opacity from the element's CURRENT inline style — for a color-graded
+ * source (hidden with `opacity: 0 !important`) or a mid-flight tween that's a
+ * runtime transient, not the authored value, and the capture makes it permanent.
+ * Restore the runtime's parse-time authored capture (data-hf-authored-opacity)
+ * first; the re-seek after the patch re-renders the animated value anyway.
+ * Duck-typed (no instanceof): the targets live in the preview iframe's realm.
+ */
+function restoreAuthoredOpacityForCapture(tween: RuntimeTween): void {
+  const targets = typeof tween.targets === "function" ? tween.targets() : [];
+  for (const target of targets ?? []) {
+    const el = target as HTMLElement | null;
+    if (!el?.style || typeof el.getAttribute !== "function") continue;
+    const authored = readStampedAuthoredOpacity(el);
+    if (authored === null) continue;
+    applyAuthoredInlineOpacity(el.style, authored);
+  }
+}
+
 /** Apply `change` to the resolved tween. `true` if applied, `false` to soft-reload.
  *  `global-set` is handled before this (no tween) and never reaches here. */
 function applyChange(tween: RuntimeTween, change: RuntimeTweenChange): boolean {
@@ -270,13 +299,18 @@ export function patchRuntimeTweenInPlace(
     if (!resolved) return false;
     const { tween, timeline } = resolved;
 
+    if (changeTouchesOpacity(change)) restoreAuthoredOpacityForCapture(tween);
     if (!applyChange(tween, change)) return false;
 
     // A rebuild already recreated the tween; set/keyframes mutate vars in place, so
     // invalidate to make GSAP re-read them on the next render. Either way, re-seek.
+    // Invalidate ONLY the edited tween — never the whole timeline. A timeline-wide
+    // invalidate re-initializes every from() tween against the CURRENT inline
+    // styles, and the color-grading engine hides its source elements with
+    // `opacity: 0 !important` — so every graded element's from(opacity) re-captures
+    // 0 as its end value and animates 0→0 forever (all graded elements vanish).
     if (change.kind !== "keyframe-rebuild") {
       tween.invalidate?.();
-      timeline.invalidate?.();
     }
     seekToCurrent(iframe, timeline);
     return true;

package/src/hooks/gsapRuntimeReaders.test.ts

@@ -0,0 +1,111 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import {
+  COLOR_GRADING_SOURCE_HIDDEN_ATTR,
+  HF_COLOR_GRADING_CANVAS_ID_PREFIX,
+} from "@hyperframes/core/color-grading";
+import { readAllAnimatedProperties, readGsapProperty } from "./gsapRuntimeReaders";
+
+/**
+ * Regression: converting a property-group tween to keyframes resolves "current
+ * values" via readAllAnimatedProperties. Two ways that used to bake garbage
+ * into the composition file:
+ *
+ * 1. The group filter only pruned the tween's OWN properties — the baseline
+ *    pass still captured every property ANY tween on the element touches, so
+ *    a rotation commit carried `opacity` from the intro from() tween.
+ * 2. `gsap.getProperty(el, "opacity")` on a color-grading source reads the
+ *    runtime hide (inline `opacity: 0 !important`), not the animated value —
+ *    so the captured opacity was the transient 0, which then animated 0 → 0
+ *    on the next full load and the element disappeared.
+ */
+
+function fakeIframe(
+  el: Element,
+  opts: { gsapValues: Record<string, number>; otherTweenVars?: Record<string, number> },
+): HTMLIFrameElement {
+  const children = opts.otherTweenVars
+    ? [{ targets: () => [el], vars: { duration: 0.8, ...opts.otherTweenVars } }]
+    : [];
+  return {
+    contentWindow: {
+      __timelines: { main: { getChildren: () => children } },
+      gsap: { getProperty: (_el: Element, prop: string) => opts.gsapValues[prop] ?? 0 },
+    },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+}
+
+function rotationSetAnim(): GsapAnimation {
+  return {
+    id: "#clip-set-0-rotation",
+    targetSelector: "#clip",
+    method: "set",
+    properties: { rotation: 0 },
+  } as unknown as GsapAnimation;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("readAllAnimatedProperties group filter", () => {
+  it("keeps other tweens' out-of-group properties out of a grouped resolve", () => {
+    const el = document.createElement("div");
+    el.id = "clip";
+    document.body.appendChild(el);
+    const iframe = fakeIframe(el, {
+      gsapValues: { rotation: -28.1, opacity: 0, rotationX: 52, rotationY: -47 },
+      otherTweenVars: { opacity: 0, rotationX: 52, rotationY: -47 },
+    });
+
+    const result = readAllAnimatedProperties(iframe, "#clip", rotationSetAnim(), "rotation");
+
+    expect(result).toEqual({ rotation: -28.1 });
+  });
+});
+
+describe("color-grading opacity truth", () => {
+  function gradedElement(): HTMLElement {
+    const el = document.createElement("img");
+    el.id = "clip";
+    el.setAttribute(COLOR_GRADING_SOURCE_HIDDEN_ATTR, "");
+    const canvas = document.createElement("canvas");
+    canvas.id = `${HF_COLOR_GRADING_CANVAS_ID_PREFIX}clip`;
+    canvas.style.opacity = "0.98";
+    document.body.append(el, canvas);
+    return el;
+  }
+
+  it("resolves opacity from the grading canvas, not the runtime hide", () => {
+    const el = gradedElement();
+    const iframe = fakeIframe(el, { gsapValues: { opacity: 0 } });
+    const anim = {
+      id: "#clip-from-200-visual",
+      targetSelector: "#clip",
+      method: "from",
+      properties: { opacity: 0.5 },
+    } as unknown as GsapAnimation;
+
+    const result = readAllAnimatedProperties(iframe, "#clip", anim);
+
+    expect(result.opacity).toBe(0.98);
+  });
+
+  it("readGsapProperty takes the same detour", () => {
+    const el = gradedElement();
+    const iframe = fakeIframe(el, { gsapValues: { opacity: 0 } });
+
+    expect(readGsapProperty(iframe, "#clip", "opacity")).toBe(0.98);
+  });
+
+  it("reads GSAP directly when the source is not grading-hidden", () => {
+    const el = document.createElement("div");
+    el.id = "clip";
+    document.body.appendChild(el);
+    const iframe = fakeIframe(el, { gsapValues: { opacity: 0.3 } });
+
+    expect(readGsapProperty(iframe, "#clip", "opacity")).toBe(0.3);
+  });
+});

package/src/hooks/gsapRuntimeReaders.ts

@@ -3,9 +3,33 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { classifyPropertyGroup, type PropertyGroupName } from "@hyperframes/core/gsap-parser";
-import { getIframeGsap, queryIframeElement } from "./gsapShared";
+import {
+  COLOR_GRADING_SOURCE_HIDDEN_ATTR,
+  HF_COLOR_GRADING_CANVAS_ID_PREFIX,
+} from "@hyperframes/core/color-grading";
+import { getIframeGsap, queryIframeElement, type IframeGsap } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
 
+/**
+ * The element's live value for `prop` as GSAP drives it. Opacity on a
+ * color-grading-hidden source needs a detour: the runtime hides the source
+ * with inline `opacity: 0 !important`, so computed opacity is the hide, not
+ * the animated value. The grading canvas mirrors the source's effective
+ * opacity every frame, so it is the truth for that one property — reading the
+ * raw 0 here is what bakes `opacity: 0` into committed keyframes.
+ */
+function readLiveGsapValue(gsap: IframeGsap, el: Element, prop: string): number {
+  if (prop === "opacity" && el.getAttribute(COLOR_GRADING_SOURCE_HIDDEN_ATTR) != null && el.id) {
+    const canvas = el.ownerDocument.getElementById(HF_COLOR_GRADING_CANVAS_ID_PREFIX + el.id);
+    const win = el.ownerDocument.defaultView;
+    if (canvas && win) {
+      const val = Number(win.getComputedStyle(canvas).opacity);
+      if (Number.isFinite(val)) return val;
+    }
+  }
+  return Number(gsap.getProperty(el, prop));
+}
+
 export function readGsapProperty(
   iframe: HTMLIFrameElement | null,
   selector: string | null,
@@ -17,7 +41,7 @@ export function readGsapProperty(
   const el = queryIframeElement(iframe, selector);
   if (!el) return null;
   try {
-    const val = Number(gsap.getProperty(el, prop));
+    const val = readLiveGsapValue(gsap, el, prop);
     if (!Number.isFinite(val)) return null;
     return POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
   } catch {
@@ -77,15 +101,15 @@ export function readAllAnimatedProperties(
     for (const p of Object.keys(anim.properties)) propKeys.add(p);
   }
 
-  // When a group filter is specified, only keep properties belonging to that group.
-  if (group) {
-    for (const p of propKeys) {
-      if (classifyPropertyGroup(p) !== group) propKeys.delete(p);
-    }
-  }
+  // When a group filter is specified, only properties belonging to that group
+  // may enter the result — including the baseline passes below. The whole
+  // point of property-group tweens is that a rotation commit never carries
+  // opacity/rotationX/etc. captured from unrelated tweens on the element.
+  const inGroup = (p: string) => !group || classifyPropertyGroup(p) === group;
+  const groupedPropKeys = new Set([...propKeys].filter(inGroup));
 
-  for (const prop of propKeys) {
-    const val = Number(gsap.getProperty(el, prop));
+  for (const prop of groupedPropKeys) {
+    const val = readLiveGsapValue(gsap, el, prop);
     if (Number.isFinite(val)) {
       result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
     }
@@ -110,13 +134,13 @@ export function readAllAnimatedProperties(
           const vars = child.vars;
           if (!vars) continue;
           for (const k of Object.keys(vars)) {
-            if (!GSAP_CONFIG_KEYS.has(k)) otherTweenProps.add(k);
+            if (!GSAP_CONFIG_KEYS.has(k) && inGroup(k)) otherTweenProps.add(k);
           }
         }
       }
     }
   } catch {}
-  for (const p of propKeys) otherTweenProps.delete(p);
+  for (const p of groupedPropKeys) otherTweenProps.delete(p);
 
   // Tier 1: Transform + visual properties with universal CSS defaults.
   // Safe to compare against hardcoded values — these are always 0 or 1
@@ -148,11 +172,11 @@ export function readAllAnimatedProperties(
   // Collect all properties that ANY tween on this element explicitly targets.
   // Only capture baseline values for these — GSAP reports non-default values
   // (scaleZ=0, brightness=0) for untouched properties, polluting keyframes.
-  const allTweenedProps = new Set([...propKeys, ...otherTweenProps]);
+  const allTweenedProps = new Set([...groupedPropKeys, ...otherTweenProps]);
   for (const [prop, defaultVal] of Object.entries(UNIVERSAL_BASELINE)) {
     if (prop in result) continue;
     if (!allTweenedProps.has(prop)) continue;
-    const val = Number(gsap.getProperty(el, prop));
+    const val = readLiveGsapValue(gsap, el, prop);
     if (Number.isFinite(val) && Math.round(val * 1000) !== Math.round(defaultVal * 1000)) {
       result[prop] = roundTo3(val);
     }
@@ -184,6 +208,7 @@ export function readAllAnimatedProperties(
   } catch {}
   for (const prop of COMPUTED_BASELINE) {
     if (prop in result) continue;
+    if (!inGroup(prop)) continue;
     if (otherTweenProps.has(prop)) continue;
     const gsapVal = Number(gsap.getProperty(el, prop));
     if (!Number.isFinite(gsapVal)) continue;

package/src/hooks/useAnimatedPropertyCommit.test.tsx

@@ -39,15 +39,16 @@ type Commit = (
 ) => Promise<void>;
 
 /** Renders the hook and hands its commit function to the caller via a ref callback. */
-function renderCommitHook(
-  mutations: Array<Record<string, unknown>>,
+function renderHookWith(
+  animations: GsapAnimation[],
+  onMutation: (mutation: Record<string, unknown>, label: string) => void,
   onReady: (commit: Commit) => void,
 ) {
   function Harness() {
     const { commitAnimatedProperties } = useAnimatedPropertyCommit({
-      selectedGsapAnimations: [keyframedAnim],
-      gsapCommitMutation: async (_sel, mutation) => {
-        mutations.push(mutation);
+      selectedGsapAnimations: animations,
+      gsapCommitMutation: async (_sel, mutation, options) => {
+        onMutation(mutation, options.label);
       },
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
@@ -66,6 +67,13 @@ function renderCommitHook(
   return root;
 }
 
+function renderCommitHook(
+  mutations: Array<Record<string, unknown>>,
+  onReady: (commit: Commit) => void,
+) {
+  return renderHookWith([keyframedAnim], (mutation) => mutations.push(mutation), onReady);
+}
+
 // Regression (#1808): a "3D transform" / design-panel property edit on an
 // element that already has a keyframed tween is the ACTUAL path a manual
 // canvas nudge exercises (not the raw drag intercept) — with auto-keyframe
@@ -103,3 +111,56 @@ describe("useAnimatedPropertyCommit — autoKeyframeEnabled toggle (#1808)", ()
     act(() => root.unmount());
   });
 });
+
+// Regression: commitStaticSet picked the FIRST `set` for the selector with no
+// group check — a panel W edit on a static element merged `width` into the
+// POSITION set (`tl.set("#el",{x,y,width})`), a mixed-group set the split
+// machinery exists to prevent, labeled "Set 3D transform" in undo history.
+describe("commitStaticSet group routing", () => {
+  const positionSet = {
+    id: "#box-set-0-position",
+    targetSelector: "#box",
+    propertyGroup: "position",
+    method: "set",
+    properties: { x: 10, y: 20 },
+  } as unknown as GsapAnimation;
+
+  function renderStaticHook(
+    committed: Array<{ mutation: Record<string, unknown>; label: string }>,
+    onReady: (commit: Commit) => void,
+  ) {
+    return renderHookWith(
+      [positionSet],
+      (mutation, label) => committed.push({ mutation, label }),
+      onReady,
+    );
+  }
+
+  it("width edit creates a size set instead of contaminating the position set", async () => {
+    const committed: Array<{ mutation: Record<string, unknown>; label: string }> = [];
+    let commit!: Commit;
+    renderStaticHook(committed, (c) => (commit = c));
+    await act(async () => {
+      await commit(selection, { width: 500 });
+    });
+    const updates = committed.filter((c) => c.mutation.type === "update-properties");
+    expect(updates).toHaveLength(0);
+    const adds = committed.filter((c) => c.mutation.type === "add");
+    expect(adds).toHaveLength(1);
+    expect(adds[0]!.mutation.properties).toEqual({ width: 500 });
+    expect(adds[0]!.label).toBe("Resize layer");
+  });
+
+  it("x edit updates the position set with a Move label", async () => {
+    const committed: Array<{ mutation: Record<string, unknown>; label: string }> = [];
+    let commit!: Commit;
+    renderStaticHook(committed, (c) => (commit = c));
+    await act(async () => {
+      await commit(selection, { x: 400 });
+    });
+    const update = committed.find((c) => c.mutation.type === "update-properties");
+    expect(update).toBeDefined();
+    expect(update!.mutation.animationId).toBe("#box-set-0-position");
+    expect(update!.label).toBe("Move layer");
+  });
+});

package/src/hooks/useAnimatedPropertyCommit.ts

@@ -103,6 +103,22 @@ async function maybeAutoKeyframeSet(
 
 type Commit = NonNullable<CommitAnimatedPropertyDeps["gsapCommitMutation"]>;
 
+/** Undo-history label for a static-set commit, from the group it writes. */
+const STATIC_SET_LABELS: Partial<Record<ReturnType<typeof classifyPropertyGroup>, string>> = {
+  position: "Move layer",
+  scale: "Resize layer",
+  size: "Resize layer",
+  rotation: "Rotate layer",
+  visual: "Set opacity",
+  other: "Set 3D transform",
+};
+
+function staticSetLabel(propEntries: [string, number | string][]): string {
+  const groups = new Set(propEntries.map(([k]) => classifyPropertyGroup(k)));
+  const only = groups.size === 1 ? [...groups][0] : undefined;
+  return (only && STATIC_SET_LABELS[only]) || "Set properties";
+}
+
 /** Merge ALL props into the static `set` in ONE commit (value-only, instant), then
  *  auto-keyframe. One mutation — a per-property loop would shift the set's
  *  group-derived id mid-way (e.g. reset adding `scale` to a rotation set), 404-ing
@@ -133,7 +149,11 @@ async function commitSetProps(
   await commit(
     selection,
     { type: "update-properties", animationId: setAnim.id, properties },
-    { label: "Set 3D transform", softReload: true, ...(instantPatch ? { instantPatch } : {}) },
+    {
+      label: staticSetLabel(propEntries),
+      softReload: true,
+      ...(instantPatch ? { instantPatch } : {}),
+    },
   );
   await maybeAutoKeyframeSet(selection, setAnim, animations, commit);
 }
@@ -152,22 +172,70 @@ async function commitStaticSet(
   commit: Commit,
 ): Promise<void> {
   if (!selector) return;
-  // Update an existing `set` in ONE batched commit — NEVER a flat `to`/`from`. A
-  // set's id is GROUP-derived, so a per-prop loop shifts it the instant a new-group
-  // prop lands (e.g. `scale` onto a rotation set), 404-ing the next prop; commitSetProps
-  // sends them together. A static element with no set gets a dedicated `set` carrying
-  // ALL props in ONE `add`.
-  const existingSet = animations.find((a) => a.method === "set" && a.targetSelector === selector);
-  if (existingSet) {
-    await commitSetProps(selection, existingSet, propEntries, selector, animations, commit);
-    return;
+  // One commit per PROPERTY GROUP, each into a set that owns that group — never a
+  // flat `to`/`from`, and never a foreign-group set (a width edit used to merge
+  // into the element's position set, producing a mixed set the split machinery
+  // exists to prevent). Within a group everything batches into ONE commit: a
+  // set's id is group-derived, so a per-prop loop would shift the id mid-way and
+  // 404 the next update.
+  const byGroup = new Map<string, [string, number | string][]>();
+  for (const entry of propEntries) {
+    const group = classifyPropertyGroup(entry[0]);
+    const batch = byGroup.get(group) ?? [];
+    batch.push(entry);
+    byGroup.set(group, batch);
+  }
+  const sets = animations.filter((a) => a.method === "set" && a.targetSelector === selector);
+  // Resolve every group's target BEFORE committing anything, and coalesce
+  // groups that land on the SAME set into one commit: the `sets` snapshot is
+  // captured once, so if two groups resolved to one legacy mixed set, a first
+  // commit could re-shape it server-side and leave the second chasing a stale
+  // id (404 on legacy pre-split files).
+  const byTargetSet = new Map<GsapAnimation, [string, number | string][]>();
+  const newSetBatches: [string, number | string][][] = [];
+  for (const [group, batch] of byGroup) {
+    const existingSet = findGroupOwningSet(sets, group);
+    if (existingSet) {
+      byTargetSet.set(existingSet, [...(byTargetSet.get(existingSet) ?? []), ...batch]);
+    } else {
+      newSetBatches.push(batch);
+    }
   }
-  // Base `gsap.set` (off-timeline) — a static hold with no 0% keyframe marker, so
-  // adjusting a 3D transform on a non-keyframed element doesn't drop a keyframe on
-  // the timeline (matches the manual-drag UX). The global-set instant patch applies
-  // it straight to the element so the first edit shows with no soft-reload flash.
+  for (const [targetSet, batch] of byTargetSet) {
+    await commitSetProps(selection, targetSet, batch, selector, animations, commit);
+  }
+  // Fresh adds don't reshape existing sets, so their ids can't go stale.
+  for (const batch of newSetBatches) {
+    await addGlobalStaticSet(selection, batch, selector, commit);
+  }
+}
+
+/**
+ * The set that owns a property group: one already dedicated to the group wins;
+ * else a mixed set that already carries a property of the group (merging
+ * same-group values there beats spawning a second writer for the channel).
+ */
+function findGroupOwningSet(sets: GsapAnimation[], group: string): GsapAnimation | undefined {
+  return (
+    sets.find((a) => a.propertyGroup === group) ??
+    sets.find((a) => Object.keys(a.properties).some((k) => classifyPropertyGroup(k) === group))
+  );
+}
+
+/**
+ * Base `gsap.set` (off-timeline) — a static hold with no 0% keyframe marker, so
+ * adjusting a 3D transform on a non-keyframed element doesn't drop a keyframe on
+ * the timeline (matches the manual-drag UX). The global-set instant patch applies
+ * it straight to the element so the first edit shows with no soft-reload flash.
+ */
+async function addGlobalStaticSet(
+  selection: DomEditSelection,
+  batch: [string, number | string][],
+  selector: string,
+  commit: Commit,
+): Promise<void> {
   const numericProps: SetPatchProps = {};
-  for (const [k, v] of propEntries) {
+  for (const [k, v] of batch) {
     if (typeof v === "number") numericProps[k as keyof SetPatchProps] = v;
   }
   await commit(
@@ -177,11 +245,11 @@ async function commitStaticSet(
       targetSelector: selector,
       method: "set",
       position: 0,
-      properties: Object.fromEntries(propEntries),
+      properties: Object.fromEntries(batch),
       global: true,
     },
     {
-      label: "Set 3D transform",
+      label: staticSetLabel(batch),
       softReload: true,
       ...(Object.keys(numericProps).length > 0
         ? {

package/src/hooks/useGsapAwareEditing.ts

@@ -10,11 +10,8 @@
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import {
-  tryGsapDragIntercept,
-  tryGsapResizeIntercept,
-  tryGsapRotationIntercept,
-} from "./gsapRuntimeBridge";
+import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
+import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
 import {
   useGsapSaveFailureTelemetry,