@hyperframes/studio 0.8.87 → 0.8.89

package/dist/player.js

@@ -1,6 +1,6 @@
 import {
   Player
-} from "./chunk-7PLTC6SV.js";
+} from "./chunk-KU4F7QZ3.js";
 import "./chunk-QZ6HNNFG.js";
 import "./chunk-S65AQH6M.js";
 import "./chunk-PZ5AY32C.js";

package/package.json

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

package/src/components/TimelineHistoryButtons.dom.test.tsx

@@ -96,14 +96,25 @@ it("leaves enabled buttons without the disabled attribute", () => {
   expect(el.className).not.toContain("cursor-not-allowed");
 });
 
-it("orders the toolbar Undo, Redo, Select, Razor", () => {
+it("orders the toolbar Undo, Redo, then the tool picker showing the active tool", () => {
   const host = mount(<TimelineToolbar />);
   const labels = Array.from(host.querySelectorAll("button"))
     .map((b) => b.getAttribute("aria-label"))
     .filter((l) => l !== null)
-    .slice(0, 4);
+    .slice(0, 3);
 
-  expect(labels).toEqual(["Undo", "Redo", "Selection tool", "Razor tool"]);
+  expect(labels).toEqual(["Undo", "Redo", "Timeline tool: Select"]);
+});
+
+it("shows the Split tool on the picker while the razor is active", async () => {
+  const { usePlayerStore } = await import("../player");
+  usePlayerStore.setState({ activeTool: "razor" });
+  try {
+    const host = mount(<TimelineToolbar />);
+    expect(host.querySelector('button[aria-label="Timeline tool: Split"]')).not.toBeNull();
+  } finally {
+    usePlayerStore.setState({ activeTool: "select" });
+  }
 });
 
 it("classifies Undo and Redo for the hotkey filters at their new location (KTD13)", () => {

package/src/components/TimelineToolPicker.tsx

@@ -0,0 +1,90 @@
+import type { ReactNode } from "react";
+import { ArrowLineLeft, ArrowLineRight, CaretDown } from "@phosphor-icons/react";
+import { usePlayerStore } from "../player";
+import { Scissors } from "../icons/SystemIcons";
+import { Menu, MenuItem } from "./ui";
+import { cn } from "./ui/cn";
+import { flatIdle } from "./timelineToolbarStyles";
+
+function SelectIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
+      <path d="M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" />
+    </svg>
+  );
+}
+
+interface ToolRow {
+  label: string;
+  shortcut: string;
+  icon: ReactNode;
+  active: boolean;
+  run: () => void;
+}
+
+/** One button for the active timeline tool; its menu switches tools or selects clips around the playhead. */
+export function TimelineToolPicker() {
+  const activeTool = usePlayerStore((s) => s.activeTool);
+  const store = () => usePlayerStore.getState();
+  const rows: ToolRow[] = [
+    {
+      label: "Select",
+      shortcut: "V",
+      icon: <SelectIcon />,
+      active: activeTool === "select",
+      run: () => store().setActiveTool("select"),
+    },
+    {
+      label: "Split",
+      shortcut: "B",
+      icon: <Scissors size={16} />,
+      active: activeTool === "razor",
+      run: () => store().setActiveTool("razor"),
+    },
+    {
+      label: "Select leftward",
+      shortcut: "[",
+      icon: <ArrowLineLeft size={16} aria-hidden="true" />,
+      active: false,
+      run: () => store().selectLeftward(),
+    },
+    {
+      label: "Select rightward",
+      shortcut: "]",
+      icon: <ArrowLineRight size={16} aria-hidden="true" />,
+      active: false,
+      run: () => store().selectRightward(),
+    },
+  ];
+  const current = rows.find((row) => row.active) ?? rows[0];
+  return (
+    <Menu
+      aria-label="Timeline tools"
+      trigger={
+        <button
+          type="button"
+          aria-label={`Timeline tool: ${current.label}`}
+          className={cn(flatIdle, "gap-0.5")}
+        >
+          {current.icon}
+          <CaretDown size={10} weight="bold" aria-hidden="true" />
+        </button>
+      }
+    >
+      {rows.map((row) => (
+        <MenuItem
+          key={row.label}
+          shortcut={row.shortcut}
+          onClick={row.run}
+          data-active={row.active || undefined}
+          className={row.active ? "bg-neutral-800 text-white" : undefined}
+        >
+          <span className="flex items-center gap-2">
+            {row.icon}
+            {row.label}
+          </span>
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+}

package/src/components/TimelineToolbar.tsx

@@ -26,7 +26,7 @@ import { AudioMetersIcon } from "./icons/AudioMetersIcon";
 import { RippleEditIcon } from "./icons/RippleEditIcon";
 import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
 import { TimelineHistoryButtons, type TimelineHistoryButtonsProps } from "./TimelineHistoryButtons";
-import { Scissors } from "../icons/SystemIcons";
+import { TimelineToolPicker } from "./TimelineToolPicker";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 import { canSplitElement } from "../utils/timelineElementSplit";
@@ -144,8 +144,6 @@ export function TimelineToolbar({
   showAddBeat = true,
   showKeyframes = true,
 }: TimelineToolbarProps) {
-  const activeTool = usePlayerStore((s) => s.activeTool);
-  const setActiveTool = usePlayerStore((s) => s.setActiveTool);
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
   const rippleEditEnabled = usePlayerStore((s) => s.rippleEditEnabled);
@@ -216,30 +214,7 @@ export function TimelineToolbar({
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
           <TimelineHistoryButtons {...history} />
-          <Tooltip label="Selection tool (V)">
-            <button
-              type="button"
-              onClick={() => setActiveTool("select")}
-              aria-label="Selection tool"
-              aria-pressed={activeTool === "select"}
-              className={activeTool === "select" ? flatActive : flatIdle}
-            >
-              <svg width="16" height="16" viewBox="0 0 12 12" fill="currentColor">
-                <path d="M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" />
-              </svg>
-            </button>
-          </Tooltip>
-          <Tooltip label="Razor tool (B) — Shift+click splits all tracks">
-            <button
-              type="button"
-              onClick={() => setActiveTool("razor")}
-              aria-label="Razor tool"
-              aria-pressed={activeTool === "razor"}
-              className={activeTool === "razor" ? flatActive : flatIdle}
-            >
-              <Scissors size={16} />
-            </button>
-          </Tooltip>
+          <TimelineToolPicker />
           {/* Divider: tool-mode | editing-actions */}
           <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>

package/src/components/editor/DomEditOverlay.tsx

@@ -81,15 +81,18 @@ export interface DomEditOverlayProps {
     selection: DomEditSelection,
     next: { x: number; y: number },
     modifiers?: { altKey?: boolean },
-  ) => Promise<void> | void;
-  onGroupPathOffsetCommit: (updates: DomEditGroupPathOffsetCommit[]) => Promise<void> | void;
+  ) => Promise<unknown> | void;
+  onGroupPathOffsetCommit: (updates: DomEditGroupPathOffsetCommit[]) => Promise<unknown> | void;
   onBoxSizeCommit: (
     selection: DomEditSelection,
     next: { width: number; height: number },
     offset?: { x: number; y: number },
     restore?: () => void,
-  ) => Promise<void> | void;
-  onRotationCommit: (selection: DomEditSelection, next: { angle: number }) => Promise<void> | void;
+  ) => Promise<unknown> | void;
+  onRotationCommit: (
+    selection: DomEditSelection,
+    next: { angle: number },
+  ) => Promise<unknown> | void;
   onStyleCommit?: (property: string, value: string) => Promise<unknown> | void;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;

package/src/components/editor/domEditOverlayGestures.ts

@@ -247,10 +247,10 @@ export type UseDomEditOverlayGesturesOptions = {
       s: DomEditSelection,
       n: { x: number; y: number },
       m?: { altKey?: boolean },
-    ) => Promise<void> | void
+    ) => Promise<unknown> | void
   >;
   onGroupPathOffsetCommitRef: RefObject<
-    (updates: DomEditGroupPathOffsetCommit[]) => Promise<void> | void
+    (updates: DomEditGroupPathOffsetCommit[]) => Promise<unknown> | void
   >;
   onBoxSizeCommitRef: RefObject<
     (
@@ -258,10 +258,10 @@ export type UseDomEditOverlayGesturesOptions = {
       n: { width: number; height: number },
       offset?: { x: number; y: number },
       restore?: () => void,
-    ) => Promise<void> | void
+    ) => Promise<unknown> | void
   >;
   onRotationCommitRef: RefObject<
-    (s: DomEditSelection, n: { angle: number }) => Promise<void> | void
+    (s: DomEditSelection, n: { angle: number }) => Promise<unknown> | void
   >;
   onCanvasPointerMoveRef: RefObject<
     (

package/src/components/editor/useDomEditNudge.ts

@@ -60,10 +60,10 @@ export interface UseDomEditNudgeParams {
       s: DomEditSelection,
       n: { x: number; y: number },
       m?: { altKey?: boolean },
-    ) => Promise<void> | void
+    ) => Promise<unknown> | void
   >;
   onGroupPathOffsetCommitRef: RefObject<
-    (updates: DomEditGroupPathOffsetCommit[]) => Promise<void> | void
+    (updates: DomEditGroupPathOffsetCommit[]) => Promise<unknown> | void
   >;
 }
 

package/src/hooks/appHotkeysDispatch.ts

@@ -207,6 +207,14 @@ export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCa
     return;
   }
 
+  if ((key === "[" || key === "]") && !event.shiftKey && !event.altKey) {
+    event.preventDefault();
+    const store = usePlayerStore.getState();
+    if (key === "[") store.selectLeftward();
+    else store.selectRightward();
+    return;
+  }
+
   // CapCut returns to the select tool with "A". Scoped to the razor being
   // armed; usePlaybackKeyboard.ts's own "A" (seek to in-point) checks the
   // same activeTool to stay out of the way.

package/src/hooks/useAppHotkeys.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { dispatchModifierKey, dispatchPlainKey, type HotkeyCallbacks } from "./appHotkeysDispatch";
-import { usePlayerStore } from "../player/store/playerStore";
+import { liveTime, usePlayerStore } from "../player/store/playerStore";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { clearAutomationClipboard, copyRange } from "../player/components/automationClipboard";
 import { VOLUME_RANGE } from "@hyperframes/core/audio-automation";
@@ -60,6 +60,63 @@ afterEach(() => {
   });
 });
 
+describe("dispatchPlainKey — select leftward / rightward", () => {
+  const clips = [
+    { ...bgmElement, id: "early", key: "early", start: 0, track: 0 },
+    { ...bgmElement, id: "at", key: "at", start: 4, track: 1 },
+    { ...bgmElement, id: "late", key: "late", start: 7, track: 2 },
+  ];
+  beforeEach(() => usePlayerStore.setState({ elements: clips, currentTime: 4 }));
+
+  it("[ selects every clip starting before the playhead, on every track", () => {
+    const event = press("[");
+    dispatchPlainKey(event, "[", callbacks());
+    expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["early"]);
+    expect(usePlayerStore.getState().selectedElementId).toBe("early");
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("uses the live playhead while playing, not the time stored at play start", () => {
+    usePlayerStore.setState({ isPlaying: true, currentTime: 0 });
+    liveTime.notify(8);
+    try {
+      dispatchPlainKey(press("["), "[", callbacks());
+      expect([...usePlayerStore.getState().selectedElementIds].sort()).toEqual([
+        "at",
+        "early",
+        "late",
+      ]);
+    } finally {
+      usePlayerStore.setState({ isPlaying: false });
+      liveTime.notify(0);
+    }
+  });
+
+  it("clears a clicked keyframe like any other selection change", () => {
+    usePlayerStore.setState({ activeKeyframePct: 50 });
+    dispatchPlainKey(press("]"), "]", callbacks());
+    expect(usePlayerStore.getState().activeKeyframePct).toBeNull();
+  });
+
+  it("] selects every clip starting at or after the playhead, on every track", () => {
+    dispatchPlainKey(press("]"), "]", callbacks());
+    const { selectedElementIds, selectedElementId } = usePlayerStore.getState();
+    expect([...selectedElementIds].sort()).toEqual(["at", "late"]);
+    expect(selectedElementId).toBe("at");
+  });
+
+  it("selects nothing when no clip is on that side", () => {
+    usePlayerStore.setState({
+      currentTime: 0,
+      selectedElementId: "late",
+      selectedElementIds: new Set(["late"]),
+    });
+    dispatchPlainKey(press("["), "[", callbacks());
+    expect(usePlayerStore.getState().selectedElementIds.size).toBe(0);
+    expect(usePlayerStore.getState().selectedElementId).toBeNull();
+  });
+});
+
 describe("dispatchPlainKey — Delete arbitration", () => {
   const selectBgm = () =>
     usePlayerStore.setState({ elements: [bgmElement], selectedElementId: "bgm" });

package/src/hooks/useDomGeometryCommit.test.tsx

@@ -0,0 +1,226 @@
+// @vitest-environment happy-dom
+import { act, createElement, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  useDomGeometryCommit,
+  usePlayerStore,
+  type DomEditOverlayProps,
+  type UseDomGeometryCommitOptions,
+} from "../index";
+import { makeSelection } from "./domSelectionTestHarness";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const SOURCE = '<div id="card">Card</div><div id="other">Other</div>';
+
+/** A warm parse where only another element animates, and a GSAP writer answering `status`. */
+function stubServer(status = 200, parseStatus = 200) {
+  const mutations: unknown[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input instanceof Request ? input.url : input);
+      const json = (body: unknown, code = 200) =>
+        new Response(JSON.stringify(body), {
+          status: code,
+          headers: { "content-type": "application/json" },
+        });
+      if (url.includes("/api/projects/p1/gsap-animations/")) {
+        if (parseStatus !== 200) return json({ error: "down" }, parseStatus);
+        return json({
+          animations: [
+            {
+              id: "other-fade",
+              targetSelector: "#other",
+              method: "to",
+              position: 0,
+              duration: 1,
+              properties: { opacity: 1 },
+              propertyGroup: "opacity",
+            },
+          ],
+        });
+      }
+      if (url.includes("/api/projects/p1/gsap-mutations/")) {
+        mutations.push(JSON.parse(String(init?.body)));
+        if (status !== 200) return json({ error: "refused" }, status);
+        return json({ ok: true, changed: true, before: "BEFORE", after: "AFTER" });
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    }),
+  );
+  return mutations;
+}
+
+function renderHost(options: Partial<UseDomGeometryCommitOptions> = {}) {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("Expected iframe document");
+  doc.body.innerHTML = SOURCE;
+  const element = doc.getElementById("card") as HTMLElement;
+  const recordEdit = vi.fn(async () => {});
+  const writeProjectFile = vi.fn(async () => {});
+  const reloadPreview = vi.fn();
+  const api: { current: ReturnType<typeof useDomGeometryCommit> | null } = { current: null };
+  function Host() {
+    const iframeRef = useRef<HTMLIFrameElement | null>(iframe);
+    api.current = useDomGeometryCommit({
+      projectId: "p1",
+      iframeRef,
+      writeProjectFile,
+      recordEdit,
+      reloadPreview,
+      ...options,
+    });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(createElement(Host)));
+  const hook = () => {
+    if (!api.current) throw new Error("Expected the hook to render");
+    return api.current;
+  };
+  return {
+    element,
+    recordEdit,
+    hook,
+    rerender: () => act(() => root.render(createElement(Host))),
+    unmount: () => act(() => root.unmount()),
+  };
+}
+
+beforeEach(() => {
+  usePlayerStore.setState({ previewBooted: true, timelineProjectId: "p1" });
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = "";
+});
+
+describe("useDomGeometryCommit, from the package entry", () => {
+  it("plugs into DomEditOverlay and saves a move as one GSAP write and one undo step", async () => {
+    const mutations = stubServer();
+    const { element, recordEdit, hook, unmount } = renderHost();
+    const overlayCommits: Pick<
+      DomEditOverlayProps,
+      "onPathOffsetCommit" | "onGroupPathOffsetCommit" | "onBoxSizeCommit" | "onRotationCommit"
+    > = {
+      onPathOffsetCommit: hook().commitPathOffset,
+      onGroupPathOffsetCommit: hook().commitGroupPathOffset,
+      onBoxSizeCommit: hook().commitBoxSize,
+      onRotationCommit: hook().commitRotation,
+    };
+
+    const outcome = await overlayCommits.onPathOffsetCommit(makeSelection("card", element), {
+      x: 40,
+      y: 20,
+    });
+
+    expect(outcome).toEqual({ ok: true });
+    expect(mutations).toEqual([
+      expect.objectContaining({ type: "add", targetSelector: "#card", method: "set" }),
+    ]);
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    expect(recordEdit).toHaveBeenCalledWith(
+      expect.objectContaining({ files: { "index.html": { before: "BEFORE", after: "AFTER" } } }),
+    );
+    unmount();
+  });
+
+  it("keeps the same commits across renders, so the overlay's handlers stay put", () => {
+    stubServer();
+    const { hook, rerender, unmount } = renderHost();
+    const first = hook();
+    rerender();
+    expect(hook().commitPathOffset).toBe(first.commitPathOffset);
+    expect(hook().commitRotation).toBe(first.commitRotation);
+    unmount();
+  });
+
+  it("rejects a move the server refuses, so the overlay undoes it", async () => {
+    stubServer(500);
+    const showToast = vi.fn();
+    const { element, recordEdit, hook, unmount } = renderHost({ showToast });
+
+    await expect(
+      hook().commitPathOffset(makeSelection("card", element), { x: 40, y: 20 }),
+    ).rejects.toThrow();
+    expect(recordEdit).not.toHaveBeenCalled();
+    expect(showToast).toHaveBeenCalledWith(expect.any(String), "error");
+    unmount();
+  });
+
+  it("undoes a resize whose animations cannot be read, and saves nothing", async () => {
+    const mutations = stubServer(200, 500);
+    const showToast = vi.fn();
+    const restore = vi.fn();
+    const { element, recordEdit, hook, unmount } = renderHost({ showToast });
+
+    await expect(
+      hook().commitBoxSize(
+        makeSelection("card", element),
+        { width: 300, height: 90 },
+        undefined,
+        restore,
+      ),
+    ).rejects.toThrow();
+    expect(restore).toHaveBeenCalledTimes(1);
+    expect(showToast).toHaveBeenCalledWith(expect.any(String), "error");
+    expect(mutations).toHaveLength(0);
+    expect(recordEdit).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  it.each([
+    ["the player shows another project", { timelineProjectId: "another-project" }],
+    ["the preview has not booted", { previewBooted: false }],
+  ])("refuses at once when %s", async (_state, store) => {
+    const mutations = stubServer();
+    usePlayerStore.setState(store);
+    const restore = vi.fn();
+    const showToast = vi.fn();
+    const { element, hook, unmount } = renderHost({ showToast });
+
+    await expect(
+      hook().commitBoxSize(
+        makeSelection("card", element),
+        { width: 300, height: 90 },
+        undefined,
+        restore,
+      ),
+    ).rejects.toThrow("has not loaded yet");
+    expect(restore).toHaveBeenCalledTimes(1);
+    expect(showToast).toHaveBeenCalledWith(expect.stringContaining("not loaded"), "error");
+    expect(mutations).toHaveLength(0);
+    unmount();
+  });
+
+  it("waits for a move still being saved", async () => {
+    const mutations = stubServer();
+    const { element, recordEdit, hook, unmount } = renderHost();
+
+    const move = hook().commitPathOffset(makeSelection("card", element), { x: 40, y: 20 });
+    await hook().waitForPendingSaves();
+
+    expect(mutations).toHaveLength(1);
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    await move;
+    unmount();
+  });
+
+  it("rejects without a project and writes nothing", async () => {
+    const mutations = stubServer();
+    const { element, hook, unmount } = renderHost({ projectId: null });
+
+    await expect(
+      hook().commitRotation(makeSelection("card", element), { angle: 15 }),
+    ).rejects.toThrow("No project is open");
+    expect(mutations).toHaveLength(0);
+    unmount();
+  });
+});