@codeenvision/ui-webcomponents 1.0.0

package/dist/components/Diagram/Diagram.js

@@ -0,0 +1,2471 @@
+import { BaseComponent } from "../../core/BaseComponent.js";
+const ZOOM_MIN = 0.4;
+const ZOOM_MAX = 2.4;
+const DEFAULT_TOOLS = [
+    { type: "process", label: "Process", width: 140, height: 60, icon: "briefcase-alt.svg" },
+    { type: "process", label: "API Step", width: 160, height: 64, icon: "briefcase-alt.svg" },
+    { type: "subprocess", label: "Subprocess", width: 180, height: 86, icon: "briefcase-alt.svg" },
+    { type: "decision", label: "Decision", width: 140, height: 140, icon: "question.svg" },
+    { type: "decision", label: "Review Gate", width: 150, height: 150, icon: "question.svg" },
+    { type: "terminator", label: "Terminator", width: 160, height: 60, icon: "rocket.svg" },
+    { type: "terminator", label: "End Event", width: 170, height: 62, icon: "rocket.svg" },
+    { type: "note", label: "Note", icon: "notes.svg", width: 200, height: 100 },
+    { type: "note", label: "Annotation", icon: "notes.svg", width: 220, height: 110 },
+    { type: "document", label: "Document", icon: "notes.svg", width: 170, height: 104 },
+    { type: "rectangle", label: "Rectangle", icon: "square-shape.svg", width: 140, height: 80 },
+    { type: "rectangle", label: "Service Box", icon: "square-shape.svg", width: 180, height: 96 },
+    { type: "square", label: "Square", icon: "square-shape.svg", width: 100, height: 100 },
+    { type: "preparation", label: "Preparation", icon: "polygon.svg", width: 172, height: 92 },
+    { type: "ellipse", label: "Ellipse", icon: "circle.svg", width: 140, height: 80 },
+    { type: "circle", label: "Circle", icon: "circle.svg", width: 104, height: 104 },
+    { type: "oval", label: "Oval", icon: "circle.svg", width: 170, height: 96 },
+    { type: "ellipse", label: "Event Node", icon: "circle.svg", width: 150, height: 92 },
+    { type: "capsule", label: "Capsule", icon: "circle.svg", width: 180, height: 72 },
+    { type: "display", label: "Display", icon: "circle.svg", width: 184, height: 96 },
+    { type: "delay", label: "Delay", icon: "circle.svg", width: 180, height: 90 },
+    { type: "manual-input", label: "Manual Input", icon: "triangle.svg", width: 170, height: 90 },
+    { type: "triangle", label: "Triangle", icon: "triangle.svg", width: 120, height: 120 },
+    { type: "triangle", label: "Warning", icon: "triangle.svg", width: 130, height: 130 },
+    { type: "merge", label: "Merge", icon: "triangle.svg", width: 138, height: 112 },
+    { type: "collate", label: "Collate", icon: "triangle.svg", width: 138, height: 116 },
+    { type: "hexagon", label: "Hexagon", icon: "polygon.svg", width: 140, height: 90 },
+    { type: "hexagon", label: "Gateway", icon: "polygon.svg", width: 160, height: 100 },
+    { type: "diamond", label: "Diamond", icon: "polygon.svg", width: 132, height: 132 },
+    { type: "or", label: "Or", icon: "circle.svg", width: 116, height: 116 },
+    { type: "parallelogram", label: "Parallelogram", icon: "polygon.svg", width: 168, height: 96 },
+    { type: "off-page-connector", label: "Off-page Connector", icon: "polygon.svg", width: 146, height: 128 },
+    { type: "data", label: "Data", icon: "database.svg", width: 160, height: 80 },
+    { type: "data", label: "Data Store", icon: "database.svg", width: 180, height: 90 },
+    { type: "database-cylinder", label: "Database Cylinder", icon: "database.svg", width: 172, height: 116 },
+    { type: "stored-data", label: "Stored Data", icon: "database.svg", width: 176, height: 100 },
+];
+const TOOL_ICON_FALLBACKS = {
+    process: "P",
+    decision: "?",
+    terminator: "T",
+    note: "N",
+    document: "D",
+    rectangle: "R",
+    square: "S",
+    preparation: "P",
+    ellipse: "E",
+    circle: "C",
+    oval: "O",
+    subprocess: "S",
+    display: "D",
+    delay: "D",
+    "manual-input": "M",
+    triangle: "T",
+    merge: "M",
+    collate: "C",
+    hexagon: "H",
+    diamond: "D",
+    or: "O",
+    parallelogram: "P",
+    "off-page-connector": "O",
+    capsule: "C",
+    "database-cylinder": "D",
+    "stored-data": "S",
+    data: "D",
+};
+const DEFAULT_COLLAPSED_TOOLBOX_GROUPS = new Set(["events", "notes", "data"]);
+const TOOLBAR_ACTIONS = [
+    { id: "undo", label: "Undo", icon: "history.svg" },
+    { id: "redo", label: "Redo", icon: "redo.svg" },
+    { id: "align-left", label: "Align left", icon: "align-left.svg" },
+    { id: "align-center", label: "Align center", icon: "align-center.svg" },
+    { id: "align-right", label: "Align right", icon: "align-right.svg" },
+    { id: "distribute-horizontal", label: "Distribute horizontally", icon: "horizontal-distribution-center.svg" },
+    { id: "align-top", label: "Align top", icon: "align.svg" },
+    { id: "align-middle", label: "Align middle", icon: "align-center-justify.svg" },
+    { id: "align-bottom", label: "Align bottom", icon: "align-bottom.svg" },
+    { id: "distribute-vertical", label: "Distribute vertically", icon: "vertical-distribution-center.svg" },
+    { id: "zoom-out", label: "Zoom out", icon: "search-minus.svg" },
+    { id: "fit", label: "Fit view", icon: "focus-target.svg" },
+    { id: "reset", label: "Reset view", icon: "repeat.svg" },
+    { id: "zoom-in", label: "Zoom in", icon: "search-plus.svg" },
+    { id: "center", label: "Center canvas", icon: "crosshair.svg" },
+    { id: "toggle-tools", label: "Toggle tools", icon: "apps.svg" },
+    { id: "connect", label: "Connect nodes", icon: "link.svg" },
+    { id: "edit-label", label: "Edit labels", icon: "pen.svg" },
+    { id: "duplicate-node", label: "Duplicate node", icon: "copy.svg" },
+    { id: "delete-node", label: "Delete node", icon: "trash.svg" },
+    { id: "fullscreen", label: "Expand diagram", icon: "expand-arrows.svg" },
+    { id: "export-svg", label: "Export SVG", icon: "file-export.svg" },
+    { id: "export-json", label: "Export JSON", icon: "file-alt.svg" },
+    { id: "export-png", label: "Export PNG", icon: "image.svg" },
+    { id: "export-jpg", label: "Export JPG", icon: "image-v.svg" },
+    { id: "export-pdf", label: "Export PDF", icon: "file.svg" },
+];
+const SHORTCUT_HINTS = {
+    undo: "Ctrl/Cmd+Z",
+    redo: "Ctrl/Cmd+Shift+Z",
+    "duplicate-node": "Ctrl/Cmd+D",
+    "delete-node": "Delete",
+};
+const TOOLBAR_ACTION_GROUPS = [
+    {
+        id: "nav",
+        label: "Navigation",
+        className: "ce-diagram__toolbar-group ce-diagram__toolbar-group--nav",
+        actions: ["undo", "redo", "zoom-out", "fit", "reset", "zoom-in", "center"],
+    },
+    {
+        id: "layout",
+        label: "Layout",
+        className: "ce-diagram__toolbar-group ce-diagram__toolbar-group--layout",
+        actions: ["toggle-tools", "fullscreen"],
+    },
+    {
+        id: "arrange",
+        label: "Arrange",
+        className: "ce-diagram__toolbar-group ce-diagram__toolbar-group--arrange",
+        actions: ["align-left", "align-center", "align-right", "distribute-horizontal", "align-top", "align-middle", "align-bottom", "distribute-vertical"],
+        collapsible: true,
+    },
+    {
+        id: "edit",
+        label: "Edit",
+        className: "ce-diagram__toolbar-group ce-diagram__toolbar-group--edit",
+        actions: ["connect", "edit-label", "duplicate-node", "delete-node"],
+    },
+    {
+        id: "export",
+        label: "Export",
+        className: "ce-diagram__toolbar-group ce-diagram__toolbar-group--export",
+        actions: ["export-svg", "export-json", "export-png", "export-jpg", "export-pdf"],
+        collapsible: true,
+    },
+];
+export class Diagram extends BaseComponent {
+    options;
+    svg;
+    nodesGroup;
+    linksGroup;
+    currentScale = 1;
+    pan = { x: 0, y: 0 };
+    panStart;
+    isPanning = false;
+    nodes;
+    links;
+    draggingNode;
+    dragCandidate;
+    toolbox;
+    toolboxQuery = "";
+    collapsedToolboxGroups = new Set(DEFAULT_COLLAPSED_TOOLBOX_GROUPS);
+    connectSourceId;
+    resizing;
+    selectedNodeId;
+    selectedNodeIds = new Set();
+    selectedLinkId;
+    connectMode = false;
+    statusEl;
+    inlineEditor;
+    canvasWrap;
+    nodeClickHandler;
+    nodeClickTimer;
+    editMode = false;
+    labelInput;
+    contextPanel;
+    toolboxVisible = true;
+    toolboxVisibleBeforeFullscreen;
+    collapsedToolbarGroups = new Set(["arrange", "export"]);
+    connectorDragMoveHandler;
+    connectorDragUpHandler;
+    fullscreenChangeHandler;
+    historyPast = [];
+    historyFuture = [];
+    marqueeSelection;
+    bendDrag;
+    connectionDrag;
+    constructor(options) {
+        super(options.selector);
+        const nodes = this.normalizeNodes(options.nodes);
+        const links = this.normalizeLinks(options);
+        this.options = {
+            theme: "light",
+            ...options,
+            nodes,
+            links,
+        };
+        this.nodes = structuredClone(this.options.nodes);
+        this.links = structuredClone(this.options.links);
+    }
+    init() {
+        if (this.options.hydrate && this.tryHydrate()) {
+            return;
+        }
+        this.destroy();
+        this.nodes = structuredClone(this.options.nodes);
+        this.links = structuredClone(this.options.links);
+        this.render();
+    }
+    destroy() {
+        this.el.innerHTML = "";
+        this.detachConnectorDragListeners();
+        if (this.fullscreenChangeHandler) {
+            document.removeEventListener("fullscreenchange", this.fullscreenChangeHandler);
+            this.fullscreenChangeHandler = undefined;
+        }
+        this.svg = undefined;
+        this.nodesGroup = undefined;
+        this.linksGroup = undefined;
+        this.currentScale = 1;
+        this.pan = { x: 0, y: 0 };
+        this.nodes = [];
+        this.links = [];
+        this.selectedNodeId = undefined;
+        this.selectedNodeIds.clear();
+        this.selectedLinkId = undefined;
+        this.toolboxVisible = true;
+        this.toolboxVisibleBeforeFullscreen = undefined;
+        this.toolboxQuery = "";
+        this.historyPast = [];
+        this.historyFuture = [];
+        if (this.nodeClickTimer) {
+            window.clearTimeout(this.nodeClickTimer);
+            this.nodeClickTimer = undefined;
+        }
+    }
+    render() {
+        this.el.className = "ce-diagram";
+        this.el.classList.toggle("ce-diagram--dark", this.options.theme === "dark");
+        this.el.setAttribute("data-ce-component", "diagram");
+        this.el.setAttribute("part", "base");
+        const layout = document.createElement("div");
+        layout.className = "ce-diagram__layout";
+        layout.setAttribute("part", "layout");
+        const toolbox = this.buildToolbox();
+        layout.appendChild(toolbox);
+        this.toolbox = toolbox;
+        const svg = this.createSvgCanvas();
+        const canvasWrap = document.createElement("div");
+        canvasWrap.className = "ce-diagram__canvas-wrap";
+        canvasWrap.setAttribute("part", "canvas-wrap");
+        canvasWrap.appendChild(svg);
+        this.attachCanvasHandlers(canvasWrap);
+        layout.appendChild(canvasWrap);
+        this.canvasWrap = canvasWrap;
+        const toolbar = this.buildToolbar();
+        canvasWrap.appendChild(toolbar);
+        this.attachToolbarHandlers(toolbar);
+        const contextPanel = this.buildContextPanel();
+        canvasWrap.appendChild(contextPanel);
+        this.contextPanel = contextPanel;
+        canvasWrap.appendChild(this.buildCanvasHint());
+        this.el.appendChild(layout);
+        this.attachFullscreenListener();
+        this.setFullscreenState(document.fullscreenElement === this.el);
+        this.svg = svg;
+        this.renderLinks();
+        this.renderNodes();
+        this.applyTransform();
+        this.syncContextPanel();
+    }
+    buildToolbar() {
+        const bar = document.createElement("div");
+        bar.className = "ce-diagram__toolbar";
+        bar.dataset.mode = "default";
+        bar.setAttribute("part", "toolbar");
+        const actionsWrap = document.createElement("div");
+        actionsWrap.className = "ce-diagram__toolbar-actions";
+        actionsWrap.setAttribute("part", "toolbar-actions");
+        TOOLBAR_ACTION_GROUPS.forEach((group) => {
+            const groupEl = document.createElement("div");
+            groupEl.className = group.className;
+            groupEl.dataset.groupId = group.id;
+            if (group.collapsible) {
+                groupEl.classList.toggle("is-collapsed", this.collapsedToolbarGroups.has(group.id));
+                const toggle = document.createElement("button");
+                toggle.type = "button";
+                toggle.className = "ce-diagram__toolbar-group-toggle";
+                toggle.dataset.groupToggle = group.id;
+                toggle.setAttribute("part", "toolbar-group-toggle");
+                toggle.setAttribute("aria-label", `${this.collapsedToolbarGroups.has(group.id) ? "Expand" : "Collapse"} ${group.label}`);
+                toggle.title = `${this.collapsedToolbarGroups.has(group.id) ? "Expand" : "Collapse"} ${group.label}`;
+                toggle.textContent = this.collapsedToolbarGroups.has(group.id) ? "+" : "−";
+                groupEl.appendChild(toggle);
+            }
+            const content = document.createElement("div");
+            content.className = "ce-diagram__toolbar-group-content";
+            content.setAttribute("part", "toolbar-group-content");
+            group.actions.forEach((actionId) => {
+                const action = TOOLBAR_ACTIONS.find((entry) => entry.id === actionId);
+                if (action) {
+                    content.appendChild(this.createToolbarButton(action));
+                }
+            });
+            groupEl.appendChild(content);
+            actionsWrap.appendChild(groupEl);
+        });
+        const labelInput = document.createElement("input");
+        labelInput.type = "text";
+        labelInput.placeholder = "Double-click a node to rename";
+        labelInput.className = "ce-diagram__label-input";
+        labelInput.dataset.action = "label-input";
+        labelInput.setAttribute("part", "label-input");
+        labelInput.disabled = true;
+        labelInput.setAttribute("aria-label", "Selected node label");
+        const status = document.createElement("div");
+        status.className = "ce-diagram__status";
+        status.setAttribute("part", "status");
+        status.setAttribute("aria-live", "polite");
+        const meta = document.createElement("div");
+        meta.className = "ce-diagram__toolbar-meta";
+        meta.setAttribute("part", "toolbar-meta");
+        meta.append(labelInput, status);
+        bar.append(actionsWrap, meta);
+        return bar;
+    }
+    buildContextPanel() {
+        const panel = document.createElement("aside");
+        panel.className = "ce-diagram__context-panel";
+        panel.setAttribute("part", "context-panel");
+        panel.innerHTML = `
+      <div class="ce-diagram__context-title" part="context-title">Selection</div>
+      <div class="ce-diagram__context-body" part="context-body"></div>
+    `;
+        return panel;
+    }
+    buildCanvasHint() {
+        const hint = document.createElement("aside");
+        hint.className = "ce-diagram__canvas-hint";
+        hint.setAttribute("part", "canvas-hint");
+        hint.innerHTML = `
+      <div class="ce-diagram__canvas-hint-title">Editor tips</div>
+      <ul class="ce-diagram__canvas-hint-list">
+        <li>Drag tools onto the canvas to add shapes.</li>
+        <li>Double-click a node or link to edit text inline.</li>
+        <li>Shift + drag to marquee-select multiple nodes.</li>
+        <li>Drag from node ports to create connectors.</li>
+      </ul>
+    `;
+        return hint;
+    }
+    createToolbarButton(action) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "ce-diagram__toolbar-btn";
+        button.dataset.action = action.id;
+        button.setAttribute("part", `toolbar-button ${action.id}`);
+        button.setAttribute("aria-label", action.label);
+        const shortcut = SHORTCUT_HINTS[action.id];
+        const title = shortcut ? `${action.label} (${shortcut})` : action.label;
+        button.title = title;
+        button.dataset.tooltip = title;
+        button.appendChild(this.createIconElement("ce-diagram__toolbar-icon", action.icon, action.label.charAt(0)));
+        const label = document.createElement("span");
+        label.className = "ce-diagram__toolbar-label";
+        label.setAttribute("part", "toolbar-label");
+        label.textContent = action.label;
+        button.appendChild(label);
+        return button;
+    }
+    getIconscoutIconPath(file) {
+        return `/assets/icons/latest/iconscout/line/default/${file}`;
+    }
+    buildToolbox() {
+        const tools = this.getTools();
+        const panel = document.createElement("div");
+        panel.className = "ce-diagram__toolbox";
+        panel.setAttribute("part", "toolbox");
+        const title = document.createElement("div");
+        title.className = "ce-diagram__toolbox-title";
+        title.setAttribute("part", "toolbox-title");
+        title.textContent = "Tools";
+        panel.appendChild(title);
+        const search = document.createElement("input");
+        search.type = "search";
+        search.className = "ce-diagram__toolbox-search";
+        search.setAttribute("part", "toolbox-search");
+        search.placeholder = "Search tools";
+        search.value = this.toolboxQuery;
+        panel.appendChild(search);
+        const list = document.createElement("div");
+        list.className = "ce-diagram__toolbox-list";
+        list.setAttribute("part", "toolbox-list");
+        search.addEventListener("input", () => {
+            this.toolboxQuery = search.value.trim().toLowerCase();
+            this.populateToolboxList(list, tools);
+        });
+        this.populateToolboxList(list, tools);
+        panel.appendChild(list);
+        return panel;
+    }
+    populateToolboxList(list, tools) {
+        list.innerHTML = "";
+        const groupedTools = new Map();
+        tools.forEach((tool) => {
+            const matchesQuery = !this.toolboxQuery ||
+                tool.label.toLowerCase().includes(this.toolboxQuery) ||
+                tool.type.toLowerCase().includes(this.toolboxQuery);
+            if (!matchesQuery) {
+                return;
+            }
+            const groupLabel = this.getToolGroupLabel(tool.type);
+            const group = groupedTools.get(groupLabel) ?? [];
+            group.push(tool);
+            groupedTools.set(groupLabel, group);
+        });
+        groupedTools.forEach((groupTools, groupLabel) => {
+            const groupId = groupLabel.toLowerCase().replace(/\s+/g, "-");
+            const section = document.createElement("section");
+            section.className = "ce-diagram__toolbox-group";
+            section.setAttribute("part", "toolbox-group");
+            section.dataset.groupId = groupId;
+            if (!this.toolboxQuery) {
+                section.classList.toggle("is-collapsed", this.collapsedToolboxGroups.has(groupId));
+            }
+            const heading = document.createElement("button");
+            heading.type = "button";
+            heading.className = "ce-diagram__toolbox-group-title";
+            heading.setAttribute("part", "toolbox-group-title");
+            heading.dataset.groupToggle = groupId;
+            heading.setAttribute("aria-expanded", this.toolboxQuery ? "true" : String(!this.collapsedToolboxGroups.has(groupId)));
+            heading.innerHTML = `<span>${groupLabel}</span><span class="ce-diagram__toolbox-group-caret" aria-hidden="true">${this.toolboxQuery || !this.collapsedToolboxGroups.has(groupId) ? "−" : "+"}</span>`;
+            heading.addEventListener("click", () => {
+                if (this.toolboxQuery) {
+                    return;
+                }
+                if (this.collapsedToolboxGroups.has(groupId)) {
+                    this.collapsedToolboxGroups.delete(groupId);
+                }
+                else {
+                    this.collapsedToolboxGroups.add(groupId);
+                }
+                this.populateToolboxList(list, tools);
+            });
+            section.appendChild(heading);
+            const groupList = document.createElement("div");
+            groupList.className = "ce-diagram__toolbox-group-list";
+            groupList.setAttribute("part", "toolbox-group-list");
+            groupTools.forEach((tool) => {
+                const btn = document.createElement("button");
+                btn.type = "button";
+                btn.className = "ce-diagram__tool";
+                btn.setAttribute("part", "tool");
+                btn.innerHTML = "";
+                if (tool.icon) {
+                    btn.appendChild(this.createToolIconElement(tool.icon, TOOL_ICON_FALLBACKS[tool.type] ?? tool.label.charAt(0)));
+                }
+                const label = document.createElement("span");
+                label.textContent = tool.label;
+                btn.appendChild(label);
+                btn.draggable = true;
+                this.applyToolButtonData(btn, tool);
+                this.attachToolDragHandlers(btn, tool);
+                groupList.appendChild(btn);
+            });
+            section.append(groupList);
+            list.appendChild(section);
+        });
+        if (!list.children.length) {
+            const empty = document.createElement("div");
+            empty.className = "ce-diagram__toolbox-empty";
+            empty.setAttribute("part", "toolbox-empty");
+            empty.textContent = "No tools match the current search.";
+            list.appendChild(empty);
+        }
+    }
+    createToolIconElement(file, fallbackText) {
+        const icon = document.createElement("span");
+        icon.className = "ce-diagram__tool-icon";
+        icon.setAttribute("part", "tool-icon");
+        icon.setAttribute("aria-hidden", "true");
+        icon.style.backgroundImage = `url("${this.getIconscoutIconPath(file)}")`;
+        icon.dataset.fallback = fallbackText;
+        return icon;
+    }
+    createIconElement(className, file, fallbackText) {
+        const wrap = document.createElement("span");
+        wrap.className = `${className}-wrap`;
+        wrap.setAttribute("part", className.includes("tool") ? "tool-icon" : "toolbar-icon");
+        const img = document.createElement("img");
+        img.className = className;
+        img.alt = "";
+        img.setAttribute("aria-hidden", "true");
+        img.src = this.getIconscoutIconPath(file);
+        img.loading = "lazy";
+        img.decoding = "async";
+        const fallback = document.createElement("span");
+        fallback.className = `${className}-fallback`;
+        fallback.setAttribute("aria-hidden", "true");
+        fallback.dataset.fallback = fallbackText;
+        fallback.hidden = true;
+        img.addEventListener("error", () => {
+            wrap.classList.add("is-fallback");
+            fallback.hidden = false;
+            fallback.textContent = fallback.dataset.fallback ?? "";
+        });
+        img.addEventListener("load", () => {
+            wrap.classList.remove("is-fallback");
+            fallback.hidden = true;
+            fallback.textContent = "";
+        });
+        wrap.append(img, fallback);
+        return wrap;
+    }
+    getTools() {
+        return this.options.tools ?? DEFAULT_TOOLS;
+    }
+    getToolGroupLabel(type) {
+        switch (type) {
+            case "process":
+            case "rectangle":
+            case "square":
+            case "parallelogram":
+            case "subprocess":
+            case "delay":
+            case "manual-input":
+            case "display":
+            case "preparation":
+                return "Flow";
+            case "decision":
+            case "hexagon":
+            case "triangle":
+            case "diamond":
+            case "merge":
+            case "or":
+            case "collate":
+            case "off-page-connector":
+                return "Logic";
+            case "terminator":
+            case "ellipse":
+            case "circle":
+            case "oval":
+            case "capsule":
+                return "Events";
+            case "note":
+            case "document":
+                return "Notes";
+            case "database-cylinder":
+            case "stored-data":
+            case "data":
+                return "Data";
+            default:
+                return "Other";
+        }
+    }
+    normalizeNodes(nodes) {
+        if (!Array.isArray(nodes)) {
+            return [];
+        }
+        return nodes.map((node, index) => ({
+            ...node,
+            x: node.x ?? index * 80,
+            y: node.y ?? index * 80,
+        }));
+    }
+    normalizeLinks(options) {
+        const rawLinks = Array.isArray(options.links) ? options.links : [];
+        const normalizedLinks = rawLinks
+            .map((link, index) => {
+            if (!link?.source || !link?.target) {
+                return undefined;
+            }
+            return {
+                id: link.id ?? `${link.source}-${link.target}-${index}`,
+                source: link.source,
+                target: link.target,
+            };
+        })
+            .filter(Boolean);
+        if (normalizedLinks.length) {
+            return normalizedLinks;
+        }
+        const legacyEdges = options.edges ?? [];
+        return legacyEdges
+            .map((edge, index) => {
+            const source = edge?.source ?? edge?.from;
+            const target = edge?.target ?? edge?.to;
+            if (!source || !target) {
+                return undefined;
+            }
+            return {
+                id: edge.id ?? `${source}-${target}-${index}`,
+                source,
+                target,
+            };
+        })
+            .filter(Boolean);
+    }
+    applyToolButtonData(button, tool) {
+        button.dataset.toolType = tool.type;
+        button.dataset.toolLabel = tool.label;
+        if (tool.width !== undefined) {
+            button.dataset.toolWidth = String(tool.width);
+        }
+        if (tool.height !== undefined) {
+            button.dataset.toolHeight = String(tool.height);
+        }
+        if (tool.icon) {
+            button.dataset.toolIcon = tool.icon;
+        }
+    }
+    resolveToolFromButton(button, tools) {
+        const toolType = button.dataset.toolType;
+        if (toolType) {
+            const match = tools.find((tool) => tool.type === toolType);
+            if (match) {
+                return match;
+            }
+        }
+        if (!toolType) {
+            return undefined;
+        }
+        const width = button.dataset.toolWidth ? Number(button.dataset.toolWidth) : undefined;
+        const height = button.dataset.toolHeight ? Number(button.dataset.toolHeight) : undefined;
+        return {
+            type: toolType,
+            label: button.dataset.toolLabel ?? toolType,
+            width: Number.isFinite(width) ? width : undefined,
+            height: Number.isFinite(height) ? height : undefined,
+            icon: button.dataset.toolIcon ?? undefined,
+        };
+    }
+    attachToolDragHandlers(button, tool) {
+        button.addEventListener("dragstart", (e) => {
+            if (!e.dataTransfer)
+                return;
+            e.dataTransfer.effectAllowed = "copy";
+            const payload = JSON.stringify(tool);
+            e.dataTransfer.setData("application/json", payload);
+            e.dataTransfer.setData("text/plain", payload);
+            e.dataTransfer.setDragImage(button, button.clientWidth / 2, button.clientHeight / 2);
+        });
+    }
+    attachToolbarHandlers(toolbar) {
+        const connect = toolbar.querySelector('[data-action="connect"]');
+        const editBtn = toolbar.querySelector('[data-action="edit-label"]');
+        const labelInput = toolbar.querySelector(".ce-diagram__label-input");
+        const status = toolbar.querySelector(".ce-diagram__status");
+        this.labelInput = labelInput ?? undefined;
+        this.statusEl = status ?? undefined;
+        toolbar.querySelectorAll(".ce-diagram__toolbar-group-toggle").forEach((toggle) => {
+            toggle.addEventListener("click", (event) => {
+                event.stopPropagation();
+                const groupId = toggle.dataset.groupToggle;
+                if (!groupId)
+                    return;
+                if (this.collapsedToolbarGroups.has(groupId)) {
+                    this.collapsedToolbarGroups.delete(groupId);
+                }
+                else {
+                    this.collapsedToolbarGroups.add(groupId);
+                }
+                const replacement = this.buildToolbar();
+                toolbar.replaceWith(replacement);
+                this.attachToolbarHandlers(replacement);
+            });
+        });
+        toolbar.querySelector('[data-action="zoom-out"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.zoomBy(-0.2);
+            this.updateStatus(`Zoom ${Math.round(this.currentScale * 100)}%`);
+        });
+        toolbar.querySelector('[data-action="fit"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.fitToView();
+            this.updateStatus("Fitted all nodes to the viewport");
+        });
+        toolbar.querySelector('[data-action="reset"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.resetView();
+            this.clearInteractionModes(toolbar);
+            this.updateStatus("View reset");
+        });
+        toolbar.querySelector('[data-action="zoom-in"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.zoomBy(0.2);
+            this.updateStatus(`Zoom ${Math.round(this.currentScale * 100)}%`);
+        });
+        toolbar.querySelector('[data-action="center"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.centerCanvas();
+            this.updateStatus("Canvas centered");
+        });
+        toolbar.querySelector('[data-action="toggle-tools"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.toggleTools(toolbar);
+        });
+        toolbar.querySelector('[data-action="fullscreen"]')?.addEventListener("click", async (e) => {
+            e.stopPropagation();
+            await this.toggleFullscreen();
+        });
+        toolbar.querySelector('[data-action="undo"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.undo();
+        });
+        toolbar.querySelector('[data-action="redo"]')?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.redo();
+        });
+        toolbar.querySelector('[data-action="align-left"]')?.addEventListener("click", () => this.alignSelection("left"));
+        toolbar.querySelector('[data-action="align-center"]')?.addEventListener("click", () => this.alignSelection("center"));
+        toolbar.querySelector('[data-action="align-right"]')?.addEventListener("click", () => this.alignSelection("right"));
+        toolbar.querySelector('[data-action="distribute-horizontal"]')?.addEventListener("click", () => this.distributeSelection("horizontal"));
+        toolbar.querySelector('[data-action="align-top"]')?.addEventListener("click", () => this.alignSelection("top"));
+        toolbar.querySelector('[data-action="align-middle"]')?.addEventListener("click", () => this.alignSelection("middle"));
+        toolbar.querySelector('[data-action="align-bottom"]')?.addEventListener("click", () => this.alignSelection("bottom"));
+        toolbar.querySelector('[data-action="distribute-vertical"]')?.addEventListener("click", () => this.distributeSelection("vertical"));
+        connect?.addEventListener("click", () => {
+            this.connectionDrag = undefined;
+            this.connectSourceId = undefined;
+            this.connectMode = !this.connectMode;
+            this.editMode = false;
+            toolbar.dataset.mode = this.connectMode ? "connect" : "default";
+            connect.classList.toggle("is-active", this.connectMode);
+            editBtn?.classList.remove("is-active");
+            this.updateStatus(this.connectMode ? "Click a source, then a target to connect" : "");
+        });
+        editBtn?.addEventListener("click", () => {
+            this.editMode = !this.editMode;
+            this.connectionDrag = undefined;
+            this.connectMode = false;
+            this.connectSourceId = undefined;
+            connect?.classList.remove("is-active");
+            editBtn.classList.toggle("is-active", this.editMode);
+            this.updateStatus(this.editMode ? "Click a shape to edit its label" : "");
+        });
+        toolbar.querySelector('[data-action="duplicate-node"]')?.addEventListener("click", () => {
+            this.duplicateSelectedNode();
+        });
+        toolbar.querySelector('[data-action="delete-node"]')?.addEventListener("click", () => {
+            this.deleteSelectedNode();
+        });
+        toolbar.querySelector('[data-action="export-svg"]')?.addEventListener("click", () => this.exportSVG());
+        toolbar.querySelector('[data-action="export-json"]')?.addEventListener("click", () => this.exportJSON());
+        toolbar
+            .querySelector('[data-action="export-png"]')
+            ?.addEventListener("click", () => this.exportRaster("image/png", "diagram.png"));
+        toolbar
+            .querySelector('[data-action="export-jpg"]')
+            ?.addEventListener("click", () => this.exportRaster("image/jpeg", "diagram.jpg"));
+        toolbar.querySelector('[data-action="export-pdf"]')?.addEventListener("click", () => this.exportPDF());
+        labelInput?.addEventListener("input", () => this.updateSelectedLabel(labelInput.value));
+        labelInput?.addEventListener("keydown", (event) => {
+            if (event.key === "Enter") {
+                event.preventDefault();
+                labelInput.blur();
+            }
+        });
+    }
+    syncContextPanel() {
+        if (!this.contextPanel)
+            return;
+        const body = this.contextPanel.querySelector(".ce-diagram__context-body");
+        if (!body)
+            return;
+        const selectedNodes = this.getSelectedNodes();
+        if (this.selectedLinkId) {
+            const link = this.links.find((entry) => entry.id === this.selectedLinkId);
+            if (!link) {
+                body.innerHTML = "<p>No selection.</p>";
+                return;
+            }
+            body.innerHTML = `
+        <div class="ce-diagram__context-grid">
+          <div><span>Connector</span><strong>${link.source} → ${link.target}</strong></div>
+          <div><span>Label</span><strong>${link.label ?? "None"}</strong></div>
+        </div>
+        <label class="ce-diagram__context-field">
+          <span>Condition label</span>
+          <input class="ce-diagram__context-input" type="text" value="${this.escapeHtml(link.label ?? "")}" placeholder="Approved / Rejected" />
+        </label>
+        <div class="ce-diagram__context-hint">Double-click the connector or edit the field here.</div>
+      `;
+            const input = body.querySelector(".ce-diagram__context-input");
+            input?.addEventListener("input", () => {
+                link.label = input.value.trim() || undefined;
+                this.renderLinks();
+            });
+            return;
+        }
+        if (selectedNodes.length > 1) {
+            body.innerHTML = `
+        <div class="ce-diagram__context-grid">
+          <div><span>Selection</span><strong>${selectedNodes.length} nodes</strong></div>
+          <div><span>Actions</span><strong>Align, distribute, drag as group</strong></div>
+        </div>
+        <div class="ce-diagram__context-hint">Use toolbar arrange actions or drag one selected node to move the whole group.</div>
+      `;
+            return;
+        }
+        if (this.selectedNodeId) {
+            const node = this.nodes.find((entry) => entry.id === this.selectedNodeId);
+            if (!node)
+                return;
+            body.innerHTML = `
+        <div class="ce-diagram__context-grid">
+          <div><span>Node</span><strong>${this.escapeHtml(node.label)}</strong></div>
+          <div><span>Type</span><strong>${this.escapeHtml(node.type ?? "process")}</strong></div>
+          <div><span>Position</span><strong>${node.x}, ${node.y}</strong></div>
+          <div><span>Size</span><strong>${node.width ?? 140} × ${node.height ?? 60}</strong></div>
+        </div>
+        <label class="ce-diagram__context-field">
+          <span>Node label</span>
+          <input class="ce-diagram__context-input" type="text" value="${this.escapeHtml(node.label)}" placeholder="Edit node label" />
+        </label>
+      `;
+            const input = body.querySelector(".ce-diagram__context-input");
+            input?.addEventListener("input", () => {
+                node.label = input.value;
+                this.syncLabelInput();
+                this.renderNodes();
+            });
+            return;
+        }
+        body.innerHTML = `
+      <div class="ce-diagram__context-empty">
+        <strong>No selection</strong>
+        <span>Select a node or connector to inspect and edit it here.</span>
+      </div>
+    `;
+    }
+    escapeHtml(value) {
+        return value
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#39;");
+    }
+    clearInteractionModes(toolbar) {
+        this.connectMode = false;
+        this.editMode = false;
+        this.connectSourceId = undefined;
+        this.connectionDrag = undefined;
+        this.detachConnectorDragListeners();
+        const scope = toolbar ?? this.el.querySelector(".ce-diagram__toolbar");
+        scope?.querySelector('[data-action="connect"]')?.classList.remove("is-active");
+        scope?.querySelector('[data-action="edit-label"]')?.classList.remove("is-active");
+        if (scope) {
+            scope.dataset.mode = "default";
+        }
+    }
+    fitToView() {
+        if (!this.svg || !this.nodes.length) {
+            return;
+        }
+        const bounds = this.getNodeBounds();
+        const width = Math.max(this.svg.clientWidth, 1);
+        const height = Math.max(this.svg.clientHeight, 1);
+        const padding = 80;
+        const scaleX = (width - padding * 2) / Math.max(bounds.width, 1);
+        const scaleY = (height - padding * 2) / Math.max(bounds.height, 1);
+        this.currentScale = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.min(scaleX, scaleY)));
+        const contentCenterX = bounds.minX + bounds.width / 2;
+        const contentCenterY = bounds.minY + bounds.height / 2;
+        this.pan = {
+            x: width / 2 - contentCenterX * this.currentScale,
+            y: height / 2 - contentCenterY * this.currentScale,
+        };
+        this.applyTransform();
+        this.syncToolbarState();
+    }
+    centerCanvas() {
+        if (!this.svg || !this.nodes.length) {
+            return;
+        }
+        const bounds = this.getNodeBounds();
+        const width = Math.max(this.svg.clientWidth, 1);
+        const height = Math.max(this.svg.clientHeight, 1);
+        const contentCenterX = bounds.minX + bounds.width / 2;
+        const contentCenterY = bounds.minY + bounds.height / 2;
+        this.pan = {
+            x: width / 2 - contentCenterX * this.currentScale,
+            y: height / 2 - contentCenterY * this.currentScale,
+        };
+        this.applyTransform();
+    }
+    toggleTools(toolbar) {
+        this.toolboxVisible = !this.toolboxVisible;
+        this.el.classList.toggle("ce-diagram--tools-hidden", !this.toolboxVisible);
+        const button = toolbar.querySelector('[data-action="toggle-tools"]');
+        button?.classList.toggle("is-active", !this.toolboxVisible);
+        this.updateStatus(this.toolboxVisible ? "Tool palette shown" : "Tool palette hidden");
+    }
+    async toggleFullscreen() {
+        const target = this.el;
+        const button = this.el.querySelector('[data-action="fullscreen"]');
+        if (typeof document === "undefined") {
+            return;
+        }
+        if (document.fullscreenElement === target) {
+            await document.exitFullscreen();
+            button?.classList.remove("is-active");
+            this.setFullscreenState(false);
+            window.setTimeout(() => this.fitToView(), 40);
+            this.updateStatus("Collapsed diagram");
+            return;
+        }
+        if (target.requestFullscreen) {
+            await target.requestFullscreen();
+            button?.classList.add("is-active");
+            this.setFullscreenState(true);
+            window.setTimeout(() => this.fitToView(), 40);
+            this.updateStatus("Expanded diagram");
+        }
+    }
+    attachFullscreenListener() {
+        if (this.fullscreenChangeHandler || typeof document === "undefined") {
+            return;
+        }
+        this.fullscreenChangeHandler = () => {
+            this.setFullscreenState(document.fullscreenElement === this.el);
+        };
+        document.addEventListener("fullscreenchange", this.fullscreenChangeHandler);
+    }
+    setFullscreenState(isFullscreen) {
+        this.el.classList.toggle("is-fullscreen", isFullscreen);
+        const button = this.el.querySelector('[data-action="fullscreen"]');
+        button?.classList.toggle("is-active", isFullscreen);
+        if (isFullscreen) {
+            this.toolboxVisibleBeforeFullscreen = this.toolboxVisible;
+            this.toolboxVisible = true;
+            this.el.classList.remove("ce-diagram--tools-hidden");
+            const toolbar = this.el.querySelector(".ce-diagram__toolbar");
+            toolbar?.querySelector('[data-action="toggle-tools"]')?.classList.remove("is-active");
+            return;
+        }
+        if (this.toolboxVisibleBeforeFullscreen !== undefined) {
+            this.toolboxVisible = this.toolboxVisibleBeforeFullscreen;
+            this.el.classList.toggle("ce-diagram--tools-hidden", !this.toolboxVisible);
+            const toolbar = this.el.querySelector(".ce-diagram__toolbar");
+            toolbar?.querySelector('[data-action="toggle-tools"]')?.classList.toggle("is-active", !this.toolboxVisible);
+            this.toolboxVisibleBeforeFullscreen = undefined;
+        }
+    }
+    getNodeBounds() {
+        const minX = Math.min(...this.nodes.map((node) => node.x));
+        const minY = Math.min(...this.nodes.map((node) => node.y));
+        const maxX = Math.max(...this.nodes.map((node) => node.x + (node.width ?? 140)));
+        const maxY = Math.max(...this.nodes.map((node) => node.y + (node.height ?? 60)));
+        return {
+            minX,
+            minY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    attachCanvasHandlers(canvasWrap) {
+        canvasWrap.addEventListener("dragover", (e) => e.preventDefault());
+        canvasWrap.addEventListener("drop", (e) => this.handleDrop(e));
+    }
+    createSvgCanvas() {
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.classList.add("ce-diagram__canvas");
+        svg.setAttribute("part", "canvas");
+        svg.setAttribute("role", "img");
+        svg.setAttribute("aria-label", "Diagram canvas");
+        svg.setAttribute("tabindex", "0");
+        this.attachSvgHandlers(svg);
+        this.ensureSvgStructure(svg);
+        return svg;
+    }
+    attachSvgHandlers(svg) {
+        svg.addEventListener("wheel", (e) => this.handleWheel(e), { passive: false });
+        svg.addEventListener("pointerdown", (e) => this.startPan(e));
+        svg.addEventListener("pointermove", (e) => this.handlePan(e));
+        svg.addEventListener("pointerup", (e) => {
+            this.finishConnectorDrag(e);
+            this.endPan();
+        });
+        svg.addEventListener("pointerleave", () => {
+            this.connectionDrag = undefined;
+            this.endPan();
+            this.renderLinks();
+        });
+        svg.addEventListener("dblclick", (e) => this.handleInlineEditRequest(e));
+        svg.addEventListener("click", (e) => this.handleCanvasClick(e));
+        svg.addEventListener("keydown", (e) => this.handleKeyDown(e));
+    }
+    ensureSvgStructure(svg) {
+        let defs = svg.querySelector("defs");
+        if (!defs) {
+            defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+            svg.appendChild(defs);
+        }
+        if (!defs.querySelector("#arrowhead")) {
+            const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+            marker.id = "arrowhead";
+            marker.setAttribute("viewBox", "0 0 10 10");
+            marker.setAttribute("refX", "10");
+            marker.setAttribute("refY", "5");
+            marker.setAttribute("markerWidth", "6");
+            marker.setAttribute("markerHeight", "6");
+            marker.setAttribute("orient", "auto-start-reverse");
+            marker.setAttribute("markerUnits", "strokeWidth");
+            const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            arrowPath.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
+            arrowPath.setAttribute("fill", "currentColor");
+            marker.appendChild(arrowPath);
+            defs.appendChild(marker);
+        }
+        const existingLinks = svg.querySelector(".ce-diagram__links");
+        const existingNodes = svg.querySelector(".ce-diagram__nodes");
+        this.linksGroup = existingLinks ?? document.createElementNS("http://www.w3.org/2000/svg", "g");
+        this.linksGroup.classList.add("ce-diagram__links");
+        this.linksGroup.setAttribute("part", "links");
+        this.nodesGroup = existingNodes ?? document.createElementNS("http://www.w3.org/2000/svg", "g");
+        this.nodesGroup.classList.add("ce-diagram__nodes");
+        this.nodesGroup.setAttribute("part", "nodes");
+        if (!existingLinks || !existingNodes) {
+            svg.append(this.linksGroup, this.nodesGroup);
+        }
+    }
+    tryHydrate() {
+        if (!this.el.classList.contains("ce-diagram")) {
+            return false;
+        }
+        this.el.classList.toggle("ce-diagram--dark", this.options.theme === "dark");
+        this.el.setAttribute("data-ce-component", "diagram");
+        this.el.setAttribute("part", "base");
+        const layout = this.el.querySelector(".ce-diagram__layout");
+        if (!layout) {
+            return false;
+        }
+        layout.setAttribute("part", "layout");
+        let toolbox = layout.querySelector(".ce-diagram__toolbox");
+        const replacement = this.buildToolbox();
+        if (!toolbox) {
+            layout.prepend(replacement);
+            toolbox = replacement;
+        }
+        else {
+            toolbox.replaceWith(replacement);
+            toolbox = replacement;
+        }
+        this.toolbox = toolbox;
+        let canvasWrap = layout.querySelector(".ce-diagram__canvas-wrap");
+        if (!canvasWrap) {
+            canvasWrap = document.createElement("div");
+            canvasWrap.className = "ce-diagram__canvas-wrap";
+            layout.appendChild(canvasWrap);
+        }
+        canvasWrap.setAttribute("part", "canvas-wrap");
+        this.attachCanvasHandlers(canvasWrap);
+        this.canvasWrap = canvasWrap;
+        let svg = canvasWrap.querySelector(".ce-diagram__canvas");
+        if (!svg) {
+            svg = this.createSvgCanvas();
+            canvasWrap.appendChild(svg);
+        }
+        else {
+            svg.classList.add("ce-diagram__canvas");
+            svg.setAttribute("part", "canvas");
+            svg.setAttribute("role", "img");
+            svg.setAttribute("aria-label", "Diagram canvas");
+            svg.setAttribute("tabindex", "0");
+            this.attachSvgHandlers(svg);
+            this.ensureSvgStructure(svg);
+        }
+        this.svg = svg;
+        const existingToolbar = canvasWrap.querySelector(".ce-diagram__toolbar");
+        if (existingToolbar) {
+            existingToolbar.remove();
+        }
+        let toolbar = this.buildToolbar();
+        canvasWrap.appendChild(toolbar);
+        if (!toolbar.dataset.mode) {
+            toolbar.dataset.mode = "default";
+        }
+        toolbar.setAttribute("part", "toolbar");
+        toolbar.querySelectorAll("button").forEach((button) => {
+            const action = button.dataset.action ? ` ${button.dataset.action}` : "";
+            button.setAttribute("part", `toolbar-button${action}`);
+        });
+        toolbar.querySelectorAll(".ce-diagram__label-input").forEach((node) => node.setAttribute("part", "label-input"));
+        toolbar.querySelectorAll(".ce-diagram__status").forEach((node) => node.setAttribute("part", "status"));
+        this.attachToolbarHandlers(toolbar);
+        this.renderLinks();
+        this.renderNodes();
+        this.applyTransform();
+        return true;
+    }
+    renderNodes() {
+        if (!this.nodesGroup)
+            return;
+        this.nodesGroup.innerHTML = "";
+        const palette = this.getNodePalette();
+        this.nodes.forEach((node) => {
+            const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            g.classList.add("ce-diagram__node");
+            g.setAttribute("part", "node");
+            g.dataset.id = node.id;
+            if ((this.connectMode && this.connectSourceId === node.id) || this.connectionDrag?.sourceId === node.id) {
+                g.classList.add("is-connecting");
+            }
+            if (this.selectedNodeIds.has(node.id)) {
+                g.classList.add("is-selected");
+            }
+            g.setAttribute("transform", `translate(${node.x}, ${node.y})`);
+            const width = node.width ?? 140;
+            const height = node.height ?? 60;
+            const radius = node.type === "terminator" || node.type === "capsule" ? Math.min(width, height) / 2 : 10;
+            const decorations = [];
+            let shape;
+            switch (node.type) {
+                case "circle": {
+                    const circle = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+                    const radius = Math.min(width, height) / 2;
+                    circle.setAttribute("cx", String(width / 2));
+                    circle.setAttribute("cy", String(height / 2));
+                    circle.setAttribute("rx", String(radius));
+                    circle.setAttribute("ry", String(radius));
+                    shape = circle;
+                    break;
+                }
+                case "oval":
+                case "ellipse": {
+                    const ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+                    ellipse.setAttribute("cx", String(width / 2));
+                    ellipse.setAttribute("cy", String(height / 2));
+                    ellipse.setAttribute("rx", String(width / 2));
+                    ellipse.setAttribute("ry", String(height / 2));
+                    shape = ellipse;
+                    break;
+                }
+                case "triangle": {
+                    const tri = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    tri.setAttribute("points", `0,${height} ${width / 2},0 ${width},${height}`);
+                    shape = tri;
+                    break;
+                }
+                case "hexagon": {
+                    const hx = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    const hxPoints = [
+                        [width * 0.25, 0],
+                        [width * 0.75, 0],
+                        [width, height / 2],
+                        [width * 0.75, height],
+                        [width * 0.25, height],
+                        [0, height / 2],
+                    ]
+                        .map((p) => p.join(","))
+                        .join(" ");
+                    hx.setAttribute("points", hxPoints);
+                    shape = hx;
+                    break;
+                }
+                case "parallelogram": {
+                    const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    const inset = Math.max(16, width * 0.14);
+                    polygon.setAttribute("points", `${inset},0 ${width},0 ${width - inset},${height} 0,${height}`);
+                    shape = polygon;
+                    break;
+                }
+                case "preparation": {
+                    const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    const side = Math.max(16, width * 0.12);
+                    polygon.setAttribute("points", `${side},0 ${width - side},0 ${width},${height / 2} ${width - side},${height} ${side},${height} 0,${height / 2}`);
+                    shape = polygon;
+                    break;
+                }
+                case "manual-input": {
+                    const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    const inset = Math.max(18, width * 0.18);
+                    polygon.setAttribute("points", `0,${height} 0,${inset} ${width},0 ${width},${height}`);
+                    shape = polygon;
+                    break;
+                }
+                case "document": {
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    const wave = Math.max(10, height * 0.16);
+                    path.setAttribute("d", `M 0 0 H ${width} V ${height - wave} C ${width * 0.8} ${height + wave * 0.15}, ${width * 0.45} ${height - wave * 1.4}, ${width * 0.18} ${height - wave * 0.2} C ${width * 0.1} ${height}, ${width * 0.05} ${height}, 0 ${height - wave * 0.55} Z`);
+                    shape = path;
+                    break;
+                }
+                case "delay": {
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    const arc = Math.min(height / 2, width * 0.32);
+                    const bodyWidth = Math.max(width - arc, width * 0.62);
+                    path.setAttribute("d", `M 0 0 H ${bodyWidth} A ${arc} ${arc} 0 0 1 ${bodyWidth} ${height} H 0 Z`);
+                    shape = path;
+                    break;
+                }
+                case "display": {
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    const leftInset = Math.max(18, width * 0.12);
+                    const rightArc = Math.max(16, width * 0.16);
+                    path.setAttribute("d", `M ${leftInset} 0 H ${width - rightArc} Q ${width} ${height / 2} ${width - rightArc} ${height} H ${leftInset} Q 0 ${height / 2} ${leftInset} 0 Z`);
+                    shape = path;
+                    break;
+                }
+                case "diamond":
+                case "decision": {
+                    const diamond = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    diamond.setAttribute("points", `${width / 2},0 ${width},${height / 2} ${width / 2},${height} 0,${height / 2}`);
+                    shape = diamond;
+                    break;
+                }
+                case "or": {
+                    const circle = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+                    const radius = Math.min(width, height) / 2;
+                    circle.setAttribute("cx", String(width / 2));
+                    circle.setAttribute("cy", String(height / 2));
+                    circle.setAttribute("rx", String(radius));
+                    circle.setAttribute("ry", String(radius));
+                    const vertical = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    vertical.setAttribute("d", `M ${width / 2} ${height * 0.23} V ${height * 0.77}`);
+                    const horizontal = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    horizontal.setAttribute("d", `M ${width * 0.23} ${height / 2} H ${width * 0.77}`);
+                    decorations.push(vertical, horizontal);
+                    shape = circle;
+                    break;
+                }
+                case "database-cylinder": {
+                    const body = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    const ellipseHeight = Math.max(14, height * 0.18);
+                    body.setAttribute("d", `M 0 ${ellipseHeight / 2} C 0 0, ${width} 0, ${width} ${ellipseHeight / 2} V ${height - ellipseHeight / 2} C ${width} ${height}, 0 ${height}, 0 ${height - ellipseHeight / 2} Z`);
+                    const topEllipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+                    topEllipse.setAttribute("cx", String(width / 2));
+                    topEllipse.setAttribute("cy", String(ellipseHeight / 2));
+                    topEllipse.setAttribute("rx", String(width / 2));
+                    topEllipse.setAttribute("ry", String(ellipseHeight / 2));
+                    const bottomArc = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    bottomArc.setAttribute("d", `M 0 ${height - ellipseHeight / 2} C 0 ${height}, ${width} ${height}, ${width} ${height - ellipseHeight / 2}`);
+                    decorations.push(topEllipse, bottomArc);
+                    shape = body;
+                    break;
+                }
+                case "stored-data": {
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    const leftCurve = Math.max(16, width * 0.12);
+                    const rightInset = Math.max(10, width * 0.08);
+                    path.setAttribute("d", `M ${leftCurve} 0 H ${width - rightInset} Q ${width} ${height / 2} ${width - rightInset} ${height} H ${leftCurve} Q 0 ${height / 2} ${leftCurve} 0 Z`);
+                    const inner = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    inner.setAttribute("d", `M ${leftCurve * 1.5} 0 Q ${leftCurve * 0.5} ${height / 2} ${leftCurve * 1.5} ${height}`);
+                    decorations.push(inner);
+                    shape = path;
+                    break;
+                }
+                case "off-page-connector": {
+                    const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    const neck = Math.max(18, height * 0.26);
+                    polygon.setAttribute("points", `0,0 ${width},0 ${width},${height - neck} ${width / 2},${height} 0,${height - neck}`);
+                    shape = polygon;
+                    break;
+                }
+                case "merge": {
+                    const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    polygon.setAttribute("points", `0,0 ${width},${height / 2} 0,${height}`);
+                    shape = polygon;
+                    break;
+                }
+                case "collate": {
+                    const left = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    left.setAttribute("points", `0,0 ${width / 2},${height / 2} 0,${height}`);
+                    const right = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                    right.setAttribute("points", `${width},0 ${width / 2},${height / 2} ${width},${height}`);
+                    decorations.push(right);
+                    shape = left;
+                    break;
+                }
+                default: {
+                    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                    rect.setAttribute("rx", String(radius));
+                    rect.setAttribute("ry", String(radius));
+                    rect.setAttribute("width", String(width));
+                    rect.setAttribute("height", String(height));
+                    shape = rect;
+                }
+            }
+            shape.classList.add("ce-diagram__node-body");
+            shape.setAttribute("part", "node-body");
+            shape.setAttribute("fill", palette.fill);
+            shape.setAttribute("stroke", palette.stroke);
+            shape.setAttribute("stroke-width", "1.5");
+            decorations.forEach((decoration) => {
+                decoration.classList.add("ce-diagram__node-decoration");
+                const fillTag = decoration.tagName;
+                decoration.setAttribute("fill", fillTag === "ellipse" || fillTag === "polygon" ? palette.fill : "none");
+                decoration.setAttribute("stroke", palette.stroke);
+                decoration.setAttribute("stroke-width", "1.5");
+            });
+            const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            label.classList.add("ce-diagram__node-label");
+            label.setAttribute("part", "node-label");
+            label.setAttribute("x", String((node.width ?? width) / 2));
+            label.setAttribute("y", String((node.height ?? height) / 2 + 5));
+            label.setAttribute("text-anchor", "middle");
+            label.textContent = node.label;
+            label.setAttribute("fill", palette.label);
+            if (node.icon) {
+                if (node.icon.endsWith(".svg")) {
+                    const icon = document.createElementNS("http://www.w3.org/2000/svg", "image");
+                    icon.classList.add("ce-diagram__node-icon");
+                    icon.setAttribute("part", "node-icon");
+                    icon.setAttribute("href", this.getIconscoutIconPath(node.icon));
+                    icon.setAttribute("x", String((node.width ?? width) / 2 - 11));
+                    icon.setAttribute("y", String((node.height ?? height) / 2 - 29));
+                    icon.setAttribute("width", "22");
+                    icon.setAttribute("height", "22");
+                    g.append(shape, ...decorations, icon, label);
+                }
+                else {
+                    const icon = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                    icon.classList.add("ce-diagram__node-icon");
+                    icon.setAttribute("part", "node-icon");
+                    icon.setAttribute("x", String((node.width ?? width) / 2));
+                    icon.setAttribute("y", String((node.height ?? height) / 2 - 12));
+                    icon.setAttribute("text-anchor", "middle");
+                    icon.textContent = node.icon;
+                    icon.setAttribute("fill", palette.label);
+                    g.append(shape, ...decorations, icon, label);
+                }
+            }
+            else {
+                g.append(shape, ...decorations, label);
+            }
+            g.addEventListener("click", (e) => {
+                e.stopPropagation();
+                if (this.inlineEditor)
+                    return;
+                if (this.editMode) {
+                    this.startInlineEdit(node);
+                    return;
+                }
+                this.options.onNodeSelect?.(node);
+                this.handleConnectClick(node);
+                if (e.shiftKey) {
+                    if (this.selectedNodeIds.has(node.id)) {
+                        this.selectedNodeIds.delete(node.id);
+                    }
+                    else {
+                        this.selectedNodeIds.add(node.id);
+                    }
+                    this.selectedNodeId = this.selectedNodeIds.has(node.id) ? node.id : Array.from(this.selectedNodeIds).at(-1);
+                }
+                else {
+                    this.selectedNodeIds = new Set([node.id]);
+                    this.selectedNodeId = node.id;
+                }
+                this.selectedLinkId = undefined;
+                this.syncLabelInput();
+                this.renderNodes();
+            });
+            g.addEventListener("dblclick", (e) => {
+                e.stopPropagation();
+                if (this.nodeClickTimer) {
+                    window.clearTimeout(this.nodeClickTimer);
+                    this.nodeClickTimer = undefined;
+                }
+                this.startInlineEdit(node);
+            });
+            g.addEventListener("pointerdown", (e) => this.startNodeDrag(e, node));
+            this.nodesGroup.appendChild(g);
+            if (this.selectedNodeIds.has(node.id)) {
+                this.renderHandles(g, node);
+            }
+            this.renderConnectorHandles(g, node);
+        });
+        this.syncToolbarState();
+        this.syncContextPanel();
+    }
+    renderHandles(group, node) {
+        const width = node.width ?? 140;
+        const height = node.height ?? 60;
+        const handlePositions = [
+            { corner: "nw", x: 0, y: 0 },
+            { corner: "ne", x: width, y: 0 },
+            { corner: "sw", x: 0, y: height },
+            { corner: "se", x: width, y: height },
+        ];
+        handlePositions.forEach((h) => {
+            const handle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            handle.classList.add("ce-diagram__handle");
+            handle.setAttribute("part", "handle");
+            handle.setAttribute("r", "6");
+            handle.setAttribute("cx", String(h.x));
+            handle.setAttribute("cy", String(h.y));
+            handle.addEventListener("pointerdown", (e) => this.startResize(e, node, h.corner));
+            group.appendChild(handle);
+        });
+    }
+    renderConnectorHandles(group, node) {
+        const sides = ["top", "right", "bottom", "left"];
+        sides.forEach((side) => {
+            const point = this.getConnectorPortPosition(node, side);
+            const port = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            port.classList.add("ce-diagram__connector-handle");
+            port.setAttribute("part", "connector-handle");
+            port.setAttribute("r", "7");
+            port.setAttribute("cx", String(point.x - node.x));
+            port.setAttribute("cy", String(point.y - node.y));
+            port.dataset.side = side;
+            port.addEventListener("pointerdown", (event) => this.startConnectorDrag(event, node, side));
+            group.appendChild(port);
+        });
+    }
+    renderLinks() {
+        if (!this.linksGroup)
+            return;
+        this.linksGroup.innerHTML = "";
+        this.links.forEach((link) => {
+            const src = this.nodes.find((n) => n.id === link.source);
+            const tgt = this.nodes.find((n) => n.id === link.target);
+            if (!src || !tgt)
+                return;
+            const start = this.getEdgePoint(src, tgt);
+            const end = this.getEdgePoint(tgt, src);
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.classList.add("ce-diagram__link");
+            if (this.selectedLinkId === link.id) {
+                path.classList.add("is-selected");
+            }
+            path.setAttribute("part", "link");
+            path.setAttribute("d", this.buildLinkPath(link, start, end));
+            path.setAttribute("fill", "none");
+            path.setAttribute("stroke", "rgba(37, 99, 235, 0.9)");
+            path.setAttribute("stroke-width", "2.5");
+            path.setAttribute("marker-end", "url(#arrowhead)");
+            path.addEventListener("click", (e) => {
+                e.stopPropagation();
+                this.selectedLinkId = link.id;
+                this.selectedNodeIds.clear();
+                this.selectedNodeId = undefined;
+                this.syncLabelInput();
+                this.options.onLinkSelect?.({
+                    id: link.id,
+                    source: link.source,
+                    target: link.target,
+                });
+                this.renderLinks();
+                this.renderNodes();
+            });
+            path.addEventListener("dblclick", (e) => {
+                e.stopPropagation();
+                this.editLinkLabel(link);
+            });
+            this.linksGroup.appendChild(path);
+            if (this.selectedLinkId === link.id) {
+                const bendPoint = this.getLinkBendPoint(link, start, end);
+                const handle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                handle.classList.add("ce-diagram__bend-handle");
+                handle.setAttribute("part", "bend-handle");
+                handle.setAttribute("r", "7");
+                handle.setAttribute("cx", String(bendPoint.x));
+                handle.setAttribute("cy", String(bendPoint.y));
+                handle.addEventListener("pointerdown", (event) => this.startBendDrag(event, link.id));
+                this.linksGroup.appendChild(handle);
+            }
+            if (link.label) {
+                const bendPoint = this.getLinkBendPoint(link, start, end);
+                const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                label.classList.add("ce-diagram__link-label");
+                label.setAttribute("part", "link-label");
+                label.setAttribute("x", String(bendPoint.x));
+                label.setAttribute("y", String(bendPoint.y - 12));
+                label.setAttribute("text-anchor", "middle");
+                label.textContent = link.label;
+                this.linksGroup.appendChild(label);
+            }
+        });
+        if (this.connectionDrag) {
+            const preview = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            preview.classList.add("ce-diagram__link", "ce-diagram__link--preview");
+            preview.setAttribute("part", "link");
+            preview.setAttribute("fill", "none");
+            preview.setAttribute("stroke", "rgba(37, 99, 235, 0.65)");
+            preview.setAttribute("stroke-width", "2");
+            preview.setAttribute("stroke-dasharray", "8 6");
+            preview.setAttribute("d", this.buildConnectorPath(this.connectionDrag.start, this.connectionDrag.current));
+            this.linksGroup.appendChild(preview);
+        }
+        if (this.marqueeSelection) {
+            const { start, current } = this.marqueeSelection;
+            const marquee = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            marquee.classList.add("ce-diagram__marquee");
+            marquee.setAttribute("part", "marquee");
+            marquee.setAttribute("x", String(Math.min(start.x, current.x)));
+            marquee.setAttribute("y", String(Math.min(start.y, current.y)));
+            marquee.setAttribute("width", String(Math.abs(current.x - start.x)));
+            marquee.setAttribute("height", String(Math.abs(current.y - start.y)));
+            this.linksGroup.appendChild(marquee);
+        }
+        this.syncContextPanel();
+    }
+    buildLinkPath(link, start, end) {
+        const bendPoint = this.getLinkBendPoint(link, start, end);
+        if (start.x === end.x || start.y === end.y) {
+            return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+        }
+        return `M ${start.x} ${start.y} L ${bendPoint.x} ${start.y} L ${bendPoint.x} ${bendPoint.y} L ${end.x} ${bendPoint.y} L ${end.x} ${end.y}`;
+    }
+    getLinkBendPoint(link, start, end) {
+        return link.points?.[0] ?? { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+    }
+    getEdgePoint(from, to) {
+        const w = from.width ?? 140;
+        const h = from.height ?? 60;
+        const fromCenter = { x: (from.x ?? 0) + w / 2, y: (from.y ?? 0) + h / 2 };
+        const toCenter = { x: (to.x ?? 0) + (to.width ?? 140) / 2, y: (to.y ?? 0) + (to.height ?? 60) / 2 };
+        const dx = toCenter.x - fromCenter.x;
+        const dy = toCenter.y - fromCenter.y;
+        if (Math.abs(dx) > Math.abs(dy)) {
+            const x = dx > 0 ? (from.x ?? 0) + w : from.x ?? 0;
+            const y = fromCenter.y;
+            return { x, y };
+        }
+        const y = dy > 0 ? (from.y ?? 0) + h : from.y ?? 0;
+        const x = fromCenter.x;
+        return { x, y };
+    }
+    getConnectorPortPosition(node, side) {
+        const width = node.width ?? 140;
+        const height = node.height ?? 60;
+        switch (side) {
+            case "top":
+                return { x: node.x + width / 2, y: node.y };
+            case "right":
+                return { x: node.x + width, y: node.y + height / 2 };
+            case "bottom":
+                return { x: node.x + width / 2, y: node.y + height };
+            case "left":
+                return { x: node.x, y: node.y + height / 2 };
+        }
+    }
+    buildConnectorPath(start, end) {
+        if (start.x === end.x || start.y === end.y) {
+            return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+        }
+        const midX = start.x + (end.x - start.x) / 2;
+        return `M ${start.x} ${start.y} L ${midX} ${start.y} L ${midX} ${end.y} L ${end.x} ${end.y}`;
+    }
+    updateStatus(text) {
+        if (this.statusEl) {
+            this.statusEl.textContent = text;
+        }
+    }
+    handleWheel(event) {
+        event.preventDefault();
+        const delta = event.deltaY < 0 ? 0.1 : -0.1;
+        this.zoomBy(delta, { center: { x: event.clientX, y: event.clientY } });
+    }
+    zoomBy(delta, opts) {
+        const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, this.currentScale + delta));
+        this.currentScale = next;
+        this.applyTransform(opts?.center);
+    }
+    resetView() {
+        this.currentScale = 1;
+        this.pan = { x: 0, y: 0 };
+        this.applyTransform();
+    }
+    startPan(event) {
+        const target = event.target;
+        if (target?.closest?.(".ce-diagram__node, .ce-diagram__handle, .ce-diagram__connector-handle, .ce-diagram__link")) {
+            return;
+        }
+        if (event.shiftKey && this.svg) {
+            const rect = this.svg.getBoundingClientRect();
+            const point = {
+                x: (event.clientX - rect.left - this.pan.x) / this.currentScale,
+                y: (event.clientY - rect.top - this.pan.y) / this.currentScale,
+            };
+            this.marqueeSelection = { start: point, current: point };
+            this.renderLinks();
+            return;
+        }
+        this.isPanning = true;
+        this.panStart = { x: event.clientX - this.pan.x, y: event.clientY - this.pan.y };
+    }
+    handlePan(event) {
+        this.handleConnectorDrag(event);
+        this.handleBendDrag(event);
+        if (this.marqueeSelection) {
+            if (!this.svg)
+                return;
+            const rect = this.svg.getBoundingClientRect();
+            this.marqueeSelection.current = {
+                x: (event.clientX - rect.left - this.pan.x) / this.currentScale,
+                y: (event.clientY - rect.top - this.pan.y) / this.currentScale,
+            };
+            this.applyMarqueeSelection();
+            this.renderLinks();
+            this.renderNodes();
+            return;
+        }
+        if (!this.isPanning || !this.panStart)
+            return;
+        this.pan = {
+            x: event.clientX - this.panStart.x,
+            y: event.clientY - this.panStart.y,
+        };
+        this.applyTransform();
+    }
+    endPan() {
+        this.isPanning = false;
+        this.panStart = undefined;
+        this.bendDrag = undefined;
+        if (this.marqueeSelection) {
+            this.marqueeSelection = undefined;
+            this.renderLinks();
+            this.renderNodes();
+        }
+    }
+    applyTransform(center) {
+        if (!this.svg)
+            return;
+        const originX = center?.x ?? this.svg.clientWidth / 2;
+        const originY = center?.y ?? this.svg.clientHeight / 2;
+        const translate = `translate(${this.pan.x}px, ${this.pan.y}px)`;
+        const scale = `scale(${this.currentScale})`;
+        this.svg.style.transform = `${translate} ${scale}`;
+        this.svg.style.transformOrigin = `${originX}px ${originY}px`;
+    }
+    startNodeDrag(event, node) {
+        event.stopPropagation();
+        if (this.connectMode) {
+            // skip dragging while in connect mode to allow click selection
+            return;
+        }
+        if (event.detail > 1 || this.inlineEditor) {
+            return;
+        }
+        if (!this.svg)
+            return;
+        if (!this.nodesGroup?.contains(event.currentTarget))
+            return;
+        const shouldRefreshSelection = this.selectedNodeId !== node.id;
+        this.selectedNodeId = node.id;
+        this.selectedNodeIds = new Set([node.id]);
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+        const svgRect = this.svg.getBoundingClientRect();
+        const offsetX = (event.clientX - svgRect.left - this.pan.x) / this.currentScale - node.x;
+        const offsetY = (event.clientY - svgRect.top - this.pan.y) / this.currentScale - node.y;
+        this.dragCandidate = { id: node.id, offsetX, offsetY, startX: event.clientX, startY: event.clientY };
+        const move = (e) => this.handleNodeDrag(e);
+        const up = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            this.dragCandidate = undefined;
+            this.draggingNode = undefined;
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        if (shouldRefreshSelection) {
+            this.syncToolbarState();
+            this.syncContextPanel();
+        }
+    }
+    handleNodeDrag(event) {
+        if (!this.svg)
+            return;
+        if (!this.draggingNode && this.dragCandidate) {
+            const dx = event.clientX - this.dragCandidate.startX;
+            const dy = event.clientY - this.dragCandidate.startY;
+            if (Math.hypot(dx, dy) > 3) {
+                this.pushHistorySnapshot();
+                const selectedIds = this.selectedNodeIds.has(this.dragCandidate.id)
+                    ? Array.from(this.selectedNodeIds)
+                    : [this.dragCandidate.id];
+                this.draggingNode = {
+                    id: this.dragCandidate.id,
+                    offsetX: this.dragCandidate.offsetX,
+                    offsetY: this.dragCandidate.offsetY,
+                    originX: this.nodes.find((n) => n.id === this.dragCandidate.id)?.x ?? 0,
+                    originY: this.nodes.find((n) => n.id === this.dragCandidate.id)?.y ?? 0,
+                    selectedOrigins: selectedIds
+                        .map((id) => this.nodes.find((n) => n.id === id))
+                        .filter((node) => Boolean(node))
+                        .map((node) => ({ id: node.id, x: node.x, y: node.y })),
+                };
+            }
+            else {
+                return;
+            }
+        }
+        if (!this.draggingNode)
+            return;
+        const node = this.nodes.find((n) => n.id === this.draggingNode.id);
+        if (!node)
+            return;
+        const svgRect = this.svg.getBoundingClientRect();
+        const x = (event.clientX - svgRect.left - this.pan.x) / this.currentScale - this.draggingNode.offsetX;
+        const y = (event.clientY - svgRect.top - this.pan.y) / this.currentScale - this.draggingNode.offsetY;
+        const dx = this.snap(x) - this.draggingNode.originX;
+        const dy = this.snap(y) - this.draggingNode.originY;
+        this.draggingNode.selectedOrigins.forEach((origin) => {
+            const target = this.nodes.find((entry) => entry.id === origin.id);
+            if (!target)
+                return;
+            target.x = this.snap(origin.x + dx);
+            target.y = this.snap(origin.y + dy);
+        });
+        this.renderLinks();
+        this.renderNodes();
+    }
+    startBendDrag(event, linkId) {
+        event.stopPropagation();
+        this.pushHistorySnapshot();
+        this.bendDrag = { linkId };
+    }
+    handleBendDrag(event) {
+        if (!this.bendDrag || !this.svg)
+            return;
+        const link = this.links.find((entry) => entry.id === this.bendDrag?.linkId);
+        if (!link)
+            return;
+        const rect = this.svg.getBoundingClientRect();
+        link.points = [
+            {
+                x: (event.clientX - rect.left - this.pan.x) / this.currentScale,
+                y: (event.clientY - rect.top - this.pan.y) / this.currentScale,
+            },
+        ];
+        this.renderLinks();
+    }
+    startResize(event, node, corner) {
+        event.stopPropagation();
+        this.pushHistorySnapshot();
+        this.resizing = { id: node.id, corner, origin: { x: node.x, y: node.y } };
+        const move = (e) => this.handleResize(e);
+        const up = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            this.resizing = undefined;
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+    }
+    startConnectorDrag(event, node, side) {
+        event.stopPropagation();
+        if (!this.svg) {
+            return;
+        }
+        this.selectedNodeId = node.id;
+        this.connectMode = true;
+        this.connectSourceId = node.id;
+        const start = this.getConnectorPortPosition(node, side);
+        this.connectionDrag = { sourceId: node.id, side, start, current: start };
+        this.detachConnectorDragListeners();
+        this.connectorDragMoveHandler = (moveEvent) => this.handleConnectorDrag(moveEvent);
+        this.connectorDragUpHandler = (upEvent) => this.finishConnectorDrag(upEvent);
+        window.addEventListener("pointermove", this.connectorDragMoveHandler);
+        window.addEventListener("pointerup", this.connectorDragUpHandler);
+        const toolbar = this.el.querySelector(".ce-diagram__toolbar");
+        toolbar?.querySelector('[data-action="connect"]')?.classList.add("is-active");
+        if (toolbar) {
+            toolbar.dataset.mode = "connect";
+        }
+        this.updateStatus("Drag to another shape to create a connector");
+        this.renderNodes();
+        this.renderLinks();
+    }
+    handleConnectorDrag(event) {
+        if (!this.connectionDrag || !this.svg) {
+            return;
+        }
+        const rect = this.svg.getBoundingClientRect();
+        this.connectionDrag.current = {
+            x: (event.clientX - rect.left - this.pan.x) / this.currentScale,
+            y: (event.clientY - rect.top - this.pan.y) / this.currentScale,
+        };
+        this.renderLinks();
+    }
+    finishConnectorDrag(event) {
+        if (!this.connectionDrag) {
+            return;
+        }
+        const target = event.target;
+        const targetNodeEl = target?.closest?.(".ce-diagram__node");
+        const sourceId = this.connectionDrag.sourceId;
+        this.connectionDrag = undefined;
+        this.detachConnectorDragListeners();
+        if (!targetNodeEl?.dataset.id || targetNodeEl.dataset.id === sourceId) {
+            this.renderLinks();
+            this.renderNodes();
+            return;
+        }
+        this.createLink(sourceId, targetNodeEl.dataset.id);
+    }
+    handleResize(event) {
+        if (!this.resizing || !this.svg)
+            return;
+        const node = this.nodes.find((n) => n.id === this.resizing.id);
+        if (!node)
+            return;
+        const rect = this.svg.getBoundingClientRect();
+        const localX = (event.clientX - rect.left - this.pan.x) / this.currentScale;
+        const localY = (event.clientY - rect.top - this.pan.y) / this.currentScale;
+        const minSize = 40;
+        switch (this.resizing.corner) {
+            case "nw": {
+                const newWidth = Math.max(minSize, (node.width ?? 140) + (node.x - localX));
+                const newHeight = Math.max(minSize, (node.height ?? 60) + (node.y - localY));
+                node.x = localX;
+                node.y = localY;
+                node.width = newWidth;
+                node.height = newHeight;
+                break;
+            }
+            case "ne": {
+                const newWidth = Math.max(minSize, localX - node.x);
+                const newHeight = Math.max(minSize, (node.height ?? 60) + (node.y - localY));
+                node.y = localY;
+                node.width = newWidth;
+                node.height = newHeight;
+                break;
+            }
+            case "sw": {
+                const newWidth = Math.max(minSize, (node.width ?? 140) + (node.x - localX));
+                const newHeight = Math.max(minSize, localY - node.y);
+                node.x = localX;
+                node.width = newWidth;
+                node.height = newHeight;
+                break;
+            }
+            case "se": {
+                node.width = Math.max(minSize, this.snap(localX - node.x));
+                node.height = Math.max(minSize, this.snap(localY - node.y));
+                break;
+            }
+        }
+        this.renderLinks();
+        this.renderNodes();
+    }
+    handleConnectClick(node) {
+        if (!this.connectMode)
+            return;
+        if (!this.connectSourceId) {
+            this.connectSourceId = node.id;
+            this.selectedNodeId = node.id;
+            this.renderNodes();
+            this.updateStatus("Now click a target node to finish the connector");
+            return;
+        }
+        if (this.connectSourceId === node.id)
+            return;
+        this.createLink(this.connectSourceId, node.id);
+    }
+    // Drop new nodes from toolbox
+    handleDrop(event) {
+        event.preventDefault();
+        if (!this.svg)
+            return;
+        const data = event.dataTransfer?.getData("application/json") || event.dataTransfer?.getData("text/plain");
+        if (!data)
+            return;
+        let tool;
+        try {
+            tool = JSON.parse(data);
+        }
+        catch {
+            return;
+        }
+        const rect = this.svg.getBoundingClientRect();
+        const x = (event.clientX - rect.left - this.pan.x) / this.currentScale - (tool.width ?? 140) / 2;
+        const y = (event.clientY - rect.top - this.pan.y) / this.currentScale - (tool.height ?? 60) / 2;
+        const id = `node-${Date.now().toString(36)}`;
+        this.pushHistorySnapshot();
+        this.nodes.push({
+            id,
+            label: tool.label,
+            x: this.snap(x),
+            y: this.snap(y),
+            type: tool.type,
+            icon: tool.icon,
+            width: tool.width ?? 140,
+            height: tool.height ?? 60,
+        });
+        this.selectedNodeId = id;
+        this.selectedNodeIds = new Set([id]);
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+        this.updateStatus(`Added ${tool.label}. Double-click it to rename.`);
+        if (this.editMode) {
+            const newNode = this.nodes.find((n) => n.id === id);
+            if (newNode) {
+                this.startInlineEdit(newNode);
+            }
+        }
+        this.renderLinks();
+        this.renderNodes();
+    }
+    exportJSON() {
+        const payload = { nodes: this.nodes, links: this.links };
+        const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "diagram.json";
+        a.click();
+        URL.revokeObjectURL(url);
+        this.updateStatus("Exported diagram.json");
+    }
+    exportSVG() {
+        const exportable = this.getExportSvg();
+        if (!exportable)
+            return;
+        const blob = new Blob([exportable.xml], { type: "image/svg+xml;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "diagram.svg";
+        a.click();
+        URL.revokeObjectURL(url);
+        this.updateStatus("Exported diagram.svg");
+    }
+    snap(value, grid = 10) {
+        return Math.round(value / grid) * grid;
+    }
+    editLabel(node) {
+        const next = window.prompt("Edit label", node.label);
+        if (next && next.trim()) {
+            node.label = next.trim();
+            this.renderNodes();
+        }
+    }
+    handleInlineEditRequest(event) {
+        if (this.connectMode || this.inlineEditor)
+            return;
+        if (this.nodeClickTimer) {
+            window.clearTimeout(this.nodeClickTimer);
+            this.nodeClickTimer = undefined;
+        }
+        const target = event.target;
+        const nodeEl = target?.closest(".ce-diagram__node");
+        if (!nodeEl)
+            return;
+        const id = nodeEl.dataset.id;
+        if (!id)
+            return;
+        const node = this.nodes.find((n) => n.id === id);
+        if (!node)
+            return;
+        this.startInlineEdit(node);
+    }
+    startInlineEdit(node) {
+        if (this.connectMode || !this.svg)
+            return;
+        if (this.inlineEditor) {
+            this.inlineEditor.remove();
+            this.inlineEditor = undefined;
+        }
+        this.selectedNodeId = node.id;
+        // Use rendered bounding box for accurate positioning
+        const nodeEl = this.nodesGroup?.querySelector(`.ce-diagram__node[data-id="${node.id}"]`);
+        const bbox = nodeEl?.getBoundingClientRect();
+        if (!bbox || !bbox.width || !bbox.height) {
+            this.editLabel(node);
+            return;
+        }
+        const overlay = document.createElement("div");
+        overlay.className = "ce-diagram__inline-overlay";
+        overlay.style.position = "fixed";
+        overlay.style.left = `${bbox.left}px`;
+        overlay.style.top = `${bbox.top}px`;
+        overlay.style.width = `${bbox.width}px`;
+        overlay.style.height = `${bbox.height}px`;
+        overlay.style.zIndex = "5";
+        const input = document.createElement("input");
+        input.type = "text";
+        input.value = node.label;
+        input.className = "ce-diagram__inline-input";
+        input.autocomplete = "off";
+        input.spellcheck = false;
+        overlay.appendChild(input);
+        const fullscreenRoot = document.fullscreenElement;
+        const overlayHost = fullscreenRoot instanceof HTMLElement && fullscreenRoot.contains(this.el)
+            ? fullscreenRoot
+            : document.body;
+        overlayHost.appendChild(overlay);
+        this.inlineEditor = overlay;
+        const cleanup = () => {
+            overlay.remove();
+            this.inlineEditor = undefined;
+        };
+        const commit = () => {
+            const val = input.value.trim();
+            if (val) {
+                if (node.label !== val) {
+                    this.pushHistorySnapshot();
+                }
+                node.label = val;
+                this.renderNodes();
+                this.syncLabelInput();
+            }
+            cleanup();
+        };
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+            }
+            if (e.key === "Escape") {
+                e.preventDefault();
+                cleanup();
+            }
+        });
+        input.addEventListener("blur", commit);
+        overlay.addEventListener("pointerdown", (e) => e.stopPropagation());
+        overlay.addEventListener("dblclick", (e) => e.stopPropagation());
+        input.focus();
+        input.select();
+    }
+    exportRaster(type, filename) {
+        const exportable = this.getExportSvg();
+        if (!exportable)
+            return;
+        const { xml, width, height } = exportable;
+        const svg64 = btoa(unescape(encodeURIComponent(xml)));
+        const image64 = "data:image/svg+xml;base64," + svg64;
+        const img = new Image();
+        img.onload = () => {
+            const canvas = document.createElement("canvas");
+            canvas.width = Math.max(1, Math.ceil(width));
+            canvas.height = Math.max(1, Math.ceil(height));
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                return;
+            ctx.fillStyle = "#ffffff";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob((blob) => {
+                if (!blob)
+                    return;
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = url;
+                a.download = filename;
+                a.click();
+                URL.revokeObjectURL(url);
+                this.updateStatus(`Exported ${filename}`);
+            }, type, type === "image/jpeg" ? 0.92 : undefined);
+        };
+        img.src = image64;
+    }
+    exportPDF() {
+        const exportable = this.getExportSvg();
+        if (!exportable)
+            return;
+        const { xml, width, height } = exportable;
+        const img = new Image();
+        img.onload = () => {
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                return;
+            ctx.fillStyle = "#ffffff";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            const pngUrl = canvas.toDataURL("image/png");
+            const pdfWindow = window.open("");
+            if (pdfWindow) {
+                pdfWindow.document.write(`<img src="${pngUrl}" style="width:100%;height:auto;display:block;margin:0 auto;" />`);
+                pdfWindow.document.close();
+                this.updateStatus("Opened print preview for PDF export");
+            }
+        };
+        img.src = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(xml)));
+    }
+    updateSelectedLabel(val) {
+        if (!this.selectedNodeId)
+            return;
+        const node = this.nodes.find((n) => n.id === this.selectedNodeId);
+        if (!node)
+            return;
+        node.label = val;
+        this.renderNodes();
+    }
+    syncLabelInput() {
+        if (!this.labelInput) {
+            return;
+        }
+        if (this.selectedNodeIds.size > 1) {
+            this.labelInput.value = "";
+            this.labelInput.disabled = true;
+            this.labelInput.placeholder = `${this.selectedNodeIds.size} nodes selected`;
+            return;
+        }
+        if (this.selectedNodeId) {
+            const node = this.nodes.find((n) => n.id === this.selectedNodeId);
+            this.labelInput.disabled = false;
+            this.labelInput.placeholder = "Edit selected label";
+            this.labelInput.value = node?.label ?? "";
+            return;
+        }
+        this.labelInput.value = "";
+        this.labelInput.disabled = true;
+        this.labelInput.placeholder = "Select a node to rename";
+    }
+    handleCanvasClick(event) {
+        if (this.connectMode)
+            return;
+        // Only clear when clicking the empty canvas, not on nodes/links/handles
+        const target = event.target;
+        const isNode = target?.closest?.(".ce-diagram__node");
+        if (isNode)
+            return;
+        if (this.inlineEditor) {
+            this.inlineEditor.remove();
+            this.inlineEditor = undefined;
+        }
+        this.selectedNodeId = undefined;
+        this.selectedNodeIds.clear();
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+        this.renderLinks();
+        this.renderNodes();
+    }
+    handleKeyDown(event) {
+        const meta = event.metaKey || event.ctrlKey;
+        if (meta && event.key.toLowerCase() === "z" && !event.shiftKey) {
+            event.preventDefault();
+            this.undo();
+            return;
+        }
+        if (meta && (event.key.toLowerCase() === "y" || (event.shiftKey && event.key.toLowerCase() === "z"))) {
+            event.preventDefault();
+            this.redo();
+            return;
+        }
+        if (meta && event.key.toLowerCase() === "d") {
+            event.preventDefault();
+            this.duplicateSelectedNode();
+            return;
+        }
+        if (meta && event.key.toLowerCase() === "a") {
+            event.preventDefault();
+            this.selectedNodeIds = new Set(this.nodes.map((node) => node.id));
+            this.selectedNodeId = this.nodes.at(0)?.id;
+            this.selectedLinkId = undefined;
+            this.syncLabelInput();
+            this.renderNodes();
+            return;
+        }
+        if (event.key === "Delete" || event.key === "Backspace") {
+            event.preventDefault();
+            if (this.selectedLinkId) {
+                this.deleteSelectedLink();
+            }
+            else {
+                this.deleteSelectedNode();
+            }
+            return;
+        }
+        if (event.key === "Escape") {
+            this.selectedNodeId = undefined;
+            this.selectedNodeIds.clear();
+            this.selectedLinkId = undefined;
+            this.syncLabelInput();
+            this.renderLinks();
+            this.renderNodes();
+        }
+    }
+    applyMarqueeSelection() {
+        if (!this.marqueeSelection) {
+            return;
+        }
+        const { start, current } = this.marqueeSelection;
+        const minX = Math.min(start.x, current.x);
+        const maxX = Math.max(start.x, current.x);
+        const minY = Math.min(start.y, current.y);
+        const maxY = Math.max(start.y, current.y);
+        const selected = this.nodes.filter((node) => {
+            const width = node.width ?? 140;
+            const height = node.height ?? 60;
+            return node.x >= minX && node.y >= minY && node.x + width <= maxX && node.y + height <= maxY;
+        });
+        this.selectedNodeIds = new Set(selected.map((node) => node.id));
+        this.selectedNodeId = selected.at(0)?.id;
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+    }
+    createLink(sourceId, targetId) {
+        const targetNode = this.nodes.find((node) => node.id === targetId);
+        if (!targetNode) {
+            return;
+        }
+        const duplicate = this.links.some((link) => link.source === sourceId && link.target === targetId);
+        if (!duplicate) {
+            this.pushHistorySnapshot();
+            this.links.push({
+                id: `link-${Date.now().toString(36)}`,
+                source: sourceId,
+                target: targetId,
+            });
+        }
+        this.connectSourceId = undefined;
+        const toolbar = this.el.querySelector(".ce-diagram__toolbar") ?? undefined;
+        this.clearInteractionModes(toolbar);
+        this.updateStatus(`Connected ${targetNode.label}`);
+        this.renderLinks();
+        this.renderNodes();
+    }
+    duplicateSelectedNode() {
+        const selectedIds = this.selectedNodeIds.size ? Array.from(this.selectedNodeIds) : this.selectedNodeId ? [this.selectedNodeId] : [];
+        if (!selectedIds.length) {
+            this.updateStatus("Select a shape to duplicate");
+            return;
+        }
+        this.pushHistorySnapshot();
+        const duplicates = [];
+        selectedIds.forEach((id, index) => {
+            const source = this.nodes.find((node) => node.id === id);
+            if (!source)
+                return;
+            duplicates.push({
+                ...structuredClone(source),
+                id: `node-${Date.now().toString(36)}-${index}`,
+                label: `${source.label} Copy`,
+                x: this.snap(source.x + 40),
+                y: this.snap(source.y + 40),
+            });
+        });
+        this.nodes.push(...duplicates);
+        this.selectedNodeIds = new Set(duplicates.map((node) => node.id));
+        this.selectedNodeId = duplicates.at(0)?.id;
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+        this.renderNodes();
+        this.renderLinks();
+        this.updateStatus(`Duplicated ${duplicates.length} shape${duplicates.length === 1 ? "" : "s"}`);
+    }
+    deleteSelectedNode() {
+        if (this.selectedLinkId) {
+            this.deleteSelectedLink();
+            return;
+        }
+        const selectedIds = this.selectedNodeIds.size ? Array.from(this.selectedNodeIds) : this.selectedNodeId ? [this.selectedNodeId] : [];
+        if (!selectedIds.length) {
+            this.updateStatus("Select a shape to delete");
+            return;
+        }
+        this.pushHistorySnapshot();
+        this.nodes = this.nodes.filter((node) => !selectedIds.includes(node.id));
+        this.links = this.links.filter((link) => !selectedIds.includes(link.source) && !selectedIds.includes(link.target));
+        this.selectedNodeId = undefined;
+        this.selectedNodeIds.clear();
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+        this.renderLinks();
+        this.renderNodes();
+        this.updateStatus(`Deleted ${selectedIds.length} shape${selectedIds.length === 1 ? "" : "s"}`);
+    }
+    deleteSelectedLink() {
+        if (!this.selectedLinkId)
+            return;
+        this.pushHistorySnapshot();
+        this.links = this.links.filter((link) => link.id !== this.selectedLinkId);
+        this.selectedLinkId = undefined;
+        this.renderLinks();
+        this.renderNodes();
+        this.updateStatus("Deleted connector");
+    }
+    editLinkLabel(link) {
+        const next = window.prompt("Connector label or condition", link.label ?? "");
+        if (next === null)
+            return;
+        this.pushHistorySnapshot();
+        link.label = next.trim() || undefined;
+        this.renderLinks();
+        this.updateStatus(link.label ? `Updated connector: ${link.label}` : "Cleared connector label");
+    }
+    getSelectedNodes() {
+        const ids = this.selectedNodeIds.size ? Array.from(this.selectedNodeIds) : this.selectedNodeId ? [this.selectedNodeId] : [];
+        return ids
+            .map((id) => this.nodes.find((node) => node.id === id))
+            .filter((node) => Boolean(node));
+    }
+    alignSelection(mode) {
+        const nodes = this.getSelectedNodes();
+        if (nodes.length < 2) {
+            this.updateStatus("Select at least two shapes to align");
+            return;
+        }
+        this.pushHistorySnapshot();
+        if (mode === "left") {
+            const edge = Math.min(...nodes.map((node) => node.x));
+            nodes.forEach((node) => (node.x = edge));
+        }
+        else if (mode === "center") {
+            const center = nodes.reduce((sum, node) => sum + node.x + (node.width ?? 140) / 2, 0) / nodes.length;
+            nodes.forEach((node) => (node.x = this.snap(center - (node.width ?? 140) / 2)));
+        }
+        else if (mode === "right") {
+            const edge = Math.max(...nodes.map((node) => node.x + (node.width ?? 140)));
+            nodes.forEach((node) => (node.x = this.snap(edge - (node.width ?? 140))));
+        }
+        else if (mode === "top") {
+            const edge = Math.min(...nodes.map((node) => node.y));
+            nodes.forEach((node) => (node.y = edge));
+        }
+        else if (mode === "middle") {
+            const middle = nodes.reduce((sum, node) => sum + node.y + (node.height ?? 60) / 2, 0) / nodes.length;
+            nodes.forEach((node) => (node.y = this.snap(middle - (node.height ?? 60) / 2)));
+        }
+        else if (mode === "bottom") {
+            const edge = Math.max(...nodes.map((node) => node.y + (node.height ?? 60)));
+            nodes.forEach((node) => (node.y = this.snap(edge - (node.height ?? 60))));
+        }
+        this.renderLinks();
+        this.renderNodes();
+        this.updateStatus(`Aligned ${nodes.length} shapes`);
+    }
+    distributeSelection(axis) {
+        const nodes = this.getSelectedNodes();
+        if (nodes.length < 3) {
+            this.updateStatus("Select at least three shapes to distribute");
+            return;
+        }
+        this.pushHistorySnapshot();
+        const sorted = [...nodes].sort((a, b) => (axis === "horizontal" ? a.x - b.x : a.y - b.y));
+        const first = sorted[0];
+        const last = sorted[sorted.length - 1];
+        const span = axis === "horizontal"
+            ? last.x - first.x
+            : last.y - first.y;
+        const step = span / (sorted.length - 1 || 1);
+        sorted.forEach((node, index) => {
+            if (axis === "horizontal") {
+                node.x = this.snap(first.x + step * index);
+            }
+            else {
+                node.y = this.snap(first.y + step * index);
+            }
+        });
+        this.renderLinks();
+        this.renderNodes();
+        this.updateStatus(`Distributed ${nodes.length} shapes`);
+    }
+    syncToolbarState() {
+        const toolbar = this.el.querySelector(".ce-diagram__toolbar");
+        if (!toolbar) {
+            return;
+        }
+        const selectedOnly = ["edit-label", "duplicate-node", "delete-node"];
+        const hasNodeSelection = this.selectedNodeIds.size > 0 || Boolean(this.selectedNodeId);
+        selectedOnly.forEach((actionId) => {
+            const button = toolbar.querySelector(`[data-action="${actionId}"]`);
+            if (button) {
+                if (actionId === "edit-label") {
+                    button.disabled = !this.selectedNodeId || this.selectedNodeIds.size > 1 || Boolean(this.selectedLinkId);
+                }
+                else {
+                    button.disabled = !hasNodeSelection && !this.selectedLinkId;
+                }
+            }
+        });
+        const undoButton = toolbar.querySelector('[data-action="undo"]');
+        const redoButton = toolbar.querySelector('[data-action="redo"]');
+        const multiArrange = [
+            "align-left",
+            "align-center",
+            "align-right",
+            "distribute-horizontal",
+            "align-top",
+            "align-middle",
+            "align-bottom",
+            "distribute-vertical",
+        ];
+        const selectedCount = this.getSelectedNodes().length;
+        multiArrange.forEach((actionId) => {
+            const button = toolbar.querySelector(`[data-action="${actionId}"]`);
+            if (button) {
+                const needsThree = actionId.includes("distribute");
+                button.disabled = needsThree ? selectedCount < 3 : selectedCount < 2;
+            }
+        });
+        if (undoButton) {
+            undoButton.disabled = this.historyPast.length === 0;
+        }
+        if (redoButton) {
+            redoButton.disabled = this.historyFuture.length === 0;
+        }
+    }
+    pushHistorySnapshot() {
+        this.historyPast.push({
+            nodes: structuredClone(this.nodes),
+            links: structuredClone(this.links),
+        });
+        if (this.historyPast.length > 50) {
+            this.historyPast.shift();
+        }
+        this.historyFuture = [];
+        this.syncToolbarState();
+    }
+    undo() {
+        const previous = this.historyPast.pop();
+        if (!previous) {
+            return;
+        }
+        this.historyFuture.push({
+            nodes: structuredClone(this.nodes),
+            links: structuredClone(this.links),
+        });
+        this.nodes = structuredClone(previous.nodes);
+        this.links = structuredClone(previous.links);
+        this.selectedNodeId = undefined;
+        this.selectedNodeIds.clear();
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+        this.renderLinks();
+        this.renderNodes();
+        this.updateStatus("Undid last change");
+    }
+    redo() {
+        const next = this.historyFuture.pop();
+        if (!next) {
+            return;
+        }
+        this.historyPast.push({
+            nodes: structuredClone(this.nodes),
+            links: structuredClone(this.links),
+        });
+        this.nodes = structuredClone(next.nodes);
+        this.links = structuredClone(next.links);
+        this.selectedNodeId = undefined;
+        this.selectedNodeIds.clear();
+        this.selectedLinkId = undefined;
+        this.syncLabelInput();
+        this.renderLinks();
+        this.renderNodes();
+        this.updateStatus("Redid last change");
+    }
+    detachConnectorDragListeners() {
+        if (this.connectorDragMoveHandler) {
+            window.removeEventListener("pointermove", this.connectorDragMoveHandler);
+            this.connectorDragMoveHandler = undefined;
+        }
+        if (this.connectorDragUpHandler) {
+            window.removeEventListener("pointerup", this.connectorDragUpHandler);
+            this.connectorDragUpHandler = undefined;
+        }
+    }
+    getExportSvg() {
+        if (!this.svg)
+            return null;
+        const clone = this.svg.cloneNode(true);
+        clone.removeAttribute("style");
+        const width = this.svg.clientWidth || this.svg.getBoundingClientRect().width;
+        const height = this.svg.clientHeight || this.svg.getBoundingClientRect().height;
+        clone.setAttribute("width", String(width));
+        clone.setAttribute("height", String(height));
+        // Hide icons for a cleaner export
+        clone.querySelectorAll(".ce-diagram__node-icon").forEach((icon) => icon.remove());
+        const serializer = new XMLSerializer();
+        const xml = serializer.serializeToString(clone);
+        return { xml, width, height };
+    }
+    getNodePalette() {
+        if (this.options.theme === "dark") {
+            return {
+                fill: "rgba(96, 165, 250, 0.18)",
+                stroke: "rgba(96, 165, 250, 0.6)",
+                label: "#e2e8f0",
+            };
+        }
+        return {
+            fill: "rgba(37, 99, 235, 0.12)",
+            stroke: "rgba(37, 99, 235, 0.55)",
+            label: "#0f172a",
+        };
+    }
+}
+//# sourceMappingURL=Diagram.js.map