hyperframes 0.8.71 → 0.8.73

package/dist/studio/index.d.ts

@@ -326,12 +326,25 @@ interface PlayerProps {
  */
 declare const Player: react.ForwardRefExoticComponent<PlayerProps & react.RefAttributes<HTMLIFrameElement>>;
 
+interface ShortcutHint {
+    key: string;
+    label: string;
+}
+interface ShortcutSection {
+    title: string;
+    hints: readonly ShortcutHint[];
+}
+/** What PlayerControls' shortcuts panel lists unless an embedder passes its own sections. */
+declare const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[];
+
 interface PlayerControlsProps {
     onTogglePlay: () => void;
     onSeek: (time: number) => void;
     disabled?: boolean;
     isFullscreen?: boolean;
     onToggleFullscreen?: () => void;
+    /** Replaces the shortcuts panel's list, e.g. DEFAULT_SHORTCUT_SECTIONS with entries dropped or relabelled. */
+    shortcutSections?: readonly ShortcutSection[];
 }
 declare const PlayerControls: react.NamedExoticComponent<PlayerControlsProps>;
 
@@ -2124,6 +2137,8 @@ interface NLEPreviewProps {
     onStageRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
     /** Reports the authored composition size measured from the loaded preview. */
     onCompositionSizeChange?: (size: PreviewCompositionSize | null) => void;
+    /** Draws the picture edge to edge in this box, without Studio's inset band. */
+    fillBox?: boolean;
 }
 declare const NLEPreview: react.NamedExoticComponent<NLEPreviewProps>;
 
@@ -2885,4 +2900,4 @@ declare function TimelineEditProvider({ value, children, }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, Button, type ButtonSize, type ButtonVariant, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ContextMenu, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, HyperframesLoader, type HyperframesLoaderProps, HyperframesLogo, IconButton, ImageThumbnail, type ImageThumbnailProps, Input, type InputProps, Menu, MenuItem, type MenuItemTone, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, NLEPreview, NumberField, type NumberFieldProps, type PatchOperation, type PersistedRenderSettings, type PickedElement, Player, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, Popover, type PopupPreviewState, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewSnapPreferences, type PreviewState, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, Select, type SelectOption, type SelectProps, Slider, type SliderProps, SnapToolbar, SourceEditor, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, Tab, TabPanel, Tabs, TabsList, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, Toggle, type ToggleProps, Tooltip, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, applyPatch, buildPickerAgentContextPreview, buildPickerAgentPrompt, buttonBase, buttonSizes, buttonVariants, cn, fieldBase, fieldText, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, popupSurface, resolveIframe, resolveSourceFile, useEditHistoryActions, useElementPicker, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };
+export { type AgentModalAnchorPoint, type AgentPromptElementInfo, AskAgentModal, type AskAgentModalProps, AudioWaveform, type AudioWaveformProps, type BlockedTimelineEditIntent, Button, type ButtonSize, type ButtonVariant, type CanEditTimelineElement, CompositionBreadcrumb, type CompositionDimensions, type CompositionLevel, CompositionThumbnail, ContextMenu, DEFAULT_SHORTCUT_SECTIONS, type EditHistoryHandle, EditorShell, type EditorShellProps, type ExternalFileChangeBlockedState, type ExternalFileChangeCoordinatorHandle, ExternalFileConflictBanner, type FfmpegStatus, FileTree, GridOverlay, HyperframesLoader, type HyperframesLoaderProps, HyperframesLogo, IconButton, ImageThumbnail, type ImageThumbnailProps, Input, type InputProps, Menu, MenuItem, type MenuItemTone, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, NLEPreview, NumberField, type NumberFieldProps, type PatchOperation, type PersistedRenderSettings, type PickedElement, Player, PlayerControls, type PlayerHandle, type PlayerHandleElement, type PlayerHandleListener, type PlayerHandleTimeListener, Popover, type PopupPreviewState, type DomEditCompositionRect as PreviewCompositionRect, PreviewGuides, PreviewOverlayProvider, type PreviewOverlayProviderProps, type PreviewSnapPreferences, type PreviewState, PropertyPanel, type RenderJob, RenderQueue, type RenderQueueProps, type ResolutionPreset, Select, type SelectOption, type SelectProps, type ShortcutHint, type ShortcutSection, Slider, type SliderProps, SnapToolbar, SourceEditor, type StartRenderOptions, StudioApp, StudioFileConflictError, type StudioPendingEditsDrainResult, Tab, TabPanel, Tabs, TabsList, type ThumbnailPriority, Timeline, TimelineClipMenu, type TimelineClipRenderContext, type TimelineEditCallbacks, type TimelineEditPermission, TimelineEditPopover, TimelineEditProvider, type TimelineElement, TimelineEmptyStatePart, TimelineFrame, TimelineGapMenu, TimelineKeyframeMenu, TimelineLanes, TimelineOverlays, TimelinePane, type TimelinePaneProps, TimelinePlayhead, TimelineProvider, TimelineRazorGuide, TimelineRuler, TimelineShortcutHint, type TimelineTheme, type TimelineTimeRange$1 as TimelineTimeRange, Toggle, type ToggleProps, Tooltip, type UseEditHistoryActionsOptions, type UsePersistentEditHistoryOptions, type UseProjectFileWriterOptions, type UseRenderClipContentOptions, type UseTimelineEditingOptions, VideoThumbnail, applyPatch, buildPickerAgentContextPreview, buildPickerAgentPrompt, buttonBase, buttonSizes, buttonVariants, cn, fieldBase, fieldText, findElementBlock, flushStudioPendingEdits, formatTime, getPersistedRenderSettings, liveTime, mergeStyleIntoTag, parseStyleString, persistRenderSettings, popupSurface, resolveIframe, resolveSourceFile, useEditHistoryActions, useElementPicker, usePersistentEditHistory, usePlayerHandle, usePlayerStore, usePreviewCompositionRect, usePreviewGuidesStore, usePreviewOverlayContext, useProjectFileWriter, useRenderClipContent, useRenderQueue, useTimelineContext, useTimelineEditing, useTimelinePlayer };

package/dist/studio/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CUcdruHw.js"></script>
+    <script type="module" crossorigin src="/assets/index-DxIHGgGZ.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-0w6iIlwZ.css">
   </head>
   <body>

package/dist/studio/index.js

@@ -3500,11 +3500,15 @@ function isHtmlElement2(el) {
   const HtmlElementCtor = el.ownerDocument.defaultView?.HTMLElement ?? globalThis.HTMLElement;
   return typeof HtmlElementCtor !== "undefined" && el instanceof HtmlElementCtor;
 }
+function isCompositionHost(el) {
+  return el.hasAttribute("data-composition-id") || el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
+}
 function resolveMediaElement(el) {
   const win = el.ownerDocument.defaultView ?? window;
   const MediaElementCtor = win.HTMLMediaElement ?? globalThis.HTMLMediaElement;
   const ImageElementCtor = win.HTMLImageElement ?? globalThis.HTMLImageElement;
   if (el instanceof MediaElementCtor || el instanceof ImageElementCtor) return el;
+  if (isCompositionHost(el)) return null;
   const candidate = el.querySelector("video, audio, img");
   return candidate instanceof MediaElementCtor || candidate instanceof ImageElementCtor ? candidate : null;
 }
@@ -4309,9 +4313,10 @@ function useContextMenuDismiss(onClose) {
   return menuRef;
 }
 
-// src/player/components/ShortcutsPanel.tsx
-import { Fragment, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var SHORTCUT_SECTIONS = [
+// src/player/components/studioShortcuts.ts
+var STUDIO_PLAIN_KEYS = { fullscreen: "f", split: "s", record: "r" };
+var hintKey = (key2) => key2.toUpperCase();
+var DEFAULT_SHORTCUT_SECTIONS = [
   {
     title: "Playback",
     hints: [
@@ -4323,7 +4328,7 @@ var SHORTCUT_SECTIONS = [
       { key: "\u21E7L", label: "Toggle loop" },
       { key: "\u2190/\u2192", label: "Step 1 frame" },
       { key: "\u21E7\u2190/\u21E7\u2192", label: "Step 10 frames" },
-      { key: "F", label: "Toggle fullscreen" }
+      { key: hintKey(STUDIO_PLAIN_KEYS.fullscreen), label: "Toggle fullscreen" }
     ]
   },
   {
@@ -4333,7 +4338,7 @@ var SHORTCUT_SECTIONS = [
       { key: "Del", label: "Delete selected keyframe" },
       { key: "H", label: "Toggle hold / bezier" },
       { key: "U", label: "Expand / collapse properties" },
-      { key: "R", label: "Record gesture" }
+      { key: hintKey(STUDIO_PLAIN_KEYS.record), label: "Record gesture" }
     ]
   },
   {
@@ -4344,7 +4349,7 @@ var SHORTCUT_SECTIONS = [
       { key: "\u2318C", label: "Copy element" },
       { key: "\u2318V", label: "Paste element" },
       { key: "\u2318X", label: "Cut element" },
-      { key: "S", label: "Split clip at playhead" },
+      { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
       { key: "\u21E7Click", label: "Razor tool: split all tracks" },
       { key: "\u2318G", label: "Group elements" },
       { key: "\u2318\u21E7G", label: "Ungroup" },
@@ -4396,6 +4401,9 @@ var SHORTCUT_SECTIONS = [
     ]
   }
 ];
+
+// src/player/components/ShortcutsPanel.tsx
+import { Fragment, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var ShortcutsPanel = memo(function ShortcutsPanel2({
   disabled,
   duration,
@@ -4403,7 +4411,8 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
   outPoint,
   setInPoint,
   setOutPoint,
-  onSeek
+  onSeek,
+  sections = DEFAULT_SHORTCUT_SECTIONS
 }) {
   const [showShortcuts, setShowShortcuts] = useState7(false);
   const [jumpFrame, setJumpFrame] = useState7("");
@@ -4597,9 +4606,9 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
             ] })
           ] }),
           /* @__PURE__ */ jsx23("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)" } }),
-          /* @__PURE__ */ jsx23("div", { className: "px-3 pt-2.5 pb-3 flex flex-col gap-3", children: SHORTCUT_SECTIONS.map((section) => /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx23("div", { className: "px-3 pt-2.5 pb-3 flex flex-col gap-3", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs16("div", { children: [
             /* @__PURE__ */ jsx23("p", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5", children: section.title }),
-            /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-1", children: section.hints.map((hint) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-1", children: section.hints.map((hint, hintIndex) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ jsx23(
                 "span",
                 {
@@ -4609,8 +4618,8 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
                 }
               ),
               /* @__PURE__ */ jsx23("span", { className: "text-[10px] text-neutral-400", children: hint.label })
-            ] }, hint.key)) })
-          ] }, section.title)) })
+            ] }, hintIndex)) })
+          ] }, sectionIndex)) })
         ]
       }
     )
@@ -4878,7 +4887,8 @@ var PlayerControls = memo4(function PlayerControls2({
   onSeek,
   disabled = false,
   isFullscreen = false,
-  onToggleFullscreen
+  onToggleFullscreen,
+  shortcutSections
 }) {
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const duration = usePlayerStore((s) => s.duration);
@@ -5002,7 +5012,8 @@ var PlayerControls = memo4(function PlayerControls2({
               outPoint,
               setInPoint,
               setOutPoint,
-              onSeek
+              onSeek,
+              sections: shortcutSections
             }
           )
         ] })
@@ -6561,7 +6572,7 @@ function useTimelinePlayhead({
     previousAnchorPpsRef.current = pps;
     const skip = skipCenterAnchorRef.current;
     skipCenterAnchorRef.current = false;
-    if (!scroll || pps === prevPps || skip) return;
+    if (!scroll || pps === prevPps || skip || scroll.scrollLeft < 1) return;
     const nextScrollLeft = getTimelineScrollLeftForZoomAnchor({
       pointerX: scroll.clientWidth / 2,
       currentScrollLeft: scroll.scrollLeft,
@@ -27575,10 +27586,10 @@ function parseTimelineFromDOM(doc, rootDuration, timelines) {
     if (compSrc) {
       entry2.compositionSrc = compSrc;
     } else if (compId && compId !== rootComp?.getAttribute("data-composition-id")) {
-      const innerVideo = el.querySelector("video[src]");
-      if (innerVideo) {
-        entry2.src = innerVideo.getAttribute("src") || void 0;
-        entry2.tag = "video";
+      const innerMedia = el.querySelector("video[src], img[src]");
+      if (innerMedia) {
+        entry2.src = innerMedia.getAttribute("src") || void 0;
+        entry2.tag = innerMedia.tagName === "IMG" ? "img" : "video";
       }
     }
     if (entry2.kind === "composition") {
@@ -28068,6 +28079,7 @@ var logReload = makeStudioDebugLogger("reload");
 
 // src/player/hooks/useShadowPreviewReload.ts
 var SHADOW_READY_TIMEOUT_MS = 15e3;
+var SHADOW_READY_BUDGETS = 3;
 function isDocumentHidden() {
   return typeof document !== "undefined" && document.visibilityState === "hidden";
 }
@@ -28096,6 +28108,7 @@ function useShadowPreviewReload({
   const onReloadFailedRef = useRef51(onReloadFailed);
   onReloadFailedRef.current = onReloadFailed;
   const readyTimerRef = useRef51(void 0);
+  const budgetsSpentRef = useRef51(0);
   const budgetGenRef = useRef51(null);
   const cancelPendingLoadRef = useRef51(() => {
   });
@@ -28187,10 +28200,16 @@ function useShadowPreviewReload({
     (gen) => {
       clearTimeout(readyTimerRef.current);
       if (isDocumentHidden()) return;
-      readyTimerRef.current = setTimeout(
-        () => failShadow(gen, "it took too long to load"),
-        SHADOW_READY_TIMEOUT_MS
-      );
+      readyTimerRef.current = setTimeout(() => {
+        if (gen !== shadowGenRef.current) return;
+        budgetsSpentRef.current += 1;
+        if (budgetsSpentRef.current < SHADOW_READY_BUDGETS) {
+          logReload("shadow-slow", { budgetsSpent: budgetsSpentRef.current });
+          armReadyTimerRef.current(gen);
+          return;
+        }
+        failShadow(gen, "it took too long to load");
+      }, SHADOW_READY_TIMEOUT_MS);
     },
     [failShadow]
   );
@@ -28202,6 +28221,7 @@ function useShadowPreviewReload({
       const gen = shadowGenRef.current;
       stopPendingShadow();
       budgetGenRef.current = gen;
+      budgetsSpentRef.current = 0;
       armReadyTimer(gen);
       setPreviewSlots((prev) => planShadowReload(prev, gen, url));
       thumbnailScheduler.setPreviewReloading(true);
@@ -29672,7 +29692,7 @@ function getPreviewPlayerKey({
 }
 var ZOOM_HUD_TIMEOUT_MS = 1200;
 var ZOOM_SETTLE_MS = 200;
-var PREVIEW_STAGE_INSET_PX = 16;
+var PREVIEW_STAGE_INSET_PX = 8;
 var SHADOW_IFRAME_STYLE = {
   position: "absolute",
   inset: 0,
@@ -29691,9 +29711,9 @@ function loadInitialZoom() {
     panY: stored.panY
   } : DEFAULT_PREVIEW_ZOOM;
 }
-function resolvePreviewStageSize(viewportWidth, viewportHeight, compositionSize, portrait, gutterPx = 0) {
-  const availableWidth = Math.max(0, viewportWidth - PREVIEW_STAGE_INSET_PX - 2 * gutterPx);
-  const availableHeight = Math.max(0, viewportHeight - PREVIEW_STAGE_INSET_PX - 2 * gutterPx);
+function resolvePreviewStageSize(viewportWidth, viewportHeight, compositionSize, portrait, gutterPx = 0, insetPx = PREVIEW_STAGE_INSET_PX) {
+  const availableWidth = Math.max(0, viewportWidth - 2 * (insetPx + gutterPx));
+  const availableHeight = Math.max(0, viewportHeight - 2 * (insetPx + gutterPx));
   const aspectRatio = compositionSize && compositionSize.width > 0 && compositionSize.height > 0 ? compositionSize.width / compositionSize.height : portrait ? 9 / 16 : 16 / 9;
   if (availableWidth === 0 || availableHeight === 0) {
     return { width: 0, height: 0 };
@@ -29724,7 +29744,8 @@ var NLEPreview = memo19(function NLEPreview2({
   directUrl,
   suppressLoadingOverlay,
   onStageRef,
-  onCompositionSizeChange
+  onCompositionSizeChange,
+  fillBox
 }) {
   const activeKey = getPreviewPlayerKey({ projectId, directUrl });
   const viewportRef = useRef56(null);
@@ -29743,6 +29764,7 @@ var NLEPreview = memo19(function NLEPreview2({
   const reportPreviewFirstFrame = usePreviewFirstFrameTelemetry(previewSlots);
   const [compositionSize, setCompositionSize] = useState37(null);
   const gutterPx = usePreviewGuidesStore((s) => s.rulerVisible ? RULER_GUTTER_PX : 0);
+  const insetPx = fillBox ? 0 : PREVIEW_STAGE_INSET_PX;
   const [stageSize, setStageSize] = useState37(() => resolvePreviewStageSize(0, 0, null, portrait));
   const zoomRef = useRef56(loadInitialZoom());
   const [settledZoom, setSettledZoom] = useState37(() => zoomRef.current);
@@ -29763,14 +29785,21 @@ var NLEPreview = memo19(function NLEPreview2({
     const updateStageSize = () => {
       const rect = viewport.getBoundingClientRect();
       setStageSize(
-        resolvePreviewStageSize(rect.width, rect.height, compositionSize, portrait, gutterPx)
+        resolvePreviewStageSize(
+          rect.width,
+          rect.height,
+          compositionSize,
+          portrait,
+          gutterPx,
+          insetPx
+        )
       );
     };
     updateStageSize();
     const observer = new ResizeObserver(updateStageSize);
     observer.observe(viewport);
     return () => observer.disconnect();
-  }, [compositionSize, portrait, gutterPx]);
+  }, [compositionSize, portrait, gutterPx, insetPx]);
   const onCompositionSizeChangeRef = useRef56(onCompositionSizeChange);
   onCompositionSizeChangeRef.current = onCompositionSizeChange;
   const updateCompositionSizeFromPreview = useCallback45(() => {
@@ -29996,77 +30025,84 @@ var NLEPreview = memo19(function NLEPreview2({
     "div",
     {
       ref: viewportRef,
-      className: "relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-hidden focus:ring-1 focus:ring-studio-accent/40 bg-[var(--studio-preview-bg,var(--color-neutral-950))]",
+      className: "relative flex-1 flex items-center justify-center overflow-hidden min-h-0 outline-hidden focus:ring-1 focus:ring-studio-accent/40 bg-[var(--studio-preview-bg,var(--color-neutral-950))]",
       tabIndex: 0,
       "aria-label": "Composition preview",
       children: [
-        /* @__PURE__ */ jsx86("div", { className: "absolute inset-2 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs61(
+        /* @__PURE__ */ jsx86(
           "div",
           {
-            ref: stageRef,
-            className: "relative shrink-0 pointer-events-auto",
-            style: {
-              width: `${stageSize.width}px`,
-              height: `${stageSize.height}px`,
-              transform: `translate3d(${toDomPrecision(initial.panX)}px, ${toDomPrecision(initial.panY)}px, 0) scale(${toDomPrecision(initial.zoomPercent / 100)})`,
-              // resolvePreviewWheelZoom cursor math assumes center-center pivot
-              transformOrigin: "center center"
-            },
-            "data-testid": "preview-zoom-stage",
-            children: [
-              directUrl?.includes("/components/") && /* @__PURE__ */ jsx86(
-                Player,
-                {
-                  projectId,
-                  onLoad: () => {
-                  },
-                  portrait,
-                  suppressLoadingOverlay: true,
-                  style: { position: "absolute", inset: 0, zIndex: 0 }
+            className: "absolute flex items-center justify-center pointer-events-none",
+            style: { inset: insetPx },
+            children: /* @__PURE__ */ jsxs61(
+              "div",
+              {
+                ref: stageRef,
+                className: "relative shrink-0 pointer-events-auto",
+                style: {
+                  width: `${stageSize.width}px`,
+                  height: `${stageSize.height}px`,
+                  transform: `translate3d(${toDomPrecision(initial.panX)}px, ${toDomPrecision(initial.panY)}px, 0) scale(${toDomPrecision(initial.zoomPercent / 100)})`,
+                  // resolvePreviewWheelZoom cursor math assumes center-center pivot
+                  transformOrigin: "center center"
                 },
-                `backdrop-${projectId}`
-              ),
-              previewSlots.map(
-                (slot) => slot.role === "live" ? /* @__PURE__ */ jsx86(
-                  Player,
-                  {
-                    ref: setPreviewIframeRef,
-                    projectId: directUrl ? void 0 : projectId,
-                    directUrl,
-                    onLoad: () => {
-                      updateCompositionSizeFromPreview();
-                      onIframeLoad();
-                      applyInitialZoom();
-                    },
-                    onCompositionLoadingChange,
-                    onPainted: (details) => reportPreviewFirstFrame(slot, details),
-                    portrait,
-                    suppressLoadingOverlay,
-                    style: directUrl?.includes("/components/") ? { position: "absolute", inset: 0, zIndex: 1 } : void 0
-                  },
-                  `${activeKey}-${slot.gen}`
-                ) : (
-                  // Loads hidden behind the live slot until promoted.
-                  /* @__PURE__ */ jsx86(
+                "data-testid": "preview-zoom-stage",
+                children: [
+                  directUrl?.includes("/components/") && /* @__PURE__ */ jsx86(
                     Player,
                     {
-                      ref: setShadowIframeNode,
-                      directUrl: slot.url,
-                      onLoad: () => onShadowIframeLoad(slot.gen),
-                      onReadyToShowChange: (ready) => onShadowReadyChange(slot.gen, ready),
-                      onPainted: (details) => reportPreviewFirstFrame(slot, details),
-                      onPreviewError: (message) => onShadowError(slot.gen, message),
+                      projectId,
+                      onLoad: () => {
+                      },
                       portrait,
                       suppressLoadingOverlay: true,
-                      style: SHADOW_IFRAME_STYLE
+                      style: { position: "absolute", inset: 0, zIndex: 0 }
                     },
-                    `${activeKey}-${slot.gen}`
+                    `backdrop-${projectId}`
+                  ),
+                  previewSlots.map(
+                    (slot) => slot.role === "live" ? /* @__PURE__ */ jsx86(
+                      Player,
+                      {
+                        ref: setPreviewIframeRef,
+                        projectId: directUrl ? void 0 : projectId,
+                        directUrl,
+                        onLoad: () => {
+                          updateCompositionSizeFromPreview();
+                          onIframeLoad();
+                          applyInitialZoom();
+                        },
+                        onCompositionLoadingChange,
+                        onPainted: (details) => reportPreviewFirstFrame(slot, details),
+                        portrait,
+                        suppressLoadingOverlay,
+                        style: directUrl?.includes("/components/") ? { position: "absolute", inset: 0, zIndex: 1 } : void 0
+                      },
+                      `${activeKey}-${slot.gen}`
+                    ) : (
+                      // Loads hidden behind the live slot until promoted.
+                      /* @__PURE__ */ jsx86(
+                        Player,
+                        {
+                          ref: setShadowIframeNode,
+                          directUrl: slot.url,
+                          onLoad: () => onShadowIframeLoad(slot.gen),
+                          onReadyToShowChange: (ready) => onShadowReadyChange(slot.gen, ready),
+                          onPainted: (details) => reportPreviewFirstFrame(slot, details),
+                          onPreviewError: (message) => onShadowError(slot.gen, message),
+                          portrait,
+                          suppressLoadingOverlay: true,
+                          style: SHADOW_IFRAME_STYLE
+                        },
+                        `${activeKey}-${slot.gen}`
+                      )
+                    )
                   )
-                )
-              )
-            ]
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx86(
           "div",
           {
@@ -80995,14 +81031,14 @@ function dispatchModifierKey(event, key2, cb) {
   return false;
 }
 function dispatchPlainKey(event, key2, cb) {
-  if (key2 === "f" && !event.shiftKey && !event.altKey) {
+  if (key2 === STUDIO_PLAIN_KEYS.fullscreen && !event.shiftKey && !event.altKey) {
     event.preventDefault();
     if (document.fullscreenElement) void document.exitFullscreen();
     else
       document.querySelector("[data-studio-fullscreen-target]")?.requestFullscreen();
     return;
   }
-  if (event.key === "s" && !event.altKey) {
+  if (event.key === STUDIO_PLAIN_KEYS.split && !event.altKey) {
     event.preventDefault();
     if (cb.readOnlyPreview) return;
     const { selectedElementId, elements, currentTime } = usePlayerStore.getState();
@@ -81079,7 +81115,7 @@ function dispatchPlainKey(event, key2, cb) {
     }
     return;
   }
-  if (event.key === "r" && !event.shiftKey && !event.altKey && cb.onToggleRecording) {
+  if (event.key === STUDIO_PLAIN_KEYS.record && !event.shiftKey && !event.altKey && cb.onToggleRecording) {
     event.preventDefault();
     cb.onToggleRecording();
   }
@@ -86492,7 +86528,7 @@ var TAG_ICONS = {
 function getTagBadge(tagName) {
   return TAG_ICONS[tagName] ?? tagName.slice(0, 2).toUpperCase();
 }
-function isCompositionHost(el) {
+function isCompositionHost2(el) {
   return el.hasAttribute("data-composition-src") || el.hasAttribute("data-composition-file");
 }
 function createRafThrottle(run, throttleMs = 100) {
@@ -86794,7 +86830,7 @@ var LayersPanel = memo44(function LayersPanel2() {
                 const draggable = isLayerDraggable(layer);
                 const isCollapsed = collapsed[layer.key] ?? false;
                 const hasChildren = layer.childCount > 0;
-                const isCompHost = isCompositionHost(layer.element);
+                const isCompHost = isCompositionHost2(layer.element);
                 return /* @__PURE__ */ jsxs172(
                   "div",
                   {
@@ -93119,6 +93155,7 @@ export {
   CompositionBreadcrumb,
   CompositionThumbnail,
   ContextMenu,
+  DEFAULT_SHORTCUT_SECTIONS,
   EditorShell,
   ExternalFileConflictBanner,
   FileTree,