From 8d84f59d5511d8f2aa3225f3d3e7e1f05bb31c7e Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Fri, 4 Sep 2026 01:29:39 -0400
Subject: [PATCH 1/5] feat(studio): header and inspector tabs on the shared
 primitives

The header's view-mode toggle and the inspector's tab strip become real
Tabs, so both gain the roving tabindex, arrow keys and Home/End they never
had; undo, redo and Inspector become IconButton and Button; Export becomes
the primary Button at the medium size. Capture stays an <a download>,
wearing Button's recipe, because a button cannot save a file.

Colour literals in StudioHeader.tsx drop to zero: the brand gradient moves
into theme.css as two tokens and the Export's hand-written text colour
becomes text-bg-0. Ratchet total 475 to 470.
---
 .../studio/src/components/PanelTabButton.tsx  |  31 ----
 .../src/components/RightPanelTabs.test.tsx    | 145 ++++++++++++++++
 .../studio/src/components/RightPanelTabs.tsx  |  62 +++++++
 .../src/components/StudioHeader.dom.test.tsx  | 158 ++++++++++++++++++
 .../src/components/StudioHeader.test.ts       |  19 ++-
 .../studio/src/components/StudioHeader.tsx    | 150 ++++++++---------
 .../src/components/StudioRightPanel.tsx       |  82 +++++----
 packages/studio/src/components/ui/Button.tsx  |  12 +-
 packages/studio/src/components/ui/index.ts    |   2 +-
 packages/studio/src/styles/theme.css          |   6 +
 10 files changed, 519 insertions(+), 148 deletions(-)
 delete mode 100644 packages/studio/src/components/PanelTabButton.tsx
 create mode 100644 packages/studio/src/components/RightPanelTabs.test.tsx
 create mode 100644 packages/studio/src/components/RightPanelTabs.tsx
 create mode 100644 packages/studio/src/components/StudioHeader.dom.test.tsx

diff --git a/packages/studio/src/components/PanelTabButton.tsx b/packages/studio/src/components/PanelTabButton.tsx
deleted file mode 100644
index 1f87cf8ad8..0000000000
--- a/packages/studio/src/components/PanelTabButton.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Tooltip } from "./ui";
-
-/** Tab-bar button for the right inspector panel header. */
-export function PanelTabButton({
-  label,
-  tooltip,
-  active,
-  onClick,
-}: {
-  label: string;
-  tooltip: string;
-  active: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <Tooltip label={tooltip} side="bottom">
-      <button
-        type="button"
-        onClick={onClick}
-        aria-pressed={active}
-        className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors active:scale-[0.98] ${
-          active
-            ? "bg-neutral-800 text-white"
-            : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
-        }`}
-      >
-        {label}
-      </button>
-    </Tooltip>
-  );
-}
diff --git a/packages/studio/src/components/RightPanelTabs.test.tsx b/packages/studio/src/components/RightPanelTabs.test.tsx
new file mode 100644
index 0000000000..a4230fee3a
--- /dev/null
+++ b/packages/studio/src/components/RightPanelTabs.test.tsx
@@ -0,0 +1,145 @@
+// @vitest-environment happy-dom
+/**
+ * The inspector strip's keyboard behaviour, and the two things a reskin can
+ * silently break: which tab reads as selected, and how the global hotkey
+ * filters classify the elements (KTD13).
+ *
+ * The strip used to be `aria-pressed` buttons. Arrow keys did nothing, so the
+ * first two tests here are new behaviour, not a port.
+ */
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { RightPanelTabs, type RightPanelTabDescriptor } from "./RightPanelTabs";
+import { isTypingTarget } from "../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../player/lib/playbackShortcuts";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const IDS = ["design", "layers", "renders", "variables"];
+
+let mounted: { root: Root; host: HTMLElement } | null = null;
+
+afterEach(() => {
+  if (!mounted) return;
+  const { root, host } = mounted;
+  mounted = null;
+  act(() => root.unmount());
+  host.remove();
+});
+
+/**
+ * The strip is controlled by the panel's own state, so the harness owns that
+ * state too: a mount whose `active` never moved would make every second
+ * selection look like a no-op the real panel does not have.
+ */
+function mount(initialActive: string[]): {
+  host: HTMLElement;
+  selections: ReturnType<typeof vi.fn>;
+} {
+  const selections = vi.fn();
+
+  function Harness() {
+    const [active, setActive] = React.useState(initialActive);
+    const tabs: RightPanelTabDescriptor[] = IDS.map((id) => ({
+      id,
+      label: id,
+      tooltip: `${id} tooltip`,
+      active: active.includes(id),
+      onSelect: () => {
+        selections(id);
+        setActive([id]);
+      },
+    }));
+    return <RightPanelTabs tabs={tabs} />;
+  }
+
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  mounted = { root, host };
+  act(() => root.render(<Harness />));
+  return { host, selections };
+}
+
+function tab(host: HTMLElement, id: string): HTMLElement {
+  const el = host.querySelector<HTMLElement>(`[data-tab-id="${id}"]`);
+  if (!el) throw new Error(`no tab for ${id}`);
+  return el;
+}
+
+function selected(host: HTMLElement): string | null {
+  return (
+    host.querySelector('[role="tab"][aria-selected="true"]')?.getAttribute("data-tab-id") ?? null
+  );
+}
+
+/** Base UI moves the roving tabindex synchronously and the focus one task later. */
+async function arrow(key: string): Promise<void> {
+  const target = document.activeElement ?? document.body;
+  act(() => {
+    target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, composed: true }));
+  });
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+it("moves from Design to Layers with ArrowRight and asks the panel to switch", async () => {
+  const { host, selections } = mount(["design"]);
+  act(() => tab(host, "design").focus());
+
+  await arrow("ArrowRight");
+
+  expect(document.activeElement).toBe(tab(host, "layers"));
+  expect(selections).toHaveBeenCalledWith("layers");
+});
+
+it("jumps to the first and last tab with Home and End", async () => {
+  const { host, selections } = mount(["design"]);
+  act(() => tab(host, "design").focus());
+
+  await arrow("End");
+  expect(document.activeElement).toBe(tab(host, "variables"));
+  expect(selections).toHaveBeenLastCalledWith("variables");
+
+  await arrow("Home");
+  expect(document.activeElement).toBe(tab(host, "design"));
+  expect(selections).toHaveBeenLastCalledWith("design");
+});
+
+it("selects the tab whose content is on screen", () => {
+  const { host } = mount(["renders"]);
+
+  expect(selected(host)).toBe("renders");
+});
+
+it("leaves every tab unselected when the panel shows something the strip has no tab for", () => {
+  // Block params take over the panel body without a tab of their own. The old
+  // buttons all read unpressed in that state; nothing should read selected now.
+  const { host } = mount([]);
+
+  expect(selected(host)).toBe(null);
+});
+
+it("keeps a second open pane looking open in the legacy split inspector", () => {
+  // Design and Layers render together there. Only one tab can carry
+  // aria-selected, so the other has to keep the selected look or the strip
+  // would claim a pane is closed while it is on screen.
+  const { host } = mount(["design", "layers"]);
+
+  expect(selected(host)).toBe("design");
+  expect(tab(host, "layers").className).toContain("bg-hover");
+});
+
+it("classifies its tabs for the hotkey filters exactly as the old buttons did (KTD13)", () => {
+  // The old strip rendered plain <button>s: not a typing target, and claimed by
+  // the playback filter through its `button` selector. Base UI's tab is a
+  // <button> too, so both verdicts have to be unchanged.
+  const { host } = mount(["design"]);
+  const el = tab(host, "design");
+
+  expect(el.tagName).toBe("BUTTON");
+  expect(isTypingTarget(el)).toBe(false);
+  expect(shouldIgnorePlaybackShortcutTarget(el)).toBe(true);
+});
diff --git a/packages/studio/src/components/RightPanelTabs.tsx b/packages/studio/src/components/RightPanelTabs.tsx
new file mode 100644
index 0000000000..5f5fe25955
--- /dev/null
+++ b/packages/studio/src/components/RightPanelTabs.tsx
@@ -0,0 +1,62 @@
+/**
+ * The inspector panel's tab strip.
+ *
+ * It used to be a row of `aria-pressed` buttons, which no arrow key reached
+ * and which assistive tech announced as five unrelated toggles. This is the
+ * shared Tabs primitive, so the strip gets the roving tabindex, the arrow keys
+ * and Home / End from the library rather than from nobody.
+ *
+ * The selected tab is derived, not stored: `active` comes from the panel state
+ * the panel already keeps (which pane is open, which tab the layout holds), so
+ * this component adds no second source for that decision. In the legacy split
+ * inspector both Design and Layers can be open at once; one of them holds the
+ * `aria-selected` state and the other still wears the selected look, because
+ * both panes really are on screen.
+ */
+
+import { Tab, Tabs, TabsList, Tooltip, cn } from "./ui";
+
+export interface RightPanelTabDescriptor {
+  /** Stable id, also the `data-tab-id` attribute the strip is queried by. */
+  id: string;
+  label: string;
+  tooltip: string;
+  /** Whether this tab's content is on screen right now. */
+  active: boolean;
+  /** Run when the strip moves to this tab, by click or by arrow key. */
+  onSelect: () => void;
+}
+
+/** The look `aria-selected` gives the selected tab, for a second open pane. */
+const SELECTED_LOOK = "bg-hover text-text-0";
+
+export function RightPanelTabs({ tabs }: { tabs: readonly RightPanelTabDescriptor[] }) {
+  // `null` when the layout holds a tab this strip does not show (block params),
+  // which leaves every tab unselected, exactly as the old buttons did.
+  const value = tabs.find((tab) => tab.active)?.id ?? null;
+
+  return (
+    <Tabs
+      value={value}
+      onValueChange={(next) => {
+        tabs.find((tab) => tab.id === next)?.onSelect();
+      }}
+    >
+      <TabsList
+        aria-label="Inspector panels"
+        className="flex min-w-0 items-center gap-1 overflow-hidden rounded-none border-b border-border-strong bg-transparent px-3 py-2"
+      >
+        {tabs.map((tab) => (
+          <Tooltip key={tab.id} label={tab.tooltip} side="bottom">
+            <Tab
+              value={tab.id}
+              className={cn("h-ctl-lg rounded-lg px-3 font-medium", tab.active && SELECTED_LOOK)}
+            >
+              {tab.label}
+            </Tab>
+          </Tooltip>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}
diff --git a/packages/studio/src/components/StudioHeader.dom.test.tsx b/packages/studio/src/components/StudioHeader.dom.test.tsx
new file mode 100644
index 0000000000..b76007f028
--- /dev/null
+++ b/packages/studio/src/components/StudioHeader.dom.test.tsx
@@ -0,0 +1,158 @@
+// @vitest-environment happy-dom
+/**
+ * The header after the primitive sweep: the controls really are the shared
+ * ones, the disabled history buttons still say why they are disabled, and both
+ * global hotkey filters classify the new elements the way they classified the
+ * hand-rolled ones (KTD13).
+ *
+ * The contexts are mocked rather than provided: this file is about the markup
+ * the header renders, and building three real provider values would test the
+ * providers instead.
+ */
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { buttonSizes, buttonVariants } from "./ui";
+import { isTypingTarget } from "../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../player/lib/playbackShortcuts";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const editHistory = {
+  canUndo: false,
+  canRedo: false,
+  undoLabel: undefined as string | undefined,
+  redoLabel: undefined as string | undefined,
+};
+const renderQueue = { isRendering: false, ffmpegMissing: false };
+
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    projectId: "demo",
+    editHistory,
+    handleUndo: vi.fn(),
+    handleRedo: vi.fn(),
+    renderQueue,
+  }),
+}));
+
+vi.mock("../contexts/PanelLayoutContext", () => ({
+  usePanelLayoutContext: () => ({
+    effectiveRightCollapsed: false,
+    setRightCollapsed: vi.fn(),
+    setRightPanelTab: vi.fn(),
+  }),
+}));
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const { StudioHeader } = await import("./StudioHeader");
+
+let mounted: { root: Root; host: HTMLElement } | null = null;
+
+beforeEach(() => {
+  editHistory.canUndo = false;
+  editHistory.canRedo = false;
+  editHistory.undoLabel = undefined;
+  editHistory.redoLabel = undefined;
+  renderQueue.isRendering = false;
+});
+
+afterEach(() => {
+  if (!mounted) return;
+  const { root, host } = mounted;
+  mounted = null;
+  act(() => root.unmount());
+  host.remove();
+});
+
+function mount(): HTMLElement {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  mounted = { root, host };
+  act(() =>
+    root.render(
+      <StudioHeader
+        captureFrameHref="blob:frame"
+        captureFrameFilename="frame.png"
+        handleCaptureFrameClick={vi.fn()}
+        refreshCaptureFrameTime={vi.fn()}
+        inspectorButtonActive={false}
+        inspectorPanelActive={false}
+      />,
+    ),
+  );
+  return host;
+}
+
+function query(host: HTMLElement, selector: string): HTMLElement {
+  const el = host.querySelector<HTMLElement>(selector);
+  if (!el) throw new Error(`not rendered: ${selector}`);
+  return el;
+}
+
+/** Every class the recipe asks for, on the element the header rendered. */
+function expectRecipe(el: HTMLElement, ...recipes: string[]): void {
+  const applied = new Set(el.className.split(/\s+/));
+  for (const recipe of recipes) {
+    for (const token of recipe.split(/\s+/)) {
+      expect(applied, `${token} missing from: ${el.className}`).toContain(token);
+    }
+  }
+}
+
+it("renders Export as the shared primary Button at the medium size", () => {
+  const host = mount();
+
+  expectRecipe(
+    query(host, '[data-testid="header-export"]'),
+    buttonVariants.primary,
+    buttonSizes.md,
+  );
+});
+
+it("disables Undo and Redo while the history is empty", () => {
+  const host = mount();
+
+  expect(query(host, '[aria-label="Undo"]').hasAttribute("disabled")).toBe(true);
+  expect(query(host, '[aria-label="Redo"]').hasAttribute("disabled")).toBe(true);
+});
+
+it("enables Undo once there is something to undo", () => {
+  editHistory.canUndo = true;
+  editHistory.undoLabel = "Move layer";
+  const host = mount();
+
+  expect(query(host, '[aria-label="Undo"]').hasAttribute("disabled")).toBe(false);
+});
+
+it("keeps Capture a real download link rather than a button", () => {
+  // `download` is what saves the frame. A Button here would render a <button>
+  // and the control would quietly stop downloading anything.
+  const host = mount();
+  const capture = query(host, '[aria-label="Capture current frame"]');
+
+  expect(capture.tagName).toBe("A");
+  expect(capture.getAttribute("download")).toBe("frame.png");
+  expectRecipe(capture, buttonSizes.md);
+});
+
+it("classifies the new header controls for the hotkey filters as the old ones were (KTD13)", () => {
+  // Every one of these was a <button> or an <a href> before the sweep: never a
+  // typing target, always claimed by the playback filter. A primitive that
+  // rendered a different element would leak or swallow hotkeys in silence.
+  const host = mount();
+  const controls = [
+    query(host, '[data-testid="header-export"]'),
+    query(host, '[aria-label="Undo"]'),
+    query(host, '[aria-label="Redo"]'),
+    query(host, '[aria-label="Inspector"]'),
+    query(host, '[aria-label="Capture current frame"]'),
+  ];
+
+  for (const el of controls) {
+    expect(isTypingTarget(el), el.getAttribute("aria-label") ?? el.tagName).toBe(false);
+    expect(shouldIgnorePlaybackShortcutTarget(el), el.tagName).toBe(true);
+  }
+});
diff --git a/packages/studio/src/components/StudioHeader.test.ts b/packages/studio/src/components/StudioHeader.test.ts
index 4d897faa76..ff06512dca 100644
--- a/packages/studio/src/components/StudioHeader.test.ts
+++ b/packages/studio/src/components/StudioHeader.test.ts
@@ -1,5 +1,22 @@
 import { describe, expect, it } from "vitest";
-import { shouldOpenInspector } from "./StudioHeader";
+import { historyTooltipLabel, shouldOpenInspector } from "./StudioHeader";
+
+describe("historyTooltipLabel", () => {
+  // A disabled control gets no pointer events, so its tooltip cannot be opened
+  // to read. The wording is checked here instead of through the DOM.
+  it("names the action that would be undone", () => {
+    expect(historyTooltipLabel("undo", "Move layer")).toMatch(/^Undo Move layer \(.+\)$/);
+  });
+
+  it("names the action that would be redone", () => {
+    expect(historyTooltipLabel("redo", "Move layer")).toMatch(/^Redo Move layer \(.+\)$/);
+  });
+
+  it("keeps the shortcut when the history is empty", () => {
+    expect(historyTooltipLabel("undo", undefined)).toMatch(/^Undo \(.+\)$/);
+    expect(historyTooltipLabel("redo", null)).toMatch(/^Redo \(.+\)$/);
+  });
+});
 
 describe("shouldOpenInspector", () => {
   it("opens when the panel is hidden", () => {
diff --git a/packages/studio/src/components/StudioHeader.tsx b/packages/studio/src/components/StudioHeader.tsx
index d473700fd6..6d48df5203 100644
--- a/packages/studio/src/components/StudioHeader.tsx
+++ b/packages/studio/src/components/StudioHeader.tsx
@@ -4,7 +4,7 @@ import { getHistoryShortcutLabel } from "../utils/studioHelpers";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { Tooltip } from "./ui";
+import { Button, buttonBase, buttonSizes, buttonVariants, cn, IconButton, Tooltip } from "./ui";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
@@ -40,8 +40,8 @@ function HyperframesLogo() {
           y2="37.482"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
         <linearGradient
           id="hf-g1"
@@ -51,8 +51,8 @@ function HyperframesLogo() {
           y2="6.303"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
       </defs>
       {/* heygen label */}
@@ -138,6 +138,20 @@ function HyperframesLogo() {
   );
 }
 
+/**
+ * The Undo / Redo tooltip: the shortcut always, the last action's name when
+ * there is one. Pure so the wording is testable without a pointer, which a
+ * disabled trigger cannot give a tooltip anyway.
+ */
+export function historyTooltipLabel(
+  action: "undo" | "redo",
+  lastAction: string | null | undefined,
+): string {
+  const shortcut = getHistoryShortcutLabel(action);
+  const verb = action === "undo" ? "Undo" : "Redo";
+  return lastAction ? `${verb} ${lastAction} (${shortcut})` : `${verb} (${shortcut})`;
+}
+
 /**
  * Does the header's Inspector button open the panel, or close it?
  *
@@ -174,68 +188,44 @@ export function StudioHeader({
   const ffmpegMissing = renderQueue.ffmpegMissing;
 
   return (
-    <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 shrink-0">
+    <div className="flex items-center justify-between h-10 px-3 bg-surface border-b border-border-strong shrink-0">
       {/* Left: logo + project name */}
       <div className="flex items-center gap-3">
         <HyperframesLogo />
-        <span className="text-neutral-700 select-none" aria-hidden="true">
+        <span className="text-text-5 select-none" aria-hidden="true">
           |
         </span>
-        <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
+        <span className="text-step-11 font-medium text-text-1">{projectId}</span>
       </div>
       {/* Right: toolbar buttons */}
       <div className="flex items-center gap-1.5">
-        <Tooltip
-          label={
-            editHistory.undoLabel
-              ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
-              : `Undo (${getHistoryShortcutLabel("undo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
+        <Tooltip label={historyTooltipLabel("undo", editHistory.undoLabel)} side="bottom">
+          <IconButton
+            aria-label="Undo"
+            icon={<RotateCcw size={14} />}
+            disabled={!editHistory.canUndo}
             onClick={() => {
               trackStudioEvent("toolbar_action", { action: "undo" });
               void handleUndo();
             }}
-            disabled={!editHistory.canUndo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canUndo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Undo"
-          >
-            <RotateCcw size={14} />
-          </button>
+          />
         </Tooltip>
-        <Tooltip
-          label={
-            editHistory.redoLabel
-              ? `Redo ${editHistory.redoLabel} (${getHistoryShortcutLabel("redo")})`
-              : `Redo (${getHistoryShortcutLabel("redo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
+        <Tooltip label={historyTooltipLabel("redo", editHistory.redoLabel)} side="bottom">
+          <IconButton
+            aria-label="Redo"
+            icon={<RotateCw size={14} />}
+            disabled={!editHistory.canRedo}
             onClick={() => {
               trackStudioEvent("toolbar_action", { action: "redo" });
               void handleRedo();
             }}
-            disabled={!editHistory.canRedo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canRedo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Redo"
-          >
-            <RotateCw size={14} />
-          </button>
+          />
         </Tooltip>
         <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
+          {/* A real download link, so it wears Button's recipe rather than being
+              one: `download` on an <a> is what saves the frame, and no <button>
+              can do that. `enabled:` never matches a link, so the ghost
+              variant's hover look is repeated unprefixed here. */}
           <a
             href={captureFrameHref}
             download={captureFrameFilename}
@@ -250,11 +240,14 @@ export function StudioHeader({
             onFocus={refreshCaptureFrameTime}
             onPointerDown={refreshCaptureFrameTime}
             aria-disabled={capturing || undefined}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium transition-colors ${
+            className={cn(
+              buttonBase,
+              buttonVariants.ghost,
+              buttonSizes.md,
               capturing
-                ? "text-neutral-600 cursor-default"
-                : "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.98]"
-            }`}
+                ? "text-text-4 cursor-default"
+                : "hover:bg-hover hover:text-text-0 active:scale-[0.98]",
+            )}
             aria-label={capturing ? "Capturing frame" : "Capture current frame"}
           >
             {capturing ? (
@@ -285,8 +278,29 @@ export function StudioHeader({
           </a>
         </Tooltip>
         <Tooltip label="Inspector" side="bottom">
-          <button
-            type="button"
+          <Button
+            variant="ghost"
+            aria-label="Inspector"
+            aria-pressed={inspectorButtonActive}
+            className={cn(
+              "border",
+              inspectorButtonActive
+                ? "border-accent/30 bg-accent/10 text-accent"
+                : "border-transparent",
+            )}
+            icon={
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
+              </svg>
+            }
             onClick={() => {
               if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
                 trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
@@ -299,27 +313,9 @@ export function StudioHeader({
               // the panel shouldn't deselect the element.
               setRightCollapsed(true);
             }}
-            aria-pressed={inspectorButtonActive}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors active:scale-[0.98] ${
-              inspectorButtonActive
-                ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
-            }`}
-            aria-label="Inspector"
           >
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <circle cx="12" cy="12" r="10" />
-              <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
-            </svg>
             Inspector
-          </button>
+          </Button>
         </Tooltip>
         <Tooltip
           label={
@@ -331,8 +327,9 @@ export function StudioHeader({
           }
           side="bottom"
         >
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            data-testid="header-export"
             disabled={isRendering}
             onClick={() => {
               if (isRendering) return;
@@ -346,10 +343,9 @@ export function StudioHeader({
               if (ffmpegMissing) return;
               onExport?.();
             }}
-            className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] enabled:hover:brightness-110 transition-[filter,transform] enabled:active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isRendering ? "Rendering…" : "Export"}
-          </button>
+          </Button>
         </Tooltip>
       </div>
     </div>
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index 248ff383cb..a0e9606a29 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -9,7 +9,7 @@ import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueuePanel } from "./renders/RenderQueuePanel";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
-import { PanelTabButton } from "./PanelTabButton";
+import { RightPanelTabs, type RightPanelTabDescriptor } from "./RightPanelTabs";
 import type { RenderJob } from "./renders/useRenderQueue";
 import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
 import { useSlideshowPersist } from "../hooks/useSlideshowPersist";
@@ -339,6 +339,51 @@ export function StudioRightPanel({
 
   const renderQueuePanel = <RenderQueuePanel />;
 
+  // Slideshow appears only for a slideshow composition, so the strip is built
+  // rather than written out: a tab that is not in this list is not reachable by
+  // an arrow key either.
+  const inspectorTabs: RightPanelTabDescriptor[] = [
+    {
+      id: "design",
+      label: "Design",
+      tooltip: "Element styles and properties",
+      active: designPaneOpen,
+      onSelect: () => handleInspectorPaneButtonClick("design"),
+    },
+    {
+      id: "layers",
+      label: "Layers",
+      tooltip: "Composition layer stack",
+      active: layersPaneOpen,
+      onSelect: () => handleInspectorPaneButtonClick("layers"),
+    },
+    {
+      id: "renders",
+      label: renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders",
+      tooltip: "Render queue and exports",
+      active: rightPanelTab === "renders",
+      onSelect: () => setRightPanelTab("renders"),
+    },
+    ...(isSlideshowComposition
+      ? [
+          {
+            id: "slideshow",
+            label: "Slideshow",
+            tooltip: "Slideshow branching editor",
+            active: rightPanelTab === "slideshow",
+            onSelect: () => setRightPanelTab("slideshow"),
+          },
+        ]
+      : []),
+    {
+      id: "variables",
+      label: "Variables",
+      tooltip: "Template variables — declare, preview with values",
+      active: rightPanelTab === "variables",
+      onSelect: () => setRightPanelTab("variables"),
+    },
+  ];
+
   return (
     <>
       {/* Vertical resize divider: 3px visible seam, 13px hit zone via the inner div. */}
@@ -376,40 +421,7 @@ export function StudioRightPanel({
           <CaptionPropertyPanel iframeRef={previewIframeRef} />
         ) : (
           <>
-            <div className="flex min-w-0 items-center gap-1 overflow-hidden border-b border-neutral-800 px-3 py-2">
-              <PanelTabButton
-                label="Design"
-                tooltip="Element styles and properties"
-                active={designPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("design")}
-              />
-              <PanelTabButton
-                label="Layers"
-                tooltip="Composition layer stack"
-                active={layersPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("layers")}
-              />
-              <PanelTabButton
-                label={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders"}
-                tooltip="Render queue and exports"
-                active={rightPanelTab === "renders"}
-                onClick={() => setRightPanelTab("renders")}
-              />
-              {isSlideshowComposition && (
-                <PanelTabButton
-                  label="Slideshow"
-                  tooltip="Slideshow branching editor"
-                  active={rightPanelTab === "slideshow"}
-                  onClick={() => setRightPanelTab("slideshow")}
-                />
-              )}
-              <PanelTabButton
-                label="Variables"
-                tooltip="Template variables — declare, preview with values"
-                active={rightPanelTab === "variables"}
-                onClick={() => setRightPanelTab("variables")}
-              />
-            </div>
+            <RightPanelTabs tabs={inspectorTabs} />
             <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
               {rightPanelTab === "block-params" && activeBlockParams ? (
                 <BlockParamsPanel
diff --git a/packages/studio/src/components/ui/Button.tsx b/packages/studio/src/components/ui/Button.tsx
index 979c7d77fe..5b79e03946 100644
--- a/packages/studio/src/components/ui/Button.tsx
+++ b/packages/studio/src/components/ui/Button.tsx
@@ -71,8 +71,14 @@ export const buttonVariants: Record<ButtonVariant, string> = {
   ),
 };
 
-/** The three control heights, 24 / 28 / 32 px, from `--spacing-ctl-*`. */
-const sizeStyles: Record<ButtonSize, string> = {
+/**
+ * The three control heights, 24 / 28 / 32 px, from `--spacing-ctl-*`.
+ *
+ * Exported beside `buttonBase` and `buttonVariants` for the one header control
+ * a `<button>` cannot be: Capture is a download `<a href>`. A link that wears
+ * the recipe from here cannot drift away from a real Button.
+ */
+export const buttonSizes: Record<ButtonSize, string> = {
   sm: "h-ctl-sm px-2 gap-1 rounded-sm text-step-11",
   md: "h-ctl px-3 gap-1.5 rounded-md text-step-12",
   lg: "h-ctl-lg px-4 gap-2 rounded-md text-step-13",
@@ -107,7 +113,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         // `aria-disabled` as well as `disabled`: assistive tech announces the
         // state even where the native attribute is filtered out of the tree.
         aria-disabled={isDisabled || undefined}
-        className={cn(buttonBase, buttonVariants[variant], sizeStyles[size], className)}
+        className={cn(buttonBase, buttonVariants[variant], buttonSizes[size], className)}
         {...props}
       >
         {leading}
diff --git a/packages/studio/src/components/ui/index.ts b/packages/studio/src/components/ui/index.ts
index 1055707d7e..ad56b2dc81 100644
--- a/packages/studio/src/components/ui/index.ts
+++ b/packages/studio/src/components/ui/index.ts
@@ -1,7 +1,7 @@
 // Studio's shared UI primitives. Every control in the app is meant to come
 // from here, so a look or a keyboard behaviour is decided once.
 export { cn } from "./cn";
-export { Button, buttonBase, buttonVariants } from "./Button";
+export { Button, buttonBase, buttonSizes, buttonVariants } from "./Button";
 export type { ButtonSize, ButtonVariant, PreviewState } from "./Button";
 export { IconButton } from "./IconButton";
 export { Tab, TabPanel, Tabs, TabsList } from "./Tabs";
diff --git a/packages/studio/src/styles/theme.css b/packages/studio/src/styles/theme.css
index 95520e9631..76d18a1aff 100644
--- a/packages/studio/src/styles/theme.css
+++ b/packages/studio/src/styles/theme.css
@@ -41,6 +41,12 @@
   --color-media: #00e3ff;
   --color-container: #f5a623;
 
+  /* The two stops of the HeyGen brand gradient, worn by the header logo and by
+   * the standalone mark. Fixed brand values rather than roles, so they are not
+   * reachable as a background or a text colour by mistake. */
+  --color-brand-gradient-from: #06e3fa;
+  --color-brand-gradient-to: #4fdb5e;
+
   /* -------------------------------------------------------------- geometry */
 
   --radius-sm: 0.25rem;

From 22ddd2ff5a2f11198c4470fcd235557fa4fc0bde Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sat, 19 Sep 2026 12:48:45 -0400
Subject: [PATCH 2/5] docs(studio): shorten the header and inspector tab
 comments to fit the comment gate

---
 .../studio/src/components/RightPanelTabs.test.tsx | 15 ++++-----------
 packages/studio/src/components/RightPanelTabs.tsx | 15 ++-------------
 .../src/components/StudioHeader.dom.test.tsx      | 11 +++--------
 packages/studio/src/components/StudioHeader.tsx   |  6 +-----
 packages/studio/src/components/ui/Button.tsx      |  5 +----
 5 files changed, 11 insertions(+), 41 deletions(-)

diff --git a/packages/studio/src/components/RightPanelTabs.test.tsx b/packages/studio/src/components/RightPanelTabs.test.tsx
index a4230fee3a..cc57193988 100644
--- a/packages/studio/src/components/RightPanelTabs.test.tsx
+++ b/packages/studio/src/components/RightPanelTabs.test.tsx
@@ -1,11 +1,8 @@
 // @vitest-environment happy-dom
+
 /**
- * The inspector strip's keyboard behaviour, and the two things a reskin can
- * silently break: which tab reads as selected, and how the global hotkey
- * filters classify the elements (KTD13).
- *
- * The strip used to be `aria-pressed` buttons. Arrow keys did nothing, so the
- * first two tests here are new behaviour, not a port.
+ * The strip's keyboard behaviour, which tab reads as selected, and how the hotkey
+ * filters classify the elements (KTD13). The arrow-key tests are new behaviour, not a port.
  */
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
@@ -28,11 +25,7 @@ afterEach(() => {
   host.remove();
 });
 
-/**
- * The strip is controlled by the panel's own state, so the harness owns that
- * state too: a mount whose `active` never moved would make every second
- * selection look like a no-op the real panel does not have.
- */
+/** The harness owns the active state too, so a selection moves as it does in the real panel. */
 function mount(initialActive: string[]): {
   host: HTMLElement;
   selections: ReturnType<typeof vi.fn>;
diff --git a/packages/studio/src/components/RightPanelTabs.tsx b/packages/studio/src/components/RightPanelTabs.tsx
index 5f5fe25955..9fa77f86bd 100644
--- a/packages/studio/src/components/RightPanelTabs.tsx
+++ b/packages/studio/src/components/RightPanelTabs.tsx
@@ -1,17 +1,6 @@
 /**
- * The inspector panel's tab strip.
- *
- * It used to be a row of `aria-pressed` buttons, which no arrow key reached
- * and which assistive tech announced as five unrelated toggles. This is the
- * shared Tabs primitive, so the strip gets the roving tabindex, the arrow keys
- * and Home / End from the library rather than from nobody.
- *
- * The selected tab is derived, not stored: `active` comes from the panel state
- * the panel already keeps (which pane is open, which tab the layout holds), so
- * this component adds no second source for that decision. In the legacy split
- * inspector both Design and Layers can be open at once; one of them holds the
- * `aria-selected` state and the other still wears the selected look, because
- * both panes really are on screen.
+ * The inspector tab strip on the shared Tabs primitive. The selected tab is derived from the
+ * panel's state; in the legacy split inspector two can be open, only one holds `aria-selected`.
  */
 
 import { Tab, Tabs, TabsList, Tooltip, cn } from "./ui";
diff --git a/packages/studio/src/components/StudioHeader.dom.test.tsx b/packages/studio/src/components/StudioHeader.dom.test.tsx
index b76007f028..18dc32ca4e 100644
--- a/packages/studio/src/components/StudioHeader.dom.test.tsx
+++ b/packages/studio/src/components/StudioHeader.dom.test.tsx
@@ -1,13 +1,8 @@
 // @vitest-environment happy-dom
+
 /**
- * The header after the primitive sweep: the controls really are the shared
- * ones, the disabled history buttons still say why they are disabled, and both
- * global hotkey filters classify the new elements the way they classified the
- * hand-rolled ones (KTD13).
- *
- * The contexts are mocked rather than provided: this file is about the markup
- * the header renders, and building three real provider values would test the
- * providers instead.
+ * The header on the shared primitives: same controls, disabled history still explained,
+ * hotkey filters unchanged (KTD13). Contexts are mocked, not provided.
  */
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
diff --git a/packages/studio/src/components/StudioHeader.tsx b/packages/studio/src/components/StudioHeader.tsx
index 6d48df5203..5b8633b3b5 100644
--- a/packages/studio/src/components/StudioHeader.tsx
+++ b/packages/studio/src/components/StudioHeader.tsx
@@ -138,11 +138,7 @@ function HyperframesLogo() {
   );
 }
 
-/**
- * The Undo / Redo tooltip: the shortcut always, the last action's name when
- * there is one. Pure so the wording is testable without a pointer, which a
- * disabled trigger cannot give a tooltip anyway.
- */
+/** The Undo / Redo tooltip: the shortcut always, the last action's name when there is one. */
 export function historyTooltipLabel(
   action: "undo" | "redo",
   lastAction: string | null | undefined,
diff --git a/packages/studio/src/components/ui/Button.tsx b/packages/studio/src/components/ui/Button.tsx
index 5b79e03946..65ca1c3c88 100644
--- a/packages/studio/src/components/ui/Button.tsx
+++ b/packages/studio/src/components/ui/Button.tsx
@@ -73,10 +73,7 @@ export const buttonVariants: Record<ButtonVariant, string> = {
 
 /**
  * The three control heights, 24 / 28 / 32 px, from `--spacing-ctl-*`.
- *
- * Exported beside `buttonBase` and `buttonVariants` for the one header control
- * a `<button>` cannot be: Capture is a download `<a href>`. A link that wears
- * the recipe from here cannot drift away from a real Button.
+ * Exported so the Capture download `<a href>` can wear the same recipe as a Button.
  */
 export const buttonSizes: Record<ButtonSize, string> = {
   sm: "h-ctl-sm px-2 gap-1 rounded-sm text-step-11",

From a9ae36d27c990fbbf638ea40b0aa609d56f02b11 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sat, 19 Sep 2026 14:44:56 -0400
Subject: [PATCH 3/5] chore(studio): bank the lower colour-literal baseline for
 StudioHeader

---
 packages/studio/src/styles/hex-baseline.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/studio/src/styles/hex-baseline.json b/packages/studio/src/styles/hex-baseline.json
index eb038c5e0d..752f99acb6 100644
--- a/packages/studio/src/styles/hex-baseline.json
+++ b/packages/studio/src/styles/hex-baseline.json
@@ -1,12 +1,11 @@
 {
-  "total": 423,
+  "total": 418,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
     "packages/studio/src/captions/generator.ts": 1,
     "packages/studio/src/captions/parser.ts": 1,
     "packages/studio/src/captions/types.ts": 4,
-    "packages/studio/src/components/StudioHeader.tsx": 5,
     "packages/studio/src/components/StudioToast.tsx": 10,
     "packages/studio/src/components/TimelineToolbar.tsx": 2,
     "packages/studio/src/components/editor/ArcPathControls.tsx": 1,

From 143b1fe2c138282cc2220169f84517a2d144645d Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sat, 19 Sep 2026 15:13:34 -0400
Subject: [PATCH 4/5] fix(studio): arrow keys only move focus when the
 inspector strip toggles panes

---
 .../src/components/RightPanelTabs.test.tsx      | 17 +++++++++++++++--
 .../studio/src/components/RightPanelTabs.tsx    | 10 +++++++++-
 .../studio/src/components/StudioRightPanel.tsx  |  2 +-
 packages/studio/src/styles/theme.css            |  5 ++---
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/studio/src/components/RightPanelTabs.test.tsx b/packages/studio/src/components/RightPanelTabs.test.tsx
index cc57193988..2e252450fe 100644
--- a/packages/studio/src/components/RightPanelTabs.test.tsx
+++ b/packages/studio/src/components/RightPanelTabs.test.tsx
@@ -26,7 +26,10 @@ afterEach(() => {
 });
 
 /** The harness owns the active state too, so a selection moves as it does in the real panel. */
-function mount(initialActive: string[]): {
+function mount(
+  initialActive: string[],
+  activateOnFocus = true,
+): {
   host: HTMLElement;
   selections: ReturnType<typeof vi.fn>;
 } {
@@ -44,7 +47,7 @@ function mount(initialActive: string[]): {
         setActive([id]);
       },
     }));
-    return <RightPanelTabs tabs={tabs} />;
+    return <RightPanelTabs tabs={tabs} activateOnFocus={activateOnFocus} />;
   }
 
   const host = document.createElement("div");
@@ -88,6 +91,16 @@ it("moves from Design to Layers with ArrowRight and asks the panel to switch", a
   expect(selections).toHaveBeenCalledWith("layers");
 });
 
+it("only moves focus on an arrow key when selection would toggle a pane", async () => {
+  const { host, selections } = mount(["design"], false);
+  act(() => tab(host, "design").focus());
+
+  await arrow("ArrowRight");
+
+  expect(document.activeElement).toBe(tab(host, "layers"));
+  expect(selections).not.toHaveBeenCalled();
+});
+
 it("jumps to the first and last tab with Home and End", async () => {
   const { host, selections } = mount(["design"]);
   act(() => tab(host, "design").focus());
diff --git a/packages/studio/src/components/RightPanelTabs.tsx b/packages/studio/src/components/RightPanelTabs.tsx
index 9fa77f86bd..2d54a91cf9 100644
--- a/packages/studio/src/components/RightPanelTabs.tsx
+++ b/packages/studio/src/components/RightPanelTabs.tsx
@@ -19,7 +19,14 @@ export interface RightPanelTabDescriptor {
 /** The look `aria-selected` gives the selected tab, for a second open pane. */
 const SELECTED_LOOK = "bg-hover text-text-0";
 
-export function RightPanelTabs({ tabs }: { tabs: readonly RightPanelTabDescriptor[] }) {
+export function RightPanelTabs({
+  tabs,
+  activateOnFocus = true,
+}: {
+  tabs: readonly RightPanelTabDescriptor[];
+  /** False when `onSelect` toggles a pane, so an arrow key only moves focus. */
+  activateOnFocus?: boolean;
+}) {
   // `null` when the layout holds a tab this strip does not show (block params),
   // which leaves every tab unselected, exactly as the old buttons did.
   const value = tabs.find((tab) => tab.active)?.id ?? null;
@@ -33,6 +40,7 @@ export function RightPanelTabs({ tabs }: { tabs: readonly RightPanelTabDescripto
     >
       <TabsList
         aria-label="Inspector panels"
+        activateOnFocus={activateOnFocus}
         className="flex min-w-0 items-center gap-1 overflow-hidden rounded-none border-b border-border-strong bg-transparent px-3 py-2"
       >
         {tabs.map((tab) => (
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index a0e9606a29..75c1cb5dad 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -421,7 +421,7 @@ export function StudioRightPanel({
           <CaptionPropertyPanel iframeRef={previewIframeRef} />
         ) : (
           <>
-            <RightPanelTabs tabs={inspectorTabs} />
+            <RightPanelTabs tabs={inspectorTabs} activateOnFocus={STUDIO_FLAT_INSPECTOR_ENABLED} />
             <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
               {rightPanelTab === "block-params" && activeBlockParams ? (
                 <BlockParamsPanel
diff --git a/packages/studio/src/styles/theme.css b/packages/studio/src/styles/theme.css
index 76d18a1aff..d40daf17e5 100644
--- a/packages/studio/src/styles/theme.css
+++ b/packages/studio/src/styles/theme.css
@@ -41,9 +41,8 @@
   --color-media: #00e3ff;
   --color-container: #f5a623;
 
-  /* The two stops of the HeyGen brand gradient, worn by the header logo and by
-   * the standalone mark. Fixed brand values rather than roles, so they are not
-   * reachable as a background or a text colour by mistake. */
+  /* The two stops of the HeyGen brand gradient, worn by the header logo. Fixed brand values
+   * rather than roles, so they are not reachable as a background or text colour by mistake. */
   --color-brand-gradient-from: #06e3fa;
   --color-brand-gradient-to: #4fdb5e;
 

From 1f9a026234211a1e4473b63f734e74bb96769224 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sat, 19 Sep 2026 15:20:50 -0400
Subject: [PATCH 5/5] chore(studio): allow deleting PanelTabButton, replaced by
 the shared Tabs primitive

---
 scripts/check-no-main-deletions.mjs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scripts/check-no-main-deletions.mjs b/scripts/check-no-main-deletions.mjs
index 7f5975e731..691d0a554b 100644
--- a/scripts/check-no-main-deletions.mjs
+++ b/scripts/check-no-main-deletions.mjs
@@ -44,6 +44,10 @@ export const ALLOWED_DELETIONS = new Map([
     "packages/studio/src/components/StudioGlobalDragOverlay.tsx",
     "the full-screen drop-to-add box is replaced by a landing preview on the timeline; no remaining references",
   ],
+  [
+    "packages/studio/src/components/PanelTabButton.tsx",
+    "replaced by the shared Tabs primitive in RightPanelTabs; no remaining references",
+  ],
   [
     "packages/studio/postcss.config.js",
     "Tailwind v4 migration: postcss replaced by @tailwindcss/vite",