@jini-ai/ui 0.5.5 → 0.5.6

package/dist/features/source-config-list/react/components/SourceConfigItemCard.d.ts

@@ -1,9 +1,9 @@
-import type { SourceConfigItem, SourceFieldSpec, SourceTestResult, SourceTrustOption, SourceUpdateInput } from '../../types.js';
+import type { SourceConfigItem, SourceFieldSpec, SourceTestResult, SourceTrustSelectorProps, SourceUpdateInput } from '../../types.js';
 import type { SourceConfigListCapabilities } from '../hooks/useSourceConfigList.js';
-export interface SourceConfigItemCardProps<TSource extends SourceConfigItem> {
+/** Every item-card prop except the trust selector's pair (see {@link SourceTrustSelectorProps}). */
+export interface SourceConfigItemCardBaseProps<TSource extends SourceConfigItem> {
     source: TSource;
     fieldSpecs: readonly SourceFieldSpec[];
-    trustOptions?: readonly SourceTrustOption[];
     capabilities: SourceConfigListCapabilities;
     removing: boolean;
     refreshing: boolean;
@@ -14,7 +14,6 @@ export interface SourceConfigItemCardProps<TSource extends SourceConfigItem> {
     testResult?: SourceTestResult;
     onRefresh: () => void;
     onRemove: () => void;
-    onTrustChange: (trust: string) => void;
     onTest: () => void;
     /** Patches this item's `label`/`enabled`/`fields`. Only ever called when `capabilities.canUpdate` is true. */
     onUpdate: (patch: SourceUpdateInput) => void;
@@ -33,6 +32,8 @@ export interface SourceConfigItemCardProps<TSource extends SourceConfigItem> {
      */
     agentHandle?: string;
 }
+/** `onTrustChange` is required only together with `trustOptions` — see {@link SourceTrustSelectorProps}. */
+export type SourceConfigItemCardProps<TSource extends SourceConfigItem> = SourceConfigItemCardBaseProps<TSource> & SourceTrustSelectorProps;
 /**
  * One configured source: a collapsed summary row (an always-visible
  * enable/disable toggle when the source declares `enabled` at all, plus
@@ -68,5 +69,5 @@ export interface SourceConfigItemCardProps<TSource extends SourceConfigItem> {
  * state privately. That sequencing is the honest shape of the card, not a
  * limitation of the markup.
  */
-export declare function SourceConfigItemCard<TSource extends SourceConfigItem>({ source, fieldSpecs, trustOptions, capabilities, removing, refreshing, settingTrust, testing, updating, testResult, onRefresh, onRemove, onTrustChange, onTest, onUpdate, agentHandle, }: SourceConfigItemCardProps<TSource>): import("react").JSX.Element;
+export declare function SourceConfigItemCard<TSource extends SourceConfigItem>(props: SourceConfigItemCardProps<TSource>): import("react").JSX.Element;
 //# sourceMappingURL=SourceConfigItemCard.d.ts.map

package/dist/features/source-config-list/react/components/SourceConfigItemCard.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useT } from '../../../i18n/index.js';
 import { sourceConfigActionHandle, sourceConfigAgentProps, sourceConfigFieldHandle } from '../../agent-handles.js';
 import { issueForField, maskFieldValue, sourceDisplayLabel, validateSourceDraft, } from '../../rules.js';
 import { SourceConfigField } from './SourceConfigField.js';
 import { SourceConfigTestControl } from './SourceConfigTestControl.js';
+import { SourceConfigTrustOptions } from './SourceConfigTrustOptions.js';
 /**
  * One configured source: a collapsed summary row (an always-visible
  * enable/disable toggle when the source declares `enabled` at all, plus
@@ -40,18 +41,58 @@ import { SourceConfigTestControl } from './SourceConfigTestControl.js';
  * state privately. That sequencing is the honest shape of the card, not a
  * limitation of the markup.
  */
-export function SourceConfigItemCard({ source, fieldSpecs, trustOptions, capabilities, removing, refreshing, settingTrust, testing, updating, testResult, onRefresh, onRemove, onTrustChange, onTest, onUpdate, agentHandle, }) {
-    const t = useT();
+export function SourceConfigItemCard(props) {
+    const { source, fieldSpecs, agentHandle } = props;
     const [expanded, setExpanded] = useState(false);
+    const edit = useItemCardEdit(props);
+    const label = sourceDisplayLabel(source, fieldSpecs);
+    return (_jsxs("article", { className: `source-config-item-card${expanded ? ' is-expanded' : ''}`, "data-testid": "source-config-item-card", ...sourceConfigAgentProps(agentHandle, { role: 'region', label }), children: [_jsxs("div", { className: "source-config-item-card-head", children: [_jsx(ItemCardEnabledToggle, { ...props, label: label }), _jsx(ItemCardSummary, { ...props, label: label, expanded: expanded, onToggle: () => setExpanded((current) => !current) }), _jsx(ItemCardActions, { ...props, label: label })] }), expanded ? _jsx(ItemCardBody, { ...props, label: label, edit: edit }) : null] }));
+}
+function isAnyActionPending({ removing, refreshing, settingTrust, updating }) {
+    return removing || refreshing || settingTrust || updating;
+}
+/** Always visible (no expand needed) — but only when the source declares `enabled` at all and the host can update it. */
+function ItemCardEnabledToggle({ source, capabilities, updating, onUpdate, agentHandle, label }) {
+    const t = useT();
+    if (source.enabled === undefined || !capabilities.canUpdate)
+        return null;
+    const enabledLabel = t('Enable {name}', { name: label });
+    return (_jsx("label", { className: "source-config-item-card-enabled-toggle", title: source.enabled ? t('Enabled') : t('Disabled'), children: _jsx("input", { type: "checkbox", checked: source.enabled, disabled: updating, "aria-label": enabledLabel, ...sourceConfigAgentProps(agentHandle, { role: 'checkbox', label: enabledLabel, action: 'enabled' }), onChange: (event) => onUpdate({ enabled: event.target.checked }) }) }));
+}
+function ItemCardSummary({ source, trustOptions, agentHandle, label, expanded, onToggle, }) {
+    const t = useT();
+    const trustOption = trustOptions?.find((option) => option.value === source.trust);
+    return (_jsxs("button", { type: "button", className: "source-config-item-card-summary", ...sourceConfigAgentProps(agentHandle, {
+            role: 'button',
+            // Stable ontology, so it must not read "Collapse" once expanded — see `agent-handles.ts`.
+            label: t('Show or hide details for {name}', { name: label }),
+            action: 'expand',
+        }), onClick: onToggle, "aria-expanded": expanded, children: [_jsx("span", { className: "source-config-item-card-label", children: label }), source.trust ? _jsx("span", { className: "source-config-item-card-trust-badge", children: t(trustOption?.label ?? source.trust) }) : null] }));
+}
+/** The trust selector (capability- and options-gated), Refresh (capability-gated) and the always-present Remove. */
+function ItemCardActions(props) {
+    const { capabilities, refreshing, removing, onRefresh, onRemove, agentHandle } = props;
+    const t = useT();
+    const anyActionPending = isAnyActionPending(props);
+    return (_jsxs("div", { className: "source-config-item-card-actions", children: [_jsx(ItemCardTrustSelect, { ...props }), capabilities.canRefresh ? (_jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Refresh'), action: 'refresh' }), onClick: onRefresh, disabled: anyActionPending, children: refreshing ? t('Refreshing…') : t('Refresh') })) : null, _jsx("button", { type: "button", className: "source-config-item-card-remove", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Remove'), action: 'remove' }), onClick: onRemove, disabled: anyActionPending, children: removing ? t('Removing…') : t('Remove') })] }));
+}
+function ItemCardTrustSelect(props) {
+    const t = useT();
+    // Narrow on `props` itself (not a destructured copy) so the non-empty `trustOptions` check also
+    // proves `onTrustChange` present — the `SourceTrustSelectorProps` union binds the two.
+    if (!props.capabilities.canSetTrust || !props.trustOptions || props.trustOptions.length === 0)
+        return null;
+    const { source, trustOptions, settingTrust, onTrustChange, agentHandle, label } = props;
+    const trustLabel = t('Trust level for {name}', { name: label });
+    return (_jsx("select", { value: source.trust ?? '', disabled: settingTrust, "aria-label": trustLabel, ...sourceConfigAgentProps(agentHandle, { role: 'field', label: trustLabel, action: 'trust' }), onChange: (event) => onTrustChange(event.target.value), children: _jsx(SourceConfigTrustOptions, { trust: source.trust, trustOptions: trustOptions }) }));
+}
+/** The private expand-to-edit draft: label + fields, seeded from the source each time editing starts. */
+function useItemCardEdit({ source, fieldSpecs, onUpdate }) {
     const [editing, setEditing] = useState(false);
     const [editLabel, setEditLabel] = useState('');
     const [editFields, setEditFields] = useState({});
     /** Errors stay hidden until the operator actually tries to save, matching the add form's `submitAttempted`. */
     const [saveAttempted, setSaveAttempted] = useState(false);
-    const label = sourceDisplayLabel(source, fieldSpecs);
-    const trustOption = trustOptions?.find((option) => option.value === source.trust);
-    const editableTrustOptions = capabilities.canSetTrust && trustOptions && trustOptions.length > 0 ? trustOptions : null;
-    const anyActionPending = removing || refreshing || settingTrust || updating;
     // The SAME validation the add form runs (`useSourceConfigAddForm`). The edit
     // path used to run none at all — not even the required-field check — so a
     // source added through a validated form could be edited into a state the form
@@ -75,18 +116,33 @@ export function SourceConfigItemCard({ source, fieldSpecs, trustOptions, capabil
         setSaveAttempted(false);
         setEditing(false);
     };
-    const enabledLabel = t('Enable {name}', { name: label });
-    const trustLabel = t('Trust level for {name}', { name: label });
-    return (_jsxs("article", { className: `source-config-item-card${expanded ? ' is-expanded' : ''}`, "data-testid": "source-config-item-card", ...sourceConfigAgentProps(agentHandle, { role: 'region', label }), children: [_jsxs("div", { className: "source-config-item-card-head", children: [source.enabled !== undefined && capabilities.canUpdate ? (_jsx("label", { className: "source-config-item-card-enabled-toggle", title: source.enabled ? t('Enabled') : t('Disabled'), children: _jsx("input", { type: "checkbox", checked: source.enabled, disabled: updating, "aria-label": enabledLabel, ...sourceConfigAgentProps(agentHandle, { role: 'checkbox', label: enabledLabel, action: 'enabled' }), onChange: (event) => onUpdate({ enabled: event.target.checked }) }) })) : null, _jsxs("button", { type: "button", className: "source-config-item-card-summary", ...sourceConfigAgentProps(agentHandle, {
-                            role: 'button',
-                            // Stable ontology, so it must not read "Collapse" once expanded — see `agent-handles.ts`.
-                            label: t('Show or hide details for {name}', { name: label }),
-                            action: 'expand',
-                        }), onClick: () => setExpanded((current) => !current), "aria-expanded": expanded, children: [_jsx("span", { className: "source-config-item-card-label", children: label }), source.trust ? (_jsx("span", { className: "source-config-item-card-trust-badge", children: t(trustOption?.label ?? source.trust) })) : null] }), _jsxs("div", { className: "source-config-item-card-actions", children: [editableTrustOptions ? (_jsxs("select", { value: source.trust ?? '', disabled: settingTrust, "aria-label": trustLabel, ...sourceConfigAgentProps(agentHandle, { role: 'field', label: trustLabel, action: 'trust' }), onChange: (event) => onTrustChange(event.target.value), children: [!source.trust ? (_jsx("option", { value: "", disabled: true, hidden: true, children: t('Select…') })) : null, editableTrustOptions.map((option) => (_jsx("option", { value: option.value, children: t(option.label) }, option.value)))] })) : null, capabilities.canRefresh ? (_jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Refresh'), action: 'refresh' }), onClick: onRefresh, disabled: anyActionPending, children: refreshing ? t('Refreshing…') : t('Refresh') })) : null, _jsx("button", { type: "button", className: "source-config-item-card-remove", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Remove'), action: 'remove' }), onClick: onRemove, disabled: anyActionPending, children: removing ? t('Removing…') : t('Remove') })] })] }), expanded ? (_jsxs("div", { className: "source-config-item-card-body", children: [capabilities.canUpdate ? (_jsx("div", { className: "source-config-item-card-edit-toggle", children: editing ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Save'), action: 'save' }), onClick: saveEditing, disabled: updating || (saveAttempted && !editValidation.ok), children: t('Save') }), _jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Cancel'), action: 'cancel' }), onClick: cancelEditing, disabled: updating, children: t('Cancel') })] })) : (_jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Edit'), action: 'edit' }), onClick: startEditing, disabled: anyActionPending, children: t('Edit') })) })) : null, editing ? (_jsxs("div", { className: "source-config-item-card-edit-fields", children: [_jsxs("label", { className: "source-config-field", htmlFor: `source-config-item-card-${source.id}-label`, children: [_jsx("span", { className: "source-config-field-label", children: t('Label') }), _jsx("input", { id: `source-config-item-card-${source.id}-label`, type: "text", value: editLabel, placeholder: label, ...sourceConfigAgentProps(agentHandle, { role: 'field', label: t('Label'), action: 'label' }), onChange: (event) => setEditLabel(event.target.value) })] }), fieldSpecs.map((spec) => {
-                                // Same `{label}`-template wrapping the add form uses — `rules.ts`
-                                // stays hook-free and returns i18n templates, not sentences.
-                                const issue = saveAttempted ? issueForField(editValidation, spec.key) : undefined;
-                                return (_jsx(SourceConfigField, { spec: spec, value: editFields[spec.key] ?? '', idPrefix: `source-config-item-card-${source.id}-field`, ...(issue ? { error: t(issue.message, { label: t(spec.label) }) } : {}), ...(agentHandle ? { agentHandle: sourceConfigFieldHandle(agentHandle, spec.key) } : {}), onChange: (value) => setEditFields((current) => ({ ...current, [spec.key]: value })) }, spec.key));
-                            })] })) : (_jsx("dl", { className: "source-config-item-card-fields", children: fieldSpecs.map((spec) => (_jsxs("div", { className: "source-config-item-card-field", children: [_jsx("dt", { children: t(spec.label) }), _jsx("dd", { children: maskFieldValue(spec.kind, source.fields[spec.key] ?? '') })] }, spec.key))) })), capabilities.canTest ? (_jsx(SourceConfigTestControl, { running: testing, disabled: anyActionPending, onTest: onTest, ...(testResult ? { result: testResult } : {}), ...(agentHandle ? { agentHandle: sourceConfigActionHandle(agentHandle, 'test') } : {}) })) : null] })) : null] }));
+    const setEditField = (key, value) => setEditFields((current) => ({ ...current, [key]: value }));
+    return { editing, editLabel, setEditLabel, editFields, setEditField, saveAttempted, editValidation, startEditing, cancelEditing, saveEditing };
+}
+/** The expanded body: the Edit/Save/Cancel toggle, the editable or read-only fields, and the test control. */
+function ItemCardBody(props) {
+    const { capabilities, testing, testResult, onTest, agentHandle, edit } = props;
+    return (_jsxs("div", { className: "source-config-item-card-body", children: [capabilities.canUpdate ? _jsx(ItemCardEditToggle, { ...props, edit: edit }) : null, edit.editing ? _jsx(ItemCardEditFields, { ...props, edit: edit }) : _jsx(ItemCardReadOnlyFields, { ...props }), capabilities.canTest ? (_jsx(SourceConfigTestControl, { running: testing, disabled: isAnyActionPending(props), onTest: onTest, ...(testResult ? { result: testResult } : {}), ...(agentHandle ? { agentHandle: sourceConfigActionHandle(agentHandle, 'test') } : {}) })) : null] }));
+}
+function ItemCardEditToggle(props) {
+    const { updating, agentHandle, edit } = props;
+    const t = useT();
+    if (!edit.editing) {
+        return (_jsx("div", { className: "source-config-item-card-edit-toggle", children: _jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Edit'), action: 'edit' }), onClick: edit.startEditing, disabled: isAnyActionPending(props), children: t('Edit') }) }));
+    }
+    return (_jsxs("div", { className: "source-config-item-card-edit-toggle", children: [_jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Save'), action: 'save' }), onClick: edit.saveEditing, disabled: updating || (edit.saveAttempted && !edit.editValidation.ok), children: t('Save') }), _jsx("button", { type: "button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Cancel'), action: 'cancel' }), onClick: edit.cancelEditing, disabled: updating, children: t('Cancel') })] }));
+}
+function ItemCardEditFields({ source, fieldSpecs, agentHandle, label, edit }) {
+    const t = useT();
+    return (_jsxs("div", { className: "source-config-item-card-edit-fields", children: [_jsxs("label", { className: "source-config-field", htmlFor: `source-config-item-card-${source.id}-label`, children: [_jsx("span", { className: "source-config-field-label", children: t('Label') }), _jsx("input", { id: `source-config-item-card-${source.id}-label`, type: "text", value: edit.editLabel, placeholder: label, ...sourceConfigAgentProps(agentHandle, { role: 'field', label: t('Label'), action: 'label' }), onChange: (event) => edit.setEditLabel(event.target.value) })] }), fieldSpecs.map((spec) => {
+                // Same `{label}`-template wrapping the add form uses — `rules.ts`
+                // stays hook-free and returns i18n templates, not sentences.
+                const issue = edit.saveAttempted ? issueForField(edit.editValidation, spec.key) : undefined;
+                return (_jsx(SourceConfigField, { spec: spec, value: edit.editFields[spec.key] ?? '', idPrefix: `source-config-item-card-${source.id}-field`, ...(issue ? { error: t(issue.message, { label: t(spec.label) }) } : {}), ...(agentHandle ? { agentHandle: sourceConfigFieldHandle(agentHandle, spec.key) } : {}), onChange: (value) => edit.setEditField(spec.key, value) }, spec.key));
+            })] }));
+}
+function ItemCardReadOnlyFields({ source, fieldSpecs }) {
+    const t = useT();
+    return (_jsx("dl", { className: "source-config-item-card-fields", children: fieldSpecs.map((spec) => (_jsxs("div", { className: "source-config-item-card-field", children: [_jsx("dt", { children: t(spec.label) }), _jsx("dd", { children: maskFieldValue(spec.kind, source.fields[spec.key] ?? '') })] }, spec.key))) }));
 }
 //# sourceMappingURL=SourceConfigItemCard.js.map

package/dist/features/source-config-list/react/components/SourceConfigListView.d.ts

@@ -1,5 +1,5 @@
 import type { SourceConfigItem, SourceFieldSpec, SourceTestResult, SourceTrustOption, SourceUpdateInput } from '../../types.js';
-import { type SourceConfigAddFormProps } from './SourceConfigAddForm.js';
+import { type SourceConfigAddFormBaseProps } from './SourceConfigAddForm.js';
 import type { SourceConfigListCapabilities } from '../hooks/useSourceConfigList.js';
 export interface SourceConfigListViewProps<TSource extends SourceConfigItem> {
     title?: string;
@@ -13,7 +13,9 @@ export interface SourceConfigListViewProps<TSource extends SourceConfigItem> {
     capabilities: SourceConfigListCapabilities;
     pendingKeys: ReadonlySet<string>;
     testResults: Record<string, SourceTestResult>;
-    addForm: Omit<SourceConfigAddFormProps, 'fieldSpecs' | 'trustOptions'>;
+    addForm: Omit<SourceConfigAddFormBaseProps, 'fieldSpecs'> & {
+        onTrustChange: (value: string) => void;
+    };
     onRefresh: (id: string) => void;
     onRemove: (id: string) => void;
     onTrustChange: (id: string, trust: string) => void;
@@ -37,5 +39,5 @@ export interface SourceConfigListViewProps<TSource extends SourceConfigItem> {
  * wired orchestrator (`SourceConfigList.tsx`) supplies every prop from its
  * hooks.
  */
-export declare function SourceConfigListView<TSource extends SourceConfigItem>({ title, subtitle, emptyMessage, fieldSpecs, trustOptions, sources, loading, loadError, capabilities, pendingKeys, testResults, addForm, onRefresh, onRemove, onTrustChange, onTest, onUpdate, agentHandle, }: SourceConfigListViewProps<TSource>): import("react").JSX.Element;
+export declare function SourceConfigListView<TSource extends SourceConfigItem>(props: SourceConfigListViewProps<TSource>): import("react").JSX.Element;
 //# sourceMappingURL=SourceConfigListView.d.ts.map

package/dist/features/source-config-list/react/components/SourceConfigListView.js

@@ -10,13 +10,43 @@ import { SourceConfigItemCard } from './SourceConfigItemCard.js';
  * wired orchestrator (`SourceConfigList.tsx`) supplies every prop from its
  * hooks.
  */
-export function SourceConfigListView({ title, subtitle, emptyMessage, fieldSpecs, trustOptions, sources, loading, loadError, capabilities, pendingKeys, testResults, addForm, onRefresh, onRemove, onTrustChange, onTest, onUpdate, agentHandle, }) {
+export function SourceConfigListView(props) {
+    const { title, subtitle, fieldSpecs, trustOptions, addForm, agentHandle } = props;
+    const resolvedAddFormHandle = addForm.agentHandle ?? (agentHandle ? sourceConfigAddFormHandle(agentHandle) : undefined);
+    return (_jsxs("section", { className: "source-config-list", children: [_jsx(SourceConfigListHead, { title: title, subtitle: subtitle }), _jsx(SourceConfigAddForm, { ...addForm, fieldSpecs: fieldSpecs, ...(trustOptions ? { trustOptions } : {}), ...(resolvedAddFormHandle ? { agentHandle: resolvedAddFormHandle } : {}) }), _jsx(SourceConfigListError, { loadError: props.loadError }), _jsx(SourceConfigListBody, { ...props })] }));
+}
+/** The optional title/subtitle block — omitted entirely when neither is given. */
+function SourceConfigListHead({ title, subtitle }) {
+    const t = useT();
+    if (!title && !subtitle)
+        return null;
+    return (_jsxs("div", { className: "source-config-list-head", children: [title ? _jsx("h3", { children: t(title) }) : null, subtitle ? _jsx("p", { className: "source-config-list-subtitle", children: t(subtitle) }) : null] }));
+}
+function SourceConfigListError({ loadError }) {
     const t = useT();
+    if (!loadError)
+        return null;
+    return (_jsx("div", { className: "source-config-list-error", role: "alert", children: t(loadError) }));
+}
+/** The loading indicator, the empty message, or one item card per source — in that order of precedence. */
+function SourceConfigListBody(props) {
+    const t = useT();
+    const { sources, loading, emptyMessage, agentHandle } = props;
+    if (loading) {
+        return (_jsx("div", { className: "source-config-list-loading", role: "status", children: t('Loading…') }));
+    }
+    if (sources.length === 0) {
+        return _jsx("div", { className: "source-config-list-empty", children: emptyMessage ? t(emptyMessage) : t('No sources configured yet.') });
+    }
     // Positionally aligned with `sources` below — computed once per render rather than per card, so
     // the O(n) suffix-search dedup in `buildAgentListHandles` runs once for the whole list, not once
     // per item.
     const itemHandles = agentHandle ? sourceConfigItemHandles(agentHandle, sources.map((source) => source.id)) : undefined;
-    const resolvedAddFormHandle = addForm.agentHandle ?? (agentHandle ? sourceConfigAddFormHandle(agentHandle) : undefined);
-    return (_jsxs("section", { className: "source-config-list", children: [title || subtitle ? (_jsxs("div", { className: "source-config-list-head", children: [title ? _jsx("h3", { children: t(title) }) : null, subtitle ? _jsx("p", { className: "source-config-list-subtitle", children: t(subtitle) }) : null] })) : null, _jsx(SourceConfigAddForm, { ...addForm, fieldSpecs: fieldSpecs, ...(trustOptions ? { trustOptions } : {}), ...(resolvedAddFormHandle ? { agentHandle: resolvedAddFormHandle } : {}) }), loadError ? (_jsx("div", { className: "source-config-list-error", role: "alert", children: t(loadError) })) : null, loading ? (_jsx("div", { className: "source-config-list-loading", role: "status", children: t('Loading…') })) : sources.length === 0 ? (_jsx("div", { className: "source-config-list-empty", children: emptyMessage ? t(emptyMessage) : t('No sources configured yet.') })) : (_jsx("div", { className: "source-config-list-items", children: sources.map((source, index) => (_jsx(SourceConfigItemCard, { source: source, fieldSpecs: fieldSpecs, capabilities: capabilities, removing: isActionPending(pendingKeys, source.id, 'remove'), refreshing: isActionPending(pendingKeys, source.id, 'refresh'), settingTrust: isActionPending(pendingKeys, source.id, 'trust'), testing: isActionPending(pendingKeys, source.id, 'test'), updating: isActionPending(pendingKeys, source.id, 'update'), onRefresh: () => onRefresh(source.id), onRemove: () => onRemove(source.id), onTrustChange: (trust) => onTrustChange(source.id, trust), onTest: () => onTest(source.id), onUpdate: (patch) => onUpdate(source.id, patch), ...(trustOptions ? { trustOptions } : {}), ...(testResults[source.id] ? { testResult: testResults[source.id] } : {}), ...(itemHandles ? { agentHandle: itemHandles[index] } : {}) }, source.id))) }))] }));
+    return (_jsx("div", { className: "source-config-list-items", children: sources.map((source, index) => (_jsx(SourceConfigListItem, { ...props, source: source, ...(itemHandles ? { itemHandle: itemHandles[index] } : {}) }, source.id))) }));
+}
+/** One source's card, with the list-level per-id callbacks and pending state bound to that source. */
+function SourceConfigListItem({ source, itemHandle, fieldSpecs, trustOptions, capabilities, pendingKeys, testResults, onRefresh, onRemove, onTrustChange, onTest, onUpdate, }) {
+    const testResult = testResults[source.id];
+    return (_jsx(SourceConfigItemCard, { source: source, fieldSpecs: fieldSpecs, capabilities: capabilities, removing: isActionPending(pendingKeys, source.id, 'remove'), refreshing: isActionPending(pendingKeys, source.id, 'refresh'), settingTrust: isActionPending(pendingKeys, source.id, 'trust'), testing: isActionPending(pendingKeys, source.id, 'test'), updating: isActionPending(pendingKeys, source.id, 'update'), onRefresh: () => onRefresh(source.id), onRemove: () => onRemove(source.id), onTrustChange: (trust) => onTrustChange(source.id, trust), onTest: () => onTest(source.id), onUpdate: (patch) => onUpdate(source.id, patch), ...(trustOptions ? { trustOptions } : {}), ...(testResult ? { testResult } : {}), ...(itemHandle !== undefined ? { agentHandle: itemHandle } : {}) }));
 }
 //# sourceMappingURL=SourceConfigListView.js.map

package/dist/features/source-config-list/react/components/SourceConfigTestControl.js

@@ -24,6 +24,22 @@ export function SourceConfigTestControl({ running, result, disabled = false, age
                     role: 'status',
                     label: t('Connection test result'),
                     action: 'status',
-                }), children: running ? (_jsx("span", { className: "source-config-test-status is-running", role: "status", "aria-live": "polite", children: t('Testing…') })) : result ? (_jsx("span", { className: result.ok ? 'source-config-test-status is-success' : 'source-config-test-status is-error', role: result.ok ? 'status' : 'alert', children: result.message ?? (result.ok ? t('Connection ok.') : t('Connection failed.')) })) : null }), _jsx("button", { type: "button", className: "source-config-test-button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Test connection') }), onClick: onTest, disabled: disabled || running, children: running ? t('Testing…') : result && !result.ok ? t('Retry') : t('Test') })] }));
+                }), children: _jsx(TestStatusMessage, { running: running, result: result }) }), _jsx("button", { type: "button", className: "source-config-test-button", ...sourceConfigAgentProps(agentHandle, { role: 'button', label: t('Test connection') }), onClick: onTest, disabled: disabled || running, children: testButtonLabel({ running, t }, { result }) })] }));
+}
+/** The status line's content: "Testing…" while running, the last result once one exists, nothing before the first test. */
+function TestStatusMessage({ running, result }) {
+    const t = useT();
+    if (running) {
+        return (_jsx("span", { className: "source-config-test-status is-running", role: "status", "aria-live": "polite", children: t('Testing…') }));
+    }
+    if (!result)
+        return null;
+    return (_jsx("span", { className: result.ok ? 'source-config-test-status is-success' : 'source-config-test-status is-error', role: result.ok ? 'status' : 'alert', children: result.message ?? (result.ok ? t('Connection ok.') : t('Connection failed.')) }));
+}
+/** "Testing…" while running, "Retry" after a failed result, otherwise "Test". */
+function testButtonLabel({ running, t }, { result }) {
+    if (running)
+        return t('Testing…');
+    return result && !result.ok ? t('Retry') : t('Test');
 }
 //# sourceMappingURL=SourceConfigTestControl.js.map

package/dist/features/source-config-list/react/components/SourceConfigTrustOptions.d.ts

@@ -0,0 +1,11 @@
+import type { SourceTrustOption } from '../../types.js';
+/**
+ * The `<option>` list both trust `<select>`s in this feature render (the add
+ * form's and each item card's): a hidden, disabled "Select…" placeholder while
+ * no trust value is chosen yet, then one option per `trustOptions` entry.
+ */
+export declare function SourceConfigTrustOptions({ trust, trustOptions }: {
+    trust?: string | undefined;
+    trustOptions: readonly SourceTrustOption[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=SourceConfigTrustOptions.d.ts.map

package/dist/features/source-config-list/react/components/SourceConfigTrustOptions.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../../../i18n/index.js';
+/**
+ * The `<option>` list both trust `<select>`s in this feature render (the add
+ * form's and each item card's): a hidden, disabled "Select…" placeholder while
+ * no trust value is chosen yet, then one option per `trustOptions` entry.
+ */
+export function SourceConfigTrustOptions({ trust, trustOptions }) {
+    const t = useT();
+    return (_jsxs(_Fragment, { children: [!trust ? (_jsx("option", { value: "", disabled: true, hidden: true, children: t('Select…') })) : null, trustOptions.map((option) => (_jsx("option", { value: option.value, children: t(option.label) }, option.value)))] }));
+}
+//# sourceMappingURL=SourceConfigTrustOptions.js.map

package/dist/features/source-config-list/types.d.ts

@@ -61,6 +61,20 @@ export interface SourceTrustOption {
     value: string;
     label: string;
 }
+/**
+ * The trust selector's two inputs, bound together. The selector only renders when `trustOptions` is
+ * non-empty, so its change handler is required exactly when options can be present and may be
+ * omitted when they are not — a host whose sources have no trust concept passes neither, instead of a
+ * no-op `onTrustChange` that can never fire. Passing options (even possibly-undefined ones) still
+ * requires the handler, so every pre-existing caller type-checks unchanged.
+ */
+export type SourceTrustSelectorProps = {
+    trustOptions?: readonly SourceTrustOption[] | undefined;
+    onTrustChange: (trust: string) => void;
+} | {
+    trustOptions?: undefined;
+    onTrustChange?: undefined;
+};
 export type SourceConnectionStatus = 'idle' | 'testing' | 'connected' | 'error';
 export interface SourceTestResult {
     ok: boolean;

package/dist/features/tab-launcher-menu/react/components/TabLauncherMenu.js

@@ -6,6 +6,14 @@ import { ALL_KIND_FILTER } from '../../constants.js';
 import { useTabLauncherMenu } from '../hooks/useTabLauncherMenu.js';
 import { TabLauncherActionRow } from './TabLauncherActionRow.js';
 import { TabLauncherResultRow } from './TabLauncherResultRow.js';
+function renderResultSection({ items, renderLabel, startIndex, selected, ...rowProps }, { renderIcon } = {}) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs("section", { className: "jini-tab-launcher-menu__section", children: [_jsx("div", { className: "jini-tab-launcher-menu__section-header", children: renderLabel() }), _jsx("ul", { className: "jini-tab-launcher-menu__list", children: items.map((item, index) => {
+                    const selectableIndex = startIndex + index;
+                    return (_jsx(TabLauncherResultRow, { item: item, selectableIndex: selectableIndex, selected: selectableIndex === selected, renderIcon: renderIcon, ...rowProps }, item.id));
+                }) })] }));
+}
 /**
  * An anchored, portal-rendered command-palette dropdown for a tab strip's
  * "+" button: viewport-clamped fixed positioning off an anchor element,
@@ -37,6 +45,22 @@ export function TabLauncherMenu({ searchPlaceholder, renderIcon, renderSearchIco
         return null;
     const openLabel = t('Open');
     const hasResults = menu.fileResults.length > 0 || menu.tabResults.length > 0;
-    return createPortal(_jsxs("div", { ref: menu.containerRef, className: "jini-tab-launcher-menu", style: { top: menu.position.top, left: menu.position.left }, role: "dialog", "aria-label": t('New tab'), children: [_jsxs("div", { className: "jini-tab-launcher-menu__search-row", children: [renderSearchIcon ? _jsx("span", { className: "jini-tab-launcher-menu__search-icon", "aria-hidden": "true", children: renderSearchIcon() }) : null, _jsx("input", { autoFocus: true, className: "jini-tab-launcher-menu__search-input", type: "text", value: menu.query, placeholder: searchPlaceholder ?? t('Search files…'), onChange: (event) => menu.setQuery(event.target.value), onKeyDown: menu.handleInputKeyDown })] }), menu.presentKinds.length > 0 ? (_jsxs("div", { className: "jini-tab-launcher-menu__chips", children: [_jsx("button", { type: "button", className: `jini-tab-launcher-menu__chip${menu.kindFilter === ALL_KIND_FILTER ? ' jini-tab-launcher-menu__chip--active' : ''}`, onClick: () => menu.setKindFilter(ALL_KIND_FILTER), children: t('All files') }), menu.presentKinds.map((kind) => (_jsx("button", { type: "button", className: `jini-tab-launcher-menu__chip${menu.kindFilter === kind ? ' jini-tab-launcher-menu__chip--active' : ''}`, onClick: () => menu.setKindFilter(kind), children: kind }, kind)))] })) : null, _jsxs("div", { className: "jini-tab-launcher-menu__scroll-body", children: [menu.actions.length > 0 ? (_jsxs("section", { className: "jini-tab-launcher-menu__section", children: [_jsx("div", { className: "jini-tab-launcher-menu__section-header", children: t('Create new') }), _jsx("ul", { className: "jini-tab-launcher-menu__list", children: menu.actions.map((action) => (_jsx(TabLauncherActionRow, { action: action, onSelect: menu.runAction, renderIcon: renderIcon }, action.id))) })] })) : null, menu.fileResults.length > 0 ? (_jsxs("section", { className: "jini-tab-launcher-menu__section", children: [_jsx("div", { className: "jini-tab-launcher-menu__section-header", children: t('Open file') }), _jsx("ul", { className: "jini-tab-launcher-menu__list", children: menu.fileResults.map((item, index) => (_jsx(TabLauncherResultRow, { item: item, selectableIndex: index, selected: index === menu.selected, openLabel: openLabel, onHover: menu.setSelected, onSelect: menu.selectFile, renderIcon: renderIcon }, item.id))) })] })) : null, menu.tabResults.length > 0 ? (_jsxs("section", { className: "jini-tab-launcher-menu__section", children: [_jsx("div", { className: "jini-tab-launcher-menu__section-header", children: t('Open tabs') }), _jsx("ul", { className: "jini-tab-launcher-menu__list", children: menu.tabResults.map((item, index) => (_jsx(TabLauncherResultRow, { item: item, selectableIndex: menu.fileResults.length + index, selected: menu.fileResults.length + index === menu.selected, openLabel: openLabel, onHover: menu.setSelected, onSelect: menu.selectTab, renderIcon: renderIcon }, item.id))) })] })) : null, !hasResults ? _jsx("div", { className: "jini-tab-launcher-menu__empty", children: t('No files match') }) : null] })] }), document.body);
+    return createPortal(_jsxs("div", { ref: menu.containerRef, className: "jini-tab-launcher-menu", style: { top: menu.position.top, left: menu.position.left }, role: "dialog", "aria-label": t('New tab'), children: [_jsxs("div", { className: "jini-tab-launcher-menu__search-row", children: [renderSearchIcon ? _jsx("span", { className: "jini-tab-launcher-menu__search-icon", "aria-hidden": "true", children: renderSearchIcon() }) : null, _jsx("input", { autoFocus: true, className: "jini-tab-launcher-menu__search-input", type: "text", value: menu.query, placeholder: searchPlaceholder ?? t('Search files…'), onChange: (event) => menu.setQuery(event.target.value), onKeyDown: menu.handleInputKeyDown })] }), menu.presentKinds.length > 0 ? (_jsxs("div", { className: "jini-tab-launcher-menu__chips", children: [_jsx("button", { type: "button", className: `jini-tab-launcher-menu__chip${menu.kindFilter === ALL_KIND_FILTER ? ' jini-tab-launcher-menu__chip--active' : ''}`, onClick: () => menu.setKindFilter(ALL_KIND_FILTER), children: t('All files') }), menu.presentKinds.map((kind) => (_jsx("button", { type: "button", className: `jini-tab-launcher-menu__chip${menu.kindFilter === kind ? ' jini-tab-launcher-menu__chip--active' : ''}`, onClick: () => menu.setKindFilter(kind), children: kind }, kind)))] })) : null, _jsxs("div", { className: "jini-tab-launcher-menu__scroll-body", children: [menu.actions.length > 0 ? (_jsxs("section", { className: "jini-tab-launcher-menu__section", children: [_jsx("div", { className: "jini-tab-launcher-menu__section-header", children: t('Create new') }), _jsx("ul", { className: "jini-tab-launcher-menu__list", children: menu.actions.map((action) => (_jsx(TabLauncherActionRow, { action: action, onSelect: menu.runAction, renderIcon: renderIcon }, action.id))) })] })) : null, renderResultSection({
+                        items: menu.fileResults,
+                        renderLabel: () => t('Open file'),
+                        startIndex: 0,
+                        selected: menu.selected,
+                        openLabel,
+                        onHover: menu.setSelected,
+                        onSelect: menu.selectFile,
+                    }, { renderIcon }), renderResultSection({
+                        items: menu.tabResults,
+                        renderLabel: () => t('Open tabs'),
+                        startIndex: menu.fileResults.length,
+                        selected: menu.selected,
+                        openLabel,
+                        onHover: menu.setSelected,
+                        onSelect: menu.selectTab,
+                    }, { renderIcon }), !hasResults ? _jsx("div", { className: "jini-tab-launcher-menu__empty", children: t('No files match') }) : null] })] }), document.body);
 }
 //# sourceMappingURL=TabLauncherMenu.js.map

package/dist/features/tab-launcher-menu/react/hooks/useTabLauncherMenu.js

@@ -75,28 +75,27 @@ export function useTabLauncherMenu(options) {
             setSelected((current) => nextSelected(current, selectableCount, -1));
             return;
         }
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            if (selectableCount > 0) {
-                const resolved = resolveSelection(selected, fileResults.length);
-                if (resolved.zone === 'file') {
-                    const file = fileResults[resolved.index];
-                    if (file)
-                        selectFile(file);
-                }
-                else {
-                    const tab = tabResults[resolved.index];
-                    if (tab)
-                        selectTab(tab);
-                }
-                return;
-            }
+        if (event.key !== 'Enter')
+            return;
+        event.preventDefault();
+        if (selectableCount === 0) {
             // No file/tab matches the query but "create new" actions exist —
             // Enter triggers the first one so the keyboard path is never a dead end.
             const firstAction = actions[0];
             if (firstAction)
                 runAction(firstAction);
+            return;
+        }
+        const resolved = resolveSelection(selected, fileResults.length);
+        if (resolved.zone === 'file') {
+            const file = fileResults[resolved.index];
+            if (file)
+                selectFile(file);
+            return;
         }
+        const tab = tabResults[resolved.index];
+        if (tab)
+            selectTab(tab);
     }, [selectableCount, selected, fileResults, tabResults, actions, selectFile, selectTab, runAction]);
     return {
         containerRef,

package/dist/features/tab-strip/react/components/TabBar.js

@@ -15,11 +15,18 @@ function tabDotAccessibleSuffix(tab) {
         return null;
     return _jsxs("span", { className: "visually-hidden", children: [", ", tab.dotLabel] });
 }
+function tabAccessibleLabel({ tab }, _optional = {}) {
+    if (!tab.dot || !tab.dotLabel)
+        return undefined;
+    return [tab.label + ", " + tab.dotLabel, tab.tag, tab.count]
+        .filter((part) => part !== undefined)
+        .join(" ");
+}
 /** One tab button. A named top-level component avoids the nesting penalty for branches inside
  * an inline map callback under the cyclomatic/cognitive complexity gate. Derived props live in
  * TabBar.hooks.tsx; tabDotAccessibleSuffix stays here because it renders JSX. */
 function TabBarButton({ tab, active, tabIndex, onChange, }) {
-    return (_jsxs("button", { type: "button", role: "tab", className: "tab-bar-item", "aria-selected": active, "aria-label": tab.dot && tab.dotLabel ? [tab.label + ", " + tab.dotLabel, tab.tag, tab.count].filter((part) => part !== undefined).join(" ") : undefined, "aria-disabled": tab.disabled || undefined, disabled: tab.disabled, tabIndex: tabIndex, onClick: tab.disabled ? undefined : () => onChange(tab.id), ...tabHandleProps({ tab: tab }), children: [tab.dot ? _jsx("span", { className: "tab-bar-dot", "aria-hidden": "true" }) : null, tab.icon ? (_jsx("span", { className: "tab-bar-icon", "aria-hidden": "true", children: tab.icon })) : null, tab.label, tabDotAccessibleSuffix(tab), tab.tag ? _jsx("span", { className: "tab-bar-tag", children: tab.tag }) : null, tab.count !== undefined ? _jsx("span", { className: "tab-bar-count", children: tab.count }) : null] }));
+    return (_jsxs("button", { type: "button", role: "tab", className: "tab-bar-item", "aria-selected": active, "aria-label": tabAccessibleLabel({ tab }), "aria-disabled": tab.disabled || undefined, disabled: tab.disabled, tabIndex: tabIndex, onClick: tab.disabled ? undefined : () => onChange(tab.id), ...tabHandleProps({ tab: tab }), children: [tab.dot ? _jsx("span", { className: "tab-bar-dot", "aria-hidden": "true" }) : null, tab.icon ? (_jsx("span", { className: "tab-bar-icon", "aria-hidden": "true", children: tab.icon })) : null, tab.label, tabDotAccessibleSuffix(tab), tab.tag ? _jsx("span", { className: "tab-bar-tag", children: tab.tag }) : null, tab.count !== undefined ? _jsx("span", { className: "tab-bar-count", children: tab.count }) : null] }));
 }
 /** Controlled button-based selection strip, including roving focus and optional agent handles. */
 export function TabBar({ tabs, activeId, onChange, ariaLabel, containerHandle }, _optional = {}) {

package/dist/features/tabbed-dialog/react/components/TabbedDialog.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useT } from '../../../i18n/index.js';
-import { Icon } from '../../../../react/components/Icon.js';
 import { findActiveTab } from '../../rules.js';
 import { useTabbedDialog } from '../hooks/useTabbedDialog.js';
+import { TabbedDialogChrome } from './TabbedDialogChrome.js';
+import { TabbedDialogHeader } from './TabbedDialogHeader.js';
+import { TabbedDialogSidebar } from './TabbedDialogSidebar.js';
+import { buildTabbedDialogClassName, dialogRootRoleProps, resolveIsModal, resolveTabbedDialogLabels, } from './tabbedDialogView.js';
 /**
  * Generic tabbed-dialog chrome: modal backdrop + sidebar nav + active-panel
  * switching + fullscreen/collapse/close affordances. Carries no opinion
@@ -23,7 +26,7 @@ import { useTabbedDialog } from '../hooks/useTabbedDialog.js';
  * itself never reached into a tab's internals.
  */
 export function TabbedDialog({ tabs, initialActiveTabId, activeTabId: controlledActiveTabId, onActiveTabIdChange, onClose, presentation, welcome = false, defaultSidebarCollapsed = false, fullscreenEnabled = true, defaultFullscreen = false, labels, chromeExtra, dialogAriaLabelledBy = 'tabbed-dialog-title', className, }) {
-    const isModal = (presentation ?? (onClose ? 'modal' : 'inline')) === 'modal';
+    const isModal = resolveIsModal({ hasOnClose: Boolean(onClose) }, { presentation });
     const t = useT();
     const shell = useTabbedDialog({
         tabs,
@@ -35,33 +38,8 @@ export function TabbedDialog({ tabs, initialActiveTabId, activeTabId: controlled
         defaultFullscreen,
     });
     const activeTab = findActiveTab(tabs, shell.activeTabId);
-    // No brand/product word defaults to a bare `''` here on purpose — this component has no
-    // opinion about what it's a dialog FOR. A host that wants a kicker (as `SettingsDialogShell`
-    // does, with `t('Settings')`) supplies one via `labels.kicker`.
-    const kicker = labels?.kicker ?? '';
-    const welcomeKicker = labels?.welcomeKicker ?? t('Welcome');
-    const welcomeTitle = labels?.welcomeTitle ?? t('Get started');
-    const welcomeSubtitle = labels?.welcomeSubtitle ?? t('Set up your preferences before you begin.');
-    const closeLabel = labels?.closeLabel ?? t('Close');
-    const fullscreenLabel = labels?.fullscreenLabel ?? t('Fullscreen');
-    const exitFullscreenLabel = labels?.exitFullscreenLabel ?? t('Exit fullscreen');
-    const collapseSidebarLabel = labels?.collapseSidebarLabel ?? t('Collapse sidebar');
-    const expandSidebarLabel = labels?.expandSidebarLabel ?? t('Expand sidebar');
-    const sidebarAriaLabel = labels?.sidebarAriaLabel ?? t('Sections');
-    const sidebarToggleLabel = shell.sidebarCollapsed ? expandSidebarLabel : collapseSidebarLabel;
-    const fullscreenToggleLabel = shell.fullscreen ? exitFullscreenLabel : fullscreenLabel;
-    const dialogClassName = [
-        'jini-tabbed-dialog',
-        shell.sidebarCollapsed ? 'jini-tabbed-dialog-sidebar-collapsed' : '',
-        shell.fullscreen ? 'jini-tabbed-dialog-fullscreen' : '',
-        className ?? '',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const body = (_jsxs("div", { className: dialogClassName, role: isModal ? 'dialog' : 'region', "aria-modal": isModal ? true : undefined, "aria-labelledby": dialogAriaLabelledBy, onClick: isModal ? (event) => event.stopPropagation() : undefined, children: [_jsxs("div", { className: "jini-tabbed-dialog-chrome", children: [chromeExtra, fullscreenEnabled ? (_jsx("button", { type: "button", className: "jini-tabbed-dialog-chrome-btn jini-tabbed-dialog-fullscreen-toggle", onClick: shell.toggleFullscreen, "aria-label": fullscreenToggleLabel, "aria-pressed": shell.fullscreen, title: fullscreenToggleLabel, children: _jsx(Icon, { name: shell.fullscreen ? 'minimize' : 'maximize', size: 15, strokeWidth: 2 }) })) : null, onClose ? (_jsx("button", { type: "button", className: "jini-tabbed-dialog-chrome-btn jini-tabbed-dialog-close", onClick: onClose, "aria-label": closeLabel, title: closeLabel, children: _jsx(Icon, { name: "close", size: 16, strokeWidth: 2 }) })) : null] }), _jsx("header", { className: "jini-tabbed-dialog-head", id: dialogAriaLabelledBy, children: welcome ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "jini-tabbed-dialog-kicker", children: welcomeKicker }), _jsx("h2", { children: welcomeTitle }), _jsx("p", { className: "jini-tabbed-dialog-subtitle", children: welcomeSubtitle })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "jini-tabbed-dialog-kicker", children: kicker }), _jsxs("div", { className: "jini-tabbed-dialog-head-line", children: [_jsx("h2", { children: activeTab?.title ?? activeTab?.label ?? '' }), activeTab?.subtitle ? (_jsx("p", { className: "jini-tabbed-dialog-subtitle", children: activeTab.subtitle })) : null] })] })) }), _jsxs("div", { className: "jini-tabbed-dialog-body", children: [_jsx("button", { type: "button", className: "jini-tabbed-dialog-sidebar-toggle", onClick: shell.toggleSidebarCollapsed, "aria-label": sidebarToggleLabel, "aria-pressed": shell.sidebarCollapsed, "aria-controls": "jini-tabbed-dialog-sidebar", title: sidebarToggleLabel, children: _jsx(Icon, { name: shell.sidebarCollapsed ? 'chevron-right' : 'chevron-left', size: 15, strokeWidth: 2 }) }), _jsx("aside", { id: "jini-tabbed-dialog-sidebar", className: "jini-tabbed-dialog-sidebar", "aria-label": sidebarAriaLabel, "aria-hidden": shell.sidebarCollapsed ? true : undefined, children: tabs.map((tab) => {
-                            const active = tab.id === shell.activeTabId;
-                            return (_jsxs("button", { type: "button", className: `jini-tabbed-dialog-nav-item${active ? ' active' : ''}`, "aria-pressed": active, onClick: () => shell.setActiveTabId(tab.id), "data-testid": `settings-dialog-nav-${tab.id}`, "data-agent-element": isModal ? undefined : `tab-${tab.id}`, "data-agent-role": isModal ? undefined : 'button', "data-agent-label": isModal ? undefined : tab.label, children: [_jsx("span", { className: "jini-tabbed-dialog-nav-icon", "aria-hidden": "true", children: tab.icon }), _jsxs("span", { className: "jini-tabbed-dialog-nav-text", children: [_jsx("strong", { children: tab.label }), tab.navHint ? _jsx("small", { children: tab.navHint }) : null] })] }, tab.id));
-                        }) }), _jsx("div", { className: "jini-tabbed-dialog-content", ref: shell.contentRef, children: activeTab?.panel })] })] }));
+    const resolvedLabels = resolveTabbedDialogLabels({ t }, { labels });
+    const body = (_jsxs("div", { className: buildTabbedDialogClassName(shell, { className }), ...dialogRootRoleProps({ isModal }), "aria-labelledby": dialogAriaLabelledBy, children: [_jsx(TabbedDialogChrome, { chromeExtra: chromeExtra, fullscreenEnabled: fullscreenEnabled, fullscreen: shell.fullscreen, onToggleFullscreen: shell.toggleFullscreen, onClose: onClose, labels: resolvedLabels }), _jsx(TabbedDialogHeader, { id: dialogAriaLabelledBy, welcome: welcome, activeTab: activeTab, labels: resolvedLabels }), _jsxs("div", { className: "jini-tabbed-dialog-body", children: [_jsx(TabbedDialogSidebar, { tabs: tabs, activeTabId: shell.activeTabId, isModal: isModal, collapsed: shell.sidebarCollapsed, onToggleCollapsed: shell.toggleSidebarCollapsed, onSelect: shell.setActiveTabId, labels: resolvedLabels }), _jsx("div", { className: "jini-tabbed-dialog-content", ref: shell.contentRef, children: activeTab?.panel })] })] }));
     // Inline presentation returns the panel bare: no fixed-position backdrop, no
     // `aria-modal`, no click-outside handler. Wrapping it anyway is what made an
     // embedded shell paint a full-viewport overlay over its own host's chrome.

package/dist/features/tabbed-dialog/react/components/TabbedDialogChrome.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { ResolvedTabbedDialogLabels } from './tabbedDialogView.js';
+export interface TabbedDialogChromeProps {
+    /** Host-owned extra chrome, rendered as-is ahead of the built-in buttons. */
+    chromeExtra?: ReactNode;
+    fullscreenEnabled: boolean;
+    fullscreen: boolean;
+    onToggleFullscreen: () => void;
+    /** Omit to render no close button. */
+    onClose?: (() => void) | undefined;
+    labels: ResolvedTabbedDialogLabels;
+}
+/** The top-right strip: host extras, the fullscreen toggle, and the close button. */
+export declare function TabbedDialogChrome({ chromeExtra, fullscreenEnabled, fullscreen, onToggleFullscreen, onClose, labels, }: TabbedDialogChromeProps): import("react").JSX.Element;
+//# sourceMappingURL=TabbedDialogChrome.d.ts.map

package/dist/features/tabbed-dialog/react/components/TabbedDialogChrome.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../../../react/components/Icon.js';
+/** The top-right strip: host extras, the fullscreen toggle, and the close button. */
+export function TabbedDialogChrome({ chromeExtra, fullscreenEnabled, fullscreen, onToggleFullscreen, onClose, labels, }) {
+    const fullscreenToggleLabel = fullscreen ? labels.exitFullscreenLabel : labels.fullscreenLabel;
+    return (_jsxs("div", { className: "jini-tabbed-dialog-chrome", children: [chromeExtra, fullscreenEnabled ? (_jsx("button", { type: "button", className: "jini-tabbed-dialog-chrome-btn jini-tabbed-dialog-fullscreen-toggle", onClick: onToggleFullscreen, "aria-label": fullscreenToggleLabel, "aria-pressed": fullscreen, title: fullscreenToggleLabel, children: _jsx(Icon, { name: fullscreen ? 'minimize' : 'maximize', size: 15, strokeWidth: 2 }) })) : null, onClose ? (_jsx("button", { type: "button", className: "jini-tabbed-dialog-chrome-btn jini-tabbed-dialog-close", onClick: onClose, "aria-label": labels.closeLabel, title: labels.closeLabel, children: _jsx(Icon, { name: "close", size: 16, strokeWidth: 2 }) })) : null] }));
+}
+//# sourceMappingURL=TabbedDialogChrome.js.map

package/dist/features/tabbed-dialog/react/components/TabbedDialogHeader.d.ts

@@ -0,0 +1,12 @@
+import type { TabbedDialogTabMeta } from '../../types.js';
+import type { ResolvedTabbedDialogLabels } from './tabbedDialogView.js';
+export interface TabbedDialogHeaderProps {
+    /** Element id the dialog root's `aria-labelledby` points at. */
+    id: string;
+    welcome: boolean;
+    activeTab: TabbedDialogTabMeta | undefined;
+    labels: ResolvedTabbedDialogLabels;
+}
+/** Either the welcome hero (kicker/title/subtitle) or the active tab's own header. */
+export declare function TabbedDialogHeader({ id, welcome, activeTab, labels }: TabbedDialogHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=TabbedDialogHeader.d.ts.map

package/dist/features/tabbed-dialog/react/components/TabbedDialogHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Either the welcome hero (kicker/title/subtitle) or the active tab's own header. */
+export function TabbedDialogHeader({ id, welcome, activeTab, labels }) {
+    return (_jsx("header", { className: "jini-tabbed-dialog-head", id: id, children: welcome ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "jini-tabbed-dialog-kicker", children: labels.welcomeKicker }), _jsx("h2", { children: labels.welcomeTitle }), _jsx("p", { className: "jini-tabbed-dialog-subtitle", children: labels.welcomeSubtitle })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "jini-tabbed-dialog-kicker", children: labels.kicker }), _jsxs("div", { className: "jini-tabbed-dialog-head-line", children: [_jsx("h2", { children: activeTab?.title ?? activeTab?.label ?? '' }), activeTab?.subtitle ? _jsx("p", { className: "jini-tabbed-dialog-subtitle", children: activeTab.subtitle }) : null] })] })) }));
+}
+//# sourceMappingURL=TabbedDialogHeader.js.map

package/dist/features/tabbed-dialog/react/components/TabbedDialogSidebar.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { TabbedDialogTabMeta } from '../../types.js';
+import type { ResolvedTabbedDialogLabels } from './tabbedDialogView.js';
+/** The slice of a tab the sidebar nav renders (no `panel`). */
+export type TabbedDialogNavTab = TabbedDialogTabMeta & {
+    icon?: ReactNode;
+};
+export interface TabbedDialogNavItemProps {
+    tab: TabbedDialogNavTab;
+    active: boolean;
+    isModal: boolean;
+    onSelect: (tabId: string) => void;
+}
+/** One sidebar nav button. */
+export declare function TabbedDialogNavItem({ tab, active, isModal, onSelect }: TabbedDialogNavItemProps): import("react").JSX.Element;
+export interface TabbedDialogSidebarProps {
+    tabs: readonly TabbedDialogNavTab[];
+    activeTabId: string | null;
+    isModal: boolean;
+    collapsed: boolean;
+    onToggleCollapsed: () => void;
+    onSelect: (tabId: string) => void;
+    labels: ResolvedTabbedDialogLabels;
+}
+/** The collapse toggle plus the sidebar nav it controls. */
+export declare function TabbedDialogSidebar({ tabs, activeTabId, isModal, collapsed, onToggleCollapsed, onSelect, labels, }: TabbedDialogSidebarProps): import("react").JSX.Element;
+//# sourceMappingURL=TabbedDialogSidebar.d.ts.map