canopycms 0.0.68-int.113 → 0.0.68-int.114

package/dist/editor/components/EntryCreateModal.js

@@ -95,5 +95,5 @@ export function EntryCreateModal({ isOpen, collectionLabel, entryTypes: allEntry
     return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsx(Text, { fw: 600, children: "Create New Entry" }), size: "md", closeOnClickOutside: !isCreating, closeOnEscape: !isCreating, children: _jsxs(Stack, { gap: "md", "data-testid": "create-entry-modal", children: [error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error })), _jsxs(Text, { size: "sm", c: "dimmed", children: ["Creating in: ", collectionLabel] }), nothingToCreate && (_jsx(Alert, { color: "yellow", icon: _jsx(IconAlertCircle, { size: 16 }), "data-testid": "no-creatable-types", children: _jsx(UnavailableTypeMessage, { schemaRefs: skippedSchemaRefs }) })), entryTypes.length > 1 && (_jsx(Select, { label: "Entry Type", description: "Select the type of entry to create", value: entryTypeName, onChange: (value) => setEntryTypeName(value || ''), data: entryTypes.map((et) => ({
                         value: et.name,
                         label: et.label || et.name,
-                    })), required: true, disabled: isCreating, searchable: true, placeholder: "Select entry type..." })), entryTypes.length === 1 && (_jsxs(Text, { size: "sm", c: "dimmed", children: ["Entry type: ", _jsx("strong", { children: typeLabel })] })), _jsx(TextInput, { label: "Slug", description: "URL-friendly identifier (lowercase, alphanumeric + hyphens)", value: slug, onChange: (e) => handleSlugChange(e.currentTarget.value), error: validationError, placeholder: "my-entry-slug", required: true, disabled: isCreating, "data-autofocus": true, "data-testid": "entry-slug-input" }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Preview: ", _jsx("code", { children: slug })] }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { variant: "subtle", onClick: onClose, disabled: isCreating, children: "Cancel" }), _jsx(Button, { onClick: handleCreate, loading: isCreating, disabled: !canCreate, "data-testid": "create-entry-submit", children: "Create" })] })] }) }));
+                    })), required: true, disabled: isCreating, searchable: true, placeholder: "Select entry type..." })), entryTypes.length === 1 && (_jsxs(Text, { size: "sm", c: "dimmed", children: ["Entry type: ", _jsx("strong", { children: typeLabel })] })), _jsx(TextInput, { label: "Slug", description: "URL-friendly identifier (lowercase, alphanumeric + hyphens)", value: slug, onChange: (e) => handleSlugChange(e.currentTarget.value), error: validationError, placeholder: "my-entry-slug", required: true, disabled: isCreating, "data-autofocus": true, "data-testid": "entry-slug-input" }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Preview: ", _jsx("code", { children: slug })] }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, disabled: isCreating, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleCreate, loading: isCreating, disabled: !canCreate, "data-testid": "create-entry-submit", children: "Create" })] })] }) }));
 }

package/dist/editor/components/NoEditPermissionNotice.d.ts

@@ -4,7 +4,8 @@ export interface NoEditPermissionNoticeProps {
 }
 /**
  * Explains why an entry cannot be edited and whom to ask. An entry's `canEdit` is false only
- * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives; a
- * locked or protected branch shows its own banner in the header and a read-only form instead.
+ * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives. A locked
+ * or protected branch instead shows its banner in the header over a read-only form, the rule
+ * `contentReadOnly` in `Editor.tsx` holds.
  */
 export declare function NoEditPermissionNotice({ entryPath }: NoEditPermissionNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/NoEditPermissionNotice.js

@@ -2,8 +2,9 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Text } from '@mantine/core';
 /**
  * Explains why an entry cannot be edited and whom to ask. An entry's `canEdit` is false only
- * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives; a
- * locked or protected branch shows its own banner in the header and a read-only form instead.
+ * when a path rule (or `defaultPathAccess`) denies edit, so that is the reason it gives. A locked
+ * or protected branch instead shows its banner in the header over a read-only form, the rule
+ * `contentReadOnly` in `Editor.tsx` holds.
  */
 export function NoEditPermissionNotice({ entryPath }) {
     return (_jsx("div", { role: "status", "data-testid": "no-edit-permission-notice", style: {

package/dist/editor/components/ReadOnlyDraftNotice.d.ts

@@ -0,0 +1,11 @@
+export interface ReadOnlyDraftNoticeProps {
+    /** The branch never becomes editable again: the protected base branch, or an archived one. */
+    permanentlyReadOnly: boolean;
+    /** Discards the entry's kept draft; the caller confirms first, since the draft is unsaved work. */
+    onDiscard: () => void;
+}
+/**
+ * Says that this entry has a draft the read-only form is not showing. The draft is kept until it
+ * is discarded, so it comes back as the editable value if the branch unlocks.
+ */
+export declare function ReadOnlyDraftNotice({ permanentlyReadOnly, onDiscard }: ReadOnlyDraftNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/ReadOnlyDraftNotice.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Group, Stack, Text } from '@mantine/core';
+import { IconAlertTriangle } from '@tabler/icons-react';
+/**
+ * Says that this entry has a draft the read-only form is not showing. The draft is kept until it
+ * is discarded, so it comes back as the editable value if the branch unlocks.
+ */
+export function ReadOnlyDraftNotice({ permanentlyReadOnly, onDiscard }) {
+    return (_jsx(Alert, { role: "status", icon: _jsx(IconAlertTriangle, { size: 16 }), color: "yellow", variant: "light", mb: "md", "data-testid": "read-only-draft-notice", children: _jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [_jsxs(Stack, { gap: 2, children: [_jsx(Text, { size: "sm", children: "You have unsaved changes from earlier on this read-only branch." }), _jsx(Text, { size: "sm", children: permanentlyReadOnly
+                                ? "This branch won't become editable, so they can only be discarded."
+                                : "They're kept on this device and come back when the branch is editable again." })] }), _jsx(Button, { variant: "default", onClick: onDiscard, children: "Discard changes" })] }) }));
+}

package/dist/editor/components/RenameEntryModal.js

@@ -53,5 +53,5 @@ export function RenameEntryModal({ isOpen, entryLabel, currentSlug, onSave, onCl
         await onSave(newSlug);
     };
     const canSave = !validationError && newSlug.trim() !== '' && newSlug !== currentSlug && !isSaving;
-    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsx(Text, { fw: 600, children: "Rename Entry" }), size: "md", closeOnClickOutside: !isSaving, closeOnEscape: !isSaving, children: _jsxs(Stack, { gap: "md", "data-testid": "rename-entry-modal", children: [error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error })), _jsxs(Text, { size: "sm", c: "dimmed", children: ["Renaming \"", entryLabel, "\""] }), _jsx(TextInput, { label: "Slug", description: "URL-friendly identifier (lowercase, alphanumeric + hyphens)", value: newSlug, onChange: (e) => handleSlugChange(e.currentTarget.value), error: validationError, placeholder: "my-entry-slug", required: true, disabled: isSaving, "data-autofocus": true, "data-testid": "rename-slug-input" }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Current: ", _jsx("code", { children: currentSlug }), newSlug !== currentSlug && (_jsxs(_Fragment, { children: [' → ', "New: ", _jsx("code", { children: newSlug })] }))] }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { onClick: handleSave, loading: isSaving, disabled: !canSave, "data-testid": "rename-entry-submit", children: "Rename" })] })] }) }));
+    return (_jsx(Modal, { opened: isOpen, onClose: onClose, title: _jsx(Text, { fw: 600, children: "Rename Entry" }), size: "md", closeOnClickOutside: !isSaving, closeOnEscape: !isSaving, children: _jsxs(Stack, { gap: "md", "data-testid": "rename-entry-modal", children: [error && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", variant: "light", children: error })), _jsxs(Text, { size: "sm", c: "dimmed", children: ["Renaming \"", entryLabel, "\""] }), _jsx(TextInput, { label: "Slug", description: "URL-friendly identifier (lowercase, alphanumeric + hyphens)", value: newSlug, onChange: (e) => handleSlugChange(e.currentTarget.value), error: validationError, placeholder: "my-entry-slug", required: true, disabled: isSaving, "data-autofocus": true, "data-testid": "rename-slug-input" }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Current: ", _jsx("code", { children: currentSlug }), newSlug !== currentSlug && (_jsxs(_Fragment, { children: [' → ', "New: ", _jsx("code", { children: newSlug })] }))] }), _jsxs(Group, { justify: "flex-end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", onClick: onClose, disabled: isSaving, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSave, loading: isSaving, disabled: !canSave, "data-testid": "rename-entry-submit", children: "Rename" })] })] }) }));
 }

package/dist/editor/components/StagedChangesDrawer.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useReducer, useRef } from 'react';
 import { Badge, Button, Drawer, Fieldset, Group, Text, Title } from '@mantine/core';
-import { modals } from '@mantine/modals';
+import { openConfirm } from '../utils/confirm-modal.js';
 /**
  * A key that changes each time the drawer finishes closing. A panel keyed with it, and passing
  * `onExited` through, gets fresh state for each opening, as the drawer's own children do. A
@@ -47,7 +47,7 @@ export const StagedChangesDrawer = ({ opened, onClose, title, description, size,
             return;
         }
         confirmOpenRef.current = true;
-        modals.openConfirmModal({
+        openConfirm({
             title: 'Discard unsaved changes?',
             children: _jsx(Text, { size: "sm", children: "Closing now drops the changes you have not saved." }),
             labels: { confirm: 'Discard', cancel: 'Keep editing' },
@@ -71,5 +71,5 @@ export const StagedChangesDrawer = ({ opened, onClose, title, description, size,
                     zIndex: 1,
                     background: 'var(--mantine-color-body)',
                     borderTop: '1px solid var(--mantine-color-gray-3)',
-                }, children: [_jsx(Text, { size: "sm", c: "dimmed", children: "Changes take effect only after you save." }), _jsxs(Group, { gap: "sm", children: [_jsx(Button, { variant: "subtle", color: "neutral", onClick: onDiscard, disabled: isSaving, children: "Discard Changes" }), _jsx(Button, { onClick: onSave, loading: isSaving, disabled: isSaving, children: saveLabel })] })] }))] }));
+                }, children: [_jsx(Text, { size: "sm", c: "dimmed", children: "Changes take effect only after you save." }), _jsxs(Group, { gap: "sm", children: [_jsx(Button, { size: "sm", variant: "subtle", color: "neutral", onClick: onDiscard, disabled: isSaving, children: "Discard changes" }), _jsx(Button, { size: "sm", onClick: onSave, loading: isSaving, disabled: isSaving, children: saveLabel })] })] }))] }));
 };

package/dist/editor/components/UndoToastMessage.d.ts

@@ -0,0 +1,14 @@
+export interface UndoToastMessageProps {
+    /** Names what was removed: `"Branch-aware" from Features`, `item 2 from Features`. */
+    label: string;
+    onUndo: () => void;
+    /**
+     * Called when keyboard focus reaches the toast. Mantine pauses its timer on hover only, so the
+     * caller stops it here or the toast can close under the focused Undo.
+     */
+    onHold?: () => void;
+    /** Called when focus leaves the toast, so its timer can run again. */
+    onRelease?: () => void;
+}
+/** The body of the toast a form Remove raises in place of a confirmation. */
+export declare function UndoToastMessage({ label, onUndo, onHold, onRelease }: UndoToastMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/UndoToastMessage.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Group, Text } from '@mantine/core';
+/** The body of the toast a form Remove raises in place of a confirmation. */
+export function UndoToastMessage({ label, onUndo, onHold, onRelease }) {
+    return (_jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "nowrap", onFocus: onHold, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                onRelease?.();
+        }, children: [_jsx(Text, { size: "sm", miw: 0, children: `Removed ${label}` }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: onUndo, "aria-label": `Undo removing ${label}`, children: "Undo" })] }));
+}

package/dist/editor/components/UserBadge.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Badge, Tooltip, Group, Text, Skeleton, ActionIcon } from '@mantine/core';
-import { IconUserOff, IconX } from '@tabler/icons-react';
+import { IconRobot, IconUserOff, IconX } from '@tabler/icons-react';
 import { useUserMetadata } from '../hooks/useUserMetadata.js';
+import { isSystemUserId } from '../../system-users.js';
 export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', showEmailTooltip = true, onRemove, color, size = 'sm', badgeVariant = 'filled', showBadge = false, loading: loadingOverride, cachedUser, }) => {
     const { userMetadata, isLoading, error } = useUserMetadata(userId, getUserMetadata, cachedUser);
     const loading = loadingOverride ?? isLoading;
@@ -34,6 +35,9 @@ export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', sh
         if (userId === 'anonymous') {
             return (_jsx(Avatar, { size: avatarSize, color: "orange", children: _jsx(IconUserOff, { size: avatarSize * 0.6 }) }));
         }
+        if (isSystemUserId(userId)) {
+            return (_jsx(Avatar, { size: avatarSize, color: "gray", children: _jsx(IconRobot, { size: avatarSize * 0.6 }) }));
+        }
         // When inside Badge wrapper with filled/light variant, use white background for visibility
         // For outline badges or no badge, use the passed color
         let avatarColor = color || 'blue';
@@ -42,7 +46,7 @@ export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', sh
             if (badgeVariant === 'filled') {
                 // Filled badges: white background with dark text for maximum contrast
                 avatarStyles = {
-                    backgroundColor: 'white',
+                    backgroundColor: 'var(--mantine-color-white)',
                     color: 'var(--mantine-color-dark-6)',
                 };
             }
@@ -68,7 +72,7 @@ export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', sh
     };
     const content = renderContent();
     if (onRemove || showBadge) {
-        const badgeContent = (_jsx(Badge, { variant: badgeVariant, color: color, pr: onRemove ? 3 : 8, pl: 4, rightSection: onRemove ? (_jsx(ActionIcon, { size: "xs", radius: "xl", variant: "transparent", onClick: () => onRemove(userId), "aria-label": "Remove user", style: { color: 'white' }, children: _jsx(IconX, { size: 12, stroke: 2.5 }) })) : undefined, styles: {
+        const badgeContent = (_jsx(Badge, { variant: badgeVariant, color: color, pr: onRemove ? 3 : 8, pl: 4, rightSection: onRemove ? (_jsx(ActionIcon, { size: "xs", radius: "xl", variant: "transparent", onClick: () => onRemove(userId), "aria-label": "Remove user", style: { color: 'var(--mantine-color-white)' }, children: _jsx(IconX, { size: 12, stroke: 2.5 }) })) : undefined, styles: {
                 label: {
                     textTransform: 'none',
                     display: 'flex',
@@ -76,7 +80,7 @@ export const UserBadge = ({ userId, getUserMetadata, variant = 'avatar-name', sh
                     gap: '4px',
                 },
             }, children: content }));
-        return showEmailTooltip && variant !== 'full' ? (_jsx(Tooltip, { label: userMetadata.email, children: badgeContent })) : (badgeContent);
+        return showEmailTooltip && variant !== 'full' ? (_jsx(Tooltip, { label: userMetadata.email, disabled: !userMetadata.email, children: badgeContent })) : (badgeContent);
     }
-    return showEmailTooltip && variant !== 'full' ? (_jsx(Tooltip, { label: userMetadata.email, children: content })) : (content);
+    return showEmailTooltip && variant !== 'full' ? (_jsx(Tooltip, { label: userMetadata.email, disabled: !userMetadata.email, children: content })) : (content);
 };

package/dist/editor/copy.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The editor's fixed action verbs, sentence case and verb first. "…" is appended only where
+ * the command asks for more before it acts ("Switch branch…"); see docs/ux-guidelines.md.
+ * New UI uses these instead of writing the strings inline.
+ */
+export declare const EDITOR_ACTIONS: {
+    readonly save: "Save";
+    readonly submitForReview: "Submit for review";
+    readonly withdrawFromReview: "Withdraw from review";
+    readonly requestChanges: "Request changes";
+    readonly switchBranch: "Switch branch";
+    readonly newBranch: "New branch";
+    readonly remove: "Remove";
+};

package/dist/editor/copy.js

@@ -0,0 +1,14 @@
+/**
+ * The editor's fixed action verbs, sentence case and verb first. "…" is appended only where
+ * the command asks for more before it acts ("Switch branch…"); see docs/ux-guidelines.md.
+ * New UI uses these instead of writing the strings inline.
+ */
+export const EDITOR_ACTIONS = {
+    save: 'Save',
+    submitForReview: 'Submit for review',
+    withdrawFromReview: 'Withdraw from review',
+    requestChanges: 'Request changes',
+    switchBranch: 'Switch branch',
+    newBranch: 'New branch',
+    remove: 'Remove',
+};

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

@@ -7,6 +7,7 @@ export interface BlockInstance {
 type RenderField = (field: FieldConfig, value: unknown, onChange: (v: unknown) => void, path: Array<string | number>) => React.ReactNode;
 export interface BlockFieldProps {
     label?: string;
+    required?: boolean;
     description?: string;
     templates: BlockConfig[];
     value: BlockInstance[];
@@ -14,6 +15,10 @@ export interface BlockFieldProps {
     renderField: RenderField;
     path: Array<string | number>;
     dataCanopyField?: string;
+    /** No add, remove, reorder or drag. */
+    readOnly?: boolean;
+    /** Told of each block Remove takes out, so the caller can offer Undo. */
+    onRemoved?: (index: number, block: BlockInstance) => void;
 }
 export declare const BlockField: React.FC<BlockFieldProps>;
 export {};

package/dist/editor/fields/BlockField.js

@@ -1,65 +1,67 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { isPlainRecord } from '../../validation/field-traversal.js';
 import { formatCanopyPath } from '../canopy-path.js';
-import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { groupDescriptionProps } from './FieldDescription.js';
+import { FieldLabel } from './FieldLabel.js';
+import { useListItemKeys } from './list-item-keys.js';
 const findTemplate = (templates, name) => templates.find((t) => t.name === name);
-const SortableBlock = ({ id, canopyPath, children }) => {
+const SortableBlock = ({ id, canopyPath, readOnly, children }) => {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id,
+        disabled: readOnly,
     });
     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, "data-canopy-field": canopyPath, 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")] }) }));
+    return (_jsx(Paper, { ref: setNodeRef, withBorder: true, p: "sm", shadow: "xs", style: style, "data-canopy-field": canopyPath, children: _jsxs(Group, { align: "flex-start", gap: "sm", children: [!readOnly && (_jsx(ActionIcon, { size: "md", 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")] }) }));
 };
-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, onRemoved, }) => {
     const descriptionBaseId = useId();
-    const [itemKeys, setItemKeys] = useState(() => value.map(() => `block-${blockKeyCounter++}`));
+    const keysFor = useListItemKeys();
+    const itemKeys = keysFor(value, 'blocks');
     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));
-    }
+    // Constant: DndContext's hooks depend on the sensor count; read-only disables each item instead.
     const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
     }));
+    const emit = (next) => {
+        if (!readOnly)
+            onChange(next);
+    };
     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)}`,
-        ]);
+        if (readOnly)
+            return;
+        emit([...value, { template: templateName, value: {} }]);
     };
     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));
+        if (readOnly)
+            return;
+        emit(arrayMove(value, from, to));
     };
     const removeBlock = (index) => {
-        onChange(value.filter((_, idx) => idx !== index));
-        setItemKeys((prev) => prev.filter((_, idx) => idx !== index));
+        if (readOnly)
+            return;
+        emit(value.filter((_, idx) => idx !== index));
+        onRemoved?.(index, value[index]);
     };
     const updateBlockValue = (index, val) => {
         const next = [...value];
         next[index] = { ...next[index], value: val };
-        onChange(next);
+        emit(next);
     };
     const handleDragEnd = (event) => {
         const { active, over } = event;
@@ -72,15 +74,19 @@ export const BlockField = ({ label, description, templates, value, onChange, ren
         moveBlock(oldIndex, newIndex);
     };
     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) => {
+    return (_jsx(Paper, { withBorder: true, p: "md", bg: "gray.0", "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, actions: !readOnly && (_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(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], canopyPath: formatCanopyPath(currentPath), 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, {
+                                return (_jsx(SortableBlock, { id: itemKeys[idx], canopyPath: formatCanopyPath(currentPath), readOnly: readOnly, children: _jsxs(Stack, { gap: "xs", children: [_jsx(FieldLabel, { label: template?.label ?? block.template ?? 'Unknown block', actions: !readOnly && (_jsxs(_Fragment, { children: [_jsx(ActionIcon, { size: "md", variant: "light", "aria-label": "Move block up", disabled: idx === 0, onClick: () => moveBlock(idx, idx - 1), children: "\u2191" }), _jsx(ActionIcon, { size: "md", 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", onClick: (event) => {
+                                                                const list = event.currentTarget.closest('[data-removal-focus]');
+                                                                removeBlock(idx);
+                                                                list?.focus();
+                                                            }, children: EDITOR_ACTIONS.remove })] })) }), template ? (_jsx(Stack, { gap: "sm", children: 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))) })) : (_jsxs(Text, { size: "xs", c: "red", children: ["No template found for \"", block.template, "\""] }))] }) }, itemKeys[idx]));

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

@@ -2,8 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from 'react';
 import { Textarea } from '@mantine/core';
 // 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(Textarea, { id: inputId, label: label, 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,6 +6,8 @@ export interface DateTimeFieldProps {
     value: string;
     onChange: (value: string) => void;
     dataCanopyField?: string;
+    /** Shows the value without accepting edits. */
+    readOnly?: boolean;
 }
 /**
  * Converts a stored value (ISO 8601 UTC, e.g. `YYYY-MM-DDTHH:mm:ss.sssZ`)

package/dist/editor/fields/DateTimeField.js

@@ -49,8 +49,11 @@ export function datetimeLocalValueToIso(local) {
  * round-trip; sub-second precision is not preserved (no milliseconds field),
  * so a value with non-zero milliseconds is zeroed out once resaved.
  */
-export const DateTimeField = ({ id, label, description, value, onChange, dataCanopyField, }) => {
+export const DateTimeField = ({ id, label, description, value, onChange, dataCanopyField, readOnly = 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 }) }));
+    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), readOnly: readOnly, onChange: (e) => {
+                if (!readOnly)
+                    onChange(datetimeLocalValueToIso(e.currentTarget.value));
+            }, "data-canopy-field": dataCanopyField }) }));
 };

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

@@ -4,14 +4,14 @@ export interface FieldCrashFallbackProps {
     label: string;
     fieldType: string;
     value: unknown;
-    /** Used only by markdown and mdx fields, whose raw text the author edits directly. */
-    onChange: (value: unknown) => void;
+    /** 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.
+ * editable when there is an `onChange`.
  */
 export declare const FieldCrashFallback: React.FC<FieldCrashFallbackProps>;

package/dist/editor/fields/FieldCrashFallback.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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';
@@ -20,11 +20,11 @@ const displayValue = (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.
+ * 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 editableSource = (fieldType === 'markdown' || fieldType === 'mdx') &&
+    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 }), editableSource ? (_jsx(MarkdownSourceEditor, { label: label, value: typeof value === 'string' ? value : '', onChange: onChange, failure: sanitizeErrorMessage(getErrorMessage(caught.error)) })) : (_jsxs(_Fragment, { children: [_jsx(Alert, { color: "red", variant: "light", icon: _jsx(IconAlertTriangle, { size: 16 }), children: _jsx(Text, { size: "sm", children: "This field couldn't be shown because of an error. Its value is below and won't be changed. 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 }) })] }) }));
+    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,24 @@
+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 (Add item, Remove, Add block). */
+    actions?: React.ReactNode;
+}
+export declare const FieldLabel: React.FC<FieldLabelProps>;

package/dist/editor/fields/FieldLabel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group, Input, Stack } from '@mantine/core';
+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 }))] }));
+};

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 {};

package/dist/editor/fields/ImageField.js

@@ -14,7 +14,7 @@ import { useAssetUpload } from '../media/useAssetUpload.js';
 import { ACCEPTED_IMAGE_MIME_TYPES, MAX_UPLOAD_BYTES } from '../media/upload-constants.js';
 import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
 const PREVIEW_WIDTH = 320;
-export const ImageField = ({ id, label, description, value, onChange, aspect, altOptional, dataCanopyField, errors, }) => {
+export const ImageField = ({ id, label, description, value, onChange, aspect, altOptional, dataCanopyField, errors, readOnly = false, onRemoved, }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const { baseUrl } = useAssetContext();
@@ -50,9 +50,13 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
             altInputRef.current?.focus();
         }
     }, [value?.src]);
+    const edit = (next) => {
+        if (!readOnly)
+            onChange(next);
+    };
     const commitAsset = (asset, crop) => {
         justCommittedRef.current = true;
-        onChange({
+        edit({
             src: asset.src,
             // Preserves the current alt text on replace (it often still fits); an
             // empty field has no prior alt, so it stays ''.
@@ -85,17 +89,22 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
     const handleAltChange = (nextAlt) => {
         if (!value)
             return;
-        onChange({ ...value, alt: nextAlt });
+        edit({ ...value, alt: nextAlt });
     };
-    const handleRemove = () => {
-        onChange(undefined);
+    const handleRemove = (event) => {
+        if (readOnly || !value)
+            return;
+        const field = event.currentTarget.closest('[data-removal-focus]');
+        edit(undefined);
+        onRemoved?.(value);
+        field?.focus();
     };
     const handleCropConfirm = (rect) => {
         if (cropRequest?.kind === 'new') {
             commitAsset(cropRequest.asset, rect);
         }
         else if (cropRequest?.kind === 'existing' && value) {
-            onChange({ ...value, crop: rect });
+            edit({ ...value, crop: rect });
         }
         setCropRequest(null);
     };
@@ -105,7 +114,7 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
             ? editorImageSrc(value.src, baseUrl)
             : '';
     const cropInitial = cropRequest?.kind === 'existing' ? value?.crop : undefined;
-    return (_jsxs(Stack, { gap: 4, "data-canopy-field": dataCanopyField, "data-testid": `image-field-${dataCanopyField}`, ...groupDescriptionProps(inputId, description), children: [label && (_jsx(Text, { size: "sm", fw: 500, children: label })), _jsx(FieldDescription, { baseId: inputId, description: description }), !hasValue ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Dropzone, { onDrop: (files) => void handleDrop(files), onReject: handleReject, maxSize: MAX_UPLOAD_BYTES, accept: ACCEPTED_IMAGE_MIME_TYPES, loading: upload.uploading, multiple: false, "data-testid": `image-field-dropzone-${dataCanopyField}`, children: _jsxs(Group, { justify: "center", gap: "xs", py: "xs", style: { pointerEvents: 'none' }, children: [_jsx(IconUpload, { size: 18 }), _jsx(Text, { size: "xs", children: "Drop an image here, or click to browse" })] }) }), _jsx(Group, { justify: "center", children: _jsx(Button, { variant: "light", size: "xs", leftSection: _jsx(IconPhoto, { size: 14 }), onClick: () => setPickerOpen(true), "data-testid": `image-field-browse-library-${dataCanopyField}`, children: "Browse library" }) }), (upload.error || dropError) && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", children: upload.error || dropError })), errors?.src && (_jsx(Text, { size: "xs", c: "red", children: errors.src }))] })) : (_jsxs(Stack, { gap: "xs", children: [previewFailed ? (_jsxs("div", { "data-testid": `image-field-preview-fallback-${dataCanopyField}`, style: {
+    return (_jsxs(Stack, { gap: 4, "data-canopy-field": dataCanopyField, "data-testid": `image-field-${dataCanopyField}`, ...groupDescriptionProps(inputId, description), role: "group", "aria-label": label, "data-removal-focus": true, tabIndex: -1, children: [label && (_jsx(Text, { size: "sm", fw: 500, children: label })), _jsx(FieldDescription, { baseId: inputId, description: description }), !hasValue && readOnly ? (_jsx(Text, { size: "sm", c: "dimmed", "data-testid": `image-field-empty-${dataCanopyField}`, children: "No image" })) : !hasValue ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Dropzone, { onDrop: (files) => void handleDrop(files), onReject: handleReject, maxSize: MAX_UPLOAD_BYTES, accept: ACCEPTED_IMAGE_MIME_TYPES, loading: upload.uploading, multiple: false, "data-testid": `image-field-dropzone-${dataCanopyField}`, children: _jsxs(Group, { justify: "center", gap: "xs", py: "xs", style: { pointerEvents: 'none' }, children: [_jsx(IconUpload, { size: 18 }), _jsx(Text, { size: "xs", children: "Drop an image here, or click to browse" })] }) }), _jsx(Group, { justify: "center", children: _jsx(Button, { variant: "light", leftSection: _jsx(IconPhoto, { size: 14 }), onClick: () => setPickerOpen(true), "data-testid": `image-field-browse-library-${dataCanopyField}`, children: "Browse library" }) }), (upload.error || dropError) && (_jsx(Alert, { icon: _jsx(IconAlertCircle, { size: 16 }), color: "red", children: upload.error || dropError })), errors?.src && (_jsx(Text, { size: "xs", c: "red", children: errors.src }))] })) : (_jsxs(Stack, { gap: "xs", children: [previewFailed ? (_jsxs("div", { "data-testid": `image-field-preview-fallback-${dataCanopyField}`, style: {
                             width: PREVIEW_WIDTH,
                             height: 160,
                             display: 'flex',
@@ -120,5 +129,5 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
                             maxHeight: PREVIEW_WIDTH,
                             borderRadius: 'var(--mantine-radius-sm)',
                             display: 'block',
-                        }, onError: () => setPreviewFailed(true) })), errors?.src && (_jsx(Text, { size: "xs", c: "red", children: errors.src })), _jsx(TextInput, { id: inputId, ref: altInputRef, label: "Alt text", required: !altOptional, value: value.alt, onChange: (event) => handleAltChange(event.currentTarget.value), error: errors?.alt, size: "sm", "data-testid": `image-field-alt-${dataCanopyField}` }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { variant: "light", size: "xs", onClick: () => setPickerOpen(true), "data-testid": `image-field-replace-${dataCanopyField}`, children: "Replace" }), canCrop && (_jsx(Button, { variant: "light", size: "xs", onClick: () => setCropRequest({ kind: 'existing' }), "data-testid": `image-field-crop-${dataCanopyField}`, children: "Crop" })), _jsx(Button, { variant: "subtle", color: "red", size: "xs", onClick: handleRemove, "data-testid": `image-field-remove-${dataCanopyField}`, children: "Remove" })] }), errors?.crop && (_jsx(Text, { size: "xs", c: "red", children: errors.crop }))] })), _jsx(MediaLibrary, { opened: pickerOpen, onClose: () => setPickerOpen(false), mode: "picker", onSelect: handleAssetReady }), aspectRatio !== undefined && (_jsx(CropStep, { opened: cropRequest !== null, onClose: () => setCropRequest(null), imageSrc: cropImageSrc, aspect: aspectRatio, initialCrop: cropInitial, onConfirm: handleCropConfirm }))] }));
+                        }, onError: () => setPreviewFailed(true) })), errors?.src && (_jsx(Text, { size: "xs", c: "red", children: errors.src })), _jsx(TextInput, { id: inputId, ref: altInputRef, label: "Alt text", required: !altOptional, readOnly: readOnly, value: value.alt, onChange: (event) => handleAltChange(event.currentTarget.value), error: errors?.alt, size: "sm", "data-testid": `image-field-alt-${dataCanopyField}` }), !readOnly && (_jsxs(Group, { gap: "xs", children: [_jsx(Button, { variant: "light", onClick: () => setPickerOpen(true), "data-testid": `image-field-replace-${dataCanopyField}`, children: "Replace" }), canCrop && (_jsx(Button, { variant: "light", onClick: () => setCropRequest({ kind: 'existing' }), "data-testid": `image-field-crop-${dataCanopyField}`, children: "Crop" })), _jsx(Button, { variant: "subtle", color: "red", onClick: handleRemove, "data-testid": `image-field-remove-${dataCanopyField}`, children: "Remove" })] })), errors?.crop && (_jsx(Text, { size: "xs", c: "red", children: errors.crop }))] })), !readOnly && (_jsx(MediaLibrary, { opened: pickerOpen, onClose: () => setPickerOpen(false), mode: "picker", onSelect: handleAssetReady })), aspectRatio !== undefined && !readOnly && (_jsx(CropStep, { opened: cropRequest !== null, onClose: () => setCropRequest(null), imageSrc: cropImageSrc, aspect: aspectRatio, initialCrop: cropInitial, onConfirm: handleCropConfirm }))] }));
 };

package/dist/editor/fields/InlineGroupField.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
-import { Paper, Stack, Text } from '@mantine/core';
+import { Paper, Stack } from '@mantine/core';
 import { formatCanopyPath } from '../canopy-path.js';
-import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
+import { groupDescriptionProps } from './FieldDescription.js';
+import { FieldLabel } from './FieldLabel.js';
 export const InlineGroupField = ({ label, description, fields, value, onChange, renderField, path, }) => {
     const descriptionBaseId = useId();
-    return (_jsx(Paper, { withBorder: true, radius: "md", p: "md", bg: "gray.0", shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), children: _jsxs(Stack, { gap: "sm", children: [(label || description) && (_jsxs(Stack, { gap: 2, children: [label && (_jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: label })), _jsx(FieldDescription, { baseId: descriptionBaseId, description: description })] })), _jsx(Stack, { gap: "sm", children: fields.map((field) => {
+    return (_jsx(Paper, { withBorder: true, p: "md", bg: "gray.0", shadow: "xs", ...groupDescriptionProps(descriptionBaseId, description), children: _jsxs(Stack, { gap: "sm", children: [_jsx(FieldLabel, { label: label, description: description, descriptionBaseId: descriptionBaseId }), _jsx(Stack, { gap: "sm", children: fields.map((field) => {
                         // Nested inline groups are also transparent — pass the same parent value/onChange
                         if (field.type === 'group') {
                             const childGroup = field;