@jbpark/live-editor 1.0.3 → 1.1.0

package/dist/index.mjs

@@ -23,7 +23,7 @@ import prettierPluginTypeScript from "prettier/plugins/typescript";
 import Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { useDebounce } from "@jbpark/use-hooks";
+import { useDebounce, useMultiSelect } from "@jbpark/use-hooks";
 
 //#region src/components/context/states.ts
 const PreviewContext = createContext({
@@ -11435,207 +11435,81 @@ const Tiptap = ({ value = "", placeholder = "Enter text...", className, onChange
 };
 
 //#endregion
-//#region src/components/dnd/panel/children.tsx
-const Children = ({ value, onChange, onNodeChange }) => {
-	const items = useMemo(() => Array.isArray(value) ? value : [], [value]);
-	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 deleteItem = (index) => {
-		if (items.length <= 1) return;
-		const nextItems = items.filter((_, i) => i !== index);
-		onChange?.(JSON.stringify(nextItems));
-	};
-	const addItem = () => {
-		const newItem = cloneDataAttrNode(items[0] || createDefaultItem());
-		const nextItems = [...items, newItem];
-		onChange?.(JSON.stringify(nextItems));
+//#region src/components/dnd/panel/selection.ts
+var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1());
+var import_lib = require_lib();
+const removeIndices = (items, indices) => {
+	return items.filter((_, index) => !indices.has(index));
+};
+/**
+* Shifts every selected index up/down by one step as a block, preserving
+* relative order — scattered selections stop moving individually once they
+* hit an unselected neighbor, so the whole group slides together instead of
+* items passing through each other.
+*/
+const moveSelectedIndices = (items, indices, direction) => {
+	const next = [...items];
+	const nextIndices = new Set(indices);
+	const ordered = [...indices].sort((a, b) => direction === "up" ? a - b : b - a);
+	for (const index of ordered) {
+		const target = direction === "up" ? index - 1 : index + 1;
+		if (target < 0 || target >= next.length || nextIndices.has(target)) continue;
+		[next[index], next[target]] = [next[target], next[index]];
+		nextIndices.delete(index);
+		nextIndices.add(target);
+	}
+	return {
+		items: next,
+		indices: nextIndices
 	};
-	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)
-	});
+};
+
+//#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: "space-y-3",
+		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
 		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"
-			})]
-		}), items.map((item, itemIndex) => /* @__PURE__ */ jsxs("div", {
-			className: "space-y-2 rounded border border-green-200 bg-green-50 p-3",
+			className: "text-xs font-medium text-blue-700",
+			children: [count, " selected"]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center space-x-1",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__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)
-							})
-						]
-					})]
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(Copy, {}),
+					title: "Duplicate selected",
+					onClick: onDuplicate
 				}),
-				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}`);
-					})]
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+					title: "Move selected up",
+					onClick: onMoveUp
 				}),
-				!!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}`))]
+				/* @__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"
 				})
 			]
-		}, item.id || itemIndex))]
+		})]
 	});
 };
-
-//#endregion
-//#region src/components/dnd/panel/icon-map.ts
-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
-};
-
-//#endregion
-//#region src/components/dnd/panel/items.tsx
-var import_lib = require_lib();
-var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1());
 const Items = ({ value, render, onChange, onChildChange }) => {
 	const { objectItems, primitiveItems, allElements } = useMemo(() => {
 		const ast = parseArrayExpression(value);
@@ -11694,6 +11568,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		};
 	}, [value]);
 	const isPrimitive = primitiveItems.length > 0 && objectItems.length === 0;
+	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
 	const updatePrimitive = (index, next) => {
 		const ast = parseArrayExpression(value);
 		if (!ast) return;
@@ -11711,11 +11586,12 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		nextElements.splice(toIndex, 0, moved);
 		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
 	};
-	const deletePrimitive = (index) => {
-		if (allElements.length <= 1) return;
-		const nextElements = allElements.filter((_, i) => i !== index);
+	const deleteSelectedPrimitives = (indices) => {
+		if (allElements.length - indices.size < 1) return;
+		const nextElements = removeIndices(allElements, indices);
 		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
 	};
+	const deletePrimitive = (index) => deleteSelectedPrimitives(new Set([index]));
 	const addPrimitive = () => {
 		const first = primitiveItems[0];
 		if (!first) return;
@@ -11723,6 +11599,16 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		if (!newNode) return;
 		onChange?.(generateCode(import_lib$1.arrayExpression([...allElements, newNode])));
 	};
+	const duplicateSelectedPrimitives = (indices) => {
+		const clones = [...indices].sort((a, b) => a - b).map((index) => allElements[index]).filter((node) => Boolean(node)).map((node) => clone(node));
+		if (clones.length === 0) return;
+		onChange?.(generateCode(import_lib$1.arrayExpression([...allElements, ...clones])));
+	};
+	const moveSelectedPrimitives = (indices, direction) => {
+		const { items: nextElements, indices: nextIndices } = moveSelectedIndices(allElements, indices, direction);
+		selection.replace(nextIndices);
+		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
+	};
 	const moveItem = (fromIndex, toIndex) => {
 		const nextItems = [...objectItems];
 		const [movedItem] = nextItems.splice(fromIndex, 1);
@@ -11777,18 +11663,18 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		for (const [placeholder, code] of jsxPlaceholders) nextValue = nextValue.replace(placeholder, () => code);
 		onChange?.(nextValue);
 	};
-	const deleteItem = (index) => {
-		if (objectItems.length <= 1) return;
-		const nextValue = arrayExpressionToCode(objectItems.filter((_, i) => i !== index).map((item) => item.originalElement));
+	const deleteSelectedItems = (indices) => {
+		if (objectItems.length - indices.size < 1) return;
+		const nextValue = arrayExpressionToCode(removeIndices(objectItems, indices).map((item) => item.originalElement));
 		onChange?.(nextValue);
 	};
-	const addItem = () => {
-		const firstItem = objectItems[0];
-		const clonedElement = clone(firstItem.originalElement);
+	const deleteItem = (index) => deleteSelectedItems(new Set([index]));
+	const cloneObjectItemElement = (source) => {
+		const clonedElement = clone(source.originalElement);
 		clonedElement.properties.forEach((prop) => {
 			if (import_lib$1.isObjectProperty(prop) && import_lib$1.isIdentifier(prop.key)) {
 				const key = prop.key.name;
-				const editableProp = firstItem.editableProperties[key];
+				const editableProp = source.editableProperties[key];
 				if (key === "key" && import_lib$1.isStringLiteral(prop.value)) {
 					const uniqueKey = `${prop.value.value}-${nanoid(6)}`;
 					prop.value = import_lib$1.stringLiteral(uniqueKey);
@@ -11800,6 +11686,11 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 				}
 			}
 		});
+		return clonedElement;
+	};
+	const addItem = () => {
+		const firstItem = objectItems[0];
+		const clonedElement = cloneObjectItemElement(firstItem);
 		const editableProperties = extractObjectProperties(clonedElement);
 		const nextItems = [...objectItems];
 		const newItemData = {
@@ -11813,179 +11704,475 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
 		onChange?.(nextValue);
 	};
+	const duplicateSelectedItems = (indices) => {
+		const sources = [...indices].sort((a, b) => a - b).map((index) => objectItems[index]).filter((item) => Boolean(item));
+		if (sources.length === 0) return;
+		const clonedElements = sources.map(cloneObjectItemElement);
+		const nextValue = arrayExpressionToCode([...objectItems.map((item) => item.originalElement), ...clonedElements]);
+		onChange?.(nextValue);
+	};
+	const moveSelectedItems = (indices, direction) => {
+		const { items: nextItems, indices: nextIndices } = moveSelectedIndices(objectItems, indices, direction);
+		selection.replace(nextIndices);
+		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
+		onChange?.(nextValue);
+	};
 	if (isPrimitive) 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 (",
-					primitiveItems.length,
-					")"
-				]
-			}), /* @__PURE__ */ jsx(Button, {
-				size: "small",
-				icon: /* @__PURE__ */ jsx(Plus, {}),
-				variant: "solid",
-				color: "green",
-				onClick: addPrimitive,
-				children: "Add Item"
-			})]
-		}), primitiveItems.map((item, i) => /* @__PURE__ */ jsxs("div", {
-			className: "space-y-2 rounded border border-gray-100 bg-gray-50 p-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-end space-x-1",
-				children: [
-					/* @__PURE__ */ jsx(Button, {
-						size: "small",
-						icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-						disabled: i === 0,
-						onClick: () => movePrimitive(item.index, item.index - 1)
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						size: "small",
-						icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-						disabled: i === primitiveItems.length - 1,
-						onClick: () => movePrimitive(item.index, item.index + 1)
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						danger: true,
-						size: "small",
-						icon: /* @__PURE__ */ jsx(X, {}),
-						disabled: primitiveItems.length <= 1,
-						onClick: () => deletePrimitive(item.index)
-					})
-				]
-			}), /* @__PURE__ */ jsx(Field, {
-				binding: {
-					label: `item-${i}`,
-					property: item.type
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "text-sm font-semibold",
+					children: [
+						"Items (",
+						primitiveItems.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(Plus, {}),
+					variant: "solid",
+					color: "green",
+					onClick: addPrimitive,
+					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();
 				},
-				id: `primitive-${item.id}`,
-				value: String(item.value ?? ""),
-				onChange: ({ value: next }) => updatePrimitive(item.index, next)
-			})]
-		}, item.id))]
-	});
-	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 (",
-					objectItems.length,
-					")"
-				]
-			}), /* @__PURE__ */ jsx(Button, {
-				size: "small",
-				icon: /* @__PURE__ */ jsx(Plus, {}),
-				variant: "solid",
-				color: "green",
-				onClick: addItem,
-				children: "Add Item"
-			})]
-		}), objectItems.map((item) => /* @__PURE__ */ jsxs("div", {
-			className: "space-y-3 rounded border bg-gray-50 p-3",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "text-xs font-medium",
-						children: ["Item ", item.index + 1]
+				onClear: selection.clear
+			}),
+			primitiveItems.map((item, i) => /* @__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",
+					children: [/* @__PURE__ */ jsx("div", {
+						onClick: (e) => selection.toggle(item.index, e.shiftKey),
+						className: "inline-flex",
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							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: item.index === 0,
-								onClick: () => moveItem(item.index, item.index - 1)
+								disabled: i === 0,
+								onClick: () => movePrimitive(item.index, item.index - 1)
 							}),
 							/* @__PURE__ */ jsx(Button, {
 								size: "small",
 								icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-								disabled: item.index === objectItems.length - 1,
-								onClick: () => moveItem(item.index, item.index + 1)
+								disabled: i === primitiveItems.length - 1,
+								onClick: () => movePrimitive(item.index, item.index + 1)
 							}),
 							/* @__PURE__ */ jsx(Button, {
 								danger: true,
 								size: "small",
 								icon: /* @__PURE__ */ jsx(X, {}),
-								disabled: objectItems.length <= 1,
-								onClick: () => deleteItem(item.index)
+								disabled: primitiveItems.length <= 1,
+								onClick: () => deletePrimitive(item.index)
 							})
 						]
 					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "space-y-2",
-					children: Object.entries(item.editableProperties).map(([key, prop]) => /* @__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
-						}), /* @__PURE__ */ jsx(Field, {
-							binding: {
-								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
-							},
-							id: `item-${item.id}-${key}`,
-							value: String(prop.value),
-							onChange: ({ value: next }) => updateProperty(item.index, key, parseValue(next))
+				}), /* @__PURE__ */ jsx(Field, {
+					binding: {
+						label: `item-${i}`,
+						property: item.type
+					},
+					id: `primitive-${item.id}`,
+					value: String(item.value ?? ""),
+					onChange: ({ value: next }) => updatePrimitive(item.index, next)
+				})]
+			}, item.id))
+		]
+	});
+	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 (",
+						objectItems.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(Plus, {}),
+					variant: "solid",
+					color: "green",
+					onClick: addItem,
+					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", {
+				className: "space-y-3 rounded border bg-gray-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(item.index, e.shiftKey),
+								className: "inline-flex",
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									checked: selection.isSelected(item.index),
+									onChange: () => {}
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								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.index, item.index - 1)
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									size: "small",
+									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+									disabled: item.index === objectItems.length - 1,
+									onClick: () => moveItem(item.index, item.index + 1)
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									danger: true,
+									size: "small",
+									icon: /* @__PURE__ */ jsx(X, {}),
+									disabled: objectItems.length <= 1,
+									onClick: () => deleteItem(item.index)
+								})
+							]
 						})]
-					}), /* @__PURE__ */ jsxs("span", {
-						className: "text-right text-xs text-gray-500",
-						children: [
-							"(",
-							prop.type,
-							")"
-						]
-					})] }, `${item.id}-${key}`))
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "space-y-3 border-t pt-2",
-					children: Object.entries(item.jsxBindings).length > 0 ? Object.entries(item.jsxBindings).map(([propertyName, bindings]) => /* @__PURE__ */ jsxs("div", {
+					}),
+					/* @__PURE__ */ jsx("div", {
 						className: "space-y-2",
+						children: Object.entries(item.editableProperties).map(([key, prop]) => /* @__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
+							}), /* @__PURE__ */ jsx(Field, {
+								binding: {
+									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
+								},
+								id: `item-${item.id}-${key}`,
+								value: String(prop.value),
+								onChange: ({ value: next }) => updateProperty(item.index, key, parseValue(next))
+							})]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-right text-xs text-gray-500",
+							children: [
+								"(",
+								prop.type,
+								")"
+							]
+						})] }, `${item.id}-${key}`))
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "space-y-3 border-t pt-2",
+						children: Object.entries(item.jsxBindings).length > 0 ? 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)) : /* @__PURE__ */ jsx("div", {
+							className: "text-xs text-gray-500",
+							children: "✓ No JSX bindings found"
+						})
+					})
+				]
+			}, item.id))
+		]
+	});
+};
+
+//#endregion
+//#region src/components/dnd/panel/children.tsx
+const Children = ({ 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(new Set([index]));
+	const addItem = () => {
+		const newItem = cloneDataAttrNode(items[0] || createDefaultItem());
+		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: "text-xs font-medium text-blue-700",
+							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: [
-								propertyName,
-								" Bindings (",
-								bindings.length,
-								"):"
+								/* @__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)
+								})
 							]
-						}), bindings.map((bindingNode, idx) => {
-							const nodeId = bindingNode.dataAttributes.find((a) => a.name === "data-id")?.value;
+						})]
+					}),
+					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-blue-100 bg-blue-50\n                            p-2",
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "mb-1 text-xs text-blue-600",
-									children: [
-										"<",
-										bindingNode.tagName || "element",
-										">"
-									]
+								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: bindingNode,
-									onChange: onChildChange
+									data: editableNode,
+									onChange: onNodeChange
 								})]
-							}, `binding-${item.id}-${propertyName}-${nodeId || idx}`);
+							}, `editable-${itemIndex}-${nodeId || idx}`);
 						})]
-					}, propertyName)) : /* @__PURE__ */ jsx("div", {
-						className: "text-xs text-gray-500",
-						children: "✓ No JSX bindings found"
+					}),
+					!!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))]
+				]
+			}, item.id || itemIndex))
+		]
 	});
 };
 
+//#endregion
+//#region src/components/dnd/panel/icon-map.ts
+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
+};
+
 //#endregion
 //#region src/components/dnd/panel/field.tsx
 const isColorProperty = (propertyName) => {