hyperframes 0.8.78 → 0.8.79

package/dist/studio/index.js

@@ -21,6 +21,7 @@ import {
   getDomEditTargetKey,
   getDomLayerPatchTarget,
   getSelectorIndex,
+  getSourceFileForElement,
   getSourceScopedSelectorIndex,
   isElementComputedVisible,
   isElementVisibleThroughAncestors,
@@ -34,7 +35,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-5VANA2TG.js";
+} from "./chunk-I7XNAIOF.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -4179,6 +4180,7 @@ var Player = forwardRef3(
         }
         player.setAttribute("shader-capture-scale", "1");
         player.setAttribute("shader-loading", "player");
+        player.setAttribute("low-power-idle", "");
         player.setAttribute("width", String(portrait ? 1080 : 1920));
         player.setAttribute("height", String(portrait ? 1920 : 1080));
         player.style.width = "100%";
@@ -22638,6 +22640,85 @@ async function saveProjectFilesWithHistory({
 // src/utils/gsapSoftReload.ts
 import { COLOR_GRADING_SOURCE_HIDDEN_ATTR as COLOR_GRADING_SOURCE_HIDDEN_ATTR2 } from "@hyperframes/core/color-grading";
 
+// src/utils/authoredSource.ts
+import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
+function parseSavedSource(html2) {
+  return new DOMParser().parseFromString(ensureHfIds(html2), "text/html");
+}
+var rootsByDoc = /* @__PURE__ */ new WeakMap();
+function searchRoots(root) {
+  const templates = Array.from(root.querySelectorAll("template")).filter(isCompositionTemplate);
+  return [root, ...templates.flatMap((template) => searchRoots(template.content))];
+}
+function findByAttribute(doc, name, value) {
+  let roots = rootsByDoc.get(doc);
+  if (!roots) rootsByDoc.set(doc, roots = searchRoots(doc));
+  const selector = `[${name}="${value.replace(/["\\]/g, "\\$&")}"]`;
+  for (const root of roots) {
+    const match = root.querySelector(selector);
+    if (match) return match;
+  }
+  return null;
+}
+function findAuthoredElement(doc, live) {
+  const hfId = live.getAttribute("data-hf-id");
+  if (hfId) return findByAttribute(doc, "data-hf-id", hfId);
+  return live.id ? findByAttribute(doc, "id", live.id) : null;
+}
+function findAuthoredElementById(doc, live) {
+  return live.id ? findByAttribute(doc, "id", live.id) : null;
+}
+var PATH_ATTRS = ["src", "href"];
+var CSS_URL = /\burl\(\s*(["']?)([^)"'\s](?:[^)"']*[^)"'\s])?)\1\s*\)/g;
+function isRelative(path) {
+  return !!path && !/^(?:[a-z][a-z\d+.-]*:|\/|#)/i.test(path);
+}
+function toProjectPath(sourceFile, path) {
+  const parts = sourceFile.split("/").slice(0, -1);
+  for (const part of path.split("/")) {
+    if (part === "..") parts.pop();
+    else if (part !== "." && part !== "") parts.push(part);
+  }
+  return parts.join("/");
+}
+function livePathsOf(live) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const el of [live, ...Array.from(live.querySelectorAll("*"))]) {
+    for (const attr of PATH_ATTRS) paths.add(el.getAttribute(attr) ?? "");
+    for (const match of (el.getAttribute("style") ?? "").matchAll(CSS_URL)) paths.add(match[2]);
+  }
+  return paths;
+}
+function authoredMarkup(authored, live, sourceFile) {
+  if (!sourceFile.includes("/")) return authored.outerHTML;
+  const livePaths = livePathsOf(live);
+  const rebase = (path) => {
+    if (!isRelative(path)) return path;
+    const cut = path.search(/[?#]/);
+    const suffix = cut < 0 ? "" : path.slice(cut);
+    const rebased = toProjectPath(sourceFile, cut < 0 ? path : path.slice(0, cut)) + suffix;
+    return path.startsWith("../") || livePaths.has(rebased) ? rebased : path;
+  };
+  const copy = authored.cloneNode(true);
+  for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
+    for (const attr of PATH_ATTRS) {
+      const value = el.getAttribute(attr);
+      if (value) el.setAttribute(attr, rebase(value.trim()));
+    }
+    const style = el.getAttribute("style");
+    if (style) {
+      el.setAttribute(
+        "style",
+        style.replace(
+          CSS_URL,
+          (_, quote, url) => `url(${quote}${rebase(url)}${quote})`
+        )
+      );
+    }
+  }
+  return copy.outerHTML;
+}
+
 // src/utils/authoredOpacity.ts
 import { COLOR_GRADING_AUTHORED_OPACITY_ATTR } from "@hyperframes/core/color-grading";
 function readStampedAuthoredOpacity(element) {
@@ -22751,15 +22832,12 @@ function applySoftReload(iframe, scriptText, options = {}) {
   const findAuthoredSource = (el) => {
     if (authoredDoc === void 0) {
       try {
-        authoredDoc = authoredHtml ? new DOMParser().parseFromString(authoredHtml, "text/html") : null;
+        authoredDoc = authoredHtml ? parseSavedSource(authoredHtml) : null;
       } catch {
         authoredDoc = null;
       }
     }
-    if (!authoredDoc) return null;
-    const hfId = el.getAttribute("data-hf-id");
-    if (hfId) return authoredDoc.querySelector(`[data-hf-id="${hfId}"]`);
-    return el.id ? authoredDoc.getElementById(el.id) : null;
+    return authoredDoc ? findAuthoredElement(authoredDoc, el) : null;
   };
   const readAuthoredOpacity = (el) => {
     const source = findAuthoredSource(el);
@@ -26155,6 +26233,7 @@ async function decodeFrames(sink, timestamps, signal, resources) {
     throwIfAborted(signal);
     resources.urls.push(URL.createObjectURL(blob));
   }
+  throwIfAborted(signal);
 }
 function loadedResult(resources, aspect, width, height) {
   const firstUrl = resources.urls[0];
@@ -26188,8 +26267,12 @@ async function decodeVideoThumbnail(request, signal, budgets = TIMELINE_VIEWPORT
     }
     const metadataDuration = await track2.getDurationFromMetadata({ skipLiveWait: true });
     throwIfAborted(signal);
-    const sourceDuration = Math.max(0, metadataDuration ?? request.sourceRangeDuration ?? 0);
-    const sourceStart = Math.min(Math.max(0, request.sourceStart ?? 0), sourceDuration);
+    const requestedStart = Math.max(0, request.sourceStart ?? 0);
+    const sourceDuration = Math.max(
+      0,
+      metadataDuration ?? requestedStart + (request.sourceRangeDuration ?? 0)
+    );
+    const sourceStart = Math.min(requestedStart, sourceDuration);
     const requestedDuration = request.sourceRangeDuration ?? Math.max(0, sourceDuration - sourceStart);
     const duration = Math.min(
       Math.max(0, requestedDuration),
@@ -26200,6 +26283,16 @@ async function decodeVideoThumbnail(request, signal, budgets = TIMELINE_VIEWPORT
       duration,
       Math.min(request.frameCount, budgets.richPreviewFrameCount)
     );
+    const keys = new mediabunny.EncodedPacketSink(track2);
+    const maxKeyframeLead = duration / Math.max(2, timestamps.length - 1) / 2;
+    async function* decodeTimesAtNearbyKeyframes() {
+      for (const time of timestamps) {
+        const key2 = await keys.getKeyPacket(time, { metadataOnly: true });
+        if (signal.aborted) return;
+        const near2 = key2 && key2.timestamp >= sourceStart && time - key2.timestamp <= maxKeyframeLead;
+        yield near2 ? key2.timestamp : time;
+      }
+    }
     const aspect = displayWidth / displayHeight;
     const target = targetDimensions(aspect, budgets);
     const sink = new mediabunny.CanvasSink(track2, {
@@ -26208,7 +26301,7 @@ async function decodeVideoThumbnail(request, signal, budgets = TIMELINE_VIEWPORT
       fit: request.fit ?? "cover",
       poolSize: 1
     });
-    await decodeFrames(sink, timestamps, signal, resources);
+    await decodeFrames(sink, decodeTimesAtNearbyKeyframes(), signal, resources);
     return loadedResult(resources, aspect, target.width, target.height);
   } catch (error) {
     releaseDecodedResources(resources);
@@ -26398,7 +26491,7 @@ var VideoThumbnail = memo17(function VideoThumbnail2({
   useMountEffect(() => () => observerRef.current?.disconnect());
   return /* @__PURE__ */ jsxs59("div", { ref: setContainerRef, className: "absolute inset-0 overflow-hidden", children: [
     urls.length > 0 && /* @__PURE__ */ jsx84("div", { className: "absolute inset-0 flex", children: Array.from({ length: frameCount }, (_, index) => {
-      const src = urls[index % urls.length];
+      const src = urls[Math.round(index * (urls.length - 1) / Math.max(1, frameCount - 1))];
       return /* @__PURE__ */ jsx84(
         "div",
         {
@@ -28236,24 +28329,32 @@ function useTimelineSyncCallbacks({
       if (initializeAdapter(context)) return;
       const iframe = iframeRef.current;
       let settled = false;
+      let retryFrame = 0;
+      const stopWaiting = () => {
+        window.removeEventListener("message", onMessage);
+        cancelAnimationFrame(retryFrame);
+      };
       const trySettle = () => {
         if (settled) return;
         if (initializeAdapter(context)) {
           settled = true;
-          window.removeEventListener("message", onMessage);
+          stopWaiting();
           if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
+          return;
         }
+        cancelAnimationFrame(retryFrame);
+        retryFrame = requestAnimationFrame(trySettle);
       };
       const onMessage = (e) => {
         if (isPreviewReadinessMessage(e, iframe)) trySettle();
       };
       window.addEventListener("message", onMessage);
-      stopWaitingRef.current = () => window.removeEventListener("message", onMessage);
+      stopWaitingRef.current = stopWaiting;
       probeIntervalRef.current = setTimeout(() => {
         if (!settled) {
           trySettle();
         }
-        window.removeEventListener("message", onMessage);
+        stopWaiting();
         if (!settled) onLoadGiveUp?.(context);
         revealIframe(iframeRef.current);
       }, 5e3);
@@ -29218,7 +29319,12 @@ function useTimelinePlayer({
     pause,
     seek
   });
-  const { processTimelineMessageRef, enrichMissingCompositionsRef, onIframeLoad } = useTimelineSyncCallbacks({
+  const {
+    processTimelineMessageRef,
+    enrichMissingCompositionsRef,
+    onIframeLoad,
+    cancelPendingLoad
+  } = useTimelineSyncCallbacks({
     iframeRef,
     probeIntervalRef,
     pendingSeekRef,
@@ -29289,8 +29395,8 @@ function useTimelinePlayer({
     applyPreviewVariablesToUrl(url);
     beginShadowReload(url.toString());
   }, [saveSeekPosition, getAdapter, beginShadowReload]);
-  const getAdapterRef = useRef53(getAdapter);
-  getAdapterRef.current = getAdapter;
+  const pauseRef = useRef53(pause);
+  pauseRef.current = pause;
   useMountEffect(() => {
     const handleWindowKeyDown = (e) => playbackKeyDownRef.current(e);
     const handleWindowKeyUp = (e) => playbackKeyUpRef.current(e);
@@ -29303,14 +29409,7 @@ function useTimelinePlayer({
       syncTimelineElements
     });
     const handleVisibilityChange = () => {
-      if (document.hidden && usePlayerStore.getState().isPlaying) {
-        const adapter = getAdapterRef.current?.();
-        if (adapter) {
-          adapter.pause();
-          setIsPlaying(false);
-          stopRAFLoop();
-        }
-      }
+      if (document.hidden && usePlayerStore.getState().isPlaying) pauseRef.current();
     };
     window.addEventListener("keydown", handleWindowKeyDown, true);
     window.addEventListener("keyup", handleWindowKeyUp, true);
@@ -29327,15 +29426,15 @@ function useTimelinePlayer({
       stopReverseLoop();
       stopScrubPreviewAudio();
       releaseStaticSeekCache(staticSeekAdapterRef, staticSeekWarnedRef);
-      if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
+      cancelPendingLoad();
     };
   });
   const resetPlayer = useCallback41(() => {
     stopRAFLoop();
     stopReverseLoop();
-    if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
+    cancelPendingLoad();
     usePlayerStore.getState().reset();
-  }, [stopRAFLoop, stopReverseLoop]);
+  }, [stopRAFLoop, stopReverseLoop, cancelPendingLoad]);
   useEffect36(() => {
     return usePlayerStore.subscribe((state, prev) => {
       const playbackRateChanged = state.playbackRate !== prev.playbackRate;
@@ -34111,7 +34210,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-IGPLTI5E.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-MHFDKAQ7.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -71667,7 +71766,43 @@ function useTimelineAssetDropOps({
 }
 
 // src/hooks/timelineAudioGroupVolume.ts
-import { useCallback as useCallback106, useRef as useRef139 } from "react";
+import { useCallback as useCallback107, useRef as useRef139 } from "react";
+
+// src/hooks/timelineEditPermission.ts
+import { useCallback as useCallback106 } from "react";
+function projectForTimelineSave(isRecording, projectId, showToast) {
+  if (isRecording) {
+    showToast("Cannot edit timeline while recording", "error");
+    return { status: "refused", reason: "Cannot edit timeline while recording" };
+  }
+  return projectId ?? { status: "failed", reason: "No project is open" };
+}
+function timelineEditRefusal(canEdit, targets) {
+  for (const element of targets) {
+    const verdict = canEdit?.(element) ?? true;
+    if (verdict !== true) return verdict.reason;
+  }
+  return null;
+}
+function useTimelineEditRefusal(canEdit, showToast) {
+  return useCallback106(
+    (targets) => {
+      const reason = timelineEditRefusal(canEdit, targets);
+      if (reason !== null) showToast(reason, "error");
+      return reason;
+    },
+    [canEdit, showToast]
+  );
+}
+function useTimelineEditGate(canEdit, showToast) {
+  const refuse = useTimelineEditRefusal(canEdit, showToast);
+  return useCallback106(
+    (targets) => refuse(targets) === null,
+    [refuse]
+  );
+}
+
+// src/hooks/timelineAudioGroupVolume.ts
 import { HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR8 } from "@hyperframes/core/audio-fx";
 import { HF_AUDIO_AUTOMATION_ATTR as HF_AUDIO_AUTOMATION_ATTR5 } from "@hyperframes/core/audio-automation";
 function patchLiveGroupAttribute(iframe, groupId, attr, value) {
@@ -71734,7 +71869,7 @@ async function setAudioGroupAttribute({
   const groupEl = previewIframe?.contentDocument?.getElementById(groupId) ?? null;
   const targetPath = resolveGroupSourceFile(groupEl) || activeCompPath || "index.html";
   const patchTarget = buildPatchTarget({ domId: groupId });
-  if (!patchTarget) return [];
+  if (!patchTarget) return null;
   return persistElementAttribute({
     projectId,
     targetPath,
@@ -71759,7 +71894,7 @@ function useSetAudioGroupAttribute({
   isRecordingRef
 }) {
   const liveBeforeRef = useRef139(/* @__PURE__ */ new Map());
-  const setLive = useCallback106(
+  const setLive = useCallback107(
     (groupId, attr, value) => {
       const key2 = audioGroupAttributeLiveKey(groupId, attr);
       const target = previewIframeRef.current?.contentDocument?.getElementById(groupId);
@@ -71771,7 +71906,7 @@ function useSetAudioGroupAttribute({
     },
     [previewIframeRef]
   );
-  const revertLive = useCallback106(
+  const revertLive = useCallback107(
     (groupId, attr) => {
       const key2 = audioGroupAttributeLiveKey(groupId, attr);
       if (!liveBeforeRef.current.has(key2)) return;
@@ -71790,16 +71925,12 @@ function useSetAudioGroupAttribute({
     },
     [previewIframeRef]
   );
-  const setQuiet = useCallback106(
+  const setQuiet = useCallback107(
     async (groupId, attr, value, label) => {
-      if (isRecordingRef?.current) {
-        showToast("Cannot edit timeline while recording", "error");
-        return;
-      }
-      const pid = projectIdRef.current;
-      if (!pid) return;
+      const pid = projectForTimelineSave(isRecordingRef?.current, projectIdRef.current, showToast);
+      if (typeof pid !== "string") return pid;
       try {
-        await setAudioGroupAttribute({
+        const written = await setAudioGroupAttribute({
           projectId: pid,
           activeCompPath,
           groupId,
@@ -71812,7 +71943,9 @@ function useSetAudioGroupAttribute({
           pendingTimelineEditPathRef
         });
         liveBeforeRef.current.delete(audioGroupAttributeLiveKey(groupId, attr));
+        if (!written) return { status: "failed", reason: "This group has no id to save it by" };
         syncStoredGroupAttribute(groupId, attr, value);
+        return { status: "saved" };
       } catch (error) {
         const live = previewIframeRef.current?.contentDocument?.getElementById(groupId);
         syncStoredGroupAttribute(groupId, attr, live?.getAttribute(attr) ?? null);
@@ -71820,6 +71953,7 @@ function useSetAudioGroupAttribute({
         const message = error instanceof Error ? error.message : "Failed to update group";
         showToast(message);
         liveBeforeRef.current.delete(audioGroupAttributeLiveKey(groupId, attr));
+        return { status: "failed", reason: message };
       }
     },
     [
@@ -71837,7 +71971,7 @@ function useSetAudioGroupAttribute({
 }
 
 // src/hooks/timelineElementFxAttribute.ts
-import { useCallback as useCallback107, useRef as useRef140 } from "react";
+import { useCallback as useCallback108, useRef as useRef140 } from "react";
 function patchLiveElementAttribute(iframe, element, attr, value, activeCompPath) {
   const target = findTimelineElementInIframe(iframe, element, activeCompPath);
   if (!target) return;
@@ -71861,7 +71995,7 @@ async function setElementAttribute({
 }) {
   const targetPath = element.sourceFile || activeCompPath || "index.html";
   const patchTarget = buildPatchTarget(element);
-  if (!patchTarget) return [];
+  if (!patchTarget) return null;
   return persistElementAttribute({
     projectId,
     targetPath,
@@ -71886,7 +72020,7 @@ function useSetElementAttribute({
   isRecordingRef
 }) {
   const liveBeforeRef = useRef140(/* @__PURE__ */ new Map());
-  const setLive = useCallback107(
+  const setLive = useCallback108(
     (element, attr, value) => {
       const key2 = elementAttributeLiveKey(element, activeCompPath, attr);
       const target = findTimelineElementInIframe(previewIframeRef.current, element, activeCompPath);
@@ -71897,7 +72031,7 @@ function useSetElementAttribute({
     },
     [previewIframeRef, activeCompPath]
   );
-  const revertLive = useCallback107(
+  const revertLive = useCallback108(
     (element, attr) => {
       const key2 = elementAttributeLiveKey(element, activeCompPath, attr);
       if (!liveBeforeRef.current.has(key2)) return;
@@ -71912,16 +72046,13 @@ function useSetElementAttribute({
     },
     [previewIframeRef, activeCompPath]
   );
-  const setQuiet = useCallback107(
+  const setQuiet = useCallback108(
     async (element, attr, value, label) => {
-      if (isRecordingRef?.current) {
-        showToast("Cannot edit timeline while recording", "error");
-        return;
-      }
-      const pid = projectIdRef.current;
-      if (!pid) return;
+      const pid = projectForTimelineSave(isRecordingRef?.current, projectIdRef.current, showToast);
+      if (typeof pid !== "string") return pid;
+      const liveKey = elementAttributeLiveKey(element, activeCompPath, attr);
       try {
-        await setElementAttribute({
+        const written = await setElementAttribute({
           projectId: pid,
           activeCompPath,
           element,
@@ -71933,12 +72064,15 @@ function useSetElementAttribute({
           recordEdit,
           pendingTimelineEditPathRef
         });
-        liveBeforeRef.current.delete(elementAttributeLiveKey(element, activeCompPath, attr));
+        liveBeforeRef.current.delete(liveKey);
+        if (written) return { status: "saved" };
+        return { status: "failed", reason: "This clip has no id to save it by" };
       } catch (error) {
         console.error("[Timeline] Failed to set element attribute", error);
         const message = error instanceof Error ? error.message : "Failed to update effect";
         showToast(message);
-        liveBeforeRef.current.delete(elementAttributeLiveKey(element, activeCompPath, attr));
+        liveBeforeRef.current.delete(liveKey);
+        return { status: "failed", reason: message };
       }
     },
     [
@@ -71956,7 +72090,7 @@ function useSetElementAttribute({
 }
 
 // src/hooks/useTimelineDeleteOps.ts
-import { useCallback as useCallback108, useRef as useRef141 } from "react";
+import { useCallback as useCallback109, useRef as useRef141 } from "react";
 function applyRippleShifts(survivors, changes) {
   if (!changes) return survivors;
   const newStartByElement = new Map(changes.map((c) => [c.element, c.start]));
@@ -71980,7 +72114,7 @@ function useTimelineDeleteOps({
   handleTimelineGroupMove
 }) {
   const rippleNoticeShownRef = useRef141(false);
-  const handleTimelineElementsDelete = useCallback108(
+  const handleTimelineElementsDelete = useCallback109(
     // fallow-ignore-next-line complexity
     async (selection) => {
       if (isRecordingRef?.current) {
@@ -72113,7 +72247,7 @@ function useTimelineDeleteOps({
       handleTimelineGroupMove
     ]
   );
-  const handleTimelineElementDelete = useCallback108(
+  const handleTimelineElementDelete = useCallback109(
     async (element) => {
       await handleTimelineElementsDelete([element]);
     },
@@ -72123,10 +72257,10 @@ function useTimelineDeleteOps({
 }
 
 // src/hooks/useTrackPendingTimelineEdit.ts
-import { useCallback as useCallback109, useRef as useRef142 } from "react";
+import { useCallback as useCallback110, useRef as useRef142 } from "react";
 function useTrackPendingTimelineEdit() {
   const wrappedRef = useRef142(/* @__PURE__ */ new WeakMap());
-  return useCallback109((fn) => {
+  return useCallback110((fn) => {
     const key2 = fn;
     const cached5 = wrappedRef.current.get(key2);
     if (cached5) return cached5;
@@ -72141,11 +72275,11 @@ function useTrackPendingTimelineEdit() {
 }
 
 // src/hooks/timelineAudioGroupCreate.ts
-import { useCallback as useCallback111 } from "react";
+import { useCallback as useCallback112 } from "react";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR4, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG6 } from "@hyperframes/core/audio-groups";
 
 // src/hooks/timelineTrackVisibility.ts
-import { useCallback as useCallback110 } from "react";
+import { useCallback as useCallback111 } from "react";
 function getTimelineElementTargetPath(element, activeCompPath) {
   return element.sourceFile || activeCompPath || "index.html";
 }
@@ -72305,7 +72439,7 @@ function useTimelineTrackVisibilityEditing({
   forceReloadSdkSession
 }) {
   const timelineElements = usePlayerStore((state) => state.elements);
-  return useCallback110(
+  return useCallback111(
     async (track2, hidden, displayNumber) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -72359,7 +72493,7 @@ function useTimelineElementVisibilityEditing({
   forceReloadSdkSession
 }) {
   const timelineElements = usePlayerStore((state) => state.elements);
-  return useCallback110(
+  return useCallback111(
     async (elementKey3, hidden) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -72552,7 +72686,7 @@ function useAudioGroupCarveAssignment({
   checkEditable
 }) {
   const timelineElements = usePlayerStore((state) => state.elements);
-  return useCallback111(
+  return useCallback112(
     async (clipIds, groupId, groupLabel2) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -72607,7 +72741,7 @@ function useAudioGroupCarveAssignment({
 }
 
 // src/hooks/useTimelineGroupEditing.ts
-import { useCallback as useCallback112 } from "react";
+import { useCallback as useCallback113 } from "react";
 function targetPathFor(element, activeCompPath) {
   return element.sourceFile || activeCompPath || "index.html";
 }
@@ -72646,7 +72780,7 @@ function useTimelineGroupEditing({
   showToast,
   writeProjectFile
 }) {
-  const enqueueGroupOperation = useCallback112(
+  const enqueueGroupOperation = useCallback113(
     (label, operation) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -72665,7 +72799,7 @@ function useTimelineGroupEditing({
     },
     [editQueueRef, isRecordingRef, projectIdRef, showToast]
   );
-  const persistServerBatch = useCallback112(
+  const persistServerBatch = useCallback113(
     async (projectId, label, batchChanges, coalesceKey, coalesceMs) => {
       await persistTimelineBatchEdit({
         projectId,
@@ -72688,7 +72822,7 @@ function useTimelineGroupEditing({
       writeProjectFile
     ]
   );
-  const trySdkBatchPersist = useCallback112(
+  const trySdkBatchPersist = useCallback113(
     async (input) => {
       const sharedPath = allChangesSharePath(input.changes, activeCompPath);
       const canUseSdk = !input.needsExtension && sharedPath !== null && input.eligible && input.sdkChanges.every((change) => change !== null);
@@ -72724,7 +72858,7 @@ function useTimelineGroupEditing({
       writeProjectFile
     ]
   );
-  const handleTimelineGroupMove = useCallback112(
+  const handleTimelineGroupMove = useCallback113(
     (changes, options) => {
       if (changes.length === 0) return Promise.resolve();
       for (const change of changes) {
@@ -72818,7 +72952,7 @@ function useTimelineGroupEditing({
       invalidateGsapCache
     ]
   );
-  const handleTimelineGroupResize = useCallback112(
+  const handleTimelineGroupResize = useCallback113(
     (changes, options) => {
       if (changes.length === 0) return Promise.resolve();
       for (const change of changes) {
@@ -72920,11 +73054,11 @@ function useTimelineGroupEditing({
 }
 
 // src/hooks/useBlockedTimelineEditToast.ts
-import { useCallback as useCallback113, useRef as useRef143 } from "react";
+import { useCallback as useCallback114, useRef as useRef143 } from "react";
 var BLOCKED_TOAST_INTERVAL_MS = 1500;
 function useBlockedTimelineEditToast(showToast) {
   const lastAtRef = useRef143(0);
-  return useCallback113(
+  return useCallback114(
     (_element) => {
       const now2 = Date.now();
       if (now2 - lastAtRef.current < BLOCKED_TOAST_INTERVAL_MS) return;
@@ -72935,25 +73069,6 @@ function useBlockedTimelineEditToast(showToast) {
   );
 }
 
-// src/hooks/timelineEditPermission.ts
-import { useCallback as useCallback114 } from "react";
-function useTimelineEditGate(canEdit, showToast) {
-  return useCallback114(
-    (targets) => {
-      if (!canEdit) return true;
-      for (const element of targets) {
-        const verdict = canEdit(element);
-        if (verdict !== true) {
-          showToast(verdict.reason, "error");
-          return false;
-        }
-      }
-      return true;
-    },
-    [canEdit, showToast]
-  );
-}
-
 // src/hooks/useTimelineEditing.ts
 function useTimelineEditing({
   projectId,
@@ -72980,8 +73095,9 @@ function useTimelineEditing({
   const editQueueRef = useRef144(Promise.resolve());
   const track2 = useTrackPendingTimelineEdit();
   const checkEditable = useTimelineEditGate(canEdit, showToast);
-  const checkEditableRef = useRef144(checkEditable);
-  checkEditableRef.current = checkEditable;
+  const refuseEdit = useTimelineEditRefusal(canEdit, showToast);
+  const refuseEditRef = useRef144(refuseEdit);
+  refuseEditRef.current = refuseEdit;
   const guardedRef = useRef144(/* @__PURE__ */ new WeakMap());
   const guard = useCallback115(
     (resolveTargets, fn, onRefused) => {
@@ -72996,10 +73112,9 @@ function useTimelineEditing({
       entry2.resolveTargets = resolveTargets;
       entry2.onRefused = onRefused;
       entry2.wrapped = ((...args) => {
-        if (!checkEditableRef.current(entry2.resolveTargets(...args))) {
-          entry2.onRefused?.(...args);
-          return Promise.resolve();
-        }
+        const reason = refuseEditRef.current(entry2.resolveTargets(...args));
+        if (reason !== null)
+          return Promise.resolve(entry2.onRefused?.(reason, ...args));
         return fn(...args);
       });
       guardedRef.current.set(key2, entry2);
@@ -73340,6 +73455,22 @@ function useTimelineEditing({
     isRecordingRef,
     forceReloadSdkSession
   });
+  const refused = (reason) => ({ status: "refused", reason });
+  const audioGroupMembers = (groupId) => {
+    const state = usePlayerStore.getState();
+    const flatMembers = state.elements.filter((el) => el.audioGroup === groupId);
+    const domMembers = state.domClipChildren.filter((child) => child.audioGroup === groupId).map(
+      (child) => ({
+        id: child.id,
+        domId: child.id,
+        tag: "div",
+        start: 0,
+        duration: 0,
+        track: -1
+      })
+    );
+    return [...flatMembers, ...domMembers];
+  };
   const trackedRazorSplit = track2(guard((element) => [element], handleRazorSplit));
   return {
     handleTimelineElementMove: track2(guard((element) => [element], handleTimelineElementMove)),
@@ -73363,25 +73494,10 @@ function useTimelineEditing({
       // (timelineAudioGroupVolume.ts): a sub-composition's group members have
       // no flat twin, only a domClipChildren entry, so both are checked.
       setQuiet: track2(
-        guard(
-          (groupId) => {
-            const state = usePlayerStore.getState();
-            const flatMembers = state.elements.filter((el) => el.audioGroup === groupId);
-            const domMembers = state.domClipChildren.filter((child) => child.audioGroup === groupId).map(
-              (child) => ({
-                id: child.id,
-                domId: child.id,
-                tag: "div",
-                start: 0,
-                duration: 0,
-                track: -1
-              })
-            );
-            return [...flatMembers, ...domMembers];
-          },
-          setAudioGroupAttribute2.setQuiet,
-          (groupId, attr) => revertAudioGroupLive(groupId, attr)
-        )
+        guard(audioGroupMembers, setAudioGroupAttribute2.setQuiet, (reason, groupId, attr) => {
+          revertAudioGroupLive(groupId, attr);
+          return refused(reason);
+        })
       )
     },
     setElementFxAttribute: {
@@ -73390,7 +73506,10 @@ function useTimelineEditing({
         guard(
           (element) => [element],
           setElementFxAttribute.setQuiet,
-          (element, attr) => revertElementFxLive(element, attr)
+          (reason, element, attr) => {
+            revertElementFxLive(element, attr);
+            return refused(reason);
+          }
         )
       )
     },
@@ -81603,7 +81722,7 @@ function clipLabel(verb, clipCount) {
 function clipToast(verbPast, clipCount) {
   return clipCount > 1 ? `${verbPast} ${clipCount} clips` : `${verbPast} clip`;
 }
-function getElementOuterHtml(iframeRef, selection, activeCompositionPath) {
+function getSelectedDomElement(iframeRef, selection, activeCompositionPath) {
   let doc = null;
   try {
     doc = iframeRef.current?.contentDocument ?? null;
@@ -81611,7 +81730,21 @@ function getElementOuterHtml(iframeRef, selection, activeCompositionPath) {
     return null;
   }
   if (!doc) return null;
-  return findElementForSelection(doc, selection, activeCompositionPath)?.outerHTML ?? null;
+  return findElementForSelection(doc, selection, activeCompositionPath);
+}
+function savedMarkupElseLive(saved2, live, sourceFile) {
+  const authored = findAuthoredElement(saved2, live) ?? findAuthoredElementById(saved2, live);
+  return authored ? authoredMarkup(authored, live, sourceFile) : live.outerHTML;
+}
+async function readSavedMarkup(readSaved, paths, lives) {
+  const sources = /* @__PURE__ */ new Map();
+  return Promise.all(
+    paths.map(async (path, index) => {
+      if (!sources.has(path)) sources.set(path, readSaved(path).then(parseSavedSource));
+      const saved2 = await sources.get(path);
+      return savedMarkupElseLive(saved2, lives[index], path);
+    })
+  );
 }
 function tracksOverlap(a, b) {
   return a.track === b.track && timeRangesOverlap(a.start, a.start + a.duration, b.start, b.start + b.duration);
@@ -81685,68 +81818,111 @@ function useClipboard({
   reloadPreview,
   handleTimelineElementsDelete,
   handleDomEditElementDelete,
-  previewIframeRef
+  previewIframeRef,
+  waitForPendingDomEditSaves
 }) {
   const clipboardRef = useRef161(null);
   const projectIdRef = useRef161(projectId);
   projectIdRef.current = projectId;
-  const collectSelectedClips = useCallback145(() => {
+  const readSaved = useCallback145(
+    async (path) => {
+      const pid = projectIdRef.current;
+      if (!pid) throw new Error("No project is open.");
+      await waitForPendingDomEditSaves().catch(() => {
+      });
+      return serializeStudioFileMutations(
+        writeProjectFile,
+        [path],
+        () => readFileContent(pid, path)
+      );
+    },
+    [waitForPendingDomEditSaves, writeProjectFile]
+  );
+  const findSelectedClips = useCallback145(() => {
     const selected = getSelectedElements();
     if (selected.length === 0) return null;
-    const clips = [];
+    const lives = [];
     for (const element of selected) {
-      const html2 = findTimelineElementInIframe(previewIframeRef.current, element, activeCompPath)?.outerHTML ?? null;
-      if (!html2) {
+      const live = findTimelineElementInIframe(previewIframeRef.current, element, activeCompPath);
+      if (!live) {
         showToast(`Unable to copy "${element.label ?? element.id}".`, "info");
         return null;
       }
-      clips.push({
-        html: html2,
+      lives.push(live);
+    }
+    return { elements: selected, lives };
+  }, [activeCompPath, previewIframeRef, showToast]);
+  const readClips = useCallback145(
+    async (targets) => {
+      const paths = targets.elements.map((el) => el.sourceFile || activeCompPath || "index.html");
+      const markup = await readSavedMarkup(readSaved, paths, targets.lives);
+      return targets.elements.map((element, index) => ({
+        html: markup[index],
         start: element.start,
         duration: element.duration,
         // authoredTrack, not track: `track` can be a display-lane number
         // remapped by normalizeToZones, and writing THAT into data-track-index
         // re-targets the wrong track in the sparse authored file.
         track: element.authoredTrack ?? element.track
-      });
-    }
-    return { elements: selected, clips };
-  }, [activeCompPath, previewIframeRef, showToast]);
-  const handleCopy2 = useCallback145(() => {
-    if (usePlayerStore.getState().selectedElementId) {
-      const result = collectSelectedClips();
-      if (!result) return false;
-      const targetPath = result.elements[0]?.sourceFile || activeCompPath || "index.html";
-      clipboardRef.current = { kind: "timeline-clip", clips: result.clips, sourceFile: targetPath };
-      showToast(
-        result.clips.length > 1 ? `Copied ${result.clips.length} clips` : "Copied clip",
-        "info"
-      );
-      return true;
-    }
-    const domSelection = domEditSelectionRef.current;
-    if (domSelection) {
-      const html2 = getElementOuterHtml(previewIframeRef, domSelection, activeCompPath);
-      if (!html2) {
+      }));
+    },
+    [activeCompPath, readSaved]
+  );
+  const copyTimelineSelection = useCallback145(() => {
+    const targets = findSelectedClips();
+    if (!targets) return null;
+    const sourceFile = targets.elements[0]?.sourceFile || activeCompPath || "index.html";
+    return readClips(targets).then((clips) => {
+      showToast(clips.length > 1 ? `Copied ${clips.length} clips` : "Copied clip", "info");
+      return { kind: "timeline-clip", clips, sourceFile };
+    });
+  }, [activeCompPath, findSelectedClips, readClips, showToast]);
+  const copyDomSelection = useCallback145(
+    (domSelection) => {
+      const live = getSelectedDomElement(previewIframeRef, domSelection, activeCompPath);
+      if (!live) {
         showToast("Unable to copy this element.", "info");
-        return false;
+        return null;
       }
-      const targetPath = domSelection.sourceFile || activeCompPath || "index.html";
-      clipboardRef.current = {
-        kind: "dom-element",
-        html: html2,
-        sourceFile: targetPath,
-        originSelector: domSelection.selector,
-        originSelectorIndex: domSelection.selectorIndex
-      };
-      showToast("Copied element", "info");
-      return true;
+      const sourceFile = domSelection.sourceFile || activeCompPath || "index.html";
+      return readSaved(sourceFile).then((content) => {
+        showToast("Copied element", "info");
+        return {
+          kind: "dom-element",
+          html: savedMarkupElseLive(parseSavedSource(content), live, sourceFile),
+          sourceFile,
+          originSelector: domSelection.selector,
+          originSelectorIndex: domSelection.selectorIndex
+        };
+      });
+    },
+    [activeCompPath, previewIframeRef, readSaved, showToast]
+  );
+  const copyToClipboard = useCallback145(() => {
+    const domSelection = domEditSelectionRef.current;
+    let pending2;
+    if (usePlayerStore.getState().selectedElementId) pending2 = copyTimelineSelection();
+    else if (domSelection) pending2 = copyDomSelection(domSelection);
+    else {
+      showToast("Nothing selected to copy.", "info");
+      return null;
     }
-    showToast("Nothing selected to copy.", "info");
-    return false;
-  }, [activeCompPath, collectSelectedClips, domEditSelectionRef, previewIframeRef, showToast]);
+    if (!pending2) return null;
+    const own = pending2.catch((error) => {
+      showToast(error instanceof Error ? error.message : "Failed to copy", "error");
+      return null;
+    });
+    const previous = clipboardRef.current;
+    const settled = own.then((payload) => payload ?? previous);
+    clipboardRef.current = settled;
+    void settled.then((payload) => {
+      if (!payload && clipboardRef.current === settled) clipboardRef.current = null;
+    });
+    return own;
+  }, [copyDomSelection, copyTimelineSelection, domEditSelectionRef, showToast]);
+  const handleCopy2 = useCallback145(() => copyToClipboard() !== null, [copyToClipboard]);
   const handlePaste2 = useCallback145(async () => {
-    const payload = clipboardRef.current;
+    const payload = await clipboardRef.current;
     if (!payload) {
       showToast("Nothing to paste.", "info");
       return;
@@ -81789,14 +81965,15 @@ function useClipboard({
     }
   }, [activeCompPath, recordEdit, reloadPreview, showToast, writeProjectFile]);
   const handleDuplicate = useCallback145(async () => {
-    const result = collectSelectedClips();
-    if (!result) return false;
+    const targets = findSelectedClips();
+    if (!targets) return false;
     const pid = projectIdRef.current;
     if (!pid) return false;
-    const { elements, clips } = result;
+    const { elements } = targets;
     const targetPath = elements[0]?.sourceFile || activeCompPath || "index.html";
     const anchorTime = Math.max(...elements.map((el) => el.start + el.duration));
     try {
+      const clips = await readClips(targets);
       const originalContent = await readFileContent(pid, targetPath);
       const liveElements = usePlayerStore.getState().elements;
       const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements);
@@ -81823,7 +82000,8 @@ function useClipboard({
     }
   }, [
     activeCompPath,
-    collectSelectedClips,
+    findSelectedClips,
+    readClips,
     recordEdit,
     reloadPreview,
     showToast,
@@ -81831,19 +82009,24 @@ function useClipboard({
   ]);
   const handleCut = useCallback145(async () => {
     const selected = getSelectedElements();
-    const copied = handleCopy2();
-    if (!copied) return false;
+    const domSelection = domEditSelectionRef.current;
+    const copied = copyToClipboard();
+    if (!copied || !await copied) return false;
     if (selected.length > 0) {
       await handleTimelineElementsDelete(selected);
       return true;
     }
-    const domSelection = domEditSelectionRef.current;
     if (domSelection) {
       await handleDomEditElementDelete(domSelection);
       return true;
     }
     return true;
-  }, [handleCopy2, domEditSelectionRef, handleTimelineElementsDelete, handleDomEditElementDelete]);
+  }, [
+    copyToClipboard,
+    domEditSelectionRef,
+    handleTimelineElementsDelete,
+    handleDomEditElementDelete
+  ]);
   const canPaste = useCallback145(() => clipboardRef.current !== null, []);
   return { handleCopy: handleCopy2, handlePaste: handlePaste2, handleCut, handleDuplicate, canPaste };
 }
@@ -82283,16 +82466,24 @@ function useFrameCapture({
   showToast,
   waitForPendingDomEditSaves
 }) {
-  const [captureFrameTime, setCaptureFrameTime] = useState122(0);
+  const [captureFrameTime, setCaptureFrameTime] = useState122(
+    () => usePlayerStore.getState().currentTime
+  );
   const [capturing, setCapturing] = useState122(false);
   const capturingRef = useRef164(false);
-  useMountEffect(() => {
-    setCaptureFrameTime(usePlayerStore.getState().currentTime);
-    return liveTime.subscribe(setCaptureFrameTime);
-  });
-  const refreshCaptureFrameTime = useCallback147(() => {
-    setCaptureFrameTime(usePlayerStore.getState().currentTime);
+  const livePlayheadRef = useRef164(captureFrameTime);
+  useMountEffect(
+    () => liveTime.subscribe((time) => {
+      livePlayheadRef.current = time;
+    })
+  );
+  const playheadTime = useCallback147(() => {
+    const { isPlaying, currentTime } = usePlayerStore.getState();
+    return isPlaying ? livePlayheadRef.current : currentTime;
   }, []);
+  const refreshCaptureFrameTime = useCallback147(() => {
+    setCaptureFrameTime(playheadTime());
+  }, [playheadTime]);
   const handleCaptureFrameClick = useCallback147(
     async (event) => {
       if (!projectId) return;
@@ -82301,7 +82492,7 @@ function useFrameCapture({
       capturingRef.current = true;
       setCapturing(true);
       try {
-        const time = usePlayerStore.getState().currentTime;
+        const time = playheadTime();
         setCaptureFrameTime(time);
         await Promise.race([
           waitForPendingDomEditSaves(),
@@ -82352,7 +82543,7 @@ function useFrameCapture({
         setCapturing(false);
       }
     },
-    [activeCompPath, projectId, showToast, waitForPendingDomEditSaves]
+    [activeCompPath, playheadTime, projectId, showToast, waitForPendingDomEditSaves]
   );
   const captureFrameHref = projectId ? buildFrameCaptureUrl({
     projectId,
@@ -92593,7 +92784,8 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     reloadPreview,
     handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete,
     handleDomEditElementDelete: domEditDeleteBridge,
-    previewIframeRef
+    previewIframeRef,
+    waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves
   });
   const appHotkeys = useAppHotkeys({
     handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete,
@@ -92978,39 +93170,12 @@ function useElementPicker(iframeRef, options) {
       if (!activeIframe) return;
       if (e.source !== activeIframe.contentWindow && e.source !== iframeRef.current?.contentWindow)
         return;
-      if (data.type === "element-picked") {
-        const el = data.elementInfo;
-        if (el) {
-          const styles = readComputedStyles(activeIframe, el.selector);
-          setPickedElement({
-            id: el.id ?? null,
-            tagName: el.tagName ?? "div",
-            selector: el.selector ?? "",
-            label: el.label ?? el.tagName ?? "Element",
-            boundingBox: el.boundingBox ?? { x: 0, y: 0, width: 0, height: 0 },
-            textContent: el.textContent ?? null,
-            src: el.src ?? null,
-            dataAttributes: el.dataAttributes ?? {},
-            computedStyles: styles
-          });
-          setIsPickMode(false);
-        }
+      if (data.type === "element-picked" && data.elementInfo) {
+        setPickedElement(toPickedElement(data.elementInfo, activeIframe));
+        setIsPickMode(false);
       } else if (data.type === "element-pick-candidates") {
         const el = data.candidates?.[data.selectedIndex ?? 0];
-        if (el) {
-          const styles = readComputedStyles(activeIframe, el.selector);
-          setPickedElement({
-            id: el.id ?? null,
-            tagName: el.tagName ?? "div",
-            selector: el.selector ?? "",
-            label: el.label ?? el.tagName ?? "Element",
-            boundingBox: el.boundingBox ?? { x: 0, y: 0, width: 0, height: 0 },
-            textContent: el.textContent ?? null,
-            src: el.src ?? null,
-            dataAttributes: el.dataAttributes ?? {},
-            computedStyles: styles
-          });
-        }
+        if (el) setPickedElement(toPickedElement(el, activeIframe));
       }
       if (data.type === "pick-mode-cancelled") {
         setIsPickMode(false);
@@ -93021,19 +93186,19 @@ function useElementPicker(iframeRef, options) {
   });
   const optionsRef = useRef189(options);
   optionsRef.current = options;
+  const pendingWritesRef = useRef189(/* @__PURE__ */ new Map());
+  settlePendingWrites(pendingWritesRef.current, options?.workspaceFiles);
   const syncToSource = useCallback183(
-    (elementId2, selector, op) => {
+    (picked, live, iframe, op) => {
       const opts = optionsRef.current;
-      if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId2) return;
-      const files = opts.workspaceFiles;
-      const sourceFile = resolveSourceFile(elementId2, selector, files);
-      if (!sourceFile || !files[sourceFile]) {
-        return;
-      }
-      const patched = applyPatch(files[sourceFile], elementId2, op);
-      if (patched !== files[sourceFile]) {
-        opts.onSyncFiles({ [sourceFile]: patched });
-      }
+      if (!opts?.workspaceFiles || !opts.onSyncFiles) return;
+      const hfId = live.getAttribute("data-hf-id");
+      const pending2 = pendingWritesRef.current;
+      const files = withPendingWrites(opts.workspaceFiles, pending2);
+      const patch = picked.id ? patchById(files, picked.id, picked.selector, op) : hfId ? patchByHfId(files, hfId, ownSourceFile(live, iframe), op) : null;
+      if (!patch || patch.after === patch.before) return;
+      recordPendingWrite(pending2, patch.path, opts.workspaceFiles[patch.path], patch.after);
+      opts.onSyncFiles({ [patch.path]: patch.after });
     },
     []
   );
@@ -93052,27 +93217,11 @@ function useElementPicker(iframeRef, options) {
               computedStyles: { ...prev.computedStyles, [prop]: value }
             } : null
           );
-          if (pickedElement.id) {
-            syncToSource(pickedElement.id, pickedElement.selector, {
-              type: "inline-style",
-              property: prop,
-              value
-            });
-          } else {
-            try {
-              const fullHtml = activeIframe.contentDocument?.documentElement.outerHTML;
-              if (fullHtml && optionsRef.current?.onSyncFiles) {
-                const src = activeIframe.getAttribute("src") ?? "";
-                const compMatch = src.match(/\/comp\/(.+?)(?:\?|$)/);
-                const filePath = compMatch ? compMatch[1] : "index.html";
-                optionsRef.current.onSyncFiles({
-                  [filePath]: `<!DOCTYPE html>
-<html>${fullHtml.replace(/<html[^>]*>/, "")}`
-                });
-              }
-            } catch {
-            }
-          }
+          syncToSource(pickedElement, el, activeIframe, {
+            type: "inline-style",
+            property: prop,
+            value
+          });
         }
       } catch {
       }
@@ -93094,13 +93243,11 @@ function useElementPicker(iframeRef, options) {
               dataAttributes: { ...prev.dataAttributes, [attr]: value }
             } : null
           );
-          if (pickedElement.id) {
-            syncToSource(pickedElement.id, pickedElement.selector, {
-              type: "attribute",
-              property: attr,
-              value
-            });
-          }
+          syncToSource(pickedElement, el, activeIframe, {
+            type: "attribute",
+            property: attr,
+            value
+          });
         }
       } catch {
       }
@@ -93117,13 +93264,11 @@ function useElementPicker(iframeRef, options) {
         if (el) {
           el.textContent = text;
           setPickedElement((prev) => prev ? { ...prev, textContent: text } : null);
-          if (pickedElement.id) {
-            syncToSource(pickedElement.id, pickedElement.selector, {
-              type: "text-content",
-              property: "textContent",
-              value: text
-            });
-          }
+          syncToSource(pickedElement, el, activeIframe, {
+            type: "text-content",
+            property: "textContent",
+            value: text
+          });
         }
       } catch {
       }
@@ -93146,6 +93291,57 @@ function useElementPicker(iframeRef, options) {
     activeIframeRef
   };
 }
+function settlePendingWrites(pending2, files) {
+  for (const [path, write] of pending2) {
+    const hostSource = files?.[path];
+    if (hostSource === write.hostSource) continue;
+    const caughtUpTo = hostSource === void 0 ? -1 : write.writes.indexOf(hostSource);
+    if (caughtUpTo < 0 || caughtUpTo === write.writes.length - 1) {
+      pending2.delete(path);
+    } else {
+      write.hostSource = hostSource;
+      write.writes = write.writes.slice(caughtUpTo + 1);
+    }
+  }
+}
+function withPendingWrites(files, pending2) {
+  const merged = { ...files };
+  for (const [path, write] of pending2) merged[path] = write.writes.at(-1) ?? merged[path];
+  return merged;
+}
+function recordPendingWrite(pending2, path, hostSource, after) {
+  const write = pending2.get(path) ?? { hostSource, writes: [] };
+  write.writes.push(after);
+  pending2.set(path, write);
+}
+function toPickedElement(el, iframe) {
+  return {
+    id: el.id ?? null,
+    tagName: el.tagName ?? "div",
+    selector: el.selector ?? "",
+    label: el.label ?? el.tagName ?? "Element",
+    boundingBox: el.boundingBox ?? { x: 0, y: 0, width: 0, height: 0 },
+    textContent: el.textContent ?? null,
+    src: el.src ?? null,
+    dataAttributes: el.dataAttributes ?? {},
+    computedStyles: readComputedStyles(iframe, el.selector ?? "")
+  };
+}
+function patchById(files, id, selector, op) {
+  const path = resolveSourceFile(id, selector, files);
+  const before = path ? files[path] : void 0;
+  return path && before ? { path, before, after: applyPatch(before, id, op) } : null;
+}
+function ownSourceFile(live, iframe) {
+  const previewed = compositionPathOfPreviewUrl(iframe.getAttribute("src") ?? "");
+  return getSourceFileForElement(live, previewed).sourceFile;
+}
+function patchByHfId(files, hfId, ownFile, op) {
+  const matches = Object.keys(files).filter((file) => findTagByTarget(files[file] ?? "", { hfId }));
+  const path = matches.includes(ownFile) ? ownFile : matches.length === 1 ? matches[0] : void 0;
+  const before = path ? files[path] : void 0;
+  return path && before ? { path, before, after: applyPatchByTarget(before, { hfId }, op) } : null;
+}
 function readComputedStyles(iframe, selector) {
   const styles = {};
   try {