canopycms 0.1.0-int.115 → 0.1.0

package/dist/editor/EditorAuthGate.js

@@ -20,13 +20,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *   The server answers it before auth, so `whoami` meets it before any sign-in UI.
  */
 import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
-import { Alert, Button, Center, Loader, Modal, Paper, Stack, Text, Title } from '@mantine/core';
+import { Alert, Box, Button, Center, Loader, Modal, Paper, Stack, Text, Title } from '@mantine/core';
 import { useSWRConfig } from 'swr';
 import { getErrorMessage } from '../utils/error.js';
 import { editorModeMismatchMessage } from '../operating-mode/editor-mode-check.js';
 import { useApiClient, useOnEditorModeMismatch, useOnUnauthorized, } from './context/ApiClientContext.js';
 import { EditorIdentityContext } from './context/EditorIdentityContext.js';
 import { SWRProvider } from './context/SWRProvider.js';
+import { EditorShell } from './shell/EditorShell.js';
 import { CanopyCMSProvider } from './theme.js';
 const initialGateState = {
     phase: 'checking',
@@ -122,15 +123,19 @@ export function EditorAuthGate({ children, SignInComponent, themeOptions, editor
     const modeMismatchNotice = state.modeMismatch && _jsx(ModeMismatchNotice, { editorMode: editorMode });
     if (!state.user || !identity) {
         if (modeMismatchNotice) {
-            return (_jsx(CanopyCMSProvider, { ...themeOptions, withNotifications: false, children: _jsx(Center, { mih: "100vh", p: "md", children: modeMismatchNotice }) }));
+            return (_jsx(CanopyCMSProvider, { ...themeOptions, withNotifications: false, children: _jsx(GateScreen, { children: modeMismatchNotice }) }));
         }
-        return (_jsx(CanopyCMSProvider, { ...themeOptions, withNotifications: false, children: _jsx(Center, { mih: "100vh", p: "md", children: state.phase === 'signed-out' ? (_jsx(Stack, { align: "center", gap: "md", "data-testid": "canopy-sign-in-screen", children: signIn })) : state.phase === 'error' ? (_jsx(RetryNotice, { title: "Couldn't load the editor", error: state.error ?? 'Unknown error', onRetry: retryInitial })) : (_jsxs(Stack, { align: "center", gap: "xs", "data-testid": "canopy-auth-checking", children: [_jsx(Loader, {}), _jsx(Text, { size: "sm", c: "dimmed", children: "Checking sign-in\u2026" })] })) }) }));
+        return (_jsx(CanopyCMSProvider, { ...themeOptions, withNotifications: false, children: _jsx(GateScreen, { children: state.phase === 'signed-out' ? (_jsx(Stack, { align: "center", gap: "md", "data-testid": "canopy-sign-in-screen", children: signIn })) : state.phase === 'error' ? (_jsx(RetryNotice, { title: "Couldn't load the editor", error: state.error ?? 'Unknown error', onRetry: retryInitial })) : (_jsxs(Stack, { align: "center", gap: "xs", "data-testid": "canopy-auth-checking", children: [_jsx(Loader, {}), _jsx(Text, { size: "sm", c: "dimmed", children: "Checking sign-in\u2026" })] })) }) }));
     }
     return (_jsxs(EditorIdentityContext.Provider, { value: identity, children: [_jsxs(SWRProvider, { children: [_jsx(RevalidateOnReauth, { reauthCount: state.reauthCount }), children] }, state.user.userId), modeMismatchNotice && (_jsx(CanopyCMSProvider, { ...themeOptions, withNotifications: false, children: _jsx(Modal, { opened: true, onClose: keepOpen, withCloseButton: false, closeOnClickOutside: false, closeOnEscape: false, centered: true, size: "lg", children: modeMismatchNotice }) })), !modeMismatchNotice && state.phase === 'signed-out' && (
             // The editor's own MantineProvider is inside <Editor>, so the overlay brings its own.
             // Notifications stay with the editor's provider; a second container would duplicate them.
             _jsx(CanopyCMSProvider, { ...themeOptions, withNotifications: false, children: _jsx(Modal, { opened: true, onClose: keepOpen, withCloseButton: false, closeOnClickOutside: false, closeOnEscape: false, centered: true, title: "Sign in to continue", children: _jsxs(Stack, { gap: "md", "data-testid": "canopy-sign-in-overlay", children: [_jsx(Text, { size: "sm", children: "Your session has ended. Unsaved edits stay in place if you sign back in as the same user." }), signIn] }) }) }))] }));
 }
+/** A screen shown in the editor's place, scrolling when it is taller than the window. */
+function GateScreen({ children }) {
+    return (_jsx(EditorShell, { main: _jsx(Box, { h: "100%", style: { overflowY: 'auto' }, children: _jsx(Center, { mih: "100%", p: "md", style: { justifyContent: 'safe center', alignItems: 'safe center' }, children: children }) }) }));
+}
 /** The sign-in overlay closes only when the server accepts a session again; the mode one never. */
 function keepOpen() { }
 /** Blocking, with no Retry: the editor bundle itself is wrong, so only a rebuild helps. */

package/dist/editor/EntryNavigator.d.ts

@@ -63,6 +63,16 @@ export interface EntryNavigatorProps {
     readOnly?: boolean;
     /** Entry paths with unsaved changes; each shows a dot, and so does every collection holding one. */
     dirtyPaths?: ReadonlySet<string>;
+    /**
+     * A collection to bring into view: any filter clears, its ancestors and itself expand, and its
+     * row takes focus. `seq` makes a repeat ask for the same collection a new one.
+     */
+    revealCollection?: {
+        path: string;
+        seq: number;
+    };
+    /** The reveal is done, or its collection is not in the tree. */
+    onRevealed?: () => void;
 }
 export declare const EntryNavigator: React.FC<EntryNavigatorProps>;
 export default EntryNavigator;

package/dist/editor/EntryNavigator.js

@@ -12,6 +12,18 @@ const UnavailableTypeRow = ({ schemaRefs }) => (_jsxs(Group, { gap: 6, wrap: "no
 /** Where path rules refuse new entries, one line says so in place of the "…" menus they hide. */
 const AddRefusedRow = () => (_jsx(Text, { size: "xs", c: "dimmed", mt: 4, "data-testid": "add-refused-message", children: "You can't add entries here." }));
 const lastSegment = (path) => path.split('/').filter(Boolean).pop() ?? path;
+/** A collection's node value; a single-entry collection's node is its entry. */
+const collectionNodeValue = (nodes, path) => {
+    for (const node of nodes) {
+        if (node.value === `collection:${path}` || node.nodeProps?.collectionPath === path) {
+            return node.value;
+        }
+        const inner = node.children && collectionNodeValue(node.children, path);
+        if (inner)
+            return inner;
+    }
+    return undefined;
+};
 /** The collection values below `nodes` that have children, as an all-expanded state. */
 const expandedStateFor = (nodes, acc = {}) => {
     for (const node of nodes) {
@@ -109,7 +121,7 @@ const UnsavedDot = ({ label }) => (_jsx(Tooltip, { label: label, withinPortal: t
             borderRadius: '50%',
             backgroundColor: 'var(--mantine-color-brand-6)',
         } }) }));
-export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, dirtyPaths, }) => {
+export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, dirtyPaths, revealCollection, onRevealed, }) => {
     // Shadow the entry-mutation callbacks with undefined when readOnly, so every
     // downstream reference (hasEntryMenu, canReorder, the menu items themselves)
     // sees them as absent rather than threading a readOnly check through each
@@ -158,6 +170,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                             status: entry?.status,
                             isEntry: true,
                             entryPath: entry?.path,
+                            collectionPath: col.path,
                             slug: entry ? (entry.slug ?? lastSegment(entry.path)) : undefined,
                             itemReadOnly: entry?.readOnly,
                         },
@@ -389,6 +402,42 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     useEffect(() => {
         hasScrolledRef.current = false;
     }, []);
+    const treeBoxRef = useRef(null);
+    const servedRevealRef = useRef();
+    // Runs again as the filter clears and the expansion lands, then focuses the row a frame later.
+    useEffect(() => {
+        if (!revealCollection || !treeData || servedRevealRef.current === revealCollection.seq)
+            return;
+        const served = () => {
+            servedRevealRef.current = revealCollection.seq;
+            onRevealed?.();
+        };
+        if (query) {
+            setQuery('');
+            return;
+        }
+        const value = collectionNodeValue(treeData, revealCollection.path);
+        if (!value) {
+            served();
+            return;
+        }
+        const wanted = { ...calculatePathToEntry(value, treeData), [value]: true };
+        if (Object.keys(wanted).some((key) => !tree.expandedState[key])) {
+            const next = { ...tree.expandedState, ...wanted };
+            tree.setExpandedState(next);
+            localExpandedStateRef.current = next;
+            onExpandedStateChange?.(next);
+            return;
+        }
+        const frame = requestAnimationFrame(() => {
+            const row = Array.from(treeBoxRef.current?.querySelectorAll('[role="treeitem"]') ?? []).find((item) => item.dataset.value === value);
+            row?.scrollIntoView({ block: 'nearest' });
+            row?.focus();
+            served();
+        });
+        return () => cancelAnimationFrame(frame);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- `tree` and the callbacks are fresh each render
+    }, [revealCollection, treeData, query, tree.expandedState]);
     const clearFilter = () => {
         setQuery('');
         filterInputRef.current?.focus();
@@ -516,6 +565,6 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                                                                 onDeleteEntry(entryPath);
                                                             }, "data-testid": "delete-entry-menu-item", children: "Delete entry" })] }))] })] }))] })] }), isCollection && unavailableSchemaRefs && unavailableSchemaRefs.length > 0 && (_jsx(UnavailableTypeRow, { schemaRefs: unavailableSchemaRefs })), isCollection && addRefused && _jsx(AddRefusedRow, {})] }));
     };
-    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "entry-navigator", children: [treeData.length > 0 && (_jsx(TextInput, { ref: filterInputRef, size: "sm", py: 4, "aria-label": "Filter entries", spellCheck: false, "data-autofocus": true, placeholder: "Filter by title or slug", value: query, onChange: (event) => setQuery(event.currentTarget.value), onKeyDown: handleFilterKeyDown, leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), rightSection: query ? _jsx(CloseButton, { size: "sm", "aria-label": "Clear filter", onClick: clearFilter }) : null, "data-mantine-stop-propagation": query ? 'true' : undefined, "data-testid": "entry-nav-filter" })), _jsxs(ScrollArea, { type: "auto", scrollbars: "y", offsetScrollbars: true, style: { flex: 1 }, children: [hiddenRootUnavailableRefs && hiddenRootUnavailableRefs.length > 0 && (_jsx(Box, { pt: "sm", children: _jsx(UnavailableTypeRow, { schemaRefs: hiddenRootUnavailableRefs }) })), hiddenRootAddRefused && (_jsx(Box, { pt: "sm", children: _jsx(AddRefusedRow, {}) })), treeData.length === 0 ? (loading ? (_jsxs(Group, { gap: "xs", py: "sm", children: [_jsx(Loader, { size: "xs" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Loading content\u2026" })] })) : (_jsx(Text, { size: "xs", c: "dimmed", py: "sm", children: "No content" }))) : filteredTree.length === 0 ? (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-filter-empty", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: clearFilter, children: "Clear filter" })] })) : (_jsx(Box, { py: "sm", children: _jsx(Tree, { data: filteredTree, tree: tree, renderNode: renderNode, selectOnClick: false, levelOffset: "sm" }) }))] })] }));
+    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "entry-navigator", children: [treeData.length > 0 && (_jsx(TextInput, { ref: filterInputRef, size: "sm", py: 4, "aria-label": "Filter entries", spellCheck: false, "data-autofocus": true, placeholder: "Filter by title or slug", value: query, onChange: (event) => setQuery(event.currentTarget.value), onKeyDown: handleFilterKeyDown, leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), rightSection: query ? _jsx(CloseButton, { size: "sm", "aria-label": "Clear filter", onClick: clearFilter }) : null, "data-mantine-stop-propagation": query ? 'true' : undefined, "data-testid": "entry-nav-filter" })), _jsxs(ScrollArea, { type: "auto", scrollbars: "y", offsetScrollbars: true, style: { flex: 1 }, children: [hiddenRootUnavailableRefs && hiddenRootUnavailableRefs.length > 0 && (_jsx(Box, { pt: "sm", children: _jsx(UnavailableTypeRow, { schemaRefs: hiddenRootUnavailableRefs }) })), hiddenRootAddRefused && (_jsx(Box, { pt: "sm", children: _jsx(AddRefusedRow, {}) })), treeData.length === 0 ? (loading ? (_jsxs(Group, { gap: "xs", py: "sm", children: [_jsx(Loader, { size: "xs" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Loading content\u2026" })] })) : (_jsx(Text, { size: "xs", c: "dimmed", py: "sm", children: "No content" }))) : filteredTree.length === 0 ? (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-filter-empty", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: clearFilter, children: "Clear filter" })] })) : (_jsx(Box, { py: "sm", ref: treeBoxRef, children: _jsx(Tree, { data: filteredTree, tree: tree, renderNode: renderNode, selectOnClick: false, levelOffset: "sm" }) }))] })] }));
 };
 export default EntryNavigator;

package/dist/editor/FormHeader.js

@@ -4,7 +4,7 @@ import { useRef, useState } from 'react';
 import { ActionIcon, Badge, Box, Button, Group, Popover, ScrollArea, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
 import { useIsomorphicEffect } from '@mantine/hooks';
 import { IconChevronsDown, IconChevronsUp, IconListTree } from '@tabler/icons-react';
-/** The padding of the scroller the form sits in, which `EditorPanes` sets; 0 where unset. */
+/** The padding of the scroller the form sits in, which `shell/PaneLayout.tsx` sets; 0 where unset. */
 const PANE_PADDING = 'var(--canopy-form-pane-padding, 0px)';
 /** Below this header width "Outline" shows its icon alone, so the controls never clip. */
 const COMPACT_WIDTH = 280;

package/dist/editor/PreviewFrame.d.ts

@@ -10,7 +10,7 @@ export interface PreviewMarks {
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
  * to reload the preview.
  */
-export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, }: {
+export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }: {
     src: string;
     path: string;
     data?: unknown;
@@ -33,4 +33,8 @@ export declare const PreviewFrame: ({ src, path, data, isLoading, className, sty
      * distinct paths when the preview sends them within `MARK_REPORT_LIMITS`.
      */
     onMarks?: (marks: PreviewMarks) => void;
+    /** Overrides the iframe's own layout, such as a fixed width and scale; the bar and chip stay unscaled. */
+    iframeStyle?: CSSProperties;
+    /** Replaces the chip's Retry, for a host whose own reload control remounts the frame. */
+    onReload?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewFrame.js

@@ -36,7 +36,7 @@ const sendDraftUpdate = (iframe, message, targetOrigin) => {
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
  * to reload the preview.
  */
-export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, }) => {
+export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }) => {
     const iframeRef = useRef(null);
     // Pin the preview origin from the src prop: outbound messages target it (never '*'),
     // and inbound messages must come from it. An iframe that navigates cross-origin
@@ -190,7 +190,7 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                         fontFamily: 'var(--mantine-font-family, inherit)',
                         fontSize: 12,
                         lineHeight: '20px',
-                    }, children: [_jsx("span", { title: LIVE_UPDATES_OFF_HELP, children: "Live updates off" }), _jsx("span", { style: visuallyHidden, children: LIVE_UPDATES_OFF_HELP }), _jsx("button", { type: "button", onClick: retry, title: "Reload the preview", style: {
+                    }, children: [_jsx("span", { title: LIVE_UPDATES_OFF_HELP, children: "Live updates off" }), _jsx("span", { style: visuallyHidden, children: LIVE_UPDATES_OFF_HELP }), _jsx("button", { type: "button", onClick: onReload ?? retry, title: "Reload the preview", style: {
                                 border: 'none',
                                 borderRadius: 999,
                                 padding: '0 8px',
@@ -206,6 +206,7 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                     width: '100%',
                     height: '100%',
                     border: 'none',
+                    ...iframeStyle,
                 }, onLoad: () => {
                     post();
                     postHighlight();

package/dist/editor/PreviewPane.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { PreviewWidth } from './hooks/useEditorLayout.js';
+import { type PreviewMarks } from './PreviewFrame.js';
+import type { InexactMark } from './preview-marks.js';
+import type { PaneArrangement } from './shell/PaneLayout.js';
+import { type PreviewMount } from './preview-path.js';
+export interface PreviewPaneProps {
+    src: string;
+    /** The page's path for the bridge and the toolbar; defaults to `src`. */
+    path?: string;
+    /** Where the preview routes are mounted; the toolbar's path leaves out the `previewPrefix`. */
+    mount?: PreviewMount;
+    data?: unknown;
+    isLoading?: unknown;
+    highlightEnabled?: boolean;
+    assetBase?: string;
+    onPreviewError?: (error: {
+        message: string;
+        fieldPath?: string;
+    } | null) => void;
+    onMarks?: (marks: PreviewMarks) => void;
+    previewWidth: PreviewWidth;
+    onPreviewWidthChange: (width: PreviewWidth) => void;
+    /** Shown between the toolbar and the preview, such as a preview error. */
+    notice?: ReactNode;
+    /** With `onHighlightToggle`, the toolbar shows the highlight toggle. */
+    onHighlightToggle?: () => void;
+    /** The page marked nothing while highlighting; see `usePreviewMarks`. */
+    marksNothing?: boolean;
+    /** Marks naming no field of the entry, counted in the toolbar only with `showMarkDiagnostics`. */
+    inexactMarks?: readonly InexactMark[];
+    /** Admins only: diagnostics of the site's markup are no editor's to act on. */
+    showMarkDiagnostics?: boolean;
+    /** Shapes the size readout shown while the divider is dragged. */
+    layout?: PaneArrangement;
+    /** With `onMaximizedChange`, the toolbar offers Maximize, and Esc restores. */
+    maximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** A drag of the preview/form divider is under way: the preview shows its size over itself. */
+    resizing?: boolean;
+}
+/**
+ * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A
+ * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
+ * down to fit a narrower pane.
+ */
+export declare const PreviewPane: ({ src, path, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewPane.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { ActionIcon, Box, Group, Select, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { useClipboard, useElementSize, useWindowEvent } from '@mantine/hooks';
+import { IconCheck, IconExternalLink, IconRefresh } from '@tabler/icons-react';
+import { PreviewFrame } from './PreviewFrame.js';
+import { HighlightToggle, MaximizeToggle, UnmappedMarksChip } from './PreviewToolbarTools.js';
+import { displayPreviewPath } from './preview-path.js';
+import { computePreviewViewport, formatPreviewWidthReadout, PREVIEW_DEVICE_WIDTHS, } from './preview-scale.js';
+const WIDTH_OPTIONS = [
+    { value: 'fit', label: 'Fit', detail: 'Pane width' },
+    { value: 'desktop', label: 'Desktop', detail: `${PREVIEW_DEVICE_WIDTHS.desktop} px` },
+    { value: 'tablet', label: 'Tablet', detail: `${PREVIEW_DEVICE_WIDTHS.tablet} px` },
+    { value: 'mobile', label: 'Mobile', detail: `${PREVIEW_DEVICE_WIDTHS.mobile} px` },
+];
+const isPreviewWidth = (value) => WIDTH_OPTIONS.some((option) => option.value === value);
+const TEXT_INPUT_TYPES = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
+const hasTextToClear = (element) => ((element instanceof HTMLInputElement && TEXT_INPUT_TYPES.has(element.type)) ||
+    element instanceof HTMLTextAreaElement) &&
+    !element.readOnly &&
+    element.value !== '';
+const RELOAD_LABEL = 'Reload preview';
+const OPEN_SAVED_LABEL = 'Open saved version in a new tab';
+/**
+ * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A
+ * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
+ * down to fit a narrower pane.
+ */
+export const PreviewPane = ({ src, path = src, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks = [], showMarkDiagnostics = false, layout, maximized = false, onMaximizedChange, resizing = false, ...frameProps }) => {
+    const { ref: viewportRef, width, height } = useElementSize();
+    const rootRef = useRef(null);
+    const maximizeRef = useRef(null);
+    const restoreRef = useRef(null);
+    // Maximize and Restore swap places, so focus follows to the other. Restoring by other means,
+    // such as a preview click that focuses a form field, leaves focus where that put it.
+    const wasMaximized = useRef(maximized);
+    useLayoutEffect(() => {
+        if (maximized && !wasMaximized.current)
+            restoreRef.current?.focus();
+        if (!maximized && wasMaximized.current && document.activeElement === document.body) {
+            maximizeRef.current?.focus();
+        }
+        wasMaximized.current = maximized;
+    }, [maximized]);
+    // Escape from the editor's shell, or with focus nowhere, restores: a drawer or modal outside it
+    // closes on its own Escape, an open popup marks its owner, and a text field with text keeps it.
+    // Captured, because an open tooltip's dismiss stops the key on the document. A key inside the
+    // preview frame never reaches this window.
+    useWindowEvent('keydown', (event) => {
+        if (!maximized || event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        const target = event.target;
+        if (!(target instanceof HTMLElement))
+            return;
+        const inEditor = rootRef.current?.closest('[data-canopy-shell]')?.contains(target);
+        if (target !== document.body && !(inEditor ?? rootRef.current?.contains(target)))
+            return;
+        if (target.isContentEditable || hasTextToClear(target))
+            return;
+        if (target.closest('[data-mantine-stop-propagation="true"], [aria-haspopup][aria-expanded="true"]'))
+            return;
+        event.preventDefault();
+        onMaximizedChange?.(false);
+    }, { capture: true });
+    const clipboard = useClipboard({ timeout: 2000 });
+    const reloadButtonRef = useRef(null);
+    // A dismissed notice takes its focused Close button with it; the toolbar takes the focus back.
+    // Focus anywhere else, such as a form field while a draft starts compiling, stays put.
+    const hadNotice = useRef(false);
+    useEffect(() => {
+        if (hadNotice.current && !notice && document.activeElement === document.body) {
+            reloadButtonRef.current?.focus();
+        }
+        hadNotice.current = Boolean(notice);
+    }, [notice]);
+    // Reloading remounts the frame for a fresh handshake. It drops a reported error too: a page
+    // that reports draft errors reports it again once the reloaded page renders the draft.
+    const [reloads, setReloads] = useState(0);
+    const reload = () => {
+        setReloads((count) => count + 1);
+        frameProps.onPreviewError?.(null);
+    };
+    const shownPath = displayPreviewPath(path, mount);
+    const viewport = computePreviewViewport(previewWidth, width, height);
+    const iframeStyle = previewWidth === 'fit'
+        ? undefined
+        : {
+            inset: 'auto',
+            top: 0,
+            left: viewport.offsetX,
+            width: viewport.frameWidth,
+            height: viewport.frameHeight,
+            transform: `scale(${viewport.scale})`,
+            transformOrigin: '0 0',
+            background: 'var(--mantine-color-body)',
+            boxShadow: '0 0 0 1px var(--mantine-color-default-border)',
+        };
+    const copyStatus = clipboard.copied
+        ? 'Path copied'
+        : clipboard.error
+            ? "Couldn't copy the path"
+            : '';
+    const copyLabel = `Copy path ${shownPath}`;
+    return (_jsxs(Box, { ref: rootRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            border: '1px solid var(--mantine-color-default-border)',
+        }, children: [_jsxs(Group, { role: "group", "aria-label": "Preview toolbar", "data-testid": "preview-toolbar", gap: 6, px: 6, style: {
+                    // Wraps to a second row, rather than clipping, in a pane too narrow for one.
+                    minHeight: 32,
+                    rowGap: 2,
+                    paddingBlock: 2,
+                    flex: '0 0 auto',
+                    borderBottom: '1px solid var(--mantine-color-default-border)',
+                    background: 'var(--mantine-color-body)',
+                }, children: [_jsx(Tooltip, { label: copyStatus || copyLabel, multiline: true, maw: 360, style: { overflowWrap: 'anywhere' }, children: _jsx(UnstyledButton, { onClick: () => clipboard.copy(shownPath), "aria-label": copyLabel, style: { flex: '1 1 80px', minWidth: 0, borderRadius: 4, padding: '2px 4px' }, children: _jsx(Text, { component: "span", size: "xs", ff: "monospace", truncate: "end", display: "block", children: shownPath }) }) }), _jsx(VisuallyHidden, { role: "status", children: copyStatus }), _jsx(Select, { "aria-label": "Preview width", data: WIDTH_OPTIONS, value: previewWidth, onChange: (value) => {
+                            if (isPreviewWidth(value))
+                                onPreviewWidthChange(value);
+                        }, allowDeselect: false, size: "xs", w: 96, style: { flexShrink: 0 }, styles: { input: { height: 24, minHeight: 24 } }, comboboxProps: { width: 170, position: 'bottom-end' }, renderOption: ({ option, checked }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", w: "100%", children: [_jsx(IconCheck, { "aria-hidden": true, size: 14, style: { visibility: checked ? 'visible' : 'hidden' } }), _jsx("span", { style: { flex: 1 }, children: option.label }), _jsx(Text, { component: "span", size: "xs", children: WIDTH_OPTIONS.find((o) => o.value === option.value)?.detail })] })) }), width > 0 && (_jsx(Text, { size: "xs", c: "dimmed", "data-testid": "preview-width-readout", style: { flexShrink: 0, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }, children: formatPreviewWidthReadout(viewport) })), (onHighlightToggle || (showMarkDiagnostics && inexactMarks.length > 0)) && (_jsxs(Group, { gap: 6, wrap: "nowrap", children: [onHighlightToggle && (_jsx(HighlightToggle, { enabled: Boolean(frameProps.highlightEnabled), onToggle: onHighlightToggle, marksNothing: marksNothing })), showMarkDiagnostics && _jsx(UnmappedMarksChip, { marks: inexactMarks })] })), _jsxs(Group, { gap: 6, wrap: "nowrap", children: [onMaximizedChange && (_jsx(MaximizeToggle, { maximized: maximized, onChange: onMaximizedChange, maximizeRef: maximizeRef, restoreRef: restoreRef })), _jsx(Tooltip, { label: RELOAD_LABEL, children: _jsx(ActionIcon, { ref: reloadButtonRef, variant: "subtle", size: "md", "aria-label": RELOAD_LABEL, onClick: reload, children: _jsx(IconRefresh, { size: 16 }) }) }), _jsx(Tooltip, { label: OPEN_SAVED_LABEL, children: _jsx(ActionIcon, { component: "a", href: src, target: "_blank", rel: "noopener noreferrer", variant: "subtle", size: "md", "aria-label": OPEN_SAVED_LABEL, children: _jsx(IconExternalLink, { size: 16 }) }) })] })] }), notice, _jsxs(Box, { ref: viewportRef, pos: "relative", style: { flex: '1 1 auto', minHeight: 0 }, children: [_jsx(PreviewFrame, { src: src, path: path, ...frameProps, onReload: () => {
+                            // Retry goes with the frame it sits in; the toolbar's reload offers the same action.
+                            reload();
+                            reloadButtonRef.current?.focus();
+                        }, iframeStyle: iframeStyle, style: {
+                            position: 'absolute',
+                            inset: 0,
+                            background: previewWidth === 'fit' ? undefined : 'var(--canopy-surface-muted)',
+                        } }, reloads), resizing && width > 0 && (_jsx(Box, { "aria-hidden": true, "data-testid": "preview-resize-readout", style: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            padding: '6px 12px',
+                            borderRadius: 6,
+                            background: 'var(--mantine-color-body)',
+                            color: 'var(--mantine-color-text)',
+                            boxShadow: 'var(--mantine-shadow-md)',
+                            fontSize: 'var(--mantine-font-size-lg)',
+                            fontWeight: 600,
+                            fontVariantNumeric: 'tabular-nums',
+                            pointerEvents: 'none',
+                        }, children: layout === 'stacked'
+                            ? `${Math.round(width)} × ${Math.round(height)} px`
+                            : `${Math.round(width)} px` }))] })] }));
+};

package/dist/editor/PreviewToolbarTools.d.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'react';
+import type { InexactMark } from './preview-marks.js';
+export interface HighlightToggleProps {
+    enabled: boolean;
+    onToggle: () => void;
+    /** The page reported marking nothing while highlighting. */
+    marksNothing?: boolean;
+}
+/** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
+export declare function HighlightToggle({ enabled, onToggle, marksNothing }: HighlightToggleProps): import("react/jsx-runtime").JSX.Element;
+/** The admin's count of preview marks that name no field of the entry; see `findInexactMarks`. */
+export declare function UnmappedMarksChip({ marks }: {
+    marks: readonly InexactMark[];
+}): import("react/jsx-runtime").JSX.Element | null;
+export interface MaximizeToggleProps {
+    maximized: boolean;
+    onChange: (maximized: boolean) => void;
+    maximizeRef?: Ref<HTMLButtonElement>;
+    restoreRef?: Ref<HTMLButtonElement>;
+}
+/** An icon to maximize; once maximized, a labelled Restore, which Esc also does. */
+export declare function MaximizeToggle({ maximized, onChange, maximizeRef, restoreRef, }: MaximizeToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewToolbarTools.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { ActionIcon, Button, Group, Popover, Stack, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { IconArrowsMaximize, IconArrowsMinimize, IconMarquee } from '@tabler/icons-react';
+const HIGHLIGHT_LABEL = 'Highlight fields in the preview';
+const NOTHING_MARKED_NOTE = "This page marks no editable elements, so nothing can be highlighted or clicked to focus. The site's developer can mark them with fieldProps.";
+/** Turns preview highlights on and off; says so when the page marks nothing to highlight. */
+export function HighlightToggle({ enabled, onToggle, marksNothing = false }) {
+    const noteId = useId();
+    const showNote = enabled && marksNothing;
+    return (_jsxs(Group, { gap: 4, wrap: "nowrap", children: [_jsx(Tooltip, { label: HIGHLIGHT_LABEL, children: _jsx(ActionIcon, { variant: enabled ? 'filled' : 'subtle', color: enabled ? 'brand' : 'gray', size: "md", "aria-pressed": enabled, "aria-label": HIGHLIGHT_LABEL, "aria-describedby": showNote ? noteId : undefined, "data-testid": "toggle-highlights-button", onClick: onToggle, children: _jsx(IconMarquee, { size: 16 }) }) }), showNote && (_jsx(Tooltip, { label: NOTHING_MARKED_NOTE, multiline: true, w: 260, children: _jsxs(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'nowrap' }, children: ["Nothing to highlight", _jsx(VisuallyHidden, { id: noteId, children: NOTHING_MARKED_NOTE })] }) }))] }));
+}
+const LISTED = 3;
+// Module-level, so React never re-calls it on a re-render and pulls focus back while closing.
+const focusOnMount = (node) => node?.focus();
+const markList = (marks) => marks
+    .slice(0, LISTED)
+    .map((mark) => mark.path || '""')
+    .join(', ');
+/** The admin's count of preview marks that name no field of the entry; see `findInexactMarks`. */
+export function UnmappedMarksChip({ marks }) {
+    const [opened, setOpened] = useState(false);
+    const chipRef = useRef(null);
+    // Focus moves to Close as the dropdown mounts. Close and Escape hand it back to the chip; focus
+    // leaving otherwise, Tab included, just closes it, so there is no focus trap.
+    // Closed when the marks run out, so their return never reopens it and takes focus.
+    if (marks.length === 0) {
+        if (opened)
+            setOpened(false);
+        return null;
+    }
+    const one = marks.length === 1;
+    const closeToChip = () => {
+        setOpened(false);
+        chipRef.current?.focus();
+    };
+    return (_jsxs(Popover, { opened: opened, onChange: setOpened, closeOnEscape: false, width: 300, position: "bottom-end", withArrow: true, shadow: "md", children: [_jsx(Popover.Target, { children: _jsxs(UnstyledButton, { ref: chipRef, "data-testid": "preview-unmapped-chip", 
+                    // A controlled Popover's target toggles nothing itself.
+                    // Pressed while open, it keeps focus in the dropdown, whose blur would close it first
+                    // and let this click reopen it.
+                    onMouseDown: (event) => {
+                        if (opened)
+                            event.preventDefault();
+                    }, onClick: () => (opened ? closeToChip() : setOpened(true)), style: {
+                        flexShrink: 0,
+                        borderRadius: 999,
+                        minHeight: 24,
+                        padding: '0 8px',
+                        fontSize: 'var(--mantine-font-size-xs)',
+                        fontWeight: 600,
+                        whiteSpace: 'nowrap',
+                        color: 'var(--mantine-color-text)',
+                        background: 'var(--canopy-count-bg-orange)',
+                    }, children: [marks.length, " unmapped", _jsxs(VisuallyHidden, { children: [" preview ", one ? 'mark' : 'marks'] })] }) }), _jsx(Popover.Dropdown, { onKeyDown: (event) => {
+                    if (event.key === 'Escape')
+                        closeToChip();
+                }, onBlur: (event) => {
+                    // Not when the window itself loses focus, such as to the browser's console.
+                    if (document.hasFocus() && !event.currentTarget.contains(event.relatedTarget)) {
+                        setOpened(false);
+                    }
+                }, children: _jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", fw: 600, children: "Unmapped preview marks" }), _jsxs(Text, { size: "sm", children: [one
+                                    ? "One element on this page carries a field mark that doesn't match a field of this entry: "
+                                    : `${marks.length} elements on this page carry field marks that don't match a field of this entry: `, _jsx(Text, { component: "span", ff: "monospace", size: "xs", style: { overflowWrap: 'anywhere' }, children: markList(marks) }), marks.length > LISTED ? `, and ${marks.length - LISTED} more` : '', ".", ' ', one
+                                    ? "It's outlined, and clicking it focuses its nearest field, if it has one."
+                                    : "They're outlined, and clicking one focuses its nearest field, if it has one."] }), _jsxs(Text, { size: "sm", children: ["The browser console names the nearest field of ", one ? 'it' : 'each', ", for the site's developer to correct in its fieldProps."] }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { ref: focusOnMount, size: "compact-sm", variant: "default", onClick: closeToChip, children: "Close" }) })] }) })] }));
+}
+const MAXIMIZE_LABEL = 'Maximize preview';
+/** An icon to maximize; once maximized, a labelled Restore, which Esc also does. */
+export function MaximizeToggle({ maximized, onChange, maximizeRef, restoreRef, }) {
+    return maximized ? (_jsx(Tooltip, { label: "Show the form again \u00B7 Esc", children: _jsx(Button, { ref: restoreRef, size: "compact-sm", variant: "default", leftSection: _jsx(IconArrowsMinimize, { size: 14 }), "aria-keyshortcuts": "Escape", "data-testid": "preview-restore-button", onClick: () => onChange(false), children: "Restore" }) })) : (_jsx(Tooltip, { label: MAXIMIZE_LABEL, children: _jsx(ActionIcon, { ref: maximizeRef, variant: "subtle", size: "md", "aria-label": MAXIMIZE_LABEL, "data-testid": "preview-maximize-button", onClick: () => onChange(true), children: _jsx(IconArrowsMaximize, { size: 16 }) }) }));
+}

package/dist/editor/comments/form-comments.js

@@ -100,7 +100,8 @@ export const FormCommentsMenu = ({ comments, entryPath }) => {
         if (!formComments || !form)
             return;
         const active = document.activeElement;
-        if (inOtherOverlay(active, form))
+        // An inert form is covered by the content panel's overlay.
+        if (inOtherOverlay(active, form) || form.closest('[inert]'))
             return;
         event.preventDefault();
         const field = active && form.contains(active) ? active.closest(FIELD_SCOPE_SELECTOR) : null;

package/dist/editor/components/BranchLockBanner.d.ts

@@ -0,0 +1,22 @@
+import type { BranchStatus } from '../../types.js';
+export interface BranchLockInput {
+    branchStatus: BranchStatus | undefined;
+    /** The protected base branch, read-only in prod. */
+    branchReadOnly?: boolean;
+    branchWriteBlocked?: boolean;
+}
+/**
+ * Which lock applies. `branchWriteBlocked` is the server's own answer (getBranchProtection), so
+ * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
+ * base-branch read-only takes precedence over a workflow status lock.
+ */
+export declare function branchLockState({ branchStatus, branchReadOnly, branchWriteBlocked, }: BranchLockInput): {
+    statusLocked: boolean;
+    branchDataUnavailable: boolean;
+};
+export interface BranchLockBannerProps extends BranchLockInput {
+    branchName: string;
+    onBranchManagerOpen: () => void;
+}
+/** The banner region's explanation of a read-only branch; not dismissible while it applies. */
+export declare function BranchLockBanner({ branchName, onBranchManagerOpen, ...lock }: BranchLockBannerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/components/BranchLockBanner.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Box, Button, Group, Text } from '@mantine/core';
+import { IconLock } from '@tabler/icons-react';
+import { EDITOR_ACTIONS } from '../copy.js';
+/**
+ * Which lock applies. `branchWriteBlocked` is the server's own answer (getBranchProtection), so
+ * nothing offers a write the API would reject; `branchReadOnly` only picks the message, and
+ * base-branch read-only takes precedence over a workflow status lock.
+ */
+export function branchLockState({ branchStatus, branchReadOnly = false, branchWriteBlocked = false, }) {
+    const statusLocked = branchWriteBlocked && !branchReadOnly;
+    // `branchStatus` can't describe the lock while branch data loads (undefined) or under version
+    // skew (an old server omits `branchWriteBlocked` but reports 'editing'), so both read as
+    // "details unavailable" rather than naming a status the lock contradicts.
+    const branchDataUnavailable = statusLocked && (branchStatus === undefined || branchStatus === 'editing');
+    return { statusLocked, branchDataUnavailable };
+}
+/** The banner region's explanation of a read-only branch; not dismissible while it applies. */
+export function BranchLockBanner({ branchName, onBranchManagerOpen, ...lock }) {
+    const { statusLocked, branchDataUnavailable } = branchLockState(lock);
+    if (!lock.branchReadOnly && !statusLocked)
+        return null;
+    const [testId, message, action] = lock.branchReadOnly
+        ? [
+            'protected-branch-banner',
+            `You are viewing the protected base branch "${branchName}". Content is read-only — create a branch to make changes.`,
+            `${EDITOR_ACTIONS.newBranch}…`,
+        ]
+        : [
+            'status-locked-banner',
+            branchDataUnavailable
+                ? `Branch details for "${branchName}" could not be loaded, so content is locked until they arrive. Use Switch branch… to retry.`
+                : lock.branchStatus === 'submitted'
+                    ? `Branch "${branchName}" is submitted for review and locked for edits. Withdraw it from review to make changes.`
+                    : `Branch "${branchName}" is ${lock.branchStatus} — content is read-only.`,
+            `${EDITOR_ACTIONS.switchBranch}…`,
+        ];
+    return (_jsx(Box, { px: "md", py: "sm", children: _jsx(Alert, { icon: _jsx(IconLock, { size: 16 }), color: "yellow", variant: "light", "data-testid": testId, children: _jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [_jsx(Text, { size: "sm", children: message }), _jsx(Button, { variant: "default", onClick: onBranchManagerOpen, children: action })] }) }) }));
+}

package/dist/editor/components/BranchPill.d.ts

@@ -0,0 +1,32 @@
+import { type Ref } from 'react';
+import type { LogicalPath } from '../../paths/types.js';
+export interface BranchPillProps {
+    branchName: string;
+    /** The editor is busy; with no branch name yet, that is the branch list loading. */
+    loading: boolean;
+    /** The status label ("Editing", "In review", "Protected"), when the mode shows one. */
+    status?: {
+        label: string;
+        testId: string;
+        value: string;
+    };
+    /** How many entries on the branch have unsaved changes, counting any the list can't name yet. */
+    unsavedCount: number;
+    /** The listed entries with unsaved changes. */
+    unsavedEntries: Array<{
+        path: LogicalPath;
+        label: string;
+    }>;
+    onSwitchBranch: () => void;
+    onRefreshBranch: () => void;
+    onDiscardAll: () => void;
+    onEntrySelect: (path: LogicalPath) => void;
+    /** The pill, which stands in for a menu item that opened something. */
+    pillRef?: Ref<HTMLButtonElement>;
+}
+/**
+ * The branch's name, status and unsaved count. Its menu holds the branch actions and lists the
+ * unsaved entries, each opening that entry. Below `sm` it is the branch icon and the count, its
+ * name then in its Tooltip, accessible name and menu label: the row's actions must not clip.
+ */
+export declare function BranchPill({ branchName, loading, status, unsavedCount: unsaved, unsavedEntries, onSwitchBranch, onRefreshBranch, onDiscardAll, onEntrySelect, pillRef, }: BranchPillProps): import("react/jsx-runtime").JSX.Element;