@jbpark/live-editor 3.2.0 → 4.0.0

package/dist/{dnd-DTT37EbA.js → dnd-ClnGRNaY.js}

@@ -1,18 +1,18 @@
-import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds } from "./document-C6bNHl7l.js";
-import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-WyxPYZGh.js";
+import { D as fillSectionIds, E as createSectionPreviewCache, I as nanoid, K as __toESM, L as require_lib, U as DRAGGABLE_ITEMS, _ as parseArrayExpression, a as findEditableChildren, c as parseBinding, d as canLosslesslyEvaluateSource, m as extractObjectProperties, n as extract, o as getCurrentValue, p as extractNodeValue, s as getStructuredValue, v as parseValue, z as BINDING_PROP } from "./extract-abHYmNsu.js";
+import { c as generateSection, d as preloadScripts, i as cn, p as replaceSections, s as extractSections } from "./utils-BQ7WL7Jh.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, S as parseBinding, _ as updateArrayItemValue, b as getCurrentValue, d as duplicateArrayItems, f as moveArrayItem, g as updateArrayItemProperty, h as removeArrayItems, i as replaceIds, k as parseArrayExpression, l as extract, o as update, p as moveArrayItems, r as fillIds, s as getChildrenSignatures, t as validateBindingValue, u as appendArrayItem, v as moveSelectedIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-Bx2Avo4d.js";
-import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-DAhKGsY4.js";
-import { t as Core } from "./core-D3q5rpuz.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-BTP1nfG6.js";
+import { _ as moveSelectedIndices, c as appendArrayItem, d as moveArrayItems, g as canStructurallyEditArray, h as updateArrayItemValue, i as replaceIds, l as duplicateArrayItems, m as updateArrayItemProperty, o as update, p as removeArrayItems, r as fillIds, s as getChildrenSignatures, t as validateBindingValue, u as moveArrayItem } from "./ast-CZwpVrJv.js";
+import { i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-BF8TQ3Yy.js";
+import { t as Core } from "./core-Co8Nlq16.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-C90q3YsT.js";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, Toast, Typography, Upload } from "@jbpark/ui-kit";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, 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 { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, ChevronUp, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, LayoutGrid, Link, Mail, Map as Map$1, Menu, MessageCircle, Phone, Plus, Search, Settings, Share, ShoppingCart, Star, Trash, Upload as Upload$1, User, X } from "lucide-react";
+import { ArrowDown, ArrowUp, ChevronDown, ChevronUp, Copy, LayoutGrid, Plus, Trash, X } from "lucide-react";
 import { CSS } from "@dnd-kit/utilities";
 //#region src/components/dnd/droppable.tsx
 var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
@@ -36,6 +36,13 @@ const Droppable = ({ children, className }) => {
 	});
 };
 //#endregion
+//#region src/components/dnd/edit-options.ts
+const toastEditError = (error) => {
+	Toast.error(error.title, error.description ? { description: error.description } : void 0);
+};
+const DndEditOptionsContext = createContext({ reportError: toastEditError });
+const useDndEditOptions = () => useContext(DndEditOptionsContext);
+//#endregion
 //#region src/components/dnd/draggable.tsx
 const DraggableItem = ({ item, children }) => {
 	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
@@ -78,8 +85,73 @@ const useDndPalette = () => useDndRegions("useDndPalette()").palette;
 const useDndPanel = () => useDndRegions("useDndPanel()").panel;
 const useDndLayout = () => useDndRegions("useDndLayout()");
 //#endregion
+//#region src/components/dnd/panel-binding.ts
+const readAttribute = (node, name) => node.dataAttributes.find((attribute) => attribute.name === name)?.value;
+const canEditBindingValue = (node, binding) => {
+	if (binding.property === "children" || binding.property === "innerText" || binding.property === "innerHTML" || binding.property === "items" || binding.property === "data" || binding.type === "array" || binding.type === "jsx" || binding.type === "richtext") return true;
+	const attribute = node.attributes.find((candidate) => candidate.name === binding.property);
+	return attribute?.isStringLiteral === true || canLosslesslyEvaluateSource(attribute?.value ?? "");
+};
+const toBindingFields = (binding) => ({
+	label: binding.label,
+	property: binding.property,
+	type: binding.type,
+	widget: binding.widget,
+	options: binding.options,
+	render: binding.render,
+	min: binding.min,
+	max: binding.max,
+	pattern: binding.pattern,
+	required: binding.required,
+	meta: binding.meta
+});
+const resolveRenderEntry = (render, key) => {
+	const entry = render?.[key];
+	if (entry && "type" in entry) {
+		const leaf = entry;
+		return {
+			...leaf,
+			label: leaf.label ?? key,
+			property: leaf.property ?? key
+		};
+	}
+	return {
+		label: key,
+		property: key,
+		render: entry
+	};
+};
+const toPanelBindingData = (node, id, binding) => ({
+	...toBindingFields(binding),
+	id,
+	value: getStructuredValue(node, binding.property, binding.type),
+	rawValue: getCurrentValue(node, binding.property),
+	...!canEditBindingValue(node, binding) && { canEditValue: false }
+});
+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 (!parsed.length) return null;
+	return {
+		id,
+		tagName: node.tagName || "element",
+		bindings: parsed.map((binding) => toPanelBindingData(node, id, binding))
+	};
+};
+const withPanelCommit = (bindings, commit) => bindings.map((binding) => ({
+	...binding,
+	onChange: (value) => commit?.({
+		id: binding.id,
+		label: binding.label,
+		property: binding.property,
+		value
+	})
+}));
+//#endregion
 //#region src/components/dnd/panel/bulk-actions-bar.tsx
-const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
+const BulkActionsBar = ({ count, disabled = false, onDuplicate, onMoveUp, onMoveDown, onDelete, onClear }) => {
 	if (count === 0) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between rounded border\n        border-blue-200 bg-blue-50 p-2",
@@ -93,18 +165,21 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
 					size: "small",
 					icon: /* @__PURE__ */ jsx(Copy, {}),
 					title: "Duplicate selected",
+					disabled,
 					onClick: onDuplicate
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "small",
 					icon: /* @__PURE__ */ jsx(ArrowUp, {}),
 					title: "Move selected up",
+					disabled,
 					onClick: onMoveUp
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "small",
 					icon: /* @__PURE__ */ jsx(ArrowDown, {}),
 					title: "Move selected down",
+					disabled,
 					onClick: onMoveDown
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -112,6 +187,7 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
 					size: "small",
 					icon: /* @__PURE__ */ jsx(X, {}),
 					title: "Delete selected",
+					disabled,
 					onClick: onDelete
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -126,58 +202,29 @@ const BulkActionsBar = ({ count, onDuplicate, onMoveUp, onMoveDown, onDelete, on
 //#endregion
 //#region src/components/dnd/panel/node.tsx
 const Node = ({ data, onChange }) => {
-	const idAttr = data.dataAttributes.find((a) => a.name === "data-id");
-	const bindingAttr = data.dataAttributes.find((a) => a.name === "data-binding");
-	if (!idAttr?.value || !bindingAttr?.value) return null;
-	const dataId = idAttr.value;
-	const bindings = data.bindings || parseBinding(bindingAttr.value);
-	if (!bindings.length) return null;
+	const source = resolvePanelBindings(data);
+	if (!source) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "space-y-2 rounded",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "space-y-1",
-			children: bindings.map((binding) => {
-				const currentValue = getCurrentValue(data, binding.property);
-				const structuredValue = getStructuredValue(data, binding.property, binding.type);
-				return /* @__PURE__ */ jsxs("div", {
-					className: "space-y-1",
-					children: [/* @__PURE__ */ jsxs("label", {
-						className: "block text-xs font-semibold text-gray-700",
-						children: [binding.label, /* @__PURE__ */ jsxs("span", {
-							className: "ml-1 text-gray-400",
-							children: [
-								"(",
-								binding.property,
-								")"
-							]
-						})]
-					}), /* @__PURE__ */ jsx(Field, {
-						binding: {
-							id: dataId,
-							label: binding.label,
-							property: binding.property,
-							type: binding.type,
-							widget: binding.widget,
-							options: binding.options,
-							render: binding.render,
-							min: binding.min,
-							max: binding.max,
-							pattern: binding.pattern,
-							required: binding.required,
-							meta: binding.meta,
-							value: structuredValue,
-							rawValue: currentValue,
-							onChange: (next) => onChange?.({
-								id: dataId,
-								label: binding.label,
-								property: binding.property,
-								value: next
-							})
-						},
-						onNodeChange: onChange
+			children: withPanelCommit(source.bindings, onChange).map((binding) => /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "block text-xs font-semibold text-gray-700",
+					children: [binding.label, /* @__PURE__ */ jsxs("span", {
+						className: "ml-1 text-gray-400",
+						children: [
+							"(",
+							binding.property,
+							")"
+						]
 					})]
-				}, `${binding.property}-${binding.label}`);
-			})
+				}), /* @__PURE__ */ jsx(Field, {
+					binding,
+					onNodeChange: onChange
+				})]
+			}, `${binding.id}-${binding.property}`))
 		})
 	});
 };
@@ -356,63 +403,7 @@ const Children$1 = ({ value, onChange, onNodeChange }) => {
 	});
 };
 //#endregion
-//#region src/components/dnd/panel/icon-map.tsx
-const ICON_MAP = {
-	AlertCircle,
-	ArrowDown,
-	ArrowLeft,
-	ArrowRight,
-	ArrowUp,
-	Bell,
-	Bookmark,
-	Calendar,
-	Camera,
-	Check,
-	ChevronDown,
-	ChevronRight,
-	Clock,
-	Download,
-	Edit,
-	Eye,
-	Filter,
-	Heart,
-	Home,
-	Image,
-	Info,
-	Link,
-	Mail,
-	Map: Map$1,
-	Menu,
-	MessageCircle,
-	Phone,
-	Plus,
-	Search,
-	Settings,
-	Share,
-	ShoppingCart,
-	Star,
-	Trash,
-	Upload: Upload$1,
-	User,
-	X
-};
-const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
-	label: /* @__PURE__ */ jsxs("span", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), name]
-	}),
-	value: name
-}));
-//#endregion
 //#region src/components/dnd/panel/use-items-editor.ts
-const resolveLeaf = (render, key) => {
-	const leaf = render?.[key];
-	return leaf && "type" in leaf ? leaf : null;
-};
-const resolveMap = (render, key) => {
-	const leaf = render?.[key];
-	return leaf && !("type" in leaf) ? leaf : void 0;
-};
 const bindingsInJSX = (source) => {
 	const nodes = extract(source);
 	const container = nodes.find((n) => n.bindings?.some((b) => b.property === "children"));
@@ -512,8 +503,19 @@ const removeIds = (ids, indices) => {
 };
 const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
+	const canEditStructure = useMemo(() => canStructurallyEditArray(value), [value]);
+	const { reportError } = useDndEditOptions();
+	const reportErrorRef = useRef(reportError);
+	useEffect(() => {
+		reportErrorRef.current = reportError;
+	});
 	useEffect(() => {
-		if (parseError) Toast.error("Failed to parse items", { description: "Check the console for details." });
+		if (parseError) reportErrorRef.current({
+			type: "parse",
+			target: "items",
+			title: "Failed to parse items",
+			description: "Check the console for details."
+		});
 	}, [parseError]);
 	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
 	const isPrimitive = kind === "primitive";
@@ -528,7 +530,11 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
 	const commit = (next, nextIds) => {
 		if (next === null) {
-			Toast.error("Failed to update this item", { description: "The source was preserved. Structural edits require a dense array without spreads; use the code editor for unsupported syntax." });
+			reportError({
+				type: "items",
+				title: "Failed to update this item",
+				description: "The source was preserved. Structural edits require a dense array without spreads; use the code editor for unsupported syntax."
+			});
 			return false;
 		}
 		const parsed = parseSource(next);
@@ -557,70 +563,50 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				label: `item-${item.index}`,
 				property: item.type,
 				value: item.value ?? "",
-				rawValue: String(item.value ?? ""),
+				rawValue: item.type === "unknown" ? item.source : String(item.value ?? ""),
+				canEditValue: canLosslesslyEvaluateSource(item.source),
 				onChange: (next) => commit(updateArrayItemValue(value, item.elementIndex, next))
 			}
 		})) : objectItems.map((item) => {
 			const id = identity.ids[item.index] ?? item.id;
 			const properties = Object.entries(item.editableProperties).map(([key, prop]) => {
-				const leaf = resolveLeaf(render, key);
+				const binding = resolveRenderEntry(render, key);
+				const propertySource = value.slice(prop.astNode.start, prop.astNode.end);
 				return {
+					...toBindingFields(binding),
 					id: `item-${id}-${key}`,
-					label: key,
-					property: leaf ? leaf.property ?? leaf.type : key,
-					type: leaf?.type,
-					render: leaf ? leaf.render : resolveMap(render, key),
+					meta: {
+						...binding.meta,
+						valueType: prop.type
+					},
 					value: parseValue(String(prop.value)),
-					rawValue: String(prop.value),
-					meta: { valueType: prop.type },
+					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 id = node.dataAttributes.find((a) => a.name === "data-id")?.value;
-					const attr = node.dataAttributes.find((a) => a.name === "data-binding")?.value;
-					if (!id || !attr) return [];
-					const parsed = node.bindings ?? parseBinding(attr);
-					if (!parsed.length) return [];
+					const source = resolvePanelBindings(node);
+					if (!source) return [];
 					return [{
-						id,
-						tagName: node.tagName || "element",
-						bindings: parsed.map((binding) => ({
-							id,
-							label: binding.label,
-							property: binding.property,
-							type: binding.type,
-							widget: binding.widget,
-							options: binding.options,
-							render: binding.render,
-							min: binding.min,
-							max: binding.max,
-							pattern: binding.pattern,
-							required: binding.required,
-							meta: binding.meta,
-							value: getStructuredValue(node, binding.property, binding.type),
-							rawValue: getCurrentValue(node, binding.property),
-							onChange: (next) => onNodeChange?.({
-								id,
-								label: binding.label,
-								property: binding.property,
-								value: next
-							})
-						}))
+						id: source.id,
+						tagName: source.tagName,
+						bindings: withPanelCommit(source.bindings, onNodeChange)
 					}];
 				})
 			})), ...Object.entries(item.jsxFallbacks).map(([property, code]) => ({
 				property,
 				elements: [],
 				fallback: {
-					id: `item-${item.id}-${property}-jsx`,
+					id: `item-${id}-${property}-jsx`,
 					label: property,
 					property,
 					type: "jsx",
 					value: code,
 					rawValue: code,
+					canEditValue: true,
 					onChange: (next) => updateProperty(item.elementIndex, property, next)
 				}
 			}))];
@@ -670,6 +656,7 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				if (commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind), removeIds(identity.ids, selection.selected))) selection.clear();
 			}
 		},
+		canEditStructure,
 		parseError
 	};
 };
@@ -732,7 +719,7 @@ const NestedGroup = ({ group, onNodeChange }) => {
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { kind, items, selection, actions, parseError } = useItemsEditor(value, {
+	const { kind, items, selection, actions, canEditStructure, parseError } = useItemsEditor(value, {
 		render,
 		onChange,
 		onNodeChange: onChildChange
@@ -746,7 +733,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 				items.length,
 				")"
 			]
-		}), items.length > 0 && /* @__PURE__ */ jsx(Button, {
+		}), items.length > 0 && canEditStructure && /* @__PURE__ */ jsx(Button, {
 			size: "small",
 			icon: /* @__PURE__ */ jsx(Plus, {}),
 			variant: "solid",
@@ -771,6 +758,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	});
 	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
 		count: selection.selected.size,
+		disabled: !canEditStructure,
 		onDuplicate: actions.duplicateSelected,
 		onMoveUp: () => actions.moveSelected("up"),
 		onMoveDown: () => actions.moveSelected("down"),
@@ -783,20 +771,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 			/* @__PURE__ */ jsx(Button, {
 				size: "small",
 				icon: /* @__PURE__ */ jsx(ArrowUp, {}),
-				disabled: item.index === 0,
+				disabled: !canEditStructure || item.index === 0,
 				onClick: () => actions.move(item.elementIndex, item.index - 1)
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				size: "small",
 				icon: /* @__PURE__ */ jsx(ArrowDown, {}),
-				disabled: item.index === items.length - 1,
+				disabled: !canEditStructure || item.index === items.length - 1,
 				onClick: () => actions.move(item.elementIndex, item.index + 1)
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				danger: true,
 				size: "small",
 				icon: /* @__PURE__ */ jsx(X, {}),
-				disabled: items.length <= 1,
+				disabled: !canEditStructure || items.length <= 1,
 				onClick: () => actions.remove(item.elementIndex)
 			})
 		]
@@ -806,15 +794,20 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		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) => selection.toggle(item.index, e.shiftKey),
+						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)]
@@ -830,6 +823,10 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 		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-3 rounded border bg-gray-50 p-3",
 				children: [
@@ -838,10 +835,11 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center space-x-2",
 							children: [/* @__PURE__ */ jsx("div", {
-								onClick: (e) => selection.toggle(item.index, e.shiftKey),
+								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", {
@@ -914,6 +912,36 @@ const RICHTEXT_TOOLBAR = [
 	"orderedList",
 	"link"
 ];
+const JSXEditorField = ({ value, isHTML, onSave }) => {
+	const selectionRef = useRef(null);
+	const focusedRef = useRef(false);
+	const handleUpdate = useCallback((update) => {
+		selectionRef.current = update.state.selection;
+	}, []);
+	const handleCreateEditor = useCallback((view) => {
+		if (selectionRef.current) view.dispatch({ selection: selectionRef.current });
+		if (focusedRef.current) view.focus();
+	}, []);
+	const handleFocus = useCallback(() => {
+		focusedRef.current = true;
+	}, []);
+	const handleBlur = useCallback((event) => {
+		if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusedRef.current = false;
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		onFocusCapture: handleFocus,
+		onBlurCapture: handleBlur,
+		children: /* @__PURE__ */ jsx(Core, {
+			value,
+			height: "150px",
+			fragment: !isHTML,
+			raw: isHTML,
+			onSave,
+			onUpdate: handleUpdate,
+			onCreateEditor: handleCreateEditor
+		})
+	});
+};
 const ColorPickerField = ({ value, onChange }) => {
 	const [liveValue, setLiveValue] = useState(value);
 	const [prevValue, setPrevValue] = useState(value);
@@ -946,7 +974,7 @@ const ColorPickerField = ({ value, onChange }) => {
 		}
 	});
 };
-const Field = ({ binding, onNodeChange }) => {
+const BuiltinField = ({ binding, onNodeChange }) => {
 	const { id, value, rawValue, onChange } = binding;
 	const [validationError, setValidationError] = useState(null);
 	const [text, setText] = useState(rawValue);
@@ -955,6 +983,17 @@ const Field = ({ binding, onNodeChange }) => {
 		setPrevRawValue(rawValue);
 		setText(rawValue);
 	}
+	if (binding.canEditValue === false) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1 rounded border border-dashed border-amber-200 p-3\n          text-xs text-amber-700",
+		children: [
+			/* @__PURE__ */ jsx("div", { children: "This expression is preserved but is not editable here." }),
+			/* @__PURE__ */ jsx("code", {
+				className: "block overflow-x-auto text-amber-800",
+				children: rawValue
+			}),
+			/* @__PURE__ */ jsx("div", { children: "Use the code editor to change it." })
+		]
+	});
 	const commitIfChanged = (next) => {
 		if (next !== (typeof next === "string" ? rawValue : value)) onChange(next);
 	};
@@ -971,11 +1010,9 @@ const Field = ({ binding, onNodeChange }) => {
 	});
 	if (binding.property === BINDING_PROP.INNER_HTML || binding.type === "jsx") {
 		const isHTML = binding.property === BINDING_PROP.INNER_HTML;
-		return /* @__PURE__ */ jsx(Core, {
+		return /* @__PURE__ */ jsx(JSXEditorField, {
 			value: rawValue,
-			height: "150px",
-			fragment: !isHTML,
-			raw: isHTML,
+			isHTML,
 			onSave: commitIfChanged
 		});
 	}
@@ -988,30 +1025,30 @@ const Field = ({ binding, onNodeChange }) => {
 		const objectValue = value;
 		return /* @__PURE__ */ jsx("div", {
 			className: "space-y-2 rounded border border-gray-200 bg-gray-50 p-2",
-			children: Object.entries(objectValue).map(([key, val]) => /* @__PURE__ */ jsxs("div", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ jsx("label", {
-					className: "block text-xs font-medium text-gray-600",
-					children: key
-				}), /* @__PURE__ */ jsx(Field, {
-					binding: {
-						id,
-						label: key,
-						property: binding.render?.[key] && "type" in binding.render[key] ? binding.render[key].type : key,
-						type: binding.render?.[key] && "type" in binding.render[key] ? binding.render[key].type : void 0,
-						render: binding.render?.[key] && !("type" in binding.render[key]) ? binding.render[key] : void 0,
-						value: val,
-						rawValue: typeof val === "object" && val !== null ? JSON.stringify(val) : String(val),
-						onChange: (next) => {
-							onChange({
-								...objectValue,
-								[key]: next
-							});
-						}
-					},
-					onNodeChange
-				})]
-			}, key))
+			children: Object.entries(objectValue).map(([key, val]) => {
+				const nested = resolveRenderEntry(binding.render, key);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "block text-xs font-medium text-gray-600",
+						children: nested.label
+					}), /* @__PURE__ */ jsx(Field, {
+						binding: {
+							...toBindingFields(nested),
+							id,
+							value: val,
+							rawValue: typeof val === "object" && val !== null ? JSON.stringify(val) : String(val),
+							onChange: (next) => {
+								onChange({
+									...objectValue,
+									[key]: next
+								});
+							}
+						},
+						onNodeChange
+					})]
+				}, key);
+			})
 		});
 	}
 	if (binding.type === "boolean" || typeof value === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
@@ -1065,61 +1102,6 @@ const Field = ({ binding, onNodeChange }) => {
 		className: "mt-1 text-xs text-red-500",
 		children: validationError
 	})] });
-	if (binding.widget === "icon-picker" || binding.type === "icon-picker") {
-		const SelectedIcon = ICON_MAP[stringValue];
-		return /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(Select, {
-				value: stringValue,
-				options: ICON_OPTIONS,
-				onChange: commitIfChanged
-			}), SelectedIcon && /* @__PURE__ */ jsx(SelectedIcon, {
-				size: 18,
-				className: "shrink-0"
-			})]
-		});
-	}
-	if (binding.widget === "asset-picker" || binding.type === "asset-picker") {
-		const defaultUploadValue = stringValue ? [{
-			uid: "current",
-			name: stringValue.split("/").pop() || "asset",
-			url: stringValue
-		}] : [];
-		return /* @__PURE__ */ jsxs("div", {
-			className: "space-y-2",
-			children: [
-				/* @__PURE__ */ jsx(Input, {
-					value: text,
-					onChange: (e) => setText(e.target.value),
-					placeholder: "Enter an image URL",
-					onBlur: (e) => {
-						const next = e.target.value.trim();
-						const result = validateBindingValue(binding, next);
-						if (!result.valid) {
-							setValidationError(result.message ?? "Invalid value.");
-							return;
-						}
-						setValidationError(null);
-						commitIfChanged(next);
-					}
-				}),
-				/* @__PURE__ */ jsx(Upload, {
-					multiple: false,
-					maxCount: 1,
-					accept: "image/*",
-					defaultValue: defaultUploadValue,
-					onChange: (files) => {
-						const next = files[0]?.url ?? "";
-						commitIfChanged(next);
-					}
-				}),
-				validationError && /* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-xs text-red-500",
-					children: validationError
-				})
-			]
-		});
-	}
 	if (binding.type === "number" || typeof value === "number") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Input, {
 		type: "number",
 		value: text,
@@ -1160,6 +1142,13 @@ const Field = ({ binding, onNodeChange }) => {
 		children: validationError
 	})] });
 };
+const Field = (props) => {
+	const { renderField } = useDndEditOptions();
+	const builtin = /* @__PURE__ */ jsx(BuiltinField, { ...props });
+	if (!renderField) return builtin;
+	const custom = renderField(props, builtin);
+	return custom === void 0 ? builtin : /* @__PURE__ */ jsx(Fragment, { children: custom });
+};
 //#endregion
 //#region src/components/dnd/panel/field-group.tsx
 const FieldGroup = ({ bindings, onNodeChange }) => /* @__PURE__ */ jsx("div", {
@@ -1351,16 +1340,59 @@ 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, headers, modules, frame, dynamicTailwind = false, provider }) => {
-	const module = useCompiledModule(preview, modules);
-	const { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind);
+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 { ref: wrapperRef, css: dynamicCSS } = useDynamicTailwind(preview, dynamicTailwind && !forceFallback);
 	const renderProvider = (component) => {
 		return provider ? provider(component) : component;
 	};
-	if (module?.error) return /* @__PURE__ */ jsx(Error$1, {
-		message: module.error,
-		title: "Compile Error"
+	if (forceFallback) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "forced"
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: "This section is not rendered in this editor.",
+			title: "Section Unavailable"
+		})
+	});
+	if (module?.error) return /* @__PURE__ */ jsx(SectionFallback, {
+		args: {
+			section,
+			reason: "compile",
+			message: module.error
+		},
+		builtin: /* @__PURE__ */ jsx(Error$1, {
+			message: module.error,
+			title: "Compile Error"
+		})
 	});
 	const Component = module?.exports?.default;
 	if (!Component) return null;
@@ -1373,6 +1405,18 @@ const Renderer = ({ preview, headers, modules, frame, dynamicTailwind = false, p
 			"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: "Rendering Error"
+					})
+				}),
 				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
 					headers,
 					container
@@ -1427,7 +1471,7 @@ const Sortable = ({ id, children, selected, onClick, onDelete: _onDelete, onCopy
 };
 //#endregion
 //#region src/components/dnd/overlay.tsx
-const Overlay = ({ sections, renderProps }) => {
+const Overlay = ({ sections, isForced, renderProps }) => {
 	const { active } = useDndContext();
 	if (!active) return null;
 	if (active.data.current?.type === "new-item") {
@@ -1442,6 +1486,10 @@ const Overlay = ({ sections, renderProps }) => {
 			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
@@ -1558,6 +1606,10 @@ const describeUpdateFailure = (failure, label) => {
 			title: `Failed to update "${label}"`,
 			description: "The target element could not be found in this section."
 		};
+		case "unsupported-syntax": return {
+			title: `Cannot edit "${label}" in the panel`,
+			description: `The "${failure.property}" expression was preserved. Change it in the code editor instead.`
+		};
 		case "parse-error": return {
 			title: `Failed to update "${label}"`,
 			description: failure.error instanceof Error ? failure.error.message : "Check the console for details."
@@ -1570,11 +1622,19 @@ const conditionalModifiers = (args) => {
 	if (active?.data.current?.type === "new-item") return args.transform;
 	return restrictToVerticalAxis(args);
 };
-const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, children, ...restProps }) => {
+const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }) => {
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
 	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
 	const { code } = usePreview();
+	const isForced = (section) => {
+		try {
+			return shouldForceSectionFallback?.(section) === true;
+		} catch (error) {
+			console.error("shouldForceSectionFallback threw", error);
+			return false;
+		}
+	};
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value === void 0 ? code : _value;
 	const { sections, previews, selectedId, selectedItem, selectedIndex, select, clearSelection, add: addItem, remove: onDelete, copy: onCopy, move: moveSection, reorder, patch } = useSectionDocument(value, _onChange);
@@ -1601,32 +1661,49 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		if (!selectedCode) return {
 			fields: [],
 			updatedCode: "",
-			parseError: false
+			parseError: null
 		};
 		try {
 			const updated = fillIds(selectedCode);
 			return {
 				fields: extract(updated).filter((node) => node.tagName !== "section"),
 				updatedCode: updated !== selectedCode ? updated : selectedCode,
-				parseError: false
+				parseError: null
 			};
 		} catch (e) {
 			console.warn("⚠️ Parsing error", e);
 			return {
 				fields: [],
 				updatedCode: "",
-				parseError: true
+				parseError: { error: e }
 			};
 		}
 	}, [selectedCode]);
+	const reportError = onEditError ?? toastEditError;
+	const reportErrorRef = useRef(reportError);
+	useEffect(() => {
+		reportErrorRef.current = reportError;
+	});
 	useEffect(() => {
-		if (parseError) Toast.error("Failed to parse this section", { description: "Check the console for details." });
+		if (parseError) reportErrorRef.current({
+			type: "parse",
+			target: "section",
+			error: parseError.error,
+			title: "Failed to parse this section",
+			description: "Check the console for details."
+		});
 	}, [parseError]);
 	const onFieldChange = ({ id, label, property, value: fieldValue }) => {
 		const result = update(updatedCode, id, label, fieldValue, property);
 		if (!result.success) {
-			const { title, description } = describeUpdateFailure(result.failure, label);
-			Toast.error(title, description ? { description } : void 0);
+			reportError({
+				type: "update",
+				id,
+				label,
+				property,
+				failure: result.failure,
+				...describeUpdateFailure(result.failure, label)
+			});
 			return;
 		}
 		if (selectedItem) onChange({
@@ -1634,37 +1711,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 			code: result.code
 		});
 	};
-	const bindings = useMemo(() => {
-		return fields.flatMap((node) => {
-			const dataId = node.dataAttributes.find((a) => a.name === "data-id")?.value;
-			const bindingAttr = node.dataAttributes.find((a) => a.name === "data-binding")?.value;
-			if (!dataId || !bindingAttr) return [];
-			return (node.bindings ?? parseBinding(bindingAttr)).map((binding) => ({
-				id: dataId,
-				label: binding.label,
-				property: binding.property,
-				type: binding.type,
-				widget: binding.widget,
-				options: binding.options,
-				render: binding.render,
-				min: binding.min,
-				max: binding.max,
-				pattern: binding.pattern,
-				required: binding.required,
-				meta: binding.meta,
-				value: getStructuredValue(node, binding.property, binding.type),
-				rawValue: getCurrentValue(node, binding.property)
-			}));
-		});
-	}, [fields]).map((field) => ({
-		...field,
-		onChange: (value) => onFieldChange({
-			id: field.id,
-			label: field.label,
-			property: field.property,
-			value
-		})
-	}));
+	const bindingFields = useMemo(() => fields.flatMap((node) => resolvePanelBindings(node)?.bindings ?? []), [fields]);
+	const bindings = withPanelCommit(bindingFields, onFieldChange);
 	useEffect(() => {
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
@@ -1707,6 +1755,10 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 				onCopy,
 				children: /* @__PURE__ */ jsx(renderer_default, {
 					preview: previews[index],
+					sectionId: section.id,
+					sectionName: section.name,
+					sectionCode: section.code,
+					forceFallback: isForced(section),
 					modules,
 					frame,
 					dynamicTailwind,
@@ -1716,40 +1768,50 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 			}, section.id))
 		})
 	}) });
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
-		sensors,
-		collisionDetection: closestCenter,
-		modifiers: [conditionalModifiers],
-		onDragStart,
-		onDragOver,
-		onDragEnd,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("relative flex h-full w-full", className),
-			...restProps,
-			children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
-				value: {
-					palette,
-					panel,
-					canvas,
-					isMobile,
-					selectedId,
-					clearSelection,
-					paletteOpen: mobilePaletteOpen,
-					setPaletteOpen: setMobilePaletteOpen
-				},
-				children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
-			})
-		}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
-			sections,
-			renderProps: {
-				fullCode: value,
-				modules,
-				frame,
-				dynamicTailwind,
-				...props
-			}
-		}) })]
-	}) });
+	return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
+		value: renderSectionFallback,
+		children: /* @__PURE__ */ jsxs(DndContext, {
+			sensors,
+			collisionDetection: closestCenter,
+			modifiers: [conditionalModifiers],
+			onDragStart,
+			onDragOver,
+			onDragEnd,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("relative flex h-full w-full", className),
+				...restProps,
+				children: /* @__PURE__ */ jsx(DndEditOptionsContext.Provider, {
+					value: {
+						renderField,
+						reportError
+					},
+					children: /* @__PURE__ */ jsx(DndRegionContext.Provider, {
+						value: {
+							palette,
+							panel,
+							canvas,
+							isMobile,
+							selectedId,
+							clearSelection,
+							paletteOpen: mobilePaletteOpen,
+							setPaletteOpen: setMobilePaletteOpen
+						},
+						children: Children.toArray(children).length ? children : /* @__PURE__ */ jsx(Layout, {})
+					})
+				})
+			}), /* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(Overlay, {
+				sections,
+				isForced,
+				renderProps: {
+					fullCode: value,
+					modules,
+					frame,
+					dynamicTailwind,
+					...props
+				}
+			}) })]
+		})
+	});
 };
 //#endregion
 //#region src/components/dnd/index.ts
@@ -1761,6 +1823,6 @@ Dnd.Canvas = Canvas;
 Dnd.Panel = Panel;
 Dnd.Layout = Layout;
 //#endregion
-export { Panel as a, ICON_MAP as c, useDndLayout as d, useDndPalette as f, Palette as i, ICON_OPTIONS as l, DraggableItem as m, Canvas as n, Field as o, useDndPanel as p, Layout as r, useItemsEditor as s, Dnd as t, useChildrenEditor as u };
+export { Panel as a, useChildrenEditor as c, useDndPanel as d, DraggableItem as f, Palette as i, useDndLayout as l, Canvas as n, Field as o, Layout as r, useItemsEditor as s, Dnd as t, useDndPalette as u };
 
-//# sourceMappingURL=dnd-DTT37EbA.js.map
+//# sourceMappingURL=dnd-ClnGRNaY.js.map