feat: redesign TanStack Devtools workbench

.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

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:

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