npm - @bpmnkit/canvas - Versions diffs - 0.0.28 → 0.0.30 - Mend

@bpmnkit/canvas 0.0.28 → 0.0.30

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 (17) hide show

package/dist/css.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 /** 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/* \u2500\u2500 Highlight variants (AI improve preview) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-highlight--changed .bpmnkit-shape-body,\n.bpmnkit-highlight--changed .bpmnkit-event-body,\n.bpmnkit-highlight--changed .bpmnkit-gw-body,\n.bpmnkit-highlight--changed .bpmnkit-pool-body,\n.bpmnkit-highlight--changed .bpmnkit-lane-body {\n  stroke: var(--bpmnkit-warn, #d97706);\n  stroke-width: 2.5;\n}\n.bpmnkit-highlight--changed .bpmnkit-edge-path {\n  stroke: var(--bpmnkit-warn, #d97706);\n  stroke-width: 2.5;\n}\n.bpmnkit-highlight--new .bpmnkit-shape-body,\n.bpmnkit-highlight--new .bpmnkit-event-body,\n.bpmnkit-highlight--new .bpmnkit-gw-body,\n.bpmnkit-highlight--new .bpmnkit-pool-body,\n.bpmnkit-highlight--new .bpmnkit-lane-body {\n  fill: var(--bpmnkit-success-subtle, rgba(22, 163, 74, 0.12));\n  stroke: var(--bpmnkit-success, #16a34a);\n  stroke-width: 2.5;\n}\n.bpmnkit-highlight--new .bpmnkit-edge-path {\n  stroke: var(--bpmnkit-success, #16a34a);\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";
+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 Drill-down breadcrumb \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-breadcrumb {\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 4px 8px;\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 12px;\n  color: var(--bpmnkit-text, #333);\n  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.92));\n  border: 1px solid var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.12));\n  border-radius: 6px;\n  -webkit-user-select: none;\n  user-select: none;\n}\n.bpmnkit-breadcrumb-crumb {\n  cursor: pointer;\n  padding: 1px 4px;\n  border-radius: 4px;\n  background: none;\n  border: none;\n  color: inherit;\n  font: inherit;\n}\n.bpmnkit-breadcrumb-crumb:hover {\n  background: var(--bpmnkit-accent-subtle, rgba(26, 86, 219, 0.12));\n  color: var(--bpmnkit-highlight, #1a56db);\n}\n.bpmnkit-breadcrumb-crumb:last-child {\n  cursor: default;\n  font-weight: 600;\n}\n.bpmnkit-breadcrumb-sep {\n  opacity: 0.5;\n  pointer-events: 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/* \u2500\u2500 Highlight variants (AI improve preview) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-highlight--changed .bpmnkit-shape-body,\n.bpmnkit-highlight--changed .bpmnkit-event-body,\n.bpmnkit-highlight--changed .bpmnkit-gw-body,\n.bpmnkit-highlight--changed .bpmnkit-pool-body,\n.bpmnkit-highlight--changed .bpmnkit-lane-body {\n  stroke: var(--bpmnkit-warn, #d97706);\n  stroke-width: 2.5;\n}\n.bpmnkit-highlight--changed .bpmnkit-edge-path {\n  stroke: var(--bpmnkit-warn, #d97706);\n  stroke-width: 2.5;\n}\n.bpmnkit-highlight--new .bpmnkit-shape-body,\n.bpmnkit-highlight--new .bpmnkit-event-body,\n.bpmnkit-highlight--new .bpmnkit-gw-body,\n.bpmnkit-highlight--new .bpmnkit-pool-body,\n.bpmnkit-highlight--new .bpmnkit-lane-body {\n  fill: var(--bpmnkit-success-subtle, rgba(22, 163, 74, 0.12));\n  stroke: var(--bpmnkit-success, #16a34a);\n  stroke-width: 2.5;\n}\n.bpmnkit-highlight--new .bpmnkit-edge-path {\n  stroke: var(--bpmnkit-success, #16a34a);\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 Data objects / stores / groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-data-body,\n.bpmnkit-datastore-body {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n}\n.bpmnkit-group-body {\n  fill: none;\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n  stroke-dasharray: 8 4 1 4;\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 Drill-down button (collapsed sub-process) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-drilldown {\n  cursor: pointer;\n  pointer-events: all;\n}\n.bpmnkit-drilldown-box {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-shape-stroke, #404040);\n  stroke-width: 1.5;\n}\n.bpmnkit-drilldown:hover .bpmnkit-drilldown-box {\n  fill: var(--bpmnkit-accent-subtle, rgba(26, 86, 219, 0.12));\n  stroke: var(--bpmnkit-highlight, #1a56db);\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.bpmnkit-open-arrow {\n  fill: none;\n  stroke: var(--bpmnkit-flow-stroke, #404040);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n.bpmnkit-conditional-marker,\n.bpmnkit-msg-marker {\n  fill: var(--bpmnkit-shape-fill, #ffffff);\n  stroke: var(--bpmnkit-flow-stroke, #404040);\n  stroke-width: 1.5;\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";
 /**
  * Injects the canvas stylesheet into `<head>` if not already present.
  * Safe to call multiple times — only one `<style>` tag is ever inserted.

package/dist/css.js CHANGED Viewed

@@ -31,6 +31,47 @@ export const CANVAS_CSS = `
   outline: none;
 }
+/* ── Drill-down breadcrumb ───────────────────────────────────────── */
+.bpmnkit-breadcrumb {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  color: var(--bpmnkit-text, #333);
+  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.92));
+  border: 1px solid var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.bpmnkit-breadcrumb-crumb {
+  cursor: pointer;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+}
+.bpmnkit-breadcrumb-crumb:hover {
+  background: var(--bpmnkit-accent-subtle, rgba(26, 86, 219, 0.12));
+  color: var(--bpmnkit-highlight, #1a56db);
+}
+.bpmnkit-breadcrumb-crumb:last-child {
+  cursor: default;
+  font-weight: 600;
+}
+.bpmnkit-breadcrumb-sep {
+  opacity: 0.5;
+  pointer-events: none;
+}
 /* ── Shapes ─────────────────────────────────────────────────────── */
 .bpmnkit-shape {
   cursor: pointer;
@@ -115,6 +156,20 @@ export const CANVAS_CSS = `
   stroke-width: 3;
 }
+/* ── Data objects / stores / groups ──────────────────────────────── */
+.bpmnkit-data-body,
+.bpmnkit-datastore-body {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+}
+.bpmnkit-group-body {
+  fill: none;
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+  stroke-dasharray: 8 4 1 4;
+}
 /* ── Icons ───────────────────────────────────────────────────────── */
 .bpmnkit-icon {
   fill: none;
@@ -142,6 +197,21 @@ export const CANVAS_CSS = `
   pointer-events: none;
 }
+/* ── Drill-down button (collapsed sub-process) ───────────────────── */
+.bpmnkit-drilldown {
+  cursor: pointer;
+  pointer-events: all;
+}
+.bpmnkit-drilldown-box {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-shape-stroke, #404040);
+  stroke-width: 1.5;
+}
+.bpmnkit-drilldown:hover .bpmnkit-drilldown-box {
+  fill: var(--bpmnkit-accent-subtle, rgba(26, 86, 219, 0.12));
+  stroke: var(--bpmnkit-highlight, #1a56db);
+}
 /* ── Pool / Lane ─────────────────────────────────────────────────── */
 .bpmnkit-pool-body,
 .bpmnkit-lane-body {
@@ -190,6 +260,19 @@ export const CANVAS_CSS = `
 .bpmnkit-arrow-fill {
   fill: var(--bpmnkit-flow-stroke, #404040);
 }
+.bpmnkit-open-arrow {
+  fill: none;
+  stroke: var(--bpmnkit-flow-stroke, #404040);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.bpmnkit-conditional-marker,
+.bpmnkit-msg-marker {
+  fill: var(--bpmnkit-shape-fill, #ffffff);
+  stroke: var(--bpmnkit-flow-stroke, #404040);
+  stroke-width: 1.5;
+}
 /* ── Labels ─────────────────────────────────────────────────────── */
 .bpmnkit-label {

package/dist/index.d.ts CHANGED Viewed

@@ -64,9 +64,14 @@
  * @packageDocumentation
  */
 export { BpmnCanvas } from "./canvas.js";
-export type { CanvasApi, CanvasEvents, CanvasOptions, CanvasPlugin, FitMode, RenderedEdge, RenderedShape, Theme, ViewportState, } from "./types.js";
+export { Scene } from "./scene.js";
+export type { SceneLayers } from "./scene.js";
+export { OverlayManager } from "./overlays.js";
+export type { Overlay, OverlayFilter, OverlayHost, OverlayOptions, OverlayPosition, } from "./overlays.js";
+export type { CanvasApi, CanvasEvents, CanvasOptions, CanvasPlugin, FitMode, ImportWarnings, PlaneInfo, RenderedEdge, RenderedShape, ScreenBox, Theme, Viewbox, ViewportState, } from "./types.js";
 export { ViewportController } from "./viewport.js";
-export { render, computeDiagramBounds, createDefs, createGrid } from "./renderer.js";
+export { render, computeDiagramBounds, createDefs, createGrid, buildRenderContext, renderEdgeGroup, renderShapeGroup, } from "./renderer.js";
+export type { RenderContext, RenderedShapeGroup, ShapeLayer } from "./renderer.js";
 export { KeyboardHandler } from "./keyboard.js";
 export { injectStyles, CANVAS_CSS, STYLE_ID } from "./css.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js CHANGED Viewed

@@ -64,9 +64,11 @@
  * @packageDocumentation
  */
 export { BpmnCanvas } from "./canvas.js";
+export { Scene } from "./scene.js";
+export { OverlayManager } from "./overlays.js";
 // Internal exports for use by @bpmnkit/editor
 export { ViewportController } from "./viewport.js";
-export { render, computeDiagramBounds, createDefs, createGrid } from "./renderer.js";
+export { render, computeDiagramBounds, createDefs, createGrid, buildRenderContext, renderEdgeGroup, renderShapeGroup, } from "./renderer.js";
 export { KeyboardHandler } from "./keyboard.js";
 export { injectStyles, CANVAS_CSS, STYLE_ID } from "./css.js";
 //# sourceMappingURL=index.js.map

package/dist/measure.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/** Measures the rendered width (px) of `text` at the label font. */
+export declare function measureTextWidth(text: string): number;
+/**
+ * Splits `text` into lines that fit within `maxPx`, measuring each candidate.
+ * A word wider than `maxPx` is broken mid-word with a hyphen (bpmn-js parity).
+ */
+export declare function wrapText(text: string, maxPx: number): string[];
+//# sourceMappingURL=measure.d.ts.map

package/dist/measure.js ADDED Viewed

@@ -0,0 +1,114 @@
+// Real text measurement for label layout, with an SSR/test-safe fallback.
+//
+// In a browser we measure with an offscreen canvas 2D context (accurate and
+// fast, matching what bpmn-js does); where that is unavailable or unreliable
+// (SSR, jsdom/happy-dom) we fall back to an average character-width estimate.
+/** Approximate glyph width at the label font — the no-canvas fallback. */
+const AVG_CHAR_PX = 6.5;
+/** Font used for internal/external labels (mirrors `.bpmnkit-label` in css.ts). */
+const LABEL_FONT = "11px system-ui, -apple-system, sans-serif";
+const estimate = (text) => text.length * AVG_CHAR_PX;
+let _measure = null;
+/** Lazily resolves a measurer once, memoizing per unique string (bounded). */
+function resolveMeasurer() {
+    if (_measure)
+        return _measure;
+    if (typeof document === "undefined") {
+        _measure = estimate;
+        return _measure;
+    }
+    let ctx = null;
+    try {
+        ctx = document.createElement("canvas").getContext("2d");
+    }
+    catch {
+        ctx = null;
+    }
+    // Fall back when the environment has no working canvas text metrics
+    // (happy-dom/jsdom report 0-width) — keeps deterministic label wrapping.
+    if (!ctx) {
+        _measure = estimate;
+        return _measure;
+    }
+    ctx.font = LABEL_FONT;
+    const probe = ctx.measureText("MMMM").width;
+    if (!probe || !Number.isFinite(probe)) {
+        _measure = estimate;
+        return _measure;
+    }
+    const context = ctx;
+    const cache = new Map();
+    _measure = (text) => {
+        let w = cache.get(text);
+        if (w === undefined) {
+            w = context.measureText(text).width;
+            if (cache.size >= 5000)
+                cache.clear();
+            cache.set(text, w);
+        }
+        return w;
+    };
+    return _measure;
+}
+/** Measures the rendered width (px) of `text` at the label font. */
+export function measureTextWidth(text) {
+    return resolveMeasurer()(text);
+}
+/** Breaks a single word wider than `maxPx` into hyphenated chunks. */
+function hyphenate(word, maxPx) {
+    const out = [];
+    let chunk = "";
+    for (const ch of word) {
+        const tentative = chunk + ch;
+        // Reserve room for a trailing hyphen while a chunk is still growing.
+        if (chunk && measureTextWidth(`${tentative}-`) > maxPx) {
+            out.push(`${chunk}-`);
+            chunk = ch;
+        }
+        else {
+            chunk = tentative;
+        }
+    }
+    if (chunk)
+        out.push(chunk);
+    return out;
+}
+/**
+ * Splits `text` into lines that fit within `maxPx`, measuring each candidate.
+ * A word wider than `maxPx` is broken mid-word with a hyphen (bpmn-js parity).
+ */
+export function wrapText(text, maxPx) {
+    if (!text.trim())
+        return [];
+    const words = text.split(/\s+/);
+    const lines = [];
+    let line = "";
+    for (const word of words) {
+        const candidate = line ? `${line} ${word}` : word;
+        if (measureTextWidth(candidate) <= maxPx) {
+            line = candidate;
+            continue;
+        }
+        // The candidate overflows: flush the current line first.
+        if (line) {
+            lines.push(line);
+            line = "";
+        }
+        if (measureTextWidth(word) <= maxPx) {
+            line = word;
+        }
+        else {
+            const chunks = hyphenate(word, maxPx);
+            for (let i = 0; i < chunks.length - 1; i++) {
+                const c = chunks[i];
+                if (c)
+                    lines.push(c);
+            }
+            line = chunks[chunks.length - 1] ?? "";
+        }
+    }
+    if (line)
+        lines.push(line);
+    return lines.length > 0 ? lines : [text];
+}
+//# sourceMappingURL=measure.js.map

package/dist/overlays.d.ts ADDED Viewed

@@ -0,0 +1,86 @@
+import type { ScreenBox } from "./types.js";
+/** Placement of an overlay relative to its anchor element's bounding box. */
+export interface OverlayPosition {
+    /** Distance (px) of the overlay's top edge below the element's top edge. */
+    top?: number;
+    /** Distance (px) of the overlay's bottom edge above the element's bottom edge. */
+    bottom?: number;
+    /** Distance (px) of the overlay's left edge right of the element's left edge. */
+    left?: number;
+    /** Distance (px) of the overlay's right edge left of the element's right edge. */
+    right?: number;
+}
+/** Options for {@link OverlayManager.add}. */
+export interface OverlayOptions {
+    /** Where to anchor the overlay relative to the element. */
+    position: OverlayPosition;
+    /** Overlay content — an HTML string or a pre-built element. */
+    html: string | HTMLElement;
+    /** Zoom range in which the overlay is visible. */
+    show?: {
+        minZoom?: number;
+        maxZoom?: number;
+    };
+    /**
+     * Whether the overlay scales with zoom. `true` (default) scales 1:1 with the
+     * diagram; `false` keeps a constant pixel size; an object clamps the scale.
+     */
+    scale?: boolean | {
+        min?: number;
+        max?: number;
+    };
+    /** Optional tag for bulk queries and removal. */
+    type?: string;
+}
+/** A registered overlay. */
+export interface Overlay {
+    readonly id: string;
+    readonly element: string;
+    readonly type?: string;
+    readonly node: HTMLElement;
+}
+/** Filter for {@link OverlayManager.get} / {@link OverlayManager.remove}. */
+export interface OverlayFilter {
+    element?: string;
+    type?: string;
+}
+/** The host hooks an {@link OverlayManager} needs from a canvas or editor. */
+export interface OverlayHost {
+    /** The (position: relative) host element to mount the overlay layer into. */
+    readonly hostEl: HTMLElement;
+    /** Current zoom scale. */
+    getScale(): number;
+    /** Element bounding box in screen pixels relative to the host, or `null`. */
+    getBBox(id: string): ScreenBox | null;
+    /** Subscribes to viewport changes; returns an unsubscribe function. */
+    onViewportChange(cb: () => void): () => void;
+}
+/**
+ * Manages HTML overlays anchored to diagram elements. Overlays live in a
+ * dedicated absolutely-positioned layer above the SVG and are repositioned on
+ * every viewport change from the element's screen bounding box.
+ */
+export declare class OverlayManager {
+    private readonly _host;
+    private readonly _layer;
+    private readonly _overlays;
+    private readonly _unsub;
+    private _counter;
+    constructor(_host: OverlayHost);
+    /** Adds an overlay anchored to `elementId`. Returns its overlay id. */
+    add(elementId: string, opts: OverlayOptions): string;
+    /** Removes an overlay by id, or all overlays matching a filter. */
+    remove(idOrFilter: string | OverlayFilter): void;
+    /** Returns overlays matching a filter (all overlays when omitted). */
+    get(filter?: OverlayFilter): Overlay[];
+    /** Removes every overlay. */
+    clear(): void;
+    /** Repositions all overlays from their elements' current bounding boxes. */
+    reposition(): void;
+    /** Removes the overlay layer and unsubscribes from viewport changes. */
+    destroy(): void;
+    private _repositionAll;
+    private _position;
+    private _scaleFactor;
+}
+//# sourceMappingURL=overlays.d.ts.map

package/dist/overlays.js ADDED Viewed

@@ -0,0 +1,140 @@
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+/**
+ * Manages HTML overlays anchored to diagram elements. Overlays live in a
+ * dedicated absolutely-positioned layer above the SVG and are repositioned on
+ * every viewport change from the element's screen bounding box.
+ */
+export class OverlayManager {
+    _host;
+    _layer;
+    _overlays = new Map();
+    _unsub;
+    _counter = 0;
+    constructor(_host) {
+        this._host = _host;
+        this._layer = document.createElement("div");
+        this._layer.className = "bpmnkit-overlays";
+        this._layer.style.cssText =
+            "position:absolute;top:0;left:0;width:0;height:0;overflow:visible;pointer-events:none;";
+        this._host.hostEl.appendChild(this._layer);
+        this._unsub = this._host.onViewportChange(() => this._repositionAll());
+    }
+    /** Adds an overlay anchored to `elementId`. Returns its overlay id. */
+    add(elementId, opts) {
+        const node = document.createElement("div");
+        node.style.position = "absolute";
+        node.style.pointerEvents = "auto";
+        if (typeof opts.html === "string")
+            node.innerHTML = opts.html;
+        else
+            node.appendChild(opts.html);
+        if (opts.type)
+            node.dataset.overlayType = opts.type;
+        this._layer.appendChild(node);
+        const id = String(this._counter++);
+        const overlay = { id, element: elementId, type: opts.type, node, opts };
+        this._overlays.set(id, overlay);
+        this._position(overlay);
+        return id;
+    }
+    /** Removes an overlay by id, or all overlays matching a filter. */
+    remove(idOrFilter) {
+        if (typeof idOrFilter === "string") {
+            const overlay = this._overlays.get(idOrFilter);
+            if (overlay) {
+                overlay.node.remove();
+                this._overlays.delete(idOrFilter);
+            }
+            return;
+        }
+        for (const overlay of this.get(idOrFilter)) {
+            overlay.node.remove();
+            this._overlays.delete(overlay.id);
+        }
+    }
+    /** Returns overlays matching a filter (all overlays when omitted). */
+    get(filter) {
+        const all = [...this._overlays.values()];
+        if (!filter)
+            return all;
+        return all.filter((o) => (filter.element === undefined || o.element === filter.element) &&
+            (filter.type === undefined || o.type === filter.type));
+    }
+    /** Removes every overlay. */
+    clear() {
+        for (const overlay of this._overlays.values())
+            overlay.node.remove();
+        this._overlays.clear();
+    }
+    /** Repositions all overlays from their elements' current bounding boxes. */
+    reposition() {
+        this._repositionAll();
+    }
+    /** Removes the overlay layer and unsubscribes from viewport changes. */
+    destroy() {
+        this._unsub();
+        this.clear();
+        this._layer.remove();
+    }
+    // ── Private ───────────────────────────────────────────────────────
+    _repositionAll() {
+        for (const overlay of this._overlays.values())
+            this._position(overlay);
+    }
+    _position(overlay) {
+        const { node, opts } = overlay;
+        const box = this._host.getBBox(overlay.element);
+        if (!box) {
+            node.style.display = "none";
+            return;
+        }
+        const scale = this._host.getScale();
+        const min = opts.show?.minZoom ?? Number.NEGATIVE_INFINITY;
+        const max = opts.show?.maxZoom ?? Number.POSITIVE_INFINITY;
+        if (scale < min || scale > max) {
+            node.style.display = "none";
+            return;
+        }
+        node.style.display = "";
+        const { position } = opts;
+        const transforms = [];
+        let originX = "left";
+        let originY = "top";
+        let x = box.x;
+        let y = box.y;
+        if (position.left !== undefined) {
+            x = box.x + position.left;
+        }
+        else if (position.right !== undefined) {
+            x = box.x + box.width - position.right;
+            transforms.push("translateX(-100%)");
+            originX = "right";
+        }
+        if (position.top !== undefined) {
+            y = box.y + position.top;
+        }
+        else if (position.bottom !== undefined) {
+            y = box.y + box.height - position.bottom;
+            transforms.push("translateY(-100%)");
+            originY = "bottom";
+        }
+        node.style.left = `${x}px`;
+        node.style.top = `${y}px`;
+        const scaleFactor = this._scaleFactor(opts.scale, scale);
+        if (scaleFactor !== 1)
+            transforms.push(`scale(${scaleFactor})`);
+        node.style.transformOrigin = `${originX} ${originY}`;
+        node.style.transform = transforms.join(" ");
+    }
+    _scaleFactor(scale, zoom) {
+        // Default: scale 1:1 with the diagram.
+        if (scale === undefined || scale === true)
+            return zoom;
+        if (scale === false)
+            return 1;
+        return clamp(zoom, scale.min ?? 0, scale.max ?? Number.POSITIVE_INFINITY);
+    }
+}
+//# sourceMappingURL=overlays.js.map

package/dist/renderer.d.ts CHANGED Viewed

@@ -1,9 +1,40 @@
-import type { BpmnDefinitions } from "@bpmnkit/core";
+import type { BpmnAssociation, BpmnDefinitions, BpmnDiEdge, BpmnDiPlane, BpmnDiShape, BpmnFlowElement, BpmnGroup, BpmnLane, BpmnMessageFlow, BpmnParticipant, BpmnSequenceFlow, BpmnTextAnnotation } from "@bpmnkit/core";
 import type { RenderedEdge, RenderedShape } from "./types.js";
+/** The outline used to crop a connection to a shape. */
+interface ShapeGeom {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    kind: "circle" | "diamond" | "rect";
+}
+export interface ModelIndex {
+    /** id → BpmnFlowElement (all levels flattened) */
+    elements: Map<string, BpmnFlowElement>;
+    /** id → BpmnSequenceFlow */
+    flows: Map<string, BpmnSequenceFlow>;
+    /** id → BpmnTextAnnotation */
+    annotations: Map<string, BpmnTextAnnotation>;
+    /** id → BpmnParticipant */
+    participants: Map<string, BpmnParticipant>;
+    /** id → BpmnLane */
+    lanes: Map<string, BpmnLane>;
+    /** id → BpmnAssociation */
+    associations: Map<string, BpmnAssociation>;
+    /** id → BpmnGroup */
+    groups: Map<string, BpmnGroup>;
+    /** id → BpmnMessageFlow */
+    messageFlows: Map<string, BpmnMessageFlow>;
+    /** IDs of sequence flows that are the default flow of their source gateway */
+    defaultFlowIds: Set<string>;
+}
 /**
  * Creates the SVG `<defs>` section for this canvas instance.
  * Uses `instanceId` to make marker IDs unique per canvas, avoiding
  * conflicts when multiple canvases are mounted on the same page.
+ *
+ * @returns the filled-arrowhead marker ID (sequence-flow terminus). Other
+ *   marker IDs are derived from `instanceId` via {@link markerIds}.
  */
 export declare function createDefs(svg: SVGSVGElement, instanceId: string): string;
 /**
@@ -18,14 +49,45 @@ export interface RenderResult {
     edges: RenderedEdge[];
 }
 /**
- * Renders a `BpmnDefinitions` model into SVG element groups, appending them
- * to `edgesLayer` and `shapesLayer` respectively.
+ * Shared per-render state — a model index and docking geometry — reused by the
+ * full {@link render} pass and by single-element updates in the {@link Scene}.
+ */
+export interface RenderContext {
+    index: ModelIndex;
+    geomById: Map<string, ShapeGeom>;
+    drillableIds: ReadonlySet<string>;
+    instanceId: string;
+}
+/** Builds a {@link RenderContext} for a plane (index + docking geometry). */
+export declare function buildRenderContext(defs: BpmnDefinitions, plane: BpmnDiPlane, drillableIds: ReadonlySet<string>, instanceId: string): RenderContext;
+/** Renders a single edge's `<g>` (no DOM insertion). */
+export declare function renderEdgeGroup(edge: BpmnDiEdge, ctx: RenderContext): SVGGElement;
+/** Which layer a shape's `<g>` belongs to. */
+export type ShapeLayer = "containers" | "shapes";
+/** The result of rendering a single shape: its `<g>`, target layer, and external label. */
+export interface RenderedShapeGroup {
+    group: SVGGElement;
+    layer: ShapeLayer;
+    label: SVGGElement | null;
+    rendered: RenderedShape;
+}
+/** Renders a single shape's `<g>` (+ optional external label), without DOM insertion. */
+export declare function renderShapeGroup(shape: BpmnDiShape, ctx: RenderContext): RenderedShapeGroup;
+/**
+ * Renders a `BpmnDefinitions` model into SVG element groups, appending them to
+ * the provided layers. Thin wrapper over {@link buildRenderContext} +
+ * {@link renderEdgeGroup}/{@link renderShapeGroup}, retained for existing
+ * callers (the editor). New code should prefer the {@link Scene} class.
  *
  * Edges are placed below shapes (rendered first) so connection lines don't
- * cover shape bodies.  Shapes are rendered in DI order so container shapes
+ * cover shape bodies. Shapes are rendered in DI order so container shapes
  * (sub-processes) appear before their children.
  */
-export declare function render(defs: BpmnDefinitions, containersLayer: SVGGElement, edgesLayer: SVGGElement, shapesLayer: SVGGElement, labelsLayer: SVGGElement, markerId: string, instanceId: string): RenderResult;
+export declare function render(defs: BpmnDefinitions, containersLayer: SVGGElement, edgesLayer: SVGGElement, shapesLayer: SVGGElement, labelsLayer: SVGGElement, _markerId: string, instanceId: string,
+/** The DI plane to render. Defaults to the first diagram's plane. */
+targetPlane?: BpmnDiPlane,
+/** Element ids that own their own plane and can be drilled into. */
+drillableIds?: ReadonlySet<string>): RenderResult;
 export interface DiagramBounds {
     minX: number;
     minY: number;
@@ -33,8 +95,9 @@ export interface DiagramBounds {
     maxY: number;
 }
 /**
- * Computes the bounding box of all shapes in the first DI diagram plane.
- * Returns `null` if the diagram has no shapes.
+ * Computes the bounding box of all shapes in a DI plane (the first diagram's
+ * plane by default). Returns `null` if the plane has no shapes.
  */
-export declare function computeDiagramBounds(defs: BpmnDefinitions): DiagramBounds | null;
+export declare function computeDiagramBounds(defs: BpmnDefinitions, targetPlane?: BpmnDiPlane): DiagramBounds | null;
+export {};
 //# sourceMappingURL=renderer.d.ts.map