canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/fields/markdown-fidelity-visitors.js

@@ -0,0 +1,160 @@
+'use client';
+function isListLike(node) {
+    return (typeof node === 'object' &&
+        node !== null &&
+        'getListType' in node &&
+        'getStart' in node &&
+        'setStart' in node &&
+        typeof node.setStart === 'function');
+}
+function isListItem(node) {
+    return node.type === 'listItem';
+}
+function isLinkLike(node) {
+    return (node.getType() === 'link' || node.getType() === 'autolink') && 'getURL' in node;
+}
+const FORMAT_CONTAINER_TYPES = ['emphasis', 'strong', 'delete'];
+function isFormatContainer(node) {
+    return FORMAT_CONTAINER_TYPES.includes(node.type);
+}
+/** `nodes` with every container of a type in `types` replaced by its children, at any depth. */
+function withoutContainers(nodes, types) {
+    return nodes.flatMap((node) => {
+        if (!isFormatContainer(node))
+            return [node];
+        const children = withoutContainers(node.children, types);
+        return types.has(node.type) ? children : [{ ...node, children }];
+    });
+}
+/** Creates the plugin from MDXEditor's exports; call once per load of MDXEditor. */
+export function createMarkdownFidelityPlugin(mdx) {
+    const { IS_BOLD, IS_CODE, IS_ITALIC, IS_STRIKETHROUGH, addExportVisitor$, addImportVisitor$, lexical: { $isElementNode, $isTextNode }, realmPlugin, } = mdx;
+    const FORMATS = [
+        { format: IS_ITALIC, type: 'emphasis' },
+        { format: IS_BOLD, type: 'strong' },
+        { format: IS_STRIKETHROUGH, type: 'delete' },
+    ];
+    /** The formats every text node in `node` carries, or 0 for one with no text. */
+    const sharedFormat = (node) => {
+        const texts = $isElementNode(node) ? node.getChildren().filter($isTextNode) : [];
+        return texts.length === 0 ? 0 : texts.reduce((all, text) => all & text.getFormat(), ~0);
+    };
+    // MDXEditor imports a list without its `start`, and exports one without it.
+    const listStartImportVisitor = {
+        priority: 100,
+        testNode: (node) => node.type === 'list' &&
+            'ordered' in node &&
+            node.ordered === true &&
+            typeof node.start === 'number' &&
+            node.start !== 1,
+        visitNode({ mdastNode, lexicalParent, actions }) {
+            actions.nextVisitor();
+            // MDXEditor appends the list, or for a nested one, a list item holding it after the parent.
+            // Under an insert, `lexicalParent` is an import point that is no element node.
+            const holder = lexicalParent.getType() === 'listitem' && $isElementNode(lexicalParent)
+                ? lexicalParent.getNextSibling()
+                : lexicalParent;
+            const list = $isElementNode(holder)
+                ? lexicalParent === holder
+                    ? holder.getLastChild()
+                    : holder.getFirstChild()
+                : null;
+            if (isListLike(list) && typeof mdastNode.start === 'number')
+                list.setStart(mdastNode.start);
+        },
+    };
+    const listStartExportVisitor = {
+        priority: 100,
+        testLexicalNode: (node) => isListLike(node) && node.getListType() === 'number' && node.getStart() !== 1,
+        visitLexicalNode({ lexicalNode, mdastParent, actions }) {
+            actions.nextVisitor();
+            const list = mdastParent.children.at(-1);
+            if (list?.type === 'list' && isListLike(lexicalNode))
+                list.start = lexicalNode.getStart();
+            // Only a list starting at 1 can interrupt a paragraph, so one right after a paragraph in a
+            // list item needs the blank line a loose item writes, or it reads back as that paragraph.
+            if (isListItem(mdastParent) && mdastParent.children.at(-2)?.type === 'paragraph') {
+                mdastParent.spread = true;
+            }
+        },
+    };
+    /**
+     * A link inside a bold, italic or struck-through span is written inside that span, carrying it
+     * on as MDXEditor's text visitor carries a format across text nodes, so
+     * `**Read the [guide](/g) first.**` keeps its shape; MDXEditor's own visitor writes the link
+     * beside the span, bolding its text. A link the span ends at is written that way still, since
+     * lexical keeps no record of which was written: `**[guide](/g)**` saves as `[**guide**](/g)`.
+     *
+     * An auto-link holding code-formatted text is written as its text: lexical's auto-link matchers
+     * see text, not formats, so a URL inside a code span becomes a link markdown never meant.
+     */
+    const linkExportVisitor = {
+        priority: 100,
+        testLexicalNode: (node) => isLinkLike(node),
+        visitLexicalNode({ lexicalNode, mdastParent, actions }) {
+            if (!isLinkLike(lexicalNode))
+                return;
+            if (lexicalNode.getType() === 'autolink' &&
+                $isElementNode(lexicalNode) &&
+                lexicalNode
+                    .getChildren()
+                    .some((child) => $isTextNode(child) && (child.getFormat() & IS_CODE) !== 0)) {
+                actions.visitChildren(lexicalNode, mdastParent);
+                return;
+            }
+            const format = sharedFormat(lexicalNode);
+            const next = lexicalNode.getNextSibling();
+            const carried = new Set();
+            let parent = mdastParent;
+            for (;;) {
+                const last = parent.children.at(-1);
+                const container = FORMATS.find(({ format: bit, type }) => format & bit && !carried.has(type) && last?.type === type);
+                if (container === undefined || last === undefined || !('children' in last))
+                    break;
+                carried.add(container.type);
+                parent = last;
+            }
+            for (const { format: bit, type } of FORMATS) {
+                if (!(format & bit) || carried.has(type))
+                    continue;
+                if (!$isTextNode(next) || !(next.getFormat() & bit))
+                    continue;
+                const opened = actions.appendToParent(parent, { type, children: [] });
+                if (!('children' in opened))
+                    break;
+                carried.add(type);
+                parent = opened;
+            }
+            const link = {
+                type: 'link',
+                url: lexicalNode.getURL(),
+                title: lexicalNode.getTitle(),
+                children: [],
+            };
+            actions.appendToParent(parent, link);
+            actions.visitChildren(lexicalNode, link);
+            if (carried.size > 0)
+                link.children = withoutContainers(link.children, carried);
+        },
+    };
+    // Markdown has no way to write two code spans side by side, and an auto-link written as its
+    // text leaves the code either side of it as separate spans.
+    const inlineCodeJoinVisitor = {
+        shouldJoin: (prev, current) => prev.type === 'inlineCode' && current.type === 'inlineCode',
+        join(prev, current) {
+            if (prev.type === 'inlineCode' && current.type === 'inlineCode')
+                prev.value += current.value;
+            return prev;
+        },
+    };
+    return realmPlugin({
+        init(realm) {
+            realm.pub(addImportVisitor$, listStartImportVisitor);
+            realm.pub(addExportVisitor$, [
+                listStartExportVisitor,
+                linkExportVisitor,
+                inlineCodeJoinVisitor,
+            ]);
+        },
+    });
+}

package/dist/editor/fields/mdx-jsx-support.d.ts

@@ -1 +1,5 @@
-export declare function mdxJsxPlugins(): import("@mdxeditor/editor").RealmPlugin[];
+import type * as MdxEditor from '@mdxeditor/editor';
+type MdxEditorModule = typeof MdxEditor;
+/** Creates the JSX plugins from MDXEditor's exports; call once per load of MDXEditor. */
+export declare function createMdxJsxPlugins(mdx: MdxEditorModule): () => MdxEditor.RealmPlugin[];
+export {};

package/dist/editor/fields/mdx-jsx-support.js

@@ -1,6 +1,5 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { NestedLexicalEditor, UnrecognizedMarkdownConstructError, addImportVisitor$, importVisitors$, isMdastHTMLNode, isMdastJsxNode, jsxPlugin, realmPlugin, } from '@mdxeditor/editor';
 function childrenOf(node) {
     return 'children' in node && Array.isArray(node.children) ? node.children : [];
 }
@@ -13,26 +12,6 @@ function describeAttribute(attribute) {
         return `${attribute.name}="${attribute.value}"`;
     return `${attribute.name}={…}`;
 }
-/**
- * Shows an element's tag and attributes read-only (they are edited as source)
- * and edits its children, inline or block per the parsed node: one `*`
- * descriptor serves both, and a block editor rejects inline children.
- */
-const CatchAllJsxEditor = ({ mdastNode }) => {
-    const inline = mdastNode.type === 'mdxJsxTextElement';
-    const tag = [mdastNode.name ?? '', ...mdastNode.attributes.map(describeAttribute)]
-        .join(' ')
-        .trim();
-    const Wrapper = inline ? 'span' : 'div';
-    return (_jsxs(Wrapper, { className: inline ? 'canopy-mdx-jsx canopy-mdx-jsx-inline' : 'canopy-mdx-jsx', children: [_jsx("span", { className: "canopy-mdx-jsx-tag", "data-testid": "mdx-jsx-tag", title: tag, children: `<${tag}>` }), mdastNode.children.length > 0 ? (_jsx(NestedLexicalEditor, { block: !inline, getContent: (node) => node.children, getUpdatedMdastNode: (node, children) => ({ ...node, children }) })) : null] }));
-};
-const catchAllJsxDescriptor = {
-    name: '*',
-    kind: 'flow',
-    props: [],
-    hasChildren: true,
-    Editor: CatchAllJsxEditor,
-};
 const isStringAttribute = (attribute, name) => attribute.type === 'mdxJsxAttribute' &&
     attribute.name === name &&
     typeof attribute.value === 'string';
@@ -70,68 +49,177 @@ function roundTripsImage(node) {
 }
 // Why MDXEditor cannot round-trip this JSX element, or null if it can. A
 // fragment has no name, which MDXEditor's HTML handling throws on.
-function unsupportedJsx(node) {
-    if (!isMdastJsxNode(node))
+function unsupportedJsx(mdx, node) {
+    if (!mdx.isMdastJsxNode(node))
         return null;
     if (node.name === null)
         return 'fragments (<>…</>)';
     // `img` is the image plugin's, not in MDXEditor's HTML tag list.
     if (node.name === 'img')
         return roundTripsImage(node) ? null : 'this <img>';
-    if (isMdastHTMLNode(node) && breaksSpanCollapse(node)) {
+    if (mdx.isMdastHTMLNode(node) && breaksSpanCollapse(node)) {
         return `<${node.name}> wrapping a <span>, with an {expression} class or style`;
     }
     return null;
 }
+// Blocks that run into the block before them in a list item, by that block's type.
+const RUNS_INTO = {
+    paragraph: ['thematicBreak'],
+    blockquote: ['paragraph', 'blockquote', 'table'],
+    table: ['paragraph', 'table'],
+};
+const BLOCK_NAMES = {
+    paragraph: 'paragraph',
+    blockquote: 'quote',
+    table: 'table',
+    thematicBreak: 'horizontal rule',
+};
+/**
+ * Why MDXEditor would change what this list item says, or null. Its import moves a nested list into
+ * a new item after its own, so what follows the list comes out before it; its export writes an item
+ * tight, so `---` underlines a paragraph and a line continues a quote or table (`RUNS_INTO`).
+ */
+function rearrangedBlocks(node) {
+    if (node.type !== 'listItem')
+        return null;
+    for (let i = 1; i < node.children.length; i++) {
+        const before = node.children[i - 1].type;
+        const after = node.children[i].type;
+        if (before === 'list')
+            return 'a list item with content after its nested list';
+        if (RUNS_INTO[before]?.includes(after)) {
+            return `a list item with a ${BLOCK_NAMES[before] ?? before} followed by a ${BLOCK_NAMES[after] ?? after}`;
+        }
+    }
+    return null;
+}
+const isLexicalParent = (node) => 'getChildren' in node && typeof node.getChildren === 'function';
+const hasBlockChild = (node) => isLexicalParent(node) && node.getChildren().some((child) => !child.isInline());
+// Writes `node`'s children into `target`: a run of inline children as one paragraph, a block as itself.
+function writeBlocks(node, target, actions) {
+    let paragraph = null;
+    for (const child of isLexicalParent(node) ? node.getChildren() : []) {
+        if (!child.isInline()) {
+            paragraph = null;
+            actions.visit(child, target);
+            continue;
+        }
+        if (paragraph === null) {
+            const created = { type: 'paragraph', children: [] };
+            actions.appendToParent(target, created);
+            paragraph = created;
+        }
+        actions.visit(child, paragraph);
+    }
+}
+// MDXEditor 4 exports each child of a quote as a block, so inline children the toolbar's Quote,
+// the `> ` shortcut or a merge put in a quote would come out one paragraph each.
+const quoteExportVisitor = {
+    priority: 100,
+    testLexicalNode: (node) => node.getType() === 'quote',
+    visitLexicalNode({ lexicalNode, mdastParent, actions }) {
+        const quote = { type: 'blockquote', children: [] };
+        actions.appendToParent(mdastParent, quote);
+        writeBlocks(lexicalNode, quote, actions);
+    },
+};
+// Backspace at the start of a quote moves its paragraphs and lists into one paragraph, which
+// MDXEditor would export as one run of text; they are written as the blocks they show.
+const paragraphOfBlocksExportVisitor = {
+    priority: 100,
+    testLexicalNode: (node) => node.getType() === 'paragraph' && hasBlockChild(node),
+    visitLexicalNode({ lexicalNode, mdastParent, actions }) {
+        writeBlocks(lexicalNode, mdastParent, actions);
+    },
+};
 /** Typed `string` because the mdast node union this package resolves omits the ESM node. */
 const ESM_NODE_TYPE = 'mdxjsEsm';
-/** Node types the table visitor imports itself, so they have no visitor of their own. */
+/** Node types inside a table, imported by its cell editors rather than by visitors. */
 const CONSUMED_BY_PARENT_VISITOR = new Set(['tableRow', 'tableCell']);
-/**
- * Reports through `onError`, at import, what MDXEditor would otherwise lose
- * silently: `import`/`export` lines (its visitor for them is a no-op), elements
- * `unsupportedJsx` rejects, and content with no visitor inside a JSX element or
- * table, whose children nested editors import later, only logging a failure and
- * writing partial children back on edit. It throws an error class MDXEditor's
- * import reports; any other error would crash the editor.
- */
-const roundTripGuardPlugin = realmPlugin({
-    init(realm) {
-        const guard = {
-            priority: 100,
-            testNode: (node) => node.type === ESM_NODE_TYPE || node.type === 'table' || isMdastJsxNode(node),
-            visitNode({ mdastNode, descriptors, actions }) {
-                if (mdastNode.type === ESM_NODE_TYPE) {
-                    throw new UnrecognizedMarkdownConstructError('import/export statements cannot be edited in the rich-text editor');
-                }
-                const reject = (node) => {
-                    const reason = unsupportedJsx(node);
-                    if (reason !== null) {
-                        throw new UnrecognizedMarkdownConstructError(`${reason} cannot be edited in the rich-text editor`);
+/** Creates the JSX plugins from MDXEditor's exports; call once per load of MDXEditor. */
+export function createMdxJsxPlugins(mdx) {
+    const { NestedLexicalEditor, UnrecognizedMarkdownConstructError, addExportVisitor$, addImportVisitor$, importVisitors$, isMdastJsxNode, jsxPlugin, realmPlugin, } = mdx;
+    /**
+     * Shows an element's tag and attributes read-only (they are edited as source)
+     * and edits its children, inline or block per the parsed node: one `*`
+     * descriptor serves both, and a block editor rejects inline children.
+     */
+    const CatchAllJsxEditor = ({ mdastNode }) => {
+        const inline = mdastNode.type === 'mdxJsxTextElement';
+        const tag = [mdastNode.name ?? '', ...mdastNode.attributes.map(describeAttribute)]
+            .join(' ')
+            .trim();
+        const Wrapper = inline ? 'span' : 'div';
+        return (_jsxs(Wrapper, { className: inline ? 'canopy-mdx-jsx canopy-mdx-jsx-inline' : 'canopy-mdx-jsx', children: [_jsx("span", { className: "canopy-mdx-jsx-tag", "data-testid": "mdx-jsx-tag", title: tag, children: `<${tag}>` }), mdastNode.children.length > 0 ? (_jsx(NestedLexicalEditor, { block: !inline, getContent: (node) => node.children, getUpdatedMdastNode: (node, children) => ({ ...node, children }) })) : null] }));
+    };
+    const catchAllJsxDescriptor = {
+        name: '*',
+        kind: 'flow',
+        props: [],
+        hasChildren: true,
+        Editor: CatchAllJsxEditor,
+    };
+    /**
+     * Reports through `onError`, at import, what MDXEditor would otherwise lose or
+     * break on without reporting it: `import`/`export` lines (its visitor for them
+     * is a no-op), what `unsupportedJsx` and `rearrangedBlocks` reject, and content
+     * with no visitor inside a JSX element or table, whose children nested editors
+     * import later, only logging a failure and writing partial children back on
+     * edit. It throws an error class MDXEditor's import reports; any other error
+     * crashes the editor.
+     */
+    const roundTripGuardPlugin = realmPlugin({
+        init(realm) {
+            const guard = {
+                priority: 100,
+                testNode: (node) => node.type === ESM_NODE_TYPE ||
+                    node.type === 'table' ||
+                    node.type === 'listItem' ||
+                    isMdastJsxNode(node),
+                visitNode({ mdastNode, descriptors, actions }) {
+                    if (mdastNode.type === ESM_NODE_TYPE) {
+                        throw new UnrecognizedMarkdownConstructError('import/export statements cannot be edited in the rich-text editor');
                     }
-                };
-                reject(mdastNode);
-                const visitors = realm.getValue(importVisitors$).filter((visitor) => visitor !== guard);
-                const hasVisitor = (node) => visitors.some((visitor) => typeof visitor.testNode === 'string'
-                    ? visitor.testNode === node.type
-                    : visitor.testNode(node, descriptors));
-                const check = (node) => {
-                    for (const child of childrenOf(node)) {
-                        reject(child);
-                        if (!CONSUMED_BY_PARENT_VISITOR.has(child.type) && !hasVisitor(child)) {
-                            const where = isMdastJsxNode(mdastNode) ? `<${mdastNode.name ?? ''}>` : 'A table';
-                            throw new UnrecognizedMarkdownConstructError(`${where} contains ${child.type} content the rich-text editor cannot edit`);
+                    const reject = (node) => {
+                        const reason = unsupportedJsx(mdx, node) ?? rearrangedBlocks(node);
+                        if (reason !== null) {
+                            throw new UnrecognizedMarkdownConstructError(`${reason} cannot be edited in the rich-text editor`);
                         }
-                        check(child);
+                    };
+                    reject(mdastNode);
+                    if (mdastNode.type === 'listItem') {
+                        actions.nextVisitor();
+                        return;
                     }
-                };
-                check(mdastNode);
-                actions.nextVisitor();
-            },
-        };
-        realm.pub(addImportVisitor$, guard);
-    },
-});
-export function mdxJsxPlugins() {
-    return [jsxPlugin({ jsxComponentDescriptors: [catchAllJsxDescriptor] }), roundTripGuardPlugin()];
+                    const visitors = realm.getValue(importVisitors$).filter((visitor) => visitor !== guard);
+                    const hasVisitor = (node) => visitors.some((visitor) => typeof visitor.testNode === 'string'
+                        ? visitor.testNode === node.type
+                        : visitor.testNode(node, descriptors));
+                    const check = (node) => {
+                        for (const child of childrenOf(node)) {
+                            reject(child);
+                            if (!CONSUMED_BY_PARENT_VISITOR.has(child.type) && !hasVisitor(child)) {
+                                const where = isMdastJsxNode(mdastNode) ? `<${mdastNode.name ?? ''}>` : 'A table';
+                                throw new UnrecognizedMarkdownConstructError(`${where} contains ${child.type} content the rich-text editor cannot edit`);
+                            }
+                            check(child);
+                        }
+                    };
+                    check(mdastNode);
+                    actions.nextVisitor();
+                },
+            };
+            realm.pub(addImportVisitor$, guard);
+        },
+    });
+    const blockExportPlugin = realmPlugin({
+        init(realm) {
+            realm.pub(addExportVisitor$, [quoteExportVisitor, paragraphOfBlocksExportVisitor]);
+        },
+    });
+    return () => [
+        jsxPlugin({ jsxComponentDescriptors: [catchAllJsxDescriptor] }),
+        roundTripGuardPlugin(),
+        blockExportPlugin(),
+    ];
 }

package/dist/editor/fields/rich-text-failures.d.ts

@@ -0,0 +1,5 @@
+export declare function rememberRichTextFailure(markdown: string, reason: string): void;
+export declare function recallRichTextFailure(markdown: string): string | undefined;
+export declare function forgetRichTextFailure(markdown: string): void;
+/** @internal Exported for tests. */
+export declare function resetRichTextFailures(): void;

package/dist/editor/fields/rich-text-failures.js

@@ -0,0 +1,26 @@
+/**
+ * Markdown the rich-text editor failed to open this page session, keyed by text so the same text
+ * shown again opens straight to source, with the reason to show. Memory only: a reload tries
+ * rich text again.
+ */
+const failures = new Map();
+const MAX_REMEMBERED = 20;
+export function rememberRichTextFailure(markdown, reason) {
+    failures.delete(markdown);
+    failures.set(markdown, reason);
+    if (failures.size > MAX_REMEMBERED) {
+        const oldest = failures.keys().next();
+        if (!oldest.done)
+            failures.delete(oldest.value);
+    }
+}
+export function recallRichTextFailure(markdown) {
+    return failures.get(markdown);
+}
+export function forgetRichTextFailure(markdown) {
+    failures.delete(markdown);
+}
+/** @internal Exported for tests. */
+export function resetRichTextFailures() {
+    failures.clear();
+}

package/dist/editor/fields/toolbar-wrap.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal Exported for tests. Hides each separator that starts or ends a wrapped row; it keeps
+ * its space, so hiding never moves the wrap. One not laid out (zero height) is left alone.
+ */
+export declare const hideSeparatorsAtWrap: (toolbar: HTMLElement) => void;
+/** Reruns `hideSeparatorsAtWrap` on `selector` in `root` as either resizes; returns cleanup. */
+export declare const watchToolbarWrap: (root: HTMLElement, selector: string) => (() => void);

package/dist/editor/fields/toolbar-wrap.js

@@ -0,0 +1,35 @@
+/**
+ * @internal Exported for tests. Hides each separator that starts or ends a wrapped row; it keeps
+ * its space, so hiding never moves the wrap. One not laid out (zero height) is left alone.
+ */
+export const hideSeparatorsAtWrap = (toolbar) => {
+    for (const separator of toolbar.querySelectorAll('[role="separator"]')) {
+        const own = separator.getBoundingClientRect();
+        if (own.height === 0)
+            continue;
+        const previous = separator.previousElementSibling?.getBoundingClientRect();
+        const next = separator.nextElementSibling?.getBoundingClientRect();
+        const atRowEdge = !previous || !next || previous.bottom <= own.top || next.top >= own.bottom;
+        separator.style.visibility = atRowEdge ? 'hidden' : '';
+    }
+};
+/** Reruns `hideSeparatorsAtWrap` on `selector` in `root` as either resizes; returns cleanup. */
+export const watchToolbarWrap = (root, selector) => {
+    if (typeof ResizeObserver !== 'function')
+        return () => { };
+    let watched = null;
+    const observer = new ResizeObserver(() => {
+        const toolbar = root.querySelector(selector);
+        if (!toolbar)
+            return;
+        if (toolbar !== watched) {
+            if (watched)
+                observer.unobserve(watched);
+            watched = toolbar;
+            observer.observe(toolbar);
+        }
+        hideSeparatorsAtWrap(toolbar);
+    });
+    observer.observe(root);
+    return () => observer.disconnect();
+};

package/dist/editor/form-outline.d.ts

@@ -0,0 +1,13 @@
+import type { FieldConfig } from '../config/index.js';
+import type { OutlineNode } from './FormHeader.js';
+/**
+ * The form's outline: each top-level field in form order, holding the rows of a list or block
+ * field. An inline group holds its fields and has no path, since it is not a field. A type in
+ * `customTypes` has a custom renderer, so it holds no rows.
+ */
+export declare function buildFormOutline(fields: readonly FieldConfig[], value: Record<string, unknown>, customTypes?: ReadonlySet<string>): OutlineNode[];
+/**
+ * True when some field, at any depth, is a block field or a list of objects that the form draws
+ * itself: a type in `customTypes` has a custom renderer.
+ */
+export declare function hasCollapsibleList(fields: readonly FieldConfig[], customTypes?: ReadonlySet<string>): boolean;

package/dist/editor/form-outline.js

@@ -0,0 +1,70 @@
+import { isPlainRecord } from '../validation/field-traversal.js';
+import { formatCanopyPath } from './canopy-path.js';
+import { listItemSecondary, listItemSummary } from './fields/list-item-title.js';
+import { schemaLabel } from './schema-label.js';
+/**
+ * The form's outline: each top-level field in form order, holding the rows of a list or block
+ * field. An inline group holds its fields and has no path, since it is not a field. A type in
+ * `customTypes` has a custom renderer, so it holds no rows.
+ */
+export function buildFormOutline(fields, value, customTypes = new Set()) {
+    const rowsOf = (field) => {
+        const current = value[field.name];
+        // A custom renderer draws its own rows, which carry no row paths.
+        if (!Array.isArray(current) || customTypes.has(field.type))
+            return undefined;
+        if (field.type === 'block') {
+            const { templates } = field;
+            return current.map((block, idx) => {
+                const name = isPlainRecord(block) && typeof block.template === 'string' ? block.template : '';
+                const template = templates.find((t) => t.name === name);
+                return {
+                    label: template ? schemaLabel(template) : name || 'Unknown block',
+                    secondary: template && isPlainRecord(block)
+                        ? listItemSecondary(block.value, template.fields)
+                        : undefined,
+                    path: formatCanopyPath([field.name, idx]),
+                };
+            });
+        }
+        if (field.type === 'object' && field.list) {
+            return current.map((item, idx) => {
+                const { title, secondary } = listItemSummary(item, field, idx);
+                return { label: title, secondary, path: formatCanopyPath([field.name, idx]) };
+            });
+        }
+        return undefined;
+    };
+    const nodeOf = (field) => {
+        if (field.type === 'group') {
+            const group = field;
+            return { label: schemaLabel(group), children: group.fields.map(nodeOf) };
+        }
+        return {
+            label: schemaLabel(field),
+            path: formatCanopyPath([field.name]),
+            children: rowsOf(field),
+        };
+    };
+    return fields.map(nodeOf);
+}
+/**
+ * True when some field, at any depth, is a block field or a list of objects that the form draws
+ * itself: a type in `customTypes` has a custom renderer.
+ */
+export function hasCollapsibleList(fields, customTypes = new Set()) {
+    return fields.some((field) => {
+        if (customTypes.has(field.type))
+            return false;
+        if (field.type === 'block')
+            return true;
+        if (field.type === 'group') {
+            return hasCollapsibleList(field.fields, customTypes);
+        }
+        if (field.type === 'object') {
+            const objectField = field;
+            return objectField.list === true || hasCollapsibleList(objectField.fields, customTypes);
+        }
+        return false;
+    });
+}

package/dist/editor/group-manager/GroupCard.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import type { InternalGroup, UserSearchResult, CanopyGroupId, CanopyUserId } from './types.js';
+export declare const memberCountLabel: (count: number) => string;
 export interface GroupCardProps {
     group: InternalGroup;
+    /** The group is new or edited and its change is staged, not saved. */
+    isUnsaved: boolean;
     onEdit: (group: InternalGroup) => void;
     onDelete: (groupId: CanopyGroupId) => void;
     onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void;
     onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void;
-    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    onGetUserMetadata: (userId: string) => Promise<UserSearchResult | null>;
     showUserSearch: boolean;
     searchQuery: string;
     searchResults: UserSearchResult[];

package/dist/editor/group-manager/GroupCard.js

@@ -1,8 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ActionIcon, Badge, Group, Paper, Text, Tooltip } from '@mantine/core';
+import { useId } from 'react';
+import { ActionIcon, Badge, Group, Paper, Text, Tooltip, VisuallyHidden } from '@mantine/core';
 import { IconEdit, IconTrash } from '@tabler/icons-react';
 import { MemberList } from './MemberList.js';
-export const GroupCard = ({ group, onEdit, onDelete, onAddMember, onRemoveMember, onGetUserMetadata, showUserSearch, searchQuery, searchResults, isSearching, searchError, onSearchQueryChange, onShowSearch, onHideSearch, canSearch, }) => {
-    return (_jsxs(Paper, { withBorder: true, p: "sm", mb: "xs", children: [_jsxs(Group, { justify: "space-between", mb: "sm", children: [_jsxs("div", { style: { flex: 1 }, children: [_jsxs(Group, { gap: "xs", children: [_jsx(Text, { size: "sm", fw: 500, children: group.name }), _jsxs(Badge, { size: "sm", variant: "light", children: [group.members?.length || 0, " members"] })] }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["ID: ", group.id] }), group.description && (_jsx(Text, { size: "xs", c: "dimmed", mt: 4, children: group.description }))] }), _jsxs(Group, { gap: "xs", children: [_jsx(Tooltip, { label: "Edit group", children: _jsx(ActionIcon, { size: "sm", variant: "subtle", onClick: () => onEdit(group), children: _jsx(IconEdit, { size: 16 }) }) }), _jsx(Tooltip, { label: "Delete group", children: _jsx(ActionIcon, { size: "sm", variant: "subtle", color: "red", onClick: () => onDelete(group.id), children: _jsx(IconTrash, { size: 16 }) }) })] })] }), _jsx(MemberList, { groupId: group.id, members: group.members || [], onRemoveMember: onRemoveMember, onAddMember: onAddMember, onGetUserMetadata: onGetUserMetadata, showUserSearch: showUserSearch, searchQuery: searchQuery, searchResults: searchResults, isSearching: isSearching, searchError: searchError, onSearchQueryChange: onSearchQueryChange, onShowSearch: onShowSearch, onHideSearch: onHideSearch, canSearch: canSearch })] }));
+import { isReservedGroup } from '../../authorization/helpers.js';
+export const memberCountLabel = (count) => `${count} ${count === 1 ? 'member' : 'members'}`;
+const reservedDeleteReason = (name) => `"${name}" is a built-in group, so it can't be deleted.`;
+export const GroupCard = ({ group, isUnsaved, onEdit, onDelete, onAddMember, onRemoveMember, onGetUserMetadata, showUserSearch, searchQuery, searchResults, isSearching, searchError, onSearchQueryChange, onShowSearch, onHideSearch, canSearch, }) => {
+    const reserved = isReservedGroup(group.id);
+    const reservedReasonId = useId();
+    return (_jsxs(Paper, { withBorder: true, p: "sm", mb: "xs", children: [_jsxs(Group, { justify: "space-between", mb: "sm", children: [_jsxs("div", { style: { flex: 1 }, children: [_jsxs(Group, { gap: "xs", children: [_jsx(Text, { size: "sm", fw: 500, children: group.name }), _jsx(Badge, { size: "sm", variant: "light", children: memberCountLabel(group.members?.length ?? 0) }), isUnsaved && (_jsx(Badge, { size: "sm", variant: "light", color: "orange", children: "Unsaved" }))] }), _jsxs(Text, { size: "xs", c: "dimmed", mt: 4, children: ["ID: ", group.id] }), group.description && (_jsx(Text, { size: "xs", c: "dimmed", mt: 4, children: group.description }))] }), _jsxs(Group, { gap: "xs", children: [_jsx(Tooltip, { label: `Edit group "${group.name}"`, children: _jsx(ActionIcon, { variant: "subtle", "aria-label": `Edit group "${group.name}"`, onClick: () => onEdit(group), children: _jsx(IconEdit, { size: 16 }) }) }), _jsx(Tooltip, { label: reserved ? reservedDeleteReason(group.name) : `Delete group "${group.name}"`, events: { hover: true, focus: true, touch: true }, children: _jsx(ActionIcon, { variant: "subtle", color: "red", "aria-label": `Delete group "${group.name}"`, "aria-describedby": reserved ? reservedReasonId : undefined, "data-disabled": reserved ? true : undefined, "aria-disabled": reserved ? true : undefined, onClick: () => {
+                                        if (!reserved)
+                                            onDelete(group.id);
+                                    }, children: _jsx(IconTrash, { size: 16 }) }) }), reserved && (_jsx(VisuallyHidden, { id: reservedReasonId, children: reservedDeleteReason(group.name) }))] })] }), _jsx(MemberList, { groupId: group.id, members: group.members || [], onRemoveMember: onRemoveMember, onAddMember: onAddMember, onGetUserMetadata: onGetUserMetadata, showUserSearch: showUserSearch, searchQuery: searchQuery, searchResults: searchResults, isSearching: isSearching, searchError: searchError, onSearchQueryChange: onSearchQueryChange, onShowSearch: onShowSearch, onHideSearch: onHideSearch, canSearch: canSearch })] }));
 };