@hyperframes/studio 0.8.49 → 0.8.51

package/src/components/nle/PreviewPane.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PreviewPane } from "./PreviewPane";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../editor/PreviewGuides", () => ({ PreviewGuides: () => <i data-testid="guides" /> }));
+vi.mock("../../player", () => ({ PlayerControls: () => null }));
+vi.mock("./NLEPreview", () => ({ NLEPreview: () => null }));
+vi.mock("./CompositionBreadcrumb", () => ({ CompositionBreadcrumb: () => null }));
+vi.mock("./AssetPreviewOverlay", () => ({ AssetPreviewOverlay: () => null }));
+vi.mock("./usePreviewBlockDrop", () => ({
+  usePreviewBlockDrop: () => ({
+    isDragOver: false,
+    handleDragEnter: vi.fn(),
+    handleDragOver: vi.fn(),
+    handleDragLeave: vi.fn(),
+    handleDrop: vi.fn(),
+  }),
+}));
+vi.mock("./NLEContext", () => ({
+  useNLEContext: () => ({
+    projectId: "p",
+    iframeRef: { current: null },
+    togglePlay: vi.fn(),
+    seek: vi.fn(),
+    onIframeLoad: vi.fn(),
+    compositionStack: [{ previewUrl: undefined }],
+    handleNavigateComposition: vi.fn(),
+    setCompositionLoading: vi.fn(),
+    timelineDisabled: false,
+    hasLoadedOnceRef: { current: false },
+    previewCompositionSize: null,
+    setPreviewCompositionSize: vi.fn(),
+  }),
+}));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("PreviewPane", () => {
+  it("draws the guides in the pane itself, not through the previewOverlay slot", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    act(() => createRoot(host).render(<PreviewPane />));
+    expect(host.querySelector('[data-testid="guides"]')).not.toBeNull();
+  });
+});

package/src/components/nle/PreviewPane.tsx

@@ -6,6 +6,7 @@ import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
 import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
 import { useNLEContext } from "./NLEContext";
 import { AssetPreviewOverlay } from "./AssetPreviewOverlay";
+import { PreviewGuides } from "../editor/PreviewGuides";
 
 function subscribeFullscreen(cb: () => void) {
   document.addEventListener("fullscreenchange", cb);
@@ -138,15 +139,16 @@ export function PreviewPane({
             onCompositionSizeChange={setPreviewCompositionSize}
           />
           {previewDragOver && (
-            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
+            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/4 pointer-events-none" />
           )}
           <AssetPreviewOverlay />
         </div>
+        <PreviewGuides iframeRef={iframeRef} />
         {!isFullscreen && previewOverlay}
       </div>
       {/* Transport row: no own background or border — the controls sit flat on
           the preview panel's surface (CapCut-style). */}
-      <div className="flex-shrink-0">
+      <div className="shrink-0">
         {!isFullscreen && compositionStack.length > 1 && (
           <CompositionBreadcrumb stack={compositionStack} onNavigate={handleNavigateComposition} />
         )}

package/src/components/nle/TimelinePane.tsx

@@ -102,6 +102,12 @@ export interface TimelinePaneProps {
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
+  /** Copy/paste/duplicate act on the store's own selection, not a passed
+   *  element, so unlike onDeleteElement they need no composition-basis wrapper. */
+  onCopyClip?: () => boolean;
+  onPasteClip?: () => Promise<void>;
+  onDuplicateClip?: () => Promise<boolean>;
+  canPasteClip?: () => boolean;
 }
 
 // fallow-ignore-next-line complexity
@@ -116,6 +122,10 @@ export function TimelinePane({
   onCompositionDrop,
   onBlockedEditAttempt,
   onSelectTimelineElement,
+  onCopyClip,
+  onPasteClip,
+  onDuplicateClip,
+  canPasteClip,
 }: TimelinePaneProps) {
   const {
     seek,
@@ -256,7 +266,7 @@ export function TimelinePane({
       {/* Timeline section — inner padding (not margin) keeps the divider's
           height math exact while giving the panel a gap from the shell edges. */}
       <div
-        className="relative flex flex-col flex-shrink-0 px-px pb-px"
+        className="relative flex flex-col shrink-0 px-px pb-px"
         style={{ height: timelineH }}
         aria-disabled={timelineDisabled || undefined}
       >
@@ -270,7 +280,7 @@ export function TimelinePane({
             }
           }}
         >
-          <div className="flex-shrink-0">{timelineToolbar}</div>
+          <div className="shrink-0">{timelineToolbar}</div>
           <Timeline
             sessionEpoch={timelineSessionEpoch}
             onSeek={seek}
@@ -288,9 +298,13 @@ export function TimelinePane({
             onBlockedEditAttempt={onBlockedEditAttempt}
             onSplitElement={handleSplitElement}
             onSelectElement={onSelectTimelineElement}
+            onCopyClip={onCopyClip}
+            onPasteClip={onPasteClip}
+            onDuplicateClip={onDuplicateClip}
+            canPasteClip={canPasteClip}
           />
         </div>
-        {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}
+        {timelineFooter && <div className="shrink-0">{timelineFooter}</div>}
         {timelineDisabled && (
           <div
             className="absolute inset-0 z-30 cursor-not-allowed bg-black/18 flex items-center justify-center"

package/src/components/nle/TimelineResizeDivider.tsx

@@ -79,7 +79,7 @@ export function TimelineResizeDivider({
         (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H,
       )}
       tabIndex={0}
-      className="group relative h-[3px] flex-shrink-0 cursor-row-resize z-10 outline-none focus-visible:bg-studio-accent/20"
+      className="group relative h-[3px] shrink-0 cursor-row-resize z-10 outline-hidden focus-visible:bg-studio-accent/20"
       style={{ touchAction: "none" }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
@@ -93,7 +93,7 @@ export function TimelineResizeDivider({
           the 24px WCAG 2.2 (2.5.8) target because that is all the dead space
           there is: 28px transport buttons sit above and 28px toolbar buttons
           below, and silently stealing their clicks is the worse bug. */}
-      <div className="absolute inset-x-0 -top-[4px] h-[10px]" />
+      <div className="absolute inset-x-0 top-[-4px] h-[10px]" />
       {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
       <div className="h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" />
     </div>

package/src/components/nle/useCanvasZOrderTimelineMirror.test.tsx

@@ -24,7 +24,7 @@ import {
 afterEach(() => {
   document.body.innerHTML = "";
   // Wrapped in act: mounted harnesses subscribe to the store via
-  // useExpandedTimelineElements, so the reset re-renders them.
+  // useTimelineRowElements, so the reset re-renders them.
   act(() => usePlayerStore.getState().setElements([]));
 });
 

package/src/components/nle/useCanvasZOrderTimelineMirror.ts

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 import { usePlayerStore } from "../../player";
-import { useExpandedTimelineElements } from "../../player/hooks/useExpandedTimelineElements";
+import { useTimelineRowElements } from "../../player/hooks/useTimelineRowElements";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import {
   displayTrackOrder,
@@ -41,7 +41,7 @@ export interface MirrorZOrderInput {
  * commitZMirrorLaneMove) — the shared key is unique per gesture
  * (zReorderCoalesceKey's gesture seq), so the fold stays gesture-scoped.
  *
- * Element source: `useExpandedTimelineElements()` — the same expanded display
+ * Element source: `useTimelineRowElements()` — the same expanded display
  * set the Timeline renders and the resolver expects (post-normalizeToZones
  * lanes, expanded sub-comp children on their synthetic rows). No new expansion
  * is built here.
@@ -141,7 +141,7 @@ function useMirrorLaneMoveCommit(): (
   coalesceKey: string,
   resolveMove: (element: TimelineElement, elements: TimelineElement[]) => ZMirrorLaneMove,
 ) => Promise<boolean> {
-  const elements = useExpandedTimelineElements();
+  const elements = useTimelineRowElements();
   const elementsRef = useRef(elements);
   elementsRef.current = elements;
   const { onMoveElements } = useTimelineEditContextOptional();

package/src/components/panels/SlideshowPanel.tsx

@@ -435,7 +435,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
             type="button"
             disabled={retrying}
             onClick={handleRetryPersist}
-            className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white enabled:hover:bg-red-500 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors"
+            className="px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white enabled:hover:bg-red-500 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors"
           >
             {retrying ? "Retrying…" : "Retry"}
           </button>
@@ -447,7 +447,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
             type="button"
             onClick={handleUndo}
             title="Undo last slideshow edit (⌘Z)"
-            className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.97] transition-colors"
+            className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.97] transition-colors"
           >
             Undo ({undoDepth})
           </button>

package/src/components/panels/SlideshowSubPanels.tsx

@@ -90,11 +90,11 @@ export function SlideList({
               checked={isSlide}
               onChange={() => onToggle(scene.id)}
               onClick={(e) => e.stopPropagation()}
-              className="accent-studio-accent flex-shrink-0"
+              className="accent-studio-accent shrink-0"
             />
             <span className="flex-1 truncate">{scene.label || scene.id}</span>
             {isSlide && (
-              <span className="flex gap-0.5 flex-shrink-0">
+              <span className="flex gap-0.5 shrink-0">
                 <button
                   type="button"
                   aria-label="Move slide up"
@@ -162,7 +162,7 @@ export function SlideInspector({
       <div className="flex flex-col gap-1">
         <label className="text-[11px] text-neutral-400">Notes</label>
         <textarea
-          className="bg-neutral-800 border border-neutral-700 rounded px-2 py-1.5 text-[11px] text-white resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-none"
+          className="bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1.5 text-[11px] text-white resize-none placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden"
           rows={3}
           placeholder="Speaker notes or script..."
           value={slide?.notes ?? ""}
@@ -174,7 +174,7 @@ export function SlideInspector({
           <span className="text-[11px] text-neutral-400">Fragment hold-points</span>
           <button
             type="button"
-            className="text-[10px] px-2 py-0.5 rounded bg-neutral-700 hover:bg-neutral-600 text-neutral-200 transition-colors"
+            className="text-[10px] px-2 py-0.5 rounded-sm bg-neutral-700 hover:bg-neutral-600 text-neutral-200 transition-colors"
             onClick={onMarkFragment}
             title={`Mark ${currentTime.toFixed(2)}s as hold-point`}
           >
@@ -186,7 +186,7 @@ export function SlideInspector({
             {fragments.map((t, i) => (
               <span
                 key={`frag-${i}`}
-                className="inline-flex items-center gap-1 bg-neutral-700 rounded px-1.5 py-0.5 text-[10px] text-neutral-200"
+                className="inline-flex items-center gap-1 bg-neutral-700 rounded-sm px-1.5 py-0.5 text-[10px] text-neutral-200"
               >
                 {t.toFixed(2)}s
                 <button
@@ -249,7 +249,7 @@ export function BranchTree({
         <input
           id={inputId}
           type="text"
-          className="flex-1 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-none"
+          className="flex-1 bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden"
           placeholder="New branch name..."
           value={newLabel}
           onChange={(e) => setNewLabel(e.target.value)}
@@ -260,7 +260,7 @@ export function BranchTree({
         />
         <button
           type="button"
-          className="px-2 py-1 rounded bg-neutral-700 hover:bg-neutral-600 text-[11px] text-neutral-200 transition-colors flex-shrink-0"
+          className="px-2 py-1 rounded-sm bg-neutral-700 hover:bg-neutral-600 text-[11px] text-neutral-200 transition-colors shrink-0"
           onClick={handleCreate}
         >
           Add
@@ -322,11 +322,11 @@ function BranchItem({
   }, [draft, onRename, seq.id, seq.label]);
 
   return (
-    <div className="border border-neutral-700/60 rounded p-2 flex flex-col gap-2">
+    <div className="border border-neutral-700/60 rounded-sm p-2 flex flex-col gap-2">
       <div className="flex items-center gap-1">
         {editing ? (
           <input
-            className="flex-1 bg-neutral-800 border border-neutral-600 rounded px-1.5 py-0.5 text-[11px] text-white focus:border-studio-accent/60 focus:outline-none"
+            className="flex-1 bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-0.5 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden"
             value={draft}
             autoFocus
             onChange={(e) => setDraft(e.target.value)}
@@ -364,7 +364,7 @@ function BranchItem({
         </button>
       </div>
       {confirmingDelete && (
-        <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex flex-col gap-1 rounded-sm">
+        <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex flex-col gap-1 rounded-xs">
           <span className="text-[10px] text-red-400">
             Delete branch &ldquo;{seq.label}&rdquo;
             {seq.slides.length > 0
@@ -379,14 +379,14 @@ function BranchItem({
                 setConfirmingDelete(false);
                 onDelete(seq.id);
               }}
-              className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors"
+              className="px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors"
             >
               Delete
             </button>
             <button
               type="button"
               onClick={() => setConfirmingDelete(false)}
-              className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+              className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 transition-colors"
             >
               Cancel
             </button>
@@ -407,7 +407,7 @@ function BranchItem({
                 aria-label={`Assign ${scene.label || scene.id} to branch ${seq.label}`}
                 checked={assigned}
                 onChange={(e) => onAssign(seq.id, scene.id, e.target.checked)}
-                className="accent-studio-accent flex-shrink-0"
+                className="accent-studio-accent shrink-0"
               />
               {assigned ? (
                 <button
@@ -497,7 +497,7 @@ export function HotspotTool({
         <label className="text-[11px] text-neutral-400">Hotspot label</label>
         <input
           type="text"
-          className="bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-none"
+          className="bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white placeholder-neutral-600 focus:border-studio-accent/60 focus:outline-hidden"
           placeholder="Button label..."
           value={hotspotLabel}
           onChange={(e) => setHotspotLabel(e.target.value)}
@@ -505,7 +505,7 @@ export function HotspotTool({
         />
         <label className="text-[11px] text-neutral-400">Target branch</label>
         <select
-          className="bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-none"
+          className="bg-neutral-800 border border-neutral-700 rounded-sm px-2 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden"
           value={targetSequenceId}
           onChange={(e) => setTargetSequenceId(e.target.value)}
           aria-label="Target branch sequence"
@@ -527,7 +527,7 @@ export function HotspotTool({
                 ? "Choose a target branch first"
                 : undefined
           }
-          className="px-3 py-1.5 rounded bg-studio-accent/80 enabled:hover:bg-studio-accent enabled:active:scale-[0.98] text-white text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-3 py-1.5 rounded-sm bg-studio-accent/80 enabled:hover:bg-studio-accent enabled:active:scale-[0.98] text-white text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
           onClick={handleMakeHotspot}
         >
           Make hotspot
@@ -540,7 +540,10 @@ export function HotspotTool({
           {hotspots.map((h) => {
             const seqLabel = sequences.find((s) => s.id === h.target)?.label ?? h.target;
             return (
-              <div key={h.id} className="flex items-center gap-2 bg-neutral-800 rounded px-2 py-1">
+              <div
+                key={h.id}
+                className="flex items-center gap-2 bg-neutral-800 rounded-sm px-2 py-1"
+              >
                 <span className="flex-1 text-[11px] text-neutral-200 truncate">
                   {h.label} → <span className="text-neutral-400">{seqLabel}</span>
                 </span>

package/src/components/panels/VariablesBindElement.tsx

@@ -227,7 +227,7 @@ export function VariablesBindElement({
             <button
               type="button"
               onClick={() => setActiveKey(null)}
-              className="h-6 rounded px-2 text-[10px] text-neutral-500 hover:text-neutral-300"
+              className="h-6 rounded-sm px-2 text-[10px] text-neutral-500 hover:text-neutral-300"
             >
               Cancel
             </button>
@@ -238,7 +238,7 @@ export function VariablesBindElement({
                 setActiveKey(null);
                 onBind(active, trimmedId);
               }}
-              className="h-6 rounded bg-neutral-800 px-2 text-[10px] font-medium text-neutral-200 hover:bg-neutral-700 disabled:cursor-not-allowed disabled:opacity-40"
+              className="h-6 rounded-sm bg-neutral-800 px-2 text-[10px] font-medium text-neutral-200 hover:bg-neutral-700 disabled:cursor-not-allowed disabled:opacity-40"
             >
               {existingDecl ? "Bind anyway" : "Bind"}
             </button>

package/src/components/panels/VariablesDeclarationForm.tsx

@@ -304,14 +304,14 @@ export function DeclarationForm({
         <button
           type="button"
           onClick={onCancel}
-          className="h-6 rounded px-2 text-[10px] text-neutral-500 hover:text-neutral-300"
+          className="h-6 rounded-sm px-2 text-[10px] text-neutral-500 hover:text-neutral-300"
         >
           Cancel
         </button>
         <button
           type="button"
           onClick={submit}
-          className="h-6 rounded bg-neutral-800 px-2 text-[10px] font-medium text-neutral-200 hover:bg-neutral-700"
+          className="h-6 rounded-sm bg-neutral-800 px-2 text-[10px] font-medium text-neutral-200 hover:bg-neutral-700"
         >
           {submitLabel}
         </button>

package/src/components/panels/VariablesOtherCompositions.tsx

@@ -51,7 +51,7 @@ function CompositionSection({
               <span className="truncate text-[10px] font-medium text-neutral-300">
                 {decl.label}
               </span>
-              <span className="rounded bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500">
+              <span className="rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500">
                 {decl.type}
               </span>
               <span className="ml-auto flex items-center gap-1">

package/src/components/panels/VariablesPanel.tsx

@@ -96,12 +96,12 @@ function VariableRow({
     <div className="space-y-1.5 rounded-lg border border-neutral-800/70 p-2">
       <div className="flex items-center gap-1.5">
         <span className="truncate text-[10px] font-medium text-neutral-300">{decl.label}</span>
-        <span className="rounded bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500">
+        <span className="rounded-sm bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500">
           {decl.type}
         </span>
         {unused && (
           <span
-            className="rounded bg-amber-900/40 px-1 py-px text-[8px] text-amber-400"
+            className="rounded-sm bg-amber-900/40 px-1 py-px text-[8px] text-amber-400"
             title="No script reads this variable"
           >
             unused
@@ -189,7 +189,7 @@ function PreviewModeHeader({
         <button
           type="button"
           onClick={onReset}
-          className="h-6 rounded px-2 text-[10px] text-neutral-400 hover:text-neutral-200"
+          className="h-6 rounded-sm px-2 text-[10px] text-neutral-400 hover:text-neutral-200"
         >
           Reset
         </button>

package/src/components/panels/VariablesValueControls.tsx

@@ -14,7 +14,7 @@ import type {
 } from "@hyperframes/sdk";
 
 export const VARIABLES_INPUT_CLASS =
-  "w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700";
+  "w-full bg-neutral-900 border border-neutral-800 rounded-sm px-2 py-1 text-[10px] text-neutral-200 focus:outline-hidden focus:border-neutral-700";
 
 /** Text input that drafts locally and commits on blur/Enter. */
 function DraftTextInput({
@@ -106,7 +106,7 @@ function ColorControl({
           if (draft !== null && draft !== colorValue) onCommit(draft);
           setDraft(null);
         }}
-        className="h-6 w-6 cursor-pointer rounded border border-neutral-700 bg-transparent"
+        className="h-6 w-6 cursor-pointer rounded-sm border border-neutral-700 bg-transparent"
       />
       <DraftTextInput
         value={colorValue}

package/src/components/renders/FfmpegRequiredNotice.tsx

@@ -8,7 +8,7 @@ const CUE_MS = 1600;
 // Matches the focus treatment every other button in this panel uses. A control
 // the keyboard can reach but not see focus on is unusable without a mouse.
 const FOCUS_RING =
-  "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent";
+  "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent";
 
 /**
  * Shown above Export when the dev server reports no usable FFmpeg.
@@ -81,7 +81,7 @@ export const FfmpegRequiredNotice = memo(function FfmpegRequiredNotice({
 
       {status.command ? (
         <div className="flex items-center gap-1.5">
-          <code className="flex-1 overflow-x-auto whitespace-nowrap rounded-sm bg-black/40 px-2 py-1 text-[10px] text-panel-text-2">
+          <code className="flex-1 overflow-x-auto whitespace-nowrap rounded-xs bg-black/40 px-2 py-1 text-[10px] text-panel-text-2">
             {status.command}
           </code>
           {/* Fixed width so swapping the label to "Copied" cannot shift the
@@ -89,7 +89,7 @@ export const FfmpegRequiredNotice = memo(function FfmpegRequiredNotice({
           <button
             type="button"
             onClick={() => void copy(status.command ?? "")}
-            className={`h-6 w-14 flex-shrink-0 rounded-sm border border-amber-500/30 text-[10px] font-medium text-amber-200 transition-colors hover:bg-amber-500/20 active:scale-[0.98] ${FOCUS_RING}`}
+            className={`h-6 w-14 shrink-0 rounded-xs border border-amber-500/30 text-[10px] font-medium text-amber-200 transition-colors hover:bg-amber-500/20 active:scale-[0.98] ${FOCUS_RING}`}
           >
             {copied ? "Copied" : "Copy"}
           </button>
@@ -107,7 +107,7 @@ export const FfmpegRequiredNotice = memo(function FfmpegRequiredNotice({
           type="button"
           onClick={onRecheck}
           disabled={checking}
-          className={`rounded-sm py-0.5 text-[10px] font-medium text-amber-200 underline-offset-2 transition-colors hover:underline disabled:opacity-50 ${FOCUS_RING}`}
+          className={`rounded-xs py-0.5 text-[10px] font-medium text-amber-200 underline-offset-2 transition-colors hover:underline disabled:opacity-50 ${FOCUS_RING}`}
         >
           {checking ? "Checking…" : "Recheck"}
         </button>
@@ -115,7 +115,7 @@ export const FfmpegRequiredNotice = memo(function FfmpegRequiredNotice({
           href={DOWNLOAD_URL}
           target="_blank"
           rel="noreferrer"
-          className={`rounded-sm py-0.5 text-[10px] text-panel-text-2 underline-offset-2 transition-colors hover:text-panel-text-0 hover:underline ${FOCUS_RING}`}
+          className={`rounded-xs py-0.5 text-[10px] text-panel-text-2 underline-offset-2 transition-colors hover:text-panel-text-0 hover:underline ${FOCUS_RING}`}
         >
           Other install options
         </a>

package/src/components/renders/RenderQueue.test.tsx

@@ -81,6 +81,13 @@ function exportButtonIn(host: HTMLElement): HTMLButtonElement {
   return button;
 }
 
+describe("RenderQueue Export button", () => {
+  it("leaves the font size to the shared Button", () => {
+    const host = mountRenderQueue(vi.fn());
+    expect(exportButtonIn(host).className).not.toMatch(/text-\[/);
+  });
+});
+
 describe("RenderQueue FFmpeg gate", () => {
   it("refuses Export and shows the install command when the server reports no FFmpeg", () => {
     ffmpegStatus = {

package/src/components/renders/RenderQueue.tsx

@@ -207,7 +207,7 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
         onFocus={show}
         onBlur={hide}
         onClick={() => setOpen((prev) => !prev)}
-        className="flex items-center justify-center p-0.5 -m-0.5 rounded text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
+        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
       >
         <svg
           width="12"
@@ -232,7 +232,7 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
             role="tooltip"
             onPointerEnter={show}
             onPointerLeave={hide}
-            className="fixed w-52 p-2 rounded bg-panel-input border border-neutral-700 shadow-lg z-[200]"
+            className="fixed w-52 p-2 rounded-sm bg-panel-input border border-neutral-700 shadow-lg z-200"
             style={{ left: position?.left ?? -9999, top: position?.top ?? -9999 }}
           >
             <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
@@ -303,7 +303,7 @@ function FormatExportButton({
   const showQuality = format !== "mov";
 
   const selectCls =
-    "h-7 w-full px-2 text-[11px] bg-panel-input rounded-md text-panel-text-1 outline-none cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
+    "h-7 w-full px-2 text-[11px] bg-panel-input rounded-md text-panel-text-1 outline-hidden cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
 
   return (
     <div className="flex flex-col gap-3">
@@ -407,7 +407,7 @@ function FormatExportButton({
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
           void onStartRender(format, quality, outputResolution, fps);
         }}
-        className="w-full text-[11px] font-semibold"
+        className="w-full font-semibold"
       >
         {isRendering ? "Rendering…" : "Export"}
       </Button>
@@ -454,7 +454,7 @@ export const RenderQueue = memo(function RenderQueue({
 
   return (
     <div className="flex flex-col h-full">
-      <div className="px-3 py-3 border-b border-panel-border flex-shrink-0">
+      <div className="px-3 py-3 border-b border-panel-border shrink-0">
         <FormatExportButton
           onStartRender={onStartRender}
           isRendering={isRendering}
@@ -476,7 +476,7 @@ export const RenderQueue = memo(function RenderQueue({
             <button
               onClick={onDismissActionError}
               aria-label="Dismiss error"
-              className="text-[10px] text-panel-text-4 hover:text-panel-text-2 flex-shrink-0"
+              className="text-[10px] text-panel-text-4 hover:text-panel-text-2 shrink-0"
             >
               ✕
             </button>

package/src/components/renders/RenderQueueItem.tsx

@@ -77,8 +77,8 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           disabled={!isComplete}
           aria-label={isComplete ? `Open ${job.filename} in a new tab` : undefined}
           className={[
-            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input flex-shrink-0 relative",
-            "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent",
+            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input shrink-0 relative",
+            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent",
             isComplete ? "cursor-pointer" : "cursor-default",
           ].join(" ")}
         >
@@ -130,7 +130,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
               {job.filename}
             </span>
             {job.durationMs && (
-              <span className="text-[9px] text-panel-text-5 flex-shrink-0">
+              <span className="text-[9px] text-panel-text-5 shrink-0">
                 {formatDuration(job.durationMs)}
               </span>
             )}
@@ -171,7 +171,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         </div>
 
         {/* Actions — always visible to prevent layout shifts */}
-        <div className="flex items-center gap-1.5 flex-shrink-0">
+        <div className="flex items-center gap-1.5 shrink-0">
           {isRendering ? (
             <Button
               size="sm"
@@ -211,7 +211,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             <>
               <button
                 onClick={isComplete ? handleDownload : undefined}
-                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent ${
+                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent ${
                   isComplete
                     ? "text-panel-text-5 hover:text-panel-accent"
                     : "text-panel-text-5/30 cursor-default"
@@ -240,7 +240,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                   e.stopPropagation();
                   setConfirmingDelete(true);
                 }}
-                className="p-1.5 min-w-6 min-h-6 rounded text-panel-text-5 hover:text-red-400 transition-colors outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent"
+                className="p-1.5 min-w-6 min-h-6 rounded-sm text-panel-text-5 hover:text-red-400 transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
                 title="Delete render file"
                 aria-label={`Delete ${job.filename}`}
               >