hyperframes 0.8.3 → 0.8.4

package/dist/studio/index.js

@@ -24,7 +24,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-AZYHQC6V.js";
+} from "./chunk-ZALQ3CW7.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -23822,20 +23822,6 @@ var NLEPreview = memo19(function NLEPreview2({
     document.addEventListener("wheel", handleWheel, { passive: false, capture: true });
     return () => document.removeEventListener("wheel", handleWheel, { capture: true });
   }, [applyZoom, applyPan]);
-  useEffect27(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    const handleDblClick = (event) => {
-      if (isPreviewAtFit(zoomRef.current)) return;
-      const rect = viewport.getBoundingClientRect();
-      if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) {
-        return;
-      }
-      applyZoom(DEFAULT_PREVIEW_ZOOM);
-    };
-    document.addEventListener("dblclick", handleDblClick, { capture: true });
-    return () => document.removeEventListener("dblclick", handleDblClick, { capture: true });
-  }, [applyZoom]);
   useEffect27(() => {
     const isInsideViewport = (clientX, clientY) => {
       const viewport = viewportRef.current;
@@ -26425,7 +26411,7 @@ function resolveElementForOverlay(doc, sel, activeCompositionPath, cacheRef) {
 
 // src/components/editor/marqueeCommit.ts
 var MARQUEE_THRESHOLD_PX = 4;
-function collectMarqueeHits(rect, iframe, overlayEl, activeCompositionPath) {
+function collectMarqueeCandidates(iframe, overlayEl, activeCompositionPath) {
   const doc = iframe.contentDocument;
   if (!doc) return [];
   const root = doc.querySelector("[data-composition-id]") ?? doc.body;
@@ -26438,28 +26424,32 @@ function collectMarqueeHits(rect, iframe, overlayEl, activeCompositionPath) {
     width: declW > 0 ? declW : rootEl.getBoundingClientRect().width || 1,
     height: declH > 0 ? declH : rootEl.getBoundingClientRect().height || 1
   };
-  const hits = [];
+  const candidates = [];
   for (const item of items) {
     const el = item.element;
     if (!isElementComputedVisible(el)) continue;
     if (coversComposition(el.getBoundingClientRect(), viewport)) continue;
     const overlayRect = toVisibleOverlayRect(overlayEl, iframe, el);
     if (!overlayRect) continue;
-    const r = {
-      left: overlayRect.left,
-      top: overlayRect.top,
-      width: overlayRect.width,
-      height: overlayRect.height
-    };
-    if (!rectsOverlap(rect, r)) continue;
-    hits.push({ element: el, rect: r });
+    candidates.push({
+      element: el,
+      rect: {
+        left: overlayRect.left,
+        top: overlayRect.top,
+        width: overlayRect.width,
+        height: overlayRect.height
+      }
+    });
   }
-  return hits;
+  return candidates;
+}
+function hitsWithin(rect, candidates) {
+  return candidates.filter((candidate) => rectsOverlap(rect, candidate.rect));
 }
-async function runMarqueeIntersection(rect, iframe, overlayEl, activeCompositionPath) {
+async function runMarqueeIntersection(rect, candidates, activeCompositionPath) {
   const isMasterView = !activeCompositionPath || activeCompositionPath === "index.html";
   const hits = [];
-  for (const { element } of collectMarqueeHits(rect, iframe, overlayEl, activeCompositionPath)) {
+  for (const { element } of hitsWithin(rect, candidates)) {
     const sel = await resolveDomEditSelection(element, {
       activeCompositionPath,
       isMasterView,
@@ -26473,13 +26463,15 @@ function useMarqueeGestures(deps) {
   const marqueeRef = useRef45(null);
   const [marqueeRect, setMarqueeRect] = useState29(null);
   const [candidateRects, setCandidateRects] = useState29([]);
+  const candidatesRef = useRef45(null);
   const commitMarquee = useCallback43(
     async (rect, additive) => {
       const iframe = deps.iframeRef.current;
       const overlay = deps.overlayRef.current;
       if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
       const acp = deps.activeCompositionPathRef.current ?? "index.html";
-      const hits = await runMarqueeIntersection(rect, iframe, overlay, acp);
+      const candidates = candidatesRef.current ?? collectMarqueeCandidates(iframe, overlay, acp);
+      const hits = await runMarqueeIntersection(rect, candidates, acp);
       deps.onMarqueeSelectRef.current(hits, additive);
     },
     [deps.iframeRef, deps.overlayRef, deps.onMarqueeSelectRef, deps.activeCompositionPathRef]
@@ -26497,6 +26489,7 @@ function useMarqueeGestures(deps) {
           const dy = m.currentY - m.startY;
           if (Math.hypot(dx, dy) < MARQUEE_THRESHOLD_PX) return;
           m.pastThreshold = true;
+          candidatesRef.current = null;
         }
         const rect = {
           left: Math.min(m.startX, m.currentX),
@@ -26509,7 +26502,8 @@ function useMarqueeGestures(deps) {
         const overlay = deps.overlayRef.current;
         if (iframe && overlay) {
           const acp = deps.activeCompositionPathRef.current ?? "index.html";
-          setCandidateRects(collectMarqueeHits(rect, iframe, overlay, acp).map((h) => h.rect));
+          candidatesRef.current ??= collectMarqueeCandidates(iframe, overlay, acp);
+          setCandidateRects(hitsWithin(rect, candidatesRef.current).map((h) => h.rect));
         }
         return;
       }
@@ -26541,6 +26535,7 @@ function useMarqueeGestures(deps) {
         }
         setMarqueeRect(null);
         setCandidateRects([]);
+        candidatesRef.current = null;
         return;
       }
       deps.gestures.onPointerUp(event);
@@ -26552,6 +26547,7 @@ function useMarqueeGestures(deps) {
       marqueeRef.current = null;
       setMarqueeRect(null);
       setCandidateRects([]);
+      candidatesRef.current = null;
       return;
     }
     deps.gestures.clearPointerState(deps.selectionRef);
@@ -26989,7 +26985,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-7AMZ7GFI.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-XRVXRTNX.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -30590,9 +30586,14 @@ function observeDoc(doc, markDirty) {
   });
   return observer;
 }
+var RECOMPUTE_INTERVAL_MS = 100;
+function rebuildDue(dirty, lastAt, now2) {
+  return dirty && now2 - lastAt >= RECOMPUTE_INTERVAL_MS;
+}
 function startOffCanvasIndicatorRefresh(options) {
   let frame = 0;
   let lastCompSig = "";
+  let lastRecomputeAt = Number.NEGATIVE_INFINITY;
   const markDirty = () => {
     options.dirtyRef.current = true;
   };
@@ -30621,7 +30622,9 @@ function startOffCanvasIndicatorRefresh(options) {
       if (options.dirtyRef.current) clearIndicators(options);
       return;
     }
-    if (!options.dirtyRef.current) return;
+    const now2 = performance.now();
+    if (!rebuildDue(options.dirtyRef.current, lastRecomputeAt, now2)) return;
+    lastRecomputeAt = now2;
     options.dirtyRef.current = false;
     recomputeOffCanvasIndicators(
       iframe,
@@ -35368,35 +35371,52 @@ function useElementLifecycleOps({
   commitDomEditPatchBatches,
   onElementDeleted
 }) {
-  const handleDomEditElementDelete = useCallback51(
+  const handleDomEditElementsDelete = useCallback51(
     // fallow-ignore-next-line complexity
-    async (selection) => {
+    async (selections) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const label = selection.label || selection.id || selection.selector || selection.tagName;
+      const [selection] = selections;
+      if (!selection) return;
+      const label = selections.length === 1 ? selection.label || selection.id || selection.selector || selection.tagName : `${selections.length} elements`;
+      if (selections.length > 1) showToast(`Deleting ${label}...`, "info");
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
+      const sameFile = selections.filter(
+        (candidate) => (candidate.sourceFile || activeCompPath || "index.html") === targetPath
+      );
       try {
         const originalContent = await readProjectFileContent(pid, targetPath);
-        const patchTarget = buildDomEditPatchTarget(selection);
-        if (!patchTarget.id && !patchTarget.selector && !patchTarget.hfId) {
+        const patchTargets = sameFile.map((member) => buildDomEditPatchTarget(member));
+        if (patchTargets.some((t) => !t.id && !t.selector && !t.hfId)) {
           throw new Error("Selected element has no patchable target");
         }
-        if (onTrySdkDelete && selection.hfId) {
-          const handled = await onTrySdkDelete(selection.hfId, originalContent, targetPath);
-          if (cutoverCommittedOrThrow(handled)) {
+        const hfIds = sameFile.map((member) => member.hfId).filter((hfId) => Boolean(hfId));
+        if (onTrySdkDelete && hfIds.length === sameFile.length) {
+          let allHandled = true;
+          for (const hfId of hfIds) {
+            const handled = await onTrySdkDelete(hfId, originalContent, targetPath);
+            if (!cutoverCommittedOrThrow(handled)) {
+              allHandled = false;
+              break;
+            }
+          }
+          if (allHandled) {
             clearDomSelection();
             usePlayerStore.getState().setSelectedElementId(null);
-            showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+            showToast(
+              `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
+              "info"
+            );
             return;
           }
         }
         domEditSaveTimestampRef.current = Date.now();
         const removeResponse = await fetch(
-          `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
+          `/api/projects/${pid}/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,
           {
             method: "POST",
             headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-            body: JSON.stringify({ target: patchTarget })
+            body: JSON.stringify({ targets: patchTargets })
           }
         );
         if (!removeResponse.ok) {
@@ -35406,6 +35426,10 @@ function useElementLifecycleOps({
           );
         }
         const removeData = await removeResponse.json();
+        if (!removeData.changed) {
+          reloadPreview();
+          throw new Error("Nothing to delete \u2014 the preview was out of date. Try again.");
+        }
         const patchedContent = typeof removeData.content === "string" ? removeData.content : originalContent;
         await saveProjectFilesWithHistory({
           projectId: pid,
@@ -35423,8 +35447,11 @@ function useElementLifecycleOps({
         usePlayerStore.getState().setSelectedElementId(null);
         forceReloadSdkSession?.();
         reloadPreview();
-        onElementDeleted?.(selection);
-        showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+        for (const member of sameFile) onElementDeleted?.(member);
+        showToast(
+          `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
+          "info"
+        );
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete element";
         showToast(message);
@@ -35551,8 +35578,15 @@ function useElementLifecycleOps({
     },
     [commitDomEditPatchBatches, onReorderShadow]
   );
+  const handleDomEditElementDelete = useCallback51(
+    async (selection) => {
+      await handleDomEditElementsDelete([selection]);
+    },
+    [handleDomEditElementsDelete]
+  );
   return {
     handleDomEditElementDelete,
+    handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
   };
 }
@@ -37638,6 +37672,9 @@ function selectionIdsMatch(currentIds, selectedIds, currentAnchor, wantedAnchor)
   }
   return currentAnchor === wantedAnchor;
 }
+function anchorIsOutsideSelection(anchor2, selectedIds) {
+  return anchor2 !== null && !selectedIds.includes(anchor2);
+}
 function useTimelineSelectionPreviewSync({
   selectedElementId,
   selectedElementIds,
@@ -37688,6 +37725,11 @@ function useTimelineSelectionPreviewSync({
       return;
     }
     let cancelled = false;
+    const warnSelectionMissingOnce = () => {
+      if (missingSelectionKeyRef.current === selectedKey) return;
+      missingSelectionKeyRef.current = selectedKey;
+      onSelectionNotFound();
+    };
     const syncSelection = async () => {
       const selections = [];
       let resolvableCount = 0;
@@ -37700,9 +37742,9 @@ function useTimelineSelectionPreviewSync({
       }
       if (cancelled) return;
       if (selections.length < resolvableCount) {
-        if (missingSelectionKeyRef.current !== selectedKey) {
-          missingSelectionKeyRef.current = selectedKey;
-          onSelectionNotFound();
+        warnSelectionMissingOnce();
+        if (anchorIsOutsideSelection(currentAnchor, selectedIds)) {
+          applyDomSelection(null, { revealPanel: false, announce: false });
         }
         return;
       }
@@ -39358,6 +39400,14 @@ import { resolveEditingSections } from "@hyperframes/core/editing";
 
 // src/components/editor/propertyPanelMediaSection.tsx
 import { useEffect as useEffect48, useState as useState47 } from "react";
+import {
+  AUDIO_GAIN_FADER_MAX,
+  AUDIO_GAIN_FADER_MIN,
+  audioFaderPositionToGain,
+  formatAudioGain,
+  audioGainToFaderPosition,
+  audioGainToText
+} from "@hyperframes/core/audio-gain";
 import { Fragment as Fragment25, jsx as jsx83, jsxs as jsxs61 } from "react/jsx-runtime";
 function MediaSection({
   projectDir,
@@ -39375,7 +39425,7 @@ function MediaSection({
   const isVisualMedia = isVideo || isImage;
   const el = element.element;
   const volume = parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
-  const volumePercent = Math.round(volume * 100);
+  const volumeFaderPosition = audioGainToFaderPosition(volume);
   const mediaStart = Number.parseFloat(
     element.dataAttributes["media-start"] ?? element.dataAttributes["playback-start"] ?? "0"
   ) || 0;
@@ -39557,14 +39607,14 @@ function MediaSection({
           SliderControl,
           {
             trackName: "Volume",
-            value: volumePercent,
-            min: 0,
-            max: 100,
+            value: volumeFaderPosition,
+            min: AUDIO_GAIN_FADER_MIN,
+            max: AUDIO_GAIN_FADER_MAX,
             step: 1,
-            displayValue: `${volumePercent}%`,
-            formatDisplayValue: (next) => `${Math.round(next)}%`,
+            displayValue: audioGainToText(volume),
+            formatDisplayValue: (next) => audioGainToText(audioFaderPositionToGain(next)),
             onCommit: (next) => {
-              void onSetAttribute("volume", formatNumericValue(next / 100));
+              void onSetAttribute("volume", formatAudioGain(audioFaderPositionToGain(next)));
             }
           }
         )
@@ -51435,6 +51485,14 @@ function FlatToggle({
 }
 
 // src/components/editor/propertyPanelFlatMediaSection.tsx
+import {
+  AUDIO_GAIN_FADER_MAX as AUDIO_GAIN_FADER_MAX2,
+  AUDIO_GAIN_FADER_MIN as AUDIO_GAIN_FADER_MIN2,
+  audioFaderPositionToGain as audioFaderPositionToGain2,
+  formatAudioGain as formatAudioGain2,
+  audioGainToFaderPosition as audioGainToFaderPosition2,
+  audioGainToText as audioGainToText2
+} from "@hyperframes/core/audio-gain";
 import { Fragment as Fragment37, jsx as jsx131, jsxs as jsxs106 } from "react/jsx-runtime";
 function FlatMediaSection({
   projectDir,
@@ -51455,7 +51513,7 @@ function FlatMediaSection({
   const isVisualMedia = isVideo || isImage;
   const el = element.element;
   const volume = parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
-  const volumePercent = Math.round(volume * 100);
+  const volumeFaderPosition = audioGainToFaderPosition2(volume);
   const mediaStart = Number.parseFloat(
     element.dataAttributes["media-start"] ?? element.dataAttributes["playback-start"] ?? "0"
   ) || 0;
@@ -51598,13 +51656,14 @@ function FlatMediaSection({
               FlatSlider,
               {
                 label: "Volume",
-                value: volumePercent,
-                min: 0,
-                max: 100,
-                tier: volumePercent === 100 ? "default" : "explicitCustom",
-                displayValue: `${volumePercent}%`,
+                value: volumeFaderPosition,
+                min: AUDIO_GAIN_FADER_MIN2,
+                max: AUDIO_GAIN_FADER_MAX2,
+                tier: volume === 1 ? "default" : "explicitCustom",
+                displayValue: audioGainToText2(volume),
                 disabled: volumeAutomated,
-                onCommit: (next) => void onSetAttribute("volume", formatNumericValue(next / 100))
+                centerTick: true,
+                onCommit: (next) => void onSetAttribute("volume", formatAudioGain2(audioFaderPositionToGain2(next)))
               }
             ) }),
             /* @__PURE__ */ jsx131(
@@ -61820,36 +61879,44 @@ function useTimelineEditing({
     isRecordingRef,
     forceReloadSdkSession
   });
-  const handleTimelineElementDelete = useCallback91(
+  const handleTimelineElementsDelete = useCallback91(
     // fallow-ignore-next-line complexity
-    async (element) => {
+    async (selection) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
       }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
-      const label = getTimelineElementLabel(element);
+      const [element] = selection;
+      if (!element) return;
+      const label = selection.length === 1 ? getTimelineElementLabel(element) : `${selection.length} clips`;
       const targetPath = element.sourceFile || activeCompPath || "index.html";
+      const sameFile = selection.filter(
+        (candidate) => (candidate.sourceFile || activeCompPath || "index.html") === targetPath
+      );
       try {
         const originalContent = await readFileContent(pid, targetPath);
-        const patchTarget = buildPatchTarget(element);
-        if (!patchTarget) {
-          throw new Error(`Timeline element ${element.id} is missing a patchable target`);
-        }
-        const removeResponse = await fetch(
-          `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-            body: JSON.stringify({ target: patchTarget })
+        let removedContent = originalContent;
+        for (const target of sameFile) {
+          const patchTarget = buildPatchTarget(target);
+          if (!patchTarget) {
+            throw new Error(`Timeline element ${target.id} is missing a patchable target`);
           }
-        );
-        if (!removeResponse.ok) {
-          throw new Error(`Failed to delete ${element.id} from ${targetPath}`);
+          const removeResponse = await fetch(
+            `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
+            {
+              method: "POST",
+              headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+              body: JSON.stringify({ target: patchTarget })
+            }
+          );
+          if (!removeResponse.ok) {
+            throw new Error(`Failed to delete ${target.id} from ${targetPath}`);
+          }
+          const removeData = await removeResponse.json();
+          if (typeof removeData.content === "string") removedContent = removeData.content;
         }
-        const removeData = await removeResponse.json();
-        const removedContent = typeof removeData.content === "string" ? removeData.content : originalContent;
         const deleteContentEnd = furthestClipEndFromSource(removedContent);
         const patchedContent = setCompositionDurationToContent(removedContent, deleteContentEnd);
         const rollbackDuration = captureDurationRollback(previewIframeRef.current);
@@ -61874,13 +61941,16 @@ function useTimelineEditing({
           rollbackDuration();
           throw error;
         }
-        usePlayerStore.getState().setElements(
-          timelineElements.filter((te) => (te.key ?? te.id) !== (element.key ?? element.id))
-        );
+        const deletedKeys = new Set(sameFile.map((te) => te.key ?? te.id));
+        usePlayerStore.getState().setElements(timelineElements.filter((te) => !deletedKeys.has(te.key ?? te.id)));
         usePlayerStore.getState().setSelectedElementId(null);
+        usePlayerStore.getState().setSelectedElementIds(/* @__PURE__ */ new Set());
         forceReloadSdkSession?.();
         reloadPreview();
-        showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+        showToast(
+          `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
+          "info"
+        );
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete timeline clip";
         showToast(message);
@@ -61899,6 +61969,12 @@ function useTimelineEditing({
       previewIframeRef
     ]
   );
+  const handleTimelineElementDelete = useCallback91(
+    async (element) => {
+      await handleTimelineElementsDelete([element]);
+    },
+    [handleTimelineElementsDelete]
+  );
   const { handleTimelineAssetDrop, handleTimelineFileDrop, handleTimelineCompositionDrop } = useTimelineAssetDropOps({
     projectIdRef,
     activeCompPath,
@@ -61940,6 +62016,7 @@ function useTimelineEditing({
     handleToggleTrackHidden,
     handleToggleElementHidden,
     handleTimelineElementDelete,
+    handleTimelineElementsDelete,
     handleTimelineElementSplit: handleRazorSplit,
     handleRazorSplit,
     handleRazorSplitAll,
@@ -62341,7 +62418,7 @@ function useDomSelection({
         domEditGroupSelectionsRef.current = [];
         setDomEditSelection(null);
         setDomEditGroupSelections([]);
-        announceTimelineSelection2([], null);
+        if (options?.announce !== false) announceTimelineSelection2([], null);
         return;
       }
       const isAdditiveSelection = Boolean(options?.additive);
@@ -62487,7 +62564,11 @@ function useDomSelection({
       }
       const selection = await buildDomSelectionForTimelineElement(element);
       if (seq !== timelineSelectSeqRef.current) return;
-      if (selection) applyDomSelection(selection);
+      if (selection) {
+        applyDomSelection(selection);
+        return;
+      }
+      applyDomSelection(null, { revealPanel: false, announce: false });
     },
     [applyDomSelection, buildDomSelectionForTimelineElement]
   );
@@ -64463,7 +64544,7 @@ function useDomEditCommits({
     showToast,
     commitPositionPatchToHtml
   });
-  const { handleDomEditElementDelete, handleDomZIndexReorderCommit } = useElementLifecycleOps({
+  const { handleDomEditElementDelete, handleDomEditElementsDelete, handleDomZIndexReorderCommit } = useElementLifecycleOps({
     activeCompPath,
     showToast,
     writeProjectFile,
@@ -64496,6 +64577,7 @@ function useDomEditCommits({
     handleDomRotationCommit,
     handleDomManualEditsReset,
     handleDomEditElementDelete,
+    handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
   };
 }
@@ -66051,7 +66133,7 @@ function useDomEditPreviewSync({
   refreshDomEditGroupSelectionsFromPreview,
   buildDomSelectionFromTarget,
   refreshPreviewDocumentVersion,
-  syncPreviewHistoryHotkey,
+  syncPreviewHotkeys,
   applyStudioManualEditsToPreviewRef,
   openSourceForSelection,
   getSidebarTab,
@@ -66090,12 +66172,12 @@ function useDomEditPreviewSync({
         applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
       }
     };
-    syncPreviewHistoryHotkey(previewIframe);
+    syncPreviewHotkeys(previewIframe);
     void applyStudioManualEditsToPreviewRef.current(previewIframe);
     void syncSelectionFromDocument();
     refreshPreviewDocumentVersion();
     const handleLoad = () => {
-      syncPreviewHistoryHotkey(previewIframe);
+      syncPreviewHotkeys(previewIframe);
       void applyStudioManualEditsToPreviewRef.current(previewIframe);
       void syncSelectionFromDocument();
       refreshPreviewDocumentVersion();
@@ -66114,7 +66196,7 @@ function useDomEditPreviewSync({
     previewIframe,
     refreshDomEditGroupSelectionsFromPreview,
     refreshPreviewDocumentVersion,
-    syncPreviewHistoryHotkey,
+    syncPreviewHotkeys,
     applyStudioManualEditsToPreviewRef,
     gsapCacheVersion
   ]);
@@ -66522,7 +66604,7 @@ function useDomEditWiring({
   bumpGsapCache,
   showToast,
   refreshPreviewDocumentVersion,
-  syncPreviewHistoryHotkey,
+  syncPreviewHotkeys,
   applyStudioManualEditsToPreviewRef,
   applyDomSelection,
   buildDomSelectionFromTarget,
@@ -66633,7 +66715,7 @@ function useDomEditWiring({
     refreshDomEditGroupSelectionsFromPreview,
     buildDomSelectionFromTarget,
     refreshPreviewDocumentVersion,
-    syncPreviewHistoryHotkey,
+    syncPreviewHotkeys,
     applyStudioManualEditsToPreviewRef,
     openSourceForSelection,
     getSidebarTab,
@@ -67849,6 +67931,9 @@ function useKeyframeEaseCommits({
 }
 
 // src/hooks/useDomEditSession.ts
+function membersForDelete(selection, group, options) {
+  return options?.expandGroup && group.length > 0 ? group : [selection];
+}
 function useDomEditSession({
   projectId,
   activeCompPath,
@@ -67863,6 +67948,7 @@ function useDomEditSession({
   setRightCollapsed,
   setRightPanelTab,
   showToast,
+  isRecordingRef,
   refreshPreviewDocumentVersion,
   queueDomEditSave,
   readProjectFile,
@@ -67879,7 +67965,7 @@ function useDomEditSession({
   previewDocumentVersion,
   rightPanelTab,
   applyStudioManualEditsToPreviewRef,
-  syncPreviewHistoryHotkey,
+  syncPreviewHotkeys,
   reloadPreview,
   setRefreshKey: _setRefreshKey,
   openSourceForSelection,
@@ -68006,7 +68092,7 @@ function useDomEditSession({
     handleDomRemoveTextField,
     handleDomBoxSizeCommit,
     handleDomManualEditsReset,
-    handleDomEditElementDelete,
+    handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
   } = useDomEditCommits({
     activeCompPath,
@@ -68080,6 +68166,17 @@ function useDomEditSession({
     clearDomSelection,
     forceReloadSdkSession
   });
+  const handleDomEditElementDelete = useCallback114(
+    async (selection, options) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+      const members = membersForDelete(selection, domEditGroupSelectionsRef.current, options);
+      await handleDomEditElementsDelete(members);
+    },
+    [domEditGroupSelectionsRef, handleDomEditElementsDelete, isRecordingRef, showToast]
+  );
   const handleGroupSelection = useCallback114(() => {
     const group = domEditGroupSelectionsRef.current;
     const single = domEditSelectionRef.current;
@@ -68143,7 +68240,7 @@ function useDomEditSession({
     bumpGsapCache,
     showToast,
     refreshPreviewDocumentVersion,
-    syncPreviewHistoryHotkey,
+    syncPreviewHotkeys,
     applyStudioManualEditsToPreviewRef,
     applyDomSelection,
     buildDomSelectionFromTarget,
@@ -69437,21 +69534,19 @@ function dispatchPlainKey(event, key2, cb) {
         return;
       }
     }
+    const domSel = cb.domEditSelectionRef.current;
+    if (domSel) {
+      event.preventDefault();
+      void cb.handleDomEditElementDelete(domSel, { expandGroup: true });
+      return;
+    }
     const { selectedElementId, selectedElementIds, elements } = usePlayerStore.getState();
     const selectionKeys = new Set(selectedElementIds);
     if (selectedElementId) selectionKeys.add(selectedElementId);
-    if (selectionKeys.size > 0) {
-      const el = elements.find((e) => selectionKeys.has(e.key ?? e.id));
-      if (el) {
-        event.preventDefault();
-        void cb.handleTimelineElementDelete(el);
-        return;
-      }
-    }
-    const domSel = cb.domEditSelectionRef.current;
-    if (domSel) {
+    const selected = elements.filter((e) => selectionKeys.has(e.key ?? e.id));
+    if (selected.length > 0) {
       event.preventDefault();
-      void cb.handleDomEditElementDelete(domSel);
+      void cb.handleTimelineElementsDelete(selected);
     }
     return;
   }
@@ -69461,7 +69556,7 @@ function dispatchPlainKey(event, key2, cb) {
   }
 }
 function useAppHotkeys({
-  handleTimelineElementDelete,
+  handleTimelineElementsDelete,
   handleTimelineElementSplit,
   handleDomEditElementDelete,
   domEditSelectionRef,
@@ -69486,7 +69581,6 @@ function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const previewHotkeyWindowRef = useRef126(null);
   const previewHistoryCleanupRef = useRef126(null);
   const readHistoryFile = useCallback119(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
@@ -69545,7 +69639,7 @@ function useAppHotkeys({
   const handleRedo = useCallback119(() => applyHistory("redo"), [applyHistory]);
   const cbRef = useRef126(null);
   cbRef.current = {
-    handleTimelineElementDelete,
+    handleTimelineElementsDelete,
     handleTimelineElementSplit,
     handleDomEditElementDelete,
     handleUndo,
@@ -69575,31 +69669,6 @@ function useAppHotkeys({
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
-  const syncPreviewTimelineHotkey = useCallback119(
-    (iframe) => {
-      const nextWindow = iframeContentWindow(iframe);
-      if (previewHotkeyWindowRef.current === nextWindow) return;
-      safeRemoveListener(
-        previewHotkeyWindowRef.current,
-        "keydown",
-        handleAppKeyDown
-      );
-      previewHotkeyWindowRef.current = nextWindow;
-      safeAddListener(nextWindow, "keydown", handleAppKeyDown, true);
-    },
-    [handleAppKeyDown]
-  );
-  useEffect99(
-    () => () => {
-      safeRemoveListener(
-        previewHotkeyWindowRef.current,
-        "keydown",
-        handleAppKeyDown
-      );
-      previewHotkeyWindowRef.current = null;
-    },
-    [handleAppKeyDown]
-  );
   const handleHistoryHotkey = useCallback119((event) => {
     if (!(event.metaKey || event.ctrlKey) || shouldIgnoreHistoryShortcut(event.target)) return;
     handleUndoRedoKey(
@@ -69608,7 +69677,7 @@ function useAppHotkeys({
       () => void cbRef.current.handleRedo()
     );
   }, []);
-  const syncPreviewHistoryHotkey = useCallback119(
+  const syncPreviewHotkeys = useCallback119(
     (iframe) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -69621,14 +69690,17 @@ function useAppHotkeys({
       }
       if (!win && !doc) return;
       const handler = handleHistoryHotkey;
+      const appHandler = handleAppKeyDown;
       safeAddListener(win, "keydown", handler, true);
+      safeAddListener(win, "keydown", appHandler, true);
       doc?.addEventListener("keydown", handleHistoryHotkey, true);
       previewHistoryCleanupRef.current = () => {
         safeRemoveListener(win, "keydown", handler);
+        safeRemoveListener(win, "keydown", appHandler);
         doc?.removeEventListener("keydown", handleHistoryHotkey, true);
       };
     },
-    [handleHistoryHotkey]
+    [handleAppKeyDown, handleHistoryHotkey]
   );
   useEffect99(
     () => () => {
@@ -69640,8 +69712,7 @@ function useAppHotkeys({
   return {
     handleUndo,
     handleRedo,
-    syncPreviewTimelineHotkey,
-    syncPreviewHistoryHotkey
+    syncPreviewHotkeys
   };
 }
 
@@ -71207,7 +71278,7 @@ function findUrlSelectionElement(doc, target, fallbackSourceFile, activeCompPath
 }
 async function buildOptionalDomSelection(element, buildDomSelection) {
   if (!element) return null;
-  return buildDomSelection(element, { preferClipAncestor: false });
+  return buildDomSelection(element, { preferClipAncestor: false, skipSourceProbe: true });
 }
 async function resolveUrlSelections({
   doc,
@@ -75568,6 +75639,7 @@ function getVisibleLayers(layers, collapsed) {
 
 // src/components/editor/LayersPanel.tsx
 import { jsx as jsx175, jsxs as jsxs145 } from "react/jsx-runtime";
+var LAYERS_PANEL_MAX_ROWS = 80;
 var TAG_ICONS = {
   video: "Vi",
   audio: "Au",
@@ -75652,11 +75724,13 @@ var LayersPanel = memo43(function LayersPanel2() {
     const root = doc.querySelector("[data-composition-id]") ?? doc.documentElement ?? null;
     if (!root) return;
     if (activeGroupElement && !activeGroupElement.isConnected) setActiveGroupElement(null);
-    const items = collectDomEditLayerItems(root, {
-      activeCompositionPath: activeCompPath,
-      isMasterView,
-      activeGroupElement
-    });
+    const items = collectDomEditLayerItems(
+      root,
+      { activeCompositionPath: activeCompPath, isMasterView, activeGroupElement },
+      // How many rows this panel is willing to render, nothing more. Hit-testing
+      // callers deliberately take the whole document instead.
+      LAYERS_PANEL_MAX_ROWS
+    );
     setLayers(sortLayersByZIndex(items));
   }, [previewIframeRef, activeCompPath, isMasterView, activeGroupElement, setActiveGroupElement]);
   useEffect114(() => {
@@ -82607,11 +82681,9 @@ function StudioApp() {
   const clearDomSelectionRef = useRef157(() => {
   });
   const domEditSelectionBridgeRef = useRef157(null);
-  const handleDomEditElementDeleteRef = useRef157(
-    async () => {
-    }
-  );
-  const domEditDeleteBridge = (s) => handleDomEditElementDeleteRef.current(s);
+  const handleDomEditElementDeleteRef = useRef157(async () => {
+  });
+  const domEditDeleteBridge = (s, o) => handleDomEditElementDeleteRef.current(s, o);
   const resetKeyframesRef = useRef157(() => false);
   const deleteSelectedKeyframesRef = useRef157(() => {
   });
@@ -82629,7 +82701,7 @@ function StudioApp() {
     previewIframeRef
   });
   const appHotkeys = useAppHotkeys({
-    handleTimelineElementDelete: timelineEditing.handleTimelineElementDelete,
+    handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete,
     handleTimelineElementSplit: timelineEditing.handleTimelineElementSplit,
     handleDomEditElementDelete: domEditDeleteBridge,
     domEditSelectionRef: domEditSelectionBridgeRef,
@@ -82673,6 +82745,7 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab,
     showToast,
+    isRecordingRef: isGestureRecordingRef,
     refreshPreviewDocumentVersion,
     queueDomEditSave: previewPersistence.queueDomEditSave,
     readProjectFile: fileManager.readProjectFile,
@@ -82689,7 +82762,7 @@ function StudioApp() {
     previewDocumentVersion,
     rightPanelTab: panelLayout.rightPanelTab,
     applyStudioManualEditsToPreviewRef: previewPersistence.applyStudioManualEditsToPreviewRef,
-    syncPreviewHistoryHotkey: appHotkeys.syncPreviewHistoryHotkey,
+    syncPreviewHotkeys: appHotkeys.syncPreviewHotkeys,
     reloadPreview,
     setRefreshKey,
     openSourceForSelection: fileManager.openSourceForSelection,
@@ -82755,7 +82828,6 @@ function StudioApp() {
     isGestureRecordingRef
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const recordingToggle = handleToggleRecording;
   const canvasRectRef = useRef157(null);
   useLayoutEffect9(() => {
     if (gestureState !== "recording" || !previewIframe) {
@@ -82768,8 +82840,7 @@ function StudioApp() {
     (iframe) => {
       previewIframeRef.current = iframe;
       setPreviewIframe(iframe);
-      appHotkeys.syncPreviewTimelineHotkey(iframe);
-      appHotkeys.syncPreviewHistoryHotkey(iframe);
+      appHotkeys.syncPreviewHotkeys(iframe);
       resetConsoleErrors();
       refreshPreviewDocumentVersion();
     },
@@ -82920,7 +82991,7 @@ function StudioApp() {
                 },
                 recordingState: gestureState,
                 recordingDuration: gestureRecording.recordingDuration,
-                onToggleRecording: recordingToggle,
+                onToggleRecording: handleToggleRecording,
                 sdkSession: sdkHandle.session,
                 publishSdkSession: sdkHandle.publish,
                 forceReloadSdkSession: sdkHandle.forceReload,
@@ -82954,7 +83025,7 @@ function StudioApp() {
             shouldShowSelectedDomBounds,
             isGestureRecording: gestureState === "recording",
             recordingState: gestureState,
-            onToggleRecording: recordingToggle,
+            onToggleRecording: handleToggleRecording,
             blockPreview,
             gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx206(
               GestureTrailOverlay,