@elytracms/studio 0.0.58 → 0.0.60

package/dist/components/cms/object-array-field.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, GripVertical, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
+import { createContext, useContext, useRef, useState } from 'react';
+import { isFieldHidden } from '@elytracms/core/cms-core';
+import { Button, Card, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, Row, Stack, Text, } from '@elytracms/studio/ui';
+import { cn } from '@elytracms/studio/lib/utils';
+import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
+import { fieldLabel } from './cms-labels.js';
+import { FieldControl } from './field-control.js';
+import { depthRail, depthTint, isTabularObjectType, objectItemSummary, reorder } from './field-control-lib.js';
+/**
+ * The object / repeater field controls (EC-253, legibility-rebuilt EC-305) —
+ * split from `field-control.tsx` (EC-330). {@link ObjectField} dispatches by
+ * shape (single card / editable table / card list); {@link ObjectItemForm} is
+ * the recursive subfield form the asset-field family reuses for per-use
+ * sub-fields and asset metadata. Cells and subfields render through
+ * `FieldControl`, so any subfield type — including a nested repeater — works
+ * for free.
+ */
+function asRecord(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : {};
+}
+// EC-305: nested-array depth, propagated via context so each array level can encode
+// its depth (rail colour + tint) without prop-drilling through FieldControl's many
+// branches. The detail editor renders top-level fields with the default depth 0.
+const ArrayDepthContext = createContext(0);
+const useArrayDepth = () => useContext(ArrayDepthContext);
+/**
+ * Shared array state for an object repeater (EC-253/EC-294/EC-305): the value-only
+ * items + a parallel stable-key list kept in lockstep through every structural op
+ * (the EC-253 C2 key↔value lock), add/remove/move, and native drag-reorder. Used by
+ * both the card list (B) and the table (C) so they behave identically.
+ */
+function useObjectArray(field, value, onChange) {
+    const items = Array.isArray(value) ? value : [];
+    const seq = useRef(0);
+    const keysRef = useRef([]);
+    if (keysRef.current.length !== items.length) {
+        keysRef.current = items.map((_, i) => keysRef.current[i] ?? seq.current++);
+    }
+    const keys = keysRef.current;
+    const commit = (nextItems, nextKeys) => {
+        keysRef.current = nextKeys;
+        onChange(nextItems);
+    };
+    const move = (from, to) => commit(reorder(items, from, to), reorder(keys, from, to));
+    const removeAt = (i) => commit(items.filter((_, j) => j !== i), keys.filter((_, j) => j !== i));
+    const addItem = () => {
+        const seed = {};
+        for (const sub of field.fields)
+            if (sub.default !== undefined)
+                seed[sub.name] = sub.default;
+        const key = seq.current++;
+        commit([...items, seed], [...keys, key]);
+        return key;
+    };
+    const setItem = (i, updated) => {
+        const nextItems = items.slice();
+        nextItems[i] = updated;
+        commit(nextItems, keys);
+    };
+    const [dragIndex, setDragIndex] = useState(null);
+    const [overIndex, setOverIndex] = useState(null);
+    const endDrag = () => {
+        setDragIndex(null);
+        setOverIndex(null);
+    };
+    const drop = (to) => {
+        if (dragIndex !== null && dragIndex !== to)
+            move(dragIndex, to);
+        endDrag();
+    };
+    return { items, keys, move, removeAt, addItem, setItem, dragIndex, overIndex, setDragIndex, setOverIndex, endDrag, drop };
+}
+/**
+ * (E) Chrome reduction: the per-row move/remove controls collapse into one hover/
+ * focus overflow menu, so a row reads as content, not a six-button toolbar. Drag is
+ * the primary reorder; the arrows stay here for keyboard/a11y.
+ */
+function ItemOverflowMenu({ index, count, onMove, onRemove, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-label": translate('cms.field.itemActions'), children: _jsx(MoreHorizontal, { className: "size-3.5" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { disabled: index === 0, onClick: () => onMove(index, index - 1), children: [_jsx(ChevronUp, {}), " ", translate('cms.field.moveUp')] }), _jsxs(DropdownMenuItem, { disabled: index === count - 1, onClick: () => onMove(index, index + 1), children: [_jsx(ChevronDown, {}), " ", translate('cms.field.moveDown')] }), _jsxs(DropdownMenuItem, { onClick: onRemove, children: [_jsx(Trash2, {}), " ", translate('common.remove')] })] })] }));
+}
+/**
+ * The nested subfield form for one object item (EC-253). Reuses {@link FieldControl}
+ * recursively, so any subfield type — including a nested object/repeater — works for
+ * free. Writing a subfield merges it back into the item and bubbles the new item up.
+ */
+export function ObjectItemForm({ fields, value, onChange, readOnly, idPrefix, }) {
+    return (_jsx(Stack, { gap: "3", className: "mt-2", children: fields.map((sub) => {
+            // EC-273: a conditionally-hidden subfield (its predicate keys off the item's
+            // own sibling values) is omitted — e.g. a discriminated link's `href` shows
+            // only when `linkType === 'href'`. Re-evaluated as the item is edited.
+            if (isFieldHidden(sub, { values: value }))
+                return null;
+            const subId = `${idPrefix}-${sub.name}`;
+            return (_jsx(Field, { htmlFor: subId, hint: localizedLabel(sub.form?.description) || undefined, label: _jsxs(Row, { gap: "2", children: [_jsx("span", { children: fieldLabel(sub) }), sub.validation?.required ? _jsx("span", { className: "text-destructive", children: "*" }) : null] }), children: _jsx(FieldControl, { id: subId, field: sub, value: value[sub.name], readOnly: readOnly, onChange: (next) => {
+                        const updated = { ...value };
+                        if (next === undefined)
+                            delete updated[sub.name];
+                        else
+                            updated[sub.name] = next;
+                        onChange(updated);
+                    } }) }, sub.name));
+        }) }));
+}
+/**
+ * Object / repeater field control (EC-253), legibility-rebuilt (EC-305). A single
+ * object (`multiple: false`) renders a depth-encoded card; an array (`'many'`)
+ * dispatches by shape: a **flat** object type (all scalar subfields) → a compact
+ * editable TABLE (C); a richer/nested type → a card list with depth encoding (B),
+ * summary-first collapse (D), and reduced per-row chrome (E). Editing stays in the
+ * shared field form — no canvas escape (unlike `blocks`) — so props and document
+ * fields share this control. Depth flows via {@link ArrayDepthContext}.
+ */
+export function ObjectField({ field, value, onChange, readOnly, id, }) {
+    const depth = useArrayDepth();
+    if (field.multiple === false) {
+        return (_jsx(Card, { className: cn('border-l-2 p-3', depthRail(depth), depthTint(depth)), children: _jsx(ArrayDepthContext.Provider, { value: depth + 1, children: _jsx(ObjectItemForm, { fields: field.fields, value: asRecord(value), readOnly: readOnly, idPrefix: id, onChange: onChange }) }) }));
+    }
+    const props = { field, value, onChange, readOnly, id, depth };
+    return isTabularObjectType(field) ? _jsx(ObjectTableField, { ...props }) : _jsx(ObjectCardList, { ...props });
+}
+/**
+ * (B + D + E) The card list for a nested/rich object array: depth-encoded cards
+ * (coloured rail + tint), items collapsed by default to a scannable summary outline
+ * (D), accordion expansion (open one → collapse siblings), and the per-row controls
+ * collapsed into one overflow menu (E). Drag-to-reorder; arrows live in the menu for
+ * a11y. Nested arrays render one depth deeper via the context provider.
+ */
+function ObjectCardList({ field, value, onChange, readOnly, id, depth }) {
+    const arr = useObjectArray(field, value, onChange);
+    const { items, keys } = arr;
+    // (D) Default COLLAPSED: track which keys are EXPANDED (empty = all collapsed).
+    // (B) Accordion: expanding one collapses the siblings.
+    const [expandedKeys, setExpandedKeys] = useState(() => new Set());
+    const toggle = (key) => setExpandedKeys((prev) => {
+        if (prev.has(key)) {
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
+        }
+        return new Set([key]);
+    });
+    const allExpanded = items.length > 0 && keys.every((k) => expandedKeys.has(k));
+    const onAdd = () => setExpandedKeys(new Set([arr.addItem()]));
+    return (_jsx(ArrayDepthContext.Provider, { value: depth + 1, children: _jsxs(Stack, { gap: "2", children: [items.length > 1 && !readOnly ? (_jsx(Row, { justify: "end", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setExpandedKeys(allExpanded ? new Set() : new Set(keys)), children: translate(allExpanded ? 'cms.field.collapseAll' : 'cms.field.expandAll') }) })) : null, items.length === 0 ? (_jsx(Text, { size: "sm", tone: "subtle", children: translate('cms.field.noItems') })) : (items.map((item, i) => {
+                    // keysRef is reconciled to items.length, so keys[i] is always present;
+                    // `?? i` only satisfies noUncheckedIndexedAccess (never taken at runtime).
+                    const key = keys[i] ?? i;
+                    const record = asRecord(item);
+                    const isExpanded = expandedKeys.has(key);
+                    return (_jsxs(Card, { onDragOver: (e) => {
+                            if (arr.dragIndex === null)
+                                return;
+                            e.preventDefault();
+                            if (arr.overIndex !== i)
+                                arr.setOverIndex(i);
+                        }, onDrop: () => arr.drop(i), className: cn('border-l-2 p-0', depthRail(depth), depthTint(depth), arr.dragIndex === i ? 'opacity-50' : '', arr.overIndex === i && arr.dragIndex !== null && arr.dragIndex !== i
+                            ? 'border-l-primary ring-1 ring-primary/40'
+                            : ''), children: [_jsxs(Row, { className: "select-none border-b border-border/60 bg-muted/20 px-2 py-1.5", children: [!readOnly ? (_jsx("span", { draggable: true, onDragStart: (e) => {
+                                            e.dataTransfer.effectAllowed = 'move';
+                                            e.dataTransfer.setData('text/plain', String(i));
+                                            arr.setDragIndex(i);
+                                        }, onDragEnd: arr.endDrag, "aria-label": translate('cms.field.dragToReorder'), className: "cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing", children: _jsx(GripVertical, { className: "size-3.5" }) })) : null, _jsxs("button", { type: "button", onClick: () => toggle(key), "aria-expanded": isExpanded, className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", children: [_jsx(ChevronDown, { className: cn('size-3.5 shrink-0 text-muted-foreground transition-transform', isExpanded ? '' : '-rotate-90'), "aria-hidden": true }), _jsx(Text, { size: "sm", className: "min-w-0 truncate font-medium", children: objectItemSummary(field.fields, record, i) })] }), !readOnly ? (_jsx(ItemOverflowMenu, { index: i, count: items.length, onMove: arr.move, onRemove: () => arr.removeAt(i) })) : null] }), isExpanded ? (_jsx("div", { className: "px-3 pb-3", children: _jsx(ObjectItemForm, { fields: field.fields, value: record, readOnly: readOnly, idPrefix: `${id}-${i}`, onChange: (updated) => arr.setItem(i, updated) }) })) : null] }, key));
+                })), !readOnly ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: onAdd, children: [_jsx(Plus, { className: "size-3" }), " ", translate('cms.field.addItem')] })) : null] }) }));
+}
+/**
+ * (C) A compact editable table for a FLAT object array — columns are the scalar
+ * subfields, one row per item. Kills the card-stack sprawl for the commonest case
+ * (option lists, opening hours, social links). Drag-reorder + an overflow menu per
+ * row; cells reuse {@link FieldControl} so each subfield keeps its native control.
+ */
+function ObjectTableField({ field, value, onChange, readOnly, id, depth }) {
+    const arr = useObjectArray(field, value, onChange);
+    const { items, keys } = arr;
+    const cols = field.fields;
+    const span = cols.length + (readOnly ? 0 : 2);
+    return (_jsxs("div", { className: cn('overflow-hidden rounded-md border border-border border-l-2', depthRail(depth), depthTint(depth)), children: [_jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/60 bg-muted/30 text-left", children: [!readOnly ? _jsx("th", { className: "w-7" }) : null, cols.map((c) => (_jsxs("th", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: [fieldLabel(c), c.validation?.required ? _jsx("span", { className: "text-destructive", children: " *" }) : null] }, c.name))), !readOnly ? _jsx("th", { className: "w-9" }) : null] }) }), _jsx("tbody", { children: items.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: span, className: "px-2 py-2 text-muted-foreground", children: _jsx(Text, { size: "sm", tone: "subtle", children: translate('cms.field.noItems') }) }) })) : (items.map((item, i) => {
+                            const key = keys[i] ?? i;
+                            const record = asRecord(item);
+                            return (_jsxs("tr", { onDragOver: (e) => {
+                                    if (arr.dragIndex === null)
+                                        return;
+                                    e.preventDefault();
+                                    if (arr.overIndex !== i)
+                                        arr.setOverIndex(i);
+                                }, onDrop: () => arr.drop(i), className: cn('border-b border-border/40 align-top last:border-0', arr.dragIndex === i ? 'opacity-50' : '', arr.overIndex === i && arr.dragIndex !== null && arr.dragIndex !== i
+                                    ? 'bg-primary/5'
+                                    : ''), children: [!readOnly ? (_jsx("td", { className: "px-1 py-1", children: _jsx("span", { draggable: true, onDragStart: (e) => {
+                                                e.dataTransfer.effectAllowed = 'move';
+                                                e.dataTransfer.setData('text/plain', String(i));
+                                                arr.setDragIndex(i);
+                                            }, onDragEnd: arr.endDrag, "aria-label": translate('cms.field.dragToReorder'), className: "inline-flex cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing", children: _jsx(GripVertical, { className: "size-3.5" }) }) })) : null, cols.map((c) => (_jsx("td", { className: "px-2 py-1", children: _jsx(FieldControl, { id: `${id}-${i}-${c.name}`, field: c, value: record[c.name], readOnly: readOnly, onChange: (next) => {
+                                                const updated = { ...record };
+                                                if (next === undefined)
+                                                    delete updated[c.name];
+                                                else
+                                                    updated[c.name] = next;
+                                                arr.setItem(i, updated);
+                                            } }) }, c.name))), !readOnly ? (_jsx("td", { className: "px-1 py-1", children: _jsx(ItemOverflowMenu, { index: i, count: items.length, onMove: arr.move, onRemove: () => arr.removeAt(i) }) })) : null] }, key));
+                        })) })] }), !readOnly ? (_jsx("div", { className: "border-t border-border/60 p-1.5", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => arr.addItem(), children: [_jsx(Plus, { className: "size-3" }), " ", translate('common.add')] }) })) : null] }));
+}
+//# sourceMappingURL=object-array-field.js.map

package/dist/components/cms/object-array-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-array-field.js","sourceRoot":"","sources":["../../../src/components/cms/object-array-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChevronDown, ChevronUp, GripVertical, MoreHorizontal, Plus, Trash2 } from 'lucide-react'\nimport { createContext, useContext, useRef, useState } from 'react'\nimport type { FieldDef, ObjectFieldDef } from '@elytracms/core/cms-core'\nimport { isFieldHidden } from '@elytracms/core/cms-core'\nimport {\n  Button,\n  Card,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Field,\n  Row,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { fieldLabel } from './cms-labels'\nimport { FieldControl } from './field-control'\nimport { depthRail, depthTint, isTabularObjectType, objectItemSummary, reorder } from './field-control-lib'\n\n/**\n * The object / repeater field controls (EC-253, legibility-rebuilt EC-305) —\n * split from `field-control.tsx` (EC-330). {@link ObjectField} dispatches by\n * shape (single card / editable table / card list); {@link ObjectItemForm} is\n * the recursive subfield form the asset-field family reuses for per-use\n * sub-fields and asset metadata. Cells and subfields render through\n * `FieldControl`, so any subfield type — including a nested repeater — works\n * for free.\n */\n\nfunction asRecord(value: unknown): Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value)\n    ? (value as Record<string, unknown>)\n    : {}\n}\n\n// EC-305: nested-array depth, propagated via context so each array level can encode\n// its depth (rail colour + tint) without prop-drilling through FieldControl's many\n// branches. The detail editor renders top-level fields with the default depth 0.\nconst ArrayDepthContext = createContext(0)\nconst useArrayDepth = () => useContext(ArrayDepthContext)\n\n/**\n * Shared array state for an object repeater (EC-253/EC-294/EC-305): the value-only\n * items + a parallel stable-key list kept in lockstep through every structural op\n * (the EC-253 C2 key↔value lock), add/remove/move, and native drag-reorder. Used by\n * both the card list (B) and the table (C) so they behave identically.\n */\nfunction useObjectArray(field: ObjectFieldDef, value: unknown, onChange: (value: unknown) => void) {\n  const items = Array.isArray(value) ? (value as Record<string, unknown>[]) : []\n  const seq = useRef(0)\n  const keysRef = useRef<number[]>([])\n  if (keysRef.current.length !== items.length) {\n    keysRef.current = items.map((_, i) => keysRef.current[i] ?? seq.current++)\n  }\n  const keys = keysRef.current\n  const commit = (nextItems: Record<string, unknown>[], nextKeys: number[]) => {\n    keysRef.current = nextKeys\n    onChange(nextItems)\n  }\n  const move = (from: number, to: number) => commit(reorder(items, from, to), reorder(keys, from, to))\n  const removeAt = (i: number) =>\n    commit(items.filter((_, j) => j !== i), keys.filter((_, j) => j !== i))\n  const addItem = (): number => {\n    const seed: Record<string, unknown> = {}\n    for (const sub of field.fields) if (sub.default !== undefined) seed[sub.name] = sub.default\n    const key = seq.current++\n    commit([...items, seed], [...keys, key])\n    return key\n  }\n  const setItem = (i: number, updated: Record<string, unknown>) => {\n    const nextItems = items.slice()\n    nextItems[i] = updated\n    commit(nextItems, keys)\n  }\n  const [dragIndex, setDragIndex] = useState<number | null>(null)\n  const [overIndex, setOverIndex] = useState<number | null>(null)\n  const endDrag = () => {\n    setDragIndex(null)\n    setOverIndex(null)\n  }\n  const drop = (to: number) => {\n    if (dragIndex !== null && dragIndex !== to) move(dragIndex, to)\n    endDrag()\n  }\n  return { items, keys, move, removeAt, addItem, setItem, dragIndex, overIndex, setDragIndex, setOverIndex, endDrag, drop }\n}\n\n/**\n * (E) Chrome reduction: the per-row move/remove controls collapse into one hover/\n * focus overflow menu, so a row reads as content, not a six-button toolbar. Drag is\n * the primary reorder; the arrows stay here for keyboard/a11y.\n */\nfunction ItemOverflowMenu({\n  index,\n  count,\n  onMove,\n  onRemove,\n}: {\n  index: number\n  count: number\n  onMove: (from: number, to: number) => void\n  onRemove: () => void\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" size=\"sm\" aria-label={translate('cms.field.itemActions')}>\n          <MoreHorizontal className=\"size-3.5\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem disabled={index === 0} onClick={() => onMove(index, index - 1)}>\n          <ChevronUp /> {translate('cms.field.moveUp')}\n        </DropdownMenuItem>\n        <DropdownMenuItem disabled={index === count - 1} onClick={() => onMove(index, index + 1)}>\n          <ChevronDown /> {translate('cms.field.moveDown')}\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={onRemove}>\n          <Trash2 /> {translate('common.remove')}\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/**\n * The nested subfield form for one object item (EC-253). Reuses {@link FieldControl}\n * recursively, so any subfield type — including a nested object/repeater — works for\n * free. Writing a subfield merges it back into the item and bubbles the new item up.\n */\nexport function ObjectItemForm({\n  fields,\n  value,\n  onChange,\n  readOnly,\n  idPrefix,\n}: {\n  fields: readonly FieldDef[]\n  value: Record<string, unknown>\n  onChange: (value: Record<string, unknown>) => void\n  readOnly: boolean\n  idPrefix: string\n}) {\n  return (\n    <Stack gap=\"3\" className=\"mt-2\">\n      {fields.map((sub) => {\n        // EC-273: a conditionally-hidden subfield (its predicate keys off the item's\n        // own sibling values) is omitted — e.g. a discriminated link's `href` shows\n        // only when `linkType === 'href'`. Re-evaluated as the item is edited.\n        if (isFieldHidden(sub, { values: value })) return null\n        const subId = `${idPrefix}-${sub.name}`\n        return (\n          <Field\n            key={sub.name}\n            htmlFor={subId}\n            hint={localizedLabel(sub.form?.description) || undefined}\n            label={\n              <Row gap=\"2\">\n                <span>{fieldLabel(sub)}</span>\n                {sub.validation?.required ? <span className=\"text-destructive\">*</span> : null}\n              </Row>\n            }\n          >\n            <FieldControl\n              id={subId}\n              field={sub}\n              value={value[sub.name]}\n              readOnly={readOnly}\n              onChange={(next) => {\n                const updated = { ...value }\n                if (next === undefined) delete updated[sub.name]\n                else updated[sub.name] = next\n                onChange(updated)\n              }}\n            />\n          </Field>\n        )\n      })}\n    </Stack>\n  )\n}\n\n/**\n * Object / repeater field control (EC-253), legibility-rebuilt (EC-305). A single\n * object (`multiple: false`) renders a depth-encoded card; an array (`'many'`)\n * dispatches by shape: a **flat** object type (all scalar subfields) → a compact\n * editable TABLE (C); a richer/nested type → a card list with depth encoding (B),\n * summary-first collapse (D), and reduced per-row chrome (E). Editing stays in the\n * shared field form — no canvas escape (unlike `blocks`) — so props and document\n * fields share this control. Depth flows via {@link ArrayDepthContext}.\n */\nexport function ObjectField({\n  field,\n  value,\n  onChange,\n  readOnly,\n  id,\n}: {\n  field: ObjectFieldDef\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly: boolean\n  id: string\n}) {\n  const depth = useArrayDepth()\n  if (field.multiple === false) {\n    return (\n      <Card className={cn('border-l-2 p-3', depthRail(depth), depthTint(depth))}>\n        <ArrayDepthContext.Provider value={depth + 1}>\n          <ObjectItemForm\n            fields={field.fields}\n            value={asRecord(value)}\n            readOnly={readOnly}\n            idPrefix={id}\n            onChange={onChange}\n          />\n        </ArrayDepthContext.Provider>\n      </Card>\n    )\n  }\n  const props = { field, value, onChange, readOnly, id, depth }\n  return isTabularObjectType(field) ? <ObjectTableField {...props} /> : <ObjectCardList {...props} />\n}\n\ninterface ObjectArrayProps {\n  field: ObjectFieldDef\n  value: unknown\n  onChange: (value: unknown) => void\n  readOnly: boolean\n  id: string\n  depth: number\n}\n\n/**\n * (B + D + E) The card list for a nested/rich object array: depth-encoded cards\n * (coloured rail + tint), items collapsed by default to a scannable summary outline\n * (D), accordion expansion (open one → collapse siblings), and the per-row controls\n * collapsed into one overflow menu (E). Drag-to-reorder; arrows live in the menu for\n * a11y. Nested arrays render one depth deeper via the context provider.\n */\nfunction ObjectCardList({ field, value, onChange, readOnly, id, depth }: ObjectArrayProps) {\n  const arr = useObjectArray(field, value, onChange)\n  const { items, keys } = arr\n  // (D) Default COLLAPSED: track which keys are EXPANDED (empty = all collapsed).\n  // (B) Accordion: expanding one collapses the siblings.\n  const [expandedKeys, setExpandedKeys] = useState<ReadonlySet<number>>(() => new Set())\n  const toggle = (key: number) =>\n    setExpandedKeys((prev) => {\n      if (prev.has(key)) {\n        const next = new Set(prev)\n        next.delete(key)\n        return next\n      }\n      return new Set([key])\n    })\n  const allExpanded = items.length > 0 && keys.every((k) => expandedKeys.has(k))\n  const onAdd = () => setExpandedKeys(new Set([arr.addItem()]))\n  return (\n    <ArrayDepthContext.Provider value={depth + 1}>\n      <Stack gap=\"2\">\n        {items.length > 1 && !readOnly ? (\n          <Row justify=\"end\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setExpandedKeys(allExpanded ? new Set() : new Set(keys))}\n            >\n              {translate(allExpanded ? 'cms.field.collapseAll' : 'cms.field.expandAll')}\n            </Button>\n          </Row>\n        ) : null}\n        {items.length === 0 ? (\n          <Text size=\"sm\" tone=\"subtle\">\n            {translate('cms.field.noItems')}\n          </Text>\n        ) : (\n          items.map((item, i) => {\n            // keysRef is reconciled to items.length, so keys[i] is always present;\n            // `?? i` only satisfies noUncheckedIndexedAccess (never taken at runtime).\n            const key = keys[i] ?? i\n            const record = asRecord(item)\n            const isExpanded = expandedKeys.has(key)\n            return (\n              <Card\n                key={key}\n                onDragOver={(e) => {\n                  if (arr.dragIndex === null) return\n                  e.preventDefault()\n                  if (arr.overIndex !== i) arr.setOverIndex(i)\n                }}\n                onDrop={() => arr.drop(i)}\n                className={cn(\n                  'border-l-2 p-0',\n                  depthRail(depth),\n                  depthTint(depth),\n                  arr.dragIndex === i ? 'opacity-50' : '',\n                  arr.overIndex === i && arr.dragIndex !== null && arr.dragIndex !== i\n                    ? 'border-l-primary ring-1 ring-primary/40'\n                    : '',\n                )}\n              >\n                <Row className=\"select-none border-b border-border/60 bg-muted/20 px-2 py-1.5\">\n                  {!readOnly ? (\n                    <span\n                      draggable\n                      onDragStart={(e) => {\n                        e.dataTransfer.effectAllowed = 'move'\n                        e.dataTransfer.setData('text/plain', String(i))\n                        arr.setDragIndex(i)\n                      }}\n                      onDragEnd={arr.endDrag}\n                      aria-label={translate('cms.field.dragToReorder')}\n                      className=\"cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing\"\n                    >\n                      <GripVertical className=\"size-3.5\" />\n                    </span>\n                  ) : null}\n                  <button\n                    type=\"button\"\n                    onClick={() => toggle(key)}\n                    aria-expanded={isExpanded}\n                    className=\"flex min-w-0 flex-1 items-center gap-1.5 text-left\"\n                  >\n                    <ChevronDown\n                      className={cn(\n                        'size-3.5 shrink-0 text-muted-foreground transition-transform',\n                        isExpanded ? '' : '-rotate-90',\n                      )}\n                      aria-hidden\n                    />\n                    <Text size=\"sm\" className=\"min-w-0 truncate font-medium\">\n                      {objectItemSummary(field.fields, record, i)}\n                    </Text>\n                  </button>\n                  {!readOnly ? (\n                    <ItemOverflowMenu\n                      index={i}\n                      count={items.length}\n                      onMove={arr.move}\n                      onRemove={() => arr.removeAt(i)}\n                    />\n                  ) : null}\n                </Row>\n                {isExpanded ? (\n                  <div className=\"px-3 pb-3\">\n                    <ObjectItemForm\n                      fields={field.fields}\n                      value={record}\n                      readOnly={readOnly}\n                      idPrefix={`${id}-${i}`}\n                      onChange={(updated) => arr.setItem(i, updated)}\n                    />\n                  </div>\n                ) : null}\n              </Card>\n            )\n          })\n        )}\n        {!readOnly ? (\n          <Button variant=\"outline\" size=\"sm\" onClick={onAdd}>\n            <Plus className=\"size-3\" /> {translate('cms.field.addItem')}\n          </Button>\n        ) : null}\n      </Stack>\n    </ArrayDepthContext.Provider>\n  )\n}\n\n/**\n * (C) A compact editable table for a FLAT object array — columns are the scalar\n * subfields, one row per item. Kills the card-stack sprawl for the commonest case\n * (option lists, opening hours, social links). Drag-reorder + an overflow menu per\n * row; cells reuse {@link FieldControl} so each subfield keeps its native control.\n */\nfunction ObjectTableField({ field, value, onChange, readOnly, id, depth }: ObjectArrayProps) {\n  const arr = useObjectArray(field, value, onChange)\n  const { items, keys } = arr\n  const cols = field.fields\n  const span = cols.length + (readOnly ? 0 : 2)\n  return (\n    <div className={cn('overflow-hidden rounded-md border border-border border-l-2', depthRail(depth), depthTint(depth))}>\n      <table className=\"w-full text-sm\">\n        <thead>\n          <tr className=\"border-b border-border/60 bg-muted/30 text-left\">\n            {!readOnly ? <th className=\"w-7\" /> : null}\n            {cols.map((c) => (\n              <th key={c.name} className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n                {fieldLabel(c)}\n                {c.validation?.required ? <span className=\"text-destructive\"> *</span> : null}\n              </th>\n            ))}\n            {!readOnly ? <th className=\"w-9\" /> : null}\n          </tr>\n        </thead>\n        <tbody>\n          {items.length === 0 ? (\n            <tr>\n              <td colSpan={span} className=\"px-2 py-2 text-muted-foreground\">\n                <Text size=\"sm\" tone=\"subtle\">\n                  {translate('cms.field.noItems')}\n                </Text>\n              </td>\n            </tr>\n          ) : (\n            items.map((item, i) => {\n              const key = keys[i] ?? i\n              const record = asRecord(item)\n              return (\n                <tr\n                  key={key}\n                  onDragOver={(e) => {\n                    if (arr.dragIndex === null) return\n                    e.preventDefault()\n                    if (arr.overIndex !== i) arr.setOverIndex(i)\n                  }}\n                  onDrop={() => arr.drop(i)}\n                  className={cn(\n                    'border-b border-border/40 align-top last:border-0',\n                    arr.dragIndex === i ? 'opacity-50' : '',\n                    arr.overIndex === i && arr.dragIndex !== null && arr.dragIndex !== i\n                      ? 'bg-primary/5'\n                      : '',\n                  )}\n                >\n                  {!readOnly ? (\n                    <td className=\"px-1 py-1\">\n                      <span\n                        draggable\n                        onDragStart={(e) => {\n                          e.dataTransfer.effectAllowed = 'move'\n                          e.dataTransfer.setData('text/plain', String(i))\n                          arr.setDragIndex(i)\n                        }}\n                        onDragEnd={arr.endDrag}\n                        aria-label={translate('cms.field.dragToReorder')}\n                        className=\"inline-flex cursor-grab text-muted-foreground/50 hover:text-muted-foreground active:cursor-grabbing\"\n                      >\n                        <GripVertical className=\"size-3.5\" />\n                      </span>\n                    </td>\n                  ) : null}\n                  {cols.map((c) => (\n                    <td key={c.name} className=\"px-2 py-1\">\n                      <FieldControl\n                        id={`${id}-${i}-${c.name}`}\n                        field={c}\n                        value={record[c.name]}\n                        readOnly={readOnly}\n                        onChange={(next) => {\n                          const updated = { ...record }\n                          if (next === undefined) delete updated[c.name]\n                          else updated[c.name] = next\n                          arr.setItem(i, updated)\n                        }}\n                      />\n                    </td>\n                  ))}\n                  {!readOnly ? (\n                    <td className=\"px-1 py-1\">\n                      <ItemOverflowMenu\n                        index={i}\n                        count={items.length}\n                        onMove={arr.move}\n                        onRemove={() => arr.removeAt(i)}\n                      />\n                    </td>\n                  ) : null}\n                </tr>\n              )\n            })\n          )}\n        </tbody>\n      </table>\n      {!readOnly ? (\n        <div className=\"border-t border-border/60 p-1.5\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => arr.addItem()}>\n            <Plus className=\"size-3\" /> {translate('common.add')}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"]}

package/dist/components/cms/prop-fields.d.ts

@@ -21,6 +21,21 @@ import type { PropField } from '@elytracms/core/component-registry';
  */
 export type ControlKind = 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'json' | 'color' | 'richtext' | 'asset' | 'object' | 'relation';
 export declare function controlKind(spec: PropField): ControlKind;
+/**
+ * EC-387: route a rich-text editor emission to the prop value callbacks.
+ *
+ * The shared {@link RichTextEditor} emits either an emptied-editor `undefined`, the
+ * exact stored envelope (an untouched/reverted edit), or a fresh `{ version, doc }`
+ * value — never a plain string. An `undefined` clears the prop (reverting to the
+ * manifest default, matching the asset/relation/object controls); anything else is a
+ * structured `JsonValue` envelope set verbatim. Extracted pure so the wiring — the
+ * exact bug the retired textarea stub had (it wrote a bare string over the envelope) —
+ * is regression-pinned without driving TipTap.
+ */
+export declare function applyRichTextPropChange(next: unknown, handlers: {
+    onSet: (value: JsonValue) => void;
+    onClear: () => void;
+}): void;
 export interface PropValueControlProps {
     /** DOM id for the control's primary input (label `htmlFor` target). */
     id: string;

package/dist/components/cms/prop-fields.js

@@ -6,6 +6,7 @@ import { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui';
 import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { FieldControl } from './field-control.js';
 import { FieldDensityProvider } from './field-density.js';
+import { RichTextEditor } from './rich-text/index.js';
 import { useOptionalCollectionView } from '../collection-view/collection-view-context.js';
 export function controlKind(spec) {
     switch (spec.type) {
@@ -42,6 +43,23 @@ export function controlKind(spec) {
             return 'text';
     }
 }
+/**
+ * EC-387: route a rich-text editor emission to the prop value callbacks.
+ *
+ * The shared {@link RichTextEditor} emits either an emptied-editor `undefined`, the
+ * exact stored envelope (an untouched/reverted edit), or a fresh `{ version, doc }`
+ * value — never a plain string. An `undefined` clears the prop (reverting to the
+ * manifest default, matching the asset/relation/object controls); anything else is a
+ * structured `JsonValue` envelope set verbatim. Extracted pure so the wiring — the
+ * exact bug the retired textarea stub had (it wrote a bare string over the envelope) —
+ * is regression-pinned without driving TipTap.
+ */
+export function applyRichTextPropChange(next, handlers) {
+    if (next === undefined)
+        handlers.onClear();
+    else
+        handlers.onSet(next);
+}
 /**
  * Render + edit a single manifest prop value. Store-agnostic: emits through
  * `onSet`/`onClear`. Shows a validation issue when the current value fails the
@@ -82,7 +100,26 @@ export function PropValueControl({ id, name, spec, value, onSet, onClear }) {
     else if (kind === 'color') {
         control = (_jsxs(Row, { gap: "2", children: [_jsx("input", { id: id, type: "color", value: typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000', onChange: (e) => onSet(e.target.value), className: "h-8 w-10 shrink-0 rounded-md border border-input bg-background" }), _jsx(Input, { value: typeof current === 'string' ? current : '', onChange: (e) => onSet(e.target.value) })] }));
     }
-    else if (kind === 'textarea' || kind === 'richtext') {
+    else if (kind === 'richtext') {
+        // EC-387: a richText PROP now uses the SAME real editor as the collection-field
+        // path (`field-control.tsx` `case 'richText'`) — one editing surface, one
+        // `{ version, doc }` value contract, never a second implementation. The retired
+        // textarea stub read `typeof current === 'string'`, so a stored envelope showed
+        // EMPTY and any edit clobbered the structured document with a bare string
+        // (silent data destruction). The editor reads the envelope (or a legacy string,
+        // or empty), always emits an envelope, and routes an emptied editor's `undefined`
+        // to a prop clear via {@link applyRichTextPropChange}.
+        //
+        // Like the asset/relation/object controls below, the editor needs the ambient
+        // workspace — its asset-image picker reads the REQUIRED collection-view context.
+        // The block property inspector (the EC-387 target) is inside the detail editor's
+        // `CollectionViewProvider`, so it gets the full editor; the component-registry
+        // preview surface (no provider, nothing to edit against) degrades to the same
+        // read-only value display the sibling controls use, instead of crashing with
+        // "useCollectionView must be used within a <CollectionViewProvider>".
+        control = hasWorkspaceContext ? (_jsx(RichTextEditor, { id: id, value: current, onChange: (next) => applyRichTextPropChange(next, { onSet, onClear }), allow: spec.type === 'richText' ? spec.allow : undefined })) : (_jsx(WorkspaceValueFallback, { value: current }));
+    }
+    else if (kind === 'textarea') {
         control = (_jsx("textarea", { id: id, rows: 2, value: typeof current === 'string' ? current : '', onChange: (e) => onSet(e.target.value), className: "flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none" }));
     }
     else if (kind === 'asset' || kind === 'object' || kind === 'relation') {

package/dist/components/cms/prop-fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-fields.js","sourceRoot":"","sources":["../../../src/components/cms/prop-fields.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAG5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AAmCtF,MAAM,UAAU,WAAW,CAAC,IAAe;IACzC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAA;QAClB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAA;QACjB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAA;QACjB,KAAK,UAAU;YACb,OAAO,UAAU,CAAA;QACnB,4EAA4E;QAC5E,6EAA6E;QAC7E,KAAK,OAAO;YACV,OAAO,OAAO,CAAA;QAChB,2EAA2E;QAC3E,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAA;QACjB,+EAA+E;QAC/E,wFAAwF;QACxF,KAAK,UAAU;YACb,OAAO,UAAU,CAAA;QACnB,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,CAAA;YAC5B,IAAI,CAAC,KAAK,UAAU;gBAAE,OAAO,UAAU,CAAA;YACvC,IAAI,CAAC,KAAK,OAAO;gBAAE,OAAO,OAAO,CAAA;YACjC,IAAI,CAAC,KAAK,MAAM;gBAAE,OAAO,MAAM,CAAA;YAC/B,OAAO,MAAM,CAAA;QACf,CAAC;QACD;YACE,OAAO,MAAM,CAAA;IACjB,CAAC;AACH,CAAC;AAiBD;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAyB;IAC/F,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAE,IAAI,CAAC,OAAiC,CAAA;IAC3F,+EAA+E;IAC/E,0EAA0E;IAC1E,0EAA0E;IAC1E,iFAAiF;IACjF,8EAA8E;IAC9E,kFAAkF;IAClF,MAAM,mBAAmB,GAAG,yBAAyB,EAAE,IAAI,IAAI,CAAA;IAE/D,8DAA8D;IAC9D,MAAM,KAAK,GAAG,OAAO,KAAK,SAAS,IAAI,mBAAmB,CAAC,EAAE,GAAG,IAAI,EAAE,IAAI,EAAc,CAAC,CAAC,OAAO,CAAC,CAAA;IAClG,qFAAqF;IACrF,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IAC9B,iDAAiD;IACjD,MAAM,OAAO,GAA4B,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IAEnF,IAAI,OAAO,CAAA;IACX,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,OAAO,GAAG,CACR,iBAAO,SAAS,EAAC,qCAAqC,aACpD,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,KAAK,IAAI,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACxC,SAAS,EAAC,uBAAuB,GACjC,EACF,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,GACnE,IACD,CACT,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,GAAG,CACR,KAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,kEAAkE;gBAClE,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBAC3D,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACzC,CAAC,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAwB,KAAK,EAAE,GAAG,CAAC,KAAK,YACrC,cAAc,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,IAD1B,GAAG,CAAC,KAAK,CAEb,CACV,CAAC,GACK,CACV,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,GAAG,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;IACvF,CAAC;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QAC3B,OAAO,GAAG,KAAC,WAAW,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;IACnE,CAAC;SAAM,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QAC5B,OAAO,GAAG,CACR,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,aACV,gBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC3F,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,SAAS,EAAC,gEAAgE,GAC1E,EACF,KAAC,KAAK,IAAC,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,IAChG,CACP,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,UAAU,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACtD,OAAO,GAAG,CACR,mBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACjD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,SAAS,EAAC,iMAAiM,GAC3M,CACH,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxE,gFAAgF;QAChF,iFAAiF;QACjF,oFAAoF;QACpF,yFAAyF;QACzF,+EAA+E;QAC/E,yDAAyD;QACzD,OAAO,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAC9B,KAAC,oBAAoB,IAAC,OAAO,EAAC,SAAS,YACrC,KAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,IAAI,EAAc,EACpC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAc,CAAC,CAAC,EACpF,QAAQ,EAAE,KAAK,GACf,GACmB,CACxB,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,IAAC,KAAK,EAAE,OAAO,GAAI,CAC3C,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,CACR,KAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC,EACpE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACtC,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACX,OAAO,EACP,CAAC,KAAK,CAAC,CAAC,CAAC,CACR,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,kBAAkB,YACzC,SAAS,CAAC,gCAAgC,CAAC,GACvC,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,SAAS,sBAAsB,CAAC,EAAE,KAAK,EAAoC;IACzE,MAAM,IAAI,GACR,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QACnC,CAAC,CAAC,GAAG;QACL,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ;YACzB,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IAC7B,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,cAAK,SAAS,EAAC,iGAAiG,YAC7G,IAAI,GACD,EACN,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,YACzB,SAAS,CAAC,sCAAsC,CAAC,GAC7C,IACD,CACT,CAAA;AACH,CAAC;AAED,sGAAsG;AACtG,SAAS,aAAa,CAAC,EACrB,EAAE,EACF,OAAO,EACP,KAAK,EACL,OAAO,GAMR;IACC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAClF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAC5D,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,OAAO,CACL,KAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YACxB,MAAM,CAAC,CAAC,CAAC,CAAA;YACT,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;gBACpB,OAAO,EAAE,CAAA;gBACT,OAAM;YACR,CAAC;YACD,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACnB,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;gBAAE,KAAK,CAAC,CAAC,CAAC,CAAA;QAClC,CAAC,GACD,CACH,CAAA;AACH,CAAC;AAED,gGAAgG;AAChG,SAAS,WAAW,CAAC,EACnB,EAAE,EACF,OAAO,EACP,KAAK,GAKN;IACC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAA;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IACvD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAA;QACvC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IACb,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,GAAG,aACZ,mBACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;oBACxB,MAAM,CAAC,CAAC,CAAC,CAAA;oBACT,IAAI,CAAC;wBACH,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAc,CAAC,CAAA;wBACjC,QAAQ,CAAC,IAAI,CAAC,CAAA;oBAChB,CAAC;oBAAC,MAAM,CAAC;wBACP,QAAQ,CAAC,SAAS,CAAC,+BAA+B,CAAC,CAAC,CAAA;oBACtD,CAAC;gBACH,CAAC,EACD,SAAS,EAAC,2MAA2M,GACrN,EACD,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,kBAAkB,YACzC,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAA;AACH,CAAC","sourcesContent":["import { useEffect, useState } from 'react'\nimport { isStaticProp } from '@elytracms/core/project-graph'\nimport type { JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { PropField } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { FieldControl } from './field-control'\nimport { FieldDensityProvider } from './field-density'\nimport { useOptionalCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * The EC-190 \"props-as-fields\" value control — the single renderer for a\n * manifest-declared prop field, shared by the canvas property inspector\n * (`builder/property-inspector.tsx`) and the rich-text component-embed prop editor\n * (`rich-text/embed-props.tsx`). Extracted here so both surfaces render prop fields\n * through *one* control set (asset → library picker, relation → document picker,\n * object → nested form, …) rather than two parallel form systems.\n *\n * It is deliberately store-agnostic: it reads a prop's current value and reports\n * edits through `onSet(rawValue)` / `onClear()`. The caller owns *where* the value\n * lands — the inspector dispatches a builder command; the embed editor rewrites a\n * ProseMirror node attr — and is responsible for wrapping the raw value in a\n * `staticProp` envelope.\n */\n\n/**\n * The inspector control to render for a prop field-def. The `control.kind`\n * vocabulary derives from the field `type` plus the optional `form.control`\n * presentation hint on `text` fields.\n */\nexport type ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\n\nexport function controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\nexport interface PropValueControlProps {\n  /** DOM id for the control's primary input (label `htmlFor` target). */\n  id: string\n  /** The prop's field name — needed to synthesize the `FieldDef` for reused controls. */\n  name: string\n  /** The manifest prop field-def driving the control kind + validation. */\n  spec: PropField\n  /** The prop's current value envelope (or `undefined` when unset). */\n  value: PropValue | undefined\n  /** Commit a new raw value (the caller wraps it in a `staticProp`). */\n  onSet: (value: JsonValue) => void\n  /** Remove the prop (revert to the manifest default). */\n  onClear: () => void\n}\n\n/**\n * Render + edit a single manifest prop value. Store-agnostic: emits through\n * `onSet`/`onClear`. Shows a validation issue when the current value fails the\n * prop's field-def validator.\n */\nexport function PropValueControl({ id, name, spec, value, onSet, onClear }: PropValueControlProps) {\n  const current = isStaticProp(value) ? value.value : (spec.default as JsonValue | undefined)\n  // The `asset`/`relation`/`object` controls delegate to the CMS `FieldControl`,\n  // which reads the ambient `CollectionViewSource` (asset library, relation\n  // candidates, nested form). The component-registry preview surface has no\n  // document/collection context, so outside a provider those controls must degrade\n  // to a read-only value display instead of throwing \"useCollectionView must be\n  // used within a <CollectionViewProvider>\" (the Konditorei Components-view crash).\n  const hasWorkspaceContext = useOptionalCollectionView() != null\n\n  // EC-190: validate with the prop's field-def value validator.\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def.\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => onSet(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? translate('common.true') : translate('common.false')}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          onSet(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {localizedLabel(opt.label, opt.value)}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={onSet} onClear={onClear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={onSet} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'}\n          onChange={(e) => onSet(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input value={typeof current === 'string' ? current : ''} onChange={(e) => onSet(e.target.value)} />\n      </Row>\n    )\n  } else if (kind === 'textarea' || kind === 'richtext') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => onSet(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    // Without a workspace context (the Components preview), degrade to a read-only\n    // value display so the pane renders instead of throwing.\n    control = hasWorkspaceContext ? (\n      <FieldDensityProvider density=\"compact\">\n        <FieldControl\n          id={id}\n          field={{ ...spec, name } as FieldDef}\n          value={current}\n          onChange={(v) => (v === undefined || v === null ? onClear() : onSet(v as JsonValue))}\n          readOnly={false}\n        />\n      </FieldDensityProvider>\n    ) : (\n      <WorkspaceValueFallback value={current} />\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => onSet(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {translate('builder.inspector.invalidValue')}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * Read-only stand-in for an `asset`/`relation`/`object` prop when there is no\n * ambient `CollectionViewSource` (the component-registry preview, which has no\n * document/collection context). Shows the current value and a hint that it is\n * editable inside a document — never the live picker, which needs a workspace.\n */\nfunction WorkspaceValueFallback({ value }: { value: JsonValue | undefined }) {\n  const text =\n    value === undefined || value === null\n      ? '—'\n      : typeof value === 'string'\n        ? value\n        : JSON.stringify(value)\n  return (\n    <Stack gap=\"1\">\n      <div className=\"truncate rounded-md border border-input bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground\">\n        {text}\n      </div>\n      <Text size=\"xs\" tone=\"muted\">\n        {translate('components.preview.propNeedsDocument')}\n      </Text>\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError(translate('builder.inspector.invalidJson'))\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n"]}
+{"version":3,"file":"prop-fields.js","sourceRoot":"","sources":["../../../src/components/cms/prop-fields.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react'\nimport { isStaticProp } from '@elytracms/core/project-graph'\nimport type { JsonValue, PropValue } from '@elytracms/core/project-graph'\nimport type { PropField } from '@elytracms/core/component-registry'\nimport { fieldValueValidator } from '@elytracms/core/cms-core'\nimport type { FieldDef, SelectOption } from '@elytracms/core/cms-core'\nimport { Input, Row, Select, Stack, Text } from '@elytracms/studio/ui'\nimport { localizedLabel, translate } from '@elytracms/studio/lib/i18n'\nimport { FieldControl } from './field-control'\nimport { FieldDensityProvider } from './field-density'\nimport { RichTextEditor } from './rich-text'\nimport { useOptionalCollectionView } from '../collection-view/collection-view-context'\n\n/**\n * The EC-190 \"props-as-fields\" value control — the single renderer for a\n * manifest-declared prop field, shared by the canvas property inspector\n * (`builder/property-inspector.tsx`) and the rich-text component-embed prop editor\n * (`rich-text/embed-props.tsx`). Extracted here so both surfaces render prop fields\n * through *one* control set (asset → library picker, relation → document picker,\n * object → nested form, …) rather than two parallel form systems.\n *\n * It is deliberately store-agnostic: it reads a prop's current value and reports\n * edits through `onSet(rawValue)` / `onClear()`. The caller owns *where* the value\n * lands — the inspector dispatches a builder command; the embed editor rewrites a\n * ProseMirror node attr — and is responsible for wrapping the raw value in a\n * `staticProp` envelope.\n */\n\n/**\n * The inspector control to render for a prop field-def. The `control.kind`\n * vocabulary derives from the field `type` plus the optional `form.control`\n * presentation hint on `text` fields.\n */\nexport type ControlKind =\n  | 'text'\n  | 'textarea'\n  | 'number'\n  | 'boolean'\n  | 'select'\n  | 'json'\n  | 'color'\n  | 'richtext'\n  | 'asset'\n  | 'object'\n  | 'relation'\n\nexport function controlKind(spec: PropField): ControlKind {\n  switch (spec.type) {\n    case 'boolean':\n      return 'boolean'\n    case 'number':\n      return 'number'\n    case 'select':\n      return 'select'\n    case 'richText':\n      return 'richtext'\n    // EC-195: an `asset`-typed prop (e.g. the Image `src`) picks from the asset\n    // library — never a raw asset id typed into a text box (the EC-192 persona).\n    case 'asset':\n      return 'asset'\n    // EC-253: an `object`/repeater prop reuses the CMS repeater control below.\n    case 'object':\n      return 'object'\n    // EC-262: a `relation`-typed prop (e.g. a ProductGrid's `category`) reuses the\n    // CMS relation picker — never a text box that stringifies the ref to \"[object Object]\".\n    case 'relation':\n      return 'relation'\n    case 'text': {\n      const c = spec.form?.control\n      if (c === 'textarea') return 'textarea'\n      if (c === 'color') return 'color'\n      if (c === 'json') return 'json'\n      return 'text'\n    }\n    default:\n      return 'text'\n  }\n}\n\n/**\n * EC-387: route a rich-text editor emission to the prop value callbacks.\n *\n * The shared {@link RichTextEditor} emits either an emptied-editor `undefined`, the\n * exact stored envelope (an untouched/reverted edit), or a fresh `{ version, doc }`\n * value — never a plain string. An `undefined` clears the prop (reverting to the\n * manifest default, matching the asset/relation/object controls); anything else is a\n * structured `JsonValue` envelope set verbatim. Extracted pure so the wiring — the\n * exact bug the retired textarea stub had (it wrote a bare string over the envelope) —\n * is regression-pinned without driving TipTap.\n */\nexport function applyRichTextPropChange(\n  next: unknown,\n  handlers: { onSet: (value: JsonValue) => void; onClear: () => void },\n): void {\n  if (next === undefined) handlers.onClear()\n  else handlers.onSet(next as JsonValue)\n}\n\nexport interface PropValueControlProps {\n  /** DOM id for the control's primary input (label `htmlFor` target). */\n  id: string\n  /** The prop's field name — needed to synthesize the `FieldDef` for reused controls. */\n  name: string\n  /** The manifest prop field-def driving the control kind + validation. */\n  spec: PropField\n  /** The prop's current value envelope (or `undefined` when unset). */\n  value: PropValue | undefined\n  /** Commit a new raw value (the caller wraps it in a `staticProp`). */\n  onSet: (value: JsonValue) => void\n  /** Remove the prop (revert to the manifest default). */\n  onClear: () => void\n}\n\n/**\n * Render + edit a single manifest prop value. Store-agnostic: emits through\n * `onSet`/`onClear`. Shows a validation issue when the current value fails the\n * prop's field-def validator.\n */\nexport function PropValueControl({ id, name, spec, value, onSet, onClear }: PropValueControlProps) {\n  const current = isStaticProp(value) ? value.value : (spec.default as JsonValue | undefined)\n  // The `asset`/`relation`/`object` controls delegate to the CMS `FieldControl`,\n  // which reads the ambient `CollectionViewSource` (asset library, relation\n  // candidates, nested form). The component-registry preview surface has no\n  // document/collection context, so outside a provider those controls must degrade\n  // to a read-only value display instead of throwing \"useCollectionView must be\n  // used within a <CollectionViewProvider>\" (the Konditorei Components-view crash).\n  const hasWorkspaceContext = useOptionalCollectionView() != null\n\n  // EC-190: validate with the prop's field-def value validator.\n  const valid = current === undefined || fieldValueValidator({ ...spec, name } as FieldDef)(current)\n  // EC-190: derive the editor control from the field `type` + optional `form.control`.\n  const kind = controlKind(spec)\n  // Select options live on the `select` field-def.\n  const options: readonly SelectOption[] = spec.type === 'select' ? spec.options : []\n\n  let control\n  if (kind === 'boolean') {\n    control = (\n      <label className=\"flex h-8 items-center gap-2 text-sm\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={current === true}\n          onChange={(e) => onSet(e.target.checked)}\n          className=\"size-4 accent-primary\"\n        />\n        <Text size=\"sm\" tone=\"muted\">\n          {current === true ? translate('common.true') : translate('common.false')}\n        </Text>\n      </label>\n    )\n  } else if (kind === 'select') {\n    control = (\n      <Select\n        id={id}\n        value={String(current ?? '')}\n        onChange={(e) => {\n          // EC-190: select option values are strings (field-def `options`).\n          const opt = options.find((o) => o.value === e.target.value)\n          onSet(opt ? opt.value : e.target.value)\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {localizedLabel(opt.label, opt.value)}\n          </option>\n        ))}\n      </Select>\n    )\n  } else if (kind === 'number') {\n    control = <NumberControl id={id} current={current} onSet={onSet} onClear={onClear} />\n  } else if (kind === 'json') {\n    control = <JsonControl id={id} current={current} onSet={onSet} />\n  } else if (kind === 'color') {\n    control = (\n      <Row gap=\"2\">\n        <input\n          id={id}\n          type=\"color\"\n          value={typeof current === 'string' && /^#[0-9a-f]{6}$/i.test(current) ? current : '#000000'}\n          onChange={(e) => onSet(e.target.value)}\n          className=\"h-8 w-10 shrink-0 rounded-md border border-input bg-background\"\n        />\n        <Input value={typeof current === 'string' ? current : ''} onChange={(e) => onSet(e.target.value)} />\n      </Row>\n    )\n  } else if (kind === 'richtext') {\n    // EC-387: a richText PROP now uses the SAME real editor as the collection-field\n    // path (`field-control.tsx` `case 'richText'`) — one editing surface, one\n    // `{ version, doc }` value contract, never a second implementation. The retired\n    // textarea stub read `typeof current === 'string'`, so a stored envelope showed\n    // EMPTY and any edit clobbered the structured document with a bare string\n    // (silent data destruction). The editor reads the envelope (or a legacy string,\n    // or empty), always emits an envelope, and routes an emptied editor's `undefined`\n    // to a prop clear via {@link applyRichTextPropChange}.\n    //\n    // Like the asset/relation/object controls below, the editor needs the ambient\n    // workspace — its asset-image picker reads the REQUIRED collection-view context.\n    // The block property inspector (the EC-387 target) is inside the detail editor's\n    // `CollectionViewProvider`, so it gets the full editor; the component-registry\n    // preview surface (no provider, nothing to edit against) degrades to the same\n    // read-only value display the sibling controls use, instead of crashing with\n    // \"useCollectionView must be used within a <CollectionViewProvider>\".\n    control = hasWorkspaceContext ? (\n      <RichTextEditor\n        id={id}\n        value={current}\n        onChange={(next) => applyRichTextPropChange(next, { onSet, onClear })}\n        allow={spec.type === 'richText' ? spec.allow : undefined}\n      />\n    ) : (\n      <WorkspaceValueFallback value={current} />\n    )\n  } else if (kind === 'textarea') {\n    control = (\n      <textarea\n        id={id}\n        rows={2}\n        value={typeof current === 'string' ? current : ''}\n        onChange={(e) => onSet(e.target.value)}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n    )\n  } else if (kind === 'asset' || kind === 'object' || kind === 'relation') {\n    // EC-195/EC-253/EC-262: reuse the CMS field control. `asset` = library picker +\n    // preview; `object` = the nested/repeater form; `relation` = the document picker\n    // (resolves the ref to its title, instead of stringifying it to \"[object Object]\").\n    // All edit a structured static prop value through the same shared control documents use.\n    // Without a workspace context (the Components preview), degrade to a read-only\n    // value display so the pane renders instead of throwing.\n    control = hasWorkspaceContext ? (\n      <FieldDensityProvider density=\"compact\">\n        <FieldControl\n          id={id}\n          field={{ ...spec, name } as FieldDef}\n          value={current}\n          onChange={(v) => (v === undefined || v === null ? onClear() : onSet(v as JsonValue))}\n          readOnly={false}\n        />\n      </FieldDensityProvider>\n    ) : (\n      <WorkspaceValueFallback value={current} />\n    )\n  } else {\n    control = (\n      <Input\n        id={id}\n        value={typeof current === 'string' ? current : String(current ?? '')}\n        onChange={(e) => onSet(e.target.value)}\n      />\n    )\n  }\n\n  return (\n    <Stack gap=\"1\">\n      {control}\n      {!valid ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {translate('builder.inspector.invalidValue')}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n\n/**\n * Read-only stand-in for an `asset`/`relation`/`object` prop when there is no\n * ambient `CollectionViewSource` (the component-registry preview, which has no\n * document/collection context). Shows the current value and a hint that it is\n * editable inside a document — never the live picker, which needs a workspace.\n */\nfunction WorkspaceValueFallback({ value }: { value: JsonValue | undefined }) {\n  const text =\n    value === undefined || value === null\n      ? '—'\n      : typeof value === 'string'\n        ? value\n        : JSON.stringify(value)\n  return (\n    <Stack gap=\"1\">\n      <div className=\"truncate rounded-md border border-input bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground\">\n        {text}\n      </div>\n      <Text size=\"xs\" tone=\"muted\">\n        {translate('components.preview.propNeedsDocument')}\n      </Text>\n    </Stack>\n  )\n}\n\n/** Number input with a local buffer: commits only finite values, never NaN; empty clears the prop. */\nfunction NumberControl({\n  id,\n  current,\n  onSet,\n  onClear,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: number) => void\n  onClear: () => void\n}) {\n  const [raw, setRaw] = useState(typeof current === 'number' ? String(current) : '')\n  useEffect(() => {\n    setRaw(typeof current === 'number' ? String(current) : '')\n  }, [current])\n  return (\n    <Input\n      id={id}\n      type=\"number\"\n      value={raw}\n      onChange={(e) => {\n        const v = e.target.value\n        setRaw(v)\n        if (v.trim() === '') {\n          onClear()\n          return\n        }\n        const n = Number(v)\n        if (Number.isFinite(n)) onSet(n)\n      }}\n    />\n  )\n}\n\n/** JSON textarea with a local buffer: commits only when the text parses; flags parse errors. */\nfunction JsonControl({\n  id,\n  current,\n  onSet,\n}: {\n  id: string\n  current: JsonValue | undefined\n  onSet: (v: JsonValue) => void\n}) {\n  const [raw, setRaw] = useState(() => JSON.stringify(current ?? null))\n  const [error, setError] = useState<string | null>(null)\n  useEffect(() => {\n    setRaw(JSON.stringify(current ?? null))\n    setError(null)\n  }, [current])\n  return (\n    <Stack gap=\"1\">\n      <textarea\n        id={id}\n        rows={3}\n        value={raw}\n        onChange={(e) => {\n          const v = e.target.value\n          setRaw(v)\n          try {\n            onSet(JSON.parse(v) as JsonValue)\n            setError(null)\n          } catch {\n            setError(translate('builder.inspector.invalidJson'))\n          }\n        }}\n        className=\"flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 outline-none\"\n      />\n      {error ? (\n        <Text size=\"xs\" className=\"text-destructive\">\n          {error}\n        </Text>\n      ) : null}\n    </Stack>\n  )\n}\n"]}

package/dist/components/cms/rich-text/editor.d.ts

@@ -24,4 +24,12 @@ interface RichTextEditorProps {
  * toolbar buttons and the `/` slash menu open the same modal — one insertion path.
  */
 export declare function RichTextEditor({ value, onChange, readOnly, id, allow }: RichTextEditorProps): import("react").JSX.Element | null;
+/**
+ * The inline strip shown in the field row while the editor is expanded into its
+ * sheet (the real editing surface lives in the sheet then). Clicking it returns —
+ * so the collapsed field never appears as a broken empty box.
+ */
+export declare function RichTextExpandPlaceholder({ onCollapse }: {
+    onCollapse: () => void;
+}): import("react").JSX.Element;
 export {};

package/dist/components/cms/rich-text/editor.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { EditorContent, useEditor } from '@tiptap/react';
+import { Minimize2, X } from 'lucide-react';
+import { Button, Heading, Row, Spacer, Text } from '@elytracms/studio/ui';
 import { cn } from '@elytracms/studio/lib/utils';
-import { localizedLabel } from '@elytracms/studio/lib/i18n';
+import { localizedLabel, translate } from '@elytracms/studio/lib/i18n';
 import { useOptionalCollectionView } from '../../collection-view/collection-view-context.js';
 import { useOptionalAssets } from '../../assets/assets-store.js';
 import { AssetPicker } from '../asset-picker.js';
@@ -35,6 +38,8 @@ export function RichTextEditor({ value, onChange, readOnly = false, id, allow })
     const assets = useOptionalAssets();
     const [imageOpen, setImageOpen] = useState(false);
     const [embedOpen, setEmbedOpen] = useState(false);
+    // EC-388: whether the editor is promoted to its roomy expand sheet.
+    const [expanded, setExpanded] = useState(false);
     const canImage = assets != null;
     // The `allow`-gated components this field may embed — drives both the toolbar
     // picker and the slash menu's direct per-component items (0.0.41).
@@ -121,10 +126,48 @@ export function RichTextEditor({ value, onChange, readOnly = false, id, allow })
     }, [editor, readOnly]);
     if (!editor)
         return null;
-    return (_jsxs("div", { className: cn('ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm', 'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40', readOnly && 'opacity-70'), children: [!readOnly ? (_jsx(RichTextToolbar, { editor: editor, targets: linkTargets, onOpenImage: openImage, onOpenEmbed: openEmbed })) : null, _jsx(EditorContent, { editor: editor }), canImage ? (_jsx(AssetPicker, { open: imageOpen, onOpenChange: setImageOpen, value: null, accept: "image/*", onChange: (assetId) => {
+    // The editing surface — the toolbar (which carries the expand toggle) + the
+    // editable content. Mounted inline OR inside the expand sheet, never both. TipTap
+    // preserves the editor instance across `EditorContent` remounts (its view DOM is
+    // carried onto the new element), so relocating this surface keeps ONE editor
+    // document and ONE value flow — the same instance, grown, not a second form.
+    const surface = (_jsxs(_Fragment, { children: [!readOnly ? (_jsx(RichTextToolbar, { editor: editor, targets: linkTargets, onOpenImage: openImage, onOpenEmbed: openEmbed, expanded: expanded, onToggleExpand: () => setExpanded((v) => !v) })) : null, _jsx(EditorContent, { editor: editor, className: cn(expanded && 'min-h-0 flex-1 overflow-y-auto') })] }));
+    return (_jsxs("div", { className: cn('ec-rte overflow-hidden rounded-md border border-input bg-background shadow-sm', 'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40', readOnly && 'opacity-70'), children: [expanded ? (_jsxs(_Fragment, { children: [_jsx(RichTextExpandPlaceholder, { onCollapse: () => setExpanded(false) }), _jsx(RichTextExpandSheet, { onCollapse: () => setExpanded(false), children: surface })] })) : (surface), canImage ? (_jsx(AssetPicker, { open: imageOpen, onOpenChange: setImageOpen, value: null, accept: "image/*", onChange: (assetId) => {
                     setImageOpen(false);
                     if (assetId)
                         insertAssetImage(editor, assetId, assets);
                 } })) : null, canEmbed ? (_jsx(EmbedPicker, { open: embedOpen, onOpenChange: setEmbedOpen, allow: allow, onSelect: (manifest) => insertComponentEmbed(editor, manifest, { select: true }) })) : null] }));
 }
+/**
+ * The inline strip shown in the field row while the editor is expanded into its
+ * sheet (the real editing surface lives in the sheet then). Clicking it returns —
+ * so the collapsed field never appears as a broken empty box.
+ */
+export function RichTextExpandPlaceholder({ onCollapse }) {
+    return (_jsxs("button", { type: "button", onClick: onCollapse, className: "flex min-h-[8rem] w-full items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground transition-colors hover:bg-muted/40", children: [_jsx(Minimize2, { className: "size-4" }), _jsx(Text, { size: "sm", tone: "muted", children: translate('richText.expand.editingInSheet') })] }));
+}
+/**
+ * EC-388 — the expanded editing surface: the SAME editor, grown into a roomy,
+ * full-height right-anchored sheet where long prose (a privacy statement, a
+ * Freeform block) is comfortable to edit. Rendered through a portal (per EC-382's
+ * `ProposalReviewSheet`) so it escapes narrow inspectors/sidebars and any
+ * transformed ancestor. It is the same edit surface, not a second form: no
+ * save/cancel of its own — edits flow through the editor's existing value contract,
+ * and it is lightly dismissible (Escape / backdrop / the toolbar's collapse toggle
+ * / the header close), the forms-never-modal spirit applied. The `children` are the
+ * live toolbar + `EditorContent`; unmounting them here returns the editor inline.
+ */
+function RichTextExpandSheet({ children, onCollapse, }) {
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onCollapse();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [onCollapse]);
+    if (typeof document === 'undefined')
+        return null;
+    return createPortal(_jsxs("div", { className: "fixed inset-0 z-50 flex", children: [_jsx("div", { className: "flex-1 bg-background/70 backdrop-blur-sm", "aria-hidden": true, onClick: onCollapse }), _jsxs("aside", { role: "dialog", "aria-label": translate('richText.expand.title'), className: "flex h-full w-[min(820px,92vw)] flex-col border-l border-border bg-card shadow-2xl", children: [_jsxs(Row, { gap: "2", align: "center", className: "h-12 shrink-0 border-b border-border px-4", children: [_jsx(Heading, { level: 2, size: "h4", className: "min-w-0 truncate", children: translate('richText.expand.title') }), _jsx(Spacer, {}), _jsx(Button, { size: "icon-sm", variant: "ghost", onClick: onCollapse, title: translate('richText.expand.collapse'), "aria-label": translate('richText.expand.collapse'), children: _jsx(X, {}) })] }), _jsx("div", { className: "ec-rte flex min-h-0 flex-1 flex-col overflow-hidden bg-background", children: children })] })] }), document.body);
+}
 //# sourceMappingURL=editor.js.map