@hyperframes/studio 0.7.25 → 0.7.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.25",
+  "version": "0.7.26",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.25",
-    "@hyperframes/parsers": "0.7.25",
-    "@hyperframes/player": "0.7.25",
-    "@hyperframes/sdk": "0.7.25",
-    "@hyperframes/studio-server": "0.7.25"
+    "@hyperframes/core": "0.7.26",
+    "@hyperframes/parsers": "0.7.26",
+    "@hyperframes/sdk": "0.7.26",
+    "@hyperframes/player": "0.7.26",
+    "@hyperframes/studio-server": "0.7.26"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.25"
+    "@hyperframes/producer": "0.7.26"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineToolbar.test.tsx

@@ -0,0 +1,50 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore } from "../player/store/playerStore";
+import { TimelineToolbar } from "./TimelineToolbar";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ autoKeyframeEnabled: true });
+});
+
+function renderToolbar() {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(<TimelineToolbar toggleTimelineVisibility={vi.fn()} />);
+  });
+  return { host, root };
+}
+
+// Regression (#1808): the auto-keyframe toggle is a GLOBAL setting (unlike the
+// diamond "Add keyframe" button, which needs a selection to mean anything), so
+// it must stay visible and usable with nothing selected — it must not be
+// gated behind `domEditSession`/`onToggleKeyframe`.
+describe("TimelineToolbar — auto-keyframe toggle (#1808)", () => {
+  it("renders enabled (pressed) by default with no selection", () => {
+    const { host, root } = renderToolbar();
+    const btn = host.querySelector<HTMLButtonElement>('button[aria-pressed="true"]');
+    expect(btn).not.toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("flips autoKeyframeEnabled in the store when clicked", () => {
+    const { host, root } = renderToolbar();
+    const btn = host.querySelector<HTMLButtonElement>('button[aria-pressed="true"]')!;
+
+    act(() => {
+      btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(usePlayerStore.getState().autoKeyframeEnabled).toBe(false);
+    expect(host.querySelector('button[aria-pressed="false"]')).not.toBeNull();
+    act(() => root.unmount());
+  });
+});

package/src/components/TimelineToolbar.tsx

@@ -79,6 +79,8 @@ export function TimelineToolbar({
 }: TimelineToolbarProps) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
+  const autoKeyframeEnabled = usePlayerStore((s) => s.autoKeyframeEnabled);
+  const setAutoKeyframeEnabled = usePlayerStore((s) => s.setAutoKeyframeEnabled);
   // Subscribe so the add-beat button reacts to playhead movement and analysis load.
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatAnalysisReady = usePlayerStore((s) => s.beatAnalysis !== null);
@@ -137,44 +139,77 @@ export function TimelineToolbar({
             </div>
           )}
           {STUDIO_KEYFRAMES_ENABLED && onToggleKeyframe && (
-            <>
-              <Tooltip
-                label={
+            <Tooltip
+              label={
+                keyframeState === "active"
+                  ? "Remove keyframe at playhead (K)"
+                  : keyframeState === "inactive"
+                    ? keyframeWillExtend
+                      ? "Add keyframe at playhead, extends animation (K)"
+                      : "Add keyframe at playhead (K)"
+                    : "Add keyframe (K)"
+              }
+            >
+              <button
+                type="button"
+                onClick={onToggleKeyframe}
+                className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
                   keyframeState === "active"
-                    ? "Remove keyframe at playhead (K)"
+                    ? "text-studio-accent"
                     : keyframeState === "inactive"
-                      ? keyframeWillExtend
-                        ? "Add keyframe at playhead — extends animation (K)"
-                        : "Add keyframe at playhead (K)"
-                      : "Add keyframe (K)"
-                }
+                      ? "text-neutral-400 hover:text-studio-accent"
+                      : "text-neutral-600 hover:text-neutral-400"
+                }`}
               >
-                <button
-                  type="button"
-                  onClick={onToggleKeyframe}
-                  className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
-                    keyframeState === "active"
-                      ? "text-studio-accent"
-                      : keyframeState === "inactive"
-                        ? "text-neutral-400 hover:text-studio-accent"
-                        : "text-neutral-600 hover:text-neutral-400"
-                  }`}
-                >
-                  <svg width="18" height="18" viewBox="0 0 10 10" fill="currentColor">
-                    {keyframeState === "active" ? (
-                      <path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
-                    ) : (
-                      <path
-                        d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="1.2"
-                      />
-                    )}
-                  </svg>
-                </button>
-              </Tooltip>
-            </>
+                <svg width="18" height="18" viewBox="0 0 10 10" fill="currentColor">
+                  {keyframeState === "active" ? (
+                    <path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
+                  ) : (
+                    <path
+                      d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.2"
+                    />
+                  )}
+                </svg>
+              </button>
+            </Tooltip>
+          )}
+          {STUDIO_KEYFRAMES_ENABLED && (
+            <Tooltip
+              label={
+                autoKeyframeEnabled
+                  ? "Auto-record manual edits as keyframes (click to turn off)"
+                  : "Manual edits will not be recorded as keyframes (click to turn on)"
+              }
+            >
+              <button
+                type="button"
+                onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
+                aria-pressed={autoKeyframeEnabled}
+                className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
+                  autoKeyframeEnabled
+                    ? "text-red-400 hover:text-red-300"
+                    : "text-neutral-600 hover:text-neutral-400"
+                }`}
+              >
+                <svg width="18" height="18" viewBox="0 0 10 10" fill="none">
+                  {/* Same diamond outline as the Add-keyframe icon, with a
+                      record-style dot inside: filled = auto-recording,
+                      hollow = manual edits won't be keyframed. */}
+                  <path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
+                  <circle
+                    cx="5"
+                    cy="5"
+                    r="1.8"
+                    fill={autoKeyframeEnabled ? "currentColor" : "none"}
+                    stroke="currentColor"
+                    strokeWidth="1"
+                  />
+                </svg>
+              </button>
+            </Tooltip>
           )}
           {onSplitElement &&
             (() => {

package/src/components/editor/MotionPathOverlay.tsx

@@ -3,6 +3,7 @@ import type { DomEditSelection } from "./domEditing";
 import { useDomEditContext } from "../../contexts/DomEditContext";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { parkPlayheadOnKeyframe } from "../../hooks/gsapDragCommit";
+import { commitWholePropertyOffset } from "../../hooks/gsapWholePropertyOffsetCommit";
 import { nearestPointOnPath, type MotionNodeRef } from "./motionPathGeometry";
 import { editableAnimationId, selectorFor } from "./motionPathSelection";
 import { ACCENT, MotionPathNode } from "./MotionPathNode";
@@ -334,13 +335,35 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     // high zoom) would commit an identical value — a no-op undo entry. Skip the
     // commit, but don't treat it as a click either (the user did drag).
     if (x === Math.round(d.initX) && y === Math.round(d.initY)) return;
-    void commitNode(d.ref, x, y, animId, commitMutation);
+    // With auto-keyframe off (#1808), dragging a keyframe's node on the motion
+    // path (the common way to nudge a KEYFRAMED element's position on canvas,
+    // since the element renders exactly at its current keyframe) shifts the
+    // whole path instead of moving just that one keyframe.
+    const anim =
+      d.ref.type === "keyframe" ? selectedGsapAnimations?.find((a) => a.id === animId) : undefined;
+    if (
+      d.ref.type === "keyframe" &&
+      anim &&
+      selection &&
+      !usePlayerStore.getState().autoKeyframeEnabled
+    ) {
+      void commitWholePropertyOffset(
+        selection,
+        anim,
+        { x, y },
+        d.ref.pct,
+        iframeRef.current,
+        { commitMutation: (_sel, mutation, options) => commitMutation(mutation, options) },
+        "Move animation path",
+      );
+    } else {
+      void commitNode(d.ref, x, y, animId, commitMutation);
+    }
     // Park the playhead on the edited keyframe's time so the element previews AT
     // that keyframe. Without it, a playhead sitting before the tween renders the
     // element's base pose — the edit (correct on the path) looks like it vanished.
-    if (d.ref.type === "keyframe") {
-      const anim = selectedGsapAnimations?.find((a) => a.id === animId);
-      if (anim) parkPlayheadOnKeyframe(anim, d.ref.pct);
+    if (d.ref.type === "keyframe" && anim) {
+      parkPlayheadOnKeyframe(anim, d.ref.pct);
     }
   };
 

package/src/components/editor/SnapToolbar.test.tsx

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+
+import React, { act, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useAppHotkeys } from "../../hooks/useAppHotkeys";
+import { usePlayerStore } from "../../player/store/playerStore";
+import type { LeftSidebarHandle } from "../sidebar/LeftSidebar";
+import type { DomEditSelection } from "./domEditing";
+import { SnapToolbar } from "./SnapToolbar";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  window.localStorage.clear();
+  usePlayerStore.getState().reset();
+});
+
+function renderToolbar(onSnapChange = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(<SnapToolbar onSnapChange={onSnapChange} />);
+  });
+  return { root, onSnapChange };
+}
+
+function AppHotkeyHarness() {
+  const domEditSelectionRef = useRef<DomEditSelection | null>(null);
+  const clearDomSelectionRef = useRef<() => void>(() => undefined);
+  const domEditSaveTimestampRef = useRef(0);
+  const leftSidebarRef = useRef<LeftSidebarHandle | null>(null);
+
+  useAppHotkeys({
+    toggleTimelineVisibility: vi.fn(),
+    handleTimelineElementDelete: vi.fn(),
+    handleTimelineElementSplit: vi.fn(),
+    handleDomEditElementDelete: vi.fn(),
+    domEditSelectionRef,
+    clearDomSelectionRef,
+    editHistory: {
+      undo: vi.fn(async () => ({ ok: false })),
+      redo: vi.fn(async () => ({ ok: false })),
+      state: { undo: [], redo: [] },
+    },
+    readOptionalProjectFile: vi.fn(async () => ""),
+    readProjectFile: vi.fn(async () => ""),
+    writeProjectFile: vi.fn(async () => undefined),
+    domEditSaveTimestampRef,
+    showToast: vi.fn(),
+    syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
+    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    leftSidebarRef,
+    handleCopy: vi.fn(() => false),
+    handlePaste: vi.fn(async () => undefined),
+    handleCut: vi.fn(async () => false),
+    onResetKeyframes: vi.fn(() => false),
+    onDeleteSelectedKeyframes: vi.fn(),
+  });
+
+  return null;
+}
+
+function renderToolbarWithAppHotkeys(onSnapChange = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <>
+        <AppHotkeyHarness />
+        <SnapToolbar onSnapChange={onSnapChange} />
+      </>,
+    );
+  });
+  return { root, onSnapChange };
+}
+
+describe("SnapToolbar keyboard shortcuts", () => {
+  it("toggles snap on an unclaimed S keypress", () => {
+    const { root, onSnapChange } = renderToolbar();
+
+    act(() => {
+      document.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "s", bubbles: true, cancelable: true }),
+      );
+    });
+
+    expect(onSnapChange).toHaveBeenCalledWith(expect.objectContaining({ snapEnabled: false }));
+    act(() => root.unmount());
+  });
+
+  it("does not toggle snap when another handler already prevented S", () => {
+    const { root, onSnapChange } = renderToolbar();
+    const event = new KeyboardEvent("keydown", {
+      key: "s",
+      bubbles: true,
+      cancelable: true,
+    });
+    event.preventDefault();
+
+    act(() => {
+      document.dispatchEvent(event);
+    });
+
+    expect(onSnapChange).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("does not toggle snap when the app split shortcut claims S without a selected clip", () => {
+    const { root, onSnapChange } = renderToolbarWithAppHotkeys();
+
+    act(() => {
+      document.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "s", bubbles: true, cancelable: true }),
+      );
+    });
+
+    expect(onSnapChange).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/SnapToolbar.tsx

@@ -65,6 +65,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
   useEffect(() => {
     // fallow-ignore-next-line complexity
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.defaultPrevented) return;
       const t = e.target;
       if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
       if (t instanceof HTMLElement && t.isContentEditable) return;

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { tryGsapDragIntercept } from "./gsapRuntimeBridge";
+import { usePlayerStore } from "../player/store/playerStore";
 
 /**
  * Regression: `selectedGsapAnimations` (and the fetch fallback) is an async
@@ -178,3 +179,68 @@ describe("tryGsapDragIntercept — stale-parse guard (no resurrection after dele
     expect(staleLogged).toBe(false);
   });
 });
+
+// Regression (#1808): with the global auto-keyframe toggle off, dragging an
+// element that already has a keyframed position tween must shift the whole
+// tween (a "replace-with-keyframes" carrying every original percentage) —
+// the same path Alt-drag already takes — instead of inserting a keyframe at
+// the playhead.
+describe("tryGsapDragIntercept — autoKeyframeEnabled toggle (#1808)", () => {
+  afterEach(() => {
+    usePlayerStore.setState({ autoKeyframeEnabled: true });
+  });
+
+  const keyframedPositionAnim = {
+    id: "#puck-b-to-position",
+    targetSelector: "#puck-b",
+    propertyGroup: "position",
+    method: "to",
+    properties: {},
+    position: 0,
+    resolvedStart: 0,
+    duration: 2,
+    keyframes: {
+      keyframes: [
+        { percentage: 0, properties: { x: 0, y: 0 } },
+        { percentage: 100, properties: { x: 100, y: 0 } },
+      ],
+    },
+  } as unknown as GsapAnimation;
+
+  it("shifts the whole tween instead of adding a keyframe when the toggle is off", async () => {
+    usePlayerStore.setState({ autoKeyframeEnabled: false, currentTime: 2 }); // playhead at 100%
+    const commitMutation = vi.fn();
+    const iframe = fakeIframe("puck-b", []);
+
+    const handled = await tryGsapDragIntercept(
+      selection,
+      { x: -50, y: 0 },
+      [keyframedPositionAnim],
+      iframe,
+      commitMutation,
+    );
+
+    expect(handled).toBe(true);
+    const types = commitMutation.mock.calls.map(([, m]) => m.type);
+    expect(types).toContain("replace-with-keyframes");
+    expect(types).not.toContain("add-keyframe");
+  });
+
+  it("still adds/updates a keyframe at the playhead when the toggle is on (default)", async () => {
+    usePlayerStore.setState({ autoKeyframeEnabled: true, currentTime: 2 });
+    const commitMutation = vi.fn();
+    const iframe = fakeIframe("puck-b", []);
+
+    const handled = await tryGsapDragIntercept(
+      selection,
+      { x: -50, y: 0 },
+      [keyframedPositionAnim],
+      iframe,
+      commitMutation,
+    );
+
+    expect(handled).toBe(true);
+    const types = commitMutation.mock.calls.map(([, m]) => m.type);
+    expect(types).not.toContain("replace-with-keyframes");
+  });
+});

package/src/hooks/gsapRuntimeBridge.ts

@@ -26,6 +26,7 @@ import {
   findSizeSetAnimation,
   materializeIfDynamic,
 } from "./gsapDragCommit";
+import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
 import { selectorFromSelection } from "./gsapShared";
@@ -225,7 +226,12 @@ export async function tryGsapDragIntercept(
   }
 
   const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations };
-  if (options?.altKey) {
+  // Alt-drag already means "shift the whole path" — the global auto-keyframe
+  // toggle (#1808) just makes that the default while it's off, so a manual
+  // edit on an already-animated element nudges the animation instead of
+  // inserting/updating a keyframe at the playhead.
+  const autoKeyframeEnabled = usePlayerStore.getState().autoKeyframeEnabled;
+  if (options?.altKey || !autoKeyframeEnabled) {
     await commitWholePathOffset(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
   } else {
     await commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
@@ -332,6 +338,24 @@ export async function tryGsapResizeIntercept(
       height: Math.round(size.height),
     };
   }
+
+  // With auto-keyframe off (#1808), `anim` is already a real (non-"set")
+  // tween for this resize group, so nudge it as a whole rather than adding a
+  // keyframe at the playhead.
+  if (!usePlayerStore.getState().autoKeyframeEnabled) {
+    if (activeKeyframePct != null) setActiveKeyframePct(null);
+    await commitWholePropertyOffset(
+      selection,
+      anim,
+      resizeProps,
+      pct,
+      iframe,
+      { commitMutation, fetchAnimations: fetchFallbackAnimations },
+      "Resize animation",
+    );
+    return true;
+  }
+
   const ct = usePlayerStore.getState().currentTime;
   const ts = resolveTweenStart(anim);
   const td = resolveTweenDuration(anim);
@@ -490,6 +514,22 @@ export async function tryGsapRotationIntercept(
 
   const pct = computeCurrentPercentage(selection, anim);
 
+  // With auto-keyframe off (#1808), a rotation tween already exists for this
+  // element (checked above) so nudge it as a whole rather than adding a
+  // keyframe at the playhead.
+  if (!usePlayerStore.getState().autoKeyframeEnabled) {
+    await commitWholePropertyOffset(
+      selection,
+      anim,
+      { rotation: newRotation },
+      pct,
+      iframe,
+      { commitMutation, fetchAnimations: fetchFallbackAnimations },
+      "Rotate animation",
+    );
+    return true;
+  }
+
   if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
     const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
     if (newId) anim = { ...anim, id: newId };

package/src/hooks/gsapTweenSynth.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
+
+function anim(overrides: Partial<GsapAnimation>): GsapAnimation {
+  return {
+    id: "a1",
+    targetSelector: "#title",
+    method: "to",
+    position: 0,
+    properties: {},
+    ...overrides,
+  };
+}
+
+describe("synthesizeFlatTweenKeyframes", () => {
+  it("returns null for a set() static hold", () => {
+    expect(synthesizeFlatTweenKeyframes(anim({ method: "set", properties: { x: 5 } }))).toBeNull();
+  });
+
+  // Regression: removeAllKeyframesFromScript collapses a keyframed tween to
+  // `tl.to(..., { duration: 0, immediateRender: true })` — a static hold with
+  // the same "not an animation" semantics as set(), but a different method
+  // string. Before this fix, only position-only (x/y) collapses were treated
+  // as holds elsewhere; a collapse to scale/opacity (or anything else) still
+  // synthesized a phantom keyframe diamond after "Delete All Keyframes".
+  it("returns null for a to() collapsed to a zero-duration immediateRender hold", () => {
+    const collapsed = anim({
+      method: "to",
+      duration: 0,
+      // Both parsers encode a literal `immediateRender: true` as this raw
+      // source string, not a boolean — see gsapParser.ts/gsapParserAcorn.ts.
+      extras: { immediateRender: "__raw:true" },
+      properties: { scale: 1, opacity: 1 },
+    });
+    expect(synthesizeFlatTweenKeyframes(collapsed)).toBeNull();
+  });
+
+  it("still synthesizes keyframes for a genuine animated to() tween", () => {
+    const out = synthesizeFlatTweenKeyframes(
+      anim({ method: "to", duration: 1, properties: { opacity: 1 } }),
+    );
+    expect(out).not.toBeNull();
+    expect(out?.keyframes.map((k) => k.percentage)).toEqual([0, 100]);
+  });
+
+  it("still synthesizes keyframes for a duration:0 tween that isn't an immediateRender hold", () => {
+    // duration:0 alone isn't enough — only paired with immediateRender does it
+    // mean "this is a static hold, not an animation".
+    const out = synthesizeFlatTweenKeyframes(
+      anim({ method: "to", duration: 0, properties: { opacity: 1 } }),
+    );
+    expect(out).not.toBeNull();
+  });
+});

package/src/hooks/gsapTweenSynth.ts

@@ -23,12 +23,18 @@ export function deduplicateKeyframes(
 
 // fallow-ignore-next-line complexity
 export function synthesizeFlatTweenKeyframes(anim: GsapAnimation): GsapKeyframesData | null {
-  if (anim.method === "set") {
-    // A `set` is a STATIC HOLD — a value applied at one point, not an animated
-    // keyframe. It must NOT synthesize a keyframe, or the timeline + panel show a
-    // phantom diamond for a value that doesn't animate. This holds for a base
-    // `gsap.set` (off-timeline) AND an on-timeline `tl.set`, and aligns the AST
-    // path with the runtime scan, which already skips every zero-duration set.
+  // Both parsers store extras as raw source text (`__raw:${code}`) so
+  // non-editable config like `stagger: {...}` survives verbatim — a literal
+  // `immediateRender: true` prints as exactly this string, not a boolean.
+  const hasImmediateRenderHold = anim.extras?.immediateRender === "__raw:true";
+  if (anim.method === "set" || (anim.duration === 0 && hasImmediateRenderHold)) {
+    // A `set` — or a `to()`/`from()` collapsed to a zero-duration
+    // immediateRender hold (what removeAllKeyframesFromScript collapses a
+    // keyframed tween to) — is a STATIC HOLD: a value applied at one point,
+    // not an animated keyframe. It must NOT synthesize a keyframe, or the
+    // timeline + panel show a phantom diamond for a value that doesn't
+    // animate. This aligns the AST path with the runtime scan, which already
+    // skips every zero-duration set.
     return null;
   }
   const toProps = anim.properties;