@hyperframes/studio 0.8.86 → 0.8.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.86",
+  "version": "0.8.88",
   "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.86",
-    "@hyperframes/sdk": "0.8.86",
-    "@hyperframes/player": "0.8.86",
-    "@hyperframes/studio-server": "0.8.86",
-    "@hyperframes/shader-transitions": "0.8.86",
-    "@hyperframes/parsers": "0.8.86"
+    "@hyperframes/parsers": "0.8.88",
+    "@hyperframes/core": "0.8.88",
+    "@hyperframes/player": "0.8.88",
+    "@hyperframes/studio-server": "0.8.88",
+    "@hyperframes/sdk": "0.8.88",
+    "@hyperframes/shader-transitions": "0.8.88"
   },
   "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.86"
+    "@hyperframes/producer": "0.8.88"
   },
   "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

@@ -47,7 +47,7 @@ export {
 } from "./domEditOverlayGestures";
 export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
 
-interface DomEditOverlayProps {
+export interface DomEditOverlayProps {
   iframeRef: RefObject<HTMLIFrameElement | null>;
   activeCompositionPath: string | null;
   selection: DomEditSelection | null;
@@ -518,7 +518,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           boxClipPath={boxClipPath}
           selectionKey={selectionKey}
           groupSelectionCount={groupSelections.length}
-          blockedMoveRef={blockedMoveRef}
           gestures={gestures}
           onStyleCommit={onStyleCommitRef.current}
           onBoxMouseDown={suppressBoxMouseDown}

package/src/components/editor/DomEditOverlayHover.test.tsx

@@ -6,6 +6,7 @@ import { expect, it, vi } from "vitest";
 import type { DomEditSelection } from "./domEditing";
 import "./domEditOverlayTestMocks";
 import { DomEditOverlay } from "./DomEditOverlay";
+import { DomEditOverlay as PackageDomEditOverlay } from "../../index";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -74,3 +75,7 @@ it("rotates the hover box with the element", () => {
 it("leaves the hover box untransformed at angle zero", () => {
   expect(renderHover(0)).toBe("");
 });
+
+it("is exported from the package entry, so a host can mount it with its own commits", () => {
+  expect(PackageDomEditOverlay).toBe(DomEditOverlay);
+});

package/src/components/editor/DomEditSelectionChrome.test.tsx

@@ -53,7 +53,6 @@ describe("DomEditSelectionChrome crop composition", () => {
           boxClipPath={undefined}
           selectionKey="headline"
           groupSelectionCount={0}
-          blockedMoveRef={createRef()}
           gestures={{ startGesture: vi.fn() } as never}
           onStyleCommit={vi.fn()}
           onBoxMouseDown={vi.fn()}
@@ -109,7 +108,6 @@ describe("DomEditSelectionChrome crop composition", () => {
           boxClipPath={undefined}
           selectionKey="clip"
           groupSelectionCount={0}
-          blockedMoveRef={createRef()}
           gestures={{ startGesture: vi.fn() } as never}
           onStyleCommit={vi.fn()}
           onBoxMouseDown={vi.fn()}
@@ -170,7 +168,6 @@ describe("DomEditSelectionChrome while editing text", () => {
           boxClipPath={undefined}
           selectionKey="copy"
           groupSelectionCount={0}
-          blockedMoveRef={createRef()}
           gestures={{ startGesture: vi.fn() } as never}
           onStyleCommit={vi.fn()}
           onBoxMouseDown={vi.fn()}

package/src/components/editor/DomEditSelectionChrome.tsx

@@ -1,7 +1,7 @@
 import type { RefObject } from "react";
 import { type DomEditSelection } from "./domEditing";
 import type { GroupOverlayItem, OverlayRect } from "./domEditOverlayGeometry";
-import type { BlockedMoveState, ResizeHandle } from "./domEditOverlayGestures";
+import type { ResizeHandle } from "./domEditOverlayGestures";
 import type { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
 import { DomEditCropHandles } from "./DomEditCropHandles";
 import { DomEditRotateHandle } from "./DomEditRotateHandle";
@@ -103,7 +103,7 @@ export function DomEditGroupChrome({
           cursor: canManipulate && groupCanMove ? "move" : "default",
         }}
         onPointerDown={(e) => {
-          if (!canManipulate || !groupCanMove || e.shiftKey) return;
+          if (!canManipulate || e.shiftKey) return;
           gestures.startGroupDrag(e);
         }}
         onMouseDown={onBoxMouseDown}
@@ -123,7 +123,6 @@ interface DomEditSelectionChromeProps {
   boxClipPath: string | undefined;
   selectionKey: string;
   groupSelectionCount: number;
-  blockedMoveRef: RefObject<BlockedMoveState | null>;
   gestures: GestureHandlers;
   onStyleCommit?: (property: string, value: string) => Promise<unknown> | void;
   onBoxMouseDown: (e: React.MouseEvent) => void;
@@ -152,7 +151,6 @@ export function DomEditSelectionChrome({
   boxClipPath,
   selectionKey,
   groupSelectionCount,
-  blockedMoveRef,
   gestures,
   onStyleCommit,
   onBoxMouseDown,
@@ -218,15 +216,7 @@ export function DomEditSelectionChrome({
               gestures.startGesture("drag", e);
               return;
             }
-            e.preventDefault();
-            e.stopPropagation();
-            e.currentTarget.setPointerCapture(e.pointerId);
-            blockedMoveRef.current = {
-              pointerId: e.pointerId,
-              startX: e.clientX,
-              startY: e.clientY,
-              notified: false,
-            };
+            gestures.startBlockedMove(e, selection);
           }}
           onMouseDown={onBoxMouseDown}
           onClick={onBoxClick}

package/src/components/editor/LayersPanel.test.ts

@@ -9,6 +9,7 @@ import type { DomEditLayerItem } from "./domEditingTypes";
 import { createRafThrottle, LayersPanel, sortLayersByZIndex } from "./LayersPanel";
 import { isLayerDraggable } from "./useLayerDrag";
 import { liveTime } from "../../player";
+import { sceneSwapFor } from "../../player/sceneSwap";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -292,4 +293,17 @@ describe("LayersPanel preview promotion", () => {
     });
     expect(collectedRootIds()).toEqual(["b"]);
   });
+  it("recollects layers when edited scenes are swapped into the live document", async () => {
+    const a = makeIframe("a");
+    Object.defineProperty(a, "contentWindow", { value: { __hfSwapScenes: async () => {} } });
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("<html></html>"));
+    mocks.previewIframeRef.current = a;
+    usePreviewIframeStore.setState({ iframe: a });
+    act(() => root.render(createElement(LayersPanel)));
+    mocks.collect.mockClear();
+
+    await act(() => sceneSwapFor(a)!("/preview", () => true));
+    expect(collectedRootIds()).toEqual(["a"]);
+    fetchSpy.mockRestore();
+  });
 });

package/src/components/editor/LayersPanel.tsx

@@ -1,4 +1,5 @@
 import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
+import { onPreviewContentReplaced } from "../../player/sceneSwap";
 import { memo, useState, useCallback, useEffect, useRef } from "react";
 import {
   collectDomEditLayerItems,
@@ -164,8 +165,7 @@ export const LayersPanel = memo(function LayersPanel() {
       prevDocVersionRef.current += 1;
       collectLayers();
     };
-    iframe.addEventListener("load", handleLoad);
-    return () => iframe.removeEventListener("load", handleLoad);
+    return onPreviewContentReplaced(iframe, handleLoad);
   }, [previewIframeRef, livePreviewIframe, collectLayers]);
 
   useEffect(() => {

package/src/components/editor/TopologyLens.tsx

@@ -1,4 +1,5 @@
 import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
+import { onPreviewContentReplaced } from "../../player/sceneSwap";
 import {
   useEffect,
   useLayoutEffect,
@@ -119,8 +120,7 @@ export function TopologyLens({ iframeRef, activeCompositionPath }: TopologyLensP
     const iframe = iframeRef.current;
     if (!iframe || !callId) return;
     const dismiss = () => studioEditLifecycle.dismiss(callId);
-    iframe.addEventListener("load", dismiss);
-    return () => iframe.removeEventListener("load", dismiss);
+    return onPreviewContentReplaced(iframe, dismiss);
   }, [callId, iframeRef, livePreviewIframe]);
 
   useEffect(() => {