@hyperframes/studio 0.8.53-desktop.0 → 0.8.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.53-desktop.0",
+  "version": "0.8.54",
   "description": "",
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
       "types": "./dist/styles/tailwind-preset.d.ts"
     },
     "./theme.css": "./src/styles/theme.css",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -50,11 +51,11 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.53-desktop.0",
-    "@hyperframes/core": "0.8.53-desktop.0",
-    "@hyperframes/studio-server": "0.8.53-desktop.0",
-    "@hyperframes/sdk": "0.8.53-desktop.0",
-    "@hyperframes/player": "0.8.53-desktop.0"
+    "@hyperframes/core": "0.8.54",
+    "@hyperframes/parsers": "0.8.54",
+    "@hyperframes/player": "0.8.54",
+    "@hyperframes/studio-server": "0.8.54",
+    "@hyperframes/sdk": "0.8.54"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -70,7 +71,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.53-desktop.0"
+    "@hyperframes/producer": "0.8.54"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioHeader.tsx

@@ -17,7 +17,7 @@ export interface StudioHeaderProps {
   onExport?: () => void;
 }
 
-function HyperframesLogo() {
+export function HyperframesLogo() {
   // Full logo from logo-dark.svg (263×79): heygen label + gradient mark + hyperframes wordmark.
   // All fill="black" paths inverted to white for the dark header.
   const height = 28;

package/src/components/nle/TimelinePane.tsx

@@ -1,6 +1,6 @@
 import { useCallback, type ReactNode } from "react";
 import { Timeline } from "../../player";
-import type { TimelineElement } from "../../player";
+import type { TimelineElement, TimelineTimeRange } from "../../player";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
 import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
 import { trackStudioExpandedClipEdit } from "../../telemetry/events";
@@ -104,6 +104,7 @@ export interface TimelinePaneProps {
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
+  onRangeSelect?: (range: TimelineTimeRange | 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;
@@ -125,6 +126,7 @@ export function TimelinePane({
   onCompositionDrop,
   onBlockedEditAttempt,
   onSelectTimelineElement,
+  onRangeSelect,
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
@@ -282,6 +284,7 @@ export function TimelinePane({
           onBlockedEditAttempt={onBlockedEditAttempt}
           onSplitElement={handleSplitElement}
           onSelectElement={onSelectTimelineElement}
+          onRangeSelect={onRangeSelect}
           onCopyClip={onCopyClip}
           onPasteClip={onPasteClip}
           onDuplicateClip={onDuplicateClip}

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

@@ -3,7 +3,11 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi, type Mock } from "vitest";
-import { RenderQueue } from "./RenderQueue";
+import { RenderQueue, type StartRenderHandler } from "./RenderQueue";
+import { getPersistedRenderSettings } from "./renderSettings";
+import { buttonBase, buttonSizes, buttonVariants, cn } from "../ui";
+import { isTypingTarget } from "../../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 
 // Encoder availability arrives as a prop (useRenderQueue owns the probe), so
@@ -18,6 +22,9 @@ let root: Root | null = null;
 beforeEach(() => {
   ffmpegStatus = { ok: true };
   recheck.mockClear();
+  // The format, frame-rate and quality controls write through to the real
+  // store, so each case has to start from the shipped defaults.
+  localStorage.clear();
 });
 
 afterEach(() => {
@@ -26,7 +33,10 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function mountRenderQueue(onStartRender: Mock) {
+function mountRenderQueue(
+  onStartRender: Mock<StartRenderHandler>,
+  compositionDimensions = { width: 1920, height: 1080 },
+) {
   const host = document.createElement("div");
   document.body.append(host);
   root = createRoot(host);
@@ -39,7 +49,7 @@ function mountRenderQueue(onStartRender: Mock) {
         onClearCompleted={vi.fn()}
         onStartRender={onStartRender}
         isRendering={false}
-        compositionDimensions={{ width: 1920, height: 1080 }}
+        compositionDimensions={compositionDimensions}
         ffmpeg={ffmpegStatus}
         ffmpegChecking={false}
         onRecheckFfmpeg={recheck}
@@ -49,37 +59,135 @@ function mountRenderQueue(onStartRender: Mock) {
   return host;
 }
 
-describe("RenderQueue resolution submission", () => {
-  it("submits the canonical landscape 4K preset selected by the user", () => {
-    const onStartRender = vi.fn();
-    const host = mountRenderQueue(onStartRender);
-    const resolutionSelect = [...host.querySelectorAll("select")].find((select) =>
-      [...select.options].some((option) => option.textContent?.startsWith("4K")),
+/** Base UI moves focus a task later than React renders; happy-dom is no faster. */
+const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));
+
+function fire(el: Element, type: string, key?: string) {
+  const event =
+    key === undefined
+      ? new MouseEvent(type, { bubbles: true })
+      : new KeyboardEvent(type, { bubbles: true, key });
+  act(() => void el.dispatchEvent(event));
+}
+
+function triggerFor(host: HTMLElement, label: string): HTMLElement {
+  const trigger = host.querySelector<HTMLElement>(`[role="combobox"][aria-label="${label}"]`);
+  if (!trigger) throw new Error(`no select labelled ${label}`);
+  return trigger;
+}
+
+/** Opens a Select and arrows down `steps` items before committing, the way a keyboard user
+ * does. happy-dom does not synthesise the click Space would trigger, so it is dispatched here. */
+async function chooseByArrowing(trigger: HTMLElement, steps: number) {
+  fire(trigger, "keydown", " ");
+  fire(trigger, "keyup", " ");
+  act(() => trigger.click());
+  await settle();
+  for (let i = 0; i < steps; i += 1) {
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+  }
+  fire(document.activeElement ?? document.body, "keydown", "Enter");
+  await settle();
+}
+
+function exportButtonIn(host: HTMLElement): HTMLButtonElement {
+  const button = host.querySelector<HTMLButtonElement>('[data-testid="renders-export"]');
+  if (!button) throw new Error("export button did not render");
+  return button;
+}
+
+describe("RenderQueue controls", () => {
+  it("has no native select left in the panel", () => {
+    // R8. The four format / resolution / frame-rate / quality controls are the
+    // shared Select now; a native one would bring back an OS popup that no
+    // token can reach.
+    expect(mountRenderQueue(vi.fn()).querySelector("select")).toBeNull();
+  });
+
+  it("wears exactly the header Export's recipe, plus the full width", () => {
+    // AE3. Set equality, not "contains": the bug this replaces was an extra
+    // `text-[11px]` on this button, which `cn` resolved by dropping the size
+    // recipe's `text-step-12` and left the two Exports a type step apart.
+    const shared = cn(buttonBase, buttonVariants.primary, buttonSizes.md);
+    const classes = new Set(exportButtonIn(mountRenderQueue(vi.fn())).className.split(/\s+/));
+
+    expect(classes).toEqual(new Set([...shared.split(/\s+/), "w-full"]));
+  });
+
+  it("classifies the format Select the way it classified the native one (KTD13)", async () => {
+    const host = mountRenderQueue(vi.fn());
+    const reference = document.createElement("select");
+    document.body.append(reference);
+    await settle();
+
+    const trigger = triggerFor(host, "Format");
+
+    // Both true, not merely equal: two falses would agree and prove nothing.
+    expect(isTypingTarget(reference)).toBe(true);
+    expect(shouldIgnorePlaybackShortcutTarget(reference)).toBe(true);
+    expect(isTypingTarget(trigger)).toBe(isTypingTarget(reference));
+    expect(shouldIgnorePlaybackShortcutTarget(trigger)).toBe(
+      shouldIgnorePlaybackShortcutTarget(reference),
     );
-    if (!resolutionSelect) throw new Error("resolution selector did not render");
+  });
+
+  it("submits the canonical landscape 4K preset selected by the user", async () => {
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
+    const host = mountRenderQueue(onStartRender);
 
+    // Auto, 1080p, 4K: two steps down from the default.
+    await chooseByArrowing(triggerFor(host, "Resolution"), 2);
     act(() => {
-      resolutionSelect.value = "4k";
-      resolutionSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    const exportButton = [...host.querySelectorAll("button")].find(
-      (button) => button.textContent === "Export",
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+  });
+
+  it("refuses a resolution the composition cannot reach, and says why", async () => {
+    // 1080p on a 1280x720 comp is a 1.5x scale, which the producer rejects; the
+    // option stays listed (its label explains why) but the keyboard skips it.
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
+    const host = mountRenderQueue(onStartRender, { width: 1280, height: 720 });
+    const trigger = triggerFor(host, "Resolution");
+
+    fire(trigger, "keydown", " ");
+    fire(trigger, "keyup", " ");
+    act(() => trigger.click());
+    await settle();
+    const blocked = [...document.querySelectorAll('[role="option"]')].filter((option) =>
+      option.hasAttribute("data-disabled"),
     );
-    if (!exportButton) throw new Error("export button did not render");
+    expect(blocked).toHaveLength(1);
+    expect(blocked[0]?.textContent).toContain("not an integer scale of 1280×720");
+
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Enter");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Escape");
+    await settle();
     act(() => {
-      exportButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "auto", 30);
   });
-});
 
-function exportButtonIn(host: HTMLElement): HTMLButtonElement {
-  const button = [...host.querySelectorAll("button")].find((b) => b.textContent === "Export");
-  if (!button) throw new Error("export button did not render");
-  return button;
-}
+  it("persists a changed format as the literal union value", async () => {
+    const host = mountRenderQueue(vi.fn());
+
+    // MP4, MOV, WebM: one step down commits "mov", not the label "MOV (ProRes)".
+    await chooseByArrowing(triggerFor(host, "Format"), 1);
+
+    expect(getPersistedRenderSettings()).toEqual({
+      format: "mov",
+      quality: "standard",
+      fps: 30,
+    });
+  });
+});
 
 describe("RenderQueue Export button", () => {
   it("leaves the font size to the shared Button", () => {
@@ -97,7 +205,7 @@ describe("RenderQueue FFmpeg gate", () => {
       hint: "brew install ffmpeg",
       command: "brew install ffmpeg",
     };
-    const onStartRender = vi.fn();
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
     const host = mountRenderQueue(onStartRender);
 
     expect(host.textContent).toContain("FFmpeg not found");
@@ -130,7 +238,7 @@ describe("RenderQueue FFmpeg gate", () => {
   // as "not installed" would lock Export for setups that render fine.
   it("leaves Export usable when the probe returns no answer", () => {
     ffmpegStatus = null;
-    const onStartRender = vi.fn();
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
     const host = mountRenderQueue(onStartRender);
 
     expect(host.textContent).not.toContain("FFmpeg not found");

package/src/components/renders/RenderQueue.tsx

@@ -5,6 +5,9 @@ import { RenderQueueItem } from "./RenderQueueItem";
 import { FfmpegRequiredNotice } from "./FfmpegRequiredNotice";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Select, type SelectOption } from "../ui/Select";
+import { Tooltip } from "../ui/Tooltip";
 import { resolveFloatingPanelPosition, type FloatingPosition } from "../editor/floatingPanel";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
@@ -15,7 +18,7 @@ export interface CompositionDimensions {
   height: number;
 }
 
-type StartRenderHandler = (
+export type StartRenderHandler = (
   format: "mp4" | "webm" | "mov",
   quality: "draft" | "standard" | "high",
   resolution: ResolutionPreset | "auto",
@@ -207,7 +210,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-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"
+        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-text-5 hover:text-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent"
       >
         <svg
           width="12"
@@ -232,17 +235,17 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
             role="tooltip"
             onPointerEnter={show}
             onPointerLeave={hide}
-            className="fixed w-52 p-2 rounded-sm bg-panel-input border border-neutral-700 shadow-lg z-200"
+            className="fixed w-52 p-2 rounded-sm bg-input border border-border-input shadow-menu 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>
-            <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
-            <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
+            <p className="text-step-10 font-semibold text-text-1 mb-0.5">{info.label}</p>
+            <p className="text-step-9 text-text-3 leading-tight">{info.desc}</p>
+            <div className="mt-1.5 pt-1.5 border-t border-border">
               {(["mp4", "mov", "webm"] as const)
                 .filter((f) => f !== format)
                 .map((f) => (
-                  <p key={f} className="text-[9px] text-panel-text-4 leading-relaxed">
-                    <span className="text-panel-text-3 font-medium">{FORMAT_INFO[f].label}</span>
+                  <p key={f} className="text-step-9 text-text-4 leading-relaxed">
+                    <span className="text-text-3 font-medium">{FORMAT_INFO[f].label}</span>
                     {" — "}
                     {FORMAT_INFO[f].desc}
                   </p>
@@ -255,14 +258,22 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
   );
 }
 
-const QUALITY_OPTIONS: {
-  value: "draft" | "standard" | "high";
-  label: string;
-  title: string;
-}[] = [
-  { value: "draft", label: "Draft", title: "Fast render, smaller file" },
-  { value: "standard", label: "Standard", title: "Good quality, balanced file size" },
-  { value: "high", label: "High Quality", title: "Best quality, larger file" },
+const FORMAT_OPTIONS: SelectOption[] = [
+  { value: "mp4", label: "MP4" },
+  { value: "mov", label: "MOV (ProRes)" },
+  { value: "webm", label: "WebM" },
+];
+
+const QUALITY_OPTIONS: SelectOption[] = [
+  { value: "draft", label: "Draft" },
+  { value: "standard", label: "Standard" },
+  { value: "high", label: "High Quality" },
+];
+
+const FPS_OPTIONS: SelectOption[] = [
+  { value: "24", label: "24 fps" },
+  { value: "30", label: "30 fps" },
+  { value: "60", label: "60 fps" },
 ];
 
 function formatEta(ms: number): string {
@@ -302,9 +313,6 @@ function FormatExportButton({
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
 
-  const selectCls =
-    "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">
       {missingFfmpeg && (
@@ -317,85 +325,70 @@ function FormatExportButton({
       <div className="grid grid-cols-2 gap-2">
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1">
-            <span className="text-[10px] text-panel-text-4">Format</span>
+            <span className="text-step-10 text-text-4">Format</span>
             <FormatInfoTooltip format={format} />
           </div>
-          <select
+          <Select
+            label="Format"
             value={format}
-            onChange={(e) => {
-              const v = e.target.value as "mp4" | "webm" | "mov";
+            options={FORMAT_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = next as "mp4" | "webm" | "mov";
               setFormat(v);
               persistRenderSettings(v, quality, fps);
             }}
-            disabled={isRendering}
-            className={selectCls}
-          >
-            <option value="mp4">MP4</option>
-            <option value="mov">MOV (ProRes)</option>
-            <option value="webm">WebM</option>
-          </select>
+          />
         </div>
         <div className="flex flex-col gap-1">
-          <span className="text-[10px] text-panel-text-4">Resolution</span>
-          <select
+          <span className="text-step-10 text-text-4">Resolution</span>
+          <Select
+            label="Resolution"
             value={resolution}
-            onChange={(e) => setResolution(e.target.value as RenderScale)}
+            options={SCALE_OPTION_ORDER.map((value) => ({
+              value,
+              label: scaleOptionLabel(value, compositionDimensions),
+              disabled: !scaleApplies(value, compositionDimensions),
+            }))}
             disabled={isRendering}
-            className={selectCls}
-          >
-            {SCALE_OPTION_ORDER.map((value) => (
-              <option
-                key={value}
-                value={value}
-                disabled={!scaleApplies(value, compositionDimensions)}
-              >
-                {scaleOptionLabel(value, compositionDimensions)}
-              </option>
-            ))}
-          </select>
+            onCommit={(next) => setResolution(next as RenderScale)}
+          />
         </div>
         <div className="flex flex-col gap-1">
-          <span className="text-[10px] text-panel-text-4">Frame rate</span>
-          <select
-            value={fps}
-            onChange={(e) => {
-              const v = Number(e.target.value) as 24 | 30 | 60;
+          <span className="text-step-10 text-text-4">Frame rate</span>
+          <Select
+            label="Frame rate"
+            value={String(fps)}
+            options={FPS_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = Number(next) as 24 | 30 | 60;
               setFps(v);
               persistRenderSettings(format, quality, v);
             }}
-            disabled={isRendering}
-            className={selectCls}
-          >
-            <option value={24}>24 fps</option>
-            <option value={30}>30 fps</option>
-            <option value={60}>60 fps</option>
-          </select>
+          />
         </div>
         {showQuality && (
           <div className="flex flex-col gap-1">
-            <span className="text-[10px] text-panel-text-4">Quality</span>
-            <select
+            <span className="text-step-10 text-text-4">Quality</span>
+            <Select
+              label="Quality"
               value={quality}
-              onChange={(e) => {
-                const v = e.target.value as "draft" | "standard" | "high";
+              options={QUALITY_OPTIONS}
+              disabled={isRendering}
+              onCommit={(next) => {
+                const v = next as "draft" | "standard" | "high";
                 setQuality(v);
                 persistRenderSettings(format, v, fps);
               }}
-              disabled={isRendering}
-              className={selectCls}
-            >
-              {QUALITY_OPTIONS.map((q) => (
-                <option key={q.value} value={q.value}>
-                  {q.label}
-                </option>
-              ))}
-            </select>
+            />
           </div>
         )}
       </div>
       <Button
         variant="primary"
         size="md"
+        data-testid="renders-export"
         loading={isRendering}
         disabled={missingFfmpeg !== null}
         title={missingFfmpeg ? "Install FFmpeg to export. See the note above." : undefined}
@@ -407,12 +400,15 @@ function FormatExportButton({
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
           void onStartRender(format, quality, outputResolution, fps);
         }}
-        className="w-full font-semibold"
+        // Width only. A type size or a weight here would win the merge against
+        // the size recipe and leave this Export a step away from the header's
+        // (AE3), which is exactly what it used to do.
+        className="w-full"
       >
         {isRendering ? "Rendering…" : "Export"}
       </Button>
       {lastRenderDurationMs !== undefined && !isRendering && (
-        <p className="text-[9px] text-panel-text-5 text-center -mt-1.5">
+        <p className="text-step-9 text-text-5 text-center -mt-1.5">
           Last render took {formatEta(lastRenderDurationMs)}
         </p>
       )}
@@ -454,7 +450,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 shrink-0">
+      <div className="px-3 py-3 border-b border-border shrink-0">
         <FormatExportButton
           onStartRender={onStartRender}
           isRendering={isRendering}
@@ -469,17 +465,30 @@ export const RenderQueue = memo(function RenderQueue({
       {actionError && (
         <div
           role="alert"
-          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-panel-border bg-red-500/10"
+          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10"
         >
-          <span className="text-[10px] text-red-400">{actionError}</span>
+          <span className="text-step-10 text-danger">{actionError}</span>
           {onDismissActionError && (
-            <button
+            <IconButton
+              size="sm"
               onClick={onDismissActionError}
               aria-label="Dismiss error"
-              className="text-[10px] text-panel-text-4 hover:text-panel-text-2 shrink-0"
-            >
-              ✕
-            </button>
+              className="shrink-0"
+              icon={
+                <svg
+                  width="10"
+                  height="10"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  aria-hidden="true"
+                >
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              }
+            />
           )}
         </div>
       )}
@@ -488,7 +497,7 @@ export const RenderQueue = memo(function RenderQueue({
       <div ref={listRef} className="flex-1 overflow-y-auto">
         {loadError && jobs.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full px-4 gap-2" role="alert">
-            <p className="text-[10px] text-red-400 text-center">{loadError}</p>
+            <p className="text-step-10 text-danger text-center">{loadError}</p>
             {onRetryLoad && (
               <Button size="sm" variant="secondary" onClick={onRetryLoad}>
                 Retry
@@ -504,7 +513,7 @@ export const RenderQueue = memo(function RenderQueue({
               fill="none"
               stroke="currentColor"
               strokeWidth="1.5"
-              className="text-panel-text-5"
+              className="text-text-5"
             >
               <rect
                 x="2"
@@ -522,24 +531,22 @@ export const RenderQueue = memo(function RenderQueue({
                 strokeLinejoin="round"
               />
             </svg>
-            <p className="text-[10px] text-panel-text-5 text-center">No renders yet</p>
+            <p className="text-step-10 text-text-5 text-center">No renders yet</p>
           </div>
         ) : (
           <div>
             {completedCount > 0 && (
-              <div className="flex items-center justify-between px-3 py-1.5 border-b border-panel-border">
-                <span className="text-[10px] text-panel-text-4">
+              <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+                <span className="text-step-10 text-text-4">
                   {jobs.length} render{jobs.length === 1 ? "" : "s"}
                 </span>
                 {/* "Hide", not "Clear": files stay on disk (delete is per-row
                     and confirmed); hidden rows don't resurrect on reload. */}
-                <button
-                  onClick={onClearCompleted}
-                  title="Hide finished renders from this list (files stay on disk)"
-                  className="text-[10px] text-panel-text-4 hover:text-panel-text-2 transition-colors"
-                >
-                  Hide finished
-                </button>
+                <Tooltip label="Hide finished renders from this list (files stay on disk)">
+                  <Button size="sm" variant="ghost" onClick={onClearCompleted}>
+                    Hide finished
+                  </Button>
+                </Tooltip>
               </div>
             )}
             {jobs.map((job) => (