@hyperframes/studio 0.8.114 → 0.8.116

package/src/player/components/ClipContextMenu.test.tsx

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { ClipContextMenu } from "./ClipContextMenu";
 import type { TimelineClipMenuItem } from "./TimelineTypes";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -117,6 +118,67 @@ describe("ClipContextMenu host items", () => {
   });
 });
 
+describe("ClipContextMenu tools", () => {
+  const video = {
+    id: "talk",
+    domId: "talk",
+    tag: "video",
+    start: 0,
+    duration: 4,
+    track: 0,
+    hasAudio: true,
+  } as unknown as TimelineElement;
+
+  function menuWith(clipMenuTools: boolean | undefined) {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <TimelineEditProvider
+          value={{
+            onFreezeFrame: vi.fn(),
+            onSetElementAttributeQuiet: vi.fn(),
+            onLinkEdit: vi.fn(),
+            ...(clipMenuTools === undefined ? {} : { clipMenuTools }),
+          }}
+        >
+          <ClipContextMenu
+            x={10}
+            y={10}
+            element={video}
+            currentTime={1}
+            onClose={vi.fn()}
+            onSplit={vi.fn()}
+            onDelete={vi.fn()}
+          />
+        </TimelineEditProvider>,
+      ),
+    );
+    const labels = () =>
+      Array.from(document.body.querySelectorAll("[role=menuitem]")).map((item) => item.textContent);
+    return { labels, unmount: () => act(() => root.unmount()) };
+  }
+
+  it("offers Freeze frame and the attribute tools by default", () => {
+    const { labels, unmount } = menuWith(undefined);
+    expect(labels().some((label) => label?.startsWith("Freeze frame"))).toBe(true);
+    expect(labels().some((label) => label?.startsWith("Look"))).toBe(true);
+    expect(labels().some((label) => label?.startsWith("Voice"))).toBe(true);
+    unmount();
+  });
+
+  it("hides every tool when the host turns them off, keeping Split and Delete", () => {
+    const { labels, unmount } = menuWith(false);
+    expect(labels().some((label) => label?.startsWith("Freeze frame"))).toBe(false);
+    expect(labels().some((label) => label?.startsWith("Look"))).toBe(false);
+    expect(labels().some((label) => label?.startsWith("Voice"))).toBe(false);
+    expect(labels().some((label) => label?.startsWith("Split"))).toBe(true);
+    expect(labels().some((label) => label?.startsWith("Delete"))).toBe(true);
+    unmount();
+  });
+});
+
 /** A clip button that opens the real menu, whose Ask moves the focus the way `focus` says. */
 function FocusHost({ focus }: { focus: "existing" | "mounted" }) {
   const [open, setOpen] = useState(false);
@@ -186,3 +248,14 @@ describe("ClipContextMenu focus on close", () => {
     unmount();
   });
 });
+
+describe("ClipContextMenu row fill", () => {
+  it("leaves no padding or margin between its rows and the panel edge or a divider", () => {
+    renderMenu([{ id: "ask", label: "Ask", onSelect: vi.fn() }]);
+    const menu = document.body.querySelector<HTMLElement>("[role=menu]")!;
+    const spacing = /(^| )(p|py|pt|pb|m|my|mt|mb)-\d/;
+    expect(menu.className).not.toMatch(spacing);
+    for (const group of menu.querySelectorAll<HTMLElement>("[role=group]"))
+      expect(group.className).not.toMatch(spacing);
+  });
+});

package/src/player/components/ClipContextMenu.tsx

@@ -8,10 +8,10 @@ import type { TimelineClipMenuItem } from "./TimelineTypes";
 import { ClipMenuToolItems } from "./clipMenuToolItems";
 import { ClipMenuAudioItems } from "./clipMenuAudioItems";
 import { ClipMenuLinkItems } from "./clipMenuLinkItems";
+import { menuClasses } from "../../components/ui/menuStyle";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 
 const MENU_MARGIN = 8;
-// Empty groups collapse; every non-empty group before the always-present Delete group ends in a divider.
-const GROUP_CLASS = "empty:hidden mb-1 pb-1 border-b border-neutral-700/60";
 
 function useMeasuredHeight(ref: RefObject<HTMLDivElement | null>, anchorKey: string): number {
   const [height, setHeight] = useState(0);
@@ -42,13 +42,8 @@ interface ClipContextMenuProps {
   hostItems?: readonly TimelineClipMenuItem[] | undefined;
 }
 
-// Same enabled/disabled menu-item pattern as the sibling TrackGapContextMenu.
 const itemClass = (enabled: boolean) =>
-  `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none${
-    enabled
-      ? " focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer"
-      : " text-neutral-600 cursor-not-allowed"
-  }`;
+  `${menuClasses.row} flex items-center justify-between ${enabled ? menuClasses.rowEnabled : menuClasses.rowDisabled}`;
 
 /** The host's items, above Studio's. A pick closes the menu; focus the item moves stays where it went. */
 function HostItems({
@@ -103,6 +98,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
 }: ClipContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
+  const tools = useTimelineEditContextOptional().clipMenuTools !== false;
   // The right-clicked clip's own id: a member of the live multi-selection
   // means Copy/Duplicate act on the whole group, matching onContextMenuClip's
   // selection-preserving behaviour for a right-click inside it.
@@ -134,15 +130,15 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       ref={menuRef}
       role="menu"
       aria-label="Clip actions"
-      className="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className={`${menuClasses.panel} fixed z-200 min-w-[180px]`}
       style={{ left: adjustedX, top: adjustedY }}
     >
       {hostItems.length > 0 && (
-        <div role="group" aria-label="Host" className={GROUP_CLASS}>
+        <div role="group" aria-label="Host" className={menuClasses.group}>
           <HostItems items={hostItems} onClose={onClose} />
         </div>
       )}
-      <div role="group" aria-label="Time" className={GROUP_CLASS}>
+      <div role="group" aria-label="Time" className={menuClasses.group}>
         {splitLabel && (
           <button
             type="button"
@@ -164,7 +160,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             <span className="text-neutral-500 text-[10px] ml-3">S</span>
           </button>
         )}
-        {splitLabel && (
+        {tools && splitLabel && (
           <ClipMenuToolItems
             group="time"
             element={element}
@@ -174,28 +170,34 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         )}
       </div>
 
-      <div role="group" aria-label="Sound" className={GROUP_CLASS}>
-        <ClipMenuAudioItems part="gain" element={element} onClose={onClose} />
-        <ClipMenuToolItems
-          group="sound"
-          element={element}
-          currentTime={currentTime}
-          onClose={onClose}
-        />
-        <ClipMenuLinkItems part="link" element={element} onClose={onClose} />
-        <ClipMenuAudioItems part="duck" element={element} onClose={onClose} />
+      <div role="group" aria-label="Sound" className={menuClasses.group}>
+        {tools && (
+          <>
+            <ClipMenuAudioItems part="gain" element={element} onClose={onClose} />
+            <ClipMenuToolItems
+              group="sound"
+              element={element}
+              currentTime={currentTime}
+              onClose={onClose}
+            />
+            <ClipMenuLinkItems part="link" element={element} onClose={onClose} />
+            <ClipMenuAudioItems part="duck" element={element} onClose={onClose} />
+          </>
+        )}
       </div>
 
-      <div role="group" aria-label="Picture" className={GROUP_CLASS}>
-        <ClipMenuToolItems
-          group="picture"
-          element={element}
-          currentTime={currentTime}
-          onClose={onClose}
-        />
+      <div role="group" aria-label="Picture" className={menuClasses.group}>
+        {tools && (
+          <ClipMenuToolItems
+            group="picture"
+            element={element}
+            currentTime={currentTime}
+            onClose={onClose}
+          />
+        )}
       </div>
 
-      <div role="group" aria-label="Clipboard" className={GROUP_CLASS}>
+      <div role="group" aria-label="Clipboard" className={menuClasses.group}>
         {onCopy && (
           <button
             type="button"
@@ -255,7 +257,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
           <span>Delete</span>
           <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
         </button>
-        <ClipMenuLinkItems part="delete" element={element} onClose={onClose} />
+        {tools && <ClipMenuLinkItems part="delete" element={element} onClose={onClose} />}
       </div>
     </div>,
     document.body,

package/src/player/components/CompositionThumbnail.tsx

@@ -8,6 +8,7 @@ import {
 } from "../lib/thumbnailScheduler";
 import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
 import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 interface CompositionThumbnailProps {
   previewUrl: string;
@@ -106,7 +107,7 @@ export function compositionThumbnailRequest(
 }
 
 async function loadCompositionImage(url: string, signal: AbortSignal) {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
   const blob = await response.blob();
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -4,6 +4,7 @@ import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { useMenuKeyboardNav } from "./menuKeyboardNav";
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
+import { menuClasses } from "../../components/ui/menuStyle";
 
 export interface KeyframeDiamondContextMenuState {
   x: number;
@@ -39,10 +40,8 @@ interface KeyframeDiamondContextMenuProps {
   onMoveToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
 }
 
-const ITEM_CLS =
-  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
-const DESTRUCTIVE_ITEM_CLS =
-  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
+const ITEM_CLS = `${menuClasses.row} ${menuClasses.rowEnabled} flex items-center gap-2`;
+const DESTRUCTIVE_ITEM_CLS = `${menuClasses.row} text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 cursor-pointer flex items-center gap-2`;
 
 export function KeyframeDiamondContextMenu({
   state,
@@ -96,7 +95,7 @@ export function KeyframeDiamondContextMenu({
       ref={menuRef}
       role="menu"
       aria-label="Keyframe actions"
-      className="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px] overflow-y-auto"
+      className={`${menuClasses.panel} fixed z-200 min-w-[180px] overflow-y-auto`}
       style={{ left: adjustedX, top: adjustedY, maxHeight: `calc(100vh - ${adjustedY + 8}px)` }}
     >
       {onMoveToPlayhead && (
@@ -165,14 +164,14 @@ export function KeyframeDiamondContextMenu({
 
       {/* Deleting every keyframe sat adjacent to the single delete and styled
           identically. Separate and mark it so the two cannot be misread. */}
-      <div className="my-1 border-t border-neutral-700/60" role="separator" />
-
-      <div className="my-1 border-t border-neutral-700/60" role="separator" />
+      <div className={menuClasses.divider} role="separator" />
+      <div className="h-1" aria-hidden="true" />
+      <div className={menuClasses.divider} role="separator" />
 
       <button
         type="button"
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 outline-hidden cursor-pointer text-left"
+        className={`${menuClasses.row} ${menuClasses.rowDanger} flex items-center gap-2`}
         onClick={() => {
           onDeleteAll(state.element, state.animationId);
           onClose();

package/src/player/components/OutOfSyncBadge.tsx

@@ -7,11 +7,11 @@ import { useLinkedClipPreferences } from "../../utils/linkedClipPreferences";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { clipSyncState, type ClipSyncState } from "./clipSync";
 import { useMenuKeyboardNav } from "./menuKeyboardNav";
+import { menuClasses } from "../../components/ui/menuStyle";
 
 const stop = (e: SyntheticEvent) => e.stopPropagation();
 
-const MENU_ROW =
-  "block w-full px-3 py-1.5 text-left text-xs text-neutral-300 outline-hidden hover:bg-neutral-800 focus-visible:bg-neutral-800 disabled:opacity-40";
+const ROW = `${menuClasses.row} ${menuClasses.rowEnabled} block disabled:cursor-not-allowed disabled:opacity-40`;
 
 function SyncMenu({
   x,
@@ -39,13 +39,13 @@ function SyncMenu({
       ref={menuRef}
       role="menu"
       aria-label="Out of sync"
-      className="fixed z-200 min-w-[170px] rounded-sm border border-neutral-700 bg-neutral-900 py-1 shadow-lg"
+      className={`${menuClasses.panel} fixed z-200 min-w-[170px]`}
       style={{ left, top }}
     >
       <button
         type="button"
         role="menuitem"
-        className={MENU_ROW}
+        className={ROW}
         disabled={!onLinkEdit || moveStart === null}
         title={moveStart === null ? "Would move the clip before 0:00" : undefined}
         onClick={() => {
@@ -59,7 +59,7 @@ function SyncMenu({
       <button
         type="button"
         role="menuitem"
-        className={MENU_ROW}
+        className={ROW}
         disabled={!onLinkEdit || slipMediaStart === null}
         title={slipMediaStart === null ? "Would slip before the start of the file" : undefined}
         onClick={() => {

package/src/player/components/TextClipContent.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { textClipBackground } from "./TextClipContent";
+
+describe("textClipBackground", () => {
+  it("puts dark text on a light strip and light text on a dark one", () => {
+    expect(textClipBackground({ value: "a", color: "rgb(16, 20, 24)" })).toBe(
+      "var(--timeline-text-clip-light-bg)",
+    );
+    expect(textClipBackground({ value: "a", color: "rgb(255, 255, 255)" })).toBe(
+      "var(--timeline-text-clip-dark-bg)",
+    );
+  });
+
+  it("uses the layer's own background when it paints one", () => {
+    expect(
+      textClipBackground({ value: "a", color: "rgb(16, 20, 24)", background: "rgb(230, 57, 70)" }),
+    ).toBe("rgb(230, 57, 70)");
+  });
+});

package/src/player/components/TextClipContent.tsx

@@ -0,0 +1,27 @@
+import { parseCssColor } from "../../components/editor/colorValue";
+import type { TimelineText } from "../store/timelineElement";
+
+/** The layer's own background, or a strip the text reads on: light behind dark text, dark otherwise. */
+export function textClipBackground(text: TimelineText): string {
+  if (text.background) return text.background;
+  const color = parseCssColor(text.color ?? "");
+  const light = color ? 0.2126 * color.red + 0.7152 * color.green + 0.0722 * color.blue : 255;
+  return light < 128 ? "var(--timeline-text-clip-light-bg)" : "var(--timeline-text-clip-dark-bg)";
+}
+
+/** A text layer's row: its own words in its own font and colour, live, on one clipped line. */
+export function TextClipContent({ text }: { text: TimelineText }) {
+  return (
+    <div
+      className="absolute inset-0 flex items-center overflow-hidden px-2"
+      style={{ background: textClipBackground(text) }}
+    >
+      <span
+        className="whitespace-nowrap text-[15px] leading-none"
+        style={{ fontFamily: text.fontFamily, fontWeight: text.fontWeight, color: text.color }}
+      >
+        {text.value}
+      </span>
+    </div>
+  );
+}

package/src/player/components/TrackGapContextMenu.tsx

@@ -1,6 +1,7 @@
 import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import { menuClasses } from "../../components/ui/menuStyle";
 
 interface TrackGapContextMenuProps {
   x: number;
@@ -53,11 +54,7 @@ export const TrackGapContextMenu = memo(function TrackGapContextMenu({
   const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
 
   const itemClass = (enabled: boolean) =>
-    `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left ${
-      enabled
-        ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer"
-        : "text-neutral-600 cursor-not-allowed"
-    }`;
+    `${menuClasses.row} flex items-center justify-between ${enabled ? menuClasses.rowEnabled : menuClasses.rowDisabled}`;
 
   // Disabled reasons: no gap under the pointer beats the lock reason — a
   // pointer not on a gap has nothing to close regardless of movability.
@@ -75,7 +72,7 @@ export const TrackGapContextMenu = memo(function TrackGapContextMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className={`${menuClasses.panel} fixed z-200 min-w-[180px]`}
       style={{ left: adjustedX, top: adjustedY }}
       onPointerLeave={() => onHoverAction(null)}
     >

package/src/player/components/clipMenuNormalize.ts

@@ -4,6 +4,7 @@ import { resolveMediaPreviewUrl } from "./thumbnailUtils";
 import type { TimelineElement } from "../store/timelineElement";
 import { parseAutomation, VOLUME_TARGET } from "@hyperframes/core/audio-automation";
 import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 export interface NormalizePlan {
   targetLufs: number;
@@ -74,7 +75,7 @@ function isNormalizePlan(value: unknown): value is NormalizePlan {
 export async function requestNormalizePlan(
   projectId: string,
   el: TimelineElement,
-  fetchImpl: typeof fetch = fetch,
+  fetchImpl: typeof studioApiFetch = studioApiFetch,
 ): Promise<NormalizePlan> {
   const origin = window.location.origin;
   const relative = resolvePreviewRelative(

package/src/player/components/clipMenuToolItems.test.tsx

@@ -99,6 +99,29 @@ describe("ClipMenuToolItems", () => {
     expect(onClose).toHaveBeenCalled();
   });
 
+  it("opens its submenu at the row's edge in window pixels, and flips left near the window's right edge", () => {
+    const rowAt = (rect: { top: number; left: number; right: number }) =>
+      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue(rect as DOMRect);
+    const spy = rowAt({ top: 50, left: 100, right: 300 });
+    renderItems("sound", video);
+    openSubmenu("Voice");
+    let menu = document.querySelector<HTMLElement>('[role="menu"]')!;
+    expect(menu.className).toContain("fixed");
+    expect([menu.style.top, menu.style.left]).toEqual(["50px", "300px"]);
+    act(() => root?.unmount());
+    document.body.innerHTML = "";
+    spy.mockReturnValue({
+      top: 50,
+      left: window.innerWidth - 200,
+      right: window.innerWidth - 10,
+    } as DOMRect);
+    renderItems("sound", video);
+    openSubmenu("Voice");
+    menu = document.querySelector<HTMLElement>('[role="menu"]')!;
+    expect([menu.style.top, menu.style.right, menu.style.left]).toEqual(["50px", "200px", ""]);
+    spy.mockRestore();
+  });
+
   it("Voice None drops the attribute", () => {
     const { setQuiet } = renderItems("sound", video);
     openSubmenu("Voice");

package/src/player/components/clipMenuToolItems.tsx

@@ -15,6 +15,7 @@ import {
   type ClipToolChoice,
 } from "./clipToolAttrs";
 import { useClipToolState } from "./useClipToolState";
+import { menuClasses } from "../../components/ui/menuStyle";
 
 export type ClipMenuToolGroup = "time" | "sound" | "picture";
 
@@ -25,10 +26,8 @@ interface ClipMenuToolItemsProps {
   onClose: () => void;
 }
 
-const ROW_CLASS =
-  "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer";
-const DISABLED_ROW_CLASS =
-  "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none text-neutral-600 cursor-not-allowed";
+const ROW_CLASS = `${menuClasses.row} flex items-center justify-between ${menuClasses.rowEnabled}`;
+const DISABLED_ROW_CLASS = `${menuClasses.row} flex items-center justify-between ${menuClasses.rowDisabled}`;
 const SUBMENU_WIDTH = 170;
 const HOVER_PREVIEW_DELAY_MS = 80;
 
@@ -98,7 +97,7 @@ function ChoiceSubmenu({
   preview?: HoverPreview;
 }) {
   const [open, setOpen] = useState(false);
-  const [flipLeft, setFlipLeft] = useState(false);
+  const [anchor, setAnchor] = useState<{ top: number; left?: number; right?: number }>({ top: 0 });
   const rowRef = useRef<HTMLButtonElement | null>(null);
   const submenuRef = useRef<HTMLDivElement | null>(null);
   const hover = useHoverPreview(preview);
@@ -111,7 +110,12 @@ function ChoiceSubmenu({
 
   const show = (focusFirst: boolean) => {
     const rect = rowRef.current?.getBoundingClientRect();
-    setFlipLeft(rect ? rect.right + SUBMENU_WIDTH > window.innerWidth : false);
+    if (rect)
+      setAnchor(
+        rect.right + SUBMENU_WIDTH > window.innerWidth
+          ? { top: rect.top, right: window.innerWidth - rect.left }
+          : { top: rect.top, left: rect.right },
+      );
     setOpen(true);
     if (!focusFirst) return;
     openingFocusRef.current = true;
@@ -184,8 +188,8 @@ function ChoiceSubmenu({
           ref={submenuRef}
           role="menu"
           aria-label={label}
-          className="absolute top-0 z-10 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1"
-          style={{ width: SUBMENU_WIDTH, ...(flipLeft ? { right: "100%" } : { left: "100%" }) }}
+          className={`${menuClasses.panel} fixed z-10`}
+          style={{ width: SUBMENU_WIDTH, ...anchor }}
           onKeyDown={onSubmenuKeyDown}
         >
           {choiceRow(null, "None")}
@@ -193,7 +197,7 @@ function ChoiceSubmenu({
             <div key={section.heading ?? index}>
               {section.heading && (
                 <>
-                  <div className="my-1 border-t border-neutral-700/60" />
+                  <div className={menuClasses.divider} />
                   <div className="px-3 py-1 text-[9px] uppercase tracking-wide text-neutral-500">
                     {section.heading}
                   </div>

package/src/player/components/clipPeakMap.ts

@@ -1,4 +1,5 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 import { resolvePreviewRelative } from "../../utils/previewRelativePath";
 import type { TimelineElement } from "../store/timelineElement";
 import { clipSourcePeak, isPeakMap, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
@@ -10,7 +11,7 @@ const peakMapRequests = new Map<string, Promise<PeakMap | null>>();
 export function loadPeakMap(url: string): Promise<PeakMap | null> {
   const pending = peakMapRequests.get(url);
   if (pending) return pending;
-  const request = fetch(url)
+  const request = studioApiFetch(url)
     .then((res) => (res.ok ? res.json() : null))
     .then((body: unknown) => (isPeakMap(body) ? body : null))
     .catch(() => null);

package/src/player/components/timelineCallbacks.ts

@@ -137,6 +137,7 @@ export interface TimelineEditCallbacks {
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
   onFreezeFrame?: (element: TimelineElement, time: number) => Promise<void> | void;
+  clipMenuTools?: boolean;
   onNotice?: (message: string, tone?: "error" | "info") => void;
   onDeleteKeyframe?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
   onDeleteAllKeyframes?: (element: TimelineElement, animationId?: string) => void;

package/src/player/components/timelineClipDragGestureLifecycle.ts

@@ -195,7 +195,7 @@ export function mountTimelineClipDragGestureLifecycle({
       event.clientX - blocked.originClientX,
       event.clientY - blocked.originClientY,
     );
-    const threshold = blocked.intent === "move" ? 4 : 2;
+    const threshold = blocked.intent === "move" || blocked.intent === "edit-many" ? 4 : 2;
     if (!blocked.started && distance < threshold) return;
     if (!blocked.started) {
       blocked.started = true;

package/src/player/components/timelineClipGestureHandlers.test.ts

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { createClipGestureHandlers, type ClipGestureDeps } from "./timelineClipGestureHandlers";
+import { MAX_HAND_EDIT_CLIPS } from "./timelineEditing";
+
+afterEach(() => usePlayerStore.getState().reset());
+
+const clips: TimelineElement[] = Array.from({ length: 6 }, (_, i) => ({
+  id: `clip-${i}`,
+  domId: `clip-${i}`,
+  tag: "div",
+  start: i,
+  duration: 1,
+  track: i,
+}));
+const capabilities = { canMove: true, canTrimStart: true, canTrimEnd: true, readOnly: false };
+
+function grabFirstClip(count: number, gesture: "move" | "resize", locked: number[] = []) {
+  const store = usePlayerStore.getState();
+  store.setElements(
+    clips.map((clip, i) => (locked.includes(i) ? { ...clip, timelineLocked: true } : clip)),
+  );
+  store.setSelectedElementIds(new Set(clips.slice(0, count).map((c) => c.id)));
+  const setDraggedClip = vi.fn();
+  const setResizingClip = vi.fn();
+  const blockedClipRef = { current: null as { intent: string } | null };
+  const deps = {
+    pps: 100,
+    onMoveElement: vi.fn(),
+    onResizeElement: vi.fn(),
+    blockedClipRef,
+    suppressClickRef: { current: false },
+    scrollRef: { current: null },
+    setShowPopover: vi.fn(),
+    setRangeSelection: vi.fn(),
+    setResizingClip,
+    setDraggedClip,
+    setSelectedElementId: vi.fn(),
+  } as unknown as ClipGestureDeps;
+  const handlers = createClipGestureHandlers(clips[0], clips[0].id, clips[0], capabilities, deps);
+  const event = {
+    button: 0,
+    clientX: 50,
+    clientY: 5,
+    pointerId: 1,
+    stopPropagation: vi.fn(),
+    currentTarget: { getBoundingClientRect: () => ({ left: 0, width: 100 }) },
+  } as unknown as ReactPointerEvent;
+  if (gesture === "move") handlers.onPointerDown(event);
+  else handlers.onResizeStart("end", event);
+  return { setDraggedClip, setResizingClip, blockedClipRef };
+}
+
+describe("hand-editing a multi-selection", () => {
+  it("moves up to the limit by hand", () => {
+    const { setDraggedClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS, "move");
+    expect(setDraggedClip).toHaveBeenCalledOnce();
+    expect(blockedClipRef.current).toBeNull();
+  });
+
+  it("refuses to start a drag above the limit and asks for the toast", () => {
+    const { setDraggedClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS + 1, "move");
+    expect(setDraggedClip).not.toHaveBeenCalled();
+    expect(blockedClipRef.current?.intent).toBe("edit-many");
+  });
+
+  it("resizes up to the limit by hand", () => {
+    const { setResizingClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS, "resize");
+    expect(setResizingClip).toHaveBeenCalledOnce();
+    expect(blockedClipRef.current).toBeNull();
+  });
+
+  it("refuses to start a resize above the limit and asks for the toast", () => {
+    const { setResizingClip, blockedClipRef } = grabFirstClip(MAX_HAND_EDIT_CLIPS + 1, "resize");
+    expect(setResizingClip).not.toHaveBeenCalled();
+    expect(blockedClipRef.current?.intent).toBe("edit-many");
+  });
+
+  it("counts the clips a move would change: locked ones in the selection stay put", () => {
+    const allowed = grabFirstClip(MAX_HAND_EDIT_CLIPS + 2, "move", [3, 4]);
+    expect(allowed.setDraggedClip).toHaveBeenCalledOnce();
+    const refused = grabFirstClip(MAX_HAND_EDIT_CLIPS + 2, "move", [4]);
+    expect(refused.setDraggedClip).not.toHaveBeenCalled();
+  });
+
+  it("counts the clips a trim would change: a locked member leaves a trim of the grabbed clip alone", () => {
+    const allowed = grabFirstClip(MAX_HAND_EDIT_CLIPS + 1, "resize", [3]);
+    expect(allowed.setResizingClip).toHaveBeenCalledOnce();
+    expect(allowed.blockedClipRef.current).toBeNull();
+  });
+});