@jini-ai/ui 0.4.7 → 0.4.9

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-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-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); }";
 /**
  * The Content-Security-Policy every generated surface declares in its own `<head>`.
  *
@@ -66,20 +66,27 @@ export declare function renderSurfaceHeader(spec: {
 export interface SurfaceDetail {
     readonly label: string;
     readonly value: string;
+    /** Optional secondary context beneath the label, using the shared muted hint style. */
+    readonly description?: string;
     /**
      * `code` renders the value in a monospace `<pre>` that keeps its line breaks and scrolls inside
      * its own box past a fixed height, so a long SQL statement or JSON argument stays readable without
-     * stretching the dialog past its frame. Omitted (or `text`) keeps the plain inline value.
+     * stretching the dialog past its frame. `status` reserves one line for a short outcome value.
+     * Omitted (or `text`) keeps the plain inline value.
      */
-    readonly format?: 'text' | 'code';
+    readonly format?: 'text' | 'code' | 'status';
 }
 /**
  * Renders a `label: value` description list.
  *
+ * @param options.layout - Outcome rows size independently and stack in narrow cards.
  * @returns The `<dl>`, or `''` for an empty list — an empty `<dl>` is announced by screen readers
  * as a list with no items, which is worse than no list.
+ * @complexity O(n) in the rendered length; no effects or input mutation.
  */
-export declare function renderDetailList(details: readonly SurfaceDetail[]): string;
+export declare function renderDetailList(details: readonly SurfaceDetail[], options?: {
+    layout?: 'outcome';
+}): string;
 /** Renders the polite live region every surface reports outcomes through. Its id is fixed so surface scripts can find it. */
 export declare function renderStatusRegion(): string;
 /**

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

@@ -67,6 +67,22 @@ body {
 }
 .mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; }
 .mcpui-details dd { margin: 0; overflow-wrap: anywhere; color: var(--jini-mcpui-text); }
+.mcpui-details-outcome { display: flex; flex-direction: column; gap: 8px; }
+.mcpui-outcome-row { display: flex; align-items: flex-start; gap: 14px; }
+.mcpui-outcome-row dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.mcpui-outcome-row dt .mcpui-hint { display: block; font-weight: 400; }
+.mcpui-outcome-row dd { flex: 1; min-width: 0; }
+/* Capped so a long status cannot squeeze the label back to one character per line; the full text
+   stays in the cell's title. */
+.mcpui-outcome-row dd.mcpui-detail-status {
+  flex: 0 1 auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* The iframe has 16px body padding on each side: 352px viewport = 320px card. Stacked, the value
+   has the full width, so it wraps between words instead of truncating. */
+@media (max-width: 352px) {
+  .mcpui-outcome-row { flex-direction: column; gap: 2px; }
+  .mcpui-outcome-row dd.mcpui-detail-status { max-width: 100%; white-space: normal; overflow-wrap: normal; }
+}
 .mcpui-code {
   margin: 0;
   white-space: pre-wrap;
@@ -216,20 +232,26 @@ export function renderSurfaceHeader(spec) {
 /**
  * Renders a `label: value` description list.
  *
+ * @param options.layout - Outcome rows size independently and stack in narrow cards.
  * @returns The `<dl>`, or `''` for an empty list — an empty `<dl>` is announced by screen readers
  * as a list with no items, which is worse than no list.
+ * @complexity O(n) in the rendered length; no effects or input mutation.
  */
-export function renderDetailList(details) {
+export function renderDetailList(details, options = {}) {
     if (details.length === 0)
         return '';
+    const outcome = options.layout === 'outcome';
     const rows = details
         .map((detail) => {
         const value = escapeHtml(detail.value);
         const body = detail.format === 'code' ? `<pre class="mcpui-code">${value}</pre>` : value;
-        return `  <dt>${escapeHtml(detail.label)}</dt><dd>${body}</dd>`;
+        const description = detail.description === undefined ? '' : `<span class="mcpui-hint">${escapeHtml(detail.description)}</span>`;
+        const valueClass = detail.format === 'status' ? ` class="mcpui-detail-status" title="${value}"` : '';
+        const pair = `<dt>${escapeHtml(detail.label)}${description}</dt><dd${valueClass}>${body}</dd>`;
+        return outcome ? `  <div class="mcpui-outcome-row">${pair}</div>` : `  ${pair}`;
     })
         .join('\n');
-    return `<dl class="mcpui-details">\n${rows}\n</dl>`;
+    return `<dl class="mcpui-details${outcome ? ' mcpui-details-outcome' : ''}">\n${rows}\n</dl>`;
 }
 /** Renders the polite live region every surface reports outcomes through. Its id is fixed so surface scripts can find it. */
 export function renderStatusRegion() {

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

@@ -68,7 +68,7 @@ export function renderOutcomeDocument(spec) {
         : '';
     const bodyHtml = [
         renderSurfaceHeader(spec.description === undefined ? { title: spec.title } : { title: spec.title, description: spec.description }),
-        renderDetailList(spec.details ?? []),
+        renderDetailList(spec.details ?? [], { layout: 'outcome' }),
         statusHtml,
         actionsHtml,
     ]

package/dist/features/media-providers/constants.d.ts

@@ -1,10 +1,3 @@
 import type { MediaProviderOption } from './types.js';
-/**
- * A small, vendor-shaped starting catalog — same convention as `execution/constants.ts`'s
- * `DEFAULT_PROVIDER_PRESETS`. Sourced by driving Open Design's own Settings → Media providers
- * panel directly (Playwright) and transcribing its real provider list, base URLs, and default
- * models. Pass your own `catalog` to `MediaProvidersTab` to replace this wholesale; Zana or any
- * other host is expected to do so once it has its own provider roster.
- */
 export declare const DEFAULT_MEDIA_PROVIDER_CATALOG: readonly MediaProviderOption[];
 //# sourceMappingURL=constants.d.ts.map

package/dist/features/media-providers/constants.js

@@ -1,3 +1,4 @@
+import { findProvider, canonicalMediaProviderId } from '@jini-ai/integrations/media-providers/catalog';
 /**
  * A small, vendor-shaped starting catalog — same convention as `execution/constants.ts`'s
  * `DEFAULT_PROVIDER_PRESETS`. Sourced by driving Open Design's own Settings → Media providers
@@ -5,17 +6,15 @@
  * models. Pass your own `catalog` to `MediaProvidersTab` to replace this wholesale; Zana or any
  * other host is expected to do so once it has its own provider roster.
  */
-export const DEFAULT_MEDIA_PROVIDER_CATALOG = [
+const starterCatalog = [
     {
         id: 'nano-banana',
         label: 'Nano Banana',
-        defaultBaseUrl: 'https://generativelanguage.googleapis.com',
         models: ['gemini-3.1-flash-image-preview'],
     },
     {
         id: 'aihubmix',
         label: 'AIHubMix',
-        defaultBaseUrl: 'https://aihubmix.com/v1',
         models: ['gemini-3.1-flash-image-preview'],
     },
     {
@@ -26,65 +25,58 @@ export const DEFAULT_MEDIA_PROVIDER_CATALOG = [
     {
         id: 'elevenlabs',
         label: 'ElevenLabs',
-        defaultBaseUrl: 'https://api.elevenlabs.io',
     },
     {
         id: 'fal-ai',
         label: 'Fal.ai',
-        defaultBaseUrl: 'https://fal.run',
         models: ['gemini-3.1-flash-image-preview'],
     },
     {
         id: 'fishaudio',
         label: 'FishAudio',
-        defaultBaseUrl: 'https://api.fish.audio',
     },
     {
         id: 'imagerouter',
         label: 'ImageRouter',
-        defaultBaseUrl: 'https://api.imagerouter.io/v1/openai',
         models: ['gemini-3.1-flash-image-preview'],
     },
     {
         id: 'leonardo-ai',
         label: 'Leonardo.ai',
-        defaultBaseUrl: 'https://cloud.leonardo.ai/api/rest/v1',
     },
     {
         id: 'minimax',
         label: 'MiniMax',
-        defaultBaseUrl: 'https://api.minimaxi.chat/v1',
     },
     {
         id: 'openai',
         label: 'OpenAI',
-        defaultBaseUrl: 'https://api.openai.com/v1',
         models: ['gpt-image-2', 'dall-e-3'],
     },
     {
         id: 'openrouter',
         label: 'OpenRouter',
-        defaultBaseUrl: 'https://openrouter.ai/api/v1',
     },
     {
         id: 'senseaudio',
         label: 'SenseAudio',
-        defaultBaseUrl: 'https://api.senseaudio.cn',
     },
     {
         id: 'tavily-search',
         label: 'Tavily Search',
-        defaultBaseUrl: 'https://api.tavily.com',
     },
     {
         id: 'volcengine-ark',
         label: 'Volcengine Ark (Doubao)',
-        defaultBaseUrl: 'https://ark.cn-beijing.volces.com/api/v3',
     },
     {
         id: 'xai-grok-imagine',
         label: 'xAI Grok Imagine',
-        defaultBaseUrl: 'https://api.x.ai/v1',
     },
 ];
+export const DEFAULT_MEDIA_PROVIDER_CATALOG = starterCatalog.map((entry) => {
+    const id = canonicalMediaProviderId({ id: entry.id });
+    const provider = findProvider({ id });
+    return { ...entry, id, label: provider.label, ...(provider.defaultBaseUrl ? { defaultBaseUrl: provider.defaultBaseUrl } : {}) };
+});
 //# sourceMappingURL=constants.js.map

package/dist/features/media-providers/react/components/MediaProvidersTab.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canonicalMediaProviderId } from '@jini-ai/integrations/media-providers/catalog';
 import { Fragment, useState } from 'react';
 import { agentHandleProps, buildAgentListHandles } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
@@ -55,7 +56,7 @@ export function MediaProvidersTab({ port, catalog = DEFAULT_MEDIA_PROVIDER_CATAL
             return next;
         });
     };
-    const orderedCatalog = sortProvidersByConfigured(catalog, providers, pinnedProviderIds);
+    const orderedCatalog = sortProvidersByConfigured(catalog.map((entry) => ({ ...entry, id: canonicalMediaProviderId({ id: entry.id }) })), providers, pinnedProviderIds?.map((id) => canonicalMediaProviderId({ id })));
     const providerHandles = agentHandle
         ? buildAgentListHandles({ prefix: agentHandle, ids: orderedCatalog.map((option) => option.id) })
         : undefined;
@@ -63,7 +64,7 @@ export function MediaProvidersTab({ port, catalog = DEFAULT_MEDIA_PROVIDER_CATAL
     // pinned id absent from `catalog` never appears in `orderedCatalog` either (see
     // `sortProvidersByConfigured`'s own "silently skipped" doc), so this stays correct without
     // re-deriving which pinned ids actually resolved to a real card.
-    const pinnedIdSet = new Set(pinnedProviderIds ?? []);
+    const pinnedIdSet = new Set(pinnedProviderIds?.map((id) => canonicalMediaProviderId({ id })) ?? []);
     const hasPendingChanges = pendingProviderIds.size > 0;
     // Save writes every provider at once, so ONE unacceptable endpoint blocks the
     // whole button rather than being silently persisted alongside the good ones.

package/dist/features/media-providers/react/hooks/useMediaProvidersTab.js

@@ -1,3 +1,4 @@
+import { normalizeMediaProviderMap, canonicalMediaProviderId } from '@jini-ai/integrations/media-providers/catalog';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { hasAnyConfiguredProvider, isEntryEmpty, mergeDaemonProviders, shouldSyncLocalProvidersToDaemon, } from '../../rules.js';
 /**
@@ -18,7 +19,7 @@ import { hasAnyConfiguredProvider, isEntryEmpty, mergeDaemonProviders, shouldSyn
  * server manages nothing" and silently wipe local edits.
  */
 export function useMediaProvidersTab({ port, initialProviders }) {
-    const [providers, setProviders] = useState(() => ({ ...(initialProviders ?? {}) }));
+    const [providers, setProviders] = useState(() => normalizeMediaProviderMap({ providers: initialProviders ?? {} }));
     const [pendingProviderIds, setPendingProviderIds] = useState(() => new Set());
     const [load, setLoad] = useState({ status: 'loading' });
     const [save, setSave] = useState({ status: 'idle' });
@@ -113,7 +114,7 @@ export function useMediaProvidersTab({ port, initialProviders }) {
                 if (!touched.has(providerId))
                     clearedProviderIds.current.delete(providerId);
             }
-            const next = { ...saved };
+            const next = normalizeMediaProviderMap({ providers: saved });
             for (const providerId of touched) {
                 const local = providersRef.current[providerId];
                 if (local === undefined)
@@ -205,7 +206,7 @@ export function useMediaProvidersTab({ port, initialProviders }) {
                 setLoad({ status: 'unreachable' });
                 return;
             }
-            const merged = mergeDaemonProviders(providersRef.current, daemonResult, {
+            const merged = mergeDaemonProviders(providersRef.current, normalizeMediaProviderMap({ providers: daemonResult }), {
                 preserveLocalProviderIds: pendingRef.current,
                 dropProviderIds: clearedProviderIds.current,
             });
@@ -226,6 +227,7 @@ export function useMediaProvidersTab({ port, initialProviders }) {
         fetchAndReconcile(false);
     }, [fetchAndReconcile]);
     const updateProvider = useCallback((providerId, patch) => {
+        providerId = canonicalMediaProviderId({ id: providerId });
         const current = providersRef.current;
         const nextEntry = { ...(current[providerId] ?? {}), ...patch };
         const nextMap = { ...current };
@@ -242,6 +244,7 @@ export function useMediaProvidersTab({ port, initialProviders }) {
         mutatedSinceSend.current.add(providerId);
     }, [applyProviders, applyPending]);
     const clearProvider = useCallback((providerId) => {
+        providerId = canonicalMediaProviderId({ id: providerId });
         void (async () => {
             const previousEntry = providersRef.current[providerId];
             const next = { ...providersRef.current };

package/dist/features/memory/dependencies.d.ts

@@ -9,6 +9,7 @@ export declare function createMemoryHttpPorts(_required: Record<string, never>,
     entries: MemoryEntriesPort;
     extractions: MemoryExtractionsPort;
 };
+/** @deprecated Explicit legacy REST binding. Host UI composition must use MemoryPortsProvider. */
 export declare const memoryConfigPort: MemoryConfigPort, memoryEntriesPort: MemoryEntriesPort, memoryExtractionsPort: MemoryExtractionsPort;
 /** Standalone default read shares the entries port's validated REST implementation. */
 export declare const fetchMemoryList: () => Promise<MemoryListResponse>;
@@ -25,5 +26,6 @@ export interface FakeMemoryConnectorsPortOptions {
  * above — only the connector catalogue/status/suggest transport is faked.
  */
 export declare function createFakeMemoryConnectorsPort(options?: FakeMemoryConnectorsPortOptions): MemoryConnectorsPort;
+/** @deprecated Demo catalogue; hosts supply their own connectors port through MemoryPortsProvider. */
 export declare const memoryConnectorsPort: MemoryConnectorsPort;
 //# sourceMappingURL=dependencies.d.ts.map

package/dist/features/memory/dependencies.js

@@ -1,29 +1,11 @@
 /**
- * The only file in this feature allowed to touch a concrete transport
- * adapter. Everything else in the slice depends on `ports.ts`.
- *
- * Split, deliberately, into two different defaults:
- *
- * - `memoryConfigPort`/`memoryEntriesPort`/`memoryExtractionsPort` bind REAL
- *   `fetch`-based adapters against a plain `/api/memory*` REST surface (list/
- *   tree/entry CRUD, config PATCH, extraction history CRUD). Unlike
- *   `features/connectors`' data port — which fakes its transport by design,
- *   because the real one is a specific third-party OAuth-catalog vendor's
- *   API shape — this is a generic JSON/REST contract with no vendor coupling,
- *   and the pinned source's one open bug (`fetchMemoryList()` trusting an
- *   under-validated response — see the fix below and
- *   `packages/ui/archived provenance ledger`) only exists to fix in a real, testable
- *   adapter. A host is still free to supply its own binding; this default
- *   just isn't a fake.
- * - `memoryConnectorsPort` binds a fake/in-memory connector catalogue (same
- *   reasoning as `features/connectors`' own fake — the real catalogue is a
- *   vendor-specific OAuth discovery transport this package doesn't assume),
- *   plus REAL browser-only bridges for the two pieces that touch only
- *   generic browser APIs: pending-authorization persistence (sessionStorage)
- *   and the cross-tab "connectors changed" signal (a `CustomEvent`).
- *   `saveMemoryEntry` on this port is the same real HTTP adapter the entries
- *   cluster uses — saving a connector suggestion is an ordinary memory write,
- *   not a connector-transport concern.
+ * Explicit legacy/test transport bindings; Memory's wired hooks never select them implicitly.
+ * Production hosts supply MemoryPortsProvider with authorized config/entries/extractions and
+ * connector ports. createMemoryHttpPorts binds a host-selected REST contract; exported singletons
+ * retain the old /api/memory* paths for compatibility only. memoryConnectorsPort is a demo catalogue
+ * with sessionStorage/CustomEvent bridges and real REST memory writes, not production discovery.
+ * Removal plan: migrate singleton consumers to host factories/providers, then remove deprecated
+ * defaults in an owner-approved breaking release. Do not silently turn a demo into a live port.
  */
 import { requestWithTimeout } from '../../utils/browser-request.js';
 import { DEFAULT_CONNECTOR_PROVIDER, MEMORY_CONNECTOR_PENDING_AUTH_STORAGE_KEY, } from './constants.js';
@@ -163,6 +145,7 @@ export function createMemoryHttpPorts(_required, { fetch } = {}) {
     };
     return { config: memoryConfigPort, entries: memoryEntriesPort, extractions: memoryExtractionsPort };
 }
+/** @deprecated Explicit legacy REST binding. Host UI composition must use MemoryPortsProvider. */
 export const { config: memoryConfigPort, entries: memoryEntriesPort, extractions: memoryExtractionsPort } = createMemoryHttpPorts({});
 /** Standalone default read shares the entries port's validated REST implementation. */
 export const fetchMemoryList = memoryEntriesPort.fetchMemoryList;
@@ -251,5 +234,6 @@ function notifyConnectorsChanged() {
         return;
     window.dispatchEvent(new CustomEvent(CONNECTORS_CHANGED_EVENT));
 }
+/** @deprecated Demo catalogue; hosts supply their own connectors port through MemoryPortsProvider. */
 export const memoryConnectorsPort = createFakeMemoryConnectorsPort();
 //# sourceMappingURL=dependencies.js.map

package/dist/features/memory/index.d.ts

@@ -1,3 +1,4 @@
+export { MemoryPortsProvider, useMemoryPorts, type MemoryPorts } from './react/MemoryPorts.js';
 export { FIELD_LABEL_STYLE } from './react/styles.js';
 export { type AsyncCommitGuard, createAsyncCommitGuard } from './async-commit-guard.js';
 export { CONNECTOR_CALLBACK_MESSAGE_TYPE, connectorAppLabel, DEFAULT_CONNECTOR_PROVIDER, EMPTY_DRAFT, MEMORY_CONNECTOR_APP_IDS, MEMORY_CONNECTOR_APP_LABELS, MEMORY_CONNECTOR_PENDING_AUTH_STORAGE_KEY, STARTERS, TYPES, } from './constants.js';

package/dist/features/memory/index.js

@@ -1,3 +1,4 @@
+export { MemoryPortsProvider, useMemoryPorts } from './react/MemoryPorts.js';
 export { FIELD_LABEL_STYLE } from './react/styles.js';
 export { createAsyncCommitGuard } from './async-commit-guard.js';
 export { CONNECTOR_CALLBACK_MESSAGE_TYPE, connectorAppLabel, DEFAULT_CONNECTOR_PROVIDER, EMPTY_DRAFT, MEMORY_CONNECTOR_APP_IDS, MEMORY_CONNECTOR_APP_LABELS, MEMORY_CONNECTOR_PENDING_AUTH_STORAGE_KEY, STARTERS, TYPES, } from './constants.js';

package/dist/features/memory/react/MemoryPorts.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { MemoryConfigPort, MemoryConnectorsPort, MemoryEntriesPort, MemoryExtractionsPort } from '../ports.js';
+/** Hosts own authentication, endpoint paths and connector discovery; memory UI owns no transport. */
+export interface MemoryPorts {
+    config: MemoryConfigPort;
+    entries: MemoryEntriesPort;
+    extractions: MemoryExtractionsPort;
+    connectors: MemoryConnectorsPort;
+}
+/** Bind one host's memory services to its subtree. Independent hosts never share these ports. */
+export declare function MemoryPortsProvider({ ports, children }: {
+    ports: MemoryPorts;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Fail at composition when no host was bound, before a hook can attempt network I/O. */
+export declare function useMemoryPorts(_required?: Record<string, never>, _optional?: Record<string, never>): MemoryPorts;
+//# sourceMappingURL=MemoryPorts.d.ts.map

package/dist/features/memory/react/MemoryPorts.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const MemoryPortsContext = createContext(null);
+/** Bind one host's memory services to its subtree. Independent hosts never share these ports. */
+export function MemoryPortsProvider({ ports, children }) {
+    return _jsx(MemoryPortsContext.Provider, { value: ports, children: children });
+}
+/** Fail at composition when no host was bound, before a hook can attempt network I/O. */
+export function useMemoryPorts(_required = {}, _optional = {}) {
+    const ports = useContext(MemoryPortsContext);
+    if (!ports)
+        throw new Error('Memory hooks require MemoryPortsProvider');
+    return ports;
+}
+//# sourceMappingURL=MemoryPorts.js.map

package/dist/features/memory/react/hooks/useMemoryConfig.hooks.d.ts

@@ -22,8 +22,8 @@ export interface MemoryConfigController {
 }
 export declare function useMemoryConfig(port: MemoryConfigPort): MemoryConfigController;
 /**
- * Wirer: binds the real provider port and returns a ready-to-call hook. This is
- * the default a host injects; swap it via the component prop in tests.
+ * Reads the host-injected config port from MemoryPortsProvider (required).
+ * Hosts own authorization/transport; tests may inject a fake into useMemoryConfig.
  */
 export declare function useWiredMemoryConfig(): MemoryConfigController;
 //# sourceMappingURL=useMemoryConfig.hooks.d.ts.map

package/dist/features/memory/react/hooks/useMemoryConfig.hooks.js

@@ -8,13 +8,13 @@
 //     mocks, no global `fetch` stub.
 //   - business logic (the pure `rules`) is imported directly; only the
 //     side-effecting transport is injected.
-//   - `useWiredMemoryConfig()` (the wirer, bottom of file) binds the real
-//     provider port and is the default a host injects, so production callers
-//     pass nothing while tests swap the whole hook.
+//   - useWiredMemoryConfig() (below) reads the host-injected config port from
+//     MemoryPortsProvider. Production hosts must mount that provider; tests inject
+//     a fake port directly or swap the hook. There is no implicit REST fallback.
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { createAsyncCommitGuard } from '../../async-commit-guard.js';
 import { enabledPatch, singleFlagPatch } from '../../rules.js';
-import { memoryConfigPort } from '../../dependencies.js';
+import { useMemoryPorts } from '../MemoryPorts.js';
 const CONFIG_SAVE_ERROR_MESSAGE = "Memory settings couldn't be saved. Try again shortly.";
 function newConfigWriteQueue() {
     return { inFlight: false, pending: null };
@@ -210,10 +210,10 @@ export function useMemoryConfig(port) {
     };
 }
 /**
- * Wirer: binds the real provider port and returns a ready-to-call hook. This is
- * the default a host injects; swap it via the component prop in tests.
+ * Reads the host-injected config port from MemoryPortsProvider (required).
+ * Hosts own authorization/transport; tests may inject a fake into useMemoryConfig.
  */
 export function useWiredMemoryConfig() {
-    return useMemoryConfig(memoryConfigPort);
+    return useMemoryConfig(useMemoryPorts().config);
 }
 //# sourceMappingURL=useMemoryConfig.hooks.js.map

package/dist/features/memory/react/hooks/useMemoryConnectors.hooks.d.ts

@@ -91,9 +91,8 @@ export declare function applyMemoryConnectorConnectResult({ connectorId, result,
 }): boolean;
 export declare function useMemoryConnectors(port: MemoryConnectorsPort, coord: MemoryConnectorsCoordination): MemoryConnectorsController;
 /**
- * Wirer: binds the real connectors transport + OAuth bridges and returns a
- * hook that still takes a host's runtime coordination. The default a host
- * injects; swap it via the component prop in tests.
+ * Reads the host-injected connector catalogue/OAuth bridges from MemoryPortsProvider
+ * (required), retaining runtime coordination. The deprecated demo catalogue is never a fallback.
  */
 export declare function useWiredMemoryConnectors(coord: MemoryConnectorsCoordination): MemoryConnectorsController;
 //# sourceMappingURL=useMemoryConnectors.hooks.d.ts.map

package/dist/features/memory/react/hooks/useMemoryConnectors.hooks.js

@@ -38,7 +38,7 @@ import { createAsyncCommitGuard } from '../../async-commit-guard.js';
 import { DEFAULT_CONNECTOR_PROVIDER, MEMORY_CONNECTOR_APP_IDS, MEMORY_CONNECTOR_APP_LABELS, } from '../../constants.js';
 import { describeExtractionFailure } from '../../formatters.js';
 import { applyMemoryConnectorStatus, connectorWithPendingAuthorization, memoryEntryIdForConnectorSuggestion, upsertMemoryConnector, } from '../../rules.js';
-import { memoryConnectorsPort } from '../../dependencies.js';
+import { useMemoryPorts } from '../MemoryPorts.js';
 import { describeConnectorSuggestionOutcome, describeConnectorSuggestionsSaveOutcome, isRecentFailedConnectorExtraction, withoutKey, withoutSetMember, } from './useMemoryConnectors.rules.js';
 /** `onSaveConnectorSuggestions`'s save loop, isolated: writes each selected
  *  suggestion as a memory entry in order, collecting which ones landed and
@@ -507,11 +507,10 @@ export function useMemoryConnectors(port, coord) {
     };
 }
 /**
- * Wirer: binds the real connectors transport + OAuth bridges and returns a
- * hook that still takes a host's runtime coordination. The default a host
- * injects; swap it via the component prop in tests.
+ * Reads the host-injected connector catalogue/OAuth bridges from MemoryPortsProvider
+ * (required), retaining runtime coordination. The deprecated demo catalogue is never a fallback.
  */
 export function useWiredMemoryConnectors(coord) {
-    return useMemoryConnectors(memoryConnectorsPort, coord);
+    return useMemoryConnectors(useMemoryPorts().connectors, coord);
 }
 //# sourceMappingURL=useMemoryConnectors.hooks.js.map

package/dist/features/memory/react/hooks/useMemoryEntries.hooks.d.ts

@@ -44,9 +44,8 @@ export interface MemoryEntriesController {
 }
 export declare function useMemoryEntries(port: MemoryEntriesPort, coord: MemoryEntriesCoordination): MemoryEntriesController;
 /**
- * Wirer: binds the real entries transport and returns a hook that still takes
- * a host's runtime coordination. The default a host injects; swap it via the
- * component prop in tests.
+ * Reads the host-injected entries port from MemoryPortsProvider (required),
+ * retaining the host's runtime coordination. No /api/memory* transport is chosen implicitly.
  */
 export declare function useWiredMemoryEntries(coord: MemoryEntriesCoordination): MemoryEntriesController;
 //# sourceMappingURL=useMemoryEntries.hooks.d.ts.map

package/dist/features/memory/react/hooks/useMemoryEntries.hooks.js

@@ -10,7 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { copyToClipboard } from '../../../../utils/copy-to-clipboard.js';
 import { createAsyncCommitGuard } from '../../async-commit-guard.js';
 import { EMPTY_DRAFT } from '../../constants.js';
-import { memoryEntriesPort } from '../../dependencies.js';
+import { useMemoryPorts } from '../MemoryPorts.js';
 const LOAD_ERROR_MESSAGE = "Memory data couldn't be loaded. Try again shortly.";
 const MUTATION_ERROR_MESSAGE = "Memory changes couldn't be saved. Try again shortly.";
 export function useMemoryEntries(port, coord) {
@@ -331,11 +331,10 @@ export function useMemoryEntries(port, coord) {
     };
 }
 /**
- * Wirer: binds the real entries transport and returns a hook that still takes
- * a host's runtime coordination. The default a host injects; swap it via the
- * component prop in tests.
+ * Reads the host-injected entries port from MemoryPortsProvider (required),
+ * retaining the host's runtime coordination. No /api/memory* transport is chosen implicitly.
  */
 export function useWiredMemoryEntries(coord) {
-    return useMemoryEntries(memoryEntriesPort, coord);
+    return useMemoryEntries(useMemoryPorts().entries, coord);
 }
 //# sourceMappingURL=useMemoryEntries.hooks.js.map

package/dist/features/memory/react/hooks/useMemoryExtractions.hooks.js

@@ -13,7 +13,7 @@
 // store's synchronous transitions to React state.
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createAsyncCommitGuard } from '../../async-commit-guard.js';
-import { memoryExtractionsPort } from '../../dependencies.js';
+import { useMemoryPorts } from '../MemoryPorts.js';
 import { createExtractionHistoryStore } from './useMemoryExtractions.store.js';
 const LOAD_ERROR_MESSAGE = "Memory extraction history couldn't be loaded. Try again shortly.";
 const MUTATION_ERROR_MESSAGE = "Memory extraction history couldn't be updated. Try again shortly.";
@@ -176,6 +176,6 @@ export function useMemoryExtractions(port) {
     };
 }
 export function useWiredMemoryExtractions() {
-    return useMemoryExtractions(memoryExtractionsPort);
+    return useMemoryExtractions(useMemoryPorts().extractions);
 }
 //# sourceMappingURL=useMemoryExtractions.hooks.js.map

package/dist/features/panel-kit/fetch-query/adapter.react.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import { type FetchQueryEnvironmentPort } from './cache.js';
-import type { CachedLoader, CachedLoaderOptions, FetchMutationOptions, FetchQueryOptions, MutationResult, QueryKey, QueryResult } from './types.js';
+import { type FetchQueryEnvironmentPort } from '@jini-ai/core/fetch';
+import type { CachedLoader, CachedLoaderOptions, FetchMutationOptions, FetchQueryOptions, MutationResult, QueryKey, QueryResult } from '@jini-ai/core/fetch';
 /** Isolated cache scope; no external provider or query-library singleton is needed. */
 export declare function FetchQueryProvider({ children, environment }: {
     children: ReactNode;

package/dist/features/panel-kit/fetch-query/adapter.react.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
-import { DEFAULT_STALE_TIME, FetchQueryCache, toQueryError } from './cache.js';
+import { DEFAULT_STALE_TIME, FetchQueryCache, toQueryError } from '@jini-ai/core/fetch';
 import { browserFetchQueryEnvironment } from './environment.browser.js';
 import { FetchQueryBinding } from './binding.react.js';
 const CacheContext = createContext(null);
@@ -109,7 +109,7 @@ export function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME
     const cache = useCache();
     return useMemo(() => ({
         peek: () => cache.entry({ key: key }, { staleTime: staleTime }).state.data,
-        load: () => cache.load({ entry: cache.entry({ key: key }, { staleTime: staleTime }), fetch: fetch, staleTime: staleTime }),
+        load: (required = { key, fetch }) => cache.load({ entry: cache.entry({ key: required.key }, { staleTime }), fetch: required.fetch, staleTime }),
         replace: ({ value }) => cache.replace({ entry: cache.entry({ key: key }, { staleTime: staleTime }), data: value }),
     }), [cache, key, fetch, staleTime]);
 }

package/dist/features/panel-kit/fetch-query/adapter.tanstack.d.ts

@@ -1,6 +1,6 @@
 /** Optional TanStack translation layer. No library types escape the fetch-query contract. */
 import { type ReactNode } from 'react';
-import { type FetchQueryEnvironmentPort } from './cache.js';
+import { type FetchQueryEnvironmentPort } from '@jini-ai/core/fetch';
 /** Provider-owned TanStack cache and binding, compatible with hooks from the default entry.
  * @example <FetchQueryProvider><ResourceScreen /></FetchQueryProvider>
  * @param props Children and optional host connectivity/focus port. */