@jbpark/live-editor 4.3.1 → 4.4.0

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

@@ -1,12 +1,12 @@
-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 { 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-BDn_f08_.js";
+import { c as RESERVED_BINDING_PROPERTIES, o as DRAGGABLE_ITEMS, r as DATA_ATTR, t as BINDING_PROP } from "./constants-h1JAgOeW.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.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 { E as readNodeBindings, F as parseValue, M as extractObjectProperties, P as parseArrayExpression, S as getStructuredValue, _ as moveSelectedIndices, a as getChildrenSignatures, c as appendArrayItem, d as moveArrayItems, g as canStructurallyEditArray, h as updateArrayItemValue, i as updateAll, j as extractNodeValue, k as canLosslesslyEvaluateSource, l as duplicateArrayItems, m as updateArrayItemProperty, p as removeArrayItems, s as extract, t as validateBindingValue, u as moveArrayItem, v as findEditableChildren, y as getCurrentValue } from "./ast-dYb78955.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-QKcGvUJs.js";
-import { t as Core } from "./core-B3ruccKb.js";
-import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-Ce63wbtG.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-Bcipc1hL.js";
+import { t as Core } from "./core-CRsAGpei.js";
+import { a as replaceSections, n as extractSections, r as generateSection } from "./sections-CBVMO8Jl.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";
@@ -73,6 +73,21 @@ const pickElement = (section, overlay, x, y) => {
 	while (element && element !== section && !hasId(element)) element = element.parentElement ?? element.parentNode?.host ?? null;
 	return element === section ? null : element;
 };
+const findElementById = (section, id) => {
+	const selector = `[${DATA_ATTR.ID}="${CSS.escape(id)}"]`;
+	const roots = [section];
+	for (const root of roots) {
+		const found = root.querySelector(selector);
+		if (found) return found;
+		root.querySelectorAll("iframe").forEach((frame) => {
+			if (frame.contentDocument) roots.push(frame.contentDocument);
+		});
+		root.querySelectorAll("*").forEach((element) => {
+			if (element.shadowRoot) roots.push(element.shadowRoot);
+		});
+	}
+	return null;
+};
 const viewportRect = (element) => {
 	const rect = element.getBoundingClientRect();
 	let x = rect.left;
@@ -204,13 +219,16 @@ const toPanelBindingData = (node, id, binding) => ({
 	value: getStructuredValue(node, binding.property, binding.type),
 	rawValue: getCurrentValue(node, binding.property),
 	...!canEditBindingValue(node, binding) && { canEditValue: false },
-	...isAttributeAbsent(node, binding) && { present: false }
+	...isAttributeAbsent(node, binding) && { present: false },
+	element: {
+		tagName: node.tagName || "element",
+		text: node.textContent.replace(/\s+/g, " ").trim()
+	}
 });
 const resolvePanelBindings = (node) => {
 	const id = readAttribute(node, "data-id");
-	const bindingAttr = readAttribute(node, "data-binding");
-	if (!id || !bindingAttr) return null;
-	const parsed = node.bindings ?? parseBinding(bindingAttr);
+	if (!id) return null;
+	const parsed = readNodeBindings(node);
 	if (!parsed.length) return null;
 	return {
 		id,
@@ -638,8 +656,8 @@ const createPendingCommit = () => {
 		}
 	};
 };
-const bindingsInJSX = (source) => {
-	const nodes = extract(source);
+const bindingsInJSX = (source, bindingOptions) => {
+	const nodes = extract(source, bindingOptions);
 	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
 	if (container) return [container];
 	const bindings = [];
@@ -649,7 +667,7 @@ const bindingsInJSX = (source) => {
 	});
 	return bindings;
 };
-const parseSource = (value) => {
+const parseSource = (value, bindingOptions) => {
 	const ast = parseArrayExpression(value);
 	if (!ast) return {
 		objectItems: [],
@@ -678,7 +696,7 @@ const parseSource = (value) => {
 			if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !(import_lib.isJSXElement(prop.value) || import_lib.isJSXFragment(prop.value))) return;
 			const propertyName = prop.key.name;
 			try {
-				const found = bindingsInJSX(value.slice(prop.value.start, prop.value.end));
+				const found = bindingsInJSX(value.slice(prop.value.start, prop.value.end), bindingOptions);
 				if (found.length > 0) jsxBindings[propertyName] = found;
 				else jsxFallbacks[propertyName] = value.slice(prop.value.start, prop.value.end);
 			} catch (error) {
@@ -736,9 +754,9 @@ const removeIds = (ids, indices) => {
 	return ids.filter((_, index) => !indices.has(index));
 };
 const useDndItems = (value, { render, onChange, onNodeChange } = {}) => {
-	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
+	const { reportError, bindingOptions } = useDndEditOptions();
+	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value, bindingOptions), [value, bindingOptions]);
 	const canEditStructure = useMemo(() => canStructurallyEditArray(value), [value]);
-	const { reportError } = useDndEditOptions();
 	const reportErrorRef = useRef(reportError);
 	useEffect(() => {
 		reportErrorRef.current = reportError;
@@ -1456,10 +1474,29 @@ const groupBindingsById = (bindings) => {
 	}
 	return [...groups.values()];
 };
+const describeElement = (binding) => {
+	const { tagName = "element", text = "" } = binding.element ?? {};
+	return {
+		tagName,
+		text,
+		label: text ? `${tagName} "${text}"` : tagName
+	};
+};
+const nodeIdOf = (target) => target instanceof Element && target.closest("[data-node-id]")?.getAttribute("data-node-id") || null;
 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;
+	const inspector = useContext(DndInspectorContext);
+	const pickedId = (inspector?.picked ?? null)?.id;
+	const highlight = inspector?.highlight;
+	const [hoveredId, setHoveredId] = useState(null);
+	const [focusedId, setFocusedId] = useState(null);
+	const targetId = hoveredId ?? focusedId;
+	useEffect(() => {
+		if (!highlight) return;
+		highlight(targetId);
+		return () => highlight(null);
+	}, [highlight, targetId]);
 	useEffect(() => {
 		const root = rootRef.current;
 		if (!root || !pickedId) return;
@@ -1486,6 +1523,12 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: rootRef,
+		onPointerOver: (e) => setHoveredId(nodeIdOf(e.target)),
+		onPointerLeave: () => setHoveredId(null),
+		onFocus: (e) => setFocusedId(nodeIdOf(e.target)),
+		onBlur: (e) => {
+			if (!e.currentTarget.contains(e.relatedTarget)) setFocusedId(null);
+		},
 		className: cn("h-full space-y-4 p-4", "overflow-x-hidden overflow-y-auto"),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -1526,14 +1569,28 @@ 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("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))
+			groups.map((group) => {
+				const element = describeElement(group[0]);
+				return /* @__PURE__ */ jsxs("div", {
+					"data-node-id": group[0].id,
+					role: "group",
+					"aria-label": element.label,
+					className: "rounded data-[picked]:ring-2 data-[picked]:ring-blue-400\n              data-[picked]:ring-offset-2",
+					children: [groups.length > 1 && /* @__PURE__ */ jsxs("div", {
+						className: "mb-2 flex min-w-0 items-baseline gap-1.5 border-b\n                  border-gray-100 pb-1 text-xs",
+						children: [/* @__PURE__ */ jsx("code", {
+							className: "shrink-0 text-gray-500",
+							children: element.tagName
+						}), element.text && /* @__PURE__ */ jsx("span", {
+							className: "truncate text-gray-400",
+							children: element.text
+						})]
+					}), /* @__PURE__ */ jsx(FieldGroup, {
+						bindings: group,
+						onNodeChange
+					})]
+				}, group[0].id);
+			})
 		]
 	});
 };
@@ -1770,7 +1827,7 @@ const NAVIGATION_KEYS = {
 	Home: "first",
 	End: "last"
 };
-const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy: _onCopy, nodeRef, onNavigate, onDeleteKey, inspecting = false, onInspectMove, onInspectPick, onInspectLeave }) => {
+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
@@ -1814,6 +1871,10 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 		e.stopPropagation();
 		_onCopy?.(id);
 	};
+	const press = (action) => (e) => {
+		e.stopPropagation();
+		action?.();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref: setRefs,
 		style,
@@ -1835,14 +1896,31 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 			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
-				})]
+				children: [
+					onMoveUp && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+						disabled: !canMoveUp,
+						onClick: press(onMoveUp),
+						"aria-label": "Move section up"
+					}),
+					onMoveDown && /* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+						disabled: !canMoveDown,
+						onClick: press(onMoveDown),
+						"aria-label": "Move section down"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						icon: /* @__PURE__ */ jsx(Copy, {}),
+						onClick: onCopy,
+						"aria-label": "Duplicate section"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						danger: true,
+						icon: /* @__PURE__ */ jsx(Trash, {}),
+						onClick: onDelete,
+						"aria-label": "Delete section"
+					})
+				]
 			})
 		]
 	});
@@ -2152,7 +2230,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, onNodePick, 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, bindings: bindingRegistry, bindingKeys, onNodePick, children, ...restProps }) => {
 	const modules = useStableModules(_modules);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
@@ -2212,6 +2290,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 	const [inspecting, setInspecting] = useState(false);
 	const [picked, setPicked] = useState(null);
 	const [highlight, setHighlight] = useState(null);
+	const [fieldTarget, setFieldTarget] = useState(null);
+	const [fieldRect, setFieldRect] = useState(null);
 	if (picked && picked.sectionId !== selectedId) setPicked(null);
 	const stopInspecting = useCallback(() => {
 		setInspecting(false);
@@ -2230,7 +2310,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		activate: () => setInspecting(true),
 		deactivate: stopInspecting,
 		toggle: () => inspecting ? stopInspecting() : setInspecting(true),
-		picked
+		picked,
+		highlight: setFieldTarget
 	};
 	const onInspectMove = (section, overlay, x, y) => {
 		const element = pickElement(section, overlay, x, y);
@@ -2296,6 +2377,35 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			if (neighbor) focusSection(neighbor.id);
 		});
 	};
+	const onMoveButton = (id, direction) => {
+		const to = sections.findIndex((section) => section.id === id) + (direction === "up" ? -1 : 1);
+		moveSection(id, direction);
+		if (to === 0 || to === sections.length - 1) focusSection(id);
+	};
+	useEffect(() => {
+		const section = selectedId === null ? null : sectionNodes.get(selectedId);
+		if (!fieldTarget || !section) return;
+		let frame = 0;
+		const measure = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				const element = findElementById(section, fieldTarget);
+				setFieldRect(element ? viewportRect(element) : null);
+			});
+		};
+		measure();
+		window.addEventListener("scroll", measure, true);
+		window.addEventListener("resize", measure);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("scroll", measure, true);
+			window.removeEventListener("resize", measure);
+		};
+	}, [
+		fieldTarget,
+		selectedId,
+		sectionNodes
+	]);
 	useEffect(() => {
 		if (selectedId === null) return;
 		const frame = requestAnimationFrame(() => {
@@ -2311,6 +2421,10 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		if (!next.id) return;
 		patch(next);
 	};
+	const bindingOptions = useMemo(() => ({
+		bindings: bindingRegistry,
+		bindingKeys
+	}), [bindingRegistry, bindingKeys]);
 	const selectedCode = selectedItem?.code;
 	const selectedSectionId = selectedItem?.id;
 	const { fields, updatedCode, parseError } = useMemo(() => {
@@ -2322,7 +2436,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		try {
 			const updated = fillIdsFrom(selectedCode, selectedSectionId ?? "");
 			return {
-				fields: extract(updated),
+				fields: extract(updated, bindingOptions),
 				updatedCode: updated !== selectedCode ? updated : selectedCode,
 				parseError: null
 			};
@@ -2334,7 +2448,11 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				parseError: { error: e }
 			};
 		}
-	}, [selectedCode, selectedSectionId]);
+	}, [
+		selectedCode,
+		selectedSectionId,
+		bindingOptions
+	]);
 	useEffect(() => {
 		if (missingContainer !== null) reportErrorRef.current({
 			type: "parse",
@@ -2366,7 +2484,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 			label,
 			property,
 			value: changeValue
-		})));
+		})), bindingOptions);
 		if (!result.success) {
 			const { id, label, property } = changes[result.index];
 			reportError({
@@ -2408,7 +2526,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		bindings,
 		onNodeChange: onFieldChange,
 		onNodesChange: commitChanges,
-		readOnly: stale
+		readOnly: stale,
+		bindingOptions
 	};
 	const canvas = /* @__PURE__ */ jsxs(Fragment, { children: [stale && /* @__PURE__ */ jsx("div", {
 		role: "status",
@@ -2449,6 +2568,10 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				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),
@@ -2490,7 +2613,8 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 				children: /* @__PURE__ */ jsxs(DndEditOptionsContext.Provider, {
 					value: {
 						renderField,
-						reportError
+						reportError,
+						bindingOptions
 					},
 					children: [/* @__PURE__ */ jsx(DndRegionContext.Provider, {
 						value: {
@@ -2508,7 +2632,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: inspecting ? highlight : null })]
+					}), /* @__PURE__ */ jsx(InspectorHighlight, { rect: inspecting ? highlight : fieldTarget ? fieldRect : null })]
 				})
 			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
 				sections,
@@ -2541,4 +2665,4 @@ 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 };
 
-//# sourceMappingURL=dnd-x8Mvj--6.js.map
+//# sourceMappingURL=dnd-BE5ZizqX.js.map