@hyperframes/studio 0.8.92 → 0.8.94

package/dist/index.js

@@ -876,6 +876,25 @@ var ShortcutsPanel = memo(function ShortcutsPanel2({
     )
   ] });
 });
+function ShortcutsButton({ sections, disabled = false, onSeek }) {
+  const duration = usePlayerStore((s) => s.duration);
+  const inPoint = usePlayerStore((s) => s.inPoint);
+  const outPoint = usePlayerStore((s) => s.outPoint);
+  const { setInPoint, setOutPoint, requestSeek } = usePlayerStore.getState();
+  return /* @__PURE__ */ jsx(
+    ShortcutsPanel,
+    {
+      disabled,
+      duration,
+      inPoint,
+      outPoint,
+      setInPoint,
+      setOutPoint,
+      onSeek: onSeek ?? requestSeek,
+      sections
+    }
+  );
+}
 
 // src/player/components/SpeedMenu.tsx
 import { useState as useState2, useCallback as useCallback3, memo as memo2 } from "react";
@@ -1152,10 +1171,6 @@ var PlayerControls = memo4(function PlayerControls2({
   const setAudioMuted = usePlayerStore.getState().setAudioMuted;
   const setAudioVolume = usePlayerStore.getState().setAudioVolume;
   const setLoopEnabled = usePlayerStore.getState().setLoopEnabled;
-  const inPoint = usePlayerStore((s) => s.inPoint);
-  const outPoint = usePlayerStore((s) => s.outPoint);
-  const setInPoint = usePlayerStore.getState().setInPoint;
-  const setOutPoint = usePlayerStore.getState().setOutPoint;
   const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
   const setTimeDisplayMode = usePlayerStore.getState().setTimeDisplayMode;
   const timeDisplayRef = useRef3(null);
@@ -1255,19 +1270,7 @@ var PlayerControls = memo4(function PlayerControls2({
             }
           ),
           onToggleFullscreen && /* @__PURE__ */ jsx4(FullscreenButton, { isFullscreen, onToggleFullscreen }),
-          /* @__PURE__ */ jsx4(
-            ShortcutsPanel,
-            {
-              disabled,
-              duration,
-              inPoint,
-              outPoint,
-              setInPoint,
-              setOutPoint,
-              onSeek,
-              sections: shortcutSections
-            }
-          )
+          /* @__PURE__ */ jsx4(ShortcutsButton, { disabled, onSeek, sections: shortcutSections })
         ] })
       ]
     }
@@ -1960,9 +1963,14 @@ function validRowHeight(height) {
   if (height === void 0 || !Number.isFinite(height) || height <= 0) return TRACK_H;
   return height;
 }
+function validPad(pad, fallback) {
+  return pad !== void 0 && Number.isFinite(pad) ? Math.max(0, pad) : fallback;
+}
 var rowGeometryCache = /* @__PURE__ */ new WeakMap();
 var EMPTY_ROW_HEIGHTS = Object.freeze([]);
-function createTimelineRowGeometry(rowKeys, rowHeights) {
+function createTimelineRowGeometry(rowKeys, rowHeights, padding = {}) {
+  const topPad = validPad(padding.top, TRACKS_TOP_PAD);
+  const bottomPad = validPad(padding.bottom, TRACKS_BOTTOM_PAD);
   const heights = Object.freeze(rowHeights.map(validRowHeight));
   const keys = Object.freeze(
     heights.map((_, row) => {
@@ -1985,7 +1993,7 @@ function createTimelineRowGeometry(rowKeys, rowHeights) {
     return (offsets[wholeRow] ?? 0) + (row - wholeRow) * getRowHeight(wholeRow);
   };
   const getRowFromY = (contentY) => {
-    const y = contentY - RULER_H - TRACKS_TOP_PAD;
+    const y = contentY - RULER_H - topPad;
     if (heights.length === 0) return y / TRACK_H;
     if (y < 0) return y / getRowHeight(0);
     const rowsHeight = offsets[heights.length] ?? 0;
@@ -2005,10 +2013,11 @@ function createTimelineRowGeometry(rowKeys, rowHeights) {
     rowHeights: heights,
     rowOffsets: offsets,
     rowsHeight: offsets.at(-1) ?? 0,
-    canvasHeight: RULER_H + TRACKS_TOP_PAD + (offsets.at(-1) ?? 0) + TRACKS_BOTTOM_PAD,
+    padding: Object.freeze({ top: topPad, bottom: bottomPad }),
+    canvasHeight: RULER_H + topPad + (offsets.at(-1) ?? 0) + bottomPad,
     getRowIndex: (rowKey) => rowIndexByKey.get(rowKey) ?? -1,
     getRowHeight,
-    getRowTop: (row) => RULER_H + TRACKS_TOP_PAD + getRowOffset(row),
+    getRowTop: (row) => RULER_H + topPad + getRowOffset(row),
     getRowFromY,
     getRowPositionFromY: (contentY) => {
       const rowFloat = getRowFromY(contentY);
@@ -2033,12 +2042,6 @@ function getTimelineRowGeometry(rowHeights) {
 function getTimelineRowHeight(row, rowHeights = EMPTY_ROW_HEIGHTS) {
   return validRowHeight(rowHeights[row]);
 }
-function getTimelineRowOffset(row, rowHeights) {
-  return getTimelineRowGeometry(rowHeights).getRowTop(row) - RULER_H - TRACKS_TOP_PAD;
-}
-function getTimelineRowTop(row, rowHeights = EMPTY_ROW_HEIGHTS) {
-  return RULER_H + TRACKS_TOP_PAD + getTimelineRowOffset(row, rowHeights);
-}
 function getTimelineRowFromY(contentY, rowHeights = EMPTY_ROW_HEIGHTS) {
   return getTimelineRowGeometry(rowHeights).getRowFromY(contentY);
 }
@@ -11322,7 +11325,9 @@ function applyGroupStripHeights(tracks, rowHeights, groups, expandedLaneOwnerIds
     return TRACK_H + groupOwnLaneCount(group) * AUTOMATION_LANE_H;
   });
 }
-function useTimelineRowHeights(tracks, gsapAnimations, selectedElementId, selectedElementIds, groups) {
+function useTimelineRowHeights(tracks, gsapAnimations, selectedElementId, selectedElementIds, groups, trackPadding) {
+  const padTop = trackPadding?.top;
+  const padBottom = trackPadding?.bottom;
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
   const expandedLaneOwnerIds = usePlayerStore((s) => s.expandedLaneOwnerIds);
   const { laneCounts, rowGeometry } = useMemo15(() => {
@@ -11357,10 +11362,13 @@ function useTimelineRowHeights(tracks, gsapAnimations, selectedElementId, select
       laneCounts: laneCounts2,
       rowGeometry: createTimelineRowGeometry(
         tracks.map(([track2]) => track2),
-        rowHeights
+        rowHeights,
+        { top: padTop, bottom: padBottom }
       )
     };
   }, [
+    padTop,
+    padBottom,
     expandedClipIds,
     expandedLaneOwnerIds,
     gsapAnimations,
@@ -11378,7 +11386,7 @@ function useTimelineRowHeights(tracks, gsapAnimations, selectedElementId, select
     rowHeights: rowGeometry.rowHeights
   };
 }
-function useTimelineTrackLayout(expandedElements, gsapAnimations, selectedElementId, selectedElementIds) {
+function useTimelineTrackLayout(expandedElements, gsapAnimations, selectedElementId, selectedElementIds, trackPadding) {
   const { tracks, trackStyles, trackOrder, groups, trackGroupOf } = useTimelineTrackDerivations(expandedElements);
   const trackOrderRef = useRef20(trackOrder);
   trackOrderRef.current = trackOrder;
@@ -11387,7 +11395,8 @@ function useTimelineTrackLayout(expandedElements, gsapAnimations, selectedElemen
     gsapAnimations,
     selectedElementId,
     selectedElementIds,
-    groups
+    groups,
+    trackPadding
   );
   return {
     tracks,
@@ -11432,8 +11441,8 @@ function useTimelineDisplayLayout(draggedClip, trackOrder, rowGeometry) {
   const displayTrackOrder2 = useDisplayTrackOrder(draggedClip, trackOrder);
   const displayRowHeights = useDisplayRowHeights(displayTrackOrder2, rowGeometry);
   const displayRowGeometry = useMemo15(
-    () => createTimelineRowGeometry(displayTrackOrder2, displayRowHeights),
-    [displayTrackOrder2, displayRowHeights]
+    () => createTimelineRowGeometry(displayTrackOrder2, displayRowHeights, rowGeometry.padding),
+    [displayTrackOrder2, displayRowHeights, rowGeometry.padding]
   );
   return {
     displayTrackOrder: displayTrackOrder2,
@@ -12579,7 +12588,7 @@ function useTimelineVirtualRows({
     getItemKey,
     overscan: TIMELINE_VIEWPORT_BUDGETS.rowOverscanPerSide,
     rangeExtractor,
-    scrollMargin: RULER_H + TRACKS_TOP_PAD,
+    scrollMargin: RULER_H + rowGeometry.padding.top,
     initialRect: { width: viewport.clientWidth, height: viewport.clientHeight },
     initialOffset
   });
@@ -12797,6 +12806,7 @@ function useTimelineProviderState({
   theme: themeOverrides,
   showAudioEffects = true,
   showKeyframes = true,
+  trackPadding,
   sessionEpoch = 0,
   previewIframeRef,
   onZIndexReorder
@@ -12874,7 +12884,8 @@ function useTimelineProviderState({
     timelineElements,
     gsapAnimations,
     selectedElementId,
-    selectedElementIds
+    selectedElementIds,
+    trackPadding
   );
   const timelineElementsRef = useRef25(timelineElements);
   timelineElementsRef.current = timelineElements;
@@ -21239,7 +21250,13 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
       style: { height: props.totalH, width: props.contentOrigin + props.trackContentWidth },
       children: [
         /* @__PURE__ */ jsx55(TimelineRulerPart, {}),
-        /* @__PURE__ */ jsx55("div", { "aria-hidden": "true", style: { height: props.rowsVirtualized ? 0 : TRACKS_TOP_PAD } }),
+        /* @__PURE__ */ jsx55(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: { height: props.rowsVirtualized ? 0 : props.rowGeometry.padding.top }
+          }
+        ),
         /* @__PURE__ */ jsx55(
           TimelineLanes,
           {
@@ -21257,7 +21274,13 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
             onRazorSplitAll: props.onRazorSplitAll
           }
         ),
-        /* @__PURE__ */ jsx55("div", { "aria-hidden": "true", style: { height: props.rowsVirtualized ? 0 : TRACKS_BOTTOM_PAD } }),
+        /* @__PURE__ */ jsx55(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: { height: props.rowsVirtualized ? 0 : props.rowGeometry.padding.bottom }
+          }
+        ),
         props.laneGapStrips.map((strip) => {
           const rowIndex = displayTrackOrder2.indexOf(strip.track);
           if (rowIndex < 0) return null;
@@ -21270,7 +21293,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
             {
               className: "pointer-events-none absolute",
               style: {
-                top: getTimelineRowTop(rowIndex, props.rowHeights) + CLIP_Y,
+                top: props.rowGeometry.getRowTop(rowIndex) + CLIP_Y,
                 left: props.contentOrigin + gap.start * props.pps,
                 width: Math.max((gap.end - gap.start) * props.pps, 2),
                 height: TRACK_H - CLIP_Y * 2,
@@ -21287,7 +21310,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
           {
             className: "absolute pointer-events-none",
             style: {
-              top: getTimelineRowTop(draggedRowIndex, props.rowHeights) + CLIP_Y,
+              top: props.rowGeometry.getRowTop(draggedRowIndex) + CLIP_Y,
               left: props.contentOrigin + draggedClip.previewStart * props.pps,
               width: Math.max(draggedClip.element.duration * props.pps, 4),
               height: draggedClipHeight,
@@ -21305,7 +21328,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
             "data-testid": "timeline-drop-preview",
             className: "absolute pointer-events-none",
             style: {
-              top: getTimelineRowTop(dropRowIndex, props.rowHeights) + CLIP_Y,
+              top: props.rowGeometry.getRowTop(dropRowIndex) + CLIP_Y,
               left: props.contentOrigin + props.dropPreview.start * props.pps,
               width: DROP_PREVIEW_SECONDS * props.pps,
               height: TRACK_H - CLIP_Y * 2,
@@ -21322,7 +21345,7 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
             "data-testid": "timeline-insert-line",
             className: "absolute pointer-events-none",
             style: {
-              top: getTimelineRowTop(insertLineRow, props.rowHeights) - 0.5,
+              top: props.rowGeometry.getRowTop(insertLineRow) - 0.5,
               left: props.contentOrigin,
               width: props.trackContentWidth,
               height: 1,
@@ -25328,7 +25351,8 @@ function useTimelinePlayerLoop({
   reverseRafRef,
   getAdapter,
   setCurrentTime,
-  setIsPlaying
+  setIsPlaying,
+  setLoopStart
 }) {
   const stopReverseLoop = useCallback38(() => {
     cancelAnimationFrame(reverseRafRef.current);
@@ -25346,8 +25370,10 @@ function useTimelinePlayerLoop({
         const rawLoopStart = inPoint !== null ? inPoint : 0;
         const loopEnd = rawLoopStart < rawLoopEnd ? rawLoopEnd : dur;
         const loopStart = rawLoopStart < rawLoopEnd ? rawLoopStart : 0;
+        const looping = usePlayerStore.getState().loopEnabled && dur > 0;
+        setLoopStart(looping ? loopStart : null);
         if (time >= loopEnd) {
-          if (usePlayerStore.getState().loopEnabled && dur > 0) {
+          if (looping) {
             adapter.seek(loopStart, { keepPlaying: true });
             liveTime.notify(loopStart);
             adapter.play();
@@ -25365,7 +25391,7 @@ function useTimelinePlayerLoop({
       rafRef.current = requestAnimationFrame(tick);
     };
     rafRef.current = requestAnimationFrame(tick);
-  }, [rafRef, getAdapter, setCurrentTime, setIsPlaying]);
+  }, [rafRef, getAdapter, setCurrentTime, setIsPlaying, setLoopStart]);
   const stopRAFLoop = useCallback38(() => {
     cancelAnimationFrame(rafRef.current);
   }, [rafRef]);
@@ -25863,12 +25889,19 @@ function useTimelinePlayer({
     },
     []
   );
+  const setLoopStart = useCallback39((seconds) => {
+    try {
+      iframeRef.current?.contentWindow?.__hf?.setLoopStart?.(seconds);
+    } catch {
+    }
+  }, []);
   const { startRAFLoop, stopRAFLoop, stopReverseLoop } = useTimelinePlayerLoop({
     rafRef,
     reverseRafRef,
     getAdapter,
     setCurrentTime,
-    setIsPlaying
+    setIsPlaying,
+    setLoopStart
   });
   const applyPlaybackRate = useCallback39((rate) => {
     const iframe = iframeRef.current;
@@ -28029,7 +28062,7 @@ function PreviewOverlayProvider({ iframe, children }) {
       toggleSafeMargins: () => usePreviewGuidesStore.getState().toggle("safeMarginsVisible")
     }
   };
-  return /* @__PURE__ */ jsx74(PreviewOverlayContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx74("div", { ref: overlayRef, className: "absolute inset-0", children }) });
+  return /* @__PURE__ */ jsx74(PreviewOverlayContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx74("div", { ref: overlayRef, className: "pointer-events-none absolute inset-0", children }) });
 }
 function usePreviewOverlayContext() {
   const context = useContext8(PreviewOverlayContext);
@@ -30100,6 +30133,7 @@ function readThroughPass(memo53, key2, compute) {
 }
 
 // src/components/editor/domEditOverlayGeometry.ts
+var RESIZE_HANDLE_HIT_PX = 16;
 function isElementVisibleForOverlay(el) {
   return isElementVisibleThroughAncestors(el);
 }
@@ -34058,30 +34092,43 @@ import { useEffect as useEffect43, useRef as useRef64, useState as useState40 }
 import { Fragment as Fragment26, jsx as jsx84, jsxs as jsxs57 } from "react/jsx-runtime";
 var EDGE_HIT_THICKNESS = 12;
 var EDGE_HIT_LENGTH = 32;
-function edgeHandlePlacement(edge, rect) {
-  const cx = rect.left + rect.width / 2;
-  const cy = rect.top + rect.height / 2;
-  if (edge === "top") {
-    return { left: cx, top: rect.top, transform: "translate(-50%, -100%)" };
-  }
-  if (edge === "bottom") {
-    return { left: cx, top: rect.top + rect.height, transform: "translate(-50%, 0)" };
-  }
-  if (edge === "left") {
-    return { left: rect.left, top: cy, transform: "translate(-100%, -50%)" };
+var EDGE_PILL_LENGTH = 24;
+var REPOSITION_HANDLE_PX = 22;
+function edgeHandleLayout(edge, rect) {
+  const vertical = edge === "left" || edge === "right";
+  const length = Math.min(
+    EDGE_HIT_LENGTH,
+    (vertical ? rect.height : rect.width) - RESIZE_HANDLE_HIT_PX
+  );
+  if (length <= 0) return null;
+  const pill = Math.min(EDGE_PILL_LENGTH, length);
+  if (vertical) {
+    return {
+      hit: {
+        left: edge === "left" ? rect.left - EDGE_HIT_THICKNESS : rect.left + rect.width,
+        top: rect.top + (rect.height - length) / 2,
+        width: EDGE_HIT_THICKNESS,
+        height: length
+      },
+      cursor: "ew-resize",
+      pill: { width: 4, height: pill }
+    };
   }
-  return { left: rect.left + rect.width, top: cy, transform: "translate(0, -50%)" };
-}
-var EDGES = ["top", "right", "bottom", "left"];
-function edgeHandleMetrics(vertical) {
   return {
-    hitWidth: vertical ? EDGE_HIT_THICKNESS : EDGE_HIT_LENGTH,
-    hitHeight: vertical ? EDGE_HIT_LENGTH : EDGE_HIT_THICKNESS,
-    cursor: vertical ? "ew-resize" : "ns-resize",
-    pillWidth: vertical ? 4 : 24,
-    pillHeight: vertical ? 24 : 4
+    hit: {
+      left: rect.left + (rect.width - length) / 2,
+      top: edge === "top" ? rect.top - EDGE_HIT_THICKNESS : rect.top + rect.height,
+      width: length,
+      height: EDGE_HIT_THICKNESS
+    },
+    cursor: "ns-resize",
+    pill: { width: pill, height: 4 }
   };
 }
+function repositionHandleSize(rect) {
+  return Math.min(REPOSITION_HANDLE_PX, Math.max(rect.width, rect.height) - RESIZE_HANDLE_HIT_PX);
+}
+var EDGES = ["top", "right", "bottom", "left"];
 function DomEditCropHandles({
   selection,
   overlayRect,
@@ -34127,6 +34174,7 @@ function DomEditCropHandles({
     frame.scaleX,
     frame.scaleY
   );
+  const repositionSize = repositionHandleSize(cropRect);
   const startCropGesture = (edge, event) => {
     if (!onStyleCommit) return;
     event.preventDefault();
@@ -34166,13 +34214,18 @@ function DomEditCropHandles({
     gesture.didMove = true;
     setState((prev) => ({ ...prev, insets: nextInsets }));
   };
-  const finishCropGesture = (event) => {
+  const endCropGesture = (event) => {
     const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    if (!gesture || gesture.pointerId !== event.pointerId) return null;
     event.preventDefault();
     event.stopPropagation();
     gestureRef.current = null;
     setDragging(false);
+    return gesture;
+  };
+  const finishCropGesture = (event) => {
+    const gesture = endCropGesture(event);
+    if (!gesture) return;
     if (!gesture.didMove) return;
     const el = selection.element;
     const reLift = () => {
@@ -34187,12 +34240,8 @@ function DomEditCropHandles({
     }, reLift);
   };
   const cancelCropGesture = (event) => {
-    const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
-    event.preventDefault();
-    event.stopPropagation();
-    gestureRef.current = null;
-    setDragging(false);
+    const gesture = endCropGesture(event);
+    if (!gesture) return;
     setState((prev) => ({ ...prev, insets: gesture.startInsets }));
   };
   if (!state.croppable) return null;
@@ -34241,7 +34290,7 @@ function DomEditCropHandles({
             ] })
           }
         ),
-        hasCrop && /* @__PURE__ */ jsx84(
+        hasCrop && repositionSize > 0 && /* @__PURE__ */ jsx84(
           "button",
           {
             type: "button",
@@ -34250,11 +34299,10 @@ function DomEditCropHandles({
             "data-dom-edit-crop-handle": "true",
             className: "pointer-events-auto absolute rounded-full border-2 border-studio-accent bg-studio-accent/30 shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",
             style: {
-              left: cropRect.left + cropRect.width / 2,
-              top: cropRect.top + cropRect.height / 2,
-              width: 22,
-              height: 22,
-              transform: "translate(-50%, -50%)",
+              left: cropRect.left + (cropRect.width - repositionSize) / 2,
+              top: cropRect.top + (cropRect.height - repositionSize) / 2,
+              width: repositionSize,
+              height: repositionSize,
               cursor: "move",
               touchAction: "none"
             },
@@ -34265,10 +34313,9 @@ function DomEditCropHandles({
           }
         ),
         EDGES.map((edge) => {
-          const vertical = edge === "left" || edge === "right";
-          const place = edgeHandlePlacement(edge, cropRect);
+          const layout = edgeHandleLayout(edge, cropRect);
+          if (!layout) return null;
           const revealed = dragging || hasCrop || hotEdge === edge;
-          const m = edgeHandleMetrics(vertical);
           return /* @__PURE__ */ jsx84(
             "button",
             {
@@ -34278,12 +34325,8 @@ function DomEditCropHandles({
               "data-dom-edit-crop-handle": "true",
               className: "pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0",
               style: {
-                left: place.left,
-                top: place.top,
-                width: m.hitWidth,
-                height: m.hitHeight,
-                transform: place.transform,
-                cursor: m.cursor,
+                ...layout.hit,
+                cursor: layout.cursor,
                 touchAction: "none"
               },
               onPointerEnter: () => setHotEdge(edge),
@@ -34297,8 +34340,7 @@ function DomEditCropHandles({
                 {
                   className: "pointer-events-none rounded-full bg-studio-accent/90 shadow-[0_0_0_1px_rgba(0,0,0,0.4)] transition-opacity duration-100",
                   style: {
-                    width: m.pillWidth,
-                    height: m.pillHeight,
+                    ...layout.pill,
                     opacity: revealed ? 1 : 0
                   }
                 }
@@ -34373,7 +34415,6 @@ var RESIZE_HANDLE_DEFS = [
   { handle: "sw", cursor: "nesw-resize", x: "left", y: "bottom" },
   { handle: "se", cursor: "nwse-resize", x: "right", y: "bottom" }
 ];
-var RESIZE_HANDLE_HIT_PX = 16;
 var NO_CROP_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
 function resizeHandleStyle(def, overlayRect, cropInset) {
   const half = RESIZE_HANDLE_HIT_PX / 2;
@@ -34387,6 +34428,7 @@ function DomEditGroupChrome({
   groupOverlayItems,
   groupBounds,
   allowCanvasMovement,
+  allowBodyDrag,
   groupCanMove,
   gestures,
   onBoxMouseDown,
@@ -34418,10 +34460,10 @@ function DomEditGroupChrome({
           top: groupBounds.top,
           width: groupBounds.width,
           height: groupBounds.height,
-          cursor: canManipulate && groupCanMove ? "move" : "default"
+          cursor: !allowBodyDrag ? void 0 : canManipulate && groupCanMove ? "move" : "default"
         },
         onPointerDown: (e) => {
-          if (!canManipulate || e.shiftKey) return;
+          if (!canManipulate || e.shiftKey || !allowBodyDrag) return;
           gestures.startGroupDrag(e);
         },
         onMouseDown: onBoxMouseDown,
@@ -34434,6 +34476,7 @@ function DomEditSelectionChrome({
   selection,
   overlayRect,
   allowCanvasMovement,
+  allowBodyDrag,
   cropOutlineInsetPx,
   boxRef,
   boxChromeClass,
@@ -34482,7 +34525,7 @@ function DomEditSelectionChrome({
                 width: overlayRect.width,
                 height: overlayRect.height,
                 clipPath: boxClipPath,
-                cursor: canManipulate && selection.capabilities.canApplyManualOffset ? "move" : "default"
+                cursor: !allowBodyDrag ? void 0 : canManipulate && selection.capabilities.canApplyManualOffset ? "move" : "default"
               },
               onPointerDown: (e) => {
                 if (inlineText?.startFromPress(e)) {
@@ -34490,7 +34533,7 @@ function DomEditSelectionChrome({
                   e.stopPropagation();
                   return;
                 }
-                if (!canManipulate || e.shiftKey) return;
+                if (!allowBodyDrag || !canManipulate || e.shiftKey) return;
                 if (selection.capabilities.canApplyManualOffset) {
                   gestures.startGesture("drag", e);
                   return;
@@ -35920,6 +35963,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
   groupSelections = [],
   hoverSelection,
   allowCanvasMovement = true,
+  allowBodyDrag = true,
   canvasInput = "overlay",
   onTextEditingChange,
   onSelectionBoxClick,
@@ -35940,6 +35984,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
 }) {
   const readOnly = usePreviewReadOnly();
   const hostInput = canvasInput === "host";
+  const bodyDrag = allowBodyDrag || !hostInput;
   const overlayRef = useRef68(null);
   const boxRef = useRef68(null);
   const onMarqueeSelectRef = useRef68(onMarqueeSelect);
@@ -36229,6 +36274,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             groupOverlayItems,
             groupBounds,
             allowCanvasMovement,
+            allowBodyDrag: bodyDrag,
             groupCanMove,
             gestures,
             onBoxMouseDown: suppressBoxMouseDown,
@@ -36242,6 +36288,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             selection,
             overlayRect,
             allowCanvasMovement,
+            allowBodyDrag: bodyDrag,
             cropOutlineInsetPx: cropOutlineInsetPx ?? void 0,
             boxRef,
             boxChromeClass,
@@ -38255,6 +38302,7 @@ function ConnectedDomEditOverlay({
   shouldShowSelectedDomBounds,
   isGestureRecording,
   canvasInput,
+  allowBodyDrag,
   onTextEditingChange,
   onSelectionBoxClick
 }) {
@@ -38287,6 +38335,7 @@ function ConnectedDomEditOverlay({
       groupSelections: shouldShowSelectedDomBounds ? domEditGroupSelections : [],
       allowCanvasMovement: !isGestureRecording,
       canvasInput,
+      allowBodyDrag,
       onTextEditingChange,
       onSelectionBoxClick,
       onCanvasMouseDown: handlePreviewCanvasMouseDown,
@@ -40994,7 +41043,7 @@ var SnapToolbar = memo27(function SnapToolbar2() {
   return /* @__PURE__ */ jsxs66(
     "div",
     {
-      className: "absolute top-2 right-2 z-50 flex items-center gap-1",
+      className: "pointer-events-auto absolute top-2 right-2 z-50 flex items-center gap-1",
       onPointerDown: (e) => e.stopPropagation(),
       children: [
         motionPathCreateAvailable && /* @__PURE__ */ jsx95(
@@ -41260,7 +41309,7 @@ function PreviewOverlays({
     return /* @__PURE__ */ jsxs67(Fragment30, { children: [
       /* @__PURE__ */ jsx97(TopologyLens, { iframeRef: previewIframeRef, activeCompositionPath: activeCompPath }),
       /* @__PURE__ */ jsx97(CaptionOverlay, { iframeRef: previewIframeRef }),
-      /* @__PURE__ */ jsxs67("div", { className: "absolute top-2 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1", children: [
+      /* @__PURE__ */ jsxs67("div", { className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1", children: [
         /* @__PURE__ */ jsx97("span", { className: "h-1.5 w-1.5 rounded-full bg-studio-accent", "aria-hidden": "true" }),
         /* @__PURE__ */ jsx97("span", { className: "text-2xs text-neutral-200", children: "Editing captions" }),
         /* @__PURE__ */ jsx97(
@@ -41277,7 +41326,7 @@ function PreviewOverlays({
         "div",
         {
           role: "alert",
-          className: "absolute top-10 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-red-500/50 bg-red-950/90 px-2.5 py-1",
+          className: "pointer-events-auto absolute top-10 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-red-500/50 bg-red-950/90 px-2.5 py-1",
           children: [
             /* @__PURE__ */ jsx97("span", { className: "text-2xs text-red-200", children: captionSyncError }),
             /* @__PURE__ */ jsx97(
@@ -41332,7 +41381,7 @@ function PreviewOverlays({
       {
         type: "button",
         onClick: enterCaptionMode,
-        className: "absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent",
+        className: "pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent",
         children: "Edit captions"
       }
     )
@@ -76581,7 +76630,9 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     const sizeSet = resizeGroup === "size" ? anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element) : findSizeSetAnimation(workingAnimations, sel, selection.element);
     if (resizeGroup === "size") {
       const animatedTween = pickClosestToPlayhead(
-        workingAnimations.filter((a) => !isInstantHold(a) && resolveTweenDuration(a) > 0)
+        workingAnimations.filter(
+          (a) => !isInstantHold(a) && resolveTweenDuration(a) > 0 && animationWritesAnyProperty(a, resizeProperties)
+        )
       );
       if (animatedTween) {
         logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
@@ -90539,6 +90590,7 @@ function TimelineToolbar({
   domEditSession,
   onSplitElement,
   history: history2,
+  showHistory = true,
   showAddBeat = true,
   showKeyframes = true
 }) {
@@ -90598,7 +90650,7 @@ function TimelineToolbar({
     // position (tracks right below) makes it self-evident.
     /* @__PURE__ */ jsx227("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs180("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
       /* @__PURE__ */ jsxs180("div", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsx227(TimelineHistoryButtons, { ...history2 }),
+        showHistory && /* @__PURE__ */ jsx227(TimelineHistoryButtons, { ...history2 }),
         /* @__PURE__ */ jsx227(TimelineToolPicker, {}),
         /* @__PURE__ */ jsx227("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
         /* @__PURE__ */ jsx227(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx227(
@@ -92240,12 +92292,14 @@ export {
   RenderQueue,
   SNAP_THRESHOLD_PX,
   Select,
+  ShortcutsButton,
   Slider,
   SnapGuideOverlay,
   SnapToolbar,
   SourceEditor,
   StudioApp,
   StudioFileConflictError,
+  TRACK_H,
   Tab,
   TabPanel,
   Tabs,