@jini-ai/ui 0.5.4 → 0.5.6

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

@@ -110,43 +110,47 @@ function confirmationActions(spec) {
         actions.push({ id: 'cancel', label: spec.cancel.label, variant: 'neutral' });
     return actions;
 }
-export function renderConfirmationDocument(spec) {
-    const text = { ...DEFAULT_SURFACE_STATUS_TEXT, ...spec.text };
-    const choicesParam = spec.choicesParam ?? 'overwrite';
-    // The ticked ids are merged into confirm.params at click time; a key already there (the token,
-    // say) would be silently replaced by an array.
-    if ((spec.choices ?? []).length > 0 && Object.prototype.hasOwnProperty.call(spec.confirm.params, choicesParam)) {
+/** The ticked ids are merged into confirm.params at click time; a key already there (the token,
+ * say) would be silently replaced by an array.
+ * @complexity O(a) in the alternative count. @throws Error naming the colliding param (and alternative). */
+function assertChoicesParamFree(spec, required) {
+    const { choicesParam } = required;
+    if ((spec.choices ?? []).length === 0)
+        return;
+    if (Object.prototype.hasOwnProperty.call(spec.confirm.params, choicesParam)) {
         throw new Error(`choicesParam ${JSON.stringify(choicesParam)} collides with a key already in confirm.params.`);
     }
-    for (const alternative of (spec.choices ?? []).length > 0 ? (spec.alternatives ?? []) : []) {
+    for (const alternative of spec.alternatives ?? []) {
         if (Object.prototype.hasOwnProperty.call(alternative.params, choicesParam)) {
             throw new Error(`choicesParam ${JSON.stringify(choicesParam)} collides with a key already in the params of alternative ${JSON.stringify(alternative.id)}.`);
         }
     }
-    const alternatives = spec.alternatives ?? [];
-    assertAlternativeIds(alternatives);
-    const actions = confirmationActions(spec);
-    // Every affirmative button starts disabled and waits out the dwell; only cancel is live at once.
-    const affirmative = new Set(['confirm', ...alternatives.map((alternative) => alternative.id)]);
+}
+/** Header, context, choices, warning, actions and the status region. @complexity O(n) in the rendered length. */
+function confirmationBodyHtml(spec, required) {
+    const { affirmative } = required;
     const warning = spec.warning === undefined ? '' : `<p class="mcpui-warning">${escapeHtml(spec.warning)}</p>`;
-    const bodyHtml = [
+    return [
         renderSurfaceHeader(spec.description === undefined ? { title: spec.title } : { title: spec.title, description: spec.description }),
         renderDetailList(spec.details ?? []),
         renderChoices(spec.choices ?? []),
         warning,
         // Confirm starts disabled; the script enables it once the dwell has run out.
-        renderActions(actions.map((action) => (affirmative.has(action.id) ? { ...action, disabled: true } : action))),
+        renderActions(confirmationActions(spec).map((action) => (affirmative.has(action.id) ? { ...action, disabled: true } : action))),
         renderStatusRegion(),
     ]
         .filter((fragment) => fragment !== '')
         .join('\n');
-    // A map from button id to what that button does. `null` means "dismiss locally, call nothing" —
-    // the shape a cancel-without-a-tool takes, kept as an explicit null rather than an absent key so
-    // the script can tell "this button dismisses" from "this button is unknown to me".
+}
+/** A map from button id to what that button does. `null` means "dismiss locally, call nothing" —
+ * the shape a cancel-without-a-tool takes, kept as an explicit null rather than an absent key so
+ * the script can tell "this button dismisses" from "this button is unknown to me".
+ * @complexity O(a) in the alternative count. */
+function confirmationPlan(spec, required) {
     const plan = {
         confirm: { toolName: spec.confirm.toolName, params: spec.confirm.params },
     };
-    for (const alternative of alternatives) {
+    for (const alternative of required.alternatives) {
         plan[alternative.id] = { toolName: alternative.toolName, params: alternative.params };
     }
     if (spec.cancel !== undefined) {
@@ -154,7 +158,12 @@ export function renderConfirmationDocument(spec) {
             ? { toolName: spec.cancel.toolName, params: spec.cancel.params }
             : null;
     }
-    const script = `(function () {
+    return plan;
+}
+/** The inline runtime script: dwell, visibility, locking and tool calls. @complexity O(s) in the script length. */
+function confirmationScript(required) {
+    const { plan, text, choicesParam, affirmative } = required;
+    return `(function () {
   "use strict";
 ${SURFACE_SCRIPT_PRELUDE}
   var PLAN = ${escapeJsValue(plan)};
@@ -303,10 +312,19 @@ ${SURFACE_SCRIPT_PRELUDE}
     });
   }
 }());`;
+}
+export function renderConfirmationDocument(spec) {
+    const text = { ...DEFAULT_SURFACE_STATUS_TEXT, ...spec.text };
+    const choicesParam = spec.choicesParam ?? 'overwrite';
+    assertChoicesParamFree(spec, { choicesParam });
+    const alternatives = spec.alternatives ?? [];
+    assertAlternativeIds(alternatives);
+    // Every affirmative button starts disabled and waits out the dwell; only cancel is live at once.
+    const affirmative = new Set(['confirm', ...alternatives.map((alternative) => alternative.id)]);
     return renderSurfaceDocument({
         title: spec.title,
-        bodyHtml,
-        script,
+        bodyHtml: confirmationBodyHtml(spec, { affirmative }),
+        script: confirmationScript({ plan: confirmationPlan(spec, { alternatives }), text, choicesParam, affirmative }),
         app: spec.app ?? DEFAULT_APP,
         ...(spec.lang === undefined ? {} : { lang: spec.lang }),
         ...(spec.tokens === undefined ? {} : { tokens: spec.tokens }),

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-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); }";
+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/* fit-content(40%), not max-content: one long label used to take the whole row and squeeze every\n   value to one character per line. Labels wrap at 40% instead. */\n.mcpui-details {\n  display: grid;\n  grid-template-columns: fit-content(40%) 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; overflow-wrap: anywhere; }\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/* Frames up to 480px: stack each label above its value so the value gets the full width.\n   Outcome lists keep their own row layout. */\n@media (max-width: 480px) {\n  .mcpui-details:not(.mcpui-details-outcome) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }\n  .mcpui-details:not(.mcpui-details-outcome) dd { margin-bottom: 8px; }\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

@@ -59,13 +59,15 @@ body {
   color: var(--jini-mcpui-text-strong);
 }
 .mcpui-description { margin: 6px 0 0; color: var(--jini-mcpui-text-muted); }
+/* fit-content(40%), not max-content: one long label used to take the whole row and squeeze every
+   value to one character per line. Labels wrap at 40% instead. */
 .mcpui-details {
   display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
+  grid-template-columns: fit-content(40%) minmax(0, 1fr);
   gap: 4px 14px;
   margin: 14px 0 0;
 }
-.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; }
+.mcpui-details dt { color: var(--jini-mcpui-text-soft); font-weight: 500; overflow-wrap: anywhere; }
 .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; }
@@ -77,6 +79,12 @@ body {
 .mcpui-outcome-row dd.mcpui-detail-status {
   flex: 0 1 auto; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+/* Frames up to 480px: stack each label above its value so the value gets the full width.
+   Outcome lists keep their own row layout. */
+@media (max-width: 480px) {
+  .mcpui-details:not(.mcpui-details-outcome) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
+  .mcpui-details:not(.mcpui-details-outcome) dd { margin-bottom: 8px; }
+}
 /* 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) {

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

@@ -18,15 +18,32 @@ import { renderCheckbox } from './checkbox.js';
 import { renderChoiceGroup } from './choice-group.js';
 import { renderSelect } from './select.js';
 import { renderTextInput } from './text-input.js';
-/** Only the properties present on a given field are forwarded, because `exactOptionalPropertyTypes` makes `{ hint: undefined }` and `{}` different types. */
+/** The listed properties that are present on `source`, in listed order.
+ * Only the properties present on a given field are forwarded, because `exactOptionalPropertyTypes` makes `{ hint: undefined }` and `{}` different types.
+ * @complexity O(k) in the key count. */
+function present(source, keys) {
+    const picked = {};
+    for (const key of keys) {
+        const value = source[key];
+        if (value !== undefined)
+            picked[key] = value;
+    }
+    return picked;
+}
 function base(field) {
-    return {
-        name: field.name,
-        label: field.label,
-        ...(field.hint === undefined ? {} : { hint: field.hint }),
-        ...(field.required === undefined ? {} : { required: field.required }),
-        ...(field.disabled === undefined ? {} : { disabled: field.disabled }),
-    };
+    return { name: field.name, label: field.label, ...present(field, ['hint', 'required', 'disabled']) };
+}
+/** One-of-N, drawn as radios or a select per {@link EnumField.presentation}. @complexity O(n) in the rendered length. */
+function renderEnumField(field) {
+    if (field.presentation === 'radio') {
+        return renderChoiceGroup({
+            ...base(field),
+            selection: 'single',
+            options: field.options,
+            ...(field.value === undefined ? {} : { value: [field.value] }),
+        });
+    }
+    return renderSelect({ ...base(field), options: field.options, ...present(field, ['value', 'placeholder']) });
 }
 /**
  * Renders the control fragment for one field, dispatching on its kind.
@@ -39,52 +56,15 @@ function base(field) {
 export function renderFieldControl(field, text) {
     switch (field.kind) {
         case 'string':
-            return renderTextInput({
-                ...base(field),
-                ...text,
-                ...(field.value === undefined ? {} : { value: field.value }),
-                ...(field.placeholder === undefined ? {} : { placeholder: field.placeholder }),
-                ...(field.multiline === undefined ? {} : { multiline: field.multiline }),
-                ...(field.rows === undefined ? {} : { rows: field.rows }),
-                ...(field.secret === undefined ? {} : { secret: field.secret }),
-            });
+            return renderTextInput({ ...base(field), ...text, ...present(field, ['value', 'placeholder', 'multiline', 'rows', 'secret']) });
         case 'number':
-            return renderTextInput({
-                ...base(field),
-                inputType: 'number',
-                ...(field.value === undefined ? {} : { value: field.value }),
-                ...(field.placeholder === undefined ? {} : { placeholder: field.placeholder }),
-                ...(field.min === undefined ? {} : { min: field.min }),
-                ...(field.max === undefined ? {} : { max: field.max }),
-                ...(field.step === undefined ? {} : { step: field.step }),
-            });
+            return renderTextInput({ ...base(field), inputType: 'number', ...present(field, ['value', 'placeholder', 'min', 'max', 'step']) });
         case 'boolean':
-            return renderCheckbox({
-                ...base(field),
-                ...(field.value === undefined ? {} : { value: field.value }),
-            });
+            return renderCheckbox({ ...base(field), ...present(field, ['value']) });
         case 'enum':
-            if (field.presentation === 'radio') {
-                return renderChoiceGroup({
-                    ...base(field),
-                    selection: 'single',
-                    options: field.options,
-                    ...(field.value === undefined ? {} : { value: [field.value] }),
-                });
-            }
-            return renderSelect({
-                ...base(field),
-                options: field.options,
-                ...(field.value === undefined ? {} : { value: field.value }),
-                ...(field.placeholder === undefined ? {} : { placeholder: field.placeholder }),
-            });
+            return renderEnumField(field);
         case 'multi-enum':
-            return renderChoiceGroup({
-                ...base(field),
-                selection: 'multiple',
-                options: field.options,
-                ...(field.value === undefined ? {} : { value: field.value }),
-            });
+            return renderChoiceGroup({ ...base(field), selection: 'multiple', options: field.options, ...present(field, ['value']) });
     }
 }
 /** Projects fields down to what the inline script needs, so the generated JS carries no labels, hints, or option lists it will never read. */

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

@@ -42,6 +42,12 @@ export interface FormSurfaceSpec {
     /** Styles the submit button as destructive. */
     readonly danger?: boolean;
     readonly submitLabel: string;
+    /** Alternative submit buttons collect the same fields, with explicit action params. */
+    readonly additionalSubmitActions?: readonly {
+        readonly id: string;
+        readonly label: string;
+        readonly params: Readonly<Record<string, unknown>>;
+    }[];
     /** The tool the collected values are sent to. */
     readonly toolName: string;
     /**

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

@@ -31,51 +31,61 @@ import { DEFAULT_SECRET_INPUT_TEXT } from './text-input.js';
 const DEFAULT_APP = { appName: 'jini-mcp-ui-form', appVersion: '1' };
 /** The form element's id, fixed so the emitted script can find it without a fragile selector. */
 const FORM_ELEMENT_ID = 'mcpui-form';
-/**
- * Renders the form dialog as a complete, self-contained HTML document.
- *
- * @param spec - See {@link FormSurfaceSpec}.
- * @returns The full HTML string.
- * @complexity O(n) in the number of fields plus the rendered length.
- */
-export function renderFormDocument(spec) {
-    // A base param with a secret field's name would leak the same value through the emitted script,
-    // even though the collected value overrides it at submit time. Reject that hidden prefill too.
+/** A base param with a secret field's name would leak the same value through the emitted script,
+ * even though the collected value overrides it at submit time. Reject that hidden prefill too.
+ * @complexity O(n) in the field count. @throws Error with fixed text, never the field name or value. */
+function assertNoSecretBaseParam(spec) {
     for (const field of spec.fields) {
         if (field.kind === 'string' && field.secret === true && spec.baseParams?.[field.name] !== undefined) {
             throw new Error('Secret fields cannot have a pre-filled value. Omit value.');
         }
     }
-    const text = { ...DEFAULT_SURFACE_STATUS_TEXT, ...DEFAULT_SECRET_INPUT_TEXT, ...spec.text };
+}
+/** Submit, any alternative submits, then cancel. @complexity O(a) in the action count. */
+function formActions(spec) {
     // Not `type: 'submit'` — see the runtime script below for why a submit-typed button inside this
     // particular `<form>` cannot work at all in production.
     const actions = [
         { id: 'submit', label: spec.submitLabel, variant: spec.danger === true ? 'danger' : 'primary' },
     ];
+    for (const action of spec.additionalSubmitActions ?? [])
+        actions.push({ id: `submit:${action.id}`, label: action.label, variant: 'neutral' });
     if (spec.cancel !== undefined)
         actions.push({ id: 'cancel', label: spec.cancel.label, variant: 'neutral' });
+    return actions;
+}
+/** Header, context, the `<form>` itself and the status region. @complexity O(n) in the rendered length. */
+function formBodyHtml(spec, text) {
     const controls = spec.fields
         .map((field) => renderFieldControl(field, { showSecret: text.showSecret, hideSecret: text.hideSecret }))
         .join('\n');
     const warning = spec.warning === undefined ? '' : `<p class="mcpui-warning">${escapeHtml(spec.warning)}</p>`;
-    const bodyHtml = [
+    return [
         renderSurfaceHeader(spec.description === undefined ? { title: spec.title } : { title: spec.title, description: spec.description }),
         renderDetailList(spec.details ?? []),
-        `<form id="${FORM_ELEMENT_ID}" novalidate>\n<fieldset class="mcpui-fields">\n${controls}\n</fieldset>\n${warning}\n${renderActions(actions)}\n</form>`,
+        `<form id="${FORM_ELEMENT_ID}" novalidate>\n<fieldset class="mcpui-fields">\n${controls}\n</fieldset>\n${warning}\n${renderActions(formActions(spec))}\n</form>`,
         renderStatusRegion(),
     ]
         .filter((fragment) => fragment !== '')
         .join('\n');
-    const cancelPlan = spec.cancel?.toolName === undefined
+}
+/** The cancel tool call, or null for a cancel that only tears the surface down. @complexity O(1). */
+function cancelPlanOf(spec) {
+    return spec.cancel?.toolName === undefined
         ? null
         : { toolName: spec.cancel.toolName, params: spec.cancel.params ?? {} };
-    const script = `(function () {
+}
+/** The inline runtime script that reads, validates and submits the fields. @complexity O(n) in the field count plus the script length. */
+function formScript(spec, text) {
+    const cancelPlan = cancelPlanOf(spec);
+    return `(function () {
   "use strict";
 ${SURFACE_SCRIPT_PRELUDE}
   var FIELDS = ${escapeJsValue(toFieldReadSpecs(spec.fields))};
   var TOOL = ${escapeJsValue(spec.toolName)};
   var BASE_PARAMS = ${escapeJsValue(spec.baseParams ?? {})};
   var CANCEL = ${escapeJsValue(cancelPlan)};
+  var SUBMIT_ACTIONS = ${escapeJsValue(Object.fromEntries((spec.additionalSubmitActions ?? []).map(action => [`submit:${action.id}`, action.params])))};
   var TEXT = ${escapeJsValue(text)};
   var form = document.getElementById(${escapeJsValue(FORM_ELEMENT_ID)});
 
@@ -186,7 +196,7 @@ ${SURFACE_SCRIPT_PRELUDE}
   // says the dialog is no longer pending, where a retry cannot succeed (see reportCallFailure).
   var pending = false;
 
-  function runSubmit() {
+  function runSubmit(actionParams) {
     if (pending) return;
     var params = {};
     var key;
@@ -201,6 +211,7 @@ ${SURFACE_SCRIPT_PRELUDE}
       setStatus(TEXT.missingPrefix + missing.join(", "), "invalid");
       return;
     }
+    for (key in actionParams) if (Object.prototype.hasOwnProperty.call(actionParams, key)) params[key] = actionParams[key];
     pending = true;
     setBusy(true);
     setStatus(TEXT.working, "pending");
@@ -225,14 +236,14 @@ ${SURFACE_SCRIPT_PRELUDE}
     var type = (target.getAttribute("type") || "text").toLowerCase();
     if (type === "checkbox" || type === "radio") return;
     event.preventDefault();
-    runSubmit();
+    runSubmit({});
   });
 
   for (var b = 0; b < actionButtons.length; b++) {
     var action = actionButtons[b].getAttribute("data-mcpui-action");
-    if (action === "submit") {
+    if (action === "submit" || Object.prototype.hasOwnProperty.call(SUBMIT_ACTIONS, action)) {
       actionButtons[b].addEventListener("click", function (event) {
-        if (event.isTrusted === true) runSubmit();
+        if (event.isTrusted === true) runSubmit(SUBMIT_ACTIONS[event.currentTarget.getAttribute("data-mcpui-action")] || {});
       });
       continue;
     }
@@ -256,10 +267,21 @@ ${SURFACE_SCRIPT_PRELUDE}
     });
   }
 }());`;
+}
+/**
+ * Renders the form dialog as a complete, self-contained HTML document.
+ *
+ * @param spec - See {@link FormSurfaceSpec}.
+ * @returns The full HTML string.
+ * @complexity O(n) in the number of fields plus the rendered length.
+ */
+export function renderFormDocument(spec) {
+    assertNoSecretBaseParam(spec);
+    const text = { ...DEFAULT_SURFACE_STATUS_TEXT, ...DEFAULT_SECRET_INPUT_TEXT, ...spec.text };
     return renderSurfaceDocument({
         title: spec.title,
-        bodyHtml,
-        script,
+        bodyHtml: formBodyHtml(spec, text),
+        script: formScript(spec, text),
         app: spec.app ?? DEFAULT_APP,
         ...(spec.lang === undefined ? {} : { lang: spec.lang }),
         ...(spec.tokens === undefined ? {} : { tokens: spec.tokens }),

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

@@ -48,6 +48,33 @@ import { renderActions, renderDetailList, renderStatusRegion, renderSurfaceDocum
 const DEFAULT_APP = { appName: 'jini-mcp-ui-outcome', appVersion: '1' };
 const DEFAULT_OPEN_LINK_LABEL = 'Open site';
 const OPEN_LINK_ACTION_ID = 'open-link';
+/** The status region's `data-state` for an outcome state. @complexity O(1). */
+function statusStateOf(state) {
+    if (state === 'success')
+        return 'done';
+    return state === 'partial' ? 'partial' : 'failed';
+}
+/** The open-link button, or nothing without a link. @complexity O(n) in the label length. */
+function renderOpenLinkActions(spec) {
+    if (spec.openLinkUrl === undefined)
+        return '';
+    return renderActions([{ id: OPEN_LINK_ACTION_ID, label: spec.openLinkLabel ?? DEFAULT_OPEN_LINK_LABEL, variant: spec.state === 'success' ? 'primary' : 'neutral' }]);
+}
+/** The inline script: wires the open-link button, or nothing at all. @complexity O(n) in the URL length. */
+function outcomeScript(openLinkUrl) {
+    // No prelude at all when there is nothing to wire up — a pure-display result needs no bridge
+    // calls and no `[data-mcpui-action]` scan.
+    if (openLinkUrl === undefined)
+        return '(function () { "use strict"; }());';
+    return `(function () {
+  "use strict";
+${SURFACE_SCRIPT_PRELUDE}
+  var OPEN_URL = ${escapeJsValue(openLinkUrl)};
+  for (var i = 0; i < actionButtons.length; i++) {
+    actionButtons[i].addEventListener("click", function () { api.openLink(OPEN_URL); });
+  }
+}());`;
+}
 /**
  * Renders the outcome document as a complete, self-contained HTML document.
  *
@@ -56,40 +83,23 @@ const OPEN_LINK_ACTION_ID = 'open-link';
  * @complexity O(n) in the rendered length.
  */
 export function renderOutcomeDocument(spec) {
-    const statusState = spec.state === 'success' ? 'done' : spec.state === 'partial' ? 'partial' : 'failed';
     // Rendered directly into the status region rather than left for the script to set — this document
     // has nothing further to wait on (unlike a confirmation, which starts idle and only reaches "done"
     // after a click), so the true outcome should be visible from the FIRST paint, not a moment after
     // the script runs.
-    const statusHtml = `<p class="mcpui-status" id="${SURFACE_STATUS_ELEMENT_ID}" role="status" aria-live="polite" data-state="${statusState}">${escapeHtml(spec.message)}</p>`;
-    const hasOpenLink = spec.openLinkUrl !== undefined;
-    const actionsHtml = hasOpenLink
-        ? renderActions([{ id: OPEN_LINK_ACTION_ID, label: spec.openLinkLabel ?? DEFAULT_OPEN_LINK_LABEL, variant: spec.state === 'success' ? 'primary' : 'neutral' }])
-        : '';
+    const statusHtml = `<p class="mcpui-status" id="${SURFACE_STATUS_ELEMENT_ID}" role="status" aria-live="polite" data-state="${statusStateOf(spec.state)}">${escapeHtml(spec.message)}</p>`;
     const bodyHtml = [
         renderSurfaceHeader(spec.description === undefined ? { title: spec.title } : { title: spec.title, description: spec.description }),
         renderDetailList(spec.details ?? [], { layout: 'outcome' }),
         statusHtml,
-        actionsHtml,
+        renderOpenLinkActions(spec),
     ]
         .filter((fragment) => fragment !== '')
         .join('\n');
-    const script = hasOpenLink
-        ? `(function () {
-  "use strict";
-${SURFACE_SCRIPT_PRELUDE}
-  var OPEN_URL = ${escapeJsValue(spec.openLinkUrl)};
-  for (var i = 0; i < actionButtons.length; i++) {
-    actionButtons[i].addEventListener("click", function () { api.openLink(OPEN_URL); });
-  }
-}());`
-        // No prelude at all when there is nothing to wire up — a pure-display result needs no bridge
-        // calls and no `[data-mcpui-action]` scan.
-        : '(function () { "use strict"; }());';
     return renderSurfaceDocument({
         title: spec.title,
         bodyHtml,
-        script,
+        script: outcomeScript(spec.openLinkUrl),
         app: spec.app ?? DEFAULT_APP,
         ...(spec.lang === undefined ? {} : { lang: spec.lang }),
         ...(spec.tokens === undefined ? {} : { tokens: spec.tokens }),

package/dist/features/mcp-ui/surfaces/text-input.js

@@ -29,6 +29,36 @@ function resolveInputType(props) {
         return 'number';
     return props.secret === true ? 'password' : 'text';
 }
+/** The reveal toggle a multiline secret carries. @complexity O(n) in the label lengths. */
+function renderSecretToggle(props, id) {
+    const showSecret = props.showSecret ?? DEFAULT_SECRET_INPUT_TEXT.showSecret;
+    const hideSecret = props.hideSecret ?? DEFAULT_SECRET_INPUT_TEXT.hideSecret;
+    return `<button type="button" class="mcpui-button" data-mcpui-secret-toggle="${escapeHtml(id)}" data-mcpui-show-secret="${escapeHtml(showSecret)}" data-mcpui-hide-secret="${escapeHtml(hideSecret)}" aria-controls="${escapeHtml(id)}" aria-pressed="false"${booleanAttribute('disabled', props.disabled)}>${escapeHtml(showSecret)}</button>`;
+}
+/** The `<textarea>` control, masked with a reveal toggle when secret. @complexity O(n) in the rendered length. */
+function renderTextarea(props, required) {
+    const secret = props.secret === true;
+    return `<textarea class="mcpui-textarea"${required.common}${optionalAttribute('rows', props.rows)}` +
+        // Password inputs strip line breaks. CSS masking keeps the textarea's actual value intact,
+        // and disables browser text assistance that could retain or alter a pasted credential.
+        (secret ? ' data-mcpui-secret style="-webkit-text-security: disc;" autocomplete="off" spellcheck="false"' : '') +
+        `>${props.value === undefined ? '' : escapeHtml(String(props.value))}</textarea>` +
+        (secret ? renderSecretToggle(props, required.id) : '');
+}
+/** The single-line `<input>` control. @complexity O(n) in the rendered length. */
+function renderInput(props, required) {
+    const { type, common } = required;
+    return `<input class="mcpui-input" type="${type}"${common}` +
+        optionalAttribute('value', props.value) +
+        // A stored secret (e.g. a cloud provider's access key or a database password) must never be
+        // autofilled with a saved website login. `new-password`, not `off`: Chrome ignores `off` on
+        // password inputs by design and fills the saved login anyway.
+        (type === 'password' ? optionalAttribute('autocomplete', 'new-password') : '') +
+        (type === 'number'
+            ? optionalAttribute('min', props.min) + optionalAttribute('max', props.max) + optionalAttribute('step', props.step)
+            : '') +
+        '>';
+}
 /**
  * Renders one free-text field: its label, hint, and control, wrapped in `.mcpui-field`.
  *
@@ -49,27 +79,9 @@ export function renderTextInput(props) {
         booleanAttribute('disabled', props.disabled) +
         fieldDescribedBy(props);
     const type = resolveInputType(props);
-    const isNumber = type === 'number';
-    const secretMultiline = props.secret === true && props.multiline === true && !isNumber;
-    const control = props.multiline === true && !isNumber
-        ? `<textarea class="mcpui-textarea"${common}${optionalAttribute('rows', props.rows)}` +
-            // Password inputs strip line breaks. CSS masking keeps the textarea's actual value intact,
-            // and disables browser text assistance that could retain or alter a pasted credential.
-            (secretMultiline ? ' data-mcpui-secret style="-webkit-text-security: disc;" autocomplete="off" spellcheck="false"' : '') +
-            `>${props.value === undefined ? '' : escapeHtml(String(props.value))}</textarea>` +
-            (secretMultiline
-                ? `<button type="button" class="mcpui-button" data-mcpui-secret-toggle="${escapeHtml(id)}" data-mcpui-show-secret="${escapeHtml(props.showSecret ?? DEFAULT_SECRET_INPUT_TEXT.showSecret)}" data-mcpui-hide-secret="${escapeHtml(props.hideSecret ?? DEFAULT_SECRET_INPUT_TEXT.hideSecret)}" aria-controls="${escapeHtml(id)}" aria-pressed="false"${booleanAttribute('disabled', props.disabled)}>${escapeHtml(props.showSecret ?? DEFAULT_SECRET_INPUT_TEXT.showSecret)}</button>`
-                : '')
-        : `<input class="mcpui-input" type="${type}"${common}` +
-            optionalAttribute('value', props.value) +
-            // A stored secret (e.g. a cloud provider's access key or a database password) must never be
-            // autofilled with a saved website login. `new-password`, not `off`: Chrome ignores `off` on
-            // password inputs by design and fills the saved login anyway.
-            (type === 'password' ? optionalAttribute('autocomplete', 'new-password') : '') +
-            (isNumber
-                ? optionalAttribute('min', props.min) + optionalAttribute('max', props.max) + optionalAttribute('step', props.step)
-                : '') +
-            '>';
+    const control = props.multiline === true && type !== 'number'
+        ? renderTextarea(props, { id, common })
+        : renderInput(props, { type, common });
     return `<div class="mcpui-field">\n${renderFieldLabel(props)}\n${control}\n</div>`;
 }
 //# sourceMappingURL=text-input.js.map

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

@@ -100,7 +100,12 @@ export declare const FORCE_LIGHT_SURFACE_THEME = true;
  * @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.
+ * @param options.forceLight - Defaults to {@link FORCE_LIGHT_SURFACE_THEME}. Exposed so the dark
+ * variant this function still knows how to emit is reachable (and verified) rather than dead code
+ * behind a module constant; every production caller keeps the default.
  * @complexity O(n) in the number of tokens.
  */
-export declare function renderTokenBlock(overrides?: Partial<Record<SurfaceTokenName, string>>): string;
+export declare function renderTokenBlock(overrides?: Partial<Record<SurfaceTokenName, string>>, { forceLight }?: {
+    forceLight?: boolean;
+}): string;
 //# sourceMappingURL=tokens.d.ts.map

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

@@ -148,9 +148,12 @@ export const FORCE_LIGHT_SURFACE_THEME = true;
  * @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.
+ * @param options.forceLight - Defaults to {@link FORCE_LIGHT_SURFACE_THEME}. Exposed so the dark
+ * variant this function still knows how to emit is reachable (and verified) rather than dead code
+ * behind a module constant; every production caller keeps the default.
  * @complexity O(n) in the number of tokens.
  */
-export function renderTokenBlock(overrides = {}) {
+export function renderTokenBlock(overrides = {}, { forceLight = FORCE_LIGHT_SURFACE_THEME } = {}) {
     const declare = (entries) => entries.map(([name, value]) => `  ${name}: ${value};`).join('\n');
     const notOverridden = ([name]) => !(name in overrides);
     const light = declare([
@@ -162,7 +165,7 @@ export function renderTokenBlock(overrides = {}) {
     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)
+    if (forceLight)
         return lightBlock;
     const dark = declare([
         ...Object.entries(SURFACE_TOKENS_DARK).filter(notOverridden),

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

@@ -1,3 +1,4 @@
 import type { MediaProviderOption } from './types.js';
+/** @deprecated Supply a host catalog. The former starter set is exported by integrations/media-providers/catalog. */
 export declare const DEFAULT_MEDIA_PROVIDER_CATALOG: readonly MediaProviderOption[];
 //# sourceMappingURL=constants.d.ts.map