@jini-ai/admin 0.4.12 → 0.4.13

package/dist/media/react/hooks/ProvidersTab.hooks.d.ts

@@ -1,9 +1,36 @@
 import type { ChangeEvent } from 'react';
 export declare function useProvidersTab(_required?: Record<string, never>, _optional?: Record<string, never>): {
+    reload: () => void;
+    reloadDisabled: boolean;
+    reloadLabel: string;
+    unreachable: boolean;
+    empty: boolean;
+    save: () => void;
+    saveLabel: string;
+    saveDisabled: boolean;
+    saved: boolean;
+    saveError: boolean;
+    disabled: boolean;
+    settingsDisabled: boolean;
     rows: {
-        divider: boolean;
-        statusLabel: string | null;
-        statusClassName: string;
+        invalid: boolean;
+        hint: string | null;
+        hintClassName: string;
+        hintRole: "alert" | undefined;
+        ariaInvalid: true | undefined;
+        clearLabel: string;
+        clearDisabled: boolean;
+        clear: () => void;
+        baseUrl: string;
+        baseUrlPlaceholder: string;
+        baseUrlLabel: string;
+        onBaseUrl: (event: ChangeEvent<HTMLInputElement>) => void;
+        model: string;
+        modelLabel: string;
+        modelsId: string;
+        hasModels: boolean;
+        onModel: (event: ChangeEvent<HTMLInputElement>) => void;
+        toggle: () => void;
         credential: string;
         credentialType: "text" | "password";
         credentialPlaceholder: string;
@@ -15,41 +42,14 @@ export declare function useProvidersTab(_required?: Record<string, never>, _opti
         };
         toggleLabel: string;
         visible: boolean;
-        toggle(): void;
         onCredential: (event: ChangeEvent<HTMLInputElement>) => void;
-        baseUrl: string;
-        baseUrlPlaceholder: string;
-        baseUrlLabel: string;
-        onBaseUrl: (event: ChangeEvent<HTMLInputElement>) => void;
-        model: string;
-        modelLabel: string;
-        modelsId: string;
-        hasModels: boolean;
-        onModel: (event: ChangeEvent<HTMLInputElement>) => void;
-        clearLabel: string;
-        clearDisabled: boolean;
-        clear: () => void;
-        invalid: boolean;
-        hint: string | null;
-        hintClassName: string;
-        hintRole: "alert" | undefined;
-        ariaInvalid: true | undefined;
+        statusLabel: string | null;
+        statusClassName: string;
+        divider: boolean;
         id: string;
         label: string;
         defaultBaseUrl?: string;
         models?: readonly string[];
     }[];
-    reload: () => void;
-    reloadDisabled: boolean;
-    reloadLabel: string;
-    unreachable: boolean;
-    empty: boolean;
-    save: () => void;
-    saveLabel: string;
-    saveDisabled: boolean;
-    saved: boolean;
-    saveError: boolean;
-    disabled: boolean;
-    settingsDisabled: boolean;
 };
 //# sourceMappingURL=ProvidersTab.hooks.d.ts.map

package/dist/media/react/hooks/ProvidersTab.hooks.js

@@ -3,6 +3,12 @@ import { MEDIA_QUERY_KEYS, useMediaProvidersQuery } from './MediaQuery.hooks.js'
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMediaProvidersTab, sortProvidersByConfigured, isEntryPresent, isMarkerOnlyEntry, maskedKeyLabel, isProviderBaseUrlInvalid, invalidBaseUrlProviderIds } from '@jini-ai/ui';
 import { useMediaPorts } from './MediaPorts.hooks.js';
+/** Host adapters supply canonical IDs (media/PORT.md); keep them literal in the editor.
+ * Pure operations preserve values and copy maps in O(n) time/space; ID lookup is O(1). */
+const catalogPolicy = {
+    canonicalMediaProviderId: ({ id }, _options = {}) => id,
+    normalizeMediaProviderMap: ({ providers }, _options = {}) => ({ ...providers }),
+};
 function configuration({ items }, _optional = {}) {
     return Object.fromEntries(items.filter(item => item.configured || item.apiKeyTail || item.baseUrl?.trim() || item.model?.trim())
         .map(item => [item.id, { apiKeyConfigured: item.configured,
@@ -10,6 +16,108 @@ function configuration({ items }, _optional = {}) {
             ...(item.baseUrl === undefined ? {} : { baseUrl: item.baseUrl }),
             ...(item.model === undefined ? {} : { model: item.model }) }]));
 }
+/** Drops a cleared provider's stored state; one that never held any needs no call. */
+async function removeIfStored({ port, item, signal }, _optional = {}) {
+    if (item.configured || item.baseUrl || item.model)
+        await port.removeCredential({ id: item.id }, { signal });
+}
+/** Absent endpoint and model compare and send as blank, the stored "use the default". */
+function settingsOf({ source }, _optional = {}) {
+    return { baseUrl: source.baseUrl ?? '', model: source.model ?? '' };
+}
+async function saveProviderSettings({ port, item, entry, signal }, _optional = {}) {
+    const next = settingsOf({ source: entry }), stored = settingsOf({ source: item });
+    if (next.baseUrl === stored.baseUrl && next.model === stored.model)
+        return;
+    if (!port.saveSettings)
+        throw new Error('Provider settings unavailable');
+    await port.saveSettings({ id: item.id, ...next }, { signal });
+}
+async function saveProvider({ port, item, signal }, { entry } = {}) {
+    if (!entry)
+        return removeIfStored({ port, item, signal });
+    await saveProviderSettings({ port, item, entry, signal });
+    if (entry.apiKey?.trim())
+        await port.saveCredential({ id: item.id, credential: entry.apiKey }, { signal });
+}
+async function saveSequentially({ port, providers, lastRead, signal }, _optional = {}) {
+    // Older hosts retain the one-button editor; writes remain sequential and failures
+    // retain local edits. Atomic whole-set hosts should implement saveChanges instead.
+    // Submitted ids the last read never returned (catalog-only providers getting their
+    // first key or settings) start from an empty stored state, or their writes are lost.
+    const known = new Set(lastRead.map(item => item.id));
+    const unread = Object.keys(providers).filter(id => !known.has(id)).map(id => ({ id, configured: false }));
+    for (const item of [...lastRead, ...unread])
+        await saveProvider({ port, item, signal }, { entry: providers[item.id] });
+    const items = await port.list({}, { signal });
+    if (!items)
+        throw new Error('Provider service unavailable');
+    return items;
+}
+function rowStatus({ entry, pending }, _optional = {}) {
+    const saved = isMarkerOnlyEntry(entry);
+    const mask = saved ? maskedKeyLabel(entry) : null;
+    return {
+        mask,
+        statusLabel: saved ? `Saved (${mask})` : pending ? 'Unsaved' : null,
+        statusClassName: saved ? 'jini-field-status-badge jini-field-status-badge-success' : 'jini-field-status-badge',
+    };
+}
+function baseUrlHint({ entry, item }, _optional = {}) {
+    const invalid = isProviderBaseUrlInvalid(entry);
+    return {
+        invalid, hint: invalid ? 'Enter an absolute http:// or https:// URL that is not a private or internal address.'
+            : !entry.baseUrl?.trim() && item.defaultBaseUrl ? `Uses ${item.defaultBaseUrl} by default.` : null,
+        hintClassName: invalid ? 'jini-field-hint jini-hint-error' : 'jini-field-hint',
+        hintRole: invalid ? 'alert' : undefined,
+        ariaInvalid: invalid || undefined,
+    };
+}
+function credentialFields({ item, entry, editor, visible }, { mask = null } = {}) {
+    return {
+        credential: entry.apiKey ?? '', credentialType: visible ? 'text' : 'password',
+        credentialPlaceholder: mask ?? 'Paste your API key',
+        credentialAttrs: { 'data-jini-part': 'media.provider.credential', 'data-agent-private': true,
+            'data-agent-element': `media-provider-${item.id}-api-key`, 'aria-label': `${item.label} credential` },
+        toggleLabel: `${item.label} ${visible ? 'Hide' : 'Show'}`, visible,
+        onCredential: (event) => editor.updateProvider(item.id, { apiKey: event.currentTarget.value }),
+    };
+}
+function settingsFields({ item, entry, editor }, _optional = {}) {
+    return {
+        baseUrl: entry.baseUrl ?? '', baseUrlPlaceholder: item.defaultBaseUrl || 'https://api.example.com',
+        baseUrlLabel: `${item.label} base URL`,
+        onBaseUrl: (event) => editor.updateProvider(item.id, { baseUrl: event.currentTarget.value }),
+        model: entry.model ?? '', modelLabel: `${item.label} model`, modelsId: `jini-media-provider-models-${item.id}`, hasModels: !!item.models?.length,
+        onModel: (event) => editor.updateProvider(item.id, { model: event.currentTarget.value }),
+    };
+}
+function providerRow({ item, entry, editor, visible, toggle }, { divider = false, disabled = false } = {}) {
+    const { mask, ...status } = rowStatus({ entry, pending: editor.pendingProviderIds.has(item.id) });
+    return {
+        ...item,
+        divider,
+        ...status,
+        ...credentialFields({ item, entry, editor, visible }, { mask }),
+        toggle,
+        ...settingsFields({ item, entry, editor }),
+        clearLabel: `${item.label} Clear`, clearDisabled: !isEntryPresent(entry) || disabled,
+        clear: () => editor.clearProvider(item.id),
+        ...baseUrlHint({ entry, item }),
+    };
+}
+function editorView({ editor, port }, _optional = {}) {
+    const loading = editor.load.status === 'loading', saving = editor.save.status === 'saving';
+    return { reload: editor.reload, reloadDisabled: loading,
+        reloadLabel: loading ? 'Reloading…' : 'Reload',
+        unreachable: editor.load.status === 'unreachable', empty: !editor.hasAnyConfigured,
+        save: editor.saveChanges, saveLabel: saving ? 'Saving…' : 'Save changes',
+        saveDisabled: !port || saving || !editor.pendingProviderIds.size || !!invalidBaseUrlProviderIds(editor.providers).length,
+        saved: editor.save.status === 'saved', saveError: editor.save.status === 'save-error', disabled: !port,
+        // Fail closed: a host that can persist neither the whole set nor per-provider settings
+        // must not accept endpoint/model edits that would only surface as a failed save.
+        settingsDisabled: !port || (!port.saveChanges && !port.saveSettings) };
+}
 export function useProvidersTab(_required = {}, _optional = {}) {
     const { mediaProviders } = useMediaPorts();
     const cached = useMediaProvidersQuery({ port: mediaProviders });
@@ -46,44 +154,15 @@ export function useProvidersTab(_required = {}, _optional = {}) {
                 if (!mediaProviders)
                     throw new Error('Provider service unavailable');
                 const signal = lifetime.current.signal;
-                if (mediaProviders.saveChanges) {
-                    const items = await mediaProviders.saveChanges({ providers }, { signal });
-                    lastRead = items;
-                    return configuration({ items });
-                }
-                // Older hosts retain the one-button editor; writes remain sequential and failures
-                // retain local edits. Atomic whole-set hosts should implement saveChanges instead.
-                // Submitted ids the last read never returned (catalog-only providers getting their
-                // first key or settings) start from an empty stored state, or their writes are lost.
-                const known = new Set(lastRead.map(item => item.id));
-                const unread = Object.keys(providers).filter(id => !known.has(id)).map(id => ({ id, configured: false }));
-                for (const item of [...lastRead, ...unread]) {
-                    const entry = providers[item.id];
-                    if (!entry) {
-                        if (item.configured || item.baseUrl || item.model)
-                            await mediaProviders.removeCredential({ id: item.id }, { signal });
-                        continue;
-                    }
-                    if ((entry.baseUrl ?? '') !== (item.baseUrl ?? '') || (entry.model ?? '') !== (item.model ?? '')) {
-                        if (!mediaProviders.saveSettings)
-                            throw new Error('Provider settings unavailable');
-                        await mediaProviders.saveSettings({ id: item.id, baseUrl: entry.baseUrl ?? '', model: entry.model ?? '' }, { signal });
-                    }
-                    if (entry.apiKey?.trim())
-                        await mediaProviders.saveCredential({ id: item.id, credential: entry.apiKey }, { signal });
-                }
-                const items = await mediaProviders.list({}, { signal });
-                if (!items)
-                    throw new Error('Provider service unavailable');
+                const items = mediaProviders.saveChanges
+                    ? await mediaProviders.saveChanges({ providers }, { signal })
+                    : await saveSequentially({ port: mediaProviders, providers, lastRead, signal });
                 lastRead = items;
                 return configuration({ items });
             },
         };
     }, [mediaProviders]);
-    const save = useFetchMutation({ run: async ({ input }) => {
-            const result = await rawEditorPort.saveMediaProviders(input);
-            return result;
-        } }, { invalidates: [MEDIA_QUERY_KEYS.providers] });
+    const save = useFetchMutation({ run: ({ input }) => rawEditorPort.saveMediaProviders(input) }, { invalidates: [MEDIA_QUERY_KEYS.providers] });
     const saves = useRef(save);
     saves.current = save;
     const editorPort = useMemo(() => ({
@@ -94,54 +173,15 @@ export function useProvidersTab(_required = {}, _optional = {}) {
         },
         saveMediaProviders: (providers) => saves.current.mutate({ input: providers }),
     }), [rawEditorPort]);
-    const editor = useMediaProvidersTab({ port: editorPort });
+    const editor = useMediaProvidersTab({ port: editorPort, catalogPolicy });
     const catalog = mediaProviders?.catalog ?? discoveredCatalog;
     const pinnedIds = mediaProviders?.pinnedProviderIds ?? [];
     const ordered = sortProvidersByConfigured(catalog, editor.providers, pinnedIds);
-    const rows = ordered.map((item, index) => {
-        const entry = editor.providers[item.id] ?? {};
-        const saved = isMarkerOnlyEntry(entry);
-        const mask = saved ? maskedKeyLabel(entry) : null;
-        const visible = visibleKeys.has(item.id);
-        const invalid = isProviderBaseUrlInvalid(entry);
-        const modelsId = `jini-media-provider-models-${item.id}`;
-        return {
-            ...item,
-            divider: index > 0 && !pinnedIds.includes(item.id) && pinnedIds.includes(ordered[index - 1].id),
-            statusLabel: saved ? `Saved (${mask})` : editor.pendingProviderIds.has(item.id) ? 'Unsaved' : null,
-            statusClassName: saved ? 'jini-field-status-badge jini-field-status-badge-success' : 'jini-field-status-badge',
-            credential: entry.apiKey ?? '', credentialType: visible ? 'text' : 'password',
-            credentialPlaceholder: mask ?? 'Paste your API key',
-            credentialAttrs: { 'data-jini-part': 'media.provider.credential', 'data-agent-private': true,
-                'data-agent-element': `media-provider-${item.id}-api-key`, 'aria-label': `${item.label} credential` },
-            toggleLabel: `${item.label} ${visible ? 'Hide' : 'Show'}`, visible,
-            toggle() { setVisibleKeys(current => { const next = new Set(current); if (next.has(item.id))
-                next.delete(item.id);
-            else
-                next.add(item.id); return next; }); },
-            onCredential: (event) => editor.updateProvider(item.id, { apiKey: event.currentTarget.value }),
-            baseUrl: entry.baseUrl ?? '', baseUrlPlaceholder: item.defaultBaseUrl || 'https://api.example.com',
-            baseUrlLabel: `${item.label} base URL`,
-            onBaseUrl: (event) => editor.updateProvider(item.id, { baseUrl: event.currentTarget.value }),
-            model: entry.model ?? '', modelLabel: `${item.label} model`, modelsId, hasModels: !!item.models?.length,
-            onModel: (event) => editor.updateProvider(item.id, { model: event.currentTarget.value }),
-            clearLabel: `${item.label} Clear`, clearDisabled: !isEntryPresent(entry) || !mediaProviders,
-            clear: () => editor.clearProvider(item.id),
-            invalid, hint: invalid ? 'Enter an absolute http:// or https:// URL that is not a private or internal address.'
-                : !entry.baseUrl?.trim() && item.defaultBaseUrl ? `Uses ${item.defaultBaseUrl} by default.` : null,
-            hintClassName: invalid ? 'jini-field-hint jini-hint-error' : 'jini-field-hint',
-            hintRole: invalid ? 'alert' : undefined,
-            ariaInvalid: invalid || undefined,
-        };
-    });
-    return { rows, reload: editor.reload, reloadDisabled: editor.load.status === 'loading',
-        reloadLabel: editor.load.status === 'loading' ? 'Reloading…' : 'Reload',
-        unreachable: editor.load.status === 'unreachable', empty: !editor.hasAnyConfigured,
-        save: editor.saveChanges, saveLabel: editor.save.status === 'saving' ? 'Saving…' : 'Save changes',
-        saveDisabled: !mediaProviders || editor.save.status === 'saving' || !editor.pendingProviderIds.size || !!invalidBaseUrlProviderIds(editor.providers).length,
-        saved: editor.save.status === 'saved', saveError: editor.save.status === 'save-error', disabled: !mediaProviders,
-        // Fail closed: a host that can persist neither the whole set nor per-provider settings
-        // must not accept endpoint/model edits that would only surface as a failed save.
-        settingsDisabled: !mediaProviders || (!mediaProviders.saveChanges && !mediaProviders.saveSettings) };
+    const toggleKey = (id) => setVisibleKeys(current => { const next = new Set(current); if (next.has(id))
+        next.delete(id);
+    else
+        next.add(id); return next; });
+    const rows = ordered.map((item, index) => providerRow({ item, entry: editor.providers[item.id] ?? {}, editor, visible: visibleKeys.has(item.id), toggle: () => toggleKey(item.id) }, { divider: index > 0 && !pinnedIds.includes(item.id) && pinnedIds.includes(ordered[index - 1].id), disabled: !mediaProviders }));
+    return { rows, ...editorView({ editor, port: mediaProviders }) };
 }
 //# sourceMappingURL=ProvidersTab.hooks.js.map

package/dist/media/react/hooks/UploadButton.hooks.d.ts

@@ -18,12 +18,13 @@ export declare function readMediaFile({ file }: {
     signal?: AbortSignal;
     createReader?: () => FileReader;
 }): Promise<UploadInput>;
+type ReadFile = (required: {
+    file: File;
+}, optional?: {
+    signal?: AbortSignal;
+}) => Promise<UploadInput>;
 export declare function useUploadButton(props: UploadButtonProps, { readFile }?: {
-    readFile?: (required: {
-        file: File;
-    }, optional?: {
-        signal?: AbortSignal;
-    }) => Promise<UploadInput>;
+    readFile?: ReadFile;
 }): {
     alt: string;
     withAlt: boolean;
@@ -52,4 +53,5 @@ export declare function useUploadButton(props: UploadButtonProps, { readFile }?:
     onPress: () => void | undefined;
     label: string;
 };
+export {};
 //# sourceMappingURL=UploadButton.hooks.d.ts.map

package/dist/media/react/hooks/UploadButton.hooks.js

@@ -26,6 +26,22 @@ export function readMediaFile({ file }, { signal, createReader = () => new FileR
         reader.readAsDataURL(file);
     });
 }
+/** Uploads files in order, recording each landed name in `uploaded` so a mid-batch failure
+ * still reports what succeeded. Resolves false when the toolbar unmounted mid-batch. */
+async function sendFiles({ files, signal, uploaded, alt, upload, readFile }, _optional = {}) {
+    const trimmed = alt.trim();
+    for (const file of files) {
+        const input = await readFile({ file }, { signal });
+        if (signal.aborted)
+            return false;
+        if (!await upload({ input, ...(trimmed ? { alt: trimmed } : {}) }))
+            throw new Error(`Upload failed for ${file.name}`);
+        if (signal.aborted)
+            return false;
+        uploaded.push(file.name);
+    }
+    return true;
+}
 export function useUploadButton(props, { readFile = readMediaFile } = {}) {
     // Advisory picker formats mirror the host's standard ceiling, including video. The
     // injected server still validates/sniffs bytes; a file picker is never a security boundary.
@@ -40,13 +56,27 @@ export function useUploadButton(props, { readFile = readMediaFile } = {}) {
         lifetime.current = abort;
         return () => abort.abort();
     }, []);
+    // Multi-select hosts take the whole pick; single-file toolbars keep only the first.
+    const limit = (files) => files.slice(0, props.multiple === false ? 1 : undefined);
     function onFile(event) {
         if (!inFlight.current && !props.disabled) {
-            setSelectedFiles(Array.from(event.currentTarget.files ?? []).slice(0, props.multiple === false ? 1 : undefined));
+            setSelectedFiles(limit(Array.from(event.currentTarget.files ?? [])));
             setError(null);
             setSuccess(null);
         }
     }
+    function settle({ files, uploaded }, _optional = {}) {
+        // Keep only failed/unattempted files: retry must not duplicate successes in a batch.
+        setSelectedFiles(files.slice(uploaded.length));
+        setBusy(false);
+        if (uploaded.length)
+            setSuccess(`Uploaded ${uploaded.join(', ')}`);
+    }
+    function clearForm() {
+        setAlt('');
+        if (inputRef.current)
+            inputRef.current.value = '';
+    }
     async function uploadFiles(files) {
         if (!files.length || inFlight.current || props.disabled)
             return;
@@ -56,22 +86,9 @@ export function useUploadButton(props, { readFile = readMediaFile } = {}) {
         setError(null);
         setSuccess(null);
         const uploaded = [];
-        let remaining = [...files];
         try {
-            for (const file of files) {
-                const input = await readFile({ file }, { signal });
-                if (signal.aborted)
-                    return;
-                if (!await props.upload({ input, ...(alt.trim() ? { alt: alt.trim() } : {}) }))
-                    throw new Error(`Upload failed for ${file.name}`);
-                if (signal.aborted)
-                    return;
-                uploaded.push(file.name);
-                remaining = remaining.slice(1);
-            }
-            setAlt('');
-            if (inputRef.current)
-                inputRef.current.value = '';
+            if (await sendFiles({ files, signal, uploaded, alt, upload: props.upload, readFile }))
+                clearForm();
         }
         catch (error) {
             if (!signal.aborted)
@@ -79,13 +96,8 @@ export function useUploadButton(props, { readFile = readMediaFile } = {}) {
         }
         finally {
             inFlight.current = false;
-            if (!signal.aborted) {
-                // Keep only failed/unattempted files: retry must not duplicate successes in a batch.
-                setSelectedFiles(remaining);
-                setBusy(false);
-                if (uploaded.length)
-                    setSuccess(`Uploaded ${uploaded.join(', ')}`);
-            }
+            if (!signal.aborted)
+                settle({ files, uploaded });
         }
     }
     return {
@@ -104,7 +116,7 @@ export function useUploadButton(props, { readFile = readMediaFile } = {}) {
             event.preventDefault();
             if (inFlight.current || props.disabled)
                 return;
-            const files = Array.from(event.dataTransfer.files).slice(0, props.multiple === false ? 1 : undefined);
+            const files = limit(Array.from(event.dataTransfer.files));
             setSelectedFiles(files);
             void uploadFiles(files);
         },

package/dist/media/react/index.js

@@ -1,3 +1,7 @@
+// Styling: scoped feature presentation used to travel with compiled JS (a `mediaStyles` string in
+// `media/styles.ts`), which also overrode host dialog CSS that could accidentally display a closed
+// dialog or shrink a large media preview. Host CSS now supplies presentation and the closed-dialog
+// safeguards on jini- classes, so no style string ships from this module.
 export { useGallerySelection } from './hooks/GallerySelection.hooks.js';
 import { createElement } from 'react';
 import { bindReact } from '../../core/react/bind-react.js';

package/dist/media/react/tabs/LibraryTab.d.ts

@@ -1,4 +1,4 @@
 import type { TabViewProps } from '../../../core/react/bind-react.js';
-export declare function LibraryTab(props: TabViewProps, _optional?: Record<string, never>): import("react").JSX.Element;
+export declare function LibraryTab(props: TabViewProps): import("react").JSX.Element;
 export default LibraryTab;
 //# sourceMappingURL=LibraryTab.d.ts.map

package/dist/media/react/tabs/LibraryTab.js

@@ -6,9 +6,9 @@ import { UploadButton } from '../components/UploadButton.js';
 import { EditMediaPanel } from '../components/EditMediaPanel.js';
 import { MediaLightbox } from '../components/MediaLightbox.js';
 import { MediaPurgeDialog } from '../components/MediaPurgeDialog.js';
-export function LibraryTab(props, _optional = {}) {
+export function LibraryTab(props) {
     const vm = useLibraryTab(props);
-    return (_jsxs("section", { className: "jini-media-library", "data-jini-part": "media.library", children: [vm.canUpload && _jsx(UploadButton, { upload: vm.upload, disabled: vm.busy }), _jsx("div", { className: "jini-media-order-control", children: _jsx(Select, { label: "Order by", attrs: { 'data-jini-part': 'media.sort', 'data-agent-element': 'media-order-by' }, value: vm.orderBy, onValueChange: vm.onOrder, options: [{ value: 'created', label: 'Created (newest first)' }, { value: 'alphabetical', label: 'Alphabetical (A–Z)' }] }) }), _jsxs("div", { className: "jini-media-library-filters", hidden: true, children: [_jsx(TextField, { attrs: { 'data-jini-part': 'media.search', 'data-agent-element': 'media-search' }, label: "Search media", value: vm.search, onValueChange: vm.onSearch }), _jsx(Select, { label: "Status", value: vm.statusFilter, onValueChange: vm.onStatus, options: [{ value: 'all', label: 'All statuses' }, { value: 'active', label: 'Active' }, { value: 'trashed', label: 'Trash' }] })] }), _jsx("p", { className: "jini-media-success", role: "status", "aria-live": "polite", "aria-atomic": "true", children: vm.success }), vm.untyped && _jsx("p", { className: "jini-notice", children: vm.t.untyped }), vm.snapshot?.error && _jsxs("div", { className: "jini-notice jini-notice-error", children: [_jsx("p", { className: "jini-notice-text", role: "alert", children: vm.snapshot.error }), _jsx(Button, { onPress: vm.onRetry, children: "Retry" })] }), vm.loading ? (_jsx("p", { className: "jini-notice", role: "status", children: vm.t.loading })) : (_jsx(MediaGrid, { gridRef: vm.gridRef, emptyLabel: vm.emptyLabel, actions: vm.actions, api: vm.mediaApi })), _jsx(MediaLightbox, { items: vm.items, api: vm.mediaApi, activeIndex: vm.lightboxIndex, onNavigate: vm.onNavigate, onClose: vm.closeLightbox }), vm.editing && (_jsx(EditMediaPanel, { api: vm.mediaApi, item: vm.editing, onSaved: vm.saved, onClose: vm.closeEdit }, vm.editing.id)), _jsx(MediaPurgeDialog, { open: !!vm.snapshot?.pendingPurge, pending: vm.busy, ...(vm.snapshot?.pendingPurge ? { filename: vm.snapshot.pendingPurge.title } : {}), onCancel: vm.cancelPurge, onConfirm: vm.confirmPurge })] }));
+    return (_jsxs("section", { className: "jini-media-library", "data-jini-part": "media.library", children: [vm.canUpload && _jsx(UploadButton, { upload: vm.upload, disabled: vm.busy }), _jsx("div", { className: "jini-media-order-control", children: _jsx(Select, { label: "Order by", attrs: { 'data-jini-part': 'media.sort', 'data-agent-element': 'media-order-by' }, value: vm.orderBy, onValueChange: vm.onOrder, options: [{ value: 'created', label: 'Created (newest first)' }, { value: 'alphabetical', label: 'Alphabetical (A–Z)' }] }) }), _jsxs("div", { className: "jini-media-library-filters", hidden: true, children: [_jsx(TextField, { attrs: { 'data-jini-part': 'media.search', 'data-agent-element': 'media-search' }, label: "Search media", value: vm.search, onValueChange: vm.onSearch }), _jsx(Select, { label: "Status", value: vm.statusFilter, onValueChange: vm.onStatus, options: [{ value: 'all', label: 'All statuses' }, { value: 'active', label: 'Active' }, { value: 'trashed', label: 'Trash' }] })] }), _jsx("p", { className: "jini-media-success", role: "status", "aria-live": "polite", "aria-atomic": "true", children: vm.success }), vm.untyped && _jsx("p", { className: "jini-notice", children: vm.t.untyped }), vm.snapshot?.error && _jsxs("div", { className: "jini-notice jini-notice-error", children: [_jsx("p", { className: "jini-notice-text", role: "alert", children: vm.snapshot.error }), _jsx(Button, { onPress: vm.onRetry, children: "Retry" })] }), vm.loading ? (_jsx("p", { className: "jini-notice", role: "status", children: vm.t.loading })) : (_jsx(MediaGrid, { gridRef: vm.gridRef, emptyLabel: vm.emptyLabel, actions: vm.actions, api: vm.mediaApi })), _jsx(MediaLightbox, { items: vm.items, api: vm.mediaApi, activeIndex: vm.lightboxIndex, onNavigate: vm.onNavigate, onClose: vm.closeLightbox }), vm.editing && (_jsx(EditMediaPanel, { api: vm.mediaApi, item: vm.editing, onSaved: vm.saved, onClose: vm.closeEdit }, vm.editing.id)), _jsx(MediaPurgeDialog, { ...vm.purgeDialog, onCancel: vm.cancelPurge, onConfirm: vm.confirmPurge })] }));
 }
 export default LibraryTab;
 //# sourceMappingURL=LibraryTab.js.map

package/dist/media/rules.d.ts

@@ -56,6 +56,13 @@ export declare function formatByteSize({ bytes }: {
 }, { locale }?: {
     locale?: string;
 }): string;
+/** The file name a media card shows. A media record keeps only its extension-less title, so the
+ * extension comes from the type sniffed from its bytes; an unknown type, or a title that already
+ * ends with that extension, shows the title as-is. */
+export declare function mediaFileName({ title, contentType }: {
+    title: string;
+    contentType: string | null;
+}, _optional?: Record<string, never>): string;
 /** Full-library counts, independent of search/order/type selection; Providers has no count. */
 export declare function countMediaTabs({ media }: {
     media: readonly MediaAsset[];

package/dist/media/rules.js

@@ -75,8 +75,16 @@ export function isRetryableMediaError({ error }, _optional = {}) {
     const failure = error;
     if (typeof failure.retryable === 'boolean')
         return failure.retryable;
-    const status = failure.status ?? failure.statusCode ?? Number(failure.message?.match(/HTTP\s+(\d{3})/i)?.[1]);
-    return status === 408 || status === 429 || (status >= 500 && status <= 599) || error instanceof TypeError;
+    return isRetryableHttpStatus({ status: mediaErrorHttpStatus({ failure }) }) || error instanceof TypeError;
+}
+/** `status`, else `statusCode`, else the `HTTP nnn` an older transport put in its message —
+ * `NaN` when none is present. */
+function mediaErrorHttpStatus({ failure }, _optional = {}) {
+    return failure.status ?? failure.statusCode ?? Number(failure.message?.match(/HTTP\s+(\d{3})/i)?.[1]);
+}
+/** Request timeout, rate limiting and any 5xx are temporary; `NaN` and every other status are not. */
+function isRetryableHttpStatus({ status }, _optional = {}) {
+    return status === 408 || status === 429 || (status >= 500 && status <= 599);
 }
 /** Blank means native size; invalid values reach the server's positive-integer validator. */
 export function parseOptionalPixelSize({ value }, _optional = {}) {
@@ -94,6 +102,21 @@ export function formatByteSize({ bytes }, { locale = 'en-US' } = {}) {
     const mb = kb / 1024;
     return mb < 1024 ? `${decimal.format(mb)} MB` : `${decimal.format(mb / 1024)} GB`;
 }
+/** The extension each sniffed media type is stored as; JPEG shows as the common ".jpg". */
+const MEDIA_EXTENSION_BY_CONTENT_TYPE = {
+    'image/png': 'png', 'image/jpeg': 'jpg', 'image/gif': 'gif', 'image/webp': 'webp', 'image/avif': 'avif',
+    'image/svg+xml': 'svg', 'video/mp4': 'mp4', 'video/webm': 'webm', 'audio/wav': 'wav', 'audio/mpeg': 'mp3',
+    'audio/flac': 'flac', 'audio/mp4': 'm4a', 'application/pdf': 'pdf',
+};
+/** The file name a media card shows. A media record keeps only its extension-less title, so the
+ * extension comes from the type sniffed from its bytes; an unknown type, or a title that already
+ * ends with that extension, shows the title as-is. */
+export function mediaFileName({ title, contentType }, _optional = {}) {
+    const extension = contentType ? MEDIA_EXTENSION_BY_CONTENT_TYPE[contentType] : undefined;
+    if (!extension || title.toLowerCase().endsWith(`.${extension}`))
+        return title;
+    return `${title}.${extension}`;
+}
 /** Full-library counts, independent of search/order/type selection; Providers has no count. */
 export function countMediaTabs({ media }, _optional = {}) {
     return { all: media.length, images: filterMediaByTab({ media, tab: 'images' }).length,

package/dist/react/components/ConfirmDialog/ConfirmDialog.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { agentHandle } from '@jini-ai/agentic';
 import { useConfirmController } from '@jini-ai/ui-kit/react';
 import { resolveTone, toneClassName } from '../../types.js';
 import { useConfirmDialog, useConfirmDialogCancelLabel } from './ConfirmDialog.hooks.js';
+import { confirmDialogAgentAttrs, withoutAccessibleName } from './confirm-dialog-attrs.js';
 /**
  * UI-kit's confirmation planner owns the sub-handle segments appended to the caller's base:
  * literals chosen by the mechanism, never host data. Neither needs sanitizing, unlike
@@ -39,16 +39,13 @@ export function ConfirmDialog({ useDialog = useConfirmDialog, agentHandle: baseH
         ...(props.pending === undefined ? {} : { pending: props.pending }),
         onConfirm: () => props.onConfirm(), onCancel: () => props.onCancel(),
     }, {
-        // UI-kit names selects separately; agentic publishes them as fields and still owns handle validation.
-        agent: ((required, optional = {}) => agentHandle(required, {
-            ...(optional.role === undefined ? {} : { role: optional.role === 'select' ? 'field' : optional.role }),
-            ...(optional.label === undefined ? {} : { label: optional.label }),
-        })),
+        // UI-kit names selects separately; see `confirmDialogAgentAttrs`.
+        agent: confirmDialogAgentAttrs,
     });
     const { titleId, dialogRef, cancelRef, handleNativeCancel, handleBackdropClick } = useDialog({ open: props.open, onCancel: () => { controller.requestDismiss({ reason: 'close' }); }, document }, { pending: controller.pending });
     // Keep admin's concise accessible names; the shared planner still supplies consequence-aware agent labels.
-    const { 'aria-label': _cancelName, ...cancelAttrs } = controller.cancel.attrs ?? {};
-    const { 'aria-label': _confirmName, ...confirmAttrs } = controller.confirm.attrs ?? {};
+    const cancelAttrs = withoutAccessibleName({ attrs: controller.cancel.attrs });
+    const confirmAttrs = withoutAccessibleName({ attrs: controller.confirm.attrs });
     return (_jsxs("dialog", { ref: dialogRef, className: "confirm-dialog", "aria-labelledby": titleId, onCancel: handleNativeCancel, onClick: handleBackdropClick, children: [_jsx("h2", { id: titleId, children: props.title }), _jsxs("div", { className: "confirm-dialog-body", children: [props.body, controller.error] }), _jsxs("div", { className: "confirm-dialog-actions", children: [_jsx("button", { ref: cancelRef, type: "button", className: "btn-secondary", disabled: controller.pending, onClick: () => controller.cancel.onPress?.({}), ...cancelAttrs, children: cancelLabel }), _jsx("button", { type: "button", className: toneClassName({ tone }), disabled: controller.pending, onClick: () => controller.confirm.onPress?.({}), ...confirmAttrs, children: props.confirmLabel })] })] }));
 }
 //# sourceMappingURL=ConfirmDialog.js.map

package/dist/react/components/ConfirmDialog/confirm-dialog-attrs.d.ts

@@ -0,0 +1,20 @@
+import type { AgentAttrsPort, KitAttrs } from '@jini-ai/ui-kit';
+/**
+ * The agent-attribute port `ConfirmDialog` hands UI-kit's confirm controller. UI-kit names selects
+ * separately; agentic publishes them as fields and still owns handle validation. Absent role/label
+ * options stay absent rather than being sent as `undefined`.
+ *
+ * @complexity O(1).
+ */
+export declare const confirmDialogAgentAttrs: AgentAttrsPort;
+/**
+ * Keep admin's concise accessible names; the shared planner still supplies consequence-aware agent
+ * labels. Returns the action's attributes without UI-kit's `aria-label`. UI-kit's `ButtonProps`
+ * types `attrs` as optional, so a missing set yields an empty one.
+ *
+ * @complexity O(k) in the number of attributes.
+ */
+export declare function withoutAccessibleName({ attrs }: {
+    attrs: KitAttrs | undefined;
+}, _optional?: Record<string, never>): KitAttrs;
+//# sourceMappingURL=confirm-dialog-attrs.d.ts.map

package/dist/react/components/ConfirmDialog/confirm-dialog-attrs.js

@@ -0,0 +1,24 @@
+import { agentHandle } from '@jini-ai/agentic';
+/**
+ * The agent-attribute port `ConfirmDialog` hands UI-kit's confirm controller. UI-kit names selects
+ * separately; agentic publishes them as fields and still owns handle validation. Absent role/label
+ * options stay absent rather than being sent as `undefined`.
+ *
+ * @complexity O(1).
+ */
+export const confirmDialogAgentAttrs = (required, optional = {}) => agentHandle(required, {
+    ...(optional.role === undefined ? {} : { role: optional.role === 'select' ? 'field' : optional.role }),
+    ...(optional.label === undefined ? {} : { label: optional.label }),
+});
+/**
+ * Keep admin's concise accessible names; the shared planner still supplies consequence-aware agent
+ * labels. Returns the action's attributes without UI-kit's `aria-label`. UI-kit's `ButtonProps`
+ * types `attrs` as optional, so a missing set yields an empty one.
+ *
+ * @complexity O(k) in the number of attributes.
+ */
+export function withoutAccessibleName({ attrs }, _optional = {}) {
+    const { 'aria-label': _accessibleName, ...rest } = attrs ?? {};
+    return rest;
+}
+//# sourceMappingURL=confirm-dialog-attrs.js.map