@hyperframes/studio 0.8.128 → 0.8.129

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-ClLzyuwb.js"></script>
+    <script type="module" crossorigin src="/assets/index-C9YkEyN4.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-D11atkBt.css">
   </head>
   <body>

package/dist/index.js

@@ -17395,6 +17395,14 @@ function applySoftReloadFinalization(iframe, currentTime) {
 function timelineKeys(scriptText) {
   return [...scriptText.matchAll(/__timelines\s*\[\s*["'`]([^"'`]+)["'`]\s*\]/g)].map((m) => m[1]).filter((key2) => key2 !== "__proxied");
 }
+function scriptsRegistering(scripts, keys) {
+  return scripts.filter((script) => {
+    const text = script.textContent || "";
+    return keys.some(
+      (key2) => text.includes(`__timelines["${key2}"]`) || text.includes(`__timelines['${key2}']`)
+    );
+  });
+}
 function applySoftReload(iframe, scriptText, options = {}) {
   const { onAsyncFailure, currentTimeOverride, authoredHtml } = options;
   if (!iframe || !scriptText) return "cannot-soft-reload";
@@ -17407,12 +17415,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
   if (targetKeys.length === 0) return "cannot-soft-reload";
   const gsapScripts = findGsapScriptElements(doc);
   if (gsapScripts.length === 0) return "cannot-soft-reload";
-  const staleScripts = gsapScripts.filter(
-    (script) => targetKeys.some((key2) => {
-      const text = script.textContent || "";
-      return text.includes(`__timelines["${key2}"]`) || text.includes(`__timelines['${key2}']`);
-    })
-  );
+  const staleScripts = scriptsRegistering(gsapScripts, targetKeys);
   if (gsapScripts.length > 1 && staleScripts.length === 0) return "cannot-soft-reload";
   const currentTime = currentTimeOverride ?? win.__player?.getTime?.() ?? 0;
   let deferredToAsync = false;
@@ -17682,6 +17685,159 @@ function postGsapMutations(projectId, filePath, mutations, fallback) {
 // src/hooks/timelineTimingSync.ts
 import { findTimelineScript } from "@hyperframes/core/gsap-parser-acorn";
 import { walkCompositionDescendants } from "@hyperframes/parsers/hf-ids";
+
+// src/utils/gsapLiveRetime.ts
+import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
+import { hasExplicitTime } from "@hyperframes/parsers/gsap-writer-acorn";
+import { RUNTIME_FILLER } from "@hyperframes/core/runtime/protocol";
+var RERUN = { kind: "rerun" };
+var withoutLayout = (code) => code.replace(/\s+/g, " ").replace(/ ?([^\w$ ]) ?/g, "$1").trim();
+function untimedShape(animation) {
+  const { id: _id, position: _p, resolvedStart: _s, duration: _d, ...rest } = animation;
+  const provenance = rest.provenance && { ...rest.provenance, sourceRange: void 0 };
+  return JSON.stringify(
+    { ...rest, provenance },
+    (_key, value) => typeof value === "string" && value.startsWith("__raw:") ? withoutLayout(value) : value
+  );
+}
+var onTimeline = (animation) => !animation.global;
+var placedAlone = (animation) => hasExplicitTime(animation) && typeof animation.resolvedStart === "number";
+var lengthOf = (animation) => animation.method === "set" ? 0 : animation.durationUnresolved ? void 0 : animation.duration;
+var withoutNumbers = (script) => withoutLayout(script.replace(/(?<![\w$#.])\d*\.?\d+/g, "0"));
+function planLiveRetime(before, after) {
+  if (withoutNumbers(before) !== withoutNumbers(after)) return RERUN;
+  const keys = timelineKeys(after);
+  if (keys.length !== 1 || timelineKeys(before).join() !== keys.join()) return RERUN;
+  const was = parseGsapScriptAcorn(before).animations.filter(onTimeline);
+  const now2 = parseGsapScriptAcorn(after).animations.filter(onTimeline);
+  if (was.length !== now2.length) return RERUN;
+  const tweens = [];
+  for (const [index, next] of now2.entries()) {
+    const prev = was[index];
+    if (untimedShape(prev) !== untimedShape(next)) return RERUN;
+    if (!placedAlone(next) || !placedAlone(prev)) return RERUN;
+    const duration = lengthOf(next);
+    const wasDuration = lengthOf(prev);
+    if (duration === void 0 || wasDuration === void 0) return RERUN;
+    tweens.push({
+      selector: next.targetSelector,
+      start: next.resolvedStart,
+      duration,
+      wasStart: prev.resolvedStart,
+      wasDuration,
+      moved: next.resolvedStart !== prev.resolvedStart || duration !== wasDuration,
+      source: index
+    });
+  }
+  tweens.sort((x, y) => x.wasStart - y.wasStart || x.source - y.source);
+  return { kind: "retime", key: keys[0], after, tweens };
+}
+function planLiveRetimeFromPreview(iframe, after) {
+  const doc = iframe?.contentDocument;
+  const [key2] = timelineKeys(after);
+  if (!doc || !key2) return RERUN;
+  const [script, ...extra] = scriptsRegistering(findGsapScriptElements(doc), [key2]);
+  if (!script || extra.length > 0) return RERUN;
+  const plan = planLiveRetime(script.textContent ?? "", after);
+  return plan.kind === "retime" ? { ...plan, script } : RERUN;
+}
+var same = (a, b) => Math.abs(a - b) < 1e-6;
+var targetsMatch = (tween, selector) => {
+  const targets = tween.targets?.() ?? [];
+  try {
+    return targets.length > 0 && targets.every((t2) => t2.matches?.(selector) === true);
+  } catch {
+    return false;
+  }
+};
+function pairedLiveTweens(timeline, plan) {
+  const children = timeline.getChildren(false, true, false).filter((tween) => tween.data !== RUNTIME_FILLER);
+  if (children.length !== plan.tweens.length) return null;
+  const paired = plan.tweens.every((t2, i) => {
+    const live = children[i];
+    return targetsMatch(live, t2.selector) && same(live.startTime() - live.delay(), t2.wasStart) && same(live.duration(), t2.wasDuration);
+  });
+  return paired ? children : null;
+}
+var near2 = (a, b) => Math.abs(a - b) <= 2e-3;
+function sharesOneStretch(tweens) {
+  const first = tweens[0];
+  const last = tweens.at(-1);
+  const longest = tweens.reduce((x, y) => y.wasDuration > x.wasDuration ? y : x);
+  const spread = last.wasStart - first.wasStart;
+  const stretch = spread > longest.wasDuration ? (last.start - first.start) / spread : longest.wasDuration > 0 ? longest.duration / longest.wasDuration : 1;
+  const fits = tweens.every(
+    (t2) => near2(t2.start, first.start + stretch * (t2.wasStart - first.wasStart)) && near2(t2.duration, stretch * t2.wasDuration)
+  );
+  return stretch > 0 && fits;
+}
+function inOrHostsSubComposition(target, ownId) {
+  const element = target;
+  const owner = element.closest?.("[data-composition-id]");
+  return owner != null && owner.getAttribute("data-composition-id") !== ownId || element.querySelector?.("[data-composition-id]") != null;
+}
+var keepsOrder = (tweens) => tweens.every(
+  (t2, k) => k === 0 || (tweens[k - 1].start - t2.start || tweens[k - 1].source - t2.source) < 0
+);
+function movesKeepEachElementsHistory(timeline, plan, children) {
+  const byElement = /* @__PURE__ */ new Map();
+  children.forEach((child, i) => {
+    for (const target of child.targets?.() ?? []) {
+      const indexes = byElement.get(target);
+      if (indexes) indexes.push(i);
+      else byElement.set(target, [i]);
+    }
+  });
+  const moved = /* @__PURE__ */ new Set();
+  for (const [target, indexes] of byElement) {
+    if (!indexes.some((i) => plan.tweens[i].moved)) continue;
+    if (inOrHostsSubComposition(target, plan.key)) return false;
+    const tweens = indexes.map((i) => plan.tweens[i]);
+    const shifted = tweens.every((t2) => t2.duration === t2.wasDuration);
+    const undelayed = indexes.every((i) => !children[i].delay() && !children[i].repeatDelay?.());
+    if (!keepsOrder(tweens) || !sharesOneStretch(tweens) || !(shifted || undelayed)) return false;
+    moved.add(target);
+  }
+  return !timeline.getChildren(false, false, true).some(
+    (sub) => sub.getChildren(true, true, false).some((tween) => tween.targets?.().some((t2) => moved.has(t2)))
+  );
+}
+function applyLiveRetime(iframe, plan) {
+  const win = iframe?.contentWindow;
+  const timeline = win?.__timelines?.[plan.key];
+  if (typeof timeline?.getChildren !== "function") return false;
+  const children = pairedLiveTweens(timeline, plan);
+  if (!children) return false;
+  if (plan.tweens.some((t2) => t2.moved)) {
+    if (!movesKeepEachElementsHistory(timeline, plan, children)) return false;
+    const bySource = plan.tweens.map((t2, i) => ({ ...t2, tween: children[i] })).sort((a, b) => a.source - b.source);
+    for (const { tween } of bySource) timeline.remove(tween);
+    for (const { tween, start, duration } of bySource) {
+      if (tween.duration() !== duration) tween.duration(duration);
+      timeline.add(tween, start);
+    }
+    const at = timeline.time();
+    timeline.progress(1e-4, true);
+    timeline.totalTime(at, false);
+  }
+  plan.script.textContent = plan.after;
+  return true;
+}
+function moveLiveTweens(iframe, scriptText, currentTime, reloadPreview) {
+  const plan = planLiveRetimeFromPreview(iframe, scriptText);
+  if (plan.kind !== "retime") return false;
+  try {
+    if (!applyLiveRetime(iframe, plan)) return false;
+  } catch (error) {
+    console.error("[Studio] Moving the live tweens threw; reloading the preview", error);
+    reloadPreview();
+    return true;
+  }
+  if (!applySoftReloadFinalization(iframe, currentTime)) reloadPreview();
+  return true;
+}
+
+// src/hooks/timelineTimingSync.ts
 async function readFileContent(projectId, targetPath) {
   if (targetPath.includes("\0") || targetPath.includes("..")) {
     throw new Error(`Unsafe path: ${targetPath}`);
@@ -17722,18 +17878,24 @@ function captureDurationRollback(iframe) {
 function rebindPreviewTiming(iframe, currentTime) {
   return applySoftReloadFinalization(iframe, currentTime);
 }
-function syncTimingEditPreview(iframe, outcome, currentTime, reloadPreview, rebindWhenUnmutated, nestedFiles) {
+async function syncTimingEditPreview(iframe, outcome, projectId, reloadPreview, rebindWhenUnmutated) {
+  const currentTime = () => usePlayerStore.getState().currentTime;
   if (!outcome.mutated && rebindWhenUnmutated) {
-    if (!rebindPreviewTiming(iframe, currentTime)) reloadPreview();
+    if (!rebindPreviewTiming(iframe, currentTime())) reloadPreview();
     return;
   }
-  if (!iframe || !outcome.scriptText) {
+  const { scriptText } = outcome;
+  if (!iframe || !scriptText) {
     reloadPreview();
     return;
   }
-  const result = applySoftReload(iframe, outcome.scriptText, {
+  if (moveLiveTweens(iframe, scriptText, currentTime(), reloadPreview)) return;
+  const nestedFiles = await settleNestedReads(
+    projectId ? readNestedFiles(iframe, scriptText, (path) => readFileContent(projectId, path)) : null
+  );
+  const result = applySoftReload(iframe, scriptText, {
     onAsyncFailure: reloadPreview,
-    currentTimeOverride: currentTime,
+    currentTimeOverride: currentTime(),
     authoredHtml: outcome.after,
     nestedFiles
   });
@@ -17751,21 +17913,12 @@ async function finishTimelineTimingFallback(input) {
       return;
     }
   }
-  const { projectId } = input;
-  const nestedFiles = await settleNestedReads(
-    projectId && outcome.scriptText ? readNestedFiles(
-      input.iframe,
-      outcome.scriptText,
-      (path) => readFileContent(projectId, path)
-    ) : null
-  );
-  syncTimingEditPreview(
+  await syncTimingEditPreview(
     input.iframe,
     outcome,
-    usePlayerStore.getState().currentTime,
+    input.projectId,
     input.reloadPreview,
-    input.rebindWhenUnmutated,
-    nestedFiles
+    input.rebindWhenUnmutated
   );
 }
 var UNTIL_NEXT_EDIT = Number.POSITIVE_INFINITY;
@@ -26306,9 +26459,9 @@ function mergeAudioInSource(source, input) {
 }
 var tagOf2 = (el) => el.tag.trim().toLowerCase();
 var keyOf11 = (el) => el.key ?? el.id;
-var near2 = (a, b) => Math.abs(a - b) <= SYNC_TOLERANCE_S;
+var near3 = (a, b) => Math.abs(a - b) <= SYNC_TOLERANCE_S;
 function hasIdenticalTiming(a, b) {
-  return near2(a.start, b.start) && near2(a.duration, b.duration) && near2(a.playbackStart ?? 0, b.playbackStart ?? 0) && near2(a.playbackRate ?? 1, b.playbackRate ?? 1);
+  return near3(a.start, b.start) && near3(a.duration, b.duration) && near3(a.playbackStart ?? 0, b.playbackStart ?? 0) && near3(a.playbackRate ?? 1, b.playbackRate ?? 1);
 }
 var sameAssetInScope = (a, b) => {
   const asset = mediaAssetIdentity(a);
@@ -26349,7 +26502,7 @@ function isPairInSync(a, b) {
     playbackRate: el.playbackRate ?? 1
   });
   const [x, y] = [timing(a), timing(b)];
-  return near2(x.playbackRate, y.playbackRate) && near2(sourceZeroTime(x), sourceZeroTime(y));
+  return near3(x.playbackRate, y.playbackRate) && near3(sourceZeroTime(x), sourceZeroTime(y));
 }
 function pickDetachedAudioTrack(elements, window2) {
   const trackOf = (el) => el.authoredTrack ?? el.track;
@@ -27425,8 +27578,8 @@ async function decodeVideoThumbnail(request, signal, budgets = TIMELINE_VIEWPORT
       for (const time of timestamps) {
         const key2 = await keys.getKeyPacket(time, { metadataOnly: true });
         if (signal.aborted) return;
-        const near3 = key2 && key2.timestamp >= sourceStart && time - key2.timestamp <= maxKeyframeLead;
-        yield near3 ? key2.timestamp : time;
+        const near4 = key2 && key2.timestamp >= sourceStart && time - key2.timestamp <= maxKeyframeLead;
+        yield near4 ? key2.timestamp : time;
       }
     }
     const aspect = displayWidth / displayHeight;
@@ -45961,12 +46114,12 @@ function statesValueAt(anim, time) {
   const duration = resolveTweenDuration(anim);
   if (!(duration > 0)) return false;
   const pct = (time - (resolveTweenStart(anim) ?? 0)) / duration * 100;
-  const near3 = (keyframe) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
+  const near4 = (keyframe) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
   const runEase = runEaseOf(anim);
   if (anim.keyframes)
-    return anim.keyframes.keyframes.some((kf) => near3(timeAtProgress(runEase, kf.percentage)));
-  if (anim.method === "from") return near3(0);
-  return near3(100) || anim.method === "fromTo" && near3(0);
+    return anim.keyframes.keyframes.some((kf) => near4(timeAtProgress(runEase, kf.percentage)));
+  if (anim.method === "from") return near4(0);
+  return near4(100) || anim.method === "fromTo" && near4(0);
 }
 function pickClosestToPlayhead(anims) {
   if (anims.length <= 1) return anims[0] ?? null;
@@ -74513,7 +74666,7 @@ function useFileManager({
 import { useCallback as useCallback106, useRef as useRef130, useState as useState114 } from "react";
 
 // src/utils/gsapUndoRestore.ts
-import { isCompositionTemplate as isCompositionTemplate2 } from "@hyperframes/parsers/hf-ids";
+import { ensureHfIds as ensureHfIds2, isCompositionTemplate as isCompositionTemplate2 } from "@hyperframes/parsers/hf-ids";
 function elementIdentityKey(el) {
   const hfId = el.getAttribute("data-hf-id");
   if (hfId) return `hf:${hfId}`;
@@ -74649,8 +74802,10 @@ function scopeTargets(scope, keys, restoredByKey, previousByKey) {
   return targets;
 }
 function fileTargets(doc, path, isActive, file) {
-  const prevDoc = parseRestoreSource(file.previous);
-  const nextDoc = parseRestoreSource(file.restored);
+  const previewStamped = doc.querySelector("[data-hf-id]") !== null;
+  const stampedLikeThePreview = (html2) => previewStamped && !html2.includes("data-hf-id") ? ensureHfIds2(html2) : html2;
+  const prevDoc = parseRestoreSource(stampedLikeThePreview(file.previous));
+  const nextDoc = parseRestoreSource(stampedLikeThePreview(file.restored));
   const scripted = restoreScripted(prevDoc, nextDoc, isActive);
   if (scripted === null) return null;
   const keys = diffRestoreDocs(prevDoc, nextDoc);
@@ -74802,11 +74957,11 @@ function syncStoredElementAttribute(target, attr, value) {
   const fields = STORED_FIELD[attr]?.(value);
   if (!fields) return;
   const key2 = getTimelineElementIdentity(target);
-  const same = (element) => Object.keys(fields).every((k) => element[k] === fields[k]);
+  const same2 = (element) => Object.keys(fields).every((k) => element[k] === fields[k]);
   usePlayerStore.setState((state) => {
     let changed = false;
     const elements = state.elements.map((element) => {
-      if (getTimelineElementIdentity(element) !== key2 || same(element)) return element;
+      if (getTimelineElementIdentity(element) !== key2 || same2(element)) return element;
       changed = true;
       return { ...element, ...fields };
     });
@@ -81675,13 +81830,13 @@ function useGsapKeyframeOps({
 
 // src/hooks/useGsapPropertyDebounce.ts
 import { useCallback as useCallback138, useEffect as useEffect118, useRef as useRef146 } from "react";
-import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
+import { parseGsapScriptAcorn as parseGsapScriptAcorn2 } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
   try {
     const script = extractGsapScriptText(sdkSession.serialize());
     if (!script) return { ...edited };
-    const anim = parseGsapScriptAcorn(script).animations.find((a) => a.id === animationId);
+    const anim = parseGsapScriptAcorn2(script).animations.find((a) => a.id === animationId);
     if (!anim) return { ...edited };
     const existing = kind === "from" ? anim.fromProperties ?? {} : anim.properties;
     return { ...existing, ...edited };
@@ -84234,8 +84389,8 @@ var resolvedSelections = /* @__PURE__ */ new WeakMap();
 var checkedSelections = /* @__PURE__ */ new WeakMap();
 function checkedPreflight(resolved2, inputs) {
   const known = checkedSelections.get(resolved2);
-  const same = known?.animations === inputs.animations && known.iframe === inputs.iframe && known.group === inputs.group && known.version === inputs.version;
-  if (same) return known;
+  const same2 = known?.animations === inputs.animations && known.iframe === inputs.iframe && known.group === inputs.group && known.version === inputs.version;
+  if (same2) return known;
   const { animations, iframe, group } = inputs;
   const checked = {
     ...inputs,
@@ -89052,16 +89207,16 @@ function averageSpeed(samples, from, to) {
   return total / (seg.length - 1);
 }
 function speedAtEdge(samples, t2, window2, side) {
-  const near3 = samples.filter(
+  const near4 = samples.filter(
     (s) => side === "start" ? s.time >= t2 && s.time <= t2 + window2 : s.time >= t2 - window2 && s.time <= t2
   );
-  if (near3.length < 2) return 0;
+  if (near4.length < 2) return 0;
   let total = 0;
-  for (let i = 1; i < near3.length; i++) {
-    const dt = near3[i].time - near3[i - 1].time;
-    if (dt > 0) total += Math.abs(near3[i].value - near3[i - 1].value) / dt;
+  for (let i = 1; i < near4.length; i++) {
+    const dt = near4[i].time - near4[i - 1].time;
+    if (dt > 0) total += Math.abs(near4[i].value - near4[i - 1].value) / dt;
   }
-  return total / (near3.length - 1);
+  return total / (near4.length - 1);
 }
 function fitEasesFromVelocity(keyframes, rawSamples, totalDuration) {
   if (keyframes.length < 2 || rawSamples.length < 3) return keyframes;
@@ -91692,9 +91847,9 @@ function useLastFrame(request, snapshot3) {
 }
 function useNearViewport() {
   const [element, setElement] = useState141(null);
-  const [near3, setNear] = useState141(false);
+  const [near4, setNear] = useState141(false);
   useEffect144(() => {
-    if (!element || near3) return;
+    if (!element || near4) return;
     if (typeof IntersectionObserver === "undefined") return setNear(true);
     const observer = new IntersectionObserver(
       (entries) => entries.some((entry2) => entry2.isIntersecting) && setNear(true),
@@ -91702,8 +91857,8 @@ function useNearViewport() {
     );
     observer.observe(element);
     return () => observer.disconnect();
-  }, [element, near3]);
-  return [setElement, near3];
+  }, [element, near4]);
+  return [setElement, near4];
 }
 function CompCard({
   projectId,