@jbpark/live-editor 4.6.0 → 5.0.0

package/dist/dnd-UoJILA75.js

@@ -1,2756 +0,0 @@
-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 { 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-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 { CSS as CSS$1 } from "@dnd-kit/utilities";
-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 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, 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 ? messages.canvas.dropHere : messages.canvas.dropAtBottom
-			})
-		})]
-	});
-};
-//#endregion
-//#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/palette/draggable.tsx
-const DraggableItem = ({ item, children }) => {
-	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-		id: item.id,
-		data: paletteDragData(item)
-	});
-	return children({
-		ref: setNodeRef,
-		dragProps: {
-			...listeners,
-			...attributes
-		},
-		isDragging
-	});
-};
-const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__ */ jsx(DraggableItem, {
-	item,
-	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx(Card, {
-		ref,
-		style: { opacity: isDragging ? .5 : 1 },
-		...dragProps,
-		className: cn("cursor-grab", "outline-none focus-visible:ring-2 focus-visible:ring-blue-500", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
-		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
-		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
-		onKeyDown: (event) => {
-			dragProps.onKeyDown?.(event);
-			if (onAdd && event.key === "Enter" && event.target === event.currentTarget && !event.defaultPrevented) {
-				event.preventDefault();
-				onAdd(item);
-			}
-		},
-		children: item.name
-	})
-});
-//#endregion
-//#region src/components/dnd/canvas/section-fallback-context.ts
-const SectionFallbackContext = createContext(void 0);
-//#endregion
-//#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 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/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
-		})
-	});
-	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) {
-		case "append":
-		case "duplicate": return new Set(selected);
-		case "move-selected": return moveSelectedIndices(Array.from({ length: count }, (_, index) => index), new Set(command.indices), command.direction).indices;
-		default: return /* @__PURE__ */ new Set();
-	}
-};
-const useStructuralSelection = (count, revision) => {
-	const selection = useMultiSelect(count);
-	const [seen, setSeen] = useState(revision);
-	const [pending, setPending] = useState(null);
-	if (revision !== seen) {
-		setSeen(revision);
-		setPending(null);
-		if (pending?.matches(revision) && pending.selection.size > 0) selection.replace(pending.selection);
-		else selection.clear();
-	}
-	const record = (next, matches, { now = false } = {}) => {
-		setPending({
-			matches,
-			selection: next
-		});
-		if (!now) return;
-		if (next.size > 0) selection.replace(next);
-		else selection.clear();
-	};
-	return {
-		selection,
-		record
-	};
-};
-//#endregion
-//#region src/components/dnd/panel/use-dnd-children.ts
-const producedBy = (expected, action) => {
-	if (action.type === "move-selected") {
-		const moved = JSON.stringify(moveSelectedIndices(expected, new Set(action.indices), action.direction).items);
-		return (revision) => revision === moved;
-	}
-	const added = action.type === "append" ? 1 : action.type === "duplicate" ? action.indices.length : 0;
-	return (revision) => {
-		const next = JSON.parse(revision);
-		return next.length === expected.length + added && expected.every((signature, index) => next[index] === signature);
-	};
-};
-const useDndChildren = (items, { onChange } = {}) => {
-	const expected = useMemo(() => getChildrenSignatures(items), [items]);
-	const revision = JSON.stringify(expected);
-	const { selection, record } = useStructuralSelection(items.length, revision);
-	const commit = (action) => {
-		const edit = {
-			kind: "children-edit",
-			expected,
-			action
-		};
-		const next = selectionAfter(action, selection.selected, items.length);
-		if (next.size > 0) record(next, producedBy(expected, action));
-		onChange?.(JSON.stringify(edit));
-	};
-	return {
-		items,
-		selection,
-		actions: {
-			move: (from, to) => commit({
-				type: "move",
-				from,
-				to
-			}),
-			remove: (index) => commit({
-				type: "remove",
-				indices: [index]
-			}),
-			add: () => commit({ type: "append" }),
-			duplicateSelected: () => commit({
-				type: "duplicate",
-				indices: [...selection.selected]
-			}),
-			moveSelected: (direction) => commit({
-				type: "move-selected",
-				indices: [...selection.selected],
-				direction
-			}),
-			removeSelected: () => commit({
-				type: "remove",
-				indices: [...selection.selected]
-			})
-		}
-	};
-};
-//#endregion
-//#region src/components/dnd/panel/children.tsx
-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) => {
-			const editableNodes = findEditableChildren(item);
-			if (editableNodes.length > 0) map.set(index, editableNodes);
-		});
-		return map;
-	}, [items]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-3",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold text-green-700",
-					children: messages.children.heading(items.length)
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "small",
-					color: "green",
-					icon: /* @__PURE__ */ jsx(Plus, {}),
-					onClick: actions.add,
-					children: messages.children.add
-				})]
-			}),
-			/* @__PURE__ */ jsx(BulkActionsBar, {
-				count: selection.selected.size,
-				onDuplicate: actions.duplicateSelected,
-				onMoveUp: () => actions.moveSelected("up"),
-				onMoveDown: () => actions.moveSelected("down"),
-				onDelete: actions.removeSelected,
-				onClear: selection.clear
-			}),
-			items.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-2 rounded border border-green-200 bg-green-50 p-3",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center space-x-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								onClick: (e) => selection.toggle(itemIndex, e.shiftKey),
-								className: "inline-flex",
-								children: /* @__PURE__ */ jsx(Checkbox, {
-									checked: selection.isSelected(itemIndex),
-									onChange: () => {}
-								})
-							}), /* @__PURE__ */ jsx("div", {
-								className: "text-xs font-medium text-green-800",
-								children: messages.children.child(itemIndex + 1, item.tagName || "fragment")
-							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex space-x-1",
-							children: [
-								/* @__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, {
-									"aria-label": messages.children.delete,
-									title: messages.children.delete,
-									danger: true,
-									size: "small",
-									icon: /* @__PURE__ */ jsx(X, {}),
-									onClick: () => actions.remove(itemIndex)
-								})
-							]
-						})]
-					}),
-					editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs font-medium text-green-700",
-							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", {
-								"data-node-id": nodeId,
-								className: "rounded border border-green-100 bg-white p-2\n                      data-[picked]:ring-2 data-[picked]:ring-blue-400",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "mb-1 text-xs text-green-600",
-									children: editableNode.tagName
-								}), /* @__PURE__ */ jsx(Node, {
-									data: editableNode,
-									onChange: onNodeChange
-								})]
-							}, `editable-${nodeId || idx}`);
-						})]
-					}),
-					!!item.children && !editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-1",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs font-medium text-green-700",
-							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, {
-								data: node,
-								onChange: onNodeChange
-							})
-						}, `node-${itemIndex}-${nodeIndex}`))]
-					})
-				]
-			}, item.id || itemIndex))
-		]
-	});
-};
-//#endregion
-//#region src/components/dnd/panel/field-kind.ts
-const isColorProperty = (property) => property.toLowerCase().includes("color");
-const getFieldKind = (binding) => {
-	const { property, type, value } = binding;
-	if (binding.canEditValue === false) return "readonly";
-	if (property === "items" || property === "data" || type === "array") return "items";
-	if (type === "richtext") return "richtext";
-	if (property === BINDING_PROP.INNER_HTML) return "html";
-	if (type === "jsx") return "jsx";
-	if (property === "children" && Array.isArray(value)) return "children";
-	if (typeof value === "object" && value !== null && !Array.isArray(value)) return "object";
-	if (type === "boolean" || typeof value === "boolean") return "boolean";
-	if (binding.options && Array.isArray(binding.options)) return "select";
-	if (type === "color" || isColorProperty(property)) return "color";
-	if (type === "date") return "date";
-	if (type === "url") return "url";
-	if (type === "number" || typeof value === "number") return "number";
-	return "text";
-};
-const isStructuralFieldKind = (kind) => kind === "items" || kind === "children";
-//#endregion
-//#region src/components/dnd/panel/sortable-items.tsx
-const label = (messages, items, id) => {
-	const index = items.findIndex((item) => item.id === id);
-	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: {
-		delay: 250,
-		tolerance: 5
-	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-	const onDragEnd = ({ active, over }) => {
-		const from = items.find((item) => item.id === active.id);
-		const to = items.find((item) => item.id === over?.id);
-		if (from && to && from !== to) onMove(from, to.index);
-	};
-	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 }) => 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, {
-			items: items.map((item) => item.id),
-			strategy: verticalListSortingStrategy,
-			disabled,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "space-y-4",
-				children: items.map(children)
-			})
-		})
-	});
-};
-const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls, className, children }) => {
-	const messages = useLiveMessages();
-	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
-		id,
-		disabled
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref: setNodeRef,
-		style: {
-			transform: CSS$1.Translate.toString(transform),
-			transition
-		},
-		className: cn(className, isDragging && "relative z-10 shadow-md"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center space-x-1",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						ref: setActivatorNodeRef,
-						...attributes,
-						...listeners,
-						"aria-label": 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 })
-					}),
-					checkbox,
-					/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						"aria-expanded": expanded,
-						onClick: onToggle,
-						className: "inline-flex items-center space-x-1 rounded px-1 text-xs\n              font-medium",
-						children: [expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }), /* @__PURE__ */ jsx("span", { children: title })]
-					})
-				]
-			}), controls]
-		}), expanded && children]
-	});
-};
-//#endregion
-//#region src/components/dnd/panel/use-dnd-items.ts
-const createPendingCommit = () => {
-	let current = null;
-	return {
-		read: () => current,
-		write: (next) => {
-			current = next;
-		},
-		clear: () => {
-			current = null;
-		}
-	};
-};
-const bindingsInJSX = (source, bindingOptions) => {
-	const nodes = extract(source, bindingOptions);
-	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
-	if (container) return [container];
-	const bindings = [];
-	nodes.forEach((n) => {
-		if (n.bindings && n.bindings.length > 0 && n.dataAttributes.some((a) => a.name === "data-id")) bindings.push(n);
-		bindings.push(...findEditableChildren(n));
-	});
-	return bindings;
-};
-const parseSource = (value, bindingOptions) => {
-	const ast = parseArrayExpression(value);
-	if (!ast) return {
-		objectItems: [],
-		primitiveItems: [],
-		parseError: true
-	};
-	const objectItems = [];
-	const primitiveItems = [];
-	ast.elements.forEach((element, elementIndex) => {
-		if (!import_lib.isExpression(element)) return;
-		if (!import_lib.isObjectExpression(element)) {
-			const extracted = extractNodeValue(element);
-			primitiveItems.push({
-				id: nanoid(6),
-				index: primitiveItems.length,
-				elementIndex,
-				source: value.slice(element.start, element.end),
-				value: extracted.value,
-				type: extracted.type
-			});
-			return;
-		}
-		const jsxBindings = {};
-		const jsxFallbacks = {};
-		element.properties.forEach((prop) => {
-			if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !(import_lib.isJSXElement(prop.value) || import_lib.isJSXFragment(prop.value))) return;
-			const propertyName = prop.key.name;
-			try {
-				const found = bindingsInJSX(value.slice(prop.value.start, prop.value.end), bindingOptions);
-				if (found.length > 0) jsxBindings[propertyName] = found;
-				else jsxFallbacks[propertyName] = value.slice(prop.value.start, prop.value.end);
-			} catch (error) {
-				console.error(`Failed to parse JSX in property '${propertyName}':`, error);
-			}
-		});
-		const editableProperties = extractObjectProperties(element);
-		for (const property of Object.values(editableProperties)) if (property.type === "array" || property.type === "object") property.value = value.slice(property.astNode.start, property.astNode.end);
-		objectItems.push({
-			id: nanoid(6),
-			index: objectItems.length,
-			elementIndex,
-			source: value.slice(element.start, element.end),
-			editableProperties,
-			jsxBindings,
-			jsxFallbacks
-		});
-	});
-	return {
-		objectItems,
-		primitiveItems,
-		parseError: false
-	};
-};
-const createIdentityState = (value, kind, items, ids = items.map((item) => item.id)) => ({
-	value,
-	kind,
-	ids,
-	signatures: items.map((item) => item.source)
-});
-const reconcileIdentityState = (current, value, kind, items) => {
-	if (current && current.value === value && current.kind === kind && current.ids.length === items.length) return current;
-	if (!current || current.kind !== kind) return createIdentityState(value, kind, items);
-	const previousCounts = /* @__PURE__ */ new Map();
-	const nextCounts = /* @__PURE__ */ new Map();
-	current.signatures.forEach((signature) => {
-		previousCounts.set(signature, (previousCounts.get(signature) ?? 0) + 1);
-	});
-	items.forEach((item) => {
-		nextCounts.set(item.source, (nextCounts.get(item.source) ?? 0) + 1);
-	});
-	const ids = items.map((item) => {
-		const previousIndex = current.signatures.indexOf(item.source);
-		return previousIndex >= 0 && previousCounts.get(item.source) === 1 && nextCounts.get(item.source) === 1 ? current.ids[previousIndex] : item.id;
-	});
-	return createIdentityState(value, kind, items, ids);
-};
-const moveId = (ids, from, to) => {
-	const next = [...ids];
-	const [moved] = next.splice(from, 1);
-	next.splice(to, 0, moved);
-	return next;
-};
-const removeIds = (ids, indices) => {
-	return ids.filter((_, index) => !indices.has(index));
-};
-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: messagesRef.current.editErrors.itemsParseFailed,
-			description: messagesRef.current.editErrors.checkConsole
-		});
-	}, [parseError]);
-	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
-	const isPrimitive = kind === "primitive";
-	const rawItems = isPrimitive ? primitiveItems : objectItems;
-	const [identityState, setIdentityState] = useState(() => createIdentityState(value, kind, rawItems));
-	const identity = useMemo(() => reconcileIdentityState(identityState, value, kind, rawItems), [
-		identityState,
-		kind,
-		rawItems,
-		value
-	]);
-	const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
-	const { selection, record } = useStructuralSelection(isPrimitive ? primitiveItems.length : objectItems.length, value);
-	const [pending] = useState(createPendingCommit);
-	useEffect(() => {
-		pending.clear();
-	});
-	const latest = () => {
-		const last = pending.read();
-		if (last?.from !== value) return {
-			value,
-			items: rawItems,
-			ids: identity.ids,
-			selected: selection.selected
-		};
-		const parsed = parseSource(last.value);
-		return {
-			value: last.value,
-			items: isPrimitive ? parsed.primitiveItems : parsed.objectItems,
-			ids: last.ids,
-			selected: last.selected
-		};
-	};
-	const locate = (snapshot, elementIndex) => {
-		const shown = rawItems.find((item) => item.elementIndex === elementIndex);
-		if (!shown) return;
-		const index = snapshot.ids.indexOf(identity.ids[shown.index]);
-		return index >= 0 ? snapshot.items[index] : null;
-	};
-	const commit = (snapshot, next, nextIds, nextSelection) => {
-		if (next === null) {
-			reportError({
-				type: "items",
-				title: messages.editErrors.itemUpdateFailed,
-				description: messages.editErrors.itemUpdateFailedDetail
-			});
-			return false;
-		}
-		const parsed = parseSource(next);
-		const nextItems = kind === "primitive" ? parsed.primitiveItems : parsed.objectItems;
-		const ids = nextIds ?? snapshot.ids;
-		pending.write({
-			from: value,
-			value: next,
-			ids,
-			selected: nextSelection
-		});
-		setIdentityState(createIdentityState(next, kind, nextItems, ids));
-		record(nextSelection, (revision) => revision === next, { now: true });
-		onChange?.(next);
-		return true;
-	};
-	const elementIndicesOf = (snapshot, indices) => new Set(snapshot.items.filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
-	const updateProperty = (elementIndex, propertyKey, next) => {
-		const snapshot = latest();
-		const item = locate(snapshot, elementIndex);
-		if (item === null) return;
-		commit(snapshot, updateArrayItemProperty(snapshot.value, item?.elementIndex ?? elementIndex, propertyKey, next, render), void 0, new Set(snapshot.selected));
-	};
-	const updateValue = (elementIndex, next) => {
-		const snapshot = latest();
-		const item = locate(snapshot, elementIndex);
-		if (item === null) return;
-		commit(snapshot, updateArrayItemValue(snapshot.value, item?.elementIndex ?? elementIndex, next), void 0, new Set(snapshot.selected));
-	};
-	const actions = {
-		add: () => {
-			const snapshot = latest();
-			const next = appendArrayItem(snapshot.value, kind);
-			commit(snapshot, next, next ? [...snapshot.ids, nanoid(6)] : void 0, selectionAfter({ type: "append" }, snapshot.selected, snapshot.items.length));
-		},
-		move: (elementIndex, toIndex) => {
-			const snapshot = latest();
-			const from = locate(snapshot, elementIndex);
-			const target = snapshot.items.find((item) => item.index === toIndex);
-			if (!from || !target) return;
-			commit(snapshot, moveArrayItem(snapshot.value, from.elementIndex, target.elementIndex), moveId(snapshot.ids, from.index, target.index), /* @__PURE__ */ new Set());
-		},
-		remove: (elementIndex) => {
-			const snapshot = latest();
-			const removed = locate(snapshot, elementIndex);
-			if (removed === null) return;
-			commit(snapshot, removeArrayItems(snapshot.value, /* @__PURE__ */ new Set([removed?.elementIndex ?? elementIndex]), kind), removed ? removeIds(snapshot.ids, /* @__PURE__ */ new Set([removed.index])) : void 0, /* @__PURE__ */ new Set());
-		},
-		duplicateSelected: () => {
-			const snapshot = latest();
-			const selected = elementIndicesOf(snapshot, snapshot.selected);
-			const next = duplicateArrayItems(snapshot.value, selected);
-			const copied = snapshot.items.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
-			commit(snapshot, next, next ? [...snapshot.ids, ...copied] : void 0, selectionAfter({
-				type: "duplicate",
-				indices: [...snapshot.selected]
-			}, snapshot.selected, snapshot.items.length));
-		},
-		moveSelected: (direction) => {
-			const snapshot = latest();
-			const nextIdentity = moveSelectedIndices(snapshot.ids, snapshot.selected, direction);
-			const result = moveArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), direction);
-			if (!result) {
-				commit(snapshot, null, void 0, snapshot.selected);
-				return;
-			}
-			const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => import_lib.isExpression(node) && import_lib.isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
-			commit(snapshot, result.code, nextIdentity.items, new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
-		},
-		removeSelected: () => {
-			const snapshot = latest();
-			commit(snapshot, removeArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), kind), removeIds(snapshot.ids, snapshot.selected), /* @__PURE__ */ new Set());
-		}
-	};
-	const items = isPrimitive ? primitiveItems.map((item) => ({
-		id: identity.ids[item.index] ?? item.id,
-		index: item.index,
-		elementIndex: item.elementIndex,
-		properties: [],
-		nested: [],
-		value: {
-			id: `primitive-${item.id}`,
-			label: `item-${item.index}`,
-			property: item.type,
-			value: item.value ?? "",
-			rawValue: item.type === "unknown" ? item.source : String(item.value ?? ""),
-			canEditValue: canLosslesslyEvaluateSource(item.source),
-			onChange: (next) => updateValue(item.elementIndex, next)
-		}
-	})) : objectItems.map((item) => {
-		const id = identity.ids[item.index] ?? item.id;
-		const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
-			const binding = resolveRenderEntry(render, key);
-			const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
-			return {
-				...toBindingFields(binding),
-				id: `item-${id}-${key}`,
-				meta: {
-					...binding.meta,
-					valueType: prop.type
-				},
-				value: parseValue(String(prop.value)),
-				rawValue: prop.type === "unknown" ? propertySource : String(prop.value),
-				canEditValue: canLosslesslyEvaluateSource(propertySource),
-				onChange: (next) => updateProperty(item.elementIndex, key, next)
-			};
-		});
-		const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
-			property,
-			elements: nodes.flatMap((node) => {
-				const source = resolvePanelBindings(node);
-				if (!source) return [];
-				return [{
-					id: source.id,
-					tagName: source.tagName,
-					bindings: withPanelCommit(source.bindings, onNodeChange)
-				}];
-			})
-		})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
-			property,
-			elements: [],
-			fallback: {
-				id: `item-${id}-${property}-jsx`,
-				label: property,
-				property,
-				type: "jsx",
-				value: code,
-				rawValue: code,
-				canEditValue: true,
-				onChange: (next) => updateProperty(item.elementIndex, property, next)
-			}
-		}))];
-		return {
-			id,
-			index: item.index,
-			elementIndex: item.elementIndex,
-			properties,
-			nested
-		};
-	});
-	return {
-		kind,
-		items,
-		selection,
-		expansion: {
-			expandedIds: items.flatMap((item) => collapsed.has(item.id) ? [] : [item.id]),
-			isExpanded: (id) => !collapsed.has(id),
-			toggle: (id) => setCollapsed((previous) => {
-				const next = new Set(previous);
-				if (!next.delete(id)) next.add(id);
-				return next;
-			}),
-			setExpanded: (ids) => {
-				const expanded = new Set(ids);
-				setCollapsed(new Set(items.flatMap((item) => expanded.has(item.id) ? [] : [item.id])));
-			}
-		},
-		actions,
-		canEditStructure,
-		parseError
-	};
-};
-//#endregion
-//#region src/components/dnd/panel/items.tsx
-const NestedGroup = ({ group, onNodeChange }) => {
-	if (group.fallback) return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-xs font-medium text-blue-700",
-			children: group.property
-		}), /* @__PURE__ */ jsx(Field, {
-			binding: group.fallback,
-			onNodeChange
-		})]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "text-xs font-medium text-blue-700",
-			children: [
-				group.property,
-				" Bindings (",
-				group.elements.length,
-				"):"
-			]
-		}), group.elements.map((element) => /* @__PURE__ */ jsxs("div", {
-			"data-node-id": element.id,
-			className: "rounded border border-blue-100 bg-blue-50 p-2\n            data-[picked]:ring-2 data-[picked]:ring-blue-400",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "mb-1 text-xs text-blue-600",
-				children: [
-					"<",
-					element.tagName,
-					">"
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "space-y-2 rounded",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "space-y-1",
-					children: element.bindings.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
-						})]
-					}, `${binding.property}-${binding.label}`))
-				})
-			})]
-		}, `${group.property}-${element.id}`))]
-	});
-};
-const Items = ({ value, render, onChange, onChildChange }) => {
-	const messages = useLiveMessages();
-	const { kind, items, selection, expansion, actions, canEditStructure, parseError } = useDndItems(value, {
-		render,
-		onChange,
-		onNodeChange: onChildChange
-	});
-	const header = /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-sm font-semibold",
-			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: 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: 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: messages.items.empty
-		})]
-	});
-	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
-		count: selection.selected.size,
-		disabled: !canEditStructure,
-		onDuplicate: actions.duplicateSelected,
-		onMoveUp: () => actions.moveSelected("up"),
-		onMoveDown: () => actions.moveSelected("down"),
-		onDelete: actions.removeSelected,
-		onClear: selection.clear
-	});
-	const itemControls = (item) => /* @__PURE__ */ jsxs("div", {
-		className: "flex space-x-1",
-		children: [
-			/* @__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)
-			}),
-			/* @__PURE__ */ jsx(Button, {
-				danger: true,
-				size: "small",
-				icon: /* @__PURE__ */ jsx(X, {}),
-				"aria-label": messages.items.delete,
-				disabled: !canEditStructure || items.length <= 1,
-				onClick: () => actions.remove(item.elementIndex)
-			})
-		]
-	});
-	const itemCheckbox = (item) => /* @__PURE__ */ jsx("div", {
-		onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
-		className: "inline-flex",
-		children: /* @__PURE__ */ jsx(Checkbox, {
-			checked: selection.isSelected(item.index),
-			disabled: !canEditStructure,
-			onChange: () => {}
-		})
-	});
-	const objectBody = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "space-y-2",
-		children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col space-y-2",
-			children: [/* @__PURE__ */ jsx("label", {
-				className: "w-20 shrink-0 text-xs font-medium",
-				children: binding.label
-			}), /* @__PURE__ */ jsx(Field, {
-				binding,
-				onNodeChange: onChildChange
-			})]
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "text-right text-xs text-gray-500",
-			children: [
-				"(",
-				String(binding.meta?.valueType),
-				")"
-			]
-		})] }, `${item.id}-${binding.property}-${binding.label}`))
-	}), /* @__PURE__ */ jsx("div", {
-		className: "space-y-3 border-t pt-2",
-		children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
-			group,
-			onNodeChange: onChildChange
-		}, group.property)) : /* @__PURE__ */ jsxs("div", {
-			className: "text-xs text-gray-500",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					children: "✓"
-				}),
-				" ",
-				messages.items.noNestedBindings
-			]
-		})
-	})] });
-	const allExpanded = expansion.expandedIds.length === items.length;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
-		children: [
-			header,
-			items.length > 1 && /* @__PURE__ */ jsx("div", {
-				className: "flex justify-end",
-				children: /* @__PURE__ */ jsx(Button, {
-					size: "small",
-					variant: "text",
-					onClick: () => expansion.setExpanded(allExpanded ? [] : items.map((item) => item.id)),
-					children: allExpanded ? 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: messages.items.structureLocked
-			}),
-			/* @__PURE__ */ jsx(SortableItems, {
-				items,
-				disabled: !canEditStructure,
-				onMove: (item, toIndex) => actions.move(item.elementIndex, toIndex),
-				children: (item) => /* @__PURE__ */ jsx(ItemCard, {
-					id: item.id,
-					title: messages.items.item(item.index + 1),
-					disabled: !canEditStructure,
-					expanded: expansion.isExpanded(item.id),
-					onToggle: () => expansion.toggle(item.id),
-					checkbox: itemCheckbox(item),
-					controls: itemControls(item),
-					className: kind === "primitive" ? "space-y-2 rounded border border-gray-100 bg-gray-50 p-2" : "space-y-3 rounded border bg-gray-50 p-3",
-					children: kind === "primitive" ? /* @__PURE__ */ jsx(Field, {
-						binding: item.value,
-						onNodeChange: onChildChange
-					}) : objectBody(item)
-				}, item.id)
-			})
-		]
-	});
-};
-//#endregion
-//#region src/components/dnd/panel/field.tsx
-const normalizeToHex = (value) => {
-	const trimmed = value.trim();
-	if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(trimmed)) return trimmed;
-	return "#000000";
-};
-const parseDateValue = (value) => {
-	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
-	if (!match) return;
-	const [, year, month, day] = match;
-	const date = new Date(Number(year), Number(month) - 1, Number(day));
-	return Number.isNaN(date.getTime()) ? void 0 : date;
-};
-const formatDateValue = (date) => {
-	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-};
-const COLOR_COMMIT_DELAY = 75;
-const RICHTEXT_TOOLBAR = [
-	"bold",
-	"italic",
-	"underline",
-	"bulletList",
-	"orderedList",
-	"link"
-];
-const JSXEditorField = ({ value, isHTML, onSave }) => {
-	const selectionRef = useRef(null);
-	const focusedRef = useRef(false);
-	const handleUpdate = useCallback((update) => {
-		selectionRef.current = update.state.selection;
-	}, []);
-	const handleCreateEditor = useCallback((view) => {
-		if (selectionRef.current) view.dispatch({ selection: selectionRef.current });
-		if (focusedRef.current) view.focus();
-	}, []);
-	const handleFocus = useCallback(() => {
-		focusedRef.current = true;
-	}, []);
-	const handleBlur = useCallback((event) => {
-		if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusedRef.current = false;
-	}, []);
-	return /* @__PURE__ */ jsx("div", {
-		onFocusCapture: handleFocus,
-		onBlurCapture: handleBlur,
-		children: /* @__PURE__ */ jsx(Core, {
-			value,
-			height: "150px",
-			fragment: !isHTML,
-			raw: isHTML,
-			onSave,
-			onUpdate: handleUpdate,
-			onCreateEditor: handleCreateEditor
-		})
-	});
-};
-const ColorPickerField = ({ value, onChange }) => {
-	const [liveValue, setLiveValue] = useState(value);
-	const [prevValue, setPrevValue] = useState(value);
-	const lastCommittedRef = useRef(value);
-	if (value !== prevValue) {
-		setPrevValue(value);
-		setLiveValue(value);
-	}
-	useEffect(() => {
-		lastCommittedRef.current = value;
-	}, [value]);
-	const commit = (next) => {
-		if (next === lastCommittedRef.current) return;
-		lastCommittedRef.current = next;
-		onChange(next);
-	};
-	const debouncedCommit = useDebounce(() => commit(liveValue), {
-		delay: COLOR_COMMIT_DELAY,
-		autoInvoke: false
-	});
-	return /* @__PURE__ */ jsx(ColorPicker, {
-		showText: true,
-		value: liveValue,
-		onChange: (next) => {
-			setLiveValue(next);
-			debouncedCommit();
-		},
-		onOpenChange: (open) => {
-			if (!open) commit(liveValue);
-		}
-	});
-};
-const FieldError = ({ message }) => message ? /* @__PURE__ */ jsx("p", {
-	className: "mt-1 mb-0 text-xs text-red-500",
-	children: message
-}) : null;
-const BuiltinField = ({ binding, onNodeChange }) => {
-	const messages = useLiveMessages();
-	const validationOptions = { messages: messages.validation };
-	const { id, value, rawValue, onChange } = binding;
-	const [validationError, setValidationError] = useState(null);
-	const [text, setText] = useState(rawValue);
-	const [prevRawValue, setPrevRawValue] = useState(rawValue);
-	if (rawValue !== prevRawValue) {
-		setPrevRawValue(rawValue);
-		setText(rawValue);
-	}
-	const kind = getFieldKind(binding);
-	if (kind === "readonly") return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1 rounded border border-dashed border-amber-200 p-3\n          text-xs text-amber-700",
-		children: [
-			/* @__PURE__ */ jsx("div", { children: messages.panel.expressionPreserved }),
-			/* @__PURE__ */ jsx("code", {
-				className: "block overflow-x-auto text-amber-800",
-				children: rawValue
-			}),
-			/* @__PURE__ */ jsx("div", { children: messages.panel.useCodeEditor })
-		]
-	});
-	const commitIfChanged = (next) => {
-		if (next !== (typeof next === "string" ? rawValue : value)) onChange(next);
-	};
-	if (kind === "items") return /* @__PURE__ */ jsx(Items, {
-		value: rawValue,
-		render: binding.render,
-		onChange,
-		onChildChange: onNodeChange
-	});
-	if (kind === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
-		value: rawValue,
-		toolbar: RICHTEXT_TOOLBAR,
-		onChange: commitIfChanged
-	});
-	if (kind === "html" || kind === "jsx") return /* @__PURE__ */ jsx(JSXEditorField, {
-		value: rawValue,
-		isHTML: kind === "html",
-		onSave: commitIfChanged
-	});
-	if (kind === "children") return /* @__PURE__ */ jsx(Children$1, {
-		value,
-		onChange,
-		onNodeChange
-	});
-	if (kind === "object") {
-		const objectValue = value;
-		return /* @__PURE__ */ jsx("div", {
-			className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
-			children: Object.entries(objectValue).map(([key, val]) => {
-				const nested = resolveRenderEntry(binding.render, key);
-				return /* @__PURE__ */ jsxs("div", {
-					className: "space-y-1",
-					children: [/* @__PURE__ */ jsx("label", {
-						className: "block text-xs font-medium text-gray-600",
-						children: nested.label
-					}), /* @__PURE__ */ jsx(Field, {
-						binding: {
-							...toBindingFields(nested),
-							id,
-							value: val,
-							rawValue: typeof val === "object" && val !== null ? JSON.stringify(val) : String(val),
-							onChange: (next) => {
-								onChange({
-									...objectValue,
-									[key]: next
-								});
-							}
-						},
-						onNodeChange
-					})]
-				}, key);
-			})
-		});
-	}
-	if (kind === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
-		checked: value === true || value === "true",
-		onChange: (checked) => {
-			onChange(checked);
-		}
-	});
-	const stringValue = rawValue;
-	if (kind === "select") return /* @__PURE__ */ jsx(Select, {
-		value: stringValue,
-		options: binding.options ?? [],
-		onChange: commitIfChanged
-	});
-	if (kind === "color") return /* @__PURE__ */ jsx(ColorPickerField, {
-		value: normalizeToHex(stringValue),
-		onChange: commitIfChanged
-	});
-	if (kind === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
-		value: parseDateValue(stringValue),
-		onChange: (date) => {
-			const next = date ? formatDateValue(date) : "";
-			const result = validateBindingValue(binding, next, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
-		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
-	if (kind === "url") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
-		type: "url",
-		value: text,
-		onChange: (e) => setText(e.target.value),
-		placeholder: messages.panel.urlPlaceholder,
-		onBlur: (e) => {
-			const next = e.target.value.trim();
-			const result = validateBindingValue(binding, next, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
-		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
-	if (kind === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
-		type: "number",
-		value: text,
-		onChange: (e) => setText(e.target.value),
-		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, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
-		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input.TextArea, {
-		value: text,
-		onChange: (e) => setText(e.target.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, validationOptions);
-			if (!result.valid) {
-				setValidationError(result.message ?? messages.panel.invalidValue);
-				return;
-			}
-			setValidationError(null);
-			commitIfChanged(next);
-		}
-	}), /* @__PURE__ */ jsx(FieldError, { message: validationError })] });
-};
-const Field = (props) => {
-	const { renderField } = useDndEditOptions();
-	const builtin = /* @__PURE__ */ jsx(BuiltinField, { ...props });
-	if (!renderField) return builtin;
-	const custom = renderField(props, builtin);
-	return custom === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: custom });
-};
-//#endregion
-//#region src/components/dnd/panel/field-group.tsx
-const FieldGroup = ({ bindings, onNodeChange }) => /* @__PURE__ */ jsx("div", {
-	className: "space-y-2 rounded",
-	children: /* @__PURE__ */ jsx("div", {
-		className: "space-y-1",
-		children: bindings.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
-			})]
-		}, `${binding.property}-${binding.label}`))
-	})
-});
-//#endregion
-//#region src/components/dnd/panel/panel.tsx
-const groupBindingsById = (bindings) => {
-	const groups = /* @__PURE__ */ new Map();
-	for (const binding of bindings) {
-		const group = groups.get(binding.id);
-		if (group) group.push(binding);
-		else groups.set(binding.id, [binding]);
-	}
-	return [...groups.values()];
-};
-const describeElement = (binding) => {
-	const { tagName = "element", text = "" } = binding.element ?? {};
-	return {
-		tagName,
-		text,
-		label: text ? `${tagName} "${text}"` : tagName
-	};
-};
-const nodeIdOf = (target) => target instanceof Element && target.closest("[data-node-id]")?.getAttribute("data-node-id") || null;
-const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange, readOnly = false }) => {
-	const messages = useLiveMessages();
-	const groups = groupBindingsById(bindings);
-	const rootRef = useRef(null);
-	const inspector = useContext(DndInspectorContext);
-	const pickedId = (inspector?.picked ?? null)?.id;
-	const highlight = inspector?.highlight;
-	const [hoveredId, setHoveredId] = useState(null);
-	const [focusedId, setFocusedId] = useState(null);
-	const targetId = hoveredId ?? focusedId;
-	useEffect(() => {
-		if (!highlight) return;
-		highlight(targetId);
-		return () => highlight(null);
-	}, [highlight, targetId]);
-	useEffect(() => {
-		const root = rootRef.current;
-		if (!root || !pickedId) return;
-		const target = root.querySelector(`[data-node-id="${CSS.escape(pickedId)}"]`);
-		if (!target) return;
-		target.setAttribute("data-picked", "");
-		const until = performance.now() + 600;
-		let frame = 0;
-		const keepInView = () => {
-			const box = target.getBoundingClientRect();
-			const view = root.getBoundingClientRect();
-			if (box.top < view.top || box.bottom > view.bottom) target.scrollIntoView?.({ block: "nearest" });
-			if (performance.now() < until) frame = requestAnimationFrame(keepInView);
-		};
-		keepInView();
-		return () => {
-			cancelAnimationFrame(frame);
-			target.removeAttribute("data-picked");
-		};
-	}, [pickedId, groups.length]);
-	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
-		className: cn("p-4 text-sm text-gray-500"),
-		children: messages.panel.selectSection
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref: rootRef,
-		onPointerOver: (e) => setHoveredId(nodeIdOf(e.target)),
-		onPointerLeave: () => setHoveredId(null),
-		onFocus: (e) => setFocusedId(nodeIdOf(e.target)),
-		onBlur: (e) => {
-			if (!e.currentTarget.contains(e.relatedTarget)) setFocusedId(null);
-		},
-		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsx(Typography.Title, {
-					className: "text-lg font-semibold",
-					children: item.name
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
-					children: [
-						onMoveUp && /* @__PURE__ */ jsx(Button, {
-							icon: /* @__PURE__ */ jsx(ChevronUp, {}),
-							disabled: !canMoveUp,
-							onClick: onMoveUp,
-							"aria-label": messages.section.moveUp
-						}),
-						onMoveDown && /* @__PURE__ */ jsx(Button, {
-							icon: /* @__PURE__ */ jsx(ChevronDown, {}),
-							disabled: !canMoveDown,
-							onClick: onMoveDown,
-							"aria-label": messages.section.moveDown
-						}),
-						onDelete && /* @__PURE__ */ jsx(Button, {
-							danger: true,
-							icon: /* @__PURE__ */ jsx(Trash, {}),
-							onClick: () => onDelete(item.id),
-							"aria-label": messages.section.delete
-						})
-					]
-				})]
-			}),
-			readOnly && /* @__PURE__ */ jsx(Typography.Text, {
-				role: "status",
-				className: "block text-xs text-amber-700",
-				children: messages.panel.readOnly
-			}),
-			!groups.length && /* @__PURE__ */ jsx(Typography.Text, {
-				className: "text-xs text-gray-400",
-				children: messages.panel.noEditableElements
-			}),
-			groups.map((group) => {
-				const element = describeElement(group[0]);
-				return /* @__PURE__ */ jsxs("div", {
-					"data-node-id": group[0].id,
-					role: "group",
-					"aria-label": element.label,
-					className: "rounded data-[picked]:ring-2 data-[picked]:ring-blue-400\n              data-[picked]:ring-offset-2",
-					children: [groups.length > 1 && /* @__PURE__ */ jsxs("div", {
-						className: "mb-2 flex min-w-0 items-baseline gap-1.5 border-b\n                  border-gray-100 pb-1 text-xs",
-						children: [/* @__PURE__ */ jsx("code", {
-							className: "shrink-0 text-gray-500",
-							children: element.tagName
-						}), element.text && /* @__PURE__ */ jsx("span", {
-							className: "truncate text-gray-400",
-							children: element.text
-						})]
-					}), /* @__PURE__ */ jsx(FieldGroup, {
-						bindings: group,
-						onNodeChange
-					})]
-				}, group[0].id);
-			})
-		]
-	});
-};
-//#endregion
-//#region src/components/dnd/layout.tsx
-const PaletteItems = ({ subject }) => {
-	const { palette: { items, onAdd }, isMobile } = useDndRegions(subject);
-	return /* @__PURE__ */ jsx(Space, {
-		orientation: "vertical",
-		align: "start",
-		children: items.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
-			item,
-			onAdd,
-			tapToAdd: isMobile
-		}, item.id))
-	});
-};
-const PanelFields = ({ subject }) => {
-	const { panel: { item, onDelete, onMoveUp, onMoveDown, canMoveUp, canMoveDown, bindings, onNodeChange, readOnly } } = useDndRegions(subject);
-	return /* @__PURE__ */ jsx(Panel$1, {
-		item,
-		onDelete,
-		onMoveUp,
-		onMoveDown,
-		canMoveUp,
-		canMoveDown,
-		bindings,
-		onNodeChange,
-		readOnly
-	});
-};
-const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
-	className: cn("h-full overflow-y-auto bg-gray-50 p-4", className),
-	...restProps,
-	children: /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Palette>" })
-});
-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,
-		style: {
-			isolation: "isolate",
-			contain: "layout style",
-			transform: "translateZ(0)",
-			...style
-		},
-		...restProps,
-		children: [canvas, !documentError && /* @__PURE__ */ jsx("div", {
-			className: "pointer-events-none sticky bottom-0 z-70 h-0",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "pointer-events-auto absolute bottom-3 left-3",
-				children: /* @__PURE__ */ jsx(Button, {
-					icon: /* @__PURE__ */ jsx(Crosshair, {}),
-					color: "primary",
-					variant: inspector.active ? "solid" : "outlined",
-					"aria-pressed": inspector.active,
-					"aria-label": messages.canvas.pickElement,
-					title: inspector.active ? messages.canvas.pickElementActive : messages.canvas.pickElement,
-					onClick: inspector.toggle
-				})
-			})
-		})]
-	});
-};
-const Panel = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
-	className: cn("h-full", className),
-	...restProps,
-	children: /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Panel>" })
-});
-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": 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>" })
-		})
-	] });
-};
-//#endregion
-//#region src/components/dnd/state/use-delete-flow.ts
-const useDeleteFlow = ({ sections, remove, onBeforeDelete }) => {
-	const removeRef = useRef(remove);
-	useEffect(() => {
-		removeRef.current = remove;
-	});
-	return (id, onDeleted) => {
-		const section = sections.find((candidate) => candidate.id === id);
-		if (!onBeforeDelete || !section) {
-			remove(id);
-			onDeleted?.();
-			return;
-		}
-		const decide = (allowed) => {
-			if (allowed) {
-				removeRef.current(id);
-				onDeleted?.();
-			}
-		};
-		try {
-			const answer = onBeforeDelete(section);
-			if (typeof answer === "boolean") {
-				decide(answer);
-				return;
-			}
-			answer.then(decide, (error) => {
-				console.error("onBeforeDelete rejected; the section was kept", error);
-			});
-		} catch (error) {
-			console.error("onBeforeDelete threw; the section was kept", error);
-		}
-	};
-};
-//#endregion
-//#region src/components/dnd/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 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 positionOf = (id) => sections.findIndex((section) => section.id === id) + 1;
-	const announcements = {
-		onDragStart: ({ active }) => say.pickedUp(nameOf(active.id, active.data)),
-		onDragOver: ({ active, over }) => over && positionOf(over.id) > 0 ? say.movedTo(nameOf(active.id, active.data), positionOf(over.id), sections.length) : say.notOver(nameOf(active.id, active.data)),
-		onDragEnd: ({ active, over }) => over && positionOf(over.id) > 0 ? say.droppedAt(nameOf(active.id, active.data), positionOf(over.id), sections.length) : say.dropped(nameOf(active.id, active.data)),
-		onDragCancel: ({ active }) => say.cancelled(nameOf(active.id, active.data))
-	};
-	const screenReaderInstructions = { draggable: say.instructions };
-	const [sectionNodes] = useState(createNodeRegistry);
-	const focusSection = (id) => sectionNodes.get(id)?.focus();
-	const onNavigate = (fromId, to) => {
-		const from = sections.findIndex((section) => section.id === fromId);
-		const target = sections[to === "first" ? 0 : to === "last" ? sections.length - 1 : from + (to === "next" ? 1 : -1)];
-		if (from < 0 || !target || target.id === fromId) return;
-		selectOnly(target.id);
-		focusSection(target.id);
-	};
-	const onDeleteKey = (id) => {
-		const index = sections.findIndex((section) => section.id === id);
-		const neighbor = sections[index + 1] ?? sections[index - 1];
-		requestDelete(id, () => {
-			if (neighbor) focusSection(neighbor.id);
-		});
-	};
-	const onMoveButton = (id, direction) => {
-		const to = sections.findIndex((section) => section.id === id) + (direction === "up" ? -1 : 1);
-		move(id, direction);
-		if (to === 0 || to === sections.length - 1) focusSection(id);
-	};
-	useEffect(() => {
-		if (selectedId === null) return;
-		const frame = requestAnimationFrame(() => {
-			sectionNodes.get(selectedId)?.scrollIntoView?.({ block: "nearest" });
-		});
-		return () => cancelAnimationFrame(frame);
-	}, [
-		sectionNodes,
-		selectedId,
-		selectedIndex
-	]);
-	return {
-		sensors,
-		announcements,
-		screenReaderInstructions,
-		sectionNodes,
-		onNavigate,
-		onDeleteKey,
-		onMoveButton
-	};
-};
-//#endregion
-//#region src/components/dnd/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);
-	};
-	return {
-		inspector,
-		inspecting,
-		onInspectMove,
-		onInspectPick,
-		onInspectLeave: () => setHoverRect(null),
-		highlightRect: inspecting ? hoverRect : fieldTarget ? fieldRect : null
-	};
-};
-//#endregion
-//#region src/components/dnd/state/use-section-document.ts
-const createLastParsed = () => {
-	let last = null;
-	return {
-		read: (containerId) => last && last.containerId === containerId ? last.document : void 0,
-		write: (containerId, document) => {
-			last = {
-				containerId,
-				document
-			};
-		}
-	};
-};
-const useSectionDocument = (value, onChange, { containerId, sectionNameFallback, onBlockedEdit } = {}) => {
-	const { setCode } = usePreview();
-	const [selectedId, setSelectedId] = useState(null);
-	const readSections = useCallback((code) => extractSections(code, {
-		containerId,
-		sectionNameFallback
-	}), [containerId, sectionNameFallback]);
-	const document = useMemo(() => fillSectionIds(value, void 0, { containerId }), [containerId, value]);
-	const [lastParsed] = useState(createLastParsed);
-	const view = useMemo(() => {
-		const inspection = inspectDocument(document, { containerId });
-		if (inspection.ok) {
-			lastParsed.write(containerId, document);
-			return {
-				document,
-				problem: null,
-				stale: false
-			};
-		}
-		const { ok: _ok, ...problem } = inspection;
-		const last = problem.reason === "parse-error" ? lastParsed.read(containerId) : void 0;
-		return {
-			document: last ?? document,
-			problem,
-			stale: last !== void 0
-		};
-	}, [
-		containerId,
-		document,
-		lastParsed
-	]);
-	const sections = useMemo(() => readSections(view.document), [readSections, view.document]);
-	const [previewCache] = useState(() => createSectionPreviewCache());
-	const previews = useMemo(() => previewCache.compute(view.document, sections, { containerId }), [
-		containerId,
-		previewCache,
-		sections,
-		view.document
-	]);
-	const selectedIndex = sections.findIndex((s) => s.id === selectedId);
-	const selectedSection = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
-	const pendingRef = useRef(null);
-	useEffect(() => {
-		pendingRef.current = null;
-	});
-	const latestDocument = useCallback(() => {
-		const pending = pendingRef.current;
-		return pending?.from === document ? pending.code : document;
-	}, [document]);
-	const latestSections = useCallback(() => readSections(latestDocument()), [latestDocument, readSections]);
-	const commit = useCallback((nextSections) => {
-		const nextCode = fillSectionIds(replaceSections(latestDocument(), nextSections.map((s) => s.code), { containerId }), void 0, { containerId });
-		pendingRef.current = {
-			from: document,
-			code: nextCode
-		};
-		onChange?.(nextCode);
-		setCode(nextCode);
-		return readSections(nextCode);
-	}, [
-		containerId,
-		document,
-		latestDocument,
-		onChange,
-		readSections,
-		setCode
-	]);
-	const getCommittedSection = useCallback((id) => {
-		const pending = pendingRef.current;
-		if (pending?.from !== document) return;
-		return readSections(pending.code).find((s) => s.id === id);
-	}, [document, readSections]);
-	const { problem, stale } = view;
-	const refuse = useCallback(() => {
-		if (!stale || !problem) return false;
-		onBlockedEdit?.(problem);
-		return true;
-	}, [
-		onBlockedEdit,
-		problem,
-		stale
-	]);
-	return {
-		sections,
-		previews,
-		selectedId,
-		selectedSection,
-		selectedIndex,
-		select: useCallback((id) => {
-			setSelectedId((prev) => prev === id ? null : id);
-		}, []),
-		selectOnly: useCallback((id) => setSelectedId(id), []),
-		clearSelection: useCallback(() => setSelectedId(null), []),
-		add: useCallback((section, atIndex) => {
-			if (refuse()) return;
-			const current = latestSections();
-			const next = { code: section.code };
-			commit(atIndex === void 0 || atIndex < 0 ? [...current, next] : [
-				...current.slice(0, atIndex),
-				next,
-				...current.slice(atIndex)
-			]);
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		remove: useCallback((id) => {
-			if (refuse()) return;
-			const current = latestSections();
-			const index = current.findIndex((s) => s.id === id);
-			if (index < 0) return;
-			if (id === selectedId) setSelectedId(null);
-			commit(current.filter((_, i) => i !== index));
-		}, [
-			commit,
-			refuse,
-			latestSections,
-			selectedId
-		]),
-		copy: useCallback((id) => {
-			if (refuse()) return;
-			const current = latestSections();
-			const index = current.findIndex((s) => s.id === id);
-			const source = current[index];
-			if (!source) return;
-			const committed = commit([
-				...current.slice(0, index + 1),
-				{ code: replaceIds(source.code) },
-				...current.slice(index + 1)
-			]);
-			setSelectedId(committed[index + 1]?.id ?? null);
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		move: useCallback((id, direction) => {
-			if (refuse()) return;
-			const current = latestSections();
-			const index = current.findIndex((s) => s.id === id);
-			const targetIndex = direction === "up" ? index - 1 : index + 1;
-			if (index < 0 || targetIndex < 0 || targetIndex >= current.length) return;
-			commit(arrayMove(current, index, targetIndex));
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		reorder: useCallback((activeId, overId) => {
-			if (refuse()) return;
-			const current = latestSections();
-			const prevIndex = current.findIndex((s) => s.id === activeId);
-			const nextIndex = current.findIndex((s) => s.id === overId);
-			if (prevIndex < 0 || nextIndex < 0 || prevIndex === nextIndex) return;
-			commit(arrayMove(current, prevIndex, nextIndex));
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		patch: useCallback((next) => {
-			if (refuse()) return;
-			const current = latestSections();
-			commit(current.map((s) => s.id === next.id ? {
-				...s,
-				...next
-			} : s));
-		}, [
-			commit,
-			refuse,
-			latestSections
-		]),
-		getCommittedSection,
-		problem,
-		stale
-	};
-};
-//#endregion
-//#region src/components/dnd/dnd.tsx
-const describeUpdateFailure = (failure, label, { editErrors: m }) => {
-	switch (failure?.reason) {
-		case "attribute-not-found": return {
-			title: m.updateFailed(label),
-			description: m.attributeNotFound(failure.property)
-		};
-		case "binding-not-declared": return {
-			title: m.updateFailed(label),
-			description: m.bindingNotDeclared({
-				label,
-				property: failure.property
-			})
-		};
-		case "duplicate-binding": return {
-			title: m.updateFailed(label),
-			description: m.duplicateBinding({
-				count: failure.count,
-				label,
-				property: failure.property
-			})
-		};
-		case "reserved-property": return {
-			title: m.cannotEdit(label),
-			description: m.reservedProperty(failure.property)
-		};
-		case "required-property": return {
-			title: m.cannotRemove(label),
-			description: m.requiredProperty(failure.property)
-		};
-		case "no-binding": return {
-			title: m.updateFailed(label),
-			description: m.noBinding
-		};
-		case "element-not-found": return {
-			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: m.cannotEdit(label),
-			description: m.unsupportedSyntax(failure.property)
-		};
-		case "parse-error": return {
-			title: m.updateFailed(label),
-			description: failure.error instanceof Error ? failure.error.message : m.checkConsole
-		};
-		default: return { title: m.updateFailed(label) };
-	}
-};
-const blockedEditError = (error, { editErrors: m }) => ({
-	type: "parse",
-	target: "document",
-	reason: "parse-error",
-	error,
-	title: m.syntaxError,
-	description: m.syntaxErrorDetail
-});
-const conditionalModifiers = (args) => {
-	const { active } = args;
-	if (paletteSectionOf(active?.data)) return args.transform;
-	return restrictToVerticalAxis(args);
-};
-const NO_MODULES = {};
-const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, bindings: bindingRegistry, bindingKeys, onNodePick, children, ...restProps }) => {
-	const modules = useStableModules(_modules);
-	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
-	const { breakpoint } = useResponsiveSize();
-	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
-	const { code } = usePreview();
-	const isForced = (section) => {
-		try {
-			return shouldForceSectionFallback?.(section) === true;
-		} catch (error) {
-			console.error("shouldForceSectionFallback threw", error);
-			return false;
-		}
-	};
-	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, messagesRef.current));
-	}, []);
-	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 onDragEnd = (event) => {
-		const { active, over } = event;
-		if (!over) return;
-		const section = paletteSectionOf(active.data);
-		if (section) {
-			const atBottom = over.id === "sortable-area" || over.id === "sortable-area-bottom";
-			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 requestDelete = useDeleteFlow({
-		sections,
-		remove,
-		onBeforeDelete
-	});
-	const onDelete = (id) => requestDelete(id);
-	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveButton } = useDndKeyboard({
-		sections,
-		selectedId,
-		selectedIndex,
-		selectOnly,
-		move: moveSection,
-		requestDelete
-	});
-	const { inspector, inspecting, onInspectMove, onInspectPick, onInspectLeave, highlightRect } = useInspectorState({
-		selectedId,
-		selectOnly,
-		sectionNodes,
-		onNodePick
-	});
-	const onChange = (next) => {
-		if (!next.id) return;
-		patch(next);
-	};
-	const bindingOptions = useMemo(() => ({
-		bindings: bindingRegistry,
-		bindingKeys
-	}), [bindingRegistry, bindingKeys]);
-	const selectedCode = selectedSection?.code;
-	const selectedSectionId = selectedSection?.id;
-	const { fields, updatedCode, parseError } = useMemo(() => {
-		if (!selectedCode) return {
-			fields: [],
-			updatedCode: "",
-			parseError: null
-		};
-		try {
-			const updated = fillIdsFrom(selectedCode, selectedSectionId ?? "");
-			return {
-				fields: extract(updated, bindingOptions),
-				updatedCode: updated !== selectedCode ? updated : selectedCode,
-				parseError: null
-			};
-		} catch (e) {
-			console.warn("⚠️ Parsing error", e);
-			return {
-				fields: [],
-				updatedCode: "",
-				parseError: { error: e }
-			};
-		}
-	}, [
-		selectedCode,
-		selectedSectionId,
-		bindingOptions
-	]);
-	useEffect(() => {
-		if (missingContainer !== null) reportErrorRef.current({
-			type: "parse",
-			target: "document",
-			reason: "container-not-found",
-			containerId: missingContainer,
-			title: messagesRef.current.editErrors.missingContainer(missingContainer),
-			description: messagesRef.current.editErrors.missingContainerDetail(missingContainer)
-		});
-	}, [missingContainer]);
-	useEffect(() => {
-		if (parseError) reportErrorRef.current({
-			type: "parse",
-			target: "section",
-			error: parseError.error,
-			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, messages));
-			return;
-		}
-		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,
-			property,
-			value: changeValue
-		})), bindingOptions);
-		if (!result.success) {
-			const { id, label, property } = changes[result.index];
-			reportError({
-				type: "update",
-				id,
-				label,
-				property,
-				failure: result.failure,
-				...describeUpdateFailure(result.failure, label, messages)
-			});
-			return;
-		}
-		if (selectedSection) onChange({
-			...selectedSection,
-			code: result.code
-		});
-	};
-	const onFieldChange = (change) => commitChanges([change]);
-	const bindingFields = useMemo(() => fields.flatMap((node) => resolvePanelBindings(node)?.bindings ?? []), [fields]);
-	const bindings = withPanelCommit(bindingFields, onFieldChange);
-	useEffect(() => {
-		if (frame?.scripts?.length) preloadScripts(frame.scripts);
-	}, [frame?.scripts]);
-	const palette = {
-		items: items?.length ? items : PALETTE_SECTIONS,
-		onAdd: (section) => {
-			addSection(section);
-			setMobilePaletteOpen(false);
-		}
-	};
-	const panel = {
-		item: selectedSection,
-		onChange,
-		onDelete,
-		onMoveUp: () => moveSection(selectedId, "up"),
-		onMoveDown: () => moveSection(selectedId, "down"),
-		canMoveUp: selectedIndex > 0,
-		canMoveDown: selectedIndex >= 0 && selectedIndex < sections.length - 1,
-		bindings,
-		onNodeChange: onFieldChange,
-		onNodesChange: commitChanges,
-		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: 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 })]
-				})
-			}) : /* @__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, {
-			sensors,
-			collisionDetection: closestCenter,
-			accessibility: {
-				announcements,
-				screenReaderInstructions
-			},
-			modifiers: [conditionalModifiers],
-			onDragEnd,
-			children: [/* @__PURE__ */ jsx("div", {
-				className: cn("relative flex h-full w-full", className),
-				...restProps,
-				children: /* @__PURE__ */ jsx(DndEditOptionsContext.Provider, {
-					value: {
-						renderField,
-						reportError,
-						bindingOptions
-					},
-					children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
-						value: {
-							palette,
-							panel,
-							canvas,
-							isMobile,
-							selectedId,
-							clearSelection,
-							paletteOpen: mobilePaletteOpen,
-							setPaletteOpen: setMobilePaletteOpen,
-							documentError: problem?.reason ?? null
-						},
-						children: /* @__PURE__ */ jsx(DndInspectorContext.Provider, {
-							value: inspector,
-							children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
-						})
-					})
-				})
-			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
-				sections,
-				isForced,
-				renderProps: {
-					fullCode: value,
-					modules,
-					frame,
-					dynamicTailwind,
-					...props,
-					containerId
-				}
-			}) })]
-		})
-	});
-};
-//#endregion
-//#region src/components/dnd/index.ts
-const Dnd = Dnd$1;
-Dnd.DraggableItem = DraggableItem;
-Dnd.Field = Field;
-Dnd.Palette = Palette;
-Dnd.Canvas = Canvas;
-Dnd.Panel = Panel;
-Dnd.Layout = Layout;
-/** @deprecated Renamed to `useDndItems`. */
-const useItemsEditor = useDndItems;
-/** @deprecated Renamed to `useDndChildren`. */
-const useChildrenEditor = useDndChildren;
-//#endregion
-export { 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-UoJILA75.js.map