@hyperframes/studio 0.8.95 → 0.8.96

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

@@ -1 +1 @@
-import{g as P}from"./index-Cc4by8r7.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

@@ -3238,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-Cc4by8r7.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

@@ -30751,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;
@@ -32432,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) {
@@ -32440,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);
@@ -32447,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);
   }
 }
@@ -32798,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 = {
@@ -33315,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,
@@ -33335,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(
@@ -33439,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);
@@ -33496,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") {
@@ -33519,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) {
@@ -33544,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;
@@ -33626,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;
@@ -33673,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`;
@@ -33802,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) {
@@ -34216,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
@@ -34241,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) => {
@@ -34256,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(() => {
@@ -34493,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,
@@ -34563,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,