@bpmnkit/editor 0.0.8

package/dist/hud.js

@@ -0,0 +1,1631 @@
+import { readDiColor } from "@bpmnkit/core";
+import { injectHudStyles } from "./css.js";
+import { CONTEXTUAL_ADD_TYPES, ELEMENT_GROUPS, ELEMENT_TYPE_LABELS, EXTERNAL_LABEL_TYPES, getElementGroup, getValidLabelPositions, } from "./element-groups.js";
+import { IC } from "./icons.js";
+import { showHudInputModal } from "./modal.js";
+const GROUP_ICONS = {
+    startEvents: IC.startEvent,
+    endEvents: IC.endEvent,
+    intermediateEvents: IC.messageCatchEvent,
+    activities: IC.task,
+    gateways: IC.exclusiveGateway,
+    annotations: IC.textAnnotation,
+};
+const COLOR_PALETTE = [
+    { fill: "#bbdefb", stroke: "#0d4372" },
+    { fill: "#c8e6c9", stroke: "#1b5e20" },
+    { fill: "#fff9c4", stroke: "#f57f17" },
+    { fill: "#ffccbc", stroke: "#bf360c" },
+    { fill: "#e1bee7", stroke: "#4a148c" },
+    { fill: "#dcedc8", stroke: "#33691e" },
+];
+const GROUPS = ELEMENT_GROUPS.map((g) => ({
+    ...g,
+    groupIcon: GROUP_ICONS[g.id] ?? "",
+    items: g.types.map((type) => ({
+        type,
+        icon: IC[type],
+        title: ELEMENT_TYPE_LABELS[type],
+    })),
+}));
+const CTX_OPTIONS = CONTEXTUAL_ADD_TYPES.map((type) => ({
+    type,
+    icon: IC[type],
+    title: `Add ${ELEMENT_TYPE_LABELS[type]}`,
+}));
+const POSITION_LABELS = {
+    bottom: "Below (centered)",
+    top: "Above (centered)",
+    left: "Left",
+    right: "Right",
+    "bottom-left": "Bottom left",
+    "bottom-right": "Bottom right",
+    "top-left": "Top left",
+    "top-right": "Top right",
+};
+const GATEWAY_TYPES = new Set([
+    "exclusiveGateway",
+    "inclusiveGateway",
+    "parallelGateway",
+    "eventBasedGateway",
+    "complexGateway",
+]);
+const SHORTCUTS = [
+    ["Ctrl+Z", "Undo"],
+    ["Ctrl+Y / Ctrl+Shift+Z", "Redo"],
+    ["Ctrl+D", "Duplicate"],
+    ["Delete / Backspace", "Delete selected"],
+    ["Ctrl+A", "Select all"],
+    ["Ctrl+C", "Copy"],
+    ["Ctrl+V", "Paste"],
+    ["Ctrl+F", "Find element"],
+    ["Ctrl+K", "Command palette"],
+    ["Ctrl+E", "File switcher"],
+    ["H", "Hand tool"],
+    ["V", "Select tool"],
+    ["Escape", "Deselect / cancel"],
+    ["Double-click", "Edit label"],
+];
+export function initEditorHud(editor, options = {}) {
+    injectHudStyles();
+    // ── Create and inject HUD DOM ──────────────────────────────────────────────
+    function hudBtn(id, title) {
+        const b = document.createElement("button");
+        b.id = id;
+        b.className = "hud-btn";
+        b.title = title;
+        return b;
+    }
+    function hudSep() {
+        const d = document.createElement("div");
+        d.className = "hud-sep";
+        return d;
+    }
+    // Action bar — top center
+    const btnUndo = hudBtn("btn-undo", "Undo (Ctrl+Z)");
+    const btnRedo = hudBtn("btn-redo", "Redo (Ctrl+Y)");
+    const btnDelete = hudBtn("btn-delete", "Delete");
+    const btnDuplicate = hudBtn("btn-duplicate", "Duplicate (Ctrl+D)");
+    const btnTopMore = hudBtn("btn-top-more", "More actions");
+    const btnAutoLayout = hudBtn("btn-auto-layout", "Auto-layout diagram (arrange all elements)");
+    btnAutoLayout.innerHTML = `<svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><rect x="1" y="1" width="6" height="4" rx="1"/><rect x="9" y="1" width="6" height="4" rx="1"/><rect x="1" y="7" width="6" height="4" rx="1"/><rect x="9" y="7" width="6" height="4" rx="1"/><rect x="1" y="13" width="14" height="2" rx="1"/></svg>`;
+    const hudTopCenter = document.createElement("div");
+    hudTopCenter.id = "hud-top-center";
+    hudTopCenter.className = "hud panel";
+    hudTopCenter.append(btnUndo, btnRedo, hudSep(), btnDelete, btnDuplicate, hudSep(), btnTopMore, hudSep(), btnAutoLayout);
+    if (options.optimizeButton) {
+        options.optimizeButton.className = "hud-btn";
+        hudTopCenter.append(hudSep(), options.optimizeButton);
+    }
+    if (options.aiButton) {
+        options.aiButton.className = "hud-btn";
+        hudTopCenter.append(hudSep(), options.aiButton);
+    }
+    if (options.playButton) {
+        options.playButton.className = "hud-btn";
+        hudTopCenter.append(hudSep(), options.playButton);
+    }
+    // Mobile collapse toggle — top center (hidden on desktop via CSS)
+    const btnTcToggle = hudBtn("btn-tc-toggle", "Actions");
+    btnTcToggle.innerHTML = IC.undo;
+    hudTopCenter.insertBefore(btnTcToggle, hudTopCenter.firstChild);
+    // Zoom widget — bottom left
+    const btnZoomCurrent = document.createElement("button");
+    btnZoomCurrent.id = "btn-zoom-current";
+    btnZoomCurrent.textContent = "100%";
+    const btnZoomOut = hudBtn("btn-zoom-out", "Zoom out (−)");
+    const btnZoomPct = document.createElement("button");
+    btnZoomPct.id = "btn-zoom-pct";
+    btnZoomPct.textContent = "100% ▾";
+    const btnZoomIn = hudBtn("btn-zoom-in", "Zoom in (+)");
+    const zoomExpanded = document.createElement("div");
+    zoomExpanded.id = "zoom-expanded";
+    zoomExpanded.append(btnZoomOut, btnZoomPct, btnZoomIn);
+    const hudBottomLeft = document.createElement("div");
+    hudBottomLeft.id = "hud-bottom-left";
+    hudBottomLeft.className = "hud panel";
+    hudBottomLeft.append(btnZoomCurrent, zoomExpanded);
+    if (options.rawModeButton) {
+        const btn = options.rawModeButton;
+        btn.className = "hud-btn";
+        const sep = hudSep();
+        hudBottomLeft.append(sep, btn);
+    }
+    if (options.asciiButton) {
+        const btn = options.asciiButton;
+        btn.className = "hud-btn";
+        hudBottomLeft.append(hudSep(), btn);
+    }
+    // Tool selector — bottom center
+    const btnSelect = hudBtn("btn-select", "Select (V)");
+    btnSelect.classList.add("active");
+    const btnPan = hudBtn("btn-pan", "Hand (H)");
+    const btnSpace = hudBtn("btn-space", "Space tool");
+    const toolGroupsEl = document.createElement("div");
+    toolGroupsEl.id = "tool-groups";
+    const hudBottomCenter = document.createElement("div");
+    hudBottomCenter.id = "hud-bottom-center";
+    hudBottomCenter.className = "hud panel";
+    hudBottomCenter.append(btnSelect, btnPan, btnSpace, hudSep(), toolGroupsEl);
+    // Mobile collapse toggle — bottom center (hidden on desktop via CSS)
+    const btnBcToggle = hudBtn("btn-bc-toggle", "Tools");
+    btnBcToggle.innerHTML = IC.select;
+    hudBottomCenter.insertBefore(btnBcToggle, hudBottomCenter.firstChild);
+    // Contextual toolbars (positioned dynamically)
+    const cfgToolbar = document.createElement("div");
+    cfgToolbar.id = "cfg-toolbar";
+    cfgToolbar.className = "hud panel";
+    const ctxToolbar = document.createElement("div");
+    ctxToolbar.id = "ctx-toolbar";
+    ctxToolbar.className = "hud panel";
+    // Dropdown menus
+    const zoomMenuEl = document.createElement("div");
+    zoomMenuEl.id = "zoom-menu";
+    zoomMenuEl.className = "dropdown";
+    const moreMenuEl = document.createElement("div");
+    moreMenuEl.id = "more-menu";
+    moreMenuEl.className = "dropdown";
+    const labelPosMenuEl = document.createElement("div");
+    labelPosMenuEl.id = "label-pos-menu";
+    labelPosMenuEl.className = "dropdown";
+    const refMenuEl = document.createElement("div");
+    refMenuEl.id = "ref-menu";
+    refMenuEl.className = "dropdown";
+    // Simulation active banner
+    const simBannerEl = document.createElement("div");
+    simBannerEl.id = "bpmnkit-sim-banner";
+    simBannerEl.className = "hidden";
+    const simBannerText = document.createElement("span");
+    simBannerText.textContent = "Simulation active — editing is disabled";
+    const simBannerExit = document.createElement("button");
+    simBannerExit.id = "bpmnkit-sim-banner-exit";
+    simBannerExit.textContent = "Exit simulation";
+    simBannerExit.addEventListener("click", () => options.onExitSimulation?.());
+    simBannerEl.append(simBannerText, simBannerExit);
+    // Right-click context menu
+    const ctxMenuEl = document.createElement("div");
+    ctxMenuEl.id = "bpmnkit-ctx-menu";
+    ctxMenuEl.className = "dropdown";
+    // Element search bar
+    const searchBarEl = document.createElement("div");
+    searchBarEl.id = "bpmnkit-search-bar";
+    searchBarEl.className = "hidden";
+    const searchInput = document.createElement("input");
+    searchInput.id = "bpmnkit-search-input";
+    searchInput.type = "text";
+    searchInput.placeholder = "Search elements…";
+    searchInput.setAttribute("aria-label", "Search diagram elements");
+    const searchCount = document.createElement("span");
+    searchCount.id = "bpmnkit-search-count";
+    const searchClose = document.createElement("button");
+    searchClose.id = "bpmnkit-search-close";
+    searchClose.textContent = "×";
+    searchClose.title = "Close search (Escape)";
+    searchBarEl.append(searchInput, searchCount, searchClose);
+    // Keyboard shortcuts modal
+    const shortcutsModal = document.createElement("div");
+    shortcutsModal.id = "bpmnkit-shortcuts-modal";
+    shortcutsModal.className = "hidden";
+    const shortcutsInner = document.createElement("div");
+    shortcutsInner.id = "bpmnkit-shortcuts-inner";
+    const shortcutsTitle = document.createElement("h3");
+    shortcutsTitle.textContent = "Keyboard shortcuts";
+    shortcutsInner.appendChild(shortcutsTitle);
+    for (const [key, desc] of SHORTCUTS) {
+        const row = document.createElement("div");
+        row.className = "bpmnkit-sc-row";
+        const descEl = document.createElement("span");
+        descEl.textContent = desc;
+        const keyEl = document.createElement("kbd");
+        keyEl.className = "bpmnkit-sc-key";
+        keyEl.textContent = key;
+        row.append(descEl, keyEl);
+        shortcutsInner.appendChild(row);
+    }
+    const shortcutsClose = document.createElement("button");
+    shortcutsClose.id = "bpmnkit-shortcuts-close";
+    shortcutsClose.textContent = "Close";
+    shortcutsClose.addEventListener("click", () => shortcutsModal.classList.add("hidden"));
+    shortcutsModal.addEventListener("click", (e) => {
+        if (e.target === shortcutsModal)
+            shortcutsModal.classList.add("hidden");
+    });
+    shortcutsInner.appendChild(shortcutsClose);
+    shortcutsModal.appendChild(shortcutsInner);
+    editor.container.append(hudTopCenter, hudBottomLeft, hudBottomCenter, cfgToolbar, ctxToolbar, zoomMenuEl, moreMenuEl, labelPosMenuEl, refMenuEl, ctxMenuEl, simBannerEl, searchBarEl, shortcutsModal);
+    // ── Theme ──────────────────────────────────────────────────────────────────
+    const syncHudTheme = () => {
+        document.body.dataset.bpmnHudTheme = editor.getTheme();
+    };
+    syncHudTheme();
+    const themeObs = new MutationObserver(syncHudTheme);
+    themeObs.observe(editor.container, { attributes: true, attributeFilter: ["data-theme"] });
+    // ── Closure state ──────────────────────────────────────────────────────────
+    let currentScale = 1;
+    let selectedIds = [];
+    let ctxSourceId = null;
+    let dragActive = false;
+    let openGroupPicker = null;
+    let openDropdown = null;
+    let zoomOpen = false;
+    function collapseOnMobile(panel) {
+        if (window.innerWidth <= 600)
+            panel.classList.remove("expanded");
+    }
+    btnBcToggle.addEventListener("click", () => {
+        if (hudBottomCenter.classList.contains("expanded")) {
+            hudBottomCenter.classList.remove("expanded");
+        }
+        else {
+            hudBottomCenter.classList.add("expanded");
+            hudTopCenter.classList.remove("expanded");
+        }
+    });
+    btnTcToggle.addEventListener("click", () => {
+        if (hudTopCenter.classList.contains("expanded")) {
+            hudTopCenter.classList.remove("expanded");
+        }
+        else {
+            hudTopCenter.classList.add("expanded");
+            hudBottomCenter.classList.remove("expanded");
+        }
+    });
+    const groupActiveType = {
+        startEvents: "startEvent",
+        endEvents: "endEvent",
+        intermediateEvents: "messageCatchEvent",
+        activities: "serviceTask",
+        gateways: "exclusiveGateway",
+        annotations: "textAnnotation",
+    };
+    const groupBtns = {};
+    // ── Static button icons ────────────────────────────────────────────────────
+    btnSelect.innerHTML = IC.select;
+    btnPan.innerHTML = IC.hand;
+    btnSpace.innerHTML = IC.space;
+    btnUndo.innerHTML = IC.undo;
+    btnRedo.innerHTML = IC.redo;
+    btnDelete.innerHTML = IC.trash;
+    btnDuplicate.innerHTML = IC.duplicate;
+    btnTopMore.innerHTML = IC.dots;
+    btnZoomOut.innerHTML = IC.zoomOut;
+    btnZoomIn.innerHTML = IC.zoomIn;
+    // ── Group picker ───────────────────────────────────────────────────────────
+    function closeGroupPicker() {
+        openGroupPicker?.remove();
+        openGroupPicker = null;
+    }
+    function updateGroupButton(groupId) {
+        const btn = groupBtns[groupId];
+        const group = GROUPS.find((g) => g.id === groupId);
+        if (!btn || !group)
+            return;
+        const item = group.items.find((i) => i.type === groupActiveType[groupId]);
+        btn.innerHTML = item ? item.icon : group.groupIcon;
+    }
+    function showGroupPicker(anchor, group) {
+        closeGroupPicker();
+        closeAllDropdowns();
+        const picker = document.createElement("div");
+        picker.className = "group-picker";
+        const label = document.createElement("span");
+        label.className = "group-picker-label";
+        label.textContent = group.title;
+        picker.appendChild(label);
+        for (const item of group.items) {
+            const btn = document.createElement("button");
+            btn.className = item.type === groupActiveType[group.id] ? "hud-btn active" : "hud-btn";
+            btn.innerHTML = item.icon;
+            btn.title = item.title;
+            btn.addEventListener("click", (e) => {
+                e.stopPropagation();
+                groupActiveType[group.id] = item.type;
+                updateGroupButton(group.id);
+                editor.setTool(`create:${item.type}`);
+                closeGroupPicker();
+                collapseOnMobile(hudBottomCenter);
+            });
+            picker.appendChild(btn);
+        }
+        editor.container.appendChild(picker);
+        openGroupPicker = picker;
+        const containerRect = editor.container.getBoundingClientRect();
+        const rect = anchor.getBoundingClientRect();
+        const pickerW = group.items.length * 36 + 80;
+        const containerWidth = editor.container.offsetWidth;
+        const left = Math.max(4, Math.min(rect.left - containerRect.left + rect.width / 2 - pickerW / 2, containerWidth - pickerW - 4));
+        picker.style.bottom = `${containerRect.bottom - rect.top + 6}px`;
+        picker.style.left = `${left}px`;
+        const onOutside = (e) => {
+            if (!picker.contains(e.target) && e.target !== anchor) {
+                closeGroupPicker();
+                document.removeEventListener("pointerdown", onOutside);
+            }
+        };
+        setTimeout(() => document.addEventListener("pointerdown", onOutside), 0);
+    }
+    // ── Type-change picker (used by cfgToolbar) ────────────────────────────────
+    function showTypePicker(anchor, group, sourceId, sourceType) {
+        closeGroupPicker();
+        closeAllDropdowns();
+        const picker = document.createElement("div");
+        picker.className = "group-picker";
+        const label = document.createElement("span");
+        label.className = "group-picker-label";
+        label.textContent = group.title;
+        picker.appendChild(label);
+        for (const item of group.items) {
+            const btn = document.createElement("button");
+            btn.className = item.type === sourceType ? "hud-btn active" : "hud-btn";
+            btn.innerHTML = item.icon;
+            btn.title = item.title;
+            btn.addEventListener("click", (e) => {
+                e.stopPropagation();
+                if (item.type !== sourceType)
+                    editor.changeElementType(sourceId, item.type);
+                closeGroupPicker();
+            });
+            picker.appendChild(btn);
+        }
+        editor.container.appendChild(picker);
+        openGroupPicker = picker;
+        const containerRect = editor.container.getBoundingClientRect();
+        const rect = anchor.getBoundingClientRect();
+        const pickerW = group.items.length * 36 + 80;
+        const containerWidth = editor.container.offsetWidth;
+        const left = Math.max(4, Math.min(rect.left - containerRect.left + rect.width / 2 - pickerW / 2, containerWidth - pickerW - 4));
+        picker.style.bottom = `${containerRect.bottom - rect.top + 6}px`;
+        picker.style.left = `${left}px`;
+        const onOutside = (e) => {
+            if (!picker.contains(e.target) && e.target !== anchor) {
+                closeGroupPicker();
+                document.removeEventListener("pointerdown", onOutside);
+            }
+        };
+        setTimeout(() => document.addEventListener("pointerdown", onOutside), 0);
+    }
+    // ── Color picker (used by ctxToolbar) ──────────────────────────────────────
+    function showColorPicker(anchor, sourceId, currentFill) {
+        closeGroupPicker();
+        closeAllDropdowns();
+        const picker = document.createElement("div");
+        picker.className = "group-picker";
+        // "Default" (no-color) swatch
+        const clearSwatch = document.createElement("button");
+        const isDefault = !currentFill;
+        clearSwatch.className = isDefault
+            ? "bpmnkit-color-swatch bpmnkit-color-swatch--default active"
+            : "bpmnkit-color-swatch bpmnkit-color-swatch--default";
+        clearSwatch.title = "Default color";
+        clearSwatch.addEventListener("click", (e) => {
+            e.stopPropagation();
+            editor.updateColor(sourceId, {});
+            closeGroupPicker();
+        });
+        picker.appendChild(clearSwatch);
+        for (const { fill, stroke } of COLOR_PALETTE) {
+            const isActive = currentFill === fill;
+            const swatch = document.createElement("button");
+            swatch.className = isActive ? "bpmnkit-color-swatch active" : "bpmnkit-color-swatch";
+            swatch.style.background = fill;
+            swatch.style.outlineColor = stroke;
+            swatch.title = "Apply color";
+            swatch.addEventListener("click", (e) => {
+                e.stopPropagation();
+                editor.updateColor(sourceId, { fill, stroke });
+                closeGroupPicker();
+            });
+            picker.appendChild(swatch);
+        }
+        editor.container.appendChild(picker);
+        openGroupPicker = picker;
+        const containerRect = editor.container.getBoundingClientRect();
+        const rect = anchor.getBoundingClientRect();
+        const pickerW = (COLOR_PALETTE.length + 1) * 30 + 20;
+        const containerWidth = editor.container.offsetWidth;
+        const left = Math.max(4, Math.min(rect.left - containerRect.left + rect.width / 2 - pickerW / 2, containerWidth - pickerW - 4));
+        picker.style.top = `${rect.bottom - containerRect.top + 6}px`;
+        picker.style.bottom = "auto";
+        picker.style.left = `${left}px`;
+        const onOutside = (e) => {
+            if (!picker.contains(e.target) && e.target !== anchor) {
+                closeGroupPicker();
+                document.removeEventListener("pointerdown", onOutside);
+            }
+        };
+        setTimeout(() => document.addEventListener("pointerdown", onOutside), 0);
+    }
+    // ── Build group buttons ────────────────────────────────────────────────────
+    for (const group of GROUPS) {
+        const btn = document.createElement("button");
+        btn.className = "hud-btn";
+        btn.dataset.group = group.id;
+        btn.innerHTML = group.groupIcon;
+        btn.title = `${group.title} (hold for options)`;
+        let longPressTimer = null;
+        let isLongPress = false;
+        btn.addEventListener("pointerdown", (e) => {
+            if (e.button !== 0)
+                return;
+            isLongPress = false;
+            longPressTimer = setTimeout(() => {
+                isLongPress = true;
+                showGroupPicker(btn, group);
+            }, 500);
+        });
+        btn.addEventListener("pointerup", () => {
+            if (longPressTimer) {
+                clearTimeout(longPressTimer);
+                longPressTimer = null;
+            }
+            if (!isLongPress) {
+                const activeType = groupActiveType[group.id];
+                if (activeType) {
+                    editor.setTool(`create:${activeType}`);
+                    collapseOnMobile(hudBottomCenter);
+                }
+            }
+        });
+        btn.addEventListener("pointercancel", () => {
+            if (longPressTimer) {
+                clearTimeout(longPressTimer);
+                longPressTimer = null;
+            }
+        });
+        btn.addEventListener("contextmenu", (e) => e.preventDefault());
+        toolGroupsEl.appendChild(btn);
+        groupBtns[group.id] = btn;
+        updateGroupButton(group.id);
+    }
+    // ── Tool active state ──────────────────────────────────────────────────────
+    function updateToolActiveState(tool) {
+        btnSelect.classList.toggle("active", tool === "select");
+        btnPan.classList.toggle("active", tool === "pan");
+        btnSpace.classList.toggle("active", tool === "space");
+        for (const group of GROUPS) {
+            const btn = groupBtns[group.id];
+            if (!btn)
+                continue;
+            const isGroupActive = group.items.some((item) => tool === `create:${item.type}`);
+            btn.classList.toggle("active", isGroupActive);
+            if (isGroupActive) {
+                const activeItem = group.items.find((item) => tool === `create:${item.type}`);
+                if (activeItem) {
+                    groupActiveType[group.id] = activeItem.type;
+                    updateGroupButton(group.id);
+                }
+            }
+        }
+        // Update bottom-center toggle icon to reflect the active tool
+        if (tool === "select")
+            btnBcToggle.innerHTML = IC.select;
+        else if (tool === "pan")
+            btnBcToggle.innerHTML = IC.hand;
+        else if (tool === "space")
+            btnBcToggle.innerHTML = IC.space;
+        else {
+            for (const group of GROUPS) {
+                if (group.items.some((item) => tool === `create:${item.type}`)) {
+                    const btn = groupBtns[group.id];
+                    if (btn)
+                        btnBcToggle.innerHTML = btn.innerHTML;
+                    break;
+                }
+            }
+        }
+    }
+    btnSelect.addEventListener("click", () => {
+        editor.setTool("select");
+        collapseOnMobile(hudBottomCenter);
+    });
+    btnPan.addEventListener("click", () => {
+        editor.setTool("pan");
+        collapseOnMobile(hudBottomCenter);
+    });
+    btnSpace.addEventListener("click", () => {
+        editor.setTool("space");
+        collapseOnMobile(hudBottomCenter);
+    });
+    // ── Dropdown management ────────────────────────────────────────────────────
+    function showDropdown(menu, anchor, align = "right") {
+        closeAllDropdowns();
+        const containerRect = editor.container.getBoundingClientRect();
+        const rect = anchor.getBoundingClientRect();
+        if (align === "right") {
+            menu.style.top = `${rect.bottom - containerRect.top + 6}px`;
+            menu.style.right = `${containerRect.right - rect.right}px`;
+            menu.style.left = "auto";
+            menu.style.bottom = "auto";
+        }
+        else {
+            menu.style.bottom = `${containerRect.bottom - rect.top + 6}px`;
+            menu.style.left = `${rect.left - containerRect.left}px`;
+            menu.style.top = "auto";
+            menu.style.right = "auto";
+        }
+        menu.classList.add("open");
+        openDropdown = menu;
+    }
+    function closeAllDropdowns() {
+        openDropdown?.classList.remove("open");
+        openDropdown = null;
+        closeGroupPicker();
+    }
+    document.addEventListener("pointerdown", (e) => {
+        if (openDropdown && !openDropdown.contains(e.target)) {
+            closeAllDropdowns();
+        }
+        if (window.innerWidth <= 600) {
+            if (hudBottomCenter.classList.contains("expanded") &&
+                !hudBottomCenter.contains(e.target)) {
+                hudBottomCenter.classList.remove("expanded");
+            }
+            if (hudTopCenter.classList.contains("expanded") && !hudTopCenter.contains(e.target)) {
+                hudTopCenter.classList.remove("expanded");
+            }
+        }
+    });
+    // ── Zoom widget ────────────────────────────────────────────────────────────
+    function updateZoomDisplay() {
+        const pct = `${Math.round(currentScale * 100)}%`;
+        btnZoomCurrent.textContent = pct;
+        btnZoomPct.textContent = `${pct} ▾`;
+    }
+    function toggleZoomWidget() {
+        zoomOpen = !zoomOpen;
+        if (zoomOpen) {
+            btnZoomCurrent.style.display = "none";
+            zoomExpanded.classList.add("open");
+        }
+        else {
+            zoomExpanded.classList.remove("open");
+            btnZoomCurrent.style.display = "";
+        }
+    }
+    function buildZoomMenu() {
+        zoomMenuEl.innerHTML = "";
+        const items = [
+            [
+                "Zoom to 100%",
+                () => {
+                    editor.setZoom(1);
+                    closeAllDropdowns();
+                },
+            ],
+            [
+                "Zoom to fit",
+                () => {
+                    editor.fitView();
+                    closeAllDropdowns();
+                },
+            ],
+        ];
+        for (const [label, action] of items) {
+            const btn = document.createElement("button");
+            btn.className = "drop-item";
+            btn.textContent = label;
+            btn.addEventListener("click", action);
+            zoomMenuEl.appendChild(btn);
+        }
+    }
+    btnZoomCurrent.addEventListener("click", toggleZoomWidget);
+    btnZoomOut.addEventListener("click", () => editor.zoomOut());
+    btnZoomIn.addEventListener("click", () => editor.zoomIn());
+    btnZoomPct.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+    });
+    btnZoomPct.addEventListener("click", () => {
+        if (openDropdown === zoomMenuEl) {
+            closeAllDropdowns();
+        }
+        else {
+            buildZoomMenu();
+            showDropdown(zoomMenuEl, btnZoomPct, "above");
+        }
+    });
+    // ── More actions menu ──────────────────────────────────────────────────────
+    function buildMoreMenu() {
+        moreMenuEl.innerHTML = "";
+        const items = [
+            [
+                "Select all",
+                IC.select,
+                () => {
+                    editor.selectAll();
+                    closeAllDropdowns();
+                },
+            ],
+            [
+                "Find element…",
+                IC.search,
+                () => {
+                    closeAllDropdowns();
+                    openSearch();
+                },
+            ],
+        ];
+        if (options.optimizeButton) {
+            items.push([
+                "Optimize diagram",
+                IC.dots,
+                () => {
+                    closeAllDropdowns();
+                    options.optimizeButton?.click();
+                },
+            ]);
+        }
+        if (options.asciiButton) {
+            items.push([
+                "ASCII view",
+                IC.dots,
+                () => {
+                    closeAllDropdowns();
+                    options.asciiButton?.click();
+                },
+            ]);
+        }
+        items.push([
+            "Keyboard shortcuts…",
+            IC.keyboard,
+            () => {
+                closeAllDropdowns();
+                shortcutsModal.classList.remove("hidden");
+            },
+        ]);
+        for (const [label, icon, action] of items) {
+            const btn = document.createElement("button");
+            btn.className = "drop-item";
+            btn.innerHTML = `<span class="di-check"></span><span class="di-icon">${icon}</span><span>${label}</span>`;
+            btn.addEventListener("click", action);
+            moreMenuEl.appendChild(btn);
+        }
+    }
+    btnTopMore.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+    });
+    btnTopMore.addEventListener("click", () => {
+        if (openDropdown === moreMenuEl) {
+            closeAllDropdowns();
+        }
+        else {
+            buildMoreMenu();
+            showDropdown(moreMenuEl, btnTopMore, "right");
+        }
+    });
+    // ── Action bar ─────────────────────────────────────────────────────────────
+    function updateActionBar() {
+        btnUndo.disabled = !editor.canUndo();
+        btnRedo.disabled = !editor.canRedo();
+        btnDelete.disabled = selectedIds.length === 0;
+        btnDuplicate.disabled = selectedIds.length === 0;
+    }
+    updateActionBar();
+    btnUndo.addEventListener("click", () => {
+        editor.undo();
+        collapseOnMobile(hudTopCenter);
+    });
+    btnRedo.addEventListener("click", () => {
+        editor.redo();
+        collapseOnMobile(hudTopCenter);
+    });
+    btnDelete.addEventListener("click", () => {
+        editor.deleteSelected();
+        collapseOnMobile(hudTopCenter);
+    });
+    btnDuplicate.addEventListener("click", () => {
+        editor.duplicate();
+        collapseOnMobile(hudTopCenter);
+    });
+    btnAutoLayout.addEventListener("click", () => {
+        editor.autoLayout();
+        collapseOnMobile(hudTopCenter);
+    });
+    // ── Label position menu ────────────────────────────────────────────────────
+    function buildLabelPosMenu(sourceId, sourceType) {
+        labelPosMenuEl.innerHTML = "";
+        for (const pos of getValidLabelPositions(sourceType)) {
+            const btn = document.createElement("button");
+            btn.className = "drop-item";
+            btn.textContent = POSITION_LABELS[pos];
+            btn.addEventListener("click", () => {
+                editor.setLabelPosition(sourceId, pos);
+                closeAllDropdowns();
+            });
+            labelPosMenuEl.appendChild(btn);
+        }
+    }
+    // ── Contextual quick-add toolbar ───────────────────────────────────────────
+    function buildCtxToolbar(sourceId, sourceType) {
+        ctxToolbar.innerHTML = "";
+        const isAnnotation = sourceType === "textAnnotation";
+        const canAddElements = !isAnnotation && sourceType !== "endEvent";
+        // Delete and Duplicate buttons always present
+        const dupBtn = document.createElement("button");
+        dupBtn.className = "hud-btn";
+        dupBtn.innerHTML = IC.duplicate;
+        dupBtn.title = "Duplicate (Ctrl+D)";
+        dupBtn.addEventListener("click", () => {
+            editor.duplicate();
+            hideCtxToolbar();
+        });
+        ctxToolbar.appendChild(dupBtn);
+        const delBtn = document.createElement("button");
+        delBtn.className = "hud-btn";
+        delBtn.innerHTML = IC.trash;
+        delBtn.title = "Delete (Del)";
+        delBtn.addEventListener("click", () => {
+            editor.deleteSelected();
+            hideCtxToolbar();
+        });
+        ctxToolbar.appendChild(delBtn);
+        if (canAddElements) {
+            const sep = document.createElement("div");
+            sep.className = "hud-sep";
+            ctxToolbar.appendChild(sep);
+        }
+        if (canAddElements) {
+            const arrowBtn = document.createElement("button");
+            arrowBtn.className = "hud-btn";
+            arrowBtn.innerHTML = IC.arrow;
+            arrowBtn.title = "Connect to element (click target)";
+            arrowBtn.addEventListener("click", () => {
+                editor.startConnectionFrom(sourceId);
+                hideCtxToolbar();
+            });
+            ctxToolbar.appendChild(arrowBtn);
+            const sep = document.createElement("div");
+            sep.className = "hud-sep";
+            ctxToolbar.appendChild(sep);
+            for (const opt of CTX_OPTIONS) {
+                if ((sourceType === "exclusiveGateway" ||
+                    sourceType === "parallelGateway" ||
+                    sourceType === "inclusiveGateway" ||
+                    sourceType === "eventBasedGateway") &&
+                    opt.type === "exclusiveGateway")
+                    continue;
+                const btn = document.createElement("button");
+                btn.className = "hud-btn";
+                btn.innerHTML = opt.icon;
+                btn.title = opt.title;
+                btn.addEventListener("click", () => {
+                    editor.addConnectedElement(sourceId, opt.type);
+                    closeAllDropdowns();
+                });
+                ctxToolbar.appendChild(btn);
+            }
+        }
+        // Color swatches and annotation button for non-annotation flow elements
+        if (!isAnnotation) {
+            if (ctxToolbar.children.length > 0) {
+                const sep = document.createElement("div");
+                sep.className = "hud-sep";
+                ctxToolbar.appendChild(sep);
+            }
+            // Get current shape color
+            const defs = editor.getDefinitions();
+            const diShape = defs?.diagrams[0]?.plane.shapes.find((s) => s.bpmnElement === sourceId);
+            const currentColor = diShape ? readDiColor(diShape.unknownAttributes) : {};
+            const currentFill = currentColor.fill;
+            const singleSwatch = document.createElement("button");
+            singleSwatch.className = currentFill
+                ? "bpmnkit-color-swatch active"
+                : "bpmnkit-color-swatch bpmnkit-color-swatch--default";
+            if (currentFill) {
+                singleSwatch.style.background = currentFill;
+                const palette = COLOR_PALETTE.find((p) => p.fill === currentFill);
+                if (palette)
+                    singleSwatch.style.outlineColor = palette.stroke;
+            }
+            singleSwatch.title = "Color (click for options)";
+            singleSwatch.addEventListener("click", () => showColorPicker(singleSwatch, sourceId, currentFill));
+            ctxToolbar.appendChild(singleSwatch);
+            // Add annotation button
+            const annotBtn = document.createElement("button");
+            annotBtn.className = "hud-btn";
+            annotBtn.innerHTML = IC.textAnnotation;
+            annotBtn.title = "Add text annotation";
+            annotBtn.addEventListener("click", () => {
+                editor.createAnnotationFor(sourceId);
+                hideCtxToolbar();
+            });
+            ctxToolbar.appendChild(annotBtn);
+            if (options.onAskAi) {
+                const aiSep = document.createElement("div");
+                aiSep.className = "hud-sep";
+                ctxToolbar.appendChild(aiSep);
+                const aiBtn = document.createElement("button");
+                aiBtn.className = "hud-btn ctx-ask-ai-btn";
+                aiBtn.innerHTML = IC.sparkle;
+                aiBtn.title = "Ask AI to continue from this element";
+                aiBtn.addEventListener("click", () => options.onAskAi?.());
+                ctxToolbar.appendChild(aiBtn);
+            }
+        }
+    }
+    // ── Configure toolbar ──────────────────────────────────────────────────────
+    function buildCfgToolbar(sourceId, sourceType) {
+        cfgToolbar.innerHTML = "";
+        const eGroup = getElementGroup(sourceType);
+        const group = eGroup ? GROUPS.find((g) => g.id === eGroup.id) : undefined;
+        if (group && group.items.length > 1) {
+            const currentItem = group.items.find((i) => i.type === sourceType);
+            const typeBtn = document.createElement("button");
+            typeBtn.className = "hud-btn active";
+            typeBtn.innerHTML = currentItem?.icon ?? group.groupIcon;
+            typeBtn.title = `${currentItem?.title ?? group.title} (click to change)`;
+            typeBtn.addEventListener("click", () => showTypePicker(typeBtn, group, sourceId, sourceType));
+            cfgToolbar.appendChild(typeBtn);
+        }
+        if (EXTERNAL_LABEL_TYPES.has(sourceType)) {
+            if (cfgToolbar.children.length > 0) {
+                const sep = document.createElement("div");
+                sep.className = "hud-sep";
+                cfgToolbar.appendChild(sep);
+            }
+            const labelBtn = document.createElement("button");
+            labelBtn.className = "hud-btn";
+            labelBtn.innerHTML = IC.labelPos;
+            labelBtn.title = "Label position";
+            labelBtn.addEventListener("pointerdown", (e) => {
+                e.stopPropagation();
+            });
+            labelBtn.addEventListener("click", () => {
+                if (openDropdown === labelPosMenuEl) {
+                    closeAllDropdowns();
+                }
+                else {
+                    buildLabelPosMenu(sourceId, sourceType);
+                    showDropdown(labelPosMenuEl, labelBtn, "above");
+                }
+            });
+            cfgToolbar.appendChild(labelBtn);
+        }
+        if (sourceType === "callActivity") {
+            const processId = getCallActivityProcessId(sourceId);
+            if (processId) {
+                if (cfgToolbar.children.length > 0)
+                    cfgToolbar.append(hudSep());
+                const allProcs = options.getAvailableProcesses?.() ?? [];
+                const name = allProcs.find((p) => p.id === processId)?.name ?? processId;
+                const navBtn = document.createElement("button");
+                navBtn.className = "ref-link-btn";
+                navBtn.textContent = `${name} \u2197`;
+                navBtn.title = `Open process: ${processId}`;
+                navBtn.addEventListener("click", () => options.openProcess?.(processId));
+                cfgToolbar.appendChild(navBtn);
+                const unlinkBtn = document.createElement("button");
+                unlinkBtn.className = "hud-btn";
+                unlinkBtn.title = "Unlink process";
+                unlinkBtn.textContent = "\u00d7";
+                unlinkBtn.addEventListener("click", () => clearCallActivityProcess(sourceId));
+                cfgToolbar.appendChild(unlinkBtn);
+            }
+            else if (options.getAvailableProcesses) {
+                if (cfgToolbar.children.length > 0)
+                    cfgToolbar.append(hudSep());
+                const linkBtn = document.createElement("button");
+                linkBtn.className = "ref-link-btn";
+                linkBtn.textContent = "Link process \u25be";
+                linkBtn.addEventListener("pointerdown", (e) => e.stopPropagation());
+                linkBtn.addEventListener("click", () => {
+                    if (openDropdown === refMenuEl) {
+                        closeAllDropdowns();
+                        return;
+                    }
+                    refMenuEl.innerHTML = "";
+                    const currentIds = new Set((editor.getDefinitions()?.processes ?? []).map((p) => p.id));
+                    const procs = (options.getAvailableProcesses?.() ?? []).filter((p) => !currentIds.has(p.id));
+                    for (const proc of procs) {
+                        const btn = document.createElement("button");
+                        btn.className = "drop-item";
+                        btn.textContent = proc.name ?? proc.id;
+                        btn.title = proc.id;
+                        btn.addEventListener("click", () => {
+                            setCallActivityProcess(sourceId, proc.id);
+                            closeAllDropdowns();
+                        });
+                        refMenuEl.appendChild(btn);
+                    }
+                    if (options.createProcess) {
+                        if (procs.length > 0) {
+                            const sep = document.createElement("div");
+                            sep.className = "drop-sep";
+                            refMenuEl.appendChild(sep);
+                        }
+                        const newBtn = document.createElement("button");
+                        newBtn.className = "drop-item";
+                        newBtn.textContent = "New process\u2026";
+                        newBtn.addEventListener("click", () => {
+                            closeAllDropdowns();
+                            showHudInputModal("New process name", "New Process", (newName) => {
+                                options.createProcess?.(newName, (pid) => setCallActivityProcess(sourceId, pid));
+                            });
+                        });
+                        refMenuEl.appendChild(newBtn);
+                    }
+                    if (procs.length === 0 && !options.createProcess) {
+                        const empty = document.createElement("div");
+                        empty.className = "drop-label";
+                        empty.textContent = "No processes open";
+                        refMenuEl.appendChild(empty);
+                    }
+                    showDropdown(refMenuEl, linkBtn, "above");
+                });
+                cfgToolbar.appendChild(linkBtn);
+            }
+        }
+        if (sourceType === "userTask") {
+            const formId = getUserTaskFormId(sourceId);
+            if (formId) {
+                if (cfgToolbar.children.length > 0)
+                    cfgToolbar.append(hudSep());
+                const forms = options.getAvailableForms?.() ?? [];
+                const name = forms.find((f) => f.id === formId)?.name ?? formId;
+                const navBtn = document.createElement("button");
+                navBtn.className = "ref-link-btn";
+                navBtn.textContent = `${name} \u2197`;
+                navBtn.title = `Open form: ${formId}`;
+                navBtn.addEventListener("click", () => options.openForm?.(formId));
+                cfgToolbar.appendChild(navBtn);
+                const unlinkBtn = document.createElement("button");
+                unlinkBtn.className = "hud-btn";
+                unlinkBtn.title = "Unlink form";
+                unlinkBtn.textContent = "\u00d7";
+                unlinkBtn.addEventListener("click", () => clearUserTaskForm(sourceId));
+                cfgToolbar.appendChild(unlinkBtn);
+            }
+            else if (options.getAvailableForms) {
+                if (cfgToolbar.children.length > 0)
+                    cfgToolbar.append(hudSep());
+                const linkBtn = document.createElement("button");
+                linkBtn.className = "ref-link-btn";
+                linkBtn.textContent = "Link form \u25be";
+                linkBtn.addEventListener("pointerdown", (e) => e.stopPropagation());
+                linkBtn.addEventListener("click", () => {
+                    if (openDropdown === refMenuEl) {
+                        closeAllDropdowns();
+                        return;
+                    }
+                    refMenuEl.innerHTML = "";
+                    const forms = options.getAvailableForms?.() ?? [];
+                    for (const form of forms) {
+                        const btn = document.createElement("button");
+                        btn.className = "drop-item";
+                        btn.textContent = form.name ?? form.id;
+                        btn.title = form.id;
+                        btn.addEventListener("click", () => {
+                            setUserTaskForm(sourceId, form.id);
+                            closeAllDropdowns();
+                        });
+                        refMenuEl.appendChild(btn);
+                    }
+                    if (forms.length === 0) {
+                        const empty = document.createElement("div");
+                        empty.className = "drop-label";
+                        empty.textContent = "No forms open";
+                        refMenuEl.appendChild(empty);
+                    }
+                    showDropdown(refMenuEl, linkBtn, "above");
+                });
+                cfgToolbar.appendChild(linkBtn);
+            }
+        }
+        if (sourceType === "businessRuleTask") {
+            const decisionId = getBizRuleDecisionId(sourceId);
+            if (decisionId) {
+                if (cfgToolbar.children.length > 0)
+                    cfgToolbar.append(hudSep());
+                const decisions = options.getAvailableDecisions?.() ?? [];
+                const name = decisions.find((d) => d.id === decisionId)?.name ?? decisionId;
+                const navBtn = document.createElement("button");
+                navBtn.className = "ref-link-btn";
+                navBtn.textContent = `${name} \u2197`;
+                navBtn.title = `Open decision: ${decisionId}`;
+                navBtn.addEventListener("click", () => options.openDecision?.(decisionId));
+                cfgToolbar.appendChild(navBtn);
+                const unlinkBtn = document.createElement("button");
+                unlinkBtn.className = "hud-btn";
+                unlinkBtn.title = "Unlink decision";
+                unlinkBtn.textContent = "\u00d7";
+                unlinkBtn.addEventListener("click", () => clearBizRuleDecision(sourceId));
+                cfgToolbar.appendChild(unlinkBtn);
+            }
+            else if (options.getAvailableDecisions) {
+                if (cfgToolbar.children.length > 0)
+                    cfgToolbar.append(hudSep());
+                const linkBtn = document.createElement("button");
+                linkBtn.className = "ref-link-btn";
+                linkBtn.textContent = "Link decision \u25be";
+                linkBtn.addEventListener("pointerdown", (e) => e.stopPropagation());
+                linkBtn.addEventListener("click", () => {
+                    if (openDropdown === refMenuEl) {
+                        closeAllDropdowns();
+                        return;
+                    }
+                    refMenuEl.innerHTML = "";
+                    const decisions = options.getAvailableDecisions?.() ?? [];
+                    for (const dec of decisions) {
+                        const btn = document.createElement("button");
+                        btn.className = "drop-item";
+                        btn.textContent = dec.name ?? dec.id;
+                        btn.title = dec.id;
+                        btn.addEventListener("click", () => {
+                            setBizRuleDecision(sourceId, dec.id);
+                            closeAllDropdowns();
+                        });
+                        refMenuEl.appendChild(btn);
+                    }
+                    if (decisions.length === 0) {
+                        const empty = document.createElement("div");
+                        empty.className = "drop-label";
+                        empty.textContent = "No decisions open";
+                        refMenuEl.appendChild(empty);
+                    }
+                    showDropdown(refMenuEl, linkBtn, "above");
+                });
+                cfgToolbar.appendChild(linkBtn);
+            }
+        }
+    }
+    function getCallActivityProcessId(id) {
+        const defs = editor.getDefinitions();
+        if (!defs)
+            return null;
+        for (const process of defs.processes) {
+            const el = process.flowElements.find((e) => e.id === id);
+            if (!el)
+                continue;
+            for (const ext of el.extensionElements) {
+                const ln = ext.name.includes(":") ? ext.name.slice(ext.name.indexOf(":") + 1) : ext.name;
+                if (ln === "calledElement")
+                    return ext.attributes.processId ?? null;
+            }
+        }
+        return null;
+    }
+    function getUserTaskFormId(id) {
+        const defs = editor.getDefinitions();
+        if (!defs)
+            return null;
+        for (const process of defs.processes) {
+            const el = process.flowElements.find((e) => e.id === id);
+            if (!el)
+                continue;
+            for (const ext of el.extensionElements) {
+                const ln = ext.name.includes(":") ? ext.name.slice(ext.name.indexOf(":") + 1) : ext.name;
+                if (ln === "formDefinition")
+                    return ext.attributes.formId ?? null;
+            }
+        }
+        return null;
+    }
+    function getBizRuleDecisionId(id) {
+        const defs = editor.getDefinitions();
+        if (!defs)
+            return null;
+        for (const process of defs.processes) {
+            const el = process.flowElements.find((e) => e.id === id);
+            if (!el)
+                continue;
+            for (const ext of el.extensionElements) {
+                const ln = ext.name.includes(":") ? ext.name.slice(ext.name.indexOf(":") + 1) : ext.name;
+                if (ln === "calledDecision")
+                    return ext.attributes.decisionId ?? null;
+            }
+        }
+        return null;
+    }
+    function setCallActivityProcess(elementId, processId) {
+        editor.applyChange((defs) => ({
+            ...defs,
+            processes: defs.processes.map((proc) => ({
+                ...proc,
+                flowElements: proc.flowElements.map((el) => {
+                    if (el.id !== elementId)
+                        return el;
+                    const otherExts = el.extensionElements.filter((x) => {
+                        const ln = x.name.includes(":") ? x.name.slice(x.name.indexOf(":") + 1) : x.name;
+                        return ln !== "calledElement";
+                    });
+                    return {
+                        ...el,
+                        extensionElements: [
+                            ...otherExts,
+                            {
+                                name: "zeebe:calledElement",
+                                attributes: { processId, propagateAllChildVariables: "false" },
+                                children: [],
+                            },
+                        ],
+                    };
+                }),
+            })),
+        }));
+    }
+    function setUserTaskForm(elementId, formId) {
+        editor.applyChange((defs) => ({
+            ...defs,
+            processes: defs.processes.map((proc) => ({
+                ...proc,
+                flowElements: proc.flowElements.map((el) => {
+                    if (el.id !== elementId)
+                        return el;
+                    const otherExts = el.extensionElements.filter((x) => {
+                        const ln = x.name.includes(":") ? x.name.slice(x.name.indexOf(":") + 1) : x.name;
+                        return ln !== "formDefinition" && ln !== "userTask";
+                    });
+                    return {
+                        ...el,
+                        extensionElements: [
+                            ...otherExts,
+                            {
+                                name: "zeebe:formDefinition",
+                                attributes: { formId },
+                                children: [],
+                            },
+                        ],
+                    };
+                }),
+            })),
+        }));
+    }
+    function setBizRuleDecision(elementId, decisionId) {
+        editor.applyChange((defs) => ({
+            ...defs,
+            processes: defs.processes.map((proc) => ({
+                ...proc,
+                flowElements: proc.flowElements.map((el) => {
+                    if (el.id !== elementId)
+                        return el;
+                    const otherExts = el.extensionElements.filter((x) => {
+                        const ln = x.name.includes(":") ? x.name.slice(x.name.indexOf(":") + 1) : x.name;
+                        return ln !== "calledDecision";
+                    });
+                    return {
+                        ...el,
+                        extensionElements: [
+                            ...otherExts,
+                            {
+                                name: "zeebe:calledDecision",
+                                attributes: { decisionId, resultVariable: "result" },
+                                children: [],
+                            },
+                        ],
+                    };
+                }),
+            })),
+        }));
+    }
+    function clearCallActivityProcess(elementId) {
+        editor.applyChange((defs) => ({
+            ...defs,
+            processes: defs.processes.map((proc) => ({
+                ...proc,
+                flowElements: proc.flowElements.map((el) => {
+                    if (el.id !== elementId)
+                        return el;
+                    return {
+                        ...el,
+                        extensionElements: el.extensionElements.filter((x) => {
+                            const ln = x.name.includes(":") ? x.name.slice(x.name.indexOf(":") + 1) : x.name;
+                            return ln !== "calledElement";
+                        }),
+                    };
+                }),
+            })),
+        }));
+    }
+    function clearUserTaskForm(elementId) {
+        editor.applyChange((defs) => ({
+            ...defs,
+            processes: defs.processes.map((proc) => ({
+                ...proc,
+                flowElements: proc.flowElements.map((el) => {
+                    if (el.id !== elementId)
+                        return el;
+                    return {
+                        ...el,
+                        extensionElements: el.extensionElements.filter((x) => {
+                            const ln = x.name.includes(":") ? x.name.slice(x.name.indexOf(":") + 1) : x.name;
+                            return ln !== "formDefinition" && ln !== "userTask";
+                        }),
+                    };
+                }),
+            })),
+        }));
+    }
+    function clearBizRuleDecision(elementId) {
+        editor.applyChange((defs) => ({
+            ...defs,
+            processes: defs.processes.map((proc) => ({
+                ...proc,
+                flowElements: proc.flowElements.map((el) => {
+                    if (el.id !== elementId)
+                        return el;
+                    return {
+                        ...el,
+                        extensionElements: el.extensionElements.filter((x) => {
+                            const ln = x.name.includes(":") ? x.name.slice(x.name.indexOf(":") + 1) : x.name;
+                            return ln !== "calledDecision";
+                        }),
+                    };
+                }),
+            })),
+        }));
+    }
+    function positionCfgToolbar() {
+        if (dragActive || !ctxSourceId) {
+            cfgToolbar.style.display = "none";
+            return;
+        }
+        const bounds = editor.getShapeBounds(ctxSourceId);
+        if (!bounds) {
+            cfgToolbar.style.display = "none";
+            return;
+        }
+        const containerRect = editor.container.getBoundingClientRect();
+        const cx = bounds.x + bounds.width / 2 - containerRect.left;
+        cfgToolbar.style.left = `${cx}px`;
+        cfgToolbar.style.top = `${bounds.y - 10 - containerRect.top}px`;
+        cfgToolbar.style.display = cfgToolbar.children.length > 0 ? "flex" : "none";
+    }
+    function positionCtxToolbar() {
+        if (dragActive || !ctxSourceId) {
+            ctxToolbar.style.display = "none";
+            return;
+        }
+        const bounds = editor.getShapeBounds(ctxSourceId);
+        if (!bounds) {
+            ctxToolbar.style.display = "none";
+            return;
+        }
+        const containerRect = editor.container.getBoundingClientRect();
+        const cx = bounds.x + bounds.width / 2 - containerRect.left;
+        const top = bounds.y + bounds.height + 10 - containerRect.top;
+        ctxToolbar.style.left = `${cx}px`;
+        ctxToolbar.style.top = `${top}px`;
+        ctxToolbar.style.display = ctxToolbar.children.length > 0 ? "flex" : "none";
+    }
+    function showCtxToolbar(id, elemType) {
+        ctxSourceId = id;
+        buildCtxToolbar(id, elemType);
+        buildCfgToolbar(id, elemType);
+        positionCtxToolbar();
+        positionCfgToolbar();
+    }
+    function hideCtxToolbar() {
+        ctxSourceId = null;
+        ctxToolbar.style.display = "none";
+        cfgToolbar.style.display = "none";
+    }
+    // ── New-diagram onboarding overlay ─────────────────────────────────────────
+    function makeOnboardBtn(iconHtml, title, desc, extraClass, onClick) {
+        const btn = document.createElement("button");
+        btn.className = `bpmnkit-onboard-btn${extraClass ? ` ${extraClass}` : ""}`;
+        const iconEl = document.createElement("div");
+        iconEl.className = "bpmnkit-onboard-btn-icon";
+        iconEl.innerHTML = iconHtml;
+        const labelEl = document.createElement("div");
+        labelEl.className = "bpmnkit-onboard-btn-label";
+        const titleEl = document.createElement("p");
+        titleEl.className = "bpmnkit-onboard-btn-title";
+        titleEl.textContent = title;
+        const descEl = document.createElement("p");
+        descEl.className = "bpmnkit-onboard-btn-desc";
+        descEl.textContent = desc;
+        labelEl.append(titleEl, descEl);
+        btn.append(iconEl, labelEl);
+        if (onClick)
+            btn.addEventListener("click", onClick);
+        return btn;
+    }
+    const onboardEl = document.createElement("div");
+    onboardEl.id = "bpmnkit-empty-state";
+    onboardEl.style.display = "none";
+    const onboardInner = document.createElement("div");
+    onboardInner.className = "bpmnkit-onboard-inner";
+    const onboardHeader = document.createElement("div");
+    onboardHeader.className = "bpmnkit-onboard-header";
+    onboardHeader.innerHTML = `<p class="bpmnkit-onboard-title">How do you want to start?</p><p class="bpmnkit-onboard-sub">Choose an option to begin designing your process</p>`;
+    const onboardActions = document.createElement("div");
+    onboardActions.className = "bpmnkit-onboard-actions";
+    const scratchBtn = makeOnboardBtn(IC.startEvent, "Start from scratch", "Open an empty canvas with just a start event", undefined, () => {
+        hideOnboarding();
+        options.onStartFromScratch?.();
+    });
+    const DIAGRAM_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="2.5" cy="8" r="1.5"/><rect x="5.5" y="5.5" width="5" height="5" rx="1"/><circle cx="13.5" cy="8" r="1.5"/><line x1="4" y1="8" x2="5.5" y2="8"/><line x1="10.5" y1="8" x2="12" y2="8"/></svg>`;
+    const exampleBtn = makeOnboardBtn(DIAGRAM_ICON, "Generate example diagram", "Load a simple start → task → end flow to explore", undefined, () => {
+        hideOnboarding();
+        options.onGenerateExample?.();
+    });
+    const aiBtn = makeOnboardBtn(IC.sparkle, "Ask AI", "Describe your process and let AI build the diagram", "bpmnkit-onboard-btn--ai", () => {
+        hideOnboarding();
+        options.onStartFromScratch?.();
+        options.onAskAi?.();
+    });
+    onboardActions.append(scratchBtn, exampleBtn, aiBtn);
+    onboardInner.append(onboardHeader, onboardActions);
+    onboardEl.appendChild(onboardInner);
+    editor.container.appendChild(onboardEl);
+    let _diagramActive = false;
+    let _onboardingShown = false;
+    function showOnboarding() {
+        _onboardingShown = true;
+        onboardEl.style.display = "flex";
+        hudBottomCenter.style.display = "none";
+        for (const btn of Array.from(hudTopCenter.querySelectorAll("button"))) {
+            btn.disabled = true;
+        }
+    }
+    function hideOnboarding() {
+        _onboardingShown = false;
+        onboardEl.style.display = "none";
+        hudBottomCenter.style.display = "";
+        for (const btn of Array.from(hudTopCenter.querySelectorAll("button"))) {
+            btn.disabled = false;
+        }
+    }
+    function autoHideOnboarding() {
+        if (!_onboardingShown)
+            return;
+        const defs = editor.getDefinitions();
+        if (!defs)
+            return;
+        const proc = defs.processes[0];
+        if (!proc)
+            return;
+        const isEmpty = proc.flowElements.length <= 1 && proc.sequenceFlows.length === 0;
+        if (!isEmpty)
+            hideOnboarding();
+    }
+    function setActive(active) {
+        _diagramActive = active;
+        if (!active)
+            hideOnboarding();
+    }
+    function setSimulationActive(active) {
+        simBannerEl.classList.toggle("hidden", !active);
+        editor.container.classList.toggle("bpmnkit-sim-active", active);
+    }
+    // ── Editor event subscriptions ─────────────────────────────────────────────
+    editor.on("editor:select", (ids) => {
+        const prevSourceId = ctxSourceId;
+        selectedIds = ids;
+        updateActionBar();
+        if (ids.length === 1) {
+            const id = ids[0];
+            if (!id) {
+                hideCtxToolbar();
+                return;
+            }
+            const elemType = editor.getElementType(id);
+            if (elemType) {
+                showCtxToolbar(id, elemType);
+                // When a sequence flow is selected and the previous source was a gateway,
+                // notify the caller to focus the condition expression field.
+                if (elemType === "sequenceFlow" &&
+                    prevSourceId &&
+                    GATEWAY_TYPES.has(editor.getElementType(prevSourceId) ?? "")) {
+                    options.onGatewayEdgeCreated?.(id);
+                }
+            }
+            else {
+                hideCtxToolbar();
+            }
+        }
+        else {
+            hideCtxToolbar();
+        }
+    });
+    editor.on("viewport:change", (state) => {
+        currentScale = state.scale;
+        updateZoomDisplay();
+        positionCtxToolbar();
+        positionCfgToolbar();
+    });
+    editor.on("diagram:change", () => {
+        updateActionBar();
+        autoHideOnboarding();
+        if (ctxSourceId) {
+            const elemType = editor.getElementType(ctxSourceId);
+            if (elemType) {
+                buildCtxToolbar(ctxSourceId, elemType);
+                buildCfgToolbar(ctxSourceId, elemType);
+                positionCtxToolbar();
+                positionCfgToolbar();
+            }
+            else {
+                hideCtxToolbar();
+            }
+        }
+    });
+    editor.on("editor:tool", (tool) => {
+        updateToolActiveState(tool);
+    });
+    editor.on("editor:drag", (dragging) => {
+        dragActive = dragging;
+        if (dragging) {
+            cfgToolbar.style.display = "none";
+            ctxToolbar.style.display = "none";
+        }
+        else {
+            positionCfgToolbar();
+            positionCtxToolbar();
+        }
+    });
+    // ── Right-click context menu ────────────────────────────────────────────────
+    function makeCtxItem(icon, label, onClick) {
+        const btn = document.createElement("button");
+        btn.className = "drop-item";
+        btn.innerHTML = `<span class="di-check"></span><span class="di-icon">${icon}</span><span>${label}</span>`;
+        btn.addEventListener("click", onClick);
+        return btn;
+    }
+    function openCtxMenu(x, y) {
+        const containerRect = editor.container.getBoundingClientRect();
+        const relX = x - containerRect.left;
+        const relY = y - containerRect.top;
+        ctxMenuEl.style.top = `${relY}px`;
+        ctxMenuEl.style.left = `${relX}px`;
+        ctxMenuEl.style.right = "auto";
+        ctxMenuEl.style.bottom = "auto";
+        ctxMenuEl.classList.add("open");
+        openDropdown = ctxMenuEl;
+        // Clamp to container after render
+        requestAnimationFrame(() => {
+            const r = ctxMenuEl.getBoundingClientRect();
+            const cr = editor.container.getBoundingClientRect();
+            if (r.right > cr.right - 4)
+                ctxMenuEl.style.left = `${relX - r.width}px`;
+            if (r.bottom > cr.bottom - 4)
+                ctxMenuEl.style.top = `${relY - r.height}px`;
+        });
+    }
+    editor.container.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        ctxMenuEl.innerHTML = "";
+        const id = selectedIds[0];
+        if (!id) {
+            // Empty canvas — show canvas-level actions
+            ctxMenuEl.appendChild(makeCtxItem(IC.select, "Select all", () => {
+                editor.selectAll();
+                closeAllDropdowns();
+            }));
+            ctxMenuEl.appendChild(makeCtxItem(IC.duplicate, "Paste", () => {
+                editor.paste();
+                closeAllDropdowns();
+            }));
+            openCtxMenu(e.clientX, e.clientY);
+            return;
+        }
+        const elemType = editor.getElementType(id);
+        if (!elemType)
+            return;
+        if (elemType !== "sequenceFlow") {
+            ctxMenuEl.appendChild(makeCtxItem(IC.labelPos, "Edit label", () => {
+                editor.editLabel(id);
+                closeAllDropdowns();
+            }));
+            const sep = document.createElement("div");
+            sep.className = "drop-sep";
+            ctxMenuEl.appendChild(sep);
+        }
+        ctxMenuEl.appendChild(makeCtxItem(IC.duplicate, "Duplicate", () => {
+            editor.duplicate();
+            closeAllDropdowns();
+        }));
+        ctxMenuEl.appendChild(makeCtxItem(IC.trash, "Delete", () => {
+            editor.deleteSelected();
+            closeAllDropdowns();
+        }));
+        openCtxMenu(e.clientX, e.clientY);
+    });
+    // ── Element search (Ctrl+F) ─────────────────────────────────────────────────
+    let searchMatches = [];
+    let searchMatchIdx = 0;
+    function openSearch() {
+        searchBarEl.classList.remove("hidden");
+        searchInput.value = "";
+        searchCount.textContent = "";
+        searchInput.focus();
+    }
+    function closeSearch() {
+        searchBarEl.classList.add("hidden");
+        searchInput.value = "";
+        searchCount.textContent = "";
+        searchMatches = [];
+        searchMatchIdx = 0;
+        editor.setSelection([]);
+    }
+    function selectSearchMatch(id) {
+        editor.setSelection([id]);
+        editor.scrollToElement(id);
+    }
+    function updateSearchCount() {
+        if (searchMatches.length === 0) {
+            searchCount.textContent = searchInput.value.trim() ? "No matches" : "";
+        }
+        else {
+            searchCount.textContent = `${searchMatchIdx + 1} of ${searchMatches.length}`;
+        }
+    }
+    function runSearch() {
+        const q = searchInput.value.trim().toLowerCase();
+        if (!q) {
+            searchCount.textContent = "";
+            searchMatches = [];
+            editor.setSelection([]);
+            return;
+        }
+        const defs = editor.getDefinitions();
+        if (!defs)
+            return;
+        const ids = [];
+        for (const proc of defs.processes) {
+            for (const el of proc.flowElements) {
+                if (el.name?.toLowerCase().includes(q))
+                    ids.push(el.id);
+            }
+            for (const el of proc.textAnnotations) {
+                if (el.text?.toLowerCase().includes(q))
+                    ids.push(el.id);
+            }
+        }
+        searchMatches = ids;
+        searchMatchIdx = 0;
+        updateSearchCount();
+        const firstId = ids[0];
+        if (firstId) {
+            selectSearchMatch(firstId);
+        }
+        else {
+            editor.setSelection([]);
+        }
+    }
+    searchInput.addEventListener("input", runSearch);
+    searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            closeSearch();
+        }
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (searchMatches.length > 0) {
+                searchMatchIdx = (searchMatchIdx + 1) % searchMatches.length;
+                const nextId = searchMatches[searchMatchIdx];
+                updateSearchCount();
+                if (nextId)
+                    selectSearchMatch(nextId);
+            }
+        }
+    });
+    searchClose.addEventListener("click", closeSearch);
+    // ── Keyboard shortcuts: Ctrl+D duplicate, Ctrl+F search, Ctrl+Shift+? shortcuts ──
+    document.addEventListener("keydown", (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === "d") {
+            e.preventDefault();
+            editor.duplicate();
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === "f") {
+            e.preventDefault();
+            if (searchBarEl.classList.contains("hidden")) {
+                openSearch();
+            }
+            else {
+                closeSearch();
+            }
+        }
+        if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "?") {
+            e.preventDefault();
+            shortcutsModal.classList.remove("hidden");
+        }
+    });
+    // ── Close zoom widget on outside click ─────────────────────────────────────
+    document.addEventListener("pointerdown", (e) => {
+        if (zoomOpen && !hudBottomLeft.contains(e.target)) {
+            toggleZoomWidget();
+        }
+    });
+    return { setActive, showOnboarding, hideOnboarding, setSimulationActive };
+}
+//# sourceMappingURL=hud.js.map