@jini-ai/ui 0.5.5 → 0.5.6

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

@@ -33,6 +33,16 @@ export function setTooltipAttribute(target, name, value) {
         return;
     target.setAttribute(name, value);
 }
+function resolveTooltipTarget(trigger, entry) {
+    return entry.target === 'closest-label' ? trigger.closest('label') : trigger;
+}
+function decorateTooltipTarget({ target, trigger, label, placement, }) {
+    setTooltipAttribute(target, 'data-tooltip', label);
+    setTooltipAttribute(target, 'data-tooltip-placement', placement);
+    if (!target.classList.contains('jini-tooltip'))
+        target.classList.add('jini-tooltip');
+    setTooltipAttribute(trigger, 'aria-label', label);
+}
 /**
  * Drives ONLY the shared `TooltipLayer` contract (`.jini-tooltip[data-tooltip]`):
  * it renders a single styled, viewport-aware bubble and suppresses the
@@ -42,47 +52,111 @@ export function setTooltipAttribute(target, name, value) {
 export function applySketchEditorTooltips(root, labels, targets) {
     const decorated = new Set();
     for (const entry of targets) {
-        for (const trigger of Array.from(root.querySelectorAll(entry.selector))) {
-            const target = entry.target === 'closest-label' ? trigger.closest('label') : trigger;
+        const triggers = Array.from(root.querySelectorAll(entry.selector));
+        const label = normalizeTooltipLabel(labels[entry.label]);
+        if (!label)
+            continue;
+        for (const trigger of triggers) {
+            const target = resolveTooltipTarget(trigger, entry);
             if (!target || decorated.has(target))
                 continue;
-            const label = normalizeTooltipLabel(labels[entry.label]);
-            if (!label)
-                continue;
-            setTooltipAttribute(target, 'data-tooltip', label);
-            setTooltipAttribute(target, 'data-tooltip-placement', entry.placement ?? 'bottom');
-            if (!target.classList.contains('jini-tooltip'))
-                target.classList.add('jini-tooltip');
-            setTooltipAttribute(trigger, 'aria-label', label);
+            decorateTooltipTarget({ target, trigger, label, placement: entry.placement ?? 'bottom' });
             decorated.add(target);
         }
     }
 }
+function readPopoverOrigin(popover, rect) {
+    const left = Number.parseFloat(popover.style.left || `${rect.left}`);
+    const top = Number.parseFloat(popover.style.top || `${rect.top}`);
+    return Number.isFinite(left) && Number.isFinite(top) ? { left, top } : null;
+}
+/** Shifts `value` so the `[start, end]` span fits inside `[min, max]`: the
+ *  overflow past `max` is subtracted first, then the underflow before `min`
+ *  is added, in that order. */
+function clampAxis({ value, start, end }, { min, max }) {
+    let next = value;
+    if (end > max)
+        next -= end - max;
+    if (start < min)
+        next += min - start;
+    return next;
+}
+function writePopoverCoordinate({ popover, side, next }) {
+    if (next !== Number.parseFloat(popover.style[side] || 'NaN'))
+        popover.style[side] = `${Math.max(0, Math.round(next))}px`;
+}
 export function clampSketchContextPopover(popover, viewportRoot) {
     const viewportRect = viewportRoot.getBoundingClientRect();
     const rect = popover.getBoundingClientRect();
     if (!rect.width || !rect.height)
         return;
-    let nextLeft = Number.parseFloat(popover.style.left || `${rect.left}`);
-    let nextTop = Number.parseFloat(popover.style.top || `${rect.top}`);
-    if (!Number.isFinite(nextLeft) || !Number.isFinite(nextTop))
+    const origin = readPopoverOrigin(popover, rect);
+    if (!origin)
         return;
-    const maxRight = viewportRect.right - SKETCH_CONTEXT_MENU_MARGIN;
-    const minLeft = viewportRect.left + SKETCH_CONTEXT_MENU_MARGIN;
-    const maxBottom = viewportRect.bottom - SKETCH_CONTEXT_MENU_MARGIN;
-    const minTop = viewportRect.top + SKETCH_CONTEXT_MENU_MARGIN;
-    if (rect.right > maxRight)
-        nextLeft -= rect.right - maxRight;
-    if (rect.left < minLeft)
-        nextLeft += minLeft - rect.left;
-    if (rect.bottom > maxBottom)
-        nextTop -= rect.bottom - maxBottom;
-    if (rect.top < minTop)
-        nextTop += minTop - rect.top;
-    if (nextLeft !== Number.parseFloat(popover.style.left || 'NaN'))
-        popover.style.left = `${Math.max(0, Math.round(nextLeft))}px`;
-    if (nextTop !== Number.parseFloat(popover.style.top || 'NaN'))
-        popover.style.top = `${Math.max(0, Math.round(nextTop))}px`;
+    const nextLeft = clampAxis({ value: origin.left, start: rect.left, end: rect.right }, { min: viewportRect.left + SKETCH_CONTEXT_MENU_MARGIN, max: viewportRect.right - SKETCH_CONTEXT_MENU_MARGIN });
+    const nextTop = clampAxis({ value: origin.top, start: rect.top, end: rect.bottom }, { min: viewportRect.top + SKETCH_CONTEXT_MENU_MARGIN, max: viewportRect.bottom - SKETCH_CONTEXT_MENU_MARGIN });
+    writePopoverCoordinate({ popover, side: 'left', next: nextLeft });
+    writePopoverCoordinate({ popover, side: 'top', next: nextTop });
+}
+function hasRecognizedContextMenuAction(menu, recognized) {
+    // `li[data-testid]` is an attribute selector: every `item` it matches is
+    // guaranteed to carry the attribute, so `getAttribute` can't return null
+    // here — only typed nullable because `getAttribute` is nullable in general.
+    return Array.from(menu.querySelectorAll('li[data-testid]')).some((item) => recognized.has(item.getAttribute('data-testid')));
+}
+/** Removes every `<hr>` and every non-allow-listed `<li>` from `menu`,
+ *  returning the surviving `<li>`s keyed by action name. */
+function pruneContextMenuItems(menu, allowed) {
+    const byAction = new Map();
+    for (const child of Array.from(menu.children)) {
+        if (child instanceof HTMLHRElement) {
+            child.remove();
+            continue;
+        }
+        if (!(child instanceof HTMLLIElement))
+            continue;
+        const actionName = child.getAttribute('data-testid') ?? '';
+        if (!allowed.has(actionName)) {
+            child.remove();
+            continue;
+        }
+        byAction.set(actionName, child);
+    }
+    return byAction;
+}
+function isContextMenuOrdered(menu, orderedItems) {
+    const currentItems = Array.from(menu.children).filter((child) => child instanceof HTMLLIElement);
+    return currentItems.length === orderedItems.length && currentItems.every((item, index) => item === orderedItems[index]);
+}
+function simplifyContextMenu({ menu, viewportRoot, allowList }, { allowed, recognized }) {
+    // `menu` was found via `root.querySelectorAll(...)`, so it is always a
+    // strict descendant of `root` and therefore always has a parent element
+    // — `.parentElement` is only typed nullable because `Element` itself
+    // permits detached nodes, not because that's reachable here.
+    const popover = menu.closest('.popover') ?? menu.parentElement;
+    if (!hasRecognizedContextMenuAction(menu, recognized))
+        return;
+    menu.classList.add('jini-sketch-context-menu');
+    popover.classList.add('jini-sketch-context-popover');
+    const byAction = pruneContextMenuItems(menu, allowed);
+    // `orderContextMenuActions` only returns names present in `byAction`'s
+    // keys, so every lookup here is defined.
+    const orderedItems = orderContextMenuActions(Array.from(byAction.keys()), allowList).map((action) => byAction.get(action));
+    if (orderedItems.length === 0) {
+        popover.remove();
+        return;
+    }
+    // Only touch the DOM when the order is actually wrong. This runs on
+    // every MutationObserver tick, and re-appending nodes already in place
+    // detaches/re-inserts them each frame; because that re-triggers the
+    // observer, an unconditional reorder becomes a self-sustaining
+    // per-frame churn that cancels the in-flight pointer interaction,
+    // making the menu impossible to click.
+    if (!isContextMenuOrdered(menu, orderedItems)) {
+        for (const item of orderedItems)
+            menu.appendChild(item);
+    }
+    clampSketchContextPopover(popover, viewportRoot);
 }
 /**
  * Simplifies Excalidraw's built-in right-click context menu down to
@@ -91,67 +165,18 @@ export function clampSketchContextPopover(popover, viewportRoot) {
  * Excalidraw's own.
  */
 export function applySketchContextMenuSimplification(root, viewportRoot, allowList, recognizedActions) {
+    const sets = { allowed: new Set(allowList), recognized: new Set(recognizedActions) };
     for (const menu of Array.from(root.querySelectorAll('ul.context-menu'))) {
-        // `menu` was found via `root.querySelectorAll(...)`, so it is always a
-        // strict descendant of `root` and therefore always has a parent element
-        // — `.parentElement` is only typed nullable because `Element` itself
-        // permits detached nodes, not because that's reachable here.
-        const popover = menu.closest('.popover') ?? menu.parentElement;
-        const recognized = new Set(recognizedActions);
-        // `li[data-testid]` is an attribute selector: every `item` it matches is
-        // guaranteed to carry the attribute, so `getAttribute` can't return null
-        // here — only typed nullable because `getAttribute` is nullable in general.
-        const hasRecognizedAction = Array.from(menu.querySelectorAll('li[data-testid]')).some((item) => recognized.has(item.getAttribute('data-testid')));
-        if (!hasRecognizedAction)
-            continue;
-        menu.classList.add('jini-sketch-context-menu');
-        popover.classList.add('jini-sketch-context-popover');
-        const allowed = new Set(allowList);
-        const byAction = new Map();
-        for (const child of Array.from(menu.children)) {
-            if (child instanceof HTMLHRElement) {
-                child.remove();
-                continue;
-            }
-            if (!(child instanceof HTMLLIElement))
-                continue;
-            const actionName = child.getAttribute('data-testid') ?? '';
-            if (!allowed.has(actionName)) {
-                child.remove();
-                continue;
-            }
-            byAction.set(actionName, child);
-        }
-        const orderedActions = orderContextMenuActions(Array.from(byAction.keys()), allowList);
-        const orderedItems = orderedActions.map((action) => byAction.get(action)).filter(Boolean);
-        if (orderedItems.length === 0) {
-            popover.remove();
-            continue;
-        }
-        // Only touch the DOM when the order is actually wrong. This runs on
-        // every MutationObserver tick, and re-appending nodes already in place
-        // detaches/re-inserts them each frame; because that re-triggers the
-        // observer, an unconditional reorder becomes a self-sustaining
-        // per-frame churn that cancels the in-flight pointer interaction,
-        // making the menu impossible to click.
-        const currentItems = Array.from(menu.children).filter((child) => child instanceof HTMLLIElement);
-        const alreadyOrdered = currentItems.length === orderedItems.length && currentItems.every((item, index) => item === orderedItems[index]);
-        if (!alreadyOrdered) {
-            for (const item of orderedItems)
-                menu.appendChild(item);
-        }
-        clampSketchContextPopover(popover, viewportRoot);
+        simplifyContextMenu({ menu, viewportRoot, allowList }, sets);
     }
 }
-/**
- * Walks `root`'s text nodes and a fixed set of text-bearing attributes,
- * rewriting any that match `overrides`. `overrides` is entirely
- * host-supplied — no translated copy ships as a default (see
- * `packages/ui/archived provenance ledger`).
- */
-export function applySketchDomTextOverrides(root, overrides) {
-    if (!overrides || Object.keys(overrides).length === 0 || typeof document === 'undefined')
-        return;
+/** The override for `value`, or `null` when there is none or it would not
+ *  change anything (so callers skip a no-op DOM write). */
+function resolveTextOverride(value, overrides) {
+    const next = translateDomTextValue(value, overrides);
+    return next !== null && next !== value ? next : null;
+}
+function rewriteTextNodes(root, overrides) {
     const textWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
     let node = textWalker.nextNode();
     while (node) {
@@ -159,23 +184,38 @@ export function applySketchDomTextOverrides(root, overrides) {
         // `nodeValue` is always a string per spec (only `Document`/`DocumentType`
         // nodes ever have a null `nodeValue`) — `Node.nodeValue`'s broader type
         // is nullable only because it covers those other node kinds too.
-        const next = translateDomTextValue(node.nodeValue, overrides);
-        if (next !== null && next !== node.nodeValue)
+        const next = resolveTextOverride(node.nodeValue, overrides);
+        if (next !== null)
             node.nodeValue = next;
         node = textWalker.nextNode();
     }
-    const elements = root instanceof Element ? [root, ...Array.from(root.querySelectorAll('*'))] : Array.from(root.querySelectorAll('*'));
+}
+function rewriteOverrideAttributes(root, overrides) {
+    const descendants = Array.from(root.querySelectorAll('*'));
+    const elements = root instanceof Element ? [root, ...descendants] : descendants;
     for (const element of elements) {
         for (const attr of SKETCH_TEXT_OVERRIDE_ATTRS) {
             const value = element.getAttribute(attr);
             if (!value)
                 continue;
-            const next = translateDomTextValue(value, overrides);
-            if (next !== null && next !== value)
+            const next = resolveTextOverride(value, overrides);
+            if (next !== null)
                 element.setAttribute(attr, next);
         }
     }
 }
+/**
+ * Walks `root`'s text nodes and a fixed set of text-bearing attributes,
+ * rewriting any that match `overrides`. `overrides` is entirely
+ * host-supplied — no translated copy ships as a default (see
+ * `packages/ui/archived provenance ledger`).
+ */
+export function applySketchDomTextOverrides(root, overrides) {
+    if (!overrides || Object.keys(overrides).length === 0 || typeof document === 'undefined')
+        return;
+    rewriteTextNodes(root, overrides);
+    rewriteOverrideAttributes(root, overrides);
+}
 export function rewriteExcalidrawUnableToEmbedToasts(root, replacement, additionalPhrases = []) {
     const normalizedReplacement = normalizeTooltipLabel(replacement);
     if (!normalizedReplacement)
@@ -241,20 +281,31 @@ export function enhanceSketchExcalidrawPortals(closeLabel, onClose, domTextOverr
         }
     }
 }
-export function handleSketchPortalCommandEnter(event, insertLabelPattern) {
-    if (event.key !== 'Enter' || (!event.metaKey && !event.ctrlKey) || event.altKey)
-        return;
-    const target = event.target;
+function isCommandEnter(event) {
+    return event.key === 'Enter' && (event.metaKey || event.ctrlKey) && !event.altKey;
+}
+/** The `.Modal__content` around `target`, but only when it sits inside one
+ *  of our marked `.jini-sketch-modal` portals and holds a `<textarea>`. */
+function resolvePortalEditorContent(target) {
     if (!(target instanceof Element))
-        return;
+        return null;
     const portal = target.closest('.jini-sketch-modal');
     const content = target.closest('.Modal__content');
     if (!portal || !content || !portal.contains(content))
+        return null;
+    return content.querySelector('textarea') ? content : null;
+}
+function isButtonEnabled(button) {
+    return !button.disabled && button.getAttribute('aria-disabled') !== 'true';
+}
+export function handleSketchPortalCommandEnter(event, insertLabelPattern) {
+    if (!isCommandEnter(event))
         return;
-    if (!content.querySelector('textarea'))
+    const content = resolvePortalEditorContent(event.target);
+    if (!content)
         return;
     const insertButton = findSketchMermaidInsertButton(content, insertLabelPattern);
-    if (!insertButton || insertButton.disabled || insertButton.getAttribute('aria-disabled') === 'true')
+    if (!insertButton || !isButtonEnabled(insertButton))
         return;
     event.preventDefault();
     event.stopPropagation();

package/dist/features/sketch-editor/react/components/SketchEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useRef } from 'react';
 import { useI18n } from '../../../i18n/index.js';
 import { Toast } from '../../../../react/components/Toast.js';
 import { defaultSketchEditorDependencies } from '../../dependencies.js';
@@ -10,6 +10,29 @@ import { useSketchScene } from '../hooks/useSketchScene.js';
 import { useSketchTheme } from '../hooks/useSketchTheme.js';
 import { SketchMainMenu } from './SketchMainMenu.js';
 import { SketchSaveStateBadge } from './SketchSaveStateBadge.js';
+const EXCALIDRAW_UI_OPTIONS = {
+    canvasActions: {
+        saveToActiveFile: false,
+        loadScene: false,
+        toggleTheme: false,
+        saveAsImage: false,
+        export: false,
+    },
+    tools: { image: true },
+};
+/** `saving` wins over `dirty`; only the active label is translated. */
+function resolveSaveStatus({ saving, dirty, t }) {
+    if (saving)
+        return { state: 'saving', label: t('Saving…') };
+    if (dirty)
+        return { state: 'dirty', label: t('Unsaved changes') };
+    return { state: 'saved', label: t('Saved') };
+}
+/** An export toast carries a file to open: it lingers longer and offers an
+ *  "Open file" action; every other toast is a short-lived notice. */
+function sketchToastActionProps({ actionFileName, t, onAction, }) {
+    return actionFileName ? { ttlMs: 5000, actionLabel: t('Open file'), onAction } : { ttlMs: 2200 };
+}
 /**
  * An Excalidraw-backed sketch surface: theme sync, dirty/save/export
  * orchestration with content-signature deduping, and a DOM-enhancement
@@ -53,22 +76,10 @@ export function SketchEditor({ scene, onSceneChange, onClear, onSave, onExportIm
         mermaidInsertLabelPattern,
         onCloseActiveDialog: closeActiveDialog,
     });
-    const excalidrawUIOptions = useMemo(() => ({
-        canvasActions: {
-            saveToActiveFile: false,
-            loadScene: false,
-            toggleTheme: false,
-            saveAsImage: false,
-            export: false,
-        },
-        tools: { image: true },
-    }), []);
     const hasContent = sketchSceneHasContent(scene);
-    const canClear = hasContent;
     const canSave = dirty || hasContent;
-    const saveState = saving ? 'saving' : dirty ? 'dirty' : 'saved';
-    const saveStateLabel = saving ? t('Saving…') : dirty ? t('Unsaved changes') : t('Saved');
+    const saveStatus = resolveSaveStatus({ saving, dirty, t });
     const { Excalidraw, MainMenu } = engine;
-    return (_jsxs("div", { className: "sketch-editor", children: [_jsx("div", { ref: canvasWrapRef, className: "sketch-canvas-wrap sketch-excalidraw-wrap", "data-testid": "sketch-excalidraw-editor", children: _jsx(Excalidraw, { initialData: initialData, excalidrawAPI: handleExcalidrawAPI, onChange: handleChange, langCode: excalidrawLangCode(locale), theme: theme, detectScroll: false, handleKeyboardGlobally: false, autoFocus: true, name: fileName, UIOptions: excalidrawUIOptions, renderTopRightUI: () => _jsx(SketchSaveStateBadge, { state: saveState, label: saveStateLabel }), validateEmbeddable: validateSketchEmbeddableUrl, children: _jsx(SketchMainMenu, { MainMenu: MainMenu, t: t, saving: saving, showSaved: showSaved, canSave: canSave, onSave: () => void handleSave(), exportAvailable: Boolean(onExportImage), exporting: exporting, canExport: hasContent, onExportImage: () => void handleExportImage(), canClear: canClear, onClear: handleClear }) }, editorInstanceKey) }), toast ? (_jsx(Toast, { message: toast.message, details: toast.details ?? null, tone: toast.tone, ttlMs: toast.actionFileName ? 5000 : 2200, onDismiss: dismissToast, ...(toast.actionFileName ? { actionLabel: t('Open file'), onAction: handleToastAction } : {}) })) : null] }));
+    return (_jsxs("div", { className: "sketch-editor", children: [_jsx("div", { ref: canvasWrapRef, className: "sketch-canvas-wrap sketch-excalidraw-wrap", "data-testid": "sketch-excalidraw-editor", children: _jsx(Excalidraw, { initialData: initialData, excalidrawAPI: handleExcalidrawAPI, onChange: handleChange, langCode: excalidrawLangCode(locale), theme: theme, detectScroll: false, handleKeyboardGlobally: false, autoFocus: true, name: fileName, UIOptions: EXCALIDRAW_UI_OPTIONS, renderTopRightUI: () => _jsx(SketchSaveStateBadge, { ...saveStatus }), validateEmbeddable: validateSketchEmbeddableUrl, children: _jsx(SketchMainMenu, { MainMenu: MainMenu, t: t, saving: saving, showSaved: showSaved, canSave: canSave, onSave: () => void handleSave(), exportAvailable: Boolean(onExportImage), exporting: exporting, canExport: hasContent, onExportImage: () => void handleExportImage(), canClear: hasContent, onClear: handleClear }) }, editorInstanceKey) }), toast ? (_jsx(Toast, { message: toast.message, details: toast.details ?? null, tone: toast.tone, onDismiss: dismissToast, ...sketchToastActionProps({ actionFileName: toast.actionFileName, t, onAction: handleToastAction }) })) : null] }));
 }
 //# sourceMappingURL=SketchEditor.js.map

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

@@ -1,30 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { agentHandleProps } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
+import { resolveSkillDraftFormLabels, skillDraftErrorText, skillDraftSubmitLabel } from './SkillDraftForm.labels.js';
 /**
  * The create/edit form for one skill — shared between the top-of-list
  * "New skill" panel and an expanded row's inline edit. Origin:
  * `SkillDraftForm` in `SkillsSection.tsx`.
  */
 export function SkillDraftForm({ heading, subheading, draft, onDraftChange, error, saving, isEdit, isBuiltInOverride = false, onCancel, onSubmit, labels, agentHandle, }) {
-    const t = useT();
-    const nameLabel = labels?.nameLabel ?? t('Name');
-    const namePlaceholder = labels?.namePlaceholder ?? t('my-skill');
-    const triggersLabel = labels?.triggersLabel ?? t('Triggers');
-    const triggersPlaceholder = labels?.triggersPlaceholder ?? t('search the web, summarize');
-    const descriptionLabel = labels?.descriptionLabel ?? t('Description');
-    const descriptionPlaceholder = labels?.descriptionPlaceholder ?? t('What does this skill do? When should it be used?');
-    const bodyLabel = labels?.bodyLabel ?? t('Body');
-    const bodyPlaceholder = labels?.bodyPlaceholder ?? t('# My skill\n\n1. Explain the workflow.\n2. Describe the inputs and outputs.');
-    const cancelLabel = labels?.cancelLabel ?? t('Cancel');
-    const createLabel = labels?.createLabel ?? t('Create');
-    const saveLabel = labels?.saveLabel ?? t('Save');
-    const overrideSaveLabel = labels?.overrideSaveLabel ?? t('Save as override');
-    const savingLabel = labels?.savingLabel ?? t('Saving…');
-    const nameRequiredError = labels?.nameRequiredError ?? t('Name is required.');
-    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({}, { 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 })] })] }));
+    const l = resolveSkillDraftFormLabels({ t: useT() }, { labels });
+    const submitLabel = skillDraftSubmitLabel({ labels: l, saving, isEdit, isBuiltInOverride });
+    const errorText = skillDraftErrorText({ labels: l, error });
+    const fieldProps = { draft, onDraftChange, agentHandle };
+    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(SkillDraftField, { ...fieldProps, field: "name", label: l.nameLabel, placeholder: l.namePlaceholder, disabled: isEdit }), _jsx(SkillDraftField, { ...fieldProps, field: "triggers", label: l.triggersLabel, placeholder: l.triggersPlaceholder }), _jsx(SkillDraftField, { ...fieldProps, field: "description", label: l.descriptionLabel, placeholder: l.descriptionPlaceholder, rows: 2 }), _jsx(SkillDraftField, { ...fieldProps, field: "body", label: l.bodyLabel, placeholder: l.bodyPlaceholder, rows: 14 }), 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: l.cancelLabel }), children: l.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 })] })] }));
+}
+/** One labelled draft field. Attribute order matches the original inline
+ *  markup exactly so the rendered HTML is unchanged. */
+function SkillDraftField({ draft, onDraftChange, agentHandle, field, label, placeholder, disabled, rows }) {
+    const onChange = (event) => onDraftChange((current) => ({ ...current, [field]: event.target.value }));
+    const handle = agentHandleProps({}, { base: agentHandle, action: field, role: 'field', label });
+    return (_jsx("div", { className: "jini-settings-field", children: _jsxs("label", { children: [_jsx("span", { children: label }), rows === undefined ? (_jsx("input", { type: "text", value: draft[field], onChange: onChange, placeholder: placeholder, disabled: disabled, ...handle })) : (_jsx("textarea", { rows: rows, value: draft[field], onChange: onChange, placeholder: placeholder, ...handle }))] }) }));
 }
 //# sourceMappingURL=SkillDraftForm.js.map

package/dist/features/skills/react/components/SkillDraftForm.labels.d.ts

@@ -0,0 +1,31 @@
+import type { SkillDraftError } from '../../types.js';
+import type { SkillDraftFormLabels } from './SkillDraftForm.js';
+/** `defaults` with each entry replaced by the host's label when it supplied
+ *  one, else by the translated default. `t` runs only for the gaps. Shared by
+ *  every skills component that takes a `labels` override bag. */
+export declare function resolveLabels<K extends string>({ defaults, t }: {
+    defaults: Record<K, string>;
+    t: (key: string) => string;
+}, { labels }: {
+    labels?: Partial<Record<NoInfer<K>, string | undefined>> | undefined;
+}): Record<K, string>;
+/** The form's labels with every gap filled from the translated defaults. */
+export declare function resolveSkillDraftFormLabels({ t }: {
+    t: (key: string) => string;
+}, { labels }: {
+    labels?: SkillDraftFormLabels | undefined;
+}): Required<SkillDraftFormLabels>;
+/** Saving wins over everything; then edit (override vs. plain save) vs. create. */
+export declare function skillDraftSubmitLabel({ labels, saving, isEdit, isBuiltInOverride, }: {
+    labels: Required<SkillDraftFormLabels>;
+    saving: boolean;
+    isEdit: boolean;
+    isBuiltInOverride: boolean;
+}): string;
+/** The alert text for `error`: the two validation kinds use their labels, a
+ *  submit failure shows the host's own message; `null` means no alert. */
+export declare function skillDraftErrorText({ labels, error, }: {
+    labels: Required<SkillDraftFormLabels>;
+    error: SkillDraftError | null;
+}): string | null;
+//# sourceMappingURL=SkillDraftForm.labels.d.ts.map

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

@@ -0,0 +1,54 @@
+/** Every `SkillDraftFormLabels` key with its untranslated default. A host
+ *  label wins; otherwise the default is passed through `t` (lazily, only
+ *  when the host left that label out). */
+const DEFAULT_SKILL_DRAFT_FORM_LABELS = {
+    nameLabel: 'Name',
+    namePlaceholder: 'my-skill',
+    triggersLabel: 'Triggers',
+    triggersPlaceholder: 'search the web, summarize',
+    descriptionLabel: 'Description',
+    descriptionPlaceholder: 'What does this skill do? When should it be used?',
+    bodyLabel: 'Body',
+    bodyPlaceholder: '# My skill\n\n1. Explain the workflow.\n2. Describe the inputs and outputs.',
+    cancelLabel: 'Cancel',
+    createLabel: 'Create',
+    saveLabel: 'Save',
+    overrideSaveLabel: 'Save as override',
+    savingLabel: 'Saving…',
+    nameRequiredError: 'Name is required.',
+    bodyRequiredError: 'Body is required.',
+};
+/** `defaults` with each entry replaced by the host's label when it supplied
+ *  one, else by the translated default. `t` runs only for the gaps. Shared by
+ *  every skills component that takes a `labels` override bag. */
+export function resolveLabels({ defaults, t }, { labels }) {
+    const resolved = { ...defaults };
+    for (const key of Object.keys(defaults)) {
+        resolved[key] = labels?.[key] ?? t(defaults[key]);
+    }
+    return resolved;
+}
+/** The form's labels with every gap filled from the translated defaults. */
+export function resolveSkillDraftFormLabels({ t }, { labels }) {
+    return resolveLabels({ defaults: DEFAULT_SKILL_DRAFT_FORM_LABELS, t }, { labels });
+}
+/** Saving wins over everything; then edit (override vs. plain save) vs. create. */
+export function skillDraftSubmitLabel({ labels, saving, isEdit, isBuiltInOverride, }) {
+    if (saving)
+        return labels.savingLabel;
+    if (!isEdit)
+        return labels.createLabel;
+    return isBuiltInOverride ? labels.overrideSaveLabel : labels.saveLabel;
+}
+/** The alert text for `error`: the two validation kinds use their labels, a
+ *  submit failure shows the host's own message; `null` means no alert. */
+export function skillDraftErrorText({ labels, error, }) {
+    if (error === null)
+        return null;
+    if (error.kind === 'name-required')
+        return labels.nameRequiredError;
+    if (error.kind === 'body-required')
+        return labels.bodyRequiredError;
+    return error.message;
+}
+//# sourceMappingURL=SkillDraftForm.labels.js.map

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

@@ -4,6 +4,8 @@ import { formatSkillFileSize, humanizeSkillCategory, isBuiltInSkill, isDeletable
 import { useT } from '../../../i18n/index.js';
 import { Icon } from '../../../../react/components/Icon.js';
 import { SkillDraftForm } from './SkillDraftForm.js';
+import { resolveLabels } from './SkillDraftForm.labels.js';
+import { DEFAULT_SKILL_ROW_LABELS } from './SkillRow.labels.js';
 /**
  * One collapsible skill row: header (enable toggle, name, mode/category/
  * source badges, edit/delete actions) always visible; body preview + file
@@ -11,25 +13,43 @@ import { SkillDraftForm } from './SkillDraftForm.js';
  * `SkillRow` in `SkillsSection.tsx`.
  */
 export function SkillRow({ skill, locale, enabled, expanded, editing, body, bodyLoading, files, filesLoading, confirmDelete, confirmBuiltInEdit, draft, draftError, draftSaving, onDraftChange, onToggleExpanded, onToggleEnabled, onStartEdit, onConfirmBuiltInEdit, onCancelBuiltInEdit, onArmDelete, onCancelDelete, onCommitDelete, onCancelEdit, onSubmitEdit, labels, agentHandle, }) {
-    const t = useT();
+    const l = resolveLabels({ defaults: DEFAULT_SKILL_ROW_LABELS, t: useT() }, { labels });
+    const builtIn = isBuiltInSkill(skill);
+    // Built-in skills are never edited in place — "editing" one creates a
+    // user-owned override, so every edit affordance says so.
+    const editActionLabel = builtIn ? l.overrideCreateLabel : l.editLabel;
+    return (_jsxs("div", { className: skillRowClassName({ enabled, expanded }), "data-testid": `skill-row-${skill.id}`, children: [_jsxs("div", { className: "jini-skills-row-head", children: [_jsx(SkillRowSummaryButton, { skill: skill, locale: locale, expanded: expanded, onToggleExpanded: onToggleExpanded, labels: l, agentHandle: agentHandle }), _jsxs("div", { className: "jini-skills-row-actions", children: [isDeletableSkill(skill) && confirmDelete ? (_jsx(SkillRowDeleteConfirm, { onCommitDelete: onCommitDelete, onCancelDelete: onCancelDelete, labels: l, agentHandle: agentHandle })) : (_jsx(SkillRowEditDeleteActions, { skill: skill, editActionLabel: editActionLabel, onStartEdit: onStartEdit, onArmDelete: onArmDelete, labels: l, agentHandle: agentHandle })), _jsxs("label", { className: "toggle-switch toggle-switch-sm jini-skills-row-enable", title: l.enableToggleLabel, children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (event) => onToggleEnabled(event.target.checked), "aria-label": l.enableToggleLabel, ...agentHandleProps({}, { base: agentHandle, action: 'enabled', role: 'checkbox', label: l.enableToggleLabel }) }), _jsx("span", { className: "toggle-slider" })] })] })] }), confirmBuiltInEdit ? (_jsx(SkillRowBuiltInEditWarning, { onCancelBuiltInEdit: onCancelBuiltInEdit, onConfirmBuiltInEdit: onConfirmBuiltInEdit, labels: l, agentHandle: agentHandle })) : null, expanded && !editing ? (_jsx(SkillRowDetail, { body: body, bodyLoading: bodyLoading, files: files, filesLoading: filesLoading, labels: l })) : null, editing && draft ? (_jsx(SkillDraftForm, { heading: editActionLabel, 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] }));
+}
+function skillRowClassName({ enabled, expanded }) {
+    return `jini-skills-row${enabled ? '' : ' jini-skills-row-disabled'}${expanded ? ' jini-skills-row-expanded' : ''}`;
+}
+/** The always-visible header button: name, mode/category/source badges, description. */
+function SkillRowSummaryButton({ skill, locale, expanded, onToggleExpanded, labels: l, agentHandle, }) {
     const name = localizedSkillName(skill, locale) || skill.id;
     const description = localizedSkillDescription(skill, locale);
-    const canDelete = isDeletableSkill(skill);
-    const builtIn = isBuiltInSkill(skill);
-    const expandLabel = labels?.expandLabel ?? t('Expand');
-    const collapseLabel = labels?.collapseLabel ?? t('Collapse');
-    const editLabel = labels?.editLabel ?? t('Edit');
-    const overrideCreateLabel = labels?.overrideCreateLabel ?? t('Create override');
-    const deleteLabel = labels?.deleteLabel ?? t('Delete');
-    const deleteConfirmLabel = labels?.deleteConfirmLabel ?? t('Confirm delete');
-    const cancelLabel = labels?.cancelLabel ?? t('Cancel');
-    const enableToggleLabel = labels?.enableToggleLabel ?? t('Enabled');
-    const loadingLabel = labels?.loadingLabel ?? t('Loading…');
-    const filesHeading = labels?.filesHeading ?? t('Files');
-    const noFilesLabel = labels?.noFilesLabel ?? t('No files.');
-    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({}, { 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] }));
+    return (_jsxs("button", { type: "button", className: "jini-skills-row-summary-btn", onClick: onToggleExpanded, "aria-expanded": expanded, title: expanded ? l.collapseLabel : l.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: l.userBadge }) : null] }), description ? _jsx("span", { className: "jini-hint", children: description }) : null] }), _jsx(Icon, { name: "chevron-down", size: 14, "aria-hidden": "true" })] }));
+}
+/** The armed-delete confirm/cancel pair that replaces the row actions. */
+function SkillRowDeleteConfirm({ onCommitDelete, onCancelDelete, labels: l, agentHandle, }) {
+    return (_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: l.deleteConfirmLabel }), children: l.deleteConfirmLabel }), _jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onCancelDelete, ...agentHandleProps({}, { base: agentHandle, action: 'delete-cancel', role: 'button', label: l.cancelLabel }), children: l.cancelLabel })] }));
+}
+/** Edit (or create-override) plus, for a user-owned skill only, delete. */
+function SkillRowEditDeleteActions({ skill, editActionLabel, onStartEdit, onArmDelete, labels: l, agentHandle, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onStartEdit, "aria-label": editActionLabel, title: editActionLabel, "data-testid": "skills-edit", ...agentHandleProps({}, { base: agentHandle, action: 'edit', role: 'button', label: editActionLabel }), children: _jsx(Icon, { name: "edit", size: 13 }) }), isDeletableSkill(skill) ? (_jsx("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onArmDelete, "aria-label": l.deleteLabel, title: l.deleteLabel, "data-testid": "skills-delete", ...agentHandleProps({}, { base: agentHandle, action: 'delete', role: 'button', label: l.deleteLabel }), children: _jsx(Icon, { name: "close", size: 13 }) })) : null] }));
+}
+/** The "editing a built-in creates an override" confirmation card. */
+function SkillRowBuiltInEditWarning({ onCancelBuiltInEdit, onConfirmBuiltInEdit, labels: l, agentHandle, }) {
+    return (_jsxs("div", { className: "jini-empty-card jini-empty-card-warning", role: "alert", "data-testid": "skills-edit-builtin-warning", children: [_jsx("p", { children: l.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: l.cancelLabel }), children: l.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: l.overrideCreateLabel }), children: l.overrideCreateLabel })] })] }));
+}
+/** The expanded, non-editing detail: SKILL.md preview plus the file tree. */
+function SkillRowDetail({ body, bodyLoading, files, filesLoading, labels: l, }) {
+    return (_jsxs("div", { className: "jini-skills-row-detail", children: [_jsxs("div", { className: "jini-settings-subsection", children: [_jsx("h5", { children: l.bodyHeading }), bodyLoading ? _jsx("p", { className: "jini-hint", children: l.loadingLabel }) : _jsx("pre", { className: "jini-skills-body-preview", children: body ?? '' })] }), _jsxs("div", { className: "jini-settings-subsection", children: [_jsx("h5", { children: l.filesHeading }), _jsx(SkillFileTree, { files: files, filesLoading: filesLoading, labels: l })] })] }));
+}
+function SkillFileTree({ files, filesLoading, labels: l, }) {
+    if (filesLoading)
+        return _jsx("p", { className: "jini-hint", children: l.loadingLabel });
+    if (!files || files.length === 0)
+        return _jsx("p", { className: "jini-hint", children: l.noFilesLabel });
+    return (_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))) }));
 }
 //# sourceMappingURL=SkillRow.js.map