@bpmnkit/canvas 0.0.8

package/README.md

@@ -0,0 +1,128 @@
+<div align="center">
+  <img src="https://raw.githubusercontent.com/bpmn-sdk/monorepo/main/doc/logos/logo-2-gateway.svg" width="72" height="72" alt="BPMN Kit logo">
+  <h1>@bpmnkit/canvas</h1>
+  <p>Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API</p>
+
+  [![npm](https://img.shields.io/npm/v/@bpmnkit/canvas?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmnkit/canvas)
+  [![license](https://img.shields.io/npm/l/@bpmnkit/canvas?style=flat-square)](https://github.com/bpmnkit/monorepo/blob/main/LICENSE)
+  [![typescript](https://img.shields.io/badge/TypeScript-strict-6244d7?style=flat-square&logo=typescript&logoColor=white)](https://github.com/bpmnkit/monorepo)
+
+  [Documentation](https://bpmn-sdk-docs.pages.dev) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/canvas/CHANGELOG.md)
+</div>
+
+---
+
+## Overview
+
+`@bpmnkit/canvas` renders BPMN 2.0 diagrams as interactive SVG. It has zero runtime dependencies, works in any framework (or none), and exposes a plugin API for extending its behaviour.
+
+## Features
+
+- **SVG rendering** — crisp diagrams at any zoom level, all element types
+- **Pan & zoom** — mouse drag, scroll wheel, touch/pinch, keyboard shortcuts
+- **Theming** — light / dark / system-auto, fully overridable via CSS custom properties
+- **Plugin API** — install composable `CanvasPlugin` add-ons without touching core code
+- **Event system** — subscribe to element clicks, selection changes, diagram load, viewport updates
+- **Keyboard navigation** — arrow keys, fit-to-screen, zoom shortcuts
+- **Zero dependencies** — runs in browsers, bundlers, and SSR
+
+## Installation
+
+```sh
+npm install @bpmnkit/canvas
+```
+
+## Quick Start
+
+```typescript
+import { BpmnCanvas } from "@bpmnkit/canvas"
+
+const canvas = new BpmnCanvas({
+  container: document.getElementById("canvas")!,
+  theme: "dark",          // "light" | "dark" | "auto"
+  grid: true,             // dot-grid background
+  plugins: [],            // CanvasPlugin[]
+})
+
+// Load a diagram
+canvas.loadXML(bpmnXml)
+
+// Respond to element clicks
+canvas.on("element:click", (id, event) => {
+  console.log("Clicked:", id)
+})
+
+// Fit diagram to container
+canvas.fit()
+```
+
+## API Reference
+
+### Constructor Options
+
+```typescript
+interface CanvasOptions {
+  container: HTMLElement
+  theme?: "light" | "dark" | "auto"   // default: "auto"
+  grid?: boolean                       // default: false
+  fit?: boolean                        // auto-fit on load, default: true
+  plugins?: CanvasPlugin[]
+}
+```
+
+### CanvasApi Methods
+
+| Method | Description |
+|--------|-------------|
+| `loadXML(xml)` | Parse and render a BPMN XML string |
+| `fit()` | Fit the diagram to the container |
+| `zoom(factor)` | Set zoom level (1 = 100%) |
+| `getShapes()` | All rendered `RenderedShape` objects |
+| `getEdges()` | All rendered `RenderedEdge` objects |
+| `setTheme(theme)` | Switch theme at runtime |
+| `destroy()` | Remove canvas and clean up |
+| `on(event, handler)` | Subscribe to a canvas event |
+| `off(event, handler)` | Unsubscribe |
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `diagram:load` | `BpmnDefinitions` | Fired when a new diagram loads |
+| `element:click` | `(id, PointerEvent)` | An element was clicked |
+| `editor:select` | `string[]` | Selection changed (element IDs) |
+| `viewport:change` | `ViewportState` | Pan or zoom occurred |
+
+### Plugin API
+
+```typescript
+import type { CanvasPlugin, CanvasApi } from "@bpmnkit/canvas"
+
+const myPlugin: CanvasPlugin = {
+  name: "my-plugin",
+  install(api: CanvasApi) {
+    api.on("element:click", (id) => console.log("clicked", id))
+  },
+  uninstall() {},
+}
+```
+
+---
+
+## Related Packages
+
+| Package | Description |
+|---------|-------------|
+| [`@bpmnkit/core`](https://www.npmjs.com/package/@bpmnkit/core) | BPMN/DMN/Form parser, builder, layout engine |
+| [`@bpmnkit/editor`](https://www.npmjs.com/package/@bpmnkit/editor) | Full-featured interactive BPMN editor |
+| [`@bpmnkit/engine`](https://www.npmjs.com/package/@bpmnkit/engine) | Lightweight BPMN process execution engine |
+| [`@bpmnkit/feel`](https://www.npmjs.com/package/@bpmnkit/feel) | FEEL expression language parser & evaluator |
+| [`@bpmnkit/plugins`](https://www.npmjs.com/package/@bpmnkit/plugins) | 22 composable canvas plugins |
+| [`@bpmnkit/api`](https://www.npmjs.com/package/@bpmnkit/api) | Camunda 8 REST API TypeScript client |
+| [`@bpmnkit/ascii`](https://www.npmjs.com/package/@bpmnkit/ascii) | Render BPMN diagrams as Unicode ASCII art |
+| [`@bpmnkit/profiles`](https://www.npmjs.com/package/@bpmnkit/profiles) | Shared auth, profile storage, and client factories for CLI & proxy |
+| [`@bpmnkit/operate`](https://www.npmjs.com/package/@bpmnkit/operate) | Monitoring & operations frontend for Camunda clusters |
+
+## License
+
+[MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © bpmn-sdk

package/dist/canvas.d.ts

@@ -0,0 +1,114 @@
+import type { BpmnDefinitions } from "@bpmnkit/core";
+import type { CanvasEvents, CanvasOptions, Theme } from "./types.js";
+/**
+ * BpmnCanvas — a high-performance, accessible BPMN 2.0 diagram viewer.
+ *
+ * ## Quick start
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,
+ *   theme: "auto",
+ * });
+ * ```
+ *
+ * ## Framework integration
+ * The canvas is framework-agnostic and mounts into any `HTMLElement`.
+ *
+ * ### React
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * useEffect(() => {
+ *   const canvas = new BpmnCanvas({ container: ref.current!, xml });
+ *   return () => canvas.destroy();
+ * }, [xml]);
+ * return <div ref={ref} style={{ width: "100%", height: "500px" }} />;
+ * ```
+ *
+ * ### Vue
+ * ```vue
+ * <template><div ref="el" style="width:100%;height:500px" /></template>
+ * <script setup>
+ * const el = ref(null);
+ * onMounted(() => { canvas = new BpmnCanvas({ container: el.value, xml }); });
+ * onUnmounted(() => canvas?.destroy());
+ * </script>
+ * ```
+ *
+ * ## Plugin system
+ * Extend the canvas with custom behaviour by passing plugins to the constructor:
+ * ```typescript
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [tooltipPlugin, editModePlugin],
+ * });
+ * ```
+ * See {@link CanvasPlugin} for the plugin contract.
+ */
+export declare class BpmnCanvas {
+    private readonly _id;
+    private readonly _host;
+    private readonly _svg;
+    private readonly _viewportG;
+    private readonly _containersG;
+    private readonly _edgesG;
+    private readonly _shapesG;
+    private readonly _labelsG;
+    private _gridPattern;
+    private _markerId;
+    private readonly _viewport;
+    private readonly _keyboard;
+    private readonly _plugins;
+    private _shapes;
+    private _edges;
+    private _currentDefs;
+    private _theme;
+    private _fit;
+    private _listeners;
+    constructor(options: CanvasOptions);
+    private _ro;
+    /**
+     * Parses and renders a BPMN 2.0 XML string.
+     *
+     * @throws {Error} If the XML cannot be parsed.
+     */
+    load(xml: string): void;
+    /**
+     * Renders an already-parsed `BpmnDefinitions` model.
+     * Use this when you already have the parsed model from `@bpmnkit/core`.
+     */
+    loadDefinitions(defs: BpmnDefinitions): void;
+    /** Clears the canvas and fires `diagram:clear`. */
+    clear(): void;
+    /**
+     * Scales and pans the viewport to make the entire diagram visible.
+     * @param padding — pixels of whitespace around the diagram. Default: 40.
+     */
+    fitView(padding?: number): void;
+    /** Sets the color theme. Pass `"auto"` to follow the OS preference. */
+    setTheme(theme: Theme): void;
+    /** Zooms in by 25% centred on the canvas. */
+    zoomIn(): void;
+    /** Zooms out by 25% centred on the canvas. */
+    zoomOut(): void;
+    /** Resets to 100% zoom, centred on the canvas. */
+    resetZoom(): void;
+    /**
+     * Subscribes to a canvas event. Returns an unsubscribe function.
+     *
+     * @example
+     * ```typescript
+     * const off = canvas.on("element:click", (id) => console.log(id));
+     * off(); // unsubscribe
+     * ```
+     */
+    on<K extends keyof CanvasEvents>(event: K, handler: CanvasEvents[K]): () => void;
+    /** Destroys the canvas, removing all DOM nodes and event listeners. */
+    destroy(): void;
+    private _applyTheme;
+    private _installPlugin;
+    private _emit;
+}
+//# sourceMappingURL=canvas.d.ts.map

package/dist/canvas.js

@@ -0,0 +1,326 @@
+import { Bpmn } from "@bpmnkit/core";
+import { injectStyles } from "./css.js";
+import { KeyboardHandler } from "./keyboard.js";
+import { computeDiagramBounds, createDefs, createGrid, render } from "./renderer.js";
+import { ViewportController } from "./viewport.js";
+const NS = "http://www.w3.org/2000/svg";
+let _instanceCounter = 0;
+/**
+ * BpmnCanvas — a high-performance, accessible BPMN 2.0 diagram viewer.
+ *
+ * ## Quick start
+ * ```typescript
+ * import { BpmnCanvas } from "@bpmnkit/canvas";
+ *
+ * const canvas = new BpmnCanvas({
+ *   container: document.getElementById("app")!,
+ *   xml: myBpmnXml,
+ *   theme: "auto",
+ * });
+ * ```
+ *
+ * ## Framework integration
+ * The canvas is framework-agnostic and mounts into any `HTMLElement`.
+ *
+ * ### React
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * useEffect(() => {
+ *   const canvas = new BpmnCanvas({ container: ref.current!, xml });
+ *   return () => canvas.destroy();
+ * }, [xml]);
+ * return <div ref={ref} style={{ width: "100%", height: "500px" }} />;
+ * ```
+ *
+ * ### Vue
+ * ```vue
+ * <template><div ref="el" style="width:100%;height:500px" /></template>
+ * <script setup>
+ * const el = ref(null);
+ * onMounted(() => { canvas = new BpmnCanvas({ container: el.value, xml }); });
+ * onUnmounted(() => canvas?.destroy());
+ * </script>
+ * ```
+ *
+ * ## Plugin system
+ * Extend the canvas with custom behaviour by passing plugins to the constructor:
+ * ```typescript
+ * const canvas = new BpmnCanvas({
+ *   container,
+ *   plugins: [tooltipPlugin, editModePlugin],
+ * });
+ * ```
+ * See {@link CanvasPlugin} for the plugin contract.
+ */
+export class BpmnCanvas {
+    // ── DOM structure ─────────────────────────────────────────────────
+    _id;
+    _host;
+    _svg;
+    _viewportG;
+    _containersG;
+    _edgesG;
+    _shapesG;
+    _labelsG;
+    _gridPattern = null;
+    _markerId = "";
+    // ── Sub-systems ───────────────────────────────────────────────────
+    _viewport;
+    _keyboard;
+    _plugins = [];
+    // ── State ─────────────────────────────────────────────────────────
+    _shapes = [];
+    _edges = [];
+    _currentDefs = null;
+    _theme;
+    _fit;
+    // ── Event emitter ─────────────────────────────────────────────────
+    _listeners = new Map();
+    constructor(options) {
+        injectStyles();
+        this._id = String(_instanceCounter++);
+        this._theme = options.theme ?? "auto";
+        this._fit = options.fit ?? "contain";
+        // ── Build DOM ────────────────────────────────────────────────
+        const container = options.container;
+        container.innerHTML = "";
+        this._host = document.createElement("div");
+        this._host.className = "bpmnkit-canvas-host";
+        this._host.setAttribute("role", "application");
+        this._host.setAttribute("aria-label", "BPMN Diagram");
+        this._host.setAttribute("tabindex", "0");
+        this._applyTheme(this._theme);
+        container.appendChild(this._host);
+        // SVG root
+        this._svg = document.createElementNS(NS, "svg");
+        this._svg.setAttribute("aria-hidden", "true");
+        this._host.appendChild(this._svg);
+        // Arrow marker defs
+        this._markerId = createDefs(this._svg, this._id);
+        // Dot grid
+        if (options.grid !== false) {
+            this._gridPattern = createGrid(this._svg, this._id);
+        }
+        // Viewport group
+        this._viewportG = document.createElementNS(NS, "g");
+        this._svg.appendChild(this._viewportG);
+        // Layer order: containers (pools/lanes) → edges → shapes → labels
+        this._containersG = document.createElementNS(NS, "g");
+        this._edgesG = document.createElementNS(NS, "g");
+        this._shapesG = document.createElementNS(NS, "g");
+        this._labelsG = document.createElementNS(NS, "g");
+        this._viewportG.appendChild(this._containersG);
+        this._viewportG.appendChild(this._edgesG);
+        this._viewportG.appendChild(this._shapesG);
+        this._viewportG.appendChild(this._labelsG);
+        // ── Viewport controller ───────────────────────────────────────
+        this._viewport = new ViewportController(this._host, this._svg, this._viewportG, this._gridPattern, (state) => {
+            this._emit("viewport:change", state);
+        });
+        // ── Keyboard ──────────────────────────────────────────────────
+        this._keyboard = new KeyboardHandler(this._host, this._viewport, () => this.fitView(), (id) => {
+            const shape = this._shapes.find((s) => s.id === id);
+            if (shape) {
+                const e = new PointerEvent("click");
+                this._emit("element:click", id, e);
+            }
+        }, (id) => this._emit("element:focus", id), () => this._emit("element:blur"));
+        // ── Click detection ───────────────────────────────────────────
+        // Use elementFromPoint rather than e.target because native SVG hit-testing
+        // can return the root <svg> element even when a shape is visually under the
+        // cursor (reproducible when the canvas is inside a flex/scroll container).
+        // elementFromPoint correctly resolves the topmost painted element.
+        this._svg.addEventListener("click", (e) => {
+            if (this._viewport.didPan)
+                return;
+            // elementFromPoint resolves the correct element when native SVG hit-testing
+            // returns the root <svg> (reproducible in flex/scroll containers). Fall back
+            // to e.target for test environments where elementFromPoint isn't reliable.
+            const fromPoint = document.elementFromPoint(e.clientX, e.clientY);
+            const target = fromPoint?.closest("[data-bpmnkit-id]") ??
+                e.target.closest("[data-bpmnkit-id]");
+            const id = target?.getAttribute("data-bpmnkit-id");
+            if (id)
+                this._emit("element:click", id, e);
+        });
+        // ── Install plugins ───────────────────────────────────────────
+        if (options.plugins) {
+            for (const plugin of options.plugins) {
+                this._installPlugin(plugin);
+            }
+        }
+        // ── Initial diagram ───────────────────────────────────────────
+        if (options.xml) {
+            this.load(options.xml);
+        }
+        // Re-fit on container resize
+        const ro = new ResizeObserver(() => {
+            if (this._currentDefs)
+                this.fitView();
+        });
+        ro.observe(this._host);
+        this._ro = ro;
+    }
+    _ro;
+    // ── Public API ────────────────────────────────────────────────────
+    /**
+     * Parses and renders a BPMN 2.0 XML string.
+     *
+     * @throws {Error} If the XML cannot be parsed.
+     */
+    load(xml) {
+        const defs = Bpmn.parse(xml);
+        this.loadDefinitions(defs);
+    }
+    /**
+     * Renders an already-parsed `BpmnDefinitions` model.
+     * Use this when you already have the parsed model from `@bpmnkit/core`.
+     */
+    loadDefinitions(defs) {
+        // Clear previous content
+        this._containersG.innerHTML = "";
+        this._edgesG.innerHTML = "";
+        this._shapesG.innerHTML = "";
+        this._labelsG.innerHTML = "";
+        this._shapes = [];
+        this._edges = [];
+        this._currentDefs = defs;
+        const result = render(defs, this._containersG, this._edgesG, this._shapesG, this._labelsG, this._markerId, this._id);
+        this._shapes = result.shapes;
+        this._edges = result.edges;
+        this._keyboard.setShapes(this._shapes);
+        if (this._fit !== "none") {
+            // Defer fit to next frame so the SVG has been laid out
+            requestAnimationFrame(() => this.fitView());
+        }
+        this._emit("diagram:load", defs);
+    }
+    /** Clears the canvas and fires `diagram:clear`. */
+    clear() {
+        this._containersG.innerHTML = "";
+        this._edgesG.innerHTML = "";
+        this._shapesG.innerHTML = "";
+        this._labelsG.innerHTML = "";
+        this._shapes = [];
+        this._edges = [];
+        this._currentDefs = null;
+        this._emit("diagram:clear");
+    }
+    /**
+     * Scales and pans the viewport to make the entire diagram visible.
+     * @param padding — pixels of whitespace around the diagram. Default: 40.
+     */
+    fitView(padding = 40) {
+        if (!this._currentDefs)
+            return;
+        const bounds = computeDiagramBounds(this._currentDefs);
+        if (!bounds)
+            return;
+        const svgW = this._svg.clientWidth;
+        const svgH = this._svg.clientHeight;
+        if (svgW === 0 || svgH === 0)
+            return;
+        const dW = bounds.maxX - bounds.minX;
+        const dH = bounds.maxY - bounds.minY;
+        if (dW === 0 || dH === 0)
+            return;
+        const scaleX = (svgW - padding * 2) / dW;
+        const scaleY = (svgH - padding * 2) / dH;
+        let scale = Math.min(scaleX, scaleY);
+        if (this._fit === "center")
+            scale = 1;
+        const tx = (svgW - dW * scale) / 2 - bounds.minX * scale;
+        const ty = (svgH - dH * scale) / 2 - bounds.minY * scale;
+        this._viewport.set({ tx, ty, scale });
+    }
+    /** Sets the color theme. Pass `"auto"` to follow the OS preference. */
+    setTheme(theme) {
+        this._theme = theme;
+        this._applyTheme(theme);
+    }
+    /** Zooms in by 25% centred on the canvas. */
+    zoomIn() {
+        const { width, height } = this._svg.getBoundingClientRect();
+        this._viewport.zoomAt(width / 2, height / 2, 1.25);
+    }
+    /** Zooms out by 25% centred on the canvas. */
+    zoomOut() {
+        const { width, height } = this._svg.getBoundingClientRect();
+        this._viewport.zoomAt(width / 2, height / 2, 0.8);
+    }
+    /** Resets to 100% zoom, centred on the canvas. */
+    resetZoom() {
+        const { width, height } = this._svg.getBoundingClientRect();
+        this._viewport.set({ scale: 1, tx: width / 2, ty: height / 2 });
+    }
+    /**
+     * Subscribes to a canvas event. Returns an unsubscribe function.
+     *
+     * @example
+     * ```typescript
+     * const off = canvas.on("element:click", (id) => console.log(id));
+     * off(); // unsubscribe
+     * ```
+     */
+    on(event, handler) {
+        let set = this._listeners.get(event);
+        if (!set) {
+            set = new Set();
+            this._listeners.set(event, set);
+        }
+        set.add(handler);
+        return () => set.delete(handler);
+    }
+    /** Destroys the canvas, removing all DOM nodes and event listeners. */
+    destroy() {
+        this._ro.disconnect();
+        this._viewport.destroy();
+        this._keyboard.destroy();
+        for (const plugin of this._plugins)
+            plugin.uninstall?.();
+        this._plugins.length = 0;
+        this._listeners.clear();
+        this._host.remove();
+    }
+    // ── Private ───────────────────────────────────────────────────────
+    _applyTheme(theme) {
+        const resolved = theme === "auto"
+            ? window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light"
+            : theme;
+        if (resolved === "dark") {
+            this._host.setAttribute("data-theme", "dark");
+        }
+        else {
+            this._host.removeAttribute("data-theme");
+        }
+    }
+    _installPlugin(plugin) {
+        this._plugins.push(plugin);
+        const api = {
+            container: this._host,
+            svg: this._svg,
+            viewportEl: this._viewportG,
+            getViewport: () => this._viewport.state,
+            setViewport: (s) => this._viewport.set(s),
+            getShapes: () => [...this._shapes],
+            getEdges: () => [...this._edges],
+            getTheme: () => this._theme,
+            setTheme: (theme) => this.setTheme(theme),
+            on: (event, handler) => this.on(event, handler),
+            emit: (event, ...args) => this._emit(event, ...args),
+        };
+        plugin.install(api);
+    }
+    _emit(event, ...args) {
+        const handlers = this._listeners.get(event);
+        if (!handlers)
+            return;
+        for (const h of handlers) {
+            ;
+            h(...args);
+        }
+    }
+}
+//# sourceMappingURL=canvas.js.map

package/dist/css.d.ts

@@ -0,0 +1,10 @@
+/** ID used to prevent duplicate style injection. */
+export declare const STYLE_ID = "bpmnkit-canvas-styles-v1";
+/** Complete CSS for the BpmnCanvas component, injected once into `<head>`. */
+export declare const CANVAS_CSS = "\n.bpmnkit-canvas-host {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  touch-action: none;\n  background: var(--bpmnkit-bg, #f8f9fa);\n}\n.bpmnkit-canvas-host *,\n.bpmnkit-canvas-host *::before,\n.bpmnkit-canvas-host *::after {\n  box-sizing: border-box;\n}\n.bpmnkit-canvas-host > svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  cursor: default;\n}\n.bpmnkit-canvas-host.is-panning > svg {\n  cursor: grabbing;\n}\n.bpmnkit-canvas-host > svg:focus {\n  outline: none;\n}\n\n/* \u2500\u2500 Shapes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-shape {\n  cursor: pointer;\n  outline: none;\n}\n.bpmnkit-shape:focus .bpmnkit-shape-body,\n.bpmnkit-shape:focus .bpmnkit-event-body,\n.bpmnkit-shape:focus .bpmnkit-gw-body,\n.bpmnkit-shape:focus .bpmnkit-pool-body,\n.bpmnkit-shape:focus .bpmnkit-lane-body {\n  stroke: var(--bpmnkit-focus, #0066cc);\n  stroke-width: 2.5;\n}\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-shape-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-event-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-gw-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-pool-body,\n.bpmnkit-shape.bpmnkit-selected .bpmnkit-lane-body {\n  stroke: var(--bpmnkit-highlight, #0066cc);\n  stroke-width: 2.5;\n}\n\n.bpmnkit-shape-body,\n.bpmnkit-event-body,\n.bpmnkit-gw-body {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n}\n.bpmnkit-end-body {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 3;\n}\n.bpmnkit-event-inner {\n  fill: none;\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n}\n.bpmnkit-event-inner-dashed {\n  fill: none;\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n  stroke-dasharray: 4 2;\n}\n.bpmnkit-eventsubprocess-body {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n  stroke-dasharray: 5 3;\n}\n.bpmnkit-callactivity-body {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 3;\n}\n\n/* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-icon {\n  fill: none;\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  pointer-events: none;\n}\n.bpmnkit-icon-solid {\n  fill: var(--bpmnkit-shape-stroke, #404040);\n  stroke: none;\n  pointer-events: none;\n}\n.bpmnkit-gw-marker {\n  fill: var(--bpmnkit-shape-stroke, #404040);\n  stroke: none;\n  pointer-events: none;\n}\n.bpmnkit-gw-marker-stroke {\n  fill: none;\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Pool / Lane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-pool-body,\n.bpmnkit-lane-body {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n}\n.bpmnkit-pool-header,\n.bpmnkit-lane-header {\n  fill: var(--bpmnkit-pool-header, rgba(0,0,0,0.04));\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n}\n[data-theme=\"dark\"] .bpmnkit-pool-header,\n[data-theme=\"dark\"] .bpmnkit-lane-header {\n  fill: rgba(255,255,255,0.06);\n}\n\n/* \u2500\u2500 Message flow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-msgflow-path {\n  fill: none;\n  stroke: var(--bpmnkit-flow-stroke, #404040);\n  stroke-width: 1.5;\n  stroke-dasharray: 6 3;\n}\n\n/* \u2500\u2500 Edges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-edge {\n  cursor: pointer;\n}\n.bpmnkit-edge-path {\n  fill: none;\n  stroke: var(--bpmnkit-flow-stroke, #404040);\n  stroke-width: 1.5;\n}\n.bpmnkit-edge-assoc {\n  fill: none;\n  stroke: var(--bpmnkit-flow-stroke, #404040);\n  stroke-width: 1.5;\n  stroke-dasharray: 5 3;\n}\n.bpmnkit-edge-default-slash {\n  stroke: var(--bpmnkit-flow-stroke, #404040);\n  stroke-width: 1.5;\n}\n.bpmnkit-arrow-fill {\n  fill: var(--bpmnkit-flow-stroke, #404040);\n}\n\n/* \u2500\u2500 Labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-label {\n  fill: var(--bpmnkit-text, #333333);\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 11px;\n  text-anchor: middle;\n  dominant-baseline: central;\n  pointer-events: none;\n  /* White halo behind text so labels never visually merge with edge lines */\n  paint-order: stroke;\n  stroke: var(--bpmnkit-bg, #f8f9fa);\n  stroke-width: 4px;\n  stroke-linejoin: round;\n}\n\n/* \u2500\u2500 Light theme (default) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host {\n  --bpmnkit-bg: #f8f9fa;\n  --bpmnkit-grid: rgba(0, 0, 0, 0.14);\n  --bpmnkit-shape-fill: #ffffff;\n  --bpmnkit-shape-stroke: #404040;\n  --bpmnkit-flow-stroke: #404040;\n  --bpmnkit-text: var(--bpmnkit-fg, #333333);\n  --bpmnkit-highlight: var(--bpmnkit-accent, #1a56db);\n  --bpmnkit-focus: #0066cc;\n  --bpmnkit-overlay-bg: rgba(248, 249, 250, 0.92);\n  --bpmnkit-overlay-border: rgba(0, 0, 0, 0.12);\n}\n\n/* \u2500\u2500 Dark theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-canvas-host[data-theme=\"dark\"] {\n  --bpmnkit-bg: #0d0d16;\n  --bpmnkit-grid: rgba(255, 255, 255, 0.07);\n  --bpmnkit-shape-fill: #1e1e2e;\n  --bpmnkit-shape-stroke: #8888bb;\n  --bpmnkit-flow-stroke: #7777aa;\n  --bpmnkit-text: var(--bpmnkit-fg, #cdd6f4);\n  --bpmnkit-highlight: var(--bpmnkit-accent-bright, #89b4fa);\n  --bpmnkit-focus: #89b4fa;\n  --bpmnkit-overlay-bg: rgba(30, 30, 46, 0.92);\n  --bpmnkit-overlay-border: rgba(255, 255, 255, 0.1);\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }\n";
+/**
+ * Injects the canvas stylesheet into `<head>` if not already present.
+ * Safe to call multiple times — only one `<style>` tag is ever inserted.
+ */
+export declare function injectStyles(): void;
+//# sourceMappingURL=css.d.ts.map