@jbpark/live-editor 2.1.1 → 2.2.0

package/dist/{dnd-C1YGcp4k.js → dnd-DRivgZdt.js}

@@ -166,37 +166,141 @@ const Overlay = ({ sections, renderProps }) => {
 	return null;
 };
 //#endregion
-//#region src/components/dnd/panel/node.tsx
+//#region src/components/dnd/panel/use-items-editor.ts
 var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
-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,
+const resolveLeaf = (render, key) => {
+	const leaf = render?.[key];
+	return leaf && "type" in leaf ? leaf : null;
+};
+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 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) => {
+	const ast = parseArrayExpression(value);
+	if (!ast) return {
+		objectItems: [],
+		primitiveItems: [],
+		parseError: true
+	};
+	const objectItems = [];
+	const primitiveItems = [];
+	ast.elements.filter((element) => Boolean(element)).forEach((element, elementIndex) => {
+		if (!import_lib.isObjectExpression(element)) {
+			const extracted = extractNodeValue(element);
+			primitiveItems.push({
+				id: nanoid(6),
+				index: primitiveItems.length,
+				elementIndex,
+				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(prop.value);
+				if (found.length > 0) jsxBindings[propertyName] = found;
+				else jsxFallbacks[propertyName] = generateCode(prop.value);
+			} catch (error) {
+				console.error(`Failed to parse JSX in property '${propertyName}':`, error);
+			}
+		});
+		objectItems.push({
+			id: nanoid(6),
+			index: objectItems.length,
+			elementIndex,
+			editableProperties: extractObjectProperties(element),
+			jsxBindings,
+			jsxFallbacks
+		});
+	});
+	return {
+		objectItems,
+		primitiveItems,
+		parseError: false
+	};
+};
+const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
+	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
+	useEffect(() => {
+		if (parseError) Toast.error("Failed to parse items", { description: "Check the console for details." });
+	}, [parseError]);
+	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
+	const isPrimitive = kind === "primitive";
+	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;
+		}
+		onChange?.(next);
+	};
+	const elementIndicesOf = (indices) => {
+		return new Set((isPrimitive ? primitiveItems : objectItems).filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
+	};
+	const updateProperty = (elementIndex, propertyKey, next) => {
+		commit(updateArrayItemProperty(value, elementIndex, propertyKey, next, render));
+	};
+	return {
+		kind,
+		items: isPrimitive ? primitiveItems.map((item) => ({
+			id: 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: String(item.value ?? ""),
+				onChange: (next) => commit(updateArrayItemValue(value, item.elementIndex, next))
+			}
+		})) : objectItems.map((item) => {
+			const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
+				const leaf = resolveLeaf(render, key);
+				return {
+					id: `item-${item.id}-${key}`,
+					label: key,
+					property: leaf ? leaf.property ?? leaf.type : key,
+					type: leaf?.type,
+					render: leaf ? leaf.render : resolveMap(render, key),
+					value: parseValue(String(prop.value)),
+					rawValue: String(prop.value),
+					meta: { valueType: prop.type },
+					onChange: (next) => updateProperty(item.elementIndex, key, next)
+				};
+			});
+			const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
+				property,
+				elements: nodes.flatMap((node) => {
+					const id = node.dataAttributes.find((a) => a.name === "data-id")?.value;
+					const attr = node.dataAttributes.find((a) => a.name === "data-binding")?.value;
+					if (!id || !attr) return [];
+					const parsed = node.bindings ?? parseBinding(attr);
+					if (!parsed.length) return [];
+					return [{
+						id,
+						tagName: node.tagName || "element",
+						bindings: parsed.map((binding) => ({
+							id,
 							label: binding.label,
 							property: binding.property,
 							type: binding.type,
@@ -208,21 +312,68 @@ const Node = ({ data, onChange }) => {
 							pattern: binding.pattern,
 							required: binding.required,
 							meta: binding.meta,
-							value: structuredValue,
-							rawValue: currentValue,
-							onChange: (next) => onChange?.({
-								id: dataId,
+							value: getStructuredValue(node, binding.property, binding.type),
+							rawValue: getCurrentValue(node, binding.property),
+							onChange: (next) => onNodeChange?.({
+								id,
 								label: binding.label,
 								property: binding.property,
 								value: next
 							})
-						},
-						onNodeChange: onChange
-					})]
-				}, binding.label);
-			})
-		})
-	});
+						}))
+					}];
+				})
+			})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
+				property,
+				elements: [],
+				fallback: {
+					id: `item-${item.id}-${property}-jsx`,
+					label: property,
+					property,
+					type: "jsx",
+					value: code,
+					rawValue: code,
+					onChange: (next) => updateProperty(item.elementIndex, property, next)
+				}
+			}))];
+			return {
+				id: item.id,
+				index: item.index,
+				elementIndex: item.elementIndex,
+				properties,
+				nested
+			};
+		}),
+		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
@@ -270,143 +421,101 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
 		})]
 	});
 };
+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", {
+			className: "rounded border border-blue-100 bg-blue-50 p-2",
+			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.label))
+				})
+			})]
+		}, `${group.property}-${element.id}`))]
+	});
+};
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { objectItems, primitiveItems, parseError } = useMemo(() => {
-		const ast = parseArrayExpression(value);
-		if (!ast) return {
-			objectItems: [],
-			primitiveItems: [],
-			parseError: true
-		};
-		const objectItems = [];
-		const primitiveItems = [];
-		ast.elements.filter((element) => Boolean(element)).forEach((element, elementIndex) => {
-			if (!import_lib.isObjectExpression(element)) {
-				const extracted = extractNodeValue(element);
-				primitiveItems.push({
-					id: nanoid(6),
-					index: primitiveItems.length,
-					elementIndex,
-					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 jsxCode = generateCode(prop.value);
-					const nodes = extract(jsxCode);
-					const bindings = [];
-					const bindingContainer = nodes.find((node) => node.bindings?.some((b) => b.property === "children"));
-					if (bindingContainer) bindings.push(bindingContainer);
-					else nodes.forEach((node) => {
-						if (node.bindings && node.bindings.length > 0 && node.dataAttributes.some((a) => a.name === "data-id")) bindings.push(node);
-						const editableChildren = findEditableChildren(node);
-						bindings.push(...editableChildren);
-					});
-					if (bindings.length > 0) jsxBindings[propertyName] = bindings;
-					else jsxFallbacks[propertyName] = jsxCode;
-				} catch (error) {
-					console.error(`Failed to parse JSX in property '${propertyName}':`, error);
-				}
-			});
-			objectItems.push({
-				id: nanoid(6),
-				index: objectItems.length,
-				elementIndex,
-				editableProperties: extractObjectProperties(element),
-				jsxBindings,
-				jsxFallbacks
-			});
-		});
-		return {
-			objectItems,
-			primitiveItems,
-			parseError: false
-		};
-	}, [value]);
-	useEffect(() => {
-		if (parseError) Toast.error("Failed to parse items", { description: "Check the console for details." });
-	}, [parseError]);
-	const isPrimitive = primitiveItems.length > 0 && objectItems.length === 0;
-	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;
-		}
-		onChange?.(next);
-	};
-	const elementIndicesOf = (items, indices) => {
-		return new Set(items.filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
-	};
-	const updatePrimitive = (elementIndex, next) => {
-		commit(updateArrayItemValue(value, elementIndex, next));
-	};
-	const movePrimitive = (from, to) => {
-		const target = primitiveItems.find((item) => item.index === to);
-		if (!target) return;
-		commit(moveArrayItem(value, from, target.elementIndex));
-		selection.clear();
-	};
-	const deleteSelectedPrimitives = (indices) => {
-		commit(removeArrayItems(value, elementIndicesOf(primitiveItems, indices), "primitive"));
-	};
-	const deletePrimitive = (elementIndex) => {
-		commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "primitive"));
-		selection.clear();
-	};
-	const addPrimitive = () => {
-		commit(appendArrayItem(value, "primitive"));
-	};
-	const duplicateSelectedPrimitives = (indices) => {
-		commit(duplicateArrayItems(value, elementIndicesOf(primitiveItems, indices)));
-	};
-	const moveSelectedPrimitives = (indices, direction) => {
-		const result = moveArrayItems(value, elementIndicesOf(primitiveItems, indices), direction);
-		if (!result) {
-			commit(null);
-			return;
-		}
-		selection.replace(result.indices);
-		commit(result.code);
-	};
-	const moveItem = (from, to) => {
-		const target = objectItems.find((item) => item.index === to);
-		if (!target) return;
-		commit(moveArrayItem(value, from, target.elementIndex));
-		selection.clear();
-	};
-	const updateProperty = (elementIndex, propertyKey, next) => {
-		commit(updateArrayItemProperty(value, elementIndex, propertyKey, next, render));
-	};
-	const deleteSelectedItems = (indices) => {
-		commit(removeArrayItems(value, elementIndicesOf(objectItems, indices), "object"));
-	};
-	const deleteItem = (elementIndex) => {
-		commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "object"));
-		selection.clear();
-	};
-	const addItem = () => {
-		commit(appendArrayItem(value, "object"));
-	};
-	const duplicateSelectedItems = (indices) => {
-		commit(duplicateArrayItems(value, elementIndicesOf(objectItems, indices)));
-	};
-	const moveSelectedItems = (indices, direction) => {
-		const result = moveArrayItems(value, elementIndicesOf(objectItems, indices), direction);
-		if (!result) {
-			commit(null);
-			return;
-		}
-		selection.replace(result.indices);
-		commit(result.code);
-	};
-	if (isPrimitive) return /* @__PURE__ */ jsxs("div", {
+	const { kind, items, selection, actions } = useItemsEditor(value, {
+		render,
+		onChange,
+		onNodeChange: onChildChange
+	});
+	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
+		count: selection.selected.size,
+		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, {}),
+				disabled: item.index === 0,
+				onClick: () => actions.move(item.elementIndex, item.index - 1)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "small",
+				icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+				disabled: item.index === items.length - 1,
+				onClick: () => actions.move(item.elementIndex, item.index + 1)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				danger: true,
+				size: "small",
+				icon: /* @__PURE__ */ jsx(X, {}),
+				disabled: items.length <= 1,
+				onClick: () => actions.remove(item.elementIndex)
+			})
+		]
+	});
+	if (kind === "primitive") return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -415,7 +524,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					className: "text-sm font-semibold",
 					children: [
 						"Items (",
-						primitiveItems.length,
+						items.length,
 						")"
 					]
 				}), /* @__PURE__ */ jsx(Button, {
@@ -423,22 +532,12 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					icon: /* @__PURE__ */ jsx(Plus, {}),
 					variant: "solid",
 					color: "green",
-					onClick: addPrimitive,
+					onClick: actions.add,
 					children: "Add Item"
 				})]
 			}),
-			/* @__PURE__ */ jsx(BulkActionsBar, {
-				count: selection.selected.size,
-				onDuplicate: () => duplicateSelectedPrimitives(selection.selected),
-				onMoveUp: () => moveSelectedPrimitives(selection.selected, "up"),
-				onMoveDown: () => moveSelectedPrimitives(selection.selected, "down"),
-				onDelete: () => {
-					deleteSelectedPrimitives(selection.selected);
-					selection.clear();
-				},
-				onClear: selection.clear
-			}),
-			primitiveItems.map((item, i) => /* @__PURE__ */ jsxs("div", {
+			bulkBar,
+			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 rounded border border-gray-100 bg-gray-50 p-2",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between space-x-1",
@@ -449,39 +548,9 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 							checked: selection.isSelected(item.index),
 							onChange: () => {}
 						})
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex space-x-1",
-						children: [
-							/* @__PURE__ */ jsx(Button, {
-								size: "small",
-								icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-								disabled: i === 0,
-								onClick: () => movePrimitive(item.elementIndex, item.index - 1)
-							}),
-							/* @__PURE__ */ jsx(Button, {
-								size: "small",
-								icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-								disabled: i === primitiveItems.length - 1,
-								onClick: () => movePrimitive(item.elementIndex, item.index + 1)
-							}),
-							/* @__PURE__ */ jsx(Button, {
-								danger: true,
-								size: "small",
-								icon: /* @__PURE__ */ jsx(X, {}),
-								disabled: primitiveItems.length <= 1,
-								onClick: () => deletePrimitive(item.elementIndex)
-							})
-						]
-					})]
+					}), itemControls(item)]
 				}), /* @__PURE__ */ jsx(Field, {
-					binding: {
-						id: `primitive-${item.id}`,
-						label: `item-${i}`,
-						property: item.type,
-						value: item.value ?? "",
-						rawValue: String(item.value ?? ""),
-						onChange: (next) => updatePrimitive(item.elementIndex, next)
-					},
+					binding: item.value,
 					onNodeChange: onChildChange
 				})]
 			}, item.id))
@@ -496,7 +565,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					className: "text-sm font-semibold",
 					children: [
 						"Items (",
-						objectItems.length,
+						items.length,
 						")"
 					]
 				}), /* @__PURE__ */ jsx(Button, {
@@ -504,23 +573,13 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					icon: /* @__PURE__ */ jsx(Plus, {}),
 					variant: "solid",
 					color: "green",
-					disabled: objectItems.length === 0,
-					onClick: addItem,
+					disabled: items.length === 0,
+					onClick: actions.add,
 					children: "Add Item"
 				})]
 			}),
-			/* @__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
-			}),
-			objectItems.map((item) => /* @__PURE__ */ jsxs("div", {
+			bulkBar,
+			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-3 rounded border bg-gray-50 p-3",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
@@ -538,107 +597,34 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 								className: "text-xs font-medium",
 								children: ["Item ", item.index + 1]
 							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex space-x-1",
-							children: [
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-									disabled: item.index === 0,
-									onClick: () => moveItem(item.elementIndex, item.index - 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-									disabled: item.index === objectItems.length - 1,
-									onClick: () => moveItem(item.elementIndex, item.index + 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									danger: true,
-									size: "small",
-									icon: /* @__PURE__ */ jsx(X, {}),
-									disabled: objectItems.length <= 1,
-									onClick: () => deleteItem(item.elementIndex)
-								})
-							]
-						})]
+						}), itemControls(item)]
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "space-y-2",
-						children: Object.entries(item.editableProperties).map(([key, prop]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						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: key
+								children: binding.label
 							}), /* @__PURE__ */ jsx(Field, {
-								binding: {
-									id: `item-${item.id}-${key}`,
-									label: key,
-									property: render?.[key] && "type" in render[key] ? render[key].property ?? render[key].type : key,
-									type: render?.[key] && "type" in render[key] ? render[key].type : void 0,
-									render: render?.[key] && "type" in render[key] ? render[key].render : render?.[key] && !("type" in render[key]) ? render[key] : void 0,
-									value: parseValue(String(prop.value)),
-									rawValue: String(prop.value),
-									onChange: (next) => updateProperty(item.elementIndex, key, next)
-								},
+								binding,
 								onNodeChange: onChildChange
 							})]
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "text-right text-xs text-gray-500",
 							children: [
 								"(",
-								prop.type,
+								String(binding.meta?.valueType),
 								")"
 							]
-						})] }, `${item.id}-${key}`))
+						})] }, `${item.id}-${binding.label}`))
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "space-y-3 border-t pt-2",
-						children: Object.entries(item.jsxBindings).length > 0 || Object.entries(item.jsxFallbacks).length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [Object.entries(item.jsxBindings).map(([propertyName, bindings]) => /* @__PURE__ */ jsxs("div", {
-							className: "space-y-2",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "text-xs font-medium text-blue-700",
-								children: [
-									propertyName,
-									" Bindings (",
-									bindings.length,
-									"):"
-								]
-							}), bindings.map((bindingNode, idx) => {
-								const nodeId = bindingNode.dataAttributes.find((a) => a.name === "data-id")?.value;
-								return /* @__PURE__ */ jsxs("div", {
-									className: "rounded border border-blue-100 bg-blue-50\n                              p-2",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "mb-1 text-xs text-blue-600",
-										children: [
-											"<",
-											bindingNode.tagName || "element",
-											">"
-										]
-									}), /* @__PURE__ */ jsx(Node, {
-										data: bindingNode,
-										onChange: onChildChange
-									})]
-								}, `binding-${item.id}-${propertyName}-${nodeId || idx}`);
-							})]
-						}, propertyName)), Object.entries(item.jsxFallbacks).map(([propertyName, code]) => /* @__PURE__ */ jsxs("div", {
-							className: "space-y-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "text-xs font-medium text-blue-700",
-								children: propertyName
-							}), /* @__PURE__ */ jsx(Field, {
-								binding: {
-									id: `item-${item.id}-${propertyName}-jsx`,
-									label: propertyName,
-									property: propertyName,
-									type: "jsx",
-									value: code,
-									rawValue: code,
-									onChange: (next) => updateProperty(item.elementIndex, propertyName, next)
-								},
-								onNodeChange: onChildChange
-							})]
-						}, propertyName))] }) : /* @__PURE__ */ jsx("div", {
+						children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
+							group,
+							onNodeChange: onChildChange
+						}, group.property)) : /* @__PURE__ */ jsx("div", {
 							className: "text-xs text-gray-500",
 							children: "✓ No JSX bindings found"
 						})
@@ -649,6 +635,64 @@ 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 = ({ value, onChange, onNodeChange }) => {
 	const items = useMemo(() => Array.isArray(value) ? value : [], [value]);
@@ -1499,7 +1543,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 			onMoveDown: () => moveSection(selectedId, "down"),
 			canMoveUp,
 			canMoveDown,
-			bindings
+			bindings,
+			onNodeChange: onFieldChange
 		});
 		return /* @__PURE__ */ jsx(Panel, {
 			item: selectedItem,
@@ -1634,7 +1679,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 const Dnd = Dnd$1;
 Dnd.DraggableItem = DraggableItem;
 Dnd.DefaultPanel = Panel;
+Dnd.Field = Field;
 //#endregion
-export { DraggableItem as a, ICON_OPTIONS as i, Panel as n, ICON_MAP as r, Dnd as t };
+export { ICON_OPTIONS as a, ICON_MAP as i, Panel as n, useItemsEditor as o, Field as r, DraggableItem as s, Dnd as t };
 
-//# sourceMappingURL=dnd-C1YGcp4k.js.map
+//# sourceMappingURL=dnd-DRivgZdt.js.map