canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/fields/BlockField.js

@@ -1,87 +1,103 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId, useMemo, useState } from 'react';
-let blockKeyCounter = 0;
-import { ActionIcon, Button, Group, Paper, Select, Stack, Text } from '@mantine/core';
-import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
-import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+import React, { useId, useRef, useState } from 'react';
+import { ActionIcon, Box, Button, Group, Menu, Paper, ScrollArea, Stack, Text, Tooltip, } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { IconPlus } from '@tabler/icons-react';
+import { ITEM_KEY, mintItemKey, withFreshItemKeys } from '../../item-keys.js';
+import { isPlainRecord } from '../../validation/field-traversal.js';
 import { formatCanopyPath } from '../canopy-path.js';
-import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
+import { useFieldCommentControl } from '../comments/field-comment-context.js';
+import { ExpandAllButton } from './ExpandAllButton.js';
+import { groupDescriptionProps } from './FieldDescription.js';
+import { FieldLabel } from './FieldLabel.js';
+import { ItemList } from './ItemList.js';
+import { useItemExpansion } from './item-expansion.js';
+import { useListItemKeys } from './list-item-keys.js';
+import { listItemSecondary } from './list-item-title.js';
+import { schemaLabel } from '../schema-label.js';
 const findTemplate = (templates, name) => templates.find((t) => t.name === name);
-const SortableBlock = ({ id, children }) => {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-        id,
-    });
-    const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0.85 : 1,
-    };
-    return (_jsx(Paper, { ref: setNodeRef, withBorder: true, radius: "md", p: "sm", shadow: "xs", style: style, children: _jsxs(Group, { align: "flex-start", gap: "sm", children: [_jsx(ActionIcon, { variant: "subtle", "aria-label": "Drag to reorder", ...attributes, ...listeners, style: { cursor: 'grab' }, children: "\u21C5" }, "drag-handle"), _jsx("div", { style: { flex: 1, minWidth: 0, width: '100%' }, children: children }, "content")] }) }));
+const ADD_SECTION = 'Add section';
+/**
+ * The block templates as a menu, each with its description, so an editor picks a section by
+ * what it is for. `target` is the control that opens it.
+ */
+const TemplateMenu = ({ templates, onPick, onOpenChange, target }) => (_jsxs(Menu, { position: "bottom-start", withinPortal: true, shadow: "md", width: 320, onChange: onOpenChange, children: [target, _jsx(Menu.Dropdown, { "data-testid": "block-template-menu", children: _jsx(ScrollArea.Autosize, { mah: 360, type: "auto", children: templates.map((template) => (_jsxs(Menu.Item, { onClick: () => onPick(template.name), "data-testid": `block-template-${template.name}`, children: [_jsx(Text, { size: "sm", fw: 500, children: schemaLabel(template) }), template.description && (_jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'normal' }, children: template.description }))] }, template.name))) }) })] }));
+/**
+ * The gap before a block. Its add control shows while the gap is hovered, the control is focused
+ * or its menu is open, and stays in the tab order, so a keyboard reaches it before each block.
+ */
+const InsertBetween = ({ templates, onPick }) => {
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [opened, setOpened] = useState(false);
+    // A touch screen has no hover, so the control stays faintly visible there.
+    const noHover = useMediaQuery('(hover: none)');
+    const shown = hovered || focused || opened;
+    const opacity = shown ? 1 : noHover ? 0.6 : 0;
+    return (_jsxs(Box, { h: 20, pos: "relative", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), "data-testid": "block-insert-between", children: [_jsx(Box, { "aria-hidden": true, pos: "absolute", left: 0, right: 0, top: "50%", h: 2, bg: "var(--mantine-primary-color-filled)", style: { opacity: shown ? 1 : 0, transition: 'opacity 120ms ease' } }), _jsx(Group, { justify: "center", h: "100%", style: { position: 'relative' }, children: _jsx(TemplateMenu, { templates: templates, onPick: onPick, onOpenChange: setOpened, target: _jsx(Tooltip, { label: "Add section here", openDelay: 300, children: _jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "sm", radius: "xl", variant: "default", "aria-label": "Add section here", onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: { opacity, transition: 'opacity 120ms ease' }, children: _jsx(IconPlus, { size: 14, "aria-hidden": true }) }) }) }) }) })] }));
 };
-export const BlockField = ({ label, description, templates, value, onChange, renderField, path, dataCanopyField, }) => {
+export const BlockField = ({ label, required, description, templates, value, onChange, renderField, path, dataCanopyField, readOnly = false, resetKey = '', hasErrors, onRemoved, }) => {
     const descriptionBaseId = useId();
-    const [itemKeys, setItemKeys] = useState(() => value.map(() => `block-${blockKeyCounter++}`));
-    const [pendingTemplate, setPendingTemplate] = useState(null);
-    // Keeps itemKeys in sync with value's length; setState runs directly in render, not an effect.
-    if (value.length > itemKeys.length) {
-        const extras = Array.from({ length: value.length - itemKeys.length }, () => `block-${blockKeyCounter++}`);
-        setItemKeys((prev) => [...prev, ...extras]);
-    }
-    else if (value.length < itemKeys.length) {
-        setItemKeys((prev) => prev.slice(0, value.length));
-    }
-    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }));
-    const addBlock = (templateName) => {
-        const template = findTemplate(templates, templateName);
-        if (!template)
-            return;
-        onChange([...value, { template: templateName, value: {} }]);
-        setItemKeys((prev) => [
-            ...prev,
-            `block-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-        ]);
+    const commentControl = useFieldCommentControl(dataCanopyField ?? formatCanopyPath(path));
+    const keysFor = useListItemKeys();
+    const itemKeys = keysFor(value, 'blocks');
+    const expansion = useItemExpansion(itemKeys, resetKey);
+    const focusAfterRenderRef = useRef(null);
+    const emit = (next) => {
+        if (!readOnly)
+            onChange(next);
     };
-    const moveBlock = (from, to) => {
-        if (from === to || from < 0 || to < 0 || from >= value.length || to >= value.length)
-            return;
-        onChange(arrayMove(value, from, to));
-        setItemKeys((prev) => arrayMove(prev, from, to));
+    const insertAt = (index, block) => {
+        focusAfterRenderRef.current = index;
+        emit([...value.slice(0, index), block, ...value.slice(index)]);
     };
-    const removeBlock = (index) => {
-        onChange(value.filter((_, idx) => idx !== index));
-        setItemKeys((prev) => prev.filter((_, idx) => idx !== index));
+    const addAt = (index) => (templateName) => {
+        if (findTemplate(templates, templateName))
+            insertAt(index, { template: templateName, value: {}, [ITEM_KEY]: mintItemKey() });
     };
     const updateBlockValue = (index, val) => {
         const next = [...value];
         next[index] = { ...next[index], value: val };
-        onChange(next);
-    };
-    const handleDragEnd = (event) => {
-        const { active, over } = event;
-        if (!over || active.id === over.id)
-            return;
-        const oldIndex = itemKeys.indexOf(String(active.id));
-        const newIndex = itemKeys.indexOf(String(over.id));
-        if (oldIndex === -1 || newIndex === -1)
-            return;
-        moveBlock(oldIndex, newIndex);
+        emit(next);
     };
-    const selectableTemplates = useMemo(() => templates.map((t) => ({ value: t.name, label: t.label ?? t.name })), [templates]);
-    return (_jsx(Paper, { withBorder: true, radius: "md", p: "md", bg: "gray.0", "data-canopy-field": dataCanopyField ?? formatCanopyPath(path), shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: label ?? 'Blocks' }), _jsx(Select, { "aria-label": "Add block", placeholder: "Add block...", data: selectableTemplates, value: pendingTemplate, onChange: (next) => {
-                                if (next) {
-                                    addBlock(next);
-                                }
-                                setPendingTemplate(null);
-                            }, allowDeselect: true, size: "xs", w: 180 })] }), _jsx(FieldDescription, { baseId: descriptionBaseId, description: description }), _jsx(DndContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: itemKeys, strategy: verticalListSortingStrategy, children: _jsx(Stack, { gap: "sm", children: value.map((block, idx) => {
-                                const template = findTemplate(templates, block.template);
-                                const currentPath = [...path, idx];
-                                return (_jsx(SortableBlock, { id: itemKeys[idx], children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", align: "flex-start", children: [_jsx(Text, { size: "sm", fw: 600, children: template?.label ?? block.template ?? 'Unknown block' }), _jsxs(Group, { gap: 4, children: [_jsx(ActionIcon, { variant: "light", "aria-label": "Move block up", disabled: idx === 0, onClick: () => moveBlock(idx, idx - 1), children: "\u2191" }), _jsx(ActionIcon, { variant: "light", "aria-label": "Move block down", disabled: idx === value.length - 1, onClick: () => moveBlock(idx, idx + 1), children: "\u2193" }), _jsx(Button, { variant: "subtle", color: "red", size: "xs", onClick: () => removeBlock(idx), children: "Remove" })] })] }), template ? (_jsx(Stack, { gap: "sm", children: template.fields.map((f) => (_jsx(React.Fragment, { children: renderField(f, block.value?.[f.name], (next) => updateBlockValue(idx, {
-                                                        ...block.value,
-                                                        [f.name]: next,
-                                                    }), [...currentPath, f.name]) }, f.name))) })) : (_jsxs(Text, { size: "xs", c: "red", children: ["No template found for \"", block.template, "\""] }))] }) }, itemKeys[idx]));
-                            }) }) }) })] }) }));
+    return (_jsx(Paper, { withBorder: true, p: "md", bg: "var(--canopy-surface-subtle)", "data-canopy-field": dataCanopyField ?? formatCanopyPath(path), role: "group", "aria-label": label ?? 'Blocks', "data-removal-focus": true, tabIndex: -1, shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldLabel, { label: label ?? 'Blocks', required: required, description: description, descriptionBaseId: descriptionBaseId, commentControl: commentControl, actions: value.length > 1 && _jsx(ExpandAllButton, { expansion: expansion }) }), _jsx(ItemList, { items: value, itemKeys: itemKeys, path: path, readOnly: readOnly, expansion: expansion, focusAfterRenderRef: focusAfterRenderRef, hasErrors: hasErrors, summarize: (block) => {
+                        const template = findTemplate(templates, block.template);
+                        return {
+                            title: template ? schemaLabel(template) : (block.template ?? 'Unknown block'),
+                            secondary: template ? listItemSecondary(block.value, template.fields) : undefined,
+                        };
+                    }, describe: (block) => findTemplate(templates, block.template)?.description, onMove: (from, to) => {
+                        if (from === to || to < 0 || to >= value.length)
+                            return;
+                        const next = [...value];
+                        const [moved] = next.splice(from, 1);
+                        next.splice(to, 0, moved);
+                        emit(next);
+                    }, onDuplicate: (idx) => 
+                    // Focus stays on the row's menu, which stands in for the item that acted. The copy
+                    // gets new keys, so no comment thread follows it.
+                    emit([
+                        ...value.slice(0, idx + 1),
+                        withFreshItemKeys({ type: 'block', name: 'blocks', templates }, structuredClone(value[idx])),
+                        ...value.slice(idx + 1),
+                    ]), onRemove: (idx) => {
+                        if (readOnly)
+                            return;
+                        const block = value[idx];
+                        emit(value.filter((_, i) => i !== idx));
+                        onRemoved?.(idx, block);
+                    }, renderBetween: readOnly
+                        ? undefined
+                        : (idx) => _jsx(InsertBetween, { templates: templates, onPick: addAt(idx) }), renderItem: (block, idx) => {
+                        const template = findTemplate(templates, block.template);
+                        const currentPath = [...path, idx];
+                        if (!template) {
+                            return (_jsxs(Text, { size: "sm", c: "var(--canopy-danger-text)", children: ["No template found for \"", block.template, "\""] }));
+                        }
+                        return template.fields.map((f) => (_jsx(React.Fragment, { children: renderField(f, block.value?.[f.name], (next) => updateBlockValue(idx, {
+                                ...(isPlainRecord(block.value) ? block.value : {}),
+                                [f.name]: next,
+                            }), [...currentPath, f.name]) }, f.name)));
+                    } }), value.length === 0 && (_jsx(Text, { size: "sm", c: "dimmed", children: readOnly ? 'No sections.' : 'No sections yet.' })), !readOnly && (_jsx(Group, { children: _jsx(TemplateMenu, { templates: templates, onPick: addAt(value.length), target: _jsx(Menu.Target, { children: _jsx(Button, { variant: "light", size: "xs", leftSection: _jsx(IconPlus, { size: 14, "aria-hidden": true }), "data-testid": "block-add-section", children: ADD_SECTION }) }) }) }))] }) }));
 };

package/dist/editor/fields/CodeField.d.ts

@@ -7,5 +7,7 @@ export interface CodeFieldProps {
     onChange: (value: string) => void;
     language?: string;
     dataCanopyField?: string;
+    /** Shows the value without accepting edits. */
+    readOnly?: boolean;
 }
 export declare const CodeField: React.FC<CodeFieldProps>;

package/dist/editor/fields/CodeField.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from 'react';
 import { Textarea } from '@mantine/core';
+import { LabelledInput } from './FieldLabel.js';
 // Placeholder for Monaco integration; host app can provide custom renderer for production.
-export const CodeField = ({ id, label, description, value, onChange, language, dataCanopyField, }) => {
+export const CodeField = ({ id, label, description, value, onChange, language, dataCanopyField, readOnly = false, }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
-    return (_jsx(Textarea, { id: inputId, label: label, description: description, value: value, onChange: (e) => onChange(e.currentTarget.value), placeholder: language ? `Code (${language})` : 'Code', autosize: true, minRows: 6, size: "sm", "data-canopy-field": dataCanopyField, styles: { input: { fontFamily: 'Menlo, Consolas, monospace' } } }));
+    return (_jsx(LabelledInput, { label: label, inputId: inputId, canopyPath: dataCanopyField, children: _jsx(Textarea, { id: inputId, description: description, value: value, readOnly: readOnly, onChange: (e) => {
+                if (!readOnly)
+                    onChange(e.currentTarget.value);
+            }, placeholder: language ? `Code (${language})` : 'Code', autosize: true, minRows: 6, size: "sm", "data-canopy-field": dataCanopyField, styles: { input: { fontFamily: 'Menlo, Consolas, monospace' } } }) }));
 };

package/dist/editor/fields/DateTimeField.d.ts

@@ -6,34 +6,9 @@ export interface DateTimeFieldProps {
     value: string;
     onChange: (value: string) => void;
     dataCanopyField?: string;
+    /** Shows the value without accepting edits. */
+    readOnly?: boolean;
+    /** The field's `stampOnPublish`: the description says when a submit fills it. */
+    stampOnPublish?: boolean;
 }
-/**
- * Converts a stored value (ISO 8601 UTC, e.g. `YYYY-MM-DDTHH:mm:ss.sssZ`)
- * into the local wall-clock string a `datetime-local` input expects
- * (`YYYY-MM-DDTHH:mm:ss`, no timezone). Returns '' for '' or an unparsable value.
- * @internal Exported for tests.
- */
-export declare function isoToDatetimeLocalValue(iso: string): string;
-/**
- * Convert a `datetime-local` input's local wall-clock string back into the
- * ISO 8601 UTC storage format. Returns '' for '' or an unparsable value.
- * @internal Exported for tests.
- */
-export declare function datetimeLocalValueToIso(local: string): string;
-/**
- * Editor for `type: 'datetime'` fields.
- *
- * Storage format: ISO 8601 UTC string (e.g. `YYYY-MM-DDTHH:mm:ss.sssZ`) — what
- * `Date.prototype.toISOString()` produces and `validation/entry-validator.ts`'s
- * datetime check (`Date.parse`) accepts. Empty string means "not set".
- *
- * Uses a native `datetime-local` input in Mantine's `Input.Wrapper` rather than
- * `@mantine/dates` (not a dependency here) — a real picker with zero new deps.
- *
- * `datetime-local` has no timezone: converts UTC ISO -> local for display and
- * back on change, so an unedited load-then-save round-trips exactly instead of
- * drifting by the browser's offset. `step={1}` preserves seconds in that
- * round-trip; sub-second precision is not preserved (no milliseconds field),
- * so a value with non-zero milliseconds is zeroed out once resaved.
- */
 export declare const DateTimeField: React.FC<DateTimeFieldProps>;

package/dist/editor/fields/DateTimeField.js

@@ -1,56 +1,94 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useId } from 'react';
-import { Input } from '@mantine/core';
+import { useId, useRef } from 'react';
+import { ActionIcon, Tooltip } from '@mantine/core';
+import { DateTimePicker } from '@mantine/dates';
+import { IconX } from '@tabler/icons-react';
+import dayjs from 'dayjs';
+import { LabelledInput } from './FieldLabel.js';
+/** Whether the locale uses a 12-hour clock, as the dropdown's native time input then does. */
+const usesTwelveHourClock = () => {
+    const { hour12, hourCycle } = new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+    }).resolvedOptions();
+    return hour12 ?? (hourCycle === 'h11' || hourCycle === 'h12');
+};
+const valueFormat = () => `D MMM YYYY, ${usesTwelveHourClock() ? 'h:mm:ss A' : 'HH:mm:ss'}`;
+const REMOVE_LABEL = 'Remove date and time';
+// The picker's own controls are icon-only or unlabelled without these.
+const CALENDAR_LABELS = {
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    previousYear: 'Previous year',
+    nextYear: 'Next year',
+    previousDecade: 'Previous decade',
+    nextDecade: 'Next decade',
+    monthLevelControl: 'Choose a month',
+    yearLevelControl: 'Choose a year',
+};
+const DATE_PART = /^(\d{4})-(\d{2})-(\d{2})([Tt ]|$)/;
+/** Whether the written year, month and day name a real day; `Date` rolls 30 Feb on to 1 Mar. */
+const isCalendarDate = (year, month, day) => {
+    const lastOfMonth = new Date(0);
+    lastOfMonth.setUTCFullYear(year, month, 0);
+    return month >= 1 && month <= 12 && day >= 1 && day <= lastOfMonth.getUTCDate();
+};
 /**
- * Converts a stored value (ISO 8601 UTC, e.g. `YYYY-MM-DDTHH:mm:ss.sssZ`)
- * into the local wall-clock string a `datetime-local` input expects
- * (`YYYY-MM-DDTHH:mm:ss`, no timezone). Returns '' for '' or an unparsable value.
- * @internal Exported for tests.
+ * The stored value as a Date, or null for '', an unparsable value or a day that does not exist. A
+ * date-only value is local midnight; `Date` reads UTC midnight, the evening before west of UTC.
  */
-export function isoToDatetimeLocalValue(iso) {
+const toDate = (iso) => {
     if (!iso)
-        return '';
+        return null;
+    const datePart = DATE_PART.exec(iso);
+    if (datePart) {
+        const [year, month, day] = datePart.slice(1, 4).map(Number);
+        if (!isCalendarDate(year, month, day))
+            return null;
+        if (datePart[4] === '') {
+            // setFullYear, since the constructor maps years 0-99 to 1900-1999.
+            const local = new Date(0);
+            local.setFullYear(year, month - 1, day);
+            local.setHours(0, 0, 0, 0);
+            return local;
+        }
+    }
     const date = new Date(iso);
-    if (Number.isNaN(date.getTime()))
-        return '';
-    const pad = (n) => String(n).padStart(2, '0');
-    const base = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` +
-        `T${pad(date.getHours())}:${pad(date.getMinutes())}`;
-    // Seconds are included only when non-zero, matching a real browser's own
-    // `datetime-local` serialization, so the value we set agrees with what the control reports back.
-    return date.getSeconds() === 0 ? base : `${base}:${pad(date.getSeconds())}`;
-}
-/**
- * Convert a `datetime-local` input's local wall-clock string back into the
- * ISO 8601 UTC storage format. Returns '' for '' or an unparsable value.
- * @internal Exported for tests.
- */
-export function datetimeLocalValueToIso(local) {
-    if (!local)
-        return '';
-    const date = new Date(local);
-    if (Number.isNaN(date.getTime()))
-        return '';
-    return date.toISOString();
-}
+    return Number.isNaN(date.getTime()) ? null : date;
+};
+/** The browser's zone as it abbreviates it ("MDT"), which the field shows times in. */
+const zoneName = (at) => new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' })
+    .formatToParts(at)
+    .find((part) => part.type === 'timeZoneName')?.value;
 /**
- * Editor for `type: 'datetime'` fields.
+ * Editor for `type: 'datetime'` fields, a Mantine `DateTimePicker` in the browser's time zone,
+ * which its description names.
  *
  * Storage format: ISO 8601 UTC string (e.g. `YYYY-MM-DDTHH:mm:ss.sssZ`) — what
  * `Date.prototype.toISOString()` produces and `validation/entry-validator.ts`'s
  * datetime check (`Date.parse`) accepts. Empty string means "not set".
  *
- * Uses a native `datetime-local` input in Mantine's `Input.Wrapper` rather than
- * `@mantine/dates` (not a dependency here) — a real picker with zero new deps.
- *
- * `datetime-local` has no timezone: converts UTC ISO -> local for display and
- * back on change, so an unedited load-then-save round-trips exactly instead of
- * drifting by the browser's offset. `step={1}` preserves seconds in that
- * round-trip; sub-second precision is not preserved (no milliseconds field),
- * so a value with non-zero milliseconds is zeroed out once resaved.
+ * Only a pick or Remove writes, so a loaded value, date-only or unparsable, saves back unchanged.
+ * A pick keeps seconds (`withSeconds`).
  */
-export const DateTimeField = ({ id, label, description, value, onChange, dataCanopyField, }) => {
+/** Conditional: the editor cannot tell whether an entry is new to the base, and only a new one is stamped. */
+const STAMP_NOTE = "If left empty on a new entry, it's set to the time its branch is first submitted for review.";
+export const DateTimeField = ({ id, label, description, value, onChange, dataCanopyField, readOnly = false, stampOnPublish = false, }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
-    return (_jsx(Input.Wrapper, { id: inputId, label: label, description: description, size: "sm", children: _jsx(Input, { type: "datetime-local", step: 1, size: "sm", value: isoToDatetimeLocalValue(value), onChange: (e) => onChange(datetimeLocalValueToIso(e.currentTarget.value)), "data-canopy-field": dataCanopyField }) }));
+    const triggerRef = useRef(null);
+    const date = toDate(value);
+    const zone = zoneName(date ?? new Date());
+    const zoneNote = zone ? `In your time zone (${zone}).` : undefined;
+    const stampNote = stampOnPublish ? STAMP_NOTE : undefined;
+    const format = valueFormat();
+    return (_jsx(LabelledInput, { label: label, inputId: inputId, canopyPath: dataCanopyField, children: _jsx(DateTimePicker, { ref: triggerRef, id: inputId, "aria-label": `${label ?? 'Date and time'}, ${date ? dayjs(date).format(format) : 'not set'}`, description: [description, stampNote, zoneNote].filter(Boolean).join(' ') || undefined, size: "sm", value: date, onChange: (next) => {
+                if (!readOnly)
+                    onChange(next ? next.toISOString() : '');
+            }, withSeconds: true, valueFormat: format, placeholder: readOnly ? undefined : 'Pick a date and time', ariaLabels: CALENDAR_LABELS, timeInputProps: { 'aria-label': 'Time' }, submitButtonProps: { 'aria-label': 'Done' }, 
+            // Red is for errors here, so weekends look like other days.
+            weekendDays: [], rightSection: date && !readOnly ? (_jsx(Tooltip, { label: REMOVE_LABEL, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": REMOVE_LABEL, onClick: () => {
+                        onChange('');
+                        // The control goes with the value, so focus returns to the field.
+                        triggerRef.current?.focus();
+                    }, children: _jsx(IconX, { size: 14, "aria-hidden": true }) }) })) : undefined, rightSectionPointerEvents: "all", readOnly: readOnly, "data-canopy-field": dataCanopyField }) }));
 };

package/dist/editor/fields/ExpandAllButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ItemExpansion } from './item-expansion.js';
+/** One button for a collapsible list: "Collapse all" once every row is open, else "Expand all". */
+export declare const ExpandAllButton: React.FC<{
+    expansion: ItemExpansion;
+}>;

package/dist/editor/fields/ExpandAllButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mantine/core';
+/** One button for a collapsible list: "Collapse all" once every row is open, else "Expand all". */
+export const ExpandAllButton = ({ expansion }) => (_jsx(Button, { variant: "subtle", color: "gray", c: "dimmed", size: "compact-xs", onClick: () => expansion.setAll(!expansion.allExpanded), "data-testid": "list-expand-all", children: expansion.allExpanded ? 'Collapse all' : 'Expand all' }));

package/dist/editor/fields/FieldCrashFallback.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type CaughtEditorError } from '../components/EditorErrorBoundary.js';
+export interface FieldCrashFallbackProps {
+    label: string;
+    fieldType: string;
+    value: unknown;
+    /** Used only by markdown and mdx fields, whose raw text is edited directly; absent when read-only. */
+    onChange?: (value: unknown) => void;
+    caught: CaughtEditorError;
+    dataCanopyField?: string;
+}
+/**
+ * What a field that threw while rendering shows: its value read-only, so Save writes back
+ * exactly what is on screen, or, for a markdown or mdx field holding text, that text, still
+ * editable when there is an `onChange`.
+ */
+export declare const FieldCrashFallback: React.FC<FieldCrashFallbackProps>;

package/dist/editor/fields/FieldCrashFallback.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, Code, Group, Paper, Stack, Text } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { CopyErrorDetailsButton } from '../components/EditorErrorBoundary.js';
+import { getErrorMessage, sanitizeErrorMessage } from '../../utils/error.js';
+import { MarkdownSourceEditor } from './MarkdownField.js';
+const displayValue = (value) => {
+    if (value === undefined || value === null || value === '')
+        return '(empty)';
+    if (typeof value === 'string')
+        return value;
+    try {
+        return JSON.stringify(value, null, 2) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+};
+/**
+ * What a field that threw while rendering shows: its value read-only, so Save writes back
+ * exactly what is on screen, or, for a markdown or mdx field holding text, that text, still
+ * editable when there is an `onChange`.
+ */
+export const FieldCrashFallback = ({ label, fieldType, value, onChange, caught, dataCanopyField, }) => {
+    // Only text is editable as source; any other value would show as an empty box to type over.
+    const textSource = (fieldType === 'markdown' || fieldType === 'mdx') &&
+        (typeof value === 'string' || value === undefined || value === null);
+    return (_jsx(Paper, { withBorder: true, radius: "sm", p: "sm", "data-testid": "field-crash-fallback", "data-canopy-field": dataCanopyField, children: _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", fw: 500, children: label }), textSource ? (_jsx(MarkdownSourceEditor, { label: label, value: typeof value === 'string' ? value : '', onChange: (next) => onChange?.(next), readOnly: !onChange, failure: sanitizeErrorMessage(getErrorMessage(caught.error)) })) : (_jsxs(_Fragment, { children: [_jsx(Alert, { color: "red", variant: "light", icon: _jsx(IconAlertTriangle, { size: 16 }), children: _jsxs(Text, { size: "sm", children: ["This field couldn't be shown because of an error. Its value is below and won't be changed.", onChange && ' You can keep editing the other fields and save.'] }) }), _jsx(Code, { block: true, "data-testid": "field-crash-value", style: { whiteSpace: 'pre-wrap' }, children: displayValue(value) })] })), _jsx(Group, { children: _jsx(CopyErrorDetailsButton, { caught: caught }) })] }) }));
+};

package/dist/editor/fields/FieldLabel.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+/**
+ * The label row shared by fields and field groups: label, comment-control slot, right-aligned
+ * actions slot, and the description beneath.
+ */
+export interface FieldLabelProps {
+    /** Visible label text. When absent and there are no actions or commentControl, only the description renders. */
+    label?: React.ReactNode;
+    /** Shows Mantine's required asterisk. */
+    required?: boolean;
+    /** Guidance under the label; rendered via FieldDescription so its id matches groupDescriptionProps(baseId, ...). */
+    description?: string;
+    /** Base id shared with groupDescriptionProps/fieldDescriptionId; without it, no description renders. */
+    descriptionBaseId?: string;
+    /** When set, the label is a <label for=...>; otherwise it is a <div> (groups have no single input). */
+    htmlFor?: string;
+    /** id on the label element, so a container can aria-labelledby it. */
+    labelId?: string;
+    /** Slot right after the label text, for the field's comment control. */
+    commentControl?: React.ReactNode;
+    /** Right-aligned slot for field actions (Expand all, Clear). */
+    actions?: React.ReactNode;
+}
+export declare const FieldLabel: React.FC<FieldLabelProps>;
+/**
+ * A Mantine input under a `FieldLabel` row, in place of the input's own `label` prop, so the
+ * row can carry the field's comment control: a button inside the input's `<label>` would be
+ * invalid HTML and join the input's accessible name. The input keeps its own `description`.
+ */
+export declare const LabelledInput: React.FC<{
+    label?: string;
+    /** The input's id, which the label's `for` names. */
+    inputId: string;
+    /** The field's canopy path, which picks its comment control. */
+    canopyPath?: string;
+    children: React.ReactNode;
+}>;

package/dist/editor/fields/FieldLabel.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group, Input, Stack } from '@mantine/core';
+import { useFieldCommentControl } from '../comments/field-comment-context.js';
+import { FieldDescription } from './FieldDescription.js';
+export const FieldLabel = ({ label, required, description, descriptionBaseId, htmlFor, labelId, commentControl, actions, }) => {
+    const hasRow = Boolean(label) || Boolean(commentControl) || Boolean(actions);
+    if (!hasRow && !description)
+        return null;
+    return (_jsxs(Stack, { gap: 2, children: [hasRow && (_jsxs(Group, { justify: "space-between", wrap: "nowrap", gap: "xs", align: "center", children: [_jsxs(Group, { gap: 4, wrap: "nowrap", style: { minWidth: 0 }, children: [label && (_jsx(Input.Label, { required: required, htmlFor: htmlFor, id: labelId, labelElement: htmlFor ? 'label' : 'div', children: label })), commentControl] }), actions && (_jsx(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: actions }))] })), descriptionBaseId && (_jsx(FieldDescription, { baseId: descriptionBaseId, description: description }))] }));
+};
+/**
+ * A Mantine input under a `FieldLabel` row, in place of the input's own `label` prop, so the
+ * row can carry the field's comment control: a button inside the input's `<label>` would be
+ * invalid HTML and join the input's accessible name. The input keeps its own `description`.
+ */
+export const LabelledInput = ({ label, inputId, canopyPath, children }) => {
+    const commentControl = useFieldCommentControl(canopyPath);
+    return (_jsxs(Stack, { gap: 4, children: [_jsx(FieldLabel, { label: label, htmlFor: inputId, commentControl: commentControl }), children] }));
+};

package/dist/editor/fields/ImageField.d.ts

@@ -17,6 +17,10 @@ export interface ImageFieldProps {
     altOptional?: boolean;
     dataCanopyField?: string;
     errors?: ImageFieldErrors;
+    /** No upload, pick, crop or remove; the alt text is read-only. */
+    readOnly?: boolean;
+    /** Told of the image Remove takes out, so the caller can offer Undo. */
+    onRemoved?: (removed: ImageFieldValue) => void;
 }
 export declare const ImageField: React.FC<ImageFieldProps>;
 export {};