@jbpark/live-editor 4.3.1 → 4.5.0

package/dist/{dnd-x8Mvj--6.js → dnd-DGNp20Nk.js}

@@ -1,13 +1,15 @@
-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-C-hGKMkk.js";
-import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-CKvdqZtO.js";
+import { S as require_lib, c as inspectDocument, h as replaceIds, m as fillIdsFrom, n as createSectionPreviewCache, r as fillSectionIds, w as __toESM, x as nanoid } from "./document-DGHTfrda.js";
+import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-h1JAgOeW.js";
+import { n as validateBindingValue } from "./validate-iLo8IONY.js";
+import { i as useLiveMessages } from "./messages-CzUPVnzH.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.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-CehbCXwh.js";
+import { A as extractNodeValue, N as parseArrayExpression, O as canLosslesslyEvaluateSource, P as parseValue, T as readNodeBindings, _ as findEditableChildren, c as updateArrayItemValue, f as updateAll, g as extract, i as moveArrayItems, j as extractObjectProperties, l as canStructurallyEditArray, m as moveSelectedIndices, n as duplicateArrayItems, o as removeArrayItems, p as getChildrenSignatures, r as moveArrayItem, s as updateArrayItemProperty, t as appendArrayItem, v as getCurrentValue, x as getStructuredValue } from "./items-DdrwGxJw.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-QKcGvUJs.js";
-import { t as Core } from "./core-B3ruccKb.js";
-import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-Ce63wbtG.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-B17cepvm.js";
+import { o as preloadScripts } from "./compile-DDfk5P25.js";
+import { a as Frame, i as useStableModules, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-T9r9ExbR.js";
+import { t as Core } from "./core-CRsAGpei.js";
+import { i as generateSection, o as replaceSections, r as extractSections } from "./sections-BRH3KHYc.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-DnjGgsK6.js";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -26,6 +28,7 @@ const Droppable = ({ children, className }) => {
 	const isNewItemDragging = active?.data.current?.type === "new-item";
 	const shouldHighlight = isOver && isNewItemDragging;
 	const shouldHighlightBottom = isBottomOver && isNewItemDragging;
+	const messages = useLiveMessages();
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setNodeRef,
 		className: cn("min-h-full", "border-2 border-dashed p-1", shouldHighlight ? "border-blue-300 bg-blue-50" : "border-gray-200", className),
@@ -34,7 +37,7 @@ const Droppable = ({ children, className }) => {
 			className: cn("mt-2 min-h-24", "rounded-lg border-2 border-dashed", "transition-all duration-200", "flex items-center justify-center", shouldHighlightBottom ? "border-blue-400 bg-blue-100" : "border-gray-300 bg-gray-50"),
 			children: /* @__PURE__ */ jsx(Typography.Text, {
 				className: "text-sm text-gray-500",
-				children: shouldHighlightBottom ? "Drop here" : "Drag here to add at bottom"
+				children: shouldHighlightBottom ? messages.canvas.dropHere : messages.canvas.dropAtBottom
 			})
 		})]
 	});
@@ -73,6 +76,21 @@ const pickElement = (section, overlay, x, y) => {
 	while (element && element !== section && !hasId(element)) element = element.parentElement ?? element.parentNode?.host ?? null;
 	return element === section ? null : element;
 };
+const findElementById = (section, id) => {
+	const selector = `[${DATA_ATTR.ID}="${CSS.escape(id)}"]`;
+	const roots = [section];
+	for (const root of roots) {
+		const found = root.querySelector(selector);
+		if (found) return found;
+		root.querySelectorAll("iframe").forEach((frame) => {
+			if (frame.contentDocument) roots.push(frame.contentDocument);
+		});
+		root.querySelectorAll("*").forEach((element) => {
+			if (element.shadowRoot) roots.push(element.shadowRoot);
+		});
+	}
+	return null;
+};
 const viewportRect = (element) => {
 	const rect = element.getBoundingClientRect();
 	let x = rect.left;
@@ -204,13 +222,16 @@ const toPanelBindingData = (node, id, binding) => ({
 	value: getStructuredValue(node, binding.property, binding.type),
 	rawValue: getCurrentValue(node, binding.property),
 	...!canEditBindingValue(node, binding) && { canEditValue: false },
-	...isAttributeAbsent(node, binding) && { present: false }
+	...isAttributeAbsent(node, binding) && { present: false },
+	element: {
+		tagName: node.tagName || "element",
+		text: node.textContent.replace(/\s+/g, " ").trim()
+	}
 });
 const resolvePanelBindings = (node) => {
 	const id = readAttribute(node, "data-id");
-	const bindingAttr = readAttribute(node, "data-binding");
-	if (!id || !bindingAttr) return null;
-	const parsed = node.bindings ?? parseBinding(bindingAttr);
+	if (!id) return null;
+	const parsed = readNodeBindings(node);
 	if (!parsed.length) return null;
 	return {
 		id,
@@ -230,33 +251,34 @@ const withPanelCommit = (bindings, commit) => bindings.map((binding) => ({
 //#endregion
 //#region src/components/dnd/panel/bulk-actions-bar.tsx
 const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
+	const messages = useLiveMessages();
 	if (count === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx("div", {
 			className: "text-xs font-medium text-blue-700",
-			children: [count, " selected"]
+			children: messages.selection.count(count)
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center space-x-1",
 			children: [
 				/* @__PURE__ */ jsx(Button, {
 					size: "small",
 					icon: /* @__PURE__ */ jsx(Copy, {}),
-					title: "Duplicate selected",
+					title: messages.selection.duplicate,
 					disabled,
 					onClick: onDuplicate
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "small",
 					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-					title: "Move selected up",
+					title: messages.selection.moveUp,
 					disabled,
 					onClick: onMoveUp
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "small",
 					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-					title: "Move selected down",
+					title: messages.selection.moveDown,
 					disabled,
 					onClick: onMoveDown
 				}),
@@ -264,14 +286,14 @@ const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMove
 					danger: true,
 					size: "small",
 					icon: /* @__PURE__ */ jsx(X, {}),
-					title: "Delete selected",
+					title: messages.selection.delete,
 					disabled,
 					onClick: onDelete
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "small",
 					onClick: onClear,
-					children: "Clear"
+					children: messages.selection.clear
 				})
 			]
 		})]
@@ -402,6 +424,7 @@ const useDndChildren = (items, { onChange } = {}) => {
 const Children$1 = ({ value, onChange, onNodeChange }) => {
 	const items = useMemo(() => Array.isArray(value) ? value : [], [value]);
 	const { selection, actions } = useDndChildren(items, { onChange });
+	const messages = useLiveMessages();
 	const editableChildrenMap = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
 		items.forEach((item, index) => {
@@ -415,19 +438,15 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
+				children: [/* @__PURE__ */ jsx("div", {
 					className: "text-sm font-semibold text-green-700",
-					children: [
-						"Children Items (",
-						items.length,
-						")"
-					]
+					children: messages.children.heading(items.length)
 				}), /* @__PURE__ */ jsx(Button, {
 					size: "small",
 					color: "green",
 					icon: /* @__PURE__ */ jsx(Plus, {}),
 					onClick: actions.add,
-					children: "Add Child"
+					children: messages.children.add
 				})]
 			}),
 			/* @__PURE__ */ jsx(BulkActionsBar, {
@@ -452,15 +471,9 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 									checked: selection.isSelected(itemIndex),
 									onChange: () => {}
 								})
-							}), /* @__PURE__ */ jsxs("div", {
+							}), /* @__PURE__ */ jsx("div", {
 								className: "text-xs font-medium text-green-800",
-								children: [
-									"Child ",
-									itemIndex + 1,
-									" (",
-									item.tagName || "fragment",
-									")"
-								]
+								children: messages.children.child(itemIndex + 1, item.tagName || "fragment")
 							})]
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex space-x-1",
@@ -468,17 +481,20 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 								/* @__PURE__ */ jsx(Button, {
 									size: "small",
 									icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+									"aria-label": messages.children.moveUp,
 									disabled: itemIndex === 0,
 									onClick: () => actions.move(itemIndex, itemIndex - 1)
 								}),
 								/* @__PURE__ */ jsx(Button, {
 									size: "small",
 									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+									"aria-label": messages.children.moveDown,
 									disabled: itemIndex === items.length - 1,
 									onClick: () => actions.move(itemIndex, itemIndex + 1)
 								}),
 								/* @__PURE__ */ jsx(Button, {
-									title: "Delete item",
+									"aria-label": messages.children.delete,
+									title: messages.children.delete,
 									danger: true,
 									size: "small",
 									icon: /* @__PURE__ */ jsx(X, {}),
@@ -491,7 +507,7 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						className: "space-y-2",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "text-xs font-medium text-green-700",
-							children: "Editable Bindings:"
+							children: messages.children.editableBindings
 						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
 							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
 							return /* @__PURE__ */ jsxs("div", {
@@ -511,7 +527,7 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						className: "space-y-1",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "text-xs font-medium text-green-700",
-							children: "Child Nodes:"
+							children: messages.children.childNodes
 						}), item.children.map((node, nodeIndex) => /* @__PURE__ */ jsx("div", {
 							className: "ml-2 rounded border border-green-100 bg-white p-2",
 							children: /* @__PURE__ */ jsx(Node, {
@@ -548,9 +564,9 @@ const getFieldKind = (binding) => {
 const isStructuralFieldKind = (kind) => kind === "items" || kind === "children";
 //#endregion
 //#region src/components/dnd/panel/sortable-items.tsx
-const label = (items, id) => {
+const label = (messages, items, id) => {
 	const index = items.findIndex((item) => item.id === id);
-	return index >= 0 ? `Item ${index + 1}` : "Item";
+	return index >= 0 ? messages.items.item(index + 1) : String(id);
 };
 const SortableItems = ({ items, disabled, onMove, children }) => {
 	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
@@ -562,15 +578,18 @@ const SortableItems = ({ items, disabled, onMove, children }) => {
 		const to = items.find((item) => item.id === over?.id);
 		if (from && to && from !== to) onMove(from, to.index);
 	};
+	const messages = useLiveMessages();
+	const { announcements: say } = messages;
+	const name = (id) => label(messages, items, id);
 	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.`
+			onDragStart: ({ active }) => say.pickedUp(name(active.id)),
+			onDragOver: ({ active, over }) => over ? say.itemOver(name(active.id), name(over.id)) : void 0,
+			onDragEnd: ({ active, over }) => over ? say.itemMoved(name(active.id), name(over.id)) : say.dropped(name(active.id)),
+			onDragCancel: ({ active }) => say.cancelled(name(active.id))
 		} },
 		onDragEnd,
 		children: /* @__PURE__ */ jsx(SortableContext, {
@@ -585,6 +604,7 @@ const SortableItems = ({ items, disabled, onMove, children }) => {
 	});
 };
 const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls, className, children }) => {
+	const messages = useLiveMessages();
 	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
 		id,
 		disabled
@@ -606,7 +626,7 @@ const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls,
 						ref: setActivatorNodeRef,
 						...attributes,
 						...listeners,
-						"aria-label": `Reorder ${title}`,
+						"aria-label": messages.items.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 })
@@ -638,8 +658,8 @@ const createPendingCommit = () => {
 		}
 	};
 };
-const bindingsInJSX = (source) => {
-	const nodes = extract(source);
+const bindingsInJSX = (source, bindingOptions) => {
+	const nodes = extract(source, bindingOptions);
 	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
 	if (container) return [container];
 	const bindings = [];
@@ -649,7 +669,7 @@ const bindingsInJSX = (source) => {
 	});
 	return bindings;
 };
-const parseSource = (value) => {
+const parseSource = (value, bindingOptions) => {
 	const ast = parseArrayExpression(value);
 	if (!ast) return {
 		objectItems: [],
@@ -678,7 +698,7 @@ const parseSource = (value) => {
 			if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !(import_lib.isJSXElement(prop.value) || import_lib.isJSXFragment(prop.value))) return;
 			const propertyName = prop.key.name;
 			try {
-				const found = bindingsInJSX(value.slice(prop.value.start, prop.value.end));
+				const found = bindingsInJSX(value.slice(prop.value.start, prop.value.end), bindingOptions);
 				if (found.length > 0) jsxBindings[propertyName] = found;
 				else jsxFallbacks[propertyName] = value.slice(prop.value.start, prop.value.end);
 			} catch (error) {
@@ -736,19 +756,22 @@ const removeIds = (ids, indices) => {
 	return ids.filter((_, index) => !indices.has(index));
 };
 const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
-	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
+	const { reportError, bindingOptions } = useDndEditOptions();
+	const messages = useLiveMessages();
+	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value, bindingOptions), [value, bindingOptions]);
 	const canEditStructure = useMemo(() => canStructurallyEditArray(value), [value]);
-	const { reportError } = useDndEditOptions();
 	const reportErrorRef = useRef(reportError);
+	const messagesRef = useRef(messages);
 	useEffect(() => {
 		reportErrorRef.current = reportError;
+		messagesRef.current = messages;
 	});
 	useEffect(() => {
 		if (parseError) reportErrorRef.current({
 			type: "parse",
 			target: "items",
-			title: "Failed to parse items",
-			description: "Check the console for details."
+			title: messagesRef.current.editErrors.itemsParseFailed,
+			description: messagesRef.current.editErrors.checkConsole
 		});
 	}, [parseError]);
 	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
@@ -793,8 +816,8 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		if (next === null) {
 			reportError({
 				type: "items",
-				title: "Failed to update this item",
-				description: "The source was preserved. Structural edits require a dense array without spreads; use the code editor for unsupported syntax."
+				title: messages.editErrors.itemUpdateFailed,
+				description: messages.editErrors.itemUpdateFailedDetail
 			});
 			return false;
 		}
@@ -1018,6 +1041,7 @@ const NestedGroup = ({ group, onNodeChange }) => {
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
+	const messages = useLiveMessages();
 	const { kind, items, selection, expansion, actions, canEditStructure, parseError } = useDndItems(value, {
 		render,
 		onChange,
@@ -1025,34 +1049,30 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	});
 	const header = /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between",
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx("div", {
 			className: "text-sm font-semibold",
-			children: [
-				"Items (",
-				items.length,
-				")"
-			]
+			children: messages.items.heading(items.length)
 		}), items.length > 0 && canEditStructure && /* @__PURE__ */ jsx(Button, {
 			size: "small",
 			icon: /* @__PURE__ */ jsx(Plus, {}),
 			variant: "solid",
 			color: "green",
 			onClick: actions.add,
-			children: "Add Item"
+			children: messages.items.add
 		})]
 	});
 	if (parseError) return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [header, /* @__PURE__ */ jsx("div", {
 			className: "rounded border border-dashed border-red-200 p-3 text-xs\n            text-red-600",
-			children: "This value could not be read as a list. Edit it in the code editor."
+			children: messages.items.unreadable
 		})]
 	});
 	if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [header, /* @__PURE__ */ jsx("div", {
 			className: "rounded border border-dashed border-gray-200 p-3 text-xs\n            text-gray-500",
-			children: "No editable items. The panel copies an existing item rather than guessing the shape of a new one — add the first item in the code editor."
+			children: messages.items.empty
 		})]
 	});
 	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
@@ -1070,12 +1090,14 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 			/* @__PURE__ */ jsx(Button, {
 				size: "small",
 				icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+				"aria-label": messages.items.moveUp,
 				disabled: !canEditStructure || item.index === 0,
 				onClick: () => actions.move(item.elementIndex, item.index - 1)
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				size: "small",
 				icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+				"aria-label": messages.items.moveDown,
 				disabled: !canEditStructure || item.index === items.length - 1,
 				onClick: () => actions.move(item.elementIndex, item.index + 1)
 			}),
@@ -1083,6 +1105,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 				danger: true,
 				size: "small",
 				icon: /* @__PURE__ */ jsx(X, {}),
+				"aria-label": messages.items.delete,
 				disabled: !canEditStructure || items.length <= 1,
 				onClick: () => actions.remove(item.elementIndex)
 			})
@@ -1121,9 +1144,16 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
 			group,
 			onNodeChange: onChildChange
-		}, group.property)) : /* @__PURE__ */ jsx("div", {
+		}, group.property)) : /* @__PURE__ */ jsxs("div", {
 			className: "text-xs text-gray-500",
-			children: "✓ No JSX bindings found"
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "✓"
+				}),
+				" ",
+				messages.items.noNestedBindings
+			]
 		})
 	})] });
 	const allExpanded = expansion.expandedIds.length === items.length;
@@ -1137,13 +1167,13 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					size: "small",
 					variant: "text",
 					onClick: () => expansion.setExpanded(allExpanded ? [] : items.map((item) => item.id)),
-					children: allExpanded ? "Collapse all" : "Expand all"
+					children: allExpanded ? messages.items.collapseAll : messages.items.expandAll
 				})
 			}),
 			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."
+				children: messages.items.structureLocked
 			}),
 			/* @__PURE__ */ jsx(SortableItems, {
 				items,
@@ -1151,7 +1181,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 				onMove: (item, toIndex) => actions.move(item.elementIndex, toIndex),
 				children: (item) => /* @__PURE__ */ jsx(ItemCard, {
 					id: item.id,
-					title: `Item ${item.index + 1}`,
+					title: messages.items.item(item.index + 1),
 					disabled: !canEditStructure,
 					expanded: expansion.isExpanded(item.id),
 					onToggle: () => expansion.toggle(item.id),
@@ -1260,6 +1290,8 @@ const FieldError = ({ message }) => message ? /* @__PURE__ */ jsx("p", {
 	children: message
 }) : null;
 const BuiltinField = ({ binding, onNodeChange }) => {
+	const messages = useLiveMessages();
+	const validationOptions = { messages: messages.validation };
 	const { id, value, rawValue, onChange } = binding;
 	const [validationError, setValidationError] = useState(null);
 	const [text, setText] = useState(rawValue);
@@ -1272,12 +1304,12 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	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." }),
+			/* @__PURE__ */ jsx("div", { children: messages.panel.expressionPreserved }),
 			/* @__PURE__ */ jsx("code", {
 				className: "block overflow-x-auto text-amber-800",
 				children: rawValue
 			}),
-			/* @__PURE__ */ jsx("div", { children: "Use the code editor to change it." })
+			/* @__PURE__ */ jsx("div", { children: messages.panel.useCodeEditor })
 		]
 	});
 	const commitIfChanged = (next) => {
@@ -1354,9 +1386,9 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 		value: parseDateValue(stringValue),
 		onChange: (date) => {
 			const next = date ? formatDateValue(date) : "";
-			const result = validateBindingValue(binding, next);
+			const result = validateBindingValue(binding, next, validationOptions);
 			if (!result.valid) {
-				setValidationError(result.message ?? "Invalid value.");
+				setValidationError(result.message ?? messages.panel.invalidValue);
 				return;
 			}
 			setValidationError(null);
@@ -1367,12 +1399,12 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 		type: "url",
 		value: text,
 		onChange: (e) => setText(e.target.value),
-		placeholder: "https://example.com",
+		placeholder: messages.panel.urlPlaceholder,
 		onBlur: (e) => {
 			const next = e.target.value.trim();
-			const result = validateBindingValue(binding, next);
+			const result = validateBindingValue(binding, next, validationOptions);
 			if (!result.valid) {
-				setValidationError(result.message ?? "Invalid value.");
+				setValidationError(result.message ?? messages.panel.invalidValue);
 				return;
 			}
 			setValidationError(null);
@@ -1383,13 +1415,13 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 		type: "number",
 		value: text,
 		onChange: (e) => setText(e.target.value),
-		placeholder: "Enter a numeric value",
+		placeholder: messages.panel.numberPlaceholder,
 		onBlur: (e) => {
 			const raw = e.target.value.trim();
 			const next = raw !== "" && !Number.isNaN(Number(raw)) ? Number(raw) : raw;
-			const result = validateBindingValue(binding, next);
+			const result = validateBindingValue(binding, next, validationOptions);
 			if (!result.valid) {
-				setValidationError(result.message ?? "Invalid value.");
+				setValidationError(result.message ?? messages.panel.invalidValue);
 				return;
 			}
 			setValidationError(null);
@@ -1399,13 +1431,13 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input.TextArea, {
 		value: text,
 		onChange: (e) => setText(e.target.value),
-		placeholder: "Enter a value",
+		placeholder: messages.panel.textPlaceholder,
 		onBlur: (e) => {
 			const raw = e.target.value.trim();
 			const next = binding.type ? raw : parseValue(raw);
-			const result = validateBindingValue(binding, next);
+			const result = validateBindingValue(binding, next, validationOptions);
 			if (!result.valid) {
-				setValidationError(result.message ?? "Invalid value.");
+				setValidationError(result.message ?? messages.panel.invalidValue);
 				return;
 			}
 			setValidationError(null);
@@ -1456,10 +1488,30 @@ const groupBindingsById = (bindings) => {
 	}
 	return [...groups.values()];
 };
+const describeElement = (binding) => {
+	const { tagName = "element", text = "" } = binding.element ?? {};
+	return {
+		tagName,
+		text,
+		label: text ? `${tagName} "${text}"` : tagName
+	};
+};
+const nodeIdOf = (target) => target instanceof Element && target.closest("[data-node-id]")?.getAttribute("data-node-id") || null;
 const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange, readOnly = false }) => {
+	const messages = useLiveMessages();
 	const groups = groupBindingsById(bindings);
 	const rootRef = useRef(null);
-	const pickedId = (useContext(DndInspectorContext)?.picked ?? null)?.id;
+	const inspector = useContext(DndInspectorContext);
+	const pickedId = (inspector?.picked ?? null)?.id;
+	const highlight = inspector?.highlight;
+	const [hoveredId, setHoveredId] = useState(null);
+	const [focusedId, setFocusedId] = useState(null);
+	const targetId = hoveredId ?? focusedId;
+	useEffect(() => {
+		if (!highlight) return;
+		highlight(targetId);
+		return () => highlight(null);
+	}, [highlight, targetId]);
 	useEffect(() => {
 		const root = rootRef.current;
 		if (!root || !pickedId) return;
@@ -1482,10 +1534,16 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 	}, [pickedId, groups.length]);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
-		children: "Please select a section."
+		children: messages.panel.selectSection
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rootRef,
+		onPointerOver: (e) => setHoveredId(nodeIdOf(e.target)),
+		onPointerLeave: () => setHoveredId(null),
+		onFocus: (e) => setFocusedId(nodeIdOf(e.target)),
+		onBlur: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) setFocusedId(null);
+		},
 		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -1500,19 +1558,19 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 							icon: /* @__PURE__ */ jsx(ChevronUp, {}),
 							disabled: !canMoveUp,
 							onClick: onMoveUp,
-							"aria-label": "Move section up"
+							"aria-label": messages.section.moveUp
 						}),
 						onMoveDown && /* @__PURE__ */ jsx(Button, {
 							icon: /* @__PURE__ */ jsx(ChevronDown, {}),
 							disabled: !canMoveDown,
 							onClick: onMoveDown,
-							"aria-label": "Move section down"
+							"aria-label": messages.section.moveDown
 						}),
 						onDelete && /* @__PURE__ */ jsx(Button, {
 							danger: true,
 							icon: /* @__PURE__ */ jsx(Trash, {}),
 							onClick: () => onDelete(item.id),
-							"aria-label": "Delete section"
+							"aria-label": messages.section.delete
 						})
 					]
 				})]
@@ -1520,20 +1578,34 @@ 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."
+				children: messages.panel.readOnly
 			}),
 			!groups.length && /* @__PURE__ */ jsx(Typography.Text, {
 				className: "text-xs text-gray-400",
-				children: "No editable elements."
+				children: messages.panel.noEditableElements
 			}),
-			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))
+			groups.map((group) => {
+				const element = describeElement(group[0]);
+				return /* @__PURE__ */ jsxs("div", {
+					"data-node-id": group[0].id,
+					role: "group",
+					"aria-label": element.label,
+					className: "rounded data-[picked]:ring-2 data-[picked]:ring-blue-400\n              data-[picked]:ring-offset-2",
+					children: [groups.length > 1 && /* @__PURE__ */ jsxs("div", {
+						className: "mb-2 flex min-w-0 items-baseline gap-1.5 border-b\n                  border-gray-100 pb-1 text-xs",
+						children: [/* @__PURE__ */ jsx("code", {
+							className: "shrink-0 text-gray-500",
+							children: element.tagName
+						}), element.text && /* @__PURE__ */ jsx("span", {
+							className: "truncate text-gray-400",
+							children: element.text
+						})]
+					}), /* @__PURE__ */ jsx(FieldGroup, {
+						bindings: group,
+						onNodeChange
+					})]
+				}, group[0].id);
+			})
 		]
 	});
 };
@@ -1573,6 +1645,7 @@ const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
 const Canvas = ({ className, style, ...restProps }) => {
 	const { canvas, documentError } = useDndRegions("<Live.Dnd.Canvas>");
 	const inspector = useDndInspector();
+	const messages = useLiveMessages();
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative h-full w-full overflow-y-auto", className),
 		"data-frame-container": true,
@@ -1592,8 +1665,8 @@ const Canvas = ({ className, style, ...restProps }) => {
 					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",
+					"aria-label": messages.canvas.pickElement,
+					title: inspector.active ? messages.canvas.pickElementActive : messages.canvas.pickElement,
 					onClick: inspector.toggle
 				})
 			})
@@ -1607,6 +1680,7 @@ const Panel = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
 });
 const Layout = ({ palette, panel }) => {
 	const { isMobile, selectedId, clearSelection, paletteOpen, setPaletteOpen } = useDndRegions("<Live.Dnd.Layout>");
+	const messages = useLiveMessages();
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		isMobile ? /* @__PURE__ */ jsx(Canvas, {}) : /* @__PURE__ */ jsxs(Splitter, {
 			withHandle: true,
@@ -1636,7 +1710,7 @@ const Layout = ({ palette, panel }) => {
 			type: "primary",
 			shape: "circle",
 			icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
-			"aria-label": "Components",
+			"aria-label": messages.canvas.palette,
 			className: "fixed right-4 bottom-4 z-20 md:hidden",
 			onClick: () => setPaletteOpen(true)
 		}),
@@ -1645,7 +1719,7 @@ const Layout = ({ palette, panel }) => {
 			onClose: () => setPaletteOpen(false),
 			direction: "bottom",
 			size: "large",
-			title: "Components",
+			title: messages.canvas.palette,
 			children: palette ?? /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Layout>" })
 		}),
 		/* @__PURE__ */ jsx(Drawer, {
@@ -1653,7 +1727,7 @@ const Layout = ({ palette, panel }) => {
 			onClose: clearSelection,
 			direction: "bottom",
 			size: "large",
-			title: "Properties",
+			title: messages.canvas.properties,
 			children: panel ?? /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Layout>" })
 		})
 	] });
@@ -1688,6 +1762,7 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
 		name: sectionName,
 		code: sectionCode
 	};
+	const messages = useLiveMessages();
 	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind && !forceFallback);
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
@@ -1698,8 +1773,8 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
 			reason: "forced"
 		},
 		builtin: /* @__PURE__ */ jsx(Error$1, {
-			message: "This section is not rendered in this editor.",
-			title: "Section Unavailable"
+			message: messages.errors.sectionNotRendered,
+			title: messages.errors.sectionUnavailable
 		})
 	});
 	if (module?.error) return /* @__PURE__ */ jsx(SectionFallback, {
@@ -1710,7 +1785,7 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
 		},
 		builtin: /* @__PURE__ */ jsx(Error$1, {
 			message: module.error,
-			title: "Compile Error"
+			title: messages.errors.compile
 		})
 	});
 	const Component = module?.exports?.default;
@@ -1733,7 +1808,7 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
 					builtin: /* @__PURE__ */ jsx(Error$1, {
 						message,
 						onReset: reset,
-						title: "Rendering Error"
+						title: messages.errors.rendering
 					})
 				}),
 				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
@@ -1770,11 +1845,12 @@ const NAVIGATION_KEYS = {
 	Home: "first",
 	End: "last"
 };
-const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, nodeRef, onNavigate, onDeleteKey, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
+const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, nodeRef, onNavigate, onDeleteKey, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
 	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({
 		id,
 		disabled: inspecting
 	});
+	const messages = useLiveMessages();
 	const style = {
 		transform: CSS$1.Transform.toString(transform),
 		transition,
@@ -1814,6 +1890,10 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 		e.stopPropagation();
 		_onCopy?.(id);
 	};
+	const press = (action) => (e) => {
+		e.stopPropagation();
+		action?.();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setRefs,
 		style,
@@ -1835,14 +1915,31 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 			children,
 			selected && /* @__PURE__ */ jsxs(Space, {
 				className: cn("absolute top-1 right-1 z-60"),
-				children: [/* @__PURE__ */ jsx(Button, {
-					icon: /* @__PURE__ */ jsx(Copy, {}),
-					onClick: onCopy
-				}), /* @__PURE__ */ jsx(Button, {
-					danger: true,
-					icon: /* @__PURE__ */ jsx(Trash, {}),
-					onClick: onDelete
-				})]
+				children: [
+					onMoveUp && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+						disabled: !canMoveUp,
+						onClick: press(onMoveUp),
+						"aria-label": messages.section.moveUp
+					}),
+					onMoveDown && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+						disabled: !canMoveDown,
+						onClick: press(onMoveDown),
+						"aria-label": messages.section.moveDown
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(Copy, {}),
+						onClick: onCopy,
+						"aria-label": messages.section.duplicate
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(Trash, {}),
+						onClick: onDelete,
+						"aria-label": messages.section.delete
+					})
+				]
 			})
 		]
 	});
@@ -1877,6 +1974,205 @@ const Overlay = ({ sections, isForced, renderProps }) => {
 	return null;
 };
 //#endregion
+//#region src/components/dnd/use-delete-flow.ts
+const useDeleteFlow = ({ sections, remove, onBeforeDelete }) => {
+	const removeRef = useRef(remove);
+	useEffect(() => {
+		removeRef.current = remove;
+	});
+	return (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);
+		}
+	};
+};
+//#endregion
+//#region src/components/dnd/use-dnd-keyboard.ts
+const KEYBOARD_CODES = {
+	start: ["Space"],
+	cancel: ["Escape"],
+	end: ["Space", "Enter"]
+};
+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 useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move, requestDelete }) => {
+	const { announcements: say } = useLiveMessages();
+	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 ?? say.section;
+	};
+	const positionOf = (id) => sections.findIndex((section) => section.id === id) + 1;
+	const announcements = {
+		onDragStart: ({ active }) => say.pickedUp(nameOf(active.id, active.data)),
+		onDragOver: ({ active, over }) => over && positionOf(over.id) > 0 ? say.movedTo(nameOf(active.id, active.data), positionOf(over.id), sections.length) : say.notOver(nameOf(active.id, active.data)),
+		onDragEnd: ({ active, over }) => over && positionOf(over.id) > 0 ? say.droppedAt(nameOf(active.id, active.data), positionOf(over.id), sections.length) : say.dropped(nameOf(active.id, active.data)),
+		onDragCancel: ({ active }) => say.cancelled(nameOf(active.id, active.data))
+	};
+	const screenReaderInstructions = { draggable: say.instructions };
+	const [sectionNodes] = useState(createNodeRegistry);
+	const focusSection = (id) => sectionNodes.get(id)?.focus();
+	const onNavigate = (fromId, to) => {
+		const from = sections.findIndex((section) => section.id === fromId);
+		const target = sections[to === "first" ? 0 : to === "last" ? sections.length - 1 : from + (to === "next" ? 1 : -1)];
+		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);
+		});
+	};
+	const onMoveButton = (id, direction) => {
+		const to = sections.findIndex((section) => section.id === id) + (direction === "up" ? -1 : 1);
+		move(id, direction);
+		if (to === 0 || to === sections.length - 1) focusSection(id);
+	};
+	useEffect(() => {
+		if (selectedId === null) return;
+		const frame = requestAnimationFrame(() => {
+			sectionNodes.get(selectedId)?.scrollIntoView?.({ block: "nearest" });
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		sectionNodes,
+		selectedId,
+		selectedIndex
+	]);
+	return {
+		sensors,
+		announcements,
+		screenReaderInstructions,
+		sectionNodes,
+		onNavigate,
+		onDeleteKey,
+		onMoveButton
+	};
+};
+//#endregion
+//#region src/components/dnd/use-inspector-state.ts
+const useInspectorState = ({ selectedId, selectOnly, sectionNodes, onNodePick }) => {
+	const [inspecting, setInspecting] = useState(false);
+	const [picked, setPicked] = useState(null);
+	const [hoverRect, setHoverRect] = useState(null);
+	const [fieldTarget, setFieldTarget] = useState(null);
+	const [fieldRect, setFieldRect] = useState(null);
+	if (picked && picked.sectionId !== selectedId) setPicked(null);
+	const stopInspecting = useCallback(() => {
+		setInspecting(false);
+		setHoverRect(null);
+	}, []);
+	useEffect(() => {
+		if (!inspecting) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") stopInspecting();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [inspecting, stopInspecting]);
+	useEffect(() => {
+		const section = selectedId === null ? null : sectionNodes.get(selectedId);
+		if (!fieldTarget || !section) return;
+		let frame = 0;
+		const measure = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				const element = findElementById(section, fieldTarget);
+				setFieldRect(element ? viewportRect(element) : null);
+			});
+		};
+		measure();
+		window.addEventListener("scroll", measure, true);
+		window.addEventListener("resize", measure);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("scroll", measure, true);
+			window.removeEventListener("resize", measure);
+		};
+	}, [
+		fieldTarget,
+		selectedId,
+		sectionNodes
+	]);
+	const inspector = {
+		active: inspecting,
+		activate: () => setInspecting(true),
+		deactivate: stopInspecting,
+		toggle: () => inspecting ? stopInspecting() : setInspecting(true),
+		picked,
+		highlight: setFieldTarget
+	};
+	const onInspectMove = (section, overlay, x, y) => {
+		const element = pickElement(section, overlay, x, y);
+		setHoverRect(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);
+	};
+	return {
+		inspector,
+		inspecting,
+		onInspectMove,
+		onInspectPick,
+		onInspectLeave: () => setHoverRect(null),
+		highlightRect: inspecting ? hoverRect : fieldTarget ? fieldRect : null
+	};
+};
+//#endregion
 //#region src/components/dnd/use-section-document.ts
 const createLastParsed = () => {
 	let last = null;
@@ -2070,81 +2366,61 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 };
 //#endregion
 //#region src/components/dnd/dnd.tsx
-const describeUpdateFailure = (failure, label) => {
+const describeUpdateFailure = (failure, label, { editErrors: m }) => {
 	switch (failure?.reason) {
 		case "attribute-not-found": return {
-			title: `Failed to update "${label}"`,
-			description: `This element has no "${failure.property}" attribute — check the property in its data-binding.`
+			title: m.updateFailed(label),
+			description: m.attributeNotFound(failure.property)
 		};
 		case "binding-not-declared": return {
-			title: `Failed to update "${label}"`,
-			description: `No binding for ${failure.property ? `property "${failure.property}"` : `label "${label}"`} is declared on this element's data-binding.`
+			title: m.updateFailed(label),
+			description: m.bindingNotDeclared({
+				label,
+				property: failure.property
+			})
 		};
 		case "duplicate-binding": return {
-			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.`
+			title: m.updateFailed(label),
+			description: m.duplicateBinding({
+				count: failure.count,
+				label,
+				property: failure.property
+			})
 		};
 		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.`
+			title: m.cannotEdit(label),
+			description: m.reservedProperty(failure.property)
 		};
 		case "required-property": return {
-			title: `Cannot remove "${label}"`,
-			description: `"${failure.property}" is marked required in its data-binding, so it can't be removed.`
+			title: m.cannotRemove(label),
+			description: m.requiredProperty(failure.property)
 		};
 		case "no-binding": return {
-			title: `Failed to update "${label}"`,
-			description: "This element has no data-binding declaration."
+			title: m.updateFailed(label),
+			description: m.noBinding
 		};
 		case "element-not-found": return {
-			title: `Failed to update "${label}"`,
-			description: "The target element could not be found in this section."
+			title: m.updateFailed(label),
+			description: m.elementNotFound
 		};
 		case "unsupported-syntax": return {
-			title: `Cannot edit "${label}" in the panel`,
-			description: `The "${failure.property}" expression was preserved. Change it in the code editor instead.`
+			title: m.cannotEdit(label),
+			description: m.unsupportedSyntax(failure.property)
 		};
 		case "parse-error": return {
-			title: `Failed to update "${label}"`,
-			description: failure.error instanceof Error ? failure.error.message : "Check the console for details."
+			title: m.updateFailed(label),
+			description: failure.error instanceof Error ? failure.error.message : m.checkConsole
 		};
-		default: return { title: `Failed to update "${label}"` };
+		default: return { title: m.updateFailed(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) => ({
+const blockedEditError = (error, { editErrors: m }) => ({
 	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."
+	title: m.syntaxError,
+	description: m.syntaxErrorDetail
 });
 const conditionalModifiers = (args) => {
 	const { active } = args;
@@ -2152,7 +2428,7 @@ const conditionalModifiers = (args) => {
 	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, onBeforeDelete, sectionNameFallback, containerId, onNodePick, 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, bindings: bindingRegistry, bindingKeys, onNodePick, children, ...restProps }) => {
 	const modules = useStableModules(_modules);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
@@ -2166,28 +2442,17 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			return false;
 		}
 	};
-	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 messages = useLiveMessages();
 	const reportError = onEditError ?? toastEditError;
 	const reportErrorRef = useRef(reportError);
+	const messagesRef = useRef(messages);
 	useEffect(() => {
 		reportErrorRef.current = reportError;
+		messagesRef.current = messages;
 	});
 	const onBlockedEdit = useCallback((problem) => {
-		if (problem.reason === "parse-error") reportErrorRef.current(blockedEditError(problem.error));
+		if (problem.reason === "parse-error") reportErrorRef.current(blockedEditError(problem.error, messagesRef.current));
 	}, []);
 	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,
@@ -2195,8 +2460,6 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		onBlockedEdit
 	});
 	const missingContainer = problem?.reason === "container-not-found" ? problem.containerId : null;
-	const onDragStart = (_) => {};
-	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {
 		const { active, over } = event;
 		if (!over) return;
@@ -2209,108 +2472,34 @@ 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 = useDeleteFlow({
+		sections,
+		remove,
+		onBeforeDelete
 	});
-	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,
+	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveButton } = useDndKeyboard({
+		sections,
 		selectedId,
-		selectedIndex
-	]);
+		selectedIndex,
+		selectOnly,
+		move: moveSection,
+		requestDelete
+	});
+	const { inspector, inspecting, onInspectMove, onInspectPick, onInspectLeave, highlightRect } = useInspectorState({
+		selectedId,
+		selectOnly,
+		sectionNodes,
+		onNodePick
+	});
 	const onChange = (next) => {
 		if (!next.id) return;
 		patch(next);
 	};
+	const bindingOptions = useMemo(() => ({
+		bindings: bindingRegistry,
+		bindingKeys
+	}), [bindingRegistry, bindingKeys]);
 	const selectedCode = selectedItem?.code;
 	const selectedSectionId = selectedItem?.id;
 	const { fields, updatedCode, parseError } = useMemo(() => {
@@ -2322,7 +2511,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		try {
 			const updated = fillIdsFrom(selectedCode, selectedSectionId ?? "");
 			return {
-				fields: extract(updated),
+				fields: extract(updated, bindingOptions),
 				updatedCode: updated !== selectedCode ? updated : selectedCode,
 				parseError: null
 			};
@@ -2334,15 +2523,19 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				parseError: { error: e }
 			};
 		}
-	}, [selectedCode, selectedSectionId]);
+	}, [
+		selectedCode,
+		selectedSectionId,
+		bindingOptions
+	]);
 	useEffect(() => {
 		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.`
+			title: messagesRef.current.editErrors.missingContainer(missingContainer),
+			description: messagesRef.current.editErrors.missingContainerDetail(missingContainer)
 		});
 	}, [missingContainer]);
 	useEffect(() => {
@@ -2350,14 +2543,14 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			type: "parse",
 			target: "section",
 			error: parseError.error,
-			title: "Failed to parse this section",
-			description: "Check the console for details."
+			title: messagesRef.current.editErrors.sectionParseFailed,
+			description: messagesRef.current.editErrors.checkConsole
 		});
 	}, [parseError]);
 	const commitChanges = (changes) => {
 		if (changes.length === 0) return;
 		if (stale && problem?.reason === "parse-error") {
-			reportError(blockedEditError(problem.error));
+			reportError(blockedEditError(problem.error, messages));
 			return;
 		}
 		const committed = selectedItem && getCommittedSection(selectedItem.id)?.code;
@@ -2366,7 +2559,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			label,
 			property,
 			value: changeValue
-		})));
+		})), bindingOptions);
 		if (!result.success) {
 			const { id, label, property } = changes[result.index];
 			reportError({
@@ -2375,7 +2568,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				label,
 				property,
 				failure: result.failure,
-				...describeUpdateFailure(result.failure, label)
+				...describeUpdateFailure(result.failure, label, messages)
 			});
 			return;
 		}
@@ -2408,12 +2601,13 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		bindings,
 		onNodeChange: onFieldChange,
 		onNodesChange: commitChanges,
-		readOnly: stale
+		readOnly: stale,
+		bindingOptions
 	};
 	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."
+		children: messages.canvas.stale
 	}), /* @__PURE__ */ jsx(Droppable, {
 		className: cn(!sections.length && "h-full"),
 		children: !sections.length ? /* @__PURE__ */ jsx("div", {
@@ -2421,23 +2615,15 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			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" })]
+				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.syntaxError }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.syntaxErrorDetail })]
 			}) : 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,
-					"\""
-				] })]
+				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.missingContainer(missingContainer) }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.missingContainerDetail(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" })]
+				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.empty }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? messages.canvas.emptyHintTouch : messages.canvas.emptyHintDrag })]
 			})
 		}) : /* @__PURE__ */ jsx(SortableContext, {
 			items: sections.map((s) => s.id),
@@ -2449,13 +2635,17 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				onClick: () => onSelect(section.id),
 				onDelete,
 				onCopy,
+				onMoveUp: () => onMoveButton(section.id, "up"),
+				onMoveDown: () => onMoveButton(section.id, "down"),
+				canMoveUp: index > 0,
+				canMoveDown: index < sections.length - 1,
 				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),
+				onInspectLeave,
 				children: /* @__PURE__ */ jsx(renderer_default, {
 					preview: previews[index],
 					sectionId: section.id,
@@ -2478,11 +2668,9 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			collisionDetection: closestCenter,
 			accessibility: {
 				announcements,
-				screenReaderInstructions: SCREEN_READER_INSTRUCTIONS
+				screenReaderInstructions
 			},
 			modifiers: [conditionalModifiers],
-			onDragStart,
-			onDragOver,
 			onDragEnd,
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cn("relative flex h-full w-full", className),
@@ -2490,7 +2678,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				children: /* @__PURE__ */ jsxs(DndEditOptionsContext.Provider, {
 					value: {
 						renderField,
-						reportError
+						reportError,
+						bindingOptions
 					},
 					children: [/* @__PURE__ */ jsx(DndRegionContext.Provider, {
 						value: {
@@ -2508,7 +2697,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 							value: inspector,
 							children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
 						})
-					}), /* @__PURE__ */ jsx(InspectorHighlight, { rect: inspecting ? highlight : null })]
+					}), /* @__PURE__ */ jsx(InspectorHighlight, { rect: highlightRect })]
 				})
 			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
 				sections,
@@ -2541,4 +2730,4 @@ const useChildrenEditor = useDndChildren;
 //#endregion
 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-x8Mvj--6.js.map
+//# sourceMappingURL=dnd-DGNp20Nk.js.map