@hyperframes/core 0.6.97 → 0.6.99

package/dist/parsers/gsapParser.js

@@ -10,6 +10,7 @@
  */
 import * as recast from "recast";
 import { parse as babelParse } from "@babel/parser";
+import { serializeValue as valueToCode, safeJsKey as safeKey, } from "./gsapSerialize";
 export { serializeGsapAnimations, getAnimationsForElementId, validateCompositionGsap, keyframesToGsapAnimations, gsapAnimationsToKeyframes, SUPPORTED_PROPS, SUPPORTED_EASES, } from "./gsapSerialize";
 export { PROPERTY_GROUPS, classifyPropertyGroup, classifyTweenPropertyGroup, } from "./gsapConstants";
 import { classifyPropertyGroup, classifyTweenPropertyGroup } from "./gsapConstants";
@@ -166,15 +167,17 @@ function collectTargetBindings(ast, scope) {
         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);
+            const scopeNode = enclosingScopeNode(path);
+            if (name && selector !== null && scopeNode)
+                addBinding(bindings, scopeNode, 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);
+            const scopeNode = enclosingScopeNode(path);
+            if (left?.type === "Identifier" && selector !== null && scopeNode) {
+                addBinding(bindings, scopeNode, left.name, selector);
             }
             this.traverse(path);
         },
@@ -782,7 +785,7 @@ function tweenCallToAnimation(call, scope) {
         }
     }
     const hasPositionArg = !!call.positionArg;
-    const posVal = hasPositionArg ? extractLiteralValue(call.positionArg, scope) : 0;
+    const posVal = call.positionArg ? extractLiteralValue(call.positionArg, scope) : 0;
     const position = typeof posVal === "number" ? posVal : typeof posVal === "string" ? posVal : 0;
     let duration = typeof vars.duration === "number" ? vars.duration : undefined;
     const ease = typeof vars.ease === "string" ? vars.ease : undefined;
@@ -982,17 +985,6 @@ export function parseGsapScript(script) {
 // 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
@@ -1058,24 +1050,26 @@ function reconcileEditableProperties(varsArg, newProps) {
         setVarsKey(varsArg, key, value);
     }
 }
+function applyEaseUpdate(varsArg, ease) {
+    const kfNode = findKeyframesObjectNode(varsArg);
+    if (kfNode) {
+        setVarsKey(kfNode, "easeEach", ease);
+        removeVarsKey(varsArg, "ease");
+    }
+    else {
+        setVarsKey(varsArg, "ease", ease);
+    }
+}
 function applyUpdatesToCall(call, updates) {
     if (updates.properties)
         reconcileEditableProperties(call.varsArg, updates.properties);
-    if (updates.fromProperties && call.method === "fromTo") {
+    if (updates.fromProperties && call.method === "fromTo" && call.fromArg) {
         reconcileEditableProperties(call.fromArg, updates.fromProperties);
     }
     if (updates.duration !== undefined)
         setVarsKey(call.varsArg, "duration", updates.duration);
-    if (updates.ease !== undefined) {
-        const kfNode = findKeyframesObjectNode(call.varsArg);
-        if (kfNode) {
-            setVarsKey(kfNode, "easeEach", updates.ease);
-            removeVarsKey(call.varsArg, "ease");
-        }
-        else {
-            setVarsKey(call.varsArg, "ease", updates.ease);
-        }
-    }
+    if (updates.ease !== undefined)
+        applyEaseUpdate(call.varsArg, updates.ease);
     if (updates.position !== undefined) {
         const posIdx = call.method === "fromTo" ? 3 : 2;
         call.node.arguments[posIdx] = parseExpr(valueToCode(updates.position));
@@ -1091,6 +1085,18 @@ function findStatementPath(path) {
     }
     return null;
 }
+function insertAfterAnchor(parsed, newStatement) {
+    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);
+    }
+}
 /** Build the source for a single `tl.method(selector, vars, position)` call. */
 function buildTweenStatementCode(timelineVar, anim) {
     const selector = JSON.stringify(anim.targetSelector);
@@ -1130,6 +1136,55 @@ export function updateAnimationInScript(script, animationId, updates) {
     applyUpdatesToCall(target.call, updates);
     return recast.print(parsed.ast).code;
 }
+export function shiftPositionsInScript(script, targetSelector, delta) {
+    let parsed;
+    try {
+        parsed = parseGsapAst(script);
+    }
+    catch (e) {
+        console.warn("[gsap-parser] shiftPositionsInScript parse failed:", e);
+        return 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);
+        applyUpdatesToCall(entry.call, { position: newPos });
+        changed = true;
+    }
+    return changed ? recast.print(parsed.ast).code : script;
+}
+export function scalePositionsInScript(script, targetSelector, oldStart, oldDuration, newStart, newDuration) {
+    if (oldDuration <= 0 || newDuration <= 0)
+        return script;
+    const ratio = newDuration / oldDuration;
+    let parsed;
+    try {
+        parsed = parseGsapAst(script);
+    }
+    catch (e) {
+        console.warn("[gsap-parser] scalePositionsInScript parse failed:", e);
+        return 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);
+        const updates = { position: newPos };
+        if (typeof entry.animation.duration === "number" && entry.animation.duration > 0) {
+            updates.duration = Math.max(0.001, Math.round(entry.animation.duration * ratio * 1000) / 1000);
+        }
+        applyUpdatesToCall(entry.call, updates);
+        changed = true;
+    }
+    return changed ? recast.print(parsed.ast).code : script;
+}
 function updateAnimationSelector(script, animationId, newSelector) {
     let parsed;
     try {
@@ -1166,16 +1221,7 @@ export function addAnimationToScript(script, animation) {
     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);
-    }
+    insertAfterAnchor(parsed, newStatement);
     return { script: recast.print(parsed.ast).code, id };
 }
 export function addAnimationWithKeyframesToScript(script, targetSelector, position, duration, keyframes, ease) {
@@ -1191,31 +1237,14 @@ export function addAnimationWithKeyframesToScript(script, targetSelector, positi
         return { script, id: "" };
     }
     const selector = JSON.stringify(targetSelector);
-    const kfEntries = keyframes.map((kf) => {
-        const propEntries = Object.entries(kf.properties).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
-        if (kf.ease)
-            propEntries.push(`ease: ${JSON.stringify(kf.ease)}`);
-        if (kf.auto)
-            propEntries.push(`_auto: 1`);
-        return `${JSON.stringify(`${kf.percentage}%`)}: { ${propEntries.join(", ")} }`;
-    });
-    const kfCode = `{ ${kfEntries.join(", ")} }`;
+    const kfCode = buildKeyframeObjectCode(keyframes);
     const varEntries = [`keyframes: ${kfCode}`, `duration: ${valueToCode(duration)}`];
     if (ease)
         varEntries.push(`ease: ${JSON.stringify(ease)}`);
     const posCode = valueToCode(position);
     const stmtCode = `${parsed.timelineVar}.to(${selector}, { ${varEntries.join(", ")} }, ${posCode});`;
     const newStatement = parseScript(stmtCode).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);
-    }
+    insertAfterAnchor(parsed, newStatement);
     const result = recast.print(parsed.ast).code;
     const reParsed = parseGsapAst(result);
     const newId = reParsed.located[reParsed.located.length - 1]?.id ?? "";
@@ -1434,6 +1463,19 @@ function sortedKeyframes(kfs) {
 function keyframePropsToCode(kf) {
     return Object.entries(kf.properties).map(([k, v]) => `${safeKey(k)}: ${valueToCode(v)}`);
 }
+function buildKeyframeObjectCode(keyframes, options) {
+    const entries = keyframes.map((kf) => {
+        const props = keyframePropsToCode(kf);
+        if (kf.ease)
+            props.push(`ease: ${JSON.stringify(kf.ease)}`);
+        if (kf.auto)
+            props.push(`_auto: 1`);
+        return `${JSON.stringify(`${kf.percentage}%`)}: { ${props.join(", ")} }`;
+    });
+    if (options?.easeEach)
+        entries.push(`easeEach: ${JSON.stringify(options.easeEach)}`);
+    return `{ ${entries.join(", ")} }`;
+}
 /** Remove a named property from an ObjectExpression's properties array. */
 function removeVarsKey(varsArg, key) {
     if (varsArg?.type !== "ObjectExpression")
@@ -1481,6 +1523,15 @@ function locateAnimation(script, animationId) {
     const target = parsed.located.find((l) => l.id === animationId);
     return target ? { parsed, target } : null;
 }
+function locateAnimationWithFallback(script, animationId) {
+    const loc = locateAnimation(script, animationId);
+    if (loc)
+        return loc;
+    const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
+    if (convertedId === animationId)
+        return null;
+    return locateAnimation(script, convertedId);
+}
 /** Find the keyframes ObjectExpression node on a tween's varsArg, or null. */
 function findKeyframesObjectNode(varsArg) {
     const node = findPropertyNode(varsArg, "keyframes");
@@ -1516,11 +1567,7 @@ function collapseKeyframesToFlat(varsArg, record) {
  * updateKeyframeInScript.
  */
 function locateKeyframeCtx(script, animationId, percentage) {
-    let loc = locateAnimation(script, animationId);
-    if (!loc) {
-        const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
-        loc = locateAnimation(script, convertedId);
-    }
+    const loc = locateAnimationWithFallback(script, animationId);
     if (!loc)
         return null;
     const kfNode = findKeyframesObjectNode(loc.target.call.varsArg);
@@ -1533,21 +1580,13 @@ function locateKeyframeCtx(script, animationId, percentage) {
  * object. If the percentage already exists, its value is replaced.
  */
 export function addKeyframeToScript(script, animationId, percentage, properties, ease, backfillDefaults) {
-    let loc = locateAnimation(script, animationId);
-    if (!loc) {
-        const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
-        loc = locateAnimation(script, convertedId);
-    }
+    let loc = locateAnimationWithFallback(script, animationId);
     if (!loc)
         return script;
     let kfNode = findKeyframesObjectNode(loc.target.call.varsArg);
     if (!kfNode) {
         script = convertToKeyframesInScript(script, animationId);
-        loc = locateAnimation(script, animationId);
-        if (!loc) {
-            const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
-            loc = locateAnimation(script, convertedId);
-        }
+        loc = locateAnimationWithFallback(script, animationId);
         if (!loc)
             return script;
         kfNode = findKeyframesObjectNode(loc.target.call.varsArg);
@@ -1626,7 +1665,9 @@ export function addKeyframeToScript(script, animationId, percentage, properties,
             const valObj = prop.value;
             if (!valObj || valObj.type !== "ObjectExpression")
                 continue;
-            const existingKeys = new Set(valObj.properties.filter((p) => isObjectProperty(p)).map((p) => propKeyName(p)));
+            const existingKeys = new Set(valObj.properties
+                .filter((p) => isObjectProperty(p))
+                .map((p) => propKeyName(p)));
             for (const pk of newPropKeys) {
                 if (existingKeys.has(pk))
                     continue;
@@ -1761,11 +1802,7 @@ function insertKeyframesProp(varsArg, fromProps, toProps, easeEach) {
  * the "to" state for `from()` tweens (the values the DOM would resolve to).
  */
 export function convertToKeyframesInScript(script, animationId, resolvedFromValues) {
-    let loc = locateAnimation(script, animationId);
-    if (!loc) {
-        const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
-        loc = locateAnimation(script, convertedId);
-    }
+    let loc = locateAnimationWithFallback(script, animationId);
     if (!loc)
         return script;
     const anim = loc.target.animation;
@@ -1792,11 +1829,7 @@ export function convertToKeyframesInScript(script, animationId, resolvedFromValu
  * last keyframe's properties.
  */
 export function removeAllKeyframesFromScript(script, animationId) {
-    let loc = locateAnimation(script, animationId);
-    if (!loc) {
-        const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
-        loc = locateAnimation(script, convertedId);
-    }
+    let loc = locateAnimationWithFallback(script, animationId);
     if (!loc)
         return script;
     const kfNode = findKeyframesObjectNode(loc.target.call.varsArg);
@@ -1821,11 +1854,7 @@ export function removeAllKeyframesFromScript(script, animationId) {
  * Called when the user first edits a dynamically-generated keyframe in the studio.
  */
 export function materializeKeyframesInScript(script, animationId, keyframes, easeEach, resolvedSelector) {
-    let loc = locateAnimation(script, animationId);
-    if (!loc) {
-        const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
-        loc = locateAnimation(script, convertedId);
-    }
+    let loc = locateAnimationWithFallback(script, animationId);
     if (!loc)
         return script;
     const varsArg = loc.target.call.varsArg;
@@ -1833,17 +1862,7 @@ export function materializeKeyframesInScript(script, animationId, keyframes, eas
     if (resolvedSelector && loc.target.call.node.arguments[0]) {
         loc.target.call.node.arguments[0] = parseExpr(JSON.stringify(resolvedSelector));
     }
-    const entries = [];
-    for (const kf of sortedKeyframes(keyframes)) {
-        const propEntries = keyframePropsToCode(kf);
-        if (kf.ease)
-            propEntries.push(`ease: ${JSON.stringify(kf.ease)}`);
-        entries.push(`${JSON.stringify(kf.percentage + "%")}: { ${propEntries.join(", ")} }`);
-    }
-    if (easeEach) {
-        entries.push(`easeEach: ${JSON.stringify(easeEach)}`);
-    }
-    const kfObjCode = `{ ${entries.join(", ")} }`;
+    const kfObjCode = buildKeyframeObjectCode(sortedKeyframes(keyframes), { easeEach });
     const kfParent = varsArg.properties.find((p) => isObjectProperty(p) && propKeyName(p) === "keyframes");
     if (kfParent) {
         kfParent.value = parseExpr(kfObjCode);
@@ -1856,6 +1875,25 @@ export function materializeKeyframesInScript(script, animationId, keyframes, eas
     return recast.print(loc.parsed.ast).code;
 }
 // ── Arc Path (motionPath) AST Mutations ──────────────────────────────────
+function numericXY(props) {
+    const x = props.x;
+    const y = props.y;
+    return typeof x === "number" && typeof y === "number" ? { x, y } : null;
+}
+function extractArcWaypoints(anim) {
+    const kfs = anim.keyframes?.keyframes ?? [];
+    const waypoints = kfs.map((kf) => numericXY(kf.properties)).filter((p) => p !== null);
+    if (waypoints.length >= 2)
+        return waypoints;
+    const px = anim.properties.x;
+    const py = anim.properties.y;
+    if (typeof px !== "number" && typeof py !== "number")
+        return waypoints;
+    return [
+        { x: 0, y: 0 },
+        { x: typeof px === "number" ? px : 0, y: typeof py === "number" ? py : 0 },
+    ];
+}
 function buildMotionPathObjectCode(config) {
     const { waypoints, segments, autoRotate } = config;
     const hasExplicitControlPoints = segments.some((s) => s.cp1 && s.cp2);
@@ -1935,25 +1973,7 @@ export function setArcPathInScript(script, animationId, config) {
         removeVarsKey(varsArg, "motionPath");
         return recast.print(loc.parsed.ast).code;
     }
-    // Extract x/y waypoints from keyframes or flat tween properties
-    const kfs = anim.keyframes?.keyframes ?? [];
-    const waypoints = [];
-    for (const kf of kfs) {
-        const x = typeof kf.properties.x === "number" ? kf.properties.x : undefined;
-        const y = typeof kf.properties.y === "number" ? kf.properties.y : undefined;
-        if (x !== undefined && y !== undefined)
-            waypoints.push({ x, y });
-    }
-    // For flat tweens with x/y in properties, synthesize start → end waypoints
-    if (waypoints.length < 2) {
-        const px = anim.properties.x;
-        const py = anim.properties.y;
-        if (typeof px === "number" || typeof py === "number") {
-            waypoints.length = 0;
-            waypoints.push({ x: 0, y: 0 });
-            waypoints.push({ x: typeof px === "number" ? px : 0, y: typeof py === "number" ? py : 0 });
-        }
-    }
+    const waypoints = extractArcWaypoints(anim);
     if (waypoints.length < 2)
         return script;
     // Build segments — use provided segments or create defaults
@@ -2003,15 +2023,7 @@ export function updateArcSegmentInScript(script, animationId, segmentIndex, upda
     if (segmentIndex < 0 || segmentIndex >= segments.length)
         return script;
     segments[segmentIndex] = { ...segments[segmentIndex], ...update };
-    // Rebuild the full motionPath with updated segments
-    const kfs = anim.keyframes?.keyframes ?? [];
-    const waypoints = [];
-    for (const kf of kfs) {
-        const x = typeof kf.properties.x === "number" ? kf.properties.x : undefined;
-        const y = typeof kf.properties.y === "number" ? kf.properties.y : undefined;
-        if (x !== undefined && y !== undefined)
-            waypoints.push({ x, y });
-    }
+    const waypoints = extractArcWaypoints(anim);
     if (waypoints.length < 2)
         return script;
     const motionPathCode = buildMotionPathObjectCode({
@@ -2043,11 +2055,7 @@ export function removeArcPathFromScript(script, animationId) {
  */
 // fallow-ignore-next-line complexity
 export function splitIntoPropertyGroups(script, animationId) {
-    let loc = locateAnimation(script, animationId);
-    if (!loc) {
-        const convertedId = animationId.replace(/-from-|-fromTo-/, "-to-");
-        loc = locateAnimation(script, convertedId);
-    }
+    let loc = locateAnimationWithFallback(script, animationId);
     if (!loc)
         return { script, ids: [animationId] };
     const anim = loc.target.animation;
@@ -2208,15 +2216,10 @@ export function unrollDynamicAnimations(script, animationId, elements) {
     // Build replacement code: individual tl.to() calls for each element
     const calls = [];
     for (const el of elements) {
-        const kfEntries = [];
-        for (const kf of sortedKeyframes(el.keyframes)) {
-            const propEntries = keyframePropsToCode(kf);
-            kfEntries.push(`${JSON.stringify(kf.percentage + "%")}: { ${propEntries.join(", ")} }`);
-        }
-        if (el.easeEach) {
-            kfEntries.push(`easeEach: ${JSON.stringify(el.easeEach)}`);
-        }
-        calls.push(`${loc.parsed.timelineVar}.to(${JSON.stringify(el.selector)}, { keyframes: { ${kfEntries.join(", ")} }, duration: ${duration}, ease: ${JSON.stringify(ease)} }, ${posCode});`);
+        const kfCode = buildKeyframeObjectCode(sortedKeyframes(el.keyframes), {
+            easeEach: el.easeEach,
+        });
+        calls.push(`${loc.parsed.timelineVar}.to(${JSON.stringify(el.selector)}, { keyframes: ${kfCode}, duration: ${duration}, ease: ${JSON.stringify(ease)} }, ${posCode});`);
     }
     const replacement = calls.join("\n  ");
     if (loopNode) {