canopycms 0.1.0 → 0.2.0-int.119

package/dist/editor/media/MediaLibraryBody.js

@@ -1,7 +1,7 @@
 'use client';
 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 { ActionIcon, Alert, Button, Center, Group, Progress, ScrollArea, SegmentedControl, Select, SimpleGrid, Stack, Switch, Text, TextInput, Tooltip, VisuallyHidden, } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { openConfirm } from '../utils/confirm-modal.js';
 import { IconAlertCircle, IconGridDots, IconLayoutGrid, IconList, IconSearch, IconUpload, IconX, } from '@tabler/icons-react';
@@ -42,8 +42,14 @@ const DENSITY_OPTIONS = [
     },
     { value: 'list', label: _jsx(DensityLabel, { icon: _jsx(IconList, { size: 16 }), text: "List" }) },
 ];
+/** A restored file's record: the same asset, no longer marked `hidden`. */
+function withoutHidden(asset) {
+    const restored = { ...asset };
+    delete restored.hidden;
+    return restored;
+}
 /**
- * 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.
  */
@@ -51,40 +57,49 @@ export const MediaLibraryBody = ({ opened, mode, onSelect }) => {
     const client = useApiClient();
     const { baseUrl } = useAssetContext();
     const { userContext } = useUserContext();
-    // Mirrors the server's rule in api/assets.ts's deleteAssetHandler: an admin
-    // may delete anything, anyone else only what they uploaded. Kept per-asset
+    const admin = isAdmin(userContext?.groups);
+    // Mirrors the server's rule in api/assets.ts's visibilityRefusal: an admin may
+    // remove or restore any file, anyone else only what they uploaded. Kept per-asset
     // (not a single boolean) because ownership varies row by row. The server is
     // still the authority - this only decides whether to render the control.
-    const canDeleteAsset = (asset) => {
+    const canChangeVisibility = (asset) => {
         if (mode !== 'manage')
             return false;
-        if (isAdmin(userContext?.groups))
+        if (admin)
             return true;
         return !!asset.uploadedBy && asset.uploadedBy === userContext?.userId;
     };
+    // Only an admin in the manage drawer can list removed files, so a picker never offers one.
+    const [showRemovedChoice, setShowRemoved] = useState(false);
+    const showRemoved = showRemovedChoice && admin && mode === 'manage';
     const upload = useAssetUpload();
     // `picker` mode is used exclusively by ImageField and the MDX image dialog
     // (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 library = useAssetLibrary(opened);
+    const library = useAssetLibrary(opened, showRemoved);
     const { sort, density, setSort, setDensity } = useMediaLibraryPrefs();
     const [kind, setKind] = useState('all');
     const [filterText, setFilterText] = useState('');
     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.
+    // The result of the last remove or restore, for the live region; the card may be gone.
+    // `id` re-keys the region's text, so a second action 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);
+    // A remove or restore takes the focused button with it (the card goes, or its button swaps), so
+    // focus moves to the search field once that has rendered (Mantine returns focus to the remove
+    // button when the confirm closes).
+    const focusAfterAction = useRef(false);
     useEffect(() => {
-        if (!focusAfterRemove.current)
+        if (!focusAfterAction.current)
             return;
-        focusAfterRemove.current = false;
+        focusAfterAction.current = false;
         searchRef.current?.focus();
     });
+    const announce = (text) => {
+        setActionNotice((prev) => ({ id: (prev?.id ?? 0) + 1, text }));
+        focusAfterAction.current = true;
+    };
     // Clearing hides the control that did it, so focus moves to the search field.
     const clearSearch = () => {
         setFilterText('');
@@ -142,39 +157,52 @@ export const MediaLibraryBody = ({ opened, mode, onSelect }) => {
     const handleReject = (rejections) => {
         setActionError(rejections[0]?.errors[0]?.message ?? 'The file was rejected.');
     };
-    const handleDelete = async (asset) => {
+    /**
+     * Runs a remove or restore; `failure` words its error, and the raw server message is for admins.
+     * A non-admin's 403 from the API is the ownership refusal, so it says so (`refusal`) rather than
+     * to retry. Restore shows only to admins, so it has none.
+     */
+    const changeVisibility = async (request, failure, refusal, onDone) => {
         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.');
+        const fail = (serverMessage) => setActionError(`${failure} ${(admin && serverMessage) || 'Try again.'}`);
         try {
-            const result = await client.assets.delete({ key: asset.hash32 });
+            const result = await request();
             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));
+                if (refusal && result.status === 403 && !admin && !isNonApiResponse(result)) {
+                    setActionError(`${failure} ${refusal}`);
+                }
+                else {
+                    fail(result.error);
+                }
                 return;
             }
-            library.remove(asset.hash32);
-            setActionNotice((prev) => ({
-                id: (prev?.id ?? 0) + 1,
-                text: `Removed ${asset.filename} from library`,
-            }));
-            focusAfterRemove.current = true;
+            onDone();
         }
         catch (err) {
-            setActionError(generic(getErrorMessage(err)));
+            fail(getErrorMessage(err));
         }
     };
-    const handleDeleteClick = (asset) => {
+    const handleRemove = (asset) => changeVisibility(() => client.assets.hide({ key: asset.hash32 }), `Couldn't remove ${asset.filename} from the library.`, 'You can only remove files you uploaded. Ask an admin to remove it.', () => {
+        if (showRemoved)
+            library.replace({ ...asset, hidden: true });
+        else
+            library.remove(asset.hash32);
+        announce(`Removed ${asset.filename} from library`);
+    });
+    const handleRestore = (asset) => changeVisibility(() => client.assets.restore({ key: asset.hash32 }), `Couldn't restore ${asset.filename} to the library.`, null, () => {
+        library.replace(withoutHidden(asset));
+        announce(`Restored ${asset.filename} to library`);
+    });
+    // A confirm, not an Undo: only an admin can restore, from the "Show removed files" view.
+    const handleRemoveClick = (asset) => {
         openConfirm({
             title: 'Remove from library',
-            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."] })),
+            children: (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", children: ["\u201C", asset.filename, "\u201D will no longer be listed in the media library or offered when choosing an image. Entries that already use it keep working, including published and earlier versions of the site."] }), _jsx(Text, { size: "sm", children: admin
+                            ? 'To restore it, turn on “Show removed files”, or upload it again.'
+                            : 'To restore it, upload it again or ask an admin.' })] })),
             labels: { confirm: 'Remove from library', cancel: 'Cancel' },
-            confirmProps: { color: 'red' },
             onConfirm: () => {
-                void handleDelete(asset);
+                void handleRemove(asset);
             },
         });
     };
@@ -228,9 +256,9 @@ export const MediaLibraryBody = ({ opened, mode, onSelect }) => {
     })();
     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(Stack, { gap: 4, children: visibleAssets.map((asset) => (_jsx(AssetListRow, { asset: asset, baseUrl: baseUrl, onSelect: mode === 'picker' ? onSelect : undefined, onRemove: canChangeVisibility(asset) ? handleRemoveClick : undefined, onRestore: canChangeVisibility(asset) ? handleRestore : 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))) }));
+        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, onRemove: canChangeVisibility(asset) ? handleRemoveClick : undefined, onRestore: canChangeVisibility(asset) ? handleRestore : 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 (
@@ -242,7 +270,7 @@ export const MediaLibraryBody = ({ opened, mode, onSelect }) => {
                 (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) => {
+                }, "data-testid": "media-library-filter" }), _jsxs(Group, { justify: "space-between", wrap: "wrap", gap: "xs", children: [imageOnly ? (_jsx("span", {})) : (_jsxs(Group, { gap: "md", wrap: "wrap", children: [_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" }), admin && mode === 'manage' && (_jsx(Switch, { label: "Show removed files", checked: showRemoved, onChange: (event) => setShowRemoved(event.currentTarget.checked), "data-testid": "media-library-show-removed" }))] })), _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);

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

@@ -15,16 +15,19 @@ export interface UseAssetLibraryResult {
     retry: () => void;
     /** Puts an uploaded asset in the list; the one already loaded under its hash is replaced. */
     prepend: (asset: AssetRecord) => void;
-    /** Drops a deleted asset, including from a page still on its way. */
+    /** Drops a removed asset, including from a page still on its way. */
     remove: (hash32: string) => void;
+    /** Replaces the loaded asset with the same hash in place, such as one just removed or restored. */
+    replace: (asset: AssetRecord) => void;
 }
 /**
  * Loads the whole library in the background while `opened`: page 1 first, then each following
  * page in turn, so search and sort see every asset. Closing (or unmounting) stops the walk, and
- * reopening starts again from page 1.
+ * reopening, or changing `includeHidden`, starts again from page 1. `includeHidden` (admins only)
+ * also lists the files removed from the library, each marked `hidden`.
  *
  * Finalize dedups content, so a re-uploaded file comes back as an existing record that may also
  * arrive in a later page; assets are merged by `hash32`.
  */
-export declare function useAssetLibrary(opened: boolean): UseAssetLibraryResult;
+export declare function useAssetLibrary(opened: boolean, includeHidden?: boolean): UseAssetLibraryResult;
 export {};

package/dist/editor/media/useAssetLibrary.js

@@ -18,12 +18,13 @@ function mergeAssets(existing, incoming, removed) {
 /**
  * Loads the whole library in the background while `opened`: page 1 first, then each following
  * page in turn, so search and sort see every asset. Closing (or unmounting) stops the walk, and
- * reopening starts again from page 1.
+ * reopening, or changing `includeHidden`, starts again from page 1. `includeHidden` (admins only)
+ * also lists the files removed from the library, each marked `hidden`.
  *
  * Finalize dedups content, so a re-uploaded file comes back as an existing record that may also
  * arrive in a later page; assets are merged by `hash32`.
  */
-export function useAssetLibrary(opened) {
+export function useAssetLibrary(opened, includeHidden = false) {
     const client = useApiClient();
     const [assets, setAssets] = useState([]);
     const [firstPageLoaded, setFirstPageLoaded] = useState(false);
@@ -44,9 +45,11 @@ export function useAssetLibrary(opened) {
             let page;
             let message = '';
             try {
-                const result = await client.assets.list(cursor === undefined
-                    ? { limit: String(PAGE_SIZE) }
-                    : { cursor, limit: String(PAGE_SIZE) });
+                const result = await client.assets.list({
+                    limit: String(PAGE_SIZE),
+                    ...(cursor !== undefined && { cursor }),
+                    ...(includeHidden && { includeHidden: 'true' }),
+                });
                 if (result.ok && result.data)
                     page = result.data;
                 else
@@ -74,7 +77,7 @@ export function useAssetLibrary(opened) {
                 return;
             }
             // A cursor seen before means the listing moved under the walk (the local store restarts
-            // from page 1 when its anchor asset is deleted), so pages may be missing: never report
+            // from page 1 when its anchor's meta file is gone), so pages may be missing: never report
             // that as complete. Retry starts over.
             if (requested.current.has(next)) {
                 failedCursor.current = undefined;
@@ -83,7 +86,7 @@ export function useAssetLibrary(opened) {
             }
             cursor = next;
         }
-    }, [client]);
+    }, [client, includeHidden]);
     const start = useCallback(() => {
         generation.current += 1;
         requested.current = new Set();
@@ -102,8 +105,9 @@ export function useAssetLibrary(opened) {
         return () => {
             generation.current += 1;
         };
-        // Restart only when the drawer/modal (re)opens, not when `start`'s identity changes.
-    }, [opened]);
+        // Restart only when the drawer/modal (re)opens or the listing changes, not when `start`'s
+        // identity changes.
+    }, [opened, includeHidden]);
     const retry = useCallback(() => {
         const cursor = failedCursor.current;
         if (cursor === undefined) {
@@ -122,5 +126,8 @@ export function useAssetLibrary(opened) {
         removed.current.add(hash32);
         setAssets((prev) => prev.filter((existing) => existing.hash32 !== hash32));
     }, []);
-    return { assets, firstPageLoaded, complete, error, retry, prepend, remove };
+    const replace = useCallback((asset) => {
+        setAssets((prev) => prev.map((existing) => (existing.hash32 === asset.hash32 ? asset : existing)));
+    }, []);
+    return { assets, firstPageLoaded, complete, error, retry, prepend, remove, replace };
 }

package/dist/editor/pane-header.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The height of the bar atop each half of the main region, the preview toolbar and the form
+ * header, so their bottom borders line up side by side. Border-box: it includes the bar's border,
+ * and the preview pane's own top border above its toolbar.
+ */
+export declare const PANE_HEADER_HEIGHT = 40;

package/dist/editor/pane-header.js

@@ -0,0 +1,6 @@
+/**
+ * The height of the bar atop each half of the main region, the preview toolbar and the form
+ * header, so their bottom borders line up side by side. Border-box: it includes the bar's border,
+ * and the preview pane's own top border above its toolbar.
+ */
+export const PANE_HEADER_HEIGHT = 40;

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

@@ -111,7 +111,7 @@ const PermissionManagerDrawer = ({ opened, onClose, onExited, returnFocusTo, col
             allowedUsers: currentTarget.allowedUsers,
         });
     }, [annotatedTree, localPermissions, updateNodePermission]);
-    return (_jsx(StagedChangesDrawer, { opened: opened, onClose: onClose, title: "Permissions", description: "Manage content access by path (read, edit, review)", size: 700, isDirty: isDirty, isSaving: isSaving, canEdit: canEdit, saveLabel: "Save permissions", onSave: handleSave, onDiscard: handleDiscard, 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 edit permissions" })), 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 })), groupLoadError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "orange", mb: "sm", title: "Warning", withCloseButton: true, onClose: clearGroupLoadError, children: groupLoadError })), _jsxs(Group, { gap: "xs", pb: "sm", children: [_jsx(Button, { variant: "subtle", onClick: expandAll, children: "Expand all" }), _jsx(Button, { variant: "subtle", onClick: collapseAll, children: "Collapse all" })] }), _jsx(ScrollArea, { style: { flex: 1 }, pb: "md", children: loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading permissions..." })] })) : (_jsx(PermissionTree, { node: annotatedTree, expandedNodes: expandedNodes, selectedNode: selectedNode, canEdit: canEdit, groups: groupSelectData, activeLevel: activeLevel, userSearchResults: userSearchResults, isSearchingUsers: isSearchingUsers, showUserSearch: showUserSearch, userSearchQuery: userSearchQuery, userSearchError: userSearchError, showGroupSearch: showGroupSearch, groupSearchQuery: groupSearchQuery, filteredGroups: filteredGroups, onToggle: toggleNode, onSelect: selectNode, onSetActiveLevel: setActiveLevel, onUpdatePermission: updateNodePermission, onSearchUsers: setUserSearchQuery, onGetUserMetadata: onGetUserMetadata, onToggleUserSearch: toggleUserSearch, onAddUser: handleAddUser, onRemoveUser: handleRemoveUser, onSearchGroups: setGroupSearchQuery, onToggleGroupSearch: setShowGroupSearch, onAddGroup: handleAddGroup, onRemoveGroup: handleRemoveGroup })) })] }) }));
+    return (_jsx(StagedChangesDrawer, { opened: opened, onClose: onClose, title: "Permissions", size: 700, isDirty: isDirty, isSaving: isSaving, canEdit: canEdit, saveLabel: "Save permissions", onSave: handleSave, onDiscard: handleDiscard, 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 edit permissions" })), 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 })), groupLoadError && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "orange", mb: "sm", title: "Warning", withCloseButton: true, onClose: clearGroupLoadError, children: groupLoadError })), _jsxs(Group, { gap: "xs", pb: "sm", children: [_jsx(Button, { variant: "subtle", onClick: expandAll, children: "Expand all" }), _jsx(Button, { variant: "subtle", onClick: collapseAll, children: "Collapse all" })] }), _jsx(ScrollArea, { style: { flex: 1 }, pb: "md", children: loading ? (_jsxs(Group, { justify: "center", py: "xl", children: [_jsx(Loader, { size: "md" }), _jsx(Text, { size: "sm", c: "dimmed", children: "Loading permissions..." })] })) : (_jsx(PermissionTree, { node: annotatedTree, expandedNodes: expandedNodes, selectedNode: selectedNode, canEdit: canEdit, groups: groupSelectData, activeLevel: activeLevel, userSearchResults: userSearchResults, isSearchingUsers: isSearchingUsers, showUserSearch: showUserSearch, userSearchQuery: userSearchQuery, userSearchError: userSearchError, showGroupSearch: showGroupSearch, groupSearchQuery: groupSearchQuery, filteredGroups: filteredGroups, onToggle: toggleNode, onSelect: selectNode, onSetActiveLevel: setActiveLevel, onUpdatePermission: updateNodePermission, onSearchUsers: setUserSearchQuery, onGetUserMetadata: onGetUserMetadata, onToggleUserSearch: toggleUserSearch, onAddUser: handleAddUser, onRemoveUser: handleRemoveUser, onSearchGroups: setGroupSearchQuery, onToggleGroupSearch: setShowGroupSearch, onAddGroup: handleAddGroup, onRemoveGroup: handleRemoveGroup })) })] }) }));
 };
 export { usePermissionTree } from './hooks/usePermissionTree.js';
 export { useGroupsAndUsers } from './hooks/useGroupsAndUsers.js';

package/dist/editor/preview-bridge.d.ts

@@ -49,6 +49,16 @@ export declare const isOpaqueOrigin: (origin: string) => boolean;
  * expected editor origin (same-origin unless `editorOrigin` is configured).
  */
 export declare const isTrustedEditorMessage: (event: MessageEvent, editorOrigin?: string) => boolean;
+/**
+ * Preview → editor, once the page listens for drafts: the editor answers with the current draft.
+ * `siteChrome` says the page renders the site's header and footer when its URL carries
+ * `chrome=1`, so the editor offers the toggle that adds it.
+ */
+export interface PreviewReadyMessage {
+    type: typeof CANOPY_PREVIEW_READY;
+    path: string;
+    siteChrome?: boolean;
+}
 export interface PreviewFocusMessage {
     type: typeof CANOPY_PREVIEW_FOCUS;
     entryPath: string;
@@ -93,6 +103,11 @@ export declare const useCanopyPreview: <T>(opts: {
     initialData: T;
     /** Editor origin to trust for preview messages. Defaults to this page's own origin. */
     editorOrigin?: string;
+    /**
+     * This page renders the site's header and footer when its URL carries `chrome=1`, so the editor
+     * offers a toggle for them; see `PreviewReadyMessage`.
+     */
+    siteChrome?: boolean;
 }) => {
     data: T;
     isLoading: PreviewLoadingState<T>;
@@ -106,6 +121,7 @@ export declare const useCanopyPreview: <T>(opts: {
  */
 export declare const usePreviewData: <T>(path: string, initialData: T, opts?: {
     editorOrigin?: string;
+    siteChrome?: boolean;
 }) => {
     data: T;
     isLoading: PreviewLoadingState<T>;

package/dist/editor/preview-bridge.js

@@ -73,7 +73,10 @@ export const useCanopyPreview = (opts) => {
     const resolvedPath = resolvePreviewPath(opts.path);
     const editorOrigin = opts.editorOrigin;
     const bridgeOpts = { editorOrigin };
-    const { data, isLoading } = usePreviewData(resolvedPath, opts.initialData, bridgeOpts);
+    const { data, isLoading } = usePreviewData(resolvedPath, opts.initialData, {
+        editorOrigin,
+        siteChrome: opts.siteChrome,
+    });
     const highlightEnabled = usePreviewHighlight(bridgeOpts);
     usePreviewFocusEmitter(resolvedPath, bridgeOpts);
     const fieldProps = createFieldProps();
@@ -107,6 +110,7 @@ export const usePreviewData = (path, initialData, opts) => {
     // Every key of the loading state is optional, so an empty object is a valid one.
     const [isLoading, setIsLoading] = useState({});
     const editorOrigin = opts?.editorOrigin;
+    const siteChrome = opts?.siteChrome === true;
     useEffect(() => {
         // Only listen when actually framed by an editor; a standalone page (including
         // one opened via window.open from a hostile site) must never accept drafts.
@@ -133,10 +137,15 @@ export const usePreviewData = (path, initialData, opts) => {
         // so the first postMessage from the parent may arrive before this listener is set up.
         const target = resolveMessageOrigin(editorOrigin);
         if (!isOpaqueOrigin(target)) {
-            window.parent.postMessage({ type: CANOPY_PREVIEW_READY, path }, target);
+            const ready = {
+                type: CANOPY_PREVIEW_READY,
+                path,
+                ...(siteChrome ? { siteChrome } : {}),
+            };
+            window.parent.postMessage(ready, target);
         }
         return () => window.removeEventListener('message', handler);
-    }, [path, editorOrigin]);
+    }, [path, editorOrigin, siteChrome]);
     return { data, isLoading };
 };
 /** React 18 warns about a layout effect in a server render, where no effect runs. */

package/dist/editor/preview-path.d.ts

@@ -1,8 +1,9 @@
 /**
  * Reduces a preview URL to what identifies the page, its path and query, with no origin,
- * fragment or trailing slash. The editor names a page by the `src` it built and the framed page
- * by its own location. An absolute `src`, or a host redirect that adds or drops a trailing slash,
- * spells the same page two ways, and the bridge must still match them.
+ * fragment, trailing slash or `chrome=1`. The editor names a page by the `src` it built and the
+ * framed page by its own location. An absolute `src`, a host redirect that adds or drops a
+ * trailing slash, or the site header and footer toggle, spells the same page two ways, and the
+ * bridge must still match them.
  * @internal Exported for tests.
  */
 export declare const normalizePreviewPath: (url: string) => string;
@@ -13,9 +14,15 @@ export interface PreviewMount {
     basePath?: string;
     previewPrefix?: string;
 }
+/**
+ * `src` asking for the site's header and footer, or `undefined` when it cannot. Only a page under
+ * the `previewPrefix` mount is a `createPreviewPage` route, which reads `chrome=1`; any other URL
+ * is a page of the site itself, which the editor leaves as it is.
+ */
+export declare const siteChromeSrc: (src: string, mount?: PreviewMount) => string | undefined;
 /**
  * The previewed page's path on the site, as the preview toolbar shows and copies it: without the
- * `previewPrefix` mount, the `branch` query the top bar already names, or a fragment. A relative
+ * `previewPrefix` mount, the `branch` query the top bar already names, `chrome=1`, or a fragment. A relative
  * URL stays relative. An absolute one keeps its origin, since it may be another site, unless an
  * absolute `previewPrefix` mount is what was taken out.
  */

package/dist/editor/preview-path.js

@@ -1,9 +1,27 @@
 import { isAbsoluteUrl, joinUrlPrefix, stripTrailingSlashes } from '../utils/url-prefix.js';
+/**
+ * The query part that asks a `createPreviewPage` route to render the site's header and footer
+ * (`canopycms-next`'s `layout` option). It changes how the page looks, not which page it is.
+ */
+const SITE_CHROME_PART = 'chrome=1';
+/**
+ * `search` without the parts `keep` refuses, as `?…`, or '' when none is left. Filtered as text:
+ * a URLSearchParams round trip would form-encode the rest (`flag` becomes `flag=`, `%20` `+`).
+ */
+const filterQuery = (search, keep) => {
+    const query = search
+        .slice(1)
+        .split('&')
+        .filter((part) => part !== '' && keep(part))
+        .join('&');
+    return query ? `?${query}` : '';
+};
 /**
  * Reduces a preview URL to what identifies the page, its path and query, with no origin,
- * fragment or trailing slash. The editor names a page by the `src` it built and the framed page
- * by its own location. An absolute `src`, or a host redirect that adds or drops a trailing slash,
- * spells the same page two ways, and the bridge must still match them.
+ * fragment, trailing slash or `chrome=1`. The editor names a page by the `src` it built and the
+ * framed page by its own location. An absolute `src`, a host redirect that adds or drops a
+ * trailing slash, or the site header and footer toggle, spells the same page two ways, and the
+ * bridge must still match them.
  * @internal Exported for tests.
  */
 export const normalizePreviewPath = (url) => {
@@ -14,27 +32,58 @@ export const normalizePreviewPath = (url) => {
     catch {
         return url;
     }
-    return `${stripTrailingSlashes(parsed.pathname) || '/'}${parsed.search}`;
+    const query = filterQuery(parsed.search, (part) => part !== SITE_CHROME_PART);
+    return `${stripTrailingSlashes(parsed.pathname) || '/'}${query}`;
 };
 /** Whether two preview URLs name the same page; see `normalizePreviewPath`. */
 export const isSamePreviewPath = (a, b) => normalizePreviewPath(a) === normalizePreviewPath(b);
-/** `url` with the `previewPrefix` mount taken out, so `/base/preview/posts/x` reads `/base/posts/x`. */
-const stripPreviewPrefix = (url, { basePath, previewPrefix }) => {
+/** The `previewPrefix` mount `url` sits under, and what follows it; `undefined` when not under one. */
+const splitPreviewPrefix = (url, { basePath, previewPrefix }) => {
     if (!previewPrefix || !stripTrailingSlashes(previewPrefix))
-        return url;
+        return undefined;
     const mount = stripTrailingSlashes(joinUrlPrefix(basePath, joinUrlPrefix(previewPrefix, '/')));
     if (!url.startsWith(mount))
-        return url;
+        return undefined;
     const rest = url.slice(mount.length);
-    if (rest !== '' && !/^[/?#]/.test(rest))
+    return rest === '' || /^[/?#]/.test(rest) ? { mount, rest } : undefined;
+};
+/** `url` with the `previewPrefix` mount taken out, so `/base/preview/posts/x` reads `/base/posts/x`. */
+const stripPreviewPrefix = (url, previewMount) => {
+    const split = splitPreviewPrefix(url, previewMount);
+    if (!split)
         return url;
+    const { mount, rest } = split;
     // An absolute prefix skips `basePath`, so the page under it has none either.
-    const base = isAbsoluteUrl(mount) ? '' : stripTrailingSlashes(joinUrlPrefix(basePath, '/'));
+    const base = isAbsoluteUrl(mount)
+        ? ''
+        : stripTrailingSlashes(joinUrlPrefix(previewMount.basePath, '/'));
     return rest.startsWith('/') ? `${base}${rest}` : `${base || '/'}${rest}`;
 };
+/**
+ * `src` asking for the site's header and footer, or `undefined` when it cannot. Only a page under
+ * the `previewPrefix` mount is a `createPreviewPage` route, which reads `chrome=1`; any other URL
+ * is a page of the site itself, which the editor leaves as it is.
+ */
+export const siteChromeSrc = (src, mount = {}) => {
+    if (!splitPreviewPrefix(src, mount))
+        return undefined;
+    const hashIndex = src.indexOf('#');
+    const beforeHash = hashIndex === -1 ? src : src.slice(0, hashIndex);
+    const hash = hashIndex === -1 ? '' : src.slice(hashIndex);
+    const queryIndex = beforeHash.indexOf('?');
+    if (queryIndex !== -1 &&
+        beforeHash
+            .slice(queryIndex + 1)
+            .split('&')
+            .includes(SITE_CHROME_PART)) {
+        return src;
+    }
+    const separator = queryIndex === -1 ? '?' : beforeHash.endsWith('?') ? '' : '&';
+    return `${beforeHash}${separator}${SITE_CHROME_PART}${hash}`;
+};
 /**
  * The previewed page's path on the site, as the preview toolbar shows and copies it: without the
- * `previewPrefix` mount, the `branch` query the top bar already names, or a fragment. A relative
+ * `previewPrefix` mount, the `branch` query the top bar already names, `chrome=1`, or a fragment. A relative
  * URL stays relative. An absolute one keeps its origin, since it may be another site, unless an
  * absolute `previewPrefix` mount is what was taken out.
  */
@@ -47,14 +96,8 @@ export const displayPreviewPath = (src, mount = {}) => {
     catch {
         return url;
     }
-    // Filtered as text: a URLSearchParams round trip would form-encode the query it keeps (`flag`
-    // becomes `flag=`, `%20` becomes `+`).
-    const query = parsed.search
-        .slice(1)
-        .split('&')
-        .filter((part) => part !== '' && part.split('=', 1)[0] !== 'branch')
-        .join('&');
-    const path = `${parsed.pathname}${query ? `?${query}` : ''}`;
+    const query = filterQuery(parsed.search, (part) => part !== SITE_CHROME_PART && part.split('=', 1)[0] !== 'branch');
+    const path = `${parsed.pathname}${query}`;
     if (!isAbsoluteUrl(url))
         return path;
     // `origin` is 'null' for a scheme the URL spec does not treat as special.

package/dist/editor/shell/ActivityRail.d.ts

@@ -1,6 +1,6 @@
 import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 export interface ActivityRailProps {
-    /** Rail buttons from the top: the monogram, then the activities. */
+    /** Rail buttons from the top: the activities. */
     top: ReactNode;
     /** Rail buttons pinned to the bottom, such as Settings. */
     bottom?: ReactNode;
@@ -22,8 +22,6 @@ export interface RailButtonProps extends Omit<ComponentPropsWithoutRef<'button'>
     icon: ReactNode;
     /** Highlights the button while its panel or drawer is open. */
     active?: boolean;
-    /** Tinted at rest, as the site monogram is. */
-    tinted?: boolean;
     /** Shown after the label in the tooltip, as the platform writes it ("⌘P"). */
     shortcut?: string;
     /** A count badge, hidden at zero; the label should say it too. */

package/dist/editor/shell/ActivityRail.js

@@ -75,11 +75,11 @@ export function ActivityRail({ top, bottom, account }) {
                 }, children: [top, _jsx("div", { style: { flex: 1 } }), bottom] }), account && _jsx(Stack, { pb: 8, children: account })] }));
 }
 /** A rail button: icon only, named by `label`, which its tooltip repeats on hover and focus. */
-export const RailButton = forwardRef(function RailButton({ railId, label, icon, active = false, tinted = false, shortcut, count = 0, countTestId, tooltipDisabled, disabledReason, onClick, ...rest }, ref) {
+export const RailButton = forwardRef(function RailButton({ railId, label, icon, active = false, shortcut, count = 0, countTestId, tooltipDisabled, disabledReason, onClick, ...rest }, ref) {
     const reasonId = useId();
     const button = (_jsxs(ActionIcon, { ref: ref, 
-        // Filled, not tinted, when active: a tint alone would show the state by colour, under 3:1.
-        variant: active ? 'filled' : tinted ? 'light' : 'subtle', color: active || tinted ? undefined : 'gray', size: "lg", radius: "md", "aria-label": label, ...rest, "aria-disabled": disabledReason ? true : rest['aria-disabled'], "aria-describedby": disabledReason ? reasonId : rest['aria-describedby'], "data-disabled": disabledReason ? true : undefined, onClick: disabledReason ? undefined : onClick, [RAIL_ITEM_ATTR]: railId, children: [icon, disabledReason && (_jsx(VisuallyHidden, { component: "span", id: reasonId, children: disabledReason }))] }));
+        // Filled when active: a tint alone would show the state by colour, under 3:1.
+        variant: active ? 'filled' : 'subtle', color: active ? undefined : 'gray', size: "lg", radius: "md", "aria-label": label, ...rest, "aria-disabled": disabledReason ? true : rest['aria-disabled'], "aria-describedby": disabledReason ? reasonId : rest['aria-describedby'], "data-disabled": disabledReason ? true : undefined, onClick: disabledReason ? undefined : onClick, [RAIL_ITEM_ATTR]: railId, children: [icon, disabledReason && (_jsx(VisuallyHidden, { component: "span", id: reasonId, children: disabledReason }))] }));
     return (_jsx(Tooltip, { label: disabledReason ?? (shortcut ? `${label} (${shortcut})` : label), position: "right", disabled: tooltipDisabled, children: _jsx(Indicator, { label: _jsx("span", { "aria-hidden": true, "data-testid": countTestId, children: count }), size: 16, offset: 4, withBorder: true, disabled: count === 0, styles: {
                 indicator: {
                     pointerEvents: 'none',

package/dist/editor/shell/EditorShell.d.ts

@@ -8,6 +8,21 @@ export interface EditorShellProps {
     /** Drawers, modals and palettes, each portalling itself into `<body>`. */
     overlays?: ReactNode;
 }
+/** The line between two shell regions, as under the top bar and a shown banner. */
+export declare const SHELL_REGION_BORDER = "1px solid var(--canopy-input-border)";
+/**
+ * Every resizable divider in the shell, the panel's and the panes', shows this many pixels wide.
+ * Its pointer target is wider, `DIVIDER_TARGET_PX`. A finger's reaches 6px past each side of the
+ * bar: under the panes' separator, the narrow window's overlay panel keeps its header's close
+ * button clear, as that header's top padding is 10px.
+ */
+export declare const DIVIDER_WIDTH_PX = 4;
+export declare const DIVIDER_TARGET_PX: {
+    readonly fine: 12;
+    readonly coarse: 16;
+};
+/** A divider's colour at rest; held, hovered, dragged or focused it takes `--canopy-focus-ring`. */
+export declare const DIVIDER_COLOR = "var(--canopy-input-border)";
 /**
  * The editor's window: a full-viewport grid of regions (top bar, banner, rail, panel, main,
  * overlays), portalled into `<body>` above the host page, whose chrome it hides and makes inert