@hyperframes/studio 0.8.123 → 0.8.125

package/dist/index.js

@@ -4187,7 +4187,7 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     drag.element.key ?? drag.element.id,
     !isMusicTrack(drag.element)
   );
-  const snap = snapMoveToTargets(
+  const snapped = snapMoveToTargets(
     nextMove.start,
     drag.element.duration,
     targets,
@@ -4197,6 +4197,9 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     dragMaxStart + drag.element.duration,
     ctx3.gridStep
   );
+  const target = snapTarget(snapped);
+  const missed = target !== null && !guideIfSaved(drag.element, { start: snapped.start }, target, pps);
+  const snap = missed ? { start: nextMove.start, snapTime: null, snapType: null } : snapped;
   const group = resolveGroupDrag(drag, ctx3);
   const dragKey = drag.element.key ?? drag.element.id;
   const passengers = ctx3.elements.filter(
@@ -4213,8 +4216,7 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     return { ...drag, started: true };
   }
   const { track: previewTrack, insertRow } = placement;
-  const target = placement.start === snap.start && snap.snapTime !== null && snap.snapType !== null ? { time: snap.snapTime, type: snap.snapType } : null;
-  const guide = guideIfSaved(drag.element, { start: snap.start }, target, pps);
+  const guide = placement.start === snap.start ? snapTarget(snap) : null;
   return {
     ...drag,
     started: true,
@@ -4230,6 +4232,7 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     snapType: guide?.type ?? null
   };
 }
+var snapTarget = (s) => s.snapTime !== null && s.snapType !== null ? { time: s.snapTime, type: s.snapType } : null;
 function guideIfSaved(element, clip, target, pps) {
   if (!target) return null;
   const saved2 = savedClipEdges(element, clip.start, clip.duration);
@@ -4273,30 +4276,30 @@ function computeResizePreview(resize2, clientX, ctx3) {
   );
   const gridStep = ctx3.gridStep ?? 0;
   let snap = null;
-  if (trimTargets.length > 0 || gridStep > 0) {
-    const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
-    if (resize2.edge === "end") {
-      const edgeTime2 = nextResize.start + nextResize.duration;
-      const { time: snapped, target } = snapTimelineTime(edgeTime2, trimTargets, snapSecs, gridStep);
-      const snappedDuration = Math.round((snapped - nextResize.start) * 1e3) / 1e3;
-      if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= resolveTimelineMinDuration() - 1e-6) {
-        if (snapped !== edgeTime2) nextResize = { ...nextResize, duration: snappedDuration };
-        snap = guideIfSaved(resize2.element, nextResize, target, pps);
-      }
-    } else {
-      const { time: snapped, target } = snapTimelineTime(
-        nextResize.start,
-        trimTargets,
-        snapSecs,
-        gridStep
-      );
-      const clip = { ...nextResize, playbackRate: resize2.element.playbackRate };
-      const delta = snapped - nextResize.start;
-      const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
-      if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
-        if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
-        snap = guideIfSaved(resize2.element, nextResize, target, pps);
-      }
+  const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
+  if (resize2.edge === "end") {
+    const edgeTime2 = nextResize.start + nextResize.duration;
+    const { time: snapped, target } = snapTimelineTime(edgeTime2, trimTargets, snapSecs, gridStep);
+    const snappedDuration = Math.round((snapped - nextResize.start) * 1e3) / 1e3;
+    if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= resolveTimelineMinDuration() - 1e-6) {
+      const onTarget = snapped === edgeTime2 ? nextResize : { ...nextResize, duration: snappedDuration };
+      snap = guideIfSaved(resize2.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
+    }
+  } else {
+    const { time: snapped, target } = snapTimelineTime(
+      nextResize.start,
+      trimTargets,
+      snapSecs,
+      gridStep
+    );
+    const clip = { ...nextResize, playbackRate: resize2.element.playbackRate };
+    const delta = snapped - nextResize.start;
+    const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
+    if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
+      const onTarget = snapped === nextResize.start ? nextResize : applyClipStartTrimDelta(clip, delta);
+      snap = guideIfSaved(resize2.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
     }
   }
   return {
@@ -11831,7 +11834,10 @@ function asElement(target) {
 var STUDIO_FLUSH_PENDING_EDITS_EVENT = "hf-studio-flush-pending-edits";
 var pendingEdits = /* @__PURE__ */ new Map();
 var NOT_SAVED = () => Promise.resolve(false);
-var adopting = false;
+var adopting = null;
+function adoptingStudioPendingEdit() {
+  return adopting;
+}
 function waitForPostBlurEffects() {
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
@@ -11874,7 +11880,7 @@ function trackStudioPendingEdit(result) {
   if (!result) return void 0;
   const promise = Promise.resolve(result);
   if (adopting) return promise;
-  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED });
+  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED, redraws: [], showAgain: null });
   promise.then(
     () => pendingEdits.delete(promise),
     () => pendingEdits.delete(promise)
@@ -11894,25 +11900,49 @@ function beginStudioPendingEdit(revert) {
   const entry2 = pendingEdits.get(promise);
   entry2.revert = revert;
   let landed = Promise.resolve(false);
+  let saved2 = false;
   entry2.landed = () => landed;
+  const inFlight = {
+    reverted: () => entry2.revert === null && revert !== null,
+    within(run) {
+      const outer = adopting;
+      adopting = inFlight;
+      try {
+        return run();
+      } finally {
+        adopting = outer;
+      }
+    },
+    drawUnlessUndone(draw) {
+      if (inFlight.reverted()) entry2.redraws.push(draw);
+      else draw();
+    },
+    drawKeepingUndone(draw) {
+      if (!inFlight.reverted()) return draw();
+      entry2.showAgain?.();
+      try {
+        return draw();
+      } finally {
+        entry2.showAgain = revert();
+      }
+    },
+    markSaved: () => void (saved2 = true)
+  };
   return {
     settle,
-    reverted: () => entry2.revert === null && revert !== null,
-    // Only what `start` registers synchronously is adopted; a registration after an await is a newer edit.
+    reverted: inFlight.reverted,
+    // Only what `start` registers synchronously is adopted; a later write joins only through `within`.
     adopt(start) {
-      adopting = true;
       try {
-        const committed = start();
+        const committed = inFlight.within(start);
         landed = Promise.resolve(committed).then(
           () => true,
-          () => false
+          () => saved2
         );
         return committed;
       } catch (error) {
         settle();
         throw error;
-      } finally {
-        adopting = false;
       }
     }
   };
@@ -11922,7 +11952,14 @@ function paintBackNewestStudioPendingEdit() {
   const revert = newest?.revert;
   if (!newest || !revert) return null;
   newest.revert = null;
-  return { showAgain: revert(), landed: newest.landed };
+  newest.showAgain = revert();
+  return {
+    showAgain: () => {
+      newest.showAgain?.();
+      for (const redraw of newest.redraws.splice(0)) redraw();
+    },
+    landed: newest.landed
+  };
 }
 function revertNewestStudioPendingEdit() {
   return paintBackNewestStudioPendingEdit()?.showAgain ?? null;
@@ -15955,6 +15992,7 @@ import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var BAR_STEP = 3;
 var rendersWaveform = (el) => el.tag === "audio";
 var FADE_GHOST_OPACITY = 0.27;
+var WAVEFORM_LAYER_Z = 10;
 function paintWaveformBars(context, bars, height, waveformBarRgb, waveformBaselineRgb, amplitudes) {
   bars.forEach((bar, index) => {
     const opacity = loudnessToOpacity(amplitudes[index] ?? 0);
@@ -16113,7 +16151,7 @@ var AudioWaveform = memo10(function AudioWaveform2({
     else clip.removeAttribute("data-audio-muted");
     return () => clip.removeAttribute("data-audio-muted");
   }, [muted]);
-  return /* @__PURE__ */ jsx30("div", { ref: rootRef, className: "absolute inset-0", children: /* @__PURE__ */ jsxs17("div", { className: "absolute inset-0 overflow-hidden", style: { zIndex: 10 }, children: [
+  return /* @__PURE__ */ jsx30("div", { ref: rootRef, className: "absolute inset-0", children: /* @__PURE__ */ jsxs17("div", { className: "absolute inset-0 overflow-hidden", style: { zIndex: WAVEFORM_LAYER_Z }, children: [
     /* @__PURE__ */ jsx30(
       "canvas",
       {
@@ -18468,7 +18506,7 @@ var OutOfSyncBadge = memo12(function OutOfSyncBadge2({ el }) {
         "aria-label": `Out of sync with ${partnerName} by ${label} frames`,
         title: `Out of sync with ${partnerName} by ${label} \u2014 click for Move or Slip into Sync`,
         "data-testid": "out-of-sync-badge",
-        className: "absolute bottom-0.5 left-1 z-[7] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums",
+        className: "absolute bottom-0.5 left-1 z-[12] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums",
         onPointerDown: stop,
         onDoubleClick: stop,
         onClick: open,
@@ -24016,6 +24054,7 @@ var TimelineCanvas = memo16(function TimelineCanvas2() {
         draggedClip?.started && draggedClip.insertRow == null && draggedRowIndex >= 0 && /* @__PURE__ */ jsx59(
           "div",
           {
+            "data-testid": "timeline-drag-landing",
             className: "absolute pointer-events-none",
             style: {
               top: props.rowGeometry.getRowTop(draggedRowIndex) + CLIP_Y,
@@ -37145,14 +37184,6 @@ function restoreManualOffsetDragMember(member) {
   }
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
-function manualOffsetMoveRevert(members) {
-  if (!members.every((member) => member.plainTranslate)) return null;
-  return () => {
-    const shown2 = members.map((member) => captureStudioPathOffset(member.element));
-    for (const member of members) restoreStudioPathOffset(member.element, member.initialPathOffset);
-    return () => members.forEach((member, i) => restoreStudioPathOffset(member.element, shown2[i]));
-  };
-}
 function restoreManualOffsetDragMembers(members) {
   for (const member of members) {
     restoreManualOffsetDragMember(member);
@@ -37197,6 +37228,70 @@ function resumeGsapTimelines(element) {
   win.__player?.seek?.(t2);
 }
 
+// src/components/editor/gestureUndoRevert.ts
+var PLACEMENT = ["position", "left", "top"];
+var placementOf = (element) => PLACEMENT.map((prop) => element.style.getPropertyValue(prop));
+function showPlacement(element, placement) {
+  PLACEMENT.forEach((prop, i) => {
+    if (placement[i]) element.style.setProperty(prop, placement[i]);
+    else element.style.removeProperty(prop);
+  });
+}
+function readMemberPosition(member) {
+  const gsap3 = member.plainTranslate ? null : getOffsetDragGsap(member.element);
+  return {
+    offset: captureStudioPathOffset(member.element),
+    gsap: gsap3 && {
+      x: Number(gsap3.getProperty(member.element, "x")),
+      y: Number(gsap3.getProperty(member.element, "y"))
+    },
+    placement: placementOf(member.element)
+  };
+}
+function showMemberPosition(member, position) {
+  restoreStudioPathOffset(member.element, position.offset);
+  showPlacement(member.element, position.placement);
+  if (position.gsap) getOffsetDragGsap(member.element)?.set(member.element, { ...position.gsap });
+  if (!member.plainTranslate)
+    stampGestureBase(member.element, member.initialOffset, member.baseGsap);
+}
+function manualOffsetMoveRevert(members) {
+  const startPlacement = members.map((member) => placementOf(member.element));
+  return () => {
+    const shown2 = members.map(readMemberPosition);
+    members.forEach(
+      (member, i) => showMemberPosition(member, {
+        offset: member.initialPathOffset,
+        gsap: member.plainTranslate ? null : member.baseGsap,
+        placement: startPlacement[i]
+      })
+    );
+    return () => members.forEach((member, i) => showMemberPosition(member, shown2[i]));
+  };
+}
+var GSAP_LOOK_PROPS = ["x", "y", "rotation", "scaleX", "scaleY"];
+function readElementLook(element, gsapOwned) {
+  const gsap3 = gsapOwned ? getOffsetDragGsap(element) : null;
+  return {
+    style: element.getAttribute("style"),
+    gsap: gsap3 && Object.fromEntries(
+      GSAP_LOOK_PROPS.map((prop) => [prop, Number(gsap3.getProperty(element, prop))])
+    )
+  };
+}
+function showElementLook(element, look) {
+  if (look.style === null) element.removeAttribute("style");
+  else element.setAttribute("style", look.style);
+  if (look.gsap) getOffsetDragGsap(element)?.set(element, { ...look.gsap });
+}
+function elementLookRevert(element, start) {
+  return () => {
+    const shown2 = readElementLook(element, start.gsap !== null);
+    showElementLook(element, start);
+    return () => showElementLook(element, shown2);
+  };
+}
+
 // src/components/editor/rotationDraft.ts
 function lastRuleTransform(element) {
   let value = "";
@@ -37975,6 +38070,10 @@ function startGesture(kind, e, opts, options) {
   const rawContentScaleY = rect.height / (rect.editScaleY * actualHeight);
   const contentScaleX = Number.isFinite(rawContentScaleX) && rawContentScaleX > 0 ? rawContentScaleX : 1;
   const contentScaleY = Number.isFinite(rawContentScaleY) && rawContentScaleY > 0 ? rawContentScaleY : 1;
+  const initialLook = readElementLook(
+    sel.element,
+    kind !== "drag" && !editsPlainCss(sel.element, kind === "rotate" ? "rotate" : "resize")
+  );
   let initialPathOffset = captureStudioPathOffset(sel.element);
   let manualEditDragToken;
   let pathOffsetMember;
@@ -38054,6 +38153,7 @@ function startGesture(kind, e, opts, options) {
       initialPathOffset,
       initialRotation: captureStudioRotation(sel.element),
       initialBoxSize: captureStudioBoxSize(sel.element),
+      initialLook,
       pathOffsetMember,
       originLeft: rect.left,
       originTop: rect.top,
@@ -38555,11 +38655,13 @@ function createDomEditOverlayGestureHandlers(opts) {
       }
       applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
       const commit = { ...finalRotation, plain: g.plainRotation };
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, commit)).then((result) => trackPreviewEditResult("rotate", "drag", result)).catch((error) => {
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved2 = Promise.resolve(edit.adopt(() => opts.onRotationCommitRef.current(sel, commit))).then((result) => trackPreviewEditResult("rotate", "drag", result)).catch((error) => {
         logGestureCommitFailure("rotate commit failed", error);
         if (g.manualEditDragToken && isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken))
           restoreRotation();
       }).finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+      edit.settle(saved2);
     } else if (g.kind === "drag") {
       opts.suppressNextBoxClickRef.current = true;
       const dx = g.lastSnappedDx ?? e.clientX - g.startX;
@@ -38619,14 +38721,15 @@ function createDomEditOverlayGestureHandlers(opts) {
         restoreStudioBoxSize(sel.element, g.initialBoxSize);
         if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
       };
-      void Promise.resolve(
-        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? void 0, restore2, member)
-      ).then((result) => trackPreviewEditResult("resize", "drag", result)).catch((error) => {
+      const commitSize = () => opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? void 0, restore2, member);
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved2 = Promise.resolve(edit.adopt(commitSize)).then((result) => trackPreviewEditResult("resize", "drag", result)).catch((error) => {
         logGestureCommitFailure("resize commit failed", error);
       }).finally(() => {
         if (member) endManualOffsetDragMembers([member]);
         else endStudioManualEditGesture(sel.element, g.manualEditDragToken);
       });
+      edit.settle(saved2);
       logResizeSettle(sel.element, "post-release");
     }
   };
@@ -44460,6 +44563,8 @@ function trackKeyframeCommit(mutations, result, options, memberOptions) {
 
 // src/hooks/gsapGestureOutcome.ts
 function observeGsapGesture(writer) {
+  const edit = adoptingStudioPendingEdit();
+  const join = (run) => edit ? edit.within(run) : run();
   let changed = false;
   let pendingResults = 0;
   const actions = /* @__PURE__ */ new Set();
@@ -44467,12 +44572,14 @@ function observeGsapGesture(writer) {
     pendingResults += 1;
     return {
       ...options,
+      ...edit && { pendingEdit: edit },
       keyframeTelemetry: false,
       onResult: (result) => {
         pendingResults -= 1;
         options.onResult?.(result);
         if (!result.ok || result.changed !== true) return;
         changed = true;
+        edit?.markSaved();
         const members = changedMutationIndices(
           result,
           calls.length,
@@ -44488,16 +44595,18 @@ function observeGsapGesture(writer) {
   };
   let commit = null;
   if (writer) {
-    commit = (selection, mutation, options) => writer(selection, mutation, observe([{ selection, mutation, options }], options));
+    commit = (selection, mutation, options) => join(() => writer(selection, mutation, observe([{ selection, mutation, options }], options)));
     if (writer.batch) {
       const batch = writer.batch;
-      commit.batch = (calls, options) => batch(calls, observe(calls, options));
+      commit.batch = (calls, options) => join(() => batch(calls, observe(calls, options)));
     }
   }
   return {
     commit,
+    drawKeepingUndone: (draw) => edit ? edit.drawKeepingUndone(draw) : draw(),
     recordDomResult: (result) => {
       changed ||= result?.changed === true;
+      if (result?.changed) edit?.markSaved();
     },
     finish: (domChanged = false) => {
       if (pendingResults !== 0) return { ok: true, changed: false };
@@ -44741,7 +44850,8 @@ function runGestureTransaction(tx) {
   logCommit("start", { label: tx.label, coalesceKey });
   tx.settle();
   logCommit("settled", { label: tx.label, coalesceKey });
-  const before = !tx.skipPixelAssert ? readPixelRect(tx.element) : null;
+  const measure = () => tx.draw ? tx.draw(() => readPixelRect(tx.element)) : readPixelRect(tx.element);
+  const before = !tx.skipPixelAssert ? measure() : null;
   const commit = (commitMutation) => {
     const wrapped = (selection, mutation, options) => {
       mutationCount += 1;
@@ -44762,7 +44872,7 @@ function runGestureTransaction(tx) {
     const durationMs = Math.round(performance.now() - startedAt2);
     logCommit("persisted", { label: tx.label, coalesceKey });
     if (before) {
-      const after = readPixelRect(tx.element);
+      const after = measure();
       const delta = pixelDelta(before, after);
       if (exceedsPixelTolerance(delta)) {
         logCommit("persist-changed-pixels", { label: tx.label, before, after, delta });
@@ -50698,7 +50808,8 @@ function TextClipContent({ text }) {
 
 // src/player/components/AudibleVideoClipContent.tsx
 import { jsx as jsx115, jsxs as jsxs84 } from "react/jsx-runtime";
-var AUDIBLE_VIDEO_WAVE_SHARE = 0.38;
+var AUDIBLE_VIDEO_WAVE_SHARE = 0.5;
+var AUDIO_CLIP_SURFACE = "var(--timeline-clip-audio-bg)";
 function AudibleVideoClipContent({
   thumbnail,
   waveform
@@ -50709,9 +50820,9 @@ function AudibleVideoClipContent({
     /* @__PURE__ */ jsx115(
       "div",
       {
-        className: "absolute inset-x-0 bottom-0 bg-black/30",
+        className: "audible-video-wave absolute inset-x-0 bottom-0",
         "data-testid": "audible-video-wave",
-        style: { height: waveHeight },
+        style: { height: waveHeight, backgroundColor: AUDIO_CLIP_SURFACE },
         children: waveform
       }
     )
@@ -50760,10 +50871,20 @@ function ClipPeakMarks({
             },
             run.from
           )),
-          /* @__PURE__ */ jsxs85("span", { className: "absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400", children: [
-            "\u25B2 peaks ",
-            dbText2(peakDbfs)
-          ] })
+          /* @__PURE__ */ jsxs85(
+            "span",
+            {
+              className: "absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400",
+              "data-peak-badge": true,
+              children: [
+                "\u25B2",
+                /* @__PURE__ */ jsxs85("span", { "data-peak-text": true, children: [
+                  " peaks ",
+                  dbText2(peakDbfs)
+                ] })
+              ]
+            }
+          )
         ]
       }
     )
@@ -81164,13 +81285,22 @@ async function runMutationRequest(mutations, options, showToast, request) {
 function finishUnchangedMutation(iframe, result, options, reloadPreview) {
   if (result.changed !== false) return false;
   if (!options.skipReload && (instantPatchesFor(options).length > 0 || options.previewFallbackLatch?.pending)) {
-    applyPreviewSync(iframe, result, options, reloadPreview);
+    redrawUnlessPaintedBack(
+      options,
+      () => applyPreviewSync(iframe, result, options, reloadPreview)
+    );
   }
   return true;
 }
+function redrawUnlessPaintedBack(options, redraw) {
+  if (options.pendingEdit) options.pendingEdit.drawUnlessUndone(redraw);
+  else redraw();
+}
 function refreshMutationPreview(iframe, result, options, reloadPreview, onCacheInvalidate, nestedFiles) {
-  options.beforeReload?.();
-  applyPreviewSync(iframe, result, options, reloadPreview, nestedFiles);
+  redrawUnlessPaintedBack(options, () => {
+    options.beforeReload?.();
+    applyPreviewSync(iframe, result, options, reloadPreview, nestedFiles);
+  });
   onCacheInvalidate();
 }
 function isActiveCommitTarget(projectIdRef, activeCompPathRef, projectId, compositionPath) {
@@ -82192,12 +82322,10 @@ function useGsapAwareGroupMove({
         renderOnCommit = index === lastScriptWrite;
         const plain = offsetMembers.get(selection);
         if (plain !== void 0) {
-          const result = await stageElementPositionOffset(
-            selection,
-            next,
-            plain,
-            coalesceKey
-          ).save();
+          const staged = writes.drawKeepingUndone(
+            () => stageElementPositionOffset(selection, next, plain, coalesceKey)
+          );
+          const result = await staged.save();
           writes.recordDomResult(result);
           continue;
         }
@@ -82325,7 +82453,7 @@ function tweenUsesScaleLonghands(anim) {
   );
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
-async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset) {
+async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run()) {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -82421,7 +82549,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     scaleDraftEl = el;
     committedScale = useScaleLonghands ? { x: newScaleX, y: newScaleY } : { x: newScaleX, y: newScaleX };
     if (el) {
-      const dropRect = el.getBoundingClientRect();
+      const dropRect = draw(() => el.getBoundingClientRect());
       scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
     }
   } else {
@@ -82433,39 +82561,50 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   }
   const finalizeScaleResizeCommit = async () => {
     if (!scaleDraftEl) return false;
-    clearStudioBoxSize(scaleDraftEl);
-    if (!scaleDraftDropPoint || !selector) return false;
-    if (committedScale) {
-      setElementGsapScale(scaleDraftEl, committedScale.x, committedScale.y);
-    }
-    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
-    const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
-      selection.element,
-      { x: 0, y: 0 },
-      gsapPos
-    );
-    const base2 = { x: baseGsapX, y: baseGsapY };
-    setElementGsapPosition(scaleDraftEl, base2.x, base2.y);
-    const post2 = scaleDraftEl.getBoundingClientRect();
-    const residual = { x: scaleDraftDropPoint.x - post2.x, y: scaleDraftDropPoint.y - post2.y };
-    if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return false;
-    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
-      logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base2 });
-      return true;
+    const draftEl = scaleDraftEl;
+    if (!scaleDraftDropPoint || !selector) {
+      draw(() => clearStudioBoxSize(draftEl));
+      return false;
     }
-    const corrected = {
-      x: roundTo3(base2.x + residual.x),
-      y: roundTo3(base2.y + residual.y)
-    };
-    logResize("scale-finalize", {
-      dropPoint: scaleDraftDropPoint,
-      post: { x: post2.x, y: post2.y },
-      residual,
-      gsapPos,
-      base: base2,
-      corrected
+    const dropPoint = scaleDraftDropPoint;
+    const measured = draw(() => {
+      clearStudioBoxSize(draftEl);
+      if (committedScale) {
+        setElementGsapScale(draftEl, committedScale.x, committedScale.y);
+      }
+      const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+      const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
+        selection.element,
+        { x: 0, y: 0 },
+        gsapPos
+      );
+      const base3 = { x: baseGsapX, y: baseGsapY };
+      setElementGsapPosition(draftEl, base3.x, base3.y);
+      const post2 = draftEl.getBoundingClientRect();
+      const residual = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.y };
+      if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return null;
+      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base3 });
+        return "settled";
+      }
+      const corrected2 = {
+        x: roundTo3(base3.x + residual.x),
+        y: roundTo3(base3.y + residual.y)
+      };
+      logResize("scale-finalize", {
+        dropPoint,
+        post: { x: post2.x, y: post2.y },
+        residual,
+        gsapPos,
+        base: base3,
+        corrected: corrected2
+      });
+      setElementGsapPosition(draftEl, corrected2.x, corrected2.y);
+      return { base: base3, corrected: corrected2 };
     });
-    setElementGsapPosition(scaleDraftEl, corrected.x, corrected.y);
+    if (measured === null) return false;
+    if (measured === "settled") return true;
+    const { base: base2, corrected } = measured;
     const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved2?.animations ?? animations;
     const delta = { x: corrected.x - base2.x, y: corrected.y - base2.y };
     const positionTween = pickClosestToPlayhead(
@@ -82916,8 +83055,10 @@ function useGsapAwareEditing({
             modifiers
           );
           await saveMove(outcome, async () => {
-            const result = await stageElementPositionOffset(selection, next, false).save();
-            writes.recordDomResult(result);
+            const staged = writes.drawKeepingUndone(
+              () => stageElementPositionOffset(selection, next, false)
+            );
+            writes.recordDomResult(await staged.save());
           });
           return writes.finish();
         } catch (error) {
@@ -82990,11 +83131,8 @@ function useGsapAwareEditing({
           );
           await saveMove(dragOutcome, async () => {
             const plainAfterSettle = editsPlainCss(selection.element, "move");
-            anchorMove = stageElementPositionOffset(
-              selection,
-              offset,
-              plainAfterSettle,
-              coalesceKey
+            anchorMove = writes.drawKeepingUndone(
+              () => stageElementPositionOffset(selection, offset, plainAfterSettle, coalesceKey)
             );
           });
         }
@@ -83002,15 +83140,18 @@ function useGsapAwareEditing({
       await runGestureTransaction({
         element: selection.element,
         label: "Resize layer",
+        draw: writes.drawKeepingUndone,
         settle: () => {
           if (!offset || scaleRoute || !selector) return;
-          const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
-            x: 0,
-            y: 0
-          };
-          const { newX, newY } = computeDraggedGsapPosition(selection.element, offset, gsapPos);
-          logResize("sync-settle", { gsapPos, offset, newX, newY });
-          setElementGsapPosition(selection.element, newX, newY);
+          writes.drawKeepingUndone(() => {
+            const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
+              x: 0,
+              y: 0
+            };
+            const { newX, newY } = computeDraggedGsapPosition(selection.element, offset, gsapPos);
+            logResize("sync-settle", { gsapPos, offset, newX, newY });
+            setElementGsapPosition(selection.element, newX, newY);
+          });
         },
         persist: async (commit, coalesceKey) => {
           if (writes.commit) {
@@ -83023,16 +83164,13 @@ function useGsapAwareEditing({
                 previewIframeRef.current,
                 commitMutation2,
                 makeFetchFallback(selection),
-                offset
+                offset,
+                writes.drawKeepingUndone
               );
               assertGsapEditPersisted(outcome);
               if (outcome.status === "element-size") {
-                const result = await handleDomBoxSizeCommit(
-                  selection,
-                  next,
-                  void 0,
-                  void 0,
-                  coalesceKey
+                const result = await writes.drawKeepingUndone(
+                  () => handleDomBoxSizeCommit(selection, next, void 0, void 0, coalesceKey)
                 );
                 writes.recordDomResult(result);
               } else cropUndoKey = coalesceKey;
@@ -83056,11 +83194,8 @@ function useGsapAwareEditing({
           const anchorResult = await anchorMove?.save();
           writes.recordDomResult(anchorResult);
           if (cropUndoKey) {
-            const cropResult = await saveCropResize(
-              stageCrop,
-              selection,
-              commitPositionPatchToHtml,
-              cropUndoKey
+            const cropResult = await writes.drawKeepingUndone(
+              () => saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey)
             );
             writes.recordDomResult(cropResult);
           }
@@ -87441,7 +87576,6 @@ function FrameyGlyph({
 // src/components/OpenInDesktopButton.tsx
 import { jsx as jsx203, jsxs as jsxs161 } from "react/jsx-runtime";
 var ROUTE = "/api/open-in-desktop";
-var DOWNLOAD_URL = "https://hyperframes.dev/studio/download";
 var GAZE = 2.2;
 var OPENING_MS = 1600;
 function useDesktopRoute() {
@@ -87449,7 +87583,10 @@ function useDesktopRoute() {
   useEffect133(() => {
     let live = true;
     studioApiFetch(ROUTE).then((res) => res.ok ? res.json() : null).then((body) => {
-      if (live && body?.available === true) setRoute({ handoff: body.handoff === true });
+      if (!live || body?.available !== true) return;
+      const handoff = body.handoff === true;
+      const downloadUrl = typeof body.downloadUrl === "string" ? body.downloadUrl : null;
+      if (handoff || downloadUrl) setRoute({ handoff, downloadUrl });
     }).catch(() => {
     });
     return () => {
@@ -87491,7 +87628,7 @@ function OpenInDesktopButton() {
   const open = async () => {
     if (!route.handoff) {
       trackStudioEvent("toolbar_action", { action: "open_in_desktop" });
-      setDownloadUrl(DOWNLOAD_URL);
+      setDownloadUrl(route.downloadUrl);
       return;
     }
     if (opening) return;
@@ -87501,7 +87638,7 @@ function OpenInDesktopButton() {
       const res = await studioApiFetch(ROUTE, { method: "POST" });
       const result = await res.json();
       if (result.opened) {
-        showToast("Framey is opening this project in HyperFrames Studio", "info");
+        showToast("Framey is opening this project in the HyperFrames desktop app", "info");
         await new Promise((done) => setTimeout(done, OPENING_MS));
       } else setDownloadUrl(result.downloadUrl);
     } catch {
@@ -87523,17 +87660,20 @@ function OpenInDesktopButton() {
       arrow: true,
       "aria-label": "Meet Framey",
       className: "w-72",
-      trigger: /* @__PURE__ */ jsx203(
+      trigger: /* @__PURE__ */ jsxs161(
         Button,
         {
           ref: trigger,
           variant: "ghost",
           "data-testid": "header-open-in-desktop",
           "data-opening": opening || void 0,
-          title: "Open this project in HyperFrames Studio, the desktop app, and edit it with Framey",
-          className: "hf-framey-trigger gap-1.5 pl-1.5",
-          icon: /* @__PURE__ */ jsx203(FrameyGlyph, { size: 20, className: "hf-framey", eyeRef: eye }),
-          children: opening ? "Opening in the app\u2026" : "Edit with Framey"
+          title: "Open this project in the HyperFrames desktop app and edit it with Framey",
+          className: "hf-framey-trigger gap-1.5 border border-accent/40 bg-accent/10 pl-1 font-semibold text-text-0 enabled:hover:bg-accent/20",
+          icon: /* @__PURE__ */ jsx203(FrameyGlyph, { size: 24, className: "hf-framey", eyeRef: eye }),
+          children: [
+            opening ? "Opening in the app\u2026" : "Edit with Framey",
+            !opening && /* @__PURE__ */ jsx203("span", { className: "rounded-full bg-accent px-1.5 text-[10px] leading-4 font-bold text-on-accent", children: "New" })
+          ]
         }
       ),
       children: [
@@ -87541,7 +87681,7 @@ function OpenInDesktopButton() {
           /* @__PURE__ */ jsx203(FrameyGlyph, { size: 36 }),
           /* @__PURE__ */ jsx203("p", { className: "text-step-12 font-medium text-text-0", children: "Meet Framey" })
         ] }),
-        /* @__PURE__ */ jsx203("p", { className: "mt-2 text-text-3", children: "I live in HyperFrames Studio, the free desktop app for macOS:" }),
+        /* @__PURE__ */ jsx203("p", { className: "mt-2 text-balance text-text-3", children: "I live in the free HyperFrames desktop app:" }),
         /* @__PURE__ */ jsxs161("ul", { className: "mt-1.5 grid gap-1 text-text-1", children: [
           /* @__PURE__ */ jsx203("li", { children: "Chat to change anything in the video" }),
           /* @__PURE__ */ jsx203("li", { children: "Draw on a frame to point at it" }),
@@ -87557,7 +87697,7 @@ function OpenInDesktopButton() {
               rel: "noopener noreferrer",
               className: cn(buttonBase, buttonVariants.primary, buttonSizes.md),
               onClick: () => trackStudioEvent("toolbar_action", { action: "get_desktop_app" }),
-              children: "Get HyperFrames Studio"
+              children: "Get the desktop app"
             }
           )
         ] })
@@ -92969,7 +93109,7 @@ var RenderQueueItem = memo54(function RenderQueueItem2({
 // src/components/renders/FfmpegRequiredNotice.tsx
 import { memo as memo55, useEffect as useEffect148, useRef as useRef181, useState as useState148 } from "react";
 import { jsx as jsx228, jsxs as jsxs183 } from "react/jsx-runtime";
-var DOWNLOAD_URL2 = "https://ffmpeg.org/download.html";
+var DOWNLOAD_URL = "https://ffmpeg.org/download.html";
 var CUE_MS = 1600;
 var FOCUS_RING = "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent";
 var FfmpegRequiredNotice = memo55(function FfmpegRequiredNotice2({
@@ -93033,7 +93173,7 @@ var FfmpegRequiredNotice = memo55(function FfmpegRequiredNotice2({
           /* @__PURE__ */ jsx228(
             "a",
             {
-              href: DOWNLOAD_URL2,
+              href: DOWNLOAD_URL,
               target: "_blank",
               rel: "noreferrer",
               className: `rounded-xs py-0.5 text-[10px] text-panel-text-2 underline-offset-2 transition-colors hover:text-panel-text-0 hover:underline ${FOCUS_RING}`,