@ngroznykh/papirus 0.9.12 → 0.9.14

package/dist/papirus.js

@@ -1,10 +1,8 @@
 //#region src/events/EventEmitter.ts
-/**
-* Type-safe event emitter with support for typed event maps
-*/
 var EventEmitter = class {
 	constructor() {
 		this.listeners = /* @__PURE__ */ new Map();
+		this.onceWrappers = /* @__PURE__ */ new Map();
 	}
 	/**
 	* Subscribe to an event
@@ -25,8 +23,20 @@ var EventEmitter = class {
 	* @param listener - Callback function to remove
 	*/
 	off(event, listener) {
+		const eventListener = listener;
 		const listeners = this.listeners.get(event);
-		if (listeners !== void 0) listeners.delete(listener);
+		listeners?.delete(eventListener);
+		const wrappersByListener = this.onceWrappers.get(event);
+		const wrappers = wrappersByListener?.get(eventListener);
+		if (wrappers !== void 0) {
+			for (const wrapper of wrappers) listeners?.delete(wrapper);
+			wrappersByListener?.delete(eventListener);
+		} else if (wrappersByListener !== void 0) for (const [original, originalWrappers] of wrappersByListener) {
+			originalWrappers.delete(eventListener);
+			if (originalWrappers.size === 0) wrappersByListener.delete(original);
+		}
+		if (listeners?.size === 0) this.listeners.delete(event);
+		if (wrappersByListener?.size === 0) this.onceWrappers.delete(event);
 	}
 	/**
 	* Subscribe to an event for a single emission
@@ -39,6 +49,19 @@ var EventEmitter = class {
 			this.off(event, wrapper);
 			listener(...args);
 		};
+		const originalListener = listener;
+		const eventWrapper = wrapper;
+		let wrappersByListener = this.onceWrappers.get(event);
+		if (wrappersByListener === void 0) {
+			wrappersByListener = /* @__PURE__ */ new Map();
+			this.onceWrappers.set(event, wrappersByListener);
+		}
+		let wrappers = wrappersByListener.get(originalListener);
+		if (wrappers === void 0) {
+			wrappers = /* @__PURE__ */ new Set();
+			wrappersByListener.set(originalListener, wrappers);
+		}
+		wrappers.add(eventWrapper);
 		return this.on(event, wrapper);
 	}
 	/**
@@ -48,15 +71,20 @@ var EventEmitter = class {
 	*/
 	emit(event, ...args) {
 		const listeners = this.listeners.get(event);
-		if (listeners !== void 0) for (const listener of listeners) listener(...args);
+		if (listeners !== void 0) for (const listener of Array.from(listeners)) listener(...args);
 	}
 	/**
 	* Remove all listeners for an event or all events
 	* @param event - Optional event name. If not provided, removes all listeners
 	*/
 	removeAllListeners(event) {
-		if (event !== void 0) this.listeners.delete(event);
-		else this.listeners.clear();
+		if (event !== void 0) {
+			this.listeners.delete(event);
+			this.onceWrappers.delete(event);
+		} else {
+			this.listeners.clear();
+			this.onceWrappers.clear();
+		}
 	}
 	/**
 	* Get the number of listeners for an event
@@ -79,6 +107,9 @@ var InputHandler = class extends EventEmitter {
 		this.boundHandlers = /* @__PURE__ */ new Map();
 		this.lastTouchDistance = null;
 		this.lastTouchCenter = null;
+		this.windowPointerActive = false;
+		this.boundWindowMouseMove = (e) => this.handleWindowMouseMove(e);
+		this.boundWindowMouseUp = (e) => this.handleWindowMouseUp(e);
 		this.canvas = options.canvas;
 		this.screenToWorld = options.screenToWorld;
 		this.setupEventListeners();
@@ -93,6 +124,7 @@ var InputHandler = class extends EventEmitter {
 	* Clean up event listeners
 	*/
 	destroy() {
+		this.teardownWindowPointerListeners();
 		for (const [eventName, handler] of this.boundHandlers) if (eventName.startsWith("key")) window.removeEventListener(eventName, handler);
 		else this.canvas.removeEventListener(eventName, handler);
 		this.boundHandlers.clear();
@@ -102,8 +134,8 @@ var InputHandler = class extends EventEmitter {
 		this.addCanvasListener("click", this.handleClick.bind(this));
 		this.addCanvasListener("dblclick", this.handleDblClick.bind(this));
 		this.addCanvasListener("mousedown", this.handleMouseDown.bind(this));
-		this.addCanvasListener("mouseup", this.handleMouseUp.bind(this));
-		this.addCanvasListener("mousemove", this.handleMouseMove.bind(this));
+		this.addCanvasListener("mouseup", this.handleCanvasMouseUp.bind(this));
+		this.addCanvasListener("mousemove", this.handleCanvasMouseMove.bind(this));
 		this.addCanvasListener("wheel", this.handleWheel.bind(this), { passive: false });
 		this.addCanvasListener("touchstart", this.handleTouchStart.bind(this));
 		this.addCanvasListener("touchend", this.handleTouchEnd.bind(this));
@@ -120,6 +152,18 @@ var InputHandler = class extends EventEmitter {
 		window.addEventListener(eventName, handler);
 		this.boundHandlers.set(eventName, handler);
 	}
+	ensureWindowPointerListeners() {
+		if (this.windowPointerActive) return;
+		this.windowPointerActive = true;
+		window.addEventListener("mousemove", this.boundWindowMouseMove);
+		window.addEventListener("mouseup", this.boundWindowMouseUp);
+	}
+	teardownWindowPointerListeners() {
+		if (!this.windowPointerActive) return;
+		this.windowPointerActive = false;
+		window.removeEventListener("mousemove", this.boundWindowMouseMove);
+		window.removeEventListener("mouseup", this.boundWindowMouseUp);
+	}
 	handleClick(e) {
 		const event = this.normalizeMouseEvent(e);
 		this.emit("click", event);
@@ -130,16 +174,30 @@ var InputHandler = class extends EventEmitter {
 	}
 	handleMouseDown(e) {
 		const event = this.normalizeMouseEvent(e);
+		this.ensureWindowPointerListeners();
 		this.emit("mousedown", event);
 	}
-	handleMouseUp(e) {
+	handleCanvasMouseMove(e) {
 		const event = this.normalizeMouseEvent(e);
-		this.emit("mouseup", event);
+		this.emit("mousemove", event);
 	}
-	handleMouseMove(e) {
+	handleWindowMouseMove(e) {
+		if (e.target === this.canvas || this.canvas.contains(e.target)) return;
 		const event = this.normalizeMouseEvent(e);
 		this.emit("mousemove", event);
 	}
+	handleCanvasMouseUp(e) {
+		this.finishPointerUp(e);
+	}
+	handleWindowMouseUp(e) {
+		if (e.target === this.canvas || this.canvas.contains(e.target)) return;
+		this.finishPointerUp(e);
+	}
+	finishPointerUp(mouseEvent) {
+		const event = this.normalizeMouseEvent(mouseEvent);
+		this.teardownWindowPointerListeners();
+		this.emit("mouseup", event);
+	}
 	handleWheel(e) {
 		e.preventDefault();
 		const wheelEvent = e;
@@ -748,6 +806,7 @@ var SelectionManager = class extends EventEmitter {
 		const rect = this.selectionRect;
 		const selected = [];
 		for (const node of this.renderer.nodes.values()) if (rectsIntersect(rect, node.getBounds())) selected.push(node.id);
+		for (const edge of this.renderer.edges.values()) if (rectsIntersect(rect, edge.getBounds())) selected.push(edge.id);
 		for (const group of this.renderer.groups.values()) if (rectsIntersect(rect, group.getBounds())) selected.push(group.id);
 		if (selected.length > 0) this.selectMultiple(selected);
 		this.emit("selectionEnd", rect);
@@ -779,6 +838,7 @@ var SelectionManager = class extends EventEmitter {
 		ctx.setLineDash([]);
 	}
 	updateElementStates() {
+		this.pruneStaleSelection();
 		const updateState = (elements) => {
 			for (const element of elements) if (this._selectedIds.has(element.id)) element.state = "selected";
 			else if (element.state === "selected") element.state = "normal";
@@ -789,6 +849,9 @@ var SelectionManager = class extends EventEmitter {
 		this.renderer.markDirty();
 		this.renderer.markStyleDirty();
 	}
+	pruneStaleSelection() {
+		for (const id of Array.from(this._selectedIds)) if (this.renderer.getNode(id) === void 0 && this.renderer.getEdge(id) === void 0 && this.renderer.getGroup(id) === void 0) this._selectedIds.delete(id);
+	}
 	emitSelect() {
 		this.emit("select", Array.from(this._selectedIds));
 		this.renderer.emit("select", Array.from(this._selectedIds));
@@ -810,9 +873,9 @@ var DragManager = class extends EventEmitter {
 		this.editableBendFollow = /* @__PURE__ */ new Map();
 		this.editablePolylineFullyConnectedEdges = /* @__PURE__ */ new Set();
 		this.initialControlPointsForFullyConnected = /* @__PURE__ */ new Map();
+		this.initialControlPointsForBendFollow = /* @__PURE__ */ new Map();
 		this.alignmentGuides = [];
 		this._handledMouseDown = false;
-		this.draggedGroupSelection = false;
 		this.renderer = options.renderer;
 		this.selectionManager = options.selectionManager;
 		this.snapToGrid = options.snapToGrid ?? false;
@@ -890,7 +953,6 @@ var DragManager = class extends EventEmitter {
 			this._handledMouseDown = true;
 			this.dragStartPoint = point;
 			this.lastDragPoint = point;
-			this.draggedGroupSelection = false;
 			this.draggedNodes = [];
 			this.initialPositions.clear();
 			for (const id of this.selectionManager.selectedIds) {
@@ -907,7 +969,6 @@ var DragManager = class extends EventEmitter {
 		}
 		this.dragStartPoint = point;
 		this.lastDragPoint = point;
-		this.draggedGroupSelection = false;
 		this.draggedNodes = [];
 		for (const id of this.selectionManager.selectedIds) {
 			const selectedNode = this.renderer.getNode(id);
@@ -916,12 +977,9 @@ var DragManager = class extends EventEmitter {
 				continue;
 			}
 			const selectedGroup = this.renderer.getGroup(id);
-			if (selectedGroup !== void 0) {
-				this.draggedGroupSelection = true;
-				for (const child of selectedGroup.getAllChildren()) {
-					const childNode = this.renderer.getNode(child.id);
-					if (childNode) this.addDraggedNode(childNode);
-				}
+			if (selectedGroup !== void 0) for (const child of selectedGroup.getAllChildren()) {
+				const childNode = this.renderer.getNode(child.id);
+				if (childNode) this.addDraggedNode(childNode);
 			}
 		}
 		return true;
@@ -977,6 +1035,7 @@ var DragManager = class extends EventEmitter {
 		}
 		if (firstDelta !== null) this.followEditableBendForFullyConnectedEdges(firstDelta.x, firstDelta.y);
 		this.emit("drag", this.draggedNodes.map((n) => n.id), point, delta);
+		this.lastDragPoint = point;
 		this.renderer.markDirty();
 		return true;
 	}
@@ -993,7 +1052,6 @@ var DragManager = class extends EventEmitter {
 		if (this.isDragging) {
 			for (const node of this.draggedNodes) node.state = "selected";
 			this.emit("dragend", this.draggedNodes.map((n) => n.id), point);
-			if (this.draggedGroupSelection) this.selectionManager.clearSelection();
 		}
 		this.reset();
 		this.renderer.markDirty();
@@ -1016,6 +1074,10 @@ var DragManager = class extends EventEmitter {
 				const edge = this.renderer.getEdge(edgeId);
 				if (edge) edge.controlPoints = clonePoints(points);
 			}
+			for (const [edgeId, points] of this.initialControlPointsForBendFollow) {
+				const edge = this.renderer.getEdge(edgeId);
+				if (edge) edge.controlPoints = clonePoints(points);
+			}
 		}
 		this.reset();
 		this.renderer.markDirty();
@@ -1037,13 +1099,14 @@ var DragManager = class extends EventEmitter {
 		this.editableBendFollow.clear();
 		this.editablePolylineFullyConnectedEdges.clear();
 		this.initialControlPointsForFullyConnected.clear();
+		this.initialControlPointsForBendFollow.clear();
 		this.alignmentGuides = [];
-		this.draggedGroupSelection = false;
 	}
 	buildEditableBendFollowBindings() {
 		this.editableBendFollow.clear();
 		this.editablePolylineFullyConnectedEdges.clear();
 		this.initialControlPointsForFullyConnected.clear();
+		this.initialControlPointsForBendFollow.clear();
 		const draggedIds = new Set(this.draggedNodes.map((node) => node.id));
 		const nodeBindings = /* @__PURE__ */ new Map();
 		for (const edge of this.renderer.edges.values()) {
@@ -1080,6 +1143,7 @@ var DragManager = class extends EventEmitter {
 					axis
 				});
 				nodeBindings.set(node.id, bindings);
+				if (!this.initialControlPointsForBendFollow.has(edge.id)) this.initialControlPointsForBendFollow.set(edge.id, clonePoints(edge.controlPoints));
 			}
 		}
 		for (const [nodeId, bindings] of nodeBindings) if (bindings.length > 0) this.editableBendFollow.set(nodeId, bindings);
@@ -1512,9 +1576,23 @@ var NavigationManager = class extends EventEmitter {
 		this.isPanning = false;
 		this.panStart = null;
 		this.spacePressed = false;
+		this.boundBlur = () => this.handleWindowBlur();
+		this.boundVisibilityChange = () => {
+			if (document.visibilityState === "hidden") this.handleWindowBlur();
+		};
 		this.renderer = options.renderer;
 		this.zoomSensitivity = options.zoomSensitivity ?? .001;
 		this.panButton = options.panButton ?? 1;
+		window.addEventListener("blur", this.boundBlur);
+		document.addEventListener("visibilitychange", this.boundVisibilityChange);
+	}
+	destroy() {
+		window.removeEventListener("blur", this.boundBlur);
+		document.removeEventListener("visibilitychange", this.boundVisibilityChange);
+	}
+	handleWindowBlur() {
+		this.spacePressed = false;
+		if (this.isPanning) this.endPan();
 	}
 	/**
 	* Check if currently panning
@@ -1633,7 +1711,7 @@ var NavigationManager = class extends EventEmitter {
 		const actualNewZoom = this.renderer.zoom;
 		this.renderer.offsetX = oldOffsetX + worldPos.x * (oldZoom - actualNewZoom);
 		this.renderer.offsetY = oldOffsetY + worldPos.y * (oldZoom - actualNewZoom);
-		this.emit("zoomChange", this.renderer.zoom, centerPoint);
+		this.emit("zoomChange", this.renderer.zoom, worldPos);
 	}
 	/**
 	* Fit all content in view
@@ -1650,6 +1728,7 @@ var NavigationManager = class extends EventEmitter {
 	* Zoom to fit a specific rectangle
 	*/
 	zoomToRect(rect, padding = 50) {
+		if (rect.width <= 0 || rect.height <= 0) return;
 		const viewWidth = this.renderer.width - padding * 2;
 		const viewHeight = this.renderer.height - padding * 2;
 		const scaleX = viewWidth / rect.width;
@@ -2626,12 +2705,24 @@ var ConnectionManager = class extends EventEmitter {
 	* Cancel current connection
 	*/
 	cancelConnection() {
+		if (this.isReconnecting) {
+			this.restoreReconnectingEndpoint();
+			this.resetReconnection();
+			this.renderer.markDirty();
+			return;
+		}
 		if (!this.isConnecting) return;
 		this.emit("connectionEnd", null);
 		this.reset();
 		this.renderer.markDirty();
 	}
 	/**
+	* Cancel any in-flight connect or reconnect gesture and restore edge auto-updates.
+	*/
+	cancelAll() {
+		this.cancelConnection();
+	}
+	/**
 	* Render connection preview
 	*/
 	renderPreview(ctx) {
@@ -2767,6 +2858,11 @@ var ConnectionManager = class extends EventEmitter {
 		this.reconnectPoint = null;
 		this.setCursor("");
 	}
+	restoreReconnectingEndpoint() {
+		if (!this.reconnectingEdge || !this.originalEdgeEndpoint || !this.reconnectingEndpoint) return;
+		if (this.reconnectingEndpoint === "start") this.reconnectingEdge.from = this.originalEdgeEndpoint;
+		else this.reconnectingEdge.to = this.originalEdgeEndpoint;
+	}
 	/**
 	* Render anchors when hovering a node (not connecting)
 	*/
@@ -3220,6 +3316,20 @@ function measureTextLines(ctx, lines) {
 	for (const line of lines) maxWidth = Math.max(maxWidth, ctx.measureText(line).width);
 	return maxWidth;
 }
+function readScale(ctx) {
+	if (typeof ctx.getTransform !== "function") return null;
+	const m = ctx.getTransform();
+	if (m === null || typeof m.a !== "number") return null;
+	return {
+		a: m.a,
+		b: typeof m.b === "number" ? m.b : 0
+	};
+}
+function isScreenFontReadable(ctx, fontSize) {
+	const m = readScale(ctx);
+	if (m === null) return true;
+	return fontSize * Math.hypot(m.a, m.b) >= 7;
+}
 //#endregion
 //#region src/elements/TextLabel.ts
 var DEFAULT_INSET = 8;
@@ -3477,10 +3587,10 @@ var TextLabel = class {
 			default: startY = innerBounds.y + (innerBounds.height - totalHeight) / 2 + lineHeight / 2;
 		}
 		ctx.fillStyle = this._style.color ?? "#000000";
+		if (!isScreenFontReadable(ctx, this._style.fontSize ?? 14)) return;
 		for (let i = 0; i < this._lines.length; i++) {
-			const line = this._lines[i];
 			const y = startY + i * lineHeight;
-			ctx.fillText(line, x, y);
+			ctx.fillText(this._lines[i], x, y);
 		}
 	}
 	/**
@@ -6044,12 +6154,18 @@ var BezierPathStrategy = class {
 	hitTest(point, path, tolerance) {
 		if (path.length < 4) return false;
 		const samples = 20;
-		const points = [];
-		for (let i = 0; i <= samples; i++) {
-			const t = i / samples;
-			points.push(bezierPoint(path[0], path[1], path[2], path[3], t));
+		for (let i = 1; i + 2 < path.length; i += 3) {
+			const start = path[i - 1];
+			const control1 = path[i];
+			const control2 = path[i + 1];
+			const end = path[i + 2];
+			let previous = start;
+			for (let sample = 1; sample <= samples; sample++) {
+				const current = bezierPoint(start, control1, control2, end, sample / samples);
+				if (distanceToSegment(point, previous, current) <= tolerance) return true;
+				previous = current;
+			}
 		}
-		for (let i = 1; i < points.length; i++) if (distanceToSegment(point, points[i - 1], points[i]) <= tolerance) return true;
 		return false;
 	}
 };
@@ -6411,6 +6527,7 @@ function drawLegacyArrowHead(ctx, from, to) {
 function renderEdgeLabel(ctx, options) {
 	const { label, path, background } = options;
 	if (!label || path.length < 2) return;
+	if (!isScreenFontReadable(ctx, label.style.fontSize ?? 14)) return;
 	const labelCenter = getEdgeLabelPosition(options);
 	if (!labelCenter) return;
 	const rotation = getEdgeLabelRotation(options);
@@ -7060,7 +7177,7 @@ var Edge = class extends Element {
 			}
 			return pts;
 		};
-		if (!(this._label !== void 0 && this._labelLineGap)) {
+		if (!(this._label !== void 0 && this._labelLineGap && isScreenFontReadable(ctx, this._label.style.fontSize ?? 14))) {
 			const start = path[0];
 			const startNext = path[1];
 			const startAngle = Math.atan2(startNext.y - start.y, startNext.x - start.x);
@@ -7547,6 +7664,7 @@ var InteractionManager = class {
 		this.handledScrollbarMouseDown = false;
 		this.overlayDragSession = null;
 		this.handledOverlayMouseDown = false;
+		this.editHoverSuspendedForPan = false;
 		this.renderer = options.renderer;
 		this.navigationOnly = options.navigationOnly ?? false;
 		this.inputHandler = new InputHandler({
@@ -7714,6 +7832,13 @@ var InteractionManager = class {
 	}
 	destroy() {
 		this.labelEditor.finish(false);
+		this.propertyChangeBatcher.flush();
+		this.dragManager.cancelDrag();
+		this.resizeManager.cancelResize();
+		this.connectionManager.cancelAll();
+		this.selectionManager.cancelSelectionRect();
+		this.navigationManager.destroy();
+		this.resumeEditHover();
 		if (this.overlayDragSession) {
 			this.renderer.endOverlayDrag(this.overlayDragSession);
 			this.overlayDragSession = null;
@@ -7730,7 +7855,7 @@ var InteractionManager = class {
 	setupEvents() {
 		this.overlayCleanup = this.renderer.addOverlayRenderer((ctx) => {
 			this.selectionManager.renderSelectionRect(ctx);
-			if (!this.navigationOnly) {
+			if (!this.navigationOnly && !this.navigationManager.panning) {
 				this.dragManager.renderAlignmentGuides(ctx);
 				this.connectionManager.renderPreview(ctx);
 				this.connectionManager.renderHoverAnchors(ctx);
@@ -7901,7 +8026,7 @@ var InteractionManager = class {
 		if (event.button === 0) {
 			if (this.navigationOnly) {
 				this.selectionManager.clearSelection();
-				this.navigationManager.startPan(event);
+				this.beginBackgroundPan(event);
 				return;
 			}
 			if (hitElement === void 0) {
@@ -7910,11 +8035,14 @@ var InteractionManager = class {
 					return;
 				}
 				this.selectionManager.clearSelection();
-				this.navigationManager.startPan(event);
+				this.beginBackgroundPan(event);
 				return;
 			}
 		}
-		if (this.navigationManager.handleMouseDown(event)) return;
+		if (this.navigationManager.handleMouseDown(event)) {
+			this.suspendEditHover();
+			return;
+		}
 		if (this.navigationOnly) return;
 		if (this.dragManager.handleMouseDown(event)) return;
 	}
@@ -7928,7 +8056,11 @@ var InteractionManager = class {
 				this.renderer.setScrollbarActiveAxis(null);
 				this.scrollbarDragState = null;
 			}
-			if (this.navigationManager.panning) this.navigationManager.handleMouseUp(event);
+			if (this.navigationManager.panning) this.finishBackgroundPan(event);
+		}
+		if (this.navigationManager.panning) {
+			this.navigationManager.handleMouseMove(event);
+			return;
 		}
 		const overScrollbar = this.renderer.updateScrollbarHover(event.screenX, event.screenY);
 		const overOverlayPointerSink = this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY);
@@ -7990,7 +8122,7 @@ var InteractionManager = class {
 			this.selectionManager.endSelectionRect();
 			return;
 		}
-		this.navigationManager.handleMouseUp(event);
+		this.finishBackgroundPan(event);
 	}
 	handleClick(event) {
 		if (this.handledOverlayMouseDown) {
@@ -8094,6 +8226,24 @@ var InteractionManager = class {
 		}
 		return closestEdge;
 	}
+	suspendEditHover() {
+		if (this.navigationOnly || this.editHoverSuspendedForPan) return;
+		this.connectionManager.disableHover();
+		this.editHoverSuspendedForPan = true;
+	}
+	resumeEditHover() {
+		if (!this.editHoverSuspendedForPan) return;
+		this.connectionManager.enableHover();
+		this.editHoverSuspendedForPan = false;
+	}
+	beginBackgroundPan(event) {
+		this.suspendEditHover();
+		this.navigationManager.startPan(event);
+	}
+	finishBackgroundPan(event) {
+		this.navigationManager.handleMouseUp(event);
+		this.resumeEditHover();
+	}
 	handleWheel(event) {
 		if (this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY)) return;
 		this.navigationManager.handleWheel(event);
@@ -8132,6 +8282,7 @@ var InteractionManager = class {
 	}
 	handleKeyUp(event) {
 		this.navigationManager.handleKeyUp(event);
+		if (!this.navigationManager.panning) this.resumeEditHover();
 	}
 	handleViewportNavigationKey(event) {
 		switch (event.key) {
@@ -8316,6 +8467,66 @@ var InteractionManager = class {
 	}
 };
 //#endregion
+//#region src/utils/pathViewport.ts
+/**
+* True when the drawn edge path meets the viewport.
+* AABB-only cull keeps fat bezier control boxes on the walk even when the
+* curve never enters the view. Empty path stays visible for the first layout.
+*/
+function edgePathIntersectsViewport(input, viewport) {
+	const path = input.path;
+	if (path.length === 0) return true;
+	const aabb = boundsFromPoints(path);
+	if (aabb === null || !rectsIntersect(aabb, viewport)) return false;
+	if (input.type === "bezier" && path.length >= 4) return polylineIntersectsRect(sampleBezier(path), viewport);
+	return polylineIntersectsRect(path, viewport);
+}
+function boundsFromPoints(points) {
+	if (points.length === 0) return null;
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const point of points) {
+		minX = Math.min(minX, point.x);
+		minY = Math.min(minY, point.y);
+		maxX = Math.max(maxX, point.x);
+		maxY = Math.max(maxY, point.y);
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+function polylineIntersectsRect(points, rect) {
+	if (points.length === 1) return pointInRect(points[0], rect);
+	for (let i = 0; i < points.length - 1; i++) {
+		const start = points[i];
+		const end = points[i + 1];
+		if (pointInRect(start, rect) || pointInRect(end, rect)) return true;
+		if (segmentRectIntersections(start, end, rect).length > 0) return true;
+	}
+	return false;
+}
+function sampleBezier(path) {
+	const samples = [];
+	const steps = 20;
+	for (let i = 1; i + 2 < path.length; i += 3) {
+		const p0 = path[i - 1];
+		const p1 = path[i];
+		const p2 = path[i + 1];
+		const p3 = path[i + 2];
+		for (let s = 0; s <= steps; s++) {
+			const t = s / steps;
+			if (samples.length > 0 && t === 0) continue;
+			samples.push(bezierPoint(p0, p1, p2, p3, t));
+		}
+	}
+	return samples;
+}
+//#endregion
 //#region src/core/AnimationManager.ts
 var DEFAULT_OPTIONS$3 = {
 	enabled: false,
@@ -8369,6 +8580,15 @@ var AnimationManager = class {
 	hasActive() {
 		return this.enter.size > 0 || this.exit.size > 0 || this.highlight.size > 0;
 	}
+	/**
+	* Drop all in-flight enter/exit/highlight timers without running exit callbacks.
+	* Used by {@link DiagramRenderer.clear} so removed ids do not keep the render loop dirty.
+	*/
+	clear() {
+		this.enter.clear();
+		this.exit.clear();
+		this.highlight.clear();
+	}
 	update(now = performance.now()) {
 		if (!this.options.enabled) return false;
 		let changed = false;
@@ -9294,6 +9514,9 @@ var DiagramRenderer = class extends EventEmitter {
 		this._dirty = true;
 		this._styleDirty = true;
 		this._contentDirty = true;
+		this._contentRevision = 0;
+		this._contentBoundsCache = null;
+		this._edgeIndexEndpoints = /* @__PURE__ */ new Map();
 		this._destroyed = false;
 		this._contextLost = false;
 		this._canvasRect = null;
@@ -9650,10 +9873,12 @@ var DiagramRenderer = class extends EventEmitter {
 	*/
 	addEdge(edge) {
 		edge.setDirtyListener(() => this.markDirty());
-		edge.setBindingListener(() => this.markContentDirty());
+		edge.setBindingListener(() => {
+			this.syncEdgeNodeIndex(edge);
+			this.markContentDirty();
+		});
 		this._edges.set(edge.id, edge);
-		if (edge.from.nodeId) this._updateEdgeIndex(edge.id, edge.from.nodeId, true);
-		if (edge.to.nodeId) this._updateEdgeIndex(edge.id, edge.to.nodeId, true);
+		this.syncEdgeNodeIndex(edge);
 		this.animationManager.registerEnter(edge.id);
 		this.markContentDirty();
 		this.emit("edgeAdd", edge);
@@ -9674,6 +9899,22 @@ var DiagramRenderer = class extends EventEmitter {
 		}
 	}
 	/**
+	* Keep `_nodeEdgeIndex` accurate when an edge is added or its from/to node ids change.
+	*/
+	syncEdgeNodeIndex(edge) {
+		const prev = this._edgeIndexEndpoints.get(edge.id);
+		const nextFrom = edge.from.nodeId;
+		const nextTo = edge.to.nodeId;
+		if (prev?.from !== void 0 && prev.from !== nextFrom) this._updateEdgeIndex(edge.id, prev.from, false);
+		if (prev?.to !== void 0 && prev.to !== nextTo) this._updateEdgeIndex(edge.id, prev.to, false);
+		if (nextFrom !== void 0 && nextFrom !== prev?.from) this._updateEdgeIndex(edge.id, nextFrom, true);
+		if (nextTo !== void 0 && nextTo !== prev?.to) this._updateEdgeIndex(edge.id, nextTo, true);
+		this._edgeIndexEndpoints.set(edge.id, {
+			from: nextFrom,
+			to: nextTo
+		});
+	}
+	/**
 	* Remove an edge from the diagram
 	*/
 	removeEdge(edgeId) {
@@ -9709,8 +9950,12 @@ var DiagramRenderer = class extends EventEmitter {
 			if (other.from.edgeId === edgeId || other.to.edgeId === edgeId) dependents.push(other.id);
 		}
 		for (const dependentId of dependents) this.removeEdgeImmediate(dependentId);
-		if (edge.from.nodeId) this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
-		if (edge.to.nodeId) this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
+		const indexed = this._edgeIndexEndpoints.get(edgeId);
+		if (indexed?.from !== void 0) this._updateEdgeIndex(edgeId, indexed.from, false);
+		else if (edge.from.nodeId) this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
+		if (indexed?.to !== void 0) this._updateEdgeIndex(edgeId, indexed.to, false);
+		else if (edge.to.nodeId) this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
+		this._edgeIndexEndpoints.delete(edgeId);
 		this._edges.delete(edgeId);
 		edge.setDirtyListener(void 0);
 		edge.setBindingListener(void 0);
@@ -9730,7 +9975,7 @@ var DiagramRenderer = class extends EventEmitter {
 	addGroup(group) {
 		group.setDirtyListener(() => this.markDirty());
 		this._groups.set(group.id, group);
-		this.markDirty();
+		this.markContentDirty();
 	}
 	/**
 	* Remove a group from the diagram
@@ -9740,7 +9985,7 @@ var DiagramRenderer = class extends EventEmitter {
 		if (group === void 0) return false;
 		this._groups.delete(groupId);
 		group.setDirtyListener(void 0);
-		this.markDirty();
+		this.markContentDirty();
 		return true;
 	}
 	/**
@@ -9814,10 +10059,18 @@ var DiagramRenderer = class extends EventEmitter {
 	*/
 	markContentDirty() {
 		this._contentDirty = true;
+		this._contentRevision += 1;
 		this._nodeObstaclesCache = null;
 		this._dirty = true;
 	}
 	/**
+	* Monotonic counter bumped when nodes/edges/layout change (not on pan/zoom).
+	* Used by MiniMap to cache its content bake across viewport moves.
+	*/
+	getContentRevision() {
+		return this._contentRevision;
+	}
+	/**
 	* Visible world rectangle plus padding so labels and arrow markers are not culled early.
 	*/
 	getViewportWorldBounds() {
@@ -9835,10 +10088,13 @@ var DiagramRenderer = class extends EventEmitter {
 	}
 	/**
 	* Edges without a computed path stay drawable so the first layout pass can paint them.
+	* Bezier control-box AABB is not enough — walk the actual path.
 	*/
 	edgeIntersectsViewport(edge, viewport) {
-		if (edge.path.length === 0) return true;
-		return this.intersectsViewport(edge.getBounds(), viewport);
+		return edgePathIntersectsViewport({
+			path: edge.path,
+			type: edge.type
+		}, viewport);
 	}
 	/**
 	* Force an immediate render
@@ -9869,19 +10125,25 @@ var DiagramRenderer = class extends EventEmitter {
 		this._edges.clear();
 		this._groups.clear();
 		this._nodeEdgeIndex.clear();
+		this._edgeIndexEndpoints.clear();
 	}
 	/**
 	* Clear all elements from the diagram
 	*/
 	clear() {
 		for (const node of this._nodes.values()) node.setDirtyListener(void 0);
-		for (const edge of this._edges.values()) edge.setDirtyListener(void 0);
+		for (const edge of this._edges.values()) {
+			edge.setDirtyListener(void 0);
+			edge.setBindingListener(void 0);
+		}
 		for (const group of this._groups.values()) group.setDirtyListener(void 0);
 		this._nodes.clear();
 		this._edges.clear();
 		this._groups.clear();
 		this._nodeEdgeIndex.clear();
-		this.markDirty();
+		this._edgeIndexEndpoints.clear();
+		this.animationManager.clear();
+		this.markContentDirty();
 	}
 	nativePixelRatio() {
 		return this.options.retina ? window.devicePixelRatio || 1 : 1;
@@ -9938,13 +10200,13 @@ var DiagramRenderer = class extends EventEmitter {
 			applyStyleManagerToElements(this.styleManager, this._groups.values(), this._edges.values(), this._nodes.values());
 			this._styleDirty = false;
 		}
-		for (const group of this._groups.values()) group.recalculateBounds();
 		const viewport = this.getViewportWorldBounds();
 		for (const group of this._groups.values()) if (group.visible && this.intersectsViewport(group.getBounds(), viewport)) {
 			this.renderElementWithAnimation(ctx, group, () => group.render(ctx));
 			group.clearDirty();
 		}
 		if (this._contentDirty) {
+			for (const group of this._groups.values()) group.recalculateBounds();
 			this.edgeEndpointUpdater.updateAll();
 			this._contentDirty = false;
 		}
@@ -10007,11 +10269,17 @@ var DiagramRenderer = class extends EventEmitter {
 		return this._nodeObstaclesCache;
 	}
 	getContentBounds() {
-		return getContentBounds({
+		if (this._contentBoundsCache?.revision === this._contentRevision) return this._contentBoundsCache.bounds;
+		const bounds = getContentBounds({
 			nodes: this._nodes.values(),
 			edges: this._edges.values(),
 			groups: this._groups.values()
 		});
+		this._contentBoundsCache = {
+			revision: this._contentRevision,
+			bounds
+		};
+		return bounds;
 	}
 	notifyScrollbarInteraction() {
 		this.scrollbarController.notifyInteraction();
@@ -10106,6 +10374,7 @@ var SearchManager = class {
 		this.overlayCleanup = this.renderer.addOverlayRenderer((ctx) => this.renderHighlights(ctx));
 	}
 	destroy() {
+		if (this.filterActive) this.clearFilter();
 		this.overlayCleanup?.();
 		this.overlayCleanup = null;
 		this.highlightIds.clear();
@@ -11894,7 +12163,7 @@ var Group = class Group extends Element {
 	}
 	applyStyleManager(styleManager) {
 		const mergedStyle = {
-			...styleManager.getGroupStyle(false, this._styleClass),
+			...styleManager.getGroupStyle(this._state === "selected", this._styleClass),
 			...this._style
 		};
 		if (!shallowEqual(this._groupStyle, mergedStyle)) {
@@ -11947,6 +12216,7 @@ var Group = class Group extends Element {
 	*/
 	recalculateBounds() {
 		if (this._children.length === 0) {
+			if (this._x === 0 && this._y === 0 && this._width === 0 && this._height === 0) return;
 			this._x = 0;
 			this._y = 0;
 			this._width = 0;
@@ -11965,10 +12235,15 @@ var Group = class Group extends Element {
 			maxX = Math.max(maxX, bounds.x + bounds.width);
 			maxY = Math.max(maxY, bounds.y + bounds.height);
 		}
-		this._x = minX - this._padding;
-		this._y = minY - this._padding;
-		this._width = maxX - minX + this._padding * 2;
-		this._height = maxY - minY + this._padding * 2;
+		const nextX = minX - this._padding;
+		const nextY = minY - this._padding;
+		const nextWidth = maxX - minX + this._padding * 2;
+		const nextHeight = maxY - minY + this._padding * 2;
+		if (this._x === nextX && this._y === nextY && this._width === nextWidth && this._height === nextHeight) return;
+		this._x = nextX;
+		this._y = nextY;
+		this._width = nextWidth;
+		this._height = nextHeight;
 		this.markDirty();
 	}
 	hitTest(point) {
@@ -11996,7 +12271,6 @@ var Group = class Group extends Element {
 			ctx.fillText(this._label, x + 8, y + 4);
 		}
 		ctx.globalAlpha = 1;
-		for (const child of this._children) if (child.visible) child.render(ctx);
 	}
 	getBounds() {
 		return {
@@ -12133,11 +12407,12 @@ var CircleNode = class extends Node {
 		};
 	}
 	getLabelContainerBounds(bounds) {
-		const width = bounds.width / Math.SQRT2;
-		const height = bounds.height / Math.SQRT2;
+		const insetBounds = super.getLabelContainerBounds(bounds);
+		const width = insetBounds.width / Math.SQRT2;
+		const height = insetBounds.height / Math.SQRT2;
 		return {
-			x: bounds.x + (bounds.width - width) / 2,
-			y: bounds.y + (bounds.height - height) / 2,
+			x: insetBounds.x + (insetBounds.width - width) / 2,
+			y: insetBounds.y + (insetBounds.height - height) / 2,
 			width,
 			height
 		};
@@ -12294,11 +12569,12 @@ var DiamondNode = class extends Node {
 		};
 	}
 	getLabelContainerBounds(bounds) {
-		const width = bounds.width / 2;
-		const height = bounds.height / 2;
+		const insetBounds = super.getLabelContainerBounds(bounds);
+		const width = insetBounds.width / 2;
+		const height = insetBounds.height / 2;
 		return {
-			x: bounds.x + (bounds.width - width) / 2,
-			y: bounds.y + (bounds.height - height) / 2,
+			x: insetBounds.x + (insetBounds.width - width) / 2,
+			y: insetBounds.y + (insetBounds.height - height) / 2,
 			width,
 			height
 		};
@@ -12856,6 +13132,7 @@ var CText = class extends CompositeComponentBase {
 		if (this.style.visible === false) return;
 		const opacity = this.style.opacity ?? 1;
 		if (opacity <= 0) return;
+		if (!isScreenFontReadable(ctx, this._fontSize)) return;
 		ctx.save();
 		ctx.globalAlpha *= opacity;
 		ctx.font = this.getFont();
@@ -12908,8 +13185,14 @@ var CText = class extends CompositeComponentBase {
 			ctx.rotate(this._rotation * Math.PI / 180);
 			const offsetX = xBase - (textBounds.x + textBounds.width / 2);
 			const offsetY = yStart - (textBounds.y + textBounds.height / 2);
-			for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], offsetX, offsetY + i * lineHeightPx);
-		} else for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], xBase, yStart + i * lineHeightPx);
+			for (let i = 0; i < lines.length; i++) {
+				const y = offsetY + i * lineHeightPx;
+				ctx.fillText(lines[i], offsetX, y);
+			}
+		} else for (let i = 0; i < lines.length; i++) {
+			const y = yStart + i * lineHeightPx;
+			ctx.fillText(lines[i], xBase, y);
+		}
 		ctx.restore();
 	}
 	serialize() {
@@ -13309,16 +13592,33 @@ function flexLayout(container, config, children) {
 			finalSizes[i] = finalSizes[i] + remaining * child.flexGrow / totalGrow;
 		}
 	} else if (remaining < 0) {
-		let totalShrink = 0;
-		for (let i = 0; i < children.length; i++) totalShrink += children[i].flexShrink * baseSizes[i];
-		if (totalShrink > 0) {
-			const deficit = -remaining;
-			for (let i = 0; i < children.length; i++) {
+		const active = /* @__PURE__ */ new Set();
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			const minMain = isRow ? child.minSize.width : child.minSize.height;
+			if (child.flexShrink > 0 && finalSizes[i] > minMain) active.add(i);
+		}
+		let deficit = -remaining;
+		const epsilon = 1e-9;
+		while (deficit > epsilon && active.size > 0) {
+			let totalShrink = 0;
+			for (const i of active) totalShrink += children[i].flexShrink * baseSizes[i];
+			if (totalShrink <= 0) break;
+			let distributed = 0;
+			for (const i of active) {
 				const child = children[i];
 				const shrinkRatio = child.flexShrink * baseSizes[i] / totalShrink;
 				const minMain = isRow ? child.minSize.width : child.minSize.height;
-				finalSizes[i] = Math.max(minMain, finalSizes[i] - deficit * shrinkRatio);
+				const shrink = Math.min(deficit * shrinkRatio, finalSizes[i] - minMain);
+				finalSizes[i] = finalSizes[i] - shrink;
+				distributed += shrink;
+				if (finalSizes[i] - minMain <= epsilon) {
+					finalSizes[i] = minMain;
+					active.delete(i);
+				}
 			}
+			if (distributed <= epsilon) break;
+			deficit -= distributed;
 		}
 	}
 	let actualTotal = totalGaps + totalMargins;
@@ -14007,13 +14307,24 @@ var CompositeNode = class extends Node {
 		const fillOpacity = style.fillOpacity ?? 1;
 		const strokeOpacity = style.strokeOpacity ?? 1;
 		this.applyStyle(ctx);
-		ctx.beginPath();
-		this.buildShapePath(ctx, x, y, width, height);
-		ctx.closePath();
-		ctx.globalAlpha = baseOpacity * fillOpacity;
-		ctx.fill();
-		ctx.globalAlpha = baseOpacity * strokeOpacity;
-		ctx.stroke();
+		if (this._shapeType === "custom" && this._pathFactory) {
+			const path = this._pathFactory(width, height);
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.globalAlpha = baseOpacity * fillOpacity;
+			ctx.fill(path);
+			ctx.globalAlpha = baseOpacity * strokeOpacity;
+			ctx.stroke(path);
+			ctx.restore();
+		} else {
+			ctx.beginPath();
+			this.buildShapePath(ctx, x, y, width, height);
+			ctx.closePath();
+			ctx.globalAlpha = baseOpacity * fillOpacity;
+			ctx.fill();
+			ctx.globalAlpha = baseOpacity * strokeOpacity;
+			ctx.stroke();
+		}
 		ctx.globalAlpha = 1;
 		this.renderContents(ctx);
 	}
@@ -14035,15 +14346,6 @@ var CompositeNode = class extends Node {
 				break;
 			}
 			case "custom":
-				if (this._pathFactory) {
-					const path = this._pathFactory(w, h);
-					ctx.save();
-					ctx.translate(x, y);
-					ctx.fill(path);
-					ctx.stroke(path);
-					ctx.restore();
-					return;
-				}
 				this.buildRectPath(ctx, x, y, w, h);
 				break;
 			default:
@@ -14081,35 +14383,40 @@ var CompositeNode = class extends Node {
 	}
 	applyAutoSize(ctx) {
 		const contentSize = this._content.measure(ctx);
-		const inset = this.contentInset;
+		const bounds = this.getBounds();
+		const inset = resolveContentInset(this.contentInset, this.contentInsetScale, {
+			width: bounds.width,
+			height: bounds.height
+		}, this.contentInsetBaseSize);
 		const neededWidth = Math.max(this._minWidth, contentSize.width + inset.left + inset.right);
 		const neededHeight = Math.max(this._minHeight, contentSize.height + inset.top + inset.bottom);
 		if (neededWidth > this._width) this._width = neededWidth;
 		if (neededHeight > this._height) this._height = neededHeight;
 	}
 	getLabelContainerBounds(bounds) {
+		const insetBounds = super.getLabelContainerBounds(bounds);
 		if (this._shapeType === "circle") {
 			const factor = 1 / Math.SQRT2;
-			const w = bounds.width * factor;
-			const h = bounds.height * factor;
+			const w = insetBounds.width * factor;
+			const h = insetBounds.height * factor;
 			return {
-				x: bounds.x + (bounds.width - w) / 2,
-				y: bounds.y + (bounds.height - h) / 2,
+				x: insetBounds.x + (insetBounds.width - w) / 2,
+				y: insetBounds.y + (insetBounds.height - h) / 2,
 				width: w,
 				height: h
 			};
 		}
 		if (this._shapeType === "diamond") {
-			const w = bounds.width / 2;
-			const h = bounds.height / 2;
+			const w = insetBounds.width / 2;
+			const h = insetBounds.height / 2;
 			return {
-				x: bounds.x + (bounds.width - w) / 2,
-				y: bounds.y + (bounds.height - h) / 2,
+				x: insetBounds.x + (insetBounds.width - w) / 2,
+				y: insetBounds.y + (insetBounds.height - h) / 2,
 				width: w,
 				height: h
 			};
 		}
-		return super.getLabelContainerBounds(bounds);
+		return insetBounds;
 	}
 	/**
 	* Get the minimum content size needed for the content tree.
@@ -14317,16 +14624,22 @@ var DARK_THEME = {
 		}
 	}
 };
+function cloneTheme(theme) {
+	return structuredClone(theme);
+}
 /**
 * Manages styles and themes
 */
 var StyleManager = class {
 	constructor(theme) {
 		this._classes = /* @__PURE__ */ new Map();
-		this._builtInThemes = new Map([["default", DEFAULT_THEME], ["dark", DARK_THEME]]);
-		if (theme === void 0) this._theme = DEFAULT_THEME;
-		else if (typeof theme === "string") this._theme = this._builtInThemes.get(theme) ?? DEFAULT_THEME;
-		else this._theme = theme;
+		this._builtInThemes = new Map([["default", cloneTheme(DEFAULT_THEME)], ["dark", cloneTheme(DARK_THEME)]]);
+		const initialTheme = theme ?? "default";
+		if (typeof initialTheme === "string") {
+			const registeredTheme = this._builtInThemes.get(initialTheme);
+			if (registeredTheme === void 0) throw new Error(`Unknown theme: ${initialTheme}`);
+			this._theme = cloneTheme(registeredTheme);
+		} else this._theme = cloneTheme(initialTheme);
 	}
 	/**
 	* Current theme
@@ -14340,14 +14653,15 @@ var StyleManager = class {
 	setTheme(theme) {
 		if (typeof theme === "string") {
 			const builtIn = this._builtInThemes.get(theme);
-			if (builtIn !== void 0) this._theme = builtIn;
-		} else this._theme = theme;
+			if (builtIn === void 0) throw new Error(`Unknown theme: ${theme}`);
+			this._theme = cloneTheme(builtIn);
+		} else this._theme = cloneTheme(theme);
 	}
 	/**
 	* Register a custom theme
 	*/
 	registerTheme(theme) {
-		this._builtInThemes.set(theme.name, theme);
+		this._builtInThemes.set(theme.name, cloneTheme(theme));
 	}
 	/**
 	* Get all available theme names
@@ -14462,10 +14776,17 @@ var StyleManager = class {
 		}
 	}
 	getBaseEdgeStyle(state) {
+		const defaultStyle = this._theme.edge.default;
 		switch (state) {
-			case "hover": return this._theme.edge.hover;
-			case "selected": return this._theme.edge.selected;
-			default: return this._theme.edge.default;
+			case "hover": return {
+				...defaultStyle,
+				...this._theme.edge.hover
+			};
+			case "selected": return {
+				...defaultStyle,
+				...this._theme.edge.selected
+			};
+			default: return defaultStyle;
 		}
 	}
 };
@@ -14637,36 +14958,7 @@ var Serializer = class {
 			position: port.position,
 			styleClass: port.styleClass
 		}));
-		let label;
-		if (node.label) {
-			const ins = node.label.inset;
-			const defaultInset = 8;
-			const serializedInset = ins.top === defaultInset && ins.right === defaultInset && ins.bottom === defaultInset && ins.left === defaultInset ? void 0 : ins.top === ins.right && ins.top === ins.bottom && ins.top === ins.left ? ins.top : {
-				top: ins.top,
-				right: ins.right,
-				bottom: ins.bottom,
-				left: ins.left
-			};
-			if (hasNonDefaultValues({
-				text: node.label.text,
-				style: node.label.style,
-				maxWidth: node.label.maxWidth,
-				inset: serializedInset ?? void 0,
-				styleClass: node.label.styleClass
-			}, {
-				inset: void 0,
-				style: {},
-				maxWidth: void 0,
-				styleClass: void 0
-			})) label = omitEmptyValues({
-				text: node.label.text,
-				style: Object.keys(node.label.style).length > 0 ? node.label.style : void 0,
-				maxWidth: node.label.maxWidth,
-				inset: serializedInset,
-				styleClass: node.label.styleClass
-			});
-			else label = node.label.text;
-		}
+		const label = node.label ? this.serializeTextLabel(node.label) : void 0;
 		let icon;
 		if (node.icon) {
 			const opts = node.icon.options;
@@ -14699,6 +14991,8 @@ var Serializer = class {
 		if (hasNonDefaultValues(anchorData, anchorDefaults)) anchorPoints = omitDefaultValues(anchorData, anchorDefaults);
 		const contentInset = node.contentInset;
 		const hasContentInset = contentInset.top !== 0 || contentInset.right !== 0 || contentInset.bottom !== 0 || contentInset.left !== 0;
+		const contentInsetScale = node.contentInsetScale;
+		const hasContentInsetScale = Object.keys(contentInsetScale).length > 0;
 		const base = omitEmptyValues({
 			id: node.id,
 			type: node.typeName,
@@ -14706,14 +15000,16 @@ var Serializer = class {
 			y: node.y,
 			width: node.width,
 			height: node.height,
-			style: node.style,
+			style: { ...node.styleOverrides },
 			styleClass: node.styleClass,
 			label,
-			labelStyleClass: typeof label === "string" ? node.label?.styleClass : void 0,
 			labelPlacement: node.labelPlacement !== "center" ? node.labelPlacement : void 0,
 			labelGap: node.labelGap !== 4 ? node.labelGap : void 0,
 			icon,
 			contentInset: hasContentInset ? contentInset : void 0,
+			contentInsetScale: hasContentInsetScale ? contentInsetScale : void 0,
+			contentInsetBaseSize: node.contentInsetBaseSize,
+			badges: node.badges.length > 0 ? node.badges.map((badge) => ({ ...badge })) : void 0,
 			anchorPoints,
 			ports: ports.length > 0 ? ports : void 0,
 			data: Object.keys(node.data).length > 0 ? node.data : void 0
@@ -14740,14 +15036,14 @@ var Serializer = class {
 			arrowType: edge.arrowType,
 			startMarker: edge.startMarker,
 			endMarker: edge.endMarker,
-			style: edge.style,
+			style: { ...edge.styleOverrides },
 			styleClass: edge.styleClass,
-			label: edge.label?.text,
-			labelStyleClass: edge.label?.styleClass,
+			label: edge.label ? this.serializeTextLabel(edge.label) : void 0,
 			labelOffset: edge.labelOffset !== 0 ? edge.labelOffset : void 0,
 			labelPosition: edge.labelPosition !== .5 ? edge.labelPosition : void 0,
 			labelFollowPath: edge.labelFollowPath ? true : void 0,
 			labelBackground: edge.labelBackground,
+			lockAnchors: edge.lockAnchors ? void 0 : false,
 			labelLineGap: edge.labelLineGap ? true : void 0,
 			data: Object.keys(edge.data).length > 0 ? edge.data : void 0
 		};
@@ -14756,12 +15052,31 @@ var Serializer = class {
 		return {
 			id: group.id,
 			childIds: group.children.map((c) => c.id),
-			style: group.style,
+			style: { ...group.styleOverrides },
 			styleClass: group.styleClass,
 			label: group.label,
+			padding: group.padding !== 20 ? group.padding : void 0,
 			data: Object.keys(group.data).length > 0 ? group.data : void 0
 		};
 	}
+	serializeTextLabel(label) {
+		const inset = label.inset;
+		const serializedInset = inset.top === 8 && inset.right === 8 && inset.bottom === 8 && inset.left === 8 ? void 0 : inset.top === inset.right && inset.top === inset.bottom && inset.top === inset.left ? inset.top : {
+			top: inset.top,
+			right: inset.right,
+			bottom: inset.bottom,
+			left: inset.left
+		};
+		const style = label.styleOverrides;
+		if (!(Object.keys(style).length > 0 || label.maxWidth !== void 0 || serializedInset !== void 0 || label.styleClass !== void 0)) return label.text;
+		return omitEmptyValues({
+			text: label.text,
+			style: Object.keys(style).length > 0 ? style : void 0,
+			maxWidth: label.maxWidth,
+			inset: serializedInset,
+			styleClass: label.styleClass
+		});
+	}
 };
 //#endregion
 //#region src/utils/download.ts
@@ -14843,7 +15158,11 @@ var ImageExporter = class {
 		const padding = options.padding ?? 20;
 		const format = options.format ?? "png";
 		const quality = options.quality ?? .92;
-		const bounds = getContentBounds({ nodes: this.renderer.nodes.values() });
+		const bounds = getContentBounds({
+			nodes: this.renderer.nodes.values(),
+			edges: this.renderer.edges.values(),
+			groups: this.renderer.groups.values()
+		});
 		if (bounds === null) return this.createBlankImage(100, 100, backgroundColor, format, quality);
 		const width = (bounds.width + padding * 2) * scale;
 		const height = (bounds.height + padding * 2) * scale;
@@ -14895,6 +15214,7 @@ var SvgExporter = class {
 		const padding = options.padding ?? 20;
 		const includeBackground = options.includeBackground ?? true;
 		const backgroundColor = options.backgroundColor ?? "#ffffff";
+		const escapedBackgroundColor = this.escapeAttribute(backgroundColor);
 		const edgeLabelOffset = options.edgeLabelOffset;
 		const bounds = getContentBounds({
 			nodes: this.renderer.nodes.values(),
@@ -14911,7 +15231,7 @@ var SvgExporter = class {
 		const renderedEdges = [];
 		parts.push(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`);
 		for (const edge of this.renderer.edges.values()) if (edge.visible) renderedEdges.push(this.renderEdge(edge, edgeLabelOffset));
-		if (includeBackground) parts.push(`<rect width="100%" height="100%" fill="${backgroundColor}"/>`);
+		if (includeBackground) parts.push(`<rect width="100%" height="100%" fill="${escapedBackgroundColor}"/>`);
 		parts.push(`<g transform="translate(${offsetX}, ${offsetY})">`);
 		for (const group of this.renderer.groups.values()) if (group.visible) parts.push(this.renderGroup(group));
 		for (const node of this.renderer.nodes.values()) if (node.visible) parts.push(this.renderNode(node));
@@ -14930,8 +15250,8 @@ var SvgExporter = class {
 	renderGroup(group) {
 		const bounds = group.getBounds();
 		const style = group.style;
-		const fill = style.fillColor ?? "rgba(200, 200, 200, 0.2)";
-		const stroke = style.strokeColor ?? "#999999";
+		const fill = this.escapeAttribute(style.fillColor ?? "rgba(200, 200, 200, 0.2)");
+		const stroke = this.escapeAttribute(style.strokeColor ?? "#999999");
 		const strokeWidth = style.strokeWidth ?? 1;
 		const opacity = style.opacity ?? 1;
 		const label = group.label ? `<text x="${bounds.x + 8}" y="${bounds.y + 14}" fill="#666666" font-size="12">${this.escapeText(group.label)}</text>` : "";
@@ -14945,8 +15265,8 @@ var SvgExporter = class {
 	renderNode(node) {
 		const bounds = node.getBounds();
 		const style = node.style;
-		const fill = style.fillColor ?? "#ffffff";
-		const stroke = style.strokeColor ?? "#333333";
+		const fill = this.escapeAttribute(style.fillColor ?? "#ffffff");
+		const stroke = this.escapeAttribute(style.strokeColor ?? "#333333");
 		const strokeWidth = style.strokeWidth ?? 2;
 		const baseOpacity = style.opacity ?? 1;
 		const fillOpacity = (style.fillOpacity ?? 1) * baseOpacity;
@@ -15043,14 +15363,15 @@ var SvgExporter = class {
 		if (edge.path.length < 2) return "";
 		const style = edge.style;
 		const stroke = style.strokeColor ?? "#666666";
+		const escapedStroke = this.escapeAttribute(stroke);
 		const strokeWidth = style.strokeWidth ?? 2;
 		const strokeOpacity = (style.strokeOpacity ?? 1) * (style.opacity ?? 1);
-		const lineCap = style.lineCap ? ` stroke-linecap="${style.lineCap}"` : "";
-		const lineJoin = style.lineJoin ? ` stroke-linejoin="${style.lineJoin}"` : "";
+		const lineCap = style.lineCap ? ` stroke-linecap="${this.escapeAttribute(style.lineCap)}"` : "";
+		const lineJoin = style.lineJoin ? ` stroke-linejoin="${this.escapeAttribute(style.lineJoin)}"` : "";
 		const dashValues = style.flowDash ?? style.lineDash;
 		const dash = dashValues ? ` stroke-dasharray="${dashValues.join(" ")}"` : "";
 		const dashOffset = style.lineDashOffset !== void 0 ? ` stroke-dashoffset="${style.lineDashOffset}"` : "";
-		return `<path d="${this.buildEdgePath(edge, edgeLabelOffset)}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}" color="${stroke}"${lineCap}${lineJoin}${dash}${dashOffset}/>${this.renderEdgeMarkers(edge, stroke)}${this.renderEdgeLabel(edge, edgeLabelOffset)}`;
+		return `<path d="${this.buildEdgePath(edge, edgeLabelOffset)}" fill="none" stroke="${escapedStroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}" color="${escapedStroke}"${lineCap}${lineJoin}${dash}${dashOffset}/>${this.renderEdgeMarkers(edge, stroke)}${this.renderEdgeLabel(edge, edgeLabelOffset)}`;
 	}
 	renderEdgeLabel(edge, edgeLabelOffset) {
 		if (!edge.label) return "";
@@ -15062,7 +15383,7 @@ var SvgExporter = class {
 	renderEdgeLabelBackground(edge, point, rotation = 0) {
 		if (!edge.label) return "";
 		const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.inset);
-		const bgColor = edge.labelBackground?.color ?? "#ffffff";
+		const bgColor = this.escapeAttribute(edge.labelBackground?.color ?? "#ffffff");
 		const bgOpacity = edge.labelBackground?.opacity ?? 1;
 		const bgRadius = edge.labelBackground?.borderRadius ?? 2;
 		const x = point.x - metrics.width / 2;
@@ -15143,7 +15464,11 @@ var SvgExporter = class {
 		return calculateMarkerPoints(edge.path, position, edge.type);
 	}
 	renderMarkerShape(marker, from, to, edgeStroke) {
-		return generateSvgMarker(marker, from, to, edgeStroke);
+		return generateSvgMarker({
+			...marker,
+			strokeColor: marker.strokeColor !== void 0 ? this.escapeAttribute(marker.strokeColor) : void 0,
+			fillColor: marker.fillColor !== void 0 ? this.escapeAttribute(marker.fillColor) : void 0
+		}, from, to, this.escapeAttribute(edgeStroke));
 	}
 	buildPath(edge) {
 		const path = edge.path;
@@ -15213,11 +15538,11 @@ var SvgExporter = class {
 		};
 	}
 	renderTextLabel(text, point, style = {}, rotation = 0) {
-		const fill = style.color ?? "#000000";
+		const fill = this.escapeAttribute(style.color ?? "#000000");
 		const fontSize = style.fontSize ?? 14;
-		const fontFamily = style.fontFamily ?? "sans-serif";
-		const fontWeight = style.fontWeight ?? "normal";
-		const fontStyle = style.fontStyle ?? "normal";
+		const fontFamily = this.escapeAttribute(style.fontFamily ?? "sans-serif");
+		const fontWeight = this.escapeAttribute(style.fontWeight ?? "normal");
+		const fontStyle = this.escapeAttribute(style.fontStyle ?? "normal");
 		const fontStyleAttr = fontStyle !== "normal" ? ` font-style="${fontStyle}"` : "";
 		const opacity = style.opacity ?? 1;
 		const anchor = style.align === "left" ? "start" : style.align === "right" ? "end" : "middle";
@@ -15413,9 +15738,10 @@ var SvgExporter = class {
 		return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 	}
 	createEmptySvg(width, height, backgroundColor, includeBackground) {
+		const escapedBackgroundColor = this.escapeAttribute(backgroundColor);
 		return [
 			`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
-			includeBackground ? `<rect width="100%" height="100%" fill="${backgroundColor}"/>` : "",
+			includeBackground ? `<rect width="100%" height="100%" fill="${escapedBackgroundColor}"/>` : "",
 			"</svg>"
 		].join("");
 	}
@@ -15546,6 +15872,24 @@ function distributeNodes(nodes, type) {
 		}
 	}
 }
+/**
+* World step that keeps the visible grid cell in a Miro-like range.
+* The base `gridSize` is doubled or halved so the screen size stays ~16–32 px.
+*/
+function adaptiveGridStep(gridSize, zoom) {
+	if (!Number.isFinite(gridSize) || !Number.isFinite(zoom) || gridSize <= 0 || zoom <= 0) return gridSize;
+	let step = gridSize;
+	let screen = step * zoom;
+	while (screen < 16) {
+		step *= 2;
+		screen *= 2;
+	}
+	while (screen > 32) {
+		step /= 2;
+		screen /= 2;
+	}
+	return step;
+}
 //#endregion
 //#region src/core/overlays/BaseOverlay.ts
 /**
@@ -15584,20 +15928,20 @@ var GridOverlay = class extends BaseOverlay {
 			if (!this.enabled) return;
 			const width = renderer.width;
 			const height = renderer.height;
-			const gridSize = this.gridSize;
-			const color = this.color;
-			const startX = Math.floor(-renderer.offsetX / renderer.zoom / gridSize) * gridSize;
-			const startY = Math.floor(-renderer.offsetY / renderer.zoom / gridSize) * gridSize;
-			const endX = Math.ceil((width - renderer.offsetX) / renderer.zoom / gridSize) * gridSize;
-			const endY = Math.ceil((height - renderer.offsetY) / renderer.zoom / gridSize) * gridSize;
-			ctx.strokeStyle = color;
-			ctx.lineWidth = 1 / renderer.zoom;
+			const zoom = renderer.zoom;
+			const step = adaptiveGridStep(this.gridSize, zoom);
+			const startX = Math.floor(-renderer.offsetX / zoom / step) * step;
+			const startY = Math.floor(-renderer.offsetY / zoom / step) * step;
+			const endX = Math.ceil((width - renderer.offsetX) / zoom / step) * step;
+			const endY = Math.ceil((height - renderer.offsetY) / zoom / step) * step;
+			ctx.strokeStyle = this.color;
+			ctx.lineWidth = 1 / zoom;
 			ctx.beginPath();
-			for (let x = startX; x <= endX; x += gridSize) {
+			for (let x = startX; x <= endX; x += step) {
 				ctx.moveTo(x, startY);
 				ctx.lineTo(x, endY);
 			}
-			for (let y = startY; y <= endY; y += gridSize) {
+			for (let y = startY; y <= endY; y += step) {
 				ctx.moveTo(startX, y);
 				ctx.lineTo(endX, y);
 			}
@@ -15610,51 +15954,114 @@ var GridOverlay = class extends BaseOverlay {
 var RulersOverlay = class extends BaseOverlay {
 	constructor(options = {}) {
 		super(options.enabled ?? true);
+		this.tickBake = null;
+		this.tickBakeGeneration = 0;
 		this.thickness = options.thickness ?? 20;
 		this.backgroundColor = options.backgroundColor ?? "#f4f4f5";
 		this.textColor = options.textColor ?? "#52525b";
 		this.tickColor = options.tickColor ?? "#a1a1aa";
 	}
+	getTickBakeGeneration() {
+		return this.tickBakeGeneration;
+	}
 	install(renderer) {
 		this.removeOverlay = renderer.addOverlayRenderer((ctx) => {
 			if (!this.enabled) return;
 			const thickness = this.thickness;
+			const zoom = renderer.zoom;
+			const worldLeft = -renderer.offsetX / zoom;
+			const worldTop = -renderer.offsetY / zoom;
 			ctx.save();
 			ctx.setTransform(renderer.pixelRatio, 0, 0, renderer.pixelRatio, 0, 0);
 			ctx.fillStyle = this.backgroundColor;
 			ctx.fillRect(0, 0, renderer.width, thickness);
 			ctx.fillRect(0, 0, thickness, renderer.height);
-			ctx.strokeStyle = this.tickColor;
-			ctx.fillStyle = this.textColor;
-			ctx.font = "10px sans-serif";
-			ctx.textAlign = "left";
-			ctx.textBaseline = "top";
-			const step = this.getTickStep(renderer.zoom);
-			const worldLeft = -renderer.offsetX / renderer.zoom;
-			const worldTop = -renderer.offsetY / renderer.zoom;
-			const worldRight = worldLeft + renderer.width / renderer.zoom;
-			const worldBottom = worldTop + renderer.height / renderer.zoom;
-			ctx.beginPath();
-			for (let x = Math.floor(worldLeft / step) * step; x <= worldRight; x += step) {
-				const screenX = x * renderer.zoom + renderer.offsetX;
-				ctx.moveTo(screenX, thickness);
-				ctx.lineTo(screenX, thickness - 6);
-				ctx.fillText(`${Math.round(x)}`, screenX + 2, 2);
-			}
-			for (let y = Math.floor(worldTop / step) * step; y <= worldBottom; y += step) {
-				const screenY = y * renderer.zoom + renderer.offsetY;
-				ctx.moveTo(thickness, screenY);
-				ctx.lineTo(thickness - 6, screenY);
-				ctx.save();
-				ctx.translate(2, screenY + 2);
-				ctx.rotate(-Math.PI / 2);
-				ctx.fillText(`${Math.round(y)}`, 0, 0);
-				ctx.restore();
-			}
-			ctx.stroke();
+			const bake = this.ensureTickBake(renderer);
+			const srcX = (worldLeft - bake.worldLeft) * zoom;
+			const srcY = (worldTop - bake.worldTop) * zoom;
+			const pr = renderer.pixelRatio;
+			ctx.drawImage(bake.horizontal, srcX * pr, 0, renderer.width * pr, thickness * pr, 0, 0, renderer.width, thickness);
+			ctx.drawImage(bake.vertical, 0, srcY * pr, thickness * pr, renderer.height * pr, 0, 0, thickness, renderer.height);
 			ctx.restore();
 		});
 	}
+	ensureTickBake(renderer) {
+		const zoom = renderer.zoom;
+		const worldLeft = -renderer.offsetX / zoom;
+		const worldTop = -renderer.offsetY / zoom;
+		const worldRight = worldLeft + renderer.width / zoom;
+		const worldBottom = worldTop + renderer.height / zoom;
+		if (this.tickBake !== null && this.tickBake.zoom === zoom && this.tickBake.pixelRatio === renderer.pixelRatio && worldLeft >= this.tickBake.worldLeft && worldRight <= this.tickBake.worldRight && worldTop >= this.tickBake.worldTop && worldBottom <= this.tickBake.worldBottom) return this.tickBake;
+		const extraX = renderer.width / zoom;
+		const extraY = renderer.height / zoom;
+		const bakeLeft = worldLeft - extraX;
+		const bakeTop = worldTop - extraY;
+		const bakeRight = worldRight + extraX;
+		const bakeBottom = worldBottom + extraY;
+		const pr = Math.max(1, renderer.pixelRatio);
+		const thickness = this.thickness;
+		const step = this.getTickStep(zoom);
+		const horizontal = this.tickBake?.horizontal ?? document.createElement("canvas");
+		const vertical = this.tickBake?.vertical ?? document.createElement("canvas");
+		const hWidth = Math.max(1, Math.ceil((bakeRight - bakeLeft) * zoom));
+		const vHeight = Math.max(1, Math.ceil((bakeBottom - bakeTop) * zoom));
+		horizontal.width = Math.max(1, Math.ceil(hWidth * pr));
+		horizontal.height = Math.max(1, Math.ceil(thickness * pr));
+		vertical.width = Math.max(1, Math.ceil(thickness * pr));
+		vertical.height = Math.max(1, Math.ceil(vHeight * pr));
+		const hCtx = horizontal.getContext("2d");
+		const vCtx = vertical.getContext("2d");
+		if (hCtx !== null) {
+			hCtx.setTransform(pr, 0, 0, pr, 0, 0);
+			hCtx.clearRect(0, 0, hWidth, thickness);
+			hCtx.strokeStyle = this.tickColor;
+			hCtx.fillStyle = this.textColor;
+			hCtx.font = "10px sans-serif";
+			hCtx.textAlign = "left";
+			hCtx.textBaseline = "top";
+			hCtx.beginPath();
+			for (let x = Math.floor(bakeLeft / step) * step; x <= bakeRight; x += step) {
+				const screenX = (x - bakeLeft) * zoom;
+				hCtx.moveTo(screenX, thickness);
+				hCtx.lineTo(screenX, thickness - 6);
+				hCtx.fillText(`${Math.round(x)}`, screenX + 2, 2);
+			}
+			hCtx.stroke();
+		}
+		if (vCtx !== null) {
+			vCtx.setTransform(pr, 0, 0, pr, 0, 0);
+			vCtx.clearRect(0, 0, thickness, vHeight);
+			vCtx.strokeStyle = this.tickColor;
+			vCtx.fillStyle = this.textColor;
+			vCtx.font = "10px sans-serif";
+			vCtx.textAlign = "left";
+			vCtx.textBaseline = "top";
+			vCtx.beginPath();
+			for (let y = Math.floor(bakeTop / step) * step; y <= bakeBottom; y += step) {
+				const screenY = (y - bakeTop) * zoom;
+				vCtx.moveTo(thickness, screenY);
+				vCtx.lineTo(thickness - 6, screenY);
+				vCtx.save();
+				vCtx.translate(2, screenY + 2);
+				vCtx.rotate(-Math.PI / 2);
+				vCtx.fillText(`${Math.round(y)}`, 0, 0);
+				vCtx.restore();
+			}
+			vCtx.stroke();
+		}
+		this.tickBakeGeneration += 1;
+		this.tickBake = {
+			zoom,
+			pixelRatio: renderer.pixelRatio,
+			worldLeft: bakeLeft,
+			worldTop: bakeTop,
+			worldRight: bakeRight,
+			worldBottom: bakeBottom,
+			horizontal,
+			vertical
+		};
+		return this.tickBake;
+	}
 	getTickStep(zoom) {
 		const rawStep = 80 / zoom;
 		const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
@@ -15710,6 +16117,7 @@ var GuidesOverlay = class extends BaseOverlay {
 var MiniMap = class extends BaseOverlay {
 	constructor(options = {}) {
 		super(options.enabled ?? true);
+		this.contentBake = null;
 		this.options = {
 			width: options.width ?? 180,
 			height: options.height ?? 120,
@@ -15721,12 +16129,16 @@ var MiniMap = class extends BaseOverlay {
 			anchor: options.anchor ?? "bottom-right"
 		};
 	}
+	/** Cached bake projection; stable across pan if only the viewport moved. */
+	getContentBakeProjectionKey() {
+		return this.contentBake?.projectionKey ?? null;
+	}
 	install(renderer) {
 		this.removeOverlay = renderer.addTopOverlayRenderer((ctx) => {
 			if (!this.enabled) return;
 			const layout = this.computeLayout(renderer);
 			if (!layout) return;
-			const { x, y, width, height, bounds, scale, mapOffsetX, mapOffsetY, viewRect } = layout;
+			const { x, y, width, height, viewRect } = layout;
 			ctx.save();
 			ctx.setTransform(renderer.pixelRatio, 0, 0, renderer.pixelRatio, 0, 0);
 			ctx.setLineDash([]);
@@ -15736,42 +16148,61 @@ var MiniMap = class extends BaseOverlay {
 			ctx.strokeStyle = this.options.borderColor;
 			ctx.lineWidth = 1;
 			ctx.strokeRect(x, y, width, height);
-			ctx.save();
-			ctx.translate(mapOffsetX, mapOffsetY);
-			ctx.scale(scale, scale);
-			ctx.translate(-bounds.x, -bounds.y);
-			ctx.setLineDash([]);
-			ctx.lineDashOffset = 0;
-			ctx.strokeStyle = "#94a3b8";
-			ctx.lineWidth = 1 / scale;
-			for (const edge of renderer.edges.values()) {
-				if (!edge.visible) continue;
-				const path = edge.path;
-				if (path.length < 2) continue;
-				ctx.beginPath();
-				ctx.moveTo(path[0].x, path[0].y);
-				for (let i = 1; i < path.length; i++) ctx.lineTo(path[i].x, path[i].y);
-				ctx.stroke();
+			const bake = this.ensureContentBake(renderer, layout);
+			ctx.drawImage(bake, x, y, width, height);
+			if (viewRect.width >= 0 && viewRect.height >= 0) {
+				ctx.strokeStyle = this.options.viewportColor;
+				ctx.lineWidth = 1.5;
+				ctx.setLineDash([]);
+				ctx.lineDashOffset = 0;
+				ctx.strokeRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
 			}
-			for (const node of renderer.nodes.values()) {
-				if (!node.visible) continue;
-				const b = node.getBounds();
-				ctx.fillStyle = "#e2e8f0";
-				ctx.fillRect(b.x, b.y, b.width, b.height);
-			}
-			ctx.restore();
-			if (viewRect.width < 0 || viewRect.height < 0) {
-				ctx.restore();
-				return;
-			}
-			ctx.strokeStyle = this.options.viewportColor;
-			ctx.lineWidth = 1.5;
-			ctx.setLineDash([]);
-			ctx.lineDashOffset = 0;
-			ctx.strokeRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
 			ctx.restore();
 		});
 	}
+	ensureContentBake(renderer, layout) {
+		const { x, y, width, height, bounds, scale, mapOffsetX, mapOffsetY } = layout;
+		const revision = renderer.getContentRevision();
+		const projectionKey = [
+			width,
+			height,
+			Math.round(bounds.x),
+			Math.round(bounds.y),
+			Math.round(bounds.width),
+			Math.round(bounds.height),
+			scale.toFixed(5),
+			Math.round(mapOffsetX),
+			Math.round(mapOffsetY)
+		].join("|");
+		if (this.contentBake !== null && this.contentBake.revision === revision && this.contentBake.projectionKey === projectionKey) return this.contentBake.canvas;
+		const canvas = this.contentBake?.canvas ?? document.createElement("canvas");
+		const pixelRatio = Math.max(1, Math.min(2, renderer.pixelRatio));
+		canvas.width = Math.max(1, Math.ceil(width * pixelRatio));
+		canvas.height = Math.max(1, Math.ceil(height * pixelRatio));
+		const ctx = canvas.getContext("2d");
+		if (ctx === null) return canvas;
+		ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+		ctx.clearRect(0, 0, width, height);
+		ctx.save();
+		ctx.translate(mapOffsetX - x, mapOffsetY - y);
+		ctx.scale(scale, scale);
+		ctx.translate(-bounds.x, -bounds.y);
+		ctx.setLineDash([]);
+		ctx.lineDashOffset = 0;
+		for (const node of renderer.nodes.values()) {
+			if (!node.visible) continue;
+			const b = node.getBounds();
+			ctx.fillStyle = "#e2e8f0";
+			ctx.fillRect(b.x, b.y, b.width, b.height);
+		}
+		ctx.restore();
+		this.contentBake = {
+			revision,
+			projectionKey,
+			canvas
+		};
+		return canvas;
+	}
 	beginOverlayDrag(renderer, screenX, screenY) {
 		const hit = this.hitTestMiniMap(renderer, screenX, screenY);
 		if (!hit) return null;
@@ -15833,12 +16264,11 @@ var MiniMap = class extends BaseOverlay {
 	computeLayout(renderer) {
 		const rawBounds = getContentBounds({
 			nodes: renderer.nodes.values(),
-			edges: renderer.edges.values(),
 			groups: renderer.groups.values()
 		});
 		if (!rawBounds) return null;
 		const margin = this.options.contentMargin;
-		const expandedContentBounds = {
+		const bounds = {
 			x: rawBounds.x - margin,
 			y: rawBounds.y - margin,
 			width: rawBounds.width + 2 * margin,
@@ -15848,17 +16278,7 @@ var MiniMap = class extends BaseOverlay {
 		const x = anchor === "bottom-left" || anchor === "top-left" ? padding : renderer.width - width - padding;
 		const y = anchor === "top-left" || anchor === "top-right" ? padding : renderer.height - height - padding;
 		const viewportBounds = this.getViewportBounds(renderer);
-		const unionMinX = Math.min(expandedContentBounds.x, viewportBounds.x);
-		const unionMinY = Math.min(expandedContentBounds.y, viewportBounds.y);
-		const unionMaxX = Math.max(expandedContentBounds.x + expandedContentBounds.width, viewportBounds.x + viewportBounds.width);
-		const unionMaxY = Math.max(expandedContentBounds.y + expandedContentBounds.height, viewportBounds.y + viewportBounds.height);
-		const bounds = {
-			x: unionMinX,
-			y: unionMinY,
-			width: unionMaxX - unionMinX,
-			height: unionMaxY - unionMinY
-		};
-		const scale = Math.min(width / bounds.width, height / bounds.height);
+		const scale = Math.min(width / Math.max(bounds.width, 1), height / Math.max(bounds.height, 1));
 		const mapOffsetX = x + (width - bounds.width * scale) / 2;
 		const mapOffsetY = y + (height - bounds.height * scale) / 2;
 		let viewX = mapOffsetX + (viewportBounds.x - bounds.x) * scale;