@jbpark/live-editor 3.0.2 → 3.2.0

package/dist/{dnd-C4iBiSkv.js → dnd-DTT37EbA.js}

@@ -1,10 +1,10 @@
-import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-C6bNHl7l.js";
-import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-BwEgY5pe.js";
+import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds } from "./document-C6bNHl7l.js";
+import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-WyxPYZGh.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, M as generateCode, S as parseBinding, _ as moveSelectedIndices, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, k as parseArrayExpression, l as moveArrayItems, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, v as removeIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-D6R-dsk0.js";
-import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-C0Onss1A.js";
-import { t as Core } from "./core-CTsQ9LiQ.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-BF7iZp6e.js";
+import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, S as parseBinding, _ as updateArrayItemValue, b as getCurrentValue, d as duplicateArrayItems, f as moveArrayItem, g as updateArrayItemProperty, h as removeArrayItems, i as replaceIds, k as parseArrayExpression, l as extract, o as update, p as moveArrayItems, r as fillIds, s as getChildrenSignatures, t as validateBindingValue, u as appendArrayItem, v as moveSelectedIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-Bx2Avo4d.js";
+import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-DAhKGsY4.js";
+import { t as Core } from "./core-D3q5rpuz.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-BTP1nfG6.js";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, Toast, Typography, Upload } from "@jbpark/ui-kit";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -78,6 +78,332 @@ const useDndPalette = () => useDndRegions("useDndPalette()").palette;
 const useDndPanel = () => useDndRegions("useDndPanel()").panel;
 const useDndLayout = () => useDndRegions("useDndLayout()");
 //#endregion
+//#region src/components/dnd/panel/bulk-actions-bar.tsx
+const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
+	if (count === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-xs font-medium text-blue-700",
+			children: [count, " selected"]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center space-x-1",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(Copy, {}),
+					title: "Duplicate selected",
+					onClick: onDuplicate
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+					title: "Move selected up",
+					onClick: onMoveUp
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+					title: "Move selected down",
+					onClick: onMoveDown
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					danger: true,
+					size: "small",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					title: "Delete selected",
+					onClick: onDelete
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					onClick: onClear,
+					children: "Clear"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/node.tsx
+const Node = ({ data, onChange }) => {
+	const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
+	const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
+	if (!idAttr?.value || !bindingAttr?.value) return null;
+	const dataId = idAttr.value;
+	const bindings = data.bindings || parseBinding(bindingAttr.value);
+	if (!bindings.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2 rounded",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-1",
+			children: bindings.map((binding) => {
+				const currentValue = getCurrentValue(data, binding.property);
+				const structuredValue = getStructuredValue(data, binding.property, binding.type);
+				return /* @__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: {
+							id: dataId,
+							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,
+							value: structuredValue,
+							rawValue: currentValue,
+							onChange: (next) => onChange?.({
+								id: dataId,
+								label: binding.label,
+								property: binding.property,
+								value: next
+							})
+						},
+						onNodeChange: onChange
+					})]
+				}, `${binding.property}-${binding.label}`);
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/use-children-editor.ts
+const useChildrenEditor = (items, { onChange } = {}) => {
+	const selection = useMultiSelect(items.length);
+	const expected = useMemo(() => getChildrenSignatures(items), [items]);
+	const revision = JSON.stringify(expected);
+	const clear = selection.clear;
+	useEffect(() => {
+		clear();
+	}, [revision, clear]);
+	const commit = (action) => {
+		onChange?.(JSON.stringify({
+			kind: "children-edit",
+			expected,
+			action
+		}));
+	};
+	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 } = useChildrenEditor(items, { onChange });
+	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__ */ jsxs("div", {
+					className: "text-sm font-semibold text-green-700",
+					children: [
+						"Children Items (",
+						items.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					color: "green",
+					icon: /* @__PURE__ */ jsx(Plus, {}),
+					onClick: actions.add,
+					children: "Add Child"
+				})]
+			}),
+			/* @__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__ */ jsxs("div", {
+								className: "text-xs font-medium text-green-800",
+								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, {}),
+									disabled: itemIndex === 0,
+									onClick: () => actions.move(itemIndex, itemIndex - 1)
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									size: "small",
+									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+									disabled: itemIndex === items.length - 1,
+									onClick: () => actions.move(itemIndex, itemIndex + 1)
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									title: "Delete item",
+									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: "Editable Bindings:"
+						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
+							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "rounded border border-green-100 bg-white p-2",
+								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: "Child Nodes:"
+						}), 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/icon-map.tsx
+const ICON_MAP = {
+	AlertCircle,
+	ArrowDown,
+	ArrowLeft,
+	ArrowRight,
+	ArrowUp,
+	Bell,
+	Bookmark,
+	Calendar,
+	Camera,
+	Check,
+	ChevronDown,
+	ChevronRight,
+	Clock,
+	Download,
+	Edit,
+	Eye,
+	Filter,
+	Heart,
+	Home,
+	Image,
+	Info,
+	Link,
+	Mail,
+	Map: Map$1,
+	Menu,
+	MessageCircle,
+	Phone,
+	Plus,
+	Search,
+	Settings,
+	Share,
+	ShoppingCart,
+	Star,
+	Trash,
+	Upload: Upload$1,
+	User,
+	X
+};
+const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
+	label: /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), name]
+	}),
+	value: name
+}));
+//#endregion
 //#region src/components/dnd/panel/use-items-editor.ts
 const resolveLeaf = (render, key) => {
 	const leaf = render?.[key];
@@ -87,8 +413,8 @@ const resolveMap = (render, key) => {
 	const leaf = render?.[key];
 	return leaf && !("type" in leaf) ? leaf : void 0;
 };
-const bindingsInJSX = (node) => {
-	const nodes = extract(generateCode(node));
+const bindingsInJSX = (source) => {
+	const nodes = extract(source);
 	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
 	if (container) return [container];
 	const bindings = [];
@@ -107,13 +433,15 @@ const parseSource = (value) => {
 	};
 	const objectItems = [];
 	const primitiveItems = [];
-	ast.elements.filter((element) => Boolean(element)).forEach((element, elementIndex) => {
+	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
 			});
@@ -125,18 +453,21 @@ const parseSource = (value) => {
 			if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !(import_lib.isJSXElement(prop.value) || import_lib.isJSXFragment(prop.value))) return;
 			const propertyName = prop.key.name;
 			try {
-				const found = bindingsInJSX(prop.value);
+				const found = bindingsInJSX(value.slice(prop.value.start, prop.value.end));
 				if (found.length > 0) jsxBindings[propertyName] = found;
-				else jsxFallbacks[propertyName] = generateCode(prop.value);
+				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,
-			editableProperties: extractObjectProperties(element),
+			source: value.slice(element.start, element.end),
+			editableProperties,
 			jsxBindings,
 			jsxFallbacks
 		});
@@ -147,6 +478,38 @@ const parseSource = (value) => {
 		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 useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
 	useEffect(() => {
@@ -154,13 +517,26 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	}, [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 selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
-	const commit = (next) => {
+	const commit = (next, nextIds) => {
 		if (next === null) {
-			Toast.error("Failed to update this item", { description: "Check the console for details." });
-			return;
+			Toast.error("Failed to update this item", { description: "The source was preserved. Structural edits require a dense array without spreads; use the code editor for unsupported syntax." });
+			return false;
 		}
+		const parsed = parseSource(next);
+		const nextItems = kind === "primitive" ? parsed.primitiveItems : parsed.objectItems;
+		if (nextIds) setIdentityState(createIdentityState(next, kind, nextItems, nextIds));
+		else setIdentityState(createIdentityState(next, kind, nextItems, identity.ids));
 		onChange?.(next);
+		return true;
 	};
 	const elementIndicesOf = (indices) => {
 		return new Set((isPrimitive ? primitiveItems : objectItems).filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
@@ -171,7 +547,7 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	return {
 		kind,
 		items: isPrimitive ? primitiveItems.map((item) => ({
-			id: item.id,
+			id: identity.ids[item.index] ?? item.id,
 			index: item.index,
 			elementIndex: item.elementIndex,
 			properties: [],
@@ -185,10 +561,11 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				onChange: (next) => commit(updateArrayItemValue(value, item.elementIndex, next))
 			}
 		})) : objectItems.map((item) => {
+			const id = identity.ids[item.index] ?? item.id;
 			const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
 				const leaf = resolveLeaf(render, key);
 				return {
-					id: `item-${item.id}-${key}`,
+					id: `item-${id}-${key}`,
 					label: key,
 					property: leaf ? leaf.property ?? leaf.type : key,
 					type: leaf?.type,
@@ -248,7 +625,7 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				}
 			}))];
 			return {
-				id: item.id,
+				id,
 				index: item.index,
 				elementIndex: item.elementIndex,
 				properties,
@@ -257,30 +634,40 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 		}),
 		selection,
 		actions: {
-			add: () => commit(appendArrayItem(value, kind)),
+			add: () => {
+				const next = appendArrayItem(value, kind);
+				commit(next, next ? [...identity.ids, nanoid(6)] : void 0);
+			},
 			move: (elementIndex, toIndex) => {
-				const target = (isPrimitive ? primitiveItems : objectItems).find((item) => item.index === toIndex);
-				if (!target) return;
-				commit(moveArrayItem(value, elementIndex, target.elementIndex));
-				selection.clear();
+				const items = isPrimitive ? primitiveItems : objectItems;
+				const from = items.find((item) => item.elementIndex === elementIndex);
+				const target = items.find((item) => item.index === toIndex);
+				if (!from || !target) return;
+				if (commit(moveArrayItem(value, elementIndex, target.elementIndex), moveId(identity.ids, from.index, target.index))) selection.clear();
 			},
 			remove: (elementIndex) => {
-				commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind));
-				selection.clear();
+				const removed = (isPrimitive ? primitiveItems : objectItems).find((item) => item.elementIndex === elementIndex);
+				if (commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind), removed ? removeIds(identity.ids, /* @__PURE__ */ new Set([removed.index])) : void 0)) selection.clear();
+			},
+			duplicateSelected: () => {
+				const selected = elementIndicesOf(selection.selected);
+				const next = duplicateArrayItems(value, selected);
+				const copied = rawItems.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
+				commit(next, next ? [...identity.ids, ...copied] : void 0);
 			},
-			duplicateSelected: () => commit(duplicateArrayItems(value, elementIndicesOf(selection.selected))),
 			moveSelected: (direction) => {
+				const nextIdentity = moveSelectedIndices(identity.ids, selection.selected, direction);
 				const result = moveArrayItems(value, elementIndicesOf(selection.selected), direction);
 				if (!result) {
 					commit(null);
 					return;
 				}
-				selection.replace(result.indices);
-				commit(result.code);
+				const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => import_lib.isExpression(node) && import_lib.isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
+				selection.replace(new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
+				commit(result.code, nextIdentity.items);
 			},
 			removeSelected: () => {
-				commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind));
-				selection.clear();
+				if (commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind), removeIds(identity.ids, selection.selected))) selection.clear();
 			}
 		},
 		parseError
@@ -288,50 +675,6 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 };
 //#endregion
 //#region src/components/dnd/panel/items.tsx
-const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
-	if (count === 0) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "text-xs font-medium text-blue-700",
-			children: [count, " selected"]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center space-x-1",
-			children: [
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(Copy, {}),
-					title: "Duplicate selected",
-					onClick: onDuplicate
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-					title: "Move selected up",
-					onClick: onMoveUp
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-					title: "Move selected down",
-					onClick: onMoveDown
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					danger: true,
-					size: "small",
-					icon: /* @__PURE__ */ jsx(X, {}),
-					title: "Delete selected",
-					onClick: onDelete
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					size: "small",
-					onClick: onClear,
-					children: "Clear"
-				})
-			]
-		})]
-	});
-};
 const NestedGroup = ({ group, onNodeChange }) => {
 	if (group.fallback) return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-2",
@@ -382,18 +725,50 @@ const NestedGroup = ({ group, onNodeChange }) => {
 							binding,
 							onNodeChange
 						})]
-					}, binding.label))
+					}, `${binding.property}-${binding.label}`))
 				})
 			})]
 		}, `${group.property}-${element.id}`))]
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { kind, items, selection, actions } = useItemsEditor(value, {
+	const { kind, items, selection, actions, parseError } = useItemsEditor(value, {
 		render,
 		onChange,
 		onNodeChange: onChildChange
 	});
+	const header = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-sm font-semibold",
+			children: [
+				"Items (",
+				items.length,
+				")"
+			]
+		}), items.length > 0 && /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			icon: /* @__PURE__ */ jsx(Plus, {}),
+			variant: "solid",
+			color: "green",
+			onClick: actions.add,
+			children: "Add Item"
+		})]
+	});
+	if (parseError) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "rounded border border-dashed border-red-200 p-3 text-xs\n            text-red-600",
+			children: "This value could not be read as a list. Edit it in the code editor."
+		})]
+	});
+	if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "rounded border border-dashed border-gray-200 p-3 text-xs\n            text-gray-500",
+			children: "No editable items. The panel copies an existing item rather than guessing the shape of a new one — add the first item in the code editor."
+		})]
+	});
 	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
 		count: selection.selected.size,
 		onDuplicate: actions.duplicateSelected,
@@ -426,27 +801,10 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 			})
 		]
 	});
-	if (kind === "primitive") return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "text-sm font-semibold",
-					children: [
-						"Items (",
-						items.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(Plus, {}),
-					variant: "solid",
-					color: "green",
-					onClick: actions.add,
-					children: "Add Item"
-				})]
-			}),
+	if (kind === "primitive") return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			header,
 			bulkBar,
 			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 rounded border border-gray-100 bg-gray-50 p-2",
@@ -470,25 +828,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "text-sm font-semibold",
-					children: [
-						"Items (",
-						items.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(Plus, {}),
-					variant: "solid",
-					color: "green",
-					disabled: items.length === 0,
-					onClick: actions.add,
-					children: "Add Item"
-				})]
-			}),
+			header,
 			bulkBar,
 			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-3 rounded border bg-gray-50 p-3",
@@ -528,7 +868,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 								String(binding.meta?.valueType),
 								")"
 							]
-						})] }, `${item.id}-${binding.label}`))
+						})] }, `${item.id}-${binding.property}-${binding.label}`))
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "space-y-3 border-t pt-2",
@@ -546,305 +886,6 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/node.tsx
-const Node = ({ data, onChange }) => {
-	const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
-	const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
-	if (!idAttr?.value || !bindingAttr?.value) return null;
-	const dataId = idAttr.value;
-	const bindings = data.bindings || parseBinding(bindingAttr.value);
-	if (!bindings.length) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-2 rounded",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "space-y-1",
-			children: bindings.map((binding) => {
-				const currentValue = getCurrentValue(data, binding.property);
-				const structuredValue = getStructuredValue(data, binding.property, binding.type);
-				return /* @__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: {
-							id: dataId,
-							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,
-							value: structuredValue,
-							rawValue: currentValue,
-							onChange: (next) => onChange?.({
-								id: dataId,
-								label: binding.label,
-								property: binding.property,
-								value: next
-							})
-						},
-						onNodeChange: onChange
-					})]
-				}, binding.label);
-			})
-		})
-	});
-};
-//#endregion
-//#region src/components/dnd/panel/children.tsx
-const Children$1 = ({ value, onChange, onNodeChange }) => {
-	const items = useMemo(() => Array.isArray(value) ? value : [], [value]);
-	const selection = useMultiSelect(items.length);
-	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]);
-	const moveItem = (fromIndex, toIndex) => {
-		const nextItems = [...items];
-		const [movedItem] = nextItems.splice(fromIndex, 1);
-		nextItems.splice(toIndex, 0, movedItem);
-		onChange?.(JSON.stringify(nextItems));
-	};
-	const moveSelectedItems = (indices, direction) => {
-		const { items: nextItems, indices: nextIndices } = moveSelectedIndices(items, indices, direction);
-		selection.replace(nextIndices);
-		onChange?.(JSON.stringify(nextItems));
-	};
-	const deleteSelectedItems = (indices) => {
-		if (items.length - indices.size < 1) return;
-		const nextItems = removeIndices(items, indices);
-		onChange?.(JSON.stringify(nextItems));
-	};
-	const deleteItem = (index) => deleteSelectedItems(/* @__PURE__ */ new Set([index]));
-	const addItem = () => {
-		const template = items[0] || createDefaultItem();
-		const newItem = cloneDataAttrNode(template);
-		const nextItems = [...items, newItem];
-		onChange?.(JSON.stringify(nextItems));
-	};
-	const duplicateSelectedItems = (indices) => {
-		const sources = [...indices].sort((a, b) => a - b).map((index) => items[index]).filter((item) => Boolean(item));
-		if (sources.length === 0) return;
-		const clones = sources.map(cloneDataAttrNode);
-		onChange?.(JSON.stringify([...items, ...clones]));
-	};
-	const createDefaultItem = () => ({
-		id: nanoid(6),
-		tagName: "div",
-		attributes: [{
-			name: "data-id",
-			value: nanoid(6)
-		}, {
-			name: "data-item",
-			value: "true"
-		}],
-		dataAttributes: [{
-			name: "data-id",
-			value: nanoid(6)
-		}, {
-			name: "data-item",
-			value: "true"
-		}],
-		textContent: "",
-		children: []
-	});
-	const cloneDataAttrNode = (node) => ({
-		...node,
-		id: nanoid(6),
-		attributes: node.attributes.map((attr) => ({
-			...attr,
-			value: attr.name === "data-id" ? nanoid(6) : attr.value
-		})),
-		dataAttributes: node.dataAttributes.map((attr) => ({
-			...attr,
-			value: attr.name === "data-id" ? nanoid(6) : attr.value
-		})),
-		children: node.children?.map(cloneDataAttrNode)
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-3",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "text-sm font-semibold text-green-700",
-					children: [
-						"Children Items (",
-						items.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "small",
-					color: "green",
-					icon: /* @__PURE__ */ jsx(Plus, {}),
-					onClick: addItem,
-					children: "Add Child"
-				})]
-			}),
-			/* @__PURE__ */ jsx(BulkActionsBar, {
-				count: selection.selected.size,
-				onDuplicate: () => duplicateSelectedItems(selection.selected),
-				onMoveUp: () => moveSelectedItems(selection.selected, "up"),
-				onMoveDown: () => moveSelectedItems(selection.selected, "down"),
-				onDelete: () => {
-					deleteSelectedItems(selection.selected);
-					selection.clear();
-				},
-				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__ */ jsxs("div", {
-								className: "text-xs font-medium text-green-800",
-								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, {}),
-									disabled: itemIndex === 0,
-									onClick: () => moveItem(itemIndex, itemIndex - 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-									disabled: itemIndex === items.length - 1,
-									onClick: () => moveItem(itemIndex, itemIndex + 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									title: items.length <= 1 ? "At least 1 item is required" : "Delete item",
-									danger: true,
-									size: "small",
-									icon: /* @__PURE__ */ jsx(X, {}),
-									disabled: items.length <= 1,
-									onClick: () => deleteItem(itemIndex)
-								})
-							]
-						})]
-					}),
-					editableChildrenMap.has(itemIndex) && /* @__PURE__ */ jsxs("div", {
-						className: "space-y-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs font-medium text-green-700",
-							children: "Editable Bindings:"
-						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
-							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
-							return /* @__PURE__ */ jsxs("div", {
-								className: "rounded border border-green-100 bg-white p-2",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "mb-1 text-xs text-green-600",
-									children: editableNode.tagName
-								}), /* @__PURE__ */ jsx(Node, {
-									data: editableNode,
-									onChange: onNodeChange
-								})]
-							}, `editable-${itemIndex}-${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: "Child Nodes:"
-						}), 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/icon-map.tsx
-const ICON_MAP = {
-	AlertCircle,
-	ArrowDown,
-	ArrowLeft,
-	ArrowRight,
-	ArrowUp,
-	Bell,
-	Bookmark,
-	Calendar,
-	Camera,
-	Check,
-	ChevronDown,
-	ChevronRight,
-	Clock,
-	Download,
-	Edit,
-	Eye,
-	Filter,
-	Heart,
-	Home,
-	Image,
-	Info,
-	Link,
-	Mail,
-	Map: Map$1,
-	Menu,
-	MessageCircle,
-	Phone,
-	Plus,
-	Search,
-	Settings,
-	Share,
-	ShoppingCart,
-	Star,
-	Trash,
-	Upload: Upload$1,
-	User,
-	X
-};
-const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
-	label: /* @__PURE__ */ jsxs("span", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), name]
-	}),
-	value: name
-}));
-//#endregion
 //#region src/components/dnd/panel/field.tsx
 const isColorProperty = (propertyName) => {
 	return propertyName.toLowerCase().includes("color");
@@ -914,6 +955,9 @@ const Field = ({ binding, onNodeChange }) => {
 		setPrevRawValue(rawValue);
 		setText(rawValue);
 	}
+	const commitIfChanged = (next) => {
+		if (next !== (typeof next === "string" ? rawValue : value)) onChange(next);
+	};
 	if (binding.property === "items" || binding.property === "data" || binding.type === "array") return /* @__PURE__ */ jsx(Items, {
 		value: rawValue,
 		render: binding.render,
@@ -923,9 +967,7 @@ const Field = ({ binding, onNodeChange }) => {
 	if (binding.type === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
 		value: rawValue,
 		toolbar: RICHTEXT_TOOLBAR,
-		onChange: (next) => {
-			if (next !== rawValue) onChange(next);
-		}
+		onChange: commitIfChanged
 	});
 	if (binding.property === BINDING_PROP.INNER_HTML || binding.type === "jsx") {
 		const isHTML = binding.property === BINDING_PROP.INNER_HTML;
@@ -934,9 +976,7 @@ const Field = ({ binding, onNodeChange }) => {
 			height: "150px",
 			fragment: !isHTML,
 			raw: isHTML,
-			onSave: (next) => {
-				if (next !== rawValue) onChange(next);
-			}
+			onSave: commitIfChanged
 		});
 	}
 	if (binding.property === "children" && Array.isArray(value)) return /* @__PURE__ */ jsx(Children$1, {
@@ -984,13 +1024,11 @@ const Field = ({ binding, onNodeChange }) => {
 	if (binding.options && Array.isArray(binding.options)) return /* @__PURE__ */ jsx(Select, {
 		value: stringValue,
 		options: binding.options,
-		onChange: (next) => {
-			if (next !== value) onChange(next);
-		}
+		onChange: commitIfChanged
 	});
 	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
 		value: normalizeToHex(stringValue),
-		onChange
+		onChange: commitIfChanged
 	});
 	if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
 		value: parseDateValue(stringValue),
@@ -1002,7 +1040,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1021,7 +1059,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1034,9 +1072,7 @@ const Field = ({ binding, onNodeChange }) => {
 			children: [/* @__PURE__ */ jsx(Select, {
 				value: stringValue,
 				options: ICON_OPTIONS,
-				onChange: (next) => {
-					if (next !== value) onChange(next);
-				}
+				onChange: commitIfChanged
 			}), SelectedIcon && /* @__PURE__ */ jsx(SelectedIcon, {
 				size: 18,
 				className: "shrink-0"
@@ -1064,7 +1100,7 @@ const Field = ({ binding, onNodeChange }) => {
 							return;
 						}
 						setValidationError(null);
-						if (next !== value) onChange(next);
+						commitIfChanged(next);
 					}
 				}),
 				/* @__PURE__ */ jsx(Upload, {
@@ -1074,7 +1110,7 @@ const Field = ({ binding, onNodeChange }) => {
 					defaultValue: defaultUploadValue,
 					onChange: (files) => {
 						const next = files[0]?.url ?? "";
-						if (next !== value) onChange(next);
+						commitIfChanged(next);
 					}
 				}),
 				validationError && /* @__PURE__ */ jsx("p", {
@@ -1098,7 +1134,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1117,7 +1153,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== rawValue) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1146,7 +1182,7 @@ const FieldGroup = ({ bindings, onNodeChange }) => /* @__PURE__ */ jsx("div", {
 				binding,
 				onNodeChange
 			})]
-		}, binding.label))
+		}, `${binding.property}-${binding.label}`))
 	})
 });
 //#endregion
@@ -1161,7 +1197,7 @@ const groupBindingsById = (bindings) => {
 	return [...groups.values()];
 };
 const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange }) => {
-	const groups = useMemo(() => groupBindingsById(bindings), [bindings]);
+	const groups = groupBindingsById(bindings);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
 		children: "Please select a section."
@@ -1524,7 +1560,7 @@ const describeUpdateFailure = (failure, label) => {
 		};
 		case "parse-error": return {
 			title: `Failed to update "${label}"`,
-			description: "Check the console for details."
+			description: failure.error instanceof Error ? failure.error.message : "Check the console for details."
 		};
 		default: return { title: `Failed to update "${label}"` };
 	}
@@ -1540,7 +1576,7 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
 	const { code } = usePreview();
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
-	const value = _value || code || DEFAULT_TEMPLATE;
+	const value = _value === void 0 ? code : _value;
 	const { sections, previews, selectedId, selectedItem, selectedIndex, select, clearSelection, add: addItem, remove: onDelete, copy: onCopy, move: moveSection, reorder, patch } = useSectionDocument(value, _onChange);
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
@@ -1617,16 +1653,18 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 				required: binding.required,
 				meta: binding.meta,
 				value: getStructuredValue(node, binding.property, binding.type),
-				rawValue: getCurrentValue(node, binding.property),
-				onChange: (value) => onFieldChange({
-					id: dataId,
-					label: binding.label,
-					property: binding.property,
-					value
-				})
+				rawValue: getCurrentValue(node, binding.property)
 			}));
 		});
-	}, [fields]);
+	}, [fields]).map((field) => ({
+		...field,
+		onChange: (value) => onFieldChange({
+			id: field.id,
+			label: field.label,
+			property: field.property,
+			value
+		})
+	}));
 	useEffect(() => {
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
@@ -1723,6 +1761,6 @@ Dnd.Canvas = Canvas;
 Dnd.Panel = Panel;
 Dnd.Layout = Layout;
 //#endregion
-export { Panel as a, ICON_OPTIONS as c, useDndPalette as d, useDndPanel as f, Palette as i, useItemsEditor as l, Canvas as n, Field as o, DraggableItem as p, Layout as r, ICON_MAP as s, Dnd as t, useDndLayout as u };
+export { Panel as a, ICON_MAP as c, useDndLayout as d, useDndPalette as f, Palette as i, ICON_OPTIONS as l, DraggableItem as m, Canvas as n, Field as o, useDndPanel as p, Layout as r, useItemsEditor as s, Dnd as t, useChildrenEditor as u };
 
-//# sourceMappingURL=dnd-C4iBiSkv.js.map
+//# sourceMappingURL=dnd-DTT37EbA.js.map