refactor(design): move shared primary-ramp stylesheet into design/

Consolidate the two near-identical primary-ramp.css files (hub-ui's and
json-render-ui's) into a single design/primary-ramp.css, next to the ramp
contract it must match (OVERRIDABLE_PRIMARY_STOPS in design/uno.config.ts).
Panels, both shadow-root build-css scripts, and the Storybook preview now
read the one shared file, and the nine panel build tasks track design/**
instead of listing two shared files each.

Author: antfubot

design/build-shadow-css.ts

@@ -26,7 +26,7 @@ export interface BuildShadowCssOptions {
   /**
    * Absolute path to the primary-ramp override stylesheet, appended AFTER
    * the UnoCSS output so its `:host`/`:root, :host` block wins over Wind's
-   * own primary declarations (see each package's `primary-ramp.css`).
+   * own primary declarations (the shared `design/primary-ramp.css`).
    */
   primaryRampPath: string
   /**

…kages/hub-ui/src/client/primary-ramp.css design/primary-ramp.csspackages/hub-ui/src/client/primary-ramp.css renamed to design/primary-ramp.css packages/hub-ui/src/client/primary-ramp.css renamed to design/primary-ramp.css

@@ -1,38 +1,43 @@
 /*
- * Primary color as a single overridable variable: `--devframe-primary`.
- *
- * Appended AFTER the UnoCSS output (see `scripts/build-css.ts`) so this block
- * wins over Wind3's own `:root, :host` primary declarations, and imported after
- * `virtual:uno.css` in the Storybook preview for the same reason.
+ * Primary color as a single overridable variable: `--devframe-primary`. Shared
+ * by every devframe surface: appended after each shadow-root build's UnoCSS
+ * output (the hub-ui dock, the json-render renderer module; see
+ * `build-shadow-css.ts`), imported last by every built-in devframe panel SPA so
+ * it inherits a rebranded hub's accent, and imported after `virtual:uno.css` in
+ * the hub-ui Storybook preview. It always wins over Wind's own `:root, :host`
+ * primary declarations because it comes last.
  *
  * Each stop (`--colors-primary-*`) is derived from `--devframe-primary` via
  * `color-mix`. When `--devframe-primary` is unset, the intermediate
  * `--devframe-primary-<stop>` vars become guaranteed-invalid (their `color-mix`
  * references an unset var with no fallback), so each `--colors-primary-<stop>`
  * falls back to the exact devframe default hex; the default look is preserved,
  * and only an explicit override derives a new ramp. The vars inherit through
- * the tree, so setting `--devframe-primary` on the dock host retints
- * everything, and setting it on a group's chrome container retints just that
- * group (the group-accent mechanism).
+ * the tree, so setting `--devframe-primary` on a host (the dock host, a viewer
+ * mount container, or a panel's `<html>`) retints everything below it, and
+ * setting it on a group's chrome container retints just that group (the
+ * group-accent mechanism).
  *
- * The dock's shadow root is built on Wind3, which bakes `primary`-based
- * utilities (`text-primary`, `bg-primary`, `btn-primary`, `ring-primary-500`,
- * …) to literal `rgb()` triplets rather than referencing these variables, so
- * `scripts/build-css.ts` rewires those baked colors into CSS relative-color
- * syntax reading `--colors-primary-<stop>` (see `rewireBakedPrimaryColors` in
- * `design/uno.config.ts`) so this block actually retints them, not just the
- * handful of rules (the glow gradient below) that reference the variables
- * directly. The stops declared here (`DEFAULT`/`600`/`500`/`400`/`300`) must
- * match `OVERRIDABLE_PRIMARY_STOPS` there.
+ * A shadow root built on Wind3 bakes `primary`-based utilities (`text-primary`,
+ * `bg-primary`, `btn-primary`, `ring-primary-500`, …) to literal `rgb()`
+ * triplets rather than referencing these variables, so `build-shadow-css.ts`
+ * rewires those baked colors into CSS relative-color syntax reading
+ * `--colors-primary-<stop>` (see `rewireBakedPrimaryColors` in `uno.config.ts`)
+ * so this block actually retints them, not just the handful of rules (the dock's
+ * glow gradient) that reference the variables directly. The stops declared here
+ * (`DEFAULT`/`600`/`500`/`400`/`300`) must match `OVERRIDABLE_PRIMARY_STOPS`
+ * there.
  *
- * `:host` is the effective selector inside the dock's shadow root; `:root` is
- * for the light-DOM Storybook preview (it matches nothing in the shadow root).
+ * `:host` is the effective selector inside a shadow root; `:root` is for the
+ * light-DOM panel SPAs and the Storybook preview (it matches nothing in a
+ * shadow root).
  *
  * `.devframes-accent-scope` re-declares the whole block on a group's chrome
  * container: because custom properties inherit as computed values, a descendant
  * that only overrides `--devframe-primary` would keep the `:host`-computed
  * stops; re-running the derivation here recomputes them from the container's
  * own `--devframe-primary` (a group's `accentColor`), retinting just that group.
+ * Inert on surfaces that never apply the class.
  */
 :root,
 :host,

design/uno.config.ts

@@ -140,8 +140,8 @@ export const shadowSurfaceSafelist: string[] = [
 ]
 
 /**
- * The primary-ramp stops a shadow-root surface's `primary-ramp.css` exposes
- * as overridable `--colors-primary-<stop>` custom properties (derived from
+ * The primary-ramp stops the shared `design/primary-ramp.css` exposes as
+ * overridable `--colors-primary-<stop>` custom properties (derived from
  * `--devframe-primary`). Must match that file's declarations exactly.
  */
 const OVERRIDABLE_PRIMARY_STOPS = ['DEFAULT', '600', '500', '400', '300'] as const

examples/hub-deno/src/hub.ts

@@ -40,7 +40,7 @@ export const hub: HubInstance = globalRef.__hubDenoMinimal ??= initHub({
    * Rebrand the reference UI to Deno's own navy in one field, no CSS:
    * `createUi`'s `branding` option publishes `ConnectionMeta.configs.ui.branding`,
    * which the dock reads at connect time and feeds into `--devframe-primary`
-   * (see `@devframes/hub-ui`'s `primary-ramp.css`).
+   * (see the shared `design/primary-ramp.css`).
    */
   ui: createUi({ branding: { primaryColor: '#70ffaf', productName: 'Devframes on Deno' } }),
   /**

examples/hub-fastify/src/hub.ts

@@ -40,7 +40,7 @@ export const hub: HubInstance = globalRef.__hubFastifyMinimal ??= initHub({
    * Rebrand the reference UI to Fastify's own black in one field, no CSS:
    * `createUi`'s `branding` option publishes `ConnectionMeta.configs.ui.branding`,
    * which the dock reads at connect time and feeds into `--devframe-primary`
-   * (see `@devframes/hub-ui`'s `primary-ramp.css`).
+   * (see the shared `design/primary-ramp.css`).
    */
   ui: createUi({ branding: { primaryColor: '#2f2f2f', productName: 'Devframes on Fastify' } }),
   /**

examples/hub-hono/src/app.ts

@@ -43,7 +43,7 @@ export const hub: HubInstance = globalRef.__hubHonoMinimal ??= initHub({
    * Rebrand the reference UI to Hono's own orange in one field, no CSS:
    * `createUi`'s `branding` option publishes `ConnectionMeta.configs.ui.branding`,
    * which the dock reads at connect time and feeds into `--devframe-primary`
-   * (see `@devframes/hub-ui`'s `primary-ramp.css`).
+   * (see the shared `design/primary-ramp.css`).
    */
   ui: createUi({ branding: { primaryColor: '#e36002', productName: 'Devframes on Hono' } }),
   /**

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

@@ -65,7 +65,7 @@ async function loadHub(): Promise<HubInstance> {
   // `@devframes/next/hub` runs the socket on a side-car (Next routes can't
   // accept WS upgrades). `createUi`'s `branding` option rebrands the dock via
   // `ConnectionMeta.configs.ui.branding`, read at connect time and fed into
-  // `--devframe-primary` (see `@devframes/hub-ui`'s `primary-ramp.css`).
+  // `--devframe-primary` (see the shared `design/primary-ramp.css`).
   return createNextDevframeHub({
     devframes,
     ui: (hubUi.createUi as typeof CreateUi)({ branding: { primaryColor: '#3f8ba9', productName: 'Devframes on Next.js' } }),

examples/hub-nitro/hub.ts

@@ -41,7 +41,7 @@ export const hub: HubInstance = globalRef.__hubNitroMinimal ??= initHub({
    * Rebrand the reference UI to Nitro's own pink/red in one field, no CSS:
    * `createUi`'s `branding` option publishes `ConnectionMeta.configs.ui.branding`,
    * which the dock reads at connect time and feeds into `--devframe-primary`
-   * (see `@devframes/hub-ui`'s `primary-ramp.css`).
+   * (see the shared `design/primary-ramp.css`).
    */
   ui: createUi({ branding: { primaryColor: '#ff2056', productName: 'Devframes on Nitro' } }),
   /**

examples/hub-rsbuild/rsbuild.config.ts

@@ -79,7 +79,7 @@ export default defineConfig({
          * CSS: `createUi`'s `branding` option publishes
          * `ConnectionMeta.configs.ui.branding`, which the dock reads at
          * connect time and feeds into `--devframe-primary` (see
-         * `@devframes/hub-ui`'s `primary-ramp.css`).
+         * the shared `design/primary-ramp.css`).
          */
         ui: createUi({ branding: { primaryColor: '#ff5e00', productName: 'Devframes on Rsbuild' } }),
         /**

examples/hub-sveltekit/src/hub.ts

@@ -41,7 +41,7 @@ export const hub: HubInstance = globalRef.__hubSvelteKitMinimal ??= initHub({
    * Rebrand the reference UI to Svelte's own orange in one field, no CSS:
    * `createUi`'s `branding` option publishes `ConnectionMeta.configs.ui.branding`,
    * which the dock reads at connect time and feeds into `--devframe-primary`
-   * (see `@devframes/hub-ui`'s `primary-ramp.css`).
+   * (see the shared `design/primary-ramp.css`).
    */
   ui: createUi({ branding: { primaryColor: '#ff3e00', productName: 'Devframes on SvelteKit' } }),
   /**