canopycms 0.2.0 → 0.3.0

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)',

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

@@ -17,8 +17,15 @@ export interface SidePanelHostProps {
      * focus in. Opening alone never does, as a panel also opens when stored state loads.
      */
     focusRequest?: number;
+    /**
+     * Escape from inside a docked panel closes it, as an overlay's always does. It also marks the
+     * panel, so a maximized preview's Escape leaves the key to it.
+     */
+    closeOnEscape?: boolean;
     /** Where focus goes when the panel closes with focus inside it. */
     returnFocusTo?: () => HTMLElement | null;
+    /** Focus landed on `target`, outside the panel and what it portals; dropping to nothing isn't. */
+    onFocusLeave?: (target: Element) => void;
     /** Controls beside the title, before the close button. */
     actions?: ReactNode;
     children: ReactNode;
@@ -29,9 +36,9 @@ export interface SidePanelHostProps {
  * A titled side panel, resizable from its inline-end edge. Docked, it pushes its neighbours aside
  * and opens and closes at once: a sliding width would reflow the preview's page on every frame.
  * As an overlay it covers the form pane only, so the preview stays in view, slides in and out as
- * the drawers do unless the user prefers reduced motion, and Escape closes it. A `focusRequest`
- * moves focus to its `data-autofocus` element, else to the panel; closing with focus inside
- * returns focus to `returnFocusTo`.
+ * the drawers do unless the user prefers reduced motion, and Escape closes it, as it does a docked
+ * panel given `closeOnEscape`. A `focusRequest` moves focus to its `data-autofocus` element, else
+ * to the panel; closing with focus inside returns focus to `returnFocusTo`.
  */
-export declare function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest, returnFocusTo, actions, children, id, 'data-testid': testId, }: SidePanelHostProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest, closeOnEscape, returnFocusTo, onFocusLeave, actions, children, id, 'data-testid': testId, }: SidePanelHostProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor/shell/SidePanelHost.js

@@ -49,17 +49,101 @@ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
  * A titled side panel, resizable from its inline-end edge. Docked, it pushes its neighbours aside
  * and opens and closes at once: a sliding width would reflow the preview's page on every frame.
  * As an overlay it covers the form pane only, so the preview stays in view, slides in and out as
- * the drawers do unless the user prefers reduced motion, and Escape closes it. A `focusRequest`
- * moves focus to its `data-autofocus` element, else to the panel; closing with focus inside
- * returns focus to `returnFocusTo`.
+ * the drawers do unless the user prefers reduced motion, and Escape closes it, as it does a docked
+ * panel given `closeOnEscape`. A `focusRequest` moves focus to its `data-autofocus` element, else
+ * to the panel; closing with focus inside returns focus to `returnFocusTo`.
  */
-export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest = 0, returnFocusTo, actions, children, id, 'data-testid': testId, }) {
+export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest = 0, closeOnEscape = false, returnFocusTo, onFocusLeave, actions, children, id, 'data-testid': testId, }) {
     const fallbackId = useId();
     const panelId = id ?? fallbackId;
     const titleId = `${panelId}-title`;
     // State, not a ref: an overlay's section mounts a frame after `opened`, as its slide starts.
     const [panel, setPanel] = useState(null);
     const focusInside = useRef(false);
+    // Drops a leave the watcher below has not reported yet; the panel's own `onFocus` runs it.
+    const cancelFocusLeave = useRef(undefined);
+    const onFocusLeaveRef = useRef(onFocusLeave);
+    useEffect(() => {
+        onFocusLeaveRef.current = onFocusLeave;
+    });
+    const watchFocus = opened && !!onFocusLeave;
+    // Watched on the document, not the panel's blur: focus can drop to nothing first (a click on
+    // text, or on a button in Safari) and then land elsewhere with no blur left to report it.
+    useEffect(() => {
+        if (!watchFocus || !panel)
+            return;
+        let timer;
+        let pressing = false;
+        let pending = null;
+        let frame = null;
+        const report = (target) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => onFocusLeaveRef.current?.(target), 0);
+        };
+        // A caller that closes the panel reflows what the press landed on, losing its click, so a
+        // press waits for its release. The 0ms timer then runs after the click.
+        const leave = (target) => {
+            if (pressing)
+                pending = target;
+            else
+                report(target);
+        };
+        const release = () => {
+            pressing = false;
+            if (pending)
+                report(pending);
+            pending = null;
+        };
+        const onPointerDown = (event) => {
+            if (event.button === 0)
+                pressing = true;
+        };
+        // A press inside a frame never reaches this document, so a frame's leave waits for the pointer
+        // to come back anywhere but the panel, which it may be reaching for; a release outside the
+        // window shows here as a move with no button held.
+        const onPointerMove = (event) => {
+            if (pressing && event.buttons === 0)
+                release();
+            if (!frame || (event.target instanceof Node && panel.contains(event.target)))
+                return;
+            leave(frame);
+            frame = null;
+        };
+        // Captured, so it runs before React's bubbling `onFocus`, which cancels it for a portaled descendant.
+        const onFocusIn = (event) => {
+            if (event.target instanceof Element && !panel.contains(event.target))
+                leave(event.target);
+        };
+        // Focus moving into a frame, such as the preview, reaches this document only as a blur.
+        const onWindowBlur = () => setTimeout(() => {
+            const active = document.activeElement;
+            if (active instanceof HTMLIFrameElement && !panel.contains(active))
+                frame = active;
+        }, 0);
+        cancelFocusLeave.current = () => {
+            clearTimeout(timer);
+            pending = null;
+            frame = null;
+        };
+        const listeners = [
+            [document, 'pointerdown', onPointerDown],
+            [document, 'pointerup', release],
+            [document, 'pointercancel', release],
+            [document, 'pointermove', onPointerMove],
+            [document, 'focusin', onFocusIn],
+            [window, 'blur', onWindowBlur],
+        ];
+        for (const [target, type, listener] of listeners) {
+            target.addEventListener(type, listener, true);
+        }
+        return () => {
+            for (const [target, type, listener] of listeners) {
+                target.removeEventListener(type, listener, true);
+            }
+            clearTimeout(timer);
+            cancelFocusLeave.current = undefined;
+        };
+    }, [watchFocus, panel]);
     const closingWithFocus = useRef(false);
     const wasOpened = useRef(opened);
     const servedFocusRequest = useRef(focusRequest);
@@ -126,11 +210,14 @@ export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth,
         wasOpened.current = opened;
     }, [opened, returnFocusTo]);
     // On the window, not the panel: a dialog portalled from the panel would bubble its Escape here
-    // through React, so only a key from inside the panel's own DOM closes it.
+    // through React, so only a key from inside the panel's own DOM closes it. An Escape that ends
+    // an IME composition only cancels the composition; Safari reports it as keyCode 229.
     useWindowEvent('keydown', (event) => {
         if (opened &&
-            mode === 'overlay' &&
+            (mode === 'overlay' || closeOnEscape) &&
             event.key === 'Escape' &&
+            !event.isComposing &&
+            event.keyCode !== 229 &&
             !event.defaultPrevented &&
             event.target instanceof Node &&
             panel?.contains(event.target)) {
@@ -209,8 +296,9 @@ export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth,
         background: 'var(--mantine-color-body)',
         paddingInlineEnd: DIVIDER_WIDTH_PX,
     };
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), _jsx(Transition, { mounted: opened, transition: rtl ? 'slide-left' : 'slide-right', duration: overlay && !reduceMotion ? SLIDE_MS : 0, children: (transitionStyles) => (_jsxs("section", { ref: setPanel, id: panelId, "aria-labelledby": titleId, tabIndex: -1, "data-testid": testId, "data-panel-mode": mode, [FOCUS_RETURN_ATTR]: opened ? undefined : '', style: { ...style, ...transitionStyles }, onFocus: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), _jsx(Transition, { mounted: opened, transition: rtl ? 'slide-left' : 'slide-right', duration: overlay && !reduceMotion ? SLIDE_MS : 0, children: (transitionStyles) => (_jsxs("section", { ref: setPanel, id: panelId, "aria-labelledby": titleId, tabIndex: -1, "data-testid": testId, "data-panel-mode": mode, "data-mantine-stop-propagation": closeOnEscape ? 'true' : undefined, [FOCUS_RETURN_ATTR]: opened ? undefined : '', style: { ...style, ...transitionStyles }, onFocus: () => {
                         focusInside.current = true;
+                        cancelFocusLeave.current?.();
                     }, onBlur: (event) => {
                         if (!event.currentTarget.contains(event.relatedTarget))
                             focusInside.current = false;

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

@@ -1,12 +1,12 @@
 import { type ReactNode } from 'react';
 export interface TopBarProps {
-    /** Where you are: the breadcrumb and anything that describes the open entry. */
+    /** The branch, at the bar's inline start. */
     leading: ReactNode;
-    /** What you can do: the branch and the actions on it. */
+    /** The actions on the branch, at its inline end. */
     trailing: ReactNode;
 }
 /**
- * The shell's top bar: one 48px row from `md` up. Narrower, `leading` takes a row of its own
- * above `trailing`, which wraps rather than clip a control. Layout only.
+ * The shell's top bar, the branch bar: one 48px row while both sides fit. Narrower, `trailing`
+ * controls that don't fit beside the branch wrap to a second row at the inline end. Layout only.
  */
 export declare function TopBar({ leading, trailing }: TopBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/shell/TopBar.js

@@ -4,12 +4,15 @@ import { Box, Group } from '@mantine/core';
 import { SHELL_REGION_BORDER } from './EditorShell.js';
 const TOP_BAR_HEIGHT = 48;
 /**
- * The shell's top bar: one 48px row from `md` up. Narrower, `leading` takes a row of its own
- * above `trailing`, which wraps rather than clip a control. Layout only.
+ * The shell's top bar, the branch bar: one 48px row while both sides fit. Narrower, `trailing`
+ * controls that don't fit beside the branch wrap to a second row at the inline end. Layout only.
  */
 export function TopBar({ leading, trailing }) {
     return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", px: "sm", py: 6, mih: TOP_BAR_HEIGHT, style: {
             borderBottom: SHELL_REGION_BORDER,
             background: 'var(--mantine-color-body)',
-        }, children: [_jsx(Box, { flex: { base: '1 0 100%', md: '1 1 0%' }, miw: 0, children: leading }), _jsx(Group, { gap: 6, wrap: "wrap", align: "center", justify: "flex-end", flex: { base: '1 0 100%', md: '0 1 auto' }, miw: 0, children: trailing })] }));
+        }, children: [_jsx(Box, { flex: "0 1 auto", miw: 0, children: leading }), _jsx(Group, { gap: 6, wrap: "wrap", align: "center", justify: "flex-end", 
+                // It shares the pill's row while its widest control fits there, and then only the controls
+                // that don't fit wrap, still at the end; narrower, it takes a row of its own.
+                flex: "1 1 0%", miw: "min-content", children: trailing })] }));
 }

package/dist/editor/utils/focus-return.d.ts

@@ -6,9 +6,11 @@ import { type MouseEvent, type RefObject } from 'react';
  */
 export declare const FOCUS_RETURN_ATTR = "data-focus-return";
 /**
- * Focuses `target` unless the user has moved focus on: nothing is focused, or focus is inside an
- * overlay `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
+ * The user has not moved focus on: nothing is focused, or focus is inside an overlay
+ * `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
  */
+export declare function focusIsIdle(): boolean;
+/** Focuses `target` while `focusIsIdle`. */
 export declare function focusIfIdle(target: HTMLElement | null): void;
 /**
  * Run by `useMenuItemFocusReturn` when its menu has closed after an item acted: focuses the menu's
@@ -54,3 +56,9 @@ export declare function useFocusAfterRemove<L extends HTMLElement = HTMLDivEleme
     listRef: RefObject<L>;
     focusAfterRemove: (index: number, fallback: RefObject<HTMLElement | null>) => void;
 };
+/**
+ * Refs for `slots` controls that come and go by turns. Focus dropped by one leaving the page, or by
+ * its menu, moves to its slot's newcomer, else the first slot filled (`target`, which a dialog may
+ * return focus to too); a StrictMode re-attach stays.
+ */
+export declare function useFocusHandOff(slots: number): [Array<(el: HTMLButtonElement | null) => void>, (slot: number) => HTMLButtonElement | null];

package/dist/editor/utils/focus-return.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 /**
  * Mantine's own `returnFocus` records the focused element at open, and a menu item has unmounted
  * with its menu by close, so an overlay opened from one returns focus here instead.
@@ -6,14 +6,17 @@ import { useEffect, useRef, useState } from 'react';
  */
 export const FOCUS_RETURN_ATTR = 'data-focus-return';
 /**
- * Focuses `target` unless the user has moved focus on: nothing is focused, or focus is inside an
- * overlay `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
+ * The user has not moved focus on: nothing is focused, or focus is inside an overlay
+ * `FOCUS_RETURN_ATTR` marks, as a closing one is until after its exit callback.
  */
-export function focusIfIdle(target) {
+export function focusIsIdle() {
     const active = document.activeElement;
-    if (!active || active === document.body || active.closest(`[${FOCUS_RETURN_ATTR}]`)) {
+    return !active || active === document.body || !!active.closest(`[${FOCUS_RETURN_ATTR}]`);
+}
+/** Focuses `target` while `focusIsIdle`. */
+export function focusIfIdle(target) {
+    if (focusIsIdle())
         target?.focus({ preventScroll: true });
-    }
 }
 /**
  * Run by `useMenuItemFocusReturn` when its menu has closed after an item acted: focuses the menu's
@@ -104,3 +107,34 @@ export function useFocusAfterRemove() {
         focusAfterRemove: (index, fallback) => setPending({ index, fallback }),
     };
 }
+/** `el` has focus, or the open menu it controls (`aria-controls`) does. */
+function holdsFocus(el) {
+    const active = document.activeElement;
+    const menuId = el.getAttribute('aria-controls');
+    return active === el || (!!menuId && !!document.getElementById(menuId)?.contains(active));
+}
+/**
+ * Refs for `slots` controls that come and go by turns. Focus dropped by one leaving the page, or by
+ * its menu, moves to its slot's newcomer, else the first slot filled (`target`, which a dialog may
+ * return focus to too); a StrictMode re-attach stays.
+ */
+export function useFocusHandOff(slots) {
+    const controls = useRef([]);
+    const outgoing = useRef(undefined);
+    const target = useCallback((slot) => controls.current[slot] ?? controls.current.find(Boolean) ?? null, []);
+    const refs = useMemo(() => Array.from({ length: slots }, (_, slot) => (el) => {
+        const current = controls.current[slot];
+        if (!el && current && holdsFocus(current))
+            outgoing.current = { el: current, slot };
+        controls.current[slot] = el;
+    }), [slots]);
+    useLayoutEffect(() => {
+        const left = outgoing.current;
+        outgoing.current = undefined;
+        const active = document.activeElement;
+        if (!left || left.el.isConnected || (active && active !== document.body))
+            return;
+        target(left.slot)?.focus({ preventScroll: true });
+    });
+    return [refs, target];
+}

package/dist/operating-mode/client-safe-strategy.d.ts

@@ -7,7 +7,6 @@ import type { OperatingMode, ClientSafeStrategy } from './types.js';
 export declare class ProdClientSafeStrategy implements ClientSafeStrategy {
     readonly mode: OperatingMode;
     supportsBranching(): boolean;
-    supportsStatusBadge(): boolean;
     supportsComments(): boolean;
     supportsPullRequests(): boolean;
     getPermissionsFileName(): string;
@@ -18,7 +17,6 @@ export declare class ProdClientSafeStrategy implements ClientSafeStrategy {
 export declare class DevClientSafeStrategy implements ClientSafeStrategy {
     readonly mode: OperatingMode;
     supportsBranching(): boolean;
-    supportsStatusBadge(): boolean;
     supportsComments(): boolean;
     supportsPullRequests(): boolean;
     getPermissionsFileName(): string;
@@ -31,8 +29,5 @@ export declare class DevClientSafeStrategy implements ClientSafeStrategy {
  * call inline — `clientOperatingStrategy(mode).supportsBranching()`.
  */
 export declare function clientOperatingStrategy(mode: OperatingMode): ClientSafeStrategy;
-/**
- * Mainly for testing.
- * @internal Exported for tests.
- */
+/** @internal Exported for tests. */
 export declare function clearClientStrategyCache(): void;

package/dist/operating-mode/client-safe-strategy.js

@@ -10,9 +10,6 @@ export class ProdClientSafeStrategy {
     supportsBranching() {
         return true;
     }
-    supportsStatusBadge() {
-        return true;
-    }
     supportsComments() {
         return true;
     }
@@ -39,9 +36,6 @@ export class DevClientSafeStrategy {
     supportsBranching() {
         return true;
     }
-    supportsStatusBadge() {
-        return true;
-    }
     supportsComments() {
         return true;
     }
@@ -87,10 +81,7 @@ export function clientOperatingStrategy(mode) {
     clientStrategyCache.set(mode, strategy);
     return strategy;
 }
-/**
- * Mainly for testing.
- * @internal Exported for tests.
- */
+/** @internal Exported for tests. */
 export function clearClientStrategyCache() {
     clientStrategyCache.clear();
 }

package/dist/operating-mode/types.d.ts

@@ -31,16 +31,13 @@ export interface ClientSafeStrategy {
     readonly mode: OperatingMode;
     /** Whether this mode supports multiple branch workspaces */
     supportsBranching(): boolean;
-    supportsStatusBadge(): boolean;
     supportsComments(): boolean;
     supportsPullRequests(): boolean;
     /** Get the permissions file name (e.g., 'permissions.json' or 'permissions.local.json') */
     getPermissionsFileName(): string;
     /** Get the groups file name (e.g., 'groups.json' or 'groups.local.json') */
     getGroupsFileName(): string;
-    /** Whether git commits should be made in this mode */
     shouldCommit(): boolean;
-    /** Whether git pushes should be made in this mode */
     shouldPush(): boolean;
 }
 /** The full strategy, including Node.js APIs. Server-side imports only. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const CANOPYCMS_VERSION = "0.2.0";
+export declare const CANOPYCMS_VERSION = "0.3.0";

package/dist/version.js

@@ -1,3 +1,3 @@
 // Generated by scripts/bump-version.mjs, its only writer. The package builds with plain
 // tsc (rootDir: src), so src/ cannot import ../package.json; version.test.ts keeps the two equal.
-export const CANOPYCMS_VERSION = '0.2.0';
+export const CANOPYCMS_VERSION = '0.3.0';

package/package.json

@@ -1,7 +1,7 @@
 {
   "//": "@codemirror/language, @lezer/highlight: workaround — @mdxeditor/editor uses cm6-theme-basic-light which peer-requires these but mdxeditor doesn't declare them as dependencies",
   "name": "canopycms",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CanopyCMS core package: schema-driven content, branch-aware editing, and editor UI for Next.js.",
   "license": "MIT",
   "repository": {

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

@@ -1,23 +0,0 @@
-import type { BranchStatus } from '../../types.js';
-export interface BranchLockInput {
-    branchStatus: BranchStatus | undefined;
-    /** The protected base branch, read-only in prod. */
-    branchReadOnly?: boolean;
-    branchWriteBlocked?: boolean;
-}
-/**
- * Whether the banner renders; the top bar reads the same answer, so the two cannot drift.
- * @internal Exported for tests.
- */
-export declare function branchLockBannerShown(lock: BranchLockInput): boolean;
-/**
- * Why the branch takes no writes, with the way forward; undefined when it does take them. The
- * top bar's Save and the navigator's row locks say this; the banner describes the same lock.
- */
-export declare function describeBranchLock(lock: BranchLockInput): string | undefined;
-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;