@hyperframes/studio 0.7.95 → 0.7.97

package/dist/assets/{index-DR4Dsw8D.js → index-CFvtejEa.js}

@@ -1 +1 @@
-import{g as P}from"./index-4KcC7fDo.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-B1gZJoA_.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/assets/{index-Bl6x228Z.js → index-Cuz4bnUF.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-4KcC7fDo.js";/*!
+import{n as Qi}from"./index-B1gZJoA_.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

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-4KcC7fDo.js"></script>
+    <script type="module" crossorigin src="/assets/index-B1gZJoA_.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-tBPidglp.css">
   </head>
   <body>

package/dist/index.js

@@ -1588,7 +1588,10 @@ function resolveCanary(name) {
 }
 function canaryEventProperties() {
   return canaryFeatureProperties(
-    CANARIES.map((c) => ({ name: c.name, enabled: resolveCanary(c.name).enabled }))
+    CANARIES.map((c) => {
+      const { enabled: enabled2, reason } = resolveCanary(c.name);
+      return { name: c.name, enabled: enabled2, reason };
+    })
   );
 }
 
@@ -24525,6 +24528,8 @@ var STUDIO_ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
 var STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR = "data-hf-studio-original-inline-translate";
 var STUDIO_ORIGINAL_WIDTH_ATTR = "data-hf-studio-original-width";
 var STUDIO_ORIGINAL_HEIGHT_ATTR = "data-hf-studio-original-height";
+var STUDIO_ORIGINAL_BOX_WIDTH_ATTR = "data-hf-studio-original-box-width";
+var STUDIO_ORIGINAL_BOX_HEIGHT_ATTR = "data-hf-studio-original-box-height";
 var STUDIO_ORIGINAL_MIN_WIDTH_ATTR = "data-hf-studio-original-min-width";
 var STUDIO_ORIGINAL_MIN_HEIGHT_ATTR = "data-hf-studio-original-min-height";
 var STUDIO_ORIGINAL_MAX_WIDTH_ATTR = "data-hf-studio-original-max-width";
@@ -24855,6 +24860,12 @@ function restoreStaleStudioScaleResize(element) {
   element.removeAttribute(STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR);
 }
 function writeStudioBoxSizeVars(element, size) {
+  if (!element.hasAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR)) {
+    element.setAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR, String(element.offsetWidth));
+  }
+  if (!element.hasAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR)) {
+    element.setAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, String(element.offsetHeight));
+  }
   if (!element.hasAttribute(STUDIO_BOX_SIZE_ATTR)) {
     element.setAttribute(STUDIO_ORIGINAL_WIDTH_ATTR, element.style.getPropertyValue("width"));
     element.setAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR, element.style.getPropertyValue("height"));
@@ -25067,6 +25078,8 @@ function captureStudioBoxSize(element) {
     marker: element.getAttribute(STUDIO_BOX_SIZE_ATTR),
     originalWidth: element.getAttribute(STUDIO_ORIGINAL_WIDTH_ATTR),
     originalHeight: element.getAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR),
+    originalBoxWidth: element.getAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR),
+    originalBoxHeight: element.getAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR),
     originalMinWidth: element.getAttribute(STUDIO_ORIGINAL_MIN_WIDTH_ATTR),
     originalMinHeight: element.getAttribute(STUDIO_ORIGINAL_MIN_HEIGHT_ATTR),
     originalMaxWidth: element.getAttribute(STUDIO_ORIGINAL_MAX_WIDTH_ATTR),
@@ -25129,6 +25142,8 @@ function restoreStudioBoxSize(element, previous) {
   restoreAttribute(element, STUDIO_BOX_SIZE_ATTR, previous.marker);
   restoreAttribute(element, STUDIO_ORIGINAL_WIDTH_ATTR, previous.originalWidth);
   restoreAttribute(element, STUDIO_ORIGINAL_HEIGHT_ATTR, previous.originalHeight);
+  restoreAttribute(element, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, previous.originalBoxWidth);
+  restoreAttribute(element, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, previous.originalBoxHeight);
   restoreAttribute(element, STUDIO_ORIGINAL_MIN_WIDTH_ATTR, previous.originalMinWidth);
   restoreAttribute(element, STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, previous.originalMinHeight);
   restoreAttribute(element, STUDIO_ORIGINAL_MAX_WIDTH_ATTR, previous.originalMaxWidth);
@@ -25928,6 +25943,12 @@ function setElementGsapPosition(element, x, y) {
   gsap3.set(element, { x, y });
   return true;
 }
+function setElementGsapScale(element, x, y) {
+  const gsap3 = gsapOf(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { scaleX: x, scaleY: y });
+  return true;
+}
 function readElementGsapNumber(element, prop) {
   const value = Number(gsapOf(element)?.getProperty?.(element, prop));
   return Number.isFinite(value) ? value : null;
@@ -56695,6 +56716,9 @@ var BOX_SIZE_STYLE_PROPS = [
 var BOX_SIZE_ORIG_ATTRS = [
   [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
   [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
+  // Records a measurement rather than a style, so it restores nothing.
+  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
+  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
   [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
   [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
   [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
@@ -59525,6 +59549,21 @@ function synthesizeIdentityProps(source) {
   }
   return id;
 }
+function originalBoxSize(el, measuredAttr, inlineProperty) {
+  const measured = Number.parseFloat(el?.getAttribute(measuredAttr) ?? "");
+  if (Number.isFinite(measured) && measured > 0) return measured;
+  const inline = Number.parseFloat(
+    el?.getAttribute(`data-hf-studio-original-${inlineProperty}`) ?? ""
+  );
+  return Number.isFinite(inline) && inline > 0 ? inline : null;
+}
+function tweenUsesScaleLonghands(anim) {
+  const isLonghand = (name) => name === "scaleX" || name === "scaleY";
+  const inKeyframes = (anim?.keyframes?.keyframes ?? []).some(
+    (frame) => Object.keys(frame.properties ?? {}).some(isLonghand)
+  );
+  return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
+}
 async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations) {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const allKnownAnimations = [...animations, ...fetchedAnimations];
@@ -59593,13 +59632,13 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   let resizeProps;
   let scaleDraftEl = null;
   let scaleDraftDropPoint = null;
+  let committedScale = null;
   let nonUniformScale = false;
+  let useScaleLonghands = false;
   if (resizeGroup === "scale") {
     const el = iframe?.contentDocument?.querySelector(selector ?? "");
-    const origW = Number.parseFloat(el?.getAttribute("data-hf-studio-original-width") ?? "");
-    const origH = Number.parseFloat(el?.getAttribute("data-hf-studio-original-height") ?? "");
-    const cssW = Number.isFinite(origW) && origW > 0 ? origW : 200;
-    const cssH = Number.isFinite(origH) && origH > 0 ? origH : cssW;
+    const cssW = originalBoxSize(el, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, "width") ?? 200;
+    const cssH = originalBoxSize(el, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, "height") ?? cssW;
     const rawLiveScaleX = readGsapProperty(iframe, selector ?? null, "scaleX") ?? 1;
     const rawLiveScaleY = readGsapProperty(iframe, selector ?? null, "scaleY") ?? 1;
     const liveScaleX = rawLiveScaleX > 0 ? rawLiveScaleX : 1;
@@ -59607,7 +59646,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     const newScaleX = roundTo3(size.width * liveScaleX / cssW);
     const newScaleY = roundTo3(size.height * liveScaleY / cssH);
     nonUniformScale = Math.abs(newScaleX - newScaleY) > 0.01;
-    resizeProps = nonUniformScale ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
+    useScaleLonghands = nonUniformScale || tweenUsesScaleLonghands(anim);
+    resizeProps = useScaleLonghands ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
     logResize("intercept-route", {
       route: "scale-tween",
       cssW,
@@ -59619,6 +59659,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       nonUniformScale
     });
     scaleDraftEl = el;
+    committedScale = useScaleLonghands ? { x: newScaleX, y: newScaleY } : { x: newScaleX, y: newScaleX };
     if (el) {
       const dropRect = el.getBoundingClientRect();
       scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
@@ -59633,46 +59674,57 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     if (!scaleDraftEl) return;
     clearStudioBoxSize(scaleDraftEl);
     if (!scaleDraftDropPoint || !selector) return;
-    const hasLivePositionTween = hasNonHoldTweenForElement(
-      iframe,
-      selector,
-      void 0,
-      POSITION_CHANNELS
-    );
-    if (hasLivePositionTween) {
-      logResize("scale-finalize", { skipped: "live-position-tween" });
-      return;
+    if (committedScale) {
+      setElementGsapScale(scaleDraftEl, committedScale.x, committedScale.y);
     }
+    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+    const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
+      selection.element,
+      { x: 0, y: 0 },
+      gsapPos
+    );
+    const base2 = { x: baseGsapX, y: baseGsapY };
+    setElementGsapPosition(scaleDraftEl, base2.x, base2.y);
     const post = scaleDraftEl.getBoundingClientRect();
     const residual = { x: scaleDraftDropPoint.x - post.x, y: scaleDraftDropPoint.y - post.y };
     if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return;
-    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) return;
-    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+      logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base2 });
+      return;
+    }
     const corrected = {
-      x: Math.round(gsapPos.x + residual.x),
-      y: Math.round(gsapPos.y + residual.y)
+      x: Math.round(base2.x + residual.x),
+      y: Math.round(base2.y + residual.y)
     };
     logResize("scale-finalize", {
       dropPoint: scaleDraftDropPoint,
       post: { x: post.x, y: post.y },
       residual,
       gsapPos,
+      base: base2,
       corrected
     });
     setElementGsapPosition(scaleDraftEl, corrected.x, corrected.y);
     const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved?.animations ?? animations;
-    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
-    await commitStaticGsapPosition(
-      selection,
-      { x: corrected.x - gsapPos.x, y: corrected.y - gsapPos.y },
-      gsapPos,
-      selector,
-      existingSet,
-      {
+    const delta = { x: corrected.x - base2.x, y: corrected.y - base2.y };
+    const positionTween = pickClosestToPlayhead(
+      currentAnimations.filter(
+        (a) => a.propertyGroup === "position" && !isInstantHold(a) && resolveTweenDuration(a) > 0
+      )
+    );
+    if (positionTween) {
+      logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
+      await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, selector, {
         commitMutation,
         fetchAnimations: fetchFallbackAnimations
-      }
-    );
+      });
+      return;
+    }
+    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
+    await commitStaticGsapPosition(selection, delta, base2, selector, existingSet, {
+      commitMutation,
+      fetchAnimations: fetchFallbackAnimations
+    });
   };
   if (!usePlayerStore.getState().autoKeyframeEnabled) {
     if (activeKeyframePct != null) setActiveKeyframePct(null);
@@ -59712,7 +59764,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       }
     }
   }
-  if ((outsideRange || nonUniformScale) && ts !== null) {
+  if ((outsideRange || useScaleLonghands) && ts !== null) {
     const kfs = anim.keyframes?.keyframes ?? (() => {
       const fromProps = anim.method === "from" || anim.method === "fromTo" ? { ...anim.properties } : synthesizeIdentityProps(anim.properties);
       const toProps = anim.method === "from" ? synthesizeIdentityProps(anim.properties) : { ...anim.properties };