@hyperframes/studio 0.8.50 → 0.8.51

package/src/hooks/useLintModal.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useLintModal } from "./useLintModal";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+let latest: ReturnType<typeof useLintModal> | null = null;
+
+function Probe() {
+  latest = useLintModal("demo");
+  return null;
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  latest = null;
+  vi.unstubAllGlobals();
+});
+
+async function mountWithLint(response: () => Promise<unknown>) {
+  vi.stubGlobal("fetch", vi.fn(response));
+  root = createRoot(document.createElement("div"));
+  await act(async () => root?.render(<Probe />));
+  await act(async () => {
+    await latest?.handleLint();
+  });
+}
+
+const lintResponse = (findings: Array<{ severity: string; message: string }>) => async () => ({
+  json: async () => ({ findings }),
+});
+
+describe("useLintModal hasLintError", () => {
+  it("is true when a finding is an error and false for warnings only", async () => {
+    await mountWithLint(lintResponse([{ severity: "error", message: "nested" }]));
+    expect(latest?.hasLintError).toBe(true);
+    act(() => root?.unmount());
+    root = null;
+    await mountWithLint(lintResponse([{ severity: "warning", message: "soft" }]));
+    expect(latest?.hasLintError).toBe(false);
+  });
+
+  it("is true for a mixed error and warning list", async () => {
+    await mountWithLint(
+      lintResponse([
+        { severity: "warning", message: "soft" },
+        { severity: "error", message: "nested" },
+      ]),
+    );
+    expect(latest?.hasLintError).toBe(true);
+  });
+
+  it("is true when the manual lint itself fails, matching the badge count", async () => {
+    await mountWithLint(async () => {
+      throw new Error("offline");
+    });
+    expect(latest?.lintModal).toHaveLength(1);
+    expect(latest?.hasLintError).toBe(true);
+  });
+});

package/src/hooks/useLintModal.ts

@@ -96,6 +96,8 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
 
   const findingsByElement = useMemo(() => groupFindings((f) => f.elementId), [groupFindings]);
   const findingsByFile = useMemo(() => groupFindings((f) => f.file), [groupFindings]);
+  // Reads the list the badge count reads: the manual result when present, else the background one.
+  const hasLintError = (lintModal ?? backgroundFindings).some((f) => f.severity === "error");
 
   // Sync lint findings directly to the player store — eliminates the
   // mirroring useEffect that was previously in App.tsx.
@@ -111,5 +113,6 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
     backgroundFindings,
     findingsByElement,
     findingsByFile,
+    hasLintError,
   };
 }

package/src/hooks/useSdkSession.lifecycle.test.tsx

@@ -164,17 +164,62 @@ describe("useSdkSession unavailable telemetry", () => {
 
   // Every cutover chokepoint silently takes the server path when there is no
   // session, and the shadow never runs either — so a missing session is a total,
-  // otherwise-invisible SDK bypass. These three exits are its only origin.
-  it("reports an unreadable composition", async () => {
+  // otherwise-invisible SDK bypass. These exits are its only origin.
+  //
+  // `stage: read` carries a reason because it was the largest remaining class
+  // and a single opaque string: 56 users hit it in a 7-day window and never
+  // landed one successful SDK edit between them, with no way to tell a genuinely
+  // absent file from a request that never reached one.
+  it("reports the HTTP status when the read fails", async () => {
     vi.stubGlobal(
       "fetch",
-      vi.fn(async () => ({ ok: false, json: async () => ({}) }) as Response),
+      vi.fn(async () => ({ ok: false, status: 404, json: async () => ({}) }) as Response),
     );
     const root = createRoot(document.createElement("div"));
     await act(async () => root.render(<Probe projectId="project-a" />));
     await flushAsyncEffects();
 
-    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", { stage: "read" });
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "http_error",
+      status: 404,
+    });
+    await act(async () => root.unmount());
+  });
+
+  it("separates an unexpected response shape from a failed request", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({}) }) as Response),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "missing_content",
+    });
+    await act(async () => root.unmount());
+  });
+
+  // `optional=1` answers a file that is not on disk with 200 + an empty string,
+  // so this is what "the composition genuinely is not there" looks like on the
+  // wire — previously indistinguishable from a broken request. The shim and a
+  // real 0-byte file are the same response, hence the name.
+  it("separates a file that is not on disk", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({ content: "" }) }) as Response),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "absent_or_empty",
+    });
     await act(async () => root.unmount());
   });
 

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/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/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

@@ -78,7 +78,7 @@ 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="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 && (
@@ -86,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"
@@ -159,7 +159,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-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();

package/src/player/components/LayerDisclosureRow.tsx

@@ -37,7 +37,7 @@ export function LaneToggleButton({
       title={`${isExpanded ? "Hide" : "Show"} lanes`}
       // h-6 w-6 = the 24x24 WCAG 2.2 minimum target. The glyph stays 11px;
       // only the hit box grows.
-      className={`ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] leading-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
+      className={`ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
         isExpanded ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
       }`}
       onPointerDown={(event) => event.stopPropagation()}
@@ -97,7 +97,7 @@ export function LayerDisclosureRow({
       </span>
       {/* Wraps rather than truncating: a truncated name needs a hover to be
           read, which a scanned column cannot rely on. */}
-      <span className="min-w-0 flex-1 break-words font-medium leading-tight">{name}</span>
+      <span className="min-w-0 flex-1 wrap-break-word font-medium leading-tight">{name}</span>
       <TrackClipCount clipCount={clipCount} />
       {children}
       {/* Anchored right, on every header that has one: the lane toggle is the

package/src/player/components/PlayerControls.tsx

@@ -116,7 +116,7 @@ const FullscreenButton = memo(function FullscreenButton({
           trackStudioEvent("playback", { action: "fullscreen_toggle", active: !isFullscreen });
           onToggleFullscreen();
         }}
-        className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors ${
+        className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${
           isFullscreen ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
         }`}
         aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}