@hyperframes/studio 0.8.93 → 0.8.95

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 })
         ] })
       ]
     }
@@ -1941,8 +1944,8 @@ function getTimelineBeatEntries(beatTimes, beatStrengths, range, pinnedIndexes =
 function getTimelineLaneTop(laneIndex) {
   return TRACK_H + Math.max(0, Math.trunc(laneIndex)) * LANE_H;
 }
-var TRACKS_TOP_PAD = 50;
-var TRACKS_BOTTOM_PAD = Math.round(TRACK_H * 1.5);
+var TRACKS_TOP_PAD = 8;
+var TRACKS_BOTTOM_PAD = TRACK_H;
 var TRACKS_LEFT_PAD = 48;
 function trackHeights(tracks, expandedClipIds) {
   return tracks.map((clips) => {
@@ -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,7 +12806,8 @@ function useTimelineProviderState({
   theme: themeOverrides,
   showAudioEffects = true,
   showKeyframes = true,
-  sessionEpoch = 0,
+  trackPadding,
+  sessionEpoch: sessionEpochProp,
   previewIframeRef,
   onZIndexReorder
 } = {}) {
@@ -12839,6 +12849,7 @@ function useTimelineProviderState({
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatDragging = usePlayerStore((s) => s.beatDragging);
   const timelineSessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
+  const sessionEpoch = sessionEpochProp ?? timelineSessionEpoch;
   const setFocusedEaseSegment = usePlayerStore((s) => s.setFocusedEaseSegment);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
   const playheadRef = useRef25(null);
@@ -12874,7 +12885,8 @@ function useTimelineProviderState({
     timelineElements,
     gsapAnimations,
     selectedElementId,
-    selectedElementIds
+    selectedElementIds,
+    trackPadding
   );
   const timelineElementsRef = useRef25(timelineElements);
   timelineElementsRef.current = timelineElements;
@@ -13153,6 +13165,7 @@ function useTimelineProviderState({
     marqueeRect,
     laneGapStrips,
     dropPreview: assetDrop.dropPreview,
+    acceptsMediaDrop: !!(onFileDrop || onAssetDrop),
     theme,
     showAudioEffects,
     displayTrackOrder: displayLayout.displayTrackOrder,
@@ -19377,6 +19390,13 @@ function verifyTimelinesPopulated(win, targetKeys) {
   }
   return Object.keys(timelines).filter((k) => k !== "__proxied").length > 0;
 }
+function restoreAuthoredTransforms(style, authored) {
+  style.transform = authored?.transform ?? "";
+  if (!authored) return;
+  for (const prop of ["translate", "rotate", "scale"]) {
+    style.setProperty(prop, authored.getPropertyValue(prop));
+  }
+}
 function finalizeSoftReload(win, currentTime) {
   win.__player?.seek?.(currentTime);
   win.__hfForceTimelineRebind?.();
@@ -19417,7 +19437,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
   const currentTime = currentTimeOverride ?? win.__player?.getTime?.() ?? 0;
   let deferredToAsync = false;
   let authoredDoc;
-  const findAuthoredSource = (el) => {
+  const findAuthoredStyle = (el) => {
     if (authoredDoc === void 0) {
       try {
         authoredDoc = authoredHtml ? parseSavedSource(authoredHtml) : null;
@@ -19425,13 +19445,10 @@ function applySoftReload(iframe, scriptText, options = {}) {
         authoredDoc = null;
       }
     }
-    return authoredDoc ? findAuthoredElement(authoredDoc, el) : null;
-  };
-  const readAuthoredOpacity = (el) => {
-    const source = findAuthoredSource(el);
-    if (source instanceof HTMLElement) return source.style.opacity;
-    return readStampedAuthoredOpacity(el);
+    const source = authoredDoc ? findAuthoredElement(authoredDoc, el) : null;
+    return source instanceof HTMLElement || source instanceof SVGElement ? source.style : null;
   };
+  const readAuthoredOpacity = (el) => findAuthoredStyle(el)?.opacity ?? readStampedAuthoredOpacity(el);
   const doReload = () => {
     const timelines = win.__timelines;
     const allTargets = [];
@@ -19450,6 +19467,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
           }
         }
         try {
+          tl.clear?.();
           tl.kill?.();
         } catch {
         }
@@ -19476,7 +19494,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
       for (const [el, css2] of saved2) {
         const s = el.style;
         s.cssText = css2;
-        s.removeProperty("transform");
+        restoreAuthoredTransforms(s, findAuthoredStyle(el));
         const authored = readAuthoredOpacity(el);
         if (authored !== null) {
           applyAuthoredInlineOpacity(s, authored);
@@ -21228,6 +21246,9 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
   const dropTrackIndex = props.dropPreview ? displayTrackOrder2.indexOf(props.dropPreview.track) : -1;
   const dropRowIndex = dropTrackIndex < 0 ? displayTrackOrder2.length : dropTrackIndex;
   const insertLineRow = (draggedClip?.started ? draggedClip.insertRow : null) ?? props.dropPreview?.insertRow ?? null;
+  const ghostLaneActive = (insertLineRow ?? -1) >= props.trackOrder.length || props.dropPreview?.insertRow == null && props.dropPreview != null && dropTrackIndex < 0;
+  const showGhostLane = props.rowGeometry.padding.bottom >= TRACK_H;
+  const ghostLaneRow = props.rowGeometry.getRowIndex(props.trackOrder.at(-1) ?? Number.NaN) + 1;
   const draggedRowHeight = getTimelineRowHeight(draggedRowIndex, props.rowHeights);
   const draggedClipHeight = Math.min(draggedRowHeight, TRACK_H) - CLIP_Y * 2;
   const beatDragging = props.beatDragging;
@@ -21239,7 +21260,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 +21284,29 @@ 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 }
+          }
+        ),
+        showGhostLane && /* @__PURE__ */ jsx55(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-testid": "timeline-ghost-lane",
+            "data-active": ghostLaneActive || void 0,
+            className: `pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${ghostLaneActive ? "border-studio-accent/60 bg-studio-accent/6 text-studio-accent" : "border-neutral-700/50 text-neutral-500"}`,
+            style: {
+              top: props.rowGeometry.getRowTop(ghostLaneRow) + CLIP_Y,
+              left: props.contentOrigin,
+              width: props.trackContentWidth,
+              height: TRACK_H - CLIP_Y * 2
+            },
+            children: props.acceptsMediaDrop && "Drop media here"
+          }
+        ),
         props.laneGapStrips.map((strip) => {
           const rowIndex = displayTrackOrder2.indexOf(strip.track);
           if (rowIndex < 0) return null;
@@ -21270,7 +21319,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 +21336,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 +21354,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 +21371,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,
@@ -28039,7 +28088,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);
@@ -30110,6 +30159,7 @@ function readThroughPass(memo53, key2, compute) {
 }
 
 // src/components/editor/domEditOverlayGeometry.ts
+var RESIZE_HANDLE_HIT_PX = 16;
 function isElementVisibleForOverlay(el) {
   return isElementVisibleThroughAncestors(el);
 }
@@ -31589,7 +31639,11 @@ function reapplyRotations(doc) {
     }
   }
 }
-var STUDIO_EDIT_ATTRS = [STUDIO_PATH_OFFSET_ATTR, STUDIO_BOX_SIZE_ATTR, STUDIO_ROTATION_ATTR].flatMap((attr) => [attr, `data-${attr}`]).concat(STUDIO_MOTION_ATTR);
+var STUDIO_EDIT_ATTRS = [
+  STUDIO_PATH_OFFSET_ATTR,
+  STUDIO_BOX_SIZE_ATTR,
+  STUDIO_ROTATION_ATTR
+].flatMap((attr) => [attr, `data-${attr}`]).concat(STUDIO_MOTION_ATTR);
 var STUDIO_EDIT_SELECTORS = STUDIO_EDIT_ATTRS.map(
   (attr) => attr === STUDIO_MOTION_ATTR ? `[${attr}]` : `[${attr}="true"]`
 );
@@ -34068,30 +34122,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,
@@ -34137,6 +34204,7 @@ function DomEditCropHandles({
     frame.scaleX,
     frame.scaleY
   );
+  const repositionSize = repositionHandleSize(cropRect);
   const startCropGesture = (edge, event) => {
     if (!onStyleCommit) return;
     event.preventDefault();
@@ -34176,13 +34244,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 = () => {
@@ -34197,12 +34270,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;
@@ -34251,7 +34320,7 @@ function DomEditCropHandles({
             ] })
           }
         ),
-        hasCrop && /* @__PURE__ */ jsx84(
+        hasCrop && repositionSize > 0 && /* @__PURE__ */ jsx84(
           "button",
           {
             type: "button",
@@ -34260,11 +34329,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"
             },
@@ -34275,10 +34343,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",
             {
@@ -34288,12 +34355,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),
@@ -34307,8 +34370,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
                   }
                 }
@@ -34383,7 +34445,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;
@@ -34397,6 +34458,7 @@ function DomEditGroupChrome({
   groupOverlayItems,
   groupBounds,
   allowCanvasMovement,
+  allowBodyDrag,
   groupCanMove,
   gestures,
   onBoxMouseDown,
@@ -34428,10 +34490,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,
@@ -34444,6 +34506,7 @@ function DomEditSelectionChrome({
   selection,
   overlayRect,
   allowCanvasMovement,
+  allowBodyDrag,
   cropOutlineInsetPx,
   boxRef,
   boxChromeClass,
@@ -34492,7 +34555,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)) {
@@ -34500,7 +34563,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;
@@ -35930,6 +35993,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
   groupSelections = [],
   hoverSelection,
   allowCanvasMovement = true,
+  allowBodyDrag = true,
   canvasInput = "overlay",
   onTextEditingChange,
   onSelectionBoxClick,
@@ -35950,6 +36014,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);
@@ -36239,6 +36304,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             groupOverlayItems,
             groupBounds,
             allowCanvasMovement,
+            allowBodyDrag: bodyDrag,
             groupCanMove,
             gestures,
             onBoxMouseDown: suppressBoxMouseDown,
@@ -36252,6 +36318,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
             selection,
             overlayRect,
             allowCanvasMovement,
+            allowBodyDrag: bodyDrag,
             cropOutlineInsetPx: cropOutlineInsetPx ?? void 0,
             boxRef,
             boxChromeClass,
@@ -38265,6 +38332,7 @@ function ConnectedDomEditOverlay({
   shouldShowSelectedDomBounds,
   isGestureRecording,
   canvasInput,
+  allowBodyDrag,
   onTextEditingChange,
   onSelectionBoxClick
 }) {
@@ -38297,6 +38365,7 @@ function ConnectedDomEditOverlay({
       groupSelections: shouldShowSelectedDomBounds ? domEditGroupSelections : [],
       allowCanvasMovement: !isGestureRecording,
       canvasInput,
+      allowBodyDrag,
       onTextEditingChange,
       onSelectionBoxClick,
       onCanvasMouseDown: handlePreviewCanvasMouseDown,
@@ -41004,7 +41073,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(
@@ -41270,7 +41339,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(
@@ -41287,7 +41356,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(
@@ -41342,7 +41411,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"
       }
     )
@@ -68637,6 +68706,15 @@ function syncElementAttributes(target, source) {
     target.setAttribute(name, source.getAttribute(name) ?? "");
   }
 }
+function syncStaleEditMarks(doc, restored) {
+  const restoredDoc = parseSavedSource(restored);
+  for (const live of doc.querySelectorAll(STUDIO_EDIT_ATTRS.map((attr) => `[${attr}]`).join())) {
+    const source = findAuthoredElement(restoredDoc, live);
+    if (source && STUDIO_EDIT_ATTRS.some((a) => live.getAttribute(a) !== source.getAttribute(a))) {
+      syncElementAttributes(live, source);
+    }
+  }
+}
 function readGsapScriptTexts(html2) {
   const doc = new DOMParser().parseFromString(html2, "text/html");
   return findGsapScriptElements(doc).map((script) => script.textContent ?? "");
@@ -68694,9 +68772,11 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
   const restoredScript = extractGsapScriptText(restored);
   const previousScript = extractGsapScriptText(previous);
   if (restoredScript && restoredScript !== previousScript) {
+    syncStaleEditMarks(doc, restored);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
-      currentTimeOverride: currentTime
+      currentTimeOverride: currentTime,
+      authoredHtml: restored
     });
     if (result === "cannot-soft-reload") {
       reloadPreview();
@@ -76591,7 +76671,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 });
@@ -90549,6 +90631,7 @@ function TimelineToolbar({
   domEditSession,
   onSplitElement,
   history: history2,
+  showHistory = true,
   showAddBeat = true,
   showKeyframes = true
 }) {
@@ -90608,7 +90691,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(
@@ -92250,12 +92333,14 @@ export {
   RenderQueue,
   SNAP_THRESHOLD_PX,
   Select,
+  ShortcutsButton,
   Slider,
   SnapGuideOverlay,
   SnapToolbar,
   SourceEditor,
   StudioApp,
   StudioFileConflictError,
+  TRACK_H,
   Tab,
   TabPanel,
   Tabs,