@jbpark/live-editor 2.1.1 → 3.0.0

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

@@ -1,11 +1,11 @@
-import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-CgUTKVQo.js";
-import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-DbfbS1yV.js";
+import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-C6bNHl7l.js";
+import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-BwEgY5pe.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, M as generateCode, S as parseBinding, _ as moveSelectedIndices, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, k as parseArrayExpression, l as moveArrayItems, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, v as removeIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-CAhr9WXv.js";
-import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-cdaivJXJ.js";
-import { n as Error, t as ErrorBoundary } from "./boundary-DQiKrXhI.js";
-import { t as Core } from "./core-D5Hn-6ow.js";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, M as generateCode, S as parseBinding, _ as moveSelectedIndices, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, k as parseArrayExpression, l as moveArrayItems, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, v as removeIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-DRg6HV4H.js";
+import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-C0Onss1A.js";
+import { t as Core } from "./core-CbuS_p_d.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-BF7iZp6e.js";
+import { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, Toast, Typography, Upload } from "@jbpark/ui-kit";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -14,6 +14,28 @@ import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy }
 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 { CSS } from "@dnd-kit/utilities";
+//#region src/components/dnd/droppable.tsx
+var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
+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/draggable.tsx
 const DraggableItem = ({ item, children }) => {
 	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
@@ -45,158 +67,151 @@ const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__
 	})
 });
 //#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"
-			})
-		})]
-	});
+//#region src/components/dnd/layout-context.ts
+const DndRegionContext = createContext(null);
+const useDndRegions = (subject) => {
+	const regions = useContext(DndRegionContext);
+	if (!regions) throw new Error(`${subject} must be used inside <Live.Dnd>.`);
+	return regions;
 };
+const useDndPalette = () => useDndRegions("useDndPalette()").palette;
+const useDndPanel = () => useDndRegions("useDndPanel()").panel;
+const useDndLayout = () => useDndRegions("useDndLayout()");
 //#endregion
-//#region src/components/dnd/renderer.tsx
-const Renderer = ({ preview, headers, modules, frame, dynamicTailwind = false, provider }) => {
-	const module = useCompiledModule(preview, modules);
-	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind);
-	const renderProvider = (component) => {
-		return provider ? provider(component) : component;
-	};
-	if (module?.error) return /* @__PURE__ */ jsx(Error, {
-		message: module.error,
-		title: "Compile Error"
+//#region src/components/dnd/panel/use-items-editor.ts
+const resolveLeaf = (render, key) => {
+	const leaf = render?.[key];
+	return leaf && "type" in leaf ? leaf : null;
+};
+const resolveMap = (render, key) => {
+	const leaf = render?.[key];
+	return leaf && !("type" in leaf) ? leaf : void 0;
+};
+const bindingsInJSX = (node) => {
+	const nodes = extract(generateCode(node));
+	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
+	if (container) return [container];
+	const bindings = [];
+	nodes.forEach((n) => {
+		if (n.bindings && n.bindings.length > 0 && n.dataAttributes.some((a) => a.name === "data-id")) bindings.push(n);
+		bindings.push(...findEditableChildren(n));
 	});
-	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: /* @__PURE__ */ jsx(ErrorBoundary, {
-				resetKeys: [preview],
-				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
-					headers,
-					container
-				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
-			})
-		})
+	return bindings;
+};
+const parseSource = (value) => {
+	const ast = parseArrayExpression(value);
+	if (!ast) return {
+		objectItems: [],
+		primitiveItems: [],
+		parseError: true
+	};
+	const objectItems = [];
+	const primitiveItems = [];
+	ast.elements.filter((element) => Boolean(element)).forEach((element, elementIndex) => {
+		if (!import_lib.isObjectExpression(element)) {
+			const extracted = extractNodeValue(element);
+			primitiveItems.push({
+				id: nanoid(6),
+				index: primitiveItems.length,
+				elementIndex,
+				value: extracted.value,
+				type: extracted.type
+			});
+			return;
+		}
+		const jsxBindings = {};
+		const jsxFallbacks = {};
+		element.properties.forEach((prop) => {
+			if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !(import_lib.isJSXElement(prop.value) || import_lib.isJSXFragment(prop.value))) return;
+			const propertyName = prop.key.name;
+			try {
+				const found = bindingsInJSX(prop.value);
+				if (found.length > 0) jsxBindings[propertyName] = found;
+				else jsxFallbacks[propertyName] = generateCode(prop.value);
+			} catch (error) {
+				console.error(`Failed to parse JSX in property '${propertyName}':`, error);
+			}
+		});
+		objectItems.push({
+			id: nanoid(6),
+			index: objectItems.length,
+			elementIndex,
+			editableProperties: extractObjectProperties(element),
+			jsxBindings,
+			jsxFallbacks
+		});
 	});
+	return {
+		objectItems,
+		primitiveItems,
+		parseError: false
+	};
 };
-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 useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
+	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
+	useEffect(() => {
+		if (parseError) Toast.error("Failed to parse items", { description: "Check the console for details." });
+	}, [parseError]);
+	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
+	const isPrimitive = kind === "primitive";
+	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
+	const commit = (next) => {
+		if (next === null) {
+			Toast.error("Failed to update this item", { description: "Check the console for details." });
+			return;
+		}
+		onChange?.(next);
 	};
-	const isNewItemOver = isOver && active?.data.current?.type === "new-item";
-	const onDelete = (e) => {
-		e.stopPropagation();
-		_onDelete?.(id);
+	const elementIndicesOf = (indices) => {
+		return new Set((isPrimitive ? primitiveItems : objectItems).filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
 	};
-	const onCopy = (e) => {
-		e.stopPropagation();
-		_onCopy?.(id);
+	const updateProperty = (elementIndex, propertyKey, next) => {
+		commit(updateArrayItemProperty(value, elementIndex, propertyKey, next, render));
 	};
-	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/dnd/panel/node.tsx
-var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
-const Node = ({ data, onChange }) => {
-	const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
-	const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
-	if (!idAttr?.value || !bindingAttr?.value) return null;
-	const dataId = idAttr.value;
-	const bindings = data.bindings || parseBinding(bindingAttr.value);
-	if (!bindings.length) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-2 rounded",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "space-y-1",
-			children: bindings.map((binding) => {
-				const currentValue = getCurrentValue(data, binding.property);
-				const structuredValue = getStructuredValue(data, binding.property, binding.type);
-				return /* @__PURE__ */ jsxs("div", {
-					className: "space-y-1",
-					children: [/* @__PURE__ */ jsxs("label", {
-						className: "block text-xs font-semibold text-gray-700",
-						children: [binding.label, /* @__PURE__ */ jsxs("span", {
-							className: "ml-1 text-gray-400",
-							children: [
-								"(",
-								binding.property,
-								")"
-							]
-						})]
-					}), /* @__PURE__ */ jsx(Field, {
-						binding: {
-							id: dataId,
+	return {
+		kind,
+		items: isPrimitive ? primitiveItems.map((item) => ({
+			id: item.id,
+			index: item.index,
+			elementIndex: item.elementIndex,
+			properties: [],
+			nested: [],
+			value: {
+				id: `primitive-${item.id}`,
+				label: `item-${item.index}`,
+				property: item.type,
+				value: item.value ?? "",
+				rawValue: String(item.value ?? ""),
+				onChange: (next) => commit(updateArrayItemValue(value, item.elementIndex, next))
+			}
+		})) : objectItems.map((item) => {
+			const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
+				const leaf = resolveLeaf(render, key);
+				return {
+					id: `item-${item.id}-${key}`,
+					label: key,
+					property: leaf ? leaf.property ?? leaf.type : key,
+					type: leaf?.type,
+					render: leaf ? leaf.render : resolveMap(render, key),
+					value: parseValue(String(prop.value)),
+					rawValue: String(prop.value),
+					meta: { valueType: prop.type },
+					onChange: (next) => updateProperty(item.elementIndex, key, next)
+				};
+			});
+			const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
+				property,
+				elements: nodes.flatMap((node) => {
+					const id = node.dataAttributes.find((a) => a.name === "data-id")?.value;
+					const attr = node.dataAttributes.find((a) => a.name === "data-binding")?.value;
+					if (!id || !attr) return [];
+					const parsed = node.bindings ?? parseBinding(attr);
+					if (!parsed.length) return [];
+					return [{
+						id,
+						tagName: node.tagName || "element",
+						bindings: parsed.map((binding) => ({
+							id,
 							label: binding.label,
 							property: binding.property,
 							type: binding.type,
@@ -208,21 +223,68 @@ const Node = ({ data, onChange }) => {
 							pattern: binding.pattern,
 							required: binding.required,
 							meta: binding.meta,
-							value: structuredValue,
-							rawValue: currentValue,
-							onChange: (next) => onChange?.({
-								id: dataId,
+							value: getStructuredValue(node, binding.property, binding.type),
+							rawValue: getCurrentValue(node, binding.property),
+							onChange: (next) => onNodeChange?.({
+								id,
 								label: binding.label,
 								property: binding.property,
 								value: next
 							})
-						},
-						onNodeChange: onChange
-					})]
-				}, binding.label);
-			})
-		})
-	});
+						}))
+					}];
+				})
+			})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
+				property,
+				elements: [],
+				fallback: {
+					id: `item-${item.id}-${property}-jsx`,
+					label: property,
+					property,
+					type: "jsx",
+					value: code,
+					rawValue: code,
+					onChange: (next) => updateProperty(item.elementIndex, property, next)
+				}
+			}))];
+			return {
+				id: item.id,
+				index: item.index,
+				elementIndex: item.elementIndex,
+				properties,
+				nested
+			};
+		}),
+		selection,
+		actions: {
+			add: () => commit(appendArrayItem(value, kind)),
+			move: (elementIndex, toIndex) => {
+				const target = (isPrimitive ? primitiveItems : objectItems).find((item) => item.index === toIndex);
+				if (!target) return;
+				commit(moveArrayItem(value, elementIndex, target.elementIndex));
+				selection.clear();
+			},
+			remove: (elementIndex) => {
+				commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind));
+				selection.clear();
+			},
+			duplicateSelected: () => commit(duplicateArrayItems(value, elementIndicesOf(selection.selected))),
+			moveSelected: (direction) => {
+				const result = moveArrayItems(value, elementIndicesOf(selection.selected), direction);
+				if (!result) {
+					commit(null);
+					return;
+				}
+				selection.replace(result.indices);
+				commit(result.code);
+			},
+			removeSelected: () => {
+				commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind));
+				selection.clear();
+			}
+		},
+		parseError
+	};
 };
 //#endregion
 //#region src/components/dnd/panel/items.tsx
@@ -270,143 +332,101 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
 		})]
 	});
 };
+const NestedGroup = ({ group, onNodeChange }) => {
+	if (group.fallback) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-xs font-medium text-blue-700",
+			children: group.property
+		}), /* @__PURE__ */ jsx(Field, {
+			binding: group.fallback,
+			onNodeChange
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-xs font-medium text-blue-700",
+			children: [
+				group.property,
+				" Bindings (",
+				group.elements.length,
+				"):"
+			]
+		}), group.elements.map((element) => /* @__PURE__ */ jsxs("div", {
+			className: "rounded border border-blue-100 bg-blue-50 p-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "mb-1 text-xs text-blue-600",
+				children: [
+					"<",
+					element.tagName,
+					">"
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-2 rounded",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "space-y-1",
+					children: element.bindings.map((binding) => /* @__PURE__ */ jsxs("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ jsxs("label", {
+							className: "block text-xs font-semibold text-gray-700",
+							children: [binding.label, /* @__PURE__ */ jsxs("span", {
+								className: "ml-1 text-gray-400",
+								children: [
+									"(",
+									binding.property,
+									")"
+								]
+							})]
+						}), /* @__PURE__ */ jsx(Field, {
+							binding,
+							onNodeChange
+						})]
+					}, binding.label))
+				})
+			})]
+		}, `${group.property}-${element.id}`))]
+	});
+};
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { objectItems, primitiveItems, parseError } = useMemo(() => {
-		const ast = parseArrayExpression(value);
-		if (!ast) return {
-			objectItems: [],
-			primitiveItems: [],
-			parseError: true
-		};
-		const objectItems = [];
-		const primitiveItems = [];
-		ast.elements.filter((element) => Boolean(element)).forEach((element, elementIndex) => {
-			if (!import_lib.isObjectExpression(element)) {
-				const extracted = extractNodeValue(element);
-				primitiveItems.push({
-					id: nanoid(6),
-					index: primitiveItems.length,
-					elementIndex,
-					value: extracted.value,
-					type: extracted.type
-				});
-				return;
-			}
-			const jsxBindings = {};
-			const jsxFallbacks = {};
-			element.properties.forEach((prop) => {
-				if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !(import_lib.isJSXElement(prop.value) || import_lib.isJSXFragment(prop.value))) return;
-				const propertyName = prop.key.name;
-				try {
-					const jsxCode = generateCode(prop.value);
-					const nodes = extract(jsxCode);
-					const bindings = [];
-					const bindingContainer = nodes.find((node) => node.bindings?.some((b) => b.property === "children"));
-					if (bindingContainer) bindings.push(bindingContainer);
-					else nodes.forEach((node) => {
-						if (node.bindings && node.bindings.length > 0 && node.dataAttributes.some((a) => a.name === "data-id")) bindings.push(node);
-						const editableChildren = findEditableChildren(node);
-						bindings.push(...editableChildren);
-					});
-					if (bindings.length > 0) jsxBindings[propertyName] = bindings;
-					else jsxFallbacks[propertyName] = jsxCode;
-				} catch (error) {
-					console.error(`Failed to parse JSX in property '${propertyName}':`, error);
-				}
-			});
-			objectItems.push({
-				id: nanoid(6),
-				index: objectItems.length,
-				elementIndex,
-				editableProperties: extractObjectProperties(element),
-				jsxBindings,
-				jsxFallbacks
-			});
-		});
-		return {
-			objectItems,
-			primitiveItems,
-			parseError: false
-		};
-	}, [value]);
-	useEffect(() => {
-		if (parseError) Toast.error("Failed to parse items", { description: "Check the console for details." });
-	}, [parseError]);
-	const isPrimitive = primitiveItems.length > 0 && objectItems.length === 0;
-	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
-	const commit = (next) => {
-		if (next === null) {
-			Toast.error("Failed to update this item", { description: "Check the console for details." });
-			return;
-		}
-		onChange?.(next);
-	};
-	const elementIndicesOf = (items, indices) => {
-		return new Set(items.filter((item) => indices.has(item.index)).map((item) => item.elementIndex));
-	};
-	const updatePrimitive = (elementIndex, next) => {
-		commit(updateArrayItemValue(value, elementIndex, next));
-	};
-	const movePrimitive = (from, to) => {
-		const target = primitiveItems.find((item) => item.index === to);
-		if (!target) return;
-		commit(moveArrayItem(value, from, target.elementIndex));
-		selection.clear();
-	};
-	const deleteSelectedPrimitives = (indices) => {
-		commit(removeArrayItems(value, elementIndicesOf(primitiveItems, indices), "primitive"));
-	};
-	const deletePrimitive = (elementIndex) => {
-		commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "primitive"));
-		selection.clear();
-	};
-	const addPrimitive = () => {
-		commit(appendArrayItem(value, "primitive"));
-	};
-	const duplicateSelectedPrimitives = (indices) => {
-		commit(duplicateArrayItems(value, elementIndicesOf(primitiveItems, indices)));
-	};
-	const moveSelectedPrimitives = (indices, direction) => {
-		const result = moveArrayItems(value, elementIndicesOf(primitiveItems, indices), direction);
-		if (!result) {
-			commit(null);
-			return;
-		}
-		selection.replace(result.indices);
-		commit(result.code);
-	};
-	const moveItem = (from, to) => {
-		const target = objectItems.find((item) => item.index === to);
-		if (!target) return;
-		commit(moveArrayItem(value, from, target.elementIndex));
-		selection.clear();
-	};
-	const updateProperty = (elementIndex, propertyKey, next) => {
-		commit(updateArrayItemProperty(value, elementIndex, propertyKey, next, render));
-	};
-	const deleteSelectedItems = (indices) => {
-		commit(removeArrayItems(value, elementIndicesOf(objectItems, indices), "object"));
-	};
-	const deleteItem = (elementIndex) => {
-		commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), "object"));
-		selection.clear();
-	};
-	const addItem = () => {
-		commit(appendArrayItem(value, "object"));
-	};
-	const duplicateSelectedItems = (indices) => {
-		commit(duplicateArrayItems(value, elementIndicesOf(objectItems, indices)));
-	};
-	const moveSelectedItems = (indices, direction) => {
-		const result = moveArrayItems(value, elementIndicesOf(objectItems, indices), direction);
-		if (!result) {
-			commit(null);
-			return;
-		}
-		selection.replace(result.indices);
-		commit(result.code);
-	};
-	if (isPrimitive) return /* @__PURE__ */ jsxs("div", {
+	const { kind, items, selection, actions } = useItemsEditor(value, {
+		render,
+		onChange,
+		onNodeChange: onChildChange
+	});
+	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
+		count: selection.selected.size,
+		onDuplicate: actions.duplicateSelected,
+		onMoveUp: () => actions.moveSelected("up"),
+		onMoveDown: () => actions.moveSelected("down"),
+		onDelete: actions.removeSelected,
+		onClear: selection.clear
+	});
+	const itemControls = (item) => /* @__PURE__ */ jsxs("div", {
+		className: "flex space-x-1",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				size: "small",
+				icon: /* @__PURE__ */ jsx(ArrowUp, {}),
+				disabled: item.index === 0,
+				onClick: () => actions.move(item.elementIndex, item.index - 1)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "small",
+				icon: /* @__PURE__ */ jsx(ArrowDown, {}),
+				disabled: item.index === items.length - 1,
+				onClick: () => actions.move(item.elementIndex, item.index + 1)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				danger: true,
+				size: "small",
+				icon: /* @__PURE__ */ jsx(X, {}),
+				disabled: items.length <= 1,
+				onClick: () => actions.remove(item.elementIndex)
+			})
+		]
+	});
+	if (kind === "primitive") return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -415,7 +435,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					className: "text-sm font-semibold",
 					children: [
 						"Items (",
-						primitiveItems.length,
+						items.length,
 						")"
 					]
 				}), /* @__PURE__ */ jsx(Button, {
@@ -423,22 +443,12 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					icon: /* @__PURE__ */ jsx(Plus, {}),
 					variant: "solid",
 					color: "green",
-					onClick: addPrimitive,
+					onClick: actions.add,
 					children: "Add Item"
 				})]
 			}),
-			/* @__PURE__ */ jsx(BulkActionsBar, {
-				count: selection.selected.size,
-				onDuplicate: () => duplicateSelectedPrimitives(selection.selected),
-				onMoveUp: () => moveSelectedPrimitives(selection.selected, "up"),
-				onMoveDown: () => moveSelectedPrimitives(selection.selected, "down"),
-				onDelete: () => {
-					deleteSelectedPrimitives(selection.selected);
-					selection.clear();
-				},
-				onClear: selection.clear
-			}),
-			primitiveItems.map((item, i) => /* @__PURE__ */ jsxs("div", {
+			bulkBar,
+			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 rounded border border-gray-100 bg-gray-50 p-2",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between space-x-1",
@@ -448,40 +458,10 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 						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.elementIndex, item.index - 1)
-							}),
-							/* @__PURE__ */ jsx(Button, {
-								size: "small",
-								icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-								disabled: i === primitiveItems.length - 1,
-								onClick: () => movePrimitive(item.elementIndex, item.index + 1)
-							}),
-							/* @__PURE__ */ jsx(Button, {
-								danger: true,
-								size: "small",
-								icon: /* @__PURE__ */ jsx(X, {}),
-								disabled: primitiveItems.length <= 1,
-								onClick: () => deletePrimitive(item.elementIndex)
-							})
-						]
-					})]
+						})
+					}), itemControls(item)]
 				}), /* @__PURE__ */ jsx(Field, {
-					binding: {
-						id: `primitive-${item.id}`,
-						label: `item-${i}`,
-						property: item.type,
-						value: item.value ?? "",
-						rawValue: String(item.value ?? ""),
-						onChange: (next) => updatePrimitive(item.elementIndex, next)
-					},
+					binding: item.value,
 					onNodeChange: onChildChange
 				})]
 			}, item.id))
@@ -496,7 +476,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					className: "text-sm font-semibold",
 					children: [
 						"Items (",
-						objectItems.length,
+						items.length,
 						")"
 					]
 				}), /* @__PURE__ */ jsx(Button, {
@@ -504,23 +484,13 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					icon: /* @__PURE__ */ jsx(Plus, {}),
 					variant: "solid",
 					color: "green",
-					disabled: objectItems.length === 0,
-					onClick: addItem,
+					disabled: items.length === 0,
+					onClick: actions.add,
 					children: "Add Item"
 				})]
 			}),
-			/* @__PURE__ */ jsx(BulkActionsBar, {
-				count: selection.selected.size,
-				onDuplicate: () => duplicateSelectedItems(selection.selected),
-				onMoveUp: () => moveSelectedItems(selection.selected, "up"),
-				onMoveDown: () => moveSelectedItems(selection.selected, "down"),
-				onDelete: () => {
-					deleteSelectedItems(selection.selected);
-					selection.clear();
-				},
-				onClear: selection.clear
-			}),
-			objectItems.map((item) => /* @__PURE__ */ jsxs("div", {
+			bulkBar,
+			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-3 rounded border bg-gray-50 p-3",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
@@ -538,107 +508,34 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 								className: "text-xs font-medium",
 								children: ["Item ", item.index + 1]
 							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex space-x-1",
-							children: [
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-									disabled: item.index === 0,
-									onClick: () => moveItem(item.elementIndex, item.index - 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									size: "small",
-									icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-									disabled: item.index === objectItems.length - 1,
-									onClick: () => moveItem(item.elementIndex, item.index + 1)
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									danger: true,
-									size: "small",
-									icon: /* @__PURE__ */ jsx(X, {}),
-									disabled: objectItems.length <= 1,
-									onClick: () => deleteItem(item.elementIndex)
-								})
-							]
-						})]
+						}), itemControls(item)]
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "space-y-2",
-						children: Object.entries(item.editableProperties).map(([key, prop]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						children: item.properties.map((binding) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex flex-col space-y-2",
 							children: [/* @__PURE__ */ jsx("label", {
 								className: "w-20 shrink-0 text-xs font-medium",
-								children: key
+								children: binding.label
 							}), /* @__PURE__ */ jsx(Field, {
-								binding: {
-									id: `item-${item.id}-${key}`,
-									label: key,
-									property: render?.[key] && "type" in render[key] ? render[key].property ?? render[key].type : key,
-									type: render?.[key] && "type" in render[key] ? render[key].type : void 0,
-									render: render?.[key] && "type" in render[key] ? render[key].render : render?.[key] && !("type" in render[key]) ? render[key] : void 0,
-									value: parseValue(String(prop.value)),
-									rawValue: String(prop.value),
-									onChange: (next) => updateProperty(item.elementIndex, key, next)
-								},
+								binding,
 								onNodeChange: onChildChange
 							})]
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "text-right text-xs text-gray-500",
 							children: [
 								"(",
-								prop.type,
+								String(binding.meta?.valueType),
 								")"
 							]
-						})] }, `${item.id}-${key}`))
+						})] }, `${item.id}-${binding.label}`))
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "space-y-3 border-t pt-2",
-						children: Object.entries(item.jsxBindings).length > 0 || Object.entries(item.jsxFallbacks).length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [Object.entries(item.jsxBindings).map(([propertyName, bindings]) => /* @__PURE__ */ jsxs("div", {
-							className: "space-y-2",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "text-xs font-medium text-blue-700",
-								children: [
-									propertyName,
-									" Bindings (",
-									bindings.length,
-									"):"
-								]
-							}), bindings.map((bindingNode, idx) => {
-								const nodeId = bindingNode.dataAttributes.find((a) => a.name === "data-id")?.value;
-								return /* @__PURE__ */ jsxs("div", {
-									className: "rounded border border-blue-100 bg-blue-50\n                              p-2",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "mb-1 text-xs text-blue-600",
-										children: [
-											"<",
-											bindingNode.tagName || "element",
-											">"
-										]
-									}), /* @__PURE__ */ jsx(Node, {
-										data: bindingNode,
-										onChange: onChildChange
-									})]
-								}, `binding-${item.id}-${propertyName}-${nodeId || idx}`);
-							})]
-						}, propertyName)), Object.entries(item.jsxFallbacks).map(([propertyName, code]) => /* @__PURE__ */ jsxs("div", {
-							className: "space-y-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "text-xs font-medium text-blue-700",
-								children: propertyName
-							}), /* @__PURE__ */ jsx(Field, {
-								binding: {
-									id: `item-${item.id}-${propertyName}-jsx`,
-									label: propertyName,
-									property: propertyName,
-									type: "jsx",
-									value: code,
-									rawValue: code,
-									onChange: (next) => updateProperty(item.elementIndex, propertyName, next)
-								},
-								onNodeChange: onChildChange
-							})]
-						}, propertyName))] }) : /* @__PURE__ */ jsx("div", {
+						children: item.nested.length ? item.nested.map((group) => /* @__PURE__ */ jsx(NestedGroup, {
+							group,
+							onNodeChange: onChildChange
+						}, group.property)) : /* @__PURE__ */ jsx("div", {
 							className: "text-xs text-gray-500",
 							children: "✓ No JSX bindings found"
 						})
@@ -649,8 +546,66 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	});
 };
 //#endregion
+//#region src/components/dnd/panel/node.tsx
+const Node = ({ data, onChange }) => {
+	const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
+	const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
+	if (!idAttr?.value || !bindingAttr?.value) return null;
+	const dataId = idAttr.value;
+	const bindings = data.bindings || parseBinding(bindingAttr.value);
+	if (!bindings.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-2 rounded",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-1",
+			children: bindings.map((binding) => {
+				const currentValue = getCurrentValue(data, binding.property);
+				const structuredValue = getStructuredValue(data, binding.property, binding.type);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "block text-xs font-semibold text-gray-700",
+						children: [binding.label, /* @__PURE__ */ jsxs("span", {
+							className: "ml-1 text-gray-400",
+							children: [
+								"(",
+								binding.property,
+								")"
+							]
+						})]
+					}), /* @__PURE__ */ jsx(Field, {
+						binding: {
+							id: dataId,
+							label: binding.label,
+							property: binding.property,
+							type: binding.type,
+							widget: binding.widget,
+							options: binding.options,
+							render: binding.render,
+							min: binding.min,
+							max: binding.max,
+							pattern: binding.pattern,
+							required: binding.required,
+							meta: binding.meta,
+							value: structuredValue,
+							rawValue: currentValue,
+							onChange: (next) => onChange?.({
+								id: dataId,
+								label: binding.label,
+								property: binding.property,
+								value: next
+							})
+						},
+						onNodeChange: onChange
+					})]
+				}, binding.label);
+			})
+		})
+	});
+};
+//#endregion
 //#region src/components/dnd/panel/children.tsx
-const Children = ({ value, onChange, onNodeChange }) => {
+const Children$1 = ({ value, onChange, onNodeChange }) => {
 	const items = useMemo(() => Array.isArray(value) ? value : [], [value]);
 	const selection = useMultiSelect(items.length);
 	const editableChildrenMap = useMemo(() => {
@@ -984,7 +939,7 @@ const Field = ({ binding, onNodeChange }) => {
 			}
 		});
 	}
-	if (binding.property === "children" && Array.isArray(value)) return /* @__PURE__ */ jsx(Children, {
+	if (binding.property === "children" && Array.isArray(value)) return /* @__PURE__ */ jsx(Children$1, {
 		value,
 		onChange,
 		onNodeChange
@@ -1205,7 +1160,7 @@ const groupBindingsById = (bindings) => {
 	}
 	return [...groups.values()];
 };
-const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange }) => {
+const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange }) => {
 	const groups = useMemo(() => groupBindingsById(bindings), [bindings]);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
@@ -1255,6 +1210,211 @@ const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMov
 	});
 };
 //#endregion
+//#region src/components/dnd/layout.tsx
+const PaletteItems = ({ subject }) => {
+	const { palette: { items, onAdd }, isMobile } = useDndRegions(subject);
+	return /* @__PURE__ */ jsx(Space, {
+		orientation: "vertical",
+		align: "start",
+		children: items.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
+			item,
+			onAdd,
+			tapToAdd: isMobile
+		}, item.id))
+	});
+};
+const PanelFields = ({ subject }) => {
+	const { panel: { item, onDelete, onMoveUp, onMoveDown, canMoveUp, canMoveDown, bindings, onNodeChange } } = useDndRegions(subject);
+	return /* @__PURE__ */ jsx(Panel$1, {
+		item,
+		onDelete,
+		onMoveUp,
+		onMoveDown,
+		canMoveUp,
+		canMoveDown,
+		bindings,
+		onNodeChange
+	});
+};
+const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
+	className: cn("h-full overflow-y-auto bg-gray-50 p-4", className),
+	...restProps,
+	children: /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Palette>" })
+});
+const Canvas = ({ className, style, ...restProps }) => {
+	const { canvas } = useDndRegions("<Live.Dnd.Canvas>");
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative h-full w-full overflow-y-auto", className),
+		"data-frame-container": true,
+		style: {
+			isolation: "isolate",
+			contain: "layout style",
+			transform: "translateZ(0)",
+			...style
+		},
+		...restProps,
+		children: canvas
+	});
+};
+const Panel = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
+	className: cn("h-full", className),
+	...restProps,
+	children: /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Panel>" })
+});
+const Layout = ({ palette, panel }) => {
+	const { isMobile, selectedId, clearSelection, paletteOpen, setPaletteOpen } = useDndRegions("<Live.Dnd.Layout>");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		isMobile ? /* @__PURE__ */ jsx(Canvas, {}) : /* @__PURE__ */ jsxs(Splitter, {
+			withHandle: true,
+			orientation: "horizontal",
+			children: [
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "20%",
+					minSize: "15%",
+					maxSize: "35%",
+					collapsible: true,
+					children: palette ?? /* @__PURE__ */ jsx(Palette, {})
+				}),
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "60%",
+					children: /* @__PURE__ */ jsx(Canvas, {})
+				}),
+				/* @__PURE__ */ jsx(Splitter.Panel, {
+					defaultSize: "20%",
+					minSize: "15%",
+					maxSize: "35%",
+					collapsible: true,
+					children: panel ?? /* @__PURE__ */ jsx(Panel, {})
+				})
+			]
+		}),
+		/* @__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: () => setPaletteOpen(true)
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && paletteOpen,
+			onClose: () => setPaletteOpen(false),
+			direction: "bottom",
+			size: "large",
+			title: "Components",
+			children: palette ?? /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Layout>" })
+		}),
+		/* @__PURE__ */ jsx(Drawer, {
+			open: isMobile && Boolean(selectedId),
+			onClose: clearSelection,
+			direction: "bottom",
+			size: "large",
+			title: "Properties",
+			children: panel ?? /* @__PURE__ */ jsx(PanelFields, { subject: "<Live.Dnd.Layout>" })
+		})
+	] });
+};
+//#endregion
+//#region src/components/dnd/renderer.tsx
+const Renderer = ({ preview, headers, modules, frame, dynamicTailwind = false, provider }) => {
+	const module = useCompiledModule(preview, modules);
+	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind);
+	const renderProvider = (component) => {
+		return provider ? provider(component) : component;
+	};
+	if (module?.error) return /* @__PURE__ */ jsx(Error$1, {
+		message: module.error,
+		title: "Compile Error"
+	});
+	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: /* @__PURE__ */ jsx(ErrorBoundary, {
+				resetKeys: [preview],
+				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/dnd/use-section-document.ts
 const useSectionDocument = (value, onChange) => {
 	const { setCode } = usePreview();
@@ -1374,7 +1534,7 @@ const conditionalModifiers = (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 Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, children, ...restProps }) => {
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
 	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
@@ -1470,87 +1630,54 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	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 palette = {
+		items: items?.length ? items : DRAGGABLE_ITEMS,
+		onAdd: (item) => {
+			addItem(item);
+			setMobilePaletteOpen(false);
+		}
 	};
-	const renderPanelContent = () => {
-		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,
-			bindings,
-			onNodeChange: onFieldChange
-		});
+	const panel = {
+		item: selectedItem,
+		onChange,
+		onDelete,
+		onMoveUp: () => moveSection(selectedId, "up"),
+		onMoveDown: () => moveSection(selectedId, "down"),
+		canMoveUp: selectedIndex > 0,
+		canMoveDown: selectedIndex >= 0 && selectedIndex < sections.length - 1,
+		bindings,
+		onNodeChange: onFieldChange
 	};
-	const canvas = /* @__PURE__ */ jsx("div", {
-		className: "relative h-full w-full 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: isMobile ? "Tap a component to add it" : "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))
+	const canvas = /* @__PURE__ */ jsx(Fragment, { 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: isMobile ? "Tap a component to add it" : "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))
 		})
-	});
+	}) });
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
 		collisionDetection: closestCenter,
@@ -1558,65 +1685,22 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		onDragStart,
 		onDragOver,
 		onDragEnd,
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx("div", {
 			className: cn("relative flex h-full w-full", className),
 			...restProps,
-			children: [
-				isMobile ? canvas : /* @__PURE__ */ jsxs(Splitter, {
-					withHandle: true,
-					orientation: "horizontal",
-					children: [
-						/* @__PURE__ */ jsx(Splitter.Panel, {
-							defaultSize: "20%",
-							minSize: "15%",
-							maxSize: "35%",
-							collapsible: true,
-							children: /* @__PURE__ */ jsx("div", {
-								className: "h-full overflow-y-auto bg-gray-50 p-4",
-								children: renderPaletteItems(addItem)
-							})
-						}),
-						/* @__PURE__ */ jsx(Splitter.Panel, {
-							defaultSize: "60%",
-							children: canvas
-						}),
-						/* @__PURE__ */ jsx(Splitter.Panel, {
-							defaultSize: "20%",
-							minSize: "15%",
-							maxSize: "35%",
-							collapsible: true,
-							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: clearSelection,
-					direction: "bottom",
-					size: "large",
-					title: "Properties",
-					children: renderPanelContent()
-				})
-			]
+			children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
+				value: {
+					palette,
+					panel,
+					canvas,
+					isMobile,
+					selectedId,
+					clearSelection,
+					paletteOpen: mobilePaletteOpen,
+					setPaletteOpen: setMobilePaletteOpen
+				},
+				children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
+			})
 		}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
 			sections,
 			renderProps: {
@@ -1633,8 +1717,12 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 //#region src/components/dnd/index.ts
 const Dnd = Dnd$1;
 Dnd.DraggableItem = DraggableItem;
-Dnd.DefaultPanel = Panel;
+Dnd.Field = Field;
+Dnd.Palette = Palette;
+Dnd.Canvas = Canvas;
+Dnd.Panel = Panel;
+Dnd.Layout = Layout;
 //#endregion
-export { DraggableItem as a, ICON_OPTIONS as i, Panel as n, ICON_MAP as r, Dnd as t };
+export { Panel as a, ICON_OPTIONS as c, useDndPalette as d, useDndPanel as f, Palette as i, useItemsEditor as l, Canvas as n, Field as o, DraggableItem as p, Layout as r, ICON_MAP as s, Dnd as t, useDndLayout as u };
 
-//# sourceMappingURL=dnd-C1YGcp4k.js.map
+//# sourceMappingURL=dnd-Bl_oqayG.js.map