diff --git a/.changeset/tanstack-devtools-branding.md b/.changeset/tanstack-devtools-branding.md
new file mode 100644
index 00000000..cb64ac83
--- /dev/null
+++ b/.changeset/tanstack-devtools-branding.md
@@ -0,0 +1,7 @@
+---
+'@tanstack/devtools': minor
+'@tanstack/devtools-ui': minor
+'@tanstack/devtools-a11y': minor
+---
+
+feat: apply TanStack branding and the compact Workbench layout across core, shared UI, and accessibility Devtools
diff --git a/docs/architecture.md b/docs/architecture.md
index e9a79802..960a29c5 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -14,7 +14,7 @@ block-beta
     end
     block:core["Core Layer"]
         columns 3
-        Shell["Devtools Shell"] UI["UI Components"] Client["Event Client"]
+        Workbench["Devtools Workbench"] UI["UI components + private semantic theme"] Client["Event Client"]
     end
     block:transport["Transport Layer"]
         columns 3
@@ -37,10 +37,10 @@ graph TD
     end
 
     subgraph Core["Core Layer"]
-        shell["@tanstack/devtools<br/><i>Core shell (Solid.js)</i>"]
+        shell["@tanstack/devtools<br/><i>Core Workbench (Solid.js)</i>"]
         client["@tanstack/devtools-client<br/><i>Core devtools events</i>"]
         eventClient["@tanstack/devtools-event-client<br/><i>Generic EventClient</i>"]
-        ui["@tanstack/devtools-ui<br/><i>Shared UI components</i>"]
+        ui["@tanstack/devtools-ui<br/><i>Shared UI + private semantic-theme owner</i>"]
         clientBus["@tanstack/devtools-event-bus/client<br/><i>ClientEventBus</i>"]
     end
 
@@ -147,17 +147,23 @@ The devtools shell is a Solid.js application that renders the entire devtools UI
 
 The shell renders:
 - A **trigger button** (the floating devtools toggle, customizable or replaceable)
-- A **resizable panel** (docked to the bottom of the viewport, resizable via drag)
-- **Tab navigation** for switching between plugins, settings, SEO inspector, and the plugin marketplace
+- A **resizable Workbench panel** (docked to the top or bottom of the viewport, resizable via pointer or keyboard)
+- A compact **36px TanStack Devtools header** with Plugins, Marketplace, SEO, and Settings destinations
+- A fixed-height **44px secondary strip** for plugin and SEO navigation. It scrolls horizontally when space is limited.
+- A separate **Marketplace** header tab that does not disturb mounted plugin panes
 - A **settings panel** for theme, hotkeys, position, and other preferences
-- **Plugin containers** -- DOM elements where each plugin's UI is mounted
+- Up to three simultaneous **plugin mount frames**, divided into equal widths by static separators
 
 Settings and UI state (panel size, position, active tab, theme) are persisted in `localStorage` so they survive page reloads.
 
+The core shell owns the Workbench header, navigation, mount-frame geometry, separators, and surrounding light/dark surfaces. Each external plugin owns everything inside its mount target; core styling deliberately does not reach into plugin descendants. Detaching the Workbench uses a fixed `100vh` Picture-in-Picture layout and restores the stored docked height when reattached.
+
 ### @tanstack/devtools-ui -- Component Library
 
 A shared Solid.js component library used by the core shell and available for use in Solid.js plugins. Provides buttons, inputs, checkboxes, a JSON tree viewer, section layouts, and other UI primitives. The `@tanstack/devtools-utils` package also depends on it to provide framework-specific plugin helpers.
 
+Core packages share a private semantic resolver through `@tanstack/devtools-ui/internal`. It supplies TanStack light/dark colors, typography, spacing, status roles, and focus treatment to core-owned UI and the accessibility plugin. This internal subpath is an implementation boundary, not a public theming API for application plugins.
+
 ### @tanstack/devtools-client -- Core Event Client
 
 A specialized `EventClient` pre-configured with `pluginId: 'tanstack-devtools-core'` and a fixed event map for devtools-internal operations:
diff --git a/docs/overview.md b/docs/overview.md
index 15d2716c..90bb6110 100644
--- a/docs/overview.md
+++ b/docs/overview.md
@@ -83,12 +83,15 @@ Your application loads a **Framework Adapter**, which mounts the **Core Shell**.
 
 ## Key Features
 
+- **Compact TanStack Workbench**: The trigger reveals a branded light/dark panel with a 36px banner and Plugins, Marketplace, SEO, and Settings navigation. The whole panel keeps its existing hide-and-reveal lifecycle.
 - **Framework Agnostic**: Works with React, Vue, Solid, and Preact out of the box.
-- **Plugin System & Marketplace**: Build, share, and install devtools plugins with a simple API.
+- **Plugin System & Marketplace**: Build, share, discover, and install devtools plugins with a simple API. The fixed 44px secondary strip scrolls horizontally when space is limited. Marketplace is a separate header tab.
+- **Simultaneous Plugin Panes**: Open up to three plugins at once in equal-width panes while each plugin retains ownership of its own UI.
+- **Accessibility Auditing**: Add the accessibility plugin during development to surface issues alongside the other plugin panes; the basic React example includes an intentional audit fixture.
 - **Type-Safe Event System**: Communicate between plugins and the shell using fully typed events.
 - **Source Inspector**: Click any element in your app to jump straight to its source code (go-to-source).
 - **Console Piping**: Route devtools output to your browser console for a familiar debugging workflow.
-- **Picture-in-Picture Mode**: Pop the devtools panel out into its own window so it never covers your app.
+- **Picture-in-Picture Mode**: Pop the Workbench into a fixed-`100vh` window; reattaching restores its stored docked height.
 - **Customizable Hotkeys**: Rebind keyboard shortcuts to match your workflow.
 
 ## Next Steps
diff --git a/docs/superpowers/specs/2026-07-31-tanstack-devtools-branding-design.md b/docs/superpowers/specs/2026-07-31-tanstack-devtools-branding-design.md
new file mode 100644
index 00000000..9c1a5cc7
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-31-tanstack-devtools-branding-design.md
@@ -0,0 +1,385 @@
+# TanStack Devtools Branding and Compact Workbench Design
+
+- **Date:** 2026-07-31
+- **Status:** Approved for implementation
+- **Scope:** `@tanstack/devtools`, `@tanstack/devtools-ui`, `@tanstack/devtools-a11y`, and the React basic example
+
+## Context
+
+Core Devtools and shared UI duplicate raw color ramps in `packages/devtools/src/styles/tokens.ts` and `packages/devtools-ui/src/styles/tokens.ts`. The accessibility plugin has a third styling layer in `packages/devtools-a11y/src/core/styles/styles.ts`. The resulting UI uses unrelated gray/blue values, inconsistent light/dark states, and a plugin drawer that consumes panel width.
+
+The replacement is a compact Workbench with app-first work surfaces, TanStack brand chrome, and a horizontal Plugins strip. This is a presentation and accessibility change. It must retain the existing core navigation, plugin lifecycle, equal-width multi-plugin layout, whole-panel resizing, persistence, trigger, hide/reveal, and picture-in-picture (PiP) behavior.
+
+This specification serves shared-UI contributors who need an exact token/build contract and core/accessibility contributors who need state, lifecycle, and verification contracts. Each contributor can follow the relevant ownership section, migration step, named test paths, and acceptance criteria without consulting a separate design artifact.
+
+## Goals
+
+- Resolve one private semantic light/dark theme from `@tanstack/devtools-ui` for core, shared components, and the accessibility plugin.
+- Use exact TanStack color, Bricolage Grotesque, and Inter assets.
+- Replace the 0/192px horizontal plugin drawer with a horizontal Plugins strip that expands vertically from 32px to 48px.
+- Put Settings and Detach in the 36px TanStack Devtools banner.
+- Keep up to three active plugin panes mounted at equal width with static separators.
+- Register the accessibility plugin in `examples/react/basic` and provide deterministic audit content for browser verification.
+- Meet the contrast, keyboard, forced-colors, reduced-motion, and constrained-size requirements in this specification.
+
+## Non-goals and exemptions
+
+- Query, Router, and all user-provided plugin internals remain owner-styled. The example's `examples/react/basic/src/package-json-panel.tsx` is a user-plugin fixture and is out of scope.
+- No per-pane splitter or per-pane resizing is added. Plugin panes remain equal-width. Only the existing whole-panel height resize remains.
+- No public CSS-variable theme API, new theme value, or supported consumer token contract is introduced.
+- The native expanded operating-system select popup remains platform-owned. The closed control is in scope.
+- Vendor marks, plugin logos, screenshots, and SEO preview colors that simulate Google or social platforms may retain their source colors. Repository-owned chrome around them uses semantic roles.
+- The implementation does not change audit rules, plugin registration APIs, storage keys, state shapes, shortcuts, placement, or PiP capability.
+- Gradients, gradient text, glow, glass effects, neon effects, bounce/spring motion, and decorative card grids are prohibited in in-scope surfaces.
+
+## Chosen approach
+
+Add a private semantic theme entry point to `@tanstack/devtools-ui`, migrate shared primitives, consume that theme from core and accessibility, and then replace the drawer layout. This keeps one internal semantic source without converting the existing raw-token surface into a public compatibility promise.
+
+Rejected alternatives:
+
+1. Restyling each package independently retains three theme implementations.
+2. Publishing CSS variables as a customization API creates a new public compatibility contract.
+3. Keeping the vertical rail or horizontal drawer does not recover panel width.
+4. A single-active-pane tab canvas removes simultaneous plugin panes.
+
+## Package ownership and build contract
+
+### Shared UI
+
+`packages/devtools-ui/src/styles/semantic-theme.ts` is the new source for semantic colors, fonts, spacing, radii, shadows, and motion. `packages/devtools-ui/src/internal.ts` exports the resolved theme types and helpers for monorepo packages. The root `packages/devtools-ui/src/index.ts` does not re-export them.
+
+Add `./src/internal.ts` to the `entry` array in `packages/devtools-ui/vite.config.ts` and add this package export in `packages/devtools-ui/package.json`:
+
+```json
+"./internal": {
+  "import": {
+    "types": "./dist/esm/internal.d.ts",
+    "default": "./dist/esm/internal.js"
+  }
+}
+```
+
+Core and accessibility import from `@tanstack/devtools-ui/internal`. Publint must verify the subpath. The `/internal` name declares that it is package plumbing, not a supported application theming API.
+
+Keep every existing raw key in `packages/devtools-ui/src/styles/tokens.ts`. In particular, `Tag` accepts `keyof typeof tokens.colors`; removing or renaming a color key is a source/type compatibility break. Shared primitives migrate to semantic roles, but the legacy raw map and `Tag` keys remain available. Core's duplicated raw palette may be reduced only after no core style references it.
+
+### Core and accessibility
+
+- `packages/devtools/src/` owns the Workbench grid, banner, navigation, Plugins strip, Marketplace, whole-panel separator, and Devtools-owned plugin frames.
+- `packages/devtools-a11y/src/core/` consumes `/internal` semantic roles while retaining audit/config/export behavior.
+- Plugin content continues to receive only the existing `{ theme, devtoolsOpen }` props. No semantic theme object crosses the plugin boundary.
+
+## Semantic theme
+
+### Surfaces, text, borders, and controls
+
+All listed pairs are minimum verified contrast pairs for the named use. Text may be placed only on the backgrounds listed in its row.
+
+| Role | Light | Dark | Allowed pairing and ratio |
+|---|---|---|---|
+| `surface.app` | `#ffffff` | `#111111` | panel root |
+| `surface.workspace` | `#ffffff` | `#1f1f1f` | pane content |
+| `surface.subtle` | `#fafafa` | `#1b1b1b` | secondary region |
+| `surface.elevated` | `#ffffff` | `#2b2b2b` | popover/dialog |
+| `surface.brand` | `#eeebd4` | `#111111` | banner/brand-only region |
+| `text.primary` | `#111111` | `#ffffff` | app/ workspace: at least 16.48:1 |
+| `text.secondary` | `#3e3529` | `#aea691` | workspace: 12.03:1 / 6.80:1 |
+| `text.muted` | `#756c5b` | `#aea691` | subtle/workspace: 4.96:1 / 6.80:1 |
+| `text.mutedOnBrand` | `#3e3529` | `#aea691` | brand: 10.00:1 / 7.79:1 |
+| `text.inverse` | `#ffffff` | `#111111` | inverse/control fill |
+| `text.link` | `#003e53` | `#9cd5e2` | workspace: 11.58:1 / 10.23:1 |
+| `border.decorative` | `#eeebd4` | `#2d2d2d` | non-informational division only |
+| `border.control` | `#756c5b` | `#aea691` | workspace: 5.18:1 / 6.80:1 |
+| `border.focus` | `#003e53` | `#61adbf` | adjacent app surface: 11.58:1 / 7.41:1 |
+| `state.hover` | `#1111110f` | `#ffffff14` | overlay plus non-color cue |
+| `state.pressed` | `#1111111f` | `#ffffff1f` | overlay plus non-color cue |
+| `selection.fill` | `#3e3529` | `#c5c3bf` | white text 12.03:1 / `#111111` text 10.73:1 |
+
+`border.decorative` may be below 3:1 only when it carries no control boundary, state, focus, or separation needed to understand content. Inputs, checkboxes, buttons without a fill, whole-panel resize separator, selected indicators, and error boundaries use `border.control`, focus, or status borders and meet 3:1. Focus is a 2px outline with a 2px offset and cannot be clipped.
+
+Do not use `#756c5b` on cream; its ratio is 4.31:1. Muted banner copy uses `text.mutedOnBrand`. Blue is limited to focus, links, and information. Tooling selection uses charcoal/tint. Green, amber, and terracotta indicate status only.
+
+Light neutral and blue text ratios are recorded separately by surface:
+
+| Foreground | On `#ffffff` | On `#fafafa` |
+|---|---:|---:|
+| `#3e3529` | 12.03:1 | 11.52:1 |
+| `#003e53` | 11.58:1 | 11.09:1 |
+
+### Status roles
+
+Five roles cover component feedback and accessibility summaries. Each subtle treatment uses all three listed values. The contrast ratio is text against background; borders are also tested against the adjacent background.
+
+| Role | Light background | Light border | Light text | Text / border ratio |
+|---|---|---|---|---:|
+| success | `#d8f0da` | `#1d4226` | `#1d4226` | 9.36:1 / 9.36:1 |
+| warning | `#fef6cc` | `#624a00` | `#624a00` | 7.71:1 / 7.71:1 |
+| error | `#f9d8c4` | `#5f1a06` | `#5f1a06` | 9.56:1 / 9.56:1 |
+| info | `#d8f0f3` | `#003e53` | `#003e53` | 9.75:1 / 9.75:1 |
+| neutral | `#eeebd4` | `#756c5b` | `#3e3529` | 10.00:1 / 4.31:1 |
+
+| Role | Dark subtle background | Dark border | Dark text | Text / border ratio |
+|---|---|---|---|---:|
+| success | `#1d4226` | `#69bc75` | `#a2e1a9` | 7.46:1 / 4.87:1 |
+| warning | `#624a00` | `#f4d648` | `#fae884` | 6.78:1 / 5.83:1 |
+| error | `#5f1a06` | `#e06e49` | `#edaa8d` | 6.56:1 / 3.97:1 |
+| info | `#003e53` | `#61adbf` | `#9cd5e2` | 7.18:1 / 4.54:1 |
+| neutral | `#2b2b2b` | `#aea691` | `#c5c3bf` | 8.05:1 / 5.84:1 |
+
+Each status role also defines a solid treatment. `solidFill` is the control/badge background and `onFill` is its only text/icon foreground:
+
+| Role | Light `solidFill` | Light `onFill` | Ratio | Dark `solidFill` | Dark `onFill` | Ratio |
+|---|---|---|---:|---|---|---:|
+| success | `#1d4226` | `#ffffff` | 11.29:1 | `#69bc75` | `#111111` | 8.14:1 |
+| warning | `#624a00` | `#ffffff` | 8.40:1 | `#f4d648` | `#111111` | 13.09:1 |
+| error | `#5f1a06` | `#ffffff` | 12.83:1 | `#e06e49` | `#111111` | 5.84:1 |
+| info | `#003e53` | `#ffffff` | 11.58:1 | `#61adbf` | `#111111` | 7.41:1 |
+| neutral | `#3e3529` | `#ffffff` | 12.03:1 | `#c5c3bf` | `#111111` | 10.73:1 |
+
+Status on an untinted white/`#fafafa` surface uses light text `#1d4226`, `#624a00`, `#5f1a06`, `#003e53`, or `#3e3529`; each is at least 8.05:1 on `#fafafa`. Status on an untinted `#1f1f1f` surface uses dark text `#69bc75`, `#f4d648`, `#e06e49`, `#9cd5e2`, or `#c5c3bf`; each is at least 5.10:1. Every status also includes an icon and text label. A colored dot alone is insufficient.
+
+### Syntax roles
+
+Code surfaces are `#fafafa` in light mode and `#1f1f1f` in dark mode. Use these exact foregrounds:
+
+| Syntax role | Light | Ratio | Dark | Ratio |
+|---|---|---:|---|---:|
+| keyword | `#5f1a06` | 12.29:1 | `#e06e49` | 5.10:1 |
+| string | `#1d4226` | 10.82:1 | `#69bc75` | 7.10:1 |
+| number/constant | `#541f5d` | 11.62:1 | `#c56dcf` | 5.07:1 |
+| comment | `#756c5b` | 4.96:1 | `#aea691` | 6.80:1 |
+| property/link | `#003e53` | 11.09:1 | `#61adbf` | 6.47:1 |
+| punctuation/plain | `#3e3529` | 11.52:1 | `#c5c3bf` | 9.37:1 |
+| selection | `#003e53` on `#d8f0f3` | 9.75:1 | `#ffffff` on `#003e53` | 11.58:1 |
+
+The contrast tests label white and `#fafafa` cases separately; a passing white pair is not assumed to pass on `#fafafa`. `::selection` switches every syntax token to the selection foreground shown above so a token's original foreground never remains on the selection background.
+
+### Type, spacing, radius, depth, and motion
+
+- Bundle exactly `BricolageGrotesque-Bold.ttf` and the variable `Inter-latin.woff2` under `packages/devtools-ui/src/assets/fonts/`. Add `OFL-Bricolage-Grotesque.txt` and `OFL-Inter.txt` beside them. Do not bundle a mono font.
+- Use Bricolage only for the banner title, pane titles, first-level empty-state headings, and numeric audit totals. Use Inter elsewhere. Code uses the existing system monospace stack.
+- UI sizes are 12/17, 14/20, and 16/24px. Labels are 12/14px at weight 500 and 0.5px tracking. Body is weight 300 at 16px and weight 400 at 14px and 12px.
+- Spacing uses 4px increments. Compact controls use 4 or 8px gaps and 6px vertical/8px horizontal padding. Section gaps are 8, 12, or 16px.
+- Radius is 4px for controls, 6px for grouped surfaces, and 8px for dialogs/popovers.
+- Daily shadows are exactly `0 1px 2px rgba(0,0,0,0.03)` or `0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03)`. A modal/popover may use `0 25px 50px -12px rgba(0,0,0,0.20)`.
+- Plugins-strip CSS interpolation is 120ms ease-out. The existing drawer leave grace period remains 400ms. `prefers-reduced-motion: reduce` sets CSS interpolation duration to 0ms but retains the 400ms leave grace period to prevent accidental collapse.
+
+Register these exact faces once per target document:
+
+```css
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  src: url(<emitted BricolageGrotesque-Bold.ttf URL>) format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(<emitted Inter-latin.woff2 URL>) format('woff2');
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+```
+
+`semantic-theme.ts` imports both asset URLs so Vite emits them. An idempotent `/internal` helper inserts a style element with a fixed ID into the active `Document`. `ThemeContextProvider` installs it in its owner document; `PiPProvider` installs it again after clearing/copying the popup head so PiP does not depend on opener timing. On unmount, a shared document-level registration remains usable by another Devtools instance. If either request fails, Bricolage falls back to `ui-sans-serif, system-ui, sans-serif`, Inter falls back to `ui-sans-serif, system-ui, sans-serif`, and code retains the existing system monospace stack.
+
+The Bricolage license is copied with its bundled source asset. Before adding `OFL-Inter.txt`, retrieve `LICENSE.txt` from the official `rsms/inter` repository revision that supplied `Inter-latin.woff2`, verify that it declares SIL Open Font License 1.1 and the Inter Project Authors, record that revision and both SHA-256 hashes in the implementation PR, then copy it without modification. If provenance or license verification fails, do not ship the Inter binary and use the system-sans fallback.
+
+The two font binaries must total at most 160 KiB uncompressed and no third font binary may be emitted. Add a package-build assertion for emitted font count and total bytes; retain the existing 60 KB core JavaScript size limit through `pnpm size`.
+
+## Concrete component coverage
+
+Shared UI coverage is `Button` (`components/button.tsx`), `Checkbox` (`checkbox.tsx`), `Header`/`HeaderLogo` (`header.tsx`), `Input` (`input.tsx`), `TanStackLogo` (`logo.tsx`), `MainPanel` (`main-panel.tsx`), `Section`/`SectionTitle`/`SectionDescription`/`SectionIcon` (`section.tsx`), `Select` (`select.tsx`), `Tag` (`tag.tsx`), `ThemeContextProvider` (`theme.tsx`), `JsonTree` (`tree.tsx`), and the icons exported by `packages/devtools-ui/src/icons.ts`.
+
+Core coverage is `MainPanel` (`packages/devtools/src/components/main-panel.tsx`), `ContentPanel` (`content-panel.tsx`), `Tabs`/the replacement Workbench navigation (`tabs.tsx`), `TabContent` (`tab-content.tsx`), `Trigger` (`trigger.tsx`), `SourceInspector` (`source-inspector.tsx`), `SettingsTab` (`tabs/settings-tab.tsx`), `HotkeyConfig` (`tabs/hotkey-config.tsx`), `PluginsTab` (`tabs/plugins-tab.tsx`), `PluginMarketplace` (`tabs/plugin-marketplace.tsx`), all components in `tabs/marketplace/`, and repository-owned wrappers in `tabs/seo-tab/`.
+
+Accessibility coverage is `Shell`, `Settings`, `IssueList`, and `IssueCard` in `packages/devtools-a11y/src/core/components/`, `packages/devtools-a11y/src/core/styles/styles.ts`, and the severity highlight/tooltip styles created by `packages/devtools-a11y/src/core/utils/ui.utils.ts`.
+
+Accessibility severity mapping is explicit: critical uses error with a 3px solid outline, serious uses error with a 2px solid outline, moderate uses warning with a 2px solid outline, and minor uses info with a 2px dashed outline. Each issue and tooltip includes the written severity label, so critical and serious do not depend on outline thickness alone.
+
+Repository-owned hover, focus, pressed, selected, disabled, loading, empty, validation, error, severity, scrollbar, dialog, popover, and source-inspector states in those files use semantic roles. PackageJsonPanel and all external plugin descendants are excluded. SEO simulated result text/link colors and vendor assets use the exemption above.
+
+## Workbench geometry and constrained height
+
+The core open panel uses:
+
+```css
+grid-template-rows: 36px var(--plugins-strip-height, 32px) minmax(0, 1fr);
+```
+
+- Row 1 is a fixed 36px banner. It contains the emblem and “TanStack Devtools” on the left; explicit “Plugins” and “SEO” destination controls; and Settings, Detach, and Close controls on the right. Plugins, SEO, and Settings expose the current destination with `aria-current="page"`. Controls are 28×28px or wider and have accessible names.
+- Row 2 is a single-line horizontal Plugins strip. It is 32px idle and 48px while hovered, `:focus-within`, Marketplace-open, or zero-active-plugin forced expansion applies. It never wraps and uses horizontal scrolling when content exceeds width.
+- Row 3 contains zero to three equal-width plugin panes or the selected core view. Active plugin panes use `display:flex`; each mount is `flex: 1 1 0; min-width: 0`. Adjacent panes have a static 1px `border.decorative` separator. There are no pane resize handles.
+
+The 32→48px strip grows downward and its tab content translates vertically within the 16px change, matching the current drawer's reveal concept on the new axis. Pointer leave schedules contraction after the existing 400ms grace period. Focus leaving the strip uses the same grace period. Focus never moves during contraction.
+
+At widths `<=360px`, hide the “TanStack Devtools” text and retain the emblem with accessible name “TanStack Devtools”. The strip remains one row. At whole-panel heights 84px and above, all three grid rows operate normally. At 70–83px, compact-height mode fixes the banner at 36px and strip at 32px, disables the 48px expansion, and leaves `minmax(0,1fr)` for any remaining content; all banner and strip controls remain operable. Dragging the existing whole-panel separator to a computed height `<70px` keeps the existing result: set `isOpen` false. The stored height, close threshold, and `persistOpen` semantics are not changed.
+
+PiP uses `100vh`, displays the same grid, and omits Detach and Close as it does today. As an intentional compatibility exception, PiP also omits the resize separator: popup height is window-owned, and the current handle can only mutate the hidden future attached height. Detaching snapshots the stored attached height without changing it; closing PiP/reattaching restores that exact height. The trigger is not interactive in PiP. The component is always described as a **horizontal Plugins strip with vertical expansion**; “vertical strip” is not used.
+
+## Whole-panel resize separator
+
+Preserve the current left-button pointer drag calculation for top/bottom placement in `packages/devtools/src/devtools.tsx`. Add keyboard semantics to the same drag handle:
+
+- `role="separator"`, `aria-orientation="horizontal"`, `tabIndex="0"`, and accessible name “Resize TanStack Devtools panel”.
+- The separator exists only while attached. Its maximum is `Math.floor(window.innerHeight * 0.9)`. `aria-valuemax` is that integer, `aria-valuenow` is the stored height clamped to `[70, aria-valuemax]`, and `aria-valuemin="70"`.
+- For a bottom-attached panel, ArrowUp increases height by 10px and ArrowDown decreases it by 10px. For a top-attached panel, ArrowDown increases height by 10px and ArrowUp decreases it by 10px. Shift changes the step to 50px. This matches the physical separator direction.
+- Home sets 70px. End sets the computed maximum above. Every keyboard change uses the same `setHeight` and `<70px` close paths as pointer resizing. PiP has no pointer or keyboard resize path.
+- The separator has a visible focus outline and a control-boundary contrast of at least 3:1.
+
+## Navigation and state transitions
+
+The strip is rendered independently of the selected core view so plugin choices remain available from SEO and Settings. The following transitions are normative:
+
+| Action/state | State change | Rendered result and lifecycle |
+|---|---|---|
+| Select SEO | `activeTab = 'seo'`; `activePlugins` unchanged; Marketplace closed | SEO view replaces plugin mounts; no plugin `destroy` call |
+| Select Settings | `activeTab = 'settings'`; `activePlugins` unchanged; Marketplace closed | Settings view replaces plugin mounts; no plugin `destroy` call |
+| Select banner Plugins destination | `activeTab = 'plugins'`; Marketplace closed; `activePlugins` unchanged | Existing active mounts return in activation order; the Plugins control has `aria-current="page"` |
+| Select Marketplace | `activeTab = 'plugins'`; Marketplace open; `activePlugins` unchanged; strip forced to 48px except compact-height mode | Marketplace replaces plugin mounts; no plugin `destroy` call |
+| Select inactive plugin | `activeTab = 'plugins'`; Marketplace closed; append its ID when fewer than three are active | New mount is appended; all panes become equal width; `render` receives current props |
+| Select active plugin | `activeTab = 'plugins'`; Marketplace closed; remove its ID | Call `destroy(pluginId)` once before removing its mount; remaining panes become equal width |
+| Select a fourth inactive plugin from Plugins, SEO, or Settings | `activeTab = 'plugins'`; Marketplace closed; `activePlugins` unchanged | The existing three mounts render in activation order; no `render`/`destroy` call is added for the rejected plugin |
+| Zero registered plugins | `plugins = []`; `activeTab = 'plugins'` | Render the existing Marketplace fallback; strip contains the Marketplace destination and does not render plugin controls |
+| Registered plugins with zero active | `plugins.length > 0`; `activePlugins = []`; `activeTab = 'plugins'` | Render the zero-active workspace state; strip forced to 48px, or 32px at 70–83px height, so registered plugins remain selectable |
+| Three active plugins | Three IDs in activation order | Three equal-width mounts with two static 1px separators; no resize controls |
+| Close whole panel or press Escape | Existing `isOpen`/`persistOpen` toggle | Plugin instances are not destroyed; active `render` calls receive `devtoolsOpen: false` through the existing effect |
+| Theme change | Existing `theme` value changes | Active plugin `render` and custom name callbacks receive the new `light | dark` value |
+| Enter PiP | Existing PiP request and window state; stored attached height unchanged | Same active/core view; panel uses `100vh`; Detach, Close, and resize separator omitted; reattachment restores the exact pre-detach attached height |
+
+## Plugin compatibility contract
+
+- Preserve `PLUGIN_CONTAINER_ID = 'plugin-container'` and `PLUGIN_TITLE_CONTAINER_ID = 'plugin-title-container'`. Mount and title IDs remain `${PLUGIN_CONTAINER_ID}-${plugin.id}` and `${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`.
+- Preserve explicit IDs and generated ID behavior, registration order in the strip, activation order in `activePlugins`, `MAX_ACTIVE_PLUGINS = 3`, default-open behavior, and stored ID filtering.
+- Preserve `name: string | ((el: HTMLHeadingElement, props) => void)`. The function still receives the same live `HTMLHeadingElement`, theme, and `devtoolsOpen` values.
+- Preserve `render(el: HTMLDivElement, props)` calls when an active mount exists and reactive theme/open inputs change. Moving between Plugins, Marketplace, SEO, or Settings may unmount/remount DOM but does not call plugin `destroy`.
+- Preserve `destroy(pluginId)` only when an active plugin is toggled inactive. Whole-panel close, core-view navigation, Marketplace navigation, and PiP do not add destroy calls.
+- Do not apply core typography, colors, or descendant selectors inside plugin mount elements. Devtools owns only mount sizing, background frame, title control, and inter-pane separator.
+- Replace each click-only plugin title container with a focusable wrapper using `role="button"`, `tabIndex="0"`, `aria-labelledby` pointing to the existing live `h3` ID, and `aria-pressed` for active state. Click, Enter, and Space invoke the same toggle; Space prevents page scrolling. Keep the live `h3` so the custom `HTMLHeadingElement` callback is unchanged. A string name receives a core-owned text class. A callback-owned `h3` and all of its descendants receive no core font family, size, weight, text-transform, or foreground-color rule; only the wrapper's layout, background, border, and focus state are core-owned.
+
+## Accessibility and forced colors
+
+- Normal text is at least 4.5:1; large text and required non-text boundaries are at least 3:1. Tests use the exact pair tables above.
+- Selected/open/severity/validation states use text or an accessible name plus an icon/border; color is not the only cue.
+- Hover and `:focus-within` expand the Plugins strip. Horizontal overflow is operable with keyboard focus and browser scrolling.
+- Icon buttons are actual buttons with names: “SEO”, “Settings”, “Detach TanStack Devtools”, “Close TanStack Devtools”, and plugin-derived names. New names are asserted; the implementation does not assume the current icon-only controls already have names.
+- At 200% browser zoom, banner controls remain reachable, the strip scrolls, and plugin/core content scrolls without page-level horizontal overflow.
+- Under `@media (forced-colors: active)`, surfaces use `Canvas`/`CanvasText`, controls use `ButtonFace`/`ButtonText`, and selected plugins use `Highlight`/`HighlightText`. Retain `forced-color-adjust: auto` on controls. Focused controls, inputs, checkboxes, pane separators, and the attached-only resize separator retain a `ButtonText` or `CanvasText` border at least 1 CSS px wide. The emblem uses `currentColor` or remains hidden behind the accessible brand name; no state depends on raster/SVG color.
+
+## React basic accessibility fixture
+
+Add `@tanstack/devtools-a11y: workspace:*` to `examples/react/basic/package.json`. In `examples/react/basic/src/setup.tsx`, use the exact development API:
+
+```ts
+import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'
+
+plugins={[a11yDevtoolsPlugin(), /* existing plugins */]}
+```
+
+Add `examples/react/basic/src/a11y-audit-fixture.tsx` exporting `A11yAuditFixture`. Render it only when `import.meta.env.DEV` is true. The fixture contains an inline-data image without `alt` (`image-alt`), an empty button (`button-name`), and an input without a label (`label`), each with a fixed test ID. Do not randomize content, fetch data, or use timers. Browser audit assertions require those three axe rule IDs and may allow additional host/browser findings.
+
+The React entry returns a no-op accessibility plugin outside development. Therefore accessibility-plugin browser verification must run against the one-shot Vite development server from `pnpm --filter @tanstack/devtools-example-react-basic dev`, not `vite preview` or a production build. Start it natively in Windows, await the browser checks, and terminate the complete process tree.
+
+Query, Router, duplicate Router, and Package.json panels remain useful multi-pane fixtures but are not recolored.
+
+## Migration sequence
+
+1. Add `semantic-theme.ts`, `internal.ts`, font assets/licenses, Vite entry, package export, and semantic/contrast tests in `packages/devtools-ui` without removing legacy token keys.
+2. Migrate the concrete shared components to semantic roles.
+3. Migrate core-owned styles while retaining the current drawer geometry.
+4. Migrate accessibility-owned components/styles without changing audit output.
+5. Add `a11yDevtoolsPlugin()` and `A11yAuditFixture` to the React basic development example.
+6. Implement the 36/32/minmax Workbench grid, banner navigation, horizontal strip, and additive resize-separator keyboard behavior.
+7. Remove only unused core literals/raw ramps. Retain shared legacy raw keys and exempt external/vendor/simulated SEO colors.
+8. Apply the documentation impact below. No public theme API documentation is added.
+
+## Documentation Impact
+
+- Update `docs/architecture.md` in its Core Layer description and diagram labels: document the 36px banner, explicit Plugins/SEO/Settings destinations, horizontal Plugins strip with vertical expansion, equal-width multi-plugin mounts, and private `@tanstack/devtools-ui/internal` dependency. This serves contributors tracing shell ownership and plugin mounting.
+- Update `docs/overview.md` in Core and Key Features: describe the banner navigation, horizontal Plugins strip, simultaneous plugin panes, Marketplace destination, and light/dark TanStack styling. This serves evaluators learning what the shell exposes.
+- Do not change `docs/plugins/a11y.md`: the package install, exact `a11yDevtoolsPlugin()` call, audit behavior, severity model, and public configuration remain unchanged. The deterministic basic-example fixture is test-only example content, not an accessibility-plugin user workflow. A visual-theme-only edit would add no user action to this page.
+- Update `examples/react/basic/README.md`: use the repository's pnpm filter command, state that browser audit testing requires Vite development mode, identify `A11yAuditFixture` as intentionally invalid development-only content, and list the three expected axe rule IDs. This serves contributors reproducing the browser matrix.
+
+## Test Strategy
+
+Tests are grouped by unit, integration, and browser scope. Each category includes happy, edge, and failure coverage. Existing test paths are extended instead of creating a second test framework.
+
+### Unit
+
+| Case | Path | Assertions |
+|---|---|---|
+| Happy | New `packages/devtools-ui/tests/semantic-theme.test.ts` | Exact role values, light/dark resolution, 120ms motion, raw `tokens.colors`/`Tag` key retention, `/internal` types and exports, two emitted font files, and <=160 KiB font total |
+| Happy | New `packages/devtools-ui/tests/contrast.test.ts` | Every white and `#fafafa` text case separately, including the exact `#3e3529` and `#003e53` ratios; dark workspace; all five subtle and `solidFill`/`onFill` roles in both modes; syntax; selection foreground switching; focus; and control borders |
+| Edge | Existing `packages/devtools-ui/tests/index.test.ts` and `tree.tsx` | All exported component states, string/custom plugin-name typography boundary helpers, theme propagation, disabled/focus states, and system-monospace retention |
+| Failure | New `packages/devtools-ui/tests/fonts.test.ts` | Missing font request leaves declared system-sans fallbacks, duplicate registration is idempotent, popup registration targets the popup document, and license files/provenance metadata exist |
+| Happy | Existing `packages/devtools-a11y/tests/index.test.ts` and `export.test.ts` | Semantic theme consumption and unchanged React/Solid/Angular plugin exports |
+| Edge/error | Existing `packages/devtools-a11y/tests/config.test.ts` | Four audit severities map to labeled semantic status treatments; invalid/missing persisted config retains current fallback behavior |
+
+### Integration
+
+| Case | Path | Assertions |
+|---|---|---|
+| Happy | New `packages/devtools/tests/workbench.test.tsx` | Every normative navigation row; explicit Plugins destination; 1–3 equal-width mounts; static separators; Settings/SEO/Marketplace/PiP; live IDs and callback heading |
+| Edge | `packages/devtools/tests/workbench.test.tsx` | Zero registered versus registered-zero-active; fourth inactive selection from Plugins/SEO/Settings; 32/48px strip; 400ms grace; focus leave/re-entry; 69/70/83/84px; `<=360px`; top/bottom placement |
+| Failure | `packages/devtools/tests/workbench.test.tsx` | Rejected fourth plugin leaves three IDs/order; blocked `window.open` preserves current thrown error; callback/render exceptions retain current fail-loud behavior; no extra destroy calls; timers clean up on unmount |
+| Happy | Existing `packages/devtools/tests/index.test.ts` | Default/custom trigger, URL flag, open hotkey, Escape, source inspector, theme, close/reopen persistence, pointer whole-panel resize, and additive keyboard separator |
+| Edge/error | Existing `packages/devtools/tests/index.test.ts` | Malformed storage fallback, storage write failure, `<70px` close, 90%-viewport attached maximum, separator omission in PiP, exact pre-detach height after reattachment, mount aborted before dynamic import, and existing repeated mount/unmount errors |
+| Happy | Existing `packages/devtools/src/context/devtools-context.test.ts` | Explicit/generated IDs, registration and activation order, default-open, stored ID filtering, reactive plugin replacement, mount/remount, render input changes, and destroy-only-on-toggle |
+| Failure | Existing `packages/devtools/src/context/devtools-context.test.ts` | Removed plugin IDs are filtered, duplicate/generated IDs retain existing behavior, malformed stored state falls back through the existing parser, and a plugin replacement cannot reorder retained active IDs |
+| Happy/error | Existing `packages/devtools-a11y/tests/index.test.ts` plus example type/build | Exact React factory call works in development; production remains no-op; deterministic rule IDs are declared without timers/network |
+
+### Browser
+
+Use `pnpm --filter @tanstack/devtools-example-react-basic dev` and browser automation. Before every independent scenario, run the following in the page, then reload and wait for the app and Devtools event bus:
+
+```js
+localStorage.removeItem('tanstack_devtools_settings')
+localStorage.removeItem('tanstack_devtools_state')
+localStorage.removeItem('pip_open')
+localStorage.removeItem('tanstack-devtools-a11y-config')
+location.reload()
+```
+
+| Case | Matrix and assertions |
+|---|---|
+| Happy | Light and dark at 1280×720: trigger/reveal, explicit Plugins/SEO/Settings destinations, Marketplace, one and three active plugins, equal widths/static separators, A11y audit with `image-alt`/`button-name`/`label`, Detach/PiP with no resize separator, exact pre-detach height after return, close/reopen, and zero console errors |
+| Edge | Light and dark at 360×480 and 320×400; panel heights 70, 83, 84, and 400px; 200% zoom; keyboard-only strip overflow; 400ms focus/pointer grace; reduced motion; top/bottom panel placement; three panes; owner colors unchanged in Query/Router/PackageJsonPanel |
+| Failure | 69px pointer/keyboard resize closes the attached panel; a blocked popup follows the current error path without changing active state; failed font requests render system-sans controls without clipping; production build exposes the no-op accessibility plugin; native expanded select remains platform-styled |
+| Forced colors | With `forced-colors: active`, create hidden reference elements authored with each required system-color pair. Compare computed surface, control, and selected-plugin colors to the corresponding reference element, because browsers may resolve keywords to RGB values. If the automation environment cannot expose forced-color computed values, assert the authored forced-colors CSS plus keyboard/state behavior. Never compare computed values to literal keyword strings. Also assert that text/state remains present when authored colors/background images are suppressed and that focused controls, inputs, checkboxes, static pane separators, and the attached resize separator have a system-color border at least 1 CSS px wide. |
+
+Run focused tests first. Then run Prettier check, affected ESLint, typecheck, package builds, publint, example build, `pnpm test:docs`, font asset-count/byte check, and `pnpm size`. The final repository gate is the root command `pnpm run test`. All commands are native Windows one-shots; no watch, Vite, Node, esbuild, or Vitest process remains afterward.
+
+## Risks and controls
+
+- Mixed raw/semantic styles: search only the in-scope concrete files and fail review on non-exempt color literals.
+- Plugin selector bleed: prohibit descendant typography/color rules below plugin mount IDs and compare external plugin screenshots before/after.
+- Font size increase: include only listed weights/formats and enforce `pnpm size` plus package build output review.
+- Height regression: test exact 69/70/83/84px boundaries and both top/bottom placement.
+- Lifecycle regression: assert callback counts and DOM IDs across every navigation row.
+- Development-only a11y behavior: require Vite development mode for audit browser tests and separately verify the production build remains no-op.
+
+## Acceptance criteria
+
+- [ ] `@tanstack/devtools-ui/internal` is emitted, typed, publint-valid, and not re-exported from the package root.
+- [ ] Core and accessibility resolve the exact semantic tables through `/internal`; all legacy `tokens.colors` and `Tag` color keys remain.
+- [ ] Exactly `BricolageGrotesque-Bold.ttf` and `Inter-latin.woff2` plus the two verified OFL files are packaged; both font faces use `font-display: swap`, opener and PiP registration passes, fallback rendering passes, binary count is two, and raw binary total is <=160 KiB.
+- [ ] `#3e3529` measures 12.03:1 on white and 11.52:1 on `#fafafa`; `#003e53` measures 11.58:1 on white and 11.09:1 on `#fafafa`; all five subtle and `solidFill`/`onFill` roles in both modes, syntax selection foregrounds, borders, focus, and muted-on-brand roles pass automated checks.
+- [ ] Shared components, named core files, and named accessibility files have no non-exempt raw color literals after migration.
+- [ ] External plugin descendants, PackageJsonPanel, vendor marks, and simulated SEO colors retain owner/source styling.
+- [ ] Grid rows are 36px, 32/48px, and `minmax(0,1fr)`; CSS motion is 120ms and leave grace is 400ms.
+- [ ] Heights 70–83px use 36/32px compact mode; 84px enables expansion; a drag result below 70px closes the whole panel with existing persistence semantics.
+- [ ] At widths `<=360px`, the visible wordmark is removed and the accessible “TanStack Devtools” name remains.
+- [ ] Zero to three plugins follow the navigation table, render at equal width with static 1px separators, and expose no per-pane resizing.
+- [ ] Zero registered plugins renders Marketplace; registered-zero-active renders its separate workspace state and forces strip expansion outside compact-height mode.
+- [ ] Selecting a fourth inactive plugin from Plugins, SEO, or Settings enters Plugins, closes Marketplace, retains the same three IDs/order, and renders the same three mounts. IDs, callback element type, render/destroy behavior, mount behavior, and `MAX_ACTIVE_PLUGINS` remain compatible.
+- [ ] Explicit Plugins, SEO, Settings, Marketplace, close, theme, and PiP transitions match the normative table; Plugins/SEO/Settings expose `aria-current="page"`.
+- [ ] Each plugin control is a `role="button"`/`tabIndex="0"` wrapper with Enter/Space, `aria-labelledby`, and `aria-pressed`; callback-owned heading subtrees have no core typography or foreground override.
+- [ ] Attached whole-panel pointer resizing is unchanged; keyboard directions match top/bottom attachment and max/now/End use 90% attached height. PiP has no resize separator, stays `100vh`, and reattachment restores the exact pre-detach stored height.
+- [ ] Forced-colors tests compare computed values with hidden system-color reference elements or verify authored CSS plus behavior; reduced-motion, keyboard-only, 200% zoom, horizontal overflow, focus, font-failure, and blocked-popup tests pass.
+- [ ] React basic calls `a11yDevtoolsPlugin()` in development and the deterministic fixture yields `image-alt`, `button-name`, and `label`.
+- [ ] Each browser scenario clears `tanstack_devtools_settings`, `tanstack_devtools_state`, `pip_open`, and `tanstack-devtools-a11y-config`, reloads, and then begins assertions.
+- [ ] `docs/architecture.md`, `docs/overview.md`, and `examples/react/basic/README.md` contain the specified updates; `docs/plugins/a11y.md` remains unchanged for the recorded rationale.
+- [ ] Unit, integration, browser, formatting, ESLint, typecheck, build, publint, docs links, asset-size, `pnpm size`, and final root `pnpm run test` checks pass with no remaining test/server processes.
diff --git a/examples/react/basic/README.md b/examples/react/basic/README.md
index 1cf88926..3f99d7bc 100644
--- a/examples/react/basic/README.md
+++ b/examples/react/basic/README.md
@@ -1,6 +1,15 @@
-# Example
+# Basic React example
 
-To run this example:
+Run the example from the repository root:
 
-- `npm install`
-- `npm run dev`
+```sh
+pnpm --filter @tanstack/devtools-example-react-basic dev
+```
+
+The accessibility plugin is registered only in development builds. The page's `A11yAuditFixture` deliberately includes three violations so the plugin has deterministic findings to display:
+
+- `image-alt`: an image without alternative text
+- `button-name`: an icon-only button without an accessible name
+- `label`: an input without an associated label
+
+The fixture is intentionally invalid test content, not an accessibility pattern to copy. Browser extensions, environment differences, or future audit rules may report additional findings.
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
index 70918cd2..2450f411 100644
--- a/examples/react/basic/package.json
+++ b/examples/react/basic/package.json
@@ -6,9 +6,11 @@
     "dev": "vite --port=3005",
     "build": "vite build",
     "preview": "vite preview",
+    "test:fixture": "node ./scripts/check-a11y-fixture.mjs",
     "test:types": "tsc"
   },
   "dependencies": {
+    "@tanstack/devtools-a11y": "workspace:*",
     "@tanstack/devtools-client": "0.0.8",
     "@tanstack/devtools-event-client": "0.5.0",
     "@tanstack/react-devtools": "^0.10.9",
diff --git a/examples/react/basic/scripts/check-a11y-fixture.mjs b/examples/react/basic/scripts/check-a11y-fixture.mjs
new file mode 100644
index 00000000..fc0804fd
--- /dev/null
+++ b/examples/react/basic/scripts/check-a11y-fixture.mjs
@@ -0,0 +1,52 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const setup = readFileSync(join(root, 'src/setup.tsx'), 'utf8')
+const fixture = readFileSync(join(root, 'src/a11y-audit-fixture.tsx'), 'utf8')
+const example = readFileSync(join(root, 'src/index.tsx'), 'utf8')
+const exampleCss = readFileSync(join(root, 'src/example.css'), 'utf8')
+assert.match(
+  setup,
+  /import\s+\{\s*a11yDevtoolsPlugin\s*\}\s+from\s+['"]@tanstack\/devtools-a11y\/react['"]/,
+)
+assert.equal(setup.match(/a11yDevtoolsPlugin\(\)/g)?.length, 1)
+assert.match(setup, /position:\s*['"]bottom-left['"]/)
+assert.match(setup, /import\.meta\.env\.DEV\s*&&\s*<A11yAuditFixture\s*\/>/)
+assert.match(example, /import ['"]\.\/example\.css['"]/)
+assert.match(fixture, /data-testid="a11y-image-alt"[^>]*src=[^>]*\/>/)
+assert.doesNotMatch(fixture, /data-testid="a11y-image-alt"[^>]*\balt=/)
+assert.match(
+  fixture,
+  /<button\s+data-testid="a11y-button-name"\s+type="button"\s*\/>/,
+)
+assert.match(fixture, /<input\s+data-testid="a11y-label"\s+type="text"\s*\/>/)
+assert.doesNotMatch(fixture, /setTimeout|setInterval|fetch\(|https?:\/\//)
+const darkStyles = exampleCss.slice(
+  exampleCss.indexOf('@media (prefers-color-scheme: dark)'),
+)
+assert.match(
+  darkStyles,
+  /\.example-actions p\s*\{[^}]*color:\s*#aea691;/,
+  'dark action copy must override the light foreground on #111111',
+)
+
+const luminance = (hex) => {
+  const channels = hex
+    .slice(1)
+    .match(/.{2}/g)
+    .map((channel) => Number.parseInt(channel, 16) / 255)
+    .map((channel) =>
+      channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4,
+    )
+  return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]
+}
+const contrast = (foreground, background) => {
+  const values = [luminance(foreground), luminance(background)].sort(
+    (a, b) => b - a,
+  )
+  return (values[0] + 0.05) / (values[1] + 0.05)
+}
+assert.ok(contrast('#aea691', '#111111') >= 4.5)
diff --git a/examples/react/basic/src/a11y-audit-fixture.tsx b/examples/react/basic/src/a11y-audit-fixture.tsx
new file mode 100644
index 00000000..1365a8bd
--- /dev/null
+++ b/examples/react/basic/src/a11y-audit-fixture.tsx
@@ -0,0 +1,14 @@
+export function A11yAuditFixture() {
+  return (
+    <section
+      data-testid="a11y-audit-fixture"
+      aria-label="Accessibility audit fixture"
+      className="a11y-audit-fixture"
+    >
+      {/* prettier-ignore */}
+      <img data-testid="a11y-image-alt" src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" />
+      <button data-testid="a11y-button-name" type="button" />
+      <input data-testid="a11y-label" type="text" />
+    </section>
+  )
+}
diff --git a/examples/react/basic/src/example.css b/examples/react/basic/src/example.css
new file mode 100644
index 00000000..11521b4a
--- /dev/null
+++ b/examples/react/basic/src/example.css
@@ -0,0 +1,248 @@
+:root {
+  color: #3e3529;
+  background: #f7f5ef;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 20rem;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top right, #eeebd4, transparent 36rem), #f7f5ef;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.example-shell {
+  width: min(100% - 2rem, 48rem);
+  margin: 0 auto;
+  padding: clamp(2rem, 7vw, 5rem) 0 7rem;
+}
+
+.example-header {
+  max-width: 40rem;
+  margin-bottom: 2rem;
+}
+
+.example-eyebrow {
+  margin: 0 0 0.5rem;
+  color: #624a00;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.example-header h1,
+.example-content h2,
+.example-content h1 {
+  color: #111111;
+  letter-spacing: -0.035em;
+}
+
+.example-header h1 {
+  margin: 0;
+  font-size: clamp(2rem, 6vw, 3.25rem);
+  line-height: 1.05;
+}
+
+.example-header p:not(.example-eyebrow) {
+  max-width: 36rem;
+  margin: 1rem 0 0;
+  color: #756c5b;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.example-card {
+  margin-top: 1rem;
+  padding: clamp(1rem, 3vw, 1.5rem);
+  border: 1px solid #eeebd4;
+  border-radius: 0.75rem;
+  background: #ffffff;
+  box-shadow:
+    0 1px 2px rgb(17 17 17 / 0.03),
+    0 10px 24px rgb(62 53 41 / 0.05);
+}
+
+.example-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.example-actions p {
+  margin: 0;
+  color: #756c5b;
+}
+
+.example-actions strong {
+  color: #111111;
+  font-variant-numeric: tabular-nums;
+}
+
+.example-button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.example-shell button:not([data-testid^='a11y-']) {
+  min-height: 2.5rem;
+  padding: 0.55rem 0.875rem;
+  border: 1px solid #3e3529;
+  border-radius: 0.5rem;
+  background: #3e3529;
+  color: #ffffff;
+  cursor: pointer;
+  font-weight: 650;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    transform 120ms ease;
+}
+
+.example-shell button:not([data-testid^='a11y-']):hover {
+  border-color: #624a00;
+  background: #624a00;
+}
+
+.example-shell button:not([data-testid^='a11y-']):active {
+  transform: scale(0.96);
+}
+
+.example-shell :focus-visible {
+  outline: 3px solid #61adbf;
+  outline-offset: 3px;
+}
+
+.example-content {
+  color: #3e3529;
+  line-height: 1.65;
+}
+
+.example-content h2,
+.example-content h1 {
+  margin: 0 0 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1.25;
+}
+
+.example-content p {
+  max-width: 66ch;
+}
+
+.example-content a {
+  color: #003e53;
+  font-weight: 650;
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.18em;
+}
+
+.a11y-audit-fixture {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border: 1px dashed #756c5b;
+  border-radius: 0.5rem;
+  background: #ffffff;
+}
+
+.a11y-audit-fixture button,
+.a11y-audit-fixture input {
+  min-height: 2rem;
+}
+
+@media (max-width: 36rem) {
+  .example-shell {
+    width: min(100% - 1.5rem, 48rem);
+    padding-top: 1.5rem;
+  }
+
+  .example-actions {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .example-button-row {
+    width: 100%;
+  }
+
+  .example-button-row button {
+    flex: 1 1 12rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #c5c3bf;
+    background: #111111;
+  }
+
+  body {
+    background:
+      radial-gradient(circle at top right, #003e53, transparent 36rem), #111111;
+  }
+
+  .example-eyebrow {
+    color: #fae884;
+  }
+
+  .example-header h1,
+  .example-content h2,
+  .example-content h1,
+  .example-actions strong {
+    color: #ffffff;
+  }
+
+  .example-header p:not(.example-eyebrow),
+  .example-actions p {
+    color: #aea691;
+  }
+
+  .example-card,
+  .a11y-audit-fixture {
+    border-color: #2d2d2d;
+    background: #1f1f1f;
+    box-shadow:
+      0 1px 2px rgb(0 0 0 / 0.2),
+      0 10px 24px rgb(0 0 0 / 0.3);
+  }
+
+  .example-content {
+    color: #c5c3bf;
+  }
+
+  .example-content a {
+    color: #9cd5e2;
+  }
+
+  .example-shell button:not([data-testid^='a11y-']) {
+    border-color: #aea691;
+    background: #aea691;
+    color: #111111;
+  }
+
+  .example-shell button:not([data-testid^='a11y-']):hover {
+    border-color: #ffffff;
+    background: #ffffff;
+  }
+}
diff --git a/examples/react/basic/src/index.tsx b/examples/react/basic/src/index.tsx
index 7fe7eeab..00ca1317 100644
--- a/examples/react/basic/src/index.tsx
+++ b/examples/react/basic/src/index.tsx
@@ -11,6 +11,7 @@ import Devtools from './setup'
 import { queryPlugin } from './plugin'
 import { Button } from './button'
 import { Feature } from './feature'
+import './example.css'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -168,37 +169,57 @@ function App() {
   const [win, setWin] = useState<Window | null>(null)
   const [postId, setPostId] = useState(-1)
   return (
-    <div>
+    <main className="example-shell">
       <Context.Provider value={{ count: state, setCount: setState }}>
         <QueryClientProvider client={queryClient}>
-          <h1>TanStack Devtools React Basic Example</h1>
-          current count: {state}
-          <Button onClick={() => setState(state + 1)}>Click me</Button>
-          <Button onClick={() => setWin(window.open('', '', 'popup'))}>
-            Click me to open new window
-          </Button>
+          <header className="example-header">
+            <p className="example-eyebrow">TanStack Devtools</p>
+            <h1>React basic example</h1>
+            <p>
+              Explore cached posts, plugin panels, and the development-only
+              accessibility fixture in one focused sandbox.
+            </p>
+          </header>
+          <section
+            className="example-card example-actions"
+            aria-label="Example controls"
+          >
+            <p>
+              Current count <strong>{state}</strong>
+            </p>
+            <div className="example-button-row">
+              <Button onClick={() => setState(state + 1)}>
+                Increment count
+              </Button>
+              <Button onClick={() => setWin(window.open('', '', 'popup'))}>
+                Open a new window
+              </Button>
+            </div>
+          </section>
           {win && createPortal(<Mounted />, win.document.body)}
-          <Feature />
-          <p>
-            As you visit the posts below, you will notice them in a loading
-            state the first time you load them. However, after you return to
-            this list and click on any posts you have already visited again, you
-            will see them load instantly and background refresh right before
-            your eyes!{' '}
-            <strong>
-              (You may need to throttle your network speed to simulate longer
-              loading sequences)
-            </strong>
-          </p>
-          {postId > -1 ? (
-            <Post postId={postId} setPostId={setPostId} />
-          ) : (
-            <Posts setPostId={setPostId} />
-          )}
+          <section className="example-card example-content">
+            <Feature />
+            <p>
+              As you visit the posts below, you will notice them in a loading
+              state the first time you load them. However, after you return to
+              this list and click on any posts you have already visited again,
+              you will see them load instantly and background refresh right
+              before your eyes!{' '}
+              <strong>
+                (You may need to throttle your network speed to simulate longer
+                loading sequences)
+              </strong>
+            </p>
+            {postId > -1 ? (
+              <Post postId={postId} setPostId={setPostId} />
+            ) : (
+              <Posts setPostId={setPostId} />
+            )}
+          </section>
           <Devtools />
         </QueryClientProvider>
       </Context.Provider>
-    </div>
+    </main>
   )
 }
 
diff --git a/examples/react/basic/src/setup.tsx b/examples/react/basic/src/setup.tsx
index c246fcea..f5f918ca 100644
--- a/examples/react/basic/src/setup.tsx
+++ b/examples/react/basic/src/setup.tsx
@@ -10,6 +10,8 @@ import {
   createRouter,
 } from '@tanstack/react-router'
 import { TanStackDevtools } from '@tanstack/react-devtools'
+import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'
+import { A11yAuditFixture } from './a11y-audit-fixture'
 import { PackageJsonPanel } from './package-json-panel'
 
 const rootRoute = createRootRoute({
@@ -62,8 +64,9 @@ export default function DevtoolsExample() {
         eventBusConfig={{
           connectToServerBus: true,
         }}
-        config={{ sourceAction: 'copy-path' }}
+        config={{ sourceAction: 'copy-path', position: 'bottom-left' }}
         plugins={[
+          a11yDevtoolsPlugin(),
           {
             name: 'TanStack Query',
             render: <ReactQueryDevtoolsPanel />,
@@ -88,6 +91,7 @@ export default function DevtoolsExample() {
         ]}
       />
       <RouterProvider router={router} />
+      {import.meta.env.DEV && <A11yAuditFixture />}
     </>
   )
 }
diff --git a/examples/react/basic/src/vite-env.d.ts b/examples/react/basic/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/examples/react/basic/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/devtools-a11y/src/core/components/IssueCard.tsx b/packages/devtools-a11y/src/core/components/IssueCard.tsx
index 4420616d..a7fe1da5 100644
--- a/packages/devtools-a11y/src/core/components/IssueCard.tsx
+++ b/packages/devtools-a11y/src/core/components/IssueCard.tsx
@@ -1,8 +1,9 @@
 /** @jsxImportSource solid-js */
 
 import { For, Show } from 'solid-js'
-import { Button } from '@tanstack/devtools-ui'
+import { Button, createTheme } from '@tanstack/devtools-ui'
 import { createStyles } from '../styles/styles'
+import { getSeverityStyle } from '../styles/severity-theme'
 
 // types
 import type { A11yIssue, SeverityThreshold } from '../types/types'
@@ -18,34 +19,55 @@ interface A11yIssueCardProps {
 export function A11yIssueCard(props: A11yIssueCardProps) {
   const selector = () => props.issue.nodes[0]?.selector || 'unknown'
   const styles = createStyles()
+  const { theme } = createTheme()
+  const severity = () => getSeverityStyle(props.impact, theme())
 
   return (
-    <div
+    <article
       class={styles().issueCard}
       classList={{
         [styles().issueCardSelected]: props.selected,
       }}
-      onClick={props.onSelect}
+      data-tsd-surface
+      data-tsd-selected={props.selected ? 'true' : undefined}
     >
       <div class={styles().issueRow}>
-        <div class={styles().issueMain}>
+        <button
+          type="button"
+          data-tsd-control
+          class={styles().issueSelectButton}
+          classList={{
+            [styles().issueSelectButtonSelected]: props.selected,
+          }}
+          aria-pressed={props.selected}
+          onClick={props.onSelect}
+        >
           <div class={styles().issueTitleRow}>
             <span class={styles().dot(props.impact)} />
 
+            <span
+              class={styles().severityLabel(props.impact)}
+              data-severity={props.impact}
+            >
+              {severity().label}
+            </span>
+
             <span>{props.issue.ruleId}</span>
           </div>
           <p class={styles().issueMessage}>{props.issue.message}</p>
 
           <div class={styles().selector}>{selector()}</div>
-        </div>
+        </button>
 
         <div class={styles().issueAside}>
           <a
             class={styles().helpLink}
+            classList={{
+              [styles().helpLinkSelected]: props.selected,
+            }}
             href={props.issue.helpUrl}
             target="_blank"
             rel="noopener noreferrer"
-            onClick={(event) => event.stopPropagation()}
           >
             Learn more
           </a>
@@ -53,8 +75,10 @@ export function A11yIssueCard(props: A11yIssueCardProps) {
           <Button
             variant="secondary"
             ghost
-            onClick={(event: MouseEvent) => {
-              event.stopPropagation()
+            className={
+              props.selected ? styles().issueGhostControlSelected : undefined
+            }
+            onClick={() => {
               props.onDisableRule(props.issue.ruleId)
             }}
           >
@@ -70,6 +94,6 @@ export function A11yIssueCard(props: A11yIssueCardProps) {
           </For>
         </div>
       </Show>
-    </div>
+    </article>
   )
 }
diff --git a/packages/devtools-a11y/src/core/components/IssueList.tsx b/packages/devtools-a11y/src/core/components/IssueList.tsx
index 5552785a..082466d6 100644
--- a/packages/devtools-a11y/src/core/components/IssueList.tsx
+++ b/packages/devtools-a11y/src/core/components/IssueList.tsx
@@ -38,7 +38,7 @@ export function A11yIssueList(props: A11yIssueListProps) {
         ally.allyResult.audit &&
         ally.filteredIssues().length > 0
       ) {
-        highlightAllIssues(ally.filteredIssues())
+        highlightAllIssues(ally.filteredIssues(), ally.theme())
       }
 
       return
@@ -66,6 +66,7 @@ export function A11yIssueList(props: A11yIssueListProps) {
           highlightElement(selector, issue.impact, {
             showTooltip: true,
             ruleId: issue.ruleId,
+            theme: ally.theme(),
           })
         }
       } catch (error) {
@@ -75,8 +76,8 @@ export function A11yIssueList(props: A11yIssueListProps) {
   }
 
   return (
-    <div>
-      <div class={styles().summaryGrid}>
+    <div data-tsd-surface>
+      <div class={styles().summaryGrid} data-tsd-surface>
         <For each={IMPACTS}>
           {(impact) => {
             // Count issues from the reactive filteredIssues memo so counts update when config.threshold changes
@@ -88,6 +89,8 @@ export function A11yIssueList(props: A11yIssueListProps) {
 
             return (
               <button
+                data-tsd-control
+                data-tsd-selected={active() ? 'true' : undefined}
                 class={styles().summaryButton}
                 classList={{
                   [styles().summaryButtonActive(impact)]: active(),
@@ -124,7 +127,7 @@ export function A11yIssueList(props: A11yIssueListProps) {
 
           return (
             <Show when={shouldRender()}>
-              <div class={styles().section}>
+              <div class={styles().section} data-tsd-surface data-tsd-separator>
                 <h3 class={styles().sectionTitle(impact)}>
                   {SEVERITY_LABELS[impact]} ({issues().length})
                 </h3>
diff --git a/packages/devtools-a11y/src/core/components/Settings.tsx b/packages/devtools-a11y/src/core/components/Settings.tsx
index 943d7c6e..82cfcb16 100644
--- a/packages/devtools-a11y/src/core/components/Settings.tsx
+++ b/packages/devtools-a11y/src/core/components/Settings.tsx
@@ -44,16 +44,16 @@ export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
   })
 
   return (
-    <div class={styles().settingsOverlay}>
-      <div class={styles().settingsHeader}>
+    <div class={styles().settingsOverlay} data-tsd-surface>
+      <div class={styles().settingsHeader} data-tsd-surface data-tsd-separator>
         <h3 class={styles().settingsTitle}>Settings</h3>
         <Button variant="secondary" outline onClick={props.onClose}>
           Done
         </Button>
       </div>
 
-      <div class={styles().settingsContent}>
-        <div class={styles().settingsSection}>
+      <div class={styles().settingsContent} data-tsd-surface>
+        <div class={styles().settingsSection} data-tsd-surface>
           <h4 class={styles().settingsSectionLabel}>General</h4>
           <div class={styles().settingsRowStack}>
             <Select<SeverityThreshold>
@@ -142,7 +142,7 @@ export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
             />
           </div>
 
-          <div class={styles().rulesList}>
+          <div class={styles().rulesList} data-tsd-surface>
             <For each={filteredRules()}>
               {(rule, idx) => {
                 const isDisabled = () => disabledRulesSet().has(rule.id)
@@ -158,6 +158,8 @@ export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
 
                 return (
                   <label
+                    data-tsd-surface
+                    data-tsd-separator={hasBorder() ? '' : undefined}
                     class={styles().ruleRow}
                     classList={{
                       [styles().ruleRowDisabled]: isDisabled(),
@@ -165,6 +167,8 @@ export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
                     }}
                   >
                     <input
+                      data-tsd-control
+                      data-tsd-selected={!isDisabled() ? 'true' : undefined}
                       class={styles().ruleCheckbox}
                       type="checkbox"
                       checked={!isDisabled()}
diff --git a/packages/devtools-a11y/src/core/components/Shell.tsx b/packages/devtools-a11y/src/core/components/Shell.tsx
index f5ed7970..6778a23c 100644
--- a/packages/devtools-a11y/src/core/components/Shell.tsx
+++ b/packages/devtools-a11y/src/core/components/Shell.tsx
@@ -32,8 +32,8 @@ export function Shell() {
   const showOverlayState = createMemo(() => config.showOverlays)
 
   return (
-    <MainPanel class={styles().root} withPadding={false}>
-      <Header class={styles().header}>
+    <MainPanel class={styles().root} withPadding={false} data-tsd-surface>
+      <Header class={styles().header} data-tsd-surface>
         <div class={styles().headerTitleRow}>
           <h2 class={styles().headerTitle}>Accessibility Audit</h2>
 
@@ -79,6 +79,7 @@ export function Shell() {
             </div>
 
             <Button
+              data-tsd-selected={showOverlayState() ? 'true' : undefined}
               variant={showOverlayState() ? 'success' : 'warning'}
               onClick={() => setConfig('showOverlays', !config.showOverlays)}
             >
@@ -88,7 +89,7 @@ export function Shell() {
         </div>
       </Header>
 
-      <div class={styles().statusBar}>
+      <div class={styles().statusBar} data-tsd-surface data-tsd-separator>
         <span>
           <Show when={allyResult.state === 'done'}>
             {`${SEVERITY_LABELS[config.threshold]}+ | ${RULE_SET_LABELS[config.ruleSet]}`}
@@ -110,10 +111,10 @@ export function Shell() {
         </Button>
       </div>
 
-      <div class={styles().content}>
+      <div class={styles().content} data-tsd-surface>
         <Switch>
           <Match when={allyResult.state === 'init'}>
-            <div class={styles().emptyState}>
+            <div class={styles().emptyState} data-tsd-surface>
               <p class={styles().emptyPrimary}>No audit results yet</p>
 
               <p class={styles().emptySecondary}>
@@ -129,7 +130,7 @@ export function Shell() {
               allyResult.audit.issues.length === 0
             }
           >
-            <div class={styles().successState}>
+            <div class={styles().successState} data-tsd-surface>
               <p class={styles().successTitle}>
                 No accessibility issues found!
               </p>
diff --git a/packages/devtools-a11y/src/core/contexts/allyContext.tsx b/packages/devtools-a11y/src/core/contexts/allyContext.tsx
index 920eae9c..37860154 100644
--- a/packages/devtools-a11y/src/core/contexts/allyContext.tsx
+++ b/packages/devtools-a11y/src/core/contexts/allyContext.tsx
@@ -8,6 +8,7 @@ import {
   useContext as getContext,
 } from 'solid-js'
 import { createStore } from 'solid-js/store'
+import { createTheme } from '@tanstack/devtools-ui'
 import { filterIssuesAboveThreshold, runAudit } from '../utils/ally-audit.utils'
 import { mergeConfig, saveConfig } from '../utils/config.utils'
 import { clearHighlights, highlightAllIssues } from '../utils/ui.utils'
@@ -25,6 +26,7 @@ import type { ParentComponent } from 'solid-js'
 //
 
 function createAllyValue() {
+  const { theme } = createTheme()
   const [config, setConfig] =
     createStore<Required<A11yPluginOptions>>(mergeConfig())
 
@@ -67,7 +69,8 @@ function createAllyValue() {
       return
     }
 
-    if (allyResult.state === 'done') highlightAllIssues(filteredIssues())
+    if (allyResult.state === 'done')
+      highlightAllIssues(filteredIssues(), theme())
   })
 
   createEffect(() => {
@@ -86,6 +89,7 @@ function createAllyValue() {
     config,
 
     allyResult,
+    theme,
   }
 }
 
diff --git a/packages/devtools-a11y/src/core/styles/severity-theme.ts b/packages/devtools-a11y/src/core/styles/severity-theme.ts
new file mode 100644
index 00000000..46784e30
--- /dev/null
+++ b/packages/devtools-a11y/src/core/styles/severity-theme.ts
@@ -0,0 +1,26 @@
+import { resolveSemanticTheme } from '@tanstack/devtools-ui/internal'
+
+import type { StatusRole } from '@tanstack/devtools-ui/internal'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+import type { SeverityThreshold } from '../types/types'
+
+const severity = {
+  critical: { role: 'error', label: 'Critical', outline: '3px solid' },
+  serious: { role: 'error', label: 'Serious', outline: '2px solid' },
+  moderate: { role: 'warning', label: 'Moderate', outline: '2px solid' },
+  minor: { role: 'info', label: 'Minor', outline: '2px dashed' },
+} as const satisfies Record<
+  SeverityThreshold,
+  { role: StatusRole; label: string; outline: string }
+>
+
+export function getSeverityStyle(
+  impact: SeverityThreshold,
+  theme: TanStackDevtoolsTheme,
+) {
+  const definition = severity[impact]
+  return {
+    ...definition,
+    colors: resolveSemanticTheme(theme).color.status[definition.role],
+  }
+}
diff --git a/packages/devtools-a11y/src/core/styles/styles.ts b/packages/devtools-a11y/src/core/styles/styles.ts
index d7d41e46..b96f713f 100644
--- a/packages/devtools-a11y/src/core/styles/styles.ts
+++ b/packages/devtools-a11y/src/core/styles/styles.ts
@@ -1,16 +1,11 @@
 import * as goober from 'goober'
 import { createTheme } from '@tanstack/devtools-ui'
 import { createMemo } from 'solid-js'
+import { resolveSemanticTheme } from '@tanstack/devtools-ui/internal'
 
-import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
-import type { RuleCategory, SeverityThreshold } from '../types/types'
+import { getSeverityStyle } from './severity-theme'
 
-const SEVERITY_COLORS: Record<SeverityThreshold, string> = {
-  critical: '#dc2626',
-  serious: '#ea580c',
-  moderate: '#ca8a04',
-  minor: '#2563eb',
-}
+import type { RuleCategory, SeverityThreshold } from '../types/types'
 
 export const CATEGORY_LABELS: Record<RuleCategory, string> = {
   all: 'All Categories',
@@ -47,129 +42,118 @@ export const CATEGORIES: Array<RuleCategory> = [
 ]
 
 const css = goober.css
-const FONT_SCALE = 1.1
-const fontPx = (size: number) => `calc(${size}px * ${FONT_SCALE})`
-
-function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
-  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
-  const bg = t('#f9fafb;', '#191c24')
-  const fg = t('#1e293b', '#e2e8f0')
-  const border = t('#e2e8f0', '#292e3d')
-  const muted = t('#64748b', '#94a3b8')
-  const muted2 = t('#727c8b', '#818386')
+function createA11yPanelStyles(themeName: 'light' | 'dark') {
+  const theme = resolveSemanticTheme(themeName)
+  const { color, font, gap, radius, shadow, space, type } = theme
 
   return {
-    colors: { bg, fg, border, muted, muted2, theme },
-
+    colors: { theme: themeName },
     root: css`
       height: 100%;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       position: relative;
+      background: ${color.surface.workspace};
+      color: ${color.text.primary};
+      font-family: ${font.body};
+      font-weight: 300;
     `,
-
     header: css`
-      padding: 16px;
-      border-bottom: 1px solid ${border};
+      padding: ${space[3]} ${space[4]};
+      border-bottom: 1px solid ${color.border.decorative};
       display: flex;
       justify-content: space-between;
       align-items: center;
+      gap: ${gap.section};
       flex-shrink: 0;
       anchor-name: --a11y-toast-anchor;
+      background: ${color.surface.brand};
     `,
     headerTitleRow: css`
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: ${gap.control};
       min-width: 0;
     `,
     headerTitle: css`
       margin: 0;
-      font-size: ${fontPx(16)};
-      font-weight: 600;
+      font-family: ${font.display};
+      font-size: ${type.headingPane.size};
+      line-height: ${type.headingPane.lineHeight};
+      font-weight: ${type.headingPane.weight};
     `,
     headerSub: css`
-      font-size: ${fontPx(12)};
-      color: ${muted};
+      font-size: ${type.bodyXs.size};
+      line-height: ${type.bodyXs.lineHeight};
+      color: ${color.text.mutedOnBrand};
       white-space: nowrap;
     `,
     headerActions: css`
       display: flex;
-      gap: 8px;
+      gap: ${gap.control};
       align-items: center;
       flex-wrap: wrap;
       justify-content: flex-end;
     `,
     primaryButton: css`
-      padding: 8px 16px;
-      color: #fff;
-      border-radius: 6px;
+      padding: ${theme.padding.controlBlock} ${theme.padding.controlInline};
+      border-radius: ${radius.control};
       cursor: pointer;
-      font-weight: 500;
-      font-size: ${fontPx(13)};
-      opacity: 1;
     `,
     primaryButtonDisabled: css`
       cursor: not-allowed;
       opacity: 0.7;
     `,
     button: css`
-      padding: 8px 12px;
-      color: ${fg};
-      border: 1px solid ${border};
-      border-radius: 6px;
+      padding: ${theme.padding.controlBlock} ${theme.padding.controlInline};
+      border-radius: ${radius.control};
       cursor: pointer;
-      font-size: ${fontPx(11)};
     `,
     buttonRow: css`
       display: flex;
-      gap: 6px;
+      gap: ${gap.tight};
       align-items: center;
     `,
     toggleOverlay: css`
-      padding: 8px 12px;
-      color: ${fg};
-      border: 1px solid ${border};
-      border-radius: 6px;
+      padding: ${theme.padding.controlBlock} ${theme.padding.controlInline};
+      border-radius: ${radius.control};
       cursor: pointer;
-      font-size: ${fontPx(13)};
     `,
     toggleOverlayOn: css`
-      background: #10b981;
-      color: #fff;
-      border-color: #10b981;
+      background: ${color.status.success.subtleFill};
+      color: ${color.status.success.text};
+      border-color: ${color.status.success.border};
     `,
-
     statusBar: css`
-      padding: 8px 16px;
-      border-bottom: 1px solid ${border};
+      padding: ${space[2]} ${space[4]};
+      border-bottom: 1px solid ${color.border.decorative};
       display: flex;
-      gap: 12px;
+      gap: ${gap.section};
       align-items: center;
       flex-shrink: 0;
-      font-size: ${fontPx(11)};
-      color: ${muted};
+      font-size: ${type.bodyXs.size};
+      line-height: ${type.bodyXs.lineHeight};
+      color: ${color.text.muted};
+      background: ${color.surface.subtle};
     `,
     statusSpacer: css`
       flex: 1;
     `,
     smallLinkButton: css`
-      padding: 4px 10px;
+      padding: ${space[1]} ${space[2]};
       background: transparent;
-      color: #0ea5e9;
-      border: 1px solid ${border};
-      border-radius: 4px;
+      color: ${color.text.link};
+      border: 1px solid ${color.border.control};
+      border-radius: ${radius.control};
       cursor: pointer;
-      font-size: ${fontPx(11)};
-      font-weight: 500;
     `,
-
     content: css`
       flex: 1;
       overflow-y: auto;
-      padding: 16px;
+      padding: ${space[4]};
+      background: ${color.surface.workspace};
     `,
     emptyState: css`
       display: flex;
@@ -178,14 +162,17 @@ function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
       justify-content: center;
       height: 100%;
       text-align: center;
-      color: ${muted};
+      color: ${color.text.muted};
     `,
     emptyPrimary: css`
-      font-size: ${fontPx(14)};
-      margin: 0 0 8px 0;
+      font-size: ${type.bodySm.size};
+      line-height: ${type.bodySm.lineHeight};
+      margin: 0 0 ${space[2]} 0;
+      color: ${color.text.primary};
     `,
     emptySecondary: css`
-      font-size: ${fontPx(12)};
+      font-size: ${type.bodyXs.size};
+      line-height: ${type.bodyXs.lineHeight};
       margin: 0;
     `,
     successState: css`
@@ -195,308 +182,335 @@ function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
       justify-content: center;
       height: 100%;
       text-align: center;
+      background: ${color.status.success.subtleFill};
+      border-radius: ${radius.group};
     `,
     successTitle: css`
-      font-size: ${fontPx(16)};
-      color: #10b981;
-      font-weight: 600;
+      font-family: ${font.display};
+      font-size: ${type.headingPane.size};
+      line-height: ${type.headingPane.lineHeight};
+      color: ${color.status.success.text};
+      font-weight: 700;
       margin: 0;
     `,
     successSub: css`
-      font-size: ${fontPx(12)};
-      color: ${muted};
-      margin-top: 8px;
-      margin-bottom: 0;
+      font-size: ${type.bodyXs.size};
+      color: ${color.status.success.text};
+      margin: ${space[2]} 0 0;
     `,
-
     summaryGrid: css`
       display: grid;
       grid-template-columns: repeat(4, 1fr);
-      gap: 12px;
-      margin-bottom: 20px;
-
+      gap: ${gap.control};
+      margin-bottom: ${space[4]};
       @media (max-width: 520px) {
         grid-template-columns: repeat(2, 1fr);
       }
     `,
     summaryButton: css`
-      padding: 12px;
-      color: ${fg};
-      background: ${bg};
-      border-radius: 8px;
-      border: 1px solid ${border};
+      padding: ${space[3]};
+      color: ${color.text.primary};
+      background: ${color.surface.subtle};
+      border-radius: ${radius.group};
+      border: 1px solid ${color.border.decorative};
       text-align: left;
       cursor: pointer;
-      box-shadow: none;
-
+      box-shadow: ${shadow.xs};
       &:hover {
-        background: ${t('#f0f2f5', '#111318')};
+        background: ${color.state.hover};
+      }
+      &:focus-visible {
+        outline: 2px solid ${color.border.focus};
+        outline-offset: 2px;
       }
     `,
     summaryButtonActive: (impact: SeverityThreshold) => css`
-      box-shadow: 0 0 0 2px ${SEVERITY_COLORS[impact]};
+      background: ${getSeverityStyle(impact, themeName).colors.subtleFill};
+      border-color: ${getSeverityStyle(impact, themeName).colors.border};
     `,
     summaryCount: (impact: SeverityThreshold) => css`
-      font-size: ${fontPx(24)};
+      font-family: ${font.display};
+      font-size: 24px;
+      line-height: 28px;
       font-weight: 700;
-      color: ${SEVERITY_COLORS[impact]};
+      color: ${getSeverityStyle(impact, themeName).colors.text};
     `,
     summaryLabel: css`
-      font-size: ${fontPx(11)};
-      color: ${muted};
+      font-size: ${type.labelSm.size};
+      line-height: ${type.labelSm.lineHeight};
+      font-weight: ${type.labelSm.weight};
+      letter-spacing: ${type.labelSm.tracking};
+      color: ${color.text.muted};
       text-transform: uppercase;
     `,
-
     section: css`
-      margin-bottom: 16px;
+      margin-bottom: ${space[4]};
     `,
     sectionTitle: (impact: SeverityThreshold) => css`
-      color: ${SEVERITY_COLORS[impact]};
-      font-size: ${fontPx(13)};
-      font-weight: 600;
-      margin: 0 0 8px 0;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
+      color: ${getSeverityStyle(impact, themeName).colors.text};
+      font-family: ${font.display};
+      font-size: ${type.headingCompact.size};
+      line-height: ${type.headingCompact.lineHeight};
+      font-weight: 700;
+      margin: 0 0 ${space[2]};
     `,
-
     issueCard: css`
-      padding: 12px;
-      margin-bottom: 8px;
-      border: 1px solid ${border};
-      border-radius: 6px;
+      padding: ${space[3]};
+      margin-bottom: ${space[2]};
+      border: 1px solid ${color.border.decorative};
+      border-radius: ${radius.group};
       cursor: pointer;
+      background: ${color.surface.elevated};
+      box-shadow: ${shadow.xs};
     `,
     issueCardSelected: css`
-      background: ${t('#e0f2fe', '#1e3a5f')};
-      border-color: #0ea5e9;
+      background: ${color.state.selectionFill};
+      color: ${color.state.selectionText};
+      border-color: ${color.border.focus};
     `,
     issueRow: css`
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
-      gap: 12px;
+      gap: ${gap.section};
     `,
     issueMain: css`
       flex: 1;
       min-width: 0;
     `,
+    issueSelectButton: css`
+      flex: 1;
+      min-width: 0;
+      padding: 0;
+      color: inherit;
+      background: transparent;
+      border: 0;
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+      &:focus-visible {
+        outline: 2px solid ${color.border.focus};
+        outline-offset: 2px;
+        border-radius: ${radius.control};
+      }
+    `,
+    issueSelectButtonSelected: css`
+      &:focus-visible {
+        outline-color: ${color.state.selectionText};
+      }
+    `,
     issueTitleRow: css`
       font-weight: 600;
-      font-size: ${fontPx(13)};
-      margin-bottom: 4px;
+      font-size: ${type.bodySm.size};
+      line-height: ${type.bodySm.lineHeight};
+      margin-bottom: ${space[1]};
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: ${gap.control};
     `,
     dot: (impact: SeverityThreshold) => css`
-      width: 8px;
-      height: 8px;
+      width: ${space[2]};
+      height: ${space[2]};
       border-radius: 50%;
-      background: ${SEVERITY_COLORS[impact]};
+      background: ${getSeverityStyle(impact, themeName).colors.solidFill};
       flex-shrink: 0;
     `,
+    severityLabel: (impact: SeverityThreshold) => css`
+      font-size: ${type.labelSm.size};
+      line-height: ${type.labelSm.lineHeight};
+      color: ${getSeverityStyle(impact, themeName).colors.text};
+      background: ${getSeverityStyle(impact, themeName).colors.subtleFill};
+      border: 1px solid ${getSeverityStyle(impact, themeName).colors.border};
+      padding: 2px ${space[1]};
+      border-radius: ${radius.control};
+    `,
     issueMessage: css`
-      font-size: ${fontPx(12)};
-      color: ${t('#475569', '#cbd5e1')};
-      margin: 0 0 8px 0;
-      line-height: 1.4;
+      font-size: ${type.bodyXs.size};
+      line-height: ${type.bodyXs.lineHeight};
+      color: inherit;
+      margin: 0 0 ${space[2]};
     `,
     selector: css`
-      font-size: ${fontPx(10)};
-      color: ${muted2};
-      font-family:
-        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-        'Liberation Mono', 'Courier New', monospace;
+      font-size: ${type.bodyXs.size};
+      line-height: ${type.bodyXs.lineHeight};
+      color: inherit;
+      font-family: ${font.mono};
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      opacity: 0.8;
     `,
     issueAside: css`
       display: flex;
       flex-direction: column;
       align-items: flex-end;
-      gap: 4px;
+      gap: ${gap.tight};
       flex-shrink: 0;
     `,
     helpLink: css`
-      font-size: ${fontPx(12)};
-      color: #0ea5e9;
-      padding: 0 12px;
+      font-size: ${type.bodyXs.size};
+      color: ${color.text.link};
+      padding: 0 ${space[3]};
       font-weight: 600;
       text-decoration: underline;
       text-underline-offset: 2px;
-
-      &:hover {
-        color: #0284c7;
-      }
-
       &:focus-visible {
-        outline: 2px solid #0ea5e9;
+        outline: 2px solid ${color.border.focus};
         outline-offset: 2px;
-        border-radius: 4px;
+        border-radius: ${radius.control};
+      }
+    `,
+    helpLinkSelected: css`
+      color: ${color.state.selectionText};
+    `,
+    issueGhostControlSelected: css`
+      && {
+        color: ${color.state.selectionText};
+        border-color: ${color.state.selectionText};
       }
     `,
     disableRule: css`
-      font-size: ${fontPx(10)};
-      color: ${muted};
+      font-size: ${type.bodyXs.size};
+      color: ${color.text.muted};
       background: none;
       border: none;
       cursor: pointer;
       padding: 0;
       font-weight: 600;
-
-      &:hover {
-        color: #000000;
-      }
-
-      &:focus-visible {
-        outline: 2px solid #0ea5e9;
-        outline-offset: 2px;
-        border-radius: 4px;
-      }
     `,
     tags: css`
       display: flex;
-      gap: 4px;
-      margin-top: 8px;
+      gap: ${gap.tight};
+      margin-top: ${space[2]};
       flex-wrap: wrap;
     `,
     tag: css`
-      font-size: ${fontPx(10)};
-      padding: 2px 6px;
-      border: 1px solid ${border};
-      border-radius: 4px;
-      color: ${muted};
+      font-size: ${type.bodyXs.size};
+      padding: 2px ${space[1]};
+      border: 1px solid currentColor;
+      border-radius: ${radius.control};
+      color: inherit;
+      opacity: 0.8;
     `,
-
     settingsOverlay: css`
       position: absolute;
       inset: 0;
-      background: ${bg};
+      background: ${color.surface.workspace};
       display: flex;
       flex-direction: column;
       z-index: 10;
     `,
     settingsHeader: css`
-      padding: 12px 16px;
-      border-bottom: 1px solid ${border};
+      padding: ${space[3]} ${space[4]};
+      border-bottom: 1px solid ${color.border.decorative};
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-shrink: 0;
+      background: ${color.surface.brand};
     `,
     settingsTitle: css`
       margin: 0;
-      font-size: ${fontPx(14)};
-      font-weight: 600;
+      font-family: ${font.display};
+      font-size: ${type.headingPane.size};
+      line-height: ${type.headingPane.lineHeight};
+      font-weight: 700;
     `,
     doneButton: css`
-      padding: 6px 12px;
-      background: ${bg};
-      color: ${bg};
-      border: none;
-      border-radius: 4px;
+      padding: ${theme.padding.controlBlock} ${theme.padding.controlInline};
+      border-radius: ${radius.control};
       cursor: pointer;
-      font-size: ${fontPx(12)};
-      font-weight: 500;
     `,
     settingsContent: css`
       flex: 1;
       overflow-y: auto;
-      padding: 16px;
+      padding: ${space[4]};
     `,
     settingsSection: css`
       margin-bottom: 24px;
     `,
     settingsRowStack: css`
       display: grid;
-      gap: 12px;
+      gap: ${gap.section};
     `,
     settingsSectionLabel: css`
-      margin: 0 0 12px 0;
-      font-size: ${fontPx(12)};
-      font-weight: 600;
+      margin: 0 0 ${space[3]};
+      font-size: ${type.labelSm.size};
+      line-height: ${type.labelSm.lineHeight};
+      font-weight: ${type.labelSm.weight};
+      letter-spacing: ${type.labelSm.tracking};
       text-transform: uppercase;
-      letter-spacing: 0.5px;
-      color: ${muted};
+      color: ${color.text.muted};
     `,
     settingsRow: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 10px 0;
-      border-bottom: 1px solid ${border};
-      gap: 12px;
+      padding: ${space[2]} 0;
+      border-bottom: 1px solid ${color.border.decorative};
+      gap: ${gap.section};
     `,
     settingsRowTitle: css`
-      font-size: ${fontPx(13)};
+      font-size: ${type.bodySm.size};
       font-weight: 500;
     `,
     settingsRowDesc: css`
-      font-size: ${fontPx(11)};
-      color: ${muted};
+      font-size: ${type.bodyXs.size};
+      color: ${color.text.muted};
       margin-top: 2px;
     `,
     select: css`
-      padding: 6px 10px;
-      border: 1px solid ${border};
-      border-radius: 4px;
-      background: ${bg};
-      color: ${fg};
-      font-size: ${fontPx(12)};
+      padding: ${theme.padding.controlBlock} ${theme.padding.controlInline};
+      border: 1px solid ${color.border.control};
+      border-radius: ${radius.control};
+      background: ${color.surface.elevated};
+      color: ${color.text.primary};
+      font-size: ${type.bodyXs.size};
     `,
     rulesHeaderRow: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 12px;
-      gap: 12px;
+      margin-bottom: ${space[3]};
+      gap: ${gap.section};
       flex-wrap: wrap;
     `,
     rulesHeaderActions: css`
       display: flex;
-      gap: 6px;
+      gap: ${gap.tight};
     `,
     filtersRow: css`
       display: flex;
-      gap: 8px;
-      margin-bottom: 12px;
+      gap: ${gap.control};
+      margin-bottom: ${space[3]};
       flex-wrap: wrap;
     `,
     search: css`
       flex: 1;
       min-width: 180px;
-      padding: 8px 10px;
-      border: 1px solid ${border};
-      border-radius: 4px;
-      background: ${bg};
-      color: ${fg};
-      font-size: ${fontPx(12)};
-      box-sizing: border-box;
     `,
     rulesList: css`
-      border: 1px solid ${border};
-      border-radius: 6px;
+      border: 1px solid ${color.border.decorative};
+      border-radius: ${radius.group};
       overflow-y: auto;
+      background: ${color.surface.elevated};
     `,
     ruleRow: css`
       display: flex;
       align-items: flex-start;
-      gap: 8px;
-      padding: 8px 10px;
+      gap: ${gap.control};
+      padding: ${space[2]} ${space[3]};
       cursor: pointer;
-      opacity: 1;
       background: transparent;
-
       &:hover {
-        background: ${t('#f0f2f5', '#111318')};
+        background: ${color.state.hover};
       }
     `,
     ruleRowDisabled: css`
       opacity: 0.6;
     `,
     ruleRowBorder: css`
-      border-bottom: 1px solid ${border};
+      border-bottom: 1px solid ${color.border.decorative};
     `,
     ruleCheckbox: css`
       margin-top: 2px;
@@ -509,41 +523,41 @@ function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
     ruleTop: css`
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: ${gap.tight};
       margin-bottom: 2px;
     `,
     ruleId: css`
       font-weight: 500;
-      font-size: ${fontPx(12)};
-      text-decoration: none;
+      font-size: ${type.bodyXs.size};
     `,
     ruleIdDisabled: css`
       text-decoration: line-through;
     `,
     bpBadge: css`
-      font-size: ${fontPx(9)};
-      padding: 1px 4px;
-      background: #f59e0b;
-      color: #fff;
-      border-radius: 3px;
+      font-size: ${type.bodyXs.size};
+      padding: 1px ${space[1]};
+      background: ${color.status.warning.subtleFill};
+      color: ${color.status.warning.text};
+      border: 1px solid ${color.status.warning.border};
+      border-radius: ${radius.control};
       font-weight: 500;
     `,
     ruleDesc: css`
-      font-size: ${fontPx(11)};
-      color: ${muted};
-      line-height: 2;
+      font-size: ${type.bodyXs.size};
+      color: ${color.text.muted};
+      line-height: ${type.bodyXs.lineHeight};
     `,
     catTagRow: css`
       display: flex;
-      gap: 4px;
-      margin-top: 4px;
+      gap: ${gap.tight};
+      margin-top: ${space[1]};
     `,
     catTag: css`
-      font-size: ${fontPx(9)};
-      padding: 1px 4px;
-      border: 1px solid ${muted};
-      border-radius: 3px;
-      color: ${muted};
+      font-size: ${type.bodyXs.size};
+      padding: 1px ${space[1]};
+      border: 1px solid ${color.border.control};
+      border-radius: ${radius.control};
+      color: ${color.text.muted};
     `,
   }
 }
diff --git a/packages/devtools-a11y/src/core/utils/ui.utils.ts b/packages/devtools-a11y/src/core/utils/ui.utils.ts
index 880a514e..c623ba49 100644
--- a/packages/devtools-a11y/src/core/utils/ui.utils.ts
+++ b/packages/devtools-a11y/src/core/utils/ui.utils.ts
@@ -1,4 +1,8 @@
+import { resolveSemanticTheme } from '@tanstack/devtools-ui/internal'
+import { getSeverityStyle } from '../styles/severity-theme'
+
 // types
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 import type {
   A11yIssue,
   RuleSetPreset,
@@ -82,38 +86,15 @@ export const RULE_SET_LABELS: Record<RuleSetPreset, string> = {
   all: 'All Rules',
 }
 
-/**
- * Color scheme for different severity levels
- */
-const SEVERITY_COLORS: Record<
-  SeverityThreshold,
-  { border: string; bg: string; text: string }
-> = {
-  critical: {
-    border: '#dc2626',
-    bg: 'rgba(220, 38, 38, 0.15)',
-    text: '#dc2626',
-  },
-  serious: {
-    border: '#ea580c',
-    bg: 'rgba(234, 88, 12, 0.15)',
-    text: '#ea580c',
-  },
-  moderate: {
-    border: '#ca8a04',
-    bg: 'rgba(202, 138, 4, 0.15)',
-    text: '#ca8a04',
-  },
-  minor: { border: '#2563eb', bg: 'rgba(37, 99, 235, 0.15)', text: '#2563eb' },
-}
-
 /**
  * Inject overlay styles into the document
  */
-function injectStyles(): void {
-  if (document.getElementById(HIGHLIGHT_STYLE_ID)) {
-    return
-  }
+function injectStyles(theme: TanStackDevtoolsTheme): void {
+  document.getElementById(HIGHLIGHT_STYLE_ID)?.remove()
+
+  const semantic = resolveSemanticTheme(theme)
+  const styleFor = (impact: SeverityThreshold) =>
+    getSeverityStyle(impact, theme)
 
   const style = document.createElement('style')
   style.id = HIGHLIGHT_STYLE_ID
@@ -121,63 +102,61 @@ function injectStyles(): void {
   // Tooltips use fixed positioning to avoid layout shifts
   style.textContent = `
     .${HIGHLIGHT_CLASS}--critical {
-      outline: 3px solid ${SEVERITY_COLORS.critical.border} !important;
+      outline: ${styleFor('critical').outline} ${styleFor('critical').colors.border} !important;
       outline-offset: 2px !important;
-      background-color: ${SEVERITY_COLORS.critical.bg} !important;
+      background-color: ${styleFor('critical').colors.subtleFill} !important;
     }
 
     .${HIGHLIGHT_CLASS}--serious {
-      outline: 3px solid ${SEVERITY_COLORS.serious.border} !important;
+      outline: ${styleFor('serious').outline} ${styleFor('serious').colors.border} !important;
       outline-offset: 2px !important;
-      background-color: ${SEVERITY_COLORS.serious.bg} !important;
+      background-color: ${styleFor('serious').colors.subtleFill} !important;
     }
 
     .${HIGHLIGHT_CLASS}--moderate {
-      outline: 2px solid ${SEVERITY_COLORS.moderate.border} !important;
+      outline: ${styleFor('moderate').outline} ${styleFor('moderate').colors.border} !important;
       outline-offset: 2px !important;
-      background-color: ${SEVERITY_COLORS.moderate.bg} !important;
+      background-color: ${styleFor('moderate').colors.subtleFill} !important;
     }
 
     .${HIGHLIGHT_CLASS}--minor {
-      outline: 2px dashed ${SEVERITY_COLORS.minor.border} !important;
+      outline: ${styleFor('minor').outline} ${styleFor('minor').colors.border} !important;
       outline-offset: 2px !important;
-      background-color: ${SEVERITY_COLORS.minor.bg} !important;
+      background-color: ${styleFor('minor').colors.subtleFill} !important;
     }
 
     .${TOOLTIP_CLASS} {
       position: fixed;
       padding: 4px 8px;
       border-radius: 4px;
-      font-size: 11px;
-      font-weight: 600;
-      font-family: system-ui, -apple-system, sans-serif;
+      font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} / ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};
       white-space: nowrap;
       z-index: 99990;
       pointer-events: none;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      box-shadow: ${semantic.shadow.sm};
       max-width: 90vw;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
     .${TOOLTIP_CLASS}--critical {
-      background: ${SEVERITY_COLORS.critical.border};
-      color: white;
+      background: ${styleFor('critical').colors.solidFill};
+      color: ${styleFor('critical').colors.onFill};
     }
 
     .${TOOLTIP_CLASS}--serious {
-      background: ${SEVERITY_COLORS.serious.border};
-      color: white;
+      background: ${styleFor('serious').colors.solidFill};
+      color: ${styleFor('serious').colors.onFill};
     }
 
     .${TOOLTIP_CLASS}--moderate {
-      background: ${SEVERITY_COLORS.moderate.border};
-      color: white;
+      background: ${styleFor('moderate').colors.solidFill};
+      color: ${styleFor('moderate').colors.onFill};
     }
 
     .${TOOLTIP_CLASS}--minor {
-      background: ${SEVERITY_COLORS.minor.border};
-      color: white;
+      background: ${styleFor('minor').colors.solidFill};
+      color: ${styleFor('minor').colors.onFill};
     }
   `
   document.head.appendChild(style)
@@ -306,13 +285,11 @@ function createTooltip(
 
   // Build tooltip content showing all issues
   if (sortedIssues.length === 1) {
-    tooltip.textContent = `${mostSevere.toUpperCase()}: ${firstIssue.ruleId}`
+    tooltip.textContent = `${SEVERITY_LABELS[mostSevere]}: ${firstIssue.ruleId}`
   } else {
     // Multiple issues - show count and list
     const issueList = sortedIssues
-      .map(
-        (issue) => `${issue.impact.charAt(0).toUpperCase()}: ${issue.ruleId}`,
-      )
+      .map((issue) => `${SEVERITY_LABELS[issue.impact]}: ${issue.ruleId}`)
       .join(' | ')
     tooltip.textContent = `${sortedIssues.length} issues: ${issueList}`
   }
@@ -342,12 +319,16 @@ function createTooltip(
 export function highlightElement(
   selector: string,
   impact: SeverityThreshold = 'serious',
-  options: { showTooltip?: boolean; ruleId?: string } = {},
+  options: {
+    showTooltip?: boolean
+    ruleId?: string
+    theme?: TanStackDevtoolsTheme
+  } = {},
 ): void {
-  const { showTooltip = true, ruleId } = options
+  const { showTooltip = true, ruleId, theme = 'dark' } = options
 
   try {
-    injectStyles()
+    injectStyles(theme)
 
     const elements = document.querySelectorAll(selector)
     if (elements.length === 0) {
@@ -389,8 +370,11 @@ export function highlightElement(
  * Highlight all elements with issues.
  * Shows all issues per element in the tooltip, using the most severe for highlighting.
  */
-export function highlightAllIssues(issues: Array<A11yIssue>): void {
-  injectStyles()
+export function highlightAllIssues(
+  issues: Array<A11yIssue>,
+  theme: TanStackDevtoolsTheme = 'dark',
+): void {
+  injectStyles(theme)
   clearHighlights()
 
   // Track ALL issues for each selector
diff --git a/packages/devtools-a11y/tests/index.test.ts b/packages/devtools-a11y/tests/index.test.ts
index 9ca0bdfc..06aef4b8 100644
--- a/packages/devtools-a11y/tests/index.test.ts
+++ b/packages/devtools-a11y/tests/index.test.ts
@@ -1,7 +1,33 @@
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@tanstack/devtools-utils/react', () => ({
+  createReactPanel: () => [() => null, () => null],
+  createReactPlugin: ({ name }: { name: string }) => [
+    () => ({ name, render: () => ({ type: Symbol.for('development') }) }),
+    () => ({ name, render: () => ({ type: Symbol.for('react.fragment') }) }),
+  ],
+}))
+
+afterEach(() => {
+  vi.unstubAllEnvs()
+  vi.resetModules()
+})
 
 describe('devtools', () => {
   it('should pass', () => {
     expect(true).toBe(true)
   })
 })
+
+it('keeps the React accessibility plugin a no-op in production', async () => {
+  vi.stubEnv('NODE_ENV', 'production')
+  vi.resetModules()
+  const { a11yDevtoolsPlugin } = await import('../src/react/index')
+  const definition = a11yDevtoolsPlugin()
+  expect(definition.name).toBe('TanStack A11y')
+  const rendered = definition.render(document.createElement('div'), {
+    theme: 'dark',
+    devtoolsOpen: true,
+  })
+  expect(rendered).toMatchObject({ type: Symbol.for('react.fragment') })
+})
diff --git a/packages/devtools-a11y/tests/theme.test.ts b/packages/devtools-a11y/tests/theme.test.ts
new file mode 100644
index 00000000..0f4e870b
--- /dev/null
+++ b/packages/devtools-a11y/tests/theme.test.ts
@@ -0,0 +1,215 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { extname, join, relative } from 'node:path'
+import { createComponent } from 'solid-js'
+import { render } from 'solid-js/web'
+import { afterEach, describe, expect, it } from 'vitest'
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { resolveSemanticTheme } from '@tanstack/devtools-ui/internal'
+import { A11yIssueCard } from '../src/core/components/IssueCard'
+import { getSeverityStyle } from '../src/core/styles/severity-theme'
+import {
+  clearHighlights,
+  highlightAllIssues,
+  highlightElement,
+} from '../src/core/utils/ui.utils'
+import type { A11yIssue } from '../src/core/types/types'
+
+const packageRoot = process.cwd()
+const coreRoot = join(packageRoot, 'src/core')
+const files = (path: string): Array<string> =>
+  readdirSync(path, { withFileTypes: true }).flatMap((entry) => {
+    const child = join(path, entry.name)
+    return entry.isDirectory()
+      ? files(child)
+      : ['.ts', '.tsx'].includes(extname(child))
+        ? [child]
+        : []
+  })
+const rawColor = /#[\da-f]{3,8}\b|\b(?:rgb|rgba|hsl|hsla|oklch)\(/i
+const gradient = /\b(?:linear|radial|conic)-gradient\(/i
+const namedExemptions = new Map([
+  [
+    'semantic-color-exempt: transparent-overlay',
+    /^src[\\/]core[\\/]utils[\\/]ui\.utils\.ts$/,
+  ],
+])
+
+afterEach(() => {
+  clearHighlights()
+  document.body.replaceChildren()
+})
+
+describe.each(['light', 'dark'] as const)('%s accessibility theme', (theme) => {
+  it('maps severity to exact shared roles and distinguishable outlines', () => {
+    expect(getSeverityStyle('critical', theme)).toMatchObject({
+      role: 'error',
+      label: 'Critical',
+      outline: '3px solid',
+    })
+    expect(getSeverityStyle('serious', theme)).toMatchObject({
+      role: 'error',
+      label: 'Serious',
+      outline: '2px solid',
+    })
+    expect(getSeverityStyle('moderate', theme)).toMatchObject({
+      role: 'warning',
+      label: 'Moderate',
+      outline: '2px solid',
+    })
+    expect(getSeverityStyle('minor', theme)).toMatchObject({
+      role: 'info',
+      label: 'Minor',
+      outline: '2px dashed',
+    })
+    const semantic = resolveSemanticTheme(theme)
+    expect(getSeverityStyle('critical', theme).colors).toEqual(
+      semantic.color.status.error,
+    )
+    expect(getSeverityStyle('moderate', theme).colors).toEqual(
+      semantic.color.status.warning,
+    )
+  })
+
+  it('renders selected IssueCard surface/control markers and visible severity text', () => {
+    const issue: A11yIssue = {
+      id: 'issue-1',
+      ruleId: 'image-alt',
+      impact: 'critical',
+      message: 'Add alt text',
+      help: 'Images need alt text',
+      helpUrl: 'https://example.test/image-alt',
+      wcagTags: ['wcag111'],
+      nodes: [
+        {
+          selector: '#bad-image',
+          html: '<img id="bad-image">',
+          failureSummary: 'Missing alt',
+        },
+      ],
+      meetsThreshold: true,
+      timestamp: 1,
+    }
+    const host = document.body.appendChild(document.createElement('div'))
+    const dispose = render(
+      () =>
+        createComponent(ThemeContextProvider, {
+          theme,
+          get children() {
+            return createComponent(A11yIssueCard, {
+              issue,
+              impact: 'critical',
+              selected: true,
+              onSelect: () => {},
+              onDisableRule: () => {},
+            })
+          },
+        }),
+      host,
+    )
+    expect(host.querySelector('[data-tsd-surface]')).toHaveAttribute(
+      'data-tsd-selected',
+      'true',
+    )
+    expect(host.querySelector('[data-severity="critical"]')).toHaveTextContent(
+      'Critical',
+    )
+    const selectButton = host.querySelector('button[aria-pressed]')
+    expect(selectButton).toHaveAttribute('type', 'button')
+    expect(selectButton).toHaveAttribute('aria-pressed', 'true')
+    expect(selectButton).toHaveAttribute('data-tsd-control')
+    expect(host.querySelector('a')?.className).not.toBe('')
+    expect(
+      host.querySelector('button:not([aria-pressed])')?.className,
+    ).not.toBe('')
+    expect(document.head.textContent).toContain(
+      resolveSemanticTheme(theme).color.state.selectionText,
+    )
+    dispose()
+  })
+
+  it('injects theme-aware overlay CSS and written tooltip severity', () => {
+    const target = document.body.appendChild(document.createElement('img'))
+    target.id = 'bad-image'
+    highlightElement('#bad-image', 'critical', {
+      showTooltip: true,
+      ruleId: 'image-alt',
+      theme,
+    })
+    const style = document.getElementById('tsd-a11y-highlight-styles')!
+    expect(style.textContent).toContain(
+      getSeverityStyle('critical', theme).colors.border,
+    )
+    expect(document.querySelector('[data-a11y-overlay]')).toHaveTextContent(
+      'Critical: image-alt',
+    )
+    expect(style.textContent).toContain(
+      `font: ${resolveSemanticTheme(theme).type.bodyXs.weight} ${resolveSemanticTheme(theme).type.bodyXs.size}`,
+    )
+  })
+
+  it('uses written severity labels for every multi-issue tooltip entry', () => {
+    const target = document.body.appendChild(document.createElement('img'))
+    target.id = 'bad-image'
+    highlightAllIssues(
+      [
+        {
+          id: 'issue-critical',
+          ruleId: 'image-alt',
+          impact: 'critical',
+          message: 'Add alt text',
+          help: 'Images need alt text',
+          helpUrl: 'https://example.test/image-alt',
+          wcagTags: [],
+          nodes: [
+            {
+              selector: '#bad-image',
+              html: '<img id="bad-image">',
+              failureSummary: 'Missing alt',
+            },
+          ],
+          meetsThreshold: true,
+          timestamp: 1,
+        },
+        {
+          id: 'issue-minor',
+          ruleId: 'image-redundant-alt',
+          impact: 'minor',
+          message: 'Avoid redundant alt text',
+          help: 'Images need useful alt text',
+          helpUrl: 'https://example.test/image-redundant-alt',
+          wcagTags: [],
+          nodes: [
+            {
+              selector: '#bad-image',
+              html: '<img id="bad-image">',
+              failureSummary: 'Redundant alt',
+            },
+          ],
+          meetsThreshold: true,
+          timestamp: 1,
+        },
+      ],
+      theme,
+    )
+    expect(document.querySelector('[data-a11y-overlay]')).toHaveTextContent(
+      '2 issues: Critical: image-alt | Minor: image-redundant-alt',
+    )
+  })
+})
+
+it('rejects every unapproved raw color and gradient in accessibility-owned source', () => {
+  const violations = files(coreRoot).flatMap((path) => {
+    const file = relative(packageRoot, path)
+    return readFileSync(path, 'utf8')
+      .split(/\r?\n/)
+      .flatMap((line, index) => {
+        if (!rawColor.test(line) && !gradient.test(line)) return []
+        const exempt = [...namedExemptions].some(
+          ([marker, allowedPath]) =>
+            line.includes(marker) && allowedPath.test(file),
+        )
+        return exempt ? [] : [`${file}:${index + 1}: ${line.trim()}`]
+      })
+  })
+  expect(violations, violations.join('\n')).toEqual([])
+})
diff --git a/packages/devtools-a11y/vite.config.ts b/packages/devtools-a11y/vite.config.ts
index 2e55f268..29e7a0a5 100644
--- a/packages/devtools-a11y/vite.config.ts
+++ b/packages/devtools-a11y/vite.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
+import { fileURLToPath } from 'node:url'
 import { tanstackViteConfig } from '@tanstack/vite-config'
 import solid from 'vite-plugin-solid'
 import packageJson from './package.json'
@@ -7,7 +8,7 @@ import type { Plugin } from 'vite'
 const config = defineConfig({
   plugins: [
     solid({
-      ssr: true,
+      ssr: process.env.VITEST !== 'true',
     }) as any satisfies Plugin,
   ],
   test: {
@@ -17,6 +18,14 @@ const config = defineConfig({
     environment: 'jsdom',
     setupFiles: ['./tests/test-setup.ts'],
     globals: true,
+    alias: {
+      '@tanstack/devtools-utils/react': fileURLToPath(
+        new URL('../devtools-utils/src/react/index.ts', import.meta.url),
+      ),
+      '@tanstack/devtools-utils/solid': fileURLToPath(
+        new URL('../devtools-utils/src/solid/index.ts', import.meta.url),
+      ),
+    },
   },
 })
 
diff --git a/packages/devtools-ui/package.json b/packages/devtools-ui/package.json
index 1db8a071..35b5513f 100644
--- a/packages/devtools-ui/package.json
+++ b/packages/devtools-ui/package.json
@@ -36,6 +36,12 @@
         "default": "./dist/esm/icons.js"
       }
     },
+    "./internal": {
+      "import": {
+        "types": "./dist/esm/internal.d.ts",
+        "default": "./dist/esm/internal.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -44,7 +50,9 @@
   },
   "files": [
     "dist/",
-    "src"
+    "src",
+    "!src/assets/fonts/*.ttf",
+    "!src/assets/fonts/*.woff2"
   ],
   "scripts": {
     "clean": "premove ./build ./dist",
@@ -53,7 +61,8 @@
     "test:lib": "vitest",
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
-    "test:build": "publint --strict",
+    "test:assets": "pnpm build && node ./scripts/check-font-assets.mjs",
+    "test:build": "pnpm test:assets && publint --strict",
     "build": "vite build"
   },
   "dependencies": {
diff --git a/packages/devtools-ui/scripts/check-font-assets.mjs b/packages/devtools-ui/scripts/check-font-assets.mjs
new file mode 100644
index 00000000..09542f69
--- /dev/null
+++ b/packages/devtools-ui/scripts/check-font-assets.mjs
@@ -0,0 +1,317 @@
+import { createHash } from 'node:crypto'
+import {
+  mkdtempSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  statSync,
+  writeFileSync,
+} from 'node:fs'
+import { tmpdir } from 'node:os'
+import { basename, dirname, join, resolve } from 'node:path'
+import { spawnSync } from 'node:child_process'
+import packageJson from '../package.json' with { type: 'json' }
+
+const MAX_BYTES = 163840
+const expectedFonts = new Map([
+  [
+    'BricolageGrotesque-Bold.ttf',
+    '913ee3631949ee1b4fb2601269412fca5775eb994d4f87be2c366c94ac123dc5',
+  ],
+  [
+    'Inter-latin.woff2',
+    '2c295d99e26dcf357d4d01bcf270fd6924b600c9a13dd8c363ef114f4c6976fa',
+  ],
+])
+const packageRoot = join(import.meta.dirname, '..')
+
+function fail(message) {
+  throw new Error(`Font asset check failed: ${message}`)
+}
+
+function validateTemporaryDirectory(directory, prefix) {
+  const resolvedDirectory = resolve(directory)
+  if (
+    dirname(resolvedDirectory) !== resolve(tmpdir()) ||
+    !basename(resolvedDirectory).startsWith(prefix)
+  ) {
+    fail(`invalid temporary directory: ${directory}`)
+  }
+  return resolvedDirectory
+}
+
+function inspectFonts(directory, expectedNames) {
+  const entries = readdirSync(directory, { withFileTypes: true }).filter(
+    (entry) => entry.isFile() && /\.(?:ttf|woff2)$/.test(entry.name),
+  )
+  const names = entries.map((entry) => entry.name).sort()
+  if (
+    expectedNames &&
+    names.join('\n') !== [...expectedNames].sort().join('\n')
+  ) {
+    fail(`unexpected source binaries: ${names.join(', ')}`)
+  }
+  if (entries.length !== 2) fail(`expected two binaries in ${directory}`)
+
+  let total = 0
+  const hashes = []
+  for (const entry of entries) {
+    const path = join(directory, entry.name)
+    const contents = readFileSync(path)
+    total += statSync(path).size
+    const expectedHash = expectedFonts.get(entry.name)
+    const actualHash = createHash('sha256').update(contents).digest('hex')
+    hashes.push(actualHash)
+    if (expectedHash && actualHash !== expectedHash)
+      fail(`hash mismatch: ${entry.name}`)
+    if (!expectedHash && ![...expectedFonts.values()].includes(actualHash)) {
+      fail(`unapproved emitted binary: ${entry.name}`)
+    }
+  }
+  if (total > MAX_BYTES) fail(`binary total ${total} exceeds ${MAX_BYTES}`)
+  const expectedHashes = [...expectedFonts.values()].sort()
+  if (hashes.sort().join('\n') !== expectedHashes.join('\n')) {
+    fail(`font hash multiset mismatch in ${directory}`)
+  }
+}
+
+function inspectGeneratedFontUrls(directory) {
+  let generatedText = ''
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name)
+    if (entry.isDirectory()) {
+      generatedText += inspectGeneratedFontUrls(path)
+    } else if (/\.(?:js|css)$/.test(entry.name)) {
+      const contents = readFileSync(path, 'utf8')
+      if (
+        /(?:^|["'(\s:=])\/assets\/[^"'()\s]+\.(?:ttf|woff2)/im.test(contents)
+      ) {
+        fail(`root-relative font URL in ${path}`)
+      }
+      generatedText += contents
+    }
+  }
+  return generatedText
+}
+
+const requiredExclusions = [
+  '!src/assets/fonts/*.ttf',
+  '!src/assets/fonts/*.woff2',
+]
+for (const exclusion of requiredExclusions) {
+  if (!packageJson.files.includes(exclusion))
+    fail(`missing files exclusion ${exclusion}`)
+}
+
+inspectFonts(join(packageRoot, 'src', 'assets', 'fonts'), expectedFonts.keys())
+inspectFonts(join(packageRoot, 'dist', 'assets'))
+inspectGeneratedFontUrls(join(packageRoot, 'dist', 'esm'))
+
+const packPrefix = join(tmpdir(), 'tanstack-devtools-ui-pack-')
+const windowsPackDestinationVariable = 'TANSTACK_DEVTOOLS_UI_PACK_DESTINATION'
+const previousWindowsPackDestination =
+  process.env[windowsPackDestinationVariable]
+const packDirectory = mkdtempSync(packPrefix)
+
+try {
+  const resolvedPackDirectory = validateTemporaryDirectory(
+    packDirectory,
+    'tanstack-devtools-ui-pack-',
+  )
+  if (/[\r\n"%]/.test(resolvedPackDirectory)) {
+    fail('temporary directory cannot be quoted safely for cmd.exe')
+  }
+
+  const isWindows = process.platform === 'win32'
+  if (isWindows) {
+    // Node otherwise escapes quote characters in a /c argument. Expand a
+    // pre-quoted environment value so native cmd.exe owns parsing while the
+    // spawn options remain portable and explicit.
+    process.env[windowsPackDestinationVariable] = `"${resolvedPackDirectory}"`
+  }
+  const result = isWindows
+    ? spawnSync(
+        process.env.ComSpec ?? 'cmd.exe',
+        [
+          '/d',
+          '/s',
+          '/c',
+          `pnpm.cmd pack --pack-destination %${windowsPackDestinationVariable}%`,
+        ],
+        {
+          cwd: packageRoot,
+          encoding: 'utf8',
+          stdio: ['ignore', 'pipe', 'inherit'],
+          windowsHide: true,
+        },
+      )
+    : spawnSync('pnpm', ['pack', '--pack-destination', packDirectory], {
+        cwd: packageRoot,
+        encoding: 'utf8',
+        stdio: ['ignore', 'pipe', 'inherit'],
+      })
+  if (result.error) fail(`pack spawn error: ${result.error.message}`)
+  if (result.status === null) fail('pack did not report an exit status')
+  if (result.status !== 0)
+    fail(`pack exited ${result.status}: ${result.stderr}`)
+  if (typeof result.stdout !== 'string' || !result.stdout.trim()) {
+    fail('pack produced empty output')
+  }
+
+  const archives = readdirSync(packDirectory).filter((name) =>
+    name.endsWith('.tgz'),
+  )
+  if (archives.length !== 1)
+    fail(`expected one tarball, found ${archives.length}`)
+  const tar = spawnSync('tar', ['-tf', join(packDirectory, archives[0])], {
+    encoding: 'utf8',
+    stdio: ['ignore', 'pipe', 'pipe'],
+    windowsHide: true,
+  })
+  if (tar.error) fail(`tar spawn error: ${tar.error.message}`)
+  if (tar.status === null) fail('tar did not report an exit status')
+  if (tar.status !== 0) fail(`tar listing failed: ${tar.stderr}`)
+  if (typeof tar.stdout !== 'string' || !tar.stdout.trim()) {
+    fail('tar produced an empty listing')
+  }
+
+  const files = tar.stdout
+    .split(/\r?\n/)
+    .filter(Boolean)
+    .map((name) => name.replaceAll('\\', '/').replace(/^\.\//, ''))
+  const packedFonts = files.filter((name) => /\.(?:ttf|woff2)$/i.test(name))
+  if (packedFonts.length !== 2) {
+    fail(`expected two packed font binaries, found ${packedFonts.length}`)
+  }
+  if (
+    packedFonts.some(
+      (name) => !/^package\/dist\/assets\/[^/]+\.(?:ttf|woff2)$/i.test(name),
+    )
+  ) {
+    fail(`font binary outside package/dist/assets: ${packedFonts.join(', ')}`)
+  }
+  if (
+    files.some((name) =>
+      /^package\/src\/assets\/fonts\/.*\.(?:ttf|woff2)$/i.test(name),
+    )
+  ) {
+    fail('source font binaries leaked into tarball')
+  }
+  const requiredLicenses = [
+    'package/src/assets/fonts/OFL-Bricolage-Grotesque.txt',
+    'package/src/assets/fonts/OFL-Inter.txt',
+  ]
+  for (const license of requiredLicenses) {
+    const count = files.filter((name) => name === license).length
+    if (count !== 1) fail(`expected ${license} once, found ${count}`)
+  }
+
+  const consumerDirectory = mkdtempSync(
+    join(tmpdir(), 'tanstack-devtools-ui-consumer-'),
+  )
+  try {
+    const resolvedConsumerDirectory = validateTemporaryDirectory(
+      consumerDirectory,
+      'tanstack-devtools-ui-consumer-',
+    )
+    const installedPackageDirectory = join(
+      resolvedConsumerDirectory,
+      'node_modules',
+      '@tanstack',
+      'devtools-ui',
+    )
+    mkdirSync(installedPackageDirectory, { recursive: true })
+
+    const unpack = spawnSync(
+      'tar',
+      [
+        '-xf',
+        join(resolvedPackDirectory, archives[0]),
+        '-C',
+        installedPackageDirectory,
+        '--strip-components',
+        '1',
+      ],
+      {
+        encoding: 'utf8',
+        stdio: ['ignore', 'pipe', 'inherit'],
+        windowsHide: true,
+      },
+    )
+    if (unpack.error) fail(`consumer unpack error: ${unpack.error.message}`)
+    if (unpack.status === null) {
+      fail('consumer unpack did not report an exit status')
+    }
+    if (unpack.status !== 0) fail(`consumer unpack exited ${unpack.status}`)
+
+    writeFileSync(
+      join(resolvedConsumerDirectory, 'index.html'),
+      '<main id="app"></main><script type="module" src="/main.js"></script>\n',
+    )
+    writeFileSync(
+      join(resolvedConsumerDirectory, 'main.js'),
+      [
+        "import { devtoolsFontCss } from '@tanstack/devtools-ui/internal'",
+        "document.querySelector('#app').textContent = devtoolsFontCss",
+        '',
+      ].join('\n'),
+    )
+
+    const viteCli = join(
+      packageRoot,
+      '..',
+      '..',
+      'node_modules',
+      'vite',
+      'bin',
+      'vite.js',
+    )
+    if (!statSync(viteCli).isFile()) fail(`missing Vite CLI: ${viteCli}`)
+    const consumerBuild = spawnSync(
+      process.execPath,
+      [viteCli, 'build', '--base', './'],
+      {
+        cwd: resolvedConsumerDirectory,
+        encoding: 'utf8',
+        stdio: ['ignore', 'pipe', 'inherit'],
+        windowsHide: true,
+      },
+    )
+    if (consumerBuild.error) {
+      fail(`consumer build error: ${consumerBuild.error.message}`)
+    }
+    if (consumerBuild.status === null) {
+      fail('consumer build did not report an exit status')
+    }
+    if (consumerBuild.status !== 0) {
+      fail(`consumer build exited ${consumerBuild.status}`)
+    }
+    if (
+      typeof consumerBuild.stdout !== 'string' ||
+      !consumerBuild.stdout.trim()
+    ) {
+      fail('consumer build produced empty output')
+    }
+
+    const consumerDist = join(resolvedConsumerDirectory, 'dist')
+    inspectFonts(join(consumerDist, 'assets'))
+    const consumerOutput = inspectGeneratedFontUrls(consumerDist)
+    for (const marker of ['Bricolage Grotesque', 'Inter']) {
+      if (!consumerOutput.includes(marker)) {
+        fail(`consumer output is missing font marker: ${marker}`)
+      }
+    }
+  } finally {
+    rmSync(consumerDirectory, { recursive: true, force: true })
+  }
+} finally {
+  if (previousWindowsPackDestination === undefined) {
+    delete process.env[windowsPackDestinationVariable]
+  } else {
+    process.env[windowsPackDestinationVariable] = previousWindowsPackDestination
+  }
+  rmSync(packDirectory, { recursive: true, force: true })
+}
+
+console.log('Font assets and package contents verified.')
diff --git a/packages/devtools-ui/src/assets/fonts/BricolageGrotesque-Bold.ttf b/packages/devtools-ui/src/assets/fonts/BricolageGrotesque-Bold.ttf
new file mode 100644
index 00000000..ea2465b4
Binary files /dev/null and b/packages/devtools-ui/src/assets/fonts/BricolageGrotesque-Bold.ttf differ
diff --git a/packages/devtools-ui/src/assets/fonts/Inter-latin.woff2 b/packages/devtools-ui/src/assets/fonts/Inter-latin.woff2
new file mode 100644
index 00000000..b0d0e2e5
Binary files /dev/null and b/packages/devtools-ui/src/assets/fonts/Inter-latin.woff2 differ
diff --git a/packages/devtools-ui/src/assets/fonts/OFL-Bricolage-Grotesque.txt b/packages/devtools-ui/src/assets/fonts/OFL-Bricolage-Grotesque.txt
new file mode 100644
index 00000000..4dfd4fe0
--- /dev/null
+++ b/packages/devtools-ui/src/assets/fonts/OFL-Bricolage-Grotesque.txt
@@ -0,0 +1,93 @@
+Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/packages/devtools-ui/src/assets/fonts/OFL-Inter.txt b/packages/devtools-ui/src/assets/fonts/OFL-Inter.txt
new file mode 100644
index 00000000..9b2ca37b
--- /dev/null
+++ b/packages/devtools-ui/src/assets/fonts/OFL-Inter.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/packages/devtools-ui/src/components/button.tsx b/packages/devtools-ui/src/components/button.tsx
index f292cdc6..5568d71d 100644
--- a/packages/devtools-ui/src/components/button.tsx
+++ b/packages/devtools-ui/src/components/button.tsx
@@ -32,7 +32,7 @@ export function Button(props: ButtonProps) {
   })
 
   return (
-    <button {...props} class={classes()}>
+    <button data-tsd-control {...props} class={classes()}>
       {props.children}
     </button>
   )
diff --git a/packages/devtools-ui/src/components/checkbox.tsx b/packages/devtools-ui/src/components/checkbox.tsx
index d87a4efc..011f62c6 100644
--- a/packages/devtools-ui/src/components/checkbox.tsx
+++ b/packages/devtools-ui/src/components/checkbox.tsx
@@ -1,4 +1,4 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createUniqueId } from 'solid-js'
 import { createStyles } from '../styles/use-styles'
 
 interface CheckboxProps {
@@ -11,6 +11,7 @@ interface CheckboxProps {
 export function Checkbox(props: CheckboxProps) {
   const styles = createStyles()
   const [isChecked, setIsChecked] = createSignal(props.checked || false)
+  const descriptionId = `${createUniqueId()}-description`
 
   const handleChange = (e: Event) => {
     const checked = (e.target as HTMLInputElement).checked
@@ -22,6 +23,9 @@ export function Checkbox(props: CheckboxProps) {
     <div class={styles().checkboxContainer}>
       <label class={styles().checkboxWrapper}>
         <input
+          data-tsd-control
+          data-tsd-selected={isChecked() ? 'true' : undefined}
+          aria-describedby={props.description ? descriptionId : undefined}
           type="checkbox"
           checked={props.checked ?? isChecked()}
           class={styles().checkbox}
@@ -32,7 +36,7 @@ export function Checkbox(props: CheckboxProps) {
             <span class={styles().checkboxLabel}>{props.label}</span>
           )}
           {props.description && (
-            <span class={styles().checkboxDescription}>
+            <span id={descriptionId} class={styles().checkboxDescription}>
               {props.description}
             </span>
           )}
diff --git a/packages/devtools-ui/src/components/header.tsx b/packages/devtools-ui/src/components/header.tsx
index 5f52f0c7..bdda44bf 100644
--- a/packages/devtools-ui/src/components/header.tsx
+++ b/packages/devtools-ui/src/components/header.tsx
@@ -10,6 +10,8 @@ export function Header({
   const styles = createStyles()
   return (
     <header
+      data-tsd-surface
+      data-tsd-separator
       class={clsx(styles().header.row, 'tsqd-header', className)}
       {...rest}
     >
@@ -33,7 +35,11 @@ export function HeaderLogo({
   const styles = createStyles()
   return (
     <div class={styles().header.logoAndToggleContainer}>
-      <button class={clsx(styles().header.logo)} onClick={onClick}>
+      <button
+        data-tsd-control
+        class={clsx(styles().header.logo)}
+        onClick={onClick}
+      >
         <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>
         <span
           class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}
diff --git a/packages/devtools-ui/src/components/icons.tsx b/packages/devtools-ui/src/components/icons.tsx
index 0915b083..42d3f11f 100644
--- a/packages/devtools-ui/src/components/icons.tsx
+++ b/packages/devtools-ui/src/components/icons.tsx
@@ -698,7 +698,7 @@ export function PiP() {
   )
 }
 
-export function CopiedCopier(props: { theme: TanStackDevtoolsTheme }) {
+export function CopiedCopier(_props: { theme: TanStackDevtoolsTheme }) {
   return (
     <svg
       width="24"
@@ -709,7 +709,7 @@ export function CopiedCopier(props: { theme: TanStackDevtoolsTheme }) {
     >
       <path
         d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
-        stroke={props.theme === 'dark' ? '#12B76A' : '#027A48'}
+        stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -729,7 +729,7 @@ export function ErrorCopier() {
     >
       <path
         d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
-        stroke="#F04438"
+        stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -770,7 +770,7 @@ export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme })
         >
           <path
             d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
-            stroke={props.theme === 'dark' ? '#9B8AFB' : '#6938EF'}
+            stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -787,7 +787,7 @@ export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme })
         >
           <path
             d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z"
-            stroke={props.theme === 'dark' ? '#9B8AFB' : '#6938EF'}
+            stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
diff --git a/packages/devtools-ui/src/components/input.tsx b/packages/devtools-ui/src/components/input.tsx
index a256162f..f0bd362b 100644
--- a/packages/devtools-ui/src/components/input.tsx
+++ b/packages/devtools-ui/src/components/input.tsx
@@ -1,4 +1,4 @@
-import { createSignal } from 'solid-js'
+import { createSignal, createUniqueId } from 'solid-js'
 import { createStyles } from '../styles/use-styles'
 
 interface InputProps {
@@ -13,6 +13,8 @@ interface InputProps {
 export function Input(props: InputProps) {
   const styles = createStyles()
   const [val, setVal] = createSignal(props.value || '')
+  const id = createUniqueId()
+  const descriptionId = `${id}-description`
 
   const handleChange = (e: Event) => {
     const value = (e.target as HTMLInputElement).value
@@ -24,12 +26,19 @@ export function Input(props: InputProps) {
     <div class={styles().inputContainer}>
       <div class={styles().inputWrapper}>
         {props.label && (
-          <label class={styles().inputLabel}>{props.label}</label>
+          <label for={id} class={styles().inputLabel}>
+            {props.label}
+          </label>
         )}
         {props.description && (
-          <p class={styles().inputDescription}>{props.description}</p>
+          <p id={descriptionId} class={styles().inputDescription}>
+            {props.description}
+          </p>
         )}
         <input
+          id={id}
+          data-tsd-control
+          aria-describedby={props.description ? descriptionId : undefined}
           type={props.type || 'text'}
           class={styles().input}
           value={val()}
diff --git a/packages/devtools-ui/src/components/logo.tsx b/packages/devtools-ui/src/components/logo.tsx
index 6436dccc..8797ac9f 100644
--- a/packages/devtools-ui/src/components/logo.tsx
+++ b/packages/devtools-ui/src/components/logo.tsx
@@ -6,6 +6,7 @@ export function TanStackLogo() {
   const styles = createStyles()
   return (
     <svg
+      data-tsd-surface
       class={styles().logo}
       xmlns="http://www.w3.org/2000/svg"
       enable-background="new 0 0 634 633"
diff --git a/packages/devtools-ui/src/components/main-panel.tsx b/packages/devtools-ui/src/components/main-panel.tsx
index d72fa77d..097d7c88 100644
--- a/packages/devtools-ui/src/components/main-panel.tsx
+++ b/packages/devtools-ui/src/components/main-panel.tsx
@@ -18,6 +18,7 @@ export const MainPanel = ({
 
   return (
     <div
+      data-tsd-surface
       class={clsx(
         styles().mainPanel.panel(Boolean(withPadding)),
         className,
diff --git a/packages/devtools-ui/src/components/section.tsx b/packages/devtools-ui/src/components/section.tsx
index 335ee489..d1a574b3 100644
--- a/packages/devtools-ui/src/components/section.tsx
+++ b/packages/devtools-ui/src/components/section.tsx
@@ -8,7 +8,11 @@ export const Section = ({
 }: JSX.IntrinsicElements['section']) => {
   const styles = createStyles()
   return (
-    <section class={clsx(styles().section.main, rest.class)} {...rest}>
+    <section
+      data-tsd-surface
+      class={clsx(styles().section.main, rest.class)}
+      {...rest}
+    >
       {children}
     </section>
   )
@@ -20,7 +24,11 @@ export const SectionTitle = ({
 }: JSX.IntrinsicElements['h3']) => {
   const styles = createStyles()
   return (
-    <h3 class={clsx(styles().section.title, rest.class)} {...rest}>
+    <h3
+      data-tsd-separator
+      class={clsx(styles().section.title, rest.class)}
+      {...rest}
+    >
       {children}
     </h3>
   )
diff --git a/packages/devtools-ui/src/components/select.tsx b/packages/devtools-ui/src/components/select.tsx
index 39da597b..0d631e2b 100644
--- a/packages/devtools-ui/src/components/select.tsx
+++ b/packages/devtools-ui/src/components/select.tsx
@@ -1,4 +1,4 @@
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal, createUniqueId } from 'solid-js'
 import { createStyles } from '../styles/use-styles'
 
 interface SelectOption<T extends string | number> {
@@ -17,28 +17,47 @@ interface SelectProps<T extends string | number> {
 export function Select<T extends string | number>(props: SelectProps<T>) {
   const styles = createStyles()
   const [selected, setSelected] = createSignal(
-    props.value || props.options[0]?.value,
+    props.value ?? props.options[0]?.value,
   )
+  const id = createUniqueId()
+  const descriptionId = `${id}-description`
+
+  createEffect(() => {
+    if (props.value !== undefined) {
+      setSelected(() => props.value)
+    }
+  })
 
   const handleChange = (e: Event) => {
-    const value = (e.target as HTMLSelectElement).value as T
-    setSelected((prev) => (prev !== value ? value : prev))
-    props.onChange?.(value)
+    const value = (e.target as HTMLSelectElement).value
+    const option = props.options.find(
+      (candidate) => String(candidate.value) === value,
+    )
+    if (!option) return
+    setSelected(() => option.value)
+    props.onChange?.(option.value)
   }
 
   return (
     <div class={styles().selectContainer}>
       <div class={styles().selectWrapper}>
         {props.label && (
-          <label class={styles().selectLabel}>{props.label}</label>
+          <label for={id} class={styles().selectLabel}>
+            {props.label}
+          </label>
         )}
         {props.description && (
-          <p class={styles().selectDescription}>{props.description}</p>
+          <p id={descriptionId} class={styles().selectDescription}>
+            {props.description}
+          </p>
         )}
         <select
+          id={id}
+          data-tsd-control
+          aria-describedby={props.description ? descriptionId : undefined}
           class={styles().select}
           value={selected()}
-          onInput={handleChange}
+          onChange={handleChange}
         >
           {props.options.map((opt) => (
             <option value={opt.value}>{opt.label}</option>
diff --git a/packages/devtools-ui/src/components/tag.tsx b/packages/devtools-ui/src/components/tag.tsx
index 834f3e59..4669daf6 100644
--- a/packages/devtools-ui/src/components/tag.tsx
+++ b/packages/devtools-ui/src/components/tag.tsx
@@ -10,7 +10,11 @@ export const Tag = (props: {
 }) => {
   const styles = createStyles()
   return (
-    <button disabled={props.disabled} class={styles().tag.base}>
+    <button
+      data-tsd-control
+      disabled={props.disabled}
+      class={styles().tag.base}
+    >
       <span class={styles().tag.dot(props.color)} />
       <span class={styles().tag.label}>{props.label}</span>
 
diff --git a/packages/devtools-ui/src/components/theme.tsx b/packages/devtools-ui/src/components/theme.tsx
index bfd7a950..305d26e5 100644
--- a/packages/devtools-ui/src/components/theme.tsx
+++ b/packages/devtools-ui/src/components/theme.tsx
@@ -4,6 +4,7 @@ import {
   createSignal,
   useContext as getContext,
 } from 'solid-js'
+import { ensureDevtoolsStyles } from '../styles/semantic-theme'
 import type { Accessor, JSX } from 'solid-js'
 
 export type TanStackDevtoolsTheme = 'light' | 'dark'
@@ -22,9 +23,16 @@ export const ThemeContextProvider = (props: {
   createEffect(() => {
     setTheme(props.theme)
   })
+  const [container, setContainer] = createSignal<HTMLSpanElement>()
+  createEffect(() => {
+    const element = container()
+    if (element) ensureDevtoolsStyles(element.ownerDocument)
+  })
   return (
     <ThemeContext.Provider value={{ theme, setTheme }}>
-      {props.children}
+      <span ref={setContainer} style={{ display: 'contents' }}>
+        {props.children}
+      </span>
     </ThemeContext.Provider>
   )
 }
diff --git a/packages/devtools-ui/src/components/tree.tsx b/packages/devtools-ui/src/components/tree.tsx
index dd1d4e9a..9c112b8a 100644
--- a/packages/devtools-ui/src/components/tree.tsx
+++ b/packages/devtools-ui/src/components/tree.tsx
@@ -7,6 +7,7 @@ import { createStyles, css } from '../styles/use-styles'
 
 // icons
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
+import { createTheme } from './theme'
 
 // utils
 import type { CollapsiblePaths } from '../utils/deep-keys'
@@ -52,11 +53,14 @@ function JsonValue(props: {
   const styles = createStyles()
 
   return (
-    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>
+    <span
+      data-tsd-surface={props.isRoot ? '' : undefined}
+      class={styles().tree.valueContainer(props.isRoot ?? false)}
+    >
       {props.keyName &&
         typeof props.value !== 'object' &&
         !Array.isArray(props.value) && (
-          <span class={styles().tree.valueKey}>
+          <span data-tsd-syntax="property" class={styles().tree.valueKey}>
             &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
@@ -64,7 +68,7 @@ function JsonValue(props: {
       {(() => {
         if (typeof props.value === 'string') {
           return (
-            <span class={styles().tree.valueString}>
+            <span data-tsd-syntax="string" class={styles().tree.valueString}>
               &quot;{props.value}&quot;
             </span>
           )
@@ -72,29 +76,39 @@ function JsonValue(props: {
 
         if (typeof props.value === 'number') {
           return (
-            <span class={styles().tree.valueNumber}>{String(props.value)}</span>
+            <span data-tsd-syntax="number" class={styles().tree.valueNumber}>
+              {String(props.value)}
+            </span>
           )
         }
 
         if (typeof props.value === 'boolean') {
           return (
-            <span class={styles().tree.valueBoolean}>
+            <span data-tsd-syntax="keyword" class={styles().tree.valueBoolean}>
               {String(props.value)}
             </span>
           )
         }
 
         if (props.value === null) {
-          return <span class={styles().tree.valueNull}>null</span>
+          return (
+            <span data-tsd-syntax="keyword" class={styles().tree.valueNull}>
+              null
+            </span>
+          )
         }
 
         if (props.value === undefined) {
-          return <span class={styles().tree.valueNull}>undefined</span>
+          return (
+            <span data-tsd-syntax="keyword" class={styles().tree.valueNull}>
+              undefined
+            </span>
+          )
         }
 
         if (typeof props.value === 'function') {
           return (
-            <span class={styles().tree.valueFunction}>
+            <span data-tsd-syntax="keyword" class={styles().tree.valueFunction}>
               {String(props.value)}
             </span>
           )
@@ -137,7 +151,11 @@ function JsonValue(props: {
           <CopyButton value={props.value} />
         </div>
       )}
-      {props.isLastKey || props.isRoot ? '' : <span>,</span>}
+      {props.isLastKey || props.isRoot ? (
+        ''
+      ) : (
+        <span data-tsd-syntax="punctuation">,</span>
+      )}
     </span>
   )
 }
@@ -163,12 +181,17 @@ const ArrayValue = (props: {
     return (
       <span class={styles().tree.expanderContainer}>
         {props.keyName && (
-          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+          <span
+            data-tsd-syntax="property"
+            class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+          >
             &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
 
-        <span class={styles().tree.valueBraces}>[]</span>
+        <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
+          []
+        </span>
       </span>
     )
   }
@@ -186,6 +209,7 @@ const ArrayValue = (props: {
             e.stopImmediatePropagation()
             setExpanded(!expanded())
           }}
+          data-tsd-syntax="property"
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
           &quot;{props.keyName}&quot;:{' '}
@@ -193,10 +217,15 @@ const ArrayValue = (props: {
         </span>
       )}
 
-      <span class={styles().tree.valueBraces}>[</span>
+      <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
+        [
+      </span>
 
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
+        <span
+          data-tsd-separator={props.keyName ? '' : undefined}
+          class={styles().tree.expandedLine(Boolean(props.keyName))}
+        >
           <For each={props.value}>
             {(item, i) => {
               const isLastKey = i() === props.value.length - 1
@@ -219,6 +248,7 @@ const ArrayValue = (props: {
 
       <Show when={!expanded()}>
         <span
+          data-tsd-syntax="comment"
           onClick={(e) => {
             e.stopPropagation()
             e.stopImmediatePropagation()
@@ -229,7 +259,9 @@ const ArrayValue = (props: {
           {`...`}
         </span>
       </Show>
-      <span class={styles().tree.valueBraces}>]</span>
+      <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
+        ]
+      </span>
     </span>
   )
 }
@@ -258,12 +290,15 @@ const ObjectValue = (props: {
     return (
       <span class={styles().tree.expanderContainer}>
         {props.keyName && (
-          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+          <span
+            data-tsd-syntax="property"
+            class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+          >
             &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
 
-        <span class={styles().tree.valueBraces}>
+        <span data-tsd-syntax="string" class={styles().tree.valueBraces}>
           {dayjs(props.value).format(
             props.config?.dateFormat ? props.config.dateFormat : 'DDMMMYY',
           )}
@@ -276,12 +311,17 @@ const ObjectValue = (props: {
     return (
       <span class={styles().tree.expanderContainer}>
         {props.keyName && (
-          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+          <span
+            data-tsd-syntax="property"
+            class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+          >
             &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
 
-        <span class={styles().tree.valueBraces}>{'{}'}</span>
+        <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
+          {'{}'}
+        </span>
       </span>
     )
   }
@@ -302,6 +342,7 @@ const ObjectValue = (props: {
             e.stopImmediatePropagation()
             setExpanded(!expanded())
           }}
+          data-tsd-syntax="property"
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
           &quot;{props.keyName}&quot;:{' '}
@@ -309,10 +350,15 @@ const ObjectValue = (props: {
         </span>
       )}
 
-      <span class={styles().tree.valueBraces}>{'{'}</span>
+      <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
+        {'{'}
+      </span>
 
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
+        <span
+          data-tsd-separator={props.keyName ? '' : undefined}
+          class={styles().tree.expandedLine(Boolean(props.keyName))}
+        >
           <For each={keys}>
             {(k) => (
               <>
@@ -335,6 +381,7 @@ const ObjectValue = (props: {
 
       <Show when={!expanded()}>
         <span
+          data-tsd-syntax="comment"
           onClick={(e) => {
             e.stopPropagation()
             e.stopImmediatePropagation()
@@ -346,7 +393,9 @@ const ObjectValue = (props: {
         </span>
       </Show>
 
-      <span class={styles().tree.valueBraces}>{'}'}</span>
+      <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
+        {'}'}
+      </span>
     </span>
   )
 }
@@ -355,10 +404,13 @@ type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
 
 const CopyButton = (props: { value: unknown }) => {
   const styles = createStyles()
+  const { theme } = createTheme()
   const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
 
   return (
     <button
+      data-tsd-control
+      data-copy-state={copyState()}
       class={styles().tree.actionButton}
       title="Copy object to clipboard"
       aria-label={`${
@@ -397,10 +449,14 @@ const CopyButton = (props: { value: unknown }) => {
           <Copier />
         </Match>
         <Match when={copyState() === 'SuccessCopy'}>
-          <CopiedCopier theme={'dark'} />
+          <span class={styles().tree.actionSuccess}>
+            <CopiedCopier theme={theme()} />
+          </span>
         </Match>
         <Match when={copyState() === 'ErrorCopy'}>
-          <ErrorCopier />
+          <span class={styles().tree.actionError}>
+            <ErrorCopier />
+          </span>
         </Match>
       </Switch>
     </button>
@@ -411,7 +467,18 @@ const Expander = (props: { expanded: boolean; onClick: () => void }) => {
   const styles = createStyles()
   return (
     <span
+      data-tsd-control
+      role="button"
+      tabIndex={0}
+      aria-expanded={props.expanded}
+      aria-label={props.expanded ? 'Collapse value' : 'Expand value'}
       onClick={props.onClick}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          props.onClick()
+        }
+      }}
       class={clsx(
         styles().tree.expander,
         css`
diff --git a/packages/devtools-ui/src/internal.ts b/packages/devtools-ui/src/internal.ts
new file mode 100644
index 00000000..e0efa3da
--- /dev/null
+++ b/packages/devtools-ui/src/internal.ts
@@ -0,0 +1,11 @@
+export {
+  DEVTOOLS_FONT_STYLE_ID,
+  DEVTOOLS_FORCED_COLORS_STYLE_ID,
+  devtoolsFontCss,
+  forcedColorsCss,
+  ensureDevtoolsFonts,
+  ensureDevtoolsStyles,
+  resolveSemanticTheme,
+  semanticThemes,
+} from './styles/semantic-theme'
+export type { SemanticTheme, StatusRole } from './styles/semantic-theme'
diff --git a/packages/devtools-ui/src/styles/semantic-theme.ts b/packages/devtools-ui/src/styles/semantic-theme.ts
new file mode 100644
index 00000000..f91ff72e
--- /dev/null
+++ b/packages/devtools-ui/src/styles/semantic-theme.ts
@@ -0,0 +1,345 @@
+import bricolageGrotesqueUrl from '../assets/fonts/BricolageGrotesque-Bold.ttf?url&no-inline'
+import interUrl from '../assets/fonts/Inter-latin.woff2?url&no-inline'
+import type { TanStackDevtoolsTheme } from '../components/theme'
+
+export const DEVTOOLS_FONT_STYLE_ID = 'tanstack-devtools-fonts'
+export const DEVTOOLS_FORCED_COLORS_STYLE_ID = 'tanstack-devtools-forced-colors'
+
+export const forcedColorsCss = `
+@media (forced-colors: active) {
+  [data-tsd-surface] { forced-color-adjust: auto; background: Canvas; color: CanvasText; }
+  [data-tsd-control] { forced-color-adjust: auto; background: ButtonFace; color: ButtonText; border-color: ButtonText; }
+  [data-tsd-selected="true"] { background: Highlight; color: HighlightText; border-color: HighlightText; }
+  [data-tsd-separator] { border-color: CanvasText; }
+  [data-tsd-separator="resize"] { border: 1px solid CanvasText; }
+  [data-tsd-control]:focus-visible { outline: 2px solid ButtonText; outline-offset: 2px; }
+}`
+
+export const devtoolsFontCss = `
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  src: url('${bricolageGrotesqueUrl}') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('${interUrl}') format('woff2');
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}`
+
+export function ensureDevtoolsFonts(targetDocument: Document): void {
+  if (targetDocument.getElementById(DEVTOOLS_FONT_STYLE_ID)) return
+
+  const style = targetDocument.createElement('style')
+  style.id = DEVTOOLS_FONT_STYLE_ID
+  style.textContent = devtoolsFontCss
+  targetDocument.head.append(style)
+}
+
+export function ensureDevtoolsStyles(targetDocument: Document): void {
+  ensureDevtoolsFonts(targetDocument)
+  if (targetDocument.getElementById(DEVTOOLS_FORCED_COLORS_STYLE_ID)) return
+  const style = targetDocument.createElement('style')
+  style.id = DEVTOOLS_FORCED_COLORS_STYLE_ID
+  style.textContent = forcedColorsCss
+  targetDocument.head.append(style)
+}
+
+export type StatusRole = 'success' | 'warning' | 'error' | 'info' | 'neutral'
+
+type DeepReadonly<T> = T extends (...args: Array<never>) => unknown
+  ? T
+  : T extends object
+    ? { readonly [Key in keyof T]: DeepReadonly<T[Key]> }
+    : T
+
+export type SemanticTheme = DeepReadonly<{
+  font: {
+    display: string
+    body: string
+    mono: string
+  }
+  space: { 1: '4px'; 2: '8px'; 3: '12px'; 4: '16px' }
+  gap: {
+    tight: '4px'
+    control: '8px'
+    section: '12px'
+    sectionLarge: '16px'
+  }
+  padding: { controlBlock: '6px'; controlInline: '8px' }
+  type: {
+    bodyXs: { size: '12px'; lineHeight: '17px'; weight: 400 }
+    bodySm: { size: '14px'; lineHeight: '20px'; weight: 400 }
+    bodyMd: { size: '16px'; lineHeight: '24px'; weight: 300 }
+    labelSm: {
+      size: '12px'
+      lineHeight: '14px'
+      weight: 500
+      tracking: '0.5px'
+    }
+    headingCompact: { size: '14px'; lineHeight: '18px'; weight: 700 }
+    headingPane: { size: '16px'; lineHeight: '21px'; weight: 700 }
+  }
+  radius: { control: '4px'; group: '6px'; overlay: '8px' }
+  shadow: { xs: string; sm: string; overlay: string }
+  motion: { strip: '120ms'; graceMs: 400 }
+  color: {
+    surface: {
+      app: string
+      workspace: string
+      subtle: string
+      elevated: string
+      brand: string
+    }
+    text: {
+      primary: string
+      secondary: string
+      muted: string
+      mutedOnBrand: string
+      inverse: string
+      link: string
+    }
+    border: { decorative: string; control: string; focus: string }
+    state: {
+      hover: string
+      pressed: string
+      selectionFill: string
+      selectionText: string
+    }
+    status: Record<
+      StatusRole,
+      {
+        subtleFill: string
+        border: string
+        text: string
+        solidFill: string
+        onFill: string
+      }
+    >
+    syntax: {
+      keyword: string
+      string: string
+      number: string
+      comment: string
+      property: string
+      punctuation: string
+      selectionFill: string
+      selectionText: string
+    }
+  }
+}>
+
+function deepFreeze<const TValue extends object>(value: TValue) {
+  for (const nestedValue of Object.values(value)) {
+    if (nestedValue !== null && typeof nestedValue === 'object') {
+      deepFreeze(nestedValue)
+    }
+  }
+
+  return Object.freeze(value)
+}
+
+const commonTheme = {
+  font: {
+    display: "'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif",
+    body: "'Inter', ui-sans-serif, system-ui, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+  space: { 1: '4px', 2: '8px', 3: '12px', 4: '16px' },
+  gap: {
+    tight: '4px',
+    control: '8px',
+    section: '12px',
+    sectionLarge: '16px',
+  },
+  padding: { controlBlock: '6px', controlInline: '8px' },
+  type: {
+    bodyXs: { size: '12px', lineHeight: '17px', weight: 400 },
+    bodySm: { size: '14px', lineHeight: '20px', weight: 400 },
+    bodyMd: { size: '16px', lineHeight: '24px', weight: 300 },
+    labelSm: {
+      size: '12px',
+      lineHeight: '14px',
+      weight: 500,
+      tracking: '0.5px',
+    },
+    headingCompact: {
+      size: '14px',
+      lineHeight: '18px',
+      weight: 700,
+    },
+    headingPane: { size: '16px', lineHeight: '21px', weight: 700 },
+  },
+  radius: { control: '4px', group: '6px', overlay: '8px' },
+  shadow: {
+    xs: '0 1px 2px rgba(0,0,0,0.03)',
+    sm: '0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03)',
+    overlay: '0 25px 50px -12px rgba(0,0,0,0.20)',
+  },
+  motion: { strip: '120ms', graceMs: 400 },
+} satisfies Omit<SemanticTheme, 'color'>
+
+export const semanticThemes = deepFreeze({
+  light: {
+    ...commonTheme,
+    color: {
+      surface: {
+        app: '#ffffff',
+        workspace: '#ffffff',
+        subtle: '#fafafa',
+        elevated: '#ffffff',
+        brand: '#eeebd4',
+      },
+      text: {
+        primary: '#111111',
+        secondary: '#3e3529',
+        muted: '#756c5b',
+        mutedOnBrand: '#3e3529',
+        inverse: '#ffffff',
+        link: '#003e53',
+      },
+      border: {
+        decorative: '#eeebd4',
+        control: '#756c5b',
+        focus: '#003e53',
+      },
+      state: {
+        hover: '#1111110f',
+        pressed: '#1111111f',
+        selectionFill: '#3e3529',
+        selectionText: '#ffffff',
+      },
+      status: {
+        success: {
+          subtleFill: '#d8f0da',
+          border: '#1d4226',
+          text: '#1d4226',
+          solidFill: '#1d4226',
+          onFill: '#ffffff',
+        },
+        warning: {
+          subtleFill: '#fef6cc',
+          border: '#624a00',
+          text: '#624a00',
+          solidFill: '#624a00',
+          onFill: '#ffffff',
+        },
+        error: {
+          subtleFill: '#f9d8c4',
+          border: '#5f1a06',
+          text: '#5f1a06',
+          solidFill: '#5f1a06',
+          onFill: '#ffffff',
+        },
+        info: {
+          subtleFill: '#d8f0f3',
+          border: '#003e53',
+          text: '#003e53',
+          solidFill: '#003e53',
+          onFill: '#ffffff',
+        },
+        neutral: {
+          subtleFill: '#eeebd4',
+          border: '#756c5b',
+          text: '#3e3529',
+          solidFill: '#3e3529',
+          onFill: '#ffffff',
+        },
+      },
+      syntax: {
+        keyword: '#5f1a06',
+        string: '#1d4226',
+        number: '#541f5d',
+        comment: '#756c5b',
+        property: '#003e53',
+        punctuation: '#3e3529',
+        selectionFill: '#d8f0f3',
+        selectionText: '#003e53',
+      },
+    },
+  },
+  dark: {
+    ...commonTheme,
+    color: {
+      surface: {
+        app: '#111111',
+        workspace: '#1f1f1f',
+        subtle: '#1b1b1b',
+        elevated: '#2b2b2b',
+        brand: '#111111',
+      },
+      text: {
+        primary: '#ffffff',
+        secondary: '#aea691',
+        muted: '#aea691',
+        mutedOnBrand: '#aea691',
+        inverse: '#111111',
+        link: '#9cd5e2',
+      },
+      border: { decorative: '#2d2d2d', control: '#aea691', focus: '#61adbf' },
+      state: {
+        hover: '#ffffff14',
+        pressed: '#ffffff1f',
+        selectionFill: '#c5c3bf',
+        selectionText: '#111111',
+      },
+      status: {
+        success: {
+          subtleFill: '#1d4226',
+          border: '#69bc75',
+          text: '#a2e1a9',
+          solidFill: '#69bc75',
+          onFill: '#111111',
+        },
+        warning: {
+          subtleFill: '#624a00',
+          border: '#f4d648',
+          text: '#fae884',
+          solidFill: '#f4d648',
+          onFill: '#111111',
+        },
+        error: {
+          subtleFill: '#5f1a06',
+          border: '#e06e49',
+          text: '#edaa8d',
+          solidFill: '#e06e49',
+          onFill: '#111111',
+        },
+        info: {
+          subtleFill: '#003e53',
+          border: '#61adbf',
+          text: '#9cd5e2',
+          solidFill: '#61adbf',
+          onFill: '#111111',
+        },
+        neutral: {
+          subtleFill: '#2b2b2b',
+          border: '#aea691',
+          text: '#c5c3bf',
+          solidFill: '#c5c3bf',
+          onFill: '#111111',
+        },
+      },
+      syntax: {
+        keyword: '#e06e49',
+        string: '#69bc75',
+        number: '#c56dcf',
+        comment: '#aea691',
+        property: '#61adbf',
+        punctuation: '#c5c3bf',
+        selectionFill: '#003e53',
+        selectionText: '#ffffff',
+      },
+    },
+  },
+} as const satisfies Record<TanStackDevtoolsTheme, SemanticTheme>)
+
+export function resolveSemanticTheme(
+  theme: TanStackDevtoolsTheme,
+): SemanticTheme {
+  return semanticThemes[theme]
+}
diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts
index be8f9135..cd3f8160 100644
--- a/packages/devtools-ui/src/styles/use-styles.ts
+++ b/packages/devtools-ui/src/styles/use-styles.ts
@@ -1,138 +1,32 @@
 import * as goober from 'goober'
 import { createEffect, createSignal } from 'solid-js'
 import { createTheme } from '../components/theme'
-import { tokens } from './tokens'
+import { resolveSemanticTheme } from './semantic-theme'
+import type { tokens } from './tokens'
 
 import type { TanStackDevtoolsTheme } from '../components/theme'
 import type { ButtonVariant } from '../components/button'
 
-const buttonVariantColors: Record<
-  ButtonVariant,
-  {
-    bg: { light: string; dark: string }
-    hover: { light: string; dark: string }
-    active: { light: string; dark: string }
-    text: { light: string; dark: string }
-    border: { light: string; dark: string }
-    outline: { light: string; dark: string }
-    outlineHover: { light: string; dark: string }
-  }
-> = {
-  primary: {
-    bg: { light: tokens.colors.gray[900], dark: tokens.colors.gray[100] },
-    hover: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },
-    active: { light: tokens.colors.gray[700], dark: tokens.colors.gray[300] },
-    text: { light: '#fff', dark: tokens.colors.gray[900] },
-    border: { light: tokens.colors.gray[800], dark: tokens.colors.gray[200] },
-    outline: {
-      light: tokens.colors.gray[900],
-      dark: tokens.colors.gray[100],
-    },
-    outlineHover: {
-      light: tokens.colors.gray[800],
-      dark: tokens.colors.gray[200],
-    },
-  },
-  secondary: {
-    bg: { light: tokens.colors.gray[100], dark: tokens.colors.gray[100] },
-    hover: { light: tokens.colors.gray[200], dark: tokens.colors.gray[200] },
-    active: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },
-    text: { light: tokens.colors.gray[900], dark: tokens.colors.gray[900] },
-    border: { light: tokens.colors.gray[300], dark: tokens.colors.gray[300] },
-    outline: {
-      light: tokens.colors.gray[700],
-      dark: tokens.colors.gray[300],
-    },
-    outlineHover: {
-      light: tokens.colors.gray[800],
-      dark: tokens.colors.gray[200],
-    },
-  },
-  info: {
-    bg: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },
-    hover: { light: tokens.colors.blue[600], dark: tokens.colors.blue[600] },
-    active: { light: tokens.colors.blue[700], dark: tokens.colors.blue[700] },
-    text: { light: '#fff', dark: '#fff' },
-    border: { light: tokens.colors.blue[500], dark: tokens.colors.blue[500] },
-    outline: {
-      light: tokens.colors.blue[700],
-      dark: tokens.colors.blue[300],
-    },
-    outlineHover: {
-      light: tokens.colors.blue[600],
-      dark: tokens.colors.blue[200],
-    },
-  },
-  warning: {
-    bg: { light: tokens.colors.yellow[500], dark: tokens.colors.yellow[500] },
-    hover: {
-      light: tokens.colors.yellow[600],
-      dark: tokens.colors.yellow[600],
-    },
-    active: {
-      light: tokens.colors.yellow[700],
-      dark: tokens.colors.yellow[700],
-    },
-    text: { light: '#fff', dark: '#fff' },
-    border: {
-      light: tokens.colors.yellow[500],
-      dark: tokens.colors.yellow[500],
-    },
-    outline: {
-      light: tokens.colors.yellow[700],
-      dark: tokens.colors.yellow[300],
-    },
-    outlineHover: {
-      light: tokens.colors.yellow[600],
-      dark: tokens.colors.yellow[200],
-    },
-  },
-  danger: {
-    bg: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },
-    hover: { light: tokens.colors.red[600], dark: tokens.colors.red[600] },
-    active: { light: tokens.colors.red[700], dark: tokens.colors.red[700] },
-    text: { light: '#fff', dark: '#fff' },
-    border: { light: tokens.colors.red[500], dark: tokens.colors.red[500] },
-    outline: {
-      light: tokens.colors.red[700],
-      dark: tokens.colors.red[300],
-    },
-    outlineHover: {
-      light: tokens.colors.red[600],
-      dark: tokens.colors.red[200],
-    },
-  },
-  success: {
-    bg: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },
-    hover: { light: tokens.colors.green[600], dark: tokens.colors.green[600] },
-    active: { light: tokens.colors.green[700], dark: tokens.colors.green[700] },
-    text: { light: '#fff', dark: '#fff' },
-    border: { light: tokens.colors.green[500], dark: tokens.colors.green[500] },
-    outline: {
-      light: tokens.colors.green[700],
-      dark: tokens.colors.green[300],
-    },
-    outlineHover: {
-      light: tokens.colors.green[600],
-      dark: tokens.colors.green[200],
-    },
-  },
-}
 export const css = goober.css
 const stylesFactory = (theme: TanStackDevtoolsTheme) => {
-  const { colors, font, size, border } = tokens
-  const { fontFamily } = font
+  const semantic = resolveSemanticTheme(theme)
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
   const buildButtonVariant = (variant: ButtonVariant) => {
-    const v = buttonVariantColors[variant]
-    const outlineColor = t(v.outline.light, v.outline.dark)
-    const outlineHoverColor = t(v.outlineHover.light, v.outlineHover.dark)
-    const solidBg = t(v.bg.light, v.bg.dark)
-    const solidHover = t(v.hover.light, v.hover.dark)
-    const solidActive = t(v.active.light, v.active.dark)
-    const solidText = t(v.text.light, v.text.dark)
-    const solidBorder = t(v.border.light, v.border.dark)
+    const statusRole =
+      variant === 'danger'
+        ? 'error'
+        : variant === 'primary' || variant === 'secondary'
+          ? 'neutral'
+          : variant
+    const status = semantic.color.status[statusRole]
+    const outlineColor = status.text
+    const outlineHoverColor = status.text
+    const solidBg = status.solidFill
+    const solidHover = status.border
+    const solidActive = status.solidFill
+    const solidText = status.onFill
+    const solidBorder = status.border
 
     return {
       ghost: css`
@@ -140,11 +34,11 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         color: ${outlineColor};
         border-color: transparent;
         &:hover {
-          background: ${t(colors.gray[100], colors.darkGray[800])};
+          background: ${semantic.color.state.hover};
           color: ${outlineHoverColor};
         }
         &:active {
-          background: ${t(colors.gray[200], colors.darkGray[700])};
+          background: ${semantic.color.state.pressed};
           color: ${outlineHoverColor};
         }
       `,
@@ -153,12 +47,12 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         color: ${outlineColor};
         border-color: ${outlineColor};
         &:hover {
-          background: ${t(colors.gray[50], colors.darkGray[800])};
+          background: ${semantic.color.state.hover};
           color: ${outlineHoverColor};
           border-color: ${outlineHoverColor};
         }
         &:active {
-          background: ${t(colors.gray[100], colors.darkGray[700])};
+          background: ${semantic.color.state.pressed};
           color: ${outlineHoverColor};
           border-color: ${outlineHoverColor};
         }
@@ -170,18 +64,12 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         &:hover {
           background: ${solidHover};
           border-color: ${solidHover};
-          box-shadow: ${t(
-            tokens.shadow.xs('rgb(0 0 0 / 0.12)'),
-            tokens.shadow.xs('rgb(0 0 0 / 0.5)'),
-          )};
+          box-shadow: ${semantic.shadow.xs};
         }
         &:active {
           background: ${solidActive};
           border-color: ${solidActive};
-          box-shadow: ${t(
-            tokens.shadow.inner('rgb(0 0 0 / 0.2)'),
-            tokens.shadow.inner('rgb(0 0 0 / 0.6)'),
-          )};
+          box-shadow: ${semantic.shadow.sm};
         }
       `,
     }
@@ -199,6 +87,19 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
   }
 
   const wrapperSize = 320
+  const legacyTagColor = (color: keyof typeof tokens.colors) => {
+    const semanticRole =
+      color === 'red'
+        ? 'error'
+        : color === 'yellow'
+          ? 'warning'
+          : color === 'green'
+            ? 'success'
+            : color === 'blue' || color === 'cyan' || color === 'teal'
+              ? 'info'
+              : 'neutral'
+    return semantic.color.status[semanticRole].solidFill
+  }
 
   return {
     logo: css`
@@ -207,10 +108,10 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
       flex-direction: column;
       background-color: transparent;
       border: none;
-      width: ${size[12]};
-      height: ${size[12]};
-      font-family: ${fontFamily.sans};
-      gap: ${tokens.size[0.5]};
+      width: 48px;
+      height: 48px;
+      font-family: ${semantic.font.body};
+      gap: ${semantic.gap.tight};
       padding: 0;
       &:hover {
         opacity: 0.7;
@@ -222,50 +123,51 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
       max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
-      gap: 0.375rem;
+      gap: ${semantic.gap.tight};
     `,
     selectContainer: css`
       width: 100%;
+      &::selection,
+      & *::selection {
+        background: ${semantic.color.state.selectionFill};
+        color: ${semantic.color.state.selectionText};
+      }
     `,
     selectLabel: css`
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /
+        ${semantic.type.labelSm.lineHeight} ${semantic.font.body};
+      letter-spacing: ${semantic.type.labelSm.tracking};
+      color: ${semantic.color.text.primary};
       text-align: left;
     `,
     selectDescription: css`
-      font-size: 0.8rem;
-      color: ${t(colors.gray[500], colors.gray[400])};
+      font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /
+        ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};
+      color: ${semantic.color.text.secondary};
       margin: 0;
-      line-height: 1.3;
       text-align: left;
     `,
     select: css`
-      appearance: none;
+      appearance: auto;
       width: 100%;
-      padding: 0.5rem 3rem 0.5rem 0.75rem;
-      border-radius: 0.375rem;
-      background-color: ${t(colors.gray[50], colors.darkGray[800])};
-      color: ${t(colors.gray[900], colors.gray[100])};
-      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
-      font-size: 0.875rem;
+      padding: ${semantic.padding.controlBlock}
+        ${semantic.padding.controlInline};
+      border-radius: ${semantic.radius.control};
+      background-color: ${semantic.color.surface.elevated};
+      color: ${semantic.color.text.primary};
+      border: 1px solid ${semantic.color.border.control};
+      font: ${semantic.type.bodySm.weight} ${semantic.type.bodySm.size} /
+        ${semantic.type.bodySm.lineHeight} ${semantic.font.body};
       transition: all 0.15s ease;
       cursor: pointer;
 
-      /* Custom arrow */
-      background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
-      background-repeat: no-repeat;
-      background-position: right 0.75rem center;
-      background-size: 1.25rem;
-
       &:hover {
-        border-color: ${t(colors.gray[300], colors.gray[700])};
+        border-color: ${semantic.color.border.focus};
       }
 
       &:focus {
-        outline: none;
-        border-color: ${colors.gray[400]};
-        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
+        outline: 2px solid ${semantic.color.border.focus};
+        outline-offset: 2px;
       }
     `,
     inputWrapper: css`
@@ -273,117 +175,134 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
       max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
-      gap: 0.375rem;
+      gap: ${semantic.gap.tight};
     `,
     inputContainer: css`
       width: 100%;
+      &::selection,
+      & *::selection {
+        background: ${semantic.color.state.selectionFill};
+        color: ${semantic.color.state.selectionText};
+      }
     `,
     inputLabel: css`
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /
+        ${semantic.type.labelSm.lineHeight} ${semantic.font.body};
+      letter-spacing: ${semantic.type.labelSm.tracking};
+      color: ${semantic.color.text.primary};
       text-align: left;
     `,
     inputDescription: css`
-      font-size: 0.8rem;
-      color: ${t(colors.gray[500], colors.gray[400])};
+      font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /
+        ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};
+      color: ${semantic.color.text.secondary};
       margin: 0;
-      line-height: 1.3;
       text-align: left;
     `,
     input: css`
       appearance: none;
       box-sizing: border-box;
       width: 100%;
-      padding: 0.5rem 0.75rem;
-      border-radius: 0.375rem;
-      background-color: ${t(colors.gray[50], colors.darkGray[800])};
-      color: ${t(colors.gray[900], colors.gray[100])};
-      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
-      font-size: 0.875rem;
-      font-family: ${fontFamily.mono};
+      padding: ${semantic.padding.controlBlock}
+        ${semantic.padding.controlInline};
+      border-radius: ${semantic.radius.control};
+      background-color: ${semantic.color.surface.elevated};
+      color: ${semantic.color.text.primary};
+      border: 1px solid ${semantic.color.border.control};
+      font: ${semantic.type.bodySm.weight} ${semantic.type.bodySm.size} /
+        ${semantic.type.bodySm.lineHeight} ${semantic.font.body};
       transition: all 0.15s ease;
 
       &::placeholder {
-        color: ${t(colors.gray[400], colors.gray[500])};
+        color: ${semantic.color.text.secondary};
       }
 
       &:hover {
-        border-color: ${t(colors.gray[300], colors.gray[700])};
+        border-color: ${semantic.color.border.focus};
       }
 
       &:focus {
-        outline: none;
-        border-color: ${t(colors.gray[400], colors.gray[600])};
-        box-shadow: 0 0 0 3px ${t(colors.gray[200], colors.gray[800])};
+        outline: 2px solid ${semantic.color.border.focus};
+        outline-offset: 2px;
       }
     `,
     checkboxWrapper: css`
       display: flex;
       align-items: flex-start;
-      gap: 0.75rem;
+      gap: ${semantic.gap.control};
       cursor: pointer;
       user-select: none;
-      padding: 0.375rem;
-      border-radius: 0.375rem;
+      padding: ${semantic.padding.controlBlock}
+        ${semantic.padding.controlInline};
+      border-radius: ${semantic.radius.control};
       transition: background-color 0.15s ease;
 
       &:hover {
-        background-color: ${t(colors.gray[50], colors.darkGray[900])};
+        background-color: ${semantic.color.state.hover};
       }
     `,
     checkboxContainer: css`
       width: 100%;
+      &::selection,
+      & *::selection {
+        background: ${semantic.color.state.selectionFill};
+        color: ${semantic.color.state.selectionText};
+      }
     `,
     checkboxLabelContainer: css`
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
+      gap: ${semantic.gap.tight};
       flex: 1;
     `,
     checkbox: css`
       appearance: none;
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 2px solid ${t(colors.gray[300], colors.gray[700])};
-      border-radius: 0.25rem;
-      background-color: ${t(colors.gray[50], colors.darkGray[800])};
+      width: ${semantic.space[4]};
+      height: ${semantic.space[4]};
+      border: 2px solid ${semantic.color.border.control};
+      border-radius: ${semantic.radius.control};
+      background-color: ${semantic.color.surface.elevated};
       display: grid;
       place-items: center;
       transition: all 0.15s ease;
       flex-shrink: 0;
-      margin-top: 0.125rem;
+      margin-top: ${semantic.space[1]};
 
       &:hover {
-        border-color: ${t(colors.gray[400], colors.gray[600])};
+        border-color: ${semantic.color.border.focus};
+      }
+
+      &:focus-visible {
+        outline: 2px solid ${semantic.color.border.focus};
+        outline-offset: 2px;
       }
 
       &:checked {
-        background-color: ${t(colors.gray[900], colors.gray[100])};
-        border-color: ${t(colors.gray[900], colors.gray[100])};
+        background-color: ${semantic.color.state.selectionFill};
+        border-color: ${semantic.color.state.selectionFill};
       }
 
       &:checked::after {
         content: '';
-        width: 0.4rem;
-        height: 0.6rem;
-        border: solid ${t('#fff', colors.gray[900])};
+        width: ${semantic.space[1]};
+        height: ${semantic.space[2]};
+        border: solid ${semantic.color.state.selectionText};
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
         margin-top: -3px;
       }
     `,
     checkboxLabel: css`
-      color: ${t(colors.gray[900], colors.gray[100])};
-      font-size: 0.875rem;
-      font-weight: 500;
-      line-height: 1.4;
+      color: ${semantic.color.text.primary};
+      font: ${semantic.type.labelSm.weight} ${semantic.type.labelSm.size} /
+        ${semantic.type.labelSm.lineHeight} ${semantic.font.body};
+      letter-spacing: ${semantic.type.labelSm.tracking};
       text-align: left;
     `,
     checkboxDescription: css`
-      color: ${t(colors.gray[500], colors.gray[400])};
-      font-size: 0.8rem;
-      line-height: 1.3;
+      color: ${semantic.color.text.secondary};
+      font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /
+        ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};
       text-align: left;
     `,
     button: {
@@ -391,20 +310,29 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        font-family: ${tokens.font.fontFamily.sans};
-        font-size: 0.8rem;
-        font-weight: 500;
-        border-radius: 0.375rem;
-        padding: 0.375rem 0.75rem;
+        font-family: ${semantic.font.body};
+        font-size: ${semantic.type.bodyXs.size};
+        line-height: ${semantic.type.bodyXs.lineHeight};
+        font-weight: ${semantic.type.labelSm.weight};
+        border-radius: ${semantic.radius.control};
+        padding: ${semantic.padding.controlBlock}
+          ${semantic.padding.controlInline};
         cursor: pointer;
         transition:
           background 0.15s,
           color 0.15s,
           border 0.15s,
           box-shadow 0.15s;
-        outline: none;
+        &:focus-visible {
+          outline: 2px solid ${semantic.color.border.focus};
+          outline-offset: 2px;
+        }
         border-width: 1px;
         border-style: solid;
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
       `,
       variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {
         const v = buttonVariants[variant]
@@ -419,81 +347,95 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
     },
     tag: {
       dot: (color: keyof typeof tokens.colors) => css`
-        width: ${tokens.size[1.5]};
-        height: ${tokens.size[1.5]};
-        border-radius: ${tokens.border.radius.full};
-        background-color: ${t(
-          tokens.colors[color][500],
-          tokens.colors[color][500],
-        )};
+        width: ${semantic.space[1]};
+        height: ${semantic.space[1]};
+        border-radius: 9999px;
+        background-color: ${legacyTagColor(color)};
       `,
       base: css`
         display: flex;
-        gap: ${tokens.size[1.5]};
+        gap: ${semantic.gap.tight};
         box-sizing: border-box;
-        height: ${tokens.size[6.5]};
-        background: ${t(colors.gray[50], colors.darkGray[500])};
-        color: ${t(colors.gray[700], colors.gray[300])};
-        border-radius: ${tokens.border.radius.sm};
-        font-size: ${font.size.sm};
-        padding: ${tokens.size[1]};
-        padding-left: ${tokens.size[1.5]};
+        background: ${semantic.color.surface.subtle};
+        color: ${semantic.color.text.primary};
+        border-radius: ${semantic.radius.control};
+        font-size: ${semantic.type.bodyXs.size};
+        line-height: ${semantic.type.bodyXs.lineHeight};
+        font-family: ${semantic.font.body};
+        padding: ${semantic.padding.controlBlock}
+          ${semantic.padding.controlInline};
         align-items: center;
-        font-weight: ${font.weight.medium};
-        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};
+        font-weight: ${semantic.type.labelSm.weight};
+        border: 1px solid ${semantic.color.border.control};
         user-select: none;
         position: relative;
+        &::selection,
+        & *::selection {
+          background: ${semantic.color.state.selectionFill};
+          color: ${semantic.color.state.selectionText};
+        }
         &:focus-visible {
           outline-offset: 2px;
-          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
+          outline: 2px solid ${semantic.color.border.focus};
         }
       `,
       label: css`
-        font-size: ${font.size.xs};
+        font-size: ${semantic.type.bodyXs.size};
+        line-height: ${semantic.type.bodyXs.lineHeight};
+        font-family: ${semantic.font.body};
+        letter-spacing: ${semantic.type.labelSm.tracking};
       `,
       count: css`
-        font-size: ${font.size.xs};
-        padding: 0 5px;
+        font-size: ${semantic.type.bodyXs.size};
+        padding: 0 ${semantic.space[1]};
         display: flex;
         align-items: center;
         justify-content: center;
-        color: ${t(colors.gray[500], colors.gray[400])};
-        background-color: ${t(colors.gray[200], colors.darkGray[300])};
-        border-radius: 2px;
+        color: ${semantic.color.text.secondary};
+        background-color: ${semantic.color.state.hover};
+        border-radius: ${semantic.radius.control};
+        line-height: ${semantic.type.bodyXs.lineHeight};
+        font-family: ${semantic.font.body};
         font-variant-numeric: tabular-nums;
-        height: ${tokens.size[4.5]};
+        min-height: ${semantic.space[4]};
       `,
     },
     tree: {
       info: css`
-        color: ${t(colors.gray[500], colors.gray[500])};
-        font-size: ${font.size.xs};
-        margin-right: ${size[1]};
+        color: ${semantic.color.text.secondary};
+        font-size: ${semantic.type.bodyXs.size};
+        margin-right: ${semantic.space[1]};
       `,
       actionButton: css`
         background-color: transparent;
-        color: ${t(colors.gray[500], colors.gray[500])};
+        color: ${semantic.color.text.secondary};
         border: none;
         display: inline-flex;
         padding: 0;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        width: ${size[3]};
-        height: ${size[3]};
+        width: ${semantic.space[3]};
+        height: ${semantic.space[3]};
         position: relative;
         z-index: 1;
 
         &:hover svg {
-          color: ${t(colors.gray[600], colors.gray[400])};
+          color: ${semantic.color.text.primary};
         }
 
         &:focus-visible {
-          border-radius: ${border.radius.xs};
-          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
+          border-radius: ${semantic.radius.control};
+          outline: 2px solid ${semantic.color.border.focus};
           outline-offset: 2px;
         }
       `,
+      actionSuccess: css`
+        color: ${semantic.color.status.success.text};
+      `,
+      actionError: css`
+        color: ${semantic.color.status.error.text};
+      `,
       expanderContainer: css`
         position: relative;
       `,
@@ -503,38 +445,43 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         left: -16px;
         top: 3px;
         & path {
-          stroke: ${t(colors.blue[400], colors.blue[300])};
+          stroke: ${semantic.color.text.link};
         }
         & svg {
-          width: ${size[3]};
-          height: ${size[3]};
+          width: ${semantic.space[3]};
+          height: ${semantic.space[3]};
         }
 
         display: inline-flex;
         align-items: center;
         transition: all 0.1s ease;
+        &:focus-visible {
+          border-radius: ${semantic.radius.control};
+          outline: 2px solid ${semantic.color.border.focus};
+          outline-offset: 2px;
+        }
       `,
       expandedLine: (hasBorder: boolean) => css`
         display: block;
-        padding-left: 0.75rem;
-        margin-left: -0.7rem;
+        padding-left: ${semantic.space[3]};
+        margin-left: -${semantic.space[3]};
         ${hasBorder
-          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`
+          ? `border-left: 1px solid ${semantic.color.border.decorative};`
           : ''}
       `,
       collapsible: css`
         cursor: pointer;
         transition: all 0.2s ease;
         &:hover {
-          background-color: ${t(colors.gray[100], colors.darkGray[700])};
-          border-radius: ${tokens.border.radius.sm};
-          padding: 0 ${tokens.size[1]};
+          background-color: ${semantic.color.state.hover};
+          border-radius: ${semantic.radius.control};
+          padding: 0 ${semantic.space[1]};
         }
       `,
       actions: css`
         display: inline-flex;
-        margin-left: ${size[2]};
-        gap: ${size[2]};
+        margin-left: ${semantic.space[2]};
+        gap: ${semantic.gap.control};
         align-items: center;
         & svg {
           height: 12px;
@@ -542,33 +489,43 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         }
       `,
       valueCollapsed: css`
-        color: ${t(colors.gray[500], colors.gray[400])};
+        color: ${semantic.color.text.secondary};
       `,
       valueFunction: css`
-        color: ${t(colors.cyan[500], colors.cyan[400])};
+        color: ${semantic.color.syntax.keyword};
       `,
       valueString: css`
-        color: ${t(colors.green[500], colors.green[400])};
+        color: ${semantic.color.syntax.string};
       `,
       valueNumber: css`
-        color: ${t(colors.yellow[500], colors.yellow[400])};
+        color: ${semantic.color.syntax.number};
       `,
       valueBoolean: css`
-        color: ${t(colors.pink[500], colors.pink[400])};
+        color: ${semantic.color.syntax.keyword};
       `,
       valueNull: css`
-        color: ${t(colors.gray[500], colors.gray[400])};
+        color: ${semantic.color.syntax.comment};
         font-style: italic;
       `,
       valueKey: css`
-        color: ${t(colors.blue[400], colors.blue[300])};
+        color: ${semantic.color.syntax.property};
       `,
       valueBraces: css`
-        color: ${colors.gray[500]};
+        color: ${semantic.color.syntax.punctuation};
       `,
       valueContainer: (isRoot: boolean) => css`
         display: block;
-        margin-left: ${isRoot ? '0' : '1rem'};
+        font-family: ${semantic.font.mono};
+        &::selection,
+        & *::selection {
+          background: ${semantic.color.state.selectionFill};
+          color: ${semantic.color.state.selectionText};
+        }
+        & [data-tsd-syntax]::selection {
+          background: ${semantic.color.syntax.selectionFill};
+          color: ${semantic.color.syntax.selectionText};
+        }
+        margin-left: ${isRoot ? '0' : semantic.space[4]};
 
         &:not(:hover) .actions {
           display: none;
@@ -584,21 +541,28 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: ${tokens.size[2]} ${tokens.size[2.5]};
-        gap: ${tokens.size[2.5]};
-        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;
+        &::selection,
+        & *::selection {
+          background: ${semantic.color.state.selectionFill};
+          color: ${semantic.color.state.selectionText};
+        }
+        padding: ${semantic.space[2]} ${semantic.space[3]};
+        gap: ${semantic.gap.control};
+        background: ${semantic.color.surface.elevated};
+        color: ${semantic.color.text.primary};
+        border-bottom: ${semantic.color.border.decorative} 1px solid;
         align-items: center;
       `,
       logoAndToggleContainer: css`
         display: flex;
-        gap: ${tokens.size[3]};
+        gap: ${semantic.gap.section};
         align-items: center;
         & > button {
           padding: 0;
           background: transparent;
           border: none;
           display: flex;
-          gap: ${size[0.5]};
+          gap: ${semantic.gap.tight};
           flex-direction: column;
         }
       `,
@@ -608,54 +572,61 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         flex-direction: column;
         background-color: transparent;
         border: none;
-        gap: ${tokens.size[0.5]};
+        gap: ${semantic.gap.tight};
         padding: 0;
         &:hover {
           opacity: 0.7;
         }
         &:focus-visible {
-          outline-offset: 4px;
-          border-radius: ${border.radius.xs};
-          outline: 2px solid ${colors.blue[800]};
+          outline-offset: 2px;
+          border-radius: ${semantic.radius.control};
+          outline: 2px solid ${semantic.color.border.focus};
         }
       `,
       tanstackLogo: css`
-        font-size: ${font.size.md};
-        font-weight: ${font.weight.bold};
-        line-height: ${font.lineHeight.xs};
+        font-size: ${semantic.type.headingPane.size};
+        line-height: ${semantic.type.headingPane.lineHeight};
+        font-family: ${semantic.font.display};
+        font-weight: ${semantic.type.headingPane.weight};
         white-space: nowrap;
-        color: ${t(colors.gray[700], colors.gray[300])};
+        color: ${semantic.color.text.primary};
       `,
       flavorLogo: (flavorLight: string, flavorDark: string) => css`
-        font-weight: ${font.weight.semibold};
-        font-size: ${font.size.xs};
-        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});
-        background-clip: text;
-        -webkit-background-clip: text;
-        line-height: 1;
-        -webkit-text-fill-color: transparent;
+        font-weight: ${semantic.type.labelSm.weight};
+        font-size: ${semantic.type.labelSm.size};
+        line-height: ${semantic.type.labelSm.lineHeight};
+        font-family: ${semantic.font.body};
+        letter-spacing: ${semantic.type.labelSm.tracking};
+        color: ${t(flavorLight, flavorDark)};
         white-space: nowrap;
       `,
     },
     section: {
       main: css`
-        margin-bottom: 1.5rem;
-        padding: 1rem;
-        background-color: ${t(colors.gray[50], colors.darkGray[800])};
-        border: 1px solid ${t(colors.gray[200], colors.gray[800])};
-        border-radius: 0.5rem;
-        box-shadow: none;
+        margin-bottom: ${semantic.space[4]};
+        padding: ${semantic.space[4]};
+        background-color: ${semantic.color.surface.subtle};
+        border: 1px solid ${semantic.color.border.decorative};
+        border-radius: ${semantic.radius.overlay};
+        box-shadow: ${semantic.shadow.xs};
+        &::selection,
+        & *::selection {
+          background: ${semantic.color.state.selectionFill};
+          color: ${semantic.color.state.selectionText};
+        }
       `,
       title: css`
-        font-size: 1rem;
-        font-weight: 600;
-        color: ${t(colors.gray[900], colors.gray[100])};
-        margin: 0 0 0.75rem 0;
-        padding-bottom: 0.5rem;
-        border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
+        font-size: ${semantic.type.headingPane.size};
+        line-height: ${semantic.type.headingPane.lineHeight};
+        font-weight: ${semantic.type.headingPane.weight};
+        color: ${semantic.color.text.primary};
+        font-family: ${semantic.font.display};
+        margin: 0 0 ${semantic.space[3]} 0;
+        padding-bottom: ${semantic.space[2]};
+        border-bottom: 1px solid ${semantic.color.border.decorative};
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: ${semantic.gap.control};
         text-align: left;
       `,
       icon: css`
@@ -665,22 +636,28 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
           height: 100%;
           width: 100%;
         }
-        color: ${t(colors.gray[700], colors.gray[400])};
+        color: ${semantic.color.text.secondary};
       `,
       description: css`
-        color: ${t(colors.gray[500], colors.gray[400])};
-        font-size: 0.8rem;
-        margin: 0 0 1rem 0;
-        line-height: 1.4;
+        color: ${semantic.color.text.secondary};
+        font: ${semantic.type.bodyXs.weight} ${semantic.type.bodyXs.size} /
+          ${semantic.type.bodyXs.lineHeight} ${semantic.font.body};
+        margin: 0 0 ${semantic.space[4]} 0;
         text-align: left;
       `,
     },
     mainPanel: {
       panel: (withPadding: boolean) => css`
-        padding: ${withPadding ? tokens.size[3] : 0};
-        background: ${t(colors.gray[50], colors.darkGray[700])};
+        padding: ${withPadding ? semantic.space[3] : 0};
+        background: ${semantic.color.surface.workspace};
+        color: ${semantic.color.text.primary};
         overflow-y: auto;
         height: 100%;
+        &::selection,
+        & *::selection {
+          background: ${semantic.color.state.selectionFill};
+          color: ${semantic.color.state.selectionText};
+        }
       `,
     },
   }
diff --git a/packages/devtools-ui/tests/contrast.test.ts b/packages/devtools-ui/tests/contrast.test.ts
new file mode 100644
index 00000000..15da8f97
--- /dev/null
+++ b/packages/devtools-ui/tests/contrast.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+import { resolveSemanticTheme } from '../src/styles/semantic-theme'
+
+function luminance(hex: string) {
+  const channels = hex
+    .slice(1)
+    .match(/.{2}/g)!
+    .map((value) => {
+      const channel = Number.parseInt(value, 16) / 255
+      return channel <= 0.04045
+        ? channel / 12.92
+        : Math.pow((channel + 0.055) / 1.055, 2.4)
+    })
+  return 0.2126 * channels[0]! + 0.7152 * channels[1]! + 0.0722 * channels[2]!
+}
+
+function ratio(foreground: string, background: string) {
+  const values = [luminance(foreground), luminance(background)].sort(
+    (a, b) => b - a,
+  )
+  return (values[0]! + 0.05) / (values[1]! + 0.05)
+}
+
+describe.each(['light', 'dark'] as const)('%s semantic contrast', (mode) => {
+  const theme = resolveSemanticTheme(mode)
+  const background = mode === 'light' ? '#ffffff' : '#1f1f1f'
+  const syntaxBackground = mode === 'light' ? '#fafafa' : '#1f1f1f'
+
+  it('keeps text, controls, statuses, syntax, and selections perceivable', () => {
+    expect(theme.color.surface.app).toBe(
+      mode === 'light' ? '#ffffff' : '#111111',
+    )
+    expect(theme.color.surface.workspace).toBe(background)
+    expect(theme.color.surface.subtle).toBe(
+      mode === 'light' ? '#fafafa' : '#1b1b1b',
+    )
+    for (const color of [
+      theme.color.text.primary,
+      theme.color.text.secondary,
+      theme.color.text.link,
+    ])
+      expect(ratio(color, background)).toBeGreaterThanOrEqual(4.5)
+    expect(
+      ratio(theme.color.border.control, background),
+    ).toBeGreaterThanOrEqual(3)
+    expect(ratio(theme.color.border.focus, background)).toBeGreaterThanOrEqual(
+      3,
+    )
+    for (const surface of [
+      theme.color.surface.app,
+      theme.color.surface.workspace,
+      theme.color.surface.subtle,
+    ]) {
+      expect(ratio(theme.color.text.muted, surface)).toBeGreaterThanOrEqual(4.5)
+    }
+    expect(
+      ratio(theme.color.text.mutedOnBrand, theme.color.surface.brand),
+    ).toBeGreaterThanOrEqual(4.5)
+    expect(
+      ratio(theme.color.state.selectionText, theme.color.state.selectionFill),
+    ).toBeGreaterThanOrEqual(4.5)
+
+    for (const status of Object.values(theme.color.status)) {
+      expect(ratio(status.text, status.subtleFill)).toBeGreaterThanOrEqual(4.5)
+      expect(ratio(status.border, status.subtleFill)).toBeGreaterThanOrEqual(3)
+      expect(ratio(status.onFill, status.solidFill)).toBeGreaterThanOrEqual(4.5)
+    }
+
+    for (const color of Object.values(theme.color.syntax).slice(0, 6))
+      expect(ratio(color, syntaxBackground)).toBeGreaterThanOrEqual(4.5)
+    expect(
+      ratio(theme.color.syntax.selectionText, theme.color.syntax.selectionFill),
+    ).toBeGreaterThanOrEqual(4.5)
+  })
+})
+
+it('locks the audited light text colors', () => {
+  expect(ratio('#3e3529', '#ffffff')).toBeCloseTo(12.03, 2)
+  expect(ratio('#3e3529', '#fafafa')).toBeCloseTo(11.52, 2)
+  expect(ratio('#003e53', '#ffffff')).toBeCloseTo(11.58, 2)
+  expect(ratio('#003e53', '#fafafa')).toBeCloseTo(11.09, 2)
+})
diff --git a/packages/devtools-ui/tests/fonts.test.ts b/packages/devtools-ui/tests/fonts.test.ts
new file mode 100644
index 00000000..dbf4884e
--- /dev/null
+++ b/packages/devtools-ui/tests/fonts.test.ts
@@ -0,0 +1,96 @@
+import { createHash } from 'node:crypto'
+import { readFile, readdir, stat } from 'node:fs/promises'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import {
+  DEVTOOLS_FONT_STYLE_ID,
+  devtoolsFontCss,
+  ensureDevtoolsFonts,
+} from '../src/internal'
+
+const fontDirectory = join(process.cwd(), 'src', 'assets', 'fonts')
+const expectedFontNames = ['BricolageGrotesque-Bold.ttf', 'Inter-latin.woff2']
+
+async function sha256(path: string): Promise<string> {
+  return createHash('sha256')
+    .update(await readFile(path))
+    .digest('hex')
+}
+
+describe('devtools fonts', () => {
+  it('ships only the approved font binaries within the size budget', async () => {
+    const names = (await readdir(fontDirectory))
+      .filter((name) => /\.(?:ttf|woff2)$/.test(name))
+      .sort()
+    const sizes = await Promise.all(
+      names.map(async (name) => (await stat(join(fontDirectory, name))).size),
+    )
+
+    expect(names).toEqual([...expectedFontNames].sort())
+    expect(sizes.reduce((total, size) => total + size, 0)).toBeLessThanOrEqual(
+      160 * 1024,
+    )
+  })
+
+  it('retains both approved font licenses with pinned provenance', async () => {
+    const bricolageLicensePath = join(
+      fontDirectory,
+      'OFL-Bricolage-Grotesque.txt',
+    )
+    const interLicensePath = join(fontDirectory, 'OFL-Inter.txt')
+    const [bricolageLicense, interLicense] = await Promise.all([
+      readFile(bricolageLicensePath, 'utf8'),
+      readFile(interLicensePath, 'utf8'),
+    ])
+
+    expect(await sha256(bricolageLicensePath)).toBe(
+      '46ba5f18ee20ea529f21d96c0ef8637a8314c1a5cfb2aa84018bc8157cbeff41',
+    )
+    expect(await stat(bricolageLicensePath)).toMatchObject({ size: 4402 })
+    expect(bricolageLicense).toContain(
+      'Copyright 2022 The Bricolage Grotesque Project Authors',
+    )
+    expect(bricolageLicense).toContain('SIL OPEN FONT LICENSE Version 1.1')
+    expect(await stat(interLicensePath)).toMatchObject({ size: 4380 })
+    expect(await sha256(interLicensePath)).toBe(
+      '262481e844521b326f5ecd053e59b98c8b2da78c8ee1bdbb6e8174305e54935a',
+    )
+    expect(interLicense).toContain(
+      'Copyright (c) 2016 The Inter Project Authors',
+    )
+    expect(interLicense).toContain('SIL OPEN FONT LICENSE Version 1.1')
+  })
+
+  it('installs exactly one font style in each document', () => {
+    const firstDocument = document.implementation.createHTMLDocument()
+    const secondDocument = document.implementation.createHTMLDocument()
+
+    ensureDevtoolsFonts(firstDocument)
+    ensureDevtoolsFonts(firstDocument)
+    ensureDevtoolsFonts(secondDocument)
+
+    expect(
+      firstDocument.querySelectorAll(`#${DEVTOOLS_FONT_STYLE_ID}`),
+    ).toHaveLength(1)
+    expect(
+      secondDocument.querySelectorAll(`#${DEVTOOLS_FONT_STYLE_ID}`),
+    ).toHaveLength(1)
+  })
+
+  it('defines both external font faces with swap rendering', () => {
+    expect(devtoolsFontCss).toContain("font-family: 'Bricolage Grotesque'")
+    expect(devtoolsFontCss).toContain('BricolageGrotesque-Bold.ttf')
+    expect(devtoolsFontCss).toContain("format('truetype')")
+    expect(devtoolsFontCss).toMatch(
+      /font-family: 'Bricolage Grotesque'[\s\S]*font-weight:\s*700/,
+    )
+    expect(devtoolsFontCss).toContain("font-family: 'Inter'")
+    expect(devtoolsFontCss).toContain('Inter-latin.woff2')
+    expect(devtoolsFontCss).toContain("format('woff2')")
+    expect(devtoolsFontCss).toMatch(
+      /font-family: 'Inter'[\s\S]*font-weight:\s*100 900/,
+    )
+    expect(devtoolsFontCss.match(/font-display:\s*swap/g)).toHaveLength(2)
+    expect(devtoolsFontCss).not.toMatch(/data:/i)
+  })
+})
diff --git a/packages/devtools-ui/tests/index.test.ts b/packages/devtools-ui/tests/index.test.ts
index 9ca0bdfc..b60c6a6c 100644
--- a/packages/devtools-ui/tests/index.test.ts
+++ b/packages/devtools-ui/tests/index.test.ts
@@ -1,7 +1,356 @@
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, expectTypeOf, it } from 'vitest'
+import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { createComponent } from 'solid-js'
+import { render } from 'solid-js/web'
+import {
+  Button,
+  Checkbox,
+  Header,
+  HeaderLogo,
+  Input,
+  JsonTree,
+  MainPanel,
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
+  Select,
+  Tag,
+  TanStackLogo,
+} from '../src'
+import { ThemeContextProvider } from '../src/components/theme'
+import { tokens } from '../src/styles/tokens'
+import {
+  DEVTOOLS_FORCED_COLORS_STYLE_ID,
+  DEVTOOLS_FONT_STYLE_ID,
+  ensureDevtoolsStyles,
+  forcedColorsCss,
+  resolveSemanticTheme,
+} from '../src/internal'
+import type { ButtonVariant } from '../src/components/button'
+import { CopiedCopier } from '../src/components/icons'
+import type { TanStackDevtoolsTheme } from '../src'
 
-describe('devtools', () => {
-  it('should pass', () => {
-    expect(true).toBe(true)
+const disposers: Array<() => void> = []
+afterEach(() => {
+  disposers.splice(0).forEach((dispose) => dispose())
+  document.body.replaceChildren()
+})
+
+function mount(theme: 'light' | 'dark') {
+  const host = document.createElement('div')
+  document.body.append(host)
+  disposers.push(
+    render(
+      () =>
+        createComponent(ThemeContextProvider, {
+          theme,
+          get children() {
+            return [
+              createComponent(Button, { disabled: true, children: 'Button' }),
+              createComponent(Input, {
+                label: 'Input',
+                description: 'Input description',
+              }),
+              createComponent(Select, {
+                label: 'Select',
+                description: 'Select description',
+                options: [{ label: 'One', value: 'one' }],
+              }),
+              createComponent(Checkbox, {
+                label: 'Checkbox',
+                description: 'Checkbox description',
+              }),
+              createComponent(Checkbox, {
+                label: 'Checked checkbox',
+                checked: true,
+              }),
+              createComponent(Header, {
+                get children() {
+                  return createComponent(HeaderLogo, {
+                    flavor: { light: '#111111', dark: '#ffffff' },
+                    children: 'DEVTOOLS',
+                  })
+                },
+              }),
+              createComponent(TanStackLogo, {}),
+              createComponent(MainPanel, { children: 'Panel' }),
+              createComponent(Section, {
+                get children() {
+                  return [
+                    createComponent(SectionTitle, {
+                      children: 'Section title',
+                    }),
+                    createComponent(SectionDescription, {
+                      children: 'Section description',
+                    }),
+                    createComponent(SectionIcon, { children: '!' }),
+                  ]
+                },
+              }),
+              createComponent(JsonTree, {
+                value: {
+                  nested: {
+                    key: 'value',
+                    count: 1,
+                    enabled: true,
+                    deep: { x: true },
+                  },
+                },
+                copyable: true,
+              }),
+            ]
+          },
+        }),
+      host,
+    ),
+  )
+  return host
+}
+
+describe.each(['light', 'dark'] as const)('%s primitives', (theme) => {
+  it('mounts accessible disabled native controls with forced-colors hooks', () => {
+    const host = mount(theme)
+    const controlNodes = [...host.querySelectorAll('[data-tsd-control]')]
+    expect(
+      controlNodes.filter((control) => control.hasAttribute('disabled')),
+    ).toHaveLength(1)
+    for (const control of host.querySelectorAll('input, select')) {
+      expect(
+        (control as HTMLInputElement | HTMLSelectElement).labels?.length,
+      ).toBe(1)
+    }
+    expect(host.querySelectorAll('[aria-describedby]')).toHaveLength(3)
+    const checkboxes = host.querySelectorAll('input[type="checkbox"]')
+    expect(checkboxes[0]?.getAttribute('data-tsd-selected')).toBeNull()
+    expect(checkboxes[1]?.getAttribute('data-tsd-selected')).toBe('true')
+    const surfaces = {
+      Header: host.querySelector('header[data-tsd-surface]'),
+      MainPanel: [...host.querySelectorAll('div[data-tsd-surface]')].find(
+        (node) => node.textContent === 'Panel',
+      ),
+      Section: host.querySelector('section[data-tsd-surface]'),
+      Logo: host.querySelector('svg[data-tsd-surface]'),
+      JsonTree: [...host.querySelectorAll('[data-tsd-surface]')].find((node) =>
+        node.textContent?.includes('nested'),
+      ),
+    }
+    expect(Object.values(surfaces).every(Boolean)).toBe(true)
+    const namedControls = {
+      Button: host.querySelector('button[data-tsd-control][disabled]'),
+      Input: host.querySelector(
+        'input:not([type="checkbox"])[data-tsd-control]',
+      ),
+      Select: host.querySelector('select[data-tsd-control]'),
+      Checkbox: host.querySelector('input[type="checkbox"][data-tsd-control]'),
+      HeaderLogo: host.querySelector('header button[data-tsd-control]'),
+      TreeExpander: host.querySelector(
+        '[role="button"][aria-expanded][data-tsd-control]',
+      ),
+      TreeCopy: host.querySelector('button[data-copy-state][data-tsd-control]'),
+    }
+    expect(Object.values(namedControls).every(Boolean)).toBe(true)
+    expect(host.querySelector('header[data-tsd-separator]')).toBeTruthy()
+    expect(host.querySelector('section [data-tsd-separator]')).toBeTruthy()
+    expect(
+      host.querySelector('[data-tsd-surface] [data-tsd-separator]'),
+    ).toBeTruthy()
+    for (const kind of [
+      'property',
+      'string',
+      'number',
+      'keyword',
+      'comment',
+      'punctuation',
+    ]) {
+      expect(host.querySelector(`[data-tsd-syntax="${kind}"]`)).toBeTruthy()
+    }
+    expect(host.querySelector('section h3')?.textContent).toBe('Section title')
+    expect(host.querySelector('section p')?.textContent).toBe(
+      'Section description',
+    )
+    expect(host.querySelector('section span')?.textContent).toBe('!')
+    expect(
+      document.querySelectorAll(`#${DEVTOOLS_FONT_STYLE_ID}`),
+    ).toHaveLength(1)
+    expect(
+      document.querySelectorAll(`#${DEVTOOLS_FORCED_COLORS_STYLE_ID}`),
+    ).toHaveLength(1)
+  })
+})
+
+describe.each(['light', 'dark'] as const)('%s Button variants', (theme) => {
+  it('renders every solid, outline, and ghost variant with semantic focus colors', () => {
+    const host = document.createElement('div')
+    document.body.append(host)
+    const variants: Array<ButtonVariant> = [
+      'primary',
+      'secondary',
+      'danger',
+      'success',
+      'info',
+      'warning',
+    ]
+    disposers.push(
+      render(
+        () =>
+          createComponent(ThemeContextProvider, {
+            theme,
+            get children() {
+              return variants.flatMap((variant) => [
+                createComponent(Button, {
+                  variant,
+                  children: `${variant} solid`,
+                }),
+                createComponent(Button, {
+                  variant,
+                  outline: true,
+                  children: `${variant} outline`,
+                }),
+                createComponent(Button, {
+                  variant,
+                  ghost: true,
+                  children: `${variant} ghost`,
+                }),
+              ])
+            },
+          }),
+        host,
+      ),
+    )
+    expect(host.querySelectorAll('button[data-tsd-control]')).toHaveLength(18)
+    const cssText = document.head.textContent ?? ''
+    const semantic = resolveSemanticTheme(theme)
+    expect(cssText).toContain(semantic.color.border.focus)
+    expect(cssText).not.toContain('line-height:1.3')
+    for (const status of Object.values(semantic.color.status)) {
+      expect(cssText).toContain(status.solidFill)
+      expect(cssText).toContain(status.text)
+    }
   })
 })
+
+describe.each(['light', 'dark'] as const)('%s Tag legacy matrix', (theme) => {
+  it('renders a Tag for every legacy color key', () => {
+    const host = document.createElement('div')
+    document.body.append(host)
+    const keys = Object.keys(tokens.colors) as Array<keyof typeof tokens.colors>
+    disposers.push(
+      render(
+        () =>
+          createComponent(ThemeContextProvider, {
+            theme,
+            get children() {
+              return keys.map((color) =>
+                createComponent(Tag, { color, label: color }),
+              )
+            },
+          }),
+        host,
+      ),
+    )
+    expect(host.querySelectorAll('[data-tsd-control]')).toHaveLength(
+      keys.length,
+    )
+    expect(host.querySelector('[data-tsd-selected]')).toBeNull()
+  })
+})
+
+it('keeps CopiedCopier theme required', () => {
+  expectTypeOf<Parameters<typeof CopiedCopier>[0]>().toEqualTypeOf<{
+    theme: TanStackDevtoolsTheme
+  }>()
+})
+
+it('keeps the authored Check icon signature and uses current color for both states', async () => {
+  const iconsSource = await readFile(
+    resolve(process.cwd(), 'src/components/icons.tsx'),
+    'utf8',
+  )
+  const checkStart = iconsSource.indexOf('export function Check(')
+  const checkEnd = iconsSource.indexOf(
+    'export function CheckCircle()',
+    checkStart,
+  )
+  const checkSource = iconsSource.slice(checkStart, checkEnd)
+
+  expect(checkStart).toBeGreaterThanOrEqual(0)
+  expect(checkEnd).toBeGreaterThan(checkStart)
+  expect(checkSource).toContain(
+    'export function Check(props: { checked: boolean; theme: TanStackDevtoolsTheme })',
+  )
+  expect(checkSource).not.toMatch(/#(?:9B8AFB|6938EF)/i)
+  expect(checkSource.match(/stroke="currentColor"/g)).toHaveLength(2)
+})
+
+it('installs forced-colors styles exactly once per popup document', () => {
+  const popup = document.implementation.createHTMLDocument('popup')
+  ensureDevtoolsStyles(popup)
+  ensureDevtoolsStyles(popup)
+  expect(
+    popup.querySelectorAll(`#${DEVTOOLS_FORCED_COLORS_STYLE_ID}`),
+  ).toHaveLength(1)
+  expect(popup.querySelectorAll(`#${DEVTOOLS_FONT_STYLE_ID}`)).toHaveLength(1)
+  expect(forcedColorsCss).toContain('forced-color-adjust: auto')
+  expect(forcedColorsCss).toContain('[data-tsd-selected="true"]')
+  expect(forcedColorsCss).toContain('border-color: HighlightText')
+  for (const systemColor of [
+    'Canvas',
+    'CanvasText',
+    'ButtonFace',
+    'ButtonText',
+    'Highlight',
+    'HighlightText',
+  ]) {
+    expect(forcedColorsCss).toContain(systemColor)
+  }
+  expect(forcedColorsCss).toContain(
+    '[data-tsd-separator] { border-color: CanvasText; }',
+  )
+  expect(forcedColorsCss).toContain(
+    '[data-tsd-surface] { forced-color-adjust: auto; background: Canvas; color: CanvasText; }',
+  )
+  expect(forcedColorsCss).toContain(
+    '[data-tsd-control] { forced-color-adjust: auto; background: ButtonFace; color: ButtonText; border-color: ButtonText; }',
+  )
+  expect(forcedColorsCss).toContain(
+    '[data-tsd-control]:focus-visible { outline: 2px solid ButtonText; outline-offset: 2px; }',
+  )
+  expect(forcedColorsCss).toContain(
+    '[data-tsd-separator="resize"] { border: 1px solid CanvasText; }',
+  )
+})
+
+it('installs provider styles in the document that owns its rendered content', () => {
+  const popup = document.implementation.createHTMLDocument('popup')
+  const globalFontStyle = document.getElementById(DEVTOOLS_FONT_STYLE_ID)
+  const globalForcedColorsStyle = document.getElementById(
+    DEVTOOLS_FORCED_COLORS_STYLE_ID,
+  )
+  globalFontStyle?.remove()
+  globalForcedColorsStyle?.remove()
+
+  const host = popup.body.appendChild(popup.createElement('div'))
+  const dispose = render(
+    () =>
+      createComponent(ThemeContextProvider, {
+        theme: 'light',
+        children: 'Popup content',
+      }),
+    host,
+  )
+
+  expect(popup.querySelector(`#${DEVTOOLS_FONT_STYLE_ID}`)).toBeTruthy()
+  expect(
+    popup.querySelector(`#${DEVTOOLS_FORCED_COLORS_STYLE_ID}`),
+  ).toBeTruthy()
+  expect(document.querySelector(`#${DEVTOOLS_FONT_STYLE_ID}`)).toBeNull()
+  expect(
+    document.querySelector(`#${DEVTOOLS_FORCED_COLORS_STYLE_ID}`),
+  ).toBeNull()
+
+  dispose()
+  globalFontStyle && document.head.append(globalFontStyle)
+  globalForcedColorsStyle && document.head.append(globalForcedColorsStyle)
+})
diff --git a/packages/devtools-ui/tests/semantic-theme.test.ts b/packages/devtools-ui/tests/semantic-theme.test.ts
new file mode 100644
index 00000000..af6a4249
--- /dev/null
+++ b/packages/devtools-ui/tests/semantic-theme.test.ts
@@ -0,0 +1,274 @@
+import { resolveSemanticTheme, semanticThemes } from '../src/internal'
+import type { SemanticTheme } from '../src/internal'
+import { tokens } from '../src/styles/tokens'
+import { describe, expect, expectTypeOf, it } from 'vitest'
+
+const commonTheme = {
+  font: {
+    display: "'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif",
+    body: "'Inter', ui-sans-serif, system-ui, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+  space: { 1: '4px', 2: '8px', 3: '12px', 4: '16px' },
+  gap: {
+    tight: '4px',
+    control: '8px',
+    section: '12px',
+    sectionLarge: '16px',
+  },
+  padding: { controlBlock: '6px', controlInline: '8px' },
+  type: {
+    bodyXs: { size: '12px', lineHeight: '17px', weight: 400 },
+    bodySm: { size: '14px', lineHeight: '20px', weight: 400 },
+    bodyMd: { size: '16px', lineHeight: '24px', weight: 300 },
+    labelSm: {
+      size: '12px',
+      lineHeight: '14px',
+      weight: 500,
+      tracking: '0.5px',
+    },
+    headingCompact: { size: '14px', lineHeight: '18px', weight: 700 },
+    headingPane: { size: '16px', lineHeight: '21px', weight: 700 },
+  },
+  radius: { control: '4px', group: '6px', overlay: '8px' },
+  shadow: {
+    xs: '0 1px 2px rgba(0,0,0,0.03)',
+    sm: '0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03)',
+    overlay: '0 25px 50px -12px rgba(0,0,0,0.20)',
+  },
+  motion: { strip: '120ms', graceMs: 400 },
+}
+
+const expectedLight = {
+  ...commonTheme,
+  color: {
+    surface: {
+      app: '#ffffff',
+      workspace: '#ffffff',
+      subtle: '#fafafa',
+      elevated: '#ffffff',
+      brand: '#eeebd4',
+    },
+    text: {
+      primary: '#111111',
+      secondary: '#3e3529',
+      muted: '#756c5b',
+      mutedOnBrand: '#3e3529',
+      inverse: '#ffffff',
+      link: '#003e53',
+    },
+    border: { decorative: '#eeebd4', control: '#756c5b', focus: '#003e53' },
+    state: {
+      hover: '#1111110f',
+      pressed: '#1111111f',
+      selectionFill: '#3e3529',
+      selectionText: '#ffffff',
+    },
+    status: {
+      success: {
+        subtleFill: '#d8f0da',
+        border: '#1d4226',
+        text: '#1d4226',
+        solidFill: '#1d4226',
+        onFill: '#ffffff',
+      },
+      warning: {
+        subtleFill: '#fef6cc',
+        border: '#624a00',
+        text: '#624a00',
+        solidFill: '#624a00',
+        onFill: '#ffffff',
+      },
+      error: {
+        subtleFill: '#f9d8c4',
+        border: '#5f1a06',
+        text: '#5f1a06',
+        solidFill: '#5f1a06',
+        onFill: '#ffffff',
+      },
+      info: {
+        subtleFill: '#d8f0f3',
+        border: '#003e53',
+        text: '#003e53',
+        solidFill: '#003e53',
+        onFill: '#ffffff',
+      },
+      neutral: {
+        subtleFill: '#eeebd4',
+        border: '#756c5b',
+        text: '#3e3529',
+        solidFill: '#3e3529',
+        onFill: '#ffffff',
+      },
+    },
+    syntax: {
+      keyword: '#5f1a06',
+      string: '#1d4226',
+      number: '#541f5d',
+      comment: '#756c5b',
+      property: '#003e53',
+      punctuation: '#3e3529',
+      selectionFill: '#d8f0f3',
+      selectionText: '#003e53',
+    },
+  },
+}
+
+const expectedDark = {
+  ...commonTheme,
+  color: {
+    surface: {
+      app: '#111111',
+      workspace: '#1f1f1f',
+      subtle: '#1b1b1b',
+      elevated: '#2b2b2b',
+      brand: '#111111',
+    },
+    text: {
+      primary: '#ffffff',
+      secondary: '#aea691',
+      muted: '#aea691',
+      mutedOnBrand: '#aea691',
+      inverse: '#111111',
+      link: '#9cd5e2',
+    },
+    border: { decorative: '#2d2d2d', control: '#aea691', focus: '#61adbf' },
+    state: {
+      hover: '#ffffff14',
+      pressed: '#ffffff1f',
+      selectionFill: '#c5c3bf',
+      selectionText: '#111111',
+    },
+    status: {
+      success: {
+        subtleFill: '#1d4226',
+        border: '#69bc75',
+        text: '#a2e1a9',
+        solidFill: '#69bc75',
+        onFill: '#111111',
+      },
+      warning: {
+        subtleFill: '#624a00',
+        border: '#f4d648',
+        text: '#fae884',
+        solidFill: '#f4d648',
+        onFill: '#111111',
+      },
+      error: {
+        subtleFill: '#5f1a06',
+        border: '#e06e49',
+        text: '#edaa8d',
+        solidFill: '#e06e49',
+        onFill: '#111111',
+      },
+      info: {
+        subtleFill: '#003e53',
+        border: '#61adbf',
+        text: '#9cd5e2',
+        solidFill: '#61adbf',
+        onFill: '#111111',
+      },
+      neutral: {
+        subtleFill: '#2b2b2b',
+        border: '#aea691',
+        text: '#c5c3bf',
+        solidFill: '#c5c3bf',
+        onFill: '#111111',
+      },
+    },
+    syntax: {
+      keyword: '#e06e49',
+      string: '#69bc75',
+      number: '#c56dcf',
+      comment: '#aea691',
+      property: '#61adbf',
+      punctuation: '#c5c3bf',
+      selectionFill: '#003e53',
+      selectionText: '#ffffff',
+    },
+  },
+}
+
+function expectDeeplyFrozen(value: unknown): void {
+  if (value === null || typeof value !== 'object') return
+
+  expect(Object.isFrozen(value)).toBe(true)
+  for (const nestedValue of Object.values(value)) {
+    expectDeeplyFrozen(nestedValue)
+  }
+}
+
+describe('semantic themes', () => {
+  it('defines the complete light and dark contracts', () => {
+    expect(semanticThemes.light).toEqual(expectedLight)
+    expect(semanticThemes.dark).toEqual(expectedDark)
+    expect(Object.keys(semanticThemes)).toEqual(['light', 'dark'])
+  })
+
+  it('resolves each closed theme mode', () => {
+    expect(resolveSemanticTheme('light')).toEqual(expectedLight)
+    expect(resolveSemanticTheme('dark')).toEqual(expectedDark)
+  })
+
+  it('retains literal structural token types', () => {
+    expectTypeOf(semanticThemes.light.space[1]).toEqualTypeOf<'4px'>()
+    expectTypeOf(semanticThemes.light.gap.sectionLarge).toEqualTypeOf<'16px'>()
+    expectTypeOf(
+      semanticThemes.light.padding.controlBlock,
+    ).toEqualTypeOf<'6px'>()
+    expectTypeOf(
+      semanticThemes.light.type.labelSm.tracking,
+    ).toEqualTypeOf<'0.5px'>()
+    expectTypeOf(semanticThemes.light.type.bodyMd.weight).toEqualTypeOf<300>()
+    expectTypeOf(semanticThemes.light.radius.overlay).toEqualTypeOf<'8px'>()
+    expectTypeOf(semanticThemes.light.motion.graceMs).toEqualTypeOf<400>()
+    expectTypeOf<SemanticTheme['space']>().toEqualTypeOf<
+      Readonly<{ 1: '4px'; 2: '8px'; 3: '12px'; 4: '16px' }>
+    >()
+    expectTypeOf<SemanticTheme['color']['surface']>().toEqualTypeOf<
+      Readonly<{
+        app: string
+        workspace: string
+        subtle: string
+        elevated: string
+        brand: string
+      }>
+    >()
+  })
+
+  it('freezes every object in both theme graphs', () => {
+    expectDeeplyFrozen(semanticThemes)
+  })
+
+  it('rejects mutations and keeps modes isolated', () => {
+    const originalLightApp = semanticThemes.light.color.surface.app
+    const originalDarkApp = semanticThemes.dark.color.surface.app
+
+    expect(
+      Reflect.set(semanticThemes.light.color.surface, 'app', '#ff00ff'),
+    ).toBe(false)
+    expect(semanticThemes.light.color.surface.app).toBe(originalLightApp)
+    expect(semanticThemes.dark.color.surface.app).toBe(originalDarkApp)
+  })
+
+  it('preserves the legacy color token contract', () => {
+    expect(Object.keys(tokens.colors)).toEqual([
+      'inherit',
+      'current',
+      'transparent',
+      'black',
+      'white',
+      'neutral',
+      'darkGray',
+      'gray',
+      'blue',
+      'green',
+      'red',
+      'yellow',
+      'purple',
+      'teal',
+      'pink',
+      'cyan',
+    ])
+  })
+})
diff --git a/packages/devtools-ui/tests/tree.tsx b/packages/devtools-ui/tests/tree.tsx
index 7a7e14c0..528cbe2f 100644
--- a/packages/devtools-ui/tests/tree.tsx
+++ b/packages/devtools-ui/tests/tree.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource solid-js */
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { render } from 'solid-js/web'
 import { JsonTree } from '../src/components/tree'
 import { ThemeContextProvider } from '../src/components/theme'
@@ -17,14 +16,16 @@ function renderTree<TData, TName extends CollapsiblePaths<TData>>(
     collapsePaths?: Array<TName>
     config?: { dateFormat?: string }
     copyable?: boolean
+    theme?: 'light' | 'dark'
   } = {},
 ) {
+  const { theme = 'light', ...treeProps } = extraProps
   container = document.createElement('div')
   document.body.appendChild(container)
   dispose = render(
     () => (
-      <ThemeContextProvider theme="dark">
-        <JsonTree value={value} {...extraProps} />
+      <ThemeContextProvider theme={theme}>
+        <JsonTree value={value} {...treeProps} />
       </ThemeContextProvider>
     ),
     container,
@@ -33,11 +34,66 @@ function renderTree<TData, TName extends CollapsiblePaths<TData>>(
 }
 
 afterEach(() => {
+  vi.restoreAllMocks()
   dispose()
   container.remove()
 })
 
 describe('JsonTree', () => {
+  it.each(['light', 'dark'] as const)(
+    'operates %s expanders from focus with Enter and Space',
+    (theme) => {
+      const el = renderTree({ nested: { value: 1 } }, { theme })
+      const expander = el.querySelector<HTMLElement>('[aria-expanded]')!
+      expect(expander.getAttribute('role')).toBe('button')
+      expect(expander.tabIndex).toBe(0)
+      expect(expander.getAttribute('aria-label')).toBeTruthy()
+      expect(expander.getAttribute('data-tsd-selected')).toBeNull()
+      expander.focus()
+      expect(document.activeElement).toBe(expander)
+      expander.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      )
+      expect(expander.getAttribute('aria-expanded')).toBe('false')
+      expander.dispatchEvent(
+        new KeyboardEvent('keydown', { key: ' ', bubbles: true }),
+      )
+      expect(expander.getAttribute('aria-expanded')).toBe('true')
+    },
+  )
+
+  it.each(['light', 'dark'] as const)(
+    'uses %s semantic current-color copy success and error states',
+    async (theme) => {
+      vi.spyOn(console, 'error').mockImplementation(() => {})
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      Object.defineProperty(navigator, 'clipboard', {
+        configurable: true,
+        value: { writeText },
+      })
+      const el = renderTree({ value: 1 }, { copyable: true, theme })
+      const copy = el.querySelector<HTMLButtonElement>(
+        'button[title="Copy object to clipboard"]',
+      )!
+      copy.click()
+      await Promise.resolve()
+      expect(copy.getAttribute('data-copy-state')).toBe('SuccessCopy')
+      expect(copy.querySelector('path')?.getAttribute('stroke')).toBe(
+        'currentColor',
+      )
+
+      writeText.mockRejectedValueOnce(new Error('copy failed'))
+      const second = el.querySelectorAll<HTMLButtonElement>(
+        'button[title="Copy object to clipboard"]',
+      )[1]!
+      second.click()
+      await Promise.resolve()
+      expect(second.getAttribute('data-copy-state')).toBe('ErrorCopy')
+      expect(second.querySelector('path')?.getAttribute('stroke')).toBe(
+        'currentColor',
+      )
+    },
+  )
   describe('string', () => {
     it('renders a string value wrapped in quotes', () => {
       const el = renderTree('hello world')
@@ -221,6 +277,22 @@ describe('JsonTree', () => {
   })
 
   describe('key rendering', () => {
+    it('marks copy actions and syntax tokens for forced colors', () => {
+      const el = renderTree(
+        { name: 'Alice', age: 30, nested: { active: true } },
+        { copyable: true },
+      )
+      expect(el.querySelectorAll('[data-tsd-control]').length).toBeGreaterThan(
+        0,
+      )
+      const syntax = [...el.querySelectorAll('[data-tsd-syntax]')]
+      expect(syntax.length).toBeGreaterThan(0)
+      expect(syntax.every((node) => node.textContent?.trim())).toBe(true)
+      const selectedStates = [...el.querySelectorAll('[data-tsd-control]')].map(
+        (node) => node.getAttribute('data-tsd-selected'),
+      )
+      expect(selectedStates.every((state) => state === null)).toBe(true)
+    })
     it('renders quoted key names for primitive values', () => {
       const el = renderTree({ count: 5, label: 'test' })
       expect(el.textContent).toContain('"count"')
diff --git a/packages/devtools-ui/tsconfig.json b/packages/devtools-ui/tsconfig.json
index 50837fb4..f58883b0 100644
--- a/packages/devtools-ui/tsconfig.json
+++ b/packages/devtools-ui/tsconfig.json
@@ -8,6 +8,7 @@
     "src/server"
   ],
   "compilerOptions": {
+    "types": ["vite/client"],
     "jsxImportSource": "solid-js",
     "jsx": "preserve"
   }
diff --git a/packages/devtools-ui/vite.config.ts b/packages/devtools-ui/vite.config.ts
index 72e16ea8..0c7ec396 100644
--- a/packages/devtools-ui/vite.config.ts
+++ b/packages/devtools-ui/vite.config.ts
@@ -5,7 +5,15 @@ import packageJson from './package.json'
 import type { Plugin } from 'vite'
 
 const config = defineConfig({
+  base: './',
   plugins: [solid() as any satisfies Plugin],
+  build: {
+    rollupOptions: {
+      output: {
+        assetFileNames: 'assets/[name]-[hash][extname]',
+      },
+    },
+  },
   test: {
     name: packageJson.name,
     dir: './',
@@ -21,7 +29,7 @@ const config = defineConfig({
 export default mergeConfig(
   config,
   tanstackViteConfig({
-    entry: ['./src/index.ts', './src/icons.ts'],
+    entry: ['./src/index.ts', './src/icons.ts', './src/internal.ts'],
     srcDir: './src',
     cjs: false,
   }),
diff --git a/packages/devtools/src/components/content-panel.tsx b/packages/devtools/src/components/content-panel.tsx
index 44aba909..d289ad9e 100644
--- a/packages/devtools/src/components/content-panel.tsx
+++ b/packages/devtools/src/components/content-panel.tsx
@@ -1,22 +1,74 @@
-import { createDevtoolsSettings } from '../context/use-devtools-context'
+import {
+  createDevtoolsSettings,
+  createHeight,
+} from '../context/use-devtools-context'
 import { createStyles } from '../styles/use-styles'
+import { createPiPWindow } from '../context/pip-context'
+import {
+  PANEL_CLOSE_THRESHOLD,
+  PANEL_MAX_VIEWPORT_RATIO,
+} from '../utils/constants'
 import type { JSX } from 'solid-js/jsx-runtime'
 
 export const ContentPanel = (props: {
   ref: (el: HTMLDivElement | undefined) => void
   children: JSX.Element
-  handleDragStart?: (e: any) => void
+  handleDragStart?: (event: MouseEvent) => void
+  handleHeightChange?: (height: number) => void
 }) => {
   const styles = createStyles()
   const { settings } = createDevtoolsSettings()
+  const { height } = createHeight()
+  const pip = createPiPWindow()
+  const maxHeight = () =>
+    Math.floor(window.innerHeight * PANEL_MAX_VIEWPORT_RATIO)
+  const clampedHeight = () =>
+    Math.min(maxHeight(), Math.max(PANEL_CLOSE_THRESHOLD, Math.round(height())))
+  const resizeWithKeyboard: JSX.EventHandlerUnion<
+    HTMLDivElement,
+    KeyboardEvent
+  > = (event) => {
+    const step = event.shiftKey ? 50 : 10
+    const grows =
+      (settings().panelLocation === 'bottom' && event.key === 'ArrowUp') ||
+      (settings().panelLocation === 'top' && event.key === 'ArrowDown')
+    const shrinks =
+      (settings().panelLocation === 'bottom' && event.key === 'ArrowDown') ||
+      (settings().panelLocation === 'top' && event.key === 'ArrowUp')
+    let nextHeight: number | undefined
+    if (grows) nextHeight = clampedHeight() + step
+    if (shrinks) nextHeight = clampedHeight() - step
+    if (event.key === 'Home') nextHeight = PANEL_CLOSE_THRESHOLD
+    if (event.key === 'End') nextHeight = maxHeight()
+    if (nextHeight === undefined) return
+    event.preventDefault()
+    props.handleHeightChange?.(Math.min(maxHeight(), nextHeight))
+  }
+
   return (
-    <div ref={props.ref} class={styles().devtoolsPanel}>
-      {props.handleDragStart ? (
+    <div
+      ref={props.ref}
+      data-testid="tanstack-devtools-content-panel"
+      class={styles().devtoolsPanel}
+      data-tsd-surface
+      style={{ 'flex-direction': 'column' }}
+    >
+      {props.handleDragStart && pip().pipWindow === null ? (
         <div
           data-testid="tsd-resize-handle"
           class={styles().dragHandle(settings().panelLocation)}
           onMouseDown={props.handleDragStart}
-        ></div>
+          data-tsd-control
+          data-tsd-separator="resize"
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Resize TanStack Devtools panel"
+          aria-valuemin={PANEL_CLOSE_THRESHOLD}
+          aria-valuemax={maxHeight()}
+          aria-valuenow={clampedHeight()}
+          tabIndex={0}
+          onKeyDown={resizeWithKeyboard}
+        />
       ) : null}
       {props.children}
     </div>
diff --git a/packages/devtools/src/components/main-panel.tsx b/packages/devtools/src/components/main-panel.tsx
index d2d8398d..9d677d54 100644
--- a/packages/devtools/src/components/main-panel.tsx
+++ b/packages/devtools/src/components/main-panel.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
-import { DrawClientProvider } from '../context/draw-context'
+import { ChevronDownIcon } from '@tanstack/devtools-ui'
+import { createEffect, createSignal, onCleanup } from 'solid-js'
 import {
   createDevtoolsSettings,
   createHeight,
@@ -7,25 +8,94 @@ import {
 import { createStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
 import { createPiPWindow } from '../context/pip-context'
-
 import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
   isOpen: Accessor<boolean>
   children: JSX.Element
   isResizing: Accessor<boolean>
+  isCollapsed: Accessor<boolean>
+  toggleCollapsed: () => void
 }) => {
   const styles = createStyles()
   const { height } = createHeight()
   const { settings } = createDevtoolsSettings()
   const pip = createPiPWindow()
+  let drawerContent: HTMLDivElement | undefined
+  const panelWindow = () =>
+    pip().pipWindow ?? (typeof window === 'undefined' ? null : window)
+  const readClientWidth = () => {
+    const targetWindow = panelWindow()
+    if (!targetWindow) return 0
+    return (
+      targetWindow.document.documentElement.clientWidth ||
+      targetWindow.innerWidth
+    )
+  }
+  const [clientWidth, setClientWidth] = createSignal(readClientWidth())
+
+  createEffect(() => {
+    const targetWindow = panelWindow()
+    if (!targetWindow) return
+    const targetRoot = targetWindow.document.documentElement
+    const syncClientWidth = () => {
+      setClientWidth(targetRoot.clientWidth || targetWindow.innerWidth)
+    }
+    syncClientWidth()
+    targetWindow.addEventListener('resize', syncClientWidth)
+    const ResizeObserverConstructor =
+      (targetWindow as Window & { ResizeObserver?: typeof ResizeObserver })
+        .ResizeObserver ??
+      (globalThis as unknown as { ResizeObserver?: typeof ResizeObserver })
+        .ResizeObserver
+    const resizeObserver = ResizeObserverConstructor
+      ? new ResizeObserverConstructor(syncClientWidth)
+      : null
+    resizeObserver?.observe(targetRoot)
+    onCleanup(() => {
+      targetWindow.removeEventListener('resize', syncClientWidth)
+      resizeObserver?.disconnect()
+    })
+  })
+
+  const isAttached = () => pip().pipWindow === null
+  const isAttachedCollapsed = () => isAttached() && props.isCollapsed()
+  const translation = () => {
+    if (!isAttached()) return 'translateY(0px)'
+    if (props.isOpen() && !isAttachedCollapsed()) return 'translateY(0px)'
+    return settings().panelLocation === 'top'
+      ? 'translateY(-100%)'
+      : 'translateY(100%)'
+  }
+  const chevronDirection = () => {
+    const collapsesDown = settings().panelLocation === 'bottom'
+    return collapsesDown !== isAttachedCollapsed() ? 'down' : 'up'
+  }
+
+  createEffect(() => {
+    if (!drawerContent) return
+    if (isAttachedCollapsed()) {
+      drawerContent.setAttribute('inert', '')
+    } else {
+      drawerContent.removeAttribute('inert')
+    }
+  })
+
   return (
     <div
       id={TANSTACK_DEVTOOLS}
-      data-testid="tsd-main-panel"
-      data-open={props.isOpen() ? 'true' : 'false'}
+      data-testid="tanstack-devtools-panel"
+      data-open={String(props.isOpen())}
+      data-collapsed={String(isAttachedCollapsed())}
+      data-tsd-surface
       style={{
         height: pip().pipWindow ? '100vh' : height() + 'px',
+        'inline-size':
+          isAttached() && clientWidth() > 0 ? `${clientWidth()}px` : '100%',
+        'max-inline-size': '100%',
+        'inset-inline': '0px',
+        'box-sizing': 'border-box',
+        transform: translation(),
         '--tsd-main-panel-height': pip().pipWindow ? '100vh' : height() + 'px',
       }}
       class={clsx(
@@ -33,18 +103,41 @@ export const MainPanel = (props: {
           settings().panelLocation,
           Boolean(pip().pipWindow),
         ),
-        styles().devtoolsPanelContainerAnimation(
-          props.isOpen(),
-          height(),
-          settings().panelLocation,
-        ),
         styles().devtoolsPanelContainerVisibility(props.isOpen()),
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}
     >
-      <DrawClientProvider animationMs={400}>
+      <div
+        ref={(element) => (drawerContent = element)}
+        data-testid="devtools-drawer-content"
+        class={styles().devtoolsDrawerContent}
+        aria-hidden={isAttachedCollapsed() ? 'true' : undefined}
+      >
         {props.children}
-      </DrawClientProvider>
+      </div>
+      {isAttached() ? (
+        <button
+          type="button"
+          aria-label={`${isAttachedCollapsed() ? 'Expand' : 'Collapse'} TanStack Devtools drawer`}
+          aria-expanded={!isAttachedCollapsed()}
+          data-panel-location={settings().panelLocation}
+          data-direction={chevronDirection()}
+          data-tsd-control
+          class={styles().drawerToggle(settings().panelLocation)}
+          onClick={props.toggleCollapsed}
+        >
+          <span
+            aria-hidden="true"
+            class={styles().drawerToggleIcon}
+            style={{
+              transform:
+                chevronDirection() === 'up' ? 'rotate(180deg)' : 'rotate(0deg)',
+            }}
+          >
+            <ChevronDownIcon />
+          </span>
+        </button>
+      ) : null}
     </div>
   )
 }
diff --git a/packages/devtools/src/components/plugins-strip.tsx b/packages/devtools/src/components/plugins-strip.tsx
new file mode 100644
index 00000000..96539ebc
--- /dev/null
+++ b/packages/devtools/src/components/plugins-strip.tsx
@@ -0,0 +1,93 @@
+import { For, createEffect, createMemo } from 'solid-js'
+import {
+  createDevtoolsState,
+  createPlugins,
+  createTheme,
+} from '../context/use-devtools-context'
+import { PLUGIN_TITLE_CONTAINER_ID } from '../constants'
+import { createStyles } from '../styles/use-styles'
+import {
+  WorkbenchSecondaryTab,
+  WorkbenchSecondaryTabs,
+} from './workbench-secondary-tabs'
+import type { Accessor } from 'solid-js'
+
+export const PluginsStrip = (props: { isOpen: Accessor<boolean> }) => {
+  const { plugins, activePlugins, toggleActivePlugins } = createPlugins()
+  const { setState } = createDevtoolsState()
+  const { theme } = createTheme()
+  const styles = createStyles()
+
+  const selectPlugin = (pluginId: string) => {
+    setState({ activeTab: 'plugins' })
+    toggleActivePlugins(pluginId)
+  }
+
+  return (
+    <WorkbenchSecondaryTabs
+      ariaLabel="Plugin panels"
+      dataTestId="plugins-strip"
+    >
+      <For each={plugins()}>
+        {(plugin) => {
+          let heading: HTMLHeadingElement | undefined
+          const isActive = createMemo(() =>
+            activePlugins().includes(plugin.id!),
+          )
+
+          const renderName = () => {
+            if (!heading) return
+            if (typeof plugin.name === 'string') {
+              heading.textContent = plugin.name
+            } else {
+              plugin.name(heading, {
+                theme: theme(),
+                devtoolsOpen: props.isOpen(),
+              })
+            }
+          }
+          let nameMounted = false
+          createEffect(() => {
+            theme()
+            props.isOpen()
+            if (!nameMounted) {
+              nameMounted = true
+              return
+            }
+            renderName()
+          })
+
+          return (
+            <WorkbenchSecondaryTab
+              ariaLabelledBy={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
+              ariaPressed={isActive()}
+              pluginTitleControl
+              selected={isActive()}
+              onClick={() => selectPlugin(plugin.id!)}
+            >
+              <h3
+                id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
+                ref={(element) => {
+                  heading = element
+                  renderName()
+                }}
+                style={
+                  typeof plugin.name === 'function'
+                    ? {
+                        all: 'initial',
+                      }
+                    : undefined
+                }
+                class={
+                  typeof plugin.name === 'string'
+                    ? styles().pluginTitleText
+                    : undefined
+                }
+              />
+            </WorkbenchSecondaryTab>
+          )
+        }}
+      </For>
+    </WorkbenchSecondaryTabs>
+  )
+}
diff --git a/packages/devtools/src/components/source-inspector.tsx b/packages/devtools/src/components/source-inspector.tsx
index d0fcb285..589184cd 100644
--- a/packages/devtools/src/components/source-inspector.tsx
+++ b/packages/devtools/src/components/source-inspector.tsx
@@ -128,7 +128,7 @@ export const SourceInspector = () => {
         left: `${highlightState.bounding.left}px`,
         top: `${highlightState.bounding.top}px`,
 
-        'background-color': 'oklch(55.4% 0.046 257.417 /0.25)',
+        'background-color': 'oklch(55.4% 0.046 257.417 /0.25)', // semantic-color-exempt: source-highlight-alpha
         transition: 'all 0.05s linear',
         position: 'fixed' as const,
         'z-index': 9999,
@@ -163,7 +163,7 @@ export const SourceInspector = () => {
         position: 'fixed' as const,
         left: `${left}px`,
         top: `${top}px`,
-        'background-color': 'oklch(55.4% 0.046 257.417 /0.80)',
+        'background-color': 'oklch(55.4% 0.046 257.417 /0.80)', // semantic-color-exempt: source-highlight-alpha
         color: 'white',
         padding: '2px 4px',
         fontSize: '12px',
diff --git a/packages/devtools/src/components/tab-content.tsx b/packages/devtools/src/components/tab-content.tsx
index 0898ef5e..41302dbb 100644
--- a/packages/devtools/src/components/tab-content.tsx
+++ b/packages/devtools/src/components/tab-content.tsx
@@ -2,18 +2,36 @@ import { createMemo } from 'solid-js'
 import { createDevtoolsState } from '../context/use-devtools-context'
 import { tabs } from '../tabs'
 import { createStyles } from '../styles/use-styles'
+import { PluginMarketplace } from '../tabs/plugin-marketplace'
 import type { JSX } from 'solid-js'
 
-export const TabContent = (props: { isOpen: boolean }) => {
+export const TabContent = (props: {
+  isOpen: boolean
+  showMarketplace: boolean
+}) => {
   const { state } = createDevtoolsState()
   const styles = createStyles()
   const component = createMemo<
     ((props: { isOpen: boolean }) => JSX.Element) | null
-  >(() => tabs.find((t) => t.id === state().activeTab)?.component || null)
+  >(() => tabs.find((tab) => tab.id === state().activeTab)?.component || null)
 
   return (
-    <div class={styles().tabContent}>
-      {component()?.({ isOpen: props.isOpen })}
+    <div
+      class={styles().tabContent}
+      data-tsd-surface
+      style={{ flex: '1 1 0', 'min-height': '0' }}
+    >
+      {props.showMarketplace ? (
+        <div
+          data-testid="plugin-marketplace"
+          data-tsd-surface
+          style={{ height: '100%', 'min-height': '0px', overflow: 'hidden' }}
+        >
+          <PluginMarketplace />
+        </div>
+      ) : (
+        component()?.({ isOpen: props.isOpen })
+      )}
     </div>
   )
 }
diff --git a/packages/devtools/src/components/tabs.test.tsx b/packages/devtools/src/components/tabs.test.tsx
deleted file mode 100644
index a9d1fc60..00000000
--- a/packages/devtools/src/components/tabs.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-import { render } from '@solidjs/testing-library'
-import { DevtoolsProvider } from '../context/devtools-context'
-import { DrawClientProvider } from '../context/draw-context'
-import { PiPProvider } from '../context/pip-context'
-import { createDevtoolsState } from '../context/use-devtools-context'
-import { Tabs } from './tabs'
-
-describe('Tabs', () => {
-  beforeEach(() => {
-    localStorage.clear()
-  })
-
-  it('renders a button for every tab plus the pip and close buttons', () => {
-    const { getByTestId } = render(() => (
-      <DevtoolsProvider>
-        <DrawClientProvider animationMs={300}>
-          <PiPProvider>
-            <Tabs toggleOpen={() => {}} />
-          </PiPProvider>
-        </DrawClientProvider>
-      </DevtoolsProvider>
-    ))
-
-    expect(getByTestId('tsd-tab-plugins')).toBeInTheDocument()
-    expect(getByTestId('tsd-tab-seo')).toBeInTheDocument()
-    expect(getByTestId('tsd-tab-settings')).toBeInTheDocument()
-    // Default pipWindow() === null, so these two render.
-    expect(getByTestId('tsd-pip-button')).toBeInTheDocument()
-    expect(getByTestId('tsd-close-button')).toBeInTheDocument()
-  })
-
-  it('marks the default active tab and moves the active class on store mutation', () => {
-    // Capture the state setter from inside the provider tree.
-    let setState!: ReturnType<typeof createDevtoolsState>['setState']
-    const StateProbe = () => {
-      setState = createDevtoolsState().setState
-      return null
-    }
-
-    const { getByTestId } = render(() => (
-      <DevtoolsProvider>
-        <DrawClientProvider animationMs={300}>
-          <PiPProvider>
-            <StateProbe />
-            <Tabs toggleOpen={() => {}} />
-          </PiPProvider>
-        </DrawClientProvider>
-      </DevtoolsProvider>
-    ))
-
-    // Store default activeTab is 'plugins'.
-    expect(getByTestId('tsd-tab-plugins')).toHaveClass('active')
-    expect(getByTestId('tsd-tab-settings')).not.toHaveClass('active')
-
-    // Reactivity via store mutation (not a user click).
-    setState({ activeTab: 'settings' })
-
-    expect(getByTestId('tsd-tab-settings')).toHaveClass('active')
-    expect(getByTestId('tsd-tab-plugins')).not.toHaveClass('active')
-  })
-})
diff --git a/packages/devtools/src/components/tabs.tsx b/packages/devtools/src/components/tabs.tsx
deleted file mode 100644
index 28dd7682..00000000
--- a/packages/devtools/src/components/tabs.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import clsx from 'clsx'
-import { For } from 'solid-js'
-import { PiP, X } from '@tanstack/devtools-ui/icons'
-import { createStyles } from '../styles/use-styles'
-import { createDevtoolsState } from '../context/use-devtools-context'
-import { createDrawContext } from '../context/draw-context'
-import { tabs } from '../tabs'
-import { createPiPWindow } from '../context/pip-context'
-
-interface TabsProps {
-  toggleOpen: () => void
-}
-
-export const Tabs = (props: TabsProps) => {
-  const styles = createStyles()
-  const { state, setState } = createDevtoolsState()
-  const pipWindow = createPiPWindow()
-  const handleDetachment = () => {
-    pipWindow().requestPipWindow(
-      `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
-    )
-  }
-  const { hoverUtils } = createDrawContext()
-
-  return (
-    <div class={styles().tabContainer}>
-      <For each={tabs}>
-        {(tab) => (
-          <button
-            type="button"
-            data-testid={`tsd-tab-${tab.id}`}
-            onClick={() => setState({ activeTab: tab.id })}
-            class={clsx(styles().tab, { active: state().activeTab === tab.id })}
-            onMouseEnter={() => {
-              if (tab.id === 'plugins') hoverUtils.enter()
-            }}
-            onMouseLeave={() => {
-              if (tab.id === 'plugins') hoverUtils.leave()
-            }}
-          >
-            {tab.icon()}
-          </button>
-        )}
-      </For>
-      {pipWindow().pipWindow !== null ? null : (
-        <div
-          style={{
-            'margin-top': 'auto',
-            width: '100%',
-          }}
-        >
-          <button
-            type="button"
-            data-testid="tsd-pip-button"
-            class={clsx(styles().tab, 'detach')}
-            onClick={handleDetachment}
-          >
-            <PiP />
-          </button>
-          <button
-            type="button"
-            data-testid="tsd-close-button"
-            class={clsx(styles().tab, 'close')}
-            onClick={() => props.toggleOpen()}
-          >
-            <X />
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/packages/devtools/src/components/tanstack-logo.png b/packages/devtools/src/components/tanstack-logo.png
index 367cbcff..0fd9af58 100644
Binary files a/packages/devtools/src/components/tanstack-logo.png and b/packages/devtools/src/components/tanstack-logo.png differ
diff --git a/packages/devtools/src/components/trigger.tsx b/packages/devtools/src/components/trigger.tsx
index df7e0763..93f4d8f3 100644
--- a/packages/devtools/src/components/trigger.tsx
+++ b/packages/devtools/src/components/trigger.tsx
@@ -67,6 +67,7 @@ export const Trigger = (props: {
       // static-flow position) and the hand-off to inline left/top is seamless.
       (!isFloating() || !coords()) &&
         styles().mainCloseBtnPosition(settings().position),
+      !settings().customTrigger && styles().mainCloseBtnDefault,
       styles().mainCloseBtnAnimation(props.isOpen(), settings().hideUntilHover),
       isFloating() && styles().mainCloseBtnFloating,
     )
@@ -273,6 +274,7 @@ export const Trigger = (props: {
       <button
         ref={setButtonRef}
         type="button"
+        data-tsd-control
         aria-label="Open TanStack Devtools"
         class={buttonStyle()}
         style={
diff --git a/packages/devtools/src/components/workbench-header.tsx b/packages/devtools/src/components/workbench-header.tsx
new file mode 100644
index 00000000..a405b5af
--- /dev/null
+++ b/packages/devtools/src/components/workbench-header.tsx
@@ -0,0 +1,125 @@
+import { Cogs, PiP, X } from '@tanstack/devtools-ui/icons'
+import { createDevtoolsState } from '../context/use-devtools-context'
+import { createPiPWindow } from '../context/pip-context'
+import {
+  createStyles,
+  ensureWorkbenchGeometryStyles,
+} from '../styles/use-styles'
+import TanStackLogo from './tanstack-logo.png'
+import type { Accessor, Setter } from 'solid-js'
+
+export const WorkbenchHeader = (props: {
+  showMarketplace: Accessor<boolean>
+  setShowMarketplace: Setter<boolean>
+  toggleOpen: () => void
+}) => {
+  const { state, setState } = createDevtoolsState()
+  const pip = createPiPWindow()
+  const styles = createStyles()
+  ensureWorkbenchGeometryStyles(document)
+
+  const selectDestination = (
+    destination: 'plugins' | 'marketplace' | 'seo' | 'settings',
+  ) => {
+    if (destination === 'marketplace') {
+      setState({ activeTab: 'plugins' })
+      props.setShowMarketplace(true)
+      return
+    }
+    props.setShowMarketplace(false)
+    setState({ activeTab: destination })
+  }
+
+  const isSelected = (
+    destination: 'plugins' | 'marketplace' | 'seo' | 'settings',
+  ) =>
+    destination === 'marketplace'
+      ? props.showMarketplace()
+      : !props.showMarketplace() && state().activeTab === destination
+
+  const detach = () => {
+    pip().requestPipWindow(
+      `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}`,
+    )
+  }
+
+  return (
+    <header
+      aria-label="TanStack Devtools"
+      data-testid="workbench-header"
+      data-tsd-surface
+      class={styles().workbenchHeader}
+    >
+      <span aria-label="TanStack Devtools" class={styles().workbenchLogo}>
+        <img src={TanStackLogo} alt="TanStack Devtools" />
+      </span>
+      <strong
+        data-testid="workbench-wordmark"
+        class={`${styles().workbenchWordmark} tsd-workbench-wordmark`}
+      >
+        TanStack Devtools
+      </strong>
+      <nav
+        aria-label="Workbench destinations"
+        data-testid="workbench-destinations"
+        class={styles().workbenchDestinations}
+      >
+        {(['plugins', 'marketplace', 'seo'] as const).map((destination) => {
+          const label =
+            destination === 'seo'
+              ? 'SEO'
+              : destination[0]!.toUpperCase() + destination.slice(1)
+          return (
+            <button
+              type="button"
+              data-tsd-control
+              class={styles().workbenchNavButton}
+              data-tsd-selected={isSelected(destination) ? 'true' : undefined}
+              aria-current={isSelected(destination) ? 'page' : undefined}
+              onClick={() => selectDestination(destination)}
+            >
+              {label}
+            </button>
+          )
+        })}
+      </nav>
+      <span class={styles().workbenchActions}>
+        <button
+          type="button"
+          aria-label="Settings"
+          title="Settings"
+          data-tsd-control
+          class={styles().workbenchActionButton}
+          data-icon="cogs"
+          data-tsd-selected={isSelected('settings') ? 'true' : undefined}
+          aria-current={isSelected('settings') ? 'page' : undefined}
+          onClick={() => selectDestination('settings')}
+        >
+          <Cogs />
+        </button>
+        {pip().pipWindow === null ? (
+          <>
+            <button
+              type="button"
+              aria-label="Detach TanStack Devtools"
+              data-tsd-control
+              class={styles().workbenchActionButton}
+              onClick={detach}
+            >
+              <PiP />
+            </button>
+            <button
+              type="button"
+              aria-label="Close TanStack Devtools"
+              data-tsd-control
+              class={styles().workbenchActionButton}
+              onClick={props.toggleOpen}
+            >
+              <X />
+            </button>
+          </>
+        ) : null}
+      </span>
+    </header>
+  )
+}
diff --git a/packages/devtools/src/components/workbench-secondary-tabs.tsx b/packages/devtools/src/components/workbench-secondary-tabs.tsx
new file mode 100644
index 00000000..fa69cb50
--- /dev/null
+++ b/packages/devtools/src/components/workbench-secondary-tabs.tsx
@@ -0,0 +1,57 @@
+import { createStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js'
+
+export const WorkbenchSecondaryTabs = (props: {
+  ariaLabel: string
+  dataTestId?: string
+  children: JSX.Element
+}) => {
+  const styles = createStyles()
+
+  return (
+    <nav
+      aria-label={props.ariaLabel}
+      data-testid={props.dataTestId}
+      data-workbench-secondary-tabs
+      data-tsd-surface
+      class={`${styles().workbenchSecondaryTabs} tsd-workbench-secondary-tabs`}
+    >
+      {props.children}
+    </nav>
+  )
+}
+
+export const WorkbenchSecondaryTab = (props: {
+  selected: boolean
+  children: JSX.Element
+  ariaCurrent?: 'page'
+  ariaPressed?: boolean
+  ariaLabelledBy?: string
+  pluginTitleControl?: boolean
+  onClick: () => void
+}) => {
+  const styles = createStyles()
+
+  return (
+    <button
+      type="button"
+      aria-current={props.ariaCurrent}
+      aria-pressed={props.ariaPressed}
+      aria-labelledby={props.ariaLabelledBy}
+      data-plugin-title-control={props.pluginTitleControl ? '' : undefined}
+      data-workbench-secondary-tab
+      data-tsd-control
+      data-tsd-selected={props.selected ? 'true' : undefined}
+      class={styles().workbenchSecondaryTab}
+      onFocus={(event) =>
+        event.currentTarget.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+  )
+}
diff --git a/packages/devtools/src/context/devtools-context.test.ts b/packages/devtools/src/context/devtools-context.test.ts
index 40c4add6..807f550c 100644
--- a/packages/devtools/src/context/devtools-context.test.ts
+++ b/packages/devtools/src/context/devtools-context.test.ts
@@ -1,11 +1,16 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { createComponent, createEffect, createRoot, useContext } from 'solid-js'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { TANSTACK_DEVTOOLS_STATE } from '../utils/storage'
 import {
+  DevtoolsContext,
+  DevtoolsProvider,
   getExistingStateFromStorage,
   getStateFromLocalStorage,
 } from './devtools-context'
 import type { TanStackDevtoolsPlugin } from './devtools-context'
 
+afterEach(() => vi.restoreAllMocks())
+
 describe('getStateFromLocalStorage', () => {
   beforeEach(() => {
     localStorage.clear()
@@ -324,3 +329,69 @@ describe('getExistingStateFromStorage - integration tests', () => {
     expect(state.state.activePlugins).toEqual(['plugin1'])
   })
 })
+
+describe('provider resilience', () => {
+  beforeEach(() => localStorage.clear())
+
+  it('fails loudly for storage reads while tolerating storage quota errors', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementationOnce(() => {
+      throw new Error('read blocked')
+    })
+    expect(() => getStateFromLocalStorage(undefined)).toThrow('read blocked')
+    localStorage.setItem(
+      TANSTACK_DEVTOOLS_STATE,
+      JSON.stringify({
+        activePlugins: ['missing'],
+        settings: { theme: 'dark' },
+      }),
+    )
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementationOnce(() => {
+      throw new Error('quota')
+    })
+    expect(() =>
+      getStateFromLocalStorage([
+        { id: 'kept', name: 'Kept', render: () => {} },
+      ]),
+    ).not.toThrow()
+  })
+
+  it('generates stable unique IDs while preserving explicit duplicate IDs', () => {
+    const generated = getExistingStateFromStorage(undefined, [
+      { name: 'Same Name', render: () => {} },
+      { name: 'Same Name', render: () => {} },
+      { name: () => {}, render: () => {} },
+    ]).plugins!.map((entry) => entry.id)
+    expect(generated).toEqual(['same-name-0', 'same-name-1', '2'])
+    const explicit = getExistingStateFromStorage(undefined, [
+      { id: 'duplicate', name: 'A', render: () => {} },
+      { id: 'duplicate', name: 'B', render: () => {} },
+    ]).plugins!.map((entry) => entry.id)
+    expect(explicit).toEqual(['duplicate', 'duplicate'])
+  })
+
+  it('reactively replaces plugins through the existing onSetPlugins callback', async () => {
+    let replace!: (plugins: Array<TanStackDevtoolsPlugin>) => void
+    let ids: Array<string> = []
+    const dispose = createRoot((disposeRoot) => {
+      createComponent(DevtoolsProvider, {
+        plugins: [{ name: 'Old', render: () => {} }],
+        onSetPlugins: (setter) => {
+          replace = setter
+        },
+        get children() {
+          const context = useContext(DevtoolsContext)!
+          createEffect(() => {
+            ids = context.store.plugins?.map((entry) => entry.id!) ?? []
+          })
+          return null
+        },
+      })
+      return disposeRoot
+    })
+    await Promise.resolve()
+    expect(ids).toEqual(['old-0'])
+    replace([{ name: 'New', render: () => {} }])
+    expect(ids).toEqual(['new-0'])
+    dispose()
+  })
+})
diff --git a/packages/devtools/src/context/devtools-context.tsx b/packages/devtools/src/context/devtools-context.tsx
index c72bde74..e5ba2b58 100644
--- a/packages/devtools/src/context/devtools-context.tsx
+++ b/packages/devtools/src/context/devtools-context.tsx
@@ -1,4 +1,4 @@
-import { createContext, createEffect } from 'solid-js'
+import { createComponent, createContext, createEffect } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { getDefaultActivePlugins } from '../utils/get-default-active-plugins'
 import { tryParseJson } from '../utils/sanitize'
@@ -184,6 +184,8 @@ export const DevtoolsProvider = (props: ContextProps) => {
     getExistingStateFromStorage(props.config, props.plugins),
   )
 
+  setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(store.state))
+
   // Provide a way for the core to update plugins reactively
   const updatePlugins = (newPlugins: Array<TanStackDevtoolsPlugin>) => {
     const pluginsWithIds = newPlugins.map((plugin, i) => {
@@ -222,9 +224,10 @@ export const DevtoolsProvider = (props: ContextProps) => {
     },
   }
 
-  return (
-    <DevtoolsContext.Provider value={value}>
-      {props.children}
-    </DevtoolsContext.Provider>
-  )
+  return createComponent(DevtoolsContext.Provider, {
+    value,
+    get children() {
+      return props.children
+    },
+  })
 }
diff --git a/packages/devtools/src/context/draw-context.tsx b/packages/devtools/src/context/draw-context.tsx
deleted file mode 100644
index e057aa7a..00000000
--- a/packages/devtools/src/context/draw-context.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
-  createContext,
-  createMemo,
-  createSignal,
-  useContext as getContext,
-  onCleanup,
-} from 'solid-js'
-import type { ParentComponent } from 'solid-js'
-
-const createDraw = (props: { animationMs: number }) => {
-  const [activeHover, setActiveHover] = createSignal<boolean>(false)
-  const [forceExpand, setForceExpand] = createSignal<boolean>(false)
-
-  const expanded = createMemo(() => activeHover() || forceExpand())
-
-  let hoverTimeout: ReturnType<typeof setTimeout> | null = null
-  onCleanup(() => {
-    if (hoverTimeout) clearTimeout(hoverTimeout)
-  })
-
-  const hoverUtils = {
-    enter: () => {
-      if (hoverTimeout) {
-        clearTimeout(hoverTimeout)
-        hoverTimeout = null
-      }
-      setActiveHover(true)
-    },
-
-    leave: () => {
-      hoverTimeout = setTimeout(() => {
-        setActiveHover(false)
-      }, props.animationMs)
-    },
-  }
-
-  return {
-    expanded,
-    setForceExpand,
-    hoverUtils,
-    animationMs: props.animationMs,
-  }
-}
-
-type ContextType = ReturnType<typeof createDraw>
-
-const DrawContext = createContext<ContextType | undefined>(undefined)
-
-export const DrawClientProvider: ParentComponent<{
-  animationMs: number
-}> = (props) => {
-  const value = createDraw({ animationMs: props.animationMs })
-
-  return (
-    <DrawContext.Provider value={value}>{props.children}</DrawContext.Provider>
-  )
-}
-
-export function createDrawContext() {
-  const context = getContext(DrawContext)
-
-  if (context === undefined) {
-    throw new Error(
-      `createDrawContext must be used within a DrawClientProvider`,
-    )
-  }
-
-  return context
-}
diff --git a/packages/devtools/src/context/pip-context.tsx b/packages/devtools/src/context/pip-context.tsx
index 4c552f8f..f8f442c9 100644
--- a/packages/devtools/src/context/pip-context.tsx
+++ b/packages/devtools/src/context/pip-context.tsx
@@ -7,6 +7,7 @@ import {
   onCleanup,
 } from 'solid-js'
 import { delegateEvents } from 'solid-js/web'
+import { ensureDevtoolsStyles } from '@tanstack/devtools-ui/internal'
 import type { Accessor, JSX } from 'solid-js'
 
 interface PiPProviderProps {
@@ -112,6 +113,7 @@ export const PiPProvider = (props: PiPProviderProps) => {
         pip.document.head.appendChild(link)
       }
     })
+    ensureDevtoolsStyles(pip.document)
     delegateEvents(
       [
         'focusin',
diff --git a/packages/devtools/src/context/use-devtools-context.ts b/packages/devtools/src/context/use-devtools-context.ts
index d6a3328f..f7121eab 100644
--- a/packages/devtools/src/context/use-devtools-context.ts
+++ b/packages/devtools/src/context/use-devtools-context.ts
@@ -1,14 +1,8 @@
-import { createEffect, createMemo, useContext as getContext } from 'solid-js'
+import { createMemo, useContext as getContext } from 'solid-js'
 import { MAX_ACTIVE_PLUGINS } from '../utils/constants.js'
 import { DevtoolsContext } from './devtools-context.jsx'
-import { createDrawContext } from './draw-context.jsx'
-
 import type { DevtoolsStore } from './devtools-store.js'
 
-/**
- * Returns an object containing the current state and setState function of the ShellContext.
- * Throws an error if used outside of a ShellContextProvider.
- */
 const createDevtoolsContext = () => {
   const context = getContext(DevtoolsContext)
   if (context === undefined) {
@@ -31,23 +25,12 @@ export function createTheme() {
 
 export const createPlugins = () => {
   const { store, setStore } = createDevtoolsContext()
-  const { setForceExpand } = createDrawContext()
-
   const plugins = createMemo(() => store.plugins)
   const activePlugins = createMemo(() => store.state.activePlugins)
 
-  createEffect(() => {
-    if (activePlugins().length === 0) {
-      setForceExpand(true)
-    } else {
-      setForceExpand(false)
-    }
-  })
-
   const toggleActivePlugins = (pluginId: string) => {
-    setStore((prev) => {
-      const isActive = prev.state.activePlugins.includes(pluginId)
-
+    setStore((previous) => {
+      const isActive = previous.state.activePlugins.includes(pluginId)
       const currentPlugin = store.plugins?.find(
         (plugin) => plugin.id === pluginId,
       )
@@ -57,13 +40,13 @@ export const createPlugins = () => {
       }
 
       const updatedPlugins = isActive
-        ? prev.state.activePlugins.filter((id) => id !== pluginId)
-        : [...prev.state.activePlugins, pluginId]
-      if (updatedPlugins.length > MAX_ACTIVE_PLUGINS) return prev
+        ? previous.state.activePlugins.filter((id) => id !== pluginId)
+        : [...previous.state.activePlugins, pluginId]
+      if (updatedPlugins.length > MAX_ACTIVE_PLUGINS) return previous
       return {
-        ...prev,
+        ...previous,
         state: {
-          ...prev.state,
+          ...previous.state,
           activePlugins: updatedPlugins,
         },
       }
@@ -77,10 +60,10 @@ export const createDevtoolsState = () => {
   const { store, setStore } = createDevtoolsContext()
   const state = createMemo(() => store.state)
   const setState = (newState: Partial<DevtoolsStore['state']>) => {
-    setStore((prev) => ({
-      ...prev,
+    setStore((previous) => ({
+      ...previous,
       state: {
-        ...prev.state,
+        ...previous.state,
         ...newState,
       },
     }))
@@ -90,42 +73,33 @@ export const createDevtoolsState = () => {
 
 export const createDevtoolsSettings = () => {
   const { store, setStore } = createDevtoolsContext()
-
   const settings = createMemo(() => store.settings)
-
   const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {
-    setStore((prev) => ({
-      ...prev,
+    setStore((previous) => ({
+      ...previous,
       settings: {
-        ...prev.settings,
+        ...previous.settings,
         ...newSettings,
       },
     }))
   }
-
   return { setSettings, settings }
 }
 
 export const createPersistOpen = () => {
   const { state, setState } = createDevtoolsState()
-
   const persistOpen = createMemo(() => state().persistOpen)
-
   const setPersistOpen = (value: boolean) => {
     setState({ persistOpen: value })
   }
-
   return { persistOpen, setPersistOpen }
 }
 
 export const createHeight = () => {
   const { state, setState } = createDevtoolsState()
-
   const height = createMemo(() => state().height)
-
   const setHeight = (newHeight: number) => {
     setState({ height: newHeight })
   }
-
   return { height, setHeight }
 }
diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
index d68ff07e..38536783 100644
--- a/packages/devtools/src/devtools.tsx
+++ b/packages/devtools/src/devtools.tsx
@@ -3,9 +3,9 @@ import { createShortcut } from '@solid-primitives/keyboard'
 import { Portal } from 'solid-js/web'
 import { ThemeContextProvider } from '@tanstack/devtools-ui'
 import { devtoolsEventClient } from '@tanstack/devtools-client'
-
 import {
   createDevtoolsSettings,
+  createDevtoolsState,
   createHeight,
   createPersistOpen,
   createTheme,
@@ -16,13 +16,54 @@ import { getHotkeyPermutations } from './utils/hotkey'
 import { Trigger } from './components/trigger'
 import { MainPanel } from './components/main-panel'
 import { ContentPanel } from './components/content-panel'
-import { Tabs } from './components/tabs'
 import { TabContent } from './components/tab-content'
 import { createPiPWindow } from './context/pip-context'
 import { SourceInspector } from './components/source-inspector'
+import { WorkbenchHeader } from './components/workbench-header'
+import { PluginsStrip } from './components/plugins-strip'
+import { PANEL_CLOSE_THRESHOLD } from './utils/constants'
+
+const themeDocumentOwners = new WeakMap<Document, Map<symbol, string>>()
+const previousThemeAttributes = new WeakMap<Document, string | null>()
+
+const setDocumentTheme = (document: Document, owner: symbol, theme: string) => {
+  let owners = themeDocumentOwners.get(document)
+  if (!owners) {
+    owners = new Map()
+    themeDocumentOwners.set(document, owners)
+    previousThemeAttributes.set(
+      document,
+      document.documentElement.getAttribute('data-tanstack-devtools-theme'),
+    )
+  }
+  owners.delete(owner)
+  owners.set(owner, theme)
+  document.documentElement.dataset.tanstackDevtoolsTheme = theme
+}
+
+const clearDocumentTheme = (document: Document, owner: symbol) => {
+  const owners = themeDocumentOwners.get(document)
+  if (!owners) return
+  owners.delete(owner)
+  const themes = [...owners.values()]
+  const currentTheme = themes[themes.length - 1]
+  if (currentTheme) {
+    document.documentElement.dataset.tanstackDevtoolsTheme = currentTheme
+    return
+  }
+  const previousTheme = previousThemeAttributes.get(document)
+  if (previousTheme === null || previousTheme === undefined) {
+    delete document.documentElement.dataset.tanstackDevtoolsTheme
+  } else {
+    document.documentElement.dataset.tanstackDevtoolsTheme = previousTheme
+  }
+  themeDocumentOwners.delete(document)
+  previousThemeAttributes.delete(document)
+}
 
 export default function DevTools() {
   const { settings } = createDevtoolsSettings()
+  const { state } = createDevtoolsState()
   const { setHeight } = createHeight()
   const { persistOpen, setPersistOpen } = createPersistOpen()
   const [rootEl, setRootEl] = createSignal<HTMLDivElement>()
@@ -30,173 +71,102 @@ export default function DevTools() {
     settings().defaultOpen || persistOpen(),
   )
   const pip = createPiPWindow()
-  let panelRef: HTMLDivElement | undefined = undefined
+  let panelRef: HTMLDivElement | undefined
   const [isResizing, setIsResizing] = createSignal(false)
+  const [isCollapsed, setIsCollapsed] = createSignal(false)
+  const [showMarketplace, setShowMarketplace] = createSignal(false)
+  const themeOwner = Symbol('tanstack-devtools-theme')
+
+  const updateHeight = (nextHeight: number) => {
+    setHeight(nextHeight)
+    setIsOpen(nextHeight >= PANEL_CLOSE_THRESHOLD)
+  }
 
   const toggleOpen = () => {
-    if (pip().pipWindow) {
-      return
-    }
-    const open = isOpen()
-    const newState = !open
+    if (pip().pipWindow) return
+    const newState = !isOpen()
+    if (newState) setIsCollapsed(false)
     setIsOpen(newState)
     setPersistOpen(newState)
-
-    // Emit event when user toggles devtools
     devtoolsEventClient.emit('trigger-toggled', { isOpen: newState })
   }
 
-  // Listen for trigger-toggled events to control devtools
   createEffect(() => {
     const unsubscribe = devtoolsEventClient.on('trigger-toggled', (event) => {
-      if (pip().pipWindow) {
-        return
-      }
+      if (pip().pipWindow) return
       const payload = event.payload as unknown as { isOpen: boolean }
-      const shouldBeOpen = payload.isOpen
-      if (shouldBeOpen !== isOpen()) {
-        setIsOpen(shouldBeOpen)
-        setPersistOpen(shouldBeOpen)
+      if (payload.isOpen) setIsCollapsed(false)
+      if (payload.isOpen !== isOpen()) {
+        setIsOpen(payload.isOpen)
+        setPersistOpen(payload.isOpen)
       }
     })
-
     onCleanup(unsubscribe)
   })
-  // Used to resize the panel
+
   const handleDragStart = (
     panelElement: HTMLDivElement | undefined,
     startEvent: MouseEvent,
   ) => {
-    if (startEvent.button !== 0) return // Only allow left click for drag
-    if (!panelElement) return
+    if (startEvent.button !== 0 || !panelElement) return
     setIsResizing(true)
-
     const dragInfo = {
       originalHeight: panelElement.getBoundingClientRect().height,
       pageY: startEvent.pageY,
     }
-
     const run = (moveEvent: MouseEvent) => {
       const delta = dragInfo.pageY - moveEvent.pageY
       const newHeight =
         settings().panelLocation === 'bottom'
           ? dragInfo.originalHeight + delta
           : dragInfo.originalHeight - delta
-
-      setHeight(newHeight)
-
-      if (newHeight < 70) {
-        setIsOpen(false)
-      } else {
-        setIsOpen(true)
-      }
+      updateHeight(newHeight)
     }
-
-    const unsub = () => {
+    const stop = () => {
       setIsResizing(false)
       document.removeEventListener('mousemove', run)
-      document.removeEventListener('mouseUp', unsub)
+      document.removeEventListener('mouseup', stop)
     }
-
     document.addEventListener('mousemove', run)
-    document.addEventListener('mouseup', unsub)
+    document.addEventListener('mouseup', stop)
   }
 
-  // Handle resizing and padding adjustments
   createEffect(() => {
-    if (isOpen()) {
-      const previousValue = rootEl()?.parentElement?.style.paddingBottom
-
-      const run = () => {
-        if (!panelRef) return
-        // const containerHeight = panelRef.getBoundingClientRect().height
-        if (rootEl()?.parentElement) {
-          setRootEl((prev) => {
-            if (prev?.parentElement) {
-              // prev.parentElement.style.paddingBottom = `${containerHeight}px`
-            }
-            return prev
-          })
-        }
-      }
-
-      run()
-
-      if (typeof window !== 'undefined') {
-        ;(pip().pipWindow ?? window).addEventListener('resize', run)
-
-        return () => {
-          ;(pip().pipWindow ?? window).removeEventListener('resize', run)
-          if (rootEl()?.parentElement && typeof previousValue === 'string') {
-            setRootEl((prev) => {
-              // prev!.parentElement!.style.paddingBottom = previousValue
-              return prev
-            })
-          }
-        }
-      }
-    } else {
-      // Reset padding when devtools are closed
-      if (rootEl()?.parentElement) {
-        setRootEl((prev) => {
-          if (prev?.parentElement) {
-            prev.parentElement.removeAttribute('style')
-          }
-          return prev
-        })
-      }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen()) toggleOpen()
     }
-    return
-  })
-
-  createEffect(() => {
-    window.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape' && isOpen()) {
-        toggleOpen()
-      }
-    })
+    window.addEventListener('keydown', onKeyDown)
+    onCleanup(() => window.removeEventListener('keydown', onKeyDown))
   })
   createDisableTabbing(isOpen)
   createEffect(() => {
-    if (rootEl()) {
-      const el = rootEl()
-      const fontSize = getComputedStyle(el!).fontSize
-      el?.style.setProperty('--tsrd-font-size', fontSize)
+    const element = rootEl()
+    if (element) {
+      element.style.setProperty(
+        '--tsrd-font-size',
+        getComputedStyle(element).fontSize,
+      )
     }
   })
   createEffect(() => {
     const isEditableTarget = (element: Element | null) => {
       if (!element || !(element instanceof HTMLElement)) return false
       if (element.isContentEditable) return true
-      const tagName = element.tagName
-      if (
-        tagName === 'INPUT' ||
-        tagName === 'TEXTAREA' ||
-        tagName === 'SELECT'
-      ) {
-        return true
-      }
+      if (['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName)) return true
       return element.getAttribute('role') === 'textbox'
     }
-
-    const permutations = getHotkeyPermutations(settings().openHotkey)
-
-    for (const permutation of permutations) {
+    for (const permutation of getHotkeyPermutations(settings().openHotkey)) {
       createShortcut(permutation, () => {
-        if (isEditableTarget(document.activeElement)) return
-        toggleOpen()
+        if (!isEditableTarget(document.activeElement)) toggleOpen()
       })
     }
   })
 
   const { theme } = createTheme()
-
   createEffect(() => {
-    if (typeof document === 'undefined') {
-      return
-    }
-
-    document.documentElement.dataset.tanstackDevtoolsTheme = theme()
+    const activeDocument = pip().pipWindow?.document ?? document
+    setDocumentTheme(activeDocument, themeOwner, theme())
+    onCleanup(() => clearDocumentTheme(activeDocument, themeOwner))
   })
 
   return (
@@ -213,13 +183,31 @@ export default function DevTools() {
             }
           >
             <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
-            <MainPanel isResizing={isResizing} isOpen={isOpen}>
+            <MainPanel
+              isResizing={isResizing}
+              isOpen={isOpen}
+              isCollapsed={isCollapsed}
+              toggleCollapsed={() => setIsCollapsed((collapsed) => !collapsed)}
+            >
               <ContentPanel
                 ref={(ref) => (panelRef = ref)}
-                handleDragStart={(e) => handleDragStart(panelRef, e)}
+                handleDragStart={(event) => handleDragStart(panelRef, event)}
+                handleHeightChange={updateHeight}
               >
-                <Tabs toggleOpen={toggleOpen} />
-                <TabContent isOpen={isOpen()} />
+                <WorkbenchHeader
+                  showMarketplace={showMarketplace}
+                  setShowMarketplace={setShowMarketplace}
+                  toggleOpen={toggleOpen}
+                />
+                <Show
+                  when={state().activeTab === 'plugins' && !showMarketplace()}
+                >
+                  <PluginsStrip isOpen={isOpen} />
+                </Show>
+                <TabContent
+                  isOpen={isOpen()}
+                  showMarketplace={showMarketplace()}
+                />
               </ContentPanel>
             </MainPanel>
           </Show>
diff --git a/packages/devtools/src/styles/tokens.ts b/packages/devtools/src/styles/tokens.ts
deleted file mode 100644
index 9d247cf1..00000000
--- a/packages/devtools/src/styles/tokens.ts
+++ /dev/null
@@ -1,305 +0,0 @@
-export const tokens = {
-  colors: {
-    inherit: 'inherit',
-    current: 'currentColor',
-    transparent: 'transparent',
-    black: '#000000',
-    white: '#ffffff',
-    neutral: {
-      50: '#f9fafb',
-      100: '#f2f4f7',
-      200: '#eaecf0',
-      300: '#d0d5dd',
-      400: '#98a2b3',
-      500: '#667085',
-      600: '#475467',
-      700: '#344054',
-      800: '#1d2939',
-      900: '#101828',
-    },
-    darkGray: {
-      50: '#525c7a',
-      100: '#49536e',
-      200: '#414962',
-      300: '#394056',
-      400: '#313749',
-      500: '#292e3d',
-      600: '#212530',
-      700: '#191c24',
-      800: '#111318',
-      900: '#0b0d10',
-    },
-    gray: {
-      50: '#f9fafb',
-      100: '#f2f4f7',
-      200: '#eaecf0',
-      300: '#d0d5dd',
-      400: '#98a2b3',
-      500: '#667085',
-      600: '#475467',
-      700: '#344054',
-      800: '#1d2939',
-      900: '#101828',
-    },
-    blue: {
-      25: '#F5FAFF',
-      50: '#EFF8FF',
-      100: '#D1E9FF',
-      200: '#B2DDFF',
-      300: '#84CAFF',
-      400: '#53B1FD',
-      500: '#2E90FA',
-      600: '#1570EF',
-      700: '#175CD3',
-      800: '#1849A9',
-      900: '#194185',
-    },
-    green: {
-      25: '#F6FEF9',
-      50: '#ECFDF3',
-      100: '#D1FADF',
-      200: '#A6F4C5',
-      300: '#6CE9A6',
-      400: '#32D583',
-      500: '#12B76A',
-      600: '#039855',
-      700: '#027A48',
-      800: '#05603A',
-      900: '#054F31',
-    },
-    red: {
-      50: '#fef2f2',
-      100: '#fee2e2',
-      200: '#fecaca',
-      300: '#fca5a5',
-      400: '#f87171',
-      500: '#ef4444',
-      600: '#dc2626',
-      700: '#b91c1c',
-      800: '#991b1b',
-      900: '#7f1d1d',
-      950: '#450a0a',
-    },
-    yellow: {
-      25: '#FFFCF5',
-      50: '#FFFAEB',
-      100: '#FEF0C7',
-      200: '#FEDF89',
-      300: '#FEC84B',
-      400: '#FDB022',
-      500: '#F79009',
-      600: '#DC6803',
-      700: '#B54708',
-      800: '#93370D',
-      900: '#7A2E0E',
-    },
-    purple: {
-      25: '#FAFAFF',
-      50: '#F4F3FF',
-      100: '#EBE9FE',
-      200: '#D9D6FE',
-      300: '#BDB4FE',
-      400: '#9B8AFB',
-      500: '#7A5AF8',
-      600: '#6938EF',
-      700: '#5925DC',
-      800: '#4A1FB8',
-      900: '#3E1C96',
-    },
-    teal: {
-      25: '#F6FEFC',
-      50: '#F0FDF9',
-      100: '#CCFBEF',
-      200: '#99F6E0',
-      300: '#5FE9D0',
-      400: '#2ED3B7',
-      500: '#15B79E',
-      600: '#0E9384',
-      700: '#107569',
-      800: '#125D56',
-      900: '#134E48',
-    },
-    pink: {
-      25: '#fdf2f8',
-      50: '#fce7f3',
-      100: '#fbcfe8',
-      200: '#f9a8d4',
-      300: '#f472b6',
-      400: '#ec4899',
-      500: '#db2777',
-      600: '#be185d',
-      700: '#9d174d',
-      800: '#831843',
-      900: '#500724',
-    },
-    cyan: {
-      25: '#ecfeff',
-      50: '#cffafe',
-      100: '#a5f3fc',
-      200: '#67e8f9',
-      300: '#22d3ee',
-      400: '#06b6d4',
-      500: '#0891b2',
-      600: '#0e7490',
-      700: '#155e75',
-      800: '#164e63',
-      900: '#083344',
-    },
-  },
-  alpha: {
-    100: 'ff',
-    90: 'e5',
-    80: 'cc',
-    70: 'b3',
-    60: '99',
-    50: '80',
-    40: '66',
-    30: '4d',
-    20: '33',
-    10: '1a',
-    0: '00',
-  },
-  font: {
-    size: {
-      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',
-      xs: 'calc(var(--tsrd-font-size) * 0.75)',
-      sm: 'calc(var(--tsrd-font-size) * 0.875)',
-      md: 'var(--tsrd-font-size)',
-      lg: 'calc(var(--tsrd-font-size) * 1.125)',
-      xl: 'calc(var(--tsrd-font-size) * 1.25)',
-      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',
-      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',
-      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',
-      '5xl': 'calc(var(--tsrd-font-size) * 3)',
-      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',
-      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',
-      '8xl': 'calc(var(--tsrd-font-size) * 6)',
-      '9xl': 'calc(var(--tsrd-font-size) * 8)',
-    },
-    lineHeight: {
-      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',
-      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',
-      xs: 'calc(var(--tsrd-font-size) * 1)',
-      sm: 'calc(var(--tsrd-font-size) * 1.25)',
-      md: 'calc(var(--tsrd-font-size) * 1.5)',
-      lg: 'calc(var(--tsrd-font-size) * 1.75)',
-      xl: 'calc(var(--tsrd-font-size) * 2)',
-      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',
-      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',
-      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',
-      '5xl': 'calc(var(--tsrd-font-size) * 3)',
-      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',
-      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',
-      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',
-      '9xl': 'calc(var(--tsrd-font-size) * 4)',
-    },
-    weight: {
-      thin: '100',
-      extralight: '200',
-      light: '300',
-      normal: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-      black: '900',
-    },
-    fontFamily: {
-      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',
-      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,
-    },
-  },
-  breakpoints: {
-    xs: '320px',
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-  },
-  border: {
-    radius: {
-      none: '0px',
-      xs: 'calc(var(--tsrd-font-size) * 0.125)',
-      sm: 'calc(var(--tsrd-font-size) * 0.25)',
-      md: 'calc(var(--tsrd-font-size) * 0.375)',
-      lg: 'calc(var(--tsrd-font-size) * 0.5)',
-      xl: 'calc(var(--tsrd-font-size) * 0.75)',
-      '2xl': 'calc(var(--tsrd-font-size) * 1)',
-      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',
-      full: '9999px',
-    },
-  },
-  size: {
-    0: '0px',
-    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',
-    0.5: 'calc(var(--tsrd-font-size) * 0.125)',
-    1: 'calc(var(--tsrd-font-size) * 0.25)',
-    1.5: 'calc(var(--tsrd-font-size) * 0.375)',
-    2: 'calc(var(--tsrd-font-size) * 0.5)',
-    2.5: 'calc(var(--tsrd-font-size) * 0.625)',
-    3: 'calc(var(--tsrd-font-size) * 0.75)',
-    3.5: 'calc(var(--tsrd-font-size) * 0.875)',
-    4: 'calc(var(--tsrd-font-size) * 1)',
-    4.5: 'calc(var(--tsrd-font-size) * 1.125)',
-    5: 'calc(var(--tsrd-font-size) * 1.25)',
-    5.5: 'calc(var(--tsrd-font-size) * 1.375)',
-    6: 'calc(var(--tsrd-font-size) * 1.5)',
-    6.5: 'calc(var(--tsrd-font-size) * 1.625)',
-    7: 'calc(var(--tsrd-font-size) * 1.75)',
-    8: 'calc(var(--tsrd-font-size) * 2)',
-    9: 'calc(var(--tsrd-font-size) * 2.25)',
-    10: 'calc(var(--tsrd-font-size) * 2.5)',
-    11: 'calc(var(--tsrd-font-size) * 2.75)',
-    12: 'calc(var(--tsrd-font-size) * 3)',
-    14: 'calc(var(--tsrd-font-size) * 3.5)',
-    16: 'calc(var(--tsrd-font-size) * 4)',
-    20: 'calc(var(--tsrd-font-size) * 5)',
-    24: 'calc(var(--tsrd-font-size) * 6)',
-    28: 'calc(var(--tsrd-font-size) * 7)',
-    32: 'calc(var(--tsrd-font-size) * 8)',
-    36: 'calc(var(--tsrd-font-size) * 9)',
-    40: 'calc(var(--tsrd-font-size) * 10)',
-    44: 'calc(var(--tsrd-font-size) * 11)',
-    48: 'calc(var(--tsrd-font-size) * 12)',
-    52: 'calc(var(--tsrd-font-size) * 13)',
-    56: 'calc(var(--tsrd-font-size) * 14)',
-    60: 'calc(var(--tsrd-font-size) * 15)',
-    64: 'calc(var(--tsrd-font-size) * 16)',
-    72: 'calc(var(--tsrd-font-size) * 18)',
-    80: 'calc(var(--tsrd-font-size) * 20)',
-    96: 'calc(var(--tsrd-font-size) * 24)',
-  },
-  shadow: {
-    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,
-    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,
-    md: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,
-    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,
-    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>
-      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,
-    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>
-      `0 25px 50px -12px ${color}` as const,
-    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>
-      `inset 0 2px 4px 0 ${color}` as const,
-    none: () => `none` as const,
-  },
-  zIndices: {
-    hide: -1,
-    auto: 'auto',
-    base: 0,
-    docked: 10,
-    dropdown: 1000,
-    sticky: 1100,
-    banner: 1200,
-    overlay: 1300,
-    modal: 1400,
-    popover: 1500,
-    skipLink: 1600,
-    toast: 1700,
-    tooltip: 1800,
-  },
-} as const
diff --git a/packages/devtools/src/styles/use-styles.ts b/packages/devtools/src/styles/use-styles.ts
index e01337fe..feba051e 100644
--- a/packages/devtools/src/styles/use-styles.ts
+++ b/packages/devtools/src/styles/use-styles.ts
@@ -1,14 +1,40 @@
 import * as goober from 'goober'
+import { resolveSemanticTheme } from '@tanstack/devtools-ui/internal'
 import { createEffect, createSignal } from 'solid-js'
 import { createTheme } from '../context/use-devtools-context'
-import { tokens } from './tokens'
+import {
+  PLUGINS_STRIP_HEIGHT,
+  WORKBENCH_HEADER_HEIGHT,
+} from '../utils/constants'
 import type { TanStackDevtoolsConfig } from '../context/devtools-context'
 import type { Accessor } from 'solid-js'
 import type { DevtoolsStore } from '../context/devtools-store'
 
+type SemanticRamp = Record<
+  50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
+  string
+>
+
 const mSecondsToCssSeconds = (mSeconds: number) =>
   `${(mSeconds / 1000).toFixed(2)}s`
 
+const WORKBENCH_GEOMETRY_STYLE_ID = 'tanstack-devtools-workbench-geometry'
+
+export const ensureWorkbenchGeometryStyles = (targetDocument: Document) => {
+  if (targetDocument.getElementById(WORKBENCH_GEOMETRY_STYLE_ID)) return
+  const style = targetDocument.createElement('style')
+  style.id = WORKBENCH_GEOMETRY_STYLE_ID
+  style.textContent = `
+@media (max-width: 360px) {
+  .tsd-workbench-wordmark { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tsd-workbench-secondary-tabs, .tsd-workbench-secondary-tabs > * { transition: none !important; }
+  .tsd-motion-safe { animation: none !important; transition: none !important; transform: none !important; }
+}`
+  targetDocument.head.appendChild(style)
+}
+
 const fadeIn = goober.keyframes`
   from {
     opacity: 0;
@@ -49,18 +75,6 @@ const statusFadeIn = goober.keyframes`
   }
 `
 
-const iconPop = goober.keyframes`
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-  }
-`
-
 const spin = goober.keyframes`
   to {
     transform: rotate(360deg);
@@ -80,13 +94,77 @@ const sparkle = goober.keyframes`
 `
 
 const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
-  const { colors, font, size, border } = tokens
-  const { fontFamily, size: fontSize } = font
+  const semantic = resolveSemanticTheme(theme)
+  const size = {
+    2: semantic.space[2],
+    3: semantic.space[3],
+    10: '40px',
+    48: '192px',
+  } as const
+  const colors = {
+    black: semantic.color.text.primary,
+    white: semantic.color.surface.elevated,
+    darkGray: {
+      600: semantic.color.surface.elevated,
+      700: semantic.color.surface.workspace,
+      800: semantic.color.surface.subtle,
+      900: semantic.color.surface.app,
+    } as SemanticRamp,
+    gray: {
+      50: semantic.color.surface.subtle,
+      100: semantic.color.surface.subtle,
+      200: semantic.color.border.decorative,
+      300: semantic.color.border.control,
+      400: semantic.color.text.muted,
+      500: semantic.color.text.muted,
+      600: semantic.color.text.secondary,
+      700: semantic.color.text.secondary,
+      800: semantic.color.text.primary,
+      900: semantic.color.text.primary,
+    } as SemanticRamp,
+    blue: Object.fromEntries(
+      [100, 300, 400, 500, 600, 700, 800, 900].map((step) => [
+        step,
+        step === 100
+          ? semantic.color.status.info.subtleFill
+          : step >= 700
+            ? semantic.color.status.info.text
+            : semantic.color.status.info.border,
+      ]),
+    ) as SemanticRamp,
+    green: Object.fromEntries(
+      [100, 300, 400, 500, 600, 700, 900].map((step) => [
+        step,
+        step === 100
+          ? semantic.color.status.success.subtleFill
+          : semantic.color.status.success.text,
+      ]),
+    ) as SemanticRamp,
+    red: Object.fromEntries(
+      [100, 400, 500, 600, 700].map((step) => [
+        step,
+        step === 100
+          ? semantic.color.status.error.subtleFill
+          : semantic.color.status.error.text,
+      ]),
+    ) as SemanticRamp,
+    purple: {
+      200: semantic.color.status.neutral.subtleFill,
+      800: semantic.color.status.neutral.text,
+    } as SemanticRamp,
+  }
+  const fontFamily = { sans: semantic.font.body, mono: semantic.font.mono }
+  const fontSize = {
+    xs: semantic.type.bodyXs.size,
+    sm: semantic.type.bodySm.size,
+  }
   const css = goober.css
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   return {
     seoTabContainer: css`
+      font-family: ${semantic.font.body};
+      font-weight: ${semantic.type.bodySm.weight};
       padding: 0;
       margin: 0 auto;
       background: ${t(colors.white, colors.darkGray[700])};
@@ -101,6 +179,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       overflow-y: auto;
     `,
     seoTabTitle: css`
+      font-family: ${semantic.font.display};
       font-size: 1.25rem;
       font-weight: 600;
       color: ${t(colors.gray[900], colors.gray[100])};
@@ -119,31 +198,20 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       margin-bottom: 2rem;
       border-radius: 0.75rem;
     `,
-    seoSubNav: css`
+    seoWorkspace: css`
       display: flex;
-      flex-direction: row;
-      gap: 0;
-      margin-bottom: 1rem;
-      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
-    `,
-    seoSubNavLabel: css`
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: ${t(colors.gray[600], colors.gray[400])};
-      background: none;
-      border: none;
-      border-bottom: 2px solid transparent;
-      margin-bottom: -1px;
-      cursor: pointer;
-      font-family: inherit;
-      &:hover {
-        color: ${t(colors.gray[800], colors.gray[200])};
-      }
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
     `,
-    seoSubNavLabelActive: css`
-      color: ${t(colors.gray[900], colors.gray[100])};
-      border-bottom-color: ${t(colors.gray[900], colors.gray[100])};
+    seoContent: css`
+      flex: 1 1 auto;
+      height: auto;
+      min-height: 0;
+      overflow-y: auto;
     `,
     seoPreviewSection: css`
       display: flex;
@@ -162,7 +230,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding: 12px 10px;
       background: ${t(colors.white, colors.darkGray[900])};
       margin-bottom: 0;
-      box-shadow: 0 1px 3px ${t('rgba(0,0,0,0.05)', 'rgba(0,0,0,0.1)')};
+      box-shadow: ${semantic.shadow.sm};
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -175,13 +243,13 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0;
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${semantic.color.text.primary};
     `,
     seoPreviewImage: css`
       max-width: 100%;
       border-radius: 6px;
       margin-bottom: 6px;
-      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.06)')};
+      box-shadow: ${semantic.shadow.xs};
       height: 160px;
       object-fit: cover;
     `,
@@ -189,7 +257,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: 0.9rem;
       font-weight: 600;
       margin-bottom: 4px;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      color: ${semantic.color.text.primary};
     `,
     seoPreviewDesc: css`
       color: ${t(colors.gray[600], colors.gray[400])};
@@ -241,7 +309,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0.5rem;
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${semantic.color.text.primary};
     `,
     serpSnippet: css`
       border: 1px solid ${t(colors.gray[100], colors.gray[800])};
@@ -250,7 +318,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       background: ${t(colors.white, colors.darkGray[900])};
       max-width: 600px;
       font-family: ${fontFamily.sans};
-      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+      box-shadow: ${semantic.shadow.xs};
     `,
     serpSnippetMobile: css`
       border: 1px solid ${t(colors.gray[100], colors.gray[800])};
@@ -259,7 +327,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       background: ${t(colors.white, colors.darkGray[900])};
       max-width: 380px;
       font-family: ${fontFamily.sans};
-      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+      box-shadow: ${semantic.shadow.xs};
     `,
     serpSnippetDescMobile: css`
       font-size: 0.875rem;
@@ -308,7 +376,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     `,
     serpSnippetSiteName: css`
       font-size: 0.875rem;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      color: ${semantic.color.text.primary};
       line-height: 1.4;
       margin: 0;
     `,
@@ -321,7 +389,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     serpSnippetTitle: css`
       font-size: 1.25rem;
       font-weight: 400;
-      color: ${t('#1a0dab', '#8ab4f8')};
+      color: ${semantic.color.text.link};
       margin: 0 0 4px 0;
       line-height: 1.3;
     `,
@@ -370,15 +438,20 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     ) => css`
       direction: ltr;
       position: fixed;
-      overflow-y: hidden;
-      overflow-x: hidden;
+      overflow: visible;
       ${panelLocation}: 0;
-      right: 0;
+      inset-inline: 0;
       z-index: 99999;
-      width: 100%;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      box-sizing: border-box;
       ${isDetached ? '' : 'max-height: 90%;'}
-      border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
-      transform-origin: top;
+      border: 0;
+      box-shadow: none;
+      transition: transform 160ms ease-out;
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 0ms;
+      }
     `,
     devtoolsPanelContainerVisibility: (isOpen: boolean) => {
       return css`
@@ -394,48 +467,292 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
 
       return css`
-        transition: all 0.4s ease;
-      `
-    },
-    devtoolsPanelContainerAnimation: (
-      isOpen: boolean,
-      height: number,
-      panelLocation: TanStackDevtoolsConfig['panelLocation'],
-    ) => {
-      if (isOpen) {
-        return css`
-          pointer-events: auto;
-          transform: translateY(0);
-        `
-      }
-      return css`
-        pointer-events: none;
-        transform: translateY(${panelLocation === 'top' ? -height : height}px);
+        transition: transform 160ms ease-out;
+        @media (prefers-reduced-motion: reduce) {
+          transition-duration: 0ms;
+        }
       `
     },
+    devtoolsDrawerContent: css`
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+    `,
     devtoolsPanel: css`
-      display: flex;
+      display: grid;
       font-size: ${fontSize.sm};
       font-family: ${fontFamily.sans};
       background-color: ${t(colors.white, colors.darkGray[700])};
       color: ${t(colors.gray[900], colors.gray[300])};
-      width: w-screen;
-      flex-direction: row;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      grid-template-rows: ${WORKBENCH_HEADER_HEIGHT}px minmax(0, 1fr);
+      &:has([data-testid='plugins-strip']) {
+        grid-template-rows:
+          ${WORKBENCH_HEADER_HEIGHT}px ${PLUGINS_STRIP_HEIGHT}px
+          minmax(0, 1fr);
+      }
       overflow-x: hidden;
       overflow-y: hidden;
       height: 100%;
     `,
+    workbenchHeader: css`
+      display: flex;
+      align-items: center;
+      gap: ${semantic.gap.control};
+      min-width: 0;
+      height: ${WORKBENCH_HEADER_HEIGHT}px;
+      padding: 0 ${semantic.space[2]};
+      box-sizing: border-box;
+      background: ${semantic.color.surface.brand};
+      color: ${semantic.color.text.mutedOnBrand};
+      & button {
+        min-width: 28px;
+        height: 100%;
+        box-sizing: border-box;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+      }
+      & button:hover:not([data-tsd-selected='true']) {
+        background: ${semantic.color.state.hover};
+      }
+      & button:focus-visible {
+        outline: 2px solid ${semantic.color.border.focus};
+        outline-offset: 2px;
+      }
+      @media (max-width: 430px) {
+        gap: ${semantic.gap.tight};
+        padding-inline: ${semantic.space[2]};
+        & button {
+          min-width: 24px;
+        }
+      }
+      @media (max-width: 360px) {
+        gap: 2px;
+        padding-inline: 4px;
+        & button {
+          padding-inline: 3px;
+          font-size: 11px;
+        }
+      }
+    `,
+    workbenchLogo: css`
+      display: inline-flex;
+      width: 24px;
+      height: 24px;
+      flex: 0 0 24px;
+      & > img {
+        width: 24px;
+        height: 24px;
+        object-fit: contain;
+        filter: ${theme === 'dark' ? 'brightness(2.5) contrast(1.1)' : 'none'};
+      }
+      @media (max-width: 360px) {
+        width: 20px;
+        height: 20px;
+        flex-basis: 20px;
+        & > img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    `,
+    workbenchDestinations: css`
+      display: inline-flex;
+      align-items: stretch;
+      align-self: stretch;
+      gap: 0;
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+    `,
+    workbenchNavButton: css`
+      margin: 0;
+      padding-inline: 12px;
+      &[data-tsd-selected='true'] {
+        background: ${semantic.color.surface.workspace};
+        color: ${semantic.color.text.primary};
+      }
+      @media (max-width: 361px) {
+        padding-inline: 4px;
+      }
+    `,
+    workbenchActions: css`
+      display: inline-flex;
+      align-items: center;
+      gap: ${semantic.gap.tight};
+      height: 100%;
+      margin-left: auto;
+      @media (max-width: 360px) {
+        gap: 0;
+      }
+    `,
+    workbenchActionButton: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: ${WORKBENCH_HEADER_HEIGHT}px;
+      min-width: ${WORKBENCH_HEADER_HEIGHT}px;
+      height: ${WORKBENCH_HEADER_HEIGHT}px;
+      flex: 0 0 ${WORKBENCH_HEADER_HEIGHT}px;
+      padding: 0;
+      &[data-tsd-selected='true'] {
+        background: ${semantic.color.surface.workspace};
+        color: ${semantic.color.text.primary};
+      }
+      @media (max-width: 360px) {
+        width: 32px;
+        min-width: 32px;
+        flex-basis: 32px;
+      }
+    `,
+    workbenchWordmark: css`
+      white-space: nowrap;
+      @media (max-width: 430px) {
+        display: none;
+      }
+    `,
+    workbenchSecondaryTabs: css`
+      display: flex;
+      align-items: center;
+      gap: 0;
+      min-width: 0;
+      box-sizing: border-box;
+      padding-block: 6px;
+      padding-inline-start: ${semantic.space[2]};
+      padding-inline-end: ${semantic.space[2]};
+      scroll-padding-inline-start: ${semantic.space[2]};
+      scroll-padding-inline-end: ${semantic.space[2]};
+      height: ${PLUGINS_STRIP_HEIGHT}px;
+      min-height: ${PLUGINS_STRIP_HEIGHT}px;
+      flex: 0 0 ${PLUGINS_STRIP_HEIGHT}px;
+      background: ${semantic.color.surface.workspace};
+      overflow-x: auto;
+      overflow-y: hidden;
+      white-space: nowrap;
+      & > * {
+        transform: none;
+        transition: none;
+      }
+      & > :last-child {
+        scroll-margin-inline-end: ${semantic.space[2]};
+      }
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 0ms;
+      }
+    `,
+    workbenchSecondaryTab: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 32px;
+      padding: ${semantic.padding.controlBlock}
+        ${semantic.padding.controlInline};
+      border: 1px solid transparent;
+      border-radius: ${semantic.radius.control};
+      background: transparent;
+      color: ${semantic.color.text.secondary};
+      font-family: ${semantic.font.body};
+      font-size: ${semantic.type.labelSm.size};
+      font-weight: ${semantic.type.labelSm.weight};
+      line-height: ${semantic.type.labelSm.lineHeight};
+      letter-spacing: ${semantic.type.labelSm.tracking};
+      cursor: pointer;
+      flex: 0 0 auto;
+      appearance: none;
+      &:hover {
+        background: ${semantic.color.state.hover};
+        color: ${semantic.color.text.primary};
+      }
+      &[data-tsd-selected='true'] {
+        background: ${semantic.color.state.selectionFill};
+        border-color: ${semantic.color.state.selectionFill};
+        color: ${semantic.color.state.selectionText};
+      }
+      &:focus-visible {
+        outline: 2px solid ${semantic.color.border.focus};
+        outline-offset: 2px;
+      }
+    `,
+    pluginTitleText: css`
+      margin: 0;
+      color: inherit;
+      font-family: ${semantic.font.body};
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+    `,
     dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`
       position: absolute;
       left: 0;
-      ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;
+      ${panelLocation === 'bottom' ? 'top' : 'bottom'}: -10px;
       width: 100%;
-      height: 4px;
+      height: 24px;
       cursor: row-resize;
       user-select: none;
       z-index: 100000;
+      background-color: transparent;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 100%;
+        top: 10px;
+        height: 4px;
+        background-color: transparent;
+      }
+      &:hover::after,
+      &:focus-visible::after {
+        background-color: ${semantic.color.border.control};
+      }
+    `,
+    drawerToggle: (
+      panelLocation: TanStackDevtoolsConfig['panelLocation'],
+    ) => css`
+      position: absolute;
+      ${panelLocation === 'bottom' ? 'top' : 'bottom'}: -28px;
+      inset-inline-end: 7%;
+      z-index: 100001;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 28px;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      border-radius: ${semantic.radius.control};
+      background: ${semantic.color.surface.brand};
+      box-shadow: none;
+      color: ${semantic.color.text.mutedOnBrand};
+      cursor: pointer;
       &:hover {
-        background-color: ${t(colors.gray[400], colors.gray[500])};
+        background: ${semantic.color.state.hover};
+      }
+      &:focus-visible {
+        outline: 2px solid ${semantic.color.border.focus};
+        outline-offset: 2px;
+      }
+    `,
+    drawerToggleIcon: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      transition: transform 160ms ease-out;
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 0ms;
       }
     `,
 
@@ -450,17 +767,9 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       border: 0;
       align-items: center;
       padding: 0;
-      font-size: ${font.size.xs};
+      font-size: ${fontSize.xs};
       cursor: pointer;
-      transition: all 0.25s ease-out;
-      & > img {
-        width: 56px;
-        height: 56px;
-        transition: all 0.3s ease;
-        outline-offset: 2px;
-        border-radius: ${border.radius.full};
-        outline: 2px solid transparent;
-      }
+      transition: opacity 0.25s ease-out;
       &:hide-until-hover {
         opacity: 0;
         pointer-events: none;
@@ -471,9 +780,33 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         pointer-events: auto;
         visibility: visible;
       }
-      & > img:focus-visible,
-      img:hover {
-        outline: 2px solid ${t(colors.black, colors.black)};
+    `,
+    mainCloseBtnDefault: css`
+      background: ${semantic.color.surface.brand};
+      width: 56px;
+      height: 56px;
+      justify-content: center;
+      border-radius: 12px;
+      box-shadow: ${semantic.shadow.sm};
+      transition:
+        opacity 0.25s ease-out,
+        background-color 0.2s ease-out,
+        box-shadow 0.2s ease-out;
+      & > img {
+        width: 48px;
+        height: 48px;
+        object-fit: contain;
+        transition: all 0.3s ease;
+        border-radius: 8px;
+        outline: none;
+      }
+      &:hover {
+        background: ${semantic.color.state.hover};
+        box-shadow: ${semantic.shadow.overlay};
+      }
+      &:focus-visible {
+        outline: 2px solid ${semantic.color.border.focus};
+        outline-offset: 2px;
       }
     `,
     mainCloseBtnFloating: css`
@@ -600,7 +933,11 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     tabContent: css`
       transition: all 0.2s ease-in-out;
       width: 100%;
+      max-width: 100%;
+      min-width: 0;
       height: 100%;
+      box-sizing: border-box;
+      overflow-x: hidden;
     `,
     pluginsTabPanel: css`
       display: flex;
@@ -677,23 +1014,15 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       height: 100%;
       min-width: 0;
       min-height: 0;
-
-      & > * {
-        min-width: 0;
-        min-height: 0;
-        width: 100%;
-        height: 100%;
-      }
-
-      & > * > * {
-        min-width: 0;
-        min-height: 0;
-        width: 100%;
-        height: 100%;
-      }
-
-      &:not(:last-child) {
-        border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    `,
+    pluginPaneSeparator: css`
+      flex: 0 0 1px;
+      align-self: stretch;
+      background: ${semantic.color.border.decorative};
+      @media (forced-colors: active) {
+        background: CanvasText;
       }
     `,
 
@@ -761,6 +1090,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
     `,
     noPluginsFallbackTitle: css`
+      font-family: ${semantic.font.display};
       font-size: 1.5rem;
       font-weight: 600;
       color: ${t(colors.gray[900], colors.gray[100])};
@@ -781,6 +1111,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       border-radius: 0.5rem;
     `,
     noPluginsSuggestionsTitle: css`
+      font-family: ${semantic.font.display};
       font-size: 1.125rem;
       font-weight: 600;
       color: ${t(colors.gray[900], colors.gray[100])};
@@ -823,7 +1154,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-weight: 600;
       color: ${t(colors.gray[900], colors.gray[100])};
       margin: 0;
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-family: ${semantic.font.mono};
     `,
     noPluginsSuggestionSource: css`
       font-size: 0.8rem;
@@ -886,19 +1217,29 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
 
     // Plugin Marketplace Styles (for "Add More" tab)
     pluginMarketplace: css`
+      font-family: ${semantic.font.body};
+      color: ${semantic.color.text.primary};
       width: 100%;
+      min-width: 0;
+      max-width: 100%;
+      box-sizing: border-box;
+      height: 100%;
+      min-height: 0;
       overflow-y: auto;
       padding: 2rem;
-      background: ${t(
-        'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
-        'linear-gradient(135deg, #1a1d23 0%, #13161a 100%)',
-      )};
+      background: ${semantic.color.surface.workspace};
       animation: ${fadeIn} 0.3s ease;
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+      @media (max-width: 430px) {
+        padding: ${semantic.space[3]};
+      }
     `,
     pluginMarketplaceHeader: css`
       margin-bottom: 2rem;
       padding-bottom: 1rem;
-      border-bottom: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-bottom: 2px solid ${semantic.color.border.decorative};
     `,
     pluginMarketplaceTitleRow: css`
       display: flex;
@@ -906,17 +1247,28 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       justify-content: space-between;
       gap: 2rem;
       margin-bottom: 0.5rem;
+      flex-wrap: wrap;
+    `,
+    pluginMarketplaceControls: css`
+      display: flex;
+      align-items: center;
+      flex: 1 1 320px;
+      width: 100%;
+      max-width: 448px;
+      min-width: 0;
+      margin-left: auto;
     `,
     pluginMarketplaceTitle: css`
+      font-family: ${semantic.font.display};
       font-size: 1.5rem;
       font-weight: 700;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      color: ${semantic.color.text.primary};
       margin: 0;
       letter-spacing: -0.02em;
     `,
     pluginMarketplaceDescription: css`
       font-size: 0.95rem;
-      color: ${t(colors.gray[600], colors.gray[400])};
+      color: ${semantic.color.text.secondary};
       margin: 0 0 1rem 0;
       line-height: 1.5;
     `,
@@ -924,37 +1276,42 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       position: relative;
       display: flex;
       align-items: center;
+      flex: 1 1 0%;
+      width: auto;
       max-width: 400px;
-      flex-shrink: 0;
+      min-width: 0;
+      @media (max-width: 430px) {
+        width: 100%;
+        max-width: none;
+      }
 
       svg {
         position: absolute;
         left: 1rem;
-        color: ${t(colors.gray[400], colors.gray[500])};
+        color: ${semantic.color.text.muted};
         pointer-events: none;
       }
     `,
     pluginMarketplaceSearch: css`
       width: 100%;
       padding: 0.75rem 1rem 0.75rem 2.75rem;
-      background: ${t(colors.gray[50], colors.darkGray[900])};
-      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      background: ${semantic.color.surface.app};
+      border: 2px solid ${semantic.color.border.control};
       border-radius: 0.5rem;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      color: ${semantic.color.text.primary};
       font-size: 0.875rem;
       font-family: ${fontFamily.sans};
       transition: all 0.2s ease;
 
       &::placeholder {
-        color: ${t(colors.gray[400], colors.gray[500])};
+        color: ${semantic.color.text.muted};
       }
 
       &:focus {
         outline: none;
-        border-color: ${t(colors.blue[500], colors.blue[400])};
-        background: ${t(colors.white, colors.darkGray[800])};
-        box-shadow: 0 0 0 3px
-          ${t('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.1)')};
+        border-color: ${semantic.color.border.focus};
+        background: ${semantic.color.surface.elevated};
+        box-shadow: 0 0 0 3px ${semantic.color.state.pressed};
       }
     `,
     pluginMarketplaceFilters: css`
@@ -967,41 +1324,35 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       gap: 0.5rem;
       margin-top: 1.5rem;
       padding: 1rem;
-      background: ${t(colors.gray[50], colors.darkGray[800])};
-      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      background: ${semantic.color.surface.subtle};
+      border: 1px solid ${semantic.color.border.decorative};
       border-radius: 0.5rem;
     `,
     pluginMarketplaceTagButton: css`
       padding: 0.5rem 1rem;
       font-size: 0.875rem;
       font-weight: 500;
-      background: ${t(colors.white, colors.darkGray[700])};
-      border: 2px solid ${t(colors.gray[300], colors.gray[600])};
+      background: ${semantic.color.surface.elevated};
+      border: 2px solid ${semantic.color.border.control};
       border-radius: 0.375rem;
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${semantic.color.text.secondary};
       cursor: pointer;
       transition: all 0.15s ease;
 
       &:hover {
-        background: ${t(colors.gray[100], colors.darkGray[600])};
-        border-color: ${t(colors.gray[400], colors.gray[500])};
-        color: ${t(colors.gray[900], colors.gray[100])};
+        background: ${semantic.color.state.hover};
+        border-color: ${semantic.color.border.control};
+        color: ${semantic.color.text.primary};
       }
     `,
     pluginMarketplaceTagButtonActive: css`
-      background: ${t(
-        'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-        'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
-      )} !important;
-      border-color: ${t('#2563eb', '#3b82f6')} !important;
-      color: white !important;
+      background: ${semantic.color.state.selectionFill} !important;
+      border-color: ${semantic.color.state.selectionFill} !important;
+      color: ${semantic.color.state.selectionText} !important;
 
       &:hover {
-        background: ${t(
-          'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
-          'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-        )} !important;
-        border-color: ${t('#1d4ed8', '#2563eb')} !important;
+        background: ${semantic.color.state.selectionFill} !important;
+        border-color: ${semantic.color.border.focus} !important;
       }
     `,
     pluginMarketplaceSettingsButton: css`
@@ -1009,18 +1360,18 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       align-items: center;
       justify-content: center;
       padding: 0.75rem;
-      background: ${t(colors.gray[100], colors.darkGray[800])};
-      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      background: ${semantic.color.surface.subtle};
+      border: 2px solid ${semantic.color.border.control};
       border-radius: 0.5rem;
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${semantic.color.text.secondary};
       cursor: pointer;
       transition: all 0.2s ease;
       margin-left: 0.5rem;
 
       &:hover {
-        background: ${t(colors.gray[200], colors.darkGray[700])};
-        border-color: ${t(colors.gray[300], colors.gray[600])};
-        color: ${t(colors.gray[900], colors.gray[100])};
+        background: ${semantic.color.state.hover};
+        border-color: ${semantic.color.border.control};
+        color: ${semantic.color.text.primary};
       }
 
       &:active {
@@ -1033,25 +1384,31 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       right: 0;
       bottom: 0;
       width: 350px;
-      background: ${t(colors.white, colors.darkGray[800])};
-      border-left: 1px solid ${t(colors.gray[200], colors.gray[700])};
-      box-shadow: -4px 0 12px ${t('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.4)')};
+      max-width: 100%;
+      box-sizing: border-box;
+      background: ${semantic.color.surface.elevated};
+      border-left: 1px solid ${semantic.color.border.decorative};
+      box-shadow: ${semantic.shadow.overlay};
       z-index: 1000;
       display: flex;
       flex-direction: column;
       animation: ${slideInRight} 0.3s ease;
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
     `,
     pluginMarketplaceSettingsPanelHeader: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1.5rem;
-      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-bottom: 1px solid ${semantic.color.border.decorative};
     `,
     pluginMarketplaceSettingsPanelTitle: css`
+      font-family: ${semantic.font.display};
       font-size: 1.125rem;
       font-weight: 600;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      color: ${semantic.color.text.primary};
       margin: 0;
     `,
     pluginMarketplaceSettingsPanelClose: css`
@@ -1061,14 +1418,14 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding: 0.5rem;
       background: transparent;
       border: none;
-      color: ${t(colors.gray[600], colors.gray[400])};
+      color: ${semantic.color.text.secondary};
       cursor: pointer;
       border-radius: 0.375rem;
       transition: all 0.15s ease;
 
       &:hover {
-        background: ${t(colors.gray[100], colors.darkGray[700])};
-        color: ${t(colors.gray[900], colors.gray[100])};
+        background: ${semantic.color.state.hover};
+        color: ${semantic.color.text.primary};
       }
     `,
     pluginMarketplaceSettingsPanelContent: css`
@@ -1078,19 +1435,25 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     `,
     pluginMarketplaceGrid: css`
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
       gap: 1.25rem;
       animation: ${slideUp} 0.4s ease;
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
     `,
     pluginMarketplaceCard: css`
-      background: ${t(colors.white, colors.darkGray[800])};
-      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      background: ${semantic.color.surface.elevated};
+      border: 2px solid ${semantic.color.border.decorative};
       border-radius: 0.75rem;
       padding: 1.5rem;
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      transition:
+        border-color 120ms ease-out,
+        box-shadow 120ms ease-out,
+        transform 120ms ease-out;
       position: relative;
       overflow: hidden;
 
@@ -1101,19 +1464,16 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         left: 0;
         right: 0;
         height: 3px;
-        background: ${t(
-          'linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)',
-          'linear-gradient(90deg, #60a5fa 0%, #a78bfa 100%)',
-        )};
+        background: ${semantic.color.state.selectionFill};
         transform: scaleX(0);
         transform-origin: left;
         transition: transform 0.25s ease;
       }
 
       &:hover {
-        border-color: ${t(colors.gray[400], colors.gray[500])};
-        box-shadow: 0 8px 24px ${t('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.4)')};
-        transform: translateY(-4px);
+        border-color: ${semantic.color.border.control};
+        box-shadow: ${semantic.shadow.overlay};
+        transform: translateY(-2px);
 
         &::before {
           transform: scaleX(1);
@@ -1126,10 +1486,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: ${t(
-        'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
-        'linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%)',
-      )};
+      background: ${semantic.color.state.selectionFill};
       border-radius: 0.5rem;
       color: white;
       transition: transform 0.25s ease;
@@ -1148,13 +1505,13 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     pluginMarketplaceCardTitle: css`
       font-size: 0.95rem;
       font-weight: 600;
-      color: ${t(colors.gray[900], colors.gray[100])};
+      color: ${semantic.color.text.primary};
       margin: 0 0 0.5rem 0;
       line-height: 1.4;
     `,
     pluginMarketplaceCardDescription: css`
       font-size: 0.8rem;
-      color: ${t(colors.gray[500], colors.gray[500])};
+      color: ${semantic.color.text.muted};
       margin: 0;
       padding: 0;
       background: transparent;
@@ -1166,7 +1523,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       margin-top: 4px;
       margin-bottom: 8px;
       font-size: 0.6875rem;
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-family: ${semantic.font.mono};
       opacity: 0.6;
       padding: 4px 8px;
       padding-left: 0;
@@ -1182,26 +1539,26 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     pluginMarketplaceCardVersionInfo: css`
       margin-top: 8px;
       font-size: 0.6875rem;
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-family: ${semantic.font.mono};
     `,
     pluginMarketplaceCardVersionSatisfied: css`
-      color: ${t(colors.green[600], colors.green[400])};
+      color: ${semantic.color.status.success.text};
     `,
     pluginMarketplaceCardVersionUnsatisfied: css`
-      color: ${t(colors.red[600], colors.red[400])};
+      color: ${semantic.color.status.error.text};
     `,
     pluginMarketplaceCardDocsLink: css`
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
       font-size: 0.75rem;
-      color: ${t(colors.blue[600], colors.blue[400])};
+      color: ${semantic.color.text.link};
       text-decoration: none;
       margin-top: 0.5rem;
       transition: color 0.15s ease;
 
       &:hover {
-        color: ${t(colors.blue[700], colors.blue[300])};
+        color: ${semantic.color.text.link};
         text-decoration: underline;
       }
 
@@ -1220,10 +1577,10 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: 0.6875rem;
       font-weight: 500;
       padding: 0.25rem 0.5rem;
-      background: ${t(colors.gray[100], colors.darkGray[700])};
-      border: 1px solid ${t(colors.gray[300], colors.gray[600])};
+      background: ${semantic.color.surface.subtle};
+      border: 1px solid ${semantic.color.border.control};
       border-radius: 0.25rem;
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${semantic.color.text.secondary};
     `,
     pluginMarketplaceCardImage: css`
       width: 28px;
@@ -1234,27 +1591,27 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       position: absolute;
       top: 12px;
       right: -35px;
-      background-color: ${t(colors.green[500], colors.green[500])};
+      background-color: ${semantic.color.status.success.solidFill};
       color: white;
       padding: 4px 40px;
       font-size: 0.6875rem;
       font-weight: bold;
       text-transform: uppercase;
       transform: rotate(45deg);
-      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
+      box-shadow: ${semantic.shadow.sm};
       z-index: 10;
       letter-spacing: 0.5px;
     `,
     pluginMarketplaceCardFeatured: css`
-      border-color: ${t(colors.blue[500], colors.blue[400])};
+      border-color: ${semantic.color.status.info.border};
       border-width: 2px;
     `,
     pluginMarketplaceCardActive: css`
-      border-color: ${t(colors.green[500], colors.green[600])};
+      border-color: ${semantic.color.status.success.border};
       border-width: 2px;
 
       &:hover {
-        border-color: ${t(colors.green[500], colors.green[600])};
+        border-color: ${semantic.color.status.success.border};
         box-shadow: none;
         transform: none;
 
@@ -1267,20 +1624,20 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      color: ${t(colors.green[600], colors.green[400])};
+      color: ${semantic.color.status.success.text};
       animation: ${statusFadeIn} 0.3s ease;
 
       svg {
         width: 18px;
         height: 18px;
-        animation: ${iconPop} 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        animation: ${statusFadeIn} 120ms ease-out;
       }
     `,
     pluginMarketplaceCardSpinner: css`
       width: 18px;
       height: 18px;
-      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
-      border-top-color: ${t(colors.blue[600], colors.blue[400])};
+      border: 2px solid ${semantic.color.border.decorative};
+      border-top-color: ${semantic.color.status.info.border};
       border-radius: 50%;
       animation: ${spin} 0.8s linear infinite;
     `,
@@ -1291,19 +1648,19 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     pluginMarketplaceCardStatusTextError: css`
       font-size: 0.875rem;
       font-weight: 600;
-      color: ${t(colors.red[600], colors.red[400])};
+      color: ${semantic.color.status.error.text};
     `,
     pluginMarketplaceEmpty: css`
       padding: 3rem 2rem;
       text-align: center;
-      background: ${t(colors.white, colors.darkGray[800])};
-      border: 2px dashed ${t(colors.gray[300], colors.gray[700])};
+      background: ${semantic.color.surface.elevated};
+      border: 2px dashed ${semantic.color.border.control};
       border-radius: 0.75rem;
       animation: ${fadeIn} 0.3s ease;
     `,
     pluginMarketplaceEmptyText: css`
       font-size: 0.95rem;
-      color: ${t(colors.gray[600], colors.gray[400])};
+      color: ${semantic.color.text.secondary};
       margin: 0;
       line-height: 1.6;
     `,
@@ -1317,23 +1674,28 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
     `,
     pluginMarketplaceSectionHeader: css`
-      margin-bottom: 1rem;
+      margin-bottom: ${semantic.gap.sectionLarge};
       padding: 1rem 1.25rem;
       display: flex;
       align-items: center;
       gap: 0.75rem;
       cursor: pointer;
       user-select: none;
-      background: ${t(colors.gray[50], colors.darkGray[800])};
-      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      background: ${semantic.color.surface.subtle};
+      border: 1px solid ${semantic.color.border.decorative};
       border-radius: 0.5rem;
       transition: all 0.15s ease;
 
       &:hover {
-        background: ${t(colors.gray[100], colors.darkGray[700])};
-        border-color: ${t(colors.gray[300], colors.gray[600])};
+        background: ${semantic.color.state.hover};
+        border-color: ${semantic.color.border.control};
       }
     `,
+    pluginMarketplaceSectionContent: css`
+      display: flex;
+      flex-direction: column;
+      gap: ${semantic.gap.sectionLarge};
+    `,
     pluginMarketplaceSectionHeaderLeft: css`
       display: flex;
       align-items: center;
@@ -1345,16 +1707,17 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${semantic.color.text.secondary};
       transition: transform 0.2s ease;
     `,
     pluginMarketplaceSectionChevronCollapsed: css`
       transform: rotate(-90deg);
     `,
     pluginMarketplaceSectionTitle: css`
+      font-family: ${semantic.font.display};
       font-size: 1.25rem;
       font-weight: 700;
-      color: ${t(colors.gray[900], colors.gray[50])};
+      color: ${semantic.color.text.primary};
       margin: 0;
       display: flex;
       align-items: center;
@@ -1364,27 +1727,19 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: 0.75rem;
       font-weight: 600;
       padding: 0.25rem 0.5rem;
-      background: ${t(
-        'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-        'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
-      )};
+      background: ${semantic.color.state.selectionFill};
       color: white;
       border-radius: 0.25rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
     `,
     pluginMarketplaceFeatureBanner: css`
-      margin-top: 1rem;
+      margin-top: 0;
       padding: 1.25rem 1.5rem;
-      background: ${t(
-        'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-        'linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)',
-      )};
+      background: ${semantic.color.status.info.solidFill};
       border-radius: 0.75rem;
-      border: 1px solid ${t(colors.blue[400], colors.blue[800])};
-      box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      border: 1px solid ${semantic.color.status.info.border};
+      box-shadow: ${semantic.shadow.sm};
     `,
     pluginMarketplaceFeatureBannerContent: css`
       display: flex;
@@ -1392,6 +1747,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       gap: 0.75rem;
     `,
     pluginMarketplaceFeatureBannerTitle: css`
+      font-family: ${semantic.font.display};
       font-size: 1.125rem;
       font-weight: 700;
       color: white;
@@ -1407,7 +1763,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     `,
     pluginMarketplaceFeatureBannerText: css`
       font-size: 0.95rem;
-      color: ${t('rgba(255, 255, 255, 0.95)', 'rgba(255, 255, 255, 0.9)')};
+      color: ${semantic.color.status.info.onFill};
       line-height: 1.5;
       margin: 0;
     `,
@@ -1426,12 +1782,12 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       transition: all 0.2s ease;
       text-decoration: none;
       align-self: flex-start;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      box-shadow: ${semantic.shadow.xs};
 
       &:hover {
-        background: ${t(colors.gray[50], colors.gray[100])};
+        background: ${semantic.color.state.hover};
         transform: translateY(-1px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        box-shadow: ${semantic.shadow.sm};
       }
 
       &:active {
@@ -1466,16 +1822,16 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       letter-spacing: 0.05em;
     `,
     pluginMarketplaceCardBadgeInstall: css`
-      background: ${t(colors.green[100], colors.green[900])};
-      color: ${t(colors.green[700], colors.green[300])};
+      background: ${semantic.color.status.success.subtleFill};
+      color: ${semantic.color.status.success.text};
     `,
     pluginMarketplaceCardBadgeAdd: css`
-      background: ${t(colors.blue[100], colors.blue[900])};
-      color: ${t(colors.blue[700], colors.blue[300])};
+      background: ${semantic.color.status.info.subtleFill};
+      color: ${semantic.color.status.info.text};
     `,
     pluginMarketplaceCardBadgeRequires: css`
-      background: ${t(colors.gray[100], colors.gray[800])};
-      color: ${t(colors.gray[600], colors.gray[400])};
+      background: ${semantic.color.status.neutral.subtleFill};
+      color: ${semantic.color.status.neutral.text};
     `,
 
     // Button style for already installed plugins
@@ -1487,16 +1843,13 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     pluginNameAddMore: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[600], colors.gray[400])};
+      color: ${semantic.color.text.secondary};
       padding: ${size[3]} ${size[2]};
       cursor: pointer;
       text-align: center;
       transition: all 0.15s ease;
       border-left: 2px solid transparent;
-      background: ${t(
-        'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
-        'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
-      )};
+      background: ${semantic.color.surface.subtle};
       font-weight: 600;
       position: relative;
       margin-top: auto;
@@ -1516,12 +1869,9 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
 
       &:hover {
-        background: ${t(
-          'linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%)',
-          'linear-gradient(135deg, #374151 0%, #1f2937 100%)',
-        )};
-        color: ${t(colors.gray[900], colors.gray[100])};
-        border-left-color: ${t(colors.blue[500], colors.blue[400])};
+        background: ${semantic.color.state.hover};
+        color: ${semantic.color.text.primary};
+        border-left-color: ${semantic.color.border.focus};
 
         h3::before {
           animation: ${sparkle} 0.5s ease-in-out infinite;
@@ -1529,14 +1879,10 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
 
       &.active {
-        background: ${t(
-          'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-          'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
-        )};
-        color: ${t(colors.white, colors.white)};
-        border-left: 2px solid ${t(colors.blue[600], colors.blue[300])};
-        box-shadow: 0 4px 12px
-          ${t('rgba(59, 130, 246, 0.3)', 'rgba(96, 165, 250, 0.3)')};
+        background: ${semantic.color.state.selectionFill};
+        color: ${semantic.color.state.selectionText};
+        border-left: 2px solid ${semantic.color.border.focus};
+        box-shadow: ${semantic.shadow.sm};
 
         h3::before {
           filter: brightness(0) invert(1);
@@ -1544,10 +1890,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       }
 
       &.active:hover {
-        background: ${t(
-          'linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)',
-          'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-        )};
+        background: ${semantic.color.state.selectionFill};
       }
     `,
   }
diff --git a/packages/devtools/src/tabs/index.tsx b/packages/devtools/src/tabs/index.tsx
index beb4f17e..c5bf57cd 100644
--- a/packages/devtools/src/tabs/index.tsx
+++ b/packages/devtools/src/tabs/index.tsx
@@ -1,4 +1,3 @@
-import { Cogs, List, PageSearch } from '@tanstack/devtools-ui/icons'
 import { SettingsTab } from './settings-tab'
 import { PluginsTab } from './plugins-tab'
 import { SeoTab } from './seo-tab'
@@ -8,19 +7,16 @@ export const tabs = [
     name: 'Plugins',
     id: 'plugins',
     component: (props: { isOpen: boolean }) => <PluginsTab {...props} />,
-    icon: () => <List />,
   },
   {
     name: 'SEO',
     id: 'seo',
     component: () => <SeoTab />,
-    icon: () => <PageSearch />,
   },
   {
     name: 'Settings',
     id: 'settings',
     component: () => <SettingsTab />,
-    icon: () => <Cogs />,
   },
 ] as const
 
diff --git a/packages/devtools/src/tabs/marketplace/marketplace-header.tsx b/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
index 1dd1b6fc..56abc481 100644
--- a/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
+++ b/packages/devtools/src/tabs/marketplace/marketplace-header.tsx
@@ -19,11 +19,16 @@ export const MarketplaceHeader = (props: MarketplaceHeaderProps) => {
     <div class={styles().pluginMarketplaceHeader}>
       <div class={styles().pluginMarketplaceTitleRow}>
         <h2 class={styles().pluginMarketplaceTitle}>Plugin Marketplace</h2>
-        <div style={{ display: 'flex', 'align-items': 'center' }}>
+        <div
+          data-testid="marketplace-controls"
+          class={styles().pluginMarketplaceControls}
+        >
           <div class={styles().pluginMarketplaceSearchWrapper}>
             <SearchIcon />
             <input
               type="text"
+              aria-label="Search plugins"
+              data-tsd-control
               class={styles().pluginMarketplaceSearch}
               placeholder="Search plugins..."
               value={props.searchInput()}
@@ -31,6 +36,9 @@ export const MarketplaceHeader = (props: MarketplaceHeaderProps) => {
             />
           </div>
           <button
+            type="button"
+            aria-label="Marketplace settings"
+            data-tsd-control
             class={styles().pluginMarketplaceSettingsButton}
             onClick={props.onSettingsClick}
           >
diff --git a/packages/devtools/src/tabs/marketplace/plugin-card.tsx b/packages/devtools/src/tabs/marketplace/plugin-card.tsx
index 38a02230..e29a9069 100644
--- a/packages/devtools/src/tabs/marketplace/plugin-card.tsx
+++ b/packages/devtools/src/tabs/marketplace/plugin-card.tsx
@@ -26,6 +26,7 @@ export const PluginCardComponent = (props: PluginCardComponentProps) => {
 
   return (
     <div
+      data-tsd-surface
       class={styles().pluginMarketplaceCard}
       classList={{
         [styles().pluginMarketplaceCardDisabled]:
@@ -119,7 +120,7 @@ export const PluginCardComponent = (props: PluginCardComponentProps) => {
       <Show
         when={card.status === 'idle'}
         fallback={
-          <div class={styles().pluginMarketplaceCardStatus}>
+          <div class={styles().pluginMarketplaceCardStatus} role="status">
             <Show when={card.status === 'installing'}>
               <div class={styles().pluginMarketplaceCardSpinner} />
               <span class={styles().pluginMarketplaceCardStatusText}>
diff --git a/packages/devtools/src/tabs/marketplace/plugin-section.tsx b/packages/devtools/src/tabs/marketplace/plugin-section.tsx
index fd0b0ed2..f5990ef1 100644
--- a/packages/devtools/src/tabs/marketplace/plugin-section.tsx
+++ b/packages/devtools/src/tabs/marketplace/plugin-section.tsx
@@ -43,8 +43,18 @@ export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
   return (
     <div class={styles().pluginMarketplaceSection}>
       <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={!props.isCollapsed()}
+        data-tsd-control
         class={styles().pluginMarketplaceSectionHeader}
         onClick={props.onToggleCollapse}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            props.onToggleCollapse()
+          }
+        }}
       >
         <div class={styles().pluginMarketplaceSectionHeaderLeft}>
           <div
@@ -63,39 +73,46 @@ export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
       </div>
 
       <Show when={!props.isCollapsed()}>
-        <Show when={props.section.id === 'featured'}>
-          <div class={styles().pluginMarketplaceFeatureBanner}>
-            <div class={styles().pluginMarketplaceFeatureBannerContent}>
-              <h4 class={styles().pluginMarketplaceFeatureBannerTitle}>
-                <span class={styles().pluginMarketplaceFeatureBannerIcon}>
-                  <StarIcon />
-                </span>
-                Want to be featured here?
-              </h4>
-              <p class={styles().pluginMarketplaceFeatureBannerText}>
-                If you've built a plugin for TanStack Devtools and would like to
-                showcase it in the featured section, we'd love to hear from you!
-                Reach out to us to discuss partnership opportunities.
-              </p>
-              <a
-                href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"
-                class={styles().pluginMarketplaceFeatureBannerButton}
-              >
-                <span class={styles().pluginMarketplaceFeatureBannerButtonIcon}>
-                  <MailIcon />
-                </span>
-                Contact Us
-              </a>
+        <div class={styles().pluginMarketplaceSectionContent}>
+          <Show when={props.section.id === 'featured'}>
+            <div class={styles().pluginMarketplaceFeatureBanner}>
+              <div class={styles().pluginMarketplaceFeatureBannerContent}>
+                <h4 class={styles().pluginMarketplaceFeatureBannerTitle}>
+                  <span class={styles().pluginMarketplaceFeatureBannerIcon}>
+                    <StarIcon />
+                  </span>
+                  Want to be featured here?
+                </h4>
+                <p class={styles().pluginMarketplaceFeatureBannerText}>
+                  If you've built a plugin for TanStack Devtools and would like
+                  to showcase it in the featured section, we'd love to hear from
+                  you! Reach out to us to discuss partnership opportunities.
+                </p>
+                <a
+                  href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"
+                  class={styles().pluginMarketplaceFeatureBannerButton}
+                >
+                  <span
+                    class={styles().pluginMarketplaceFeatureBannerButtonIcon}
+                  >
+                    <MailIcon />
+                  </span>
+                  Contact Us
+                </a>
+              </div>
             </div>
-          </div>
-        </Show>
+          </Show>
 
-        <div class={styles().pluginMarketplaceGrid}>
-          <For each={props.section.cards}>
-            {(card) => (
-              <PluginCardComponent card={card} onAction={props.onCardAction} />
-            )}
-          </For>
+          <div class={styles().pluginMarketplaceGrid}>
+            <For each={props.section.cards}>
+              {(card) => (
+                <PluginCardComponent
+                  card={card}
+                  onAction={props.onCardAction}
+                />
+              )}
+            </For>
+          </div>
         </div>
       </Show>
     </div>
diff --git a/packages/devtools/src/tabs/marketplace/settings-panel.tsx b/packages/devtools/src/tabs/marketplace/settings-panel.tsx
index 9f507f0f..bba6f9fc 100644
--- a/packages/devtools/src/tabs/marketplace/settings-panel.tsx
+++ b/packages/devtools/src/tabs/marketplace/settings-panel.tsx
@@ -15,12 +15,20 @@ export const SettingsPanel = (props: SettingsPanelProps) => {
 
   return (
     <Show when={props.isOpen()}>
-      <div class={styles().pluginMarketplaceSettingsPanel}>
+      <div
+        class={styles().pluginMarketplaceSettingsPanel}
+        data-tsd-surface
+        role="dialog"
+        aria-label="Marketplace settings"
+      >
         <div class={styles().pluginMarketplaceSettingsPanelHeader}>
           <h3 class={styles().pluginMarketplaceSettingsPanelTitle}>
             Marketplace Settings
           </h3>
           <button
+            type="button"
+            aria-label="Close marketplace settings"
+            data-tsd-control
             class={styles().pluginMarketplaceSettingsPanelClose}
             onClick={props.onClose}
           >
diff --git a/packages/devtools/src/tabs/marketplace/tag-filters.tsx b/packages/devtools/src/tabs/marketplace/tag-filters.tsx
index a33de679..20ebcd72 100644
--- a/packages/devtools/src/tabs/marketplace/tag-filters.tsx
+++ b/packages/devtools/src/tabs/marketplace/tag-filters.tsx
@@ -17,6 +17,10 @@ export const TagFilters = (props: TagFiltersProps) => {
         <For each={props.tags()}>
           {(tag) => (
             <button
+              type="button"
+              data-tsd-control
+              data-tsd-selected={props.selectedTags().has(tag)}
+              aria-pressed={props.selectedTags().has(tag)}
               class={styles().pluginMarketplaceTagButton}
               classList={{
                 [styles().pluginMarketplaceTagButtonActive]: props
diff --git a/packages/devtools/src/tabs/plugin-marketplace.tsx b/packages/devtools/src/tabs/plugin-marketplace.tsx
index cbadc1dc..ae0901fb 100644
--- a/packages/devtools/src/tabs/plugin-marketplace.tsx
+++ b/packages/devtools/src/tabs/plugin-marketplace.tsx
@@ -322,7 +322,11 @@ export const PluginMarketplace = () => {
   }
 
   return (
-    <div class={styles().pluginMarketplace}>
+    <div
+      class={styles().pluginMarketplace}
+      data-testid="plugin-marketplace"
+      data-tsd-surface
+    >
       {/* Settings Panel */}
       <SettingsPanel
         isOpen={isSettingsOpen}
diff --git a/packages/devtools/src/tabs/plugins-tab.tsx b/packages/devtools/src/tabs/plugins-tab.tsx
index bfc4c870..c65e650a 100644
--- a/packages/devtools/src/tabs/plugins-tab.tsx
+++ b/packages/devtools/src/tabs/plugins-tab.tsx
@@ -1,156 +1,81 @@
-import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
-import clsx from 'clsx'
-import { createDrawContext } from '../context/draw-context'
+import { For, Show, createEffect, createSignal } from 'solid-js'
 import { createPlugins, createTheme } from '../context/use-devtools-context'
 import { createStyles } from '../styles/use-styles'
-import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
+import { PLUGIN_CONTAINER_ID } from '../constants'
 import { PluginMarketplace } from './plugin-marketplace'
 
 export const PluginsTab = (props: { isOpen: boolean }) => {
-  const { plugins, activePlugins, toggleActivePlugins } = createPlugins()
-  const { expanded, hoverUtils, animationMs, setForceExpand } =
-    createDrawContext()
+  const { plugins, activePlugins } = createPlugins()
   const [pluginRefs, setPluginRefs] = createSignal(
     new Map<string, HTMLDivElement>(),
   )
-  const [showMarketplace, setShowMarketplace] = createSignal(false)
-
-  const styles = createStyles()
-
   const { theme } = createTheme()
-
-  const hasPlugins = createMemo(
-    () => plugins()?.length && plugins()!.length > 0,
-  )
-
-  // Keep sidebar expanded when marketplace is shown
-  createEffect(() => {
-    setForceExpand(showMarketplace())
-  })
-
+  const styles = createStyles()
   createEffect(() => {
-    const currentActivePlugins = plugins()?.filter((plugin) =>
-      activePlugins().includes(plugin.id!),
-    )
-
-    currentActivePlugins?.forEach((plugin) => {
-      const ref = pluginRefs().get(plugin.id!)
-
-      if (ref) {
+    for (const pluginId of activePlugins()) {
+      const plugin = plugins()?.find((entry) => entry.id === pluginId)
+      const ref = pluginRefs().get(pluginId)
+      if (plugin && ref) {
         plugin.render(ref, {
           theme: theme(),
           devtoolsOpen: props.isOpen,
         })
       }
-    })
-  })
-
-  const handleMarketplaceClick = () => setShowMarketplace(!showMarketplace())
-
-  const handlePluginClick = (pluginId: string) => {
-    // Close marketplace when switching to a plugin
-    if (showMarketplace()) {
-      setShowMarketplace(false)
     }
-    toggleActivePlugins(pluginId)
-  }
+  })
 
   return (
-    <Show when={hasPlugins()} fallback={<PluginMarketplace />}>
-      <div class={styles().pluginsTabPanel}>
-        <div
-          class={clsx(
-            styles().pluginsTabDraw(expanded()),
-            {
-              [styles().pluginsTabDraw(expanded())]: expanded(),
-            },
-            styles().pluginsTabDrawTransition(animationMs),
-          )}
-          onMouseEnter={() => hoverUtils.enter()}
-          onMouseLeave={() => {
-            // Don't collapse on mouse leave if marketplace is open
-            if (!showMarketplace()) {
-              hoverUtils.leave()
-            }
-          }}
-        >
-          <div
-            class={clsx(
-              styles().pluginsTabSidebar(expanded()),
-              styles().pluginsTabSidebarTransition(animationMs),
-            )}
-          >
-            <div class={styles().pluginsList}>
-              <For each={plugins()}>
-                {(plugin) => {
-                  let pluginHeading: HTMLHeadingElement | undefined
-
-                  createEffect(() => {
-                    if (pluginHeading) {
-                      typeof plugin.name === 'string'
-                        ? (pluginHeading.textContent = plugin.name)
-                        : plugin.name(pluginHeading, {
-                            theme: theme(),
-                            devtoolsOpen: props.isOpen,
-                          })
-                    }
-                  })
-
-                  const isActive = createMemo(() =>
-                    activePlugins().includes(plugin.id!),
-                  )
-
-                  return (
-                    <div
-                      onClick={() => handlePluginClick(plugin.id!)}
-                      class={clsx(styles().pluginName, {
-                        active: isActive(),
-                      })}
-                    >
-                      <h3
-                        id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
-                        ref={pluginHeading}
-                      />
-                    </div>
-                  )
-                }}
-              </For>
-            </div>
-
-            {/* Add More Tab - visually distinct */}
-            <div
-              onClick={handleMarketplaceClick}
-              class={clsx(styles().pluginNameAddMore, {
-                active: showMarketplace(),
-              })}
-            >
-              <h3>Add More</h3>
-            </div>
-          </div>
+    <Show
+      when={(plugins()?.length ?? 0) > 0}
+      fallback={
+        <div data-tsd-surface>
+          <p>Browse Marketplace to discover available plugins.</p>
+          <PluginMarketplace />
         </div>
-
-        {/* Show marketplace if active, otherwise show plugin panels */}
+      }
+    >
+      <div
+        data-testid="plugins-workspace"
+        data-tsd-surface
+        style={{
+          display: 'flex',
+          width: '100%',
+          height: '100%',
+          'min-width': '0',
+          'min-height': '0px',
+          overflow: 'hidden',
+        }}
+      >
         <Show
-          when={showMarketplace()}
-          fallback={
-            <For each={activePlugins()}>
-              {(pluginId) => (
+          when={activePlugins().length > 0}
+          fallback={<div data-tsd-surface>Select a plugin to open it</div>}
+        >
+          <For each={activePlugins()}>
+            {(pluginId, index) => (
+              <>
+                <Show when={index() > 0}>
+                  <div
+                    data-tsd-separator="plugin-pane"
+                    class={styles().pluginPaneSeparator}
+                  />
+                </Show>
                 <div
                   id={`${PLUGIN_CONTAINER_ID}-${pluginId}`}
+                  data-plugin-mount
+                  data-tsd-surface
                   ref={(el) => {
-                    setPluginRefs((prev) => {
-                      const updated = new Map(prev)
-                      updated.set(pluginId, el)
-                      return updated
+                    setPluginRefs((previous) => {
+                      const next = new Map(previous)
+                      next.set(pluginId, el)
+                      return next
                     })
                   }}
                   class={styles().pluginsTabContent}
+                  style={{ flex: '1 1 0px', 'min-width': '0px' }}
                 />
-              )}
-            </For>
-          }
-        >
-          <PluginMarketplace />
+              </>
+            )}
+          </For>
         </Show>
       </div>
     </Show>
diff --git a/packages/devtools/src/tabs/seo-tab/index.tsx b/packages/devtools/src/tabs/seo-tab/index.tsx
index f89646ff..3d5f2ff8 100644
--- a/packages/devtools/src/tabs/seo-tab/index.tsx
+++ b/packages/devtools/src/tabs/seo-tab/index.tsx
@@ -1,6 +1,10 @@
 import { Show, createSignal } from 'solid-js'
 import { MainPanel } from '@tanstack/devtools-ui'
 import { createStyles } from '../../styles/use-styles'
+import {
+  WorkbenchSecondaryTab,
+  WorkbenchSecondaryTabs,
+} from '../../components/workbench-secondary-tabs'
 import { SocialPreviewsSection } from './social-previews'
 import { SerpPreviewSection } from './serp-preview'
 
@@ -12,30 +16,36 @@ export const SeoTab = () => {
   const styles = createStyles()
 
   return (
-    <MainPanel withPadding>
-      <nav class={styles().seoSubNav} aria-label="SEO sections">
-        <button
-          type="button"
-          class={`${styles().seoSubNavLabel} ${activeView() === 'social-previews' ? styles().seoSubNavLabelActive : ''}`}
+    <div
+      data-testid="seo-workspace"
+      data-tsd-surface
+      class={styles().seoWorkspace}
+    >
+      <WorkbenchSecondaryTabs ariaLabel="SEO sections">
+        <WorkbenchSecondaryTab
+          selected={activeView() === 'social-previews'}
+          ariaCurrent={activeView() === 'social-previews' ? 'page' : undefined}
           onClick={() => setActiveView('social-previews')}
         >
           Social previews
-        </button>
-        <button
-          type="button"
-          class={`${styles().seoSubNavLabel} ${activeView() === 'serp-preview' ? styles().seoSubNavLabelActive : ''}`}
+        </WorkbenchSecondaryTab>
+        <WorkbenchSecondaryTab
+          selected={activeView() === 'serp-preview'}
+          ariaCurrent={activeView() === 'serp-preview' ? 'page' : undefined}
           onClick={() => setActiveView('serp-preview')}
         >
           SERP Preview
-        </button>
-      </nav>
+        </WorkbenchSecondaryTab>
+      </WorkbenchSecondaryTabs>
 
-      <Show when={activeView() === 'social-previews'}>
-        <SocialPreviewsSection />
-      </Show>
-      <Show when={activeView() === 'serp-preview'}>
-        <SerpPreviewSection />
-      </Show>
-    </MainPanel>
+      <MainPanel withPadding class={styles().seoContent}>
+        <Show when={activeView() === 'social-previews'}>
+          <SocialPreviewsSection />
+        </Show>
+        <Show when={activeView() === 'serp-preview'}>
+          <SerpPreviewSection />
+        </Show>
+      </MainPanel>
+    </div>
   )
 }
diff --git a/packages/devtools/src/tabs/seo-tab/serp-preview.tsx b/packages/devtools/src/tabs/seo-tab/serp-preview.tsx
index 55a9cb2c..f91d6b85 100644
--- a/packages/devtools/src/tabs/seo-tab/serp-preview.tsx
+++ b/packages/devtools/src/tabs/seo-tab/serp-preview.tsx
@@ -142,7 +142,9 @@ function SerpSnippetPreview(props: {
 
   return (
     <div class={styles().serpPreviewBlock}>
-      <div class={styles().serpPreviewLabel}>{props.label}</div>
+      <div class={styles().serpPreviewLabel} data-testid="serp-preview-label">
+        {props.label}
+      </div>
       <div
         class={
           props.isMobile ? styles().serpSnippetMobile : styles().serpSnippet
@@ -159,13 +161,16 @@ function SerpSnippetPreview(props: {
             <div class={styles().serpSnippetDefaultFavicon} />
           )}
           <div class={styles().serpSnippetSiteColumn}>
-            <span class={styles().serpSnippetSiteName}>
+            <span
+              class={styles().serpSnippetSiteName}
+              data-testid="serp-preview-site-name"
+            >
               {props.data.siteName || props.data.url}
             </span>
             <span class={styles().serpSnippetSiteUrl}>{props.data.url}</span>
           </div>
         </div>
-        <div class={styles().serpSnippetTitle}>
+        <div class={styles().serpSnippetTitle} data-testid="serp-preview-title">
           {props.displayTitle || props.data.title || 'No title'}
         </div>
         {!props.isMobile && (
diff --git a/packages/devtools/src/tabs/seo-tab/social-previews.tsx b/packages/devtools/src/tabs/seo-tab/social-previews.tsx
index b471c782..4de9fdf4 100644
--- a/packages/devtools/src/tabs/seo-tab/social-previews.tsx
+++ b/packages/devtools/src/tabs/seo-tab/social-previews.tsx
@@ -12,7 +12,7 @@ const SOCIALS = [
       { key: 'og:image', prop: 'image' },
       { key: 'og:url', prop: 'url' },
     ],
-    color: '#4267B2',
+    color: '#4267B2', // semantic-color-exempt: vendor-mark
   },
   {
     network: 'X/Twitter',
@@ -22,7 +22,7 @@ const SOCIALS = [
       { key: 'twitter:image', prop: 'image' },
       { key: 'twitter:url', prop: 'url' },
     ],
-    color: '#1DA1F2',
+    color: '#1DA1F2', // semantic-color-exempt: vendor-mark
   },
   {
     network: 'LinkedIn',
@@ -32,7 +32,7 @@ const SOCIALS = [
       { key: 'og:image', prop: 'image' },
       { key: 'og:url', prop: 'url' },
     ],
-    color: '#0077B5',
+    color: '#0077B5', // semantic-color-exempt: vendor-mark
   },
   {
     network: 'Discord',
@@ -42,7 +42,7 @@ const SOCIALS = [
       { key: 'og:image', prop: 'image' },
       { key: 'og:url', prop: 'url' },
     ],
-    color: '#5865F2',
+    color: '#5865F2', // semantic-color-exempt: vendor-mark
   },
   {
     network: 'Slack',
@@ -52,7 +52,7 @@ const SOCIALS = [
       { key: 'og:image', prop: 'image' },
       { key: 'og:url', prop: 'url' },
     ],
-    color: '#4A154B',
+    color: '#4A154B', // semantic-color-exempt: vendor-mark
   },
   {
     network: 'Mastodon',
@@ -62,7 +62,7 @@ const SOCIALS = [
       { key: 'og:image', prop: 'image' },
       { key: 'og:url', prop: 'url' },
     ],
-    color: '#6364FF',
+    color: '#6364FF', // semantic-color-exempt: vendor-mark
   },
   {
     network: 'Bluesky',
@@ -72,7 +72,7 @@ const SOCIALS = [
       { key: 'og:image', prop: 'image' },
       { key: 'og:url', prop: 'url' },
     ],
-    color: '#1185FE',
+    color: '#1185FE', // semantic-color-exempt: vendor-mark
   },
   // Add more networks as needed
 ]
@@ -102,7 +102,10 @@ function SocialPreview(props: {
       class={styles().seoPreviewCard}
       style={{ 'border-color': props.color }}
     >
-      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>
+      <div
+        class={styles().seoPreviewHeader}
+        data-testid="social-preview-heading"
+      >
         {props.network} Preview
       </div>
       {props.meta.image ? (
@@ -115,8 +118,8 @@ function SocialPreview(props: {
         <div
           class={styles().seoPreviewImage}
           style={{
-            background: '#222',
-            color: '#888',
+            background: '#222', // semantic-color-exempt: simulated-seo
+            color: '#888', // semantic-color-exempt: simulated-seo
             display: 'flex',
             'align-items': 'center',
             'justify-content': 'center',
@@ -127,7 +130,7 @@ function SocialPreview(props: {
           No Image
         </div>
       )}
-      <div class={styles().seoPreviewTitle}>
+      <div class={styles().seoPreviewTitle} data-testid="social-preview-title">
         {props.meta.title || 'No Title'}
       </div>
       <div class={styles().seoPreviewDesc}>
diff --git a/packages/devtools/src/tabs/settings-tab.test.tsx b/packages/devtools/src/tabs/settings-tab.test.tsx
index fe21e150..50a5b917 100644
--- a/packages/devtools/src/tabs/settings-tab.test.tsx
+++ b/packages/devtools/src/tabs/settings-tab.test.tsx
@@ -1,6 +1,7 @@
-import { render } from '@solidjs/testing-library'
+import { fireEvent, render } from '@solidjs/testing-library'
+import { createSignal } from 'solid-js'
 import { beforeEach, describe, expect, it } from 'vitest'
-import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { Select, ThemeContextProvider } from '@tanstack/devtools-ui'
 import { DevtoolsProvider } from '../context/devtools-context'
 import { createDevtoolsSettings } from '../context/use-devtools-context'
 import { SettingsTab } from './settings-tab'
@@ -87,4 +88,60 @@ describe('SettingsTab', () => {
 
     expect(getDefaultOpenCheckbox().checked).toBe(true)
   })
+
+  it('uses native change events and keeps a controlled generic value in sync', () => {
+    const NumericSelect = () => {
+      const [value, setValue] = createSignal(1)
+      return (
+        <>
+          <Select
+            label="Number"
+            options={[
+              { label: 'One', value: 1 },
+              { label: 'Two', value: 2 },
+            ]}
+            value={value()}
+            onChange={setValue}
+          />
+          <button type="button" onClick={() => setValue(1)}>
+            Reset
+          </button>
+          <output>{value()}</output>
+        </>
+      )
+    }
+    const { getByLabelText, getByRole, getByText } = render(() => (
+      <ThemeContextProvider theme="dark">
+        <>
+          <Select
+            label="Zero"
+            options={[
+              { label: 'One', value: 1 },
+              { label: 'Zero', value: 0 },
+            ]}
+            value={0}
+          />
+          <Select
+            label="Empty"
+            options={[
+              { label: 'Fallback', value: 'fallback' },
+              { label: 'Empty', value: '' },
+            ]}
+            value=""
+          />
+          <NumericSelect />
+        </>
+      </ThemeContextProvider>
+    ))
+    expect(getByLabelText<HTMLSelectElement>('Zero').value).toBe('0')
+    expect(getByLabelText<HTMLSelectElement>('Empty').value).toBe('')
+    const select = getByLabelText<HTMLSelectElement>('Number')
+
+    select.value = '2'
+    fireEvent.change(select)
+    expect(getByText('2')).toBeTruthy()
+
+    fireEvent.click(getByRole('button', { name: 'Reset' }))
+    expect(select.value).toBe('1')
+  })
 })
diff --git a/packages/devtools/src/tabs/settings-tab.tsx b/packages/devtools/src/tabs/settings-tab.tsx
index 518cfe11..603347c4 100644
--- a/packages/devtools/src/tabs/settings-tab.tsx
+++ b/packages/devtools/src/tabs/settings-tab.tsx
@@ -15,7 +15,6 @@ import {
   Link,
   SettingsCog,
 } from '@tanstack/devtools-ui/icons'
-
 import { createDevtoolsSettings } from '../context/use-devtools-context'
 import { createStyles } from '../styles/use-styles'
 import { HotkeyConfig } from './hotkey-config'
@@ -24,189 +23,173 @@ import type { KeyboardKey } from '../context/devtools-store'
 export const SettingsTab = () => {
   const { setSettings, settings } = createDevtoolsSettings()
   const styles = createStyles()
-
   const modifiers: Array<KeyboardKey> = ['CtrlOrMeta', 'Alt', 'Shift']
 
   return (
-    <MainPanel withPadding>
-      <Section>
-        <SectionTitle>
-          <SectionIcon>
-            <SettingsCog />
-          </SectionIcon>
-          General
-        </SectionTitle>
-        <SectionDescription>
-          Configure general behavior of the devtools panel.
-        </SectionDescription>
-        <div class={styles().settingsGroup}>
-          <Checkbox
-            label="Default open"
-            description="Automatically open the devtools panel when the page loads"
-            onChange={() =>
-              setSettings({ defaultOpen: !settings().defaultOpen })
-            }
-            checked={settings().defaultOpen}
-          />
-          <Checkbox
-            label="Hide trigger until hovered"
-            description="Keep the devtools trigger button hidden until you hover over its area"
-            onChange={() =>
-              setSettings({ hideUntilHover: !settings().hideUntilHover })
-            }
-            checked={settings().hideUntilHover}
-          />
-          <Checkbox
-            label="Completely hide trigger"
-            description="Completely removes the trigger from the DOM (you can still open it with the hotkey)"
-            onChange={() =>
-              setSettings({ triggerHidden: !settings().triggerHidden })
-            }
-            checked={settings().triggerHidden}
-          />
-
-          <Select
-            label="Theme"
-            description="Choose the theme for the devtools panel"
-            value={settings().theme}
-            options={[
-              { label: 'Dark', value: 'dark' },
-              { label: 'Light', value: 'light' },
-            ]}
-            onChange={(value) => setSettings({ theme: value })}
-          />
-        </div>
-      </Section>
-
-      {/* URL Flag Settings */}
-      <Section>
-        <SectionTitle>
-          <SectionIcon>
-            <Link />
-          </SectionIcon>
-          URL Configuration
-        </SectionTitle>
-        <SectionDescription>
-          Control when devtools are available based on URL parameters.
-        </SectionDescription>
-        <div class={styles().settingsGroup}>
-          <Checkbox
-            label="Require URL Flag"
-            description="Only show devtools when a specific URL parameter is present"
-            checked={settings().requireUrlFlag}
-            onChange={(checked) =>
-              setSettings({
-                requireUrlFlag: checked,
-              })
-            }
-          />
-          <Show when={settings().requireUrlFlag}>
-            <div class={styles().conditionalSetting}>
-              <Input
-                label="URL flag"
-                description="Enter the URL parameter name (e.g., 'debug' for ?debug=true)"
-                placeholder="debug"
-                value={settings().urlFlag}
-                onChange={(e) =>
-                  setSettings({
-                    urlFlag: e,
-                  })
-                }
-              />
-            </div>
-          </Show>
-        </div>
-      </Section>
-
-      {/* Keyboard Settings */}
-      <Section>
-        <SectionTitle>
-          <SectionIcon>
-            <Keyboard />
-          </SectionIcon>
-          Keyboard
-        </SectionTitle>
-        <SectionDescription>
-          Customize keyboard shortcuts for quick access.
-        </SectionDescription>
+    <div
+      data-testid="settings-workspace"
+      data-tsd-surface
+      style={{ height: '100%', 'min-height': '0px' }}
+    >
+      <MainPanel withPadding>
+        <Section>
+          <SectionTitle>
+            <SectionIcon>
+              <SettingsCog />
+            </SectionIcon>
+            General
+          </SectionTitle>
+          <SectionDescription>
+            Configure general behavior of the devtools panel.
+          </SectionDescription>
+          <div class={styles().settingsGroup}>
+            <Checkbox
+              label="Default open"
+              description="Automatically open the devtools panel when the page loads"
+              onChange={() =>
+                setSettings({ defaultOpen: !settings().defaultOpen })
+              }
+              checked={settings().defaultOpen}
+            />
+            <Checkbox
+              label="Hide trigger until hovered"
+              description="Keep the devtools trigger button hidden until you hover over its area"
+              onChange={() =>
+                setSettings({ hideUntilHover: !settings().hideUntilHover })
+              }
+              checked={settings().hideUntilHover}
+            />
+            <Checkbox
+              label="Completely hide trigger"
+              description="Completely removes the trigger from the DOM (you can still open it with the hotkey)"
+              onChange={() =>
+                setSettings({ triggerHidden: !settings().triggerHidden })
+              }
+              checked={settings().triggerHidden}
+            />
+            <Select
+              label="Theme"
+              options={[
+                { label: 'Dark', value: 'dark' },
+                { label: 'Light', value: 'light' },
+              ]}
+              value={settings().theme}
+              onChange={(theme) => setSettings({ theme })}
+            />
+          </div>
+        </Section>
 
-        <div class={styles().settingsStack}>
-          <HotkeyConfig
-            title="Open/Close Devtools"
-            description="Hotkey to open/close devtools"
-            hotkey={settings().openHotkey}
-            modifiers={modifiers}
-            onHotkeyChange={(hotkey) => setSettings({ openHotkey: hotkey })}
-          />
+        <Section>
+          <SectionTitle>
+            <SectionIcon>
+              <Link />
+            </SectionIcon>
+            URL Configuration
+          </SectionTitle>
+          <SectionDescription>
+            Control when devtools are available based on URL parameters.
+          </SectionDescription>
+          <div class={styles().settingsGroup}>
+            <Checkbox
+              label="Require URL Flag"
+              description="Only show devtools when a specific URL parameter is present"
+              checked={settings().requireUrlFlag}
+              onChange={(checked) => setSettings({ requireUrlFlag: checked })}
+            />
+            <Show when={settings().requireUrlFlag}>
+              <div class={styles().conditionalSetting}>
+                <Input
+                  label="URL flag"
+                  description="Enter the URL parameter name (for example, 'debug' for ?debug=true)"
+                  placeholder="debug"
+                  value={settings().urlFlag}
+                  onChange={(value) => setSettings({ urlFlag: value })}
+                />
+              </div>
+            </Show>
+          </div>
+        </Section>
 
-          <HotkeyConfig
-            title="Source Inspector"
-            description="Hotkey to open source inspector"
-            hotkey={settings().inspectHotkey}
-            modifiers={modifiers}
-            onHotkeyChange={(hotkey) => setSettings({ inspectHotkey: hotkey })}
-          />
-        </div>
-      </Section>
+        <Section>
+          <SectionTitle>
+            <SectionIcon>
+              <Keyboard />
+            </SectionIcon>
+            Keyboard
+          </SectionTitle>
+          <SectionDescription>
+            Customize keyboard shortcuts for quick access.
+          </SectionDescription>
+          <div class={styles().settingsStack}>
+            <HotkeyConfig
+              title="Open/Close Devtools"
+              description="Hotkey to open/close devtools"
+              hotkey={settings().openHotkey}
+              modifiers={modifiers}
+              onHotkeyChange={(hotkey) => setSettings({ openHotkey: hotkey })}
+            />
+            <HotkeyConfig
+              title="Source Inspector"
+              description="Hotkey to open source inspector"
+              hotkey={settings().inspectHotkey}
+              modifiers={modifiers}
+              onHotkeyChange={(hotkey) =>
+                setSettings({ inspectHotkey: hotkey })
+              }
+            />
+          </div>
+        </Section>
 
-      {/* Position Settings */}
-      <Section>
-        <SectionTitle>
-          <SectionIcon>
-            <GeoTag />
-          </SectionIcon>
-          Position
-        </SectionTitle>
-        <SectionDescription>
-          Adjust the position of the trigger button and devtools panel.
-        </SectionDescription>
-        <div class={styles().settingsGroup}>
-          <Select
-            label="Trigger Mode"
-            description="Fixed anchors the trigger to a corner; Floating lets you drag it anywhere (and throw it)"
-            value={settings().triggerMode}
-            options={[
-              { label: 'Fixed', value: 'fixed' },
-              { label: 'Floating', value: 'floating' },
-            ]}
-            onChange={(value) => setSettings({ triggerMode: value })}
-          />
-          <div class={styles().settingRow}>
-            <Show when={settings().triggerMode === 'fixed'}>
-              <Select
-                label="Trigger Position"
-                options={[
-                  { label: 'Bottom Right', value: 'bottom-right' },
-                  { label: 'Bottom Left', value: 'bottom-left' },
-                  { label: 'Top Right', value: 'top-right' },
-                  { label: 'Top Left', value: 'top-left' },
-                  { label: 'Middle Right', value: 'middle-right' },
-                  { label: 'Middle Left', value: 'middle-left' },
-                ]}
-                value={settings().position}
-                onChange={(value) =>
-                  setSettings({
-                    position: value,
-                  })
-                }
-              />
-            </Show>
+        <Section>
+          <SectionTitle>
+            <SectionIcon>
+              <GeoTag />
+            </SectionIcon>
+            Position
+          </SectionTitle>
+          <SectionDescription>
+            Adjust the position of the trigger button and devtools panel.
+          </SectionDescription>
+          <div class={styles().settingsGroup}>
             <Select
-              label="Panel Position"
-              value={settings().panelLocation}
+              label="Trigger Mode"
+              description="Fixed anchors the trigger to a corner. Floating lets you drag and throw it."
+              value={settings().triggerMode}
               options={[
-                { label: 'Top', value: 'top' },
-                { label: 'Bottom', value: 'bottom' },
+                { label: 'Fixed', value: 'fixed' },
+                { label: 'Floating', value: 'floating' },
               ]}
-              onChange={(value) =>
-                setSettings({
-                  panelLocation: value,
-                })
-              }
+              onChange={(value) => setSettings({ triggerMode: value })}
             />
+            <div class={styles().settingRow}>
+              <Show when={settings().triggerMode === 'fixed'}>
+                <Select
+                  label="Trigger Position"
+                  options={[
+                    { label: 'Bottom Right', value: 'bottom-right' },
+                    { label: 'Bottom Left', value: 'bottom-left' },
+                    { label: 'Top Right', value: 'top-right' },
+                    { label: 'Top Left', value: 'top-left' },
+                    { label: 'Middle Right', value: 'middle-right' },
+                    { label: 'Middle Left', value: 'middle-left' },
+                  ]}
+                  value={settings().position}
+                  onChange={(value) => setSettings({ position: value })}
+                />
+              </Show>
+              <Select
+                label="Panel Position"
+                value={settings().panelLocation}
+                options={[
+                  { label: 'Top', value: 'top' },
+                  { label: 'Bottom', value: 'bottom' },
+                ]}
+                onChange={(value) => setSettings({ panelLocation: value })}
+              />
+            </div>
           </div>
-        </div>
-      </Section>
-    </MainPanel>
+        </Section>
+      </MainPanel>
+    </div>
   )
 }
diff --git a/packages/devtools/src/utils/constants.ts b/packages/devtools/src/utils/constants.ts
index 16bd59f0..3220065e 100644
--- a/packages/devtools/src/utils/constants.ts
+++ b/packages/devtools/src/utils/constants.ts
@@ -2,3 +2,8 @@
  * Maximum number of plugins that can be active simultaneously in the devtools
  */
 export const MAX_ACTIVE_PLUGINS = 3
+
+export const WORKBENCH_HEADER_HEIGHT = 36
+export const PLUGINS_STRIP_HEIGHT = 44
+export const PANEL_CLOSE_THRESHOLD = 70
+export const PANEL_MAX_VIEWPORT_RATIO = 0.9
diff --git a/packages/devtools/src/utils/storage.ts b/packages/devtools/src/utils/storage.ts
index aa46abfa..d5d35d8b 100644
--- a/packages/devtools/src/utils/storage.ts
+++ b/packages/devtools/src/utils/storage.ts
@@ -1,4 +1,6 @@
-export const getStorageItem = (key: string) => localStorage.getItem(key)
+export const getStorageItem = (key: string) => {
+  return localStorage.getItem(key)
+}
 export const setStorageItem = (key: string, value: string) => {
   try {
     localStorage.setItem(key, value)
diff --git a/packages/devtools/tests/index.test.ts b/packages/devtools/tests/index.test.ts
index 9ca0bdfc..b88b5f6e 100644
--- a/packages/devtools/tests/index.test.ts
+++ b/packages/devtools/tests/index.test.ts
@@ -1,7 +1,158 @@
-import { describe, expect, it } from 'vitest'
+import { createComponent } from 'solid-js'
+import { render } from 'solid-js/web'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import DevTools from '../src/devtools'
+import { TanStackDevtoolsCore } from '../src/core'
+import { DevtoolsProvider } from '../src/context/devtools-context'
+import { PiPProvider } from '../src/context/pip-context'
+import { mountDevtools } from '../src/mount-impl'
+import type { TanStackDevtoolsConfig } from '../src/context/devtools-context'
 
-describe('devtools', () => {
-  it('should pass', () => {
-    expect(true).toBe(true)
+vi.mock('../src/mount-impl', () => ({ mountDevtools: vi.fn() }))
+const mockedMount = vi.mocked(mountDevtools)
+
+const shellDisposers = new Map<HTMLElement, () => void>()
+const mountShell = (config: Partial<TanStackDevtoolsConfig>) => {
+  const host = document.body.appendChild(document.createElement('div'))
+  const dispose = render(
+    () =>
+      createComponent(DevtoolsProvider, {
+        plugins: [],
+        config: config as TanStackDevtoolsConfig,
+        get children() {
+          return createComponent(PiPProvider, {
+            get children() {
+              return createComponent(DevTools, {})
+            },
+          })
+        },
+      }),
+    host,
+  )
+  shellDisposers.set(host, dispose)
+  return host
+}
+const disposeShell = (host: HTMLElement) => {
+  shellDisposers.get(host)?.()
+  shellDisposers.delete(host)
+  host.remove()
+}
+
+beforeEach(() => {
+  localStorage.clear()
+  history.replaceState({}, '', '/')
+  mockedMount.mockReset()
+  vi.stubGlobal(
+    'ResizeObserver',
+    class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  )
+})
+
+afterEach(() => {
+  for (const [host, dispose] of shellDisposers) {
+    dispose()
+    host.remove()
+  }
+  shellDisposers.clear()
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+})
+
+describe('devtools core boundaries', () => {
+  it('preserves default and custom triggers', () => {
+    const defaultHost = mountShell({})
+    expect(
+      document.querySelector('button[aria-label="Open TanStack Devtools"] img'),
+    ).toHaveAttribute('alt', 'TanStack Devtools')
+    disposeShell(defaultHost)
+    const customTrigger = vi.fn((element: HTMLElement) => {
+      element.textContent = 'Custom trigger'
+    })
+    const customHost = mountShell({ customTrigger })
+    expect(document.body).toHaveTextContent('Custom trigger')
+    expect(customTrigger).toHaveBeenCalledOnce()
+    disposeShell(customHost)
+  })
+
+  it('preserves URL gating and the configured open hotkey', () => {
+    const blocked = mountShell({
+      requireUrlFlag: true,
+      urlFlag: 'tanstack-devtools',
+    })
+    expect(
+      document.querySelector('[aria-label="Open TanStack Devtools"]'),
+    ).toBeNull()
+    disposeShell(blocked)
+    history.replaceState({}, '', '/?tanstack-devtools')
+    mountShell({
+      requireUrlFlag: true,
+      urlFlag: 'tanstack-devtools',
+      openHotkey: ['Control', '~'],
+    })
+    expect(
+      document.querySelector('[aria-label="Open TanStack Devtools"]'),
+    ).not.toBeNull()
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: '~',
+        ctrlKey: true,
+        bubbles: true,
+      }),
+    )
+    expect(
+      document.querySelector('[data-testid="tanstack-devtools-panel"]'),
+    ).toHaveAttribute('data-open', 'true')
+  })
+
+  it('preserves copy-path source inspection', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } })
+    const target = document.body.appendChild(document.createElement('button'))
+    target.dataset.tsdSource = 'src/example.tsx:12:4'
+    Object.defineProperty(document, 'elementFromPoint', {
+      configurable: true,
+      value: vi.fn().mockReturnValue(target),
+    })
+    mountShell({ inspectHotkey: ['Shift'], sourceAction: 'copy-path' })
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Shift', bubbles: true }),
+    )
+    document.dispatchEvent(
+      new MouseEvent('mousemove', { clientX: 4, clientY: 4, bubbles: true }),
+    )
+    document.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, cancelable: true }),
+    )
+    await Promise.resolve()
+    expect(writeText).toHaveBeenCalledWith('src/example.tsx:12:4')
+  })
+
+  it('aborts a pending dynamic mount and resets after repeated mount errors', async () => {
+    mockedMount.mockReturnValue({
+      dispose: vi.fn(),
+      eventBus: { stop: vi.fn() },
+    })
+    const host = document.createElement('div')
+    const aborted = new TanStackDevtoolsCore({})
+    aborted.mount(host)
+    aborted.unmount()
+    await Promise.resolve()
+    await Promise.resolve()
+    expect(mockedMount).not.toHaveBeenCalled()
+
+    const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+    mockedMount.mockImplementation(() => {
+      throw new Error('render boom')
+    })
+    const failing = new TanStackDevtoolsCore({})
+    failing.mount(host)
+    await vi.waitFor(() => expect(error).toHaveBeenCalledTimes(1))
+    failing.mount(host)
+    await vi.waitFor(() => expect(error).toHaveBeenCalledTimes(2))
+    expect(() => failing.unmount()).toThrow('Devtools is not mounted')
   })
 })
diff --git a/packages/devtools/tests/semantic-color-usage.test.ts b/packages/devtools/tests/semantic-color-usage.test.ts
new file mode 100644
index 00000000..72418c92
--- /dev/null
+++ b/packages/devtools/tests/semantic-color-usage.test.ts
@@ -0,0 +1,94 @@
+import { readFileSync, readdirSync } from 'node:fs'
+import { extname, join, relative } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const packageRoot = process.cwd()
+const roots = [
+  'src/components',
+  'src/tabs',
+  'src/styles/use-styles.ts',
+  'src/devtools.tsx',
+  'src/utils/constants.ts',
+].map((path) => join(packageRoot, path))
+const extensions = new Set(['.ts', '.tsx'])
+const rawColor = /#[\da-f]{3,8}\b|\b(?:rgb|rgba|hsl|hsla|oklch)\(/i
+const gradient = /\b(?:linear|radial|conic)-gradient\(/i
+const allowedMarkers = new Map([
+  ['semantic-color-exempt: simulated-seo', /^src[\\/]tabs[\\/]seo-tab[\\/]/],
+  [
+    'semantic-color-exempt: vendor-mark',
+    /^src[\\/]tabs[\\/](?:seo-tab|plugin-registry)/,
+  ],
+  [
+    'semantic-color-exempt: source-highlight-alpha',
+    /^src[\\/]components[\\/]source-inspector\.tsx$/,
+  ],
+])
+const files = (path: string): Array<string> => {
+  const entry = readdirSync(path, { withFileTypes: true })
+  return entry.flatMap((item) => {
+    const child = join(path, item.name)
+    return item.isDirectory()
+      ? files(child)
+      : extensions.has(extname(child))
+        ? [child]
+        : []
+  })
+}
+const sourceFiles = roots.flatMap((path) =>
+  extname(path) ? [path] : files(path),
+)
+
+describe('core semantic color ownership', () => {
+  it('rejects every unmarked raw color and gradient in core-owned source', () => {
+    const violations = sourceFiles.flatMap((path) => {
+      const file = relative(packageRoot, path)
+      return readFileSync(path, 'utf8')
+        .split(/\r?\n/)
+        .flatMap((line, index) => {
+          if (!rawColor.test(line) && !gradient.test(line)) return []
+          const validMarker = [...allowedMarkers].some(
+            ([marker, allowedPath]) =>
+              line.includes(marker) && allowedPath.test(file),
+          )
+          return validMarker ? [] : [`${file}:${index + 1}: ${line.trim()}`]
+        })
+    })
+    expect(violations, violations.join('\n')).toEqual([])
+  })
+
+  it('keeps exemptions narrow and bans Marketplace gradients outright', () => {
+    const all = sourceFiles.map((path) => readFileSync(path, 'utf8')).join('\n')
+    for (const marker of allowedMarkers.keys()) expect(all).toContain(marker)
+    expect(
+      readFileSync(
+        join(packageRoot, 'src/tabs/plugin-marketplace.tsx'),
+        'utf8',
+      ),
+    ).not.toMatch(gradient)
+    for (const path of files(join(packageRoot, 'src/tabs/marketplace')))
+      expect(readFileSync(path, 'utf8')).not.toMatch(gradient)
+  })
+
+  it('does not style descendants owned by external plugins', () => {
+    const cssSource = readFileSync(
+      join(packageRoot, 'src/styles/use-styles.ts'),
+      'utf8',
+    )
+    expect(cssSource).not.toMatch(
+      /#plugin-container-[^`'"\s]+\s+(?:\*|>|\[[^\]]+\]|\.[\w-]+)/,
+    )
+    expect(cssSource).not.toMatch(/data-plugin-mount[^`'"\n]*(?:\*|>)/)
+  })
+
+  it('does not re-invert semantic Marketplace colors with a light/dark helper', () => {
+    const cssSource = readFileSync(
+      join(packageRoot, 'src/styles/use-styles.ts'),
+      'utf8',
+    )
+    const marketplaceSource = cssSource.slice(
+      cssSource.indexOf('// Plugin Marketplace Styles'),
+    )
+    expect(marketplaceSource).not.toMatch(/\bt\(/)
+  })
+})
diff --git a/packages/devtools/tests/seo-workbench.test.tsx b/packages/devtools/tests/seo-workbench.test.tsx
new file mode 100644
index 00000000..fccfefbb
--- /dev/null
+++ b/packages/devtools/tests/seo-workbench.test.tsx
@@ -0,0 +1,102 @@
+import { render } from 'solid-js/web'
+import { afterEach, describe, expect, it } from 'vitest'
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { resolveSemanticTheme } from '@tanstack/devtools-ui/internal'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+import { DevtoolsProvider } from '../src/context/devtools-context'
+import { SeoTab } from '../src/tabs/seo-tab'
+import type { TanStackDevtoolsConfig } from '../src/context/devtools-context'
+
+const disposers: Array<() => void> = []
+
+afterEach(() => {
+  while (disposers.length) disposers.pop()!()
+  document.body.replaceChildren()
+})
+
+const resolvedCssColor = (color: string) => {
+  const probe = document.body.appendChild(document.createElement('span'))
+  probe.style.color = color
+  const resolved = getComputedStyle(probe).color
+  probe.remove()
+  return resolved
+}
+
+const mountSeo = (theme: TanStackDevtoolsTheme) => {
+  const host = document.body.appendChild(document.createElement('div'))
+  const dispose = render(
+    () => (
+      <DevtoolsProvider
+        plugins={[]}
+        config={{ defaultOpen: true, theme } as TanStackDevtoolsConfig}
+      >
+        <ThemeContextProvider theme={theme}>
+          <SeoTab />
+        </ThemeContextProvider>
+      </DevtoolsProvider>
+    ),
+    host,
+  )
+  disposers.push(dispose)
+  return host
+}
+
+describe.each(['light', 'dark'] as const)('%s SEO workbench', (theme) => {
+  it('uses shared filled tabs and semantic preview title foregrounds', () => {
+    const host = mountSeo(theme)
+    const semantic = resolveSemanticTheme(theme)
+    const primaryColor = resolvedCssColor(semantic.color.text.primary)
+    const linkColor = resolvedCssColor(semantic.color.text.link)
+    const bar = host.querySelector<HTMLElement>(
+      'nav[aria-label="SEO sections"]',
+    )!
+    const tabs = [...bar.querySelectorAll<HTMLButtonElement>('button')]
+    const socialTab = tabs[0]!
+    const serpTab = tabs[1]!
+
+    expect(bar).toHaveAttribute('data-workbench-secondary-tabs')
+    expect(getComputedStyle(bar).height).toBe('44px')
+    expect(getComputedStyle(bar).borderBottomWidth).not.toBe('1px')
+    expect(socialTab).toHaveAttribute('data-tsd-selected', 'true')
+    expect(getComputedStyle(socialTab).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+
+    const socialTitles = [
+      ...host.querySelectorAll<HTMLElement>(
+        '[data-testid="social-preview-heading"], [data-testid="social-preview-title"]',
+      ),
+    ]
+    expect(socialTitles.length).toBeGreaterThan(0)
+    expect(
+      socialTitles.every(
+        (title) => getComputedStyle(title).color === primaryColor,
+      ),
+    ).toBe(true)
+
+    serpTab.click()
+    expect(serpTab).toHaveAttribute('data-tsd-selected', 'true')
+    expect(serpTab).toHaveAttribute('aria-current', 'page')
+    expect(socialTab).not.toHaveAttribute('data-tsd-selected')
+    const primaryTitles = [
+      ...host.querySelectorAll<HTMLElement>(
+        '[data-testid="serp-preview-label"], [data-testid="serp-preview-site-name"]',
+      ),
+    ]
+    const linkTitles = [
+      ...host.querySelectorAll<HTMLElement>(
+        '[data-testid="serp-preview-title"]',
+      ),
+    ]
+    expect(primaryTitles.length).toBeGreaterThan(0)
+    expect(linkTitles).toHaveLength(2)
+    expect(
+      primaryTitles.every(
+        (title) => getComputedStyle(title).color === primaryColor,
+      ),
+    ).toBe(true)
+    expect(
+      linkTitles.every((title) => getComputedStyle(title).color === linkColor),
+    ).toBe(true)
+  }, 10_000)
+})
diff --git a/packages/devtools/tests/workbench-secondary-tabs.test.tsx b/packages/devtools/tests/workbench-secondary-tabs.test.tsx
new file mode 100644
index 00000000..300ad1b0
--- /dev/null
+++ b/packages/devtools/tests/workbench-secondary-tabs.test.tsx
@@ -0,0 +1,169 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { createSignal } from 'solid-js'
+import { render } from 'solid-js/web'
+import { afterEach, describe, expect, it } from 'vitest'
+import { resolveSemanticTheme } from '@tanstack/devtools-ui/internal'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
+import { DevtoolsProvider } from '../src/context/devtools-context'
+import {
+  WorkbenchSecondaryTab,
+  WorkbenchSecondaryTabs,
+} from '../src/components/workbench-secondary-tabs'
+import type { TanStackDevtoolsConfig } from '../src/context/devtools-context'
+
+const disposers: Array<() => void> = []
+
+afterEach(() => {
+  while (disposers.length) disposers.pop()!()
+  document.body.replaceChildren()
+})
+
+const resolvedCssColor = (color: string) => {
+  const probe = document.body.appendChild(document.createElement('span'))
+  probe.style.color = color
+  const resolved = getComputedStyle(probe).color
+  probe.remove()
+  return resolved
+}
+
+const contrastRatio = (foreground: string, background: string) => {
+  const luminance = (color: string) => {
+    const channels = color
+      .match(/[\d.]+/g)!
+      .slice(0, 3)
+      .map(Number)
+      .map((channel) => channel / 255)
+      .map((channel) =>
+        channel <= 0.04045
+          ? channel / 12.92
+          : ((channel + 0.055) / 1.055) ** 2.4,
+      )
+    return 0.2126 * channels[0]! + 0.7152 * channels[1]! + 0.0722 * channels[2]!
+  }
+  const values = [luminance(foreground), luminance(background)].sort(
+    (a, b) => b - a,
+  )
+  return (values[0]! + 0.05) / (values[1]! + 0.05)
+}
+
+const mountTabs = (theme: TanStackDevtoolsTheme) => {
+  const host = document.body.appendChild(document.createElement('div'))
+  const dispose = render(
+    () => (
+      <DevtoolsProvider
+        plugins={[]}
+        config={{ defaultOpen: true, theme } as TanStackDevtoolsConfig}
+      >
+        {(() => {
+          const [active, setActive] = createSignal<'one' | 'two'>('one')
+          return (
+            <WorkbenchSecondaryTabs
+              ariaLabel="Test secondary tabs"
+              dataTestId="secondary-tabs"
+            >
+              <WorkbenchSecondaryTab
+                selected={active() === 'one'}
+                ariaCurrent={active() === 'one' ? 'page' : undefined}
+                onClick={() => setActive('one')}
+              >
+                One
+              </WorkbenchSecondaryTab>
+              <WorkbenchSecondaryTab
+                selected={active() === 'two'}
+                ariaCurrent={active() === 'two' ? 'page' : undefined}
+                onClick={() => setActive('two')}
+              >
+                Two
+              </WorkbenchSecondaryTab>
+            </WorkbenchSecondaryTabs>
+          )
+        })()}
+      </DevtoolsProvider>
+    ),
+    host,
+  )
+  disposers.push(dispose)
+  return host
+}
+
+it('routes both Plugins and SEO through the shared secondary tab primitives', () => {
+  const root = process.cwd()
+  const plugins = readFileSync(
+    join(root, 'src/components/plugins-strip.tsx'),
+    'utf8',
+  )
+  const seo = readFileSync(join(root, 'src/tabs/seo-tab/index.tsx'), 'utf8')
+
+  for (const source of [plugins, seo]) {
+    expect(source).toMatch(/WorkbenchSecondaryTabs/)
+    expect(source).toMatch(/WorkbenchSecondaryTab/)
+    expect(source).toMatch(
+      /components[\\/]workbench-secondary-tabs|\.\/workbench-secondary-tabs/,
+    )
+  }
+})
+
+describe.each(['light', 'dark'] as const)(
+  '%s shared secondary tabs',
+  (theme) => {
+    it('keeps fixed scroll geometry and semantic inactive, selected, and focus hooks', () => {
+      const host = mountTabs(theme)
+      const bar = host.querySelector<HTMLElement>(
+        '[data-testid="secondary-tabs"]',
+      )!
+      const tabs = [...bar.querySelectorAll<HTMLButtonElement>('button')]
+      const one = tabs[0]!
+      const two = tabs[1]!
+      const semantic = resolveSemanticTheme(theme)
+
+      expect(bar).toHaveAttribute('data-workbench-secondary-tabs')
+      expect({
+        height: getComputedStyle(bar).height,
+        minHeight: getComputedStyle(bar).minHeight,
+        flexBasis: getComputedStyle(bar).flexBasis,
+        flexShrink: getComputedStyle(bar).flexShrink,
+        paddingBlock: getComputedStyle(bar).paddingBlock,
+        paddingInlineStart: getComputedStyle(bar).paddingInlineStart,
+        paddingInlineEnd: getComputedStyle(bar).paddingInlineEnd,
+        overflowX: getComputedStyle(bar).overflowX,
+        scrollPaddingInlineStart:
+          getComputedStyle(bar).scrollPaddingInlineStart,
+        scrollPaddingInlineEnd: getComputedStyle(bar).scrollPaddingInlineEnd,
+        gap: Number.parseFloat(getComputedStyle(bar).gap),
+      }).toEqual({
+        height: '44px',
+        minHeight: '44px',
+        flexBasis: '44px',
+        flexShrink: '0',
+        paddingBlock: '6px',
+        paddingInlineStart: '8px',
+        paddingInlineEnd: '8px',
+        overflowX: 'auto',
+        scrollPaddingInlineStart: '8px',
+        scrollPaddingInlineEnd: '8px',
+        gap: 0,
+      })
+      expect(getComputedStyle(bar).borderBottomWidth).not.toBe('1px')
+      expect(one).toHaveAttribute('data-workbench-secondary-tab')
+      expect(one).toHaveAttribute('data-tsd-selected', 'true')
+      expect(one).toHaveAttribute('aria-current', 'page')
+      expect(getComputedStyle(one).backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+      expect(getComputedStyle(two).color).toBe(
+        resolvedCssColor(semantic.color.text.secondary),
+      )
+      expect(
+        contrastRatio(
+          getComputedStyle(two).color,
+          getComputedStyle(bar).backgroundColor,
+        ),
+      ).toBeGreaterThanOrEqual(4.5)
+
+      two.click()
+      expect(two).toHaveAttribute('data-tsd-selected', 'true')
+      expect(two).toHaveAttribute('aria-current', 'page')
+      expect(one).not.toHaveAttribute('data-tsd-selected')
+      expect(one).not.toHaveAttribute('aria-current')
+    })
+  },
+)
diff --git a/packages/devtools/tests/workbench.test.tsx b/packages/devtools/tests/workbench.test.tsx
new file mode 100644
index 00000000..9b43d5d9
--- /dev/null
+++ b/packages/devtools/tests/workbench.test.tsx
@@ -0,0 +1,1255 @@
+import { createComponent } from 'solid-js'
+import { render } from 'solid-js/web'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import DevTools from '../src/devtools'
+import { DevtoolsProvider } from '../src/context/devtools-context'
+import { PiPProvider } from '../src/context/pip-context'
+import { PluginSectionComponent } from '../src/tabs/marketplace/plugin-section'
+import { TANSTACK_DEVTOOLS_STATE } from '../src/utils/storage'
+import {
+  DEVTOOLS_FONT_STYLE_ID,
+  DEVTOOLS_FORCED_COLORS_STYLE_ID,
+  resolveSemanticTheme,
+} from '@tanstack/devtools-ui/internal'
+import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
+import {
+  PANEL_CLOSE_THRESHOLD,
+  PANEL_MAX_VIEWPORT_RATIO,
+  WORKBENCH_HEADER_HEIGHT,
+} from '../src/utils/constants'
+import type {
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
+  TanStackDevtoolsPluginProps,
+} from '../src/context/devtools-context'
+
+const events: Array<string> = []
+const disposers: Array<() => void> = []
+const originalInnerWidth = window.innerWidth
+const originalInnerHeight = window.innerHeight
+let popup: Window
+
+const plugin = (id: string): TanStackDevtoolsPlugin => ({
+  id,
+  name: (heading) => {
+    heading.textContent = `Plugin ${id}`
+  },
+  render: (mount, props: TanStackDevtoolsPluginProps) => {
+    events.push(`render:${id}:${props.theme}:${props.devtoolsOpen}`)
+    mount.textContent = id
+  },
+  destroy: (pluginId) => events.push(`destroy:${pluginId}`),
+})
+
+const click = (name: string) => {
+  const control = [
+    ...document.querySelectorAll<HTMLElement>('button,[role="button"]'),
+  ].find(
+    (node) =>
+      node.getAttribute('aria-label') === name ||
+      node.textContent?.trim() === name,
+  )
+  expect(control, `missing control ${name}`).toBeTruthy()
+  control!.click()
+}
+
+type AuthoredStyleRule = {
+  conditions: Array<string>
+  selector: string
+  cssText: string
+}
+
+const collectStyleRules = (
+  rules: CSSRuleList,
+  conditions: Array<string> = [],
+): Array<AuthoredStyleRule> =>
+  [...rules].flatMap((rule) => {
+    const grouping = rule as CSSRule & {
+      cssRules?: CSSRuleList
+      conditionText?: string
+      media?: MediaList
+    }
+    if (grouping.cssRules) {
+      const condition = grouping.conditionText || grouping.media?.mediaText
+      const nestedRules = collectStyleRules(
+        grouping.cssRules,
+        condition ? [...conditions, condition] : conditions,
+      )
+      if (nestedRules.length > 0) return nestedRules
+
+      const mediaText = grouping.media?.mediaText
+      if (mediaText) {
+        const body = rule.cssText
+          .replace(/^@media[^{}]+\{/, '')
+          .replace(/\}$/, '')
+        return [...body.matchAll(/([^{}]+)\{([^{}]+)\}/g)].map((match) => ({
+          conditions: [...conditions, mediaText],
+          selector: match[1]!.trim(),
+          cssText: `${match[1]!.trim()} { ${match[2]!.trim()} }`,
+        }))
+      }
+    }
+    const styleRule = rule as CSSStyleRule
+    return styleRule.selectorText
+      ? [
+          {
+            conditions,
+            selector: String(styleRule.selectorText),
+            cssText: rule.cssText,
+          },
+        ]
+      : []
+  })
+
+const authoredStyleRules = () =>
+  [...document.styleSheets].flatMap((sheet) => {
+    try {
+      return collectStyleRules(sheet.cssRules)
+    } catch {
+      return []
+    }
+  })
+
+const mountWorkbench = (
+  plugins: Array<TanStackDevtoolsPlugin>,
+  config: Partial<TanStackDevtoolsConfig> = {},
+) => {
+  const host = document.body.appendChild(document.createElement('div'))
+  const dispose = render(
+    () =>
+      createComponent(DevtoolsProvider, {
+        plugins,
+        config: { defaultOpen: true, ...config } as TanStackDevtoolsConfig,
+        get children() {
+          return createComponent(PiPProvider, {
+            get children() {
+              return createComponent(DevTools, {})
+            },
+          })
+        },
+      }),
+    host,
+  )
+  disposers.push(dispose)
+  return host
+}
+
+beforeEach(() => {
+  events.length = 0
+  localStorage.clear()
+  delete document.documentElement.dataset.tanstackDevtoolsTheme
+  history.replaceState({}, '', '/')
+  vi.stubGlobal(
+    'ResizeObserver',
+    class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  )
+  const popupDocument = document.implementation.createHTMLDocument('PiP')
+  const listeners = new Map<string, EventListener>()
+  popup = {
+    document: popupDocument,
+    close: vi.fn(),
+    addEventListener: vi.fn((type: string, listener: EventListener) =>
+      listeners.set(type, listener),
+    ),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn((event: Event) => {
+      listeners.get(event.type)?.(event)
+      return true
+    }),
+  } as unknown as Window
+  vi.spyOn(window, 'open').mockReturnValue(popup)
+})
+
+afterEach(() => {
+  try {
+    while (disposers.length) disposers.pop()!()
+    document.body.replaceChildren()
+  } finally {
+    vi.useRealTimers()
+    vi.unstubAllEnvs()
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: originalInnerWidth,
+    })
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: originalInnerHeight,
+    })
+  }
+})
+
+describe('workbench', { timeout: 30_000 }, () => {
+  it('keeps the secondary Plugins bar fixed-height without hover timers', () => {
+    vi.useFakeTimers()
+    expect({
+      WORKBENCH_HEADER_HEIGHT,
+      PANEL_CLOSE_THRESHOLD,
+      PANEL_MAX_VIEWPORT_RATIO,
+    }).toEqual({
+      WORKBENCH_HEADER_HEIGHT: 36,
+      PANEL_CLOSE_THRESHOLD: 70,
+      PANEL_MAX_VIEWPORT_RATIO: 0.9,
+    })
+    mountWorkbench([plugin('one')])
+    const strip = document.querySelector<HTMLElement>(
+      '[data-testid="plugins-strip"]',
+    )!
+    expect(getComputedStyle(strip).height).toBe('44px')
+    const timersBeforeInteraction = vi.getTimerCount()
+    strip.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+    strip.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
+    strip.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
+    strip.dispatchEvent(new FocusEvent('focusout', { bubbles: true }))
+    expect(getComputedStyle(strip).height).toBe('44px')
+    expect(vi.getTimerCount()).toBe(timersBeforeInteraction)
+  })
+
+  it('closes only after pointer resize crosses from 70px to 69px', () => {
+    localStorage.setItem(
+      TANSTACK_DEVTOOLS_STATE,
+      JSON.stringify({
+        activeTab: 'plugins',
+        activePlugins: [],
+        height: 70,
+        persistOpen: true,
+      }),
+    )
+    mountWorkbench([plugin('one'), plugin('two')], {
+      panelLocation: 'bottom',
+    })
+    const outerPanel = document.querySelector<HTMLElement>(
+      '[data-testid="tanstack-devtools-panel"]',
+    )!
+    const contentPanel = document.querySelector<HTMLElement>(
+      '[data-testid="tanstack-devtools-content-panel"]',
+    )!
+    vi.spyOn(contentPanel, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      top: 0,
+      right: 800,
+      bottom: 70,
+      left: 0,
+      width: 800,
+      height: 70,
+      toJSON: () => ({}),
+    })
+    const separator = document.querySelector<HTMLElement>('[role="separator"]')!
+    const down = new MouseEvent('mousedown', { button: 0, bubbles: true })
+    Object.defineProperty(down, 'pageY', { value: 100 })
+    separator.dispatchEvent(down)
+    const move = new MouseEvent('mousemove', { bubbles: true })
+    Object.defineProperty(move, 'pageY', { value: 101 })
+    try {
+      document.dispatchEvent(move)
+      expect(
+        JSON.parse(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!).height,
+      ).toBe(69)
+      expect(outerPanel).toHaveAttribute('data-open', 'false')
+    } finally {
+      document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }))
+    }
+  })
+
+  it('uses document client width and never draws an always-visible panel edge', () => {
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 1024,
+    })
+    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(
+      1007,
+    )
+    mountWorkbench([plugin('one')])
+    const outerPanel = document.querySelector<HTMLElement>(
+      '[data-testid="tanstack-devtools-panel"]',
+    )!
+    const contentPanel = document.querySelector<HTMLElement>(
+      '[data-testid="tanstack-devtools-content-panel"]',
+    )!
+    expect(outerPanel.style.inlineSize).toBe('1007px')
+    expect(getComputedStyle(outerPanel).boxSizing).toBe('border-box')
+    expect(getComputedStyle(outerPanel).borderTopStyle).toBe('none')
+    expect(getComputedStyle(contentPanel).width).toBe('100%')
+    expect(getComputedStyle(contentPanel).boxSizing).toBe('border-box')
+  })
+
+  it('tracks document client width changes without a window resize and disconnects its observer', () => {
+    let width = 1007
+    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockImplementation(
+      () => width,
+    )
+    const observeRoot = vi.fn()
+    const disconnectRoot = vi.fn()
+    let observerCallback: ResizeObserverCallback | undefined
+    vi.stubGlobal(
+      'ResizeObserver',
+      class ResizeObserver {
+        private readonly callback: ResizeObserverCallback
+        private observesRoot = false
+
+        constructor(callback: ResizeObserverCallback) {
+          this.callback = callback
+        }
+        observe = (element: Element) => {
+          if (element !== document.documentElement) return
+          this.observesRoot = true
+          observerCallback = this.callback
+          observeRoot(element)
+        }
+        unobserve() {}
+        disconnect = () => {
+          if (this.observesRoot) disconnectRoot()
+        }
+      },
+    )
+
+    mountWorkbench([plugin('one')])
+    const outerPanel = document.querySelector<HTMLElement>(
+      '[data-testid="tanstack-devtools-panel"]',
+    )!
+    expect(observeRoot).toHaveBeenCalledWith(document.documentElement)
+    expect(outerPanel.style.inlineSize).toBe('1007px')
+
+    width = 991
+    observerCallback!([], {} as ResizeObserver)
+    expect(outerPanel.style.inlineSize).toBe('991px')
+
+    disposers.pop()!()
+    expect(disconnectRoot).toHaveBeenCalledOnce()
+  })
+
+  it.each(['bottom', 'top'] as const)(
+    'collapses and restores the %s drawer without changing height or plugin lifecycle',
+    (panelLocation) => {
+      localStorage.setItem(
+        TANSTACK_DEVTOOLS_STATE,
+        JSON.stringify({
+          activeTab: 'plugins',
+          activePlugins: ['one'],
+          height: 417,
+          persistOpen: true,
+        }),
+      )
+      mountWorkbench([plugin('one')], { panelLocation })
+      const outerPanel = document.querySelector<HTMLElement>(
+        '[data-testid="tanstack-devtools-panel"]',
+      )!
+      const storedBefore = localStorage.getItem(TANSTACK_DEVTOOLS_STATE)
+      const collapse = document.querySelector<HTMLButtonElement>(
+        'button[aria-label="Collapse TanStack Devtools drawer"]',
+      )!
+
+      expect(collapse).toHaveAttribute('type', 'button')
+      expect(collapse).toHaveAttribute('data-tsd-control')
+      expect(collapse).toHaveAttribute('aria-expanded', 'true')
+      expect(collapse).toHaveAttribute('data-panel-location', panelLocation)
+      collapse.click()
+      expect(outerPanel).toHaveAttribute('data-open', 'true')
+      expect(outerPanel).toHaveAttribute('data-collapsed', 'true')
+      expect(outerPanel.style.transform).toBe(
+        panelLocation === 'top' ? 'translateY(-100%)' : 'translateY(100%)',
+      )
+      expect(collapse).toHaveAttribute(
+        'aria-label',
+        'Expand TanStack Devtools drawer',
+      )
+      expect(collapse).toHaveAttribute('aria-expanded', 'false')
+      expect(
+        document.querySelector('[data-testid="devtools-drawer-content"]'),
+      ).toHaveAttribute('aria-hidden', 'true')
+      expect(
+        document.querySelector('[data-testid="devtools-drawer-content"]'),
+      ).toHaveAttribute('inert')
+      expect(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)).toBe(storedBefore)
+      expect(document.querySelector('[data-plugin-mount]')).not.toBeNull()
+      expect(events).not.toContain('destroy:one')
+
+      collapse.click()
+      expect(outerPanel).toHaveAttribute('data-collapsed', 'false')
+      expect(outerPanel.style.height).toBe('417px')
+      expect(outerPanel.style.transform).toBe('translateY(0px)')
+      expect(
+        document.querySelector('[data-testid="devtools-drawer-content"]'),
+      ).not.toHaveAttribute('aria-hidden')
+      expect(
+        document.querySelector('[data-testid="devtools-drawer-content"]'),
+      ).not.toHaveAttribute('inert')
+      expect(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)).toBe(storedBefore)
+      expect(events).not.toContain('destroy:one')
+    },
+  )
+
+  it.each([
+    [
+      'the trigger',
+      () => {
+        click('Close TanStack Devtools')
+        click('Open TanStack Devtools')
+      },
+    ],
+    [
+      'the open hotkey',
+      () => {
+        click('Close TanStack Devtools')
+        document.dispatchEvent(
+          new KeyboardEvent('keydown', {
+            key: '~',
+            ctrlKey: true,
+            bubbles: true,
+          }),
+        )
+      },
+    ],
+  ] as const)(
+    'expands a collapsed drawer when Devtools opens through %s',
+    async (_, openDevtools) => {
+      mountWorkbench([plugin('one')])
+      await Promise.resolve()
+      const outerPanel = document.querySelector<HTMLElement>(
+        '[data-testid="tanstack-devtools-panel"]',
+      )!
+      const collapse = document.querySelector<HTMLButtonElement>(
+        'button[aria-label="Collapse TanStack Devtools drawer"]',
+      )!
+
+      collapse.click()
+      expect(outerPanel).toHaveAttribute('data-collapsed', 'true')
+
+      openDevtools()
+      expect(outerPanel).toHaveAttribute('data-open', 'true')
+      expect(outerPanel).toHaveAttribute('data-collapsed', 'false')
+    },
+  )
+
+  it('expands a collapsed drawer when an external event opens Devtools', async () => {
+    vi.stubEnv('NODE_ENV', 'development')
+    vi.resetModules()
+    const [
+      { default: EventDrivenDevTools },
+      { DevtoolsProvider: EventDrivenDevtoolsProvider },
+      { PiPProvider: EventDrivenPiPProvider },
+    ] = await Promise.all([
+      import('../src/devtools'),
+      import('../src/context/devtools-context'),
+      import('../src/context/pip-context'),
+    ])
+    const eventBus = new ClientEventBus()
+    eventBus.start()
+    try {
+      const host = document.body.appendChild(document.createElement('div'))
+      const dispose = render(
+        () =>
+          createComponent(EventDrivenDevtoolsProvider, {
+            plugins: [plugin('one')],
+            config: { defaultOpen: true } as TanStackDevtoolsConfig,
+            get children() {
+              return createComponent(EventDrivenPiPProvider, {
+                get children() {
+                  return createComponent(EventDrivenDevTools, {})
+                },
+              })
+            },
+          }),
+        host,
+      )
+      disposers.push(dispose)
+      const outerPanel = document.querySelector<HTMLElement>(
+        '[data-testid="tanstack-devtools-panel"]',
+      )!
+      const collapse = document.querySelector<HTMLButtonElement>(
+        'button[aria-label="Collapse TanStack Devtools drawer"]',
+      )!
+
+      collapse.click()
+      expect(outerPanel).toHaveAttribute('data-collapsed', 'true')
+
+      window.dispatchEvent(
+        new CustomEvent('tanstack-dispatch-event', {
+          detail: {
+            type: 'tanstack-devtools-core:trigger-toggled',
+            payload: { isOpen: true },
+            pluginId: 'tanstack-devtools-core',
+          },
+        }),
+      )
+
+      expect(outerPanel).toHaveAttribute('data-collapsed', 'false')
+    } finally {
+      eventBus.stop()
+    }
+  })
+
+  it.each([
+    ['bottom', 'ArrowUp', 410],
+    ['bottom', 'ArrowDown', 390],
+    ['top', 'ArrowDown', 410],
+    ['top', 'ArrowUp', 390],
+  ] as const)('resizes a %s panel with %s', (panelLocation, key, expected) => {
+    mountWorkbench([plugin('one')], { panelLocation })
+    const separator = document.querySelector<HTMLElement>('[role="separator"]')!
+    separator.dispatchEvent(
+      new KeyboardEvent('keydown', { key, bubbles: true }),
+    )
+    expect(separator).toHaveAttribute('aria-valuenow', String(expected))
+    expect(separator).toHaveAttribute('data-tsd-control')
+    expect(separator).toHaveAttribute('data-tsd-separator')
+  })
+
+  it('supports Shift, Home, End, 90% clamp, and PiP stylesheet installation', () => {
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: 1000,
+    })
+    mountWorkbench([plugin('one')])
+    const separator = document.querySelector<HTMLElement>('[role="separator"]')!
+    separator.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'ArrowUp',
+        shiftKey: true,
+        bubbles: true,
+      }),
+    )
+    expect(separator).toHaveAttribute('aria-valuenow', '450')
+    separator.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),
+    )
+    expect(separator).toHaveAttribute('aria-valuenow', '70')
+    separator.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'End', bubbles: true }),
+    )
+    expect(separator).toHaveAttribute('aria-valuenow', '900')
+    const attachedHeight = JSON.parse(
+      localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!,
+    ).height
+    click('Detach TanStack Devtools')
+    expect(popup.document.querySelector('[role="separator"]')).toBeNull()
+    expect(popup.document.getElementById(DEVTOOLS_FONT_STYLE_ID)).not.toBeNull()
+    expect(
+      popup.document.getElementById(DEVTOOLS_FORCED_COLORS_STYLE_ID),
+    ).not.toBeNull()
+    popup.dispatchEvent(new Event('pagehide'))
+    expect(
+      JSON.parse(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!).height,
+    ).toBe(attachedHeight)
+  })
+
+  it('moves the theme attribute into PiP and restores the main document on close', () => {
+    document.documentElement.dataset.tanstackDevtoolsTheme = 'host'
+    mountWorkbench([plugin('one')], { theme: 'dark' })
+    expect(document.documentElement.dataset.tanstackDevtoolsTheme).toBe('dark')
+
+    click('Detach TanStack Devtools')
+    expect(popup.document.documentElement.dataset.tanstackDevtoolsTheme).toBe(
+      'dark',
+    )
+    expect(document.documentElement.dataset.tanstackDevtoolsTheme).toBe('host')
+
+    popup.dispatchEvent(new Event('pagehide'))
+    expect(document.documentElement.dataset.tanstackDevtoolsTheme).toBe('dark')
+  })
+
+  it('keeps the active theme when another Devtools instance unmounts', () => {
+    document.documentElement.dataset.tanstackDevtoolsTheme = 'host'
+    mountWorkbench([plugin('one')], { theme: 'light' })
+    mountWorkbench([plugin('two')], { theme: 'dark' })
+    expect(document.documentElement.dataset.tanstackDevtoolsTheme).toBe('dark')
+
+    disposers.pop()!()
+    expect(document.documentElement.dataset.tanstackDevtoolsTheme).toBe('light')
+
+    disposers.pop()!()
+    expect(document.documentElement.dataset.tanstackDevtoolsTheme).toBe('host')
+  })
+
+  it('authors the 360px wordmark and reduced-motion CSS without JS state flags', () => {
+    mountWorkbench([plugin('one')])
+    const header = document.querySelector('[data-testid="workbench-header"]')!
+    const wordmark = document.querySelector<HTMLElement>(
+      '[data-testid="workbench-wordmark"]',
+    )!
+    expect(header).toHaveAttribute('aria-label', 'TanStack Devtools')
+    const rules = authoredStyleRules()
+    const wordmarkClasses = [...wordmark.classList]
+    expect(
+      rules.some(
+        (rule) =>
+          rule.conditions.some((condition) =>
+            /max-width:\s*360px/i.test(condition),
+          ) &&
+          wordmarkClasses.some((className) =>
+            rule.selector.includes(`.${className}`),
+          ) &&
+          /display:\s*none/i.test(rule.cssText),
+      ),
+    ).toBe(true)
+    expect(
+      rules.some(
+        (rule) =>
+          rule.conditions.some((condition) =>
+            /prefers-reduced-motion:\s*reduce/i.test(condition),
+          ) && /transition-duration:\s*0ms/i.test(rule.cssText),
+      ),
+    ).toBe(true)
+  })
+
+  it('keeps the workbench destinations ghosted, identifiable, and destination-scoped', () => {
+    mountWorkbench([plugin('one')])
+    const header = document.querySelector<HTMLElement>(
+      '[data-testid="workbench-header"]',
+    )!
+    const logo = header.querySelector<HTMLImageElement>(
+      'img[alt="TanStack Devtools"]',
+    )!
+    const plugins = [
+      ...header.querySelectorAll<HTMLButtonElement>('button'),
+    ].find((button) => button.textContent?.trim() === 'Plugins')!
+    const seo = [...header.querySelectorAll<HTMLButtonElement>('button')].find(
+      (button) => button.textContent?.trim() === 'SEO',
+    )!
+    const settings = header.querySelector<HTMLButtonElement>(
+      'button[aria-label="Settings"]',
+    )!
+
+    expect(logo.getAttribute('src')).toMatch(/tanstack-logo\.png/)
+    expect(settings).toHaveAttribute('title', 'Settings')
+    expect(settings.textContent?.trim()).toBe('')
+    expect(settings.querySelector('svg')).not.toBeNull()
+    for (const action of header.querySelectorAll<HTMLButtonElement>('button')) {
+      expect(getComputedStyle(action).borderStyle).toBe('none')
+      if (action.hasAttribute('data-tsd-selected')) {
+        expect(getComputedStyle(action).backgroundColor).not.toBe(
+          'rgba(0, 0, 0, 0)',
+        )
+      } else {
+        expect(getComputedStyle(action).backgroundColor).toBe(
+          'rgba(0, 0, 0, 0)',
+        )
+      }
+    }
+
+    expect(plugins).toHaveAttribute('data-tsd-selected', 'true')
+    expect(
+      document.querySelector('[data-testid="plugins-strip"]'),
+    ).not.toBeNull()
+    seo.click()
+    expect(seo).toHaveAttribute('data-tsd-selected', 'true')
+    expect(plugins).not.toHaveAttribute('data-tsd-selected')
+    expect(document.querySelector('[data-testid="plugins-strip"]')).toBeNull()
+    settings.click()
+    expect(settings).toHaveAttribute('data-tsd-selected', 'true')
+    expect(seo).not.toHaveAttribute('data-tsd-selected')
+    expect(document.querySelector('[data-testid="plugins-strip"]')).toBeNull()
+  })
+
+  it('promotes Marketplace to the main nav and uses the approved cogs settings icon', () => {
+    mountWorkbench([plugin('one')])
+    const header = document.querySelector<HTMLElement>(
+      '[data-testid="workbench-header"]',
+    )!
+    const destinations = header.querySelector<HTMLElement>(
+      '[data-testid="workbench-destinations"]',
+    )!
+    const marketplace = [
+      ...destinations.querySelectorAll<HTMLButtonElement>('button'),
+    ].find((button) => button.textContent?.trim() === 'Marketplace')!
+    const plugins = [
+      ...destinations.querySelectorAll<HTMLButtonElement>('button'),
+    ].find((button) => button.textContent?.trim() === 'Plugins')!
+    const strip = document.querySelector<HTMLElement>(
+      '[data-testid="plugins-strip"]',
+    )!
+    const activePluginsBefore = localStorage.getItem(TANSTACK_DEVTOOLS_STATE)
+
+    expect(marketplace).toBeInTheDocument()
+    expect(
+      [...strip.querySelectorAll('button')].some(
+        (button) => button.textContent?.trim() === 'Marketplace',
+      ),
+    ).toBe(false)
+    marketplace.click()
+    expect(marketplace).toHaveAttribute('aria-current', 'page')
+    expect(marketplace).toHaveAttribute('data-tsd-selected', 'true')
+    expect(plugins).not.toHaveAttribute('data-tsd-selected')
+    expect(getComputedStyle(marketplace).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+    expect(document.querySelector('[data-testid="plugins-strip"]')).toBeNull()
+    expect(
+      document.querySelector('[data-testid="plugin-marketplace"]'),
+    ).toBeInTheDocument()
+    expect(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)).toBe(
+      activePluginsBefore,
+    )
+    expect(events).not.toContain('destroy:one')
+
+    const settings = header.querySelector<HTMLButtonElement>(
+      'button[aria-label="Settings"]',
+    )!
+    expect(settings).toHaveAttribute('title', 'Settings')
+    expect(settings).toHaveAttribute('data-icon', 'cogs')
+    expect(settings.querySelector('svg')).not.toBeNull()
+
+    plugins.click()
+    expect(
+      document.querySelector('[data-testid="plugins-strip"]'),
+    ).not.toBeNull()
+    expect(document.querySelector('[data-plugin-mount]')).not.toBeNull()
+    expect(events).not.toContain('destroy:one')
+  })
+
+  it('connects the active destination to the strip and preserves header edge geometry', () => {
+    mountWorkbench([plugin('one')], { theme: 'dark' })
+    const header = document.querySelector<HTMLElement>(
+      '[data-testid="workbench-header"]',
+    )!
+    const plugins = [
+      ...header.querySelectorAll<HTMLButtonElement>('button'),
+    ].find((button) => button.textContent?.trim() === 'Plugins')!
+    const seo = [...header.querySelectorAll<HTMLButtonElement>('button')].find(
+      (button) => button.textContent?.trim() === 'SEO',
+    )!
+    const marketplace = [
+      ...header.querySelectorAll<HTMLButtonElement>('button'),
+    ].find((button) => button.textContent?.trim() === 'Marketplace')!
+    const actions = [
+      'Settings',
+      'Detach TanStack Devtools',
+      'Close TanStack Devtools',
+    ].map((label) =>
+      header.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`),
+    )
+    const strip = document.querySelector<HTMLElement>(
+      '[data-testid="plugins-strip"]',
+    )!
+    const logo = header.querySelector<HTMLImageElement>(
+      'img[alt="TanStack Devtools"]',
+    )!
+    const destinations = header.querySelector<HTMLElement>(
+      '[data-testid="workbench-destinations"]',
+    )!
+
+    expect(getComputedStyle(header).paddingRight).toBe('8px')
+    expect(getComputedStyle(destinations).display).toBe('inline-flex')
+    expect(Number.parseFloat(getComputedStyle(destinations).gap)).toBe(0)
+    expect(plugins.parentElement).toBe(destinations)
+    expect(marketplace.parentElement).toBe(destinations)
+    expect(seo.parentElement).toBe(destinations)
+    for (const destination of [plugins, marketplace, seo]) {
+      expect(getComputedStyle(destination).paddingInline).toBe('12px')
+    }
+    for (const action of actions) {
+      expect(action).not.toBeNull()
+      expect(getComputedStyle(action!).width).toBe('36px')
+      expect(getComputedStyle(action!).height).toBe('36px')
+    }
+    expect(getComputedStyle(plugins).backgroundColor).toBe(
+      getComputedStyle(strip).backgroundColor,
+    )
+    expect(getComputedStyle(plugins).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+    expect(getComputedStyle(seo).backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    expect(getComputedStyle(logo).filter).not.toBe('none')
+    const stripClass = [...strip.classList][0]!
+    const headerClass = [...header.classList][0]!
+    expect(
+      authoredStyleRules().some(
+        (rule) =>
+          rule.selector.includes(`.${headerClass} button:hover`) &&
+          /:not\(\[data-tsd-selected=["']true["']\]\)/.test(rule.selector),
+      ),
+    ).toBe(true)
+    expect(
+      authoredStyleRules().some(
+        (rule) =>
+          rule.selector.includes(`.${stripClass}`) &&
+          /height:\s*44px/i.test(rule.cssText) &&
+          /padding-block:\s*6px/i.test(rule.cssText) &&
+          /padding-inline-end:\s*8px/i.test(rule.cssText) &&
+          /scroll-padding-inline-end:\s*8px/i.test(rule.cssText),
+      ),
+    ).toBe(true)
+    expect(
+      authoredStyleRules().some(
+        (rule) =>
+          rule.conditions.some((condition) =>
+            /max-width:\s*361px/i.test(condition),
+          ) &&
+          rule.selector.includes(`.${plugins.className}`) &&
+          /padding-inline:\s*4px/i.test(rule.cssText),
+      ),
+    ).toBe(true)
+  })
+
+  it('reveals the resize line immediately and keeps trigger hover free of image outlines', () => {
+    mountWorkbench([plugin('one')])
+    const resize = document.querySelector<HTMLElement>(
+      '[data-tsd-separator="resize"]',
+    )!
+    const resizeClass = [...resize.classList][0]!
+    const trigger = document.querySelector<HTMLButtonElement>(
+      'button[aria-label="Open TanStack Devtools"]',
+    )!
+    const triggerClasses = [...trigger.classList]
+    const rules = authoredStyleRules()
+
+    expect(getComputedStyle(resize).height).toBe('24px')
+    expect(
+      rules.some(
+        (rule) =>
+          rule.selector.includes(`.${resizeClass}:focus-visible`) &&
+          /outline:/i.test(rule.cssText),
+      ),
+    ).toBe(false)
+    expect(
+      rules.some(
+        (rule) =>
+          rule.selector.includes(`.${resizeClass}::after`) &&
+          !rule.selector.includes(':hover') &&
+          !rule.selector.includes(':focus-visible') &&
+          /background-color:\s*transparent/i.test(rule.cssText),
+      ),
+    ).toBe(true)
+    for (const state of [':hover', ':focus-visible']) {
+      expect(
+        rules.some(
+          (rule) =>
+            rule.selector.includes(`.${resizeClass}${state}::after`) &&
+            /background-color:/i.test(rule.cssText) &&
+            !/transparent/i.test(rule.cssText),
+        ),
+      ).toBe(true)
+    }
+    expect(
+      rules.some(
+        (rule) =>
+          triggerClasses.some((className) =>
+            rule.selector.includes(`.${className}:focus-visible`),
+          ) && /outline:/i.test(rule.cssText),
+      ),
+    ).toBe(true)
+    expect(
+      rules.some(
+        (rule) =>
+          triggerClasses.some((className) =>
+            rule.selector.includes(`.${className} > img:hover`),
+          ) && /outline:/i.test(rule.cssText),
+      ),
+    ).toBe(false)
+  })
+
+  it('adds the strip grid row only while the Plugins destination renders it', () => {
+    mountWorkbench([plugin('one')])
+    const panel = document.querySelector<HTMLElement>(
+      '[data-testid="tanstack-devtools-content-panel"]',
+    )!
+    const panelClass = [...panel.classList][0]!
+    const panelRules = authoredStyleRules().filter((rule) =>
+      rule.selector.includes(`.${panelClass}`),
+    )
+    const baseRule = panelRules.find(
+      (rule) =>
+        !rule.selector.includes(':has(') &&
+        /grid-template-rows/i.test(rule.cssText),
+    )!
+    const stripRule = panelRules.find(
+      (rule) =>
+        rule.selector.includes(':has(') &&
+        /grid-template-rows/i.test(rule.cssText),
+    )!
+
+    expect(baseRule.cssText).toMatch(
+      /grid-template-rows:\s*36px\s+minmax\(0,\s*1fr\)/i,
+    )
+    expect(stripRule.cssText).toMatch(
+      /grid-template-rows:\s*36px\s+44px\s+minmax\(0,\s*1fr\)/i,
+    )
+  })
+
+  it('keeps a focused plugin title visible in the horizontal strip', () => {
+    const scrollIntoView = vi.fn()
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: scrollIntoView,
+    })
+    try {
+      mountWorkbench(['one', 'two', 'three', 'four'].map(plugin))
+      const title = document.querySelector<HTMLButtonElement>(
+        '[aria-labelledby="plugin-title-container-four"]',
+      )!
+      title.focus()
+      expect(scrollIntoView).toHaveBeenCalledWith({
+        block: 'nearest',
+        inline: 'nearest',
+      })
+    } finally {
+      delete (HTMLElement.prototype as { scrollIntoView?: unknown })
+        .scrollIntoView
+    }
+  })
+
+  it('makes each mounted plugin pane independently vertically scrollable', () => {
+    mountWorkbench([plugin('one')])
+    const workspace = document.querySelector<HTMLElement>(
+      '[data-testid="plugins-workspace"]',
+    )!
+    const pane = document.querySelector<HTMLElement>('[data-plugin-mount]')!
+    expect(workspace.style.height).toBe('100%')
+    expect(workspace.style.minHeight).toBe('0px')
+    expect(workspace.style.overflow).toBe('hidden')
+    expect(getComputedStyle(pane).overflowY).toBe('auto')
+  })
+
+  it('keeps pane sizing on the core mount frame without clamping plugin-owned descendants', () => {
+    const owned = plugin('owned-layout')
+    owned.render = (mount) => {
+      const child = document.createElement('section')
+      child.dataset.pluginOwnedLayout = 'true'
+      child.style.display = 'inline-block'
+      mount.append(child)
+    }
+    mountWorkbench([owned])
+
+    const pane = document.querySelector<HTMLElement>('[data-plugin-mount]')!
+    const child = pane.querySelector<HTMLElement>('[data-plugin-owned-layout]')!
+    const paneClass = pane.className.split(/\s+/).find(Boolean)!
+    const descendantRules = authoredStyleRules().filter(
+      (rule) =>
+        rule.selector.includes(`.${paneClass}`) && rule.selector.includes('>'),
+    )
+
+    expect(getComputedStyle(pane).overflowY).toBe('auto')
+    expect(child.style.display).toBe('inline-block')
+    expect(getComputedStyle(child).width).not.toBe('100%')
+    expect(getComputedStyle(child).height).not.toBe('100%')
+    expect(descendantRules).toEqual([])
+  })
+
+  it('constrains Settings to the workspace row so its panel can scroll', () => {
+    mountWorkbench([plugin('one')])
+    click('Settings')
+    const workspace = document.querySelector<HTMLElement>(
+      '[data-testid="settings-workspace"]',
+    )!
+    expect(workspace.style.height).toBe('100%')
+    expect(workspace.style.minHeight).toBe('0px')
+    expect(getComputedStyle(workspace.firstElementChild!).overflowY).toBe(
+      'auto',
+    )
+  })
+
+  it('keeps Marketplace search and settings in one shrinkable control row', () => {
+    mountWorkbench([plugin('one')])
+    click('Marketplace')
+    const controls = document.querySelector<HTMLElement>(
+      '[data-testid="marketplace-controls"]',
+    )!
+    const searchWrapper = document.querySelector<HTMLInputElement>(
+      'input[aria-label="Search plugins"]',
+    )!.parentElement!
+    expect(controls).not.toBeNull()
+    expect(getComputedStyle(controls).minWidth).toBe('0')
+    expect(getComputedStyle(controls).width).toBe('100%')
+    expect(getComputedStyle(searchWrapper).flexShrink).toBe('1')
+  })
+
+  it('constrains Marketplace to the workspace row so its catalog can scroll', () => {
+    mountWorkbench([plugin('one')])
+    click('Marketplace')
+    const workspace = document.querySelector<HTMLElement>(
+      '[data-testid="plugin-marketplace"]',
+    )!
+    expect(workspace.style.height).toBe('100%')
+    expect(workspace.style.minHeight).toBe('0px')
+    expect(getComputedStyle(workspace.firstElementChild!).overflowY).toBe(
+      'auto',
+    )
+  })
+
+  it.each(['light', 'dark'] as const)(
+    'keeps the Marketplace feature banner separated from its cards by the semantic section gap in %s mode',
+    (theme) => {
+      const host = document.body.appendChild(document.createElement('div'))
+      disposers.push(
+        render(
+          () =>
+            createComponent(DevtoolsProvider, {
+              plugins: [],
+              config: {
+                defaultOpen: true,
+                theme,
+              } as TanStackDevtoolsConfig,
+              get children() {
+                return createComponent(PluginSectionComponent, {
+                  section: {
+                    id: 'featured',
+                    displayName: 'Featured',
+                    cards: [],
+                  },
+                  isCollapsed: () => false,
+                  onToggleCollapse: vi.fn(),
+                  onCardAction: vi.fn(),
+                })
+              },
+            }),
+          host,
+        ),
+      )
+
+      const title = [...document.querySelectorAll('h4')].find((heading) =>
+        heading.textContent?.includes('Want to be featured here?'),
+      )!
+      const banner = title.parentElement!.parentElement as HTMLElement
+      const cards = banner.nextElementSibling as HTMLElement
+      const content = banner.parentElement as HTMLElement
+
+      expect(cards).not.toBeNull()
+      expect(getComputedStyle(content).display).toBe('flex')
+      expect(getComputedStyle(content).flexDirection).toBe('column')
+      expect(getComputedStyle(content).gap).toBe(
+        resolveSemanticTheme(theme).gap.sectionLarge,
+      )
+      expect(getComputedStyle(banner).marginTop).toBe('0px')
+    },
+  )
+
+  it('preserves destination transitions and rejects a fourth plugin without destroying', () => {
+    mountWorkbench(['one', 'two', 'three', 'four'].map(plugin))
+    for (const name of ['Plugin one', 'Plugin two', 'Plugin three']) click(name)
+    expect(
+      [...document.querySelectorAll('[id^="plugin-container-"]')].map(
+        (node) => node.id,
+      ),
+    ).toEqual([
+      'plugin-container-one',
+      'plugin-container-two',
+      'plugin-container-three',
+    ])
+    expect(
+      document.querySelectorAll('[data-tsd-separator="plugin-pane"]'),
+    ).toHaveLength(2)
+    for (const destination of ['SEO', 'Settings', 'Plugins']) {
+      click(destination)
+      expect(
+        [...document.querySelectorAll<HTMLButtonElement>('button')].find(
+          (button) =>
+            button.getAttribute('aria-label') === destination ||
+            button.textContent?.trim() === destination,
+        ),
+      ).toHaveAttribute('data-tsd-selected', 'true')
+      if (destination !== 'Plugins') click('Plugins')
+      click('Plugin four')
+      expect(
+        document.querySelector('#plugin-container-four'),
+      ).not.toBeInTheDocument()
+      expect(events).not.toContain('destroy:one')
+    }
+    click('Plugin two')
+    expect(events).toContain('destroy:two')
+    expect(
+      document.querySelector('#plugin-container-two'),
+    ).not.toBeInTheDocument()
+  })
+
+  it.each([
+    {
+      plugins: [],
+      message: 'Browse Marketplace to discover available plugins.',
+    },
+    {
+      plugins: [plugin('one'), plugin('two')],
+      message: 'Select a plugin to open it',
+    },
+  ])('renders the registered-plugin zero state', ({ plugins, message }) => {
+    mountWorkbench(plugins)
+    expect(document.body).toHaveTextContent(message)
+    if (plugins.length === 0) {
+      expect(
+        [...document.querySelectorAll('button,[role="button"]')].some(
+          (node) => node.textContent?.trim() === 'Browse Marketplace',
+        ),
+      ).toBe(false)
+    }
+  })
+
+  it('auto-activates one registered plugin and preserves its destroy lifecycle', () => {
+    mountWorkbench([plugin('one')])
+    expect(
+      JSON.parse(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!).activePlugins,
+    ).toEqual(['one'])
+    expect(
+      events.filter((event) => event.startsWith('render:one:')),
+    ).toHaveLength(1)
+    click('Plugin one')
+    expect(
+      JSON.parse(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!).activePlugins,
+    ).toEqual([])
+    expect(events.filter((event) => event === 'destroy:one')).toHaveLength(1)
+  })
+
+  it('preserves live callback targets, exact IDs, and activation render order', () => {
+    mountWorkbench([plugin('one'), plugin('two')])
+    expect(
+      document.querySelector('#plugin-title-container-one'),
+    ).toHaveTextContent('Plugin one')
+    click('Plugin one')
+    click('Plugin two')
+    expect(
+      events
+        .filter((event) => event.startsWith('render:'))
+        .map((event) => event.split(':')[1]),
+    ).toEqual(['one', 'one', 'two'])
+  })
+
+  it('styles string title controls semantically while isolating callback title resets', () => {
+    const stringTitle: TanStackDevtoolsPlugin = {
+      id: 'string',
+      name: 'String title',
+      render: () => {},
+    }
+    const callbackTitle = plugin('callback')
+    mountWorkbench([stringTitle, callbackTitle], { theme: 'dark' })
+
+    const stringControl = document.querySelector<HTMLElement>(
+      '[data-plugin-title-control][aria-labelledby="plugin-title-container-string"]',
+    )!
+    const callbackHeading = document.querySelector<HTMLElement>(
+      '#plugin-title-container-callback',
+    )!
+    const stringHeading = document.querySelector<HTMLElement>(
+      '#plugin-title-container-string',
+    )!
+
+    expect(document.documentElement.dataset.tanstackDevtoolsTheme).toBe('dark')
+    stringControl.click()
+    expect(stringControl).toHaveAttribute('data-tsd-selected', 'true')
+    expect(stringControl.className).not.toBe('')
+    expect(stringHeading.getAttribute('style')).toBeNull()
+    expect(callbackHeading.style.all).toBe('initial')
+    expect(
+      authoredStyleRules().some(
+        (rule) =>
+          rule.selector.includes(`.${stringControl.className}`) &&
+          /:hover/.test(rule.selector) &&
+          /background/.test(rule.cssText),
+      ),
+    ).toBe(true)
+    expect(
+      authoredStyleRules().some(
+        (rule) =>
+          rule.selector.includes(`.${stringControl.className}`) &&
+          /:focus-visible/.test(rule.selector) &&
+          /outline:\s*2px/.test(rule.cssText),
+      ),
+    ).toBe(true)
+  })
+
+  it('surfaces a plugin title callback failure during mount', () => {
+    const bad = plugin('bad')
+    bad.name = () => {
+      throw new Error('name boom')
+    }
+    expect(() => mountWorkbench([bad])).toThrow('name boom')
+  })
+
+  it('moves among Marketplace and core destinations without plugin destruction', () => {
+    mountWorkbench([plugin('one')])
+    const activeBefore = JSON.parse(
+      localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!,
+    ).activePlugins
+    expect(activeBefore).toEqual(['one'])
+    click('Marketplace')
+    expect(
+      document.querySelector('[data-testid="plugin-marketplace"]'),
+    ).toBeInTheDocument()
+    expect(
+      JSON.parse(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!).activePlugins,
+    ).toEqual(activeBefore)
+    click('Settings')
+    click('Plugins')
+    expect(
+      document.querySelector('[data-testid="plugin-marketplace"]'),
+    ).not.toBeInTheDocument()
+    expect(events).not.toContain('destroy:one')
+  })
+
+  it('preserves active IDs across Close, Escape, theme change, and reopen render effects', () => {
+    mountWorkbench([plugin('one')])
+    click('Close TanStack Devtools')
+    click('Open TanStack Devtools')
+    click('Settings')
+    expect(
+      document.querySelector('button[aria-label="Settings"]'),
+    ).toHaveAttribute('data-tsd-selected', 'true')
+    expect(
+      document.querySelector('[data-testid="settings-workspace"]'),
+    ).toBeInTheDocument()
+    const themeLabel = [...document.querySelectorAll('label')].find(
+      (label) => label.textContent?.trim() === 'Theme',
+    )!
+    const theme = document.getElementById(
+      themeLabel.htmlFor,
+    ) as HTMLSelectElement
+    theme.value = 'dark'
+    theme.dispatchEvent(new Event('change', { bubbles: true }))
+    click('Plugins')
+    expect(events).toContain('render:one:dark:true')
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+    )
+    expect(
+      JSON.parse(localStorage.getItem(TANSTACK_DEVTOOLS_STATE)!).activePlugins,
+    ).toEqual(['one'])
+    expect(events).toContain('render:one:dark:false')
+    expect(events).not.toContain('destroy:one')
+  })
+
+  it('keeps equal-width frames and static separators for three active plugins', () => {
+    mountWorkbench(['one', 'two', 'three'].map(plugin))
+    for (const name of ['Plugin one', 'Plugin two', 'Plugin three']) click(name)
+    const panes = [
+      ...document.querySelectorAll<HTMLElement>('[data-plugin-mount]'),
+    ]
+    expect(panes).toHaveLength(3)
+    for (const pane of panes) {
+      expect(pane.style.flex).toBe('1 1 0px')
+      expect(pane.style.minWidth).toBe('0px')
+    }
+    expect(
+      document.querySelectorAll('[data-tsd-separator="plugin-pane"]'),
+    ).toHaveLength(2)
+  })
+
+  it('keeps callback title resets isolated from the semantic control wrapper', () => {
+    const owned = plugin('owned')
+    owned.name = (title) => {
+      if (title.querySelector('[data-callback-title]')) return
+      const child = document.createElement('span')
+      child.dataset.callbackTitle = 'true'
+      child.textContent = 'Owned title'
+      title.append(child)
+    }
+    mountWorkbench([owned, plugin('other')])
+    const title = document.querySelector<HTMLElement>(
+      '#plugin-title-container-owned',
+    )!
+    const wrapper = title.closest<HTMLElement>('[data-plugin-title-control]')!
+    expect(title.style.all).toBe('initial')
+    expect(wrapper.style.all).toBe('')
+    expect(wrapper.className).not.toBe('')
+  })
+
+  it('surfaces an auto-active plugin render failure during mount', () => {
+    const bad = plugin('bad')
+    bad.render = () => {
+      throw new Error('render boom')
+    }
+    expect(() => mountWorkbench([bad])).toThrow('render boom')
+  })
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 743c8803..0f20a658 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -783,6 +783,9 @@ importers:
 
   examples/react/basic:
     dependencies:
+      '@tanstack/devtools-a11y':
+        specifier: workspace:*
+        version: link:../../../packages/devtools-a11y
       '@tanstack/devtools-client':
         specifier: 0.0.8
         version: link:../../../packages/devtools-client