@jini-ai/admin 0.4.12 → 0.6.10

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

@@ -7,21 +7,17 @@ export interface MediaLightboxProps {
     readonly onNavigate: (index: number) => void;
     readonly onClose: () => void;
 }
+/** Resolves the open asset and the shared lightbox's set props. Clamping, keyboard, focus and
+ * the open/close lifecycle live in `@jini-ai/ui`'s `useLightbox`. */
 export declare function useMediaLightbox(props: MediaLightboxProps, _optional?: Record<string, never>): {
     item: MediaAsset | null;
-    open: boolean;
-    hasPrev: boolean;
-    hasNext: boolean;
-    previous: () => void;
-    next: () => void;
-    items: readonly MediaAsset[];
-    api: MediaApiPort;
-    activeIndex: number | null;
-    onNavigate: (index: number) => void;
-    onClose: () => void;
-    dialogRef: import("react").RefObject<HTMLDialogElement | null>;
-    closeRef: import("react").RefObject<HTMLButtonElement | null>;
-    title: string;
-    position: string;
+    lightbox: {
+        open: boolean;
+        title: string;
+        index: number;
+        count: number;
+        onNavigate: (index: number) => void;
+        onClose: () => void;
+    };
 };
 //# sourceMappingURL=MediaLightbox.hooks.d.ts.map

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

@@ -1,63 +1,16 @@
-import { useEffect, useRef } from 'react';
+/** Resolves the open asset and the shared lightbox's set props. Clamping, keyboard, focus and
+ * the open/close lifecycle live in `@jini-ai/ui`'s `useLightbox`. */
 export function useMediaLightbox(props, _optional = {}) {
     const item = props.activeIndex === null ? null : props.items[props.activeIndex] ?? null;
-    function go(index) {
-        // Clamps rather than wrapping: staying on the last asset is the less surprising
-        // default for an operator navigating a specific set of uploads, not a slideshow.
-        if (index >= 0 && index < props.items.length) {
-            const focusedPart = dialogRef.current?.ownerDocument.activeElement?.getAttribute('data-jini-part');
-            // Keep focus in the dialog when the focused arrow disappears at a boundary.
-            // Interior navigation leaves focus where the operator put it.
-            if ((index === 0 && focusedPart === 'media.lightbox.previous') ||
-                (index === props.items.length - 1 && focusedPart === 'media.lightbox.next'))
-                closeRef.current?.focus({ preventScroll: true });
-            props.onNavigate(index);
-        }
-    }
-    const closeRef = useRef(null);
-    const dialogRef = useRef(null);
-    const open = !!item;
-    useEffect(() => {
-        // Close exists at every position, so it is a stable initial focus target. Only
-        // opening focuses it; navigation must preserve the operator's current focus.
-        if (open)
-            closeRef.current?.focus();
-    }, [open]);
-    // Dialog owns open/close/focus, keyed on open rather than index: navigation must not
-    // reopen an already-open dialog or recapture its trigger from inside the lightbox.
-    useEffect(() => {
-        const dialog = dialogRef.current;
-        if (!dialog || !item)
-            return;
-        const onKey = (event) => {
-            if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
-                return;
-            event.preventDefault();
-            if (props.activeIndex !== null)
-                go(props.activeIndex + (event.key === 'ArrowRight' ? 1 : -1));
-            // Native video controls may also seek while focused, as in the legacy lightbox.
-            // Preview stage remains private, so do not silently infer it from contentType.
-        };
-        dialog.ownerDocument.addEventListener('keydown', onKey);
-        return () => dialog.ownerDocument.removeEventListener('keydown', onKey);
-    }, [props.activeIndex, props.items, props.onNavigate, !!item]);
     return {
-        dialogRef,
-        closeRef,
-        title: item ? `Media preview: ${item.title}` : 'Media preview',
-        position: item && props.activeIndex !== null ? `${props.activeIndex + 1} / ${props.items.length}` : '',
-        ...props,
         item,
-        open: !!item,
-        hasPrev: props.activeIndex !== null && props.activeIndex > 0,
-        hasNext: props.activeIndex !== null && props.activeIndex + 1 < props.items.length,
-        previous: () => {
-            if (props.activeIndex !== null)
-                go(props.activeIndex - 1);
-        },
-        next: () => {
-            if (props.activeIndex !== null)
-                go(props.activeIndex + 1);
+        lightbox: {
+            open: !!item,
+            title: item?.title ?? '',
+            index: props.activeIndex ?? 0,
+            count: props.items.length,
+            onNavigate: props.onNavigate,
+            onClose: props.onClose,
         },
     };
 }

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

@@ -1,3 +1,4 @@
+import { useMediaLibraryQuery } from './MediaQuery.hooks.js';
 import type { ReactNode } from 'react';
 import type { ModulePageProps } from '../../../core/react/bind-react.js';
 import { createLibraryController } from '../../controllers/library.controller.js';
@@ -10,6 +11,11 @@ export declare function useSharedMediaLibrary(_required?: Record<string, never>,
     controller: ReturnType<typeof createLibraryController> | null;
     snapshot: LibraryState | null;
 } | null;
+/** Feeds the cached library read into a controller; an absent read leaves `all` untouched. */
+export declare function settleFromCache({ controller, query }: {
+    controller: ReturnType<typeof createLibraryController> | null;
+    query: ReturnType<typeof useMediaLibraryQuery>['query'];
+}, _optional?: Record<string, never>): void;
 export interface MediaPageProps extends ModulePageProps {
     readonly headerActions?: ReactNode;
 }

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

@@ -10,30 +10,31 @@ export const MediaLibraryContext = createContext(null);
 export function useSharedMediaLibrary(_required = {}, _optional = {}) {
     return useContext(MediaLibraryContext);
 }
+/** Feeds the cached library read into a controller; an absent read leaves `all` untouched. */
+export function settleFromCache({ controller, query }, _optional = {}) {
+    controller?.settleLibrary({ ...(query.data ? { all: query.data } : {}), error: query.error });
+}
 export function useMediaPage(props, _optional = {}) {
     const [localTab, setLocalTab] = useState('all');
     const { mediaApi, mediaEvents, mediaProviders } = useMediaPorts();
     const cached = useMediaLibraryQuery({ api: mediaApi }, { enabled: props.description.visible });
     const providers = useMediaProvidersQuery({ port: mediaProviders }, { enabled: props.description.visible && props.description.grants.includes('media.providers') });
     const invalidate = useInvalidate();
-    const library = useController({ create: () => createLibraryController({ api: cached.api }, { query: { filter: requestedFilter({ tabId: props.requestedTab ?? localTab }) } }), dependencies: [cached.api] }, { start: ({ controller }) => { if (props.description.visible)
+    const tabId = props.requestedTab ?? localTab;
+    const library = useController({ create: () => createLibraryController({ api: cached.api }, { query: { filter: requestedFilter({ tabId }) } }), dependencies: [cached.api] }, { start: ({ controller }) => { if (props.description.visible)
             void controller.load(); } });
     useEffect(() => props.description.visible ? mediaEvents?.subscribe({ onRefresh: () => { invalidate({ key: MEDIA_QUERY_KEYS.root }); } }) : undefined, [props.description.visible, mediaEvents, library.controller, invalidate]);
-    useEffect(() => { library.controller?.settleLibrary({ ...(cached.query.data ? { all: cached.query.data } : {}), error: cached.query.error }); }, [library.controller, cached.query.data, cached.query.error]);
+    useEffect(() => { settleFromCache({ controller: library.controller, query: cached.query }); }, [library.controller, cached.query.data, cached.query.error]);
     /* An unavailable read is not evidence of a zero catalogue. */
     const providerCount = providers.query.data?.length ?? null;
-    const visible = props.description.visible
-        ? props.description.tabs.filter((tab) => tab.visible)
-        : [];
-    const requested = resolveActiveTab({ tabId: props.requestedTab ?? localTab });
-    const active = visible.find((tab) => tab.id.endsWith(`.${requested}`)) ?? visible[0];
+    const { visible, active } = visibleTabs({ description: props.description, tabId });
     const tabs = visible.map((tab) => {
-        const id = tab.id.slice(tab.id.lastIndexOf('.') + 1);
+        const id = shortTabId({ id: tab.id });
         return {
             ...tab,
             id,
             handle: `media-tab-${id}`,
-            icon: createElement(id === 'images' ? ImageIcon : id === 'videos' ? VideoIcon : id === 'external-providers' ? CloudIcon : AllIcon, {}),
+            icon: createElement(TAB_ICONS.get(id) ?? AllIcon, {}),
             count: id === 'external-providers' ? providerCount : library.snapshot?.counts?.[id],
             selected: active?.id === tab.id,
             onPress: () => {
@@ -42,10 +43,11 @@ export function useMediaPage(props, _optional = {}) {
             },
         };
     });
-    const id = active?.id.slice(active.id.lastIndexOf('.') + 1);
+    const id = active && shortTabId({ id: active.id });
     useEffect(() => {
-        if (props.description.visible && (id === 'all' || id === 'images' || id === 'videos') && library.controller?.getSnapshot().query.filter !== id)
-            void library.controller?.setQuery({ query: { ...library.controller.getSnapshot().query, filter: id } });
+        const filter = libraryFilter({ id });
+        if (props.description.visible && filter && library.controller?.getSnapshot().query.filter !== filter)
+            void library.controller?.setQuery({ query: { ...library.controller.getSnapshot().query, filter } });
     }, [id, library.controller, props.description.visible]);
     return {
         library,
@@ -58,6 +60,21 @@ export function useMediaPage(props, _optional = {}) {
         denied: !props.description.visible,
     };
 }
+const TAB_ICONS = new Map([['images', ImageIcon], ['videos', VideoIcon], ['external-providers', CloudIcon]]);
+/** Module tab ids are namespaced (`media.images`); the page and its tabs use the last segment. */
+function shortTabId({ id }, _optional = {}) {
+    return id.slice(id.lastIndexOf('.') + 1);
+}
+function libraryFilter({ id }, _optional = {}) {
+    return id === 'all' || id === 'images' || id === 'videos' ? id : undefined;
+}
+function visibleTabs({ description, tabId }, _optional = {}) {
+    const visible = description.visible
+        ? description.tabs.filter((tab) => tab.visible)
+        : [];
+    const requested = resolveActiveTab({ tabId });
+    return { visible, active: visible.find((tab) => tab.id.endsWith(`.${requested}`)) ?? visible[0] };
+}
 function requestedFilter({ tabId }) {
     const tab = resolveActiveTab({ tabId });
     return tab === 'external-providers' ? 'all' : tab;

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';