@jini-ai/ui 0.5.5 → 0.5.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @jini-ai/ui
 
+## 0.5.6 — 2026-10-22
+
+- 2026-10-22: MCP-UI question cards follow dark hosts, optional useCachedLoader fetch, trust options, html-editor fallbacks removed, coverage.
+
 ## 0.5.5 — 2026-10-16
 
 - `admin-widgets` Select paints group headings and per-option badges (dc770a41) and is pane-aware; image fields name the file (bc1dbf0d).

package/dist/core/theme/validation.js

@@ -6,50 +6,52 @@ const safeValue = (value) => typeof value === 'string' && value.trim().length >
 const component = '(?:[+-]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)(?:%|deg|rad|grad|turn)?|none)';
 const components = new RegExp(`^(?:rgb|rgba|hsl|hsla|oklch|oklab|lab|lch)\\(\\s*${component}(?:\\s*,\\s*|\\s+)${component}(?:\\s*,\\s*|\\s+)${component}(?:(?:\\s*[,/]\\s*)${component})?\\s*\\)$`, 'i');
 const colorValue = (value) => safeValue(value)
-    && (/^#[\da-f]{3}(?:[\da-f]{1}|[\da-f]{3}|[\da-f]{5})?$/i.test(value)
+    && (/^#[\da-f]{3}(?:[\da-f]|[\da-f]{3}|[\da-f]{5})?$/i.test(value)
         || components.test(value)
         || /^(?:transparent|black|white|red|green|blue|gray|grey)$/i.test(value));
+const fontStacksValid = ({ fonts }) => record(fonts) && safeValue(fonts.body) && safeValue(fonts.heading) && (fonts.mono === undefined || safeValue(fonts.mono));
+const stylesheetUrlValid = ({ url }) => {
+    if (typeof url !== 'string' || url.length > 4096 || /[\x00-\x20<>]/.test(url))
+        return false;
+    try {
+        return new URL(url, 'https://font-base.invalid').protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+};
+const fontLoadValid = ({ load }) => load === undefined || (Array.isArray(load) && load.length <= 16 && load.every((url) => stylesheetUrlValid({ url })));
+function fontErrors({ fonts }) {
+    const errors = [];
+    if (!fontStacksValid({ fonts }))
+        errors.push('fonts must provide body and heading font stacks');
+    if (record(fonts) && !fontLoadValid({ load: fonts.load }))
+        errors.push('fonts.load must contain relative or HTTPS stylesheet URLs');
+    return errors;
+}
+function paletteErrors({ scheme, colors }) {
+    if (!record(colors))
+        return [`${scheme} must be a complete palette`];
+    const known = adminThemeColorKeys;
+    const invalid = adminThemeColorKeys.filter((key) => !Object.hasOwn(colors, key) || !colorValue(colors[key]))
+        .map((key) => `${scheme}.${key} must be a concrete CSS color`);
+    const unknown = Object.keys(colors).filter((key) => !known.includes(key)).map((key) => `${scheme}.${key} is not a theme color`);
+    return [...invalid, ...unknown];
+}
+const radiusValid = ({ radius }) => radius === undefined || (typeof radius === 'string' && /^(?:0|\d+(?:\.\d+)?(?:px|rem|em))$/.test(radius));
+const densityValid = ({ density }) => density === undefined || (typeof density === 'number' && Number.isFinite(density) && density >= 0.5 && density <= 2);
 /** Validate serializable theme data before any DOM or font-loading effect. */
 export function validateAdminTheme({ theme }) {
-    const errors = [];
     if (!record(theme))
         return { valid: false, errors: ['Theme must be an object'] };
-    if (!safeValue(theme.name))
-        errors.push('name must be a nonempty safe string');
-    const fonts = theme.fonts;
-    if (!record(fonts) || !safeValue(fonts.body) || !safeValue(fonts.heading) || (fonts.mono !== undefined && !safeValue(fonts.mono))) {
-        errors.push('fonts must provide body and heading font stacks');
-    }
-    if (record(fonts) && fonts.load !== undefined) {
-        if (!Array.isArray(fonts.load) || fonts.load.length > 16 || !fonts.load.every((url) => {
-            if (typeof url !== 'string' || url.length > 4096 || /[\x00-\x20<>]/.test(url))
-                return false;
-            try {
-                return new URL(url, 'https://font-base.invalid').protocol === 'https:';
-            }
-            catch {
-                return false;
-            }
-        }))
-            errors.push('fonts.load must contain relative or HTTPS stylesheet URLs');
-    }
-    for (const scheme of ['light', 'dark']) {
-        const colors = theme[scheme];
-        if (!record(colors)) {
-            errors.push(`${scheme} must be a complete palette`);
-            continue;
-        }
-        for (const key of adminThemeColorKeys)
-            if (!Object.hasOwn(colors, key) || !colorValue(colors[key]))
-                errors.push(`${scheme}.${key} must be a concrete CSS color`);
-        for (const key of Object.keys(colors))
-            if (!adminThemeColorKeys.includes(key))
-                errors.push(`${scheme}.${key} is not a theme color`);
-    }
-    if (theme.radius !== undefined && (typeof theme.radius !== 'string' || !/^(?:0|\d+(?:\.\d+)?(?:px|rem|em))$/.test(theme.radius)))
-        errors.push('radius must be a nonnegative CSS length');
-    if (theme.density !== undefined && (typeof theme.density !== 'number' || !Number.isFinite(theme.density) || theme.density < 0.5 || theme.density > 2))
-        errors.push('density must be between 0.5 and 2');
+    const errors = [
+        ...(safeValue(theme.name) ? [] : ['name must be a nonempty safe string']),
+        ...fontErrors({ fonts: theme.fonts }),
+        ...paletteErrors({ scheme: 'light', colors: theme.light }),
+        ...paletteErrors({ scheme: 'dark', colors: theme.dark }),
+        ...(radiusValid({ radius: theme.radius }) ? [] : ['radius must be a nonnegative CSS length']),
+        ...(densityValid({ density: theme.density }) ? [] : ['density must be between 0.5 and 2']),
+    ];
     return errors.length ? { valid: false, errors } : { valid: true, theme: theme };
 }
 //# sourceMappingURL=validation.js.map

package/dist/features/a2ui/renderer.js

@@ -11,6 +11,19 @@ const PROVIDER_ACTION_PROPS = new Map([
     ['shadcn.text-input', 'onValueChange'],
     ['shadcn.select', 'onValueChange'],
 ]);
+function renderRegistryComponent({ component, registry, componentId, onAction }, _options = {}) {
+    const entry = registry.resolveById({ id: component.component });
+    if (!entry) {
+        return (_jsxs("span", { className: "a2ui-placeholder", "data-a2ui-status": "unrenderable-type", "data-a2ui-component-id": componentId, children: ["\u26A0 no renderer yet for component type \"", component.component, "\""] }));
+    }
+    const RegistryComponent = entry.Component;
+    // `onRowClick` belongs to `native.data-table`/`shadcn.data-table`, not a generic
+    // per-component-type feedback convention — each non-table provider needs an explicit
+    // callback contract, supplied by the built-in map or its registry entry, not a guess.
+    // Unannotated custom entries retain the old table callback for compatibility.
+    const actionProp = entry.actionProp ?? PROVIDER_ACTION_PROPS.get(entry.id) ?? 'onRowClick';
+    return _jsx(RegistryComponent, { ...component.props, [actionProp]: () => onAction(componentId) });
+}
 /**
  * Recursively walks a surface's component map from `componentId` — same shape as
  * `@jini-ai/chat/react`'s `A2uiSurfaceCard`'s `RenderComponent` (cycle guard via `ancestors`,
@@ -59,19 +72,8 @@ function RenderNode({ interpreter, surfaceId, registry, componentId, ancestors,
             return (_jsx("div", { className: "a2ui-card", "data-a2ui-component-id": componentId, children: _jsx(RenderNode, { ...childProps, componentId: String(component.props.child) }) }));
         case 'Button':
             return (_jsx("button", { type: "button", className: `a2ui-button a2ui-button-${String(component.props.variant)}`, "data-a2ui-component-id": componentId, onClick: () => onAction(componentId), children: _jsx(RenderNode, { ...childProps, componentId: String(component.props.child) }) }));
-        default: {
-            const entry = registry.resolveById({ id: component.component });
-            if (!entry) {
-                return (_jsxs("span", { className: "a2ui-placeholder", "data-a2ui-status": "unrenderable-type", "data-a2ui-component-id": componentId, children: ["\u26A0 no renderer yet for component type \"", component.component, "\""] }));
-            }
-            const RegistryComponent = entry.Component;
-            // `onRowClick` belongs to `native.data-table`/`shadcn.data-table`, not a generic
-            // per-component-type feedback convention — each non-table provider needs an explicit
-            // callback contract, supplied by the built-in map or its registry entry, not a guess.
-            // Unannotated custom entries retain the old table callback for compatibility.
-            const actionProp = entry.actionProp ?? PROVIDER_ACTION_PROPS.get(entry.id) ?? 'onRowClick';
-            return _jsx(RegistryComponent, { ...component.props, [actionProp]: () => onAction(componentId) });
-        }
+        default:
+            return renderRegistryComponent({ component, registry, componentId, onAction });
     }
 }
 /**

package/dist/features/about/react/components/AboutTab.js

@@ -3,6 +3,65 @@ import { useMemo, useState } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { deriveAboutUpdateControl, isAboutUpdateActionDisabled } from '../../rules.js';
 import { useSilentUpdatesToggle } from '../hooks/useSilentUpdatesToggle.js';
+/** Built-in (untranslated) copy for every label a host may override. */
+const DEFAULT_LABELS = {
+    versionLabel: 'Version',
+    runtimeLabel: 'Runtime',
+    packagedLabel: 'Packaged',
+    developmentLabel: 'Development build',
+    channelLabel: 'Channel',
+    platformLabel: 'Platform',
+    archLabel: 'Architecture',
+    releaseLinkLabel: 'View releases',
+    actionFailedLabel: 'Something went wrong. Try again.',
+    versionUnavailableLabel: 'Version information is unavailable.',
+    silentUpdatesLabel: 'Install updates automatically',
+    silentUpdatesHint: 'Apply updates in the background without asking first.',
+};
+const LABEL_KEYS = Object.keys(DEFAULT_LABELS);
+/** Each label is the host override when given, else the translated default. */
+function resolveLabels({ t }, { labels }) {
+    const resolved = { ...DEFAULT_LABELS };
+    for (const key of LABEL_KEYS)
+        resolved[key] = labels?.[key] ?? t(DEFAULT_LABELS[key]);
+    return resolved;
+}
+/**
+ * The one thing that's genuinely render-local: whether an update action this
+ * tab itself kicked off is still in flight, and whether the last one failed.
+ */
+function useUpdateActionRunner({ onPerformUpdateAction, }) {
+    const [actionBusy, setActionBusy] = useState(false);
+    const [actionFailed, setActionFailed] = useState(false);
+    const run = (action) => {
+        setActionBusy(true);
+        setActionFailed(false);
+        void onPerformUpdateAction(action).then(() => setActionBusy(false), () => {
+            setActionBusy(false);
+            setActionFailed(true);
+        });
+    };
+    return { actionBusy, actionFailed, run };
+}
+function UpdateActions({ control, primaryLabel, actionDisabled, onPrimaryAction, onOpenReleaseLink, releaseLinkLabel, }) {
+    // Origin styled 'download'/'install'/'quit' as primary and left 'check'
+    // plain; simplified to "any actionable state reads as primary, any inert
+    // one reads as ghost" — same visual intent, one fewer hardcoded branch,
+    // and it falls straight out of a field `deriveAboutUpdateControl` already
+    // computes rather than re-deriving OD's three-way action match.
+    const primaryButtonClassName = `jini-button${control.primaryAction ? ' jini-button-primary' : ' jini-button-ghost'}`;
+    return (_jsxs("div", { className: "jini-settings-about-actions", children: [primaryLabel ? (_jsx("button", { type: "button", className: primaryButtonClassName, disabled: actionDisabled, onClick: onPrimaryAction, "data-testid": "about-update-action", children: primaryLabel })) : null, control.showReleaseLink ? (_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onOpenReleaseLink, "data-testid": "about-release-link", children: releaseLinkLabel })) : null] }));
+}
+/** A `<dt>/<dd>` row rendered only when the host supplied a value for it. */
+function OptionalFactRow({ label, value }) {
+    return value ? (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsx("dd", { children: value })] })) : null;
+}
+function VersionDetails({ appVersionInfo, labels, statusTone, statusText, actions, actionFailed }) {
+    return (_jsxs("dl", { className: "jini-settings-about-list", children: [_jsxs("div", { className: "jini-settings-about-version-row", children: [_jsxs("div", { className: "jini-settings-about-version-copy", children: [_jsx("dt", { children: labels.versionLabel }), _jsx("span", { className: "jini-settings-about-version-num", children: appVersionInfo.version }), _jsx("dd", { "aria-live": "polite", className: `jini-settings-about-status jini-settings-about-status--${statusTone}`, children: statusText })] }), actions] }), actionFailed ? (_jsx("p", { className: "jini-hint jini-settings-about-error", role: "status", children: labels.actionFailedLabel })) : null, _jsxs("div", { children: [_jsx("dt", { children: labels.runtimeLabel }), _jsx("dd", { children: appVersionInfo.packaged === false ? labels.developmentLabel : labels.packagedLabel })] }), _jsx(OptionalFactRow, { label: labels.channelLabel, value: appVersionInfo.channel }), _jsx(OptionalFactRow, { label: labels.platformLabel, value: appVersionInfo.platform }), _jsx(OptionalFactRow, { label: labels.archLabel, value: appVersionInfo.arch })] }));
+}
+function SilentUpdatesToggle({ silentUpdates, labels, }) {
+    return (_jsx("div", { className: "jini-settings-subsection jini-settings-about-silent-updates", children: _jsxs("label", { className: "jini-settings-about-toggle", children: [_jsx("input", { type: "checkbox", checked: silentUpdates.allowSilentUpdates, disabled: silentUpdates.busy, onChange: (event) => silentUpdates.toggle(event.currentTarget.checked), "data-testid": "about-silent-updates-toggle" }), _jsxs("span", { className: "jini-settings-about-toggle-copy", children: [_jsx("span", { children: labels.silentUpdatesLabel }), _jsx("span", { className: "jini-hint", children: labels.silentUpdatesHint })] })] }) }));
+}
 /**
  * App version + auto-update panel, plus the "allow silent updates"
  * preference. Origin: the `activeSection === 'about'` block in
@@ -25,46 +84,17 @@ import { useSilentUpdatesToggle } from '../hooks/useSilentUpdatesToggle.js';
  */
 export function AboutTab({ appVersionInfo, updaterModel, onPerformUpdateAction, onOpenReleaseLink, allowSilentUpdates = false, onSilentUpdatePreferenceChange, labels, }) {
     const t = useT();
-    const [actionBusy, setActionBusy] = useState(false);
-    const [actionFailed, setActionFailed] = useState(false);
+    const { actionBusy, actionFailed, run } = useUpdateActionRunner({ onPerformUpdateAction });
     const silentUpdates = useSilentUpdatesToggle({ allowSilentUpdates, onSilentUpdatePreferenceChange });
-    const control = useMemo(() => deriveAboutUpdateControl(updaterModel, appVersionInfo ?? null), [updaterModel, appVersionInfo]);
+    const control = useMemo(() => deriveAboutUpdateControl(updaterModel, appVersionInfo), [updaterModel, appVersionInfo]);
     const actionDisabled = isAboutUpdateActionDisabled(control, updaterModel, actionBusy);
-    const versionLabel = labels?.versionLabel ?? t('Version');
-    const runtimeLabel = labels?.runtimeLabel ?? t('Runtime');
-    const packagedLabel = labels?.packagedLabel ?? t('Packaged');
-    const developmentLabel = labels?.developmentLabel ?? t('Development build');
-    const channelLabel = labels?.channelLabel ?? t('Channel');
-    const platformLabel = labels?.platformLabel ?? t('Platform');
-    const archLabel = labels?.archLabel ?? t('Architecture');
-    const releaseLinkLabel = labels?.releaseLinkLabel ?? t('View releases');
-    const actionFailedLabel = labels?.actionFailedLabel ?? t('Something went wrong. Try again.');
-    const versionUnavailableLabel = labels?.versionUnavailableLabel ?? t('Version information is unavailable.');
-    const silentUpdatesLabel = labels?.silentUpdatesLabel ?? t('Install updates automatically');
-    const silentUpdatesHint = labels?.silentUpdatesHint ?? t('Apply updates in the background without asking first.');
-    const statusText = t(control.statusKey, control.statusVars);
-    const primaryLabel = control.primaryLabelKey ? t(control.primaryLabelKey) : null;
-    // Origin styled 'download'/'install'/'quit' as primary and left 'check'
-    // plain; simplified to "any actionable state reads as primary, any inert
-    // one reads as ghost" — same visual intent, one fewer hardcoded branch,
-    // and it falls straight out of a field `deriveAboutUpdateControl` already
-    // computes rather than re-deriving OD's three-way action match.
-    const primaryButtonClassName = `jini-button${control.primaryAction ? ' jini-button-primary' : ' jini-button-ghost'}`;
+    const resolvedLabels = resolveLabels({ t }, { labels });
     // `handlePrimaryAction` only exists when there is an action to run — it is
     // `undefined` in every state that renders the button disabled-and-inert
     // (e.g. "downloading"), so there is no dead "disabled but somehow clicked"
     // branch to guard against inside the handler itself.
     const { primaryAction } = control;
-    const handlePrimaryAction = primaryAction == null
-        ? undefined
-        : () => {
-            setActionBusy(true);
-            setActionFailed(false);
-            void onPerformUpdateAction(primaryAction).then(() => setActionBusy(false), () => {
-                setActionBusy(false);
-                setActionFailed(true);
-            });
-        };
-    return (_jsxs("section", { className: "jini-settings-section jini-settings-about", children: [appVersionInfo ? (_jsxs("dl", { className: "jini-settings-about-list", children: [_jsxs("div", { className: "jini-settings-about-version-row", children: [_jsxs("div", { className: "jini-settings-about-version-copy", children: [_jsx("dt", { children: versionLabel }), _jsx("span", { className: "jini-settings-about-version-num", children: appVersionInfo.version }), _jsx("dd", { "aria-live": "polite", className: `jini-settings-about-status jini-settings-about-status--${control.statusTone}`, children: statusText })] }), _jsxs("div", { className: "jini-settings-about-actions", children: [primaryLabel ? (_jsx("button", { type: "button", className: primaryButtonClassName, disabled: actionDisabled, onClick: handlePrimaryAction, "data-testid": "about-update-action", children: primaryLabel })) : null, control.showReleaseLink ? (_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onOpenReleaseLink, "data-testid": "about-release-link", children: releaseLinkLabel })) : null] })] }), actionFailed ? (_jsx("p", { className: "jini-hint jini-settings-about-error", role: "status", children: actionFailedLabel })) : null, _jsxs("div", { children: [_jsx("dt", { children: runtimeLabel }), _jsx("dd", { children: appVersionInfo.packaged === false ? developmentLabel : packagedLabel })] }), appVersionInfo.channel ? (_jsxs("div", { children: [_jsx("dt", { children: channelLabel }), _jsx("dd", { children: appVersionInfo.channel })] })) : null, appVersionInfo.platform ? (_jsxs("div", { children: [_jsx("dt", { children: platformLabel }), _jsx("dd", { children: appVersionInfo.platform })] })) : null, appVersionInfo.arch ? (_jsxs("div", { children: [_jsx("dt", { children: archLabel }), _jsx("dd", { children: appVersionInfo.arch })] })) : null] })) : (_jsx("div", { className: "jini-empty-card", children: versionUnavailableLabel })), onSilentUpdatePreferenceChange ? (_jsx("div", { className: "jini-settings-subsection jini-settings-about-silent-updates", children: _jsxs("label", { className: "jini-settings-about-toggle", children: [_jsx("input", { type: "checkbox", checked: silentUpdates.allowSilentUpdates, disabled: silentUpdates.busy, onChange: (event) => silentUpdates.toggle(event.currentTarget.checked), "data-testid": "about-silent-updates-toggle" }), _jsxs("span", { className: "jini-settings-about-toggle-copy", children: [_jsx("span", { children: silentUpdatesLabel }), _jsx("span", { className: "jini-hint", children: silentUpdatesHint })] })] }) })) : null] }));
+    const handlePrimaryAction = primaryAction == null ? undefined : () => run(primaryAction);
+    return (_jsxs("section", { className: "jini-settings-section jini-settings-about", children: [appVersionInfo ? (_jsx(VersionDetails, { appVersionInfo: appVersionInfo, labels: resolvedLabels, statusTone: control.statusTone, statusText: t(control.statusKey, control.statusVars), actionFailed: actionFailed, actions: _jsx(UpdateActions, { control: control, primaryLabel: control.primaryLabelKey ? t(control.primaryLabelKey) : null, actionDisabled: actionDisabled, onPrimaryAction: handlePrimaryAction, onOpenReleaseLink: onOpenReleaseLink, releaseLinkLabel: resolvedLabels.releaseLinkLabel }) })) : (_jsx("div", { className: "jini-empty-card", children: resolvedLabels.versionUnavailableLabel })), onSilentUpdatePreferenceChange ? _jsx(SilentUpdatesToggle, { silentUpdates: silentUpdates, labels: resolvedLabels }) : null] }));
 }
 //# sourceMappingURL=AboutTab.js.map

package/dist/features/about/rules.d.ts

@@ -46,7 +46,7 @@ export declare const ABOUT_UPDATE_KEYS: {
  *    build — one shared "unsupported" outcome, since the operator can do
  *    nothing about any of them from this panel.
  *
- * After that it is a switch over the reported state. Two subtleties worth
+ * After that it is a lookup of the reported state in `STATE_DERIVERS`. Two subtleties worth
  * keeping when reading it:
  *
  * - `primaryLabelKey` can be set while `primaryAction` is `null`. That is the
@@ -56,7 +56,7 @@ export declare const ABOUT_UPDATE_KEYS: {
  *   about to disappear (installing, or quitting to let an installer run).
  *   Offering a navigation there invites a click that cannot complete.
  *
- * @complexity O(1) — a fixed switch, no iteration.
+ * @complexity O(1) — a fixed-size map lookup, no iteration.
  */
 export declare function deriveAboutUpdateControl(model: UpdaterModel, appVersionInfo: AppVersionInfo | null): AboutUpdateControl;
 /**

package/dist/features/about/rules.js

@@ -29,6 +29,154 @@ export const ABOUT_UPDATE_KEYS = {
     notChecked: 'settings.updateStatusNotChecked',
     check: 'settings.updateCheck',
 };
+const K = ABOUT_UPDATE_KEYS;
+/**
+ * Shared by the capability gate and the reported `unsupported` state — one
+ * outcome, since the operator can do nothing about either from this panel.
+ */
+const UNSUPPORTED_CONTROL = {
+    primaryAction: null,
+    primaryLabelKey: null,
+    showReleaseLink: true,
+    statusKey: K.unsupported,
+    statusTone: 'warning',
+};
+const DEVELOPMENT_CONTROL = {
+    primaryAction: null,
+    primaryLabelKey: null,
+    showReleaseLink: true,
+    statusKey: K.development,
+    statusTone: 'neutral',
+};
+/** `{ statusVars: { version } }` when the version is known (truthy), else nothing. */
+function versionVars(model) {
+    return model.availableVersion ? { statusVars: { version: model.availableVersion } } : {};
+}
+/** Whether either install route (hand off to an installer, or apply in place) is open. */
+function canInstall(model) {
+    return Boolean(model.canOpenInstaller || model.canApplyInPlace);
+}
+function deriveAvailable(model) {
+    return {
+        primaryAction: model.canDownload ? 'download' : null,
+        primaryLabelKey: model.canDownload ? K.download : null,
+        showReleaseLink: true,
+        statusKey: model.availableVersion ? K.available : K.availableUnknown,
+        statusTone: 'warning',
+        ...versionVars(model),
+    };
+}
+function deriveDownloading(model) {
+    const percent = model.downloadProgress?.percent;
+    const known = typeof percent === 'number';
+    return {
+        primaryAction: null,
+        primaryLabelKey: K.downloadingLabel,
+        showReleaseLink: true,
+        statusKey: known ? K.downloadingPercent : K.downloading,
+        statusTone: 'neutral',
+        ...(known ? { statusVars: { percent } } : {}),
+    };
+}
+function deriveDownloaded(model) {
+    const payload = model.updateKind === 'payload';
+    // The installer is already running; the only useful act left is to get
+    // out of its way.
+    if (model.installerOpened && model.canQuitAfterInstallerOpen) {
+        return {
+            primaryAction: 'quit',
+            primaryLabelKey: K.quit,
+            showReleaseLink: false,
+            statusKey: payload ? K.installingRestart : K.opening,
+            statusTone: 'neutral',
+        };
+    }
+    const installable = canInstall(model);
+    return {
+        primaryAction: installable ? 'install' : null,
+        primaryLabelKey: installable ? (payload ? K.installRestart : K.installNow) : null,
+        showReleaseLink: true,
+        statusKey: model.availableVersion ? K.ready : K.readyUnknown,
+        statusTone: 'success',
+        ...versionVars(model),
+    };
+}
+/**
+ * Retry the furthest-along step that is still possible: re-install a
+ * download we already have, else re-download a version we know about,
+ * else start over. Sending the operator back to "check" when a finished
+ * download is sitting on disk would throw away the expensive part.
+ */
+function errorRetryAction(model) {
+    if (model.status?.downloadPath != null && canInstall(model))
+        return 'install';
+    if (model.availableVersion != null && model.canDownload)
+        return 'download';
+    return 'check';
+}
+function deriveError(model) {
+    return {
+        primaryAction: errorRetryAction(model),
+        primaryLabelKey: K.retry,
+        showReleaseLink: true,
+        statusKey: K.failed,
+        statusTone: 'error',
+    };
+}
+/**
+ * `idle`, and any state a newer backend reports that this build predates.
+ * Falling through to "you can check" is the safe default: it offers the
+ * one action that is valid from any unknown state.
+ */
+const IDLE_CONTROL = {
+    primaryAction: 'check',
+    primaryLabelKey: K.check,
+    showReleaseLink: true,
+    statusKey: K.notChecked,
+    statusTone: 'neutral',
+};
+/**
+ * One deriver per reported state. A `Map` (not an object literal) so a
+ * state string that happens to name an `Object.prototype` member can never
+ * resolve to anything but the idle fallback.
+ */
+const STATE_DERIVERS = new Map([
+    [
+        'checking',
+        () => ({
+            primaryAction: null,
+            primaryLabelKey: K.checkingLabel,
+            showReleaseLink: true,
+            statusKey: K.checking,
+            statusTone: 'neutral',
+        }),
+    ],
+    [
+        'not-available',
+        () => ({
+            primaryAction: 'check',
+            primaryLabelKey: K.recheck,
+            showReleaseLink: true,
+            statusKey: K.upToDate,
+            statusTone: 'success',
+        }),
+    ],
+    ['available', deriveAvailable],
+    ['downloading', deriveDownloading],
+    ['downloaded', deriveDownloaded],
+    [
+        'installing',
+        () => ({
+            primaryAction: null,
+            primaryLabelKey: K.installingRestart,
+            showReleaseLink: false,
+            statusKey: K.installing,
+            statusTone: 'neutral',
+        }),
+    ],
+    ['error', deriveError],
+    ['unsupported', () => ({ ...UNSUPPORTED_CONTROL })],
+]);
 /**
  * Derives what the About panel's update row should show.
  *
@@ -45,7 +193,7 @@ export const ABOUT_UPDATE_KEYS = {
  *    build — one shared "unsupported" outcome, since the operator can do
  *    nothing about any of them from this panel.
  *
- * After that it is a switch over the reported state. Two subtleties worth
+ * After that it is a lookup of the reported state in `STATE_DERIVERS`. Two subtleties worth
  * keeping when reading it:
  *
  * - `primaryLabelKey` can be set while `primaryAction` is `null`. That is the
@@ -55,136 +203,15 @@ export const ABOUT_UPDATE_KEYS = {
  *   about to disappear (installing, or quitting to let an installer run).
  *   Offering a navigation there invites a click that cannot complete.
  *
- * @complexity O(1) — a fixed switch, no iteration.
+ * @complexity O(1) — a fixed-size map lookup, no iteration.
  */
 export function deriveAboutUpdateControl(model, appVersionInfo) {
-    const K = ABOUT_UPDATE_KEYS;
-    if (appVersionInfo?.packaged === false) {
-        return {
-            primaryAction: null,
-            primaryLabelKey: null,
-            showReleaseLink: true,
-            statusKey: K.development,
-            statusTone: 'neutral',
-        };
-    }
-    if (model.environment !== 'desktop' || !model.enabled || !model.supported) {
-        return {
-            primaryAction: null,
-            primaryLabelKey: null,
-            showReleaseLink: true,
-            statusKey: K.unsupported,
-            statusTone: 'warning',
-        };
-    }
-    switch (model.status?.state) {
-        case 'checking':
-            return {
-                primaryAction: null,
-                primaryLabelKey: K.checkingLabel,
-                showReleaseLink: true,
-                statusKey: K.checking,
-                statusTone: 'neutral',
-            };
-        case 'not-available':
-            return {
-                primaryAction: 'check',
-                primaryLabelKey: K.recheck,
-                showReleaseLink: true,
-                statusKey: K.upToDate,
-                statusTone: 'success',
-            };
-        case 'available':
-            return {
-                primaryAction: model.canDownload ? 'download' : null,
-                primaryLabelKey: model.canDownload ? K.download : null,
-                showReleaseLink: true,
-                statusKey: model.availableVersion ? K.available : K.availableUnknown,
-                statusTone: 'warning',
-                ...(model.availableVersion ? { statusVars: { version: model.availableVersion } } : {}),
-            };
-        case 'downloading': {
-            const percent = model.downloadProgress?.percent;
-            const known = typeof percent === 'number';
-            return {
-                primaryAction: null,
-                primaryLabelKey: K.downloadingLabel,
-                showReleaseLink: true,
-                statusKey: known ? K.downloadingPercent : K.downloading,
-                statusTone: 'neutral',
-                ...(known ? { statusVars: { percent } } : {}),
-            };
-        }
-        case 'downloaded': {
-            // The installer is already running; the only useful act left is to get
-            // out of its way.
-            if (model.installerOpened && model.canQuitAfterInstallerOpen) {
-                return {
-                    primaryAction: 'quit',
-                    primaryLabelKey: K.quit,
-                    showReleaseLink: false,
-                    statusKey: model.updateKind === 'payload' ? K.installingRestart : K.opening,
-                    statusTone: 'neutral',
-                };
-            }
-            const canInstall = Boolean(model.canOpenInstaller || model.canApplyInPlace);
-            return {
-                primaryAction: canInstall ? 'install' : null,
-                primaryLabelKey: canInstall ? (model.updateKind === 'payload' ? K.installRestart : K.installNow) : null,
-                showReleaseLink: true,
-                statusKey: model.availableVersion ? K.ready : K.readyUnknown,
-                statusTone: 'success',
-                ...(model.availableVersion ? { statusVars: { version: model.availableVersion } } : {}),
-            };
-        }
-        case 'installing':
-            return {
-                primaryAction: null,
-                primaryLabelKey: K.installingRestart,
-                showReleaseLink: false,
-                statusKey: K.installing,
-                statusTone: 'neutral',
-            };
-        case 'error': {
-            // Retry the furthest-along step that is still possible: re-install a
-            // download we already have, else re-download a version we know about,
-            // else start over. Sending the operator back to "check" when a finished
-            // download is sitting on disk would throw away the expensive part.
-            const canRetryInstall = model.status?.downloadPath != null && Boolean(model.canOpenInstaller || model.canApplyInPlace);
-            const primaryAction = canRetryInstall
-                ? 'install'
-                : model.availableVersion != null && model.canDownload
-                    ? 'download'
-                    : 'check';
-            return {
-                primaryAction,
-                primaryLabelKey: K.retry,
-                showReleaseLink: true,
-                statusKey: K.failed,
-                statusTone: 'error',
-            };
-        }
-        case 'unsupported':
-            return {
-                primaryAction: null,
-                primaryLabelKey: null,
-                showReleaseLink: true,
-                statusKey: K.unsupported,
-                statusTone: 'warning',
-            };
-        // `idle`, and any state a newer backend reports that this build predates.
-        // Falling through to "you can check" is the safe default: it offers the
-        // one action that is valid from any unknown state.
-        case 'idle':
-        default:
-            return {
-                primaryAction: 'check',
-                primaryLabelKey: K.check,
-                showReleaseLink: true,
-                statusKey: K.notChecked,
-                statusTone: 'neutral',
-            };
-    }
+    if (appVersionInfo?.packaged === false)
+        return { ...DEVELOPMENT_CONTROL };
+    if (model.environment !== 'desktop' || !model.enabled || !model.supported)
+        return { ...UNSUPPORTED_CONTROL };
+    const derive = model.status ? STATE_DERIVERS.get(model.status.state) : undefined;
+    return derive ? derive(model) : { ...IDLE_CONTROL };
 }
 /**
  * Whether the primary button should be disabled.

package/dist/features/admin-widgets/components/ImagePreviewModal.d.ts

@@ -1,16 +1,17 @@
-import { useImagePreviewModal } from "./ImagePreviewModal.hooks.js";
+import type { useLightbox } from "./Lightbox/Lightbox.hooks.js";
 export interface ImagePreviewModalProps {
     open: boolean;
     src: string;
     alt: string;
     onClose: () => void;
     /** A fake controller can exercise rendering without a real native-dialog lifecycle. */
-    useModal?: typeof useImagePreviewModal | undefined;
+    useModal?: typeof useLightbox | undefined;
     /** Optional tagging preserves existing untagged renders when no agent handle is supplied. */
     agentHandle?: string | undefined;
     /** No locale is owned here; a translated caller must pass its own accessible close label. */
     closeLabel?: string | undefined;
 }
-/** Controlled native-dialog lightbox. The host supplies image copy and a translated close label. */
+/** One image in the shared `Lightbox`; the alt text doubles as its title. Kept as a named
+ *  single-image entry point so callers need not assemble the lightbox for the common case. */
 export declare function ImagePreviewModal({ open, src, alt, onClose, useModal, agentHandle: handle, closeLabel, }: ImagePreviewModalProps): import("react").JSX.Element;
 //# sourceMappingURL=ImagePreviewModal.d.ts.map

package/dist/features/admin-widgets/components/ImagePreviewModal.js

@@ -1,13 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { agentHandle } from "@jini-ai/agentic";
-import { useImagePreviewModal } from "./ImagePreviewModal.hooks.js";
-// Native dialog supplies focus trapping, Escape and a backdrop through the browser's top layer,
-// avoiding a hand-built overlay and z-index policy. A confirm/cancel dialog's two-action contract
-// does not fit a read-only image with one close affordance. The injectable hook owns lifecycle
-// and DOM-environment fallbacks so this component stays focused on rendering.
-/** Controlled native-dialog lightbox. The host supplies image copy and a translated close label. */
-export function ImagePreviewModal({ open, src, alt, onClose, useModal = useImagePreviewModal, agentHandle: handle, closeLabel = "Close preview", }) {
-    const { dialogRef, handleNativeCancel, handleBackdropClick } = useModal({ open, onClose });
-    return (_jsxs("dialog", { ref: dialogRef, className: "image-preview-modal", "aria-label": alt, onCancel: handleNativeCancel, onClick: handleBackdropClick, children: [_jsx("button", { type: "button", className: "image-preview-modal-close", onClick: onClose, "aria-label": closeLabel, ...(handle ? agentHandle({ handle: handle }, { role: "button", label: closeLabel }) : {}), children: "\u00D7" }), _jsx("img", { src: src, alt: alt })] }));
+import { Lightbox } from "./Lightbox/Lightbox.js";
+/** One image in the shared `Lightbox`; the alt text doubles as its title. Kept as a named
+ *  single-image entry point so callers need not assemble the lightbox for the common case. */
+export function ImagePreviewModal({ open, src, alt, onClose, useModal, agentHandle: handle, closeLabel = "Close preview", }) {
+    return (_jsx(Lightbox, { open: open, title: alt, onClose: onClose, className: "image-preview-modal", labels: { close: closeLabel }, useLightboxHook: useModal, partAttrs: handle ? { close: { ...agentHandle({ handle: handle }, { role: "button", label: closeLabel }) } } : undefined, children: _jsx("img", { src: src, alt: alt }) }));
 }
 //# sourceMappingURL=ImagePreviewModal.js.map