@jbpark/live-editor 1.14.0 → 1.15.0

package/dist/dnd-BdNgmgYB.js

@@ -0,0 +1,1717 @@
+import { _ as DEFAULT_TEMPLATE, f as require_lib$1, m as BINDING_PROP, n as createSectionPreviewCache, p as require_lib, v as DRAGGABLE_ITEMS, x as __toESM } from "./document-CSIscFpL.js";
+import { d as replaceSections, i as compile, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-BzfDKU6y.js";
+import { i as usePreview } from "./states-Ci1AvoQ9.js";
+import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-Dq1EfxA5.js";
+import { t as Frame } from "./frame-C11nuIBH.js";
+import { t as generateTailwindCSSFromDOM } from "./tailwind-CbjdLyVX.js";
+import { t as Core } from "./core-B7igZRDs.js";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Toast, Typography, Upload } from "@jbpark/ui-kit";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useDebounce, useMultiSelect, useResponsiveSize } from "@jbpark/use-hooks";
+import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, ChevronUp, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, LayoutGrid, Link, Mail, Map as Map$1, Menu, MessageCircle, Phone, Plus, Search, Settings, Share, ShoppingCart, Star, Trash, Upload as Upload$1, User, X } from "lucide-react";
+import { v4 } from "uuid";
+import { CSS } from "@dnd-kit/utilities";
+import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/components/dnd/draggable.tsx
+var import_lib = require_lib();
+var import_lib$1 = /* @__PURE__ */ __toESM(require_lib$1(), 1);
+const DraggableItem = ({ item, children }) => {
+	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+		id: item.id,
+		data: {
+			type: "new-item",
+			item
+		}
+	});
+	return children({
+		ref: setNodeRef,
+		dragProps: {
+			...listeners,
+			...attributes
+		},
+		isDragging
+	});
+};
+const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__ */ jsx(DraggableItem, {
+	item,
+	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx(Card, {
+		ref,
+		style: { opacity: isDragging ? .5 : 1 },
+		...dragProps,
+		className: cn("cursor-grab", "outline-none", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
+		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
+		children: item.name
+	})
+});
+//#endregion
+//#region src/components/dnd/droppable.tsx
+const Droppable = ({ children, className }) => {
+	const { setNodeRef, isOver, active } = useDroppable({ id: "sortable-area" });
+	const { setNodeRef: setBottomRef, isOver: isBottomOver } = useDroppable({ id: "sortable-area-bottom" });
+	const isNewItemDragging = active?.data.current?.type === "new-item";
+	const shouldHighlight = isOver && isNewItemDragging;
+	const shouldHighlightBottom = isBottomOver && isNewItemDragging;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		className: cn("min-h-full", "border-2 border-dashed p-1", shouldHighlight ? "border-blue-300 bg-blue-50" : "border-gray-200", className),
+		children: [children, isNewItemDragging && /* @__PURE__ */ jsx("div", {
+			ref: setBottomRef,
+			className: cn("mt-2 min-h-24", "rounded-lg border-2 border-dashed", "transition-all duration-200", "flex items-center justify-center", shouldHighlightBottom ? "border-blue-400 bg-blue-100" : "border-gray-300 bg-gray-50"),
+			children: /* @__PURE__ */ jsx(Typography.Text, {
+				className: "text-sm text-gray-500",
+				children: shouldHighlightBottom ? "Drop here" : "Drag here to add at bottom"
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/components/dnd/renderer.tsx
+const Renderer = ({ preview, headers, modules, frame, dynamicTailwind = false, provider }) => {
+	const memoizedModules = useMemo(() => ({
+		...baseModules,
+		...modules
+	}), [modules]);
+	const module = useMemo(() => {
+		try {
+			return compile(preview, memoizedModules);
+		} catch (e) {
+			return {
+				exports: {},
+				error: e instanceof Error ? e.message : "Module transformation error"
+			};
+		}
+	}, [preview, memoizedModules]);
+	const [dynamicCSS, setDynamicCSS] = useState("");
+	const [wrapperEl, setWrapperEl] = useState(null);
+	const wrapperRef = useCallback((el) => {
+		setWrapperEl(el);
+	}, []);
+	useEffect(() => {
+		if (!preview || !dynamicTailwind || !wrapperEl) return;
+		let cancelled = false;
+		generateTailwindCSSFromDOM(wrapperEl).then((css) => {
+			if (!cancelled) setDynamicCSS(css);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		preview,
+		dynamicTailwind,
+		wrapperEl
+	]);
+	const renderProvider = (component) => {
+		return provider ? provider(component) : component;
+	};
+	const Component = module.exports.default;
+	if (!Component) return null;
+	return /* @__PURE__ */ jsx(Frame, {
+		...frame,
+		autoHeight: true,
+		children: (container) => /* @__PURE__ */ jsx("div", {
+			ref: wrapperRef,
+			className: "w-full overflow-x-hidden",
+			"data-editor-mode": true,
+			children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+				headers,
+				container
+			}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
+		})
+	});
+};
+var renderer_default = memo(Renderer);
+//#endregion
+//#region src/components/dnd/sortable.tsx
+const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy }) => {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver, active } = useSortable({ id });
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .5 : 1,
+		cursor: "grab"
+	};
+	const isNewItemOver = isOver && active?.data.current?.type === "new-item";
+	const onDelete = (e) => {
+		e.stopPropagation();
+		_onDelete?.(id);
+	};
+	const onCopy = (e) => {
+		e.stopPropagation();
+		_onCopy?.(id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style,
+		...attributes,
+		...listeners,
+		onClick,
+		className: cn("relative", selected && "z-10 outline-2 outline-offset-2 outline-blue-500", isNewItemOver && "border-t-4 border-t-green-500"),
+		children: [
+			/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-50") }),
+			children,
+			selected && /* @__PURE__ */ jsxs(Space, {
+				className: cn("absolute top-1 right-1 z-60"),
+				children: [/* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(Copy, {}),
+					onClick: onCopy
+				}), /* @__PURE__ */ jsx(Button, {
+					danger: true,
+					icon: /* @__PURE__ */ jsx(Trash, {}),
+					onClick: onDelete
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/overlay.tsx
+const Overlay = ({ sections, renderProps }) => {
+	const { active } = useDndContext();
+	if (!active) return null;
+	if (active.data.current?.type === "new-item") {
+		const item = active.data.current.item;
+		return /* @__PURE__ */ jsx(DefaultDraggableItem, { item });
+	}
+	const section = sections.find((s) => s.id === active.id);
+	if (section) {
+		const preview = generateSection(section.code, renderProps.fullCode);
+		return /* @__PURE__ */ jsx(Sortable, {
+			id: section.id,
+			name: section.name,
+			children: /* @__PURE__ */ jsx(renderer_default, {
+				preview,
+				modules: renderProps.modules,
+				frame: renderProps.frame,
+				dynamicTailwind: renderProps.dynamicTailwind
+			})
+		});
+	}
+	return null;
+};
+//#endregion
+//#region src/components/editor/tiptap.tsx
+const Tiptap = ({ value = "", placeholder = "Enter text...", className, onChange }) => {
+	const editor = useEditor({
+		extensions: [StarterKit, Placeholder.configure({ placeholder })],
+		content: value,
+		onBlur: ({ editor: e }) => {
+			onChange?.(e.getHTML());
+		}
+	});
+	useEffect(() => {
+		if (!editor) return;
+		if (editor.getHTML() !== value) editor.commands.setContent(value, { emitUpdate: false });
+	}, [value, editor]);
+	return /* @__PURE__ */ jsx(EditorContent, {
+		editor,
+		className: cn(`tiptap-editor min-h-20 rounded border border-gray-200 bg-white px-3
+        py-2`, "prose prose-sm max-w-none text-sm text-gray-800", "[&_.tiptap]:outline-none", "[&_.tiptap_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.tiptap_p.is-editor-empty:first-child::before]:float-left", "[&_.tiptap_p.is-editor-empty:first-child::before]:h-0", "[&_.tiptap_p.is-editor-empty:first-child::before]:text-gray-400", "[&_.tiptap_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", className)
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/selection.ts
+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
+	};
+};
+//#endregion
+//#region src/components/dnd/panel/items.tsx
+const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
+	if (count === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-xs font-medium text-blue-700",
+			children: [count, " selected"]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center space-x-1",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(Copy, {}),
+					title: "Duplicate selected",
+					onClick: onDuplicate
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+					title: "Move selected up",
+					onClick: onMoveUp
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+					title: "Move selected down",
+					onClick: onMoveDown
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					danger: true,
+					size: "small",
+					icon: /* @__PURE__ */ jsx(X, {}),
+					title: "Delete selected",
+					onClick: onDelete
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "small",
+					onClick: onClear,
+					children: "Clear"
+				})
+			]
+		})]
+	});
+};
+const Items = ({ value, render, onChange, onChildChange }) => {
+	const { objectItems, primitiveItems, allElements, parseError } = useMemo(() => {
+		const ast = parseArrayExpression(value);
+		if (!ast) return {
+			objectItems: [],
+			primitiveItems: [],
+			allElements: [],
+			parseError: true
+		};
+		const objectItems = [];
+		const primitiveItems = [];
+		const allElements = ast.elements.filter(Boolean);
+		ast.elements.forEach((element) => {
+			if (!element) return;
+			if (!import_lib$1.isObjectExpression(element)) {
+				const extracted = extractNodeValue(element);
+				primitiveItems.push({
+					id: nanoid(6),
+					index: primitiveItems.length,
+					value: extracted.value,
+					type: extracted.type,
+					astNode: element
+				});
+				return;
+			}
+			const jsxBindings = {};
+			element.properties.forEach((prop) => {
+				if (!import_lib$1.isObjectProperty(prop) || !import_lib$1.isIdentifier(prop.key) || !import_lib$1.isJSXElement(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;
+				} catch (error) {
+					console.error(`Failed to parse JSX in property '${propertyName}':`, error);
+				}
+			});
+			objectItems.push({
+				id: nanoid(6),
+				index: objectItems.length,
+				editableProperties: extractObjectProperties(element),
+				originalElement: element,
+				jsxBindings
+			});
+		});
+		return {
+			objectItems,
+			primitiveItems,
+			allElements,
+			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 updatePrimitive = (index, next) => {
+		const ast = parseArrayExpression(value);
+		if (!ast) {
+			Toast.error("Failed to update this item", { description: "Check the console for details." });
+			return;
+		}
+		const elements = ast.elements.filter(Boolean);
+		const item = primitiveItems.find((p) => p.index === index);
+		if (!item) return;
+		const newNode = createNodeFromValue(item.type, parseValue(next));
+		if (!newNode) return;
+		elements[index] = newNode;
+		onChange?.(generateCode(import_lib$1.arrayExpression(elements)));
+	};
+	const movePrimitive = (fromIndex, toIndex) => {
+		const nextElements = [...allElements];
+		const [moved] = nextElements.splice(fromIndex, 1);
+		nextElements.splice(toIndex, 0, moved);
+		onChange?.(generateCode(import_lib$1.arrayExpression(nextElements)));
+	};
+	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(/* @__PURE__ */ new Set([index]));
+	const addPrimitive = () => {
+		const first = primitiveItems[0];
+		if (!first) return;
+		const newNode = createNodeFromValue(first.type, first.value);
+		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);
+		nextItems.splice(toIndex, 0, movedItem);
+		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
+		onChange?.(nextValue);
+	};
+	const updateProperty = (itemIndex, propertyKey, value) => {
+		const item = objectItems[itemIndex];
+		const property = item.editableProperties[propertyKey];
+		const renderLeaf = render?.[propertyKey] && "type" in render[propertyKey] ? render[propertyKey] : null;
+		const isJsx = renderLeaf?.type === "jsx";
+		const isInnerHTML = renderLeaf?.property === BINDING_PROP.INNER_HTML;
+		let nextAstValue = null;
+		if (isInnerHTML) {
+			const str = String(value);
+			nextAstValue = import_lib$1.templateLiteral([import_lib$1.templateElement({
+				raw: str,
+				cooked: str
+			}, true)], []);
+		} else if (property.type === "array" || property.type === "object") try {
+			nextAstValue = (0, import_lib.parseExpression)(String(value), { plugins: ["jsx", "typescript"] });
+		} catch {
+			return;
+		}
+		else if (!isJsx) nextAstValue = createNodeFromValue(property.type, value);
+		if (!isJsx && !nextAstValue) return;
+		const targetProperty = item.originalElement.properties.find((prop) => import_lib$1.isObjectProperty(prop) && import_lib$1.isIdentifier(prop.key) && prop.key.name === propertyKey);
+		const jsxPlaceholders = /* @__PURE__ */ new Map();
+		const originalValues = /* @__PURE__ */ new Map();
+		if (isJsx && targetProperty) {
+			const trimmed = String(value).trim();
+			if (trimmed.startsWith("<")) {
+				const placeholder = `__JSX_${nanoid(6)}__`;
+				jsxPlaceholders.set(placeholder, trimmed);
+				targetProperty.value = import_lib$1.identifier(placeholder);
+			} else targetProperty.value = import_lib$1.stringLiteral(trimmed);
+		} else if (targetProperty && nextAstValue) targetProperty.value = nextAstValue;
+		objectItems.forEach((obj) => {
+			obj.originalElement.properties.forEach((prop) => {
+				if (!import_lib$1.isObjectProperty(prop) || !import_lib$1.isIdentifier(prop.key)) return;
+				if (import_lib$1.isJSXElement(prop.value) || import_lib$1.isJSXFragment(prop.value)) {
+					const placeholder = `__JSX_${nanoid(6)}__`;
+					jsxPlaceholders.set(placeholder, generateCode(prop.value));
+					originalValues.set(prop, prop.value);
+					prop.value = import_lib$1.identifier(placeholder);
+				}
+			});
+		});
+		let nextValue = arrayExpressionToCode(objectItems.map((item) => item.originalElement));
+		for (const [prop, original] of originalValues) prop.value = original;
+		for (const [placeholder, code] of jsxPlaceholders) nextValue = nextValue.replace(placeholder, () => code);
+		onChange?.(nextValue);
+	};
+	const deleteSelectedItems = (indices) => {
+		if (objectItems.length - indices.size < 1) return;
+		const nextItems = removeIndices(objectItems, indices);
+		const nextValue = arrayExpressionToCode(nextItems.map((item) => item.originalElement));
+		onChange?.(nextValue);
+	};
+	const deleteItem = (index) => deleteSelectedItems(/* @__PURE__ */ 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 = 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);
+					return;
+				}
+				if (editableProp) {
+					const nextValue = createNodeFromValue(editableProp.type, editableProp.value);
+					if (nextValue) prop.value = nextValue;
+				}
+			}
+		});
+		return clonedElement;
+	};
+	const addItem = () => {
+		const firstItem = objectItems[0];
+		if (!firstItem) return;
+		const clonedElement = cloneObjectItemElement(firstItem);
+		const editableProperties = extractObjectProperties(clonedElement);
+		const nextItems = [...objectItems];
+		const newItemData = {
+			id: nanoid(6),
+			index: nextItems.length,
+			editableProperties,
+			originalElement: clonedElement,
+			jsxBindings: {}
+		};
+		nextItems.push(newItemData);
+		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"
+				})]
+			}),
+			/* @__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", {
+				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: 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
+					},
+					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",
+					disabled: objectItems.length === 0,
+					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__ */ 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(/* @__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.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) => {
+	return propertyName.toLowerCase().includes("color");
+};
+const normalizeToHex = (value) => {
+	const trimmed = value.trim();
+	if (/^#([0-9A-Fa-f]{3}){1,2}$/.test(trimmed)) return trimmed;
+	return "#000000";
+};
+const parseDateValue = (value) => {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+	if (!match) return;
+	const [, year, month, day] = match;
+	const date = new Date(Number(year), Number(month) - 1, Number(day));
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+const formatDateValue = (date) => {
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+};
+const COLOR_COMMIT_DELAY = 75;
+const ColorPickerField = ({ id, label, value, onChange }) => {
+	const [liveValue, setLiveValue] = useState(value);
+	const [prevValue, setPrevValue] = useState(value);
+	const lastCommittedRef = useRef(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		setLiveValue(value);
+	}
+	useEffect(() => {
+		lastCommittedRef.current = value;
+	}, [value]);
+	const commit = (next) => {
+		if (next === lastCommittedRef.current) return;
+		lastCommittedRef.current = next;
+		onChange?.({
+			id,
+			label,
+			value: next
+		});
+	};
+	const debouncedCommit = useDebounce(() => commit(liveValue), {
+		delay: COLOR_COMMIT_DELAY,
+		autoInvoke: false
+	});
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		showText: true,
+		value: liveValue,
+		onChange: (next) => {
+			setLiveValue(next);
+			debouncedCommit();
+		},
+		onOpenChange: (open) => {
+			if (!open) commit(liveValue);
+		}
+	});
+};
+const 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
+}));
+const Field = ({ binding, id, value, onChange }) => {
+	const parsedValue = useMemo(() => {
+		return parseValue(value);
+	}, [value]);
+	const [validationError, setValidationError] = useState(null);
+	if (binding.property === "items" || binding.property === "data" || binding.type === "array") return /* @__PURE__ */ jsx(Items, {
+		value,
+		render: binding.render,
+		onChange: (next) => {
+			onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		},
+		onChildChange: onChange
+	});
+	if (binding.type === "richtext") return /* @__PURE__ */ jsx(Tiptap, {
+		value,
+		onChange: (next) => {
+			if (next !== value) onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		}
+	});
+	if (binding.property === BINDING_PROP.INNER_HTML || binding.type === "jsx") {
+		const isHTML = binding.property === BINDING_PROP.INNER_HTML;
+		return /* @__PURE__ */ jsx(Core, {
+			value,
+			height: "150px",
+			fragment: !isHTML,
+			raw: isHTML,
+			onSave: (next) => {
+				if (next !== value) onChange?.({
+					id,
+					label: binding.label,
+					value: next
+				});
+			}
+		});
+	}
+	if (binding.property === "children" && Array.isArray(parsedValue)) return /* @__PURE__ */ jsx(Children, {
+		value: parsedValue,
+		onChange: (next) => {
+			onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		},
+		onNodeChange: onChange
+	});
+	if (typeof parsedValue === "object" && parsedValue !== null && !Array.isArray(parsedValue)) return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
+		children: Object.entries(parsedValue).map(([key, val]) => /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "block text-xs font-medium text-gray-600",
+				children: key
+			}), /* @__PURE__ */ jsx(Field, {
+				binding: {
+					label: key,
+					property: binding.render?.[key] && "type" in binding.render[key] ? binding.render[key].type : key,
+					type: binding.render?.[key] && "type" in binding.render[key] ? binding.render[key].type : void 0,
+					render: binding.render?.[key] && !("type" in binding.render[key]) ? binding.render[key] : void 0
+				},
+				id,
+				value: typeof val === "object" ? JSON.stringify(val) : String(val),
+				onChange: ({ value: next }) => {
+					const convertedValue = parseValue(next);
+					const updated = {
+						...parsedValue,
+						[key]: convertedValue
+					};
+					onChange?.({
+						id,
+						label: binding.label,
+						value: JSON.stringify(updated)
+					});
+				}
+			})]
+		}, key))
+	});
+	if (binding.type === "boolean" || typeof parsedValue === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
+		checked: parsedValue === true || parsedValue === "true",
+		onChange: (checked) => {
+			onChange?.({
+				id,
+				label: binding.label,
+				value: checked.toString()
+			});
+		}
+	});
+	const stringValue = String(value);
+	if (binding.options && Array.isArray(binding.options)) return /* @__PURE__ */ jsx(Select, {
+		value: stringValue,
+		options: binding.options,
+		onChange: (next) => {
+			if (next !== value) onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		}
+	});
+	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
+		id,
+		label: binding.label,
+		value: normalizeToHex(stringValue),
+		onChange
+	});
+	if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
+		defaultValue: parseDateValue(stringValue),
+		onChange: (date) => {
+			const next = date ? formatDateValue(date) : "";
+			const result = validateBindingValue(binding, next);
+			if (!result.valid) {
+				setValidationError(result.message ?? "Invalid value.");
+				return;
+			}
+			setValidationError(null);
+			if (next !== value) onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		}
+	}), validationError && /* @__PURE__ */ jsx("p", {
+		className: "mt-1 text-xs text-red-500",
+		children: validationError
+	})] });
+	if (binding.type === "url") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+		type: "url",
+		defaultValue: stringValue,
+		placeholder: "https://example.com",
+		onBlur: (e) => {
+			const next = e.target.value.trim();
+			const result = validateBindingValue(binding, next);
+			if (!result.valid) {
+				setValidationError(result.message ?? "Invalid value.");
+				return;
+			}
+			setValidationError(null);
+			if (next !== value) onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		}
+	}), validationError && /* @__PURE__ */ jsx("p", {
+		className: "mt-1 text-xs text-red-500",
+		children: validationError
+	})] });
+	if (binding.type === "icon-picker") {
+		const SelectedIcon = ICON_MAP[stringValue];
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Select, {
+				value: stringValue,
+				options: ICON_OPTIONS,
+				onChange: (next) => {
+					if (next !== value) onChange?.({
+						id,
+						label: binding.label,
+						value: next
+					});
+				}
+			}), SelectedIcon && /* @__PURE__ */ jsx(SelectedIcon, {
+				size: 18,
+				className: "shrink-0"
+			})]
+		});
+	}
+	if (binding.type === "asset-picker") {
+		const defaultUploadValue = stringValue ? [{
+			uid: "current",
+			name: stringValue.split("/").pop() || "asset",
+			url: stringValue
+		}] : [];
+		return /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					defaultValue: stringValue,
+					placeholder: "Enter an image URL",
+					onBlur: (e) => {
+						const next = e.target.value.trim();
+						const result = validateBindingValue(binding, next);
+						if (!result.valid) {
+							setValidationError(result.message ?? "Invalid value.");
+							return;
+						}
+						setValidationError(null);
+						if (next !== value) onChange?.({
+							id,
+							label: binding.label,
+							value: next
+						});
+					}
+				}),
+				/* @__PURE__ */ jsx(Upload, {
+					multiple: false,
+					maxCount: 1,
+					accept: "image/*",
+					defaultValue: defaultUploadValue,
+					onChange: (files) => {
+						const next = files[0]?.url ?? "";
+						if (next !== value) onChange?.({
+							id,
+							label: binding.label,
+							value: next
+						});
+					}
+				}),
+				validationError && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-xs text-red-500",
+					children: validationError
+				})
+			]
+		});
+	}
+	if (typeof parsedValue === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
+		type: "number",
+		defaultValue: stringValue,
+		placeholder: "Enter a numeric value",
+		onBlur: (e) => {
+			const next = e.target.value.trim();
+			const result = validateBindingValue(binding, next ? Number(next) : "");
+			if (!result.valid) {
+				setValidationError(result.message ?? "Invalid value.");
+				return;
+			}
+			setValidationError(null);
+			if (next !== value) onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		}
+	}), validationError && /* @__PURE__ */ jsx("p", {
+		className: "mt-1 text-xs text-red-500",
+		children: validationError
+	})] });
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input.TextArea, {
+		defaultValue: value,
+		placeholder: "Enter a value",
+		onBlur: (e) => {
+			const next = e.target.value.trim();
+			const result = validateBindingValue(binding, next);
+			if (!result.valid) {
+				setValidationError(result.message ?? "Invalid value.");
+				return;
+			}
+			setValidationError(null);
+			if (next !== value) onChange?.({
+				id,
+				label: binding.label,
+				value: next
+			});
+		}
+	}), validationError && /* @__PURE__ */ jsx("p", {
+		className: "mt-1 text-xs text-red-500",
+		children: validationError
+	})] });
+};
+//#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);
+				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, {
+						id: dataId,
+						binding,
+						value: currentValue,
+						onChange
+					})]
+				}, binding.label);
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/dnd/panel/panel.tsx
+const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, fields, onFieldChange }) => {
+	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
+		className: cn("p-4 text-sm text-gray-500"),
+		children: "Please select a section."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(Typography.Title, {
+					className: "text-lg font-semibold",
+					children: item.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						onMoveUp && /* @__PURE__ */ jsx(Button, {
+							icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+							disabled: !canMoveUp,
+							onClick: onMoveUp,
+							"aria-label": "Move section up"
+						}),
+						onMoveDown && /* @__PURE__ */ jsx(Button, {
+							icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+							disabled: !canMoveDown,
+							onClick: onMoveDown,
+							"aria-label": "Move section down"
+						}),
+						onDelete && /* @__PURE__ */ jsx(Button, {
+							danger: true,
+							icon: /* @__PURE__ */ jsx(Trash, {}),
+							onClick: () => onDelete(item.id),
+							"aria-label": "Delete section"
+						})
+					]
+				})]
+			}),
+			!fields.length && /* @__PURE__ */ jsx(Typography.Text, {
+				className: "text-xs text-gray-400",
+				children: "No editable elements."
+			}),
+			fields.map((node, index) => /* @__PURE__ */ jsx(Node, {
+				data: node,
+				onChange: onFieldChange
+			}, `${item.id}-${index}`))
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/dnd.tsx
+const conditionalModifiers = (args) => {
+	const { active } = args;
+	if (active?.data.current?.type === "new-item") return args.transform;
+	return restrictToVerticalAxis(args);
+};
+const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderPalette, renderPanel, ...restProps }) => {
+	const [selectedId, setSelectedId] = useState(null);
+	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
+	const { breakpoint } = useResponsiveSize();
+	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
+	const { setCode } = usePreview();
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
+	const value = _value || DEFAULT_TEMPLATE;
+	const sections = useMemo(() => extractSections(value), [value]);
+	const selectedItem = useMemo(() => sections.find((s) => s.id === selectedId), [sections, selectedId]);
+	const [previewCache] = useState(() => createSectionPreviewCache());
+	const previews = useMemo(() => previewCache.compute(value, sections), [
+		previewCache,
+		sections,
+		value
+	]);
+	const onDragStart = (_) => {};
+	const onDragOver = (_e) => {};
+	const onDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over) return;
+		if (active.data.current?.type === "new-item") {
+			const newItem = active.data.current.item;
+			const newSection = {
+				id: v4(),
+				name: newItem.name,
+				code: newItem.code
+			};
+			let nextSections;
+			if (over.id === "sortable-area" || over.id === "sortable-area-bottom") nextSections = [...sections, newSection];
+			else {
+				const overIndex = sections.findIndex((s) => s.id === over.id);
+				if (overIndex >= 0) nextSections = [
+					...sections.slice(0, overIndex),
+					newSection,
+					...sections.slice(overIndex)
+				];
+				else nextSections = [...sections, newSection];
+			}
+			const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+			_onChange?.(nextCode);
+			setCode(nextCode);
+			return;
+		}
+		if (active.id !== over.id && sections.some((s) => s.id === active.id)) {
+			const prevIndex = sections.findIndex((s) => s.id === active.id);
+			const nextIndex = sections.findIndex((s) => s.id === over.id);
+			if (prevIndex >= 0 && nextIndex >= 0) {
+				const nextSections = arrayMove(sections, prevIndex, nextIndex);
+				const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+				_onChange?.(nextCode);
+				setCode(nextCode);
+			}
+		}
+	};
+	const addItem = (item) => {
+		const newSection = {
+			id: v4(),
+			name: item.name,
+			code: item.code
+		};
+		const nextSections = [...sections, newSection];
+		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+		_onChange?.(nextCode);
+		setCode(nextCode);
+	};
+	const onDelete = (id) => {
+		const nextSections = sections.filter((s) => s.id !== id);
+		setSelectedId(null);
+		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+		_onChange?.(nextCode);
+		setCode(nextCode);
+	};
+	const moveSection = (id, direction) => {
+		const index = sections.findIndex((s) => s.id === id);
+		const targetIndex = direction === "up" ? index - 1 : index + 1;
+		if (index < 0 || targetIndex < 0 || targetIndex >= sections.length) return;
+		const nextSections = arrayMove(sections, index, targetIndex);
+		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+		_onChange?.(nextCode);
+		setCode(nextCode);
+		setSelectedId(String(targetIndex));
+	};
+	const onCopy = (id) => {
+		const sectionIndex = sections.findIndex((s) => s.id === id);
+		const sectionToCopy = sections[sectionIndex];
+		if (sectionToCopy) {
+			const nextId = v4();
+			const nextSection = {
+				id: nextId,
+				code: replaceIds(sectionToCopy.code),
+				name: sectionToCopy.name
+			};
+			const nextSections = [
+				...sections.slice(0, sectionIndex + 1),
+				nextSection,
+				...sections.slice(sectionIndex + 1)
+			];
+			setSelectedId(nextId);
+			const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+			_onChange?.(nextCode);
+			setCode(nextCode);
+		}
+	};
+	const onSelect = (id) => {
+		setSelectedId((prev) => prev === id ? null : id);
+	};
+	const onChange = (next) => {
+		const nextSections = sections.map((s) => s.id === next.id ? {
+			...s,
+			...next
+		} : s);
+		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+		_onChange?.(nextCode);
+		setCode(nextCode);
+	};
+	const selectedCode = selectedItem?.code;
+	const { fields, updatedCode, parseError } = useMemo(() => {
+		if (!selectedCode) return {
+			fields: [],
+			updatedCode: "",
+			parseError: false
+		};
+		try {
+			const updated = fillIds(selectedCode);
+			return {
+				fields: extract(updated).filter((node) => node.tagName !== "section"),
+				updatedCode: updated !== selectedCode ? updated : selectedCode,
+				parseError: false
+			};
+		} catch (e) {
+			console.warn("⚠️ Parsing error", e);
+			return {
+				fields: [],
+				updatedCode: "",
+				parseError: true
+			};
+		}
+	}, [selectedCode]);
+	useEffect(() => {
+		if (parseError) Toast.error("Failed to parse this section", { description: "Check the console for details." });
+	}, [parseError]);
+	const onFieldChange = ({ id, label, value: fieldValue }) => {
+		const result = update(updatedCode, id, label, fieldValue);
+		if (!result.success) {
+			Toast.error("Failed to update this field", { description: "Check the console for details." });
+			return;
+		}
+		if (selectedItem) onChange({
+			...selectedItem,
+			code: result.code
+		});
+	};
+	const bindings = useMemo(() => {
+		return fields.flatMap((node) => {
+			const dataId = node.dataAttributes.find((a) => a.name === "data-id")?.value;
+			const bindingAttr = node.dataAttributes.find((a) => a.name === "data-binding")?.value;
+			if (!dataId || !bindingAttr) return [];
+			return (node.bindings ?? parseBinding(bindingAttr)).map((binding) => ({
+				id: dataId,
+				label: binding.label,
+				property: binding.property,
+				type: binding.type,
+				options: binding.options,
+				value: getCurrentValue(node, binding.property),
+				onChange: (value) => onFieldChange({
+					id: dataId,
+					label: binding.label,
+					value
+				})
+			}));
+		});
+	}, [fields]);
+	useEffect(() => {
+		if (frame?.scripts?.length) preloadScripts(frame.scripts);
+	}, [frame?.scripts]);
+	const renderPaletteItems = (onAdd, forMobileDrawer = false) => {
+		const paletteItems = items?.length ? items : DRAGGABLE_ITEMS;
+		if (renderPalette) return renderPalette({
+			items: paletteItems,
+			onAdd,
+			DraggableItem,
+			isMobile: forMobileDrawer
+		});
+		return /* @__PURE__ */ jsx(Space, {
+			orientation: "vertical",
+			align: "start",
+			children: paletteItems.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
+				item,
+				onAdd,
+				tapToAdd: forMobileDrawer
+			}, item.id))
+		});
+	};
+	const renderPanelContent = () => {
+		const selectedIndex = sections.findIndex((s) => s.id === selectedId);
+		const canMoveUp = selectedIndex > 0;
+		const canMoveDown = selectedIndex >= 0 && selectedIndex < sections.length - 1;
+		if (renderPanel) return renderPanel({
+			item: selectedItem,
+			onChange,
+			onDelete,
+			onMoveUp: () => moveSection(selectedId, "up"),
+			onMoveDown: () => moveSection(selectedId, "down"),
+			canMoveUp,
+			canMoveDown,
+			bindings
+		});
+		return /* @__PURE__ */ jsx(Panel, {
+			item: selectedItem,
+			onDelete,
+			onMoveUp: () => moveSection(selectedId, "up"),
+			onMoveDown: () => moveSection(selectedId, "down"),
+			canMoveUp,
+			canMoveDown,
+			fields,
+			onFieldChange
+		});
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		modifiers: [conditionalModifiers],
+		onDragStart,
+		onDragOver,
+		onDragEnd,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("relative flex w-full", className),
+			...restProps,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "hidden w-1/5 overflow-y-auto md:block",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "h-full bg-gray-50 p-4",
+						children: renderPaletteItems(addItem)
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("relative", "h-full w-full md:w-3/5", "overflow-y-auto"),
+					"data-frame-container": true,
+					style: {
+						isolation: "isolate",
+						contain: "layout style",
+						transform: "translateZ(0)"
+					},
+					children: /* @__PURE__ */ jsx(Droppable, {
+						className: cn(!sections.length && "h-full"),
+						children: !sections.length ? /* @__PURE__ */ jsx("div", {
+							className: cn("flex items-center justify-center", "h-full", "text-gray-500"),
+							children: /* @__PURE__ */ jsxs(Space, {
+								orientation: "vertical",
+								align: "center",
+								children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: "No sections available" }), /* @__PURE__ */ jsx(Typography.Text, { children: "Drag a component from the left to add it" })]
+							})
+						}) : /* @__PURE__ */ jsx(SortableContext, {
+							items: sections.map((s) => s.id),
+							strategy: verticalListSortingStrategy,
+							children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
+								id: section.id,
+								name: section.name,
+								selected: selectedId === section.id,
+								onClick: () => onSelect(section.id),
+								onDelete,
+								onCopy,
+								children: /* @__PURE__ */ jsx(renderer_default, {
+									preview: previews[index],
+									modules,
+									frame,
+									dynamicTailwind,
+									provider,
+									...props
+								})
+							}, section.id))
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "hidden w-1/5 md:block",
+					children: renderPanelContent()
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "primary",
+					shape: "circle",
+					icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
+					"aria-label": "Components",
+					className: "fixed right-4 bottom-4 z-20 md:hidden",
+					onClick: () => setMobilePaletteOpen(true)
+				}),
+				/* @__PURE__ */ jsx(Drawer, {
+					open: isMobile && mobilePaletteOpen,
+					onClose: () => setMobilePaletteOpen(false),
+					direction: "bottom",
+					size: "large",
+					title: "Components",
+					children: renderPaletteItems((item) => {
+						addItem(item);
+						setMobilePaletteOpen(false);
+					}, true)
+				}),
+				/* @__PURE__ */ jsx(Drawer, {
+					open: isMobile && Boolean(selectedId),
+					onClose: () => setSelectedId(null),
+					direction: "bottom",
+					size: "large",
+					title: "Properties",
+					children: renderPanelContent()
+				})
+			]
+		}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
+			sections,
+			renderProps: {
+				fullCode: value,
+				modules,
+				frame,
+				dynamicTailwind,
+				...props
+			}
+		}) })]
+	}) });
+};
+//#endregion
+//#region src/components/dnd/index.ts
+const Dnd = Dnd$1;
+Dnd.DraggableItem = DraggableItem;
+//#endregion
+export { DraggableItem as n, Dnd as t };
+
+//# sourceMappingURL=dnd-BdNgmgYB.js.map