@jbpark/live-editor 4.5.0 → 4.6.0

package/dist/{dnd-DGNp20Nk.js → dnd-UoJILA75.js}

@@ -1,38 +1,48 @@
-import { S as require_lib, c as inspectDocument, h as replaceIds, m as fillIdsFrom, n as createSectionPreviewCache, r as fillSectionIds, w as __toESM, x as nanoid } from "./document-DGHTfrda.js";
-import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-h1JAgOeW.js";
+import { S as require_lib, c as inspectDocument, h as replaceIds, m as fillIdsFrom, n as createSectionPreviewCache, r as fillSectionIds, w as __toESM, x as nanoid } from "./document-CGbe6bSV.js";
+import { c as RESERVED_BINDING_PROPERTIES, o as PALETTE_SECTIONS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-DU17Tdwo.js";
 import { n as validateBindingValue } from "./validate-iLo8IONY.js";
-import { i as useLiveMessages } from "./messages-CzUPVnzH.js";
+import { i as useLiveMessages } from "./messages-CSrMI4Rm.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { A as extractNodeValue, N as parseArrayExpression, O as canLosslesslyEvaluateSource, P as parseValue, T as readNodeBindings, _ as findEditableChildren, c as updateArrayItemValue, f as updateAll, g as extract, i as moveArrayItems, j as extractObjectProperties, l as canStructurallyEditArray, m as moveSelectedIndices, n as duplicateArrayItems, o as removeArrayItems, p as getChildrenSignatures, r as moveArrayItem, s as updateArrayItemProperty, t as appendArrayItem, v as getCurrentValue, x as getStructuredValue } from "./items-DdrwGxJw.js";
+import { A as extractNodeValue, C as getStructuredValue, D as readNodeBindings, M as parseArrayExpression, N as parseValue, b as getCurrentValue, c as updateArrayItemValue, f as updateAll, g as moveSelectedIndices, h as getChildrenSignatures, i as moveArrayItems, j as extractObjectProperties, k as canLosslesslyEvaluateSource, l as canStructurallyEditArray, n as duplicateArrayItems, o as removeArrayItems, r as moveArrayItem, s as updateArrayItemProperty, t as appendArrayItem, v as extract, y as findEditableChildren } from "./items-B6OXxcLG.js";
 import { t as cn } from "./cn-CAnad2vL.js";
-import { o as preloadScripts } from "./compile-DDfk5P25.js";
-import { a as Frame, i as useStableModules, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-T9r9ExbR.js";
-import { t as Core } from "./core-CRsAGpei.js";
-import { i as generateSection, o as replaceSections, r as extractSections } from "./sections-BRH3KHYc.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-DnjGgsK6.js";
-import { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { o as preloadScripts } from "./compile-Dxas-D05.js";
+import { a as useStableModules, i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-BP1toJkW.js";
+import { i as generateSection, o as replaceSections, r as extractSections } from "./sections-BYWOBISr.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-BLB80tyw.js";
+import { t as Core } from "./core-Bgfek364.js";
+import { Children, createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, Toast, Typography } from "@jbpark/ui-kit";
 import { useDebounce, useMultiSelect, useResponsiveSize } from "@jbpark/use-hooks";
-import { createPortal } from "react-dom";
-import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, ChevronUp, Copy, Crosshair, GripVertical, LayoutGrid, Plus, Trash, X } from "lucide-react";
 import { CSS as CSS$1 } from "@dnd-kit/utilities";
-//#region src/components/dnd/droppable.tsx
+import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, ChevronUp, Copy, Crosshair, GripVertical, LayoutGrid, Plus, Trash, X } from "lucide-react";
+//#region src/components/dnd/palette/palette-drag.ts
 var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
+const PALETTE_SECTION = "palette-section";
+const paletteDragData = (section) => ({
+	type: PALETTE_SECTION,
+	section
+});
+const paletteSectionOf = (data) => {
+	const current = data?.current;
+	return current?.type === PALETTE_SECTION ? current.section : void 0;
+};
+//#endregion
+//#region src/components/dnd/canvas/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;
+	const isPaletteSectionDragging = !!paletteSectionOf(active?.data);
+	const shouldHighlight = isOver && isPaletteSectionDragging;
+	const shouldHighlightBottom = isBottomOver && isPaletteSectionDragging;
 	const messages = useLiveMessages();
 	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", {
+		children: [children, isPaletteSectionDragging && /* @__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, {
@@ -43,6 +53,308 @@ const Droppable = ({ children, className }) => {
 	});
 };
 //#endregion
+//#region src/components/dnd/canvas/inspector-highlight.tsx
+const InspectorHighlight = ({ rect }) => {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const box = ref.current;
+		const container = box?.closest("[data-frame-container]");
+		if (!box || !rect || !container) return;
+		const outer = container.getBoundingClientRect();
+		box.style.left = `${rect.left - outer.left - container.clientLeft + container.scrollLeft}px`;
+		box.style.top = `${rect.top - outer.top - container.clientTop + container.scrollTop}px`;
+		box.style.width = `${rect.width}px`;
+		box.style.height = `${rect.height}px`;
+	}, [rect]);
+	return rect ? /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": true,
+		"data-dnd-inspector-highlight": true,
+		style: {
+			position: "absolute",
+			pointerEvents: "none",
+			outline: "2px solid #3b82f6",
+			outlineOffset: -1,
+			background: "rgba(59, 130, 246, 0.12)",
+			zIndex: 65
+		}
+	}) : null;
+};
+//#endregion
+//#region src/components/dnd/palette/draggable.tsx
+const DraggableItem = ({ item, children }) => {
+	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+		id: item.id,
+		data: paletteDragData(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 focus-visible:ring-2 focus-visible:ring-blue-500", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
+		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
+		onKeyDown: (event) => {
+			dragProps.onKeyDown?.(event);
+			if (onAdd && event.key === "Enter" && event.target === event.currentTarget && !event.defaultPrevented) {
+				event.preventDefault();
+				onAdd(item);
+			}
+		},
+		children: item.name
+	})
+});
+//#endregion
+//#region src/components/dnd/canvas/section-fallback-context.ts
+const SectionFallbackContext = createContext(void 0);
+//#endregion
+//#region src/components/dnd/canvas/section-fallback.tsx
+const ConsumerFallback = ({ render, args, builtin }) => {
+	const node = render(args);
+	return node === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: node });
+};
+const SectionFallback = ({ args, builtin }) => {
+	const render = useContext(SectionFallbackContext);
+	if (!render) return builtin;
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: () => builtin,
+		children: /* @__PURE__ */ jsx(ConsumerFallback, {
+			render,
+			args,
+			builtin
+		})
+	});
+};
+//#endregion
+//#region src/components/dnd/canvas/renderer.tsx
+const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, headers, modules, frame, dynamicTailwind = false, provider }) => {
+	const module = useCompiledModule(forceFallback ? "" : preview, modules);
+	const section = {
+		id: sectionId,
+		name: sectionName,
+		code: sectionCode
+	};
+	const messages = useLiveMessages();
+	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind && !forceFallback);
+	const renderProvider = (component) => {
+		return provider ? provider(component) : component;
+	};
+	if (forceFallback) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "forced"
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: messages.errors.sectionNotRendered,
+			title: messages.errors.sectionUnavailable
+		})
+	});
+	if (module?.error) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "compile",
+			message: module.error
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: module.error,
+			title: messages.errors.compile
+		})
+	});
+	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],
+				fallback: (message, reset) => /* @__PURE__ */ jsx(SectionFallback, {
+					args: {
+						section,
+						reason: "runtime",
+						message
+					},
+					builtin: /* @__PURE__ */ jsx(Error$1, {
+						message,
+						onReset: reset,
+						title: messages.errors.rendering
+					})
+				}),
+				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+					headers,
+					container
+				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
+			})
+		})
+	});
+};
+const sameValue = (a, b) => {
+	if (Object.is(a, b)) return true;
+	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((item, i) => Object.is(item, b[i]));
+	if (a && b && typeof a === "object" && typeof b === "object" && Object.getPrototypeOf(a) === Object.prototype && Object.getPrototypeOf(b) === Object.prototype) {
+		const aKeys = Object.keys(a);
+		return aKeys.length === Object.keys(b).length && aKeys.every((key) => Object.is(a[key], b[key]));
+	}
+	return false;
+};
+const sameFrame = (a, b) => {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => sameValue(a[key], b[key]));
+};
+const arePropsEqual = (prev, next) => {
+	return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => key === "frame" ? sameFrame(prev.frame, next.frame) : Object.is(prev[key], next[key]));
+};
+var renderer_default = memo(Renderer, arePropsEqual);
+//#endregion
+//#region src/components/dnd/canvas/sortable.tsx
+const NAVIGATION_KEYS = {
+	ArrowUp: "previous",
+	ArrowDown: "next",
+	Home: "first",
+	End: "last"
+};
+const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, nodeRef, onNavigate, onDeleteKey, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({
+		id,
+		disabled: inspecting
+	});
+	const messages = useLiveMessages();
+	const style = {
+		transform: CSS$1.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .5 : 1,
+		cursor: inspecting ? "crosshair" : "grab"
+	};
+	const isPaletteSectionOver = isOver && !!paletteSectionOf(active?.data);
+	const onKeyDown = (e) => {
+		listeners?.onKeyDown?.(e);
+		if (e.target !== e.currentTarget || active || e.defaultPrevented) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onClick?.();
+			return;
+		}
+		const to = NAVIGATION_KEYS[e.key];
+		if (to && onNavigate) {
+			e.preventDefault();
+			onNavigate(to);
+			return;
+		}
+		if ((e.key === "Delete" || e.key === "Backspace") && onDeleteKey) {
+			e.preventDefault();
+			onDeleteKey();
+		}
+	};
+	const setRefs = (node) => {
+		setNodeRef(node);
+		setActivatorNodeRef(node);
+		nodeRef?.(node);
+	};
+	const onDelete = (e) => {
+		e.stopPropagation();
+		_onDelete?.(id);
+	};
+	const onCopy = (e) => {
+		e.stopPropagation();
+		_onCopy?.(id);
+	};
+	const press = (action) => (e) => {
+		e.stopPropagation();
+		action?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setRefs,
+		style,
+		...attributes,
+		...listeners,
+		onKeyDown,
+		onClick,
+		className: cn("relative", selected && "z-10 outline-2 outline-offset-2 outline-blue-500", isPaletteSectionOver && "border-t-4 border-t-green-500"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("absolute inset-0 z-50"),
+				onPointerMove: inspecting ? (e) => onInspectMove?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY) : void 0,
+				onPointerLeave: inspecting ? onInspectLeave : void 0,
+				onClick: inspecting ? (e) => {
+					e.stopPropagation();
+					onInspectPick?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY);
+				} : void 0
+			}),
+			children,
+			selected && /* @__PURE__ */ jsxs(Space, {
+				className: cn("absolute top-1 right-1 z-60"),
+				children: [
+					onMoveUp && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+						disabled: !canMoveUp,
+						onClick: press(onMoveUp),
+						"aria-label": messages.section.moveUp
+					}),
+					onMoveDown && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+						disabled: !canMoveDown,
+						onClick: press(onMoveDown),
+						"aria-label": messages.section.moveDown
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(Copy, {}),
+						onClick: onCopy,
+						"aria-label": messages.section.duplicate
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(Trash, {}),
+						onClick: onDelete,
+						"aria-label": messages.section.delete
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/dnd/canvas/overlay.tsx
+const Overlay = ({ sections, isForced, renderProps }) => {
+	const { active } = useDndContext();
+	if (!active) return null;
+	const paletteSection = paletteSectionOf(active.data);
+	if (paletteSection) return /* @__PURE__ */ jsx(DefaultDraggableItem, { item: paletteSection });
+	const section = sections.find((s) => s.id === active.id);
+	if (section) {
+		const preview = generateSection(section.code, renderProps.fullCode, { containerId: renderProps.containerId });
+		return /* @__PURE__ */ jsx(Sortable, {
+			id: section.id,
+			name: section.name,
+			children: /* @__PURE__ */ jsx(renderer_default, {
+				preview,
+				sectionId: section.id,
+				sectionName: section.name,
+				sectionCode: section.code,
+				forceFallback: isForced?.(section) ?? false,
+				modules: renderProps.modules,
+				frame: renderProps.frame,
+				dynamicTailwind: renderProps.dynamicTailwind
+			})
+		});
+	}
+	return null;
+};
+//#endregion
 //#region src/components/dnd/edit-options.ts
 const toastEditError = (error) => {
 	Toast.error(error.title, error.description ? { description: error.description } : void 0);
@@ -94,72 +406,16 @@ const findElementById = (section, id) => {
 const viewportRect = (element) => {
 	const rect = element.getBoundingClientRect();
 	let x = rect.left;
-	let y = rect.top;
-	let frame = element.ownerDocument.defaultView?.frameElement ?? null;
-	while (frame) {
-		const frameRect = frame.getBoundingClientRect();
-		x += frameRect.left;
-		y += frameRect.top;
-		frame = frame.ownerDocument.defaultView?.frameElement ?? null;
-	}
-	return new DOMRect(x, y, rect.width, rect.height);
-};
-//#endregion
-//#region src/components/dnd/inspector-highlight.tsx
-const InspectorHighlight = ({ rect }) => rect ? createPortal(/* @__PURE__ */ jsx("div", {
-	"aria-hidden": true,
-	"data-dnd-inspector-highlight": true,
-	style: {
-		position: "fixed",
-		left: rect.left,
-		top: rect.top,
-		width: rect.width,
-		height: rect.height,
-		pointerEvents: "none",
-		outline: "2px solid #3b82f6",
-		outlineOffset: -1,
-		background: "rgba(59, 130, 246, 0.12)",
-		zIndex: 2147483647
-	}
-}), document.body) : null;
-//#endregion
-//#region src/components/dnd/draggable.tsx
-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 focus-visible:ring-2 focus-visible:ring-blue-500", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
-		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
-		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
-		onKeyDown: (event) => {
-			dragProps.onKeyDown?.(event);
-			if (onAdd && event.key === "Enter" && event.target === event.currentTarget && !event.defaultPrevented) {
-				event.preventDefault();
-				onAdd(item);
-			}
-		},
-		children: item.name
-	})
-});
+	let y = rect.top;
+	let frame = element.ownerDocument.defaultView?.frameElement ?? null;
+	while (frame) {
+		const frameRect = frame.getBoundingClientRect();
+		x += frameRect.left;
+		y += frameRect.top;
+		frame = frame.ownerDocument.defaultView?.frameElement ?? null;
+	}
+	return new DOMRect(x, y, rect.width, rect.height);
+};
 //#endregion
 //#region src/components/dnd/layout-context.ts
 const DndRegionContext = createContext(null);
@@ -1733,248 +1989,7 @@ const Layout = ({ palette, panel }) => {
 	] });
 };
 //#endregion
-//#region src/components/dnd/section-fallback-context.ts
-const SectionFallbackContext = createContext(void 0);
-//#endregion
-//#region src/components/dnd/section-fallback.tsx
-const ConsumerFallback = ({ render, args, builtin }) => {
-	const node = render(args);
-	return node === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: node });
-};
-const SectionFallback = ({ args, builtin }) => {
-	const render = useContext(SectionFallbackContext);
-	if (!render) return builtin;
-	return /* @__PURE__ */ jsx(ErrorBoundary, {
-		fallback: () => builtin,
-		children: /* @__PURE__ */ jsx(ConsumerFallback, {
-			render,
-			args,
-			builtin
-		})
-	});
-};
-//#endregion
-//#region src/components/dnd/renderer.tsx
-const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, headers, modules, frame, dynamicTailwind = false, provider }) => {
-	const module = useCompiledModule(forceFallback ? "" : preview, modules);
-	const section = {
-		id: sectionId,
-		name: sectionName,
-		code: sectionCode
-	};
-	const messages = useLiveMessages();
-	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind && !forceFallback);
-	const renderProvider = (component) => {
-		return provider ? provider(component) : component;
-	};
-	if (forceFallback) return /* @__PURE__ */ jsx(SectionFallback, {
-		args: {
-			section,
-			reason: "forced"
-		},
-		builtin: /* @__PURE__ */ jsx(Error$1, {
-			message: messages.errors.sectionNotRendered,
-			title: messages.errors.sectionUnavailable
-		})
-	});
-	if (module?.error) return /* @__PURE__ */ jsx(SectionFallback, {
-		args: {
-			section,
-			reason: "compile",
-			message: module.error
-		},
-		builtin: /* @__PURE__ */ jsx(Error$1, {
-			message: module.error,
-			title: messages.errors.compile
-		})
-	});
-	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],
-				fallback: (message, reset) => /* @__PURE__ */ jsx(SectionFallback, {
-					args: {
-						section,
-						reason: "runtime",
-						message
-					},
-					builtin: /* @__PURE__ */ jsx(Error$1, {
-						message,
-						onReset: reset,
-						title: messages.errors.rendering
-					})
-				}),
-				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
-					headers,
-					container
-				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
-			})
-		})
-	});
-};
-const sameValue = (a, b) => {
-	if (Object.is(a, b)) return true;
-	if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((item, i) => Object.is(item, b[i]));
-	if (a && b && typeof a === "object" && typeof b === "object" && Object.getPrototypeOf(a) === Object.prototype && Object.getPrototypeOf(b) === Object.prototype) {
-		const aKeys = Object.keys(a);
-		return aKeys.length === Object.keys(b).length && aKeys.every((key) => Object.is(a[key], b[key]));
-	}
-	return false;
-};
-const sameFrame = (a, b) => {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => sameValue(a[key], b[key]));
-};
-const arePropsEqual = (prev, next) => {
-	return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => key === "frame" ? sameFrame(prev.frame, next.frame) : Object.is(prev[key], next[key]));
-};
-var renderer_default = memo(Renderer, arePropsEqual);
-//#endregion
-//#region src/components/dnd/sortable.tsx
-const NAVIGATION_KEYS = {
-	ArrowUp: "previous",
-	ArrowDown: "next",
-	Home: "first",
-	End: "last"
-};
-const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, nodeRef, onNavigate, onDeleteKey, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
-	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({
-		id,
-		disabled: inspecting
-	});
-	const messages = useLiveMessages();
-	const style = {
-		transform: CSS$1.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? .5 : 1,
-		cursor: inspecting ? "crosshair" : "grab"
-	};
-	const isNewItemOver = isOver && active?.data.current?.type === "new-item";
-	const onKeyDown = (e) => {
-		listeners?.onKeyDown?.(e);
-		if (e.target !== e.currentTarget || active || e.defaultPrevented) return;
-		if (e.key === "Enter") {
-			e.preventDefault();
-			onClick?.();
-			return;
-		}
-		const to = NAVIGATION_KEYS[e.key];
-		if (to && onNavigate) {
-			e.preventDefault();
-			onNavigate(to);
-			return;
-		}
-		if ((e.key === "Delete" || e.key === "Backspace") && onDeleteKey) {
-			e.preventDefault();
-			onDeleteKey();
-		}
-	};
-	const setRefs = (node) => {
-		setNodeRef(node);
-		setActivatorNodeRef(node);
-		nodeRef?.(node);
-	};
-	const onDelete = (e) => {
-		e.stopPropagation();
-		_onDelete?.(id);
-	};
-	const onCopy = (e) => {
-		e.stopPropagation();
-		_onCopy?.(id);
-	};
-	const press = (action) => (e) => {
-		e.stopPropagation();
-		action?.();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		ref: setRefs,
-		style,
-		...attributes,
-		...listeners,
-		onKeyDown,
-		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"),
-				onPointerMove: inspecting ? (e) => onInspectMove?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY) : void 0,
-				onPointerLeave: inspecting ? onInspectLeave : void 0,
-				onClick: inspecting ? (e) => {
-					e.stopPropagation();
-					onInspectPick?.(e.currentTarget.parentElement, e.currentTarget, e.clientX, e.clientY);
-				} : void 0
-			}),
-			children,
-			selected && /* @__PURE__ */ jsxs(Space, {
-				className: cn("absolute top-1 right-1 z-60"),
-				children: [
-					onMoveUp && /* @__PURE__ */ jsx(Button, {
-						icon: /* @__PURE__ */ jsx(ChevronUp, {}),
-						disabled: !canMoveUp,
-						onClick: press(onMoveUp),
-						"aria-label": messages.section.moveUp
-					}),
-					onMoveDown && /* @__PURE__ */ jsx(Button, {
-						icon: /* @__PURE__ */ jsx(ChevronDown, {}),
-						disabled: !canMoveDown,
-						onClick: press(onMoveDown),
-						"aria-label": messages.section.moveDown
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						icon: /* @__PURE__ */ jsx(Copy, {}),
-						onClick: onCopy,
-						"aria-label": messages.section.duplicate
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						danger: true,
-						icon: /* @__PURE__ */ jsx(Trash, {}),
-						onClick: onDelete,
-						"aria-label": messages.section.delete
-					})
-				]
-			})
-		]
-	});
-};
-//#endregion
-//#region src/components/dnd/overlay.tsx
-const Overlay = ({ sections, isForced, 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, { containerId: renderProps.containerId });
-		return /* @__PURE__ */ jsx(Sortable, {
-			id: section.id,
-			name: section.name,
-			children: /* @__PURE__ */ jsx(renderer_default, {
-				preview,
-				sectionId: section.id,
-				sectionName: section.name,
-				sectionCode: section.code,
-				forceFallback: isForced?.(section) ?? false,
-				modules: renderProps.modules,
-				frame: renderProps.frame,
-				dynamicTailwind: renderProps.dynamicTailwind
-			})
-		});
-	}
-	return null;
-};
-//#endregion
-//#region src/components/dnd/use-delete-flow.ts
+//#region src/components/dnd/state/use-delete-flow.ts
 const useDeleteFlow = ({ sections, remove, onBeforeDelete }) => {
 	const removeRef = useRef(remove);
 	useEffect(() => {
@@ -2008,7 +2023,7 @@ const useDeleteFlow = ({ sections, remove, onBeforeDelete }) => {
 	};
 };
 //#endregion
-//#region src/components/dnd/use-dnd-keyboard.ts
+//#region src/components/dnd/state/use-dnd-keyboard.ts
 const KEYBOARD_CODES = {
 	start: ["Space"],
 	cancel: ["Escape"],
@@ -2042,7 +2057,7 @@ const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move,
 		keyboardCodes: KEYBOARD_CODES
 	}));
 	const nameOf = (id, data) => {
-		return (data?.current)?.item?.name ?? sections.find((section) => section.id === id)?.name ?? say.section;
+		return paletteSectionOf(data)?.name ?? sections.find((section) => section.id === id)?.name ?? say.section;
 	};
 	const positionOf = (id) => sections.findIndex((section) => section.id === id) + 1;
 	const announcements = {
@@ -2095,7 +2110,7 @@ const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move,
 	};
 };
 //#endregion
-//#region src/components/dnd/use-inspector-state.ts
+//#region src/components/dnd/state/use-inspector-state.ts
 const useInspectorState = ({ selectedId, selectOnly, sectionNodes, onNodePick }) => {
 	const [inspecting, setInspecting] = useState(false);
 	const [picked, setPicked] = useState(null);
@@ -2173,7 +2188,7 @@ const useInspectorState = ({ selectedId, selectOnly, sectionNodes, onNodePick })
 	};
 };
 //#endregion
-//#region src/components/dnd/use-section-document.ts
+//#region src/components/dnd/state/use-section-document.ts
 const createLastParsed = () => {
 	let last = null;
 	return {
@@ -2226,7 +2241,7 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 		view.document
 	]);
 	const selectedIndex = sections.findIndex((s) => s.id === selectedId);
-	const selectedItem = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
+	const selectedSection = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
 	const pendingRef = useRef(null);
 	useEffect(() => {
 		pendingRef.current = null;
@@ -2272,17 +2287,17 @@ const useSectionDocument = (value, onChange, { containerId, sectionNameFallback,
 		sections,
 		previews,
 		selectedId,
-		selectedItem,
+		selectedSection,
 		selectedIndex,
 		select: useCallback((id) => {
 			setSelectedId((prev) => prev === id ? null : id);
 		}, []),
 		selectOnly: useCallback((id) => setSelectedId(id), []),
 		clearSelection: useCallback(() => setSelectedId(null), []),
-		add: useCallback((item, atIndex) => {
+		add: useCallback((section, atIndex) => {
 			if (refuse()) return;
 			const current = latestSections();
-			const next = { code: item.code };
+			const next = { code: section.code };
 			commit(atIndex === void 0 || atIndex < 0 ? [...current, next] : [
 				...current.slice(0, atIndex),
 				next,
@@ -2403,6 +2418,10 @@ const describeUpdateFailure = (failure, label, { editErrors: m }) => {
 			title: m.updateFailed(label),
 			description: m.elementNotFound
 		};
+		case "self-closing": return {
+			title: m.cannotEdit(label),
+			description: m.selfClosing(failure.property)
+		};
 		case "unsupported-syntax": return {
 			title: m.cannotEdit(label),
 			description: m.unsupportedSyntax(failure.property)
@@ -2424,7 +2443,7 @@ const blockedEditError = (error, { editErrors: m }) => ({
 });
 const conditionalModifiers = (args) => {
 	const { active } = args;
-	if (active?.data.current?.type === "new-item") return args.transform;
+	if (paletteSectionOf(active?.data)) return args.transform;
 	return restrictToVerticalAxis(args);
 };
 const NO_MODULES = {};
@@ -2454,7 +2473,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 	const onBlockedEdit = useCallback((problem) => {
 		if (problem.reason === "parse-error") reportErrorRef.current(blockedEditError(problem.error, messagesRef.current));
 	}, []);
-	const { sections, previews, selectedId, selectedItem, selectedIndex, select, selectOnly, clearSelection, add: addItem, remove, copy: onCopy, move: moveSection, reorder, patch, getCommittedSection, problem, stale } = useSectionDocument(value, _onChange, {
+	const { sections, previews, selectedId, selectedSection, selectedIndex, select, selectOnly, clearSelection, add: addSection, remove, copy: onCopy, move: moveSection, reorder, patch, getCommittedSection, problem, stale } = useSectionDocument(value, _onChange, {
 		containerId,
 		sectionNameFallback,
 		onBlockedEdit
@@ -2463,10 +2482,10 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 	const onDragEnd = (event) => {
 		const { active, over } = event;
 		if (!over) return;
-		if (active.data.current?.type === "new-item") {
-			const item = active.data.current.item;
+		const section = paletteSectionOf(active.data);
+		if (section) {
 			const atBottom = over.id === "sortable-area" || over.id === "sortable-area-bottom";
-			addItem(item, atBottom ? void 0 : sections.findIndex((s) => s.id === over.id));
+			addSection(section, atBottom ? void 0 : sections.findIndex((s) => s.id === over.id));
 			return;
 		}
 		if (active.id !== over.id && sections.some((s) => s.id === active.id)) reorder(String(active.id), String(over.id));
@@ -2500,8 +2519,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		bindings: bindingRegistry,
 		bindingKeys
 	}), [bindingRegistry, bindingKeys]);
-	const selectedCode = selectedItem?.code;
-	const selectedSectionId = selectedItem?.id;
+	const selectedCode = selectedSection?.code;
+	const selectedSectionId = selectedSection?.id;
 	const { fields, updatedCode, parseError } = useMemo(() => {
 		if (!selectedCode) return {
 			fields: [],
@@ -2553,7 +2572,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			reportError(blockedEditError(problem.error, messages));
 			return;
 		}
-		const committed = selectedItem && getCommittedSection(selectedItem.id)?.code;
+		const committed = selectedSection && getCommittedSection(selectedSection.id)?.code;
 		const result = updateAll(committed && committed !== selectedCode ? committed : updatedCode, changes.map(({ id, label, property, value: changeValue }) => ({
 			dataId: id,
 			label,
@@ -2572,8 +2591,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			});
 			return;
 		}
-		if (selectedItem) onChange({
-			...selectedItem,
+		if (selectedSection) onChange({
+			...selectedSection,
 			code: result.code
 		});
 	};
@@ -2584,14 +2603,14 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
 	const palette = {
-		items: items?.length ? items : DRAGGABLE_ITEMS,
-		onAdd: (item) => {
-			addItem(item);
+		items: items?.length ? items : PALETTE_SECTIONS,
+		onAdd: (section) => {
+			addSection(section);
 			setMobilePaletteOpen(false);
 		}
 	};
 	const panel = {
-		item: selectedItem,
+		item: selectedSection,
 		onChange,
 		onDelete,
 		onMoveUp: () => moveSection(selectedId, "up"),
@@ -2604,63 +2623,67 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		readOnly: stale,
 		bindingOptions
 	};
-	const canvas = /* @__PURE__ */ jsxs(Fragment, { children: [stale && /* @__PURE__ */ jsx("div", {
-		role: "status",
-		className: cn("sticky top-0 z-70", "border-b border-amber-200 bg-amber-50 px-3 py-2", "text-sm text-amber-900"),
-		children: messages.canvas.stale
-	}), /* @__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: problem?.reason === "parse-error" ? /* @__PURE__ */ jsxs(Space, {
-				orientation: "vertical",
-				align: "center",
-				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.syntaxError }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.syntaxErrorDetail })]
-			}) : missingContainer !== null ? /* @__PURE__ */ jsxs(Space, {
-				orientation: "vertical",
-				align: "center",
-				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.missingContainer(missingContainer) }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.missingContainerDetail(missingContainer) })]
-			}) : /* @__PURE__ */ jsxs(Space, {
-				orientation: "vertical",
-				align: "center",
-				children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.empty }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? messages.canvas.emptyHintTouch : messages.canvas.emptyHintDrag })]
-			})
-		}) : /* @__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,
-				onMoveUp: () => onMoveButton(section.id, "up"),
-				onMoveDown: () => onMoveButton(section.id, "down"),
-				canMoveUp: index > 0,
-				canMoveDown: index < sections.length - 1,
-				nodeRef: sectionNodes.register(section.id),
-				onNavigate: (to) => onNavigate(section.id, to),
-				onDeleteKey: () => onDeleteKey(section.id),
-				inspecting,
-				onInspectMove,
-				onInspectPick: (...args) => onInspectPick(section.id, ...args),
-				onInspectLeave,
-				children: /* @__PURE__ */ jsx(renderer_default, {
-					preview: previews[index],
-					sectionId: section.id,
-					sectionName: section.name,
-					sectionCode: section.code,
-					forceFallback: isForced(section),
-					modules,
-					frame,
-					dynamicTailwind,
-					provider,
-					...props
+	const canvas = /* @__PURE__ */ jsxs(Fragment, { children: [
+		stale && /* @__PURE__ */ jsx("div", {
+			role: "status",
+			className: cn("sticky top-0 z-70", "border-b border-amber-200 bg-amber-50 px-3 py-2", "text-sm text-amber-900"),
+			children: messages.canvas.stale
+		}),
+		/* @__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: problem?.reason === "parse-error" ? /* @__PURE__ */ jsxs(Space, {
+					orientation: "vertical",
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.syntaxError }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.syntaxErrorDetail })]
+				}) : missingContainer !== null ? /* @__PURE__ */ jsxs(Space, {
+					orientation: "vertical",
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.missingContainer(missingContainer) }), /* @__PURE__ */ jsx(Typography.Text, { children: messages.canvas.missingContainerDetail(missingContainer) })]
+				}) : /* @__PURE__ */ jsxs(Space, {
+					orientation: "vertical",
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: messages.canvas.empty }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? messages.canvas.emptyHintTouch : messages.canvas.emptyHintDrag })]
 				})
-			}, section.id))
-		})
-	})] });
+			}) : /* @__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,
+					onMoveUp: () => onMoveButton(section.id, "up"),
+					onMoveDown: () => onMoveButton(section.id, "down"),
+					canMoveUp: index > 0,
+					canMoveDown: index < sections.length - 1,
+					nodeRef: sectionNodes.register(section.id),
+					onNavigate: (to) => onNavigate(section.id, to),
+					onDeleteKey: () => onDeleteKey(section.id),
+					inspecting,
+					onInspectMove,
+					onInspectPick: (...args) => onInspectPick(section.id, ...args),
+					onInspectLeave,
+					children: /* @__PURE__ */ jsx(renderer_default, {
+						preview: previews[index],
+						sectionId: section.id,
+						sectionName: section.name,
+						sectionCode: section.code,
+						forceFallback: isForced(section),
+						modules,
+						frame,
+						dynamicTailwind,
+						provider,
+						...props
+					})
+				}, section.id))
+			})
+		}),
+		/* @__PURE__ */ jsx(InspectorHighlight, { rect: highlightRect })
+	] });
 	return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
 		value: renderSectionFallback,
 		children: /* @__PURE__ */ jsxs(DndContext, {
@@ -2675,13 +2698,13 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cn("relative flex h-full w-full", className),
 				...restProps,
-				children: /* @__PURE__ */ jsxs(DndEditOptionsContext.Provider, {
+				children: /* @__PURE__ */ jsx(DndEditOptionsContext.Provider, {
 					value: {
 						renderField,
 						reportError,
 						bindingOptions
 					},
-					children: [/* @__PURE__ */ jsx(DndRegionContext.Provider, {
+					children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
 						value: {
 							palette,
 							panel,
@@ -2697,7 +2720,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 							value: inspector,
 							children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
 						})
-					}), /* @__PURE__ */ jsx(InspectorHighlight, { rect: highlightRect })]
+					})
 				})
 			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
 				sections,
@@ -2728,6 +2751,6 @@ const useItemsEditor = useDndItems;
 /** @deprecated Renamed to `useDndChildren`. */
 const useChildrenEditor = useDndChildren;
 //#endregion
-export { useDndPanel as _, Layout as a, Field as c, isStructuralFieldKind as d, useDndChildren as f, useDndPalette as g, useDndLayout as h, Canvas as i, useDndItems as l, withPanelCommit as m, useChildrenEditor as n, Palette as o, resolvePanelBindings as p, useItemsEditor as r, Panel as s, Dnd as t, getFieldKind as u, DraggableItem as v, useDndInspector as y };
+export { useDndPanel as _, Layout as a, Field as c, isStructuralFieldKind as d, useDndChildren as f, useDndPalette as g, useDndLayout as h, Canvas as i, useDndItems as l, withPanelCommit as m, useChildrenEditor as n, Palette as o, resolvePanelBindings as p, useItemsEditor as r, Panel as s, Dnd as t, getFieldKind as u, useDndInspector as v, DraggableItem as y };
 
-//# sourceMappingURL=dnd-DGNp20Nk.js.map
+//# sourceMappingURL=dnd-UoJILA75.js.map