@jbpark/live-editor 3.1.0 → 3.2.1

package/dist/{dnd-BnXoytb5.js → dnd-D90jLjLH.js}

@@ -1,8 +1,8 @@
-import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-C6bNHl7l.js";
+import { 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 { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { E as extractObjectProperties, O as parseArrayExpression, T as extractNodeValue, _ as updateArrayItemValue, b as getStructuredValue, d as duplicateArrayItems, f as moveArrayItem, g as updateArrayItemProperty, h as removeArrayItems, i as replaceIds, k as parseValue, l as extract, o as update, p as moveArrayItems, r as fillIds, s as getChildrenSignatures, t as validateBindingValue, u as appendArrayItem, v as findEditableChildren, x as parseBinding, y as getCurrentValue } from "./ast-CIe-mhh_.js";
-import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-DqqQu2de.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 { Children, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -176,7 +176,7 @@ const Node = ({ data, onChange }) => {
 						},
 						onNodeChange: onChange
 					})]
-				}, binding.label);
+				}, `${binding.property}-${binding.label}`);
 			})
 		})
 	});
@@ -441,6 +441,7 @@ const parseSource = (value) => {
 				id: nanoid(6),
 				index: primitiveItems.length,
 				elementIndex,
+				source: value.slice(element.start, element.end),
 				value: extracted.value,
 				type: extracted.type
 			});
@@ -465,6 +466,7 @@ const parseSource = (value) => {
 			id: nanoid(6),
 			index: objectItems.length,
 			elementIndex,
+			source: value.slice(element.start, element.end),
 			editableProperties,
 			jsxBindings,
 			jsxFallbacks
@@ -476,6 +478,38 @@ const parseSource = (value) => {
 		parseError: false
 	};
 };
+const createIdentityState = (value, kind, items, ids = items.map((item) => item.id)) => ({
+	value,
+	kind,
+	ids,
+	signatures: items.map((item) => item.source)
+});
+const reconcileIdentityState = (current, value, kind, items) => {
+	if (current && current.value === value && current.kind === kind && current.ids.length === items.length) return current;
+	if (!current || current.kind !== kind) return createIdentityState(value, kind, items);
+	const previousCounts = /* @__PURE__ */ new Map();
+	const nextCounts = /* @__PURE__ */ new Map();
+	current.signatures.forEach((signature) => {
+		previousCounts.set(signature, (previousCounts.get(signature) ?? 0) + 1);
+	});
+	items.forEach((item) => {
+		nextCounts.set(item.source, (nextCounts.get(item.source) ?? 0) + 1);
+	});
+	const ids = items.map((item) => {
+		const previousIndex = current.signatures.indexOf(item.source);
+		return previousIndex >= 0 && previousCounts.get(item.source) === 1 && nextCounts.get(item.source) === 1 ? current.ids[previousIndex] : item.id;
+	});
+	return createIdentityState(value, kind, items, ids);
+};
+const moveId = (ids, from, to) => {
+	const next = [...ids];
+	const [moved] = next.splice(from, 1);
+	next.splice(to, 0, moved);
+	return next;
+};
+const removeIds = (ids, indices) => {
+	return ids.filter((_, index) => !indices.has(index));
+};
 const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	const { objectItems, primitiveItems, parseError } = useMemo(() => parseSource(value), [value]);
 	useEffect(() => {
@@ -483,12 +517,24 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	}, [parseError]);
 	const kind = primitiveItems.length > 0 && objectItems.length === 0 ? "primitive" : "object";
 	const isPrimitive = kind === "primitive";
+	const rawItems = isPrimitive ? primitiveItems : objectItems;
+	const [identityState, setIdentityState] = useState(() => createIdentityState(value, kind, rawItems));
+	const identity = useMemo(() => reconcileIdentityState(identityState, value, kind, rawItems), [
+		identityState,
+		kind,
+		rawItems,
+		value
+	]);
 	const selection = useMultiSelect(isPrimitive ? primitiveItems.length : objectItems.length);
-	const commit = (next) => {
+	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." });
 			return false;
 		}
+		const parsed = parseSource(next);
+		const nextItems = kind === "primitive" ? parsed.primitiveItems : parsed.objectItems;
+		if (nextIds) setIdentityState(createIdentityState(next, kind, nextItems, nextIds));
+		else setIdentityState(createIdentityState(next, kind, nextItems, identity.ids));
 		onChange?.(next);
 		return true;
 	};
@@ -501,7 +547,7 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 	return {
 		kind,
 		items: isPrimitive ? primitiveItems.map((item) => ({
-			id: item.id,
+			id: identity.ids[item.index] ?? item.id,
 			index: item.index,
 			elementIndex: item.elementIndex,
 			properties: [],
@@ -515,10 +561,11 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				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);
 				return {
-					id: `item-${item.id}-${key}`,
+					id: `item-${id}-${key}`,
 					label: key,
 					property: leaf ? leaf.property ?? leaf.type : key,
 					type: leaf?.type,
@@ -568,7 +615,7 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				property,
 				elements: [],
 				fallback: {
-					id: `item-${item.id}-${property}-jsx`,
+					id: `item-${id}-${property}-jsx`,
 					label: property,
 					property,
 					type: "jsx",
@@ -578,7 +625,7 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				}
 			}))];
 			return {
-				id: item.id,
+				id,
 				index: item.index,
 				elementIndex: item.elementIndex,
 				properties,
@@ -587,17 +634,29 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 		}),
 		selection,
 		actions: {
-			add: () => commit(appendArrayItem(value, kind)),
+			add: () => {
+				const next = appendArrayItem(value, kind);
+				commit(next, next ? [...identity.ids, nanoid(6)] : void 0);
+			},
 			move: (elementIndex, toIndex) => {
-				const target = (isPrimitive ? primitiveItems : objectItems).find((item) => item.index === toIndex);
-				if (!target) return;
-				if (commit(moveArrayItem(value, elementIndex, target.elementIndex))) selection.clear();
+				const items = isPrimitive ? primitiveItems : objectItems;
+				const from = items.find((item) => item.elementIndex === elementIndex);
+				const target = items.find((item) => item.index === toIndex);
+				if (!from || !target) return;
+				if (commit(moveArrayItem(value, elementIndex, target.elementIndex), moveId(identity.ids, from.index, target.index))) selection.clear();
 			},
 			remove: (elementIndex) => {
-				if (commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind))) selection.clear();
+				const removed = (isPrimitive ? primitiveItems : objectItems).find((item) => item.elementIndex === elementIndex);
+				if (commit(removeArrayItems(value, /* @__PURE__ */ new Set([elementIndex]), kind), removed ? removeIds(identity.ids, /* @__PURE__ */ new Set([removed.index])) : void 0)) selection.clear();
+			},
+			duplicateSelected: () => {
+				const selected = elementIndicesOf(selection.selected);
+				const next = duplicateArrayItems(value, selected);
+				const copied = rawItems.filter((item) => selected.has(item.elementIndex)).sort((a, b) => a.elementIndex - b.elementIndex).map(() => nanoid(6));
+				commit(next, next ? [...identity.ids, ...copied] : void 0);
 			},
-			duplicateSelected: () => commit(duplicateArrayItems(value, elementIndicesOf(selection.selected))),
 			moveSelected: (direction) => {
+				const nextIdentity = moveSelectedIndices(identity.ids, selection.selected, direction);
 				const result = moveArrayItems(value, elementIndicesOf(selection.selected), direction);
 				if (!result) {
 					commit(null);
@@ -605,10 +664,10 @@ const useItemsEditor = (value, { render, onChange, onNodeChange } = {}) => {
 				}
 				const visible = parseArrayExpression(result.code)?.elements.flatMap((node, index) => import_lib.isExpression(node) && import_lib.isObjectExpression(node) === !isPrimitive ? [index] : []) ?? [];
 				selection.replace(new Set(visible.flatMap((position, index) => result.indices.has(position) ? [index] : [])));
-				commit(result.code);
+				commit(result.code, nextIdentity.items);
 			},
 			removeSelected: () => {
-				if (commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind))) selection.clear();
+				if (commit(removeArrayItems(value, elementIndicesOf(selection.selected), kind), removeIds(identity.ids, selection.selected))) selection.clear();
 			}
 		},
 		parseError
@@ -666,18 +725,50 @@ const NestedGroup = ({ group, onNodeChange }) => {
 							binding,
 							onNodeChange
 						})]
-					}, binding.label))
+					}, `${binding.property}-${binding.label}`))
 				})
 			})]
 		}, `${group.property}-${element.id}`))]
 	});
 };
 const Items = ({ value, render, onChange, onChildChange }) => {
-	const { kind, items, selection, actions } = useItemsEditor(value, {
+	const { kind, items, selection, actions, parseError } = useItemsEditor(value, {
 		render,
 		onChange,
 		onNodeChange: onChildChange
 	});
+	const header = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-sm font-semibold",
+			children: [
+				"Items (",
+				items.length,
+				")"
+			]
+		}), items.length > 0 && /* @__PURE__ */ jsx(Button, {
+			size: "small",
+			icon: /* @__PURE__ */ jsx(Plus, {}),
+			variant: "solid",
+			color: "green",
+			onClick: actions.add,
+			children: "Add Item"
+		})]
+	});
+	if (parseError) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "rounded border border-dashed border-red-200 p-3 text-xs\n            text-red-600",
+			children: "This value could not be read as a list. Edit it in the code editor."
+		})]
+	});
+	if (items.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [header, /* @__PURE__ */ jsx("div", {
+			className: "rounded border border-dashed border-gray-200 p-3 text-xs\n            text-gray-500",
+			children: "No editable items. The panel copies an existing item rather than guessing the shape of a new one — add the first item in the code editor."
+		})]
+	});
 	const bulkBar = /* @__PURE__ */ jsx(BulkActionsBar, {
 		count: selection.selected.size,
 		onDuplicate: actions.duplicateSelected,
@@ -713,24 +804,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	if (kind === "primitive") return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "text-sm font-semibold",
-					children: [
-						"Items (",
-						items.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(Plus, {}),
-					variant: "solid",
-					color: "green",
-					onClick: actions.add,
-					children: "Add Item"
-				})]
-			}),
+			header,
 			bulkBar,
 			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 rounded border border-gray-100 bg-gray-50 p-2",
@@ -754,25 +828,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "text-sm font-semibold",
-					children: [
-						"Items (",
-						items.length,
-						")"
-					]
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "small",
-					icon: /* @__PURE__ */ jsx(Plus, {}),
-					variant: "solid",
-					color: "green",
-					disabled: items.length === 0,
-					onClick: actions.add,
-					children: "Add Item"
-				})]
-			}),
+			header,
 			bulkBar,
 			items.map((item) => /* @__PURE__ */ jsxs("div", {
 				className: "space-y-3 rounded border bg-gray-50 p-3",
@@ -812,7 +868,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 								String(binding.meta?.valueType),
 								")"
 							]
-						})] }, `${item.id}-${binding.label}`))
+						})] }, `${item.id}-${binding.property}-${binding.label}`))
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "space-y-3 border-t pt-2",
@@ -858,6 +914,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);
@@ -899,6 +985,9 @@ const Field = ({ binding, onNodeChange }) => {
 		setPrevRawValue(rawValue);
 		setText(rawValue);
 	}
+	const commitIfChanged = (next) => {
+		if (next !== (typeof next === "string" ? rawValue : value)) onChange(next);
+	};
 	if (binding.property === "items" || binding.property === "data" || binding.type === "array") return /* @__PURE__ */ jsx(Items, {
 		value: rawValue,
 		render: binding.render,
@@ -908,20 +997,14 @@ const Field = ({ binding, onNodeChange }) => {
 	if (binding.type === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
 		value: rawValue,
 		toolbar: RICHTEXT_TOOLBAR,
-		onChange: (next) => {
-			if (next !== rawValue) onChange(next);
-		}
+		onChange: commitIfChanged
 	});
 	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,
-			onSave: (next) => {
-				if (next !== rawValue) onChange(next);
-			}
+			isHTML,
+			onSave: commitIfChanged
 		});
 	}
 	if (binding.property === "children" && Array.isArray(value)) return /* @__PURE__ */ jsx(Children$1, {
@@ -969,13 +1052,11 @@ const Field = ({ binding, onNodeChange }) => {
 	if (binding.options && Array.isArray(binding.options)) return /* @__PURE__ */ jsx(Select, {
 		value: stringValue,
 		options: binding.options,
-		onChange: (next) => {
-			if (next !== value) onChange(next);
-		}
+		onChange: commitIfChanged
 	});
 	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
 		value: normalizeToHex(stringValue),
-		onChange
+		onChange: commitIfChanged
 	});
 	if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
 		value: parseDateValue(stringValue),
@@ -987,7 +1068,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1006,7 +1087,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1019,9 +1100,7 @@ const Field = ({ binding, onNodeChange }) => {
 			children: [/* @__PURE__ */ jsx(Select, {
 				value: stringValue,
 				options: ICON_OPTIONS,
-				onChange: (next) => {
-					if (next !== value) onChange(next);
-				}
+				onChange: commitIfChanged
 			}), SelectedIcon && /* @__PURE__ */ jsx(SelectedIcon, {
 				size: 18,
 				className: "shrink-0"
@@ -1049,7 +1128,7 @@ const Field = ({ binding, onNodeChange }) => {
 							return;
 						}
 						setValidationError(null);
-						if (next !== value) onChange(next);
+						commitIfChanged(next);
 					}
 				}),
 				/* @__PURE__ */ jsx(Upload, {
@@ -1059,7 +1138,7 @@ const Field = ({ binding, onNodeChange }) => {
 					defaultValue: defaultUploadValue,
 					onChange: (files) => {
 						const next = files[0]?.url ?? "";
-						if (next !== value) onChange(next);
+						commitIfChanged(next);
 					}
 				}),
 				validationError && /* @__PURE__ */ jsx("p", {
@@ -1083,7 +1162,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== value) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1102,7 +1181,7 @@ const Field = ({ binding, onNodeChange }) => {
 				return;
 			}
 			setValidationError(null);
-			if (next !== rawValue) onChange(next);
+			commitIfChanged(next);
 		}
 	}), validationError && /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-red-500",
@@ -1131,7 +1210,7 @@ const FieldGroup = ({ bindings, onNodeChange }) => /* @__PURE__ */ jsx("div", {
 				binding,
 				onNodeChange
 			})]
-		}, binding.label))
+		}, `${binding.property}-${binding.label}`))
 	})
 });
 //#endregion
@@ -1525,7 +1604,7 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
 	const { code } = usePreview();
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
-	const value = _value || code || DEFAULT_TEMPLATE;
+	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);
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
@@ -1712,4 +1791,4 @@ 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 };
 
-//# sourceMappingURL=dnd-BnXoytb5.js.map
+//# sourceMappingURL=dnd-D90jLjLH.js.map