@jini-ai/ui 0.5.5 → 0.6.10

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

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

@@ -1,82 +1,3 @@
-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
- * 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.
- */
-const starterCatalog = [
-    {
-        id: 'nano-banana',
-        label: 'Nano Banana',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'aihubmix',
-        label: 'AIHubMix',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'custom-image-api',
-        label: 'Custom Media API',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'elevenlabs',
-        label: 'ElevenLabs',
-    },
-    {
-        id: 'fal-ai',
-        label: 'Fal.ai',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'fishaudio',
-        label: 'FishAudio',
-    },
-    {
-        id: 'imagerouter',
-        label: 'ImageRouter',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'leonardo-ai',
-        label: 'Leonardo.ai',
-    },
-    {
-        id: 'minimax',
-        label: 'MiniMax',
-    },
-    {
-        id: 'openai',
-        label: 'OpenAI',
-        models: ['gpt-image-2', 'dall-e-3'],
-    },
-    {
-        id: 'openrouter',
-        label: 'OpenRouter',
-    },
-    {
-        id: 'senseaudio',
-        label: 'SenseAudio',
-    },
-    {
-        id: 'tavily-search',
-        label: 'Tavily Search',
-    },
-    {
-        id: 'volcengine-ark',
-        label: 'Volcengine Ark (Doubao)',
-    },
-    {
-        id: 'xai-grok-imagine',
-        label: 'xAI Grok Imagine',
-    },
-];
-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 } : {}) };
-});
+/** @deprecated Supply a host catalog. The former starter set is exported by integrations/media-providers/catalog. */
+export const DEFAULT_MEDIA_PROVIDER_CATALOG = [];
 //# sourceMappingURL=constants.js.map

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

@@ -1,6 +1,6 @@
 export { DEFAULT_MEDIA_PROVIDER_CATALOG } from './constants.js';
 export { createFakeMediaProvidersPort, type FakeMediaProvidersPortOptions } from './dependencies.js';
-export type { MediaProvidersPort } from './ports.js';
+export type { MediaProvidersPort, MediaProviderCatalogPolicy } from './ports.js';
 export { hasAnyConfiguredProvider, hasRecoverableFields, isEntryEmpty, isEntryPresent, isMarkerOnlyEntry, maskedKeyLabel, mergeDaemonProviders, resolveProviderBaseUrl, shouldSyncLocalProvidersToDaemon, sortProvidersByConfigured, isProviderBaseUrlInvalid, invalidBaseUrlProviderIds, } from './rules.js';
 export type { MediaProviderCredentials, MediaProviderMap, MediaProviderOption, MediaProvidersLoadState, MediaProvidersSaveState, } from './types.js';
 export { useMediaProvidersTab } from './react/hooks/useMediaProvidersTab.js';

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

@@ -1,3 +1,5 @@
+/** Catalog policy is UI-owned; the shared contract lives once in core. */
+export type { MediaProviderCatalogPolicy } from '@jini-ai/core';
 import type { MediaProviderMap } from './types.js';
 /**
  * The daemon-side transport this tab needs: reading the server's current

package/dist/features/media-providers/react/components/MediaProviderCard.d.ts

@@ -0,0 +1,22 @@
+import type { I18nContextValue } from '../../../i18n/index.js';
+import type { MediaProviderCredentials, MediaProviderOption } from '../../types.js';
+import type { MediaProviderEditPatch } from '../hooks/useMediaProvidersTab.js';
+import type { ResolvedMediaProvidersTabLabels } from './media-providers-tab-labels.js';
+type Translate = I18nContextValue['t'];
+export interface MediaProviderCardProps {
+    option: MediaProviderOption;
+    entry: MediaProviderCredentials;
+    labels: ResolvedMediaProvidersTabLabels;
+    t: Translate;
+    pending: boolean;
+    keyVisible: boolean;
+    showDividerBefore: boolean;
+    providerHandle: string | undefined;
+    onUpdate: (patch: MediaProviderEditPatch) => void;
+    onClear: () => void;
+    onToggleKeyVisible: () => void;
+}
+/** One provider's credential card: API key, base URL, optional model, clear, and the base-URL hint. */
+export declare function MediaProviderCard(props: MediaProviderCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MediaProviderCard.d.ts.map

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { agentHandleProps } from '@jini-ai/agentic';
+import { Icon } from '../../../../react/components/Icon.js';
+import { isEntryPresent, isMarkerOnlyEntry, isProviderBaseUrlInvalid, maskedKeyLabel, resolveProviderBaseUrl, } from '../../rules.js';
+/** One provider's credential card: API key, base URL, optional model, clear, and the base-URL hint. */
+export function MediaProviderCard(props) {
+    const { option, entry, labels, t, providerHandle, onUpdate } = props;
+    const saved = isMarkerOnlyEntry(entry);
+    // Guaranteed non-null: `isMarkerOnlyEntry` only holds when a server
+    // marker is present, and `maskedKeyLabel` always resolves a string
+    // for exactly that case — see both functions' doc comments.
+    const maskedLabel = saved ? maskedKeyLabel(entry) : null;
+    const fields = { option, entry, labels, providerHandle, onUpdate };
+    return (_jsxs(Fragment, { children: [props.showDividerBefore ? _jsx("hr", { className: "jini-media-provider-divider" }) : null, _jsxs("div", { className: "jini-media-provider-card", children: [_jsx(CardHead, { option: option, labels: labels, t: t, maskedLabel: maskedLabel, pending: props.pending }), _jsxs("div", { className: "jini-media-provider-fields", children: [_jsx(ApiKeyField, { ...fields, maskedLabel: maskedLabel, keyVisible: props.keyVisible, onToggleKeyVisible: props.onToggleKeyVisible }), _jsx(BaseUrlField, { ...fields }), option.models && option.models.length > 0 ? _jsx(ModelField, { ...fields, models: option.models }) : null, _jsx("button", { type: "button", className: "jini-button jini-button-ghost", disabled: !isEntryPresent(entry), "aria-label": `${option.label} ${labels.clearLabel}`, onClick: props.onClear, ...agentHandleProps({}, { base: providerHandle, ...({ action: 'clear', role: 'button', label: `${option.label} ${labels.clearLabel}` }) }), children: labels.clearLabel })] }), _jsx(BaseUrlHint, { entry: entry, option: option, labels: labels, t: t })] })] }));
+}
+function CardHead({ option, labels, t, maskedLabel, pending, }) {
+    // `maskedLabel` is non-null exactly when the entry is marker-only ("saved").
+    const saved = maskedLabel !== null;
+    return (_jsxs("div", { className: "jini-media-provider-card-head", children: [_jsx("strong", { children: option.label }), saved ? (
+            // `maskedLabel` is guaranteed non-null here — see its
+            // definition above — so no fallback is reachable to test.
+            _jsx("span", { className: "jini-field-status-badge jini-field-status-badge-success", children: t(labels.savedWithMaskTemplate, { mask: maskedLabel }) })) : null, !saved && pending ? _jsx("span", { className: "jini-field-status-badge", children: labels.unsavedLabel }) : null] }));
+}
+function ApiKeyField({ option, entry, labels, providerHandle, onUpdate, maskedLabel, keyVisible, onToggleKeyVisible, }) {
+    return (_jsxs("label", { className: "jini-media-provider-field jini-media-provider-field--secret", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: labels.apiKeyLabel }), _jsx("input", { className: "jini-input", type: keyVisible ? 'text' : 'password', 
+                /* `new-password`, NOT `"off"` — Chrome deliberately ignores `off` on
+                   credential-shaped fields, which is how a saved password gets autofilled into
+                   an API-key box. Same defect, same fix, same reasoning as
+                   `ByokProviderForm`'s own API-key input; see its comment. */
+                autoComplete: "new-password", spellCheck: false, placeholder: maskedLabel ?? labels.apiKeyPlaceholder, "aria-label": `${option.label} ${labels.apiKeyLabel}`, value: entry.apiKey ?? '', onChange: (event) => onUpdate({ apiKey: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'api-key', role: 'field', label: `${option.label} ${labels.apiKeyLabel}` }) }) }), _jsx("button", { type: "button", className: "jini-input-affix-btn", "aria-pressed": keyVisible, "aria-label": `${option.label} ${keyVisible ? labels.hideKeyLabel : labels.showKeyLabel}`, onClick: onToggleKeyVisible, ...agentHandleProps({}, { base: providerHandle, ...({ action: 'reveal-key', role: 'button', label: `${option.label} ${labels.showKeyLabel}` }) }), children: _jsx(Icon, { name: keyVisible ? 'eye-off' : 'eye', size: 14 }) })] }));
+}
+function BaseUrlField({ option, entry, labels, providerHandle, onUpdate }) {
+    return (_jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: labels.baseUrlLabel }), _jsx("input", { className: "jini-input", type: "url", inputMode: "url", spellCheck: false, placeholder: option.defaultBaseUrl || labels.baseUrlPlaceholder, "aria-label": `${option.label} ${labels.baseUrlLabel}`, value: entry.baseUrl ?? '', "aria-invalid": isProviderBaseUrlInvalid(entry) || undefined, onChange: (event) => onUpdate({ baseUrl: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'base-url', role: 'field', label: `${option.label} ${labels.baseUrlLabel}` }) }) })] }));
+}
+function ModelField({ option, entry, labels, providerHandle, onUpdate, models }) {
+    const modelListId = `jini-media-provider-models-${option.id}`;
+    return (_jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: labels.modelLabel }), _jsx("input", { className: "jini-input", list: modelListId, spellCheck: false, placeholder: labels.modelPlaceholder, "aria-label": `${option.label} ${labels.modelLabel}`, value: entry.model ?? '', onChange: (event) => onUpdate({ model: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'model', role: 'field', label: `${option.label} ${labels.modelLabel}` }) }) }), _jsx("datalist", { id: modelListId, children: models.map((model) => (_jsx("option", { value: model }, model))) })] }));
+}
+/** The invalid-URL alert, else the "uses X by default" hint while the field is blank, else nothing. */
+function BaseUrlHint({ entry, option, labels, t, }) {
+    if (isProviderBaseUrlInvalid(entry)) {
+        return (_jsx("span", { className: "jini-field-hint jini-hint-error", role: "alert", children: labels.baseUrlInvalidLabel }));
+    }
+    const effectiveBaseUrl = resolveProviderBaseUrl(entry, option.defaultBaseUrl);
+    if ((entry.baseUrl ?? '').trim() || !effectiveBaseUrl)
+        return null;
+    return _jsx("span", { className: "jini-field-hint", children: t(labels.baseUrlDefaultHintTemplate, { url: effectiveBaseUrl }) });
+}
+//# sourceMappingURL=MediaProviderCard.js.map