@hyperframes/studio 0.8.138 → 0.8.140

package/dist/player.js

@@ -1,8 +1,8 @@
 import {
   Player
-} from "./chunk-4S3AYCOG.js";
+} from "./chunk-H2DUOXTF.js";
 import "./chunk-LOVBLSMR.js";
-import "./chunk-TDWGXBUT.js";
+import "./chunk-TFLU2MGI.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Player

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.138",
+  "version": "0.8.140",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.138",
-    "@hyperframes/core": "0.8.138",
-    "@hyperframes/player": "0.8.138",
-    "@hyperframes/sdk": "0.8.138",
-    "@hyperframes/shader-transitions": "0.8.138",
-    "@hyperframes/studio-server": "0.8.138"
+    "@hyperframes/core": "0.8.140",
+    "@hyperframes/parsers": "0.8.140",
+    "@hyperframes/sdk": "0.8.140",
+    "@hyperframes/player": "0.8.140",
+    "@hyperframes/studio-server": "0.8.140",
+    "@hyperframes/shader-transitions": "0.8.140"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -82,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.138"
+    "@hyperframes/producer": "0.8.140"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -1,6 +1,6 @@
 import { useOwnPreviewIframe, usePreviewIframeStore } from "./player/store/previewIframeStore";
 import { buildProjectApiPath } from "./utils/projectRouting";
-import { useState, useCallback, useRef, useMemo } from "react";
+import { useState, useCallback, useRef, useMemo, type SetStateAction } from "react";
 import { useStableHandlers } from "./hooks/useStableHandlers";
 import { useHistoryFlags, useToolbarSession } from "./hooks/useShellSlices";
 import { useDismissingTabSetter, useRightPanelIntent } from "./hooks/useRightPanelIntents";
@@ -62,6 +62,7 @@ import { useStudioSessionStart } from "./hooks/useStudioSessionStart";
 import { useTimelineAddAtPlayhead } from "./hooks/useTimelineAddAtPlayhead";
 import { readStudioUrlStateFromWindow, resolveMasterCompositionPath } from "./utils/studioUrlState";
 import { useActiveComposition } from "./hooks/useActiveComposition";
+import { requestPreviewReload } from "./player/previewReloading";
 const getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 
 export interface StudioAppProps {
@@ -79,7 +80,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
   const previewIframe = useOwnPreviewIframe();
   const [compositionLoading, setCompositionLoading] = useState(true);
-  const [refreshKey, setRefreshKey] = useState(0);
+  const [refreshKey, setRefreshKeyState] = useState(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
   const [blockPreview, setBlockPreview] = useState<BlockPreviewInfo | null>(null);
   const previewIframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -104,7 +105,11 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   const handleDomZIndexReorderCommitRef = useRef<TimelineZIndexReorderCommit | null>(null);
   const pendingTimelineEditPathRef = useRef(new Set<string>());
   const isGestureRecordingRef = useRef(false);
-  const reloadPreview = useCallback(() => setRefreshKey((k) => k + 1), []);
+  const setRefreshKey = useCallback((next: SetStateAction<number>) => {
+    requestPreviewReload();
+    setRefreshKeyState(next);
+  }, []);
+  const reloadPreview = useCallback(() => setRefreshKey((k) => k + 1), [setRefreshKey]);
   const fileManagerResult = useFileManager({
     projectId,
     showToast,
@@ -144,7 +149,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     recordEdit: editHistory.recordEdit,
     previewIframeRef,
     activeCompPathRef,
-    reloadPreview: () => setRefreshKey((k) => k + 1),
+    reloadPreview,
   });
   const previewPersistence = useStableHandlers(previewPersistenceResult, projectId);
   const externalFileChanges = useStudioExternalFileChanges({

package/src/components/TimelineToolbar.test.tsx

@@ -2,7 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
@@ -11,6 +11,7 @@ import { readStudioUiPreferences } from "../utils/studioUiPreferences";
 import { dispatchPlainKey, type HotkeyCallbacks } from "../hooks/appHotkeysDispatch";
 import { AudioMeterStrip } from "./nle/AudioMeterStrip";
 import { TimelineToolbar } from "./TimelineToolbar";
+import { registerTimelineZoomViewport } from "../player/components/timelineZoomInput";
 
 vi.mock("../contexts/StudioContext", () => ({
   useStudioShellContextOptional: () => ({
@@ -239,6 +240,81 @@ describe("TimelineToolbar snap key", () => {
 });
 
 describe("TimelineToolbar Fit", () => {
+  // A zoom lands on the next frame; these tests step frames instead of waiting for them.
+  beforeEach(() => {
+    vi.useFakeTimers({
+      toFake: [
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "setTimeout",
+        "clearTimeout",
+        "performance",
+      ],
+    });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  /** A mounted timeline for the zoom to preview on: 1080px wide, 32px of headers. */
+  function mountTimelineViewport() {
+    const scroll = document.createElement("div");
+    Object.defineProperties(scroll, {
+      clientWidth: { value: 1080 },
+      // At Fit the content is as wide as the view.
+      scrollWidth: { value: 1080 },
+      scrollLeft: { value: 0, writable: true },
+    });
+    usePlayerStore.setState({
+      zoomMode: "fit",
+      manualZoomPercent: 100,
+      timelineFitPps: 10,
+      timelinePps: 10,
+    });
+    return registerTimelineZoomViewport({ scroll, contentOrigin: 32 });
+  }
+
+  it("moves the slider and its readout with a zoom while it is previewed", () => {
+    const unregister = mountTimelineViewport();
+    const { host, root } = renderToolbar();
+    const slider = host.querySelector<HTMLInputElement>('input[aria-label="Timeline zoom"]')!;
+    const before = slider.value;
+    act(() => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(
+        slider,
+        String(Number(before) + 5),
+      );
+      slider.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    act(() => vi.advanceTimersToNextFrame());
+    // Not laid out yet: the store still holds Fit, but the toolbar shows the zoom on screen.
+    expect(usePlayerStore.getState().zoomMode).toBe("fit");
+    expect(slider.value).not.toBe(before);
+    expect(host.querySelector('[aria-label="Timeline zoom level"]')?.textContent).not.toBe("Fit");
+    act(() => root.unmount());
+    act(() => unregister());
+  });
+
+  it("keeps Fit when it is picked while a zoom waits to be laid out", () => {
+    const unregister = mountTimelineViewport();
+    const { host, root } = renderToolbar();
+    act(() =>
+      host
+        .querySelector('button[aria-label="Zoom in"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+
+    act(() =>
+      host
+        .querySelector('button[aria-label="Fit timeline to width"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+    act(() => vi.advanceTimersByTime(1000));
+    expect(usePlayerStore.getState().zoomMode).toBe("fit");
+    act(() => root.unmount());
+    act(() => unregister());
+  });
+
   it("shows Fit as a named icon and says whether fit is on", () => {
     const { host, root } = renderToolbar();
     const fit = () => host.querySelector('button[aria-label="Fit timeline to width"]');
@@ -251,6 +327,7 @@ describe("TimelineToolbar Fit", () => {
         .querySelector('button[aria-label="Zoom in"]')
         ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
     );
+    act(() => vi.advanceTimersToNextFrame());
     expect(fit()?.getAttribute("aria-pressed")).toBe("false");
     act(() => root.unmount());
   });
@@ -263,6 +340,7 @@ describe("TimelineToolbar Fit", () => {
         .querySelector('button[aria-label="Zoom in"]')
         ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
     );
+    act(() => vi.advanceTimersToNextFrame());
     expect(usePlayerStore.getState().userZoomCount).toBe(before + 1);
     act(() => root.unmount());
   });

package/src/components/TimelineToolbar.tsx

@@ -14,12 +14,14 @@ import {
 import { computeElementPercentage, playsNear } from "../hooks/gsapShared";
 import { useKeyframeKeyboard } from "../hooks/useKeyframeKeyboard";
 import {
-  getNextTimelineZoomPercent,
-  getTimelineZoomPercent,
   timelineZoomPercentToSlider,
   timelineSliderToZoomPercent,
 } from "../player/components/timelineZoom";
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
+import {
+  useShownTimelineZoomPercent,
+  zoomTimelineStep,
+} from "../player/components/timelineZoomInput";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
 import { AudioMetersIcon } from "./icons/AudioMetersIcon";
@@ -170,17 +172,13 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   // Subscribe so the add-beat button reacts to playhead movement and analysis load.
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatAnalysisReady = usePlayerStore((s) => s.beatAnalysis !== null);
-  // Subscribe (not getState) so the split button enables/disables the moment
-  // the selection changes, not only on the next playhead tick.
+  // Subscribed, so the split button follows the selection, not only playhead ticks.
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const elements = usePlayerStore((s) => s.elements);
   const timelineFitPps = usePlayerStore((s) => s.timelineFitPps);
-  const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
-  const displayedTimelineZoomPercent = getTimelineZoomPercent(
-    zoomMode,
-    manualZoomPercent,
-    timelineFitPps,
-  );
+  const { zoomMode, setZoomMode, setManualZoomPercent } = useTimelineZoom();
+  const displayedTimelineZoomPercent = useShownTimelineZoomPercent();
+  const showsFit = zoomMode === "fit" && displayedTimelineZoomPercent === 100;
   const {
     state: keyframeState,
     isMotionPath: keyframeIsMotionPath,
@@ -215,8 +213,6 @@ export const TimelineToolbar = memo(function TimelineToolbar({
   }, []);
 
   return (
-    // The "TIMELINE" label is dropped for CapCut-like density — the pane's
-    // position (tracks right below) makes it self-evident.
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
@@ -510,12 +506,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             <button
               type="button"
               aria-label="Zoom out"
-              onClick={() => {
-                setZoomMode("manual");
-                setManualZoomPercent(
-                  getNextTimelineZoomPercent("out", zoomMode, manualZoomPercent, timelineFitPps),
-                );
-              }}
+              onClick={() => zoomTimelineStep("out")}
               className={flatIdle}
             >
               <MagnifyingGlassMinus size={16} aria-hidden="true" />
@@ -528,12 +519,11 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             value={timelineZoomPercentToSlider(displayedTimelineZoomPercent, timelineFitPps)}
             title={`${displayedTimelineZoomPercent}%`}
             aria-label="Timeline zoom"
-            onChange={(e) => {
-              setZoomMode("manual");
+            onChange={(e) =>
               setManualZoomPercent(
                 timelineSliderToZoomPercent(Number(e.target.value), timelineFitPps),
-              );
-            }}
+              )
+            }
             // h-6 on the input is the 24x24 WCAG 2.2 (2.5.8) target: the visible
             // track stays 2px and the thumb 10px, only the pointer box grows.
             className="mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-text-0 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
@@ -542,12 +532,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             <button
               type="button"
               aria-label="Zoom in"
-              onClick={() => {
-                setZoomMode("manual");
-                setManualZoomPercent(
-                  getNextTimelineZoomPercent("in", zoomMode, manualZoomPercent, timelineFitPps),
-                );
-              }}
+              onClick={() => zoomTimelineStep("in")}
               className={flatIdle}
             >
               <MagnifyingGlassPlus size={16} aria-hidden="true" />
@@ -558,7 +543,7 @@ export const TimelineToolbar = memo(function TimelineToolbar({
             className="ml-1 w-[38px] text-right font-mono text-[11px] tabular-nums text-neutral-500 select-none"
             aria-label="Timeline zoom level"
           >
-            {zoomMode === "fit" ? "Fit" : `${displayedTimelineZoomPercent}%`}
+            {showsFit ? "Fit" : `${displayedTimelineZoomPercent}%`}
           </span>
         </div>
       </div>

package/src/components/editor/DomEditOverlay.tsx

@@ -10,6 +10,7 @@ import { useZOrderCrossedFlash, ZOrderCrossedFlash } from "./useZOrderCrossedFla
 import { useCanvasContextMenuState } from "./useCanvasContextMenuState";
 import {
   type BlockedMoveState,
+  type WaitingPressState,
   type DomEditGroupPathOffsetCommit,
   type FocusableDomEditOverlay,
   type MoveCommitOptions,
@@ -60,7 +61,7 @@ export interface DomEditOverlayProps {
   hoverSelection: DomEditSelection | null;
   allowCanvasMovement?: boolean;
   allowBodyDrag?: boolean;
-  /** "host": no hover, marquee, box re-select, or body drag if allowBodyDrag is false; Enter still opens text. */
+  /** "host": no marquee, box re-select, or body drag if allowBodyDrag is false; Enter still opens text. */
   canvasInput?: "overlay" | "host";
   onTextEditingChange?: (editing: boolean) => void;
   /** A click on a single selection's box, in either mode; the event may be the pointerup. */
@@ -166,6 +167,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   const gestureRef = useRef<GestureState | null>(null);
   const groupGestureRef = useRef<GroupGestureState | null>(null);
   const blockedMoveRef = useRef<BlockedMoveState | null>(null);
+  const waitingPressRef = useRef<WaitingPressState | null>(null);
   const suppressNextBoxClickRef = useRef(false);
   const snapGuidesRef = useRef<SnapGuidesState | null>(null);
   const rafPausedRef = useRef(false);
@@ -273,6 +275,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   });
 
   const gestures = createDomEditOverlayGestureHandlers({
+    activeCompositionPathRef,
     overlayRef,
     iframeRef,
     boxRef,
@@ -283,6 +286,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     gestureRef,
     groupGestureRef,
     blockedMoveRef,
+    waitingPressRef,
     rafPausedRef,
     suppressNextBoxClickRef,
     setOverlayRect,
@@ -299,17 +303,17 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   });
 
   useEffect(() => {
-    if (readOnly) gestures.clearPointerState(selectionRef);
+    if (readOnly) gestures.clearPointerState(selectionRef, true);
   }, [gestures, readOnly, selectionRef]);
   // A gesture that loses its pointer, the window or the overlay is cancelled, so its mark goes too.
-  const cancelGestureRef = useRef(() => {});
-  cancelGestureRef.current = () => gestures.clearPointerState(selectionRef);
+  const cancelGestureRef = useRef((_dropQueued?: boolean) => {});
+  cancelGestureRef.current = (dropQueued) => gestures.clearPointerState(selectionRef, dropQueued);
   useMountEffect(() => {
     const cancel = () => cancelGestureRef.current();
     window.addEventListener("blur", cancel);
     return () => {
       window.removeEventListener("blur", cancel);
-      cancel();
+      cancelGestureRef.current(true);
     };
   });
 
@@ -493,10 +497,10 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       onPointerLeave={() => onCanvasPointerLeaveRef.current()}
       onPointerUp={marquee.onPointerUp}
       onPointerCancel={marquee.onPointerCancel}
-      onLostPointerCapture={() => cancelGestureRef.current()}
+      onLostPointerCapture={gestures.onLostPointerCapture}
       onContextMenu={hostInput ? undefined : handleContextMenu}
     >
-      {!hostInput && hoverSelection && hoverRect && compRect.width > 0 && (
+      {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
           aria-hidden="true"
           data-dom-edit-hover-box="true"