@hyperframes/parsers 0.7.70 → 0.7.72

package/dist/gsapWriterAcorn.d.ts

@@ -45,10 +45,9 @@ declare function removeKeyframeFromScript(script: string, animationId: string, p
 /**
  * Retime a keyframe: move the keyframe at `fromPercentage` to `toPercentage`,
  * PRESERVING its properties and per-keyframe ease (the Studio "Move to Playhead"
- * gesture). Re-sorts keyframes by percentage. If a keyframe already exists at
- * `toPercentage`, it is overwritten by the moved one (no duplicate). No-op when
- * the animation/keyframe isn't found, the tween has no object-form keyframes, or
- * the move resolves onto the same keyframe.
+ * gesture). Re-sorts keyframes by percentage. No-op when the animation/keyframe
+ * isn't found, the tween has no object-form keyframes, the move resolves onto the
+ * same keyframe, or the destination is occupied.
  */
 declare function moveKeyframeInScript(script: string, animationId: string, fromPercentage: number, toPercentage: number): string;
 /**

package/dist/gsapWriterAcorn.js

@@ -29,6 +29,23 @@ function classifyTweenPropertyGroup(properties) {
 }
 
 // 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 buildArcPath(coords, curviness, autoRotate, isCubic) {
   const first = coords[0];
   if (coords.length < 2 || !first) return void 0;
@@ -159,6 +176,61 @@ function readProvenance(node) {
   return node?.__hfProvenance;
 }
 
+// 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/gsapParserAcorn.ts
 var GSAP_METHODS = /* @__PURE__ */ new Set(["set", "to", "from", "fromTo"]);
 var QUERY_METHODS = /* @__PURE__ */ new Set(["querySelector", "querySelectorAll"]);
@@ -729,6 +801,8 @@ function parsePercentageKeyframes(node, scope, source) {
       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;
         }
@@ -753,13 +827,13 @@ function computeKeyframesTotalDuration(varsNode, scope, source) {
     (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, source);
-    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, source) {
   const elements = node.elements ?? [];
@@ -771,7 +845,7 @@ function parseObjectArrayKeyframes(node, scope, source) {
     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;
@@ -781,31 +855,13 @@ function parseObjectArrayKeyframes(node, scope, source) {
     }
     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];
-      if (!entry) continue;
-      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 keyframes = raw.map((entry, index) => ({
+    percentage: timing.percentages[index],
+    properties: entry.properties,
+    ...entry.ease ? { ease: entry.ease } : {}
+  }));
   return { format: "object-array", keyframes };
 }
 function parseSimpleArrayKeyframes(node, scope) {
@@ -1698,43 +1754,85 @@ function findKfPropByPct(kfNode, percentage) {
   }
   return best;
 }
+function updateMotionPathPosition(script, target, percentage, properties) {
+  const waypoints = extractArcWaypoints(target.animation);
+  if (waypoints.length < 2) return void 0;
+  const pointIndex = Math.max(
+    0,
+    Math.min(waypoints.length - 1, Math.round(percentage / 100 * (waypoints.length - 1)))
+  );
+  const current = waypoints[pointIndex];
+  if (!current) return void 0;
+  const x = properties.x ?? current.x;
+  const y = properties.y ?? current.y;
+  if (typeof x !== "number" || typeof y !== "number") return void 0;
+  return updateMotionPathPointInScript(script, target.id, pointIndex, { x, y });
+}
+function updateTweenEase(script, animationId, ease) {
+  const reparsed = parseGsapScriptAcornForWrite(script);
+  const target = reparsed?.located.find((entry) => entry.id === animationId);
+  if (!target) return void 0;
+  const ms = new MagicString(script);
+  upsertProp(ms, target.call.varsArg, "ease", ease);
+  return ms.toString();
+}
+function updateMotionPathKeyframe(script, target, percentage, properties, ease) {
+  if (!target.animation.arcPath?.enabled || !findPropertyNode2(target.call.varsArg, "motionPath")) {
+    return void 0;
+  }
+  const propertyKeys = Object.keys(properties);
+  if (propertyKeys.some((key) => key !== "x" && key !== "y")) return void 0;
+  const next = propertyKeys.length === 0 ? script : updateMotionPathPosition(script, target, percentage, properties);
+  if (next === void 0 || ease === void 0) return next;
+  return updateTweenEase(next, target.id, ease);
+}
+function updateObjectKeyframe(script, prop, properties, ease) {
+  const ms = new MagicString(script);
+  if (prop.value?.type === "ObjectExpression") {
+    for (const [key, value] of Object.entries(properties)) {
+      upsertProp(ms, prop.value, key, value);
+    }
+    if (ease !== void 0) upsertProp(ms, prop.value, "ease", ease);
+  } else {
+    const record = { ...properties };
+    if (ease) record.ease = ease;
+    ms.overwrite(prop.value.start, prop.value.end, recordToCode(record));
+  }
+  return ms.toString();
+}
 function updateKeyframeInScript(script, animationId, percentage, properties, ease) {
   const parsed = parseGsapScriptAcornForWrite(script);
   if (!parsed) return script;
   const target = parsed.located.find((l) => l.id === animationId);
   if (!target) return script;
   const kfPropNode = findPropertyNode2(target.call.varsArg, "keyframes");
-  if (!kfPropNode) return script;
+  if (!kfPropNode) {
+    return updateMotionPathKeyframe(script, target, percentage, properties, ease) ?? script;
+  }
   if (kfPropNode.value?.type === "ArrayExpression") {
     return updateArrayKeyframeByPct(script, kfPropNode.value, percentage, properties, ease);
   }
   if (kfPropNode.value?.type !== "ObjectExpression") return script;
   const match = findKfPropByPct(kfPropNode.value, percentage);
   if (!match) return script;
-  const ms = new MagicString(script);
-  if (match.prop.value?.type === "ObjectExpression") {
-    for (const [k, v] of Object.entries(properties)) {
-      upsertProp(ms, match.prop.value, k, v);
-    }
-    if (ease !== void 0) upsertProp(ms, match.prop.value, "ease", ease);
-  } else {
-    const record = { ...properties };
-    if (ease) record.ease = ease;
-    ms.overwrite(match.prop.value.start, match.prop.value.end, recordToCode(record));
-  }
-  return ms.toString();
+  return updateObjectKeyframe(script, match.prop, properties, ease);
 }
 function updateArrayKeyframeByPct(script, arrayNode, percentage, properties, ease) {
   const elements = (arrayNode.elements ?? []).filter(
     (el2) => !!el2 && el2.type === "ObjectExpression"
   );
-  const n = elements.length;
-  if (n === 0) return script;
-  const idx = n > 1 ? Math.round(percentage / 100 * (n - 1)) : 0;
-  const el = elements[Math.max(0, Math.min(n - 1, idx))];
+  if (elements.length === 0) return script;
+  const records = elements.map((element) => valueNodeToRecord(element, script));
+  const idx = findObjectArrayKeyframeIndex(
+    records.map((record) => record.duration),
+    percentage,
+    { fallbackToNearest: true }
+  );
+  if (idx === null) return script;
+  const el = elements[idx];
   if (!el) return script;
   const merged = {
-    ...valueNodeToRecord(el, script),
+    ...records[idx],
     ...properties
   };
   if (ease) merged.ease = ease;
@@ -1785,14 +1883,23 @@ function convertArrayKeyframesToObject(script, target) {
   const els = (kfPropNode.value.elements ?? []).filter(
     (el) => !!el && el.type === "ObjectExpression"
   );
-  const n = els.length;
-  if (n === 0) return script;
+  if (els.length === 0) return script;
+  const records = els.map((element) => valueNodeToRecord(element, script));
+  const outerDuration = valueNodeToRecord(target.call.varsArg, script).duration;
+  const timing = getCompatibleObjectArrayKeyframeTiming(
+    records.map((record) => record.duration),
+    outerDuration
+  );
+  if (!timing) return script;
   const entries = els.map((el, i) => {
-    const pct = n > 1 ? Math.round(i / (n - 1) * 1e3) / 10 : 0;
-    return `${JSON.stringify(`${pct}%`)}: ${script.slice(el.start, el.end)}`;
+    const { duration: _duration, ...record } = records[i];
+    return `${JSON.stringify(`${timing.percentages[i]}%`)}: ${recordToCode(record)}`;
   });
   const ms = new MagicString(script);
   ms.overwrite(kfPropNode.value.start, kfPropNode.value.end, `{ ${entries.join(", ")} }`);
+  if (timing.totalDuration !== void 0 && findPropertyNode2(target.call.varsArg, "duration") === void 0) {
+    upsertProp(ms, target.call.varsArg, "duration", timing.totalDuration);
+  }
   return ms.toString();
 }
 function ensureKeyframesNode(script, animationId) {
@@ -1877,25 +1984,17 @@ function collapseKeyframesToFlat(ms, varsNode, source, remainingRecord) {
   }
   ms.overwrite(varsNode.start, varsNode.end, `{ ${entries.join(", ")} }`);
 }
-function arrayKeyframePct(i, n) {
-  return n > 1 ? i / (n - 1) * 100 : 0;
-}
 function removeArrayKeyframe(ms, varsArg, arrNode, script, percentage) {
   const elements = (arrNode.elements ?? []).filter(
     (e) => !!e && e.type === "ObjectExpression"
   );
-  const n = elements.length;
-  if (n === 0) return false;
-  let matchIdx = -1;
-  let bestDist = Number.POSITIVE_INFINITY;
-  for (let i = 0; i < n; i++) {
-    const dist = Math.abs(arrayKeyframePct(i, n) - percentage);
-    if (dist <= PCT_TOLERANCE && dist < bestDist) {
-      matchIdx = i;
-      bestDist = dist;
-    }
-  }
-  if (matchIdx === -1) return false;
+  if (elements.length === 0) return false;
+  const records = elements.map((element) => valueNodeToRecord(element, script));
+  const matchIdx = findObjectArrayKeyframeIndex(
+    records.map((record) => record.duration),
+    percentage
+  );
+  if (matchIdx === null) return false;
   const remaining = elements.filter((_, i) => i !== matchIdx);
   if (remaining.length < 2) {
     const sole = remaining[0];
@@ -1941,11 +2040,10 @@ function moveKeyframeInScript(script, animationId, fromPercentage, toPercentage)
   if (!match) return src;
   if (Math.abs(fromPercentage - toPercentage) < MOVE_NOOP_EPSILON_PCT) return src;
   const dest = findKfPropByPct(kfNode, toPercentage);
-  const collision = dest && dest.prop !== match.prop ? dest : null;
+  if (dest && dest.prop !== match.prop) return script;
   const entries = [];
   for (const prop of percentagePropsOf(kfNode)) {
     if (prop === match.prop) continue;
-    if (collision && prop === collision.prop) continue;
     const pct = percentageFromKey(propKeyName2(prop) ?? "");
     if (Number.isNaN(pct)) continue;
     entries.push({ pct, record: valueNodeToRecord(prop.value, src) });
@@ -2085,7 +2183,7 @@ function convertToKeyframesFromScript(script, animationId, resolvedFromValues, s
   return ms.toString();
 }
 function buildKeyframeObjectCode(keyframes, easeEach) {
-  const entries = keyframes.map((kf) => {
+  const entries = mergePercentageKeyframes(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)}`);
     if (kf.auto) props.push(`_auto: 1`);