hyperframes 0.8.94 → 0.8.95

package/dist/studio/assets/{index-BUn5H_np.js → index-DE1dn3QB.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-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};

package/dist/studio/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;

package/dist/studio/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-Cc4by8r7.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Dx79V1Se.css">
   </head>
   <body>

package/dist/studio/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;
@@ -31613,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"]`
 );
@@ -68676,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 ?? "");
@@ -68733,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();