@jini-ai/admin 0.4.12 → 0.6.10

package/dist/media/react/components/MediaIcons.d.ts

@@ -4,9 +4,6 @@ export declare function ReloadIcon(_required: Record<string, never>, _optional?:
 export declare function HiddenEyeIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
 export declare function EyeIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
 export declare function ExpandIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
-export declare function CloseIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
-export declare function PreviousIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
-export declare function NextIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
 export declare function AllIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
 export declare function ImageIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;
 export declare function VideoIcon(_required: Record<string, never>, _optional?: Record<string, never>): import("react").JSX.Element;

package/dist/media/react/components/MediaIcons.js

@@ -15,15 +15,6 @@ export function EyeIcon(_required, _optional = {}) {
 export function ExpandIcon(_required, _optional = {}) {
     return _jsx("svg", { className: "jini-icon", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { className: "jini-icon-path", d: "M6 2H2v4m10-4h4v4M2 12v4h4m10-4v4h-4" }) });
 }
-export function CloseIcon(_required, _optional = {}) {
-    return _jsx("svg", { className: "jini-icon", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { className: "jini-icon-path", d: "m4 4 10 10M14 4 4 14" }) });
-}
-export function PreviousIcon(_required, _optional = {}) {
-    return _jsx("svg", { className: "jini-icon", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { className: "jini-icon-path", d: "m11 4-5 5 5 5" }) });
-}
-export function NextIcon(_required, _optional = {}) {
-    return _jsx("svg", { className: "jini-icon", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { className: "jini-icon-path", d: "m7 4 5 5-5 5" }) });
-}
 export function AllIcon(_required, _optional = {}) {
     return _jsxs("svg", { className: "jini-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { className: "jini-icon-rect", x: "4", y: "4", width: "6.5", height: "6.5", rx: "1.2" }), _jsx("rect", { className: "jini-icon-rect", x: "13.5", y: "4", width: "6.5", height: "6.5", rx: "1.2" }), _jsx("rect", { className: "jini-icon-rect", x: "4", y: "13.5", width: "6.5", height: "6.5", rx: "1.2" }), _jsx("rect", { className: "jini-icon-rect", x: "13.5", y: "13.5", width: "6.5", height: "6.5", rx: "1.2" })] });
 }

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

@@ -1,5 +1,6 @@
 import type { MediaLightboxProps } from '../hooks/MediaLightbox.hooks.js';
 /** One shared dialog for the grid: mounting N real dialogs to show at most one open
- * at a time buys nothing and costs N DOM subtrees. */
+ * at a time buys nothing and costs N DOM subtrees. Chrome, keyboard and focus come from
+ * the shared `Lightbox`; this only supplies the asset and its agent-addressable parts. */
 export declare function MediaLightbox(props: MediaLightboxProps, _optional?: Record<string, never>): import("react").JSX.Element;
 //# sourceMappingURL=MediaLightbox.d.ts.map

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

@@ -1,12 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaDialog } from './MediaDialog.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Lightbox } from '@jini-ai/ui/admin-widgets';
 import { useMediaLightbox } from '../hooks/MediaLightbox.hooks.js';
-import { CloseIcon, PreviousIcon, NextIcon } from './MediaIcons.js';
 import { MediaPreview } from './MediaCard.js';
 /** One shared dialog for the grid: mounting N real dialogs to show at most one open
- * at a time buys nothing and costs N DOM subtrees. */
+ * at a time buys nothing and costs N DOM subtrees. Chrome, keyboard and focus come from
+ * the shared `Lightbox`; this only supplies the asset and its agent-addressable parts. */
 export function MediaLightbox(props, _optional = {}) {
     const vm = useMediaLightbox(props);
-    return (_jsxs(MediaDialog, { className: "jini-media-lightbox", dialogRef: vm.dialogRef, attrs: { 'data-jini-part': 'media.lightbox', 'data-jini-size': 'large' }, title: vm.title, open: vm.open, onClose: vm.onClose, children: [_jsxs("div", { className: "jini-media-lightbox-header", children: [_jsx("span", { className: "jini-media-lightbox-title", "aria-hidden": "true", children: vm.item?.title }), _jsx("span", { className: "jini-media-lightbox-counter", children: vm.position }), _jsxs("button", { type: "button", className: "jini-media-lightbox-close", ref: vm.closeRef, "data-jini-part": "media.lightbox.close", "data-agent-element": "media-lightbox-close", "data-jini-autofocus": true, onClick: vm.onClose, children: [_jsx(CloseIcon, {}), _jsx("span", { className: "jini-visually-hidden", children: "Close" })] })] }), _jsxs("div", { className: "jini-media-lightbox-stage", children: [vm.hasPrev && _jsxs("button", { type: "button", className: "jini-media-lightbox-nav jini-media-lightbox-nav-prev", "data-jini-part": "media.lightbox.previous", "data-agent-element": "media-lightbox-prev", onClick: vm.previous, children: [_jsx(PreviousIcon, {}), _jsx("span", { className: "jini-visually-hidden", children: "Previous" })] }), _jsx("div", { className: "jini-media-lightbox-media", children: vm.item && _jsx(MediaPreview, { item: vm.item, api: vm.api }, vm.item.id) }), vm.hasNext && _jsxs("button", { type: "button", className: "jini-media-lightbox-nav jini-media-lightbox-nav-next", "data-jini-part": "media.lightbox.next", "data-agent-element": "media-lightbox-next", onClick: vm.next, children: [_jsx(NextIcon, {}), _jsx("span", { className: "jini-visually-hidden", children: "Next" })] })] })] }));
+    return (_jsx(Lightbox, { ...vm.lightbox, className: "jini-media-lightbox", labels: { close: 'Close', previous: 'Previous', next: 'Next' }, partAttrs: MEDIA_LIGHTBOX_PARTS, children: vm.item && _jsx("div", { className: "jini-media-lightbox-media", children: _jsx(MediaPreview, { item: vm.item, api: props.api }, vm.item.id) }) }));
 }
+const MEDIA_LIGHTBOX_PARTS = {
+    dialog: { 'data-jini-part': 'media.lightbox', 'data-jini-size': 'large' },
+    close: { 'data-jini-part': 'media.lightbox.close', 'data-agent-element': 'media-lightbox-close' },
+    previous: { 'data-jini-part': 'media.lightbox.previous', 'data-agent-element': 'media-lightbox-prev' },
+    next: { 'data-jini-part': 'media.lightbox.next', 'data-agent-element': 'media-lightbox-next' },
+};
 //# sourceMappingURL=MediaLightbox.js.map

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

@@ -1,19 +1,65 @@
+import type { RefObject } from 'react';
 import type { TabViewProps } from '../../../core/react/bind-react.js';
 import { createLibraryController } from '../../controllers/library.controller.js';
 import type { MediaAsset } from '../../models.js';
+import type { LibraryState } from '../../controllers/library.controller.js';
+import type { MediaApiPort } from '../../ports.js';
+type LibraryController = ReturnType<typeof createLibraryController>;
 export declare function useLibraryTab({ params, permissions }: TabViewProps, _optional?: Record<string, never>): {
-    emptyLabel: string;
-    canUpload: boolean;
-    success: string | null;
-    gridRef: import("react").RefObject<HTMLDivElement | null>;
-    onRetry: () => void;
+    purgeDialog: {
+        filename?: string;
+        open: boolean;
+        pending: boolean;
+    };
+    upload({ input, alt }: Parameters<LibraryController["upload"]>[0]): Promise<boolean>;
+    cancelPurge: () => void | undefined;
+    confirmPurge: () => Promise<void> | undefined;
+    t: {
+        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.";
+    };
+    loading: boolean;
+    busy: boolean;
+    untyped: boolean;
     statusFilter: string;
+    orderBy: import("../../models.js").MediaOrderBy;
+    search: string;
     onStatus: ({ value }: {
         value: string;
     }) => void;
+    onSearch: ({ value: search }: {
+        value: string;
+    }) => void;
+    onOrder: ({ value }: {
+        value: string;
+    }) => void;
+    emptyLabel: string;
+    canUpload: boolean;
+    success: string | null;
+    gridRef: RefObject<HTMLDivElement | null>;
+    onRetry: () => void;
     canPurge: boolean;
     controller: {
-        getSnapshot: () => Readonly<import("../../index.js").LibraryState>;
+        getSnapshot: () => Readonly<LibraryState>;
         subscribe: ({ listener }: {
             listener: () => void;
         }) => () => void;
@@ -44,7 +90,7 @@ export declare function useLibraryTab({ params, permissions }: TabViewProps, _op
         }, _optional?: Record<string, never>): Promise<boolean>;
         dispose(_required?: Record<string, never>, _optional?: Record<string, never>): void;
     } | null;
-    snapshot: import("../../index.js").LibraryState | null;
+    snapshot: LibraryState | null;
     actions: {
         onPurge?: () => void | undefined;
         onRestore?: () => void;
@@ -55,7 +101,7 @@ export declare function useLibraryTab({ params, permissions }: TabViewProps, _op
         busy: boolean;
     }[];
     items: readonly MediaAsset[];
-    mediaApi: import("../../ports.js").MediaApiPort;
+    mediaApi: MediaApiPort;
     editing: MediaAsset | null;
     closeEdit: () => void;
     saved: ({ message }?: {
@@ -64,42 +110,6 @@ export declare function useLibraryTab({ params, permissions }: TabViewProps, _op
     lightboxIndex: number | null;
     onNavigate: import("react").Dispatch<import("react").SetStateAction<number | null>>;
     closeLightbox: () => void;
-    onSearch: ({ value: search }: {
-        value: string;
-    }) => void;
-    orderBy: import("../../models.js").MediaOrderBy;
-    onOrder: ({ value }: {
-        value: string;
-    }) => void;
-    search: string;
-    loading: boolean;
-    busy: boolean;
-    untyped: boolean;
-    upload({ input, alt }: Parameters<ReturnType<typeof createLibraryController>["upload"]>[0]): Promise<boolean>;
-    cancelPurge: () => void | undefined;
-    confirmPurge: () => Promise<void> | undefined;
-    t: {
-        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.";
-    };
 };
+export {};
 //# sourceMappingURL=LibraryTab.hooks.d.ts.map

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

@@ -3,13 +3,104 @@ import { MEDIA_QUERY_KEYS, useMediaLibraryQuery } from './MediaQuery.hooks.js';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useController } from '../../../core/react/use-controller.js';
 import { createLibraryController } from '../../controllers/library.controller.js';
-import { useSharedMediaLibrary } from './MediaPage.hooks.js';
+import { settleFromCache, useSharedMediaLibrary } from './MediaPage.hooks.js';
 import { useMediaPorts } from './MediaPorts.hooks.js';
 import { mediaMessagesEn } from '../../messages.en.js';
 import { canRestoreMedia } from '../../rules.js';
+const EMPTY_LABELS = {
+    images: 'No images yet. Upload an image to see it here.',
+    videos: 'No videos yet. Upload a video to see it here.',
+    all: 'No media found',
+};
+function contentFilter({ params }, _optional = {}) {
+    return params.filter === 'images' || params.filter === 'videos' ? params.filter : 'all';
+}
+function libraryPermissions({ permissions, api }, _optional = {}) {
+    return {
+        canUpload: permissions.includes('media.upload'),
+        canEdit: permissions.includes('media.update'),
+        canTrash: permissions.includes('media.trash'),
+        canRestore: permissions.includes('media.restore') && canRestoreMedia({ api }),
+        canPurge: permissions.includes('media.delete.force'),
+    };
+}
+/** Focuses the card with `id`, else whichever card now sits at `index`, else the grid itself. */
+function focusCard({ grid, index }, { id } = {}) {
+    const cards = Array.from(grid?.querySelectorAll('[data-jini-part="media.card"]') ?? []);
+    const byId = id === undefined ? undefined : cards.find(card => card.dataset.mediaId === id);
+    const target = byId ?? cards[Math.min(index, cards.length - 1)] ?? grid;
+    target?.focus({ preventScroll: true });
+}
+function queryView({ snapshot }, _optional = {}) {
+    return {
+        statusFilter: snapshot?.query.status ?? 'all',
+        orderBy: snapshot?.query.orderBy ?? 'created',
+        search: snapshot?.query.search ?? '',
+    };
+}
+function progressView({ snapshot, filter }, _optional = {}) {
+    return {
+        loading: !snapshot || (snapshot.items === null && snapshot.loading && !snapshot.error),
+        busy: snapshot?.busy ?? false,
+        untyped: filter !== 'all' && snapshot?.hasUntyped === true,
+    };
+}
+function purgeDialogView({ snapshot }, _optional = {}) {
+    const pending = snapshot?.pendingPurge;
+    return { open: !!pending, pending: snapshot?.busy ?? false, ...(pending ? { filename: pending.title } : {}) };
+}
+function queryHandlers({ controller }, _optional = {}) {
+    return {
+        onStatus: ({ value }) => {
+            const { status: _status, ...query } = controller?.getSnapshot().query ?? {};
+            void controller?.setQuery({ query: { ...query, ...(value === 'active' || value === 'trashed' ? { status: value } : {}) } });
+        },
+        onSearch: ({ value: search }) => {
+            void controller?.setQuery({ query: { ...controller.getSnapshot().query, search } });
+        },
+        onOrder: ({ value }) => {
+            void controller?.setQuery({ query: { ...controller.getSnapshot().query, orderBy: value === 'alphabetical' ? 'alphabetical' : 'created' } });
+        },
+    };
+}
+function cardActions({ items, pendingIds, can, controller, announce, onEdit, onPreview }, _optional = {}) {
+    return items.map((item, index) => {
+        const write = (run, verb) => {
+            void run?.then(saved => { if (saved)
+                announce({ message: `${verb} ${item.title}`, focus: { id: item.id, index } }); });
+        };
+        return {
+            item,
+            busy: pendingIds.includes(item.id),
+            ...(can.canEdit ? { onEdit: () => onEdit(item) } : {}),
+            onPreview: () => onPreview(index),
+            ...(can.canTrash ? { onTrash: () => write(controller?.trash({ id: item.id }), 'Trashed') } : {}),
+            ...(can.canRestore ? { onRestore: () => write(controller?.restore({ id: item.id }), 'Restored') } : {}),
+            ...(can.canPurge ? { onPurge: () => controller?.requestPurge({ item }) } : {}),
+        };
+    });
+}
+/** Once a write has settled and the grid re-rendered, return focus to the affected card. */
+function useFocusAfterWrites({ gridRef, snapshot }, _optional = {}) {
+    const [focusAfterAction, setFocusAfterAction] = useState(null);
+    useLayoutEffect(() => {
+        if (!focusAfterAction || snapshot?.busy || snapshot?.loading)
+            return;
+        focusCard({ grid: gridRef.current, index: focusAfterAction.index }, { id: focusAfterAction.id });
+        setFocusAfterAction(null);
+    }, [focusAfterAction, snapshot?.busy, snapshot?.loading, snapshot?.items]);
+    const [focusAfterPurge, setFocusAfterPurge] = useState(null);
+    useLayoutEffect(() => {
+        if (focusAfterPurge === null || snapshot?.pendingPurge || snapshot?.busy)
+            return;
+        focusCard({ grid: gridRef.current, index: focusAfterPurge });
+        setFocusAfterPurge(null);
+    }, [focusAfterPurge, snapshot?.pendingPurge, snapshot?.busy, snapshot?.items]);
+    return { setFocusAfterAction, setFocusAfterPurge };
+}
 export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
     const { mediaApi, mediaEvents } = useMediaPorts();
-    const filter = params.filter === 'images' || params.filter === 'videos' ? params.filter : 'all';
+    const filter = contentFilter({ params });
     const shared = useSharedMediaLibrary();
     const cached = useMediaLibraryQuery({ api: mediaApi }, { enabled: !shared });
     const invalidate = useInvalidate();
@@ -25,28 +116,10 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
     const { controller, snapshot } = shared ?? local;
     useEffect(() => !shared ? mediaEvents?.subscribe({ onRefresh: () => invalidate({ key: MEDIA_QUERY_KEYS.root }) }) : undefined, [mediaEvents, controller, shared, invalidate]);
     useEffect(() => { if (!shared)
-        local.controller?.settleLibrary({ ...(cached.query.data ? { all: cached.query.data } : {}), error: cached.query.error }); }, [shared, local.controller, cached.query.data, cached.query.error]);
+        settleFromCache({ controller: local.controller, query: cached.query }); }, [shared, local.controller, cached.query.data, cached.query.error]);
     const gridRef = useRef(null);
     const [success, setSuccess] = useState(null);
-    const [focusAfterAction, setFocusAfterAction] = useState(null);
-    useLayoutEffect(() => {
-        if (!focusAfterAction || snapshot?.busy || snapshot?.loading)
-            return;
-        const cards = Array.from(gridRef.current?.querySelectorAll('[data-jini-part="media.card"]') ?? []);
-        const target = cards.find(card => card.dataset.mediaId === focusAfterAction.id) ?? cards[Math.min(focusAfterAction.index, cards.length - 1)] ?? gridRef.current;
-        target?.focus({ preventScroll: true });
-        setFocusAfterAction(null);
-    }, [focusAfterAction, snapshot?.busy, snapshot?.loading, snapshot?.items]);
-    const [focusAfterPurge, setFocusAfterPurge] = useState(null);
-    useLayoutEffect(() => {
-        if (focusAfterPurge === null || snapshot?.pendingPurge || snapshot?.busy)
-            return;
-        const grid = gridRef.current;
-        const cards = grid?.querySelectorAll('[data-jini-part="media.card"]');
-        const target = cards?.[Math.min(focusAfterPurge, cards.length - 1)] ?? grid;
-        target?.focus({ preventScroll: true });
-        setFocusAfterPurge(null);
-    }, [focusAfterPurge, snapshot?.pendingPurge, snapshot?.busy, snapshot?.items]);
+    const { setFocusAfterAction, setFocusAfterPurge } = useFocusAfterWrites({ gridRef, snapshot });
     useEffect(() => {
         // A shared page controller survives tab unmounts. Re-entering after an error must
         // be a recovery opportunity even when its cached filter already matches this tab.
@@ -58,32 +131,9 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
     // buttons move the number without re-deriving "what's next" from an item reference.
     const [lightboxIndex, setLightboxIndex] = useState(null);
     const items = snapshot?.items ?? [], pendingIds = snapshot?.pendingIds ?? [];
-    const canUpload = permissions.includes('media.upload');
-    const canEdit = permissions.includes('media.update');
-    const canTrash = permissions.includes('media.trash');
-    const canRestore = permissions.includes('media.restore') && canRestoreMedia({ api: mediaApi });
-    const canPurge = permissions.includes('media.delete.force');
-    const actions = items.map((item, index) => ({
-        item,
-        busy: pendingIds.includes(item.id),
-        ...(canEdit ? { onEdit: () => setEditing(item) } : {}),
-        onPreview: () => setLightboxIndex(index),
-        ...(canTrash
-            ? {
-                onTrash: () => {
-                    void controller?.trash({ id: item.id }).then(saved => { if (saved) {
-                        setSuccess(`Trashed ${item.title}`);
-                        setFocusAfterAction({ id: item.id, index });
-                    } });
-                },
-            }
-            : {}),
-        ...(canRestore ? { onRestore: () => { void controller?.restore({ id: item.id }).then(saved => { if (saved) {
-                setSuccess(`Restored ${item.title}`);
-                setFocusAfterAction({ id: item.id, index });
-            } }); } } : {}),
-        ...(canPurge ? { onPurge: () => controller?.requestPurge({ item }) } : {}),
-    }));
+    const can = libraryPermissions({ permissions, api: mediaApi });
+    const announce = ({ message, focus }) => { setSuccess(message); setFocusAfterAction(focus); };
+    const actions = cardActions({ items, pendingIds, can, controller, announce, onEdit: setEditing, onPreview: setLightboxIndex });
     function closeEdit() {
         setEditing(null);
     }
@@ -99,18 +149,12 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
             setFocusAfterAction({ id: item.id, index: Math.max(0, items.findIndex(row => row.id === item.id)) });
     }
     return {
-        emptyLabel: filter === 'images' ? 'No images yet. Upload an image to see it here.'
-            : filter === 'videos' ? 'No videos yet. Upload a video to see it here.' : 'No media found',
-        canUpload,
+        emptyLabel: EMPTY_LABELS[filter],
+        canUpload: can.canUpload,
         success,
         gridRef,
         onRetry: () => { void controller?.load(); },
-        statusFilter: snapshot?.query.status ?? 'all',
-        onStatus: ({ value }) => {
-            const { status: _status, ...query } = controller?.getSnapshot().query ?? {};
-            void controller?.setQuery({ query: { ...query, ...(value === 'active' || value === 'trashed' ? { status: value } : {}) } });
-        },
-        canPurge,
+        canPurge: can.canPurge,
         controller,
         snapshot,
         actions,
@@ -122,19 +166,12 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
         lightboxIndex,
         onNavigate: setLightboxIndex,
         closeLightbox: () => setLightboxIndex(null),
-        onSearch: ({ value: search }) => {
-            void controller?.setQuery({ query: { ...controller.getSnapshot().query, search } });
-        },
-        orderBy: snapshot?.query.orderBy ?? 'created',
-        onOrder: ({ value }) => {
-            void controller?.setQuery({ query: { ...controller.getSnapshot().query, orderBy: value === 'alphabetical' ? 'alphabetical' : 'created' } });
-        },
-        search: snapshot?.query.search ?? '',
-        loading: !snapshot || (snapshot.items === null && snapshot.loading && !snapshot.error),
-        busy: snapshot?.busy ?? false,
-        untyped: filter !== 'all' && snapshot?.hasUntyped === true,
+        ...queryHandlers({ controller }),
+        ...queryView({ snapshot }),
+        ...progressView({ snapshot, filter }),
+        purgeDialog: purgeDialogView({ snapshot }),
         async upload({ input, alt }) {
-            if (!canUpload)
+            if (!can.canUpload)
                 return false;
             const result = await controller?.upload({ input, ...(alt === undefined ? {} : { alt }) }) ?? false;
             if (result)
@@ -145,7 +182,7 @@ export function useLibraryTab({ params, permissions = [] }, _optional = {}) {
         confirmPurge: () => {
             const item = controller?.getSnapshot().pendingPurge;
             // The controller refuses to purge without a pending item, so there is nothing to announce.
-            if (!canPurge || !controller || !item)
+            if (!can.canPurge || !controller || !item)
                 return;
             const index = items.findIndex(row => row.id === item.id);
             return controller.confirmPurge({ confirmed: true }).then(saved => {

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

@@ -13,14 +13,26 @@ export interface MediaCardProps {
     readonly onPurge?: () => void;
     readonly onChoose?: () => void;
 }
+type PreviewStage = 'image' | 'video' | 'unsupported';
 export declare function useMediaCard(props: MediaCardProps, _optional?: Record<string, never>): {
-    busy: boolean;
-    byteSize: string | null;
-    uploadDate: string | null;
-    metadataSeparator: string;
-    preview: () => void | undefined;
-    canPreview: boolean;
-    imagePreview: boolean;
+    statusClassName: string;
+    statusLabel: "active" | "trashed";
+    statusTone: "warning" | "success";
+    trashed: boolean;
+    menuItems: {
+        onPress: () => void;
+        disabled: boolean;
+        attrs?: {
+            'data-jini-variant': string;
+        };
+        id: string;
+        label: string;
+    }[];
+    src: string | undefined;
+    stage: PreviewStage;
+    onImageError: () => void;
+    onVideoError: () => void;
+    alt: string;
     handles: {
         expand: string;
         edit: string;
@@ -43,32 +55,15 @@ export declare function useMediaCard(props: MediaCardProps, _optional?: Record<s
         'data-agent-element': string;
         'data-agent-label': string;
     };
-    menuItems: ({
-        id: string;
-        label: string;
-        onPress: () => void;
-        disabled: boolean;
-        attrs?: never;
-    } | {
-        id: string;
-        label: string;
-        attrs: {
-            'data-jini-variant': string;
-        };
-        onPress: () => void;
-        disabled: boolean;
-    })[];
-    src: string | undefined;
-    stage: "video" | "image" | "unsupported";
+    canPreview: boolean;
+    imagePreview: boolean;
     image: boolean | "" | undefined;
     video: boolean | "" | undefined;
-    onImageError: () => void;
-    onVideoError: () => void;
-    alt: string;
-    statusClassName: string;
-    statusLabel: "active" | "trashed";
-    statusTone: "warning" | "success";
-    trashed: boolean;
+    preview: () => void | undefined;
+    byteSize: string | null;
+    uploadDate: string | null;
+    metadataSeparator: string;
+    busy: boolean;
     item: MediaAsset;
     handleBase?: string;
     locale?: string;
@@ -80,4 +75,5 @@ export declare function useMediaCard(props: MediaCardProps, _optional?: Record<s
     onPurge?: () => void;
     onChoose?: () => void;
 };
+export {};
 //# sourceMappingURL=MediaCard.hooks.d.ts.map

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

@@ -1,5 +1,52 @@
 import { useState } from 'react';
 import { safeMediaUrl, formatByteSize, formatUploadDate, mediaRowHandles } from '../../rules.js';
+function menuItems({ props }, _optional = {}) {
+    const disabled = props.busy === true, trashed = props.item.status === 'trashed';
+    const entries = [
+        { id: 'edit', label: 'Edit metadata', onPress: props.onEdit, shown: true },
+        { id: 'trash', label: 'Trash', onPress: props.onTrash, shown: !trashed },
+        // Restore belongs only in a trashed card's menu; active cards have nothing to restore.
+        { id: 'restore', label: 'Restore', onPress: props.onRestore, shown: trashed },
+        { id: 'purge', label: 'Delete permanently', onPress: props.onPurge, shown: trashed },
+    ];
+    return entries.flatMap(({ id, label, onPress, shown }) => onPress && shown
+        ? [{ id, label, ...(id === 'purge' ? { attrs: { 'data-jini-variant': 'danger' } } : {}), onPress, disabled }]
+        : []);
+}
+function metadata({ item }, { locale = 'en-US' } = {}) {
+    const byteSize = item.byteSize === undefined ? null : formatByteSize({ bytes: item.byteSize }, { locale });
+    const uploadDate = formatUploadDate({ createdAt: item.createdAt }, { locale });
+    return { byteSize, uploadDate, metadataSeparator: byteSize && uploadDate ? ' · ' : '' };
+}
+function previewFlags({ src, stage }, { onPreview } = {}) {
+    const previewable = !!onPreview && !!src;
+    return {
+        canPreview: previewable && stage !== 'unsupported',
+        imagePreview: previewable && stage === 'image',
+        image: src && stage === 'image',
+        video: src && stage === 'video',
+    };
+}
+function statusView({ item }, _optional = {}) {
+    const trashed = item.status === 'trashed';
+    return {
+        statusClassName: `jini-status jini-status-${item.status}`,
+        statusLabel: item.status,
+        statusTone: trashed ? 'warning' : 'success',
+        trashed,
+    };
+}
+function agentAttrs({ handleBase, title }, _optional = {}) {
+    return {
+        handles: { expand: `${handleBase}-expand`, edit: `${handleBase}-edit`, menu: `${handleBase}-menu` },
+        previewAttrs: { 'data-jini-part': 'media.preview', 'data-agent-element': `${handleBase}-expand`,
+            'data-agent-label': 'Open this asset larger in the lightbox', 'aria-label': `View "${title}" larger` },
+        editAttrs: { 'data-jini-part': 'media.edit', 'data-agent-element': `${handleBase}-edit`,
+            'data-agent-label': 'Open the edit form for this asset as a modal', 'aria-label': `Edit "${title}"` },
+        menuLabel: `Actions for "${title}"`,
+        menuAttrs: { 'data-agent-element': `${handleBase}-menu`, 'data-agent-label': `Actions for "${title}"` },
+    };
+}
 export function useMediaCard(props, _optional = {}) {
     /** Preview optimistically: image -> video -> placeholder. The list supplies no reliable media
      * kind, and the byte route guarantees GET rather than HEAD, so probing headers would assume an
@@ -12,41 +59,20 @@ export function useMediaCard(props, _optional = {}) {
     // immediately when the versioned URL changes, including in an already-open lightbox.
     const stage = probe.src === src ? probe.stage : 'image';
     const handleBase = props.handleBase ?? mediaRowHandles({ media: [props.item] })[0];
-    const byteSize = props.item.byteSize === undefined ? null : formatByteSize({ bytes: props.item.byteSize }, { locale: props.locale ?? 'en-US' });
-    const uploadDate = formatUploadDate({ createdAt: props.item.createdAt }, { locale: props.locale ?? 'en-US' });
     return {
         ...props,
         busy: props.busy === true,
-        byteSize, uploadDate,
-        metadataSeparator: byteSize && uploadDate ? ' · ' : '',
+        ...metadata({ item: props.item }, { locale: props.locale }),
         preview: () => props.onPreview?.(),
-        canPreview: !!props.onPreview && !!src && stage !== 'unsupported',
-        imagePreview: !!props.onPreview && !!src && stage === 'image',
-        handles: { expand: `${handleBase}-expand`, edit: `${handleBase}-edit`, menu: `${handleBase}-menu` },
-        previewAttrs: { 'data-jini-part': 'media.preview', 'data-agent-element': `${handleBase}-expand`,
-            'data-agent-label': 'Open this asset larger in the lightbox', 'aria-label': `View "${props.item.title}" larger` },
-        editAttrs: { 'data-jini-part': 'media.edit', 'data-agent-element': `${handleBase}-edit`,
-            'data-agent-label': 'Open the edit form for this asset as a modal', 'aria-label': `Edit "${props.item.title}"` },
-        menuLabel: `Actions for "${props.item.title}"`,
-        menuAttrs: { 'data-agent-element': `${handleBase}-menu`, 'data-agent-label': `Actions for "${props.item.title}"` },
-        menuItems: [
-            ...(props.onEdit ? [{ id: 'edit', label: 'Edit metadata', onPress: props.onEdit, disabled: props.busy === true }] : []),
-            ...(props.onTrash && props.item.status !== 'trashed' ? [{ id: 'trash', label: 'Trash', onPress: props.onTrash, disabled: props.busy === true }] : []),
-            // Restore belongs only in a trashed card's menu; active cards have nothing to restore.
-            ...(props.onRestore && props.item.status === 'trashed' ? [{ id: 'restore', label: 'Restore', onPress: props.onRestore, disabled: props.busy === true }] : []),
-            ...(props.onPurge && props.item.status === 'trashed' ? [{ id: 'purge', label: 'Delete permanently', attrs: { 'data-jini-variant': 'danger' }, onPress: props.onPurge, disabled: props.busy === true }] : []),
-        ],
+        ...previewFlags({ src, stage }, { onPreview: props.onPreview }),
+        ...agentAttrs({ handleBase, title: props.item.title }),
+        menuItems: menuItems({ props }),
         src,
         stage,
-        image: src && stage === 'image',
-        video: src && stage === 'video',
         onImageError: () => setProbe({ src, stage: 'video' }),
         onVideoError: () => setProbe({ src, stage: 'unsupported' }),
         alt: props.item.alt || props.item.title || 'Untitled asset',
-        statusClassName: `jini-status jini-status-${props.item.status}`,
-        statusLabel: props.item.status,
-        statusTone: props.item.status === 'trashed' ? 'warning' : 'success',
-        trashed: props.item.status === 'trashed',
+        ...statusView({ item: props.item }),
     };
 }
 //# sourceMappingURL=MediaCard.hooks.js.map

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

@@ -14,8 +14,8 @@ export declare function useMediaGrid(props: MediaGridProps, _optional?: Record<s
         locale?: string;
         busy?: boolean;
         onPurge?: () => void;
-        onEdit?: () => void;
         onPreview?: () => void;
+        onEdit?: () => void;
         onTrash?: () => void;
         onRestore?: () => void;
         onChoose?: () => void;