@hyperframes/studio 0.8.87 → 0.8.88

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.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.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.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.87"
+    "@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/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/player/components/Timeline.showKeyframes.test.tsx

@@ -0,0 +1,91 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Timeline } from "./Timeline";
+import { installTimelineMountEnv } from "./timelineMountTestEnv";
+import { usePlayerStore } from "../store/playerStore";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+installTimelineMountEnv();
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+async function mountKeyframed(showKeyframes?: boolean, withLanes = true) {
+  usePlayerStore.setState({
+    duration: 10,
+    currentTime: 0,
+    timelineReady: true,
+    selectedElementId: "card",
+    elements: [{ id: "card", label: "Hero card", tag: "div", start: 0, duration: 4, track: 0 }],
+    gsapAnimations: withLanes
+      ? new Map([
+          [
+            "card",
+            [
+              {
+                id: "card-position",
+                targetSelector: "#card",
+                method: "to",
+                position: 0,
+                duration: 2,
+                properties: {},
+                propertyGroup: "position",
+                keyframes: {
+                  format: "percentage",
+                  keyframes: [
+                    { percentage: 0, properties: { x: 0 } },
+                    { percentage: 50, properties: { x: 100 } },
+                  ],
+                },
+              },
+            ],
+          ],
+        ])
+      : new Map(),
+    keyframeCache: new Map([
+      [
+        "card",
+        {
+          format: "percentage",
+          keyframes: [{ percentage: 50, properties: { x: 100 }, tweenPercentage: 50 }],
+        },
+      ],
+    ]),
+  });
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  await act(async () => root.render(<Timeline showKeyframes={showKeyframes} />));
+  const diamonds = host.querySelectorAll('button[title="50%"]').length;
+  const named = Array.from(host.querySelectorAll("[role=rowheader]")).some((h) =>
+    h.textContent?.includes("Hero card"),
+  );
+  const lanes = host.textContent?.includes("Position") ?? false;
+  act(() => root.unmount());
+  return { diamonds, named, lanes };
+}
+
+describe("Timeline showKeyframes", () => {
+  it("draws a keyframed clip's diamonds by default", async () => {
+    expect((await mountKeyframed(undefined, false)).diamonds).toBeGreaterThan(0);
+  });
+
+  it("draws no keyframe diamonds when the host turns keyframes off", async () => {
+    expect((await mountKeyframed(false, false)).diamonds).toBe(0);
+  });
+
+  it("draws the keyframe lanes by default and none when keyframes are off", async () => {
+    expect((await mountKeyframed()).lanes).toBe(true);
+    expect((await mountKeyframed(false)).lanes).toBe(false);
+  });
+
+  it("keeps each track's name in the header when keyframes are off", async () => {
+    expect((await mountKeyframed()).named).toBe(true);
+    expect((await mountKeyframed(false)).named).toBe(true);
+  });
+});

package/src/player/components/TimelineTypes.ts

@@ -34,4 +34,5 @@ export interface TimelineProps
   canPasteClip?: () => boolean;
   theme?: Partial<TimelineTheme>;
   showAudioEffects?: boolean;
+  showKeyframes?: boolean;
 }

package/src/player/components/studioShortcuts.ts

@@ -52,6 +52,8 @@ export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
       { key: "⌘X", label: "Cut element" },
       { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
       { key: "⇧Click", label: "Razor tool: split all tracks" },
+      { key: "[", label: "Select clips starting before the playhead" },
+      { key: "]", label: "Select clips starting at or after the playhead" },
       { key: "⌘G", label: "Group elements" },
       { key: "⌘⇧G", label: "Ungroup" },
       { key: "Del", label: "Delete selected element (no keyframe selected)" },

package/src/player/components/useTimelineKeyframeData.ts

@@ -0,0 +1,14 @@
+import { usePlayerStore, type KeyframeCacheEntry } from "../store/playerStore";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+
+const HIDDEN = {
+  gsapAnimations: new Map<string, GsapAnimation[]>(),
+  keyframeCache: new Map<string, KeyframeCacheEntry>(),
+};
+
+/** The keyframe data the timeline draws, or none when the host hides keyframes. */
+export function useTimelineKeyframeData(showKeyframes: boolean) {
+  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
+  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
+  return showKeyframes ? { gsapAnimations, keyframeCache } : HIDDEN;
+}

package/src/player/components/useTimelineProviderState.tsx

@@ -21,6 +21,7 @@ import { useTimelineGeometry } from "./useTimelineGeometry";
 import { useAutoExpandKeyframedClips } from "./useAutoExpandKeyframedClips";
 import { GUTTER, LABEL_COL_W } from "./timelineLayout";
 import { useTimelineLabelColumn } from "./useTimelineLabelColumn";
+import { useTimelineKeyframeData } from "./useTimelineKeyframeData";
 import { useTimelineScrollViewport } from "./useTimelineScrollViewport";
 import { ClipContentOnceShown } from "./timelineClipChildren";
 import { useResolvedTimelineEditCallbacks } from "./useResolvedTimelineEditCallbacks";
@@ -68,6 +69,7 @@ export function useTimelineProviderState({
   canPasteClip,
   theme: themeOverrides,
   showAudioEffects = true,
+  showKeyframes = true,
   sessionEpoch = 0,
   previewIframeRef,
   onZIndexReorder,
@@ -104,8 +106,9 @@ export function useTimelineProviderState({
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
   const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
-  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
-  const { labelMode, contentOrigin } = useTimelineLabelColumn(gsapAnimations, timelineElements);
+  const { gsapAnimations, keyframeCache } = useTimelineKeyframeData(showKeyframes);
+  const namedAnimations = usePlayerStore((s) => s.gsapAnimations);
+  const { labelMode, contentOrigin } = useTimelineLabelColumn(namedAnimations, timelineElements);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatDragging = usePlayerStore((s) => s.beatDragging);
@@ -130,7 +133,6 @@ export function useTimelineProviderState({
     () => getEffectiveTimelineDuration(duration, timelineElements),
     [duration, timelineElements],
   );
-  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
   useAutoExpandKeyframedClips(gsapAnimations);
   const {
     tracks,

package/src/player/store/playerStore.ts

@@ -23,6 +23,7 @@ import { createRangeSelectionSlice, type RangeSelectionSlice } from "./rangeSele
 import { createTimelineResetState } from "./timelineResetState";
 export type { KeyframeCacheEntry } from "./keyframeSlice";
 export { liveTime } from "./liveTime";
+import { liveTime } from "./liveTime";
 export { createTimelineResetState };
 
 import type {
@@ -96,6 +97,8 @@ interface PlayerState extends PlayerStoreSlices {
 
   activeTool: TimelineTool;
   setActiveTool: (tool: TimelineTool) => void;
+  selectLeftward: () => void;
+  selectRightward: () => void;
 
   /** Tween-relative percentage of the last-clicked keyframe diamond. Operations
    *  (drag, resize, rotate) target this instead of recomputing from playhead. */
@@ -250,6 +253,17 @@ interface BeatHistoryEntry {
   label: string;
 }
 
+/** Selects like the marquee: the primary first, so its resets run, then the whole set. */
+function selectAroundPlayhead(
+  state: PlayerState,
+  keep: (start: number, playhead: number) => boolean,
+): void {
+  const playhead = state.isPlaying ? liveTime.latest() : state.currentTime;
+  const ids = state.elements.filter((el) => keep(el.start, playhead)).map((el) => el.key ?? el.id);
+  state.setSelectedElementId(ids[0] ?? null);
+  state.setSelectedElementIds(new Set(ids));
+}
+
 export const usePlayerStore = create<PlayerState>((set, get) => ({
   isPlaying: false,
   currentTime: 0,
@@ -273,6 +287,8 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
 
   activeTool: "select",
   setActiveTool: (tool) => set({ activeTool: tool }),
+  selectLeftward: () => selectAroundPlayhead(get(), (start, playhead) => start < playhead),
+  selectRightward: () => selectAroundPlayhead(get(), (start, playhead) => start >= playhead),
 
   ...createKeyframeSlice(set, () => ({
     timelineProjectId: get().timelineProjectId,