@jini-ai/ui 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # @jini-ai/ui
 
+## 0.5.2 — 2026-10-13
+
+- MCP-UI surfaces follow the host's live theme (da019dde): `McpUiHost` reads the host's resolved `--jini-*` theme where a card mounts and writes it into Jini-built surface documents as a `:root` rule after the token block; a MutationObserver re-themes cards already on screen when the theme or accent changes. Third-party Views are not rewritten. Builder token overrides render as `:root:root`, so a card that sets its own tokens keeps them. New `--jini-mcpui-accent-ink` token (host `--jini-primary-ink`) for primary button text.
+- Rides along, no API change: interactive-ui/charts shared code declared as isolation-shared metadata instead of a file move (28e84348 moved it, bc2945ee reverted the move); html-editor lookup sets are `ReadonlySet` (27965ef0); comment scrubs (8e508fb6).
+
 ## 0.5.1 — 2026-10-13
 
 - Phone layout fixes. Media provider cards put one field per line on phones and keep the fields plus Clear on one row on wider screens (was a three-column grid that squeezed inputs to a few characters). The snippet block's Copy button no longer covers the command: phones start the code below it, wider screens reserve its width. `TabBar` scrolls a sideways-scrolling strip so the active tab is fully visible (only the strip scrolls, never the page).

package/dist/features/admin-widgets/components/InfoTip.rules.d.ts

@@ -22,7 +22,7 @@ export interface InfoTipPlacement {
  *
  * Why the real measured width: the old clamp assumed every bubble was 18rem wide, so every short tip
  * within 152px of the right edge got the same left — "Remove" sat ~86px away from its ✕ in the
- * dock (Chrome re-check, 2026-10-11). Shared by `useInfoTip` and Tovu's dock-header tips so both
+ * dock (Chrome re-check, 2026-10-11). Shared by `useInfoTip` and the host's dock-header tips so both
  * place identically.
  * @param input.anchor The icon's `getBoundingClientRect()`.
  * @param input.bubble The rendered bubble's measured size; `null` before the portal exists.

package/dist/features/admin-widgets/components/InfoTip.rules.js

@@ -16,7 +16,7 @@ const ARROW_INSET_PX = 10;
  *
  * Why the real measured width: the old clamp assumed every bubble was 18rem wide, so every short tip
  * within 152px of the right edge got the same left — "Remove" sat ~86px away from its ✕ in the
- * dock (Chrome re-check, 2026-10-11). Shared by `useInfoTip` and Tovu's dock-header tips so both
+ * dock (Chrome re-check, 2026-10-11). Shared by `useInfoTip` and the host's dock-header tips so both
  * place identically.
  * @param input.anchor The icon's `getBoundingClientRect()`.
  * @param input.bubble The rendered bubble's measured size; `null` before the portal exists.

package/dist/features/mcp-ui/surfaces/document.d.ts

@@ -8,7 +8,7 @@ import { type SurfaceTokenName } from './tokens.js';
  * be a color no caller could reskin. `var(--x, fallback)` appears only where a value is genuinely
  * optional.
  */
-export declare const SURFACE_BASE_CSS = "*, *::before, *::after { box-sizing: border-box; }\nhtml, body { margin: 0; padding: 0; }\nbody {\n  /* Transparent, not var(--jini-mcpui-bg): this document has no page of its own to paint. It is an\n     allow-scripts-only sandboxed iframe embedded directly in a host's chat transcript, and html's\n     background is left at its (also transparent) initial value, so the host's own pane shows\n     straight through to .mcpui-surface below rather than through a second, unrelated rectangle of\n     fill color sitting between the two. --jini-mcpui-bg stays declared for a caller styling\n     something else via extraCss -- nothing in this stylesheet reads it anymore. */\n  background: transparent;\n  color: var(--jini-mcpui-text);\n  font-family: var(--jini-mcpui-font);\n  font-size: 14px;\n  line-height: 1.5;\n  padding: 16px;\n  -webkit-font-smoothing: antialiased;\n}\n.mcpui-surface {\n  background: linear-gradient(135deg,\n    color-mix(in srgb, var(--jini-mcpui-accent) 5%, var(--jini-mcpui-panel)) 0%,\n    var(--jini-mcpui-panel) 60%);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 18%, var(--jini-mcpui-border));\n  border-radius: var(--jini-mcpui-radius-md);\n  box-shadow: var(--jini-mcpui-surface-shadow);\n  padding: 18px 20px 16px;\n  max-width: 640px;\n  margin: 0 auto;\n}\n.mcpui-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-description { margin: 6px 0 0; color: var(--jini-mcpui-text-muted); }\n.mcpui-details {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 4px 14px;\n  margin: 14px 0 0;\n}\n.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; }\n.mcpui-details dd { margin: 0; overflow-wrap: anywhere; color: var(--jini-mcpui-text); }\n.mcpui-details-outcome { display: flex; flex-direction: column; gap: 8px; }\n.mcpui-outcome-row { display: flex; align-items: flex-start; gap: 14px; }\n.mcpui-outcome-row dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.mcpui-outcome-row dt .mcpui-hint { display: block; font-weight: 400; }\n.mcpui-outcome-row dd { flex: 1; min-width: 0; }\n/* Capped so a long status cannot squeeze the label back to one character per line; the full text\n   stays in the cell's title. */\n.mcpui-outcome-row dd.mcpui-detail-status {\n  flex: 0 1 auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n/* The iframe has 16px body padding on each side: 352px viewport = 320px card. Stacked, the value\n   has the full width, so it wraps between words instead of truncating. */\n@media (max-width: 352px) {\n  .mcpui-outcome-row { flex-direction: column; gap: 2px; }\n  .mcpui-outcome-row dd.mcpui-detail-status { max-width: 100%; white-space: normal; overflow-wrap: normal; }\n}\n.mcpui-code {\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 16em;\n  overflow: auto;\n  font-family: var(--jini-mcpui-font-mono);\n  font-size: 12.5px;\n  line-height: 1.45;\n  padding: 6px 8px;\n  border: 1px solid var(--jini-mcpui-border);\n  border-radius: var(--jini-mcpui-radius-sm);\n  background: var(--jini-mcpui-bg);\n}\n.mcpui-warning {\n  margin: 14px 0 0;\n  padding: 9px 11px;\n  border-radius: var(--jini-mcpui-radius-md);\n  border: 1px solid var(--jini-mcpui-danger);\n  background: var(--jini-mcpui-danger-tint);\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-fields { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; border: 0; padding: 0; }\n.mcpui-field { display: flex; flex-direction: column; gap: 4px; }\n.mcpui-field-inline { flex-direction: row; align-items: flex-start; gap: 8px; }\n.mcpui-label { font-weight: 500; color: var(--jini-mcpui-text-strong); }\n.mcpui-required { color: var(--jini-mcpui-accent); margin-left: 2px; }\n.mcpui-hint { color: var(--jini-mcpui-text-soft); font-size: 13px; }\n.mcpui-input, .mcpui-select, .mcpui-textarea {\n  font: inherit;\n  color: var(--jini-mcpui-text);\n  background: var(--jini-mcpui-panel);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  border-radius: var(--jini-mcpui-radius-sm);\n  padding: 7px 9px;\n  width: 100%;\n  min-width: 0;\n}\n.mcpui-textarea { resize: vertical; min-height: 72px; font-family: var(--jini-mcpui-font); }\n.mcpui-checkbox { margin: 3px 0 0; accent-color: var(--jini-mcpui-accent); }\n.mcpui-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }\n.mcpui-choice { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 6px 0 0; }\n.mcpui-choice-label { color: var(--jini-mcpui-text); font-weight: 400; }\n.mcpui-input:focus-visible, .mcpui-select:focus-visible, .mcpui-textarea:focus-visible,\n.mcpui-checkbox:focus-visible, .mcpui-button:focus-visible {\n  outline: 2px solid var(--jini-mcpui-accent-ring);\n  outline-offset: 1px;\n  border-color: var(--jini-mcpui-accent);\n}\n.mcpui-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }\n.mcpui-button {\n  font: inherit;\n  font-weight: 500;\n  padding: 7px 15px;\n  border-radius: var(--jini-mcpui-radius-pill);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  background: var(--jini-mcpui-panel);\n  color: var(--jini-mcpui-text);\n  cursor: pointer;\n}\n.mcpui-button:hover:not([disabled]) { background: var(--jini-mcpui-accent-tint); }\n.mcpui-button-primary {\n  background: var(--jini-mcpui-accent);\n  border-color: var(--jini-mcpui-accent);\n  color: var(--jini-mcpui-panel);\n}\n.mcpui-button-primary:hover:not([disabled]) { background: var(--jini-mcpui-accent-hover); border-color: var(--jini-mcpui-accent-hover); }\n.mcpui-button-danger {\n  background: var(--jini-mcpui-danger);\n  border-color: var(--jini-mcpui-danger);\n  color: var(--jini-mcpui-panel);\n}\n.mcpui-button-danger:hover:not([disabled]) { background: var(--jini-mcpui-danger-hover); border-color: var(--jini-mcpui-danger-hover); }\n.mcpui-button[disabled] { opacity: 0.55; cursor: default; }\n.mcpui-status { margin: 12px 0 0; min-height: 1.4em; color: var(--jini-mcpui-text-muted); }\n.mcpui-status[data-state=\"failed\"], .mcpui-status[data-state=\"invalid\"], .mcpui-status[data-state=\"expired\"] { color: var(--jini-mcpui-danger); }\n.mcpui-status[data-state=\"done\"] { color: var(--jini-mcpui-text-strong); }\n/* Neither a plain success nor a failure \u2014 e.g. an outcome surface reporting \"uploaded, not yet\n   reachable\" (outcome.ts's own state: partial). Distinct from both --jini-mcpui-danger (would\n   wrongly read as \"this failed\") and --jini-mcpui-text-strong (would wrongly read as \"this is\n   fully done\"); the accent token reads as \"worth a second look\" without asserting either. */\n.mcpui-status[data-state=\"partial\"] { color: var(--jini-mcpui-accent); }\n.mcpui-code { font-family: var(--jini-mcpui-font-mono); font-size: 13px; color: var(--jini-mcpui-text-faint); }";
+export declare const SURFACE_BASE_CSS = "*, *::before, *::after { box-sizing: border-box; }\nhtml, body { margin: 0; padding: 0; }\nbody {\n  /* Transparent, not var(--jini-mcpui-bg): this document has no page of its own to paint. It is an\n     allow-scripts-only sandboxed iframe embedded directly in a host's chat transcript, and html's\n     background is left at its (also transparent) initial value, so the host's own pane shows\n     straight through to .mcpui-surface below rather than through a second, unrelated rectangle of\n     fill color sitting between the two. --jini-mcpui-bg stays declared for a caller styling\n     something else via extraCss -- nothing in this stylesheet reads it anymore. */\n  background: transparent;\n  color: var(--jini-mcpui-text);\n  font-family: var(--jini-mcpui-font);\n  font-size: 14px;\n  line-height: 1.5;\n  padding: 16px;\n  -webkit-font-smoothing: antialiased;\n}\n.mcpui-surface {\n  background: linear-gradient(135deg,\n    color-mix(in srgb, var(--jini-mcpui-accent) 5%, var(--jini-mcpui-panel)) 0%,\n    var(--jini-mcpui-panel) 60%);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 18%, var(--jini-mcpui-border));\n  border-radius: var(--jini-mcpui-radius-md);\n  box-shadow: var(--jini-mcpui-surface-shadow);\n  padding: 18px 20px 16px;\n  max-width: 640px;\n  margin: 0 auto;\n}\n.mcpui-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-description { margin: 6px 0 0; color: var(--jini-mcpui-text-muted); }\n.mcpui-details {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 4px 14px;\n  margin: 14px 0 0;\n}\n.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; }\n.mcpui-details dd { margin: 0; overflow-wrap: anywhere; color: var(--jini-mcpui-text); }\n.mcpui-details-outcome { display: flex; flex-direction: column; gap: 8px; }\n.mcpui-outcome-row { display: flex; align-items: flex-start; gap: 14px; }\n.mcpui-outcome-row dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }\n.mcpui-outcome-row dt .mcpui-hint { display: block; font-weight: 400; }\n.mcpui-outcome-row dd { flex: 1; min-width: 0; }\n/* Capped so a long status cannot squeeze the label back to one character per line; the full text\n   stays in the cell's title. */\n.mcpui-outcome-row dd.mcpui-detail-status {\n  flex: 0 1 auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n/* The iframe has 16px body padding on each side: 352px viewport = 320px card. Stacked, the value\n   has the full width, so it wraps between words instead of truncating. */\n@media (max-width: 352px) {\n  .mcpui-outcome-row { flex-direction: column; gap: 2px; }\n  .mcpui-outcome-row dd.mcpui-detail-status { max-width: 100%; white-space: normal; overflow-wrap: normal; }\n}\n.mcpui-code {\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 16em;\n  overflow: auto;\n  font-family: var(--jini-mcpui-font-mono);\n  font-size: 12.5px;\n  line-height: 1.45;\n  padding: 6px 8px;\n  border: 1px solid var(--jini-mcpui-border);\n  border-radius: var(--jini-mcpui-radius-sm);\n  background: var(--jini-mcpui-bg);\n}\n.mcpui-warning {\n  margin: 14px 0 0;\n  padding: 9px 11px;\n  border-radius: var(--jini-mcpui-radius-md);\n  border: 1px solid var(--jini-mcpui-danger);\n  background: var(--jini-mcpui-danger-tint);\n  color: var(--jini-mcpui-text-strong);\n}\n.mcpui-fields { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; border: 0; padding: 0; }\n.mcpui-field { display: flex; flex-direction: column; gap: 4px; }\n.mcpui-field-inline { flex-direction: row; align-items: flex-start; gap: 8px; }\n.mcpui-label { font-weight: 500; color: var(--jini-mcpui-text-strong); }\n.mcpui-required { color: var(--jini-mcpui-accent); margin-left: 2px; }\n.mcpui-hint { color: var(--jini-mcpui-text-soft); font-size: 13px; }\n.mcpui-input, .mcpui-select, .mcpui-textarea {\n  font: inherit;\n  color: var(--jini-mcpui-text);\n  background: var(--jini-mcpui-panel);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  border-radius: var(--jini-mcpui-radius-sm);\n  padding: 7px 9px;\n  width: 100%;\n  min-width: 0;\n}\n.mcpui-textarea { resize: vertical; min-height: 72px; font-family: var(--jini-mcpui-font); }\n.mcpui-checkbox { margin: 3px 0 0; accent-color: var(--jini-mcpui-accent); }\n.mcpui-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }\n.mcpui-choice { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 6px 0 0; }\n.mcpui-choice-label { color: var(--jini-mcpui-text); font-weight: 400; }\n.mcpui-input:focus-visible, .mcpui-select:focus-visible, .mcpui-textarea:focus-visible,\n.mcpui-checkbox:focus-visible, .mcpui-button:focus-visible {\n  outline: 2px solid var(--jini-mcpui-accent-ring);\n  outline-offset: 1px;\n  border-color: var(--jini-mcpui-accent);\n}\n.mcpui-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }\n.mcpui-button {\n  font: inherit;\n  font-weight: 500;\n  padding: 7px 15px;\n  border-radius: var(--jini-mcpui-radius-pill);\n  border: 1px solid color-mix(in srgb, var(--jini-mcpui-accent) 14%, var(--jini-mcpui-border-strong));\n  background: var(--jini-mcpui-panel);\n  color: var(--jini-mcpui-text);\n  cursor: pointer;\n}\n.mcpui-button:hover:not([disabled]) { background: var(--jini-mcpui-accent-tint); }\n.mcpui-button-primary {\n  background: var(--jini-mcpui-accent);\n  border-color: var(--jini-mcpui-accent);\n  color: var(--jini-mcpui-accent-ink);\n}\n.mcpui-button-primary:hover:not([disabled]) { background: var(--jini-mcpui-accent-hover); border-color: var(--jini-mcpui-accent-hover); }\n.mcpui-button-danger {\n  background: var(--jini-mcpui-danger);\n  border-color: var(--jini-mcpui-danger);\n  color: var(--jini-mcpui-panel);\n}\n.mcpui-button-danger:hover:not([disabled]) { background: var(--jini-mcpui-danger-hover); border-color: var(--jini-mcpui-danger-hover); }\n.mcpui-button[disabled] { opacity: 0.55; cursor: default; }\n.mcpui-status { margin: 12px 0 0; min-height: 1.4em; color: var(--jini-mcpui-text-muted); }\n.mcpui-status[data-state=\"failed\"], .mcpui-status[data-state=\"invalid\"], .mcpui-status[data-state=\"expired\"] { color: var(--jini-mcpui-danger); }\n.mcpui-status[data-state=\"done\"] { color: var(--jini-mcpui-text-strong); }\n/* Neither a plain success nor a failure \u2014 e.g. an outcome surface reporting \"uploaded, not yet\n   reachable\" (outcome.ts's own state: partial). Distinct from both --jini-mcpui-danger (would\n   wrongly read as \"this failed\") and --jini-mcpui-text-strong (would wrongly read as \"this is\n   fully done\"); the accent token reads as \"worth a second look\" without asserting either. */\n.mcpui-status[data-state=\"partial\"] { color: var(--jini-mcpui-accent); }\n.mcpui-code { font-family: var(--jini-mcpui-font-mono); font-size: 13px; color: var(--jini-mcpui-text-faint); }";
 /**
  * The Content-Security-Policy every generated surface declares in its own `<head>`.
  *

package/dist/features/mcp-ui/surfaces/document.js

@@ -147,7 +147,7 @@ body {
 .mcpui-button-primary {
   background: var(--jini-mcpui-accent);
   border-color: var(--jini-mcpui-accent);
-  color: var(--jini-mcpui-panel);
+  color: var(--jini-mcpui-accent-ink);
 }
 .mcpui-button-primary:hover:not([disabled]) { background: var(--jini-mcpui-accent-hover); border-color: var(--jini-mcpui-accent-hover); }
 .mcpui-button-danger {

package/dist/features/mcp-ui/surfaces/host-theme.d.ts

@@ -0,0 +1,30 @@
+import type { SurfaceTokenName } from './tokens.js';
+/** The one slice of `CSSStyleDeclaration` this module reads — a test passes a plain object. */
+export interface HostThemeStyle {
+    getPropertyValue(name: string): string;
+}
+export type HostSurfaceTokens = Readonly<Partial<Record<SurfaceTokenName, string>>>;
+/**
+ * Reads the host's resolved theme at one element.
+ *
+ * @param style - The element's computed style (`getComputedStyle(el)`), where `--jini-*` resolve
+ * through every `var()` the host's theme inputs pass through.
+ * @returns The surface tokens to override. A variable the host leaves undeclared (or declares with
+ * an unsafe value) is omitted, so the surface keeps its own default for it.
+ */
+export declare function readHostSurfaceTokens(style: HostThemeStyle): HostSurfaceTokens;
+/**
+ * Writes host tokens into a surface document.
+ *
+ * The rule is plain `:root` placed after the document's first `<style>`, so it beats the token
+ * block's defaults by source order; a builder's own `tokens` override is emitted as `:root:root`
+ * (`renderTokenBlock`), so a card that set its own colors keeps them. Documents carrying no
+ * `--jini-mcpui-` token at all are returned unchanged: a third-party View declares none of these
+ * names, and its HTML is not this module's to edit.
+ *
+ * @param html - The surface document.
+ * @param tokens - From {@link readHostSurfaceTokens}.
+ * @returns The document with the host rule inserted, or `html` itself when there is nothing to do.
+ */
+export declare function applyHostSurfaceTokens(html: string, tokens: HostSurfaceTokens): string;
+//# sourceMappingURL=host-theme.d.ts.map

package/dist/features/mcp-ui/surfaces/host-theme.js

@@ -0,0 +1,85 @@
+/**
+ * @module features/mcp-ui/surfaces/host-theme
+ *
+ * Makes a surface follow the embedding host's LIVE theme. A surface is a sandboxed document that
+ * cannot inherit the host's CSS (see `tokens.ts`), so without this every card wore Jini's neutral
+ * default palette — a near-black accent on grey — whatever the host's brand (owner, 2026-10-13:
+ * "every chat card should follow the theme color. It shouldn't be that ugly gray").
+ *
+ * The host side reads Jini's standard theme variables (`variables.css`'s `--jini-*`, which a host
+ * brands through `--jini-theme-*` inputs) where the card is mounted, and {@link applyHostSurfaceTokens}
+ * writes them into the document as a second `:root` rule right after the surface's token block. It
+ * rewrites the document at render time rather than asking the View to apply a value it was sent,
+ * so a card saved in an old chat — whose stored HTML predates this module — follows the theme too.
+ */
+/**
+ * Which host variable each surface token follows. Radius and fonts are absent on purpose: a sandboxed
+ * frame has no network, so a host's web font cannot load there, and the surface's radius scale is
+ * its own. Text on an accent fill follows the host's primary ink, so a card's primary button
+ * reads exactly as legibly as the host's own.
+ */
+const HOST_THEME_SOURCES = {
+    '--jini-mcpui-bg': '--jini-bg',
+    '--jini-mcpui-panel': '--jini-surface',
+    '--jini-mcpui-border': '--jini-border',
+    '--jini-mcpui-border-strong': '--jini-border',
+    '--jini-mcpui-text': '--jini-text',
+    '--jini-mcpui-text-strong': '--jini-text',
+    '--jini-mcpui-text-muted': '--jini-muted',
+    '--jini-mcpui-text-soft': '--jini-muted',
+    '--jini-mcpui-text-faint': '--jini-muted',
+    '--jini-mcpui-accent': '--jini-primary',
+    '--jini-mcpui-accent-strong': '--jini-primary',
+    '--jini-mcpui-accent-ink': '--jini-primary-ink',
+    '--jini-mcpui-danger': '--jini-danger',
+};
+/**
+ * A value that could close the `<style>` it is written into, or end its declaration early, is
+ * dropped rather than escaped. Custom-property values accept almost any token, and the accent is an
+ * operator-typed setting, so `</style><script>` is a value the CSS parser would keep.
+ */
+const UNSAFE_VALUE = /[<>{};\\]/;
+/**
+ * Reads the host's resolved theme at one element.
+ *
+ * @param style - The element's computed style (`getComputedStyle(el)`), where `--jini-*` resolve
+ * through every `var()` the host's theme inputs pass through.
+ * @returns The surface tokens to override. A variable the host leaves undeclared (or declares with
+ * an unsafe value) is omitted, so the surface keeps its own default for it.
+ */
+export function readHostSurfaceTokens(style) {
+    const tokens = {};
+    for (const [token, source] of Object.entries(HOST_THEME_SOURCES)) {
+        const value = style.getPropertyValue(source).trim();
+        if (value !== '' && !UNSAFE_VALUE.test(value))
+            tokens[token] = value;
+    }
+    return tokens;
+}
+/** Marks the rule {@link applyHostSurfaceTokens} writes. */
+const HOST_THEME_STYLE_ATTRIBUTE = 'data-jini-host-theme';
+/**
+ * Writes host tokens into a surface document.
+ *
+ * The rule is plain `:root` placed after the document's first `<style>`, so it beats the token
+ * block's defaults by source order; a builder's own `tokens` override is emitted as `:root:root`
+ * (`renderTokenBlock`), so a card that set its own colors keeps them. Documents carrying no
+ * `--jini-mcpui-` token at all are returned unchanged: a third-party View declares none of these
+ * names, and its HTML is not this module's to edit.
+ *
+ * @param html - The surface document.
+ * @param tokens - From {@link readHostSurfaceTokens}.
+ * @returns The document with the host rule inserted, or `html` itself when there is nothing to do.
+ */
+export function applyHostSurfaceTokens(html, tokens) {
+    const entries = Object.entries(tokens);
+    if (entries.length === 0 || !html.includes('--jini-mcpui-'))
+        return html;
+    const close = html.indexOf('</style>');
+    if (close === -1)
+        return html;
+    const at = close + '</style>'.length;
+    const rule = `\n<style ${HOST_THEME_STYLE_ATTRIBUTE}>\n:root {\n${entries.map(([name, value]) => `  ${name}: ${value};`).join('\n')}\n}\n</style>`;
+    return `${html.slice(0, at)}${rule}${html.slice(at)}`;
+}
+//# sourceMappingURL=host-theme.js.map

package/dist/features/mcp-ui/surfaces/index.d.ts

@@ -5,6 +5,7 @@ export * from './confirmation.js';
 export * from './document.js';
 export * from './fields.js';
 export * from './form.js';
+export * from './host-theme.js';
 export * from './outcome.js';
 export * from './select.js';
 export * from './text-input.js';

package/dist/features/mcp-ui/surfaces/index.js

@@ -5,6 +5,7 @@ export * from './confirmation.js';
 export * from './document.js';
 export * from './fields.js';
 export * from './form.js';
+export * from './host-theme.js';
 export * from './outcome.js';
 export * from './select.js';
 export * from './text-input.js';

package/dist/features/mcp-ui/surfaces/tokens.d.ts

@@ -18,7 +18,8 @@
  * because all four resolve through it.
  *
  * The sandbox cannot inherit the host's CSS. These names are a document adapter of
- * defaultAdminTheme; hosts forward their active values through the existing overrides port.
+ * defaultAdminTheme; the React host forwards the active theme into every surface it mounts
+ * (`host-theme.ts`), and a builder's `tokens` overrides outrank that.
  *
  * ## Dark mode
  *
@@ -32,6 +33,7 @@
  *
  * Currently moot: {@link FORCE_LIGHT_SURFACE_THEME} suppresses the dark block entirely, because
  * `prefers-color-scheme` reads the OS/browser, not any real app theme — see that constant's own doc.
+ * The host's live theme, dark or light, arrives through `host-theme.ts` instead.
  */
 /**
  * The base palette, radius scale, and font stack.
@@ -52,6 +54,7 @@ export declare const SURFACE_TOKENS: {
     readonly '--jini-mcpui-text-faint': string;
     readonly '--jini-mcpui-accent': string;
     readonly '--jini-mcpui-accent-strong': string;
+    readonly '--jini-mcpui-accent-ink': string;
     readonly '--jini-mcpui-danger': string;
     readonly '--jini-mcpui-radius-xs': "4px";
     readonly '--jini-mcpui-radius-sm': "6px";
@@ -77,12 +80,11 @@ export declare const SURFACE_TOKENS_DARK: Record<SurfaceTokenName, string>;
  * Whether every generated surface is pinned to the light palette regardless of the embedding
  * browser/OS's `prefers-color-scheme`.
  *
- * True by default because without an explicit app-level theme signal, a
- * surface that honors the OS preference doesn't track any actual app theme — it tracks whatever the
- * operator's OS happens to be set to, which produces a dark card floating in an always-light admin
- * UI. Flip this to `false` once the host product has a real app-level theme signal to forward in;
- * nothing else about
- * {@link renderTokenBlock} needs to change.
+ * True by default because `prefers-color-scheme` reads the operator's OS, not any app theme, and a
+ * surface that honored it produced a dark card floating in an always-light admin UI. The real app
+ * theme reaches a surface another way: the React host writes the host's resolved `--jini-*` values
+ * into the document at render time (`host-theme.ts`), so a host rendering in dark gets a dark card
+ * through that rule, and this pin only decides what a surface shows with no host theme at all.
  */
 export declare const FORCE_LIGHT_SURFACE_THEME = true;
 /**
@@ -95,8 +97,8 @@ export declare const FORCE_LIGHT_SURFACE_THEME = true;
  * verbatim — a caller passing a token value is trusted the same way it is trusted with the surface's
  * own body HTML. A caller wanting scheme-specific values is not served by this parameter; it exists
  * for a host's brand tokens, which by design apply the same way regardless of scheme.
- * @returns A `:root { … }` block, followed by a `@media (prefers-color-scheme: dark) { :root { … } }`
- * block unless {@link FORCE_LIGHT_SURFACE_THEME} suppresses it, ready to paste into the first
+ * @returns A `:root { … }` block, then a `:root:root { … }` block holding the overrides (when any),
+ * followed by a `@media (prefers-color-scheme: dark) { :root { … } }` block unless {@link FORCE_LIGHT_SURFACE_THEME} suppresses it, ready to paste into the first
  * `<style>` tag.
  * @complexity O(n) in the number of tokens.
  */

package/dist/features/mcp-ui/surfaces/tokens.js

@@ -19,7 +19,8 @@ import { defaultAdminTheme } from '../../../core/theme/default.js';
  * because all four resolve through it.
  *
  * The sandbox cannot inherit the host's CSS. These names are a document adapter of
- * defaultAdminTheme; hosts forward their active values through the existing overrides port.
+ * defaultAdminTheme; the React host forwards the active theme into every surface it mounts
+ * (`host-theme.ts`), and a builder's `tokens` overrides outrank that.
  *
  * ## Dark mode
  *
@@ -33,6 +34,7 @@ import { defaultAdminTheme } from '../../../core/theme/default.js';
  *
  * Currently moot: {@link FORCE_LIGHT_SURFACE_THEME} suppresses the dark block entirely, because
  * `prefers-color-scheme` reads the OS/browser, not any real app theme — see that constant's own doc.
+ * The host's live theme, dark or light, arrives through `host-theme.ts` instead.
  */
 /**
  * The base palette, radius scale, and font stack.
@@ -53,6 +55,8 @@ export const SURFACE_TOKENS = {
     '--jini-mcpui-text-faint': defaultAdminTheme.light.muted,
     '--jini-mcpui-accent': defaultAdminTheme.light.primary,
     '--jini-mcpui-accent-strong': defaultAdminTheme.light.primary,
+    // Text on an accent fill — the host's primary ink, so a card's primary button reads like the host's own.
+    '--jini-mcpui-accent-ink': defaultAdminTheme.light.primaryInk,
     // Desaturated and earthy, in the same family as the accent rather than a saturated pure red — a
     // destructive action should read as serious, not as an alarm the eye learns to discount.
     '--jini-mcpui-danger': defaultAdminTheme.light.danger,
@@ -85,6 +89,7 @@ export const SURFACE_TOKENS_DARK = {
     '--jini-mcpui-text-faint': defaultAdminTheme.dark.muted,
     '--jini-mcpui-accent': defaultAdminTheme.dark.primary,
     '--jini-mcpui-accent-strong': defaultAdminTheme.dark.primary,
+    '--jini-mcpui-accent-ink': defaultAdminTheme.dark.primaryInk,
     '--jini-mcpui-danger': defaultAdminTheme.dark.danger,
     '--jini-mcpui-radius-xs': SURFACE_TOKENS['--jini-mcpui-radius-xs'],
     '--jini-mcpui-radius-sm': SURFACE_TOKENS['--jini-mcpui-radius-sm'],
@@ -123,12 +128,11 @@ const DARK_SURFACE_SHADOW = '0 1px 2px color-mix(in srgb, var(--jini-mcpui-bg) 3
  * Whether every generated surface is pinned to the light palette regardless of the embedding
  * browser/OS's `prefers-color-scheme`.
  *
- * True by default because without an explicit app-level theme signal, a
- * surface that honors the OS preference doesn't track any actual app theme — it tracks whatever the
- * operator's OS happens to be set to, which produces a dark card floating in an always-light admin
- * UI. Flip this to `false` once the host product has a real app-level theme signal to forward in;
- * nothing else about
- * {@link renderTokenBlock} needs to change.
+ * True by default because `prefers-color-scheme` reads the operator's OS, not any app theme, and a
+ * surface that honored it produced a dark card floating in an always-light admin UI. The real app
+ * theme reaches a surface another way: the React host writes the host's resolved `--jini-*` values
+ * into the document at render time (`host-theme.ts`), so a host rendering in dark gets a dark card
+ * through that rule, and this pin only decides what a surface shows with no host theme at all.
  */
 export const FORCE_LIGHT_SURFACE_THEME = true;
 /**
@@ -141,22 +145,27 @@ export const FORCE_LIGHT_SURFACE_THEME = true;
  * verbatim — a caller passing a token value is trusted the same way it is trusted with the surface's
  * own body HTML. A caller wanting scheme-specific values is not served by this parameter; it exists
  * for a host's brand tokens, which by design apply the same way regardless of scheme.
- * @returns A `:root { … }` block, followed by a `@media (prefers-color-scheme: dark) { :root { … } }`
- * block unless {@link FORCE_LIGHT_SURFACE_THEME} suppresses it, ready to paste into the first
+ * @returns A `:root { … }` block, then a `:root:root { … }` block holding the overrides (when any),
+ * followed by a `@media (prefers-color-scheme: dark) { :root { … } }` block unless {@link FORCE_LIGHT_SURFACE_THEME} suppresses it, ready to paste into the first
  * `<style>` tag.
  * @complexity O(n) in the number of tokens.
  */
 export function renderTokenBlock(overrides = {}) {
     const declare = (entries) => entries.map(([name, value]) => `  ${name}: ${value};`).join('\n');
+    const notOverridden = ([name]) => !(name in overrides);
     const light = declare([
-        ...Object.entries({ ...SURFACE_TOKENS, ...overrides }),
+        ...Object.entries(SURFACE_TOKENS).filter(notOverridden),
         ...Object.entries(DERIVED_TOKENS),
     ]);
-    const lightBlock = `:root {\n${light}\n}`;
+    // Overrides get their own, more specific rule so they outrank the host theme's plain `:root` rule
+    // (`host-theme.ts`) in both schemes: a card that chose its own colors keeps them.
+    const overrideEntries = Object.entries(overrides);
+    const overrideBlock = overrideEntries.length === 0 ? '' : `\n:root:root {\n${declare(overrideEntries)}\n}`;
+    const lightBlock = `:root {\n${light}\n}${overrideBlock}`;
     if (FORCE_LIGHT_SURFACE_THEME)
         return lightBlock;
     const dark = declare([
-        ...Object.entries({ ...SURFACE_TOKENS_DARK, ...overrides }),
+        ...Object.entries(SURFACE_TOKENS_DARK).filter(notOverridden),
         ['--jini-mcpui-surface-shadow', DARK_SURFACE_SHADOW],
     ]);
     return `${lightBlock}\n@media (prefers-color-scheme: dark) {\n  :root {\n${dark}\n  }\n}`;

package/dist/features/panel-kit/helpers/format-timestamp.js

@@ -6,7 +6,7 @@
 /** Render YYYY-MM-DD HH:MM; hosts can select the viewer's local timezone explicitly. */
 export function formatTimestamp({ iso }, { timeZone = "stored" } = {}) {
     if (timeZone === "local") {
-        // A stored UTC prefix can label server time as viewer time (Tovu D-06). Local getters
+        // A stored UTC prefix can label server time as viewer time (host issue D-06). Local getters
         // follow the browser's timezone and DST; zone-less ISO is already local wall time.
         const date = new Date(iso);
         if (Number.isNaN(date.getTime()))

package/dist/react/mcp-ui/McpUiHost.js

@@ -9,8 +9,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Thin on purpose, same as before — every protocol decision lives in `useMcpUiHost.ts`, so a
  * consumer needing different chrome writes that chrome against the hook rather than forking this.
+ *
+ * It also themes the View: the host's live `--jini-*` theme is written into a Jini-built surface
+ * document before it is handed over (`surfaces/host-theme.ts`), and a theme change starts a fresh
+ * session with the re-themed document — the same remount any changed document gets.
  */
 import { AppRenderer } from '@mcp-ui/client';
+import { useRef } from 'react';
+import { applyHostSurfaceTokens } from '../../features/mcp-ui/surfaces/host-theme.js';
+import { useHostSurfaceTokens } from './useHostSurfaceTokens.js';
 import { useMcpUiHost } from './useMcpUiHost.js';
 const DEFAULT_INITIAL_HEIGHT = 220;
 const DEFAULT_MAX_HEIGHT = 720;
@@ -21,14 +28,20 @@ const DEFAULT_MAX_HEIGHT = 720;
  */
 export function McpUiHost(props) {
     const { title, className, initialHeight = DEFAULT_INITIAL_HEIGHT, autoResize = true, maxHeight = DEFAULT_MAX_HEIGHT } = props;
-    const host = useMcpUiHost(props);
+    const wrapperRef = useRef(null);
+    const hostTokens = useHostSurfaceTokens(wrapperRef);
+    const html = hostTokens === undefined ? props.html : applyHostSurfaceTokens(props.html, hostTokens);
+    // Only a document the theme actually changed takes the theme into its key, so a third-party View
+    // (left untouched) never remounts when the host's theme moves.
+    const sessionKey = `${String(props.sessionKey ?? props.html)}${html === props.html ? '' : JSON.stringify(hostTokens)}`;
+    const host = useMcpUiHost({ ...props, html, sessionKey });
     const reported = host.size?.height;
     const height = autoResize && reported !== undefined ? Math.min(Math.max(reported, 1), maxHeight) : initialHeight;
-    return (_jsx("div", { className: className, "data-mcpui-host": "", "data-mcpui-state": host.state, "aria-label": title, style: { display: 'block', width: '100%', height }, children: _jsx(AppRenderer
+    return (_jsx("div", { ref: wrapperRef, className: className, "data-mcpui-host": "", "data-mcpui-state": host.state, "aria-label": title, style: { display: 'block', width: '100%', height }, children: hostTokens !== undefined && _jsx(AppRenderer
         // Keyed by the session so replacing the document remounts `AppRenderer` — a fresh
         // `AppBridge`, a fresh sandbox iframe, a fresh handshake. `AppRenderer` itself provides no
         // "replace the document in place" mode; remount via `key` is the supported way to start a
         // new session, per `@mcp-ui/client`'s own docs.
-        , { ref: host.rendererRef, ...host.rendererProps }, String(props.sessionKey ?? props.html)) }));
+        , { ref: host.rendererRef, ...host.rendererProps }, sessionKey) }));
 }
 //# sourceMappingURL=McpUiHost.js.map

package/dist/react/mcp-ui/useHostSurfaceTokens.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @module react/mcp-ui/useHostSurfaceTokens
+ *
+ * The live half of `features/mcp-ui/surfaces/host-theme.ts`: reads the host's resolved `--jini-*`
+ * theme where a surface is mounted, and reads it again whenever the theme can have changed, so an
+ * accent picked in a host's appearance settings reaches the cards already on screen.
+ */
+import { type RefObject } from 'react';
+import { type HostSurfaceTokens } from '../../features/mcp-ui/surfaces/host-theme.js';
+/**
+ * @param ref - The element the surface is mounted in; its computed style is where the host theme is read.
+ * @returns The host tokens, or `undefined` until the first read — a caller holds the surface back
+ * until then, so a themed card never mounts first in the default palette and then again in the host's.
+ */
+export declare function useHostSurfaceTokens(ref: RefObject<HTMLElement | null>): HostSurfaceTokens | undefined;
+//# sourceMappingURL=useHostSurfaceTokens.d.ts.map

package/dist/react/mcp-ui/useHostSurfaceTokens.js

@@ -0,0 +1,49 @@
+/**
+ * @module react/mcp-ui/useHostSurfaceTokens
+ *
+ * The live half of `features/mcp-ui/surfaces/host-theme.ts`: reads the host's resolved `--jini-*`
+ * theme where a surface is mounted, and reads it again whenever the theme can have changed, so an
+ * accent picked in a host's appearance settings reaches the cards already on screen.
+ */
+import { useLayoutEffect, useState } from 'react';
+import { readHostSurfaceTokens } from '../../features/mcp-ui/surfaces/host-theme.js';
+/**
+ * The attributes a host switches a theme with: an inline `--jini-theme-*` input (`style`), a theme
+ * class, or one of the scheme attributes `variables.css` keys on. Watched on every ancestor, not the
+ * whole subtree — a streaming transcript changes attributes constantly, and none of those can move
+ * a value this card inherits.
+ */
+const THEME_ATTRIBUTES = ['style', 'class', 'data-theme', 'data-color-scheme', 'data-admin-theme'];
+/**
+ * @param ref - The element the surface is mounted in; its computed style is where the host theme is read.
+ * @returns The host tokens, or `undefined` until the first read — a caller holds the surface back
+ * until then, so a themed card never mounts first in the default palette and then again in the host's.
+ */
+export function useHostSurfaceTokens(ref) {
+    const [tokens, setTokens] = useState();
+    useLayoutEffect(() => {
+        const element = ref.current;
+        const view = element?.ownerDocument.defaultView;
+        if (element === null || element === undefined || view === null || view === undefined) {
+            setTokens({});
+            return;
+        }
+        let last;
+        const read = () => {
+            const next = readHostSurfaceTokens(view.getComputedStyle(element));
+            const key = JSON.stringify(next);
+            if (key === last)
+                return;
+            last = key;
+            setTokens(next);
+        };
+        read();
+        const observer = new view.MutationObserver(read);
+        for (let node = element.parentElement; node !== null; node = node.parentElement) {
+            observer.observe(node, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
+        }
+        return () => observer.disconnect();
+    }, [ref]);
+    return tokens;
+}
+//# sourceMappingURL=useHostSurfaceTokens.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Generic, product-neutral React UI primitives and feature domains. Framework-free types, decision rules, catalogs, and host port contracts live behind ./core (no React, no DOM). The Excalidraw and Lexical editors live behind ./sketch-editor and ./lexical-rich-text-editor; the GrapesJS-backed inline HTML editor lives behind ./html-editor.",
   "license": "Apache-2.0",
   "repository": {
@@ -48,6 +48,9 @@
         "./fetch-query/tanstack": "panel-kit"
       },
       "shared": [
+        "src/features/charts",
+        "src/features/interactive-ui/registry.ts",
+        "src/features/interactive-ui/table-data.ts",
         "src/theme/default.ts",
         "src/theme/stylesheet.ts",
         "src/theme/validation.ts",
@@ -233,10 +236,10 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/platform": "^0.5.6",
-    "@jini-ai/agentic": "^0.4.4",
     "@jini-ai/core": "^0.4.5",
-    "@jini-ai/integrations": "^0.4.2"
+    "@jini-ai/platform": "^0.5.6",
+    "@jini-ai/integrations": "^0.4.2",
+    "@jini-ai/agentic": "^0.4.4"
   },
   "dependencies": {
     "@jini-ai/core": "^0.4.5"