@hyperframes/studio 0.8.113 → 0.8.115

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/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/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/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();
+  });
+});

package/src/player/components/timelineClipGestureHandlers.ts

@@ -8,7 +8,11 @@ import {
 import type { TimelineEditCapabilities } from "./timelineEditCapabilities";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { CLIP_HANDLE_W } from "./timelineLayout";
-import { selectClipWithLinks, toggleClipWithLinks } from "./timelineLinkSelection";
+import {
+  exceedsHandEditLimit,
+  selectClipWithLinks,
+  toggleClipWithLinks,
+} from "./timelineLinkSelection";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 
 export interface ClipGestureDeps {
@@ -73,6 +77,7 @@ function isIntentBlocked(
  */
 function resolvePointerDownAction(
   e: ReactPointerEvent,
+  grabbed: TimelineElement,
   capabilities: TimelineEditCapabilities,
   onResizeElement: ClipGestureDeps["onResizeElement"],
   onMoveElement: ClipGestureDeps["onMoveElement"],
@@ -93,6 +98,8 @@ function resolvePointerDownAction(
   }
 
   if (!onMoveElement || !capabilities.canMove) return { kind: "ignore" };
+  if (exceedsHandEditLimit(grabbed, e.altKey, null))
+    return { kind: "block", intent: "edit-many", rect };
   return { kind: "move", rect };
 }
 
@@ -129,6 +136,17 @@ export function createClipGestureHandlers(
   const onResizeStart = (edge: "start" | "end", e: ReactPointerEvent): void => {
     if (!canStartResize(edge, e, capabilities, onResizeElement)) return;
     e.stopPropagation();
+    if (exceedsHandEditLimit(el, e.altKey, edge)) {
+      blockedClipRef.current = {
+        pointerId: e.pointerId,
+        element: el,
+        intent: "edit-many",
+        originClientX: e.clientX,
+        originClientY: e.clientY,
+        started: false,
+      };
+      return;
+    }
     blockedClipRef.current = null;
     setShowPopover(false);
     setRangeSelection(null);
@@ -147,7 +165,7 @@ export function createClipGestureHandlers(
   };
 
   const onPointerDown = (e: ReactPointerEvent): void => {
-    const action = resolvePointerDownAction(e, capabilities, onResizeElement, onMoveElement);
+    const action = resolvePointerDownAction(e, el, capabilities, onResizeElement, onMoveElement);
     if (action.kind === "ignore") return;
 
     if (action.kind === "block") {

package/src/player/components/timelineEditing.ts

@@ -248,7 +248,9 @@ export interface TimelinePromptElement {
   track: number;
 }
 
-export type BlockedTimelineEditIntent = "move" | "resize-start" | "resize-end";
+export type BlockedTimelineEditIntent = "move" | "edit-many" | "resize-start" | "resize-end";
+
+export const MAX_HAND_EDIT_CLIPS = 3;
 
 export interface TimelineRangeSelection {
   start: number;

package/src/player/components/timelineLinkSelection.ts

@@ -1,5 +1,13 @@
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
-import { expandToLinkedMembers, linkedMembersOf } from "./audioClipLink";
+import {
+  dropMisalignedTrimPartners,
+  expandToLinkedMembers,
+  linkedGestureKeys,
+  linkedMembersOf,
+} from "./audioClipLink";
+import { buildTimelineGroupResizeMembers } from "./timelineGroupEditing";
+import { resolveGroupMovers } from "./timelineMultiDragPreview";
+import { MAX_HAND_EDIT_CLIPS } from "./timelineEditing";
 import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
 
 /**
@@ -39,3 +47,29 @@ export function toggleClipWithLinks(key: string, altKey: boolean): TimelineEleme
   const primary = usePlayerStore.getState().selectedElementId;
   return state.elements.find((el) => (el.key ?? el.id) === primary) ?? null;
 }
+
+/** Whether a hand drag on `grabbed` (trimming `edge`, or null to move) would change more clips than allowed. */
+export function exceedsHandEditLimit(
+  grabbed: TimelineElement,
+  altKey: boolean,
+  edge: "start" | "end" | null,
+): boolean {
+  const { selectedElementIds, elements } = usePlayerStore.getState();
+  const grabbedKey = grabbed.key ?? grabbed.id;
+  const keys = linkedGestureKeys(
+    selectedElementIds,
+    grabbed,
+    elements,
+    altKey,
+    isLinkedSelectionOn(),
+  );
+  const changed = edge
+    ? buildTimelineGroupResizeMembers(
+        elements,
+        dropMisalignedTrimPartners(keys, grabbed, elements, edge),
+        grabbedKey,
+        edge,
+      )
+    : resolveGroupMovers(elements, keys, grabbedKey);
+  return (changed?.length ?? 1) > MAX_HAND_EDIT_CLIPS;
+}

package/src/player/components/useTimelineClipDrag.keyboard.test.tsx

@@ -49,6 +49,7 @@ function mount(order = [0, 1, 2]) {
   const host = document.createElement("div");
   const root = createRoot(host);
   const onMoveElements = vi.fn();
+  const onBlockedEditAttempt = vi.fn();
   const trackOrderRef = { current: order };
   const trackInsertLayoutRef = { current: buildTimelineTrackInsertLayout(order, groups) };
   let state: ReturnType<typeof useTimelineClipDrag>;
@@ -68,6 +69,7 @@ function mount(order = [0, 1, 2]) {
       },
       onMoveElement: vi.fn(),
       onMoveElements,
+      onBlockedEditAttempt,
       setShowPopover: () => {},
       setRangeSelectionRef: { current: null },
     });
@@ -83,6 +85,7 @@ function mount(order = [0, 1, 2]) {
     key,
     clip,
     onMoveElements,
+    onBlockedEditAttempt,
     root,
     elements,
     changeOrder(next: number[]) {
@@ -161,3 +164,14 @@ it("leaves Space on a nested fade slider to the slider", () => {
   expect(event.defaultPrevented).toBe(false);
   act(() => view.root.unmount());
 });
+
+it("does not pick up a clip held in a selection above the hand-move limit", () => {
+  const view = mount();
+  usePlayerStore.getState().setSelection(["top", "hero", "tail", "bottom"], "hero");
+  view.key(" ");
+  expect(view.drag).toBeNull();
+  expect(view.onBlockedEditAttempt).toHaveBeenCalledWith(
+    expect.objectContaining({ id: "hero" }),
+    "edit-many",
+  );
+});