@hyperframes/studio 0.8.7 → 0.8.9

package/dist/assets/{index-MSOSP1-J.js → index-BIdEpMGS.js}

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

package/dist/assets/{index-FkAs3zRu.js → index-D1Sa69m2.js}

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

@@ -655,7 +655,16 @@ interface TimelineEditCallbacks {
     }>, options?: {
         coalesceKey?: string;
     }) => Promise<void> | void;
-    onToggleTrackHidden?: (track: number, hidden: boolean) => Promise<void> | void;
+    /**
+     * `displayNumber` is the row the CLICKED control announced. It travels with
+     * the click because the header and the undo-history label derive the row from
+     * two different orderings: the header's comes from the group-aware row list
+     * (synthetic anchor rows, members pulled contiguous), the history's from a
+     * plain ascending sort of element-bearing keys. Once a group exists those
+     * disagree, so the same click said "Mute track 2" and recorded "Mute track 1".
+     * Passing the rendered number keeps one answer instead of two derivations.
+     */
+    onToggleTrackHidden?: (track: number, hidden: boolean, displayNumber?: number | null) => Promise<void> | void;
     /** B7's bus strip: live-write the group's own attribute while dragging. */
     onSetAudioGroupAttributeLive?: (groupId: string, attr: string, value: string | null) => void;
     /** ...and persist one undo entry on release. */

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-CUXnyoIa.js"></script>
+    <script type="module" crossorigin src="/assets/index-57oMsXQN.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Ba9zbpT9.css">
   </head>
   <body>

package/dist/index.js

@@ -1704,9 +1704,6 @@ function resolveCanary(name) {
   decisions.set(name, decision);
   return decision;
 }
-function isCanaryEnabled(name) {
-  return resolveCanary(name).enabled;
-}
 function canaryEventProperties() {
   return canaryFeatureProperties(
     CANARIES.map((c) => {
@@ -11658,7 +11655,7 @@ var AutomationSelectionMenu = memo11(function AutomationSelectionMenu2({
       "div",
       {
         ref: menuRef,
-        className: "hf-automation-menu fixed z-50 min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg",
+        className: "hf-automation-menu fixed z-[200] min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg",
         style: { left: adjustedX, top: adjustedY },
         children: [
           AUTOMATION_SHAPES.map((shape) => /* @__PURE__ */ jsx28(
@@ -13178,7 +13175,7 @@ function trackDisplaySuffix(displayNumber) {
 // src/player/components/TimelineTrackPlainHeader.tsx
 import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function visibilityButtonLabel(showAsMute, hidden, suffix) {
-  if (showAsMute) return hidden ? "Muted" : "Mute";
+  if (showAsMute) return hidden ? `Unmute track${suffix}` : `Mute track${suffix}`;
   return hidden ? `Show track${suffix}` : `Hide track${suffix}`;
 }
 function visibilityButtonIcon(showAsMute, hidden) {
@@ -13195,7 +13192,7 @@ function VisibilityButton({
 }) {
   if (!visible) return /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: "h-6 w-6 shrink-0" });
   const suffix = trackDisplaySuffix(trackDisplayNumber2);
-  const showAsMute = Boolean(isAudioTrack) && isCanaryEnabled("audio-track-mute");
+  const showAsMute = Boolean(isAudioTrack);
   const label = visibilityButtonLabel(showAsMute, hidden, suffix);
   return /* @__PURE__ */ jsx35(
     "button",
@@ -13207,7 +13204,7 @@ function VisibilityButton({
       onPointerDown: (event) => event.stopPropagation(),
       onClick: (event) => {
         event.stopPropagation();
-        void onToggle?.(trackNumber, !hidden);
+        void onToggle?.(trackNumber, !hidden, trackDisplayNumber2);
       },
       children: visibilityButtonIcon(showAsMute, hidden)
     }
@@ -13231,7 +13228,7 @@ function PlainTrackHeader({
     showTrackLabel && /* @__PURE__ */ jsx35(
       "span",
       {
-        className: `min-w-0 flex-1 truncate text-[11px] ${isAudioTrack && (isTrackHidden || isGroupMuted) && isCanaryEnabled("audio-track-mute") ? "line-through" : ""}`,
+        className: `min-w-0 flex-1 truncate text-[11px] ${isAudioTrack && (isTrackHidden || isGroupMuted) ? "line-through" : ""}`,
         title: isGroupMuted && !isTrackHidden ? `${trackLabel} (group muted)` : trackLabel,
         children: trackLabel
       }
@@ -13248,7 +13245,7 @@ function PlainTrackHeader({
         onToggle: onToggleTrackHidden
       }
     ),
-    isAudioTrack && isCanaryEnabled("audio-track-mute") && onToggleSolo && /* @__PURE__ */ jsx35(TimelineSoloButton, { isSoloed, onToggle: onToggleSolo })
+    isAudioTrack && onToggleSolo && /* @__PURE__ */ jsx35(TimelineSoloButton, { isSoloed, onToggle: onToggleSolo })
   ] });
 }
 
@@ -13546,18 +13543,30 @@ function useFxAudition(chain, onChainPreview, onAuditionTransport) {
 import { jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
 var POPOVER_WIDTH = 260;
 var VIEWPORT_MARGIN2 = 8;
+var MIN_POPOVER_HEIGHT = 160;
 function clampedStyle(anchorRect) {
   const left = Math.min(
     Math.max(anchorRect.left, VIEWPORT_MARGIN2),
     Math.max(VIEWPORT_MARGIN2, window.innerWidth - POPOVER_WIDTH - VIEWPORT_MARGIN2)
   );
   const spaceBelow = window.innerHeight - anchorRect.bottom;
-  const openUpward = spaceBelow < 260 && anchorRect.top > spaceBelow;
+  const spaceAbove = anchorRect.top;
+  const openUpward = spaceBelow < 260 && spaceAbove > spaceBelow;
+  const available = (openUpward ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN2 - 4;
+  const height = Math.min(
+    Math.max(MIN_POPOVER_HEIGHT, available),
+    window.innerHeight - VIEWPORT_MARGIN2 * 2
+  );
+  const inset = (desired) => Math.max(
+    VIEWPORT_MARGIN2,
+    Math.min(desired, Math.max(VIEWPORT_MARGIN2, window.innerHeight - height - VIEWPORT_MARGIN2))
+  );
   return {
     position: "fixed",
     left,
     width: POPOVER_WIDTH,
-    ...openUpward ? { bottom: window.innerHeight - anchorRect.top + 4 } : { top: anchorRect.bottom + 4 }
+    maxHeight: height,
+    ...openUpward ? { bottom: inset(window.innerHeight - anchorRect.top + 4) } : { top: inset(anchorRect.bottom + 4) }
   };
 }
 function TimelineFxPopover({
@@ -13598,20 +13607,20 @@ function TimelineFxPopover({
       ref: rootRef,
       role: "dialog",
       "aria-label": "Effects",
-      className: "z-50 rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl",
+      className: "z-[200] flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl",
       style: clampedStyle(anchorRect),
       onKeyDown,
       onPointerDown: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx37("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx37(
           FxPresetMenu,
           {
             trackKind,
             onPick: applyPreset,
             onAudition: onChainPreview ? (id) => audition(id ? (base2) => applyPresetToChain(base2, id, trackKind) ?? base2 : null) : void 0
           }
-        ),
-        /* @__PURE__ */ jsxs25("div", { className: "mt-2 flex items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55", children: [
+        ) }),
+        /* @__PURE__ */ jsxs25("div", { className: "mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55", children: [
           /* @__PURE__ */ jsx37(
             "button",
             {
@@ -13685,7 +13694,7 @@ function TimelineFxButton(props) {
           {
             role: "dialog",
             "aria-label": "Group these clips to add effects",
-            className: "z-50 w-56 rounded-md border border-white/10 bg-[#1b1b1f] p-2.5 text-[11px] text-white/75 shadow-xl",
+            className: "z-[200] w-56 rounded-md border border-white/10 bg-[#1b1b1f] p-2.5 text-[11px] text-white/75 shadow-xl",
             style: { position: "fixed", left: anchorRect.left, top: anchorRect.bottom + 4 },
             onPointerDown: (event) => event.stopPropagation(),
             children: [
@@ -14454,13 +14463,13 @@ function TimelineGroupHeader({
             "aria-expanded": isExpanded,
             "aria-label": `${isExpanded ? "Hide" : "Show"} ${label} tracks`,
             title: `${isExpanded ? "Hide" : "Show"} tracks`,
-            className: `flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${isExpanded ? "text-white" : "text-white/55 hover:text-white"}`,
+            className: `flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${isExpanded ? "text-white" : "text-white/55 hover:text-white"}`,
             onPointerDown: (event) => event.stopPropagation(),
             onClick: (event) => {
               event.stopPropagation();
               onToggleExpanded();
             },
-            children: /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", style: { transform: isExpanded ? "rotate(90deg)" : void 0 }, children: "\u25B8" })
+            children: /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", children: isExpanded ? "\u25BE" : "\u25B8" })
           }
         ),
         /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: "shrink-0 text-[12px] leading-none text-white/50", children: "\u25A4" }),
@@ -14915,16 +14924,10 @@ function useTimelineTrackDerivations(expandedElements) {
     }
     return Array.from(map.entries()).sort(([a], [b]) => a - b);
   }, [expandedElements]);
-  const { tracks, groups, trackGroupOf } = useMemo12(() => {
-    if (!isCanaryEnabled("audio-groups")) {
-      return {
-        tracks: rawTracks,
-        groups: [],
-        trackGroupOf: /* @__PURE__ */ new Map()
-      };
-    }
-    return groupTimelineTracks(rawTracks);
-  }, [rawTracks]);
+  const { tracks, groups, trackGroupOf } = useMemo12(
+    () => groupTimelineTracks(rawTracks),
+    [rawTracks]
+  );
   const trackStyles = useMemo12(() => {
     const map = /* @__PURE__ */ new Map();
     for (const [trackNum, els] of tracks) {
@@ -19998,7 +20001,7 @@ function KeyframeDiamondContextMenu({
         ref: menuRef,
         role: "menu",
         "aria-label": "Keyframe actions",
-        className: "fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px] overflow-y-auto",
+        className: "fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px] overflow-y-auto",
         style: { left: adjustedX, top: adjustedY, maxHeight: `calc(100vh - ${adjustedY + 8}px)` },
         children: [
           onMoveToPlayhead && /* @__PURE__ */ jsx50(
@@ -20107,7 +20110,7 @@ var ClipContextMenu = memo14(function ClipContextMenu2({
         ref: menuRef,
         role: "menu",
         "aria-label": "Clip actions",
-        className: "fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
+        className: "fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
         style: { left: adjustedX, top: adjustedY },
         children: [
           splitLabel && /* @__PURE__ */ jsxs38(Fragment16, { children: [
@@ -20185,7 +20188,7 @@ var TrackGapContextMenu = memo15(function TrackGapContextMenu2({
       "div",
       {
         ref: menuRef,
-        className: "fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
+        className: "fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
         style: { left: adjustedX, top: adjustedY },
         onPointerLeave: () => onHoverAction(null),
         children: [
@@ -32662,7 +32665,7 @@ var CanvasContextMenu = memo23(function CanvasContextMenu2({
       "div",
       {
         ref: menuRef,
-        className: "fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
+        className: "fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]",
         style: { left: adjustedX, top: adjustedY },
         onPointerDown: stopBubble,
         onMouseDown: stopBubble,
@@ -57387,7 +57390,7 @@ function PropertyPanelFlat({
       });
     }
   }
-  if (sections.audioFx && isCanaryEnabled("audio-fx-rack")) {
+  if (sections.audioFx) {
     groups.push({
       id: "audio-fx",
       title: "Audio FX",
@@ -63437,6 +63440,7 @@ async function toggleTimelineTrackHidden({
   timelineElements,
   track: track2,
   hidden,
+  displayNumber,
   previewIframe,
   writeProjectFile,
   recordEdit,
@@ -63444,7 +63448,7 @@ async function toggleTimelineTrackHidden({
   pendingTimelineEditPathRef
 }) {
   const suffix = trackDisplaySuffix(
-    trackDisplayNumber(timelineTrackOrder(timelineElements), track2)
+    displayNumber ?? trackDisplayNumber(timelineTrackOrder(timelineElements), track2)
   );
   const trackElements = timelineElements.filter((element) => element.track === track2);
   const isAudioOnlyTrack = trackElements.length > 0 && trackElements.every(isAudioTimelineElement);
@@ -63574,7 +63578,7 @@ function useTimelineTrackVisibilityEditing({
 }) {
   const expandedElements = useExpandedTimelineElements();
   return useCallback94(
-    async (track2, hidden) => {
+    async (track2, hidden, displayNumber) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
@@ -63588,6 +63592,7 @@ function useTimelineTrackVisibilityEditing({
           timelineElements: expandedElements,
           track: track2,
           hidden,
+          displayNumber,
           previewIframe: previewIframeRef.current,
           writeProjectFile,
           recordEdit,