@jbpark/live-editor 4.1.1 → 4.3.0

package/dist/{dnd-CMrXfD8O.js → dnd-Z1KS16Fy.js}

@@ -1,22 +1,23 @@
-import { d as nanoid, h as __toESM, n as createSectionPreviewCache, p as require_lib, r as fillSectionIds } from "./document-C5Dypv4_.js";
-import { a as DRAGGABLE_ITEMS, t as BINDING_PROP } from "./constants-BD3FZKWE.js";
+import { S as require_lib, _ as nanoid, c as inspectDocument, h as replaceIds, m as fillIdsFrom, n as createSectionPreviewCache, r as fillSectionIds, w as __toESM } from "./document-cEEdFERz.js";
+import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-CKvdqZtO.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { C as parseBinding, E as canLosslesslyEvaluateSource, M as parseValue, O as extractNodeValue, S as getStructuredValue, _ as updateArrayItemValue, b as findEditableChildren, d as duplicateArrayItems, f as moveArrayItem, g as updateArrayItemProperty, h as removeArrayItems, i as replaceIds, j as parseArrayExpression, k as extractObjectProperties, l as extract, o as update, p as moveArrayItems, r as fillIds, s as getChildrenSignatures, t as validateBindingValue, u as appendArrayItem, v as canStructurallyEditArray, x as getCurrentValue, y as moveSelectedIndices } from "./ast-jab6hQrT.js";
+import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, _ as moveSelectedIndices, a as getChildrenSignatures, b as getStructuredValue, c as appendArrayItem, d as moveArrayItems, g as canStructurallyEditArray, h as updateArrayItemValue, i as updateAll, k as parseArrayExpression, l as duplicateArrayItems, m as updateArrayItemProperty, p as removeArrayItems, s as extract, t as validateBindingValue, u as moveArrayItem, v as findEditableChildren, w as canLosslesslyEvaluateSource, x as parseBinding, y as getCurrentValue } from "./ast-BFbDWO-l.js";
 import { t as cn } from "./cn-CAnad2vL.js";
-import { o as preloadScripts } from "./compile-CBOAtQMz.js";
-import { a as Frame, i as useStableModules, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-DuGLeDR3.js";
-import { t as Core } from "./core-DaXVtvH5.js";
-import { i as replaceSections, n as generateSection, t as extractSections } from "./sections-B7dWoNVJ.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-D2IFja-3.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-DpbjmATF.js";
+import { t as Core } from "./core-B3ruccKb.js";
+import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-GJQ63uEB.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-B17cepvm.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 { restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+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";
-import { CSS } from "@dnd-kit/utilities";
+import { createPortal } from "react-dom";
+import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, ChevronUp, Copy, Crosshair, GripVertical, LayoutGrid, Plus, Trash, X } from "lucide-react";
+import { CSS as CSS$1 } from "@dnd-kit/utilities";
 //#region src/components/dnd/droppable.tsx
 var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
 const Droppable = ({ children, className }) => {
@@ -46,6 +47,64 @@ const toastEditError = (error) => {
 const DndEditOptionsContext = createContext({ reportError: toastEditError });
 const useDndEditOptions = () => useContext(DndEditOptionsContext);
 //#endregion
+//#region src/components/dnd/inspector.ts
+const DndInspectorContext = createContext(null);
+const useDndInspector = () => {
+	const inspector = useContext(DndInspectorContext);
+	if (!inspector) throw new Error("useDndInspector() must be used inside <Live.Dnd>.");
+	return inspector;
+};
+const outside = (root) => (element) => element.getRootNode() !== root;
+const deepestAt = (root, x, y, skip) => {
+	const element = root.elementsFromPoint(x, y).find((candidate) => !skip(candidate));
+	if (!element) return null;
+	if (element instanceof HTMLIFrameElement) {
+		const document = element.contentDocument;
+		if (!document) return element;
+		const rect = element.getBoundingClientRect();
+		return deepestAt(document, x - rect.left, y - rect.top, outside(document)) ?? element;
+	}
+	if (element.shadowRoot && element.shadowRoot !== root) return deepestAt(element.shadowRoot, x, y, outside(element.shadowRoot)) ?? element;
+	return element;
+};
+const hasId = (element) => Boolean(element.getAttribute(DATA_ATTR.ID));
+const pickElement = (section, overlay, x, y) => {
+	let element = deepestAt(section.ownerDocument, x, y, (candidate) => candidate === overlay || candidate === section || !section.contains(candidate));
+	while (element && element !== section && !hasId(element)) element = element.parentElement ?? element.parentNode?.host ?? null;
+	return element === section ? null : element;
+};
+const viewportRect = (element) => {
+	const rect = element.getBoundingClientRect();
+	let x = rect.left;
+	let y = rect.top;
+	let frame = element.ownerDocument.defaultView?.frameElement ?? null;
+	while (frame) {
+		const frameRect = frame.getBoundingClientRect();
+		x += frameRect.left;
+		y += frameRect.top;
+		frame = frame.ownerDocument.defaultView?.frameElement ?? null;
+	}
+	return new DOMRect(x, y, rect.width, rect.height);
+};
+//#endregion
+//#region src/components/dnd/inspector-highlight.tsx
+const InspectorHighlight = ({ rect }) => rect ? createPortal(/* @__PURE__ */ jsx("div", {
+	"aria-hidden": true,
+	"data-dnd-inspector-highlight": true,
+	style: {
+		position: "fixed",
+		left: rect.left,
+		top: rect.top,
+		width: rect.width,
+		height: rect.height,
+		pointerEvents: "none",
+		outline: "2px solid #3b82f6",
+		outlineOffset: -1,
+		background: "rgba(59, 130, 246, 0.12)",
+		zIndex: 2147483647
+	}
+}), document.body) : null;
+//#endregion
 //#region src/components/dnd/draggable.tsx
 const DraggableItem = ({ item, children }) => {
 	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
@@ -70,9 +129,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
 	})
 });
@@ -91,9 +157,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,
@@ -124,12 +192,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");
@@ -266,7 +341,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);
@@ -278,7 +353,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);
@@ -326,7 +401,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) => {
@@ -420,7 +495,8 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
 							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
 							return /* @__PURE__ */ jsxs("div", {
-								className: "rounded border border-green-100 bg-white p-2",
+								"data-node-id": nodeId,
+								className: "rounded border border-green-100 bg-white p-2\n                      data-[picked]:ring-2 data-[picked]:ring-blue-400",
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "mb-1 text-xs text-green-600",
 									children: editableNode.tagName
@@ -450,7 +526,118 @@ 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/sortable-items.tsx
+const label = (items, id) => {
+	const index = items.findIndex((item) => item.id === id);
+	return index >= 0 ? `Item ${index + 1}` : "Item";
+};
+const SortableItems = ({ items, disabled, onMove, children }) => {
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const onDragEnd = ({ active, over }) => {
+		const from = items.find((item) => item.id === active.id);
+		const to = items.find((item) => item.id === over?.id);
+		if (from && to && from !== to) onMove(from, to.index);
+	};
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		modifiers: [restrictToVerticalAxis, restrictToParentElement],
+		accessibility: { announcements: {
+			onDragStart: ({ active }) => `Picked up ${label(items, active.id)}.`,
+			onDragOver: ({ active, over }) => over ? `${label(items, active.id)} is over ${label(items, over.id)}.` : void 0,
+			onDragEnd: ({ active, over }) => over ? `${label(items, active.id)} was moved to the place of ${label(items, over.id)}.` : `${label(items, active.id)} was dropped.`,
+			onDragCancel: ({ active }) => `Moving ${label(items, active.id)} was cancelled.`
+		} },
+		onDragEnd,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: items.map((item) => item.id),
+			strategy: verticalListSortingStrategy,
+			disabled,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: items.map(children)
+			})
+		})
+	});
+};
+const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls, className, children }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id,
+		disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS$1.Translate.toString(transform),
+			transition
+		},
+		className: cn(className, isDragging && "relative z-10 shadow-md"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center space-x-1",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						ref: setActivatorNodeRef,
+						...attributes,
+						...listeners,
+						"aria-label": `Reorder ${title}`,
+						disabled,
+						className: "cursor-grab rounded p-0.5 text-gray-400\n              hover:text-gray-700 disabled:cursor-not-allowed\n              disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+					}),
+					checkbox,
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-expanded": expanded,
+						onClick: onToggle,
+						className: "inline-flex items-center space-x-1 rounded px-1 text-xs\n              font-medium",
+						children: [expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }), /* @__PURE__ */ jsx("span", { children: title })]
+					})
+				]
+			}), controls]
+		}), expanded && 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"));
@@ -548,7 +735,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();
@@ -574,8 +761,35 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 		rawItems,
 		value
 	]);
+	const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
 	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",
@@ -586,126 +800,160 @@ 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));
 	};
-	return {
-		kind,
-		items: isPrimitive ? primitiveItems.map((item) => ({
-			id: identity.ids[item.index] ?? item.id,
-			index: item.index,
-			elementIndex: item.elementIndex,
-			properties: [],
-			nested: [],
-			value: {
-				id: `primitive-${item.id}`,
-				label: `item-${item.index}`,
-				property: item.type,
-				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))
+	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));
+	};
+	const actions = {
+		add: () => {
+			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 snapshot = latest();
+			const from = locate(snapshot, elementIndex);
+			const target = snapshot.items.find((item) => item.index === toIndex);
+			if (!from || !target) return;
+			commit(snapshot, moveArrayItem(snapshot.value, from.elementIndex, target.elementIndex), moveId(snapshot.ids, from.index, target.index), /* @__PURE__ */ new Set());
+		},
+		remove: (elementIndex) => {
+			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 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: [...snapshot.selected]
+			}, snapshot.selected, snapshot.items.length));
+		},
+		moveSelected: (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(snapshot, null, void 0, snapshot.selected);
+				return;
 			}
-		})) : objectItems.map((item) => {
-			const id = identity.ids[item.index] ?? item.id;
-			const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
-				const binding = resolveRenderEntry(render, key);
-				const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
-				return {
-					...toBindingFields(binding),
-					id: `item-${id}-${key}`,
-					meta: {
-						...binding.meta,
-						valueType: prop.type
-					},
-					value: parseValue(String(prop.value)),
-					rawValue: prop.type === "unknown" ? propertySource : String(prop.value),
-					canEditValue: canLosslesslyEvaluateSource(propertySource),
-					onChange: (next) => updateProperty(item.elementIndex, key, next)
-				};
-			});
-			const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
-				property,
-				elements: nodes.flatMap((node) => {
-					const source = resolvePanelBindings(node);
-					if (!source) return [];
-					return [{
-						id: source.id,
-						tagName: source.tagName,
-						bindings: withPanelCommit(source.bindings, onNodeChange)
-					}];
-				})
-			})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
-				property,
-				elements: [],
-				fallback: {
-					id: `item-${id}-${property}-jsx`,
-					label: property,
-					property,
-					type: "jsx",
-					value: code,
-					rawValue: code,
-					canEditValue: true,
-					onChange: (next) => updateProperty(item.elementIndex, property, next)
-				}
-			}))];
+			const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => import_lib.isExpression(node) && import_lib.isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
+			commit(snapshot, result.code, nextIdentity.items, new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
+		},
+		removeSelected: () => {
+			const snapshot = latest();
+			commit(snapshot, removeArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), kind), removeIds(snapshot.ids, snapshot.selected), /* @__PURE__ */ new Set());
+		}
+	};
+	const items = isPrimitive ? primitiveItems.map((item) => ({
+		id: identity.ids[item.index] ?? item.id,
+		index: item.index,
+		elementIndex: item.elementIndex,
+		properties: [],
+		nested: [],
+		value: {
+			id: `primitive-${item.id}`,
+			label: `item-${item.index}`,
+			property: item.type,
+			value: item.value ?? "",
+			rawValue: item.type === "unknown" ? item.source : String(item.value ?? ""),
+			canEditValue: canLosslesslyEvaluateSource(item.source),
+			onChange: (next) => updateValue(item.elementIndex, next)
+		}
+	})) : objectItems.map((item) => {
+		const id = identity.ids[item.index] ?? item.id;
+		const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
+			const binding = resolveRenderEntry(render, key);
+			const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
 			return {
-				id,
-				index: item.index,
-				elementIndex: item.elementIndex,
-				properties,
-				nested
+				...toBindingFields(binding),
+				id: `item-${id}-${key}`,
+				meta: {
+					...binding.meta,
+					valueType: prop.type
+				},
+				value: parseValue(String(prop.value)),
+				rawValue: prop.type === "unknown" ? propertySource : String(prop.value),
+				canEditValue: canLosslesslyEvaluateSource(propertySource),
+				onChange: (next) => updateProperty(item.elementIndex, key, next)
 			};
-		}),
+		});
+		const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
+			property,
+			elements: nodes.flatMap((node) => {
+				const source = resolvePanelBindings(node);
+				if (!source) return [];
+				return [{
+					id: source.id,
+					tagName: source.tagName,
+					bindings: withPanelCommit(source.bindings, onNodeChange)
+				}];
+			})
+		})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
+			property,
+			elements: [],
+			fallback: {
+				id: `item-${id}-${property}-jsx`,
+				label: property,
+				property,
+				type: "jsx",
+				value: code,
+				rawValue: code,
+				canEditValue: true,
+				onChange: (next) => updateProperty(item.elementIndex, property, next)
+			}
+		}))];
+		return {
+			id,
+			index: item.index,
+			elementIndex: item.elementIndex,
+			properties,
+			nested
+		};
+	});
+	return {
+		kind,
+		items,
 		selection,
-		actions: {
-			add: () => {
-				const next = appendArrayItem(value, kind);
-				commit(next, next ? [...identity.ids, nanoid(6)] : void 0, selectionAfter({ type: "append" }, selection.selected, rawItems.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);
-				if (!from || !target) return;
-				commit(moveArrayItem(value, elementIndex, target.elementIndex), moveId(identity.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());
-			},
-			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({
-					type: "duplicate",
-					indices: [...selection.selected]
-				}, selection.selected, rawItems.length));
-			},
-			moveSelected: (direction) => {
-				const nextIdentity = moveSelectedIndices(identity.ids, selection.selected, direction);
-				const result = moveArrayItems(value, elementIndicesOf(selection.selected), direction);
-				if (!result) {
-					commit(null, void 0, selection.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] : [])));
-			},
-			removeSelected: () => {
-				commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind), removeIds(identity.ids, selection.selected), /* @__PURE__ */ new Set());
+		expansion: {
+			expandedIds: items.flatMap((item) => collapsed.has(item.id) ? [] : [item.id]),
+			isExpanded: (id) => !collapsed.has(id),
+			toggle: (id) => setCollapsed((previous) => {
+				const next = new Set(previous);
+				if (!next.delete(id)) next.add(id);
+				return next;
+			}),
+			setExpanded: (ids) => {
+				const expanded = new Set(ids);
+				setCollapsed(new Set(items.flatMap((item) => expanded.has(item.id) ? [] : [item.id])));
 			}
 		},
+		actions,
 		canEditStructure,
 		parseError
 	};
@@ -734,7 +982,8 @@ const NestedGroup = ({ group, onNodeChange }) => {
 				"):"
 			]
 		}), group.elements.map((element) => /* @__PURE__ */ jsxs("div", {
-			className: "rounded border border-blue-100 bg-blue-50 p-2",
+			"data-node-id": element.id,
+			className: "rounded border border-blue-100 bg-blue-50 p-2\n            data-[picked]:ring-2 data-[picked]:ring-blue-400",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "mb-1 text-xs text-blue-600",
 				children: [
@@ -769,7 +1018,7 @@ const NestedGroup = ({ group, onNodeChange }) => {
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { kind, items, selection, actions, canEditStructure, parseError } = useItemsEditor(value, {
+	const { kind, items, selection, expansion, actions, canEditStructure, parseError } = useDndItems(value, {
 		render,
 		onChange,
 		onNodeChange: onChildChange
@@ -839,105 +1088,87 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 			})
 		]
 	});
-	if (kind === "primitive") return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
-		children: [
-			header,
-			bulkBar,
-			!canEditStructure && /* @__PURE__ */ jsx("div", {
-				className: "rounded border border-dashed border-amber-200 p-3 text-xs\n              text-amber-700",
-				children: "Values remain editable, but moving, copying, adding, and deleting require a dense array without spreads or parenthesized top-level items. Use the code editor for those structural changes."
-			}),
-			items.map((item) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-2 rounded border border-gray-100 bg-gray-50 p-2",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between space-x-1",
-					children: [/* @__PURE__ */ jsx("div", {
-						onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
-						className: "inline-flex",
-						children: /* @__PURE__ */ jsx(Checkbox, {
-							checked: selection.isSelected(item.index),
-							disabled: !canEditStructure,
-							onChange: () => {}
-						})
-					}), itemControls(item)]
-				}), /* @__PURE__ */ jsx(Field, {
-					binding: item.value,
-					onNodeChange: onChildChange
-				})]
-			}, item.id))
-		]
+	const itemCheckbox = (item) => /* @__PURE__ */ jsx("div", {
+		onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
+		className: "inline-flex",
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: selection.isSelected(item.index),
+			disabled: !canEditStructure,
+			onChange: () => {}
+		})
 	});
+	const objectBody = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "space-y-2",
+		children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col space-y-2",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "w-20 shrink-0 text-xs font-medium",
+				children: binding.label
+			}), /* @__PURE__ */ jsx(Field, {
+				binding,
+				onNodeChange: onChildChange
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-right text-xs text-gray-500",
+			children: [
+				"(",
+				String(binding.meta?.valueType),
+				")"
+			]
+		})] }, `${item.id}-${binding.property}-${binding.label}`))
+	}), /* @__PURE__ */ jsx("div", {
+		className: "space-y-3 border-t pt-2",
+		children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
+			group,
+			onNodeChange: onChildChange
+		}, group.property)) : /* @__PURE__ */ jsx("div", {
+			className: "text-xs text-gray-500",
+			children: "✓ No JSX bindings found"
+		})
+	})] });
+	const allExpanded = expansion.expandedIds.length === items.length;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
 			header,
+			items.length > 1 && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					variant: "text",
+					onClick: () => expansion.setExpanded(allExpanded ? [] : items.map((item) => item.id)),
+					children: allExpanded ? "Collapse all" : "Expand all"
+				})
+			}),
 			bulkBar,
 			!canEditStructure && /* @__PURE__ */ jsx("div", {
 				className: "rounded border border-dashed border-amber-200 p-3 text-xs\n            text-amber-700",
 				children: "Values remain editable, but moving, copying, adding, and deleting require a dense array without spreads or parenthesized top-level items. Use the code editor for those structural changes."
 			}),
-			items.map((item) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-3 rounded border bg-gray-50 p-3",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center space-x-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
-								className: "inline-flex",
-								children: /* @__PURE__ */ jsx(Checkbox, {
-									checked: selection.isSelected(item.index),
-									disabled: !canEditStructure,
-									onChange: () => {}
-								})
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "text-xs font-medium",
-								children: ["Item ", item.index + 1]
-							})]
-						}), itemControls(item)]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "space-y-2",
-						children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col space-y-2",
-							children: [/* @__PURE__ */ jsx("label", {
-								className: "w-20 shrink-0 text-xs font-medium",
-								children: binding.label
-							}), /* @__PURE__ */ jsx(Field, {
-								binding,
-								onNodeChange: onChildChange
-							})]
-						}), /* @__PURE__ */ jsxs("span", {
-							className: "text-right text-xs text-gray-500",
-							children: [
-								"(",
-								String(binding.meta?.valueType),
-								")"
-							]
-						})] }, `${item.id}-${binding.property}-${binding.label}`))
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "space-y-3 border-t pt-2",
-						children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
-							group,
-							onNodeChange: onChildChange
-						}, group.property)) : /* @__PURE__ */ jsx("div", {
-							className: "text-xs text-gray-500",
-							children: "✓ No JSX bindings found"
-						})
-					})
-				]
-			}, item.id))
+			/* @__PURE__ */ jsx(SortableItems, {
+				items,
+				disabled: !canEditStructure,
+				onMove: (item, toIndex) => actions.move(item.elementIndex, toIndex),
+				children: (item) => /* @__PURE__ */ jsx(ItemCard, {
+					id: item.id,
+					title: `Item ${item.index + 1}`,
+					disabled: !canEditStructure,
+					expanded: expansion.isExpanded(item.id),
+					onToggle: () => expansion.toggle(item.id),
+					checkbox: itemCheckbox(item),
+					controls: itemControls(item),
+					className: kind === "primitive" ? "space-y-2 rounded border border-gray-100 bg-gray-50 p-2" : "space-y-3 rounded border bg-gray-50 p-3",
+					children: kind === "primitive" ? /* @__PURE__ */ jsx(Field, {
+						binding: item.value,
+						onNodeChange: onChildChange
+					}) : objectBody(item)
+				}, item.id)
+			})
 		]
 	});
 };
 //#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;
@@ -1024,6 +1255,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);
@@ -1033,7 +1268,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." }),
@@ -1047,31 +1283,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",
@@ -1101,23 +1334,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) : "";
@@ -1129,11 +1362,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),
@@ -1148,11 +1378,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),
@@ -1168,10 +1395,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),
@@ -1187,10 +1411,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();
@@ -1235,13 +1456,36 @@ 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);
+	const rootRef = useRef(null);
+	const pickedId = (useContext(DndInspectorContext)?.picked ?? null)?.id;
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root || !pickedId) return;
+		const target = root.querySelector(`[data-node-id="${CSS.escape(pickedId)}"]`);
+		if (!target) return;
+		target.setAttribute("data-picked", "");
+		const until = performance.now() + 600;
+		let frame = 0;
+		const keepInView = () => {
+			const box = target.getBoundingClientRect();
+			const view = root.getBoundingClientRect();
+			if (box.top < view.top || box.bottom > view.bottom) target.scrollIntoView?.({ block: "nearest" });
+			if (performance.now() < until) frame = requestAnimationFrame(keepInView);
+		};
+		keepInView();
+		return () => {
+			cancelAnimationFrame(frame);
+			target.removeAttribute("data-picked");
+		};
+	}, [pickedId, groups.length]);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
 		children: "Please select a section."
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
 		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -1273,13 +1517,22 @@ 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."
 			}),
-			groups.map((group) => /* @__PURE__ */ jsx(FieldGroup, {
-				bindings: group,
-				onNodeChange
+			groups.map((group) => /* @__PURE__ */ jsx("div", {
+				"data-node-id": group[0].id,
+				className: "rounded data-[picked]:ring-2 data-[picked]:ring-blue-400\n            data-[picked]:ring-offset-2",
+				children: /* @__PURE__ */ jsx(FieldGroup, {
+					bindings: group,
+					onNodeChange
+				})
 			}, group[0].id))
 		]
 	});
@@ -1299,7 +1552,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,
@@ -1308,7 +1561,8 @@ const PanelFields = ({ subject }) => {
 		canMoveUp,
 		canMoveDown,
 		bindings,
-		onNodeChange
+		onNodeChange,
+		readOnly
 	});
 };
 const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
@@ -1317,8 +1571,9 @@ const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
 	children: /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Palette>" })
 });
 const Canvas = ({ className, style, ...restProps }) => {
-	const { canvas } = useDndRegions("<Live.Dnd.Canvas>");
-	return /* @__PURE__ */ jsx("div", {
+	const { canvas, documentError } = useDndRegions("<Live.Dnd.Canvas>");
+	const inspector = useDndInspector();
+	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative h-full w-full overflow-y-auto", className),
 		"data-frame-container": true,
 		style: {
@@ -1328,7 +1583,21 @@ const Canvas = ({ className, style, ...restProps }) => {
 			...style
 		},
 		...restProps,
-		children: canvas
+		children: [canvas, !documentError && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none sticky bottom-0 z-70 h-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-auto absolute bottom-3 left-3",
+				children: /* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(Crosshair, {}),
+					color: "primary",
+					variant: inspector.active ? "solid" : "outlined",
+					"aria-pressed": inspector.active,
+					"aria-label": "Pick an element",
+					title: inspector.active ? "Click an element to edit it. Esc to cancel." : "Pick an element",
+					onClick: inspector.toggle
+				})
+			})
+		})]
 	});
 };
 const Panel = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
@@ -1495,15 +1764,48 @@ 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, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({
+		id,
+		disabled: inspecting
+	});
 	const style = {
-		transform: CSS.Transform.toString(transform),
+		transform: CSS$1.Transform.toString(transform),
 		transition,
 		opacity: isDragging ? .5 : 1,
-		cursor: "grab"
+		cursor: inspecting ? "crosshair" : "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);
@@ -1513,14 +1815,23 @@ 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: [
-			/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-50") }),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("absolute inset-0 z-50"),
+				onPointerMove: inspecting ? (e) => onInspectMove?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY) : void 0,
+				onPointerLeave: inspecting ? onInspectLeave : void 0,
+				onClick: inspecting ? (e) => {
+					e.stopPropagation();
+					onInspectPick?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY);
+				} : void 0
+			}),
 			children,
 			selected && /* @__PURE__ */ jsxs(Space, {
 				className: cn("absolute top-1 right-1 z-60"),
@@ -1547,7 +1858,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,
@@ -1567,29 +1878,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,
@@ -1599,54 +1981,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
@@ -1665,6 +2084,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."
@@ -1684,13 +2111,48 @@ 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: _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, onNodePick, children, ...restProps }) => {
 	const modules = useStableModules(_modules);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
@@ -1704,9 +2166,35 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, 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) => {
@@ -1721,11 +2209,110 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, 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 [inspecting, setInspecting] = useState(false);
+	const [picked, setPicked] = useState(null);
+	const [highlight, setHighlight] = useState(null);
+	if (picked && picked.sectionId !== selectedId) setPicked(null);
+	const stopInspecting = useCallback(() => {
+		setInspecting(false);
+		setHighlight(null);
+	}, []);
+	useEffect(() => {
+		if (!inspecting) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") stopInspecting();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [inspecting, stopInspecting]);
+	const inspector = {
+		active: inspecting,
+		activate: () => setInspecting(true),
+		deactivate: stopInspecting,
+		toggle: () => inspecting ? stopInspecting() : setInspecting(true),
+		picked
+	};
+	const onInspectMove = (section, overlay, x, y) => {
+		const element = pickElement(section, overlay, x, y);
+		setHighlight(element ? viewportRect(element) : null);
+	};
+	const onInspectPick = (sectionId, section, overlay, x, y) => {
+		const id = pickElement(section, overlay, x, y)?.getAttribute(DATA_ATTR.ID);
+		if (!id) return;
+		const pick = {
+			id,
+			sectionId
+		};
+		selectOnly(sectionId);
+		setPicked(pick);
+		stopInspecting();
+		onNodePick?.(pick);
+	};
+	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);
 	};
 	const selectedCode = selectedItem?.code;
+	const selectedSectionId = selectedItem?.id;
 	const { fields, updatedCode, parseError } = useMemo(() => {
 		if (!selectedCode) return {
 			fields: [],
@@ -1733,9 +2320,9 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			parseError: null
 		};
 		try {
-			const updated = fillIds(selectedCode);
+			const updated = fillIdsFrom(selectedCode, selectedSectionId ?? "");
 			return {
-				fields: extract(updated).filter((node) => node.tagName !== "section"),
+				fields: extract(updated),
 				updatedCode: updated !== selectedCode ? updated : selectedCode,
 				parseError: null
 			};
@@ -1747,12 +2334,17 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				parseError: { error: e }
 			};
 		}
-	}, [selectedCode]);
-	const reportError = onEditError ?? toastEditError;
-	const reportErrorRef = useRef(reportError);
+	}, [selectedCode, selectedSectionId]);
 	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",
@@ -1762,9 +2354,21 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, 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,
@@ -1780,6 +2384,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, 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(() => {
@@ -1801,13 +2406,35 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, 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" })]
@@ -1822,6 +2449,13 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				onClick: () => onSelect(section.id),
 				onDelete,
 				onCopy,
+				nodeRef: sectionNodes.register(section.id),
+				onNavigate: (to) => onNavigate(section.id, to),
+				onDeleteKey: () => onDeleteKey(section.id),
+				inspecting,
+				onInspectMove,
+				onInspectPick: (...args) => onInspectPick(section.id, ...args),
+				onInspectLeave: () => setHighlight(null),
 				children: /* @__PURE__ */ jsx(renderer_default, {
 					preview: previews[index],
 					sectionId: section.id,
@@ -1836,12 +2470,16 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, 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,
@@ -1849,12 +2487,12 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cn("relative flex h-full w-full", className),
 				...restProps,
-				children: /* @__PURE__ */ jsx(DndEditOptionsContext.Provider, {
+				children: /* @__PURE__ */ jsxs(DndEditOptionsContext.Provider, {
 					value: {
 						renderField,
 						reportError
 					},
-					children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
+					children: [/* @__PURE__ */ jsx(DndRegionContext.Provider, {
 						value: {
 							palette,
 							panel,
@@ -1863,10 +2501,14 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 							selectedId,
 							clearSelection,
 							paletteOpen: mobilePaletteOpen,
-							setPaletteOpen: setMobilePaletteOpen
+							setPaletteOpen: setMobilePaletteOpen,
+							documentError: problem?.reason ?? null
 						},
-						children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
-					})
+						children: /* @__PURE__ */ jsx(DndInspectorContext.Provider, {
+							value: inspector,
+							children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
+						})
+					}), /* @__PURE__ */ jsx(InspectorHighlight, { rect: inspecting ? highlight : null })]
 				})
 			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
 				sections,
@@ -1876,7 +2518,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 					modules,
 					frame,
 					dynamicTailwind,
-					...props
+					...props,
+					containerId
 				}
 			}) })]
 		})
@@ -1891,7 +2534,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, useDndInspector as y };
 
-//# sourceMappingURL=dnd-CMrXfD8O.js.map
+//# sourceMappingURL=dnd-Z1KS16Fy.js.map