@jbpark/live-editor 2.2.0 → 3.0.1

package/dist/{dnd-DRivgZdt.js → dnd-CZJjzuTC.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-D6R-dsk0.js";
+import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-C0Onss1A.js";
+import { t as Core } from "./core-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,129 +67,18 @@ 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"
-			})
-		})]
-	});
-};
-//#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"
-	});
-	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;
+//#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/panel/use-items-editor.ts
-var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
 const resolveLeaf = (render, key) => {
 	const leaf = render?.[key];
 	return leaf && "type" in leaf ? leaf : null;
@@ -694,7 +605,7 @@ const Node = ({ data, onChange }) => {
 };
 //#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(() => {
@@ -1028,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
@@ -1249,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"),
@@ -1299,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();
@@ -1418,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";
@@ -1514,88 +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,
-			onNodeChange: onFieldChange
-		});
-		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,
@@ -1603,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: {
@@ -1678,9 +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 { ICON_OPTIONS as a, ICON_MAP as i, Panel as n, useItemsEditor as o, Field as r, DraggableItem as s, 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-DRivgZdt.js.map
+//# sourceMappingURL=dnd-CZJjzuTC.js.map