canopycms 0.0.68-int.113 → 0.0.68-int.114

package/dist/editor/Editor.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, useRef } from 'react';
-import { ActionIcon, Alert, Box, Drawer, Group, Menu, Paper, Text } from '@mantine/core';
+import { ActionIcon, Alert, Box, Button, Drawer, Group, Menu, Paper, Skeleton, Stack, Text, } from '@mantine/core';
 import { IconChevronDown, IconChevronUp, IconDots, IconFolderPlus, IconPlus, } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
 const noop = () => { };
@@ -17,10 +17,11 @@ import { GroupManager } from './GroupManager.js';
 import { PermissionManager } from './PermissionManager.js';
 import { SystemHealthPanel } from './admin/SystemHealthPanel.js';
 // Import directly from helpers to avoid server-only code in authorization barrel
-import { isAdmin } from '../authorization/helpers.js';
+import { isAdmin, isPrivileged } from '../authorization/helpers.js';
 import { buildPreviewSrc, buildCollectionLabels, buildBreadcrumbSegments } from './editor-utils.js';
 import { useEditorLayout, useDraftManager, useEntryManager, useGroupManager, usePermissionManager, useCommentSystem, useBranchManager, useUserContext, useSchemaManager, } from './hooks/index.js';
 import { useBranchActions } from './hooks/useBranchActions.js';
+import { editorLayoutStorageKey } from './hooks/useEditorLayout.js';
 import { EntrySchemaUnavailableError } from './hooks/useEntryManager.js';
 import { useEntryLinkResolution } from './hooks/useEntryLinkResolution.js';
 import { useReferenceResolution } from './hooks/useReferenceResolution.js';
@@ -31,6 +32,7 @@ import { EntryCreateModal } from './components/EntryCreateModal.js';
 import { ConfirmDeleteModal } from './components/ConfirmDeleteModal.js';
 import { ReferencedByList, referencedDeleteMessage } from './components/ReferencedByList.js';
 import { NoEditPermissionNotice } from './components/NoEditPermissionNotice.js';
+import { ReadOnlyDraftNotice } from './components/ReadOnlyDraftNotice.js';
 import { UnavailableEntryNotice } from './components/UnavailableEntryNotice.js';
 import { unavailableSchemaRefs } from './unavailable-entry-type.js';
 import { EditorCrashBoundary } from './components/EditorCrashScreen.js';
@@ -38,6 +40,9 @@ import { CollectionEditor } from './schema-editor/index.js';
 import { AssetContextProvider, SiteMdxAllowContext, authenticatedAssetBase, useApiClient, } from './context/index.js';
 import { EntryLinkContext } from './fields/entry-link/index.js';
 import { MediaLibrary } from './media/MediaLibrary.js';
+import { removalAnchors, restoreRemoval } from './undo-removal.js';
+import { UndoToastMessage } from './components/UndoToastMessage.js';
+import { getNotificationDuration } from './utils/env.js';
 // Stable fallbacks, so reference resolution's memo and effect don't re-run on every render
 // while no entry is open.
 const EMPTY_SCHEMA = [];
@@ -76,11 +81,14 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
     const [previewError, setPreviewError] = useState(null);
     const apiClient = useApiClient();
     const { userContext } = useUserContext();
-    // The System Health panel is admin-only -- gate both the sidebar
-    // menu item and the modal mount on it, same pattern BranchManager.tsx uses
-    // for its own admin-only actions.
-    const showSystemHealth = isAdmin(userContext?.groups);
-    const { layout, setLayout, highlightEnabled, setHighlightEnabled, headerRef, headerHeight } = useEditorLayout();
+    // Admin surfaces (permissions, groups, system health, collection management and entry order,
+    // whose API routes all take the `admin` guard) render only for admins: each menu item, action
+    // and drawer mount is gated here. Until whoami answers, the user counts as no admin.
+    const userIsAdmin = isAdmin(userContext?.groups);
+    // Name lookups take the `privileged` guard (admins and reviewers); anyone else sees ids, and
+    // no lookup is sent that would only be refused.
+    const canResolveUserNames = isPrivileged(userContext?.groups);
+    const { layout, setLayout, highlightEnabled, setHighlightEnabled, sideSplitPercent, stackedSplitPercent, setSplitPercent, headerRef, headerHeight, } = useEditorLayout({ storageKey: editorLayoutStorageKey(basePath) });
     // Comments state (shared between useCommentSystem and useBranchManager)
     const [commentsForBranchSummaries, setCommentsForBranchSummaries] = useState([]);
     // 1. Branch manager (provides branchNameState, no dependencies)
@@ -136,7 +144,7 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
         setPreviewError(null);
     }, [currentEntry?.contentId]);
     // 3. Draft manager (depends on branchNameState, selectedPath from useEntryManager)
-    const { setDrafts, loadedValues, setLoadedValues, effectiveValue, modifiedCount, editedFiles, handleSave, handleDiscardDrafts, handleDiscardFileDraft, handleReload, isSelectedDirty, resolveUnsaved, fieldErrors, } = useDraftManager({
+    const { drafts, setDrafts, loadedValues, setLoadedValues, loadedValue, effectiveValue, modifiedCount, editedFiles, handleSave, handleDiscardDrafts, handleDiscardFileDraft, handleReload, isSelectedDirty, resolveUnsaved, fieldErrors, draftStorageFailed, } = useDraftManager({
         branchName: branchNameState,
         selectedPath,
         currentEntry,
@@ -150,6 +158,8 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
         onSaved: () => {
             void refreshEntries(branchNameState).catch((err) => console.error('Failed to refresh entries after save', err));
         },
+        // An Undo built on a discarded draft would put back an item the server's copy already has.
+        onDraftsReset: (contentId) => dismissUndoToasts(contentId),
     });
     // 4. Branch actions (depends on resolveUnsaved, setBranchName)
     const { handleBranchChange, confirmCreate: confirmCreateBranch, handleCreateBranch, confirmOpen: branchConfirmOpen, } = useBranchActions({
@@ -180,6 +190,92 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
         branchName: branchNameState,
         onSchemaChange: () => refreshEntries(branchNameState),
     });
+    // Read-only content shows the saved value, never a draft; a restored draft is kept, unseen,
+    // until it is discarded or the branch unlocks.
+    const contentReadOnly = branchContentLocked || currentEntry?.canEdit === false;
+    const displayValue = contentReadOnly ? loadedValue : effectiveValue;
+    // Read when an edit lands, which an upload or other async field work can do renders later.
+    const contentReadOnlyRef = useRef(contentReadOnly);
+    contentReadOnlyRef.current = contentReadOnly;
+    // Undo for a form Remove: a toast whose Undo puts the item back into the entry's draft as it
+    // is then, through a functional update, so edits made since are kept. It acts only on the
+    // branch and entry it was raised for, and its toast closes when either changes.
+    const loadedValuesRef = useRef(loadedValues);
+    loadedValuesRef.current = loadedValues;
+    const draftsRef = useRef(drafts);
+    draftsRef.current = drafts;
+    // Open Undo toasts, by id, with the entry each belongs to.
+    const undoToastsRef = useRef(new Map());
+    const nextUndoToastRef = useRef(0);
+    const dismissUndoToasts = (contentId) => {
+        undoToastsRef.current.forEach((entry, id) => {
+            if (contentId !== undefined && entry !== contentId)
+                return;
+            notifications.hide(id);
+            undoToastsRef.current.delete(id);
+        });
+    };
+    const handleFieldRemoved = (removal) => {
+        const contentId = currentEntry?.contentId;
+        if (!contentId || contentReadOnlyRef.current)
+            return;
+        const branch = branchNameState;
+        const fields = schema;
+        // Taken from the value this render shows, which the removal has not reached yet.
+        const anchored = {
+            ...removal,
+            anchors: displayValue ? removalAnchors(fields, displayValue, removal) : undefined,
+        };
+        nextUndoToastRef.current += 1;
+        const id = `canopy-undo-${nextUndoToastRef.current}`;
+        let used = false;
+        const undo = () => {
+            // A closing toast stays clickable while it animates out: act once, and only while open.
+            if (used)
+                return;
+            used = true;
+            const open = undoToastsRef.current.has(id);
+            notifications.hide(id);
+            undoToastsRef.current.delete(id);
+            if (!open) {
+                notifications.show({
+                    message: `Too late to undo removing ${removal.label}.`,
+                    color: 'yellow',
+                });
+                return;
+            }
+            if (currentBranchRef.current !== branch ||
+                currentContentIdRef.current !== contentId ||
+                contentReadOnlyRef.current) {
+                return;
+            }
+            const now = draftsRef.current[contentId] ?? loadedValuesRef.current[contentId];
+            if (!now || !restoreRemoval(fields, now, anchored)) {
+                notifications.show({
+                    message: `Couldn't undo removing ${removal.label}: that part of the entry has changed. Add it again if you still need it.`,
+                    color: 'yellow',
+                });
+                return;
+            }
+            setDrafts((prev) => {
+                const base = prev[contentId] ?? loadedValuesRef.current[contentId];
+                const restored = base ? restoreRemoval(fields, base, anchored) : undefined;
+                return restored ? { ...prev, [contentId]: restored } : prev;
+            });
+        };
+        undoToastsRef.current.set(id, contentId);
+        const toast = {
+            id,
+            message: (_jsx(UndoToastMessage, { label: removal.label, onUndo: undo, onHold: () => notifications.update({ ...toast, autoClose: false }), onRelease: () => notifications.update(toast) })),
+            autoClose: getNotificationDuration(8000),
+            withCloseButton: true,
+            onClose: () => undoToastsRef.current.delete(id),
+        };
+        notifications.show(toast);
+    };
+    useEffect(() => () => dismissUndoToasts(), [currentEntry?.contentId, branchNameState]);
+    // Only once the branch has answered, so the fail-closed lock while it loads raises no notice.
+    const hiddenDraftNotice = contentReadOnly && currentBranch !== undefined && !!currentEntry && isSelectedDirty();
     const collectionLabels = useMemo(() => buildCollectionLabels(activeCollections), [activeCollections]);
     const schema = currentEntry?.schema ?? EMPTY_SCHEMA;
     // Gated on `loadedValues[contentId]` (not `drafts[contentId]`) so a
@@ -198,6 +294,18 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
     // that same id. Qualifying the key lets both loads coexist; the branch check
     // at settle time decides which one is allowed to write.
     const loadingEntryIdsRef = useRef(new Set());
+    // The entry (keyed like `loadingEntryIdsRef`) whose last read failed, and Retry's bump that
+    // runs the load effect below again.
+    const [loadFailedKey, setLoadFailedKey] = useState(null);
+    const [loadAttempt, setLoadAttempt] = useState(0);
+    // Reset during render, not in an effect, so returning to a failed entry never paints its Alert
+    // for the frame before its load starts again.
+    const selectionKey = `${branchNameState}:${currentEntry?.contentId ?? ''}`;
+    const [loadFailedSelection, setLoadFailedSelection] = useState(selectionKey);
+    if (loadFailedSelection !== selectionKey) {
+        setLoadFailedSelection(selectionKey);
+        setLoadFailedKey(null);
+    }
     // Entries (keyed like `loadingEntryIdsRef`) whose read the API refused as SCHEMA_UNAVAILABLE.
     // The ref stops the load effect retrying them; the state re-renders the notice.
     const schemaUnavailableRef = useRef(new Set());
@@ -261,6 +369,7 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                 return;
             loadingEntryIdsRef.current.add(inFlightKey);
             setEntriesLoading(true);
+            setLoadFailedKey((failed) => (failed === inFlightKey ? null : failed));
             try {
                 const loaded = await loadEntry(currentEntry);
                 // A branch switch during the await makes this response another
@@ -307,10 +416,11 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
             // different branch).
             if (currentBranchRef.current === requestBranch && currentContentIdRef.current === contentId) {
                 notifications.show({ message: 'Failed to load entry', color: 'red' });
+                setLoadFailedKey(inFlightKey);
             }
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps -- stable setters, run only on entry/path/branch/loadedValues change
-    }, [currentEntry, loadedValues, selectedPath, branchNameState]);
+    }, [currentEntry, loadedValues, selectedPath, branchNameState, loadAttempt]);
     const handleOpenCollectionEditor = async (collection, parentPath) => {
         if (collection) {
             try {
@@ -601,11 +711,15 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                 onAdd: canAddEntry
                     ? () => (onCreateEntry ? onCreateEntry(node.path) : handleCreateEntry(node.path))
                     : undefined,
-                onEdit: node.type === 'collection' ? () => handleOpenCollectionEditor(node) : undefined,
-                onAddSubCollection: node.type === 'collection'
+                onEdit: userIsAdmin && node.type === 'collection'
+                    ? () => handleOpenCollectionEditor(node)
+                    : undefined,
+                onAddSubCollection: userIsAdmin && node.type === 'collection'
                     ? () => handleOpenCollectionEditor(null, node.path)
                     : undefined,
-                onDelete: node.type === 'collection' ? () => handleDeleteCollection(node.path) : undefined,
+                onDelete: userIsAdmin && node.type === 'collection'
+                    ? () => handleDeleteCollection(node.path)
+                    : undefined,
             };
         };
         return activeCollections.map((node) => build(node));
@@ -618,6 +732,7 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
         contentRoot,
         currentBranch,
         schemaUnavailableKeys,
+        userIsAdmin,
     ]);
     // Tree expansion state - persists across drawer close/open
     const treeExpandedStateRef = useRef({});
@@ -644,12 +759,12 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
     // Resolved here, outside the form and its per-field crash boundaries, and during render, so
     // the preview never receives a bare reference id: a reference is its target or `null`.
     const { resolvedValue: previewValue, loadingState: previewLoadingState } = useReferenceResolution({
-        value: effectiveValue ?? EMPTY_VALUE,
+        value: displayValue ?? EMPTY_VALUE,
         fields: schema,
         branch: branchNameState,
         entryKey: currentEntry?.contentId,
     });
-    const previewFrameData = useMemo(() => (effectiveValue ? resolveEntryLinks(previewValue) : effectiveValue), [previewValue, effectiveValue, resolveEntryLinks]);
+    const previewFrameData = useMemo(() => (displayValue ? resolveEntryLinks(previewValue) : displayValue), [previewValue, displayValue, resolveEntryLinks]);
     // Entry link context for the InsertEntryLink toolbar button
     const entryLinkContextValue = useMemo(() => ({
         entries: entriesState.map((e) => ({
@@ -670,7 +785,7 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
         src: currentEntry?.previewSrc,
         highlightEnabled,
         fields: schema,
-        data: effectiveValue,
+        data: displayValue,
     });
     // An unavailable entry previews nothing: the site cannot read it, and a stored draft would
     // otherwise mount the frame at a page that answers not-found.
@@ -697,7 +812,7 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
     const breadcrumbSegments = useMemo(() => buildBreadcrumbSegments(currentEntry, collectionLabels), [collectionLabels, currentEntry]);
     return (_jsx(CanopyCMSProvider, { ...(themeOptions ?? {}), children: _jsx(AssetContextProvider, { basePath: basePath, children: _jsxs(Box, { bg: "gray.0", style: { minHeight: '100vh', width: '100%' }, children: [_jsx(EditorHeader, { ref: headerRef, siteTitle: siteTitle, siteSubtitle: siteSubtitle, headerTitle: headerTitle, currentEntry: currentEntry, branchName: branchNameState, operatingMode: operatingMode, branchStatus: currentBranch?.status, busy: busy, breadcrumbSegments: breadcrumbSegments, editedFiles: editedFiles, modifiedCount: modifiedCount, unresolvedCommentCount: comments.filter((t) => !t.resolved).length, comments: comments, 
                         // A draft kept for an unavailable entry stays in storage but cannot be saved.
-                        hasUnsavedChanges: !currentEntryUnavailable && isSelectedDirty(), userContext: userContext, branchCreatedBy: currentBranch?.createdBy, branchAccess: currentBranch?.access, 
+                        hasUnsavedChanges: !currentEntryUnavailable && !contentReadOnly && isSelectedDirty(), draftStorageFailed: draftStorageFailed, userContext: userContext, branchCreatedBy: currentBranch?.createdBy, branchAccess: currentBranch?.access, 
                         // Fail-closed for the same reason branchContentLocked above is:
                         // isProtected/writeBlocked gate real actions in EditorHeader (hiding
                         // Submit, disabling Save), so a missing wire value must read as
@@ -729,25 +844,32 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                                 height: `calc(100vh - ${headerHeight + footerHeight}px)`,
                                 minHeight: 0,
                                 position: 'relative',
-                            }, children: [_jsx(Box, { style: { flex: 1, minHeight: 0, height: '100%', width: '100%' }, children: _jsx(EditorPanes, { layout: layout, onLayoutChange: (next) => setLayout(next), preview: renderPreview && currentEntry && !currentEntryUnavailable
-                                            ? renderPreview(currentEntry, effectiveValue)
+                            }, children: [_jsx(Box, { style: { flex: 1, minHeight: 0, height: '100%', width: '100%' }, children: _jsx(EditorPanes, { layout: layout, onLayoutChange: (next) => setLayout(next), sideSplitPercent: sideSplitPercent, stackedSplitPercent: stackedSplitPercent, onSplitPercentChange: setSplitPercent, preview: renderPreview && currentEntry && !currentEntryUnavailable
+                                            ? renderPreview(currentEntry, displayValue)
                                             : defaultPreview, form: !currentEntry ? (_jsx(CenteredMessage, { children: !branchNameState && busy
                                                 ? 'Setting up your branch workspace…'
                                                 : entriesInitializing
                                                     ? 'Loading content…'
-                                                    : 'Select an item to start editing.' })) : currentEntryUnavailable ? (_jsx(UnavailableEntryNotice, { schemaRefs: currentEntry.unavailable ? [currentEntry.unavailable.schemaRef] : [] })) : currentEntry.canEdit === false ? (_jsx(NoEditPermissionNotice, { entryPath: currentEntry.path })) : schema.length > 0 && effectiveValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsx(SiteMdxAllowContext.Provider, { value: mdxAllow, children: _jsx(FormRenderer, { fields: schema, value: effectiveValue, onChange: (next) => {
-                                                        const contentId = currentEntry?.contentId;
-                                                        if (contentId) {
-                                                            setDrafts((prev) => ({ ...prev, [contentId]: next }));
-                                                        }
-                                                    }, customRenderers: customRenderers, branch: branchNameState, comments: comments, currentEntryPath: selectedPath, currentUserId: currentUser, canResolve: canResolveComments, focusedFieldPath: focusedFieldPath, highlightThreadId: highlightThreadId, onAddComment: handleAddComment, onResolveThread: handleResolveThread, fieldErrors: fieldErrors, format: currentEntry.format, conflictNotice: !!(currentEntry?.contentId &&
-                                                        currentBranch?.conflictFiles?.includes(currentEntry.contentId)) }) }) })) : (_jsx(CenteredMessage, { children: "No fields to edit." })) }) }), _jsx(EditorSidebar, { layout: layout, highlightEnabled: highlightEnabled, previewMarksNothing: previewMarksNothing, previewInexactMarks: previewInexactMarks, sidebarWidth: sidebarWidth, headerHeight: headerHeight, footerHeight: footerHeight, onLayoutChange: setLayout, onHighlightToggle: () => {
+                                                    : 'Select an item to start editing.' })) : currentEntryUnavailable ? (_jsx(UnavailableEntryNotice, { schemaRefs: currentEntry.unavailable ? [currentEntry.unavailable.schemaRef] : [] })) : currentEntry.canEdit === false ? (_jsx(NoEditPermissionNotice, { entryPath: currentEntry.path })) : schema.length > 0 && displayValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsxs(SiteMdxAllowContext.Provider, { value: mdxAllow, children: [hiddenDraftNotice && (_jsx(ReadOnlyDraftNotice, { permanentlyReadOnly: (currentBranch?.isProtected ?? true) ||
+                                                            currentBranch?.status === 'archived', onDiscard: handleDiscardFileDraft })), _jsx(FormRenderer, { fields: schema, value: displayValue, readOnly: contentReadOnly, onRemoved: handleFieldRemoved, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined, 
+                                                        // The one writer of drafts. Read-only content gets none, whatever a
+                                                        // field emits (MDXEditor's mount-time normalisation included).
+                                                        onChange: (next) => {
+                                                            const contentId = currentEntry?.contentId;
+                                                            if (contentId && !contentReadOnlyRef.current) {
+                                                                setDrafts((prev) => ({ ...prev, [contentId]: next }));
+                                                            }
+                                                        }, customRenderers: customRenderers, branch: branchNameState, comments: comments, currentEntryPath: selectedPath, currentUserId: currentUser, canResolve: canResolveComments, focusedFieldPath: focusedFieldPath, highlightThreadId: highlightThreadId, onAddComment: handleAddComment, onResolveThread: handleResolveThread, fieldErrors: fieldErrors, format: currentEntry.format, conflictNotice: !!(currentEntry?.contentId &&
+                                                            currentBranch?.conflictFiles?.includes(currentEntry.contentId)) })] }) })) : schema.length === 0 ? (_jsx(CenteredMessage, { children: "No fields to edit." })) : loadFailedKey !== `${branchNameState}:${currentEntry.contentId}` ? (_jsx(Stack, { gap: "lg", p: "md", "data-testid": "entry-loading-skeleton", children: [0, 1, 2].map((row) => (_jsxs(Stack, { gap: 6, children: [_jsx(Skeleton, { h: 12, w: 120 }), _jsx(Skeleton, { h: 36 })] }, row))) })) : (_jsx(Alert, { color: "red", variant: "light", m: "md", title: "This entry couldn't be loaded.", "data-testid": "entry-load-failed", children: _jsx(Button, { variant: "default", onClick: () => {
+                                                    setLoadFailedKey(null);
+                                                    setLoadAttempt((attempt) => attempt + 1);
+                                                }, children: "Retry" }) })) }) }), _jsx(EditorSidebar, { layout: layout, highlightEnabled: highlightEnabled, previewMarksNothing: previewMarksNothing, previewInexactMarks: previewInexactMarks, sidebarWidth: sidebarWidth, headerHeight: headerHeight, footerHeight: footerHeight, onLayoutChange: setLayout, onHighlightToggle: () => {
                                         setHighlightEnabled(!highlightEnabled);
                                         clearPreviewMarks();
-                                    }, onPermissionManagerOpen: () => setPermissionManagerOpen(true), onGroupManagerOpen: () => setGroupManagerOpen(true), onMediaLibraryOpen: () => setMediaLibraryOpen(true), onSystemHealthOpen: showSystemHealth ? () => setSystemHealthOpen(true) : undefined, AccountComponent: AccountComponent, onAccountClick: onAccountClick, onLogoutClick: onLogoutClick })] }) }), _jsx(EditorFooter, {}), _jsxs(Drawer.Root, { opened: navigatorOpen, onClose: () => setNavigatorOpen(false), position: "left", size: 360, children: [_jsx(Drawer.Overlay, { blur: 2 }), _jsxs(Drawer.Content, { children: [_jsxs(Drawer.Header, { children: [_jsx(Drawer.Title, { children: "Content" }), _jsxs(Group, { gap: "xs", children: [navCollections &&
+                                    }, onPermissionManagerOpen: userIsAdmin ? () => setPermissionManagerOpen(true) : undefined, onGroupManagerOpen: userIsAdmin ? () => setGroupManagerOpen(true) : undefined, onMediaLibraryOpen: () => setMediaLibraryOpen(true), onSystemHealthOpen: userIsAdmin ? () => setSystemHealthOpen(true) : undefined, AccountComponent: AccountComponent, onAccountClick: onAccountClick, onLogoutClick: onLogoutClick })] }) }), _jsx(EditorFooter, {}), _jsxs(Drawer.Root, { opened: navigatorOpen, onClose: () => setNavigatorOpen(false), position: "left", size: 360, children: [_jsx(Drawer.Overlay, { blur: 2 }), _jsxs(Drawer.Content, { children: [_jsxs(Drawer.Header, { children: [_jsx(Drawer.Title, { children: "Content" }), _jsxs(Group, { gap: "xs", children: [navCollections &&
                                                         navCollections.length > 0 &&
                                                         !branchContentLocked &&
-                                                        (navCollections[0].onAdd || navCollections[0].onAddSubCollection) && (_jsxs(Menu, { shadow: "md", width: 200, withinPortal: true, position: "bottom-end", children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", "aria-label": "Content actions", children: _jsx(IconDots, { size: 16 }) }) }), _jsxs(Menu.Dropdown, { children: [navCollections[0].onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: () => navCollections[0].onAdd?.(), children: "Add Entry" })), navCollections[0].onAddSubCollection && (_jsx(Menu.Item, { leftSection: _jsx(IconFolderPlus, { size: 14 }), onClick: () => navCollections[0].onAddSubCollection?.(), children: "Add Collection" }))] })] })), _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", onClick: handleCollapseAll, title: "Collapse all folders", "aria-label": "Collapse all folders", children: _jsx(IconChevronUp, { size: 16 }) }), _jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", onClick: handleExpandAll, title: "Expand all folders", "aria-label": "Expand all folders", children: _jsx(IconChevronDown, { size: 16 }) }), _jsx(Drawer.CloseButton, {})] })] }), _jsx(Drawer.Body, { p: 0, children: _jsx(Box, { px: "md", children: _jsx(EntryNavigator, { collections: navCollections, items: navCollections
+                                                        (navCollections[0].onAdd || navCollections[0].onAddSubCollection) && (_jsxs(Menu, { shadow: "md", width: 200, withinPortal: true, position: "bottom-end", children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": "Content actions", children: _jsx(IconDots, { size: 16 }) }) }), _jsxs(Menu.Dropdown, { children: [navCollections[0].onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: () => navCollections[0].onAdd?.(), children: "Add Entry" })), navCollections[0].onAddSubCollection && (_jsx(Menu.Item, { leftSection: _jsx(IconFolderPlus, { size: 14 }), onClick: () => navCollections[0].onAddSubCollection?.(), children: "Add Collection" }))] })] })), _jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: handleCollapseAll, title: "Collapse all folders", "aria-label": "Collapse all folders", children: _jsx(IconChevronUp, { size: 16 }) }), _jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: handleExpandAll, title: "Expand all folders", "aria-label": "Expand all folders", children: _jsx(IconChevronDown, { size: 16 }) }), _jsx(Drawer.CloseButton, {})] })] }), _jsx(Drawer.Body, { p: 0, children: _jsx(Box, { px: "md", children: _jsx(EntryNavigator, { collections: navCollections, items: navCollections
                                                     ? undefined
                                                     : entriesState.map((e) => ({
                                                         path: e.path,
@@ -756,7 +878,7 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                                                     })), selectedPath: selectedPath, onSelect: (id) => {
                                                     setSelectedPath(id);
                                                     setNavigatorOpen(false);
-                                                }, onTreeControllerReady: handleTreeControllerReady, expandedStateRef: treeExpandedStateRef, onExpandedStateChange: handleExpandedStateChange, onDeleteEntry: handleDeleteEntry, onRenameEntry: handleRenameEntry, onReorderEntry: handleReorderEntry, hiddenRootPath: hiddenRootPath, loading: entriesInitializing, readOnly: branchContentLocked }) }) })] })] }), _jsx(BranchesDrawer, { opened: branchManagerOpen, onClose: () => setBranchManagerOpen(false), confirmOpen: branchConfirmOpen, children: _jsx(BranchManager, { branches: branchSummaries, mode: operatingMode, user: userContext, onSelect: async (name) => {
+                                                }, onTreeControllerReady: handleTreeControllerReady, expandedStateRef: treeExpandedStateRef, onExpandedStateChange: handleExpandedStateChange, onDeleteEntry: handleDeleteEntry, onRenameEntry: handleRenameEntry, onReorderEntry: userIsAdmin ? handleReorderEntry : undefined, hiddenRootPath: hiddenRootPath, loading: entriesInitializing, readOnly: branchContentLocked }) }) })] })] }), _jsx(BranchesDrawer, { opened: branchManagerOpen, onClose: () => setBranchManagerOpen(false), confirmOpen: branchConfirmOpen, children: _jsx(BranchManager, { branches: branchSummaries, mode: operatingMode, user: userContext, onSelect: async (name) => {
                                 try {
                                     await handleBranchChange(name);
                                     setBranchManagerOpen(false);
@@ -773,9 +895,9 @@ const EditorContent = ({ entries, title, subtitle, siteTitle = title, siteSubtit
                                 handleRequestChanges(name).catch((err) => console.error(err));
                             }, onDelete: (name) => {
                                 handleDelete(name).catch((err) => console.error(err));
-                            }, onClose: () => setBranchManagerOpen(false), comments: comments, currentUserId: currentUser, canResolve: canResolveComments, onAddComment: handleAddComment, onResolveThread: handleResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: handleGetUserMetadata }) }), commentsPanelOpen && branchNameState && (_jsx(CommentsPanel, { branchName: branchNameState, comments: comments, canResolve: true, onAddComment: handleAddComment, onResolveThread: handleResolveThread, onClose: () => setCommentsPanelOpen(false), onJumpToField: handleJumpToField, onGetUserMetadata: handleGetUserMetadata, onJumpToEntry: handleJumpToEntry, onJumpToBranch: handleJumpToBranch })), _jsx(GroupManager, { opened: groupManagerOpen, onClose: () => setGroupManagerOpen(false), internalGroups: groupsData, loading: groupsLoading, canEdit: true, onSave: handleSaveGroups, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onSearchExternalGroups: handleSearchExternalGroups }), _jsx(PermissionManager, { opened: permissionManagerOpen, onClose: () => setPermissionManagerOpen(false), collections: activeCollections, contentRoot: contentRoot, permissions: permissionsData, loading: permissionsLoading, canEdit: true, onSave: handleSavePermissions, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onListGroups: handleListGroups }), showSystemHealth && (_jsx(SystemHealthPanel, { opened: systemHealthOpen, onClose: () => setSystemHealthOpen(false) })), _jsx(MediaLibrary, { opened: mediaLibraryOpen, onClose: () => setMediaLibraryOpen(false), mode: "manage" }), _jsx(CollectionEditor, { isOpen: collectionEditorOpen, editingCollection: editingCollection, parentPath: collectionEditorParentPath, availableSchemas: availableSchemas, onSave: handleCollectionSave, onAddEntryType: editingCollection ? (path, entryType) => addEntryType(path, entryType) : undefined, onUpdateEntryType: editingCollection
+                            }, onClose: () => setBranchManagerOpen(false), comments: comments, currentUserId: currentUser, canResolve: canResolveComments, onAddComment: handleAddComment, onResolveThread: handleResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined }) }), commentsPanelOpen && branchNameState && (_jsx(CommentsPanel, { branchName: branchNameState, comments: comments, canResolve: true, onAddComment: handleAddComment, onResolveThread: handleResolveThread, onClose: () => setCommentsPanelOpen(false), onJumpToField: handleJumpToField, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined, onJumpToEntry: handleJumpToEntry, onJumpToBranch: handleJumpToBranch })), userIsAdmin && (_jsx(GroupManager, { opened: groupManagerOpen, onClose: () => setGroupManagerOpen(false), internalGroups: groupsData, loading: groupsLoading, canEdit: userIsAdmin, onSave: handleSaveGroups, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onSearchExternalGroups: handleSearchExternalGroups })), userIsAdmin && (_jsx(PermissionManager, { opened: permissionManagerOpen, onClose: () => setPermissionManagerOpen(false), collections: activeCollections, contentRoot: contentRoot, permissions: permissionsData, loading: permissionsLoading, canEdit: userIsAdmin, onSave: handleSavePermissions, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onListGroups: handleListGroups })), userIsAdmin && (_jsx(SystemHealthPanel, { opened: systemHealthOpen, onClose: () => setSystemHealthOpen(false) })), _jsx(MediaLibrary, { opened: mediaLibraryOpen, onClose: () => setMediaLibraryOpen(false), mode: "manage" }), userIsAdmin && (_jsx(CollectionEditor, { isOpen: collectionEditorOpen, editingCollection: editingCollection, parentPath: collectionEditorParentPath, availableSchemas: availableSchemas, onSave: handleCollectionSave, onAddEntryType: editingCollection ? (path, entryType) => addEntryType(path, entryType) : undefined, onUpdateEntryType: editingCollection
                             ? (path, name, updates) => updateEntryType(path, name, updates)
-                            : undefined, onRemoveEntryType: editingCollection ? (path, name) => removeEntryType(path, name) : undefined, onClose: handleCloseCollectionEditor, isSaving: schemaLoading, error: collectionEditorError }), renamingEntry && (_jsx(RenameEntryModal, { isOpen: renameModalOpen, entryLabel: renamingEntry.label, currentSlug: renamingEntry.slug || '', onSave: handleRenameSubmit, onClose: () => {
+                            : undefined, onRemoveEntryType: editingCollection ? (path, name) => removeEntryType(path, name) : undefined, onClose: handleCloseCollectionEditor, isSaving: schemaLoading, error: collectionEditorError })), renamingEntry && (_jsx(RenameEntryModal, { isOpen: renameModalOpen, entryLabel: renamingEntry.label, currentSlug: renamingEntry.slug || '', onSave: handleRenameSubmit, onClose: () => {
                             setRenameModalOpen(false);
                             setRenamingEntry(null);
                             setRenameModalError(null);

package/dist/editor/EditorAuthGate.js

@@ -159,9 +159,9 @@ function RevalidateOnReauth({ reauthCount }) {
     return null;
 }
 function RetryNotice(props) {
-    return (_jsx(Alert, { color: "red", title: props.title, maw: 480, "data-testid": "canopy-auth-error", children: _jsxs(Stack, { gap: "xs", align: "flex-start", children: [_jsx(Text, { size: "sm", children: props.error }), _jsx(Button, { size: "xs", variant: "light", onClick: props.onRetry, children: "Retry" })] }) }));
+    return (_jsx(Alert, { color: "red", title: props.title, maw: 480, "data-testid": "canopy-auth-error", children: _jsxs(Stack, { gap: "xs", align: "flex-start", children: [_jsx(Text, { size: "sm", children: props.error }), _jsx(Button, { variant: "light", onClick: props.onRetry, children: "Retry" })] }) }));
 }
 /** Re-checks rather than reloading: in the overlay, a reload would discard the unsaved edits. */
 function DefaultSignedOutNotice({ onSignedIn, sessionRejected }) {
-    return (_jsx(Paper, { withBorder: true, p: "xl", radius: "md", maw: 420, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Title, { order: 3, children: "Sign in required" }), _jsx(Text, { size: "sm", children: "You are not signed in to the CMS. Sign in through this site's auth provider, then continue." }), sessionRejected && (_jsx(Text, { size: "sm", c: "red", children: "Still not signed in." })), _jsx(Button, { onClick: onSignedIn, children: "Continue" })] }) }));
+    return (_jsx(Paper, { withBorder: true, p: "xl", maw: 420, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Title, { order: 3, children: "Sign in required" }), _jsx(Text, { size: "sm", children: "You are not signed in to the CMS. Sign in through this site's auth provider, then continue." }), sessionRejected && (_jsx(Text, { size: "sm", c: "red", children: "Still not signed in." })), _jsx(Button, { size: "sm", onClick: onSignedIn, children: "Continue" })] }) }));
 }

package/dist/editor/EditorPanes.d.ts

@@ -1,8 +1,18 @@
 import React from 'react';
 export type PaneLayout = 'side' | 'stacked';
+export declare const SPLIT_PERCENT_MIN = 15;
+export declare const SPLIT_PERCENT_MAX = 85;
+export declare const DEFAULT_SIDE_SPLIT_PERCENT = 52;
+export declare const DEFAULT_STACKED_SPLIT_PERCENT = 58;
 export interface EditorPanesProps {
     layout?: PaneLayout;
     onLayoutChange?: (layout: PaneLayout) => void;
+    /** Primary-pane size (percent) in the side layout; follows this prop when it changes. */
+    sideSplitPercent?: number;
+    /** Primary-pane size (percent) in the stacked layout; follows this prop when it changes. */
+    stackedSplitPercent?: number;
+    /** Called once per drag, when it ends, with the clamped percent; live dragging never calls it. */
+    onSplitPercentChange?: (layout: PaneLayout, percent: number) => void;
     preview?: React.ReactNode;
     form?: React.ReactNode;
 }

package/dist/editor/EditorPanes.js

@@ -3,17 +3,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState, useEffect } from 'react';
 import { Box, Paper, rem } from '@mantine/core';
 import SplitPane from 'react-split-pane';
-export const EditorPanes = ({ layout: layoutProp = 'side', onLayoutChange: _, preview, form, }) => {
+export const SPLIT_PERCENT_MIN = 15;
+export const SPLIT_PERCENT_MAX = 85;
+export const DEFAULT_SIDE_SPLIT_PERCENT = 52;
+export const DEFAULT_STACKED_SPLIT_PERCENT = 58;
+export const EditorPanes = ({ layout: layoutProp = 'side', onLayoutChange: _, sideSplitPercent = DEFAULT_SIDE_SPLIT_PERCENT, stackedSplitPercent = DEFAULT_STACKED_SPLIT_PERCENT, onSplitPercentChange, preview, form, }) => {
     const TypedSplitPane = SplitPane;
     const splitContainerRef = useRef(null);
     const [layout, setLayout] = useState(layoutProp);
-    const [sidePrimarySize, setSidePrimarySize] = useState(52);
-    const [stackedPrimarySize, setStackedPrimarySize] = useState(58);
+    // Live drag state: the props change only when a drag ends or stored prefs load, so dragging
+    // never writes storage.
+    const [sidePrimarySize, setSidePrimarySize] = useState(sideSplitPercent);
+    const [stackedPrimarySize, setStackedPrimarySize] = useState(stackedSplitPercent);
     // Turn off iframe/pane pointer events while dragging so the gutter keeps receiving mouse events.
     const [isDragging, setIsDragging] = useState(false);
+    // The last percent a drag produced. `onDragFinished` cannot supply it: with `size` controlled,
+    // react-split-pane hands back that prop's string ("37%"), a click with no movement included.
+    const dragPercentRef = useRef(undefined);
     useEffect(() => {
         setLayout(layoutProp);
     }, [layoutProp]);
+    useEffect(() => {
+        setSidePrimarySize(sideSplitPercent);
+    }, [sideSplitPercent]);
+    useEffect(() => {
+        setStackedPrimarySize(stackedSplitPercent);
+    }, [stackedSplitPercent]);
     const direction = layout === 'side' ? 'vertical' : 'horizontal';
     const primarySize = useMemo(() => (layout === 'side' ? sidePrimarySize : stackedPrimarySize), [layout, sidePrimarySize, stackedPrimarySize]);
     const resizerStyle = useMemo(() => ({
@@ -36,15 +51,16 @@ export const EditorPanes = ({ layout: layoutProp = 'side', onLayoutChange: _, pr
             ? (splitContainerRef.current?.clientWidth ?? 0)
             : (splitContainerRef.current?.clientHeight ?? 0);
         // Guard: ensure valid dimensions before calculating
-        if (!total || total <= 0 || nextPixels <= 0)
-            return;
-        const percent = Math.min(85, Math.max(15, (nextPixels / total) * 100));
+        if (!total || total <= 0 || !Number.isFinite(nextPixels) || nextPixels <= 0)
+            return undefined;
+        const percent = Math.min(SPLIT_PERCENT_MAX, Math.max(SPLIT_PERCENT_MIN, (nextPixels / total) * 100));
         if (nextLayout === 'side') {
             setSidePrimarySize(percent);
         }
         else {
             setStackedPrimarySize(percent);
         }
+        return percent;
     };
     return (_jsx(Box, { h: "100%", style: { minHeight: '70vh' }, children: _jsx(Paper, { radius: 0, shadow: "xs", withBorder: true, style: {
                 display: 'flex',
@@ -53,8 +69,16 @@ export const EditorPanes = ({ layout: layoutProp = 'side', onLayoutChange: _, pr
                 overflow: 'hidden',
                 flexDirection: layout === 'side' ? 'row' : 'column',
                 width: '100%',
-            }, children: _jsx(Box, { ref: splitContainerRef, style: { display: 'flex', flex: 1, minHeight: 0, width: '100%' }, children: _jsxs(TypedSplitPane, { split: direction, minSize: 120, size: `${primarySize}%`, allowResize: true, onChange: (next) => updateSizeFromPixels(next, layout), onDragStarted: () => setIsDragging(true), onDragFinished: (next) => {
-                        updateSizeFromPixels(next, layout);
+            }, children: _jsx(Box, { ref: splitContainerRef, style: { display: 'flex', flex: 1, minHeight: 0, width: '100%' }, children: _jsxs(TypedSplitPane, { split: direction, minSize: 120, size: `${primarySize}%`, allowResize: true, onChange: (next) => {
+                        dragPercentRef.current = updateSizeFromPixels(next, layout) ?? dragPercentRef.current;
+                    }, onDragStarted: () => {
+                        dragPercentRef.current = undefined;
+                        setIsDragging(true);
+                    }, onDragFinished: () => {
+                        const percent = dragPercentRef.current;
+                        dragPercentRef.current = undefined;
+                        if (percent !== undefined)
+                            onSplitPercentChange?.(layout, percent);
                         setIsDragging(false);
                     }, style: {
                         position: 'relative',

package/dist/editor/FormRenderer.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { ContentFormat, EntrySchema, FieldConfig } from '../config/index.js';
 import type { CommentThread } from '../comment-store.js';
+import type { UserSearchResult } from '../auth/types.js';
+import type { FieldRemoval } from './undo-removal.js';
 export type FormValue = Record<string, unknown>;
 export interface CustomFieldRenderProps {
     field: FieldConfig;
@@ -8,6 +10,8 @@ export interface CustomFieldRenderProps {
     onChange: (v: unknown) => void;
     path: Array<string | number>;
     id: string;
+    /** The branch is locked (protected, or in review): show the value; `onChange` is ignored. */
+    readOnly: boolean;
 }
 export type CustomFieldRenderers = Record<string, (props: CustomFieldRenderProps) => React.ReactNode>;
 export interface FormRendererProps {
@@ -35,5 +39,11 @@ export interface FormRendererProps {
     fieldErrors?: Record<string, string>;
     /** The entry's format, which decides how its body field is checked. */
     format?: ContentFormat;
+    /** Shows the value without accepting edits. Comments stay open. */
+    readOnly?: boolean;
+    /** Told of each list item, block or image that Remove takes out, so the caller can offer Undo. */
+    onRemoved?: (removal: FieldRemoval) => void;
+    /** Resolves comment authors to names in field and entry threads; without it they show as ids. */
+    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
 }
 export declare const FormRenderer: React.FC<FormRendererProps>;