@dragcraft/renderer 0.0.1

package/dist/index.mjs

@@ -0,0 +1,2590 @@
+import { CommandType, DEFAULT_LAYOUT_REGION, DEFAULT_SORT_SCOPE, buildSchemaIndex, createContainerPlan, createLayoutPlan, getLockedIndices, getLockedIndicesFromNodes, getSortScopeEntries, isInsertAllowed, isMoveAllowed, isRemoveAllowed, normalizeStyleValueMap, resolveBehavior, resolveNodeLayout } from "@dragcraft/core";
+import { IconArrowDown, IconArrowUp, IconComponent, IconCopy, IconDelete, IconDrag, IconPlus } from "@dragcraft/icons";
+import { Teleport, computed, defineComponent, h, inject, mergeProps, nextTick, onBeforeUnmount, onMounted, onUpdated, provide, ref, watch } from "vue";
+import { cloneDeep } from "@dragcraft/utils";
+import { useI18n } from "@dragcraft/i18n";
+import { autoUpdate } from "@floating-ui/dom";
+//#region src/action-runtime.ts
+function isPromiseLike$1(value) {
+	return value !== null && typeof value === "object" && typeof value.then === "function";
+}
+function resolveActionDecision(result) {
+	if (result === false) return { allowed: false };
+	if (result && typeof result === "object" && "allowed" in result) return result;
+	return { allowed: true };
+}
+function resolveText(value, invocation) {
+	return typeof value === "function" ? value(invocation) : value;
+}
+function reportActionError(interceptors, invocation, error) {
+	console.error(`[dragcraft] Action "${invocation.key}" error (action cancelled):`, error);
+	for (const interceptor of interceptors) try {
+		interceptor.onActionError?.(invocation, error);
+	} catch (err) {
+		console.error("[dragcraft] Action error handler failed:", err);
+	}
+}
+function fireAfterAction(interceptors, invocation) {
+	for (const interceptor of interceptors) {
+		if (!interceptor.afterAction) continue;
+		try {
+			const result = interceptor.afterAction(invocation);
+			if (isPromiseLike$1(result)) result.catch((err) => {
+				console.error("[dragcraft] Async after-action error:", err);
+			});
+		} catch (err) {
+			console.error("[dragcraft] After-action error:", err);
+		}
+	}
+}
+function runActionPipeline(invocation, execute, interceptors = [], pendingGuard) {
+	if (pendingGuard?.value) return;
+	const runExecute = () => {
+		const result = execute();
+		if (isPromiseLike$1(result)) return result.then(() => {
+			fireAfterAction(interceptors, invocation);
+		});
+		fireAfterAction(interceptors, invocation);
+	};
+	const runBeforeFrom = (startIndex) => {
+		for (let index = startIndex; index < interceptors.length; index++) {
+			const beforeAction = interceptors[index].beforeAction;
+			if (!beforeAction) continue;
+			const result = beforeAction(invocation);
+			if (isPromiseLike$1(result)) return result.then((resolved) => {
+				if (!resolveActionDecision(resolved).allowed) return;
+				return runBeforeFrom(index + 1);
+			});
+			if (!resolveActionDecision(result).allowed) return;
+		}
+		return runExecute();
+	};
+	try {
+		const result = runBeforeFrom(0);
+		if (!isPromiseLike$1(result)) return result;
+		if (pendingGuard) pendingGuard.value = true;
+		return result.catch((err) => {
+			reportActionError(interceptors, invocation, err);
+		}).finally(() => {
+			if (pendingGuard) pendingGuard.value = false;
+		});
+	} catch (err) {
+		reportActionError(interceptors, invocation, err);
+	}
+}
+function createConfirmActionInterceptor(options) {
+	const shouldConfirm = options.shouldConfirm ?? ((invocation) => invocation.risk === "destructive");
+	return { beforeAction(invocation) {
+		if (!shouldConfirm(invocation)) return;
+		return options.confirm({
+			invocation,
+			title: resolveText(options.title, invocation),
+			message: resolveText(options.message, invocation)
+		});
+	} };
+}
+//#endregion
+//#region src/action-registry.ts
+/**
+* Builds an InstanceBehaviorContext from a NodeActionContext.
+* Schema is already read reactively by the calling computed (in useNodeActions).
+*/
+function toInstanceCtx(ctx) {
+	return {
+		node: ctx.node,
+		schema: ctx.schema
+	};
+}
+function canReorder(ctx) {
+	if (ctx.owner.kind === "root" && ctx.sortScope === false) return false;
+	const instanceCtx = toInstanceCtx(ctx);
+	return resolveBehavior(ctx.meta?.draggable, instanceCtx) && resolveBehavior(ctx.meta?.sortable, instanceCtx);
+}
+function getScopedLockedIndices(ctx) {
+	if (ctx.lockedIndices) return ctx.lockedIndices;
+	const schema = ctx.schema;
+	if (ctx.owner.kind === "container") {
+		const containerOwner = ctx.owner;
+		return getLockedIndicesFromNodes((schema.root.children?.find((node) => node.id === containerOwner.containerId))?.container?.regions[containerOwner.regionId] ?? [], ctx.engine.registry, schema);
+	}
+	return getLockedIndices(schema.root.children ?? [], ctx.engine.registry, schema, ctx.sortScope === false ? void 0 : ctx.sortScope);
+}
+const ActionKey = {
+	DRAG: "drag",
+	MOVE_UP: "move-up",
+	MOVE_DOWN: "move-down",
+	DUPLICATE: "duplicate",
+	DELETE: "delete"
+};
+function createDefaultActions(t) {
+	const _t = t ?? ((_, f) => f ?? "");
+	return [
+		{
+			key: ActionKey.DRAG,
+			label: _t("action.drag", "拖拽排序"),
+			icon: IconDrag,
+			type: "drag-handle",
+			order: 100,
+			available: canReorder
+		},
+		{
+			key: ActionKey.MOVE_UP,
+			label: _t("action.move-up", "上移"),
+			icon: IconArrowUp,
+			type: "button",
+			order: 200,
+			metadata: {
+				commandType: CommandType.MOVE_NODE,
+				direction: "up"
+			},
+			available: canReorder,
+			disabled: (ctx) => {
+				if (ctx.index === 0) return true;
+				const lockedIndices = getScopedLockedIndices(ctx);
+				if (lockedIndices.size === 0) return false;
+				return !isMoveAllowed(ctx.index, ctx.index - 1, lockedIndices);
+			},
+			command: (ctx) => {
+				if (ctx.index <= 0) return null;
+				return {
+					type: CommandType.MOVE_NODE,
+					payload: {
+						nodeId: ctx.node.id,
+						destination: {
+							...ctx.owner,
+							index: ctx.index - 1
+						}
+					}
+				};
+			}
+		},
+		{
+			key: ActionKey.MOVE_DOWN,
+			label: _t("action.move-down", "下移"),
+			icon: IconArrowDown,
+			type: "button",
+			order: 300,
+			metadata: {
+				commandType: CommandType.MOVE_NODE,
+				direction: "down"
+			},
+			available: canReorder,
+			disabled: (ctx) => {
+				if (ctx.index >= ctx.siblingCount - 1) return true;
+				const lockedIndices = getScopedLockedIndices(ctx);
+				if (lockedIndices.size === 0) return false;
+				return !isMoveAllowed(ctx.index, ctx.index + 1, lockedIndices);
+			},
+			command: (ctx) => {
+				if (ctx.index >= ctx.siblingCount - 1) return null;
+				return {
+					type: CommandType.MOVE_NODE,
+					payload: {
+						nodeId: ctx.node.id,
+						destination: {
+							...ctx.owner,
+							index: ctx.index + 2
+						}
+					}
+				};
+			}
+		},
+		{
+			key: ActionKey.DUPLICATE,
+			label: _t("action.duplicate", "复制"),
+			icon: IconCopy,
+			type: "button",
+			order: 350,
+			disabled: (ctx) => {
+				if (ctx.owner.kind === "root" && ctx.sortScope === false) return false;
+				const lockedIndices = getScopedLockedIndices(ctx);
+				return !isInsertAllowed(ctx.index + 1, lockedIndices);
+			},
+			command: (ctx) => ({
+				type: CommandType.DUPLICATE_NODE,
+				payload: { nodeId: ctx.node.id }
+			})
+		},
+		{
+			key: ActionKey.DELETE,
+			label: _t("action.delete", "删除"),
+			icon: IconDelete,
+			type: "button",
+			order: 400,
+			risk: "destructive",
+			metadata: { commandType: CommandType.REMOVE_NODE },
+			className: "dc-node__toolbar-btn--delete",
+			available: (ctx) => resolveBehavior(ctx.meta?.deletable, toInstanceCtx(ctx)),
+			disabled: (ctx) => {
+				if (ctx.owner.kind === "root" && ctx.sortScope === false) return false;
+				const lockedIndices = getScopedLockedIndices(ctx);
+				if (lockedIndices.size === 0) return false;
+				return !isRemoveAllowed(ctx.index, lockedIndices);
+			},
+			command: (ctx) => ({
+				type: CommandType.REMOVE_NODE,
+				payload: { nodeId: ctx.node.id }
+			})
+		}
+	];
+}
+function createNodeActionRegistry(initialActions) {
+	const actions = /* @__PURE__ */ new Map();
+	const defaults = initialActions ?? createDefaultActions();
+	for (const action of defaults) actions.set(action.key, action);
+	return {
+		getActions() {
+			return Array.from(actions.values()).sort((a, b) => a.order - b.order);
+		},
+		register(action) {
+			actions.set(action.key, action);
+		},
+		unregister(key) {
+			actions.delete(key);
+		},
+		resolve(ctx, actionInterceptors = [], keys) {
+			const widgetActions = ctx.meta?.actions;
+			let actionDefs = this.getActions();
+			if (widgetActions) {
+				if (widgetActions.only) {
+					const allowedKeys = new Set(widgetActions.only);
+					actionDefs = actionDefs.filter((a) => allowedKeys.has(a.key));
+				}
+				if (widgetActions.exclude) {
+					const excludeKeys = new Set(widgetActions.exclude);
+					actionDefs = actionDefs.filter((a) => !excludeKeys.has(a.key));
+				}
+				if (widgetActions.extra) actionDefs = [...actionDefs, ...widgetActions.extra].sort((a, b) => a.order - b.order);
+			}
+			if (keys) {
+				const requestedKeys = new Set(keys);
+				actionDefs = actionDefs.filter((action) => requestedKeys.has(action.key));
+			}
+			return actionDefs.map((def) => {
+				if (!(def.visible ? def.visible(ctx) : true)) return null;
+				const disabled = !(def.available ? def.available(ctx) : true) || (def.disabled ? def.disabled(ctx) : false);
+				const pending = { value: false };
+				return {
+					key: def.key,
+					label: def.label,
+					icon: def.icon,
+					type: def.type,
+					order: def.order,
+					risk: def.risk ?? "normal",
+					metadata: def.metadata,
+					visible: true,
+					disabled,
+					handler: (event) => {
+						if (pending.value) return;
+						event.stopPropagation();
+						const command = def.command?.(ctx, event) ?? void 0;
+						const execute = () => {
+							if (command) ctx.engine.execute(command);
+							return def.handler?.(ctx, event);
+						};
+						return runActionPipeline({
+							key: def.key,
+							label: def.label,
+							ctx,
+							event,
+							risk: def.risk ?? "normal",
+							command,
+							metadata: def.metadata
+						}, execute, actionInterceptors, pending);
+					},
+					className: def.className
+				};
+			}).filter((a) => a !== null);
+		}
+	};
+}
+//#endregion
+//#region src/container-runtime.ts
+function deepFreeze(value) {
+	if (value && typeof value === "object" && !Object.isFrozen(value)) {
+		Object.freeze(value);
+		for (const child of Object.values(value)) deepFreeze(child);
+	}
+	return value;
+}
+function toReadonlySnapshot(value) {
+	return Object.isFrozen(value) ? value : deepFreeze(cloneDeep(value));
+}
+const CONTAINER_RUNTIME_CONTEXT_KEY = Symbol("dc-container-runtime");
+function createContainerRuntime(getNode, ctx) {
+	const resolveNode = () => {
+		ctx.engine.store.schema.value;
+		return getNode();
+	};
+	const plan = computed(() => createContainerPlan(resolveNode(), ctx.engine.registry));
+	return {
+		nodeId: computed(() => resolveNode().id),
+		variant: computed(() => resolveNode().container?.variant ?? ""),
+		regionDefinitions: computed(() => deepFreeze(plan.value.ok ? plan.value.plan.variant.regions.map((region) => ({
+			...region,
+			constraints: region.constraints ? {
+				...region.constraints,
+				includeTypes: region.constraints.includeTypes ? [...region.constraints.includeTypes] : void 0,
+				excludeTypes: region.constraints.excludeTypes ? [...region.constraints.excludeTypes] : void 0
+			} : void 0
+		})) : [])),
+		getRegionNodes: (regionId) => toReadonlySnapshot(resolveNode().container?.regions[regionId] ?? []),
+		requestVariantChange: (variant) => ctx.engine.execute({
+			type: CommandType.CHANGE_CONTAINER_VARIANT,
+			payload: {
+				containerId: getNode().id,
+				variant
+			}
+		})
+	};
+}
+function useContainerRuntime() {
+	const runtime = inject(CONTAINER_RUNTIME_CONTEXT_KEY);
+	if (!runtime) throw new Error("[dragcraft/renderer] ContainerRuntime not found. ContainerRegionOutlet must be rendered inside a resolved container material.");
+	return runtime;
+}
+//#endregion
+//#region src/event-hooks.ts
+/**
+* Returns empty event hooks (no-op). Used as the default.
+*/
+function createDefaultEventHooks() {
+	return {};
+}
+/**
+* Checks whether a value is a thenable (Promise-like).
+*/
+function isPromiseLike(value) {
+	return value !== null && typeof value === "object" && typeof value.then === "function";
+}
+/**
+* Resolves a before-hook result that may be sync or async.
+* Returns `true` if the action should proceed, `false` if cancelled.
+*
+* Error handling: if the hook throws or the promise rejects,
+* the action is CANCELLED (returns false) and the error is logged.
+* Rationale: a gating hook that crashes should fail closed, not open.
+*/
+async function resolveBeforeHook(result) {
+	try {
+		return await result !== false;
+	} catch (err) {
+		console.error("[dragcraft] Before-hook error (action cancelled):", err);
+		return false;
+	}
+}
+/**
+* Runs an action through an optional before/after hook pair.
+* Handles synchronous and asynchronous before-hooks consistently.
+*/
+function runBeforeAfterHook(beforeHook, payload, execute, afterHook, pendingGuard) {
+	if (!beforeHook) {
+		execute();
+		fireAfterHook(afterHook, payload);
+		return;
+	}
+	let result;
+	try {
+		result = beforeHook(payload);
+	} catch (err) {
+		console.error("[dragcraft] Before-hook error (action cancelled):", err);
+		return;
+	}
+	if (!isPromiseLike(result)) {
+		if (result === false) return;
+		execute();
+		fireAfterHook(afterHook, payload);
+		return;
+	}
+	if (pendingGuard) pendingGuard.value = true;
+	return resolveBeforeHook(result).then((allowed) => {
+		if (allowed) {
+			execute();
+			fireAfterHook(afterHook, payload);
+		}
+	}).finally(() => {
+		if (pendingGuard) pendingGuard.value = false;
+	});
+}
+/**
+* Fires an after-hook (fire-and-forget).
+* If the hook returns a promise, any rejection is caught and logged.
+* Errors never propagate to the caller.
+*/
+function fireAfterHook(hook, payload) {
+	if (!hook) return;
+	try {
+		const result = hook(payload);
+		if (isPromiseLike(result)) result.catch((err) => {
+			console.error("[dragcraft] Async after-hook error:", err);
+		});
+	} catch (err) {
+		console.error("[dragcraft] After-hook error:", err);
+	}
+}
+//#endregion
+//#region src/types.ts
+/**
+* Injection key for the renderer context.
+*/
+const RENDERER_CONTEXT_KEY = Symbol("dc-renderer");
+//#endregion
+//#region src/context.ts
+/**
+* Creates a RendererContext from options.
+* Called internally by RootRenderer.
+*/
+function createRendererContext(options) {
+	const schema = computed(() => {
+		options.engine.store.schema.value;
+		return options.engine.state.getSchema();
+	});
+	const mutableSchema = () => schema.value;
+	const layoutPlan = computed(() => createLayoutPlan(mutableSchema(), options.engine.registry));
+	const schemaIndex = computed(() => buildSchemaIndex(mutableSchema()));
+	const rootActionPositions = computed(() => {
+		const positions = /* @__PURE__ */ new Map();
+		for (const [sortScope, entries] of layoutPlan.value.sortScopes) {
+			const lockedIndices = getLockedIndicesFromNodes(entries.map((entry) => entry.node), options.engine.registry, mutableSchema());
+			entries.forEach((entry, index) => positions.set(entry.node.id, {
+				index,
+				siblingCount: entries.length,
+				sortScope,
+				lockedIndices
+			}));
+		}
+		for (const entry of layoutPlan.value.entries) if (!positions.has(entry.node.id)) positions.set(entry.node.id, {
+			index: entry.arrayIndex,
+			siblingCount: layoutPlan.value.entries.length,
+			sortScope: false,
+			lockedIndices: /* @__PURE__ */ new Set()
+		});
+		return positions;
+	});
+	const containerLockedIndices = computed(() => {
+		const result = /* @__PURE__ */ new Map();
+		for (const container of mutableSchema().root.children ?? []) {
+			if (!container.container) continue;
+			const regions = /* @__PURE__ */ new Map();
+			for (const [regionId, nodes] of Object.entries(container.container.regions)) regions.set(regionId, getLockedIndicesFromNodes(nodes, options.engine.registry, mutableSchema()));
+			result.set(container.id, regions);
+		}
+		return result;
+	});
+	function resolveNodeActionPosition(node, owner) {
+		if (owner.kind === "container") {
+			const siblings = (schemaIndex.value.index.get(owner.containerId)?.node)?.container?.regions[owner.regionId] ?? [];
+			return {
+				owner,
+				index: schemaIndex.value.index.get(node.id)?.index ?? -1,
+				siblingCount: siblings.length,
+				sortScope: false,
+				lockedIndices: containerLockedIndices.value.get(owner.containerId)?.get(owner.regionId) ?? /* @__PURE__ */ new Set()
+			};
+		}
+		const position = rootActionPositions.value.get(node.id);
+		return {
+			owner: {
+				kind: "root",
+				sortScope: position?.sortScope === false ? void 0 : position?.sortScope
+			},
+			index: position?.index ?? -1,
+			siblingCount: position?.siblingCount ?? 0,
+			sortScope: position?.sortScope ?? false,
+			lockedIndices: position?.lockedIndices ?? /* @__PURE__ */ new Set()
+		};
+	}
+	return {
+		engine: options.engine,
+		schema,
+		layoutPlan,
+		schemaIndex,
+		resolveNodeActionPosition,
+		componentMap: options.componentMap,
+		extensions: options.extensions ?? {},
+		eventHooks: options.eventHooks ?? createDefaultEventHooks(),
+		actionInterceptors: options.actionInterceptors ?? [],
+		actionRegistry: options.actionRegistry ?? createNodeActionRegistry(),
+		dragOverNodeId: options.dragOverNodeId ?? ref(null),
+		activeDestination: options.activeDestination ?? ref(null),
+		containerDropDecision: options.containerDropDecision ?? ref(null),
+		onContainerDragOver: options.onContainerDragOver,
+		onContainerDragLeave: options.onContainerDragLeave,
+		onContainerDrop: options.onContainerDrop,
+		interactionBoundary: options.interactionBoundary
+	};
+}
+/**
+* Injects the RendererContext from the nearest ancestor RootRenderer.
+* Throws if called outside the renderer component tree.
+*/
+function useRendererContext() {
+	const ctx = inject(RENDERER_CONTEXT_KEY);
+	if (!ctx) throw new Error("[dragcraft/renderer] RendererContext not found. Ensure this component is a descendant of RootRenderer.");
+	return ctx;
+}
+//#endregion
+//#region src/components/DefaultDropIndicator.ts
+/**
+* Sort-scope drop indicator shown during drag-over.
+* Renders a dashed-border rectangle placeholder indicating where
+* the widget will be placed. Styled via CSS class `dc-drop-indicator`.
+*/
+var DefaultDropIndicator_default = defineComponent({
+	name: "DcDefaultDropIndicator",
+	setup() {
+		return () => h("div", {
+			"class": "dc-drop-indicator",
+			"data-dc-component": "drop-indicator"
+		});
+	}
+});
+//#endregion
+//#region src/components/DefaultEmptyState.ts
+/**
+* Default empty canvas state component.
+* Displayed when the canvas has no widgets and no drag operation is active.
+*/
+var DefaultEmptyState_default = defineComponent({
+	name: "DcDefaultEmptyState",
+	props: { isDragOver: {
+		type: Boolean,
+		default: false
+	} },
+	setup(props) {
+		const { t } = useI18n();
+		return () => h("div", {
+			"class": ["dc-empty-state", { "dc-empty-state--drag-over": props.isDragOver }],
+			"data-dc-component": "empty-state",
+			"data-dc-state": props.isDragOver ? "drag-over" : void 0
+		}, [h("div", {
+			"class": "dc-empty-state__icon",
+			"data-dc-part": "icon"
+		}, h(IconPlus, { size: 32 })), h("div", {
+			"class": "dc-empty-state__text",
+			"data-dc-part": "text"
+		}, t("canvas.empty", "拖拽组件到这里"))]);
+	}
+});
+//#endregion
+//#region src/components/DefaultForbiddenOverlay.ts
+/**
+* Default forbidden overlay shown when a widget type cannot be dropped.
+* Renders a red dashed drop zone with the blocked reason in the center.
+*/
+var DefaultForbiddenOverlay_default = defineComponent({
+	name: "DcDefaultForbiddenOverlay",
+	props: {
+		widgetType: {
+			type: String,
+			required: true
+		},
+		reason: {
+			type: Object,
+			default: null
+		}
+	},
+	setup(props) {
+		const { t } = useI18n();
+		const getMessage = () => {
+			const fallback = props.reason?.message ?? t("forbidden.default", "当前物料不满足创建条件，无法添加到画布");
+			return props.reason?.messageKey ? t(props.reason.messageKey, fallback) : fallback;
+		};
+		return () => h("div", {
+			"class": "dc-forbidden-overlay",
+			"data-dc-component": "forbidden-overlay"
+		}, [h("span", {
+			"class": "dc-forbidden-overlay__text",
+			"data-dc-part": "text"
+		}, getMessage())]);
+	}
+});
+//#endregion
+//#region src/composables/useNodeActions.ts
+function resolveUncachedPosition(node, owner, ctx) {
+	const schema = ctx.schema.value;
+	if (owner.kind === "container") {
+		const siblings = (buildSchemaIndex(schema).index.get(owner.containerId)?.node)?.container?.regions[owner.regionId] ?? [];
+		return {
+			owner,
+			index: siblings.findIndex((item) => item.id === node.id),
+			siblingCount: siblings.length,
+			sortScope: false,
+			lockedIndices: getLockedIndicesFromNodes(siblings, ctx.engine.registry, schema)
+		};
+	}
+	const layout = resolveNodeLayout(node, ctx.engine.registry, schema);
+	const entries = layout.sortScope === false ? [] : getSortScopeEntries(createLayoutPlan(schema, ctx.engine.registry), layout.sortScope);
+	return {
+		owner: {
+			kind: "root",
+			sortScope: layout.sortScope === false ? void 0 : layout.sortScope
+		},
+		index: entries.findIndex((entry) => entry.node.id === node.id),
+		siblingCount: entries.length,
+		sortScope: layout.sortScope,
+		lockedIndices: layout.sortScope === false ? /* @__PURE__ */ new Set() : getLockedIndices(schema.root.children ?? [], ctx.engine.registry, schema, layout.sortScope)
+	};
+}
+/**
+* Composable that resolves the action system for a specific node.
+* Provides the list of visible, resolved actions with their handlers.
+*
+* @param getNode - Getter for the current schema node
+* @param ctx - The renderer context
+*/
+function useNodeActions(getNode, ctx, getOwner = () => ({ kind: "root" })) {
+	const { engine, actionRegistry, actionInterceptors } = ctx;
+	const actionContext = computed(() => {
+		const node = getNode();
+		const schema = ctx.schema.value;
+		const owner = getOwner();
+		const meta = engine.registry.getWidget(node.type);
+		return {
+			node,
+			...ctx.resolveNodeActionPosition?.(node, owner) ?? resolveUncachedPosition(node, owner, ctx),
+			meta,
+			engine,
+			schema
+		};
+	});
+	return {
+		actions: computed(() => {
+			return actionRegistry.resolve(actionContext.value, actionInterceptors);
+		}),
+		actionContext
+	};
+}
+//#endregion
+//#region src/drag-image.ts
+let transparentDragImageEl = null;
+function getTransparentDragImageElement() {
+	if (typeof document === "undefined") return null;
+	if (transparentDragImageEl && document.body.contains(transparentDragImageEl)) return transparentDragImageEl;
+	const element = document.createElement("div");
+	element.setAttribute("data-dc-transparent-drag-image", "");
+	element.style.position = "fixed";
+	element.style.left = "-10000px";
+	element.style.top = "-10000px";
+	element.style.width = "1px";
+	element.style.height = "1px";
+	element.style.opacity = "0";
+	element.style.pointerEvents = "none";
+	document.body.appendChild(element);
+	transparentDragImageEl = element;
+	return element;
+}
+function hideNativeDragImage(dataTransfer) {
+	if (!dataTransfer?.setDragImage) return;
+	const element = getTransparentDragImageElement();
+	if (element) dataTransfer.setDragImage(element, 0, 0);
+}
+//#endregion
+//#region src/composables/useNodeDrag.ts
+/**
+* Composable that encapsulates drag handle behavior for a widget node.
+* Integrates with event hooks for interceptable drag operations.
+*
+* @param getNode - Getter for the current schema node
+* @param ctx - The renderer context (from useRendererContext)
+*/
+function useNodeDrag(getNode, ctx) {
+	const { engine, eventHooks } = ctx;
+	const handleDragStart = (e) => {
+		e.stopPropagation();
+		const nodeId = getNode().id;
+		if (eventHooks.onBeforeDrag) {
+			if (eventHooks.onBeforeDrag({
+				nodeId,
+				event: e
+			}) === false) {
+				e.preventDefault();
+				return;
+			}
+		}
+		engine.store.setDragTarget({
+			sourceNodeId: nodeId,
+			widgetType: null
+		});
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", nodeId);
+			hideNativeDragImage(e.dataTransfer);
+		}
+	};
+	const handleDragEnd = (e) => {
+		e.stopPropagation();
+		engine.store.setDragTarget(null);
+		fireAfterHook(eventHooks.onAfterDrag, {
+			nodeId: getNode().id,
+			event: e
+		});
+	};
+	return {
+		handleDragStart,
+		handleDragEnd
+	};
+}
+//#endregion
+//#region src/composables/useNodeInteractionGeometry.ts
+const CLIP_OVERFLOW_RE = /auto|scroll|hidden|clip|overlay/;
+const EMPTY_RECT = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	width: 0,
+	height: 0
+};
+function makeRect(top, right, bottom, left) {
+	return {
+		top,
+		right,
+		bottom,
+		left,
+		width: Math.max(0, right - left),
+		height: Math.max(0, bottom - top)
+	};
+}
+function getEffectiveClipRect(el) {
+	let top = 0;
+	let bottom = window.innerHeight;
+	let left = 0;
+	let right = window.innerWidth;
+	let current = el.parentElement;
+	while (current) {
+		const style = getComputedStyle(current);
+		const clipsY = CLIP_OVERFLOW_RE.test(style.overflowY);
+		const clipsX = CLIP_OVERFLOW_RE.test(style.overflowX);
+		if (clipsX || clipsY) {
+			const rect = current.getBoundingClientRect();
+			if (clipsY) {
+				top = Math.max(top, rect.top);
+				bottom = Math.min(bottom, rect.bottom);
+			}
+			if (clipsX) {
+				left = Math.max(left, rect.left);
+				right = Math.min(right, rect.right);
+			}
+		}
+		current = current.parentElement;
+	}
+	return {
+		top,
+		right,
+		bottom,
+		left
+	};
+}
+function resolveTargetElement$1(hostEl, selfTargetSelector) {
+	if (hostEl.dataset.dcLayerMode !== "self" || !selfTargetSelector) return hostEl;
+	const candidate = hostEl.querySelector(selfTargetSelector);
+	if (!candidate) return hostEl;
+	const rect = candidate.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0 ? candidate : hostEl;
+}
+function resolveBoundaryElement(hostEl, targetEl, boundarySelector) {
+	if (!boundarySelector) return null;
+	return hostEl.closest(boundarySelector) ?? targetEl.closest(boundarySelector);
+}
+function resolvePaintInset(size, requestedInset) {
+	return Math.min(requestedInset, Math.max(0, (size - 1) / 2));
+}
+function insetRect(rect, requestedInset) {
+	const inlineInset = resolvePaintInset(rect.width, requestedInset);
+	const blockInset = resolvePaintInset(rect.height, requestedInset);
+	return makeRect(rect.top + blockInset, rect.right - inlineInset, rect.bottom - blockInset, rect.left + inlineInset);
+}
+function isSameRect(left, right) {
+	return left.top === right.top && left.right === right.right && left.bottom === right.bottom && left.left === right.left;
+}
+function useNodeInteractionGeometry(elRef, isActive, options) {
+	const geometry = ref({
+		visibleRect: EMPTY_RECT,
+		paintRect: EMPTY_RECT,
+		visible: false
+	});
+	let cleanupAutoUpdate = null;
+	function applyGeometry(next) {
+		const previous = geometry.value;
+		if (previous.visible !== next.visible || !isSameRect(previous.visibleRect, next.visibleRect) || !isSameRect(previous.paintRect, next.paintRect)) geometry.value = next;
+	}
+	function hide() {
+		if (geometry.value.visible) applyGeometry({
+			...geometry.value,
+			visible: false
+		});
+	}
+	function update() {
+		const hostEl = elRef.value;
+		if (!hostEl || !isActive.value) {
+			hide();
+			return;
+		}
+		const targetEl = resolveTargetElement$1(hostEl, options.selfTargetSelector);
+		const targetRect = targetEl.getBoundingClientRect();
+		if (targetRect.width <= 0 || targetRect.height <= 0) {
+			hide();
+			return;
+		}
+		const boundaryRect = resolveBoundaryElement(hostEl, targetEl, options.boundarySelector)?.getBoundingClientRect();
+		const clip = getEffectiveClipRect(targetEl);
+		const clipTop = Math.max(clip.top, boundaryRect?.top ?? -Infinity);
+		const clipRight = Math.min(clip.right, boundaryRect?.right ?? Infinity);
+		const clipBottom = Math.min(clip.bottom, boundaryRect?.bottom ?? Infinity);
+		const clipLeft = Math.max(clip.left, boundaryRect?.left ?? -Infinity);
+		const visibleTop = Math.max(targetRect.top, clipTop);
+		const visibleBottom = Math.min(targetRect.bottom, clipBottom);
+		const targetVisibleLeft = Math.max(targetRect.left, clipLeft);
+		const targetVisibleRight = Math.min(targetRect.right, clipRight);
+		const visibleLeft = options.mode === "root-band" && boundaryRect ? Math.max(boundaryRect.left, clipLeft) : targetVisibleLeft;
+		const visibleRect = makeRect(visibleTop, options.mode === "root-band" && boundaryRect ? Math.min(boundaryRect.right, clipRight) : targetVisibleRight, visibleBottom, visibleLeft);
+		if (!(visibleBottom > visibleTop && targetVisibleRight > targetVisibleLeft && visibleRect.width > 0 && visibleRect.height > 0)) {
+			hide();
+			return;
+		}
+		applyGeometry({
+			visibleRect,
+			paintRect: insetRect(visibleRect, Math.max(0, options.paintInset ?? 0)),
+			visible: true
+		});
+	}
+	function stopAutoUpdate() {
+		cleanupAutoUpdate?.();
+		cleanupAutoUpdate = null;
+	}
+	function startAutoUpdate() {
+		stopAutoUpdate();
+		const host = elRef.value;
+		if (!host || !isActive.value) return;
+		cleanupAutoUpdate = autoUpdate(resolveTargetElement$1(host, options.selfTargetSelector), host, update, {
+			ancestorScroll: true,
+			ancestorResize: true,
+			elementResize: true,
+			layoutShift: true,
+			animationFrame: false
+		});
+	}
+	watch([elRef, isActive], ([newEl, active]) => {
+		stopAutoUpdate();
+		if (newEl && active) nextTick(startAutoUpdate);
+		else hide();
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	onBeforeUnmount(stopAutoUpdate);
+	return {
+		geometry,
+		update
+	};
+}
+//#endregion
+//#region src/selection-presentation.ts
+const NODE_SELECTION_PRESENTATION_KEY = Symbol("dc-node-selection-presentation");
+const NODE_SELECTION_PLANE_KEY = Symbol("dc-node-selection-plane");
+const DETACHED_PLANE = computed(() => null);
+const DETACHED_PRESENTATION = {
+	registerPlane: () => {},
+	registerFallback: () => {},
+	getPlane: () => DETACHED_PLANE
+};
+function createNodeSelectionPresentation() {
+	const planes = {
+		root: ref(null),
+		content: ref(null),
+		viewport: ref(null)
+	};
+	const fallback = ref(null);
+	const resolvedPlanes = {
+		root: computed(() => planes.root.value ?? fallback.value),
+		content: computed(() => planes.content.value ?? fallback.value),
+		viewport: computed(() => planes.viewport.value ?? fallback.value)
+	};
+	return {
+		registerPlane(plane, element) {
+			planes[plane].value = element;
+		},
+		registerFallback(element) {
+			fallback.value = element;
+		},
+		getPlane(plane) {
+			return resolvedPlanes[plane];
+		}
+	};
+}
+function useNodeSelectionPresentation() {
+	return inject(NODE_SELECTION_PRESENTATION_KEY, DETACHED_PRESENTATION);
+}
+//#endregion
+//#region src/composables/useNodeSelectionProjection.ts
+function resolveTargetElement(host, selfTargetSelector) {
+	if (host.dataset.dcLayerMode !== "self" || !selfTargetSelector) return host;
+	const candidate = host.querySelector(selfTargetSelector);
+	if (!candidate) return host;
+	const rect = candidate.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0 ? candidate : host;
+}
+function useNodeSelectionProjection(elRef, isSelected, options) {
+	const presentation = useNodeSelectionPresentation();
+	const projection = ref(null);
+	const target = computed(() => presentation.getPlane(options.plane.value).value);
+	let cleanupAutoUpdate = null;
+	function update() {
+		const host = elRef.value;
+		const plane = target.value;
+		if (!host || !plane || !isSelected.value) {
+			projection.value = null;
+			return;
+		}
+		const targetRect = resolveTargetElement(host, options.selfTargetSelector).getBoundingClientRect();
+		const planeRect = plane.getBoundingClientRect();
+		if (targetRect.width <= 0 || targetRect.height <= 0 || planeRect.width <= 0) {
+			projection.value = null;
+			return;
+		}
+		const materialBounds = {
+			top: targetRect.top - planeRect.top,
+			left: targetRect.left - planeRect.left,
+			width: targetRect.width,
+			height: targetRect.height
+		};
+		const bounds = options.kind === "root-segment" ? {
+			top: materialBounds.top,
+			left: 0,
+			width: planeRect.width,
+			height: materialBounds.height
+		} : { ...materialBounds };
+		projection.value = {
+			kind: options.kind,
+			plane: options.plane.value,
+			materialBounds,
+			bounds
+		};
+	}
+	function stopAutoUpdate() {
+		cleanupAutoUpdate?.();
+		cleanupAutoUpdate = null;
+	}
+	function startAutoUpdate() {
+		stopAutoUpdate();
+		const host = elRef.value;
+		const plane = target.value;
+		if (!host || !plane || !isSelected.value) {
+			projection.value = null;
+			return;
+		}
+		cleanupAutoUpdate = autoUpdate(resolveTargetElement(host, options.selfTargetSelector), plane, update, {
+			ancestorScroll: options.plane.value === "root",
+			ancestorResize: true,
+			elementResize: true,
+			layoutShift: true,
+			animationFrame: false
+		});
+	}
+	watch([
+		elRef,
+		isSelected,
+		target
+	], () => {
+		if (!isSelected.value) {
+			stopAutoUpdate();
+			projection.value = null;
+			return;
+		}
+		nextTick(startAutoUpdate);
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	onBeforeUnmount(stopAutoUpdate);
+	return {
+		projection,
+		target,
+		update
+	};
+}
+//#endregion
+//#region src/composables/useToolbarPosition.ts
+function useToolbarPosition(referenceRef, floatingRef, isActive, options = {}) {
+	const { gap = 8, interactionBoundary, targetSelector, selfTargetSelector, boundarySelector, padding = 8, interactionGeometry, interactionGeometryUpdate, placement = "left-start", orientation = "vertical" } = options;
+	const position = ref({
+		x: 0,
+		y: 0,
+		placement,
+		orientation,
+		strategy: "fixed",
+		visible: false
+	});
+	let cleanupAutoUpdate = null;
+	function resolveReference(host) {
+		const selector = targetSelector ?? (host.dataset.dcLayerMode === "self" ? selfTargetSelector : void 0);
+		if (!selector) return host;
+		const candidate = host.querySelector(selector);
+		if (!candidate) return host;
+		const rect = candidate.getBoundingClientRect();
+		return rect.width > 0 || rect.height > 0 ? candidate : host;
+	}
+	function isReferenceVisible(reference, boundary) {
+		const rect = reference.getBoundingClientRect();
+		const clip = boundary?.getBoundingClientRect() ?? {
+			top: 0,
+			right: window.innerWidth,
+			bottom: window.innerHeight,
+			left: 0
+		};
+		return rect.bottom > clip.top && rect.top < clip.bottom && rect.right > clip.left && rect.left < clip.right;
+	}
+	function resolveToolbarBoundary(host, reference) {
+		if (!boundarySelector) return null;
+		return host.closest(boundarySelector) ?? reference.closest(boundarySelector);
+	}
+	function applyPosition(next) {
+		const current = position.value;
+		if (current.x === next.x && current.y === next.y && current.placement === next.placement && current.orientation === next.orientation && current.strategy === next.strategy && current.visible === next.visible) return;
+		position.value = next;
+	}
+	async function update() {
+		const host = referenceRef.value;
+		const floating = floatingRef.value;
+		if (!host || !floating || !isActive.value) {
+			applyPosition({
+				...position.value,
+				visible: false
+			});
+			return;
+		}
+		const reference = resolveReference(host);
+		interactionGeometryUpdate?.();
+		const boundaryElement = interactionBoundary?.value ?? null;
+		const interactionRect = interactionGeometry?.value.visibleRect;
+		if (!(interactionGeometry ? interactionGeometry.value.visible : isReferenceVisible(reference, boundaryElement))) {
+			applyPosition({
+				...position.value,
+				visible: false
+			});
+			return;
+		}
+		const referenceRect = interactionRect ?? reference.getBoundingClientRect();
+		const floatingRect = floating.getBoundingClientRect();
+		const clipRect = boundaryElement?.getBoundingClientRect() ?? {
+			top: 0,
+			right: window.innerWidth,
+			bottom: window.innerHeight,
+			left: 0
+		};
+		const availableHeight = Math.max(0, clipRect.bottom - clipRect.top - padding * 2);
+		const availableWidth = Math.max(0, clipRect.right - clipRect.left - padding * 2);
+		const minY = clipRect.top + padding;
+		const maxY = Math.max(minY, clipRect.bottom - padding - floatingRect.height);
+		floating.style.maxHeight = `${availableHeight}px`;
+		if (placement === "top-end") {
+			floating.style.maxWidth = `${availableWidth}px`;
+			const minX = clipRect.left + padding;
+			const maxX = Math.max(minX, clipRect.right - padding - floatingRect.width);
+			const topY = referenceRect.top - gap - floatingRect.height;
+			const bottomY = referenceRect.bottom + gap;
+			const resolvedPlacement = topY >= minY || !(bottomY <= maxY) ? "top-end" : "bottom-end";
+			const requestedY = resolvedPlacement === "top-end" ? topY : bottomY;
+			applyPosition({
+				x: Math.min(Math.max(referenceRect.right - floatingRect.width, minX), maxX),
+				y: Math.min(Math.max(requestedY, minY), maxY),
+				placement: resolvedPlacement,
+				orientation,
+				strategy: "fixed",
+				visible: true
+			});
+			return;
+		}
+		floating.style.maxWidth = "";
+		applyPosition({
+			x: (resolveToolbarBoundary(host, reference)?.getBoundingClientRect() ?? referenceRect).left - gap - floatingRect.width,
+			y: Math.min(Math.max(referenceRect.top, minY), maxY),
+			placement: "left-start",
+			orientation,
+			strategy: "fixed",
+			visible: true
+		});
+	}
+	function stopAutoUpdate() {
+		cleanupAutoUpdate?.();
+		cleanupAutoUpdate = null;
+	}
+	function startAutoUpdate() {
+		stopAutoUpdate();
+		const host = referenceRef.value;
+		const floating = floatingRef.value;
+		if (!host || !floating || !isActive.value) return;
+		cleanupAutoUpdate = autoUpdate(resolveReference(host), floating, update, {
+			animationFrame: false,
+			ancestorResize: true,
+			ancestorScroll: true,
+			elementResize: true,
+			layoutShift: true
+		});
+	}
+	watch([
+		referenceRef,
+		floatingRef,
+		isActive
+	], () => {
+		if (isActive.value) startAutoUpdate();
+		else {
+			stopAutoUpdate();
+			applyPosition({
+				...position.value,
+				visible: false
+			});
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	onBeforeUnmount(stopAutoUpdate);
+	return {
+		position,
+		update
+	};
+}
+//#endregion
+//#region src/composables/useNodeState.ts
+/**
+* Computes reactive interaction state for a single schema node.
+*
+* @param getNodeId - Getter function returning the node ID (for reactivity safety)
+* @param ctx - The renderer context (from useRendererContext)
+*/
+function useNodeState(getNodeId, ctx) {
+	const { engine, dragOverNodeId } = ctx;
+	const isSelected = computed(() => engine.store.selectedNodeId.value === getNodeId());
+	const isHovered = computed(() => engine.store.hoveredNodeId.value === getNodeId());
+	const isDragOver = computed(() => dragOverNodeId.value === getNodeId());
+	return {
+		isSelected,
+		isHovered,
+		isDragOver,
+		interactionClasses: computed(() => ({
+			"dc-node--selected": isSelected.value,
+			"dc-node--hovered": isHovered.value,
+			"dc-node--drag-over": isDragOver.value
+		}))
+	};
+}
+//#endregion
+//#region src/composables/useWidgetNode.ts
+/**
+* Composable that extracts all widget node state and event handling logic.
+* This is the primary composable for building custom node renderers.
+*
+* @param getNode - Getter for the current schema node
+* @param ctx - The renderer context (from useRendererContext)
+*/
+function useWidgetNode(getNode, ctx) {
+	const { engine, componentMap, eventHooks } = ctx;
+	const state = useNodeState(() => getNode().id, ctx);
+	const meta = computed(() => engine.registry.getWidget(getNode().type));
+	const resolvedComponent = computed(() => componentMap[getNode().type]);
+	const layout = computed(() => resolveNodeLayout(getNode(), engine.registry, ctx.schema.value));
+	const inSortScope = computed(() => layout.value.sortScope !== false);
+	const isDragging = computed(() => engine.store.dragTarget.value?.sourceNodeId === getNode().id);
+	const visible = computed(() => layout.value.visible);
+	function readInstanceCtx() {
+		return {
+			node: getNode(),
+			schema: ctx.schema.value
+		};
+	}
+	function resolveMetaBehavior(field) {
+		if (typeof field !== "function") return field !== false;
+		return field(readInstanceCtx());
+	}
+	const useMask = computed(() => resolveMetaBehavior(meta.value?.mask));
+	const selectable = computed(() => resolveMetaBehavior(meta.value?.selectable));
+	const sortable = computed(() => resolveMetaBehavior(meta.value?.sortable));
+	const draggable = computed(() => {
+		if (!inSortScope.value || !sortable.value) return false;
+		return resolveMetaBehavior(meta.value?.draggable);
+	});
+	const wrapperClasses = computed(() => [
+		"dc-node",
+		"dc-node--widget",
+		{
+			"dc-node--masked": useMask.value,
+			"dc-node--unmasked": !useMask.value,
+			"dc-node--non-selectable": !selectable.value,
+			"dc-node--locked": inSortScope.value && !sortable.value,
+			"dc-node--unsorted": !inSortScope.value,
+			"dc-node--dragging": isDragging.value,
+			"dc-node--hidden": !visible.value
+		},
+		state.interactionClasses.value
+	]);
+	const selectPending = { value: false };
+	const handleSelect = (e) => {
+		if (!selectable.value || selectPending.value) return;
+		e.stopPropagation();
+		const nodeId = getNode().id;
+		runBeforeAfterHook(eventHooks.onBeforeSelect, {
+			nodeId,
+			event: e
+		}, () => engine.store.selectNode(nodeId), eventHooks.onAfterSelect ? () => eventHooks.onAfterSelect?.({ nodeId }) : void 0, selectPending);
+	};
+	const handleMouseEnter = () => {
+		const nodeId = getNode().id;
+		if (engine.store.hoveredNodeId.value === nodeId) return;
+		engine.store.hoverNode(nodeId);
+		eventHooks.onHoverChange?.({ nodeId });
+	};
+	const handleMouseLeave = () => {
+		if (engine.store.hoveredNodeId.value !== getNode().id) return;
+		engine.store.hoverNode(null);
+		eventHooks.onHoverChange?.({ nodeId: null });
+	};
+	return {
+		state,
+		resolvedComponent,
+		meta,
+		useMask,
+		selectable,
+		draggable,
+		sortable,
+		inSortScope,
+		isDragging,
+		visible,
+		layout,
+		wrapperClasses,
+		handleSelect,
+		handleMouseEnter,
+		handleMouseLeave
+	};
+}
+//#endregion
+//#region src/node-interaction.ts
+function resolveNodeInteractionPresentation(owner) {
+	return owner.kind === "container" ? {
+		geometryMode: "node-box",
+		selectionKind: "material-bounds",
+		toolbarPlacement: "top-end",
+		toolbarOrientation: "horizontal"
+	} : {
+		geometryMode: "root-band",
+		selectionKind: "root-segment",
+		toolbarPlacement: "left-start",
+		toolbarOrientation: "vertical"
+	};
+}
+//#endregion
+//#region src/widget-runtime.ts
+const WIDGET_RUNTIME_CONTEXT_KEY = Symbol("dc-widget-runtime");
+function createWidgetRuntimeContext(getNode) {
+	const ctx = useRendererContext();
+	const nodeId = computed(() => getNode().id);
+	const nodeType = computed(() => getNode().type);
+	function updateProps(patch) {
+		ctx.engine.execute({
+			type: CommandType.UPDATE_PROPS,
+			payload: {
+				nodeId: nodeId.value,
+				props: patch
+			}
+		});
+	}
+	function updateStyle(patch) {
+		ctx.engine.execute({
+			type: CommandType.UPDATE_PROPS,
+			payload: {
+				nodeId: nodeId.value,
+				props: {},
+				style: patch
+			}
+		});
+	}
+	return {
+		nodeId,
+		nodeType,
+		updateProps,
+		updateStyle,
+		updateContainerStyle: (patch) => updateStyle({ container: patch }),
+		updateContentStyle: (patch) => updateStyle({ content: patch })
+	};
+}
+function useWidgetRuntime() {
+	const ctx = inject(WIDGET_RUNTIME_CONTEXT_KEY);
+	if (!ctx) throw new Error("[dragcraft/renderer] WidgetRuntimeContext not found. Ensure this component is rendered by WidgetRenderer.");
+	return ctx;
+}
+//#endregion
+//#region src/components/DefaultContainerFallback.ts
+var DefaultContainerFallback_default = defineComponent({
+	name: "DcDefaultContainerFallback",
+	props: { node: {
+		type: Object,
+		required: true
+	} },
+	setup(props) {
+		return () => h("div", {
+			"class": "dc-unresolved-container",
+			"data-dc-component": "unresolved-container",
+			"data-dc-unresolved-container": props.node.id
+		}, Object.entries(props.node.container?.regions ?? {}).map(([regionId, nodes]) => {
+			const owner = {
+				kind: "container",
+				containerId: props.node.id,
+				regionId
+			};
+			return h("div", {
+				"key": regionId,
+				"class": "dc-container-region dc-container-region--unresolved",
+				"data-dc-component": "container-region",
+				"data-dc-state": "unresolved",
+				"data-dc-container-id": props.node.id,
+				"data-dc-container-region": regionId,
+				"role": "group",
+				"aria-label": regionId
+			}, nodes.map((node) => h(WidgetRenderer_default, {
+				key: node.id,
+				node,
+				owner
+			})));
+		}));
+	}
+});
+//#endregion
+//#region src/components/DefaultNodeHandle.ts
+/**
+* Default semantic selection handle for unmasked widgets and resolved containers.
+*/
+var DefaultNodeHandle_default = defineComponent({
+	name: "DcDefaultNodeHandle",
+	props: {
+		nodeId: {
+			type: String,
+			required: true
+		},
+		nodeType: {
+			type: String,
+			required: true
+		},
+		owner: {
+			type: Object,
+			required: true
+		},
+		onSelect: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const { t } = useI18n();
+		return () => {
+			const label = t("canvas.node-handle", "选中组件");
+			return h("button", {
+				"type": "button",
+				"class": "dc-node__handle",
+				"data-dc-component": "node-handle",
+				"onClick": props.onSelect,
+				"title": label,
+				"aria-label": label
+			}, [h("span", {
+				"class": "dc-node__handle-surface",
+				"data-dc-part": "surface"
+			}, [h("span", {
+				"class": "dc-node__handle-icon",
+				"data-dc-part": "icon",
+				"aria-hidden": "true"
+			}, [h(IconComponent, { size: 12 })])])]);
+		};
+	}
+});
+//#endregion
+//#region src/components/DefaultNodeMask.ts
+/**
+* Default mask overlay component for widgets with mask=true.
+* Renders a transparent overlay that blocks widget interaction
+* and captures clicks for selection.
+*/
+var DefaultNodeMask_default = defineComponent({
+	name: "DcDefaultNodeMask",
+	props: {
+		nodeId: {
+			type: String,
+			required: true
+		},
+		nodeType: {
+			type: String,
+			required: true
+		},
+		owner: {
+			type: Object,
+			required: true
+		},
+		onSelect: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => h("div", {
+			class: "dc-node__mask",
+			onClick: props.onSelect
+		});
+	}
+});
+//#endregion
+//#region src/components/DefaultNodeSelection.ts
+var DefaultNodeSelection_default = defineComponent({
+	name: "DcDefaultNodeSelection",
+	props: {
+		nodeId: {
+			type: String,
+			required: true
+		},
+		nodeType: {
+			type: String,
+			required: true
+		},
+		owner: {
+			type: Object,
+			required: true
+		},
+		projection: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => h("div", {
+			"class": "dc-node__selection-outline",
+			"data-dc-component": "node-selection",
+			"data-dc-state": props.projection.kind,
+			"aria-hidden": "true"
+		}, props.projection.kind === "root-segment" ? [
+			h("span", {
+				"class": "dc-node__selection-edge dc-node__selection-edge--block-start",
+				"data-dc-part": "block-start-edge"
+			}),
+			h("span", {
+				"class": "dc-node__selection-edge dc-node__selection-edge--inline-end",
+				"data-dc-part": "inline-end-edge"
+			}),
+			h("span", {
+				"class": "dc-node__selection-edge dc-node__selection-edge--block-end",
+				"data-dc-part": "block-end-edge"
+			}),
+			h("span", {
+				"class": "dc-node__selection-edge dc-node__selection-edge--inline-start",
+				"data-dc-part": "inline-start-edge"
+			})
+		] : void 0);
+	}
+});
+//#endregion
+//#region src/components/DefaultNodeToolbar.ts
+/**
+* Default per-node floating toolbar component.
+* Renders actions based on the resolved action list from the action registry.
+* Supports both 'button' and 'drag-handle' action types.
+*
+* Positioning is owned by WidgetRenderer's measurable floating wrapper. The
+* resolved placement controls whether actions use a vertical or horizontal row.
+*/
+var DefaultNodeToolbar_default = defineComponent({
+	name: "DcDefaultNodeToolbar",
+	props: {
+		nodeId: {
+			type: String,
+			required: true
+		},
+		nodeType: {
+			type: String,
+			required: true
+		},
+		owner: {
+			type: Object,
+			required: true
+		},
+		actions: {
+			type: Array,
+			required: true
+		},
+		state: {
+			type: Object,
+			required: true
+		},
+		toolbarPosition: {
+			type: Object,
+			default: void 0
+		},
+		onDragStart: {
+			type: Function,
+			required: true
+		},
+		onDragEnd: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => {
+			const pos = props.toolbarPosition;
+			const useFixed = pos != null;
+			const actionVNodes = props.actions.map((action) => {
+				if (action.type === "drag-handle") return h("div", {
+					"class": [
+						"dc-node__toolbar-btn",
+						"dc-node__toolbar-btn--drag",
+						{ "dc-node__toolbar-btn--disabled": action.disabled },
+						action.className
+					],
+					"data-dc-part": "action",
+					"data-dc-state": ["drag", action.disabled ? "disabled" : null].filter(Boolean).join(" "),
+					"title": action.label,
+					"aria-disabled": action.disabled ? "true" : void 0,
+					"draggable": !action.disabled,
+					"onDragstart": action.disabled ? void 0 : props.onDragStart,
+					"onDragend": action.disabled ? void 0 : props.onDragEnd
+				}, typeof action.icon === "string" ? action.icon : action.icon ? h(action.icon) : void 0);
+				return h("button", {
+					"type": "button",
+					"class": ["dc-node__toolbar-btn", action.className],
+					"data-dc-part": "action",
+					"data-dc-state": action.key === "delete" ? "danger" : void 0,
+					"title": action.label,
+					"disabled": action.disabled,
+					"onClick": action.handler
+				}, typeof action.icon === "string" ? action.icon : action.icon ? h(action.icon) : void 0);
+			});
+			return h("div", {
+				"class": ["dc-node__toolbar", {
+					"dc-node__toolbar--floating": useFixed,
+					[`dc-node__toolbar--${pos?.orientation ?? "vertical"}`]: true
+				}],
+				"data-dc-component": "node-toolbar",
+				"data-dc-state": [useFixed ? "floating" : null, pos?.orientation ?? "vertical"].filter(Boolean).join(" "),
+				"data-placement": pos?.placement,
+				"data-orientation": pos?.orientation
+			}, actionVNodes);
+		};
+	}
+});
+//#endregion
+//#region src/components/DefaultWidgetFallback.ts
+var DefaultWidgetFallback_default = defineComponent({
+	name: "DcDefaultWidgetFallback",
+	props: {
+		nodeId: {
+			type: String,
+			required: true
+		},
+		nodeType: {
+			type: String,
+			default: "unknown"
+		}
+	},
+	setup(props) {
+		return () => h("div", {
+			"class": "dc-widget-fallback",
+			"data-dc-component": "widget-fallback"
+		}, `Unknown widget: ${props.nodeType}`);
+	}
+});
+//#endregion
+//#region src/components/WidgetRenderer.ts
+const NODE_SURFACE_SELECTOR = "[data-dc-node-surface]";
+const TOOLBAR_BOUNDARY_SELECTOR = "[data-dc-toolbar-boundary]";
+const OVERLAY_BOUNDARY_SELECTOR = "[data-dc-overlay-boundary]";
+const CANVAS_INTERACTION_LAYER_SELECTOR = "[data-dc-canvas-interaction-layer]";
+const ContainerRuntimeProvider = defineComponent({
+	name: "DcContainerRuntimeProvider",
+	props: { runtime: {
+		type: Object,
+		required: true
+	} },
+	setup(props, { slots }) {
+		provide(CONTAINER_RUNTIME_CONTEXT_KEY, props.runtime);
+		return () => slots.default?.();
+	}
+});
+function resolveInteractionLayerTarget(host) {
+	if (typeof document === "undefined") return "body";
+	return host?.closest(".dc-canvas")?.querySelector(CANVAS_INTERACTION_LAYER_SELECTOR) ?? "body";
+}
+/**
+* WidgetRenderer — thin orchestration layer.
+*
+* Delegates all logic to composables (useWidgetNode, useNodeActions, useNodeDrag)
+* and renders via configurable extension components (nodeMask, nodeHandle,
+* nodeToolbar, widgetFallback, nodeWrapper).
+*/
+var WidgetRenderer_default = defineComponent({
+	name: "DcWidgetRenderer",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		owner: {
+			type: Object,
+			default: () => ({ kind: "root" })
+		},
+		selectionPlane: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const ctx = useRendererContext();
+		const { extensions } = ctx;
+		provide(WIDGET_RUNTIME_CONTEXT_KEY, createWidgetRuntimeContext(() => props.node));
+		const containerRuntime = createContainerRuntime(() => props.node, ctx);
+		const widget = useWidgetNode(() => props.node, ctx);
+		const { actions } = useNodeActions(() => props.node, ctx, () => props.owner);
+		const drag = useNodeDrag(() => props.node, ctx);
+		const interactionPresentation = resolveNodeInteractionPresentation(props.owner);
+		const inheritedSelectionPlane = inject(NODE_SELECTION_PLANE_KEY, ref("content"));
+		const subtreeSelectionPlane = computed(() => props.selectionPlane ?? inheritedSelectionPlane.value);
+		const projectionPlane = computed(() => props.owner.kind === "root" ? "root" : subtreeSelectionPlane.value);
+		provide(NODE_SELECTION_PLANE_KEY, subtreeSelectionPlane);
+		const containerPlan = computed(() => props.node.container ? createContainerPlan(props.node, ctx.engine.registry) : null);
+		const isResolvedContainer = computed(() => {
+			const plan = containerPlan.value;
+			if (plan?.ok !== true || !widget.resolvedComponent.value) return false;
+			const declaredRegionIds = new Set(plan.plan.variant.regions.map((region) => region.id));
+			return Object.keys(props.node.container?.regions ?? {}).every((regionId) => declaredRegionIds.has(regionId));
+		});
+		const isSelfPositionedLayer = computed(() => {
+			if (props.owner.kind === "container") return false;
+			const placement = widget.layout.value.placement;
+			return placement.kind === "layer" && placement.mode === "self";
+		});
+		const usesBlockingMask = computed(() => widget.useMask.value && !isSelfPositionedLayer.value && !isResolvedContainer.value);
+		const usesSelectionHandle = computed(() => !usesBlockingMask.value && widget.selectable.value && !isSelfPositionedLayer.value);
+		const nodeElRef = ref(null);
+		const toolbarElRef = ref(null);
+		const handleAnchorElRef = ref(null);
+		const isExternalHandleActive = computed(() => isResolvedContainer.value && usesSelectionHandle.value && !widget.state.isSelected.value);
+		const { geometry: interactionGeometry, update: updateInteractionGeometry } = useNodeInteractionGeometry(nodeElRef, widget.state.isSelected, {
+			mode: interactionPresentation.geometryMode,
+			boundarySelector: OVERLAY_BOUNDARY_SELECTOR,
+			selfTargetSelector: NODE_SURFACE_SELECTOR
+		});
+		const { projection: selectionProjection, target: selectionTarget } = useNodeSelectionProjection(nodeElRef, widget.state.isSelected, {
+			kind: interactionPresentation.selectionKind,
+			plane: projectionPlane,
+			selfTargetSelector: NODE_SURFACE_SELECTOR
+		});
+		const { position: toolbarPosition } = useToolbarPosition(nodeElRef, toolbarElRef, widget.state.isSelected, {
+			interactionBoundary: ctx.interactionBoundary,
+			interactionGeometry,
+			interactionGeometryUpdate: updateInteractionGeometry,
+			selfTargetSelector: NODE_SURFACE_SELECTOR,
+			boundarySelector: TOOLBAR_BOUNDARY_SELECTOR,
+			placement: interactionPresentation.toolbarPlacement,
+			orientation: interactionPresentation.toolbarOrientation
+		});
+		const { geometry: handleGeometry, update: updateHandleGeometry } = useNodeInteractionGeometry(nodeElRef, isExternalHandleActive, {
+			mode: "node-box",
+			boundarySelector: OVERLAY_BOUNDARY_SELECTOR
+		});
+		const { position: handlePosition } = useToolbarPosition(nodeElRef, handleAnchorElRef, isExternalHandleActive, {
+			interactionBoundary: ctx.interactionBoundary,
+			interactionGeometry: handleGeometry,
+			interactionGeometryUpdate: updateHandleGeometry,
+			boundarySelector: TOOLBAR_BOUNDARY_SELECTOR,
+			placement: "left-start",
+			orientation: "vertical"
+		});
+		function isDirectNodeHit(event) {
+			const target = event.target;
+			return target instanceof Element && target.closest("[data-node-id]") === event.currentTarget;
+		}
+		function handleDirectSelect(event) {
+			if (isDirectNodeHit(event)) widget.handleSelect(event);
+		}
+		function handleMouseOver(event) {
+			if (isDirectNodeHit(event)) widget.handleMouseEnter();
+		}
+		return () => {
+			ctx.engine.store.schema.value;
+			const node = props.node;
+			const interactionLayerTarget = resolveInteractionLayerTarget(nodeElRef.value);
+			const placement = widget.layout.value.placement;
+			const isContainerOwned = props.owner.kind === "container";
+			const ownerKind = isContainerOwned ? "container" : "root";
+			const resolvedContainer = isResolvedContainer.value;
+			const NodeMask = extensions.nodeMask ?? DefaultNodeMask_default;
+			const NodeHandle = extensions.nodeHandle ?? DefaultNodeHandle_default;
+			const NodeToolbar = extensions.nodeToolbar ?? DefaultNodeToolbar_default;
+			const NodeSelection = extensions.nodeSelection ?? DefaultNodeSelection_default;
+			const WidgetFallback = extensions.widgetFallback ?? DefaultWidgetFallback_default;
+			const NodeWrapper = widget.meta.value?.wrapper ?? extensions.nodeWrapper;
+			const widgetProps = { ...node.props };
+			const wrapperStyle = normalizeStyleValueMap(node.style?.container);
+			let contentStyle = normalizeStyleValueMap(node.style?.content);
+			if (usesBlockingMask.value) {
+				contentStyle = contentStyle ?? {};
+				contentStyle.pointerEvents = "none";
+			}
+			let innerContent;
+			if (node.container && !resolvedContainer) innerContent = h(DefaultContainerFallback_default, { node });
+			else if (widget.resolvedComponent.value) {
+				const material = h(widget.resolvedComponent.value, {
+					...widgetProps,
+					"style": contentStyle,
+					"data-dc-node-surface": ""
+				});
+				innerContent = resolvedContainer ? h(ContainerRuntimeProvider, { runtime: containerRuntime }, { default: () => material }) : material;
+			} else innerContent = h(WidgetFallback, {
+				"nodeId": node.id,
+				"nodeType": node.type,
+				"data-dc-node-surface": ""
+			});
+			const wrapperChildren = [innerContent];
+			if (selectionProjection.value && selectionTarget.value) {
+				const projection = selectionProjection.value;
+				wrapperChildren.push(h(Teleport, { to: selectionTarget.value }, [h("div", {
+					"class": [
+						"dc-node__selection-projection",
+						`dc-node__selection-projection--${projection.kind}`,
+						`dc-node__selection-projection--${ownerKind}-owned`
+					],
+					"data-node-id": node.id,
+					"data-node-type": node.type,
+					"data-dc-selection-plane": projection.plane,
+					"style": {
+						top: `${projection.bounds.top}px`,
+						left: `${projection.bounds.left}px`,
+						width: `${projection.bounds.width}px`,
+						height: `${projection.bounds.height}px`
+					}
+				}, [h(NodeSelection, {
+					nodeId: node.id,
+					nodeType: node.type,
+					owner: props.owner,
+					projection
+				})])]));
+			}
+			if (usesBlockingMask.value) wrapperChildren.push(h(NodeMask, {
+				nodeId: node.id,
+				nodeType: node.type,
+				owner: props.owner,
+				onSelect: widget.handleSelect
+			}));
+			if (usesSelectionHandle.value && !widget.state.isSelected.value) {
+				const handleVNode = h(NodeHandle, {
+					nodeId: node.id,
+					nodeType: node.type,
+					owner: props.owner,
+					onSelect: widget.handleSelect
+				});
+				if (resolvedContainer) {
+					const position = handlePosition.value;
+					wrapperChildren.push(h(Teleport, { to: interactionLayerTarget }, [h("div", {
+						"ref": handleAnchorElRef,
+						"class": ["dc-node__handle-anchor", { "dc-node__handle-anchor--visible": position.visible }],
+						"data-dc-component": "node-handle-anchor",
+						"data-dc-state": position.visible ? "visible" : "hidden",
+						"data-dc-node-handle-for": node.id,
+						"style": {
+							position: position.strategy,
+							top: 0,
+							left: 0,
+							transform: `translate3d(${position.x}px, ${position.y}px, 0)`
+						}
+					}, [handleVNode])]));
+				} else wrapperChildren.push(handleVNode);
+			}
+			if (widget.state.isSelected.value) {
+				const toolbarVNode = h(NodeToolbar, {
+					nodeId: node.id,
+					nodeType: node.type,
+					owner: props.owner,
+					actions: actions.value,
+					state: widget.state,
+					toolbarPosition: toolbarPosition.value,
+					onDragStart: drag.handleDragStart,
+					onDragEnd: drag.handleDragEnd
+				});
+				wrapperChildren.push(h(Teleport, { to: interactionLayerTarget }, [h("div", {
+					"ref": toolbarElRef,
+					"class": "dc-node__toolbar-anchor",
+					"data-placement": toolbarPosition.value.placement,
+					"data-orientation": toolbarPosition.value.orientation,
+					"style": {
+						position: toolbarPosition.value.strategy,
+						top: 0,
+						left: 0,
+						transform: `translate3d(${toolbarPosition.value.x}px, ${toolbarPosition.value.y}px, 0)`,
+						visibility: toolbarPosition.value.visible ? "visible" : "hidden",
+						pointerEvents: toolbarPosition.value.visible ? "auto" : "none"
+					}
+				}, [toolbarVNode])]));
+			}
+			const themeStates = [
+				widget.useMask.value ? "masked" : "unmasked",
+				!widget.selectable.value ? "non-selectable" : null,
+				widget.inSortScope.value && !widget.sortable.value ? "locked" : null,
+				!widget.inSortScope.value ? "unsorted" : null,
+				widget.isDragging.value ? "dragging" : null,
+				!widget.visible.value ? "hidden" : null,
+				widget.state.isSelected.value ? "selected" : null,
+				widget.state.isHovered.value ? "hovered" : null,
+				widget.state.isDragOver.value ? "drag-over" : null,
+				`${ownerKind}-owned`
+			].filter(Boolean).join(" ");
+			const coreWrapper = h("div", {
+				"ref": nodeElRef,
+				"class": [widget.wrapperClasses.value, `dc-node--${ownerKind}-owned`],
+				"data-dc-component": "node",
+				"data-dc-state": themeStates,
+				"data-dc-node-owner": ownerKind,
+				"style": wrapperStyle,
+				"data-node-id": node.id,
+				"data-node-type": node.type,
+				"data-dc-layout-placement": isContainerOwned ? void 0 : placement.kind,
+				"data-dc-layer-mode": !isContainerOwned && placement.kind === "layer" ? placement.mode : void 0,
+				"data-dc-layout-region": isContainerOwned ? void 0 : widget.layout.value.region,
+				"data-dc-sort-scope": isContainerOwned || widget.layout.value.sortScope === false ? void 0 : widget.layout.value.sortScope,
+				"data-dc-visible": widget.visible.value ? void 0 : "false",
+				"onMouseover": resolvedContainer ? void 0 : handleMouseOver,
+				"onMouseleave": resolvedContainer ? void 0 : widget.handleMouseLeave,
+				"onClick": isSelfPositionedLayer.value && widget.selectable.value ? widget.handleSelect : resolvedContainer && widget.selectable.value ? handleDirectSelect : void 0
+			}, wrapperChildren);
+			if (NodeWrapper) return h(NodeWrapper, {
+				nodeId: node.id,
+				nodeType: node.type,
+				owner: props.owner,
+				state: widget.state,
+				meta: widget.meta.value
+			}, { default: () => coreWrapper });
+			return coreWrapper;
+		};
+	}
+});
+//#endregion
+//#region src/components/ContainerRegionOutlet.ts
+function isNestedRegionEvent(event, regionElement) {
+	return event.target instanceof Element && event.target.closest("[data-dc-container-region]") !== regionElement;
+}
+var ContainerRegionOutlet_default = defineComponent({
+	name: "DcContainerRegionOutlet",
+	inheritAttrs: false,
+	props: {
+		regionId: {
+			type: String,
+			required: true
+		},
+		as: {
+			type: [String, Object],
+			default: "div"
+		},
+		resolveDropIndex: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { attrs }) {
+		const ctx = useRendererContext();
+		const runtime = useContainerRuntime();
+		const definition = computed(() => runtime.regionDefinitions.value.find((item) => item.id === props.regionId));
+		const regionNodes = computed(() => runtime.getRegionNodes(props.regionId));
+		const containerMeta = computed(() => {
+			const containerNode = ctx.schemaIndex.value.index.get(runtime.nodeId.value)?.node;
+			return containerNode ? ctx.engine.registry.getWidget(containerNode.type) : void 0;
+		});
+		const isEmpty = computed(() => regionNodes.value.length === 0);
+		const isActive = computed(() => {
+			const destination = ctx.activeDestination.value;
+			return destination?.kind === "container" && destination.containerId === runtime.nodeId.value && destination.regionId === props.regionId;
+		});
+		const isForbidden = computed(() => isActive.value && ctx.containerDropDecision.value?.allowed === false);
+		function handleDragOver(event) {
+			const regionElement = event.currentTarget;
+			if (isNestedRegionEvent(event, regionElement)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const resolver = props.resolveDropIndex ?? containerMeta.value?.containerAdapter?.resolveDropIndex;
+			if (!resolver) {
+				ctx.onContainerDragOver?.({
+					event,
+					containerId: runtime.nodeId.value,
+					regionId: props.regionId,
+					allowed: false,
+					code: "CONTAINER_DROP_ADAPTER_MISSING"
+				});
+				return;
+			}
+			try {
+				const nodes = regionNodes.value;
+				const index = resolver({
+					event,
+					regionElement,
+					itemElements: Array.from(regionElement.querySelectorAll(":scope > [data-node-id]")),
+					nodes
+				});
+				if (index === null) {
+					ctx.onContainerDragOver?.({
+						event,
+						containerId: runtime.nodeId.value,
+						regionId: props.regionId,
+						allowed: false,
+						code: "CONTAINER_DROP_NO_TARGET"
+					});
+					return;
+				}
+				if (!Number.isInteger(index) || index < 0 || index > nodes.length) {
+					ctx.onContainerDragOver?.({
+						event,
+						containerId: runtime.nodeId.value,
+						regionId: props.regionId,
+						allowed: false,
+						code: "CONTAINER_DROP_ADAPTER_INVALID"
+					});
+					return;
+				}
+				ctx.onContainerDragOver?.({
+					event,
+					destination: {
+						kind: "container",
+						containerId: runtime.nodeId.value,
+						regionId: props.regionId,
+						index
+					}
+				});
+			} catch (error) {
+				ctx.onContainerDragOver?.({
+					event,
+					containerId: runtime.nodeId.value,
+					regionId: props.regionId,
+					allowed: false,
+					code: "CONTAINER_DROP_ADAPTER_FAILED",
+					message: error instanceof Error ? error.message : String(error)
+				});
+			}
+		}
+		function handleDragLeave(event) {
+			const regionElement = event.currentTarget;
+			if (isNestedRegionEvent(event, regionElement)) return;
+			event.stopPropagation();
+			ctx.onContainerDragLeave?.(event);
+		}
+		function handleDrop(event) {
+			const regionElement = event.currentTarget;
+			if (isNestedRegionEvent(event, regionElement)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			ctx.onContainerDrop?.(event);
+		}
+		return () => {
+			const children = regionNodes.value.map((node) => h(WidgetRenderer_default, {
+				key: node.id,
+				node,
+				owner: {
+					kind: "container",
+					containerId: runtime.nodeId.value,
+					regionId: props.regionId
+				}
+			}));
+			const DropIndicator = ctx.extensions.dropIndicator ?? DefaultDropIndicator_default;
+			const EmptyState = ctx.extensions.emptyState ?? DefaultEmptyState_default;
+			const ForbiddenOverlay = ctx.extensions.forbiddenOverlay ?? DefaultForbiddenOverlay_default;
+			if (isEmpty.value) children.push(h(EmptyState, { isDragOver: isActive.value }));
+			if (isActive.value && !isForbidden.value) {
+				const index = ctx.activeDestination.value?.index;
+				if (Number.isInteger(index) && index != null && index >= 0 && index <= regionNodes.value.length) children.splice(index, 0, h(DropIndicator, { key: "__container-drop-indicator__" }));
+			}
+			if (isForbidden.value) children.push(h(ForbiddenOverlay, {
+				widgetType: ctx.engine.store.dragTarget.value?.widgetType ?? "",
+				reason: ctx.containerDropDecision.value
+			}));
+			const themeStates = [
+				isEmpty.value ? "empty" : null,
+				isActive.value ? "active" : null,
+				isForbidden.value ? "forbidden" : null
+			].filter(Boolean).join(" ") || void 0;
+			return h(props.as, mergeProps(attrs, {
+				"class": ["dc-container-region", {
+					"dc-container-region--empty": isEmpty.value,
+					"dc-container-region--active": isActive.value,
+					"dc-container-region--forbidden": isForbidden.value
+				}],
+				"data-dc-component": "container-region",
+				"data-dc-state": themeStates,
+				"data-dc-container-id": runtime.nodeId.value,
+				"data-dc-container-region": props.regionId,
+				"role": attrs.role ?? "group",
+				"aria-label": attrs["aria-label"] ?? definition.value?.title ?? props.regionId,
+				"aria-disabled": isForbidden.value ? "true" : void 0,
+				"onDragover": handleDragOver,
+				"onDragleave": handleDragLeave,
+				"onDrop": handleDrop
+			}), children);
+		};
+	}
+});
+//#endregion
+//#region src/components/DefaultContainerShell.ts
+const CHROME_MEASURE_SELECTOR = "[data-dc-chrome-position=\"fixed\"][data-dc-reserve-mode=\"measure\"][data-dc-avoid-content=\"true\"]";
+function sizeToCss(value) {
+	return typeof value === "number" ? `${value}px` : value ?? "0px";
+}
+function edgeStyle(edge) {
+	switch (edge) {
+		case "block-start": return {
+			top: "0px",
+			right: "0px",
+			left: "0px"
+		};
+		case "block-end": return {
+			right: "0px",
+			bottom: "0px",
+			left: "0px"
+		};
+		case "inline-start": return {
+			top: "0px",
+			bottom: "0px",
+			left: "0px"
+		};
+		case "inline-end": return {
+			top: "0px",
+			right: "0px",
+			bottom: "0px"
+		};
+	}
+}
+function chromeItemStyle(placement) {
+	if (placement.position === "flow") return {
+		position: "relative",
+		pointerEvents: "auto"
+	};
+	if (placement.position === "fixed") return {
+		position: "relative",
+		zIndex: "20",
+		pointerEvents: "auto"
+	};
+	return {
+		position: "sticky",
+		zIndex: "20",
+		pointerEvents: "auto",
+		...edgeStyle(placement.edge)
+	};
+}
+function fixedChromeStackStyle(edge) {
+	const style = {
+		position: "absolute",
+		display: "flex",
+		pointerEvents: "none"
+	};
+	if (edge === "block-start" || edge === "block-end") {
+		style.flexDirection = edge === "block-start" ? "column" : "column-reverse";
+		style.left = "0px";
+		style.right = "0px";
+		style[edge === "block-start" ? "top" : "bottom"] = "0px";
+	} else {
+		style.flexDirection = edge === "inline-start" ? "row" : "row-reverse";
+		style.top = "var(--dc-inset-block-start)";
+		style.bottom = "var(--dc-inset-block-end)";
+		style[edge === "inline-start" ? "left" : "right"] = "0px";
+	}
+	return style;
+}
+function layerItemStyle(placement) {
+	if (placement.mode === "self") return {
+		position: "absolute",
+		inset: "0px",
+		pointerEvents: "none"
+	};
+	const style = {
+		position: "absolute",
+		pointerEvents: "auto"
+	};
+	const block = placement.anchor.block ?? "end";
+	const inline = placement.anchor.inline ?? "end";
+	if (block === "start") style.top = sizeToCss(placement.offset?.blockStart ?? "calc(var(--dc-inset-block-start) + 16px)");
+	else if (block === "center") style.top = "50%";
+	else style.bottom = sizeToCss(placement.offset?.blockEnd ?? "calc(var(--dc-inset-block-end) + 16px)");
+	if (inline === "start") style.left = sizeToCss(placement.offset?.inlineStart ?? "calc(var(--dc-inset-inline-start) + 16px)");
+	else if (inline === "center") style.left = "50%";
+	else style.right = sizeToCss(placement.offset?.inlineEnd ?? "calc(var(--dc-inset-inline-end) + 16px)");
+	if (block === "center" && inline === "center") style.transform = "translate(-50%, -50%)";
+	else if (block === "center") style.transform = "translateY(-50%)";
+	else if (inline === "center") style.transform = "translateX(-50%)";
+	return style;
+}
+function insetVariables(plan) {
+	const sized = {
+		"block-start": [],
+		"block-end": [],
+		"inline-start": [],
+		"inline-end": []
+	};
+	const measuredFallback = {
+		"block-start": [],
+		"block-end": [],
+		"inline-start": [],
+		"inline-end": []
+	};
+	for (const entry of plan?.chrome ?? []) {
+		const placement = entry.layout.placement;
+		if (placement.position !== "fixed" || !placement.avoidContent) continue;
+		if (placement.reserve.mode === "size") sized[placement.edge].push(sizeToCss(placement.reserve.size));
+		else if (placement.reserve.mode === "measure" && placement.reserve.size !== void 0) measuredFallback[placement.edge].push(sizeToCss(placement.reserve.size));
+	}
+	const result = {};
+	for (const [edge, sizes] of Object.entries(sized)) result[`--dc-sized-inset-${edge}`] = sizes.length > 1 ? `calc(${sizes.join(" + ")})` : sizes[0] ?? "0px";
+	for (const [edge, sizes] of Object.entries(measuredFallback)) result[`--dc-measured-inset-${edge}`] = sizes.length > 1 ? `calc(${sizes.join(" + ")})` : sizes[0] ?? "0px";
+	return result;
+}
+const DefaultContainerShell = defineComponent({
+	name: "DcDefaultContainerShell",
+	props: {
+		isEmpty: {
+			type: Boolean,
+			default: false
+		},
+		regionVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		chromeVNodes: {
+			type: Array,
+			default: () => []
+		},
+		layerVNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		forbiddenOverlayVNode: {
+			type: Object,
+			default: null
+		},
+		layoutPlan: {
+			type: Object,
+			default: void 0
+		},
+		surfaceStyle: {
+			type: Object,
+			default: void 0
+		},
+		selectionPresentation: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const shellRef = ref(null);
+		let resizeObserver = null;
+		function updateMeasuredInsets() {
+			const shell = shellRef.value;
+			if (!shell) return;
+			const totals = {
+				"block-start": 0,
+				"block-end": 0,
+				"inline-start": 0,
+				"inline-end": 0
+			};
+			for (const item of Array.from(shell.querySelectorAll(CHROME_MEASURE_SELECTOR))) {
+				const edge = item.dataset.dcChromeEdge;
+				const rect = item.getBoundingClientRect();
+				totals[edge] += edge === "block-start" || edge === "block-end" ? rect.height : rect.width;
+			}
+			for (const [edge, value] of Object.entries(totals)) shell.style.setProperty(`--dc-measured-inset-${edge}`, `${value}px`);
+		}
+		function refreshMeasuredInsets() {
+			resizeObserver?.disconnect();
+			if (typeof ResizeObserver !== "undefined") {
+				resizeObserver = new ResizeObserver(updateMeasuredInsets);
+				for (const item of Array.from(shellRef.value?.querySelectorAll(CHROME_MEASURE_SELECTOR) ?? [])) resizeObserver.observe(item);
+			}
+			nextTick(updateMeasuredInsets);
+		}
+		onMounted(refreshMeasuredInsets);
+		onUpdated(refreshMeasuredInsets);
+		onBeforeUnmount(() => resizeObserver?.disconnect());
+		return () => {
+			const additionalRegions = Object.entries(props.regionVNodes).filter(([region]) => region !== DEFAULT_LAYOUT_REGION).map(([region, nodes]) => h("div", {
+				"key": region,
+				"class": "dc-container-shell__region",
+				"data-dc-layout-region": region
+			}, nodes));
+			const contentChrome = {
+				"block-start": [],
+				"block-end": [],
+				"inline-start": [],
+				"inline-end": []
+			};
+			const fixedChrome = {
+				"block-start": {
+					reserved: [],
+					overlay: []
+				},
+				"block-end": {
+					reserved: [],
+					overlay: []
+				},
+				"inline-start": {
+					reserved: [],
+					overlay: []
+				},
+				"inline-end": {
+					reserved: [],
+					overlay: []
+				}
+			};
+			for (const [index, entry] of (props.layoutPlan?.chrome ?? []).entries()) {
+				const placement = entry.layout.placement;
+				const item = h("div", {
+					"key": entry.node.id,
+					"class": ["dc-container-shell__chrome-item", `dc-container-shell__chrome-item--${placement.position}`],
+					"data-dc-chrome-edge": placement.edge,
+					"data-dc-chrome-position": placement.position,
+					"data-dc-reserve-mode": placement.reserve.mode,
+					"data-dc-avoid-content": String(placement.avoidContent),
+					"style": chromeItemStyle(placement)
+				}, [props.chromeVNodes[index]]);
+				if (placement.position === "fixed") {
+					const stack = placement.avoidContent ? "reserved" : "overlay";
+					fixedChrome[placement.edge][stack].push(item);
+				} else contentChrome[placement.edge].push(item);
+			}
+			const fixedChromeStacks = Object.entries(fixedChrome).flatMap(([edge, groups]) => ["reserved", "overlay"].flatMap((stack) => {
+				const items = groups[stack];
+				return items.length > 0 ? [h("div", {
+					"key": `${edge}:${stack}`,
+					"class": [
+						"dc-container-shell__chrome-stack",
+						`dc-container-shell__chrome-stack--${edge}`,
+						`dc-container-shell__chrome-stack--${stack}`
+					],
+					"data-dc-chrome-edge": edge,
+					"data-dc-avoid-content-stack": String(stack === "reserved"),
+					"style": fixedChromeStackStyle(edge)
+				}, items)] : [];
+			}));
+			const layers = Array.from(props.layoutPlan?.layers.entries() ?? []).map(([layer, entries]) => {
+				const vnodes = props.layerVNodes[layer] ?? [];
+				return h("div", {
+					"key": layer,
+					"class": "dc-container-shell__layer",
+					"data-dc-layer": layer,
+					"style": {
+						position: "absolute",
+						inset: "0px",
+						zIndex: "30",
+						pointerEvents: "none"
+					}
+				}, entries.map((entry, index) => {
+					const placement = entry.layout.placement;
+					return h("div", {
+						"key": entry.node.id,
+						"class": ["dc-container-shell__layer-item", `dc-container-shell__layer-item--${placement.mode}`],
+						"data-dc-layer-mode": placement.mode,
+						"data-dc-layer-block": placement.anchor.block ?? "end",
+						"data-dc-layer-inline": placement.anchor.inline ?? "end",
+						"style": layerItemStyle(placement)
+					}, [vnodes[index]]);
+				}));
+			});
+			return h("div", {
+				"ref": shellRef,
+				"class": "dc-container-shell",
+				"data-dc-component": "container-shell",
+				"data-dc-state": props.isEmpty ? "empty" : void 0,
+				"style": insetVariables(props.layoutPlan)
+			}, [
+				h("div", {
+					class: "dc-container-shell__content",
+					style: {
+						position: "relative",
+						boxSizing: "border-box"
+					}
+				}, [h("div", { class: "dc-container-shell__content-layout" }, [
+					...contentChrome["block-start"],
+					h("div", { class: "dc-container-shell__content-row" }, [
+						contentChrome["inline-start"].length > 0 ? h("div", { class: "dc-container-shell__content-edge dc-container-shell__content-edge--inline-start" }, contentChrome["inline-start"]) : null,
+						h("div", {
+							class: "dc-container-shell__content-surface",
+							style: props.surfaceStyle
+						}, [...slots.default?.() ?? [], ...additionalRegions]),
+						contentChrome["inline-end"].length > 0 ? h("div", { class: "dc-container-shell__content-edge dc-container-shell__content-edge--inline-end" }, contentChrome["inline-end"]) : null
+					]),
+					...contentChrome["block-end"],
+					h("div", {
+						"ref": (element) => {
+							props.selectionPresentation?.registerPlane("content", element instanceof HTMLElement ? element : null);
+						},
+						"class": "dc-node-selection-plane dc-node-selection-plane--content",
+						"data-dc-selection-plane": "content",
+						"aria-hidden": "true"
+					})
+				])]),
+				fixedChromeStacks.length > 0 ? h("div", {
+					class: "dc-container-shell__chrome",
+					style: {
+						position: "absolute",
+						inset: "0px",
+						zIndex: "20",
+						pointerEvents: "none"
+					}
+				}, fixedChromeStacks) : null,
+				...layers,
+				h("div", {
+					"ref": (element) => {
+						props.selectionPresentation?.registerPlane("root", element instanceof HTMLElement ? element : null);
+					},
+					"class": "dc-node-selection-plane dc-node-selection-plane--root",
+					"data-dc-selection-plane": "root",
+					"aria-hidden": "true"
+				}),
+				h("div", {
+					"ref": (element) => {
+						props.selectionPresentation?.registerPlane("viewport", element instanceof HTMLElement ? element : null);
+					},
+					"class": "dc-node-selection-plane dc-node-selection-plane--viewport",
+					"data-dc-selection-plane": "viewport",
+					"aria-hidden": "true"
+				}),
+				props.forbiddenOverlayVNode
+			]);
+		};
+	}
+});
+const DefaultContainerShellWithOverlay = DefaultContainerShell;
+DefaultContainerShellWithOverlay.__dcHandlesForbiddenOverlay = true;
+//#endregion
+//#region src/components/RootRenderer.ts
+function handlesForbiddenOverlay(component) {
+	return Boolean(component.__dcHandlesForbiddenOverlay);
+}
+function regionEntryIndex(plan, entry) {
+	return (plan.regions.get(entry.layout.region ?? DEFAULT_LAYOUT_REGION) ?? []).findIndex((candidate) => candidate.node.id === entry.node.id);
+}
+function insertDropIndicator(regionVNodes, plan, schema, engine, destination, legacyIndex, indicator) {
+	if (destination?.kind === "container") return;
+	const sortScope = destination === void 0 ? DEFAULT_SORT_SCOPE : destination?.sortScope;
+	if (!sortScope) return;
+	const entries = plan.sortScopes.get(sortScope) ?? [];
+	const requestedIndex = destination?.index ?? legacyIndex;
+	const index = requestedIndex == null ? entries.length : Math.max(0, Math.min(requestedIndex, entries.length));
+	const dragTarget = engine.store.dragTarget.value;
+	const draggedEntry = dragTarget?.sourceNodeId ? plan.entries.find((entry) => entry.node.id === dragTarget.sourceNodeId) : void 0;
+	const draggedLayout = !draggedEntry && dragTarget?.widgetType ? resolveNodeLayout({
+		id: "__drop-indicator__",
+		type: dragTarget.widgetType,
+		props: {}
+	}, engine.registry, schema) : void 0;
+	const inferredRegion = draggedEntry?.layout.region ?? (draggedLayout?.placement.kind === "flow" ? draggedLayout.region : void 0);
+	const adjacentEntry = index < entries.length ? entries[index] : entries.at(-1);
+	const region = inferredRegion ?? adjacentEntry?.layout.region ?? DEFAULT_LAYOUT_REGION;
+	const regionNodes = regionVNodes[region] ?? (regionVNodes[region] = []);
+	const nextRegionEntry = entries.slice(index).find((entry) => (entry.layout.region ?? DEFAULT_LAYOUT_REGION) === region);
+	const previousRegionEntry = entries.slice(0, index).findLast((entry) => (entry.layout.region ?? DEFAULT_LAYOUT_REGION) === region);
+	if (!nextRegionEntry && !previousRegionEntry) {
+		regionNodes.push(indicator);
+		return;
+	}
+	const insertIndex = nextRegionEntry ? regionEntryIndex(plan, nextRegionEntry) : regionEntryIndex(plan, previousRegionEntry) + 1;
+	regionNodes.splice(Math.max(0, insertIndex), 0, indicator);
+}
+var RootRenderer_default = defineComponent({
+	name: "DcRootRenderer",
+	props: {
+		engine: {
+			type: Object,
+			required: true
+		},
+		componentMap: {
+			type: Object,
+			required: true
+		},
+		extensions: {
+			type: Object,
+			default: () => ({})
+		},
+		eventHooks: {
+			type: Object,
+			default: void 0
+		},
+		actionInterceptors: {
+			type: Array,
+			default: void 0
+		},
+		actionRegistry: {
+			type: Object,
+			default: void 0
+		},
+		dragOverNodeId: {
+			type: Object,
+			default: void 0
+		},
+		dragOverIndex: {
+			type: Object,
+			default: void 0
+		},
+		activeDestination: {
+			type: Object,
+			default: void 0
+		},
+		containerDropDecision: {
+			type: Object,
+			default: void 0
+		},
+		onContainerDragOver: {
+			type: Function,
+			default: void 0
+		},
+		onContainerDragLeave: {
+			type: Function,
+			default: void 0
+		},
+		onContainerDrop: {
+			type: Function,
+			default: void 0
+		},
+		interactionBoundary: {
+			type: Object,
+			default: void 0
+		},
+		isForbidden: {
+			type: Object,
+			default: void 0
+		},
+		forbiddenReason: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const ctx = createRendererContext({
+			engine: props.engine,
+			componentMap: props.componentMap,
+			extensions: props.extensions,
+			eventHooks: props.eventHooks,
+			actionInterceptors: props.actionInterceptors,
+			actionRegistry: props.actionRegistry,
+			dragOverNodeId: props.dragOverNodeId,
+			activeDestination: props.activeDestination,
+			containerDropDecision: props.containerDropDecision,
+			onContainerDragOver: props.onContainerDragOver,
+			onContainerDragLeave: props.onContainerDragLeave,
+			onContainerDrop: props.onContainerDrop,
+			interactionBoundary: props.interactionBoundary
+		});
+		provide(RENDERER_CONTEXT_KEY, ctx);
+		const selectionPresentation = createNodeSelectionPresentation();
+		provide(NODE_SELECTION_PRESENTATION_KEY, selectionPresentation);
+		const ContainerShell = computed(() => props.extensions?.containerShell ?? DefaultContainerShell);
+		const ForbiddenOverlay = computed(() => props.extensions?.forbiddenOverlay ?? DefaultForbiddenOverlay_default);
+		return () => {
+			const schema = ctx.schema.value;
+			const isDragOver = props.dragOverNodeId?.value === "root";
+			const plan = ctx.layoutPlan.value;
+			const DropIndicator = props.extensions?.dropIndicator ?? DefaultDropIndicator_default;
+			const EmptyState = props.extensions?.emptyState ?? DefaultEmptyState_default;
+			const regionVNodes = {};
+			for (const [region, entries] of plan.regions) regionVNodes[region] = entries.map((entry) => h(WidgetRenderer_default, {
+				"key": entry.node.id,
+				"node": entry.node,
+				"selectionPlane": "content",
+				"data-dc-layout-region": entry.layout.region
+			}));
+			const chromeVNodes = plan.chrome.map((entry) => h(WidgetRenderer_default, {
+				"key": entry.node.id,
+				"node": entry.node,
+				"selectionPlane": entry.layout.placement.kind === "chrome" && entry.layout.placement.position === "fixed" ? "viewport" : "content",
+				"data-dc-layout-placement": "chrome"
+			}));
+			const layerVNodes = {};
+			for (const [layer, entries] of plan.layers) layerVNodes[layer] = entries.map((entry) => h(WidgetRenderer_default, {
+				"key": entry.node.id,
+				"node": entry.node,
+				"selectionPlane": "viewport",
+				"data-dc-layout-placement": "layer"
+			}));
+			const isForbidden = props.isForbidden?.value ?? false;
+			const createForbiddenOverlayVNode = () => h(ForbiddenOverlay.value, {
+				key: "__forbidden__",
+				widgetType: props.engine.store.dragTarget.value?.widgetType ?? "",
+				reason: props.forbiddenReason?.value ?? null
+			});
+			const forbiddenOverlayVNode = isDragOver && isForbidden ? createForbiddenOverlayVNode() : null;
+			if (isDragOver && !isForbidden) insertDropIndicator(regionVNodes, plan, schema, props.engine, props.activeDestination?.value, props.dragOverIndex?.value, h(DropIndicator, { key: "__drop-indicator__" }));
+			const contentVNodes = regionVNodes[DEFAULT_LAYOUT_REGION] ?? [];
+			const isEmpty = plan.entries.length === 0 && !isDragOver;
+			const ContainerShellComponent = ContainerShell.value;
+			const fallbackForbiddenOverlayVNode = forbiddenOverlayVNode && !handlesForbiddenOverlay(ContainerShellComponent) ? createForbiddenOverlayVNode() : null;
+			return h("div", {
+				"class": "dc-root-renderer",
+				"data-dc-component": "root-renderer",
+				"data-node-id": "root",
+				"data-node-type": "root"
+			}, [
+				h(ContainerShellComponent, {
+					class: { "dc-container-shell--empty": isEmpty },
+					isEmpty,
+					regionVNodes,
+					chromeVNodes,
+					layerVNodes,
+					forbiddenOverlayVNode,
+					layoutPlan: plan,
+					surfaceStyle: normalizeStyleValueMap(schema.root.style?.surface),
+					registry: props.engine.registry,
+					selectionPresentation
+				}, {
+					default: () => {
+						if (isEmpty) return [h(EmptyState, { isDragOver: false })];
+						return contentVNodes;
+					},
+					...Object.fromEntries(Object.entries(regionVNodes).map(([region, vnodes]) => [region, () => vnodes]))
+				}),
+				h("div", {
+					"ref": (element) => {
+						selectionPresentation.registerFallback(element instanceof HTMLElement ? element : null);
+					},
+					"class": "dc-node-selection-plane dc-node-selection-plane--fallback",
+					"data-dc-selection-plane": "fallback",
+					"aria-hidden": "true"
+				}),
+				fallbackForbiddenOverlayVNode
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/messages.ts
+const rendererMessages = {
+	"zh-CN": {
+		action: {
+			"drag": "拖拽排序",
+			"move-up": "上移",
+			"move-down": "下移",
+			"delete": "删除"
+		},
+		canvas: {
+			"empty": "拖拽组件到这里",
+			"node-handle": "选中组件"
+		},
+		forbidden: {
+			default: "当前物料不满足创建条件，无法添加到画布",
+			alreadyExists: "无法添加 — 该类型已存在"
+		}
+	},
+	"en": {
+		action: {
+			"drag": "Drag to sort",
+			"move-up": "Move up",
+			"move-down": "Move down",
+			"delete": "Delete"
+		},
+		canvas: {
+			"empty": "Drag components here",
+			"node-handle": "Select component"
+		},
+		forbidden: {
+			default: "This component cannot be added to the canvas",
+			alreadyExists: "Cannot add — this type already exists"
+		}
+	}
+};
+//#endregion
+export { ActionKey, CONTAINER_RUNTIME_CONTEXT_KEY, ContainerRegionOutlet_default as ContainerRegionOutlet, DefaultContainerFallback_default as DefaultContainerFallback, DefaultContainerShell, DefaultDropIndicator_default as DefaultDropIndicator, DefaultEmptyState_default as DefaultEmptyState, DefaultForbiddenOverlay_default as DefaultForbiddenOverlay, DefaultNodeHandle_default as DefaultNodeHandle, DefaultNodeMask_default as DefaultNodeMask, DefaultNodeSelection_default as DefaultNodeSelection, DefaultNodeToolbar_default as DefaultNodeToolbar, DefaultWidgetFallback_default as DefaultWidgetFallback, NODE_SELECTION_PLANE_KEY, NODE_SELECTION_PRESENTATION_KEY, RENDERER_CONTEXT_KEY, RootRenderer_default as RootRenderer, WIDGET_RUNTIME_CONTEXT_KEY, WidgetRenderer_default as WidgetRenderer, createConfirmActionInterceptor, createContainerRuntime, createDefaultActions, createDefaultEventHooks, createNodeActionRegistry, createNodeSelectionPresentation, createRendererContext, fireAfterHook, hideNativeDragImage, rendererMessages, resolveBeforeHook, resolveNodeInteractionPresentation, runActionPipeline, useContainerRuntime, useNodeActions, useNodeDrag, useNodeInteractionGeometry, useNodeSelectionPresentation, useNodeSelectionProjection, useNodeState, useRendererContext, useToolbarPosition, useWidgetNode, useWidgetRuntime };