canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/media/MediaLibraryBody.js

@@ -1,22 +1,49 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-import { Alert, Button, Group, Loader, Progress, ScrollArea, SimpleGrid, Stack, Text, TextInput, } from '@mantine/core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActionIcon, Alert, Button, Center, Group, Progress, ScrollArea, SegmentedControl, Select, SimpleGrid, Stack, Text, TextInput, Tooltip, VisuallyHidden, } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { modals } from '@mantine/modals';
-import { IconAlertCircle, IconUpload } from '@tabler/icons-react';
+import { openConfirm } from '../utils/confirm-modal.js';
+import { IconAlertCircle, IconGridDots, IconLayoutGrid, IconList, IconSearch, IconUpload, IconX, } from '@tabler/icons-react';
 import { getErrorMessage } from '../../utils/error.js';
+import { isNonApiResponse } from '../../api/client.js';
 // Import directly from helpers (not the authorization barrel) to keep server-only
 // authorization code out of this client bundle - matches BranchManager's convention.
 import { isAdmin } from '../../authorization/helpers.js';
 import { useApiClient, useAssetContext } from '../context/index.js';
 import { useUserContext } from '../hooks/index.js';
 import { AssetCard } from './AssetCard.js';
+import { AssetListRow } from './AssetListRow.js';
+import { MediaLibrarySkeleton } from './MediaLibrarySkeleton.js';
+import { useAssetLibrary } from './useAssetLibrary.js';
+import { useStableAssetOrder } from './useStableAssetOrder.js';
 import { useAssetUpload } from './useAssetUpload.js';
+import { useMediaLibraryPrefs } from './media-library-prefs.js';
+import { GRID_COLUMNS, fileCountLabel, matchesKind, matchesText, } from './media-library-view.js';
 import { ACCEPTED_ASSET_MIME_TYPES, ACCEPTED_IMAGE_MIME_TYPES, MAX_UPLOAD_BYTES, } from './upload-constants.js';
-const PAGE_SIZE = 40;
+/** How many assets render at first, and how many each reveal adds. All of them load regardless. */
+const RENDER_WINDOW = 40;
+const SORT_OPTIONS = [
+    { value: 'newest', label: 'Newest first' },
+    { value: 'name', label: 'Name (A–Z)' },
+];
+const KIND_OPTIONS = [
+    { value: 'all', label: 'All' },
+    { value: 'images', label: 'Images' },
+    { value: 'pdfs', label: 'PDFs' },
+];
+/** An icon-only radio segment: the visible icon, a tooltip, and hidden text for the radio's name. */
+const DensityLabel = ({ icon, text }) => (_jsx(Tooltip, { label: text, children: _jsxs(Center, { children: [icon, _jsx(VisuallyHidden, { children: text })] }) }));
+const DENSITY_OPTIONS = [
+    { value: 'grid', label: _jsx(DensityLabel, { icon: _jsx(IconLayoutGrid, { size: 16 }), text: "Grid" }) },
+    {
+        value: 'compact',
+        label: _jsx(DensityLabel, { icon: _jsx(IconGridDots, { size: 16 }), text: "Compact grid" }),
+    },
+    { value: 'list', label: _jsx(DensityLabel, { icon: _jsx(IconList, { size: 16 }), text: "List" }) },
+];
 /**
- * Shared grid/upload/filter/pagination/delete core for both MediaLibrary
+ * Shared grid/list/upload/search/delete core for both MediaLibrary
  * presentations (Drawer "manage" mode, Modal "picker" mode) - see
  * MediaLibrary.tsx for the two wrappers.
  */
@@ -40,102 +67,190 @@ export const MediaLibraryBody = ({ opened, mode, onSelect }) => {
     // (see MediaLibraryProps.mode's doc comment) - both image-only contexts.
     // `manage` mode (the Editor's Media Library drawer) keeps accepting PDFs.
     const imageOnly = mode === 'picker';
-    const [assets, setAssets] = useState([]);
-    const [nextCursor, setNextCursor] = useState(undefined);
-    const [loading, setLoading] = useState(false);
-    const [loadingMore, setLoadingMore] = useState(false);
-    const [listError, setListError] = useState(null);
+    const library = useAssetLibrary(opened);
+    const { sort, density, setSort, setDensity } = useMediaLibraryPrefs();
+    const [kind, setKind] = useState('all');
     const [filterText, setFilterText] = useState('');
-    const loadFirstPage = useCallback(async () => {
-        setLoading(true);
-        setListError(null);
-        try {
-            const result = await client.assets.list({ limit: String(PAGE_SIZE) });
-            if (!result.ok || !result.data) {
-                setListError(result.error || 'Failed to load assets');
-                return;
-            }
-            setAssets(result.data.assets);
-            setNextCursor(result.data.nextCursor);
-        }
-        catch (err) {
-            setListError(getErrorMessage(err));
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [client]);
+    const [actionError, setActionError] = useState(null);
+    // The result of the last remove, for the live region; the removed card itself is gone.
+    // `id` re-keys the region's text, so a second remove with the same words is announced too.
+    const [actionNotice, setActionNotice] = useState(null);
+    const searchRef = useRef(null);
+    // A removed card takes its focused button with it, so focus moves to the search field once the
+    // removal has rendered (Mantine returns focus to the trash button when the confirm closes).
+    const focusAfterRemove = useRef(false);
     useEffect(() => {
-        if (!opened)
+        if (!focusAfterRemove.current)
             return;
-        void loadFirstPage();
-        // Refetch only when the drawer/modal (re)opens, not on every render where
-        // loadFirstPage's identity happens to change.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [opened]);
-    const handleLoadMore = async () => {
-        if (!nextCursor)
-            return;
-        setLoadingMore(true);
-        setListError(null);
-        try {
-            const result = await client.assets.list({ cursor: nextCursor, limit: String(PAGE_SIZE) });
-            if (!result.ok || !result.data) {
-                setListError(result.error || 'Failed to load more assets');
-                return;
-            }
-            const page = result.data;
-            setAssets((prev) => [...prev, ...page.assets]);
-            setNextCursor(page.nextCursor);
-        }
-        catch (err) {
-            setListError(getErrorMessage(err));
-        }
-        finally {
-            setLoadingMore(false);
-        }
+        focusAfterRemove.current = false;
+        searchRef.current?.focus();
+    });
+    // Clearing hides the control that did it, so focus moves to the search field.
+    const clearSearch = () => {
+        setFilterText('');
+        searchRef.current?.focus();
     };
+    // This opening's uploads, newest first; they lead the list whatever the sort.
+    const [pinned, setPinned] = useState([]);
+    // The render window resets whenever the list it windows changes shape. Adjusting it during
+    // render, not in an effect, avoids a frame with the old count.
+    const windowKey = `${filterText}|${sort}|${kind}|${density}`;
+    const [windowState, setWindowState] = useState({ key: windowKey, count: RENDER_WINDOW });
+    if (windowState.key !== windowKey)
+        setWindowState({ key: windowKey, count: RENDER_WINDOW });
+    const visibleCount = windowState.key === windowKey ? windowState.count : RENDER_WINDOW;
+    const showMore = useCallback(() => setWindowState({ key: windowKey, count: visibleCount + RENDER_WINDOW }), [windowKey, visibleCount]);
+    const needle = filterText.trim().toLowerCase();
+    const effectiveKind = imageOnly ? 'images' : kind;
+    // Picker mode is image-only (see `imageOnly` above) - pdf assets are
+    // excluded from the pickable list entirely, not just the upload accept
+    // list, since an already-uploaded pdf could otherwise still be selected.
+    const scopedAssets = useMemo(() => (imageOnly ? library.assets.filter((asset) => asset.kind !== 'pdf') : library.assets), [imageOnly, library.assets]);
+    const kindAssets = useMemo(() => scopedAssets.filter((asset) => matchesKind(asset, effectiveKind)), [scopedAssets, effectiveKind]);
+    const orderedAssets = useStableAssetOrder(scopedAssets, sort, library.complete, pinned);
+    const matchedAssets = useMemo(() => orderedAssets.filter((asset) => matchesKind(asset, effectiveKind) && matchesText(asset, needle)), [orderedAssets, effectiveKind, needle]);
+    const visibleAssets = matchedAssets.slice(0, visibleCount);
+    const hasMore = matchedAssets.length > visibleAssets.length;
+    const [sentinel, setSentinel] = useState(null);
+    // The scroll viewport is the observer's root: a margin on the default root would only widen
+    // the document viewport, not the ScrollArea that clips the sentinel.
+    const [viewport, setViewport] = useState(null);
+    useEffect(() => {
+        if (!sentinel || !hasMore || typeof IntersectionObserver === 'undefined')
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                showMore();
+        }, { root: viewport, rootMargin: '200px' });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [sentinel, viewport, hasMore, showMore]);
     const handleDrop = async (files) => {
         const file = files[0];
         if (!file)
             return;
+        setActionError(null);
         const asset = await upload.upload(file);
-        if (asset) {
-            setAssets((prev) => [asset, ...prev]);
-        }
+        if (!asset)
+            return;
+        library.prepend(asset);
+        setPinned((prev) => [asset.hash32, ...prev.filter((hash) => hash !== asset.hash32)]);
+        // The upload must be visible: a search or kind filter that would hide it is cleared.
+        setFilterText((prev) => (matchesText(asset, prev.trim().toLowerCase()) ? prev : ''));
+        setKind((prev) => (matchesKind(asset, prev) ? prev : 'all'));
     };
     const handleReject = (rejections) => {
-        setListError(rejections[0]?.errors[0]?.message ?? 'File rejected');
+        setActionError(rejections[0]?.errors[0]?.message ?? 'The file was rejected.');
     };
     const handleDelete = async (asset) => {
-        const result = await client.assets.delete({ key: asset.hash32 });
-        if (!result.ok) {
-            setListError(result.error || 'Failed to delete asset');
-            return;
+        setActionError(null);
+        const failure = (detail) => `Couldn't remove ${asset.filename} from the library. ${detail}`;
+        // The raw server message is a diagnostic, shown to admins only.
+        const generic = (serverMessage) => failure((isAdmin(userContext?.groups) && serverMessage) || 'Try again.');
+        try {
+            const result = await client.assets.delete({ key: asset.hash32 });
+            if (!result.ok) {
+                // An editor sees this button only for their own upload, and the endpoint answers a
+                // missing file with the same 403 as someone else's, so their 403 means it is gone.
+                const alreadyGone = result.status === 403 && !isNonApiResponse(result) && !isAdmin(userContext?.groups);
+                setActionError(alreadyGone ? failure('It may have been removed already.') : generic(result.error));
+                return;
+            }
+            library.remove(asset.hash32);
+            setActionNotice((prev) => ({
+                id: (prev?.id ?? 0) + 1,
+                text: `Removed ${asset.filename} from library`,
+            }));
+            focusAfterRemove.current = true;
+        }
+        catch (err) {
+            setActionError(generic(getErrorMessage(err)));
         }
-        setAssets((prev) => prev.filter((a) => a.hash32 !== asset.hash32));
     };
     const handleDeleteClick = (asset) => {
-        modals.openConfirmModal({
+        openConfirm({
             title: 'Remove from library',
-            children: (_jsxs(Text, { size: "sm", children: ["Remove \u201C", asset.filename, "\u201D from the media library? Existing content that already references this file keeps working - removing it here only hides it from the library; the file itself is not deleted."] })),
-            labels: { confirm: 'Remove', cancel: 'Cancel' },
+            children: (_jsxs(Text, { size: "sm", children: ["Remove \u201C", asset.filename, "\u201D from the media library? Content that already uses this file keeps working, and the file itself is not deleted."] })),
+            labels: { confirm: 'Remove from library', cancel: 'Cancel' },
             confirmProps: { color: 'red' },
             onConfirm: () => {
                 void handleDelete(asset);
             },
         });
     };
-    // Picker mode is image-only (see `imageOnly` above) - pdf assets are
-    // filtered out of the pickable grid entirely, not just the upload accept
-    // list, since an already-uploaded pdf could otherwise still be selected.
-    const kindFiltered = imageOnly ? assets.filter((asset) => asset.kind !== 'pdf') : assets;
-    const normalizedFilter = filterText.trim().toLowerCase();
-    const filteredAssets = normalizedFilter
-        ? kindFiltered.filter((asset) => asset.filename.toLowerCase().includes(normalizedFilter))
-        : kindFiltered;
-    return (_jsxs(Stack, { gap: "sm", h: "100%", style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Dropzone, { onDrop: (files) => void handleDrop(files), onReject: handleReject, maxSize: MAX_UPLOAD_BYTES, accept: imageOnly ? ACCEPTED_IMAGE_MIME_TYPES : ACCEPTED_ASSET_MIME_TYPES, loading: upload.uploading, multiple: false, "data-testid": "media-library-dropzone", children: _jsxs(Group, { justify: "center", gap: "xs", py: "sm", style: { pointerEvents: 'none' }, children: [_jsx(IconUpload, { size: 20 }), _jsx(Text, { size: "sm", children: imageOnly
+    // `text` is shown; `announce` is the live-region wording, which changes only between phases so
+    // a screen reader is not told every page's count.
+    const loadStatus = (() => {
+        if (library.error || !library.firstPageLoaded)
+            return null;
+        if (!library.complete) {
+            return needle
+                ? {
+                    text: `Searching ${fileCountLabel(kindAssets.length)} loaded so far…`,
+                    announce: 'Searching the files loaded so far…',
+                }
+                : {
+                    text: `Loaded ${fileCountLabel(kindAssets.length)}, loading more…`,
+                    announce: 'Loading more files…',
+                };
+        }
+        // With no match, the empty state below says so.
+        if (needle && matchedAssets.length > 0) {
+            const total = kindAssets.length;
+            const text = `${matchedAssets.length} of ${total} ${total === 1 ? 'file matches' : 'files match'}`;
+            return { text, announce: text };
+        }
+        return null;
+    })();
+    const kindNoun = effectiveKind === 'pdfs' ? 'PDFs' : effectiveKind === 'images' ? 'images' : 'files';
+    const libraryEmpty = library.complete && scopedAssets.length === 0;
+    const emptyState = (() => {
+        if (matchedAssets.length > 0)
+            return null;
+        // A later page failed: say what the loaded part holds; the alert explains the rest.
+        if (library.error && !library.complete) {
+            if (!library.firstPageLoaded || kindAssets.length === 0)
+                return null;
+            return needle
+                ? `No ${kindNoun} match “${filterText.trim()}” among the ${fileCountLabel(kindAssets.length)} loaded.`
+                : null;
+        }
+        if (!library.complete)
+            return null;
+        if (libraryEmpty) {
+            return imageOnly
+                ? 'No images yet. Drop an image above, or click there to choose one.'
+                : 'No files yet. Drop a file above, or click there to choose one.';
+        }
+        if (needle)
+            return `No ${kindNoun} match “${filterText.trim()}”.`;
+        return `No ${kindNoun} in the library.`;
+    })();
+    const renderList = () => {
+        if (density === 'list') {
+            return (_jsx(Stack, { gap: 4, children: visibleAssets.map((asset) => (_jsx(AssetListRow, { asset: asset, baseUrl: baseUrl, onSelect: mode === 'picker' ? onSelect : undefined, onDelete: canDeleteAsset(asset) ? () => handleDeleteClick(asset) : undefined }, asset.hash32))) }));
+        }
+        return (_jsx(SimpleGrid, { cols: GRID_COLUMNS[density], spacing: "sm", children: visibleAssets.map((asset) => (_jsx(AssetCard, { asset: asset, baseUrl: baseUrl, density: density, onSelect: mode === 'picker' ? onSelect : undefined, onDelete: canDeleteAsset(asset) ? () => handleDeleteClick(asset) : undefined }, asset.hash32))) }));
+    };
+    const listContent = (_jsxs(_Fragment, { children: [!library.firstPageLoaded && !library.error && visibleAssets.length === 0 && (_jsx(MediaLibrarySkeleton, { density: density })), visibleAssets.length > 0 && renderList(), emptyState && (_jsxs(Stack, { align: "center", gap: "xs", py: "xl", "data-testid": "media-library-empty", children: [_jsx(Text, { size: "sm", c: "dimmed", ta: "center", children: emptyState }), _jsxs(Group, { gap: "xs", justify: "center", children: [needle && (_jsx(Button, { variant: "light", size: "xs", onClick: clearSearch, children: "Clear search" })), kind !== 'all' && !libraryEmpty && (_jsx(Button, { variant: "light", size: "xs", onClick: () => setKind('all'), children: "Show all files" }))] })] })), hasMore && (_jsxs(_Fragment, { children: [_jsx("div", { ref: setSentinel, "aria-hidden": "true", style: { height: 1 } }), _jsx(Group, { justify: "center", py: "sm", children: _jsx(Button, { variant: "light", onClick: showMore, "data-testid": "media-library-show-more", children: "Show more" }) })] }))] }));
+    return (
+    // `h="100%"` bounds it in a fixed-height host (the MDX image dialog's library tab); `flex`
+    // bounds it in the drawer's flex body.
+    _jsxs(Stack, { gap: "sm", h: "100%", style: { flex: 1, minHeight: 0 }, children: [_jsx(Dropzone, { onDrop: (files) => void handleDrop(files), onReject: handleReject, maxSize: MAX_UPLOAD_BYTES, accept: imageOnly ? ACCEPTED_IMAGE_MIME_TYPES : ACCEPTED_ASSET_MIME_TYPES, loading: upload.uploading, multiple: false, "data-testid": "media-library-dropzone", children: _jsxs(Group, { justify: "center", gap: "xs", py: "sm", style: { pointerEvents: 'none' }, children: [_jsx(IconUpload, { size: 20 }), _jsx(Text, { size: "sm", children: imageOnly
                                 ? 'Drop an image here, or click to browse'
                                 : 'Drop an image or PDF here, or click to browse' })] }) }), upload.uploading &&
-                (upload.progress !== null ? (_jsx(Progress, { value: upload.progress * 100, size: "sm", "data-testid": "upload-progress" })) : (_jsx(Progress, { value: 100, size: "sm", animated: true, "data-testid": "upload-progress-indeterminate" }))), upload.error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", "data-testid": "upload-error", children: upload.error })), _jsx(TextInput, { placeholder: "Filter by filename...", value: filterText, onChange: (event) => setFilterText(event.currentTarget.value), "data-testid": "media-library-filter" }), listError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", "data-testid": "media-library-error", children: _jsxs(Stack, { gap: 4, children: [_jsx(Text, { size: "sm", children: listError }), _jsx(Button, { size: "xs", variant: "light", onClick: () => void loadFirstPage(), children: "Retry" })] }) })), _jsxs(ScrollArea, { style: { flex: 1 }, children: [loading ? (_jsx(Group, { justify: "center", py: "xl", children: _jsx(Loader, { size: "sm", "data-testid": "media-library-loading" }) })) : filteredAssets.length === 0 ? (_jsx(Text, { size: "sm", c: "dimmed", py: "xl", ta: "center", children: "No assets found." })) : (_jsx(SimpleGrid, { cols: { base: 2, sm: 3, md: 4 }, spacing: "sm", children: filteredAssets.map((asset) => (_jsx(AssetCard, { asset: asset, baseUrl: baseUrl, onSelect: mode === 'picker' ? onSelect : undefined, onDelete: canDeleteAsset(asset) ? () => handleDeleteClick(asset) : undefined }, asset.hash32))) })), !loading && nextCursor && (_jsx(Group, { justify: "center", py: "sm", children: _jsx(Button, { variant: "light", size: "xs", loading: loadingMore, onClick: () => void handleLoadMore(), "data-testid": "media-library-load-more", children: "Load more" }) }))] })] }));
+                (upload.progress !== null ? (_jsx(Progress, { value: upload.progress * 100, size: "sm", "data-testid": "upload-progress" })) : (_jsx(Progress, { value: 100, size: "sm", animated: true, "data-testid": "upload-progress-indeterminate" }))), upload.error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", "data-testid": "upload-error", children: upload.error })), _jsx(TextInput, { placeholder: "Search by filename", "aria-label": "Search by filename", leftSection: _jsx(IconSearch, { size: 16 }), rightSection: filterText ? (_jsx(Tooltip, { label: "Clear search", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", "aria-label": "Clear search", onClick: clearSearch, children: _jsx(IconX, { size: 14 }) }) })) : null, ref: searchRef, value: filterText, onChange: (event) => setFilterText(event.currentTarget.value), "data-mantine-stop-propagation": filterText ? 'true' : undefined, onKeyDown: (event) => {
+                    if (event.key === 'Escape' && filterText)
+                        setFilterText('');
+                }, "data-testid": "media-library-filter" }), _jsxs(Group, { justify: "space-between", wrap: "wrap", gap: "xs", children: [imageOnly ? (_jsx("span", {})) : (_jsx(SegmentedControl, { "aria-label": "File type", data: KIND_OPTIONS, value: kind, onChange: (value) => setKind(KIND_OPTIONS.find((o) => o.value === value)?.value ?? 'all'), "data-testid": "media-library-kind" })), _jsxs(Group, { gap: "xs", wrap: "wrap", children: [_jsx(Select, { "aria-label": "Sort by", data: SORT_OPTIONS, value: sort, onChange: (value) => {
+                                    const next = SORT_OPTIONS.find((option) => option.value === value);
+                                    if (next)
+                                        setSort(next.value);
+                                }, allowDeselect: false, w: 150, "data-testid": "media-library-sort" }), _jsx(SegmentedControl, { "aria-label": "Layout", data: DENSITY_OPTIONS, value: density, onChange: (value) => {
+                                    const next = DENSITY_OPTIONS.find((option) => option.value === value);
+                                    if (next)
+                                        setDensity(next.value);
+                                }, "data-testid": "media-library-density" })] })] }), _jsx(Text, { component: "div", size: "xs", c: "dimmed", mih: 18, children: loadStatus && (_jsx("span", { "aria-hidden": "true", "data-testid": "media-library-load-status", children: loadStatus.text })) }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: loadStatus?.announce ?? '' }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", "data-testid": "media-library-action-notice", children: actionNotice && _jsx("span", { children: actionNotice.text }, actionNotice.id) }), library.error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", "data-testid": "media-library-error", children: _jsxs(Stack, { gap: 4, children: [_jsx(Text, { size: "sm", children: library.error.firstPage
+                                ? "Couldn't load the media library."
+                                : `Couldn't load the rest of the media library. Showing the ${fileCountLabel(scopedAssets.length)} loaded so far.` }), isAdmin(userContext?.groups) && (_jsx(Text, { size: "xs", c: "dimmed", children: library.error.message })), _jsx(Button, { variant: "light", onClick: library.retry, children: "Retry" })] }) })), actionError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", withCloseButton: true, closeButtonLabel: "Dismiss", onClose: () => setActionError(null), "data-testid": "media-library-action-error", children: actionError })), imageOnly ? (_jsx(ScrollArea.Autosize, { mah: "60vh", viewportRef: setViewport, children: listContent })) : (_jsx(ScrollArea, { style: { flex: 1, minHeight: 200 }, viewportRef: setViewport, children: listContent }))] }));
 };

package/dist/editor/media/MediaLibrarySkeleton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type MediaDensity } from './media-library-view.js';
+/** Placeholder shaped like the layout it stands in for, so nothing shifts when assets arrive. */
+export declare const MediaLibrarySkeleton: React.FC<{
+    density: MediaDensity;
+}>;

package/dist/editor/media/MediaLibrarySkeleton.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, SimpleGrid, Skeleton, Stack } from '@mantine/core';
+import { CARD_THUMBNAIL_HEIGHT, GRID_COLUMNS } from './media-library-view.js';
+const SKELETON_COUNT = 8;
+/** Placeholder shaped like the layout it stands in for, so nothing shifts when assets arrive. */
+export const MediaLibrarySkeleton = ({ density }) => {
+    const items = Array.from({ length: SKELETON_COUNT }, (_, index) => index);
+    if (density === 'list') {
+        return (_jsx(Stack, { gap: 4, "data-testid": "media-library-loading", "aria-busy": "true", children: items.map((index) => (_jsx(Skeleton, { height: 54, radius: "md" }, index))) }));
+    }
+    const thumbnailHeight = CARD_THUMBNAIL_HEIGHT[density];
+    return (_jsx(SimpleGrid, { cols: GRID_COLUMNS[density], spacing: "sm", "data-testid": "media-library-loading", "aria-busy": "true", children: items.map((index) => (_jsxs(Card, { withBorder: true, radius: "md", padding: "xs", children: [_jsx(Card.Section, { children: _jsx(Skeleton, { height: thumbnailHeight, radius: 0 }) }), _jsx(Skeleton, { height: 12, width: "70%", mt: 8 }), density === 'grid' && _jsx(Skeleton, { height: 10, width: "40%", mt: 6 })] }, index))) }));
+};

package/dist/editor/media/crop-math.d.ts

@@ -16,10 +16,9 @@ export interface CropAreaPercent {
 }
 /**
  * Convert react-easy-crop's `onCropComplete(croppedArea, croppedAreaPixels)`
- * percentage area into a normalized `CropRect`, rounded to 4 decimals and
- * clamped to fit within bounds. Rounding can push `x+w`/`y+h` a hair over 1
- * (e.g. x=0.6667, w=0.3334 -> 1.0001) - shrink the extent to the remaining
- * space rather than reject a rect that was valid before rounding.
+ * percentage area into a normalized `CropRect`, clamped to [0,1] and then
+ * rounded by `roundCropRect` — the same rounding the transform URL's canonical
+ * form applies, so the stored crop is already canonical.
  *
  * Returns `null` if the input can't be coerced into a valid rect (e.g. a
  * zero-area selection).

package/dist/editor/media/crop-math.js

@@ -6,13 +6,7 @@
  * (no react-easy-crop import) so it's trivially unit-testable and reusable
  * without pulling in the cropper UI library.
  */
-import { isValidCropRect } from '../../assets/transform-directives.js';
-/** Matches transform-directives.ts's CROP_PRECISION so a crop rect round-trips through the URL directive unchanged. */
-const CROP_PRECISION = 4;
-function roundTo(value, decimals) {
-    const factor = 10 ** decimals;
-    return Math.round(value * factor) / factor;
-}
+import { isValidCropRect, roundCropRect } from '../../assets/transform-directives.js';
 function clamp01(value) {
     if (!Number.isFinite(value))
         return 0;
@@ -20,26 +14,21 @@ function clamp01(value) {
 }
 /**
  * Convert react-easy-crop's `onCropComplete(croppedArea, croppedAreaPixels)`
- * percentage area into a normalized `CropRect`, rounded to 4 decimals and
- * clamped to fit within bounds. Rounding can push `x+w`/`y+h` a hair over 1
- * (e.g. x=0.6667, w=0.3334 -> 1.0001) - shrink the extent to the remaining
- * space rather than reject a rect that was valid before rounding.
+ * percentage area into a normalized `CropRect`, clamped to [0,1] and then
+ * rounded by `roundCropRect` — the same rounding the transform URL's canonical
+ * form applies, so the stored crop is already canonical.
  *
  * Returns `null` if the input can't be coerced into a valid rect (e.g. a
  * zero-area selection).
  */
 export function cropAreaPercentToRect(area) {
-    const x = roundTo(clamp01(area.x / 100), CROP_PRECISION);
-    const y = roundTo(clamp01(area.y / 100), CROP_PRECISION);
-    let w = roundTo(clamp01(area.width / 100), CROP_PRECISION);
-    let h = roundTo(clamp01(area.height / 100), CROP_PRECISION);
-    if (x + w > 1)
-        w = roundTo(1 - x, CROP_PRECISION);
-    if (y + h > 1)
-        h = roundTo(1 - y, CROP_PRECISION);
-    if (!isValidCropRect(x, y, w, h))
-        return null;
-    return { x, y, w, h };
+    const rect = roundCropRect({
+        x: clamp01(area.x / 100),
+        y: clamp01(area.y / 100),
+        w: clamp01(area.width / 100),
+        h: clamp01(area.height / 100),
+    });
+    return isValidCropRect(rect.x, rect.y, rect.w, rect.h) ? rect : null;
 }
 /**
  * Inverse of `cropAreaPercentToRect` - seeds react-easy-crop's

package/dist/editor/media/editor-image-src.d.ts

@@ -0,0 +1,8 @@
+import { type AssetUrlOptions } from '../../assets/asset-url.js';
+/**
+ * The URL the editor displays a content image at. An asset-store src goes behind `baseUrl` (the
+ * authenticated raw route, see `AssetContext`) with `opts` applied. Any other src keeps its own
+ * path, since the raw route serves only the asset store; `assetUrl` still neutralizes a spelling a
+ * browser would read as off-origin.
+ */
+export declare function editorImageSrc(src: string, baseUrl: string, opts?: Omit<AssetUrlOptions, 'baseUrl'>): string;

package/dist/editor/media/editor-image-src.js

@@ -0,0 +1,10 @@
+import { assetUrl, isAssetStoreSrc } from '../../assets/asset-url.js';
+/**
+ * The URL the editor displays a content image at. An asset-store src goes behind `baseUrl` (the
+ * authenticated raw route, see `AssetContext`) with `opts` applied. Any other src keeps its own
+ * path, since the raw route serves only the asset store; `assetUrl` still neutralizes a spelling a
+ * browser would read as off-origin.
+ */
+export function editorImageSrc(src, baseUrl, opts = {}) {
+    return isAssetStoreSrc(src) ? assetUrl({ src }, { ...opts, baseUrl }) : assetUrl({ src });
+}

package/dist/editor/media/format-bytes.d.ts

@@ -0,0 +1,2 @@
+/** "512 B", "2.3 MB", "14 KB": 1024 base, one decimal below 10, whole numbers above. */
+export declare function formatBytes(bytes: number): string;

package/dist/editor/media/format-bytes.js

@@ -0,0 +1,23 @@
+const UNITS = ['B', 'KB', 'MB', 'GB'];
+/** "512 B", "2.3 MB", "14 KB": 1024 base, one decimal below 10, whole numbers above. */
+export function formatBytes(bytes) {
+    if (!Number.isFinite(bytes) || bytes <= 0)
+        return '0 B';
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < UNITS.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    // 1023.6 KB rounds to "1024 KB"; promote it to 1.0 MB instead.
+    if (unit > 0 && unit < UNITS.length - 1 && Math.round(value) >= 1024) {
+        value /= 1024;
+        unit += 1;
+    }
+    if (unit === 0)
+        return `${Math.round(value)} B`;
+    const oneDecimal = Math.round(value * 10) / 10;
+    if (oneDecimal < 10)
+        return `${oneDecimal.toFixed(1)} ${UNITS[unit]}`;
+    return `${Math.round(value)} ${UNITS[unit]}`;
+}

package/dist/editor/media/media-library-prefs.d.ts

@@ -0,0 +1,23 @@
+import { type MediaDensity, type MediaSort } from './media-library-view.js';
+/** The preferences that persist per viewer; the kind filter and search text do not. */
+interface MediaLibraryPrefs {
+    sort: MediaSort;
+    density: MediaDensity;
+}
+/** @internal Exported for tests and stories. */
+export declare const MEDIA_LIBRARY_PREFS_KEY = "canopycms:media-library:prefs";
+/**
+ * @internal Exported for tests. Validates each field on its own, so a bad one takes its default and the other is kept. Mantine
+ * does not guard `deserialize`, so this never throws, whatever is under the key.
+ */
+export declare function parseMediaLibraryPrefs(raw: string | undefined): MediaLibraryPrefs;
+export interface UseMediaLibraryPrefsReturn extends MediaLibraryPrefs {
+    setSort: (sort: MediaSort) => void;
+    setDensity: (density: MediaDensity) => void;
+}
+/**
+ * Sort and density, read from localStorage after mount (SSR renders the defaults). A storage that
+ * throws leaves them in memory for the session.
+ */
+export declare function useMediaLibraryPrefs(): UseMediaLibraryPrefsReturn;
+export {};

package/dist/editor/media/media-library-prefs.js

@@ -0,0 +1,49 @@
+'use client';
+import { useLocalStorage } from '@mantine/hooks';
+import { isPlainRecord } from '../../validation/field-traversal.js';
+import { MEDIA_DENSITIES, MEDIA_SORTS, } from './media-library-view.js';
+/** @internal Exported for tests and stories. */
+export const MEDIA_LIBRARY_PREFS_KEY = 'canopycms:media-library:prefs';
+/** Module-level so its identity is stable: Mantine memoises its storage reader on the default. */
+const DEFAULT_PREFS = { sort: 'newest', density: 'grid' };
+const oneOf = (options, value, fallback) => options.find((option) => option === value) ?? fallback;
+/**
+ * @internal Exported for tests. Validates each field on its own, so a bad one takes its default and the other is kept. Mantine
+ * does not guard `deserialize`, so this never throws, whatever is under the key.
+ */
+export function parseMediaLibraryPrefs(raw) {
+    if (!raw)
+        return DEFAULT_PREFS;
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch {
+        return DEFAULT_PREFS;
+    }
+    if (!isPlainRecord(parsed))
+        return DEFAULT_PREFS;
+    return {
+        sort: oneOf(MEDIA_SORTS, parsed.sort, DEFAULT_PREFS.sort),
+        density: oneOf(MEDIA_DENSITIES, parsed.density, DEFAULT_PREFS.density),
+    };
+}
+/**
+ * Sort and density, read from localStorage after mount (SSR renders the defaults). A storage that
+ * throws leaves them in memory for the session.
+ */
+export function useMediaLibraryPrefs() {
+    const [prefs, setPrefs] = useLocalStorage({
+        key: MEDIA_LIBRARY_PREFS_KEY,
+        defaultValue: DEFAULT_PREFS,
+        deserialize: parseMediaLibraryPrefs,
+        // Each tab keeps its own choice; a change elsewhere reaches only tabs opened later.
+        sync: false,
+    });
+    return {
+        sort: prefs.sort,
+        density: prefs.density,
+        setSort: (sort) => setPrefs((prev) => ({ ...prev, sort })),
+        setDensity: (density) => setPrefs((prev) => ({ ...prev, density })),
+    };
+}

package/dist/editor/media/media-library-view.d.ts

@@ -0,0 +1,34 @@
+import type { AssetRecord } from '../../api/index.js';
+export type MediaSort = 'newest' | 'name';
+export type MediaDensity = 'grid' | 'compact' | 'list';
+export type MediaKind = 'all' | 'images' | 'pdfs';
+export declare const MEDIA_SORTS: readonly MediaSort[];
+export declare const MEDIA_DENSITIES: readonly MediaDensity[];
+/**
+ * Orders every loaded asset. The list API pages in storage order, so the order is only
+ * meaningful here, across everything loaded.
+ */
+export declare function sortAssets(assets: readonly AssetRecord[], sort: MediaSort): AssetRecord[];
+export declare function matchesKind(asset: AssetRecord, kind: MediaKind): boolean;
+/** `needle` is already trimmed and lower-cased; an empty needle matches everything. */
+export declare function matchesText(asset: AssetRecord, needle: string): boolean;
+/** "1 file", "2 files". */
+export declare const fileCountLabel: (count: number) => string;
+/** Grid columns per layout; the loading skeleton uses the same ones so nothing shifts. */
+export declare const GRID_COLUMNS: {
+    readonly grid: {
+        readonly base: 2;
+        readonly sm: 3;
+        readonly md: 4;
+    };
+    readonly compact: {
+        readonly base: 3;
+        readonly sm: 5;
+        readonly md: 6;
+    };
+};
+/** Card thumbnail heights in px, shared with the skeleton that stands in for them. */
+export declare const CARD_THUMBNAIL_HEIGHT: {
+    readonly grid: 100;
+    readonly compact: 64;
+};

package/dist/editor/media/media-library-view.js

@@ -0,0 +1,40 @@
+export const MEDIA_SORTS = ['newest', 'name'];
+export const MEDIA_DENSITIES = ['grid', 'compact', 'list'];
+const uploadedAtMs = (asset) => {
+    const ms = Date.parse(asset.uploadedAt);
+    return Number.isNaN(ms) ? 0 : ms;
+};
+const byNewest = (a, b) => uploadedAtMs(b) - uploadedAtMs(a);
+const byFilename = (a, b) => a.filename.localeCompare(b.filename, undefined, { sensitivity: 'base', numeric: true });
+/**
+ * Orders every loaded asset. The list API pages in storage order, so the order is only
+ * meaningful here, across everything loaded.
+ */
+export function sortAssets(assets, sort) {
+    const compare = sort === 'name'
+        ? (a, b) => byFilename(a, b) || byNewest(a, b)
+        : (a, b) => byNewest(a, b) || byFilename(a, b);
+    return [...assets].sort(compare);
+}
+export function matchesKind(asset, kind) {
+    if (kind === 'pdfs')
+        return asset.kind === 'pdf';
+    if (kind === 'images')
+        return asset.kind !== 'pdf';
+    return true;
+}
+/** `needle` is already trimmed and lower-cased; an empty needle matches everything. */
+export function matchesText(asset, needle) {
+    if (!needle)
+        return true;
+    return asset.filename.toLowerCase().includes(needle) || asset.slug.toLowerCase().includes(needle);
+}
+/** "1 file", "2 files". */
+export const fileCountLabel = (count) => `${count} ${count === 1 ? 'file' : 'files'}`;
+/** Grid columns per layout; the loading skeleton uses the same ones so nothing shifts. */
+export const GRID_COLUMNS = {
+    grid: { base: 2, sm: 3, md: 4 },
+    compact: { base: 3, sm: 5, md: 6 },
+};
+/** Card thumbnail heights in px, shared with the skeleton that stands in for them. */
+export const CARD_THUMBNAIL_HEIGHT = { grid: 100, compact: 64 };