canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/hooks/useUserMetadata.js

@@ -1,51 +1,80 @@
-import { useEffect, useState } from 'react';
+import { useCallback } from 'react';
+import useSWR, { useSWRConfig } from 'swr';
+import { isSystemUserId } from '../../system-users.js';
+import { SYSTEM_USER_LABEL } from '../user-display.js';
+const ANONYMOUS_USER = { id: 'anonymous', name: 'Anonymous', email: 'public' };
+/** A bot has no directory entry to look up; it is answered here, by name. */
+const systemUser = (userId) => ({
+    id: userId,
+    name: SYSTEM_USER_LABEL,
+    email: '',
+});
+const userMetadataKey = (userId) => `canopy:user:${userId}`;
+const isUserRecord = (value) => typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    typeof value.id === 'string' &&
+    'name' in value &&
+    typeof value.name === 'string';
+const cachedRecord = (cache, key) => {
+    const data = cache.get(key)?.data;
+    return isUserRecord(data) ? data : null;
+};
 /**
- * Fetches user metadata using the provided getter function.
- *
- * @param cachedUser - Optional: if provided, returns immediately without fetching
+ * Caches profiles a response carried, keeping a cached record's email. A profile matching the
+ * cached record is not written: any write makes SWR discard a lookup in flight, email included. A
+ * user with no record, or whose written record still has no email, is refetched once the writes
+ * settle, since the seed may have discarded a lookup; that refetch is detached, so the caller
+ * never waits on the directory.
  */
-export function useUserMetadata(userId, getUserMetadata, cachedUser) {
-    const [userMetadata, setUserMetadata] = useState(cachedUser || null);
-    const [isLoading, setIsLoading] = useState(!cachedUser);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        if (cachedUser)
-            return;
-        // Special case: anonymous user
-        if (userId === 'anonymous') {
-            setUserMetadata({
-                id: 'anonymous',
-                name: 'Anonymous',
-                email: 'public',
-            });
-            setIsLoading(false);
+export async function seedUserProfiles(swr, users) {
+    const { cache, mutate } = swr;
+    const emailless = new Set();
+    await Promise.all(users.map(async (user) => {
+        const key = userMetadataKey(user.id);
+        const record = cachedRecord(cache, key);
+        if (record && record.name === user.name && record.avatarUrl === user.avatarUrl)
             return;
-        }
-        let cancelled = false;
-        const fetchUser = async () => {
-            setIsLoading(true);
-            try {
-                const result = await getUserMetadata(userId);
-                if (!cancelled) {
-                    setUserMetadata(result);
-                    setError(null);
-                }
-            }
-            catch (err) {
-                if (!cancelled) {
-                    setError(err instanceof Error ? err : new Error('Failed to fetch user'));
-                }
-            }
-            finally {
-                if (!cancelled) {
-                    setIsLoading(false);
-                }
-            }
-        };
-        fetchUser();
-        return () => {
-            cancelled = true;
-        };
-    }, [userId, getUserMetadata, cachedUser]);
-    return { userMetadata, isLoading, error };
+        const merged = { email: '', ...record, ...user };
+        if (!record || !merged.email)
+            emailless.add(key);
+        await mutate(key, merged, { revalidate: false });
+    }));
+    for (const key of emailless)
+        void mutate(key);
+}
+/** Answers from the cache with no request and no email, for a reader who may not look users up. */
+export function useSeededUserResolver() {
+    const { cache } = useSWRConfig();
+    return useCallback((userId) => {
+        const record = cachedRecord(cache, userMetadataKey(userId));
+        return Promise.resolve(record ? { ...record, email: '' } : null);
+    }, [cache]);
+}
+/** One user's metadata under a per-user SWR key, so every badge for that user shares a fetch. */
+export function useUserMetadata(userId, getUserMetadata, cachedUser) {
+    const skip = cachedUser !== undefined || userId === 'anonymous' || isSystemUserId(userId);
+    const { cache } = useSWRConfig();
+    const key = userMetadataKey(userId);
+    const { data, error, isLoading } = useSWR(skip ? null : key, 
+    // A lookup that answers null keeps the record already cached, such as a seeded name.
+    async () => (await getUserMetadata(userId)) ?? cachedRecord(cache, key));
+    if (cachedUser)
+        return { userMetadata: cachedUser, isLoading: false, error: null };
+    if (userId === 'anonymous')
+        return { userMetadata: ANONYMOUS_USER, isLoading: false, error: null };
+    if (isSystemUserId(userId)) {
+        return { userMetadata: systemUser(userId), isLoading: false, error: null };
+    }
+    return {
+        userMetadata: data ?? null,
+        // A seed can land while the lookup is in flight; SWR still reports that lookup as loading.
+        isLoading: isLoading && data === undefined,
+        // A record to show outranks a failed lookup, so a seeded name survives it.
+        error: error === undefined || data
+            ? null
+            : error instanceof Error
+                ? error
+                : new Error('Failed to fetch user'),
+    };
 }

package/dist/editor/hooks/user-metadata-batcher.d.ts

@@ -0,0 +1,8 @@
+import type { ApiClient } from '../context/index.js';
+import type { UserSearchResult } from '../../auth/types.js';
+/**
+ * Sends the ids asked for within one window as one `POST /users/batch`, split at the cap. Pass
+ * it to useUserMetadata, whose per-user SWR key is the cache. A failed request rejects every id
+ * in it, so SWR keeps the last good record; an id a successful response omits resolves `null`.
+ */
+export declare function createUserMetadataBatcher(apiClient: ApiClient): (userId: string) => Promise<UserSearchResult | null>;

package/dist/editor/hooks/user-metadata-batcher.js

@@ -0,0 +1,33 @@
+import DataLoader from 'dataloader';
+import { MAX_USER_METADATA_BATCH } from '../../api/users-constants.js';
+/** Long enough to gather every badge one render mounts. */
+const BATCH_WINDOW_MS = 10;
+/**
+ * Sends the ids asked for within one window as one `POST /users/batch`, split at the cap. Pass
+ * it to useUserMetadata, whose per-user SWR key is the cache. A failed request rejects every id
+ * in it, so SWR keeps the last good record; an id a successful response omits resolves `null`.
+ */
+export function createUserMetadataBatcher(apiClient) {
+    const loader = new DataLoader(async (userIds) => {
+        let result;
+        try {
+            result = await apiClient.permissions.batchGetUserMetadata({ userIds: [...userIds] });
+        }
+        catch (err) {
+            console.error('Batch get user metadata failed:', err);
+            throw err;
+        }
+        if (!result.ok) {
+            const reason = result.error ?? `status ${result.status}`;
+            console.error('Batch get user metadata failed:', reason);
+            throw new Error(`Batch get user metadata failed: ${reason}`);
+        }
+        const byId = new Map((result.data?.users ?? []).map((u) => [u.id, u]));
+        return userIds.map((id) => byId.get(id) ?? null);
+    }, {
+        cache: false,
+        maxBatchSize: MAX_USER_METADATA_BATCH,
+        batchScheduleFn: (dispatch) => setTimeout(dispatch, BATCH_WINDOW_MS),
+    });
+    return (userId) => loader.load(userId);
+}

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

@@ -2,18 +2,17 @@ import React from 'react';
 import type { AssetRecord } from '../../api/index.js';
 export interface AssetCardProps {
     asset: AssetRecord;
-    /** `media.publicBaseUrl` - see AssetContext. */
+    /** `useAssetContext().baseUrl`, the authenticated raw route - see AssetContext. */
     baseUrl?: string;
     /** Present in picker mode - clicking the card selects the asset. */
     onSelect?: (asset: AssetRecord) => void;
-    /** Present only for admins in manage mode - renders the trash button. */
+    /** Present only where the viewer may remove the asset (manage mode) - renders the trash button. */
     onDelete?: (asset: AssetRecord) => void;
+    /** `compact` shrinks the thumbnail and drops the date line. */
+    density?: 'grid' | 'compact';
 }
 /**
- * One thumbnail card in the MediaLibrary grid. Raster and svg assets both go
- * through `assetUrl()` unmodified - for svg (a static, non-transform src)
- * `assetUrl` ignores the `width` option and just applies `baseUrl`, which is
- * exactly the behavior wanted here. PDFs have no image to preview, so they
- * render a file-type icon instead.
+ * One thumbnail card in the MediaLibrary grid. PDFs have no image to preview, so they render a
+ * file-type icon instead.
  */
 export declare const AssetCard: React.FC<AssetCardProps>;

package/dist/editor/media/AssetCard.js

@@ -1,30 +1,21 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ActionIcon, Card, Text, Tooltip } from '@mantine/core';
 import { IconFileTypePdf, IconPhotoOff, IconTrash } from '@tabler/icons-react';
-import { assetUrl } from '../../assets/asset-url.js';
+import { formatRelativeTime } from '../relative-time.js';
+import { editorImageSrc } from './editor-image-src.js';
+import { CARD_THUMBNAIL_HEIGHT } from './media-library-view.js';
+import { useThumbnailFailure } from './useThumbnailFailure.js';
 const THUMBNAIL_WIDTH = 160;
 /**
- * One thumbnail card in the MediaLibrary grid. Raster and svg assets both go
- * through `assetUrl()` unmodified - for svg (a static, non-transform src)
- * `assetUrl` ignores the `width` option and just applies `baseUrl`, which is
- * exactly the behavior wanted here. PDFs have no image to preview, so they
- * render a file-type icon instead.
+ * One thumbnail card in the MediaLibrary grid. PDFs have no image to preview, so they render a
+ * file-type icon instead.
  */
-export const AssetCard = ({ asset, baseUrl, onSelect, onDelete }) => {
-    const uploadedDate = new Date(asset.uploadedAt).toLocaleDateString();
-    const thumbnailSrc = assetUrl(asset, { width: THUMBNAIL_WIDTH, baseUrl });
-    const [thumbnailFailed, setThumbnailFailed] = useState(false);
-    // Reset the error state if the underlying asset/src changes, so a
-    // thumbnail that failed earlier gets another chance to load. Adjusting state
-    // during render (rather than in a useEffect) avoids an extra render pass -
-    // see https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    const [prevThumbnailSrc, setPrevThumbnailSrc] = useState(thumbnailSrc);
-    if (thumbnailSrc !== prevThumbnailSrc) {
-        setPrevThumbnailSrc(thumbnailSrc);
-        setThumbnailFailed(false);
-    }
+export const AssetCard = ({ asset, baseUrl, onSelect, onDelete, density = 'grid', }) => {
+    const compact = density === 'compact';
+    const thumbnailHeight = CARD_THUMBNAIL_HEIGHT[density];
+    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', { width: THUMBNAIL_WIDTH });
+    const [thumbnailFailed, markThumbnailFailed] = useThumbnailFailure(thumbnailSrc);
     const handleKeyDown = (event) => {
         if (!onSelect)
             return;
@@ -38,23 +29,25 @@ export const AssetCard = ({ asset, baseUrl, onSelect, onDelete }) => {
         // element, unreachable from the keyboard - role="button" + tabIndex
         // makes it focusable and announced correctly, and onKeyDown mirrors
         // native <button> Enter/Space activation.
-        role: onSelect ? 'button' : undefined, tabIndex: onSelect ? 0 : undefined, onKeyDown: onSelect ? handleKeyDown : undefined, children: [onDelete && (_jsx(ActionIcon, { variant: "filled", color: "red", size: "sm", radius: "xl", style: { position: 'absolute', top: 4, right: 4, zIndex: 1 }, "aria-label": `Delete ${asset.filename}`, "data-testid": `asset-card-delete-${asset.hash32}`, onClick: (event) => {
-                    event.stopPropagation();
-                    onDelete(asset);
-                }, children: _jsx(IconTrash, { size: 14 }) })), _jsx(Card.Section, { children: asset.kind === 'pdf' ? (_jsx("div", { style: {
-                        height: 100,
+        role: onSelect ? 'button' : undefined, tabIndex: onSelect ? 0 : undefined, onKeyDown: onSelect ? handleKeyDown : undefined, 
+        // Mantine draws its focus ring only on its own controls or this class; a bare Card gets none.
+        className: onSelect ? 'mantine-focus-auto' : undefined, "aria-label": onSelect ? `Select ${asset.filename}` : undefined, children: [onDelete && (_jsx(Tooltip, { label: "Remove from library", children: _jsx(ActionIcon, { variant: "default", c: "var(--canopy-danger-text)", radius: "xl", style: { position: 'absolute', top: 4, right: 4, zIndex: 1 }, "aria-label": `Remove ${asset.filename} from library`, "data-testid": `asset-card-delete-${asset.hash32}`, onClick: (event) => {
+                        event.stopPropagation();
+                        onDelete(asset);
+                    }, children: _jsx(IconTrash, { size: 14 }) }) })), _jsx(Card.Section, { children: asset.kind === 'pdf' ? (_jsx("div", { style: {
+                        height: thumbnailHeight,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        background: 'var(--mantine-color-gray-1)',
-                    }, children: _jsx(IconFileTypePdf, { size: 40, stroke: 1.5 }) })) : thumbnailFailed ? (_jsxs("div", { "data-testid": `asset-card-thumbnail-fallback-${asset.hash32}`, style: {
-                        height: 100,
+                        background: 'var(--canopy-surface-muted)',
+                    }, children: _jsx(IconFileTypePdf, { size: compact ? 28 : 40, stroke: 1.5 }) })) : thumbnailFailed ? (_jsxs("div", { "data-testid": `asset-card-thumbnail-fallback-${asset.hash32}`, style: {
+                        height: thumbnailHeight,
                         width: '100%',
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',
                         justifyContent: 'center',
                         gap: 4,
-                        background: 'var(--mantine-color-gray-1)',
-                    }, children: [_jsx(IconPhotoOff, { size: 28, stroke: 1.5, color: "var(--mantine-color-gray-5)" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Preview unavailable" })] })) : (_jsx("img", { src: thumbnailSrc, alt: asset.filename, style: { width: '100%', height: 100, objectFit: 'cover', display: 'block' }, onError: () => setThumbnailFailed(true) })) }), _jsx(Tooltip, { label: asset.filename, openDelay: 400, children: _jsx(Text, { size: "xs", fw: 500, truncate: true, mt: 4, children: asset.slug }) }), _jsx(Text, { size: "xs", c: "dimmed", children: uploadedDate })] }));
+                        background: 'var(--canopy-surface-muted)',
+                    }, children: [_jsx(IconPhotoOff, { size: compact ? 20 : 28, stroke: 1.5, color: "var(--mantine-color-dimmed)" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Preview unavailable" })] })) : (_jsx("img", { src: thumbnailSrc, alt: asset.filename, style: { width: '100%', height: thumbnailHeight, objectFit: 'cover', display: 'block' }, onError: markThumbnailFailed })) }), _jsx(Tooltip, { multiline: true, w: 260, openDelay: 400, label: _jsxs(_Fragment, { children: [_jsx("div", { style: { overflowWrap: 'anywhere' }, children: asset.filename }), _jsxs("div", { style: { overflowWrap: 'anywhere' }, children: ["Slug: ", asset.slug] })] }), children: _jsx(Text, { size: "xs", fw: 500, truncate: true, mt: 4, children: asset.filename }) }), !compact && (_jsx(Tooltip, { label: new Date(asset.uploadedAt).toLocaleString(), children: _jsx(Text, { size: "xs", c: "dimmed", w: "fit-content", children: formatRelativeTime(asset.uploadedAt) }) }))] }));
 };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { AssetRecord } from '../../api/index.js';
+export interface AssetListRowProps {
+    asset: AssetRecord;
+    /** `useAssetContext().baseUrl`, the authenticated raw route - see AssetContext. */
+    baseUrl?: string;
+    /**
+     * Present in picker mode - the whole row is then a button that selects the asset. A button
+     * cannot hold another, so a selectable row renders no remove control.
+     */
+    onSelect?: (asset: AssetRecord) => void;
+    /** Present only where the viewer may remove the asset - renders the trash button. */
+    onDelete?: (asset: AssetRecord) => void;
+}
+/** One asset as a row in the list layout: thumbnail, name, dimensions, size and upload date. */
+export declare const AssetListRow: React.FC<AssetListRowProps>;

package/dist/editor/media/AssetListRow.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ActionIcon, Group, Text, Tooltip, UnstyledButton } from '@mantine/core';
+import { IconFileTypePdf, IconPhotoOff, IconTrash } from '@tabler/icons-react';
+import { formatRelativeTime } from '../relative-time.js';
+import { editorImageSrc } from './editor-image-src.js';
+import { formatBytes } from './format-bytes.js';
+import { useThumbnailFailure } from './useThumbnailFailure.js';
+const THUMBNAIL_SIZE = 40;
+const THUMBNAIL_WIDTH = 80;
+const rowStyle = {
+    width: '100%',
+    padding: 6,
+    border: '1px solid var(--mantine-color-default-border)',
+    borderRadius: 'var(--mantine-radius-md)',
+};
+const thumbnailBoxStyle = {
+    width: THUMBNAIL_SIZE,
+    height: THUMBNAIL_SIZE,
+    flex: `0 0 ${THUMBNAIL_SIZE}px`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 'var(--mantine-radius-sm)',
+    background: 'var(--canopy-surface-muted)',
+    overflow: 'hidden',
+};
+/** One asset as a row in the list layout: thumbnail, name, dimensions, size and upload date. */
+export const AssetListRow = ({ asset, baseUrl, onSelect, onDelete, }) => {
+    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', { width: THUMBNAIL_WIDTH });
+    const [thumbnailFailed, markThumbnailFailed] = useThumbnailFailure(thumbnailSrc);
+    const hasDimensions = asset.width !== undefined && asset.height !== undefined;
+    const content = (_jsxs(Group, { gap: "sm", wrap: "nowrap", style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: thumbnailBoxStyle, children: asset.kind === 'pdf' ? (_jsx(IconFileTypePdf, { size: 24, stroke: 1.5, "aria-hidden": true })) : thumbnailFailed ? (_jsx(IconPhotoOff, { size: 20, stroke: 1.5, color: "var(--mantine-color-dimmed)", "data-testid": `asset-row-thumbnail-fallback-${asset.hash32}`, "aria-label": "Preview unavailable" })) : (
+                // Decorative: the filename beside it already names the row.
+                _jsx("img", { src: thumbnailSrc, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' }, onError: markThumbnailFailed })) }), _jsx(Tooltip, { multiline: true, w: 260, openDelay: 400, label: _jsxs(_Fragment, { children: [_jsx("div", { style: { overflowWrap: 'anywhere' }, children: asset.filename }), _jsxs("div", { style: { overflowWrap: 'anywhere' }, children: ["Slug: ", asset.slug] })] }), children: _jsx(Text, { size: "sm", fw: 500, truncate: true, style: { flex: 1, minWidth: 0 }, children: asset.filename }) }), _jsx(Text, { size: "xs", c: "dimmed", w: 84, ta: "right", visibleFrom: "sm", style: { flex: '0 0 auto' }, children: hasDimensions ? `${asset.width} × ${asset.height}` : '' }), _jsx(Text, { size: "xs", c: "dimmed", w: 52, ta: "right", visibleFrom: "sm", style: { flex: '0 0 auto' }, children: formatBytes(asset.size) }), _jsx(Tooltip, { label: new Date(asset.uploadedAt).toLocaleString(), children: _jsx(Text, { size: "xs", c: "dimmed", w: 72, ta: "right", style: { flex: '0 0 auto' }, children: formatRelativeTime(asset.uploadedAt) }) })] }));
+    const removeButton = onDelete && (_jsx(Tooltip, { label: "Remove from library", children: _jsx(ActionIcon, { variant: "subtle", color: "red", "aria-label": `Remove ${asset.filename} from library`, "data-testid": `asset-row-delete-${asset.hash32}`, onClick: () => onDelete(asset), children: _jsx(IconTrash, { size: 16 }) }) }));
+    if (onSelect) {
+        return (_jsx(UnstyledButton, { onClick: () => onSelect(asset), "data-testid": `asset-row-${asset.hash32}`, style: rowStyle, children: content }));
+    }
+    return (_jsxs(Group, { gap: "xs", wrap: "nowrap", "data-testid": `asset-row-${asset.hash32}`, style: rowStyle, children: [content, removeButton] }));
+};

package/dist/editor/media/CropStep.js

@@ -32,5 +32,10 @@ const CropStepBody = ({ imageSrc, aspect, initialCrop, onConfirm, onClose, }) =>
             onConfirm(rect);
     };
     const initialCroppedAreaPercentages = initialCrop ? cropRectToAreaPercent(initialCrop) : undefined;
-    return (_jsxs(Stack, { gap: "md", children: [_jsx("div", { style: { position: 'relative', width: '100%', height: 360, background: '#000' }, children: _jsx(Cropper, { image: imageSrc, crop: crop, zoom: zoom, aspect: aspect, initialCroppedAreaPercentages: initialCroppedAreaPercentages, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: (croppedArea) => setPendingArea(croppedArea) }) }), _jsxs(Group, { gap: "sm", align: "center", children: [_jsx(Text, { size: "sm", w: 50, children: "Zoom" }), _jsx(Slider, { style: { flex: 1 }, min: MIN_ZOOM, max: MAX_ZOOM, step: ZOOM_STEP, value: zoom, onChange: setZoom, label: (value) => `${value.toFixed(2)}x` })] }), _jsxs(Group, { justify: "flex-end", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { onClick: handleConfirm, disabled: !pendingArea, "data-testid": "crop-step-apply", children: "Apply crop" })] })] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsx("div", { style: {
+                    position: 'relative',
+                    width: '100%',
+                    height: 360,
+                    background: 'var(--mantine-color-black)',
+                }, children: _jsx(Cropper, { image: imageSrc, crop: crop, zoom: zoom, aspect: aspect, initialCroppedAreaPercentages: initialCroppedAreaPercentages, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: (croppedArea) => setPendingArea(croppedArea) }) }), _jsxs(Group, { gap: "sm", align: "center", children: [_jsx(Text, { size: "sm", w: 50, children: "Zoom" }), _jsx(Slider, { style: { flex: 1 }, min: MIN_ZOOM, max: MAX_ZOOM, step: ZOOM_STEP, value: zoom, onChange: setZoom, label: (value) => `${value.toFixed(2)}x` })] }), _jsxs(Group, { justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleConfirm, disabled: !pendingArea, "data-testid": "crop-step-apply", children: "Apply crop" })] })] }));
 };

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

@@ -4,17 +4,18 @@ export interface MediaLibraryProps {
     opened: boolean;
     onClose: () => void;
     /**
-     * 'manage': right-side Drawer opened from the EditorSidebar Settings menu.
+     * 'manage': right-side Drawer opened from the rail's Media button.
      * 'picker': Modal used by ImageField ("Browse library"/"Replace") and the
      * MDX image dialog's "From library" tab.
      */
     mode: 'manage' | 'picker';
     /** Required in picker mode - called with the chosen asset when a card is clicked. */
     onSelect?: (asset: AssetRecord) => void;
+    returnFocusTo?: () => HTMLElement | null;
 }
 /**
- * One component, two presentations, sharing the same grid/upload/filter/
- * pagination/delete core (MediaLibraryBody) - see
+ * One component, two presentations, sharing the same grid/list/upload/search/
+ * delete core (MediaLibraryBody) - see
  * .claude/future-tasks/resolved/assets-media-system.md "MediaManager design".
  */
 export declare const MediaLibrary: React.FC<MediaLibraryProps>;

package/dist/editor/media/MediaLibrary.js

@@ -2,14 +2,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer, Modal, Text, Title } from '@mantine/core';
 import { MediaLibraryBody } from './MediaLibraryBody.js';
+import { focusReturnProps } from '../utils/focus-return.js';
 /**
- * One component, two presentations, sharing the same grid/upload/filter/
- * pagination/delete core (MediaLibraryBody) - see
+ * One component, two presentations, sharing the same grid/list/upload/search/
+ * delete core (MediaLibraryBody) - see
  * .claude/future-tasks/resolved/assets-media-system.md "MediaManager design".
  */
-export const MediaLibrary = ({ opened, onClose, mode, onSelect }) => {
+export const MediaLibrary = ({ opened, onClose, mode, onSelect, returnFocusTo, }) => {
     if (mode === 'picker') {
         return (_jsx(Modal, { opened: opened, onClose: onClose, title: "Media library", size: "lg", overlayProps: { blur: 2 }, "data-testid": "media-library-picker", children: _jsx(MediaLibraryBody, { opened: opened, mode: "picker", onSelect: onSelect }) }));
     }
-    return (_jsx(Drawer, { opened: opened, onClose: onClose, position: "right", title: _jsxs("div", { children: [_jsx(Title, { order: 4, children: "Media library" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Upload and manage images and PDFs" })] }), padding: "md", size: 700, overlayProps: { blur: 2 }, "data-testid": "media-library-manage", children: _jsx(MediaLibraryBody, { opened: opened, mode: "manage" }) }));
+    return (_jsx(Drawer, { opened: opened, onClose: onClose, position: "right", title: _jsxs("div", { children: [_jsx(Title, { order: 4, children: "Media library" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Upload and manage images and PDFs" })] }), padding: "md", size: 700, 
+        // The body fills the drawer and the library's own ScrollArea scrolls, so the toolbar stays put
+        // and the list's IntersectionObserver sees a real clipping viewport.
+        styles: {
+            content: { display: 'flex', flexDirection: 'column' },
+            body: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' },
+        }, overlayProps: { blur: 2 }, "data-testid": "media-library-manage", ...focusReturnProps(returnFocusTo), children: _jsx(MediaLibraryBody, { opened: opened, mode: "manage" }) }));
 };

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { AssetRecord } from '../../api/index.js';
 export interface MediaLibraryBodyProps {
-    /** Whether the enclosing Drawer/Modal is open - gates the (re)fetch of the first page on each open. */
+    /** Whether the enclosing Drawer/Modal is open - the library (re)loads from page 1 on each open and stops loading on close. */
     opened: boolean;
     mode: 'manage' | 'picker';
-    /** Present in picker mode - clicking a card (or completing an upload) selects the asset. */
+    /** Present in picker mode - clicking a card or row selects the asset; an upload is pinned first, not selected. */
     onSelect?: (asset: AssetRecord) => void;
 }
 /**
- * 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.
  */