@jini-ai/admin 0.3.9 → 0.4.0

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

@@ -0,0 +1,118 @@
+import { useEffect, useRef, useState } from 'react';
+/** Reads a browser File at the React boundary; headless controllers only receive bytes. */
+export function readMediaFile({ file }, { signal } = {}) {
+    return new Promise((resolve, reject) => {
+        signal?.throwIfAborted();
+        const reader = new FileReader();
+        const abort = () => {
+            reader.abort();
+            reject(new Error('File read aborted'));
+        };
+        const cleanup = () => signal?.removeEventListener('abort', abort);
+        signal?.addEventListener('abort', abort, { once: true });
+        reader.onerror = () => {
+            cleanup();
+            reject(new Error('Failed to read file'));
+        };
+        reader.onload = () => {
+            cleanup();
+            const value = String(reader.result ?? '');
+            resolve({
+                filename: file.name,
+                contentType: file.type,
+                dataBase64: value.slice(value.indexOf(',') + 1),
+            });
+        };
+        reader.readAsDataURL(file);
+    });
+}
+export function useUploadButton(props, _optional = {}) {
+    // 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.
+    const inputRef = useRef(null);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [alt, setAlt] = useState(''), [busy, setBusy] = useState(false), [error, setError] = useState(null), [success, setSuccess] = useState(null);
+    const inFlight = useRef(false), lifetime = useRef(null);
+    useEffect(() => {
+        const abort = new AbortController();
+        lifetime.current = abort;
+        return () => abort.abort();
+    }, []);
+    function onFile(event) {
+        if (!inFlight.current && !props.disabled) {
+            setSelectedFiles(Array.from(event.currentTarget.files ?? []).slice(0, props.multiple === false ? 1 : undefined));
+            setError(null);
+            setSuccess(null);
+        }
+    }
+    async function uploadFiles(files) {
+        if (!files.length || inFlight.current || props.disabled)
+            return;
+        const signal = lifetime.current?.signal;
+        inFlight.current = true;
+        setBusy(true);
+        setError(null);
+        setSuccess(null);
+        const uploaded = [];
+        let remaining = [...files];
+        try {
+            for (const file of files) {
+                const input = await readMediaFile({ file }, signal ? { 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 = '';
+        }
+        catch (error) {
+            if (!signal?.aborted)
+                setError(error instanceof Error ? error.message : 'Upload failed');
+        }
+        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(', ')}`);
+            }
+        }
+    }
+    return {
+        alt,
+        withAlt: props.withAlt !== false,
+        multiple: props.multiple !== false,
+        chooseLabel: 'Choose file',
+        altLabel: props.multiple === false ? 'Alt text' : 'Upload alt text',
+        handles: props.label === 'Replace file'
+            ? { toolbar: 'media-replace-toolbar', file: 'media-replace-file', alt: 'media-replace-alt', submit: 'media-replace-submit' }
+            : { toolbar: 'media-upload-toolbar', file: 'media-upload-file', alt: 'media-upload-alt', submit: 'media-upload-submit' },
+        selectedFileName: selectedFiles.map(file => file.name).join(', ') || 'No file chosen',
+        onUpload: () => { void uploadFiles(selectedFiles); },
+        onDragOver: (event) => { event.preventDefault(); },
+        onDrop: (event) => {
+            event.preventDefault();
+            if (inFlight.current || props.disabled)
+                return;
+            const files = Array.from(event.dataTransfer.files).slice(0, props.multiple === false ? 1 : undefined);
+            setSelectedFiles(files);
+            void uploadFiles(files);
+        },
+        // An empty selection is a no-op, as on the original toolbar; Upload stays enabled.
+        uploadDisabled: busy || props.disabled === true,
+        setAlt: ({ value }) => setAlt(value),
+        inputRef, onFile, error, success,
+        disabled: busy || props.disabled === true,
+        onPress: () => inputRef.current?.click(),
+        label: props.label ?? 'Upload',
+    };
+}
+//# sourceMappingURL=UploadButton.hooks.js.map

package/dist/media/react/index.d.ts

@@ -0,0 +1,373 @@
+import type { ReactNode } from 'react';
+import type { OverlayPort } from '../../react/overlays.js';
+import type { MediaApiPort } from '../ports.js';
+import type { MediaPickerPort } from '../../contracts/media-picker.js';
+export type { MediaPageProps } from './hooks/MediaPage.hooks.js';
+export { useMediaPorts } from './hooks/MediaPorts.hooks.js';
+/** One module factory per mounted admin scope. Tabs and even the picker are loaded on demand. */
+export declare function media({ overlays }: {
+    overlays: OverlayPort;
+}, { headerActions }?: {
+    headerActions?: ReactNode;
+}): {
+    factories: {
+        mediaPicker: ({ ports, permissions, }: {
+            ports: Readonly<Record<string, unknown>>;
+            permissions: readonly string[];
+        }, _optional?: Record<string, never>) => MediaPickerPort & {
+            dispose(): void;
+        };
+    };
+    id: "media";
+    requires: {
+        readonly mediaApi: import("../../core/module/token.js").AdminPortToken<MediaApiPort, "admin.media.api">;
+    };
+    optional: {
+        readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+        readonly mediaEvents: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaEventsPort, "admin.media.events">;
+    };
+    provides: {
+        readonly mediaPicker: import("../../core/module/token.js").AdminPortToken<MediaPickerPort, "admin.media.picker">;
+    };
+    messages: {
+        readonly media: "Media";
+        readonly all: "All";
+        readonly images: "Images";
+        readonly videos: "Videos";
+        readonly providers: "External Providers";
+        readonly upload: "Upload";
+        readonly title: "Title";
+        readonly alt: "Alt text";
+        readonly save: "Save";
+        readonly cancel: "Cancel";
+        readonly empty: "No media found";
+        readonly loading: "Loading media…";
+        readonly choose: "Choose media";
+        readonly trash: "Trash";
+        readonly purge: "Delete permanently";
+        readonly purgeWarning: "This permanently deletes the file. This cannot be undone.";
+        readonly edit: "Edit metadata";
+        readonly preview: "View larger";
+        readonly replace: "Replace file";
+        readonly unavailable: "Provider service unavailable";
+        readonly untyped: "Some assets have no recorded content type and only appear under All.";
+    };
+    pages: {
+        readonly library: {
+            readonly path: "/media";
+            readonly label: "Media";
+            readonly permissions: readonly ["media.read"];
+            readonly agentReachable: true;
+            readonly nav: {
+                readonly group: "content";
+                readonly icon: "image";
+            };
+            readonly tabs: {
+                readonly all: {
+                    readonly label: "All";
+                    readonly params: {
+                        readonly filter: "all";
+                    };
+                    readonly agentReachable: true;
+                };
+                readonly images: {
+                    readonly label: "Images";
+                    readonly params: {
+                        readonly filter: "images";
+                    };
+                    readonly agentReachable: true;
+                };
+                readonly videos: {
+                    readonly label: "Videos";
+                    readonly params: {
+                        readonly filter: "videos";
+                    };
+                    readonly agentReachable: true;
+                };
+                readonly 'external-providers': {
+                    readonly label: "External Providers";
+                    readonly permissions: readonly ["media.providers"];
+                    readonly optional: {
+                        readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+                    };
+                };
+            };
+        };
+    };
+} & {
+    react: {
+        module: {
+            factories: {
+                mediaPicker: ({ ports, permissions, }: {
+                    ports: Readonly<Record<string, unknown>>;
+                    permissions: readonly string[];
+                }, _optional?: Record<string, never>) => MediaPickerPort & {
+                    dispose(): void;
+                };
+            };
+            id: "media";
+            requires: {
+                readonly mediaApi: import("../../core/module/token.js").AdminPortToken<MediaApiPort, "admin.media.api">;
+            };
+            optional: {
+                readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+                readonly mediaEvents: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaEventsPort, "admin.media.events">;
+            };
+            provides: {
+                readonly mediaPicker: import("../../core/module/token.js").AdminPortToken<MediaPickerPort, "admin.media.picker">;
+            };
+            messages: {
+                readonly media: "Media";
+                readonly all: "All";
+                readonly images: "Images";
+                readonly videos: "Videos";
+                readonly providers: "External Providers";
+                readonly upload: "Upload";
+                readonly title: "Title";
+                readonly alt: "Alt text";
+                readonly save: "Save";
+                readonly cancel: "Cancel";
+                readonly empty: "No media found";
+                readonly loading: "Loading media…";
+                readonly choose: "Choose media";
+                readonly trash: "Trash";
+                readonly purge: "Delete permanently";
+                readonly purgeWarning: "This permanently deletes the file. This cannot be undone.";
+                readonly edit: "Edit metadata";
+                readonly preview: "View larger";
+                readonly replace: "Replace file";
+                readonly unavailable: "Provider service unavailable";
+                readonly untyped: "Some assets have no recorded content type and only appear under All.";
+            };
+            pages: {
+                readonly library: {
+                    readonly path: "/media";
+                    readonly label: "Media";
+                    readonly permissions: readonly ["media.read"];
+                    readonly agentReachable: true;
+                    readonly nav: {
+                        readonly group: "content";
+                        readonly icon: "image";
+                    };
+                    readonly tabs: {
+                        readonly all: {
+                            readonly label: "All";
+                            readonly params: {
+                                readonly filter: "all";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly images: {
+                            readonly label: "Images";
+                            readonly params: {
+                                readonly filter: "images";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly videos: {
+                            readonly label: "Videos";
+                            readonly params: {
+                                readonly filter: "videos";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly 'external-providers': {
+                            readonly label: "External Providers";
+                            readonly permissions: readonly ["media.providers"];
+                            readonly optional: {
+                                readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        pages: {
+            readonly library: {
+                Page: import("react").LazyExoticComponent<import("react").ComponentType<import("../../react/bind-react.js").ModulePageProps>>;
+                tabs: {
+                    readonly all: import("react").LazyExoticComponent<import("react").ComponentType<import("../../react/bind-react.js").TabViewProps>>;
+                    readonly images: import("react").LazyExoticComponent<import("react").ComponentType<import("../../react/bind-react.js").TabViewProps>>;
+                    readonly videos: import("react").LazyExoticComponent<import("react").ComponentType<import("../../react/bind-react.js").TabViewProps>>;
+                    readonly 'external-providers': import("react").LazyExoticComponent<import("react").ComponentType<import("../../react/bind-react.js").TabViewProps>>;
+                };
+            };
+        };
+        Provider: ({ admin, children }: {
+            admin: import("../../core/module/types.js").AdminInstance;
+            children: ReactNode;
+        }, _optional?: Record<string, never>) => import("react").FunctionComponentElement<import("react").ProviderProps<import("../../core/module/types.js").ScopedPorts<{
+            factories: {
+                mediaPicker: ({ ports, permissions, }: {
+                    ports: Readonly<Record<string, unknown>>;
+                    permissions: readonly string[];
+                }, _optional?: Record<string, never>) => MediaPickerPort & {
+                    dispose(): void;
+                };
+            };
+            id: "media";
+            requires: {
+                readonly mediaApi: import("../../core/module/token.js").AdminPortToken<MediaApiPort, "admin.media.api">;
+            };
+            optional: {
+                readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+                readonly mediaEvents: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaEventsPort, "admin.media.events">;
+            };
+            provides: {
+                readonly mediaPicker: import("../../core/module/token.js").AdminPortToken<MediaPickerPort, "admin.media.picker">;
+            };
+            messages: {
+                readonly media: "Media";
+                readonly all: "All";
+                readonly images: "Images";
+                readonly videos: "Videos";
+                readonly providers: "External Providers";
+                readonly upload: "Upload";
+                readonly title: "Title";
+                readonly alt: "Alt text";
+                readonly save: "Save";
+                readonly cancel: "Cancel";
+                readonly empty: "No media found";
+                readonly loading: "Loading media…";
+                readonly choose: "Choose media";
+                readonly trash: "Trash";
+                readonly purge: "Delete permanently";
+                readonly purgeWarning: "This permanently deletes the file. This cannot be undone.";
+                readonly edit: "Edit metadata";
+                readonly preview: "View larger";
+                readonly replace: "Replace file";
+                readonly unavailable: "Provider service unavailable";
+                readonly untyped: "Some assets have no recorded content type and only appear under All.";
+            };
+            pages: {
+                readonly library: {
+                    readonly path: "/media";
+                    readonly label: "Media";
+                    readonly permissions: readonly ["media.read"];
+                    readonly agentReachable: true;
+                    readonly nav: {
+                        readonly group: "content";
+                        readonly icon: "image";
+                    };
+                    readonly tabs: {
+                        readonly all: {
+                            readonly label: "All";
+                            readonly params: {
+                                readonly filter: "all";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly images: {
+                            readonly label: "Images";
+                            readonly params: {
+                                readonly filter: "images";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly videos: {
+                            readonly label: "Videos";
+                            readonly params: {
+                                readonly filter: "videos";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly 'external-providers': {
+                            readonly label: "External Providers";
+                            readonly permissions: readonly ["media.providers"];
+                            readonly optional: {
+                                readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+                            };
+                        };
+                    };
+                };
+            };
+        }> | null>>;
+        usePorts: (_required?: Record<string, never>, _optional?: Record<string, never>) => import("../../core/module/types.js").ScopedPorts<{
+            factories: {
+                mediaPicker: ({ ports, permissions, }: {
+                    ports: Readonly<Record<string, unknown>>;
+                    permissions: readonly string[];
+                }, _optional?: Record<string, never>) => MediaPickerPort & {
+                    dispose(): void;
+                };
+            };
+            id: "media";
+            requires: {
+                readonly mediaApi: import("../../core/module/token.js").AdminPortToken<MediaApiPort, "admin.media.api">;
+            };
+            optional: {
+                readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+                readonly mediaEvents: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaEventsPort, "admin.media.events">;
+            };
+            provides: {
+                readonly mediaPicker: import("../../core/module/token.js").AdminPortToken<MediaPickerPort, "admin.media.picker">;
+            };
+            messages: {
+                readonly media: "Media";
+                readonly all: "All";
+                readonly images: "Images";
+                readonly videos: "Videos";
+                readonly providers: "External Providers";
+                readonly upload: "Upload";
+                readonly title: "Title";
+                readonly alt: "Alt text";
+                readonly save: "Save";
+                readonly cancel: "Cancel";
+                readonly empty: "No media found";
+                readonly loading: "Loading media…";
+                readonly choose: "Choose media";
+                readonly trash: "Trash";
+                readonly purge: "Delete permanently";
+                readonly purgeWarning: "This permanently deletes the file. This cannot be undone.";
+                readonly edit: "Edit metadata";
+                readonly preview: "View larger";
+                readonly replace: "Replace file";
+                readonly unavailable: "Provider service unavailable";
+                readonly untyped: "Some assets have no recorded content type and only appear under All.";
+            };
+            pages: {
+                readonly library: {
+                    readonly path: "/media";
+                    readonly label: "Media";
+                    readonly permissions: readonly ["media.read"];
+                    readonly agentReachable: true;
+                    readonly nav: {
+                        readonly group: "content";
+                        readonly icon: "image";
+                    };
+                    readonly tabs: {
+                        readonly all: {
+                            readonly label: "All";
+                            readonly params: {
+                                readonly filter: "all";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly images: {
+                            readonly label: "Images";
+                            readonly params: {
+                                readonly filter: "images";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly videos: {
+                            readonly label: "Videos";
+                            readonly params: {
+                                readonly filter: "videos";
+                            };
+                            readonly agentReachable: true;
+                        };
+                        readonly 'external-providers': {
+                            readonly label: "External Providers";
+                            readonly permissions: readonly ["media.providers"];
+                            readonly optional: {
+                                readonly mediaProviders: import("../../core/module/token.js").AdminPortToken<import("../ports.js").MediaProvidersPort, "admin.media.providers">;
+                            };
+                        };
+                    };
+                };
+            };
+        }>;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/media/react/index.js

@@ -0,0 +1,73 @@
+import { createElement } from 'react';
+import { bindReact } from '../../react/bind-react.js';
+import { mediaModule } from '../media.module.js';
+import { MediaPortsContext } from './hooks/MediaPorts.hooks.js';
+export { useMediaPorts } from './hooks/MediaPorts.hooks.js';
+/** One module factory per mounted admin scope. Tabs and even the picker are loaded on demand. */
+export function media({ overlays }, { headerActions } = {}) {
+    const module = {
+        ...mediaModule,
+        factories: {
+            mediaPicker: ({ ports, permissions, }, _optional = {}) => {
+                const pending = new Set();
+                let disposed = false;
+                return {
+                    async pick({ accept }, { signal } = {}) {
+                        if (disposed)
+                            return null;
+                        if (!permissions.includes('media.read'))
+                            throw new Error('Permission denied: media.read');
+                        const abort = new AbortController();
+                        pending.add(abort);
+                        const onAbort = () => abort.abort();
+                        signal?.addEventListener('abort', onAbort, { once: true });
+                        if (signal?.aborted)
+                            abort.abort();
+                        try {
+                            const { MediaPicker } = await import('./components/MediaPicker.js');
+                            if (abort.signal.aborted)
+                                return null;
+                            return await overlays.open({
+                                render: ({ resolve, cancel }) => createElement(MediaPicker, {
+                                    api: ports.mediaApi,
+                                    accept,
+                                    onChoose: resolve,
+                                    onClose: cancel,
+                                }),
+                            }, { signal: abort.signal });
+                        }
+                        finally {
+                            signal?.removeEventListener('abort', onAbort);
+                            pending.delete(abort);
+                        }
+                    },
+                    dispose() {
+                        disposed = true;
+                        for (const abort of pending)
+                            abort.abort();
+                        pending.clear();
+                    },
+                };
+            },
+        },
+    };
+    const react = bindReact({
+        module,
+        views: {
+            library: {
+                page: async () => {
+                    const { MediaPage } = await import('./pages/MediaPage.js');
+                    return { default: (props) => createElement(MediaPage, { ...props, headerActions }) };
+                },
+                tabs: {
+                    all: () => import('./tabs/LibraryTab.js'),
+                    images: () => import('./tabs/LibraryTab.js'),
+                    videos: () => import('./tabs/LibraryTab.js'),
+                    'external-providers': () => import('./tabs/ProvidersTab.js'),
+                },
+            },
+        },
+    }, { context: MediaPortsContext });
+    return Object.assign(module, { react });
+}
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { MediaLibraryContext, useMediaPage } from '../hooks/MediaPage.hooks.js';
+export function MediaPage(props, _optional = {}) {
+    const vm = useMediaPage(props);
+    return (_jsxs("section", { className: "jini-page", "data-jini-part": "media.page", children: [_jsxs("header", { className: "jini-page-header", "data-jini-part": "media.header", children: [_jsxs("div", { className: "jini-page-header-text", children: [_jsx("p", { className: "jini-page-kicker", "data-jini-part": "media.header.eyebrow", children: "Content" }), _jsx("h1", { className: "jini-page-title", "data-agent-element": "media-header", children: props.description.label }), _jsx("p", { className: "jini-page-description", "data-jini-part": "media.header.subtitle", children: "Upload and manage image and video assets used across the site." })] }), !vm.denied && _jsx("div", { className: "jini-page-actions", "data-jini-part": "media.header.actions", children: vm.headerActions })] }), vm.denied ? (_jsx("p", { className: "jini-notice jini-notice-error", role: "alert", children: "Permission denied" })) : (_jsxs(_Fragment, { children: [_jsx("nav", { className: "jini-tab-bar", role: "tablist", "aria-label": "Media", children: vm.tabs.map((tab) => (_jsxs("button", { className: "jini-tab-bar-item", type: "button", role: "tab", "data-jini-part": "media.tab", "data-agent-element": tab.handle, "aria-selected": tab.selected, "aria-label": tab.label, onClick: tab.onPress, children: [_jsx("span", { className: "jini-tab-bar-icon", "aria-hidden": "true", children: tab.icon }), tab.label, tab.count != null && _jsx("span", { className: "jini-tab-bar-count", children: tab.count })] }, tab.id))) }), _jsx(MediaLibraryContext.Provider, { value: vm.library, children: _jsx(Suspense, { fallback: _jsx("p", { className: "jini-notice", role: "status", children: "Loading media\u2026" }), children: vm.ActiveTab && (_jsx(vm.ActiveTab, { params: vm.params, permissions: vm.permissions }, vm.activeId)) }) })] }))] }));
+}
+export default MediaPage;
+//# sourceMappingURL=MediaPage.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Select, TextField } from '@jini-ai/ui-kit/react';
+import { useLibraryTab } from '../hooks/LibraryTab.hooks.js';
+import { MediaGrid } from '../components/MediaGrid.js';
+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 = {}) {
+    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 })] }));
+}
+export default LibraryTab;
+//# sourceMappingURL=LibraryTab.js.map

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useProvidersTab } from '../hooks/ProvidersTab.hooks.js';
+import { EyeIcon, HiddenEyeIcon, ReloadIcon } from '../components/MediaIcons.js';
+export function ProvidersTab(_props, _optional = {}) {
+    const vm = useProvidersTab();
+    return _jsxs("section", { className: "jini-media-providers-panel jini-settings-section jini-settings-media-providers", "data-jini-part": "media.providers", "data-theme": "light", children: [_jsxs("div", { className: "jini-section-head", children: [_jsxs("div", { children: [_jsx("h4", { children: "Media providers" }), _jsx("p", { className: "jini-hint", children: "Credentials this host uses to generate images and video." })] }), _jsxs("button", { type: "button", className: "jini-button jini-button-ghost", "data-agent-element": "media-providers-reload", onClick: vm.reload, disabled: vm.reloadDisabled, children: [_jsx(ReloadIcon, {}), _jsx("span", { children: vm.reloadLabel })] })] }), vm.unreachable && _jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: "Could not reach the server. Showing local changes only." }), vm.empty && _jsx("p", { className: "jini-hint", children: "No media providers configured yet." }), _jsx("div", { className: "jini-media-provider-list", children: vm.rows.map(row => _jsxs(Fragment, { children: [row.divider && _jsx("hr", { className: "jini-media-provider-divider" }), _jsxs("article", { className: "jini-media-provider-card", children: [_jsxs("div", { className: "jini-media-provider-card-head", children: [_jsx("strong", { className: "jini-media-provider-name", children: row.label }), row.statusLabel && _jsx("span", { className: row.statusClassName, children: row.statusLabel })] }), _jsxs("div", { className: "jini-media-provider-fields", children: [_jsxs("label", { className: "jini-media-provider-field jini-media-provider-field--secret", children: [_jsxs("span", { className: "jini-field-label jini-sr-only", children: [row.label, " credential"] }), _jsx("input", { className: "jini-input", ...row.credentialAttrs, autoComplete: "new-password", spellCheck: false, type: row.credentialType, placeholder: row.credentialPlaceholder, value: row.credential, onChange: row.onCredential, disabled: vm.disabled }), _jsx("button", { type: "button", className: "jini-input-affix-btn", "aria-label": row.toggleLabel, "aria-pressed": row.visible, onClick: row.toggle, disabled: vm.disabled, children: row.visible ? _jsx(HiddenEyeIcon, {}) : _jsx(EyeIcon, {}) })] }), _jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: row.baseUrlLabel }), _jsx("input", { className: "jini-input", "aria-label": row.baseUrlLabel, placeholder: row.baseUrlPlaceholder, type: "url", inputMode: "url", spellCheck: false, "aria-invalid": row.ariaInvalid, value: row.baseUrl, onChange: row.onBaseUrl, disabled: vm.settingsDisabled })] }), row.hasModels && _jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: row.modelLabel }), _jsx("input", { className: "jini-input", "aria-label": row.modelLabel, list: row.modelsId, placeholder: "Default model", spellCheck: false, value: row.model, onChange: row.onModel, disabled: vm.settingsDisabled }), _jsx("datalist", { id: row.modelsId, children: row.models?.map(model => _jsx("option", { value: model }, model)) })] }), _jsx("button", { type: "button", className: "jini-button jini-button-ghost", "data-jini-part": "media.provider.remove", "aria-label": row.clearLabel, onClick: row.clear, disabled: row.clearDisabled, children: "Clear" })] }), row.hint && _jsx("span", { className: row.hintClassName, role: row.hintRole, children: row.hint })] })] }, row.id)) }), _jsxs("div", { className: "jini-media-provider-save-row", children: [_jsx("button", { type: "button", className: "jini-button", "data-jini-part": "media.provider.save", "data-agent-element": "media-providers-save", onClick: vm.save, disabled: vm.saveDisabled, children: vm.saveLabel }), vm.saved && _jsx("span", { className: "jini-hint", role: "status", children: "Saved." }), vm.saveError && _jsx("span", { className: "jini-hint jini-hint-error", role: "alert", children: "Could not save media providers." })] })] });
+}
+export default ProvidersTab;
+//# sourceMappingURL=ProvidersTab.js.map