@hyperframes/studio 0.8.94 → 0.8.96

package/dist/assets/{index-BUn5H_np.js → index-D8ztHPd3.js}

@@ -1 +1 @@
-import{g as P}from"./index-BupvpoiM.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-CSHEHeOo.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/index.d.ts

@@ -1531,6 +1531,7 @@ type TimelineCanvasState = Omit<TimelineLaneBaseProps, "setRangeSelection" | "se
     playheadRef: React.RefObject<HTMLDivElement | null>;
     laneGapStrips: TimelineLaneGapStrips[];
     dropPreview: TimelineDropPlacement | null;
+    acceptsMediaDrop: boolean;
     setRangeSelection: (value: TimelineRangeSelection | null) => void;
     setResizingClip: (value: ResizingClipState | null) => void;
     setDraggedClip: (value: TimelineLaneBaseProps["draggedClip"]) => void;
@@ -3237,6 +3238,7 @@ declare function resolveSnapAdjustment(input: {
     disabled: boolean;
     /** Set when the gesture has not travelled far enough for snapping yet. */
     disabledForTravel?: boolean;
+    lockedAxis?: "x" | "y";
 }): SnapResult;
 /**
  * Full-length guide line spanning the composition: a vertical line (axis "x")

package/dist/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-BupvpoiM.js"></script>
+    <script type="module" crossorigin src="/assets/index-CSHEHeOo.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Dx79V1Se.css">
   </head>
   <body>

package/dist/index.js

@@ -1944,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) => {
@@ -12807,7 +12807,7 @@ function useTimelineProviderState({
   showAudioEffects = true,
   showKeyframes = true,
   trackPadding,
-  sessionEpoch = 0,
+  sessionEpoch: sessionEpochProp,
   previewIframeRef,
   onZIndexReorder
 } = {}) {
@@ -12849,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);
@@ -13164,6 +13165,7 @@ function useTimelineProviderState({
     marqueeRect,
     laneGapStrips,
     dropPreview: assetDrop.dropPreview,
+    acceptsMediaDrop: !!(onFileDrop || onAssetDrop),
     theme,
     showAudioEffects,
     displayTrackOrder: displayLayout.displayTrackOrder,
@@ -19388,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?.();
@@ -19428,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;
@@ -19436,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 = [];
@@ -19461,6 +19467,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
           }
         }
         try {
+          tl.clear?.();
           tl.kill?.();
         } catch {
         }
@@ -19487,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);
@@ -21239,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;
@@ -21281,6 +21291,22 @@ var TimelineCanvas = memo13(function TimelineCanvas2() {
             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;
@@ -30725,6 +30751,10 @@ var logSelect = makeStudioDebugLogger("select");
 
 // src/components/editor/domEditOverlayGestures.ts
 var BLOCKED_MOVE_THRESHOLD_PX = 4;
+function lockDragToDominantAxis(dx, dy, shiftKey) {
+  if (!shiftKey) return { dx, dy };
+  return Math.abs(dx) >= Math.abs(dy) ? { dx, dy: 0, lockedAxis: "y" } : { dx: 0, dy, lockedAxis: "x" };
+}
 var ROTATION_COMMIT_EPSILON_DEGREES = 0.05;
 var ROTATION_SNAP_DEGREES = 15;
 var ROTATED_SNAP_BYPASS_DEGREES = 0.5;
@@ -31613,7 +31643,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"]`
 );
@@ -32402,6 +32436,7 @@ function applyManualOffsetNudgeCommit(member, delta) {
 }
 function restoreManualOffsetDragMember(member) {
   restoreStudioPathOffset(member.element, member.initialPathOffset);
+  getOffsetDragGsap(member.element)?.set(member.element, { ...member.baseGsap });
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
 function restoreManualOffsetDragMembers(members) {
@@ -32410,6 +32445,15 @@ function restoreManualOffsetDragMembers(members) {
     resumeGsapTimelines(member.element);
   }
 }
+function settleDraftTranslate(element, gsapOwnsPosition) {
+  if (element.style.getPropertyValue("translate") === "none") {
+    element.style.removeProperty("translate");
+  }
+  if (!gsapOwnsPosition) return;
+  const view = element.ownerDocument.defaultView;
+  const underneath = view?.getComputedStyle(element).getPropertyValue("translate");
+  if (underneath && underneath !== "none") element.style.setProperty("translate", "none");
+}
 function endManualOffsetDragMembers(members) {
   for (const member of members) {
     endStudioManualEditGesture(member.element, member.gestureToken);
@@ -32417,12 +32461,9 @@ function endManualOffsetDragMembers(members) {
     member.element.removeAttribute("data-hf-drag-initial-offset-y");
     member.element.removeAttribute("data-hf-drag-gsap-base-x");
     member.element.removeAttribute("data-hf-drag-gsap-base-y");
-    if (member.element.style.getPropertyValue("translate") === "none") {
-      member.element.style.removeProperty("translate");
-    }
-    if (getOffsetDragGsap(member.element)) {
-      clearStudioPathOffset(member.element);
-    }
+    const gsapOwnsPosition = Boolean(getOffsetDragGsap(member.element));
+    if (gsapOwnsPosition) clearStudioPathOffset(member.element);
+    settleDraftTranslate(member.element, gsapOwnsPosition);
     resumeGsapTimelines(member.element);
   }
 }
@@ -32768,8 +32809,8 @@ function resolveSnapAdjustment(input) {
     input.gridEdges?.y,
     input.threshold
   );
-  const bestX = pickBest(xCandidates);
-  const bestY = pickBest(yCandidates);
+  const bestX = input.lockedAxis === "x" ? null : pickBest(xCandidates);
+  const bestY = input.lockedAxis === "y" ? null : pickBest(yCandidates);
   const adjustedDx = input.proposedDx + (bestX?.adjustment ?? 0);
   const adjustedDy = input.proposedDy + (bestY?.adjustment ?? 0);
   const adjustedRect = {
@@ -33285,7 +33326,8 @@ function createGroupDragMover(opts, setDraftGroupOverlayItems) {
       targets: allTargets,
       gridEdges: sc.gridEdges ?? void 0,
       threshold: SNAP_THRESHOLD_PX,
-      disabled: e.altKey
+      disabled: e.altKey,
+      lockedAxis: proposed.lockedAxis
     });
     const movingRect = {
       ...groupBounds,
@@ -33305,10 +33347,11 @@ function createGroupDragMover(opts, setDraftGroupOverlayItems) {
       lastGesture = groupG;
       lastGroupPositions = {};
     }
-    const { dx, dy } = snapGroupDelta(groupG, e, {
-      dx: e.clientX - groupG.startX,
-      dy: e.clientY - groupG.startY
-    });
+    const { dx, dy } = snapGroupDelta(
+      groupG,
+      e,
+      lockDragToDominantAxis(e.clientX - groupG.startX, e.clientY - groupG.startY, e.shiftKey)
+    );
     groupG.lastSnappedDx = dx;
     groupG.lastSnappedDy = dy;
     setDraftGroupOverlayItems(
@@ -33409,6 +33452,9 @@ function createDomEditSaveQueue(options = {}) {
 }
 
 // src/components/editor/useDomEditOverlayGestures.ts
+function isTap(g, e) {
+  return !g.travelled && Math.hypot(e.clientX - g.startX, e.clientY - g.startY) < BLOCKED_MOVE_THRESHOLD_PX;
+}
 function logGestureCommitFailure(message, error) {
   if (error instanceof DomEditSaveQueueOpenError) return;
   console.error(message, error);
@@ -33466,10 +33512,12 @@ function createDomEditOverlayGestureHandlers(opts) {
       return;
     }
     if (groupG) {
+      if (!isTap(groupG, e)) groupG.travelled = true;
       moveGroupDrag(groupG, e);
       return;
     }
     if (!g || !sel) return;
+    if (!isTap(g, e)) g.travelled = true;
     let dx = e.clientX - g.startX;
     let dy = e.clientY - g.startY;
     if (g.kind === "rotate") {
@@ -33489,6 +33537,9 @@ function createDomEditOverlayGestureHandlers(opts) {
       return;
     }
     if (g.kind === "drag") {
+      const lock = lockDragToDominantAxis(dx, dy, e.shiftKey);
+      dx = lock.dx;
+      dy = lock.dy;
       const sc = g.snapContext;
       const dragRotated = Math.abs(g.actualRotation) >= ROTATED_SNAP_BYPASS_DEGREES;
       if (!dragRotated && sc?.snapEnabled && sc.targets.length > 0) {
@@ -33514,7 +33565,8 @@ function createDomEditOverlayGestureHandlers(opts) {
           targets: allTargets,
           gridEdges: sc.gridEdges ?? void 0,
           threshold: SNAP_THRESHOLD_PX,
-          disabled: e.altKey
+          disabled: e.altKey,
+          lockedAxis: lock.lockedAxis
         });
         dx = snap.dx;
         dy = snap.dy;
@@ -33596,8 +33648,14 @@ function createDomEditOverlayGestureHandlers(opts) {
       const rawDx = e.clientX - groupG.startX;
       const rawDy = e.clientY - groupG.startY;
       opts.suppressNextBoxClickRef.current = true;
-      if (Math.hypot(rawDx, rawDy) < BLOCKED_MOVE_THRESHOLD_PX) {
+      if (isTap(groupG, e)) {
         restoreGroupPathOffsets(groupG);
+        if (e.shiftKey) {
+          opts.onCanvasMouseDown(e, {
+            preferClipAncestor: false,
+            hoverSelection: opts.hoverSelectionRef.current
+          });
+        }
         return;
       }
       const dx = groupG.lastSnappedDx ?? rawDx;
@@ -33643,10 +33701,8 @@ function createDomEditOverlayGestureHandlers(opts) {
     opts.gestureRef.current = null;
     opts.rafPausedRef.current = false;
     const movedDistance = Math.hypot(e.clientX - g.startX, e.clientY - g.startY);
-    if (g.kind === "drag" && movedDistance < BLOCKED_MOVE_THRESHOLD_PX) {
-      restoreStudioPathOffset(sel.element, g.initialPathOffset);
-      endStudioManualEditGesture(sel.element, g.manualEditDragToken);
-      resumeGsapTimelines(sel.element);
+    if (g.kind === "drag" && isTap(g, e)) {
+      if (g.pathOffsetMember) restoreManualOffsetDragMembers([g.pathOffsetMember]);
       if (box) {
         box.style.left = `${g.originLeft}px`;
         box.style.top = `${g.originTop}px`;
@@ -33772,9 +33828,7 @@ function createDomEditOverlayGestureHandlers(opts) {
     const g = opts.gestureRef.current;
     const sel = g?.selection ?? selectionRef.current;
     if (g?.mode === "path-offset" && sel) {
-      restoreStudioPathOffset(sel.element, g.initialPathOffset);
-      endStudioManualEditGesture(sel.element, g.manualEditDragToken);
-      resumeGsapTimelines(sel.element);
+      if (g.pathOffsetMember) restoreManualOffsetDragMembers([g.pathOffsetMember]);
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "box-size" && sel) {
@@ -34186,7 +34240,7 @@ function DomEditCropHandles({
       startX: event.clientX,
       startY: event.clientY,
       startInsets: state.insets,
-      didMove: false,
+      insets: state.insets,
       angleDeg: frame.angleDeg,
       scaleX: frame.scaleX,
       scaleY: frame.scaleY
@@ -34211,7 +34265,7 @@ function DomEditCropHandles({
       scaleY: gesture.scaleY
     };
     const nextInsets = gesture.edge === "move" ? resolveCropInsetFromMoveDrag(drag) : resolveCropInsetFromEdgeDrag({ ...drag, edge: gesture.edge, width, height });
-    gesture.didMove = true;
+    gesture.insets = nextInsets;
     setState((prev) => ({ ...prev, insets: nextInsets }));
   };
   const endCropGesture = (event) => {
@@ -34226,13 +34280,14 @@ function DomEditCropHandles({
   const finishCropGesture = (event) => {
     const gesture = endCropGesture(event);
     if (!gesture) return;
-    if (!gesture.didMove) return;
     const el = selection.element;
     const reLift = () => {
       if (liftedRef.current) el.style.setProperty("clip-path", "none");
     };
-    const committedValue = buildInsetClipPathSides(state.insets, state.radius);
-    const cropped = state.insets.top > 0 || state.insets.right > 0 || state.insets.bottom > 0 || state.insets.left > 0;
+    const { insets } = gesture;
+    const committedValue = buildInsetClipPathSides(insets, state.radius);
+    if (committedValue === buildInsetClipPathSides(gesture.startInsets, state.radius)) return;
+    const cropped = insets.top > 0 || insets.right > 0 || insets.bottom > 0 || insets.left > 0;
     const commit = onStyleCommit?.("clip-path", committedValue);
     reLift();
     void Promise.resolve(commit).then(() => {
@@ -34463,7 +34518,7 @@ function DomEditGroupChrome({
           cursor: !allowBodyDrag ? void 0 : canManipulate && groupCanMove ? "move" : "default"
         },
         onPointerDown: (e) => {
-          if (!canManipulate || e.shiftKey || !allowBodyDrag) return;
+          if (!canManipulate || !allowBodyDrag || e.shiftKey && !groupCanMove) return;
           gestures.startGroupDrag(e);
         },
         onMouseDown: onBoxMouseDown,
@@ -34533,12 +34588,12 @@ function DomEditSelectionChrome({
                   e.stopPropagation();
                   return;
                 }
-                if (!allowBodyDrag || !canManipulate || e.shiftKey) return;
+                if (!allowBodyDrag || !canManipulate) return;
                 if (selection.capabilities.canApplyManualOffset) {
                   gestures.startGesture("drag", e);
                   return;
                 }
-                gestures.startBlockedMove(e, selection);
+                if (!e.shiftKey) gestures.startBlockedMove(e, selection);
               },
               onMouseDown: onBoxMouseDown,
               onClick: onBoxClick,
@@ -68676,6 +68731,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 ?? "");
@@ -68733,9 +68797,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();