@bpmnkit/plugins 0.0.8

package/dist/token-highlight/css.d.ts

@@ -0,0 +1,2 @@
+export declare function injectTokenHighlightStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/token-highlight/css.js

@@ -0,0 +1,81 @@
+const STYLE_ID = "bpmnkit-token-highlight-v1";
+const CSS = `
+@keyframes bpmnkit-token-pulse {
+  0%, 100% { filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.9)); }
+  50%       { filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.25)); }
+}
+@keyframes bpmnkit-token-flow {
+  to { stroke-dashoffset: -12; }
+}
+
+/* ── Active shapes (token is here) ─────────────────────────────────────── */
+.bpmnkit-token-active {
+  animation: bpmnkit-token-pulse 1.4s ease-in-out infinite;
+}
+.bpmnkit-token-active .bpmnkit-shape-body,
+.bpmnkit-token-active .bpmnkit-event-body,
+.bpmnkit-token-active .bpmnkit-end-body,
+.bpmnkit-token-active .bpmnkit-gw-body {
+  stroke: #f59e0b !important;
+  stroke-width: 2.5 !important;
+  fill: rgba(245, 158, 11, 0.12) !important;
+}
+
+/* ── Visited shapes (token has passed through) ──────────────────────────── */
+.bpmnkit-token-visited .bpmnkit-shape-body,
+.bpmnkit-token-visited .bpmnkit-event-body,
+.bpmnkit-token-visited .bpmnkit-end-body,
+.bpmnkit-token-visited .bpmnkit-gw-body {
+  stroke: #10b981 !important;
+  stroke-width: 2 !important;
+  fill: rgba(16, 185, 129, 0.08) !important;
+}
+
+/* ── Active edges (token is moving along this flow) ─────────────────────── */
+.bpmnkit-token-edge-active .bpmnkit-edge-path {
+  stroke: #f59e0b !important;
+  stroke-width: 2.5 !important;
+  stroke-dasharray: 8 4;
+  animation: bpmnkit-token-flow 0.5s linear infinite;
+}
+.bpmnkit-token-edge-active .bpmnkit-arrow-fill {
+  fill: #f59e0b !important;
+}
+
+/* ── Visited edges ───────────────────────────────────────────────────────── */
+.bpmnkit-token-edge-visited .bpmnkit-edge-path {
+  stroke: #10b981 !important;
+  stroke-width: 2 !important;
+}
+.bpmnkit-token-edge-visited .bpmnkit-arrow-fill {
+  fill: #10b981 !important;
+}
+
+/* ── Error shapes (gateway with no matching condition) ───────────────────── */
+@keyframes bpmnkit-token-error-pulse {
+  0%, 100% { filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.95)); }
+  50%       { filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.3)); }
+}
+.bpmnkit-token-error {
+  animation: bpmnkit-token-error-pulse 0.9s ease-in-out 3;
+}
+.bpmnkit-token-error .bpmnkit-shape-body,
+.bpmnkit-token-error .bpmnkit-event-body,
+.bpmnkit-token-error .bpmnkit-end-body,
+.bpmnkit-token-error .bpmnkit-gw-body {
+  stroke: #ef4444 !important;
+  stroke-width: 2.5 !important;
+  fill: rgba(239, 68, 68, 0.12) !important;
+}
+`;
+export function injectTokenHighlightStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(STYLE_ID) !== null)
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/token-highlight/index.d.ts

@@ -0,0 +1,44 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+/**
+ * Minimal interface satisfied by `ProcessInstance` from `@bpmnkit/engine`.
+ * Using structural typing keeps this plugin free of an engine dependency.
+ */
+export interface InstanceLike {
+    onChange(callback: (event: Record<string, unknown>) => void): () => void;
+}
+export interface TokenHighlightApi {
+    /**
+     * Subscribe to a `ProcessInstance` and automatically update highlights as
+     * the engine emits events. Returns an unsubscribe function.
+     *
+     * @example
+     * ```typescript
+     * const highlight = createTokenHighlightPlugin();
+     * const canvas = new BpmnCanvas({ container, plugins: [highlight] });
+     * canvas.load(xml);
+     *
+     * const instance = engine.start("Process_1", { amount: 100 });
+     * const stop = highlight.api.trackInstance(instance);
+     * // later: stop() to detach
+     * ```
+     */
+    trackInstance(instance: InstanceLike): () => void;
+    /**
+     * Manually set the full list of element IDs that currently hold a token.
+     * Replaces any previously active set.
+     */
+    setActive(elementIds: string[]): void;
+    /**
+     * Mark additional element IDs as visited (token has passed through).
+     * Additive — does not clear previously visited elements.
+     */
+    addVisited(elementIds: string[]): void;
+    /** Mark an element as failed (e.g. exclusive gateway with no matching condition). Shown in red. */
+    setError(elementId: string): void;
+    /** Remove all token highlights from the canvas. */
+    clear(): void;
+}
+export declare function createTokenHighlightPlugin(): CanvasPlugin & {
+    api: TokenHighlightApi;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/token-highlight/index.js

@@ -0,0 +1,164 @@
+import { injectTokenHighlightStyles } from "./css";
+// ── Plugin factory ─────────────────────────────────────────────────────────────
+export function createTokenHighlightPlugin() {
+    let canvasApi = null;
+    /** Element IDs that currently hold a live token. */
+    const activeIds = new Set();
+    /** Element IDs that a token has already passed through. */
+    const visitedIds = new Set();
+    /** Element IDs that have failed (e.g. unmatched gateway condition). */
+    const errorIds = new Set();
+    /** flowId → { sourceRef, targetRef } — populated from diagram:load/change. */
+    const flowIndex = new Map();
+    const unsubs = [];
+    // ── Helpers ──────────────────────────────────────────────────────────────
+    function shapeEl(id) {
+        const el = canvasApi?.viewportEl.querySelector(`[data-bpmnkit-id="${id}"]`);
+        return el instanceof SVGGElement ? el : undefined;
+    }
+    function edgeEl(id) {
+        const el = canvasApi?.viewportEl.querySelector(`[data-bpmnkit-id="${id}"]`);
+        return el instanceof SVGGElement ? el : undefined;
+    }
+    function applyHighlights() {
+        const api = canvasApi;
+        if (api === null)
+            return;
+        // Strip all plugin classes — query the viewport so subprocess children are included
+        const vp = api.viewportEl;
+        for (const el of vp.querySelectorAll(".bpmnkit-token-active,.bpmnkit-token-visited,.bpmnkit-token-error")) {
+            el.classList.remove("bpmnkit-token-active", "bpmnkit-token-visited", "bpmnkit-token-error");
+        }
+        for (const el of vp.querySelectorAll(".bpmnkit-token-edge-active,.bpmnkit-token-edge-visited")) {
+            el.classList.remove("bpmnkit-token-edge-active", "bpmnkit-token-edge-visited");
+        }
+        // Visited shapes
+        for (const id of visitedIds) {
+            shapeEl(id)?.classList.add("bpmnkit-token-visited");
+        }
+        // Active shapes (added after visited so they override on the same element)
+        for (const id of activeIds) {
+            const el = shapeEl(id);
+            if (el !== undefined) {
+                el.classList.remove("bpmnkit-token-visited");
+                el.classList.add("bpmnkit-token-active");
+            }
+        }
+        // Error shapes (highest priority — override active/visited)
+        for (const id of errorIds) {
+            const el = shapeEl(id);
+            if (el !== undefined) {
+                el.classList.remove("bpmnkit-token-active", "bpmnkit-token-visited");
+                el.classList.add("bpmnkit-token-error");
+            }
+        }
+        // Edge highlights
+        // • active edge  : source visited, target active  (token just left source, entering target)
+        // • visited edge : source visited, target visited (token has fully traversed this edge)
+        // This correctly handles exclusive gateways: only the taken branch's target enters
+        // visited/active, so only the taken edge is highlighted.
+        for (const [flowId, { sourceRef, targetRef }] of flowIndex) {
+            const el = edgeEl(flowId);
+            if (el === undefined)
+                continue;
+            const srcVisited = visitedIds.has(sourceRef);
+            if (!srcVisited)
+                continue;
+            if (activeIds.has(targetRef)) {
+                el.classList.add("bpmnkit-token-edge-active");
+            }
+            else if (visitedIds.has(targetRef)) {
+                el.classList.add("bpmnkit-token-edge-visited");
+            }
+        }
+    }
+    function indexFlows(defs) {
+        flowIndex.clear();
+        for (const proc of defs.processes) {
+            for (const flow of proc.sequenceFlows) {
+                flowIndex.set(flow.id, { sourceRef: flow.sourceRef, targetRef: flow.targetRef });
+            }
+            // Sub-processes
+            for (const el of proc.flowElements) {
+                if (el.type === "subProcess" ||
+                    el.type === "transaction" ||
+                    el.type === "adHocSubProcess" ||
+                    el.type === "eventSubProcess") {
+                    for (const flow of el.sequenceFlows) {
+                        flowIndex.set(flow.id, { sourceRef: flow.sourceRef, targetRef: flow.targetRef });
+                    }
+                }
+            }
+        }
+    }
+    // ── TokenHighlightApi ─────────────────────────────────────────────────────
+    const api = {
+        trackInstance(instance) {
+            return instance.onChange((evt) => {
+                const type = evt.type;
+                const elementId = evt.elementId;
+                if (typeof type !== "string")
+                    return;
+                if (type === "element:entering" && typeof elementId === "string") {
+                    activeIds.add(elementId);
+                    applyHighlights();
+                }
+                else if (type === "element:left" && typeof elementId === "string") {
+                    activeIds.delete(elementId);
+                    visitedIds.add(elementId);
+                    applyHighlights();
+                }
+                else if (type === "process:completed" || type === "process:failed") {
+                    activeIds.clear();
+                    applyHighlights();
+                }
+            });
+        },
+        setActive(elementIds) {
+            activeIds.clear();
+            for (const id of elementIds)
+                activeIds.add(id);
+            applyHighlights();
+        },
+        addVisited(elementIds) {
+            for (const id of elementIds)
+                visitedIds.add(id);
+            applyHighlights();
+        },
+        setError(elementId) {
+            errorIds.add(elementId);
+            applyHighlights();
+        },
+        clear() {
+            activeIds.clear();
+            visitedIds.clear();
+            errorIds.clear();
+            applyHighlights();
+        },
+    };
+    // ── CanvasPlugin ──────────────────────────────────────────────────────────
+    return {
+        name: "token-highlight",
+        api,
+        install(canvasApiArg) {
+            canvasApi = canvasApiArg;
+            injectTokenHighlightStyles();
+            const onAny = canvasApiArg.on;
+            unsubs.push(canvasApiArg.on("diagram:load", (defs) => {
+                indexFlows(defs);
+                api.clear();
+            }), canvasApiArg.on("diagram:clear", () => {
+                flowIndex.clear();
+                api.clear();
+            }), onAny("diagram:change", (defs) => {
+                indexFlows(defs);
+            }));
+        },
+        uninstall() {
+            for (const off of unsubs)
+                off();
+            canvasApi = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/watermark/css.d.ts

@@ -0,0 +1,10 @@
+/** ID used to prevent duplicate style injection. */
+export declare const WATERMARK_STYLE_ID = "bpmnkit-watermark-styles-v1";
+/** CSS for the watermark plugin, injected once into `<head>`. */
+export declare const WATERMARK_CSS = "\n.bpmnkit-watermark {\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  pointer-events: auto;\n  z-index: 10;\n}\n.bpmnkit-watermark-link {\n  font-size: 11px;\n  color: var(--bpmnkit-overlay-text, rgba(60, 60, 60, 0.7));\n  text-decoration: none;\n  font-family: system-ui, sans-serif;\n  opacity: 0.7;\n  transition: opacity 0.15s;\n}\n.bpmnkit-watermark-link:hover {\n  opacity: 1;\n  text-decoration: underline;\n}\n.bpmnkit-watermark-logo {\n  display: flex;\n  align-items: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n.bpmnkit-watermark-logo > svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n";
+/**
+ * Injects the watermark stylesheet into `<head>` if not already present.
+ * Safe to call multiple times — only one `<style>` tag is ever inserted.
+ */
+export declare function injectWatermarkStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/watermark/css.js

@@ -0,0 +1,54 @@
+/** ID used to prevent duplicate style injection. */
+export const WATERMARK_STYLE_ID = "bpmnkit-watermark-styles-v1";
+/** CSS for the watermark plugin, injected once into `<head>`. */
+export const WATERMARK_CSS = `
+.bpmnkit-watermark {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: auto;
+  z-index: 10;
+}
+.bpmnkit-watermark-link {
+  font-size: 11px;
+  color: var(--bpmnkit-overlay-text, rgba(60, 60, 60, 0.7));
+  text-decoration: none;
+  font-family: system-ui, sans-serif;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+.bpmnkit-watermark-link:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+.bpmnkit-watermark-logo {
+  display: flex;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.bpmnkit-watermark-logo > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+`;
+/**
+ * Injects the watermark stylesheet into `<head>` if not already present.
+ * Safe to call multiple times — only one `<style>` tag is ever inserted.
+ */
+export function injectWatermarkStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(WATERMARK_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = WATERMARK_STYLE_ID;
+    style.textContent = WATERMARK_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/watermark/index.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @bpmnkit/canvas-plugin-watermark — bottom-right attribution bar for `@bpmnkit/canvas`.
+ *
+ * Renders configurable links and an optional logo in the bottom-right corner.
+ * Links are left of the logo; the logo is always the rightmost element.
+ *
+ * ## Usage
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ * import { createWatermarkPlugin } from "@bpmnkit/canvas-plugin-watermark";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [
+ *     createWatermarkPlugin({
+ *       links: [{ label: "GitHub", url: "https://github.com/example/repo" }],
+ *       logo: myLogoSvgString,
+ *     }),
+ *   ],
+ * });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export { WATERMARK_CSS, WATERMARK_STYLE_ID, injectWatermarkStyles } from "./css.js";
+/** A single navigable link rendered in the watermark bar. */
+export interface WatermarkLink {
+    label: string;
+    url: string;
+}
+/** Options for {@link createWatermarkPlugin}. */
+export interface WatermarkOptions {
+    /** Links to display, in order from left to right. */
+    links?: WatermarkLink[];
+    /**
+     * Square SVG markup string for the logo, rendered rightmost.
+     * Must be a self-contained `<svg>` element.
+     */
+    logo?: string;
+}
+/**
+ * Creates a watermark plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ */
+export declare function createWatermarkPlugin(options?: WatermarkOptions): CanvasPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/watermark/index.js

@@ -0,0 +1,64 @@
+/**
+ * @bpmnkit/canvas-plugin-watermark — bottom-right attribution bar for `@bpmnkit/canvas`.
+ *
+ * Renders configurable links and an optional logo in the bottom-right corner.
+ * Links are left of the logo; the logo is always the rightmost element.
+ *
+ * ## Usage
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ * import { createWatermarkPlugin } from "@bpmnkit/canvas-plugin-watermark";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [
+ *     createWatermarkPlugin({
+ *       links: [{ label: "GitHub", url: "https://github.com/example/repo" }],
+ *       logo: myLogoSvgString,
+ *     }),
+ *   ],
+ * });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import { injectWatermarkStyles } from "./css.js";
+export { WATERMARK_CSS, WATERMARK_STYLE_ID, injectWatermarkStyles } from "./css.js";
+/**
+ * Creates a watermark plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ */
+export function createWatermarkPlugin(options = {}) {
+    let host = null;
+    return {
+        name: "watermark",
+        install(api) {
+            injectWatermarkStyles();
+            host = document.createElement("div");
+            host.className = "bpmnkit-watermark";
+            host.setAttribute("aria-label", "Attribution");
+            for (const link of options.links ?? []) {
+                const a = document.createElement("a");
+                a.className = "bpmnkit-watermark-link";
+                a.href = link.url;
+                a.target = "_blank";
+                a.rel = "noopener noreferrer";
+                a.textContent = link.label;
+                host.appendChild(a);
+            }
+            if (options.logo) {
+                const logoDiv = document.createElement("div");
+                logoDiv.className = "bpmnkit-watermark-logo";
+                logoDiv.innerHTML = options.logo;
+                host.appendChild(logoDiv);
+            }
+            api.container.appendChild(host);
+        },
+        uninstall() {
+            host?.remove();
+            host = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/zoom-controls/css.d.ts

@@ -0,0 +1,4 @@
+export declare const ZOOM_CONTROLS_STYLE_ID = "bpmnkit-zoom-controls-styles-v1";
+export declare const ZOOM_CONTROLS_CSS = "\n.bpmnkit-controls {\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.bpmnkit-control-btn {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  line-height: 1;\n  font-size: 16px;\n  font-family: system-ui, sans-serif;\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: 4px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  transition: background 0.1s, color 0.1s;\n}\n.bpmnkit-control-btn:hover {\n  background: var(--bpmnkit-highlight, var(--bpmnkit-accent, #1a56db));\n  color: #fff;\n  border-color: transparent;\n}\n.bpmnkit-control-btn:focus {\n  outline: 2px solid var(--bpmnkit-focus, var(--bpmnkit-accent, #1a56db));\n  outline-offset: 1px;\n}\n";
+export declare function injectZoomControlsStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/zoom-controls/css.js

@@ -0,0 +1,48 @@
+export const ZOOM_CONTROLS_STYLE_ID = "bpmnkit-zoom-controls-styles-v1";
+export const ZOOM_CONTROLS_CSS = `
+.bpmnkit-controls {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.bpmnkit-control-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  line-height: 1;
+  font-size: 16px;
+  font-family: system-ui, sans-serif;
+  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: 4px;
+  color: var(--bpmnkit-text, #333333);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.bpmnkit-control-btn:hover {
+  background: var(--bpmnkit-highlight, var(--bpmnkit-accent, #1a56db));
+  color: #fff;
+  border-color: transparent;
+}
+.bpmnkit-control-btn:focus {
+  outline: 2px solid var(--bpmnkit-focus, var(--bpmnkit-accent, #1a56db));
+  outline-offset: 1px;
+}
+`;
+export function injectZoomControlsStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(ZOOM_CONTROLS_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = ZOOM_CONTROLS_STYLE_ID;
+    style.textContent = ZOOM_CONTROLS_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/zoom-controls/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @bpmnkit/canvas-plugin-zoom-controls — zoom controls plugin for `@bpmnkit/canvas`.
+ *
+ * Adds +, −, and fit-diagram buttons in the bottom-left corner of the canvas.
+ *
+ * ## Usage
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ * import { createZoomControlsPlugin } from "@bpmnkit/canvas-plugin-zoom-controls";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,
+ *   plugins: [createZoomControlsPlugin()],
+ * });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export { ZOOM_CONTROLS_CSS, ZOOM_CONTROLS_STYLE_ID, injectZoomControlsStyles } from "./css.js";
+/**
+ * Creates a zoom controls plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ *
+ * @example
+ * ```typescript
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [createZoomControlsPlugin()],
+ * });
+ * ```
+ */
+export declare function createZoomControlsPlugin(): CanvasPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/zoom-controls/index.js

@@ -0,0 +1,111 @@
+/**
+ * @bpmnkit/canvas-plugin-zoom-controls — zoom controls plugin for `@bpmnkit/canvas`.
+ *
+ * Adds +, −, and fit-diagram buttons in the bottom-left corner of the canvas.
+ *
+ * ## Usage
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ * import { createZoomControlsPlugin } from "@bpmnkit/canvas-plugin-zoom-controls";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,
+ *   plugins: [createZoomControlsPlugin()],
+ * });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import { injectZoomControlsStyles } from "./css.js";
+export { ZOOM_CONTROLS_CSS, ZOOM_CONTROLS_STYLE_ID, injectZoomControlsStyles } from "./css.js";
+const MIN_SCALE = 0.05;
+const MAX_SCALE = 10;
+const FIT_PADDING = 40;
+/**
+ * Creates a zoom controls plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ *
+ * @example
+ * ```typescript
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [createZoomControlsPlugin()],
+ * });
+ * ```
+ */
+export function createZoomControlsPlugin() {
+    let controlsEl = null;
+    return {
+        name: "zoom-controls",
+        install(api) {
+            injectZoomControlsStyles();
+            function zoomAt(factor) {
+                const { tx, ty, scale } = api.getViewport();
+                const cx = api.svg.clientWidth / 2;
+                const cy = api.svg.clientHeight / 2;
+                const newScale = Math.min(Math.max(scale * factor, MIN_SCALE), MAX_SCALE);
+                const ratio = newScale / scale;
+                api.setViewport({
+                    tx: cx - (cx - tx) * ratio,
+                    ty: cy - (cy - ty) * ratio,
+                    scale: newScale,
+                });
+            }
+            function fitView() {
+                const shapes = api.getShapes();
+                if (shapes.length === 0)
+                    return;
+                let minX = Number.POSITIVE_INFINITY;
+                let minY = Number.POSITIVE_INFINITY;
+                let maxX = Number.NEGATIVE_INFINITY;
+                let maxY = Number.NEGATIVE_INFINITY;
+                for (const s of shapes) {
+                    const b = s.shape.bounds;
+                    if (b.x < minX)
+                        minX = b.x;
+                    if (b.y < minY)
+                        minY = b.y;
+                    if (b.x + b.width > maxX)
+                        maxX = b.x + b.width;
+                    if (b.y + b.height > maxY)
+                        maxY = b.y + b.height;
+                }
+                const svgW = api.svg.clientWidth;
+                const svgH = api.svg.clientHeight;
+                const dw = maxX - minX;
+                const dh = maxY - minY;
+                const scale = Math.min((svgW - FIT_PADDING * 2) / dw, (svgH - FIT_PADDING * 2) / dh, 2);
+                api.setViewport({
+                    tx: (svgW - dw * scale) / 2 - minX * scale,
+                    ty: (svgH - dh * scale) / 2 - minY * scale,
+                    scale,
+                });
+            }
+            const controls = document.createElement("div");
+            controls.className = "bpmnkit-controls";
+            controls.setAttribute("aria-label", "Zoom controls");
+            const makeBtn = (label, title, onClick) => {
+                const btn = document.createElement("button");
+                btn.className = "bpmnkit-control-btn";
+                btn.type = "button";
+                btn.textContent = label;
+                btn.setAttribute("aria-label", title);
+                btn.title = title;
+                btn.addEventListener("click", onClick);
+                return btn;
+            };
+            controls.appendChild(makeBtn("+", "Zoom in", () => zoomAt(1.25)));
+            controls.appendChild(makeBtn("−", "Zoom out", () => zoomAt(0.8)));
+            controls.appendChild(makeBtn("⊡", "Fit diagram", fitView));
+            api.container.appendChild(controls);
+            controlsEl = controls;
+        },
+        uninstall() {
+            controlsEl?.remove();
+            controlsEl = null;
+        },
+    };
+}
+//# sourceMappingURL=index.js.map