feat(examples): rebrand each hub-*-minimal example to its host framework's color

Each minimal example (Vite, Next.js, Nitro, Rsbuild, Hono) already calls
createUi() with no branding, so all five render the identical default sage
green dock. Pass branding.primaryColor (and a matching productName) to
createUi() in each so the dock visibly reflects the host it's running
on - Vite's purple (#646cff), Next.js/Vercel's monochrome black (#000000),
Nitro's pink/red (#ff2056), Rsbuild's orange (#ff5e00), and Hono's orange
(#e36002). Colors verified against each project's live site (theme-color
meta / computed CSS custom properties).

hub-vite and hub-next (the two hand-rolled-UI reference hosts) are left on
the shared devframe design system, per this repo's parity/one-product design
principle for those two.

Verified end to end in Chromium (hub-vite-minimal, hub-nitro-minimal) that
branding.json is served and --devframe-primary resolves to the configured
color inside the dock's shadow root.

Author: antfubot

examples/hub-hono-minimal/README.md

@@ -11,7 +11,7 @@ Open <http://localhost:5179> — the host page carries the floating dock via one
 
 ## How it works
 
-- [`src/app.ts`](./src/app.ts) — runtime-agnostic: `initHub({ devframes, ui: createUi() })` plus `app.all('/__devframes/*', c => hub.handler(c.req.raw))`. Everything — frame SPAs, `__connection.json`, `__index.json`, `embedded.js`, `__client-imports.js` — flows through that one route. The instance is memoized on `globalThis` so a dev-time reload reuses the live hub. It configures no WebSocket transport, so each entry below wires the socket its runtime's way; both end up serving `/__devframes/__ws` on the app's own origin, which is what the hub advertises either way.
+- [`src/app.ts`](./src/app.ts) — runtime-agnostic: `initHub({ devframes, ui: createUi({ branding }) })` (rebranded to Hono's own orange, `#e36002`) plus `app.all('/__devframes/*', c => hub.handler(c.req.raw))`. Everything — frame SPAs, `__connection.json`, `__index.json`, `embedded.js`, `__client-imports.js` — flows through that one route. The instance is memoized on `globalThis` so a dev-time reload reuses the live hub. It configures no WebSocket transport, so each entry below wires the socket its runtime's way; both end up serving `/__devframes/__ws` on the app's own origin, which is what the hub advertises either way.
 - [`src/server.ts`](./src/server.ts) — Node: `@hono/node-server`'s `serve()` returns the `node:http` server, and `hub.attach(server)` routes its upgrade events to the shared RPC socket.
 - [`src/bun.ts`](./src/bun.ts) — Bun: upgrades arrive as fetch requests, so this entry binds Bun's own transport to the hub context with `createContextRpcServer` + `attachBunWsTransport` and answers the upgrade route inside `Bun.serve({ fetch, websocket })`.
 

examples/hub-hono-minimal/src/app.ts

@@ -38,7 +38,11 @@ export const hub: HubInstance = globalRef.__hubHonoMinimal ??= initHub({
     createOgDevframe(),
     createAssetsDevframe({ watch: false }),
   ],
-  ui: createUi(),
+  // Rebrand the reference UI to Hono's own orange — one field, no CSS:
+  // `createUi`'s `branding` option publishes `branding.json`, which the dock
+  // fetches at boot and feeds into `--devframe-primary` (see
+  // `@devframes/hub-ui`'s `primary-ramp.css`).
+  ui: createUi({ branding: { primaryColor: '#e36002', productName: 'Devframes on Hono' } }),
   // Single-user localhost demo: reachable only on loopback, so it opts out
   // of the gate for a no-friction dev experience. A hub reachable beyond
   // localhost should gate (see docs/guide/security.md).

examples/hub-next-minimal/src/client/hub.ts

@@ -76,7 +76,11 @@ async function loadHub(): Promise<HubInstance> {
     base: DEVFRAMES_HUB_BASE,
     ws: { sidecar: true },
     devframes,
-    ui: (hubUi.createUi as typeof CreateUi)(),
+    // Rebrand the reference UI to Next.js/Vercel's monochrome black — one
+    // field, no CSS: `createUi`'s `branding` option publishes
+    // `branding.json`, which the dock fetches at boot and feeds into
+    // `--devframe-primary` (see `@devframes/hub-ui`'s `primary-ramp.css`).
+    ui: (hubUi.createUi as typeof CreateUi)({ branding: { primaryColor: '#000000', productName: 'Devframes on Next.js' } }),
     // Serve the reference json-render frontend as a prebuilt renderer module
     // — the one-liner that makes `'json-render'` docks render in the prebuilt
     // viewer. Swap it for any community implementation of the same contract.

examples/hub-nitro-minimal/README.md

@@ -10,7 +10,7 @@ Open <http://localhost:3000> - the host page carries the floating dock via one s
 
 ## How it works
 
-- [`hub.ts`](./hub.ts) - `initHub({ devframes, ui: createUi(), key })`: mounts the Inspect and Messages plugins against one shared hub context, fills the hub's `ui` slot with `@devframes/hub-ui`'s prebuilt viewer + floating-dock bootstrap, and memoizes the instance across Nitro's dev-time module reloads.
+- [`hub.ts`](./hub.ts) - `initHub({ devframes, ui: createUi({ branding }) })`: mounts the Inspect and Messages plugins against one shared hub context, fills the hub's `ui` slot with `@devframes/hub-ui`'s prebuilt viewer + floating-dock bootstrap (rebranded to Nitro's own pink/red, `#ff2056`), and memoizes the instance across Nitro's dev-time module reloads.
 - [`routes/__devframes/[...path].ts`](./routes/__devframes/%5B...path%5D.ts) (and its `index.ts` sibling for the namespace root) - the delegation: every request under `/__devframes/` becomes `hub.handler(event.req)`, web-standard Request in, Response out. Everything - frame SPAs, `__connection.json`, `__index.json`, `embedded.js`, `__client-imports.js` - flows through it.
 - [`nitro.config.ts`](./nitro.config.ts) - keeps the devframe packages external so their prebuilt client assets resolve from the packages themselves rather than Nitro's build output.
 - The RPC WebSocket runs on a side-car port - Nitro handlers hand over `Request`s, so `ws: { sidecar: true }` asks for one - advertised through `__connection.json`; the browser client discovers it automatically.

examples/hub-nitro-minimal/hub.ts

@@ -41,7 +41,11 @@ export const hub: HubInstance = globalRef.__hubNitroMinimal ??= initHub({
     createOgDevframe(),
     createAssetsDevframe({ watch: false }),
   ],
-  ui: createUi(),
+  // Rebrand the reference UI to Nitro's own pink/red — one field, no CSS:
+  // `createUi`'s `branding` option publishes `branding.json`, which the dock
+  // fetches at boot and feeds into `--devframe-primary` (see
+  // `@devframes/hub-ui`'s `primary-ramp.css`).
+  ui: createUi({ branding: { primaryColor: '#ff2056', productName: 'Devframes on Nitro' } }),
   // Single-user localhost demo: reachable only on loopback, so it opts out
   // of the gate for a no-friction dev experience. A hub reachable beyond
   // localhost should gate (see docs/guide/security.md).

examples/hub-rsbuild-minimal/README.md

@@ -12,7 +12,7 @@ Open the printed URL - the host page carries the floating dock via one injected
 
 [`rsbuild.config.ts`](./rsbuild.config.ts) is the entire host:
 
-- `initHub({ devframes: [inspect, messages], ui: createUi() })` runs in Rsbuild's Node config process (never bundled into the browser), so `createUi()`'s prebuilt viewer/dock and the plugins' node code work unchanged.
+- `initHub({ devframes: [inspect, messages], ui: createUi({ branding }) })` runs in Rsbuild's Node config process (never bundled into the browser), so `createUi()`'s prebuilt viewer/dock and the plugins' node code work unchanged. `branding.primaryColor` is Rsbuild's own orange (`#ff5e00`) — a rebrand reaches every `primary`-based color in the dock, no CSS required.
 - `dev.setupMiddlewares` unshifts `hub.nodeMiddleware`, which owns the whole `/__devframes/` namespace and hands everything else back to Rsbuild.
 - The RPC WebSocket runs on a side-car port (`ws: { sidecar: true }`, since Rsbuild's middleware stack never hands over upgrades), advertised through `__connection.json`; the browser client discovers it automatically.
 - `html.tags` injects `<script type="module" src="/__devframes/embedded.js">`, so the floating dock mounts itself.

examples/hub-rsbuild-minimal/rsbuild.config.ts

@@ -76,7 +76,11 @@ export default defineConfig({
       hub ??= initHub({
         base,
         devframes: builtinDevframes,
-        ui: createUi(),
+        // Rebrand the reference UI to Rsbuild's own orange — one field, no
+        // CSS: `createUi`'s `branding` option publishes `branding.json`,
+        // which the dock fetches at boot and feeds into `--devframe-primary`
+        // (see `@devframes/hub-ui`'s `primary-ramp.css`).
+        ui: createUi({ branding: { primaryColor: '#ff5e00', productName: 'Devframes on Rsbuild' } }),
         // Serve the reference json-render frontend as a prebuilt renderer
         // module — the one-liner that makes `'json-render'` docks render in
         // the prebuilt viewer. Swap it for any community implementation of

examples/hub-vite-minimal/README.md

@@ -12,7 +12,7 @@ Open the printed URL - the host page carries the floating dock via one injected
 
 [`vite.config.ts`](./vite.config.ts) is the entire host:
 
-- `initHub({ devframes: [inspect, messages], ui: createUi() })` runs in Vite's Node config process (never bundled into the browser), so `createUi()`'s prebuilt viewer/dock and the plugins' node code work unchanged.
+- `initHub({ devframes: [inspect, messages], ui: createUi({ branding }) })` runs in Vite's Node config process (never bundled into the browser), so `createUi()`'s prebuilt viewer/dock and the plugins' node code work unchanged. `branding.primaryColor` is Vite's own purple (`#646cff`) — a rebrand reaches every `primary`-based color in the dock, no CSS required.
 - `server.middlewares.use(hub.nodeMiddleware)` mounts the whole `/__devframes/` namespace; the middleware self-filters by base and hands everything else back to Vite.
 - The RPC WebSocket shares Vite's own dev server at `/__devframes/__ws` - zero extra ports.
 - `transformIndexHtml` injects `<script type="module" src="/__devframes/embedded.js">` into the host page, so the floating dock mounts itself.

examples/hub-vite-minimal/vite.config.ts

@@ -81,7 +81,11 @@ export default defineConfig({
       const hub = initHub({
         base,
         devframes: builtinDevframes,
-        ui: createUi(),
+        // Rebrand the reference UI to Vite's own purple — one field, no CSS:
+        // `createUi`'s `branding` option publishes `branding.json`, which the
+        // dock fetches at boot and feeds into `--devframe-primary` (see
+        // `@devframes/hub-ui`'s `primary-ramp.css`).
+        ui: createUi({ branding: { primaryColor: '#646cff', productName: 'Devframes on Vite' } }),
         // Serve the reference json-render frontend as a prebuilt renderer
         // module — the one-liner that makes `'json-render'` docks render in
         // the prebuilt viewer. Swap it for any community implementation of