@hyperframes/studio 0.8.123 → 0.8.124

package/dist/assets/{index-D77MIjSJ.js → index-jQEqFKMk.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-Dt7lWtY7.js";/*!
+import{n as Qi}from"./index-BuSTrK-Z.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

@@ -14,8 +14,8 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-Dt7lWtY7.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-LrNlT5Tg.css">
+    <script type="module" crossorigin src="/assets/index-BuSTrK-Z.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D11atkBt.css">
   </head>
   <body>
     <div data-hf-id="hf-aph5" id="root"></div>

package/dist/index.js

@@ -4187,7 +4187,7 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     drag.element.key ?? drag.element.id,
     !isMusicTrack(drag.element)
   );
-  const snap = snapMoveToTargets(
+  const snapped = snapMoveToTargets(
     nextMove.start,
     drag.element.duration,
     targets,
@@ -4197,6 +4197,9 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     dragMaxStart + drag.element.duration,
     ctx3.gridStep
   );
+  const target = snapTarget(snapped);
+  const missed = target !== null && !guideIfSaved(drag.element, { start: snapped.start }, target, pps);
+  const snap = missed ? { start: nextMove.start, snapTime: null, snapType: null } : snapped;
   const group = resolveGroupDrag(drag, ctx3);
   const dragKey = drag.element.key ?? drag.element.id;
   const passengers = ctx3.elements.filter(
@@ -4213,8 +4216,7 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     return { ...drag, started: true };
   }
   const { track: previewTrack, insertRow } = placement;
-  const target = placement.start === snap.start && snap.snapTime !== null && snap.snapType !== null ? { time: snap.snapTime, type: snap.snapType } : null;
-  const guide = guideIfSaved(drag.element, { start: snap.start }, target, pps);
+  const guide = placement.start === snap.start ? snapTarget(snap) : null;
   return {
     ...drag,
     started: true,
@@ -4230,6 +4232,7 @@ function computeDragPreview(drag, clientX, clientY, ctx3) {
     snapType: guide?.type ?? null
   };
 }
+var snapTarget = (s) => s.snapTime !== null && s.snapType !== null ? { time: s.snapTime, type: s.snapType } : null;
 function guideIfSaved(element, clip, target, pps) {
   if (!target) return null;
   const saved2 = savedClipEdges(element, clip.start, clip.duration);
@@ -4273,30 +4276,30 @@ function computeResizePreview(resize2, clientX, ctx3) {
   );
   const gridStep = ctx3.gridStep ?? 0;
   let snap = null;
-  if (trimTargets.length > 0 || gridStep > 0) {
-    const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
-    if (resize2.edge === "end") {
-      const edgeTime2 = nextResize.start + nextResize.duration;
-      const { time: snapped, target } = snapTimelineTime(edgeTime2, trimTargets, snapSecs, gridStep);
-      const snappedDuration = Math.round((snapped - nextResize.start) * 1e3) / 1e3;
-      if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= resolveTimelineMinDuration() - 1e-6) {
-        if (snapped !== edgeTime2) nextResize = { ...nextResize, duration: snappedDuration };
-        snap = guideIfSaved(resize2.element, nextResize, target, pps);
-      }
-    } else {
-      const { time: snapped, target } = snapTimelineTime(
-        nextResize.start,
-        trimTargets,
-        snapSecs,
-        gridStep
-      );
-      const clip = { ...nextResize, playbackRate: resize2.element.playbackRate };
-      const delta = snapped - nextResize.start;
-      const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
-      if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
-        if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
-        snap = guideIfSaved(resize2.element, nextResize, target, pps);
-      }
+  const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
+  if (resize2.edge === "end") {
+    const edgeTime2 = nextResize.start + nextResize.duration;
+    const { time: snapped, target } = snapTimelineTime(edgeTime2, trimTargets, snapSecs, gridStep);
+    const snappedDuration = Math.round((snapped - nextResize.start) * 1e3) / 1e3;
+    if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= resolveTimelineMinDuration() - 1e-6) {
+      const onTarget = snapped === edgeTime2 ? nextResize : { ...nextResize, duration: snappedDuration };
+      snap = guideIfSaved(resize2.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
+    }
+  } else {
+    const { time: snapped, target } = snapTimelineTime(
+      nextResize.start,
+      trimTargets,
+      snapSecs,
+      gridStep
+    );
+    const clip = { ...nextResize, playbackRate: resize2.element.playbackRate };
+    const delta = snapped - nextResize.start;
+    const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
+    if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
+      const onTarget = snapped === nextResize.start ? nextResize : applyClipStartTrimDelta(clip, delta);
+      snap = guideIfSaved(resize2.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
     }
   }
   return {
@@ -15955,6 +15958,7 @@ import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var BAR_STEP = 3;
 var rendersWaveform = (el) => el.tag === "audio";
 var FADE_GHOST_OPACITY = 0.27;
+var WAVEFORM_LAYER_Z = 10;
 function paintWaveformBars(context, bars, height, waveformBarRgb, waveformBaselineRgb, amplitudes) {
   bars.forEach((bar, index) => {
     const opacity = loudnessToOpacity(amplitudes[index] ?? 0);
@@ -16113,7 +16117,7 @@ var AudioWaveform = memo10(function AudioWaveform2({
     else clip.removeAttribute("data-audio-muted");
     return () => clip.removeAttribute("data-audio-muted");
   }, [muted]);
-  return /* @__PURE__ */ jsx30("div", { ref: rootRef, className: "absolute inset-0", children: /* @__PURE__ */ jsxs17("div", { className: "absolute inset-0 overflow-hidden", style: { zIndex: 10 }, children: [
+  return /* @__PURE__ */ jsx30("div", { ref: rootRef, className: "absolute inset-0", children: /* @__PURE__ */ jsxs17("div", { className: "absolute inset-0 overflow-hidden", style: { zIndex: WAVEFORM_LAYER_Z }, children: [
     /* @__PURE__ */ jsx30(
       "canvas",
       {
@@ -18468,7 +18472,7 @@ var OutOfSyncBadge = memo12(function OutOfSyncBadge2({ el }) {
         "aria-label": `Out of sync with ${partnerName} by ${label} frames`,
         title: `Out of sync with ${partnerName} by ${label} \u2014 click for Move or Slip into Sync`,
         "data-testid": "out-of-sync-badge",
-        className: "absolute bottom-0.5 left-1 z-[7] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums",
+        className: "absolute bottom-0.5 left-1 z-[12] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums",
         onPointerDown: stop,
         onDoubleClick: stop,
         onClick: open,
@@ -24016,6 +24020,7 @@ var TimelineCanvas = memo16(function TimelineCanvas2() {
         draggedClip?.started && draggedClip.insertRow == null && draggedRowIndex >= 0 && /* @__PURE__ */ jsx59(
           "div",
           {
+            "data-testid": "timeline-drag-landing",
             className: "absolute pointer-events-none",
             style: {
               top: props.rowGeometry.getRowTop(draggedRowIndex) + CLIP_Y,
@@ -50698,7 +50703,8 @@ function TextClipContent({ text }) {
 
 // src/player/components/AudibleVideoClipContent.tsx
 import { jsx as jsx115, jsxs as jsxs84 } from "react/jsx-runtime";
-var AUDIBLE_VIDEO_WAVE_SHARE = 0.38;
+var AUDIBLE_VIDEO_WAVE_SHARE = 0.5;
+var AUDIO_CLIP_SURFACE = "var(--timeline-clip-audio-bg)";
 function AudibleVideoClipContent({
   thumbnail,
   waveform
@@ -50709,9 +50715,9 @@ function AudibleVideoClipContent({
     /* @__PURE__ */ jsx115(
       "div",
       {
-        className: "absolute inset-x-0 bottom-0 bg-black/30",
+        className: "audible-video-wave absolute inset-x-0 bottom-0",
         "data-testid": "audible-video-wave",
-        style: { height: waveHeight },
+        style: { height: waveHeight, backgroundColor: AUDIO_CLIP_SURFACE },
         children: waveform
       }
     )
@@ -50760,10 +50766,20 @@ function ClipPeakMarks({
             },
             run.from
           )),
-          /* @__PURE__ */ jsxs85("span", { className: "absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400", children: [
-            "\u25B2 peaks ",
-            dbText2(peakDbfs)
-          ] })
+          /* @__PURE__ */ jsxs85(
+            "span",
+            {
+              className: "absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400",
+              "data-peak-badge": true,
+              children: [
+                "\u25B2",
+                /* @__PURE__ */ jsxs85("span", { "data-peak-text": true, children: [
+                  " peaks ",
+                  dbText2(peakDbfs)
+                ] })
+              ]
+            }
+          )
         ]
       }
     )
@@ -87441,7 +87457,6 @@ function FrameyGlyph({
 // src/components/OpenInDesktopButton.tsx
 import { jsx as jsx203, jsxs as jsxs161 } from "react/jsx-runtime";
 var ROUTE = "/api/open-in-desktop";
-var DOWNLOAD_URL = "https://hyperframes.dev/studio/download";
 var GAZE = 2.2;
 var OPENING_MS = 1600;
 function useDesktopRoute() {
@@ -87449,7 +87464,10 @@ function useDesktopRoute() {
   useEffect133(() => {
     let live = true;
     studioApiFetch(ROUTE).then((res) => res.ok ? res.json() : null).then((body) => {
-      if (live && body?.available === true) setRoute({ handoff: body.handoff === true });
+      if (!live || body?.available !== true) return;
+      const handoff = body.handoff === true;
+      const downloadUrl = typeof body.downloadUrl === "string" ? body.downloadUrl : null;
+      if (handoff || downloadUrl) setRoute({ handoff, downloadUrl });
     }).catch(() => {
     });
     return () => {
@@ -87491,7 +87509,7 @@ function OpenInDesktopButton() {
   const open = async () => {
     if (!route.handoff) {
       trackStudioEvent("toolbar_action", { action: "open_in_desktop" });
-      setDownloadUrl(DOWNLOAD_URL);
+      setDownloadUrl(route.downloadUrl);
       return;
     }
     if (opening) return;
@@ -87501,7 +87519,7 @@ function OpenInDesktopButton() {
       const res = await studioApiFetch(ROUTE, { method: "POST" });
       const result = await res.json();
       if (result.opened) {
-        showToast("Framey is opening this project in HyperFrames Studio", "info");
+        showToast("Framey is opening this project in the HyperFrames desktop app", "info");
         await new Promise((done) => setTimeout(done, OPENING_MS));
       } else setDownloadUrl(result.downloadUrl);
     } catch {
@@ -87523,17 +87541,20 @@ function OpenInDesktopButton() {
       arrow: true,
       "aria-label": "Meet Framey",
       className: "w-72",
-      trigger: /* @__PURE__ */ jsx203(
+      trigger: /* @__PURE__ */ jsxs161(
         Button,
         {
           ref: trigger,
           variant: "ghost",
           "data-testid": "header-open-in-desktop",
           "data-opening": opening || void 0,
-          title: "Open this project in HyperFrames Studio, the desktop app, and edit it with Framey",
-          className: "hf-framey-trigger gap-1.5 pl-1.5",
-          icon: /* @__PURE__ */ jsx203(FrameyGlyph, { size: 20, className: "hf-framey", eyeRef: eye }),
-          children: opening ? "Opening in the app\u2026" : "Edit with Framey"
+          title: "Open this project in the HyperFrames desktop app and edit it with Framey",
+          className: "hf-framey-trigger gap-1.5 border border-accent/40 bg-accent/10 pl-1 font-semibold text-text-0 enabled:hover:bg-accent/20",
+          icon: /* @__PURE__ */ jsx203(FrameyGlyph, { size: 24, className: "hf-framey", eyeRef: eye }),
+          children: [
+            opening ? "Opening in the app\u2026" : "Edit with Framey",
+            !opening && /* @__PURE__ */ jsx203("span", { className: "rounded-full bg-accent px-1.5 text-[10px] leading-4 font-bold text-on-accent", children: "New" })
+          ]
         }
       ),
       children: [
@@ -87541,7 +87562,7 @@ function OpenInDesktopButton() {
           /* @__PURE__ */ jsx203(FrameyGlyph, { size: 36 }),
           /* @__PURE__ */ jsx203("p", { className: "text-step-12 font-medium text-text-0", children: "Meet Framey" })
         ] }),
-        /* @__PURE__ */ jsx203("p", { className: "mt-2 text-text-3", children: "I live in HyperFrames Studio, the free desktop app for macOS:" }),
+        /* @__PURE__ */ jsx203("p", { className: "mt-2 text-balance text-text-3", children: "I live in the free HyperFrames desktop app:" }),
         /* @__PURE__ */ jsxs161("ul", { className: "mt-1.5 grid gap-1 text-text-1", children: [
           /* @__PURE__ */ jsx203("li", { children: "Chat to change anything in the video" }),
           /* @__PURE__ */ jsx203("li", { children: "Draw on a frame to point at it" }),
@@ -87557,7 +87578,7 @@ function OpenInDesktopButton() {
               rel: "noopener noreferrer",
               className: cn(buttonBase, buttonVariants.primary, buttonSizes.md),
               onClick: () => trackStudioEvent("toolbar_action", { action: "get_desktop_app" }),
-              children: "Get HyperFrames Studio"
+              children: "Get the desktop app"
             }
           )
         ] })
@@ -92969,7 +92990,7 @@ var RenderQueueItem = memo54(function RenderQueueItem2({
 // src/components/renders/FfmpegRequiredNotice.tsx
 import { memo as memo55, useEffect as useEffect148, useRef as useRef181, useState as useState148 } from "react";
 import { jsx as jsx228, jsxs as jsxs183 } from "react/jsx-runtime";
-var DOWNLOAD_URL2 = "https://ffmpeg.org/download.html";
+var DOWNLOAD_URL = "https://ffmpeg.org/download.html";
 var CUE_MS = 1600;
 var FOCUS_RING = "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent";
 var FfmpegRequiredNotice = memo55(function FfmpegRequiredNotice2({
@@ -93033,7 +93054,7 @@ var FfmpegRequiredNotice = memo55(function FfmpegRequiredNotice2({
           /* @__PURE__ */ jsx228(
             "a",
             {
-              href: DOWNLOAD_URL2,
+              href: DOWNLOAD_URL,
               target: "_blank",
               rel: "noreferrer",
               className: `rounded-xs py-0.5 text-[10px] text-panel-text-2 underline-offset-2 transition-colors hover:text-panel-text-0 hover:underline ${FOCUS_RING}`,