@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/hostMount.test.tsx

@@ -0,0 +1,222 @@
+// @vitest-environment happy-dom
+
+// Proves the package's public exports, not internal hook paths, are enough
+// for a host to mount hand editing outside EditorShell: an edit writes
+// through the history path, Undo restores it, and a 409 shows the banner.
+import { act, createElement, useRef } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+// Backend/storage mocking only, standing in for a host's own server and
+// persistence — not part of the host's integration code under test.
+import { studioFileContentVersion } from "./utils/studioFileVersion";
+import { createMemoryEditHistoryStorage } from "./utils/editHistoryStorage";
+import {
+  flushStudioPendingEdits,
+  useTimelineEditing,
+  useProjectFileWriter,
+  usePersistentEditHistory,
+  useEditHistoryActions,
+  ExternalFileConflictBanner,
+  StudioFileConflictError,
+  type ExternalFileChangeCoordinatorHandle,
+  type TimelineElement,
+} from "./index";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const ORIGINAL_HTML = '<div id="clip" data-start="0" data-track-index="0"></div>';
+
+let root: Root | null = null;
+afterEach(() => {
+  act(() => root?.unmount());
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+});
+
+/** A minimal disk with etag-guarded PUT, faithful enough to exercise a real
+ *  conflict: a stale If-Match gets a 409 with the current version + content. */
+function stubHostProjectDisk(
+  initial: Record<string, string>,
+  options?: { editElsewhereAfterFirstRead?: boolean },
+) {
+  const content = { ...initial };
+  const readsSeen = new Set<string>();
+  // The real backend's etag is a content hash (useProjectFileWriter derives
+  // If-Match the same way) — an arbitrary counter here would make every
+  // write from a host that hasn't just read the file look stale.
+  const versionOf = (path: string) => studioFileContentVersion(content[path]);
+
+  async function handlePut(path: string, init: RequestInit | undefined) {
+    const ifMatch = new Headers(init?.headers).get("If-Match");
+    const currentVersion = await versionOf(path);
+    if (ifMatch && ifMatch !== currentVersion) {
+      return new Response(JSON.stringify({ currentVersion, currentContent: content[path] }), {
+        status: 409,
+      });
+    }
+    content[path] = String(init?.body ?? "");
+    return new Response(JSON.stringify({ version: await versionOf(path) }), { status: 200 });
+  }
+
+  async function handleGet(path: string) {
+    const served = content[path];
+    // Simulates another writer landing between this read and the caller's
+    // own write: content moves on right after being served once, so the
+    // caller's hash of what it just read no longer matches disk.
+    if (options?.editElsewhereAfterFirstRead && !readsSeen.has(path)) {
+      readsSeen.add(path);
+      content[path] = `${served} <!--edited elsewhere-->`;
+    }
+    return new Response(
+      JSON.stringify({ content: served, version: await studioFileContentVersion(served) }),
+      { status: 200 },
+    );
+  }
+
+  const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const match = String(input).match(/\/files\/([^?]+)/);
+    const path = match ? decodeURIComponent(match[1]) : "";
+    return (init?.method ?? "GET") === "PUT" ? handlePut(path, init) : handleGet(path);
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  return { content, fetchMock };
+}
+
+type TimelineEditingHandle = {
+  handleTimelineElementMove: (
+    element: TimelineElement,
+    updates: { start: number; track: number },
+  ) => Promise<void>;
+};
+
+function mountHost(
+  clip: TimelineElement,
+  iframe: HTMLIFrameElement,
+): {
+  timelineEditing: TimelineEditingHandle;
+  undo: () => Promise<void>;
+  bannerHost: HTMLDivElement;
+} {
+  let timelineEditing: TimelineEditingHandle | null = null;
+  let undo: (() => Promise<void>) | null = null;
+  let conflict: ExternalFileChangeCoordinatorHandle = {
+    blocked: null,
+    retry: async () => {},
+    useExternalFile: async () => {},
+    keepStudioFile: async () => {},
+  };
+  const bannerHost = document.createElement("div");
+  document.body.append(bannerHost);
+  const bannerRoot = createRoot(bannerHost);
+  // Created once: a fresh storage object on every render would change
+  // usePersistentEditHistory's effect deps each time and loop forever.
+  const storage = createMemoryEditHistoryStorage();
+
+  function Harness() {
+    const writer = useProjectFileWriter({ projectId: "p1" });
+    const editHistory = usePersistentEditHistory({ projectId: "p1", storage });
+    const historyActions = useEditHistoryActions({
+      editHistory,
+      readOptionalProjectFile: writer.readOptionalProjectFile,
+      readProjectFile: writer.readProjectFile,
+      writeProjectFile: writer.writeProjectFile,
+      showToast: () => {},
+      syncHistoryPreviewAfterApply: async () => {},
+      // The pattern a host's own dom-edit queue would also drain through —
+      // this is the one gate that closes the undo/delete race (#4194).
+      waitForPendingDomEditSaves: async () => {
+        const result = await flushStudioPendingEdits();
+        if (result.status !== "clean") throw result.error;
+      },
+    });
+    undo = historyActions.undo;
+    const commitRef = useRef(null);
+    timelineEditing = useTimelineEditing({
+      projectId: "p1",
+      activeCompPath: "index.html",
+      timelineElements: [clip],
+      showToast: () => {},
+      writeProjectFile: async (path, content, expectedContent) => {
+        try {
+          await writer.writeProjectFile(path, content, expectedContent);
+        } catch (error) {
+          if (error instanceof StudioFileConflictError) {
+            conflict = {
+              ...conflict,
+              blocked: { status: "conflict", generation: 0, error, payload: null },
+            };
+            bannerRoot.render(createElement(ExternalFileConflictBanner, { coordinator: conflict }));
+          }
+          throw error;
+        }
+      },
+      observeProjectFileVersion: writer.observeProjectFileVersion,
+      recordEdit: editHistory.recordEdit,
+      reloadPreview: () => {},
+      previewIframeRef: { current: iframe },
+      pendingTimelineEditPathRef: { current: new Set<string>() },
+      uploadProjectFiles: async () => [],
+      handleDomZIndexReorderCommitRef: commitRef,
+    });
+    return null;
+  }
+
+  root = createRoot(document.createElement("div"));
+  act(() => root!.render(createElement(Harness)));
+  if (!timelineEditing) throw new Error("Expected hook to mount");
+  if (!undo) throw new Error("Expected undo to be exposed");
+  return { timelineEditing, undo, bannerHost };
+}
+
+describe("public export surface: a host mounting hand editing outside EditorShell", () => {
+  it("writes a move through the history path and undo restores it", async () => {
+    const disk = stubHostProjectDisk({ "index.html": ORIGINAL_HTML });
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    iframe.contentDocument!.body.innerHTML = ORIGINAL_HTML;
+    const clip: TimelineElement = {
+      id: "clip",
+      domId: "clip",
+      tag: "div",
+      start: 0,
+      duration: 2,
+      track: 0,
+    };
+
+    const { timelineEditing, undo } = mountHost(clip, iframe);
+    await act(async () => {
+      await timelineEditing.handleTimelineElementMove(clip, { start: 5, track: 0 });
+    });
+    expect(disk.content["index.html"]).toContain('data-start="5"');
+
+    await act(async () => {
+      await undo();
+    });
+    expect(disk.content["index.html"]).toContain('data-start="0"');
+  });
+
+  it("surfaces the conflict banner on a 409", async () => {
+    stubHostProjectDisk({ "index.html": ORIGINAL_HTML }, { editElsewhereAfterFirstRead: true });
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    iframe.contentDocument!.body.innerHTML = ORIGINAL_HTML;
+    const clip: TimelineElement = {
+      id: "clip",
+      domId: "clip",
+      tag: "div",
+      start: 0,
+      duration: 2,
+      track: 0,
+    };
+
+    const { timelineEditing, bannerHost } = mountHost(clip, iframe);
+
+    await act(async () => {
+      await expect(
+        timelineEditing.handleTimelineElementMove(clip, { start: 5, track: 0 }),
+      ).rejects.toBeInstanceOf(StudioFileConflictError);
+    });
+
+    expect(bannerHost.textContent).toContain("changed outside Studio");
+  });
+});

package/src/index.ts

@@ -1,5 +1,36 @@
+// UI primitives
+export { Button, buttonBase, buttonVariants } from "./components/ui/Button";
+export type { ButtonSize, ButtonVariant, PreviewState } from "./components/ui/Button";
+export { IconButton } from "./components/ui/IconButton";
+export { Tab, TabPanel, Tabs, TabsList } from "./components/ui/Tabs";
+export { Tooltip } from "./components/ui/Tooltip";
+export { cn } from "./components/ui/cn";
+export {
+  ContextMenu,
+  Menu,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  popupSurface,
+} from "./components/ui/Menu";
+export type { MenuItemTone, PopupPreviewState } from "./components/ui/Menu";
+export { Popover } from "./components/ui/Popover";
+export { Input, fieldBase, fieldText } from "./components/ui/Input";
+export type { InputProps } from "./components/ui/Input";
+export { NumberField } from "./components/ui/NumberField";
+export type { NumberFieldProps } from "./components/ui/NumberField";
+export { Select } from "./components/ui/Select";
+export type { SelectOption, SelectProps } from "./components/ui/Select";
+export { Slider } from "./components/ui/Slider";
+export type { SliderProps } from "./components/ui/Slider";
+export { Toggle } from "./components/ui/Toggle";
+export type { ToggleProps } from "./components/ui/Toggle";
+
 // NLE Layout
 export { EditorShell } from "./components/EditorShell";
+export type { EditorShellProps } from "./components/EditorShell";
 export { NLEPreview } from "./components/nle/NLEPreview";
 export { CompositionBreadcrumb } from "./components/nle/CompositionBreadcrumb";
 export type { CompositionLevel } from "./components/nle/CompositionBreadcrumb";
@@ -19,6 +50,10 @@ export {
 } from "./player";
 export type { TimelineElement } from "./player";
 
+// Host overlays: draw over the preview in composition coordinates (see EditorShellProps.gestureOverlay)
+export { usePreviewCompositionRect } from "./components/editor/usePreviewCompositionRect";
+export type { PreviewCompositionRect } from "./components/editor/usePreviewCompositionRect";
+
 // Editor
 export { SourceEditor } from "./components/editor/SourceEditor";
 export { PropertyPanel } from "./components/editor/PropertyPanel";
@@ -37,6 +72,22 @@ export {
 } from "./components/editor/domEditingAgentPrompt";
 export type { AgentPromptElementInfo } from "./components/editor/domEditingAgentPrompt";
 
+// Render queue
+export { RenderQueue } from "./components/renders/RenderQueue";
+export type { RenderQueueProps, CompositionDimensions } from "./components/renders/RenderQueue";
+export { useRenderQueue } from "./components/renders/useRenderQueue";
+export type { FfmpegStatus } from "./components/renders/useFfmpegStatus";
+export type {
+  RenderJob,
+  ResolutionPreset,
+  StartRenderOptions,
+} from "./components/renders/useRenderQueue";
+export {
+  getPersistedRenderSettings,
+  persistRenderSettings,
+} from "./components/renders/renderSettings";
+export type { PersistedRenderSettings } from "./components/renders/renderSettings";
+
 // Hooks
 export { useElementPicker } from "./hooks/useElementPicker";
 export type { PickedElement } from "./hooks/useElementPicker";
@@ -45,3 +96,39 @@ export type { PickedElement } from "./hooks/useElementPicker";
 export { resolveSourceFile, applyPatch } from "./utils/sourcePatcher";
 export type { PatchOperation } from "./utils/sourcePatcher";
 export { parseStyleString, mergeStyleIntoTag, findElementBlock } from "./utils/htmlEditor";
+
+// Timeline editing: Studio's own hand-edit path, undo/redo, the
+// etag-guarded writer and the conflict banner, for a host mounting the
+// timeline outside EditorShell.
+export { usePersistentEditHistory } from "./hooks/usePersistentEditHistory";
+export type { UsePersistentEditHistoryOptions } from "./hooks/usePersistentEditHistory";
+export { useTimelineEditing } from "./hooks/useTimelineEditing";
+export type { UseTimelineEditingOptions } from "./hooks/useTimelineEditingTypes";
+// A host's own waitForPendingDomEditSaves must also call this, or undo/redo
+// can race a write still in flight (see useTrackPendingTimelineEdit.ts).
+export { flushStudioPendingEdits } from "./utils/studioPendingEdits";
+export type { StudioPendingEditsDrainResult } from "./utils/studioPendingEdits";
+export type {
+  CanEditTimelineElement,
+  TimelineEditPermission,
+} from "./hooks/timelineEditPermission";
+export { useEditHistoryActions } from "./hooks/useEditHistoryActions";
+export type {
+  EditHistoryHandle,
+  UseEditHistoryActionsOptions,
+} from "./hooks/useEditHistoryActions";
+export { useProjectFileWriter } from "./hooks/useProjectFileWriter";
+export type { UseProjectFileWriterOptions } from "./hooks/useProjectFileWriter";
+// A host's writeProjectFile throws this on a 409; catch it to know when
+// to show ExternalFileConflictBanner.
+export { StudioFileConflictError } from "./utils/studioSaveDiagnostics";
+export { ExternalFileConflictBanner } from "./components/ExternalFileConflictBanner";
+export type {
+  ExternalFileChangeCoordinatorHandle,
+  ExternalFileChangeBlockedState,
+} from "./hooks/useExternalFileChangeCoordinator";
+export { TimelinePane } from "./components/nle/TimelinePane";
+export type { TimelinePaneProps } from "./components/nle/TimelinePane";
+export { TimelineEditProvider } from "./contexts/TimelineEditContext";
+export type { TimelineEditCallbacks } from "./player/components/timelineCallbacks";
+export type { BlockedTimelineEditIntent } from "./player/components/timelineEditing";

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

@@ -29,7 +29,7 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
 }: AutomationSelectionMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
   const row =
-    "block w-full px-2 py-1 text-left text-[11px] text-panel-text-1 hover:bg-panel-bg-3 disabled:opacity-40";
+    "block w-full px-2 py-1 text-left text-[11px] text-panel-text-1 hover:bg-panel-hover disabled:opacity-40";
   // Same edge-clamping precedent as TrackGapContextMenu: without it a
   // right-click near the bottom/right of the timeline renders this menu
   // partially off-screen.
@@ -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"}

package/src/player/components/ShortcutsPanel.tsx

@@ -153,7 +153,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
   );
 
   return (
-    <div ref={shortcutsPanelRef} className="relative flex-shrink-0">
+    <div ref={shortcutsPanelRef} className="relative shrink-0">
       <Tooltip label="Shortcuts and tools">
         <button
           ref={triggerRef}
@@ -192,7 +192,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           // Deliberately NOT aria-modal. This is a non-modal disclosure: focus is
           // not trapped and the rest of the editor stays operable, so claiming
           // modality would make assistive tech treat the whole app as inert.
-          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto outline-none"
+          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto outline-hidden"
           style={{
             background: "#161618",
             border: "1px solid rgba(255,255,255,0.08)",
@@ -212,7 +212,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                 pattern="[0-9]*"
                 aria-label="Jump to frame"
                 placeholder="frame number"
-                className="h-6 flex-1 rounded border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-none transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60"
+                className="h-6 flex-1 rounded-sm border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-hidden transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60"
                 onKeyDown={handleJumpKeyDown}
                 onBlur={commitJumpFrame}
               />
@@ -220,7 +220,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                 <button
                   type="submit"
                   disabled={disabled}
-                  className="h-6 px-2 rounded border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40"
+                  className="h-6 px-2 rounded-sm border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40"
                 >
                   Go
                 </button>
@@ -236,7 +236,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
                   <span
-                    className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
+                    className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
                     style={{ background: "rgba(255,255,255,0.05)" }}
                   >
                     I
@@ -253,7 +253,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                         <button
                           type="button"
                           onClick={() => setInPoint(null)}
-                          className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
+                          className="w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors"
                           aria-label="Clear in-point"
                         >
                           <svg
@@ -277,7 +277,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
                   <span
-                    className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
+                    className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
                     style={{ background: "rgba(255,255,255,0.05)" }}
                   >
                     O
@@ -294,7 +294,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                         <button
                           type="button"
                           onClick={() => setOutPoint(null)}
-                          className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
+                          className="w-4 h-4 flex items-center justify-center rounded-sm text-neutral-500 hover:text-neutral-200 transition-colors"
                           aria-label="Clear out-point"
                         >
                           <svg
@@ -328,7 +328,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                   {section.hints.map((hint) => (
                     <div key={hint.key} className="flex items-center gap-3">
                       <span
-                        className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center"
+                        className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center"
                         style={{ background: "rgba(255,255,255,0.05)" }}
                       >
                         {hint.key}

package/src/player/components/SpeedMenu.tsx

@@ -23,7 +23,7 @@ export const SpeedMenu = memo(function SpeedMenu({
   const speedMenuContainerRef = useContextMenuDismiss(closeMenu);
 
   return (
-    <div ref={speedMenuContainerRef} className="relative flex-shrink-0">
+    <div ref={speedMenuContainerRef} className="relative shrink-0">
       <Tooltip label="Playback speed">
         <button
           type="button"
@@ -57,10 +57,8 @@ export const SpeedMenu = memo(function SpeedMenu({
                   setPlaybackRate(rate);
                   setShowSpeedMenu(false);
                 }}
-                className={`block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors outline-none focus-visible:bg-white/[0.04] ${
-                  isCurrent
-                    ? "text-neutral-50 bg-white/[0.06]"
-                    : "text-neutral-500 hover:bg-white/[0.04]"
+                className={`block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors outline-hidden focus-visible:bg-white/4 ${
+                  isCurrent ? "text-neutral-50 bg-white/6" : "text-neutral-500 hover:bg-white/4"
                 }`}
               >
                 {rate}x