@hyperframes/parsers 0.7.71 → 0.7.73

package/dist/gsapParser.js

@@ -91,18 +91,39 @@ var SUPPORTED_EASES = [
   "bounce.in",
   "bounce.out",
   "bounce.inOut",
+  "circ.inOut",
   "expo.in",
   "expo.out",
   "expo.inOut",
+  "elastic.out(1,0.3)",
+  "elastic.inOut(1,0.3)",
   "spring-gentle",
   "spring-bouncy",
   "spring-stiff",
   "spring-wobbly",
   "spring-heavy",
+  "hold",
   "steps(1)"
 ];
 
 // src/gsapSerialize.ts
+function mergePercentageKeyframes(keyframes) {
+  const byPercentage = /* @__PURE__ */ new Map();
+  for (const keyframe of keyframes) {
+    const existing = byPercentage.get(keyframe.percentage);
+    if (!existing) {
+      byPercentage.set(keyframe.percentage, {
+        ...keyframe,
+        properties: { ...keyframe.properties }
+      });
+      continue;
+    }
+    existing.properties = { ...existing.properties, ...keyframe.properties };
+    if (keyframe.ease !== void 0) existing.ease = keyframe.ease;
+    if (keyframe.auto !== void 0) existing.auto = keyframe.auto;
+  }
+  return [...byPercentage.values()].sort((a, b) => a.percentage - b.percentage);
+}
 function serializeGsapAnimations(animations, timelineVar = "tl", options) {
   const sorted = [...animations].sort((a, b) => {
     const aNum = a.resolvedStart ?? (typeof a.position === "number" ? a.position : Number.MAX_SAFE_INTEGER);
@@ -330,6 +351,61 @@ function resolveConversionProps(anim, resolvedFromValues) {
   return { fromProps: { ...anim.fromProperties ?? {} }, toProps };
 }
 
+// src/gsapObjectArrayTiming.ts
+var roundPercentage = (percentage) => Math.round(percentage * 10) / 10;
+var OBJECT_ARRAY_PERCENTAGE_TOLERANCE = 2;
+function getObjectArrayKeyframeTiming(durations) {
+  const hasAuthoredDuration = durations.some((duration) => duration !== void 0);
+  if (hasAuthoredDuration) {
+    if (!durations.every(
+      (duration) => typeof duration === "number" && Number.isFinite(duration) && duration > 0
+    )) {
+      return null;
+    }
+    const totalDuration = durations.reduce((sum, duration) => sum + duration, 0);
+    let cumulative = 0;
+    return {
+      percentages: durations.map((duration) => {
+        cumulative += duration;
+        return roundPercentage(cumulative / totalDuration * 100);
+      }),
+      totalDuration
+    };
+  }
+  const lastIndex = durations.length - 1;
+  return {
+    percentages: durations.map(
+      (_, index) => lastIndex > 0 ? roundPercentage(index / lastIndex * 100) : 0
+    )
+  };
+}
+function getCompatibleObjectArrayKeyframeTiming(durations, outerDuration) {
+  const timing = getObjectArrayKeyframeTiming(durations);
+  if (!timing) return null;
+  if (timing.totalDuration === void 0 || outerDuration === void 0) return timing;
+  if (typeof outerDuration === "number" && Math.abs(outerDuration - timing.totalDuration) <= Number.EPSILON) {
+    return timing;
+  }
+  return null;
+}
+function findObjectArrayKeyframeIndex(durations, percentage, options) {
+  if (!Number.isFinite(percentage) || percentage < 0 || percentage > 100) return null;
+  const timing = getObjectArrayKeyframeTiming(durations);
+  if (!timing) return null;
+  const { percentages } = timing;
+  let match = null;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < percentages.length; index++) {
+    const distance = Math.abs(percentages[index] - percentage);
+    if (distance < bestDistance) {
+      match = index;
+      bestDistance = distance;
+    }
+  }
+  const tolerance = options?.tolerance ?? OBJECT_ARRAY_PERCENTAGE_TOLERANCE;
+  return bestDistance <= tolerance || options?.fallbackToNearest ? match : null;
+}
+
 // src/springEase.ts
 var SPRING_PRESETS = [
   { name: "spring-gentle", label: "Gentle", mass: 1, stiffness: 100, damping: 15 },
@@ -776,6 +852,8 @@ function parsePercentageKeyframes(node, scope) {
       for (const [k, v] of Object.entries(record)) {
         if (k === "ease" && typeof v === "string") {
           kfEase = v;
+        } else if (k === "duration") {
+          continue;
         } else if (typeof v === "number" || typeof v === "string") {
           properties[k] = v;
         }
@@ -800,13 +878,13 @@ function computeKeyframesTotalDuration(varsNode, scope) {
     (p) => (p.key?.name ?? p.key?.value) === "keyframes"
   )?.value;
   if (!kfNode || kfNode.type !== "ArrayExpression") return void 0;
-  let total = 0;
+  const durations = [];
   for (const el of kfNode.elements ?? []) {
     if (!el || el.type !== "ObjectExpression") continue;
     const r = objectExpressionToRecord(el, scope);
-    if (typeof r.duration === "number") total += r.duration;
+    durations.push(r.duration);
   }
-  return total > 0 ? total : void 0;
+  return getObjectArrayKeyframeTiming(durations)?.totalDuration;
 }
 function parseObjectArrayKeyframes(node, scope) {
   const elements = node.elements ?? [];
@@ -820,7 +898,7 @@ function parseObjectArrayKeyframes(node, scope) {
     let duration;
     let ease;
     for (const [k, v] of Object.entries(record)) {
-      if (k === "duration" && typeof v === "number") {
+      if (k === "duration") {
         duration = v;
       } else if (k === "ease" && typeof v === "string") {
         ease = v;
@@ -830,30 +908,16 @@ function parseObjectArrayKeyframes(node, scope) {
     }
     raw.push({ properties, duration, ease });
   }
-  const totalDuration = raw.reduce((sum, r) => sum + (r.duration ?? 0), 0);
-  const keyframes = [];
-  if (totalDuration > 0) {
-    let cumulative = 0;
-    for (const entry of raw) {
-      cumulative += entry.duration ?? 0;
-      const percentage = Math.round(cumulative / totalDuration * 100);
-      keyframes.push({
-        percentage,
-        properties: entry.properties,
-        ...entry.ease ? { ease: entry.ease } : {}
-      });
-    }
-  } else {
-    for (let i = 0; i < raw.length; i++) {
-      const entry = raw[i];
-      const percentage = raw.length > 1 ? Math.round(i / (raw.length - 1) * 100) : 0;
-      keyframes.push({
-        percentage,
-        properties: entry.properties,
-        ...entry.ease ? { ease: entry.ease } : {}
-      });
-    }
-  }
+  const timing = getObjectArrayKeyframeTiming(raw.map((entry) => entry.duration));
+  if (!timing) return void 0;
+  const { percentages } = timing;
+  const keyframes = raw.map(
+    (entry, index) => ({
+      percentage: percentages[index],
+      properties: entry.properties,
+      ...entry.ease ? { ease: entry.ease } : {}
+    })
+  );
   return { format: "object-array", keyframes };
 }
 function parseSimpleArrayKeyframes(node, scope) {
@@ -1680,7 +1744,7 @@ function keyframePropsToCode(kf) {
   return Object.entries(kf.properties).map(([k, v]) => `${safeJsKey(k)}: ${serializeValue(v)}`);
 }
 function buildKeyframeObjectCode(keyframes, options) {
-  const entries = keyframes.map((kf) => {
+  const entries = mergePercentageKeyframes(keyframes).map((kf) => {
     const props = keyframePropsToCode(kf);
     if (kf.ease) props.push(`ease: ${JSON.stringify(kf.ease)}`);
     if (kf.auto) props.push(`_auto: 1`);
@@ -1719,6 +1783,17 @@ function buildKeyframeValueNode(properties, ease) {
   if (effectiveEase) entries.push(`ease: ${JSON.stringify(effectiveEase)}`);
   return parseExpr(`{ ${entries.join(", ")} }`);
 }
+function setObjectExpressionEase(node, ease) {
+  if (node?.type !== "ObjectExpression") return false;
+  const props = node.properties ?? [];
+  const easeIdx = props.findIndex(
+    (property) => isObjectProperty(property) && propKeyName(property) === "ease"
+  );
+  const easeNode = parseExpr(`({ ease: ${JSON.stringify(ease)} })`).properties[0];
+  if (easeIdx >= 0) props[easeIdx] = easeNode;
+  else props.push(easeNode);
+  return true;
+}
 function locateAnimation(script, animationId) {
   let parsed;
   try {
@@ -1765,7 +1840,7 @@ function findKeyframesObjectNode(varsArg) {
   const node = findPropertyNode(varsArg, "keyframes");
   return node?.type === "ObjectExpression" ? node : null;
 }
-function convertArrayKeyframesToObjectNode(varsArg) {
+function convertArrayKeyframesToObjectNode(varsArg, scope) {
   if (varsArg?.type !== "ObjectExpression") return null;
   const prop = (varsArg.properties ?? []).find(
     (p) => isObjectProperty(p) && propKeyName(p) === "keyframes"
@@ -1774,11 +1849,22 @@ function convertArrayKeyframesToObjectNode(varsArg) {
   const els = (prop.value.elements ?? []).filter(
     (e) => !!e && e.type === "ObjectExpression"
   );
-  const n = els.length;
-  if (n === 0) return null;
+  if (els.length === 0) return null;
+  const records = els.map((element) => objectExpressionToRecord(element, scope));
+  const outerDuration = objectExpressionToRecord(varsArg, scope).duration;
+  const timing = getCompatibleObjectArrayKeyframeTiming(
+    records.map((record) => record.duration),
+    outerDuration
+  );
+  if (!timing) return null;
+  if (timing.totalDuration !== void 0 && findPropertyNode(varsArg, "duration") === void 0) {
+    setVarsKey(varsArg, "duration", timing.totalDuration);
+  }
   const entries = els.map((el, i) => {
-    const pct = n > 1 ? Math.round(i / (n - 1) * 1e3) / 10 : 0;
-    return `${JSON.stringify(`${pct}%`)}: ${recast.print(el).code}`;
+    el.properties = (el.properties ?? []).filter(
+      (property) => !isObjectProperty(property) || propKeyName(property) !== "duration"
+    );
+    return `${JSON.stringify(`${timing.percentages[i]}%`)}: ${recast.print(el).code}`;
   });
   prop.value = parseExpr(`{ ${entries.join(", ")} }`);
   return prop.value;
@@ -1809,7 +1895,9 @@ function addKeyframeToScript(script, animationId, percentage, properties, ease,
   let loc = locateAnimationWithFallback(script, animationId);
   if (!loc) return script;
   let kfNode = findKeyframesObjectNode(loc.target.call.varsArg);
-  if (!kfNode) kfNode = convertArrayKeyframesToObjectNode(loc.target.call.varsArg);
+  if (!kfNode) {
+    kfNode = convertArrayKeyframesToObjectNode(loc.target.call.varsArg, loc.parsed.scope);
+  }
   if (!kfNode) {
     script = convertToKeyframesInScript(script, animationId);
     loc = locateAnimationWithFallback(script, animationId);
@@ -1894,19 +1982,12 @@ function removeKeyframeFromScript(script, animationId, percentage) {
     const elements = (arrVal.elements ?? []).filter(
       (e) => !!e && e.type === "ObjectExpression"
     );
-    const n = elements.length;
-    if (n === 0) return script;
-    let matchIdx = -1;
-    let bestDist = Number.POSITIVE_INFINITY;
-    for (let i = 0; i < n; i++) {
-      const pct = n > 1 ? i / (n - 1) * 100 : 0;
-      const dist = Math.abs(pct - percentage);
-      if (dist <= PCT_TOLERANCE && dist < bestDist) {
-        matchIdx = i;
-        bestDist = dist;
-      }
-    }
-    if (matchIdx === -1) return script;
+    if (elements.length === 0) return script;
+    const durations = elements.map(
+      (element) => objectExpressionToRecord(element, arrLoc.parsed.scope).duration
+    );
+    const matchIdx = findObjectArrayKeyframeIndex(durations, percentage);
+    if (matchIdx === null) return script;
     const remaining = elements.filter((_, i) => i !== matchIdx);
     if (remaining.length < 2) {
       const sole = remaining[0];
@@ -1935,18 +2016,17 @@ function removeKeyframeFromScript(script, animationId, percentage) {
 function moveKeyframeInScript(script, animationId, fromPercentage, toPercentage) {
   const loc = locateAnimationWithFallback(script, animationId);
   if (!loc) return script;
-  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg) ?? convertArrayKeyframesToObjectNode(loc.target.call.varsArg);
+  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg) ?? convertArrayKeyframesToObjectNode(loc.target.call.varsArg, loc.parsed.scope);
   if (!kfNode) return script;
   const match = findKeyframePropByPct(kfNode, fromPercentage);
   if (!match) return script;
   if (Math.abs(fromPercentage - toPercentage) < MOVE_NOOP_EPSILON_PCT) return script;
   const dest = findKeyframePropByPct(kfNode, toPercentage);
-  const collision = dest && dest.prop !== match.prop ? dest : null;
+  if (dest && dest.prop !== match.prop) return script;
   const movedValue = match.prop.value;
   const entries = [];
   for (const prop of filterPercentageProps(kfNode)) {
     if (prop === match.prop) continue;
-    if (collision && prop === collision.prop) continue;
     const pct = percentageFromKey(propKeyName(prop) ?? "");
     if (Number.isNaN(pct)) continue;
     entries.push({ pct, value: prop.value });
@@ -1963,7 +2043,7 @@ function moveKeyframeInScript(script, animationId, fromPercentage, toPercentage)
 function resizeKeyframedTweenInScript(script, animationId, newPosition, newDuration, pctRemap) {
   const loc = locateAnimationWithFallback(script, animationId);
   if (!loc) return script;
-  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg) ?? convertArrayKeyframesToObjectNode(loc.target.call.varsArg);
+  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg) ?? convertArrayKeyframesToObjectNode(loc.target.call.varsArg, loc.parsed.scope);
   if (!kfNode) return script;
   const seen = /* @__PURE__ */ new Set();
   for (const { from, to } of pctRemap) {
@@ -1972,7 +2052,12 @@ function resizeKeyframedTweenInScript(script, animationId, newPosition, newDurat
     seen.add(match.prop);
     match.prop.key = parseExpr(`{ ${JSON.stringify(`${to}%`)}: 0 }`).properties[0].key;
   }
-  applyUpdatesToCall(loc.target.call, { position: newPosition, duration: newDuration });
+  applyUpdatesToCall(loc.target.call, {
+    position: newPosition,
+    // Resizing is an explicit duration-authoring gesture. Promote GSAP's
+    // implicit default so the dragged window is the window that plays.
+    duration: newDuration
+  });
   return recast.print(loc.parsed.ast).code;
 }
 function updateKeyframeInScript(script, animationId, percentage, properties, ease) {
@@ -1982,41 +2067,63 @@ function updateKeyframeInScript(script, animationId, percentage, properties, eas
     const elements = (arrVal.elements ?? []).filter(
       (e) => !!e && e.type === "ObjectExpression"
     );
-    const n = elements.length;
-    if (n === 0) return script;
-    let matchIdx = -1;
-    let bestDist = Number.POSITIVE_INFINITY;
-    for (let i = 0; i < n; i++) {
-      const pct = n > 1 ? i / (n - 1) * 100 : 0;
-      const dist = Math.abs(pct - percentage);
-      if (dist <= PCT_TOLERANCE && dist < bestDist) {
-        matchIdx = i;
-        bestDist = dist;
-      }
-    }
-    if (matchIdx === -1) return script;
-    const realIdx = arrVal.elements.indexOf(elements[matchIdx]);
-    arrVal.elements[realIdx] = buildKeyframeValueNode(properties, ease);
+    if (elements.length === 0) return script;
+    const records = elements.map(
+      (element) => objectExpressionToRecord(element, arrLoc.parsed.scope)
+    );
+    const matchIdx = findObjectArrayKeyframeIndex(
+      records.map((record) => record.duration),
+      percentage,
+      { fallbackToNearest: true }
+    );
+    if (matchIdx === null) return script;
+    const matchEl = elements[matchIdx];
+    if (!matchEl) return script;
+    const realIdx = arrVal.elements.indexOf(matchEl);
+    if (Object.keys(properties).length === 0 && ease && setObjectExpressionEase(matchEl, ease)) {
+      return recast.print(arrLoc.parsed.ast).code;
+    }
+    const merged = {};
+    for (const [key, value] of Object.entries(records[matchIdx] ?? {})) {
+      if (typeof value === "number" || typeof value === "string") merged[key] = value;
+    }
+    Object.assign(merged, properties);
+    arrVal.elements[realIdx] = buildKeyframeValueNode(merged, ease);
     return recast.print(arrLoc.parsed.ast).code;
   }
+  if (arrLoc && !arrVal && arrLoc.target.animation.arcPath?.enabled) {
+    const propertyKeys = Object.keys(properties);
+    if (propertyKeys.some((key) => key !== "x" && key !== "y")) return script;
+    let next = script;
+    if (propertyKeys.length > 0) {
+      const waypoints = extractArcWaypoints(arrLoc.target.animation);
+      if (waypoints.length < 2) return script;
+      const pointIndex = Math.max(
+        0,
+        Math.min(waypoints.length - 1, Math.round(percentage / 100 * (waypoints.length - 1)))
+      );
+      const current = waypoints[pointIndex];
+      if (!current) return script;
+      const x = properties.x ?? current.x;
+      const y = properties.y ?? current.y;
+      if (typeof x !== "number" || typeof y !== "number") return script;
+      next = updateMotionPathPointInScript(next, animationId, pointIndex, { x, y });
+    }
+    if (ease !== void 0) {
+      const updated = locateAnimationWithFallback(next, animationId);
+      if (!updated) return script;
+      applyUpdatesToCall(updated.target.call, { ease });
+      next = recast.print(updated.parsed.ast).code;
+    }
+    return next;
+  }
   const ctx = locateKeyframeCtx(script, animationId, percentage);
   if (!ctx) return script;
   const { loc, kfNode } = ctx;
   const match = findKeyframePropByPct(kfNode, percentage);
   if (!match) return script;
   if (Object.keys(properties).length === 0 && ease) {
-    const existing2 = match.prop.value;
-    if (existing2?.type === "ObjectExpression") {
-      const props = existing2.properties ?? [];
-      const easeIdx = props.findIndex(
-        (p) => isObjectProperty(p) && propKeyName(p) === "ease"
-      );
-      const easeNode = parseExpr(`({ ease: ${JSON.stringify(ease)} })`).properties[0];
-      if (easeIdx >= 0) {
-        props[easeIdx] = easeNode;
-      } else {
-        props.push(easeNode);
-      }
+    if (setObjectExpressionEase(match.prop.value, ease)) {
       return recast.print(loc.parsed.ast).code;
     }
     return script;
@@ -2089,13 +2196,21 @@ function convertToKeyframesInScript(script, animationId, resolvedFromValues, set
 function removeAllKeyframesFromScript(script, animationId) {
   let loc = locateAnimationWithFallback(script, animationId);
   if (!loc) return script;
-  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg) ?? convertArrayKeyframesToObjectNode(loc.target.call.varsArg);
-  if (!kfNode) return script;
-  const kfEntries = filterPercentageProps(kfNode).map((p) => ({ pct: percentageFromKey(propKeyName(p)), prop: p })).filter((e) => !Number.isNaN(e.pct)).sort((a, b) => a.pct - b.pct);
-  if (kfEntries.length === 0) return script;
+  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg) ?? convertArrayKeyframesToObjectNode(loc.target.call.varsArg, loc.parsed.scope);
   const method = loc.target.call.method;
-  const collapseEntry = method === "from" ? kfEntries[0] : kfEntries[kfEntries.length - 1];
-  const record = objectExpressionToRecord(collapseEntry.prop.value, loc.parsed.scope);
+  let record;
+  if (kfNode) {
+    const kfEntries = filterPercentageProps(kfNode).map((p) => ({ pct: percentageFromKey(propKeyName(p)), prop: p })).filter((e) => !Number.isNaN(e.pct)).sort((a, b) => a.pct - b.pct);
+    if (kfEntries.length === 0) return script;
+    const collapseEntry = method === "from" ? kfEntries[0] : kfEntries[kfEntries.length - 1];
+    record = objectExpressionToRecord(collapseEntry.prop.value, loc.parsed.scope);
+  } else {
+    const synthetic = loc.target.animation.arcPath?.enabled ? loc.target.animation.keyframes?.keyframes : void 0;
+    if (!synthetic?.length) return script;
+    const sorted = [...synthetic].sort((a, b) => a.percentage - b.percentage);
+    record = (method === "from" ? sorted[0] : sorted[sorted.length - 1]).properties;
+    removeVarsKey(loc.target.call.varsArg, "motionPath");
+  }
   collapseKeyframesToFlat(loc.target.call.varsArg, record);
   removeVarsKey(loc.target.call.varsArg, "ease");
   setVarsKey(loc.target.call.varsArg, "duration", 0);