@jbpark/live-editor 4.2.0 → 4.3.1

package/dist/{dnd-DBaH2L8N.js → dnd-x8Mvj--6.js}

@@ -1,22 +1,23 @@
-import { _ as __toESM, c as inspectDocument, h as require_lib, n as createSectionPreviewCache, p as nanoid, r as fillSectionIds } from "./document-C3eCRQlj.js";
-import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, t as BINDING_PROP } from "./constants-CKvdqZtO.js";
+import { S as require_lib, _ as nanoid, c as inspectDocument, h as replaceIds, m as fillIdsFrom, n as createSectionPreviewCache, r as fillSectionIds, w as __toESM } from "./document-C-hGKMkk.js";
+import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-CKvdqZtO.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { A as extractObjectProperties, C as getStructuredValue, D as canLosslesslyEvaluateSource, M as parseArrayExpression, N as parseValue, S as getCurrentValue, _ as updateArrayItemProperty, b as moveSelectedIndices, c as getChildrenSignatures, d as appendArrayItem, f as duplicateArrayItems, g as removeArrayItems, i as replaceIds, k as extractNodeValue, m as moveArrayItems, p as moveArrayItem, r as fillIds, s as updateAll, t as validateBindingValue, u as extract, v as updateArrayItemValue, w as parseBinding, x as findEditableChildren, y as canStructurallyEditArray } from "./ast-CMD20ykx.js";
+import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, _ as moveSelectedIndices, a as getChildrenSignatures, b as getStructuredValue, c as appendArrayItem, d as moveArrayItems, g as canStructurallyEditArray, h as updateArrayItemValue, i as updateAll, k as parseArrayExpression, l as duplicateArrayItems, m as updateArrayItemProperty, p as removeArrayItems, s as extract, t as validateBindingValue, u as moveArrayItem, v as findEditableChildren, w as canLosslesslyEvaluateSource, x as parseBinding, y as getCurrentValue } from "./ast-CehbCXwh.js";
 import { t as cn } from "./cn-CAnad2vL.js";
 import { o as preloadScripts } from "./compile-0Dvp8zp5.js";
-import { a as Frame, i as useStableModules, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-BDfytfYC.js";
+import { a as Frame, i as useStableModules, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-QKcGvUJs.js";
 import { t as Core } from "./core-B3ruccKb.js";
-import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-A4TAXUP8.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-D2IFja-3.js";
+import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-Ce63wbtG.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-B17cepvm.js";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+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 { ArrowDown, ArrowUp, ChevronDown, ChevronUp, Copy, LayoutGrid, Plus, Trash, X } from "lucide-react";
-import { CSS } from "@dnd-kit/utilities";
+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
 var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
 const Droppable = ({ children, className }) => {
@@ -46,6 +47,64 @@ const toastEditError = (error) => {
 const DndEditOptionsContext = createContext({ reportError: toastEditError });
 const useDndEditOptions = () => useContext(DndEditOptionsContext);
 //#endregion
+//#region src/components/dnd/inspector.ts
+const DndInspectorContext = createContext(null);
+const useDndInspector = () => {
+	const inspector = useContext(DndInspectorContext);
+	if (!inspector) throw new Error("useDndInspector() must be used inside <Live.Dnd>.");
+	return inspector;
+};
+const outside = (root) => (element) => element.getRootNode() !== root;
+const deepestAt = (root, x, y, skip) => {
+	const element = root.elementsFromPoint(x, y).find((candidate) => !skip(candidate));
+	if (!element) return null;
+	if (element instanceof HTMLIFrameElement) {
+		const document = element.contentDocument;
+		if (!document) return element;
+		const rect = element.getBoundingClientRect();
+		return deepestAt(document, x - rect.left, y - rect.top, outside(document)) ?? element;
+	}
+	if (element.shadowRoot && element.shadowRoot !== root) return deepestAt(element.shadowRoot, x, y, outside(element.shadowRoot)) ?? element;
+	return element;
+};
+const hasId = (element) => Boolean(element.getAttribute(DATA_ATTR.ID));
+const pickElement = (section, overlay, x, y) => {
+	let element = deepestAt(section.ownerDocument, x, y, (candidate) => candidate === overlay || candidate === section || !section.contains(candidate));
+	while (element && element !== section && !hasId(element)) element = element.parentElement ?? element.parentNode?.host ?? null;
+	return element === section ? null : element;
+};
+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({
@@ -436,7 +495,8 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 						}), editableChildrenMap.get(itemIndex).map((editableNode, idx) => {
 							const nodeId = editableNode.dataAttributes.find((a) => a.name === "data-id")?.value;
 							return /* @__PURE__ */ jsxs("div", {
-								className: "rounded border border-green-100 bg-white p-2",
+								"data-node-id": nodeId,
+								className: "rounded border border-green-100 bg-white p-2\n                      data-[picked]:ring-2 data-[picked]:ring-blue-400",
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "mb-1 text-xs text-green-600",
 									children: editableNode.tagName
@@ -487,6 +547,84 @@ const getFieldKind = (binding) => {
 };
 const isStructuralFieldKind = (kind) => kind === "items" || kind === "children";
 //#endregion
+//#region src/components/dnd/panel/sortable-items.tsx
+const label = (items, id) => {
+	const index = items.findIndex((item) => item.id === id);
+	return index >= 0 ? `Item ${index + 1}` : "Item";
+};
+const SortableItems = ({ items, disabled, onMove, children }) => {
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const onDragEnd = ({ active, over }) => {
+		const from = items.find((item) => item.id === active.id);
+		const to = items.find((item) => item.id === over?.id);
+		if (from && to && from !== to) onMove(from, to.index);
+	};
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		modifiers: [restrictToVerticalAxis, restrictToParentElement],
+		accessibility: { announcements: {
+			onDragStart: ({ active }) => `Picked up ${label(items, active.id)}.`,
+			onDragOver: ({ active, over }) => over ? `${label(items, active.id)} is over ${label(items, over.id)}.` : void 0,
+			onDragEnd: ({ active, over }) => over ? `${label(items, active.id)} was moved to the place of ${label(items, over.id)}.` : `${label(items, active.id)} was dropped.`,
+			onDragCancel: ({ active }) => `Moving ${label(items, active.id)} was cancelled.`
+		} },
+		onDragEnd,
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: items.map((item) => item.id),
+			strategy: verticalListSortingStrategy,
+			disabled,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: items.map(children)
+			})
+		})
+	});
+};
+const ItemCard = ({ id, title, disabled, expanded, onToggle, checkbox, controls, className, children }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id,
+		disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS$1.Translate.toString(transform),
+			transition
+		},
+		className: cn(className, isDragging && "relative z-10 shadow-md"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center space-x-1",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						ref: setActivatorNodeRef,
+						...attributes,
+						...listeners,
+						"aria-label": `Reorder ${title}`,
+						disabled,
+						className: "cursor-grab rounded p-0.5 text-gray-400\n              hover:text-gray-700 disabled:cursor-not-allowed\n              disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
+					}),
+					checkbox,
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"aria-expanded": expanded,
+						onClick: onToggle,
+						className: "inline-flex items-center space-x-1 rounded px-1 text-xs\n              font-medium",
+						children: [expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 }), /* @__PURE__ */ jsx("span", { children: title })]
+					})
+				]
+			}), controls]
+		}), expanded && children]
+	});
+};
+//#endregion
 //#region src/components/dnd/panel/use-dnd-items.ts
 const createPendingCommit = () => {
 	let current = null;
@@ -623,6 +761,7 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		rawItems,
 		value
 	]);
+	const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
 	const { selection, record } = useStructuralSelection(isPrimitive ? primitiveItems.length : objectItems.length, value);
 	const [pending] = useState(createPendingCommit);
 	useEffect(() => {
@@ -686,120 +825,135 @@ const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
 		if (item === null) return;
 		commit(snapshot, updateArrayItemValue(snapshot.value, item?.elementIndex ?? elementIndex, next), void 0, new Set(snapshot.selected));
 	};
-	return {
-		kind,
-		items: isPrimitive ? primitiveItems.map((item) => ({
-			id: identity.ids[item.index] ?? 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: item.type === "unknown" ? item.source : String(item.value ?? ""),
-				canEditValue: canLosslesslyEvaluateSource(item.source),
-				onChange: (next) => updateValue(item.elementIndex, next)
+	const actions = {
+		add: () => {
+			const snapshot = latest();
+			const next = appendArrayItem(snapshot.value, kind);
+			commit(snapshot, next, next ? [...snapshot.ids, nanoid(6)] : void 0, selectionAfter({ type: "append" }, snapshot.selected, snapshot.items.length));
+		},
+		move: (elementIndex, toIndex) => {
+			const snapshot = latest();
+			const from = locate(snapshot, elementIndex);
+			const target = snapshot.items.find((item) => item.index === toIndex);
+			if (!from || !target) return;
+			commit(snapshot, moveArrayItem(snapshot.value, from.elementIndex, target.elementIndex), moveId(snapshot.ids, from.index, target.index), /* @__PURE__ */ new Set());
+		},
+		remove: (elementIndex) => {
+			const snapshot = latest();
+			const removed = locate(snapshot, elementIndex);
+			if (removed === null) return;
+			commit(snapshot, removeArrayItems(snapshot.value, /* @__PURE__ */ new Set([removed?.elementIndex ?? elementIndex]), kind), removed ? removeIds(snapshot.ids, /* @__PURE__ */ new Set([removed.index])) : void 0, /* @__PURE__ */ new Set());
+		},
+		duplicateSelected: () => {
+			const snapshot = latest();
+			const selected = elementIndicesOf(snapshot, snapshot.selected);
+			const next = duplicateArrayItems(snapshot.value, selected);
+			const copied = snapshot.items.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
+			commit(snapshot, next, next ? [...snapshot.ids, ...copied] : void 0, selectionAfter({
+				type: "duplicate",
+				indices: [...snapshot.selected]
+			}, snapshot.selected, snapshot.items.length));
+		},
+		moveSelected: (direction) => {
+			const snapshot = latest();
+			const nextIdentity = moveSelectedIndices(snapshot.ids, snapshot.selected, direction);
+			const result = moveArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), direction);
+			if (!result) {
+				commit(snapshot, null, void 0, snapshot.selected);
+				return;
 			}
-		})) : objectItems.map((item) => {
-			const id = identity.ids[item.index] ?? item.id;
-			const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
-				const binding = resolveRenderEntry(render, key);
-				const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
-				return {
-					...toBindingFields(binding),
-					id: `item-${id}-${key}`,
-					meta: {
-						...binding.meta,
-						valueType: prop.type
-					},
-					value: parseValue(String(prop.value)),
-					rawValue: prop.type === "unknown" ? propertySource : String(prop.value),
-					canEditValue: canLosslesslyEvaluateSource(propertySource),
-					onChange: (next) => updateProperty(item.elementIndex, key, next)
-				};
-			});
-			const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
-				property,
-				elements: nodes.flatMap((node) => {
-					const source = resolvePanelBindings(node);
-					if (!source) return [];
-					return [{
-						id: source.id,
-						tagName: source.tagName,
-						bindings: withPanelCommit(source.bindings, onNodeChange)
-					}];
-				})
-			})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
-				property,
-				elements: [],
-				fallback: {
-					id: `item-${id}-${property}-jsx`,
-					label: property,
-					property,
-					type: "jsx",
-					value: code,
-					rawValue: code,
-					canEditValue: true,
-					onChange: (next) => updateProperty(item.elementIndex, property, next)
-				}
-			}))];
+			const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => import_lib.isExpression(node) && import_lib.isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
+			commit(snapshot, result.code, nextIdentity.items, new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
+		},
+		removeSelected: () => {
+			const snapshot = latest();
+			commit(snapshot, removeArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), kind), removeIds(snapshot.ids, snapshot.selected), /* @__PURE__ */ new Set());
+		}
+	};
+	const items = isPrimitive ? primitiveItems.map((item) => ({
+		id: identity.ids[item.index] ?? 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: item.type === "unknown" ? item.source : String(item.value ?? ""),
+			canEditValue: canLosslesslyEvaluateSource(item.source),
+			onChange: (next) => updateValue(item.elementIndex, next)
+		}
+	})) : objectItems.map((item) => {
+		const id = identity.ids[item.index] ?? item.id;
+		const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
+			const binding = resolveRenderEntry(render, key);
+			const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
 			return {
-				id,
-				index: item.index,
-				elementIndex: item.elementIndex,
-				properties,
-				nested
+				...toBindingFields(binding),
+				id: `item-${id}-${key}`,
+				meta: {
+					...binding.meta,
+					valueType: prop.type
+				},
+				value: parseValue(String(prop.value)),
+				rawValue: prop.type === "unknown" ? propertySource : String(prop.value),
+				canEditValue: canLosslesslyEvaluateSource(propertySource),
+				onChange: (next) => updateProperty(item.elementIndex, key, next)
 			};
-		}),
+		});
+		const nested = [...Object.entries(item.jsxBindings).map(([property, nodes]) => ({
+			property,
+			elements: nodes.flatMap((node) => {
+				const source = resolvePanelBindings(node);
+				if (!source) return [];
+				return [{
+					id: source.id,
+					tagName: source.tagName,
+					bindings: withPanelCommit(source.bindings, onNodeChange)
+				}];
+			})
+		})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
+			property,
+			elements: [],
+			fallback: {
+				id: `item-${id}-${property}-jsx`,
+				label: property,
+				property,
+				type: "jsx",
+				value: code,
+				rawValue: code,
+				canEditValue: true,
+				onChange: (next) => updateProperty(item.elementIndex, property, next)
+			}
+		}))];
+		return {
+			id,
+			index: item.index,
+			elementIndex: item.elementIndex,
+			properties,
+			nested
+		};
+	});
+	return {
+		kind,
+		items,
 		selection,
-		actions: {
-			add: () => {
-				const snapshot = latest();
-				const next = appendArrayItem(snapshot.value, kind);
-				commit(snapshot, next, next ? [...snapshot.ids, nanoid(6)] : void 0, selectionAfter({ type: "append" }, snapshot.selected, snapshot.items.length));
-			},
-			move: (elementIndex, toIndex) => {
-				const snapshot = latest();
-				const from = locate(snapshot, elementIndex);
-				const target = snapshot.items.find((item) => item.index === toIndex);
-				if (!from || !target) return;
-				commit(snapshot, moveArrayItem(snapshot.value, from.elementIndex, target.elementIndex), moveId(snapshot.ids, from.index, target.index), /* @__PURE__ */ new Set());
-			},
-			remove: (elementIndex) => {
-				const snapshot = latest();
-				const removed = locate(snapshot, elementIndex);
-				if (removed === null) return;
-				commit(snapshot, removeArrayItems(snapshot.value, /* @__PURE__ */ new Set([removed?.elementIndex ?? elementIndex]), kind), removed ? removeIds(snapshot.ids, /* @__PURE__ */ new Set([removed.index])) : void 0, /* @__PURE__ */ new Set());
-			},
-			duplicateSelected: () => {
-				const snapshot = latest();
-				const selected = elementIndicesOf(snapshot, snapshot.selected);
-				const next = duplicateArrayItems(snapshot.value, selected);
-				const copied = snapshot.items.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
-				commit(snapshot, next, next ? [...snapshot.ids, ...copied] : void 0, selectionAfter({
-					type: "duplicate",
-					indices: [...snapshot.selected]
-				}, snapshot.selected, snapshot.items.length));
-			},
-			moveSelected: (direction) => {
-				const snapshot = latest();
-				const nextIdentity = moveSelectedIndices(snapshot.ids, snapshot.selected, direction);
-				const result = moveArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), direction);
-				if (!result) {
-					commit(snapshot, null, void 0, snapshot.selected);
-					return;
-				}
-				const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => import_lib.isExpression(node) && import_lib.isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
-				commit(snapshot, result.code, nextIdentity.items, new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
-			},
-			removeSelected: () => {
-				const snapshot = latest();
-				commit(snapshot, removeArrayItems(snapshot.value, elementIndicesOf(snapshot, snapshot.selected), kind), removeIds(snapshot.ids, snapshot.selected), /* @__PURE__ */ new Set());
+		expansion: {
+			expandedIds: items.flatMap((item) => collapsed.has(item.id) ? [] : [item.id]),
+			isExpanded: (id) => !collapsed.has(id),
+			toggle: (id) => setCollapsed((previous) => {
+				const next = new Set(previous);
+				if (!next.delete(id)) next.add(id);
+				return next;
+			}),
+			setExpanded: (ids) => {
+				const expanded = new Set(ids);
+				setCollapsed(new Set(items.flatMap((item) => expanded.has(item.id) ? [] : [item.id])));
 			}
 		},
+		actions,
 		canEditStructure,
 		parseError
 	};
@@ -828,7 +982,8 @@ const NestedGroup = ({ group, onNodeChange }) => {
 				"):"
 			]
 		}), group.elements.map((element) => /* @__PURE__ */ jsxs("div", {
-			className: "rounded border border-blue-100 bg-blue-50 p-2",
+			"data-node-id": element.id,
+			className: "rounded border border-blue-100 bg-blue-50 p-2\n            data-[picked]:ring-2 data-[picked]:ring-blue-400",
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "mb-1 text-xs text-blue-600",
 				children: [
@@ -863,7 +1018,7 @@ const NestedGroup = ({ group, onNodeChange }) => {
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { kind, items, selection, actions, canEditStructure, parseError } = useDndItems(value, {
+	const { kind, items, selection, expansion, actions, canEditStructure, parseError } = useDndItems(value, {
 		render,
 		onChange,
 		onNodeChange: onChildChange
@@ -933,97 +1088,82 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 			})
 		]
 	});
-	if (kind === "primitive") return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-4",
-		children: [
-			header,
-			bulkBar,
-			!canEditStructure && /* @__PURE__ */ jsx("div", {
-				className: "rounded border border-dashed border-amber-200 p-3 text-xs\n              text-amber-700",
-				children: "Values remain editable, but moving, copying, adding, and deleting require a dense array without spreads or parenthesized top-level items. Use the code editor for those structural changes."
-			}),
-			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",
-					children: [/* @__PURE__ */ jsx("div", {
-						onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
-						className: "inline-flex",
-						children: /* @__PURE__ */ jsx(Checkbox, {
-							checked: selection.isSelected(item.index),
-							disabled: !canEditStructure,
-							onChange: () => {}
-						})
-					}), itemControls(item)]
-				}), /* @__PURE__ */ jsx(Field, {
-					binding: item.value,
-					onNodeChange: onChildChange
-				})]
-			}, item.id))
-		]
+	const itemCheckbox = (item) => /* @__PURE__ */ jsx("div", {
+		onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
+		className: "inline-flex",
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: selection.isSelected(item.index),
+			disabled: !canEditStructure,
+			onChange: () => {}
+		})
 	});
+	const objectBody = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "space-y-2",
+		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: binding.label
+			}), /* @__PURE__ */ jsx(Field, {
+				binding,
+				onNodeChange: onChildChange
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-right text-xs text-gray-500",
+			children: [
+				"(",
+				String(binding.meta?.valueType),
+				")"
+			]
+		})] }, `${item.id}-${binding.property}-${binding.label}`))
+	}), /* @__PURE__ */ jsx("div", {
+		className: "space-y-3 border-t pt-2",
+		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"
+		})
+	})] });
+	const allExpanded = expansion.expandedIds.length === items.length;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
 			header,
+			items.length > 1 && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "small",
+					variant: "text",
+					onClick: () => expansion.setExpanded(allExpanded ? [] : items.map((item) => item.id)),
+					children: allExpanded ? "Collapse all" : "Expand all"
+				})
+			}),
 			bulkBar,
 			!canEditStructure && /* @__PURE__ */ jsx("div", {
 				className: "rounded border border-dashed border-amber-200 p-3 text-xs\n            text-amber-700",
 				children: "Values remain editable, but moving, copying, adding, and deleting require a dense array without spreads or parenthesized top-level items. Use the code editor for those structural changes."
 			}),
-			items.map((item) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-3 rounded border bg-gray-50 p-3",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center space-x-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								onClick: (e) => canEditStructure && selection.toggle(item.index, e.shiftKey),
-								className: "inline-flex",
-								children: /* @__PURE__ */ jsx(Checkbox, {
-									checked: selection.isSelected(item.index),
-									disabled: !canEditStructure,
-									onChange: () => {}
-								})
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "text-xs font-medium",
-								children: ["Item ", item.index + 1]
-							})]
-						}), itemControls(item)]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "space-y-2",
-						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: binding.label
-							}), /* @__PURE__ */ jsx(Field, {
-								binding,
-								onNodeChange: onChildChange
-							})]
-						}), /* @__PURE__ */ jsxs("span", {
-							className: "text-right text-xs text-gray-500",
-							children: [
-								"(",
-								String(binding.meta?.valueType),
-								")"
-							]
-						})] }, `${item.id}-${binding.property}-${binding.label}`))
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "space-y-3 border-t pt-2",
-						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"
-						})
-					})
-				]
-			}, item.id))
+			/* @__PURE__ */ jsx(SortableItems, {
+				items,
+				disabled: !canEditStructure,
+				onMove: (item, toIndex) => actions.move(item.elementIndex, toIndex),
+				children: (item) => /* @__PURE__ */ jsx(ItemCard, {
+					id: item.id,
+					title: `Item ${item.index + 1}`,
+					disabled: !canEditStructure,
+					expanded: expansion.isExpanded(item.id),
+					onToggle: () => expansion.toggle(item.id),
+					checkbox: itemCheckbox(item),
+					controls: itemControls(item),
+					className: kind === "primitive" ? "space-y-2 rounded border border-gray-100 bg-gray-50 p-2" : "space-y-3 rounded border bg-gray-50 p-3",
+					children: kind === "primitive" ? /* @__PURE__ */ jsx(Field, {
+						binding: item.value,
+						onNodeChange: onChildChange
+					}) : objectBody(item)
+				}, item.id)
+			})
 		]
 	});
 };
@@ -1318,11 +1458,34 @@ const groupBindingsById = (bindings) => {
 };
 const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, bindings, onNodeChange, readOnly = false }) => {
 	const groups = groupBindingsById(bindings);
+	const rootRef = useRef(null);
+	const pickedId = (useContext(DndInspectorContext)?.picked ?? null)?.id;
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root || !pickedId) return;
+		const target = root.querySelector(`[data-node-id="${CSS.escape(pickedId)}"]`);
+		if (!target) return;
+		target.setAttribute("data-picked", "");
+		const until = performance.now() + 600;
+		let frame = 0;
+		const keepInView = () => {
+			const box = target.getBoundingClientRect();
+			const view = root.getBoundingClientRect();
+			if (box.top < view.top || box.bottom > view.bottom) target.scrollIntoView?.({ block: "nearest" });
+			if (performance.now() < until) frame = requestAnimationFrame(keepInView);
+		};
+		keepInView();
+		return () => {
+			cancelAnimationFrame(frame);
+			target.removeAttribute("data-picked");
+		};
+	}, [pickedId, groups.length]);
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
 		children: "Please select a section."
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
 		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -1363,9 +1526,13 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 				className: "text-xs text-gray-400",
 				children: "No editable elements."
 			}),
-			groups.map((group) => /* @__PURE__ */ jsx(FieldGroup, {
-				bindings: group,
-				onNodeChange
+			groups.map((group) => /* @__PURE__ */ jsx("div", {
+				"data-node-id": group[0].id,
+				className: "rounded data-[picked]:ring-2 data-[picked]:ring-blue-400\n            data-[picked]:ring-offset-2",
+				children: /* @__PURE__ */ jsx(FieldGroup, {
+					bindings: group,
+					onNodeChange
+				})
 			}, group[0].id))
 		]
 	});
@@ -1404,8 +1571,9 @@ const Palette = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
 	children: /* @__PURE__ */ jsx(PaletteItems, { subject: "<Live.Dnd.Palette>" })
 });
 const Canvas = ({ className, style, ...restProps }) => {
-	const { canvas } = useDndRegions("<Live.Dnd.Canvas>");
-	return /* @__PURE__ */ jsx("div", {
+	const { canvas, documentError } = useDndRegions("<Live.Dnd.Canvas>");
+	const inspector = useDndInspector();
+	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative h-full w-full overflow-y-auto", className),
 		"data-frame-container": true,
 		style: {
@@ -1415,7 +1583,21 @@ const Canvas = ({ className, style, ...restProps }) => {
 			...style
 		},
 		...restProps,
-		children: canvas
+		children: [canvas, !documentError && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none sticky bottom-0 z-70 h-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-auto absolute bottom-3 left-3",
+				children: /* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(Crosshair, {}),
+					color: "primary",
+					variant: inspector.active ? "solid" : "outlined",
+					"aria-pressed": inspector.active,
+					"aria-label": "Pick an element",
+					title: inspector.active ? "Click an element to edit it. Esc to cancel." : "Pick an element",
+					onClick: inspector.toggle
+				})
+			})
+		})]
 	});
 };
 const Panel = ({ className, ...restProps }) => /* @__PURE__ */ jsx("div", {
@@ -1588,13 +1770,16 @@ const NAVIGATION_KEYS = {
 	Home: "first",
 	End: "last"
 };
-const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, nodeRef, onNavigate, onDeleteKey }) => {
-	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({ id });
+const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, nodeRef, onNavigate, onDeleteKey, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isOver, active } = useSortable({
+		id,
+		disabled: inspecting
+	});
 	const style = {
-		transform: CSS.Transform.toString(transform),
+		transform: CSS$1.Transform.toString(transform),
 		transition,
 		opacity: isDragging ? .5 : 1,
-		cursor: "grab"
+		cursor: inspecting ? "crosshair" : "grab"
 	};
 	const isNewItemOver = isOver && active?.data.current?.type === "new-item";
 	const onKeyDown = (e) => {
@@ -1638,7 +1823,15 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 		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") }),
+			/* @__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"),
@@ -1959,7 +2152,7 @@ const conditionalModifiers = (args) => {
 	return restrictToVerticalAxis(args);
 };
 const NO_MODULES = {};
-const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, children, ...restProps }) => {
+const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, onNodePick, children, ...restProps }) => {
 	const modules = useStableModules(_modules);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
@@ -2016,6 +2209,45 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		if (active.id !== over.id && sections.some((s) => s.id === active.id)) reorder(String(active.id), String(over.id));
 	};
 	const onSelect = (id) => select(id);
+	const [inspecting, setInspecting] = useState(false);
+	const [picked, setPicked] = useState(null);
+	const [highlight, setHighlight] = useState(null);
+	if (picked && picked.sectionId !== selectedId) setPicked(null);
+	const stopInspecting = useCallback(() => {
+		setInspecting(false);
+		setHighlight(null);
+	}, []);
+	useEffect(() => {
+		if (!inspecting) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") stopInspecting();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [inspecting, stopInspecting]);
+	const inspector = {
+		active: inspecting,
+		activate: () => setInspecting(true),
+		deactivate: stopInspecting,
+		toggle: () => inspecting ? stopInspecting() : setInspecting(true),
+		picked
+	};
+	const onInspectMove = (section, overlay, x, y) => {
+		const element = pickElement(section, overlay, x, y);
+		setHighlight(element ? viewportRect(element) : null);
+	};
+	const onInspectPick = (sectionId, section, overlay, x, y) => {
+		const id = pickElement(section, overlay, x, y)?.getAttribute(DATA_ATTR.ID);
+		if (!id) return;
+		const pick = {
+			id,
+			sectionId
+		};
+		selectOnly(sectionId);
+		setPicked(pick);
+		stopInspecting();
+		onNodePick?.(pick);
+	};
 	const removeRef = useRef(remove);
 	useEffect(() => {
 		removeRef.current = remove;
@@ -2080,6 +2312,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		patch(next);
 	};
 	const selectedCode = selectedItem?.code;
+	const selectedSectionId = selectedItem?.id;
 	const { fields, updatedCode, parseError } = useMemo(() => {
 		if (!selectedCode) return {
 			fields: [],
@@ -2087,7 +2320,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			parseError: null
 		};
 		try {
-			const updated = fillIds(selectedCode);
+			const updated = fillIdsFrom(selectedCode, selectedSectionId ?? "");
 			return {
 				fields: extract(updated),
 				updatedCode: updated !== selectedCode ? updated : selectedCode,
@@ -2101,7 +2334,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				parseError: { error: e }
 			};
 		}
-	}, [selectedCode]);
+	}, [selectedCode, selectedSectionId]);
 	useEffect(() => {
 		if (missingContainer !== null) reportErrorRef.current({
 			type: "parse",
@@ -2219,6 +2452,10 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				nodeRef: sectionNodes.register(section.id),
 				onNavigate: (to) => onNavigate(section.id, to),
 				onDeleteKey: () => onDeleteKey(section.id),
+				inspecting,
+				onInspectMove,
+				onInspectPick: (...args) => onInspectPick(section.id, ...args),
+				onInspectLeave: () => setHighlight(null),
 				children: /* @__PURE__ */ jsx(renderer_default, {
 					preview: previews[index],
 					sectionId: section.id,
@@ -2250,12 +2487,12 @@ 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__ */ jsx(DndEditOptionsContext.Provider, {
+				children: /* @__PURE__ */ jsxs(DndEditOptionsContext.Provider, {
 					value: {
 						renderField,
 						reportError
 					},
-					children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
+					children: [/* @__PURE__ */ jsx(DndRegionContext.Provider, {
 						value: {
 							palette,
 							panel,
@@ -2267,8 +2504,11 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 							setPaletteOpen: setMobilePaletteOpen,
 							documentError: problem?.reason ?? null
 						},
-						children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
-					})
+						children: /* @__PURE__ */ jsx(DndInspectorContext.Provider, {
+							value: inspector,
+							children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
+						})
+					}), /* @__PURE__ */ jsx(InspectorHighlight, { rect: inspecting ? highlight : null })]
 				})
 			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
 				sections,
@@ -2299,6 +2539,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 };
+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 };
 
-//# sourceMappingURL=dnd-DBaH2L8N.js.map
+//# sourceMappingURL=dnd-x8Mvj--6.js.map