@jbpark/live-editor 4.1.0 → 4.2.0

package/dist/{dnd-D_rG92-R.js → dnd-DBaH2L8N.js}

@@ -1,15 +1,18 @@
-import { D as fillSectionIds, E as createSectionPreviewCache, I as nanoid, K as __toESM, L as require_lib, U as DRAGGABLE_ITEMS, _ as parseArrayExpression, a as findEditableChildren, c as parseBinding, d as canLosslesslyEvaluateSource, m as extractObjectProperties, n as extract, o as getCurrentValue, p as extractNodeValue, s as getStructuredValue, v as parseValue, z as BINDING_PROP } from "./extract-abHYmNsu.js";
-import { c as generateSection, d as preloadScripts, i as cn, p as replaceSections, s as extractSections } from "./utils-BQ7WL7Jh.js";
+import { _ as __toESM, c as inspectDocument, h as require_lib, n as createSectionPreviewCache, p as nanoid, r as fillSectionIds } from "./document-C3eCRQlj.js";
+import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, t as BINDING_PROP } from "./constants-CKvdqZtO.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { _ as moveSelectedIndices, c as appendArrayItem, d as moveArrayItems, g as canStructurallyEditArray, h as updateArrayItemValue, i as replaceIds, l as duplicateArrayItems, m as updateArrayItemProperty, o as update, p as removeArrayItems, r as fillIds, s as getChildrenSignatures, t as validateBindingValue, u as moveArrayItem } from "./ast-CZwpVrJv.js";
-import { i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-SOgrb2qc.js";
-import { t as Core } from "./core-Co8Nlq16.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-C90q3YsT.js";
+import { A as extractObjectProperties, C as getStructuredValue, D as canLosslesslyEvaluateSource, M as parseArrayExpression, N as parseValue, S as getCurrentValue, _ as updateArrayItemProperty, b as moveSelectedIndices, c as getChildrenSignatures, d as appendArrayItem, f as duplicateArrayItems, g as removeArrayItems, i as replaceIds, k as extractNodeValue, m as moveArrayItems, p as moveArrayItem, r as fillIds, s as updateAll, t as validateBindingValue, u as extract, v as updateArrayItemValue, w as parseBinding, x as findEditableChildren, y as canStructurallyEditArray } from "./ast-CMD20ykx.js";
+import { t as cn } from "./cn-CAnad2vL.js";
+import { o as preloadScripts } from "./compile-0Dvp8zp5.js";
+import { a as Frame, i as useStableModules, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-BDfytfYC.js";
+import { t as Core } from "./core-B3ruccKb.js";
+import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-A4TAXUP8.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-D2IFja-3.js";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, Toast, Typography } from "@jbpark/ui-kit";
 import { useDebounce, useMultiSelect, useResponsiveSize } from "@jbpark/use-hooks";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronUp, Copy, LayoutGrid, Plus, Trash, X } from "lucide-react";
@@ -67,9 +70,16 @@ const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__
 		ref,
 		style: { opacity: isDragging ? .5 : 1 },
 		...dragProps,
-		className: cn("cursor-grab", "outline-none", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		className: cn("cursor-grab", "outline-none focus-visible:ring-2 focus-visible:ring-blue-500", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
 		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
 		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
+		onKeyDown: (event) => {
+			dragProps.onKeyDown?.(event);
+			if (onAdd && event.key === "Enter" && event.target === event.currentTarget && !event.defaultPrevented) {
+				event.preventDefault();
+				onAdd(item);
+			}
+		},
 		children: item.name
 	})
 });
@@ -88,9 +98,11 @@ const useDndLayout = () => useDndRegions("useDndLayout()");
 //#region src/components/dnd/panel-binding.ts
 const readAttribute = (node, name) => node.dataAttributes.find((attribute) => attribute.name === name)?.value;
 const canEditBindingValue = (node, binding) => {
+	if (RESERVED_BINDING_PROPERTIES.includes(binding.property)) return false;
 	if (binding.property === "children" || binding.property === "innerText" || binding.property === "innerHTML" || binding.property === "items" || binding.property === "data" || binding.type === "array" || binding.type === "jsx" || binding.type === "richtext") return true;
 	const attribute = node.attributes.find((candidate) => candidate.name === binding.property);
-	return attribute?.isStringLiteral === true || canLosslesslyEvaluateSource(attribute?.value ?? "");
+	if (!attribute) return true;
+	return attribute.isStringLiteral === true || canLosslesslyEvaluateSource(attribute?.value ?? "");
 };
 const toBindingFields = (binding) => ({
 	label: binding.label,
@@ -121,12 +133,19 @@ const resolveRenderEntry = (render, key) => {
 		render: entry
 	};
 };
+const CONTENT_PROPERTIES = /* @__PURE__ */ new Set([
+	"innerText",
+	"innerHTML",
+	"children"
+]);
+const isAttributeAbsent = (node, binding) => !CONTENT_PROPERTIES.has(binding.property) && !node.attributes.some((candidate) => candidate.name === binding.property);
 const toPanelBindingData = (node, id, binding) => ({
 	...toBindingFields(binding),
 	id,
 	value: getStructuredValue(node, binding.property, binding.type),
 	rawValue: getCurrentValue(node, binding.property),
-	...!canEditBindingValue(node, binding) && { canEditValue: false }
+	...!canEditBindingValue(node, binding) && { canEditValue: false },
+	...isAttributeAbsent(node, binding) && { present: false }
 });
 const resolvePanelBindings = (node) => {
 	const id = readAttribute(node, "data-id");
@@ -263,7 +282,7 @@ const useStructuralSelection = (count, revision) => {
 	};
 };
 //#endregion
-//#region src/components/dnd/panel/use-children-editor.ts
+//#region src/components/dnd/panel/use-dnd-children.ts
 const producedBy = (expected, action) => {
 	if (action.type === "move-selected") {
 		const moved = JSON.stringify(moveSelectedIndices(expected, new Set(action.indices), action.direction).items);
@@ -275,7 +294,7 @@ const producedBy = (expected, action) => {
 		return next.length === expected.length + added && expected.every((signature, index) => next[index] === signature);
 	};
 };
-const useChildrenEditor = (items, { onChange } = {}) => {
+const useDndChildren = (items, { onChange } = {}) => {
 	const expected = useMemo(() => getChildrenSignatures(items), [items]);
 	const revision = JSON.stringify(expected);
 	const { selection, record } = useStructuralSelection(items.length, revision);
@@ -323,7 +342,7 @@ const useChildrenEditor = (items, { onChange } = {}) => {
 //#region src/components/dnd/panel/children.tsx
 const Children$1 = ({ value, onChange, onNodeChange }) => {
 	const items = useMemo(() => Array.isArray(value) ? value : [], [value]);
-	const { selection, actions } = useChildrenEditor(items, { onChange });
+	const { selection, actions } = useDndChildren(items, { onChange });
 	const editableChildrenMap = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
 		items.forEach((item, index) => {
@@ -447,7 +466,40 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/use-items-editor.ts
+//#region src/components/dnd/panel/field-kind.ts
+const isColorProperty = (property) => property.toLowerCase().includes("color");
+const getFieldKind = (binding) => {
+	const { property, type, value } = binding;
+	if (binding.canEditValue === false) return "readonly";
+	if (property === "items" || property === "data" || type === "array") return "items";
+	if (type === "richtext") return "richtext";
+	if (property === BINDING_PROP.INNER_HTML) return "html";
+	if (type === "jsx") return "jsx";
+	if (property === "children" && Array.isArray(value)) return "children";
+	if (typeof value === "object" && value !== null && !Array.isArray(value)) return "object";
+	if (type === "boolean" || typeof value === "boolean") return "boolean";
+	if (binding.options && Array.isArray(binding.options)) return "select";
+	if (type === "color" || isColorProperty(property)) return "color";
+	if (type === "date") return "date";
+	if (type === "url") return "url";
+	if (type === "number" || typeof value === "number") return "number";
+	return "text";
+};
+const isStructuralFieldKind = (kind) => kind === "items" || kind === "children";
+//#endregion
+//#region src/components/dnd/panel/use-dnd-items.ts
+const createPendingCommit = () => {
+	let current = null;
+	return {
+		read: () => current,
+		write: (next) => {
+			current = next;
+		},
+		clear: () => {
+			current = null;
+		}
+	};
+};
 const bindingsInJSX = (source) => {
 	const nodes = extract(source);
 	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
@@ -545,7 +597,7 @@ const moveId = (ids, from, to) => {
 const removeIds = (ids, indices) => {
 	return ids.filter((_, index) => !indices.has(index));
 };
-const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
+const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
 	const canEditStructure = useMemo(() => canStructurallyEditArray(value), [value]);
 	const { reportError } = useDndEditOptions();
@@ -572,7 +624,33 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 		value
 	]);
 	const { selection, record } = useStructuralSelection(isPrimitive ? primitiveItems.length : objectItems.length, value);
-	const commit = (next, nextIds, nextSelection) => {
+	const [pending] = useState(createPendingCommit);
+	useEffect(() => {
+		pending.clear();
+	});
+	const latest = () => {
+		const last = pending.read();
+		if (last?.from !== value) return {
+			value,
+			items: rawItems,
+			ids: identity.ids,
+			selected: selection.selected
+		};
+		const parsed = parseSource(last.value);
+		return {
+			value: last.value,
+			items: isPrimitive ? parsed.primitiveItems : parsed.objectItems,
+			ids: last.ids,
+			selected: last.selected
+		};
+	};
+	const locate = (snapshot, elementIndex) => {
+		const shown = rawItems.find((item) => item.elementIndex === elementIndex);
+		if (!shown) return;
+		const index = snapshot.ids.indexOf(identity.ids[shown.index]);
+		return index >= 0 ? snapshot.items[index] : null;
+	};
+	const commit = (snapshot, next, nextIds, nextSelection) => {
 		if (next === null) {
 			reportError({
 				type: "items",
@@ -583,17 +661,30 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 		}
 		const parsed = parseSource(next);
 		const nextItems = kind === "primitive" ? parsed.primitiveItems : parsed.objectItems;
-		if (nextIds) setIdentityState(createIdentityState(next, kind, nextItems, nextIds));
-		else setIdentityState(createIdentityState(next, kind, nextItems, identity.ids));
+		const ids = nextIds ?? snapshot.ids;
+		pending.write({
+			from: value,
+			value: next,
+			ids,
+			selected: nextSelection
+		});
+		setIdentityState(createIdentityState(next, kind, nextItems, ids));
 		record(nextSelection, (revision) => revision === next, { now: true });
 		onChange?.(next);
 		return true;
 	};
-	const elementIndicesOf = (indices) => {
-		return new Set((isPrimitive ? primitiveItems : objectItems).filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
-	};
+	const elementIndicesOf = (snapshot, indices) => new Set(snapshot.items.filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
 	const updateProperty = (elementIndex, propertyKey, next) => {
-		commit(updateArrayItemProperty(value, elementIndex, propertyKey, next, render), void 0, new Set(selection.selected));
+		const snapshot = latest();
+		const item = locate(snapshot, elementIndex);
+		if (item === null) return;
+		commit(snapshot, updateArrayItemProperty(snapshot.value, item?.elementIndex ?? elementIndex, propertyKey, next, render), void 0, new Set(snapshot.selected));
+	};
+	const updateValue = (elementIndex, next) => {
+		const snapshot = latest();
+		const item = locate(snapshot, elementIndex);
+		if (item === null) return;
+		commit(snapshot, updateArrayItemValue(snapshot.value, item?.elementIndex ?? elementIndex, next), void 0, new Set(snapshot.selected));
 	};
 	return {
 		kind,
@@ -610,7 +701,7 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				value: item.value ?? "",
 				rawValue: item.type === "unknown" ? item.source : String(item.value ?? ""),
 				canEditValue: canLosslesslyEvaluateSource(item.source),
-				onChange: (next) => commit(updateArrayItemValue(value, item.elementIndex, next), void 0, new Set(selection.selected))
+				onChange: (next) => updateValue(item.elementIndex, next)
 			}
 		})) : objectItems.map((item) => {
 			const id = identity.ids[item.index] ?? item.id;
@@ -666,41 +757,47 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 		selection,
 		actions: {
 			add: () => {
-				const next = appendArrayItem(value, kind);
-				commit(next, next ? [...identity.ids, nanoid(6)] : void 0, selectionAfter({ type: "append" }, selection.selected, rawItems.length));
+				const snapshot = latest();
+				const next = appendArrayItem(snapshot.value, kind);
+				commit(snapshot, next, next ? [...snapshot.ids, nanoid(6)] : void 0, selectionAfter({ type: "append" }, snapshot.selected, snapshot.items.length));
 			},
 			move: (elementIndex, toIndex) => {
-				const items = isPrimitive ? primitiveItems : objectItems;
-				const from = items.find((item) => item.elementIndex === elementIndex);
-				const target = items.find((item) => item.index === toIndex);
+				const snapshot = latest();
+				const from = locate(snapshot, elementIndex);
+				const target = snapshot.items.find((item) => item.index === toIndex);
 				if (!from || !target) return;
-				commit(moveArrayItem(value, elementIndex, target.elementIndex), moveId(identity.ids, from.index, target.index), /* @__PURE__ */ new Set());
+				commit(snapshot, moveArrayItem(snapshot.value, from.elementIndex, target.elementIndex), moveId(snapshot.ids, from.index, target.index), /* @__PURE__ */ new Set());
 			},
 			remove: (elementIndex) => {
-				const removed = (isPrimitive ? primitiveItems : objectItems).find((item) => item.elementIndex === elementIndex);
-				commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind), removed ? removeIds(identity.ids, /* @__PURE__ */ new Set([removed.index])) : void 0, /* @__PURE__ */ new Set());
+				const snapshot = latest();
+				const removed = locate(snapshot, elementIndex);
+				if (removed === null) return;
+				commit(snapshot, removeArrayItems(snapshot.value, /* @__PURE__ */ new Set([removed?.elementIndex ?? elementIndex]), kind), removed ? removeIds(snapshot.ids, /* @__PURE__ */ new Set([removed.index])) : void 0, /* @__PURE__ */ new Set());
 			},
 			duplicateSelected: () => {
-				const selected = elementIndicesOf(selection.selected);
-				const next = duplicateArrayItems(value, selected);
-				const copied = rawItems.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
-				commit(next, next ? [...identity.ids, ...copied] : void 0, selectionAfter({
+				const snapshot = latest();
+				const selected = elementIndicesOf(snapshot, snapshot.selected);
+				const next = duplicateArrayItems(snapshot.value, selected);
+				const copied = snapshot.items.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
+				commit(snapshot, next, next ? [...snapshot.ids, ...copied] : void 0, selectionAfter({
 					type: "duplicate",
-					indices: [...selection.selected]
-				}, selection.selected, rawItems.length));
+					indices: [...snapshot.selected]
+				}, snapshot.selected, snapshot.items.length));
 			},
 			moveSelected: (direction) => {
-				const nextIdentity = moveSelectedIndices(identity.ids, selection.selected, direction);
-				const result = moveArrayItems(value, elementIndicesOf(selection.selected), direction);
+				const snapshot = latest();
+				const nextIdentity = moveSelectedIndices(snapshot.ids, snapshot.selected, direction);
+				const result = moveArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), direction);
 				if (!result) {
-					commit(null, void 0, selection.selected);
+					commit(snapshot, null, void 0, snapshot.selected);
 					return;
 				}
 				const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => import_lib.isExpression(node) && import_lib.isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
-				commit(result.code, nextIdentity.items, new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
+				commit(snapshot, result.code, nextIdentity.items, new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
 			},
 			removeSelected: () => {
-				commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind), removeIds(identity.ids, selection.selected), /* @__PURE__ */ new Set());
+				const snapshot = latest();
+				commit(snapshot, removeArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), kind), removeIds(snapshot.ids, snapshot.selected), /* @__PURE__ */ new Set());
 			}
 		},
 		canEditStructure,
@@ -766,7 +863,7 @@ const NestedGroup = ({ group, onNodeChange }) => {
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { kind, items, selection, actions, canEditStructure, parseError } = useItemsEditor(value, {
+	const { kind, items, selection, actions, canEditStructure, parseError } = useDndItems(value, {
 		render,
 		onChange,
 		onNodeChange: onChildChange
@@ -932,9 +1029,6 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 };
 //#endregion
 //#region src/components/dnd/panel/field.tsx
-const isColorProperty = (propertyName) => {
-	return propertyName.toLowerCase().includes("color");
-};
 const normalizeToHex = (value) => {
 	const trimmed = value.trim();
 	if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(trimmed)) return trimmed;
@@ -1021,6 +1115,10 @@ const ColorPickerField = ({ value, onChange }) => {
 		}
 	});
 };
+const FieldError = ({ message }) => message ? /* @__PURE__ */ jsx("p", {
+	className: "mt-1 mb-0 text-xs text-red-500",
+	children: message
+}) : null;
 const BuiltinField = ({ binding, onNodeChange }) => {
 	const { id, value, rawValue, onChange } = binding;
 	const [validationError, setValidationError] = useState(null);
@@ -1030,7 +1128,8 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 		setPrevRawValue(rawValue);
 		setText(rawValue);
 	}
-	if (binding.canEditValue === false) return /* @__PURE__ */ jsxs("div", {
+	const kind = getFieldKind(binding);
+	if (kind === "readonly") return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-1 rounded border border-dashed border-amber-200 p-3\n          text-xs text-amber-700",
 		children: [
 			/* @__PURE__ */ jsx("div", { children: "This expression is preserved but is not editable here." }),
@@ -1044,31 +1143,28 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	const commitIfChanged = (next) => {
 		if (next !== (typeof next === "string" ? rawValue : value)) onChange(next);
 	};
-	if (binding.property === "items" || binding.property === "data" || binding.type === "array") return /* @__PURE__ */ jsx(Items, {
+	if (kind === "items") return /* @__PURE__ */ jsx(Items, {
 		value: rawValue,
 		render: binding.render,
 		onChange,
 		onChildChange: onNodeChange
 	});
-	if (binding.type === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
+	if (kind === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
 		value: rawValue,
 		toolbar: RICHTEXT_TOOLBAR,
 		onChange: commitIfChanged
 	});
-	if (binding.property === BINDING_PROP.INNER_HTML || binding.type === "jsx") {
-		const isHTML = binding.property === BINDING_PROP.INNER_HTML;
-		return /* @__PURE__ */ jsx(JSXEditorField, {
-			value: rawValue,
-			isHTML,
-			onSave: commitIfChanged
-		});
-	}
-	if (binding.property === "children" && Array.isArray(value)) return /* @__PURE__ */ jsx(Children$1, {
+	if (kind === "html" || kind === "jsx") return /* @__PURE__ */ jsx(JSXEditorField, {
+		value: rawValue,
+		isHTML: kind === "html",
+		onSave: commitIfChanged
+	});
+	if (kind === "children") return /* @__PURE__ */ jsx(Children$1, {
 		value,
 		onChange,
 		onNodeChange
 	});
-	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+	if (kind === "object") {
 		const objectValue = value;
 		return /* @__PURE__ */ jsx("div", {
 			className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
@@ -1098,23 +1194,23 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 			})
 		});
 	}
-	if (binding.type === "boolean" || typeof value === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
+	if (kind === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
 		checked: value === true || value === "true",
 		onChange: (checked) => {
 			onChange(checked);
 		}
 	});
 	const stringValue = rawValue;
-	if (binding.options && Array.isArray(binding.options)) return /* @__PURE__ */ jsx(Select, {
+	if (kind === "select") return /* @__PURE__ */ jsx(Select, {
 		value: stringValue,
-		options: binding.options,
+		options: binding.options ?? [],
 		onChange: commitIfChanged
 	});
-	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
+	if (kind === "color") return /* @__PURE__ */ jsx(ColorPickerField, {
 		value: normalizeToHex(stringValue),
 		onChange: commitIfChanged
 	});
-	if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
+	if (kind === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
 		value: parseDateValue(stringValue),
 		onChange: (date) => {
 			const next = date ? formatDateValue(date) : "";
@@ -1126,11 +1222,8 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 			setValidationError(null);
 			commitIfChanged(next);
 		}
-	}), validationError && /* @__PURE__ */ jsx("p", {
-		className: "mt-1 text-xs text-red-500",
-		children: validationError
-	})] });
-	if (binding.type === "url") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
+	if (kind === "url") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
 		type: "url",
 		value: text,
 		onChange: (e) => setText(e.target.value),
@@ -1145,11 +1238,8 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 			setValidationError(null);
 			commitIfChanged(next);
 		}
-	}), validationError && /* @__PURE__ */ jsx("p", {
-		className: "mt-1 text-xs text-red-500",
-		children: validationError
-	})] });
-	if (binding.type === "number" || typeof value === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
+	if (kind === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
 		type: "number",
 		value: text,
 		onChange: (e) => setText(e.target.value),
@@ -1165,10 +1255,7 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 			setValidationError(null);
 			commitIfChanged(next);
 		}
-	}), validationError && /* @__PURE__ */ jsx("p", {
-		className: "mt-1 text-xs text-red-500",
-		children: validationError
-	})] });
+	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input.TextArea, {
 		value: text,
 		onChange: (e) => setText(e.target.value),
@@ -1184,10 +1271,7 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 			setValidationError(null);
 			commitIfChanged(next);
 		}
-	}), validationError && /* @__PURE__ */ jsx("p", {
-		className: "mt-1 text-xs text-red-500",
-		children: validationError
-	})] });
+	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
 };
 const Field = (props) => {
 	const { renderField } = useDndEditOptions();
@@ -1232,7 +1316,7 @@ const groupBindingsById = (bindings) => {
 	}
 	return [...groups.values()];
 };
-const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange }) => {
+const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange, readOnly = false }) => {
 	const groups = groupBindingsById(bindings);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
@@ -1270,6 +1354,11 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 					]
 				})]
 			}),
+			readOnly && /* @__PURE__ */ jsx(Typography.Text, {
+				role: "status",
+				className: "block text-xs text-amber-700",
+				children: "The document has a syntax error. These fields are from the last version that parsed, and can't be edited until it parses again."
+			}),
 			!groups.length && /* @__PURE__ */ jsx(Typography.Text, {
 				className: "text-xs text-gray-400",
 				children: "No editable elements."
@@ -1296,7 +1385,7 @@ const PaletteItems = ({ subject }) => {
 	});
 };
 const PanelFields = ({ subject }) => {
-	const { panel: { item, onDelete, onMoveUp, onMoveDown, canMoveUp, canMoveDown, bindings, onNodeChange } } = useDndRegions(subject);
+	const { panel: { item, onDelete, onMoveUp, onMoveDown, canMoveUp, canMoveDown, bindings, onNodeChange, readOnly } } = useDndRegions(subject);
 	return /* @__PURE__ */ jsx(Panel$1, {
 		item,
 		onDelete,
@@ -1305,7 +1394,8 @@ const PanelFields = ({ subject }) => {
 		canMoveUp,
 		canMoveDown,
 		bindings,
-		onNodeChange
+		onNodeChange,
+		readOnly
 	});
 };
 const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
@@ -1492,8 +1582,14 @@ const arePropsEqual = (prev, next) => {
 var renderer_default = memo(Renderer, arePropsEqual);
 //#endregion
 //#region src/components/dnd/sortable.tsx
-const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy }) => {
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver, active } = useSortable({ id });
+const NAVIGATION_KEYS = {
+	ArrowUp: "previous",
+	ArrowDown: "next",
+	Home: "first",
+	End: "last"
+};
+const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, nodeRef, onNavigate, onDeleteKey }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({ id });
 	const style = {
 		transform: CSS.Transform.toString(transform),
 		transition,
@@ -1501,6 +1597,30 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 		cursor: "grab"
 	};
 	const isNewItemOver = isOver && active?.data.current?.type === "new-item";
+	const onKeyDown = (e) => {
+		listeners?.onKeyDown?.(e);
+		if (e.target !== e.currentTarget || active || e.defaultPrevented) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onClick?.();
+			return;
+		}
+		const to = NAVIGATION_KEYS[e.key];
+		if (to && onNavigate) {
+			e.preventDefault();
+			onNavigate(to);
+			return;
+		}
+		if ((e.key === "Delete" || e.key === "Backspace") && onDeleteKey) {
+			e.preventDefault();
+			onDeleteKey();
+		}
+	};
+	const setRefs = (node) => {
+		setNodeRef(node);
+		setActivatorNodeRef(node);
+		nodeRef?.(node);
+	};
 	const onDelete = (e) => {
 		e.stopPropagation();
 		_onDelete?.(id);
@@ -1510,10 +1630,11 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 		_onCopy?.(id);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		ref: setNodeRef,
+		ref: setRefs,
 		style,
 		...attributes,
 		...listeners,
+		onKeyDown,
 		onClick,
 		className: cn("relative", selected && "z-10 outline-2 outline-offset-2 outline-blue-500", isNewItemOver && "border-t-4 border-t-green-500"),
 		children: [
@@ -1544,7 +1665,7 @@ const Overlay = ({ sections, isForced, renderProps }) => {
 	}
 	const section = sections.find((s) => s.id === active.id);
 	if (section) {
-		const preview = generateSection(section.code, renderProps.fullCode);
+		const preview = generateSection(section.code, renderProps.fullCode, { containerId: renderProps.containerId });
 		return /* @__PURE__ */ jsx(Sortable, {
 			id: section.id,
 			name: section.name,
@@ -1564,29 +1685,100 @@ const Overlay = ({ sections, isForced, renderProps }) => {
 };
 //#endregion
 //#region src/components/dnd/use-section-document.ts
-const useSectionDocument = (value, onChange) => {
+const createLastParsed = () => {
+	let last = null;
+	return {
+		read: (containerId) => last && last.containerId === containerId ? last.document : void 0,
+		write: (containerId, document) => {
+			last = {
+				containerId,
+				document
+			};
+		}
+	};
+};
+const useSectionDocument = (value, onChange, { containerId, sectionNameFallback, onBlockedEdit } = {}) => {
 	const { setCode } = usePreview();
 	const [selectedId, setSelectedId] = useState(null);
-	const document = useMemo(() => fillSectionIds(value), [value]);
-	const sections = useMemo(() => extractSections(document), [document]);
+	const readSections = useCallback((code) => extractSections(code, {
+		containerId,
+		sectionNameFallback
+	}), [containerId, sectionNameFallback]);
+	const document = useMemo(() => fillSectionIds(value, void 0, { containerId }), [containerId, value]);
+	const [lastParsed] = useState(createLastParsed);
+	const view = useMemo(() => {
+		const inspection = inspectDocument(document, { containerId });
+		if (inspection.ok) {
+			lastParsed.write(containerId, document);
+			return {
+				document,
+				problem: null,
+				stale: false
+			};
+		}
+		const { ok: _ok, ...problem } = inspection;
+		const last = problem.reason === "parse-error" ? lastParsed.read(containerId) : void 0;
+		return {
+			document: last ?? document,
+			problem,
+			stale: last !== void 0
+		};
+	}, [
+		containerId,
+		document,
+		lastParsed
+	]);
+	const sections = useMemo(() => readSections(view.document), [readSections, view.document]);
 	const [previewCache] = useState(() => createSectionPreviewCache());
-	const previews = useMemo(() => previewCache.compute(document, sections), [
+	const previews = useMemo(() => previewCache.compute(view.document, sections, { containerId }), [
+		containerId,
 		previewCache,
 		sections,
-		document
+		view.document
 	]);
 	const selectedIndex = sections.findIndex((s) => s.id === selectedId);
 	const selectedItem = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
+	const pendingRef = useRef(null);
+	useEffect(() => {
+		pendingRef.current = null;
+	});
+	const latestDocument = useCallback(() => {
+		const pending = pendingRef.current;
+		return pending?.from === document ? pending.code : document;
+	}, [document]);
+	const latestSections = useCallback(() => readSections(latestDocument()), [latestDocument, readSections]);
 	const commit = useCallback((nextSections) => {
-		const nextCode = fillSectionIds(replaceSections(document, nextSections.map((s) => s.code)));
+		const nextCode = fillSectionIds(replaceSections(latestDocument(), nextSections.map((s) => s.code), { containerId }), void 0, { containerId });
+		pendingRef.current = {
+			from: document,
+			code: nextCode
+		};
 		onChange?.(nextCode);
 		setCode(nextCode);
-		return extractSections(nextCode);
+		return readSections(nextCode);
 	}, [
+		containerId,
 		document,
+		latestDocument,
 		onChange,
+		readSections,
 		setCode
 	]);
+	const getCommittedSection = useCallback((id) => {
+		const pending = pendingRef.current;
+		if (pending?.from !== document) return;
+		return readSections(pending.code).find((s) => s.id === id);
+	}, [document, readSections]);
+	const { problem, stale } = view;
+	const refuse = useCallback(() => {
+		if (!stale || !problem) return false;
+		onBlockedEdit?.(problem);
+		return true;
+	}, [
+		onBlockedEdit,
+		problem,
+		stale
+	]);
 	return {
 		sections,
 		previews,
@@ -1596,54 +1788,91 @@ const useSectionDocument = (value, onChange) => {
 		select: useCallback((id) => {
 			setSelectedId((prev) => prev === id ? null : id);
 		}, []),
+		selectOnly: useCallback((id) => setSelectedId(id), []),
 		clearSelection: useCallback(() => setSelectedId(null), []),
 		add: useCallback((item, atIndex) => {
+			if (refuse()) return;
+			const current = latestSections();
 			const next = { code: item.code };
-			commit(atIndex === void 0 || atIndex < 0 ? [...sections, next] : [
-				...sections.slice(0, atIndex),
+			commit(atIndex === void 0 || atIndex < 0 ? [...current, next] : [
+				...current.slice(0, atIndex),
 				next,
-				...sections.slice(atIndex)
+				...current.slice(atIndex)
 			]);
-		}, [commit, sections]),
+		}, [
+			commit,
+			refuse,
+			latestSections
+		]),
 		remove: useCallback((id) => {
-			const index = sections.findIndex((s) => s.id === id);
+			if (refuse()) return;
+			const current = latestSections();
+			const index = current.findIndex((s) => s.id === id);
 			if (index < 0) return;
 			if (id === selectedId) setSelectedId(null);
-			commit(sections.filter((_, i) => i !== index));
+			commit(current.filter((_, i) => i !== index));
 		}, [
 			commit,
-			sections,
+			refuse,
+			latestSections,
 			selectedId
 		]),
 		copy: useCallback((id) => {
-			const index = sections.findIndex((s) => s.id === id);
-			const source = sections[index];
+			if (refuse()) return;
+			const current = latestSections();
+			const index = current.findIndex((s) => s.id === id);
+			const source = current[index];
 			if (!source) return;
 			const committed = commit([
-				...sections.slice(0, index + 1),
+				...current.slice(0, index + 1),
 				{ code: replaceIds(source.code) },
-				...sections.slice(index + 1)
+				...current.slice(index + 1)
 			]);
 			setSelectedId(committed[index + 1]?.id ?? null);
-		}, [commit, sections]),
+		}, [
+			commit,
+			refuse,
+			latestSections
+		]),
 		move: useCallback((id, direction) => {
-			const index = sections.findIndex((s) => s.id === id);
+			if (refuse()) return;
+			const current = latestSections();
+			const index = current.findIndex((s) => s.id === id);
 			const targetIndex = direction === "up" ? index - 1 : index + 1;
-			if (index < 0 || targetIndex < 0 || targetIndex >= sections.length) return;
-			commit(arrayMove(sections, index, targetIndex));
-		}, [commit, sections]),
+			if (index < 0 || targetIndex < 0 || targetIndex >= current.length) return;
+			commit(arrayMove(current, index, targetIndex));
+		}, [
+			commit,
+			refuse,
+			latestSections
+		]),
 		reorder: useCallback((activeId, overId) => {
-			const prevIndex = sections.findIndex((s) => s.id === activeId);
-			const nextIndex = sections.findIndex((s) => s.id === overId);
+			if (refuse()) return;
+			const current = latestSections();
+			const prevIndex = current.findIndex((s) => s.id === activeId);
+			const nextIndex = current.findIndex((s) => s.id === overId);
 			if (prevIndex < 0 || nextIndex < 0 || prevIndex === nextIndex) return;
-			commit(arrayMove(sections, prevIndex, nextIndex));
-		}, [commit, sections]),
+			commit(arrayMove(current, prevIndex, nextIndex));
+		}, [
+			commit,
+			refuse,
+			latestSections
+		]),
 		patch: useCallback((next) => {
-			commit(sections.map((s) => s.id === next.id ? {
+			if (refuse()) return;
+			const current = latestSections();
+			commit(current.map((s) => s.id === next.id ? {
 				...s,
 				...next
 			} : s));
-		}, [commit, sections])
+		}, [
+			commit,
+			refuse,
+			latestSections
+		]),
+		getCommittedSection,
+		problem,
+		stale
 	};
 };
 //#endregion
@@ -1662,6 +1891,14 @@ const describeUpdateFailure = (failure, label) => {
 			title: `Failed to update "${label}"`,
 			description: `${failure.count} bindings share ${failure.property ? `property "${failure.property}"` : `label "${label}"`} on this element — remove the duplicate in its data-binding.`
 		};
+		case "reserved-property": return {
+			title: `Cannot edit "${label}" in the panel`,
+			description: `"${failure.property}" is managed by the editor, so a binding can't change it.`
+		};
+		case "required-property": return {
+			title: `Cannot remove "${label}"`,
+			description: `"${failure.property}" is marked required in its data-binding, so it can't be removed.`
+		};
 		case "no-binding": return {
 			title: `Failed to update "${label}"`,
 			description: "This element has no data-binding declaration."
@@ -1681,13 +1918,49 @@ const describeUpdateFailure = (failure, label) => {
 		default: return { title: `Failed to update "${label}"` };
 	}
 };
+const KEYBOARD_CODES = {
+	start: ["Space"],
+	cancel: ["Escape"],
+	end: ["Space", "Enter"]
+};
+const SCREEN_READER_INSTRUCTIONS = { draggable: "On a palette item, press Enter to add it to the canvas. On a canvas section, press Enter to select it, the up and down arrow keys to go to the previous or next section, and Delete to remove it. Press Space to pick a section up, the arrow keys to move it, and Space or Enter to drop it. Press Escape to cancel." };
+const createNodeRegistry = () => {
+	const nodes = /* @__PURE__ */ new Map();
+	const callbacks = /* @__PURE__ */ new Map();
+	return {
+		get: (id) => nodes.get(id),
+		register: (id) => {
+			let callback = callbacks.get(id);
+			if (!callback) {
+				callback = (node) => {
+					if (node) nodes.set(id, node);
+					else {
+						nodes.delete(id);
+						callbacks.delete(id);
+					}
+				};
+				callbacks.set(id, callback);
+			}
+			return callback;
+		}
+	};
+};
+const blockedEditError = (error) => ({
+	type: "parse",
+	target: "document",
+	reason: "parse-error",
+	error,
+	title: "The document has a syntax error",
+	description: "The canvas shows the last version that parsed. Fix the error in the code, then edit here again."
+});
 const conditionalModifiers = (args) => {
 	const { active } = args;
 	if (active?.data.current?.type === "new-item") return args.transform;
 	return restrictToVerticalAxis(args);
 };
 const NO_MODULES = {};
-const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }) => {
+const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, children, ...restProps }) => {
+	const modules = useStableModules(_modules);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
 	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
@@ -1700,9 +1973,35 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 			return false;
 		}
 	};
-	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }), useSensor(KeyboardSensor, {
+		coordinateGetter: sortableKeyboardCoordinates,
+		keyboardCodes: KEYBOARD_CODES
+	}));
+	const nameOf = (id, data) => {
+		return (data?.current)?.item?.name ?? sections.find((section) => section.id === id)?.name ?? "section";
+	};
+	const positionOf = (id) => sections.findIndex((section) => section.id === id) + 1;
+	const announcements = {
+		onDragStart: ({ active }) => `Picked up ${nameOf(active.id, active.data)}.`,
+		onDragOver: ({ active, over }) => over && positionOf(over.id) > 0 ? `${nameOf(active.id, active.data)} moved to position ${positionOf(over.id)} of ${sections.length}.` : `${nameOf(active.id, active.data)} is no longer over a position.`,
+		onDragEnd: ({ active, over }) => over && positionOf(over.id) > 0 ? `${nameOf(active.id, active.data)} dropped at position ${positionOf(over.id)} of ${sections.length}.` : `${nameOf(active.id, active.data)} dropped.`,
+		onDragCancel: ({ active }) => `Moving ${nameOf(active.id, active.data)} was cancelled.`
+	};
 	const value = _value === void 0 ? code : _value;
-	const { sections, previews, selectedId, selectedItem, selectedIndex, select, clearSelection, add: addItem, remove: onDelete, copy: onCopy, move: moveSection, reorder, patch } = useSectionDocument(value, _onChange);
+	const reportError = onEditError ?? toastEditError;
+	const reportErrorRef = useRef(reportError);
+	useEffect(() => {
+		reportErrorRef.current = reportError;
+	});
+	const onBlockedEdit = useCallback((problem) => {
+		if (problem.reason === "parse-error") reportErrorRef.current(blockedEditError(problem.error));
+	}, []);
+	const { sections, previews, selectedId, selectedItem, selectedIndex, select, selectOnly, clearSelection, add: addItem, remove, copy: onCopy, move: moveSection, reorder, patch, getCommittedSection, problem, stale } = useSectionDocument(value, _onChange, {
+		containerId,
+		sectionNameFallback,
+		onBlockedEdit
+	});
+	const missingContainer = problem?.reason === "container-not-found" ? problem.containerId : null;
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {
@@ -1717,6 +2016,65 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 		if (active.id !== over.id && sections.some((s) => s.id === active.id)) reorder(String(active.id), String(over.id));
 	};
 	const onSelect = (id) => select(id);
+	const removeRef = useRef(remove);
+	useEffect(() => {
+		removeRef.current = remove;
+	});
+	const requestDelete = (id, onDeleted) => {
+		const section = sections.find((candidate) => candidate.id === id);
+		if (!onBeforeDelete || !section) {
+			remove(id);
+			onDeleted?.();
+			return;
+		}
+		const decide = (allowed) => {
+			if (allowed) {
+				removeRef.current(id);
+				onDeleted?.();
+			}
+		};
+		try {
+			const answer = onBeforeDelete(section);
+			if (typeof answer === "boolean") {
+				decide(answer);
+				return;
+			}
+			answer.then(decide, (error) => {
+				console.error("onBeforeDelete rejected; the section was kept", error);
+			});
+		} catch (error) {
+			console.error("onBeforeDelete threw; the section was kept", error);
+		}
+	};
+	const onDelete = (id) => requestDelete(id);
+	const [sectionNodes] = useState(createNodeRegistry);
+	const focusSection = (id) => sectionNodes.get(id)?.focus();
+	const onNavigate = (fromId, to) => {
+		const from = sections.findIndex((section) => section.id === fromId);
+		const index = to === "first" ? 0 : to === "last" ? sections.length - 1 : from + (to === "next" ? 1 : -1);
+		const target = sections[index];
+		if (from < 0 || !target || target.id === fromId) return;
+		selectOnly(target.id);
+		focusSection(target.id);
+	};
+	const onDeleteKey = (id) => {
+		const index = sections.findIndex((section) => section.id === id);
+		const neighbor = sections[index + 1] ?? sections[index - 1];
+		requestDelete(id, () => {
+			if (neighbor) focusSection(neighbor.id);
+		});
+	};
+	useEffect(() => {
+		if (selectedId === null) return;
+		const frame = requestAnimationFrame(() => {
+			sectionNodes.get(selectedId)?.scrollIntoView?.({ block: "nearest" });
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		sectionNodes,
+		selectedId,
+		selectedIndex
+	]);
 	const onChange = (next) => {
 		if (!next.id) return;
 		patch(next);
@@ -1731,7 +2089,7 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 		try {
 			const updated = fillIds(selectedCode);
 			return {
-				fields: extract(updated).filter((node) => node.tagName !== "section"),
+				fields: extract(updated),
 				updatedCode: updated !== selectedCode ? updated : selectedCode,
 				parseError: null
 			};
@@ -1744,11 +2102,16 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 			};
 		}
 	}, [selectedCode]);
-	const reportError = onEditError ?? toastEditError;
-	const reportErrorRef = useRef(reportError);
 	useEffect(() => {
-		reportErrorRef.current = reportError;
-	});
+		if (missingContainer !== null) reportErrorRef.current({
+			type: "parse",
+			target: "document",
+			reason: "container-not-found",
+			containerId: missingContainer,
+			title: `No #${missingContainer} element in the document`,
+			description: `Sections are the <section> elements inside the element with id="${missingContainer}". Start from createDocument(), or set containerId to match your document.`
+		});
+	}, [missingContainer]);
 	useEffect(() => {
 		if (parseError) reportErrorRef.current({
 			type: "parse",
@@ -1758,9 +2121,21 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 			description: "Check the console for details."
 		});
 	}, [parseError]);
-	const onFieldChange = ({ id, label, property, value: fieldValue }) => {
-		const result = update(updatedCode, id, label, fieldValue, property);
+	const commitChanges = (changes) => {
+		if (changes.length === 0) return;
+		if (stale && problem?.reason === "parse-error") {
+			reportError(blockedEditError(problem.error));
+			return;
+		}
+		const committed = selectedItem && getCommittedSection(selectedItem.id)?.code;
+		const result = updateAll(committed && committed !== selectedCode ? committed : updatedCode, changes.map(({ id, label, property, value: changeValue }) => ({
+			dataId: id,
+			label,
+			property,
+			value: changeValue
+		})));
 		if (!result.success) {
+			const { id, label, property } = changes[result.index];
 			reportError({
 				type: "update",
 				id,
@@ -1776,6 +2151,7 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 			code: result.code
 		});
 	};
+	const onFieldChange = (change) => commitChanges([change]);
 	const bindingFields = useMemo(() => fields.flatMap((node) => resolvePanelBindings(node)?.bindings ?? []), [fields]);
 	const bindings = withPanelCommit(bindingFields, onFieldChange);
 	useEffect(() => {
@@ -1797,13 +2173,35 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 		canMoveUp: selectedIndex > 0,
 		canMoveDown: selectedIndex >= 0 && selectedIndex < sections.length - 1,
 		bindings,
-		onNodeChange: onFieldChange
+		onNodeChange: onFieldChange,
+		onNodesChange: commitChanges,
+		readOnly: stale
 	};
-	const canvas = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Droppable, {
+	const canvas = /* @__PURE__ */ jsxs(Fragment, { children: [stale && /* @__PURE__ */ jsx("div", {
+		role: "status",
+		className: cn("sticky top-0 z-70", "border-b border-amber-200 bg-amber-50 px-3 py-2", "text-sm text-amber-900"),
+		children: "Showing the last version that parsed. Fix the syntax error in the code to edit here again."
+	}), /* @__PURE__ */ jsx(Droppable, {
 		className: cn(!sections.length && "h-full"),
 		children: !sections.length ? /* @__PURE__ */ jsx("div", {
 			className: cn("flex items-center justify-center", "h-full", "text-gray-500"),
-			children: /* @__PURE__ */ jsxs(Space, {
+			children: problem?.reason === "parse-error" ? /* @__PURE__ */ jsxs(Space, {
+				orientation: "vertical",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: "The document has a syntax error" }), /* @__PURE__ */ jsx(Typography.Text, { children: "Fix it in the code to see its sections" })]
+			}) : missingContainer !== null ? /* @__PURE__ */ jsxs(Space, {
+				orientation: "vertical",
+				align: "center",
+				children: [/* @__PURE__ */ jsxs(Typography.Paragraph, { children: [
+					"No #",
+					missingContainer,
+					" element in the document"
+				] }), /* @__PURE__ */ jsxs(Typography.Text, { children: [
+					"Sections go inside the element with id=\"",
+					missingContainer,
+					"\""
+				] })]
+			}) : /* @__PURE__ */ jsxs(Space, {
 				orientation: "vertical",
 				align: "center",
 				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: "No sections available" }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? "Tap a component to add it" : "Drag a component from the left to add it" })]
@@ -1818,6 +2216,9 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 				onClick: () => onSelect(section.id),
 				onDelete,
 				onCopy,
+				nodeRef: sectionNodes.register(section.id),
+				onNavigate: (to) => onNavigate(section.id, to),
+				onDeleteKey: () => onDeleteKey(section.id),
 				children: /* @__PURE__ */ jsx(renderer_default, {
 					preview: previews[index],
 					sectionId: section.id,
@@ -1832,12 +2233,16 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 				})
 			}, section.id))
 		})
-	}) });
+	})] });
 	return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
 		value: renderSectionFallback,
 		children: /* @__PURE__ */ jsxs(DndContext, {
 			sensors,
 			collisionDetection: closestCenter,
+			accessibility: {
+				announcements,
+				screenReaderInstructions: SCREEN_READER_INSTRUCTIONS
+			},
 			modifiers: [conditionalModifiers],
 			onDragStart,
 			onDragOver,
@@ -1859,7 +2264,8 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 							selectedId,
 							clearSelection,
 							paletteOpen: mobilePaletteOpen,
-							setPaletteOpen: setMobilePaletteOpen
+							setPaletteOpen: setMobilePaletteOpen,
+							documentError: problem?.reason ?? null
 						},
 						children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
 					})
@@ -1872,7 +2278,8 @@ const Dnd$1 = ({ value: _value, props, modules = NO_MODULES, onChange: _onChange
 					modules,
 					frame,
 					dynamicTailwind,
-					...props
+					...props,
+					containerId
 				}
 			}) })]
 		})
@@ -1887,7 +2294,11 @@ Dnd.Palette = Palette;
 Dnd.Canvas = Canvas;
 Dnd.Panel = Panel;
 Dnd.Layout = Layout;
+/** @deprecated Renamed to `useDndItems`. */
+const useItemsEditor = useDndItems;
+/** @deprecated Renamed to `useDndChildren`. */
+const useChildrenEditor = useDndChildren;
 //#endregion
-export { Panel as a, useChildrenEditor as c, useDndPanel as d, DraggableItem as f, Palette as i, useDndLayout as l, Canvas as n, Field as o, Layout as r, useItemsEditor as s, Dnd as t, useDndPalette as u };
+export { useDndPanel as _, Layout as a, Field as c, isStructuralFieldKind as d, useDndChildren as f, useDndPalette as g, useDndLayout as h, Canvas as i, useDndItems as l, withPanelCommit as m, useChildrenEditor as n, Palette as o, resolvePanelBindings as p, useItemsEditor as r, Panel as s, Dnd as t, getFieldKind as u, DraggableItem as v };
 
-//# sourceMappingURL=dnd-D_rG92-R.js.map
+//# sourceMappingURL=dnd-DBaH2L8N.js.map