@jbpark/live-editor 3.0.2 → 3.1.0

package/dist/{dnd-C4iBiSkv.js → dnd-BnXoytb5.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 { 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 { E as extractObjectProperties, O as parseArrayExpression, T as extractNodeValue, _ as updateArrayItemValue, b as getStructuredValue, d as duplicateArrayItems, f as moveArrayItem, g as updateArrayItemProperty, h as removeArrayItems, i as replaceIds, k as parseValue, l as extract, o as update, p as moveArrayItems, r as fillIds, s as getChildrenSignatures, t as validateBindingValue, u as appendArrayItem, v as findEditableChildren, x as parseBinding, y as getCurrentValue } from "./ast-CIe-mhh_.js";
+import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-DqqQu2de.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.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,7 +433,8 @@ 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({
@@ -125,18 +452,20 @@ 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),
+			editableProperties,
 			jsxBindings,
 			jsxFallbacks
 		});
@@ -157,10 +486,11 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
 	const commit = (next) => {
 		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;
 		}
 		onChange?.(next);
+		return true;
 	};
 	const elementIndicesOf = (indices) => {
 		return new Set((isPrimitive ? primitiveItems : objectItems).filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
@@ -257,81 +587,35 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 		}),
 		selection,
 		actions: {
-			add: () => commit(appendArrayItem(value, kind)),
-			move: (elementIndex, toIndex) => {
-				const target = (isPrimitive ? primitiveItems : objectItems).find((item) => item.index === toIndex);
-				if (!target) return;
-				commit(moveArrayItem(value, elementIndex, target.elementIndex));
-				selection.clear();
-			},
-			remove: (elementIndex) => {
-				commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind));
-				selection.clear();
-			},
-			duplicateSelected: () => commit(duplicateArrayItems(value, elementIndicesOf(selection.selected))),
-			moveSelected: (direction) => {
-				const result = moveArrayItems(value, elementIndicesOf(selection.selected), direction);
-				if (!result) {
-					commit(null);
-					return;
-				}
-				selection.replace(result.indices);
-				commit(result.code);
-			},
-			removeSelected: () => {
-				commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind));
-				selection.clear();
-			}
-		},
-		parseError
-	};
-};
-//#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"
-				})
-			]
-		})]
-	});
+			add: () => commit(appendArrayItem(value, kind)),
+			move: (elementIndex, toIndex) => {
+				const target = (isPrimitive ? primitiveItems : objectItems).find((item) => item.index === toIndex);
+				if (!target) return;
+				if (commit(moveArrayItem(value, elementIndex, target.elementIndex))) selection.clear();
+			},
+			remove: (elementIndex) => {
+				if (commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind))) selection.clear();
+			},
+			duplicateSelected: () => commit(duplicateArrayItems(value, elementIndicesOf(selection.selected))),
+			moveSelected: (direction) => {
+				const result = moveArrayItems(value, elementIndicesOf(selection.selected), direction);
+				if (!result) {
+					commit(null);
+					return;
+				}
+				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);
+			},
+			removeSelected: () => {
+				if (commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind))) selection.clear();
+			}
+		},
+		parseError
+	};
 };
+//#endregion
+//#region src/components/dnd/panel/items.tsx
 const NestedGroup = ({ group, onNodeChange }) => {
 	if (group.fallback) return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-2",
@@ -546,305 +830,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");
@@ -1161,7 +1146,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 +1509,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}"` };
 	}
@@ -1617,16 +1602,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 +1710,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-BnXoytb5.js.map