@jbpark/live-editor 6.0.0 → 6.1.1

package/dist/{dnd-BvjEDo-x.js → dnd-DAGjlJ0_.js}

@@ -1,15 +1,14 @@
-import { C as isJSXElement, D as isJSXIdentifier, E as isJSXFragment, I as isSpreadElement, L as isStringLiteral, N as isObjectExpression, O as isJSXOpeningElement, P as isObjectProperty, S as isJSXAttribute, a as inspectDocument, at as stringLiteral, b as isExpression, ct as traverseFast, d as applyEdits, dt as parseExpression, k as isJSXSpreadAttribute, l as fillIdsFrom, n as fillSectionIds, ot as templateElement, p as nanoid, st as templateLiteral, t as createSectionPreviewCache, u as replaceIds, x as isIdentifier } from "./document-uHqw0mvr.js";
-import { r as DATA_ATTR, s as RESERVED_BINDING_PROPERTIES, t as BINDING_PROP } from "./constants-st9gnJ5g.js";
+import { C as isJSXElement, D as isJSXIdentifier, E as isJSXFragment, I as isSpreadElement, L as isStringLiteral, N as isObjectExpression, O as isJSXOpeningElement, P as isObjectProperty, S as isJSXAttribute, a as inspectDocument, at as stringLiteral, b as isExpression, ct as traverseFast, d as applyEdits, dt as parseExpression, k as isJSXSpreadAttribute, l as fillIdsFrom, n as fillSectionIds, ot as templateElement, p as nanoid, st as templateLiteral, t as createSectionPreviewCache, u as replaceIds, x as isIdentifier } from "./document-MkQGxfry.js";
+import { i as BINDING_PROP, o as DATA_ATTR, u as RESERVED_BINDING_PROPERTIES } from "./editor-caches-DXYXgWeD.js";
 import { i as useLiveMessages } from "./messages-DrINcRdG.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { _ as parseArrayExpression, a as getChildrenSignatures, b as generateCode, c as removeIndices, d as getStructuredValue, f as readNodeBindings, g as isLosslesslyEvaluable, h as extractObjectProperties, i as valueToExpression, l as findEditableChildren, m as extractNodeValue, n as updateAll, o as extract, p as canLosslesslyEvaluateSource, r as createNodeFromValue, s as moveSelectedIndices, u as getCurrentValue, v as parseValue } from "./update-BuYQJqjq.js";
-import { t as cn } from "./cn-CAnad2vL.js";
-import { r as preloadScripts } from "./compile-my0AjsCw.js";
-import { a as replaceSections, i as generateSection, r as extractSections } from "./sections-DhH_aVf5.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-CySnDUs2.js";
-import { a as renderStableComponent, n as useCompiledModule, o as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-B3l1qZRW.js";
-import { i as getFieldKind, n as FieldIdsContext, o as FieldError, r as LABELABLE_KINDS, s as fields_module_default, t as useFieldState } from "./use-field-state-iQGW0vc6.js";
-import { t as Core } from "./core-BNVuH8-l.js";
+import { C as parseValue, S as parseArrayExpression, T as generateCode, _ as setEditableValue, a as getChildrenSignatures, b as extractObjectProperties, c as removeIndices, d as getStructuredValue, f as readNodeBindings, g as setEditableSource, h as isEditablePrimitive, i as valueToExpression, l as findEditableChildren, m as getEditableSource, n as updateAll, o as extract, r as createNodeFromValue, s as moveSelectedIndices, u as getCurrentValue, v as canLosslesslyEvaluateSource, w as assertJsxParses, x as isLosslesslyEvaluable, y as extractNodeValue } from "./update-DnX2ibYn.js";
+import { a as cn, r as preloadScripts } from "./compile-BWZ5U59y.js";
+import { a as replaceSections, i as generateSection, r as extractSections } from "./sections-CnG7OLr8.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-CLMNMZFa.js";
+import { a as renderStableComponent, n as useCompiledModule, o as Frame, s as useIsClient, t as useDynamicTailwind } from "./use-dynamic-tailwind-CjXeHjsr.js";
+import { i as getFieldKind, n as FieldIdsContext, o as FieldError, r as LABELABLE_KINDS, s as fields_module_default, t as useFieldState } from "./use-field-state-B1VLhWfr.js";
+import { t as Core } from "./core-BfJwD8Jx.js";
 import { Children, createContext, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -1092,8 +1091,9 @@ const SectionFallback = ({ args, builtin }) => {
 };
 //#endregion
 //#region src/components/dnd/canvas/renderer.tsx
-const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, headers, modules, frame, dynamicTailwind = false, provider }) => {
-	const module = useCompiledModule(forceFallback ? "" : preview, modules);
+const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = preview, forceFallback = false, componentProps, modules, frame, dynamicTailwind = false, provider }) => {
+	const isClient = useIsClient();
+	const module = useCompiledModule(forceFallback || !isClient ? "" : preview, modules);
 	const section = {
 		id: sectionId,
 		name: sectionName,
@@ -1152,7 +1152,7 @@ const Renderer = ({ preview, sectionId = "", sectionName = "", sectionCode = pre
 					})
 				}),
 				children: renderProvider(/* @__PURE__ */ jsxs(Fragment, { children: [renderStableComponent(Component, preview, {
-					headers,
+					...componentProps,
 					container
 				}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })] }))
 			})
@@ -1174,25 +1174,29 @@ const sameFrame = (a, b) => {
 	return [.../* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])].every((key) => sameValue(a[key], b[key]));
 };
 const arePropsEqual = (prev, next) => {
-	return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => key === "frame" ? sameFrame(prev.frame, next.frame) : Object.is(prev[key], next[key]));
+	return [.../* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)])].every((key) => {
+		if (key === "frame") return sameFrame(prev.frame, next.frame);
+		if (key === "componentProps") return sameValue(prev.componentProps, next.componentProps);
+		return Object.is(prev[key], next[key]);
+	});
 };
 var renderer_default = memo(Renderer, arePropsEqual);
 //#endregion
-//#region src/components/dnd/button.module.css
+//#region src/components/chrome/button.module.css
 var button_module_default = {
-	"button": "_49iObG_button",
-	"circle": "_49iObG_circle",
-	"danger": "_49iObG_danger",
-	"iconOnly": "_49iObG_iconOnly",
-	"outlined": "_49iObG_outlined",
-	"primary": "_49iObG_primary",
-	"small": "_49iObG_small",
-	"solid": "_49iObG_solid",
-	"success": "_49iObG_success",
-	"text": "_49iObG_text"
+	"button": "d70MaW_button",
+	"circle": "d70MaW_circle",
+	"danger": "d70MaW_danger",
+	"iconOnly": "d70MaW_iconOnly",
+	"outlined": "d70MaW_outlined",
+	"primary": "d70MaW_primary",
+	"small": "d70MaW_small",
+	"solid": "d70MaW_solid",
+	"success": "d70MaW_success",
+	"text": "d70MaW_text"
 };
 //#endregion
-//#region src/components/dnd/button.tsx
+//#region src/components/chrome/button.tsx
 const Button = ({ variant = "outlined", tone = "neutral", size = "middle", shape = "default", icon, className, children, ...restProps }) => /* @__PURE__ */ jsxs("button", {
 	type: "button",
 	className: cn(button_module_default.button, button_module_default[variant], tone !== "neutral" && button_module_default[tone], size === "small" && button_module_default.small, shape === "circle" && button_module_default.circle, icon && !children && button_module_default.iconOnly, className),
@@ -1234,6 +1238,16 @@ const Sortable = ({ id, children, selected, onClick, onDelete, onCopy, onMoveUp,
 			onClick?.();
 			return;
 		}
+		if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown") && handlers) {
+			e.preventDefault();
+			handlers.onMoveKey(id, e.key === "ArrowUp" ? "up" : "down");
+			return;
+		}
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "d" && handlers) {
+			e.preventDefault();
+			handlers.onCopyKey(id);
+			return;
+		}
 		const to = NAVIGATION_KEYS[e.key];
 		if (to && handlers) {
 			e.preventDefault();
@@ -1325,22 +1339,23 @@ const Overlay = ({ sections, isForced, renderProps }) => {
 				forceFallback: isForced?.(section) ?? false,
 				modules: renderProps.modules,
 				frame: renderProps.frame,
-				dynamicTailwind: renderProps.dynamicTailwind
+				dynamicTailwind: renderProps.dynamicTailwind,
+				componentProps: renderProps.componentProps
 			})
 		});
 	}
 	return null;
 };
 //#endregion
-//#region src/components/dnd/toast.module.css
+//#region src/components/chrome/toast.module.css
 var toast_module_default = {
-	"description": "YlF_3q_description",
-	"region": "YlF_3q_region",
-	"title": "YlF_3q_title",
-	"toast": "YlF_3q_toast"
+	"description": "zcJzfW_description",
+	"region": "zcJzfW_region",
+	"title": "zcJzfW_title",
+	"toast": "zcJzfW_toast"
 };
 //#endregion
-//#region src/components/dnd/toast.ts
+//#region src/components/chrome/toast.ts
 const TOAST_DURATION = 6e3;
 let region = null;
 const getRegion = () => {
@@ -1436,17 +1451,17 @@ const viewportRect = (element) => {
 	return new DOMRect(x, y, rect.width, rect.height);
 };
 //#endregion
-//#region src/components/dnd/drawer.module.css
+//#region src/components/chrome/drawer.module.css
 var drawer_module_default = {
-	"body": "_ty1rG_body",
-	"content": "_ty1rG_content",
-	"drawer": "_ty1rG_drawer",
-	"header": "_ty1rG_header",
-	"slide-up": "_ty1rG_slide-up",
-	"title": "_ty1rG_title"
+	"body": "SoEwJW_body",
+	"content": "SoEwJW_content",
+	"drawer": "SoEwJW_drawer",
+	"header": "SoEwJW_header",
+	"slide-up": "SoEwJW_slide-up",
+	"title": "SoEwJW_title"
 };
 //#endregion
-//#region src/components/dnd/drawer.tsx
+//#region src/components/chrome/drawer.tsx
 const Drawer = ({ open, title, closeLabel, onClose, children }) => {
 	const titleId = useId();
 	const dialogRef = useRef(null);
@@ -1495,6 +1510,121 @@ const Drawer = ({ open, title, closeLabel, onClose, children }) => {
 	});
 };
 //#endregion
+//#region src/components/chrome/split-panes.module.css
+var split_panes_module_default = {
+	"center": "Z4yoxa_center",
+	"container": "Z4yoxa_container",
+	"handle": "Z4yoxa_handle",
+	"pane": "Z4yoxa_pane"
+};
+//#endregion
+//#region src/components/chrome/split-panes.tsx
+const DEFAULT_SIZE = 20;
+const MIN_SIZE = 15;
+const MAX_SIZE = 35;
+const KEYBOARD_STEP = 2;
+const clampSize = (size) => {
+	if (size < MIN_SIZE / 2) return 0;
+	return Math.min(MAX_SIZE, Math.max(MIN_SIZE, size));
+};
+const SplitPanes = ({ start, center, end, labels }) => {
+	const containerRef = useRef(null);
+	const [sizes, setSizes] = useState({
+		start: DEFAULT_SIZE,
+		end: DEFAULT_SIZE
+	});
+	const restoreRef = useRef({
+		start: DEFAULT_SIZE,
+		end: DEFAULT_SIZE
+	});
+	const resize = (side, size) => {
+		if (size > 0) restoreRef.current[side] = size;
+		setSizes((prev) => ({
+			...prev,
+			[side]: size
+		}));
+	};
+	const onPointerDown = (side) => (e) => {
+		const container = containerRef.current;
+		if (!container || e.button !== 0) return;
+		e.preventDefault();
+		const handle = e.currentTarget;
+		const width = container.getBoundingClientRect().width;
+		const startX = e.clientX;
+		const startSize = sizes[side];
+		handle.setPointerCapture(e.pointerId);
+		const onMove = (move) => {
+			const delta = (move.clientX - startX) / width * 100;
+			resize(side, clampSize(startSize + (side === "start" ? delta : -delta)));
+		};
+		const onUp = () => {
+			handle.removeEventListener("pointermove", onMove);
+			handle.removeEventListener("pointerup", onUp);
+			handle.removeEventListener("pointercancel", onUp);
+		};
+		handle.addEventListener("pointermove", onMove);
+		handle.addEventListener("pointerup", onUp);
+		handle.addEventListener("pointercancel", onUp);
+	};
+	const onKeyDown = (side) => (e) => {
+		const grow = side === "start" ? "ArrowRight" : "ArrowLeft";
+		const shrink = side === "start" ? "ArrowLeft" : "ArrowRight";
+		const size = sizes[side];
+		if (e.key === grow || e.key === shrink) {
+			e.preventDefault();
+			const step = e.key === grow ? KEYBOARD_STEP : -2;
+			resize(side, Math.min(MAX_SIZE, Math.max(MIN_SIZE, size + step)));
+			return;
+		}
+		if (e.key === "Home" || e.key === "End") {
+			e.preventDefault();
+			resize(side, e.key === "Home" ? MIN_SIZE : MAX_SIZE);
+			return;
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			resize(side, size > 0 ? 0 : restoreRef.current[side]);
+		}
+	};
+	const handle = (side) => /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		tabIndex: 0,
+		"aria-orientation": "vertical",
+		"aria-label": labels[side],
+		"aria-valuenow": Math.round(sizes[side]),
+		"aria-valuemin": 0,
+		"aria-valuemax": MAX_SIZE,
+		className: split_panes_module_default.handle,
+		onPointerDown: onPointerDown(side),
+		onKeyDown: onKeyDown(side),
+		onDoubleClick: () => resize(side, sizes[side] > 0 ? 0 : restoreRef.current[side])
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: split_panes_module_default.container,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.pane,
+				style: { flexBasis: `${sizes.start}%` },
+				hidden: sizes.start === 0,
+				children: start
+			}),
+			handle("start"),
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.center,
+				children: center
+			}),
+			handle("end"),
+			/* @__PURE__ */ jsx("div", {
+				className: split_panes_module_default.pane,
+				style: { flexBasis: `${sizes.end}%` },
+				hidden: sizes.end === 0,
+				children: end
+			})
+		]
+	});
+};
+//#endregion
 //#region src/components/dnd/layout-context.ts
 const DndRegionContext = createContext(null);
 const useDndRegions = (subject) => {
@@ -2016,10 +2146,14 @@ const ColorField = ({ value: source, onChange, ...controlProps }) => {
 //#endregion
 //#region src/components/dnd/panel/fields/jsx-editor-field.tsx
 const JSXEditorField = ({ value, isHTML, onSave }) => {
+	const onSaveRef = useLatest(onSave);
+	const wrapperRef = useRef(null);
 	const selectionRef = useRef(null);
 	const focusedRef = useRef(false);
+	const textRef = useRef(value);
 	const handleUpdate = useCallback((update) => {
 		selectionRef.current = update.state.selection;
+		if (update.docChanged) textRef.current = update.state.doc.toString();
 	}, []);
 	const handleCreateEditor = useCallback((view) => {
 		if (selectionRef.current) view.dispatch({ selection: selectionRef.current });
@@ -2030,8 +2164,14 @@ const JSXEditorField = ({ value, isHTML, onSave }) => {
 	}, []);
 	const handleBlur = useCallback((event) => {
 		if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) focusedRef.current = false;
-	}, []);
+		setTimeout(() => {
+			const wrapper = wrapperRef.current;
+			if (!wrapper || wrapper.contains(document.activeElement)) return;
+			onSaveRef.current(textRef.current);
+		}, 0);
+	}, [onSaveRef]);
 	return /* @__PURE__ */ jsx("div", {
+		ref: wrapperRef,
 		onFocusCapture: handleFocus,
 		onBlurCapture: handleBlur,
 		children: /* @__PURE__ */ jsx(Core, {
@@ -2955,6 +3095,15 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 	});
 	if (kind === "object") {
 		const objectValue = value;
+		const commitKey = (key, next) => {
+			const current = objectValue[key];
+			if (Object.is(next, current)) return;
+			const edited = isEditablePrimitive(next) && isEditablePrimitive(current) ? setEditableValue(rawValue, [key], next) : typeof next === "string" && typeof current === "object" && current !== null ? setEditableSource(rawValue, [key], next) : null;
+			onChange(edited !== null && edited !== rawValue ? edited : {
+				...objectValue,
+				[key]: next
+			});
+		};
 		return /* @__PURE__ */ jsx("div", {
 			className: fields_module_default.object,
 			children: Object.entries(objectValue).map(([key, val]) => {
@@ -2973,13 +3122,8 @@ const BuiltinField = ({ binding, onNodeChange }) => {
 								...toBindingFields(nested),
 								id,
 								value: val,
-								rawValue: typeof val === "object" && val !== null ? JSON.stringify(val) : String(val),
-								onChange: (next) => {
-									onChange({
-										...objectValue,
-										[key]: next
-									});
-								}
+								rawValue: typeof val === "object" && val !== null ? getEditableSource(rawValue, [key]) ?? JSON.stringify(val) : String(val),
+								onChange: (next) => commitKey(key, next)
 							},
 							onNodeChange
 						})
@@ -3249,121 +3393,6 @@ const Panel$1 = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canM
 	});
 };
 //#endregion
-//#region src/components/dnd/split-panes.module.css
-var split_panes_module_default = {
-	"center": "s-4F9W_center",
-	"container": "s-4F9W_container",
-	"handle": "s-4F9W_handle",
-	"pane": "s-4F9W_pane"
-};
-//#endregion
-//#region src/components/dnd/split-panes.tsx
-const DEFAULT_SIZE = 20;
-const MIN_SIZE = 15;
-const MAX_SIZE = 35;
-const KEYBOARD_STEP = 2;
-const clampSize = (size) => {
-	if (size < MIN_SIZE / 2) return 0;
-	return Math.min(MAX_SIZE, Math.max(MIN_SIZE, size));
-};
-const SplitPanes = ({ start, center, end, labels }) => {
-	const containerRef = useRef(null);
-	const [sizes, setSizes] = useState({
-		start: DEFAULT_SIZE,
-		end: DEFAULT_SIZE
-	});
-	const restoreRef = useRef({
-		start: DEFAULT_SIZE,
-		end: DEFAULT_SIZE
-	});
-	const resize = (side, size) => {
-		if (size > 0) restoreRef.current[side] = size;
-		setSizes((prev) => ({
-			...prev,
-			[side]: size
-		}));
-	};
-	const onPointerDown = (side) => (e) => {
-		const container = containerRef.current;
-		if (!container || e.button !== 0) return;
-		e.preventDefault();
-		const handle = e.currentTarget;
-		const width = container.getBoundingClientRect().width;
-		const startX = e.clientX;
-		const startSize = sizes[side];
-		handle.setPointerCapture(e.pointerId);
-		const onMove = (move) => {
-			const delta = (move.clientX - startX) / width * 100;
-			resize(side, clampSize(startSize + (side === "start" ? delta : -delta)));
-		};
-		const onUp = () => {
-			handle.removeEventListener("pointermove", onMove);
-			handle.removeEventListener("pointerup", onUp);
-			handle.removeEventListener("pointercancel", onUp);
-		};
-		handle.addEventListener("pointermove", onMove);
-		handle.addEventListener("pointerup", onUp);
-		handle.addEventListener("pointercancel", onUp);
-	};
-	const onKeyDown = (side) => (e) => {
-		const grow = side === "start" ? "ArrowRight" : "ArrowLeft";
-		const shrink = side === "start" ? "ArrowLeft" : "ArrowRight";
-		const size = sizes[side];
-		if (e.key === grow || e.key === shrink) {
-			e.preventDefault();
-			const step = e.key === grow ? KEYBOARD_STEP : -2;
-			resize(side, Math.min(MAX_SIZE, Math.max(MIN_SIZE, size + step)));
-			return;
-		}
-		if (e.key === "Home" || e.key === "End") {
-			e.preventDefault();
-			resize(side, e.key === "Home" ? MIN_SIZE : MAX_SIZE);
-			return;
-		}
-		if (e.key === "Enter") {
-			e.preventDefault();
-			resize(side, size > 0 ? 0 : restoreRef.current[side]);
-		}
-	};
-	const handle = (side) => /* @__PURE__ */ jsx("div", {
-		role: "separator",
-		tabIndex: 0,
-		"aria-orientation": "vertical",
-		"aria-label": labels[side],
-		"aria-valuenow": Math.round(sizes[side]),
-		"aria-valuemin": 0,
-		"aria-valuemax": MAX_SIZE,
-		className: split_panes_module_default.handle,
-		onPointerDown: onPointerDown(side),
-		onKeyDown: onKeyDown(side),
-		onDoubleClick: () => resize(side, sizes[side] > 0 ? 0 : restoreRef.current[side])
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref: containerRef,
-		className: split_panes_module_default.container,
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: split_panes_module_default.pane,
-				style: { flexBasis: `${sizes.start}%` },
-				hidden: sizes.start === 0,
-				children: start
-			}),
-			handle("start"),
-			/* @__PURE__ */ jsx("div", {
-				className: split_panes_module_default.center,
-				children: center
-			}),
-			handle("end"),
-			/* @__PURE__ */ jsx("div", {
-				className: split_panes_module_default.pane,
-				style: { flexBasis: `${sizes.end}%` },
-				hidden: sizes.end === 0,
-				children: end
-			})
-		]
-	});
-};
-//#endregion
 //#region src/components/dnd/layout.tsx
 const PaletteItems = ({ subject }) => {
 	const { palette: { items, onAdd }, isMobile } = useDndRegions(subject);
@@ -3605,7 +3634,7 @@ const createNodeRegistry = () => {
 		}
 	};
 };
-const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move, requestDelete }) => {
+const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move, copy, requestDelete }) => {
 	const { announcements: say } = useLiveMessages();
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }), useSensor(KeyboardSensor, {
 		coordinateGetter: sortableKeyboardCoordinates,
@@ -3643,6 +3672,23 @@ const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move,
 		move(id, direction);
 		if (to === 0 || to === sections.length - 1) focusSection(id);
 	};
+	const focusSelectedRef = useRef(false);
+	const onMoveKey = (id, direction) => {
+		const to = sections.findIndex((section) => section.id === id) + (direction === "up" ? -1 : 1);
+		if (to < 0 || to >= sections.length) return;
+		selectOnly(id);
+		move(id, direction);
+		focusSelectedRef.current = true;
+	};
+	const onCopyKey = (id) => {
+		copy(id);
+		focusSelectedRef.current = true;
+	};
+	useEffect(() => {
+		if (!focusSelectedRef.current || selectedId === null) return;
+		focusSelectedRef.current = false;
+		focusSection(selectedId);
+	});
 	useEffect(() => {
 		if (selectedId === null) return;
 		const frame = requestAnimationFrame(() => {
@@ -3661,6 +3707,8 @@ const useDndKeyboard = ({ sections, selectedId, selectedIndex, selectOnly, move,
 		sectionNodes,
 		onNavigate,
 		onDeleteKey,
+		onMoveKey,
+		onCopyKey,
 		onMoveButton
 	};
 };
@@ -3942,6 +3990,24 @@ const useSectionEditing = ({ selectedSection, stale, problem, missingContainer,
 			});
 			return;
 		}
+		try {
+			assertJsxParses(result.code);
+		} catch (error) {
+			const { id, label, property } = changes[0];
+			const failure = {
+				reason: "parse-error",
+				error
+			};
+			reportError({
+				type: "update",
+				id,
+				label,
+				property,
+				failure,
+				...describeUpdateFailure(failure, label, messages)
+			});
+			return;
+		}
 		if (selectedSection) onChange({
 			...selectedSection,
 			code: result.code
@@ -3981,6 +4047,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 	const modules = useStableValue(_modules);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
+	const dndContextId = useId();
 	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
 	const { code } = usePreview();
 	const isForced = (section) => {
@@ -4017,12 +4084,13 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		onBeforeDelete
 	});
 	const onDelete = (id) => requestDelete(id);
-	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveButton } = useDndKeyboard({
+	const { sensors, announcements, screenReaderInstructions, sectionNodes, onNavigate, onDeleteKey, onMoveKey, onCopyKey, onMoveButton } = useDndKeyboard({
 		sections,
 		selectedId,
 		selectedIndex,
 		selectOnly,
 		move: moveSection,
+		copy: onCopy,
 		requestDelete
 	});
 	const { inspector, inspecting, onInspectMove, onInspectPick, onInspectLeave, highlightRect } = useInspectorState({
@@ -4082,7 +4150,9 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 		onInspectLeave,
 		nodeRef: sectionNodes.register,
 		onNavigate,
-		onDeleteKey
+		onDeleteKey,
+		onMoveKey,
+		onCopyKey
 	};
 	const canvas = /* @__PURE__ */ jsxs(SectionHandlersContext.Provider, {
 		value: sectionHandlers,
@@ -4121,7 +4191,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 							frame,
 							dynamicTailwind,
 							provider,
-							...props
+							componentProps: props
 						})
 					}, section.id))
 				})
@@ -4132,6 +4202,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 	return /* @__PURE__ */ jsx(SectionFallbackContext.Provider, {
 		value: renderSectionFallback,
 		children: /* @__PURE__ */ jsxs(DndContext, {
+			id: dndContextId,
 			sensors,
 			collisionDetection: closestCenter,
 			accessibility: {
@@ -4175,7 +4246,7 @@ const Dnd$1 = ({ value: _value, props, modules: _modules = NO_MODULES, onChange:
 					modules,
 					frame,
 					dynamicTailwind,
-					...props,
+					componentProps: props,
 					containerId
 				}
 			}) })]
@@ -4194,4 +4265,4 @@ Dnd.Layout = Layout;
 //#endregion
 export { Panel as a, useDndChildren as c, useDndLayout as d, useDndPalette as f, DraggableItem as h, Palette as i, resolvePanelBindings as l, useDndInspector as m, Canvas as n, Field as o, useDndPanel as p, Layout as r, useDndItems as s, Dnd as t, withPanelCommit as u };
 
-//# sourceMappingURL=dnd-BvjEDo-x.js.map
+//# sourceMappingURL=dnd-DAGjlJ0_.js.map