@dragcraft/designer 0.0.1

package/dist/index.mjs

@@ -0,0 +1,2228 @@
+import { CommandType, CommandType as CommandType$1, DEFAULT_LAYOUT_REGION, DEFAULT_SORT_SCOPE, EventName, buildSchemaIndex, clampInsertIndex, createContainerPlan, createEngine, createEngine as createEngine$1, createLayoutPlan, findNearestValidIndex, getLockedIndices, getLockedIndicesFromNodes, getSortScopeEntries, getValidDropIndices, resolveBehavior, resolveCreatable, resolveCreatable as resolveCreatable$1, resolveDestination, resolveNodeLayout, resolvePlacementDecision } from "@dragcraft/core";
+import { ActionKey, ActionKey as ActionKey$1, ContainerRegionOutlet, DefaultEmptyState, DefaultNodeHandle, DefaultNodeMask, DefaultNodeToolbar, RootRenderer, RootRenderer as RootRenderer$1, createConfirmActionInterceptor, createDefaultActions, createDefaultActions as createDefaultActions$1, createNodeActionRegistry, createNodeActionRegistry as createNodeActionRegistry$1, hideNativeDragImage, rendererMessages, useContainerRuntime, useNodeActions, useNodeDrag, useNodeInteractionGeometry, useWidgetNode } from "@dragcraft/renderer";
+import { computed, defineComponent, h, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
+import { I18N_KEY, I18N_KEY as I18N_KEY$1, createI18n, createI18n as createI18n$1, useI18n, useI18n as useI18n$1 } from "@dragcraft/i18n";
+import { IconCenter, IconChevronDown, IconChevronLeft, IconChevronRight, IconClose, IconGlobalConfig, IconHand, IconMaterial, IconPointer, IconProperties, IconRedo, IconSearch, IconStructureTree, IconUndo } from "@dragcraft/icons";
+import { cloneDeep, generateShortId } from "@dragcraft/utils";
+import { FormGenerator, FormGenerator as FormGenerator$1 } from "@dragcraft/form-generator";
+//#region src/bindings/field-binding.ts
+const BLOCKED_PATH_SEGMENTS = /* @__PURE__ */ new Set([
+	"__proto__",
+	"prototype",
+	"constructor"
+]);
+function toPathSegments(path) {
+	return path.split(".").map((segment) => segment.trim()).filter(Boolean);
+}
+function isSafePath(path) {
+	return toPathSegments(path).every((segment) => !BLOCKED_PATH_SEGMENTS.has(segment));
+}
+function safePathSegments(path) {
+	if (!isSafePath(path)) return [];
+	return toPathSegments(path);
+}
+function splitHead(path) {
+	const [head, ...rest] = safePathSegments(path);
+	return [head, rest.join(".")];
+}
+function setPatchPath(path, value) {
+	const segments = safePathSegments(path);
+	if (segments.length === 0) return null;
+	const root = {};
+	let cursor = root;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const next = {};
+		cursor[segments[i]] = next;
+		cursor = next;
+	}
+	cursor[segments[segments.length - 1]] = value;
+	return root;
+}
+function resolveFieldBinding(binding, fallback) {
+	if (typeof binding === "string") return {
+		scope: fallback.scope,
+		path: binding
+	};
+	if (binding) return {
+		scope: binding.scope ?? fallback.scope,
+		path: binding.path
+	};
+	return fallback;
+}
+function readPath(source, path) {
+	if (!isSafePath(path)) return void 0;
+	let current = source;
+	for (const segment of toPathSegments(path)) {
+		if (typeof current !== "object" || current === null) return void 0;
+		current = current[segment];
+	}
+	return current;
+}
+function readBindingValue(binding, schema, node) {
+	if (binding.scope === "container") return node && binding.path === "variant" ? node.container?.variant : void 0;
+	if (binding.scope === "globalConfig") return readPath(schema.globalConfig, binding.path);
+	if (binding.scope === "schema") return readPath(schema, binding.path);
+	return node ? readPath(node, binding.path) : void 0;
+}
+function createNodeBindingCommand(nodeId, path, value) {
+	const [head, rest] = splitHead(path);
+	if (head === "props") {
+		const props = setPatchPath(rest, value);
+		return props ? {
+			type: CommandType$1.UPDATE_PROPS,
+			payload: {
+				nodeId,
+				props
+			}
+		} : null;
+	}
+	if (head === "style") {
+		const style = setPatchPath(rest, value);
+		return style ? {
+			type: CommandType$1.UPDATE_PROPS,
+			payload: {
+				nodeId,
+				props: {},
+				style
+			}
+		} : null;
+	}
+	return null;
+}
+function createBindingCommand(binding, value, nodeId) {
+	if (!isSafePath(binding.path)) return null;
+	if (binding.scope === "container") {
+		if (!nodeId || binding.path !== "variant" || typeof value !== "string") return null;
+		return {
+			type: CommandType$1.CHANGE_CONTAINER_VARIANT,
+			payload: {
+				containerId: nodeId,
+				variant: value
+			}
+		};
+	}
+	if (binding.scope === "globalConfig") {
+		const config = setPatchPath(binding.path, value);
+		return config ? {
+			type: CommandType$1.SET_GLOBAL_CONFIG,
+			payload: { config }
+		} : null;
+	}
+	if (binding.scope === "schema") {
+		const [head, rest] = splitHead(binding.path);
+		if (head === "globalConfig") {
+			const config = setPatchPath(rest, value);
+			return config ? {
+				type: CommandType$1.SET_GLOBAL_CONFIG,
+				payload: { config }
+			} : null;
+		}
+		if (head === "root") return createNodeBindingCommand("root", rest, value);
+		return null;
+	}
+	return nodeId ? createNodeBindingCommand(nodeId, binding.path, value) : null;
+}
+//#endregion
+//#region src/composables/useCanvasPan.ts
+const EDITABLE_SELECTOR$1 = "input, textarea, select, [contenteditable=\"true\"], [contenteditable=\"\"]";
+function isEditableTarget$1(target) {
+	return target instanceof Element && Boolean(target.closest(EDITABLE_SELECTOR$1));
+}
+function resolvePixelCorrection(value, devicePixelRatio) {
+	const ratio = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
+	const correction = Math.floor(value * ratio + .5 - 1e-7) / ratio - value;
+	return Math.abs(correction) < 1e-7 ? 0 : correction;
+}
+function resolveCanvasStagePixelSnap(geometry, devicePixelRatio) {
+	const left = geometry.viewport.left + (geometry.viewport.width - geometry.stage.width) / 2 + geometry.offset.x;
+	const top = geometry.viewport.top + (geometry.viewport.height - geometry.stage.height) / 2 + geometry.offset.y;
+	return {
+		x: resolvePixelCorrection(left, devicePixelRatio),
+		y: resolvePixelCorrection(top, devicePixelRatio)
+	};
+}
+function useCanvasPan(viewportRef, stageRef) {
+	const mode = ref("pointer");
+	const offset = ref({
+		x: 0,
+		y: 0
+	});
+	const pixelSnap = ref({
+		x: 0,
+		y: 0
+	});
+	const spacePressed = ref(false);
+	const isPanning = ref(false);
+	const pointerInside = ref(false);
+	const panEnabled = computed(() => mode.value === "hand" || spacePressed.value);
+	let pointerId = null;
+	let startX = 0;
+	let startY = 0;
+	let startOffsetX = 0;
+	let startOffsetY = 0;
+	let suppressClick = false;
+	let resizeObserver = null;
+	let pixelSnapFrame = null;
+	function updatePixelSnap() {
+		const viewport = viewportRef.value;
+		const stage = stageRef.value;
+		if (!viewport || !stage) return;
+		const viewportRect = viewport.getBoundingClientRect();
+		const stageRect = stage.getBoundingClientRect();
+		const next = resolveCanvasStagePixelSnap({
+			viewport: {
+				left: viewportRect.left,
+				top: viewportRect.top,
+				width: viewportRect.width,
+				height: viewportRect.height
+			},
+			stage: {
+				width: stageRect.width,
+				height: stageRect.height
+			},
+			offset: offset.value
+		}, window.devicePixelRatio);
+		if (next.x !== pixelSnap.value.x || next.y !== pixelSnap.value.y) pixelSnap.value = next;
+	}
+	function schedulePixelSnap() {
+		if (pixelSnapFrame !== null) return;
+		pixelSnapFrame = window.requestAnimationFrame(() => {
+			pixelSnapFrame = null;
+			updatePixelSnap();
+		});
+	}
+	function observePixelGeometry(viewport, stage) {
+		resizeObserver?.disconnect();
+		if (viewport) resizeObserver?.observe(viewport);
+		if (stage) resizeObserver?.observe(stage);
+		schedulePixelSnap();
+	}
+	function setMode(nextMode) {
+		mode.value = nextMode;
+	}
+	function reset() {
+		offset.value = {
+			x: 0,
+			y: 0
+		};
+	}
+	function handleWindowKeydown(event) {
+		const viewport = viewportRef.value;
+		const focusedInside = viewport != null && document.activeElement != null && viewport.contains(document.activeElement);
+		if (event.code !== "Space" || isEditableTarget$1(event.target) || !pointerInside.value && !focusedInside) return;
+		event.preventDefault();
+		spacePressed.value = true;
+	}
+	function handleWindowKeyup(event) {
+		if (event.code !== "Space") return;
+		spacePressed.value = false;
+	}
+	function resetTemporaryMode() {
+		spacePressed.value = false;
+		isPanning.value = false;
+		pointerId = null;
+	}
+	function handlePointerEnter() {
+		pointerInside.value = true;
+	}
+	function handlePointerLeave() {
+		pointerInside.value = false;
+	}
+	function handlePointerDown(event) {
+		const viewport = viewportRef.value;
+		if (!viewport || !panEnabled.value || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		pointerId = event.pointerId;
+		startX = event.clientX;
+		startY = event.clientY;
+		startOffsetX = offset.value.x;
+		startOffsetY = offset.value.y;
+		suppressClick = true;
+		isPanning.value = true;
+		viewport.setPointerCapture?.(event.pointerId);
+	}
+	function handlePointerMove(event) {
+		if (!viewportRef.value || pointerId !== event.pointerId) return;
+		event.preventDefault();
+		event.stopPropagation();
+		offset.value = {
+			x: startOffsetX + event.clientX - startX,
+			y: startOffsetY + event.clientY - startY
+		};
+	}
+	function handlePointerUp(event) {
+		const viewport = viewportRef.value;
+		if (!viewport || pointerId !== event.pointerId) return;
+		event.preventDefault();
+		event.stopPropagation();
+		viewport.releasePointerCapture?.(event.pointerId);
+		pointerId = null;
+		isPanning.value = false;
+	}
+	function handleClickCapture(event) {
+		if (!panEnabled.value && !suppressClick) return;
+		event.preventDefault();
+		event.stopPropagation();
+		suppressClick = false;
+	}
+	onMounted(() => {
+		window.addEventListener("keydown", handleWindowKeydown);
+		window.addEventListener("keyup", handleWindowKeyup);
+		window.addEventListener("blur", resetTemporaryMode);
+		window.addEventListener("resize", schedulePixelSnap);
+		if (typeof ResizeObserver !== "undefined") resizeObserver = new ResizeObserver(schedulePixelSnap);
+		observePixelGeometry(viewportRef.value, stageRef.value);
+	});
+	onBeforeUnmount(() => {
+		window.removeEventListener("keydown", handleWindowKeydown);
+		window.removeEventListener("keyup", handleWindowKeyup);
+		window.removeEventListener("blur", resetTemporaryMode);
+		window.removeEventListener("resize", schedulePixelSnap);
+		resizeObserver?.disconnect();
+		if (pixelSnapFrame !== null) window.cancelAnimationFrame(pixelSnapFrame);
+	});
+	watch([viewportRef, stageRef], ([viewport, stage]) => {
+		observePixelGeometry(viewport, stage);
+	}, { flush: "post" });
+	watch(offset, schedulePixelSnap, { flush: "sync" });
+	return {
+		mode,
+		offset,
+		pixelSnap,
+		panEnabled,
+		isPanning,
+		setMode,
+		reset,
+		handlePointerEnter,
+		handlePointerLeave,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		handleClickCapture
+	};
+}
+//#endregion
+//#region src/types.ts
+/**
+* Injection key for the designer context.
+*/
+const DESIGNER_CONTEXT_KEY = Symbol("dc-designer");
+//#endregion
+//#region src/context.ts
+/**
+* Injects the DesignerContext from the nearest ancestor DcDesigner.
+* Throws if called outside the designer component tree.
+*/
+function useDesignerContext() {
+	const ctx = inject(DESIGNER_CONTEXT_KEY);
+	if (!ctx) throw new Error("[dragcraft/designer] DesignerContext not found. Ensure this component is a descendant of DcDesigner.");
+	return ctx;
+}
+//#endregion
+//#region src/components/DcCanvasControls.ts
+var DcCanvasControls_default = defineComponent({
+	name: "DcCanvasControls",
+	props: { interactionMode: {
+		type: String,
+		required: true
+	} },
+	emits: {
+		modeChange: (_mode) => true,
+		resetView: () => true
+	},
+	setup(props, { emit }) {
+		const { t } = useI18n$1();
+		const { engine } = useDesignerContext();
+		const renderHistoryButton = (options) => h("button", {
+			"type": "button",
+			"class": "dc-canvas-controls__button",
+			"data-dc-part": "button",
+			"disabled": options.disabled,
+			"title": options.label,
+			"aria-label": options.label,
+			"aria-pressed": options.active,
+			"data-dc-workspace-control": options.key,
+			"onClick": options.onClick
+		}, [h(options.icon, { size: 17 })]);
+		return () => {
+			const history = engine.history.state.value;
+			return h("div", {
+				"class": "dc-canvas-controls",
+				"data-dc-component": "canvas-controls"
+			}, [h("div", {
+				"class": "dc-canvas-controls__history",
+				"data-dc-part": "toolbar",
+				"role": "toolbar",
+				"aria-label": t("workspace.canvas.controls", "画布工具")
+			}, [
+				renderHistoryButton({
+					key: "undo",
+					label: t("workspace.history.undo", "撤销"),
+					icon: IconUndo,
+					disabled: !history.canUndo,
+					onClick: () => engine.history.undo()
+				}),
+				renderHistoryButton({
+					key: "redo",
+					label: t("workspace.history.redo", "重做"),
+					icon: IconRedo,
+					disabled: !history.canRedo,
+					onClick: () => engine.history.redo()
+				}),
+				h("span", {
+					"class": "dc-canvas-controls__divider",
+					"data-dc-part": "divider",
+					"aria-hidden": "true"
+				}),
+				renderHistoryButton({
+					key: "pointer",
+					label: t("workspace.canvas.pointer", "指针模式"),
+					icon: IconPointer,
+					active: props.interactionMode === "pointer",
+					onClick: () => emit("modeChange", "pointer")
+				}),
+				renderHistoryButton({
+					key: "hand",
+					label: t("workspace.canvas.hand", "抓手模式（按住空格）"),
+					icon: IconHand,
+					active: props.interactionMode === "hand",
+					onClick: () => emit("modeChange", "hand")
+				}),
+				h("span", {
+					"class": "dc-canvas-controls__divider",
+					"data-dc-part": "divider",
+					"aria-hidden": "true"
+				}),
+				renderHistoryButton({
+					key: "center",
+					label: t("workspace.canvas.reset", "重置画布位置"),
+					icon: IconCenter,
+					onClick: () => emit("resetView")
+				})
+			])]);
+		};
+	}
+});
+//#endregion
+//#region src/components/DcCanvas.ts
+var DcCanvas_default = defineComponent({
+	name: "DcCanvas",
+	setup() {
+		const { engine, componentMap, extensions, activeDestination, containerDropDecision, dragOverNodeId, dragOverIndex, isForbidden, forbiddenReason, handleCanvasDragOver, handleCanvasDragLeave, handleCanvasDrop, handleContainerDragOver, handleContainerDragLeave, handleContainerDrop, eventHooks, actionInterceptors, actionRegistry } = useDesignerContext();
+		const viewportRef = ref(null);
+		const stageRef = ref(null);
+		const contentRef = ref(null);
+		const hasToolbarBoundary = ref(false);
+		const canvasPan = useCanvasPan(viewportRef, stageRef);
+		let mutationObserver = null;
+		let observedTarget = null;
+		const rendererExtensions = computed(() => ({ ...extensions.rendererExtensions ?? {} }));
+		const handleClick = (event) => {
+			const nodeEl = event.target.closest("[data-node-id]");
+			if (!nodeEl || nodeEl.dataset.nodeId === "root") engine.store.selectNode(null);
+		};
+		const isDragging = computed(() => engine.store.dragTarget.value !== null);
+		function observeCanvasTarget() {
+			const content = contentRef.value;
+			const nextTarget = content?.querySelector("[data-dc-toolbar-boundary]") ?? content?.querySelector(".dc-root-renderer") ?? null;
+			hasToolbarBoundary.value = nextTarget?.hasAttribute("data-dc-toolbar-boundary") ?? false;
+			if (nextTarget && observedTarget && nextTarget !== observedTarget) canvasPan.reset();
+			if (!nextTarget || nextTarget === observedTarget) return;
+			observedTarget = nextTarget;
+		}
+		onMounted(() => {
+			const content = contentRef.value;
+			if (!content) return;
+			if (typeof MutationObserver !== "undefined") {
+				mutationObserver = new MutationObserver(observeCanvasTarget);
+				mutationObserver.observe(content, {
+					childList: true,
+					subtree: true
+				});
+			}
+			nextTick(observeCanvasTarget);
+		});
+		onBeforeUnmount(() => {
+			mutationObserver?.disconnect();
+		});
+		return () => {
+			const themeStates = [
+				isDragging.value ? "dragging" : null,
+				isForbidden.value && isDragging.value ? "forbidden" : null,
+				canvasPan.panEnabled.value ? "hand" : null,
+				canvasPan.isPanning.value ? "panning" : null
+			].filter(Boolean).join(" ") || void 0;
+			return h("div", {
+				"class": ["dc-canvas", {
+					"dc-canvas--dragging": isDragging.value,
+					"dc-canvas--forbidden": isForbidden.value && isDragging.value,
+					"dc-canvas--hand": canvasPan.panEnabled.value,
+					"dc-canvas--panning": canvasPan.isPanning.value
+				}],
+				"data-dc-component": "canvas",
+				"data-dc-state": themeStates
+			}, [
+				h(DcCanvasControls_default, {
+					interactionMode: canvasPan.mode.value,
+					onModeChange: canvasPan.setMode,
+					onResetView: canvasPan.reset
+				}),
+				h("div", {
+					"ref": viewportRef,
+					"class": "dc-canvas__viewport",
+					"data-dc-part": "viewport",
+					"data-dc-interaction-boundary": "",
+					"onDragover": handleCanvasDragOver,
+					"onDragleave": handleCanvasDragLeave,
+					"onDrop": handleCanvasDrop,
+					"onClick": handleClick,
+					"onClickCapture": canvasPan.handleClickCapture,
+					"onPointerdownCapture": canvasPan.handlePointerDown,
+					"onPointerenter": canvasPan.handlePointerEnter,
+					"onPointerleave": canvasPan.handlePointerLeave,
+					"onPointermoveCapture": canvasPan.handlePointerMove,
+					"onPointerupCapture": canvasPan.handlePointerUp,
+					"onPointercancelCapture": canvasPan.handlePointerUp
+				}, [h("div", {
+					"ref": stageRef,
+					"class": "dc-canvas__stage",
+					"data-dc-part": "stage",
+					"data-dc-canvas-stage": "",
+					"style": {
+						"--_dc-canvas-pan-x": `${canvasPan.offset.value.x}px`,
+						"--_dc-canvas-pan-y": `${canvasPan.offset.value.y}px`,
+						"--_dc-canvas-snap-x": `${canvasPan.pixelSnap.value.x}px`,
+						"--_dc-canvas-snap-y": `${canvasPan.pixelSnap.value.y}px`
+					}
+				}, [h("div", {
+					"ref": contentRef,
+					"class": ["dc-canvas__content", { "dc-canvas__content--bounded": hasToolbarBoundary.value }],
+					"data-dc-part": "content"
+				}, [h(RootRenderer$1, {
+					engine,
+					componentMap,
+					extensions: rendererExtensions.value,
+					eventHooks,
+					actionInterceptors,
+					actionRegistry,
+					activeDestination,
+					containerDropDecision,
+					onContainerDragOver: handleContainerDragOver,
+					onContainerDragLeave: handleContainerDragLeave,
+					onContainerDrop: handleContainerDrop,
+					dragOverNodeId,
+					dragOverIndex,
+					isForbidden,
+					forbiddenReason,
+					interactionBoundary: viewportRef
+				})])])]),
+				h("div", {
+					"class": "dc-canvas__interaction-layer",
+					"data-dc-part": "interaction-layer",
+					"data-dc-canvas-interaction-layer": ""
+				})
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/composables/useDragDrop.ts
+/**
+* Coordinates HTML5 Drag and Drop between the material panel (drag source)
+* and the canvas (drop target), bridging to core commands.
+*
+* Manages all drag-drop state including visual drop index computation
+* and sortable constraint validation.
+*/
+function useDragDrop(engine) {
+	const dragOverDestination = ref(null);
+	const activeDestination = dragOverDestination;
+	const containerDropDecision = ref(null);
+	const dragOverNodeId = computed({
+		get: () => {
+			const destination = dragOverDestination.value;
+			return destination?.kind === "container" ? destination.containerId : destination ? "root" : null;
+		},
+		set: (nodeId) => {
+			if (nodeId === null) dragOverDestination.value = null;
+			else if (nodeId === "root" && dragOverDestination.value?.kind !== "root") dragOverDestination.value = { kind: "root" };
+		}
+	});
+	const dragOverIndex = computed({
+		get: () => dragOverDestination.value?.index ?? null,
+		set: (index) => {
+			const current = dragOverDestination.value;
+			if (current) {
+				dragOverDestination.value = index === null ? {
+					...current,
+					index: void 0
+				} : {
+					...current,
+					index
+				};
+				return;
+			}
+			const sortScope = getActiveSortScope();
+			dragOverDestination.value = {
+				kind: "root",
+				sortScope: sortScope === false ? void 0 : sortScope,
+				index: index ?? void 0
+			};
+		}
+	});
+	const isForbidden = ref(false);
+	const forbiddenReason = ref(null);
+	let dropGeometry = null;
+	let dropGeometryFrame = null;
+	const schemaSnapshot = computed(() => {
+		engine.store.schema.value;
+		return engine.state.getSchema();
+	});
+	const lockedIndices = computed(() => {
+		const schema = schemaSnapshot.value;
+		const children = schema.root.children ?? [];
+		const sortScope = getActiveSortScope();
+		if (sortScope === false) return /* @__PURE__ */ new Set();
+		return getLockedIndices(children, engine.registry, schema, sortScope);
+	});
+	const validDropIndices = computed(() => {
+		const dragTarget = engine.store.dragTarget.value;
+		if (!dragTarget) return null;
+		const sortScope = getActiveSortScope();
+		if (sortScope === false) return null;
+		return getValidDropIndices(getActiveSortScopeEntries(sortScope), lockedIndices.value, dragTarget.sourceNodeId);
+	});
+	const createDecision = computed(() => {
+		const target = engine.store.dragTarget.value;
+		if (!target?.widgetType) return { allowed: true };
+		const meta = engine.registry.getWidget(target.widgetType);
+		if (!meta) return { allowed: true };
+		return resolveCreatable$1(meta.creatable, {
+			widgetType: target.widgetType,
+			schema: schemaSnapshot.value
+		}, true);
+	});
+	function resolveMetaSortScope(meta) {
+		const placement = meta.defaultLayout?.placement;
+		if (!placement || placement.kind === "flow") {
+			const region = placement?.region ?? DEFAULT_LAYOUT_REGION;
+			return placement?.sortScope === void 0 ? region === DEFAULT_LAYOUT_REGION ? DEFAULT_SORT_SCOPE : false : placement.sortScope;
+		}
+		return false;
+	}
+	function getActiveSortScopeEntries(sortScope) {
+		const schema = schemaSnapshot.value;
+		return getSortScopeEntries(createLayoutPlan(schema, engine.registry), sortScope);
+	}
+	function getActiveSortScope() {
+		const target = engine.store.dragTarget.value;
+		if (!target) return DEFAULT_SORT_SCOPE;
+		if (target.sourceNodeId) {
+			const schema = schemaSnapshot.value;
+			const node = buildSchemaIndex(schema).index.get(target.sourceNodeId)?.node;
+			if (!node) return false;
+			return resolveNodeLayout(node, engine.registry, schema).sortScope;
+		}
+		if (target.widgetType) {
+			const meta = engine.registry.getWidget(target.widgetType);
+			return meta ? resolveMetaSortScope(meta) : DEFAULT_SORT_SCOPE;
+		}
+		return DEFAULT_SORT_SCOPE;
+	}
+	function clearDragOverState() {
+		dragOverDestination.value = null;
+		containerDropDecision.value = null;
+		isForbidden.value = false;
+		forbiddenReason.value = null;
+	}
+	function clearDropGeometry(cancelFrame = false) {
+		dropGeometry = null;
+		if (cancelFrame && dropGeometryFrame !== null) {
+			window.cancelAnimationFrame(dropGeometryFrame);
+			dropGeometryFrame = null;
+		}
+	}
+	function resetDragState() {
+		clearDragOverState();
+		clearDropGeometry(true);
+		engine.store.setDragTarget(null);
+	}
+	watch(engine.store.dragTarget, (target) => {
+		if (!target) clearDragOverState();
+	});
+	function resolveVisualDropIndex(rawIndex) {
+		const valid = validDropIndices.value;
+		if (!valid) return rawIndex;
+		if (valid.size === 0) return null;
+		return valid.has(rawIndex) ? rawIndex : findNearestValidIndex(rawIndex, valid);
+	}
+	function setForbidden(reason) {
+		isForbidden.value = true;
+		const rejection = {
+			code: reason.code,
+			messageKey: reason.messageKey,
+			message: reason.message,
+			details: reason.details
+		};
+		forbiddenReason.value = rejection;
+		if (dragOverDestination.value?.kind === "container") containerDropDecision.value = {
+			allowed: false,
+			...rejection
+		};
+	}
+	function createSchemaNode(meta) {
+		return {
+			id: generateShortId(),
+			type: meta.type,
+			props: { ...meta.defaultProps },
+			style: meta.defaultStyle ? { ...meta.defaultStyle } : void 0,
+			layout: meta.defaultLayout ? { ...meta.defaultLayout } : void 0
+		};
+	}
+	function computeDropIndex(e, sortScope) {
+		const canvasEl = e.currentTarget;
+		if (!dropGeometry || dropGeometry.canvas !== canvasEl || dropGeometry.sortScope !== sortScope) {
+			dropGeometry = {
+				canvas: canvasEl,
+				sortScope,
+				midpoints: Array.from(canvasEl.querySelectorAll("[data-dc-sort-scope]")).filter((element) => element.dataset.dcSortScope === sortScope).map((element) => {
+					const rect = element.getBoundingClientRect();
+					return rect.top + rect.height / 2;
+				})
+			};
+			if (dropGeometryFrame === null) dropGeometryFrame = window.requestAnimationFrame(() => {
+				dropGeometryFrame = null;
+				dropGeometry = null;
+			});
+		}
+		const mouseY = e.clientY;
+		const midpoints = dropGeometry.midpoints;
+		let low = 0;
+		let high = midpoints.length;
+		while (low < high) {
+			const middle = Math.floor((low + high) / 2);
+			if (mouseY < midpoints[middle]) high = middle;
+			else low = middle + 1;
+		}
+		return low;
+	}
+	function handleMaterialDragStart(e, meta) {
+		clearDropGeometry(true);
+		engine.store.setDragTarget({
+			sourceNodeId: null,
+			widgetType: meta.type
+		});
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "copy";
+			e.dataTransfer.setData("text/plain", meta.type);
+			hideNativeDragImage(e.dataTransfer);
+		}
+	}
+	function handleCanvasDragOver(e) {
+		const target = e.target;
+		if (target instanceof Element && target.closest("[data-dc-container-region]")) return;
+		e.preventDefault();
+		const dragTarget = engine.store.dragTarget.value;
+		if (e.dataTransfer) e.dataTransfer.dropEffect = dragTarget?.sourceNodeId ? "move" : "copy";
+		const sortScope = getActiveSortScope();
+		dragOverDestination.value = {
+			kind: "root",
+			sortScope: sortScope === false ? void 0 : sortScope
+		};
+		containerDropDecision.value = null;
+		const decision = createDecision.value;
+		if (!decision.allowed) {
+			setForbidden({
+				ok: false,
+				code: decision.code ?? "NODE_NOT_CREATABLE",
+				messageKey: decision.messageKey,
+				message: decision.message
+			});
+			if (e.dataTransfer) e.dataTransfer.dropEffect = "none";
+			return;
+		}
+		isForbidden.value = false;
+		forbiddenReason.value = null;
+		if (sortScope === false) return;
+		const index = resolveVisualDropIndex(computeDropIndex(e, sortScope));
+		dragOverDestination.value = {
+			kind: "root",
+			sortScope,
+			index: index ?? void 0
+		};
+	}
+	function handleCanvasDragLeave(e) {
+		const relatedTarget = e.relatedTarget;
+		const canvasEl = e.currentTarget;
+		if (!relatedTarget || !canvasEl.contains(relatedTarget)) clearDragOverState();
+	}
+	function commitDrop() {
+		const destination = dragOverDestination.value;
+		const dragTarget = engine.store.dragTarget.value;
+		if (!destination || !dragTarget) return {
+			ok: false,
+			code: "DROP_TARGET_MISSING"
+		};
+		let result;
+		let selectedNodeId = null;
+		if (dragTarget.sourceNodeId) result = engine.execute({
+			type: CommandType$1.MOVE_NODE,
+			payload: {
+				nodeId: dragTarget.sourceNodeId,
+				destination
+			}
+		});
+		else {
+			const meta = dragTarget.widgetType ? engine.registry.getWidget(dragTarget.widgetType) : void 0;
+			if (!meta) result = {
+				ok: false,
+				code: "DRAGGED_WIDGET_META_MISSING"
+			};
+			else if (destination.kind === "root" && resolveMetaSortScope(meta) !== false && destination.index === void 0) result = {
+				ok: false,
+				code: "DROP_TARGET_MISSING"
+			};
+			else {
+				const node = createSchemaNode(meta);
+				result = engine.execute({
+					type: CommandType$1.ADD_NODE,
+					payload: {
+						node,
+						destination
+					}
+				});
+				selectedNodeId = node.id;
+			}
+		}
+		if (!result.ok) setForbidden(result);
+		else {
+			if (selectedNodeId) engine.store.selectNode(selectedNodeId);
+			resetDragState();
+		}
+		return result;
+	}
+	function handleCanvasDrop(e) {
+		e.preventDefault();
+		if (!createDecision.value.allowed) {
+			const decision = createDecision.value;
+			const result = {
+				ok: false,
+				code: decision.code ?? "NODE_NOT_CREATABLE",
+				messageKey: decision.messageKey,
+				message: decision.message
+			};
+			resetDragState();
+			return result;
+		}
+		return commitDrop();
+	}
+	function preflightContainerDestination(destination) {
+		const schema = schemaSnapshot.value;
+		const dragTarget = engine.store.dragTarget.value;
+		if (!dragTarget) return {
+			allowed: false,
+			code: "DROP_SOURCE_MISSING"
+		};
+		const source = dragTarget.sourceNodeId ? buildSchemaIndex(schema).index.get(dragTarget.sourceNodeId) : void 0;
+		const child = dragTarget.sourceNodeId ? source?.node : (() => {
+			const meta = dragTarget.widgetType ? engine.registry.getWidget(dragTarget.widgetType) : void 0;
+			return meta ? createSchemaNode(meta) : null;
+		})();
+		if (!child) return {
+			allowed: false,
+			code: "DROP_SOURCE_MISSING"
+		};
+		const targetResult = resolveDestination(schema, engine.registry, destination);
+		if (!targetResult.ok) return {
+			allowed: false,
+			code: targetResult.code,
+			message: targetResult.message
+		};
+		const target = targetResult.value;
+		if (!target.container || !target.definition || !target.variant || !target.region) return {
+			allowed: false,
+			code: "CONTAINER_DESTINATION_REQUIRED"
+		};
+		const sameRegion = source?.owner === destination.containerId && source.regionId === destination.regionId;
+		return resolvePlacementDecision({
+			definition: target.definition,
+			region: target.region,
+			child,
+			childHasContainerCapability: Boolean(engine.registry.getWidget(child.type)?.container),
+			targetCount: target.children.length - (sameRegion ? 1 : 0),
+			callbackContext: {
+				operation: dragTarget.sourceNodeId ? "move" : "add",
+				schema,
+				container: target.container,
+				variant: target.variant,
+				region: target.region,
+				child,
+				targetIndex: clampInsertIndex(destination.index, target.children.length)
+			}
+		});
+	}
+	function handleContainerDragOver(payload) {
+		if ("allowed" in payload) {
+			dragOverDestination.value = null;
+			containerDropDecision.value = {
+				allowed: false,
+				code: payload.code,
+				message: payload.message
+			};
+			setForbidden({
+				ok: false,
+				code: payload.code,
+				message: payload.message
+			});
+			return;
+		}
+		dragOverDestination.value = payload.destination;
+		const decision = preflightContainerDestination(payload.destination);
+		containerDropDecision.value = decision;
+		if (!decision.allowed) {
+			setForbidden({
+				ok: false,
+				code: decision.code ?? "CONTAINER_PLACEMENT_REJECTED",
+				messageKey: decision.messageKey,
+				message: decision.message,
+				details: decision.details
+			});
+			if (payload.event.dataTransfer) payload.event.dataTransfer.dropEffect = "none";
+		} else {
+			isForbidden.value = false;
+			forbiddenReason.value = null;
+		}
+	}
+	function handleContainerDragLeave(e) {
+		const current = e.currentTarget;
+		if (current && e.relatedTarget instanceof Node && current.contains(e.relatedTarget)) return;
+		clearDragOverState();
+	}
+	function handleContainerDrop(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const destination = dragOverDestination.value;
+		const currentTarget = e.currentTarget;
+		if (!(destination?.kind === "container" && currentTarget instanceof Element && currentTarget.getAttribute("data-dc-container-id") === destination.containerId && currentTarget.getAttribute("data-dc-container-region") === destination.regionId)) {
+			dragOverDestination.value = null;
+			const result = {
+				ok: false,
+				code: "DROP_TARGET_MISSING"
+			};
+			if (!isForbidden.value) {
+				containerDropDecision.value = null;
+				setForbidden(result);
+			}
+			return result;
+		}
+		return commitDrop();
+	}
+	function handleDragEnd(_e) {
+		resetDragState();
+	}
+	return {
+		dragOverDestination,
+		activeDestination,
+		containerDropDecision,
+		dragOverNodeId,
+		dragOverIndex,
+		lockedIndices,
+		validDropIndices,
+		handleMaterialDragStart,
+		handleCanvasDragOver,
+		handleCanvasDragLeave,
+		handleCanvasDrop,
+		handleContainerDragOver,
+		handleContainerDragLeave,
+		handleContainerDrop,
+		commitDrop,
+		handleDragEnd,
+		isForbidden,
+		forbiddenReason
+	};
+}
+//#endregion
+//#region src/material.ts
+function resolveText(key, fallback, t) {
+	if (!key) return fallback;
+	return t(key, fallback ?? "");
+}
+function resolveMaterialItem(meta, t) {
+	const material = meta.material;
+	const titleFallback = material?.title ?? meta.title;
+	return {
+		title: resolveText(material?.titleKey ?? meta.titleKey, titleFallback, t) ?? meta.title,
+		icon: material?.icon ?? meta.icon,
+		description: resolveText(material?.descriptionKey, material?.description, t),
+		thumbnail: material?.thumbnail,
+		tags: material?.tags ?? [],
+		keywords: material?.keywords ?? []
+	};
+}
+function materialItemMatchesQuery(meta, material, query) {
+	const normalizedQuery = query.toLowerCase().trim();
+	if (!normalizedQuery) return true;
+	return [
+		meta.type,
+		meta.title,
+		meta.titleKey,
+		meta.icon,
+		meta.group,
+		material.title,
+		material.description,
+		material.tags.join(" "),
+		material.keywords.join(" ")
+	].some((value) => typeof value === "string" && value.toLowerCase().includes(normalizedQuery));
+}
+//#endregion
+//#region src/components/DcMaterialItem.ts
+function renderIcon(icon) {
+	if (!icon) return null;
+	return h("span", {
+		"class": "dc-material-item__icon",
+		"data-dc-part": "icon"
+	}, [typeof icon === "string" ? icon : h(icon, { size: 20 })]);
+}
+var DcMaterialItem_default = defineComponent({
+	name: "DcMaterialItem",
+	props: { meta: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const ctx = useDesignerContext();
+		const { t } = useI18n$1();
+		const { extensions, handleMaterialDragStart, handleDragEnd: handleDesignerDragEnd } = ctx;
+		const isDragging = ref(false);
+		const handleDragStart = (e) => {
+			handleMaterialDragStart(e, props.meta);
+			isDragging.value = true;
+		};
+		const handleDragEnd = (e) => {
+			isDragging.value = false;
+			handleDesignerDragEnd(e);
+		};
+		return () => {
+			const meta = props.meta;
+			const material = resolveMaterialItem(meta, t);
+			const draggable = true;
+			const disabled = false;
+			const customContent = extensions.materialItemRenderer?.({
+				meta,
+				material,
+				draggable,
+				disabled,
+				dragging: isDragging.value
+			});
+			const defaultContent = [material.thumbnail ? h("img", {
+				"class": "dc-material-item__thumbnail",
+				"data-dc-part": "thumbnail",
+				"src": material.thumbnail,
+				"alt": material.title
+			}) : renderIcon(material.icon), h("span", {
+				"class": "dc-material-item__content",
+				"data-dc-part": "content"
+			}, [h("span", {
+				"class": "dc-material-item__title",
+				"data-dc-part": "title"
+			}, material.title)])];
+			return h("div", {
+				"class": ["dc-material-item", {
+					"dc-material-item--custom": !!customContent,
+					"dc-material-item--dragging": isDragging.value,
+					"dc-material-item--with-description": !!material.description
+				}],
+				"data-dc-component": "material-item",
+				"data-dc-state": isDragging.value ? "dragging" : void 0,
+				"draggable": draggable,
+				"aria-disabled": disabled,
+				"title": material.description ? `${material.title}: ${material.description}` : material.title,
+				"onDragstart": handleDragStart,
+				"onDragend": handleDragEnd
+			}, customContent ?? defaultContent);
+		};
+	}
+});
+//#endregion
+//#region src/components/DcMaterialGroup.ts
+var DcMaterialGroup_default = defineComponent({
+	name: "DcMaterialGroup",
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		widgets: {
+			type: Array,
+			required: true
+		}
+	},
+	setup(props) {
+		const collapsed = ref(false);
+		const toggleCollapse = () => {
+			collapsed.value = !collapsed.value;
+		};
+		return () => {
+			const header = h("button", {
+				"type": "button",
+				"class": "dc-material-group__header",
+				"data-dc-part": "header",
+				"aria-expanded": !collapsed.value,
+				"onClick": toggleCollapse
+			}, [h("span", {
+				"class": "dc-material-group__title",
+				"data-dc-part": "title"
+			}, props.title), h("span", {
+				"class": collapsed.value ? "dc-material-group__toggle dc-material-group__toggle--collapsed" : "dc-material-group__toggle",
+				"data-dc-part": "toggle"
+			}, [h(IconChevronDown, { size: 15 })])]);
+			const body = collapsed.value ? null : h("div", {
+				"class": "dc-material-group__body",
+				"data-dc-part": "body"
+			}, props.widgets.map((meta) => h(DcMaterialItem_default, {
+				key: meta.type,
+				meta
+			})));
+			return h("div", {
+				"class": ["dc-material-group", { "dc-material-group--collapsed": collapsed.value }],
+				"data-dc-component": "material-group",
+				"data-dc-state": collapsed.value ? "collapsed" : "expanded"
+			}, [header, body]);
+		};
+	}
+});
+//#endregion
+//#region src/components/DcMaterialPanel.ts
+var DcMaterialPanel_default = defineComponent({
+	name: "DcMaterialPanel",
+	setup() {
+		const ctx = useDesignerContext();
+		const { t } = useI18n$1();
+		const { engine, searchQuery, widgetGroups } = ctx;
+		const filteredGroups = computed(() => {
+			const allWidgets = engine.registry.getAllWidgets();
+			const query = searchQuery.value.toLowerCase().trim();
+			const groups = widgetGroups ?? [...new Set(allWidgets.map((w) => w.group))].map((name) => ({
+				name,
+				title: name,
+				titleKey: void 0
+			}));
+			const widgetsByGroup = /* @__PURE__ */ new Map();
+			for (const widget of allWidgets) {
+				if (!materialItemMatchesQuery(widget, resolveMaterialItem(widget, t), query)) continue;
+				const widgets = widgetsByGroup.get(widget.group);
+				if (widgets) widgets.push(widget);
+				else widgetsByGroup.set(widget.group, [widget]);
+			}
+			return groups.map((group) => ({
+				...group,
+				widgets: widgetsByGroup.get(group.name) ?? []
+			})).filter((g) => g.widgets.length > 0);
+		});
+		const handleSearchInput = (e) => {
+			searchQuery.value = e.target.value;
+		};
+		return () => h("div", {
+			"class": "dc-material-panel",
+			"data-dc-component": "material-panel"
+		}, [
+			h("div", {
+				"class": "dc-material-panel__header",
+				"data-dc-part": "header"
+			}, [h("h2", {
+				"class": "dc-material-panel__heading",
+				"data-dc-part": "heading"
+			}, t("panel.materials.title", "物料"))]),
+			h("div", {
+				"class": "dc-material-panel__search",
+				"data-dc-part": "search"
+			}, [
+				h("span", {
+					"class": "dc-material-panel__search-icon",
+					"data-dc-part": "search-icon"
+				}, [h(IconSearch, { size: 15 })]),
+				h("input", {
+					"type": "text",
+					"class": "dc-material-panel__search-input",
+					"data-dc-part": "search-input",
+					"placeholder": t("panel.search.placeholder", "搜索组件..."),
+					"value": searchQuery.value,
+					"onInput": handleSearchInput
+				}),
+				searchQuery.value ? h("button", {
+					"type": "button",
+					"class": "dc-material-panel__search-clear",
+					"data-dc-part": "search-clear",
+					"title": t("panel.search.clear", "清除搜索"),
+					"aria-label": t("panel.search.clear", "清除搜索"),
+					"onClick": () => {
+						searchQuery.value = "";
+					}
+				}, [h(IconClose, { size: 14 })]) : null
+			]),
+			h("div", {
+				"class": "dc-material-panel__groups",
+				"data-dc-part": "groups"
+			}, filteredGroups.value.map((group) => h(DcMaterialGroup_default, {
+				key: group.name,
+				title: group.titleKey ? t(group.titleKey, group.title) : group.title,
+				widgets: group.widgets
+			})))
+		]);
+	}
+});
+//#endregion
+//#region src/components/DcStructurePanel.ts
+function isPromiseLike(value) {
+	return value !== null && typeof value === "object" && typeof value.then === "function";
+}
+function createContainerStructureRegions(node, engine, t, schema) {
+	const result = createContainerPlan(node, engine.registry);
+	if (!result.ok) return [];
+	return result.plan.regions.map((region) => ({
+		id: region.definition.id,
+		title: region.definition.titleKey ? t(region.definition.titleKey, region.definition.title) : region.definition.title,
+		owner: {
+			kind: "container",
+			containerId: result.plan.containerId,
+			regionId: region.definition.id
+		},
+		nodes: region.nodes,
+		lockedIndices: getLockedIndicesFromNodes(region.nodes, engine.registry, schema)
+	}));
+}
+var DcStructurePanel_default = defineComponent({
+	name: "DcStructurePanel",
+	setup() {
+		const ctx = useDesignerContext();
+		const { t } = useI18n$1();
+		const { engine, actionRegistry, actionInterceptors, eventHooks } = ctx;
+		const selectPending = { value: false };
+		const schemaSnapshot = computed(() => {
+			engine.store.schema.value;
+			return engine.state.getSchema();
+		});
+		const createStructureItem = (node, owner, index, siblingCount, sortScope, schema, lockedIndices) => {
+			const meta = engine.registry.getWidget(node.type);
+			const actionCtx = {
+				node,
+				owner,
+				index,
+				siblingCount,
+				sortScope,
+				meta,
+				engine,
+				schema,
+				lockedIndices
+			};
+			const actions = actionRegistry.resolve(actionCtx, actionInterceptors, owner.kind === "root" ? [ActionKey$1.DELETE] : void 0);
+			return {
+				node,
+				title: meta ? meta.titleKey ? t(meta.titleKey, meta.title) : meta.title : node.type,
+				actions,
+				regions: createContainerStructureRegions(node, engine, t, schema)
+			};
+		};
+		const items = computed(() => {
+			const schema = schemaSnapshot.value;
+			const children = schema.root.children ?? [];
+			const plan = createLayoutPlan(schema, engine.registry);
+			const positions = /* @__PURE__ */ new Map();
+			for (const entries of plan.sortScopes.values()) {
+				const lockedIndices = getLockedIndicesFromNodes(entries.map((entry) => entry.node), engine.registry, schema);
+				entries.forEach((entry, index) => positions.set(entry.node.id, {
+					index,
+					siblingCount: entries.length,
+					lockedIndices
+				}));
+			}
+			return children.map((node, rootIndex) => {
+				const layout = resolveNodeLayout(node, engine.registry, schema);
+				const position = positions.get(node.id);
+				return createStructureItem(node, {
+					kind: "root",
+					sortScope: layout.sortScope === false ? void 0 : layout.sortScope
+				}, position?.index ?? rootIndex, position?.siblingCount ?? children.length, layout.sortScope, schema, position?.lockedIndices ?? /* @__PURE__ */ new Set());
+			});
+		});
+		const fireAfterSelect = (payload) => {
+			if (!eventHooks.onAfterSelect) return;
+			try {
+				const result = eventHooks.onAfterSelect(payload);
+				if (isPromiseLike(result)) result.catch((err) => {
+					console.error("[dragcraft] Async after-hook error:", err);
+				});
+			} catch (err) {
+				console.error("[dragcraft] After-hook error:", err);
+			}
+		};
+		const executeSelect = (payload) => {
+			engine.store.selectNode(payload.nodeId);
+			fireAfterSelect({ nodeId: payload.nodeId });
+		};
+		const resolveSelect = (result, payload) => {
+			if (!isPromiseLike(result)) {
+				if (result !== false) executeSelect(payload);
+				return;
+			}
+			selectPending.value = true;
+			result.then((allowed) => {
+				if (allowed !== false) executeSelect(payload);
+			}).catch((err) => {
+				console.error("[dragcraft] Before-hook error (action cancelled):", err);
+			}).finally(() => {
+				selectPending.value = false;
+			});
+		};
+		const handleSelect = (node, e) => {
+			if (selectPending.value) return;
+			const payload = {
+				nodeId: node.id,
+				event: e
+			};
+			if (!eventHooks.onBeforeSelect) {
+				executeSelect(payload);
+				return;
+			}
+			try {
+				resolveSelect(eventHooks.onBeforeSelect(payload), payload);
+			} catch (err) {
+				console.error("[dragcraft] Before-hook error (action cancelled):", err);
+			}
+		};
+		const renderActionButton = (action) => {
+			return h("button", {
+				"type": "button",
+				"class": [
+					"dc-structure-panel__action",
+					{ "dc-structure-panel__delete": action.key === ActionKey$1.DELETE },
+					action.className
+				],
+				"data-dc-part": "action",
+				"data-dc-state": action.key === ActionKey$1.DELETE ? "danger" : void 0,
+				"data-dc-action-key": action.key,
+				"title": action.label,
+				"aria-label": action.label,
+				"disabled": action.disabled,
+				"onClick": (e) => {
+					e.stopPropagation();
+					if (!action.disabled) action.handler(e);
+				}
+			}, typeof action.icon === "string" ? action.icon : action.icon ? h(action.icon) : void 0);
+		};
+		const renderActions = (actions) => {
+			const buttons = actions.filter((action) => action.type === "button").map(renderActionButton);
+			return buttons.length > 0 ? h("div", {
+				"class": "dc-structure-panel__actions",
+				"data-dc-part": "actions"
+			}, buttons) : null;
+		};
+		const renderItem = (item) => {
+			const selected = engine.store.selectedNodeId.value === item.node.id;
+			return h("div", {
+				"class": ["dc-structure-panel__item", { "dc-structure-panel__item--selected": selected }],
+				"data-dc-component": "structure-item",
+				"data-dc-state": selected ? "selected" : void 0,
+				"data-node-id": item.node.id
+			}, [h("button", {
+				"type": "button",
+				"class": "dc-structure-panel__select",
+				"data-dc-part": "select",
+				"aria-pressed": selected,
+				"onClick": (e) => handleSelect(item.node, e)
+			}, [h("span", {
+				"class": "dc-structure-panel__branch",
+				"data-dc-part": "branch"
+			}), h("span", {
+				"class": "dc-structure-panel__main",
+				"data-dc-part": "main"
+			}, [h("span", {
+				"class": "dc-structure-panel__title",
+				"data-dc-part": "title",
+				"title": item.title
+			}, item.title), h("span", {
+				"class": "dc-structure-panel__id",
+				"data-dc-part": "id",
+				"title": item.node.id
+			}, item.node.id)])]), renderActions(item.actions)]);
+		};
+		const renderRegion = (region) => h("div", {
+			"key": region.id,
+			"class": "dc-structure-panel__region-branch",
+			"data-dc-component": "structure-region"
+		}, [h("div", {
+			"class": "dc-structure-panel__region",
+			"data-dc-part": "row",
+			"data-dc-region-id": region.id
+		}, [
+			h("span", {
+				"class": "dc-structure-panel__region-branch-mark",
+				"data-dc-part": "branch",
+				"aria-hidden": "true"
+			}),
+			h("span", {
+				"class": "dc-structure-panel__region-title",
+				"data-dc-part": "title",
+				"title": region.title
+			}, region.title),
+			h("span", {
+				"class": "dc-structure-panel__region-count",
+				"data-dc-part": "count"
+			}, String(region.nodes.length))
+		]), region.nodes.length > 0 ? h("div", {
+			"class": "dc-structure-panel__children",
+			"data-dc-part": "children"
+		}, region.nodes.map((node, index) => {
+			const item = createStructureItem(node, region.owner, index, region.nodes.length, false, schemaSnapshot.value, region.lockedIndices);
+			return h("div", {
+				key: node.id,
+				class: "dc-structure-panel__row"
+			}, [renderItem(item)]);
+		})) : null]);
+		const renderStructureItem = (item) => h("div", {
+			key: item.node.id,
+			class: "dc-structure-panel__row"
+		}, [renderItem(item), item.regions.length > 0 ? h("div", { class: "dc-structure-panel__regions" }, item.regions.map(renderRegion)) : null]);
+		return () => h("div", {
+			"class": "dc-structure-panel",
+			"data-dc-component": "structure-panel"
+		}, [h("div", {
+			"class": "dc-structure-panel__header",
+			"data-dc-part": "header"
+		}, [h("span", {
+			"class": "dc-structure-panel__heading",
+			"data-dc-part": "heading"
+		}, t("panel.structure.title", "结构树"))]), items.value.length === 0 ? h("div", {
+			"class": "dc-structure-panel__empty",
+			"data-dc-part": "empty"
+		}, t("panel.structure.empty", "暂无结构")) : h("div", {
+			"class": "dc-structure-panel__list",
+			"data-dc-part": "list"
+		}, items.value.map(renderStructureItem))]);
+	}
+});
+//#endregion
+//#region src/components/DcLeftSidebar.ts
+const LEFT_PANEL_TABS = [{
+	key: "materials",
+	labelKey: "panel.left.materials",
+	fallback: "物料",
+	icon: IconMaterial
+}, {
+	key: "structure",
+	labelKey: "panel.left.structure",
+	fallback: "结构树",
+	icon: IconStructureTree
+}];
+var DcLeftSidebar_default = defineComponent({
+	name: "DcLeftSidebar",
+	setup() {
+		const ctx = useDesignerContext();
+		const { t } = useI18n$1();
+		const { engine, extensions, leftPanelActiveTab, workspace } = ctx;
+		const renderTabButton = (tab) => {
+			const label = t(tab.labelKey, tab.fallback);
+			const active = leftPanelActiveTab.value === tab.key;
+			return h("button", {
+				"type": "button",
+				"class": ["dc-left-sidebar__tab", { "dc-left-sidebar__tab--active": active }],
+				"data-dc-part": "tab",
+				"title": label,
+				"aria-label": label,
+				"aria-pressed": active,
+				"onClick": () => {
+					workspace.openLeft(tab.key);
+				}
+			}, [h(tab.icon, { size: 18 })]);
+		};
+		const renderActivePanel = () => {
+			if (leftPanelActiveTab.value === "structure") return h(DcStructurePanel_default);
+			return h(extensions.materialPanelRenderer ?? DcMaterialPanel_default);
+		};
+		return () => {
+			const open = workspace.leftOpen.value;
+			const toggleLabel = open ? t("workspace.left.close", "收起左侧栏") : t("workspace.left.open", "展开左侧栏");
+			const railExtension = extensions.leftRailRenderer?.({
+				engine,
+				workspace,
+				t
+			});
+			return h("div", {
+				"class": "dc-left-sidebar",
+				"data-dc-component": "left-sidebar",
+				"data-dc-state": open ? "open" : "closed"
+			}, [h("div", {
+				"class": "dc-left-sidebar__surface",
+				"data-dc-part": "surface",
+				"aria-hidden": workspace.mode.value === "compact" && !open,
+				"inert": workspace.mode.value === "compact" && !open ? "" : void 0
+			}, [h("div", {
+				"class": "dc-left-sidebar__rail",
+				"data-dc-part": "rail",
+				"role": "tablist",
+				"aria-label": t("workspace.left.label", "物料与结构")
+			}, [...LEFT_PANEL_TABS.map((tab) => renderTabButton(tab)), railExtension ? h("div", {
+				"class": "dc-sidebar-rail__extension",
+				"data-dc-part": "rail-extension"
+			}, [railExtension]) : null]), h("div", {
+				"class": "dc-left-sidebar__content",
+				"data-dc-part": "content"
+			}, [renderActivePanel()])]), h("button", {
+				"type": "button",
+				"class": "dc-sidebar-toggle dc-sidebar-toggle--left",
+				"data-dc-part": "toggle",
+				"title": toggleLabel,
+				"aria-label": toggleLabel,
+				"aria-expanded": open,
+				"data-dc-workspace-control": "left",
+				"onMousedown": (event) => event.preventDefault(),
+				"onClick": () => workspace.toggleLeft()
+			}, [h(open ? IconChevronLeft : IconChevronRight, { size: 14 })])]);
+		};
+	}
+});
+//#endregion
+//#region src/composables/usePropertyBinding.ts
+function findField(schema, key) {
+	for (const section of schema?.sections ?? []) {
+		const field = section.fields.find((item) => item.key === key);
+		if (field) return field;
+	}
+}
+function getFieldBinding(field) {
+	return field?.bindTo;
+}
+/**
+* Bridges the currently selected node's props and formSchema
+* to the form-generator, and dispatches property updates as commands.
+*/
+function usePropertyBinding(engine, options = {}) {
+	const translate = options.t ?? ((key, fallback) => fallback ?? key);
+	const selectedNode = computed(() => {
+		const nodeId = engine.store.selectedNodeId.value;
+		if (!nodeId) return null;
+		return engine.state.getNodeById(nodeId);
+	});
+	const selectedWidgetMeta = computed(() => {
+		const node = selectedNode.value;
+		if (!node) return void 0;
+		return engine.registry.getWidget(node.type);
+	});
+	const selectedFormSchema = computed(() => {
+		const meta = selectedWidgetMeta.value;
+		if (!meta) return null;
+		const schema = cloneDeep(meta.formSchema);
+		if (!meta.container) return schema;
+		const variantOptions = Object.entries(meta.container.variants).map(([value, variant]) => ({
+			value,
+			label: variant.titleKey ? translate(variant.titleKey, variant.title) : variant.title
+		}));
+		for (const section of schema.sections) for (const field of section.fields) {
+			const binding = resolveFieldBinding(getFieldBinding(field), {
+				scope: "node",
+				path: `props.${field.key}`
+			});
+			if (binding.scope !== "container" || binding.path !== "variant") continue;
+			const original = field.componentProps;
+			field.componentProps = (ctx) => ({
+				...typeof original === "function" ? original(ctx) : original ?? {},
+				options: variantOptions
+			});
+		}
+		return schema;
+	});
+	const selectedNodeProps = computed(() => {
+		const node = selectedNode.value;
+		if (!node) return {};
+		const schema = engine.state.getSchema();
+		const values = { ...node.props };
+		for (const section of selectedFormSchema.value?.sections ?? []) for (const field of section.fields) {
+			const value = readBindingValue(resolveFieldBinding(getFieldBinding(field), {
+				scope: "node",
+				path: `props.${field.key}`
+			}), schema, node);
+			if (value !== void 0) values[field.key] = value;
+		}
+		return values;
+	});
+	const globalConfigValues = computed(() => {
+		const schema = engine.state.getSchema();
+		const values = { ...schema.globalConfig };
+		for (const section of options.globalConfigSchema?.sections ?? []) for (const field of section.fields) {
+			const value = readBindingValue(resolveFieldBinding(getFieldBinding(field), {
+				scope: "globalConfig",
+				path: field.key
+			}), schema, null);
+			if (value !== void 0) values[field.key] = value;
+		}
+		return values;
+	});
+	function dispatchBinding(binding, value, nodeId) {
+		const command = createBindingCommand(binding, value, nodeId);
+		if (!command) {
+			console.warn(`[dragcraft/designer] Unsupported binding path "${binding.path}"`);
+			return null;
+		}
+		return engine.execute(command);
+	}
+	function handlePropertyChange(key, value) {
+		const nodeId = engine.store.selectedNodeId.value;
+		if (!nodeId) return null;
+		return dispatchBinding(resolveFieldBinding(getFieldBinding(findField(selectedFormSchema.value, key)), {
+			scope: "node",
+			path: `props.${key}`
+		}), value, nodeId);
+	}
+	function handleGlobalConfigChange(key, value) {
+		return dispatchBinding(resolveFieldBinding(getFieldBinding(findField(options.globalConfigSchema, key)), {
+			scope: "globalConfig",
+			path: key
+		}), value);
+	}
+	return {
+		selectedNode,
+		selectedFormSchema,
+		selectedWidgetMeta,
+		selectedNodeProps,
+		globalConfigValues,
+		handlePropertyChange,
+		handleGlobalConfigChange
+	};
+}
+//#endregion
+//#region src/components/DcPropertyPanel.ts
+var DcPropertyPanel_default = defineComponent({
+	name: "DcPropertyPanel",
+	setup() {
+		const ctx = useDesignerContext();
+		const { t } = useI18n$1();
+		const { engine, fieldComponentMap, globalConfigSchema, activeTab } = ctx;
+		const { selectedNode, selectedFormSchema, selectedNodeProps, globalConfigValues, handlePropertyChange, handleGlobalConfigChange } = usePropertyBinding(engine, {
+			globalConfigSchema,
+			t
+		});
+		watch(() => engine.store.selectedNodeId.value, (newId) => {
+			if (newId) activeTab.value = "widget";
+		});
+		return () => {
+			const currentTab = activeTab.value;
+			const effectiveTab = currentTab === "widget" && !selectedNode.value ? "global" : currentTab;
+			let tabContent = null;
+			if (effectiveTab === "global" && globalConfigSchema) tabContent = h(FormGenerator$1, {
+				key: "__global__",
+				schema: globalConfigSchema,
+				values: globalConfigValues.value,
+				fieldComponentMap,
+				onChange: (payload) => {
+					handleGlobalConfigChange(payload.key, payload.value);
+				}
+			});
+			else if (effectiveTab === "widget" && selectedFormSchema.value && selectedNode.value) tabContent = h(FormGenerator$1, {
+				key: selectedNode.value.id,
+				schema: selectedFormSchema.value,
+				values: selectedNodeProps.value,
+				fieldComponentMap,
+				onChange: (payload) => {
+					handlePropertyChange(payload.key, payload.value);
+				}
+			});
+			else tabContent = h("div", {
+				"class": "dc-property-panel__empty",
+				"data-dc-part": "empty"
+			}, effectiveTab === "global" ? t("panel.empty.no-global-config", "暂无全局配置") : t("panel.empty.select-widget", "请选择组件"));
+			return h("div", {
+				"class": "dc-property-panel",
+				"data-dc-component": "property-panel"
+			}, [h("div", {
+				"id": `dc-property-panel-${effectiveTab}`,
+				"class": "dc-property-panel__content",
+				"data-dc-part": "content",
+				"role": "tabpanel",
+				"aria-labelledby": `dc-property-tab-${effectiveTab}`
+			}, [tabContent])]);
+		};
+	}
+});
+//#endregion
+//#region src/components/DcRightSidebar.ts
+const RIGHT_PANEL_TABS = [{
+	key: "global",
+	labelKey: "panel.tab.global",
+	fallback: "全局配置",
+	icon: IconGlobalConfig
+}, {
+	key: "widget",
+	labelKey: "panel.tab.widget",
+	fallback: "组件配置",
+	icon: IconProperties
+}];
+var DcRightSidebar_default = defineComponent({
+	name: "DcRightSidebar",
+	setup() {
+		const { t } = useI18n$1();
+		const { engine, extensions, activeTab, workspace } = useDesignerContext();
+		const hasSelectedNode = computed(() => engine.store.selectedNodeId.value !== null);
+		const renderTabButton = (tab) => {
+			const label = t(tab.labelKey, tab.fallback);
+			const disabled = tab.key === "widget" && !hasSelectedNode.value;
+			const active = activeTab.value === tab.key && !disabled;
+			return h("button", {
+				"id": `dc-property-tab-${tab.key}`,
+				"type": "button",
+				"role": "tab",
+				"class": ["dc-right-sidebar__tab", { "dc-right-sidebar__tab--active": active }],
+				"data-dc-part": "tab",
+				"title": label,
+				"aria-label": label,
+				"aria-selected": active,
+				"aria-controls": `dc-property-panel-${tab.key}`,
+				"disabled": disabled,
+				"onClick": () => workspace.openRight(tab.key)
+			}, [h(tab.icon, { size: 18 })]);
+		};
+		return () => {
+			const PropertyPanel = extensions.propertyPanelRenderer ?? DcPropertyPanel_default;
+			const open = workspace.rightOpen.value;
+			const toggleLabel = open ? t("workspace.right.close", "收起属性栏") : t("workspace.right.open", "展开属性栏");
+			const railExtension = extensions.rightRailRenderer?.({
+				engine,
+				workspace,
+				t
+			});
+			return h("div", {
+				"class": "dc-right-sidebar",
+				"data-dc-component": "right-sidebar",
+				"data-dc-state": open ? "open" : "closed"
+			}, [h("div", {
+				"class": "dc-right-sidebar__surface",
+				"data-dc-part": "surface",
+				"aria-hidden": workspace.mode.value === "compact" && !open,
+				"inert": workspace.mode.value === "compact" && !open ? "" : void 0
+			}, [h("div", {
+				"class": "dc-right-sidebar__rail",
+				"data-dc-part": "rail",
+				"role": "tablist",
+				"aria-label": t("workspace.right.label", "属性检查器")
+			}, [...RIGHT_PANEL_TABS.map(renderTabButton), railExtension ? h("div", {
+				"class": "dc-sidebar-rail__extension",
+				"data-dc-part": "rail-extension"
+			}, [railExtension]) : null]), h("div", {
+				"class": "dc-right-sidebar__content",
+				"data-dc-part": "content"
+			}, [h(PropertyPanel)])]), h("button", {
+				"type": "button",
+				"class": "dc-sidebar-toggle dc-sidebar-toggle--right",
+				"data-dc-part": "toggle",
+				"title": toggleLabel,
+				"aria-label": toggleLabel,
+				"aria-expanded": open,
+				"data-dc-workspace-control": "right",
+				"onMousedown": (event) => event.preventDefault(),
+				"onClick": () => workspace.toggleRight()
+			}, [h(open ? IconChevronRight : IconChevronLeft, { size: 14 })])]);
+		};
+	}
+});
+//#endregion
+//#region src/components/DcDesigner.ts
+const EDITABLE_SELECTOR = "input, textarea, select, [contenteditable=\"true\"], [contenteditable=\"\"]";
+const INTERACTIVE_SELECTOR = `${EDITABLE_SELECTOR}, button, a[href]`;
+function isEditableTarget(target) {
+	return target instanceof Element && Boolean(target.closest(EDITABLE_SELECTOR));
+}
+var DcDesigner_default = defineComponent({
+	name: "DcDesigner",
+	props: { instance: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		const { engine, componentMap, widgetGroups, extensions, fieldComponentMap, globalConfigSchema, eventHooks, actionInterceptors, actionRegistry, i18n, workspace } = props.instance;
+		const rootRef = ref(null);
+		const leftPanelRef = ref(null);
+		const rightPanelRef = ref(null);
+		const searchQuery = ref("");
+		const dragDrop = useDragDrop(engine);
+		let resizeObserver = null;
+		const focusTimers = /* @__PURE__ */ new Set();
+		provide(DESIGNER_CONTEXT_KEY, {
+			engine,
+			componentMap,
+			widgetGroups,
+			extensions,
+			fieldComponentMap,
+			globalConfigSchema,
+			eventHooks,
+			actionInterceptors,
+			actionRegistry,
+			workspace,
+			activeDestination: dragDrop.activeDestination,
+			containerDropDecision: dragDrop.containerDropDecision,
+			dragOverNodeId: dragDrop.dragOverNodeId,
+			dragOverIndex: dragDrop.dragOverIndex,
+			handleMaterialDragStart: dragDrop.handleMaterialDragStart,
+			handleDragEnd: dragDrop.handleDragEnd,
+			handleCanvasDragOver: dragDrop.handleCanvasDragOver,
+			handleCanvasDragLeave: dragDrop.handleCanvasDragLeave,
+			handleCanvasDrop: dragDrop.handleCanvasDrop,
+			handleContainerDragOver: dragDrop.handleContainerDragOver,
+			handleContainerDragLeave: dragDrop.handleContainerDragLeave,
+			handleContainerDrop: dragDrop.handleContainerDrop,
+			isForbidden: dragDrop.isForbidden,
+			forbiddenReason: dragDrop.forbiddenReason,
+			searchQuery,
+			activeTab: workspace.activeRightPanel,
+			leftPanelActiveTab: workspace.activeLeftPanel
+		});
+		provide(I18N_KEY$1, i18n);
+		const { t } = i18n;
+		function updateLayoutMode(width) {
+			workspace.setMode(width < workspace.compactBreakpoint ? "compact" : "wide");
+		}
+		function focusPanel(panel) {
+			(panel?.querySelector("button:not(:disabled), input:not(:disabled), [tabindex=\"0\"]"))?.focus({ preventScroll: true });
+		}
+		function restoreControlFocus(control) {
+			rootRef.value?.querySelector(`[data-dc-workspace-control="${control}"]`)?.focus({ preventScroll: true });
+		}
+		function afterRender(callback) {
+			nextTick(() => {
+				const timer = setTimeout(() => {
+					focusTimers.delete(timer);
+					callback();
+				}, 0);
+				focusTimers.add(timer);
+			});
+		}
+		watch(workspace.leftOpen, (open, previous) => {
+			if (workspace.mode.value !== "compact") return;
+			if (open) afterRender(() => workspace.leftOpen.value && focusPanel(leftPanelRef.value));
+			else if (previous) afterRender(() => !workspace.rightOpen.value && restoreControlFocus("left"));
+		});
+		watch(workspace.rightOpen, (open, previous) => {
+			if (workspace.mode.value !== "compact") return;
+			if (open) afterRender(() => workspace.rightOpen.value && focusPanel(rightPanelRef.value));
+			else if (previous) afterRender(() => !workspace.leftOpen.value && restoreControlFocus("right"));
+		});
+		function handleKeydown(event) {
+			if (event.key === "Escape" && workspace.mode.value === "compact" && (workspace.leftOpen.value || workspace.rightOpen.value)) {
+				event.preventDefault();
+				workspace.closeDrawers();
+				return;
+			}
+			if (!workspace.keyboardShortcuts || isEditableTarget(event.target)) return;
+			if (!(event.metaKey || event.ctrlKey)) return;
+			const key = event.key.toLowerCase();
+			if (key === "z") {
+				event.preventDefault();
+				if (event.shiftKey) engine.history.redo();
+				else engine.history.undo();
+			} else if (key === "y" && event.ctrlKey) {
+				event.preventDefault();
+				engine.history.redo();
+			}
+		}
+		function handlePointerdown(event) {
+			const target = event.target;
+			if (target instanceof Element && !target.closest(INTERACTIVE_SELECTOR)) rootRef.value?.focus({ preventScroll: true });
+		}
+		onMounted(() => {
+			const root = rootRef.value;
+			if (!root) return;
+			updateLayoutMode(root.getBoundingClientRect().width);
+			if (typeof ResizeObserver !== "undefined") {
+				resizeObserver = new ResizeObserver((entries) => updateLayoutMode(entries[0]?.contentRect.width ?? root.clientWidth));
+				resizeObserver.observe(root);
+			}
+		});
+		onBeforeUnmount(() => {
+			resizeObserver?.disconnect();
+			focusTimers.forEach((timer) => clearTimeout(timer));
+			focusTimers.clear();
+		});
+		return () => {
+			const compact = workspace.mode.value === "compact";
+			const drawerOpen = compact && (workspace.leftOpen.value || workspace.rightOpen.value);
+			const themeStates = [
+				workspace.mode.value,
+				workspace.leftOpen.value ? "left-open" : null,
+				workspace.rightOpen.value ? "right-open" : null
+			].filter(Boolean).join(" ");
+			return h("div", {
+				"ref": rootRef,
+				"class": [
+					"dc-designer",
+					`dc-designer--${workspace.mode.value}`,
+					{
+						"dc-designer--left-open": workspace.leftOpen.value,
+						"dc-designer--right-open": workspace.rightOpen.value
+					}
+				],
+				"data-dc-component": "designer",
+				"data-dc-state": themeStates,
+				"tabindex": -1,
+				"data-dc-workspace-mode": workspace.mode.value,
+				"style": {
+					"--_dc-workspace-left-width": `${workspace.leftPanelWidth}px`,
+					"--_dc-workspace-right-width": `${workspace.rightPanelWidth}px`,
+					"--_dc-workspace-rail-width": `${workspace.railWidth}px`,
+					"--_dc-workspace-drawer-width": `${workspace.drawerWidth}px`
+				},
+				"onKeydown": handleKeydown,
+				"onPointerdown": handlePointerdown
+			}, [h("div", {
+				"class": "dc-designer__body",
+				"data-dc-part": "body"
+			}, [
+				drawerOpen ? h("button", {
+					"type": "button",
+					"class": "dc-workspace-backdrop",
+					"data-dc-part": "backdrop",
+					"aria-label": t("workspace.drawer.close", "关闭面板"),
+					"onClick": workspace.closeDrawers
+				}) : null,
+				h("aside", {
+					"ref": leftPanelRef,
+					"class": [
+						"dc-designer__panel",
+						"dc-designer__panel--left",
+						{ "dc-designer__panel--open": workspace.leftOpen.value }
+					],
+					"data-dc-part": "left-panel",
+					"aria-label": t("workspace.left.label", "物料与结构"),
+					"onTransitionend": (event) => {
+						if (event.propertyName === "transform" && compact && workspace.leftOpen.value) focusPanel(leftPanelRef.value);
+					}
+				}, [h(DcLeftSidebar_default)]),
+				h("main", {
+					"class": "dc-designer__panel dc-designer__panel--center",
+					"data-dc-part": "center-panel"
+				}, [h(DcCanvas_default)]),
+				h("aside", {
+					"ref": rightPanelRef,
+					"class": [
+						"dc-designer__panel",
+						"dc-designer__panel--right",
+						{ "dc-designer__panel--open": workspace.rightOpen.value }
+					],
+					"data-dc-part": "right-panel",
+					"aria-label": t("workspace.right.label", "属性检查器"),
+					"onTransitionend": (event) => {
+						if (event.propertyName === "transform" && compact && workspace.rightOpen.value) focusPanel(rightPanelRef.value);
+					}
+				}, [h(DcRightSidebar_default)])
+			])]);
+		};
+	}
+});
+//#endregion
+//#region src/composables/useDesigner.ts
+/**
+* Composable that provides reactive access to designer state and operations.
+* Thin wrapper around the engine's reactive store and API.
+*
+* @example
+* ```ts
+* const designer = createDesigner()
+* const { schema, selectedNodeId, undo, redo } = useDesigner(designer)
+* ```
+*/
+function useDesigner(instance) {
+	const { engine } = instance;
+	return {
+		schema: engine.store.schema,
+		selectedNodeId: engine.store.selectedNodeId,
+		hoveredNodeId: engine.store.hoveredNodeId,
+		execute: engine.execute,
+		undo: () => engine.history.undo(),
+		redo: () => engine.history.redo(),
+		canUndo: () => engine.history.canUndo(),
+		canRedo: () => engine.history.canRedo(),
+		importSchema: (schema) => engine.importSchema(schema),
+		exportSchema: () => engine.exportSchema(),
+		on: engine.eventHub.on.bind(engine.eventHub),
+		off: engine.eventHub.off.bind(engine.eventHub)
+	};
+}
+//#endregion
+//#region src/messages.ts
+const designerMessages = {
+	"zh-CN": {
+		panel: {
+			materials: { title: "物料" },
+			left: {
+				materials: "物料",
+				structure: "结构树"
+			},
+			tab: {
+				global: "全局配置",
+				widget: "组件配置"
+			},
+			structure: {
+				title: "结构树",
+				empty: "暂无结构"
+			},
+			empty: {
+				"no-global-config": "暂无全局配置",
+				"select-widget": "请选择组件"
+			},
+			search: {
+				placeholder: "搜索组件...",
+				clear: "清除搜索"
+			},
+			inspector: {
+				title: "属性检查器",
+				page: "页面"
+			}
+		},
+		workspace: {
+			history: {
+				label: "历史操作",
+				undo: "撤销",
+				redo: "重做"
+			},
+			canvas: {
+				controls: "画布工具",
+				pointer: "指针模式",
+				hand: "抓手模式（按住空格）",
+				reset: "重置画布位置"
+			},
+			left: {
+				label: "物料与结构",
+				open: "展开左侧栏",
+				close: "收起左侧栏"
+			},
+			right: {
+				label: "属性检查器",
+				open: "展开属性栏",
+				close: "收起属性栏"
+			},
+			drawer: { close: "关闭面板" }
+		},
+		device: {
+			group: "预览设备",
+			iphone: "iPhone",
+			android: "Android",
+			tablet: "平板",
+			desktop: "桌面"
+		}
+	},
+	"en": {
+		panel: {
+			materials: { title: "Materials" },
+			left: {
+				materials: "Materials",
+				structure: "Structure"
+			},
+			tab: {
+				global: "Global",
+				widget: "Widget"
+			},
+			structure: {
+				title: "Structure",
+				empty: "No nodes"
+			},
+			empty: {
+				"no-global-config": "No global config",
+				"select-widget": "Select a widget"
+			},
+			search: {
+				placeholder: "Search widgets...",
+				clear: "Clear search"
+			},
+			inspector: {
+				title: "Inspector",
+				page: "Page"
+			}
+		},
+		workspace: {
+			history: {
+				label: "History actions",
+				undo: "Undo",
+				redo: "Redo"
+			},
+			canvas: {
+				controls: "Canvas tools",
+				pointer: "Pointer mode",
+				hand: "Hand mode (hold Space)",
+				reset: "Reset canvas position"
+			},
+			left: {
+				label: "Materials and structure",
+				open: "Open left panel",
+				close: "Collapse left panel"
+			},
+			right: {
+				label: "Inspector",
+				open: "Open inspector",
+				close: "Collapse inspector"
+			},
+			drawer: { close: "Close panel" }
+		},
+		device: {
+			group: "Preview device",
+			iphone: "iPhone",
+			android: "Android",
+			tablet: "Tablet",
+			desktop: "Desktop"
+		}
+	}
+};
+//#endregion
+//#region src/workspace.ts
+const DEFAULT_COMPACT_BREAKPOINT = 1100;
+const DEFAULT_LEFT_PANEL_WIDTH = 280;
+const DEFAULT_RIGHT_PANEL_WIDTH = 320;
+const DEFAULT_RAIL_WIDTH = 44;
+const DEFAULT_DRAWER_WIDTH = 320;
+function createDesignerWorkspace(options = {}) {
+	const compactBreakpoint = options.compactBreakpoint ?? DEFAULT_COMPACT_BREAKPOINT;
+	const keyboardShortcuts = options.keyboardShortcuts ?? true;
+	const leftPanelWidth = options.leftPanelWidth ?? DEFAULT_LEFT_PANEL_WIDTH;
+	const rightPanelWidth = options.rightPanelWidth ?? DEFAULT_RIGHT_PANEL_WIDTH;
+	const railWidth = options.railWidth ?? DEFAULT_RAIL_WIDTH;
+	const drawerWidth = options.drawerWidth ?? DEFAULT_DRAWER_WIDTH;
+	const mode = ref("wide");
+	const leftOpen = ref(options.defaultLeftOpen ?? true);
+	const rightOpen = ref(options.defaultRightOpen ?? true);
+	const activeLeftPanel = ref("materials");
+	const activeRightPanel = ref("global");
+	let wideLeftOpen = leftOpen.value;
+	let wideRightOpen = rightOpen.value;
+	function setMode(nextMode) {
+		if (mode.value === nextMode) return;
+		if (nextMode === "compact") {
+			wideLeftOpen = leftOpen.value;
+			wideRightOpen = rightOpen.value;
+			leftOpen.value = false;
+			rightOpen.value = false;
+		} else {
+			leftOpen.value = wideLeftOpen;
+			rightOpen.value = wideRightOpen;
+		}
+		mode.value = nextMode;
+	}
+	function openLeft(panel) {
+		if (panel) activeLeftPanel.value = panel;
+		leftOpen.value = true;
+		if (mode.value === "compact") rightOpen.value = false;
+		else wideLeftOpen = true;
+	}
+	function closeLeft() {
+		leftOpen.value = false;
+		if (mode.value === "wide") wideLeftOpen = false;
+	}
+	function toggleLeft(panel) {
+		if (leftOpen.value && (!panel || activeLeftPanel.value === panel)) closeLeft();
+		else openLeft(panel);
+	}
+	function openRight(panel) {
+		if (panel) activeRightPanel.value = panel;
+		rightOpen.value = true;
+		if (mode.value === "compact") leftOpen.value = false;
+		else wideRightOpen = true;
+	}
+	function closeRight() {
+		rightOpen.value = false;
+		if (mode.value === "wide") wideRightOpen = false;
+	}
+	function toggleRight(panel) {
+		if (rightOpen.value && (!panel || activeRightPanel.value === panel)) closeRight();
+		else openRight(panel);
+	}
+	function closeDrawers() {
+		if (mode.value !== "compact") return;
+		leftOpen.value = false;
+		rightOpen.value = false;
+	}
+	return {
+		compactBreakpoint,
+		keyboardShortcuts,
+		leftPanelWidth,
+		rightPanelWidth,
+		railWidth,
+		drawerWidth,
+		mode,
+		leftOpen,
+		rightOpen,
+		activeLeftPanel,
+		activeRightPanel,
+		setMode,
+		openLeft,
+		closeLeft,
+		toggleLeft,
+		openRight,
+		closeRight,
+		toggleRight,
+		closeDrawers
+	};
+}
+//#endregion
+//#region src/factory.ts
+function mergeDefaultMessages() {
+	const merged = {};
+	const locales = /* @__PURE__ */ new Set([...Object.keys(rendererMessages), ...Object.keys(designerMessages)]);
+	for (const locale of locales) merged[locale] = {
+		...rendererMessages[locale] ?? {},
+		...designerMessages[locale] ?? {}
+	};
+	return merged;
+}
+/**
+* Creates a designer instance by initializing the core engine,
+* registering widgets, and resolving configuration.
+*
+* Users must explicitly provide widget metas, component maps, and field maps.
+*
+* @example
+* ```ts
+* const designer = createDesigner({
+*   widgetMetas: myWidgetMetas,
+*   componentMap: myComponentMap,
+*   fieldComponentMap: myFieldComponentMap,
+*   globalConfigSchema: myGlobalSchema,
+* })
+* ```
+*/
+function createDesigner(options = {}) {
+	const { initialSchema, ...engineOptions } = options.engineOptions ?? {};
+	const engine = createEngine$1(engineOptions);
+	if (options.widgetMetas) for (const meta of options.widgetMetas) engine.registerWidget(meta);
+	if (initialSchema) {
+		const result = engine.importSchema(initialSchema);
+		if (!result.ok) console.warn("[dragcraft/designer] initial schema rejected", result.diagnostics);
+	}
+	const componentMap = options.componentMap ?? {};
+	const widgetGroups = options.widgetGroups;
+	const extensions = options.extensions ?? {};
+	const fieldComponentMap = options.fieldComponentMap;
+	const globalConfigSchema = options.globalConfigSchema ?? null;
+	if (globalConfigSchema) engine.registry.registerGlobalConfigFormSchema(globalConfigSchema);
+	const eventHooks = options.eventHooks ?? {};
+	const actionInterceptors = options.actionInterceptors ?? [];
+	const i18n = createI18n$1(options.locale ?? "zh-CN", mergeDefaultMessages());
+	const workspace = createDesignerWorkspace(options.workspace);
+	if (options.messages) for (const [locale, msgs] of Object.entries(options.messages)) i18n.mergeMessages(locale, msgs);
+	const actionRegistry = createNodeActionRegistry$1(createDefaultActions$1(i18n.t));
+	if (options.customActions) for (const action of options.customActions) actionRegistry.register(action);
+	function dispose() {
+		engine.dispose();
+	}
+	return {
+		engine,
+		componentMap,
+		widgetGroups,
+		extensions,
+		fieldComponentMap,
+		globalConfigSchema,
+		eventHooks,
+		actionInterceptors,
+		actionRegistry,
+		i18n,
+		workspace,
+		dispose
+	};
+}
+//#endregion
+export { ActionKey, CommandType, ContainerRegionOutlet, DESIGNER_CONTEXT_KEY, DcCanvas_default as DcCanvas, DcCanvasControls_default as DcCanvasControls, DcDesigner_default as DcDesigner, DcLeftSidebar_default as DcLeftSidebar, DcMaterialGroup_default as DcMaterialGroup, DcMaterialItem_default as DcMaterialItem, DcMaterialPanel_default as DcMaterialPanel, DcPropertyPanel_default as DcPropertyPanel, DcRightSidebar_default as DcRightSidebar, DcStructurePanel_default as DcStructurePanel, DefaultEmptyState, DefaultNodeHandle, DefaultNodeMask, DefaultNodeToolbar, EventName, FormGenerator, I18N_KEY, RootRenderer, createBindingCommand, createConfirmActionInterceptor, createDefaultActions, createDesigner, createDesignerWorkspace, createEngine, createI18n, createNodeActionRegistry, designerMessages, materialItemMatchesQuery, readBindingValue, resolveBehavior, resolveCreatable, resolveFieldBinding, resolveMaterialItem, useContainerRuntime, useDesigner, useDesignerContext, useDragDrop, useI18n, useNodeActions, useNodeDrag, useNodeInteractionGeometry, usePropertyBinding, useWidgetNode };