canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/fields/ImageField.js

@@ -4,18 +4,22 @@ import { useEffect, useId, useRef, useState } from 'react';
 import { Alert, Button, Group, Stack, Text, TextInput } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconAlertCircle, IconPhoto, IconPhotoOff, IconUpload } from '@tabler/icons-react';
-import { assetUrl } from '../../assets/asset-url.js';
+import { isAssetStoreSrc } from '../../assets/asset-url.js';
 import { useAssetContext } from '../context/index.js';
 import { CropStep } from '../media/CropStep.js';
+import { editorImageSrc } from '../media/editor-image-src.js';
 import { parseAspectRatio } from '../media/crop-math.js';
 import { MediaLibrary } from '../media/MediaLibrary.js';
 import { useAssetUpload } from '../media/useAssetUpload.js';
 import { ACCEPTED_IMAGE_MIME_TYPES, MAX_UPLOAD_BYTES } from '../media/upload-constants.js';
+import { useFieldCommentControl } from '../comments/field-comment-context.js';
 import { FieldDescription, groupDescriptionProps } from './FieldDescription.js';
+import { FieldLabel } from './FieldLabel.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 commentControl = useFieldCommentControl(dataCanopyField);
     const { baseUrl } = useAssetContext();
     const upload = useAssetUpload();
     const [pickerOpen, setPickerOpen] = useState(false);
@@ -28,8 +32,10 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
     const aspectRatio = parseAspectRatio(aspect);
     const hasValue = !!value?.src;
     const previewSrc = value
-        ? assetUrl({ src: value.src }, { width: PREVIEW_WIDTH, crop: value.crop, baseUrl })
+        ? editorImageSrc(value.src, baseUrl, { width: PREVIEW_WIDTH, crop: value.crop })
         : undefined;
+    // `assetUrl` never applies a crop to a src outside the asset store, so one stored there never renders.
+    const canCrop = aspectRatio !== undefined && !!value && isAssetStoreSrc(value.src);
     // Broken-preview fallback, mirroring AssetCard.tsx's thumbnail fallback (same
     // icon/copy, same reset-during-render pattern). Covers both an asset broken
     // at upload time and a transform failing at render time.
@@ -47,9 +53,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 ''.
@@ -82,27 +92,32 @@ 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);
     };
     const cropImageSrc = cropRequest?.kind === 'new'
-        ? assetUrl({ src: cropRequest.asset.src }, { baseUrl })
+        ? editorImageSrc(cropRequest.asset.src, baseUrl)
         : cropRequest?.kind === 'existing' && value
-            ? assetUrl({ src: value.src }, { baseUrl })
+            ? 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: [_jsx(FieldLabel, { label: label, commentControl: commentControl }), _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: "var(--canopy-danger-text)", 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',
@@ -111,11 +126,11 @@ export const ImageField = ({ id, label, description, value, onChange, aspect, al
                             justifyContent: 'center',
                             gap: 4,
                             borderRadius: 'var(--mantine-radius-sm)',
-                            background: 'var(--mantine-color-gray-1)',
-                        }, children: [_jsx(IconPhotoOff, { size: 28, stroke: 1.5, color: "var(--mantine-color-gray-5)" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Preview unavailable" })] })) : (_jsx("img", { src: previewSrc, alt: value.alt, style: {
+                            background: 'var(--canopy-surface-muted)',
+                        }, children: [_jsx(IconPhotoOff, { size: 28, stroke: 1.5, color: "var(--mantine-color-dimmed)" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Preview unavailable" })] })) : (_jsx("img", { src: previewSrc, alt: value.alt, style: {
                             maxWidth: PREVIEW_WIDTH,
                             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" }), aspectRatio !== undefined && (_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: "var(--canopy-danger-text)", 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: "var(--canopy-danger-text)", 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: "var(--canopy-surface-subtle)", 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;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ItemExpansion } from './item-expansion.js';
+/** What a collapsed row shows: its title, and a second value from its content. */
+interface ItemSummary {
+    title: string;
+    secondary?: string;
+}
+export interface ItemListProps<T> {
+    items: readonly T[];
+    /** One stable key per item, from `useListItemKeys`. */
+    itemKeys: readonly string[];
+    /** The list field's own path; row `i` is `[...path, i]`. */
+    path: Array<string | number>;
+    readOnly: boolean;
+    expansion: ItemExpansion;
+    summarize: (item: T, index: number) => ItemSummary;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /** Guidance shown at the top of an open row, which the row's group is described by. */
+    describe?: (item: T) => string | undefined;
+    /** True when a field inside row `index` has a validation error. */
+    hasErrors?: (index: number) => boolean;
+    onMove: (from: number, to: number) => void;
+    onDuplicate: (index: number) => void;
+    /** Takes row `index` out; focus has already moved to the enclosing `[data-removal-focus]` list. */
+    onRemove: (index: number) => void;
+    /** Rendered before row `index`, such as a block list's insert-here control. */
+    renderBetween?: (index: number) => React.ReactNode;
+    /**
+     * A row index to focus after the next render, set by the caller just before it adds a row.
+     * Cleared once used.
+     */
+    focusAfterRenderRef?: React.MutableRefObject<number | null>;
+    'data-testid'?: string;
+}
+/**
+ * The rows of an object list or block list: each collapses to a one-line summary and carries a
+ * drag handle (pointer and keyboard, via dnd-kit) and a "…" menu with Move up, Move down,
+ * Duplicate and Remove. A read-only list keeps only collapsing. A collapsed row stays mounted
+ * and opens when something asks to reveal a field inside it (`REVEAL_FIELD_EVENT`).
+ */
+export declare function ItemList<T>({ items, itemKeys, path, readOnly, expansion, summarize, renderItem, describe, hasErrors, onMove, onDuplicate, onRemove, renderBetween, focusAfterRenderRef, 'data-testid': testId, }: ItemListProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor/fields/ItemList.js

@@ -0,0 +1,130 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useId, useRef, useState } from 'react';
+import { ActionIcon, Box, Group, Menu, Paper, Stack, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useIsomorphicEffect } from '@mantine/hooks';
+import { IconAlertCircle, IconChevronRight, IconDots, IconGripVertical } from '@tabler/icons-react';
+import { formatCanopyPath } from '../canopy-path.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { DestructiveMenuItem } from '../components/DestructiveMenuItem.js';
+import { ReasonedMenuItem } from '../components/ReasonedMenuItem.js';
+import { REVEAL_FIELD_EVENT, focusFieldTarget } from '../field-target.js';
+import { FieldDescription, fieldDescriptionId } from './FieldDescription.js';
+const ROW_GAP = 8;
+/**
+ * The rows of an object list or block list: each collapses to a one-line summary and carries a
+ * drag handle (pointer and keyboard, via dnd-kit) and a "…" menu with Move up, Move down,
+ * Duplicate and Remove. A read-only list keeps only collapsing. A collapsed row stays mounted
+ * and opens when something asks to reveal a field inside it (`REVEAL_FIELD_EVENT`).
+ */
+export function ItemList({ items, itemKeys, path, readOnly, expansion, summarize, renderItem, describe, hasErrors, onMove, onDuplicate, onRemove, renderBetween, focusAfterRenderRef, 'data-testid': testId, }) {
+    const listRef = useRef(null);
+    const [announcement, setAnnouncement] = useState('');
+    // Constant: DndContext's hooks depend on the sensor count; read-only disables each row instead.
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    useEffect(() => {
+        const index = focusAfterRenderRef?.current;
+        if (index === null || index === undefined || !focusAfterRenderRef)
+            return;
+        focusAfterRenderRef.current = null;
+        // Keys are unique only within one list, so a nested list's rows never count.
+        const row = [...(listRef.current?.querySelectorAll('[data-item-row]') ?? [])].find((el) => el.dataset.itemRow === itemKeys[index] &&
+            el.closest('[data-item-list]') === listRef.current);
+        if (row)
+            focusFieldTarget(row);
+    });
+    const titleAt = (index) => summarize(items[index], index).title;
+    const indexOf = (id) => itemKeys.indexOf(String(id));
+    const position = (index) => `position ${index + 1} of ${items.length}`;
+    // dnd-kit's defaults read out the internal row keys; these use the rows' titles.
+    const announcements = {
+        onDragStart: ({ active }) => `Picked up ${titleAt(indexOf(active.id))}, ${position(indexOf(active.id))}.`,
+        onDragOver: ({ active, over }) => over
+            ? `${titleAt(indexOf(active.id))} is over ${position(indexOf(over.id))}.`
+            : `${titleAt(indexOf(active.id))} is not over a position.`,
+        onDragEnd: ({ active, over }) => over
+            ? `${titleAt(indexOf(active.id))} moved to ${position(indexOf(over.id))}.`
+            : `${titleAt(indexOf(active.id))} dropped.`,
+        onDragCancel: ({ active }) => `Reordering cancelled. ${titleAt(indexOf(active.id))} is back at ${position(indexOf(active.id))}.`,
+    };
+    const handleDragEnd = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        const from = indexOf(active.id);
+        const to = indexOf(over.id);
+        if (from !== -1 && to !== -1)
+            onMove(from, to);
+    };
+    const move = (from, to) => {
+        onMove(from, to);
+        setAnnouncement(`${titleAt(from)} moved to ${position(to)}.`);
+    };
+    const duplicate = (index) => {
+        onDuplicate(index);
+        setAnnouncement(`${titleAt(index)} duplicated, position ${index + 2} of ${items.length + 1}.`);
+    };
+    const remove = (index) => {
+        // The row goes, so focus moves to its list, not the page.
+        listRef.current?.closest('[data-removal-focus]')?.focus();
+        onRemove(index);
+    };
+    return (_jsxs("div", { ref: listRef, "data-item-list": true, "data-testid": testId, children: [_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, accessibility: { announcements }, children: _jsx(SortableContext, { items: [...itemKeys], strategy: verticalListSortingStrategy, children: items.map((item, idx) => {
+                        const key = itemKeys[idx];
+                        const summary = summarize(item, idx);
+                        return (_jsxs(React.Fragment, { children: [renderBetween ? renderBetween(idx) : idx > 0 && _jsx(Box, { h: ROW_GAP, "aria-hidden": true }), _jsx(ItemRow, { rowKey: key, canopyPath: formatCanopyPath([...path, idx]), summary: summary, description: describe?.(item), hasErrors: hasErrors?.(idx) ?? false, expanded: expansion.isExpanded(key), onExpandedChange: (open) => expansion.setExpanded(key, open), readOnly: readOnly, isFirst: idx === 0, isLast: idx === items.length - 1, onMoveUp: () => move(idx, idx - 1), onMoveDown: () => move(idx, idx + 1), onDuplicate: () => duplicate(idx), onRemove: () => remove(idx), children: renderItem(item, idx) })] }, key));
+                    }) }) }), _jsx(VisuallyHidden, { "aria-live": "polite", children: announcement })] }));
+}
+const ItemRow = ({ rowKey, canopyPath, summary, description, hasErrors, expanded, onExpandedChange, readOnly, isFirst, isLast, onMoveUp, onMoveDown, onDuplicate, onRemove, children, }) => {
+    const baseId = useId();
+    const bodyId = `${baseId}-body`;
+    const rowRef = useRef(null);
+    const menuTargetRef = useRef(null);
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id: rowKey, disabled: readOnly });
+    const expandedRef = useRef(expanded);
+    const onExpandedChangeRef = useRef(onExpandedChange);
+    // Both from the layout phase, before any field inside runs a passive effect that asks to reveal
+    // it; `whenRevealed` asks again for one that asks earlier.
+    useIsomorphicEffect(() => {
+        expandedRef.current = expanded;
+        onExpandedChangeRef.current = onExpandedChange;
+    });
+    useIsomorphicEffect(() => {
+        const row = rowRef.current;
+        if (!row)
+            return;
+        const reveal = (event) => {
+            if (expandedRef.current)
+                return;
+            event.preventDefault();
+            onExpandedChangeRef.current(true);
+        };
+        row.addEventListener(REVEAL_FIELD_EVENT, reveal);
+        return () => row.removeEventListener(REVEAL_FIELD_EVENT, reveal);
+    }, []);
+    // A menu item is gone once it acts, so focus returns to the menu's trigger, which moves with
+    // the row.
+    const thenFocusMenu = (act) => () => {
+        act();
+        requestAnimationFrame(() => menuTargetRef.current?.focus());
+    };
+    // Rows can share a title (two sections of one template), so names carry the second value too.
+    const name = summary.secondary ? `${summary.title}, ${summary.secondary}` : summary.title;
+    const actionsLabel = `Actions for ${name}`;
+    return (_jsxs(Paper, { ref: (node) => {
+            rowRef.current = node;
+            setNodeRef(node);
+        }, withBorder: true, shadow: "xs", role: "group", "aria-label": name, "aria-describedby": expanded && description ? fieldDescriptionId(baseId) : undefined, "data-canopy-field": canopyPath, "data-item-row": rowKey, "data-testid": "item-row", "data-expanded": expanded || undefined, style: {
+            transform: CSS.Translate.toString(transform),
+            transition,
+            position: 'relative',
+            zIndex: isDragging ? 1 : undefined,
+            boxShadow: isDragging ? 'var(--mantine-shadow-md)' : undefined,
+        }, children: [_jsxs(Group, { gap: 4, wrap: "nowrap", px: 6, py: 4, align: "center", children: [!readOnly && (_jsx(Tooltip, { label: "Drag to reorder", openDelay: 500, children: _jsx(ActionIcon, { ref: setActivatorNodeRef, variant: "subtle", color: "gray", "aria-label": "Drag to reorder", ...attributes, ...listeners, style: { cursor: isDragging ? 'grabbing' : 'grab', touchAction: 'none' }, children: _jsx(IconGripVertical, { size: 16, "aria-hidden": true }) }) })), _jsx(UnstyledButton, { "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => onExpandedChange(!expanded), "data-testid": "item-row-toggle", style: { flex: 1, minWidth: 0, borderRadius: 'var(--mantine-radius-sm)' }, px: 4, py: 4, children: _jsxs(Group, { gap: 6, wrap: "nowrap", children: [_jsx(IconChevronRight, { size: 16, "aria-hidden": true, style: {
+                                        flexShrink: 0,
+                                        transform: expanded ? 'rotate(90deg)' : undefined,
+                                        transition: 'transform 120ms ease',
+                                    } }), _jsx(Text, { size: "sm", fw: 500, truncate: "end", style: summary.secondary ? { flexShrink: 0, maxWidth: '60%' } : { minWidth: 0 }, children: summary.title }), summary.secondary && (_jsx(Text, { size: "sm", c: "dimmed", truncate: "end", style: { minWidth: 0 }, children: summary.secondary })), hasErrors && !expanded && (_jsxs(Group, { gap: 2, wrap: "nowrap", ml: "auto", style: { flexShrink: 0 }, children: [_jsx(IconAlertCircle, { size: 14, color: "var(--canopy-danger-text)", "aria-hidden": true }), _jsx(Text, { size: "xs", c: "var(--canopy-danger-text)", children: "Has errors" })] }))] }) }), !readOnly && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 220, children: [_jsx(Tooltip, { label: actionsLabel, openDelay: 500, children: _jsx(Menu.Target, { children: _jsx(ActionIcon, { ref: menuTargetRef, variant: "subtle", color: "gray", "aria-label": actionsLabel, "data-testid": "item-row-menu", children: _jsx(IconDots, { size: 16, "aria-hidden": true }) }) }) }), _jsxs(Menu.Dropdown, { children: [_jsx(ReasonedMenuItem, { blockedReason: isFirst ? 'Already first' : undefined, onClick: thenFocusMenu(onMoveUp), "data-testid": "item-row-move-up", children: "Move up" }), _jsx(ReasonedMenuItem, { blockedReason: isLast ? 'Already last' : undefined, onClick: thenFocusMenu(onMoveDown), "data-testid": "item-row-move-down", children: "Move down" }), _jsx(Menu.Item, { onClick: thenFocusMenu(onDuplicate), "data-testid": "item-row-duplicate", children: "Duplicate" }), _jsx(Menu.Divider, {}), _jsx(DestructiveMenuItem, { onClick: onRemove, "data-testid": "item-row-remove", children: EDITOR_ACTIONS.remove })] })] }))] }), _jsx(Box, { id: bodyId, hidden: !expanded, children: _jsxs(Stack, { gap: "sm", px: "sm", pb: "sm", pt: 4, children: [description && _jsx(FieldDescription, { baseId: baseId, description: description }), children] }) })] }));
+};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { MDXEditorMethods } from '@mdxeditor/editor';
 export interface MarkdownFieldProps {
     id?: string;
     label?: string;
@@ -6,5 +7,36 @@ export interface MarkdownFieldProps {
     value: string;
     onChange: (value: string) => void;
     dataCanopyField?: string;
+    /** The HTML tags the field accepts; the toolbar offers no action writing another. Omitted: any. */
+    htmlTags?: ReadonlySet<string>;
+    /** Shows the content without accepting edits, in the rich-text editor or as source. */
+    readOnly?: boolean;
 }
+/** @internal Exported for the round-trip corpus test, which drives exactly this editor. */
+export declare const MDXEditorLazy: React.LazyExoticComponent<React.FC<{
+    markdown: string;
+    onChange: (value: string, initialMarkdownNormalize: boolean) => void;
+    onError: (payload: {
+        error: string;
+        source: string;
+    }) => void;
+    onInsert: (insert: () => void, markdown: string) => void;
+    editorRef?: React.Ref<MDXEditorMethods>;
+    imageUploadHandler: (file: File) => Promise<string>;
+    imagePreviewHandler: (src: string) => Promise<string>;
+    htmlTags?: ReadonlySet<string>;
+    readOnly?: boolean;
+    /** Names the content area for assistive tech; MDXEditor's default is "editable markdown". */
+    contentLabel?: string;
+    /** Draws the editor and its popups in MDXEditor's dark theme. */
+    dark?: boolean;
+}>>;
+/** The textarea over a markdown value; `failure` is why the rich-text editor could not open it. */
+export declare const MarkdownSourceEditor: React.FC<{
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    failure?: string;
+    readOnly?: boolean;
+}>;
 export declare const MarkdownField: React.FC<MarkdownFieldProps>;