@jini-ai/ui 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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).
+- HTML viewer imports `renderers/new-tab-preview` and `renderers/sandbox-bridge` directly instead of the renderer barrel (no Markdown renderers or srcdoc assembly in its closure).
+- New universal `./i18n` subpath re-exporting `interpolate` from the existing template-i18n owner.
+- TanStack fetch-query adapter: replacement writes win at TanStack's save boundary, so an older read that settles after `replace()` can no longer overwrite it (hook data, loaders and `peek()` keep their public types).
+
 ## 0.5.0 — 2026-10-13
 
 - Add framework-neutral chart contracts, browser/table and React hosts, provider-defined kinds and legacy chart wire aliases. Extract Recharts implementations and peers into the private browser artifact; chart component export wrappers are removed (no external consumers found).

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/html-viewer/dependencies.d.ts

@@ -1,7 +1,7 @@
 import type { FullscreenPort, HtmlViewerDependencies, NewTabPreviewPort } from './ports.js';
 /** Real browser Fullscreen API binding. Every method is SSR-guarded (`typeof document === 'undefined'`). */
 export declare function createBrowserFullscreenPort(): FullscreenPort;
-/** Reuses `@jini-ai/ui`'s own `./renderers` subpath's `openSandboxedPreviewInNewTab` — the sandboxed-iframe core this whole slice is the first consumer of within this package. */
+/** Reuses `renderers/new-tab-preview.ts`, the owner of sandboxed new-tab previews, without loading the renderer barrel. */
 export declare function createBrowserNewTabPreviewPort(): NewTabPreviewPort;
 export declare function createDefaultHtmlViewerDependencies(): HtmlViewerDependencies;
 export declare const defaultHtmlViewerDependencies: HtmlViewerDependencies;

package/dist/features/html-viewer/dependencies.js

@@ -1,4 +1,4 @@
-import { openSandboxedPreviewInNewTab } from '../../renderers/index.js';
+import { openSandboxedPreviewInNewTab } from '../../renderers/new-tab-preview.js';
 /** Real browser Fullscreen API binding. Every method is SSR-guarded (`typeof document === 'undefined'`). */
 export function createBrowserFullscreenPort() {
     return {
@@ -28,7 +28,7 @@ export function createBrowserFullscreenPort() {
         },
     };
 }
-/** Reuses `@jini-ai/ui`'s own `./renderers` subpath's `openSandboxedPreviewInNewTab` — the sandboxed-iframe core this whole slice is the first consumer of within this package. */
+/** Reuses `renderers/new-tab-preview.ts`, the owner of sandboxed new-tab previews, without loading the renderer barrel. */
 export function createBrowserNewTabPreviewPort() {
     return {
         openInNewTab(html, title) {

package/dist/features/html-viewer/react/hooks/useDeckNavigation.d.ts

@@ -14,8 +14,8 @@ export interface DeckNavigationController {
     goTo(index: number): void;
 }
 /**
- * Drives deck/slide navigation over `@jini-ai/ui`'s own `./renderers`
- * subpath's `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
+ * Drives deck/slide navigation over `renderers/sandbox-bridge.ts`'s
+ * `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
  * `constants.ts`. The sandboxed content itself must implement the deck
  * framework that responds to these messages — this hook only sends
  * navigation requests and tracks the state the content reports back.

package/dist/features/html-viewer/react/hooks/useDeckNavigation.js

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useSandboxBridge } from '../../../../renderers/index.js';
+import { useSandboxBridge } from '../../../../renderers/sandbox-bridge.js';
 import { DECK_NAVIGATE_MESSAGE_TYPE, DECK_STATE_MESSAGE_TYPE } from '../../constants.js';
 import { canGoNext, canGoPrev, parseDeckStateMessage, slideCounterLabel } from '../../rules.js';
 /**
- * Drives deck/slide navigation over `@jini-ai/ui`'s own `./renderers`
- * subpath's `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
+ * Drives deck/slide navigation over `renderers/sandbox-bridge.ts`'s
+ * `useSandboxBridge`, speaking the neutral `jini:deck-*` protocol from
  * `constants.ts`. The sandboxed content itself must implement the deck
  * framework that responds to these messages — this hook only sends
  * navigation requests and tracks the state the content reports back.

package/dist/features/i18n/universal.d.ts

@@ -0,0 +1,3 @@
+/** Universal template helpers; implementation stays with the existing template-i18n owner. */
+export { interpolate } from './template-i18n.js';
+//# sourceMappingURL=universal.d.ts.map

package/dist/features/i18n/universal.js

@@ -0,0 +1,3 @@
+/** Universal template helpers; implementation stays with the existing template-i18n owner. */
+export { interpolate } from './template-i18n.js';
+//# sourceMappingURL=universal.js.map

package/dist/features/interactive-ui/providers/shadcn/button.d.ts

@@ -7,7 +7,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "ghost" | "destructive" | "secondary" | null | undefined;
+    variant?: "link" | "default" | "ghost" | "outline" | "destructive" | "secondary" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

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/fetch-query/adapter.tanstack.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Optional TanStack translation layer. No library types escape the fetch-query contract. */
 import { createContext, useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from 'react';
-import { isCancelledError, QueryClient, QueryClientProvider, useMutation, useQuery } from '@tanstack/react-query';
+import { isCancelledError, replaceEqualDeep, QueryClient, QueryClientProvider, useMutation, useQuery } from '@tanstack/react-query';
 import { DEFAULT_STALE_TIME, FetchQueryCache, IDLE_RETENTION, toQueryError } from '@jini-ai/core/fetch';
 import { browserFetchQueryEnvironment } from './environment.browser.js';
 import { resolveFetchQueryError, resolveFetchQueryStatus } from './adapter.react.js';
@@ -64,8 +64,8 @@ function historyFor({ scope, query }) {
     }
     return history;
 }
-/** Replacement writes win over either outcome of an older transport, across all loaders
- * and reactive reads. Weak keys follow TanStack's own query eviction lifecycle. */
+/** Tag transport outcomes; final arbitration belongs to TanStack's synchronous save boundary.
+ * Weak query keys follow TanStack's own eviction lifecycle. */
 async function read({ scope, key, fetch }) {
     const query = scope.client.getQueryCache().find({ queryKey: key, exact: true });
     const history = historyFor({ scope, query });
@@ -77,21 +77,36 @@ async function read({ scope, key, fetch }) {
             return scope.client.getQueryData(key);
         if (value === undefined)
             throw new Error(`${JSON.stringify(key)} data is undefined`);
-        if (request === history.request)
-            history.error = null;
-        return value;
+        return { generation, request, value };
     }
     catch (error) {
         if (generation !== history.replacement)
             return scope.client.getQueryData(key);
-        // Earlier data remains useful, but a failed refresh is not a fresh cache hit.
-        // The next loader/mount must retry even when its staleTime would retain that data.
-        if (request === history.request) {
-            history.error = toQueryError(error);
+        return { generation, request, error };
+    }
+}
+/** Structural sharing runs inside setData, immediately before publication. A check in read()
+ * alone leaves a promise-continuation gap, even when the retryer has already resolved.
+ * Current failures throw here; stale failures resolve to the newer replacement like stale data.
+ * @returns The accepted envelope, reusing TanStack's normal deep structural sharing.
+ */
+function saveResult({ scope, key, previous, incoming }) {
+    const query = scope.client.getQueryCache().find({ queryKey: key, exact: true });
+    const history = historyFor({ scope, query });
+    const result = incoming;
+    if (result.generation !== history.replacement)
+        return scope.client.getQueryData(key);
+    if ('error' in result) {
+        // Earlier data stays useful, but a failed refresh is not a fresh cache hit.
+        if (result.request === history.request) {
+            history.error = toQueryError(result.error);
             query.invalidate();
         }
-        throw error;
+        throw result.error;
     }
+    if (result.request === history.request)
+        history.error = null;
+    return replaceEqualDeep(previous, result);
 }
 /** Match the built-in cache's idle retention. TanStack's default gcTime (5 min) would
  * otherwise evict an unobserved entry before a longer staleTime says it is stale. */
@@ -102,7 +117,8 @@ function gcTimeFor({ staleTime }) {
 function useFetchQuery({ key, fetch }, { enabled = true, staleTime = DEFAULT_STALE_TIME, refetchOnWindowFocus = false } = {}) {
     const scope = useScope();
     const online = useOnline(scope);
-    const query = useQuery({ queryKey: key, queryFn: () => read({ scope, key, fetch }), enabled: enabled && online, staleTime, gcTime: gcTimeFor({ staleTime }) }, scope.client);
+    const query = useQuery({ queryKey: key, queryFn: () => read({ scope, key, fetch }),
+        structuralSharing: (previous, incoming) => saveResult({ scope, key, previous, incoming }), enabled: enabled && online, staleTime, gcTime: gcTimeFor({ staleTime }) }, scope.client);
     const { refetch: refresh } = query;
     const refetch = useCallback(() => {
         if (scope.environment.isOnline()) {
@@ -127,9 +143,10 @@ function useFetchQuery({ key, fetch }, { enabled = true, staleTime = DEFAULT_STA
     // recovery, so a retry is never mistaken for evidence that the last failure is gone.
     const cached = scope.client.getQueryCache().find({ queryKey: key, exact: true });
     const history = historyFor({ scope, query: cached });
-    const hasData = query.data !== undefined;
+    const data = query.data && 'value' in query.data ? query.data.value : undefined;
+    const hasData = data !== undefined;
     return {
-        data: query.data,
+        data,
         status: resolveFetchQueryStatus({ disabled: !enabled, hasData, status: query.status }),
         error: resolveFetchQueryError({ error: history.error ?? query.error, disabled: !enabled, hasData }),
         isFetching: online && query.isFetching, refetch,
@@ -161,11 +178,13 @@ function useFetchMutation({ run }, { invalidates } = {}) {
 function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME } = {}) {
     const scope = useScope();
     return useMemo(() => {
-        const options = { queryKey: key, queryFn: () => read({ scope, key, fetch }), staleTime, gcTime: gcTimeFor({ staleTime }) };
+        const options = { queryKey: key, queryFn: () => read({ scope, key, fetch }),
+            structuralSharing: (previous, incoming) => saveResult({ scope, key, previous, incoming }), staleTime, gcTime: gcTimeFor({ staleTime }) };
         return {
-            peek: () => scope.client.getQueryData(key),
+            peek: () => scope.client.getQueryData(key)?.value,
             load: (required = { key, fetch }) => {
-                const selected = { ...options, queryKey: required.key, queryFn: () => read({ scope, key: required.key, fetch: required.fetch }) };
+                const selected = { ...options, queryKey: required.key, queryFn: () => read({ scope, key: required.key, fetch: required.fetch }),
+                    structuralSharing: (previous, incoming) => saveResult({ scope, key: required.key, previous, incoming }) };
                 return scope.client.fetchQuery(selected).catch(error => {
                     // A forced refresh can supersede a loader's request without aborting its transport.
                     // Follow the new request instead of exposing TanStack's cancellation vocabulary.
@@ -177,6 +196,16 @@ function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME } = {}
                     if (query.state.isInvalidated)
                         return scope.client.fetchQuery(selected);
                     return (query.promise ?? scope.client.getQueryData(required.key));
+                }).then(result => {
+                    const query = scope.client.getQueryCache().find({ queryKey: required.key, exact: true });
+                    const history = historyFor({ scope, query });
+                    // Query.fetch returns the transport envelope, not structuralSharing's accepted value.
+                    // Unwrap against the current generation so awaiting loaders agree with observers.
+                    if (result.generation !== history.replacement)
+                        return scope.client.getQueryData(required.key).value;
+                    if ('error' in result)
+                        throw result.error;
+                    return result.value;
                 });
             },
             replace: ({ value }) => {
@@ -184,7 +213,7 @@ function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME } = {}
                 const history = historyFor({ scope, query });
                 history.replacement += 1;
                 history.error = null;
-                scope.client.setQueryData(key, value);
+                scope.client.setQueryData(key, { generation: history.replacement, request: history.request, value });
             },
         };
     }, [scope, key, fetch, staleTime]);

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/features/settings/dialog/styles/settings-dialog.css

@@ -1718,9 +1718,11 @@ select.jini-input {
   position: relative;
 }
 
+/* The right padding keeps the absolutely positioned copy button off the wrapped code; on a phone
+   that much side padding would halve the line, so the code starts below the button instead. */
 .jini-snippet-pre {
   margin: 0;
-  padding: 14px 16px;
+  padding: 14px 104px 14px 16px;
   overflow-x: auto;
   background: var(--jini-text-strong);
   border-radius: var(--jini-radius);
@@ -1748,6 +1750,12 @@ select.jini-input {
   background: color-mix(in srgb, var(--jini-text-strong) 75%, transparent);
 }
 
+@media (max-width: 640px) {
+  .jini-snippet-pre {
+    padding: 56px 16px 14px;
+  }
+}
+
 /* ============================================================
    Connectors tab — PORTED from OD's real source, not authored by eye.
    Sources: `foundry/integrations/open-design/reference/od-web-src.orig/
@@ -3585,13 +3593,21 @@ button.connector-action.is-loading { cursor: wait; }
   flex-wrap: wrap;
 }
 
+/* A wrapping row, not a fixed column grid: a card holds two or three fields (the model field only
+   when the provider lists models) plus Clear, and the old three-column grid squeezed each input to
+   a few characters on a phone and pushed Clear onto its own full-column row everywhere. Each field
+   asks for 11rem, so a phone gets one field per line, wider screens fit the whole row, and the cap
+   keeps a desktop field from stretching across the card. */
 .jini-media-provider-fields {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
 }
 
 .jini-media-provider-field {
+  flex: 1 1 11rem;
+  max-width: 28rem;
   min-width: 0;
 }
 

package/dist/features/tab-strip/react/components/TabBar.hooks.d.ts

@@ -1,4 +1,4 @@
-import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import { type KeyboardEvent as ReactKeyboardEvent, type RefObject } from "react";
 import type { TabBarTab } from "./TabBar.js";
 /**
  * @file TabBar's derived props and WAI-ARIA automatic-activation keyboard behavior.
@@ -74,4 +74,19 @@ export declare function useTabBarKeyboard({ tabs, activeId, onChange }: {
     activeId: string;
     onChange: (id: string) => void;
 }, _optional?: Record<string, never>): TabBarKeyboardHandlers;
+/**
+ * Keeps the selected tab visible when the strip scrolls sideways — a host may turn the wrapping
+ * row into one swipeable row on phones, and a deep link to a later tab (`?tab=…`) otherwise opens
+ * with its own label cut off at the edge. Only the strip's own `scrollLeft` moves: `scrollIntoView`
+ * would also scroll the page vertically to the strip, a jump on every tab change below the fold.
+ * A strip that wraps (no horizontal overflow) is left alone.
+ *
+ * @param input.activeId - The currently active tab's id; the strip re-checks when it changes.
+ * @returns A ref for the tablist container.
+ * @complexity O(n) per active-id change in the strip's tab count (one selector query).
+ * @example const stripRef = useActiveTabInView({ activeId });
+ */
+export declare function useActiveTabInView({ activeId }: {
+    activeId: string;
+}, _optional?: Record<string, never>): RefObject<HTMLDivElement | null>;
 //# sourceMappingURL=TabBar.hooks.d.ts.map

package/dist/features/tab-strip/react/components/TabBar.hooks.js

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { agentHandle } from "@jini-ai/agentic";
 /**
  * @file TabBar's derived props and WAI-ARIA automatic-activation keyboard behavior.
@@ -112,4 +113,34 @@ export function useTabBarKeyboard({ tabs, activeId, onChange }, _optional = {})
     }
     return { onKeyDown };
 }
+/**
+ * Keeps the selected tab visible when the strip scrolls sideways — a host may turn the wrapping
+ * row into one swipeable row on phones, and a deep link to a later tab (`?tab=…`) otherwise opens
+ * with its own label cut off at the edge. Only the strip's own `scrollLeft` moves: `scrollIntoView`
+ * would also scroll the page vertically to the strip, a jump on every tab change below the fold.
+ * A strip that wraps (no horizontal overflow) is left alone.
+ *
+ * @param input.activeId - The currently active tab's id; the strip re-checks when it changes.
+ * @returns A ref for the tablist container.
+ * @complexity O(n) per active-id change in the strip's tab count (one selector query).
+ * @example const stripRef = useActiveTabInView({ activeId });
+ */
+export function useActiveTabInView({ activeId }, _optional = {}) {
+    const stripRef = useRef(null);
+    useEffect(() => {
+        const strip = stripRef.current;
+        const tab = strip?.querySelector('[role="tab"][aria-selected="true"]');
+        if (!strip || !tab || strip.scrollWidth <= strip.clientWidth)
+            return;
+        const stripBox = strip.getBoundingClientRect();
+        const tabBox = tab.getBoundingClientRect();
+        // A host's end padding (e.g. room for an edge fade) counts as off-screen.
+        const visibleRight = stripBox.right - (parseFloat(getComputedStyle(strip).paddingRight) || 0);
+        if (tabBox.left < stripBox.left)
+            strip.scrollLeft += tabBox.left - stripBox.left;
+        else if (tabBox.right > visibleRight)
+            strip.scrollLeft += tabBox.right - visibleRight;
+    }, [activeId]);
+    return stripRef;
+}
 //# sourceMappingURL=TabBar.hooks.js.map

package/dist/features/tab-strip/react/components/TabBar.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { TabStripFrame } from "./TabStripFrame.js";
 import { agentHandle } from "@jini-ai/agentic";
-import { resolveTabBarTabIndex, tabHandleProps, useTabBarKeyboard } from "./TabBar.hooks.js";
+import { resolveTabBarTabIndex, tabHandleProps, useActiveTabInView, useTabBarKeyboard } from "./TabBar.hooks.js";
 /** The visually-hidden accessible-name SUFFIX {@link TabBarTab.dot} adds — e.g. "GitHub Pages,
  *  Connected", never "Connected GitHub Pages". Deliberately its own function rather than folded into
  *  the visual dot span rendered before the label (`TabBarButton` below): the visual dot is
@@ -24,6 +24,7 @@ function TabBarButton({ tab, active, tabIndex, onChange, }) {
 /** Controlled button-based selection strip, including roving focus and optional agent handles. */
 export function TabBar({ tabs, activeId, onChange, ariaLabel, containerHandle }, _optional = {}) {
     const { onKeyDown } = useTabBarKeyboard({ tabs: tabs, activeId: activeId, onChange: onChange });
-    return (_jsx(TabStripFrame, { className: "tab-bar", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, ...(containerHandle ? agentHandle({ handle: containerHandle }, { role: "region", label: ariaLabel }) : {}), children: tabs.map((tab) => (_jsx(TabBarButton, { tab: tab, active: activeId === tab.id, tabIndex: resolveTabBarTabIndex({ tabs: tabs, activeId: activeId, tab: tab }), onChange: onChange }, tab.id))) }));
+    const stripRef = useActiveTabInView({ activeId: activeId });
+    return (_jsx(TabStripFrame, { ref: stripRef, className: "tab-bar", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, ...(containerHandle ? agentHandle({ handle: containerHandle }, { role: "region", label: ariaLabel }) : {}), children: tabs.map((tab) => (_jsx(TabBarButton, { tab: tab, active: activeId === tab.id, tabIndex: resolveTabBarTabIndex({ tabs: tabs, activeId: activeId, tab: tab }), onChange: onChange }, tab.id))) }));
 }
 //# sourceMappingURL=TabBar.js.map

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.0",
+  "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": {
@@ -15,6 +15,7 @@
     "entries": {
       ".": "browser",
       "./core": "universal",
+      "./i18n": "universal",
       "./sketch-editor": "browser",
       "./lexical-rich-text-editor": "browser",
       "./html-editor": "browser",
@@ -47,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",
@@ -135,6 +139,11 @@
       "import": "./dist/features/admin-widgets/index.js",
       "default": "./dist/features/admin-widgets/index.js"
     },
+    "./i18n": {
+      "types": "./dist/features/i18n/universal.d.ts",
+      "import": "./dist/features/i18n/universal.js",
+      "default": "./dist/features/i18n/universal.js"
+    },
     "./panel-kit": {
       "types": "./dist/features/panel-kit/index.d.ts",
       "import": "./dist/features/panel-kit/index.js",
@@ -227,13 +236,13 @@
     "shiki": "^1.24.4",
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
-    "@jini-ai/integrations": "^0.4.2",
+    "@jini-ai/core": "^0.4.5",
     "@jini-ai/platform": "^0.5.6",
-    "@jini-ai/agentic": "^0.4.4",
-    "@jini-ai/core": "^0.4.4"
+    "@jini-ai/integrations": "^0.4.2",
+    "@jini-ai/agentic": "^0.4.4"
   },
   "dependencies": {
-    "@jini-ai/core": "^0.4.4"
+    "@jini-ai/core": "^0.4.5"
   },
   "peerDependencies": {
     "@jini-ai/integrations": "^0.4.2",