@bpmnkit/editor 0.0.8

package/dist/editor.js

@@ -0,0 +1,1977 @@
+import { KeyboardHandler, ViewportController, computeDiagramBounds, createDefs, createGrid, injectStyles, render, } from "@bpmnkit/canvas";
+import { Bpmn, applyAutoLayout } from "@bpmnkit/core";
+import { CommandStack } from "./command-stack.js";
+import { injectEditorStyles } from "./css.js";
+import { closestPort, computeWaypoints, computeWaypointsAvoiding, computeWaypointsWithPorts, diagramToScreen, labelBoundsForPosition, portFromWaypoint, screenToDiagram, } from "./geometry.js";
+import { LabelEditor } from "./label-editor.js";
+import { changeElementType as changeElementTypeFn, copyElements, createAnnotation, createAnnotationWithLink, createBoundaryEvent, createConnection, createEmptyDefinitions, createShape, deleteElements, insertEdgeWaypoint, insertShapeOnEdge, moveEdgeWaypoint, moveShapes, pasteElements, removeCollinearWaypoints, resizeShape, updateEdgeEndpoint, updateLabel, updateLabelPosition, updateShapeColor, } from "./modeling.js";
+import { OverlayRenderer } from "./overlay.js";
+import { canConnect } from "./rules.js";
+import { EditorStateMachine } from "./state-machine.js";
+import { RESIZABLE_TYPES } from "./types.js";
+const NS = "http://www.w3.org/2000/svg";
+let _instanceCounter = 0;
+function defaultBounds(type, cx, cy) {
+    switch (type) {
+        case "startEvent":
+        case "messageStartEvent":
+        case "timerStartEvent":
+        case "conditionalStartEvent":
+        case "signalStartEvent":
+        case "endEvent":
+        case "messageEndEvent":
+        case "escalationEndEvent":
+        case "errorEndEvent":
+        case "compensationEndEvent":
+        case "signalEndEvent":
+        case "terminateEndEvent":
+        case "intermediateThrowEvent":
+        case "intermediateCatchEvent":
+        case "messageCatchEvent":
+        case "messageThrowEvent":
+        case "timerCatchEvent":
+        case "escalationThrowEvent":
+        case "conditionalCatchEvent":
+        case "linkCatchEvent":
+        case "linkThrowEvent":
+        case "compensationThrowEvent":
+        case "signalCatchEvent":
+        case "signalThrowEvent":
+            return { x: cx - 18, y: cy - 18, width: 36, height: 36 };
+        case "exclusiveGateway":
+        case "parallelGateway":
+        case "inclusiveGateway":
+        case "eventBasedGateway":
+        case "complexGateway":
+            return { x: cx - 25, y: cy - 25, width: 50, height: 50 };
+        case "subProcess":
+        case "adHocSubProcess":
+        case "transaction":
+            return { x: cx - 100, y: cy - 60, width: 200, height: 120 };
+        case "textAnnotation":
+            return { x: cx - 50, y: cy - 25, width: 100, height: 50 };
+        default:
+            return { x: cx - 50, y: cy - 40, width: 100, height: 80 };
+    }
+}
+function resolveEventPaletteType(bpmnType, defType) {
+    if (bpmnType === "startEvent") {
+        if (defType === "message")
+            return "messageStartEvent";
+        if (defType === "timer")
+            return "timerStartEvent";
+        if (defType === "conditional")
+            return "conditionalStartEvent";
+        if (defType === "signal")
+            return "signalStartEvent";
+    }
+    if (bpmnType === "endEvent") {
+        if (defType === "message")
+            return "messageEndEvent";
+        if (defType === "escalation")
+            return "escalationEndEvent";
+        if (defType === "error")
+            return "errorEndEvent";
+        if (defType === "compensate")
+            return "compensationEndEvent";
+        if (defType === "signal")
+            return "signalEndEvent";
+        if (defType === "terminate")
+            return "terminateEndEvent";
+    }
+    if (bpmnType === "intermediateCatchEvent") {
+        if (defType === "message")
+            return "messageCatchEvent";
+        if (defType === "timer")
+            return "timerCatchEvent";
+        if (defType === "conditional")
+            return "conditionalCatchEvent";
+        if (defType === "link")
+            return "linkCatchEvent";
+        if (defType === "signal")
+            return "signalCatchEvent";
+    }
+    if (bpmnType === "intermediateThrowEvent") {
+        if (defType === "message")
+            return "messageThrowEvent";
+        if (defType === "escalation")
+            return "escalationThrowEvent";
+        if (defType === "link")
+            return "linkThrowEvent";
+        if (defType === "compensate")
+            return "compensationThrowEvent";
+        if (defType === "signal")
+            return "signalThrowEvent";
+    }
+    return bpmnType;
+}
+const INTERMEDIATE_EVENT_TYPES = new Set([
+    "intermediateThrowEvent",
+    "intermediateCatchEvent",
+    "messageCatchEvent",
+    "messageThrowEvent",
+    "timerCatchEvent",
+    "escalationThrowEvent",
+    "conditionalCatchEvent",
+    "linkCatchEvent",
+    "linkThrowEvent",
+    "compensationThrowEvent",
+    "signalCatchEvent",
+    "signalThrowEvent",
+]);
+const ACTIVITY_TYPES = new Set([
+    "task",
+    "serviceTask",
+    "userTask",
+    "scriptTask",
+    "sendTask",
+    "receiveTask",
+    "businessRuleTask",
+    "manualTask",
+    "callActivity",
+    "subProcess",
+    "adHocSubProcess",
+    "eventSubProcess",
+    "transaction",
+]);
+function isIntermediateEventType(type) {
+    return INTERMEDIATE_EVENT_TYPES.has(type);
+}
+function isActivityType(type) {
+    return ACTIVITY_TYPES.has(type);
+}
+function snapToBoundary(center, hostBounds, r) {
+    // Clamp center to host boundary and return event bounds
+    const left = hostBounds.x;
+    const right = hostBounds.x + hostBounds.width;
+    const top = hostBounds.y;
+    const bottom = hostBounds.y + hostBounds.height;
+    // Find the nearest point on the rect border
+    const clampedX = Math.max(left, Math.min(right, center.x));
+    const clampedY = Math.max(top, Math.min(bottom, center.y));
+    // Determine which edge is closest
+    const dLeft = Math.abs(center.x - left);
+    const dRight = Math.abs(center.x - right);
+    const dTop = Math.abs(center.y - top);
+    const dBottom = Math.abs(center.y - bottom);
+    const minD = Math.min(dLeft, dRight, dTop, dBottom);
+    let snapX = clampedX;
+    let snapY = clampedY;
+    if (minD === dLeft)
+        snapX = left;
+    else if (minD === dRight)
+        snapX = right;
+    else if (minD === dTop)
+        snapY = top;
+    else
+        snapY = bottom;
+    // Clamp to host boundary so center is on the edge
+    snapX = Math.max(left, Math.min(right, snapX));
+    snapY = Math.max(top, Math.min(bottom, snapY));
+    return { x: snapX - r, y: snapY - r, width: r * 2, height: r * 2 };
+}
+function intermediateEventDefType(type) {
+    switch (type) {
+        case "messageCatchEvent":
+        case "messageThrowEvent":
+            return "message";
+        case "timerCatchEvent":
+            return "timer";
+        case "escalationThrowEvent":
+            return "escalation";
+        case "conditionalCatchEvent":
+            return "conditional";
+        case "linkCatchEvent":
+        case "linkThrowEvent":
+            return "link";
+        case "compensationThrowEvent":
+            return "compensate";
+        case "signalCatchEvent":
+        case "signalThrowEvent":
+            return "signal";
+        default:
+            return null;
+    }
+}
+/**
+ * BpmnEditor — a full BPMN 2.0 diagram editor with create, move, resize,
+ * connect, delete, label-edit, undo/redo, and copy/paste.
+ */
+export class BpmnEditor {
+    // ── DOM ────────────────────────────────────────────────────────────
+    _id;
+    _host;
+    _svg;
+    _viewportG;
+    _containersG;
+    _edgesG;
+    _shapesG;
+    _labelsG;
+    _overlayG;
+    _gridPattern = null;
+    _markerId = "";
+    // ── Sub-systems ────────────────────────────────────────────────────
+    _viewport;
+    _keyboard;
+    _overlay;
+    _commandStack;
+    _stateMachine;
+    _labelEditor;
+    _plugins = [];
+    // ── State ──────────────────────────────────────────────────────────
+    _shapes = [];
+    _edges = [];
+    _defs = null;
+    _selectedIds = [];
+    _theme;
+    _fit;
+    _clipboard = null;
+    _snapDelta = null;
+    _selectedEdgeId = null;
+    _edgeDropTarget = null;
+    _ghostSnapCenter = null;
+    _createEdgeDropTarget = null;
+    _readOnly = false;
+    _isDragging = false;
+    _boundaryHostId = null;
+    _warningBanner = null;
+    // ── Events ─────────────────────────────────────────────────────────
+    _listeners = new Map();
+    // ── Resize observer ────────────────────────────────────────────────
+    _ro;
+    constructor(options) {
+        injectStyles();
+        injectEditorStyles();
+        this._id = String(_instanceCounter++);
+        // Resolve initial theme — localStorage overrides the options.theme when persistTheme is on
+        let initialTheme = options.theme ?? "auto";
+        if (options.persistTheme) {
+            try {
+                const stored = localStorage.getItem("bpmnkit-theme");
+                if (stored === "dark" || stored === "light" || stored === "auto") {
+                    initialTheme = stored;
+                }
+            }
+            catch {
+                // localStorage unavailable — fall back to options.theme
+            }
+        }
+        this._theme = initialTheme;
+        this._fit = options.fit ?? "contain";
+        // ── DOM ──────────────────────────────────────────────────────
+        const container = options.container;
+        container.innerHTML = "";
+        this._host = document.createElement("div");
+        this._host.className = "bpmnkit-canvas-host";
+        this._host.setAttribute("role", "application");
+        this._host.setAttribute("aria-label", "BPMN Editor");
+        this._host.setAttribute("tabindex", "0");
+        this._applyTheme(this._theme);
+        container.appendChild(this._host);
+        this._svg = document.createElementNS(NS, "svg");
+        this._svg.setAttribute("aria-hidden", "true");
+        this._host.appendChild(this._svg);
+        this._markerId = createDefs(this._svg, this._id);
+        if (options.grid !== false) {
+            this._gridPattern = createGrid(this._svg, this._id);
+        }
+        this._viewportG = document.createElementNS(NS, "g");
+        this._svg.appendChild(this._viewportG);
+        this._containersG = document.createElementNS(NS, "g");
+        this._edgesG = document.createElementNS(NS, "g");
+        this._shapesG = document.createElementNS(NS, "g");
+        this._labelsG = document.createElementNS(NS, "g");
+        this._overlayG = document.createElementNS(NS, "g");
+        this._viewportG.appendChild(this._containersG);
+        this._viewportG.appendChild(this._edgesG);
+        this._viewportG.appendChild(this._shapesG);
+        this._viewportG.appendChild(this._labelsG);
+        this._viewportG.appendChild(this._overlayG);
+        // ── Viewport controller ──────────────────────────────────────
+        this._viewport = new ViewportController(this._host, this._svg, this._viewportG, this._gridPattern, (state) => this._emit("viewport:change", state));
+        // ── Overlay ──────────────────────────────────────────────────
+        this._overlay = new OverlayRenderer(this._overlayG, this._markerId);
+        // ── Command stack ────────────────────────────────────────────
+        this._commandStack = new CommandStack();
+        // ── State machine callbacks ──────────────────────────────────
+        const callbacks = {
+            getShapes: () => [...this._shapes],
+            getSelectedIds: () => [...this._selectedIds],
+            getViewport: () => this._viewport.state,
+            viewportDidPan: () => this._viewport.didPan,
+            isResizable: (id) => this._isResizable(id),
+            lockViewport: (lock) => this._viewport.lock(lock),
+            setSelection: (ids) => this._setSelection(ids),
+            previewTranslate: (dx, dy) => this._previewTranslate(dx, dy),
+            commitTranslate: (dx, dy) => this._commitTranslate(dx, dy),
+            cancelTranslate: () => this._cancelTranslate(),
+            previewResize: (bounds) => this._overlay.setResizePreview(bounds),
+            commitResize: (id, bounds) => {
+                this._overlay.setResizePreview(null);
+                this._executeCommand((d) => resizeShape(d, id, bounds));
+            },
+            previewConnect: (ghostEnd) => {
+                const src = this._connectSourceBounds();
+                if (src) {
+                    const wps = computeWaypoints(src, {
+                        x: ghostEnd.x - 1,
+                        y: ghostEnd.y - 1,
+                        width: 2,
+                        height: 2,
+                    });
+                    this._overlay.setGhostConnection(wps);
+                }
+            },
+            cancelConnect: () => this._overlay.setGhostConnection(null),
+            commitConnect: (srcId, tgtId) => {
+                this._overlay.setGhostConnection(null);
+                this._doConnect(srcId, tgtId);
+            },
+            previewRubberBand: (origin, current) => this._overlay.setRubberBand(origin, current),
+            cancelRubberBand: () => this._overlay.setRubberBand(null),
+            commitCreate: (type, diagPoint) => this._doCreate(type, diagPoint),
+            startLabelEdit: (id) => this._startLabelEdit(id),
+            setHovered: (id) => this._overlay.setHovered(id, this._shapes),
+            executeDelete: (ids) => {
+                this._executeCommand((d) => deleteElements(d, ids));
+                this._setSelection([]);
+            },
+            executeCopy: () => this._doCopy(),
+            executePaste: () => this._doPaste(),
+            setTool: (tool) => this.setTool(tool),
+            getSelectedEdgeId: () => this._selectedEdgeId,
+            setEdgeSelected: (edgeId) => this._setEdgeSelected(edgeId),
+            previewEndpointMove: (edgeId, isStart, diagPoint) => this._previewEndpointMove(edgeId, isStart, diagPoint),
+            commitEndpointMove: (edgeId, isStart, diagPoint) => this._commitEndpointMove(edgeId, isStart, diagPoint),
+            cancelEndpointMove: () => {
+                this._overlay.setEndpointDragGhost(null);
+                if (this._selectedEdgeId) {
+                    const edge = this._edges.find((e) => e.id === this._selectedEdgeId);
+                    this._overlay.setEdgeEndpoints(edge?.edge.waypoints ?? null, this._selectedEdgeId);
+                }
+            },
+            previewWaypointInsert: (edgeId, segIdx, pt) => {
+                if (!this._defs)
+                    return;
+                const snap = this._snapWaypoint(pt);
+                const preview = insertEdgeWaypoint(this._defs, edgeId, segIdx, snap.pt);
+                const edge = preview.diagrams[0]?.plane.edges.find((e) => e.bpmnElement === edgeId);
+                this._overlay.setEndpointDragGhost(edge?.waypoints ?? null);
+                this._overlay.setAlignmentGuides(snap.guides);
+            },
+            commitWaypointInsert: (edgeId, segIdx, pt) => {
+                this._overlay.setEndpointDragGhost(null);
+                this._overlay.setAlignmentGuides([]);
+                const snap = this._snapWaypoint(pt);
+                this._executeCommand((d) => removeCollinearWaypoints(insertEdgeWaypoint(d, edgeId, segIdx, snap.pt), edgeId));
+            },
+            cancelWaypointInsert: () => {
+                this._overlay.setEndpointDragGhost(null);
+                this._overlay.setAlignmentGuides([]);
+            },
+            previewWaypointMove: (edgeId, wpIdx, pt) => {
+                if (!this._defs)
+                    return;
+                const snap = this._snapWaypoint(pt);
+                const preview = moveEdgeWaypoint(this._defs, edgeId, wpIdx, snap.pt);
+                const edge = preview.diagrams[0]?.plane.edges.find((e) => e.bpmnElement === edgeId);
+                this._overlay.setEndpointDragGhost(edge?.waypoints ?? null);
+                this._overlay.setAlignmentGuides(snap.guides);
+            },
+            commitWaypointMove: (edgeId, wpIdx, pt) => {
+                this._overlay.setEndpointDragGhost(null);
+                this._overlay.setAlignmentGuides([]);
+                const snap = this._snapWaypoint(pt);
+                this._executeCommand((d) => removeCollinearWaypoints(moveEdgeWaypoint(d, edgeId, wpIdx, snap.pt), edgeId));
+            },
+            cancelWaypointMove: () => {
+                this._overlay.setEndpointDragGhost(null);
+                this._overlay.setAlignmentGuides([]);
+            },
+            showEdgeHoverDot: (pt) => {
+                this._overlay.setEdgeHoverDot(pt);
+            },
+            hideEdgeHoverDot: () => {
+                this._overlay.setEdgeHoverDot(null);
+            },
+            showEdgeWaypointBalls: (edgeId) => {
+                const edge = this._edges.find((e) => e.id === edgeId);
+                if (edge)
+                    this._overlay.setEdgeWaypointBalls(edge.edge.waypoints, edgeId);
+            },
+            hideEdgeWaypointBalls: () => {
+                this._overlay.setEdgeWaypointBalls(null, null);
+            },
+            previewSpace: (origin, current, axis) => this._previewSpace(origin, current, axis),
+            commitSpace: (origin, current, axis) => this._commitSpace(origin, current, axis),
+            cancelSpace: () => this._cancelSpace(),
+        };
+        this._stateMachine = new EditorStateMachine(callbacks);
+        // ── Label editor ─────────────────────────────────────────────
+        this._labelEditor = new LabelEditor(this._host, (id, text) => {
+            this._executeCommand((d) => updateLabel(d, id, text));
+            this._stateMachine.setMode({ mode: "select", sub: { name: "idle", hoveredId: null } });
+        }, () => {
+            this._stateMachine.setMode({ mode: "select", sub: { name: "idle", hoveredId: null } });
+        });
+        // ── Keyboard ─────────────────────────────────────────────────
+        this._keyboard = new KeyboardHandler(this._host, this._viewport, () => this.fitView(), (id) => {
+            const shape = this._shapes.find((s) => s.id === id);
+            if (shape) {
+                this._emit("element:click", id, new PointerEvent("click"));
+            }
+        }, (id) => this._emit("element:focus", id), () => this._emit("element:blur"));
+        this._host.addEventListener("keydown", this._onKeyDown);
+        // ── Pointer events ────────────────────────────────────────────
+        this._svg.addEventListener("pointerdown", this._onPointerDown);
+        this._svg.addEventListener("pointermove", this._onPointerMove);
+        this._svg.addEventListener("pointerup", this._onPointerUp);
+        this._svg.addEventListener("dblclick", this._onDblClick);
+        // ── Plugins ───────────────────────────────────────────────────
+        if (options.plugins) {
+            for (const plugin of options.plugins) {
+                this._installPlugin(plugin);
+            }
+        }
+        // ── Initial diagram ───────────────────────────────────────────
+        if (options.xml) {
+            this.load(options.xml);
+        }
+        else {
+            this.loadDefinitions(createEmptyDefinitions());
+        }
+        this._ro = new ResizeObserver(() => {
+            if (this._defs)
+                this.fitView();
+        });
+        this._ro.observe(this._host);
+        // Persist theme changes to localStorage when requested
+        if (options.persistTheme) {
+            new MutationObserver(() => {
+                try {
+                    localStorage.setItem("bpmnkit-theme", this._host.getAttribute("data-theme") ?? "light");
+                }
+                catch {
+                    // ignore
+                }
+            }).observe(this._host, { attributes: true, attributeFilter: ["data-theme"] });
+        }
+    }
+    // ── Public API ─────────────────────────────────────────────────────
+    load(xml) {
+        const defs = Bpmn.parse(xml);
+        this.loadDefinitions(defs);
+    }
+    /**
+     * Apply auto-layout to the current diagram.
+     * Replaces all DI positions with freshly computed layout.
+     * The operation is undoable.
+     */
+    autoLayout() {
+        this._executeCommand(applyAutoLayout);
+        this.fitView();
+    }
+    loadDefinitions(defs) {
+        this._commandStack.clear();
+        this._commandStack.push(defs);
+        this._selectedIds = [];
+        this._renderDefs(defs);
+        if (this._fit !== "none") {
+            requestAnimationFrame(() => this.fitView());
+        }
+        this._setDuplicateIdWarning(this._getDuplicateIds(defs));
+    }
+    exportXml() {
+        return Bpmn.export(this._defs ?? createEmptyDefinitions());
+    }
+    /**
+     * Enables or disables read-only mode. In read-only mode the viewport
+     * (pan + zoom) still works but all editing actions are blocked.
+     */
+    setReadOnly(enabled) {
+        this._readOnly = enabled;
+        if (enabled) {
+            this._setSelection([]);
+            this._overlay.setGhostCreate(null);
+            this._overlay.setAlignmentGuides([]);
+            this._overlay.setDistanceGuides([]);
+            this._setCreateEdgeDropHighlight(null);
+            this._ghostSnapCenter = null;
+            this._stateMachine.setMode({ mode: "pan" });
+        }
+        else {
+            this.setTool("select");
+        }
+    }
+    setTool(tool) {
+        if (this._readOnly)
+            return;
+        this._overlay.setGhostCreate(null);
+        this._boundaryHostId = null;
+        this._overlay.setBoundaryHostHighlight(null);
+        this._overlay.setAlignmentGuides([]);
+        this._setCreateEdgeDropHighlight(null);
+        this._ghostSnapCenter = null;
+        if (tool === "select") {
+            this._stateMachine.setMode({ mode: "select", sub: { name: "idle", hoveredId: null } });
+        }
+        else if (tool === "pan") {
+            this._stateMachine.setMode({ mode: "pan" });
+        }
+        else if (tool === "space") {
+            this._stateMachine.setMode({ mode: "space", sub: { name: "idle" } });
+        }
+        else {
+            const elementType = tool.slice(7);
+            this._stateMachine.setMode({ mode: "create", elementType });
+        }
+        if (tool.startsWith("create:")) {
+            this._host.focus();
+        }
+        this._emit("editor:tool", tool);
+    }
+    setSelection(ids) {
+        this._setSelection(ids);
+    }
+    deleteSelected() {
+        if (this._selectedIds.length === 0)
+            return;
+        const ids = [...this._selectedIds];
+        this._executeCommand((d) => deleteElements(d, ids));
+        this._setSelection([]);
+    }
+    undo() {
+        const prev = this._commandStack.undo();
+        if (prev) {
+            this._renderDefs(prev);
+            this._emit("diagram:change", prev);
+        }
+    }
+    redo() {
+        const next = this._commandStack.redo();
+        if (next) {
+            this._renderDefs(next);
+            this._emit("diagram:change", next);
+        }
+    }
+    canUndo() {
+        return this._commandStack.canUndo();
+    }
+    canRedo() {
+        return this._commandStack.canRedo();
+    }
+    getDefinitions() {
+        return this._defs;
+    }
+    applyChange(fn) {
+        this._executeCommand(fn);
+    }
+    fitView(padding = 40) {
+        if (!this._defs)
+            return;
+        const bounds = computeDiagramBounds(this._defs);
+        if (!bounds)
+            return;
+        const svgW = this._svg.clientWidth;
+        const svgH = this._svg.clientHeight;
+        if (svgW === 0 || svgH === 0)
+            return;
+        const dW = bounds.maxX - bounds.minX;
+        const dH = bounds.maxY - bounds.minY;
+        if (dW === 0 || dH === 0)
+            return;
+        const scaleX = (svgW - padding * 2) / dW;
+        const scaleY = (svgH - padding * 2) / dH;
+        let scale = Math.min(scaleX, scaleY);
+        if (this._fit === "center")
+            scale = 1;
+        const tx = (svgW - dW * scale) / 2 - bounds.minX * scale;
+        const ty = (svgH - dH * scale) / 2 - bounds.minY * scale;
+        this._viewport.set({ tx, ty, scale });
+    }
+    /** The host element that receives the `data-theme` attribute. */
+    get container() {
+        return this._host;
+    }
+    getTheme() {
+        return this._host.getAttribute("data-theme") === "dark" ? "dark" : "light";
+    }
+    setTheme(theme) {
+        this._theme = theme;
+        this._applyTheme(theme);
+    }
+    zoomIn() {
+        const { width, height } = this._svg.getBoundingClientRect();
+        this._viewport.zoomAt(width / 2, height / 2, 1.25);
+    }
+    zoomOut() {
+        const { width, height } = this._svg.getBoundingClientRect();
+        this._viewport.zoomAt(width / 2, height / 2, 0.8);
+    }
+    setZoom(scale) {
+        const { width, height } = this._svg.getBoundingClientRect();
+        const vp = this._viewport.state;
+        const cx = (width / 2 - vp.tx) / vp.scale;
+        const cy = (height / 2 - vp.ty) / vp.scale;
+        this._viewport.set({ tx: width / 2 - cx * scale, ty: height / 2 - cy * scale, scale });
+    }
+    selectAll() {
+        this._setSelection(this._shapes.map((s) => s.id));
+    }
+    paste() {
+        this._doPaste();
+    }
+    /** Pans the viewport to center on the element with the given id (preserves zoom). */
+    scrollToElement(id) {
+        const shape = this._shapes.find((s) => s.id === id);
+        if (!shape)
+            return;
+        const { x, y, width, height } = shape.shape.bounds;
+        const cx = x + width / 2;
+        const cy = y + height / 2;
+        const svgW = this._svg.clientWidth;
+        const svgH = this._svg.clientHeight;
+        const { scale } = this._viewport.state;
+        this._viewport.set({ tx: svgW / 2 - cx * scale, ty: svgH / 2 - cy * scale, scale });
+    }
+    on(event, handler) {
+        let set = this._listeners.get(event);
+        if (!set) {
+            set = new Set();
+            this._listeners.set(event, set);
+        }
+        set.add(handler);
+        return () => {
+            const s = this._listeners.get(event);
+            s?.delete(handler);
+        };
+    }
+    destroy() {
+        this._ro.disconnect();
+        this._viewport.destroy();
+        this._keyboard.destroy();
+        this._labelEditor.destroy();
+        this._svg.removeEventListener("pointerdown", this._onPointerDown);
+        this._svg.removeEventListener("pointermove", this._onPointerMove);
+        this._svg.removeEventListener("pointerup", this._onPointerUp);
+        this._svg.removeEventListener("dblclick", this._onDblClick);
+        this._host.removeEventListener("keydown", this._onKeyDown);
+        for (const plugin of this._plugins)
+            plugin.uninstall?.();
+        this._plugins.length = 0;
+        this._listeners.clear();
+        this._host.remove();
+    }
+    // ── Private helpers ────────────────────────────────────────────────
+    _getDuplicateIds(defs) {
+        const seen = new Map();
+        const track = (id) => seen.set(id, (seen.get(id) ?? 0) + 1);
+        const walkElements = (elements, flows) => {
+            for (const el of elements) {
+                track(el.id);
+                const nested = el;
+                if (nested.flowElements && nested.sequenceFlows) {
+                    walkElements(nested.flowElements, nested.sequenceFlows);
+                }
+            }
+            for (const sf of flows)
+                track(sf.id);
+        };
+        track(defs.id);
+        for (const process of defs.processes) {
+            track(process.id);
+            walkElements(process.flowElements, process.sequenceFlows);
+            for (const ann of process.textAnnotations)
+                track(ann.id);
+            for (const assoc of process.associations)
+                track(assoc.id);
+        }
+        for (const diagram of defs.diagrams) {
+            track(diagram.id);
+            track(diagram.plane.id);
+            for (const shape of diagram.plane.shapes)
+                track(shape.id);
+            for (const edge of diagram.plane.edges)
+                track(edge.id);
+        }
+        return [...seen.entries()].filter(([, count]) => count > 1).map(([id]) => id);
+    }
+    _setDuplicateIdWarning(duplicateIds) {
+        if (duplicateIds.length === 0) {
+            this._warningBanner?.remove();
+            this._warningBanner = null;
+            return;
+        }
+        if (!this._warningBanner) {
+            this._warningBanner = document.createElement("div");
+            this._warningBanner.className = "bpmnkit-editor-warning-banner";
+            this._host.appendChild(this._warningBanner);
+        }
+        this._warningBanner.textContent = `⚠ Duplicate element IDs: ${duplicateIds.join(", ")}. Editing may produce unexpected results.`;
+    }
+    _renderDefs(defs) {
+        this._containersG.innerHTML = "";
+        this._edgesG.innerHTML = "";
+        this._shapesG.innerHTML = "";
+        this._labelsG.innerHTML = "";
+        const result = render(defs, this._containersG, this._edgesG, this._shapesG, this._labelsG, this._markerId, this._id);
+        this._shapes = result.shapes;
+        this._edges = result.edges;
+        this._defs = defs;
+        // Add transparent hit-area polylines for edge clicking
+        for (const edge of this._edges) {
+            const waypoints = edge.edge.waypoints;
+            if (waypoints.length < 2)
+                continue;
+            const points = waypoints.map((wp) => `${wp.x},${wp.y}`).join(" ");
+            const hitArea = document.createElementNS(NS, "polyline");
+            hitArea.setAttribute("class", "bpmnkit-edge-hitarea");
+            hitArea.setAttribute("data-bpmnkit-edge-hit", edge.id);
+            hitArea.setAttribute("points", points);
+            edge.element.appendChild(hitArea);
+        }
+        this._keyboard.setShapes(this._shapes);
+        this._overlay.setSelection(this._selectedIds, this._shapes, this._getResizableIds());
+        // Restore edge selection if the edge still exists after re-render
+        if (this._selectedEdgeId) {
+            const edge = this._edges.find((e) => e.id === this._selectedEdgeId);
+            if (edge) {
+                this._overlay.setEdgeEndpoints(edge.edge.waypoints, this._selectedEdgeId);
+            }
+            else {
+                this._selectedEdgeId = null;
+                this._overlay.setEdgeEndpoints(null, "");
+            }
+        }
+        this._emit("diagram:load", defs);
+    }
+    _executeCommand(fn) {
+        if (this._readOnly || !this._defs)
+            return;
+        const newDefs = fn(this._defs);
+        this._commandStack.push(newDefs);
+        this._renderDefs(newDefs);
+        this._emit("diagram:change", newDefs);
+    }
+    _setSelection(ids) {
+        this._selectedIds = ids;
+        // Clear edge selection whenever shape selection changes
+        if (this._selectedEdgeId) {
+            this._selectedEdgeId = null;
+            this._overlay.setEdgeEndpoints(null, "");
+        }
+        this._overlay.setSelection(ids, this._shapes, this._getResizableIds());
+        this._emit("editor:select", ids);
+    }
+    _previewTranslate(dx, dy) {
+        if (!this._isDragging) {
+            this._isDragging = true;
+            this._overlay.setDragging(true);
+            this._emit("editor:drag", true);
+        }
+        const alignSnap = this._computeSnap(dx, dy);
+        const spacingResult = this._computeSpacingSnap(dx, dy);
+        const alignAdjX = Math.abs(alignSnap.dx - dx);
+        const alignAdjY = Math.abs(alignSnap.dy - dy);
+        const spacingAdjX = Math.abs(spacingResult.dx - dx);
+        const spacingAdjY = Math.abs(spacingResult.dy - dy);
+        // Per axis: prefer spacing snap when it fires and is closer than alignment snap
+        const useSpacingX = spacingAdjX > 0 && (!alignAdjX || spacingAdjX < alignAdjX);
+        const useSpacingY = spacingAdjY > 0 && (!alignAdjY || spacingAdjY < alignAdjY);
+        const finalDx = useSpacingX ? spacingResult.dx : alignSnap.dx;
+        const finalDy = useSpacingY ? spacingResult.dy : alignSnap.dy;
+        this._snapDelta = { dx: finalDx, dy: finalDy };
+        for (const id of this._selectedIds) {
+            const shape = this._shapes.find((s) => s.id === id);
+            if (!shape)
+                continue;
+            const { x, y } = shape.shape.bounds;
+            shape.element.setAttribute("transform", `translate(${x + finalDx} ${y + finalDy})`);
+        }
+        this._overlay.setAlignmentGuides(this._computeAlignGuides(finalDx, finalDy));
+        this._overlay.setDistanceGuides(spacingResult.guides.filter((g) => {
+            const isH = g.y1 === g.y2;
+            return isH ? useSpacingX : useSpacingY;
+        }));
+        this._setEdgeDropHighlight(this._findEdgeDropTarget(finalDx, finalDy));
+    }
+    _cancelTranslate() {
+        this._snapDelta = null;
+        this._overlay.setAlignmentGuides([]);
+        this._overlay.setDistanceGuides([]);
+        this._setEdgeDropHighlight(null);
+        for (const id of this._selectedIds) {
+            const shape = this._shapes.find((s) => s.id === id);
+            if (!shape)
+                continue;
+            const { x, y } = shape.shape.bounds;
+            shape.element.setAttribute("transform", `translate(${x} ${y})`);
+        }
+        if (this._isDragging) {
+            this._isDragging = false;
+            this._overlay.setDragging(false);
+            this._overlay.setSelection(this._selectedIds, this._shapes, this._getResizableIds());
+            this._emit("editor:drag", false);
+        }
+    }
+    _commitTranslate(dx, dy) {
+        const snap = this._snapDelta ?? { dx, dy };
+        this._snapDelta = null;
+        this._overlay.setAlignmentGuides([]);
+        this._overlay.setDistanceGuides([]);
+        const edgeDropId = this._edgeDropTarget;
+        this._setEdgeDropHighlight(null);
+        const moves = this._selectedIds.map((id) => ({ id, dx: snap.dx, dy: snap.dy }));
+        const shapeId = this._selectedIds.length === 1 ? this._selectedIds[0] : undefined;
+        if (edgeDropId && shapeId) {
+            this._executeCommand((d) => insertShapeOnEdge(moveShapes(d, moves), edgeDropId, shapeId));
+        }
+        else {
+            this._executeCommand((d) => moveShapes(d, moves));
+        }
+        if (this._isDragging) {
+            this._isDragging = false;
+            this._overlay.setDragging(false);
+            this._emit("editor:drag", false);
+        }
+    }
+    _previewSpace(origin, current, axis) {
+        // Reset all shapes to their original positions first
+        for (const shape of this._shapes) {
+            const { x, y } = shape.shape.bounds;
+            shape.element.setAttribute("transform", `translate(${x} ${y})`);
+        }
+        if (!axis)
+            return;
+        const dx = current.x - origin.x;
+        const dy = current.y - origin.y;
+        for (const shape of this._shapes) {
+            const b = shape.shape.bounds;
+            const cx = b.x + b.width / 2;
+            const cy = b.y + b.height / 2;
+            let moveDx = 0;
+            let moveDy = 0;
+            if (axis === "h") {
+                if (dx > 0 && cx > origin.x)
+                    moveDx = dx;
+                else if (dx < 0 && cx < origin.x)
+                    moveDx = dx;
+            }
+            else {
+                if (dy > 0 && cy > origin.y)
+                    moveDy = dy;
+                else if (dy < 0 && cy < origin.y)
+                    moveDy = dy;
+            }
+            if (moveDx !== 0 || moveDy !== 0) {
+                shape.element.setAttribute("transform", `translate(${b.x + moveDx} ${b.y + moveDy})`);
+            }
+        }
+        const splitValue = axis === "h" ? origin.x : origin.y;
+        this._overlay.setSpacePreview(axis, splitValue);
+    }
+    _commitSpace(origin, current, axis) {
+        // Reset visual preview
+        for (const shape of this._shapes) {
+            const { x, y } = shape.shape.bounds;
+            shape.element.setAttribute("transform", `translate(${x} ${y})`);
+        }
+        this._overlay.setSpacePreview(null);
+        if (!axis || !this._defs)
+            return;
+        const dx = current.x - origin.x;
+        const dy = current.y - origin.y;
+        if (dx === 0 && dy === 0)
+            return;
+        const moves = [];
+        for (const shape of this._shapes) {
+            const b = shape.shape.bounds;
+            const cx = b.x + b.width / 2;
+            const cy = b.y + b.height / 2;
+            if (axis === "h") {
+                if (dx > 0 && cx > origin.x)
+                    moves.push({ id: shape.id, dx, dy: 0 });
+                else if (dx < 0 && cx < origin.x)
+                    moves.push({ id: shape.id, dx, dy: 0 });
+            }
+            else {
+                if (dy > 0 && cy > origin.y)
+                    moves.push({ id: shape.id, dx: 0, dy });
+                else if (dy < 0 && cy < origin.y)
+                    moves.push({ id: shape.id, dx: 0, dy });
+            }
+        }
+        if (moves.length > 0) {
+            this._executeCommand((d) => moveShapes(d, moves));
+        }
+    }
+    _cancelSpace() {
+        for (const shape of this._shapes) {
+            const { x, y } = shape.shape.bounds;
+            shape.element.setAttribute("transform", `translate(${x} ${y})`);
+        }
+        this._overlay.setSpacePreview(null);
+    }
+    _doCreate(type, diagPoint) {
+        // Read edge drop target BEFORE clearing it — _setCreateEdgeDropHighlight(null) zeroes it out.
+        const pendingEdgeDrop = this._createEdgeDropTarget;
+        this._overlay.setGhostCreate(null);
+        this._overlay.setAlignmentGuides([]);
+        const actualCenter = this._ghostSnapCenter ?? diagPoint;
+        this._ghostSnapCenter = null;
+        this._setCreateEdgeDropHighlight(null);
+        if (!this._defs)
+            return;
+        const bounds = defaultBounds(type, actualCenter.x, actualCenter.y);
+        if (type === "textAnnotation") {
+            const result = createAnnotation(this._defs, bounds);
+            this._selectedIds = [result.id];
+            this._commandStack.push(result.defs);
+            this._renderDefs(result.defs);
+            this._emit("diagram:change", result.defs);
+            this._emit("editor:select", [result.id]);
+            this._startLabelEdit(result.id);
+            return;
+        }
+        // If hovering over an activity, create a boundary event
+        const boundaryHostId = this._boundaryHostId;
+        this._setBoundaryHost(null);
+        if (boundaryHostId && isIntermediateEventType(type) && this._defs) {
+            const hostShape = this._shapes.find((s) => s.id === boundaryHostId);
+            if (hostShape) {
+                const hostBounds = hostShape.shape.bounds;
+                // Snap the event center to the nearest point on the host boundary
+                const eventBounds = snapToBoundary(actualCenter, hostBounds, 18);
+                // Map palette type to event definition type
+                const eventDefType = intermediateEventDefType(type);
+                const result = createBoundaryEvent(this._defs, boundaryHostId, eventDefType, eventBounds);
+                this._selectedIds = [result.id];
+                this._commandStack.push(result.defs);
+                this._renderDefs(result.defs);
+                this._emit("diagram:change", result.defs);
+                this._emit("editor:select", [result.id]);
+                return;
+            }
+        }
+        const result = createShape(this._defs, type, bounds);
+        this._selectedIds = [result.id];
+        const finalDefs = pendingEdgeDrop
+            ? insertShapeOnEdge(result.defs, pendingEdgeDrop, result.id)
+            : result.defs;
+        this._commandStack.push(finalDefs);
+        this._renderDefs(finalDefs);
+        this._emit("diagram:change", finalDefs);
+        this._emit("editor:select", [result.id]);
+    }
+    _doConnect(srcId, tgtId) {
+        const srcShape = this._shapes.find((s) => s.id === srcId);
+        const tgtShape = this._shapes.find((s) => s.id === tgtId);
+        if (!srcShape || !tgtShape)
+            return;
+        const srcType = srcShape.flowElement?.type;
+        const tgtType = tgtShape.flowElement?.type;
+        if (srcType && tgtType && !canConnect(srcType, tgtType))
+            return;
+        const obstacles = this._shapes
+            .filter((s) => s.id !== srcId && s.id !== tgtId)
+            .map((s) => s.shape.bounds);
+        const waypoints = computeWaypointsAvoiding(srcShape.shape.bounds, tgtShape.shape.bounds, obstacles);
+        this._executeCommand((d) => createConnection(d, srcId, tgtId, waypoints).defs);
+    }
+    _doCopy() {
+        if (!this._defs || this._selectedIds.length === 0)
+            return;
+        this._clipboard = copyElements(this._defs, this._selectedIds);
+    }
+    _doPaste() {
+        if (!this._clipboard)
+            return;
+        const base = this._defs ?? createEmptyDefinitions();
+        const result = pasteElements(base, this._clipboard, 20, 20);
+        const newIds = [...result.newIds.values()];
+        this._selectedIds = newIds;
+        this._commandStack.push(result.defs);
+        this._renderDefs(result.defs);
+        this._emit("diagram:change", result.defs);
+        this._emit("editor:select", newIds);
+    }
+    _startLabelEdit(id) {
+        if (this._readOnly || !id)
+            return;
+        const shape = this._shapes.find((s) => s.id === id);
+        if (!shape)
+            return;
+        const defs = this._defs;
+        if (!defs)
+            return;
+        const process = defs.processes[0];
+        const currentText = process?.flowElements.find((el) => el.id === id)?.name ??
+            process?.sequenceFlows.find((sf) => sf.id === id)?.name ??
+            process?.textAnnotations.find((ta) => ta.id === id)?.text ??
+            "";
+        this._labelEditor.start(id, currentText, shape.shape.bounds, this._viewport.state, this._svg.getBoundingClientRect());
+    }
+    _connectSourceBounds() {
+        const mode = this._stateMachine.mode;
+        if (mode.mode !== "select")
+            return null;
+        const sub = mode.sub;
+        const sourceId = sub.name === "connecting" ? sub.sourceId : sub.name === "pointing-port" ? sub.sourceId : null;
+        if (!sourceId)
+            return null;
+        const shape = this._shapes.find((s) => s.id === sourceId);
+        return shape ? shape.shape.bounds : null;
+    }
+    // ── New public helpers ─────────────────────────────────────────────
+    /** Returns screen-space bounds of a shape (for positioning overlays). */
+    getShapeBounds(id) {
+        const shape = this._shapes.find((s) => s.id === id);
+        if (!shape)
+            return null;
+        const b = shape.shape.bounds;
+        const vp = this._viewport.state;
+        const svgRect = this._svg.getBoundingClientRect();
+        const { x, y } = diagramToScreen(b.x, b.y, vp, svgRect);
+        return { x, y, width: b.width * vp.scale, height: b.height * vp.scale };
+    }
+    /** Returns the BPMN element type for a given id, or null if not found. */
+    getElementType(id) {
+        const shape = this._shapes.find((s) => s.id === id);
+        if (!shape) {
+            if (this._edges.some((e) => e.id === id))
+                return "sequenceFlow";
+            return null;
+        }
+        if (shape.annotation !== undefined)
+            return "textAnnotation";
+        const bpmnType = shape.flowElement?.type ?? null;
+        if (!bpmnType)
+            return null;
+        // For events, resolve to specific palette type based on event definition
+        const el = shape.flowElement;
+        if (el &&
+            (el.type === "startEvent" ||
+                el.type === "endEvent" ||
+                el.type === "intermediateCatchEvent" ||
+                el.type === "intermediateThrowEvent")) {
+            const def = el.eventDefinitions[0];
+            if (def) {
+                return resolveEventPaletteType(el.type, def.type);
+            }
+        }
+        return bpmnType;
+    }
+    /**
+     * Creates a new element of the given type connected to the source shape,
+     * using smart placement (right → bottom → top, avoids overlaps).
+     * Returns the new element's id.
+     */
+    addConnectedElement(sourceId, type) {
+        if (!this._defs)
+            return null;
+        const srcShape = this._shapes.find((s) => s.id === sourceId);
+        if (!srcShape)
+            return null;
+        const srcBounds = srcShape.shape.bounds;
+        let w = 100;
+        let h = 80;
+        if (type === "startEvent" || type === "endEvent") {
+            w = 36;
+            h = 36;
+        }
+        else if (type === "exclusiveGateway" ||
+            type === "parallelGateway" ||
+            type === "inclusiveGateway" ||
+            type === "eventBasedGateway") {
+            w = 50;
+            h = 50;
+        }
+        const newBounds = this._smartPlaceBounds(srcBounds, sourceId, w, h);
+        const obstacles = this._shapes.filter((s) => s.id !== sourceId).map((s) => s.shape.bounds);
+        const r1 = createShape(this._defs, type, newBounds);
+        const waypoints = computeWaypointsAvoiding(srcBounds, newBounds, obstacles);
+        const r2 = createConnection(r1.defs, sourceId, r1.id, waypoints);
+        this._selectedIds = [r1.id];
+        this._commandStack.push(r2.defs);
+        this._renderDefs(r2.defs);
+        this._emit("diagram:change", r2.defs);
+        this._emit("editor:select", [r1.id]);
+        return r1.id;
+    }
+    _smartPlaceBounds(srcBounds, sourceId, w, h) {
+        const GAP = 60;
+        const srcCx = srcBounds.x + srcBounds.width / 2;
+        const srcCy = srcBounds.y + srcBounds.height / 2;
+        // Find directions already occupied by outgoing connections
+        const takenDirs = new Set();
+        const process = this._defs?.processes[0];
+        if (process) {
+            for (const flow of process.sequenceFlows) {
+                if (flow.sourceRef !== sourceId)
+                    continue;
+                const tgt = this._shapes.find((s) => s.id === flow.targetRef);
+                if (!tgt)
+                    continue;
+                const tCx = tgt.shape.bounds.x + tgt.shape.bounds.width / 2;
+                const tCy = tgt.shape.bounds.y + tgt.shape.bounds.height / 2;
+                const ddx = tCx - srcCx;
+                const ddy = tCy - srcCy;
+                const dir = Math.abs(ddx) >= Math.abs(ddy)
+                    ? ddx >= 0
+                        ? "right"
+                        : "left"
+                    : ddy >= 0
+                        ? "bottom"
+                        : "top";
+                takenDirs.add(dir);
+            }
+        }
+        // Try primary candidates: right → bottom → top
+        const candidates = [
+            {
+                dir: "right",
+                bounds: { x: srcBounds.x + srcBounds.width + GAP, y: srcCy - h / 2, width: w, height: h },
+            },
+            {
+                dir: "bottom",
+                bounds: {
+                    x: srcCx - w / 2,
+                    y: srcBounds.y + srcBounds.height + GAP,
+                    width: w,
+                    height: h,
+                },
+            },
+            {
+                dir: "top",
+                bounds: { x: srcCx - w / 2, y: srcBounds.y - GAP - h, width: w, height: h },
+            },
+        ];
+        for (const { dir, bounds } of candidates) {
+            if (!takenDirs.has(dir) && !this._overlapsAny(bounds))
+                return bounds;
+        }
+        // All primary positions blocked — increase gap for bottom/top
+        for (let extra = GAP * 2; extra <= GAP * 6; extra += GAP) {
+            const bot = {
+                x: srcCx - w / 2,
+                y: srcBounds.y + srcBounds.height + extra,
+                width: w,
+                height: h,
+            };
+            if (!this._overlapsAny(bot))
+                return bot;
+            const top = {
+                x: srcCx - w / 2,
+                y: srcBounds.y - extra - h,
+                width: w,
+                height: h,
+            };
+            if (!this._overlapsAny(top))
+                return top;
+        }
+        // Absolute fallback
+        return { x: srcBounds.x + srcBounds.width + GAP * 5, y: srcCy - h / 2, width: w, height: h };
+    }
+    _overlapsAny(bounds) {
+        const MARGIN = 10;
+        for (const shape of this._shapes) {
+            const b = shape.shape.bounds;
+            if (bounds.x < b.x + b.width + MARGIN &&
+                bounds.x + bounds.width + MARGIN > b.x &&
+                bounds.y < b.y + b.height + MARGIN &&
+                bounds.y + bounds.height + MARGIN > b.y) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Sets the external label position for an event or gateway shape.
+     */
+    setLabelPosition(shapeId, position) {
+        const shape = this._shapes.find((s) => s.id === shapeId);
+        if (!shape)
+            return;
+        const labelBounds = labelBoundsForPosition(shape.shape.bounds, position);
+        this._executeCommand((d) => updateLabelPosition(d, shapeId, labelBounds));
+    }
+    /** Starts inline label editing for the element with the given id. */
+    editLabel(id) {
+        this._startLabelEdit(id);
+    }
+    /** Copies then pastes the current selection with a small offset. */
+    duplicate() {
+        this._doCopy();
+        this._doPaste();
+    }
+    /**
+     * Enters connection-drawing mode with the given shape as source.
+     * The user then moves the mouse and clicks a target shape to complete the connection.
+     */
+    startConnectionFrom(sourceId) {
+        const shape = this._shapes.find((s) => s.id === sourceId);
+        if (!shape)
+            return;
+        this._viewport.lock(true);
+        this._stateMachine.setMode({
+            mode: "select",
+            sub: { name: "connecting", sourceId, ghostEnd: { x: 0, y: 0 } },
+        });
+    }
+    /** Creates a text annotation linked to the given source shape via an association. */
+    createAnnotationFor(sourceId) {
+        if (!this._defs)
+            return;
+        const srcShape = this._shapes.find((s) => s.id === sourceId);
+        if (!srcShape)
+            return;
+        const srcBounds = srcShape.shape.bounds;
+        // Place annotation above-right of source
+        const annW = 100;
+        const annH = 50;
+        const annBounds = {
+            x: srcBounds.x + srcBounds.width + 30,
+            y: srcBounds.y - annH - 10,
+            width: annW,
+            height: annH,
+        };
+        const result = createAnnotationWithLink(this._defs, annBounds, sourceId, srcBounds);
+        this._selectedIds = [result.annotationId];
+        this._commandStack.push(result.defs);
+        this._renderDefs(result.defs);
+        this._emit("diagram:change", result.defs);
+        this._emit("editor:select", [result.annotationId]);
+        this._startLabelEdit(result.annotationId);
+    }
+    /** Updates the color of a shape in the diagram. Pass `{}` to clear colors. */
+    updateColor(id, color) {
+        this._executeCommand((d) => updateShapeColor(d, id, color));
+    }
+    // ── Private helpers ────────────────────────────────────────────────
+    _setEdgeSelected(edgeId) {
+        // Clear shape selection when edge is selected
+        if (edgeId && this._selectedIds.length > 0) {
+            this._selectedIds = [];
+            this._overlay.setSelection([], this._shapes);
+        }
+        this._selectedEdgeId = edgeId;
+        if (edgeId) {
+            const edge = this._edges.find((e) => e.id === edgeId);
+            this._overlay.setEdgeEndpoints(edge?.edge.waypoints ?? null, edgeId);
+            this._emit("editor:select", [edgeId]);
+        }
+        else {
+            this._overlay.setEdgeEndpoints(null, "");
+            this._emit("editor:select", []);
+        }
+    }
+    /** Changes a flow element's type (e.g. exclusiveGateway → parallelGateway). */
+    changeElementType(id, newType) {
+        this._executeCommand((d) => changeElementTypeFn(d, id, newType));
+    }
+    _findEdgeDropTarget(dx, dy) {
+        if (this._selectedIds.length !== 1)
+            return null;
+        const id = this._selectedIds[0];
+        if (!id || !this._defs)
+            return null;
+        const shape = this._shapes.find((s) => s.id === id);
+        if (!shape)
+            return null;
+        const b = shape.shape.bounds;
+        const cx = b.x + dx + b.width / 2;
+        const cy = b.y + dy + b.height / 2;
+        const process = this._defs.processes[0];
+        if (!process)
+            return null;
+        const TOLERANCE = 20;
+        for (const edge of this._edges) {
+            const flow = process.sequenceFlows.find((sf) => sf.id === edge.id);
+            if (!flow)
+                continue;
+            // Skip edges that are already connected to the shape being moved
+            if (flow.sourceRef === id || flow.targetRef === id)
+                continue;
+            const wps = edge.edge.waypoints;
+            for (let i = 0; i < wps.length - 1; i++) {
+                const a = wps[i];
+                const b2 = wps[i + 1];
+                if (!a || !b2)
+                    continue;
+                const minX = Math.min(a.x, b2.x) - TOLERANCE;
+                const maxX = Math.max(a.x, b2.x) + TOLERANCE;
+                const minY = Math.min(a.y, b2.y) - TOLERANCE;
+                const maxY = Math.max(a.y, b2.y) + TOLERANCE;
+                if (cx >= minX && cx <= maxX && cy >= minY && cy <= maxY) {
+                    return edge.id;
+                }
+            }
+        }
+        return null;
+    }
+    _setEdgeDropHighlight(edgeId) {
+        if (this._edgeDropTarget) {
+            const prev = this._edges.find((e) => e.id === this._edgeDropTarget);
+            prev?.element.classList.remove("bpmnkit-edge-split-highlight");
+        }
+        this._edgeDropTarget = edgeId;
+        if (edgeId) {
+            const edge = this._edges.find((e) => e.id === edgeId);
+            edge?.element.classList.add("bpmnkit-edge-split-highlight");
+        }
+    }
+    _previewEndpointMove(edgeId, isStart, diagPoint) {
+        if (!this._defs)
+            return;
+        const edge = this._edges.find((e) => e.id === edgeId);
+        if (!edge)
+            return;
+        const flow = this._defs.processes[0]?.sequenceFlows.find((sf) => sf.id === edgeId);
+        if (!flow)
+            return;
+        const plane = this._defs.diagrams[0]?.plane;
+        if (!plane)
+            return;
+        const srcDi = plane.shapes.find((s) => s.bpmnElement === flow.sourceRef);
+        const tgtDi = plane.shapes.find((s) => s.bpmnElement === flow.targetRef);
+        if (!srcDi || !tgtDi)
+            return;
+        const waypoints = edge.edge.waypoints;
+        let srcPort;
+        let tgtPort;
+        if (isStart) {
+            srcPort = closestPort(diagPoint, srcDi.bounds);
+            const lastWp = waypoints[waypoints.length - 1];
+            tgtPort = lastWp ? portFromWaypoint(lastWp, tgtDi.bounds) : "left";
+        }
+        else {
+            const firstWp = waypoints[0];
+            srcPort = firstWp ? portFromWaypoint(firstWp, srcDi.bounds) : "right";
+            tgtPort = closestPort(diagPoint, tgtDi.bounds);
+        }
+        const newWaypoints = computeWaypointsWithPorts(srcDi.bounds, srcPort, tgtDi.bounds, tgtPort);
+        this._overlay.setEndpointDragGhost(newWaypoints);
+    }
+    _commitEndpointMove(edgeId, isStart, diagPoint) {
+        if (!this._defs)
+            return;
+        this._overlay.setEndpointDragGhost(null);
+        const edge = this._edges.find((e) => e.id === edgeId);
+        if (!edge)
+            return;
+        const flow = this._defs.processes[0]?.sequenceFlows.find((sf) => sf.id === edgeId);
+        if (!flow)
+            return;
+        const plane = this._defs.diagrams[0]?.plane;
+        if (!plane)
+            return;
+        const srcDi = plane.shapes.find((s) => s.bpmnElement === flow.sourceRef);
+        const tgtDi = plane.shapes.find((s) => s.bpmnElement === flow.targetRef);
+        if (!srcDi || !tgtDi)
+            return;
+        const newPort = isStart
+            ? closestPort(diagPoint, srcDi.bounds)
+            : closestPort(diagPoint, tgtDi.bounds);
+        this._executeCommand((d) => updateEdgeEndpoint(d, edgeId, isStart, newPort));
+    }
+    _isResizable(id) {
+        const shape = this._shapes.find((s) => s.id === id);
+        if (!shape)
+            return false;
+        if (shape.annotation !== undefined)
+            return true;
+        return shape.flowElement !== undefined && RESIZABLE_TYPES.has(shape.flowElement.type);
+    }
+    _getResizableIds() {
+        const ids = new Set();
+        for (const shape of this._shapes) {
+            if (shape.annotation !== undefined ||
+                (shape.flowElement && RESIZABLE_TYPES.has(shape.flowElement.type))) {
+                ids.add(shape.id);
+            }
+        }
+        return ids;
+    }
+    // ── Snap / alignment guides ───────────────────────────────────────
+    _computeSnap(dx, dy) {
+        const selectedSet = new Set(this._selectedIds);
+        const movingShapes = this._shapes.filter((s) => selectedSet.has(s.id));
+        const staticShapes = this._shapes.filter((s) => !selectedSet.has(s.id));
+        if (movingShapes.length === 0)
+            return { dx, dy };
+        const scale = this._viewport.state.scale;
+        const threshold = 8 / scale;
+        const movingXVals = [];
+        const movingYVals = [];
+        for (const s of movingShapes) {
+            const b = s.shape.bounds;
+            movingXVals.push(b.x + dx, b.x + dx + b.width / 2, b.x + dx + b.width);
+            movingYVals.push(b.y + dy, b.y + dy + b.height / 2, b.y + dy + b.height);
+        }
+        const staticXVals = [];
+        const staticYVals = [];
+        for (const s of staticShapes) {
+            const b = s.shape.bounds;
+            staticXVals.push(b.x, b.x + b.width / 2, b.x + b.width);
+            staticYVals.push(b.y, b.y + b.height / 2, b.y + b.height);
+        }
+        // Include original positions of moving shapes as virtual snap targets
+        for (const s of movingShapes) {
+            const b = s.shape.bounds;
+            staticXVals.push(b.x, b.x + b.width / 2, b.x + b.width);
+            staticYVals.push(b.y, b.y + b.height / 2, b.y + b.height);
+        }
+        let bestDx = dx;
+        let bestDy = dy;
+        let minDistX = threshold;
+        let minDistY = threshold;
+        for (const mx of movingXVals) {
+            for (const sx of staticXVals) {
+                const dist = Math.abs(mx - sx);
+                if (dist < minDistX) {
+                    minDistX = dist;
+                    bestDx = dx + (sx - mx);
+                }
+            }
+        }
+        for (const my of movingYVals) {
+            for (const sy of staticYVals) {
+                const dist = Math.abs(my - sy);
+                if (dist < minDistY) {
+                    minDistY = dist;
+                    bestDy = dy + (sy - my);
+                }
+            }
+        }
+        return { dx: bestDx, dy: bestDy };
+    }
+    _computeAlignGuides(dx, dy) {
+        const selectedSet = new Set(this._selectedIds);
+        const movingShapes = this._shapes.filter((s) => selectedSet.has(s.id));
+        const staticShapes = this._shapes.filter((s) => !selectedSet.has(s.id));
+        if (movingShapes.length === 0)
+            return [];
+        const guides = [];
+        const EXT = 2000;
+        // Include original positions of moving shapes as virtual reference points
+        const allStaticRef = [...staticShapes, ...movingShapes];
+        for (const ms of movingShapes) {
+            const mb = ms.shape.bounds;
+            const mxVals = [mb.x + dx, mb.x + dx + mb.width / 2, mb.x + dx + mb.width];
+            const myVals = [mb.y + dy, mb.y + dy + mb.height / 2, mb.y + dy + mb.height];
+            for (const ss of allStaticRef) {
+                const sb = ss.shape.bounds;
+                const sxVals = [sb.x, sb.x + sb.width / 2, sb.x + sb.width];
+                const syVals = [sb.y, sb.y + sb.height / 2, sb.y + sb.height];
+                for (const mx of mxVals) {
+                    for (const sx of sxVals) {
+                        if (Math.abs(mx - sx) < 1) {
+                            guides.push({ x1: mx, y1: -EXT, x2: mx, y2: EXT });
+                        }
+                    }
+                }
+                for (const my of myVals) {
+                    for (const sy of syVals) {
+                        if (Math.abs(my - sy) < 1) {
+                            guides.push({ x1: -EXT, y1: my, x2: EXT, y2: my });
+                        }
+                    }
+                }
+            }
+        }
+        return guides;
+    }
+    // ── Spacing snap (equal-distance guides) ──────────────────────────
+    _computeSpacingSnap(dx, dy) {
+        const selectedSet = new Set(this._selectedIds);
+        const movingShapes = this._shapes.filter((s) => selectedSet.has(s.id));
+        const staticShapes = this._shapes.filter((s) => !selectedSet.has(s.id));
+        if (movingShapes.length !== 1 || staticShapes.length < 2) {
+            return { dx, dy, guides: [] };
+        }
+        const movingShape = movingShapes[0];
+        if (!movingShape)
+            return { dx, dy, guides: [] };
+        const moving = movingShape.shape.bounds;
+        const scale = this._viewport.state.scale;
+        const threshold = 8 / scale;
+        let bestDx = dx;
+        let bestDy = dy;
+        let minDistX = threshold;
+        let minDistY = threshold;
+        const hGuides = [];
+        const vGuides = [];
+        const mCy = moving.y + dy + moving.height / 2;
+        const mCx = moving.x + dx + moving.width / 2;
+        // Horizontal spacing: for each pair (A, B) where B is to the right of A
+        for (const A of staticShapes) {
+            const aRight = A.shape.bounds.x + A.shape.bounds.width;
+            for (const B of staticShapes) {
+                if (A.id === B.id)
+                    continue;
+                const bLeft = B.shape.bounds.x;
+                if (bLeft <= aRight)
+                    continue;
+                const gap = bLeft - aRight;
+                // Candidate: moving is to the right of B by the same gap
+                const bRight = B.shape.bounds.x + B.shape.bounds.width;
+                const candLeft = bRight + gap;
+                const distX = Math.abs(moving.x + dx - candLeft);
+                if (distX < minDistX) {
+                    minDistX = distX;
+                    bestDx = dx + (candLeft - (moving.x + dx));
+                    hGuides.length = 0;
+                    hGuides.push({ x1: aRight, y1: mCy, x2: bLeft, y2: mCy }, { x1: bRight, y1: mCy, x2: candLeft, y2: mCy });
+                }
+                // Candidate: moving is to the left of A by the same gap
+                const aLeft = A.shape.bounds.x;
+                const candRight = aLeft - gap;
+                const movRight = moving.x + dx + moving.width;
+                const distX2 = Math.abs(movRight - candRight);
+                if (distX2 < minDistX) {
+                    minDistX = distX2;
+                    bestDx = dx + (candRight - movRight);
+                    hGuides.length = 0;
+                    hGuides.push({ x1: candRight, y1: mCy, x2: aLeft, y2: mCy }, { x1: aRight, y1: mCy, x2: bLeft, y2: mCy });
+                }
+            }
+        }
+        // Vertical spacing: for each pair (A, B) where B is below A
+        for (const A of staticShapes) {
+            const aBottom = A.shape.bounds.y + A.shape.bounds.height;
+            for (const B of staticShapes) {
+                if (A.id === B.id)
+                    continue;
+                const bTop = B.shape.bounds.y;
+                if (bTop <= aBottom)
+                    continue;
+                const gap = bTop - aBottom;
+                // Candidate: moving is below B by the same gap
+                const bBottom = B.shape.bounds.y + B.shape.bounds.height;
+                const candTop = bBottom + gap;
+                const distY = Math.abs(moving.y + dy - candTop);
+                if (distY < minDistY) {
+                    minDistY = distY;
+                    bestDy = dy + (candTop - (moving.y + dy));
+                    vGuides.length = 0;
+                    vGuides.push({ x1: mCx, y1: aBottom, x2: mCx, y2: bTop }, { x1: mCx, y1: bBottom, x2: mCx, y2: candTop });
+                }
+                // Candidate: moving is above A by the same gap
+                const aTop = A.shape.bounds.y;
+                const candBottom = aTop - gap;
+                const movBottom = moving.y + dy + moving.height;
+                const distY2 = Math.abs(movBottom - candBottom);
+                if (distY2 < minDistY) {
+                    minDistY = distY2;
+                    bestDy = dy + (candBottom - movBottom);
+                    vGuides.length = 0;
+                    vGuides.push({ x1: mCx, y1: candBottom, x2: mCx, y2: aTop }, { x1: mCx, y1: aBottom, x2: mCx, y2: bTop });
+                }
+            }
+        }
+        return { dx: bestDx, dy: bestDy, guides: [...hGuides, ...vGuides] };
+    }
+    // ── Create-mode helpers ────────────────────────────────────────────
+    _computeCreateSnap(bounds) {
+        if (this._shapes.length === 0)
+            return bounds;
+        const scale = this._viewport.state.scale;
+        const threshold = 8 / scale;
+        const bxVals = [bounds.x, bounds.x + bounds.width / 2, bounds.x + bounds.width];
+        const byVals = [bounds.y, bounds.y + bounds.height / 2, bounds.y + bounds.height];
+        const sxVals = [];
+        const syVals = [];
+        for (const s of this._shapes) {
+            const b = s.shape.bounds;
+            sxVals.push(b.x, b.x + b.width / 2, b.x + b.width);
+            syVals.push(b.y, b.y + b.height / 2, b.y + b.height);
+        }
+        let bestDx = 0;
+        let bestDy = 0;
+        let minDistX = threshold;
+        let minDistY = threshold;
+        for (const bx of bxVals) {
+            for (const sx of sxVals) {
+                const dist = Math.abs(bx - sx);
+                if (dist < minDistX) {
+                    minDistX = dist;
+                    bestDx = sx - bx;
+                }
+            }
+        }
+        for (const by of byVals) {
+            for (const sy of syVals) {
+                const dist = Math.abs(by - sy);
+                if (dist < minDistY) {
+                    minDistY = dist;
+                    bestDy = sy - by;
+                }
+            }
+        }
+        return { ...bounds, x: bounds.x + bestDx, y: bounds.y + bestDy };
+    }
+    _computeCreateGuides(bounds) {
+        const guides = [];
+        const EXT = 2000;
+        const bxVals = [bounds.x, bounds.x + bounds.width / 2, bounds.x + bounds.width];
+        const byVals = [bounds.y, bounds.y + bounds.height / 2, bounds.y + bounds.height];
+        for (const s of this._shapes) {
+            const sb = s.shape.bounds;
+            const sxVals = [sb.x, sb.x + sb.width / 2, sb.x + sb.width];
+            const syVals = [sb.y, sb.y + sb.height / 2, sb.y + sb.height];
+            for (const bx of bxVals) {
+                for (const sx of sxVals) {
+                    if (Math.abs(bx - sx) < 1)
+                        guides.push({ x1: bx, y1: -EXT, x2: bx, y2: EXT });
+                }
+            }
+            for (const by of byVals) {
+                for (const sy of syVals) {
+                    if (Math.abs(by - sy) < 1)
+                        guides.push({ x1: -EXT, y1: by, x2: EXT, y2: by });
+                }
+            }
+        }
+        return guides;
+    }
+    _findCreateEdgeDrop(bounds) {
+        if (!this._defs)
+            return null;
+        const cx = bounds.x + bounds.width / 2;
+        const cy = bounds.y + bounds.height / 2;
+        const process = this._defs.processes[0];
+        if (!process)
+            return null;
+        const TOLERANCE = 20;
+        for (const edge of this._edges) {
+            const flow = process.sequenceFlows.find((sf) => sf.id === edge.id);
+            if (!flow)
+                continue;
+            const wps = edge.edge.waypoints;
+            for (let i = 0; i < wps.length - 1; i++) {
+                const a = wps[i];
+                const b = wps[i + 1];
+                if (!a || !b)
+                    continue;
+                const minX = Math.min(a.x, b.x) - TOLERANCE;
+                const maxX = Math.max(a.x, b.x) + TOLERANCE;
+                const minY = Math.min(a.y, b.y) - TOLERANCE;
+                const maxY = Math.max(a.y, b.y) + TOLERANCE;
+                if (cx >= minX && cx <= maxX && cy >= minY && cy <= maxY)
+                    return edge.id;
+            }
+        }
+        return null;
+    }
+    _setBoundaryHost(shapeId) {
+        if (this._boundaryHostId === shapeId)
+            return;
+        this._boundaryHostId = shapeId;
+        if (shapeId) {
+            const shape = this._shapes.find((s) => s.id === shapeId);
+            this._overlay.setBoundaryHostHighlight(shape ? shape.shape.bounds : null);
+        }
+        else {
+            this._overlay.setBoundaryHostHighlight(null);
+        }
+    }
+    _setCreateEdgeDropHighlight(edgeId) {
+        if (this._createEdgeDropTarget === edgeId)
+            return;
+        if (this._createEdgeDropTarget) {
+            const prev = this._edges.find((e) => e.id === this._createEdgeDropTarget);
+            prev?.element.classList.remove("bpmnkit-edge-split-highlight");
+        }
+        this._createEdgeDropTarget = edgeId;
+        if (edgeId) {
+            const edge = this._edges.find((e) => e.id === edgeId);
+            edge?.element.classList.add("bpmnkit-edge-split-highlight");
+        }
+    }
+    // ── Pointer event handlers ─────────────────────────────────────────
+    _onPointerDown = (e) => {
+        if (e.button !== 0)
+            return;
+        const rect = this._svg.getBoundingClientRect();
+        const diag = screenToDiagram(e.clientX, e.clientY, this._viewport.state, rect);
+        const hit = this._hitTest(e.clientX, e.clientY);
+        this._stateMachine.onPointerDown(e, diag, hit);
+    };
+    _onPointerMove = (e) => {
+        const rect = this._svg.getBoundingClientRect();
+        const diag = screenToDiagram(e.clientX, e.clientY, this._viewport.state, rect);
+        const hit = this._hitTest(e.clientX, e.clientY);
+        this._stateMachine.onPointerMove(e, diag, hit);
+        const mode = this._stateMachine.mode;
+        if (mode.mode === "create") {
+            const rawBounds = defaultBounds(mode.elementType, diag.x, diag.y);
+            const snapped = this._computeCreateSnap(rawBounds);
+            const snappedCenter = {
+                x: snapped.x + snapped.width / 2,
+                y: snapped.y + snapped.height / 2,
+            };
+            this._ghostSnapCenter = snappedCenter;
+            this._overlay.setGhostCreate(mode.elementType, snappedCenter);
+            this._overlay.setAlignmentGuides(this._computeCreateGuides(snapped));
+            this._setCreateEdgeDropHighlight(this._findCreateEdgeDrop(snapped));
+            // Detect boundary event attachment target for intermediate event types
+            if (isIntermediateEventType(mode.elementType) && hit.type === "shape") {
+                const shape = this._shapes.find((s) => s.id === hit.id);
+                if (shape?.flowElement && isActivityType(shape.flowElement.type)) {
+                    this._setBoundaryHost(hit.id);
+                }
+                else {
+                    this._setBoundaryHost(null);
+                }
+            }
+            else {
+                this._setBoundaryHost(null);
+            }
+        }
+    };
+    _onPointerUp = (e) => {
+        if (e.button !== 0)
+            return;
+        const rect = this._svg.getBoundingClientRect();
+        const diag = screenToDiagram(e.clientX, e.clientY, this._viewport.state, rect);
+        const hit = this._hitTest(e.clientX, e.clientY);
+        this._stateMachine.onPointerUp(e, diag, hit);
+    };
+    _onDblClick = (e) => {
+        const rect = this._svg.getBoundingClientRect();
+        const diag = screenToDiagram(e.clientX, e.clientY, this._viewport.state, rect);
+        const hit = this._hitTest(e.clientX, e.clientY);
+        this._stateMachine.onDblClick(e, diag, hit);
+    };
+    _onKeyDown = (e) => {
+        // Don't intercept keys typed into form controls or editable elements
+        const _kbTarget = e.target;
+        if (_kbTarget.tagName === "INPUT" ||
+            _kbTarget.tagName === "TEXTAREA" ||
+            _kbTarget.isContentEditable)
+            return;
+        if (this._readOnly)
+            return;
+        this._stateMachine.onKeyDown(e);
+        if (e.ctrlKey || e.metaKey) {
+            switch (e.key) {
+                case "z":
+                    if (e.shiftKey) {
+                        e.preventDefault();
+                        this.redo();
+                    }
+                    else {
+                        e.preventDefault();
+                        this.undo();
+                    }
+                    break;
+                case "y":
+                    e.preventDefault();
+                    this.redo();
+                    break;
+                case "a":
+                    e.preventDefault();
+                    this._setSelection(this._shapes.map((s) => s.id));
+                    break;
+                case "c":
+                    e.preventDefault();
+                    this._doCopy();
+                    break;
+                case "v":
+                    e.preventDefault();
+                    this._doPaste();
+                    break;
+            }
+        }
+    };
+    // ── Hit testing ───────────────────────────────────────────────────
+    _hitTest(clientX, clientY) {
+        const el = document.elementFromPoint(clientX, clientY);
+        if (!el)
+            return { type: "canvas" };
+        const handleEl = el.closest("[data-bpmnkit-handle]");
+        if (handleEl) {
+            const shapeId = handleEl.getAttribute("data-bpmnkit-id");
+            const handle = handleEl.getAttribute("data-bpmnkit-handle");
+            if (shapeId && handle)
+                return { type: "handle", shapeId, handle };
+        }
+        const portEl = el.closest("[data-bpmnkit-port]");
+        if (portEl) {
+            const shapeId = portEl.getAttribute("data-bpmnkit-id");
+            const port = portEl.getAttribute("data-bpmnkit-port");
+            if (shapeId && port)
+                return { type: "port", shapeId, port };
+        }
+        const endpointEl = el.closest("[data-bpmnkit-endpoint]");
+        if (endpointEl) {
+            const edgeId = endpointEl.getAttribute("data-bpmnkit-id");
+            const ep = endpointEl.getAttribute("data-bpmnkit-endpoint");
+            if (edgeId && ep)
+                return { type: "edge-endpoint", edgeId, isStart: ep === "start" };
+        }
+        const waypointEl = el.closest("[data-bpmnkit-waypoint]");
+        if (waypointEl) {
+            const id = waypointEl.getAttribute("data-bpmnkit-id");
+            const wpIdxStr = waypointEl.getAttribute("data-bpmnkit-waypoint-idx");
+            if (id && wpIdxStr !== null) {
+                const wpIdx = Number(wpIdxStr);
+                const rect = this._svg.getBoundingClientRect();
+                const pt = screenToDiagram(clientX, clientY, this._viewport.state, rect);
+                return { type: "edge-waypoint", id, wpIdx, pt };
+            }
+        }
+        const edgeHitEl = el.closest("[data-bpmnkit-edge-hit]");
+        if (edgeHitEl) {
+            const rect = this._svg.getBoundingClientRect();
+            const diag = screenToDiagram(clientX, clientY, this._viewport.state, rect);
+            // Use geometry to find the nearest edge across all edges — DOM z-order
+            // can cause elementFromPoint to return the wrong edge's hit area when
+            // edges are close together.
+            const seg = this._nearestEdgeSegment(diag);
+            if (seg)
+                return {
+                    type: "edge-segment",
+                    id: seg.edgeId,
+                    segIdx: seg.segIdx,
+                    isHoriz: seg.isHoriz,
+                    projPt: seg.projPt,
+                };
+        }
+        const shapeEl = el.closest("[data-bpmnkit-id]");
+        if (shapeEl && (this._shapesG.contains(shapeEl) || this._containersG.contains(shapeEl))) {
+            const id = shapeEl.getAttribute("data-bpmnkit-id");
+            if (id)
+                return { type: "shape", id };
+        }
+        return { type: "canvas" };
+    }
+    /** Returns the nearest edge segment across all edges for the given diagram point. */
+    _nearestEdgeSegment(diag) {
+        let bestDist = Number.POSITIVE_INFINITY;
+        let bestEdgeId = "";
+        let bestIdx = 0;
+        let bestProj = { x: 0, y: 0 };
+        let bestHoriz = true;
+        let found = false;
+        for (const edge of this._edges) {
+            const wps = edge.edge.waypoints;
+            for (let i = 0; i < wps.length - 1; i++) {
+                const a = wps[i];
+                const b = wps[i + 1];
+                if (!a || !b)
+                    continue;
+                const dx = b.x - a.x;
+                const dy = b.y - a.y;
+                const lenSq = dx * dx + dy * dy;
+                let proj;
+                if (lenSq < 0.001) {
+                    proj = { x: a.x, y: a.y };
+                }
+                else {
+                    const t = Math.max(0, Math.min(1, ((diag.x - a.x) * dx + (diag.y - a.y) * dy) / lenSq));
+                    proj = { x: a.x + t * dx, y: a.y + t * dy };
+                }
+                const dist = Math.hypot(diag.x - proj.x, diag.y - proj.y);
+                if (dist < bestDist) {
+                    bestDist = dist;
+                    bestEdgeId = edge.id;
+                    bestIdx = i;
+                    bestProj = proj;
+                    bestHoriz = Math.abs(dy) <= Math.abs(dx);
+                    found = true;
+                }
+            }
+        }
+        if (!found)
+            return null;
+        return { edgeId: bestEdgeId, segIdx: bestIdx, isHoriz: bestHoriz, projPt: bestProj };
+    }
+    /** Snaps a diagram point to nearby shape/waypoint positions and returns guide lines. */
+    _snapWaypoint(pt) {
+        const scale = this._viewport.state.scale;
+        const threshold = 8 / scale;
+        const EXT = 10000;
+        const xTargets = [];
+        const yTargets = [];
+        for (const shape of this._shapes) {
+            const b = shape.shape.bounds;
+            xTargets.push(b.x, b.x + b.width / 2, b.x + b.width);
+            yTargets.push(b.y, b.y + b.height / 2, b.y + b.height);
+        }
+        for (const edge of this._edges) {
+            for (const wp of edge.edge.waypoints) {
+                xTargets.push(wp.x);
+                yTargets.push(wp.y);
+            }
+        }
+        let snapX = pt.x;
+        let snapY = pt.y;
+        let minDx = threshold;
+        let minDy = threshold;
+        for (const tx of xTargets) {
+            if (Math.abs(pt.x - tx) < minDx) {
+                minDx = Math.abs(pt.x - tx);
+                snapX = tx;
+            }
+        }
+        for (const ty of yTargets) {
+            if (Math.abs(pt.y - ty) < minDy) {
+                minDy = Math.abs(pt.y - ty);
+                snapY = ty;
+            }
+        }
+        const guides = [];
+        if (minDx < threshold)
+            guides.push({ x1: snapX, y1: -EXT, x2: snapX, y2: EXT });
+        if (minDy < threshold)
+            guides.push({ x1: -EXT, y1: snapY, x2: EXT, y2: snapY });
+        return { pt: { x: snapX, y: snapY }, guides };
+    }
+    // ── Theme + controls ──────────────────────────────────────────────
+    _applyTheme(theme) {
+        const resolved = theme === "auto"
+            ? window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+            : theme;
+        if (resolved === "dark") {
+            this._host.setAttribute("data-theme", "dark");
+        }
+        else {
+            this._host.removeAttribute("data-theme");
+        }
+    }
+    _installPlugin(plugin) {
+        this._plugins.push(plugin);
+        const self = this;
+        const api = {
+            container: this._host,
+            svg: this._svg,
+            viewportEl: this._viewportG,
+            getViewport: () => this._viewport.state,
+            setViewport: (s) => this._viewport.set(s),
+            getShapes: () => [...this._shapes],
+            getEdges: () => [...this._edges],
+            getTheme: () => this._theme,
+            setTheme: (theme) => this.setTheme(theme),
+            on(event, handler) {
+                return self.on(event, handler);
+            },
+            emit(event, ...args) {
+                self._emit(event, ...args);
+            },
+        };
+        plugin.install(api);
+    }
+    _emit(event, ...args) {
+        const handlers = this._listeners.get(event);
+        if (!handlers)
+            return;
+        for (const h of handlers) {
+            ;
+            h(...args);
+        }
+    }
+}
+//# sourceMappingURL=editor.js.map