canopycms 0.1.0 → 0.2.0-int.121

package/dist/editor/fields/ObjectField.js

@@ -1,22 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
-import { Button, Paper, Stack } from '@mantine/core';
+import { useId, useRef } from 'react';
+import { ActionIcon, Button, Menu, Paper, Stack, Text, Tooltip, VisuallyHidden, } from '@mantine/core';
+import { IconDots } from '@tabler/icons-react';
 import { isPlainRecord } from '../../validation/field-traversal.js';
 import { formatCanopyPath } from '../canopy-path.js';
 import { useFieldCommentControl } from '../comments/field-comment-context.js';
+import { DestructiveMenuItem } from '../components/DestructiveMenuItem.js';
 import { EDITOR_ACTIONS } from '../copy.js';
+import { focusFieldTarget } from '../field-target.js';
 import { groupDescriptionProps } from './FieldDescription.js';
 import { FieldLabel } from './FieldLabel.js';
-export const ObjectField = ({ label, required, description, fields, value, onChange, renderField, path, dataCanopyField, onRemove, }) => {
+const quoted = (label) => (label ? ` "${label}"` : '');
+/**
+ * An object field's group of fields. Its Clear is an Undo-instead-of-confirm removal
+ * (docs/ux-guidelines.md, Destructive actions) whose Undo stays in the label row, where the clear
+ * happened, with no timer, until the caller drops `onUndoClear`. FormRenderer drops it once it
+ * can no longer put the object back where it was, another entry or branch opens, or the entry is
+ * saved or its draft discarded.
+ */
+export const ObjectField = ({ label, required, description, fields, value, onChange, renderField, path, dataCanopyField, onClear, onUndoClear, clearNote, }) => {
     const current = isPlainRecord(value) ? value : {};
     const descriptionBaseId = useId();
     const commentControl = useFieldCommentControl(dataCanopyField ?? formatCanopyPath(path));
-    return (_jsx(Paper, { withBorder: true, p: "md", bg: "var(--canopy-surface-subtle)", "data-canopy-field": dataCanopyField ?? formatCanopyPath(path), shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), role: "group", "aria-label": label, "data-removal-focus": true, tabIndex: -1, children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldLabel, { label: label, required: required, description: description, descriptionBaseId: descriptionBaseId, commentControl: commentControl, actions: onRemove && (_jsx(Button, { variant: "subtle", color: "gray", "aria-label": label ? `${EDITOR_ACTIONS.clear} "${label}"` : undefined, onClick: (event) => {
-                            // The button goes with the value, so focus moves to the object, not the page.
-                            const field = event.currentTarget.closest('[data-removal-focus]');
-                            onRemove();
-                            field?.focus();
-                        }, children: EDITOR_ACTIONS.clear })) }), _jsx(Stack, { gap: "sm", children: fields.map((field) => {
+    const groupRef = useRef(null);
+    const undoRef = useRef(null);
+    const actionsLabel = label ? `Actions for ${label}` : 'Actions';
+    // The menu goes with the value and the Undo takes its place, so focus moves there, one key from
+    // undoing. With no Undo offered, the object takes focus rather than the page.
+    const clear = () => {
+        onClear?.();
+        requestAnimationFrame(() => (undoRef.current ?? groupRef.current)?.focus());
+    };
+    const undo = () => {
+        onUndoClear?.();
+        requestAnimationFrame(() => {
+            if (groupRef.current)
+                focusFieldTarget(groupRef.current);
+        });
+    };
+    let actions = null;
+    if (onUndoClear) {
+        actions = (_jsx(Button, { ref: undoRef, size: "compact-sm", variant: "subtle", "aria-label": `${EDITOR_ACTIONS.undoClear}${quoted(label)}`, onClick: undo, children: EDITOR_ACTIONS.undoClear }));
+    }
+    else if (onClear) {
+        actions = (_jsxs(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 220, children: [_jsx(Tooltip, { label: actionsLabel, openDelay: 500, children: _jsx(Menu.Target, { children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": actionsLabel, children: _jsx(IconDots, { size: 16, "aria-hidden": true }) }) }) }), _jsx(Menu.Dropdown, { children: _jsx(DestructiveMenuItem, { onClick: clear, children: `${EDITOR_ACTIONS.clear}${quoted(label)}` }) })] }));
+    }
+    return (_jsx(Paper, { ref: groupRef, withBorder: true, p: "md", bg: "var(--canopy-surface-subtle)", "data-canopy-field": dataCanopyField ?? formatCanopyPath(path), shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), role: "group", "aria-label": label, "data-removal-focus": true, tabIndex: -1, children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldLabel, { label: label, required: required, description: description, descriptionBaseId: descriptionBaseId, commentControl: commentControl, actions: actions }), onUndoClear && clearNote && (_jsx(Text, { size: "xs", c: "dimmed", "aria-hidden": true, children: clearNote })), (onClear || onUndoClear) && (_jsx(VisuallyHidden, { role: "status", children: onUndoClear ? `Cleared${quoted(label)}.${clearNote ? ` ${clearNote}` : ''}` : '' })), _jsx(Stack, { gap: "sm", children: fields.map((field) => {
                         const fieldPath = [...path, field.name];
                         return (_jsx("div", { children: renderField(field, current[field.name], (next) => onChange({ ...current, [field.name]: next }), fieldPath) }, formatCanopyPath(fieldPath)));
                     }) })] }) }));

package/dist/editor/fields/entry-link/EntryLinkContext.d.ts

@@ -2,6 +2,8 @@ import type { ContentId, LogicalPath } from '../../../paths/types.js';
 export interface EntryLinkOption {
     contentId: ContentId;
     label: string;
+    /** The entry's title, the link text, where `label` is a singleton's type label. */
+    title?: string;
     slug?: string;
     collectionPath?: LogicalPath;
     collectionName?: string;

package/dist/editor/fields/entry-link/InsertEntryLink.js

@@ -21,6 +21,7 @@ export const InsertEntryLink = ({ onInsert }) => {
             return entries;
         const lower = search.toLowerCase();
         return entries.filter((e) => e.label.toLowerCase().includes(lower) ||
+            e.title?.toLowerCase().includes(lower) ||
             e.slug?.toLowerCase().includes(lower) ||
             e.collectionName?.toLowerCase().includes(lower));
     }, [entries, search]);
@@ -35,7 +36,8 @@ export const InsertEntryLink = ({ onInsert }) => {
         return groups;
     }, [filtered]);
     const handleSelect = (entry) => {
-        const rawText = entry.label || entry.slug || 'Link';
+        // The title, not a singleton's type label: published content reads the page's own name.
+        const rawText = entry.title || entry.label || entry.slug || 'Link';
         // Escape backslashes first, then characters that end the link text or that
         // the editor parses as MDX (`{` opens an expression, `<` a JSX tag).
         const linkText = rawText.replace(/\\/g, '\\\\').replace(/([[\]()<>{}])/g, '\\$1');

package/dist/editor/group-manager/index.js

@@ -82,7 +82,7 @@ const GroupManagerDrawer = ({ opened, onClose, onExited, returnFocusTo, internal
         addMember(groupId, userId);
         userSearch.hideSearch();
     }, [addMember, userSearch]);
-    return (_jsx(StagedChangesDrawer, { opened: opened, onClose: onClose, title: "Groups", description: "Manage groups and organizations", size: 600, isDirty: isDirty, isSaving: isSaving, canEdit: canEdit, saveLabel: "Save groups", onSave: save, onDiscard: discard, childModalOpen: isModalOpen || deleteConfirmOpen, onExited: onExited, returnFocusTo: returnFocusTo, children: _jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, children: [!canEdit && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "yellow", mb: "sm", title: "Read-only", children: "You need admin access to manage groups." })), error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: errorIsConflict ? 'yellow' : 'red', mb: "sm", title: errorIsConflict ? 'Not saved' : 'Error', withCloseButton: true, onClose: () => setError(null), children: error })), loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading groups..." })] })) : (_jsxs(Tabs, { defaultValue: "internal", style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "internal", children: "Internal groups" }), _jsx(Tabs.Tab, { value: "external", children: "External groups" })] }), _jsx(Tabs.Panel, { value: "internal", style: { flex: 1, overflow: 'auto' }, children: _jsx(InternalGroupsTab, { groups: groups, unsavedGroupIds: unsavedGroupIds, canEdit: canEdit, onCreateGroup: handleCreateGroup, onEditGroup: handleEditGroup, onDeleteGroup: confirmDeleteGroup, onAddMember: handleAddMember, onRemoveMember: removeMember, onGetUserMetadata: onGetUserMetadata, activeSearchGroupId: userSearch.activeGroupId, searchQuery: userSearch.searchQuery, searchResults: userSearch.searchResults, isSearching: userSearch.isSearching, searchError: userSearch.searchError, onSearchQueryChange: userSearch.setSearchQuery, onShowSearch: userSearch.showSearch, onHideSearch: userSearch.hideSearch, canSearch: !!onSearchUsers }) }), _jsx(Tabs.Panel, { value: "external", style: { flex: 1, overflow: 'auto' }, children: _jsx(ExternalGroupsTab, { canEdit: canEdit, searchQuery: externalGroupSearch.searchQuery, searchResults: externalGroupSearch.searchResults, isSearching: externalGroupSearch.isSearching, searchError: externalGroupSearch.searchError, onSearchQueryChange: externalGroupSearch.setSearchQuery, canSearch: !!onSearchExternalGroups }) })] })), _jsx(GroupForm, { isOpen: isModalOpen, editingGroup: editingGroup, formData: formData, onFormChange: handleFormChange, onSave: handleSaveModal, onClose: () => setIsModalOpen(false) })] }) }));
+    return (_jsx(StagedChangesDrawer, { opened: opened, onClose: onClose, title: "Groups", size: 600, isDirty: isDirty, isSaving: isSaving, canEdit: canEdit, saveLabel: "Save groups", onSave: save, onDiscard: discard, childModalOpen: isModalOpen || deleteConfirmOpen, onExited: onExited, returnFocusTo: returnFocusTo, children: _jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, children: [!canEdit && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "yellow", mb: "sm", title: "Read-only", children: "You need admin access to manage groups." })), error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: errorIsConflict ? 'yellow' : 'red', mb: "sm", title: errorIsConflict ? 'Not saved' : 'Error', withCloseButton: true, onClose: () => setError(null), children: error })), loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading groups..." })] })) : (_jsxs(Tabs, { defaultValue: "internal", style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Tab, { value: "internal", children: "Internal groups" }), _jsx(Tabs.Tab, { value: "external", children: "External groups" })] }), _jsx(Tabs.Panel, { value: "internal", style: { flex: 1, overflow: 'auto' }, children: _jsx(InternalGroupsTab, { groups: groups, unsavedGroupIds: unsavedGroupIds, canEdit: canEdit, onCreateGroup: handleCreateGroup, onEditGroup: handleEditGroup, onDeleteGroup: confirmDeleteGroup, onAddMember: handleAddMember, onRemoveMember: removeMember, onGetUserMetadata: onGetUserMetadata, activeSearchGroupId: userSearch.activeGroupId, searchQuery: userSearch.searchQuery, searchResults: userSearch.searchResults, isSearching: userSearch.isSearching, searchError: userSearch.searchError, onSearchQueryChange: userSearch.setSearchQuery, onShowSearch: userSearch.showSearch, onHideSearch: userSearch.hideSearch, canSearch: !!onSearchUsers }) }), _jsx(Tabs.Panel, { value: "external", style: { flex: 1, overflow: 'auto' }, children: _jsx(ExternalGroupsTab, { canEdit: canEdit, searchQuery: externalGroupSearch.searchQuery, searchResults: externalGroupSearch.searchResults, isSearching: externalGroupSearch.isSearching, searchError: externalGroupSearch.searchError, onSearchQueryChange: externalGroupSearch.setSearchQuery, canSearch: !!onSearchExternalGroups }) })] })), _jsx(GroupForm, { isOpen: isModalOpen, editingGroup: editingGroup, formData: formData, onFormChange: handleFormChange, onSave: handleSaveModal, onClose: () => setIsModalOpen(false) })] }) }));
 };
 export { useGroupState } from './hooks/useGroupState.js';
 export { useUserSearch } from './hooks/useUserSearch.js';

package/dist/editor/hooks/useBranchManager.d.ts

@@ -88,6 +88,8 @@ export interface UseBranchManagerReturn {
     branches: BranchListItem[];
     branchSummaries: BranchSummary[];
     currentBranch: BranchListItem | undefined;
+    /** The listing failed and nothing earlier stands in for it. */
+    branchesLoadFailed: boolean;
     /** Shows a branch the server just created before any listing includes it. */
     addCreatedBranch: (branch: BranchListItem) => void;
     handleSubmit: (branchName: string) => Promise<void>;

package/dist/editor/hooks/useBranchManager.js

@@ -601,6 +601,7 @@ export function useBranchManager(options) {
         branches,
         branchSummaries,
         currentBranch,
+        branchesLoadFailed: !!branchesError && !branchesData,
         addCreatedBranch,
         handleSubmit,
         handleWithdraw,

package/dist/editor/hooks/useEditorLayout.d.ts

@@ -11,6 +11,8 @@ interface EditorLayoutPrefs {
     sideSplitPercent: number;
     stackedSplitPercent: number;
     previewWidth: PreviewWidth;
+    /** The preview asks for the site's header and footer; see `siteChromeSrc`. */
+    siteChrome: boolean;
     contentPanelOpen: boolean;
     contentPanelWidth: number;
 }
@@ -46,6 +48,8 @@ export interface UseEditorLayoutReturn {
     setSplitPercent: (layout: PaneArrangement, percent: number) => void;
     previewWidth: PreviewWidth;
     setPreviewWidth: (width: PreviewWidth) => void;
+    siteChrome: boolean;
+    setSiteChrome: (siteChrome: boolean) => void;
     contentPanelOpen: boolean;
     setContentPanelOpen: (open: boolean) => void;
     contentPanelWidth: number;

package/dist/editor/hooks/useEditorLayout.js

@@ -15,6 +15,7 @@ export const DEFAULT_EDITOR_LAYOUT_PREFS = {
     sideSplitPercent: DEFAULT_SIDE_SPLIT_PERCENT,
     stackedSplitPercent: DEFAULT_STACKED_SPLIT_PERCENT,
     previewWidth: 'fit',
+    siteChrome: false,
     contentPanelOpen: false,
     contentPanelWidth: 280,
 };
@@ -50,6 +51,7 @@ export function parseEditorLayoutPrefs(raw) {
         sideSplitPercent: numberOr(parsed.sideSplitPercent, defaults.sideSplitPercent, clampSplitPercent),
         stackedSplitPercent: numberOr(parsed.stackedSplitPercent, defaults.stackedSplitPercent, clampSplitPercent),
         previewWidth: oneOf(PREVIEW_WIDTHS, parsed.previewWidth, defaults.previewWidth),
+        siteChrome: boolOr(parsed.siteChrome, defaults.siteChrome),
         contentPanelOpen: boolOr(parsed.contentPanelOpen, defaults.contentPanelOpen),
         contentPanelWidth: numberOr(parsed.contentPanelWidth, defaults.contentPanelWidth, clampContentPanelWidth),
     };
@@ -80,6 +82,7 @@ export function useEditorLayout(options) {
             : { ...prev, stackedSplitPercent: clamped });
     }, [setPrefs]);
     const setPreviewWidth = useCallback((previewWidth) => setPrefs((prev) => ({ ...prev, previewWidth })), [setPrefs]);
+    const setSiteChrome = useCallback((siteChrome) => setPrefs((prev) => ({ ...prev, siteChrome })), [setPrefs]);
     const setContentPanelOpen = useCallback((contentPanelOpen) => setPrefs((prev) => ({ ...prev, contentPanelOpen })), [setPrefs]);
     const setContentPanelWidth = useCallback((width) => {
         if (!Number.isFinite(width))
@@ -98,6 +101,8 @@ export function useEditorLayout(options) {
         setSplitPercent,
         previewWidth: prefs.previewWidth,
         setPreviewWidth,
+        siteChrome: prefs.siteChrome,
+        setSiteChrome,
         contentPanelOpen: prefs.contentPanelOpen,
         setContentPanelOpen,
         contentPanelWidth: prefs.contentPanelWidth,

package/dist/editor/hooks/useEntryManager.d.ts

@@ -34,6 +34,8 @@ export interface UseEntryManagerOptions {
     branchName: string;
     collections?: EditorCollection[];
     resolvePreviewSrc: (entry: Partial<EditorEntry>) => string | undefined;
+    /** An entry's route on the site (`buildPreviewRoute`), which picks the home page to open first. */
+    resolvePreviewRoute?: (entry: EditorEntry) => string | undefined;
     setBusy: (busy: boolean) => void;
 }
 export interface UseEntryManagerReturn {

package/dist/editor/hooks/useEntryManager.js

@@ -1,7 +1,7 @@
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { notifications } from '@mantine/notifications';
-import { buildWritePayload, normalizeContentPayload } from '../editor-utils.js';
+import { buildWritePayload, normalizeContentPayload, resolveHomeEntry } from '../editor-utils.js';
 import { isDataOnlyFormat } from '../../utils/format.js';
 import { withTitleAtPath } from '../../utils/title-field.js';
 import { getErrorMessage } from '../../utils/error.js';
@@ -53,7 +53,7 @@ const EMPTY_COLLECTIONS = [];
 const EMPTY_SCHEMAS = [];
 /**
  * The URL's `entry`: a path; `''` for no entry and the navigator open (the crash screen's escape
- * from an entry that crashes the editor); null opens the first entry.
+ * from an entry that crashes the editor); null opens the home page (`resolveHomeEntry`).
  */
 const readUrlEntry = () => typeof window === 'undefined' ? null : new URLSearchParams(window.location.search).get('entry');
 /**
@@ -162,6 +162,9 @@ export function useEntryManager(options) {
     // the user switches mid-flight, which is exactly when the check matters).
     const currentBranchRef = useRef(options.branchName);
     currentBranchRef.current = options.branchName;
+    // Read by the selection check, which runs only when the entries or the selection change.
+    const resolvePreviewRouteRef = useRef(options.resolvePreviewRoute);
+    resolvePreviewRouteRef.current = options.resolvePreviewRoute;
     const recordCommittedRefreshSeq = (branch, seq) => {
         refreshSeqRef.current.committed.set(branch, seq);
         // A commit also implies any future claim must outrank this tag, so a
@@ -181,13 +184,13 @@ export function useEntryManager(options) {
         initialUrlEntry.current = readUrlEntry();
     }
     // Set by the URL's empty `entry` or by `closeEntry`; honoured until an entry is selected or the
-    // branch changes, after which a lost selection opens the first again.
+    // branch changes, after which a lost selection opens the home page again.
     const noEntryRequested = useRef(initialUrlEntry.current === '');
     const selectEntryPath = useCallback((path) => {
         selectionsByCallerRef.current += 1;
         setSelectedPath(path);
     }, []);
-    // No entry open, as the URL's empty `entry` asks, where a lost selection opens the first.
+    // No entry open, as the URL's empty `entry` asks, where a lost selection opens the home page.
     const closeEntry = useCallback(() => {
         noEntryRequested.current = true;
         selectEntryPath('');
@@ -503,7 +506,7 @@ export function useEntryManager(options) {
         const stillOnIt = selectedPathRef.current === path;
         const selections = selectionsByCallerRef.current;
         // The rename landed whatever the refresh does. The new path is selected only once the list
-        // holds it: before that, the selection check would find it missing and open the first entry.
+        // holds it: before that, the selection check would find it missing and open the home page.
         const landed = async (newPath) => {
             const listed = await refreshEntries().catch((err) => {
                 console.error(err);
@@ -545,7 +548,7 @@ export function useEntryManager(options) {
                 return;
             }
             void refreshEntries().catch(console.error);
-            throw new MayHaveLandedError(`Renaming "${label}" may have gone through even though the server didn't answer. Check the "Content" panel before trying again.`);
+            throw new MayHaveLandedError(`Changing the URL of "${label}" may have gone through even though the server didn't answer. Check the "Content" panel before trying again.`);
         }
         finally {
             options.setBusy(false);
@@ -705,8 +708,7 @@ export function useEntryManager(options) {
             return;
         if (selectedPath === '' && noEntryRequested.current)
             return;
-        // Fall back to first entry
-        setSelectedPath(entriesState[0]?.path ?? '');
+        setSelectedPath(resolveHomeEntry(entriesState, resolvePreviewRouteRef.current)?.path ?? '');
     }, [entriesState, selectedPath]);
     // Update URL when selection changes (skip until URL sync has happened)
     useEffect(() => {

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

@@ -6,13 +6,16 @@ export interface AssetCardProps {
     baseUrl?: string;
     /** Present in picker mode - clicking the card selects the asset. */
     onSelect?: (asset: AssetRecord) => void;
-    /** Present only where the viewer may remove the asset (manage mode) - renders the trash button. */
-    onDelete?: (asset: AssetRecord) => void;
+    /** Present only where the viewer may remove the asset from the library (manage mode). */
+    onRemove?: (asset: AssetRecord) => void;
+    /** Present only where the viewer may restore a removed (`hidden`) asset to the library. */
+    onRestore?: (asset: AssetRecord) => void;
     /** `compact` shrinks the thumbnail and drops the date line. */
     density?: 'grid' | 'compact';
 }
 /**
  * One thumbnail card in the MediaLibrary grid. PDFs have no image to preview, so they render a
- * file-type icon instead.
+ * file-type icon instead. A file removed from the library (`hidden`, listed only for an admin who
+ * asked to see removed files) is badged "Removed" and offers Restore instead of Remove.
  */
 export declare const AssetCard: React.FC<AssetCardProps>;

package/dist/editor/media/AssetCard.js

@@ -1,20 +1,32 @@
 'use client';
 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 { ActionIcon, Badge, Card, Text, Tooltip } from '@mantine/core';
+import { IconEyeOff, IconFileTypePdf, IconPhotoOff, IconRestore } from '@tabler/icons-react';
+import { EDITOR_THUMBNAIL_WIDTHS } from '../../assets/editor-thumbnail-widths.js';
+import { EDITOR_ACTIONS } from '../copy.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;
+/** Over the thumbnail, so opaque: the default fill. */
+const overlayActionStyle = {
+    position: 'absolute',
+    top: 4,
+    right: 4,
+    zIndex: 1,
+};
 /**
  * One thumbnail card in the MediaLibrary grid. PDFs have no image to preview, so they render a
- * file-type icon instead.
+ * file-type icon instead. A file removed from the library (`hidden`, listed only for an admin who
+ * asked to see removed files) is badged "Removed" and offers Restore instead of Remove.
  */
-export const AssetCard = ({ asset, baseUrl, onSelect, onDelete, density = 'grid', }) => {
+export const AssetCard = ({ asset, baseUrl, onSelect, onRemove, onRestore, density = 'grid', }) => {
     const compact = density === 'compact';
+    const removed = asset.hidden === true;
     const thumbnailHeight = CARD_THUMBNAIL_HEIGHT[density];
-    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', { width: THUMBNAIL_WIDTH });
+    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', {
+        width: EDITOR_THUMBNAIL_WIDTHS.card,
+    });
     const [thumbnailFailed, markThumbnailFailed] = useThumbnailFailure(thumbnailSrc);
     const handleKeyDown = (event) => {
         if (!onSelect)
@@ -31,10 +43,13 @@ export const AssetCard = ({ asset, baseUrl, onSelect, onDelete, density = 'grid'
         // native <button> Enter/Space activation.
         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) => {
+        className: onSelect ? 'mantine-focus-auto' : undefined, "aria-label": onSelect ? `Select ${asset.filename}` : undefined, children: [!removed && onRemove && (_jsx(Tooltip, { label: `${EDITOR_ACTIONS.remove} from library`, children: _jsx(ActionIcon, { variant: "default", radius: "xl", style: overlayActionStyle, "aria-label": `${EDITOR_ACTIONS.remove} ${asset.filename} from library`, "data-testid": `asset-card-remove-${asset.hash32}`, onClick: (event) => {
+                        event.stopPropagation();
+                        onRemove(asset);
+                    }, children: _jsx(IconEyeOff, { size: 14 }) }) })), removed && onRestore && (_jsx(Tooltip, { label: `${EDITOR_ACTIONS.restore} to library`, children: _jsx(ActionIcon, { variant: "default", radius: "xl", style: overlayActionStyle, "aria-label": `${EDITOR_ACTIONS.restore} ${asset.filename} to library`, "data-testid": `asset-card-restore-${asset.hash32}`, onClick: (event) => {
                         event.stopPropagation();
-                        onDelete(asset);
-                    }, children: _jsx(IconTrash, { size: 14 }) }) })), _jsx(Card.Section, { children: asset.kind === 'pdf' ? (_jsx("div", { style: {
+                        onRestore(asset);
+                    }, children: _jsx(IconRestore, { size: 14 }) }) })), removed && (_jsx(Badge, { size: "xs", color: "gray", variant: "light", style: { position: 'absolute', top: 8, left: 8, zIndex: 1 }, "data-testid": `asset-card-removed-${asset.hash32}`, children: "Removed" })), _jsx(Card.Section, { children: asset.kind === 'pdf' ? (_jsx("div", { style: {
                         height: thumbnailHeight,
                         display: 'flex',
                         alignItems: 'center',

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

@@ -6,11 +6,16 @@ export interface AssetListRowProps {
     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.
+     * cannot hold another, so a selectable row renders no remove or restore control.
      */
     onSelect?: (asset: AssetRecord) => void;
-    /** Present only where the viewer may remove the asset - renders the trash button. */
-    onDelete?: (asset: AssetRecord) => void;
+    /** Present only where the viewer may remove the asset from the library. */
+    onRemove?: (asset: AssetRecord) => void;
+    /** Present only where the viewer may restore a removed (`hidden`) asset to the library. */
+    onRestore?: (asset: AssetRecord) => void;
 }
-/** One asset as a row in the list layout: thumbnail, name, dimensions, size and upload date. */
+/**
+ * One asset as a row in the list layout: thumbnail, name, dimensions, size and upload date. A file
+ * removed from the library (`hidden`) is badged "Removed" and offers Restore instead of Remove.
+ */
 export declare const AssetListRow: React.FC<AssetListRowProps>;

package/dist/editor/media/AssetListRow.js

@@ -1,13 +1,14 @@
 '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 { ActionIcon, Badge, Group, Text, Tooltip, UnstyledButton } from '@mantine/core';
+import { IconEyeOff, IconFileTypePdf, IconPhotoOff, IconRestore } from '@tabler/icons-react';
+import { EDITOR_THUMBNAIL_WIDTHS } from '../../assets/editor-thumbnail-widths.js';
+import { EDITOR_ACTIONS } from '../copy.js';
 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,
@@ -25,17 +26,25 @@ const thumbnailBoxStyle = {
     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 });
+/**
+ * One asset as a row in the list layout: thumbnail, name, dimensions, size and upload date. A file
+ * removed from the library (`hidden`) is badged "Removed" and offers Restore instead of Remove.
+ */
+export const AssetListRow = ({ asset, baseUrl, onSelect, onRemove, onRestore, }) => {
+    const removed = asset.hidden === true;
+    const thumbnailSrc = editorImageSrc(asset.src, baseUrl ?? '', {
+        width: EDITOR_THUMBNAIL_WIDTHS.listRow,
+    });
     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 }) }) }));
+                _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 }) }), removed && (_jsx(Badge, { size: "xs", color: "gray", variant: "light", style: { flex: '0 0 auto' }, "data-testid": `asset-row-removed-${asset.hash32}`, children: "Removed" })), _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 action = removed
+        ? onRestore && (_jsx(Tooltip, { label: `${EDITOR_ACTIONS.restore} to library`, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": `${EDITOR_ACTIONS.restore} ${asset.filename} to library`, "data-testid": `asset-row-restore-${asset.hash32}`, onClick: () => onRestore(asset), children: _jsx(IconRestore, { size: 16 }) }) }))
+        : onRemove && (_jsx(Tooltip, { label: `${EDITOR_ACTIONS.remove} from library`, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": `${EDITOR_ACTIONS.remove} ${asset.filename} from library`, "data-testid": `asset-row-remove-${asset.hash32}`, onClick: () => onRemove(asset), children: _jsx(IconEyeOff, { 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] }));
+    return (_jsxs(Group, { gap: "xs", wrap: "nowrap", "data-testid": `asset-row-${asset.hash32}`, style: rowStyle, children: [content, action] }));
 };

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

@@ -5,20 +5,18 @@ export interface CropStepProps {
     onClose: () => void;
     /** Full-frame image src to crop - `assetUrl()` with no crop directive, so the user always crops the original frame. */
     imageSrc: string;
-    /** Numeric aspect ratio (width/height) parsed from the field config's "W:H" string. */
-    aspect: number;
-    /** Existing crop rect, if re-cropping - seeds react-easy-crop's initial selection (best effort). */
+    /** Numeric aspect ratio (width/height) parsed from the field config's "W:H" string. Absent: the crop box is free-form. */
+    aspect?: number;
+    /** Existing crop rect, if re-cropping - the box it opens with. */
     initialCrop?: CropRect;
     onConfirm: (rect: CropRect) => void;
 }
 /**
- * react-easy-crop wrapped in a Modal for the ImageField crop step. Percentage
- * -> normalized-rect conversion is delegated to crop-math.ts's pure,
- * independently-unit-tested `cropAreaPercentToRect`.
+ * react-image-crop in a Modal for the ImageField crop step. Box -> normalized-rect
+ * conversion is delegated to crop-math.ts's pure, independently-unit-tested
+ * `cropAreaPercentToRect`.
  *
- * The pan/zoom/pending-selection state lives in `CropStepBody`, mounted only
- * while `opened` and keyed on `imageSrc` - so a fresh crop session always
- * starts from fresh state (React remounts on key change) without an effect
- * that would otherwise need to call `setState` synchronously to reset it.
+ * The box state lives in `CropStepBody`, mounted only while `opened` and keyed on `imageSrc`,
+ * so a fresh crop session always starts from a fresh box (React remounts on key change).
  */
 export declare const CropStep: React.FC<CropStepProps>;

package/dist/editor/media/CropStep.js

@@ -1,41 +1,53 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button, Group, Modal, Slider, Stack, Text } from '@mantine/core';
-import Cropper from 'react-easy-crop';
-import { cropAreaPercentToRect, cropRectToAreaPercent } from './crop-math.js';
-const MIN_ZOOM = 1;
-const MAX_ZOOM = 3;
-const ZOOM_STEP = 0.05;
+import { Button, Group, Modal, Stack, Text } from '@mantine/core';
+import ReactCrop from 'react-image-crop';
+import { cropAreaPercentToRect, initialCropBox } from './crop-math.js';
+const MIN_BOX_PX = 16;
+const CORNER_LABEL = (corner) => `${corner} corner. Arrow keys resize the box.`;
+const ARIA_LABELS = {
+    cropArea: 'Crop box. Arrow keys move it; hold Shift for larger steps.',
+    nwDragHandle: CORNER_LABEL('Top-left'),
+    neDragHandle: CORNER_LABEL('Top-right'),
+    seDragHandle: CORNER_LABEL('Bottom-right'),
+    swDragHandle: CORNER_LABEL('Bottom-left'),
+    nDragHandle: 'Top edge. Up and down arrow keys resize the box.',
+    sDragHandle: 'Bottom edge. Up and down arrow keys resize the box.',
+    eDragHandle: 'Right edge. Left and right arrow keys resize the box.',
+    wDragHandle: 'Left edge. Left and right arrow keys resize the box.',
+};
+const PREVIEW_MAX_HEIGHT = 360;
+const toPercentCrop = (box) => ({
+    unit: '%',
+    ...box,
+});
 /**
- * react-easy-crop wrapped in a Modal for the ImageField crop step. Percentage
- * -> normalized-rect conversion is delegated to crop-math.ts's pure,
- * independently-unit-tested `cropAreaPercentToRect`.
+ * react-image-crop in a Modal for the ImageField crop step. Box -> normalized-rect
+ * conversion is delegated to crop-math.ts's pure, independently-unit-tested
+ * `cropAreaPercentToRect`.
  *
- * The pan/zoom/pending-selection state lives in `CropStepBody`, mounted only
- * while `opened` and keyed on `imageSrc` - so a fresh crop session always
- * starts from fresh state (React remounts on key change) without an effect
- * that would otherwise need to call `setState` synchronously to reset it.
+ * The box state lives in `CropStepBody`, mounted only while `opened` and keyed on `imageSrc`,
+ * so a fresh crop session always starts from a fresh box (React remounts on key change).
  */
 export const CropStep = ({ opened, onClose, imageSrc, aspect, initialCrop, onConfirm, }) => {
     return (_jsx(Modal, { opened: opened, onClose: onClose, title: "Crop image", size: "lg", overlayProps: { blur: 2 }, "data-testid": "crop-step-modal", children: opened && (_jsx(CropStepBody, { imageSrc: imageSrc, aspect: aspect, initialCrop: initialCrop, onConfirm: onConfirm, onClose: onClose }, imageSrc)) }));
 };
 const CropStepBody = ({ imageSrc, aspect, initialCrop, onConfirm, onClose, }) => {
-    const [crop, setCrop] = useState({ x: 0, y: 0 });
-    const [zoom, setZoom] = useState(1);
-    const [pendingArea, setPendingArea] = useState(null);
-    const handleConfirm = () => {
-        if (!pendingArea)
-            return;
-        const rect = cropAreaPercentToRect(pendingArea);
-        if (rect)
-            onConfirm(rect);
+    const [box, setBox] = useState(undefined);
+    const [loadFailed, setLoadFailed] = useState(false);
+    // The box can't be seeded until the image's displayed size is known, so Apply stays off until then.
+    const rect = box ? cropAreaPercentToRect(box) : null;
+    const handleImageLoad = (event) => {
+        const { width, height } = event.currentTarget;
+        setBox(toPercentCrop(initialCropBox({ imageWidth: width, imageHeight: height, aspect, existing: initialCrop })));
     };
-    const initialCroppedAreaPercentages = initialCrop ? cropRectToAreaPercent(initialCrop) : undefined;
     return (_jsxs(Stack, { gap: "md", children: [_jsx("div", { style: {
-                    position: 'relative',
-                    width: '100%',
-                    height: 360,
+                    display: 'flex',
+                    justifyContent: 'center',
                     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" })] })] }));
+                    '--rc-focus-color': 'var(--canopy-focus-ring)',
+                }, children: _jsx(ReactCrop, { crop: box, aspect: aspect, minWidth: MIN_BOX_PX, minHeight: MIN_BOX_PX, keepSelection: true, ariaLabels: ARIA_LABELS, onChange: (_pixels, percent) => setBox(percent), children: _jsx("img", { src: imageSrc, alt: "", style: { maxHeight: PREVIEW_MAX_HEIGHT, maxWidth: '100%', display: 'block' }, onLoad: handleImageLoad, onError: () => setLoadFailed(true) }) }) }), loadFailed && (_jsx(Text, { size: "sm", c: "var(--canopy-danger-text)", role: "alert", children: "This image couldn't be loaded, so it can't be cropped." })), _jsx(Text, { size: "sm", c: "dimmed", children: aspect === undefined
+                    ? 'Drag the box to move it, or its edges and corners to resize it. With a keyboard, arrow keys move it; Shift takes larger steps.'
+                    : 'Drag the box to move it, or a corner to resize it. Its shape is fixed. With a keyboard, arrow keys move it; Shift takes larger steps.' }), _jsxs(Group, { justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: () => rect && onConfirm(rect), disabled: !rect, "data-testid": "crop-step-apply", children: "Apply crop" })] })] }));
 };

package/dist/editor/media/MediaLibrary.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Drawer, Modal, Text, Title } from '@mantine/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '@mantine/core';
 import { MediaLibraryBody } from './MediaLibraryBody.js';
 import { focusReturnProps } from '../utils/focus-return.js';
+import { OverlayDrawer } from '../shell/OverlayHeader.js';
 /**
  * One component, two presentations, sharing the same grid/list/upload/search/
  * delete core (MediaLibraryBody) - see
@@ -12,11 +13,11 @@ 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, 
+    return (_jsx(OverlayDrawer, { opened: opened, onClose: onClose, position: "right", title: "Media library", 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" }) }));
+        }, "data-testid": "media-library-manage", ...focusReturnProps(returnFocusTo), children: _jsx(MediaLibraryBody, { opened: opened, mode: "manage" }) }));
 };

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

@@ -8,7 +8,7 @@ export interface MediaLibraryBodyProps {
     onSelect?: (asset: AssetRecord) => void;
 }
 /**
- * Shared grid/list/upload/search/delete core for both MediaLibrary
+ * Shared grid/list/upload/search/remove core for both MediaLibrary
  * presentations (Drawer "manage" mode, Modal "picker" mode) - see
  * MediaLibrary.tsx for the two wrappers.
  */