hyperframes 0.7.62 → 0.7.64

package/dist/cli.js

@@ -50,7 +50,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.7.62" : "0.0.0-dev";
+    VERSION = true ? "0.7.64" : "0.0.0-dev";
   }
 });
 
@@ -53939,9 +53939,9 @@ function getElementName(el) {
   return el.id || el.className?.toString().split(" ")[0] || "Element";
 }
 function getZIndex(el) {
-  const timing = readClipTiming(el);
-  if (timing.trackSource !== "default" && timing.trackSource !== "invalid") {
-    return timing.trackIndex;
+  const timing2 = readClipTiming(el);
+  if (timing2.trackSource !== "default" && timing2.trackSource !== "invalid") {
+    return timing2.trackIndex;
   }
   const style = el.style?.zIndex;
   if (style) return parseInt(style, 10) || 0;
@@ -54048,11 +54048,11 @@ function parseHtml(html) {
     const type = getElementType(el);
     if (!type) return;
     const ownId = el.id || el.getAttribute("data-hf-id");
-    const timing = readClipTiming(el, {
+    const timing2 = readClipTiming(el, {
       resolveReferenceEnd: (refId) => resolveEnd(refId, new Set(ownId ? [ownId] : []))
     });
-    const start = timing.start ?? 0;
-    const duration = timing.duration ?? 5;
+    const start = timing2.start ?? 0;
+    const duration = timing2.duration ?? 5;
     const id = el.getAttribute("data-hf-id") || el.id || `element-${++idCounter}`;
     const name = getElementName(el);
     const zIndex = getZIndex(el);
@@ -72708,10 +72708,10 @@ function collectCompositionIdScenes(ctx, seen, out) {
     const compositionId = readDecodedAttr(tag.raw, "data-composition-id");
     if (!compositionId || !isSceneLikeCompositionId(compositionId) || seen.has(compositionId))
       continue;
-    const timing = parseTiming(tag.raw);
-    if (!timing || timing.duration <= 0) continue;
+    const timing2 = parseTiming(tag.raw);
+    if (!timing2 || timing2.duration <= 0) continue;
     seen.add(compositionId);
-    out.push({ id: compositionId, ...timing });
+    out.push({ id: compositionId, ...timing2 });
   }
 }
 function extractScenesFromClips(ctx) {
@@ -75369,8 +75369,8 @@ ${other.raw}`)
       ({ tags }) => {
         const findings = [];
         for (const tag of tags) {
-          const timing = readTagTiming(tag.raw);
-          if (timing.diagnostics.some(({ code }) => code === "deprecated-layer")) {
+          const timing2 = readTagTiming(tag.raw);
+          if (timing2.diagnostics.some(({ code }) => code === "deprecated-layer")) {
             const elementId = readAttr(tag.raw, "id") || void 0;
             findings.push({
               code: "deprecated_data_layer",
@@ -75381,7 +75381,7 @@ ${other.raw}`)
               snippet: truncateSnippet(tag.raw)
             });
           }
-          if (timing.diagnostics.some(({ code }) => code === "deprecated-end")) {
+          if (timing2.diagnostics.some(({ code }) => code === "deprecated-end")) {
             const elementId = readAttr(tag.raw, "id") || void 0;
             findings.push({
               code: "deprecated_data_end",
@@ -75473,8 +75473,8 @@ ${other.raw}`)
         for (const tag of tags) {
           const trackStr = readAttr(tag.raw, COMPOSITION_ATTRIBUTES2.trackIndex);
           if (!trackStr) continue;
-          const timing = readTagTiming(tag.raw);
-          const { start, duration } = timing;
+          const timing2 = readTagTiming(tag.raw);
+          const { start, duration } = timing2;
           const track = trackStr;
           if (start == null || duration == null) continue;
           const clips = trackMap.get(track) || [];
@@ -77432,6 +77432,112 @@ var init_htmlBundler = __esm({
   }
 });
 
+// ../core/dist/compiler/htmlParityContract.js
+function finiteAttribute(element, name) {
+  const raw = element.getAttribute(name);
+  if (raw === null || raw.trim() === "")
+    return null;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+function timing(element) {
+  const start = finiteAttribute(element, "data-start") ?? 0;
+  const duration = finiteAttribute(element, "data-duration") ?? (() => {
+    const end = finiteAttribute(element, "data-end");
+    return end === null ? null : Math.max(0, end - start);
+  })();
+  return {
+    start,
+    duration,
+    trackIndex: finiteAttribute(element, "data-track-index") ?? finiteAttribute(element, "data-layer")
+  };
+}
+function normalizeJson(value) {
+  if (value === null)
+    return null;
+  try {
+    return JSON.stringify(canonicalizeJson(JSON.parse(value)));
+  } catch {
+    return value.trim();
+  }
+}
+function canonicalizeJson(value) {
+  if (Array.isArray(value))
+    return value.map(canonicalizeJson);
+  if (value === null || typeof value !== "object")
+    return value;
+  return Object.fromEntries(Object.entries(value).sort(([left], [right]) => left.localeCompare(right)).map(([key2, nested]) => [key2, canonicalizeJson(nested)]));
+}
+function styleSignatures(document2) {
+  return [...document2.querySelectorAll("style")].map((style) => style.textContent ?? "").flatMap((css) => css.match(/[^{}]+\{[^{}]*--parity-contract\s*:[^{}]+\}/g) ?? []).map((rule) => rule.replace(/\s+/g, " ").replace(/\s*([:;{},])\s*/g, "$1").trim()).sort();
+}
+function parityFontFamilies(html) {
+  const families = /* @__PURE__ */ new Set();
+  for (const match of html.matchAll(/font-family\s*:\s*([^;}]+)/gi)) {
+    for (const family of match[1].split(",")) {
+      const normalized2 = family.trim().replace(/^['"]|['"]$/g, "");
+      if (normalized2.startsWith("Parity"))
+        families.add(normalized2);
+    }
+  }
+  return [...families].sort();
+}
+function resources(document2) {
+  const resources2 = [];
+  for (const [index, element] of [
+    ...document2.querySelectorAll("[src], [href], [poster]")
+  ].entries()) {
+    for (const attribute2 of ["src", "href", "poster"]) {
+      const value = element.getAttribute(attribute2)?.trim();
+      if (!value)
+        continue;
+      if (element.tagName.toLowerCase() === "script" && /hyperframes|runtime/i.test(value))
+        continue;
+      resources2.push({
+        identity: element.getAttribute("data-hf-id") ?? element.getAttribute("id") ?? `${element.tagName.toLowerCase()}[${index}]`,
+        attribute: attribute2,
+        locality: /^https?:\/\//i.test(value) ? "remote" : "local"
+      });
+    }
+  }
+  return resources2.sort((left, right) => `${left.identity}:${left.attribute}`.localeCompare(`${right.identity}:${right.attribute}`));
+}
+function extractCompiledHtmlParityContract(html) {
+  const { document: document2 } = parseHTML(html);
+  const compositions = [...document2.querySelectorAll("[data-composition-id]")].map((element) => {
+    const resolved2 = timing(element);
+    return {
+      id: element.getAttribute("data-composition-id") ?? "",
+      originalId: element.getAttribute("data-hf-original-composition-id"),
+      ...resolved2,
+      width: finiteAttribute(element, "data-width"),
+      height: finiteAttribute(element, "data-height"),
+      variableValues: normalizeJson(element.getAttribute("data-variable-values"))
+    };
+  });
+  const timedElements = [
+    ...document2.querySelectorAll("[data-start], [data-duration], [data-end], [data-track-index], [data-layer]")
+  ].filter((element) => !element.hasAttribute("data-composition-id")).map((element, index) => ({
+    identity: element.getAttribute("data-hf-id") ?? element.getAttribute("id") ?? `${element.tagName.toLowerCase()}[${index}]`,
+    ...timing(element)
+  }));
+  return {
+    compositions,
+    timedElements,
+    authoredStyleSignatures: styleSignatures(document2),
+    parityFontFamilies: parityFontFamilies(html),
+    resources: resources(document2),
+    runtimeBootstrap: /__hyperframes|data-hyperframes-(?:preview-)?runtime/i.test(html),
+    variableBootstrap: /__hfVariables(?:ByComp)?/.test(html)
+  };
+}
+var init_htmlParityContract = __esm({
+  "../core/dist/compiler/htmlParityContract.js"() {
+    "use strict";
+    init_esm10();
+  }
+});
+
 // ../core/dist/compiler/index.js
 var compiler_exports = {};
 __export(compiler_exports, {
@@ -77447,6 +77553,7 @@ __export(compiler_exports, {
   compileHtml: () => compileHtml,
   compileTimingAttrs: () => compileTimingAttrs,
   emitRootCompositionVariableStyles: () => emitRootCompositionVariableStyles,
+  extractCompiledHtmlParityContract: () => extractCompiledHtmlParityContract,
   extractResolvedMedia: () => extractResolvedMedia,
   injectDurations: () => injectDurations,
   injectScriptsAtHeadStart: () => injectScriptsAtHeadStart,
@@ -77474,6 +77581,7 @@ var init_compiler = __esm({
     init_htmlCompiler();
     init_htmlBundler();
     init_getVariables();
+    init_htmlParityContract();
     init_htmlDocument();
     init_staticGuard();
     init_compositionScoping();
@@ -93616,8 +93724,8 @@ function probeElementInSource(source, target) {
   return el != null && isHTMLElement(el);
 }
 function resolveElementTiming(el) {
-  const timing = readClipTiming2(el);
-  return { start: timing.start ?? 0, duration: timing.duration ?? 0 };
+  const timing2 = readClipTiming2(el);
+  return { start: timing2.start ?? 0, duration: timing2.duration ?? 0 };
 }
 function setElementDuration(el, start, duration) {
   writeClipTiming2(el, {
@@ -93629,8 +93737,8 @@ function splitElementInHtml(source, target, splitTime, newId, fallbackTiming) {
   const { document: document2, wrappedFragment } = parseSourceDocument(source);
   const el = findTargetElement(document2, target);
   if (!el || !isHTMLElement(el)) return { html: source, matched: false, newId: null };
-  const timing = resolveElementTiming(el);
-  let { start, duration } = timing;
+  const timing2 = resolveElementTiming(el);
+  let { start, duration } = timing2;
   if (duration <= 0 && fallbackTiming && fallbackTiming.duration > 0) {
     start = fallbackTiming.start;
     duration = fallbackTiming.duration;
@@ -97659,6 +97767,72 @@ function updateArcSegmentInScript(script, animationId, segmentIndex, update2) {
   ms.overwrite(mpProp.value.start, mpProp.value.end, motionPathCode);
   return ms.toString();
 }
+function hasCubicSegments(segments) {
+  return segments.some((segment) => segment.cp1 != null || segment.cp2 != null);
+}
+function writeMotionPathValue(script, target, waypoints, segments, autoRotate) {
+  const motionPath = findPropertyNode22(target.call.varsArg, "motionPath");
+  if (!motionPath) return script;
+  const code = buildMotionPathObjectCode({ waypoints, segments, autoRotate });
+  const ms = new MagicString(script);
+  ms.overwrite(motionPath.value.start, motionPath.value.end, code);
+  return ms.toString();
+}
+function updateMotionPathPointInScript(script, animationId, pointIndex, point) {
+  const parsed = parseGsapScriptAcornForWrite3(script);
+  const target = parsed?.located.find((entry) => entry.id === animationId);
+  if (!target?.animation.arcPath?.enabled) return script;
+  const waypoints = extractArcWaypoints(target.animation);
+  if (waypoints.length < 2 || pointIndex < 0 || pointIndex >= waypoints.length) return script;
+  const next = waypoints.map((waypoint, index) => index === pointIndex ? { ...point } : waypoint);
+  return writeMotionPathValue(
+    script,
+    target,
+    next,
+    target.animation.arcPath.segments,
+    target.animation.arcPath.autoRotate
+  );
+}
+function addMotionPathPointInScript(script, animationId, index, point) {
+  const parsed = parseGsapScriptAcornForWrite3(script);
+  const target = parsed?.located.find((entry) => entry.id === animationId);
+  const arc = target?.animation.arcPath;
+  if (!target || !arc?.enabled || hasCubicSegments(arc.segments)) return script;
+  const waypoints = extractArcWaypoints(target.animation);
+  if (index < 1 || index > waypoints.length - 1) return script;
+  const segments = [...arc.segments];
+  waypoints.splice(index, 0, { ...point });
+  segments.splice(index - 1, 0, { curviness: segments[index - 1]?.curviness ?? 1 });
+  return writeMotionPathValue(script, target, waypoints, segments, arc.autoRotate);
+}
+function removeMotionPathPointInScript(script, animationId, index) {
+  const parsed = parseGsapScriptAcornForWrite3(script);
+  const target = parsed?.located.find((entry) => entry.id === animationId);
+  const arc = target?.animation.arcPath;
+  if (!target || !arc?.enabled || hasCubicSegments(arc.segments)) return script;
+  const waypoints = extractArcWaypoints(target.animation);
+  if (waypoints.length <= 2 || index < 0 || index >= waypoints.length) return script;
+  const segments = [...arc.segments];
+  waypoints.splice(index, 1);
+  segments.splice(Math.min(index, segments.length - 1), 1);
+  return writeMotionPathValue(script, target, waypoints, segments, arc.autoRotate);
+}
+function addMotionPathToScript(script, targetSelector, position, duration, point, ease = "power1.inOut") {
+  const motionPath = buildMotionPathObjectCode({
+    waypoints: [{ x: 0, y: 0 }, { ...point }],
+    segments: [{ curviness: 1 }],
+    autoRotate: false
+  });
+  const result = addAnimationToScript(script, {
+    targetSelector,
+    method: "to",
+    position,
+    duration,
+    ease,
+    properties: { motionPath: `__raw:${motionPath}` }
+  });
+  return { script: result.script, id: result.id || null };
+}
 function removeArcPathFromScript(script, animationId) {
   return setArcPathInScript(script, animationId, {
     enabled: false,
@@ -97697,6 +97871,56 @@ function insertInheritedStateSetInScript(script, selector, position, properties)
   }
   return ms.toString();
 }
+function isStudioHoldSet(animation) {
+  return animation.method === "set" && animation.properties.data === STUDIO_HOLD_MARKER;
+}
+function removeStudioHoldSets(script, parsed) {
+  const staleHolds = parsed.located.filter((entry) => isStudioHoldSet(entry.animation));
+  if (staleHolds.length === 0) return script;
+  const ms = new MagicString(script);
+  for (const hold of staleHolds) removeCallFromMagicString2(ms, hold.call, script);
+  return ms.toString();
+}
+function animationStart(animation) {
+  if (animation.resolvedStart !== void 0) return animation.resolvedStart;
+  return typeof animation.position === "number" ? animation.position : 0;
+}
+function positionProperties(properties) {
+  const position = {};
+  for (const [property, value] of Object.entries(properties)) {
+    if (classifyPropertyGroup4(property) === "position" && typeof value === "number") {
+      position[property] = value;
+    }
+  }
+  return position;
+}
+function positionHoldForAnimation(animation) {
+  if (!animation.keyframes) return null;
+  if (!(animationStart(animation) > 1e-3)) return null;
+  const first = [...animation.keyframes.keyframes].sort(
+    (left, right) => left.percentage - right.percentage
+  )[0];
+  if (!first) return null;
+  const position = positionProperties(first.properties);
+  return Object.keys(position).length > 0 ? position : null;
+}
+function syncPositionHoldsBeforeKeyframes(script) {
+  const parsed = parseGsapScriptAcornForWrite3(script);
+  if (!parsed) return script;
+  let result = removeStudioHoldSets(script, parsed);
+  const current2 = parseGsapScriptAcornForWrite3(result);
+  if (!current2) return result;
+  for (const entry of current2.located) {
+    const animation = entry.animation;
+    const position = positionHoldForAnimation(animation);
+    if (!position) continue;
+    result = insertInheritedStateSetInScript(result, animation.targetSelector, 0, {
+      ...position,
+      data: STUDIO_HOLD_MARKER
+    });
+  }
+  return result;
+}
 function computeForwardBaselines(matching, splitTime) {
   const before3 = [];
   const acc = {};
@@ -97981,7 +98205,7 @@ function unrollDynamicAnimations(script, animationId, elements) {
   }
   return ms.toString();
 }
-var PROPERTY_GROUPS4, PROP_TO_GROUP4, CSS_IDENTITY, GSAP_METHODS4, QUERY_METHODS3, ITERATION_METHODS3, SCOPE_NODE_TYPES3, CONST_NODES3, MATH_FNS3, MATH_CONSTS3, BUILTIN_VAR_KEYS3, DROPPED_VAR_KEYS3, EXTRAS_KEYS3, PERCENTAGE_KEY_RE3, GSAP_DEFAULT_DURATION3, NON_EDITABLE_PROP_KEYS, CSS_IDENTITY2, NON_EDITABLE_VAR_KEYS, PERCENTAGE_KEY_RE22, PCT_TOLERANCE, MOVE_NOOP_EPSILON_PCT, LITERAL_NODE_TYPES, REFUSE_UNROLL;
+var PROPERTY_GROUPS4, PROP_TO_GROUP4, CSS_IDENTITY, GSAP_METHODS4, QUERY_METHODS3, ITERATION_METHODS3, SCOPE_NODE_TYPES3, CONST_NODES3, MATH_FNS3, MATH_CONSTS3, BUILTIN_VAR_KEYS3, DROPPED_VAR_KEYS3, EXTRAS_KEYS3, PERCENTAGE_KEY_RE3, GSAP_DEFAULT_DURATION3, NON_EDITABLE_PROP_KEYS, CSS_IDENTITY2, NON_EDITABLE_VAR_KEYS, PERCENTAGE_KEY_RE22, PCT_TOLERANCE, MOVE_NOOP_EPSILON_PCT, LITERAL_NODE_TYPES, STUDIO_HOLD_MARKER, REFUSE_UNROLL;
 var init_gsapWriterAcorn = __esm({
   "../parsers/dist/gsapWriterAcorn.js"() {
     "use strict";
@@ -98076,6 +98300,7 @@ var init_gsapWriterAcorn = __esm({
     PCT_TOLERANCE = 2;
     MOVE_NOOP_EPSILON_PCT = 0.05;
     LITERAL_NODE_TYPES = /* @__PURE__ */ new Set(["Literal", "NumericLiteral", "StringLiteral"]);
+    STUDIO_HOLD_MARKER = "hf-hold";
     REFUSE_UNROLL = /* @__PURE__ */ Symbol("refuse-unroll");
   }
 });
@@ -98435,8 +98660,8 @@ __export(gsapParser_exports, {
   addAnimationToScript: () => addAnimationToScript2,
   addAnimationWithKeyframesToScript: () => addAnimationWithKeyframesToScript2,
   addKeyframeToScript: () => addKeyframeToScript2,
-  addMotionPathPointInScript: () => addMotionPathPointInScript,
-  addMotionPathToScript: () => addMotionPathToScript,
+  addMotionPathPointInScript: () => addMotionPathPointInScript2,
+  addMotionPathToScript: () => addMotionPathToScript2,
   classifyPropertyGroup: () => classifyPropertyGroup5,
   classifyTweenPropertyGroup: () => classifyTweenPropertyGroup4,
   convertToKeyframesInScript: () => convertToKeyframesInScript,
@@ -98444,7 +98669,7 @@ __export(gsapParser_exports, {
   generateSpringEaseData: () => generateSpringEaseData,
   getAnimationsForElementId: () => getAnimationsForElementId2,
   gsapAnimationsToKeyframes: () => gsapAnimationsToKeyframes2,
-  isStudioHoldSet: () => isStudioHoldSet,
+  isStudioHoldSet: () => isStudioHoldSet2,
   keyframesToGsapAnimations: () => keyframesToGsapAnimations2,
   materializeKeyframesInScript: () => materializeKeyframesInScript,
   moveKeyframeInScript: () => moveKeyframeInScript2,
@@ -98453,7 +98678,7 @@ __export(gsapParser_exports, {
   removeAnimationFromScript: () => removeAnimationFromScript3,
   removeArcPathFromScript: () => removeArcPathFromScript2,
   removeKeyframeFromScript: () => removeKeyframeFromScript2,
-  removeMotionPathPointInScript: () => removeMotionPathPointInScript,
+  removeMotionPathPointInScript: () => removeMotionPathPointInScript2,
   resizeKeyframedTweenInScript: () => resizeKeyframedTweenInScript2,
   scalePositionsInScript: () => scalePositionsInScript2,
   serializeGsapAnimations: () => serializeGsapAnimations2,
@@ -98461,12 +98686,12 @@ __export(gsapParser_exports, {
   shiftPositionsInScript: () => shiftPositionsInScript2,
   splitAnimationsInScript: () => splitAnimationsInScript2,
   splitIntoPropertyGroups: () => splitIntoPropertyGroups,
-  syncPositionHoldsBeforeKeyframes: () => syncPositionHoldsBeforeKeyframes,
+  syncPositionHoldsBeforeKeyframes: () => syncPositionHoldsBeforeKeyframes2,
   unrollDynamicAnimations: () => unrollDynamicAnimations2,
   updateAnimationInScript: () => updateAnimationInScript2,
   updateArcSegmentInScript: () => updateArcSegmentInScript2,
   updateKeyframeInScript: () => updateKeyframeInScript2,
-  updateMotionPathPointInScript: () => updateMotionPathPointInScript,
+  updateMotionPathPointInScript: () => updateMotionPathPointInScript2,
   validateCompositionGsap: () => validateCompositionGsap2
 });
 function classifyPropertyGroup5(prop2) {
@@ -99725,7 +99950,13 @@ function addAnimationToScript2(script, animation) {
   const id = `anim-${Date.now()}`;
   const statementCode = buildTweenStatementCode2(parsed.timelineVar, animation);
   const newStatement = parseScript(statementCode).program.body[0];
-  insertAfterAnchor(parsed, newStatement);
+  if (animation.method === "set" && animation.global) {
+    const timeline = findTimelineDeclarationPath(parsed.ast, parsed.timelineVar);
+    if (timeline) timeline.insertBefore(newStatement);
+    else insertAfterAnchor(parsed, newStatement);
+  } else {
+    insertAfterAnchor(parsed, newStatement);
+  }
   return { script: recast2.print(parsed.ast).code, id };
 }
 function addAnimationWithKeyframesToScript2(script, targetSelector, position, duration, keyframes, ease, easeEach) {
@@ -99854,10 +100085,10 @@ function insertInheritedStateSet(script, selector, position, properties) {
   }
   return recast2.print(parsed.ast).code;
 }
-function isStudioHoldSet(anim) {
-  return anim.method === "set" && anim.properties?.data === STUDIO_HOLD_MARKER;
+function isStudioHoldSet2(anim) {
+  return anim.method === "set" && anim.properties?.data === STUDIO_HOLD_MARKER2;
 }
-function syncPositionHoldsBeforeKeyframes(script) {
+function syncPositionHoldsBeforeKeyframes2(script) {
   let parsed;
   try {
     parsed = parseGsapScript(script);
@@ -99865,7 +100096,7 @@ function syncPositionHoldsBeforeKeyframes(script) {
     return script;
   }
   let result = script;
-  const staleHoldIds = parsed.animations.filter(isStudioHoldSet).map((a) => a.id);
+  const staleHoldIds = parsed.animations.filter(isStudioHoldSet2).map((a) => a.id);
   for (const id of staleHoldIds) result = removeAnimationFromScript3(result, id);
   let reparsed;
   try {
@@ -99886,7 +100117,7 @@ function syncPositionHoldsBeforeKeyframes(script) {
     if (Object.keys(posProps).length === 0) continue;
     result = insertInheritedStateSet(result, anim.targetSelector, 0, {
       ...posProps,
-      data: STUDIO_HOLD_MARKER
+      data: STUDIO_HOLD_MARKER2
     });
   }
   return result;
@@ -100591,7 +100822,7 @@ function updateArcSegmentInScript2(script, animationId, segmentIndex, update2) {
   }
   return recast2.print(loc.parsed.ast).code;
 }
-function updateMotionPathPointInScript(script, animationId, pointIndex, point) {
+function updateMotionPathPointInScript2(script, animationId, pointIndex, point) {
   const loc = locateAnimation(script, animationId);
   if (!loc) return script;
   const anim = loc.target.animation;
@@ -100615,10 +100846,10 @@ function updateMotionPathPointInScript(script, animationId, pointIndex, point) {
   }
   return recast2.print(loc.parsed.ast).code;
 }
-function hasCubicSegments(segments) {
+function hasCubicSegments2(segments) {
   return segments.some((s2) => s2.cp1 != null || s2.cp2 != null);
 }
-function writeMotionPathValue(loc, waypoints, segments, autoRotate) {
+function writeMotionPathValue2(loc, waypoints, segments, autoRotate) {
   const motionPathCode = buildMotionPathObjectCode2({ waypoints, segments, autoRotate });
   const varsArg = loc.target.call.varsArg;
   const existingProp = varsArg.properties.find(
@@ -100627,32 +100858,32 @@ function writeMotionPathValue(loc, waypoints, segments, autoRotate) {
   if (existingProp) existingProp.value = parseExpr(motionPathCode);
   return recast2.print(loc.parsed.ast).code;
 }
-function addMotionPathPointInScript(script, animationId, index, point) {
+function addMotionPathPointInScript2(script, animationId, index, point) {
   const loc = locateAnimation(script, animationId);
   if (!loc) return script;
   const anim = loc.target.animation;
-  if (!anim.arcPath?.enabled || hasCubicSegments(anim.arcPath.segments)) return script;
+  if (!anim.arcPath?.enabled || hasCubicSegments2(anim.arcPath.segments)) return script;
   const waypoints = extractArcWaypoints2(anim);
   if (index < 1 || index > waypoints.length - 1) return script;
   const segments = [...anim.arcPath.segments];
   waypoints.splice(index, 0, { x: point.x, y: point.y });
   const splitCurviness = segments[index - 1]?.curviness ?? 1;
   segments.splice(index - 1, 0, { curviness: splitCurviness });
-  return writeMotionPathValue(loc, waypoints, segments, anim.arcPath.autoRotate);
+  return writeMotionPathValue2(loc, waypoints, segments, anim.arcPath.autoRotate);
 }
-function removeMotionPathPointInScript(script, animationId, index) {
+function removeMotionPathPointInScript2(script, animationId, index) {
   const loc = locateAnimation(script, animationId);
   if (!loc) return script;
   const anim = loc.target.animation;
-  if (!anim.arcPath?.enabled || hasCubicSegments(anim.arcPath.segments)) return script;
+  if (!anim.arcPath?.enabled || hasCubicSegments2(anim.arcPath.segments)) return script;
   const waypoints = extractArcWaypoints2(anim);
   if (waypoints.length <= 2 || index < 0 || index >= waypoints.length) return script;
   const segments = [...anim.arcPath.segments];
   waypoints.splice(index, 1);
   segments.splice(Math.min(index, segments.length - 1), 1);
-  return writeMotionPathValue(loc, waypoints, segments, anim.arcPath.autoRotate);
+  return writeMotionPathValue2(loc, waypoints, segments, anim.arcPath.autoRotate);
 }
-function addMotionPathToScript(script, targetSelector, position, duration, point, ease = "power1.inOut") {
+function addMotionPathToScript2(script, targetSelector, position, duration, point, ease = "power1.inOut") {
   let parsed;
   try {
     parsed = parseGsapAst(script);
@@ -100839,7 +101070,7 @@ function unrollDynamicAnimations2(script, animationId, elements) {
   }
   return script;
 }
-var recast2, import_parser3, SUPPORTED_PROPS, PROPERTY_GROUPS5, PROP_TO_GROUP5, SUPPORTED_EASES, FORBIDDEN_GSAP_PATTERNS2, CSS_IDENTITY3, SPRING_PRESETS, GSAP_METHODS5, QUERY_METHODS4, ITERATION_METHODS4, SCOPE_NODE_TYPES4, BUILTIN_VAR_KEYS4, DROPPED_VAR_KEYS4, EXTRAS_KEYS4, PERCENTAGE_KEY_RE4, GSAP_DEFAULT_DURATION4, STUDIO_HOLD_MARKER, PCT_TOLERANCE2, MOVE_NOOP_EPSILON_PCT2, ANIM_ID_RE;
+var recast2, import_parser3, SUPPORTED_PROPS, PROPERTY_GROUPS5, PROP_TO_GROUP5, SUPPORTED_EASES, FORBIDDEN_GSAP_PATTERNS2, CSS_IDENTITY3, SPRING_PRESETS, GSAP_METHODS5, QUERY_METHODS4, ITERATION_METHODS4, SCOPE_NODE_TYPES4, BUILTIN_VAR_KEYS4, DROPPED_VAR_KEYS4, EXTRAS_KEYS4, PERCENTAGE_KEY_RE4, GSAP_DEFAULT_DURATION4, STUDIO_HOLD_MARKER2, PCT_TOLERANCE2, MOVE_NOOP_EPSILON_PCT2, ANIM_ID_RE;
 var init_gsapParser = __esm({
   "../parsers/dist/gsapParser.js"() {
     "use strict";
@@ -100985,7 +101216,7 @@ var init_gsapParser = __esm({
     ]);
     PERCENTAGE_KEY_RE4 = /^(\d+(?:\.\d+)?)%$/;
     GSAP_DEFAULT_DURATION4 = 0.5;
-    STUDIO_HOLD_MARKER = "hf-hold";
+    STUDIO_HOLD_MARKER2 = "hf-hold";
     PCT_TOLERANCE2 = 2;
     MOVE_NOOP_EPSILON_PCT2 = 0.05;
     ANIM_ID_RE = /^(.*)-(fromTo|from|to|set)-(\d+)-([a-z]+)$/;
@@ -101677,9 +101908,10 @@ function insertCompositionIntoSource(input2) {
   }
   return { html: document2.toString(), hostId, track, duration };
 }
-function isAcornGsapWriterEnabled() {
-  const val = process.env["STUDIO_SDK_CUTOVER_ENABLED"];
-  return val === "true" || val === "1";
+function resolveGsapWriter(env) {
+  const configured = env.HYPERFRAMES_GSAP_WRITER ?? "recast";
+  if (configured === "recast" || configured === "acorn") return configured;
+  throw new Error(`Invalid ${GSAP_WRITER_MIGRATION.flag}=${configured}; expected recast or acorn`);
 }
 async function loadGsapParser() {
   return Promise.resolve().then(() => (init_gsapParser(), gsapParser_exports));
@@ -102119,8 +102351,8 @@ function bakeVisibilityOnDelete(document2, anim) {
   } catch {
   }
 }
-async function executeGsapMutation(body, block, respond2) {
-  if (!isAcornGsapWriterEnabled()) {
+async function executeGsapMutation(body, block, respond2, writer) {
+  if (writer === "recast") {
     return executeGsapMutationRecast(body, block, respond2);
   }
   return executeGsapMutationAcorn(body, block, respond2);
@@ -102181,16 +102413,23 @@ async function applyGsapMutations(c3, res, mutations) {
   const initialScript = block.scriptText;
   const skippedSelectors = /* @__PURE__ */ new Set();
   const respond2 = (data2, status) => status ? c3.json(data2, status) : c3.json(data2);
+  let writer;
+  try {
+    writer = resolveGsapWriter({
+      HYPERFRAMES_GSAP_WRITER: process.env["HYPERFRAMES_GSAP_WRITER"]
+    });
+  } catch (error) {
+    return c3.json({ error: error instanceof Error ? error.message : String(error) }, 400);
+  }
   for (const mutation of mutations) {
-    const result = await executeGsapMutation(mutation, block, respond2);
+    const result = await executeGsapMutation(mutation, block, respond2, writer);
     if (result instanceof Response) return result;
     let newScript = typeof result === "string" ? result : result.script;
     if (typeof result !== "string") {
       for (const selector of result.skippedSelectors) skippedSelectors.add(selector);
     }
     if (HOLD_SYNC_MUTATION_TYPES.has(mutation.type)) {
-      const parser = await loadGsapParser();
-      newScript = parser.syncPositionHoldsBeforeKeyframes(newScript);
+      newScript = writer === "acorn" ? syncPositionHoldsBeforeKeyframes(newScript) : (await loadGsapParser()).syncPositionHoldsBeforeKeyframes(newScript);
     }
     block.scriptText = newScript;
   }
@@ -102269,6 +102508,12 @@ function executeGsapMutationAcorn(body, block, respond2) {
       if (body.fromProperties && body.method !== "fromTo") {
         return respond2({ error: "fromProperties is only valid for method=fromTo" }, 400);
       }
+      if (Object.keys(body.properties).some((key2) => {
+        const group = classifyPropertyGroup3(key2);
+        return group === "position" || group === "rotation";
+      })) {
+        stripStudioEditsFromTarget(block.document, body.targetSelector);
+      }
       const result = addAnimationToScript(block.scriptText, {
         targetSelector: body.targetSelector,
         method: body.method,
@@ -102406,10 +102651,38 @@ function executeGsapMutationAcorn(body, block, respond2) {
         ...body.cp2 ? { cp2: body.cp2 } : {}
       });
     }
+    case "update-motion-path-point": {
+      return updateMotionPathPointInScript(block.scriptText, body.animationId, body.pointIndex, {
+        x: body.x,
+        y: body.y
+      });
+    }
+    case "add-motion-path-point": {
+      return addMotionPathPointInScript(block.scriptText, body.animationId, body.index, {
+        x: body.x,
+        y: body.y
+      });
+    }
+    case "remove-motion-path-point": {
+      return removeMotionPathPointInScript(block.scriptText, body.animationId, body.index);
+    }
+    case "add-motion-path": {
+      return addMotionPathToScript(
+        block.scriptText,
+        body.targetSelector,
+        body.position,
+        body.duration,
+        { x: body.x, y: body.y },
+        body.ease
+      ).script;
+    }
     case "remove-arc-path": {
       return removeArcPathFromScript(block.scriptText, body.animationId);
     }
     case "add-with-keyframes": {
+      if (keyframesWritePosition(body.keyframes) || keyframesWriteRotation(body.keyframes)) {
+        stripStudioEditsFromTarget(block.document, body.targetSelector);
+      }
       const result = addAnimationWithKeyframesToScript(
         block.scriptText,
         body.targetSelector,
@@ -102422,6 +102695,9 @@ function executeGsapMutationAcorn(body, block, respond2) {
       return result.script;
     }
     case "replace-with-keyframes": {
+      if (keyframesWritePosition(body.keyframes) || keyframesWriteRotation(body.keyframes)) {
+        stripStudioEditsFromTarget(block.document, body.targetSelector);
+      }
       const script = removeAnimationFromScript2(block.scriptText, body.animationId);
       const added = addAnimationWithKeyframesToScript(
         script,
@@ -102505,10 +102781,10 @@ async function executeGsapMutationRecast(body, block, respond2) {
     unrollDynamicAnimations: unrollDynamicAnimations22,
     setArcPathInScript: setArcPathInScript22,
     updateArcSegmentInScript: updateArcSegmentInScript22,
-    updateMotionPathPointInScript: updateMotionPathPointInScript2,
-    addMotionPathPointInScript: addMotionPathPointInScript2,
-    removeMotionPathPointInScript: removeMotionPathPointInScript2,
-    addMotionPathToScript: addMotionPathToScript2,
+    updateMotionPathPointInScript: updateMotionPathPointInScript22,
+    addMotionPathPointInScript: addMotionPathPointInScript22,
+    removeMotionPathPointInScript: removeMotionPathPointInScript22,
+    addMotionPathToScript: addMotionPathToScript22,
     removeArcPathFromScript: removeArcPathFromScript22,
     addAnimationWithKeyframesToScript: addAnimationWithKeyframesToScript22,
     splitAnimationsInScript: splitAnimationsInScript22,
@@ -102705,22 +102981,22 @@ async function executeGsapMutationRecast(body, block, respond2) {
       });
     }
     case "update-motion-path-point": {
-      return updateMotionPathPointInScript2(block.scriptText, body.animationId, body.pointIndex, {
+      return updateMotionPathPointInScript22(block.scriptText, body.animationId, body.pointIndex, {
         x: body.x,
         y: body.y
       });
     }
     case "add-motion-path-point": {
-      return addMotionPathPointInScript2(block.scriptText, body.animationId, body.index, {
+      return addMotionPathPointInScript22(block.scriptText, body.animationId, body.index, {
         x: body.x,
         y: body.y
       });
     }
     case "remove-motion-path-point": {
-      return removeMotionPathPointInScript2(block.scriptText, body.animationId, body.index);
+      return removeMotionPathPointInScript22(block.scriptText, body.animationId, body.index);
     }
     case "add-motion-path": {
-      const result = addMotionPathToScript2(
+      const result = addMotionPathToScript22(
         block.scriptText,
         body.targetSelector,
         body.position,
@@ -102743,7 +103019,8 @@ async function executeGsapMutationRecast(body, block, respond2) {
         body.position,
         body.duration,
         body.keyframes,
-        body.ease
+        body.ease,
+        body.easeEach
       );
       return result.script;
     }
@@ -102820,7 +103097,7 @@ async function executeGsapMutationRecast(body, block, respond2) {
       return respond2({ error: `unknown mutation type: ${body.type}` }, 400);
   }
 }
-async function foldAtomicCutFile(c3, file, absPath, before3) {
+async function foldAtomicCutFile(c3, file, absPath, before3, writer) {
   let after2 = before3;
   let splitCount = 0;
   const skippedSelectors = /* @__PURE__ */ new Set();
@@ -102866,7 +103143,8 @@ async function foldAtomicCutFile(c3, file, absPath, before3) {
         elementDuration: cut.elementDuration
       },
       block,
-      respond2
+      respond2,
+      writer
     );
     if (result instanceof Response) return result;
     let script = typeof result === "string" ? result : result.script;
@@ -102874,8 +103152,7 @@ async function foldAtomicCutFile(c3, file, absPath, before3) {
       for (const selector of result.skippedSelectors) skippedSelectors.add(selector);
     }
     if (script !== block.scriptText) {
-      const parser = await loadGsapParser();
-      script = parser.syncPositionHoldsBeforeKeyframes(script);
+      script = writer === "acorn" ? syncPositionHoldsBeforeKeyframes(script) : (await loadGsapParser()).syncPositionHoldsBeforeKeyframes(script);
       after2 = block.replaceScript(script);
     }
   }
@@ -103165,6 +103442,14 @@ function registerFileRoutes(api, adapter2) {
     const files = body.files;
     const project = await adapter2.resolveProject(c3.req.param("id"));
     if (!project) return c3.json({ error: "not found" }, 404);
+    let writer;
+    try {
+      writer = resolveGsapWriter({
+        HYPERFRAMES_GSAP_WRITER: process.env["HYPERFRAMES_GSAP_WRITER"]
+      });
+    } catch (error) {
+      return c3.json({ error: error instanceof Error ? error.message : String(error) }, 400);
+    }
     return serializeAtomicCut(async () => {
       const seen = /* @__PURE__ */ new Set();
       const prepared = [];
@@ -103193,7 +103478,7 @@ function registerFileRoutes(api, adapter2) {
         }
         let folded;
         try {
-          folded = await foldAtomicCutFile(c3, file, absPath, before3);
+          folded = await foldAtomicCutFile(c3, file, absPath, before3, writer);
         } catch (error) {
           const message = error instanceof Error ? error.message : "Cut transform failed";
           return c3.json({ error: message }, 400);
@@ -105116,7 +105401,7 @@ function updateBackgroundRemovalProgress(state, event) {
   state.framesProcessed = event.index;
   state.avgMsPerFrame = event.avgMsPerFrame;
 }
-var IGNORE_DIRS, SIGNATURE_TEXT_EXTENSIONS, SIGNATURE_EXCLUDED_DIRS, MAX_SIGNATURE_TEXT_BYTES, STUDIO_SIGNATURE_MANIFEST_PATHS, projectSignatureCache, COMPOSITION_ID_RE, MIME_TYPES2, SAMPLE_RATE, PEAK_COUNT, WAVEFORM_CACHE_VERSION, VIDEO_EXT2, AUDIO_EXT2, DEFAULT_KEEP_PER_FILE, RECEIPT_TTL_MS, receipts, CompositionInsertionError, atomicCutTail, HOLD_SYNC_MUTATION_TYPES, REGEXP_SPECIALS, NON_RENDERED_TAGS, VARIABLES_PAYLOAD_ERROR, PROJECT_SIGNATURE_META, GSAP_CDN_VERSION, GSAP_CDN_SCRIPT, GSAP_CUSTOM_EASE_CDN_SCRIPT, GSAP_MOTION_PATH_CDN_SCRIPT, GSAP_CDN_FALLBACK_SCRIPT, VALID_RESOLUTIONS, THUMBNAIL_CACHE_VERSION, MAX_FONT_RESULTS, GOOGLE_FONTS_METADATA_URL, GOOGLE_FONTS_FETCH_TIMEOUT_MS, cachedFonts, cachedGoogleFonts, GOOGLE_FONT_FALLBACKS, VIDEO_EXTENSIONS2, IMAGE_EXTENSIONS, VIDEO_OUTPUT_EXTENSIONS, QUALITIES, DEVICES;
+var IGNORE_DIRS, SIGNATURE_TEXT_EXTENSIONS, SIGNATURE_EXCLUDED_DIRS, MAX_SIGNATURE_TEXT_BYTES, STUDIO_SIGNATURE_MANIFEST_PATHS, projectSignatureCache, COMPOSITION_ID_RE, MIME_TYPES2, SAMPLE_RATE, PEAK_COUNT, WAVEFORM_CACHE_VERSION, VIDEO_EXT2, AUDIO_EXT2, DEFAULT_KEEP_PER_FILE, RECEIPT_TTL_MS, receipts, CompositionInsertionError, differential, behavioral, GSAP_MUTATION_CAPABILITIES, GSAP_WRITER_MIGRATION, atomicCutTail, HOLD_SYNC_MUTATION_TYPES, REGEXP_SPECIALS, NON_RENDERED_TAGS, VARIABLES_PAYLOAD_ERROR, PROJECT_SIGNATURE_META, GSAP_CDN_VERSION, GSAP_CDN_SCRIPT, GSAP_CUSTOM_EASE_CDN_SCRIPT, GSAP_MOTION_PATH_CDN_SCRIPT, GSAP_CDN_FALLBACK_SCRIPT, VALID_RESOLUTIONS, THUMBNAIL_CACHE_VERSION, MAX_FONT_RESULTS, GOOGLE_FONTS_METADATA_URL, GOOGLE_FONTS_FETCH_TIMEOUT_MS, cachedFonts, cachedGoogleFonts, GOOGLE_FONT_FALLBACKS, VIDEO_EXTENSIONS2, IMAGE_EXTENSIONS, VIDEO_OUTPUT_EXTENSIONS, QUALITIES, DEVICES;
 var init_dist9 = __esm({
   "../studio-server/dist/index.js"() {
     "use strict";
@@ -105231,6 +105516,61 @@ var init_dist9 = __esm({
       }
       status;
     };
+    differential = (family) => ({
+      family,
+      acorn: "supported",
+      recast: "supported",
+      parity: "differential"
+    });
+    behavioral = (family) => ({
+      family,
+      acorn: "supported",
+      recast: "supported",
+      parity: "behavioral"
+    });
+    GSAP_MUTATION_CAPABILITIES = {
+      "update-property": differential("animation"),
+      "update-properties": differential("animation"),
+      "update-from-property": differential("animation"),
+      "update-meta": differential("animation"),
+      add: differential("animation"),
+      delete: differential("animation"),
+      "add-property": differential("animation"),
+      "add-from-property": differential("animation"),
+      "remove-property": differential("animation"),
+      "remove-from-property": differential("animation"),
+      "add-keyframe": differential("keyframe"),
+      "remove-keyframe": differential("keyframe"),
+      "move-keyframe": behavioral("keyframe"),
+      "resize-keyframed-tween": behavioral("keyframe"),
+      "update-keyframe": differential("keyframe"),
+      "convert-to-keyframes": behavioral("keyframe"),
+      "remove-all-keyframes": behavioral("keyframe"),
+      "materialize-keyframes": behavioral("keyframe"),
+      "set-arc-path": behavioral("motion_path"),
+      "update-arc-segment": behavioral("motion_path"),
+      "update-motion-path-point": differential("motion_path"),
+      "add-motion-path-point": differential("motion_path"),
+      "remove-motion-path-point": differential("motion_path"),
+      "add-motion-path": differential("motion_path"),
+      "remove-arc-path": behavioral("motion_path"),
+      "add-with-keyframes": behavioral("keyframe"),
+      "replace-with-keyframes": behavioral("keyframe"),
+      "split-animations": behavioral("structure"),
+      "split-into-property-groups": behavioral("structure"),
+      "delete-all-for-selector": behavioral("structure"),
+      "consolidate-position-writes": behavioral("structure"),
+      "unroll-timeline": behavioral("structure"),
+      "shift-positions": behavioral("timing"),
+      "shift-positions-batch": behavioral("timing"),
+      "scale-positions": behavioral("timing")
+    };
+    GSAP_WRITER_MIGRATION = Object.freeze({
+      flag: "HYPERFRAMES_GSAP_WRITER",
+      owner: "studio-foundations",
+      deadline: "2026-09-30",
+      graduationCriteria: "Every operation has differential parity, the Acorn path imports no Recast runtime, and canary divergence is zero for the agreed soak window."
+    });
     atomicCutTail = Promise.resolve();
     HOLD_SYNC_MUTATION_TYPES = /* @__PURE__ */ new Set([
       "add-keyframe",
@@ -137674,13 +138014,13 @@ function timelineDuration(page) {
       return d3;
     };
     const animationDurationSeconds = (animation) => {
-      const timing = animation.effect?.getTiming?.();
-      if (!timing) return 0;
-      const durationMs = Number(timing.duration);
-      const iterations = Number(timing.iterations ?? 1);
+      const timing2 = animation.effect?.getTiming?.();
+      if (!timing2) return 0;
+      const durationMs = Number(timing2.duration);
+      const iterations = Number(timing2.iterations ?? 1);
       if (!Number.isFinite(durationMs) || !Number.isFinite(iterations)) return 0;
-      const delayMs = Number(timing.delay ?? 0);
-      const endDelayMs = Number(timing.endDelay ?? 0);
+      const delayMs = Number(timing2.delay ?? 0);
+      const endDelayMs = Number(timing2.endDelay ?? 0);
       return finiteMsToSeconds(Math.max(0, delayMs) + durationMs * iterations + endDelayMs);
     };
     const waapiDuration = () => {
@@ -138332,9 +138672,9 @@ function fmtProps(props) {
   return Object.entries(props).filter(([k2]) => k2 !== "ease").map(([k2, v2]) => `${k2}:${v2}`).join(" ");
 }
 function printTween(t2) {
-  const timing = c.dim(`@${t2.start}s\u2192${t2.end}s (${t2.duration}s)`);
+  const timing2 = c.dim(`@${t2.start}s\u2192${t2.end}s (${t2.duration}s)`);
   const group = t2.group ? c.dim(` ${t2.group}`) : "";
-  console.log(`  ${c.accent(t2.target)}${group}  ${c.dim(t2.method)}/${t2.shape}  ${timing}`);
+  console.log(`  ${c.accent(t2.target)}${group}  ${c.dim(t2.method)}/${t2.shape}  ${timing2}`);
   if (t2.shape === "motionPath") {
     console.log(c.dim(`    motionPath arc (${t2.keyframes.length} stops)`));
   } else {