canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/FormHeader.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { ActionIcon, Badge, Box, Button, Group, Popover, ScrollArea, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { useIsomorphicEffect } from '@mantine/hooks';
+import { IconChevronsDown, IconChevronsUp, IconListTree } from '@tabler/icons-react';
+/** The padding of the scroller the form sits in, which `shell/PaneLayout.tsx` sets; 0 where unset. */
+const PANE_PADDING = 'var(--canopy-form-pane-padding, 0px)';
+/** Below this header width "Outline" shows its icon alone, so the controls never clip. */
+const COMPACT_WIDTH = 280;
+/** Space kept between the header and a field scrolled up to it. */
+const SCROLL_GAP = 8;
+/** The nearest ancestor that scrolls vertically, which the header sticks within. */
+const scrollerOf = (element) => {
+    for (let node = element.parentElement; node; node = node.parentElement) {
+        const { overflowY } = getComputedStyle(node);
+        if (overflowY === 'auto' || overflowY === 'scroll')
+            return node;
+    }
+    return undefined;
+};
+/**
+ * One level of the outline as a list. A row's name leads with its field's label ("Page sections ›
+ * Hero, Welcome"), so rows of two lists are told apart by ear.
+ */
+const OutlineList = ({ nodes, field, nested = false, onChoose }) => (_jsx("ul", { style: { listStyle: 'none', margin: 0, paddingLeft: nested ? 16 : 0 }, children: nodes.map((node, idx) => {
+        const name = node.secondary ? `${node.label}, ${node.secondary}` : node.label;
+        return (_jsxs("li", { children: [node.path === undefined ? (_jsx(Text, { size: "xs", fw: 600, c: "dimmed", px: "xs", pt: 6, pb: 2, children: node.label })) : (_jsx(UnstyledButton, { onClick: () => onChoose(node.path), "aria-label": field ? `${field} › ${name}` : undefined, display: "block", w: "100%", py: 4, px: "xs", style: { borderRadius: 'var(--mantine-radius-sm)' }, className: "canopy-outline-item", "data-testid": "form-outline-item", children: _jsxs(Text, { size: "sm", truncate: "end", fw: field ? undefined : 500, children: [node.label, node.secondary && (_jsxs(Text, { span: true, c: "dimmed", size: "sm", children: [' ', node.secondary] }))] }) })), node.children && node.children.length > 0 && (_jsx(OutlineList, { nodes: node.children, field: node.path === undefined ? undefined : node.label, nested: true, onChoose: onChoose }))] }, node.path ?? `group-${idx}`));
+    }) }));
+/**
+ * The form's sticky header: which entry this is, an outline of its fields to jump to, and
+ * Expand all / Collapse all for every list and block field in it.
+ */
+export const FormHeader = ({ title, typeLabel, outline, onSelect, onExpandAll, }) => {
+    const [outlineOpen, setOutlineOpen] = useState(false);
+    const [compact, setCompact] = useState(false);
+    const headerRef = useRef(null);
+    // Its scroller pads its scroll edge by the header's height and a gap, so a field scrolled to the
+    // top, as `scrollIntoView` does, lands below the header rather than under it.
+    useIsomorphicEffect(() => {
+        const header = headerRef.current;
+        if (!header)
+            return;
+        const scroller = scrollerOf(header);
+        const previous = scroller?.style.scrollPaddingTop ?? '';
+        const measure = () => {
+            if (scroller)
+                scroller.style.scrollPaddingTop = `${header.offsetHeight + SCROLL_GAP}px`;
+            setCompact(header.clientWidth > 0 && header.clientWidth < COMPACT_WIDTH);
+        };
+        measure();
+        const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : undefined;
+        observer?.observe(header);
+        return () => {
+            observer?.disconnect();
+            if (scroller)
+                scroller.style.scrollPaddingTop = previous;
+        };
+    }, []);
+    return (_jsxs(Box, { ref: headerRef, "data-testid": "form-header", style: {
+            // Bleeds over the form pane's padding, so it spans the pane and sticks to its very top.
+            position: 'sticky',
+            top: `calc(-1 * ${PANE_PADDING})`,
+            zIndex: 3,
+            margin: `calc(-1 * ${PANE_PADDING}) calc(-1 * ${PANE_PADDING}) 0`,
+            padding: `8px ${PANE_PADDING}`,
+            backgroundColor: 'var(--canopy-surface-muted)',
+            borderBottom: '1px solid var(--mantine-color-default-border)',
+        }, children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", children: [_jsx(Text, { fw: 600, size: "sm", truncate: "end", style: { minWidth: 0 }, children: title }), typeLabel && (_jsx(Badge, { variant: "light", color: "gray", size: "sm", tt: "none", 
+                        // Gives way before the title in a narrow pane.
+                        style: { flexShrink: 2, minWidth: 0 }, children: typeLabel })), _jsxs(Group, { gap: 4, wrap: "nowrap", ml: "auto", style: { flexShrink: 0 }, children: [_jsxs(Popover, { opened: outlineOpen, onChange: setOutlineOpen, position: "bottom-end", width: 300, shadow: "md", withinPortal: true, 
+                                // Focus enters the list; Escape hands it back to "Outline" (`closeOnEscape`). A chosen
+                                // field takes it instead, so closing returns it nowhere.
+                                trapFocus: true, returnFocus: false, children: [_jsx(Tooltip, { label: "Outline", disabled: !compact, opened: compact ? undefined : false, children: _jsx(Popover.Target, { children: _jsx(Button, { variant: "subtle", color: "gray", c: "dimmed", size: "compact-sm", px: compact ? 6 : undefined, leftSection: _jsx(IconListTree, { size: 14, "aria-hidden": true }), styles: compact ? { section: { marginInlineEnd: 0 } } : undefined, onClick: () => setOutlineOpen((open) => !open), "data-testid": "form-outline-button", children: compact ? _jsx(VisuallyHidden, { children: "Outline" }) : 'Outline' }) }) }), _jsx(Popover.Dropdown, { p: 4, children: _jsx(ScrollArea.Autosize, { mah: 400, type: "auto", children: _jsx("nav", { "aria-label": "Outline", "data-testid": "form-outline", children: _jsx(OutlineList, { nodes: outline, onChoose: (path) => {
+                                                        setOutlineOpen(false);
+                                                        onSelect(path);
+                                                    } }) }) }) })] }), onExpandAll && (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: "Expand all lists", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": "Expand all lists", onClick: () => onExpandAll(true), "data-testid": "form-expand-all", children: _jsx(IconChevronsDown, { size: 16, "aria-hidden": true }) }) }), _jsx(Tooltip, { label: "Collapse all lists", children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": "Collapse all lists", onClick: () => onExpandAll(false), "data-testid": "form-collapse-all", children: _jsx(IconChevronsUp, { size: 16, "aria-hidden": true }) }) })] }))] })] }), _jsx("style", { children: `
+        .canopy-outline-item:hover, .canopy-outline-item:focus-visible {
+          background-color: var(--canopy-surface-muted);
+        }
+      ` })] }));
+};

package/dist/editor/FormRenderer.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import type { EntrySchema, FieldConfig } from '../config/index.js';
+import type { ContentFormat, EntrySchema, FieldConfig } from '../config/index.js';
 import type { CommentThread } from '../comment-store.js';
+import type { UserSearchResult } from '../auth/types.js';
+import type { FieldRemoval } from './undo-removal.js';
 export type FormValue = Record<string, unknown>;
 export interface CustomFieldRenderProps {
     field: FieldConfig;
@@ -8,6 +10,8 @@ export interface CustomFieldRenderProps {
     onChange: (v: unknown) => void;
     path: Array<string | number>;
     id: string;
+    /** The branch is locked (protected, or in review): show the value; `onChange` is ignored. */
+    readOnly: boolean;
 }
 export type CustomFieldRenderers = Record<string, (props: CustomFieldRenderProps) => React.ReactNode>;
 export interface FormRendererProps {
@@ -24,8 +28,6 @@ export interface FormRendererProps {
     highlightThreadId?: string;
     onAddComment?: (text: string, type: 'field' | 'entry' | 'branch', entryPath?: string, canopyPath?: string, threadId?: string) => Promise<void>;
     onResolveThread?: (threadId: string) => Promise<void>;
-    onResolvedValueChange?: (resolved: FormValue) => void;
-    onLoadingStateChange?: (loadingState: FormValue) => void;
     /** True when this entry's content conflicts with a recent change on the base branch */
     conflictNotice?: boolean;
     /**
@@ -35,5 +37,27 @@ export interface FormRendererProps {
      * in useDraftManager and by server 422 rejections.
      */
     fieldErrors?: Record<string, string>;
+    /** The entry's format, which decides how its body field is checked. */
+    format?: ContentFormat;
+    /** Shows the value without accepting edits. Comments stay open. */
+    readOnly?: boolean;
+    /** Told of each list item, block or image Remove takes out, or object Clear resets, for Undo. */
+    onRemoved?: (removal: FieldRemoval) => void;
+    /** Resolves comment authors to names in field and entry threads; without it they show as ids. */
+    onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
+    /**
+     * Shows a sticky header naming the entry, with an outline of its fields and, when it has list
+     * or block fields, Expand all and Collapse all.
+     */
+    header?: {
+        title: string;
+        typeLabel?: string;
+    };
+    /** An entry-wide notice, shown first under the header. */
+    notice?: React.ReactNode;
+    /** Why a field can't take a new comment thread yet, such as one inside an unsaved item. */
+    commentBlockedReason?: (canopyPath: string) => string | undefined;
+    /** Names a removed item's thread's field; else the schema alone does, without the items. */
+    removedItemFieldLabel?: (thread: CommentThread) => string | undefined;
 }
 export declare const FormRenderer: React.FC<FormRendererProps>;

package/dist/editor/FormRenderer.js

@@ -1,8 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Button, Group, Paper, Stack, Text } from '@mantine/core';
-import { IconAlertCircle, IconInfoCircle } from '@tabler/icons-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Alert, Stack, Text } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
 import { MarkdownField } from './fields/MarkdownField.js';
+import { useSiteMdxAllow } from './context/index.js';
+import { markdownPolicyOf } from '../validation/mdx-allowlist.js';
+import { findBodyFieldName } from '../utils/body-field.js';
 import { StringListField } from './fields/StringListField.js';
 import { TextField } from './fields/TextField.js';
 import { ToggleField } from './fields/ToggleField.js';
@@ -15,23 +19,31 @@ import { ReferenceField } from './fields/ReferenceField.js';
 import { CodeField } from './fields/CodeField.js';
 import { ImageField } from './fields/ImageField.js';
 import { ObjectField } from './fields/ObjectField.js';
-import { FieldDescription, groupDescriptionProps } from './fields/FieldDescription.js';
+import { ObjectListField } from './fields/ObjectListField.js';
+import { listItemTitle } from './fields/list-item-title.js';
 import { InlineGroupField } from './fields/InlineGroupField.js';
 import { formatCanopyPath, normalizeCanopyPath } from './canopy-path.js';
 import { FieldWrapper } from './comments/FieldWrapper.js';
+import { FormCommentsContext, createFormComments } from './comments/form-comments.js';
 import { EntryComments } from './comments/EntryComments.js';
-import { useReferenceResolution } from './hooks/useReferenceResolution.js';
+import { EditorErrorBoundary } from './components/EditorErrorBoundary.js';
+import { ValidationSummary } from './components/ValidationSummary.js';
+import { fieldBreadcrumb } from './field-breadcrumb.js';
+import { FieldCrashFallback } from './fields/FieldCrashFallback.js';
+import { useListItemKeys } from './fields/list-item-keys.js';
+import { FormExpansionContext } from './fields/form-expansion.js';
+import { FormHeader } from './FormHeader.js';
+import { buildFormOutline, hasCollapsibleList } from './form-outline.js';
+import { findFieldTarget, focusFieldTarget } from './field-target.js';
+import { schemaLabel } from './schema-label.js';
 /**
- * Card heading for an object-list item: the value of its `itemTitleField` when that is a
- * non-blank string or a number, otherwise `fallback`.
+ * How an Undo toast names a removed object-list item: by its title field or first non-empty
+ * text field, since a positional "#2" title passes to the next item once this one is gone.
  */
-const listItemTitle = (item, itemTitleField, fallback) => {
-    const raw = itemTitleField ? item?.[itemTitleField] : undefined;
-    if (typeof raw === 'number' && Number.isFinite(raw))
-        return String(raw);
-    if (typeof raw === 'string' && raw.trim() !== '')
-        return raw.trim();
-    return fallback;
+const removedItemLabel = (item, objectField, listLabel, index) => {
+    const text = listItemTitle(item, objectField);
+    const byPosition = `${objectField.itemLabel ?? 'item'} ${index + 1}`;
+    return text ? `"${text}" from ${listLabel}` : `${byPosition} from ${listLabel}`;
 };
 const normalizeOptions = (options) => {
     if (!options)
@@ -39,22 +51,74 @@ const normalizeOptions = (options) => {
     return options.map((opt) => (typeof opt === 'string' ? { label: opt, value: opt } : opt));
 };
 const fieldKey = (path) => formatCanopyPath(path);
-export const FormRenderer = ({ fields, value, onChange, customRenderers, branch = 'main', comments = [], currentEntryPath, currentUserId, canResolve = false, focusedFieldPath, highlightThreadId, onAddComment, onResolveThread, onResolvedValueChange, onLoadingStateChange, conflictNotice = false, fieldErrors, }) => {
-    useReferenceResolution({
-        value,
-        fields,
-        branch,
-        onResolvedValueChange,
-        onLoadingStateChange,
-    });
-    // Wraps the rendered control with an inline validation message when this
-    // field has an active error (keyed by canonical canopy path, so errors land
-    // on nested object/block fields too). Passed down to BlockField/ObjectField
-    // so nested fields get the same decoration.
+const noop = () => { };
+const FENCE_STYLE = { border: 0, padding: 0, margin: 0, minWidth: 0 };
+const READ_ONLY_FORM_CLASS = 'canopy-read-only-form';
+/**
+ * Read-only inputs look disabled but stay focusable, so a reviewer can select and copy them. A
+ * picker's trigger is a button, which Mantine marks `data-read-only` instead.
+ */
+const ReadOnlyFormStyles = () => (_jsx("style", { children: `
+    .${READ_ONLY_FORM_CLASS} .mantine-Input-input:is([readonly], [data-read-only], :has(input[readonly])) {
+      background-color: var(--input-disabled-bg);
+    }
+    .${READ_ONLY_FORM_CLASS} .canopy-mdx-content {
+      background-color: var(--canopy-surface-muted);
+    }
+    .${READ_ONLY_FORM_CLASS} .mantine-Switch-label {
+      color: var(--mantine-color-text);
+    }
+  ` }));
+/**
+ * Disables a custom renderer's native controls on a read-only form, whether or not it honours
+ * `readOnly`. It wraps the control, never its `FieldWrapper`, so review comments stay open.
+ */
+const ReadOnlyFence = ({ readOnly, children, }) => (_jsx("fieldset", { disabled: readOnly, role: "presentation", style: FENCE_STYLE, children: children }));
+/** Builds the control inside the field's boundary: a custom renderer is called, not mounted. */
+const FieldControl = ({ build }) => _jsx(_Fragment, { children: build() });
+/**
+ * One field's error boundary. Every edit callback a field was rendered with before it crashed
+ * is dead for good, so nothing it scheduled can land later, even on another entry's draft.
+ * Callbacks from renders after the crash, which happen once the boundary resets on an entry or
+ * branch change, work.
+ */
+const FieldBoundary = ({ canopyPath, resetKey, update, build, fallback }) => {
+    const [generation, setGeneration] = useState(0);
+    const liveGeneration = useRef(0);
+    const guardedUpdate = (next) => {
+        if (liveGeneration.current === generation)
+            update(next);
+    };
+    return (_jsx(EditorErrorBoundary, { context: { boundary: 'field', fieldPath: canopyPath }, resetKey: resetKey, onCaught: () => {
+            liveGeneration.current += 1;
+            setGeneration(liveGeneration.current);
+        }, fallback: fallback, children: _jsx(FieldControl, { build: () => build(guardedUpdate) }) }));
+};
+export const FormRenderer = ({ fields, value, onChange, customRenderers, branch = 'main', comments = [], currentEntryPath, currentUserId, canResolve = false, focusedFieldPath, highlightThreadId, onAddComment, onResolveThread, conflictNotice = false, fieldErrors, format, readOnly = false, onRemoved, onGetUserMetadata, header, notice, commentBlockedReason, removedItemFieldLabel, }) => {
+    const emit = readOnly ? noop : onChange;
+    const formRef = useRef(null);
+    const customTypes = new Set(Object.keys(customRenderers ?? {}));
+    const [expansionCommand, setExpansionCommand] = useState();
+    const boundaryResetKey = `${branch}\n${currentEntryPath ?? ''}`;
+    const siteMdxAllow = useSiteMdxAllow();
+    const bodyName = format === 'md' || format === 'mdx' ? findBodyFieldName(fields) : undefined;
+    const keysForList = useListItemKeys();
+    // Whether a list row holds an error, so a collapsed row can say so.
+    const rowHasErrors = (listPath) => (index) => {
+        const row = normalizeCanopyPath([...listPath, index]);
+        return Object.keys(fieldErrors ?? {}).some((key) => key === row || key.startsWith(`${row}.`) || key.startsWith(`${row}[`));
+    };
+    const [formComments] = useState(createFormComments);
+    // The field last focused on one entry is never offered on the next.
+    useEffect(() => formComments.noteFocus(undefined), [formComments, boundaryResetKey]);
+    // Wraps the rendered control in an error boundary, and with an inline validation message
+    // when this field has an active error (keyed by canonical canopy path, so errors land on
+    // nested object/block fields too). Passed down to BlockField/ObjectField so nested fields
+    // get the same decoration.
     const renderField = (field, currentValue, update, path) => {
-        const control = renderFieldControl(field, currentValue, update, path);
-        const error = fieldErrors?.[normalizeCanopyPath(path)];
-        return (_jsxs(Stack, { gap: 4, children: [control, error && (_jsx(Text, { size: "xs", c: "red", "data-testid": `field-error-${fieldKey(path)}`, children: error }))] }, fieldKey(path)));
+        const canopyPath = normalizeCanopyPath(path);
+        const error = fieldErrors?.[canopyPath];
+        return (_jsxs(Stack, { gap: 4, children: [_jsx(FieldBoundary, { canopyPath: canopyPath, resetKey: boundaryResetKey, update: update, build: (guardedUpdate) => renderFieldControl(field, currentValue, guardedUpdate, path), fallback: (caught) => (_jsx(FieldCrashFallback, { label: schemaLabel(field), fieldType: field.type, value: currentValue, onChange: readOnly ? undefined : update, caught: caught, dataCanopyField: canopyPath })) }), error && (_jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", "data-testid": `field-error-${fieldKey(path)}`, children: error }))] }, fieldKey(path)));
     };
     const renderFieldControl = (field, currentValue, update, path) => {
         const fieldId = `field-${fieldKey(path).replace(/[^a-zA-Z0-9_-]/g, '-')}`;
@@ -62,49 +126,56 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
         const fieldThreads = currentEntryPath && onAddComment
             ? comments.filter((thread) => thread.type === 'field' &&
                 thread.entryPath === currentEntryPath &&
-                thread.canopyPath === canopyPath)
+                thread.canopyPath === canopyPath &&
+                !thread.onRemovedItem)
             : [];
+        // The full breadcrumb, so a list item's or block's fields are told apart by name.
+        const commentSubject = fieldBreadcrumb(fields, value, canopyPath).join(' › ');
         const custom = customRenderers?.[field.type];
         if (custom) {
-            const renderedField = (_jsx("div", { children: custom({
+            const renderedField = (_jsx(ReadOnlyFence, { readOnly: readOnly, children: custom({
                     field,
                     value: currentValue,
-                    onChange: update,
+                    onChange: readOnly ? noop : update,
                     path,
                     id: fieldId,
+                    readOnly,
                 }) }, fieldKey(path)));
             if (currentEntryPath && currentUserId && onAddComment && onResolveThread) {
-                return (_jsx(FieldWrapper, { canopyPath: canopyPath, entryPath: currentEntryPath, threads: fieldThreads, autoFocus: focusedFieldPath === canopyPath, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, children: renderedField }, fieldKey(path)));
+                return (_jsx(FieldWrapper, { canopyPath: canopyPath, entryPath: currentEntryPath, threads: fieldThreads, commentBlockedReason: commentBlockedReason?.(canopyPath), autoFocus: focusedFieldPath === canopyPath, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: onGetUserMetadata, fieldLabel: commentSubject, resetKey: boundaryResetKey, controlPlacement: "corner", children: renderedField }, fieldKey(path)));
             }
             return renderedField;
         }
-        const label = field.label ?? field.name;
+        const label = schemaLabel(field);
         const wrapWithComments = (renderedField) => {
             if (currentEntryPath && currentUserId && onAddComment && onResolveThread) {
-                return (_jsx(FieldWrapper, { canopyPath: canopyPath, entryPath: currentEntryPath, threads: fieldThreads, autoFocus: focusedFieldPath === canopyPath, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, children: renderedField }));
+                return (_jsx(FieldWrapper, { canopyPath: canopyPath, entryPath: currentEntryPath, threads: fieldThreads, commentBlockedReason: commentBlockedReason?.(canopyPath), autoFocus: focusedFieldPath === canopyPath, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: onGetUserMetadata, fieldLabel: commentSubject, resetKey: boundaryResetKey, children: renderedField }));
             }
             return renderedField;
         };
         switch (field.type) {
             case 'string':
                 if (field.list) {
-                    return wrapWithComments(_jsx(StringListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue) ? currentValue : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                    return wrapWithComments(_jsx(StringListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue) ? currentValue : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
                 }
-                return wrapWithComments(_jsx(TextField, { id: fieldId, label: label, description: field.description, value: currentValue ?? '', onChange: update, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(TextField, { id: fieldId, label: label, description: field.description, value: currentValue ?? '', onChange: update, dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
             case 'boolean':
-                return wrapWithComments(_jsx(ToggleField, { id: fieldId, label: label, description: field.description, value: Boolean(currentValue), onChange: (v) => update(Boolean(v)), dataCanopyField: normalizeCanopyPath(path), testId: `field-toggle-${field.name}` }, fieldKey(path)));
+                return wrapWithComments(_jsx(ToggleField, { id: fieldId, label: label, description: field.description, value: Boolean(currentValue), onChange: (v) => update(Boolean(v)), dataCanopyField: normalizeCanopyPath(path), testId: `field-toggle-${field.name}`, readOnly: readOnly }, fieldKey(path)));
             case 'number':
                 if (field.list) {
                     return wrapWithComments(_jsx(NumberListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue)
                             ? currentValue.filter((v) => typeof v === 'number')
-                            : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                            : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
                 }
-                return wrapWithComments(_jsx(NumberField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'number' ? currentValue : undefined, onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(NumberField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'number' ? currentValue : undefined, onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
             case 'datetime':
-                return wrapWithComments(_jsx(DateTimeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(DateTimeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly, stampOnPublish: 'stampOnPublish' in field && field.stampOnPublish === true }, fieldKey(path)));
             case 'markdown':
-            case 'mdx':
-                return wrapWithComments(_jsx(MarkdownField, { id: fieldId, label: label, description: field.description, value: currentValue ?? '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+            case 'mdx': {
+                const isBody = path.length === 1 && path[0] === bodyName;
+                const policy = markdownPolicyOf(field, siteMdxAllow, isBody ? format : undefined);
+                return wrapWithComments(_jsx(MarkdownField, { id: fieldId, label: label, description: field.description, value: currentValue ?? '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), htmlTags: policy?.dialect === 'mdx' ? policy.allow.htmlTags : undefined, readOnly: readOnly }, fieldKey(path)));
+            }
             case 'select': {
                 const selectField = field;
                 const options = normalizeOptions(selectField.options);
@@ -113,7 +184,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                         ? Array.isArray(currentValue)
                             ? currentValue
                             : []
-                        : (currentValue ?? ''), multiple: isMulti, onChange: (next) => update(next), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                        : (currentValue ?? ''), multiple: isMulti, onChange: (next) => update(next), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
             }
             case 'reference': {
                 const referenceField = field;
@@ -128,7 +199,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                         ? Array.isArray(currentValue)
                             ? currentValue
                             : []
-                        : (currentValue ?? ''), multiple: isMulti, onChange: (next) => update(next), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                        : (currentValue ?? ''), multiple: isMulti, onChange: (next) => update(next), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
             }
             case 'image': {
                 const imageField = field;
@@ -136,11 +207,20 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                         src: fieldErrors?.[`${canopyPath}.src`],
                         alt: fieldErrors?.[`${canopyPath}.alt`],
                         crop: fieldErrors?.[`${canopyPath}.crop`],
-                    } }, fieldKey(path)));
+                    }, readOnly: readOnly, onRemoved: (removed) => onRemoved?.({ kind: 'value', path, value: removed, label: `the image from ${label}` }) }, fieldKey(path)));
             }
             case 'block': {
                 const blockField = field;
-                return wrapWithComments(_jsx(BlockField, { label: label, description: field.description, templates: blockField.templates, value: (Array.isArray(currentValue) ? currentValue : []), onChange: (next) => update(next), renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(BlockField, { label: label, required: field.required, description: field.description, templates: blockField.templates, value: (Array.isArray(currentValue) ? currentValue : []), onChange: (next) => update(next), renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly, resetKey: boundaryResetKey, hasErrors: rowHasErrors(path), onRemoved: (index, block) => {
+                        const template = blockField.templates.find((t) => t.name === block.template);
+                        onRemoved?.({
+                            kind: 'list-item',
+                            listPath: path,
+                            index,
+                            item: block,
+                            label: `"${template ? schemaLabel(template) : block.template}" from ${label}`,
+                        });
+                    } }, fieldKey(path)));
             }
             case 'object': {
                 const objectField = field;
@@ -148,41 +228,56 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                     const items = Array.isArray(currentValue)
                         ? currentValue
                         : [];
-                    return wrapWithComments(_jsx(Paper, { withBorder: true, radius: "md", p: "md", shadow: "xs", ...groupDescriptionProps(fieldId, field.description), children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "sm", fw: 600, children: label }), _jsx(Button, { size: "xs", variant: "light", onClick: () => update([...items, {}]), children: "Add item" })] }), _jsx(FieldDescription, { baseId: fieldId, description: field.description }), _jsxs(Stack, { gap: "sm", children: [items.map((item, idx) => {
-                                            const itemTitle = listItemTitle(item, objectField.itemTitleField, `${label} #${idx + 1}`);
-                                            return (_jsx(Paper, { role: "group", "aria-label": itemTitle, withBorder: true, radius: "md", p: "sm", shadow: "xs", children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "xs", fw: 700, children: itemTitle }), _jsx(Button, { size: "xs", variant: "subtle", color: "red", onClick: () => update(items.filter((_, i) => i !== idx)), children: "Remove" })] }), _jsx(ObjectField, { fields: objectField.fields, value: item, onChange: (next) => {
-                                                                const nextItems = [...items];
-                                                                nextItems[idx] = next;
-                                                                update(nextItems);
-                                                            }, renderField: renderField, path: [...path, idx], dataCanopyField: normalizeCanopyPath([...path, idx]) })] }) }, fieldKey([...path, idx])));
-                                        }), items.length === 0 && (_jsx(Text, { size: "xs", c: "dimmed", children: "No items yet. Add one to get started." }))] })] }) }, fieldKey(path)));
+                    return wrapWithComments(_jsx(ObjectListField, { id: fieldId, label: label, field: objectField, items: items, itemKeys: keysForList(items, fieldKey(path)), onChange: (next) => update(next), renderField: renderField, path: path, canopyPath: canopyPath, readOnly: readOnly, resetKey: boundaryResetKey, hasErrors: rowHasErrors(path), onRemoved: (index, item) => onRemoved?.({
+                            kind: 'list-item',
+                            listPath: path,
+                            index,
+                            item,
+                            label: removedItemLabel(item, objectField, label, index),
+                        }) }, fieldKey(path)));
                 }
-                // Unlike the list branch above (each item has its own Remove button), a
-                // non-list object has no other way back to `undefined`: a required child
-                // filled and cleared to `''` reads as empty via `isEmptyForRequired`
-                // (entry-validator.ts), but the object itself only reads "absent" when
-                // `undefined`/`null`. The Clear button (ObjectField's `onRemove`) resets to
-                // `undefined`, never `{}` -- shown only when the field is optional and
-                // already has a value, and labeled "Clear" rather than "Remove" so it
-                // doesn't read as deleting the field from the schema.
+                // A non-list object has no list item to remove, so its only way back to `undefined` is
+                // the Clear button (`onRemove`): shown only for an optional field that has a value.
+                // Reset to `undefined`, never `{}`, which `isEmptyForRequired` (entry-validator.ts) reads
+                // as present. The label is "Clear" (docs/ux-guidelines.md, Vocabulary), and it offers Undo.
                 const hasValue = currentValue !== undefined && currentValue !== null;
-                const canClear = objectField.required !== true && hasValue;
-                return wrapWithComments(_jsx(ObjectField, { label: label, description: field.description, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onRemove: canClear ? () => update(undefined) : undefined, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                const canClear = !readOnly && objectField.required !== true && hasValue;
+                return wrapWithComments(_jsx(ObjectField, { label: label, required: objectField.required, description: field.description, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onRemove: canClear
+                        ? () => {
+                            update(undefined);
+                            onRemoved?.({
+                                kind: 'value',
+                                path,
+                                value: currentValue,
+                                label: `"${label}"`,
+                                action: 'clear',
+                            });
+                        }
+                        : undefined, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             }
             case 'code':
-                return wrapWithComments(_jsx(CodeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                return wrapWithComments(_jsx(CodeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
             default:
                 return (_jsxs(Text, { size: "xs", c: "dimmed", children: ["Unsupported field: ", field.type] }, fieldKey(path)));
         }
     };
-    return (_jsxs(Stack, { gap: "md", "data-form-renderer": true, children: [currentEntryPath && currentUserId && onAddComment && onResolveThread && (_jsx(EntryComments, { comments: comments, entryPath: currentEntryPath, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId })), conflictNotice && (_jsx(Alert, { icon: _jsx(IconInfoCircle, { size: 16 }), color: "orange", variant: "light", title: "Page updated since your draft started", "data-testid": "conflict-alert", children: "Someone else has recently changed this page. You can keep editing \u2014 a reviewer will reconcile your changes when you submit." })), fieldErrors && Object.keys(fieldErrors).length > 0 && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", title: "Fix these issues before saving", "data-testid": "validation-alert", children: _jsx(Stack, { gap: 2, children: Object.entries(fieldErrors).map(([path, message]) => (_jsxs(Text, { size: "xs", children: [path, ": ", message] }, path))) }) })), fields.map((field) => {
-                // Inline groups are transparent to the value — render them directly with parent value/onChange
-                if (field.type === 'group') {
-                    const groupField = field;
-                    return (_jsx("div", { children: _jsx(InlineGroupField, { label: groupField.label, description: groupField.description, fields: groupField.fields, value: value, onChange: onChange, renderField: renderField, path: [] }) }, `group-${groupField.name}`));
-                }
-                const val = value[field.name];
-                const path = [field.name];
-                return (_jsx("div", { children: renderField(field, val, (next) => onChange({ ...value, [field.name]: next }), path) }, fieldKey(path)));
-            })] }));
+    return (_jsx(FormCommentsContext.Provider, { value: formComments, children: _jsx(FormExpansionContext.Provider, { value: expansionCommand, children: _jsxs(Stack, { ref: formRef, gap: "md", "data-form-renderer": true, className: readOnly ? READ_ONLY_FORM_CLASS : undefined, children: [header && (_jsx(FormHeader, { title: header.title, typeLabel: header.typeLabel, outline: buildFormOutline(fields, value, customTypes), onSelect: (path) => {
+                            const target = formRef.current ? findFieldTarget(path, formRef.current) : undefined;
+                            if (target)
+                                focusFieldTarget(target.element);
+                        }, onExpandAll: hasCollapsibleList(fields, customTypes)
+                            ? (expanded) => setExpansionCommand((prev) => ({ seq: (prev?.seq ?? 0) + 1, expanded }))
+                            : undefined })), notice, readOnly && _jsx(ReadOnlyFormStyles, {}), currentEntryPath && currentUserId && onAddComment && onResolveThread && (_jsx(EntryComments, { comments: comments, entryPath: currentEntryPath, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: onGetUserMetadata, resetKey: boundaryResetKey, removedItemFieldLabel: (thread) => removedItemFieldLabel?.(thread) ??
+                            fieldBreadcrumb(fields, undefined, thread.canopyPath ?? '', { items: false }).join(' › ') })), conflictNotice && (_jsx(Alert, { icon: _jsx(IconInfoCircle, { size: 16 }), color: "orange", variant: "light", title: "Page updated since your draft started", "data-testid": "conflict-alert", children: readOnly
+                            ? 'Someone else has recently changed this page.'
+                            : 'Someone else has recently changed this page. You can keep editing — a reviewer will reconcile your changes when you submit.' })), fieldErrors && _jsx(ValidationSummary, { fields: fields, value: value, errors: fieldErrors }), fields.map((field) => {
+                        // Inline groups are transparent to the value — render them directly with parent value/onChange
+                        if (field.type === 'group') {
+                            const groupField = field;
+                            return (_jsx("div", { children: _jsx(InlineGroupField, { label: groupField.label, description: groupField.description, fields: groupField.fields, value: value, onChange: emit, renderField: renderField, path: [] }) }, `group-${groupField.name}`));
+                        }
+                        const val = value[field.name];
+                        const path = [field.name];
+                        return (_jsx("div", { children: renderField(field, val, (next) => emit({ ...value, [field.name]: next }), path) }, fieldKey(path)));
+                    })] }) }) }));
 };

package/dist/editor/PreviewFrame.d.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from 'react';
+/** What the preview reports of its marks; see `PreviewMarksMessage`. */
+export interface PreviewMarks {
+    count: number;
+    paths?: string[];
+}
+/**
+ * Lightweight iframe wrapper to keep the preview in sync with form state.
+ * It posts the latest draft data to the iframe after load and when data changes. A progress bar
+ * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
+ * to reload the preview.
+ */
+export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }: {
+    src: string;
+    path: string;
+    data?: unknown;
+    isLoading?: unknown;
+    className?: string;
+    style?: CSSProperties;
+    highlightEnabled?: boolean;
+    /**
+     * The editor's authenticated asset route, a same-origin path, so it is sent with drafts only to
+     * a same-origin preview: another origin would resolve it against itself.
+     */
+    assetBase?: string;
+    /** Called when the preview reports a draft compile/render error; null clears it. */
+    onPreviewError?: (error: {
+        message: string;
+        fieldPath?: string;
+    } | null) => void;
+    /**
+     * Called with how many elements the preview marks, while highlighting is on, and their
+     * distinct paths when the preview sends them within `MARK_REPORT_LIMITS`.
+     */
+    onMarks?: (marks: PreviewMarks) => void;
+    /** Overrides the iframe's own layout, such as a fixed width and scale; the bar and chip stay unscaled. */
+    iframeStyle?: CSSProperties;
+    /** Replaces the chip's Retry, for a host whose own reload control remounts the frame. */
+    onReload?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;