canopycms 0.1.0 → 0.2.0-int.121

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.d.ts

@@ -4,6 +4,7 @@ import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dropzone/styles.css';
+import 'react-image-crop/dist/ReactCrop.css';
 import '@mdxeditor/editor/style.css';
 export type CanopyColorInput = MantineColorsTuple | string;
 export interface CanopyColorConfig {

package/dist/editor/theme.js

@@ -10,6 +10,7 @@ import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/dropzone/styles.css';
+import 'react-image-crop/dist/ReactCrop.css';
 import '@mdxeditor/editor/style.css';
 const defaultCanopyColors = {
     brand: '#3b82f6',
@@ -254,6 +255,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 +276,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)',
     };
 };
@@ -316,7 +319,8 @@ const canopyCssVariablesResolver = (theme) => ({
  * What Mantine draws from class rules, out of the theme variables' reach: unchecked control borders,
  * Switch thumbs, white text on the primary colour (moved to the fill), and dimmed text Mantine
  * draws itself (a blocked menu item, a combobox's empty message, outside days). Outside days lose
- * Mantine's half opacity, under 4.5:1.
+ * Mantine's half opacity, under 4.5:1. The crop box and its handles sit on an arbitrary image, where
+ * no single colour holds 3:1, so they take a white and black pair.
  */
 const CANOPY_STYLES = `
 .mantine-Checkbox-input:not(:checked, :disabled, [data-indeterminate], [data-error]),
@@ -335,6 +339,20 @@ const CANOPY_STYLES = `
   --switch-thumb-bg: var(--canopy-switch-thumb-on, var(--mantine-color-white));
   --switch-thumb-bd: var(--canopy-switch-thumb-on, var(--mantine-color-white));
 }
+.ReactCrop .ReactCrop__crop-selection:focus {
+  outline: 2px solid var(--mantine-color-white);
+  outline-offset: 0;
+  box-shadow: 0 0 0 4px var(--mantine-color-black);
+}
+.ReactCrop .ReactCrop__drag-handle {
+  --rc-drag-handle-bg-colour: var(--mantine-color-white);
+  border-color: var(--mantine-color-black);
+}
+.ReactCrop .ReactCrop__drag-handle:focus {
+  background: var(--canopy-focus-ring);
+  outline: 2px solid var(--mantine-color-white);
+  box-shadow: 0 0 0 4px var(--mantine-color-black);
+}
 [data-combobox-selected] {
   --mantine-primary-color-filled: var(--canopy-primary-fill);
 }

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.

package/dist/editor/undo-removal.js

@@ -1,6 +1,12 @@
 import equal from 'fast-deep-equal';
+import { ITEM_KEY, isItemKey } from '../item-keys.js';
 import { isPlainRecord } from '../validation/field-traversal.js';
 import { normalizeCanopyPath, parseCanopyPath } from './canopy-path.js';
+const itemKeyAt = (list, index) => {
+    const item = list[index];
+    const key = isPlainRecord(item) ? item[ITEM_KEY] : undefined;
+    return isItemKey(key) ? key : undefined;
+};
 const findField = (fields, name) => {
     for (const field of fields) {
         if (field.type === 'group') {
@@ -22,8 +28,8 @@ const resolvePath = (fields, value, path) => {
     let scope = fields;
     let node = value;
     const out = [];
-    const anchors = [];
-    const anchor = (list, index) => anchors.push({ index, siblings: list.filter((_, i) => i !== index) });
+    const lists = [];
+    const anchor = (list, index) => lists.push({ list, index });
     let i = 0;
     while (i < path.length) {
         const name = path[i];
@@ -34,7 +40,7 @@ const resolvePath = (fields, value, path) => {
         node = isPlainRecord(node) ? node[name] : undefined;
         i += 1;
         if (i === path.length)
-            return { path: out, anchors };
+            return { path: out, lists };
         const index = path[i];
         if (field.type === 'block') {
             const block = typeof index === 'number' && Array.isArray(node) ? node[index] : undefined;
@@ -65,7 +71,7 @@ const resolvePath = (fields, value, path) => {
             return undefined;
         }
     }
-    return { path: out, anchors };
+    return { path: out, lists };
 };
 const getAt = (root, path) => path.reduce((node, segment) => {
     if (typeof segment === 'number')
@@ -89,9 +95,15 @@ const sameContent = (a, b) => equal(JSON.parse(JSON.stringify(a ?? null)), JSON.
 const removalPath = (removal) => removal.kind === 'list-item' ? removal.listPath : removal.path;
 const anchorsHold = (then, now) => then === undefined ||
     (then.length === now.length &&
-        then.every((anchor, i) => anchor.index === now[i].index &&
+        then.every((anchor, i) => {
+            const { list, index } = now[i];
+            if (anchor.index !== index)
+                return false;
+            if (anchor.key !== undefined)
+                return itemKeyAt(list, index) === anchor.key;
             // By content as stored, so the server's copy of the same items still holds.
-            sameContent(anchor.siblings, now[i].siblings)));
+            return sameContent(anchor.siblings, list.filter((_, j) => j !== index));
+        }));
 /**
  * The canopy path `restoreRemoval` puts a removal back at: a list item returns to its old index,
  * or to the list's end when the list is now shorter than that.
@@ -105,17 +117,17 @@ export function restoredFieldPath(fields, value, removal) {
 }
 /** The enclosing lists of a removal in `value`, taken before the removal applies; see `anchors`. */
 export function removalAnchors(fields, value, removal) {
-    return resolvePath(fields, value, removalPath(removal))?.anchors;
+    return resolvePath(fields, value, removalPath(removal))?.lists.map(({ list, index }) => {
+        const key = itemKeyAt(list, index);
+        return key !== undefined
+            ? { index, key }
+            : { index, siblings: list.filter((_, j) => j !== index) };
+    });
 }
-/**
- * `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.
- */
-export function restoreRemoval(fields, value, removal) {
+/** Where and what `restoreRemoval` writes, or undefined when it can't; see there. */
+const planRestore = (fields, value, removal) => {
     const resolved = resolvePath(fields, value, removalPath(removal));
-    if (!resolved || !anchorsHold(removal.anchors, resolved.anchors))
+    if (!resolved || !anchorsHold(removal.anchors, resolved.lists))
         return undefined;
     const { path } = resolved;
     // An enclosing object cleared since would come back holding only this.
@@ -139,9 +151,25 @@ export function restoreRemoval(fields, value, removal) {
             return undefined;
         next = removal.value;
     }
-    const restored = setAt(value, path, next);
+    return { path, next };
+};
+/** Whether `restoreRemoval` would put the removal back, without building the restored value. */
+export const canRestoreRemoval = (fields, value, removal) => planRestore(fields, value, removal) !== undefined;
+/**
+ * `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 function restoreRemoval(fields, value, removal) {
+    const plan = planRestore(fields, value, removal);
+    const restored = plan ? setAt(value, plan.path, plan.next) : undefined;
     return isPlainRecord(restored) ? restored : undefined;
 }
+/** Where a removal's moved threads went, said with its Undo; undefined when none moved. */
+export const movedThreadsNote = (count) => count > 0
+    ? `Its ${count === 1 ? 'comment thread' : `${count} comment threads`} moved to "Comment on this entry".`
+    : 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.

package/dist/server.d.ts

@@ -195,6 +195,8 @@ export { authenticatedAssetBase, readAssetBase } from './editor/raw-asset-base.j
 export { setServerPreviewAssetBaseGetter } from './editor/preview-asset-base.js';
 /** The asset store `createAssetStore` returns and `materializeAssets` takes. */
 export type { AssetStore } from './assets/types.js';
+/** What `AssetStore.presignPublicObjectRead` returns: the URL and how long it may be reused. */
+export type { PresignedRead } from './assets/types.js';
 /** What a create-only store write did: `created`, or `already-exists` (the stored object was kept). */
 export type { CreateOnlyResult } from './assets/types.js';
 /** Thrown by `materializeAssets` when sharp cannot load and keys are missing, so none can be produced. */

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const CANOPYCMS_VERSION = "0.1.0";
+export declare const CANOPYCMS_VERSION = "0.2.0-int.121";

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.1.0';
+export const CANOPYCMS_VERSION = '0.2.0-int.121';

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.1.0",
+  "version": "0.2.0-int.121",
   "description": "CanopyCMS core package: schema-driven content, branch-aware editing, and editor UI for Next.js.",
   "license": "MIT",
   "repository": {
@@ -143,7 +143,7 @@
     "pathe": "^1.1.2",
     "picocolors": "^1.1.1",
     "proper-lockfile": "^4.1.2",
-    "react-easy-crop": "^6.2.2",
+    "react-image-crop": "^11.1.2",
     "react-remove-scroll": "^2.7.2",
     "react-resizable-panels": "4.14.1",
     "sanitize-html": "^2.17.5",