fix(panels): inherit startup branding through shared CSS

Replace the proposed public theme APIs and message channel with existing
connection metadata and the shared hub UI primary ramp. Apply one CSS
input at startup and preserve standalone defaults.

Use the existing active-color token for query matches and track shared
CSS and adapter inputs in all nine panel build tasks. Replace protocol
tests with startup branding and cleanup coverage.

Author: SaKaNa-Y

design/panel-theme.ts

@@ -1,50 +1,35 @@
-import { watchDevframeTheme } from 'devframe/client'
+import type { DevframeBranding } from '../packages/hub-ui/src/types'
+import { setupDevframeConnection } from 'devframe/client'
 
-// Match the reference dock's primary ramp. Only accent tokens change; semantic
-// success/error/warning colors and each SPA's chart palettes stay independent.
-const primaryStops = {
-  DEFAULT: 0,
-  50: 95,
-  100: 90,
-  200: 75,
-  600: 9,
-  500: 18,
-  400: 34,
-  300: 54,
-  700: -8,
-  800: -25,
-  900: -45,
-  950: -70,
-} as const
+/** Apply startup branding to a built-in devframe's iframe SPA. */
+export function applyPanelBranding(): () => void {
+  if (window.parent === window)
+    return () => {}
 
-/** Opt a built-in devframe SPA into the hub UI provider's primary accent. */
-export function syncPanelTheme(): () => void {
-  const style = document.documentElement.style
-  const previous = Object.keys(primaryStops).map((stop) => {
-    const name = `--colors-primary-${stop}`
-    return { name, value: style.getPropertyValue(name), priority: style.getPropertyPriority(name) }
-  })
-  function restore() {
-    for (const { name, value, priority } of previous) {
-      if (value)
-        style.setProperty(name, value, priority)
-      else
-        style.removeProperty(name)
-    }
-  }
-  const stop = watchDevframeTheme(({ primaryColor }) => {
-    if (!primaryColor || !CSS.supports('color', primaryColor)) {
-      restore()
+  const root = document.documentElement
+  const previous = root.style.getPropertyValue('--devframe-primary')
+  const priority = root.style.getPropertyPriority('--devframe-primary')
+  let disposed = false
+  let applied = false
+
+  void setupDevframeConnection().then(({ connectionMeta }) => {
+    const configs = connectionMeta.configs as { ui?: { branding?: DevframeBranding } } | undefined
+    const color = configs?.ui?.branding?.primaryColor
+    if (disposed || !color || !CSS.supports('color', color))
       return
-    }
-    for (const [stop, white] of Object.entries(primaryStops)) {
-      style.setProperty(`--colors-primary-${stop}`, white
-        ? `color-mix(in oklab, ${primaryColor}, ${white > 0 ? 'white' : 'black'} ${Math.abs(white)}%)`
-        : primaryColor)
-    }
+    root.style.setProperty('--devframe-primary', color)
+    applied = true
+  }).catch(() => {
+    // Connection failures leave the SPA's default palette intact.
   })
+
   return () => {
-    stop()
-    restore()
+    disposed = true
+    if (!applied)
+      return
+    if (previous)
+      root.style.setProperty('--devframe-primary', previous, priority)
+    else
+      root.style.removeProperty('--devframe-primary')
   }
 }

docs/content/1.guide/11.client.md

@@ -333,35 +333,3 @@ async function reconnect() {
 ```
 
 In a hub, a hub UI provider reads this status from [`context.connection`](/guide/client-context#the-client-context).
-
-## Panel accent
-
-A SPA can adopt its hub UI provider's primary accent with `watchDevframeTheme()`. Map the hint to your own UI token and retain separate tokens for brand graphics, status colors, and charts:
-
-```ts
-import { watchDevframeTheme } from 'devframe/client'
-
-const stopTheme = watchDevframeTheme(({ primaryColor }) => {
-  const style = document.documentElement.style
-  if (primaryColor && CSS.supports('color', primaryColor))
-    style.setProperty('--panel-accent', primaryColor)
-  else
-    style.removeProperty('--panel-accent')
-})
-
-// Call stopTheme() when the SPA unmounts.
-```
-
-Use `var(--panel-accent, #3a6a45)` in the SPA's accent styles. A standalone SPA keeps its fallback. Subscription is independent of the RPC connection and works with static builds. The callback receives presentation hints from the direct embedding window; each SPA chooses the UI tokens it changes.
-
-`@devframes/hub-ui` offers its `branding.primaryColor` to panels automatically. A custom hub UI provider can use the same protocol:
-
-```ts
-import { provideDevframeTheme } from 'devframe/client'
-
-const theme = provideDevframeTheme(iframe, { primaryColor: '#6b84fd' })
-theme.update({ primaryColor: '#8250df' })
-// Call theme.dispose() when the iframe view unmounts.
-```
-
-The provider supports both startup orders, reloads, and remounting a preserved iframe. The [Panel theme reference](/references/browser-api#panel-theme) lists the API and origin contract.

docs/content/1.guide/18.hub-initiate.md

@@ -53,7 +53,7 @@ interface DevframeHubUi {
 `@devframes/hub-ui`'s `createUi()` is the reference (standalone `viewer` SPA + floating dock); its `setup(ctx)` publishes config to `ctx.staticConfig.ui` (`ConnectionMeta.configs.ui`):
 
 - **`viewer`**: set to `false` to disable the standalone viewer.
-- **`branding`**: rebrand the UI (logo, name, primary color). `background` accepts any CSS `background` value (color, gradient, image, or `transparent`) or `{ light, dark }` variants. These flat forms apply everywhere. Use `{ standalone, iframe? }` to specialize the framed viewer; an omitted `iframe` value falls back to `standalone`.
+- **`branding`**: rebrand the UI (logo, name, primary color). `background` accepts any CSS `background` value (color, gradient, image, or `transparent`) or `{ light, dark }` variants. These flat forms apply everywhere. Use `{ standalone, iframe? }` to specialize the framed viewer; an omitted `iframe` value falls back to `standalone`. Built-in devframe panels read `branding.primaryColor` from the existing connection metadata at startup and map it to CSS primary tokens. Standalone SPAs keep their default accent; status and preview palettes remain independent. Reload panels after changing startup branding.
 - **`dockPreferences`** tunes the dock rail: `categoryOrder`, floating-dock `maxVisibleItems`, first-run `defaultMode` (`'float'`/`'edge'`) and `defaultPosition`.
 - **`embeddedVisibility`** sets the floating dock's reveal policy:
   - `'normal'` (default): shows immediately.

docs/content/8.references/3.events.md

@@ -127,4 +127,3 @@ Pushed over each panel's [in-page channel](/guide/in-page-channel) port; the pai
 |---|---|---|
 | `devframe:remote-assets-error` | the remote-assets fallback page, to `window.parent` | The failed package/version/reason, so an embedding hub UI provider can replace the 502 page. |
 | `devframe:in-page-channel` | both [in-page channel](/guide/in-page-channel) endpoints, across window boundaries | The versioned handshake envelope (panel hello, page-script port grant). |
-| `devframe:theme` | the embedding window and its panel iframe | Optional accent handshake: `available`, `request`, and `update` with a `DevframeTheme`. |

docs/content/8.references/5.browser-api.md

@@ -46,20 +46,6 @@ The values of `rpc.status`: [Handling connection and auth errors](/guide/client#
 | `disconnected` | Socket closed (dropped mid-session or never opened). |
 | `error` | Fatal: the socket errored or connection meta couldn't load. |
 
-## Panel theme
-
-Optional presentation hints from the embedding window: [Panel accent](/guide/client#panel-accent). All exports come from `devframe/client`.
-
-| API | Contract |
-|-----|----------|
-| `DevframeTheme.primaryColor` | Optional CSS color. Omitted means use the SPA's default accent. |
-| `watchDevframeTheme(onChange)` | Opt the panel into updates from its direct parent window. Returns a listener cleanup function. Standalone SPAs and SSR return a no-op cleanup. |
-| `provideDevframeTheme(iframe, theme)` | Offer hints to one iframe; only an opted-in panel receives theme data. Returns a `DevframeThemeProvider`. |
-| `provider.update(theme)` | Replace the hints; `update({})` clears the accent override. |
-| `provider.dispose()` | Remove the provider's message and load listeners. |
-
-The protocol supports same-origin and cross-origin iframe documents with a non-opaque origin. Each side checks the sending window; updates target the requesting document's exact origin. A newly loaded iframe document opts in again. The subscription trusts its direct embedding window for presentation hints; the SPA controls how it applies them.
-
 ## In-page channel endpoints
 
 The browser-only endpoint methods of the [in-page channel](/guide/in-page-channel). `emit()` sends to the opposite endpoint; `on()` handles events arriving from that endpoint.

docs/content/8.references/index.md

@@ -11,7 +11,7 @@ Lookup pages the guides link into:
 - [When Clauses](/references/when-clauses): the contexts and operators that gate docks, commands, and custom UI.
 - [Events Reference](/references/events): every event, broadcast, shared-state key, and channel name, by direction and reach.
 - [Node-Side API](/references/node-api): `DevframeDefinition` fields, CLI options, storage scopes, RPC function types, broadcast options, streaming lifecycle, remote assets, the `ctx.services` host and wire-service fields, diagnostics prefixes, and the auth surface.
-- [Browser-Side API](/references/browser-api): `connectDevframe` options, RPC client events, connection statuses, panel theme APIs, and in-page channel error codes.
+- [Browser-Side API](/references/browser-api): `connectDevframe` options, RPC client events, connection statuses, and in-page channel error codes.
 - [Hub API](/references/hub-api): hub subsystems, launcher fields, duplication strategies, dock categories, the hub UI protocol, the namespace routes, the client runtime, the client context, and dock entry types.
 - [Utilities](/references/utilities): the small, stable helpers under `devframe/utils/*`, bundled into `devframe`.
 - [Interactive Auth](/references/interactive-auth): the OTP auth recipe: handshake, resolver gate, connect-time trust, banner.

packages/devframe/src/client/index.ts

@@ -9,7 +9,6 @@ export * from './rpc-streaming'
 export { resolveWsUrl, type WsUrlLocation } from './rpc-ws'
 export * from './scope'
 export * from './settings'
-export * from './theme'
 export * from './webmcp'
 
 export const connectDevframe = getDevframeRpcClient