canopycms 0.1.0 → 0.2.0-int.119

package/dist/editor/shell/EditorShell.js

@@ -4,6 +4,22 @@ 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. */
+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.
+ * Its pointer target is wider, `DIVIDER_TARGET_PX`. A finger's reaches 6px past each side of the
+ * bar: under the panes' separator, the narrow window's overlay panel keeps its header's close
+ * button clear, as that header's top padding is 10px.
+ */
+export 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,5 +43,5 @@ const region = (area) => ({ gridArea: area, minWidth: 0, minHeight: 0 });
 export function EditorShell({ topBar, banner, 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: [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: [_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 })] }) })] }));
 }

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type DrawerRootProps } from '@mantine/core';
+interface OverlayHeaderProps {
+    title: React.ReactNode;
+    /** Sits beside the title and is part of its accessible name, such as a status badge. */
+    adornment?: React.ReactNode;
+    /** For a drawer that moves focus to its title. */
+    titleRef?: React.Ref<HTMLHeadingElement>;
+    titleTabIndex?: number;
+}
+export interface OverlayDrawerProps extends Omit<DrawerRootProps, 'children' | 'title' | 'padding'>, OverlayHeaderProps {
+    children: React.ReactNode;
+}
+/**
+ * A Mantine `Drawer` with an `OverlayHeader`, a blurred backdrop and a body padded under the rule.
+ * It is a `Drawer.Root`, so theme overrides for it go under `DrawerRoot`, not `Drawer`.
+ */
+export declare const OverlayDrawer: React.FC<OverlayDrawerProps>;
+export {};

package/dist/editor/shell/OverlayHeader.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Drawer, Group } from '@mantine/core';
+/**
+ * The header of every right-hand drawer, sized and ruled like the content panel's header in
+ * `SidePanelHost`: a 16px semibold title, a default-size close button, `md` by `xs` padding and a
+ * 1px bottom rule. It is the drawer's own `Drawer.Header`, so the title labels the dialog and the
+ * header stays pinned while the body scrolls.
+ */
+const OverlayHeader = ({ title, adornment, titleRef, titleTabIndex, }) => (_jsxs(Drawer.Header, { mih: 0, px: "md", py: "xs", style: { borderBlockEnd: '1px solid var(--canopy-input-border)' }, children: [_jsx(Drawer.Title, { ref: titleRef, tabIndex: titleTabIndex, fw: 600, fz: "md", miw: 0, children: _jsxs(Group, { component: "span", gap: "xs", wrap: "nowrap", children: [title, adornment] }) }), _jsx(Drawer.CloseButton, { "aria-label": "Close" })] }));
+/**
+ * A Mantine `Drawer` with an `OverlayHeader`, a blurred backdrop and a body padded under the rule.
+ * It is a `Drawer.Root`, so theme overrides for it go under `DrawerRoot`, not `Drawer`.
+ */
+export const OverlayDrawer = ({ title, adornment, titleRef, titleTabIndex, children, ...root }) => (_jsxs(Drawer.Root, { padding: "md", ...root, children: [_jsx(Drawer.Overlay, { blur: 2 }), _jsxs(Drawer.Content, { children: [_jsx(OverlayHeader, { title: title, adornment: adornment, titleRef: titleRef, titleTabIndex: titleTabIndex }), _jsx(Drawer.Body, { pt: "md", children: children })] })] }));

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

@@ -17,6 +17,11 @@ export interface PaneLayoutProps {
     form?: React.ReactNode;
     /** Laid over the form pane, outside its scrolling: the side panel in overlay mode. */
     formOverlay?: React.ReactNode;
+    /**
+     * Stacked arrangement only: docked at the form pane's inline start, pushing the form aside, so
+     * the preview above keeps its full width. A maximized preview leaves it beside it, full height.
+     */
+    formAside?: React.ReactNode;
     /** Takes the form out of focus and the pointer's reach while an open `formOverlay` hides it. */
     formInert?: boolean;
     /** Lays the preview over the whole layout, form and separator inert, without remounting it. */
@@ -25,4 +30,4 @@ export interface PaneLayoutProps {
     onSeparatorDrag?: (dragging: boolean) => void;
 }
 /** The resizable preview/form split that fills the shell's main region. */
-export declare function PaneLayout({ arrangement, sideSplitPercent, stackedSplitPercent, onSplitPercentChange, preview, form, formOverlay, formInert, previewMaximized, onSeparatorDrag, }: PaneLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function PaneLayout({ arrangement, sideSplitPercent, stackedSplitPercent, onSplitPercentChange, preview, form, formOverlay, formAside, formInert, previewMaximized, onSeparatorDrag, }: PaneLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/shell/PaneLayout.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from 'react';
 import { Box } from '@mantine/core';
 import { Group, Panel, Separator, useGroupRef } from 'react-resizable-panels';
+import { DIVIDER_COLOR, DIVIDER_TARGET_PX, DIVIDER_WIDTH_PX } from './EditorShell.js';
 export const SPLIT_PERCENT_MIN = 15;
 export const SPLIT_PERCENT_MAX = 85;
 export const DEFAULT_SIDE_SPLIT_PERCENT = 52;
@@ -13,29 +14,35 @@ 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;
+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 = `
 .canopy-pane-separator {
-  min-width: 8px;
-  min-height: 8px;
-  background: var(--canopy-surface-muted);
-  box-shadow: inset 0 0 0 1px var(--canopy-input-border);
+  position: relative;
+  z-index: 1;
+  min-width: ${DIVIDER_WIDTH_PX}px;
+  min-height: ${DIVIDER_WIDTH_PX}px;
+  background: ${DIVIDER_COLOR};
 }
-.canopy-pane-separator:is([data-separator='hover'], [data-separator='active']) {
+.canopy-pane-separator:is([data-separator='hover'], [data-separator='active'], :focus-visible) {
   background: var(--canopy-focus-ring);
 }
 .canopy-pane-separator:focus-visible {
   outline: 2px solid var(--canopy-focus-ring);
-  outline-offset: -2px;
 }
 `;
 const splitLayout = (percent) => ({ [PREVIEW]: percent, [FORM]: 100 - percent });
 /** The resizable preview/form split that fills the shell's main region. */
-export function PaneLayout({ arrangement, sideSplitPercent = DEFAULT_SIDE_SPLIT_PERCENT, stackedSplitPercent = DEFAULT_STACKED_SPLIT_PERCENT, onSplitPercentChange, preview, form, formOverlay, formInert = false, previewMaximized = false, onSeparatorDrag, }) {
+export function PaneLayout({ arrangement, sideSplitPercent = DEFAULT_SIDE_SPLIT_PERCENT, stackedSplitPercent = DEFAULT_STACKED_SPLIT_PERCENT, onSplitPercentChange, preview, form, formOverlay, formAside, formInert = false, previewMaximized = false, onSeparatorDrag, }) {
     const groupRef = useGroupRef();
     const separatorRef = useRef(null);
     const previewRef = useRef(null);
     const formRef = useRef(null);
     const formPanelRef = useRef(null);
+    const layoutRef = useRef(null);
+    const asideProbeRef = useRef(null);
     const percent = arrangement === 'side' ? sideSplitPercent : stackedSplitPercent;
     // Stored sizes load after mount, and the group must never remount: that would reload the preview.
     useEffect(() => {
@@ -53,6 +60,36 @@ export function PaneLayout({ arrangement, sideSplitPercent = DEFAULT_SIDE_SPLIT_
         formPanelRef.current?.toggleAttribute('inert', previewMaximized);
         separatorRef.current?.toggleAttribute('inert', previewMaximized);
     }, [formInert, previewMaximized]);
+    const aside = arrangement === 'stacked' ? formAside : undefined;
+    const hasAside = Boolean(aside);
+    // The aside precedes the panes in the DOM, so focus reaches it first, as it reaches the shell's
+    // panel column first side by side. It is placed from the form row's measured top, and the form
+    // and a maximized preview start at its measured width. Written straight to CSS variables, so a
+    // drag moves them in the frame it moves the split.
+    useLayoutEffect(() => {
+        const layout = layoutRef.current;
+        if (!layout || !hasAside)
+            return;
+        const measure = () => {
+            const top = layout.getBoundingClientRect().top;
+            const formTop = formPanelRef.current?.getBoundingClientRect().top ?? top;
+            layout.style.setProperty(ASIDE_TOP, `${formTop - top}px`);
+            const width = asideProbeRef.current?.getBoundingClientRect().width ?? 0;
+            layout.style.setProperty(ASIDE_WIDTH, `${width}px`);
+        };
+        measure();
+        // The probe has no height, so moving the aside's top never resizes what is observed.
+        const observer = new ResizeObserver(measure);
+        for (const element of [layout, formPanelRef.current, asideProbeRef.current]) {
+            if (element)
+                observer.observe(element);
+        }
+        return () => {
+            observer.disconnect();
+            layout.style.removeProperty(ASIDE_TOP);
+            layout.style.removeProperty(ASIDE_WIDTH);
+        };
+    }, [hasAside]);
     const onSeparatorDragRef = useRef(onSeparatorDrag);
     useEffect(() => {
         onSeparatorDragRef.current = onSeparatorDrag;
@@ -84,7 +121,19 @@ export function PaneLayout({ arrangement, sideSplitPercent = DEFAULT_SIDE_SPLIT_
         return () => observer.disconnect();
     }, [groupRef]);
     const side = arrangement === 'side';
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: SEPARATOR_STYLES }), _jsxs(Group, { groupRef: groupRef, orientation: side ? 'horizontal' : 'vertical', defaultLayout: splitLayout(percent), 
+    // A maximized preview leaves a docked `aside` beside it, now the layout's full height, as the
+    // shell's own panel column stays beside it in the side arrangement.
+    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: {
+                    position: 'absolute',
+                    insetInlineStart: 0,
+                    bottom: 0,
+                    top: previewMaximized ? 0 : `var(${ASIDE_TOP}, 0px)`,
+                    // Over a maximized preview, which would cover its separator's target and focus ring.
+                    zIndex: previewMaximized ? 3 : 1,
+                }, children: [aside, _jsx("div", { ref: asideProbeRef, "aria-hidden": true, style: { height: 0 } })] })), _jsxs(Group, { groupRef: groupRef, orientation: side ? 'horizontal' : 'vertical', resizeTargetMinimumSize: DIVIDER_TARGET_PX, defaultLayout: splitLayout(percent), 
                 // The hidden separator would otherwise still take drags over a maximized preview: the
                 // library hit-tests separators by their rectangles, which `inert` leaves in place.
                 disabled: previewMaximized, onLayoutChange: (layout) => {
@@ -100,11 +149,17 @@ export function PaneLayout({ arrangement, sideSplitPercent = DEFAULT_SIDE_SPLIT_
                         onSplitPercentChange?.(arrangement, next);
                 }, 
                 // The maximized preview's containing block: the panels themselves are unpositioned.
-                style: { height: '100%', width: '100%', position: 'relative' }, children: [_jsx(Panel, { id: PREVIEW, ...PREVIEW_LIMITS, children: _jsx(Box, { ref: previewRef, "data-testid": "preview-pane", "data-maximized": previewMaximized || undefined, h: "100%", w: "100%", style: previewMaximized
-                                ? { overflow: 'auto', position: 'absolute', inset: 0, zIndex: 1 }
-                                : { overflow: 'auto' }, 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%", w: "100%", 
+                style: { height: '100%', width: '100%', position: 'relative' }, children: [_jsx(Panel, { id: PREVIEW, ...PREVIEW_LIMITS, children: _jsx(Box, { ref: previewRef, "data-testid": "preview-pane", "data-maximized": previewMaximized || undefined, 
+                            // Sized in `style`, not by props: Mantine's style props would override the insets.
+                            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%", 
                             // `formOverlay` stacks within this pane, so a maximized preview always covers it.
-                            style: { isolation: 'isolate' }, children: [_jsx(Box, { ref: formRef, "data-testid": "form-pane", h: "100%", w: "100%", style: {
+                            style: {
+                                isolation: 'isolate',
+                                marginInlineStart: aside ? `var(${ASIDE_WIDTH}, 0px)` : undefined,
+                            }, children: [_jsx(Box, { ref: formRef, "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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-/** Docked beside the main region, or laid over the form pane only. */
+/** Docked, pushing its neighbours aside, or laid over the form pane only. */
 type SidePanelMode = 'docked' | 'overlay';
 export interface SidePanelHostProps {
     title: string;
@@ -26,10 +26,12 @@ export interface SidePanelHostProps {
     'data-testid'?: string;
 }
 /**
- * A titled side panel, resizable from its inline-end edge. Docked, it is a column of the shell;
- * as an overlay it covers the form pane only, so the preview stays in view, 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`.
+ * 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`.
  */
-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 | null;
+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 {};

package/dist/editor/shell/SidePanelHost.js

@@ -1,58 +1,89 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState, } from 'react';
-import { CloseButton, Group, Text, Tooltip } from '@mantine/core';
-import { useWindowEvent } from '@mantine/hooks';
-import { focusIfIdle } from '../utils/focus-return.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { CloseButton, Group, Text, Tooltip, Transition } from '@mantine/core';
+import { useReducedMotion, useWindowEvent } from '@mantine/hooks';
+import { FOCUS_RETURN_ATTR, focusIfIdle } from '../utils/focus-return.js';
+import { DIVIDER_COLOR, DIVIDER_TARGET_PX, DIVIDER_WIDTH_PX } from './EditorShell.js';
 const KEY_STEP_PX = 16;
 const RESIZING_ATTR = 'data-canopy-panel-resizing';
+/** The drawers' slide: Mantine's `Transition` default. */
+const SLIDE_MS = 250;
+const targetOverhang = (target) => (target - DIVIDER_WIDTH_PX) / 2;
+// The separator is the panel's last pixels; its `::before` is the wider pointer target.
 const PANEL_STYLES = `
 body[${RESIZING_ATTR}] { cursor: col-resize; user-select: none; }
 body[${RESIZING_ATTR}] iframe { pointer-events: none; }
 .canopy-side-panel-separator {
   position: absolute;
   inset-block: 0;
-  inset-inline-end: -3px;
-  width: 6px;
+  inset-inline-end: 0;
+  width: ${DIVIDER_WIDTH_PX}px;
+  background: ${DIVIDER_COLOR};
   cursor: col-resize;
   touch-action: none;
   z-index: 1;
 }
+.canopy-side-panel-separator::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline: -${targetOverhang(DIVIDER_TARGET_PX.fine)}px;
+}
+@media (pointer: coarse) {
+  .canopy-side-panel-separator::before {
+    inset-inline: -${targetOverhang(DIVIDER_TARGET_PX.coarse)}px;
+  }
+}
 .canopy-side-panel-separator:hover,
+.canopy-side-panel-separator:focus-visible,
 .canopy-side-panel-separator[data-dragging] {
   background: var(--canopy-focus-ring);
 }
 .canopy-side-panel-separator:focus-visible {
   outline: 2px solid var(--canopy-focus-ring);
-  outline-offset: -2px;
 }
 `;
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 /**
- * A titled side panel, resizable from its inline-end edge. Docked, it is a column of the shell;
- * as an overlay it covers the form pane only, so the preview stays in view, 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`.
+ * 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`.
  */
 export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth, onWidthChange, onClose, focusRequest = 0, returnFocusTo, actions, children, id, 'data-testid': testId, }) {
     const fallbackId = useId();
     const panelId = id ?? fallbackId;
     const titleId = `${panelId}-title`;
-    const panelRef = useRef(null);
+    // 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);
+    const closingWithFocus = useRef(false);
     const wasOpened = useRef(opened);
     const servedFocusRequest = useRef(focusRequest);
+    const reduceMotion = useReducedMotion();
+    // The slide's direction, read from the page as each opening starts, as the resize keys read it.
+    const anchorRef = useRef(null);
+    const [rtl, setRtl] = useState(false);
+    useLayoutEffect(() => {
+        const anchor = anchorRef.current;
+        if (opened && anchor)
+            setRtl(getComputedStyle(anchor).direction === 'rtl');
+    }, [opened]);
     const drag = useRef(null);
     const [dragWidth, setDragWidth] = useState(null);
     if (!opened && dragWidth !== null)
         setDragWidth(null);
     const shownWidth = clamp(dragWidth ?? width, minWidth, maxWidth);
     useEffect(() => {
-        const panel = panelRef.current;
-        const asked = opened && focusRequest !== servedFocusRequest.current;
-        servedFocusRequest.current = focusRequest;
-        if (!asked || !panel)
+        // A request made while closed lapses; one made as it opens waits for the section to mount.
+        if (!opened)
+            servedFocusRequest.current = focusRequest;
+        if (!opened || !panel || focusRequest === servedFocusRequest.current)
             return;
+        servedFocusRequest.current = focusRequest;
         const autofocus = () => panel.querySelector('[data-autofocus]');
         const field = autofocus();
         if (field) {
@@ -73,13 +104,21 @@ export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth,
         });
         observer.observe(panel, { childList: true, subtree: true });
         return () => observer.disconnect();
-    }, [opened, focusRequest]);
+    }, [opened, focusRequest, panel]);
+    // A sliding-out overlay is inert, so it neither holds focus nor takes the pointer. Whether focus
+    // was inside is read first, as `inert` can blur it.
+    useLayoutEffect(() => {
+        if (!opened && wasOpened.current)
+            closingWithFocus.current = focusInside.current;
+        panel?.toggleAttribute('inert', !opened);
+    }, [opened, panel]);
     useEffect(() => {
         if (!opened && wasOpened.current) {
-            // Its separator is gone, and with it the pointer capture that would have ended a drag.
+            // Its separator is gone or inert, and with it the pointer capture that would end a drag.
             drag.current = null;
             document.body.removeAttribute(RESIZING_ATTR);
-            if (focusInside.current) {
+            if (closingWithFocus.current) {
+                closingWithFocus.current = false;
                 focusInside.current = false;
                 focusIfIdle(returnFocusTo?.() ?? null);
             }
@@ -94,15 +133,13 @@ export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth,
             event.key === 'Escape' &&
             !event.defaultPrevented &&
             event.target instanceof Node &&
-            panelRef.current?.contains(event.target)) {
+            panel?.contains(event.target)) {
             event.preventDefault();
             onClose();
         }
     });
     // A drag cut short by unmounting must not leave the page's iframes deaf to the pointer.
     useEffect(() => () => document.body.removeAttribute(RESIZING_ATTR), []);
-    if (!opened)
-        return null;
     const endDrag = () => {
         const state = drag.current;
         if (!state)
@@ -170,15 +207,15 @@ export function SidePanelHost({ title, mode, opened, width, minWidth, maxWidth,
         display: 'flex',
         flexDirection: 'column',
         background: 'var(--mantine-color-body)',
-        borderInlineEnd: '1px solid var(--canopy-input-border)',
+        paddingInlineEnd: DIVIDER_WIDTH_PX,
     };
-    return (_jsxs("section", { ref: panelRef, id: panelId, "aria-labelledby": titleId, tabIndex: -1, "data-testid": testId, "data-panel-mode": mode, style: style, onFocus: () => {
-            focusInside.current = true;
-        }, onBlur: (event) => {
-            if (!event.currentTarget.contains(event.relatedTarget))
-                focusInside.current = false;
-        }, children: [_jsx("style", { children: PANEL_STYLES }), _jsxs(Group, { justify: "space-between", wrap: "nowrap", gap: "xs", px: "md", py: "xs", style: { borderBlockEnd: '1px solid var(--canopy-input-border)' }, children: [_jsx(Text, { id: titleId, component: "h2", fw: 600, size: "md", m: 0, children: title }), _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [actions, _jsx(Tooltip, { label: `Close ${title.toLowerCase()} panel`, children: _jsx(CloseButton, { "aria-label": `Close ${title.toLowerCase()} panel`, onClick: onClose }) })] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: children }), _jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${title.toLowerCase()} panel`, "aria-controls": panelId, "aria-valuenow": Math.round(shownWidth), "aria-valuemin": minWidth, "aria-valuemax": maxWidth, 
-                // A focusable separator is a window splitter, a widget; jsx-a11y counts every one static.
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, className: "canopy-side-panel-separator", "data-dragging": dragWidth !== null || undefined, ...separatorHandlers })] }));
+    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: () => {
+                        focusInside.current = true;
+                    }, onBlur: (event) => {
+                        if (!event.currentTarget.contains(event.relatedTarget))
+                            focusInside.current = false;
+                    }, children: [_jsx("style", { children: PANEL_STYLES }), _jsxs(Group, { justify: "space-between", wrap: "nowrap", gap: "xs", px: "md", py: "xs", style: { borderBlockEnd: '1px solid var(--canopy-input-border)' }, children: [_jsx(Text, { id: titleId, component: "h2", fw: 600, size: "md", m: 0, children: title }), _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [actions, _jsx(Tooltip, { label: `Close ${title.toLowerCase()} panel`, children: _jsx(CloseButton, { "aria-label": `Close ${title.toLowerCase()} panel`, onClick: onClose }) })] })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: children }), _jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${title.toLowerCase()} panel`, "aria-controls": panelId, "aria-valuenow": Math.round(shownWidth), "aria-valuemin": minWidth, "aria-valuemax": maxWidth, 
+                            // A focusable separator is a window splitter, a widget; jsx-a11y counts every one static.
+                            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                            tabIndex: 0, className: "canopy-side-panel-separator", "data-dragging": dragWidth !== null || undefined, ...separatorHandlers })] })) })] }));
 }

package/dist/editor/shell/TopBar.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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
@@ -8,7 +9,7 @@ const TOP_BAR_HEIGHT = 48;
  */
 export function TopBar({ leading, trailing }) {
     return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", px: "sm", py: 6, mih: TOP_BAR_HEIGHT, style: {
-            borderBottom: '1px solid var(--canopy-input-border)',
+            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 })] }));
 }

package/dist/editor/theme.js

@@ -254,6 +254,7 @@ const primaryFill = (theme, scheme) => {
  * dark, at 3:1 on gray.1 or dark.5. Mantine draws focus rings, focused borders and a checked
  * Switch in `--mantine-primary-color-filled`, so that becomes the ring; `canopyComponents` points
  * Checkbox, Radio and Tabs at it. A tick on it is white, or black where white is under 3:1.
+ * `--canopy-unsaved-mark` is the same colour, named for the dot that marks unsaved changes.
  */
 const focusRing = (theme, scheme) => {
     const scale = theme.colors[theme.primaryColor];
@@ -274,6 +275,7 @@ const focusRing = (theme, scheme) => {
                 ? ring.value
                 : `var(--mantine-color-${theme.primaryColor}-${ring.shade})`,
         '--canopy-focus-ring-contrast': contrast,
+        '--canopy-unsaved-mark': 'var(--canopy-focus-ring)',
         '--mantine-primary-color-filled': 'var(--canopy-focus-ring)',
     };
 };

package/dist/editor/undo-removal.d.ts

@@ -3,12 +3,18 @@ import type { CommentThread } from '../comment-store.js';
 import { type CanopyPathSegment } from './canopy-path.js';
 /**
  * One list a removal sits inside (a block list, or an object list holding the removed item's
- * list): the index of the item enclosing the removal, and every other item.
+ * list): the index of the item enclosing the removal, and that item's `ITEM_KEY`, which an edit
+ * or a move keeps. An item with no usable key is anchored by every other item's content instead.
  */
-export interface RemovalAnchor {
+export type RemovalAnchor = {
     index: number;
+} & ({
+    key: string;
+    siblings?: never;
+} | {
+    key?: never;
     siblings: unknown[];
-}
+});
 /**
  * What a form's Remove took out, for Undo. Paths are canopy paths (`blocks[2].items`), which skip
  * a block's `value` wrapper; `restoreRemoval` resolves them against the value it restores into.
@@ -30,11 +36,10 @@ export type FieldRemoval = ({
 }) & {
     /**
      * The enclosing lists as they were before the removal (`removalAnchors`). Undo puts nothing
-     * back once one has changed, so an item never lands in whichever block now holds its index.
+     * back once another item holds an enclosing index, so an item never lands in whichever block
+     * now holds it; an edit to any item keeps a keyed anchor.
      */
     anchors?: RemovalAnchor[];
-    /** `clear` for an optional object's Clear, which its toast calls clearing, not removing. */
-    action?: 'remove' | 'clear';
 };
 /**
  * The canopy path `restoreRemoval` puts a removal back at: a list item returns to its old index,
@@ -43,13 +48,17 @@ export type FieldRemoval = ({
 export declare function restoredFieldPath(fields: readonly FieldConfig[], value: Record<string, unknown>, removal: FieldRemoval): CanopyPathSegment[];
 /** The enclosing lists of a removal in `value`, taken before the removal applies; see `anchors`. */
 export declare function removalAnchors(fields: readonly FieldConfig[], value: Record<string, unknown>, removal: FieldRemoval): RemovalAnchor[] | undefined;
+/** Whether `restoreRemoval` would put the removal back, without building the restored value. */
+export declare const canRestoreRemoval: (fields: readonly FieldConfig[], value: Record<string, unknown>, removal: FieldRemoval) => boolean;
 /**
- * `value` with a removal put back, or undefined when it can't be: the list or field is gone, an
- * enclosing list has changed, the item is already there, or the image field has been filled.
- * Edits made after the removal are kept, because it changes only the one list or field, in the
- * value as it is now.
+ * `value` with a removal put back, or undefined when it can't be: the list or field is gone,
+ * another item holds an enclosing index, the item is already there, or the image field or object
+ * has been filled. Edits made after the removal are kept, because it changes only the one list or
+ * field, in the value as it is now.
  */
 export declare function restoreRemoval(fields: readonly FieldConfig[], value: Record<string, unknown>, removal: FieldRemoval): Record<string, unknown> | undefined;
+/** Where a removal's moved threads went, said with its Undo; undefined when none moved. */
+export declare const movedThreadsNote: (count: number) => string | undefined;
 /**
  * How many open field threads a removal at `path` moves to the entry: those inside it keyed to an
  * item at or below it. One keyed only above stays on its field, which a Clear leaves in place.