@bpmnkit/editor 0.0.13 → 0.0.15

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 (4) hide show
  1. package/README.md +3 -0
  2. package/dist/css.d.ts +1 -1
  3. package/dist/css.js +20 -0
  4. package/package.json +3 -3
package/README.md CHANGED
@@ -119,6 +119,9 @@ interface SideDock {
119
119
  | [`@bpmnkit/connector-gen`](https://www.npmjs.com/package/@bpmnkit/connector-gen) | Generate connector templates from OpenAPI specs |
120
120
  | [`@bpmnkit/cli`](https://www.npmjs.com/package/@bpmnkit/cli) | Camunda 8 command-line interface (casen) |
121
121
  | [`@bpmnkit/proxy`](https://www.npmjs.com/package/@bpmnkit/proxy) | Local AI bridge and Camunda API proxy server |
122
+ | [`@bpmnkit/cli-sdk`](https://www.npmjs.com/package/@bpmnkit/cli-sdk) | Plugin authoring SDK for the casen CLI |
123
+ | [`@bpmnkit/create-casen-plugin`](https://www.npmjs.com/package/@bpmnkit/create-casen-plugin) | Scaffold a new casen CLI plugin in seconds |
124
+ | [`@bpmnkit/casen-report`](https://www.npmjs.com/package/@bpmnkit/casen-report) | HTML reports from Camunda 8 incident and SLA data |
122
125
 
123
126
  ## License
124
127
 
package/dist/css.d.ts CHANGED
@@ -9,7 +9,7 @@ export declare function injectEditorStyles(): void;
9
9
  /** CSS for the editor HUD — panels, buttons, dropdowns, group picker.
10
10
  * Dark theme is the default. Light theme is activated by setting
11
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\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\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\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\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\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\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\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";
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";
13
13
  /** Injects the HUD stylesheet into `<head>` if not already present. */
14
14
  export declare function injectHudStyles(): void;
15
15
  //# sourceMappingURL=css.d.ts.map
package/dist/css.js CHANGED
@@ -501,6 +501,7 @@ export const HUD_CSS = `
501
501
  background: var(--bpmnkit-bg, #0d0d16);
502
502
  }
503
503
  [data-bpmnkit-hud-theme="light"] #bpmnkit-empty-state { background: var(--bpmnkit-bg, #f4f4f8); }
504
+ [data-bpmnkit-hud-theme="neon"] #bpmnkit-empty-state { background: oklch(5% 0.025 270); }
504
505
 
505
506
  .bpmnkit-onboard-inner {
506
507
  display: flex; flex-direction: column; align-items: center;
@@ -515,6 +516,8 @@ export const HUD_CSS = `
515
516
  }
516
517
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-title { color: rgba(0,0,0,0.72); }
517
518
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-sub { color: rgba(0,0,0,0.38); }
519
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-title { color: oklch(88% 0.02 270); }
520
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-sub { color: oklch(50% 0.06 280); }
518
521
 
519
522
  .bpmnkit-onboard-actions { display: flex; gap: 10px; width: 100%; }
520
523
 
@@ -535,6 +538,12 @@ export const HUD_CSS = `
535
538
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn:hover {
536
539
  background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14);
537
540
  }
541
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn {
542
+ background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.15);
543
+ }
544
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn:hover {
545
+ background: oklch(65% 0.28 280 / 0.1); border-color: oklch(65% 0.28 280 / 0.28);
546
+ }
538
547
 
539
548
  .bpmnkit-onboard-btn-icon {
540
549
  display: flex; align-items: center; justify-content: center;
@@ -545,6 +554,9 @@ export const HUD_CSS = `
545
554
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn-icon {
546
555
  background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.55);
547
556
  }
557
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn-icon {
558
+ background: oklch(65% 0.28 280 / 0.1); color: oklch(73% 0.16 280);
559
+ }
548
560
 
549
561
  .bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {
550
562
  background: rgba(76,142,247,0.18); color: #8ab8ff;
@@ -554,6 +566,10 @@ export const HUD_CSS = `
554
566
  background: rgba(26,86,219,0.1); color: #1a56db;
555
567
  }
556
568
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn--ai:hover { border-color: rgba(26,86,219,0.28); }
569
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn--ai .bpmnkit-onboard-btn-icon {
570
+ background: oklch(72% 0.18 185 / 0.15); color: oklch(72% 0.18 185);
571
+ }
572
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn--ai:hover { border-color: oklch(72% 0.18 185 / 0.35); }
557
573
 
558
574
  .bpmnkit-onboard-btn-label { display: flex; flex-direction: column; gap: 3px; }
559
575
  .bpmnkit-onboard-btn-title {
@@ -564,6 +580,8 @@ export const HUD_CSS = `
564
580
  }
565
581
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn-title { color: rgba(0,0,0,0.72); }
566
582
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-btn-desc { color: rgba(0,0,0,0.36); }
583
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn-title { color: oklch(82% 0.04 270); }
584
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-btn-desc { color: oklch(50% 0.06 280); }
567
585
 
568
586
  .bpmnkit-onboard-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
569
587
  .bpmnkit-onboard-links a {
@@ -572,6 +590,8 @@ export const HUD_CSS = `
572
590
  .bpmnkit-onboard-links a:hover { color: rgba(255,255,255,0.55); }
573
591
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-links a { color: rgba(0,0,0,0.25); }
574
592
  [data-bpmnkit-hud-theme="light"] .bpmnkit-onboard-links a:hover { color: rgba(0,0,0,0.6); }
593
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-links a { color: oklch(45% 0.06 280); }
594
+ [data-bpmnkit-hud-theme="neon"] .bpmnkit-onboard-links a:hover { color: oklch(65% 0.1 280); }
575
595
 
576
596
  @media (max-width: 520px) {
577
597
  .bpmnkit-onboard-actions { flex-direction: column; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bpmnkit/editor",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -17,8 +17,8 @@
17
17
  "dist/**/*.d.ts"
18
18
  ],
19
19
  "dependencies": {
20
- "@bpmnkit/canvas": "0.0.13",
21
- "@bpmnkit/core": "0.0.13"
20
+ "@bpmnkit/canvas": "0.0.14",
21
+ "@bpmnkit/core": "0.0.14"
22
22
  },
23
23
  "description": "Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI",
24
24
  "keywords": [