@bpmnkit/canvas 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +5 -1
  2. package/dist/canvas.js +3 -3
  3. package/dist/css.d.ts +1 -1
  4. package/dist/css.js +20 -0
  5. package/dist/types.d.ts +1 -1
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <div align="center">
2
- <img src="https://raw.githubusercontent.com/bpmnkit/monorepo/main/doc/logos/logo-2-gateway.svg" width="72" height="72" alt="BPMN Kit logo">
2
+ <a href="https://bpmnkit.com"><img src="https://bpmnkit.com/favicon.svg" width="72" height="72" alt="BPMN Kit logo"></a>
3
3
  <h1>@bpmnkit/canvas</h1>
4
4
  <p>Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API</p>
5
5
 
@@ -130,3 +130,7 @@ const myPlugin: CanvasPlugin = {
130
130
  ## License
131
131
 
132
132
  [MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © BPMN Kit — made by [u11g](https://u11g.com)
133
+
134
+ <div align="center">
135
+ <a href="https://bpmnkit.com"><img src="https://bpmnkit.com/favicon.svg" width="32" height="32" alt="BPMN Kit"></a>
136
+ </div>
package/dist/canvas.js CHANGED
@@ -289,11 +289,11 @@ export class BpmnCanvas {
289
289
  ? "dark"
290
290
  : "light"
291
291
  : theme;
292
- if (resolved === "dark") {
293
- this._host.setAttribute("data-theme", "dark");
292
+ if (resolved === "light") {
293
+ this._host.removeAttribute("data-theme");
294
294
  }
295
295
  else {
296
- this._host.removeAttribute("data-theme");
296
+ this._host.setAttribute("data-theme", resolved);
297
297
  }
298
298
  }
299
299
  _installPlugin(plugin) {
package/dist/css.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /** ID used to prevent duplicate style injection. */
2
2
  export declare const STYLE_ID = "bpmnkit-canvas-styles-v1";
3
3
  /** Complete CSS for the BpmnCanvas component, injected once into `<head>`. */
4
- 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";
4
+ 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\n/* \u2500\u2500 Neon 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=\"neon\"] {\n --bpmnkit-bg: oklch(5% 0.025 270);\n --bpmnkit-grid: oklch(65% 0.28 280 / 0.22);\n --bpmnkit-shape-fill: oklch(7% 0.03 270 / 0.9);\n --bpmnkit-shape-stroke: oklch(65% 0.28 280);\n --bpmnkit-flow-stroke: oklch(72% 0.18 185);\n --bpmnkit-text: oklch(88% 0.02 270);\n --bpmnkit-highlight: oklch(72% 0.18 185);\n --bpmnkit-focus: oklch(65% 0.28 280);\n --bpmnkit-overlay-bg: oklch(8% 0.03 270 / 0.96);\n --bpmnkit-overlay-border: oklch(65% 0.28 280 / 0.25);\n}\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-pool-header,\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-lane-header {\n fill: oklch(65% 0.28 280 / 0.07);\n}\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-edge-hover-dot { fill: oklch(72% 0.18 185); }\n.bpmnkit-canvas-host[data-theme=\"neon\"] .bpmnkit-edge-waypoint-ball { fill: oklch(72% 0.18 185); }\n";
5
5
  /**
6
6
  * Injects the canvas stylesheet into `<head>` if not already present.
7
7
  * Safe to call multiple times — only one `<style>` tag is ever inserted.
package/dist/css.js CHANGED
@@ -208,6 +208,26 @@ export const CANVAS_CSS = `
208
208
  }
209
209
  .bpmnkit-canvas-host[data-theme="dark"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }
210
210
  .bpmnkit-canvas-host[data-theme="dark"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }
211
+
212
+ /* ── Neon theme ──────────────────────────────────────────────────── */
213
+ .bpmnkit-canvas-host[data-theme="neon"] {
214
+ --bpmnkit-bg: oklch(5% 0.025 270);
215
+ --bpmnkit-grid: oklch(65% 0.28 280 / 0.22);
216
+ --bpmnkit-shape-fill: oklch(7% 0.03 270 / 0.9);
217
+ --bpmnkit-shape-stroke: oklch(65% 0.28 280);
218
+ --bpmnkit-flow-stroke: oklch(72% 0.18 185);
219
+ --bpmnkit-text: oklch(88% 0.02 270);
220
+ --bpmnkit-highlight: oklch(72% 0.18 185);
221
+ --bpmnkit-focus: oklch(65% 0.28 280);
222
+ --bpmnkit-overlay-bg: oklch(8% 0.03 270 / 0.96);
223
+ --bpmnkit-overlay-border: oklch(65% 0.28 280 / 0.25);
224
+ }
225
+ .bpmnkit-canvas-host[data-theme="neon"] .bpmnkit-pool-header,
226
+ .bpmnkit-canvas-host[data-theme="neon"] .bpmnkit-lane-header {
227
+ fill: oklch(65% 0.28 280 / 0.07);
228
+ }
229
+ .bpmnkit-canvas-host[data-theme="neon"] .bpmnkit-edge-hover-dot { fill: oklch(72% 0.18 185); }
230
+ .bpmnkit-canvas-host[data-theme="neon"] .bpmnkit-edge-waypoint-ball { fill: oklch(72% 0.18 185); }
211
231
  `;
212
232
  /**
213
233
  * Injects the canvas stylesheet into `<head>` if not already present.
package/dist/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { BpmnDefinitions, BpmnDiEdge, BpmnDiShape, BpmnFlowElement, BpmnTextAnnotation } from "@bpmnkit/core";
2
2
  /** The color theme applied to the canvas. */
3
- export type Theme = "light" | "dark" | "auto";
3
+ export type Theme = "light" | "dark" | "auto" | "neon";
4
4
  /**
5
5
  * Controls how the diagram is initially positioned in the viewport.
6
6
  * - `"contain"` — scale and center the diagram to fill the available space (default)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bpmnkit/canvas",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -17,7 +17,7 @@
17
17
  "dist/**/*.d.ts"
18
18
  ],
19
19
  "dependencies": {
20
- "@bpmnkit/core": "0.0.11"
20
+ "@bpmnkit/core": "0.0.12"
21
21
  },
22
22
  "description": "Zero-dependency SVG BPMN viewer with pan/zoom, theming, and a plugin API",
23
23
  "keywords": [