@jbpark/live-editor 4.4.0 → 4.6.0

package/dist/{dnd-BE5ZizqX.js → dnd-UoJILA75.js}

@@ -1,133 +1,91 @@
-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-BDn_f08_.js";
-import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-h1JAgOeW.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-CGbe6bSV.js";
+import { c as RESERVED_BINDING_PROPERTIES, o as PALETTE_SECTIONS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-DU17Tdwo.js";
+import { n as validateBindingValue } from "./validate-iLo8IONY.js";
+import { i as useLiveMessages } from "./messages-CSrMI4Rm.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { E as readNodeBindings, F as parseValue, M as extractObjectProperties, P as parseArrayExpression, S as getStructuredValue, _ as moveSelectedIndices, a as getChildrenSignatures, c as appendArrayItem, d as moveArrayItems, g as canStructurallyEditArray, h as updateArrayItemValue, i as updateAll, j as extractNodeValue, k as canLosslesslyEvaluateSource, l as duplicateArrayItems, m as updateArrayItemProperty, p as removeArrayItems, s as extract, t as validateBindingValue, u as moveArrayItem, v as findEditableChildren, y as getCurrentValue } from "./ast-dYb78955.js";
+import { A as extractNodeValue, C as getStructuredValue, D as readNodeBindings, M as parseArrayExpression, N as parseValue, b as getCurrentValue, c as updateArrayItemValue, f as updateAll, g as moveSelectedIndices, h as getChildrenSignatures, i as moveArrayItems, j as extractObjectProperties, k as canLosslesslyEvaluateSource, l as canStructurallyEditArray, n as duplicateArrayItems, o as removeArrayItems, r as moveArrayItem, s as updateArrayItemProperty, t as appendArrayItem, v as extract, y as findEditableChildren } from "./items-B6OXxcLG.js";
 import { t as cn } from "./cn-CAnad2vL.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-Bcipc1hL.js";
-import { t as Core } from "./core-CRsAGpei.js";
-import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-CBVMO8Jl.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 { o as preloadScripts } from "./compile-Dxas-D05.js";
+import { a as useStableModules, i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-BP1toJkW.js";
+import { i as generateSection, o as replaceSections, r as extractSections } from "./sections-BYWOBISr.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-BLB80tyw.js";
+import { t as Core } from "./core-Bgfek364.js";
+import { Children, createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, 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";
 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 { 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
+import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, ChevronUp, Copy, Crosshair, GripVertical, LayoutGrid, Plus, Trash, X } from "lucide-react";
+//#region src/components/dnd/palette/palette-drag.ts
 var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
+const PALETTE_SECTION = "palette-section";
+const paletteDragData = (section) => ({
+	type: PALETTE_SECTION,
+	section
+});
+const paletteSectionOf = (data) => {
+	const current = data?.current;
+	return current?.type === PALETTE_SECTION ? current.section : void 0;
+};
+//#endregion
+//#region src/components/dnd/canvas/droppable.tsx
 const Droppable = ({ children, className }) => {
 	const { setNodeRef, isOver, active } = useDroppable({ id: "sortable-area" });
 	const { setNodeRef: setBottomRef, isOver: isBottomOver } = useDroppable({ id: "sortable-area-bottom" });
-	const isNewItemDragging = active?.data.current?.type === "new-item";
-	const shouldHighlight = isOver && isNewItemDragging;
-	const shouldHighlightBottom = isBottomOver && isNewItemDragging;
+	const isPaletteSectionDragging = !!paletteSectionOf(active?.data);
+	const shouldHighlight = isOver && isPaletteSectionDragging;
+	const shouldHighlightBottom = isBottomOver && isPaletteSectionDragging;
+	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),
-		children: [children, isNewItemDragging && /* @__PURE__ */ jsx("div", {
+		children: [children, isPaletteSectionDragging && /* @__PURE__ */ jsx("div", {
 			ref: setBottomRef,
 			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
 			})
 		})]
 	});
 };
 //#endregion
-//#region src/components/dnd/edit-options.ts
-const toastEditError = (error) => {
-	Toast.error(error.title, error.description ? { description: error.description } : void 0);
-};
-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 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;
-	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);
+//#region src/components/dnd/canvas/inspector-highlight.tsx
+const InspectorHighlight = ({ rect }) => {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const box = ref.current;
+		const container = box?.closest("[data-frame-container]");
+		if (!box || !rect || !container) return;
+		const outer = container.getBoundingClientRect();
+		box.style.left = `${rect.left - outer.left - container.clientLeft + container.scrollLeft}px`;
+		box.style.top = `${rect.top - outer.top - container.clientTop + container.scrollTop}px`;
+		box.style.width = `${rect.width}px`;
+		box.style.height = `${rect.height}px`;
+	}, [rect]);
+	return rect ? /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": true,
+		"data-dnd-inspector-highlight": true,
+		style: {
+			position: "absolute",
+			pointerEvents: "none",
+			outline: "2px solid #3b82f6",
+			outlineOffset: -1,
+			background: "rgba(59, 130, 246, 0.12)",
+			zIndex: 65
+		}
+	}) : null;
 };
 //#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
+//#region src/components/dnd/palette/draggable.tsx
 const DraggableItem = ({ item, children }) => {
 	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
 		id: item.id,
-		data: {
-			type: "new-item",
-			item
-		}
+		data: paletteDragData(item)
 	});
 	return children({
 		ref: setNodeRef,
@@ -158,173 +116,475 @@ const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__
 	})
 });
 //#endregion
-//#region src/components/dnd/layout-context.ts
-const DndRegionContext = createContext(null);
-const useDndRegions = (subject) => {
-	const regions = useContext(DndRegionContext);
-	if (!regions) throw new Error(`${subject} must be used inside <Live.Dnd>.`);
-	return regions;
-};
-const useDndPalette = () => useDndRegions("useDndPalette()").palette;
-const useDndPanel = () => useDndRegions("useDndPanel()").panel;
-const useDndLayout = () => useDndRegions("useDndLayout()");
+//#region src/components/dnd/canvas/section-fallback-context.ts
+const SectionFallbackContext = createContext(void 0);
 //#endregion
-//#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);
-	if (!attribute) return true;
-	return attribute.isStringLiteral === true || canLosslesslyEvaluateSource(attribute?.value ?? "");
-};
-const toBindingFields = (binding) => ({
-	label: binding.label,
-	property: binding.property,
-	type: binding.type,
-	widget: binding.widget,
-	options: binding.options,
-	render: binding.render,
-	min: binding.min,
-	max: binding.max,
-	pattern: binding.pattern,
-	required: binding.required,
-	meta: binding.meta
-});
-const resolveRenderEntry = (render, key) => {
-	const entry = render?.[key];
-	if (entry && "type" in entry) {
-		const leaf = entry;
-		return {
-			...leaf,
-			label: leaf.label ?? key,
-			property: leaf.property ?? key
-		};
-	}
-	return {
-		label: key,
-		property: 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 },
-	...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");
-	if (!id) return null;
-	const parsed = readNodeBindings(node);
-	if (!parsed.length) return null;
-	return {
-		id,
-		tagName: node.tagName || "element",
-		bindings: parsed.map((binding) => toPanelBindingData(node, id, binding))
-	};
+//#region src/components/dnd/canvas/section-fallback.tsx
+const ConsumerFallback = ({ render, args, builtin }) => {
+	const node = render(args);
+	return node === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: node });
 };
-const withPanelCommit = (bindings, commit) => bindings.map((binding) => ({
-	...binding,
-	onChange: (value) => commit?.({
-		id: binding.id,
-		label: binding.label,
-		property: binding.property,
-		value
-	})
-}));
-//#endregion
-//#region src/components/dnd/panel/bulk-actions-bar.tsx
-const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
-	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", {
-			className: "text-xs font-medium text-blue-700",
-			children: [count, " selected"]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center space-x-1",
-			children: [
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(Copy, {}),
-					title: "Duplicate selected",
-					disabled,
-					onClick: onDuplicate
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-					title: "Move selected up",
-					disabled,
-					onClick: onMoveUp
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-					title: "Move selected down",
-					disabled,
-					onClick: onMoveDown
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					danger: true,
-					size: "small",
-					icon: /* @__PURE__ */ jsx(X, {}),
-					title: "Delete selected",
-					disabled,
-					onClick: onDelete
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					onClick: onClear,
-					children: "Clear"
-				})
-			]
-		})]
+const SectionFallback = ({ args, builtin }) => {
+	const render = useContext(SectionFallbackContext);
+	if (!render) return builtin;
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: () => builtin,
+		children: /* @__PURE__ */ jsx(ConsumerFallback, {
+			render,
+			args,
+			builtin
+		})
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/node.tsx
-const Node = ({ data, onChange }) => {
-	const source = resolvePanelBindings(data);
-	if (!source) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-2 rounded",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "space-y-1",
-			children: withPanelCommit(source.bindings, onChange).map((binding) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ jsxs("label", {
-					className: "block text-xs font-semibold text-gray-700",
-					children: [binding.label, /* @__PURE__ */ jsxs("span", {
-						className: "ml-1 text-gray-400",
-						children: [
-							"(",
-							binding.property,
-							")"
-						]
-					})]
-				}), /* @__PURE__ */ jsx(Field, {
-					binding,
-					onNodeChange: onChange
-				})]
-			}, `${binding.id}-${binding.property}`))
+//#region src/components/dnd/canvas/renderer.tsx
+const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, headers, modules, frame, dynamicTailwind = false, provider }) => {
+	const module = useCompiledModule(forceFallback ? "" : preview, modules);
+	const section = {
+		id: sectionId,
+		name: sectionName,
+		code: sectionCode
+	};
+	const messages = useLiveMessages();
+	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind && !forceFallback);
+	const renderProvider = (component) => {
+		return provider ? provider(component) : component;
+	};
+	if (forceFallback) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "forced"
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: messages.errors.sectionNotRendered,
+			title: messages.errors.sectionUnavailable
 		})
 	});
-};
-//#endregion
+	if (module?.error) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "compile",
+			message: module.error
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: module.error,
+			title: messages.errors.compile
+		})
+	});
+	const Component = module?.exports?.default;
+	if (!Component) return null;
+	return /* @__PURE__ */ jsx(Frame, {
+		...frame,
+		autoHeight: true,
+		children: (container) => /* @__PURE__ */ jsx("div", {
+			ref: wrapperRef,
+			className: "w-full overflow-x-hidden",
+			"data-editor-mode": true,
+			children: /* @__PURE__ */ jsx(ErrorBoundary, {
+				resetKeys: [preview],
+				fallback: (message, reset) => /* @__PURE__ */ jsx(SectionFallback, {
+					args: {
+						section,
+						reason: "runtime",
+						message
+					},
+					builtin: /* @__PURE__ */ jsx(Error$1, {
+						message,
+						onReset: reset,
+						title: messages.errors.rendering
+					})
+				}),
+				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+					headers,
+					container
+				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
+			})
+		})
+	});
+};
+const sameValue = (a, b) => {
+	if (Object.is(a, b)) return true;
+	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((item, i) => Object.is(item, b[i]));
+	if (a && b && typeof a === "object" && typeof b === "object" && Object.getPrototypeOf(a) === Object.prototype && Object.getPrototypeOf(b) === Object.prototype) {
+		const aKeys = Object.keys(a);
+		return aKeys.length === Object.keys(b).length && aKeys.every((key) => Object.is(a[key], b[key]));
+	}
+	return false;
+};
+const sameFrame = (a, b) => {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => sameValue(a[key], b[key]));
+};
+const arePropsEqual = (prev, next) => {
+	return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => key === "frame" ? sameFrame(prev.frame, next.frame) : Object.is(prev[key], next[key]));
+};
+var renderer_default = memo(Renderer, arePropsEqual);
+//#endregion
+//#region src/components/dnd/canvas/sortable.tsx
+const NAVIGATION_KEYS = {
+	ArrowUp: "previous",
+	ArrowDown: "next",
+	Home: "first",
+	End: "last"
+};
+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,
+		opacity: isDragging ? .5 : 1,
+		cursor: inspecting ? "crosshair" : "grab"
+	};
+	const isPaletteSectionOver = isOver && !!paletteSectionOf(active?.data);
+	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);
+	};
+	const onCopy = (e) => {
+		e.stopPropagation();
+		_onCopy?.(id);
+	};
+	const press = (action) => (e) => {
+		e.stopPropagation();
+		action?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setRefs,
+		style,
+		...attributes,
+		...listeners,
+		onKeyDown,
+		onClick,
+		className: cn("relative", selected && "z-10 outline-2 outline-offset-2 outline-blue-500", isPaletteSectionOver && "border-t-4 border-t-green-500"),
+		children: [
+			/* @__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"),
+				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
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/canvas/overlay.tsx
+const Overlay = ({ sections, isForced, renderProps }) => {
+	const { active } = useDndContext();
+	if (!active) return null;
+	const paletteSection = paletteSectionOf(active.data);
+	if (paletteSection) return /* @__PURE__ */ jsx(DefaultDraggableItem, { item: paletteSection });
+	const section = sections.find((s) => s.id === active.id);
+	if (section) {
+		const preview = generateSection(section.code, renderProps.fullCode, { containerId: renderProps.containerId });
+		return /* @__PURE__ */ jsx(Sortable, {
+			id: section.id,
+			name: section.name,
+			children: /* @__PURE__ */ jsx(renderer_default, {
+				preview,
+				sectionId: section.id,
+				sectionName: section.name,
+				sectionCode: section.code,
+				forceFallback: isForced?.(section) ?? false,
+				modules: renderProps.modules,
+				frame: renderProps.frame,
+				dynamicTailwind: renderProps.dynamicTailwind
+			})
+		});
+	}
+	return null;
+};
+//#endregion
+//#region src/components/dnd/edit-options.ts
+const toastEditError = (error) => {
+	Toast.error(error.title, error.description ? { description: error.description } : void 0);
+};
+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 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;
+	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/layout-context.ts
+const DndRegionContext = createContext(null);
+const useDndRegions = (subject) => {
+	const regions = useContext(DndRegionContext);
+	if (!regions) throw new Error(`${subject} must be used inside <Live.Dnd>.`);
+	return regions;
+};
+const useDndPalette = () => useDndRegions("useDndPalette()").palette;
+const useDndPanel = () => useDndRegions("useDndPanel()").panel;
+const useDndLayout = () => useDndRegions("useDndLayout()");
+//#endregion
+//#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);
+	if (!attribute) return true;
+	return attribute.isStringLiteral === true || canLosslesslyEvaluateSource(attribute?.value ?? "");
+};
+const toBindingFields = (binding) => ({
+	label: binding.label,
+	property: binding.property,
+	type: binding.type,
+	widget: binding.widget,
+	options: binding.options,
+	render: binding.render,
+	min: binding.min,
+	max: binding.max,
+	pattern: binding.pattern,
+	required: binding.required,
+	meta: binding.meta
+});
+const resolveRenderEntry = (render, key) => {
+	const entry = render?.[key];
+	if (entry && "type" in entry) {
+		const leaf = entry;
+		return {
+			...leaf,
+			label: leaf.label ?? key,
+			property: leaf.property ?? key
+		};
+	}
+	return {
+		label: key,
+		property: 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 },
+	...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");
+	if (!id) return null;
+	const parsed = readNodeBindings(node);
+	if (!parsed.length) return null;
+	return {
+		id,
+		tagName: node.tagName || "element",
+		bindings: parsed.map((binding) => toPanelBindingData(node, id, binding))
+	};
+};
+const withPanelCommit = (bindings, commit) => bindings.map((binding) => ({
+	...binding,
+	onChange: (value) => commit?.({
+		id: binding.id,
+		label: binding.label,
+		property: binding.property,
+		value
+	})
+}));
+//#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__ */ jsx("div", {
+			className: "text-xs font-medium text-blue-700",
+			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: messages.selection.duplicate,
+					disabled,
+					onClick: onDuplicate
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+					title: messages.selection.moveUp,
+					disabled,
+					onClick: onMoveUp
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+					title: messages.selection.moveDown,
+					disabled,
+					onClick: onMoveDown
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					danger: true,
+					size: "small",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					title: messages.selection.delete,
+					disabled,
+					onClick: onDelete
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					onClick: onClear,
+					children: messages.selection.clear
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/node.tsx
+const Node = ({ data, onChange }) => {
+	const source = resolvePanelBindings(data);
+	if (!source) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2 rounded",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-1",
+			children: withPanelCommit(source.bindings, onChange).map((binding) => /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "block text-xs font-semibold text-gray-700",
+					children: [binding.label, /* @__PURE__ */ jsxs("span", {
+						className: "ml-1 text-gray-400",
+						children: [
+							"(",
+							binding.property,
+							")"
+						]
+					})]
+				}), /* @__PURE__ */ jsx(Field, {
+					binding,
+					onNodeChange: onChange
+				})]
+			}, `${binding.id}-${binding.property}`))
+		})
+	});
+};
+//#endregion
 //#region src/components/dnd/panel/use-structural-selection.ts
 const selectionAfter = (command, selected, count) => {
 	switch (command.type) {
@@ -420,6 +680,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) => {
@@ -433,19 +694,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, {
@@ -470,15 +727,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",
@@ -486,17 +737,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, {}),
@@ -509,7 +763,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", {
@@ -529,7 +783,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, {
@@ -566,9 +820,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: {
@@ -580,15 +834,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, {
@@ -603,6 +860,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
@@ -624,7 +882,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 })
@@ -755,18 +1013,21 @@ const removeIds = (ids, indices) => {
 };
 const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 	const { reportError, bindingOptions } = useDndEditOptions();
+	const messages = useLiveMessages();
 	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value, bindingOptions), [value, bindingOptions]);
 	const canEditStructure = useMemo(() => canStructurallyEditArray(value), [value]);
 	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";
@@ -811,8 +1072,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;
 		}
@@ -1036,6 +1297,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,
@@ -1043,34 +1305,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, {
@@ -1088,12 +1346,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)
 			}),
@@ -1101,6 +1361,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)
 			})
@@ -1139,9 +1400,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;
@@ -1155,13 +1423,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,
@@ -1169,7 +1437,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),
@@ -1278,6 +1546,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);
@@ -1290,12 +1560,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) => {
@@ -1372,9 +1642,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);
@@ -1385,12 +1655,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);
@@ -1401,13 +1671,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);
@@ -1417,13 +1687,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);
@@ -1484,6 +1754,7 @@ const describeElement = (binding) => {
 };
 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 inspector = useContext(DndInspectorContext);
@@ -1519,7 +1790,7 @@ 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,
@@ -1543,19 +1814,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
 						})
 					]
 				})]
@@ -1563,11 +1834,11 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 			readOnly && /* @__PURE__ */ jsx(Typography.Text, {
 				role: "status",
 				className: "block text-xs text-amber-700",
-				children: "The document has a syntax error. These fields are from the last version that parsed, and can't be edited until it parses again."
+				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) => {
 				const element = describeElement(group[0]);
@@ -1630,6 +1901,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,
@@ -1649,8 +1921,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
 				})
 			})
@@ -1664,298 +1936,259 @@ 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,
 			orientation: "horizontal",
-			children: [
-				/* @__PURE__ */ jsx(Splitter.Panel, {
-					defaultSize: "20%",
-					minSize: "15%",
-					maxSize: "35%",
-					collapsible: true,
-					children: palette ?? /* @__PURE__ */ jsx(Palette, {})
-				}),
-				/* @__PURE__ */ jsx(Splitter.Panel, {
-					defaultSize: "60%",
-					children: /* @__PURE__ */ jsx(Canvas, {})
-				}),
-				/* @__PURE__ */ jsx(Splitter.Panel, {
-					defaultSize: "20%",
-					minSize: "15%",
-					maxSize: "35%",
-					collapsible: true,
-					children: panel ?? /* @__PURE__ */ jsx(Panel, {})
-				})
-			]
-		}),
-		/* @__PURE__ */ jsx(Button, {
-			type: "primary",
-			shape: "circle",
-			icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
-			"aria-label": "Components",
-			className: "fixed right-4 bottom-4 z-20 md:hidden",
-			onClick: () => setPaletteOpen(true)
-		}),
-		/* @__PURE__ */ jsx(Drawer, {
-			open: isMobile && paletteOpen,
-			onClose: () => setPaletteOpen(false),
-			direction: "bottom",
-			size: "large",
-			title: "Components",
-			children: palette ?? /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Layout>" })
-		}),
-		/* @__PURE__ */ jsx(Drawer, {
-			open: isMobile && Boolean(selectedId),
-			onClose: clearSelection,
-			direction: "bottom",
-			size: "large",
-			title: "Properties",
-			children: panel ?? /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Layout>" })
-		})
-	] });
-};
-//#endregion
-//#region src/components/dnd/section-fallback-context.ts
-const SectionFallbackContext = createContext(void 0);
-//#endregion
-//#region src/components/dnd/section-fallback.tsx
-const ConsumerFallback = ({ render, args, builtin }) => {
-	const node = render(args);
-	return node === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: node });
-};
-const SectionFallback = ({ args, builtin }) => {
-	const render = useContext(SectionFallbackContext);
-	if (!render) return builtin;
-	return /* @__PURE__ */ jsx(ErrorBoundary, {
-		fallback: () => builtin,
-		children: /* @__PURE__ */ jsx(ConsumerFallback, {
-			render,
-			args,
-			builtin
-		})
-	});
-};
-//#endregion
-//#region src/components/dnd/renderer.tsx
-const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, headers, modules, frame, dynamicTailwind = false, provider }) => {
-	const module = useCompiledModule(forceFallback ? "" : preview, modules);
-	const section = {
-		id: sectionId,
-		name: sectionName,
-		code: sectionCode
-	};
-	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind && !forceFallback);
-	const renderProvider = (component) => {
-		return provider ? provider(component) : component;
-	};
-	if (forceFallback) return /* @__PURE__ */ jsx(SectionFallback, {
-		args: {
-			section,
-			reason: "forced"
-		},
-		builtin: /* @__PURE__ */ jsx(Error$1, {
-			message: "This section is not rendered in this editor.",
-			title: "Section Unavailable"
-		})
-	});
-	if (module?.error) return /* @__PURE__ */ jsx(SectionFallback, {
-		args: {
-			section,
-			reason: "compile",
-			message: module.error
-		},
-		builtin: /* @__PURE__ */ jsx(Error$1, {
-			message: module.error,
-			title: "Compile Error"
-		})
-	});
-	const Component = module?.exports?.default;
-	if (!Component) return null;
-	return /* @__PURE__ */ jsx(Frame, {
-		...frame,
-		autoHeight: true,
-		children: (container) => /* @__PURE__ */ jsx("div", {
-			ref: wrapperRef,
-			className: "w-full overflow-x-hidden",
-			"data-editor-mode": true,
-			children: /* @__PURE__ */ jsx(ErrorBoundary, {
-				resetKeys: [preview],
-				fallback: (message, reset) => /* @__PURE__ */ jsx(SectionFallback, {
-					args: {
-						section,
-						reason: "runtime",
-						message
-					},
-					builtin: /* @__PURE__ */ jsx(Error$1, {
-						message,
-						onReset: reset,
-						title: "Rendering Error"
-					})
+			children: [
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "20%",
+					minSize: "15%",
+					maxSize: "35%",
+					collapsible: true,
+					children: palette ?? /* @__PURE__ */ jsx(Palette, {})
 				}),
-				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
-					headers,
-					container
-				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
-			})
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "60%",
+					children: /* @__PURE__ */ jsx(Canvas, {})
+				}),
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "20%",
+					minSize: "15%",
+					maxSize: "35%",
+					collapsible: true,
+					children: panel ?? /* @__PURE__ */ jsx(Panel, {})
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			type: "primary",
+			shape: "circle",
+			icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
+			"aria-label": messages.canvas.palette,
+			className: "fixed right-4 bottom-4 z-20 md:hidden",
+			onClick: () => setPaletteOpen(true)
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && paletteOpen,
+			onClose: () => setPaletteOpen(false),
+			direction: "bottom",
+			size: "large",
+			title: messages.canvas.palette,
+			children: palette ?? /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Layout>" })
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && Boolean(selectedId),
+			onClose: clearSelection,
+			direction: "bottom",
+			size: "large",
+			title: messages.canvas.properties,
+			children: panel ?? /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Layout>" })
 		})
-	});
-};
-const sameValue = (a, b) => {
-	if (Object.is(a, b)) return true;
-	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((item, i) => Object.is(item, b[i]));
-	if (a && b && typeof a === "object" && typeof b === "object" && Object.getPrototypeOf(a) === Object.prototype && Object.getPrototypeOf(b) === Object.prototype) {
-		const aKeys = Object.keys(a);
-		return aKeys.length === Object.keys(b).length && aKeys.every((key) => Object.is(a[key], b[key]));
-	}
-	return false;
-};
-const sameFrame = (a, b) => {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => sameValue(a[key], b[key]));
-};
-const arePropsEqual = (prev, next) => {
-	return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => key === "frame" ? sameFrame(prev.frame, next.frame) : Object.is(prev[key], next[key]));
+	] });
 };
-var renderer_default = memo(Renderer, arePropsEqual);
 //#endregion
-//#region src/components/dnd/sortable.tsx
-const NAVIGATION_KEYS = {
-	ArrowUp: "previous",
-	ArrowDown: "next",
-	Home: "first",
-	End: "last"
-};
-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
+//#region src/components/dnd/state/use-delete-flow.ts
+const useDeleteFlow = ({ sections, remove, onBeforeDelete }) => {
+	const removeRef = useRef(remove);
+	useEffect(() => {
+		removeRef.current = remove;
 	});
-	const style = {
-		transform: CSS$1.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? .5 : 1,
-		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 (id, onDeleted) => {
+		const section = sections.find((candidate) => candidate.id === id);
+		if (!onBeforeDelete || !section) {
+			remove(id);
+			onDeleted?.();
 			return;
 		}
-		const to = NAVIGATION_KEYS[e.key];
-		if (to && onNavigate) {
-			e.preventDefault();
-			onNavigate(to);
-			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);
 		}
-		if ((e.key === "Delete" || e.key === "Backspace") && onDeleteKey) {
-			e.preventDefault();
-			onDeleteKey();
+	};
+};
+//#endregion
+//#region src/components/dnd/state/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 setRefs = (node) => {
-		setNodeRef(node);
-		setActivatorNodeRef(node);
-		nodeRef?.(node);
+};
+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 paletteSectionOf(data)?.name ?? sections.find((section) => section.id === id)?.name ?? say.section;
 	};
-	const onDelete = (e) => {
-		e.stopPropagation();
-		_onDelete?.(id);
+	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 onCopy = (e) => {
-		e.stopPropagation();
-		_onCopy?.(id);
+	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/state/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);
 	};
-	const press = (action) => (e) => {
-		e.stopPropagation();
-		action?.();
+	return {
+		inspector,
+		inspecting,
+		onInspectMove,
+		onInspectPick,
+		onInspectLeave: () => setHoverRect(null),
+		highlightRect: inspecting ? hoverRect : fieldTarget ? fieldRect : null
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		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"),
-				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"),
-				children: [
-					onMoveUp && /* @__PURE__ */ jsx(Button, {
-						icon: /* @__PURE__ */ jsx(ChevronUp, {}),
-						disabled: !canMoveUp,
-						onClick: press(onMoveUp),
-						"aria-label": "Move section up"
-					}),
-					onMoveDown && /* @__PURE__ */ jsx(Button, {
-						icon: /* @__PURE__ */ jsx(ChevronDown, {}),
-						disabled: !canMoveDown,
-						onClick: press(onMoveDown),
-						"aria-label": "Move section down"
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						icon: /* @__PURE__ */ jsx(Copy, {}),
-						onClick: onCopy,
-						"aria-label": "Duplicate section"
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						danger: true,
-						icon: /* @__PURE__ */ jsx(Trash, {}),
-						onClick: onDelete,
-						"aria-label": "Delete section"
-					})
-				]
-			})
-		]
-	});
-};
-//#endregion
-//#region src/components/dnd/overlay.tsx
-const Overlay = ({ sections, isForced, renderProps }) => {
-	const { active } = useDndContext();
-	if (!active) return null;
-	if (active.data.current?.type === "new-item") {
-		const item = active.data.current.item;
-		return /* @__PURE__ */ jsx(DefaultDraggableItem, { item });
-	}
-	const section = sections.find((s) => s.id === active.id);
-	if (section) {
-		const preview = generateSection(section.code, renderProps.fullCode, { containerId: renderProps.containerId });
-		return /* @__PURE__ */ jsx(Sortable, {
-			id: section.id,
-			name: section.name,
-			children: /* @__PURE__ */ jsx(renderer_default, {
-				preview,
-				sectionId: section.id,
-				sectionName: section.name,
-				sectionCode: section.code,
-				forceFallback: isForced?.(section) ?? false,
-				modules: renderProps.modules,
-				frame: renderProps.frame,
-				dynamicTailwind: renderProps.dynamicTailwind
-			})
-		});
-	}
-	return null;
 };
 //#endregion
-//#region src/components/dnd/use-section-document.ts
+//#region src/components/dnd/state/use-section-document.ts
 const createLastParsed = () => {
 	let last = null;
 	return {
@@ -2008,7 +2241,7 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 		view.document
 	]);
 	const selectedIndex = sections.findIndex((s) => s.id === selectedId);
-	const selectedItem = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
+	const selectedSection = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
 	const pendingRef = useRef(null);
 	useEffect(() => {
 		pendingRef.current = null;
@@ -2054,17 +2287,17 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 		sections,
 		previews,
 		selectedId,
-		selectedItem,
+		selectedSection,
 		selectedIndex,
 		select: useCallback((id) => {
 			setSelectedId((prev) => prev === id ? null : id);
 		}, []),
 		selectOnly: useCallback((id) => setSelectedId(id), []),
 		clearSelection: useCallback(() => setSelectedId(null), []),
-		add: useCallback((item, atIndex) => {
+		add: useCallback((section, atIndex) => {
 			if (refuse()) return;
 			const current = latestSections();
-			const next = { code: item.code };
+			const next = { code: section.code };
 			commit(atIndex === void 0 || atIndex < 0 ? [...current, next] : [
 				...current.slice(0, atIndex),
 				next,
@@ -2148,85 +2381,69 @@ 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 "self-closing": return {
+			title: m.cannotEdit(label),
+			description: m.selfClosing(failure.property)
 		};
 		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;
-	if (active?.data.current?.type === "new-item") return args.transform;
+	if (paletteSectionOf(active?.data)) return args.transform;
 	return restrictToVerticalAxis(args);
 };
 const NO_MODULES = {};
@@ -2244,179 +2461,56 @@ 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, {
+	const { sections, previews, selectedId, selectedSection, selectedIndex, select, selectOnly, clearSelection, add: addSection, 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) => {
 		const { active, over } = event;
 		if (!over) return;
-		if (active.data.current?.type === "new-item") {
-			const item = active.data.current.item;
+		const section = paletteSectionOf(active.data);
+		if (section) {
 			const atBottom = over.id === "sortable-area" || over.id === "sortable-area-bottom";
-			addItem(item, atBottom ? void 0 : sections.findIndex((s) => s.id === over.id));
+			addSection(section, atBottom ? void 0 : sections.findIndex((s) => s.id === over.id));
 			return;
 		}
 		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);
-	const [fieldTarget, setFieldTarget] = useState(null);
-	const [fieldRect, setFieldRect] = 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,
-		highlight: setFieldTarget
-	};
-	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);
-		});
-	};
-	const onMoveButton = (id, direction) => {
-		const to = sections.findIndex((section) => section.id === id) + (direction === "up" ? -1 : 1);
-		moveSection(id, direction);
-		if (to === 0 || to === sections.length - 1) focusSection(id);
-	};
-	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,
+	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveButton } = useDndKeyboard({
+		sections,
 		selectedId,
-		sectionNodes
-	]);
-	useEffect(() => {
-		if (selectedId === null) return;
-		const frame = requestAnimationFrame(() => {
-			sectionNodes.get(selectedId)?.scrollIntoView?.({ block: "nearest" });
-		});
-		return () => cancelAnimationFrame(frame);
-	}, [
-		sectionNodes,
+		selectedIndex,
+		selectOnly,
+		move: moveSection,
+		requestDelete
+	});
+	const { inspector, inspecting, onInspectMove, onInspectPick, onInspectLeave, highlightRect } = useInspectorState({
 		selectedId,
-		selectedIndex
-	]);
+		selectOnly,
+		sectionNodes,
+		onNodePick
+	});
 	const onChange = (next) => {
 		if (!next.id) return;
 		patch(next);
@@ -2425,8 +2519,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		bindings: bindingRegistry,
 		bindingKeys
 	}), [bindingRegistry, bindingKeys]);
-	const selectedCode = selectedItem?.code;
-	const selectedSectionId = selectedItem?.id;
+	const selectedCode = selectedSection?.code;
+	const selectedSectionId = selectedSection?.id;
 	const { fields, updatedCode, parseError } = useMemo(() => {
 		if (!selectedCode) return {
 			fields: [],
@@ -2459,8 +2553,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			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(() => {
@@ -2468,17 +2562,17 @@ 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;
+		const committed = selectedSection && getCommittedSection(selectedSection.id)?.code;
 		const result = updateAll(committed && committed !== selectedCode ? committed : updatedCode, changes.map(({ id, label, property, value: changeValue }) => ({
 			dataId: id,
 			label,
@@ -2493,12 +2587,12 @@ 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;
 		}
-		if (selectedItem) onChange({
-			...selectedItem,
+		if (selectedSection) onChange({
+			...selectedSection,
 			code: result.code
 		});
 	};
@@ -2509,14 +2603,14 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
 	const palette = {
-		items: items?.length ? items : DRAGGABLE_ITEMS,
-		onAdd: (item) => {
-			addItem(item);
+		items: items?.length ? items : PALETTE_SECTIONS,
+		onAdd: (section) => {
+			addSection(section);
 			setMobilePaletteOpen(false);
 		}
 	};
 	const panel = {
-		item: selectedItem,
+		item: selectedSection,
 		onChange,
 		onDelete,
 		onMoveUp: () => moveSection(selectedId, "up"),
@@ -2529,71 +2623,67 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		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."
-	}), /* @__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: 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" })]
-			})
-		}) : /* @__PURE__ */ jsx(SortableContext, {
-			items: sections.map((s) => s.id),
-			strategy: verticalListSortingStrategy,
-			children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
-				id: section.id,
-				name: section.name,
-				selected: selectedId === section.id,
-				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),
-				children: /* @__PURE__ */ jsx(renderer_default, {
-					preview: previews[index],
-					sectionId: section.id,
-					sectionName: section.name,
-					sectionCode: section.code,
-					forceFallback: isForced(section),
-					modules,
-					frame,
-					dynamicTailwind,
-					provider,
-					...props
+	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: messages.canvas.stale
+		}),
+		/* @__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: problem?.reason === "parse-error" ? /* @__PURE__ */ jsxs(Space, {
+					orientation: "vertical",
+					align: "center",
+					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__ */ 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: messages.canvas.empty }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? messages.canvas.emptyHintTouch : messages.canvas.emptyHintDrag })]
 				})
-			}, section.id))
-		})
-	})] });
+			}) : /* @__PURE__ */ jsx(SortableContext, {
+				items: sections.map((s) => s.id),
+				strategy: verticalListSortingStrategy,
+				children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
+					id: section.id,
+					name: section.name,
+					selected: selectedId === section.id,
+					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,
+					children: /* @__PURE__ */ jsx(renderer_default, {
+						preview: previews[index],
+						sectionId: section.id,
+						sectionName: section.name,
+						sectionCode: section.code,
+						forceFallback: isForced(section),
+						modules,
+						frame,
+						dynamicTailwind,
+						provider,
+						...props
+					})
+				}, section.id))
+			})
+		}),
+		/* @__PURE__ */ jsx(InspectorHighlight, { rect: highlightRect })
+	] });
 	return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
 		value: renderSectionFallback,
 		children: /* @__PURE__ */ jsxs(DndContext, {
@@ -2601,22 +2691,20 @@ 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),
 				...restProps,
-				children: /* @__PURE__ */ jsxs(DndEditOptionsContext.Provider, {
+				children: /* @__PURE__ */ jsx(DndEditOptionsContext.Provider, {
 					value: {
 						renderField,
 						reportError,
 						bindingOptions
 					},
-					children: [/* @__PURE__ */ jsx(DndRegionContext.Provider, {
+					children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
 						value: {
 							palette,
 							panel,
@@ -2632,7 +2720,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 : fieldTarget ? fieldRect : null })]
+					})
 				})
 			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
 				sections,
@@ -2663,6 +2751,6 @@ const useItemsEditor = useDndItems;
 /** @deprecated Renamed to `useDndChildren`. */
 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 };
+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, useDndInspector as v, DraggableItem as y };
 
-//# sourceMappingURL=dnd-BE5ZizqX.js.map
+//# sourceMappingURL=dnd-UoJILA75.js.map