@bpmnkit/plugins 0.0.8

package/dist/main-menu/index.js

@@ -0,0 +1,285 @@
+/**
+ * @bpmnkit/canvas-plugin-main-menu — main menu plugin for `@bpmnkit/canvas`.
+ *
+ * Adds a panel in the top-right corner of the canvas with an optional title
+ * and a menu button. The menu lets users switch between light, dark, and
+ * automatic (OS-preference) color themes. Supports drill-down navigation,
+ * dynamic items, and a programmatic API for title/items injection.
+ *
+ * @packageDocumentation
+ */
+import { injectMainMenuStyles } from "./css.js";
+export { MAIN_MENU_CSS, MAIN_MENU_STYLE_ID, injectMainMenuStyles } from "./css.js";
+const DOTS_ICON = '<svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3.5" cy="8" r="1.3"/><circle cx="8" cy="8" r="1.3"/><circle cx="12.5" cy="8" r="1.3"/></svg>';
+const CHECK_ICON = '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1.5,6 4.5,9 10.5,3"/></svg>';
+const MOON_ICON = '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M13 9.5a6 6 0 1 1-7.5-7.5 7 7 0 0 0 7.5 7.5z"/></svg>';
+const SUN_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="2.8"/><line x1="8" y1="1.5" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="14.5"/><line x1="1.5" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="14.5" y2="8"/><line x1="3.3" y1="3.3" x2="4.4" y2="4.4"/><line x1="11.6" y1="11.6" x2="12.7" y2="12.7"/><line x1="3.3" y1="12.7" x2="4.4" y2="11.6"/><line x1="11.6" y1="4.4" x2="12.7" y2="3.3"/></svg>';
+const AUTO_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="5.5"/><path d="M8 8V3.5"/><path d="M8 8l3.2 2"/></svg>';
+const BACK_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,8 10,13"/></svg>';
+const ARROW_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>';
+const THEMES = [
+    { value: "dark", label: "Dark", icon: MOON_ICON },
+    { value: "light", label: "Light", icon: SUN_ICON },
+    { value: "auto", label: "System", icon: AUTO_ICON },
+];
+/**
+ * Creates a main menu plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ */
+export function createMainMenuPlugin(options = {}) {
+    let dropdownEl = null;
+    let panelEl = null;
+    let titleEl = null;
+    let isOpen = false;
+    let navStack = [];
+    let dynamicItemsFn = null;
+    let currentTheme = "light";
+    let _setTheme = () => { };
+    const offPointerDown = { fn: (_e) => { } };
+    const api = {
+        setTitle(text) {
+            if (titleEl)
+                titleEl.textContent = text;
+        },
+        setDynamicItems(fn) {
+            dynamicItemsFn = fn;
+        },
+    };
+    function buildRootItems() {
+        const dynamic = dynamicItemsFn ? dynamicItemsFn() : [];
+        const staticItems = options.menuItems ?? [];
+        const themeSection = [
+            { type: "separator" },
+            {
+                type: "drill",
+                label: "Theme",
+                items: () => THEMES.map((t) => ({
+                    label: t.label,
+                    icon: t.icon,
+                    onClick: () => {
+                        currentTheme = t.value;
+                        _setTheme(t.value);
+                        closeDropdown();
+                    },
+                })),
+            },
+        ];
+        const beforeTheme = [...dynamic, ...staticItems];
+        return [...beforeTheme, ...themeSection];
+    }
+    function resolveItems(items) {
+        return typeof items === "function" ? items() : items;
+    }
+    function closeDropdown() {
+        dropdownEl?.classList.remove("open");
+        isOpen = false;
+    }
+    function buildLevelContent(dropdown) {
+        const slot = document.createElement("div");
+        slot.className = "bpmnkit-menu-level";
+        const level = navStack[navStack.length - 1];
+        if (!level)
+            return slot;
+        if (navStack.length > 1) {
+            const backRow = document.createElement("div");
+            backRow.className = "bpmnkit-menu-back-row";
+            const backBtn = document.createElement("button");
+            backBtn.className = "bpmnkit-menu-back-btn";
+            backBtn.type = "button";
+            backBtn.innerHTML = BACK_ICON;
+            backBtn.addEventListener("click", () => {
+                navStack.pop();
+                renderLevel(dropdown, "back");
+            });
+            const levelTitle = document.createElement("span");
+            levelTitle.className = "bpmnkit-menu-level-title";
+            levelTitle.textContent = level.title ?? "";
+            backRow.append(backBtn, levelTitle);
+            slot.appendChild(backRow);
+            const sep = document.createElement("div");
+            sep.className = "bpmnkit-menu-drop-sep";
+            slot.appendChild(sep);
+        }
+        for (const item of level.items) {
+            slot.appendChild(buildItemEl(item, dropdown));
+        }
+        return slot;
+    }
+    function renderLevel(dropdown, direction) {
+        const newSlot = buildLevelContent(dropdown);
+        if (direction === "initial") {
+            dropdown.textContent = "";
+            dropdown.appendChild(newSlot);
+            return;
+        }
+        const oldSlot = dropdown.querySelector(".bpmnkit-menu-level");
+        // Freeze width so the dropdown doesn't shrink/grow during animation
+        dropdown.style.minWidth = `${dropdown.offsetWidth}px`;
+        // Exit: absolutely positioned so it doesn't affect layout
+        if (oldSlot) {
+            oldSlot.style.cssText = "position:absolute;inset:0;pointer-events:none;z-index:0;";
+            oldSlot.classList.add(direction === "forward" ? "bpmnkit-menu-level--out-left" : "bpmnkit-menu-level--out-right");
+        }
+        // Enter: on top, drives height
+        newSlot.classList.add(direction === "forward" ? "bpmnkit-menu-level--in-right" : "bpmnkit-menu-level--in-left");
+        dropdown.appendChild(newSlot);
+        setTimeout(() => {
+            oldSlot?.remove();
+            newSlot.classList.remove("bpmnkit-menu-level--in-right", "bpmnkit-menu-level--in-left");
+            dropdown.style.minWidth = "";
+        }, 200);
+    }
+    function buildItemEl(item, dropdown) {
+        if ("type" in item && item.type === "separator") {
+            const sep = document.createElement("div");
+            sep.className = "bpmnkit-menu-drop-sep";
+            return sep;
+        }
+        if ("type" in item && item.type === "info") {
+            const row = document.createElement("div");
+            row.className = "bpmnkit-menu-info-row";
+            const textSpan = document.createElement("span");
+            textSpan.className = "bpmnkit-menu-info-text";
+            textSpan.textContent = item.text;
+            row.appendChild(textSpan);
+            if (item.actionLabel && item.onAction) {
+                const actionBtn = document.createElement("button");
+                actionBtn.className = "bpmnkit-menu-info-action";
+                actionBtn.type = "button";
+                actionBtn.textContent = item.actionLabel;
+                const onAction = item.onAction;
+                actionBtn.addEventListener("click", () => {
+                    closeDropdown();
+                    onAction();
+                });
+                row.appendChild(actionBtn);
+            }
+            return row;
+        }
+        if ("type" in item && item.type === "drill") {
+            const btn = document.createElement("button");
+            btn.className = "bpmnkit-menu-item";
+            btn.type = "button";
+            const checkSpan = document.createElement("span");
+            checkSpan.className = "bpmnkit-menu-item-check";
+            btn.appendChild(checkSpan);
+            const iconSpan = document.createElement("span");
+            iconSpan.className = "bpmnkit-menu-item-icon";
+            if (item.icon)
+                iconSpan.innerHTML = item.icon;
+            btn.appendChild(iconSpan);
+            const labelSpan = document.createElement("span");
+            labelSpan.className = "bpmnkit-menu-item-label";
+            labelSpan.textContent = item.label;
+            btn.appendChild(labelSpan);
+            const arrowSpan = document.createElement("span");
+            arrowSpan.className = "bpmnkit-menu-item-arrow";
+            arrowSpan.innerHTML = ARROW_ICON;
+            btn.appendChild(arrowSpan);
+            const drillItems = item.items;
+            btn.addEventListener("click", () => {
+                navStack.push({ title: item.label, items: resolveItems(drillItems) });
+                renderLevel(dropdown, "forward");
+            });
+            return btn;
+        }
+        // MenuAction
+        const action = item;
+        const btn = document.createElement("button");
+        btn.className = "bpmnkit-menu-item";
+        btn.type = "button";
+        const checkSpan = document.createElement("span");
+        checkSpan.className = "bpmnkit-menu-item-check";
+        // Show check mark for active theme when inside a drill level
+        const themeMatch = THEMES.find((t) => t.label === action.label);
+        if (themeMatch && themeMatch.value === currentTheme) {
+            checkSpan.innerHTML = CHECK_ICON;
+        }
+        btn.appendChild(checkSpan);
+        const iconSpan = document.createElement("span");
+        iconSpan.className = "bpmnkit-menu-item-icon";
+        if (action.icon)
+            iconSpan.innerHTML = action.icon;
+        btn.appendChild(iconSpan);
+        const labelSpan = document.createElement("span");
+        labelSpan.className = "bpmnkit-menu-item-label";
+        labelSpan.textContent = action.label;
+        btn.appendChild(labelSpan);
+        btn.addEventListener("click", () => {
+            closeDropdown();
+            action.onClick();
+        });
+        return btn;
+    }
+    return {
+        name: "main-menu",
+        api,
+        install(canvasApi) {
+            injectMainMenuStyles();
+            currentTheme = canvasApi.getTheme();
+            _setTheme = (t) => canvasApi.setTheme(t);
+            // ── Panel ────────────────────────────────────────────────────
+            const panel = document.createElement("div");
+            panel.className = "bpmnkit-main-menu-panel";
+            if (options.title) {
+                const title = document.createElement("span");
+                title.className = "bpmnkit-main-menu-title";
+                title.textContent = options.title;
+                panel.appendChild(title);
+                titleEl = title;
+                const sep = document.createElement("div");
+                sep.className = "bpmnkit-main-menu-sep";
+                panel.appendChild(sep);
+            }
+            const menuBtn = document.createElement("button");
+            menuBtn.className = "bpmnkit-menu-btn";
+            menuBtn.type = "button";
+            menuBtn.setAttribute("aria-label", "Main menu");
+            menuBtn.title = "Main menu";
+            menuBtn.innerHTML = DOTS_ICON;
+            panel.appendChild(menuBtn);
+            canvasApi.container.appendChild(panel);
+            panelEl = panel;
+            // ── Dropdown ─────────────────────────────────────────────────
+            const dropdown = document.createElement("div");
+            dropdown.className = "bpmnkit-menu-dropdown";
+            document.body.appendChild(dropdown);
+            dropdownEl = dropdown;
+            menuBtn.addEventListener("pointerdown", (e) => {
+                e.stopPropagation();
+            });
+            menuBtn.addEventListener("click", () => {
+                if (isOpen) {
+                    closeDropdown();
+                }
+                else {
+                    navStack = [{ items: buildRootItems() }];
+                    renderLevel(dropdown, "initial");
+                    const rect = menuBtn.getBoundingClientRect();
+                    dropdown.style.top = `${rect.bottom + 6}px`;
+                    dropdown.style.right = `${window.innerWidth - rect.right}px`;
+                    dropdown.style.left = "auto";
+                    dropdown.classList.add("open");
+                    isOpen = true;
+                }
+            });
+            offPointerDown.fn = (e) => {
+                if (isOpen && !dropdown.contains(e.target)) {
+                    closeDropdown();
+                }
+            };
+            document.addEventListener("pointerdown", offPointerDown.fn);
+        },
+        uninstall() {
+            document.removeEventListener("pointerdown", offPointerDown.fn);
+            dropdownEl?.remove();
+            dropdownEl = null;
+            panelEl?.remove();
+            panelEl = null;
+            titleEl = null;
+            isOpen = false;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/minimap/css.d.ts

@@ -0,0 +1,10 @@
+/** ID used to prevent duplicate style injection. */
+export declare const MINIMAP_STYLE_ID = "bpmnkit-minimap-styles-v1";
+/** CSS for the minimap plugin, injected once into `<head>`. */
+export declare const MINIMAP_CSS = "\n.bpmnkit-minimap {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  width: 160px;\n  height: 100px;\n  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.92));\n  border: 1px solid var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.12));\n  border-radius: 6px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n  cursor: crosshair;\n}\n.bpmnkit-minimap > svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.bpmnkit-minimap-shape {\n  fill: var(--bpmnkit-shape-stroke, #404040);\n  opacity: 0.45;\n}\n.bpmnkit-minimap-edge {\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 0.5;\n  fill: none;\n  opacity: 0.35;\n}\n.bpmnkit-minimap-viewport {\n  fill: var(--bpmnkit-viewport-fill, var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)));\n  stroke: var(--bpmnkit-viewport-stroke, var(--bpmnkit-accent, #1a56db));\n  stroke-width: 1;\n}\n";
+/**
+ * Injects the minimap stylesheet into `<head>` if not already present.
+ * Safe to call multiple times — only one `<style>` tag is ever inserted.
+ */
+export declare function injectMinimapStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/minimap/css.js

@@ -0,0 +1,54 @@
+/** ID used to prevent duplicate style injection. */
+export const MINIMAP_STYLE_ID = "bpmnkit-minimap-styles-v1";
+/** CSS for the minimap plugin, injected once into `<head>`. */
+export const MINIMAP_CSS = `
+.bpmnkit-minimap {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  width: 160px;
+  height: 100px;
+  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.92));
+  border: 1px solid var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  cursor: crosshair;
+}
+.bpmnkit-minimap > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.bpmnkit-minimap-shape {
+  fill: var(--bpmnkit-shape-stroke, #404040);
+  opacity: 0.45;
+}
+.bpmnkit-minimap-edge {
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 0.5;
+  fill: none;
+  opacity: 0.35;
+}
+.bpmnkit-minimap-viewport {
+  fill: var(--bpmnkit-viewport-fill, var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)));
+  stroke: var(--bpmnkit-viewport-stroke, var(--bpmnkit-accent, #1a56db));
+  stroke-width: 1;
+}
+`;
+/**
+ * Injects the minimap stylesheet into `<head>` if not already present.
+ * Safe to call multiple times — only one `<style>` tag is ever inserted.
+ */
+export function injectMinimapStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(MINIMAP_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = MINIMAP_STYLE_ID;
+    style.textContent = MINIMAP_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/minimap/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @bpmnkit/canvas-plugin-minimap — minimap navigation plugin for `@bpmnkit/canvas`.
+ *
+ * Adds a 160×100 overview panel in the bottom-right corner of the canvas.
+ * Clicking the minimap pans the main viewport to that position.
+ *
+ * ## Usage
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ * import { createMinimapPlugin } from "@bpmnkit/canvas-plugin-minimap";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,
+ *   plugins: [createMinimapPlugin()],
+ * });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export { Minimap } from "./minimap.js";
+export { MINIMAP_CSS, MINIMAP_STYLE_ID, injectMinimapStyles } from "./css.js";
+/**
+ * Creates a minimap plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ *
+ * @example
+ * ```typescript
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [createMinimapPlugin()],
+ * });
+ * ```
+ */
+export declare function createMinimapPlugin(): CanvasPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/minimap/index.js

@@ -0,0 +1,69 @@
+/**
+ * @bpmnkit/canvas-plugin-minimap — minimap navigation plugin for `@bpmnkit/canvas`.
+ *
+ * Adds a 160×100 overview panel in the bottom-right corner of the canvas.
+ * Clicking the minimap pans the main viewport to that position.
+ *
+ * ## Usage
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ * import { createMinimapPlugin } from "@bpmnkit/canvas-plugin-minimap";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,
+ *   plugins: [createMinimapPlugin()],
+ * });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import { injectMinimapStyles } from "./css.js";
+import { Minimap } from "./minimap.js";
+export { Minimap } from "./minimap.js";
+export { MINIMAP_CSS, MINIMAP_STYLE_ID, injectMinimapStyles } from "./css.js";
+/**
+ * Creates a minimap plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ *
+ * @example
+ * ```typescript
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [createMinimapPlugin()],
+ * });
+ * ```
+ */
+export function createMinimapPlugin() {
+    let minimap = null;
+    const unsubs = [];
+    return {
+        name: "minimap",
+        install(api) {
+            injectMinimapStyles();
+            minimap = new Minimap(api.container, (diagX, diagY) => {
+                const { scale } = api.getViewport();
+                api.setViewport({
+                    tx: api.svg.clientWidth / 2 - diagX * scale,
+                    ty: api.svg.clientHeight / 2 - diagY * scale,
+                });
+            });
+            unsubs.push(api.on("diagram:load", (defs) => {
+                minimap?.update(defs);
+            }), api.on("viewport:change", (state) => {
+                minimap?.syncViewport(state, api.svg.clientWidth, api.svg.clientHeight);
+            }), api.on("diagram:clear", () => {
+                minimap?.clear();
+            }));
+        },
+        uninstall() {
+            for (const off of unsubs)
+                off();
+            unsubs.length = 0;
+            minimap?.destroy();
+            minimap = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/minimap/minimap.d.ts

@@ -0,0 +1,35 @@
+import type { ViewportState } from "@bpmnkit/canvas";
+import type { BpmnDefinitions } from "@bpmnkit/core";
+/**
+ * A scaled-down overview of the BPMN diagram that shows the current viewport
+ * position as a highlighted rectangle.
+ *
+ * Clicking the minimap pans the canvas to that position.
+ */
+export declare class Minimap {
+    /** Invoked when the user clicks the minimap to request a viewport pan. */
+    private readonly _onNavigate;
+    private readonly _host;
+    private readonly _svg;
+    private readonly _shapesG;
+    private readonly _edgesG;
+    private readonly _viewportRect;
+    private _scale;
+    private _offsetX;
+    private _offsetY;
+    private readonly _mmW;
+    private readonly _mmH;
+    constructor(container: HTMLElement, 
+    /** Invoked when the user clicks the minimap to request a viewport pan. */
+    _onNavigate: (diagX: number, diagY: number) => void);
+    /** Updates the minimap with shapes and edges from a newly loaded diagram. */
+    update(defs: BpmnDefinitions): void;
+    /** Clears the minimap content. */
+    clear(): void;
+    /** Syncs the viewport indicator rectangle with the current pan/zoom state. */
+    syncViewport(state: ViewportState, svgWidth: number, svgHeight: number): void;
+    /** Removes the minimap from the DOM. */
+    destroy(): void;
+    private readonly _onClick;
+}
+//# sourceMappingURL=minimap.d.ts.map

package/dist/minimap/minimap.js

@@ -0,0 +1,166 @@
+const NS = "http://www.w3.org/2000/svg";
+function svgEl(tag) {
+    return document.createElementNS(NS, tag);
+}
+function attr(el, attrs) {
+    for (const [k, v] of Object.entries(attrs))
+        el.setAttribute(k, String(v));
+}
+/**
+ * A scaled-down overview of the BPMN diagram that shows the current viewport
+ * position as a highlighted rectangle.
+ *
+ * Clicking the minimap pans the canvas to that position.
+ */
+export class Minimap {
+    _onNavigate;
+    _host;
+    _svg;
+    _shapesG;
+    _edgesG;
+    _viewportRect;
+    // Minimap-space transform from diagram-space coordinates
+    _scale = 1;
+    _offsetX = 0;
+    _offsetY = 0;
+    // Minimap pixel dimensions
+    _mmW = 160;
+    _mmH = 100;
+    constructor(container, 
+    /** Invoked when the user clicks the minimap to request a viewport pan. */
+    _onNavigate) {
+        this._onNavigate = _onNavigate;
+        this._host = document.createElement("div");
+        this._host.className = "bpmnkit-minimap";
+        this._host.setAttribute("aria-hidden", "true");
+        this._svg = document.createElementNS(NS, "svg");
+        attr(this._svg, {
+            viewBox: `0 0 ${this._mmW} ${this._mmH}`,
+            preserveAspectRatio: "none",
+        });
+        this._host.appendChild(this._svg);
+        this._edgesG = svgEl("g");
+        this._shapesG = svgEl("g");
+        this._viewportRect = svgEl("rect");
+        attr(this._viewportRect, { class: "bpmnkit-minimap-viewport", rx: 1 });
+        this._svg.appendChild(this._edgesG);
+        this._svg.appendChild(this._shapesG);
+        this._svg.appendChild(this._viewportRect);
+        container.appendChild(this._host);
+        this._host.addEventListener("click", this._onClick);
+    }
+    /** Updates the minimap with shapes and edges from a newly loaded diagram. */
+    update(defs) {
+        this._edgesG.innerHTML = "";
+        this._shapesG.innerHTML = "";
+        const plane = defs.diagrams[0]?.plane;
+        if (!plane)
+            return;
+        // Compute diagram bounding box
+        let minX = Number.POSITIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (const s of plane.shapes) {
+            minX = Math.min(minX, s.bounds.x);
+            minY = Math.min(minY, s.bounds.y);
+            maxX = Math.max(maxX, s.bounds.x + s.bounds.width);
+            maxY = Math.max(maxY, s.bounds.y + s.bounds.height);
+        }
+        for (const e of plane.edges) {
+            for (const wp of e.waypoints) {
+                minX = Math.min(minX, wp.x);
+                minY = Math.min(minY, wp.y);
+                maxX = Math.max(maxX, wp.x);
+                maxY = Math.max(maxY, wp.y);
+            }
+        }
+        if (!Number.isFinite(minX))
+            return;
+        const padding = 8;
+        const dW = maxX - minX;
+        const dH = maxY - minY;
+        const scaleX = (this._mmW - padding * 2) / dW;
+        const scaleY = (this._mmH - padding * 2) / dH;
+        this._scale = Math.min(scaleX, scaleY);
+        this._offsetX = padding + (this._mmW - padding * 2 - dW * this._scale) / 2 - minX * this._scale;
+        this._offsetY = padding + (this._mmH - padding * 2 - dH * this._scale) / 2 - minY * this._scale;
+        // Render simplified shapes (just rects/circles)
+        for (const s of plane.shapes) {
+            const x = s.bounds.x * this._scale + this._offsetX;
+            const y = s.bounds.y * this._scale + this._offsetY;
+            const w = s.bounds.width * this._scale;
+            const h = s.bounds.height * this._scale;
+            // Approximate shape type from size: very small square → event or gateway
+            const isSmall = w < 10;
+            if (isSmall) {
+                const circle = svgEl("circle");
+                attr(circle, {
+                    cx: x + w / 2,
+                    cy: y + h / 2,
+                    r: Math.max(w / 2, 2),
+                    class: "bpmnkit-minimap-shape",
+                });
+                this._shapesG.appendChild(circle);
+            }
+            else {
+                const rect = svgEl("rect");
+                attr(rect, {
+                    x,
+                    y,
+                    width: Math.max(w, 1),
+                    height: Math.max(h, 1),
+                    rx: 1,
+                    class: "bpmnkit-minimap-shape",
+                });
+                this._shapesG.appendChild(rect);
+            }
+        }
+        // Render simplified edges
+        for (const e of plane.edges) {
+            if (e.waypoints.length < 2)
+                continue;
+            const pts = e.waypoints
+                .map((wp) => `${wp.x * this._scale + this._offsetX},${wp.y * this._scale + this._offsetY}`)
+                .join(" ");
+            const poly = svgEl("polyline");
+            attr(poly, { points: pts, class: "bpmnkit-minimap-edge" });
+            this._edgesG.appendChild(poly);
+        }
+    }
+    /** Clears the minimap content. */
+    clear() {
+        this._edgesG.innerHTML = "";
+        this._shapesG.innerHTML = "";
+        attr(this._viewportRect, { x: 0, y: 0, width: 0, height: 0 });
+    }
+    /** Syncs the viewport indicator rectangle with the current pan/zoom state. */
+    syncViewport(state, svgWidth, svgHeight) {
+        // Visible diagram area in diagram coordinates
+        const left = -state.tx / state.scale;
+        const top = -state.ty / state.scale;
+        const visW = svgWidth / state.scale;
+        const visH = svgHeight / state.scale;
+        // Map to minimap coordinates
+        const mx = left * this._scale + this._offsetX;
+        const my = top * this._scale + this._offsetY;
+        const mw = visW * this._scale;
+        const mh = visH * this._scale;
+        attr(this._viewportRect, { x: mx, y: my, width: Math.max(mw, 2), height: Math.max(mh, 2) });
+    }
+    /** Removes the minimap from the DOM. */
+    destroy() {
+        this._host.removeEventListener("click", this._onClick);
+        this._host.remove();
+    }
+    _onClick = (e) => {
+        const rect = this._host.getBoundingClientRect();
+        const mmX = e.clientX - rect.left;
+        const mmY = e.clientY - rect.top;
+        // Convert minimap coordinates to diagram coordinates
+        const diagX = (mmX - this._offsetX) / this._scale;
+        const diagY = (mmY - this._offsetY) / this._scale;
+        this._onNavigate(diagX, diagY);
+    };
+}
+//# sourceMappingURL=minimap.js.map