From 4cc3f4be937e0a6d98db8d56465124c41938a561 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Wed, 22 Jul 2026 01:28:28 +0000
Subject: [PATCH 1/6] feat(design): shared uno.config base with h-nav and
 unified nav header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce design/uno.config.ts as the single source for the UnoCSS stack
every plugin and example composes — the sage-green preset, Wind4, Phosphor
icons, DM Sans/Mono fonts, transformers, border preflight, the named z-*
layers, and a new shared h-nav navbar-height token. All 15 configs now
extend it via mergeConfigs and keep only their own content globs/safelist.

Unify the top nav header (icon + title) across every surface: the design.ts
nav() helpers and the Vue LayoutToolbar navs all resolve to the shared h-nav
height, and data-inspector's divergent header is brought into the canonical
icon + title form.
---
 design/uno.config.ts                          | 48 ++++++++++++
 examples/files-inspector/src/client/design.ts |  2 +-
 examples/files-inspector/uno.config.ts        | 44 +++--------
 .../minimal-next-devframe-hub/uno.config.ts   | 47 +++---------
 .../minimal-vite-devframe-hub/uno.config.ts   | 48 +++---------
 .../src/client/app/design.ts                  |  2 +-
 examples/next-runtime-snapshot/uno.config.ts  | 43 +++--------
 examples/storybook-hub/uno.config.ts          | 48 +++---------
 examples/streaming-chat/src/client/design.ts  |  2 +-
 examples/streaming-chat/uno.config.ts         | 40 +++-------
 plugins/a11y/src/spa/design.ts                |  2 +-
 plugins/a11y/uno.config.ts                    | 55 ++++----------
 plugins/code-server/uno.config.ts             | 55 ++++----------
 .../src/spa/components/AppHeader.vue          | 73 ++++++++++--------
 plugins/data-inspector/uno.config.ts          | 53 ++++---------
 plugins/git/src/client/lib/design.ts          |  2 +-
 plugins/git/uno.config.ts                     | 60 +++++----------
 plugins/inspect/src/spa/App.vue               |  2 +-
 plugins/inspect/uno.config.ts                 | 52 ++++---------
 plugins/messages/src/client/App.vue           |  2 +-
 plugins/messages/uno.config.ts                | 54 ++++---------
 .../src/spa/app/components/ViewerToolbar.vue  |  2 +-
 plugins/og/uno.config.ts                      | 44 +++--------
 plugins/terminals/src/client/design.ts        |  2 +-
 plugins/terminals/uno.config.ts               | 75 +++++++------------
 storybook/uno.config.ts                       | 54 ++++---------
 26 files changed, 300 insertions(+), 611 deletions(-)
 create mode 100644 design/uno.config.ts

diff --git a/design/uno.config.ts b/design/uno.config.ts
new file mode 100644
index 00000000..56be0669
--- /dev/null
+++ b/design/uno.config.ts
@@ -0,0 +1,48 @@
+import { presetAnthonyDesign } from '@antfu/design/unocss'
+import {
+  defineConfig,
+  presetIcons,
+  presetWebFonts,
+  presetWind4,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+// Shared devframe UnoCSS base. Every plugin and example composes `@antfu/design`
+// the same way — its preset (tuned to devframe's sage green) over a Wind4 base,
+// Phosphor icons, DM Sans/Mono web fonts, and the directive/variant-group
+// transformers — so the surfaces look and feel like one product across
+// frameworks. Each app extends this via `mergeConfigs([designConfig, { … }])`
+// and contributes only its own extraction globs (and any safelist).
+//
+// The shared web fonts (`sans`/`mono`), the named `z-*` layers and the `h-nav`
+// navbar height live here so every surface shares one font stack, one z-index
+// scale and one fixed navbar height. The `@antfu/design` preset blocks plain
+// `z-<number>`, so the layers are named on purpose.
+export const designConfig = defineConfig({
+  presets: [
+    presetAnthonyDesign({ primary: '#3a6a45' }),
+    presetWind4(),
+    presetIcons({ scale: 1.1 }),
+    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
+  // shared border color (matching `border-base`) for unqualified borders.
+  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
+  shortcuts: {
+    // Fixed navbar height, shared by every surface's top nav.
+    'h-nav': 'h-10',
+    // Named z-index layers, shared across every surface.
+    'z-nav': 'z-[30]',
+    'z-dropdown': 'z-[40]',
+    'z-tooltip': 'z-[45]',
+    'z-toast': 'z-[50]',
+    'z-modal-backdrop': 'z-[60]',
+    'z-modal-content': 'z-[70]',
+    'z-drawer-backdrop': 'z-[80]',
+    'z-drawer-content': 'z-[90]',
+  },
+})
+
+export default designConfig
diff --git a/examples/files-inspector/src/client/design.ts b/examples/files-inspector/src/client/design.ts
index 9bedf72a..decc1517 100644
--- a/examples/files-inspector/src/client/design.ts
+++ b/examples/files-inspector/src/client/design.ts
@@ -80,7 +80,7 @@ export function navTab({ active = false, class: extra }: NavTabProps = {}): stri
 }
 
 export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-10 px-3 border-b border-base bg-base z-nav', extra)
+  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
 }
 
 export function navBrand(extra?: string): string {
diff --git a/examples/files-inspector/uno.config.ts b/examples/files-inspector/uno.config.ts
index f6e6ff90..5eff85f7 100644
--- a/examples/files-inspector/uno.config.ts
+++ b/examples/files-inspector/uno.config.ts
@@ -1,36 +1,12 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// This example's Preact SPA uses `@antfu/design` directly for its semantic
-// tokens, class vocabulary and Phosphor icons — matching the built-in plugins.
-// The named `z-*` layers are the app's to own (the preset blocks plain `z-<n>`).
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
+// This example's Preact SPA composes the shared devframe base (see
+// `design/uno.config.ts`) — matching the built-in plugins — and adds only its
+// own extraction globs.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
   },
-  content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
-})
+])
diff --git a/examples/minimal-next-devframe-hub/uno.config.ts b/examples/minimal-next-devframe-hub/uno.config.ts
index a1630af3..e5cb5469 100644
--- a/examples/minimal-next-devframe-hub/uno.config.ts
+++ b/examples/minimal-next-devframe-hub/uno.config.ts
@@ -1,41 +1,18 @@
 import { fileURLToPath } from 'node:url'
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// `@unocss/postcss` (see src/client/postcss.config.mjs) loads this config.
-// Absolute globs keep class extraction working regardless of the directory
+// The hub UI composes the shared devframe base (see `design/uno.config.ts`).
+// `@unocss/postcss` (see src/client/postcss.config.mjs) loads this config;
+// absolute globs keep class extraction working regardless of the directory
 // PostCSS runs in (Next builds from `src/client`).
 const client = fileURLToPath(new URL('./src/client', import.meta.url))
 
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      filesystem: [`${client}/app/**/*.{ts,tsx}`],
+    },
   },
-  content: {
-    filesystem: [`${client}/app/**/*.{ts,tsx}`],
-  },
-})
+])
diff --git a/examples/minimal-vite-devframe-hub/uno.config.ts b/examples/minimal-vite-devframe-hub/uno.config.ts
index 120a8807..be8319c2 100644
--- a/examples/minimal-vite-devframe-hub/uno.config.ts
+++ b/examples/minimal-vite-devframe-hub/uno.config.ts
@@ -1,39 +1,13 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The hub UI uses `@antfu/design` directly — its preset (tuned to devframe's
-// sage green) over a Wind4 base, Phosphor icons, DM Sans/Mono and the
-// directive/variant-group transformers. Pair with `@antfu/design/styles.css`
-// (imported in `src/client/main.ts`). The named `z-*` layers are the app's to
-// own (the preset blocks plain `z-<n>`). `.ts` is opted into extraction since
-// the hub authors its class strings in vanilla `src/client/main.ts`.
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
+// The hub UI composes the shared devframe base (see `design/uno.config.ts`).
+// Pair with `@antfu/design/styles.css` (imported in `src/client/main.ts`). `.ts`
+// is opted into extraction since the hub authors its class strings in vanilla
+// `src/client/main.ts`.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
   },
-  content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
-})
+])
diff --git a/examples/next-runtime-snapshot/src/client/app/design.ts b/examples/next-runtime-snapshot/src/client/app/design.ts
index 9bedf72a..decc1517 100644
--- a/examples/next-runtime-snapshot/src/client/app/design.ts
+++ b/examples/next-runtime-snapshot/src/client/app/design.ts
@@ -80,7 +80,7 @@ export function navTab({ active = false, class: extra }: NavTabProps = {}): stri
 }
 
 export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-10 px-3 border-b border-base bg-base z-nav', extra)
+  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
 }
 
 export function navBrand(extra?: string): string {
diff --git a/examples/next-runtime-snapshot/uno.config.ts b/examples/next-runtime-snapshot/uno.config.ts
index 2499c33c..4f6e6bf8 100644
--- a/examples/next-runtime-snapshot/uno.config.ts
+++ b/examples/next-runtime-snapshot/uno.config.ts
@@ -1,42 +1,19 @@
 import { fileURLToPath } from 'node:url'
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
+// This example composes the shared devframe base (see `design/uno.config.ts`).
 // `@unocss/postcss` (see src/client/postcss.config.mjs) loads this config; the
 // absolute glob keeps class extraction working regardless of the directory Next
 // builds from. The co-located `app/design.ts` (carrying `@unocss-include`) is
 // covered by the same glob.
 const client = fileURLToPath(new URL('./src/client', import.meta.url))
 
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      filesystem: [`${client}/app/**/*.{ts,tsx}`],
+    },
   },
-  content: {
-    filesystem: [`${client}/app/**/*.{ts,tsx}`],
-  },
-})
+])
diff --git a/examples/storybook-hub/uno.config.ts b/examples/storybook-hub/uno.config.ts
index 120a8807..be8319c2 100644
--- a/examples/storybook-hub/uno.config.ts
+++ b/examples/storybook-hub/uno.config.ts
@@ -1,39 +1,13 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The hub UI uses `@antfu/design` directly — its preset (tuned to devframe's
-// sage green) over a Wind4 base, Phosphor icons, DM Sans/Mono and the
-// directive/variant-group transformers. Pair with `@antfu/design/styles.css`
-// (imported in `src/client/main.ts`). The named `z-*` layers are the app's to
-// own (the preset blocks plain `z-<n>`). `.ts` is opted into extraction since
-// the hub authors its class strings in vanilla `src/client/main.ts`.
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
+// The hub UI composes the shared devframe base (see `design/uno.config.ts`).
+// Pair with `@antfu/design/styles.css` (imported in `src/client/main.ts`). `.ts`
+// is opted into extraction since the hub authors its class strings in vanilla
+// `src/client/main.ts`.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
   },
-  content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
-})
+])
diff --git a/examples/streaming-chat/src/client/design.ts b/examples/streaming-chat/src/client/design.ts
index 9bedf72a..decc1517 100644
--- a/examples/streaming-chat/src/client/design.ts
+++ b/examples/streaming-chat/src/client/design.ts
@@ -80,7 +80,7 @@ export function navTab({ active = false, class: extra }: NavTabProps = {}): stri
 }
 
 export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-10 px-3 border-b border-base bg-base z-nav', extra)
+  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
 }
 
 export function navBrand(extra?: string): string {
diff --git a/examples/streaming-chat/uno.config.ts b/examples/streaming-chat/uno.config.ts
index 3eb3a226..c644da22 100644
--- a/examples/streaming-chat/uno.config.ts
+++ b/examples/streaming-chat/uno.config.ts
@@ -1,33 +1,11 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
+// This example's Preact SPA composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
   },
-  content: { pipeline: { include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/] } },
-})
+])
diff --git a/plugins/a11y/src/spa/design.ts b/plugins/a11y/src/spa/design.ts
index 7667ef8c..13e7551f 100644
--- a/plugins/a11y/src/spa/design.ts
+++ b/plugins/a11y/src/spa/design.ts
@@ -80,7 +80,7 @@ export function navTab({ active = false, class: extra }: NavTabProps = {}): stri
 }
 
 export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-10 px-3 border-b border-base bg-base z-nav', extra)
+  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
 }
 
 export function navBrand(extra?: string): string {
diff --git a/plugins/a11y/uno.config.ts b/plugins/a11y/uno.config.ts
index 37997dc5..cb712b84 100644
--- a/plugins/a11y/uno.config.ts
+++ b/plugins/a11y/uno.config.ts
@@ -1,43 +1,18 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The a11y inspector's Solid SPA uses `@antfu/design` directly: its preset (tuned
-// to devframe's sage green) over a Wind4 base, with Phosphor icons, DM Sans/Mono
-// and the directive/variant-group transformers. The in-page agent bundle
-// (src/inject) is deliberately excluded — it inlines its own styles into the host
-// document. `.tsx` is scanned by default; `.ts` (the co-located `design.ts`
-// helpers) is opted in.
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/],
+// The a11y inspector's Solid SPA composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs. The in-page
+// agent bundle (src/inject) is deliberately excluded — it inlines its own styles
+// into the host document. `.tsx` is scanned by default; `.ts` (the co-located
+// `design.ts` helpers) is opted in.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])
diff --git a/plugins/code-server/uno.config.ts b/plugins/code-server/uno.config.ts
index d7985bc9..2929b5ad 100644
--- a/plugins/code-server/uno.config.ts
+++ b/plugins/code-server/uno.config.ts
@@ -1,44 +1,17 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The code-server launcher is a Vue SPA using `@antfu/design` directly: its
-// preset (tuned to devframe's sage green) over a Wind4 base, with Phosphor
-// icons, DM Sans/Mono and the directive/variant-group transformers. The SPA and
-// Storybook generate CSS from this config.
-//
-// Vue templates are scanned by default; `.ts` is opted into the extraction
-// pipeline for class strings authored in composables/helpers.
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+// The code-server launcher composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs. Vue templates
+// are scanned by default; `.ts` is opted in for class strings authored in
+// composables/helpers. The SPA and Storybook generate CSS from this config.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])
diff --git a/plugins/data-inspector/src/spa/components/AppHeader.vue b/plugins/data-inspector/src/spa/components/AppHeader.vue
index a2922c0a..3f011fc2 100644
--- a/plugins/data-inspector/src/spa/components/AppHeader.vue
+++ b/plugins/data-inspector/src/spa/components/AppHeader.vue
@@ -1,40 +1,51 @@
 <script setup lang="ts">
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { connection } from '../composables/rpc'
 import { isDark } from '../composables/scheme'
 </script>
 
 <template>
-  <div class="flex items-center gap-1.5 shrink-0 select-none border-b border-base py1 px3">
-    <span class="i-ph-crosshair-duotone text-base color-primary" />
-    <span class="color-primary font-semibold">Data Inspector</span>
-    <span class="op-fade text-xs">Inspect server side data/objects interactively</span>
-    <DisplayBadge
-      v-if="connection.mode === 'static'"
-      class="flex items-center gap-1.5 py-1 text-xs select-none"
-      text="static"
-      :color="false"
-    />
-    <DisplayBadge
-      v-else-if="connection.status !== 'connected'"
-      class="flex items-center gap-1.5 py-1 text-xs select-none capitalize"
-      :title="connection.error ?? undefined"
-      :text="connection.status"
-      :color="connection.connected ? 100 : 200"
-    />
-    <div class="flex-auto" />
-    <ActionIconButton
-      icon="i-ph:book-open-duotone"
-      as="a"
-      href="https://devfra.me/plugins/data-inspector"
-      target="_blank"
-      title="Data Inspector docs — using the plugin and providing data sources"
-    />
-    <ActionIconButton
-      icon="i-ph:sun-duotone dark:i-ph:moon-duotone"
-      title="Toggle dark mode"
-      @click="isDark = !isDark"
-    />
-  </div>
+  <LayoutToolbar :glass="false" class="h-nav">
+    <div class="min-w-0 flex items-center gap-1.5">
+      <span class="flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none">
+        <span class="i-ph-crosshair-duotone text-base color-active" />
+        <span>Data Inspector</span>
+      </span>
+      <span class="truncate op-fade text-xs select-none">Inspect server side data/objects interactively</span>
+      <DisplayBadge
+        v-if="connection.mode === 'static'"
+        class="flex items-center gap-1.5 py-1 text-xs select-none"
+        text="static"
+        :color="false"
+      />
+      <DisplayBadge
+        v-else-if="connection.status !== 'connected'"
+        class="flex items-center gap-1.5 py-1 text-xs select-none capitalize"
+        :title="connection.error ?? undefined"
+        :text="connection.status"
+        :color="connection.connected ? 100 : 200"
+      />
+    </div>
+
+    <template #search>
+      <div />
+    </template>
+
+    <template #end>
+      <ActionIconButton
+        icon="i-ph:book-open-duotone"
+        as="a"
+        href="https://devfra.me/plugins/data-inspector"
+        target="_blank"
+        title="Data Inspector docs — using the plugin and providing data sources"
+      />
+      <ActionIconButton
+        icon="i-ph:sun-duotone dark:i-ph:moon-duotone"
+        title="Toggle dark mode"
+        @click="isDark = !isDark"
+      />
+    </template>
+  </LayoutToolbar>
 </template>
diff --git a/plugins/data-inspector/uno.config.ts b/plugins/data-inspector/uno.config.ts
index 713eb4b8..52a69844 100644
--- a/plugins/data-inspector/uno.config.ts
+++ b/plugins/data-inspector/uno.config.ts
@@ -1,42 +1,17 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The inspector uses `@antfu/design` directly: its preset (tuned to devframe's
-// sage green) over a Wind4 base, with Phosphor icons, DM Sans/Mono and the
-// directive/variant-group transformers. Vue templates are scanned by default;
-// `.ts` is opted in for class strings authored in composables/helpers. The
-// named `z-*` layers are the app's to own (the preset blocks plain `z-<number>`).
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+// The data inspector composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs. Vue templates
+// are scanned by default; `.ts` is opted in for class strings authored in
+// composables/helpers.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])
diff --git a/plugins/git/src/client/lib/design.ts b/plugins/git/src/client/lib/design.ts
index 33795fb5..d6dc8ffc 100644
--- a/plugins/git/src/client/lib/design.ts
+++ b/plugins/git/src/client/lib/design.ts
@@ -80,7 +80,7 @@ export function navTab({ active = false, class: extra }: NavTabProps = {}): stri
 }
 
 export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-10 px-3 border-b border-base bg-base z-nav', extra)
+  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
 }
 
 export function navBrand(extra?: string): string {
diff --git a/plugins/git/uno.config.ts b/plugins/git/uno.config.ts
index 1565957e..61a1adfa 100644
--- a/plugins/git/uno.config.ts
+++ b/plugins/git/uno.config.ts
@@ -1,48 +1,22 @@
 import { fileURLToPath } from 'node:url'
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The Git dashboard uses `@antfu/design` directly: its preset (tuned to
-// devframe's sage green) over a Wind4 base, with Phosphor icons, DM Sans/Mono and
-// the directive/variant-group transformers. `@unocss/postcss` (see
-// src/client/postcss.config.mjs) and Storybook both load this config. Absolute
-// globs keep class extraction working regardless of the working directory
-// PostCSS runs in (Next builds from `src/client`).
+// The Git dashboard composes the shared devframe base (see `design/uno.config.ts`).
+// `@unocss/postcss` (see src/client/postcss.config.mjs) and Storybook both load
+// this config. Absolute globs keep class extraction working regardless of the
+// working directory PostCSS runs in (Next builds from `src/client`).
 const client = fileURLToPath(new URL('./src/client', import.meta.url))
 
-export default defineConfig({
-  content: {
-    filesystem: [
-      `${client}/app/**/*.{ts,tsx}`,
-      `${client}/components/**/*.{ts,tsx}`,
-      `${client}/lib/**/*.{ts,tsx}`,
-    ],
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      filesystem: [
+        `${client}/app/**/*.{ts,tsx}`,
+        `${client}/components/**/*.{ts,tsx}`,
+        `${client}/lib/**/*.{ts,tsx}`,
+      ],
+    },
   },
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-})
+])
diff --git a/plugins/inspect/src/spa/App.vue b/plugins/inspect/src/spa/App.vue
index f0c97bd4..ed00f290 100644
--- a/plugins/inspect/src/spa/App.vue
+++ b/plugins/inspect/src/spa/App.vue
@@ -32,7 +32,7 @@ function reload(): void {
 
 <template>
   <div class="app">
-    <LayoutToolbar :glass="false">
+    <LayoutToolbar :glass="false" class="h-nav">
       <div class="flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none">
         <span class="i-ph-magnifying-glass-duotone text-base color-active" />
         <span>Devframe Inspector</span>
diff --git a/plugins/inspect/uno.config.ts b/plugins/inspect/uno.config.ts
index 713eb4b8..92a0973a 100644
--- a/plugins/inspect/uno.config.ts
+++ b/plugins/inspect/uno.config.ts
@@ -1,42 +1,16 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The inspector uses `@antfu/design` directly: its preset (tuned to devframe's
-// sage green) over a Wind4 base, with Phosphor icons, DM Sans/Mono and the
-// directive/variant-group transformers. Vue templates are scanned by default;
-// `.ts` is opted in for class strings authored in composables/helpers. The
-// named `z-*` layers are the app's to own (the preset blocks plain `z-<number>`).
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+// The inspector composes the shared devframe base (see `design/uno.config.ts`)
+// and adds only its own extraction globs. Vue templates are scanned by default;
+// `.ts` is opted in for class strings authored in composables/helpers.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])
diff --git a/plugins/messages/src/client/App.vue b/plugins/messages/src/client/App.vue
index e0a30945..8a6adedf 100644
--- a/plugins/messages/src/client/App.vue
+++ b/plugins/messages/src/client/App.vue
@@ -70,7 +70,7 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
 
 <template>
   <div class="h-full w-full grid grid-rows-[max-content_1fr] bg-base color-base font-sans">
-    <LayoutToolbar :glass="false">
+    <LayoutToolbar :glass="false" class="h-nav">
       <div class="flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none">
         <span class="i-ph-notification-duotone text-base color-active" />
         <span>Messages</span>
diff --git a/plugins/messages/uno.config.ts b/plugins/messages/uno.config.ts
index d686b9b5..4d5542ff 100644
--- a/plugins/messages/uno.config.ts
+++ b/plugins/messages/uno.config.ts
@@ -1,43 +1,17 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The messages panel uses `@antfu/design` directly: its preset (tuned to
-// devframe's sage green) over a Wind4 base, with Phosphor icons, DM Sans/Mono
-// and the directive/variant-group transformers. Vue templates are scanned by
-// default; `.ts` is opted in for class strings authored in helpers (e.g. the
-// level/source style maps). The named `z-*` layers are the app's to own (the
-// preset blocks plain `z-<number>`).
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+// The messages panel composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs. Vue templates
+// are scanned by default; `.ts` is opted in for class strings authored in
+// helpers (e.g. the level/source style maps).
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])
diff --git a/plugins/og/src/spa/app/components/ViewerToolbar.vue b/plugins/og/src/spa/app/components/ViewerToolbar.vue
index 41c2fe7d..0dd63f90 100644
--- a/plugins/og/src/spa/app/components/ViewerToolbar.vue
+++ b/plugins/og/src/spa/app/components/ViewerToolbar.vue
@@ -15,7 +15,7 @@ const target = defineModel<string>('target', { required: true })
 </script>
 
 <template>
-  <LayoutToolbar :glass="false">
+  <LayoutToolbar :glass="false" class="h-nav">
     <div class="flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none">
       <span class="i-ph-image-square-duotone text-base color-active" />
       <span>Open Graph</span>
diff --git a/plugins/og/uno.config.ts b/plugins/og/uno.config.ts
index bf0b1016..996852fc 100644
--- a/plugins/og/uno.config.ts
+++ b/plugins/og/uno.config.ts
@@ -1,35 +1,15 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+// The Open Graph viewer composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:vue|[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])
diff --git a/plugins/terminals/src/client/design.ts b/plugins/terminals/src/client/design.ts
index 1e3dd3b9..cf6b204e 100644
--- a/plugins/terminals/src/client/design.ts
+++ b/plugins/terminals/src/client/design.ts
@@ -80,7 +80,7 @@ export function navTab({ active = false, class: extra }: NavTabProps = {}): stri
 }
 
 export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-10 px-3 border-b border-base bg-base z-nav', extra)
+  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
 }
 
 export function navBrand(extra?: string): string {
diff --git a/plugins/terminals/uno.config.ts b/plugins/terminals/uno.config.ts
index 87f357ad..60579e3a 100644
--- a/plugins/terminals/uno.config.ts
+++ b/plugins/terminals/uno.config.ts
@@ -1,53 +1,28 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../../design/uno.config'
 
-// The terminals panel uses `@antfu/design` directly: its preset (tuned to
-// devframe's sage green) over a Wind4 base, with Phosphor icons, DM Sans/Mono and
-// the directive/variant-group transformers. The named `z-*` layers are the app's
-// to own (the preset blocks plain `z-<number>`). Svelte is scanned by default;
-// `.ts` (the co-located `design.ts` class helpers) is opted in.
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Icons for terminal sessions contributed by *other* devframes through the
-  // hub (e.g. code-server) arrive as runtime strings, so UnoCSS can't extract
-  // them from source. Safelist the built-in plugins' dock icons so those
-  // aggregated sessions render with their proper glyph.
-  safelist: [
-    'i-ph-code-duotone',
-    'i-ph-terminal-window-duotone',
-    'i-ph-git-branch-duotone',
-    'i-ph-magnifying-glass-duotone',
-    'i-ph-person-arms-spread-duotone',
-  ],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:svelte|[cm]?[jt]sx?|html)($|\?)/],
+// The terminals panel composes the shared devframe base (see
+// `design/uno.config.ts`) and adds only its own extraction globs and safelist.
+// Svelte is scanned by default; `.ts` (the co-located `design.ts` class helpers)
+// is opted in.
+export default mergeConfigs([
+  designConfig,
+  {
+    // Icons for terminal sessions contributed by *other* devframes through the
+    // hub (e.g. code-server) arrive as runtime strings, so UnoCSS can't extract
+    // them from source. Safelist the built-in plugins' dock icons so those
+    // aggregated sessions render with their proper glyph.
+    safelist: [
+      'i-ph-code-duotone',
+      'i-ph-terminal-window-duotone',
+      'i-ph-git-branch-duotone',
+      'i-ph-magnifying-glass-duotone',
+      'i-ph-person-arms-spread-duotone',
+    ],
+    content: {
+      pipeline: {
+        include: [/\.(?:svelte|[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])
diff --git a/storybook/uno.config.ts b/storybook/uno.config.ts
index ec5943b7..b4830b66 100644
--- a/storybook/uno.config.ts
+++ b/storybook/uno.config.ts
@@ -1,43 +1,17 @@
-import { presetAnthonyDesign } from '@antfu/design/unocss'
-import {
-  defineConfig,
-  presetIcons,
-  presetWebFonts,
-  presetWind4,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { mergeConfigs } from 'unocss'
+import { designConfig } from '../design/uno.config'
 
-// The unified host's own welcome/overview surface uses `@antfu/design` directly,
-// with the same stack every plugin composes: the sage-green preset over a Wind4
-// base, Phosphor icons, DM Sans/Mono and the directive/variant-group
-// transformers. Only the host shell reads this config; each composed plugin
-// generates its own CSS from its own `uno.config.ts`. The welcome page is
-// hand-written vanilla `.ts`, so `.ts` is opted into the extraction pipeline.
-export default defineConfig({
-  presets: [
-    presetAnthonyDesign({ primary: '#3a6a45' }),
-    presetWind4(),
-    presetIcons({ scale: 1.1 }),
-    presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
-  ],
-  transformers: [transformerDirectives(), transformerVariantGroup()],
-  // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
-  // shared border color (matching `border-base`) for unqualified borders.
-  preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
-  shortcuts: {
-    'z-nav': 'z-[30]',
-    'z-dropdown': 'z-[40]',
-    'z-tooltip': 'z-[45]',
-    'z-toast': 'z-[50]',
-    'z-modal-backdrop': 'z-[60]',
-    'z-modal-content': 'z-[70]',
-    'z-drawer-backdrop': 'z-[80]',
-    'z-drawer-content': 'z-[90]',
-  },
-  content: {
-    pipeline: {
-      include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/],
+// The unified host's own welcome/overview surface composes the shared devframe
+// base (see `design/uno.config.ts`). Only the host shell reads this config; each
+// composed plugin generates its own CSS from its own `uno.config.ts`. The
+// welcome page is hand-written vanilla `.ts`, so `.ts` is opted into extraction.
+export default mergeConfigs([
+  designConfig,
+  {
+    content: {
+      pipeline: {
+        include: [/\.(?:[cm]?[jt]sx?|html)($|\?)/],
+      },
     },
   },
-})
+])

From d20f2a3f8d14ddd57a00ee31632418853739df86 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Wed, 22 Jul 2026 10:36:05 +0900
Subject: [PATCH 2/6] chore: update

---
 examples/minimal-vite-devframe-hub/package.json | 2 +-
 examples/storybook-hub/package.json             | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/minimal-vite-devframe-hub/package.json b/examples/minimal-vite-devframe-hub/package.json
index 6c4f1118..afbdfa85 100644
--- a/examples/minimal-vite-devframe-hub/package.json
+++ b/examples/minimal-vite-devframe-hub/package.json
@@ -6,7 +6,7 @@
   "description": "Protocol-witness example — a tiny Vite Devframe Hub built on @devframes/hub that exercises every hub subsystem end-to-end.",
   "homepage": "https://github.com/devframes/devframe/tree/main/examples/minimal-vite-devframe-hub",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vite build",
     "typecheck": "tsc --noEmit"
   },
diff --git a/examples/storybook-hub/package.json b/examples/storybook-hub/package.json
index 86ccede2..68c78d9e 100644
--- a/examples/storybook-hub/package.json
+++ b/examples/storybook-hub/package.json
@@ -6,9 +6,9 @@
   "description": "Example — a devframe hub that docks every built-in plugin's Storybook (lazily spawned in dev, served static in build) alongside the live terminals plugin.",
   "homepage": "https://github.com/devframes/devframe/tree/main/examples/storybook-hub",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --host",
+    "preview": "vite preview",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

From 252caae30a13d28fce274c6a74502545875898ec Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Wed, 22 Jul 2026 01:40:08 +0000
Subject: [PATCH 3/6] feat(examples): unify minimal hub nav headers to shared
 h-nav + brand

Bring the minimal-vite and minimal-next hub shells into the same canonical
top nav as every other surface: a fixed h-nav container with an icon + title
brand block (i-ph-squares-four-duotone), replacing their bespoke
items-baseline headers.
---
 examples/minimal-next-devframe-hub/src/client/app/page.tsx | 7 +++++--
 examples/minimal-vite-devframe-hub/index.html              | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/examples/minimal-next-devframe-hub/src/client/app/page.tsx b/examples/minimal-next-devframe-hub/src/client/app/page.tsx
index 5f23c4af..9b9106b4 100644
--- a/examples/minimal-next-devframe-hub/src/client/app/page.tsx
+++ b/examples/minimal-next-devframe-hub/src/client/app/page.tsx
@@ -156,8 +156,11 @@ export default function Page() {
 
   return (
     <div className="h-full flex flex-col bg-base color-base">
-      <header className="shrink-0 flex items-baseline gap-3 border-b border-base bg-base px4 py2.5">
-        <h1 className="m0 text-sm font-semibold">Minimal Next Devframe Hub</h1>
+      <header className="shrink-0 flex items-center gap-3 h-nav px-3 border-b border-base bg-base">
+        <h1 className="m0 flex items-center gap-1.5 shrink-0 text-sm font-semibold select-none">
+          <span className="i-ph-squares-four-duotone text-base color-active" />
+          <span>Minimal Next Devframe Hub</span>
+        </h1>
         <p className="m0 text-xs font-mono op-fade">
           <span className={`inline-block size-1.5 rounded-full shrink-0 ${statusDot} mr-1.5 align-middle`} />
           {status.text}
diff --git a/examples/minimal-vite-devframe-hub/index.html b/examples/minimal-vite-devframe-hub/index.html
index d34a1bbd..f936f2a7 100644
--- a/examples/minimal-vite-devframe-hub/index.html
+++ b/examples/minimal-vite-devframe-hub/index.html
@@ -14,8 +14,11 @@
   </head>
   <body class="h-full m0 of-hidden bg-base color-base">
     <div class="h-full flex flex-col">
-      <header class="shrink-0 flex items-baseline gap-3 border-b border-base bg-base px4 py2.5">
-        <h1 class="m0 text-sm font-semibold">Minimal Vite Devframe Hub</h1>
+      <header class="shrink-0 flex items-center gap-3 h-nav px-3 border-b border-base bg-base">
+        <h1 class="m0 flex items-center gap-1.5 shrink-0 text-sm font-semibold select-none">
+          <span class="i-ph-squares-four-duotone text-base color-active"></span>
+          <span>Minimal Vite Devframe Hub</span>
+        </h1>
         <p id="status" class="m0 text-xs font-mono op-fade"><span id="conn">Connecting…</span></p>
         <p class="m0 ml-auto text-xs font-mono italic color-muted">a ~120-line, vite-devtools-style hub you can copy</p>
       </header>

From 85135748666eef8cabef6b31f0ac70d526d1a4a7 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Wed, 22 Jul 2026 01:40:19 +0000
Subject: [PATCH 4/6] refactor(design): extract duplicated design.ts helpers to
 design/
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The framework-neutral class-helper builders (cx/button/badge/nav/card/…) were
duplicated byte-for-byte across six surfaces. Move the single implementation to
design/design.ts and reduce each local copy to a re-export, so every surface
stays in lockstep.

The shared config adds design/design.ts to every app's content.filesystem, so
its runtime-assembled class chains are extracted uniformly under both the Vite
pipeline and the @unocss/postcss (filesystem) integrations.
---
 design/design.ts                              | 124 +++++++++++++++++
 design/uno.config.ts                          |   7 +
 examples/files-inspector/src/client/design.ts | 125 +-----------------
 .../src/client/app/design.ts                  | 125 +-----------------
 examples/streaming-chat/src/client/design.ts  | 125 +-----------------
 plugins/a11y/src/spa/design.ts                | 125 +-----------------
 plugins/git/src/client/lib/design.ts          | 125 +-----------------
 plugins/terminals/src/client/design.ts        | 125 +-----------------
 8 files changed, 149 insertions(+), 732 deletions(-)
 create mode 100644 design/design.ts

diff --git a/design/design.ts b/design/design.ts
new file mode 100644
index 00000000..c608961e
--- /dev/null
+++ b/design/design.ts
@@ -0,0 +1,124 @@
+// @unocss-include
+// Shared devframe -> @antfu/design class helpers: framework-neutral builders
+// returning @antfu/design's semantic shortcut classes, so every surface (Solid,
+// Svelte, React, Preact, vanilla) looks identical to the antfu Vue components.
+// The `@unocss-include` marker makes UnoCSS emit the runtime-assembled class
+// chains below; `design/uno.config.ts` adds this file to every app's content so
+// the chains are extracted regardless of framework.
+// Tag palette kept literal for extraction: badge-color-blue badge-color-amber
+// badge-color-green badge-color-red badge-color-sky badge-color-violet
+// badge-color-rose badge-color-teal badge-color-orange badge-color-emerald
+
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ')
+}
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
+export type ButtonSize = 'md' | 'sm' | 'lg'
+export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }
+
+export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
+  const variantClass: Record<ButtonVariant, string> = {
+    primary: 'btn-primary',
+    secondary: 'btn-action',
+    outline: 'btn-action',
+    ghost: 'inline-flex items-center justify-center gap-1.5 rounded px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
+    destructive: 'btn-action text-error border-error/30!',
+    link: 'inline-flex items-center gap-1.5 color-active hover:underline underline-offset-2',
+  }
+  const sizeClass = size === 'sm'
+    ? (variant === 'primary' ? 'text-sm px-2.5! py-1!' : 'text-sm')
+    : size === 'lg' ? 'text-base px-4! py-2!' : ''
+  return cx(variantClass[variant], sizeClass, extra)
+}
+
+export type IconButtonVariant = 'outline' | 'ghost'
+export type IconButtonSize = 'md' | 'sm'
+export interface IconButtonProps { variant?: IconButtonVariant, size?: IconButtonSize, class?: string }
+
+export function iconButton({ variant = 'outline', size = 'md', class: extra }: IconButtonProps = {}): string {
+  const base = variant === 'ghost' ? 'btn-icon' : 'btn-icon-square'
+  const sizeClass = size === 'sm' ? 'w-7! h-7! text-sm' : ''
+  return cx(base, sizeClass, extra)
+}
+
+export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
+export interface BadgeProps { variant?: BadgeVariant, class?: string }
+
+export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
+  const variantClass: Record<BadgeVariant, string> = {
+    primary: 'badge-active',
+    secondary: 'badge-muted',
+    success: 'badge badge-color-green',
+    warning: 'badge badge-color-amber',
+    destructive: 'badge badge-color-red',
+    outline: 'badge border border-base',
+  }
+  return cx(variantClass[variant], extra)
+}
+
+export function tag(color: string, extra?: string): string {
+  return cx('badge', `badge-color-${color}`, extra)
+}
+
+export function tabsList(extra?: string): string {
+  return cx('inline-flex items-center gap-1 p-1 rounded-lg bg-secondary w-max', extra)
+}
+
+export function tab(extra?: string): string {
+  return cx(
+    'px-3 py-1 rounded-md text-sm color-muted inline-flex gap-1.5 items-center whitespace-nowrap select-none cursor-pointer transition outline-none hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40 data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm',
+    extra,
+  )
+}
+
+export interface NavTabProps { active?: boolean, class?: string }
+export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
+  return cx(
+    'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active',
+    active && 'op100! bg-active border-base! color-base',
+    extra,
+  )
+}
+
+export function nav(extra?: string): string {
+  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
+}
+
+export function navBrand(extra?: string): string {
+  return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
+}
+
+export function toolbar(extra?: string): string {
+  return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
+}
+
+export function card(extra?: string): string {
+  return cx('flex flex-col rounded-xl border border-base bg-base shadow-sm', extra)
+}
+
+export function panel(extra?: string): string {
+  return cx('rounded-lg border border-base bg-base', extra)
+}
+
+export function input(extra?: string): string {
+  return cx('w-full min-w-0 rounded border border-base bg-base px-2.5 py-1 text-sm outline-none transition placeholder:color-faint focus-visible:border-active focus-visible:ring-2 focus-visible:ring-primary-500/40', extra)
+}
+
+export function link(extra?: string): string {
+  return cx('color-active hover:underline underline-offset-2', extra)
+}
+
+export type DotState = 'running' | 'idle' | 'error'
+export function dot(state: DotState, extra?: string): string {
+  const stateClass: Record<DotState, string> = {
+    running: 'bg-success',
+    idle: 'bg-neutral-400',
+    error: 'bg-error',
+  }
+  return cx('inline-block size-1.5 rounded-full shrink-0', stateClass[state], extra)
+}
+
+export function spinner(extra?: string): string {
+  return cx('inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin', extra)
+}
diff --git a/design/uno.config.ts b/design/uno.config.ts
index 56be0669..e8ff4246 100644
--- a/design/uno.config.ts
+++ b/design/uno.config.ts
@@ -1,3 +1,4 @@
+import { fileURLToPath } from 'node:url'
 import { presetAnthonyDesign } from '@antfu/design/unocss'
 import {
   defineConfig,
@@ -27,6 +28,12 @@ export const designConfig = defineConfig({
     presetWebFonts({ provider: 'none', fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
   ],
   transformers: [transformerDirectives(), transformerVariantGroup()],
+  // The shared class-helper builders (`design/design.ts`) assemble their class
+  // chains at runtime, so every app scans that one file (it carries
+  // `@unocss-include`) for extraction regardless of its own framework globs.
+  content: {
+    filesystem: [fileURLToPath(new URL('./design.ts', import.meta.url))],
+  },
   // Wind4 leaves bare `border`/`border-b` at currentColor; restore the subtle
   // shared border color (matching `border-base`) for unqualified borders.
   preflights: [{ getCSS: () => '*,::before,::after{border-color:#8882}' }],
diff --git a/examples/files-inspector/src/client/design.ts b/examples/files-inspector/src/client/design.ts
index decc1517..d8e49c73 100644
--- a/examples/files-inspector/src/client/design.ts
+++ b/examples/files-inspector/src/client/design.ts
@@ -1,122 +1,3 @@
-// @unocss-include
-// Co-located devframe -> @antfu/design class helpers: framework-neutral builders
-// returning @antfu/design's semantic shortcut classes, so this surface looks
-// identical to the antfu Vue components. The `@unocss-include` marker makes
-// UnoCSS emit the runtime-assembled class chains below.
-// Tag palette kept literal for extraction: badge-color-blue badge-color-amber
-// badge-color-green badge-color-red badge-color-sky badge-color-violet
-// badge-color-rose badge-color-teal badge-color-orange badge-color-emerald
-
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ')
-}
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
-export type ButtonSize = 'md' | 'sm' | 'lg'
-export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }
-
-export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
-  const variantClass: Record<ButtonVariant, string> = {
-    primary: 'btn-primary',
-    secondary: 'btn-action',
-    outline: 'btn-action',
-    ghost: 'inline-flex items-center justify-center gap-1.5 rounded px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
-    destructive: 'btn-action text-error border-error/30!',
-    link: 'inline-flex items-center gap-1.5 color-active hover:underline underline-offset-2',
-  }
-  const sizeClass = size === 'sm'
-    ? (variant === 'primary' ? 'text-sm px-2.5! py-1!' : 'text-sm')
-    : size === 'lg' ? 'text-base px-4! py-2!' : ''
-  return cx(variantClass[variant], sizeClass, extra)
-}
-
-export type IconButtonVariant = 'outline' | 'ghost'
-export type IconButtonSize = 'md' | 'sm'
-export interface IconButtonProps { variant?: IconButtonVariant, size?: IconButtonSize, class?: string }
-
-export function iconButton({ variant = 'outline', size = 'md', class: extra }: IconButtonProps = {}): string {
-  const base = variant === 'ghost' ? 'btn-icon' : 'btn-icon-square'
-  const sizeClass = size === 'sm' ? 'w-7! h-7! text-sm' : ''
-  return cx(base, sizeClass, extra)
-}
-
-export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
-export interface BadgeProps { variant?: BadgeVariant, class?: string }
-
-export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
-  const variantClass: Record<BadgeVariant, string> = {
-    primary: 'badge-active',
-    secondary: 'badge-muted',
-    success: 'badge badge-color-green',
-    warning: 'badge badge-color-amber',
-    destructive: 'badge badge-color-red',
-    outline: 'badge border border-base',
-  }
-  return cx(variantClass[variant], extra)
-}
-
-export function tag(color: string, extra?: string): string {
-  return cx('badge', `badge-color-${color}`, extra)
-}
-
-export function tabsList(extra?: string): string {
-  return cx('inline-flex items-center gap-1 p-1 rounded-lg bg-secondary w-max', extra)
-}
-
-export function tab(extra?: string): string {
-  return cx(
-    'px-3 py-1 rounded-md text-sm color-muted inline-flex gap-1.5 items-center whitespace-nowrap select-none cursor-pointer transition outline-none hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40 data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm',
-    extra,
-  )
-}
-
-export interface NavTabProps { active?: boolean, class?: string }
-export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
-  return cx(
-    'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active',
-    active && 'op100! bg-active border-base! color-base',
-    extra,
-  )
-}
-
-export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
-}
-
-export function navBrand(extra?: string): string {
-  return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
-}
-
-export function toolbar(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
-}
-
-export function card(extra?: string): string {
-  return cx('flex flex-col rounded-xl border border-base bg-base shadow-sm', extra)
-}
-
-export function panel(extra?: string): string {
-  return cx('rounded-lg border border-base bg-base', extra)
-}
-
-export function input(extra?: string): string {
-  return cx('w-full min-w-0 rounded border border-base bg-base px-2.5 py-1 text-sm outline-none transition placeholder:color-faint focus-visible:border-active focus-visible:ring-2 focus-visible:ring-primary-500/40', extra)
-}
-
-export function link(extra?: string): string {
-  return cx('color-active hover:underline underline-offset-2', extra)
-}
-
-export type DotState = 'running' | 'idle' | 'error'
-export function dot(state: DotState, extra?: string): string {
-  const stateClass: Record<DotState, string> = {
-    running: 'bg-success',
-    idle: 'bg-neutral-400',
-    error: 'bg-error',
-  }
-  return cx('inline-block size-1.5 rounded-full shrink-0', stateClass[state], extra)
-}
-
-export function spinner(extra?: string): string {
-  return cx('inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin', extra)
-}
+// Re-exports the shared devframe class-helper builders (see
+// `design/design.ts`) so this surface stays in lockstep with every other.
+export * from '../../../../design/design'
diff --git a/examples/next-runtime-snapshot/src/client/app/design.ts b/examples/next-runtime-snapshot/src/client/app/design.ts
index decc1517..af3b99e6 100644
--- a/examples/next-runtime-snapshot/src/client/app/design.ts
+++ b/examples/next-runtime-snapshot/src/client/app/design.ts
@@ -1,122 +1,3 @@
-// @unocss-include
-// Co-located devframe -> @antfu/design class helpers: framework-neutral builders
-// returning @antfu/design's semantic shortcut classes, so this surface looks
-// identical to the antfu Vue components. The `@unocss-include` marker makes
-// UnoCSS emit the runtime-assembled class chains below.
-// Tag palette kept literal for extraction: badge-color-blue badge-color-amber
-// badge-color-green badge-color-red badge-color-sky badge-color-violet
-// badge-color-rose badge-color-teal badge-color-orange badge-color-emerald
-
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ')
-}
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
-export type ButtonSize = 'md' | 'sm' | 'lg'
-export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }
-
-export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
-  const variantClass: Record<ButtonVariant, string> = {
-    primary: 'btn-primary',
-    secondary: 'btn-action',
-    outline: 'btn-action',
-    ghost: 'inline-flex items-center justify-center gap-1.5 rounded px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
-    destructive: 'btn-action text-error border-error/30!',
-    link: 'inline-flex items-center gap-1.5 color-active hover:underline underline-offset-2',
-  }
-  const sizeClass = size === 'sm'
-    ? (variant === 'primary' ? 'text-sm px-2.5! py-1!' : 'text-sm')
-    : size === 'lg' ? 'text-base px-4! py-2!' : ''
-  return cx(variantClass[variant], sizeClass, extra)
-}
-
-export type IconButtonVariant = 'outline' | 'ghost'
-export type IconButtonSize = 'md' | 'sm'
-export interface IconButtonProps { variant?: IconButtonVariant, size?: IconButtonSize, class?: string }
-
-export function iconButton({ variant = 'outline', size = 'md', class: extra }: IconButtonProps = {}): string {
-  const base = variant === 'ghost' ? 'btn-icon' : 'btn-icon-square'
-  const sizeClass = size === 'sm' ? 'w-7! h-7! text-sm' : ''
-  return cx(base, sizeClass, extra)
-}
-
-export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
-export interface BadgeProps { variant?: BadgeVariant, class?: string }
-
-export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
-  const variantClass: Record<BadgeVariant, string> = {
-    primary: 'badge-active',
-    secondary: 'badge-muted',
-    success: 'badge badge-color-green',
-    warning: 'badge badge-color-amber',
-    destructive: 'badge badge-color-red',
-    outline: 'badge border border-base',
-  }
-  return cx(variantClass[variant], extra)
-}
-
-export function tag(color: string, extra?: string): string {
-  return cx('badge', `badge-color-${color}`, extra)
-}
-
-export function tabsList(extra?: string): string {
-  return cx('inline-flex items-center gap-1 p-1 rounded-lg bg-secondary w-max', extra)
-}
-
-export function tab(extra?: string): string {
-  return cx(
-    'px-3 py-1 rounded-md text-sm color-muted inline-flex gap-1.5 items-center whitespace-nowrap select-none cursor-pointer transition outline-none hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40 data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm',
-    extra,
-  )
-}
-
-export interface NavTabProps { active?: boolean, class?: string }
-export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
-  return cx(
-    'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active',
-    active && 'op100! bg-active border-base! color-base',
-    extra,
-  )
-}
-
-export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
-}
-
-export function navBrand(extra?: string): string {
-  return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
-}
-
-export function toolbar(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
-}
-
-export function card(extra?: string): string {
-  return cx('flex flex-col rounded-xl border border-base bg-base shadow-sm', extra)
-}
-
-export function panel(extra?: string): string {
-  return cx('rounded-lg border border-base bg-base', extra)
-}
-
-export function input(extra?: string): string {
-  return cx('w-full min-w-0 rounded border border-base bg-base px-2.5 py-1 text-sm outline-none transition placeholder:color-faint focus-visible:border-active focus-visible:ring-2 focus-visible:ring-primary-500/40', extra)
-}
-
-export function link(extra?: string): string {
-  return cx('color-active hover:underline underline-offset-2', extra)
-}
-
-export type DotState = 'running' | 'idle' | 'error'
-export function dot(state: DotState, extra?: string): string {
-  const stateClass: Record<DotState, string> = {
-    running: 'bg-success',
-    idle: 'bg-neutral-400',
-    error: 'bg-error',
-  }
-  return cx('inline-block size-1.5 rounded-full shrink-0', stateClass[state], extra)
-}
-
-export function spinner(extra?: string): string {
-  return cx('inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin', extra)
-}
+// Re-exports the shared devframe class-helper builders (see
+// `design/design.ts`) so this surface stays in lockstep with every other.
+export * from '../../../../../design/design'
diff --git a/examples/streaming-chat/src/client/design.ts b/examples/streaming-chat/src/client/design.ts
index decc1517..d8e49c73 100644
--- a/examples/streaming-chat/src/client/design.ts
+++ b/examples/streaming-chat/src/client/design.ts
@@ -1,122 +1,3 @@
-// @unocss-include
-// Co-located devframe -> @antfu/design class helpers: framework-neutral builders
-// returning @antfu/design's semantic shortcut classes, so this surface looks
-// identical to the antfu Vue components. The `@unocss-include` marker makes
-// UnoCSS emit the runtime-assembled class chains below.
-// Tag palette kept literal for extraction: badge-color-blue badge-color-amber
-// badge-color-green badge-color-red badge-color-sky badge-color-violet
-// badge-color-rose badge-color-teal badge-color-orange badge-color-emerald
-
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ')
-}
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
-export type ButtonSize = 'md' | 'sm' | 'lg'
-export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }
-
-export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
-  const variantClass: Record<ButtonVariant, string> = {
-    primary: 'btn-primary',
-    secondary: 'btn-action',
-    outline: 'btn-action',
-    ghost: 'inline-flex items-center justify-center gap-1.5 rounded px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
-    destructive: 'btn-action text-error border-error/30!',
-    link: 'inline-flex items-center gap-1.5 color-active hover:underline underline-offset-2',
-  }
-  const sizeClass = size === 'sm'
-    ? (variant === 'primary' ? 'text-sm px-2.5! py-1!' : 'text-sm')
-    : size === 'lg' ? 'text-base px-4! py-2!' : ''
-  return cx(variantClass[variant], sizeClass, extra)
-}
-
-export type IconButtonVariant = 'outline' | 'ghost'
-export type IconButtonSize = 'md' | 'sm'
-export interface IconButtonProps { variant?: IconButtonVariant, size?: IconButtonSize, class?: string }
-
-export function iconButton({ variant = 'outline', size = 'md', class: extra }: IconButtonProps = {}): string {
-  const base = variant === 'ghost' ? 'btn-icon' : 'btn-icon-square'
-  const sizeClass = size === 'sm' ? 'w-7! h-7! text-sm' : ''
-  return cx(base, sizeClass, extra)
-}
-
-export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
-export interface BadgeProps { variant?: BadgeVariant, class?: string }
-
-export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
-  const variantClass: Record<BadgeVariant, string> = {
-    primary: 'badge-active',
-    secondary: 'badge-muted',
-    success: 'badge badge-color-green',
-    warning: 'badge badge-color-amber',
-    destructive: 'badge badge-color-red',
-    outline: 'badge border border-base',
-  }
-  return cx(variantClass[variant], extra)
-}
-
-export function tag(color: string, extra?: string): string {
-  return cx('badge', `badge-color-${color}`, extra)
-}
-
-export function tabsList(extra?: string): string {
-  return cx('inline-flex items-center gap-1 p-1 rounded-lg bg-secondary w-max', extra)
-}
-
-export function tab(extra?: string): string {
-  return cx(
-    'px-3 py-1 rounded-md text-sm color-muted inline-flex gap-1.5 items-center whitespace-nowrap select-none cursor-pointer transition outline-none hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40 data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm',
-    extra,
-  )
-}
-
-export interface NavTabProps { active?: boolean, class?: string }
-export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
-  return cx(
-    'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active',
-    active && 'op100! bg-active border-base! color-base',
-    extra,
-  )
-}
-
-export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
-}
-
-export function navBrand(extra?: string): string {
-  return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
-}
-
-export function toolbar(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
-}
-
-export function card(extra?: string): string {
-  return cx('flex flex-col rounded-xl border border-base bg-base shadow-sm', extra)
-}
-
-export function panel(extra?: string): string {
-  return cx('rounded-lg border border-base bg-base', extra)
-}
-
-export function input(extra?: string): string {
-  return cx('w-full min-w-0 rounded border border-base bg-base px-2.5 py-1 text-sm outline-none transition placeholder:color-faint focus-visible:border-active focus-visible:ring-2 focus-visible:ring-primary-500/40', extra)
-}
-
-export function link(extra?: string): string {
-  return cx('color-active hover:underline underline-offset-2', extra)
-}
-
-export type DotState = 'running' | 'idle' | 'error'
-export function dot(state: DotState, extra?: string): string {
-  const stateClass: Record<DotState, string> = {
-    running: 'bg-success',
-    idle: 'bg-neutral-400',
-    error: 'bg-error',
-  }
-  return cx('inline-block size-1.5 rounded-full shrink-0', stateClass[state], extra)
-}
-
-export function spinner(extra?: string): string {
-  return cx('inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin', extra)
-}
+// Re-exports the shared devframe class-helper builders (see
+// `design/design.ts`) so this surface stays in lockstep with every other.
+export * from '../../../../design/design'
diff --git a/plugins/a11y/src/spa/design.ts b/plugins/a11y/src/spa/design.ts
index 13e7551f..d8e49c73 100644
--- a/plugins/a11y/src/spa/design.ts
+++ b/plugins/a11y/src/spa/design.ts
@@ -1,122 +1,3 @@
-// @unocss-include
-// Co-located devframe -> @antfu/design class helpers: framework-neutral builders
-// returning @antfu/design's semantic shortcut classes, so this Solid surface
-// looks identical to the antfu Vue components. The `@unocss-include` marker makes
-// UnoCSS emit the runtime-assembled class chains below.
-// Tag palette kept literal for extraction: badge-color-blue badge-color-amber
-// badge-color-green badge-color-red badge-color-sky badge-color-violet
-// badge-color-rose badge-color-teal badge-color-orange badge-color-emerald
-
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ')
-}
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
-export type ButtonSize = 'md' | 'sm' | 'lg'
-export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }
-
-export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
-  const variantClass: Record<ButtonVariant, string> = {
-    primary: 'btn-primary',
-    secondary: 'btn-action',
-    outline: 'btn-action',
-    ghost: 'inline-flex items-center justify-center gap-1.5 rounded px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
-    destructive: 'btn-action text-error border-error/30!',
-    link: 'inline-flex items-center gap-1.5 color-active hover:underline underline-offset-2',
-  }
-  const sizeClass = size === 'sm'
-    ? (variant === 'primary' ? 'text-sm px-2.5! py-1!' : 'text-sm')
-    : size === 'lg' ? 'text-base px-4! py-2!' : ''
-  return cx(variantClass[variant], sizeClass, extra)
-}
-
-export type IconButtonVariant = 'outline' | 'ghost'
-export type IconButtonSize = 'md' | 'sm'
-export interface IconButtonProps { variant?: IconButtonVariant, size?: IconButtonSize, class?: string }
-
-export function iconButton({ variant = 'outline', size = 'md', class: extra }: IconButtonProps = {}): string {
-  const base = variant === 'ghost' ? 'btn-icon' : 'btn-icon-square'
-  const sizeClass = size === 'sm' ? 'w-7! h-7! text-sm' : ''
-  return cx(base, sizeClass, extra)
-}
-
-export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
-export interface BadgeProps { variant?: BadgeVariant, class?: string }
-
-export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
-  const variantClass: Record<BadgeVariant, string> = {
-    primary: 'badge-active',
-    secondary: 'badge-muted',
-    success: 'badge badge-color-green',
-    warning: 'badge badge-color-amber',
-    destructive: 'badge badge-color-red',
-    outline: 'badge border border-base',
-  }
-  return cx(variantClass[variant], extra)
-}
-
-export function tag(color: string, extra?: string): string {
-  return cx('badge', `badge-color-${color}`, extra)
-}
-
-export function tabsList(extra?: string): string {
-  return cx('inline-flex items-center gap-1 p-1 rounded-lg bg-secondary w-max', extra)
-}
-
-export function tab(extra?: string): string {
-  return cx(
-    'px-3 py-1 rounded-md text-sm color-muted inline-flex gap-1.5 items-center whitespace-nowrap select-none cursor-pointer transition outline-none hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40 data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm',
-    extra,
-  )
-}
-
-export interface NavTabProps { active?: boolean, class?: string }
-export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
-  return cx(
-    'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active',
-    active && 'op100! bg-active border-base! color-base',
-    extra,
-  )
-}
-
-export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
-}
-
-export function navBrand(extra?: string): string {
-  return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
-}
-
-export function toolbar(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
-}
-
-export function card(extra?: string): string {
-  return cx('flex flex-col rounded-xl border border-base bg-base shadow-sm', extra)
-}
-
-export function panel(extra?: string): string {
-  return cx('rounded-lg border border-base bg-base', extra)
-}
-
-export function input(extra?: string): string {
-  return cx('w-full min-w-0 rounded border border-base bg-base px-2.5 py-1 text-sm outline-none transition placeholder:color-faint focus-visible:border-active focus-visible:ring-2 focus-visible:ring-primary-500/40', extra)
-}
-
-export function link(extra?: string): string {
-  return cx('color-active hover:underline underline-offset-2', extra)
-}
-
-export type DotState = 'running' | 'idle' | 'error'
-export function dot(state: DotState, extra?: string): string {
-  const stateClass: Record<DotState, string> = {
-    running: 'bg-success',
-    idle: 'bg-neutral-400',
-    error: 'bg-error',
-  }
-  return cx('inline-block size-1.5 rounded-full shrink-0', stateClass[state], extra)
-}
-
-export function spinner(extra?: string): string {
-  return cx('inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin', extra)
-}
+// Re-exports the shared devframe class-helper builders (see
+// `design/design.ts`) so this surface stays in lockstep with every other.
+export * from '../../../../design/design'
diff --git a/plugins/git/src/client/lib/design.ts b/plugins/git/src/client/lib/design.ts
index d6dc8ffc..af3b99e6 100644
--- a/plugins/git/src/client/lib/design.ts
+++ b/plugins/git/src/client/lib/design.ts
@@ -1,122 +1,3 @@
-// @unocss-include
-// Co-located devframe -> @antfu/design class helpers: framework-neutral builders
-// returning @antfu/design's semantic shortcut classes, so this React surface
-// looks identical to the antfu Vue components. The `@unocss-include` marker makes
-// UnoCSS emit the runtime-assembled class chains below.
-// Tag palette kept literal for extraction: badge-color-blue badge-color-amber
-// badge-color-green badge-color-red badge-color-sky badge-color-violet
-// badge-color-rose badge-color-teal badge-color-orange badge-color-emerald
-
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ')
-}
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
-export type ButtonSize = 'md' | 'sm' | 'lg'
-export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }
-
-export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
-  const variantClass: Record<ButtonVariant, string> = {
-    primary: 'btn-primary',
-    secondary: 'btn-action',
-    outline: 'btn-action',
-    ghost: 'inline-flex items-center justify-center gap-1.5 rounded px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
-    destructive: 'btn-action text-error border-error/30!',
-    link: 'inline-flex items-center gap-1.5 color-active hover:underline underline-offset-2',
-  }
-  const sizeClass = size === 'sm'
-    ? (variant === 'primary' ? 'text-sm px-2.5! py-1!' : 'text-sm')
-    : size === 'lg' ? 'text-base px-4! py-2!' : ''
-  return cx(variantClass[variant], sizeClass, extra)
-}
-
-export type IconButtonVariant = 'outline' | 'ghost'
-export type IconButtonSize = 'md' | 'sm'
-export interface IconButtonProps { variant?: IconButtonVariant, size?: IconButtonSize, class?: string }
-
-export function iconButton({ variant = 'outline', size = 'md', class: extra }: IconButtonProps = {}): string {
-  const base = variant === 'ghost' ? 'btn-icon' : 'btn-icon-square'
-  const sizeClass = size === 'sm' ? 'w-7! h-7! text-sm' : ''
-  return cx(base, sizeClass, extra)
-}
-
-export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
-export interface BadgeProps { variant?: BadgeVariant, class?: string }
-
-export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
-  const variantClass: Record<BadgeVariant, string> = {
-    primary: 'badge-active',
-    secondary: 'badge-muted',
-    success: 'badge badge-color-green',
-    warning: 'badge badge-color-amber',
-    destructive: 'badge badge-color-red',
-    outline: 'badge border border-base',
-  }
-  return cx(variantClass[variant], extra)
-}
-
-export function tag(color: string, extra?: string): string {
-  return cx('badge', `badge-color-${color}`, extra)
-}
-
-export function tabsList(extra?: string): string {
-  return cx('inline-flex items-center gap-1 p-1 rounded-lg bg-secondary w-max', extra)
-}
-
-export function tab(extra?: string): string {
-  return cx(
-    'px-3 py-1 rounded-md text-sm color-muted inline-flex gap-1.5 items-center whitespace-nowrap select-none cursor-pointer transition outline-none hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40 data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm',
-    extra,
-  )
-}
-
-export interface NavTabProps { active?: boolean, class?: string }
-export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
-  return cx(
-    'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active',
-    active && 'op100! bg-active border-base! color-base',
-    extra,
-  )
-}
-
-export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
-}
-
-export function navBrand(extra?: string): string {
-  return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
-}
-
-export function toolbar(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
-}
-
-export function card(extra?: string): string {
-  return cx('flex flex-col rounded-xl border border-base bg-base shadow-sm', extra)
-}
-
-export function panel(extra?: string): string {
-  return cx('rounded-lg border border-base bg-base', extra)
-}
-
-export function input(extra?: string): string {
-  return cx('w-full min-w-0 rounded border border-base bg-base px-2.5 py-1 text-sm outline-none transition placeholder:color-faint focus-visible:border-active focus-visible:ring-2 focus-visible:ring-primary-500/40', extra)
-}
-
-export function link(extra?: string): string {
-  return cx('color-active hover:underline underline-offset-2', extra)
-}
-
-export type DotState = 'running' | 'idle' | 'error'
-export function dot(state: DotState, extra?: string): string {
-  const stateClass: Record<DotState, string> = {
-    running: 'bg-success',
-    idle: 'bg-neutral-400',
-    error: 'bg-error',
-  }
-  return cx('inline-block size-1.5 rounded-full shrink-0', stateClass[state], extra)
-}
-
-export function spinner(extra?: string): string {
-  return cx('inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin', extra)
-}
+// Re-exports the shared devframe class-helper builders (see
+// `design/design.ts`) so this surface stays in lockstep with every other.
+export * from '../../../../../design/design'
diff --git a/plugins/terminals/src/client/design.ts b/plugins/terminals/src/client/design.ts
index cf6b204e..d8e49c73 100644
--- a/plugins/terminals/src/client/design.ts
+++ b/plugins/terminals/src/client/design.ts
@@ -1,122 +1,3 @@
-// @unocss-include
-// Co-located devframe -> @antfu/design class helpers: framework-neutral builders
-// returning @antfu/design's semantic shortcut classes, so this Svelte surface
-// looks identical to the antfu Vue components. The `@unocss-include` marker makes
-// UnoCSS emit the runtime-assembled class chains below.
-// Tag palette kept literal for extraction: badge-color-blue badge-color-amber
-// badge-color-green badge-color-red badge-color-sky badge-color-violet
-// badge-color-rose badge-color-teal badge-color-orange badge-color-emerald
-
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ')
-}
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'
-export type ButtonSize = 'md' | 'sm' | 'lg'
-export interface ButtonProps { variant?: ButtonVariant, size?: ButtonSize, class?: string }
-
-export function button({ variant = 'primary', size = 'md', class: extra }: ButtonProps = {}): string {
-  const variantClass: Record<ButtonVariant, string> = {
-    primary: 'btn-primary',
-    secondary: 'btn-action',
-    outline: 'btn-action',
-    ghost: 'inline-flex items-center justify-center gap-1.5 rounded px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30!',
-    destructive: 'btn-action text-error border-error/30!',
-    link: 'inline-flex items-center gap-1.5 color-active hover:underline underline-offset-2',
-  }
-  const sizeClass = size === 'sm'
-    ? (variant === 'primary' ? 'text-sm px-2.5! py-1!' : 'text-sm')
-    : size === 'lg' ? 'text-base px-4! py-2!' : ''
-  return cx(variantClass[variant], sizeClass, extra)
-}
-
-export type IconButtonVariant = 'outline' | 'ghost'
-export type IconButtonSize = 'md' | 'sm'
-export interface IconButtonProps { variant?: IconButtonVariant, size?: IconButtonSize, class?: string }
-
-export function iconButton({ variant = 'outline', size = 'md', class: extra }: IconButtonProps = {}): string {
-  const base = variant === 'ghost' ? 'btn-icon' : 'btn-icon-square'
-  const sizeClass = size === 'sm' ? 'w-7! h-7! text-sm' : ''
-  return cx(base, sizeClass, extra)
-}
-
-export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'
-export interface BadgeProps { variant?: BadgeVariant, class?: string }
-
-export function badge({ variant = 'secondary', class: extra }: BadgeProps = {}): string {
-  const variantClass: Record<BadgeVariant, string> = {
-    primary: 'badge-active',
-    secondary: 'badge-muted',
-    success: 'badge badge-color-green',
-    warning: 'badge badge-color-amber',
-    destructive: 'badge badge-color-red',
-    outline: 'badge border border-base',
-  }
-  return cx(variantClass[variant], extra)
-}
-
-export function tag(color: string, extra?: string): string {
-  return cx('badge', `badge-color-${color}`, extra)
-}
-
-export function tabsList(extra?: string): string {
-  return cx('inline-flex items-center gap-1 p-1 rounded-lg bg-secondary w-max', extra)
-}
-
-export function tab(extra?: string): string {
-  return cx(
-    'px-3 py-1 rounded-md text-sm color-muted inline-flex gap-1.5 items-center whitespace-nowrap select-none cursor-pointer transition outline-none hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40 data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm',
-    extra,
-  )
-}
-
-export interface NavTabProps { active?: boolean, class?: string }
-export function navTab({ active = false, class: extra }: NavTabProps = {}): string {
-  return cx(
-    'relative inline-flex items-center gap-1.5 max-w-52 px-2 py-1 rounded-md border border-transparent text-sm op-fade select-none cursor-pointer transition hover:op100 hover:bg-active',
-    active && 'op100! bg-active border-base! color-base',
-    extra,
-  )
-}
-
-export function nav(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-nav px-3 border-b border-base bg-base z-nav', extra)
-}
-
-export function navBrand(extra?: string): string {
-  return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
-}
-
-export function toolbar(extra?: string): string {
-  return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
-}
-
-export function card(extra?: string): string {
-  return cx('flex flex-col rounded-xl border border-base bg-base shadow-sm', extra)
-}
-
-export function panel(extra?: string): string {
-  return cx('rounded-lg border border-base bg-base', extra)
-}
-
-export function input(extra?: string): string {
-  return cx('w-full min-w-0 rounded border border-base bg-base px-2.5 py-1 text-sm outline-none transition placeholder:color-faint focus-visible:border-active focus-visible:ring-2 focus-visible:ring-primary-500/40', extra)
-}
-
-export function link(extra?: string): string {
-  return cx('color-active hover:underline underline-offset-2', extra)
-}
-
-export type DotState = 'running' | 'idle' | 'error'
-export function dot(state: DotState, extra?: string): string {
-  const stateClass: Record<DotState, string> = {
-    running: 'bg-success',
-    idle: 'bg-neutral-400',
-    error: 'bg-error',
-  }
-  return cx('inline-block size-1.5 rounded-full shrink-0', stateClass[state], extra)
-}
-
-export function spinner(extra?: string): string {
-  return cx('inline-block size-4 rounded-full border-2 border-current border-t-transparent animate-spin', extra)
-}
+// Re-exports the shared devframe class-helper builders (see
+// `design/design.ts`) so this surface stays in lockstep with every other.
+export * from '../../../../design/design'

From 0a2d7f5ef5e8cfa68d3bffa323506dace31924b5 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Wed, 22 Jul 2026 02:04:11 +0000
Subject: [PATCH 5/6] feat(design): shared connection indicator, shown only
 when disconnected

Add a framework-neutral `connectionIndicator(status)` helper to design/design.ts
that returns a dot + label pill for every non-connected state and `null` when
connected. Adopt it in each surface's top nav (inspect, messages, data-inspector,
git), replacing their bespoke pills/badges, so the connection state renders
identically everywhere and only appears while the connection is not live.
---
 design/design.ts                              | 34 +++++++++++++++++++
 .../src/spa/components/AppHeader.vue          | 17 ++++++----
 .../git/src/client/components/dashboard.tsx   | 24 ++++++-------
 plugins/inspect/src/spa/App.vue               | 22 ++++++------
 plugins/inspect/src/spa/style.css             | 29 +---------------
 plugins/messages/src/client/App.vue           |  9 +++++
 6 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/design/design.ts b/design/design.ts
index c608961e..c951b514 100644
--- a/design/design.ts
+++ b/design/design.ts
@@ -89,6 +89,40 @@ export function navBrand(extra?: string): string {
   return cx('flex items-center gap-1.5 shrink-0 font-semibold text-sm select-none', extra)
 }
 
+// Mirrors devframe's `DevframeConnectionStatus` (kept local so this class-helper
+// module stays free of package imports); the two share the same string members.
+export type ConnectionStatus = 'connecting' | 'connected' | 'unauthorized' | 'disconnected' | 'error'
+
+export interface ConnectionIndicator {
+  /** Short status label, e.g. `disconnected`. */
+  label: string
+  /** Class chain for the status dot. */
+  dot: string
+  /** Class chain for the pill wrapper. */
+  class: string
+}
+
+const CONNECTION_TONE: Record<Exclude<ConnectionStatus, 'connected'>, { label: string, dot: string }> = {
+  connecting: { label: 'connecting…', dot: 'bg-neutral-400 animate-pulse' },
+  disconnected: { label: 'disconnected', dot: 'bg-error' },
+  unauthorized: { label: 'unauthorized', dot: 'bg-warning' },
+  error: { label: 'error', dot: 'bg-error' },
+}
+
+// The shared top-nav connection indicator: a small status dot + label. Returns
+// `null` when the client is `connected`, so every surface renders the indicator
+// only while the connection is not live.
+export function connectionIndicator(status: ConnectionStatus, extra?: string): ConnectionIndicator | null {
+  if (status === 'connected')
+    return null
+  const tone = CONNECTION_TONE[status]
+  return {
+    label: tone.label,
+    dot: cx('inline-block size-1.5 rounded-full shrink-0', tone.dot),
+    class: cx('flex items-center gap-1.5 shrink-0 text-xs color-muted select-none', extra),
+  }
+}
+
 export function toolbar(extra?: string): string {
   return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
 }
diff --git a/plugins/data-inspector/src/spa/components/AppHeader.vue b/plugins/data-inspector/src/spa/components/AppHeader.vue
index 3f011fc2..6f1992b2 100644
--- a/plugins/data-inspector/src/spa/components/AppHeader.vue
+++ b/plugins/data-inspector/src/spa/components/AppHeader.vue
@@ -2,8 +2,14 @@
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
+import { computed } from 'vue'
+import { connectionIndicator } from '../../../../../design/design'
 import { connection } from '../composables/rpc'
 import { isDark } from '../composables/scheme'
+
+// The shared top-nav connection indicator (dot + label), shown only while the
+// connection is not live. The `static` mode badge below is a separate concept.
+const conn = computed(() => connectionIndicator(connection.status))
 </script>
 
 <template>
@@ -20,13 +26,10 @@ import { isDark } from '../composables/scheme'
         text="static"
         :color="false"
       />
-      <DisplayBadge
-        v-else-if="connection.status !== 'connected'"
-        class="flex items-center gap-1.5 py-1 text-xs select-none capitalize"
-        :title="connection.error ?? undefined"
-        :text="connection.status"
-        :color="connection.connected ? 100 : 200"
-      />
+      <span v-else-if="conn" :class="conn.class" :title="connection.error ?? undefined">
+        <span :class="conn.dot" />
+        {{ conn.label }}
+      </span>
     </div>
 
     <template #search>
diff --git a/plugins/git/src/client/components/dashboard.tsx b/plugins/git/src/client/components/dashboard.tsx
index 473d4d9d..9c09ca32 100644
--- a/plugins/git/src/client/components/dashboard.tsx
+++ b/plugins/git/src/client/components/dashboard.tsx
@@ -4,14 +4,13 @@ import type { DevframeRpcClient } from 'devframe/client'
 import type { PointerEvent as ReactPointerEvent } from 'react'
 import type { GitBranches } from '../../index'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { nav as navBar, navBrand, tab as tabClass, tabsList } from '../lib/design'
+import { connectionIndicator, nav as navBar, navBrand, tab as tabClass, tabsList } from '../lib/design'
 import { CommitDetailsPanel } from './commit-details-panel'
 import { ConnectionState } from './connection-state'
 import { LogPanel } from './log-panel'
 import { RpcProvider, useRpc } from './rpc-provider'
 import { StatusPanel } from './status-panel'
 import { useTheme } from './theme'
-import { Badge } from './ui/badge'
 import { IconButton } from './ui/button'
 import { Icon } from './ui/icon'
 import { useRpcResource } from './use-rpc-resource'
@@ -91,19 +90,18 @@ function Resizer({ onPointerDown, label }: { onPointerDown: (e: ReactPointerEven
   )
 }
 
+// The shared top-nav connection indicator (dot + label), shown only while the
+// connection is not live; when connected it renders nothing.
 function ConnectionBadge() {
-  const { rpc, status } = useRpc()
-  if (status === 'error' || status === 'disconnected')
-    return <Badge variant="destructive">{status}</Badge>
-  if (status === 'unauthorized')
-    return <Badge variant="warning">unauthorized</Badge>
-  if (status === 'connecting' || !rpc)
-    return <Badge variant="secondary">connecting…</Badge>
-  const backend = rpc.connectionMeta.backend
+  const { status } = useRpc()
+  const conn = connectionIndicator(status)
+  if (!conn)
+    return null
   return (
-    <Badge variant={backend === 'websocket' ? 'success' : 'secondary'} className="font-mono">
-      {backend === 'websocket' ? 'live' : 'static'}
-    </Badge>
+    <span className={conn.class}>
+      <span className={conn.dot} />
+      {conn.label}
+    </span>
   )
 }
 
diff --git a/plugins/inspect/src/spa/App.vue b/plugins/inspect/src/spa/App.vue
index ed00f290..0332cc40 100644
--- a/plugins/inspect/src/spa/App.vue
+++ b/plugins/inspect/src/spa/App.vue
@@ -2,7 +2,8 @@
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import LayoutTabs from '@antfu/design/components/Layout/LayoutTabs.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { connectionIndicator } from '../../../../design/design'
 import AgentSmart from './components/AgentSmart.vue'
 import FunctionsSmart from './components/FunctionsSmart.vue'
 import HistorySmart from './components/HistorySmart.vue'
@@ -15,6 +16,10 @@ type Tab = 'functions' | 'state' | 'agent' | 'history'
 const tab = ref<Tab>('functions')
 const { refresh, loading } = useRefresh()
 
+// The shared connection indicator (dot + label) surfaces only while the
+// connection is not live; when connected it renders nothing.
+const conn = computed(() => connectionIndicator(connection.status))
+
 const tabs: { value: Tab, label: string, icon: string }[] = [
   { value: 'functions', label: 'Functions', icon: 'i-ph-function-duotone' },
   { value: 'state', label: 'State', icon: 'i-ph-database-duotone' },
@@ -45,17 +50,10 @@ function reload(): void {
       </template>
 
       <template #end>
-        <div
-          class="conn"
-          :class="{ ok: connection.connected, err: connection.status === 'error' || connection.status === 'disconnected', warn: connection.status === 'unauthorized' }"
-        >
-          <span class="led" />
-          <span v-if="connection.status === 'disconnected'">disconnected</span>
-          <span v-else-if="connection.status === 'unauthorized'">unauthorized</span>
-          <span v-else-if="connection.status === 'error'">error</span>
-          <span v-else-if="connection.connected">{{ connection.backend }}</span>
-          <span v-else>connecting…</span>
-        </div>
+        <span v-if="conn" :class="conn.class">
+          <span :class="conn.dot" />
+          {{ conn.label }}
+        </span>
 
         <ActionIconButton
           class="text-sm"
diff --git a/plugins/inspect/src/spa/style.css b/plugins/inspect/src/spa/style.css
index 99a593a1..aa9821e2 100644
--- a/plugins/inspect/src/spa/style.css
+++ b/plugins/inspect/src/spa/style.css
@@ -97,34 +97,7 @@ textarea {
 }
 
 /* ---- header: the LayoutToolbar, LayoutTabs and ActionIconButton come from
-   `@antfu/design`; only the connection status pill below stays bespoke. ---- */
-.conn {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 11.5px;
-  color: var(--df-fg-dim);
-}
-
-.conn .led {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--df-fg-faint);
-}
-
-.conn.ok .led {
-  background: var(--df-accent);
-  box-shadow: 0 0 6px var(--df-accent);
-}
-
-.conn.err .led {
-  background: var(--df-danger);
-}
-
-.conn.warn .led {
-  background: var(--df-warning, #d9a441);
-}
+   `@antfu/design`; the connection indicator comes from `design/design.ts`. ---- */
 
 /* ---- body ---- */
 .app-body {
diff --git a/plugins/messages/src/client/App.vue b/plugins/messages/src/client/App.vue
index 8a6adedf..68cb98e0 100644
--- a/plugins/messages/src/client/App.vue
+++ b/plugins/messages/src/client/App.vue
@@ -3,6 +3,7 @@ import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/clien
 import type { DevframeMessageEntry } from '../types'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onBeforeUnmount, ref } from 'vue'
+import { connectionIndicator } from '../../../../design/design'
 import MessagesView from './components/MessagesView.vue'
 import { useMessages } from './state/messages'
 
@@ -29,6 +30,10 @@ const CONNECTION_COPY: Record<Exclude<DevframeConnectionStatus, 'connected'>, {
 }
 const connectionCopy = computed(() => status.value === 'connected' ? null : CONNECTION_COPY[status.value])
 
+// The shared top-nav connection indicator (dot + label), shown only while the
+// connection is not live.
+const conn = computed(() => connectionIndicator(status.value))
+
 function reload(): void {
   location.reload()
 }
@@ -81,6 +86,10 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </template>
 
       <template #end>
+        <span v-if="conn" :class="conn.class">
+          <span :class="conn.dot" />
+          {{ conn.label }}
+        </span>
         <span v-if="state.entries.length > 0" class="badge-muted font-mono">
           {{ state.entries.length }}
         </span>

From 513c0c8bbed30f80fb7106d97a3faefa261231b7 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Wed, 22 Jul 2026 02:14:46 +0000
Subject: [PATCH 6/6] refactor(design): unify the full-panel connection state

The full-screen "not connected" state was reimplemented with a near-identical
copy map in four surfaces (git, inspect, messages, terminals). Move the copy
(icon/title/body/reloadable/spin per status) and the layout class builders
(connectionPanel/Glyph/Title/Body/Detail) into design/design.ts, and have every
surface render from them, so the disconnected/error/unauthorized/connecting
panels look identical across React, Vue and Svelte.
---
 design/design.ts                              | 76 +++++++++++++++++++
 .../client/components/connection-state.tsx    | 59 ++++----------
 plugins/inspect/src/spa/App.vue               | 53 +++++++------
 plugins/inspect/src/spa/style.css             |  9 ---
 plugins/messages/src/client/App.vue           | 40 +++++-----
 plugins/terminals/src/client/App.svelte       | 41 ++++++----
 6 files changed, 163 insertions(+), 115 deletions(-)

diff --git a/design/design.ts b/design/design.ts
index c951b514..10021af8 100644
--- a/design/design.ts
+++ b/design/design.ts
@@ -123,6 +123,82 @@ export function connectionIndicator(status: ConnectionStatus, extra?: string): C
   }
 }
 
+export interface ConnectionStateCopy {
+  /** Phosphor icon for the state glyph. */
+  icon: string
+  /** Short heading, e.g. `Disconnected`. */
+  title: string
+  /** One-line explanation of the state and how to recover. */
+  body: string
+  /** Whether to offer the reload recovery button (every state but `connecting`). */
+  reloadable: boolean
+  /** Whether the glyph should animate while the handshake is in flight. */
+  spin: boolean
+}
+
+const CONNECTION_STATE: Record<Exclude<ConnectionStatus, 'connected'>, ConnectionStateCopy> = {
+  connecting: {
+    icon: 'i-ph-plugs-connected-duotone',
+    title: 'Connecting…',
+    body: 'Establishing a connection to the devframe server.',
+    reloadable: false,
+    spin: true,
+  },
+  disconnected: {
+    icon: 'i-ph-plugs-duotone',
+    title: 'Disconnected',
+    body: 'Lost the connection to the devframe server. Reload once it is back up.',
+    reloadable: true,
+    spin: false,
+  },
+  unauthorized: {
+    icon: 'i-ph-lock-key-duotone',
+    title: 'Not authorized',
+    body: 'This client isn’t authorized. Reopen the link printed by your dev server, then reload.',
+    reloadable: true,
+    spin: false,
+  },
+  error: {
+    icon: 'i-ph-warning-octagon-duotone',
+    title: 'Connection failed',
+    body: 'Could not reach the devframe server.',
+    reloadable: true,
+    spin: false,
+  },
+}
+
+// The shared full-panel connection state copy: shown whenever the client isn't
+// `connected`, so a surface never sits on an infinite spinner without saying
+// why. Returns `null` when connected. Pair with the `connection*` class builders
+// below so every surface renders the identical centered glyph + title + body.
+export function connectionState(status: ConnectionStatus): ConnectionStateCopy | null {
+  if (status === 'connected')
+    return null
+  return CONNECTION_STATE[status]
+}
+
+// Centered fill for the full-panel state; each surface adds its own fill
+// strategy (`h-full`, `h-svh w-full`, `absolute inset-0`, …) via `extra`.
+export function connectionPanel(extra?: string): string {
+  return cx('flex flex-col items-center justify-center gap-4 bg-base p-8 text-center', extra)
+}
+
+export function connectionGlyph(spin = false, extra?: string): string {
+  return cx('text-4xl color-active', spin && 'animate-pulse', extra)
+}
+
+export function connectionTitle(extra?: string): string {
+  return cx('text-lg font-medium color-base', extra)
+}
+
+export function connectionBody(extra?: string): string {
+  return cx('max-w-sm text-sm color-muted', extra)
+}
+
+export function connectionDetail(extra?: string): string {
+  return cx('mt-1 max-w-sm break-words font-mono text-xs color-faint', extra)
+}
+
 export function toolbar(extra?: string): string {
   return cx('flex items-center gap-2 shrink-0 h-8 px-2.5 border-b border-base bg-secondary text-sm', extra)
 }
diff --git a/plugins/git/src/client/components/connection-state.tsx b/plugins/git/src/client/components/connection-state.tsx
index aae59ca2..bf77d54b 100644
--- a/plugins/git/src/client/components/connection-state.tsx
+++ b/plugins/git/src/client/components/connection-state.tsx
@@ -1,63 +1,30 @@
 'use client'
 
 import type { DevframeConnectionStatus } from 'devframe/client'
-import { button } from '../lib/design'
+import { button, connectionBody, connectionDetail, connectionGlyph, connectionPanel, connectionState, connectionTitle } from '../lib/design'
 import { Icon } from './ui/icon'
 
-interface StateCopy {
-  icon: string
-  title: string
-  body: string
-  spin?: boolean
-}
-
-const COPY: Record<Exclude<DevframeConnectionStatus, 'connected'>, StateCopy> = {
-  connecting: {
-    icon: 'i-ph-plugs-connected-duotone',
-    title: 'Connecting…',
-    body: 'Establishing a connection to the devframe server.',
-    spin: true,
-  },
-  disconnected: {
-    icon: 'i-ph-plugs-duotone',
-    title: 'Disconnected',
-    body: 'Lost the connection to the devframe server. Reload once it is back up.',
-  },
-  unauthorized: {
-    icon: 'i-ph-lock-key-duotone',
-    title: 'Not authorized',
-    body: 'This client isn’t authorized. Reopen the link printed by your dev server, then reload.',
-  },
-  error: {
-    icon: 'i-ph-warning-octagon-duotone',
-    title: 'Connection failed',
-    body: 'Could not reach the devframe server.',
-  },
-}
-
 /**
- * Full-panel connection state — shown whenever the client isn't `connected`,
- * so the UI never sits on an infinite spinner without saying why. Reload is the
- * recovery path (the client doesn't auto-reconnect).
+ * Full-panel connection state — shown whenever the client isn't `connected`, so
+ * the UI never sits on an infinite spinner without saying why. Copy and layout
+ * come from the shared `design/design.ts` so every surface looks identical;
+ * reload is the recovery path (the client doesn't auto-reconnect).
  */
 export function ConnectionState({ status, error }: { status: DevframeConnectionStatus, error?: string | null }) {
-  if (status === 'connected')
+  const copy = connectionState(status)
+  if (!copy)
     return null
-  const copy = COPY[status]
   return (
-    <div className="bg-base flex h-svh w-full flex-col items-center justify-center gap-4 p-8 text-center">
-      <Icon
-        name={copy.icon}
-        className={`color-active size-10 ${copy.spin ? 'animate-pulse' : ''}`}
-      />
+    <div className={connectionPanel('h-svh w-full')}>
+      <Icon name={copy.icon} className={connectionGlyph(copy.spin)} />
       <div className="flex flex-col gap-1">
-        <p className="color-base text-lg font-medium">{copy.title}</p>
-        <p className="color-muted max-w-sm text-sm">{copy.body}</p>
+        <p className={connectionTitle()}>{copy.title}</p>
+        <p className={connectionBody()}>{copy.body}</p>
         {error && status === 'error' && (
-          <p className="color-faint mt-1 max-w-sm break-words font-mono text-xs">{error}</p>
+          <p className={connectionDetail()}>{error}</p>
         )}
       </div>
-      {status !== 'connecting' && (
+      {copy.reloadable && (
         <button type="button" className={button({ variant: 'primary', size: 'sm' })} onClick={() => location.reload()}>
           <Icon name="i-ph-arrow-clockwise" className="size-4" />
           Reload
diff --git a/plugins/inspect/src/spa/App.vue b/plugins/inspect/src/spa/App.vue
index 0332cc40..adccd464 100644
--- a/plugins/inspect/src/spa/App.vue
+++ b/plugins/inspect/src/spa/App.vue
@@ -3,7 +3,16 @@ import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.v
 import LayoutTabs from '@antfu/design/components/Layout/LayoutTabs.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onMounted, ref } from 'vue'
-import { connectionIndicator } from '../../../../design/design'
+import {
+  button,
+  connectionBody,
+  connectionDetail,
+  connectionGlyph,
+  connectionIndicator,
+  connectionPanel,
+  connectionState,
+  connectionTitle,
+} from '../../../../design/design'
 import AgentSmart from './components/AgentSmart.vue'
 import FunctionsSmart from './components/FunctionsSmart.vue'
 import HistorySmart from './components/HistorySmart.vue'
@@ -20,6 +29,10 @@ const { refresh, loading } = useRefresh()
 // connection is not live; when connected it renders nothing.
 const conn = computed(() => connectionIndicator(connection.status))
 
+// The shared full-panel connection state takes over the body until the client
+// is connected.
+const connState = computed(() => connectionState(connection.status))
+
 const tabs: { value: Tab, label: string, icon: string }[] = [
   { value: 'functions', label: 'Functions', icon: 'i-ph-function-duotone' },
   { value: 'state', label: 'State', icon: 'i-ph-database-duotone' },
@@ -67,32 +80,24 @@ function reload(): void {
     </LayoutToolbar>
 
     <main class="app-body">
-      <div v-if="connection.status === 'error'" class="center error">
-        <span class="i-ph-warning-octagon-duotone state-glyph" />
-        <div>Failed to connect to the devframe backend.</div>
-        <code v-if="connection.error">{{ connection.error }}</code>
-        <button type="button" class="btn-action" @click="reload">
-          Reload
-        </button>
-      </div>
-      <div v-else-if="connection.status === 'disconnected'" class="center error">
-        <span class="i-ph-plugs-duotone state-glyph" />
-        <div>Disconnected from the devframe backend.</div>
-        <button type="button" class="btn-action" @click="reload">
+      <div v-if="connState" :class="connectionPanel('h-full')">
+        <span :class="[connState.icon, connectionGlyph(connState.spin)]" />
+        <div class="flex flex-col gap-1">
+          <p :class="connectionTitle()">
+            {{ connState.title }}
+          </p>
+          <p :class="connectionBody()">
+            {{ connState.body }}
+          </p>
+          <p v-if="connection.error && connection.status === 'error'" :class="connectionDetail()">
+            {{ connection.error }}
+          </p>
+        </div>
+        <button v-if="connState.reloadable" type="button" :class="button({ variant: 'primary', size: 'sm' })" @click="reload">
+          <span class="i-ph-arrow-clockwise" />
           Reload
         </button>
       </div>
-      <div v-else-if="connection.status === 'unauthorized'" class="center error">
-        <span class="i-ph-lock-key-duotone state-glyph" />
-        <div>Not authorized. Reopen the link printed by your dev server, then reload.</div>
-        <button type="button" class="btn-action" @click="reload">
-          Reload
-        </button>
-      </div>
-      <div v-else-if="!connection.connected" class="center">
-        <span class="i-ph-plugs-connected-duotone state-glyph" />
-        Connecting to devframe…
-      </div>
       <template v-else>
         <FunctionsSmart v-if="tab === 'functions'" />
         <StateSmart v-else-if="tab === 'state'" />
diff --git a/plugins/inspect/src/spa/style.css b/plugins/inspect/src/spa/style.css
index aa9821e2..e2279464 100644
--- a/plugins/inspect/src/spa/style.css
+++ b/plugins/inspect/src/spa/style.css
@@ -118,15 +118,6 @@ textarea {
   text-align: center;
 }
 
-.center.error {
-  color: var(--df-danger);
-}
-
-.center .state-glyph {
-  font-size: 32px;
-  opacity: 0.85;
-}
-
 .pane {
   height: 100%;
   overflow: auto;
diff --git a/plugins/messages/src/client/App.vue b/plugins/messages/src/client/App.vue
index 68cb98e0..eb68a4b5 100644
--- a/plugins/messages/src/client/App.vue
+++ b/plugins/messages/src/client/App.vue
@@ -3,7 +3,15 @@ import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/clien
 import type { DevframeMessageEntry } from '../types'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onBeforeUnmount, ref } from 'vue'
-import { connectionIndicator } from '../../../../design/design'
+import {
+  button,
+  connectionBody,
+  connectionGlyph,
+  connectionIndicator,
+  connectionPanel,
+  connectionState,
+  connectionTitle,
+} from '../../../../design/design'
 import MessagesView from './components/MessagesView.vue'
 import { useMessages } from './state/messages'
 
@@ -22,18 +30,13 @@ const offStatus = props.rpc.events.on('connection:status', (next) => {
 })
 onBeforeUnmount(offStatus)
 
-const CONNECTION_COPY: Record<Exclude<DevframeConnectionStatus, 'connected'>, { icon: string, title: string, body: string }> = {
-  connecting: { icon: 'i-ph-plugs-connected-duotone', title: 'Connecting…', body: 'Establishing a connection to the devframe server.' },
-  disconnected: { icon: 'i-ph-plugs-duotone', title: 'Disconnected', body: 'Lost the connection to the devframe server. Reload once it is back up.' },
-  unauthorized: { icon: 'i-ph-lock-key-duotone', title: 'Not authorized', body: 'Reopen the link printed by your dev server, then reload.' },
-  error: { icon: 'i-ph-warning-octagon-duotone', title: 'Connection failed', body: 'Could not reach the devframe server.' },
-}
-const connectionCopy = computed(() => status.value === 'connected' ? null : CONNECTION_COPY[status.value])
-
 // The shared top-nav connection indicator (dot + label), shown only while the
 // connection is not live.
 const conn = computed(() => connectionIndicator(status.value))
 
+// The shared full-panel connection state takes over the body until connected.
+const connState = computed(() => connectionState(status.value))
+
 function reload(): void {
   location.reload()
 }
@@ -97,23 +100,20 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
     </LayoutToolbar>
 
     <div class="min-h-0">
-      <div
-        v-if="connectionCopy"
-        class="h-full flex flex-col items-center justify-center gap-4 p-8 text-center"
-      >
-        <span :class="connectionCopy.icon" class="text-4xl color-active" />
+      <div v-if="connState" :class="connectionPanel('h-full')">
+        <span :class="[connState.icon, connectionGlyph(connState.spin)]" />
         <div class="flex flex-col gap-1">
-          <p class="text-lg font-medium">
-            {{ connectionCopy.title }}
+          <p :class="connectionTitle()">
+            {{ connState.title }}
           </p>
-          <p class="text-sm color-muted max-w-sm">
-            {{ connectionCopy.body }}
+          <p :class="connectionBody()">
+            {{ connState.body }}
           </p>
         </div>
         <button
-          v-if="status !== 'connecting'"
+          v-if="connState.reloadable"
           type="button"
-          class="btn-primary text-sm px-2.5! py-1!"
+          :class="button({ variant: 'primary', size: 'sm' })"
           @click="reload"
         >
           <span class="i-ph-arrow-clockwise" />
diff --git a/plugins/terminals/src/client/App.svelte b/plugins/terminals/src/client/App.svelte
index 90a40e66..51a59452 100644
--- a/plugins/terminals/src/client/App.svelte
+++ b/plugins/terminals/src/client/App.svelte
@@ -2,7 +2,21 @@
   import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
   import type { TerminalPreset, TerminalSessionInfo } from '../types'
   import type { DotState } from './design'
-  import { button, dot, iconButton, nav, navBrand, navTab, tag, toolbar } from './design'
+  import {
+    button,
+    connectionBody,
+    connectionGlyph,
+    connectionPanel,
+    connectionState,
+    connectionTitle,
+    dot,
+    iconButton,
+    nav,
+    navBrand,
+    navTab,
+    tag,
+    toolbar,
+  } from './design'
   import { onMount } from 'svelte'
   import { DOCKS_ACTIVE_STATE_KEY, PLUGIN_ID, PRESETS_STATE_KEY, SESSIONS_STATE_KEY } from '../constants'
   import TerminalView from './TerminalView.svelte'
@@ -15,14 +29,10 @@
   let connectionStatus = $state<DevframeConnectionStatus>(rpc.status)
 
   // Terminals ride live PTY streams, so a dropped socket or refused auth makes
-  // the whole surface useless — swap it for a clear state instead of a frozen
-  // terminal. The client doesn't auto-reconnect; a reload re-runs the handshake.
-  const CONNECTION_COPY: Record<Exclude<DevframeConnectionStatus, 'connected'>, { icon: string, title: string, body: string }> = {
-    connecting: { icon: 'i-ph-plugs-connected-duotone', title: 'Connecting…', body: 'Establishing a connection to the devframe server.' },
-    disconnected: { icon: 'i-ph-plugs-duotone', title: 'Disconnected', body: 'Lost the connection to the devframe server. Reload once it is back up.' },
-    unauthorized: { icon: 'i-ph-lock-key-duotone', title: 'Not authorized', body: 'Reopen the link printed by your dev server, then reload.' },
-    error: { icon: 'i-ph-warning-octagon-duotone', title: 'Connection failed', body: 'Could not reach the devframe server.' },
-  }
+  // the whole surface useless — swap it for the shared connection state instead
+  // of a frozen terminal. The client doesn't auto-reconnect; a reload re-runs
+  // the handshake.
+  const connCopy = $derived(connectionState(connectionStatus))
 
   let isDark = $state(true)
   let sessions = $state<TerminalSessionInfo[]>([])
@@ -229,15 +239,14 @@
   }
 </script>
 
-{#if connectionStatus !== 'connected'}
-  {@const copy = CONNECTION_COPY[connectionStatus]}
-  <div class="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-base color-base font-sans p-8 text-center">
-    <div class="{copy.icon} text-4xl color-active"></div>
+{#if connCopy}
+  <div class={connectionPanel('absolute inset-0 color-base font-sans')}>
+    <div class="{connCopy.icon} {connectionGlyph(connCopy.spin)}"></div>
     <div class="flex flex-col gap-1">
-      <p class="text-lg font-medium">{copy.title}</p>
-      <p class="text-sm op-mute max-w-sm">{copy.body}</p>
+      <p class={connectionTitle()}>{connCopy.title}</p>
+      <p class={connectionBody()}>{connCopy.body}</p>
     </div>
-    {#if connectionStatus !== 'connecting'}
+    {#if connCopy.reloadable}
       <button type="button" class={button({ variant: 'primary', size: 'sm' })} onclick={() => location.reload()}>
         <div class="i-ph-arrow-clockwise"></div>
         Reload