@jini-ai/ui 0.3.13 → 0.4.0

package/dist/features/sketch-editor/react/hooks/useSketchDomEnhancements.js

@@ -61,16 +61,18 @@ export function useSketchDomEnhancements({ containerRef, t, domTextOverrides, to
     // exact shape out of this hook. `useGlobalKeydown` re-reads its handler
     // via a latest-ref internally, so passing a fresh closure each render is
     // fine — no memoization needed here.
-    useGlobalKeydown((event) => {
-        if (event.key !== 'Escape')
-            return;
-        if (!document.querySelector('.jini-sketch-modal .Modal'))
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        onCloseActiveDialog();
+    useGlobalKeydown({
+        handler: (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (!document.querySelector('.jini-sketch-modal .Modal'))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            onCloseActiveDialog();
+        },
     }, { target: 'document', capture: true });
-    useGlobalKeydown((event) => handleSketchPortalCommandEnter(event, mermaidInsertLabelPattern), {
+    useGlobalKeydown({ handler: (event) => handleSketchPortalCommandEnter(event, mermaidInsertLabelPattern) }, {
         target: 'document',
         capture: true,
     });

package/dist/features/sketch-editor/types.d.ts

@@ -2,7 +2,7 @@
  * Generic scene/toast/tooltip shapes for embedding an Excalidraw-backed
  * sketch surface. Deliberately excludes any pre-Excalidraw legacy item
  * format — that migration path is a host-product concern, not part of the
- * generic shim. See `packages/ui/source-map.md` for provenance.
+ * generic shim. See `packages/ui/archived provenance ledger` for provenance.
  */
 /** A serializable Excalidraw scene: elements + sanitized app state + files. */
 export interface SketchScene {

package/dist/features/sketch-editor/types.js

@@ -2,7 +2,7 @@
  * Generic scene/toast/tooltip shapes for embedding an Excalidraw-backed
  * sketch surface. Deliberately excludes any pre-Excalidraw legacy item
  * format — that migration path is a host-product concern, not part of the
- * generic shim. See `packages/ui/source-map.md` for provenance.
+ * generic shim. See `packages/ui/archived provenance ledger` for provenance.
  */
 export {};
 //# sourceMappingURL=types.js.map

package/dist/features/skills/react/components/SkillDraftForm.js

@@ -25,6 +25,6 @@ export function SkillDraftForm({ heading, subheading, draft, onDraftChange, erro
     const bodyRequiredError = labels?.bodyRequiredError ?? t('Body is required.');
     const submitLabel = saving ? savingLabel : isEdit ? (isBuiltInOverride ? overrideSaveLabel : saveLabel) : createLabel;
     const errorText = error?.kind === 'name-required' ? nameRequiredError : error?.kind === 'body-required' ? bodyRequiredError : (error?.message ?? null);
-    return (_jsxs("div", { className: "jini-settings-subsection jini-skills-draft", "data-testid": isEdit ? 'skills-edit-form' : 'skills-create-form', children: [_jsx("div", { className: "jini-section-head", children: _jsxs("div", { children: [_jsx("h4", { children: heading }), subheading ? _jsx("p", { className: "jini-hint", children: subheading }) : null] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: nameLabel }), _jsx("input", { type: "text", value: draft.name, onChange: (event) => onDraftChange((current) => ({ ...current, name: event.target.value })), placeholder: namePlaceholder, disabled: isEdit, ...agentHandleProps(agentHandle, { action: 'name', role: 'field', label: nameLabel }) })] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: triggersLabel }), _jsx("input", { type: "text", value: draft.triggers, onChange: (event) => onDraftChange((current) => ({ ...current, triggers: event.target.value })), placeholder: triggersPlaceholder, ...agentHandleProps(agentHandle, { action: 'triggers', role: 'field', label: triggersLabel }) })] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: descriptionLabel }), _jsx("textarea", { rows: 2, value: draft.description, onChange: (event) => onDraftChange((current) => ({ ...current, description: event.target.value })), placeholder: descriptionPlaceholder, ...agentHandleProps(agentHandle, { action: 'description', role: 'field', label: descriptionLabel }) })] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: bodyLabel }), _jsx("textarea", { rows: 14, value: draft.body, onChange: (event) => onDraftChange((current) => ({ ...current, body: event.target.value })), placeholder: bodyPlaceholder, ...agentHandleProps(agentHandle, { action: 'body', role: 'field', label: bodyLabel }) })] }) }), errorText ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: errorText })) : null, _jsxs("div", { className: "jini-skills-draft-actions", children: [_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onCancel, disabled: saving, ...agentHandleProps(agentHandle, { action: 'cancel', role: 'button', label: cancelLabel }), children: cancelLabel }), _jsx("button", { type: "button", className: "jini-button jini-button-primary", onClick: onSubmit, disabled: saving, "data-testid": "skills-save", ...agentHandleProps(agentHandle, { action: 'submit', role: 'button', label: submitLabel }), children: submitLabel })] })] }));
+    return (_jsxs("div", { className: "jini-settings-subsection jini-skills-draft", "data-testid": isEdit ? 'skills-edit-form' : 'skills-create-form', children: [_jsx("div", { className: "jini-section-head", children: _jsxs("div", { children: [_jsx("h4", { children: heading }), subheading ? _jsx("p", { className: "jini-hint", children: subheading }) : null] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: nameLabel }), _jsx("input", { type: "text", value: draft.name, onChange: (event) => onDraftChange((current) => ({ ...current, name: event.target.value })), placeholder: namePlaceholder, disabled: isEdit, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'name', role: 'field', label: nameLabel }) }) })] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: triggersLabel }), _jsx("input", { type: "text", value: draft.triggers, onChange: (event) => onDraftChange((current) => ({ ...current, triggers: event.target.value })), placeholder: triggersPlaceholder, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'triggers', role: 'field', label: triggersLabel }) }) })] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: descriptionLabel }), _jsx("textarea", { rows: 2, value: draft.description, onChange: (event) => onDraftChange((current) => ({ ...current, description: event.target.value })), placeholder: descriptionPlaceholder, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'description', role: 'field', label: descriptionLabel }) }) })] }) }), _jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: bodyLabel }), _jsx("textarea", { rows: 14, value: draft.body, onChange: (event) => onDraftChange((current) => ({ ...current, body: event.target.value })), placeholder: bodyPlaceholder, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'body', role: 'field', label: bodyLabel }) }) })] }) }), errorText ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: errorText })) : null, _jsxs("div", { className: "jini-skills-draft-actions", children: [_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onCancel, disabled: saving, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'cancel', role: 'button', label: cancelLabel }) }), children: cancelLabel }), _jsx("button", { type: "button", className: "jini-button jini-button-primary", onClick: onSubmit, disabled: saving, "data-testid": "skills-save", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'submit', role: 'button', label: submitLabel }) }), children: submitLabel })] })] }));
 }
 //# sourceMappingURL=SkillDraftForm.js.map

package/dist/features/skills/react/components/SkillRow.js

@@ -30,6 +30,6 @@ export function SkillRow({ skill, locale, enabled, expanded, editing, body, body
     const bodyHeading = labels?.bodyHeading ?? t('SKILL.md');
     const userBadge = labels?.userBadge ?? t('user');
     const overrideWarning = labels?.overrideWarning ?? t('This skill ships with the host. Editing it creates your own copy — the original is unaffected.');
-    return (_jsxs("div", { className: `jini-skills-row${enabled ? '' : ' jini-skills-row-disabled'}${expanded ? ' jini-skills-row-expanded' : ''}`, "data-testid": `skill-row-${skill.id}`, children: [_jsxs("div", { className: "jini-skills-row-head", children: [_jsxs("button", { type: "button", className: "jini-skills-row-summary-btn", onClick: onToggleExpanded, "aria-expanded": expanded, title: expanded ? collapseLabel : expandLabel, ...agentHandleProps(agentHandle, { action: 'expand', role: 'button', label: name }), children: [_jsx(Icon, { name: "puzzle", size: 14, "aria-hidden": "true" }), _jsxs("span", { className: "jini-skills-row-summary", children: [_jsxs("span", { className: "jini-skills-row-summary-line", children: [_jsx("strong", { children: name }), _jsx("span", { className: "jini-skills-row-summary-mode", children: skill.mode }), skill.category ? (_jsx("span", { className: "jini-skills-row-summary-category", title: humanizeSkillCategory(skill.category), children: humanizeSkillCategory(skill.category) })) : null, skill.source === 'user' ? _jsx("span", { className: "jini-skills-row-summary-source", children: userBadge }) : null] }), description ? _jsx("span", { className: "jini-hint", children: description }) : null] }), _jsx(Icon, { name: "chevron-down", size: 14, "aria-hidden": "true" })] }), _jsxs("div", { className: "jini-skills-row-actions", children: [canDelete && confirmDelete ? (_jsxs("span", { className: "jini-skills-delete-confirm", role: "group", children: [_jsx("button", { type: "button", className: "jini-button jini-button-danger", onClick: onCommitDelete, "data-testid": "skills-delete-confirm", ...agentHandleProps(agentHandle, { action: 'delete-confirm', role: 'button', label: deleteConfirmLabel }), children: deleteConfirmLabel }), _jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onCancelDelete, ...agentHandleProps(agentHandle, { action: 'delete-cancel', role: 'button', label: cancelLabel }), children: cancelLabel })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onStartEdit, "aria-label": builtIn ? overrideCreateLabel : editLabel, title: builtIn ? overrideCreateLabel : editLabel, "data-testid": "skills-edit", ...agentHandleProps(agentHandle, { action: 'edit', role: 'button', label: builtIn ? overrideCreateLabel : editLabel }), children: _jsx(Icon, { name: "edit", size: 13 }) }), canDelete ? (_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onArmDelete, "aria-label": deleteLabel, title: deleteLabel, "data-testid": "skills-delete", ...agentHandleProps(agentHandle, { action: 'delete', role: 'button', label: deleteLabel }), children: _jsx(Icon, { name: "close", size: 13 }) })) : null] })), _jsxs("label", { className: "toggle-switch toggle-switch-sm jini-skills-row-enable", title: enableToggleLabel, children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (event) => onToggleEnabled(event.target.checked), "aria-label": enableToggleLabel, ...agentHandleProps(agentHandle, { action: 'enabled', role: 'checkbox', label: enableToggleLabel }) }), _jsx("span", { className: "toggle-slider" })] })] })] }), confirmBuiltInEdit ? (_jsxs("div", { className: "jini-empty-card jini-empty-card-warning", role: "alert", "data-testid": "skills-edit-builtin-warning", children: [_jsx("p", { children: overrideWarning }), _jsxs("div", { className: "jini-skills-draft-actions", children: [_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onCancelBuiltInEdit, "data-testid": "skills-edit-builtin-cancel", ...agentHandleProps(agentHandle, { action: 'builtin-edit-cancel', role: 'button', label: cancelLabel }), children: cancelLabel }), _jsx("button", { type: "button", className: "jini-button jini-button-primary", onClick: onConfirmBuiltInEdit, "data-testid": "skills-edit-builtin-confirm", ...agentHandleProps(agentHandle, { action: 'builtin-edit-confirm', role: 'button', label: overrideCreateLabel }), children: overrideCreateLabel })] })] })) : null, expanded && !editing ? (_jsxs("div", { className: "jini-skills-row-detail", children: [_jsxs("div", { className: "jini-settings-subsection", children: [_jsx("h5", { children: bodyHeading }), bodyLoading ? _jsx("p", { className: "jini-hint", children: loadingLabel }) : _jsx("pre", { className: "jini-skills-body-preview", children: body ?? '' })] }), _jsxs("div", { className: "jini-settings-subsection", children: [_jsx("h5", { children: filesHeading }), filesLoading ? (_jsx("p", { className: "jini-hint", children: loadingLabel })) : !files || files.length === 0 ? (_jsx("p", { className: "jini-hint", children: noFilesLabel })) : (_jsx("ul", { className: "jini-skills-file-tree", children: files.map((entry) => (_jsxs("li", { className: "jini-skills-file-entry", style: { paddingLeft: skillFileTreeIndent(entry.path) }, children: [_jsx(Icon, { name: entry.kind === 'directory' ? 'folder' : 'file', size: 12 }), _jsx("span", { children: skillFileLeafName(entry.path) }), entry.kind === 'file' && typeof entry.size === 'number' ? (_jsx("span", { className: "jini-hint", children: formatSkillFileSize(entry.size) })) : null] }, entry.path))) }))] })] })) : null, editing && draft ? (_jsx(SkillDraftForm, { heading: builtIn ? overrideCreateLabel : editLabel, subheading: skill.id, draft: draft, onDraftChange: onDraftChange, error: draftError, saving: draftSaving, isEdit: true, isBuiltInOverride: builtIn, onCancel: onCancelEdit, onSubmit: onSubmitEdit, labels: labels, ...(agentHandle ? { agentHandle: agentSubHandle(agentHandle, 'edit-form') } : {}) })) : null] }));
+    return (_jsxs("div", { className: `jini-skills-row${enabled ? '' : ' jini-skills-row-disabled'}${expanded ? ' jini-skills-row-expanded' : ''}`, "data-testid": `skill-row-${skill.id}`, children: [_jsxs("div", { className: "jini-skills-row-head", children: [_jsxs("button", { type: "button", className: "jini-skills-row-summary-btn", onClick: onToggleExpanded, "aria-expanded": expanded, title: expanded ? collapseLabel : expandLabel, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'expand', role: 'button', label: name }) }), children: [_jsx(Icon, { name: "puzzle", size: 14, "aria-hidden": "true" }), _jsxs("span", { className: "jini-skills-row-summary", children: [_jsxs("span", { className: "jini-skills-row-summary-line", children: [_jsx("strong", { children: name }), _jsx("span", { className: "jini-skills-row-summary-mode", children: skill.mode }), skill.category ? (_jsx("span", { className: "jini-skills-row-summary-category", title: humanizeSkillCategory(skill.category), children: humanizeSkillCategory(skill.category) })) : null, skill.source === 'user' ? _jsx("span", { className: "jini-skills-row-summary-source", children: userBadge }) : null] }), description ? _jsx("span", { className: "jini-hint", children: description }) : null] }), _jsx(Icon, { name: "chevron-down", size: 14, "aria-hidden": "true" })] }), _jsxs("div", { className: "jini-skills-row-actions", children: [canDelete && confirmDelete ? (_jsxs("span", { className: "jini-skills-delete-confirm", role: "group", children: [_jsx("button", { type: "button", className: "jini-button jini-button-danger", onClick: onCommitDelete, "data-testid": "skills-delete-confirm", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'delete-confirm', role: 'button', label: deleteConfirmLabel }) }), children: deleteConfirmLabel }), _jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onCancelDelete, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'delete-cancel', role: 'button', label: cancelLabel }) }), children: cancelLabel })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onStartEdit, "aria-label": builtIn ? overrideCreateLabel : editLabel, title: builtIn ? overrideCreateLabel : editLabel, "data-testid": "skills-edit", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'edit', role: 'button', label: builtIn ? overrideCreateLabel : editLabel }) }), children: _jsx(Icon, { name: "edit", size: 13 }) }), canDelete ? (_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onArmDelete, "aria-label": deleteLabel, title: deleteLabel, "data-testid": "skills-delete", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'delete', role: 'button', label: deleteLabel }) }), children: _jsx(Icon, { name: "close", size: 13 }) })) : null] })), _jsxs("label", { className: "toggle-switch toggle-switch-sm jini-skills-row-enable", title: enableToggleLabel, children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (event) => onToggleEnabled(event.target.checked), "aria-label": enableToggleLabel, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'enabled', role: 'checkbox', label: enableToggleLabel }) }) }), _jsx("span", { className: "toggle-slider" })] })] })] }), confirmBuiltInEdit ? (_jsxs("div", { className: "jini-empty-card jini-empty-card-warning", role: "alert", "data-testid": "skills-edit-builtin-warning", children: [_jsx("p", { children: overrideWarning }), _jsxs("div", { className: "jini-skills-draft-actions", children: [_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onCancelBuiltInEdit, "data-testid": "skills-edit-builtin-cancel", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'builtin-edit-cancel', role: 'button', label: cancelLabel }) }), children: cancelLabel }), _jsx("button", { type: "button", className: "jini-button jini-button-primary", onClick: onConfirmBuiltInEdit, "data-testid": "skills-edit-builtin-confirm", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'builtin-edit-confirm', role: 'button', label: overrideCreateLabel }) }), children: overrideCreateLabel })] })] })) : null, expanded && !editing ? (_jsxs("div", { className: "jini-skills-row-detail", children: [_jsxs("div", { className: "jini-settings-subsection", children: [_jsx("h5", { children: bodyHeading }), bodyLoading ? _jsx("p", { className: "jini-hint", children: loadingLabel }) : _jsx("pre", { className: "jini-skills-body-preview", children: body ?? '' })] }), _jsxs("div", { className: "jini-settings-subsection", children: [_jsx("h5", { children: filesHeading }), filesLoading ? (_jsx("p", { className: "jini-hint", children: loadingLabel })) : !files || files.length === 0 ? (_jsx("p", { className: "jini-hint", children: noFilesLabel })) : (_jsx("ul", { className: "jini-skills-file-tree", children: files.map((entry) => (_jsxs("li", { className: "jini-skills-file-entry", style: { paddingLeft: skillFileTreeIndent(entry.path) }, children: [_jsx(Icon, { name: entry.kind === 'directory' ? 'folder' : 'file', size: 12 }), _jsx("span", { children: skillFileLeafName(entry.path) }), entry.kind === 'file' && typeof entry.size === 'number' ? (_jsx("span", { className: "jini-hint", children: formatSkillFileSize(entry.size) })) : null] }, entry.path))) }))] })] })) : null, editing && draft ? (_jsx(SkillDraftForm, { heading: builtIn ? overrideCreateLabel : editLabel, subheading: skill.id, draft: draft, onDraftChange: onDraftChange, error: draftError, saving: draftSaving, isEdit: true, isBuiltInOverride: builtIn, onCancel: onCancelEdit, onSubmit: onSubmitEdit, labels: labels, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'edit-form' }) } : {}) })) : null] }));
 }
 //# sourceMappingURL=SkillRow.js.map

package/dist/features/skills/react/components/SkillsTab.js

@@ -26,9 +26,9 @@ export function SkillsTab({ port, disabledSkillIds, onToggleEnabled, locale = 'e
     const noResultsLabel = labels?.noResultsLabel ?? t('No skills match these filters.');
     const loadErrorLabel = labels?.loadErrorLabel ?? t('Could not load skills: {error}', { error: loadError ?? '' });
     const rowHandles = agentHandle
-        ? buildAgentListHandles(agentSubHandle(agentHandle, 'skill'), filteredSkills.map((skill) => skill.id))
+        ? buildAgentListHandles({ prefix: agentSubHandle({ base: agentHandle, action: 'skill' }), ids: filteredSkills.map((skill) => skill.id) })
         : undefined;
-    return (_jsxs("section", { className: "jini-settings-section jini-settings-skills", children: [_jsxs("div", { className: "jini-skills-toolbar", children: [_jsxs("div", { className: "jini-skills-toolbar-top", children: [_jsx("input", { type: "search", className: "jini-skills-search", placeholder: searchPlaceholder, value: filters.search, onChange: (event) => setSearch(event.target.value), "aria-label": searchPlaceholder, ...agentHandleProps(agentHandle, { action: 'search', role: 'field', label: searchPlaceholder }) }), _jsxs("button", { type: "button", className: "jini-button jini-button-primary", onClick: startCreate, "data-testid": "skills-new", ...agentHandleProps(agentHandle, { action: 'new', role: 'button', label: newSkillLabel }), children: [_jsx(Icon, { name: "plus", size: 13 }), _jsx("span", { children: newSkillLabel })] })] }), _jsxs("div", { className: "jini-skills-filter-selects", children: [_jsxs("label", { className: "jini-skills-filter-select", children: [_jsx("span", { children: sourceFilterLabel }), _jsxs("select", { value: filters.source, onChange: (event) => setSourceFilter(event.target.value), ...agentHandleProps(agentHandle, { action: 'filter-source', role: 'field', label: sourceFilterLabel }), children: [_jsxs("option", { value: "all", children: [allLabel, " (", sourceOptions.all, ")"] }), sourceOptions.options.map(([value, count]) => (_jsxs("option", { value: value, children: [value, " (", count, ")"] }, value)))] })] }), _jsxs("label", { className: "jini-skills-filter-select", children: [_jsx("span", { children: modeFilterLabel }), _jsxs("select", { value: filters.mode, onChange: (event) => setModeFilter(event.target.value), ...agentHandleProps(agentHandle, { action: 'filter-mode', role: 'field', label: modeFilterLabel }), children: [_jsxs("option", { value: "all", children: [allLabel, " (", modeOptions.all, ")"] }), modeOptions.options.map(([value, count]) => (_jsxs("option", { value: value, children: [value, " (", count, ")"] }, value)))] })] }), categoryOptions ? (_jsxs("label", { className: "jini-skills-filter-select", "data-testid": "skills-category-filters", children: [_jsx("span", { children: categoryFilterLabel }), _jsxs("select", { value: filters.category, onChange: (event) => setCategoryFilter(event.target.value), ...agentHandleProps(agentHandle, { action: 'filter-category', role: 'field', label: categoryFilterLabel }), children: [_jsxs("option", { value: "all", children: [allLabel, " (", categoryOptions.all, ")"] }), categoryOptions.options.map(([value, count]) => (_jsxs("option", { value: value, children: [humanizeSkillCategory(value), " (", count, ")"] }, value)))] })] })) : null] })] }), loadError ? (_jsx("div", { className: "jini-empty-card jini-empty-card-error", children: _jsx("strong", { children: loadErrorLabel }) })) : null, creating ? (_jsx(SkillDraftForm, { heading: newSkillLabel, draft: draft, onDraftChange: setDraft, error: draftError, saving: draftSaving, isEdit: false, onCancel: cancelDraft, onSubmit: submitDraft, labels: labels, ...(agentHandle ? { agentHandle: agentSubHandle(agentHandle, 'create-form') } : {}) })) : null, !loading && filteredSkills.length === 0 ? (_jsx("div", { className: "jini-empty-card", children: _jsx("strong", { children: noResultsLabel }) })) : (_jsx("div", { className: "jini-skills-rows", "data-testid": "skills-list", children: filteredSkills.map((skill, index) => {
+    return (_jsxs("section", { className: "jini-settings-section jini-settings-skills", children: [_jsxs("div", { className: "jini-skills-toolbar", children: [_jsxs("div", { className: "jini-skills-toolbar-top", children: [_jsx("input", { type: "search", className: "jini-skills-search", placeholder: searchPlaceholder, value: filters.search, onChange: (event) => setSearch(event.target.value), "aria-label": searchPlaceholder, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'search', role: 'field', label: searchPlaceholder }) }) }), _jsxs("button", { type: "button", className: "jini-button jini-button-primary", onClick: startCreate, "data-testid": "skills-new", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'new', role: 'button', label: newSkillLabel }) }), children: [_jsx(Icon, { name: "plus", size: 13 }), _jsx("span", { children: newSkillLabel })] })] }), _jsxs("div", { className: "jini-skills-filter-selects", children: [_jsxs("label", { className: "jini-skills-filter-select", children: [_jsx("span", { children: sourceFilterLabel }), _jsxs("select", { value: filters.source, onChange: (event) => setSourceFilter(event.target.value), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'filter-source', role: 'field', label: sourceFilterLabel }) }), children: [_jsxs("option", { value: "all", children: [allLabel, " (", sourceOptions.all, ")"] }), sourceOptions.options.map(([value, count]) => (_jsxs("option", { value: value, children: [value, " (", count, ")"] }, value)))] })] }), _jsxs("label", { className: "jini-skills-filter-select", children: [_jsx("span", { children: modeFilterLabel }), _jsxs("select", { value: filters.mode, onChange: (event) => setModeFilter(event.target.value), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'filter-mode', role: 'field', label: modeFilterLabel }) }), children: [_jsxs("option", { value: "all", children: [allLabel, " (", modeOptions.all, ")"] }), modeOptions.options.map(([value, count]) => (_jsxs("option", { value: value, children: [value, " (", count, ")"] }, value)))] })] }), categoryOptions ? (_jsxs("label", { className: "jini-skills-filter-select", "data-testid": "skills-category-filters", children: [_jsx("span", { children: categoryFilterLabel }), _jsxs("select", { value: filters.category, onChange: (event) => setCategoryFilter(event.target.value), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'filter-category', role: 'field', label: categoryFilterLabel }) }), children: [_jsxs("option", { value: "all", children: [allLabel, " (", categoryOptions.all, ")"] }), categoryOptions.options.map(([value, count]) => (_jsxs("option", { value: value, children: [humanizeSkillCategory(value), " (", count, ")"] }, value)))] })] })) : null] })] }), loadError ? (_jsx("div", { className: "jini-empty-card jini-empty-card-error", children: _jsx("strong", { children: loadErrorLabel }) })) : null, creating ? (_jsx(SkillDraftForm, { heading: newSkillLabel, draft: draft, onDraftChange: setDraft, error: draftError, saving: draftSaving, isEdit: false, onCancel: cancelDraft, onSubmit: submitDraft, labels: labels, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'create-form' }) } : {}) })) : null, !loading && filteredSkills.length === 0 ? (_jsx("div", { className: "jini-empty-card", children: _jsx("strong", { children: noResultsLabel }) })) : (_jsx("div", { className: "jini-skills-rows", "data-testid": "skills-list", children: filteredSkills.map((skill, index) => {
                     const isExpanded = expandedId === skill.id;
                     const isEditing = editingId === skill.id;
                     return (_jsx(SkillRow, { ...(rowHandles?.[index] ? { agentHandle: rowHandles[index] } : {}), skill: skill, locale: locale, enabled: !disabledSkillIds.has(skill.id), expanded: isExpanded, editing: isEditing, body: bodyById[skill.id], bodyLoading: bodyLoadingId === skill.id, files: filesById[skill.id] ?? null, filesLoading: filesLoadingId === skill.id, confirmDelete: confirmDeleteId === skill.id, confirmBuiltInEdit: confirmBuiltInEditId === skill.id, draft: isEditing ? draft : null, draftError: isEditing ? draftError : null, draftSaving: isEditing && draftSaving, onDraftChange: setDraft, onToggleExpanded: () => toggleExpanded(skill.id), onToggleEnabled: (enabled) => onToggleEnabled(skill.id, enabled), onStartEdit: () => requestEdit(skill), onConfirmBuiltInEdit: confirmBuiltInEdit, onCancelBuiltInEdit: cancelBuiltInEdit, onArmDelete: () => armDelete(skill.id), onCancelDelete: cancelDelete, onCommitDelete: () => commitDelete(skill.id), onCancelEdit: cancelDraft, onSubmitEdit: submitDraft, labels: labels }, skill.id));

package/dist/features/source-config-list/agent-handles.js

@@ -127,7 +127,7 @@ export function sourceConfigAddFormHandle(listBase) {
  * @complexity See {@link buildAgentListHandles}.
  */
 export function sourceConfigItemHandles(listBase, sourceIds) {
-    return buildAgentListHandles(`${listBase}${HANDLE_SEPARATOR}${LIST_ITEM_NAMESPACE}`, sourceIds);
+    return buildAgentListHandles({ prefix: `${listBase}${HANDLE_SEPARATOR}${LIST_ITEM_NAMESPACE}`, ids: sourceIds });
 }
 /**
  * Builds the `data-agent-*` attribute props for one sub-element, or nothing at all when the host
@@ -146,6 +146,6 @@ export function sourceConfigAgentProps(base, options) {
     if (base === undefined)
         return {};
     const handle = options.action === undefined ? base : sourceConfigActionHandle(base, options.action);
-    return agentHandle(handle, { role: options.role, label: options.label });
+    return agentHandle({ handle: handle }, { ...(options.role === undefined ? {} : { role: options.role }), ...(options.label === undefined ? {} : { label: options.label }) });
 }
 //# sourceMappingURL=agent-handles.js.map

package/dist/features/source-config-list/react/hooks/useSourceConfigAddForm.d.ts

@@ -26,7 +26,7 @@ export interface SourceConfigAddFormController {
  * `PluginsView.tsx`'s `SourcesPanel`/`ConnectorsBrowser.tsx`'s "add
  * immediately on submit" shape rather than `McpClientSection.tsx`'s
  * draft-rows-with-a-separate-bulk-Save-button pattern — see
- * `packages/ui/source-map.md` for why that behavior was not ported.
+ * `packages/ui/archived provenance ledger` for why that behavior was not ported.
  */
 export declare function useSourceConfigAddForm<TSource extends SourceConfigItem>(params: UseSourceConfigAddFormParams<TSource>): SourceConfigAddFormController;
 export type UseWiredSourceConfigAddFormParams<TSource extends SourceConfigItem> = Omit<UseSourceConfigAddFormParams<TSource>, 'port'> & {

package/dist/features/source-config-list/react/hooks/useSourceConfigAddForm.js

@@ -7,7 +7,7 @@ import { emptySourceDraft, validateSourceDraft } from '../../rules.js';
  * `PluginsView.tsx`'s `SourcesPanel`/`ConnectorsBrowser.tsx`'s "add
  * immediately on submit" shape rather than `McpClientSection.tsx`'s
  * draft-rows-with-a-separate-bulk-Save-button pattern — see
- * `packages/ui/source-map.md` for why that behavior was not ported.
+ * `packages/ui/archived provenance ledger` for why that behavior was not ported.
  */
 export function useSourceConfigAddForm(params) {
     const { port, fieldSpecs, onAdded } = params;

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

@@ -8,7 +8,7 @@ export declare function emptySourceDraft(fieldSpecs: readonly SourceFieldSpec[])
  * `PluginsView.tsx`'s marketplace-URL add flow). Protocol-specific API-key
  * shape validation (the origin `byok/validation.ts`'s Anthropic/OpenAI/
  * Google key-format detection) is deliberately NOT ported here — see
- * `source-map.md`'s dropped-behavior list; a host that needs it supplies its
+ * `archived provenance ledger`'s dropped-behavior list; a host that needs it supplies its
  * own extra validation before calling `addSource`.
  *
  * **Applies to the EDIT path as well as the add path.** That was once true only

package/dist/features/source-config-list/rules.js

@@ -1,6 +1,6 @@
 /**
  * Pure logic for the generic source-config-list primitive. No React, no
- * transport, no DOM — see `packages/ui/source-map.md` for full provenance.
+ * transport, no DOM — see `packages/ui/archived provenance ledger` for full provenance.
  */
 import { isAllowedEndpointUrl } from '../../utils/endpoint-policy.js';
 import { MASK_CHAR, MASKED_VALUE_MIN_MASK_LENGTH, MASKED_VALUE_VISIBLE_SUFFIX_LENGTH } from './constants.js';
@@ -16,7 +16,7 @@ export function emptySourceDraft(fieldSpecs) {
  *  a scheme-only check accepted private address space. See
  *  `utils/endpoint-policy.ts`. */
 function isValidHttpUrl(value) {
-    return isAllowedEndpointUrl(value);
+    return isAllowedEndpointUrl({ raw: value });
 }
 /**
  * Validates a draft against its field specs: required-field presence, plus a
@@ -25,7 +25,7 @@ function isValidHttpUrl(value) {
  * `PluginsView.tsx`'s marketplace-URL add flow). Protocol-specific API-key
  * shape validation (the origin `byok/validation.ts`'s Anthropic/OpenAI/
  * Google key-format detection) is deliberately NOT ported here — see
- * `source-map.md`'s dropped-behavior list; a host that needs it supplies its
+ * `archived provenance ledger`'s dropped-behavior list; a host that needs it supplies its
  * own extra validation before calling `addSource`.
  *
  * **Applies to the EDIT path as well as the add path.** That was once true only

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

@@ -2,7 +2,7 @@
  * Generic "add a source by URL/key, set trust, list, per-item test/refresh/
  * remove" domain types. This shape recurs independently at least 4 times in
  * the origin product's `apps/web/src/components/` tree — see
- * `packages/ui/source-map.md`'s `features/source-config-list/` section for
+ * `packages/ui/archived provenance ledger`'s `features/source-config-list/` section for
  * full per-source provenance (which behaviors came from which file, and what
  * did NOT make it into this generic primitive).
  *

package/dist/features/source-config-list/types.js

@@ -2,7 +2,7 @@
  * Generic "add a source by URL/key, set trust, list, per-item test/refresh/
  * remove" domain types. This shape recurs independently at least 4 times in
  * the origin product's `apps/web/src/components/` tree — see
- * `packages/ui/source-map.md`'s `features/source-config-list/` section for
+ * `packages/ui/archived provenance ledger`'s `features/source-config-list/` section for
  * full per-source provenance (which behaviors came from which file, and what
  * did NOT make it into this generic primitive).
  *

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

@@ -31,7 +31,7 @@ export function useTabLauncherMenu(options) {
             window.removeEventListener('resize', update);
         };
     }, [anchor]);
-    useDismissOnOutsideOrEscape(onClose, { containerRef });
+    useDismissOnOutsideOrEscape({ onDismiss: onClose }, { containerRef });
     const kinds = useMemo(() => presentKinds(files), [files]);
     const fileResults = useMemo(() => filterFiles(files, query, kindFilter), [files, query, kindFilter]);
     const tabResults = useMemo(() => filterTabs(tabs, query, kindFilter), [tabs, query, kindFilter]);

package/dist/features/tab-strip/index.d.ts

@@ -10,4 +10,8 @@ export { TabStripItem } from './react/components/TabStripItem.js';
 export type { TabStripItemProps } from './react/components/TabStripItem.js';
 export { TabStrip } from './react/components/TabStrip.js';
 export type { TabStripProps } from './react/components/TabStrip.js';
+export { TabBar } from './react/components/TabBar.js';
+export type { TabBarProps, TabBarTab } from './react/components/TabBar.js';
+export { useTabBarKeyboard, resolveTabBarKeyTarget, resolveTabBarTabIndex, tabHandleProps } from './react/components/TabBar.hooks.js';
+export type { TabBarKeyboardHandlers } from './react/components/TabBar.hooks.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/features/tab-strip/index.js

@@ -5,4 +5,6 @@ export { createBrowserTabStripHaptics } from './dependencies.js';
 export { useTabStripDragReorder } from './react/hooks/useTabStripDragReorder.js';
 export { TabStripItem } from './react/components/TabStripItem.js';
 export { TabStrip } from './react/components/TabStrip.js';
+export { TabBar } from './react/components/TabBar.js';
+export { useTabBarKeyboard, resolveTabBarKeyTarget, resolveTabBarTabIndex, tabHandleProps } from './react/components/TabBar.hooks.js';
 //# sourceMappingURL=index.js.map

package/dist/features/tab-strip/react/components/TabBar.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+export interface TabBarTab {
+    readonly id: string;
+    readonly label: string;
+    readonly icon?: ReactNode | undefined;
+    readonly count?: number | undefined;
+    readonly tag?: string | undefined;
+    readonly disabled?: boolean | undefined;
+    readonly handle?: string | undefined;
+    readonly handleLabel?: string | undefined;
+    readonly dot?: boolean | undefined;
+    readonly dotLabel?: string | undefined;
+}
+export interface TabBarProps {
+    tabs: readonly TabBarTab[];
+    activeId: string;
+    onChange: (id: string) => void;
+    ariaLabel: string;
+    containerHandle?: string | undefined;
+}
+/** Controlled button-based selection strip, including roving focus and optional agent handles. */
+export declare function TabBar({ tabs, activeId, onChange, ariaLabel, containerHandle }: TabBarProps): import("react").JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/dist/features/tab-strip/react/components/TabBar.hooks.d.ts

@@ -0,0 +1,25 @@
+import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { TabBarTab } from "./TabBar.js";
+export declare function tabHandleProps({ tab }: {
+    tab: TabBarTab;
+}): {};
+/** Resolve arrow/Home/End navigation in enabled-tab order; null means no navigation. */
+export declare function resolveTabBarKeyTarget({ tabs, activeId, key }: {
+    tabs: readonly TabBarTab[];
+    activeId: string;
+    key: string;
+}): number | null;
+export declare function resolveTabBarTabIndex({ tabs, activeId, tab }: {
+    tabs: readonly TabBarTab[];
+    activeId: string;
+    tab: TabBarTab;
+}): 0 | -1;
+export interface TabBarKeyboardHandlers {
+    onKeyDown: (e: ReactKeyboardEvent<HTMLDivElement>) => void;
+}
+export declare function useTabBarKeyboard({ tabs, activeId, onChange }: {
+    tabs: readonly TabBarTab[];
+    activeId: string;
+    onChange: (id: string) => void;
+}): TabBarKeyboardHandlers;
+//# sourceMappingURL=TabBar.hooks.d.ts.map

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

@@ -0,0 +1,57 @@
+import { agentHandle } from "@jini-ai/agentic";
+export function tabHandleProps({ tab }) {
+    return tab.handle ? agentHandle({ handle: tab.handle }, { role: "button", label: tab.handleLabel ?? tab.label }) : {};
+}
+const TAB_BAR_NAV_KEYS = ["ArrowRight", "ArrowLeft", "Home", "End"];
+function isTabBarNavKey(key) {
+    return TAB_BAR_NAV_KEYS.includes(key);
+}
+function enabledTabIndices(tabs) {
+    return tabs.reduce((acc, tab, i) => (tab.disabled ? acc : [...acc, i]), []);
+}
+/** Resolve arrow/Home/End navigation in enabled-tab order; null means no navigation. */
+export function resolveTabBarKeyTarget({ tabs, activeId, key }) {
+    if (!isTabBarNavKey(key))
+        return null;
+    const enabled = enabledTabIndices(tabs);
+    if (enabled.length === 0)
+        return null;
+    if (key === "Home")
+        return enabled[0];
+    if (key === "End")
+        return enabled[enabled.length - 1];
+    const activeIndex = tabs.findIndex((tab) => tab.id === activeId);
+    const activePos = activeIndex === -1 ? -1 : enabled.indexOf(activeIndex);
+    if (key === "ArrowRight") {
+        if (activePos === -1)
+            return enabled[0];
+        return enabled[(activePos + 1) % enabled.length];
+    }
+    // ArrowLeft
+    if (activePos === -1)
+        return enabled[enabled.length - 1];
+    return enabled[(activePos - 1 + enabled.length) % enabled.length];
+}
+export function resolveTabBarTabIndex({ tabs, activeId, tab }) {
+    if (tab.disabled)
+        return -1;
+    if (tabs.some((t) => t.id === activeId && !t.disabled))
+        return tab.id === activeId ? 0 : -1;
+    const firstEnabled = tabs.find((t) => !t.disabled);
+    return firstEnabled?.id === tab.id ? 0 : -1;
+}
+export function useTabBarKeyboard({ tabs, activeId, onChange }) {
+    function onKeyDown(e) {
+        // Controls inside the strip that are not tabs keep their own navigation keys.
+        if (!(e.target instanceof Element) || !e.target.closest('[role="tab"]'))
+            return;
+        const target = resolveTabBarKeyTarget({ tabs: tabs, activeId: activeId, key: e.key });
+        if (target === null)
+            return;
+        e.preventDefault();
+        onChange(tabs[target].id);
+        e.currentTarget.querySelectorAll('[role="tab"]')[target]?.focus();
+    }
+    return { onKeyDown };
+}
+//# sourceMappingURL=TabBar.hooks.js.map

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

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { TabStripFrame } from "./TabStripFrame.js";
+import { agentHandle } from "@jini-ai/agentic";
+import { resolveTabBarTabIndex, tabHandleProps, useTabBarKeyboard } from "./TabBar.hooks.js";
+function tabDotAccessibleSuffix(tab) {
+    if (!tab.dot || !tab.dotLabel)
+        return null;
+    return _jsxs("span", { className: "visually-hidden", children: [", ", tab.dotLabel] });
+}
+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] }));
+}
+/** Controlled button-based selection strip, including roving focus and optional agent handles. */
+export function TabBar({ tabs, activeId, onChange, ariaLabel, containerHandle }) {
+    const { onKeyDown } = useTabBarKeyboard({ tabs: tabs, activeId: activeId, onChange: onChange });
+    return (_jsx(TabStripFrame, { className: "tab-bar", role: "tablist", "aria-label": ariaLabel, onKeyDown: onKeyDown, ...(containerHandle ? agentHandle({ handle: containerHandle }, { role: "region", label: ariaLabel }) : {}), children: tabs.map((tab) => (_jsx(TabBarButton, { tab: tab, active: activeId === tab.id, tabIndex: resolveTabBarTabIndex({ tabs: tabs, activeId: activeId, tab: tab }), onChange: onChange }, tab.id))) }));
+}
+//# sourceMappingURL=TabBar.js.map

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { noopTabStripHaptics } from '../../ports.js';
 import { useTabStripDragReorder } from '../hooks/useTabStripDragReorder.js';
 import { TabStripItem } from './TabStripItem.js';
+import { TabStripFrame } from './TabStripFrame.js';
 /**
  * The consolidated tab-strip primitive: composes `useTabStripDragReorder`
  * with `TabStripItem` into the reorderable `role="tablist"` shell both
@@ -23,6 +24,6 @@ export function TabStrip({ tabs, activeTabId, onActivate, onClose, onReorder, re
         reorderTiming,
         haptics,
     });
-    return (_jsxs("div", { className: ['jini-tab-strip', className].filter(Boolean).join(' '), role: "tablist", "aria-label": ariaLabel, ref: stripRef, onDragOver: stripDragProps.onDragOver, onDrop: stripDragProps.onDrop, onDragLeave: stripDragProps.onDragLeave, children: [tabs.map((tab) => (_jsx(TabStripItem, { tab: tab, active: tab.id === activeTabId, dragging: draggingTabId === tab.id, dragOverEdge: dragOverTarget?.tabId === tab.id && draggingTabId !== tab.id ? dragOverTarget.edge : null, dragProps: getItemDragProps(tab.id), onActivate: onActivate, onClose: onClose, closeLabel: closeLabel, closeIcon: closeIcon }, tab.id))), trailing] }));
+    return (_jsxs(TabStripFrame, { className: ['jini-tab-strip', className].filter(Boolean).join(' '), role: "tablist", "aria-label": ariaLabel, ref: stripRef, onDragOver: stripDragProps.onDragOver, onDrop: stripDragProps.onDrop, onDragLeave: stripDragProps.onDragLeave, children: [tabs.map((tab) => (_jsx(TabStripItem, { tab: tab, active: tab.id === activeTabId, dragging: draggingTabId === tab.id, dragOverEdge: dragOverTarget?.tabId === tab.id && draggingTabId !== tab.id ? dragOverTarget.edge : null, dragProps: getItemDragProps(tab.id), onActivate: onActivate, onClose: onClose, closeLabel: closeLabel, closeIcon: closeIcon }, tab.id))), trailing] }));
 }
 //# sourceMappingURL=TabStrip.js.map

package/dist/features/tab-strip/react/components/TabStripFrame.d.ts

@@ -0,0 +1,3 @@
+/** Shared tablist shell for the reorderable strip and controlled button-based TabBar. */
+export declare const TabStripFrame: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=TabStripFrame.d.ts.map

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/** Shared tablist shell for the reorderable strip and controlled button-based TabBar. */
+export const TabStripFrame = forwardRef(function TabStripFrame(props, ref) {
+    return _jsx("div", { ...props, ref: ref, role: "tablist" });
+});
+//# sourceMappingURL=TabStripFrame.js.map

package/dist/features/tabbed-dialog/react/hooks/useTabbedDialog.js

@@ -36,7 +36,7 @@ export function useTabbedDialog({ tabs, initialActiveTabId, activeTabId: control
     // in its Escape-only shape (no `containerRef` — the backdrop click is
     // already handled separately by the host), matching the call site that
     // hook's own doc comment names for this exact hook.
-    useDismissOnOutsideOrEscape(() => onClose?.(), { enabled: Boolean(onClose) });
+    useDismissOnOutsideOrEscape({ onDismiss: () => onClose?.() }, { enabled: Boolean(onClose) });
     return {
         activeTabId,
         setActiveTabId,

package/dist/features/tabbed-dialog/styles/tabbed-dialog.css

@@ -1,144 +1,11 @@
-/**
- * Default visual theme for `TabbedDialog` (the generic tabbed-dialog shell) and, by
- * extension, for `SettingsDialogShell` and any other host that composes it — the shell
- * component itself ships no CSS; it emits `jini-tabbed-dialog-*` class names and is
- * deliberately style-free so a host can dress it however it likes. This stylesheet is the
- * OPT-IN default look; import it to get a finished dialog, skip it to style from scratch.
- *
- * Split out of `../../settings/dialog/styles/settings-dialog.css` (2026-08-13) when the
- * shell itself was extracted into this product-neutral module: that file still carries the
- * `tabs/*` content styling (fields, cards, agent lists, byok forms, …) and `@import`s this
- * one so its four existing consumers keep receiving the complete rule set without adding a
- * second import. A new, non-Settings host of `TabbedDialog` can import just this file
- * (`@jini-ai/ui/tabbed-dialog.css`) for the chrome alone.
- *
- * Every value below resolves through a CSS custom property declared in the `:root` block.
- * That indirection IS the override mechanism: redefine any token downstream (in a later
- * stylesheet, or on a wrapper element) and the whole dialog re-skins without forking a
- * single rule. Nothing here uses a hard-coded color outside that block. The tokens live in
- * THIS file (rather than only in `settings-dialog.css`) because the chrome rules below
- * depend on them directly — a host importing only this stylesheet still needs a rendered
- * dialog, not just unstyled structure.
- *
- * Dark mode follows `prefers-color-scheme` and can be forced either way with
- * `data-theme="dark"` / `data-theme="light"` on any ancestor — which is what
- * `AppearanceTab`'s `applyAppearanceToDocument` already stamps onto
- * `document.documentElement`.
- */
-
-:root {
-  --jini-bg-panel: #fdfcfa;
-  --jini-bg-subtle: #f4f5f7;
-  --jini-bg-elevated: #fffefc;
-  --jini-border: #e1e5eb;
-  --jini-border-strong: #c9d0da;
-
-  --jini-text: #1a1916;
-  --jini-text-strong: #0d0c0a;
-  --jini-text-muted: #74716b;
-  --jini-text-disabled: #b3b0a8;
-
-  --jini-accent: #c96442;
-  --jini-accent-hover: #b45a3b;
-
-  --jini-success: #1f7a3a;
-  --jini-danger: #9c2a25;
-  --jini-warning: #b26200;
-
-  --jini-backdrop: rgba(28, 27, 26, 0.42);
-  --jini-shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);
-  --jini-shadow-md: 0 6px 24px rgba(28, 27, 26, 0.07), 0 2px 6px rgba(28, 27, 26, 0.04);
-  --jini-shadow-lg: 0 24px 60px rgba(28, 27, 26, 0.16), 0 8px 16px rgba(28, 27, 26, 0.07);
-
-  --jini-radius-xs: 4px;
-  --jini-radius-sm: 6px;
-  --jini-radius: 8px;
-  /* Ported alongside OD's real Connectors/Skills CSS (2026-07-31) — OD's
-     `.skills-row`/`.ds-picker-popover` reach for a 10px radius distinct
-     from both `--radius` (8px, generic cards) and `--radius-lg` (12px,
-     modals/gate cards); rather than round that down to an existing step
-     and lose the distinction OD's own scale makes, this token was added. */
-  --jini-radius-md: 10px;
-  --jini-radius-lg: 12px;
-  --jini-radius-pill: 999px;
-
-  --jini-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
-  --jini-modal-padding: 24px;
-  --jini-sidebar-width: 240px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --jini-bg-panel: #222120;
-    --jini-bg-subtle: #252321;
-    --jini-bg-elevated: #2a2825;
-    --jini-border: #333128;
-    --jini-border-strong: #46433c;
-
-    --jini-text: #e8e4dc;
-    --jini-text-strong: #f2ede4;
-    --jini-text-muted: #9a9690;
-    --jini-text-disabled: #4e4b46;
-
-    --jini-accent: #d97a56;
-    --jini-accent-hover: #e8896a;
-
-    --jini-success: #4caf72;
-    --jini-danger: #e06b65;
-    --jini-warning: #e09a40;
-
-    --jini-backdrop: rgba(0, 0, 0, 0.55);
-    --jini-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
-    --jini-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
-    --jini-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
-  }
-}
-
-/* Explicit theme selection always wins over the media query, in both
-   directions — a host toggle must be able to force light inside a dark OS. */
-:root[data-theme='dark'],
-[data-theme='dark'] {
-  --jini-bg-panel: #222120;
-  --jini-bg-subtle: #252321;
-  --jini-bg-elevated: #2a2825;
-  --jini-border: #333128;
-  --jini-border-strong: #46433c;
-  --jini-text: #e8e4dc;
-  --jini-text-strong: #f2ede4;
-  --jini-text-muted: #9a9690;
-  --jini-text-disabled: #4e4b46;
-  --jini-accent: #d97a56;
-  --jini-accent-hover: #e8896a;
-  --jini-success: #4caf72;
-  --jini-danger: #e06b65;
-  --jini-warning: #e09a40;
-  --jini-backdrop: rgba(0, 0, 0, 0.55);
-  --jini-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
-  --jini-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
-  --jini-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
-}
-
-:root[data-theme='light'],
-[data-theme='light'] {
-  --jini-bg-panel: #fdfcfa;
-  --jini-bg-subtle: #f4f5f7;
-  --jini-bg-elevated: #fffefc;
-  --jini-border: #e1e5eb;
-  --jini-border-strong: #c9d0da;
-  --jini-text: #1a1916;
-  --jini-text-strong: #0d0c0a;
-  --jini-text-muted: #74716b;
-  --jini-text-disabled: #b3b0a8;
-  --jini-accent: #c96442;
-  --jini-accent-hover: #b45a3b;
-  --jini-success: #1f7a3a;
-  --jini-danger: #9c2a25;
-  --jini-warning: #b26200;
-  --jini-backdrop: rgba(28, 27, 26, 0.42);
-  --jini-shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);
-  --jini-shadow-md: 0 6px 24px rgba(28, 27, 26, 0.07), 0 2px 6px rgba(28, 27, 26, 0.04);
-  --jini-shadow-lg: 0 24px 60px rgba(28, 27, 26, 0.16), 0 8px 16px rgba(28, 27, 26, 0.07);
-}
+/* The shell emits jini-tabbed-dialog-* classes without importing CSS, so hosts can choose this
+   opt-in default chrome or supply their own styling. SettingsDialogShell imports this stylesheet
+   through settings-dialog.css; other hosts can import @jini-ai/ui/tabbed-dialog.css alone.
+
+   The shared variable import makes that standalone choice usable. Override its custom properties
+   downstream or on a wrapper to reskin the chrome without copying the rules; content-tab styles
+   remain separate from this shell. */
+@import "../../../styles/variables.css";
 
 /* ============================================================
    Dialog chrome

package/dist/features/tabbed-dialog/types.d.ts

@@ -8,7 +8,7 @@
  * chrome. `SettingsDialogShell` now composes this module and supplies its own
  * settings-flavoured label defaults (`t('Settings')`, `t('Settings sections')`, …) — see
  * that component's doc comment. Original provenance: `SettingsDialog.tsx` (8,538 lines) in
- * the vendored OD reference tree — see `packages/ui/source-map.md`.
+ * the vendored OD reference tree — see `packages/ui/archived provenance ledger`.
  *
  * Only the dialog SHELL (sidebar nav + active-panel switching + modal chrome) is modeled
  * here; a host supplies its own tabs as tab entries.

package/dist/features/tabbed-dialog/types.js

@@ -8,7 +8,7 @@
  * chrome. `SettingsDialogShell` now composes this module and supplies its own
  * settings-flavoured label defaults (`t('Settings')`, `t('Settings sections')`, …) — see
  * that component's doc comment. Original provenance: `SettingsDialog.tsx` (8,538 lines) in
- * the vendored OD reference tree — see `packages/ui/source-map.md`.
+ * the vendored OD reference tree — see `packages/ui/archived provenance ledger`.
  *
  * Only the dialog SHELL (sidebar nav + active-panel switching + modal chrome) is modeled
  * here; a host supplies its own tabs as tab entries.