hyperframes 0.7.18 → 0.7.20

package/dist/cli.js

@@ -50,7 +50,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.7.18" : "0.0.0-dev";
+    VERSION = true ? "0.7.20" : "0.0.0-dev";
   }
 });
 
@@ -53193,20 +53193,23 @@ function findEnclosingExpressionStatement(ancestors) {
   }
   return null;
 }
-function removeAnimationFromScript(script, animationId) {
-  const parsed = parseGsapScriptAcornForWrite(script);
-  if (!parsed) return script;
-  const target = parsed.located.find((l) => l.id === animationId);
-  if (!target) return script;
-  const ms = new MagicString(script);
-  const N2 = target.call.node;
-  const exprStmt = findEnclosingExpressionStatement(target.call.ancestors);
+function removeCallFromMagicString(ms, call, script) {
+  const N2 = call.node;
+  const exprStmt = findEnclosingExpressionStatement(call.ancestors);
   if (N2.callee?.object?.type !== "CallExpression" && exprStmt?.expression === N2) {
     const end = exprStmt.end < script.length && script[exprStmt.end] === "\n" ? exprStmt.end + 1 : exprStmt.end;
     ms.remove(exprStmt.start, end);
   } else {
     ms.remove(N2.callee.object.end, N2.end);
   }
+}
+function removeAnimationFromScript(script, animationId) {
+  const parsed = parseGsapScriptAcornForWrite(script);
+  if (!parsed) return script;
+  const target = parsed.located.find((l) => l.id === animationId);
+  if (!target) return script;
+  const ms = new MagicString(script);
+  removeCallFromMagicString(ms, target.call, script);
   return ms.toString();
 }
 function getElementType(el) {
@@ -65564,13 +65567,15 @@ function findRootTag(source) {
 function readAttr(tagSource, attr2) {
   if (!tagSource) return null;
   const escaped = attr2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const match = tagSource.match(new RegExp(`\\b${escaped}\\s*=\\s*["']([^"']+)["']`, "i"));
+  const match = tagSource.match(new RegExp(`(?<![\\w-])${escaped}\\s*=\\s*["']([^"']+)["']`, "i"));
   return match?.[1] || null;
 }
 function readJsonAttr(tagSource, attr2) {
   if (!tagSource) return null;
   const escaped = attr2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const match = tagSource.match(new RegExp(`\\b${escaped}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, "i"));
+  const match = tagSource.match(
+    new RegExp(`(?<![\\w-])${escaped}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, "i")
+  );
   if (!match) return null;
   return match[1] ?? match[2] ?? null;
 }
@@ -79532,26 +79537,30 @@ function studioSelectionUrl(server) {
   return studioApiUrl(server, "selection");
 }
 function studioApiUrl(server, route) {
-  return `http://127.0.0.1:${server.port}/api/projects/${encodeURIComponent(server.projectName)}/${route}`;
+  const host = server.host ?? "127.0.0.1";
+  return `http://${host}:${server.port}/api/projects/${encodeURIComponent(server.projectName)}/${route}`;
 }
 async function findViteStudioServerForProject(normalizedProjectDir, fetchImpl, ports = VITE_STUDIO_DISCOVERY_PORTS) {
   for (const port of ports) {
-    try {
-      const response = await fetchImpl(`http://127.0.0.1:${port}/api/projects`);
-      if (!response.ok) continue;
-      const payload = await response.json();
-      const project = payload.projects?.find(
-        (candidate) => normalizePath(candidate.dir) === normalizedProjectDir
-      );
-      if (!project) continue;
-      return {
-        port,
-        projectName: project.id,
-        projectDir: project.dir,
-        version: "studio-dev",
-        pid: null
-      };
-    } catch {
+    for (const host of LOOPBACK_HOSTS) {
+      try {
+        const response = await fetchImpl(`http://${host}:${port}/api/projects`);
+        if (!response.ok) continue;
+        const payload = await response.json();
+        const project = payload.projects?.find(
+          (candidate) => normalizePath(candidate.dir) === normalizedProjectDir
+        );
+        if (!project) continue;
+        return {
+          port,
+          host,
+          projectName: project.id,
+          projectDir: project.dir,
+          version: "studio-dev",
+          pid: null
+        };
+      } catch {
+      }
     }
   }
   return null;
@@ -79572,7 +79581,7 @@ async function fetchStudioLint(server, fetchImpl = fetch) {
   }
   return await response.json();
 }
-var VITE_STUDIO_DISCOVERY_PORTS, AmbiguousPreviewServerError, PreviewServerPortMismatchError;
+var VITE_STUDIO_DISCOVERY_PORTS, AmbiguousPreviewServerError, PreviewServerPortMismatchError, LOOPBACK_HOSTS;
 var init_studioSelectionClient = __esm({
   "src/utils/studioSelectionClient.ts"() {
     "use strict";
@@ -79602,6 +79611,7 @@ var init_studioSelectionClient = __esm({
         this.ports = ports;
       }
     };
+    LOOPBACK_HOSTS = ["127.0.0.1", "[::1]"];
   }
 });
 
@@ -81315,19 +81325,37 @@ function addAnimationToScript(script, animation) {
   const newId = reParsed?.located[reParsed.located.length - 1]?.id ?? "";
   return { script: result, id: newId };
 }
+function removeCallFromMagicString2(ms, call, script) {
+  const N2 = call.node;
+  const exprStmt = findEnclosingExpressionStatement2(call.ancestors);
+  if (N2.callee?.object?.type !== "CallExpression" && exprStmt?.expression === N2) {
+    const end = exprStmt.end < script.length && script[exprStmt.end] === "\n" ? exprStmt.end + 1 : exprStmt.end;
+    ms.remove(exprStmt.start, end);
+  } else {
+    ms.remove(N2.callee.object.end, N2.end);
+  }
+}
 function removeAnimationFromScript2(script, animationId) {
   const parsed = parseGsapScriptAcornForWrite3(script);
   if (!parsed) return script;
   const target = parsed.located.find((l) => l.id === animationId);
   if (!target) return script;
   const ms = new MagicString(script);
-  const N2 = target.call.node;
-  const exprStmt = findEnclosingExpressionStatement2(target.call.ancestors);
-  if (N2.callee?.object?.type !== "CallExpression" && exprStmt?.expression === N2) {
-    const end = exprStmt.end < script.length && script[exprStmt.end] === "\n" ? exprStmt.end + 1 : exprStmt.end;
-    ms.remove(exprStmt.start, end);
-  } else {
-    ms.remove(N2.callee.object.end, N2.end);
+  removeCallFromMagicString2(ms, target.call, script);
+  return ms.toString();
+}
+function dedupePositionWritesInScript(script, selector, keepId) {
+  const parsed = parseGsapScriptAcornForWrite3(script);
+  if (!parsed) return script;
+  const posWrites = parsed.located.filter(
+    (l) => l.animation.targetSelector === selector && l.animation.propertyGroup === "position"
+  );
+  if (posWrites.length <= 1) return script;
+  const keeper = posWrites.find((l) => l.id === keepId) ?? posWrites[posWrites.length - 1];
+  const ms = new MagicString(script);
+  for (const l of posWrites) {
+    if (l === keeper) continue;
+    removeCallFromMagicString2(ms, l.call, script);
   }
   return ms.toString();
 }
@@ -81698,6 +81726,50 @@ function removeKeyframeFromScript(script, animationId, percentage) {
   removeProp(ms, match.prop, allProps);
   return ms.toString();
 }
+function moveKeyframeInScript(script, animationId, fromPercentage, toPercentage) {
+  const located = locateWithKeyframes(script, animationId);
+  if (!located) return script;
+  const { kfNode } = located;
+  const match = findKfPropByPct(kfNode, fromPercentage);
+  if (!match) return script;
+  if (Math.abs(fromPercentage - toPercentage) < MOVE_NOOP_EPSILON_PCT) return script;
+  const dest = findKfPropByPct(kfNode, toPercentage);
+  const collision = dest && dest.prop !== match.prop ? dest : null;
+  const entries2 = [];
+  for (const prop2 of percentagePropsOf(kfNode)) {
+    if (prop2 === match.prop) continue;
+    if (collision && prop2 === collision.prop) continue;
+    const pct = percentageFromKey(propKeyName22(prop2) ?? "");
+    if (Number.isNaN(pct)) continue;
+    entries2.push({ pct, record: valueNodeToRecord(prop2.value, script) });
+  }
+  entries2.push({ pct: toPercentage, record: valueNodeToRecord(match.prop.value, script) });
+  entries2.sort((a, b2) => a.pct - b2.pct);
+  const body = entries2.map((e3) => `${JSON.stringify(`${e3.pct}%`)}: ${recordToCode(e3.record)}`).join(", ");
+  const ms = new MagicString(script);
+  ms.overwrite(kfNode.start, kfNode.end, `{ ${body} }`);
+  return ms.toString();
+}
+function resizeKeyframedTweenInScript(script, animationId, newPosition, newDuration, pctRemap) {
+  const located = locateWithKeyframes(script, animationId);
+  if (!located) return script;
+  const { target, kfNode } = located;
+  const edits = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const { from, to } of pctRemap) {
+    const match = findKfPropByPct(kfNode, from);
+    if (!match || seen.has(match.prop.key)) continue;
+    seen.add(match.prop.key);
+    edits.push({ keyNode: match.prop.key, to });
+  }
+  const ms = new MagicString(script);
+  for (const { keyNode, to } of edits) {
+    ms.overwrite(keyNode.start, keyNode.end, JSON.stringify(`${to}%`));
+  }
+  overwritePosition(ms, target.call, newPosition);
+  upsertProp(ms, target.call.varsArg, "duration", newDuration);
+  return ms.toString();
+}
 function removeAllKeyframesFromScript(script, animationId) {
   const parsed = parseGsapScriptAcornForWrite3(script);
   if (!parsed) return script;
@@ -81714,6 +81786,14 @@ function removeAllKeyframesFromScript(script, animationId) {
     target.call,
     buildVarsObjectCode(buildCollapsedFlatVars(target.animation, collapse))
   );
+  if (target.animation.propertyGroup === "position") {
+    for (const l of parsed.located) {
+      if (l === target) continue;
+      if (l.animation.targetSelector === target.animation.targetSelector && l.animation.propertyGroup === "position") {
+        removeCallFromMagicString2(ms, l.call, script);
+      }
+    }
+  }
   return ms.toString();
 }
 function buildCollapsedFlatVars(animation, collapse) {
@@ -81721,11 +81801,11 @@ function buildCollapsedFlatVars(animation, collapse) {
   for (const [k2, v2] of Object.entries(collapse.properties)) {
     if (k2 !== "ease") flat[k2] = v2;
   }
-  if (animation.duration !== void 0) flat.duration = animation.duration;
-  if (animation.ease) flat.ease = animation.ease;
   for (const [k2, v2] of Object.entries(animation.extras ?? {})) {
     if (typeof v2 === "number" || typeof v2 === "string") flat[k2] = v2;
   }
+  flat.duration = 0;
+  flat.immediateRender = true;
   return flat;
 }
 function buildKeyframesVarsCode(animation, fromProps, toProps, varsNode, source, setDuration) {
@@ -82392,7 +82472,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, 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, LITERAL_NODE_TYPES, REFUSE_UNROLL;
+var PROPERTY_GROUPS4, PROP_TO_GROUP4, CSS_IDENTITY, GSAP_METHODS4, QUERY_METHODS3, ITERATION_METHODS3, SCOPE_NODE_TYPES3, 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 init_gsapWriterAcorn = __esm({
   "../parsers/dist/gsapWriterAcorn.js"() {
     "use strict";
@@ -82481,6 +82561,7 @@ var init_gsapWriterAcorn = __esm({
     ]);
     PERCENTAGE_KEY_RE22 = /^(\d+(?:\.\d+)?)%$/;
     PCT_TOLERANCE = 2;
+    MOVE_NOOP_EPSILON_PCT = 0.05;
     LITERAL_NODE_TYPES = /* @__PURE__ */ new Set(["Literal", "NumericLiteral", "StringLiteral"]);
     REFUSE_UNROLL = /* @__PURE__ */ Symbol("refuse-unroll");
   }
@@ -86657,18 +86738,21 @@ __export(gsapParser_exports, {
   classifyPropertyGroup: () => classifyPropertyGroup5,
   classifyTweenPropertyGroup: () => classifyTweenPropertyGroup4,
   convertToKeyframesInScript: () => convertToKeyframesInScript,
+  dedupePositionWritesInScript: () => dedupePositionWritesInScript2,
   generateSpringEaseData: () => generateSpringEaseData,
   getAnimationsForElementId: () => getAnimationsForElementId2,
   gsapAnimationsToKeyframes: () => gsapAnimationsToKeyframes2,
   isStudioHoldSet: () => isStudioHoldSet,
   keyframesToGsapAnimations: () => keyframesToGsapAnimations2,
   materializeKeyframesInScript: () => materializeKeyframesInScript,
+  moveKeyframeInScript: () => moveKeyframeInScript2,
   parseGsapScript: () => parseGsapScript,
   removeAllKeyframesFromScript: () => removeAllKeyframesFromScript2,
   removeAnimationFromScript: () => removeAnimationFromScript3,
   removeArcPathFromScript: () => removeArcPathFromScript2,
   removeKeyframeFromScript: () => removeKeyframeFromScript2,
   removeMotionPathPointInScript: () => removeMotionPathPointInScript,
+  resizeKeyframedTweenInScript: () => resizeKeyframedTweenInScript2,
   scalePositionsInScript: () => scalePositionsInScript2,
   serializeGsapAnimations: () => serializeGsapAnimations2,
   setArcPathInScript: () => setArcPathInScript2,
@@ -88004,9 +88088,13 @@ function removeAnimationFromScript3(script, animationId) {
     target = parsed.located.find((l) => l.id === convertedId);
   }
   if (!target) return script;
-  const node = target.call.node;
-  const stmtPath = findStatementPath(target.call.path);
-  if (!stmtPath) return script;
+  removeCallFromAst(target.call);
+  return recast2.print(parsed.ast).code;
+}
+function removeCallFromAst(call) {
+  const node = call.node;
+  const stmtPath = findStatementPath(call.path);
+  if (!stmtPath) return;
   const parentCall = findChainParentCall(stmtPath.node, node);
   if (parentCall) {
     parentCall.callee.object = node.callee.object;
@@ -88015,6 +88103,23 @@ function removeAnimationFromScript3(script, animationId) {
   } else {
     stmtPath.prune();
   }
+}
+function dedupePositionWritesInScript2(script, selector, keepId) {
+  let parsed;
+  try {
+    parsed = parseGsapAst(script);
+  } catch {
+    return script;
+  }
+  const posWrites = parsed.located.filter(
+    (l) => l.animation.targetSelector === selector && l.animation.propertyGroup === "position"
+  );
+  if (posWrites.length <= 1) return script;
+  const keeper = posWrites.find((l) => l.id === keepId) ?? posWrites[posWrites.length - 1];
+  for (const l of posWrites) {
+    if (l === keeper) continue;
+    removeCallFromAst(l.call);
+  }
   return recast2.print(parsed.ast).code;
 }
 function insertInheritedStateSet(script, selector, position, properties) {
@@ -88428,6 +88533,49 @@ function removeKeyframeFromScript2(script, animationId, percentage) {
   }
   return recast2.print(loc.parsed.ast).code;
 }
+function moveKeyframeInScript2(script, animationId, fromPercentage, toPercentage) {
+  const loc = locateAnimationWithFallback(script, animationId);
+  if (!loc) return script;
+  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg);
+  if (!kfNode) return script;
+  const match = findKeyframePropByPct(kfNode, fromPercentage);
+  if (!match) return script;
+  if (Math.abs(fromPercentage - toPercentage) < MOVE_NOOP_EPSILON_PCT2) return script;
+  const dest = findKeyframePropByPct(kfNode, toPercentage);
+  const collision = dest && dest.prop !== match.prop ? dest : null;
+  const movedValue = match.prop.value;
+  const entries2 = [];
+  for (const prop2 of filterPercentageProps(kfNode)) {
+    if (prop2 === match.prop) continue;
+    if (collision && prop2 === collision.prop) continue;
+    const pct = percentageFromKey2(propKeyName4(prop2) ?? "");
+    if (Number.isNaN(pct)) continue;
+    entries2.push({ pct, value: prop2.value });
+  }
+  entries2.push({ pct: toPercentage, value: movedValue });
+  entries2.sort((a, b2) => a.pct - b2.pct);
+  kfNode.properties = entries2.map((e3) => {
+    const p2 = parseExpr(`{ ${JSON.stringify(`${e3.pct}%`)}: {} }`).properties[0];
+    p2.value = e3.value;
+    return p2;
+  });
+  return recast2.print(loc.parsed.ast).code;
+}
+function resizeKeyframedTweenInScript2(script, animationId, newPosition, newDuration, pctRemap) {
+  const loc = locateAnimationWithFallback(script, animationId);
+  if (!loc) return script;
+  const kfNode = findKeyframesObjectNode(loc.target.call.varsArg);
+  if (!kfNode) return script;
+  const seen = /* @__PURE__ */ new Set();
+  for (const { from, to } of pctRemap) {
+    const match = findKeyframePropByPct(kfNode, from);
+    if (!match || seen.has(match.prop)) continue;
+    seen.add(match.prop);
+    match.prop.key = parseExpr(`{ ${JSON.stringify(`${to}%`)}: 0 }`).properties[0].key;
+  }
+  applyUpdatesToCall(loc.target.call, { position: newPosition, duration: newDuration });
+  return recast2.print(loc.parsed.ast).code;
+}
 function updateKeyframeInScript2(script, animationId, percentage, properties, ease) {
   const arrLoc = locateAnimationWithFallback(script, animationId);
   const arrVal = arrLoc && findPropertyNode4(arrLoc.target.call.varsArg, "keyframes");
@@ -88550,6 +88698,17 @@ function removeAllKeyframesFromScript2(script, animationId) {
   const collapseEntry = method === "from" ? kfEntries[0] : kfEntries[kfEntries.length - 1];
   const record = objectExpressionToRecord4(collapseEntry.prop.value, loc.parsed.scope);
   collapseKeyframesToFlat2(loc.target.call.varsArg, record);
+  removeVarsKey(loc.target.call.varsArg, "ease");
+  setVarsKey(loc.target.call.varsArg, "duration", 0);
+  setVarsKey(loc.target.call.varsArg, "immediateRender", true);
+  if (loc.target.animation.propertyGroup === "position") {
+    for (const l of loc.parsed.located) {
+      if (l === loc.target) continue;
+      if (l.animation.targetSelector === loc.target.animation.targetSelector && l.animation.propertyGroup === "position") {
+        removeCallFromAst(l.call);
+      }
+    }
+  }
   return recast2.print(loc.parsed.ast).code;
 }
 function materializeKeyframesInScript(script, animationId, keyframes, easeEach, resolvedSelector) {
@@ -88971,7 +89130,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, 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_MARKER, PCT_TOLERANCE2, MOVE_NOOP_EPSILON_PCT2, ANIM_ID_RE;
 var init_gsapParser = __esm({
   "../parsers/dist/gsapParser.js"() {
     "use strict";
@@ -89119,6 +89278,7 @@ var init_gsapParser = __esm({
     GSAP_DEFAULT_DURATION4 = 0.5;
     STUDIO_HOLD_MARKER = "hf-hold";
     PCT_TOLERANCE2 = 2;
+    MOVE_NOOP_EPSILON_PCT2 = 0.05;
     ANIM_ID_RE = /^(.*)-(fromTo|from|to|set)-(\d+)-([a-z]+)$/;
   }
 });
@@ -90276,6 +90436,14 @@ function executeGsapMutationAcorn(body, block, respond2) {
       }
       return script;
     }
+    case "consolidate-position-writes": {
+      if (!body.targetSelector) return block.scriptText;
+      return dedupePositionWritesInScript(
+        block.scriptText,
+        body.targetSelector,
+        body.keepAnimationId
+      );
+    }
     case "remove-property": {
       const r2 = requireAnimation(block.scriptText, body.animationId);
       if ("err" in r2) return r2.err;
@@ -90307,6 +90475,23 @@ function executeGsapMutationAcorn(body, block, respond2) {
     case "remove-keyframe": {
       return removeKeyframeFromScript(block.scriptText, body.animationId, body.percentage);
     }
+    case "move-keyframe": {
+      return moveKeyframeInScript(
+        block.scriptText,
+        body.animationId,
+        body.fromPercentage,
+        body.toPercentage
+      );
+    }
+    case "resize-keyframed-tween": {
+      return resizeKeyframedTweenInScript(
+        block.scriptText,
+        body.animationId,
+        body.position,
+        body.duration,
+        body.pctRemap
+      );
+    }
     case "update-keyframe": {
       return updateKeyframeInScript(
         block.scriptText,
@@ -90439,6 +90624,8 @@ async function executeGsapMutationRecast(body, block, respond2) {
     removeAnimationFromScript: removeAnimationFromScript22,
     addKeyframeToScript: addKeyframeToScript22,
     removeKeyframeFromScript: removeKeyframeFromScript22,
+    moveKeyframeInScript: moveKeyframeInScript22,
+    resizeKeyframedTweenInScript: resizeKeyframedTweenInScript22,
     updateKeyframeInScript: updateKeyframeInScript22,
     convertToKeyframesInScript: convertToKeyframesInScript2,
     removeAllKeyframesFromScript: removeAllKeyframesFromScript22,
@@ -90453,7 +90640,8 @@ async function executeGsapMutationRecast(body, block, respond2) {
     removeArcPathFromScript: removeArcPathFromScript22,
     addAnimationWithKeyframesToScript: addAnimationWithKeyframesToScript22,
     splitAnimationsInScript: splitAnimationsInScript22,
-    splitIntoPropertyGroups: splitIntoPropertyGroups2
+    splitIntoPropertyGroups: splitIntoPropertyGroups2,
+    dedupePositionWritesInScript: dedupePositionWritesInScript22
   } = parser;
   function requireAnimation(scriptText, animationId) {
     const parsed = parseGsapScriptAcorn2(scriptText);
@@ -90538,6 +90726,14 @@ async function executeGsapMutationRecast(body, block, respond2) {
       }
       return script;
     }
+    case "consolidate-position-writes": {
+      if (!body.targetSelector) return block.scriptText;
+      return dedupePositionWritesInScript22(
+        block.scriptText,
+        body.targetSelector,
+        body.keepAnimationId
+      );
+    }
     case "remove-property": {
       const r2 = requireAnimation(block.scriptText, body.animationId);
       if ("err" in r2) return r2.err;
@@ -90569,6 +90765,23 @@ async function executeGsapMutationRecast(body, block, respond2) {
     case "remove-keyframe": {
       return removeKeyframeFromScript22(block.scriptText, body.animationId, body.percentage);
     }
+    case "move-keyframe": {
+      return moveKeyframeInScript22(
+        block.scriptText,
+        body.animationId,
+        body.fromPercentage,
+        body.toPercentage
+      );
+    }
+    case "resize-keyframed-tween": {
+      return resizeKeyframedTweenInScript22(
+        block.scriptText,
+        body.animationId,
+        body.position,
+        body.duration,
+        body.pctRemap
+      );
+    }
     case "update-keyframe": {
       return updateKeyframeInScript22(
         block.scriptText,
@@ -92751,11 +92964,13 @@ function registerThumbnailRoutes(api, adapter2) {
     let compW = vpWidth || 1920;
     let compH = vpHeight || 1080;
     let sourceMtime = 0;
-    if (!vpWidth) {
-      const htmlFile = join112(project.dir, compPath);
-      if (existsSync72(htmlFile)) {
-        sourceMtime = Math.round(statSync42(htmlFile).mtimeMs);
-        const html = readFileSync102(htmlFile, "utf-8");
+    let sourceKey = "";
+    const htmlFile = join112(project.dir, compPath);
+    if (existsSync72(htmlFile)) {
+      const html = readFileSync102(htmlFile, "utf-8");
+      sourceKey = `_${createHash22("sha1").update(html).digest("hex").slice(0, 16)}`;
+      sourceMtime = Math.round(statSync42(htmlFile).mtimeMs);
+      if (!vpWidth) {
         const wMatch = html.match(/data-width=["'](\d+)["']/);
         const hMatch = html.match(/data-height=["'](\d+)["']/);
         if (wMatch?.[1]) compW = parseInt(wMatch[1]);
@@ -92780,11 +92995,11 @@ function registerThumbnailRoutes(api, adapter2) {
     const cacheDir = join112(project.dir, ".thumbnails");
     const selectorKey = selector ? `_${selector.replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 80)}_${selectorIndex ?? 0}` : "";
     const urlVersionKey = urlVersion ? `_${urlVersion.replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 32)}` : "";
-    const cacheKey = `${THUMBNAIL_CACHE_VERSION}${urlVersionKey}${manualEditsKey}${motionKey}_${format}_${compPath.replace(/\//g, "_")}_${compW}x${compH}_${sourceMtime}_${seekTime.toFixed(2)}${selectorKey}.${format === "png" ? "png" : "jpg"}`;
+    const cacheKey = `${THUMBNAIL_CACHE_VERSION}${urlVersionKey}${manualEditsKey}${motionKey}${sourceKey}_${format}_${compPath.replace(/\//g, "_")}_${compW}x${compH}_${sourceMtime}_${seekTime.toFixed(2)}${selectorKey}.${format === "png" ? "png" : "jpg"}`;
     const cachePath2 = join112(cacheDir, cacheKey);
     if (existsSync72(cachePath2)) {
       return new Response(new Uint8Array(readFileSync102(cachePath2)), {
-        headers: { "Content-Type": contentType, "Cache-Control": "public, max-age=60" }
+        headers: { "Content-Type": contentType, "Cache-Control": "no-cache" }
       });
     }
     try {
@@ -92808,7 +93023,7 @@ function registerThumbnailRoutes(api, adapter2) {
       if (!existsSync72(cacheDir)) mkdirSync52(cacheDir, { recursive: true });
       writeFileSync62(cachePath2, buffer);
       return new Response(new Uint8Array(buffer), {
-        headers: { "Content-Type": contentType, "Cache-Control": "public, max-age=60" }
+        headers: { "Content-Type": contentType, "Cache-Control": "no-cache" }
       });
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
@@ -93172,6 +93387,8 @@ var init_dist9 = __esm({
       "add-keyframe",
       "update-keyframe",
       "remove-keyframe",
+      "move-keyframe",
+      "resize-keyframed-tween",
       "remove-all-keyframes",
       "add-with-keyframes",
       "replace-with-keyframes",
@@ -98906,6 +99123,17 @@ var init_captureStageError = __esm({
   }
 });
 
+// ../producer/src/services/render/captureBeyondViewport.ts
+function resolveVideoCaptureBeyondViewport(videoCount, browserGpuMode) {
+  if (videoCount <= 0) return void 0;
+  return browserGpuMode === "hardware";
+}
+var init_captureBeyondViewport = __esm({
+  "../producer/src/services/render/captureBeyondViewport.ts"() {
+    "use strict";
+  }
+});
+
 // ../producer/src/services/render/captureCost.ts
 import { join as join34 } from "path";
 function estimateCaptureCostMultiplier(compiled) {
@@ -100547,6 +100775,18 @@ function rewriteUnresolvableGsapToCdn(html, projectDir) {
     }
   );
 }
+function assignMissingMediaIds(html) {
+  const { document: document2 } = parseHTML(html);
+  const media = document2.querySelectorAll("video[data-start], audio[data-start]");
+  let seq = 0;
+  let changed = false;
+  for (const el of Array.from(media)) {
+    if (el.getAttribute("id")) continue;
+    el.setAttribute("id", `hf-media-${seq++}`);
+    changed = true;
+  }
+  return changed ? document2.toString() : html;
+}
 async function compileForRender(projectDir, htmlPath, downloadDir, options = {}) {
   const rawHtml = rewriteUnresolvableGsapToCdn(readFileSync23(htmlPath, "utf-8"), projectDir);
   const { html: compiledHtml, unresolvedCompositions } = await compileHtmlFile(
@@ -100612,7 +100852,11 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
     defaultLogger.info(`[Compiler] Prepared ${preparedGifs.length} animated GIF input(s) as WebM`);
   }
   const embeddedHtml = await embedLocalFontFaces(htmlWithPreparedGifs, projectDir);
-  const { html, externalAssets } = collectExternalAssets(embeddedHtml, projectDir);
+  const { html: htmlBeforeMediaIds, externalAssets } = collectExternalAssets(
+    embeddedHtml,
+    projectDir
+  );
+  const html = assignMissingMediaIds(htmlBeforeMediaIds);
   for (const [relPath, absPath] of remoteMediaAssets) {
     externalAssets.set(relPath, absPath);
   }
@@ -104681,6 +104925,15 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     }
     const framesDir = join49(workDir, "captured-frames");
     if (!existsSync43(framesDir)) mkdirSync23(framesDir, { recursive: true });
+    const resolvedBrowserGpuMode = await resolveBrowserGpuMode(cfg.browserGpuMode, {
+      chromePath: resolveHeadlessShellPath(cfg),
+      browserTimeout: cfg.browserTimeout
+    });
+    updateCaptureObservability({ browserGpuMode: resolvedBrowserGpuMode });
+    const videoCaptureBeyondViewport = resolveVideoCaptureBeyondViewport(
+      composition.videos.length,
+      resolvedBrowserGpuMode
+    );
     const captureOptions = {
       width,
       height,
@@ -104689,7 +104942,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       quality: needsAlpha ? void 0 : job.config.quality === "draft" ? 80 : 95,
       variables: job.config.variables,
       deviceScaleFactor,
-      ...composition.videos.length > 0 ? { captureBeyondViewport: true } : {}
+      ...videoCaptureBeyondViewport !== void 0 ? { captureBeyondViewport: videoCaptureBeyondViewport } : {}
     };
     resolvedCaptureBeyondViewport = captureOptions.captureBeyondViewport ?? resolvedCaptureBeyondViewport;
     if (resolvedCaptureBeyondViewport !== void 0) {
@@ -105210,6 +105463,7 @@ var init_renderOrchestrator = __esm({
     init_hdrMode();
     init_perfSummary();
     init_captureStageError();
+    init_captureBeyondViewport();
     init_captureCost();
     init_observability();
     init_compileStage();
@@ -107045,6 +107299,10 @@ async function renderChunk(planDir, chunkIndex, outputChunkPath) {
         rebuildExtractedFramesFromPlanDir(planDir, planVideos.extracted)
       )
     ) : null;
+    const videoCaptureBeyondViewport = resolveVideoCaptureBeyondViewport(
+      planVideos?.videos.length ?? 0,
+      "software"
+    );
     const workDir = `${outputChunkPath}.work.${process.pid}.${randomBytes2(4).toString("hex")}`;
     mkdirSync27(workDir, { recursive: true });
     const framesDir = join57(workDir, "captured-frames");
@@ -107071,7 +107329,7 @@ async function renderChunk(planDir, chunkIndex, outputChunkPath) {
       // declare `data-composition-variables` leave this undefined and the
       // engine skips the `evaluateOnNewDocument` injection.
       variables: encoder.variables,
-      ...(planVideos?.videos.length ?? 0) > 0 ? { captureBeyondViewport: true } : {},
+      ...videoCaptureBeyondViewport !== void 0 ? { captureBeyondViewport: videoCaptureBeyondViewport } : {},
       // lock the BeginFrame warmup loop to a fixed iteration count so
       // `beginFrameTimeTicks` is host-independent. Only chunks ever set this.
       lockWarmupTicks: true
@@ -107239,6 +107497,7 @@ var init_renderChunk = __esm({
     init_logger();
     init_encodeStage();
     init_captureStage();
+    init_captureBeyondViewport();
     init_freezePlan();
     init_planHash();
     init_runtimeEnvSnapshot();
@@ -108475,12 +108734,12 @@ import { existsSync as existsSync54, lstatSync as lstatSync3, symlinkSync as sym
 import { resolve as resolve31, dirname as dirname24, basename as basename9, join as join61 } from "path";
 import { fileURLToPath as fileURLToPath8 } from "url";
 import { createRequire as createRequire2 } from "module";
-function previewBaseUrl(port) {
-  return `http://127.0.0.1:${port}`;
+function previewBaseUrl(port, host = "127.0.0.1") {
+  return `http://${host}:${port}`;
 }
-function absolutePreviewUrl(port, path2) {
+function absolutePreviewUrl(port, path2, host = "127.0.0.1") {
   if (/^https?:\/\//.test(path2)) return path2;
-  return `${previewBaseUrl(port)}${path2.startsWith("/") ? path2 : `/${path2}`}`;
+  return `${previewBaseUrl(port, host)}${path2.startsWith("/") ? path2 : `/${path2}`}`;
 }
 function hasExplicitPreviewPort(argv2) {
   return argv2.some((arg) => arg === "--port" || arg.startsWith("--port="));
@@ -108501,7 +108760,7 @@ function previewServerPayload(server) {
     port: server.port,
     projectName: server.projectName,
     projectDir: server.projectDir,
-    url: previewBaseUrl(server.port)
+    url: previewBaseUrl(server.port, server.host)
   };
 }
 function parseContextFields(value) {
@@ -108578,7 +108837,7 @@ async function printCurrentSelection(projectDir, startPort, json, preferredPort)
   }
   const selection = {
     ...response.selection,
-    thumbnailUrl: absolutePreviewUrl(server.port, response.selection.thumbnailUrl)
+    thumbnailUrl: absolutePreviewUrl(server.port, response.selection.thumbnailUrl, server.host)
   };
   if (json) {
     console.log(
@@ -108728,7 +108987,7 @@ async function printCurrentContext(projectDir, startPort, options) {
   console.log(`${c.success("\u25C7")}  Studio context`);
   if (contextIncludes(fields, "server")) {
     console.log(`  ${c.dim("Project")}   ${server.projectName}`);
-    console.log(`  ${c.dim("Studio")}    ${previewBaseUrl(server.port)}`);
+    console.log(`  ${c.dim("Studio")}    ${previewBaseUrl(server.port, server.host)}`);
   }
   if (contextIncludes(fields, "selection")) {
     if (selection.ok) {