canopycms 0.2.0-int.121 → 0.3.0

package/dist/editor/hooks/useBranchManager.js

@@ -5,6 +5,7 @@ import { useSWRConfig } from 'swr';
 import { Alert, Stack, Text } from '@mantine/core';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { openConfirm } from '../utils/confirm-modal.js';
+import { focusReturnProps } from '../utils/focus-return.js';
 import { EDITOR_ACTIONS } from '../copy.js';
 import { notifications } from '@mantine/notifications';
 import { useApiClient } from '../context/index.js';
@@ -18,6 +19,7 @@ import { RetryToastMessage } from '../components/RetryToastMessage.js';
 import { isNonApiResponse } from '../../api/client.js';
 import { isGatewayFailure, isUnanswered, UnansweredError } from '../unanswered.js';
 import { describeUnsaved } from './useBranchActions.js';
+import { writeEditorUrl } from './editor-history.js';
 const BRANCHES_LOAD_FAILED_TOAST_ID = 'canopy-branches-load-failed';
 const BRANCH_OUTCOME_UNKNOWN_TOAST_ID = 'canopy-branch-outcome-unknown';
 /** The error a refused branch action throws; a gateway's 5xx says nothing of whether it ran. */
@@ -70,7 +72,7 @@ const confirmModalHandlers = (onConfirm, onDismiss) => {
  * With `unsaved` edits on the branch, the dialog says they are left out: a submit sends only what
  * is saved, and the branch is read-only in review, so they wait as drafts until it is editable.
  */
-const showSubmitConfirmation = (branchName, unsaved, onConfirm, onDismiss) => {
+const showSubmitConfirmation = (branchName, unsaved, onConfirm, onDismiss, returnFocusTo) => {
     const leftOut = unsaved && unsaved.count > 0 ? unsaved : undefined;
     openConfirm({
         title: EDITOR_ACTIONS.submitForReview,
@@ -81,6 +83,7 @@ const showSubmitConfirmation = (branchName, unsaved, onConfirm, onDismiss) => {
         },
         confirmProps: { color: 'brand', 'data-testid': 'confirm-submit-branch' },
         ...confirmModalHandlers(onConfirm, onDismiss),
+        ...focusReturnProps(returnFocusTo),
     });
 };
 /**
@@ -101,7 +104,7 @@ export function withdrawPullRequestBullet(pr) {
         return `Leave the merged ${label} as it is`;
     return `Convert ${label} to a draft`;
 }
-const showWithdrawConfirmation = (branchName, pr, onConfirm, onDismiss) => {
+const showWithdrawConfirmation = (branchName, pr, onConfirm, onDismiss, returnFocusTo) => {
     const bullets = [
         withdrawPullRequestBullet(pr),
         'Change the branch status back to "editing"',
@@ -113,6 +116,7 @@ const showWithdrawConfirmation = (branchName, pr, onConfirm, onDismiss) => {
         labels: { confirm: EDITOR_ACTIONS.withdrawFromReview, cancel: 'Cancel' },
         confirmProps: { color: 'orange', 'data-testid': 'confirm-withdraw-branch' },
         ...confirmModalHandlers(onConfirm, onDismiss),
+        ...focusReturnProps(returnFocusTo),
     });
 };
 const showRequestChangesConfirmation = (branchName, onConfirm, onDismiss) => {
@@ -316,11 +320,11 @@ export function useBranchManager(options) {
                 // (see Editor.tsx's `branchContentLocked` for the full rationale, which
                 // applies identically here).
                 isProtected: b.isProtected ?? true,
-                // NOT flipped to `?? true`: `readOnly` only selects WHICH lock banner
-                // to show (base-branch read-only vs. status lock) once something is
+                // NOT flipped to `?? true`: `readOnly` only selects WHICH lock the status
+                // names (base-branch read-only vs. status lock) once something is
                 // already known to be locked via `writeBlocked`/`submitBlocked` --
                 // it never gates a write by itself. Defaulting it true on missing data
-                // would mislabel a status lock as a base-branch lock (wrong banner
+                // would mislabel a status lock as a base-branch lock (wrong status
                 // copy), not under-lock anything, so `?? false` stays correct here.
                 readOnly: b.readOnly ?? false,
                 writeBlocked: b.writeBlocked ?? true,
@@ -406,7 +410,7 @@ export function useBranchManager(options) {
         }
         notifications.show({ message: err instanceof Error ? err.message : fallback, color: 'red' });
     };
-    const handleSubmit = (requested) => {
+    const handleSubmit = (requested, returnFocusTo) => {
         const branchNameToSubmit = listedName(requested);
         return singleFlight('submit', branchNameToSubmit, async () => {
             // Drafts belong to the open branch, so only its submit can leave edits behind. Without
@@ -463,11 +467,11 @@ export function useBranchManager(options) {
                 }, 
                 // Dismissal is not an error: the call sites log rejections to the console. Settled
                 // once, by onCancel OR onClose, so an Escape/overlay dismissal can't leave this pending.
-                () => resolve());
+                () => resolve(), returnFocusTo);
             });
         });
     };
-    const handleWithdraw = (requested) => {
+    const handleWithdraw = (requested, returnFocusTo) => {
         const branchNameToWithdraw = listedName(requested);
         return singleFlight('withdraw', branchNameToWithdraw, () => new Promise((resolve, reject) => {
             showWithdrawConfirmation(branchNameToWithdraw, pullRequestOf(branchNameToWithdraw), async () => {
@@ -490,7 +494,7 @@ export function useBranchManager(options) {
                 finally {
                     options.setBusy(false);
                 }
-            }, () => resolve());
+            }, () => resolve(), returnFocusTo);
         }));
     };
     const handleRequestChanges = (branchNameForChanges) => singleFlight('request-changes', branchNameForChanges, () => new Promise((resolve) => {
@@ -583,16 +587,18 @@ export function useBranchManager(options) {
     const handleReloadBranchData = async () => {
         await loadBranches();
     };
+    // The editor's own page; a Back off it to a page of the host leaves that page's URL alone.
+    const editorPathRef = useRef(typeof window === 'undefined' ? '' : window.location.pathname);
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        if (!branchName)
+        if (!branchName || window.location.pathname !== editorPathRef.current)
             return;
         const url = new URL(window.location.href);
         const current = url.searchParams.get('branch');
         if (current !== branchName) {
             url.searchParams.set('branch', branchName);
-            window.history.replaceState({}, '', url.toString());
+            writeEditorUrl(url.toString(), false);
         }
     }, [branchName]);
     return {
@@ -602,6 +608,7 @@ export function useBranchManager(options) {
         branchSummaries,
         currentBranch,
         branchesLoadFailed: !!branchesError && !branchesData,
+        branchesLoaded: !!branchesData,
         addCreatedBranch,
         handleSubmit,
         handleWithdraw,

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

@@ -3,6 +3,9 @@ import type { EditorEntry, EditorCollection } from '../Editor.js';
 import type { LogicalPath } from '../../paths/types.js';
 import type { FormValue } from '../FormRenderer.js';
 import type { EntryFieldError } from '../../validation/entry-validator.js';
+import type { BranchBarStatus } from '../branch-lock.js';
+/** @internal Exported for tests. */
+export declare const RESTORED_ENTRY_GONE_MESSAGE = "The entry you returned to is no longer on this branch, so the home page opened.";
 /** @internal Exported for tests. */
 export { listAllEntries } from './useEntriesData.js';
 /**
@@ -37,12 +40,19 @@ export interface UseEntryManagerOptions {
     /** An entry's route on the site (`buildPreviewRoute`), which picks the home page to open first. */
     resolvePreviewRoute?: (entry: EditorEntry) => string | undefined;
     setBusy: (busy: boolean) => void;
+    /** The bar's row: a failed load is toasted after 'loading' ends, and never on 'not-available'. */
+    branchBarState?: BranchBarStatus['value'];
+    /** Switches to the branch a Back or Forward reached; rejects when the switch does not happen. */
+    switchBranch?: (branch: string) => Promise<void>;
+    /** Called when a Back or Forward has opened another entry. */
+    onHistoryRestore?: () => void;
 }
 export interface UseEntryManagerReturn {
     selectedPath: string;
+    /** Opens an entry the user chose, adding a history entry, so Back returns to the one before. */
     setSelectedPath: (path: string) => void;
-    /** Leaves no entry open, as after deleting the open one, instead of opening the first. */
-    closeEntry: () => void;
+    /** Leaves no entry open if `path` on `branch` is still open, as after deleting it. */
+    closeEntry: (path: string, branch: string) => void;
     entries: EditorEntry[];
     setEntries: (entries: EditorEntry[]) => void;
     collections: EditorCollection[];

package/dist/editor/hooks/useEntryManager.js

@@ -10,7 +10,12 @@ import { SCHEMA_UNAVAILABLE_CODE } from '../unavailable-entry-type.js';
 import { entriesKey, fetchEntriesAndSchema } from './useEntriesData.js';
 import { RetryToastMessage } from '../components/RetryToastMessage.js';
 import { isGatewayFailure, isUnanswered, MayHaveLandedError, UnansweredError } from '../unanswered.js';
+import { sanitizeBranchName } from '../../paths/branch-name.js';
+import { isApiTimeoutError } from '../../api/client.js';
+import { markEditorHistoryStart, recordHistoryMove, undoHistoryMove, writeEditorUrl, } from './editor-history.js';
 const ENTRIES_LOAD_FAILED_TOAST_ID = 'canopy-entries-load-failed';
+/** @internal Exported for tests. */
+export const RESTORED_ENTRY_GONE_MESSAGE = 'The entry you returned to is no longer on this branch, so the home page opened.';
 // Re-exported so existing imports of `listAllEntries` from this module keep
 // working -- the implementation lives in useEntriesData.ts alongside the
 // other fetch/key/type pieces useEntryManager shares with the SWR layer.
@@ -56,6 +61,23 @@ const EMPTY_SCHEMAS = [];
  * from an entry that crashes the editor); null opens the home page (`resolveHomeEntry`).
  */
 const readUrlEntry = () => typeof window === 'undefined' ? null : new URLSearchParams(window.location.search).get('entry');
+/** The current URL with `branch` and the `entry` that `selectedPath` shows, as `readUrlEntry` reads it. */
+const entryUrl = (selectedPath, noEntry, branch) => {
+    const url = new URL(window.location.href);
+    if (branch)
+        url.searchParams.set('branch', branch);
+    if (selectedPath) {
+        url.searchParams.set('entry', selectedPath);
+    }
+    else if (noEntry) {
+        // Kept, so a reload still opens no entry.
+        url.searchParams.set('entry', '');
+    }
+    else {
+        url.searchParams.delete('entry');
+    }
+    return url.toString();
+};
 /**
  * Custom hook for managing editor entries (CRUD operations).
  */
@@ -102,6 +124,18 @@ export function useEntryManager(options) {
     selectedPathRef.current = selectedPath;
     // Counts selections through the returned setter, not this hook's own fallbacks.
     const selectionsByCallerRef = useRef(0);
+    // The path the user chose, which the URL sync pushes; any other selection replaces the URL.
+    const pushTargetRef = useRef(null);
+    // The `entry` a Back onto another branch opens once that branch shows; a later move drops it.
+    const entryAfterBranchChangeRef = useRef(undefined);
+    // Counts Back and Forward moves, so a branch switch one asked for knows when another followed.
+    const historyMovesRef = useRef(0);
+    // The path a Back or Forward opened, until the entries show whether it is still there.
+    const restoredPathRef = useRef(null);
+    // The editor's own page: a Back off it to another page of the host is no move between entries.
+    const editorPathRef = useRef(typeof window === 'undefined' ? '' : window.location.pathname);
+    const onHistoryRestoreRef = useRef(options.onHistoryRestore);
+    onHistoryRestoreRef.current = options.onHistoryRestore;
     const [navigatorOpen, setNavigatorOpen] = useState(() => readUrlEntry() === '');
     const isInitialMount = useRef(true);
     const hasSyncedFromUrl = useRef(false);
@@ -188,13 +222,18 @@ export function useEntryManager(options) {
     const noEntryRequested = useRef(initialUrlEntry.current === '');
     const selectEntryPath = useCallback((path) => {
         selectionsByCallerRef.current += 1;
+        pushTargetRef.current = path;
         setSelectedPath(path);
     }, []);
     // No entry open, as the URL's empty `entry` asks, where a lost selection opens the home page.
-    const closeEntry = useCallback(() => {
+    // Replaces the history entry: it follows a delete, which Back could not undo.
+    const closeEntry = useCallback((path, branch) => {
+        if (selectedPathRef.current !== path || currentBranchRef.current !== branch)
+            return;
         noEntryRequested.current = true;
-        selectEntryPath('');
-    }, [selectEntryPath]);
+        selectionsByCallerRef.current += 1;
+        setSelectedPath('');
+    }, []);
     const collectionByPath = useMemo(() => {
         const map = new Map();
         const walk = (collections) => {
@@ -470,6 +509,7 @@ export function useEntryManager(options) {
             // still empty when this function runs (slow server / cold start).
             const createdEntry = refreshed.find((e) => e.collectionPath === createModalCollection.path && e.slug === slug);
             if (createdEntry) {
+                pushTargetRef.current = createdEntry.path;
                 setSelectedPath(createdEntry.path);
             }
             else {
@@ -566,8 +606,16 @@ export function useEntryManager(options) {
             isInitialMount.current = false;
         }
         else {
-            noEntryRequested.current = false;
-            setSelectedPath('');
+            const restored = entryAfterBranchChangeRef.current;
+            entryAfterBranchChangeRef.current = undefined;
+            const entry = restored?.branch === options.branchName ? restored.entry : undefined;
+            noEntryRequested.current = entry === '';
+            setSelectedPath(entry ?? '');
+            if (entry !== undefined) {
+                restoredPathRef.current = entry;
+                setNavigatorOpen(entry === '');
+                onHistoryRestoreRef.current?.();
+            }
             // Bound version-map growth across switches. Correctness no longer
             // depends on this clear: tokens are keyed by `${branch}:${contentId}`
             // (see entryVersionsRef), so a late response from the previous branch
@@ -659,12 +707,14 @@ export function useEntryManager(options) {
     // to a branch that fails again still reports.
     const notifiedErrorBranchRef = useRef(null);
     useEffect(() => {
-        if (!entriesError || !options.branchName) {
+        if (!entriesError || !options.branchName || options.branchBarState === 'not-available') {
             if (notifiedErrorBranchRef.current !== null)
                 notifications.hide(ENTRIES_LOAD_FAILED_TOAST_ID);
             notifiedErrorBranchRef.current = null;
             return;
         }
+        if (options.branchBarState === 'loading')
+            return;
         if (notifiedErrorBranchRef.current === options.branchName)
             return;
         const branch = options.branchName;
@@ -675,8 +725,12 @@ export function useEntryManager(options) {
         notifications.show({
             id: ENTRIES_LOAD_FAILED_TOAST_ID,
             title: 'Could not load content',
+            // A timeout's message is written for people; any other is a diagnostic, kept for Details.
             message: createElement(RetryToastMessage, {
-                message: getErrorMessage(entriesError),
+                message: isApiTimeoutError(entriesError)
+                    ? entriesError.message
+                    : "The editor couldn't fetch this branch's entries.",
+                details: isApiTimeoutError(entriesError) ? undefined : getErrorMessage(entriesError),
                 onRetry: () => {
                     notifications.hide(ENTRIES_LOAD_FAILED_TOAST_ID);
                     notifiedErrorBranchRef.current = null;
@@ -686,7 +740,7 @@ export function useEntryManager(options) {
             color: 'red',
             autoClose: false,
         });
-    }, [entriesError, options.branchName]);
+    }, [entriesError, options.branchName, options.branchBarState]);
     // Validate selected entry when entries change
     useEffect(() => {
         if (selectedPath)
@@ -703,33 +757,100 @@ export function useEntryManager(options) {
                 return;
             }
         }
+        const restored = restoredPathRef.current === selectedPath;
+        if (restored)
+            restoredPathRef.current = null;
         // If the selected entry exists, keep it
         if (entriesState.find((e) => e.path === selectedPath))
             return;
         if (selectedPath === '' && noEntryRequested.current)
             return;
+        if (restored && selectedPath) {
+            notifications.show({ message: RESTORED_ENTRY_GONE_MESSAGE, color: 'blue' });
+        }
         setSelectedPath(resolveHomeEntry(entriesState, resolvePreviewRouteRef.current)?.path ?? '');
     }, [entriesState, selectedPath]);
     // Update URL when selection changes (skip until URL sync has happened)
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
+        // Pushed only once listed: a path the check above replaces would leave a stale entry behind.
+        const push = pushTargetRef.current === selectedPath && entriesState.some((e) => e.path === selectedPath);
+        pushTargetRef.current = null;
         // Don't update URL until we've synced from it first
         if (!hasSyncedFromUrl.current)
             return;
-        const url = new URL(window.location.href);
-        if (selectedPath) {
-            url.searchParams.set('entry', selectedPath);
-        }
-        else if (noEntryRequested.current) {
-            // Kept, so a reload still opens no entry.
-            url.searchParams.set('entry', '');
-        }
-        else {
-            url.searchParams.delete('entry');
-        }
-        window.history.replaceState({}, '', url.toString());
+        if (window.location.pathname !== editorPathRef.current)
+            return;
+        writeEditorUrl(entryUrl(selectedPath, noEntryRequested.current, currentBranchRef.current), push);
     }, [selectedPath]);
+    const entriesRef = useRef(entriesState);
+    entriesRef.current = entriesState;
+    const switchBranchRef = useRef(options.switchBranch);
+    switchBranchRef.current = options.switchBranch;
+    // Back and Forward open the entry their URL names, without a reload.
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        markEditorHistoryStart();
+        const restore = () => {
+            const moved = recordHistoryMove();
+            if (moved === null || window.location.pathname !== editorPathRef.current)
+                return;
+            historyMovesRef.current += 1;
+            entryAfterBranchChangeRef.current = undefined;
+            const params = new URLSearchParams(window.location.search);
+            const entry = params.get('entry');
+            const branch = params.get('branch');
+            const current = currentBranchRef.current;
+            // A legacy name and its sanitized form are one branch; a switch would key drafts by the other.
+            if (branch && sanitizeBranchName(branch) !== sanitizeBranchName(current)) {
+                const move = historyMovesRef.current;
+                const stay = () => {
+                    if (move !== historyMovesRef.current)
+                        return;
+                    if (moved)
+                        undoHistoryMove(moved);
+                    else {
+                        const url = entryUrl(selectedPathRef.current, noEntryRequested.current, currentBranchRef.current);
+                        writeEditorUrl(url, false);
+                    }
+                };
+                const switchBranch = switchBranchRef.current;
+                if (!switchBranch) {
+                    stay();
+                    return;
+                }
+                entryAfterBranchChangeRef.current = { branch, entry };
+                if (!hasSyncedFromUrl.current)
+                    initialUrlEntry.current = entry;
+                switchBranch(branch).catch(() => {
+                    if (move === historyMovesRef.current)
+                        entryAfterBranchChangeRef.current = undefined;
+                    stay();
+                });
+                return;
+            }
+            // A Back is a selection, so a rename, move or re-create landing afterwards leaves it open.
+            selectionsByCallerRef.current += 1;
+            noEntryRequested.current = entry === '';
+            setNavigatorOpen(entry === '');
+            if (!hasSyncedFromUrl.current) {
+                initialUrlEntry.current = entry;
+                setSelectedPath(entry ?? '');
+                return;
+            }
+            const target = entry ?? resolveHomeEntry(entriesRef.current, resolvePreviewRouteRef.current)?.path ?? '';
+            if (target === selectedPathRef.current)
+                return;
+            restoredPathRef.current = target;
+            // A path no longer listed falls back to the home page, through the selection check above.
+            setSelectedPath(target);
+            onHistoryRestoreRef.current?.();
+        };
+        window.addEventListener('popstate', restore);
+        return () => window.removeEventListener('popstate', restore);
+    }, []);
     return {
         selectedPath,
         setSelectedPath: selectEntryPath,

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

@@ -26,10 +26,14 @@ export interface RailButtonProps extends Omit<ComponentPropsWithoutRef<'button'>
     shortcut?: string;
     /** A count badge, hidden at zero; the label should say it too. */
     count?: number;
+    /** A mark at the button's top-right corner, such as an unsaved dot; the label should say it too. */
+    corner?: ReactNode;
     countTestId?: string;
     tooltipDisabled?: boolean;
     /** Disables the button, which stays focusable, and its tooltip gives this reason instead. */
     disabledReason?: string;
 }
+/** Sets the buttons after it apart. It carries no `data-rail-item`, so the arrow keys skip it. */
+export declare function RailDivider(): import("react/jsx-runtime").JSX.Element;
 /** A rail button: icon only, named by `label`, which its tooltip repeats on hover and focus. */
 export declare const RailButton: React.ForwardRefExoticComponent<RailButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/editor/shell/ActivityRail.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useLayoutEffect, useRef, useState, } from 'react';
-import { ActionIcon, Indicator, Stack, Tooltip, VisuallyHidden } from '@mantine/core';
+import { ActionIcon, Box, Divider, Indicator, Stack, Tooltip, VisuallyHidden } from '@mantine/core';
 import { useElementSize, useMergedRef } from '@mantine/hooks';
 const ACTIVITY_RAIL_WIDTH = 44;
 const RAIL_ITEM_ATTR = 'data-rail-item';
@@ -74,18 +74,27 @@ export function ActivityRail({ top, bottom, account }) {
                     }
                 }, children: [top, _jsx("div", { style: { flex: 1 } }), bottom] }), account && _jsx(Stack, { pb: 8, children: account })] }));
 }
+/** Sets the buttons after it apart. It carries no `data-rail-item`, so the arrow keys skip it. */
+export function RailDivider() {
+    return _jsx(Divider, { w: 24, my: 2 });
+}
 /** A rail button: icon only, named by `label`, which its tooltip repeats on hover and focus. */
-export const RailButton = forwardRef(function RailButton({ railId, label, icon, active = false, shortcut, count = 0, countTestId, tooltipDisabled, disabledReason, onClick, ...rest }, ref) {
+export const RailButton = forwardRef(function RailButton({ railId, label, icon, active = false, shortcut, count = 0, corner, countTestId, tooltipDisabled, disabledReason, onClick, ...rest }, ref) {
     const reasonId = useId();
     const button = (_jsxs(ActionIcon, { ref: ref, 
         // Filled when active: a tint alone would show the state by colour, under 3:1.
         variant: active ? 'filled' : 'subtle', color: active ? undefined : 'gray', size: "lg", radius: "md", "aria-label": label, ...rest, "aria-disabled": disabledReason ? true : rest['aria-disabled'], "aria-describedby": disabledReason ? reasonId : rest['aria-describedby'], "data-disabled": disabledReason ? true : undefined, onClick: disabledReason ? undefined : onClick, [RAIL_ITEM_ATTR]: railId, children: [icon, disabledReason && (_jsx(VisuallyHidden, { component: "span", id: reasonId, children: disabledReason }))] }));
-    return (_jsx(Tooltip, { label: disabledReason ?? (shortcut ? `${label} (${shortcut})` : label), position: "right", disabled: tooltipDisabled, children: _jsx(Indicator, { label: _jsx("span", { "aria-hidden": true, "data-testid": countTestId, children: count }), size: 16, offset: 4, withBorder: true, disabled: count === 0, styles: {
+    return (_jsx(Tooltip, { label: disabledReason ?? (shortcut ? `${label} (${shortcut})` : label), position: "right", disabled: tooltipDisabled, children: _jsxs(Indicator, { label: _jsx("span", { "aria-hidden": true, "data-testid": countTestId, children: count }), size: 16, offset: 4, withBorder: true, disabled: count === 0, styles: {
                 indicator: {
                     pointerEvents: 'none',
                     // Mantine paints the pill again in a ::before, from this variable.
                     '--indicator-color': 'var(--canopy-count-bg)',
                     '--indicator-text-color': 'var(--mantine-color-text)',
                 },
-            }, children: button }) }));
+            }, children: [button, corner && (_jsx(Box, { component: "span", "aria-hidden": true, pos: "absolute", top: 5, right: 5, style: {
+                        pointerEvents: 'none',
+                        lineHeight: 0,
+                        borderRadius: '50%',
+                        boxShadow: '0 0 0 2px var(--mantine-color-body)',
+                    }, children: corner }))] }) }));
 });

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

@@ -1,14 +1,13 @@
 import { type ReactNode } from 'react';
 export interface EditorShellProps {
     topBar?: ReactNode;
-    banner?: ReactNode;
     rail?: ReactNode;
     panel?: ReactNode;
     main: ReactNode;
     /** Drawers, modals and palettes, each portalling itself into `<body>`. */
     overlays?: ReactNode;
 }
-/** The line between two shell regions, as under the top bar and a shown banner. */
+/** The line between two shell regions, as under the top bar. */
 export declare const SHELL_REGION_BORDER = "1px solid var(--canopy-input-border)";
 /**
  * Every resizable divider in the shell, the panel's and the panes', shows this many pixels wide.
@@ -24,9 +23,9 @@ export declare const DIVIDER_TARGET_PX: {
 /** A divider's colour at rest; held, hovered, dragged or focused it takes `--canopy-focus-ring`. */
 export declare const DIVIDER_COLOR = "var(--canopy-input-border)";
 /**
- * The editor's window: a full-viewport grid of regions (top bar, banner, rail, panel, main,
- * overlays), portalled into `<body>` above the host page, whose chrome it hides and makes inert
- * and whose scrolling it stops. Layout only: features plug into the regions. The rail sits at the
- * inline start, opposite the toasts (`theme.tsx`), and comes first after the banner in focus order.
+ * The editor's window: a full-viewport grid of regions (top bar, rail, panel, main, overlays),
+ * portalled into `<body>` above the host page, whose chrome it hides and makes inert and whose
+ * scrolling it stops. Layout only: features plug into the regions. The rail sits at the inline
+ * start, opposite the toasts (`theme.tsx`), and comes first after the top bar in focus order.
  */
-export declare function EditorShell({ topBar, banner, rail, panel, main, overlays }: EditorShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorShell({ topBar, rail, panel, main, overlays }: EditorShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/shell/EditorShell.js

@@ -4,7 +4,7 @@ import { useRef } from 'react';
 import { Portal, getDefaultZIndex } from '@mantine/core';
 import { RemoveScroll } from 'react-remove-scroll';
 import { useHideHostChrome } from './host-chrome.js';
-/** The line between two shell regions, as under the top bar and a shown banner. */
+/** The line between two shell regions, as under the top bar. */
 export const SHELL_REGION_BORDER = '1px solid var(--canopy-input-border)';
 /**
  * Every resizable divider in the shell, the panel's and the panes', shows this many pixels wide.
@@ -16,10 +16,6 @@ export const DIVIDER_WIDTH_PX = 4;
 export const DIVIDER_TARGET_PX = { fine: 12, coarse: 16 };
 /** A divider's colour at rest; held, hovered, dragged or focused it takes `--canopy-focus-ring`. */
 export const DIVIDER_COLOR = 'var(--canopy-input-border)';
-// A banner component may render nothing, so the region's line follows its content, not the prop.
-const SHELL_STYLES = `
-[data-canopy-region='banner']:not(:empty) { border-block-end: ${SHELL_REGION_BORDER}; }
-`;
 const gridStyle = {
     position: 'fixed',
     inset: 0,
@@ -27,21 +23,21 @@ const gridStyle = {
     // under Mantine's drawers and modals, leaving the layer between for MDXEditor's popups.
     zIndex: getDefaultZIndex('modal') - 2,
     display: 'grid',
-    gridTemplateAreas: '"topbar topbar topbar" "banner banner banner" "rail panel main"',
-    gridTemplateRows: 'auto auto minmax(0, 1fr)',
+    gridTemplateAreas: '"topbar topbar topbar" "rail panel main"',
+    gridTemplateRows: 'auto minmax(0, 1fr)',
     gridTemplateColumns: 'auto auto minmax(0, 1fr)',
     background: 'var(--canopy-surface-subtle)',
     color: 'var(--mantine-color-text)',
 };
 const region = (area) => ({ gridArea: area, minWidth: 0, minHeight: 0 });
 /**
- * The editor's window: a full-viewport grid of regions (top bar, banner, rail, panel, main,
- * overlays), portalled into `<body>` above the host page, whose chrome it hides and makes inert
- * and whose scrolling it stops. Layout only: features plug into the regions. The rail sits at the
- * inline start, opposite the toasts (`theme.tsx`), and comes first after the banner in focus order.
+ * The editor's window: a full-viewport grid of regions (top bar, rail, panel, main, overlays),
+ * portalled into `<body>` above the host page, whose chrome it hides and makes inert and whose
+ * scrolling it stops. Layout only: features plug into the regions. The rail sits at the inline
+ * start, opposite the toasts (`theme.tsx`), and comes first after the top bar in focus order.
  */
-export function EditorShell({ topBar, banner, rail, panel, main, overlays }) {
+export function EditorShell({ topBar, rail, panel, main, overlays }) {
     const anchorRef = useRef(null);
     useHideHostChrome(anchorRef);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true, "data-canopy-shell-anchor": true }), _jsx(Portal, { children: _jsxs(RemoveScroll, { noIsolation: true, removeScrollBar: true, style: gridStyle, "data-canopy-shell": "", children: [_jsx("style", { children: SHELL_STYLES }), topBar && (_jsx("header", { style: region('topbar'), "data-canopy-region": "topbar", children: topBar })), _jsx("div", { style: region('banner'), "data-canopy-region": "banner", children: banner }), rail && (_jsx("aside", { style: region('rail'), "data-canopy-region": "rail", "aria-label": "Editor tools", children: rail })), _jsx("div", { style: region('panel'), "data-canopy-region": "panel", children: panel }), _jsx("main", { style: region('main'), "data-canopy-region": "main", children: main }), _jsx("div", { style: { position: 'absolute' }, "data-canopy-region": "overlays", children: overlays })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true, "data-canopy-shell-anchor": true }), _jsx(Portal, { children: _jsxs(RemoveScroll, { noIsolation: true, removeScrollBar: true, style: gridStyle, "data-canopy-shell": "", children: [topBar && (_jsx("header", { style: region('topbar'), "data-canopy-region": "topbar", children: topBar })), rail && (_jsx("aside", { style: region('rail'), "data-canopy-region": "rail", "aria-label": "Editor tools", children: rail })), _jsx("div", { style: region('panel'), "data-canopy-region": "panel", children: panel }), _jsx("main", { style: region('main'), "data-canopy-region": "main", children: main }), _jsx("div", { style: { position: 'absolute' }, "data-canopy-region": "overlays", children: overlays })] }) })] }));
 }

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

@@ -5,6 +5,7 @@ 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 declare const FORM_PANE_ID = "canopy-form-pane";
 export interface PaneLayoutProps {
     arrangement: PaneArrangement;
     /** The preview's share (percent) beside the form; follows this prop when it changes. */

package/dist/editor/shell/PaneLayout.js

@@ -14,11 +14,14 @@ const FORM = 'canopy-form';
 // the form also keeps a usable minimum in a narrow window.
 const PREVIEW_LIMITS = { minSize: `${SPLIT_PERCENT_MIN}%`, maxSize: `${SPLIT_PERCENT_MAX}%` };
 const FORM_MIN_PX = 160;
+export const FORM_PANE_ID = 'canopy-form-pane';
 const ASIDE_TOP = '--canopy-form-aside-top';
 const ASIDE_WIDTH = '--canopy-form-aside-width';
 // The pointer target is the group's `resizeTargetMinimumSize`, wider than the bar it draws. Lifted
-// over the panes' positioned contents, which would otherwise paint over its focus outline.
-const SEPARATOR_STYLES = `
+// over the panes' positioned contents, which would otherwise paint over its focus outline. The form
+// pane's ring is inset, since the window's edges clip it outside, and repeated on its non-scrolling
+// panel above the pane, whose sticky header would cover it.
+const PANE_STYLES = `
 .canopy-pane-separator {
   position: relative;
   z-index: 1;
@@ -32,6 +35,19 @@ const SEPARATOR_STYLES = `
 .canopy-pane-separator:focus-visible {
   outline: 2px solid var(--canopy-focus-ring);
 }
+#${FORM_PANE_ID}:focus-visible {
+  outline: 2px solid var(--canopy-focus-ring);
+  outline-offset: -2px;
+}
+.canopy-form-panel:has(> #${FORM_PANE_ID}:focus-visible)::after {
+  outline: 2px solid var(--canopy-focus-ring);
+  outline-offset: -2px;
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
 `;
 const splitLayout = (percent) => ({ [PREVIEW]: percent, [FORM]: 100 - percent });
 /** The resizable preview/form split that fills the shell's main region. */
@@ -126,7 +142,7 @@ export function PaneLayout({ arrangement, sideSplitPercent = DEFAULT_SIDE_SPLIT_
     const maximizedStyle = aside
         ? { insetBlock: 0, insetInlineEnd: 0, insetInlineStart: `var(${ASIDE_WIDTH}, 0px)` }
         : { inset: 0 };
-    return (_jsxs("div", { ref: layoutRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsx("style", { children: SEPARATOR_STYLES }), aside && (_jsxs("div", { "data-testid": "form-aside", "data-lifted": previewMaximized || undefined, style: {
+    return (_jsxs("div", { ref: layoutRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsx("style", { children: PANE_STYLES }), aside && (_jsxs("div", { "data-testid": "form-aside", "data-lifted": previewMaximized || undefined, style: {
                     position: 'absolute',
                     insetInlineStart: 0,
                     bottom: 0,
@@ -154,12 +170,14 @@ export function PaneLayout({ arrangement, sideSplitPercent = DEFAULT_SIDE_SPLIT_
                             style: previewMaximized
                                 ? // Over the separator, which sits over the panes.
                                     { overflow: 'auto', position: 'absolute', zIndex: 2, ...maximizedStyle }
-                                : { overflow: 'auto', width: '100%', height: '100%' }, children: preview }) }), _jsx(Separator, { elementRef: separatorRef, "aria-label": "Resize preview and form", className: "canopy-pane-separator" }), _jsx(Panel, { id: FORM, minSize: FORM_MIN_PX, children: _jsxs(Box, { ref: formPanelRef, pos: "relative", h: "100%", 
+                                : { overflow: 'auto', width: '100%', height: '100%' }, children: preview }) }), _jsx(Separator, { elementRef: separatorRef, "aria-label": "Resize preview and form", className: "canopy-pane-separator" }), _jsx(Panel, { id: FORM, minSize: FORM_MIN_PX, children: _jsxs(Box, { ref: formPanelRef, className: "canopy-form-panel", pos: "relative", h: "100%", 
                             // `formOverlay` stacks within this pane, so a maximized preview always covers it.
                             style: {
                                 isolation: 'isolate',
                                 marginInlineStart: aside ? `var(${ASIDE_WIDTH}, 0px)` : undefined,
-                            }, children: [_jsx(Box, { ref: formRef, "data-testid": "form-pane", h: "100%", w: "100%", style: {
+                            }, children: [_jsx(Box, { ref: formRef, id: FORM_PANE_ID, 
+                                    // Takes focus when an opened entry's form has no field to focus.
+                                    tabIndex: -1, role: "region", "aria-label": "Form", "data-testid": "form-pane", h: "100%", w: "100%", style: {
                                         // FormHeader reads this to span the padding.
                                         '--canopy-form-pane-padding': '20px',
                                         padding: 'var(--canopy-form-pane-padding)',