@bpmnkit/canvas 0.0.8 → 0.0.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 urbanisierung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,5 @@
 <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">
+  <img src="https://raw.githubusercontent.com/bpmnkit/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>
 
@@ -7,7 +7,7 @@
   [![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)
+  [Website](https://bpmnkit.com) · [Documentation](https://docs.bpmnkit.com) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/canvas/CHANGELOG.md)
 </div>
 
 ---
@@ -120,9 +120,13 @@ const myPlugin: CanvasPlugin = {
 | [`@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/ui`](https://www.npmjs.com/package/@bpmnkit/ui) | Shared design tokens and UI components |
 | [`@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 |
+| [`@bpmnkit/connector-gen`](https://www.npmjs.com/package/@bpmnkit/connector-gen) | Generate connector templates from OpenAPI specs |
+| [`@bpmnkit/cli`](https://www.npmjs.com/package/@bpmnkit/cli) | Camunda 8 command-line interface (casen) |
+| [`@bpmnkit/proxy`](https://www.npmjs.com/package/@bpmnkit/proxy) | Local AI bridge and Camunda API proxy server |
 
 ## License
 
-[MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © bpmn-sdk
+[MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © BPMN Kit — made by [u11g](https://u11g.com)

package/package.json

@@ -1,30 +1,49 @@
 {
-	"name": "@bpmnkit/canvas",
-	"version": "0.0.8",
-	"type": "module",
-	"main": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
-		}
-	},
-	"files": ["dist/**/*.js", "dist/**/*.d.ts"],
-	"scripts": {
-		"build": "tsc",
-		"typecheck": "tsc --noEmit",
-		"check": "biome check .",
-		"test": "vitest run"
-	},
-	"dependencies": {
-		"@bpmnkit/core": "workspace:*"
-	},
-	"description": "Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API",
-	"keywords": ["bpmn", "viewer", "svg", "canvas", "workflow", "typescript"],
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/bpmnkit/monorepo"
-	}
-}
+  "name": "@bpmnkit/canvas",
+  "version": "0.0.10",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**/*.js",
+    "dist/**/*.d.ts"
+  ],
+  "dependencies": {
+    "@bpmnkit/core": "0.0.10"
+  },
+  "description": "Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API",
+  "keywords": [
+    "bpmn",
+    "viewer",
+    "svg",
+    "canvas",
+    "workflow",
+    "typescript"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bpmnkit/monorepo"
+  },
+  "homepage": "https://bpmnkit.com",
+  "bugs": {
+    "url": "https://github.com/bpmnkit/monorepo/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "check": "biome check .",
+    "test": "vitest run"
+  }
+}

package/dist/minimap.d.ts

@@ -1,37 +0,0 @@
-import type { BpmnDefinitions } from "@bpmn-sdk/core";
-import type { ViewportState } from "./types.js";
-/**
- * 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 _diagramMinX;
-    private _diagramMinY;
-    private _diagramW;
-    private _diagramH;
-    private readonly _mmW;
-    private readonly _mmH;
-    constructor(container: HTMLElement, 
-    /** Invoked when the user clicks the minimap to request a viewport pan. */
-    _onNavigate: (tx: number, ty: number) => void);
-    /** Updates the minimap with shapes and edges from a newly loaded diagram. */
-    update(defs: BpmnDefinitions): 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.js

@@ -1,171 +0,0 @@
-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;
-    // Diagram bounding box
-    _diagramMinX = 0;
-    _diagramMinY = 0;
-    _diagramW = 1;
-    _diagramH = 1;
-    // 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 = "bpmn-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: "bpmn-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;
-        this._diagramMinX = minX;
-        this._diagramMinY = minY;
-        this._diagramW = dW;
-        this._diagramH = dH;
-        // 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: "bpmn-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: "bpmn-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: "bpmn-minimap-edge" });
-            this._edgesG.appendChild(poly);
-        }
-    }
-    /** 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;
-        // The requested diagram point should be centred in the SVG
-        // The caller determines the SVG size and computes the correct translation
-        this._onNavigate(diagX, diagY);
-    };
-}
-//# sourceMappingURL=minimap.js.map