@devframes/hub-ui 0.9.7 → 0.9.9

package/dist/index.d.mts

@@ -4,11 +4,11 @@ import { DevframeHubUi } from "@devframes/hub/initiate";
  * Published `createUi()` config types, kept framework-free so the node
  * entry's declaration rollup (`dist/index.d.mts`) never pulls in Vue's type
  * surface. Client modules that need these types import them *from* here
- * (never the reverse) — see `client/state/branding.ts`,
+ * (never the reverse); see `client/state/branding.ts`,
  * `client/embedded/visibility.ts`.
  */
 /**
- * A logo asset — a single URL/data-URI, or per-color-scheme variants. The dark
+ * A logo asset: a single URL/data-URI, or per-color-scheme variants. The dark
  * variant falls back to the light one when only `light` is given (or a bare
  * string is used for both).
  */
@@ -16,17 +16,30 @@ type BrandingLogo = string | {
   light: string;
   dark: string;
 };
+/** A value that can vary with the viewer color scheme. */
+type ColorSchemeValue = string | {
+  light: string;
+  dark: string;
+};
+/**
+ * The standalone viewer background. The flat form applies in every context;
+ * the structured form may provide an iframe-specific value.
+ */
+type ViewerBackground = ColorSchemeValue | {
+  standalone: ColorSchemeValue;
+  iframe?: ColorSchemeValue;
+};
 /**
  * Consumer-facing branding for the reference hub-ui. Every field is optional
  * and falls back to devframe's own identity. Published as
  * `ConnectionMeta.configs.ui.branding` via `createUi({ branding })`, and
- * read from the one connection handshake the dock already performs —
+ * read from the one connection handshake the dock already performs;
  * `ConnectionMeta` has its own cross-realm propagation (see
  * `DEVFRAME_CONNECTION_KEY`), so branding needs no globals or query params
  * of its own.
  */
 interface DevframeBranding {
-  /** Product name — the wordmark, window titles, and all user-visible copy. */
+  /** Product name: the wordmark, window titles, and all user-visible copy. */
   productName?: string;
   /** Logo mark (URL / data-URI), rendered via `<img>`. */
   logo?: BrandingLogo;
@@ -34,9 +47,11 @@ interface DevframeBranding {
   wordmark?: BrandingLogo;
   /** Brand color; feeds `--devframe-primary` and the whole primary ramp. */
   primaryColor?: string;
+  /** Standalone viewer CSS `background`, optionally specialized for iframe use. */
+  background?: ViewerBackground;
   /** Short line for the auth screen and the standalone meta description. */
   tagline?: string;
-  /** Favicon URL — applied on the standalone viewer and the popped-out window only. */
+  /** Favicon URL, applied on the standalone viewer and the popped-out window only. */
   favicon?: string;
   /** Window/tab title; defaults to `productName`. */
   windowTitle?: string;
@@ -47,19 +62,19 @@ interface DevframeBranding {
  * `ConnectionMeta.configs.ui.dockPreferences`. Read by the embedded dock and
  * the standalone viewer at boot.
  *
- * Like the float/edge dock mode, these seed user-overridable state — the
+ * Like the float/edge dock mode, these seed user-overridable state; the
  * config sets the default, the visitor's own choice wins from then on.
  */
 interface DevframeDockPreferences {
   /**
-   * The top-level dock-bar **category** ordering — a map of category id →
+   * The top-level dock-bar **category** ordering: a map of category id →
    * ordering weight (lower sorts earlier), merged beneath
    * `DEFAULT_CATEGORIES_ORDER`.
    */
   categoryOrder?: Record<string, number>;
   /**
    * Preferred inline-item capacity for the floating dock bar before entries
-   * overflow. Edge mode ignores it — it shows every entry with no cutoff.
+   * overflow. Edge mode ignores it; it shows every entry with no cutoff.
    */
   maxVisibleItems?: number;
   /** Seeds a first-run visitor's dock mode (float vs edge). */
@@ -68,19 +83,19 @@ interface DevframeDockPreferences {
   defaultPosition?: 'left' | 'right' | 'top' | 'bottom';
 }
 /**
- * How the embedded floating dock reveals itself on a fresh page — the
+ * How the embedded floating dock reveals itself on a fresh page: the
  * reference UI's port of Nuxt DevTools' opt-in overlay, published as
  * `ConnectionMeta.configs.ui.embeddedVisibility` and set via
  * `createUi({ embeddedVisibility })`.
  *
- * - `normal` (default) — the dock is shown immediately.
- * - `passive` — the dock starts hidden and a console hint offers the reveal
+ * - `normal` (default): the dock is shown immediately.
+ * - `passive`: the dock starts hidden and a console hint offers the reveal
  *   shortcut; revealing persists per-origin, so later sessions on this
  *   browser start shown. The "Hide" command returns to passive.
- * - `hidden` — the dock starts hidden and the shortcut reveals it for the
+ * - `hidden`: the dock starts hidden and the shortcut reveals it for the
  *   current session only; nothing is persisted.
  *
- * Whatever the policy, the reveal state is a user-overridable preference —
+ * Whatever the policy, the reveal state is a user-overridable preference,
  * the same shape as the float/edge dock mode: the config seeds it, the
  * visitor's own reveal/hide wins from then on.
  */
@@ -102,7 +117,7 @@ interface CreateUiOptions {
   /** Serve the floating-dock bootstrap at `<base>embedded.js`. Default: `true`. */
   embedded?: boolean;
   /**
-   * Rebrand the reference UI — logo, product name, primary color, and more.
+   * Rebrand the reference UI: logo, product name, primary color, and more.
    * Published as `ConnectionMeta.configs.ui.branding`, read by the dock at
    * boot from the one connection handshake it already performs. Reaches
    * both the embedded dock and the standalone viewer.
@@ -111,20 +126,20 @@ interface CreateUiOptions {
   /**
    * How the embedded floating dock reveals itself on a fresh page:
    *
-   * - `'normal'` (default) — shown immediately.
-   * - `'passive'` — starts hidden with a console hint; `Shift+Alt+D` reveals
+   * - `'normal'` (default): shown immediately.
+   * - `'passive'`: starts hidden with a console hint; `Shift+Alt+D` reveals
    *   it, and the reveal persists per-origin so later sessions start shown.
-   * - `'hidden'` — starts hidden; `Shift+Alt+D` reveals it for the current
+   * - `'hidden'`: starts hidden; `Shift+Alt+D` reveals it for the current
    *   session only.
    *
    * Published as `ConnectionMeta.configs.ui.embeddedVisibility`. Like the
-   * float/edge dock mode, it seeds a user-overridable preference — the
+   * float/edge dock mode, it seeds a user-overridable preference; the
    * visitor's own reveal/hide wins from then on. Applies to the embedded
    * dock only; the standalone viewer is an explicit visit and always shows.
    */
   embeddedVisibility?: EmbeddedVisibility;
   /**
-   * Dock-bar rendering preferences — category ordering, floating-dock
+   * Dock-bar rendering preferences: category ordering, floating-dock
    * inline-item capacity, and the first-run float/edge mode and position.
    * Published as `ConnectionMeta.configs.ui.dockPreferences`; each seeds a
    * user-overridable preference the visitor's own choice then wins.
@@ -132,7 +147,7 @@ interface CreateUiOptions {
   dockPreferences?: DevframeDockPreferences;
 }
 /**
- * The reference implementation of the hub's {@link DevframeHubUi} slot —
+ * The reference implementation of the hub's {@link DevframeHubUi} slot,
  * prebuilt from this package's web components (the floating `DockEmbedded`
  * bootstrap and the standalone `DockStandalone` SPA), styled with the
  * shared devframe design system.
@@ -144,10 +159,10 @@ interface CreateUiOptions {
  * const hub = initHub({ devframes: [git, terminals], ui: createUi() })
  * ```
  *
- * The hub stays headless either way — this object is one implementation of
+ * The hub stays headless either way; this object is one implementation of
  * the slot; a hub UI provider (a product's or your own) supplies a different one to the
  * same option and reuses all the infrastructure.
  */
 declare function createUi(options?: CreateUiOptions): DevframeHubUi;
 //#endregion
-export { CreateUiOptions, type DevframeBranding, type DevframeDockPreferences, type EmbeddedVisibility, createUi };
+export { type ColorSchemeValue, CreateUiOptions, type DevframeBranding, type DevframeDockPreferences, type EmbeddedVisibility, type ViewerBackground, createUi };

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { fileURLToPath } from "node:url";
 * The built client assets live next to the built entry (`dist/index.mjs` →
 * `dist/client/`). When this module runs from source instead (tests and
 * playgrounds resolving the workspace alias), fall back to the package's
-* `dist/client/` — the assets are build artifacts either way.
+* `dist/client/`; the assets are build artifacts either way.
 */
 function clientDir() {
 	const here = fileURLToPath(new URL(".", import.meta.url));
@@ -15,7 +15,7 @@ function clientDir() {
 	return join(here, "../dist/client");
 }
 /**
-* The reference implementation of the hub's {@link DevframeHubUi} slot —
+* The reference implementation of the hub's {@link DevframeHubUi} slot,
 * prebuilt from this package's web components (the floating `DockEmbedded`
 * bootstrap and the standalone `DockStandalone` SPA), styled with the
 * shared devframe design system.
@@ -27,7 +27,7 @@ function clientDir() {
 * const hub = initHub({ devframes: [git, terminals], ui: createUi() })
 * ```
 *
-* The hub stays headless either way — this object is one implementation of
+* The hub stays headless either way; this object is one implementation of
 * the slot; a hub UI provider (a product's or your own) supplies a different one to the
 * same option and reuses all the infrastructure.
 */
@@ -36,6 +36,11 @@ function createUi(options = {}) {
 	return {
 		...options.viewer !== false ? { viewer: { distDir: join(client, "standalone") } } : {},
 		...options.embedded !== false ? { embedded: { entry: join(client, "embedded.js") } } : {},
+		/**
+		* Publish the reference UI's config through the generic `ctx.staticConfig`,
+		* which rides the connection handshake to every mounted frame and the
+		* standalone viewer as `ConnectionMeta.configs.ui`.
+		*/
 		setup(ctx) {
 			ctx.staticConfig.ui = {
 				branding: options.branding || {},

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@devframes/hub-ui",
   "type": "module",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "Reference UI for the devframe hub, providing the floating dock and standalone viewer.",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,9 +29,9 @@
     "dist"
   ],
   "peerDependencies": {
-    "@devframes/json-render": "0.9.7",
-    "@devframes/hub": "0.9.7",
-    "devframe": "0.9.7"
+    "@devframes/hub": "0.9.9",
+    "@devframes/json-render": "0.9.9",
+    "devframe": "0.9.9"
   },
   "peerDependenciesMeta": {
     "@devframes/json-render": {
@@ -39,27 +39,27 @@
     }
   },
   "devDependencies": {
-    "@antfu/design": "^0.3.4",
+    "@antfu/design": "^0.4.0",
+    "@devframes/hub": "0.9.9",
+    "@devframes/json-render": "0.9.9",
+    "@devframes/plugin-git": "0.9.9",
     "@iconify-json/ph": "^1.2.2",
-    "@storybook/addon-docs": "^10.5.8",
-    "@storybook/vue3-vite": "^10.5.8",
-    "@types/node": "^26.2.0",
-    "@unocss/reset": "^66.7.5",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/vue3-vite": "^10.5.10",
+    "@types/node": "^26.4.0",
+    "@unocss/reset": "^66.8.1",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vueuse/core": "^14.4.0",
-    "dompurify": "^3.4.13",
+    "devframe": "0.9.9",
+    "dompurify": "^3.4.14",
     "fuse.js": "^7.5.0",
     "iframe-pane": "^1.1.0",
-    "storybook": "^10.5.8",
+    "storybook": "^10.5.10",
     "tsdown": "^0.22.14",
-    "tsx": "^4.23.12",
-    "unocss": "^66.7.5",
-    "vite": "^8.2.1",
-    "vue": "^3.5.41",
-    "@devframes/hub": "0.9.7",
-    "@devframes/plugin-git": "0.9.7",
-    "@devframes/json-render": "0.9.7",
-    "devframe": "0.9.7"
+    "tsx": "^4.23.13",
+    "unocss": "^66.8.1",
+    "vite": "^8.2.2",
+    "vue": "^3.5.42"
   },
   "scripts": {
     "build": "pnpm run build:css && pnpm run build:node && pnpm run build:embedded && pnpm run build:standalone",