@mica-js/schematic-editor 0.0.0-stage → 0.0.1

package/dist/index.js

@@ -0,0 +1,3293 @@
+import { DEFAULT_TEXT_CONTENT, GROUND_DEVICE, LABEL_DEVICE, POWER_DEVICE, SchematicEditor, SchematicError, TEXT_DEVICE, builtinSymbolKind, createDesignatorFactory, defaultElementIdFactory, deriveSchematicTopology, designatorOf, hasDesignator, hitTestSchematic, isTextDevice, joinJunctionAt, mergeWiresAtJunction, namesNet, netNameOf, parseDeviceReference, pinSide, pinStubEnd, pinsBounds, planJunctionRelease, planSegmentDrag, pointOnPolyline, previewSymbolDrag, projectOnSegment, propertyValueProblem, referenceAnchor, referencePosition, rotatePoint, samePoint, serializeSchematic, splitWireAt, symbolBounds, symbolPinPosition, symbolRole, textDeviceContent } from "@mica-js/core/schematic";
+//#region src/controller/inspector.ts
+/** Builds the property-panel payload for the current selection. */
+function buildInspector(document, selection, context) {
+	if (selection.length !== 1) return;
+	const [item] = selection;
+	if (item === void 0) return;
+	if (item.kind === "wire") {
+		const wire = document.sheet.wires.find((candidate) => candidate.id === item.id);
+		if (wire === void 0) return;
+		const net = context.topology().nets.find((candidate) => candidate.wireIds.includes(wire.id));
+		return {
+			kind: "wire",
+			id: wire.id,
+			netName: net?.name ?? null,
+			points: wire.points
+		};
+	}
+	if (item.kind !== "symbol" && item.kind !== "reference") return;
+	const symbolId = item.kind === "symbol" ? item.id : item.symbolId;
+	const symbol = document.sheet.symbols.find((candidate) => candidate.id === symbolId);
+	if (symbol === void 0) return;
+	return symbolInspector(symbol, context.devices);
+}
+function symbolInspector(symbol, devices) {
+	const reference = parseDeviceReference(symbol.device);
+	const role = symbolRole(symbol.device);
+	const designator = designatorOf(symbol);
+	const net = netNameOf(symbol);
+	return {
+		kind: "symbol",
+		id: symbol.id,
+		role,
+		device: symbol.device,
+		name: (reference === void 0 ? void 0 : devices?.getDeviceName(reference)) ?? builtinName(symbol),
+		builtin: role !== "component",
+		...designator === void 0 ? {} : { designator },
+		...net === void 0 ? {} : { net },
+		x: symbol.x,
+		y: symbol.y,
+		rotation: symbol.rotation,
+		properties: propertyFields(symbol, devices)
+	};
+}
+function propertyFields(symbol, devices) {
+	const overrides = symbol.properties ?? {};
+	if (isTextDevice(symbol.device)) {
+		const override = overrides["text"];
+		return [toField(TEXT_DESCRIPTOR, typeof override === "string" ? override : void 0)];
+	}
+	if (namesNet(symbolRole(symbol.device))) return [];
+	const fields = [];
+	for (const descriptor of devicePropertyDescriptors(symbol, devices).values()) {
+		const override = overrides[descriptor.key];
+		const valid = override !== void 0 && propertyValueProblem(descriptor, override) === void 0;
+		fields.push(toField(descriptor, valid ? override : void 0));
+	}
+	return fields;
+}
+/** Moves the declared default to `defaultValue` so hosts can tell it apart from the instance value. */
+function toField(descriptor, value) {
+	const { default: defaultValue, ...rest } = descriptor;
+	return {
+		...rest,
+		...defaultValue === void 0 ? {} : { defaultValue },
+		...value === void 0 ? {} : { value }
+	};
+}
+function devicePropertyDescriptors(symbol, devices) {
+	const reference = parseDeviceReference(symbol.device);
+	if (reference === void 0) return /* @__PURE__ */ new Map();
+	return devices?.getDevicePropertyDescriptors?.(reference) ?? /* @__PURE__ */ new Map();
+}
+function builtinName(symbol) {
+	if (isTextDevice(symbol.device)) return textDeviceContent(symbol);
+	return netNameOf(symbol);
+}
+/** `builtin:text` carries its content in one string property, described like any other (#7). */
+var TEXT_DESCRIPTOR = {
+	key: "text",
+	type: "string",
+	title: "文本",
+	default: DEFAULT_TEXT_CONTENT
+};
+//#endregion
+//#region src/controller/selection.ts
+function sameSelectionItem(left, right) {
+	if (left.kind !== right.kind) return false;
+	if (left.kind === "vertex" && right.kind === "vertex") return left.wireId === right.wireId && left.index === right.index;
+	if (left.kind === "reference" && right.kind === "reference") return left.symbolId === right.symbolId;
+	return "id" in left && "id" in right ? left.id === right.id : false;
+}
+function sameSelection(left, right) {
+	return left.length === right.length && left.every((item, index) => {
+		const other = right[index];
+		return other !== void 0 && sameSelectionItem(item, other);
+	});
+}
+/** Drops entries whose target disappeared from the document. */
+function pruneSelection(selection, document) {
+	if (selection.length === 0) return selection;
+	const symbols = new Set(document.sheet.symbols.map((symbol) => symbol.id));
+	const wires = new Map(document.sheet.wires.map((wire) => [wire.id, wire]));
+	const junctions = new Set(document.sheet.junctions.map((junction) => junction.id));
+	const kept = selection.filter((item) => {
+		switch (item.kind) {
+			case "symbol": return symbols.has(item.id);
+			case "reference": return symbols.has(item.symbolId);
+			case "wire": return wires.has(item.id);
+			case "junction": return junctions.has(item.id);
+			case "vertex": {
+				const wire = wires.get(item.wireId);
+				return wire !== void 0 && item.index < wire.points.length;
+			}
+			default: return false;
+		}
+	});
+	return kept.length === selection.length ? selection : kept;
+}
+//#endregion
+//#region src/controller/types.ts
+var DEFAULT_DISPLAY_OPTIONS = {
+	grid: true,
+	snap: true,
+	labels: true,
+	gridSize: 10,
+	gridSubdivisions: 2
+};
+//#endregion
+//#region src/controller/session.ts
+var MAX_MERGE_PASSES = 64;
+/**
+* Editing session: the document editor, the session-level state (selection, tool, display,
+* errors), the caches derived from them and the mutation plumbing.
+* Actions in `symbols.ts` / `wires.ts` operate on it; the controller is only a façade.
+*/
+var EditorSession = class {
+	editor;
+	devices;
+	tolerance;
+	createId;
+	createDesignator;
+	selection = [];
+	tool = "select";
+	display;
+	placingDevice;
+	lastError;
+	#listeners = /* @__PURE__ */ new Set();
+	#topology;
+	#stateCache;
+	#renderCache;
+	constructor(options) {
+		this.editor = new SchematicEditor(options.document, {
+			...deriveOptions(options.devices, options.tolerance),
+			...options.historyLimit === void 0 ? {} : { historyLimit: options.historyLimit }
+		});
+		this.devices = options.devices;
+		this.tolerance = options.tolerance;
+		this.createId = options.createId ?? defaultElementIdFactory;
+		this.createDesignator = options.createDesignator ?? createDesignatorFactory(options.devices);
+		this.display = {
+			...DEFAULT_DISPLAY_OPTIONS,
+			...options.display
+		};
+	}
+	get document() {
+		return this.editor.document;
+	}
+	/** Editing options for core calls (`exactOptionalPropertyTypes` friendly). */
+	get options() {
+		return deriveOptions(this.devices, this.tolerance);
+	}
+	/**
+	* Full editor state. Cached until the next change so hosts can compare references, and so a
+	* repaint does not rebuild the inspector payload.
+	*/
+	state() {
+		if (this.#stateCache !== void 0) return this.#stateCache;
+		this.#stateCache = {
+			...this.renderState(),
+			placingDevice: this.placingDevice,
+			canUndo: this.editor.canUndo,
+			canRedo: this.editor.canRedo,
+			inspector: this.inspect(),
+			lastError: this.lastError
+		};
+		return this.#stateCache;
+	}
+	/** Everything the canvas draws from; never builds the inspector. */
+	renderState() {
+		if (this.#renderCache !== void 0) return this.#renderCache;
+		this.#renderCache = {
+			document: this.editor.document,
+			selection: this.selection,
+			tool: this.tool,
+			display: this.display
+		};
+		return this.#renderCache;
+	}
+	subscribe(listener) {
+		this.#listeners.add(listener);
+		return () => {
+			this.#listeners.delete(listener);
+		};
+	}
+	emit() {
+		this.#stateCache = void 0;
+		this.#renderCache = void 0;
+		const state = this.state();
+		for (const listener of [...this.#listeners]) listener(state);
+	}
+	/**
+	* Runs `run` as one undoable edit, then reconciles junctions. Failures are recorded in
+	* `lastError` and rethrown; the document stays untouched.
+	*/
+	mutate(run, options = {}) {
+		try {
+			this.editor.transaction(() => {
+				run();
+				if (options.reconcile !== false) this.mergeDegenerateJunctions();
+			});
+		} catch (error) {
+			this.lastError = toSchematicError(error);
+			this.emit();
+			throw error;
+		}
+		this.lastError = void 0;
+		this.pruneSelection();
+		this.emit();
+	}
+	afterHistoryChange() {
+		this.lastError = void 0;
+		this.pruneSelection();
+		this.emit();
+	}
+	/** Records a rejected edit in `state.lastError`, notifies listeners, then rethrows. */
+	reject(error) {
+		this.lastError = error;
+		this.emit();
+		throw error;
+	}
+	undo() {
+		if (!this.editor.canUndo) return;
+		this.editor.undo();
+		this.afterHistoryChange();
+	}
+	redo() {
+		if (!this.editor.canRedo) return;
+		this.editor.redo();
+		this.afterHistoryChange();
+	}
+	/** Swaps the edited document and clears history, selection and errors. */
+	reset(document) {
+		this.editor = new SchematicEditor(document, deriveOptions(this.devices, this.tolerance));
+		this.selection = [];
+		this.lastError = void 0;
+		this.#topology = void 0;
+		this.placingDevice = void 0;
+		this.emit();
+	}
+	inspect() {
+		return buildInspector(this.editor.document, this.selection, {
+			devices: this.devices,
+			topology: () => this.topology()
+		});
+	}
+	topology() {
+		const document = this.editor.document;
+		if (this.#topology?.document !== document) this.#topology = {
+			document,
+			value: deriveSchematicTopology(document, this.options)
+		};
+		return this.#topology.value;
+	}
+	hitTest(point, options = {}) {
+		return hitTestSchematic(this.editor.document, point, {
+			...this.options,
+			...options
+		});
+	}
+	pruneSelection() {
+		const kept = pruneSelection(this.selection, this.editor.document);
+		if (kept !== this.selection) this.selection = kept;
+	}
+	findSymbol(id) {
+		return this.editor.document.sheet.symbols.find((symbol) => symbol.id === id);
+	}
+	findWire(id) {
+		return this.editor.document.sheet.wires.find((wire) => wire.id === id);
+	}
+	/** @throws {SchematicError} when the symbol is unknown. */
+	requireSymbol(symbolId) {
+		const symbol = this.findSymbol(symbolId);
+		if (symbol === void 0) this.reject(new SchematicError([{
+			severity: "error",
+			code: "edit/unknown-entity",
+			message: `Unknown symbol "${symbolId}".`,
+			entity: {
+				kind: "symbol",
+				id: symbolId
+			}
+		}]));
+		return symbol;
+	}
+	/** Device outline in symbol-local coordinates, used as the reference-designator default. */
+	outlineOf(symbol) {
+		const separator = symbol.device.indexOf(":");
+		if (separator <= 0) return;
+		return this.devices?.getDeviceSymbol({
+			raw: symbol.device,
+			packageId: symbol.device.slice(0, separator),
+			deviceId: symbol.device.slice(separator + 1)
+		})?.bounds;
+	}
+	/** A junction that only splices two collinear wires collapses back into a single wire. */
+	mergeDegenerateJunctions() {
+		for (let pass = 0; pass < MAX_MERGE_PASSES; pass += 1) {
+			const junctions = this.editor.document.sheet.junctions;
+			let merged = false;
+			for (const junction of junctions) {
+				const result = mergeWiresAtJunction(this.editor.document, junction.id, {
+					...deriveOptions(void 0, this.tolerance),
+					createId: this.createId
+				});
+				if (result === void 0) continue;
+				this.editor.replace(result.document);
+				merged = true;
+				break;
+			}
+			if (!merged) return;
+		}
+	}
+};
+/** Builds provider options without `undefined` values (`exactOptionalPropertyTypes`). */
+function deriveOptions(devices, tolerance) {
+	const options = {};
+	if (devices !== void 0) options.devices = devices;
+	if (tolerance !== void 0) options.tolerance = tolerance;
+	return options;
+}
+function toSchematicError(error) {
+	if (error instanceof SchematicError) return error;
+	const diagnostics = [{
+		severity: "error",
+		code: "edit/invalid-command",
+		message: error instanceof Error ? error.message : String(error)
+	}];
+	return new SchematicError(diagnostics);
+}
+//#endregion
+//#region src/controller/wires.ts
+/**
+* Appends a wire. Endpoints that land inside another wire split it and create a junction, and
+* endpoints that land on an existing junction join it, so the new wire is electrically connected.
+*/
+function addWire(session, points) {
+	if (points.length < 2) session.reject(new SchematicError([{
+		severity: "error",
+		code: "wire/invalid-points",
+		message: "A wire needs two points."
+	}]));
+	session.mutate(() => {
+		const id = session.createId("wire", session.document);
+		session.editor.dispatch({
+			type: "add-wire",
+			id,
+			points
+		});
+		for (const point of [points[0], points[points.length - 1]]) {
+			if (point === void 0) continue;
+			const host = hitTestWire(session, point, id);
+			if (host !== void 0) {
+				splitInto(session, id, host.wireId, point);
+				continue;
+			}
+			const join = joinJunctionAt(session.document, id, point);
+			if (join !== void 0) session.editor.dispatch({
+				type: "update-junction",
+				id: join.id,
+				wires: join.wires
+			});
+		}
+	}, { reconcile: false });
+}
+/** Splits `wireId` at `point` and creates a junction there. */
+function connectWireAt(session, wireId, point, otherWireId) {
+	let junctionId = "";
+	session.mutate(() => {
+		junctionId = splitInto(session, otherWireId, wireId, point, { strict: true });
+	}, { reconcile: false });
+	return junctionId;
+}
+/**
+* Slides one wire segment by `delta` along its normal. The whole run of segments parallel to it
+* moves along; junctions left behind on the old geometry let go of this wire.
+*/
+function moveWireSegment(session, wireId, segment, delta) {
+	const points = previewWireSegment(session, wireId, segment, delta);
+	if (points === void 0) return;
+	session.mutate(() => {
+		for (const release of planJunctionRelease(session.document, wireId, points)) session.editor.dispatch(release.wires === void 0 ? {
+			type: "remove-junction",
+			id: release.id
+		} : {
+			type: "update-junction",
+			id: release.id,
+			wires: release.wires
+		});
+		session.editor.dispatch({
+			type: "set-wire-points",
+			id: wireId,
+			points
+		});
+	});
+}
+/** Wire points a segment drag would produce; the renderer previews them before the commit. */
+function previewWireSegment(session, wireId, segment, delta) {
+	return planSegmentDrag(session.document, wireId, segment, delta, session.options);
+}
+/** Removes a wire while keeping its junctions for the merge pass to collapse. */
+function removeWire(session, wireId) {
+	const attached = session.document.sheet.junctions.filter((junction) => junction.wires.includes(wireId));
+	for (const junction of attached) {
+		const remaining = junction.wires.filter((id) => id !== wireId);
+		if (remaining.length >= 2) session.editor.dispatch({
+			type: "update-junction",
+			id: junction.id,
+			wires: remaining
+		});
+		else session.editor.dispatch({
+			type: "remove-junction",
+			id: junction.id
+		});
+	}
+	session.editor.dispatch({
+		type: "remove-wire",
+		id: wireId
+	});
+}
+/** Wire whose interior (not its ends) passes through `point`, excluding `excludeWireId`. */
+function hitTestWire(session, point, excludeWireId) {
+	for (const wire of session.document.sheet.wires) {
+		if (wire.id === excludeWireId || !pointOnPolyline(wire.points, point, session.tolerance ?? 0)) continue;
+		const [first, last] = [wire.points[0], wire.points[wire.points.length - 1]];
+		if (first === void 0 || last === void 0) continue;
+		if (samePoint(first, point) || samePoint(last, point)) continue;
+		return { wireId: wire.id };
+	}
+}
+/** Splits `hostWireId` at `point` and joins `newWireId` to the junction it creates. */
+function splitInto(session, newWireId, hostWireId, point, options = {}) {
+	const document = session.document;
+	if (!options.strict) {
+		const wire = session.findWire(hostWireId);
+		const [first, last] = [wire?.points[0], wire?.points[wire.points.length - 1]];
+		if (wire === void 0 || first === void 0 || last === void 0 || samePoint(first, point) || samePoint(last, point)) return "";
+	}
+	const split = splitWireAt(document, hostWireId, point, {
+		...session.tolerance === void 0 ? {} : { tolerance: session.tolerance },
+		createId: session.createId
+	});
+	const junctionId = session.createId("junction", split.document);
+	const wires = [split.firstWireId, split.secondWireId];
+	if (newWireId !== void 0 && newWireId.length > 0 && !wires.includes(newWireId)) wires.push(newWireId);
+	const junctions = [...split.document.sheet.junctions, {
+		id: junctionId,
+		x: point.x,
+		y: point.y,
+		wires
+	}];
+	session.editor.replace({
+		...split.document,
+		sheet: {
+			...split.document.sheet,
+			junctions
+		}
+	});
+	return junctionId;
+}
+//#endregion
+//#region src/controller/symbols.ts
+/** Arms placement of `device`: the next canvas click inserts it and disarms again. */
+function placeDevice(session, device) {
+	if (parseDeviceReference(device) === void 0) session.reject(new SchematicError([{
+		severity: "error",
+		code: "device/invalid-reference",
+		message: `Invalid device reference ${JSON.stringify(device)}.`
+	}]));
+	session.placingDevice = device;
+	session.tool = "select";
+	session.emit();
+}
+function cancelPlacement(session) {
+	if (session.placingDevice === void 0) return;
+	session.placingDevice = void 0;
+	session.emit();
+}
+/** Reference designator the next placed component gets, per the host's policy. */
+function nextDesignator(session, device) {
+	return session.createDesignator(device, session.document);
+}
+function moveSelectionBy(session, dx, dy) {
+	if (session.selection.length === 0 || dx === 0 && dy === 0) return;
+	session.mutate(() => {
+		for (const item of session.selection) switch (item.kind) {
+			case "symbol": {
+				const symbol = session.findSymbol(item.id);
+				if (symbol !== void 0) repositionSymbol(session, symbol, {
+					...symbol,
+					x: symbol.x + dx,
+					y: symbol.y + dy
+				});
+				break;
+			}
+			case "vertex": {
+				const wire = session.findWire(item.wireId);
+				const target = wire?.points[item.index];
+				if (wire !== void 0 && target !== void 0) session.editor.dispatch({
+					type: "set-wire-points",
+					id: wire.id,
+					points: wire.points.map((point, index) => index === item.index ? {
+						x: point.x + dx,
+						y: point.y + dy
+					} : point)
+				});
+				break;
+			}
+			case "reference": moveReferenceBy(session, item.symbolId, dx, dy);
+		}
+	});
+}
+function rotateSelection(session, degrees) {
+	if (session.selection.length === 0 || degrees === 0) return;
+	session.mutate(() => {
+		for (const item of session.selection) {
+			if (item.kind !== "symbol") continue;
+			const symbol = session.findSymbol(item.id);
+			if (symbol === void 0) continue;
+			repositionSymbol(session, symbol, {
+				...symbol,
+				rotation: normalizeRotation(symbol.rotation + degrees)
+			});
+		}
+	});
+}
+/**
+* Replaces a symbol's placement and drags everything anchored to its pins: wire ends keep
+* orthogonal routing, junctions and attached builtin anchors follow.
+*/
+function repositionSymbol(session, symbol, next) {
+	const document = session.document;
+	const preview = previewSymbolDrag(document, session.devices, symbol.id, next);
+	if (preview === void 0) return;
+	const symbols = document.sheet.symbols.map((item) => {
+		if (item.id === symbol.id) return next;
+		const target = preview.symbols.get(item.id);
+		return target === void 0 ? item : {
+			...item,
+			x: target.x,
+			y: target.y
+		};
+	});
+	const wires = document.sheet.wires.map((wire) => {
+		const points = preview.wires.get(wire.id);
+		return points === void 0 ? wire : {
+			...wire,
+			points
+		};
+	});
+	const junctions = document.sheet.junctions.map((junction) => {
+		const target = preview.junctions.get(junction.id);
+		return target === void 0 ? junction : {
+			...junction,
+			x: target.x,
+			y: target.y
+		};
+	});
+	session.editor.replace({
+		...document,
+		sheet: {
+			...document.sheet,
+			symbols,
+			wires,
+			junctions
+		}
+	});
+}
+function deleteSelection(session) {
+	if (session.selection.length === 0) return;
+	session.mutate(() => {
+		for (const item of session.selection) switch (item.kind) {
+			case "symbol":
+				session.editor.dispatch({
+					type: "remove-symbol",
+					id: item.id
+				});
+				break;
+			case "wire":
+				removeWire(session, item.id);
+				break;
+			case "junction":
+				session.editor.dispatch({
+					type: "remove-junction",
+					id: item.id
+				});
+				break;
+			case "vertex": {
+				const wire = session.findWire(item.wireId);
+				if (wire === void 0) break;
+				const points = wire.points.filter((_, index) => index !== item.index);
+				if (points.length < 2) removeWire(session, wire.id);
+				else session.editor.dispatch({
+					type: "set-wire-points",
+					id: wire.id,
+					points
+				});
+				break;
+			}
+		}
+		session.selection = [];
+	});
+}
+/** Moves a reference designator by a world-space delta; the offset is stored locally. */
+function moveReferenceBy(session, symbolId, dx, dy) {
+	const symbol = session.findSymbol(symbolId);
+	if (symbol === void 0 || dx === 0 && dy === 0) return;
+	session.mutate(() => {
+		const anchor = referenceAnchor(session.outlineOf(symbol), symbol.reference);
+		const local = rotatePoint({
+			x: dx,
+			y: dy
+		}, -symbol.rotation);
+		session.editor.dispatch({
+			type: "update-symbol",
+			id: symbol.id,
+			reference: {
+				x: anchor.x + local.x,
+				y: anchor.y + local.y
+			}
+		});
+	});
+}
+function setSymbolProperty(session, symbolId, key, value) {
+	session.mutate(() => {
+		session.editor.dispatch({
+			type: "set-symbol-property",
+			id: symbolId,
+			key,
+			value
+		});
+	});
+}
+function removeSymbolProperty(session, symbolId, key) {
+	session.mutate(() => {
+		session.editor.dispatch({
+			type: "remove-symbol-property",
+			id: symbolId,
+			key
+		});
+	});
+}
+/**
+* Sets a component's reference designator. The symbol id stays untouched, so selections and
+* Stable ids keep references pointing at the same element.
+*/
+function renameDesignator(session, symbolId, nextDesignator) {
+	const trimmed = nextDesignator.trim();
+	const symbol = session.requireSymbol(symbolId);
+	const role = symbolRole(symbol.device);
+	if (!hasDesignator(role)) session.reject(new SchematicError([{
+		severity: "error",
+		code: "symbol/unsupported-field",
+		message: `Symbols of role "${role}" carry no reference designator.`,
+		entity: {
+			kind: "symbol",
+			id: symbolId
+		}
+	}]));
+	if (trimmed.length === 0) session.reject(new SchematicError([{
+		severity: "error",
+		code: "schema/invalid-value",
+		message: "Reference designator must not be empty."
+	}]));
+	if (trimmed === designatorOf(symbol)) return;
+	const duplicate = session.document.sheet.symbols.find((candidate) => candidate.id !== symbolId && designatorOf(candidate) === trimmed);
+	if (duplicate !== void 0) session.reject(new SchematicError([{
+		severity: "error",
+		code: "symbol/designator-duplicate",
+		message: `Reference designator ${JSON.stringify(trimmed)} is already used.`,
+		entity: {
+			kind: "symbol",
+			id: duplicate.id
+		}
+	}]));
+	session.mutate(() => {
+		session.editor.dispatch({
+			type: "update-symbol",
+			id: symbolId,
+			designator: trimmed
+		});
+	});
+}
+/**
+* Sets the net name of a label / power / ground symbol. Same-named ports are one net, so
+* duplicates are allowed.
+*/
+function renameNet(session, symbolId, nextNet) {
+	const trimmed = nextNet.trim();
+	const symbol = session.requireSymbol(symbolId);
+	const role = symbolRole(symbol.device);
+	if (!namesNet(role)) session.reject(new SchematicError([{
+		severity: "error",
+		code: "symbol/unsupported-field",
+		message: `Symbols of role "${role}" name no net.`,
+		entity: {
+			kind: "symbol",
+			id: symbolId
+		}
+	}]));
+	if (trimmed.length === 0) session.reject(new SchematicError([{
+		severity: "error",
+		code: "schema/invalid-value",
+		message: "Net name must not be empty."
+	}]));
+	if (trimmed === netNameOf(symbol)) return;
+	session.mutate(() => {
+		session.editor.dispatch({
+			type: "update-symbol",
+			id: symbolId,
+			net: trimmed
+		});
+	});
+}
+function normalizeRotation(degrees) {
+	return (degrees % 360 + 360) % 360;
+}
+//#endregion
+//#region src/controller/controller.ts
+/**
+* Editing state without any DOM dependency: selection, tool, undo history and the derived data
+* the UI needs. It is a façade over {@link EditorSession} (state + mutation plumbing) and the
+* action modules `symbols.ts` / `wires.ts`; every mutation flows through `applySchematicCommand`.
+*/
+var SchematicEditorController = class {
+	#session;
+	constructor(options) {
+		this.#session = new EditorSession(options);
+	}
+	get state() {
+		return this.#session.state();
+	}
+	/** Everything the canvas draws from; never builds the inspector. */
+	get renderState() {
+		return this.#session.renderState();
+	}
+	get document() {
+		return this.#session.document;
+	}
+	get selection() {
+		return this.#session.selection;
+	}
+	get tool() {
+		return this.#session.tool;
+	}
+	get display() {
+		return this.#session.display;
+	}
+	get canUndo() {
+		return this.#session.editor.canUndo;
+	}
+	get canRedo() {
+		return this.#session.editor.canRedo;
+	}
+	/** Device armed for placement by the host's device list; `undefined` when idle. */
+	get placingDevice() {
+		return this.#session.placingDevice;
+	}
+	setTool(tool) {
+		if (this.#session.tool === tool && this.#session.placingDevice === void 0) return;
+		this.#session.tool = tool;
+		this.#session.placingDevice = void 0;
+		this.#session.emit();
+	}
+	setSelection(selection) {
+		this.#session.selection = selection;
+		this.#session.pruneSelection();
+		this.#session.emit();
+	}
+	setDisplayOptions(patch) {
+		this.#session.display = {
+			...this.#session.display,
+			...patch
+		};
+		this.#session.emit();
+	}
+	/** Swaps the edited document and clears history, selection and errors. */
+	reset(document) {
+		this.#session.reset(document);
+	}
+	/** @throws {SchematicError} leaving document, history and selection untouched. */
+	dispatch(command) {
+		this.#session.mutate(() => {
+			this.#session.editor.dispatch(command);
+		});
+	}
+	/**
+	* Swaps the whole document as one undoable edit, so a host can reload a file without losing
+	* the history it already has.
+	*/
+	replace(document) {
+		this.#session.mutate(() => {
+			this.#session.editor.replace(document);
+		});
+	}
+	/** Runs several edits as one history step; a failure rolls all of them back. */
+	transaction(run) {
+		this.#session.mutate(run);
+	}
+	undo() {
+		this.#session.undo();
+	}
+	redo() {
+		this.#session.redo();
+	}
+	/** Arms placement of `device`: the next canvas click inserts it and disarms again. */
+	placeDevice(device) {
+		placeDevice(this.#session, device);
+	}
+	cancelPlacement() {
+		cancelPlacement(this.#session);
+	}
+	/** Reference designator the next placed component gets, per the host's policy. */
+	nextDesignator(device) {
+		return nextDesignator(this.#session, device);
+	}
+	moveSelectionBy(dx, dy) {
+		moveSelectionBy(this.#session, dx, dy);
+	}
+	rotateSelection(degrees) {
+		rotateSelection(this.#session, degrees);
+	}
+	deleteSelection() {
+		deleteSelection(this.#session);
+	}
+	moveReferenceBy(symbolId, dx, dy) {
+		moveReferenceBy(this.#session, symbolId, dx, dy);
+	}
+	setSymbolProperty(symbolId, key, value) {
+		setSymbolProperty(this.#session, symbolId, key, value);
+	}
+	removeSymbolProperty(symbolId, key) {
+		removeSymbolProperty(this.#session, symbolId, key);
+	}
+	renameDesignator(symbolId, nextDesignator) {
+		renameDesignator(this.#session, symbolId, nextDesignator);
+	}
+	renameNet(symbolId, nextNet) {
+		renameNet(this.#session, symbolId, nextNet);
+	}
+	addWire(points) {
+		addWire(this.#session, points);
+	}
+	connectWireAt(wireId, point, otherWireId) {
+		return connectWireAt(this.#session, wireId, point, otherWireId);
+	}
+	moveWireSegment(wireId, segment, delta) {
+		moveWireSegment(this.#session, wireId, segment, delta);
+	}
+	previewWireSegment(wireId, segment, delta) {
+		return previewWireSegment(this.#session, wireId, segment, delta);
+	}
+	inspect() {
+		return this.#session.inspect();
+	}
+	topology() {
+		return this.#session.topology();
+	}
+	hitTest(point, options = {}) {
+		return this.#session.hitTest(point, options);
+	}
+	subscribe(listener) {
+		return this.#session.subscribe(listener);
+	}
+};
+//#endregion
+//#region src/render/theme.ts
+/**
+* Default dark theme: neutral greys on near-black, matching the reference palette
+* (background `#0a0a0a`, foreground `#fafafa`, muted `#a1a1a1`, ring `#737373`).
+*/
+var DARK_SCHEMATIC_THEME = {
+	background: "#0a0a0a",
+	grid: "rgba(250, 250, 250, 0.06)",
+	gridMajor: "rgba(250, 250, 250, 0.12)",
+	wire: "#a1a1a1",
+	wireSelected: "#fafafa",
+	junction: "#e5e5e5",
+	junctionSelected: "#fafafa",
+	pendingWire: "#fafafa",
+	symbolFill: "#171717",
+	symbolStroke: "#737373",
+	/** Device name in the symbol centre: quiet until the symbol is hovered or selected. */
+	symbolText: "#a1a1a1",
+	symbolPlaceholder: "rgba(250, 250, 250, 0.28)",
+	pin: "#737373",
+	pinText: "#a1a1a1",
+	pinOpen: "#e5e5e5",
+	labelAnchor: "#737373",
+	labelText: "#a1a1a1",
+	selection: "#fafafa",
+	hover: "#a1a1a1",
+	uiBackground: "#0a0a0a",
+	uiSurface: "#171717",
+	uiBorder: "rgba(250, 250, 250, 0.1)",
+	uiText: "#fafafa",
+	uiMutedText: "#a1a1a1",
+	uiAccent: "#e5e5e5",
+	uiAccentText: "#171717",
+	focusRing: "#737373",
+	fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+	fontSize: 9,
+	pinFontSize: 7,
+	symbolFontSize: 9,
+	gridSize: 10
+};
+var LIGHT_SCHEMATIC_THEME = {
+	background: "#ffffff",
+	grid: "rgba(10, 10, 10, 0.05)",
+	gridMajor: "rgba(10, 10, 10, 0.1)",
+	wire: "#525252",
+	wireSelected: "#0a0a0a",
+	junction: "#262626",
+	junctionSelected: "#0a0a0a",
+	pendingWire: "#0a0a0a",
+	symbolFill: "#fafafa",
+	symbolStroke: "#a1a1a1",
+	/** Device name in the symbol centre: quiet until the symbol is hovered or selected. */
+	symbolText: "#525252",
+	symbolPlaceholder: "rgba(10, 10, 10, 0.3)",
+	pin: "#a1a1a1",
+	pinText: "#525252",
+	pinOpen: "#262626",
+	labelAnchor: "#a1a1a1",
+	labelText: "#525252",
+	selection: "#0a0a0a",
+	hover: "#525252",
+	uiBackground: "#ffffff",
+	uiSurface: "#f5f5f5",
+	uiBorder: "rgba(10, 10, 10, 0.1)",
+	uiText: "#0a0a0a",
+	uiMutedText: "#525252",
+	uiAccent: "#171717",
+	uiAccentText: "#fafafa",
+	focusRing: "#a1a1a1",
+	fontFamily: DARK_SCHEMATIC_THEME.fontFamily,
+	fontSize: DARK_SCHEMATIC_THEME.fontSize,
+	pinFontSize: DARK_SCHEMATIC_THEME.pinFontSize,
+	symbolFontSize: DARK_SCHEMATIC_THEME.symbolFontSize,
+	gridSize: DARK_SCHEMATIC_THEME.gridSize
+};
+/** Merges overrides onto the dark baseline, so partial themes stay readable. */
+function resolveSchematicTheme(overrides = {}) {
+	const resolved = { ...DARK_SCHEMATIC_THEME };
+	for (const key of Object.keys(overrides)) {
+		const value = overrides[key];
+		if (value !== void 0) Object.assign(resolved, { [key]: value });
+	}
+	return resolved;
+}
+/** Maps the theme onto `--mica-schematic-*` CSS variables for light-DOM chrome. */
+function themeToCssVariables(theme) {
+	const variables = {};
+	for (const [key, value] of Object.entries(theme)) variables[`--mica-schematic-${kebabCase(key)}`] = String(value);
+	return variables;
+}
+function kebabCase(value) {
+	return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+//#endregion
+//#region src/render/viewport.ts
+var DEFAULT_VIEWPORT_LIMITS = {
+	minScale: .25,
+	maxScale: 4
+};
+/** Merges partial overrides onto the defaults; rejects non-positive and inverted ranges. */
+function resolveViewportLimits(limits) {
+	const minScale = limits?.minScale;
+	const maxScale = limits?.maxScale;
+	const resolved = {
+		minScale: minScale !== void 0 && Number.isFinite(minScale) && minScale > 0 ? minScale : DEFAULT_VIEWPORT_LIMITS.minScale,
+		maxScale: maxScale !== void 0 && Number.isFinite(maxScale) && maxScale > 0 ? maxScale : DEFAULT_VIEWPORT_LIMITS.maxScale
+	};
+	if (resolved.minScale > resolved.maxScale) return {
+		minScale: resolved.maxScale,
+		maxScale: resolved.minScale
+	};
+	return resolved;
+}
+var IDENTITY_VIEWPORT = {
+	scale: 1,
+	offsetX: 0,
+	offsetY: 0
+};
+function screenToPage(viewport, point) {
+	return {
+		x: (point.x - viewport.offsetX) / viewport.scale,
+		y: (point.y - viewport.offsetY) / viewport.scale
+	};
+}
+function pageToScreen(viewport, point) {
+	return {
+		x: point.x * viewport.scale + viewport.offsetX,
+		y: point.y * viewport.scale + viewport.offsetY
+	};
+}
+function clampScale(scale, limits = DEFAULT_VIEWPORT_LIMITS) {
+	return Math.min(limits.maxScale, Math.max(limits.minScale, scale));
+}
+/**
+* Clamps a viewport to `limits` while keeping the page point at the centre of `size` in place,
+* so restoring a saved view can never jump the content off screen.
+*/
+function clampViewport(viewport, size, limits = DEFAULT_VIEWPORT_LIMITS) {
+	const scale = clampScale(Number.isFinite(viewport.scale) && viewport.scale > 0 ? viewport.scale : limits.minScale, limits);
+	if (scale === viewport.scale) return viewport;
+	const center = {
+		x: size.width / 2,
+		y: size.height / 2
+	};
+	const anchor = screenToPage(viewport, center);
+	return {
+		scale,
+		offsetX: center.x - anchor.x * scale,
+		offsetY: center.y - anchor.y * scale
+	};
+}
+/** Zooms around a screen-space point so the page point under the cursor stays fixed. */ function zoomAt(viewport, screenPoint, factor, limits = DEFAULT_VIEWPORT_LIMITS) {
+	const scale = clampScale(viewport.scale * factor, limits);
+	if (scale === viewport.scale) return viewport;
+	const anchor = screenToPage(viewport, screenPoint);
+	return {
+		scale,
+		offsetX: screenPoint.x - anchor.x * scale,
+		offsetY: screenPoint.y - anchor.y * scale
+	};
+}
+function panBy(viewport, dx, dy) {
+	return {
+		...viewport,
+		offsetX: viewport.offsetX + dx,
+		offsetY: viewport.offsetY + dy
+	};
+}
+/** Fits `bounds` into `size` with padding, centering the content. */
+function fitBounds(bounds, size, padding = 32, limits = DEFAULT_VIEWPORT_LIMITS) {
+	const availableWidth = Math.max(1, size.width - padding * 2);
+	const availableHeight = Math.max(1, size.height - padding * 2);
+	const width = Math.max(bounds.width, 1e-6);
+	const height = Math.max(bounds.height, 1e-6);
+	const scale = clampScale(Math.min(availableWidth / width, availableHeight / height), limits);
+	const centerX = bounds.x + bounds.width / 2;
+	const centerY = bounds.y + bounds.height / 2;
+	return {
+		scale,
+		offsetX: size.width / 2 - centerX * scale,
+		offsetY: size.height / 2 - centerY * scale
+	};
+}
+//#endregion
+//#region src/render/canvas-renderer.ts
+var MAJOR_GRID_INTERVAL = 5;
+/** Sub-grid lines are hidden once they get closer together than this (CSS pixels). */
+var MIN_GRID_PIXELS = 4;
+/** Emphasised lines are stretched to stay at least this far apart (CSS pixels). */
+var MIN_MAJOR_GRID_PIXELS = 20;
+/** Draws a {@link SchematicScene} onto a canvas, honoring device pixel ratio. */
+var CanvasSchematicRenderer = class {
+	#canvas;
+	#context;
+	#theme;
+	#width = 0;
+	#height = 0;
+	#pixelRatio = 1;
+	constructor(canvas, options = {}) {
+		this.#canvas = canvas;
+		this.#context = canvas.getContext("2d");
+		this.#theme = resolveSchematicTheme(options.theme);
+	}
+	get theme() {
+		return this.#theme;
+	}
+	setTheme(theme) {
+		this.#theme = theme;
+	}
+	resize(width, height, pixelRatio = 1) {
+		this.#width = width;
+		this.#height = height;
+		this.#pixelRatio = pixelRatio;
+		this.#canvas.width = Math.max(1, Math.round(width * pixelRatio));
+		this.#canvas.height = Math.max(1, Math.round(height * pixelRatio));
+	}
+	render(scene, viewport) {
+		const context = this.#context;
+		if (context === null) return;
+		context.setTransform(this.#pixelRatio, 0, 0, this.#pixelRatio, 0, 0);
+		context.clearRect(0, 0, this.#width, this.#height);
+		context.fillStyle = scene.background;
+		context.fillRect(0, 0, this.#width, this.#height);
+		if (scene.grid !== void 0) this.#drawGrid(context, scene, viewport);
+		for (const item of scene.items) this.#drawItem(context, item, viewport);
+	}
+	destroy() {
+		this.#context = null;
+	}
+	#drawGrid(context, scene, viewport) {
+		const grid = scene.grid;
+		if (grid === void 0) return;
+		const cell = grid.size * viewport.scale;
+		if (!Number.isFinite(cell) || cell <= 0) return;
+		let subdivisions = grid.subdivisions;
+		while (subdivisions > 1 && cell / subdivisions < MIN_GRID_PIXELS) subdivisions = Math.max(1, Math.round(subdivisions / 2));
+		let step = cell / subdivisions;
+		if (step < MIN_GRID_PIXELS) step = cell;
+		let majorSpacing = cell * MAJOR_GRID_INTERVAL;
+		while (majorSpacing < MIN_MAJOR_GRID_PIXELS) majorSpacing *= 2;
+		const majorOnly = step < MIN_GRID_PIXELS;
+		if (majorOnly) step = majorSpacing;
+		const origin = pageToScreen(viewport, {
+			x: 0,
+			y: 0
+		});
+		const startX = origin.x - Math.ceil(origin.x / step) * step;
+		const startY = origin.y - Math.ceil(origin.y / step) * step;
+		context.lineWidth = 1;
+		for (let x = startX; x <= this.#width; x += step) {
+			if (x < 0) continue;
+			context.strokeStyle = majorOnly || isMajorGridLine(x - origin.x, majorSpacing) ? grid.major : grid.minor;
+			strokeLine(context, {
+				x: Math.round(x) + .5,
+				y: 0
+			}, {
+				x: Math.round(x) + .5,
+				y: this.#height
+			});
+		}
+		for (let y = startY; y <= this.#height; y += step) {
+			if (y < 0) continue;
+			context.strokeStyle = majorOnly || isMajorGridLine(y - origin.y, majorSpacing) ? grid.major : grid.minor;
+			strokeLine(context, {
+				x: 0,
+				y: Math.round(y) + .5
+			}, {
+				x: this.#width,
+				y: Math.round(y) + .5
+			});
+		}
+	}
+	#drawItem(context, item, viewport) {
+		switch (item.kind) {
+			case "line":
+				context.strokeStyle = item.color;
+				context.lineWidth = item.width;
+				context.setLineDash(item.dash === void 0 ? [] : [...item.dash]);
+				strokeLine(context, pageToScreen(viewport, item.from), pageToScreen(viewport, item.to));
+				context.setLineDash([]);
+				break;
+			case "polyline":
+				context.strokeStyle = item.color;
+				context.lineWidth = item.width;
+				context.lineJoin = "round";
+				context.lineCap = "round";
+				context.setLineDash(item.dash === void 0 ? [] : [...item.dash]);
+				context.beginPath();
+				item.points.forEach((point, index) => {
+					const screen = pageToScreen(viewport, point);
+					if (index === 0) context.moveTo(screen.x, screen.y);
+					else context.lineTo(screen.x, screen.y);
+				});
+				context.stroke();
+				context.setLineDash([]);
+				break;
+			case "rect": {
+				const topLeft = pageToScreen(viewport, {
+					x: item.bounds.x,
+					y: item.bounds.y
+				});
+				const width = item.bounds.width * viewport.scale;
+				const height = item.bounds.height * viewport.scale;
+				context.setLineDash(item.dash === void 0 ? [] : [...item.dash]);
+				if (item.fill !== void 0) {
+					context.fillStyle = item.fill;
+					context.fillRect(topLeft.x, topLeft.y, width, height);
+				}
+				if (item.stroke !== void 0) {
+					context.strokeStyle = item.stroke;
+					context.lineWidth = item.width;
+					context.strokeRect(topLeft.x, topLeft.y, width, height);
+				}
+				context.setLineDash([]);
+				break;
+			}
+			case "circle": {
+				const center = pageToScreen(viewport, item.center);
+				context.beginPath();
+				context.arc(center.x, center.y, Math.max(.5, item.radius * viewport.scale), 0, Math.PI * 2);
+				if (item.fill !== void 0) {
+					context.fillStyle = item.fill;
+					context.fill();
+				}
+				if (item.stroke !== void 0) {
+					context.strokeStyle = item.stroke;
+					context.lineWidth = item.width;
+					context.stroke();
+				}
+				break;
+			}
+			case "text": {
+				const position = pageToScreen(viewport, item.position);
+				context.fillStyle = item.color;
+				context.font = scaleFont(item.font, viewport.scale);
+				context.textAlign = item.align;
+				context.textBaseline = item.baseline;
+				if (item.rotation === void 0 || item.rotation === 0) {
+					context.fillText(item.text, position.x, position.y);
+					break;
+				}
+				context.save();
+				context.translate(position.x, position.y);
+				context.rotate(item.rotation * Math.PI / 180);
+				context.fillText(item.text, 0, 0);
+				context.restore();
+				break;
+			}
+		}
+	}
+};
+function strokeLine(context, from, to) {
+	context.beginPath();
+	context.moveTo(from.x, from.y);
+	context.lineTo(to.x, to.y);
+	context.stroke();
+}
+function isMajorGridLine(offset, spacing) {
+	if (!Number.isFinite(spacing) || spacing <= 0) return false;
+	const remainder = Math.abs(offset % spacing);
+	return remainder < .5 || spacing - remainder < .5;
+}
+function scaleFont(font, scale) {
+	const match = /^(\d+(?:\.\d+)?)px(.*)$/.exec(font);
+	if (match === null) return font;
+	return `${(Number(match[1]) * Math.max(scale, .01)).toFixed(1)}px${match[2]}`;
+}
+//#endregion
+//#region src/render/scene.ts
+var WIRE_WIDTH = 1.5;
+var SELECTED_WIDTH = 2.5;
+var JUNCTION_RADIUS = 3;
+var VERTEX_SIZE = 5;
+/** Visible grid lines per snap cell; anything unset or invalid falls back to the snap grid. */
+function gridSubdivisions(value) {
+	return value !== void 0 && Number.isFinite(value) && value >= 1 ? Math.round(value) : 1;
+}
+var ALIGN_MIRROR = {
+	left: "right",
+	center: "center",
+	right: "left"
+};
+var BASELINE_MIRROR = {
+	top: "bottom",
+	middle: "middle",
+	bottom: "top"
+};
+/**
+* Text turns with the symbol, except at half turns where it would read upside down: those flip
+* back and mirror the anchor alignment so the glyphs stay on the same side of the anchor.
+*/
+function uprightText(rotation, align, baseline) {
+	const normalized = (rotation % 360 + 540) % 360 - 180;
+	if (Math.abs(normalized) === 180) return {
+		align: ALIGN_MIRROR[align],
+		baseline: BASELINE_MIRROR[baseline],
+		rotation: 0
+	};
+	return {
+		align,
+		baseline,
+		rotation: normalized
+	};
+}
+var NO_PREVIEW = {
+	wires: /* @__PURE__ */ new Map(),
+	junctions: /* @__PURE__ */ new Map(),
+	symbols: /* @__PURE__ */ new Map()
+};
+/** Live preview of the dragged symbols: wires, junctions and anchors follow their pins. */
+function previewDrag(document, devices, selection) {
+	const offset = selection.offset;
+	if (offset === void 0 || selection.symbols === void 0) return NO_PREVIEW;
+	const wires = /* @__PURE__ */ new Map();
+	const junctions = /* @__PURE__ */ new Map();
+	const symbols = /* @__PURE__ */ new Map();
+	for (const symbol of document.sheet.symbols) {
+		if (!selection.symbols.has(symbol.id)) continue;
+		const placed = {
+			x: symbol.x,
+			y: symbol.y,
+			rotation: symbol.rotation
+		};
+		const preview = previewSymbolDrag(document, devices, symbol.id, {
+			...placed,
+			x: placed.x + offset.x,
+			y: placed.y + offset.y
+		});
+		if (preview === void 0) continue;
+		for (const [id, points] of preview.wires) wires.set(id, points);
+		for (const [id, point] of preview.junctions) junctions.set(id, point);
+		for (const [id, point] of preview.symbols) symbols.set(id, point);
+		symbols.set(symbol.id, {
+			x: placed.x + offset.x,
+			y: placed.y + offset.y
+		});
+	}
+	return {
+		wires,
+		junctions,
+		symbols
+	};
+}
+/** Builds a flat, drawable scene. Every color comes from `theme`. */
+function buildSchematicScene(input) {
+	const { document, devices, theme } = input;
+	const selection = input.selection ?? {};
+	const tool = input.tool ?? "select";
+	const display = input.display ?? {
+		grid: true,
+		labels: true
+	};
+	const font = `${theme.fontSize}px ${theme.fontFamily}`;
+	const pinFont = `${theme.pinFontSize}px ${theme.fontFamily}`;
+	const symbolFont = `${theme.symbolFontSize}px ${theme.fontFamily}`;
+	const items = [];
+	const drag = previewDrag(document, devices, selection);
+	for (const wire of document.sheet.wires) {
+		const selected = selection.wires?.has(wire.id) ?? false;
+		const hovered = input.hover?.kind === "wire" && input.hover.id === wire.id;
+		const preview = input.wirePreview;
+		const points = preview !== void 0 && preview.wireId === wire.id ? preview.points : drag.wires.get(wire.id) ?? wire.points;
+		items.push({
+			kind: "polyline",
+			points,
+			color: selected ? theme.wireSelected : hovered ? theme.hover : theme.wire,
+			width: selected ? SELECTED_WIDTH : WIRE_WIDTH
+		});
+	}
+	for (const junction of document.sheet.junctions) {
+		const selected = selection.junctions?.has(junction.id) ?? false;
+		const hovered = input.hover?.kind === "junction" && input.hover.id === junction.id;
+		const center = drag.junctions.get(junction.id) ?? {
+			x: junction.x,
+			y: junction.y
+		};
+		items.push({
+			kind: "circle",
+			center,
+			radius: JUNCTION_RADIUS,
+			fill: selected ? theme.junctionSelected : hovered ? theme.hover : theme.junction,
+			width: 0
+		});
+	}
+	for (const symbol of document.sheet.symbols) {
+		const selected = selection.symbols?.has(symbol.id) ?? false;
+		const hovered = input.hover?.kind === "symbol" && input.hover.id === symbol.id || input.hover?.kind === "reference" && input.hover.symbolId === symbol.id;
+		const placed = {
+			x: symbol.x,
+			y: symbol.y,
+			rotation: symbol.rotation
+		};
+		const dragged = drag.symbols.get(symbol.id);
+		drawSymbol(items, {
+			symbol,
+			placement: dragged === void 0 ? placed : {
+				...placed,
+				x: dragged.x,
+				y: dragged.y
+			},
+			theme,
+			devices,
+			labels: display.labels,
+			fonts: {
+				font,
+				pinFont,
+				symbolFont
+			},
+			selected,
+			hovered,
+			...input.referencePreview?.symbolId === symbol.id ? { referenceOverride: input.referencePreview.position } : {}
+		});
+	}
+	for (const vertex of selection.vertices ?? []) {
+		const point = document.sheet.wires.find((candidate) => candidate.id === vertex.wireId)?.points[vertex.index];
+		if (point === void 0) continue;
+		const center = point;
+		items.push({
+			kind: "rect",
+			bounds: {
+				x: center.x - VERTEX_SIZE / 2,
+				y: center.y - VERTEX_SIZE / 2,
+				width: VERTEX_SIZE,
+				height: VERTEX_SIZE
+			},
+			fill: theme.selection,
+			width: 0
+		});
+	}
+	if (input.marquee !== void 0) items.push({
+		kind: "rect",
+		bounds: input.marquee,
+		stroke: theme.selection,
+		width: 1,
+		dash: [4, 3]
+	});
+	if (input.placementPreview !== void 0) {
+		const { device, position, rotation, wire } = input.placementPreview;
+		if (wire !== void 0) items.push({
+			kind: "polyline",
+			points: wire,
+			color: theme.hover,
+			width: WIRE_WIDTH
+		});
+		drawSymbol(items, {
+			symbol: previewSymbol(device, position),
+			placement: {
+				...position,
+				rotation
+			},
+			theme,
+			devices,
+			labels: display.labels,
+			fonts: {
+				font,
+				pinFont,
+				symbolFont
+			},
+			selected: false,
+			hovered: false,
+			ghost: true
+		});
+	}
+	if (tool === "wire" && input.pendingWire !== void 0 && input.pendingWire.length > 0) {
+		items.push({
+			kind: "polyline",
+			points: input.pendingWire,
+			color: theme.pendingWire,
+			width: WIRE_WIDTH,
+			dash: [5, 4]
+		});
+		const last = input.pendingWire[input.pendingWire.length - 1];
+		if (last !== void 0) items.push({
+			kind: "circle",
+			center: last,
+			radius: 2.5,
+			fill: theme.pendingWire,
+			width: 0
+		});
+	}
+	return {
+		background: theme.background,
+		grid: display.grid === false ? void 0 : {
+			size: display.gridSize ?? theme.gridSize,
+			subdivisions: gridSubdivisions(display.gridSubdivisions),
+			minor: theme.grid,
+			major: theme.gridMajor
+		},
+		items
+	};
+}
+/**
+* Draws one symbol: the single code path shared by placed symbols and the placement preview,
+* so what follows the cursor is exactly what will be inserted.
+*/
+function drawSymbol(items, options) {
+	const { symbol, placement, theme, devices, fonts, selected, hovered } = options;
+	const ghost = options.ghost ?? false;
+	const highlight = selected ? theme.selection : hovered || ghost ? theme.hover : void 0;
+	const stroke = highlight ?? theme.symbolStroke;
+	const annotation = highlight ?? theme.labelText;
+	if (isTextDevice(symbol.device)) {
+		items.push({
+			kind: "text",
+			position: placement,
+			text: textDeviceContent(symbol),
+			color: annotation,
+			...uprightText(placement.rotation, "left", "middle"),
+			font: fonts.symbolFont
+		});
+		return;
+	}
+	const builtin = builtinSymbolKind(symbol.device);
+	if (builtin !== void 0) {
+		drawBuiltin(items, {
+			kind: builtin,
+			placement,
+			text: netNameOf(symbol) ?? symbol.id,
+			color: annotation,
+			anchorColor: highlight ?? theme.labelAnchor,
+			font: builtin === "label" ? fonts.font : fonts.pinFont
+		});
+		return;
+	}
+	const reference = parseDeviceReference(symbol.device);
+	const definition = reference === void 0 ? void 0 : devices?.getDeviceSymbol(reference);
+	if (definition === void 0) {
+		const half = 12;
+		items.push({
+			kind: "rect",
+			bounds: {
+				x: placement.x - half,
+				y: placement.y - half,
+				width: 24,
+				height: 24
+			},
+			stroke: theme.symbolPlaceholder,
+			width: 1,
+			dash: [4, 3]
+		});
+		items.push({
+			kind: "text",
+			position: {
+				x: placement.x,
+				y: placement.y
+			},
+			text: (reference === void 0 ? void 0 : devices?.getDeviceName(reference)) ?? symbol.id,
+			color: theme.symbolPlaceholder,
+			align: "center",
+			baseline: "middle",
+			font: fonts.symbolFont
+		});
+		return;
+	}
+	const localBody = definition.bounds ?? pinsBounds(definition.pins) ?? {
+		x: -12,
+		y: -12,
+		width: 24,
+		height: 24
+	};
+	const body = symbolBounds(placement, localBody, {}) ?? fallbackBounds(placement);
+	items.push({
+		kind: "rect",
+		bounds: body,
+		fill: theme.symbolFill,
+		stroke,
+		width: 1.5
+	});
+	items.push({
+		kind: "text",
+		position: options.referenceOverride ?? referencePosition(placement, localBody, symbol.reference),
+		text: designatorOf(symbol) ?? symbol.id,
+		color: options.referenceOverride === void 0 ? annotation : theme.selection,
+		...uprightText(placement.rotation, "left", "bottom"),
+		font: fonts.pinFont
+	});
+	items.push({
+		kind: "text",
+		position: {
+			x: body.x + body.width / 2,
+			y: body.y + body.height / 2
+		},
+		text: definition.name,
+		color: selected || hovered ? theme.selection : theme.symbolText,
+		...uprightText(placement.rotation, "center", "middle"),
+		font: fonts.symbolFont
+	});
+	for (const [pinId, anchor] of Object.entries(definition.pins)) {
+		const side = pinSide(anchor, localBody) ?? "left";
+		const pinPosition = symbolPinPosition(placement, anchor);
+		const edge = symbolPinPosition(placement, pinStubEnd(localBody, anchor, side));
+		items.push({
+			kind: "line",
+			from: edge,
+			to: pinPosition,
+			color: highlight ?? theme.pin,
+			width: 1.2
+		});
+		if (!options.labels) continue;
+		const label = pinLabel(localBody, side, anchor);
+		items.push({
+			kind: "text",
+			position: symbolPinPosition(placement, label.position),
+			text: pinId,
+			color: highlight ?? theme.pinText,
+			...uprightText(placement.rotation + label.rotation, label.align, label.baseline),
+			font: fonts.pinFont
+		});
+	}
+}
+/** Synthetic symbol used to preview the current placement tool. */
+function previewSymbol(device, position) {
+	const base = {
+		id: "N",
+		device,
+		x: position.x,
+		y: position.y,
+		rotation: 0
+	};
+	if (isTextDevice(device)) return {
+		...base,
+		properties: { text: DEFAULT_TEXT_CONTENT }
+	};
+	return base;
+}
+function fallbackBounds(placement) {
+	return {
+		x: placement.x - 12,
+		y: placement.y - 12,
+		width: 24,
+		height: 24
+	};
+}
+function pinLabel(body, side, anchor) {
+	const centerX = body.x + body.width / 2;
+	const centerY = body.y + body.height / 2;
+	const clampX = Math.min(Math.max(anchor.x, body.x), body.x + body.width);
+	const clampY = Math.min(Math.max(anchor.y, body.y), body.y + body.height);
+	switch (side) {
+		case "left": return {
+			position: {
+				x: body.x + 5,
+				y: clampY
+			},
+			align: "left",
+			baseline: "middle",
+			rotation: 0
+		};
+		case "right": return {
+			position: {
+				x: body.x + body.width - 5,
+				y: clampY
+			},
+			align: "right",
+			baseline: "middle",
+			rotation: 0
+		};
+		case "top": return {
+			position: {
+				x: clampX,
+				y: body.y + 10
+			},
+			align: "center",
+			baseline: "middle",
+			rotation: -90
+		};
+		case "bottom": return {
+			position: {
+				x: clampX,
+				y: body.y + body.height - 10
+			},
+			align: "center",
+			baseline: "middle",
+			rotation: -90
+		};
+		default: return {
+			position: {
+				x: centerX,
+				y: centerY
+			},
+			align: "center",
+			baseline: "middle",
+			rotation: 0
+		};
+	}
+}
+function drawBuiltin(items, input) {
+	const { placement, color, anchorColor, font } = input;
+	const at = (x, y) => symbolPinPosition(placement, {
+		x,
+		y
+	});
+	const push = (x, y) => {
+		const rotated = rotatePoint({
+			x,
+			y
+		}, placement.rotation);
+		items.push({
+			kind: "text",
+			position: {
+				x: placement.x + rotated.x,
+				y: placement.y + rotated.y
+			},
+			text: input.text,
+			color,
+			...outwardLabel(rotated),
+			font
+		});
+	};
+	if (input.kind === "label") {
+		items.push({
+			kind: "line",
+			from: at(-3, 0),
+			to: at(3, 0),
+			color: anchorColor,
+			width: 1.2
+		});
+		items.push({
+			kind: "line",
+			from: at(0, -3),
+			to: at(0, 3),
+			color: anchorColor,
+			width: 1.2
+		});
+		const layout = LABEL_TEXT_LAYOUTS[quarterTurns(placement.rotation)];
+		items.push({
+			kind: "text",
+			position: {
+				x: placement.x + layout.offset.x,
+				y: placement.y + layout.offset.y
+			},
+			text: input.text,
+			color,
+			align: layout.align,
+			baseline: layout.baseline,
+			font
+		});
+		return;
+	}
+	if (input.kind === "power") {
+		items.push({
+			kind: "line",
+			from: at(0, 0),
+			to: at(0, -10),
+			color,
+			width: 1.5
+		});
+		items.push({
+			kind: "line",
+			from: at(-6, -10),
+			to: at(6, -10),
+			color,
+			width: 1.5
+		});
+		push(0, -13);
+		return;
+	}
+	if (input.kind === "ground") {
+		items.push({
+			kind: "line",
+			from: at(0, 0),
+			to: at(0, 6),
+			color,
+			width: 1.5
+		});
+		for (const [offset, width] of [
+			[6, 12],
+			[9, 8],
+			[12, 4]
+		]) items.push({
+			kind: "line",
+			from: at(-width / 2, offset),
+			to: at(width / 2, offset),
+			color,
+			width: 1.5
+		});
+		push(0, 16);
+	}
+}
+/** Rotation snapped to the 90° steps builtin glyphs support. */
+function quarterTurns(rotation) {
+	const normalized = ((rotation % 360 + 360) % 360 + 45) % 360;
+	return Math.floor(normalized / 90) * 90;
+}
+/** Clearance from the anchor cross, so the name starts just past its arms. */
+var LABEL_TEXT_INSET = 4;
+/**
+* Where a label's name goes for each rotation: right above the wire for horizontal labels and
+* just past its tip for vertical ones, clear of the anchor cross.
+*/
+var LABEL_TEXT_LAYOUTS = {
+	0: {
+		offset: {
+			x: LABEL_TEXT_INSET,
+			y: -1
+		},
+		align: "left",
+		baseline: "bottom"
+	},
+	90: {
+		offset: {
+			x: LABEL_TEXT_INSET,
+			y: 0
+		},
+		align: "left",
+		baseline: "middle"
+	},
+	180: {
+		offset: {
+			x: -4,
+			y: -1
+		},
+		align: "right",
+		baseline: "bottom"
+	},
+	270: {
+		offset: {
+			x: LABEL_TEXT_INSET,
+			y: 0
+		},
+		align: "left",
+		baseline: "middle"
+	}
+};
+/** Horizontal text starting at `offset` (already rotated) and growing away from the origin. */
+function outwardLabel(offset) {
+	if (Math.abs(offset.x) >= Math.abs(offset.y)) return {
+		align: offset.x >= 0 ? "left" : "right",
+		baseline: "middle",
+		rotation: 0
+	};
+	return {
+		align: "center",
+		baseline: offset.y >= 0 ? "top" : "bottom",
+		rotation: 0
+	};
+}
+//#endregion
+//#region src/editor/snapping/nodes.ts
+/** World position of a pin / label / power / ground anchor under `point`. */
+function connectionNodeAt(context, point) {
+	const hit = context.controller.hitTest(point, {
+		tolerance: context.tolerance * 2,
+		includeSymbols: false
+	});
+	if (hit?.kind === "pin") return pinPosition(context, hit);
+	const anchor = anchorSymbolAt(context, point);
+	if (anchor !== void 0) return {
+		x: anchor.x,
+		y: anchor.y
+	};
+	return wireEndpointAt(context, point);
+}
+/** Endpoint of an existing wire under `point`; used to close a connection. */
+function wireEndpointAt(context, point) {
+	for (const wire of context.controller.document.sheet.wires) for (const endpoint of [wire.points[0], wire.points[wire.points.length - 1]]) if (endpoint !== void 0 && Math.abs(endpoint.x - point.x) <= context.tolerance * 2 && Math.abs(endpoint.y - point.y) <= context.tolerance * 2) return {
+		x: endpoint.x,
+		y: endpoint.y
+	};
+}
+/** Builtin connection symbol (label / power / ground) anchored under `point`. */
+function anchorSymbolAt(context, point) {
+	for (const symbol of context.controller.document.sheet.symbols) {
+		const device = symbol.device;
+		if (device !== LABEL_DEVICE && device !== POWER_DEVICE && device !== GROUND_DEVICE) continue;
+		if (Math.abs(symbol.x - point.x) <= context.tolerance && Math.abs(symbol.y - point.y) <= context.tolerance) return symbol;
+	}
+}
+function pinPosition(context, hit) {
+	const symbol = context.controller.document.sheet.symbols.find((item) => item.id === hit.symbolId);
+	if (symbol === void 0) return;
+	const reference = parseDeviceReference(symbol.device);
+	const anchor = reference === void 0 ? void 0 : context.devices?.getDeviceSymbol(reference)?.pins[hit.pinId];
+	return anchor === void 0 ? void 0 : symbolPinPosition(symbol, anchor);
+}
+//#endregion
+//#region src/editor/snapping/drag.ts
+function snapToGrid(point, display) {
+	if (!display.snap || !(display.gridSize > 0)) return point;
+	const size = display.gridSize;
+	return {
+		x: Math.round(point.x / size) * size,
+		y: Math.round(point.y / size) * size
+	};
+}
+/**
+* Offset for dragging something anchored at `anchor` from `from` to `to`: the result is snapped,
+* not the raw pointer delta, so an off-grid symbol lands on the grid.
+*
+* A drag that stays within half a grid cell on one axis does not move that axis at all, so an
+* anchor that started off-grid keeps its column/row instead of jittering sideways.
+*/
+function snapDragOffset(anchor, from, to, display) {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	if (!display.snap || !(display.gridSize > 0)) return {
+		x: dx,
+		y: dy
+	};
+	const target = snapToGrid({
+		x: anchor.x + dx,
+		y: anchor.y + dy
+	}, display);
+	const lock = display.gridSize / 2;
+	return {
+		x: (Math.abs(dx) < lock ? anchor.x : target.x) - anchor.x,
+		y: (Math.abs(dy) < lock ? anchor.y : target.y) - anchor.y
+	};
+}
+//#endregion
+//#region src/editor/snapping/wire.ts
+/**
+* Waypoints needed to reach `to` from `from` with horizontal/vertical segments only.
+* Returns `[to]` when already aligned, otherwise an elbow plus `to` (long axis first).
+*/
+function orthogonalWaypoints(from, to) {
+	if (from.x === to.x || from.y === to.y) return [to];
+	return [Math.abs(to.x - from.x) >= Math.abs(to.y - from.y) ? {
+		x: to.x,
+		y: from.y
+	} : {
+		x: from.x,
+		y: to.y
+	}, to];
+}
+/**
+* Waypoints for one new wire leg. When the target lands on an existing wire the last leg runs
+* perpendicular to it, so the branch taps into a T instead of doubling back along the host.
+*/
+function wireWaypoints(from, to, host) {
+	if (host === void 0 || from.x === to.x || from.y === to.y) return orthogonalWaypoints(from, to);
+	return host === "vertical" ? [{
+		x: from.x,
+		y: to.y
+	}, to] : [{
+		x: to.x,
+		y: from.y
+	}, to];
+}
+/** Snaps to a nearby connection node, then to a nearby wire, otherwise to the grid. */
+function snapForWire(context, point) {
+	return connectionNodeAt(context, point) ?? wireBodyPointAt(context, point) ?? snapToGrid(point, context.controller.display);
+}
+/**
+* Closest point on an existing wire's run when `point` is within the snap radius. Lets the wire
+* tool land exactly on another wire, which is what turns the run into a T junction.
+*/
+function wireBodyPointAt(context, point) {
+	const radius = context.tolerance * 2;
+	let best;
+	for (const wire of context.controller.document.sheet.wires) for (let index = 1; index < wire.points.length; index += 1) {
+		const a = wire.points[index - 1];
+		const b = wire.points[index];
+		if (a === void 0 || b === void 0) continue;
+		const projected = projectOnSegment(point, a, b);
+		const distance = Math.hypot(projected.x - point.x, projected.y - point.y);
+		if (distance > radius || best !== void 0 && distance >= best.distance) continue;
+		best = {
+			point: {
+				x: projected.x,
+				y: projected.y
+			},
+			distance
+		};
+	}
+	return best?.point;
+}
+//#endregion
+//#region src/editor/snapping/label.ts
+function isPlacementTool(tool) {
+	return tool === "power" || tool === "ground" || tool === "label" || tool === "text";
+}
+function toolDevice(tool) {
+	switch (tool) {
+		case "power": return POWER_DEVICE;
+		case "ground": return GROUND_DEVICE;
+		case "label": return LABEL_DEVICE;
+		default: return TEXT_DEVICE;
+	}
+}
+/** Smallest unused `N<n>` net name for a freshly placed net label. */
+function nextNetName(document) {
+	const used = new Set(document.sheet.symbols.map((symbol) => netNameOf(symbol)).filter((name) => name !== void 0));
+	for (let index = 1; index < Number.MAX_SAFE_INTEGER; index += 1) {
+		const candidate = `N${index}`;
+		if (!used.has(candidate)) return candidate;
+	}
+	return "N";
+}
+/**
+* Lead used when a label is placed directly on a pin: labels hang off a short wire in the pin's
+* outward direction instead of sitting on the pin itself.
+*/
+function labelStubAt(context, point) {
+	const hit = context.controller.hitTest(point, {
+		tolerance: context.tolerance * 2,
+		includeSymbols: false
+	});
+	if (hit?.kind !== "pin") return;
+	const pin = pinPosition(context, hit);
+	const direction = pinOutward(context, hit);
+	if (pin === void 0 || direction === void 0) return;
+	const dx = Math.round(direction.x);
+	const dy = Math.round(direction.y);
+	const anchor = {
+		x: pin.x + dx * 20,
+		y: pin.y + dy * 20
+	};
+	return {
+		pin,
+		anchor,
+		rotation: dx > 0 ? 0 : dx < 0 ? 180 : dy > 0 ? 90 : 270,
+		...stubWire(context, pin, anchor)
+	};
+}
+/** The lead only has to be drawn where no wire already runs; labels bind to any wire they touch. */
+function stubWire(context, pin, anchor) {
+	return context.controller.hitTest(anchor, {
+		includeSymbols: false,
+		tolerance: context.tolerance
+	})?.kind === "wire" ? {} : { wire: [pin, anchor] };
+}
+/** Unit vector, in world space, pointing away from the symbol body at a pin. */
+function pinOutward(context, hit) {
+	const symbol = context.controller.document.sheet.symbols.find((item) => item.id === hit.symbolId);
+	const reference = symbol === void 0 ? void 0 : parseDeviceReference(symbol.device);
+	const definition = reference === void 0 ? void 0 : context.devices?.getDeviceSymbol(reference);
+	const anchor = definition?.pins[hit.pinId];
+	if (symbol === void 0 || definition === void 0 || anchor === void 0) return;
+	const side = pinSide(anchor, definition.bounds ?? pinsBounds(definition.pins));
+	const local = side === "left" ? {
+		x: -1,
+		y: 0
+	} : side === "right" ? {
+		x: 1,
+		y: 0
+	} : side === "top" ? {
+		x: 0,
+		y: -1
+	} : side === "bottom" ? {
+		x: 0,
+		y: 1
+	} : void 0;
+	return local === void 0 ? void 0 : rotatePoint(local, symbol.rotation);
+}
+/** Extra properties written when a placement inserts a builtin symbol. */
+function placementProperties(device) {
+	return isTextDevice(device) ? { text: DEFAULT_TEXT_CONTENT } : void 0;
+}
+//#endregion
+//#region src/editor/interactions/placement.ts
+/** Device the next click inserts: the host's armed device wins over the toolbar tool. */
+function placementDevice(context) {
+	const armed = context.deps.controller.placingDevice;
+	if (armed !== void 0) return armed;
+	const tool = context.deps.controller.tool;
+	return isPlacementTool(tool) ? toolDevice(tool) : void 0;
+}
+/** Lead a label placement adds when the pointer is on a pin. */
+function labelStub(context, device, point) {
+	return device === LABEL_DEVICE ? labelStubAt(context.pointer.snapContext(), point) : void 0;
+}
+/** Ghost rotation: the pin lead picks a readable angle unless the user rotated it. */
+function placeRotation(context, stub) {
+	return context.state.placementRotation === 0 && stub !== void 0 ? stub.rotation : context.state.placementRotation;
+}
+/** Ghost shown while a placement tool or armed device follows the pointer. */
+function placementPreview(context) {
+	const device = placementDevice(context);
+	const cursor = context.state.cursorPoint;
+	if (cursor === void 0 || device === void 0) return;
+	const stub = labelStub(context, device, cursor);
+	return {
+		device,
+		position: stub?.anchor ?? cursor,
+		rotation: placeRotation(context, stub),
+		...stub?.wire === void 0 ? {} : { wire: stub.wire }
+	};
+}
+/** Rotates the ghost while a placement tool is active. */
+function rotatePlacement(context, degrees) {
+	if (placementDevice(context) === void 0) return false;
+	context.state.placementRotation = ((context.state.placementRotation + degrees) % 360 + 360) % 360;
+	context.deps.onChange();
+	return true;
+}
+/** Places the armed device at `page`. */
+function place(context, page) {
+	const controller = context.deps.controller;
+	const device = placementDevice(context);
+	if (device === void 0 || context.deps.readOnly) return;
+	const role = symbolRole(device);
+	const snapped = role === "component" ? snapToGrid(page, controller.display) : context.pointer.snapWire(page);
+	const stub = labelStub(context, device, snapped);
+	const point = stub?.anchor ?? snapped;
+	const properties = placementProperties(device);
+	const designator = role === "component" ? controller.nextDesignator(device) : void 0;
+	context.deps.run(() => controller.transaction(() => {
+		if (stub?.wire !== void 0) controller.addWire(stub.wire);
+		controller.dispatch({
+			type: "add-symbol",
+			...device === LABEL_DEVICE ? { net: nextNetName(controller.document) } : {},
+			...designator === void 0 ? {} : { designator },
+			device,
+			x: point.x,
+			y: point.y,
+			rotation: placeRotation(context, stub),
+			...properties === void 0 ? {} : { properties }
+		});
+	}));
+	controller.setTool("select");
+	context.state.cursorPoint = void 0;
+	context.state.placementRotation = 0;
+}
+/** Snapping applied to the placement ghost so it matches where the click will land. */
+function snapPlacementPoint(context, page, device) {
+	return symbolRole(device) === "component" ? snapToGrid(page, context.deps.controller.display) : context.pointer.snapWire(page);
+}
+//#endregion
+//#region src/editor/selection-box.ts
+function rectOf(from, to) {
+	return {
+		x: Math.min(from.x, to.x),
+		y: Math.min(from.y, to.y),
+		width: Math.abs(to.x - from.x),
+		height: Math.abs(to.y - from.y)
+	};
+}
+function pointInRect(point, rect) {
+	return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}
+function rectsIntersect(left, right) {
+	return left.x + left.width >= right.x && left.x <= right.x + right.width && left.y + left.height >= right.y && left.y <= right.y + right.height;
+}
+/** Everything touched by the rubber-band rectangle. */
+function marqueeSelection(document, rect, devices) {
+	if (rect.width === 0 && rect.height === 0) return [];
+	const result = [];
+	for (const symbol of document.sheet.symbols) if (rectsIntersect(symbolRect(symbol, devices), rect)) result.push({
+		kind: "symbol",
+		id: symbol.id
+	});
+	for (const wire of document.sheet.wires) if (wire.points.some((point) => pointInRect(point, rect))) result.push({
+		kind: "wire",
+		id: wire.id
+	});
+	for (const junction of document.sheet.junctions) if (pointInRect({
+		x: junction.x,
+		y: junction.y
+	}, rect)) result.push({
+		kind: "junction",
+		id: junction.id
+	});
+	return result;
+}
+function symbolRect(symbol, devices) {
+	const reference = parseDeviceReference(symbol.device);
+	const definition = reference === void 0 ? void 0 : devices?.getDeviceSymbol(reference);
+	return (definition === void 0 ? void 0 : symbolBounds(symbol, definition.bounds, definition.pins)) ?? {
+		x: symbol.x,
+		y: symbol.y,
+		width: 0,
+		height: 0
+	};
+}
+//#endregion
+//#region src/editor/interactions/selection.ts
+/** Selection under the pointer: vertices win over wire bodies, then pins/anchors/symbols. */
+function selectionAt(context, page) {
+	const vertex = vertexAt(context, page);
+	if (vertex !== void 0) return vertex;
+	const hit = context.deps.controller.hitTest(page, { tolerance: context.pointer.tolerance() });
+	return hit === void 0 ? void 0 : selectionFromHit(hit);
+}
+function vertexAt(context, page) {
+	const tolerance = context.pointer.tolerance();
+	for (const wire of context.deps.controller.document.sheet.wires) for (let index = 0; index < wire.points.length; index += 1) {
+		const point = wire.points[index];
+		if (point === void 0) continue;
+		if (Math.abs(point.x - page.x) <= tolerance && Math.abs(point.y - page.y) <= tolerance) return {
+			kind: "vertex",
+			wireId: wire.id,
+			index
+		};
+	}
+}
+/** True when the pointer is over a builtin annotation (label / power / ground / text). */
+function annotationSymbolAt(context, page) {
+	const hit = context.deps.controller.hitTest(page, { tolerance: context.pointer.tolerance() });
+	if (hit?.kind !== "symbol") return false;
+	const symbol = context.deps.controller.document.sheet.symbols.find((item) => item.id === hit.id);
+	return symbol !== void 0 && symbolRole(symbol.device) !== "component";
+}
+/** Applies a click selection, honouring additive (shift) clicks. */
+function selectItem(context, selection, additive) {
+	const controller = context.deps.controller;
+	if (selection === void 0) {
+		controller.setSelection(additive ? controller.selection : []);
+		return;
+	}
+	const current = controller.selection;
+	const exists = current.some((item) => sameSelectionItem(item, selection));
+	if (!additive) {
+		controller.setSelection([selection]);
+		return;
+	}
+	controller.setSelection(exists ? current.filter((item) => !sameSelectionItem(item, selection)) : [...current, selection]);
+}
+/** Commits a rubber-band selection. */
+function finishMarquee(context, origin, current) {
+	context.deps.controller.setSelection(marqueeSelection(context.deps.controller.document, rectOf(origin, current), context.deps.devices));
+}
+function selectionFromHit(hit) {
+	switch (hit.kind) {
+		case "symbol": return {
+			kind: "symbol",
+			id: hit.id
+		};
+		case "reference": return {
+			kind: "reference",
+			symbolId: hit.symbolId
+		};
+		case "wire": return {
+			kind: "wire",
+			id: hit.id
+		};
+		case "junction": return {
+			kind: "junction",
+			id: hit.id
+		};
+		case "pin": return {
+			kind: "symbol",
+			id: hit.symbolId
+		};
+		default: return;
+	}
+}
+function sameHit(left, right) {
+	if (left === void 0 || right === void 0) return left === right;
+	return JSON.stringify(left) === JSON.stringify(right);
+}
+//#endregion
+//#region src/editor/interactions/wire.ts
+/** Adds the next waypoint of the wire being drawn, closing the run on a connection. */
+function addWirePoint(context, page) {
+	const state = context.state;
+	const point = context.pointer.snapWire(page);
+	const previous = state.pendingWire[state.pendingWire.length - 1];
+	state.pendingWire = [...state.pendingWire, ...previous === void 0 ? [point] : wireWaypoints(previous, point, context.pointer.hostAxisAt(point))];
+	state.cursorPoint = point;
+	const node = connectionNodeAt(context.pointer.snapContext(), point);
+	const host = context.deps.controller.hitTest(point, {
+		includeSymbols: false,
+		tolerance: context.pointer.tolerance()
+	});
+	if ((node !== void 0 || host?.kind === "wire") && state.pendingWire.length >= 2) {
+		finishWire(context);
+		context.deps.controller.setTool("select");
+		return;
+	}
+	context.deps.onChange();
+}
+/** Commits the pending wire as one edit; nothing is written in read-only mode. */
+function finishWire(context) {
+	const points = context.state.pendingWire;
+	context.state.pendingWire = [];
+	context.state.cursorPoint = void 0;
+	context.state.hover = void 0;
+	if (points.length < 2 || context.deps.readOnly) {
+		context.deps.onChange();
+		return;
+	}
+	context.deps.run(() => context.deps.controller.addWire(points));
+}
+/** Pending wire plus the live cursor leg, for the dashed preview. */
+function pendingWireWithCursor(context) {
+	const state = context.state;
+	const cursor = state.cursorPoint;
+	if (cursor === void 0) return state.pendingWire;
+	const previous = state.pendingWire[state.pendingWire.length - 1];
+	if (previous === void 0) return [cursor];
+	return [...state.pendingWire, ...wireWaypoints(previous, cursor, context.pointer.hostAxisAt(cursor))];
+}
+/** Clicking a pin or wire end in select mode starts a wire from there. */
+function startWireAtNode(context, page) {
+	const controller = context.deps.controller;
+	if (controller.tool !== "select" || context.deps.readOnly) return false;
+	if (annotationSymbolAt(context, page)) return false;
+	const node = connectionNodeAt(context.pointer.snapContext(), page);
+	if (node === void 0) return false;
+	controller.setTool("wire");
+	context.state.pendingWire = [node];
+	context.state.cursorPoint = node;
+	context.deps.onChange();
+	return true;
+}
+//#endregion
+//#region src/editor/interactions/keyboard.ts
+/**
+* Cancels whatever interaction is pending: placement, the wire being drawn, a drag or the active
+* tool, and clears the selection. Returns whether there was anything to cancel.
+*/
+function cancelInteraction(context) {
+	const controller = context.deps.controller;
+	if (!(controller.placingDevice !== void 0 || controller.tool !== "select" || controller.selection.length > 0 || context.state.pendingWire.length > 0 || context.state.drag !== void 0)) return false;
+	if (controller.placingDevice !== void 0) controller.cancelPlacement();
+	context.state.reset();
+	controller.setSelection([]);
+	controller.setTool("select");
+	context.deps.onChange();
+	return true;
+}
+/** Keyboard shortcuts; the canvas keeps focus, so the root element owns the listener. */
+function handleKeyDown(context, event) {
+	const controller = context.deps.controller;
+	const readOnly = context.deps.readOnly;
+	if (event.key === " ") {
+		event.preventDefault();
+		if (rotatePlacement(context, 90)) return;
+		if (!readOnly) context.deps.run(() => controller.rotateSelection(90));
+		return;
+	}
+	if (event.key === "Escape") {
+		cancelInteraction(context);
+		return;
+	}
+	if (event.key === "Enter") {
+		if (controller.tool === "wire") finishWire(context);
+		return;
+	}
+	if (event.key === "Backspace" && controller.tool === "wire" && context.state.pendingWire.length > 0) {
+		event.preventDefault();
+		context.state.pendingWire = context.state.pendingWire.slice(0, -1);
+		context.deps.onChange();
+		return;
+	}
+	if (event.key === "Delete" || event.key === "Backspace") {
+		event.preventDefault();
+		if (!readOnly) context.deps.run(() => controller.deleteSelection());
+		return;
+	}
+	if (event.key === "r" || event.key === "R") {
+		if (!readOnly) context.deps.run(() => controller.rotateSelection(90));
+		return;
+	}
+	if (event.key === "f" || event.key === "F") {
+		context.deps.onFit();
+		return;
+	}
+	if ((event.ctrlKey || event.metaKey) && (event.key === "z" || event.key === "Z")) {
+		event.preventDefault();
+		if (readOnly) return;
+		if (event.shiftKey) controller.redo();
+		else controller.undo();
+		return;
+	}
+	if ((event.ctrlKey || event.metaKey) && (event.key === "y" || event.key === "Y")) {
+		event.preventDefault();
+		if (readOnly) return;
+		controller.redo();
+		return;
+	}
+	if (readOnly) return;
+	const step = controller.display.gridSize > 0 ? controller.display.gridSize : 1;
+	const distance = event.shiftKey ? step * 10 : step;
+	const delta = {
+		ArrowLeft: {
+			x: -distance,
+			y: 0
+		},
+		ArrowRight: {
+			x: distance,
+			y: 0
+		},
+		ArrowUp: {
+			x: 0,
+			y: -distance
+		},
+		ArrowDown: {
+			x: 0,
+			y: distance
+		}
+	}[event.key];
+	if (delta !== void 0) {
+		event.preventDefault();
+		context.deps.run(() => controller.moveSelectionBy(delta.x, delta.y));
+	}
+}
+//#endregion
+//#region src/editor/interactions/move.ts
+/** Starts dragging a symbol; the grid is applied where it lands, not to the pointer delta. */
+function beginMoveDrag(context, page, symbolId) {
+	const symbol = context.deps.controller.document.sheet.symbols.find((item) => item.id === symbolId);
+	context.state.drag = {
+		mode: "move",
+		origin: page,
+		anchor: symbol === void 0 ? page : {
+			x: symbol.x,
+			y: symbol.y
+		},
+		offset: {
+			x: 0,
+			y: 0
+		}
+	};
+	return true;
+}
+function beginReferenceDrag(context, page, symbolId) {
+	const symbol = context.deps.controller.document.sheet.symbols.find((item) => item.id === symbolId);
+	if (symbol === void 0) return false;
+	const start = referenceWorldPosition(context, symbol);
+	context.state.drag = {
+		mode: "reference",
+		symbolId: symbol.id,
+		start,
+		origin: page,
+		position: start
+	};
+	return true;
+}
+/** Updates an in-flight move drag; returns `true` when this drag is the active one. */
+function updateMoveDrag(context, page) {
+	const drag = context.state.drag;
+	if (drag?.mode !== "move") return false;
+	const next = snapDragOffset(drag.anchor, drag.origin, page, context.deps.controller.display);
+	if (next.x !== drag.offset.x || next.y !== drag.offset.y) {
+		context.state.drag = {
+			...drag,
+			offset: next
+		};
+		context.deps.onChange();
+	}
+	return true;
+}
+function updateReferenceDrag(context, page) {
+	const drag = context.state.drag;
+	if (drag?.mode !== "reference") return false;
+	context.state.drag = {
+		...drag,
+		position: {
+			x: drag.start.x + (page.x - drag.origin.x),
+			y: drag.start.y + (page.y - drag.origin.y)
+		}
+	};
+	context.deps.onChange();
+	return true;
+}
+/** Commits a finished move drag; returns whether an edit was recorded. */
+function finishMoveDrag(context, drag) {
+	if (drag.offset.x === 0 && drag.offset.y === 0) return false;
+	const { offset } = drag;
+	context.deps.run(() => context.deps.controller.moveSelectionBy(offset.x, offset.y));
+	return true;
+}
+function finishReferenceDrag(context, drag) {
+	const dx = drag.position.x - drag.start.x;
+	const dy = drag.position.y - drag.start.y;
+	if (dx === 0 && dy === 0) return false;
+	context.deps.run(() => context.deps.controller.moveReferenceBy(drag.symbolId, dx, dy));
+	return true;
+}
+/** World position of the reference designator of `symbol`, used as the drag anchor. */
+function referenceWorldPosition(context, symbol) {
+	const reference = parseDeviceReference(symbol.device);
+	const definition = reference === void 0 ? void 0 : context.deps.devices?.getDeviceSymbol(reference);
+	return referencePosition(symbol, definition?.bounds, symbol.reference);
+}
+//#endregion
+//#region src/editor/interactions/pointer.ts
+/** Screen-space geometry of the canvas: event → page coordinates, hit tolerance and snapping. */
+var Pointer = class {
+	#deps;
+	constructor(deps) {
+		this.#deps = deps;
+	}
+	viewport() {
+		return this.#deps.viewport.state;
+	}
+	screen(event) {
+		const rect = this.#deps.canvas.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	}
+	page(event) {
+		return screenToPage(this.viewport(), this.screen(event));
+	}
+	/** Hit tolerance in page units, so it stays constant on screen while zooming. */
+	tolerance() {
+		return 6 / this.viewport().scale;
+	}
+	snapContext() {
+		return {
+			controller: this.#deps.controller,
+			devices: this.#deps.devices,
+			tolerance: this.tolerance()
+		};
+	}
+	snapWire(point) {
+		return snapForWire(this.snapContext(), point);
+	}
+	/** Orientation of the existing wire under `point`, so a branch can approach it perpendicularly. */
+	hostAxisAt(point) {
+		const hit = this.#deps.controller.hitTest(point, {
+			includeSymbols: false,
+			tolerance: this.tolerance()
+		});
+		if (hit?.kind !== "wire") return;
+		const wire = this.#deps.controller.document.sheet.wires.find((item) => item.id === hit.id);
+		const a = wire?.points[hit.segment];
+		const b = wire?.points[hit.segment + 1];
+		if (a === void 0 || b === void 0) return;
+		return a.y === b.y ? "horizontal" : a.x === b.x ? "vertical" : void 0;
+	}
+};
+//#endregion
+//#region src/editor/interactions/segment.ts
+/** Starts dragging a wire segment; the moved run is snapped so it lands on grid lines. */
+function beginSegmentDrag(context, page, wireId) {
+	const hit = context.deps.controller.hitTest(page, {
+		includeSymbols: false,
+		tolerance: context.pointer.tolerance()
+	});
+	if (hit?.kind !== "wire" || hit.id !== wireId) return false;
+	context.state.drag = {
+		mode: "segment",
+		wireId: hit.id,
+		segment: hit.segment,
+		origin: page,
+		delta: {
+			x: 0,
+			y: 0
+		}
+	};
+	return true;
+}
+/** Updates an in-flight segment drag; returns `true` when this drag is the active one. */
+function updateSegmentDrag(context, page) {
+	const drag = context.state.drag;
+	if (drag?.mode !== "segment") return false;
+	const wire = context.deps.controller.document.sheet.wires.find((item) => item.id === drag.wireId);
+	const start = wire?.points[drag.segment];
+	const end = wire?.points[drag.segment + 1];
+	if (wire === void 0 || start === void 0 || end === void 0) return true;
+	const horizontal = start.y === end.y;
+	const target = snapToGrid(horizontal ? {
+		x: start.x,
+		y: start.y + (page.y - drag.origin.y)
+	} : {
+		x: start.x + (page.x - drag.origin.x),
+		y: start.y
+	}, context.deps.controller.display);
+	const candidate = horizontal ? {
+		x: 0,
+		y: target.y - start.y
+	} : {
+		x: target.x - start.x,
+		y: 0
+	};
+	if (candidate.x !== drag.delta.x || candidate.y !== drag.delta.y) {
+		context.state.drag = {
+			...drag,
+			delta: candidate
+		};
+		context.deps.onChange();
+	}
+	return true;
+}
+/** Commits a finished segment drag; returns whether an edit was recorded. */
+function finishSegmentDrag(context, drag) {
+	if (drag.delta.x === 0 && drag.delta.y === 0) return false;
+	context.deps.run(() => context.deps.controller.moveWireSegment(drag.wireId, drag.segment, drag.delta));
+	return true;
+}
+/** Wire preview for the renderer, plus the orientation helper used by the wire tool. */
+function wirePreview(context) {
+	const drag = context.state.drag;
+	if (drag?.mode !== "segment") return;
+	const points = context.deps.controller.previewWireSegment(drag.wireId, drag.segment, drag.delta);
+	return points === void 0 ? void 0 : {
+		wireId: drag.wireId,
+		points
+	};
+}
+//#endregion
+//#region src/editor/interactions/state.ts
+/**
+* Transient interaction state owned by the canvas. Nothing here belongs in the document, so the
+* controller never sees hovers, in-progress wires or previews.
+*/
+var InteractionState = class {
+	hover;
+	drag;
+	pendingWire = [];
+	cursorPoint;
+	placementRotation = 0;
+	get marquee() {
+		return this.drag?.mode === "marquee" ? rectOf(this.drag.origin, this.drag.current) : void 0;
+	}
+	/** Live offset of the symbols being dragged. */
+	get dragOffset() {
+		if (this.drag?.mode !== "move") return;
+		const { offset } = this.drag;
+		return offset.x === 0 && offset.y === 0 ? void 0 : offset;
+	}
+	/** Reference designator being dragged, in world coordinates. */
+	get referencePreview() {
+		return this.drag?.mode === "reference" ? {
+			symbolId: this.drag.symbolId,
+			position: this.drag.position
+		} : void 0;
+	}
+	/** Drops the interaction in progress; called when the tool changes or an edit is cancelled. */
+	reset() {
+		this.pendingWire = [];
+		this.cursorPoint = void 0;
+		this.placementRotation = 0;
+		this.drag = void 0;
+	}
+};
+//#endregion
+//#region src/editor/interactions/input.ts
+/**
+* Pointer and keyboard state machine: panning, rubber-band selection, wire drawing, placement
+* previews and shortcuts. It owns the transient interaction state and delegates to the modules
+* under `interactions/`, which never touch the DOM directly.
+*/
+var EditorInput = class {
+	#context;
+	#detached = false;
+	constructor(deps) {
+		this.#context = {
+			deps,
+			state: new InteractionState(),
+			pointer: new Pointer({
+				controller: deps.controller,
+				devices: deps.devices,
+				viewport: deps.viewport,
+				canvas: deps.canvas
+			})
+		};
+	}
+	get hover() {
+		return this.#context.state.hover;
+	}
+	get pendingWire() {
+		return this.#context.state.pendingWire;
+	}
+	get cursorPoint() {
+		return this.#context.state.cursorPoint;
+	}
+	get marquee() {
+		return this.#context.state.marquee;
+	}
+	/** Live offset of the symbols being dragged. */
+	get dragOffset() {
+		return this.#context.state.dragOffset;
+	}
+	/** Wire being reshaped by a segment drag, so the renderer can show it before the commit. */
+	get wirePreview() {
+		return wirePreview(this.#context);
+	}
+	/** Reference designator being dragged, in world coordinates. */
+	get referencePreview() {
+		return this.#context.state.referencePreview;
+	}
+	/** Placement ghost for the current tool or armed device, if the pointer is inside the canvas. */
+	get placementPreview() {
+		return placementPreview(this.#context);
+	}
+	get pendingWireWithCursor() {
+		return pendingWireWithCursor(this.#context);
+	}
+	/** Rotates the ghost while a placement tool is active. */
+	rotatePlacement(degrees) {
+		return rotatePlacement(this.#context, degrees);
+	}
+	/** Drops the in-progress wire; called when the tool changes. */
+	resetTransient() {
+		this.#context.state.reset();
+	}
+	attach() {
+		const { canvas, root } = this.#context.deps;
+		canvas.addEventListener("pointerdown", this.#onPointerDown);
+		canvas.addEventListener("pointermove", this.#onPointerMove);
+		canvas.addEventListener("pointerup", this.#onPointerUp);
+		canvas.addEventListener("pointercancel", this.#onPointerUp);
+		canvas.addEventListener("pointerleave", this.#onPointerLeave);
+		canvas.addEventListener("wheel", this.#onWheel, { passive: false });
+		canvas.addEventListener("dblclick", this.#onDoubleClick);
+		canvas.addEventListener("contextmenu", this.#onContextMenu);
+		root.addEventListener("keydown", this.#onKeyDown);
+		root.addEventListener("keyup", this.#onKeyUp);
+		root.ownerDocument.addEventListener("keydown", this.#onDocumentKeyDown);
+	}
+	detach() {
+		if (this.#detached) return;
+		this.#detached = true;
+		const { canvas, root } = this.#context.deps;
+		canvas.removeEventListener("pointerdown", this.#onPointerDown);
+		canvas.removeEventListener("pointermove", this.#onPointerMove);
+		canvas.removeEventListener("pointerup", this.#onPointerUp);
+		canvas.removeEventListener("pointercancel", this.#onPointerUp);
+		canvas.removeEventListener("pointerleave", this.#onPointerLeave);
+		canvas.removeEventListener("wheel", this.#onWheel);
+		canvas.removeEventListener("dblclick", this.#onDoubleClick);
+		canvas.removeEventListener("contextmenu", this.#onContextMenu);
+		root.removeEventListener("keydown", this.#onKeyDown);
+		root.removeEventListener("keyup", this.#onKeyUp);
+		root.ownerDocument.removeEventListener("keydown", this.#onDocumentKeyDown);
+	}
+	#onPointerDown = (event) => {
+		const { deps, state, pointer } = this.#context;
+		deps.root.focus();
+		const screen = pointer.screen(event);
+		const page = pointer.page(event);
+		if (event.button === 1) {
+			event.preventDefault();
+			state.drag = {
+				mode: "pan",
+				lastX: screen.x,
+				lastY: screen.y
+			};
+			deps.canvas.setPointerCapture(event.pointerId);
+			return;
+		}
+		if (event.button !== 0) return;
+		if (deps.controller.tool === "wire" && !deps.readOnly) {
+			addWirePoint(this.#context, page);
+			return;
+		}
+		if (!deps.readOnly && placementDevice(this.#context) !== void 0) {
+			place(this.#context, page);
+			return;
+		}
+		if (startWireAtNode(this.#context, page)) return;
+		const selection = selectionAt(this.#context, page);
+		if (selection === void 0) {
+			selectItem(this.#context, void 0, event.shiftKey);
+			state.drag = {
+				mode: "marquee",
+				origin: page,
+				current: page
+			};
+			deps.canvas.setPointerCapture(event.pointerId);
+			deps.onChange();
+			return;
+		}
+		selectItem(this.#context, selection, event.shiftKey);
+		if (!deps.readOnly) {
+			if (beginDragFor(this.#context, page, selection)) deps.canvas.setPointerCapture(event.pointerId);
+		}
+		deps.onChange();
+	};
+	#onPointerMove = (event) => {
+		const { deps, state, pointer } = this.#context;
+		const screen = pointer.screen(event);
+		const page = pointer.page(event);
+		if (state.drag?.mode === "pan") {
+			deps.viewport.pan(screen.x - state.drag.lastX, screen.y - state.drag.lastY);
+			state.drag = {
+				mode: "pan",
+				lastX: screen.x,
+				lastY: screen.y
+			};
+			deps.onChange();
+			return;
+		}
+		if (state.drag?.mode === "marquee") {
+			state.drag = {
+				mode: "marquee",
+				origin: state.drag.origin,
+				current: page
+			};
+			deps.onChange();
+			return;
+		}
+		if (updateMoveDrag(this.#context, page)) return;
+		if (updateReferenceDrag(this.#context, page)) return;
+		if (updateSegmentDrag(this.#context, page)) return;
+		const device = placementDevice(this.#context);
+		if (deps.controller.tool === "wire") {
+			state.cursorPoint = pointer.snapWire(page);
+			deps.onChange();
+			return;
+		}
+		if (device !== void 0) {
+			state.cursorPoint = snapPlacementPoint(this.#context, page, device);
+			deps.onChange();
+			return;
+		}
+		const next = deps.controller.hitTest(page, { tolerance: pointer.tolerance() });
+		if (!sameHit(next, state.hover)) {
+			state.hover = next;
+			deps.onChange();
+		}
+	};
+	#onPointerUp = (event) => {
+		const { deps, state } = this.#context;
+		const drag = state.drag;
+		state.drag = void 0;
+		if (deps.canvas.hasPointerCapture(event.pointerId)) deps.canvas.releasePointerCapture(event.pointerId);
+		if (drag?.mode === "marquee") {
+			finishMarquee(this.#context, drag.origin, drag.current);
+			return;
+		}
+		if (drag?.mode === "move") {
+			if (!finishMoveDrag(this.#context, drag)) deps.onChange();
+			return;
+		}
+		if (drag?.mode === "reference") {
+			if (!finishReferenceDrag(this.#context, drag)) deps.onChange();
+			return;
+		}
+		if (drag?.mode === "segment") {
+			if (!finishSegmentDrag(this.#context, drag)) deps.onChange();
+			return;
+		}
+		if (drag !== void 0) deps.onChange();
+	};
+	#onPointerLeave = () => {
+		const { deps, state } = this.#context;
+		if (state.hover !== void 0 && state.drag === void 0) {
+			state.hover = void 0;
+			deps.onChange();
+		}
+	};
+	#onWheel = (event) => {
+		const { deps, pointer } = this.#context;
+		event.preventDefault();
+		deps.viewport.zoomAt(pointer.screen(event), event.deltaY < 0 ? 1.1 : 1 / 1.1);
+		deps.onChange();
+	};
+	#onDoubleClick = (event) => {
+		const { deps, pointer } = this.#context;
+		if (deps.controller.tool === "wire") {
+			finishWire(this.#context);
+			return;
+		}
+		const page = pointer.page(event);
+		const hit = deps.controller.hitTest(page, { tolerance: pointer.tolerance() });
+		const selection = hit === void 0 ? void 0 : selectionFromHit(hit);
+		if (selection !== void 0) deps.controller.setSelection([selection]);
+	};
+	#onContextMenu = (event) => {
+		event.preventDefault();
+	};
+	#onKeyDown = (event) => {
+		handleKeyDown(this.#context, event);
+	};
+	#onKeyUp = () => {};
+	/**
+	* Esc fallback for hosts that arm placement from their own UI: the event may never reach the
+	* editor root, so listen on the document while an interaction is pending.
+	*/
+	#onDocumentKeyDown = (event) => {
+		const { deps } = this.#context;
+		if (event.key !== "Escape" || event.defaultPrevented) return;
+		if (deps.root.contains(event.target)) return;
+		if (cancelInteraction(this.#context)) event.preventDefault();
+	};
+};
+function beginDragFor(context, page, selection) {
+	switch (selection.kind) {
+		case "symbol": return beginMoveDrag(context, page, selection.id);
+		case "reference": return beginReferenceDrag(context, page, selection.symbolId);
+		case "wire": return beginSegmentDrag(context, page, selection.id);
+		default: return false;
+	}
+}
+//#endregion
+//#region src/editor/scene-input.ts
+/** Translates controller selections into the flat sets the scene builder expects. */
+function toSceneHighlight(selection) {
+	const symbols = /* @__PURE__ */ new Set();
+	const wires = /* @__PURE__ */ new Set();
+	const junctions = /* @__PURE__ */ new Set();
+	const vertices = [];
+	for (const item of selection) switch (item.kind) {
+		case "symbol":
+			symbols.add(item.id);
+			break;
+		case "wire":
+			wires.add(item.id);
+			break;
+		case "junction":
+			junctions.add(item.id);
+			break;
+		case "vertex":
+			wires.add(item.wireId);
+			vertices.push({
+				wireId: item.wireId,
+				index: item.index
+			});
+	}
+	return {
+		symbols,
+		wires,
+		junctions,
+		vertices
+	};
+}
+//#endregion
+//#region src/styles/index.ts
+/** Editor chrome styles, injected as a single `<style>` element inside the editor root. */
+var EDITOR_STYLES = ".mica-schematic {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--mica-schematic-background);\n  color: var(--mica-schematic-ui-text);\n  font: 12px/1.45 var(--mica-schematic-font-family);\n  outline: none;\n}\n\n.mica-schematic__canvas-host {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.mica-schematic__canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n  touch-action: none;\n}\n\n/* Floating tool strip; the editor owns it so the canvas stays usable without a host toolbar. */\n.mica-schematic__toolbar {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 1;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  padding: 3px;\n  border: 1px solid var(--mica-schematic-ui-border);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--mica-schematic-ui-surface) 88%, transparent);\n  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);\n  backdrop-filter: blur(6px);\n}\n\n.mica-schematic--no-toolbar .mica-schematic__toolbar {\n  display: none;\n}\n\n.mica-schematic__tool {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 24px;\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--mica-schematic-ui-muted-text);\n  font: inherit;\n  cursor: pointer;\n}\n\n.mica-schematic__tool:hover:not(:disabled) {\n  color: var(--mica-schematic-ui-text);\n  background: var(--mica-schematic-ui-border);\n}\n\n.mica-schematic__tool[aria-pressed='true'] {\n  background: var(--mica-schematic-ui-accent);\n  color: var(--mica-schematic-ui-accent-text);\n}\n\n.mica-schematic__tool:focus-visible {\n  outline: 2px solid var(--mica-schematic-focus-ring);\n  outline-offset: 1px;\n}\n\n.mica-schematic__tool:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n";
+//#endregion
+//#region src/editor/icons.ts
+/** Toolbar entries, in display order. */
+var TOOL_ICONS = [
+	{
+		tool: "select",
+		label: "选择",
+		segments: ["M4 2.5 L4 12.5 L6.6 10.1 L8.4 13.5 L10 12.7 L8.2 9.4 L11.8 9.4 Z"],
+		dots: []
+	},
+	{
+		tool: "wire",
+		label: "导线",
+		segments: ["M3.5 12.5 L12.5 3.5"],
+		dots: [[3.5, 12.5], [12.5, 3.5]]
+	},
+	{
+		tool: "power",
+		label: "电源",
+		segments: ["M8 14 V6", "M4 6 H12"],
+		dots: [[8, 14]]
+	},
+	{
+		tool: "ground",
+		label: "地",
+		segments: [
+			"M8 3 V8",
+			"M3.5 8 H12.5",
+			"M5.5 11 H10.5",
+			"M7 14 H9"
+		],
+		dots: [[8, 3]]
+	},
+	{
+		tool: "label",
+		label: "网络标签",
+		segments: ["M8 4 V12", "M4.5 8 L8 4 L11.5 8"],
+		dots: [[8, 12]]
+	},
+	{
+		tool: "text",
+		label: "文本",
+		segments: ["M4 4 H12", "M8 4 V12"],
+		dots: []
+	}
+];
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function createToolIcon(doc, icon) {
+	const svg = doc.createElementNS(SVG_NAMESPACE, "svg");
+	svg.setAttribute("viewBox", "0 0 16 16");
+	svg.setAttribute("width", "16");
+	svg.setAttribute("height", "16");
+	svg.setAttribute("fill", "none");
+	svg.setAttribute("stroke", "currentColor");
+	svg.setAttribute("stroke-width", "1.4");
+	svg.setAttribute("stroke-linecap", "round");
+	svg.setAttribute("stroke-linejoin", "round");
+	svg.setAttribute("aria-hidden", "true");
+	for (const d of icon.segments) {
+		const path = doc.createElementNS(SVG_NAMESPACE, "path");
+		path.setAttribute("d", d);
+		svg.append(path);
+	}
+	for (const [cx, cy] of icon.dots) {
+		const circle = doc.createElementNS(SVG_NAMESPACE, "circle");
+		circle.setAttribute("cx", String(cx));
+		circle.setAttribute("cy", String(cy));
+		circle.setAttribute("r", "1.5");
+		circle.setAttribute("fill", "currentColor");
+		circle.setAttribute("stroke", "none");
+		svg.append(circle);
+	}
+	return svg;
+}
+//#endregion
+//#region src/editor/shell.ts
+/** Builds the canvas surface and the floating tool strip; it owns no behaviour beyond wiring. */
+function createShell(options) {
+	const doc = options.document;
+	const root = doc.createElement("div");
+	root.className = "mica-schematic";
+	root.tabIndex = 0;
+	const style = doc.createElement("style");
+	style.textContent = EDITOR_STYLES;
+	const canvasHost = doc.createElement("div");
+	canvasHost.className = "mica-schematic__canvas-host";
+	const canvas = doc.createElement("canvas");
+	canvas.className = "mica-schematic__canvas";
+	canvasHost.append(canvas);
+	root.append(style, canvasHost);
+	const toolButtons = /* @__PURE__ */ new Map();
+	if (options.toolbar) {
+		const toolbar = doc.createElement("div");
+		toolbar.className = "mica-schematic__toolbar";
+		for (const icon of TOOL_ICONS) {
+			const button = doc.createElement("button");
+			button.type = "button";
+			button.className = "mica-schematic__tool";
+			button.title = icon.label;
+			button.setAttribute("aria-label", icon.label);
+			button.disabled = options.readOnly;
+			button.append(createToolIcon(doc, icon));
+			button.addEventListener("click", () => options.onToolClick(icon.tool));
+			toolButtons.set(icon.tool, button);
+			toolbar.append(button);
+		}
+		root.append(toolbar);
+	} else root.classList.add("mica-schematic--no-toolbar");
+	return {
+		root,
+		canvasHost,
+		canvas,
+		toolButtons,
+		setToolActive(tool) {
+			for (const [candidate, button] of toolButtons) button.setAttribute("aria-pressed", String(candidate === tool));
+		}
+	};
+}
+//#endregion
+//#region src/editor/viewport-state.ts
+/**
+* Owns the viewport and the "auto fit until the user takes over" rule.
+* An empty canvas keeps refitting while the container resizes.
+*/
+var EditorViewport = class {
+	#state = IDENTITY_VIEWPORT;
+	#autoFit = true;
+	#limits;
+	constructor(limits = DEFAULT_VIEWPORT_LIMITS) {
+		this.#limits = resolveViewportLimits(limits);
+	}
+	get state() {
+		return this.#state;
+	}
+	get limits() {
+		return this.#limits;
+	}
+	get autoFit() {
+		return this.#autoFit;
+	}
+	/** Fits `bounds` into the given viewport size and re-enables auto fit. */
+	fit(bounds, size) {
+		if (size.width === 0 || size.height === 0) return;
+		this.#state = fitBounds(bounds ?? {
+			x: -50,
+			y: -50,
+			width: 100,
+			height: 100
+		}, size, 48, this.#limits);
+		this.#autoFit = true;
+	}
+	pan(dx, dy) {
+		this.#autoFit = false;
+		this.#state = panBy(this.#state, dx, dy);
+	}
+	zoomAt(screenPoint, factor) {
+		this.#autoFit = false;
+		this.#state = zoomAt(this.#state, screenPoint, factor, this.#limits);
+	}
+	zoomTo(scale, center) {
+		if (scale <= 0 || !Number.isFinite(scale)) return;
+		this.#autoFit = false;
+		this.#state = zoomAt(this.#state, center, scale / this.#state.scale, this.#limits);
+	}
+	/** Restores a saved viewport (already clamped by the caller); turns auto fit off. */
+	setState(state) {
+		this.#autoFit = false;
+		this.#state = state;
+	}
+	/** Turns off auto fit when the user interacts with the view. */
+	takeOver() {
+		this.#autoFit = false;
+	}
+};
+//#endregion
+//#region src/editor/mount.ts
+/** Mounts a canvas schematic editor inside `options.container`. */
+function mountSchematicEditor(options) {
+	const doc = options.container.ownerDocument;
+	const readOnly = options.readOnly ?? false;
+	const controller = new SchematicEditorController({
+		document: options.schematic,
+		...options.devices === void 0 ? {} : { devices: options.devices },
+		...options.display === void 0 ? {} : { display: options.display },
+		...options.tolerance === void 0 ? {} : { tolerance: options.tolerance },
+		...options.historyLimit === void 0 ? {} : { historyLimit: options.historyLimit },
+		...options.createDesignator === void 0 ? {} : { createDesignator: options.createDesignator }
+	});
+	const shell = createShell({
+		document: doc,
+		readOnly,
+		toolbar: options.toolbar !== false,
+		onToolClick: (tool) => {
+			controller.setTool(controller.tool === tool ? "select" : tool);
+			shell.root.focus();
+		}
+	});
+	const viewport = new EditorViewport(resolveViewportLimits(options.zoomLimits));
+	const renderer = new CanvasSchematicRenderer(shell.canvas, { theme: resolveSchematicTheme(options.theme) });
+	let theme = resolveSchematicTheme(options.theme);
+	let disposed = false;
+	let lastSelection = [];
+	let lastTool = controller.tool;
+	let lastPlacing = controller.placingDevice;
+	let lastError = controller.state.lastError;
+	let lastViewport = viewport.state;
+	const input = new EditorInput({
+		controller,
+		devices: options.devices,
+		viewport,
+		root: shell.root,
+		canvas: shell.canvas,
+		readOnly,
+		onChange: () => {
+			render();
+		},
+		onFit: () => {
+			fitToContent();
+		},
+		run: (edit) => {
+			run(edit);
+		}
+	});
+	function run(edit) {
+		try {
+			edit();
+		} catch {}
+	}
+	function applyTheme() {
+		for (const [name, value] of Object.entries(themeToCssVariables(theme))) shell.root.style.setProperty(name, value);
+		renderer.setTheme(theme);
+	}
+	function render(state = controller.renderState) {
+		if (disposed) return;
+		const scene = buildSchematicScene({
+			document: state.document,
+			...options.devices === void 0 ? {} : { devices: options.devices },
+			theme,
+			selection: {
+				...toSceneHighlight(state.selection),
+				...input.dragOffset === void 0 ? {} : { offset: input.dragOffset }
+			},
+			...input.hover === void 0 ? {} : { hover: input.hover },
+			tool: state.tool,
+			display: {
+				grid: state.display.grid,
+				labels: state.display.labels,
+				gridSize: state.display.gridSize,
+				gridSubdivisions: state.display.gridSubdivisions
+			},
+			...input.pendingWire.length === 0 ? {} : { pendingWire: input.pendingWireWithCursor },
+			...input.marquee === void 0 ? {} : { marquee: input.marquee },
+			...input.placementPreview === void 0 ? {} : { placementPreview: input.placementPreview },
+			...input.referencePreview === void 0 ? {} : { referencePreview: input.referencePreview },
+			...input.wirePreview === void 0 ? {} : { wirePreview: input.wirePreview }
+		});
+		renderer.render(scene, viewport.state);
+		if (!sameViewport(viewport.state, lastViewport)) {
+			lastViewport = viewport.state;
+			options.onViewportChange?.(viewport.state);
+		}
+	}
+	function sync(state) {
+		shell.setToolActive(state.tool);
+		shell.canvas.style.cursor = state.tool === "select" && state.placingDevice === void 0 ? "default" : "crosshair";
+		if (state.lastError !== lastError) {
+			lastError = state.lastError;
+			options.onError?.(state.lastError);
+		}
+		if (state.tool !== lastTool || state.placingDevice !== lastPlacing) {
+			lastTool = state.tool;
+			lastPlacing = state.placingDevice;
+			input.resetTransient();
+			options.onToolChange?.(state.tool);
+		}
+		if (!sameSelection(state.selection, lastSelection)) {
+			lastSelection = state.selection;
+			options.onSelectionChange?.(state.selection);
+		}
+		options.onChange?.(state);
+		render(state);
+	}
+	function resize() {
+		const width = shell.canvasHost.clientWidth;
+		const height = shell.canvasHost.clientHeight;
+		if (width === 0 || height === 0) return;
+		renderer.resize(width, height, Math.max(1, window.devicePixelRatio || 1));
+		if (viewport.autoFit) {
+			fitToContent();
+			return;
+		}
+		render();
+	}
+	function fitToContent() {
+		viewport.fit(controller.topology().bounds, {
+			width: shell.canvasHost.clientWidth,
+			height: shell.canvasHost.clientHeight
+		});
+		render();
+	}
+	const unsubscribe = controller.subscribe(sync);
+	applyTheme();
+	input.attach();
+	sync(controller.state);
+	const resizeObserver = new ResizeObserver(() => resize());
+	resizeObserver.observe(shell.canvasHost);
+	options.container.append(shell.root);
+	resize();
+	return {
+		controller,
+		root: shell.root,
+		canvas: shell.canvas,
+		setSchematic(document, setOptions = {}) {
+			if (setOptions.keepHistory === true) {
+				run(() => controller.replace(document));
+				return;
+			}
+			controller.reset(document);
+			fitToContent();
+		},
+		setTheme(next) {
+			theme = resolveSchematicTheme(next);
+			applyTheme();
+			render();
+		},
+		getTheme() {
+			return theme;
+		},
+		setDisplayOptions(patch) {
+			controller.setDisplayOptions(patch);
+		},
+		setTool(tool) {
+			controller.setTool(tool);
+		},
+		placeDevice(device) {
+			if (readOnly) return;
+			controller.placeDevice(device);
+			shell.root.focus();
+		},
+		cancelPlacement() {
+			controller.cancelPlacement();
+		},
+		fitToContent,
+		zoomTo(scale) {
+			viewport.zoomTo(scale, {
+				x: shell.canvasHost.clientWidth / 2,
+				y: shell.canvasHost.clientHeight / 2
+			});
+			render();
+		},
+		getViewport() {
+			return viewport.state;
+		},
+		setViewport(next) {
+			viewport.setState(clampViewport(next, {
+				width: shell.canvasHost.clientWidth,
+				height: shell.canvasHost.clientHeight
+			}, viewport.limits));
+			render();
+		},
+		toJSON() {
+			return serializeSchematic(controller.document);
+		},
+		focus() {
+			shell.root.focus();
+		},
+		toPage(clientPoint) {
+			const rect = shell.canvas.getBoundingClientRect();
+			return screenToPage(viewport.state, {
+				x: clientPoint.x - rect.left,
+				y: clientPoint.y - rect.top
+			});
+		},
+		toScreen(pagePoint) {
+			return pageToScreen(viewport.state, pagePoint);
+		},
+		resize,
+		invalidate: render,
+		undo() {
+			controller.undo();
+		},
+		redo() {
+			controller.redo();
+		},
+		dispose() {
+			disposed = true;
+			unsubscribe();
+			resizeObserver.disconnect();
+			input.detach();
+			renderer.destroy();
+			shell.root.remove();
+		}
+	};
+}
+function sameViewport(left, right) {
+	return right !== void 0 && left.scale === right.scale && left.offsetX === right.offsetX && left.offsetY === right.offsetY;
+}
+//#endregion
+export { DARK_SCHEMATIC_THEME, DEFAULT_DISPLAY_OPTIONS, DEFAULT_VIEWPORT_LIMITS, LIGHT_SCHEMATIC_THEME, SchematicEditorController, mountSchematicEditor, resolveSchematicTheme, resolveViewportLimits, themeToCssVariables };
+
+//# sourceMappingURL=index.js.map