@hyperframes/studio 0.8.49 → 0.8.51

package/src/hooks/useSdkSession.ts

@@ -7,25 +7,53 @@ import type { PublishSdkSession } from "../utils/sdkCutover";
 import { addExternalFileReloadListener } from "./externalFileReloadBus";
 
 /**
- * Read a project file's content, or undefined on a non-2xx (optional read).
- * Replaces the removed SDK http adapter's `read()` — the only thing Studio used
- * it for (Studio is the sole writer, so the adapter's write path was dead).
+ * Why an optional project-file read produced no usable content. `stage: "read"`
+ * was a single opaque reason covering all of these, which made the largest
+ * remaining class of SDK-session failures undiagnosable: 56 users in a 7-day
+ * window hit it and, between them, never landed a single successful SDK edit.
+ * Knowing which branch fired is the difference between "the file legitimately
+ * is not there" and "the request never reached the file".
+ *
+ * Every reason lives in this union so the full surface is readable from one
+ * place — `absent_or_empty` included, even though it is a 2xx.
+ */
+type ProjectFileReadFailure =
+  | { ok: false; reason: "unsafe_path" }
+  | { ok: false; reason: "http_error"; status: number }
+  | { ok: false; reason: "missing_content" }
+  | { ok: false; reason: "absent_or_empty" };
+
+type ProjectFileReadResult = { ok: true; content: string } | ProjectFileReadFailure;
+
+/**
+ * Read a project file's content (optional read — a missing file is not an
+ * error). Replaces the removed SDK http adapter's `read()` — the only thing
+ * Studio used it for (Studio is the sole writer, so the adapter's write path
+ * was dead).
  */
 async function readProjectFileOptional(
   projectId: string,
   path: string,
-): Promise<string | undefined> {
+): Promise<ProjectFileReadResult> {
   // Reject traversal / NUL before building the request URL — `path` is a
   // user-influenced composition path (mirrors the guard in timelineEditingHelpers,
   // and closes the CodeQL client-side-request-forgery flag). encodeURIComponent
   // already confines both values to single segments of this same-origin URL.
-  if (path.includes("\0") || path.includes("..")) return undefined;
+  if (path.includes("\0") || path.includes("..")) return { ok: false, reason: "unsafe_path" };
   const res = await fetch(
     `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
   );
-  if (!res.ok) return undefined;
+  if (!res.ok) return { ok: false, reason: "http_error", status: res.status };
   const data = (await res.json()) as { content?: string };
-  return typeof data.content === "string" ? data.content : undefined;
+  // `optional=1` answers a missing file with 200 + `content: ""`, so a
+  // non-string here means a response shape we did not expect, not absence.
+  if (typeof data.content !== "string") return { ok: false, reason: "missing_content" };
+  // An empty body parses into a session with no elements, which declines every
+  // edit wholesale — not a session worth opening. The absent-file shim and a
+  // genuinely 0-byte file are the same 200 on the wire and cannot be told
+  // apart here, hence the name; for a composition it is always the former.
+  if (data.content === "") return { ok: false, reason: "absent_or_empty" };
+  return { ok: true, content: data.content };
 }
 
 /**
@@ -180,16 +208,21 @@ export function useSdkSession(
     };
 
     readProjectFileOptional(projectId, activeCompPath)
-      .then(async (content) => {
+      .then(async (read) => {
         if (cancelled) return;
-        if (typeof content !== "string") {
+        if (!read.ok) {
           // No SDK session follows, so EVERY cutover chokepoint below takes the
           // server path and emits nothing — the shadow never runs either. This
           // is the only place a missing session can originate, so a broken read
           // would otherwise be a silent, total SDK bypass.
-          trackStudioEvent("sdk_session_unavailable", { stage: "read" });
+          trackStudioEvent("sdk_session_unavailable", {
+            stage: "read",
+            reason: read.reason,
+            ...(read.reason === "http_error" ? { status: read.status } : {}),
+          });
           return;
         }
+        const content = read.content;
         // No persist queue: Studio's writeProjectFile (via sdkCutover's
         // persistSdkSerialize) is the SINGLE writer. Wiring the SDK persist
         // queue too would double-write the file (queue auto-writes on every

package/src/hooks/useStudioContextValue.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState, type DragEvent } from "react";
+import { useCallback, useMemo, type DragEvent } from "react";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { StudioContextValue } from "../contexts/StudioContext";
 import type { RightInspectorPanes } from "../utils/studioHelpers";
@@ -116,35 +116,21 @@ export function useInspectorState(
   ]);
 }
 
-// fallow-ignore-next-line complexity
-function useDragOverlay(onImportFiles: (files: FileList) => void) {
-  const [active, setActive] = useState(false);
-  const counterRef = useRef(0);
+/** Lets an OS file drop reach `onDrop` anywhere in the shell; the timeline shows its own landing preview. */
+function useFileDropTarget(onImportFiles: (files: FileList) => void) {
   const onDragOver = useCallback((e: DragEvent) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
   }, []);
-  const onDragEnter = useCallback((e: DragEvent) => {
-    if (!e.dataTransfer.types.includes("Files")) return;
-    e.preventDefault();
-    counterRef.current++;
-    setActive(true);
-  }, []);
-  const onDragLeave = useCallback(() => {
-    counterRef.current--;
-    if (counterRef.current === 0) setActive(false);
-  }, []);
   const onDrop = useCallback(
     (e: DragEvent) => {
-      counterRef.current = 0;
-      setActive(false);
       if (e.defaultPrevented) return;
       e.preventDefault();
       if (e.dataTransfer.files.length) onImportFiles(e.dataTransfer.files);
     },
     [onImportFiles],
   );
-  return { active, onDragOver, onDragEnter, onDragLeave, onDrop };
+  return { onDragOver, onDrop };
 }
 
 /** Global OS file drop: imports and places at the playhead position. */
@@ -156,5 +142,5 @@ export function useGlobalFileDrop(handleTimelineFileDrop: TimelineFileDropHandle
     },
     [handleTimelineFileDrop],
   );
-  return useDragOverlay(onDrop);
+  return useFileDropTarget(onDrop);
 }

package/src/hooks/useTimelineAssetDropOps.test.tsx

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { useTimelineAssetDropOps } from "./useTimelineAssetDropOps";
 import { mountReactHarness } from "./domSelectionTestHarness";
 import { usePlayerStore } from "../player/store/playerStore";
+import type { TimelineElement } from "../player";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -19,6 +20,7 @@ type DropFn = ReturnType<typeof useTimelineAssetDropOps>["handleTimelineAssetDro
 function renderDropHook(
   sourceContent: string,
   writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
+  timelineElements: TimelineElement[] = [],
 ) {
   vi.stubGlobal(
     "fetch",
@@ -29,7 +31,7 @@ function renderDropHook(
     const { handleTimelineAssetDrop } = useTimelineAssetDropOps({
       projectIdRef: { current: "project" },
       activeCompPath: "index.html",
-      timelineElements: [],
+      timelineElements,
       showToast: vi.fn(),
       writeProjectFile,
       recordEdit: vi.fn().mockResolvedValue(undefined),
@@ -84,4 +86,42 @@ describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
 
     expect(usePlayerStore.getState().selectedElementId).toBe("index.html#clip");
   });
+
+  it("measures the insert row against the visible rows, not clips the timeline hides", async () => {
+    const clip = (id: string, track: number): TimelineElement => ({
+      id,
+      key: id,
+      tag: "div",
+      start: 0,
+      duration: 2,
+      track,
+      authoredTrack: track,
+      hfId: `hf-${id}`,
+      domId: id,
+    });
+    const source = [
+      '<main data-composition-id="scene" data-duration="10" data-width="1920" data-height="1080">',
+      ...["a:0", "hidden:1", "b:2"].map((t) => {
+        const [id, track] = t.split(":");
+        return `<div data-hf-id="hf-${id}" id="${id}" data-start="0" data-track-index="${track}"></div>`;
+      }),
+      "</main>",
+    ].join("\n");
+    usePlayerStore.getState().setTopLevelIds(new Set(["a", "b"]));
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const getDrop = renderDropHook(source, writeProjectFile, [
+      clip("a", 0),
+      clip("hidden", 1),
+      clip("b", 2),
+    ]);
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 1, track: 1, insertRow: 1, trackOrder: [0, 2] }, 2);
+    });
+
+    const [, written] = writeProjectFile.mock.calls[0] as [string, string];
+    expect(written).toContain('id="b" data-start="0" data-track-index="2"');
+    expect(written).toContain('id="hidden" data-start="0" data-track-index="1"');
+    expect(written).toMatch(/<video id="clip"[^>]*data-track-index="1"/);
+  });
 });

package/src/hooks/useTimelineAssetDropOps.ts

@@ -4,6 +4,8 @@
 // 600-line cap.
 import { useCallback, type MutableRefObject, type RefObject } from "react";
 import type { TimelineElement } from "../player";
+import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
+import { resolveDropTrack } from "../utils/timelineDropTrackInsert";
 import {
   buildTimelineAssetId,
   buildTimelineAssetInsertHtml,
@@ -23,6 +25,18 @@ import { commitTimelineCompositionInsertion } from "../utils/timelineComposition
 import { extendRootDurationInSource } from "../utils/rootDuration";
 import { deriveTimelineStoreKeyForDomId } from "../player/lib/timelineElementHelpers";
 import { selectAndRevealTimelineElement } from "../player/components/timelineDropReveal";
+import { selectTimelineRowElements } from "../player/hooks/useTimelineRowElements";
+import { usePlayerStore } from "../player/store/playerStore";
+
+/** The first uploaded file opens the new track (if asked); the rest land on the lane it landed on. */
+function fileDropPlacement(
+  index: number,
+  next: { start: number; track: number },
+  dropped: TimelineDropPlacement | undefined,
+  landedTrack: number | undefined,
+): TimelineDropPlacement {
+  return index === 0 ? { ...dropped, ...next } : { ...next, track: landedTrack ?? next.track };
+}
 
 interface UseTimelineAssetDropOpsOptions {
   projectIdRef: MutableRefObject<string | null>;
@@ -52,16 +66,16 @@ export function useTimelineAssetDropOps({
   observeProjectFileVersion,
 }: UseTimelineAssetDropOpsOptions) {
   // fallow-ignore-next-line complexity
-  const handleTimelineAssetDrop = useCallback(
+  const dropAssetAt = useCallback(
     // fallow-ignore-next-line complexity
     async (
       assetPath: string,
-      placement: Pick<TimelineElement, "start" | "track">,
+      placement: TimelineDropPlacement,
       durationOverride?: number,
-    ) => {
+    ): Promise<number | undefined> => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
-        return;
+        return undefined;
       }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
@@ -69,7 +83,7 @@ export function useTimelineAssetDropOps({
       const kind = getTimelineAssetKind(assetPath);
       if (!kind) {
         showToast("Only image, video, and audio assets can be dropped onto the timeline.");
-        return;
+        return undefined;
       }
 
       const targetPath = activeCompPath || "index.html";
@@ -91,9 +105,24 @@ export function useTimelineAssetDropOps({
         );
         const newElementZIndex = Math.max(1, relevantElements.length + 1);
 
+        const { source: sourceWithRoom, track } = resolveDropTrack({
+          source: originalContent,
+          // insertRow counts the rows the timeline shows, so plan against those.
+          elements: selectTimelineRowElements(
+            relevantElements,
+            usePlayerStore.getState().topLevelIds,
+          ),
+          placement,
+          dropped: {
+            id: newId,
+            tag: kind === "image" ? "img" : kind,
+            start: normalizedStart,
+            duration: normalizedDuration,
+          },
+        });
         const patchedContent = extendRootDurationInSource(
           insertTimelineAssetIntoSource(
-            originalContent,
+            sourceWithRoom,
             buildTimelineAssetInsertHtml({
               id: newId,
               hfId: `hf-${generateId()}`,
@@ -101,7 +130,7 @@ export function useTimelineAssetDropOps({
               kind,
               start: normalizedStart,
               duration: normalizedDuration,
-              track: placement.track,
+              track,
               zIndex: newElementZIndex,
               geometry: fitTimelineAssetGeometry(
                 null,
@@ -125,10 +154,12 @@ export function useTimelineAssetDropOps({
         selectAndRevealTimelineElement(deriveTimelineStoreKeyForDomId(newId, targetPath));
         forceReloadSdkSession?.();
         reloadPreview();
+        return track;
       } catch (error) {
         const message =
           error instanceof Error ? error.message : "Failed to drop asset onto timeline";
         showToast(message);
+        return undefined;
       }
     },
     [
@@ -144,10 +175,17 @@ export function useTimelineAssetDropOps({
     ],
   );
 
+  const handleTimelineAssetDrop = useCallback(
+    async (assetPath: string, placement: TimelineDropPlacement, durationOverride?: number) => {
+      await dropAssetAt(assetPath, placement, durationOverride);
+    },
+    [dropAssetAt],
+  );
+
   // fallow-ignore-next-line complexity
   const handleTimelineFileDrop = useCallback(
     // fallow-ignore-next-line complexity
-    async (files: File[], placement?: Pick<TimelineElement, "start" | "track">) => {
+    async (files: File[], placement?: TimelineDropPlacement) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
@@ -166,15 +204,18 @@ export function useTimelineAssetDropOps({
         placement ?? { start: 0, track: 0 },
         durations,
       );
+      let landedTrack: number | undefined;
       for (const [index, assetPath] of uploaded.entries()) {
-        await handleTimelineAssetDrop(
+        const next = placements[index] ?? placements[0];
+        const track = await dropAssetAt(
           assetPath,
-          placements[index] ?? placements[0],
+          fileDropPlacement(index, next, placement, landedTrack),
           durations[index],
         );
+        if (index === 0) landedTrack = track;
       }
     },
-    [handleTimelineAssetDrop, projectIdRef, uploadProjectFiles, isRecordingRef, showToast],
+    [dropAssetAt, projectIdRef, uploadProjectFiles, isRecordingRef, showToast],
   );
 
   const handleTimelineCompositionDrop = useCallback(

package/src/hooks/useTimelineEditing.test.tsx

@@ -86,7 +86,6 @@ function timelineElement(input: {
     parentCompositionId: null,
     compositionAncestors: ["root"],
     sourceFile: input.sourceFile ?? "index.html",
-    timingSource: "authored",
   };
 }
 

package/src/main.tsx

@@ -1,7 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { IconContext } from "@phosphor-icons/react";
 import { StudioApp } from "./App";
 import { StudioErrorBoundary } from "./components/StudioErrorBoundary";
+import { readIconTokens } from "./styles/iconTokens";
 import { trackStudioEvent } from "./utils/studioTelemetry";
 import "./styles/studio.css";
 
@@ -93,8 +95,12 @@ window.addEventListener("unhandledrejection", (event) => {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <StudioErrorBoundary>
-      <StudioApp />
-    </StudioErrorBoundary>
+    {/* One icon size and weight for the whole app, taken from the theme file.
+        Icons that pass their own size or weight still win. */}
+    <IconContext.Provider value={readIconTokens()}>
+      <StudioErrorBoundary>
+        <StudioApp />
+      </StudioErrorBoundary>
+    </IconContext.Provider>
   </StrictMode>,
 );

package/src/player/components/AudioWaveform.tsx

@@ -191,7 +191,7 @@ export const AudioWaveform = memo(function AudioWaveform({
                 "repeating-linear-gradient(90deg, rgba(75,163,210,0.35) 0 2px, transparent 2px 5px)",
             }}
           />
-          <span className="relative rounded bg-black/50 px-1 text-[8px] text-neutral-500">
+          <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
             waveform unavailable
           </span>
         </div>

package/src/player/components/AutomationSelectionMenu.tsx

@@ -41,11 +41,11 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
   return createPortal(
     <div
       ref={menuRef}
-      // z-[200] for the same reason the timeline's FX popover uses it: this is
+      // z-200 for the same reason the timeline's FX popover uses it: this is
       // portaled to `document.body`, but the ruler's sticky header sits at z-70
       // in the SAME root stacking context, so a z-50 menu opened near the top of
       // the timeline is painted through by the ruler and the playhead.
-      className="hf-automation-menu fixed z-[200] min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
+      className="hf-automation-menu fixed z-200 min-w-[140px] rounded-sm border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
       style={{ left: adjustedX, top: adjustedY }}
     >
       {AUTOMATION_SHAPES.map((shape) => (

package/src/player/components/ClipContextMenu.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import { createPortal } from "react-dom";
-import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { canSplitElement } from "../../utils/timelineElementSplit";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { useMenuKeyboardNav } from "./menuKeyboardNav";
@@ -13,8 +13,14 @@ interface ClipContextMenuProps {
   onClose: () => void;
   onSplit: (element: TimelineElement, splitTime: number) => void;
   onDelete: (element: TimelineElement) => void;
+  onCopy?: () => boolean;
+  onPaste?: () => Promise<void>;
+  onDuplicate?: () => Promise<boolean>;
+  canPaste?: boolean;
 }
 
+// A menu with many independently gated items (Split/Delete/Copy/Paste/Duplicate).
+// fallow-ignore-next-line complexity
 export const ClipContextMenu = memo(function ClipContextMenu({
   x,
   y,
@@ -23,15 +29,22 @@ export const ClipContextMenu = memo(function ClipContextMenu({
   onClose,
   onSplit,
   onDelete,
+  onCopy,
+  onPaste,
+  onDuplicate,
+  canPaste,
 }: ClipContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
-
-  const menuWidth = 200;
-  const menuHeight = 80;
-  const overflowY = y + menuHeight - window.innerHeight;
-  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
-  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+  // 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.
+  const selectionSize = usePlayerStore((s) => {
+    const id = element.key ?? element.id;
+    return s.selectedElementIds.size > 1 && s.selectedElementIds.has(id)
+      ? s.selectedElementIds.size
+      : 1;
+  });
 
   const isSplittable = canSplitElement(element) && ["video", "audio", "img"].includes(element.tag);
   const canSplit =
@@ -43,12 +56,29 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       ? `Split at ${currentTime.toFixed(2)}s`
       : "Split (move playhead inside clip)";
 
+  const clipboardItemCount = [onCopy, onPaste, onDuplicate].filter(Boolean).length;
+  const rowCount = (splitLabel ? 1 : 0) + clipboardItemCount + 1; // + Delete, always present
+  const dividerCount = (splitLabel ? 1 : 0) + (clipboardItemCount > 0 ? 1 : 0);
+  const menuWidth = 200;
+  const menuHeight = rowCount * 30 + dividerCount * 9 + 8;
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+
+  // 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"
+    }`;
+
   return createPortal(
     <div
       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="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
       {splitLabel && (
@@ -56,7 +86,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
           <button
             type="button"
             role="menuitem"
-            className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none focus-visible:bg-neutral-800 ${
+            className={`w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-hidden focus-visible:bg-neutral-800 ${
               canSplit
                 ? "text-neutral-300 hover:bg-neutral-800 cursor-pointer"
                 : "text-neutral-600 cursor-not-allowed"
@@ -76,10 +106,60 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         </>
       )}
 
+      {(onCopy || onPaste || onDuplicate) && (
+        <>
+          {onCopy && (
+            <button
+              type="button"
+              role="menuitem"
+              className={itemClass(true)}
+              onClick={() => {
+                onCopy();
+                onClose();
+              }}
+            >
+              <span>{selectionSize > 1 ? `Copy ${selectionSize} clips` : "Copy"}</span>
+              <span className="text-neutral-500 text-[10px] ml-3">⌘C</span>
+            </button>
+          )}
+          {onPaste && (
+            <button
+              type="button"
+              role="menuitem"
+              className={itemClass(!!canPaste)}
+              disabled={!canPaste}
+              onClick={() => {
+                if (!canPaste) return;
+                void onPaste();
+                onClose();
+              }}
+            >
+              <span>Paste</span>
+              <span className="text-neutral-500 text-[10px] ml-3">⌘V</span>
+            </button>
+          )}
+          {onDuplicate && (
+            <button
+              type="button"
+              role="menuitem"
+              className={itemClass(true)}
+              onClick={() => {
+                void onDuplicate();
+                onClose();
+              }}
+            >
+              <span>{selectionSize > 1 ? `Duplicate ${selectionSize} clips` : "Duplicate"}</span>
+              <span className="text-neutral-500 text-[10px] ml-3">⌘D</span>
+            </button>
+          )}
+          <div className="my-1 border-t border-neutral-700/60" />
+        </>
+      )}
+
       <button
         type="button"
         role="menuitem"
-        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-none cursor-pointer text-left"
+        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDelete(element);
           onClose();

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

@@ -87,9 +87,6 @@ describe("buildCompositionThumbnailUrl", () => {
 
     expect(buildCompositionThumbnailUrl(base)).not.toContain("output=");
     expect(buildCompositionThumbnailUrl({ ...base, output: "source" })).toContain("output=source");
-    expect(buildCompositionThumbnailUrl({ ...base, output: "storyboard" })).toContain(
-      "output=storyboard",
-    );
   });
 
   it("includes the persisted content revision in the cache identity", () => {

package/src/player/components/CompositionThumbnail.tsx

@@ -44,10 +44,9 @@ export function buildCompositionThumbnailUrl({
   /**
    * Capture density. Omitted, the route bounds the image to its preview cap —
    * right for the timeline, where thumbnails are small and numerous and their
-   * decoded bytes are budgeted. `"storyboard"` caps the longest side at a
-   * high-density review size; `"source"` uses the composition's own dimensions.
+   * decoded bytes are budgeted. `"source"` uses the composition's own dimensions.
    */
-  output?: "source" | "storyboard";
+  output?: "source";
   contentRevision?: number;
 }): string {
   const thumbnailBase = previewUrl
@@ -159,7 +158,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
           {Array.from({ length: frameCount }, (_, index) => (
             <div
               key={index}
-              className="relative h-full flex-shrink-0 overflow-hidden"
+              className="relative h-full shrink-0 overflow-hidden"
               style={{ width: frameW }}
             >
               <img

package/src/player/components/EditModal.tsx

@@ -168,7 +168,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
             }}
             placeholder="What should change?"
             rows={2}
-            className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-none focus:border-studio-accent/40 transition-colors"
+            className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-hidden focus:border-studio-accent/40 transition-colors"
           />
         </div>
 

package/src/player/components/ImageThumbnail.tsx

@@ -73,7 +73,7 @@ export const ImageThumbnail = memo(function ImageThumbnail({
           {Array.from({ length: frameCount }, (_, index) => (
             <div
               key={index}
-              className="relative h-full flex-shrink-0 overflow-hidden bg-neutral-900"
+              className="relative h-full shrink-0 overflow-hidden bg-neutral-900"
               style={{ width: frameW }}
             >
               <img

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -40,9 +40,9 @@ interface KeyframeDiamondContextMenuProps {
 }
 
 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-none cursor-pointer text-left";
+  "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-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-none cursor-pointer text-left";
+  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
 
 export function KeyframeDiamondContextMenu({
   state,
@@ -96,7 +96,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="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px] overflow-y-auto"
       style={{ left: adjustedX, top: adjustedY, maxHeight: `calc(100vh - ${adjustedY + 8}px)` }}
     >
       {onMoveToPlayhead && (
@@ -172,7 +172,7 @@ export function KeyframeDiamondContextMenu({
       <button
         type="button"
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/40 focus-visible:bg-red-950/40 outline-none cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/40 focus-visible:bg-red-950/40 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDeleteAll(state.element, state.animationId);
           onClose();