@fulate/tools 1.0.0

package/dist/index.js

@@ -0,0 +1,4976 @@
+import { Element, ElementProperties, ElementTransform, Layer, isFormControlTarget, projectConnectionPortPoint, resolveOrigin, resolveReferenceTransform } from "@fulate/core";
+import { BaseLine, ContentEditingCapabilityToken, DEFAULT_LINE_TREE_BRANCH_STYLE, Group, Line, LineTree, PointEditingCapabilityToken, SelectionBehaviorCapabilityToken, SelectionBehaviorMode, SelectionDiveMode, SelectionSnapMode, SnapSourceCapabilityToken, TransformInteractionCapabilityToken, addLineTreeBranchAtTail, applyLineTreeTopologyDelta, connectionPortAccepts, createLineTreeTopology, createLineTreeTopologyDelta, getEditorCapability, getEditorFrameFlush, getEndpointRelationIndex, hasConnectionPortCapacity, isEndpointRelationSource, moveLineTreePoint, remapLineTreeRelations, resolveConnectEndpointChange, resolveConnectionPortChanges, resolveDisconnectEndpointChanges, workspaceFocusInsetsKey } from "@fulate/ui";
+import { Bound, Intersection, makeBoundingBoxFromRects, qrDecompose, transformPoint } from "@fulate/share";
+import { deserializeElement, deserializeElement as deserializeElement$1, exportToFile, importFromFile, parseFileData, restoreScene, serializeScene, serializeSceneToJSON } from "@fulate/import";
+import { isNull, isString, isUndefined } from "lodash-es";
+import RBush from "rbush";
+//#region packages/tools/src/select/checkElement.ts
+function isSelectable(element, excludes) {
+	return !(excludes.includes(element) || element.selectable === false || element.inject("selectable") === false || element.isLayerNode());
+}
+/** Resolve a raw hit to the direct owner of the active selection scope. */
+function resolveSelectionOwner(element, scopeRootKey) {
+	if (scopeRootKey !== void 0) {
+		let directOwner = element;
+		for (let parent = element.parent; parent instanceof Element; parent = parent.parent) {
+			if (parent.key === scopeRootKey) return directOwner;
+			directOwner = parent;
+		}
+		return;
+	}
+	let contentChild = element;
+	let outerGroup = element;
+	for (let parent = element.parent; parent instanceof Element; parent = parent.parent) {
+		if (parent.type === "workspace" || parent.isLayerNode()) return contentChild;
+		contentChild = parent;
+		if (parent.type === "group") outerGroup = parent;
+	}
+	return outerGroup;
+}
+function checkElement(element, excludes = [], scopeRootKey) {
+	const resolved = resolveSelectionOwner(element, scopeRootKey);
+	if (!resolved || !isSelectable(resolved, excludes)) return;
+	return getEditorCapability(resolved, SelectionBehaviorCapabilityToken) ? resolved : void 0;
+}
+//#endregion
+//#region packages/tools/src/select/projection.ts
+var ROTATE_CURSOR = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"></path><path d="M21 13a9 9 0 1 1-3-7.7L21 8"></path></svg>') 9 9, crosshair`;
+var RESIZE_CURSORS = {
+	tl: "nwse-resize",
+	tr: "nesw-resize",
+	br: "nwse-resize",
+	bl: "nesw-resize",
+	mt: "ns-resize",
+	mr: "ew-resize",
+	mb: "ns-resize",
+	ml: "ew-resize"
+};
+var RESIZE_TARGETS = {
+	tl: {
+		kind: "resize",
+		handle: "tl"
+	},
+	tr: {
+		kind: "resize",
+		handle: "tr"
+	},
+	br: {
+		kind: "resize",
+		handle: "br"
+	},
+	bl: {
+		kind: "resize",
+		handle: "bl"
+	},
+	mt: {
+		kind: "resize",
+		handle: "mt"
+	},
+	mr: {
+		kind: "resize",
+		handle: "mr"
+	},
+	mb: {
+		kind: "resize",
+		handle: "mb"
+	},
+	ml: {
+		kind: "resize",
+		handle: "ml"
+	}
+};
+var ROTATE_TARGET = { kind: "rotate" };
+var PIVOT_TARGET = { kind: "pivot" };
+function samePointEditTarget(left, right) {
+	return left.kind === right.kind && (left.kind === "anchor" ? right.kind === "anchor" && left.anchorId === right.anchorId : left.kind === "segment" ? right.kind === "segment" && left.segmentId === right.segmentId : right.kind === "handle" && left.segmentId === right.segmentId && left.role === right.role);
+}
+var ROTATED_RESIZE_CURSORS = [
+	"ns-resize",
+	"nesw-resize",
+	"ew-resize",
+	"nwse-resize",
+	"ns-resize",
+	"nesw-resize",
+	"ew-resize",
+	"nwse-resize"
+];
+function rotatedResizeCursor(cursor, angle) {
+	const index = ROTATED_RESIZE_CURSORS.indexOf(cursor);
+	if (index === -1) return cursor;
+	return ROTATED_RESIZE_CURSORS[(index + Math.round((angle % 360 + 360) % 360 / 45) % 8) % 8];
+}
+function createSelectionFrameProjection({ left, top, width, height, angle }) {
+	const worldCenter = {
+		x: left + width / 2,
+		y: top + height / 2
+	};
+	const matrix = new DOMMatrix().translate(worldCenter.x, worldCenter.y).rotate(0, 0, angle).translate(-width / 2, -height / 2);
+	return {
+		left,
+		top,
+		width,
+		height,
+		angle,
+		matrix,
+		inverseMatrix: matrix.inverse(),
+		outline: [
+			transformPoint(matrix, {
+				x: 0,
+				y: 0
+			}),
+			transformPoint(matrix, {
+				x: width,
+				y: 0
+			}),
+			transformPoint(matrix, {
+				x: width,
+				y: height
+			}),
+			transformPoint(matrix, {
+				x: 0,
+				y: height
+			})
+		],
+		worldCenter
+	};
+}
+/** @internal Build a command frame from the current owner bounds. */
+function createWorldVisualBoundsSelectionFrame(owners, fallback) {
+	if (owners.length === 0) return fallback ?? null;
+	if (owners.length === 1) {
+		if (owners[0].transform?.getSelectionFrameBounds) {
+			if (fallback) return fallback;
+			return frameFromSingleOwner(owners[0]);
+		}
+		const bounds = owners[0].element.transform.getWorldVisualBoundsView();
+		if ((bounds.width === 0 || bounds.height === 0) && fallback) return fallback;
+		return createSelectionFrameProjection({
+			left: bounds.left,
+			top: bounds.top,
+			width: bounds.width,
+			height: bounds.height,
+			angle: 0
+		});
+	}
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const { element } of owners) {
+		const bounds = element.transform.getWorldVisualBoundsView();
+		if (bounds.left < left) left = bounds.left;
+		if (bounds.top < top) top = bounds.top;
+		if (bounds.left + bounds.width > right) right = bounds.left + bounds.width;
+		if (bounds.top + bounds.height > bottom) bottom = bounds.top + bounds.height;
+	}
+	const width = right - left;
+	const height = bottom - top;
+	if ((width === 0 || height === 0) && fallback) return fallback;
+	return createSelectionFrameProjection({
+		left,
+		top,
+		width,
+		height,
+		angle: 0
+	});
+}
+function createSelectionRotationPivotSnapMarkers(frame) {
+	const columns = [
+		{
+			horizontal: "left",
+			x: 0
+		},
+		{
+			horizontal: "center",
+			x: frame.width / 2
+		},
+		{
+			horizontal: "right",
+			x: frame.width
+		}
+	];
+	const rows = [
+		{
+			vertical: "top",
+			y: 0
+		},
+		{
+			vertical: "center",
+			y: frame.height / 2
+		},
+		{
+			vertical: "bottom",
+			y: frame.height
+		}
+	];
+	return columns.flatMap(({ horizontal, x }) => rows.map(({ vertical, y }) => ({
+		...transformPoint(frame.matrix, {
+			x,
+			y
+		}),
+		horizontal,
+		vertical
+	})));
+}
+function frameFromSingleOwner(owner) {
+	const geometry = owner.element.transform;
+	const bounds = owner.transform?.getSelectionFrameBounds?.() ?? geometry.getLocalVisualBoundsView() ?? geometry.getLayoutReferenceBoundsView();
+	const matrix = geometry.getWorldMatrixView();
+	const decomposition = qrDecompose(matrix);
+	const angleRadians = decomposition.angle * Math.PI / 180;
+	const skewScaleX = matrix.c * Math.cos(angleRadians) + matrix.d * Math.sin(angleRadians);
+	const width = Math.abs(decomposition.scaleX * bounds.width) + Math.abs(skewScaleX * bounds.height);
+	const height = Math.abs(decomposition.scaleY * bounds.height);
+	const worldCenter = transformPoint(matrix, {
+		x: bounds.left + bounds.width / 2,
+		y: bounds.top + bounds.height / 2
+	});
+	const angle = (decomposition.angle % 360 + 360) % 360;
+	return createSelectionFrameProjection({
+		left: worldCenter.x - width / 2,
+		top: worldCenter.y - height / 2,
+		width,
+		height,
+		angle
+	});
+}
+function frameFromOwners(owners) {
+	if (owners.length === 0) return null;
+	if (owners.length === 1) return frameFromSingleOwner(owners[0]);
+	return createWorldVisualBoundsSelectionFrame(owners);
+}
+function resizeControls(frame, policy) {
+	const x = policy.resize === "x" || policy.resize === "both";
+	const y = policy.resize === "y" || policy.resize === "both";
+	const controls = [];
+	const addPoint = (handle, local) => {
+		controls.push({
+			world: transformPoint(frame.matrix, local),
+			cursor: rotatedResizeCursor(RESIZE_CURSORS[handle], frame.angle),
+			shape: "rect",
+			hit: { kind: "point" },
+			target: RESIZE_TARGETS[handle]
+		});
+	};
+	if (x && y && frame.width !== 0 && frame.height !== 0) {
+		addPoint("tl", {
+			x: 0,
+			y: 0
+		});
+		addPoint("tr", {
+			x: frame.width,
+			y: 0
+		});
+		addPoint("br", {
+			x: frame.width,
+			y: frame.height
+		});
+		addPoint("bl", {
+			x: 0,
+			y: frame.height
+		});
+	}
+	if (policy.rotate) controls.push(...rotationControls(frame));
+	const addEdge = (handle, from, to) => {
+		controls.push({
+			world: {
+				x: (from.x + to.x) / 2,
+				y: (from.y + to.y) / 2
+			},
+			cursor: rotatedResizeCursor(RESIZE_CURSORS[handle], frame.angle),
+			shape: null,
+			hit: {
+				kind: "segment",
+				from,
+				to
+			},
+			target: RESIZE_TARGETS[handle]
+		});
+	};
+	if (y && frame.height !== 0) {
+		addEdge("mt", frame.outline[0], frame.outline[1]);
+		addEdge("mb", frame.outline[3], frame.outline[2]);
+	}
+	if (x && frame.width !== 0) {
+		addEdge("mr", frame.outline[1], frame.outline[2]);
+		addEdge("ml", frame.outline[0], frame.outline[3]);
+	}
+	return controls;
+}
+function rotationControls(frame) {
+	return frame.outline.map((world) => ({
+		world,
+		cursor: ROTATE_CURSOR,
+		shape: null,
+		hit: { kind: "rotation-ring" },
+		target: ROTATE_TARGET
+	}));
+}
+function pointControls(owner, topology, activePointTarget) {
+	const matrix = owner.element.transform.getWorldMatrixView();
+	return topology.pointControls.map((control) => {
+		return {
+			world: transformPoint(matrix, control.local),
+			cursor: control.cursor,
+			shape: control.shape,
+			...control.guideLocal ? { guideFrom: transformPoint(matrix, control.guideLocal) } : {},
+			active: control.target.deletable && activePointTarget?.ownerKey === control.target.ownerKey && samePointEditTarget(activePointTarget.target, control.target.target),
+			hit: { kind: "point" },
+			target: control.target
+		};
+	});
+}
+function createSelectionProjectionMembership(owners, policy) {
+	return {
+		selectionKeys: owners.map(({ element }) => element.key),
+		selectedOutlineOwners: owners,
+		bodyEnabled: policy.move,
+		frameVisible: owners.every(({ frameVisible }) => frameVisible)
+	};
+}
+function createSelectionProjectionTopology(owners, isCurrent = () => true) {
+	if (owners.length !== 1 || !owners[0].pointEnabled || !owners[0].pointScope) return {
+		pointControls: [],
+		pointScopeOutline: null,
+		pointScopeValid: true
+	};
+	const owner = owners[0];
+	const capability = getEditorCapability(owner.element, PointEditingCapabilityToken);
+	if (!capability || !isCurrent(owner) || !capability.hasPointScope(owner.pointScope) || !isCurrent(owner)) return {
+		pointControls: [],
+		pointScopeOutline: null,
+		pointScopeValid: false
+	};
+	const descriptors = capability.getPointControls(owner.pointScope);
+	if (!isCurrent(owner)) return {
+		pointControls: [],
+		pointScopeOutline: null,
+		pointScopeValid: false
+	};
+	const pointScopeOutline = capability.getPointScopeOutline(owner.pointScope);
+	if (!isCurrent(owner)) return {
+		pointControls: [],
+		pointScopeOutline: null,
+		pointScopeValid: false
+	};
+	return {
+		pointControls: descriptors.map((descriptor) => ({
+			local: descriptor.local,
+			...descriptor.kind === "handle" ? { guideLocal: descriptor.anchorLocal } : {},
+			cursor: descriptor.kind === "segment" ? "copy" : descriptor.kind === "handle" ? "move" : descriptor.move === "locked" ? "not-allowed" : "move",
+			shape: descriptor.kind === "segment" ? "diamond" : descriptor.kind === "handle" ? "handle" : "circle",
+			target: {
+				kind: "point",
+				ownerKey: owner.element.key,
+				target: descriptor.target,
+				move: descriptor.kind === "segment" || descriptor.kind === "handle" ? "free" : descriptor.move,
+				deletable: descriptor.kind === "anchor" && descriptor.deletable,
+				role: descriptor.kind === "segment" ? "segment" : descriptor.kind === "handle" ? "handle" : descriptor.role,
+				insertT: descriptor.kind === "segment" ? descriptor.insertT : void 0
+			}
+		})),
+		pointScopeOutline,
+		pointScopeValid: true
+	};
+}
+function createProjectionOwner(element, frameVisible = true, pointScope = null, pointEnabled = false) {
+	return {
+		element,
+		frameVisible,
+		transform: getEditorCapability(element, TransformInteractionCapabilityToken),
+		pointEnabled,
+		pointScope,
+		snap: getEditorCapability(element, SnapSourceCapabilityToken)
+	};
+}
+function buildSelectionOverlayProjection({ owners, membership, topology, frame: frameOverride, policy, pivot, showPivot, pivotSnapMarkers = [], activePointTarget = null, marquee }) {
+	const frame = frameOverride ?? frameFromOwners(owners);
+	const controls = [];
+	if (owners.length === 1) controls.push(...pointControls(owners[0], topology, activePointTarget));
+	const rotationPivotWorld = frame && owners.length === 1 && pivot.kind === "custom-owner-local" && pivot.ownerKey === owners[0].element.key ? transformPoint(owners[0].element.transform.getWorldMatrixView(), pivot.local) : frame?.worldCenter ?? {
+		x: 0,
+		y: 0
+	};
+	if (frame) {
+		if (showPivot && owners.length === 1) controls.push({
+			world: rotationPivotWorld,
+			cursor: "crosshair",
+			shape: "circle",
+			hit: { kind: "point" },
+			target: PIVOT_TARGET
+		});
+		controls.push(...resizeControls(frame, policy));
+	}
+	return {
+		selectionKeys: membership.selectionKeys,
+		frame,
+		controls,
+		selectedOutlineOwners: membership.selectedOutlineOwners,
+		pointScopeOutline: topology.pointScopeOutline,
+		bodyEnabled: membership.bodyEnabled,
+		frameVisible: membership.frameVisible,
+		rotationPivotWorld,
+		rotationPivotSnapMarkers: pivotSnapMarkers,
+		marquee
+	};
+}
+function hitSelectionOverlay(projection, point, controlRadius, edgePadding, rotatePadding) {
+	for (const control of projection.controls) {
+		const distance = Math.hypot(point.x - control.world.x, point.y - control.world.y);
+		if (control.hit.kind === "point" ? distance <= controlRadius : control.hit.kind === "segment" ? Intersection.pointToLineSegmentDistance(point, control.hit.from, control.hit.to) <= edgePadding : distance > controlRadius && distance <= controlRadius + rotatePadding && !(projection.frame && Intersection.isPointInPolygon(point, projection.frame.outline))) return {
+			target: control.target,
+			cursor: control.cursor
+		};
+	}
+	const frame = projection.frame;
+	if (projection.bodyEnabled && frame && Intersection.isPointInPolygon(point, frame.outline)) return {
+		target: { kind: "body" },
+		cursor: "move"
+	};
+	return null;
+}
+//#endregion
+//#region packages/tools/src/select/transform.ts
+function resolveSelectionFrameTransform(frame, worldDelta, kind) {
+	const worldCenter = transformPoint(worldDelta, frame.worldCenter);
+	let width = frame.width;
+	let height = frame.height;
+	let angle = frame.angle;
+	if (kind === "resize") {
+		const matrix = worldDelta.multiply(frame.matrix);
+		width *= Math.hypot(matrix.a, matrix.b);
+		height *= Math.hypot(matrix.c, matrix.d);
+	} else if (kind === "rotate") angle = (angle + Math.atan2(worldDelta.b, worldDelta.a) * 180 / Math.PI + 360) % 360;
+	return createSelectionFrameProjection({
+		left: worldCenter.x - width / 2,
+		top: worldCenter.y - height / 2,
+		width,
+		height,
+		angle
+	});
+}
+function resolveResizeWorldDelta(frame, handle, worldPoint, proportional) {
+	const local = transformPoint(frame.inverseMatrix, worldPoint);
+	let fixedX = frame.width / 2;
+	let fixedY = frame.height / 2;
+	let scaleX = 1;
+	let scaleY = 1;
+	if (handle.includes("r")) {
+		fixedX = 0;
+		scaleX = local.x / frame.width;
+	} else if (handle.includes("l")) {
+		fixedX = frame.width;
+		scaleX = (frame.width - local.x) / frame.width;
+	}
+	if (handle.includes("b")) {
+		fixedY = 0;
+		scaleY = local.y / frame.height;
+	} else if (handle.includes("t")) {
+		fixedY = frame.height;
+		scaleY = (frame.height - local.y) / frame.height;
+	}
+	if (handle === "mr" || handle === "ml") scaleY = 1;
+	if (handle === "mt" || handle === "mb") scaleX = 1;
+	if (proportional && ![
+		"mt",
+		"mr",
+		"mb",
+		"ml"
+	].includes(handle)) {
+		const ratio = Math.max(Math.abs(scaleX), Math.abs(scaleY));
+		scaleX = Math.sign(scaleX) * ratio;
+		scaleY = Math.sign(scaleY) * ratio;
+	}
+	const localDelta = new DOMMatrix().translate(fixedX, fixedY).scale(scaleX, scaleY).translate(-fixedX, -fixedY);
+	return frame.matrix.multiply(localDelta).multiply(frame.inverseMatrix);
+}
+function resizeAnchorPoint(frame, anchor) {
+	return {
+		x: anchor.endsWith("left") ? 0 : anchor.endsWith("right") ? frame.width : frame.width / 2,
+		y: anchor.startsWith("top") ? 0 : anchor.startsWith("bottom") ? frame.height : frame.height / 2
+	};
+}
+/** @internal 把 target frame 尺寸转为一个固定锚点的 world 线性变换。 */
+function resolveResizeWorldDeltaForSize(frame, width, height, anchor = "top-left") {
+	const { x, y } = resizeAnchorPoint(frame, anchor);
+	const scaleX = frame.width === 0 ? 1 : width / frame.width;
+	const scaleY = frame.height === 0 ? 1 : height / frame.height;
+	const localDelta = new DOMMatrix().translate(x, y).scale(scaleX, scaleY).translate(-x, -y);
+	return frame.matrix.multiply(localDelta).multiply(frame.inverseMatrix);
+}
+/** @internal 围绕 selection frame 中心沿 frame 自身坐标轴镜像。 */
+function resolveFlipWorldDelta(frame, direction) {
+	const centerX = frame.width / 2;
+	const centerY = frame.height / 2;
+	const localDelta = new DOMMatrix().translate(centerX, centerY).scale(direction === "horizontal" ? -1 : 1, direction === "vertical" ? -1 : 1).translate(-centerX, -centerY);
+	return frame.matrix.multiply(localDelta).multiply(frame.inverseMatrix);
+}
+function resolveRotationTransform({ frameAngle, pivot, unwrappedDelta, snapAngle, snapThreshold }) {
+	let target = frameAngle + unwrappedDelta;
+	if (snapAngle > 0) {
+		const lower = Math.floor(target / snapAngle) * snapAngle;
+		const upper = Math.ceil(target / snapAngle) * snapAngle;
+		if (Math.abs(target - lower) <= snapThreshold) target = lower;
+		else if (Math.abs(target - upper) <= snapThreshold) target = upper;
+	}
+	const rotationDelta = target - frameAngle;
+	return {
+		worldDelta: new DOMMatrix().translate(pivot.x, pivot.y).rotate(0, 0, rotationDelta).translate(-pivot.x, -pivot.y),
+		unwrappedDelta: rotationDelta
+	};
+}
+//#endregion
+//#region packages/tools/src/editor/interaction-controller.ts
+var editorControllerKey = Symbol();
+var NO_PORT_SNAP$1 = {
+	snap: null,
+	state: null
+};
+var NO_ELEMENTS = [];
+var NO_POINTS = [];
+function isBlockedPortProbe(probe) {
+	return probe?.state === "incompatible" || probe?.state === "forbidden";
+}
+function resolvePortProbeCursor(probe) {
+	return isBlockedPortProbe(probe) ? "not-allowed" : "crosshair";
+}
+var NO_PROJECTION_OWNERS = [];
+function pointIntent(event) {
+	return {
+		point: {
+			x: event.detail.x,
+			y: event.detail.y
+		},
+		shiftKey: event.detail.shiftKey === true
+	};
+}
+function matchesMarquee(element, rect, requireContainment) {
+	const topLeft = {
+		x: rect.left,
+		y: rect.top
+	};
+	const bottomRight = {
+		x: rect.left + rect.width,
+		y: rect.top + rect.height
+	};
+	const contained = Intersection.isContainedInRect(element.transform.getWorldVisualBoundsView(), topLeft, bottomRight);
+	if (contained || requireContainment) return contained;
+	return Intersection.intersectPolygonRectangle(element.transform.getWorldVisualPointsView(), topLeft, bottomRight).status === "Intersection" || element.transform.hasPointHint(topLeft) || element.transform.hasPointHint(bottomRight);
+}
+function sameTarget(left, right) {
+	if (left?.kind !== right?.kind) return false;
+	if (!left || !right) return true;
+	if (left.kind === "resize" && right.kind === "resize") return left.handle === right.handle;
+	if (left.kind === "point" && right.kind === "point") return left.ownerKey === right.ownerKey && samePointEditTarget(left.target, right.target);
+	return true;
+}
+function samePointScope(left, right) {
+	return left.kind === right.kind && (left.kind === "owner" || right.kind === "subpath" && left.subpathId === right.subpathId);
+}
+var TransformGesture = class {
+	lastIntent;
+	previousRotationAngle;
+	unwrappedRotationDelta = 0;
+	constructor(controller, kind, start, initialIntent, frame, records, snapPoints, movableLineEndpoints, snapExcludes, rotationPivotWorld, history, resizeHandle) {
+		this.controller = controller;
+		this.kind = kind;
+		this.start = start;
+		this.frame = frame;
+		this.records = records;
+		this.snapPoints = snapPoints;
+		this.movableLineEndpoints = movableLineEndpoints;
+		this.snapExcludes = snapExcludes;
+		this.rotationPivotWorld = rotationPivotWorld;
+		this.history = history;
+		this.resizeHandle = resizeHandle;
+		this.lastIntent = initialIntent;
+		if (kind === "rotate") this.previousRotationAngle = Math.atan2(initialIntent.point.y - rotationPivotWorld.y, initialIntent.point.x - rotationPivotWorld.x) * 180 / Math.PI;
+	}
+	consumeRotationDelta(point) {
+		const angle = Math.atan2(point.y - this.rotationPivotWorld.y, point.x - this.rotationPivotWorld.x) * 180 / Math.PI;
+		const previous = this.previousRotationAngle;
+		this.unwrappedRotationDelta += (angle - previous + 540) % 360 - 180;
+		this.previousRotationAngle = angle;
+		return this.unwrappedRotationDelta;
+	}
+	probeForbiddenPort(point) {
+		return this.controller.root.enablePorts && this.controller.select.connectionGesture !== false && this.kind === "move" && this.controller.snapTool?.probeForbiddenPortMove(this.movableLineEndpoints, point.x - this.start.x, point.y - this.start.y, this.snapExcludes) === true;
+	}
+	update(intent) {
+		if (this.lastIntent.point.x === intent.point.x && this.lastIntent.point.y === intent.point.y && this.lastIntent.shiftKey === intent.shiftKey) return;
+		this.lastIntent = intent;
+		this.controller.consumeTransform(this, intent);
+	}
+	ownsCurrentContext() {
+		return this.records.every(({ owner, parent }) => owner.activeRoot === this.controller.root && owner.parent === parent);
+	}
+	finishInvalidated() {
+		try {
+			this.controller.publishConfiguredChange(this.history?.finish(this.controller.selection));
+		} finally {
+			this.controller.snapTool?.stop();
+			this.controller.finishPointerGesture(this);
+		}
+	}
+	finish(intent) {
+		try {
+			if (intent) this.update(intent);
+			this.controller.root.frameRuntime.drain();
+			this.controller.publishConfiguredChange(this.history?.finish(this.controller.selection));
+		} finally {
+			this.controller.snapTool?.stop();
+			this.controller.finishPointerGesture(this);
+		}
+	}
+};
+var PointGesture = class {
+	latestIntent = null;
+	consumedIntent = null;
+	connectionTarget;
+	connectionTargetOwner;
+	connectionTargetParent;
+	constructor(controller, ownerKey, startParent, startTarget, insertT, role, connectionRole, snapExcludes, history, startPointerWorld, startTargetWorld) {
+		this.controller = controller;
+		this.ownerKey = ownerKey;
+		this.startParent = startParent;
+		this.startTarget = startTarget;
+		this.insertT = insertT;
+		this.role = role;
+		this.connectionRole = connectionRole;
+		this.snapExcludes = snapExcludes;
+		this.history = history;
+		this.startPointerWorld = startPointerWorld;
+		this.startTargetWorld = startTargetWorld;
+		this.currentTarget = startTarget;
+	}
+	currentTarget;
+	ownsCurrentContext() {
+		return this.controller.pointGestureOwnsCurrentContext(this);
+	}
+	get connectionSource() {
+		return this.connectionRole && this.currentTarget.kind === "anchor" ? {
+			elementKey: this.ownerKey,
+			anchorId: this.currentTarget.anchorId
+		} : void 0;
+	}
+	resolveWorldPoint(pointer) {
+		return {
+			x: this.startTargetWorld.x + pointer.x - this.startPointerWorld.x,
+			y: this.startTargetWorld.y + pointer.y - this.startPointerWorld.y
+		};
+	}
+	update(intent) {
+		if (!this.latestIntent && this.consumedIntent?.point.x === intent.point.x && this.consumedIntent.point.y === intent.point.y && this.consumedIntent.shiftKey === intent.shiftKey) return;
+		this.latestIntent = intent;
+		this.controller.frameFlush.registerGestureWork(this);
+	}
+	consumeLatestIntent() {
+		const intent = this.latestIntent;
+		this.latestIntent = null;
+		if (intent) {
+			const first = this.consumedIntent === null;
+			this.consumedIntent = intent;
+			this.controller.consumePoint(this, intent, first);
+		}
+	}
+	finish(intent, cancelled = false) {
+		try {
+			if (cancelled && this.connectionRole) {
+				this.controller.publishConfiguredChange(this.history?.finish(this.controller.selection));
+				return;
+			}
+			if (intent && !cancelled) this.update(intent);
+			this.controller.root.frameRuntime.drain();
+			this.controller.finishPointConnectionGesture(this);
+		} finally {
+			this.controller.frameFlush.discardGestureWork(this);
+			this.controller.snapTool?.stop();
+			this.controller.finishPointerGesture(this);
+		}
+	}
+	finishInvalidated() {
+		try {
+			this.controller.publishConfiguredChange(this.history?.finish(this.controller.selection));
+		} finally {
+			this.controller.frameFlush.discardGestureWork(this);
+			this.controller.snapTool?.stop();
+			this.controller.finishPointerGesture(this);
+		}
+	}
+};
+function createToolsConnectionIntent(root, history, source, target) {
+	return {
+		source,
+		target,
+		connect() {
+			const change = resolveConnectEndpointChange(root, source, target);
+			if (!change) return;
+			const owner = root.getByKey(source.elementKey);
+			const selection = owner instanceof Element ? [owner] : [];
+			const scope = history.openScope(selection);
+			root.applyChangeBatch([change], [], scope);
+			root.frameRuntime.drain();
+			const current = root.getByKey(source.elementKey);
+			history.publishConfiguredChange(scope?.finish(current instanceof Element ? [current] : []));
+		}
+	};
+}
+var PivotGesture = class {
+	finalPoint;
+	constructor(controller, owner, startPointer, startPivot) {
+		this.controller = controller;
+		this.owner = owner;
+		this.startPointer = startPointer;
+		this.startPivot = startPivot;
+		this.finalPoint = startPivot;
+	}
+	update(intent) {
+		this.finalPoint = {
+			x: this.startPivot.x + intent.point.x - this.startPointer.x,
+			y: this.startPivot.y + intent.point.y - this.startPointer.y
+		};
+		this.controller.previewRotationPivot(this.owner, this.finalPoint);
+	}
+	finish(intent) {
+		try {
+			if (intent) this.update(intent);
+			const configuredChanged = this.controller.commitRotationPivot(this.owner, this.finalPoint);
+			this.controller.publishConfiguredChange(configuredChanged);
+		} finally {
+			this.controller.finishPointerGesture(this);
+		}
+	}
+};
+var SelectionPressGesture = class {
+	constructor(controller, start, candidate, contentTarget, directDragOwner) {
+		this.controller = controller;
+		this.start = start;
+		this.candidate = candidate;
+		this.contentTarget = contentTarget;
+		this.directDragOwner = directDragOwner;
+	}
+	update(intent) {
+		if (intent.point.x === this.start.point.x && intent.point.y === this.start.point.y) return;
+		this.controller.promoteSelectionPress(this)?.update(intent);
+	}
+	finish(intent, cancelled = false) {
+		if (cancelled || !intent) {
+			this.controller.finishPointerGesture(this);
+			return;
+		}
+		if (intent.point.x !== this.start.point.x || intent.point.y !== this.start.point.y) {
+			const transform = this.controller.promoteSelectionPress(this);
+			if (transform) transform.finish(intent);
+			else this.controller.finishPointerGesture(this);
+			return;
+		}
+		this.controller.finishSelectionPress(this);
+	}
+};
+var MarqueeGesture = class {
+	current;
+	moved = false;
+	constructor(controller, start, candidate, additive, initialSelection) {
+		this.controller = controller;
+		this.start = start;
+		this.candidate = candidate;
+		this.additive = additive;
+		this.initialSelection = initialSelection;
+		this.current = start;
+	}
+	update(intent) {
+		this.current = intent.point;
+		this.moved ||= Math.hypot(this.current.x - this.start.x, this.current.y - this.start.y) > 4 / this.controller.root.viewport.scale;
+		if (this.moved) this.controller.setMarquee({
+			left: Math.min(this.start.x, this.current.x),
+			top: Math.min(this.start.y, this.current.y),
+			width: Math.abs(this.current.x - this.start.x),
+			height: Math.abs(this.current.y - this.start.y)
+		});
+	}
+	finish(intent, cancelled = false) {
+		if (cancelled || !intent) {
+			this.controller.setMarquee(null);
+			this.controller.finishSelectionGesture(this);
+			return;
+		}
+		this.update(intent);
+		let selection;
+		if (this.moved) {
+			const selected = new Set(this.additive ? this.initialSelection : []);
+			const marquee = this.controller.marquee;
+			for (const element of this.controller.root.queryArea(marquee, {
+				bounds: "visual",
+				order: "none"
+			})) {
+				if (!this.additive && !matchesMarquee(element, marquee, false)) continue;
+				const resolved = checkElement(element, this.controller.editorElements);
+				if (!resolved || selected.has(resolved)) continue;
+				if (this.additive && !matchesMarquee(resolved, marquee, true)) continue;
+				selected.add(resolved);
+			}
+			selection = [...selected];
+		} else if (this.additive && this.candidate) {
+			const selected = new Set(this.initialSelection);
+			if (selected.has(this.candidate)) selected.delete(this.candidate);
+			else selected.add(this.candidate);
+			selection = [...selected];
+		} else selection = this.candidate ? [this.candidate] : [];
+		this.controller.setMarquee(null);
+		this.controller.finishSelectionGesture(this, selection);
+	}
+};
+var EditorInteractionController = class {
+	frameFlush;
+	cleanups = [];
+	selectionValue = NO_ELEMENTS;
+	owners = [];
+	policy = {
+		move: false,
+		resize: "none",
+		rotate: false,
+		rotationPivot: "center-only"
+	};
+	rotationPivotPreview = null;
+	selectionFrame = null;
+	preserveSelectionFrame = false;
+	projectionState = {
+		selectionKeys: [],
+		frame: null,
+		controls: [],
+		selectedOutlineOwners: [],
+		pointScopeOutline: null,
+		bodyEnabled: false,
+		frameVisible: false,
+		rotationPivotWorld: {
+			x: 0,
+			y: 0
+		},
+		rotationPivotSnapMarkers: [],
+		marquee: null
+	};
+	projectionOwners = null;
+	projectionMembership = null;
+	projectionTopology = null;
+	overlayDirty = true;
+	pendingSelectionUpdate = false;
+	pendingSelectionRepair = null;
+	rotationPivotDisplayOwner = null;
+	hoveredTarget = null;
+	hoveredContent = null;
+	controllerState = {
+		kind: "select",
+		interaction: {
+			kind: "idle",
+			gesture: null
+		},
+		selection: NO_ELEMENTS,
+		pivot: { kind: "selection-center" }
+	};
+	pasteTask = null;
+	pointerWorld = null;
+	marquee = null;
+	constructor(select, root, history) {
+		this.select = select;
+		this.root = root;
+		this.history = history;
+		this.frameFlush = getEditorFrameFlush(root);
+		this.frameFlush.setOverlayClient(this);
+		root.provide(editorControllerKey, this);
+		this.installInput();
+		this.cleanups.push(root.sceneRegistry.observeSceneChanges(this.handleSceneChange));
+		history.bindSelection({
+			finishInteraction: () => this.finishCurrentInteraction(),
+			getSelection: () => this.selection,
+			hasConfiguredChangeListener: () => this.select.hasEventListener("select:configured-change"),
+			publishConfiguredChange: () => this.notifySelect("select:configured-change"),
+			restoreSelection: (elements) => this.restoreSelectionForHistory(elements),
+			completeReplay: (type, elements, configuredChanged) => {
+				this.pendingSelectionRepair = null;
+				this.publishConfiguredChange(configuredChanged);
+				this.notifySelect("select:end");
+				this.notifySelect(type, { elements });
+			}
+		});
+		this.invalidateOverlay();
+	}
+	get selection() {
+		return this.selectionValue;
+	}
+	get projection() {
+		return this.projectionState;
+	}
+	publishConfiguredChange(changed) {
+		this.history.publishConfiguredChange(changed);
+	}
+	/** 把纯外部通知排到当前同步命令、回放或 frame completion 返回之后。 */
+	notifySelect(type, data) {
+		const select = this.select;
+		queueMicrotask(() => {
+			if (select.interactionController !== this) return;
+			select.dispatchEvent(type, data === void 0 ? void 0 : { data });
+		});
+	}
+	get contentHover() {
+		return this.hoveredContent;
+	}
+	get overlayTarget() {
+		return this.hoveredTarget;
+	}
+	get editorElements() {
+		const elements = [this.select];
+		const snap = this.snapTool;
+		if (snap) elements.push(snap);
+		const lineTool = this.select.lineTool;
+		if (lineTool) elements.push(lineTool);
+		return elements;
+	}
+	get snapTool() {
+		return this.select.snapTool;
+	}
+	get state() {
+		if (this.controllerState.kind !== "select") return this.controllerState;
+		return {
+			...this.controllerState,
+			selection: this.selection,
+			pivot: this.rotationPivotState
+		};
+	}
+	/** @internal Captures the canonical selection and interaction identities. */
+	captureSelectionIdentity() {
+		return {
+			owners: this.owners,
+			interaction: this.controllerState
+		};
+	}
+	/** @internal Makes one concrete clipboard Promise the latest paste intent. */
+	beginPaste(task) {
+		this.pasteTask = task;
+	}
+	/** @internal Tests whether one paste still owns the captured selection intent. */
+	ownsPasteSelection(identity, task) {
+		return this.owners === identity.owners && this.controllerState === identity.interaction && this.pasteTask === task;
+	}
+	/** @internal Releases the latest paste intent after its Promise settles. */
+	finishPaste(task) {
+		if (this.pasteTask === task) this.pasteTask = null;
+	}
+	get selectState() {
+		return this.controllerState.kind === "select" ? this.controllerState.interaction : null;
+	}
+	installSelectState(interaction) {
+		this.controllerState = {
+			kind: "select",
+			interaction,
+			selection: this.selection,
+			pivot: this.rotationPivotState
+		};
+	}
+	get activeGesture() {
+		const state = this.selectState;
+		return state && "gesture" in state ? state.gesture : null;
+	}
+	set activeGesture(gesture) {
+		const state = this.selectState;
+		if (gesture instanceof PointGesture && state?.kind === "point") {
+			const source = gesture.connectionSource;
+			this.installSelectState(source ? {
+				kind: "port",
+				ownerKey: state.ownerKey,
+				scope: state.scope,
+				gesture,
+				source,
+				activeTarget: state.activeTarget
+			} : {
+				...state,
+				gesture
+			});
+			return;
+		}
+		if (gesture instanceof MarqueeGesture) {
+			this.installSelectState({
+				kind: "idle",
+				gesture
+			});
+			return;
+		}
+		if (state?.kind === "point" && (gesture instanceof SelectionPressGesture || gesture instanceof TransformGesture)) {
+			this.installSelectState({
+				...state,
+				gesture
+			});
+			return;
+		}
+		if (gesture === null && state?.kind === "point") {
+			this.installSelectState({
+				...state,
+				gesture: null
+			});
+			return;
+		}
+		if (gesture === null && state?.kind === "port") {
+			this.installSelectState({
+				kind: "point",
+				ownerKey: state.ownerKey,
+				scope: state.scope,
+				gesture: null,
+				activeTarget: state.activeTarget
+			});
+			return;
+		}
+		if (this.selection.length === 0) this.installSelectState({
+			kind: "idle",
+			gesture: null
+		});
+		else this.installSelectState({
+			kind: "transform",
+			gesture
+		});
+	}
+	get activePointGesture() {
+		const state = this.selectState;
+		return (state?.kind === "point" || state?.kind === "port") && state.gesture instanceof PointGesture ? state.gesture : null;
+	}
+	get pointState() {
+		const state = this.selectState;
+		return state?.kind === "point" || state?.kind === "port" ? state : null;
+	}
+	set pointState(point) {
+		const state = this.selectState;
+		if (!point) {
+			if (state?.kind === "point" || state?.kind === "port") this.installSelectState({
+				kind: this.selection.length === 0 ? "idle" : "transform",
+				gesture: null
+			});
+			return;
+		}
+		this.installSelectState({
+			kind: "point",
+			ownerKey: point.ownerKey,
+			scope: point.scope,
+			gesture: state?.kind === "point" || state?.kind === "port" ? state.gesture : null,
+			activeTarget: state?.kind === "point" || state?.kind === "port" ? state.activeTarget : null
+		});
+	}
+	get activePointTarget() {
+		const state = this.selectState;
+		return state?.kind === "point" || state?.kind === "port" ? state.activeTarget : null;
+	}
+	set activePointTarget(target) {
+		const state = this.selectState;
+		if (state?.kind === "point" || state?.kind === "port") this.installSelectState({
+			...state,
+			activeTarget: target
+		});
+	}
+	get contentSession() {
+		const state = this.selectState;
+		return state?.kind === "content" ? state.session : null;
+	}
+	set contentSession(session) {
+		const state = this.selectState;
+		if (session) this.installSelectState({
+			kind: "content",
+			session,
+			history: state?.kind === "content" ? state.history : void 0
+		});
+		else if (state?.kind === "content") this.installSelectState({
+			kind: this.selection.length === 0 ? "idle" : "transform",
+			gesture: null
+		});
+	}
+	get contentHistory() {
+		const state = this.selectState;
+		return state?.kind === "content" ? state.history : void 0;
+	}
+	set contentHistory(history) {
+		const state = this.selectState;
+		if (state?.kind === "content") this.installSelectState({
+			...state,
+			history
+		});
+	}
+	get lineSession() {
+		const state = this.controllerState;
+		return state.kind === "line-draw" && !("kind" in state.session) ? state.session : null;
+	}
+	set lineSession(session) {
+		if (session) this.controllerState = {
+			kind: "line-draw",
+			session
+		};
+		else if (this.lineSession) this.installSelectState({
+			kind: this.selection.length === 0 ? "idle" : "transform",
+			gesture: null
+		});
+	}
+	get lineTreeSession() {
+		const state = this.controllerState;
+		return state.kind === "line-draw" && "kind" in state.session ? state.session : null;
+	}
+	set lineTreeSession(session) {
+		if (session) this.controllerState = {
+			kind: "line-draw",
+			session
+		};
+		else if (this.lineTreeSession) this.installSelectState({
+			kind: this.selection.length === 0 ? "idle" : "transform",
+			gesture: null
+		});
+	}
+	get rotationPivotState() {
+		if (this.owners.length === 1 && this.policy.rotate && this.policy.rotationPivot === "adjustable") {
+			const owner = this.owners[0].element;
+			const preview = this.rotationPivotPreview?.owner === owner ? this.rotationPivotPreview.local : null;
+			if (!preview && owner.rotationPivotX === "center" && owner.rotationPivotY === "center") return { kind: "selection-center" };
+			const bounds = owner.transform.getLocalVisualBoundsView() ?? owner.transform.getLayoutReferenceBoundsView();
+			return {
+				kind: "custom-owner-local",
+				ownerKey: owner.key,
+				local: preview ?? {
+					x: bounds.left + (resolveOrigin(owner.rotationPivotX) + .5) * bounds.width,
+					y: bounds.top + (resolveOrigin(owner.rotationPivotY) + .5) * bounds.height
+				}
+			};
+		}
+		return { kind: "selection-center" };
+	}
+	installInput() {
+		const pointerdown = (event) => this.onPointerDown(event);
+		const pointermove = (event) => this.onPointerMove(event);
+		const pointerup = (event) => this.onPointerFinish(event);
+		const pointercancel = (event) => this.onPointerFinish(event);
+		const dblclick = (event) => this.onDoubleClick(event);
+		this.root.addEventListener("pointerdown", pointerdown);
+		this.root.addEventListener("pointermove", pointermove);
+		this.root.addEventListener("pointerup", pointerup);
+		this.root.addEventListener("pointercancel", pointercancel);
+		this.root.addEventListener("dblclick", dblclick);
+		this.cleanups.push(() => this.root.removeEventListener("pointerdown", pointerdown), () => this.root.removeEventListener("pointermove", pointermove), () => this.root.removeEventListener("pointerup", pointerup), () => this.root.removeEventListener("pointercancel", pointercancel), () => this.root.removeEventListener("dblclick", dblclick));
+		const container = this.root.container;
+		const hadTabIndex = container.hasAttribute("tabindex");
+		const previousOutline = container.style.outline;
+		if (!hadTabIndex) {
+			container.tabIndex = 0;
+			container.style.outline = "none";
+		}
+		const keydown = (event) => this.onKeyDown(event);
+		container.addEventListener("keydown", keydown);
+		this.cleanups.push(() => {
+			container.removeEventListener("keydown", keydown);
+			if (!hadTabIndex) {
+				container.removeAttribute("tabindex");
+				container.style.outline = previousOutline;
+			}
+		});
+	}
+	handleSceneChange = (node, affected) => {
+		if (this.owners.some(({ element }) => element.activeRoot !== this.root)) {
+			this.replaceSelection(this.selection);
+			this.pendingSelectionRepair = this.owners;
+		}
+		const transformGesture = this.activeGesture;
+		if (transformGesture instanceof TransformGesture && !transformGesture.ownsCurrentContext()) transformGesture.finishInvalidated();
+		const pointGesture = this.activePointGesture;
+		if (pointGesture && (!pointGesture.ownsCurrentContext() || pointGesture.connectionTarget !== void 0 && (this.root.getByKey(pointGesture.connectionTarget.elementKey) !== pointGesture.connectionTargetOwner || pointGesture.connectionTargetOwner.parent !== pointGesture.connectionTargetParent))) pointGesture.finishInvalidated();
+		if (this.rotationPivotPreview && this.rotationPivotPreview.owner.activeRoot !== this.root) this.rotationPivotPreview = null;
+		if (this.rotationPivotDisplayOwner && this.rotationPivotDisplayOwner.activeRoot !== this.root) this.rotationPivotDisplayOwner = null;
+		if (this.contentSession && this.root.getByKey(this.contentSession.ownerKey) === void 0) this.finishContentEditing(true);
+		if (this.lineTreeSession && (this.lineTreeSession.owner.activeRoot !== this.root || this.lineTreeSession.kind === "branch-draw" && !this.lineTreeSession.owner.getBranch(this.lineTreeSession.source.subpathId))) this.cancelLineDrawing();
+		const rebuildSelectionFrame = !(this.activeGesture instanceof TransformGesture) && !this.activePointGesture && !this.preserveSelectionFrame;
+		const updateSubscribed = this.select.hasEventListener("select:update");
+		const affectsSelection = node ? this.sceneChangeAffectsSelection(node) : affected && affected.length > 0 ? affected.some((current) => this.sceneChangeAffectsSelection(current)) : true;
+		const selectedGeometryDirty = affectsSelection && updateSubscribed && this.selectionGeometryIsDirty();
+		if (updateSubscribed && selectedGeometryDirty) this.pendingSelectionUpdate = true;
+		if (rebuildSelectionFrame && affectsSelection) {
+			this.selectionFrame = null;
+			this.invalidatePointTopology();
+		}
+		if (affectsSelection) this.invalidateOverlay();
+	};
+	sceneChangeAffectsSelection(node) {
+		for (const { element } of this.owners) {
+			for (let current = node; current; current = current.parent) if (current === element) return true;
+			for (let current = element; current; current = current.parent) if (current === node) return true;
+		}
+		return false;
+	}
+	selectionGeometryIsDirty() {
+		for (const { element } of this.owners) {
+			if (element.transform.needsCommit || element.transform.hasDirtyDescendant) return true;
+			for (let current = element.parent; current instanceof Element; current = current.parent) if (current.transform.needsCommit) return true;
+		}
+		return false;
+	}
+	invalidatePointTopology() {
+		if (this.owners.some(({ pointEnabled }) => pointEnabled)) this.projectionTopology = null;
+	}
+	resolvePolicy(owners) {
+		if (owners.length === 0 || owners.some(({ transform }) => !transform)) return {
+			move: false,
+			resize: "none",
+			rotate: false,
+			rotationPivot: "center-only"
+		};
+		const policies = owners.map(({ transform }) => transform.getTransformPolicy());
+		const resizeX = policies.every(({ resize }) => resize === "x" || resize === "both");
+		const resizeY = policies.every(({ resize }) => resize === "y" || resize === "both");
+		return {
+			move: policies.every(({ move }) => move),
+			resize: resizeX && resizeY ? "both" : resizeX ? "x" : resizeY ? "y" : "none",
+			rotate: policies.every(({ rotate }) => rotate),
+			rotationPivot: policies.every(({ rotationPivot }) => rotationPivot === "adjustable") ? "adjustable" : "center-only"
+		};
+	}
+	setSelection(elements) {
+		const previousOwners = this.owners;
+		const gesture = this.activeGesture;
+		if (gesture) {
+			this.root.input.cancelSession();
+			if (this.activeGesture === gesture) this.finishCurrentInteraction();
+		} else if (this.contentSession || this.lineSession || this.lineTreeSession) this.finishCurrentInteraction();
+		this.root.frameRuntime.drain();
+		if (this.select.interactionController !== this || this.owners !== previousOwners) return;
+		this.replaceSelection(elements);
+		this.root.frameRuntime.drain();
+		this.requestSelectionEnd();
+	}
+	pointProjectionOwnerIsCurrent = (owner) => this.owners.length === 1 && this.owners[0] === owner && this.pointState?.ownerKey === owner.element.key && this.pointState.scope === owner.pointScope && this.root.getByKey(owner.element.key) === owner.element;
+	restoreSelectionForHistory(elements) {
+		this.replaceSelection(elements);
+	}
+	replaceSelection(elements) {
+		this.pendingSelectionRepair = null;
+		if (this.selectState?.kind !== "content") this.installSelectState({
+			kind: "idle",
+			gesture: null
+		});
+		const selected = /* @__PURE__ */ new Set();
+		for (const element of elements) if (element.activeRoot === this.root) selected.add(element);
+		const topLevel = [...selected].filter((element) => {
+			for (let parent = element.parent; parent; parent = parent.parent) if (selected.has(parent)) return false;
+			return true;
+		});
+		const owners = [];
+		for (const element of topLevel) {
+			const behavior = getEditorCapability(element, SelectionBehaviorCapabilityToken);
+			if (!behavior) continue;
+			const selectionBehavior = behavior.getSelectionBehavior();
+			owners.push({
+				...createProjectionOwner(element, selectionBehavior.mode === SelectionBehaviorMode.Standard),
+				behavior: selectionBehavior
+			});
+		}
+		this.owners = owners;
+		this.selectionValue = owners.length === 0 ? NO_ELEMENTS : owners.map(({ element }) => element);
+		if (this.selectState?.kind !== "content") this.installSelectState({
+			kind: owners.length === 0 ? "idle" : "transform",
+			gesture: null
+		});
+		this.policy = this.resolvePolicy(owners);
+		this.selectionFrame = null;
+		if (owners.length !== 1 || owners[0].element !== this.rotationPivotDisplayOwner || !this.policy.rotate || this.policy.rotationPivot !== "adjustable") this.rotationPivotDisplayOwner = null;
+		this.hoveredTarget = null;
+		this.hoveredContent = null;
+		this.invalidateOverlay();
+	}
+	requestSelectionEnd() {
+		this.notifySelect("select:end");
+	}
+	pointContextIsCurrent(state, owner) {
+		return this.pointState === state && this.root.getByKey(state.ownerKey) === owner && this.owners.length === 1 && this.owners[0].element === owner;
+	}
+	resolveCurrentPointContext(state = this.pointState) {
+		if (!state) return null;
+		const owner = this.root.getByKey(state.ownerKey);
+		if (!(owner instanceof Element) || !this.pointContextIsCurrent(state, owner)) return null;
+		const capability = getEditorCapability(owner, PointEditingCapabilityToken);
+		if (!capability || !capability.hasPointScope(state.scope)) return null;
+		return this.pointContextIsCurrent(state, owner) ? {
+			state,
+			owner,
+			capability
+		} : null;
+	}
+	resolvePointGestureContext(gesture) {
+		const state = this.pointState;
+		if (!state || this.activeGesture !== gesture || this.activePointGesture !== gesture || state.ownerKey !== gesture.ownerKey) return null;
+		const context = this.resolveCurrentPointContext(state);
+		return context?.owner.parent === gesture.startParent ? context : null;
+	}
+	pointGestureOwnsCurrentContext(gesture) {
+		return this.resolvePointGestureContext(gesture) !== null;
+	}
+	setPointState(ownerKey, scope) {
+		const owner = this.root.getByKey(ownerKey);
+		if (!(owner instanceof Element)) return false;
+		const selected = this.owners.length === 1 && this.owners[0].element === owner ? this.owners[0] : void 0;
+		if (!selected) return false;
+		const previousPointState = this.pointState;
+		const capability = getEditorCapability(owner, PointEditingCapabilityToken);
+		if (!capability || !capability.hasPointScope(scope)) return false;
+		if (this.root.getByKey(ownerKey) !== owner || this.owners.length !== 1 || this.owners[0] !== selected || this.pointState !== previousPointState) return false;
+		this.pointState = {
+			ownerKey,
+			scope
+		};
+		this.activePointTarget = null;
+		this.owners = [{
+			...createProjectionOwner(owner, false, scope, true),
+			behavior: selected.behavior
+		}];
+		this.policy = this.resolvePolicy(this.owners);
+		this.projectionOwners = null;
+		this.projectionMembership = null;
+		this.projectionTopology = null;
+		this.hoveredTarget = null;
+		this.invalidateOverlay();
+		return true;
+	}
+	exitPointState() {
+		const state = this.pointState;
+		if (!state) return;
+		this.pointState = null;
+		this.activePointTarget = null;
+		const owner = this.root.getByKey(state.ownerKey);
+		const selected = owner instanceof Element && this.owners.length === 1 && this.owners[0].element === owner ? this.owners[0] : void 0;
+		if (selected && owner instanceof Element) {
+			this.owners = [{
+				...createProjectionOwner(owner, true),
+				behavior: selected.behavior
+			}];
+			this.policy = this.resolvePolicy(this.owners);
+		}
+		this.projectionOwners = null;
+		this.projectionMembership = null;
+		this.projectionTopology = null;
+		this.hoveredTarget = null;
+		this.invalidateOverlay();
+	}
+	setActivePointTarget(target) {
+		if (this.activePointTarget?.ownerKey === target?.ownerKey && (!this.activePointTarget || !target || samePointEditTarget(this.activePointTarget.target, target.target))) return;
+		this.activePointTarget = target;
+		this.invalidateOverlay();
+	}
+	invalidateOverlay() {
+		if (this.overlayDirty) return;
+		this.overlayDirty = true;
+		this.select.transform.markPaintDirty();
+		this.lineSession?.tool.transform.markPaintDirty();
+		this.lineTreeSession?.tool.transform.markPaintDirty();
+		if (!this.activeGesture && !this.lineSession && !this.lineTreeSession) this.root.scheduleHoverRefresh();
+	}
+	shouldShowRotationPivot() {
+		return this.owners.length === 1 && this.rotationPivotDisplayOwner === this.owners[0].element && this.policy.rotate && this.policy.rotationPivot === "adjustable";
+	}
+	showRotationPivotForCurrentOwner() {
+		const owner = this.owners.length === 1 ? this.owners[0].element : null;
+		if (!owner || !this.policy.rotate || this.policy.rotationPivot !== "adjustable" || this.rotationPivotDisplayOwner === owner) return;
+		this.rotationPivotDisplayOwner = owner;
+		this.invalidateOverlay();
+	}
+	hasPendingOverlayWork() {
+		return this.overlayDirty;
+	}
+	flushOverlayProjection() {
+		if (!this.overlayDirty) return;
+		this.overlayDirty = false;
+		const pointState = this.pointState;
+		const suppressSelectionProjection = this.contentSession !== null || this.lineSession !== null || this.lineTreeSession !== null;
+		const owners = suppressSelectionProjection ? NO_PROJECTION_OWNERS : this.owners;
+		const projectionPolicy = this.pointState ? {
+			move: this.policy.move,
+			resize: "none",
+			rotate: false,
+			rotationPivot: "center-only"
+		} : this.policy;
+		if (this.projectionOwners !== owners) {
+			this.projectionOwners = owners;
+			this.projectionMembership = createSelectionProjectionMembership(owners, projectionPolicy);
+			this.projectionTopology = createSelectionProjectionTopology(owners, this.pointProjectionOwnerIsCurrent);
+		} else if (!this.projectionTopology) this.projectionTopology = createSelectionProjectionTopology(owners, this.pointProjectionOwnerIsCurrent);
+		if (pointState === this.pointState && pointState && !this.projectionTopology.pointScopeValid) {
+			this.exitPointState();
+			return;
+		}
+		const pointGesture = this.activePointGesture;
+		if (pointGesture && pointState === this.pointState && !this.projectionTopology.pointControls.some(({ target }) => samePointEditTarget(target.target, pointGesture.currentTarget))) pointGesture.finishInvalidated();
+		if (pointState !== this.pointState || owners !== (suppressSelectionProjection ? NO_PROJECTION_OWNERS : this.owners)) return;
+		const projection = buildSelectionOverlayProjection({
+			owners,
+			membership: this.projectionMembership,
+			topology: this.projectionTopology,
+			frame: owners.length > 0 ? this.selectionFrame : null,
+			policy: projectionPolicy,
+			pivot: this.rotationPivotState,
+			showPivot: this.shouldShowRotationPivot(),
+			pivotSnapMarkers: this.rotationPivotPreview?.markers,
+			activePointTarget: this.activePointTarget,
+			marquee: this.marquee
+		});
+		const lineTreeHighlight = this.lineTreeSession?.kind === "source-pick" ? this.lineTreeSession.hover?.subpathId : this.lineTreeSession?.source.subpathId;
+		this.projectionState = lineTreeHighlight === void 0 || !this.lineTreeSession ? projection : {
+			...projection,
+			pointScopeOutline: this.lineTreeSession.owner.transform.getWorldBranchPointsView(lineTreeHighlight)
+		};
+		if (owners.length > 0) this.selectionFrame = this.projectionState.frame;
+	}
+	hasPendingCompletionWork() {
+		return this.pendingSelectionUpdate || this.pendingSelectionRepair !== null;
+	}
+	flushCompletionWork() {
+		if (this.pendingSelectionUpdate && !this.select.hasEventListener("select:update")) this.pendingSelectionUpdate = false;
+		else if (this.pendingSelectionUpdate && !this.selectionGeometryIsDirty()) {
+			this.pendingSelectionUpdate = false;
+			this.select.dispatchEvent("select:update");
+		}
+		const repair = this.pendingSelectionRepair;
+		if (!repair) return;
+		this.pendingSelectionRepair = null;
+		if (this.owners === repair) this.notifySelect("select:end");
+	}
+	resolveCursor(point, contentCursor) {
+		const previousPointer = this.pointerWorld;
+		this.pointerWorld = point ?? null;
+		if (!point) {
+			this.updateHover(null, null);
+			return contentCursor;
+		}
+		const pointGesture = this.activePointGesture;
+		if (pointGesture?.connectionRole) {
+			const candidate = pointGesture.resolveWorldPoint(point);
+			const probe = this.root.enablePorts ? this.snapTool?.probePortSnap(candidate.x, candidate.y, pointGesture.connectionRole, pointGesture.snapExcludes, pointGesture.connectionSource) : void 0;
+			this.updateHover(null, null);
+			return resolvePortProbeCursor(probe);
+		}
+		if (this.activeGesture instanceof TransformGesture) {
+			if (this.activeGesture.kind === "move" && this.activeGesture.movableLineEndpoints.length > 0) return this.activeGesture.probeForbiddenPort(point) ? "not-allowed" : "move";
+			return contentCursor;
+		}
+		if (this.activeGesture) return contentCursor;
+		if (this.lineTreeSession?.kind === "source-pick") {
+			const source = this.updateLineTreeSourceHover(point);
+			this.updateHover(null, null);
+			return source ? "crosshair" : contentCursor;
+		}
+		if (this.lineTreeSession?.kind === "branch-draw") {
+			this.updateHover(null, null);
+			return resolvePortProbeCursor(this.probeLineTreeTail(this.lineTreeSession, point));
+		}
+		if (this.lineSession) {
+			this.updateHover(null, null);
+			if (previousPointer !== null && previousPointer.x === point.x && previousPointer.y === point.y && this.lineSession.confirmed.length > 0 && this.lineSession.preview === null) return "crosshair";
+			return resolvePortProbeCursor(this.probeLineAnchor(this.lineSession, point));
+		}
+		const rootContent = this.root.currentElement;
+		const rawContent = rootContent && !this.editorElements.includes(rootContent) ? rootContent : null;
+		const content = rawContent ? checkElement(rawContent, this.editorElements) ?? null : null;
+		const hit = hitSelectionOverlay(this.projectionState, point, this.select.controlSize / this.root.viewport.scale, this.select.hitPadding / this.root.viewport.scale, 8 / this.root.viewport.scale);
+		this.updateHover(hit?.target ?? null, hit ? null : content);
+		return hit?.cursor ?? content?.cursor ?? contentCursor;
+	}
+	updateHover(target, content) {
+		if (sameTarget(this.hoveredTarget, target) && this.hoveredContent === content) return;
+		this.hoveredTarget = target;
+		this.hoveredContent = content;
+		this.select.transform.markPaintDirty();
+	}
+	applyAuthoredBatch(ownerEffects, structureEffects, scope) {
+		this.root.applyChangeBatch(ownerEffects, structureEffects, scope);
+	}
+	onPointerDown(event) {
+		if (this.activeGesture) return;
+		this.root.container.focus({ preventScroll: true });
+		if (this.lineTreeSession?.kind === "source-pick") {
+			this.confirmLineTreeSource(event.detail);
+			return;
+		}
+		if (this.lineTreeSession?.kind === "branch-draw") {
+			this.confirmLineTreePoint(event.detail);
+			return;
+		}
+		if (this.lineSession) {
+			this.confirmLinePoint(event.detail);
+			return;
+		}
+		if (this.contentSession) {
+			if (this.root.getByKey(this.contentSession.ownerKey) === this.root.currentElement) return;
+			this.finishContentEditing(false);
+		}
+		const intent = pointIntent(event);
+		const contentTarget = this.root.currentElement;
+		const candidate = contentTarget ? checkElement(contentTarget, this.editorElements) : void 0;
+		const additive = event.detail.ctrlKey === true || event.detail.metaKey === true;
+		let target = this.hoveredTarget;
+		if (this.pointState && target?.kind !== "point") {
+			const pointState = this.pointState;
+			const context = this.resolveCurrentPointContext(pointState);
+			if (!context) {
+				if (this.pointState !== pointState) return;
+				this.exitPointState();
+				target = null;
+			} else if (additive || candidate && candidate !== context.owner) {
+				this.exitPointState();
+				target = null;
+			} else {
+				const scope = context.capability.resolvePointScope(intent.point, pointState.scope);
+				if (!this.pointContextIsCurrent(pointState, context.owner)) return;
+				if (scope) {
+					if (!samePointScope(scope, pointState.scope)) {
+						this.setPointState(context.owner.key, scope);
+						return;
+					}
+					this.setActivePointTarget(null);
+					if (target?.kind === "body" && this.policy.move) this.activeGesture = new SelectionPressGesture(this, intent, context.owner, contentTarget);
+					return;
+				}
+				if (target?.kind === "body" && this.policy.move) {
+					this.setActivePointTarget(null);
+					this.activeGesture = new SelectionPressGesture(this, intent, context.owner, contentTarget);
+					return;
+				}
+				this.exitPointState();
+				target = null;
+			}
+		}
+		if (target) {
+			if (target.kind === "body" && this.policy.move) if (additive) this.activeGesture = new MarqueeGesture(this, intent.point, candidate, true, this.selection);
+			else this.activeGesture = new SelectionPressGesture(this, intent, candidate, contentTarget);
+			else if (target.kind === "resize") this.startTransform("resize", intent, target.handle);
+			else if (target.kind === "rotate") this.startTransform("rotate", intent);
+			else if (target.kind === "pivot") {
+				const owner = this.owners.length === 1 ? this.owners[0].element : null;
+				if (owner) {
+					this.activeGesture = new PivotGesture(this, owner, intent.point, this.projectionState.rotationPivotWorld);
+					this.invalidateOverlay();
+				}
+			} else if (target.kind === "point") {
+				this.setActivePointTarget({
+					ownerKey: target.ownerKey,
+					target: target.target
+				});
+				if (target.move === "free") this.startPointGesture(target, intent);
+			}
+			return;
+		}
+		const behavior = candidate ? getEditorCapability(candidate, SelectionBehaviorCapabilityToken)?.getSelectionBehavior() : void 0;
+		if (!additive && candidate && behavior?.mode === SelectionBehaviorMode.OwnerDirect) {
+			this.activeGesture = new SelectionPressGesture(this, intent, candidate, contentTarget, candidate);
+			return;
+		}
+		this.activeGesture = new MarqueeGesture(this, intent.point, candidate, additive, this.selection);
+	}
+	onPointerMove(event) {
+		if (this.lineTreeSession?.kind === "source-pick") {
+			this.updateLineTreeSourceHover(event.detail);
+			return;
+		}
+		if (this.lineTreeSession?.kind === "branch-draw") {
+			this.updateLineTreePreview(event.detail);
+			return;
+		}
+		if (this.lineSession) {
+			this.updateLinePreview(event.detail);
+			return;
+		}
+		this.activeGesture?.update(pointIntent(event));
+	}
+	onPointerFinish(event) {
+		if (event.type === "pointercancel" && (this.lineSession || this.lineTreeSession)) {
+			this.cancelLineDrawing();
+			return;
+		}
+		this.activeGesture?.finish(pointIntent(event), event.type === "pointercancel");
+	}
+	onDoubleClick(event) {
+		const treeDrawing = this.lineTreeSession;
+		if (treeDrawing) {
+			const subpathId = treeDrawing.owner.resolveSubpathAtWorldPoint(event.detail);
+			if (this.lineTreeSession !== treeDrawing || treeDrawing.owner.activeRoot !== this.root) return;
+			if (subpathId === void 0) return;
+			this.cancelLineDrawing();
+			this.setPointState(treeDrawing.owner.key, {
+				kind: "subpath",
+				subpathId
+			});
+			return;
+		}
+		if (this.lineSession) return;
+		if (this.selection.length !== 1 || this.activeGesture) return;
+		const selected = this.owners[0];
+		const selectedOwners = this.owners;
+		const selectedElement = selected.element;
+		if (selected.behavior.dive === SelectionDiveMode.DirectChild) {
+			const checked = /* @__PURE__ */ new Set();
+			const excluded = /* @__PURE__ */ new Set();
+			for (const { key } of this.editorElements) excluded.add(key);
+			for (const hit of this.root.iteratePoint(event.detail, {
+				scopeRootKey: selected.element.key,
+				exclude: excluded
+			})) {
+				if (this.owners !== selectedOwners || this.root.getByKey(selectedElement.key) !== selectedElement) return;
+				let child = hit;
+				while (child.parent instanceof Element && child.parent !== selected.element) child = child.parent;
+				if (child.parent !== selected.element || checked.has(child)) continue;
+				checked.add(child);
+				const candidate = checkElement(child, this.editorElements, selected.element.key);
+				if (this.owners !== selectedOwners || this.root.getByKey(selectedElement.key) !== selectedElement) return;
+				if (!candidate) continue;
+				this.setSelection([child]);
+				return;
+			}
+		}
+		if (this.owners !== selectedOwners || this.root.getByKey(selectedElement.key) !== selectedElement) return;
+		const content = getEditorCapability(selectedElement, ContentEditingCapabilityToken);
+		if (content) {
+			if (this.beginContentEditing(content, selectedElement)) return;
+		}
+		if (this.owners !== selectedOwners || this.root.getByKey(selectedElement.key) !== selectedElement) return;
+		const point = getEditorCapability(selectedElement, PointEditingCapabilityToken);
+		if (!point) return;
+		const scope = point.resolvePointScope(event.detail, this.pointState?.scope);
+		if (this.owners !== selectedOwners || this.root.getByKey(selectedElement.key) !== selectedElement) return;
+		if (scope) this.setPointState(selectedElement.key, scope);
+	}
+	onKeyDown(event) {
+		const key = event.key.toLowerCase();
+		const command = event.ctrlKey || event.metaKey;
+		const editorContentTextarea = event.target instanceof HTMLTextAreaElement && event.target.dataset.fulateEditorContent !== void 0;
+		if (isFormControlTarget(event.target) && !editorContentTextarea) return;
+		if (command && (key === "z" || key === "y")) {
+			event.preventDefault();
+			this.finishCurrentInteraction();
+			if (key === "y" || event.shiftKey) this.history.redo();
+			else this.history.undo();
+			return;
+		}
+		if (this.activeGesture) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				const gesture = this.activeGesture;
+				this.root.input.cancelSession();
+				if (this.activeGesture === gesture) {
+					const pointGesture = this.activePointGesture;
+					if (pointGesture === gesture && pointGesture.connectionRole !== null) pointGesture.finish(void 0, true);
+					else gesture.finish();
+				}
+			}
+			return;
+		}
+		if (this.contentSession) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				this.finishContentEditing(false);
+			}
+			return;
+		}
+		if (this.lineSession || this.lineTreeSession) {
+			if (key === "l" && !command && !event.altKey && this.lineTreeSession?.kind === "source-pick" && this.pointerWorld) {
+				event.preventDefault();
+				this.confirmLineTreeSource(this.pointerWorld);
+				return;
+			}
+			if (event.key === "Escape" || event.key === "Enter") {
+				event.preventDefault();
+				this.stopLineDrawing();
+			}
+			return;
+		}
+		if (this.pointState && event.key === "Escape") {
+			event.preventDefault();
+			this.exitPointState();
+			return;
+		}
+		if (command && key === "g") {
+			event.preventDefault();
+			if (event.shiftKey) this.select.unGroup();
+			else this.select.doGroup();
+			return;
+		}
+		if (command && key === "c") {
+			const commands = this.select.keyboardCommandOwner;
+			if (!commands) return;
+			event.preventDefault();
+			commands.copy();
+			return;
+		}
+		if (command && key === "x") {
+			const commands = this.select.keyboardCommandOwner;
+			if (!commands) return;
+			event.preventDefault();
+			commands.cut();
+			return;
+		}
+		if (command && key === "v") {
+			const commands = this.select.keyboardCommandOwner;
+			if (!commands) return;
+			event.preventDefault();
+			commands.paste();
+			return;
+		}
+		if (command && key === "a") {
+			event.preventDefault();
+			const elements = /* @__PURE__ */ new Set();
+			for (const element of this.root.queryArea(this.root.viewport.getWorldRect(), {
+				bounds: "visual",
+				order: "none"
+			})) {
+				const resolved = checkElement(element, this.editorElements);
+				if (resolved) elements.add(resolved);
+			}
+			this.setSelection([...elements]);
+			return;
+		}
+		if (key === "l" && !command && !event.altKey) {
+			const tool = this.select.lineTool;
+			if (tool) {
+				event.preventDefault();
+				const selectedLineTree = this.selection.length === 1 && this.selection[0] instanceof LineTree ? this.selection[0] : null;
+				if (selectedLineTree) this.startLineTreeBranchDrawing(tool, selectedLineTree, this.pointState?.ownerKey === selectedLineTree.key && this.pointState.scope.kind === "subpath" ? this.pointState.scope.subpathId : void 0);
+				else this.startLineDrawing(tool);
+			}
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.setSelection([]);
+			return;
+		}
+		if (event.key === "Delete" || event.key === "Backspace") {
+			const commands = this.select.keyboardCommandOwner;
+			if (!commands && this.pointState && this.deletePointTarget()) {
+				event.preventDefault();
+				return;
+			}
+			if (!commands) return;
+			event.preventDefault();
+			commands.delete();
+			return;
+		}
+		if ([
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		].includes(event.key) && this.selection.length > 0) {
+			event.preventDefault();
+			const step = event.shiftKey ? 10 : 1;
+			this.nudge(event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0, event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0);
+		}
+	}
+	captureTransformRecords() {
+		const records = [];
+		for (const owner of this.owners) {
+			const capability = owner.transform;
+			if (!capability) continue;
+			records.push({
+				owner: owner.element,
+				parent: owner.element.parent,
+				capability,
+				baseline: capability.captureTransformBaseline()
+			});
+		}
+		return records;
+	}
+	startTransform(kind, intent, resizeHandle, selectionChanged = false) {
+		if (kind === "rotate") this.showRotationPivotForCurrentOwner();
+		this.root.frameRuntime.drain();
+		if (selectionChanged) this.requestSelectionEnd();
+		const frame = this.projectionState.frame;
+		if (!frame) return;
+		const records = this.captureTransformRecords();
+		if (records.length !== this.owners.length) return;
+		let snapPoints = this.owners.length === 1 ? this.owners[0].snap?.getWorldSnapPointsView() ?? frame.outline : frame.outline;
+		const selection = this.selection;
+		const snapExcludes = kind === "move" ? this.editorElements.concat(selection) : NO_ELEMENTS;
+		const selectedLine = kind === "move" && this.owners.length === 1 && this.owners[0].element instanceof BaseLine ? this.owners[0].element : null;
+		let movableLineEndpoints = NO_POINTS;
+		if (selectedLine) movableLineEndpoints = [snapPoints[0], snapPoints[snapPoints.length - 1]];
+		const history = this.history.openScope(selection);
+		this.activeGesture = new TransformGesture(this, kind, intent.point, intent, frame, records, snapPoints, movableLineEndpoints, snapExcludes, this.projectionState.rotationPivotWorld, history, resizeHandle);
+		if (kind === "move" && this.owners.every(({ behavior }) => behavior.snap === SelectionSnapMode.Enabled)) this.snapTool?.start(snapExcludes);
+	}
+	promoteSelectionPress(gesture) {
+		if (this.activeGesture !== gesture) return null;
+		let selectionChanged = false;
+		if (gesture.directDragOwner && !this.selection.includes(gesture.directDragOwner)) {
+			this.replaceSelection([gesture.directDragOwner]);
+			selectionChanged = true;
+		}
+		this.startTransform("move", gesture.start, void 0, selectionChanged);
+		const transform = this.activeGesture;
+		if (!(transform instanceof TransformGesture)) return null;
+		return transform;
+	}
+	finishSelectionPress(gesture) {
+		let pressesCurrentOwner = false;
+		if (this.selection.length === 1) for (let current = gesture.contentTarget ?? void 0; current instanceof Element; current = current.parent) {
+			if (current !== this.selection[0]) continue;
+			pressesCurrentOwner = true;
+			break;
+		}
+		if (gesture.candidate && !this.selection.includes(gesture.candidate) && !pressesCurrentOwner) this.finishSelectionGesture(gesture, [gesture.candidate]);
+		else this.finishPointerGesture(gesture);
+	}
+	finishSelectionGesture(gesture, selection) {
+		if (this.activeGesture !== gesture) return;
+		this.activeGesture = null;
+		if (selection) this.replaceSelection(selection);
+		this.root.frameRuntime.drain();
+		if (selection) this.requestSelectionEnd();
+	}
+	consumeTransform(gesture, intent) {
+		if (!gesture.ownsCurrentContext()) {
+			gesture.finishInvalidated();
+			return;
+		}
+		let worldDelta;
+		let unwrappedRotationDelta;
+		if (gesture.kind === "move") {
+			let dx = intent.point.x - gesture.start.x;
+			let dy = intent.point.y - gesture.start.y;
+			const snap = gesture.probeForbiddenPort(intent.point) ? null : this.snapTool?.detect(gesture.snapPoints, dx, dy);
+			if (snap) {
+				dx += snap.dx;
+				dy += snap.dy;
+			}
+			worldDelta = new DOMMatrix().translate(dx, dy);
+		} else if (gesture.kind === "resize") worldDelta = resolveResizeWorldDelta(gesture.frame, gesture.resizeHandle, intent.point, intent.shiftKey);
+		else {
+			const rotation = resolveRotationTransform({
+				frameAngle: gesture.frame.angle,
+				pivot: gesture.rotationPivotWorld,
+				unwrappedDelta: gesture.consumeRotationDelta(intent.point),
+				snapAngle: this.select.snapAngle,
+				snapThreshold: this.select.snapThreshold
+			});
+			worldDelta = rotation.worldDelta;
+			unwrappedRotationDelta = rotation.unwrappedDelta;
+		}
+		const transformIntent = {
+			worldDelta,
+			...unwrappedRotationDelta === void 0 ? {} : { unwrappedRotationDelta }
+		};
+		const changes = gesture.records.map((record) => record.capability.resolveTransformChange(record.baseline, transformIntent));
+		this.selectionFrame = resolveSelectionFrameTransform(gesture.frame, worldDelta, gesture.kind);
+		this.invalidatePointTopology();
+		this.applyAuthoredBatch(changes, [], gesture.history);
+		this.invalidateOverlay();
+	}
+	startPointGesture(target, intent) {
+		const owner = this.root.getByKey(target.ownerKey);
+		if (!(owner instanceof Element)) return;
+		const state = this.pointState;
+		const context = state && this.resolveCurrentPointContext(state);
+		if (!context || context.owner !== owner) return;
+		const control = this.projectionState.controls.find(({ target: candidate }) => sameTarget(candidate, target));
+		if (!control || control.target.kind !== "point") return;
+		const currentTarget = control.target;
+		const connectionRole = this.select.connectionGesture !== false && currentTarget.role === "endpoint" && currentTarget.target.kind === "anchor" ? isEndpointRelationSource(owner) ? owner.getEndpointRole(currentTarget.target.anchorId) : null : null;
+		const snapExcludes = this.editorElements.concat(owner);
+		this.activeGesture = new PointGesture(this, owner.key, owner.parent, currentTarget.target, currentTarget.insertT, currentTarget.role, connectionRole, snapExcludes, this.history.openScope(this.selection), intent.point, control.world);
+		this.snapTool?.start(snapExcludes, void 0, connectionRole !== null && this.root.enablePorts);
+	}
+	consumePoint(gesture, intent, first) {
+		const context = this.resolvePointGestureContext(gesture);
+		if (!context) {
+			if (this.activePointGesture === gesture) gesture.finishInvalidated();
+			return;
+		}
+		if (first && gesture.currentTarget.kind !== "segment" && intent.point.x === gesture.startPointerWorld.x && intent.point.y === gesture.startPointerWorld.y) return;
+		let point = gesture.resolveWorldPoint(intent.point);
+		let target;
+		let targetOwner;
+		let targetParent;
+		let portProbe = null;
+		if (gesture.connectionRole && this.root.enablePorts) {
+			portProbe = this.snapTool?.probePortSnap(point.x, point.y, gesture.connectionRole, gesture.snapExcludes, gesture.connectionSource) ?? NO_PORT_SNAP$1;
+			const hit = portProbe.snap;
+			if (hit) {
+				point = hit;
+				target = {
+					elementKey: hit.elementKey,
+					portId: hit.portId
+				};
+				targetOwner = this.root.getByKey(hit.elementKey);
+				targetParent = targetOwner.parent;
+			}
+		}
+		gesture.connectionTarget = target;
+		gesture.connectionTargetOwner = targetOwner;
+		gesture.connectionTargetParent = targetParent;
+		if (isBlockedPortProbe(portProbe)) return;
+		if (!target) {
+			const offset = this.snapTool?.detect([point], 0, 0);
+			if (offset) point = {
+				x: point.x + offset.dx,
+				y: point.y + offset.dy
+			};
+		}
+		const local = context.owner.transform.toLocal(point);
+		if (!local) return;
+		const request = gesture.currentTarget.kind === "segment" ? {
+			kind: "insert-on-segment",
+			segmentId: gesture.currentTarget.segmentId,
+			t: gesture.insertT,
+			local
+		} : gesture.currentTarget.kind === "handle" ? {
+			kind: "move-handle",
+			target: gesture.currentTarget,
+			local
+		} : {
+			kind: "move-anchor",
+			anchorId: gesture.currentTarget.anchorId,
+			local
+		};
+		const edit = context.capability.resolvePointEdit(request);
+		let current = this.resolvePointGestureContext(gesture);
+		if (!current || current.owner !== context.owner) return;
+		if (!edit) return;
+		let change;
+		if (edit.kind === "owner-change") change = edit.change;
+		else {
+			change = resolveDisconnectEndpointChanges(this.root, [edit.source], new Map([[edit.source.anchorId, edit.local]]))[0];
+			current = this.resolvePointGestureContext(gesture);
+			if (!current || current.owner !== context.owner || !change) return;
+		}
+		this.projectionTopology = null;
+		this.selectionFrame = null;
+		this.applyAuthoredBatch([change], [], gesture.history);
+		current = this.resolvePointGestureContext(gesture);
+		if (edit.kind === "owner-change" && edit.nextTarget && current?.owner === context.owner) {
+			gesture.currentTarget = edit.nextTarget;
+			this.activePointTarget = {
+				ownerKey: context.owner.key,
+				target: edit.nextTarget
+			};
+		}
+		this.invalidateOverlay();
+	}
+	deletePointTarget() {
+		const state = this.pointState;
+		if (!state) return false;
+		const context = this.resolveCurrentPointContext(state);
+		if (!context) {
+			if (this.pointState === state) this.exitPointState();
+			return false;
+		}
+		const hovered = this.hoveredTarget?.kind === "point" ? {
+			ownerKey: this.hoveredTarget.ownerKey,
+			target: this.hoveredTarget.target
+		} : null;
+		const target = this.activePointTarget ?? hovered;
+		if (target) {
+			if (target.ownerKey !== context.owner.key) return true;
+			if (target.target.kind !== "anchor") return true;
+			const edit = context.capability.resolvePointEdit({
+				kind: "delete-anchor",
+				anchorId: target.target.anchorId
+			});
+			if (!this.pointContextIsCurrent(state, context.owner)) return true;
+			if (!edit || edit.kind !== "owner-change") return true;
+			this.projectionTopology = null;
+			const scope = this.history.openScope(this.selection);
+			this.applyAuthoredBatch([edit.change], [], scope);
+			this.root.frameRuntime.drain();
+			this.invalidateOverlay();
+			this.publishConfiguredChange(scope?.finish(this.selection));
+			return true;
+		}
+		const edit = context.capability.resolvePointEdit({
+			kind: "delete-scope",
+			scope: state.scope
+		});
+		if (!this.pointContextIsCurrent(state, context.owner)) return true;
+		if (!edit) return false;
+		if (edit.kind !== "owner-change") return true;
+		this.projectionTopology = null;
+		const scope = this.history.openScope(this.selection);
+		this.applyAuthoredBatch([edit.change], [], scope);
+		if (edit.nextScope && this.pointContextIsCurrent(state, context.owner)) this.setPointState(context.owner.key, edit.nextScope);
+		this.root.frameRuntime.drain();
+		this.invalidateOverlay();
+		this.publishConfiguredChange(scope?.finish(this.selection));
+		return true;
+	}
+	nudge(dx, dy) {
+		this.root.frameRuntime.drain();
+		const frame = this.projectionState.frame;
+		const records = this.captureTransformRecords();
+		if (records.length !== this.owners.length) return;
+		const scope = this.history.openScope(this.selection);
+		const worldDelta = new DOMMatrix().translate(dx, dy);
+		const intent = { worldDelta };
+		const changes = records.map((record) => record.capability.resolveTransformChange(record.baseline, intent));
+		if (changes.length > 0) {
+			if (frame) this.selectionFrame = resolveSelectionFrameTransform(frame, worldDelta, "move");
+			this.invalidatePointTopology();
+			this.preserveSelectionFrame = true;
+			try {
+				this.applyAuthoredBatch(changes, [], scope);
+				this.root.frameRuntime.drain();
+			} finally {
+				this.preserveSelectionFrame = false;
+			}
+		}
+		this.invalidateOverlay();
+		this.publishConfiguredChange(scope?.finish(this.selection));
+	}
+	setProperties(patch) {
+		if (this.owners.length === 0) return;
+		this.finishCurrentInteraction();
+		if (this.select.interactionController !== this) return;
+		const selection = this.selection;
+		if (selection.length === 0) return;
+		const scope = this.history.openScope(selection);
+		const changes = selection.map((owner) => ({
+			owner,
+			patch
+		}));
+		this.applyAuthoredBatch(resolveConnectionPortChanges(this.root, changes), [], scope);
+		this.root.frameRuntime.drain();
+		this.publishConfiguredChange(scope?.finish(this.selection));
+	}
+	prepareTransformCommandFrame() {
+		const hadInteraction = this.activeGesture !== null || this.contentSession !== null || this.lineSession !== null || this.lineTreeSession !== null;
+		this.finishCurrentInteraction();
+		this.root.frameRuntime.drain();
+		if (this.select.interactionController !== this) return;
+		if (hadInteraction || this.overlayDirty) {
+			this.selectionFrame = null;
+			if (!this.overlayDirty) this.invalidateOverlay();
+			this.flushOverlayProjection();
+		}
+		return this.projectionState.frame;
+	}
+	applyTransformCommand(worldDelta) {
+		const records = this.captureTransformRecords();
+		if (records.length !== this.owners.length) return;
+		const intent = { worldDelta };
+		const changes = records.map((record) => record.capability.resolveTransformChange(record.baseline, intent));
+		this.invalidatePointTopology();
+		const scope = this.history.openScope(this.selection);
+		this.applyCommand(changes, [], scope, this.selection);
+	}
+	resize(options = {}) {
+		const projectionFrame = this.prepareTransformCommandFrame();
+		if (!projectionFrame) return;
+		const frame = this.owners.length === 1 ? createWorldVisualBoundsSelectionFrame(this.owners, projectionFrame) : projectionFrame;
+		if (!frame) return;
+		const resizeX = this.policy.resize === "x" || this.policy.resize === "both";
+		const resizeY = this.policy.resize === "y" || this.policy.resize === "both";
+		const width = resizeX && options.width !== void 0 ? options.width : frame.width;
+		const height = resizeY && options.height !== void 0 ? options.height : frame.height;
+		if (width === frame.width && height === frame.height) return;
+		const worldDelta = resolveResizeWorldDeltaForSize(frame, width, height, options.anchor);
+		if (worldDelta.a === 1 && worldDelta.b === 0 && worldDelta.c === 0 && worldDelta.d === 1 && worldDelta.e === 0 && worldDelta.f === 0) return;
+		this.applyTransformCommand(worldDelta);
+	}
+	flip(direction) {
+		const frame = this.prepareTransformCommandFrame();
+		if (!frame) return;
+		if (!(direction === "horizontal" ? this.policy.resize === "x" || this.policy.resize === "both" : this.policy.resize === "y" || this.policy.resize === "both")) return;
+		this.applyTransformCommand(resolveFlipWorldDelta(frame, direction));
+	}
+	previewRotationPivot(owner, point) {
+		const preview = this.resolveRotationPivot(owner, point, true);
+		if (!preview) return;
+		this.rotationPivotPreview = {
+			owner,
+			...preview
+		};
+		this.invalidateOverlay();
+	}
+	clearRotationPivotPreview(owner) {
+		if (this.rotationPivotPreview?.owner !== owner) return;
+		this.rotationPivotPreview = null;
+		this.invalidateOverlay();
+	}
+	commitRotationPivot(owner, point) {
+		const resolved = this.rotationPivotPreview?.owner === owner ? this.rotationPivotPreview : this.resolveRotationPivot(owner, point, false);
+		this.rotationPivotPreview = null;
+		if (!resolved || owner.activeRoot !== this.root) {
+			this.invalidateOverlay();
+			return;
+		}
+		if (Object.is(owner.rotationPivotX, resolved.x) && Object.is(owner.rotationPivotY, resolved.y)) {
+			this.invalidateOverlay();
+			return;
+		}
+		const scope = this.history.openScope(this.selection);
+		this.applyAuthoredBatch([{
+			owner,
+			patch: {
+				rotationPivotX: resolved.x,
+				rotationPivotY: resolved.y
+			}
+		}], [], scope);
+		this.root.frameRuntime.drain();
+		this.invalidateOverlay();
+		return scope?.finish(this.selection);
+	}
+	resolveRotationPivot(owner, point, snap) {
+		const local = owner.transform.toLocal(point);
+		if (!local) return;
+		const frame = this.projectionState.frame;
+		if (!frame) return;
+		const bounds = owner.transform.getLocalVisualBoundsView() ?? owner.transform.getLayoutReferenceBoundsView();
+		const markers = createSelectionRotationPivotSnapMarkers(frame);
+		if (snap) {
+			const threshold = 8 / this.root.viewport.scale;
+			let nearest = -1;
+			let distance = threshold;
+			markers.forEach((marker, index) => {
+				const next = Math.hypot(marker.x - point.x, marker.y - point.y);
+				if (next <= distance) {
+					nearest = index;
+					distance = next;
+				}
+			});
+			if (nearest !== -1) {
+				const marker = markers[nearest];
+				const x = marker.horizontal;
+				const y = marker.vertical;
+				return {
+					local: {
+						x: bounds.left + (resolveOrigin(x) + .5) * bounds.width,
+						y: bounds.top + (resolveOrigin(y) + .5) * bounds.height
+					},
+					x,
+					y,
+					markers
+				};
+			}
+		}
+		return {
+			local,
+			x: bounds.width === 0 ? 0 : (local.x - bounds.left) / bounds.width - .5,
+			y: bounds.height === 0 ? 0 : (local.y - bounds.top) / bounds.height - .5,
+			markers
+		};
+	}
+	setMarquee(rect) {
+		this.marquee = rect;
+		this.invalidateOverlay();
+	}
+	finishPointerGesture(gesture) {
+		if (this.activeGesture === gesture) this.activeGesture = null;
+		if (gesture instanceof PointGesture) this.frameFlush.discardGestureWork(gesture);
+	}
+	pointConnectionCandidateIsCurrent(gesture, source, target) {
+		return this.root.enablePorts && this.resolvePointGestureContext(gesture) !== null && gesture.connectionSource?.elementKey === source.elementKey && gesture.connectionSource.anchorId === source.anchorId && gesture.connectionTarget?.elementKey === target.elementKey && gesture.connectionTarget.portId === target.portId && this.root.getByKey(target.elementKey) === gesture.connectionTargetOwner && gesture.connectionTargetOwner?.parent === gesture.connectionTargetParent;
+	}
+	finishPointConnectionGesture(gesture) {
+		const source = gesture.connectionSource;
+		const target = gesture.connectionTarget;
+		const connectionGesture = this.select.connectionGesture;
+		if (source && target && connectionGesture === "auto" && this.pointConnectionCandidateIsCurrent(gesture, source, target)) {
+			const change = resolveConnectEndpointChange(this.root, source, target);
+			if (change && this.pointConnectionCandidateIsCurrent(gesture, source, target)) {
+				this.applyAuthoredBatch([change], [], gesture.history);
+				this.root.frameRuntime.drain();
+			}
+		}
+		const publishIntent = !!source && !!target && typeof connectionGesture === "function" && this.pointConnectionCandidateIsCurrent(gesture, source, target);
+		this.finishPointerGesture(gesture);
+		this.publishConfiguredChange(gesture.history?.finish(this.selection));
+		if (publishIntent) connectionGesture(createToolsConnectionIntent(this.root, this.history, source, target));
+	}
+	beginContentEditing(capability, expectedOwner) {
+		this.finishCurrentInteraction();
+		const owners = this.owners;
+		if (owners.length !== 1 || owners[0].element !== expectedOwner || this.root.getByKey(expectedOwner.key) !== expectedOwner) return true;
+		let session;
+		session = capability.beginContentEditing({
+			submit: (value) => {
+				const change = session.resolveTextChange(value);
+				if (change && this.contentSession === session && this.root.getByKey(session.ownerKey) === expectedOwner) this.applyAuthoredBatch([change], [], this.contentHistory);
+			},
+			finish: () => this.finishContentEditing(false)
+		});
+		const current = this.owners === owners && this.root.getByKey(expectedOwner.key) === expectedOwner && this.contentSession === null;
+		if (!session) return !current;
+		if (!current) {
+			session.close();
+			return true;
+		}
+		this.contentSession = session;
+		this.contentHistory = this.history.openScope(this.selection);
+		this.invalidateOverlay();
+		return true;
+	}
+	finishContentEditing(discard) {
+		const session = this.contentSession;
+		if (!session) return;
+		discard ||= this.root.getByKey(session.ownerKey) === void 0;
+		const scope = this.contentHistory;
+		this.contentSession = null;
+		this.contentHistory = void 0;
+		try {
+			session.close();
+			if (this.owners.some(({ element }) => element.activeRoot !== this.root)) {
+				this.replaceSelection(this.selection);
+				this.pendingSelectionRepair = this.owners;
+			}
+			this.root.frameRuntime.drain();
+			if (discard) scope?.discard();
+			else this.publishConfiguredChange(scope?.finish(this.selection));
+		} finally {
+			this.invalidateOverlay();
+		}
+	}
+	startLineDrawing(tool) {
+		if (this.lineSession) this.cancelLineDrawing();
+		if (this.lineTreeSession) this.cancelLineDrawing();
+		this.finishCurrentInteraction();
+		const history = this.history.openScope(this.selection);
+		const confirmed = [];
+		this.setSelection([]);
+		this.lineSession = {
+			tool,
+			resultType: tool.getResultTypeForController(),
+			tailDecoration: tool.getTailDecorationForController(),
+			history,
+			confirmed,
+			headTarget: void 0,
+			tailTarget: void 0,
+			preview: null,
+			snap: null
+		};
+		if (this.root.enablePorts && this.select.connectionGesture !== false) this.snapTool?.start(this.editorElements, void 0, true);
+		this.invalidateOverlay();
+	}
+	startLineTreeBranchDrawing(tool, owner, activeSubpathId) {
+		if (this.lineSession || this.lineTreeSession) this.cancelLineDrawing();
+		this.finishCurrentInteraction();
+		this.exitPointState();
+		const tailDecoration = tool.getTailDecorationForController();
+		if (activeSubpathId !== void 0) {
+			const source = owner.getBranchTailSource(activeSubpathId);
+			this.beginLineTreeBranchDraft(tool, owner, source, tailDecoration);
+			return;
+		}
+		const source = this.pointerWorld ? owner.resolveBranchTailAtWorldPoint(this.pointerWorld) : void 0;
+		if (source) {
+			this.beginLineTreeBranchDraft(tool, owner, source, tailDecoration);
+			return;
+		}
+		this.lineTreeSession = {
+			kind: "source-pick",
+			tool,
+			owner,
+			tailDecoration,
+			hover: null
+		};
+		this.invalidateOverlay();
+	}
+	updateLineTreeSourceHover(point) {
+		const session = this.lineTreeSession;
+		if (session?.kind !== "source-pick") return;
+		const previousSubpathId = session.hover?.subpathId;
+		session.hover = session.owner.resolveBranchTailAtWorldPoint(point) ?? null;
+		if (session.hover?.subpathId !== previousSubpathId) this.invalidateOverlay();
+		return session.hover;
+	}
+	confirmLineTreeSource(point) {
+		const session = this.lineTreeSession;
+		if (session?.kind !== "source-pick") return;
+		const source = session.owner.resolveBranchTailAtWorldPoint(point);
+		if (!source) return;
+		this.beginLineTreeBranchDraft(session.tool, session.owner, source, session.tailDecoration);
+	}
+	beginLineTreeBranchDraft(tool, owner, source, tailDecoration) {
+		this.lineTreeSession = {
+			kind: "branch-draw",
+			tool,
+			owner,
+			source,
+			tailDecoration,
+			confirmed: [source.world],
+			tailTarget: void 0,
+			preview: null,
+			snap: null
+		};
+		if (this.root.enablePorts && this.select.connectionGesture !== false) this.snapTool?.start(this.editorElements.concat(owner), void 0, true);
+		this.invalidateOverlay();
+	}
+	updateLineTreePreview(point) {
+		const session = this.lineTreeSession;
+		if (session?.kind !== "branch-draw") return;
+		session.preview = {
+			x: point.x,
+			y: point.y
+		};
+		session.snap = this.probeLineTreeTail(session, point).snap;
+		this.invalidateOverlay();
+	}
+	probeLineTreeTail(session, point) {
+		if (!this.root.enablePorts || this.select.connectionGesture === false) return NO_PORT_SNAP$1;
+		return this.snapTool?.probePortSnap(point.x, point.y, "input", this.editorElements.concat(session.owner)) ?? NO_PORT_SNAP$1;
+	}
+	confirmLineTreePoint(point) {
+		const session = this.lineTreeSession;
+		if (session?.kind !== "branch-draw") return;
+		const probe = this.probeLineTreeTail(session, point);
+		if (isBlockedPortProbe(probe)) return;
+		const snap = probe.snap;
+		session.snap = snap;
+		session.tailTarget = snap ? {
+			elementKey: snap.elementKey,
+			portId: snap.portId
+		} : void 0;
+		session.confirmed.push(snap ? {
+			x: snap.x,
+			y: snap.y
+		} : {
+			x: point.x,
+			y: point.y
+		});
+		if (probe.state !== null) {
+			this.confirmLineTreeBranchDrawing();
+			return;
+		}
+		this.invalidateOverlay();
+	}
+	confirmLineTreeBranchDrawing() {
+		const session = this.lineTreeSession;
+		if (session?.kind !== "branch-draw" || session.confirmed.length < 2) return;
+		const points = session.confirmed.slice(1).map((point) => {
+			const local = session.owner.transform.toLocal(point);
+			if (!local) throw new Error("LineTool cannot extend a LineTree in a singular frame");
+			return {
+				x: local.x,
+				y: local.y
+			};
+		});
+		const topology = moveLineTreePoint(session.owner.topology, session.source.anchorId, session.source.local, void 0);
+		const autoConnect = this.root.enablePorts && this.select.connectionGesture === "auto";
+		const added = addLineTreeBranchAtTail(topology, session.source.subpathId, points, {
+			...DEFAULT_LINE_TREE_BRANCH_STYLE,
+			tailDecoration: session.tailDecoration
+		}, autoConnect && session.tailTarget ? {
+			kind: "endpoint-binding",
+			target: session.tailTarget
+		} : void 0);
+		const tailAnchorId = added.topology.branches.find(({ subpathId }) => subpathId === added.subpathId).vertices.at(-1).anchorId;
+		const scope = this.history.openScope(this.selection);
+		this.applyAuthoredBatch([{
+			owner: session.owner,
+			patch: { topology: added.topology }
+		}], [], scope);
+		this.root.frameRuntime.drain();
+		if (this.lineTreeSession !== session) {
+			this.publishConfiguredChange(scope?.finish(this.selection));
+			return;
+		}
+		this.lineTreeSession = null;
+		this.snapTool?.stop();
+		const enteredPoint = this.setPointState(session.owner.key, {
+			kind: "subpath",
+			subpathId: added.subpathId
+		});
+		this.invalidateOverlay();
+		this.publishConfiguredChange(scope?.finish(this.selection));
+		const connectionGesture = this.select.connectionGesture;
+		if (this.root.enablePorts && enteredPoint && session.tailTarget && typeof connectionGesture === "function") connectionGesture(createToolsConnectionIntent(this.root, this.history, {
+			elementKey: session.owner.key,
+			anchorId: tailAnchorId
+		}, session.tailTarget));
+	}
+	updateLinePreview(point) {
+		const session = this.lineSession;
+		session.preview = {
+			x: point.x,
+			y: point.y
+		};
+		session.snap = this.probeLineAnchor(session, point).snap;
+		this.invalidateOverlay();
+	}
+	probeLineAnchor(session, point) {
+		if (!this.root.enablePorts || this.select.connectionGesture === false) return NO_PORT_SNAP$1;
+		return this.snapTool?.probePortSnap(point.x, point.y, session.confirmed.length === 0 ? "output" : "input", this.editorElements) ?? NO_PORT_SNAP$1;
+	}
+	confirmLinePoint(point) {
+		const session = this.lineSession;
+		const probe = this.probeLineAnchor(session, point);
+		if (isBlockedPortProbe(probe)) return;
+		const snap = probe.snap;
+		session.snap = snap;
+		const confirmed = snap ? {
+			x: snap.x,
+			y: snap.y
+		} : {
+			x: point.x,
+			y: point.y
+		};
+		const target = snap ? {
+			elementKey: snap.elementKey,
+			portId: snap.portId
+		} : void 0;
+		if (session.confirmed.length === 0) session.headTarget = target;
+		else session.tailTarget = target;
+		session.confirmed.push(confirmed);
+		if (probe.state !== null && session.confirmed.length >= 2) {
+			this.confirmLineDrawing();
+			return;
+		}
+		session.preview = null;
+		session.snap = null;
+		this.invalidateOverlay();
+	}
+	stopLineDrawing() {
+		if (this.lineTreeSession?.kind === "branch-draw") {
+			if (this.lineTreeSession.confirmed.length >= 2) this.confirmLineTreeBranchDrawing();
+			else this.cancelLineDrawing();
+			return;
+		}
+		if (this.lineTreeSession) {
+			this.cancelLineDrawing();
+			return;
+		}
+		if (this.lineSession && this.lineSession.confirmed.length >= 2) this.confirmLineDrawing();
+		else this.cancelLineDrawing();
+	}
+	cancelLineDrawing() {
+		const session = this.lineSession;
+		if (!session && !this.lineTreeSession) return;
+		session?.history?.discard();
+		this.snapTool?.stop();
+		this.lineSession = null;
+		this.lineTreeSession = null;
+		this.invalidateOverlay();
+	}
+	confirmLineDrawing() {
+		const session = this.lineSession;
+		const parent = session.tool.getContentLayerForController();
+		const localPoints = session.confirmed.map((point) => {
+			const local = parent instanceof Element ? parent.transform.toLocal(point) : point;
+			if (!local) throw new Error("LineTool cannot place a line in a singular parent");
+			return {
+				x: local.x,
+				y: local.y
+			};
+		});
+		const autoConnect = this.root.enablePorts && this.select.connectionGesture === "auto";
+		const line = session.resultType === "line" ? new Line({
+			path: localPoints,
+			relations: {
+				head: autoConnect && session.headTarget ? {
+					kind: "endpoint-binding",
+					target: session.headTarget
+				} : void 0,
+				tail: autoConnect && session.tailTarget ? {
+					kind: "endpoint-binding",
+					target: session.tailTarget
+				} : void 0
+			},
+			strokeWidth: 2,
+			tailDecoration: session.tailDecoration
+		}) : new LineTree({ topology: createLineTreeTopology(localPoints, {
+			...DEFAULT_LINE_TREE_BRANCH_STYLE,
+			tailDecoration: session.tailDecoration
+		}, {
+			head: autoConnect && session.headTarget ? {
+				kind: "endpoint-binding",
+				target: session.headTarget
+			} : void 0,
+			tail: autoConnect && session.tailTarget ? {
+				kind: "endpoint-binding",
+				target: session.tailTarget
+			} : void 0
+		}) });
+		const bindable = line.getBindableEndpoints();
+		const headSource = bindable[0]?.ref;
+		const tailSource = bindable.at(-1)?.ref;
+		const structure = [{
+			owner: parent,
+			children: [...parent.children, line]
+		}];
+		this.applyAuthoredBatch([], structure, session.history);
+		this.root.frameRuntime.drain();
+		this.snapTool?.stop();
+		this.lineSession = null;
+		this.invalidateOverlay();
+		this.publishConfiguredChange(session.history?.finish(this.selection));
+		const connectionGesture = this.select.connectionGesture;
+		if (!this.root.enablePorts || typeof connectionGesture !== "function") return;
+		if (session.headTarget && headSource) connectionGesture(createToolsConnectionIntent(this.root, this.history, headSource, session.headTarget));
+		if (session.tailTarget && tailSource && (!headSource || tailSource.anchorId !== headSource.anchorId)) connectionGesture(createToolsConnectionIntent(this.root, this.history, tailSource, session.tailTarget));
+	}
+	getLineDrawingView(tool) {
+		const session = this.lineSession;
+		if (session?.tool === tool) return session;
+		const lineTree = this.lineTreeSession;
+		return lineTree?.kind === "branch-draw" && lineTree.tool === tool ? lineTree : null;
+	}
+	hasLineToolSession(tool) {
+		return this.lineSession?.tool === tool || this.lineTreeSession?.tool === tool;
+	}
+	applyCommand(ownerEffects, structureEffects, scope, selectionAfter, options) {
+		const selectionOwners = this.owners;
+		let installedSelection;
+		this.applyAuthoredBatch(ownerEffects, structureEffects, scope);
+		if (options?.installSelection ? options.installSelection() : this.owners === selectionOwners || this.pendingSelectionRepair === this.owners) {
+			this.replaceSelection(selectionAfter);
+			if (options?.installSelection) installedSelection = {
+				owners: this.owners,
+				interaction: this.controllerState
+			};
+		}
+		options?.beforeDrain?.();
+		if (this.select.interactionController !== this) {
+			scope?.discard();
+			return;
+		}
+		this.root.frameRuntime.drain();
+		this.publishConfiguredChange(scope?.finish(this.selection));
+		options?.afterHistory?.();
+		if (!options?.installSelection || installedSelection?.owners === this.owners && installedSelection.interaction === this.controllerState) this.notifySelect("select:end");
+	}
+	finishCurrentInteraction() {
+		if (this.contentSession) {
+			this.finishContentEditing(false);
+			return;
+		}
+		if (this.lineSession) {
+			this.cancelLineDrawing();
+			return;
+		}
+		if (this.lineTreeSession) {
+			this.cancelLineDrawing();
+			return;
+		}
+		const gesture = this.activeGesture;
+		const pointGesture = this.activePointGesture;
+		if (pointGesture) {
+			pointGesture.finish(void 0, pointGesture.connectionRole !== null);
+			return;
+		}
+		gesture?.finish();
+	}
+	destroy() {
+		try {
+			const pointGesture = this.activePointGesture;
+			if (pointGesture) pointGesture.finish(void 0, pointGesture.connectionRole !== null);
+			else this.finishCurrentInteraction();
+		} finally {
+			for (const cleanup of this.cleanups.splice(0)) cleanup();
+			this.pendingSelectionRepair = null;
+			this.frameFlush.setOverlayClient(null);
+			this.history.bindSelection(null);
+			this.snapTool?.stop();
+			if (this.root.inject(editorControllerKey) === this) this.root.provide(editorControllerKey, void 0);
+		}
+	}
+};
+function getEditorInteractionController(root) {
+	return root.inject(editorControllerKey);
+}
+//#endregion
+//#region packages/tools/src/history/index.ts
+function cloneHistoryValue(value) {
+	return value !== null && typeof value === "object" ? structuredClone(value) : value;
+}
+function selectionKeys(elements) {
+	return elements.map((element) => element.key);
+}
+function releaseHistoryEntry(entry) {
+	entry.changes.length = 0;
+}
+var ActiveHistoryScope = class {
+	properties = /* @__PURE__ */ new Map();
+	placements = /* @__PURE__ */ new Map();
+	changes;
+	completed = false;
+	constructor(manager, selectionBefore, recordHistory) {
+		this.manager = manager;
+		this.selectionBefore = selectionBefore;
+		this.recordHistory = recordHistory;
+	}
+	record(change) {
+		if (this.completed || !this.recordHistory) return;
+		(this.changes ??= []).push(change);
+	}
+	recordPropertyChange(owner, key, before) {
+		if (this.completed) return;
+		let fields = this.properties.get(owner);
+		if (!fields) {
+			fields = /* @__PURE__ */ new Map();
+			this.properties.set(owner, fields);
+		}
+		if (!fields.has(key)) fields.set(key, {
+			before,
+			value: void 0
+		});
+	}
+	recordPlacementChange(node, beforeOwner, beforeIndex) {
+		if (this.completed) return;
+		if (!this.placements.has(node)) this.placements.set(node, { before: {
+			owner: beforeOwner,
+			index: beforeIndex
+		} });
+	}
+	finish(selectionAfter) {
+		if (this.completed) return false;
+		this.completed = true;
+		const properties = this.recordHistory ? [] : null;
+		const lineTrees = this.recordHistory ? [] : null;
+		let canvasChanged = false;
+		for (const [owner, fields] of this.properties) {
+			Element.readConfiguredPropertyValues(owner, fields);
+			for (const [key, change] of fields) {
+				const after = change.value;
+				if (Object.is(change.before, after)) continue;
+				if (key === "topology" && owner instanceof LineTree) {
+					const delta = createLineTreeTopologyDelta(change.before, after);
+					if (!delta) continue;
+					canvasChanged = true;
+					lineTrees?.push({
+						owner,
+						delta
+					});
+					continue;
+				}
+				canvasChanged = true;
+				properties?.push({
+					owner,
+					key,
+					before: cloneHistoryValue(change.before),
+					after: cloneHistoryValue(after)
+				});
+			}
+		}
+		const placements = this.recordHistory ? [] : null;
+		for (const [node, change] of this.placements) {
+			const afterOwner = node.parent;
+			const afterIndex = afterOwner ? afterOwner.children.indexOf(node) : -1;
+			if (change.before.owner === afterOwner && change.before.index === afterIndex) continue;
+			canvasChanged = true;
+			placements?.push({
+				node,
+				before: change.before,
+				after: {
+					owner: afterOwner,
+					index: afterIndex
+				}
+			});
+		}
+		if (!canvasChanged && (!this.changes || this.changes.length === 0)) return false;
+		if (this.recordHistory) {
+			const changes = this.changes ?? [];
+			this.changes = void 0;
+			this.manager.push({
+				properties,
+				lineTrees,
+				placements,
+				changes,
+				selectionBefore: this.selectionBefore,
+				selectionAfter: selectionKeys(selectionAfter)
+			});
+		}
+		return canvasChanged;
+	}
+	discard() {
+		if (this.completed) return;
+		this.completed = true;
+		if (this.changes) {
+			this.changes.length = 0;
+			this.changes = void 0;
+		}
+	}
+};
+var HistoryManager = class {
+	enabled = true;
+	undoStack = [];
+	redoStack = [];
+	selectionAdapter = null;
+	constructor(root, limit = 50) {
+		this.root = root;
+		this.limit = limit;
+	}
+	get undoCount() {
+		return this.undoStack.length;
+	}
+	get redoCount() {
+		return this.redoStack.length;
+	}
+	bindSelection(adapter) {
+		this.selectionAdapter = adapter;
+	}
+	openScope(selectionBefore = this.selectionAdapter?.getSelection() ?? []) {
+		const recordHistory = this.enabled;
+		if (!recordHistory && !this.selectionAdapter?.hasConfiguredChangeListener()) return void 0;
+		return new ActiveHistoryScope(this, recordHistory ? selectionKeys(selectionBefore) : null, recordHistory);
+	}
+	/** @internal Publishes one completed actual configured semantic change. */
+	publishConfiguredChange(changed) {
+		if (changed && this.selectionAdapter?.hasConfiguredChangeListener()) this.selectionAdapter.publishConfiguredChange();
+	}
+	/** @internal 只由存在Canvas净变化或外部change的scope完成时写入。 */
+	push(entry) {
+		this.undoStack.push(entry);
+		if (this.undoStack.length > this.limit) releaseHistoryEntry(this.undoStack.shift());
+		for (const redo of this.redoStack) releaseHistoryEntry(redo);
+		this.redoStack.length = 0;
+	}
+	clear() {
+		for (const entry of this.undoStack) releaseHistoryEntry(entry);
+		for (const entry of this.redoStack) releaseHistoryEntry(entry);
+		this.undoStack.length = 0;
+		this.redoStack.length = 0;
+	}
+	buildPropertyChanges(entry, direction) {
+		const patches = /* @__PURE__ */ new Map();
+		for (const change of entry.properties) {
+			let patch = patches.get(change.owner);
+			if (!patch) {
+				patch = {};
+				patches.set(change.owner, patch);
+			}
+			patch[change.key] = cloneHistoryValue(change[direction]);
+		}
+		return [...patches].map(([owner, patch]) => ({
+			owner,
+			patch
+		}));
+	}
+	buildStructureChanges(entry, direction) {
+		const parents = /* @__PURE__ */ new Set();
+		for (const change of entry.placements) {
+			if (change.node.parent) parents.add(change.node.parent);
+			const target = change[direction].owner;
+			if (target) parents.add(target);
+		}
+		const children = /* @__PURE__ */ new Map();
+		for (const parent of parents) children.set(parent, [...parent.children]);
+		for (const change of entry.placements) {
+			const current = change.node.parent;
+			if (!current) continue;
+			const list = children.get(current);
+			const index = list.indexOf(change.node);
+			if (index !== -1) list.splice(index, 1);
+		}
+		const insertions = /* @__PURE__ */ new Map();
+		for (const change of entry.placements) {
+			const target = change[direction];
+			if (!target.owner) continue;
+			const list = insertions.get(target.owner);
+			if (list) list.push(change);
+			else insertions.set(target.owner, [change]);
+		}
+		for (const [parent, changes] of insertions) {
+			changes.sort((left, right) => left[direction].index - right[direction].index);
+			const list = children.get(parent);
+			for (const change of changes) list.splice(change[direction].index, 0, change.node);
+		}
+		return [...children].map(([owner, finalChildren]) => ({
+			owner,
+			children: finalChildren
+		}));
+	}
+	buildLineTreeChanges(entry, direction) {
+		return entry.lineTrees.map(({ owner, delta }) => ({
+			owner,
+			patch: { topology: applyLineTreeTopologyDelta(owner.topology, delta, direction) }
+		}));
+	}
+	replay(entry, direction, selection) {
+		const properties = this.buildPropertyChanges(entry, direction);
+		properties.push(...this.buildLineTreeChanges(entry, direction));
+		const structure = this.buildStructureChanges(entry, direction);
+		let configuredChanged = false;
+		const actualChange = this.selectionAdapter?.hasConfiguredChangeListener() ? {
+			recordPropertyChange: () => {
+				configuredChanged = true;
+			},
+			recordPlacementChange: () => {
+				configuredChanged = true;
+			}
+		} : void 0;
+		this.root.applyChangeBatch(properties, structure, actualChange);
+		for (const change of entry.changes) if (direction === "before") change.undo();
+		else change.redo();
+		const selected = [];
+		for (const key of selection) {
+			const element = this.root.getByKey(key);
+			if (element instanceof Element) selected.push(element);
+		}
+		this.selectionAdapter?.restoreSelection(selected);
+		this.root.frameRuntime.drain();
+		const affected = /* @__PURE__ */ new Set();
+		for (const change of entry.properties) affected.add(change.owner);
+		for (const change of entry.lineTrees) affected.add(change.owner);
+		for (const change of entry.placements) if (change.node instanceof Element) affected.add(change.node);
+		return {
+			affected: [...affected],
+			configuredChanged
+		};
+	}
+	/**
+	* 线性撤销栈顶 entry。当前调用返回前，不得同步重入本 manager 的
+	* undo、redo、clear 或 push；HistoryChange 只恢复自己拥有的数据。
+	*/
+	undo() {
+		this.selectionAdapter?.finishInteraction();
+		const entry = this.undoStack.at(-1);
+		if (!entry) return;
+		const result = this.replay(entry, "before", entry.selectionBefore);
+		this.undoStack.pop();
+		this.redoStack.push(entry);
+		this.selectionAdapter?.completeReplay("select:undo", result.affected, result.configuredChanged);
+	}
+	/**
+	* 线性重做栈顶 entry。当前调用返回前，不得同步重入本 manager 的
+	* undo、redo、clear 或 push；HistoryChange 只恢复自己拥有的数据。
+	*/
+	redo() {
+		this.selectionAdapter?.finishInteraction();
+		const entry = this.redoStack.at(-1);
+		if (!entry) return;
+		const result = this.replay(entry, "after", entry.selectionAfter);
+		this.redoStack.pop();
+		this.undoStack.push(entry);
+		this.selectionAdapter?.completeReplay("select:redo", result.affected, result.configuredChanged);
+	}
+};
+//#endregion
+//#region packages/tools/src/select/align.ts
+function resolveOffsets(rects, type) {
+	if (type === "justify-start") {
+		const target = Math.min(...rects.map(({ left }) => left));
+		rects.forEach((rect) => {
+			rect.dx = target - rect.left;
+		});
+		return;
+	}
+	if (type === "justify-center") {
+		const target = (Math.min(...rects.map((rect) => rect.left)) + Math.max(...rects.map((rect) => rect.left + rect.width))) / 2;
+		rects.forEach((rect) => {
+			rect.dx = target - (rect.left + rect.width / 2);
+		});
+		return;
+	}
+	if (type === "justify-end") {
+		const target = Math.max(...rects.map((rect) => rect.left + rect.width));
+		rects.forEach((rect) => {
+			rect.dx = target - (rect.left + rect.width);
+		});
+		return;
+	}
+	if (type === "justify-between") {
+		rects.sort((left, right) => left.left - right.left);
+		const start = rects[0].left;
+		const end = rects.at(-1);
+		const total = rects.reduce((sum, rect) => sum + rect.width, 0);
+		const gap = (end.left + end.width - start - total) / (rects.length - 1);
+		let x = start;
+		for (const rect of rects) {
+			rect.dx = x - rect.left;
+			x += rect.width + gap;
+		}
+		return;
+	}
+	if (type === "align-start") {
+		const target = Math.min(...rects.map(({ top }) => top));
+		rects.forEach((rect) => {
+			rect.dy = target - rect.top;
+		});
+		return;
+	}
+	if (type === "align-center") {
+		const target = (Math.min(...rects.map((rect) => rect.top)) + Math.max(...rects.map((rect) => rect.top + rect.height))) / 2;
+		rects.forEach((rect) => {
+			rect.dy = target - (rect.top + rect.height / 2);
+		});
+		return;
+	}
+	if (type === "align-end") {
+		const target = Math.max(...rects.map((rect) => rect.top + rect.height));
+		rects.forEach((rect) => {
+			rect.dy = target - (rect.top + rect.height);
+		});
+		return;
+	}
+	rects.sort((left, right) => left.top - right.top);
+	const start = rects[0].top;
+	const end = rects.at(-1);
+	const total = rects.reduce((sum, rect) => sum + rect.height, 0);
+	const gap = (end.top + end.height - start - total) / (rects.length - 1);
+	let y = start;
+	for (const rect of rects) {
+		rect.dy = y - rect.top;
+		y += rect.height + gap;
+	}
+}
+function alignElements(select, type) {
+	const controller = select.interactionController;
+	let elements = controller.selection;
+	if (elements.length < 2 || type.endsWith("between") && elements.length < 3) return;
+	controller.finishCurrentInteraction();
+	controller.root.frameRuntime.drain();
+	if (select.interactionController !== controller) return;
+	elements = controller.selection;
+	if (elements.length < 2 || type.endsWith("between") && elements.length < 3) return;
+	const rects = elements.map((element) => {
+		const bounds = element.transform.getWorldVisualBoundsView();
+		return {
+			element,
+			left: bounds.left,
+			top: bounds.top,
+			width: bounds.width,
+			height: bounds.height,
+			dx: 0,
+			dy: 0
+		};
+	});
+	resolveOffsets(rects, type);
+	const changes = [];
+	for (const rect of rects) {
+		if (rect.dx === 0 && rect.dy === 0) continue;
+		const capability = getEditorCapability(rect.element, TransformInteractionCapabilityToken);
+		if (!capability) continue;
+		const baseline = capability.captureTransformBaseline();
+		changes.push(capability.resolveTransformChange(baseline, { worldDelta: new DOMMatrix().translate(rect.dx, rect.dy) }));
+	}
+	if (changes.length === 0) return;
+	const scope = select.history.openScope(elements);
+	controller.applyCommand(changes, [], scope, elements);
+}
+//#endregion
+//#region packages/tools/src/select/arrange.ts
+/** Select 支持的跨 Layer 与 sibling 排列方向。 */
+var ArrangeType = /* @__PURE__ */ function(ArrangeType) {
+	ArrangeType["LayerUp"] = "layer-up";
+	ArrangeType["LayerDown"] = "layer-down";
+	ArrangeType["Forward"] = "forward";
+	ArrangeType["Backward"] = "backward";
+	ArrangeType["Top"] = "top";
+	ArrangeType["Bottom"] = "bottom";
+	return ArrangeType;
+}({});
+function sameSelection(left, right) {
+	return left.length === right.length && left.every((element, index) => element === right[index]);
+}
+function adjacentLayer(root, source, type) {
+	if (!source.elementArrangementEnabled) return;
+	const step = type === ArrangeType.LayerUp ? 1 : -1;
+	for (let index = root.layers.indexOf(source) + step; index >= 0 && index < root.layers.length; index += step) {
+		const candidate = root.layers[index];
+		if (candidate.elementArrangementEnabled) return candidate;
+	}
+}
+function canArrange(root, selection, type) {
+	if (type === ArrangeType.LayerUp || type === ArrangeType.LayerDown) return selection.some((element) => element.activeRoot === root && adjacentLayer(root, element.layer, type) !== void 0);
+	const siblingKey = type === ArrangeType.Forward || type === ArrangeType.Top ? "nextSibling" : "previousSibling";
+	const selected = new Set(selection);
+	return selection.some((element) => {
+		if (element.activeRoot !== root || !element.layer.elementArrangementEnabled) return false;
+		const sibling = element[siblingKey];
+		return sibling !== null && !selected.has(sibling);
+	});
+}
+function targetParentWorld(layer) {
+	return layer.transform.getChildWorldInverseMatrixView().inverse();
+}
+function buildLayerMoves(select, selection, type) {
+	const controller = select.interactionController;
+	const root = controller.root;
+	const targets = /* @__PURE__ */ new Map();
+	const targetWorlds = /* @__PURE__ */ new Map();
+	const moves = [];
+	const getTarget = (sourceLayer) => {
+		if (targets.has(sourceLayer)) return targets.get(sourceLayer);
+		const targetLayer = adjacentLayer(root, sourceLayer, type);
+		targets.set(sourceLayer, targetLayer);
+		return targetLayer;
+	};
+	for (const element of selection) {
+		const sourceParent = element.parent;
+		if (!sourceParent || element.activeRoot !== root) continue;
+		const sourceLayer = element.layer;
+		const targetLayer = getTarget(sourceLayer);
+		if (!targetLayer) continue;
+		const capability = getEditorCapability(element, TransformInteractionCapabilityToken);
+		if (!capability) continue;
+		let targetParentWorldMatrix = targetWorlds.get(targetLayer);
+		if (!targetParentWorldMatrix) {
+			targetParentWorldMatrix = targetParentWorld(targetLayer);
+			targetWorlds.set(targetLayer, targetParentWorldMatrix);
+		}
+		const intent = {
+			worldDelta: new DOMMatrix(),
+			targetParentWorldMatrix
+		};
+		moves.push({
+			element,
+			sourceParent,
+			sourceLayer,
+			targetLayer,
+			change: capability.resolveTransformChange(capability.captureTransformBaseline(), intent)
+		});
+	}
+	if (select.interactionController !== controller || !sameSelection(controller.selection, selection) || moves.some(({ element, sourceParent, sourceLayer, targetLayer }) => element.parent !== sourceParent || element.layer !== sourceLayer || adjacentLayer(root, sourceLayer, type) !== targetLayer)) return;
+	if (moves.length === 0) return;
+	const moving = new Set(moves.map(({ element }) => element));
+	const finalChildren = /* @__PURE__ */ new Map();
+	for (const { sourceParent, targetLayer } of moves) {
+		if (!finalChildren.has(sourceParent)) finalChildren.set(sourceParent, sourceParent.children.filter((child) => !moving.has(child)));
+		if (!finalChildren.has(targetLayer)) finalChildren.set(targetLayer, targetLayer.children.filter((child) => !moving.has(child)));
+	}
+	const byTarget = /* @__PURE__ */ new Map();
+	for (const { element, targetLayer } of moves) {
+		const elements = byTarget.get(targetLayer);
+		if (elements) elements.push(element);
+		else byTarget.set(targetLayer, [element]);
+	}
+	for (const [targetLayer, elements] of byTarget) {
+		elements.sort((left, right) => root.getPaintOrder(left) - root.getPaintOrder(right));
+		const children = finalChildren.get(targetLayer);
+		if (type === ArrangeType.LayerUp) children.unshift(...elements);
+		else children.push(...elements);
+	}
+	return {
+		changes: moves.map(({ change }) => change),
+		structure: [...finalChildren].map(([owner, children]) => ({
+			owner,
+			children
+		}))
+	};
+}
+function buildSiblingChanges(selection, type) {
+	const byParent = /* @__PURE__ */ new Map();
+	for (const element of selection) {
+		const parent = element.parent;
+		if (!parent || !element.layer.elementArrangementEnabled) continue;
+		const elements = byParent.get(parent);
+		if (elements) elements.add(element);
+		else byParent.set(parent, new Set([element]));
+	}
+	const structure = [];
+	for (const [owner, ownerSelection] of byParent) {
+		if (type === ArrangeType.Top || type === ArrangeType.Bottom) {
+			const selectedChildren = [];
+			const unselectedChildren = [];
+			for (const child of owner.children) if (ownerSelection.has(child)) selectedChildren.push(child);
+			else unselectedChildren.push(child);
+			const children = type === ArrangeType.Top ? [...unselectedChildren, ...selectedChildren] : [...selectedChildren, ...unselectedChildren];
+			if (children.some((child, index) => child !== owner.children[index])) structure.push({
+				owner,
+				children
+			});
+			continue;
+		}
+		const children = [...owner.children];
+		let changed = false;
+		if (type === ArrangeType.Forward) {
+			for (let index = children.length - 2; index >= 0; index--) if (ownerSelection.has(children[index]) && !ownerSelection.has(children[index + 1])) {
+				[children[index], children[index + 1]] = [children[index + 1], children[index]];
+				changed = true;
+			}
+		} else for (let index = 1; index < children.length; index++) if (ownerSelection.has(children[index]) && !ownerSelection.has(children[index - 1])) {
+			[children[index - 1], children[index]] = [children[index], children[index - 1]];
+			changed = true;
+		}
+		if (changed) structure.push({
+			owner,
+			children
+		});
+	}
+	return structure;
+}
+function arrangeElements(select, type) {
+	const controller = select.interactionController;
+	const root = controller.root;
+	if (!canArrange(root, controller.selection, type)) return;
+	controller.finishCurrentInteraction();
+	root.frameRuntime.drain();
+	if (select.interactionController !== controller) return;
+	const selection = controller.selection;
+	if (!canArrange(root, selection, type)) return;
+	const result = type === ArrangeType.LayerUp || type === ArrangeType.LayerDown ? buildLayerMoves(select, selection, type) : {
+		changes: [],
+		structure: buildSiblingChanges(selection, type)
+	};
+	if (!result || result.structure.length === 0) return;
+	const scope = select.history.openScope(selection);
+	controller.applyCommand(result.changes, result.structure, scope, selection);
+}
+//#endregion
+//#region packages/tools/src/select/clipboard.ts
+var PASTE_OFFSET = 20;
+var memoryClipboard = null;
+function collectSubtreeKeys(elements) {
+	const keys = /* @__PURE__ */ new Set();
+	const visit = (element) => {
+		keys.add(element.key);
+		for (const child of element.children) visit(child);
+	};
+	elements.forEach(visit);
+	return keys;
+}
+function materializeExternalRelations(source, json, includedKeys) {
+	const data = json;
+	if (source instanceof BaseLine) {
+		const path = data.path;
+		const relations = data.relations;
+		const vertices = source.getEffectiveLineVerticesView();
+		const materialize = (end, index, relation) => {
+			if (!relation || includedKeys.has(relation.target.elementKey)) return;
+			const point = vertices[index]?.point;
+			if (point) path.anchors[index].point = {
+				x: point.x,
+				y: point.y
+			};
+			if (relations) delete relations[end];
+		};
+		materialize("head", 0, source.headRelation);
+		materialize("tail", path.anchors.length - 1, source.tailRelation);
+		if (relations && relations.head === void 0 && relations.tail === void 0) delete data.relations;
+	} else if (source instanceof LineTree) {
+		const topology = data.topology;
+		source.topology.points.forEach((point, index) => {
+			if (!point.relation || includedKeys.has(point.relation.target.elementKey)) return;
+			const resolved = source.transform.getResolvedPoint(point.anchorId).point;
+			topology.points[index].point = {
+				x: resolved.x,
+				y: resolved.y
+			};
+			delete topology.points[index].relation;
+		});
+	}
+	json.children?.forEach((child, index) => {
+		materializeExternalRelations(source.children[index], child, includedKeys);
+	});
+	return json;
+}
+function snapshotElements(elements, includedKeys) {
+	return elements.map((element) => materializeExternalRelations(element, element.toJSON(), includedKeys));
+}
+function isCurrentSelection(select, controller, sources) {
+	const current = controller.selection;
+	if (select.interactionController !== controller || current.length !== sources.length) return false;
+	return sources.every((source, index) => current[index] === source);
+}
+function snapshotSelection(select, producer) {
+	const controller = select.interactionController;
+	const sources = [...controller.selection];
+	if (sources.length === 0) return;
+	const sourceKeys = collectSubtreeKeys(sources);
+	const data = {
+		elements: snapshotElements(sources, sourceKeys),
+		parentKeys: sources.map((source) => source.parent?.key ?? null)
+	};
+	if (producer) data.applicationData = producer({
+		sources,
+		sourceKeys
+	});
+	if (!isCurrentSelection(select, controller, sources)) return;
+	return data;
+}
+function writeSystemClipboard(data) {
+	try {
+		const text = JSON.stringify(data);
+		Promise.resolve(navigator.clipboard.writeText(text)).catch(() => {});
+	} catch {}
+}
+function copyElements(select, producer) {
+	const data = snapshotSelection(select, producer);
+	if (!data) return;
+	memoryClipboard = data;
+	writeSystemClipboard(data);
+}
+function removeKeys(data) {
+	delete data.key;
+	data.children?.forEach(removeKeys);
+}
+function offsetTopLevel(data) {
+	if (typeof data.left === "number") data.left += PASTE_OFFSET;
+	if (typeof data.top === "number") data.top += PASTE_OFFSET;
+}
+function mapClonedKeys(source, clone, keyMap) {
+	keyMap.set(source.key, clone.key);
+	(source.children ?? []).forEach((child, index) => {
+		mapClonedKeys(child, clone.children[index], keyMap);
+	});
+}
+function referenceChanges(elements, keyMap) {
+	const changes = [];
+	const visit = (element) => {
+		if (element instanceof BaseLine && (element.headRelation || element.tailRelation)) {
+			const remap = (relation) => {
+				if (!relation) return;
+				const target = relation.target;
+				const elementKey = keyMap.get(target.elementKey);
+				return elementKey === void 0 ? void 0 : {
+					...relation,
+					target: {
+						...target,
+						elementKey
+					}
+				};
+			};
+			changes.push({
+				owner: element,
+				patch: { relations: {
+					head: remap(element.headRelation),
+					tail: remap(element.tailRelation)
+				} }
+			});
+		}
+		if (element instanceof LineTree) {
+			const topology = remapLineTreeRelations(element.topology, keyMap);
+			if (topology !== element.topology) changes.push({
+				owner: element,
+				patch: { topology }
+			});
+		}
+		for (const child of element.children) visit(child);
+	};
+	elements.forEach(visit);
+	return changes;
+}
+function deserializeClones(entries, deserializers) {
+	const keyMap = /* @__PURE__ */ new Map();
+	const elements = entries.map((entry) => {
+		const json = structuredClone(entry);
+		removeKeys(json);
+		offsetTopLevel(json);
+		const element = deserializeElement$1(json, deserializers);
+		mapClonedKeys(entry, element, keyMap);
+		return element;
+	});
+	return {
+		elements,
+		keyMap,
+		referenceChanges: referenceChanges(elements, keyMap)
+	};
+}
+function appendStructure(placements) {
+	const children = /* @__PURE__ */ new Map();
+	for (const { parent } of placements) if (!children.has(parent)) children.set(parent, [...parent.children]);
+	for (const { element, parent } of placements) children.get(parent).push(element);
+	return [...children].map(([owner, finalChildren]) => ({
+		owner,
+		children: finalChildren
+	}));
+}
+function isCurrentPasteController(select, controller) {
+	return select.interactionController === controller;
+}
+function isCurrentParent(root, parent) {
+	return parent === root || parent.activeRoot === root && root.getByKey(parent.key) === parent;
+}
+function resolveSourceParent(root, parentKey) {
+	if (parentKey === null || parentKey === void 0) return void 0;
+	const parent = root.getByKey(parentKey);
+	return parent && isCurrentParent(root, parent) ? parent : void 0;
+}
+function firstLayer(root) {
+	return root.children.find((child) => child.isLayerNode());
+}
+function pasteData(select, controller, pasteSelection, task, data, deserializers, options) {
+	const { elements, keyMap, referenceChanges: changes } = deserializeClones(data.elements, deserializers);
+	if (!isCurrentPasteController(select, controller)) return;
+	let defaultLayer;
+	const placements = [];
+	for (const [index, element] of elements.entries()) {
+		if (element.isLayerNode()) {
+			placements.push({
+				element,
+				parent: controller.root
+			});
+			continue;
+		}
+		const sourceParent = resolveSourceParent(controller.root, data.parentKeys[index]);
+		let parent;
+		if (options?.resolveParent) {
+			parent = options.resolveParent(sourceParent);
+			if (!isCurrentPasteController(select, controller) || !isCurrentParent(controller.root, parent)) return;
+		} else {
+			parent = sourceParent;
+			if (!parent) {
+				defaultLayer ??= firstLayer(controller.root);
+				parent = defaultLayer;
+			}
+			if (!parent || !isCurrentParent(controller.root, parent)) return;
+		}
+		placements.push({
+			element,
+			parent
+		});
+	}
+	if (!isCurrentPasteController(select, controller)) return;
+	if (placements.some(({ parent }) => !isCurrentParent(controller.root, parent))) return;
+	const recordHistory = select.history.enabled;
+	const scope = controller.history.openScope(controller.selection);
+	const installSelection = () => controller.ownsPasteSelection(pasteSelection, task);
+	controller.applyCommand(changes, appendStructure(placements), scope, elements, options?.afterInstall ? {
+		beforeDrain: () => options.afterInstall({
+			applicationData: data.applicationData,
+			keyMap,
+			history: recordHistory ? scope : void 0
+		}),
+		installSelection
+	} : { installSelection });
+}
+function pasteMemory(select, controller, pasteSelection, task, deserializers, options) {
+	if (!memoryClipboard) return;
+	pasteData(select, controller, pasteSelection, task, memoryClipboard, deserializers, options);
+}
+function pasteElements(select, deserializers, options) {
+	const controller = select.interactionController;
+	const pasteSelection = controller.captureSelectionIdentity();
+	let task;
+	task = Promise.resolve().then(async () => {
+		try {
+			let text;
+			try {
+				text = await navigator.clipboard.readText();
+			} catch {
+				if (isCurrentPasteController(select, controller)) pasteMemory(select, controller, pasteSelection, task, deserializers, options);
+				return;
+			}
+			if (!isCurrentPasteController(select, controller)) return;
+			const data = JSON.parse(text);
+			pasteData(select, controller, pasteSelection, task, data, deserializers, options);
+		} finally {
+			controller.finishPaste(task);
+		}
+	});
+	controller.beginPaste(task);
+	return task;
+}
+//#endregion
+//#region packages/tools/src/select/delete.ts
+function deleteElements(select, afterInstall) {
+	const controller = select.interactionController;
+	if (controller.deletePointTarget()) return;
+	if (controller.selection.length === 0) return;
+	if (controller.state.kind === "select" && controller.state.interaction.kind === "content") controller.finishContentEditing(true);
+	else controller.finishCurrentInteraction();
+	if (select.interactionController !== controller) return;
+	const selected = [...controller.selection];
+	if (selected.length === 0) return;
+	const roots = [...selected];
+	const covered = /* @__PURE__ */ new Set();
+	const subjects = [];
+	const cover = (element) => {
+		if (covered.has(element)) return;
+		covered.add(element);
+		subjects.push(element);
+		for (const child of element.children) if (child instanceof Element) cover(child);
+	};
+	roots.forEach(cover);
+	const relationIndex = getEndpointRelationIndex(controller.root);
+	for (let index = 0; index < subjects.length; index++) for (const source of relationIndex.relationsTargetingElement(subjects[index].key)) {
+		const dependency = controller.root.getByKey(source.elementKey);
+		if (!(dependency instanceof Element)) continue;
+		if (covered.has(dependency)) continue;
+		roots.push(dependency);
+		cover(dependency);
+	}
+	const rootSet = new Set(roots);
+	const parents = new Set(roots.map((element) => element.parent).filter(Boolean));
+	const structure = [];
+	for (const parent of parents) structure.push({
+		owner: parent,
+		children: parent.children.filter((child) => !rootSet.has(child))
+	});
+	if (structure.length === 0) return;
+	const recordsHistory = select.history.enabled;
+	const scope = select.history.openScope(selected);
+	controller.applyCommand([], structure, scope, [], {
+		beforeDrain: afterInstall ? () => afterInstall({
+			elements: subjects,
+			history: recordsHistory ? scope : void 0
+		}) : void 0,
+		afterHistory: () => controller.root.checkHit()
+	});
+}
+//#endregion
+//#region packages/tools/src/select/grouping.ts
+function isCurrentController(select, controller) {
+	return select.interactionController === controller;
+}
+function compareSceneOrder(root, left, right) {
+	const leftOrder = root.getPaintOrderKey(left);
+	const rightOrder = root.getPaintOrderKey(right);
+	return leftOrder.layer - rightOrder.layer || leftOrder.element - rightOrder.element;
+}
+function hasSelectedAncestor(element, selected) {
+	for (let parent = element.parent; parent; parent = parent.parent) if (parent instanceof Element && selected.has(parent)) return true;
+	return false;
+}
+function parentWorld(parent) {
+	return parent instanceof Element ? parent.transform.getChildWorldInverseMatrixView().inverse() : new DOMMatrix();
+}
+function captureChangesForParent(elements, targetParentWorldMatrix) {
+	const changes = [];
+	const intent = {
+		worldDelta: new DOMMatrix(),
+		targetParentWorldMatrix
+	};
+	for (const element of elements) {
+		const capability = getEditorCapability(element, TransformInteractionCapabilityToken);
+		const baseline = capability.captureTransformBaseline();
+		changes.push(capability.resolveTransformChange(baseline, intent));
+	}
+	return changes;
+}
+function doGroup(select) {
+	const controller = select.interactionController;
+	if (controller.selection.length <= 1) return null;
+	controller.finishCurrentInteraction();
+	controller.root.frameRuntime.drain();
+	if (!isCurrentController(select, controller)) return null;
+	const selection = controller.selection;
+	if (selection.length <= 1) return null;
+	const selectedElements = new Set(selection);
+	const children = selection.filter((element) => !hasSelectedAncestor(element, selectedElements)).sort((left, right) => compareSceneOrder(controller.root, left, right));
+	if (children.length <= 1) return null;
+	const parent = children[0].parent;
+	if (!parent) return null;
+	const bounds = makeBoundingBoxFromRects(children.map((element) => element.transform.getContentBounds()));
+	const targetWorld = new DOMMatrix().translate(bounds.left, bounds.top);
+	const resolution = resolveReferenceTransform({
+		writeMode: "pose-authored",
+		startWorldMatrix: new DOMMatrix(),
+		startParentWorldMatrix: new DOMMatrix(),
+		startParentWorldInverseMatrix: new DOMMatrix(),
+		referenceBounds: {
+			left: 0,
+			top: 0,
+			width: bounds.width,
+			height: bounds.height
+		},
+		frame: {
+			left: 0,
+			top: 0,
+			width: bounds.width,
+			height: bounds.height,
+			angle: 0,
+			scaleX: 1,
+			scaleY: 1,
+			skewX: 0,
+			skewY: 0,
+			originX: 0,
+			originY: 0
+		}
+	}, {
+		worldDelta: targetWorld,
+		targetParentWorldMatrix: parentWorld(parent)
+	});
+	const group = new Group({
+		width: bounds.width,
+		height: bounds.height,
+		originX: 0,
+		originY: 0,
+		...resolution.framePatch
+	});
+	const selected = new Set(children);
+	const finalChildren = /* @__PURE__ */ new Map();
+	const affectedParents = new Set(children.map((element) => element.parent));
+	affectedParents.add(parent);
+	for (const owner of affectedParents) finalChildren.set(owner, owner.children.filter((child) => !selected.has(child)));
+	const target = finalChildren.get(parent);
+	const originalIndices = children.filter((element) => element.parent === parent).map((element) => parent.children.indexOf(element));
+	const insertionIndex = Math.min(...originalIndices);
+	target.splice(insertionIndex, 0, group);
+	const structure = [...[...finalChildren].map(([owner, ownerChildren]) => ({
+		owner,
+		children: ownerChildren
+	})), {
+		owner: group,
+		children
+	}];
+	const changes = captureChangesForParent(children, targetWorld);
+	const scope = select.history.openScope(selection);
+	controller.applyCommand(changes, structure, scope, [group]);
+	return group;
+}
+function unGroup(select) {
+	const controller = select.interactionController;
+	const candidate = controller.selection;
+	if (candidate.length !== 1 || !(candidate[0] instanceof Group)) return null;
+	controller.finishCurrentInteraction();
+	controller.root.frameRuntime.drain();
+	if (!isCurrentController(select, controller)) return null;
+	const selection = controller.selection;
+	if (selection.length !== 1) return null;
+	const group = selection[0];
+	if (!(group instanceof Group)) return null;
+	const parent = group.parent;
+	if (!parent) return null;
+	const children = [...group.children];
+	const changes = captureChangesForParent(children, parentWorld(parent));
+	const parentChildren = [...parent.children];
+	const index = parentChildren.indexOf(group);
+	parentChildren.splice(index, 1, ...children);
+	const structure = [{
+		owner: parent,
+		children: parentChildren
+	}, {
+		owner: group,
+		children: []
+	}];
+	const scope = select.history.openScope(selection);
+	controller.applyCommand(changes, structure, scope, children);
+	return children;
+}
+//#endregion
+//#region packages/tools/src/select/paint.ts
+var CONTROL_FILL = "#FFFFFF";
+var PIVOT_STROKE = "#4B5563";
+var SNAP_CANDIDATE = "#FF6B6B";
+function traceOutline(ctx, points, closed = true) {
+	if (points.length === 0) return;
+	ctx.beginPath();
+	ctx.moveTo(points[0].x, points[0].y);
+	for (let index = 1; index < points.length; index++) ctx.lineTo(points[index].x, points[index].y);
+	if (closed) ctx.closePath();
+}
+function paintRotationPivotSnapMarker(ctx, marker, angle, scale) {
+	const half = 5 / scale;
+	const cornerInset = 3.5 / scale;
+	const reach = 12 / scale;
+	ctx.save();
+	ctx.translate(marker.x, marker.y);
+	ctx.rotate(angle * Math.PI / 180);
+	ctx.beginPath();
+	if (marker.horizontal === "center" && marker.vertical === "center") {
+		ctx.moveTo(-half, 0);
+		ctx.lineTo(half, 0);
+		ctx.moveTo(0, -half);
+		ctx.lineTo(0, half);
+	} else if (marker.horizontal === "center") {
+		const direction = marker.vertical === "top" ? 1 : -1;
+		ctx.moveTo(0, 0);
+		ctx.lineTo(0, direction * reach);
+	} else if (marker.vertical === "center") {
+		const direction = marker.horizontal === "left" ? 1 : -1;
+		ctx.moveTo(0, 0);
+		ctx.lineTo(direction * reach, 0);
+	} else {
+		const x = marker.horizontal === "left" ? 1 : -1;
+		const y = marker.vertical === "top" ? 1 : -1;
+		const wing = 5 / scale;
+		ctx.moveTo(x * reach, y * reach);
+		ctx.lineTo(x * cornerInset, y * cornerInset);
+		ctx.moveTo(x * cornerInset, y * cornerInset);
+		ctx.lineTo(x * (cornerInset + wing), y * cornerInset);
+		ctx.moveTo(x * cornerInset, y * cornerInset);
+		ctx.lineTo(x * cornerInset, y * (cornerInset + wing));
+	}
+	ctx.stroke();
+	ctx.restore();
+}
+function paintControl(ctx, control, frameAngle, size, scale, selectionColor) {
+	const isPivot = control.target.kind === "pivot";
+	ctx.save();
+	ctx.translate(control.world.x, control.world.y);
+	ctx.fillStyle = control.shape === "diamond" || control.shape === "rect" || control.shape === "handle" || isPivot ? CONTROL_FILL : selectionColor;
+	ctx.strokeStyle = isPivot ? PIVOT_STROKE : selectionColor;
+	ctx.lineWidth = 1.5 / scale;
+	ctx.beginPath();
+	if (control.shape === "rect") {
+		if (frameAngle !== void 0) ctx.rotate(frameAngle * Math.PI / 180);
+		ctx.roundRect(-size / 2, -size / 2, size, size, 1 / scale);
+	} else if (control.shape === "diamond") {
+		ctx.rotate(Math.PI / 4);
+		ctx.rect(-size / 2, -size / 2, size, size);
+	} else ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+	ctx.fill();
+	if (control.shape === "diamond" || control.shape === "rect" || control.shape === "handle" || isPivot) ctx.stroke();
+	if (control.active) {
+		ctx.beginPath();
+		ctx.arc(0, 0, size * .72, 0, Math.PI * 2);
+		ctx.stroke();
+	}
+	if (isPivot) {
+		const radius = size / 3;
+		ctx.beginPath();
+		ctx.moveTo(-radius, 0);
+		ctx.lineTo(radius, 0);
+		ctx.moveTo(0, -radius);
+		ctx.lineTo(0, radius);
+		ctx.stroke();
+	}
+	ctx.restore();
+}
+function paintInfoPanel(ctx, frame, viewport) {
+	const first = frame.outline[0];
+	let minX = first.x * viewport.scale + viewport.x;
+	let maxX = minX;
+	let maxY = first.y * viewport.scale + viewport.y;
+	for (let index = 1; index < frame.outline.length; index++) {
+		const point = frame.outline[index];
+		const x = point.x * viewport.scale + viewport.x;
+		const y = point.y * viewport.scale + viewport.y;
+		if (x < minX) minX = x;
+		if (x > maxX) maxX = x;
+		if (y > maxY) maxY = y;
+	}
+	const text = `x: ${Math.round(frame.left)}  y: ${Math.round(frame.top)}  ${Math.round(frame.angle)}°`;
+	const centerX = (minX + maxX) / 2;
+	ctx.save();
+	ctx.setTransform(viewport.dpr, 0, 0, viewport.dpr, 0, 0);
+	ctx.font = "12px Arial";
+	const width = ctx.measureText(text).width + 12;
+	const left = centerX - width / 2;
+	const top = maxY + 8;
+	ctx.fillStyle = "rgba(0,0,0,0.75)";
+	ctx.beginPath();
+	ctx.roundRect(left, top, width, 22, 4);
+	ctx.fill();
+	ctx.fillStyle = "#fff";
+	ctx.fillText(text, left + 6, top + 15);
+	ctx.restore();
+}
+/** paint 与 hit 直接读取 controller 当前同一 projection object。 */
+function paintSelect(select, controller) {
+	const projection = controller.projection;
+	const ctx = select.layer.ctx;
+	const viewport = select.root.viewport;
+	const scale = viewport.scale;
+	const selectionColor = select.root.skin.selection;
+	ctx.save();
+	ctx.setTransform(scale * viewport.dpr, 0, 0, scale * viewport.dpr, viewport.x * viewport.dpr, viewport.y * viewport.dpr);
+	const hover = controller.contentHover;
+	if (hover && !controller.selection.includes(hover)) hover.paintHover(ctx, scale);
+	for (const { element } of projection.selectedOutlineOwners) element.paintHover(ctx, scale);
+	if (projection.pointScopeOutline) {
+		ctx.strokeStyle = selectionColor;
+		ctx.lineWidth = 1 / scale;
+		traceOutline(ctx, projection.pointScopeOutline, false);
+		ctx.stroke();
+	}
+	ctx.strokeStyle = selectionColor;
+	ctx.lineWidth = 1 / scale;
+	if (projection.frame && projection.frameVisible) {
+		traceOutline(ctx, projection.frame.outline);
+		ctx.stroke();
+	}
+	for (const control of projection.controls) {
+		if (!control.guideFrom) continue;
+		ctx.beginPath();
+		ctx.moveTo(control.guideFrom.x, control.guideFrom.y);
+		ctx.lineTo(control.world.x, control.world.y);
+		ctx.stroke();
+	}
+	const size = select.controlSize / scale;
+	const frame = projection.frame;
+	let pivotControl;
+	for (const control of projection.controls) {
+		if (!control.shape) continue;
+		if (control.target.kind === "pivot") {
+			pivotControl = control;
+			continue;
+		}
+		paintControl(ctx, control, frame?.angle, size, scale, selectionColor);
+	}
+	if (pivotControl) paintControl(ctx, pivotControl, frame?.angle, size, scale, selectionColor);
+	if (frame && projection.rotationPivotSnapMarkers.length > 0) {
+		ctx.strokeStyle = SNAP_CANDIDATE;
+		ctx.lineWidth = 1 / scale;
+		for (const marker of projection.rotationPivotSnapMarkers) paintRotationPivotSnapMarker(ctx, marker, frame.angle, scale);
+	}
+	if (projection.marquee) {
+		const { left, top, width, height } = projection.marquee;
+		ctx.fillStyle = selectionColor;
+		ctx.strokeStyle = selectionColor;
+		ctx.lineWidth = 1 / scale;
+		ctx.save();
+		ctx.globalAlpha *= .12;
+		ctx.fillRect(left, top, width, height);
+		ctx.restore();
+		ctx.strokeRect(left, top, width, height);
+	}
+	if (frame && projection.frameVisible) paintInfoPanel(ctx, frame, viewport);
+	ctx.restore();
+}
+//#endregion
+//#region packages/tools/src/editor/overlay-transform.ts
+/** Tools 画布 overlay surface 始终参与 Layer paint，但从不成为内容命中目标。 */
+var ToolOverlayTransform = class extends ElementTransform {
+	hasPointHint() {
+		return false;
+	}
+	hasInView() {
+		return true;
+	}
+};
+//#endregion
+//#region packages/tools/src/select/index.ts
+/**
+* 轻量 Editor command/paint surface；交互状态由唯一 controller 拥有。
+*
+* `select:end` 在一次显式选择、交互选择、selection-producing command
+* 或 History replay 的内部工作和 selection projection 完成后异步通知。
+* `select:update` 仅在存在直接监听器时，于选中内容的几何、投影和绘制
+* 在当前 Root frame 内稳定后同步派发；同一显示帧的连续变化合并为一次通知。
+* `select:configured-change` 在一次 Select/History 语义操作产生最终 configured
+* 属性或结构净变化时异步通知一次；适用的 History entry/stack 已先安装。事件不携带
+* payload，普通 noop 与纯 runtime override 不派发；`select:end` 不承担持久化。
+* 每次显式 `select()` 都是一次独立操作，包括重复传入同一 selection。全部 Select
+* `end/configured-change/undo/redo` 通知只供外部读取派发时的 live state，不参与、阻止或使已完成的同步操作失败。
+*/
+var Select = class extends Element {
+	controlSize = 6;
+	hitPadding = 6;
+	snapAngle = 45;
+	snapThreshold = 5;
+	history;
+	connectionGesture;
+	snapTool;
+	lineTool;
+	controller;
+	keyboardCommands;
+	clipboardDeserializers = /* @__PURE__ */ new Map();
+	constructor(options = {}) {
+		const { connectionGesture = "auto", snap, lineTool, ...baseOptions } = options;
+		const elementOptions = {
+			width: 0,
+			height: 0,
+			selectable: false,
+			pickable: false,
+			...baseOptions
+		};
+		super(elementOptions, new ElementProperties(elementOptions), ToolOverlayTransform);
+		this.connectionGesture = connectionGesture;
+		this.snapTool = snap;
+		this.lineTool = lineTool;
+	}
+	get selectedElements() {
+		return this.controller?.selection ?? [];
+	}
+	get editorState() {
+		return this.controller?.state;
+	}
+	/** @internal command modules使用同一 controller/batch/History owner。 */
+	get interactionController() {
+		return this.controller;
+	}
+	/** 以一次独立操作选择给定元素，并在完成后异步通知 `select:end`。 */
+	select(elements) {
+		this.controller?.setSelection(elements);
+	}
+	/**
+	* Groups the live multi-selection. Accepted active Transform work finishes
+	* before the independent Group command; stale pointer continuation is ignored.
+	* An obvious insufficient-selection noop does not drain the frame runtime.
+	*/
+	doGroup() {
+		return doGroup(this);
+	}
+	/**
+	* Ungroups the live single Group selection. Accepted active Transform work
+	* finishes before the independent command; stale pointer continuation is ignored.
+	* An obvious non-Group noop does not drain the frame runtime.
+	*/
+	unGroup() {
+		return unGroup(this);
+	}
+	align(type) {
+		return alignElements(this, type);
+	}
+	/** 按当前 Layer 与 sibling 顺序排列 live selection。 */
+	arrange(type) {
+		return arrangeElements(this, type);
+	}
+	/**
+	* 把一次 authored 顶层属性 intent 应用到全部 live selected elements。
+	* 省略字段保持不变，`undefined` 恢复默认值，`null` 是普通领域值；
+	* 对象和数组不 deep merge/patch；Tools 将同一份 patch 引用直接交给全部
+	* selected owners。调用者需要独立副本时应在交付前复制；标量相同值仍是 noop。
+	* Tools 不过滤元素是否支持字段。
+	* 空 selection 不结束其他交互；非空 selection 先完成已接受交互，再以
+	* 一个 batch 和最多一条 History 提交。本命令不改变 selection，也不派发
+	* `select:end`；最终 configured 净变化异步通知一次 `select:configured-change`。
+	* geometry impact 可触发 `select:update`，纯 paint 不触发该几何事件。
+	* 世界有效尺寸与位置仍使用 resize/Transform 命令。
+	*/
+	setProperties(patch) {
+		this.controller?.setProperties(patch);
+	}
+	/**
+	* Resizes the live selection to world visual/frame dimensions in one
+	* semantic command. Omitted axes keep their current size; `top-left` is the
+	* default fixed anchor. Parent and nested Group transforms are resolved
+	* internally.
+	*/
+	resize(options = {}) {
+		this.controller?.resize(options);
+	}
+	/** 围绕当前 selection frame 中心沿 frame 自身轴镜像。 */
+	flip(direction) {
+		this.controller?.flip(direction);
+	}
+	/** 删除当前 selection，并在 Canvas 删除安装后、drain/finish 前交付一次应用接缝。 */
+	delete(afterInstall) {
+		return deleteElements(this, afterInstall);
+	}
+	/**
+	* 复制 live selection 到 Clipboard v2；producer 最多同步执行一次，不改 Canvas、selection 或 History。
+	*/
+	copy(producer) {
+		return copyElements(this, producer);
+	}
+	/** 从 system Clipboard 或同一 memory payload 粘贴，并在安装后交付可选应用接缝。 */
+	paste(options) {
+		return pasteElements(this, this.clipboardDeserializers, options);
+	}
+	/** 绑定当前唯一应用键盘命令 owner；cleanup 只清除仍属于本次绑定的引用。 */
+	bindKeyboardCommands(commands) {
+		this.keyboardCommands = commands;
+		return () => {
+			if (this.keyboardCommands === commands) this.keyboardCommands = void 0;
+		};
+	}
+	/** @internal Controller 读取当前唯一键盘 command owner。 */
+	get keyboardCommandOwner() {
+		return this.keyboardCommands;
+	}
+	useClipboard(...plugins) {
+		for (const plugin of plugins) {
+			const type = plugin.type.startsWith("f-") ? plugin.type.slice(2) : plugin.type;
+			this.clipboardDeserializers.set(type, plugin.deserialize);
+		}
+		return this;
+	}
+	onActivate(root, layer) {
+		super.onActivate(root, layer);
+		if (!root) return;
+		this.history ??= new HistoryManager(root);
+		this.controller = new EditorInteractionController(this, root, this.history);
+	}
+	onDeactivate(root, layer) {
+		this.controller?.destroy();
+		this.controller = void 0;
+		super.onDeactivate(root, layer);
+	}
+	paint() {
+		if (this.controller) paintSelect(this, this.controller);
+	}
+};
+//#endregion
+//#region packages/tools/src/select/port-index.ts
+/** Tools 唯一按 Root spatial phase 增量更新的 committed Port projection。 */
+var PortIndex = class {
+	tree = new RBush();
+	itemsByOwner = /* @__PURE__ */ new Map();
+	dirtyOwners = /* @__PURE__ */ new Set();
+	ownerObservationCleanups = /* @__PURE__ */ new Map();
+	cleanups = [];
+	frameFlush;
+	lastCandidateCount = 0;
+	projectionFlushCount = 0;
+	constructor(root) {
+		this.root = root;
+		this.frameFlush = getEditorFrameFlush(root);
+		this.frameFlush.setSpatialClient(this);
+		for (const node of root.sceneRegistry.keyElements.values()) if (node instanceof Element) this.refreshOwner(node);
+		this.cleanups.push(root.sceneRegistry.observeNodeRegistrations((node, registered) => {
+			if (!(node instanceof Element)) return;
+			if (registered) this.refreshOwner(node);
+			else this.unregisterOwner(node);
+		}), root.sceneRegistry.observeSceneChanges((node, affected) => {
+			if (node === void 0 && affected === void 0) {
+				for (const candidate of root.sceneRegistry.keyElements.values()) if (candidate instanceof Element) this.refreshOwner(candidate);
+				return;
+			}
+			if (node instanceof Element) this.refreshOwner(node);
+			for (const candidate of affected ?? []) if (candidate instanceof Element) this.refreshOwner(candidate);
+		}));
+	}
+	hasDeclaredPorts(owner) {
+		return owner.ports === true || owner.ports !== false && owner.ports.length > 0;
+	}
+	refreshOwner(owner) {
+		if (this.root.enablePorts && owner.activeRoot === this.root && !owner.isLayerNode() && this.hasDeclaredPorts(owner)) {
+			this.registerOwner(owner);
+			this.markOwnerDirty(owner);
+		} else this.unregisterOwner(owner);
+	}
+	registerOwner(owner) {
+		if (this.ownerObservationCleanups.has(owner)) return;
+		const removeTransform = owner.transform.observeTransformCommit(() => this.markOwnerDirty(owner));
+		this.ownerObservationCleanups.set(owner, removeTransform);
+	}
+	unregisterOwner(owner) {
+		const cleanup = this.ownerObservationCleanups.get(owner);
+		if (!cleanup) return;
+		cleanup();
+		this.ownerObservationCleanups.delete(owner);
+		this.markOwnerDirty(owner);
+	}
+	markOwnerDirty(owner) {
+		if (this.dirtyOwners.has(owner)) return;
+		this.dirtyOwners.add(owner);
+		this.root.frameRuntime.requestFrame();
+	}
+	hasPendingSpatialWork() {
+		return this.dirtyOwners.size > 0;
+	}
+	flushSpatialProjection() {
+		if (this.dirtyOwners.size === 0) return;
+		const owners = [...this.dirtyOwners];
+		this.dirtyOwners.clear();
+		this.projectionFlushCount++;
+		for (const owner of owners) this.replaceOwnerProjection(owner);
+	}
+	replaceOwnerProjection(owner) {
+		const previous = this.itemsByOwner.get(owner);
+		if (previous) {
+			this.itemsByOwner.delete(owner);
+			for (const item of previous) this.tree.remove(item);
+		}
+		if (owner.activeRoot !== this.root || !this.ownerObservationCleanups.has(owner) || !this.root.enablePorts || owner.isLayerNode() || !owner.visible || owner.silent || owner.pickable === false) return;
+		if (!this.root.getPaintOrderKey(owner)) return;
+		const matrix = owner.transform.getWorldMatrixView();
+		const items = owner.getConnectionPorts().map((port) => {
+			const worldPosition = projectConnectionPortPoint(matrix, port.localPosition);
+			return {
+				ref: port.ref,
+				kind: "endpoint-binding",
+				worldPosition,
+				definition: port.definition,
+				owner,
+				minX: worldPosition.x,
+				minY: worldPosition.y,
+				maxX: worldPosition.x,
+				maxY: worldPosition.y
+			};
+		});
+		if (items.length === 0) return;
+		this.itemsByOwner.set(owner, items);
+		this.tree.load(items);
+	}
+	query(point, radius) {
+		const candidates = this.tree.search({
+			minX: point.x - radius,
+			minY: point.y - radius,
+			maxX: point.x + radius,
+			maxY: point.y + radius
+		});
+		this.lastCandidateCount = candidates.length;
+		const radiusSquared = radius * radius;
+		return candidates.filter(({ worldPosition }) => {
+			const dx = worldPosition.x - point.x;
+			const dy = worldPosition.y - point.y;
+			return dx * dx + dy * dy < radiusSquared;
+		});
+	}
+	portsForOwners(owners) {
+		const ports = [];
+		for (const owner of owners) {
+			const items = this.itemsByOwner.get(owner);
+			if (items) ports.push(...items);
+		}
+		return ports;
+	}
+	/** @internal 性能结构门禁。 */
+	get debugStats() {
+		return {
+			indexedPorts: this.tree.all().length,
+			observedOwners: this.ownerObservationCleanups.size,
+			pendingOwners: this.dirtyOwners.size,
+			lastQueryCandidates: this.lastCandidateCount,
+			projectionFlushes: this.projectionFlushCount
+		};
+	}
+	dispose() {
+		this.frameFlush.setSpatialClient(null);
+		for (const cleanup of this.cleanups) cleanup();
+		for (const cleanup of this.ownerObservationCleanups.values()) cleanup();
+		this.ownerObservationCleanups.clear();
+		this.dirtyOwners.clear();
+		this.itemsByOwner.clear();
+		this.tree.clear();
+	}
+};
+//#endregion
+//#region packages/tools/src/select/snap.ts
+var NO_PORT_SNAP = {
+	snap: null,
+	state: null
+};
+var PortSnapTarget = class {
+	state = null;
+	#element;
+	#portId;
+	#definition;
+	constructor(x, y, element, portId, definition) {
+		this.x = x;
+		this.y = y;
+		this.#element = element;
+		this.#portId = portId;
+		this.#definition = definition;
+	}
+	get element() {
+		return this.#element;
+	}
+	get portId() {
+		return this.#portId;
+	}
+	get definition() {
+		return this.#definition;
+	}
+};
+var AXIS_EPSILON = .5;
+var MATCH_EPSILON = 1e-4;
+var EMPTY_ELEMENTS = [];
+function isAxisAlignedRect(pts) {
+	return pts.length === 4 && Math.abs(pts[0].x - pts[3].x) < .01 && Math.abs(pts[1].x - pts[2].x) < .01 && Math.abs(pts[0].y - pts[1].y) < .01 && Math.abs(pts[3].y - pts[2].y) < .01;
+}
+function addEdgeMidpoints(pts) {
+	const result = [...pts];
+	if (pts.length === 4) {
+		const [p0, p1, p2, p3] = pts;
+		result.push({
+			x: (p0.x + p1.x) / 2,
+			y: (p0.y + p1.y) / 2
+		}, {
+			x: (p1.x + p2.x) / 2,
+			y: (p1.y + p2.y) / 2
+		}, {
+			x: (p2.x + p3.x) / 2,
+			y: (p2.y + p3.y) / 2
+		}, {
+			x: (p3.x + p0.x) / 2,
+			y: (p3.y + p0.y) / 2
+		});
+	}
+	return result;
+}
+function groupAxis(points, valueOf, rangeOf) {
+	const segments = [];
+	for (const point of points) {
+		const value = valueOf(point);
+		const range = rangeOf(point);
+		const segment = segments.find((candidate) => Math.abs(candidate.value - value) < AXIS_EPSILON);
+		if (segment) {
+			segment.min = Math.min(segment.min, range);
+			segment.max = Math.max(segment.max, range);
+		} else segments.push({
+			value,
+			min: range,
+			max: range
+		});
+	}
+	return segments;
+}
+function createSnapAxes(snapPoints) {
+	if (isAxisAlignedRect(snapPoints)) {
+		const { minX, minY, maxX, maxY } = Bound.fromPoints(snapPoints);
+		return {
+			vertical: [
+				{
+					value: minX,
+					min: minY,
+					max: maxY
+				},
+				{
+					value: (minX + maxX) / 2,
+					min: minY,
+					max: maxY
+				},
+				{
+					value: maxX,
+					min: minY,
+					max: maxY
+				}
+			],
+			horizontal: [
+				{
+					value: minY,
+					min: minX,
+					max: maxX
+				},
+				{
+					value: (minY + maxY) / 2,
+					min: minX,
+					max: maxX
+				},
+				{
+					value: maxY,
+					min: minX,
+					max: maxX
+				}
+			]
+		};
+	}
+	const points = addEdgeMidpoints(snapPoints);
+	return {
+		vertical: groupAxis(points, (point) => point.x, (point) => point.y),
+		horizontal: groupAxis(points, (point) => point.y, (point) => point.x)
+	};
+}
+function translateAxis(segments, valueDelta, rangeDelta) {
+	return segments.map(({ value, min, max }) => ({
+		value: value + valueDelta,
+		min: min + rangeDelta,
+		max: max + rangeDelta
+	}));
+}
+function findClosest(moving, targets, threshold) {
+	let minDiff = Infinity;
+	let best = null;
+	for (const target of targets) for (const candidate of moving) {
+		const diff = target.value - candidate.value;
+		const absDiff = Math.abs(diff);
+		if (absDiff >= threshold) continue;
+		if (absDiff < minDiff - MATCH_EPSILON) {
+			minDiff = absDiff;
+			best = {
+				diff,
+				targetVal: target.value,
+				movingRange: {
+					min: candidate.min,
+					max: candidate.max
+				},
+				segments: [{
+					min: target.min,
+					max: target.max
+				}]
+			};
+		} else if (absDiff <= minDiff + MATCH_EPSILON && best && Math.abs(best.targetVal - target.value) < MATCH_EPSILON && !best.segments.some((range) => range.min === target.min && range.max === target.max)) best.segments.push({
+			min: target.min,
+			max: target.max
+		});
+	}
+	return best;
+}
+function buildAxisSnapLines(best, movingRange, type, scale) {
+	const val = best.targetVal;
+	const isVert = type === "vertical";
+	const hasRoom = (dist) => dist * scale >= `${Math.round(dist)}`.length * 7 + 10;
+	const allRanges = [{
+		...movingRange,
+		isMoving: true
+	}];
+	for (const seg of best.segments) allRanges.push({
+		min: seg.min,
+		max: seg.max ?? seg.min,
+		isMoving: false
+	});
+	allRanges.sort((a, b) => a.min - b.min);
+	const movingIdx = allRanges.findIndex((r) => r.isMoving);
+	const mkPt = (along) => isVert ? {
+		x: val,
+		y: along
+	} : {
+		x: along,
+		y: val
+	};
+	const mkTextPos = (mid) => isVert ? {
+		x: val + 5,
+		y: mid
+	} : {
+		x: mid,
+		y: val - 5
+	};
+	const mkLine = (start, end, neighbor) => {
+		const dist = end - start;
+		const show = neighbor && hasRoom(dist);
+		return {
+			type,
+			value: val,
+			start,
+			end,
+			points: neighbor ? [mkPt(start), mkPt(end)] : [],
+			distanceText: show ? `${Math.round(dist)}` : void 0,
+			textPos: show ? mkTextPos((start + end) / 2) : void 0
+		};
+	};
+	const lines = [];
+	for (let idx = 0; idx < allRanges.length; idx++) {
+		const range = allRanges[idx];
+		if (range.isMoving) continue;
+		if (range.max - range.min > 1) lines.push(mkLine(range.min, range.max, idx === movingIdx - 1 || idx === movingIdx + 1));
+	}
+	let maxReach = allRanges[0].max;
+	for (let i = 1; i < allRanges.length; i++) {
+		const next = allRanges[i];
+		if (next.min > maxReach && next.min - maxReach > 0) lines.push(mkLine(maxReach, next.min, i - 1 === movingIdx || i === movingIdx));
+		maxReach = Math.max(maxReach, next.max);
+	}
+	return lines;
+}
+var Snap = class extends Element {
+	type = "snap";
+	threshold = 5;
+	lineColor = "#ff00cc";
+	lineWidth = 1;
+	dashPattern = [4, 4];
+	isSnapping = false;
+	snapLines = [];
+	snapCandidates = [];
+	axisElementExcludes = /* @__PURE__ */ new Set();
+	axisPointExcludes = /* @__PURE__ */ new Map();
+	axisTargets = null;
+	portIndex = null;
+	showViewportPorts = false;
+	viewportPortTargets = /* @__PURE__ */ new Map();
+	activePortHighlight = null;
+	portProbe = null;
+	snapViewportState = null;
+	sceneChangeCleanup;
+	portHighlights = [];
+	constructor(options) {
+		const elementOptions = {
+			selectable: false,
+			...options
+		};
+		super(elementOptions, new ElementProperties(elementOptions), ToolOverlayTransform);
+	}
+	onActivate(root, layer) {
+		super.onActivate(root, layer);
+		if (root) this.portIndex = new PortIndex(root);
+	}
+	onDeactivate(root, layer) {
+		this.stop();
+		this.portIndex?.dispose();
+		this.portIndex = null;
+		super.onDeactivate(root, layer);
+	}
+	collectSnapCandidates() {
+		const snapCandidates = [];
+		const portOwners = /* @__PURE__ */ new Set();
+		const processed = /* @__PURE__ */ new Set();
+		for (const element of this.root.queryArea(this.root.viewport.getWorldRectView(), {
+			bounds: "hit",
+			order: "none"
+		})) {
+			portOwners.add(element);
+			const resolved = checkElement(element);
+			if (!resolved || processed.has(resolved)) continue;
+			processed.add(resolved);
+			snapCandidates.push(resolved);
+		}
+		return {
+			snapCandidates,
+			portOwners
+		};
+	}
+	rebuildPortHighlights(portOwners) {
+		this.activePortHighlight = null;
+		this.viewportPortTargets = /* @__PURE__ */ new Map();
+		if (!this.showViewportPorts) {
+			this.portHighlights = [];
+			return;
+		}
+		const highlights = [];
+		for (const port of this.portIndex?.portsForOwners(portOwners) ?? []) {
+			if (!this.root.isPointerTarget(port.owner)) continue;
+			const target = new PortSnapTarget(port.worldPosition.x, port.worldPosition.y, port.owner, port.ref.portId, port.definition);
+			this.viewportPortTargets.set(port, target);
+			highlights.push(target);
+		}
+		this.portHighlights = highlights;
+	}
+	refreshSnapCandidates() {
+		const viewport = this.root.viewport;
+		const current = this.snapViewportState;
+		if (current && current.x === viewport.x && current.y === viewport.y && current.scale === viewport.scale && current.width === this.root.width && current.height === this.root.height) return;
+		this.snapViewportState = {
+			x: viewport.x,
+			y: viewport.y,
+			scale: viewport.scale,
+			width: this.root.width,
+			height: this.root.height
+		};
+		const candidates = this.collectSnapCandidates();
+		this.snapCandidates = candidates.snapCandidates;
+		this.axisTargets = null;
+		this.portProbe = null;
+		this.rebuildPortHighlights(candidates.portOwners);
+	}
+	invalidateSnapshot() {
+		if (isNull(this.snapViewportState)) return;
+		this.snapViewportState = null;
+		this.axisTargets = null;
+		this.transform.markPaintDirty();
+	}
+	sceneChangeIsExcluded(node) {
+		return node instanceof Element && (node === this || this.axisElementExcludes.has(node) || this.axisPointExcludes.has(node));
+	}
+	handleSceneChange = (node, affected) => {
+		if (affected !== void 0 ? affected.length > 0 && affected.every(this.sceneChangeIsExcluded, this) : node !== void 0 && this.sceneChangeIsExcluded(node)) return;
+		this.portProbe = null;
+		if (!this.root.enablePorts) {
+			this.viewportPortTargets = /* @__PURE__ */ new Map();
+			this.activePortHighlight = null;
+			this.portHighlights = [];
+		}
+		this.invalidateSnapshot();
+	};
+	start(excludeEls, excludePoints, showViewportPorts = false) {
+		this.isSnapping = true;
+		this.showViewportPorts = showViewportPorts;
+		this.snapLines = [];
+		this.portHighlights = [];
+		this.portProbe = null;
+		this.axisTargets = null;
+		this.sceneChangeCleanup?.();
+		this.sceneChangeCleanup = this.root.sceneRegistry.observeSceneChanges(this.handleSceneChange);
+		this.snapViewportState = null;
+		this.axisElementExcludes = new Set(excludeEls);
+		for (const element of excludeEls) {
+			const resolved = checkElement(element);
+			if (resolved) this.axisElementExcludes.add(resolved);
+		}
+		this.axisPointExcludes = /* @__PURE__ */ new Map();
+		if (excludePoints) for (const ep of excludePoints) this.axisPointExcludes.set(ep.element, new Set(ep.indices));
+		this.refreshSnapCandidates();
+		this.transform.markPaintDirty();
+	}
+	getAxisTargets() {
+		if (this.axisTargets) return this.axisTargets;
+		const cache = {
+			vertical: [],
+			horizontal: []
+		};
+		for (const node of this.snapCandidates) {
+			if (this.axisElementExcludes.has(node)) continue;
+			const capability = getEditorCapability(node, SnapSourceCapabilityToken);
+			if (!capability) continue;
+			let snapPoints = capability.getWorldSnapPointsView();
+			if (snapPoints.length === 0) continue;
+			const skipIndices = this.axisPointExcludes.get(node);
+			if (skipIndices) snapPoints = snapPoints.filter((_, i) => !skipIndices.has(i));
+			if (snapPoints.length === 0) continue;
+			const axes = createSnapAxes(snapPoints);
+			cache.vertical.push(...axes.vertical);
+			cache.horizontal.push(...axes.horizontal);
+		}
+		this.axisTargets = cache;
+		return cache;
+	}
+	detect(originalPoints, rawDx, rawDy) {
+		if (!this.isSnapping) return {
+			dx: 0,
+			dy: 0
+		};
+		this.snapLines = [];
+		this.refreshSnapCandidates();
+		const moving = createSnapAxes(originalPoints);
+		const threshold = this.threshold / this.root.viewport.scale;
+		const targets = this.getAxisTargets();
+		const vertical = findClosest(translateAxis(moving.vertical, rawDx, rawDy), targets.vertical, threshold);
+		const horizontal = findClosest(translateAxis(moving.horizontal, rawDy, rawDx), targets.horizontal, threshold);
+		const dx = vertical?.diff ?? 0;
+		const dy = horizontal?.diff ?? 0;
+		const scale = this.root.viewport.scale;
+		if (vertical) this.snapLines.push(...buildAxisSnapLines(vertical, {
+			min: vertical.movingRange.min + dy,
+			max: vertical.movingRange.max + dy
+		}, "vertical", scale));
+		if (horizontal) this.snapLines.push(...buildAxisSnapLines(horizontal, {
+			min: horizontal.movingRange.min + dx,
+			max: horizontal.movingRange.max + dx
+		}, "horizontal", scale));
+		this.transform.markPaintDirty();
+		return {
+			dx,
+			dy
+		};
+	}
+	stop() {
+		this.isSnapping = false;
+		this.snapLines = [];
+		this.snapCandidates = [];
+		this.axisElementExcludes = /* @__PURE__ */ new Set();
+		this.axisPointExcludes = /* @__PURE__ */ new Map();
+		this.axisTargets = null;
+		this.sceneChangeCleanup?.();
+		this.sceneChangeCleanup = void 0;
+		this.snapViewportState = null;
+		this.portProbe = null;
+		this.showViewportPorts = false;
+		this.viewportPortTargets = /* @__PURE__ */ new Map();
+		this.activePortHighlight = null;
+		this.portHighlights = [];
+		this.transform.markPaintDirty();
+	}
+	findClosestPortTarget(worldX, worldY, excludeEls) {
+		const threshold = 10 / this.root.viewport.scale;
+		const excluded = new Set(excludeEls);
+		let best = null;
+		let bestLayerOrder = -1;
+		let bestElementOrder = -1;
+		let bestDistance = threshold * threshold;
+		for (const candidate of this.portIndex?.query({
+			x: worldX,
+			y: worldY
+		}, threshold) ?? []) {
+			const visibleTarget = this.viewportPortTargets.get(candidate);
+			if (this.showViewportPorts && !visibleTarget) continue;
+			const element = visibleTarget?.element ?? candidate.owner;
+			if (excluded.has(element) || !this.root.isPointerTarget(element)) continue;
+			const paintOrder = this.root.getPaintOrderKey(element);
+			if (!paintOrder) continue;
+			const dx = candidate.worldPosition.x - worldX;
+			const dy = candidate.worldPosition.y - worldY;
+			const d2 = dx * dx + dy * dy;
+			const topmost = best && d2 === bestDistance && (paintOrder.layer > bestLayerOrder || paintOrder.layer === bestLayerOrder && paintOrder.element > bestElementOrder);
+			if (d2 >= bestDistance && !topmost) continue;
+			best = candidate;
+			bestLayerOrder = paintOrder.layer;
+			bestElementOrder = paintOrder.element;
+			bestDistance = d2;
+		}
+		return best ? this.viewportPortTargets.get(best) ?? new PortSnapTarget(best.worldPosition.x, best.worldPosition.y, best.owner, best.ref.portId, best.definition) : null;
+	}
+	clearActivePortHighlight() {
+		if (this.activePortHighlight) this.activePortHighlight.state = null;
+		this.activePortHighlight = null;
+		if (!this.showViewportPorts) this.portHighlights = [];
+	}
+	probeForbiddenPortMove(points, dx, dy, excludeEls = EMPTY_ELEMENTS) {
+		if (!this.isSnapping || !this.root.enablePorts || points.length === 0) return false;
+		this.refreshSnapCandidates();
+		this.clearActivePortHighlight();
+		let bestTarget = null;
+		let bestDistance = Infinity;
+		for (const point of points) {
+			const x = point.x + dx;
+			const y = point.y + dy;
+			const target = this.findClosestPortTarget(x, y, excludeEls);
+			if (!target) continue;
+			const distance = (target.x - x) ** 2 + (target.y - y) ** 2;
+			if (distance >= bestDistance) continue;
+			bestDistance = distance;
+			bestTarget = target;
+		}
+		const result = bestTarget !== null;
+		if (bestTarget) {
+			bestTarget.state = "forbidden";
+			this.activePortHighlight = bestTarget;
+		}
+		this.snapLines = [];
+		if (!this.showViewportPorts) this.portHighlights = bestTarget ? [bestTarget] : [];
+		this.transform.markPaintDirty();
+		return result;
+	}
+	probePortSnap(worldX, worldY, role, excludeEls = EMPTY_ELEMENTS, excludeSource) {
+		if (!this.isSnapping || !this.root.enablePorts) return NO_PORT_SNAP;
+		this.refreshSnapCandidates();
+		const cached = this.portProbe;
+		if (cached && cached.x === worldX && cached.y === worldY && cached.scale === this.root.viewport.scale && cached.role === role && cached.excludeEls === excludeEls && cached.excludeSource?.elementKey === excludeSource?.elementKey && cached.excludeSource?.anchorId === excludeSource?.anchorId) return cached.result;
+		this.clearActivePortHighlight();
+		const target = this.findClosestPortTarget(worldX, worldY, excludeEls);
+		let result;
+		if (!target) result = {
+			snap: null,
+			state: null
+		};
+		else if (!connectionPortAccepts(target.definition, role)) result = {
+			snap: null,
+			state: "incompatible"
+		};
+		else if (!hasConnectionPortCapacity(this.root, {
+			elementKey: target.element.key,
+			portId: target.portId
+		}, target.definition, role, excludeSource)) result = {
+			snap: null,
+			state: "forbidden"
+		};
+		else result = {
+			snap: {
+				x: target.x,
+				y: target.y,
+				elementKey: target.element.key,
+				portId: target.portId
+			},
+			state: "available"
+		};
+		if (target) {
+			target.state = result.state;
+			this.activePortHighlight = target;
+		}
+		this.portProbe = {
+			x: worldX,
+			y: worldY,
+			scale: this.root.viewport.scale,
+			role,
+			excludeEls,
+			excludeSource,
+			result
+		};
+		if (!this.showViewportPorts) this.portHighlights = target ? [target] : [];
+		this.transform.markPaintDirty();
+		return result;
+	}
+	detectPortSnap(worldX, worldY, role, excludeEls = EMPTY_ELEMENTS, excludeSource) {
+		return this.probePortSnap(worldX, worldY, role, excludeEls, excludeSource).snap;
+	}
+	paint() {
+		if ((!this.isSnapping || this.snapLines.length === 0) && this.portHighlights.length === 0) return;
+		const ctx = this.layer.ctx;
+		const scale = this.root.viewport.scale;
+		ctx.save();
+		this.root.viewport.applyTransform(ctx);
+		ctx.lineWidth = this.lineWidth / scale;
+		ctx.strokeStyle = this.lineColor;
+		ctx.fillStyle = this.lineColor;
+		ctx.font = `${12 / scale}px Arial`;
+		for (const line of this.snapLines) {
+			ctx.setLineDash(this.dashPattern.map((length) => length / scale));
+			ctx.beginPath();
+			if (line.type === "vertical") {
+				ctx.moveTo(line.value, line.start);
+				ctx.lineTo(line.value, line.end);
+			} else {
+				ctx.moveTo(line.start, line.value);
+				ctx.lineTo(line.end, line.value);
+			}
+			ctx.stroke();
+			ctx.setLineDash([]);
+			const size = 3 / scale;
+			for (const p of line.points) {
+				ctx.beginPath();
+				ctx.moveTo(p.x - size, p.y - size);
+				ctx.lineTo(p.x + size, p.y + size);
+				ctx.moveTo(p.x + size, p.y - size);
+				ctx.lineTo(p.x - size, p.y + size);
+				ctx.stroke();
+			}
+			if (line.distanceText && line.textPos) {
+				ctx.textAlign = line.type === "vertical" ? "left" : "center";
+				ctx.fillText(line.distanceText, line.textPos.x, line.textPos.y);
+			}
+		}
+		if (this.portHighlights.length > 0) for (const h of this.portHighlights) if (h.state) {
+			const stroke = h.state === "available" ? this.root.skin.selection : h.state === "incompatible" ? "#F59E0B" : "#EF4444";
+			const fill = h.state === "available" ? this.root.skin.selection : h.state === "incompatible" ? "rgba(245, 158, 11, 0.2)" : "rgba(239, 68, 68, 0.2)";
+			ctx.strokeStyle = stroke;
+			ctx.lineWidth = 2 / scale;
+			ctx.fillStyle = fill;
+			ctx.beginPath();
+			ctx.arc(h.x, h.y, 6 / scale, 0, Math.PI * 2);
+			if (h.state === "available") {
+				ctx.save();
+				ctx.globalAlpha *= .2;
+			}
+			ctx.fill();
+			if (h.state === "available") ctx.restore();
+			ctx.stroke();
+			if (h.state === "forbidden") {
+				const offset = 4 / scale;
+				ctx.beginPath();
+				ctx.moveTo(h.x - offset, h.y + offset);
+				ctx.lineTo(h.x + offset, h.y - offset);
+				ctx.stroke();
+			}
+		} else {
+			ctx.fillStyle = this.root.skin.selection;
+			ctx.beginPath();
+			ctx.arc(h.x, h.y, 3 / scale, 0, Math.PI * 2);
+			ctx.save();
+			ctx.globalAlpha *= .4;
+			ctx.fill();
+			ctx.restore();
+		}
+		ctx.restore();
+	}
+};
+//#endregion
+//#region packages/tools/src/line/index.ts
+/**
+* Line command/paint surface。Root listeners、mode、draft 与 History 全由唯一
+* EditorInteractionController 拥有。
+*/
+var LineTool = class extends Element {
+	type = "lineTool";
+	contentLayer;
+	resultType;
+	tailDecoration;
+	constructor(options = {}) {
+		const { contentLayer, resultType = "line", tailDecoration = "arrow", ...elementOptions } = options;
+		const elementOptionsWithDefaults = {
+			width: 0,
+			height: 0,
+			selectable: false,
+			pickable: false,
+			...elementOptions
+		};
+		super(elementOptionsWithDefaults, new ElementProperties(elementOptionsWithDefaults), ToolOverlayTransform);
+		this.contentLayer = contentLayer;
+		this.resultType = resultType;
+		this.tailDecoration = tailDecoration;
+	}
+	startDrawing() {
+		getEditorInteractionController(this.root).startLineDrawing(this);
+	}
+	stopDrawing() {
+		const controller = getEditorInteractionController(this.root);
+		if (controller.hasLineToolSession(this)) controller.stopLineDrawing();
+	}
+	cancelDrawing() {
+		const controller = getEditorInteractionController(this.root);
+		if (controller.hasLineToolSession(this)) controller.cancelLineDrawing();
+	}
+	onDeactivate(root, layer) {
+		const controller = root && getEditorInteractionController(root);
+		if (controller?.hasLineToolSession(this)) controller.cancelLineDrawing();
+		super.onDeactivate(root, layer);
+	}
+	/** @internal controller 在 final confirm 时解析唯一 structure destination。 */
+	getContentLayerForController() {
+		const destination = this.contentLayer;
+		if (!isUndefined(destination)) {
+			const layer = isString(destination) ? this.root.children.find((child) => child.key === destination) : destination;
+			if (!layer || layer.parent !== this.root) throw new Error("LineTool contentLayer must be a direct child of its Root");
+			return layer;
+		}
+		const layer = this.root.children.find((candidate) => candidate !== this.layer) ?? this.root.children[0];
+		if (!layer) throw new Error("LineTool requires a content Layer");
+		return layer;
+	}
+	/** @internal drawing session开始时读取一次，之后不再跟随配置变化。 */
+	getResultTypeForController() {
+		return this.resultType;
+	}
+	/** @internal drawing session 开始时读取一次。 */
+	getTailDecorationForController() {
+		return this.tailDecoration;
+	}
+	paint() {
+		const session = getEditorInteractionController(this.root)?.getLineDrawingView(this);
+		if (!session) return;
+		const ctx = this.layer.ctx;
+		const viewport = this.root.viewport;
+		ctx.save();
+		ctx.setTransform(viewport.scale * viewport.dpr, 0, 0, viewport.scale * viewport.dpr, viewport.x * viewport.dpr, viewport.y * viewport.dpr);
+		const scale = viewport.scale;
+		const pointSize = 4 / scale;
+		const points = session.confirmed;
+		if (points.length > 0) {
+			ctx.strokeStyle = this.root.skin.lineStroke;
+			ctx.lineWidth = 2 / scale;
+			ctx.lineCap = "round";
+			ctx.lineJoin = "round";
+			ctx.beginPath();
+			ctx.moveTo(points[0].x, points[0].y);
+			for (let index = 1; index < points.length; index++) ctx.lineTo(points[index].x, points[index].y);
+			const preview = session.snap ?? session.preview;
+			if (preview) ctx.lineTo(preview.x, preview.y);
+			ctx.stroke();
+			ctx.fillStyle = this.root.skin.selection;
+			for (const point of points) {
+				ctx.beginPath();
+				ctx.arc(point.x, point.y, pointSize, 0, Math.PI * 2);
+				ctx.fill();
+			}
+		}
+		ctx.restore();
+	}
+};
+//#endregion
+//#region packages/tools/src/rule/index.ts
+var SELECTION_RANGE_SIZE = 5;
+var SELECTION_LABEL_OFFSET = 7;
+var TICK_LABEL_OFFSET = 14;
+function formatRulerValue(value, precision) {
+	return Math.abs(value) < 1e-10 ? "0" : value.toFixed(precision);
+}
+function niceStep(pxPerTick, scale) {
+	const raw = pxPerTick / scale;
+	const pow = Math.pow(10, Math.floor(Math.log10(raw)));
+	const candidates = [
+		1,
+		2,
+		5,
+		10
+	];
+	let best = candidates[0] * pow;
+	for (const candidate of candidates) {
+		const value = candidate * pow;
+		if (Math.abs(value - raw) < Math.abs(best - raw)) best = value;
+	}
+	return best;
+}
+var DEFAULT_RULER_SIZE = 25;
+var DEFAULT_BACKGROUND_COLOR = "#ffffff";
+var DEFAULT_CORNER_BACKGROUND_COLOR = "#f0f0f0";
+var DEFAULT_MAJOR_TICK_COLOR = "#c0c0c0";
+var DEFAULT_MINOR_TICK_COLOR = "#c0c0c0";
+var DEFAULT_BORDER_COLOR = "#dadada";
+var DEFAULT_TEXT_COLOR = "#333333";
+var Rule = class extends Element {
+	type = "rule";
+	appearance;
+	select;
+	workspaceFocusInsets = () => ({
+		top: this.rulerSize,
+		left: this.rulerSize
+	});
+	constructor(options = {}) {
+		const { rulerSize, backgroundColor, cornerBackgroundColor, majorTickColor, minorTickColor, borderColor, textColor, selectionColor, select, ...baseOptions } = options;
+		const elementOptions = {
+			selectable: false,
+			...baseOptions
+		};
+		super(elementOptions, new ElementProperties(elementOptions), ToolOverlayTransform);
+		this.appearance = {
+			rulerSize: rulerSize ?? DEFAULT_RULER_SIZE,
+			backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+			cornerBackgroundColor: cornerBackgroundColor ?? DEFAULT_CORNER_BACKGROUND_COLOR,
+			majorTickColor: majorTickColor ?? DEFAULT_MAJOR_TICK_COLOR,
+			minorTickColor: minorTickColor ?? DEFAULT_MINOR_TICK_COLOR,
+			borderColor: borderColor ?? DEFAULT_BORDER_COLOR,
+			textColor: textColor ?? DEFAULT_TEXT_COLOR,
+			selectionColor
+		};
+		this.select = select;
+	}
+	get rulerSize() {
+		return this.appearance.rulerSize;
+	}
+	get backgroundColor() {
+		return this.appearance.backgroundColor;
+	}
+	get cornerBackgroundColor() {
+		return this.appearance.cornerBackgroundColor;
+	}
+	get majorTickColor() {
+		return this.appearance.majorTickColor;
+	}
+	get minorTickColor() {
+		return this.appearance.minorTickColor;
+	}
+	get borderColor() {
+		return this.appearance.borderColor;
+	}
+	get textColor() {
+		return this.appearance.textColor;
+	}
+	get selectionColor() {
+		return this.appearance.selectionColor;
+	}
+	onActivate(root, layer) {
+		super.onActivate(root, layer);
+		root?.provide(workspaceFocusInsetsKey, this.workspaceFocusInsets);
+	}
+	onDeactivate(root, layer) {
+		if (root?.inject(workspaceFocusInsetsKey) === this.workspaceFocusInsets) root.provide(workspaceFocusInsetsKey, void 0);
+		super.onDeactivate(root, layer);
+	}
+	setOptions(options) {
+		if (!options) return this;
+		const { rulerSize, backgroundColor, cornerBackgroundColor, majorTickColor, minorTickColor, borderColor, textColor, selectionColor, ...baseOptions } = options;
+		let changed = false;
+		if (Object.hasOwn(options, "rulerSize")) changed = this.setAppearance("rulerSize", rulerSize ?? DEFAULT_RULER_SIZE) || changed;
+		if (Object.hasOwn(options, "backgroundColor")) changed = this.setAppearance("backgroundColor", backgroundColor ?? DEFAULT_BACKGROUND_COLOR) || changed;
+		if (Object.hasOwn(options, "cornerBackgroundColor")) changed = this.setAppearance("cornerBackgroundColor", cornerBackgroundColor ?? DEFAULT_CORNER_BACKGROUND_COLOR) || changed;
+		if (Object.hasOwn(options, "majorTickColor")) changed = this.setAppearance("majorTickColor", majorTickColor ?? DEFAULT_MAJOR_TICK_COLOR) || changed;
+		if (Object.hasOwn(options, "minorTickColor")) changed = this.setAppearance("minorTickColor", minorTickColor ?? DEFAULT_MINOR_TICK_COLOR) || changed;
+		if (Object.hasOwn(options, "borderColor")) changed = this.setAppearance("borderColor", borderColor ?? DEFAULT_BORDER_COLOR) || changed;
+		if (Object.hasOwn(options, "textColor")) changed = this.setAppearance("textColor", textColor ?? DEFAULT_TEXT_COLOR) || changed;
+		if (Object.hasOwn(options, "selectionColor")) changed = this.setAppearance("selectionColor", selectionColor) || changed;
+		super.setOptions(baseOptions);
+		if (changed) this.transform.markPaintDirty();
+		return this;
+	}
+	setAppearance(key, value) {
+		if (Object.is(this.appearance[key], value)) return false;
+		this.appearance[key] = value;
+		return true;
+	}
+	paint() {
+		const ctx = this.layer.ctx;
+		const w = this.root.width || 0;
+		const h = this.root.height || 0;
+		const viewport = this.root.viewport;
+		const rulerSize = this.rulerSize;
+		const pxPerTick = 50;
+		const minorCount = 5;
+		ctx.save();
+		ctx.resetTransform();
+		ctx.scale(viewport.dpr, viewport.dpr);
+		ctx.clearRect(rulerSize, 0, w - rulerSize, rulerSize);
+		ctx.fillStyle = this.backgroundColor;
+		ctx.fillRect(rulerSize, 0, Math.max(0, w - rulerSize), rulerSize);
+		const vpRect = viewport.getWorldRect();
+		const stepX = niceStep(pxPerTick, viewport.scale);
+		const startWorldX = vpRect.left;
+		const endWorldX = vpRect.left + vpRect.width;
+		const firstTickX = Math.floor(startWorldX / stepX) * stepX;
+		const precisionX = Math.max(0, -Math.floor(Math.log10(stepX)));
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(rulerSize, 0, w - rulerSize, rulerSize);
+		ctx.clip();
+		ctx.beginPath();
+		ctx.strokeStyle = this.minorTickColor;
+		ctx.lineWidth = 1;
+		for (let x = firstTickX; x <= endWorldX; x += stepX) for (let i = 1; i < minorCount; i++) {
+			const value = x + i * stepX / minorCount;
+			const minorX = Math.floor(value * viewport.scale + viewport.x) + .5;
+			ctx.moveTo(minorX, rulerSize);
+			ctx.lineTo(minorX, rulerSize - 5);
+		}
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.strokeStyle = this.majorTickColor;
+		ctx.font = "10px sans-serif";
+		for (let x = firstTickX; x <= endWorldX; x += stepX) {
+			const px = Math.floor(x * viewport.scale + viewport.x) + .5;
+			ctx.moveTo(px, 0);
+			ctx.lineTo(px, rulerSize);
+			ctx.save();
+			ctx.fillStyle = this.textColor;
+			ctx.textAlign = "left";
+			ctx.textBaseline = "top";
+			ctx.fillText(formatRulerValue(x, precisionX), px + 2, TICK_LABEL_OFFSET);
+			ctx.restore();
+		}
+		ctx.stroke();
+		ctx.restore();
+		ctx.clearRect(0, rulerSize, rulerSize, Math.max(0, h - rulerSize));
+		ctx.fillStyle = this.backgroundColor;
+		ctx.fillRect(0, rulerSize, rulerSize, Math.max(0, h - rulerSize));
+		const stepY = niceStep(pxPerTick, viewport.scale);
+		const startWorldY = vpRect.top;
+		const endWorldY = vpRect.top + vpRect.height;
+		const firstTickY = Math.floor(startWorldY / stepY) * stepY;
+		const precisionY = Math.max(0, -Math.floor(Math.log10(stepY)));
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(0, rulerSize, rulerSize, h - rulerSize);
+		ctx.clip();
+		ctx.beginPath();
+		ctx.strokeStyle = this.minorTickColor;
+		for (let y = firstTickY; y <= endWorldY; y += stepY) for (let i = 1; i < minorCount; i++) {
+			const value = y + i * stepY / minorCount;
+			const minorY = Math.floor(value * viewport.scale + viewport.y) + .5;
+			ctx.moveTo(rulerSize, minorY);
+			ctx.lineTo(rulerSize - 5, minorY);
+		}
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.strokeStyle = this.majorTickColor;
+		for (let y = firstTickY; y <= endWorldY; y += stepY) {
+			const py = Math.floor(y * viewport.scale + viewport.y) + .5;
+			ctx.moveTo(0, py);
+			ctx.lineTo(rulerSize, py);
+			ctx.save();
+			ctx.translate(TICK_LABEL_OFFSET, py + 2);
+			ctx.rotate(-Math.PI / 2);
+			ctx.fillStyle = this.textColor;
+			ctx.font = "10px sans-serif";
+			ctx.textAlign = "right";
+			ctx.textBaseline = "top";
+			ctx.fillText(formatRulerValue(y, precisionY), 0, 0);
+			ctx.restore();
+		}
+		ctx.stroke();
+		ctx.restore();
+		ctx.fillStyle = this.cornerBackgroundColor;
+		ctx.fillRect(0, 0, rulerSize, rulerSize);
+		ctx.fillStyle = this.textColor;
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.fillText("px", rulerSize / 2, rulerSize / 2);
+		ctx.beginPath();
+		ctx.strokeStyle = this.borderColor;
+		ctx.lineWidth = 1;
+		ctx.moveTo(0, .5);
+		ctx.lineTo(w, .5);
+		ctx.moveTo(.5, 0);
+		ctx.lineTo(.5, h);
+		ctx.moveTo(0, rulerSize - .5);
+		ctx.lineTo(w, rulerSize - .5);
+		ctx.moveTo(rulerSize - .5, 0);
+		ctx.lineTo(rulerSize - .5, h);
+		ctx.stroke();
+		const frame = this.select?.interactionController.projection.frame;
+		if (frame) {
+			const outline = frame.outline;
+			let left = outline[0].x;
+			let top = outline[0].y;
+			let right = left;
+			let bottom = top;
+			for (let index = 1; index < outline.length; index++) {
+				const point = outline[index];
+				if (point.x < left) left = point.x;
+				if (point.y < top) top = point.y;
+				if (point.x > right) right = point.x;
+				if (point.y > bottom) bottom = point.y;
+			}
+			const leftPx = left * viewport.scale + viewport.x;
+			const topPx = top * viewport.scale + viewport.y;
+			const rightPx = right * viewport.scale + viewport.x;
+			const bottomPx = bottom * viewport.scale + viewport.y;
+			const selectionColor = this.selectionColor ?? this.root.skin.selection;
+			ctx.save();
+			ctx.beginPath();
+			ctx.rect(rulerSize, 0, w - rulerSize, rulerSize);
+			ctx.clip();
+			ctx.fillStyle = selectionColor;
+			ctx.fillRect(leftPx, 0, rightPx - leftPx, SELECTION_RANGE_SIZE);
+			ctx.font = "10px sans-serif";
+			ctx.textAlign = "center";
+			ctx.textBaseline = "top";
+			ctx.fillText(formatRulerValue(left, precisionX), leftPx, SELECTION_LABEL_OFFSET);
+			ctx.fillText(formatRulerValue(right, precisionX), rightPx, SELECTION_LABEL_OFFSET);
+			ctx.restore();
+			ctx.save();
+			ctx.beginPath();
+			ctx.rect(0, rulerSize, rulerSize, h - rulerSize);
+			ctx.clip();
+			ctx.fillStyle = selectionColor;
+			ctx.fillRect(0, topPx, SELECTION_RANGE_SIZE, bottomPx - topPx);
+			ctx.font = "10px sans-serif";
+			ctx.textAlign = "center";
+			ctx.textBaseline = "top";
+			ctx.save();
+			ctx.translate(SELECTION_LABEL_OFFSET, topPx);
+			ctx.rotate(-Math.PI / 2);
+			ctx.fillText(formatRulerValue(top, precisionY), 0, 0);
+			ctx.restore();
+			ctx.save();
+			ctx.translate(SELECTION_LABEL_OFFSET, bottomPx);
+			ctx.rotate(-Math.PI / 2);
+			ctx.fillText(formatRulerValue(bottom, precisionY), 0, 0);
+			ctx.restore();
+			ctx.restore();
+		}
+		ctx.restore();
+	}
+};
+//#endregion
+//#region packages/tools/src/editor-layer.ts
+/**
+* Rendering and input boundary for editor tools.
+*
+* Tool painters draw outside their node geometry (selection handles,
+* guides, rulers and previews), so dirty-rectangle repainting cannot
+* describe their damage. Keep this layer on the full-frame path and avoid
+* CSS viewport previews that would scale screen-space affordances. While the
+* layer is active, its subtree becomes an interaction scope: content hits
+* remain visible to Root observers without reaching content handlers.
+*/
+var EditorLayer = class extends Layer {
+	type = "editor-layer";
+	releaseInteractionScope;
+	constructor(options = {}) {
+		super({
+			...options,
+			elementArrangementEnabled: false,
+			enableDirtyRect: false,
+			cssTransformable: false
+		});
+	}
+	onActivate(root) {
+		super.onActivate(root);
+		if (root) this.releaseInteractionScope = root.input.registerInteractionScope(this);
+	}
+	onDeactivate(root) {
+		this.releaseInteractionScope?.();
+		this.releaseInteractionScope = void 0;
+		super.onDeactivate(root);
+	}
+};
+//#endregion
+export { ArrangeType, EditorLayer, HistoryManager, LineTool, Rule, Select, Snap, alignElements, checkElement, deserializeElement, exportToFile, importFromFile, parseFileData, restoreScene, serializeScene, serializeSceneToJSON };