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

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

@@ -1,6 +1,7 @@
 /**
- * Ported verbatim from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/card.json`,
+ * Ported from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/card.json`,
  * 2026-08-18). Only the `cn` import path changed, same as `table.tsx`.
+ * The unused private footer primitive is omitted.
  */
 import * as React from 'react';
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -8,6 +9,5 @@ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<H
 declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };
 //# sourceMappingURL=card.d.ts.map

package/dist/features/interactive-ui/providers/shadcn/card.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Ported verbatim from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/card.json`,
+ * Ported from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/card.json`,
  * 2026-08-18). Only the `cn` import path changed, same as `table.tsx`.
+ * The unused private footer primitive is omitted.
  */
 import * as React from 'react';
 import { cn } from './lib/utils.js';
@@ -15,7 +16,5 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx
 CardDescription.displayName = 'CardDescription';
 const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('p-6 pt-0', className), ...props })));
 CardContent.displayName = 'CardContent';
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex items-center p-6 pt-0', className), ...props })));
-CardFooter.displayName = 'CardFooter';
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };
 //# sourceMappingURL=card.js.map

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

@@ -1,19 +1,17 @@
 /**
- * Ported verbatim from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/select.json`,
+ * Ported from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/select.json`,
  * 2026-08-18). Only the `cn` import path changed, same as `table.tsx`; every class name and
  * `data-*` attribute below is unmodified CLI output.
+ * Unused private group, label, and separator primitives are omitted.
  */
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
-declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectScrollUpButton, SelectScrollDownButton, };
 //# sourceMappingURL=select.d.ts.map

package/dist/features/interactive-ui/providers/shadcn/select.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Ported verbatim from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/select.json`,
+ * Ported from shadcn's `new-york` style registry (`ui.shadcn.com/r/styles/new-york/select.json`,
  * 2026-08-18). Only the `cn` import path changed, same as `table.tsx`; every class name and
  * `data-*` attribute below is unmodified CLI output.
+ * Unused private group, label, and separator primitives are omitted.
  */
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from './icons.js';
 import { cn } from './lib/utils.js';
 const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
@@ -20,11 +20,7 @@ SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayNam
 const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]', position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => _jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props }));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => _jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props }));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+export { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectScrollUpButton, SelectScrollDownButton, };
 //# sourceMappingURL=select.js.map

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

@@ -1,17 +1,16 @@
 /**
- * Ported verbatim from `npx shadcn@latest add table` (real CLI run, 2026-08-08, against a
+ * Ported from `npx shadcn@latest add table` (real CLI run, 2026-08-08, against a
  * scratch Vite+Tailwind v4 project — see source-map.md). Only the `cn` import path changed
  * (`@/lib/utils` -> `./lib/utils.js`, this monorepo's relative-import convention); every
- * class name, `data-slot` attribute, and prop shape below is unmodified CLI output.
+ * retained class name, `data-slot` attribute, and prop shape below is unmodified CLI output.
+ * Unused private footer and caption primitives are omitted.
  */
 import * as React from 'react';
 declare function Table({ className, ...props }: React.ComponentProps<'table'>): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): React.JSX.Element;
-declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): React.JSX.Element;
 declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): React.JSX.Element;
 declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): React.JSX.Element;
 declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): React.JSX.Element;
-declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): React.JSX.Element;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };
 //# sourceMappingURL=table.d.ts.map

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Ported verbatim from `npx shadcn@latest add table` (real CLI run, 2026-08-08, against a
+ * Ported from `npx shadcn@latest add table` (real CLI run, 2026-08-08, against a
  * scratch Vite+Tailwind v4 project — see source-map.md). Only the `cn` import path changed
  * (`@/lib/utils` -> `./lib/utils.js`, this monorepo's relative-import convention); every
- * class name, `data-slot` attribute, and prop shape below is unmodified CLI output.
+ * retained class name, `data-slot` attribute, and prop shape below is unmodified CLI output.
+ * Unused private footer and caption primitives are omitted.
  */
 import * as React from 'react';
 import { cn } from './lib/utils.js';
@@ -16,9 +17,6 @@ function TableHeader({ className, ...props }) {
 function TableBody({ className, ...props }) {
     return _jsx("tbody", { "data-slot": "table-body", className: cn('[&_tr:last-child]:border-0', className), ...props });
 }
-function TableFooter({ className, ...props }) {
-    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props }));
-}
 function TableRow({ className, ...props }) {
     return (_jsx("tr", { "data-slot": "table-row", className: cn('border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted', className), ...props }));
 }
@@ -28,8 +26,5 @@ function TableHead({ className, ...props }) {
 function TableCell({ className, ...props }) {
     return (_jsx("td", { "data-slot": "table-cell", className: cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className), ...props }));
 }
-function TableCaption({ className, ...props }) {
-    return _jsx("caption", { "data-slot": "table-caption", className: cn('mt-4 text-sm text-muted-foreground', className), ...props });
-}
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };
 //# sourceMappingURL=table.js.map

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/* 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); }";
+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/* A secret control's eye toggle sits inside the field's right edge. The control is padded so long\n   values never run under it; the button is a 40px tap target centred on the input, transparent,\n   so it overhangs the ~36px input invisibly instead of resizing the field. */\n.mcpui-secret { position: relative; display: flex; flex-direction: column; }\n.mcpui-secret > .mcpui-input, .mcpui-secret > .mcpui-textarea { padding-right: 44px; }\n.mcpui-secret-toggle {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 40px;\n  height: 40px;\n  margin-top: -20px;\n  padding: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: var(--jini-mcpui-radius-sm);\n  background: transparent;\n  color: var(--jini-mcpui-text-soft);\n  cursor: pointer;\n}\n.mcpui-secret > .mcpui-textarea + .mcpui-secret-toggle { top: 0; margin-top: -2px; }\n.mcpui-secret-toggle:hover:not([disabled]) { color: var(--jini-mcpui-text-strong); }\n.mcpui-secret-toggle[disabled] { opacity: 0.55; cursor: default; }\n.mcpui-secret-toggle:focus-visible { outline: 2px solid var(--jini-mcpui-accent-ring); outline-offset: -6px; }\n.mcpui-secret-toggle[aria-pressed=\"true\"] .mcpui-secret-icon-show,\n.mcpui-secret-toggle:not([aria-pressed=\"true\"]) .mcpui-secret-icon-hide { display: none; }\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

@@ -130,6 +130,34 @@ body {
   min-width: 0;
 }
 .mcpui-textarea { resize: vertical; min-height: 72px; font-family: var(--jini-mcpui-font); }
+/* A secret control's eye toggle sits inside the field's right edge. The control is padded so long
+   values never run under it; the button is a 40px tap target centred on the input, transparent,
+   so it overhangs the ~36px input invisibly instead of resizing the field. */
+.mcpui-secret { position: relative; display: flex; flex-direction: column; }
+.mcpui-secret > .mcpui-input, .mcpui-secret > .mcpui-textarea { padding-right: 44px; }
+.mcpui-secret-toggle {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--jini-mcpui-radius-sm);
+  background: transparent;
+  color: var(--jini-mcpui-text-soft);
+  cursor: pointer;
+}
+.mcpui-secret > .mcpui-textarea + .mcpui-secret-toggle { top: 0; margin-top: -2px; }
+.mcpui-secret-toggle:hover:not([disabled]) { color: var(--jini-mcpui-text-strong); }
+.mcpui-secret-toggle[disabled] { opacity: 0.55; cursor: default; }
+.mcpui-secret-toggle:focus-visible { outline: 2px solid var(--jini-mcpui-accent-ring); outline-offset: -6px; }
+.mcpui-secret-toggle[aria-pressed="true"] .mcpui-secret-icon-show,
+.mcpui-secret-toggle:not([aria-pressed="true"]) .mcpui-secret-icon-hide { display: none; }
 .mcpui-checkbox { margin: 3px 0 0; accent-color: var(--jini-mcpui-accent); }
 .mcpui-choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }
 .mcpui-choice { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 6px 0 0; }

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

@@ -7,10 +7,24 @@ interface SurfaceFieldBase {
     /** Help text, wired up with `aria-describedby`. */
     readonly hint?: string;
     readonly required?: boolean;
+    /** Waive on an exact choice or an alternative control; headerNames restricts entered headers. Kept secrets are validated by the host. */
+    readonly requiredUnless?: {
+        readonly field: string;
+        readonly equals: string;
+        readonly orPresent?: string;
+        readonly headerNames?: readonly string[];
+    };
+    /** Require only while the controlling public field matches one of these choices. */
+    readonly requiredWhen?: {
+        readonly field: string;
+        readonly in: readonly string[];
+    };
     readonly disabled?: boolean;
 }
 export interface StringField extends SurfaceFieldBase {
     readonly kind: 'string';
+    /** A sealed saved value satisfies validation while the requirement remains visible. */
+    readonly hasSavedValue?: boolean;
     readonly value?: string;
     readonly placeholder?: string;
     readonly multiline?: boolean;
@@ -73,8 +87,21 @@ export interface FieldReadSpec {
     readonly label: string;
     readonly kind: SurfaceField['kind'];
     readonly required: boolean;
+    readonly hasSavedValue?: boolean;
+    readonly requiredUnless?: {
+        readonly field: string;
+        readonly equals: string;
+        readonly orPresent?: string;
+        readonly headerNames?: readonly string[];
+    };
+    /** Require only while the controlling public field matches one of these choices. */
+    readonly requiredWhen?: {
+        readonly field: string;
+        readonly in: readonly string[];
+    };
+    readonly hint?: string;
 }
-/** Projects fields down to what the inline script needs, so the generated JS carries no labels, hints, or option lists it will never read. */
+/** Projects fields to runtime validation data; conditional requirements also carry their guidance. */
 export declare function toFieldReadSpecs(fields: readonly SurfaceField[]): readonly FieldReadSpec[];
 export {};
 //# sourceMappingURL=fields.d.ts.map

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

@@ -67,13 +67,17 @@ export function renderFieldControl(field, text) {
             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. */
+/** Projects fields to runtime validation data; conditional requirements also carry their guidance. */
 export function toFieldReadSpecs(fields) {
     return fields.map((field) => ({
         name: field.name,
         label: field.label,
         kind: field.kind,
         required: field.required === true,
+        ...(field.requiredUnless ? { requiredUnless: field.requiredUnless } : {}),
+        ...(field.requiredWhen ? { requiredWhen: field.requiredWhen } : {}),
+        ...(field.kind === 'string' && field.hasSavedValue ? { hasSavedValue: true } : {}),
+        ...((field.requiredUnless || field.requiredWhen) && field.hint ? { hint: field.hint } : {}),
     }));
 }
 //# sourceMappingURL=fields.js.map

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

@@ -78,6 +78,7 @@ function cancelPlanOf(spec) {
 /** 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);
+    const hasAlternatives = spec.fields.some(field => field.requiredUnless?.orPresent);
     return `(function () {
   "use strict";
 ${SURFACE_SCRIPT_PRELUDE}
@@ -124,20 +125,29 @@ ${SURFACE_SCRIPT_PRELUDE}
     control.dispatchEvent(new Event("input", { bubbles: true }));
   });
 
-  // A reveal button only changes presentation: replacing a textarea with a password input would
-  // discard line breaks. Listen on the form so clicks on the button's contents work too.
+  // The eye toggle only changes presentation. A textarea stays a textarea (a password input would
+  // discard line breaks) and flips its CSS masking; a single-line input flips password <-> text.
+  // Listen on the form so clicks on the button's icon work too.
+  function setRevealed(button, reveal) {
+    var control = document.getElementById(button.getAttribute("data-mcpui-secret-toggle"));
+    if (!control) return;
+    if (control.tagName === "TEXTAREA") control.setAttribute("style", "-webkit-text-security: " + (reveal ? "none" : "disc") + ";");
+    else control.type = reveal ? "text" : "password";
+    button.setAttribute("aria-pressed", reveal ? "true" : "false");
+    button.setAttribute("aria-label", button.getAttribute(reveal ? "data-mcpui-hide-secret" : "data-mcpui-show-secret"));
+  }
+  // Re-mask every secret once a save succeeds, so nothing stays readable on screen behind the result.
+  function concealSecrets() {
+    var toggles = form.querySelectorAll("button[data-mcpui-secret-toggle]");
+    for (var t = 0; t < toggles.length; t++) setRevealed(toggles[t], false);
+  }
   form.addEventListener("click", function (event) {
     if (event.isTrusted !== true) return;
     var target = event.target;
     if (!target || typeof target.closest !== "function") return;
     var button = target.closest("button[data-mcpui-secret-toggle]");
     if (!button || button.disabled) return;
-    var control = document.getElementById(button.getAttribute("data-mcpui-secret-toggle"));
-    if (!control) return;
-    var reveal = button.getAttribute("aria-pressed") !== "true";
-    control.setAttribute("style", "-webkit-text-security: " + (reveal ? "none" : "disc") + ";");
-    button.setAttribute("aria-pressed", reveal ? "true" : "false");
-    button.textContent = button.getAttribute(reveal ? "data-mcpui-hide-secret" : "data-mcpui-show-secret");
+    setRevealed(button, button.getAttribute("aria-pressed") !== "true");
   });
 
   // form.elements[name] yields a RadioNodeList when several controls share a name and the BARE
@@ -172,6 +182,69 @@ ${SURFACE_SCRIPT_PRELUDE}
     return value === "";
   }
 
+  // Presentation only; the host's save rule validates the effective settings and kept secrets.
+${hasAlternatives ? `  function hasAlternative(field) {
+    var name = field.requiredUnless && field.requiredUnless.orPresent;
+    if (!name) return false;
+    var control = form.elements[name];
+    var value = control && control.value.trim();
+    if (!value) return FIELDS.some(function(item) { return item.name === name && item.hasSavedValue; });
+    var names = field.requiredUnless.headerNames;
+    if (!names) return true;
+    var pairs = value.split(",").map(function(pair) { return /^([^=\\s][^=]*?)\\s*=\\s*(.+)$/.exec(pair.trim()); });
+    return pairs.every(Boolean) && pairs.some(function(pair) {
+      return names.some(function(name) { return name.toLowerCase() === pair[1].toLowerCase(); }) && pair[2].trim() !== "";
+    });
+  }
+` : ''}  function requiredNow(field) {
+    var condition = field.requiredUnless;
+    var other = condition && form.elements[condition.field];
+    var when = field.requiredWhen;
+    var controlling = when && form.elements[when.field];
+    var required = when ? Boolean(controlling && when.in.indexOf(controlling.value) !== -1) : field.required;
+${hasAlternatives ? `    if (hasAlternative(field)) return false;
+` : ''}    return required && (!condition || !other || other.value !== condition.equals);
+  }
+  function refreshRequirements() {
+    for (var i = 0; i < FIELDS.length; i++) {
+      var field = FIELDS[i];
+      if (!field.requiredUnless && !field.requiredWhen && !field.hasSavedValue) continue;
+      var control = form.elements[field.name];
+      var required = requiredNow(field);
+      control.required = required && !field.hasSavedValue;
+      control.setAttribute("aria-required", String(required && !field.hasSavedValue));
+      var label = control.labels && control.labels[0];
+      var mark = label && label.querySelector(".mcpui-required");
+      if (label && !mark) {
+        mark = document.createElement("span");
+        mark.className = "mcpui-required";
+        mark.setAttribute("aria-hidden", "true");
+        mark.textContent = "*";
+        label.appendChild(mark);
+      }
+      if (mark) mark.hidden = !required;
+    }
+  }
+  form.addEventListener("change", refreshRequirements);
+  form.addEventListener("input", refreshRequirements);
+  refreshRequirements();
+
+  // Collect field values and validation feedback before the submit path performs any effects.
+  function readFields() {
+    var params = {};
+    var missing = [];
+    var missingMessage;
+    for (var i = 0; i < FIELDS.length; i++) {
+      var value = readField(FIELDS[i]);
+      if (requiredNow(FIELDS[i]) && !FIELDS[i].hasSavedValue && isBlank(FIELDS[i], value)) {
+        missing.push(FIELDS[i].label);
+        if ((FIELDS[i].requiredUnless || FIELDS[i].requiredWhen) && FIELDS[i].hint) missingMessage = FIELDS[i].label + " is required. " + FIELDS[i].hint;
+      }
+      params[FIELDS[i].name] = value;
+    }
+    return { params: params, missing: missing, missingMessage: missingMessage };
+  }
+
   // NOT wired to the form's "submit" event. Per the WHATWG form submission algorithm, the
   // sandboxed-forms browsing-context check runs BEFORE that event is ever dispatched, so in the
   // real target sandbox (MCP_UI_VIEW_SANDBOX grants "allow-scripts" and nothing else -- no
@@ -201,14 +274,10 @@ ${SURFACE_SCRIPT_PRELUDE}
     var params = {};
     var key;
     for (key in BASE_PARAMS) if (Object.prototype.hasOwnProperty.call(BASE_PARAMS, key)) params[key] = BASE_PARAMS[key];
-    var missing = [];
-    for (var i = 0; i < FIELDS.length; i++) {
-      var value = readField(FIELDS[i]);
-      if (FIELDS[i].required && isBlank(FIELDS[i], value)) missing.push(FIELDS[i].label);
-      params[FIELDS[i].name] = value;
-    }
-    if (missing.length > 0) {
-      setStatus(TEXT.missingPrefix + missing.join(", "), "invalid");
+    var fields = readFields();
+    Object.assign(params, fields.params);
+    if (fields.missing.length > 0) {
+      setStatus(fields.missingMessage || TEXT.missingPrefix + fields.missing.join(", "), "invalid");
       return;
     }
     for (key in actionParams) if (Object.prototype.hasOwnProperty.call(actionParams, key)) params[key] = actionParams[key];
@@ -216,6 +285,7 @@ ${SURFACE_SCRIPT_PRELUDE}
     setBusy(true);
     setStatus(TEXT.working, "pending");
     api.callTool(TOOL, params).then(function () {
+      concealSecrets();
       setStatus(TEXT.done, "done");
       api.requestTeardown();
     }, function (error) {

package/dist/features/mcp-ui/surfaces/text-input.d.ts

@@ -1,4 +1,4 @@
-/** Labels the host can translate for a multiline secret's reveal toggle. */
+/** Verbs the host can translate for a secret's reveal toggle; the field label is appended. */
 export interface SecretInputText {
     readonly showSecret: string;
     readonly hideSecret: string;
@@ -18,8 +18,8 @@ export interface TextInputProps extends Partial<SecretInputText> {
     readonly disabled?: boolean;
     /** `'number'` also constrains the on-screen keyboard on touch devices, which `'text'` would not. */
     readonly inputType?: 'text' | 'number';
-    /** Renders as `<input type="password">`, or a masked textarea with a show/hide toggle when
-     *  multiline. No `<textarea type="password">` exists, so multiline uses CSS text security.
+    /** Renders as `<input type="password">`, or a masked textarea when multiline — either way with
+     *  an eye show/hide toggle. No `<textarea type="password">` exists, so multiline uses CSS text security.
      *  Ignored for presentation when `inputType` is `'number'` (no such thing as a masked number) —
      *  same precedence `multiline`'s own doc comment already gives `inputType: 'number'`.
      *  A supplied value is always rejected: masking cannot protect a secret serialized into HTML. */

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

@@ -29,35 +29,50 @@ 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. */
+/** Eye / eye-off glyphs. Both ship; CSS shows the one matching `aria-pressed`, so the inline script
+ *  never builds markup. `currentColor` keeps them on the surface's theme tokens in light and dark. */
+const EYE_ICON = '<svg class="mcpui-secret-icon-show" aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>' +
+    '<svg class="mcpui-secret-icon-hide" aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.9 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.16 3.19M6.6 6.6C3.9 8.4 2 12 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6M14.12 14.12a3 3 0 1 1-4.24-4.24"/><path d="M2 2l20 20"/></svg>';
+/**
+ * The eye toggle every secret control carries, inside the field's right edge. Its accessible name
+ * is the host's verb plus the field label ("Show Token"); the full show/hide names ride on data
+ * attributes so the form script swaps them without knowing the label.
+ * @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>`;
+    const show = `${props.showSecret ?? DEFAULT_SECRET_INPUT_TEXT.showSecret} ${props.label}`;
+    const hide = `${props.hideSecret ?? DEFAULT_SECRET_INPUT_TEXT.hideSecret} ${props.label}`;
+    return `<button type="button" class="mcpui-secret-toggle" data-mcpui-secret-toggle="${escapeHtml(id)}" data-mcpui-show-secret="${escapeHtml(show)}" data-mcpui-hide-secret="${escapeHtml(hide)}" aria-label="${escapeHtml(show)}" aria-controls="${escapeHtml(id)}" aria-pressed="false"${booleanAttribute('disabled', props.disabled)}>${EYE_ICON}</button>`;
+}
+/** Wraps a secret control so its toggle sits inside the field's right edge. @complexity O(n) in the rendered length. */
+function withSecretToggle(control, props, id) {
+    return `<div class="mcpui-secret">${control}${renderSecretToggle(props, id)}</div>`;
 }
 /** 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)}` +
+    const control = `<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) : '');
+        `>${props.value === undefined ? '' : escapeHtml(String(props.value))}</textarea>`;
+    return secret ? withSecretToggle(control, props, required.id) : control;
 }
-/** The single-line `<input>` control. @complexity O(n) in the rendered length. */
+/** The single-line `<input>` control, with the eye toggle when masked. @complexity O(n) in the rendered length. */
 function renderInput(props, required) {
     const { type, common } = required;
-    return `<input class="mcpui-input" type="${type}"${common}` +
+    const control = `<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') : '') +
+        // spellcheck off: once revealed as `type="text"`, enhanced spellcheck would ship the secret out.
+        (type === 'password' ? optionalAttribute('autocomplete', 'new-password') + optionalAttribute('spellcheck', 'false') : '') +
         (type === 'number'
             ? optionalAttribute('min', props.min) + optionalAttribute('max', props.max) + optionalAttribute('step', props.step)
             : '') +
         '>';
+    return type === 'password' ? withSecretToggle(control, props, required.id) : control;
 }
 /**
  * Renders one free-text field: its label, hint, and control, wrapped in `.mcpui-field`.
@@ -81,7 +96,7 @@ export function renderTextInput(props) {
     const type = resolveInputType(props);
     const control = props.multiline === true && type !== 'number'
         ? renderTextarea(props, { id, common })
-        : renderInput(props, { type, common });
+        : renderInput(props, { id, type, common });
     return `<div class="mcpui-field">\n${renderFieldLabel(props)}\n${control}\n</div>`;
 }
 //# sourceMappingURL=text-input.js.map

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

@@ -0,0 +1,3 @@
+/** Example endpoint for the provider configuration UI; no provider is selected by default. */
+export declare const MEDIA_PROVIDER_BASE_URL_PLACEHOLDER = "https://api.example.com";
+//# sourceMappingURL=catalog.d.ts.map

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

@@ -0,0 +1,3 @@
+/** Example endpoint for the provider configuration UI; no provider is selected by default. */
+export const MEDIA_PROVIDER_BASE_URL_PLACEHOLDER = 'https://api.example.com';
+//# sourceMappingURL=catalog.js.map

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { Fragment, useId } from 'react';
 import { agentHandleProps } from '@jini-ai/agentic';
-import { Icon } from '../../../../react/components/Icon.js';
+import { SecretInput } from '../../../../react/components/SecretInput.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) {
@@ -23,12 +23,13 @@ function CardHead({ option, labels, t, maskedLabel, pending, }) {
             _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', 
+    const inputId = useId();
+    return (_jsxs("div", { className: "jini-media-provider-field jini-media-provider-field--secret", children: [_jsx("label", { htmlFor: inputId, className: "jini-field-label jini-sr-only", children: labels.apiKeyLabel }), _jsx(SecretInput, { id: inputId, label: `${option.label} ${labels.apiKeyLabel}`, revealed: keyVisible, onRevealedChange: onToggleKeyVisible, toggleLabels: { show: `${labels.showKeyLabel} ${option.label} ${labels.apiKeyLabel}`, hide: `${labels.hideKeyLabel} ${option.label} ${labels.apiKeyLabel}` }, toggleAttrs: agentHandleProps({}, { base: providerHandle, ...({ action: 'reveal-key', role: 'button', label: `${option.label} ${labels.showKeyLabel}` }) }), className: "jini-input", 
                 /* `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 }) })] }));
+                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}` }) }) })] }));
 }
 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}` }) }) })] }));

package/dist/features/media-providers/react/components/media-providers-tab-labels.js

@@ -1,3 +1,4 @@
+import { MEDIA_PROVIDER_BASE_URL_PLACEHOLDER } from '../../catalog.js';
 /** English defaults, keyed exactly like `MediaProvidersTabLabels`; each is passed through `t`
  *  only when the host did not supply that label (the dictionaries are keyed by this English text). */
 const DEFAULT_LABELS = {
@@ -12,7 +13,7 @@ const DEFAULT_LABELS = {
     showKeyLabel: 'Show',
     hideKeyLabel: 'Hide',
     baseUrlLabel: 'Base URL',
-    baseUrlPlaceholder: 'https://api.example.com',
+    baseUrlPlaceholder: MEDIA_PROVIDER_BASE_URL_PLACEHOLDER,
     baseUrlDefaultHintTemplate: 'Uses {url} by default.',
     baseUrlInvalidLabel: 'Enter an absolute http:// or https:// URL that is not a private or internal address.',
     modelLabel: 'Model',