@bpmnkit/editor 0.0.35 → 0.2.0

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 (22) hide show
  1. package/dist/chrome.d.ts +24 -0
  2. package/dist/chrome.js +75 -0
  3. package/dist/css.d.ts +5 -4
  4. package/dist/css.js +231 -357
  5. package/dist/dock.js +58 -80
  6. package/dist/editor.d.ts +30 -2
  7. package/dist/editor.js +123 -84
  8. package/dist/headless.d.ts +21 -0
  9. package/dist/headless.js +17 -0
  10. package/dist/id.d.ts +25 -0
  11. package/dist/id.js +39 -0
  12. package/dist/index.d.ts +6 -0
  13. package/dist/index.js +4 -0
  14. package/dist/inject.d.ts +3 -0
  15. package/dist/inject.js +12 -0
  16. package/dist/modal.js +33 -53
  17. package/dist/modeling.d.ts +7 -6
  18. package/dist/modeling.js +28 -28
  19. package/dist/ops.d.ts +158 -0
  20. package/dist/ops.js +82 -0
  21. package/dist/types.d.ts +16 -0
  22. package/package.json +7 -3
package/dist/chrome.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ /** ID used to prevent duplicate chrome-token injection. */
2
+ export declare const CHROME_STYLE_ID = "bpmnkit-chrome-tokens-v1";
3
+ /**
4
+ * Theme variables for every piece of editor chrome — the HUD, the side dock and
5
+ * each `@bpmnkit/plugins` panel.
6
+ *
7
+ * The bpmnkit.com design system supplies the *form* (flat: no shadow, gradient
8
+ * or blur; square; depth is a 1px hairline), the *accent* and — since the shell
9
+ * moved onto the brief's `--canvas` ground — the *default ground* as well. Dark
10
+ * and the deliberate `neon` white-label theme are opt-in from there.
11
+ *
12
+ * Declaring them once here is what lets a panel stylesheet be a single set of
13
+ * rules instead of three near-identical copies. The attribute is the one the
14
+ * editor already owns: `data-bpmnkit-hud-theme` on `document.body`, which the
15
+ * HUD stamps with the canvas theme. Absent, chrome reads light — matching
16
+ * `@bpmnkit/canvas`, where light is likewise the themeless default.
17
+ *
18
+ * Values resolve from the `--bpmnkit-ds-*` tokens that `@bpmnkit/ui` owns, with
19
+ * a literal fallback so a package works standalone.
20
+ */
21
+ export declare const CHROME_CSS = "\n:root {\n --bpmnkit-chrome-ground: var(--bpmnkit-ds-surface, #ffffff);\n --bpmnkit-chrome-ground-2: var(--bpmnkit-ds-bg, #f4f5f7);\n --bpmnkit-chrome-line: var(--bpmnkit-ds-line, #d8dbe0);\n --bpmnkit-chrome-line-soft: var(--bpmnkit-ds-line-soft, #e4e6ea);\n --bpmnkit-chrome-ink: var(--bpmnkit-ds-ink, #14161a);\n --bpmnkit-chrome-ink-2: var(--bpmnkit-ds-ink-2, #4b5158);\n --bpmnkit-chrome-ink-4: var(--bpmnkit-ds-ink-4, #8b929c);\n --bpmnkit-chrome-accent: var(--bpmnkit-ds-accent, #a8503a);\n --bpmnkit-chrome-accent-fg: #ffffff;\n --bpmnkit-chrome-accent-subtle: rgba(168, 80, 58, 0.1);\n --bpmnkit-chrome-hover: var(--bpmnkit-ds-bg, #f4f5f7);\n /* A scrim is a dark veil over either ground, so it is not per-theme here. */\n --bpmnkit-chrome-scrim: color-mix(in srgb, var(--bpmnkit-ds-dark, #14161a) 62%, transparent);\n --bpmnkit-chrome-font: var(--bpmnkit-ds-font-sans, system-ui, -apple-system, sans-serif);\n --bpmnkit-chrome-mono: var(--bpmnkit-ds-font-mono, ui-monospace, SFMono-Regular, monospace);\n}\n\n[data-bpmnkit-hud-theme=\"dark\"] {\n --bpmnkit-chrome-ground: var(--bpmnkit-panel-bg, #0d0d16);\n --bpmnkit-chrome-ground-2: rgba(255, 255, 255, 0.04);\n --bpmnkit-chrome-line: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.14));\n --bpmnkit-chrome-line-soft: rgba(255, 255, 255, 0.08);\n --bpmnkit-chrome-ink: var(--bpmnkit-ds-ink-on-dark, #f4f5f7);\n --bpmnkit-chrome-ink-2: var(--bpmnkit-ds-ink-on-dark-2, #c8ccd2);\n --bpmnkit-chrome-ink-4: var(--bpmnkit-ds-ink-muted, #9aa1aa);\n --bpmnkit-chrome-accent: var(--bpmnkit-ds-accent-on-dark, #c9755c);\n --bpmnkit-chrome-accent-fg: var(--bpmnkit-ds-dark, #14161a);\n --bpmnkit-chrome-accent-subtle: rgba(201, 117, 92, 0.14);\n --bpmnkit-chrome-hover: rgba(255, 255, 255, 0.07);\n}\n\n/* Neon is a deliberate white-label theme and keeps its own hue. */\n[data-bpmnkit-hud-theme=\"neon\"] {\n --bpmnkit-chrome-ground: oklch(8% 0.03 270);\n --bpmnkit-chrome-ground-2: oklch(65% 0.28 280 / 0.06);\n --bpmnkit-chrome-line: oklch(65% 0.28 280 / 0.28);\n --bpmnkit-chrome-line-soft: oklch(65% 0.28 280 / 0.15);\n --bpmnkit-chrome-ink: oklch(88% 0.02 270);\n --bpmnkit-chrome-ink-2: oklch(73% 0.16 280);\n --bpmnkit-chrome-ink-4: oklch(50% 0.06 280);\n --bpmnkit-chrome-accent: oklch(72% 0.18 185);\n --bpmnkit-chrome-accent-fg: oklch(8% 0.03 270);\n --bpmnkit-chrome-accent-subtle: oklch(72% 0.18 185 / 0.14);\n --bpmnkit-chrome-hover: oklch(65% 0.28 280 / 0.12);\n --bpmnkit-chrome-scrim: oklch(5% 0.025 270 / 0.7);\n}\n";
22
+ /** Injects the shared chrome tokens into `<head>` if not already present. */
23
+ export declare function injectChromeStyles(): void;
24
+ //# sourceMappingURL=chrome.d.ts.map
package/dist/chrome.js ADDED
@@ -0,0 +1,75 @@
1
+ import { injectStyle } from "./inject.js";
2
+ /** ID used to prevent duplicate chrome-token injection. */
3
+ export const CHROME_STYLE_ID = "bpmnkit-chrome-tokens-v1";
4
+ /**
5
+ * Theme variables for every piece of editor chrome — the HUD, the side dock and
6
+ * each `@bpmnkit/plugins` panel.
7
+ *
8
+ * The bpmnkit.com design system supplies the *form* (flat: no shadow, gradient
9
+ * or blur; square; depth is a 1px hairline), the *accent* and — since the shell
10
+ * moved onto the brief's `--canvas` ground — the *default ground* as well. Dark
11
+ * and the deliberate `neon` white-label theme are opt-in from there.
12
+ *
13
+ * Declaring them once here is what lets a panel stylesheet be a single set of
14
+ * rules instead of three near-identical copies. The attribute is the one the
15
+ * editor already owns: `data-bpmnkit-hud-theme` on `document.body`, which the
16
+ * HUD stamps with the canvas theme. Absent, chrome reads light — matching
17
+ * `@bpmnkit/canvas`, where light is likewise the themeless default.
18
+ *
19
+ * Values resolve from the `--bpmnkit-ds-*` tokens that `@bpmnkit/ui` owns, with
20
+ * a literal fallback so a package works standalone.
21
+ */
22
+ export const CHROME_CSS = `
23
+ :root {
24
+ --bpmnkit-chrome-ground: var(--bpmnkit-ds-surface, #ffffff);
25
+ --bpmnkit-chrome-ground-2: var(--bpmnkit-ds-bg, #f4f5f7);
26
+ --bpmnkit-chrome-line: var(--bpmnkit-ds-line, #d8dbe0);
27
+ --bpmnkit-chrome-line-soft: var(--bpmnkit-ds-line-soft, #e4e6ea);
28
+ --bpmnkit-chrome-ink: var(--bpmnkit-ds-ink, #14161a);
29
+ --bpmnkit-chrome-ink-2: var(--bpmnkit-ds-ink-2, #4b5158);
30
+ --bpmnkit-chrome-ink-4: var(--bpmnkit-ds-ink-4, #8b929c);
31
+ --bpmnkit-chrome-accent: var(--bpmnkit-ds-accent, #a8503a);
32
+ --bpmnkit-chrome-accent-fg: #ffffff;
33
+ --bpmnkit-chrome-accent-subtle: rgba(168, 80, 58, 0.1);
34
+ --bpmnkit-chrome-hover: var(--bpmnkit-ds-bg, #f4f5f7);
35
+ /* A scrim is a dark veil over either ground, so it is not per-theme here. */
36
+ --bpmnkit-chrome-scrim: color-mix(in srgb, var(--bpmnkit-ds-dark, #14161a) 62%, transparent);
37
+ --bpmnkit-chrome-font: var(--bpmnkit-ds-font-sans, system-ui, -apple-system, sans-serif);
38
+ --bpmnkit-chrome-mono: var(--bpmnkit-ds-font-mono, ui-monospace, SFMono-Regular, monospace);
39
+ }
40
+
41
+ [data-bpmnkit-hud-theme="dark"] {
42
+ --bpmnkit-chrome-ground: var(--bpmnkit-panel-bg, #0d0d16);
43
+ --bpmnkit-chrome-ground-2: rgba(255, 255, 255, 0.04);
44
+ --bpmnkit-chrome-line: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.14));
45
+ --bpmnkit-chrome-line-soft: rgba(255, 255, 255, 0.08);
46
+ --bpmnkit-chrome-ink: var(--bpmnkit-ds-ink-on-dark, #f4f5f7);
47
+ --bpmnkit-chrome-ink-2: var(--bpmnkit-ds-ink-on-dark-2, #c8ccd2);
48
+ --bpmnkit-chrome-ink-4: var(--bpmnkit-ds-ink-muted, #9aa1aa);
49
+ --bpmnkit-chrome-accent: var(--bpmnkit-ds-accent-on-dark, #c9755c);
50
+ --bpmnkit-chrome-accent-fg: var(--bpmnkit-ds-dark, #14161a);
51
+ --bpmnkit-chrome-accent-subtle: rgba(201, 117, 92, 0.14);
52
+ --bpmnkit-chrome-hover: rgba(255, 255, 255, 0.07);
53
+ }
54
+
55
+ /* Neon is a deliberate white-label theme and keeps its own hue. */
56
+ [data-bpmnkit-hud-theme="neon"] {
57
+ --bpmnkit-chrome-ground: oklch(8% 0.03 270);
58
+ --bpmnkit-chrome-ground-2: oklch(65% 0.28 280 / 0.06);
59
+ --bpmnkit-chrome-line: oklch(65% 0.28 280 / 0.28);
60
+ --bpmnkit-chrome-line-soft: oklch(65% 0.28 280 / 0.15);
61
+ --bpmnkit-chrome-ink: oklch(88% 0.02 270);
62
+ --bpmnkit-chrome-ink-2: oklch(73% 0.16 280);
63
+ --bpmnkit-chrome-ink-4: oklch(50% 0.06 280);
64
+ --bpmnkit-chrome-accent: oklch(72% 0.18 185);
65
+ --bpmnkit-chrome-accent-fg: oklch(8% 0.03 270);
66
+ --bpmnkit-chrome-accent-subtle: oklch(72% 0.18 185 / 0.14);
67
+ --bpmnkit-chrome-hover: oklch(65% 0.28 280 / 0.12);
68
+ --bpmnkit-chrome-scrim: oklch(5% 0.025 270 / 0.7);
69
+ }
70
+ `;
71
+ /** Injects the shared chrome tokens into `<head>` if not already present. */
72
+ export function injectChromeStyles() {
73
+ injectStyle(CHROME_STYLE_ID, CHROME_CSS);
74
+ }
75
+ //# sourceMappingURL=chrome.js.map
package/dist/css.d.ts CHANGED
@@ -3,13 +3,14 @@ export declare const EDITOR_STYLE_ID = "bpmnkit-editor-styles-v1";
3
3
  /** ID used to prevent duplicate HUD style injection. */
4
4
  export declare const HUD_STYLE_ID = "bpmnkit-editor-hud-styles-v1";
5
5
  /** CSS for editor-specific overlays injected once into `<head>`. */
6
- export declare const EDITOR_CSS = "\n/* Visually-hidden live region for screen-reader announcements */\n.bpmnkit-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Keyboard-focus ring on the editor host \u2014 distinct from the selection outline */\n.bpmnkit-canvas-host:focus-visible {\n outline: 2px dashed var(--bpmnkit-accent-bright, #3b82f6);\n outline-offset: -2px;\n}\n\n/* Selection outline */\n.bpmnkit-sel-indicator {\n fill: none;\n stroke: var(--bpmnkit-accent, #1a56db);\n stroke-width: 1.5;\n pointer-events: none;\n}\n\n/* Resize handle */\n.bpmnkit-resize-handle {\n fill: #fff;\n stroke: var(--bpmnkit-accent, #1a56db);\n stroke-width: 1.5;\n cursor: nwse-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"n\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"s\"] {\n cursor: ns-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"e\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"w\"] {\n cursor: ew-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"ne\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"sw\"] {\n cursor: nesw-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"nw\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"se\"] {\n cursor: nwse-resize;\n}\n\n/* Connection port */\n.bpmnkit-conn-port {\n fill: var(--bpmnkit-accent, #1a56db);\n stroke: none;\n cursor: crosshair;\n opacity: 0.7;\n}\n.bpmnkit-conn-port:hover {\n opacity: 1;\n}\n\n/* Rubber-band selection */\n.bpmnkit-rubber-band {\n fill: rgba(0, 102, 204, 0.05);\n stroke: var(--bpmnkit-accent, #1a56db);\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n/* Ghost element (create / connect preview) */\n.bpmnkit-ghost {\n opacity: 0.45;\n pointer-events: none;\n}\n\n/* Ghost connection line */\n.bpmnkit-ghost-conn {\n stroke: var(--bpmnkit-accent, #1a56db);\n stroke-width: 1.5;\n stroke-dasharray: 6 3;\n fill: none;\n pointer-events: none;\n}\n\n/* Ghost connection over a target the rules forbid */\n.bpmnkit-ghost-conn-invalid {\n stroke: var(--bpmnkit-danger, #dc2626);\n}\n\n/* Resize preview rect */\n.bpmnkit-resize-preview {\n fill: rgba(0, 102, 204, 0.05);\n stroke: var(--bpmnkit-accent, #1a56db);\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n/* Alignment guide lines (snap helpers) */\n.bpmnkit-align-guide {\n stroke: var(--bpmnkit-accent-bright, #6b9df7);\n stroke-width: 1;\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n/* Edge transparent hit area (wide stroke for easier clicking) */\n.bpmnkit-edge-hitarea {\n fill: none;\n stroke: transparent;\n stroke-width: 12;\n cursor: pointer;\n}\n\n/* Edge hover dot (waypoint insertion indicator) */\n.bpmnkit-edge-hover-dot {\n fill: var(--bpmnkit-accent, #1a56db);\n stroke: #fff;\n stroke-width: 1.5;\n pointer-events: none;\n opacity: 0.85;\n}\n[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge waypoint angle balls (visible on edge hover) */\n.bpmnkit-edge-waypoint-ball {\n fill: var(--bpmnkit-accent, #1a56db);\n stroke: #fff;\n stroke-width: 1.5;\n cursor: move;\n}\n.bpmnkit-edge-waypoint-ball:hover { fill: var(--bpmnkit-accent, #1a56db); }\n[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge endpoint drag handles */\n.bpmnkit-edge-endpoint {\n fill: var(--bpmnkit-accent, #1a56db);\n stroke: #fff;\n stroke-width: 1.5;\n cursor: grab;\n}\n.bpmnkit-edge-endpoint:hover {\n fill: var(--bpmnkit-accent, #1a56db);\n}\n\n/* Ghost polyline when dragging an edge endpoint */\n.bpmnkit-endpoint-ghost {\n fill: none;\n stroke: var(--bpmnkit-accent, #1a56db);\n stroke-width: 1.5;\n stroke-dasharray: 5 3;\n pointer-events: none;\n}\n\n/* Edge split target highlight (shown while dragging a shape over an edge) */\n.bpmnkit-edge-split-highlight .bpmnkit-edge-path {\n stroke: var(--bpmnkit-success, #22c55e);\n stroke-width: 2.5;\n}\n\n/* Distance/spacing guide arrows */\n.bpmnkit-dist-guide {\n stroke: var(--bpmnkit-warn, #f97316);\n stroke-width: 1;\n fill: none;\n pointer-events: none;\n}\n\n/* Space tool split indicator line */\n.bpmnkit-space-line {\n stroke: var(--bpmnkit-warn, #f59e0b);\n stroke-width: 1.5;\n stroke-dasharray: 6 3;\n pointer-events: none;\n}\n\n/* Label editor */\n.bpmnkit-label-editor {\n position: absolute;\n min-width: 40px;\n min-height: 16px;\n padding: 1px 3px;\n background: #fff;\n border: 1px solid var(--bpmnkit-accent, #1a56db);\n border-radius: 2px;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 11px;\n text-align: center;\n outline: none;\n z-index: 10;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Boundary event attach highlight */\n.bpmnkit-boundary-host {\n fill: none;\n stroke: var(--bpmnkit-accent, #1a56db);\n stroke-width: 2;\n stroke-dasharray: 6 3;\n pointer-events: none;\n opacity: 0.7;\n}\n\n/* Duplicate-ID warning banner */\n.bpmnkit-editor-warning-banner {\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n max-width: calc(100% - 32px);\n padding: 6px 12px;\n border-radius: 6px;\n background: #fef3c7;\n border: 1px solid #f59e0b;\n color: #92400e;\n font-size: 12px;\n line-height: 1.4;\n pointer-events: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-editor-warning-banner {\n background: #451a03;\n border-color: #d97706;\n color: #fde68a;\n}\n\n/* Coarse pointers (touch): enlarge drag targets to a finger-friendly \u226524px.\n Resize handles are 7px rects centred on the corner; grow + recentre them.\n Endpoint / waypoint / port circles grow via the SVG geometry 'r' property. */\n@media (pointer: coarse) {\n .bpmnkit-resize-handle {\n width: 24px;\n height: 24px;\n transform: translate(-8.5px, -8.5px);\n }\n .bpmnkit-edge-endpoint,\n .bpmnkit-edge-waypoint-ball,\n .bpmnkit-conn-port {\n r: 12px;\n }\n}\n";
6
+ export declare const EDITOR_CSS = "\n/* Visually-hidden live region for screen-reader announcements */\n.bpmnkit-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Keyboard-focus ring on the editor host \u2014 distinct from the selection outline */\n.bpmnkit-canvas-host:focus-visible {\n outline: 2px dashed var(--bpmnkit-ds-accent, #a8503a);\n outline-offset: -2px;\n}\n\n/* Selection outline */\n.bpmnkit-sel-indicator {\n fill: none;\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-width: 1;\n stroke-dasharray: 4 3;\n pointer-events: none;\n}\n\n/* Resize handle */\n.bpmnkit-resize-handle {\n fill: #fff;\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-width: 1.5;\n cursor: nwse-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"n\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"s\"] {\n cursor: ns-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"e\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"w\"] {\n cursor: ew-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"ne\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"sw\"] {\n cursor: nesw-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"nw\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"se\"] {\n cursor: nwse-resize;\n}\n\n/* Connection port */\n.bpmnkit-conn-port {\n fill: var(--bpmnkit-ds-accent, #a8503a);\n stroke: none;\n cursor: crosshair;\n opacity: 0.7;\n}\n.bpmnkit-conn-port:hover {\n opacity: 1;\n}\n\n/* Rubber-band selection */\n.bpmnkit-rubber-band {\n fill: var(--bpmnkit-ds-accent, #a8503a);\n fill-opacity: 0.06;\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n/* Ghost element (create / connect preview) */\n.bpmnkit-ghost {\n opacity: 0.45;\n pointer-events: none;\n}\n\n/* Ghost connection line */\n.bpmnkit-ghost-conn {\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-width: 1.5;\n stroke-dasharray: 6 3;\n fill: none;\n pointer-events: none;\n}\n\n/* Ghost connection over a target the rules forbid */\n.bpmnkit-ghost-conn-invalid {\n stroke: var(--bpmnkit-danger, #dc2626);\n}\n\n/* Resize preview rect */\n.bpmnkit-resize-preview {\n fill: var(--bpmnkit-ds-accent, #a8503a);\n fill-opacity: 0.06;\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n/* Alignment guide lines (snap helpers) */\n.bpmnkit-align-guide {\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-width: 1;\n stroke-dasharray: 4 2;\n pointer-events: none;\n}\n\n/* Edge transparent hit area (wide stroke for easier clicking) */\n.bpmnkit-edge-hitarea {\n fill: none;\n stroke: transparent;\n stroke-width: 12;\n cursor: pointer;\n}\n\n/* Edge hover dot (waypoint insertion indicator) */\n.bpmnkit-edge-hover-dot {\n fill: var(--bpmnkit-ds-accent, #a8503a);\n stroke: #fff;\n stroke-width: 1.5;\n pointer-events: none;\n opacity: 0.85;\n}\n[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-ds-accent-on-dark, #c9755c); }\n\n/* Edge waypoint angle balls (visible on edge hover) */\n.bpmnkit-edge-waypoint-ball {\n fill: var(--bpmnkit-ds-accent, #a8503a);\n stroke: #fff;\n stroke-width: 1.5;\n cursor: move;\n}\n.bpmnkit-edge-waypoint-ball:hover { fill: var(--bpmnkit-ds-accent, #a8503a); }\n[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-ds-accent-on-dark, #c9755c); }\n\n/* Edge endpoint drag handles */\n.bpmnkit-edge-endpoint {\n fill: var(--bpmnkit-ds-accent, #a8503a);\n stroke: #fff;\n stroke-width: 1.5;\n cursor: grab;\n}\n.bpmnkit-edge-endpoint:hover {\n fill: var(--bpmnkit-ds-accent, #a8503a);\n}\n\n/* Ghost polyline when dragging an edge endpoint */\n.bpmnkit-endpoint-ghost {\n fill: none;\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-width: 1.5;\n stroke-dasharray: 5 3;\n pointer-events: none;\n}\n\n/* Edge split target highlight (shown while dragging a shape over an edge) */\n.bpmnkit-edge-split-highlight .bpmnkit-edge-path {\n stroke: var(--bpmnkit-success, #22c55e);\n stroke-width: 2.5;\n}\n\n/* Distance/spacing guide arrows */\n.bpmnkit-dist-guide {\n stroke: var(--bpmnkit-warn, #f97316);\n stroke-width: 1;\n fill: none;\n pointer-events: none;\n}\n\n/* Space tool split indicator line */\n.bpmnkit-space-line {\n stroke: var(--bpmnkit-warn, #f59e0b);\n stroke-width: 1.5;\n stroke-dasharray: 6 3;\n pointer-events: none;\n}\n\n/* Label editor */\n.bpmnkit-label-editor {\n position: absolute;\n min-width: 40px;\n min-height: 16px;\n padding: 1px 3px;\n background: #fff;\n border: 1px solid var(--bpmnkit-ds-accent, #a8503a);\n font-family: var(--bpmnkit-ds-font-sans, system-ui, -apple-system, sans-serif);\n font-size: 11px;\n text-align: center;\n outline: none;\n z-index: 10;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Boundary event attach highlight */\n.bpmnkit-boundary-host {\n fill: none;\n stroke: var(--bpmnkit-ds-accent, #a8503a);\n stroke-width: 2;\n stroke-dasharray: 6 3;\n pointer-events: none;\n opacity: 0.7;\n}\n\n/* Duplicate-ID warning banner */\n.bpmnkit-editor-warning-banner {\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n max-width: calc(100% - 32px);\n padding: 6px 12px;\n background: #fef3c7;\n border: 1px solid #f59e0b;\n color: #92400e;\n font-size: 12px;\n line-height: 1.4;\n pointer-events: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-editor-warning-banner {\n background: #451a03;\n border-color: #d97706;\n color: #fde68a;\n}\n\n/* Coarse pointers (touch): enlarge drag targets to a finger-friendly \u226524px.\n Resize handles are 7px rects centred on the corner; grow + recentre them.\n Endpoint / waypoint / port circles grow via the SVG geometry 'r' property. */\n@media (pointer: coarse) {\n .bpmnkit-resize-handle {\n width: 24px;\n height: 24px;\n transform: translate(-8.5px, -8.5px);\n }\n .bpmnkit-edge-endpoint,\n .bpmnkit-edge-waypoint-ball,\n .bpmnkit-conn-port {\n r: 12px;\n }\n}\n";
7
7
  /** Injects the editor stylesheet into `<head>` if not already present. */
8
8
  export declare function injectEditorStyles(): void;
9
9
  /** CSS for the editor HUD — panels, buttons, dropdowns, group picker.
10
- * Dark theme is the default. Light theme is activated by setting
11
- * `data-bpmnkit-hud-theme="light"` on `document.body`. */
12
- export declare const HUD_CSS = "\n/* \u2500\u2500 HUD base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.hud { position: absolute; z-index: 100; }\n\n/* \u2500\u2500 Dark 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\u2500 */\n.panel {\n display: flex; align-items: center; gap: 2px; padding: 4px;\n background: var(--bpmnkit-panel-bg, rgba(13, 13, 22, 0.92));\n backdrop-filter: blur(10px);\n border: 1px solid var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n border-radius: 10px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);\n}\n\n/* \u2500\u2500 HUD positions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#hud-top-center { top: 0; left: 50%; transform: translateX(-50%); height: 36px; }\n#hud-bottom-left { bottom: 10px; left: 10px; }\n#hud-bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }\n#ctx-toolbar { display: none; transform: translateX(-50%); }\n#cfg-toolbar { display: none; transform: translate(-50%, -100%); }\n\n/* \u2500\u2500 Top center: strip floating card, merge into tab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n#hud-top-center.panel {\n background: transparent;\n backdrop-filter: none;\n border: none;\n border-radius: 0;\n box-shadow: none;\n padding: 0 2px;\n /* Pass clicks through the transparent background to the tab bar center slot. */\n pointer-events: none;\n}\n#hud-top-center.panel > * {\n pointer-events: auto;\n}\n\n/* \u2500\u2500 Icon buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.hud-btn {\n display: flex; align-items: center; justify-content: center;\n width: 32px; height: 32px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n color: var(--bpmnkit-fg-muted, rgba(255,255,255,0.6));\n cursor: pointer;\n transition: background 0.1s, color 0.1s, border-color 0.1s;\n padding: 0; flex-shrink: 0;\n}\n.hud-btn:hover { background: rgba(255,255,255,0.08); color: var(--bpmnkit-fg, #cdd6f4); }\n.hud-btn.active { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.2); }\n.hud-btn:disabled { opacity: 0.28; cursor: default; }\n.hud-btn:disabled:hover { background: transparent; color: rgba(255,255,255,0.6); }\n.hud-btn svg { width: 16px; height: 16px; pointer-events: none; }\n\n/* \u2500\u2500 Group button: small chevron at bottom-right corner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.hud-btn[data-group] { position: relative; }\n.hud-btn[data-group]::after {\n content: '';\n position: absolute; bottom: 3px; right: 3px;\n width: 0; height: 0;\n border-left: 3px solid transparent;\n border-top: 3px solid currentColor;\n opacity: 0.55;\n}\n\n/* \u2500\u2500 Tool groups container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#tool-groups { display: flex; align-items: center; gap: 2px; }\n\n/* \u2500\u2500 Separator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.hud-sep { width: 1px; height: 20px; background: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08)); margin: 0 2px; flex-shrink: 0; }\n\n/* \u2500\u2500 Zoom widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#btn-zoom-current {\n padding: 0 10px; height: 32px;\n background: transparent; border: 1px solid transparent; border-radius: 7px;\n color: rgba(255,255,255,0.6); cursor: pointer;\n font-size: 12px; font-weight: 600;\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n}\n#btn-zoom-current:hover { background: rgba(255,255,255,0.08); color: #fff; }\n\n#zoom-expanded { display: none; align-items: center; gap: 2px; }\n#zoom-expanded.open { display: flex; }\n\n#btn-zoom-pct {\n padding: 0 8px; height: 30px;\n background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;\n color: rgba(255,255,255,0.75); cursor: pointer;\n font-size: 12px; font-weight: 600;\n transition: background 0.1s, color 0.1s;\n white-space: nowrap; min-width: 60px; text-align: center;\n}\n#btn-zoom-pct:hover { background: rgba(255,255,255,0.12); color: #fff; }\n\n/* \u2500\u2500 Dropdown menus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.dropdown {\n position: absolute; display: none; flex-direction: column;\n gap: 1px; padding: 4px;\n background: var(--bpmnkit-panel-bg, rgba(13, 13, 22, 0.92));\n backdrop-filter: blur(12px);\n border: 1px solid var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n border-radius: 9px;\n box-shadow: 0 6px 24px rgba(0,0,0,0.5);\n z-index: 200; min-width: 150px;\n}\n.dropdown.open { display: flex; }\n\n.drop-item {\n display: flex; align-items: center; gap: 8px;\n padding: 7px 10px;\n border: none; background: transparent;\n color: rgba(255,255,255,0.75); cursor: pointer;\n border-radius: 6px; font-size: 12px; text-align: left; width: 100%;\n transition: background 0.1s;\n}\n.drop-item:hover { background: rgba(255,255,255,0.08); color: #fff; }\n.drop-item .di-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--bpmnkit-accent, #6b9df7); }\n.drop-item .di-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }\n.drop-item svg { width: 14px; height: 14px; }\n.drop-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 3px 0; }\n.drop-label {\n padding: 4px 10px 2px;\n font-size: 10px; font-weight: 600; letter-spacing: 0.06em;\n color: rgba(255,255,255,0.3); text-transform: uppercase;\n}\n\n/* \u2500\u2500 Group element picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.group-picker {\n position: absolute;\n display: flex; flex-direction: row;\n gap: 2px; padding: 4px;\n background: var(--bpmnkit-panel-bg, rgba(13, 13, 22, 0.92));\n backdrop-filter: blur(12px);\n border: 1px solid var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n border-radius: 9px;\n box-shadow: 0 6px 24px rgba(0,0,0,0.5);\n z-index: 300;\n}\n.group-picker-label {\n padding: 2px 6px 4px;\n font-size: 10px; font-weight: 600; letter-spacing: 0.05em;\n color: rgba(255,255,255,0.3); text-transform: uppercase;\n white-space: nowrap; align-self: center;\n border-right: 1px solid rgba(255,255,255,0.08);\n margin-right: 2px;\n}\n\n/* \u2500\u2500 Light theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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[data-bpmnkit-hud-theme=\"light\"] .panel {\n background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.92));\n border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n[data-bpmnkit-hud-theme=\"light\"] #hud-top-center.panel {\n background: transparent;\n backdrop-filter: none;\n border: none;\n box-shadow: none;\n}\n[data-bpmnkit-hud-theme=\"light\"] .hud-btn { color: var(--bpmnkit-fg-muted, #6666a0); }\n[data-bpmnkit-hud-theme=\"light\"] .hud-btn:hover { background: rgba(0,0,0,0.06); color: var(--bpmnkit-fg, #1a1a2e); }\n[data-bpmnkit-hud-theme=\"light\"] .hud-btn.active { background: rgba(0,0,0,0.08); color: var(--bpmnkit-fg, #1a1a2e); border-color: rgba(0,0,0,0.15); }\n[data-bpmnkit-hud-theme=\"light\"] .hud-btn:disabled:hover { background: transparent; color: var(--bpmnkit-fg-muted, #6666a0); }\n[data-bpmnkit-hud-theme=\"light\"] .hud-sep { background: var(--bpmnkit-panel-border, rgba(0,0,0,0.08)); }\n[data-bpmnkit-hud-theme=\"light\"] #btn-zoom-current { color: var(--bpmnkit-fg-muted, #6666a0); }\n[data-bpmnkit-hud-theme=\"light\"] #btn-zoom-current:hover { background: rgba(0,0,0,0.06); color: var(--bpmnkit-fg, #1a1a2e); }\n[data-bpmnkit-hud-theme=\"light\"] #btn-zoom-pct {\n background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--bpmnkit-fg-muted, #6666a0);\n}\n[data-bpmnkit-hud-theme=\"light\"] #btn-zoom-pct:hover { background: rgba(0,0,0,0.08); color: var(--bpmnkit-fg, #1a1a2e); }\n[data-bpmnkit-hud-theme=\"light\"] .dropdown {\n background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.92));\n border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));\n box-shadow: 0 6px 24px rgba(0,0,0,0.15);\n}\n[data-bpmnkit-hud-theme=\"light\"] .drop-item { color: var(--bpmnkit-fg-muted, #6666a0); }\n[data-bpmnkit-hud-theme=\"light\"] .drop-item:hover { background: rgba(0,0,0,0.05); color: var(--bpmnkit-fg, #1a1a2e); }\n[data-bpmnkit-hud-theme=\"light\"] .drop-sep { background: var(--bpmnkit-border, #d0d0e8); }\n[data-bpmnkit-hud-theme=\"light\"] .drop-label { color: rgba(0,0,0,0.35); }\n[data-bpmnkit-hud-theme=\"light\"] .group-picker {\n background: var(--bpmnkit-panel-bg, rgba(255,255,255,0.92));\n border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));\n box-shadow: 0 6px 24px rgba(0,0,0,0.15);\n}\n[data-bpmnkit-hud-theme=\"light\"] .group-picker-label {\n color: rgba(0,0,0,0.35);\n border-right-color: rgba(0,0,0,0.08);\n}\n\n/* \u2500\u2500 Neon theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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[data-bpmnkit-hud-theme=\"neon\"] .panel {\n background: oklch(8% 0.03 270 / 0.96);\n border-color: oklch(65% 0.28 280 / 0.2);\n box-shadow: 0 2px 16px oklch(65% 0.28 280 / 0.12), 0 0 0 1px oklch(65% 0.28 280 / 0.1);\n}\n[data-bpmnkit-hud-theme=\"neon\"] #hud-top-center.panel {\n background: transparent; backdrop-filter: none; border: none; box-shadow: none;\n}\n[data-bpmnkit-hud-theme=\"neon\"] .hud-btn { color: oklch(65% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .hud-btn:hover { background: oklch(65% 0.28 280 / 0.12); color: oklch(88% 0.02 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .hud-btn.active { background: oklch(65% 0.28 280 / 0.18); color: oklch(73% 0.16 280); border-color: oklch(65% 0.28 280 / 0.35); }\n[data-bpmnkit-hud-theme=\"neon\"] .hud-sep { background: oklch(65% 0.28 280 / 0.15); }\n[data-bpmnkit-hud-theme=\"neon\"] .dropdown {\n background: oklch(8% 0.03 270 / 0.97);\n border-color: oklch(65% 0.28 280 / 0.2);\n box-shadow: 0 6px 24px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(65% 0.28 280 / 0.1);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .drop-item { color: oklch(65% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .drop-item:hover { background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .drop-sep { background: oklch(65% 0.28 280 / 0.15); }\n[data-bpmnkit-hud-theme=\"neon\"] .drop-label { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .group-picker {\n background: oklch(8% 0.03 270 / 0.97);\n border-color: oklch(65% 0.28 280 / 0.2);\n box-shadow: 0 6px 24px oklch(0% 0 0 / 0.6);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .group-picker-label { color: oklch(50% 0.06 280); border-right-color: oklch(65% 0.28 280 / 0.15); }\n\n/* \u2500\u2500 Reference link button (wider text variant of hud-btn) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.ref-link-btn {\n height: 32px; padding: 0 8px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n color: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n font-size: 12px;\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 0;\n transition: background 0.1s, color 0.1s;\n align-self: center;\n}\n.ref-link-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }\n[data-bpmnkit-hud-theme=\"light\"] .ref-link-btn { color: var(--bpmnkit-fg-muted, #6666a0); }\n[data-bpmnkit-hud-theme=\"light\"] .ref-link-btn:hover { background: rgba(0,0,0,0.06); color: var(--bpmnkit-fg, #1a1a2e); }\n\n/* \u2500\u2500 Color swatches \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-color-swatches { display: flex; gap: 4px; padding: 2px 4px; align-items: center; }\n.bpmnkit-color-swatch {\n width: 16px; height: 16px; border-radius: 50%; cursor: pointer;\n border: 2px solid transparent; flex-shrink: 0;\n transition: transform 0.1s;\n padding: 0;\n}\n.bpmnkit-color-swatch:hover { transform: scale(1.2); }\n.bpmnkit-color-swatch.active { border-color: rgba(255,255,255,0.8); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-color-swatch.active { border-color: rgba(0,0,0,0.5); }\n.bpmnkit-color-swatch--default {\n background: transparent; border-color: rgba(255,255,255,0.25);\n position: relative; overflow: hidden;\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-color-swatch--default { border-color: rgba(0,0,0,0.2); }\n.bpmnkit-color-swatch--default::after {\n content: ''; position: absolute;\n top: 1px; left: 50%; transform: translateX(-50%) rotate(-45deg);\n width: 1.5px; height: calc(100% - 2px);\n background: rgba(200,50,50,0.65); border-radius: 1px;\n}\n\n/* \u2500\u2500 Contextual Ask-AI button (tinted blue) \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.ctx-ask-ai-btn { color: var(--bpmnkit-accent-bright, #89b4fa); opacity: 0.8; }\n.ctx-ask-ai-btn:hover { background: rgba(76, 142, 247, 0.15); color: #a8c8ff; opacity: 1; }\n[data-bpmnkit-hud-theme=\"light\"] .ctx-ask-ai-btn { color: var(--bpmnkit-accent, #1a56db); opacity: 0.7; }\n[data-bpmnkit-hud-theme=\"light\"] .ctx-ask-ai-btn:hover { background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)); color: var(--bpmnkit-accent, #1a56db); opacity: 1; }\n\n/* \u2500\u2500 New-diagram onboarding overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-empty-state {\n position: absolute; z-index: 50;\n top: 36px; left: 0; bottom: 0; right: 0;\n display: flex; align-items: center; justify-content: center;\n background: var(--bpmnkit-bg, #0d0d16);\n}\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-empty-state { background: var(--bpmnkit-bg, #f4f4f8); }\n[data-bpmnkit-hud-theme=\"neon\"] #bpmnkit-empty-state { background: oklch(5% 0.025 270); }\n\n.bpmnkit-onboard-inner {\n display: flex; flex-direction: column; align-items: center;\n gap: 28px; padding: 24px; max-width: 580px; width: 100%;\n}\n.bpmnkit-onboard-header { text-align: center; }\n.bpmnkit-onboard-title {\n color: rgba(255,255,255,0.82); font-size: 16px; font-weight: 600; margin: 0 0 7px;\n}\n.bpmnkit-onboard-sub {\n color: rgba(255,255,255,0.36); font-size: 13px; margin: 0;\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-title { color: rgba(0,0,0,0.72); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-sub { color: rgba(0,0,0,0.38); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-title { color: oklch(88% 0.02 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-sub { color: oklch(50% 0.06 280); }\n\n.bpmnkit-onboard-actions { display: flex; gap: 10px; width: 100%; }\n\n.bpmnkit-onboard-btn {\n flex: 1; display: flex; flex-direction: column; align-items: flex-start;\n gap: 10px; padding: 16px 14px;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 10px; cursor: pointer; text-align: left;\n color: inherit; transition: background 0.15s, border-color 0.15s;\n}\n.bpmnkit-onboard-btn:hover {\n background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-btn {\n background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-btn:hover {\n background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-btn {\n background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.15);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-btn:hover {\n background: oklch(65% 0.28 280 / 0.1); border-color: oklch(65% 0.28 280 / 0.28);\n}\n\n.bpmnkit-onboard-btn-icon {\n display: flex; align-items: center; justify-content: center;\n width: 32px; height: 32px; border-radius: 8px;\n background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); flex-shrink: 0;\n}\n.bpmnkit-onboard-btn-icon svg { width: 16px; height: 16px; pointer-events: none; }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-btn-icon {\n background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.55);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-btn-icon {\n background: oklch(65% 0.28 280 / 0.1); color: oklch(73% 0.16 280);\n}\n\n.bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {\n background: rgba(76,142,247,0.18); color: #8ab8ff;\n}\n.bpmnkit-onboard-btn--ai:hover { border-color: rgba(76,142,247,0.3); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {\n background: rgba(26,86,219,0.1); color: #1a56db;\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-btn--ai:hover { border-color: rgba(26,86,219,0.28); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {\n background: oklch(72% 0.18 185 / 0.15); color: oklch(72% 0.18 185);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-btn--ai:hover { border-color: oklch(72% 0.18 185 / 0.35); }\n\n.bpmnkit-onboard-btn-label { display: flex; flex-direction: column; gap: 3px; }\n.bpmnkit-onboard-btn-title {\n font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0;\n}\n.bpmnkit-onboard-btn-desc {\n font-size: 11px; color: rgba(255,255,255,0.32); margin: 0; line-height: 1.4;\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-btn-title { color: rgba(0,0,0,0.72); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-btn-desc { color: rgba(0,0,0,0.36); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-btn-title { color: oklch(82% 0.04 270); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-btn-desc { color: oklch(50% 0.06 280); }\n\n.bpmnkit-onboard-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }\n.bpmnkit-onboard-links a {\n color: rgba(255,255,255,0.22); font-size: 11px; text-decoration: none; transition: color 0.1s;\n}\n.bpmnkit-onboard-links a:hover { color: rgba(255,255,255,0.55); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-links a { color: rgba(0,0,0,0.25); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-onboard-links a:hover { color: rgba(0,0,0,0.6); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-links a { color: oklch(45% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-onboard-links a:hover { color: oklch(65% 0.1 280); }\n\n@media (max-width: 520px) {\n .bpmnkit-onboard-actions { flex-direction: column; }\n .bpmnkit-onboard-btn { flex-direction: row; align-items: center; gap: 12px; }\n .bpmnkit-onboard-btn-label { flex-direction: column; }\n}\n\n/* \u2500\u2500 Top-center overflow guard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#hud-top-center {\n max-width: calc(100% - 24px);\n overflow-x: auto; overflow-y: visible;\n scrollbar-width: none;\n}\n#hud-top-center::-webkit-scrollbar { display: none; }\n\n/* \u2500\u2500 Push HUD toolbar down when simulation banner is visible \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-sim-active #hud-top-center { top: 36px; }\n\n/* \u2500\u2500 Simulation active banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sim-banner {\n position: absolute;\n top: 0; left: 0; right: 0;\n z-index: 150;\n display: flex; align-items: center; justify-content: center; gap: 12px;\n padding: 7px 16px;\n background: rgba(217, 119, 6, 0.18);\n border-bottom: 1px solid rgba(217, 119, 6, 0.35);\n backdrop-filter: blur(6px);\n font-size: 12px; font-weight: 500;\n color: rgba(255, 193, 87, 0.95);\n pointer-events: auto;\n}\n#bpmnkit-sim-banner.hidden { display: none; }\n#bpmnkit-sim-banner-exit {\n padding: 3px 10px; border-radius: 5px;\n background: rgba(217, 119, 6, 0.22);\n border: 1px solid rgba(217, 119, 6, 0.4);\n color: inherit; cursor: pointer; font-size: 11px; font-weight: 600;\n transition: background 0.1s;\n}\n#bpmnkit-sim-banner-exit:hover { background: rgba(217, 119, 6, 0.35); }\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-sim-banner {\n background: rgba(254, 243, 199, 0.95);\n border-bottom-color: rgba(217, 119, 6, 0.25);\n color: #92400e;\n}\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-sim-banner-exit {\n background: rgba(217, 119, 6, 0.1); border-color: rgba(217, 119, 6, 0.3);\n}\n\n/* \u2500\u2500 Context menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-ctx-menu { min-width: 160px; }\n\n/* \u2500\u2500 Element search bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-search-bar {\n position: absolute;\n top: 44px; left: 50%; transform: translateX(-50%);\n z-index: 120;\n display: flex; align-items: center; gap: 6px;\n padding: 5px 10px;\n background: rgba(22, 22, 30, 0.92);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.4);\n}\n#bpmnkit-search-bar.hidden { display: none; }\n#bpmnkit-search-input {\n width: 220px; padding: 3px 6px;\n background: transparent; border: none;\n color: #fff; font-size: 13px; outline: none;\n}\n#bpmnkit-search-input::placeholder { color: rgba(255,255,255,0.35); }\n#bpmnkit-search-count {\n font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; min-width: 40px;\n}\n#bpmnkit-search-close {\n background: transparent; border: none; color: rgba(255,255,255,0.4);\n cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;\n}\n#bpmnkit-search-close:hover { color: #fff; }\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-search-bar {\n background: rgba(252, 252, 254, 0.96);\n border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));\n box-shadow: 0 4px 16px rgba(0,0,0,0.12);\n}\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-search-input { color: rgba(0,0,0,0.9); }\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-search-input::placeholder { color: rgba(0,0,0,0.3); }\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-search-count { color: rgba(0,0,0,0.4); }\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-search-close { color: rgba(0,0,0,0.35); }\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-search-close:hover { color: rgba(0,0,0,0.8); }\n\n/* \u2500\u2500 Keyboard shortcuts modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-shortcuts-modal {\n position: absolute; inset: 0; z-index: 200;\n display: flex; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.55);\n backdrop-filter: blur(4px);\n}\n#bpmnkit-shortcuts-modal.hidden { display: none; }\n#bpmnkit-shortcuts-inner {\n background: var(--bpmnkit-surface-2, #1e1e2e);\n border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0,0,0,0.5);\n padding: 20px 24px;\n min-width: 320px; max-width: 480px;\n color: rgba(255,255,255,0.85);\n}\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-shortcuts-inner {\n background: var(--bpmnkit-surface, #fff);\n border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));\n box-shadow: 0 8px 32px rgba(0,0,0,0.15);\n color: rgba(0,0,0,0.8);\n}\n#bpmnkit-shortcuts-inner h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; }\n.bpmnkit-sc-row {\n display: flex; justify-content: space-between; align-items: center;\n padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12px;\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-sc-row { border-bottom-color: rgba(0,0,0,0.06); }\n.bpmnkit-sc-row:last-child { border-bottom: none; }\n.bpmnkit-sc-key {\n font-family: var(--font-mono, monospace);\n background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);\n border-radius: 4px; padding: 1px 6px; font-size: 11px;\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-sc-key {\n background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.7);\n}\n#bpmnkit-shortcuts-close {\n display: block; margin: 14px auto 0; padding: 6px 20px;\n background: var(--bpmnkit-surface-2, rgba(255,255,255,0.08)); border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));\n border-radius: 6px; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 12px;\n transition: background 0.1s;\n}\n#bpmnkit-shortcuts-close:hover { background: rgba(255,255,255,0.14); color: #fff; }\n[data-bpmnkit-hud-theme=\"light\"] #bpmnkit-shortcuts-close {\n background: var(--bpmnkit-surface-2, rgba(0,0,0,0.05)); border-color: var(--bpmnkit-border, #d0d0e8); color: rgba(0,0,0,0.6);\n}\n\n/* \u2500\u2500 Mobile: collapsible center toolbars \u2500\u2500\u2500\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#btn-bc-toggle, #btn-tc-toggle { display: none; }\n\n@media (max-width: 600px) {\n #hud-top-center { display: none !important; }\n #hud-bottom-left { display: none !important; }\n\n #hud-bottom-center {\n left: 10px;\n transform: none;\n }\n\n #btn-bc-toggle { display: flex; }\n\n /* Collapsed: hide all children except the toggle button */\n #hud-bottom-center:not(.expanded) > *:not(#btn-bc-toggle) { display: none; }\n\n /* Expanded: highlight the toggle button as a close affordance */\n #hud-bottom-center.expanded #btn-bc-toggle {\n background: rgba(255,255,255,0.08); color: #fff;\n }\n [data-bpmnkit-hud-theme=\"light\"] #hud-bottom-center.expanded #btn-bc-toggle {\n background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.9);\n }\n}\n\n/* Hide bottom toolbar on welcome screen */\n.bpmnkit-welcome-active #hud-bottom-center { display: none !important; }\n";
10
+ * Flat, square and hairline-ruled per the bpmnkit.com design system.
11
+ * The light `--canvas` ground is the default; `data-bpmnkit-hud-theme="dark"`
12
+ * (or `"neon"`) on `document.body` switches it. */
13
+ export declare const HUD_CSS = "\n/* \u2500\u2500 HUD chrome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 The bpmnkit.com design system applied to the editor's chrome: flat\n (no shadow, gradient or blur), square, and bounded by 1px hairlines.\n The per-theme grounds it reads are declared once in chrome.ts.\n The diagram itself is renderer-owned and untouched by this sheet.\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.hud { position: absolute; z-index: 100; }\n\n/* A toolbar or palette is ONE bordered box with internal hairlines \u2014\n never individually bordered buttons and never gaps. */\n.panel {\n display: flex; align-items: stretch;\n background: var(--bpmnkit-chrome-ground);\n border: 1px solid var(--bpmnkit-chrome-line);\n /* Stated, not inherited: hosts differ on whether they set a global reset. */\n box-sizing: border-box;\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n}\n\n\n/* \u2500\u2500 HUD positions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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/* Sits in the tab bar's centre slot: a 28px group with 4px clear of the bar's\n own rules top and bottom, so the two borders never sit on each other. */\n#hud-top-center { top: 3px; left: 50%; transform: translateX(-50%); height: 30px; }\n#hud-bottom-left { bottom: 16px; left: 16px; }\n#hud-bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }\n#ctx-toolbar { display: none; transform: translateX(-50%); }\n#cfg-toolbar { display: none; transform: translate(-50%, -100%); }\n\n/* \u2500\u2500 Icon buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.hud-btn {\n display: flex; align-items: center; justify-content: center;\n width: 34px; height: 28px;\n background: transparent;\n border: none;\n color: var(--bpmnkit-chrome-ink-2);\n cursor: pointer;\n padding: 0; flex-shrink: 0;\n font-family: inherit;\n font-size: 13px;\n /* Never let a Unicode glyph be promoted to a colour emoji. */\n font-variant-emoji: text;\n}\n.hud-btn:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }\n.hud-btn.active { background: var(--bpmnkit-chrome-accent); color: var(--bpmnkit-chrome-accent-fg); }\n.hud-btn:disabled { opacity: 0.3; cursor: default; }\n.hud-btn:disabled:hover { background: transparent; color: var(--bpmnkit-chrome-ink-2); }\n.hud-btn svg { width: 16px; height: 16px; pointer-events: none; }\n\n/* The palette's targets are a touch larger than the toolbar's; the zoom\n cluster shares the palette's height so the bottom strip reads as one row. */\n#hud-bottom-center .hud-btn { width: 36px; height: 32px; }\n#hud-bottom-left .hud-btn { height: 32px; }\n\n/* One hairline BETWEEN adjacent items, never on a group's outer edge \u2014 so a\n group's ends stay clean and an explicit .hud-sep never doubles up with one.\n Declared after the button rules on purpose: they zero their own borders, and\n the .panel-plus-id form outranks the id-scoped zoom buttons. */\n.panel > * + *,\n.panel #tool-groups > * + *,\n.panel #zoom-expanded > * + * { border-left: 1px solid var(--bpmnkit-chrome-line-soft); }\n/* The mobile collapse toggles are hidden siblings on desktop, so the item after\n one would otherwise draw a hairline flush against the group's own border. */\n#hud-top-center > #btn-tc-toggle + *,\n#hud-bottom-center > #btn-bc-toggle + * { border-left: none; }\n\n/* \u2500\u2500 Group button: small marker at the bottom-right corner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.hud-btn[data-group] { position: relative; }\n.hud-btn[data-group]::after {\n content: '';\n position: absolute; bottom: 3px; right: 3px;\n width: 0; height: 0;\n border-left: 3px solid transparent;\n border-top: 3px solid currentColor;\n opacity: 0.55;\n}\n\n/* \u2500\u2500 Tool groups container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#tool-groups { display: flex; align-items: stretch; }\n\n/* \u2500\u2500 Separator \u2014 a structural rule, not a soft internal one \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.hud-sep {\n width: 1px; flex: none; align-self: stretch;\n background: var(--bpmnkit-chrome-line);\n border-left: none;\n}\n.panel > .hud-sep + * { border-left: none; }\n\n/* \u2500\u2500 Zoom widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#btn-zoom-current {\n padding: 0 12px; height: 32px;\n background: transparent; border: none;\n color: var(--bpmnkit-chrome-ink-2); cursor: pointer;\n font-family: inherit; font-size: 12px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n#btn-zoom-current:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }\n\n#zoom-expanded { display: none; align-items: stretch; }\n#zoom-expanded.open { display: flex; }\n\n#btn-zoom-pct {\n padding: 0 10px; height: 32px;\n background: transparent; border: none;\n color: var(--bpmnkit-chrome-ink-2); cursor: pointer;\n font-family: inherit; font-size: 12px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap; min-width: 60px; text-align: center;\n}\n#btn-zoom-pct:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }\n\n/* \u2500\u2500 Dropdown menus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.dropdown {\n position: absolute; display: none; flex-direction: column;\n padding: 0;\n background: var(--bpmnkit-chrome-ground);\n border: 1px solid var(--bpmnkit-chrome-line);\n z-index: 200; min-width: 170px;\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n}\n.dropdown.open { display: flex; }\n\n.drop-item {\n display: flex; align-items: center; gap: 9px;\n padding: 8px 12px;\n border: none; background: transparent;\n color: var(--bpmnkit-chrome-ink-2); cursor: pointer;\n font-family: inherit; font-size: 12px; text-align: left; width: 100%;\n font-variant-emoji: text;\n}\n.drop-item:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }\n.drop-item .di-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--bpmnkit-chrome-accent); }\n.drop-item .di-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }\n.drop-item svg { width: 14px; height: 14px; }\n.drop-sep { height: 1px; background: var(--bpmnkit-chrome-line-soft); }\n.drop-label {\n padding: 8px 12px 6px;\n font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;\n color: var(--bpmnkit-chrome-ink-4); text-transform: uppercase;\n}\n\n/* \u2500\u2500 Group element picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.group-picker {\n position: absolute;\n display: flex; flex-direction: row; align-items: stretch;\n background: var(--bpmnkit-chrome-ground);\n border: 1px solid var(--bpmnkit-chrome-line);\n z-index: 300;\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n}\n.group-picker-label {\n display: flex; align-items: center;\n padding: 0 10px;\n font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;\n color: var(--bpmnkit-chrome-ink-4); text-transform: uppercase;\n white-space: nowrap;\n border-right: 1px solid var(--bpmnkit-chrome-line);\n}\n\n/* \u2500\u2500 Reference link button (wider text variant of hud-btn) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.ref-link-btn {\n height: 28px; padding: 0 10px;\n background: transparent;\n border: none;\n color: var(--bpmnkit-chrome-ink-2);\n cursor: pointer;\n font-family: inherit; font-size: 12px;\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 0;\n}\n.ref-link-btn:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-ink); }\n\n/* \u2500\u2500 Colour swatches \u2014 element fills, exempt from the one-accent rule \u2500\u2500 */\n.bpmnkit-color-swatches { display: flex; gap: 4px; padding: 0 8px; align-items: center; }\n.bpmnkit-color-swatch {\n width: 16px; height: 16px; cursor: pointer;\n border: 1px solid var(--bpmnkit-chrome-line); flex-shrink: 0;\n padding: 0;\n}\n.bpmnkit-color-swatch.active { border-color: var(--bpmnkit-chrome-accent); }\n.bpmnkit-color-swatch--default {\n background: transparent;\n position: relative; overflow: hidden;\n}\n.bpmnkit-color-swatch--default::after {\n content: ''; position: absolute;\n top: 0; left: 50%; transform: translateX(-50%) rotate(-45deg);\n width: 1px; height: 100%;\n background: currentColor; color: var(--bpmnkit-chrome-ink-4);\n}\n\n/* \u2500\u2500 Contextual Ask-AI button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.ctx-ask-ai-btn { color: var(--bpmnkit-chrome-accent); }\n.ctx-ask-ai-btn:hover { background: var(--bpmnkit-chrome-hover); color: var(--bpmnkit-chrome-accent); }\n\n/* \u2500\u2500 New-diagram onboarding overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-empty-state {\n position: absolute; z-index: 50;\n top: 36px; left: 0; bottom: 0; right: 0;\n display: flex; align-items: center; justify-content: center;\n background: var(--bpmnkit-ds-canvas, #fbfbfc);\n}\n[data-bpmnkit-hud-theme=\"dark\"] #bpmnkit-empty-state { background: var(--bpmnkit-bg, #0d0d16); }\n[data-bpmnkit-hud-theme=\"neon\"] #bpmnkit-empty-state { background: oklch(5% 0.025 270); }\n\n.bpmnkit-onboard-inner {\n display: flex; flex-direction: column; align-items: center;\n gap: 28px; padding: 24px; max-width: 580px; width: 100%;\n}\n.bpmnkit-onboard-header { text-align: center; }\n.bpmnkit-onboard-title {\n color: var(--bpmnkit-chrome-ink); font-size: 17px; font-weight: 700;\n letter-spacing: -0.025em; margin: 0 0 8px;\n}\n.bpmnkit-onboard-sub {\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n font-size: var(--bpmnkit-ds-t-mono-label, 11.5px); letter-spacing: 0.08em;\n color: var(--bpmnkit-chrome-ink-4); margin: 0;\n}\n\n/* One bordered box subdivided by hairlines \u2014 not gapped cards. */\n.bpmnkit-onboard-actions {\n display: flex; width: 100%;\n border: 1px solid var(--bpmnkit-chrome-line); background: var(--bpmnkit-chrome-ground);\n}\n\n.bpmnkit-onboard-btn {\n flex: 1; display: flex; flex-direction: column; align-items: flex-start;\n gap: 12px; padding: 18px 16px;\n background: transparent;\n border: none; border-right: 1px solid var(--bpmnkit-chrome-line-soft);\n cursor: pointer; text-align: left;\n color: inherit;\n}\n.bpmnkit-onboard-btn:last-child { border-right: none; }\n.bpmnkit-onboard-btn:hover { background: var(--bpmnkit-chrome-hover); }\n\n.bpmnkit-onboard-btn-icon {\n display: flex; align-items: center; justify-content: center;\n width: 32px; height: 32px;\n border: 1px solid var(--bpmnkit-chrome-line); color: var(--bpmnkit-chrome-ink-2); flex-shrink: 0;\n}\n.bpmnkit-onboard-btn-icon svg { width: 16px; height: 16px; pointer-events: none; }\n.bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon { color: var(--bpmnkit-chrome-accent); border-color: var(--bpmnkit-chrome-accent); }\n\n.bpmnkit-onboard-btn-label { display: flex; flex-direction: column; gap: 4px; }\n.bpmnkit-onboard-btn-title {\n font-size: 14px; font-weight: 700; color: var(--bpmnkit-chrome-ink); margin: 0;\n}\n.bpmnkit-onboard-btn-desc {\n font-size: 12px; color: var(--bpmnkit-chrome-ink-4); margin: 0; line-height: 1.5;\n}\n\n.bpmnkit-onboard-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }\n.bpmnkit-onboard-links a {\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n color: var(--bpmnkit-chrome-ink-4); font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px);\n letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;\n}\n.bpmnkit-onboard-links a:hover { color: var(--bpmnkit-chrome-accent); }\n\n@media (max-width: 520px) {\n .bpmnkit-onboard-actions { flex-direction: column; }\n .bpmnkit-onboard-btn { flex-direction: row; align-items: center; gap: 12px; border-right: none; border-bottom: 1px solid var(--bpmnkit-chrome-line-soft); }\n .bpmnkit-onboard-btn:last-child { border-bottom: none; }\n .bpmnkit-onboard-btn-label { flex-direction: column; }\n}\n\n/* \u2500\u2500 Top-center overflow guard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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#hud-top-center {\n max-width: calc(100% - 24px);\n overflow-x: auto; overflow-y: visible;\n scrollbar-width: none;\n}\n#hud-top-center::-webkit-scrollbar { display: none; }\n\n/* \u2500\u2500 Push HUD toolbar down when simulation banner is visible \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-sim-active #hud-top-center { top: 39px; }\n\n/* \u2500\u2500 Simulation active banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-sim-banner {\n position: absolute;\n top: 0; left: 0; right: 0;\n z-index: 150;\n display: flex; align-items: center; justify-content: center; gap: 14px;\n padding: 8px 16px;\n background: var(--bpmnkit-chrome-ground);\n border-bottom: 1px solid var(--bpmnkit-chrome-accent);\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n font-size: var(--bpmnkit-ds-t-mono-label, 11.5px); letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--bpmnkit-chrome-accent);\n pointer-events: auto;\n}\n#bpmnkit-sim-banner.hidden { display: none; }\n#bpmnkit-sim-banner-exit {\n padding: 4px 12px;\n background: transparent;\n border: 1px solid var(--bpmnkit-chrome-accent);\n color: inherit; cursor: pointer;\n font-family: inherit; font-size: inherit; letter-spacing: inherit;\n}\n#bpmnkit-sim-banner-exit:hover { background: var(--bpmnkit-chrome-accent); color: var(--bpmnkit-chrome-accent-fg); }\n\n/* \u2500\u2500 Context menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-ctx-menu { min-width: 170px; }\n\n/* \u2500\u2500 Element search bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-search-bar {\n position: absolute;\n top: 44px; left: 50%; transform: translateX(-50%);\n z-index: 120;\n display: flex; align-items: center; gap: 10px;\n padding: 6px 12px;\n background: var(--bpmnkit-chrome-ground);\n border: 1px solid var(--bpmnkit-chrome-line);\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n}\n#bpmnkit-search-bar.hidden { display: none; }\n#bpmnkit-search-input {\n width: 220px; padding: 2px 0;\n background: transparent; border: none;\n color: var(--bpmnkit-chrome-ink); font-family: inherit; font-size: 12.5px; outline: none;\n}\n#bpmnkit-search-input::placeholder { color: var(--bpmnkit-chrome-ink-4); }\n#bpmnkit-search-count {\n font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;\n color: var(--bpmnkit-chrome-ink-4); white-space: nowrap; min-width: 44px;\n}\n#bpmnkit-search-close {\n background: transparent; border: none; color: var(--bpmnkit-chrome-ink-4);\n cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1; padding: 0 2px;\n font-variant-emoji: text;\n}\n#bpmnkit-search-close:hover { color: var(--bpmnkit-chrome-ink); }\n\n/* \u2500\u2500 Keyboard shortcuts modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-shortcuts-modal {\n position: absolute; inset: 0; z-index: 200;\n display: flex; align-items: center; justify-content: center;\n background: color-mix(in srgb, var(--bpmnkit-ds-dark, #14161a) 55%, transparent);\n}\n#bpmnkit-shortcuts-modal.hidden { display: none; }\n#bpmnkit-shortcuts-inner {\n background: var(--bpmnkit-chrome-ground);\n border: 1px solid var(--bpmnkit-chrome-line);\n padding: 24px 26px;\n min-width: 320px; max-width: 480px;\n color: var(--bpmnkit-chrome-ink-2);\n}\n#bpmnkit-shortcuts-inner h3 {\n margin: 0 0 16px;\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;\n text-transform: uppercase; font-weight: 400; color: var(--bpmnkit-chrome-ink-4);\n}\n.bpmnkit-sc-row {\n display: flex; justify-content: space-between; align-items: center; gap: 24px;\n padding: 7px 0; border-bottom: 1px solid var(--bpmnkit-chrome-line-soft); font-size: 12.5px;\n}\n.bpmnkit-sc-row:last-child { border-bottom: none; }\n.bpmnkit-sc-key {\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);\n border: 1px solid var(--bpmnkit-chrome-line);\n padding: 1px 7px; font-size: 11px; color: var(--bpmnkit-chrome-ink);\n white-space: nowrap;\n}\n#bpmnkit-shortcuts-close {\n display: block; margin: 18px auto 0; padding: 7px 20px;\n background: var(--bpmnkit-ds-accent, #a8503a); border: none;\n color: #fff; cursor: pointer;\n font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace); font-size: 12px;\n}\n#bpmnkit-shortcuts-close:hover { background: var(--bpmnkit-ds-accent-hover, #8f412e); }\n\n/* \u2500\u2500 Mobile: collapsible center toolbars \u2500\u2500\u2500\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#btn-bc-toggle, #btn-tc-toggle { display: none; }\n\n@media (max-width: 600px) {\n #hud-top-center { display: none !important; }\n #hud-bottom-left { display: none !important; }\n\n #hud-bottom-center {\n left: 16px;\n transform: none;\n }\n\n #btn-bc-toggle { display: flex; }\n #hud-bottom-center > #btn-bc-toggle + * { border-left: 1px solid var(--bpmnkit-chrome-line-soft); }\n\n /* Collapsed: hide all children except the toggle button */\n #hud-bottom-center:not(.expanded) > *:not(#btn-bc-toggle) { display: none; }\n\n /* Expanded: highlight the toggle button as a close affordance */\n #hud-bottom-center.expanded #btn-bc-toggle {\n background: var(--bpmnkit-chrome-accent); color: var(--bpmnkit-chrome-accent-fg);\n }\n}\n\n/* Hide bottom toolbar on welcome screen */\n.bpmnkit-welcome-active #hud-bottom-center { display: none !important; }\n";
13
14
  /** Injects the HUD stylesheet into `<head>` if not already present. */
14
15
  export declare function injectHudStyles(): void;
15
16
  //# sourceMappingURL=css.d.ts.map