@hyperframes/core 0.6.53 → 0.6.55

package/dist/parsers/gsapParser.js

@@ -1,415 +1,747 @@
+/**
+ * Node-only GSAP AST parser. Depends on recast / @babel/parser, which compile
+ * to CommonJS that calls `require("fs")` — so this module must never be in the
+ * static import graph of isomorphic/browser code. It is reachable only via the
+ * `@hyperframes/core/gsap-parser` subpath (studio-api mutations + the linter).
+ *
+ * Recast-free helpers (serialization, keyframe conversion, validation, types)
+ * live in `./gsapSerialize` and are re-exported here so this subpath exposes the
+ * full surface for tests and server-side consumers.
+ */
+import * as recast from "recast";
+import { parse as babelParse } from "@babel/parser";
+export { serializeGsapAnimations, getAnimationsForElementId, validateCompositionGsap, keyframesToGsapAnimations, gsapAnimationsToKeyframes, SUPPORTED_PROPS, SUPPORTED_EASES, } from "./gsapSerialize";
 const GSAP_METHODS = new Set(["set", "to", "from", "fromTo"]);
-export const SUPPORTED_PROPS = [
-    "opacity",
-    "visibility",
-    "x",
-    "y",
-    "scale",
-    "scaleX",
-    "scaleY",
-    "rotation",
-    "autoAlpha",
-    "width",
-    "height",
-];
-export const SUPPORTED_EASES = [
-    "none",
-    "power1.in",
-    "power1.out",
-    "power1.inOut",
-    "power2.in",
-    "power2.out",
-    "power2.inOut",
-    "power3.in",
-    "power3.out",
-    "power3.inOut",
-    "power4.in",
-    "power4.out",
-    "power4.inOut",
-    "back.in",
-    "back.out",
-    "back.inOut",
-    "elastic.in",
-    "elastic.out",
-    "elastic.inOut",
-    "bounce.in",
-    "bounce.out",
-    "bounce.inOut",
-    "expo.in",
-    "expo.out",
-    "expo.inOut",
-];
-function parseObjectLiteral(str) {
-    const result = {};
-    const cleaned = str.replace(/^\{|\}$/g, "").trim();
-    if (!cleaned)
-        return result;
-    const propRegex = /(\w+)\s*:\s*("[^"]*"|'[^']*'|[\d.]+|[a-zA-Z_][\w.]*)/g;
-    let match;
-    while ((match = propRegex.exec(cleaned)) !== null) {
-        const key = match[1] ?? "";
-        let value = match[2] ?? "";
-        if (typeof value === "string") {
-            if ((value.startsWith('"') && value.endsWith('"')) ||
-                (value.startsWith("'") && value.endsWith("'"))) {
-                value = value.slice(1, -1);
+function parseScript(script) {
+    return recast.parse(script, {
+        parser: {
+            parse(source) {
+                return babelParse(source, { sourceType: "script", plugins: [], tokens: true });
+            },
+        },
+    });
+}
+function collectScopeBindings(ast) {
+    const bindings = new Map();
+    recast.types.visit(ast, {
+        visitVariableDeclarator(path) {
+            const name = path.node.id?.name;
+            const init = path.node.init;
+            if (name && init) {
+                const val = resolveNode(init, bindings);
+                if (val !== undefined)
+                    bindings.set(name, val);
             }
-            else if (!isNaN(Number(value))) {
-                value = Number(value);
+            this.traverse(path);
+        },
+    });
+    return bindings;
+}
+function resolveNode(node, scope) {
+    if (!node)
+        return undefined;
+    if (node.type === "NumericLiteral" || (node.type === "Literal" && typeof node.value === "number"))
+        return node.value;
+    if (node.type === "StringLiteral" || (node.type === "Literal" && typeof node.value === "string"))
+        return node.value;
+    if (node.type === "BooleanLiteral" ||
+        (node.type === "Literal" && typeof node.value === "boolean"))
+        return node.value;
+    if (node.type === "UnaryExpression" && node.operator === "-" && node.argument) {
+        const val = resolveNode(node.argument, scope);
+        return typeof val === "number" ? -val : undefined;
+    }
+    if (node.type === "BinaryExpression") {
+        const left = resolveNode(node.left, scope);
+        const right = resolveNode(node.right, scope);
+        if (typeof left === "number" && typeof right === "number") {
+            switch (node.operator) {
+                case "+":
+                    return left + right;
+                case "-":
+                    return left - right;
+                case "*":
+                    return left * right;
+                case "/":
+                    return right !== 0 ? left / right : undefined;
             }
         }
-        result[key] = value;
+        if (typeof left === "string" && node.operator === "+")
+            return left + String(right ?? "");
+        if (typeof right === "string" && node.operator === "+")
+            return String(left ?? "") + right;
     }
-    return result;
+    if (node.type === "Identifier" && scope.has(node.name)) {
+        return scope.get(node.name);
+    }
+    if (node.type === "TemplateLiteral" && node.expressions?.length === 0) {
+        return node.quasis?.[0]?.value?.cooked ?? undefined;
+    }
+    return undefined;
 }
-function findMatchingBrace(str, startIndex) {
-    let depth = 0;
-    for (let i = startIndex; i < str.length; i++) {
-        if (str[i] === "{")
-            depth++;
-        else if (str[i] === "}") {
-            depth--;
-            if (depth === 0)
-                return i;
-        }
+function extractLiteralValue(node, scope) {
+    return resolveNode(node, scope);
+}
+// ── Element-target resolution ───────────────────────────────────────────────
+//
+// Real compositions target tweens through element variables resolved from the
+// DOM (`const kicker = root.querySelector(".kicker"); tl.to(kicker, …)`), arrays
+// of them (`tl.to([a, b], …)`), `gsap.utils.toArray(".sel")`, and per-element
+// loop variables (`items.forEach(el => tl.to(el, …))`) — not inline string
+// selectors. To make those tweens editable we resolve each target back to the
+// CSS selector(s) it addresses. Resolution is lexically scoped: the same
+// variable name can mean different elements in different IIFEs.
+const QUERY_METHODS = new Set(["querySelector", "querySelectorAll"]);
+const ITERATION_METHODS = new Set(["forEach", "map"]);
+const SCOPE_NODE_TYPES = new Set([
+    "Program",
+    "FunctionDeclaration",
+    "FunctionExpression",
+    "ArrowFunctionExpression",
+]);
+/**
+ * If `node` is a DOM lookup call — `x.querySelector(".sel")`,
+ * `document.querySelectorAll(".sel")`, `document.getElementById("id")`, or
+ * `gsap.utils.toArray(".sel")` — return the CSS selector it resolves to.
+ * `getElementById("id")` maps to `#id`. Returns null for anything else.
+ */
+function selectorFromQueryCall(node, scope) {
+    if (node?.type !== "CallExpression")
+        return null;
+    const callee = node.callee;
+    if (callee?.type !== "MemberExpression" || callee.property?.type !== "Identifier")
+        return null;
+    const method = callee.property.name;
+    const argValue = resolveNode(node.arguments?.[0], scope);
+    if (typeof argValue !== "string" || argValue.length === 0)
+        return null;
+    if (QUERY_METHODS.has(method) || method === "toArray")
+        return argValue;
+    if (method === "getElementById")
+        return `#${argValue}`;
+    return null;
+}
+/** The nearest enclosing function/program node — the binding scope of `path`. */
+function enclosingScopeNode(path) {
+    let p = path?.parentPath;
+    while (p) {
+        if (SCOPE_NODE_TYPES.has(p.node?.type))
+            return p.node;
+        p = p.parentPath;
     }
-    return -1;
+    return null;
 }
-export function parseGsapScript(script) {
-    const animations = [];
-    let idCounter = 0;
-    const timelineMatch = script.match(/(?:const|let|var)\s+(\w+)\s*=\s*gsap\.timeline/);
-    const timelineVar = timelineMatch ? (timelineMatch[1] ?? "tl") : "tl";
-    const preambleMatch = script.match(new RegExp(`^[\\s\\S]*?(?:const|let|var)\\s+${timelineVar}\\s*=\\s*gsap\\.timeline\\s*\\([^)]*\\)\\s*;?`));
-    const preamble = preambleMatch
-        ? preambleMatch[0]
-        : `const ${timelineVar} = gsap.timeline({ paused: true });`;
-    const methodPattern = new RegExp(`${timelineVar}\\.(set|to|from|fromTo)\\s*\\(([^)]+(?:\\{[^}]*\\}[^)]*)+)\\)`, "g");
-    let match;
-    while ((match = methodPattern.exec(script)) !== null) {
-        const rawMethod = match[1];
-        if (!rawMethod || !GSAP_METHODS.has(rawMethod))
+/** Scope nodes enclosing `path`, innermost first. */
+function scopeChainOf(path) {
+    const chain = [];
+    let p = path;
+    while (p) {
+        if (SCOPE_NODE_TYPES.has(p.node?.type))
+            chain.push(p.node);
+        p = p.parentPath;
+    }
+    return chain;
+}
+function addBinding(bindings, scopeNode, name, selector) {
+    let scoped = bindings.get(scopeNode);
+    if (!scoped) {
+        scoped = new Map();
+        bindings.set(scopeNode, scoped);
+    }
+    if (!scoped.has(name))
+        scoped.set(name, selector);
+}
+/**
+ * Build a lexically-scoped index of element variables → selector. Two passes:
+ * (1) direct DOM-lookup assignments (`const x = root.querySelector(...)`), then
+ * (2) iteration callback params (`coll.forEach(el => …)`), whose element type is
+ * the collection's selector — resolved against the pass-1 bindings.
+ */
+function collectTargetBindings(ast, scope) {
+    const bindings = new Map();
+    recast.types.visit(ast, {
+        visitVariableDeclarator(path) {
+            const name = path.node.id?.name;
+            const selector = selectorFromQueryCall(path.node.init, scope);
+            if (name && selector !== null)
+                addBinding(bindings, enclosingScopeNode(path), name, selector);
+            this.traverse(path);
+        },
+        visitAssignmentExpression(path) {
+            const left = path.node.left;
+            const selector = selectorFromQueryCall(path.node.right, scope);
+            if (left?.type === "Identifier" && selector !== null) {
+                addBinding(bindings, enclosingScopeNode(path), left.name, selector);
+            }
+            this.traverse(path);
+        },
+    });
+    // Pass 2: forEach/map callback params take the collection's selector.
+    recast.types.visit(ast, {
+        visitCallExpression(path) {
+            const node = path.node;
+            const callee = node.callee;
+            if (callee?.type === "MemberExpression" &&
+                callee.property?.type === "Identifier" &&
+                ITERATION_METHODS.has(callee.property.name)) {
+                const collectionSelector = resolveCollectionSelector(callee.object, path, scope, bindings);
+                const fn = node.arguments?.[0];
+                const param = fn?.params?.[0];
+                if (collectionSelector && param?.type === "Identifier" && isFunctionNode(fn)) {
+                    addBinding(bindings, fn, param.name, collectionSelector);
+                }
+            }
+            this.traverse(path);
+        },
+    });
+    return bindings;
+}
+function isFunctionNode(node) {
+    return (node?.type === "ArrowFunctionExpression" ||
+        node?.type === "FunctionExpression" ||
+        node?.type === "FunctionDeclaration");
+}
+/** Resolve the selector a `.forEach`/`.map` is iterating over (variable or inline call). */
+function resolveCollectionSelector(node, callPath, scope, bindings) {
+    if (node?.type === "Identifier")
+        return lookupBinding(node.name, callPath, bindings);
+    if (node?.type === "CallExpression")
+        return selectorFromQueryCall(node, scope);
+    return null;
+}
+/** Resolve a variable name to its selector using the lexical scope chain of `path`. */
+function lookupBinding(name, path, bindings) {
+    for (const scopeNode of scopeChainOf(path)) {
+        const selector = bindings.get(scopeNode)?.get(name);
+        if (selector !== undefined)
+            return selector;
+    }
+    return null;
+}
+/**
+ * Resolve a tween's first argument to a CSS selector. Handles inline string
+ * literals, element variables (lexically scoped), arrays of elements (joined
+ * into a CSS group selector), inline DOM lookup / `toArray` calls, and indexed
+ * access (`items[i]`). Returns null when the target can't be resolved
+ * statically (e.g. an object-target duration anchor `tl.to({ _: 0 }, …)`, or a
+ * runtime-computed selector).
+ */
+function resolveTargetSelector(node, path, scope, bindings) {
+    if (!node)
+        return null;
+    if (node.type === "StringLiteral" || node.type === "Literal") {
+        return typeof node.value === "string" ? node.value : null;
+    }
+    if (node.type === "Identifier") {
+        return lookupBinding(node.name, path, bindings);
+    }
+    if (node.type === "CallExpression") {
+        return selectorFromQueryCall(node, scope);
+    }
+    if (node.type === "ArrayExpression") {
+        const parts = node.elements
+            .map((el) => resolveTargetSelector(el, path, scope, bindings))
+            .filter((s) => typeof s === "string" && s.length > 0);
+        return parts.length > 0 ? parts.join(", ") : null;
+    }
+    if (node.type === "MemberExpression" && node.object?.type === "Identifier") {
+        // `items[i]` — the element type is the collection's selector.
+        return lookupBinding(node.object.name, path, bindings);
+    }
+    return null;
+}
+function objectExpressionToRecord(node, scope) {
+    const result = {};
+    if (node?.type !== "ObjectExpression")
+        return result;
+    for (const prop of node.properties ?? []) {
+        if (prop.type !== "ObjectProperty" && prop.type !== "Property")
+            continue;
+        const key = prop.key?.name ?? prop.key?.value;
+        if (!key)
             continue;
-        const method = rawMethod;
-        const argsStr = match[2] ?? "";
-        const animation = parseGsapCall(method, argsStr, ++idCounter);
-        if (animation) {
-            animations.push(animation);
+        const resolved = resolveNode(prop.value, scope);
+        if (resolved !== undefined) {
+            result[key] = resolved;
         }
-    }
-    const lastAnimIdx = script.lastIndexOf(`${timelineVar}.`);
-    let postamble = "";
-    if (lastAnimIdx !== -1) {
-        const afterLastAnim = script.slice(lastAnimIdx);
-        const endOfCall = afterLastAnim.indexOf(";");
-        if (endOfCall !== -1) {
-            postamble = script.slice(lastAnimIdx + endOfCall + 1).trim();
+        else {
+            // Preserve unresolvable values as raw source text so they survive round-trips
+            result[key] = `__raw:${recast.print(prop.value).code}`;
         }
     }
-    return { animations, timelineVar, preamble, postamble };
+    return result;
 }
-function parseGsapCall(method, argsStr, idNum) {
-    const selectorMatch = argsStr.match(/^\s*["']([^"']+)["']\s*,/);
-    if (!selectorMatch)
-        return null;
-    const targetSelector = selectorMatch[1] ?? "";
-    const afterSelector = argsStr.slice(selectorMatch[0].length);
-    let properties = {};
-    let fromProperties;
-    let position = 0;
-    if (method === "fromTo") {
-        const firstBrace = afterSelector.indexOf("{");
-        const firstEnd = findMatchingBrace(afterSelector, firstBrace);
-        if (firstBrace === -1 || firstEnd === -1)
-            return null;
-        fromProperties = parseObjectLiteral(afterSelector.slice(firstBrace, firstEnd + 1));
-        const secondPart = afterSelector.slice(firstEnd + 1);
-        const secondBrace = secondPart.indexOf("{");
-        const secondEnd = findMatchingBrace(secondPart, secondBrace);
-        if (secondBrace === -1 || secondEnd === -1)
-            return null;
-        properties = parseObjectLiteral(secondPart.slice(secondBrace, secondEnd + 1));
-        const afterProps = secondPart.slice(secondEnd + 1);
-        const posMatch = afterProps.match(/,\s*([\d.]+)/);
-        if (posMatch)
-            position = parseFloat(posMatch[1] ?? "");
+// ── Timeline Variable Detection ─────────────────────────────────────────────
+function isGsapTimelineCall(node) {
+    return (node?.type === "CallExpression" &&
+        node.callee?.type === "MemberExpression" &&
+        node.callee.object?.name === "gsap" &&
+        node.callee.property?.name === "timeline");
+}
+function findTimelineVar(ast) {
+    let timelineVar = null;
+    let timelineCount = 0;
+    recast.types.visit(ast, {
+        visitVariableDeclarator(path) {
+            if (isGsapTimelineCall(path.node.init)) {
+                timelineCount += 1;
+                if (!timelineVar)
+                    timelineVar = path.node.id?.name ?? null;
+            }
+            this.traverse(path);
+        },
+        visitAssignmentExpression(path) {
+            if (isGsapTimelineCall(path.node.right)) {
+                timelineCount += 1;
+                if (!timelineVar) {
+                    const left = path.node.left;
+                    if (left?.type === "Identifier")
+                        timelineVar = left.name;
+                }
+            }
+            this.traverse(path);
+        },
+    });
+    return { timelineVar, timelineCount };
+}
+/**
+ * True when the member chain of `callNode.callee` is rooted at the timeline
+ * variable — `tl.to(...)` and every link of a chain `tl.to(...).to(...)`.
+ */
+function isTimelineRootedCall(callNode, timelineVar) {
+    let obj = callNode.callee?.object;
+    while (obj?.type === "CallExpression") {
+        obj = obj.callee?.object;
     }
-    else {
-        const braceStart = afterSelector.indexOf("{");
-        const braceEnd = findMatchingBrace(afterSelector, braceStart);
-        if (braceStart !== -1 && braceEnd !== -1) {
-            properties = parseObjectLiteral(afterSelector.slice(braceStart, braceEnd + 1));
-            const afterProps = afterSelector.slice(braceEnd + 1);
-            const posMatch = afterProps.match(/,\s*([\d.]+)/);
-            if (posMatch)
-                position = parseFloat(posMatch[1] ?? "");
+    return obj?.type === "Identifier" && obj.name === timelineVar;
+}
+function findAllTweenCalls(ast, timelineVar, scope, targetBindings) {
+    const results = [];
+    recast.types.visit(ast, {
+        visitCallExpression(path) {
+            const node = path.node;
+            const callee = node.callee;
+            if (callee?.type === "MemberExpression" &&
+                callee.property?.type === "Identifier" &&
+                isTimelineRootedCall(node, timelineVar)) {
+                const method = callee.property.name;
+                if (!GSAP_METHODS.has(method)) {
+                    this.traverse(path);
+                    return;
+                }
+                const args = node.arguments;
+                if (args.length < 2) {
+                    this.traverse(path);
+                    return;
+                }
+                const selectorValue = resolveTargetSelector(args[0], path, scope, targetBindings);
+                if (!selectorValue) {
+                    this.traverse(path);
+                    return;
+                }
+                if (method === "fromTo") {
+                    results.push({
+                        path,
+                        node,
+                        method: "fromTo",
+                        selector: selectorValue,
+                        fromArg: args[1],
+                        varsArg: args[2],
+                        positionArg: args[3],
+                    });
+                }
+                else {
+                    results.push({
+                        path,
+                        node,
+                        method: method,
+                        selector: selectorValue,
+                        varsArg: args[1],
+                        positionArg: args[2],
+                    });
+                }
+            }
+            this.traverse(path);
+        },
+    });
+    return results;
+}
+/** Keys that are stored on dedicated GsapAnimation fields (not in properties/extras). */
+const BUILTIN_VAR_KEYS = new Set(["duration", "ease", "delay"]);
+/** Keys that are never preserved (callbacks / advanced patterns). */
+const DROPPED_VAR_KEYS = new Set(["keyframes", "onComplete", "onStart", "onUpdate", "onRepeat"]);
+/** Keys that belong in `extras` — non-editable GSAP config that must survive round-trips. */
+const EXTRAS_KEYS = new Set([
+    "stagger",
+    "yoyo",
+    "repeat",
+    "repeatDelay",
+    "snap",
+    "overwrite",
+    "immediateRender",
+]);
+/**
+ * Extract raw source text for a property in an ObjectExpression AST node.
+ * Returns the printed source of the value node, suitable for verbatim re-emission.
+ */
+function extractRawPropertySource(varsArgNode, key) {
+    if (varsArgNode?.type !== "ObjectExpression")
+        return undefined;
+    for (const prop of varsArgNode.properties ?? []) {
+        if (prop.type !== "ObjectProperty" && prop.type !== "Property")
+            continue;
+        const propKey = prop.key?.name ?? prop.key?.value;
+        if (propKey === key) {
+            return recast.print(prop.value).code;
         }
     }
-    const duration = typeof properties.duration === "number" ? properties.duration : undefined;
-    const ease = typeof properties.ease === "string" ? properties.ease : undefined;
-    const filteredProps = {};
-    for (const [key, value] of Object.entries(properties)) {
-        if (SUPPORTED_PROPS.includes(key)) {
-            filteredProps[key] = value;
+    return undefined;
+}
+function tweenCallToAnimation(call, scope) {
+    const vars = objectExpressionToRecord(call.varsArg, scope);
+    const properties = {};
+    const extras = {};
+    for (const [key, val] of Object.entries(vars)) {
+        if (BUILTIN_VAR_KEYS.has(key))
+            continue;
+        if (DROPPED_VAR_KEYS.has(key))
+            continue;
+        if (EXTRAS_KEYS.has(key)) {
+            // For extras, prefer the raw AST source so complex objects like
+            // `stagger: { each: 0.15, from: "start" }` survive verbatim.
+            const rawSource = extractRawPropertySource(call.varsArg, key);
+            if (rawSource !== undefined) {
+                extras[key] = `__raw:${rawSource}`;
+            }
+            else if (val !== undefined) {
+                extras[key] = val;
+            }
+            continue;
+        }
+        if (typeof val === "number" || typeof val === "string") {
+            properties[key] = val;
         }
     }
-    let filteredFromProps;
-    if (fromProperties) {
-        filteredFromProps = {};
-        for (const [key, value] of Object.entries(fromProperties)) {
-            if (SUPPORTED_PROPS.includes(key)) {
-                filteredFromProps[key] = value;
+    let fromProperties;
+    if (call.method === "fromTo" && call.fromArg) {
+        fromProperties = {};
+        const fromVars = objectExpressionToRecord(call.fromArg, scope);
+        for (const [key, val] of Object.entries(fromVars)) {
+            if (typeof val === "number" || typeof val === "string") {
+                fromProperties[key] = val;
             }
         }
     }
-    return {
-        id: `anim-${idNum}`,
-        targetSelector,
-        method,
+    const posVal = call.positionArg ? extractLiteralValue(call.positionArg, scope) : 0;
+    const position = typeof posVal === "number" ? posVal : typeof posVal === "string" ? posVal : 0;
+    const duration = typeof vars.duration === "number" ? vars.duration : undefined;
+    const ease = typeof vars.ease === "string" ? vars.ease : undefined;
+    const anim = {
+        targetSelector: call.selector,
+        method: call.method,
         position,
-        properties: filteredProps,
-        fromProperties: filteredFromProps,
+        properties,
+        fromProperties,
         duration,
         ease,
     };
+    if (Object.keys(extras).length > 0)
+        anim.extras = extras;
+    return anim;
+}
+// ── Stable ID Generation ───────────────────────────────────────────────────
+function assignStableIds(anims) {
+    const counts = new Map();
+    return anims.map((anim) => {
+        const posKey = typeof anim.position === "number"
+            ? String(Math.round(anim.position * 1000))
+            : String(anim.position);
+        const base = `${anim.targetSelector}-${anim.method}-${posKey}`;
+        const count = (counts.get(base) ?? 0) + 1;
+        counts.set(base, count);
+        const id = count === 1 ? base : `${base}-${count}`;
+        return { ...anim, id };
+    });
 }
-export function serializeGsapAnimations(animations, timelineVar = "tl", options) {
-    const sorted = [...animations].sort((a, b) => a.position - b.position);
-    const lines = sorted.map((anim) => {
-        const selector = `"${anim.targetSelector}"`;
-        const props = { ...anim.properties };
-        if (anim.duration !== undefined)
-            props.duration = anim.duration;
-        if (anim.ease)
-            props.ease = anim.ease;
-        const propsStr = serializeObject(props);
-        switch (anim.method) {
-            case "set":
-                return `    ${timelineVar}.set(${selector}, ${propsStr}, ${anim.position});`;
-            case "to":
-                return `    ${timelineVar}.to(${selector}, ${propsStr}, ${anim.position});`;
-            case "from":
-                return `    ${timelineVar}.from(${selector}, ${propsStr}, ${anim.position});`;
-            case "fromTo": {
-                const fromStr = serializeObject(anim.fromProperties || {});
-                return `    ${timelineVar}.fromTo(${selector}, ${fromStr}, ${propsStr}, ${anim.position});`;
+/**
+ * Parse a script to its recast AST plus the located tween calls. The mutation
+ * functions reuse this so they can edit the exact call node in place (recast
+ * preserves all surrounding source — interleaved `gsap.set`, element variable
+ * declarations, the IIFE wrapper, comments and formatting).
+ */
+function parseGsapAst(script) {
+    const ast = parseScript(script);
+    const scope = collectScopeBindings(ast);
+    const targetBindings = collectTargetBindings(ast, scope);
+    const detection = findTimelineVar(ast);
+    const timelineVar = detection.timelineVar ?? "tl";
+    const calls = findAllTweenCalls(ast, timelineVar, scope, targetBindings);
+    const animations = assignStableIds(calls.map((call) => tweenCallToAnimation(call, scope)));
+    const located = animations.map((animation, i) => ({
+        id: animation.id,
+        call: calls[i],
+        animation,
+    }));
+    return { ast, scope, timelineVar, detection, located };
+}
+// ── Public API ──────────────────────────────────────────────────────────────
+export function parseGsapScript(script) {
+    try {
+        const { detection, timelineVar, located } = parseGsapAst(script);
+        const animations = located.map((l) => l.animation);
+        const timelineMatch = script.match(new RegExp(`^[\\s\\S]*?(?:const|let|var)\\s+${timelineVar}\\s*=\\s*gsap\\.timeline\\s*\\([^)]*\\)\\s*;?`));
+        const preamble = timelineMatch?.[0] ?? `const ${timelineVar} = gsap.timeline({ paused: true });`;
+        const lastCallIdx = script.lastIndexOf(`${timelineVar}.`);
+        let postamble = "";
+        if (lastCallIdx !== -1) {
+            const afterLast = script.slice(lastCallIdx);
+            const endOfCall = afterLast.indexOf(";");
+            if (endOfCall !== -1) {
+                postamble = script.slice(lastCallIdx + endOfCall + 1).trim();
             }
         }
+        const result = { animations, timelineVar, preamble, postamble };
+        if (detection.timelineCount > 1)
+            result.multipleTimelines = true;
+        if (detection.timelineCount > 0 && detection.timelineVar === null)
+            result.unsupportedTimelinePattern = true;
+        return result;
+    }
+    catch {
+        return { animations: [], timelineVar: "tl", preamble: "", postamble: "" };
+    }
+}
+// ── In-place AST mutation helpers ───────────────────────────────────────────
+//
+// Edits operate directly on the located call's AST node and reprint via recast,
+// which preserves every untouched statement. This is what lets us edit tweens
+// in real compositions (variable targets, interleaved `gsap.set`, IIFE wrapper)
+// without regenerating — and discarding — the surrounding code.
+/** Render a model value to the JS source it should emit as. Mirrors gsapSerialize. */
+function valueToCode(value) {
+    if (typeof value === "string" && value.startsWith("__raw:"))
+        return value.slice(6);
+    if (typeof value === "string")
+        return JSON.stringify(value);
+    return String(value);
+}
+function safeKey(key) {
+    return /^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key);
+}
+/**
+ * Parse a value/expression snippet into a standalone AST expression node.
+ * Uses an assignment (`__hf__ = <code>`) rather than wrapping in parens so an
+ * object literal parses as an expression without recast re-emitting the
+ * surrounding parentheses.
+ */
+function parseExpr(code) {
+    return parseScript(`__hf__ = ${code};`).program.body[0].expression.right;
+}
+function propKeyName(prop) {
+    return prop?.key?.name ?? prop?.key?.value;
+}
+function isObjectProperty(prop) {
+    return prop?.type === "ObjectProperty" || prop?.type === "Property";
+}
+/** A key the inspector treats as an editable transform/style property. */
+function isEditablePropertyKey(key) {
+    return !BUILTIN_VAR_KEYS.has(key) && !DROPPED_VAR_KEYS.has(key) && !EXTRAS_KEYS.has(key);
+}
+function makeObjectProperty(key, value) {
+    const obj = parseExpr(`{ ${safeKey(key)}: ${valueToCode(value)} }`);
+    return obj.properties[0];
+}
+/** Set (or insert) a single key on an ObjectExpression, preserving sibling keys. */
+function setVarsKey(varsArg, key, value) {
+    if (varsArg?.type !== "ObjectExpression")
+        return;
+    const existing = varsArg.properties.find((p) => isObjectProperty(p) && propKeyName(p) === key);
+    if (existing) {
+        existing.value = parseExpr(valueToCode(value));
+    }
+    else {
+        varsArg.properties.push(makeObjectProperty(key, value));
+    }
+}
+/**
+ * Replace the editable-property keys on an ObjectExpression with `newProps`,
+ * leaving `duration`, `ease`, `stagger`, callbacks and other non-editable keys
+ * untouched.
+ */
+function reconcileEditableProperties(varsArg, newProps) {
+    if (varsArg?.type !== "ObjectExpression")
+        return;
+    // Drop editable props no longer present.
+    varsArg.properties = varsArg.properties.filter((p) => {
+        if (!isObjectProperty(p))
+            return true;
+        const key = propKeyName(p);
+        if (typeof key !== "string")
+            return true;
+        if (!isEditablePropertyKey(key))
+            return true;
+        return key in newProps;
     });
-    let mediaSync = "";
-    if (options?.includeMediaSync) {
-        mediaSync = `
-    // Sync media playback
-    ${timelineVar}.eventCallback("onUpdate", function() {
-      const time = ${timelineVar}.time();
-      document.querySelectorAll("video[data-start], audio[data-start]").forEach(function(media) {
-        const start = parseFloat(media.dataset.start);
-        const end = parseFloat(media.dataset.end) || Infinity;
-        const mediaTime = time - start;
-        if (time >= start && time < end) {
-          if (Math.abs(media.currentTime - mediaTime) > 0.1) {
-            media.currentTime = mediaTime;
-          }
-          if (media.paused && !${timelineVar}.paused()) {
-            media.play().catch(function() {});
-          }
-        } else if (!media.paused) {
-          media.pause();
-        }
-      });
-    });`;
-    }
-    return `
-    const ${timelineVar} = gsap.timeline({ paused: true });
-${lines.join("\n")}${mediaSync}
-  `;
-}
-function serializeObject(obj) {
-    const entries = Object.entries(obj).map(([key, value]) => {
-        if (typeof value === "string") {
-            return `${key}: "${value}"`;
+    // Upsert each new prop, preserving the order keys first appeared.
+    for (const [key, value] of Object.entries(newProps)) {
+        setVarsKey(varsArg, key, value);
+    }
+}
+function applyUpdatesToCall(call, updates) {
+    if (updates.properties)
+        reconcileEditableProperties(call.varsArg, updates.properties);
+    if (updates.fromProperties && call.method === "fromTo") {
+        reconcileEditableProperties(call.fromArg, updates.fromProperties);
+    }
+    if (updates.duration !== undefined)
+        setVarsKey(call.varsArg, "duration", updates.duration);
+    if (updates.ease !== undefined)
+        setVarsKey(call.varsArg, "ease", updates.ease);
+    if (updates.position !== undefined) {
+        const posIdx = call.method === "fromTo" ? 3 : 2;
+        call.node.arguments[posIdx] = parseExpr(valueToCode(updates.position));
+    }
+}
+/** Walk up to the enclosing ExpressionStatement path (for prune / insertAfter). */
+function findStatementPath(path) {
+    let p = path;
+    while (p) {
+        if (p.node?.type === "ExpressionStatement")
+            return p;
+        p = p.parentPath;
+    }
+    return null;
+}
+/** Build the source for a single `tl.method(selector, vars, position)` call. */
+function buildTweenStatementCode(timelineVar, anim) {
+    const selector = JSON.stringify(anim.targetSelector);
+    const props = { ...anim.properties };
+    // `set` is instantaneous — GSAP ignores duration on it, so don't emit one.
+    if (anim.method !== "set" && anim.duration !== undefined)
+        props.duration = anim.duration;
+    if (anim.ease)
+        props.ease = anim.ease;
+    const entries = Object.entries(props).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
+    if (anim.extras) {
+        for (const [k, v] of Object.entries(anim.extras)) {
+            entries.push(`${safeKey(k)}: ${valueToCode(v)}`);
         }
-        return `${key}: ${value}`;
-    });
-    return `{ ${entries.join(", ")} }`;
+    }
+    const objCode = `{ ${entries.join(", ")} }`;
+    const posCode = valueToCode(typeof anim.position === "number" ? anim.position : (anim.position ?? 0));
+    if (anim.method === "fromTo") {
+        const fromEntries = Object.entries(anim.fromProperties ?? {}).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
+        const fromCode = `{ ${fromEntries.join(", ")} }`;
+        return `${timelineVar}.fromTo(${selector}, ${fromCode}, ${objCode}, ${posCode});`;
+    }
+    return `${timelineVar}.${anim.method}(${selector}, ${objCode}, ${posCode});`;
 }
 export function updateAnimationInScript(script, animationId, updates) {
-    const parsed = parseGsapScript(script);
-    const updated = parsed.animations.map((anim) => {
-        if (anim.id === animationId) {
-            return { ...anim, ...updates };
-        }
-        return anim;
-    });
-    return serializeGsapAnimations(updated, parsed.timelineVar);
+    let parsed;
+    try {
+        parsed = parseGsapAst(script);
+    }
+    catch (e) {
+        console.warn("[gsap-parser] updateAnimationInScript parse failed:", e);
+        return script;
+    }
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    applyUpdatesToCall(target.call, updates);
+    return recast.print(parsed.ast).code;
 }
 export function addAnimationToScript(script, animation) {
-    const parsed = parseGsapScript(script);
-    const id = `anim-${Date.now()}`;
-    const newAnim = { ...animation, id };
-    parsed.animations.push(newAnim);
-    return {
-        script: serializeGsapAnimations(parsed.animations, parsed.timelineVar),
-        id,
-    };
-}
-export function removeAnimationFromScript(script, animationId) {
-    const parsed = parseGsapScript(script);
-    const filtered = parsed.animations.filter((a) => a.id !== animationId);
-    return serializeGsapAnimations(filtered, parsed.timelineVar);
-}
-export function getAnimationsForElement(animations, elementId) {
-    const selector = `#${elementId}`;
-    return animations.filter((a) => a.targetSelector === selector);
-}
-const FORBIDDEN_GSAP_PATTERNS = [
-    { pattern: /\.call\s*\(/, message: "call() method not allowed" },
-    {
-        pattern: /\.add\s*\(\s*function/,
-        message: "add(function) not allowed",
-    },
-    {
-        pattern: /\.add\s*\(\s*\(/,
-        message: "add() with arrow function not allowed",
-    },
-    { pattern: /onComplete\s*:/, message: "onComplete callback not allowed" },
-    { pattern: /onStart\s*:/, message: "onStart callback not allowed" },
-    { pattern: /onUpdate\s*:/, message: "onUpdate callback not allowed" },
-    {
-        pattern: /onRepeat\s*:/,
-        message: "onRepeat callback not allowed",
-    },
-    {
-        pattern: /onReverseComplete\s*:/,
-        message: "onReverseComplete callback not allowed",
-    },
-    {
-        pattern: /repeat\s*:\s*-1/,
-        message: "Infinite repeat (repeat: -1) not allowed",
-    },
-    {
-        pattern: /Math\.random\s*\(/,
-        message: "Random values (Math.random) not allowed",
-    },
-    {
-        pattern: /Date\.now\s*\(/,
-        message: "Date-dependent values (Date.now) not allowed",
-    },
-    { pattern: /new\s+Date\s*\(/, message: "Date constructor not allowed" },
-    { pattern: /setTimeout\s*\(/, message: "setTimeout not allowed" },
-    { pattern: /setInterval\s*\(/, message: "setInterval not allowed" },
-    {
-        pattern: /requestAnimationFrame\s*\(/,
-        message: "requestAnimationFrame not allowed",
-    },
-];
-export function validateCompositionGsap(script) {
-    const errors = [];
-    const warnings = [];
-    for (const { pattern, message } of FORBIDDEN_GSAP_PATTERNS) {
-        if (pattern.test(script)) {
-            errors.push(message);
-        }
+    let parsed;
+    try {
+        parsed = parseGsapAst(script);
     }
-    if (/yoyo\s*:\s*true/.test(script)) {
-        warnings.push("yoyo animations may behave unexpectedly when scrubbing");
+    catch (e) {
+        console.warn("[gsap-parser] addAnimationToScript parse failed:", e);
+        return { script, id: "" };
     }
-    if (/stagger\s*:/.test(script)) {
-        warnings.push("stagger animations may not serialize correctly");
+    // Nothing to anchor against and no timeline to target — treat as parse failure.
+    if (parsed.located.length === 0 && parsed.detection.timelineVar === null) {
+        return { script, id: "" };
     }
-    return {
-        valid: errors.length === 0,
-        errors,
-        warnings,
-    };
+    const id = `anim-${Date.now()}`;
+    const statementCode = buildTweenStatementCode(parsed.timelineVar, animation);
+    const newStatement = parseScript(statementCode).program.body[0];
+    const lastCall = parsed.located[parsed.located.length - 1]?.call;
+    const anchorPath = lastCall
+        ? findStatementPath(lastCall.path)
+        : findTimelineDeclarationPath(parsed.ast, parsed.timelineVar);
+    if (anchorPath) {
+        anchorPath.insertAfter(newStatement);
+    }
+    else {
+        parsed.ast.program.body.push(newStatement);
+    }
+    return { script: recast.print(parsed.ast).code, id };
 }
-export function keyframesToGsapAnimations(elementId, keyframes, elementStartTime, base) {
-    const sorted = [...keyframes].sort((a, b) => a.time - b.time);
-    const animations = [];
-    const baseX = base?.x ?? 0;
-    const baseY = base?.y ?? 0;
-    const baseScale = base?.scale ?? 1;
-    sorted.forEach((kf, i) => {
-        const absoluteTime = elementStartTime + kf.time;
-        const isFirst = i === 0;
-        const prevKf = i > 0 ? sorted[i - 1] : null;
-        const duration = prevKf ? kf.time - prevKf.time : undefined;
-        const position = prevKf ? elementStartTime + prevKf.time : absoluteTime;
-        const properties = {};
-        for (const [key, value] of Object.entries(kf.properties)) {
-            if (typeof value !== "number")
-                continue;
-            if (key === "x")
-                properties.x = baseX + value;
-            else if (key === "y")
-                properties.y = baseY + value;
-            else if (key === "scale")
-                properties.scale = baseScale * value;
-            else
-                properties[key] = value;
-        }
-        animations.push({
-            id: `${elementId}-kf-${kf.id}`,
-            targetSelector: `#${elementId}`,
-            method: isFirst ? "set" : "to",
-            position,
-            properties,
-            duration: isFirst ? undefined : duration,
-            ease: kf.ease,
-        });
-    });
-    return animations;
-}
-export function gsapAnimationsToKeyframes(animations, elementStartTime, options) {
-    const validMethods = ["set", "to", "from", "fromTo"];
-    const baseX = options?.baseX ?? 0;
-    const baseY = options?.baseY ?? 0;
-    const baseScale = options?.baseScale ?? 1;
-    const clampTimeToZero = options?.clampTimeToZero ?? true;
-    const skipBaseSet = options?.skipBaseSet ?? false;
-    const baseTimeEpsilon = 0.001;
-    const baseValueEpsilon = 0.00001;
-    return animations
-        .filter((a) => validMethods.includes(a.method))
-        .map((a) => {
-        const relativeTimeRaw = a.position - elementStartTime;
-        const time = clampTimeToZero ? Math.max(0, relativeTimeRaw) : relativeTimeRaw;
-        const properties = {};
-        for (const [key, value] of Object.entries(a.properties)) {
-            if (SUPPORTED_PROPS.includes(key) && typeof value === "number") {
-                if (key === "x") {
-                    properties.x = value - baseX;
-                }
-                else if (key === "y") {
-                    properties.y = value - baseY;
-                }
-                else if (key === "scale") {
-                    properties.scale =
-                        baseScale !== 0 ? value / baseScale : value;
-                }
-                else {
-                    properties[key] = value;
+/** Find the statement path of `const <timelineVar> = gsap.timeline(...)`. */
+function findTimelineDeclarationPath(ast, timelineVar) {
+    let found = null;
+    recast.types.visit(ast, {
+        visitVariableDeclaration(path) {
+            if (found)
+                return false;
+            for (const decl of path.node.declarations ?? []) {
+                if (decl.id?.name === timelineVar && isGsapTimelineCall(decl.init)) {
+                    found = path;
+                    return false;
                 }
             }
-        }
-        if (skipBaseSet && a.method === "set" && Math.abs(time) <= baseTimeEpsilon) {
-            const propKeys = Object.keys(properties);
-            const isOnlyBaseProps = propKeys.every((k) => k === "x" || k === "y" || k === "scale");
-            if (isOnlyBaseProps && propKeys.length > 0) {
-                const hasNonBaseOffset = (properties.x !== undefined && Math.abs(properties.x) > baseValueEpsilon) ||
-                    (properties.y !== undefined && Math.abs(properties.y) > baseValueEpsilon) ||
-                    (properties.scale !== undefined && Math.abs(properties.scale - 1) > baseValueEpsilon);
-                if (!hasNonBaseOffset) {
-                    return null;
-                }
+            this.traverse(path);
+        },
+    });
+    return found;
+}
+/** Find the call that chains off `targetNode` (i.e. whose callee object IS it). */
+function findChainParentCall(stmtNode, targetNode) {
+    let found = null;
+    recast.types.visit(stmtNode, {
+        visitCallExpression(p) {
+            if (found)
+                return false;
+            if (p.node.callee?.type === "MemberExpression" && p.node.callee.object === targetNode) {
+                found = p.node;
+                return false;
             }
-        }
-        const kf = { id: a.id, time, properties };
-        if (a.ease !== undefined)
-            kf.ease = a.ease;
-        return kf;
-    })
-        .filter((kf) => kf !== null)
-        .sort((a, b) => a.time - b.time);
+            this.traverse(p);
+        },
+    });
+    return found;
+}
+export function removeAnimationFromScript(script, animationId) {
+    let parsed;
+    try {
+        parsed = parseGsapAst(script);
+    }
+    catch (e) {
+        console.warn("[gsap-parser] removeAnimationFromScript parse failed:", e);
+        return script;
+    }
+    const target = parsed.located.find((l) => l.id === animationId);
+    if (!target)
+        return script;
+    const node = target.call.node;
+    const stmtPath = findStatementPath(target.call.path);
+    if (!stmtPath)
+        return script;
+    const parentCall = findChainParentCall(stmtPath.node, node);
+    if (parentCall) {
+        // Inner link of a chain — splice it out by re-pointing the next link.
+        parentCall.callee.object = node.callee.object;
+    }
+    else if (node.callee?.object?.type === "CallExpression") {
+        // Outermost link of a chain with earlier links — drop just this link.
+        stmtPath.node.expression = node.callee.object;
+    }
+    else {
+        // Standalone tween — remove the whole statement.
+        stmtPath.prune();
+    }
+    return recast.print(parsed.ast).code;
 }
 //# sourceMappingURL=gsapParser.js.map