@jini-ai/ui 0.6.15-rc.2 → 0.6.15

package/dist/features/integrations/rules.js

@@ -1,3 +1,4 @@
+import { unhandledCase } from '../../utils/unhandled-case.js';
 /** Path hint per OS — a Windows user shouldn't see a `~/...` path their
  *  shell won't expand, and vice versa. */
 export function homeConfigPath(platform, posix, windows) {
@@ -36,7 +37,8 @@ export function buildCodexEnvToml(serverName, info) {
     const entries = Object.entries(info.env ?? {});
     if (entries.length === 0)
         return '';
-    return `\n\n[mcp_servers.${serverName}.env]\n${entries.map(([key, value]) => `${key} = ${JSON.stringify(value)}`).join('\n')}`;
+    const lines = entries.map(([key, value]) => `${key} = ${JSON.stringify(value)}`).join('\n');
+    return `\n\n[mcp_servers.${serverName}.env]\n${lines}`;
 }
 /** The `{"mcpServers": {"<serverName>": {...}}}` shape shared by Cursor,
  *  Antigravity, and Windsurf. */
@@ -186,8 +188,8 @@ export function snippetForClient(clientId, serverName, info) {
     // refactored away rather than kept behind a coverage-suppression comment.
     // TypeScript still catches a missing case if `McpClientId` grows a member
     // and only `methodLabelForClient` gets updated: with every current case
-    // returning, `tsc` requires this switch to be exhaustive too, or the
-    // function's declared `McpClientSnippet` return type is violated on the
-    // "falls through" path.
+    // returning, `unhandledCase`'s `never` parameter makes `tsc` require this
+    // switch to be exhaustive too.
+    return unhandledCase(clientId);
 }
 //# sourceMappingURL=rules.js.map

package/dist/features/interactive-ui/providers/shadcn/data-table.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { getNumericColumnKeys, sortTableRows } from '../../table-data.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table.js';
+/** Header glyph per column sort state; `none` marks a sortable but unsorted column. */
+const SORT_GLYPHS = { ascending: '↑', descending: '↓', none: '↕' };
 function resolveTablePage({ pageSize, rowCount, requestedPage }, _options = {}) {
     const requestedSize = pageSize !== undefined && Number.isInteger(pageSize) && pageSize > 0 ? pageSize : null;
     const paging = requestedSize !== null;
@@ -20,11 +22,14 @@ export function DataTable({ columns, rows, onRowClick, sortable = true, pageSize
     const sortedRows = useMemo(() => sortTableRows({ rows, sort: activeSort, numericKeys }), [rows, activeSort, numericKeys]);
     const { paging, size, pageCount, page, start } = resolveTablePage({ pageSize, rowCount: rows.length, requestedPage });
     const visibleRows = sortedRows.slice(start, start + size);
-    return (_jsxs("div", { className: "jini-data-table-frame", "data-table-provider": "shadcn", children: [_jsxs(Table, { className: "jini-data-table", children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => (_jsx(TableHead, { scope: "col", "data-numeric": numericKeys.has(column.key), "aria-sort": sortable ? (activeSort?.key === column.key ? activeSort.direction : 'none') : undefined, children: sortable ? (_jsxs("button", { type: "button", className: "jini-data-table-sort", onClick: () => {
-                                        setSort({ key: column.key, direction: activeSort?.key === column.key && activeSort.direction === 'ascending'
-                                                ? 'descending' : 'ascending' });
-                                        setPage(0);
-                                    }, children: [_jsx("span", { children: column.label }), _jsx("span", { "aria-hidden": "true", children: activeSort?.key === column.key ? (activeSort.direction === 'ascending' ? '↑' : '↓') : '↕' })] })) : column.label }, column.key))) }) }), _jsxs(TableBody, { children: [rows.length === 0 && _jsx(TableRow, { children: _jsx(TableCell, { className: "jini-data-table-empty", colSpan: columns.length, children: "No results." }) }), visibleRows.map(({ row, index }) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, index) : undefined, role: onRowClick ? 'button' : undefined, tabIndex: onRowClick ? 0 : undefined, onKeyDown: onRowClick ? (event) => {
+    return (_jsxs("div", { className: "jini-data-table-frame", "data-table-provider": "shadcn", children: [_jsxs(Table, { className: "jini-data-table", children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
+                                const columnSort = activeSort?.key === column.key ? activeSort.direction : undefined;
+                                return (_jsx(TableHead, { scope: "col", "data-numeric": numericKeys.has(column.key), "aria-sort": sortable ? (columnSort ?? 'none') : undefined, children: sortable ? (_jsxs("button", { type: "button", className: "jini-data-table-sort", onClick: () => {
+                                            setSort({ key: column.key, direction: activeSort?.key === column.key && activeSort.direction === 'ascending'
+                                                    ? 'descending' : 'ascending' });
+                                            setPage(0);
+                                        }, children: [_jsx("span", { children: column.label }), _jsx("span", { "aria-hidden": "true", children: SORT_GLYPHS[columnSort ?? 'none'] })] })) : column.label }, column.key));
+                            }) }) }), _jsxs(TableBody, { children: [rows.length === 0 && _jsx(TableRow, { children: _jsx(TableCell, { className: "jini-data-table-empty", colSpan: columns.length, children: "No results." }) }), visibleRows.map(({ row, index }) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, index) : undefined, role: onRowClick ? 'button' : undefined, tabIndex: onRowClick ? 0 : undefined, onKeyDown: onRowClick ? (event) => {
                                     if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
                                         event.preventDefault();
                                         onRowClick(row, index);

package/dist/features/interactive-ui/table-data.js

@@ -1,7 +1,7 @@
 function isNumericValue(value) {
     if (typeof value === 'number')
         return Number.isFinite(value);
-    return typeof value === 'string' && /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(value.trim())
+    return typeof value === 'string' && /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(value.trim())
         && Number.isFinite(Number(value));
 }
 /** Infer numeric columns once for both providers; empty cells do not turn a numeric column into text.

package/dist/features/lexical-rich-text-editor/deserialize.js

@@ -37,10 +37,10 @@ export function setRichTextFromPlainText(editor, text, knownMentions) {
                         label: part.entity.label,
                         title: part.entity.title,
                     }));
+                    continue;
                 }
-                else if (part.text) {
+                if (part.text)
                     p.append($createTextNode(part.text));
-                }
             }
         });
         root.append(p);

package/dist/features/lexical-rich-text-editor/mention-parser.js

@@ -232,10 +232,10 @@ export function foldPresentMentions(text, present, known) {
         if (part.kind !== 'mention' || part.entity.kind === 'unknown')
             continue;
         const key = `${part.entity.kind}:${part.entity.id}`;
-        if (seen.has(key))
-            continue;
-        seen.add(key);
-        result.push(part.entity);
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push(part.entity);
+        }
     }
     return result;
 }

package/dist/features/lexical-rich-text-editor/react/components/RichTextInput.js

@@ -68,6 +68,7 @@ function EditorSurface(props, ref) {
             }, { discrete: true });
         },
         insertMention(insert) {
+            const isActiveTrigger = (trigger) => trigger.id === mentionTriggerIdRef.current;
             editor.update(() => {
                 let sel = $getSelection();
                 if (!$isRangeSelection(sel)) {
@@ -80,7 +81,7 @@ function EditorSurface(props, ref) {
                 // The cast documents that instead of an unreachable
                 // early-return branch no real document state can trigger.
                 const rangeSel = sel;
-                const mentionTrigger = triggersRef.current.find((t) => t.id === mentionTriggerIdRef.current) ??
+                const mentionTrigger = triggersRef.current.find(isActiveTrigger) ??
                     triggersRef.current[0];
                 if (mentionTrigger) {
                     deleteActiveTrigger(rangeSel, buildTriggerDeletionRegex(mentionTrigger));

package/dist/features/lexical-rich-text-editor/react/hooks/useCaretFloatingLayerPosition.js

@@ -30,7 +30,7 @@ export function useCaretFloatingLayerPosition(caret, open, boundaryRef) {
     }, [open, caret, reposition]);
     useEffect(() => {
         if (!open)
-            return;
+            return undefined;
         let raf = 0;
         const onMove = () => {
             if (raf)

package/dist/features/lexical-rich-text-editor/react/hooks/useMentionColorStamping.js

@@ -23,7 +23,7 @@ export function useMentionColorStamping(resolveMentionColor) {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!resolveMentionColor)
-            return;
+            return undefined;
         const stampByKey = (key) => {
             const dom = editor.getElementByKey(key);
             if (!dom)

package/dist/features/lexical-rich-text-editor/serialize.js

@@ -26,17 +26,20 @@ export function serializeRichText(state) {
 function serializeParagraph(at) {
     let line = '';
     for (const child of at.paragraph.getChildren()) {
-        if ($isMentionNode(child)) {
-            line += child.getToken();
-            at.mentions.push(child.getEntity());
-        }
-        else if ($isLineBreakNode(child)) {
-            line += '\n';
-        }
-        else if ($isTextNode(child) || $isElementNode(child)) {
-            line += child.getTextContent();
-        }
+        line += serializedChildText(child, at.mentions);
     }
     return line;
 }
+/** One paragraph child's plain-text contribution; a mention also records its entity. Other node kinds add nothing. */
+function serializedChildText(child, mentions) {
+    if ($isMentionNode(child)) {
+        mentions.push(child.getEntity());
+        return child.getToken();
+    }
+    if ($isLineBreakNode(child))
+        return '\n';
+    if ($isTextNode(child) || $isElementNode(child))
+        return child.getTextContent();
+    return '';
+}
 //# sourceMappingURL=serialize.js.map

package/dist/features/list-detail-panel/react/components/ListDetailPanel.js

@@ -18,6 +18,6 @@ export function ListDetailPanel({ items, selectedId, onSelect, renderItem, rende
                                 const state = { active };
                                 const resolvedItemClassName = typeof itemClassName === 'function' ? itemClassName(item, state) : itemClassName;
                                 return (_jsx("button", { type: "button", className: join('jini-list-detail-panel-item', active && 'jini-list-detail-panel-item-active', resolvedItemClassName), "aria-pressed": active, "aria-label": getItemAriaLabel?.(item), "data-active": active, "data-testid": `${testId}-item-${item.id}`, onClick: () => onSelect(item.id), children: renderItem(item, state) }, item.id));
-                            }) }))] }), _jsx("section", { className: join('jini-list-detail-panel-detail', detailClassName), "data-testid": `${testId}-detail`, children: loading ? (_jsx("div", { className: "jini-list-detail-panel-loading-detail", role: "status", "aria-busy": "true", "aria-label": t('Loading'), "data-testid": `${testId}-loading-detail`, children: loadingDetailContent })) : selectedItem ? (renderDetail(selectedItem)) : (emptyDetailContent) })] }));
+                            }) }))] }), _jsxs("section", { className: join('jini-list-detail-panel-detail', detailClassName), "data-testid": `${testId}-detail`, children: [loading ? (_jsx("div", { className: "jini-list-detail-panel-loading-detail", role: "status", "aria-busy": "true", "aria-label": t('Loading'), "data-testid": `${testId}-loading-detail`, children: loadingDetailContent })) : null, !loading && selectedItem ? renderDetail(selectedItem) : null, !loading && !selectedItem ? emptyDetailContent : null] })] }));
 }
 //# sourceMappingURL=ListDetailPanel.js.map

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

@@ -1,3 +1,4 @@
+import { trimTrailingChars } from '../../utils/trim-chars.js';
 /**
  * @module features/mcp-ui/confirmation-store
  *
@@ -66,11 +67,7 @@ function bindingsMatch(minted, presented) {
         // does not — the type check below is what keeps those apart, and it is exact on purpose: a
         // binding that silently coerces is a binding that can be satisfied by a value the minter never
         // agreed to.
-        if (typeof left !== typeof right) {
-            matched = false;
-            continue;
-        }
-        if (!constantTimeEquals(String(left), String(right)))
+        if (typeof left !== typeof right || !constantTimeEquals(String(left), String(right)))
             matched = false;
     }
     return matched;
@@ -89,7 +86,7 @@ function defaultRandomToken() {
     let binary = '';
     for (const byte of bytes)
         binary += String.fromCharCode(byte);
-    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    return trimTrailingChars(btoa(binary).replace(/\+/g, '-').replace(/\//g, '_'), '=');
 }
 /**
  * Creates an in-process confirmation store.

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

@@ -67,6 +67,11 @@ export interface ConfirmationSurfaceSpec {
     readonly description?: string;
     /** The facts being agreed about. A dialog that says "delete this?" without naming *this* is not consent. */
     readonly details?: readonly SurfaceDetail[];
+    /** Technical identifiers and input stay available without crowding out the consent wording. */
+    readonly detailDisclosure?: {
+        readonly label: string;
+        readonly details: readonly SurfaceDetail[];
+    };
     /**
      * Optional per-row checkboxes, rendered unchecked between the details and the warning. Ticking one
      * never confirms anything by itself — the same property the module doc opens with, extended to a

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

@@ -133,6 +133,7 @@ function confirmationBodyHtml(spec, required) {
     return [
         renderSurfaceHeader(spec.description === undefined ? { title: spec.title } : { title: spec.title, description: spec.description }),
         renderDetailList(spec.details ?? []),
+        spec.detailDisclosure === undefined ? '' : `<details class="mcpui-detail-disclosure mcpui-technical-details"><summary aria-expanded="false">${escapeHtml(spec.detailDisclosure.label)}</summary>${renderDetailList(spec.detailDisclosure.details)}</details>`,
         renderChoices(spec.choices ?? []),
         warning,
         // Confirm starts disabled; the script enables it once the dwell has run out.

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

@@ -1,5 +1,7 @@
 import { type BridgeScriptSpec } from './bridge.js';
 import { type SurfaceTokenName } from './tokens.js';
+import { type SurfaceDetail } from './structured-details.js';
+export type { SurfaceDetail } from './structured-details.js';
 /**
  * The base stylesheet, applied after the token block.
  *
@@ -62,27 +64,13 @@ export declare function renderSurfaceHeader(spec: {
     title: string;
     description?: string;
 }): string;
-/** One row of a surface's detail list. */
-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. `status` reserves one line for a short outcome value.
-     * Omitted (or `text`) keeps the plain inline value.
-     */
-    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.
+ * @complexity O(n * depth) with previous snapshots, otherwise O(n) rendered bytes; no effects or input mutation.
  */
 export declare function renderDetailList(details: readonly SurfaceDetail[], options?: {
     layout?: 'outcome';

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

@@ -15,6 +15,7 @@ import { AGENT_ELEMENT_ATTRIBUTE, AGENT_LABEL_ATTRIBUTE, AGENT_ROLE_ATTRIBUTE }
 import { escapeHtml } from '../escape.js';
 import { SURFACE_BRIDGE_GLOBAL, renderBridgeScript } from './bridge.js';
 import { renderTokenBlock } from './tokens.js';
+import { DETAIL_DISCLOSURE_SCRIPT, renderStructuredDetail } from './structured-details.js';
 /**
  * The base stylesheet, applied after the token block.
  *
@@ -202,6 +203,34 @@ body {
    fully done"); the accent token reads as "worth a second look" without asserting either. */
 .mcpui-status[data-state="partial"] { color: var(--jini-mcpui-accent); }
 .mcpui-code { font-family: var(--jini-mcpui-font-mono); font-size: 13px; color: var(--jini-mcpui-text-faint); }`;
+/** Structured details extend the same token system; legacy short-string documents keep their layout. */
+const STRUCTURED_DETAILS_CSS = `
+.mcpui-details { gap: 8px 16px; margin-top: 16px; }
+.mcpui-details dt { font-weight: 400; }
+.mcpui-details dd { min-width: 0; font-weight: 400; }
+.mcpui-detail-group { margin: 0; padding: 0; padding-inline-start: 8px; border-inline-start: 1px solid var(--jini-mcpui-border); }
+.mcpui-detail-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; padding: 8px 0; }
+.mcpui-detail-row:first-child { padding-top: 0; }
+.mcpui-detail-row:last-child { padding-bottom: 0; }
+.mcpui-detail-row:has(> dd > .mcpui-detail-group) { grid-template-columns: minmax(0, 1fr); }
+.mcpui-detail-array { margin: 0; padding-inline-start: 16px; }
+.mcpui-detail-array li + li { margin-top: 8px; }
+.mcpui-detail-disclosure { min-width: 0; margin-top: 8px; }
+.mcpui-detail-disclosure:first-child { margin-top: 0; }
+.mcpui-detail-disclosure > summary { color: var(--jini-mcpui-text-muted); cursor: pointer; overflow-wrap: anywhere; }
+.mcpui-detail-disclosure > summary:focus-visible { outline: 2px solid var(--jini-mcpui-accent-ring); outline-offset: 2px; }
+.mcpui-detail-disclosure > .mcpui-code, .mcpui-detail-disclosure > .mcpui-detail-group,
+.mcpui-detail-full { margin-top: 8px; }
+.mcpui-detail-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--jini-mcpui-text); }
+.mcpui-detail-long > summary { list-style: none; }
+.mcpui-detail-long > summary::-webkit-details-marker { display: none; }
+.mcpui-detail-less, .mcpui-detail-long[open] .mcpui-detail-more,
+.mcpui-detail-long[open] .mcpui-detail-preview { display: none; }
+.mcpui-detail-long[open] .mcpui-detail-less { display: inline; }
+.mcpui-detail-change { display: flex; flex-direction: column; gap: 8px; }
+.mcpui-detail-change > div > .mcpui-hint { display: block; }
+.mcpui-detail-raw { font-size: 12px; }
+.mcpui-detail-disclosure .mcpui-code { color: var(--jini-mcpui-text); }`;
 /**
  * The Content-Security-Policy every generated surface declares in its own `<head>`.
  *
@@ -229,6 +258,9 @@ export const SURFACE_CSP = "default-src 'none'; script-src 'unsafe-inline'; styl
  */
 export function renderSurfaceDocument(spec) {
     const extraCss = spec.extraCss === undefined ? '' : `\n${spec.extraCss}`;
+    const hasDisclosures = spec.bodyHtml.includes('<details class="mcpui-detail-disclosure');
+    const detailCss = hasDisclosures ? STRUCTURED_DETAILS_CSS : '';
+    const detailScript = hasDisclosures ? `\n${DETAIL_DISCLOSURE_SCRIPT}` : '';
     return `<!doctype html>
 <html lang="${escapeHtml(spec.lang ?? 'en')}">
 <head>
@@ -238,7 +270,7 @@ export function renderSurfaceDocument(spec) {
 <title>${escapeHtml(spec.title)}</title>
 <style>
 ${renderTokenBlock(spec.tokens)}
-${SURFACE_BASE_CSS}${extraCss}
+${SURFACE_BASE_CSS}${detailCss}${extraCss}
 </style>
 </head>
 <body>
@@ -249,7 +281,7 @@ ${spec.bodyHtml}
 ${renderBridgeScript(spec.app)}
 </script>
 <script>
-${spec.script}
+${spec.script}${detailScript}
 </script>
 </body>
 </html>`;
@@ -271,7 +303,7 @@ export function renderSurfaceHeader(spec) {
  * @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.
+ * @complexity O(n * depth) with previous snapshots, otherwise O(n) rendered bytes; no effects or input mutation.
  */
 export function renderDetailList(details, options = {}) {
     if (details.length === 0)
@@ -279,10 +311,9 @@ export function renderDetailList(details, options = {}) {
     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;
+        const body = renderStructuredDetail({ detail });
         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 valueClass = detail.format === 'status' && typeof detail.value === 'string' ? ` class="mcpui-detail-status" title="${escapeHtml(detail.value)}"` : '';
         const pair = `<dt>${escapeHtml(detail.label)}${description}</dt><dd${valueClass}>${body}</dd>`;
         return outcome ? `  <div class="mcpui-outcome-row">${pair}</div>` : `  ${pair}`;
     })

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

@@ -14,6 +14,7 @@
  * return type — a compile error at the switch itself. A `default` that threw would instead move
  * that failure to runtime, and add a branch no test could reach.
  */
+import { unhandledCase } from '../../../utils/unhandled-case.js';
 import { renderCheckbox } from './checkbox.js';
 import { renderChoiceGroup } from './choice-group.js';
 import { renderSelect } from './select.js';
@@ -66,6 +67,7 @@ export function renderFieldControl(field, text) {
         case 'multi-enum':
             return renderChoiceGroup({ ...base(field), selection: 'multiple', options: field.options, ...present(field, ['value']) });
     }
+    return unhandledCase(field);
 }
 /** Projects fields to runtime validation data; conditional requirements also carry their guidance. */
 export function toFieldReadSpecs(fields) {

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

@@ -79,7 +79,8 @@ export function applyHostSurfaceTokens(html, tokens) {
     if (close === -1)
         return html;
     const at = close + '</style>'.length;
-    const rule = `\n<style ${HOST_THEME_STYLE_ATTRIBUTE}>\n:root {\n${entries.map(([name, value]) => `  ${name}: ${value};`).join('\n')}\n}\n</style>`;
+    const declarations = entries.map(([name, value]) => `  ${name}: ${value};`).join('\n');
+    const rule = `\n<style ${HOST_THEME_STYLE_ATTRIBUTE}>\n:root {\n${declarations}\n}\n</style>`;
     return `${html.slice(0, at)}${rule}${html.slice(at)}`;
 }
 //# sourceMappingURL=host-theme.js.map

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

@@ -10,4 +10,5 @@ export * from './outcome.js';
 export * from './select.js';
 export * from './text-input.js';
 export * from './tokens.js';
+export * from './tool-approval.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -10,4 +10,5 @@ export * from './outcome.js';
 export * from './select.js';
 export * from './text-input.js';
 export * from './tokens.js';
+export * from './tool-approval.js';
 //# sourceMappingURL=index.js.map

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

@@ -44,7 +44,7 @@
  */
 import { createUIResource } from '../resource.js';
 import { escapeHtml, escapeJsValue } from '../escape.js';
-import { renderActions, renderDetailList, renderStatusRegion, renderSurfaceDocument, renderSurfaceHeader, SURFACE_SCRIPT_PRELUDE, SURFACE_STATUS_ELEMENT_ID, } from './document.js';
+import { renderActions, renderDetailList, renderSurfaceDocument, renderSurfaceHeader, SURFACE_SCRIPT_PRELUDE, SURFACE_STATUS_ELEMENT_ID, } from './document.js';
 const DEFAULT_APP = { appName: 'jini-mcp-ui-outcome', appVersion: '1' };
 const DEFAULT_OPEN_LINK_LABEL = 'Open site';
 const OPEN_LINK_ACTION_ID = 'open-link';

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

@@ -17,8 +17,9 @@ import { fieldDescribedBy, fieldElementId, renderFieldLabel } from './document.j
  */
 export function renderSelect(props) {
     const id = fieldElementId(props.name);
+    const placeholderSelected = props.value === undefined ? 'selected ' : '';
     const placeholderOption = props.required === true
-        ? `\n  <option value="" ${props.value === undefined ? 'selected ' : ''}disabled>${escapeHtml(props.placeholder ?? '—')}</option>`
+        ? `\n  <option value="" ${placeholderSelected}disabled>${escapeHtml(props.placeholder ?? '—')}</option>`
         : '';
     const options = props.options
         .map((option) => {

package/dist/features/mcp-ui/surfaces/structured-details.d.ts

@@ -0,0 +1,40 @@
+/** One fact. Values and previous snapshots must be JSON-serializable; strings remain supported. */
+export interface SurfaceDetail {
+    readonly label: string;
+    readonly value: unknown;
+    /** Presence enables a diff, including an explicitly absent previous override. */
+    readonly previous?: unknown;
+    /** Explicit, optionally translated labels keyed by dotted object path. */
+    readonly labels?: Readonly<Record<string, string>>;
+    /** Optional secondary context beneath the label, using the shared muted hint style. */
+    readonly description?: string;
+    /**
+     * `code` discloses a monospace `<pre>` that keeps line breaks and scrolls inside its own box
+     * past a fixed height, so long SQL or JSON remains readable without stretching the dialog past
+     * its frame. `status` reserves one line for a short outcome value. Omitted (or `text`) permits
+     * value-sensitive presentation, preserving plain inline strings for short prose.
+     */
+    readonly format?: 'text' | 'code' | 'status';
+}
+type ValueContext = {
+    value: unknown;
+    path: string;
+    labels: Readonly<Record<string, string>>;
+    format?: SurfaceDetail['format'];
+};
+/** Native details owns keyboard interaction; mirror its state for explicit ARIA consumers. */
+export declare const DETAIL_DISCLOSURE_SCRIPT = "document.addEventListener(\"toggle\", function (event) {\n  var disclosure = event.target;\n  if (!disclosure.matches || !disclosure.matches(\"details.mcpui-detail-disclosure\")) return;\n  disclosure.querySelector(\"summary\").setAttribute(\"aria-expanded\", disclosure.open ? \"true\" : \"false\");\n}, true);";
+/** Humanized English fallback; caller labels remain verbatim. @complexity O(k) key length. */
+export declare function surfaceDetailLabel({ key, path, labels }: {
+    key: string;
+    path: string;
+    labels: ValueContext['labels'];
+}, _options?: {}): string;
+/** One reusable detail body. Raw JSON is escaped text, never a script or HTML fragment.
+ * @returns HTML for JSON-compatible caller data; JSON.stringify errors propagate for invalid data.
+ * @complexity O(n * depth) with a previous snapshot, otherwise O(n), in serialized bytes. */
+export declare function renderStructuredDetail({ detail }: {
+    detail: SurfaceDetail;
+}, _options?: {}): string;
+export {};
+//# sourceMappingURL=structured-details.d.ts.map

package/dist/features/mcp-ui/surfaces/structured-details.js

@@ -0,0 +1,159 @@
+/** Shared value presentation for confirmation, form and outcome details. Never interprets HTML. */
+import { escapeHtml } from '../escape.js';
+/** Native details owns keyboard interaction; mirror its state for explicit ARIA consumers. */
+export const DETAIL_DISCLOSURE_SCRIPT = `document.addEventListener("toggle", function (event) {
+  var disclosure = event.target;
+  if (!disclosure.matches || !disclosure.matches("details.mcpui-detail-disclosure")) return;
+  disclosure.querySelector("summary").setAttribute("aria-expanded", disclosure.open ? "true" : "false");
+}, true);`;
+/** Humanized English fallback; caller labels remain verbatim. @complexity O(k) key length. */
+export function surfaceDetailLabel({ key, path, labels }, _options = {}) {
+    if (Object.hasOwn(labels, path))
+        return labels[path];
+    const words = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2').replace(/[_-]+/g, ' ').toLowerCase();
+    const acronyms = words.replace(/\b(url|css|html|json|api|id)\b/g, word => word.toUpperCase());
+    return acronyms.charAt(0).toUpperCase() + acronyms.slice(1);
+}
+function isRecord(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function disclosure({ summary, body, kind = '' }, _options = {}) {
+    return `<details class="mcpui-detail-disclosure ${kind}"><summary aria-expanded="false">${escapeHtml(summary)}</summary>${body}</details>`;
+}
+/** JSON scalar display; missing override values use the same empty marker as null. */
+function scalarText({ value }, _options = {}) {
+    if (value === undefined || value === null || value === '')
+        return '—';
+    if (typeof value === 'boolean')
+        return value ? 'On' : 'Off';
+    return String(value);
+}
+/** Classifies content for a disclosure, preserving the original text bytes in the body. */
+function codeKind({ value, path, format }, _options = {}) {
+    const hasDeclaration = value.split('}').slice(0, -1).some(part => {
+        const open = part.indexOf('{');
+        return open >= 0 && part.indexOf(':', open + 1) >= 0;
+    });
+    if (/css$/i.test(path) || (hasDeclaration && !/^\s*[\[{]/.test(value)))
+        return 'CSS';
+    if (/^\s*</.test(value))
+        return 'HTML';
+    if (/^\s*[\[{]/.test(value))
+        return 'JSON';
+    if (format === 'code')
+        return 'Code';
+    return /[\r\n]/.test(value) ? 'Text' : undefined;
+}
+/** Escapes all text once at the HTML sink. Long prose uses a three-line summary. */
+function renderText({ value, path, format }, _options = {}) {
+    const text = escapeHtml(value);
+    const kind = codeKind({ value, path, format });
+    if (kind) {
+        const lines = value.split(/\r\n|\r|\n/).length;
+        return disclosure({ summary: `${kind} · ${lines} ${lines === 1 ? 'line' : 'lines'}`, body: `<pre class="mcpui-code">${text}</pre>`, kind: 'mcpui-detail-code' });
+    }
+    if (value.length <= 80)
+        return text;
+    return `<details class="mcpui-detail-disclosure mcpui-detail-long"><summary aria-expanded="false"><span class="mcpui-detail-preview">${text}</span><span class="mcpui-detail-more">Show more</span><span class="mcpui-detail-less">Show less</span></summary><div class="mcpui-detail-full">${text}</div></details>`;
+}
+/** Arrays keep scalar items compact; nested or long items use readable bullet rows. */
+function renderArray({ value, ...context }, _options = {}) {
+    if (value.length === 0)
+        return '<span class="mcpui-detail-value">—</span>';
+    const compact = value.every(item => item === null || ['boolean', 'number', 'string'].includes(typeof item))
+        && value.every(item => String(item).length <= 80 && !/[\r\n<{[]/.test(String(item)));
+    if (compact)
+        return renderText({ ...context, value: value.map(item => scalarText({ value: item })).join(', ') });
+    const items = value.map((item, index) => {
+        const path = context.path ? `${context.path}.${index}` : String(index);
+        return `<li>${renderValue({ ...context, value: item, path })}</li>`;
+    });
+    const rest = items.length <= 5 ? '' : disclosure({ summary: `Show more (${items.length - 5} items)`, body: `<ul class="mcpui-detail-array">${items.slice(5).join('')}</ul>` });
+    return `<ul class="mcpui-detail-array">${items.slice(0, 5).join('')}</ul>${rest}`;
+}
+function objectRow({ key, context, body }, _options = {}) {
+    return `<div class="mcpui-detail-row"><dt>${escapeHtml(surfaceDetailLabel({ key, path: context.path, labels: context.labels }))}</dt><dd>${body}</dd></div>`;
+}
+/** Nested objects stay definition lists, indented once per actual group. @complexity O(n) rendered bytes. */
+function renderObject({ value, ...context }, _options = {}) {
+    const entries = Object.entries(value);
+    if (entries.length === 0)
+        return '<span class="mcpui-detail-value">—</span>';
+    const rows = entries.map(([key, item]) => {
+        const child = { ...context, value: item, path: context.path ? `${context.path}.${key}` : key };
+        return objectRow({ key, context: child, body: renderValue(child) });
+    }).join('');
+    return `<dl class="mcpui-detail-group">${rows}</dl>`;
+}
+/** Pure recursive rendering, O(n) in output bytes and O(depth) traversal stack; no external I/O. */
+function renderValue(context, _options = {}) {
+    const { value } = context;
+    if (Array.isArray(value))
+        return renderArray({ ...context, value });
+    if (isRecord(value))
+        return renderObject({ ...context, value });
+    if (typeof value === 'string' && value !== '')
+        return renderText({ ...context, value });
+    return escapeHtml(scalarText({ value }));
+}
+/** Object order is immaterial; array order and missing keys matter to an approval diff. */
+function equalValue({ before, after }, _options = {}) {
+    if (Object.is(before, after))
+        return true;
+    if (Array.isArray(before) && Array.isArray(after)) {
+        return before.length === after.length && before.every((item, index) => equalValue({ before: item, after: after[index] }));
+    }
+    if (!isRecord(before) || !isRecord(after))
+        return false;
+    const keys = Object.keys(before);
+    return keys.length === Object.keys(after).length && keys.every(key => Object.hasOwn(after, key) && equalValue({ before: before[key], after: after[key] }));
+}
+/** A missing JSON key must never read an inherited property such as __proto__ or constructor. */
+function ownValue({ record, key }, _options = {}) {
+    return Object.hasOwn(record, key) ? record[key] : undefined;
+}
+/** Presence needs its own label: null and missing otherwise both display an empty marker. */
+function renderFieldDiff({ child, previous, value, key }, _options = {}) {
+    const body = renderDiff(child);
+    if (Object.hasOwn(previous, key) && Object.hasOwn(value, key))
+        return body;
+    const label = Object.hasOwn(value, key) ? 'Added' : 'Removed';
+    return `<span class="mcpui-hint">${label}</span>${body}`;
+}
+/** Partition by equality before rendering so unchanged fields never crowd out changes.
+ * @complexity O(n * depth) worst-case nested comparison work; O(n) markup space. No reads or mutation. */
+function renderObjectDiff(context, _options = {}) {
+    const { previous, value } = context;
+    const keys = [...new Set([...Object.keys(value), ...Object.keys(previous)])];
+    const changed = [];
+    const unchanged = [];
+    for (const key of keys) {
+        const child = { ...context, previous: ownValue({ record: previous, key }), value: ownValue({ record: value, key }), path: context.path ? `${context.path}.${key}` : key };
+        const same = Object.hasOwn(previous, key) === Object.hasOwn(value, key) && equalValue({ before: child.previous, after: child.value });
+        const body = same ? renderValue(child) : renderFieldDiff({ child, previous, value, key });
+        (same ? unchanged : changed).push(objectRow({ key, context: child, body }));
+    }
+    const rest = unchanged.length === 0 ? '' : disclosure({ summary: `Unchanged fields (${unchanged.length})`, body: `<dl class="mcpui-detail-group">${unchanged.join('')}</dl>`, kind: 'mcpui-detail-unchanged' });
+    const changes = changed.length === 0 ? '' : `<dl class="mcpui-detail-group">${changed.join('')}</dl>`;
+    return changes + rest || '<span class="mcpui-detail-value">—</span>';
+}
+/** Recurse only through object pairs; atomic and array updates show explicit before/after values. */
+function renderDiff(context, _options = {}) {
+    if (isRecord(context.previous) && isRecord(context.value))
+        return renderObjectDiff({ ...context, previous: context.previous, value: context.value });
+    return `<div class="mcpui-detail-change"><div><span class="mcpui-hint">Before</span>${renderValue({ ...context, value: context.previous })}</div><div><span class="mcpui-hint">After</span>${renderValue(context)}</div></div>`;
+}
+/** One reusable detail body. Raw JSON is escaped text, never a script or HTML fragment.
+ * @returns HTML for JSON-compatible caller data; JSON.stringify errors propagate for invalid data.
+ * @complexity O(n * depth) with a previous snapshot, otherwise O(n), in serialized bytes. */
+export function renderStructuredDetail({ detail }, _options = {}) {
+    const context = { value: detail.value, path: '', labels: detail.labels ?? {}, format: detail.format };
+    const hasPrevious = Object.hasOwn(detail, 'previous');
+    const body = hasPrevious ? renderDiff({ ...context, previous: detail.previous }) : renderValue(context);
+    const raw = hasPrevious ? { previous: detail.previous, value: detail.value } : detail.value;
+    const showRaw = hasPrevious || (typeof detail.value === 'object' && detail.value !== null) || body.startsWith('<details ');
+    if (!showRaw)
+        return body;
+    return body + disclosure({ summary: 'View raw', body: `<pre class="mcpui-code">${escapeHtml(JSON.stringify(raw, null, 2))}</pre>`, kind: 'mcpui-detail-raw' });
+}
+//# sourceMappingURL=structured-details.js.map