@hyperframes/core 0.6.109 → 0.6.111

package/dist/parsers/gsapWriterAcorn.js

@@ -7,8 +7,9 @@
  * pretty-printer churn. Consumes ParsedGsapAcornForWrite from gsapParserAcorn.ts.
  */
 import MagicString from "magic-string";
-import { serializeValue, safeJsKey } from "./gsapSerialize.js";
+import { resolveConversionProps, extractArcWaypoints, buildMotionPathObjectCode, } from "./gsapSerialize.js";
 import { parseGsapScriptAcornForWrite, } from "./gsapParserAcorn.js";
+import { classifyPropertyGroup } from "./gsapConstants.js";
 import * as acornWalk from "acorn-walk";
 // ── Code generation helpers ──────────────────────────────────────────────────
 // Local serializer for the tween-statement path, which may carry boolean/object
@@ -69,6 +70,11 @@ function findPropertyNode(varsArgNode, key) {
     }
     return undefined;
 }
+/** The `keyframes` property's ObjectExpression value, or null when not a keyframe tween. */
+function keyframesObjectNode(varsNode) {
+    const kfProp = findPropertyNode(varsNode, "keyframes");
+    return kfProp?.value?.type === "ObjectExpression" ? kfProp.value : null;
+}
 function findEnclosingExpressionStatement(ancestors) {
     for (let i = ancestors.length - 2; i >= 0; i--) {
         if (ancestors[i]?.type === "ExpressionStatement")
@@ -118,6 +124,17 @@ function removeProp(ms, propNode, editableProps) {
         ms.remove(editableProps[idx - 1].end, propNode.end);
     }
 }
+/** Serialize a vars record to an object-literal source: `{ k: v, ... }`. */
+function buildVarsObjectCode(record) {
+    const entries = Object.entries(record).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
+    return entries.length > 0 ? `{ ${entries.join(", ")} }` : "{}";
+}
+/** Overwrite a tween call's vars ObjectExpression with freshly-built source. */
+function overwriteVarsArg(ms, call, objCode) {
+    if (!call.varsArg)
+        return;
+    ms.overwrite(call.varsArg.start, call.varsArg.end, objCode);
+}
 /**
  * Update a property value if it exists, or append a new key: val before the
  * closing `}`. Call with the full ObjectExpression node.
@@ -134,6 +151,84 @@ function upsertProp(ms, objNode, key, value) {
         ms.appendLeft(objNode.end - 1, `${sep}${safeKey(key)}: ${valueToCode(value)}`);
     }
 }
+/**
+ * Vars keys that are NOT editable transform/style props: builtins
+ * (duration/ease/delay), dropped callbacks, and extras (stagger/yoyo/repeat/…).
+ * The exact union of recast's BUILTIN_VAR_KEYS + DROPPED_VAR_KEYS + EXTRAS_KEYS,
+ * so both writers classify vars keys identically. (Distinct from the keyframe-
+ * conversion NON_EDITABLE_VAR_KEYS below, which intentionally omits `ease`
+ * because that path re-emits ease separately.)
+ */
+const NON_EDITABLE_PROP_KEYS = new Set([
+    "duration",
+    "ease",
+    "delay",
+    "onComplete",
+    "onStart",
+    "onUpdate",
+    "onRepeat",
+    "stagger",
+    "yoyo",
+    "repeat",
+    "repeatDelay",
+    "snap",
+    "overwrite",
+    "immediateRender",
+]);
+/**
+ * Editable transform/style key test: anything NOT a builtin, dropped callback, or
+ * extras key. Mirrors recast's isEditablePropertyKey so both writers classify
+ * vars keys identically.
+ */
+function isEditableVarKey(key) {
+    return !NON_EDITABLE_PROP_KEYS.has(key);
+}
+/**
+ * Collect verbatim `key: value` entries to PRESERVE from a vars/keyframe
+ * ObjectExpression: every property whose key `drop` does not reject, sliced from
+ * source — except keys present in `overrides`, whose value is replaced. Returns
+ * the entries plus the set of keys it kept, so callers can append new keys.
+ */
+function preservedEntries(objNode, source, drop, overrides) {
+    const entries = [];
+    const keys = new Set();
+    for (const prop of objNode.properties ?? []) {
+        if (!isObjectProperty(prop))
+            continue;
+        const key = propKeyName(prop);
+        if (typeof key !== "string" || drop(key))
+            continue;
+        keys.add(key);
+        const code = key in overrides
+            ? valueToCode(overrides[key])
+            : source.slice(prop.value.start, prop.value.end);
+        entries.push(`${safeKey(key)}: ${code}`);
+    }
+    return { entries, keys };
+}
+/**
+ * Replace the editable-property keys on a vars ObjectExpression with exactly
+ * `newProps`, leaving non-editable keys (duration/ease/stagger/callbacks/…)
+ * untouched unless overridden in `nonEditableOverrides`. Mirrors recast's
+ * reconcileEditableProperties: editable keys absent from `newProps` are DROPPED,
+ * not merged. Rebuilt in a single ms.overwrite so the splice can never overlap a
+ * sibling edit — non-editable updates that also target this node (duration/ease/
+ * extras) are folded into the same rebuild rather than spliced separately.
+ */
+function reconcileEditableProps(ms, objNode, source, newProps, nonEditableOverrides) {
+    if (objNode?.type !== "ObjectExpression")
+        return;
+    const overrides = nonEditableOverrides ?? {};
+    const { entries, keys } = preservedEntries(objNode, source, isEditableVarKey, overrides);
+    for (const [key, value] of Object.entries(overrides)) {
+        if (!keys.has(key))
+            entries.push(`${safeKey(key)}: ${valueToCode(value)}`);
+    }
+    for (const [key, value] of Object.entries(newProps)) {
+        entries.push(`${safeKey(key)}: ${valueToCode(value)}`);
+    }
+    ms.overwrite(objNode.start, objNode.end, `{ ${entries.join(", ")} }`);
+}
 // ── Insertion helpers ─────────────────────────────────────────────────────────
 /** Traverse callee.object chain to check if a call ultimately roots at timelineVar. */
 function isTimelineRooted(node, timelineVar) {
@@ -149,8 +244,9 @@ function isTimelineRooted(node, timelineVar) {
  * not emit `tl.xxx()` calls in that case as `tl` would be undefined at render.
  */
 function findInsertionPoint(parsed) {
-    if (parsed.located.length > 0) {
-        const lastCall = parsed.located[parsed.located.length - 1].call;
+    const lastLocated = parsed.located[parsed.located.length - 1];
+    if (lastLocated) {
+        const lastCall = lastLocated.call;
         const exprStmt = findEnclosingExpressionStatement(lastCall.ancestors);
         return exprStmt?.end ?? lastCall.node.end;
     }
@@ -172,38 +268,116 @@ export function updateAnimationInScript(script, animationId, updates) {
         return script;
     const ms = new MagicString(script);
     const { call } = target;
-    if (updates.duration !== undefined) {
-        upsertProp(ms, call.varsArg, "duration", updates.duration);
-    }
-    if (updates.ease !== undefined) {
-        upsertProp(ms, call.varsArg, "ease", updates.ease);
-    }
+    // When `properties` is present we REPLACE the editable set (recast parity:
+    // editable keys absent from the update are dropped). Fold any concurrent
+    // non-editable updates (duration/ease/extras) into the single varsArg rebuild
+    // so their splices can't overlap the rebuild's overwrite of the whole node.
     if (updates.properties) {
-        for (const [key, value] of Object.entries(updates.properties)) {
-            upsertProp(ms, call.varsArg, key, value);
+        const overrides = {};
+        if (updates.duration !== undefined)
+            overrides.duration = updates.duration;
+        if (updates.ease !== undefined)
+            overrides.ease = updates.ease;
+        if (updates.extras)
+            Object.assign(overrides, updates.extras);
+        reconcileEditableProps(ms, call.varsArg, script, updates.properties, overrides);
+    }
+    else {
+        if (updates.duration !== undefined) {
+            upsertProp(ms, call.varsArg, "duration", updates.duration);
+        }
+        if (updates.ease !== undefined) {
+            // For a keyframe tween, easing lives at keyframes.easeEach (per-keyframe),
+            // not a top-level ease. Writing top-level ease would leave the per-keyframe
+            // easing unchanged — the user's edit would silently do nothing.
+            const kfNode = keyframesObjectNode(call.varsArg);
+            if (kfNode)
+                upsertProp(ms, kfNode, "easeEach", updates.ease);
+            else
+                upsertProp(ms, call.varsArg, "ease", updates.ease);
+        }
+        if (updates.extras) {
+            for (const [key, value] of Object.entries(updates.extras)) {
+                upsertProp(ms, call.varsArg, key, value);
+            }
         }
     }
     if (updates.fromProperties && call.method === "fromTo" && call.fromArg) {
-        for (const [key, value] of Object.entries(updates.fromProperties)) {
-            upsertProp(ms, call.fromArg, key, value);
-        }
+        // fromTo's from-vars carry only editable props — REPLACE them too (recast
+        // parity). fromArg is a distinct node from varsArg, so this rebuild never
+        // overlaps the varsArg edits above.
+        reconcileEditableProps(ms, call.fromArg, script, updates.fromProperties);
     }
     if (updates.position !== undefined) {
-        const posIdx = call.method === "fromTo" ? 3 : 2;
-        const posArgNode = call.node.arguments?.[posIdx];
-        if (posArgNode) {
-            ms.overwrite(posArgNode.start, posArgNode.end, valueToCode(updates.position));
-        }
-        else {
-            ms.appendLeft(call.node.end - 1, `, ${valueToCode(updates.position)}`);
-        }
+        overwritePosition(ms, call, updates.position);
+    }
+    return ms.toString();
+}
+/**
+ * Overwrite a tween call's numeric position argument (the positionArg the parser
+ * located: 3rd arg for fromTo, else 2nd), or append one when the call has no
+ * explicit position. Shared by updateAnimationInScript and the
+ * shift/scalePositionsInScript timeline ops.
+ */
+function overwritePosition(ms, call, position) {
+    if (call.positionArg) {
+        ms.overwrite(call.positionArg.start, call.positionArg.end, valueToCode(position));
+    }
+    else {
+        ms.appendLeft(call.node.end - 1, `, ${valueToCode(position)}`);
+    }
+}
+/**
+ * Shift every tween targeting `targetSelector` by `delta` seconds (clamped ≥0),
+ * rewriting each call's position argument. Mirrors recast's shiftPositionsInScript
+ * (used by timeline clip-move to keep GSAP positions in sync with the clip start).
+ */
+export function shiftPositionsInScript(script, targetSelector, delta) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const ms = new MagicString(script);
+    let changed = false;
+    for (const entry of parsed.located) {
+        if (entry.animation.targetSelector !== targetSelector)
+            continue;
+        if (typeof entry.animation.position !== "number")
+            continue;
+        const newPos = Math.max(0, Math.round((entry.animation.position + delta) * 1000) / 1000);
+        overwritePosition(ms, entry.call, newPos);
+        changed = true;
     }
-    if (updates.extras) {
-        for (const [key, value] of Object.entries(updates.extras)) {
-            upsertProp(ms, call.varsArg, key, value);
+    return changed ? ms.toString() : script;
+}
+/**
+ * Linearly remap every tween targeting `targetSelector` from the old clip
+ * [oldStart, oldDuration] onto the new [newStart, newDuration] (position and,
+ * when present, duration scaled by the duration ratio). Mirrors recast's
+ * scalePositionsInScript (used by timeline clip-resize).
+ */
+export function scalePositionsInScript(script, targetSelector, oldStart, oldDuration, newStart, newDuration) {
+    if (oldDuration <= 0 || newDuration <= 0)
+        return script;
+    const ratio = newDuration / oldDuration;
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const ms = new MagicString(script);
+    let changed = false;
+    for (const entry of parsed.located) {
+        if (entry.animation.targetSelector !== targetSelector)
+            continue;
+        if (typeof entry.animation.position !== "number")
+            continue;
+        const newPos = Math.max(0, Math.round((newStart + (entry.animation.position - oldStart) * ratio) * 1000) / 1000);
+        overwritePosition(ms, entry.call, newPos);
+        if (typeof entry.animation.duration === "number" && entry.animation.duration > 0) {
+            const newDur = Math.max(0.001, Math.round(entry.animation.duration * ratio * 1000) / 1000);
+            upsertProp(ms, entry.call.varsArg, "duration", newDur);
         }
+        changed = true;
     }
-    return ms.toString();
+    return changed ? ms.toString() : script;
 }
 export function addAnimationToScript(script, animation) {
     const parsed = parseGsapScriptAcornForWrite(script);
@@ -372,7 +546,7 @@ function percentageFromKey(key) {
 }
 /** Serialize a final keyframe property record (number|string values) to code. */
 function recordToCode(record) {
-    const entries = Object.entries(record).map(([k, v]) => `${safeJsKey(k)}: ${serializeValue(v)}`);
+    const entries = Object.entries(record).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
     return `{ ${entries.join(", ")} }`;
 }
 /** Percentage-keyed property nodes of a keyframes ObjectExpression, in source order. */
@@ -456,17 +630,28 @@ function autoEndpointOverwrites(kfNode, source, percentage, properties) {
     return result;
 }
 function findKfPropByPct(kfNode, percentage) {
+    // Match the CLOSEST keyframe within tolerance, not the first one within range.
+    // Keyframes at e.g. 0/49/50/100 are all valid (the SDK dedups to a unique
+    // match at TOLERANCE=0.001 upstream); picking the first-within-PCT_TOLERANCE=2
+    // would hit 49% when the caller meant 50%. Tie-break on the earliest index so
+    // the choice stays deterministic.
     const props = kfNode.properties ?? [];
+    let best = null;
+    let bestDist = Number.POSITIVE_INFINITY;
     for (let i = 0; i < props.length; i++) {
         const prop = props[i];
         if (!isObjectProperty(prop))
             continue;
         const key = propKeyName(prop);
-        if (typeof key === "string" && Math.abs(percentageFromKey(key) - percentage) <= PCT_TOLERANCE) {
-            return { prop, idx: i };
+        if (typeof key !== "string")
+            continue;
+        const dist = Math.abs(percentageFromKey(key) - percentage);
+        if (dist <= PCT_TOLERANCE && dist < bestDist) {
+            best = { prop, idx: i };
+            bestDist = dist;
         }
     }
-    return null;
+    return best;
 }
 export function updateKeyframeInScript(script, animationId, percentage, properties, ease) {
     const parsed = parseGsapScriptAcornForWrite(script);
@@ -603,7 +788,19 @@ export function addKeyframeToScript(script, animationId, percentage, properties,
     // Emit exactly one overwrite per changed node, plus one insert for a new key.
     const ms = new MagicString(src);
     if (existing) {
-        ms.overwrite(existing.prop.value.start, existing.prop.value.end, recordToCode(targetRecord));
+        // Merge into the existing keyframe at this percentage, preserving sibling
+        // properties — overwrite only the given keys. (A whole-value overwrite here
+        // would silently drop other properties already keyframed at this percent.)
+        if (existing.prop.value?.type === "ObjectExpression") {
+            for (const [k, v] of Object.entries(properties)) {
+                upsertProp(ms, existing.prop.value, k, v);
+            }
+            if (ease !== undefined)
+                upsertProp(ms, existing.prop.value, "ease", ease);
+        }
+        else {
+            ms.overwrite(existing.prop.value.start, existing.prop.value.end, recordToCode(targetRecord));
+        }
     }
     else {
         insertNewKeyframe(ms, kfNode, percentage, `${percentage}%`, recordToCode(targetRecord));
@@ -632,6 +829,25 @@ function insertNewKeyframe(ms, kfNode, percentage, pctKey, valueCode) {
         ms.appendLeft(kfNode.end - 1, `${sep}${JSON.stringify(pctKey)}: ${valueCode}`);
     }
 }
+/**
+ * Rebuild a vars ObjectExpression that has just dropped below two keyframes,
+ * collapsing `keyframes: {…}` back to a flat tween. Mirrors recast's
+ * collapseKeyframesToFlat: drop the `keyframes` + `easeEach` keys, preserve every
+ * other vars key verbatim, and splice the remaining keyframe's properties (minus
+ * its per-keyframe `ease`) in as flat vars keys. Single ms.overwrite of the whole
+ * vars node so the splice can't overlap the keyframe removal.
+ */
+function collapseKeyframesToFlat(ms, varsNode, source, remainingRecord) {
+    if (varsNode?.type !== "ObjectExpression")
+        return;
+    const dropKeyframeKeys = (key) => key === "keyframes" || key === "easeEach";
+    const { entries } = preservedEntries(varsNode, source, dropKeyframeKeys, {});
+    for (const [k, v] of Object.entries(remainingRecord)) {
+        if (k !== "ease")
+            entries.push(`${safeKey(k)}: ${valueToCode(v)}`);
+    }
+    ms.overwrite(varsNode.start, varsNode.end, `{ ${entries.join(", ")} }`);
+}
 export function removeKeyframeFromScript(script, animationId, percentage) {
     const parsed = parseGsapScriptAcornForWrite(script);
     if (!parsed)
@@ -646,16 +862,373 @@ export function removeKeyframeFromScript(script, animationId, percentage) {
     const match = findKfPropByPct(kfNode, percentage);
     if (!match)
         return script;
-    const allProps = (kfNode.properties ?? []).filter((p) => isObjectProperty(p));
     const ms = new MagicString(script);
+    // If removing this keyframe leaves fewer than two, collapse the keyframes
+    // object back to a flat tween (recast parity) instead of leaving a lone
+    // keyframe. We rebuild the whole vars node, so we never also splice the kf
+    // node — the two edits would overlap.
+    const remaining = percentagePropsOf(kfNode).filter((p) => p !== match.prop);
+    if (remaining.length < 2) {
+        const sole = remaining[0];
+        const record = sole ? valueNodeToRecord(sole.value, script) : {};
+        collapseKeyframesToFlat(ms, target.call.varsArg, script, record);
+        return ms.toString();
+    }
+    const allProps = (kfNode.properties ?? []).filter((p) => isObjectProperty(p));
     removeProp(ms, match.prop, allProps);
     return ms.toString();
 }
+export function removePropertyFromAnimation(script, animationId, property, from = false) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const { call } = target;
+    const objNode = from ? (call.method === "fromTo" ? call.fromArg : null) : call.varsArg;
+    if (!objNode)
+        return script;
+    const propNode = findPropertyNode(objNode, property);
+    if (!propNode)
+        return script;
+    const allProps = (objNode.properties ?? []).filter((p) => isObjectProperty(p));
+    const ms = new MagicString(script);
+    removeProp(ms, propNode, allProps);
+    return ms.toString();
+}
+/**
+ * Remove all keyframes from a tween, collapsing to a flat tween with one
+ * keyframe's properties: the first for `from()`, the last otherwise (the
+ * destination = the visible resting state).
+ */
+export function removeAllKeyframesFromScript(script, animationId) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const kfs = target.animation.keyframes?.keyframes;
+    if (!kfs || kfs.length === 0)
+        return script;
+    const sorted = [...kfs].sort((a, b) => a.percentage - b.percentage);
+    const collapse = target.call.method === "from" ? sorted[0] : sorted[sorted.length - 1];
+    if (!collapse)
+        return script;
+    const ms = new MagicString(script);
+    overwriteVarsArg(ms, target.call, buildVarsObjectCode(buildCollapsedFlatVars(target.animation, collapse)));
+    return ms.toString();
+}
+// Flat vars for a tween collapsing its keyframes onto one stop: existing
+// top-level props, then the collapse keyframe's props (skip per-keyframe
+// `ease`), then duration/ease/extras. Drops keyframes + easeEach by omission.
+function buildCollapsedFlatVars(animation, collapse) {
+    const flat = { ...animation.properties };
+    for (const [k, v] of Object.entries(collapse.properties)) {
+        if (k !== "ease")
+            flat[k] = v;
+    }
+    if (animation.duration !== undefined)
+        flat.duration = animation.duration;
+    if (animation.ease)
+        flat.ease = animation.ease;
+    for (const [k, v] of Object.entries(animation.extras ?? {})) {
+        if (typeof v === "number" || typeof v === "string")
+            flat[k] = v;
+    }
+    return flat;
+}
+/** Build the full replacement vars object for a tween being converted to keyframes. */
+function buildKeyframesVarsCode(animation, fromProps, toProps, varsNode, source) {
+    const fromEntries = Object.entries(fromProps).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
+    const toEntries = Object.entries(toProps).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
+    const easeEntry = animation.ease ? `, easeEach: ${JSON.stringify(animation.ease)}` : "";
+    const kfCode = `{ "0%": { ${fromEntries.join(", ")} }, "100%": { ${toEntries.join(", ")} }${easeEntry} }`;
+    // Preserve every non-editable key (duration/delay/callbacks/stagger/yoyo/…)
+    // verbatim from source — rebuilding from the animation object alone dropped
+    // `delay` (not a GsapAnimation field), shifting the tween's start time.
+    const parts = [`keyframes: ${kfCode}`, ...preservedVarsEntries(varsNode, source)];
+    if (animation.ease)
+        parts.push(`ease: "none"`);
+    return `{ ${parts.join(", ")} }`;
+}
+/**
+ * Convert a flat tween (to/from/fromTo) to percentage-keyframes format.
+ * `resolvedFromValues` supplies the current DOM state: overrides the 0% endpoint
+ * for `to()`, the 100% endpoint for `from()`, or merges into toProps for `fromTo()`.
+ */
+export function convertToKeyframesFromScript(script, animationId, resolvedFromValues) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const { animation, call } = target;
+    if (animation.keyframes || call.method === "set")
+        return script;
+    const { fromProps, toProps } = resolveConversionProps(animation, resolvedFromValues);
+    const ms = new MagicString(script);
+    if (call.method === "from" || call.method === "fromTo") {
+        ms.overwrite(call.node.callee.property.start, call.node.callee.property.end, "to");
+    }
+    if (call.method === "fromTo" && call.fromArg) {
+        ms.remove(call.fromArg.start, call.varsArg.start);
+    }
+    overwriteVarsArg(ms, call, buildKeyframesVarsCode(animation, fromProps, toProps, call.varsArg, script));
+    return ms.toString();
+}
+// ── Keyframe-object code builder ─────────────────────────────────────────────
+/** Build a percentage-keyframes object literal: `{ "0%": { x: 0 }, "100%": { x: 100 } }`. */
+function buildKeyframeObjectCode(keyframes, easeEach) {
+    const entries = keyframes.map((kf) => {
+        const props = Object.entries(kf.properties).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
+        if (kf.ease)
+            props.push(`ease: ${JSON.stringify(kf.ease)}`);
+        return `${JSON.stringify(`${kf.percentage}%`)}: { ${props.join(", ")} }`;
+    });
+    if (easeEach)
+        entries.push(`easeEach: ${JSON.stringify(easeEach)}`);
+    return `{ ${entries.join(", ")} }`;
+}
+// ── Materialize keyframes ────────────────────────────────────────────────────
+/**
+ * Replace a dynamic or static keyframes expression with a fully-resolved
+ * percentage-keyframes object. Called when a user first edits a dynamically-
+ * generated keyframe in the studio so it becomes statically editable.
+ */
+export function materializeKeyframesFromScript(script, animationId, keyframes, easeEach, resolvedSelector) {
+    // An empty keyframe list has no materialized form — rebuilding vars with an
+    // empty keyframes object would empty the animation. No-op instead.
+    if (keyframes.length === 0)
+        return script;
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const { call } = target;
+    const sorted = [...keyframes].sort((a, b) => a.percentage - b.percentage);
+    const kfObjCode = buildKeyframeObjectCode(sorted, easeEach);
+    const ms = new MagicString(script);
+    if (resolvedSelector) {
+        const selectorArg = call.node.arguments[0];
+        if (selectorArg)
+            ms.overwrite(selectorArg.start, selectorArg.end, JSON.stringify(resolvedSelector));
+    }
+    const kfProp = findPropertyNode(call.varsArg, "keyframes");
+    if (kfProp) {
+        ms.overwrite(kfProp.value.start, kfProp.value.end, kfObjCode);
+    }
+    else if (call.varsArg?.type === "ObjectExpression") {
+        const vars = call.varsArg;
+        if (vars.properties.length > 0) {
+            ms.prependLeft(vars.properties[0].start, `keyframes: ${kfObjCode}, `);
+        }
+        else {
+            ms.appendLeft(vars.end - 1, `keyframes: ${kfObjCode}`);
+        }
+    }
+    const eachProp = findPropertyNode(call.varsArg, "easeEach");
+    if (eachProp) {
+        const allProps = (call.varsArg.properties ?? []).filter((p) => isObjectProperty(p));
+        removeProp(ms, eachProp, allProps);
+    }
+    return ms.toString();
+}
+// ── Add animation with keyframes ──────────────────────────────────────────────
+/** Insert a new keyframed `to()` call and return the new animation ID. */
+export function addAnimationWithKeyframesToScript(script, targetSelector, position, duration, keyframes, ease) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return { script, id: "" };
+    const insertionPoint = findInsertionPoint(parsed);
+    if (insertionPoint === null)
+        return { script, id: "" };
+    const sorted = [...keyframes].sort((a, b) => a.percentage - b.percentage);
+    const kfObjCode = buildKeyframeObjectCode(sorted);
+    const varParts = [`keyframes: ${kfObjCode}`, `duration: ${valueToCode(duration)}`];
+    if (ease)
+        varParts.push(`ease: ${JSON.stringify(ease)}`);
+    const stmtCode = `${parsed.timelineVar}.to(${JSON.stringify(targetSelector)}, { ${varParts.join(", ")} }, ${valueToCode(position)});`;
+    const ms = new MagicString(script);
+    ms.appendLeft(insertionPoint, "\n" + stmtCode);
+    const result = ms.toString();
+    const reParsed = parseGsapScriptAcornForWrite(result);
+    const newId = reParsed?.located[reParsed.located.length - 1]?.id ?? "";
+    return { script: result, id: newId };
+}
+// ── Split into property groups ────────────────────────────────────────────────
+function collectPropertyKeys(anim) {
+    const keys = new Set();
+    if (anim.keyframes) {
+        for (const kf of anim.keyframes.keyframes) {
+            for (const k of Object.keys(kf.properties))
+                keys.add(k);
+        }
+    }
+    else {
+        for (const k of Object.keys(anim.properties))
+            keys.add(k);
+    }
+    return keys;
+}
+function partitionPropertyGroups(keys) {
+    const groups = new Map();
+    for (const key of keys) {
+        if (key === "transformOrigin")
+            continue;
+        const group = classifyPropertyGroup(key);
+        let arr = groups.get(group);
+        if (!arr) {
+            arr = [];
+            groups.set(group, arr);
+        }
+        arr.push(key);
+    }
+    return groups;
+}
+function assignTransformOrigin(groupProps) {
+    let largestGroup;
+    let largestCount = 0;
+    for (const [group, props] of groupProps) {
+        if (props.length > largestCount) {
+            largestCount = props.length;
+            largestGroup = group;
+        }
+    }
+    const largest = largestGroup ? groupProps.get(largestGroup) : undefined;
+    if (largest)
+        largest.push("transformOrigin");
+}
+function filterGroupKeyframes(kfs, propSet) {
+    const result = [];
+    for (const kf of kfs) {
+        const filtered = {};
+        for (const [k, v] of Object.entries(kf.properties)) {
+            if (propSet.has(k))
+                filtered[k] = v;
+        }
+        if (Object.keys(filtered).length > 0) {
+            result.push({
+                percentage: kf.percentage,
+                properties: filtered,
+                ...(kf.ease ? { ease: kf.ease } : {}),
+            });
+        }
+    }
+    return result;
+}
+function filterGroupProperties(properties, propSet) {
+    const result = {};
+    for (const [k, v] of Object.entries(properties)) {
+        if (propSet.has(k))
+            result[k] = v;
+    }
+    return result;
+}
+function addGroupAnimToScript(script, anim, propSet) {
+    if (anim.keyframes) {
+        const groupKeyframes = filterGroupKeyframes(anim.keyframes.keyframes, propSet);
+        if (groupKeyframes.length === 0)
+            return { script, id: "" };
+        const pos = typeof anim.position === "number" ? anim.position : 0;
+        return addAnimationWithKeyframesToScript(script, anim.targetSelector, pos, anim.duration ?? 0.5, groupKeyframes, anim.keyframes.easeEach ?? anim.ease);
+    }
+    const groupProperties = filterGroupProperties(anim.properties, propSet);
+    if (Object.keys(groupProperties).length === 0)
+        return { script, id: "" };
+    const fromProperties = anim.method === "fromTo" && anim.fromProperties
+        ? filterGroupProperties(anim.fromProperties, propSet)
+        : undefined;
+    return addAnimationToScript(script, {
+        targetSelector: anim.targetSelector,
+        method: anim.method,
+        position: anim.position,
+        duration: anim.duration,
+        ease: anim.ease,
+        properties: groupProperties,
+        fromProperties,
+        extras: anim.extras,
+    });
+}
+/**
+ * Split a mixed-property tween into one tween per property group (position,
+ * scale, visual, etc.) so each group can be edited independently.
+ * Returns the updated script and the IDs of the newly-created tweens.
+ */
+export function splitIntoPropertyGroupsFromScript(script, animationId) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return { script, ids: [animationId] };
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return { script, ids: [animationId] };
+    const { animation } = target;
+    const allPropKeys = collectPropertyKeys(animation);
+    const groupProps = partitionPropertyGroups(allPropKeys);
+    if (groupProps.size <= 1)
+        return { script, ids: [animationId] };
+    if (allPropKeys.has("transformOrigin"))
+        assignTransformOrigin(groupProps);
+    let result = removeAnimationFromScript(script, animationId);
+    for (const [, props] of groupProps) {
+        const { script: next, id } = addGroupAnimToScript(result, animation, new Set(props));
+        if (id)
+            result = next;
+    }
+    const reParsed = parseGsapScriptAcornForWrite(result);
+    const newIds = (reParsed?.located ?? [])
+        .filter((l) => l.animation.targetSelector === animation.targetSelector)
+        .map((l) => l.id);
+    return { script: result, ids: newIds };
+}
 // ── Label write ops ───────────────────────────────────────────────────────────
+/** True when `expr` is `tl.<method>(…)` rooted at the timeline var. */
+function isTimelineMethodCall(expr, timelineVar, method) {
+    return (expr?.type === "CallExpression" &&
+        expr.callee?.type === "MemberExpression" &&
+        isTimelineRooted(expr.callee.object, timelineVar) &&
+        expr.callee.property?.name === method);
+}
+/** True when `expr` is `tl.addLabel("<name>", …)` rooted at the timeline var. */
+function isAddLabelCall(expr, timelineVar, name) {
+    const firstArg = expr?.arguments?.[0];
+    return (isTimelineMethodCall(expr, timelineVar, "addLabel") &&
+        firstArg?.type === "Literal" &&
+        firstArg.value === name);
+}
+/** Every `tl.addLabel("<name>", …)` ExpressionStatement in the script. */
+function findLabelStatements(parsed, name) {
+    const targets = [];
+    acornWalk.simple(parsed.ast, {
+        ExpressionStatement(node) {
+            if (isAddLabelCall(node.expression, parsed.timelineVar, name))
+                targets.push(node);
+        },
+    });
+    return targets;
+}
 export function addLabelToScript(script, name, position) {
     const parsed = parseGsapScriptAcornForWrite(script);
     if (!parsed)
         return script;
+    // If the label already exists, MOVE it (overwrite its position) rather than
+    // appending a duplicate. Two same-named addLabel statements make removeLabel
+    // over-remove — it deletes every match, including a pre-existing label the
+    // user never touched.
+    const existing = findLabelStatements(parsed, name)[0];
+    if (existing) {
+        const ms = new MagicString(script);
+        const posArg = existing.expression.arguments?.[1];
+        if (posArg)
+            ms.overwrite(posArg.start, posArg.end, valueToCode(position));
+        else
+            ms.appendLeft(existing.expression.end - 1, `, ${valueToCode(position)}`);
+        return ms.toString();
+    }
     const insertionPoint = findInsertionPoint(parsed);
     if (insertionPoint === null)
         return script;
@@ -668,21 +1241,7 @@ export function removeLabelFromScript(script, name) {
     const parsed = parseGsapScriptAcornForWrite(script);
     if (!parsed)
         return script;
-    const targets = [];
-    acornWalk.simple(parsed.ast, {
-        // fallow-ignore-next-line complexity
-        ExpressionStatement(node) {
-            const expr = node.expression;
-            if (expr?.type === "CallExpression" &&
-                expr.callee?.type === "MemberExpression" &&
-                isTimelineRooted(expr.callee.object, parsed.timelineVar) &&
-                expr.callee.property?.name === "addLabel" &&
-                expr.arguments?.[0]?.type === "Literal" &&
-                expr.arguments[0].value === name) {
-                targets.push(node);
-            }
-        },
-    });
+    const targets = findLabelStatements(parsed, name);
     if (!targets.length)
         return script;
     const ms = new MagicString(script);
@@ -692,4 +1251,619 @@ export function removeLabelFromScript(script, name) {
     }
     return ms.toString();
 }
+// ── Arc path helpers ─────────────────────────────────────────────────────────
+/**
+ * Remove a set of properties from an ObjectExpression in a single pass.
+ * Groups consecutive marked props into blocks to avoid overlapping remove ranges.
+ */
+function removePropsByKey(ms, objNode, keys) {
+    if (objNode?.type !== "ObjectExpression")
+        return;
+    const allProps = (objNode.properties ?? []).filter(isObjectProperty);
+    const marked = allProps.map((p) => keys.has(propKeyName(p) ?? ""));
+    let i = 0;
+    while (i < allProps.length) {
+        if (!marked[i]) {
+            i++;
+            continue;
+        }
+        const blockStart = i;
+        while (i < allProps.length && marked[i])
+            i++;
+        ms.remove(...blockRemoveRange(allProps, blockStart, i));
+    }
+}
+function blockRemoveRange(allProps, blockStart, blockEnd) {
+    if (blockStart === 0 && blockEnd === allProps.length)
+        return [allProps[0].start, allProps[allProps.length - 1].end];
+    if (blockStart === 0)
+        return [allProps[0].start, allProps[blockEnd].start];
+    return [allProps[blockStart - 1].end, allProps[blockEnd - 1].end];
+}
+// fallow-ignore-next-line complexity
+function readLastWaypointXY(mpVal) {
+    if (mpVal?.type !== "ObjectExpression")
+        return { x: null, y: null };
+    const pathProp = findPropertyNode(mpVal, "path");
+    if (pathProp?.value?.type !== "ArrayExpression")
+        return { x: null, y: null };
+    const elems = pathProp.value.elements ?? [];
+    const last = elems[elems.length - 1];
+    if (last?.type !== "ObjectExpression")
+        return { x: null, y: null };
+    return {
+        x: readNumericLiteralNode(findPropertyNode(last, "x")?.value),
+        y: readNumericLiteralNode(findPropertyNode(last, "y")?.value),
+    };
+}
+/**
+ * Read a numeric value node — a plain numeric literal or a unary-minus negative
+ * literal (e.g. `-120`). Returns null for anything non-numeric. Without the
+ * UnaryExpression branch, negative waypoint coords (parsed as a UnaryExpression
+ * with no `.value`) would be lost when disabling an arc path.
+ */
+function readNumericLiteralNode(v) {
+    if (LITERAL_NODE_TYPES.has(v?.type) && typeof v.value === "number")
+        return v.value;
+    if (v?.type === "UnaryExpression" &&
+        v.operator === "-" &&
+        typeof v.argument?.value === "number") {
+        return -v.argument.value;
+    }
+    return null;
+}
+function disableArcPath(ms, call) {
+    const mpProp = findPropertyNode(call.varsArg, "motionPath");
+    if (!mpProp)
+        return false;
+    const { x, y } = readLastWaypointXY(mpProp.value);
+    if (x === null && y === null) {
+        const allProps = (call.varsArg.properties ?? []).filter(isObjectProperty);
+        removeProp(ms, mpProp, allProps);
+        return true;
+    }
+    // Overwrite the entire motionPath property with the recovered x/y pair — avoids
+    // the appendLeft+remove range-boundary issue in MagicString.
+    const parts = [];
+    if (x !== null)
+        parts.push(`x: ${x}`);
+    if (y !== null)
+        parts.push(`y: ${y}`);
+    ms.overwrite(mpProp.start, mpProp.end, parts.join(", "));
+    return true;
+}
+function stripXYFromKeyframes(ms, kfPropNode) {
+    if (kfPropNode?.value?.type !== "ObjectExpression")
+        return;
+    const xyKeys = new Set(["x", "y"]);
+    for (const pctProp of (kfPropNode.value.properties ?? []).filter(isObjectProperty)) {
+        const k = propKeyName(pctProp);
+        if (typeof k === "string" && k.endsWith("%") && pctProp.value?.type === "ObjectExpression") {
+            removePropsByKey(ms, pctProp.value, xyKeys);
+        }
+    }
+}
+function enableArcPath(ms, call, animation, config) {
+    const waypoints = extractArcWaypoints(animation);
+    if (waypoints.length < 2)
+        return false;
+    const segments = config.segments.length === waypoints.length - 1
+        ? config.segments
+        : Array.from({ length: waypoints.length - 1 }, () => ({ curviness: 1 }));
+    const motionPathCode = buildMotionPathObjectCode({
+        waypoints,
+        segments,
+        autoRotate: config.autoRotate,
+    });
+    const vars = call.varsArg;
+    if (vars?.type !== "ObjectExpression")
+        return false;
+    // Insert motionPath right after the opening `{` (appendRight at start+1) so the
+    // insertion point can never coincide with the end boundary of the x/y removal
+    // range. upsertProp would appendLeft at `end - 1`, which collides with a
+    // remove-range that ends at the same offset when x/y are the only props —
+    // MagicString then discards the append and the output loses everything.
+    const editable = (vars.properties ?? []).filter(isObjectProperty);
+    const survivesRemoval = editable.some((p) => {
+        const k = propKeyName(p);
+        return k !== "x" && k !== "y";
+    });
+    const sep = survivesRemoval ? ", " : "";
+    ms.appendRight(vars.start + 1, ` motionPath: ${motionPathCode}${sep}`);
+    stripXYFromKeyframes(ms, findPropertyNode(call.varsArg, "keyframes"));
+    removePropsByKey(ms, call.varsArg, new Set(["x", "y"]));
+    return true;
+}
+export function setArcPathInScript(script, animationId, config) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const ms = new MagicString(script);
+    const handled = config.enabled
+        ? enableArcPath(ms, target.call, target.animation, config)
+        : disableArcPath(ms, target.call);
+    return handled ? ms.toString() : script;
+}
+export function updateArcSegmentInScript(script, animationId, segmentIndex, update) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const { call, animation } = target;
+    if (!animation.arcPath?.enabled)
+        return script;
+    const segments = [...animation.arcPath.segments];
+    const existingSeg = segments[segmentIndex];
+    if (segmentIndex < 0 || segmentIndex >= segments.length || !existingSeg)
+        return script;
+    segments[segmentIndex] = { ...existingSeg, ...update };
+    const waypoints = extractArcWaypoints(animation);
+    if (waypoints.length < 2)
+        return script;
+    const motionPathCode = buildMotionPathObjectCode({
+        waypoints,
+        segments,
+        autoRotate: animation.arcPath.autoRotate,
+    });
+    const mpProp = findPropertyNode(call.varsArg, "motionPath");
+    if (!mpProp)
+        return script;
+    const ms = new MagicString(script);
+    ms.overwrite(mpProp.value.start, mpProp.value.end, motionPathCode);
+    return ms.toString();
+}
+export function removeArcPathFromScript(script, animationId) {
+    return setArcPathInScript(script, animationId, {
+        enabled: false,
+        autoRotate: false,
+        segments: [],
+    });
+}
+// ── splitAnimationsInScript helpers ──────────────────────────────────────────
+/** Overwrite the selector (first arg) of a tween call. */
+function updateAnimationSelectorInScript(script, animationId, newSelector) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const selectorArg = target.call.node.arguments?.[0];
+    if (!selectorArg)
+        return script;
+    const ms = new MagicString(script);
+    ms.overwrite(selectorArg.start, selectorArg.end, JSON.stringify(newSelector));
+    return ms.toString();
+}
+/**
+ * Insert a `tl.set()` call immediately after the timeline declaration
+ * (before existing tweens) to establish inherited state on a new element.
+ */
+function insertInheritedStateSetInScript(script, selector, position, properties) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const props = Object.entries(properties)
+        .map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`)
+        .join(", ");
+    const code = `${parsed.timelineVar}.set(${JSON.stringify(selector)}, { ${props} }, ${position});`;
+    const ms = new MagicString(script);
+    const tlDecl = findTimelineDeclarationStatement(parsed.ast, parsed.timelineVar);
+    const firstLocated = parsed.located[0];
+    if (tlDecl) {
+        ms.appendLeft(tlDecl.end, "\n" + code);
+    }
+    else if (firstLocated) {
+        const firstCall = firstLocated.call;
+        const exprStmt = findEnclosingExpressionStatement(firstCall.ancestors);
+        const insertAt = exprStmt?.start ?? firstCall.node.start;
+        ms.prependLeft(insertAt, code + "\n");
+    }
+    else {
+        ms.append("\n" + code);
+    }
+    return ms.toString();
+}
+/**
+ * Compute, in forward (timeline) order, the inherited-props baseline available
+ * BEFORE each matching tween, plus the final cumulative state at the split point.
+ * A tween contributes to later baselines when it ends at/before the split (full
+ * props or last keyframe), spans the split via keyframes (kfs at/before split),
+ * or spans the split as a flat tween (its interpolated midpoint). Decoupled from
+ * the reverse write loop so the spanning-tween midpoint reads earlier tweens.
+ */
+// fallow-ignore-next-line complexity
+function computeForwardBaselines(matching, splitTime) {
+    const before = [];
+    const acc = {};
+    for (const anim of matching) {
+        before.push({ ...acc });
+        const pos = typeof anim.position === "number" ? anim.position : 0;
+        const dur = anim.duration ?? 0;
+        const animEnd = pos + dur;
+        if (anim.keyframes) {
+            const kfs = anim.keyframes.keyframes;
+            if (pos >= splitTime) {
+                // Moves wholly to the new element — contributes nothing to the baseline.
+            }
+            else if (animEnd > splitTime) {
+                for (const kf of kfs) {
+                    const kfTime = pos + (kf.percentage / 100) * dur;
+                    if (kfTime <= splitTime) {
+                        for (const [k, v] of Object.entries(kf.properties))
+                            acc[k] = v;
+                    }
+                }
+            }
+            else {
+                const lastKf = kfs[kfs.length - 1];
+                if (lastKf) {
+                    for (const [k, v] of Object.entries(lastKf.properties))
+                        acc[k] = v;
+                }
+            }
+            continue;
+        }
+        if (animEnd <= splitTime) {
+            for (const [k, v] of Object.entries(anim.properties))
+                acc[k] = v;
+            continue;
+        }
+        if (pos >= splitTime)
+            continue;
+        // Flat tween spanning the split — its midpoint becomes the inherited value.
+        const progress = dur > 0 ? (splitTime - pos) / dur : 0;
+        const fromSource = anim.fromProperties ?? acc;
+        for (const [k, v] of Object.entries(anim.properties)) {
+            if (typeof v !== "number") {
+                acc[k] = v;
+                continue;
+            }
+            const fromVal = typeof fromSource[k] === "number" ? fromSource[k] : 0;
+            acc[k] = fromVal + (v - fromVal) * progress;
+        }
+    }
+    return { before, final: { ...acc } };
+}
+// Split one tween that straddles the split point: trim the original to the
+// first half (interpolated midpoint as its new end) and add a fromTo for the
+// second half on the new element. `fromSource` is the forward baseline.
+function buildSpanningSplit(result, anim, pos, dur, fromSource, ctx) {
+    const progress = dur > 0 ? (ctx.splitTime - pos) / dur : 0;
+    const midProps = {};
+    for (const [k, v] of Object.entries(anim.properties)) {
+        if (typeof v !== "number") {
+            midProps[k] = v;
+            continue;
+        }
+        const fromVal = typeof fromSource[k] === "number" ? fromSource[k] : 0;
+        midProps[k] = fromVal + (v - fromVal) * progress;
+    }
+    const trimmed = updateAnimationInScript(result, anim.id, {
+        duration: ctx.splitTime - pos,
+        properties: midProps,
+    });
+    return addAnimationToScript(trimmed, {
+        targetSelector: ctx.newSelector,
+        method: "fromTo",
+        position: ctx.newElementStart,
+        duration: pos + dur - ctx.splitTime,
+        properties: { ...anim.properties },
+        fromProperties: { ...midProps },
+        ease: anim.ease,
+        extras: anim.extras,
+    }).script;
+}
+// Decide what one matching tween does at the split point: move to the new
+// element (wholly after), stay (wholly before / keyframes before), get skipped
+// (keyframes spanning), or get interpolated in half (spanning). Returns the
+// updated script; pushes any skip reason into `skippedSelectors`.
+function applyTweenSplit(result, anim, baselineBefore, ctx, skippedSelectors) {
+    const pos = typeof anim.position === "number" ? anim.position : 0;
+    const dur = anim.duration ?? 0;
+    const animEnd = pos + dur;
+    if (anim.keyframes) {
+        if (pos >= ctx.splitTime)
+            return updateAnimationSelectorInScript(result, anim.id, ctx.newSelector);
+        if (animEnd > ctx.splitTime) {
+            skippedSelectors.push(`${ctx.originalSelector} (keyframes spanning split)`);
+        }
+        // Inherited-state for kf tweens is handled by computeForwardBaselines.
+        return result;
+    }
+    // Wholly before the split — kept on the original element.
+    if (animEnd <= ctx.splitTime)
+        return result;
+    // Wholly after — move to the new element.
+    if (pos >= ctx.splitTime)
+        return updateAnimationSelectorInScript(result, anim.id, ctx.newSelector);
+    // Spans the split — interpolate the midpoint from the FORWARD baseline.
+    const fromSource = anim.fromProperties ?? baselineBefore;
+    return buildSpanningSplit(result, anim, pos, dur, fromSource, ctx);
+}
+export function splitAnimationsInScript(script, opts) {
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return { script, skippedSelectors: [] };
+    const originalSelector = `#${opts.originalId}`;
+    const newSelector = `#${opts.newId}`;
+    const animations = parsed.located.map((l) => l.animation);
+    const skippedSelectors = [];
+    for (const a of animations) {
+        if (a.targetSelector !== originalSelector && a.targetSelector.includes(opts.originalId)) {
+            skippedSelectors.push(a.targetSelector);
+        }
+    }
+    const matching = animations.filter((a) => a.targetSelector === originalSelector);
+    if (matching.length === 0)
+        return { script, skippedSelectors };
+    let result = script;
+    const newElementStart = opts.splitTime;
+    // Forward pre-pass: compute the inherited-props baseline available BEFORE each
+    // matching tween, in source/timeline order. The write loop below runs in
+    // REVERSE (so updateAnimationSelectorInScript's selector edits can't shift the
+    // count-based IDs of not-yet-processed tweens), but the spanning-tween midpoint
+    // interpolation needs the baseline from EARLIER tweens — which a reverse
+    // accumulator hasn't seen yet. Decoupling the two fixes the wrong midpoint.
+    const { before: baselineBefore, final: finalInheritedProps } = computeForwardBaselines(matching, opts.splitTime);
+    // Reverse iteration: updateAnimationSelectorInScript mutates selectors which
+    // can shift count-based ID suffixes for later animations.
+    const ctx = { splitTime: opts.splitTime, originalSelector, newSelector, newElementStart };
+    for (let i = matching.length - 1; i >= 0; i--) {
+        const anim = matching[i];
+        if (!anim)
+            continue;
+        result = applyTweenSplit(result, anim, baselineBefore[i] ?? {}, ctx, skippedSelectors);
+    }
+    if (Object.keys(finalInheritedProps).length > 0) {
+        result = insertInheritedStateSetInScript(result, newSelector, newElementStart, finalInheritedProps);
+    }
+    return { script: result, skippedSelectors };
+}
+// ── Unroll dynamic animations ────────────────────────────────────────────────
+function isLoopNode(node) {
+    const t = node?.type;
+    return (t === "ForStatement" ||
+        t === "ForInStatement" ||
+        t === "ForOfStatement" ||
+        t === "WhileStatement");
+}
+function isForEachStatement(node) {
+    return (node?.type === "ExpressionStatement" &&
+        node.expression?.type === "CallExpression" &&
+        node.expression.callee?.property?.name === "forEach");
+}
+/** The nearest enclosing loop / forEach AST node (not just its byte range). */
+function findEnclosingLoopNode(ancestors) {
+    for (let i = ancestors.length - 2; i >= 0; i--) {
+        const node = ancestors[i];
+        if (isLoopNode(node) || isForEachStatement(node))
+            return node;
+    }
+    return null;
+}
+/** Statements making up a loop's body block, or null when not a simple block. */
+function loopBodyStatements(loopNode) {
+    let body;
+    if (loopNode?.type === "ExpressionStatement") {
+        // forEach(cb): body is the callback's block.
+        const cb = loopNode.expression?.arguments?.[0];
+        body = cb?.body;
+    }
+    else {
+        body = loopNode?.body;
+    }
+    if (body?.type !== "BlockStatement")
+        return null;
+    return (body.body ?? []).filter((s) => s?.type === "ExpressionStatement");
+}
+/** The loop's index identifier name (`for (let i …)`), used for per-iteration substitution. */
+function loopIndexVarName(loopNode) {
+    if (loopNode?.type === "ForStatement") {
+        const decl = loopNode.init?.declarations?.[0];
+        return typeof decl?.id?.name === "string" ? decl.id.name : null;
+    }
+    return null;
+}
+/**
+ * Rewrite one body statement's source for iteration `idx`: replace USES of the
+ * loop index variable (AST Identifier nodes) with the literal index. AST-based,
+ * not a text regex, so the index name appearing inside a string literal (e.g. a
+ * selector ".row-i") or as a non-computed member/key (`obj.i`, `{ i: … }`) is
+ * left untouched — only real references to the variable are substituted.
+ */
+// An identifier in "binding position" is a name, not a value reference: a
+// non-computed member property (`obj.i`) or object-literal key (`{ i: … }`).
+// Those must NOT be substituted with the iteration index.
+function isIndexBindingPosition(node, parent) {
+    if (parent?.type === "MemberExpression")
+        return parent.property === node && !parent.computed;
+    if (parent?.type === "Property" || parent?.type === "ObjectProperty") {
+        return parent.key === node && !parent.computed;
+    }
+    return false;
+}
+function substituteLoopIndex(stmt, indexVar, idx, script) {
+    const base = stmt.start;
+    const src = script.slice(base, stmt.end);
+    const ranges = [];
+    acornWalk.ancestor(stmt, {
+        Identifier(node, _state, ancestors) {
+            if (node.name !== indexVar)
+                return;
+            if (isIndexBindingPosition(node, ancestors[ancestors.length - 2]))
+                return;
+            ranges.push([node.start - base, node.end - base]);
+        },
+    });
+    if (ranges.length === 0)
+        return src;
+    ranges.sort((a, b) => b[0] - a[0]);
+    let out = src;
+    for (const [s, e] of ranges)
+        out = out.slice(0, s) + String(idx) + out.slice(e);
+    return out;
+}
+function buildUnrollReplacement(timelineVar, animation, elements) {
+    const duration = typeof animation.duration === "number" ? animation.duration : 8;
+    const ease = typeof animation.ease === "string" ? animation.ease : "none";
+    const pos = animation.position ?? 0;
+    const posCode = typeof pos === "number" ? String(pos) : JSON.stringify(pos);
+    const calls = elements.map((el) => {
+        const sorted = [...el.keyframes].sort((a, b) => a.percentage - b.percentage);
+        const kfCode = buildKeyframeObjectCode(sorted, el.easeEach);
+        return `${timelineVar}.to(${JSON.stringify(el.selector)}, { keyframes: ${kfCode}, duration: ${duration}, ease: ${JSON.stringify(ease)} }, ${posCode});`;
+    });
+    return calls.join("\n  ");
+}
+/** Build one element's unrolled `tl.to(...)` call from the target animation. */
+function buildUnrollCallForElement(timelineVar, animation, el) {
+    const duration = typeof animation.duration === "number" ? animation.duration : 8;
+    const ease = typeof animation.ease === "string" ? animation.ease : "none";
+    const pos = animation.position ?? 0;
+    const posCode = typeof pos === "number" ? String(pos) : JSON.stringify(pos);
+    const sorted = [...el.keyframes].sort((a, b) => a.percentage - b.percentage);
+    const kfCode = buildKeyframeObjectCode(sorted, el.easeEach);
+    return `${timelineVar}.to(${JSON.stringify(el.selector)}, { keyframes: ${kfCode}, duration: ${duration}, ease: ${JSON.stringify(ease)} }, ${posCode});`;
+}
+/** Sentinel: the unroll cannot safely reproduce the loop body — caller no-ops. */
+const REFUSE_UNROLL = Symbol("refuse-unroll");
+/** Every statement in a loop's body block (unfiltered), or [] when not a block. */
+function loopBodyRawStatements(loopNode) {
+    const body = loopNode?.type === "ExpressionStatement"
+        ? loopNode.expression?.arguments?.[0]?.body
+        : loopNode?.body;
+    return body?.type === "BlockStatement" ? (body.body ?? []) : [];
+}
+/** A node that re-binds `indexVar`: a re-declaration or a function param. */
+function rebindsIndex(node, indexVar) {
+    if (node.type === "VariableDeclarator")
+        return node.id?.name === indexVar;
+    if (node.type === "FunctionExpression" ||
+        node.type === "FunctionDeclaration" ||
+        node.type === "ArrowFunctionExpression") {
+        return (node.params ?? []).some((p) => p?.name === indexVar);
+    }
+    return false;
+}
+/** Object shorthand `{ i }` — substituting the value would yield invalid `{ 0 }`. */
+function isShorthandIndexUse(node, indexVar) {
+    return ((node.type === "Property" || node.type === "ObjectProperty") &&
+        node.shorthand === true &&
+        propKeyName(node) === indexVar);
+}
+/**
+ * A sibling statement can't be safely index-substituted when it re-binds the
+ * loop index (shadowing — a nested `for (let i …)`, a callback param `i`) or
+ * uses it in object shorthand (`{ i }`, which would splice to the invalid
+ * `{ 0 }`). substituteLoopIndex has no scope analysis, so in these cases it
+ * would emit broken or wrong code — the unroll must refuse instead.
+ */
+function hasUnsafeLoopIndexUse(stmt, indexVar) {
+    let unsafe = false;
+    acornWalk.full(stmt, (node) => {
+        if (!unsafe && (isShorthandIndexUse(node, indexVar) || rebindsIndex(node, indexVar))) {
+            unsafe = true;
+        }
+    });
+    return unsafe;
+}
+/** How to handle the loop body's non-target siblings when unrolling. */
+function unrollSiblingStrategy(loopNode, targetStmt, stmts, indexVar) {
+    const siblings = stmts.filter((s) => s !== targetStmt);
+    // A sibling the filtered statement list doesn't model (non-ExpressionStatement)
+    // would be silently lost by either path — refuse if any exists.
+    const hasUnmodeledSibling = loopBodyRawStatements(loopNode).some((s) => s !== targetStmt && !stmts.includes(s));
+    if (siblings.length === 0 && !hasUnmodeledSibling)
+        return "blanket";
+    if (hasUnmodeledSibling || !indexVar)
+        return "refuse";
+    return siblings.some((s) => hasUnsafeLoopIndexUse(s, indexVar)) ? "refuse" : "preserve";
+}
+/** Emit the per-iteration unrolled lines (target → static tl.to, siblings → index-substituted). */
+function emitUnrolledLines(stmts, targetStmt, elements, timelineVar, animation, indexVar, script) {
+    const lines = [];
+    for (let idx = 0; idx < elements.length; idx++) {
+        const el = elements[idx];
+        if (!el)
+            continue;
+        for (const stmt of stmts) {
+            lines.push(stmt === targetStmt
+                ? buildUnrollCallForElement(timelineVar, animation, el)
+                : substituteLoopIndex(stmt, indexVar, idx, script));
+        }
+    }
+    return lines.join("\n  ");
+}
+/**
+ * Unroll the loop body, preserving every statement that is NOT the target tween.
+ * For each iteration, emit each non-target statement with the loop index
+ * substituted (e.g. `tl.set(items[i], …)` → `tl.set(items[0], …)`), and replace
+ * the target tween statement with that element's static `tl.to()` call.
+ *
+ * Returns null when a blanket overwrite is lossless (no sibling statements), and
+ * REFUSE_UNROLL when siblings exist but can't be safely reproduced — a non-`for`
+ * loop (no numeric index to splice), a statement we don't model, or an unsafe
+ * index use (shadowing / shorthand). Refusing no-ops the unroll, which is safe:
+ * the dynamic loop keeps rendering correctly, just un-flattened.
+ */
+function buildLoopUnrollPreserving(script, timelineVar, animation, elements, loopNode, targetStmt) {
+    const stmts = loopBodyStatements(loopNode);
+    if (!stmts || !stmts.includes(targetStmt))
+        return null;
+    const indexVar = loopIndexVarName(loopNode);
+    const strategy = unrollSiblingStrategy(loopNode, targetStmt, stmts, indexVar);
+    if (strategy === "blanket")
+        return null;
+    if (strategy === "refuse" || !indexVar)
+        return REFUSE_UNROLL;
+    return emitUnrolledLines(stmts, targetStmt, elements, timelineVar, animation, indexVar, script);
+}
+/**
+ * Replace a dynamic loop that generates multiple tween calls with individual
+ * static `tl.to()` calls — one per element. Finds the loop containing the
+ * animation and replaces the loop with unrolled static calls, preserving every
+ * non-target statement in the loop body per iteration.
+ */
+export function unrollDynamicAnimations(script, animationId, elements) {
+    // An empty element list has no unrolled form — replacing the loop/statement
+    // with zero calls would silently delete the animation. No-op instead.
+    if (elements.length === 0)
+        return script;
+    const parsed = parseGsapScriptAcornForWrite(script);
+    if (!parsed)
+        return script;
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const ms = new MagicString(script);
+    const loopNode = findEnclosingLoopNode(target.call.ancestors);
+    if (loopNode) {
+        const targetStmt = findEnclosingExpressionStatement(target.call.ancestors);
+        const preserving = targetStmt
+            ? buildLoopUnrollPreserving(script, parsed.timelineVar, target.animation, elements, loopNode, targetStmt)
+            : null;
+        // Siblings exist but can't be safely reproduced — leave the loop untouched
+        // rather than drop or corrupt them. The op no-ops (before === after).
+        if (preserving === REFUSE_UNROLL)
+            return script;
+        // Fall back to the simple whole-body replacement when the body isn't a plain
+        // block of statements we can preserve.
+        const replacement = preserving ?? buildUnrollReplacement(parsed.timelineVar, target.animation, elements);
+        ms.overwrite(loopNode.start, loopNode.end, replacement);
+    }
+    else {
+        const stmt = findEnclosingExpressionStatement(target.call.ancestors);
+        if (!stmt)
+            return script;
+        const replacement = buildUnrollReplacement(parsed.timelineVar, target.animation, elements);
+        ms.overwrite(stmt.start, stmt.end, replacement);
+    }
+    return ms.toString();
+}
 //# sourceMappingURL=gsapWriterAcorn.js.map