@bpmnkit/editor 0.0.11 → 0.0.13

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/bpmnkit/monorepo/main/doc/logos/logo-2-gateway.svg" width="72" height="72" alt="BPMN Kit logo">
+  <a href="https://bpmnkit.com"><img src="https://bpmnkit.com/favicon.svg" width="72" height="72" alt="BPMN Kit logo"></a>
   <h1>@bpmnkit/editor</h1>
   <p>Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI</p>
 
@@ -123,3 +123,7 @@ interface SideDock {
 ## License
 
 [MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © BPMN Kit — made by [u11g](https://u11g.com)
+
+<div align="center">
+  <a href="https://bpmnkit.com"><img src="https://bpmnkit.com/favicon.svg" width="32" height="32" alt="BPMN Kit"></a>
+</div>

package/dist/css.d.ts

@@ -9,7 +9,7 @@ export declare function injectEditorStyles(): void;
 /** CSS for the editor HUD — panels, buttons, dropdowns, group picker.
  *  Dark theme is the default. Light theme is activated by setting
  *  `data-bpmnkit-hud-theme="light"` on `document.body`. */
-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 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  #btn-bc-toggle, #btn-tc-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  #hud-top-center:not(.expanded) > *:not(#btn-tc-toggle) { display: none; }\n\n  /* Expanded: highlight the toggle button as a close affordance */\n  #hud-bottom-center.expanded #btn-bc-toggle,\n  #hud-top-center.expanded #btn-tc-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  [data-bpmnkit-hud-theme=\"light\"] #hud-top-center.expanded #btn-tc-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";
+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";
 /** Injects the HUD stylesheet into `<head>` if not already present. */
 export declare function injectHudStyles(): void;
 //# sourceMappingURL=css.d.ts.map

package/dist/css.js

@@ -414,6 +414,35 @@ export const HUD_CSS = `
   border-right-color: rgba(0,0,0,0.08);
 }
 
+/* ── Neon theme overrides ────────────────────────────────────────── */
+[data-bpmnkit-hud-theme="neon"] .panel {
+  background: oklch(8% 0.03 270 / 0.96);
+  border-color: oklch(65% 0.28 280 / 0.2);
+  box-shadow: 0 2px 16px oklch(65% 0.28 280 / 0.12), 0 0 0 1px oklch(65% 0.28 280 / 0.1);
+}
+[data-bpmnkit-hud-theme="neon"] #hud-top-center.panel {
+  background: transparent; backdrop-filter: none; border: none; box-shadow: none;
+}
+[data-bpmnkit-hud-theme="neon"] .hud-btn { color: oklch(65% 0.1 280); }
+[data-bpmnkit-hud-theme="neon"] .hud-btn:hover { background: oklch(65% 0.28 280 / 0.12); color: oklch(88% 0.02 270); }
+[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); }
+[data-bpmnkit-hud-theme="neon"] .hud-sep { background: oklch(65% 0.28 280 / 0.15); }
+[data-bpmnkit-hud-theme="neon"] .dropdown {
+  background: oklch(8% 0.03 270 / 0.97);
+  border-color: oklch(65% 0.28 280 / 0.2);
+  box-shadow: 0 6px 24px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(65% 0.28 280 / 0.1);
+}
+[data-bpmnkit-hud-theme="neon"] .drop-item { color: oklch(65% 0.1 280); }
+[data-bpmnkit-hud-theme="neon"] .drop-item:hover { background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270); }
+[data-bpmnkit-hud-theme="neon"] .drop-sep { background: oklch(65% 0.28 280 / 0.15); }
+[data-bpmnkit-hud-theme="neon"] .drop-label { color: oklch(50% 0.06 280); }
+[data-bpmnkit-hud-theme="neon"] .group-picker {
+  background: oklch(8% 0.03 270 / 0.97);
+  border-color: oklch(65% 0.28 280 / 0.2);
+  box-shadow: 0 6px 24px oklch(0% 0 0 / 0.6);
+}
+[data-bpmnkit-hud-theme="neon"] .group-picker-label { color: oklch(50% 0.06 280); border-right-color: oklch(65% 0.28 280 / 0.15); }
+
 /* ── Reference link button (wider text variant of hud-btn) ──────── */
 .ref-link-btn {
   height: 32px; padding: 0 8px;
@@ -688,19 +717,24 @@ export const HUD_CSS = `
 #btn-bc-toggle, #btn-tc-toggle { display: none; }
 
 @media (max-width: 600px) {
-  #btn-bc-toggle, #btn-tc-toggle { display: flex; }
+  #hud-top-center { display: none !important; }
+  #hud-bottom-left { display: none !important; }
+
+  #hud-bottom-center {
+    left: 10px;
+    transform: none;
+  }
+
+  #btn-bc-toggle { display: flex; }
 
   /* Collapsed: hide all children except the toggle button */
   #hud-bottom-center:not(.expanded) > *:not(#btn-bc-toggle) { display: none; }
-  #hud-top-center:not(.expanded) > *:not(#btn-tc-toggle) { display: none; }
 
   /* Expanded: highlight the toggle button as a close affordance */
-  #hud-bottom-center.expanded #btn-bc-toggle,
-  #hud-top-center.expanded #btn-tc-toggle {
+  #hud-bottom-center.expanded #btn-bc-toggle {
     background: rgba(255,255,255,0.08); color: #fff;
   }
-  [data-bpmnkit-hud-theme="light"] #hud-bottom-center.expanded #btn-bc-toggle,
-  [data-bpmnkit-hud-theme="light"] #hud-top-center.expanded #btn-tc-toggle {
+  [data-bpmnkit-hud-theme="light"] #hud-bottom-center.expanded #btn-bc-toggle {
     background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.9);
   }
 }

package/dist/dock.js

@@ -100,6 +100,30 @@ const DOCK_CSS = `
 [data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__info-value { color: rgba(0,0,0,0.75); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__info-row { border-bottom-color: rgba(0,0,0,0.06); }
 [data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__empty-hint { color: rgba(0,0,0,0.25); }
+/* Neon theme */
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock {
+  background: oklch(6% 0.04 280);
+  border-left: 1px solid oklch(65% 0.28 280 / 0.35);
+  box-shadow: -8px 0 40px oklch(0% 0 0 / 0.8), -1px 0 20px oklch(65% 0.28 280 / 0.12);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__collapse-handle {
+  background: oklch(6% 0.04 280);
+  border-color: oklch(65% 0.28 280 / 0.35);
+  color: oklch(65% 0.28 280 / 0.6);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__collapse-handle:hover {
+  background: oklch(12% 0.04 270 / 0.99);
+  color: oklch(73% 0.16 280);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab-strip { border-bottom-color: oklch(65% 0.28 280 / 0.25); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab { color: oklch(50% 0.1 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab:hover { color: oklch(73% 0.16 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab.active { color: oklch(72% 0.18 185); border-bottom-color: oklch(72% 0.18 185); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__resize-handle:hover { background: oklch(65% 0.28 280 / 0.25); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__info-label { color: oklch(50% 0.06 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__info-value { color: oklch(73% 0.16 280); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__info-row { border-bottom-color: oklch(65% 0.28 280 / 0.1); }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__empty-hint { color: oklch(45% 0.08 280); }
 `;
 function injectDockStyles() {
     if (document.getElementById(DOCK_STYLE_ID))
@@ -223,6 +247,10 @@ export function createSideDock() {
     catch {
         // localStorage unavailable — use defaults
     }
+    // Force collapse on narrow viewports (mobile)
+    if (window.innerWidth <= 600) {
+        _collapsed = true;
+    }
     if (_collapsed) {
         el.classList.add("bpmnkit-side-dock--collapsed");
         setDocWidth(0);

package/dist/editor.d.ts

@@ -69,7 +69,7 @@ export declare class BpmnEditor {
     fitView(padding?: number): void;
     /** The host element that receives the `data-theme` attribute. */
     get container(): HTMLElement;
-    getTheme(): "light" | "dark";
+    getTheme(): "light" | "dark" | "neon";
     setTheme(theme: Theme): void;
     zoomIn(): void;
     zoomOut(): void;
@@ -111,7 +111,7 @@ export declare class BpmnEditor {
      * using smart placement (right → bottom → top, avoids overlaps).
      * Returns the new element's id.
      */
-    addConnectedElement(sourceId: string, type: CreateShapeType): string | null;
+    addConnectedElement(sourceId: string, type: CreateShapeType, name?: string): string | null;
     private _smartPlaceBounds;
     private _overlapsAny;
     /**
@@ -151,6 +151,7 @@ export declare class BpmnEditor {
     private readonly _onPointerDown;
     private readonly _onPointerMove;
     private readonly _onPointerUp;
+    private readonly _onPointerCancel;
     private readonly _onDblClick;
     private readonly _onKeyDown;
     private _hitTest;

package/dist/editor.js

@@ -244,11 +244,11 @@ export class BpmnEditor {
         injectEditorStyles();
         this._id = String(_instanceCounter++);
         // Resolve initial theme — localStorage overrides the options.theme when persistTheme is on
-        let initialTheme = options.theme ?? "auto";
+        let initialTheme = options.theme ?? "neon";
         if (options.persistTheme) {
             try {
                 const stored = localStorage.getItem("bpmnkit-theme");
-                if (stored === "dark" || stored === "light" || stored === "auto") {
+                if (stored === "dark" || stored === "light" || stored === "auto" || stored === "neon") {
                     initialTheme = stored;
                 }
             }
@@ -426,6 +426,7 @@ export class BpmnEditor {
         this._svg.addEventListener("pointerdown", this._onPointerDown);
         this._svg.addEventListener("pointermove", this._onPointerMove);
         this._svg.addEventListener("pointerup", this._onPointerUp);
+        this._svg.addEventListener("pointercancel", this._onPointerCancel);
         this._svg.addEventListener("dblclick", this._onDblClick);
         // ── Plugins ───────────────────────────────────────────────────
         if (options.plugins) {
@@ -500,7 +501,7 @@ export class BpmnEditor {
             this._stateMachine.setMode({ mode: "pan" });
         }
         else {
-            this.setTool("select");
+            this.setTool("default");
         }
     }
     setTool(tool) {
@@ -512,7 +513,10 @@ export class BpmnEditor {
         this._overlay.setAlignmentGuides([]);
         this._setCreateEdgeDropHighlight(null);
         this._ghostSnapCenter = null;
-        if (tool === "select") {
+        if (tool === "default") {
+            this._stateMachine.setMode({ mode: "default", sub: { name: "idle", hoveredId: null } });
+        }
+        else if (tool === "select") {
             this._stateMachine.setMode({ mode: "select", sub: { name: "idle", hoveredId: null } });
         }
         else if (tool === "pan") {
@@ -594,7 +598,10 @@ export class BpmnEditor {
         return this._host;
     }
     getTheme() {
-        return this._host.getAttribute("data-theme") === "dark" ? "dark" : "light";
+        const t = this._host.getAttribute("data-theme");
+        if (t === "dark" || t === "neon")
+            return t;
+        return "light";
     }
     setTheme(theme) {
         this._theme = theme;
@@ -654,6 +661,7 @@ export class BpmnEditor {
         this._svg.removeEventListener("pointerdown", this._onPointerDown);
         this._svg.removeEventListener("pointermove", this._onPointerMove);
         this._svg.removeEventListener("pointerup", this._onPointerUp);
+        this._svg.removeEventListener("pointercancel", this._onPointerCancel);
         this._svg.removeEventListener("dblclick", this._onDblClick);
         this._host.removeEventListener("keydown", this._onKeyDown);
         for (const plugin of this._plugins)
@@ -1066,7 +1074,7 @@ export class BpmnEditor {
      * using smart placement (right → bottom → top, avoids overlaps).
      * Returns the new element's id.
      */
-    addConnectedElement(sourceId, type) {
+    addConnectedElement(sourceId, type, name) {
         if (!this._defs)
             return null;
         const srcShape = this._shapes.find((s) => s.id === sourceId);
@@ -1088,7 +1096,7 @@ export class BpmnEditor {
         }
         const newBounds = this._smartPlaceBounds(srcBounds, sourceId, w, h);
         const obstacles = this._shapes.filter((s) => s.id !== sourceId).map((s) => s.shape.bounds);
-        const r1 = createShape(this._defs, type, newBounds);
+        const r1 = createShape(this._defs, type, newBounds, name);
         const waypoints = computeWaypointsAvoiding(srcBounds, newBounds, obstacles);
         const r2 = createConnection(r1.defs, sourceId, r1.id, waypoints);
         this._selectedIds = [r1.id];
@@ -1737,6 +1745,9 @@ export class BpmnEditor {
         const hit = this._hitTest(e.clientX, e.clientY);
         this._stateMachine.onPointerUp(e, diag, hit);
     };
+    _onPointerCancel = (_e) => {
+        this._stateMachine.cancel();
+    };
     _onDblClick = (e) => {
         const rect = this._svg.getBoundingClientRect();
         const diag = screenToDiagram(e.clientX, e.clientY, this._viewport.state, rect);
@@ -1935,11 +1946,11 @@ export class BpmnEditor {
                 ? "dark"
                 : "light"
             : theme;
-        if (resolved === "dark") {
-            this._host.setAttribute("data-theme", "dark");
+        if (resolved === "light") {
+            this._host.removeAttribute("data-theme");
         }
         else {
-            this._host.removeAttribute("data-theme");
+            this._host.setAttribute("data-theme", resolved);
         }
     }
     _installPlugin(plugin) {

package/dist/hud.d.ts

@@ -75,6 +75,11 @@ export interface HudOptions {
      * Called when the user clicks "Exit" in the simulation active banner.
      */
     onExitSimulation?: () => void;
+    /**
+     * Called when the user presses the sidebar toggle shortcut (Ctrl+\).
+     * Typically toggles the side dock open/closed.
+     */
+    onToggleSidebar?: () => void;
 }
 export declare function initEditorHud(editor: BpmnEditor, options?: HudOptions): {
     setActive(active: boolean): void;

package/dist/hud.js

@@ -61,6 +61,7 @@ const SHORTCUTS = [
     ["Ctrl+F", "Find element"],
     ["Ctrl+K", "Command palette"],
     ["Ctrl+E", "File switcher"],
+    ["Ctrl+\\", "Toggle sidebar"],
     ["H", "Hand tool"],
     ["V", "Select tool"],
     ["Escape", "Deselect / cancel"],
@@ -138,7 +139,6 @@ export function initEditorHud(editor, options = {}) {
     }
     // Tool selector — bottom center
     const btnSelect = hudBtn("btn-select", "Select (V)");
-    btnSelect.classList.add("active");
     const btnPan = hudBtn("btn-pan", "Hand (H)");
     const btnSpace = hudBtn("btn-space", "Space tool");
     const toolGroupsEl = document.createElement("div");
@@ -235,7 +235,7 @@ export function initEditorHud(editor, options = {}) {
     editor.container.append(hudTopCenter, hudBottomLeft, hudBottomCenter, cfgToolbar, ctxToolbar, zoomMenuEl, moreMenuEl, labelPosMenuEl, refMenuEl, ctxMenuEl, simBannerEl, searchBarEl, shortcutsModal);
     // ── Theme ──────────────────────────────────────────────────────────────────
     const syncHudTheme = () => {
-        document.body.dataset.bpmnHudTheme = editor.getTheme();
+        document.body.dataset.bpmnkitHudTheme = editor.getTheme();
     };
     syncHudTheme();
     const themeObs = new MutationObserver(syncHudTheme);
@@ -514,12 +514,16 @@ export function initEditorHud(editor, options = {}) {
             }
         }
     }
+    let _currentTool = "default";
+    editor.on("editor:tool", (tool) => {
+        _currentTool = tool;
+    });
     btnSelect.addEventListener("click", () => {
-        editor.setTool("select");
+        editor.setTool(_currentTool === "select" ? "default" : "select");
         collapseOnMobile(hudBottomCenter);
     });
     btnPan.addEventListener("click", () => {
-        editor.setTool("pan");
+        editor.setTool(_currentTool === "pan" ? "default" : "pan");
         collapseOnMobile(hudBottomCenter);
     });
     btnSpace.addEventListener("click", () => {
@@ -1619,6 +1623,10 @@ export function initEditorHud(editor, options = {}) {
             e.preventDefault();
             shortcutsModal.classList.remove("hidden");
         }
+        if ((e.ctrlKey || e.metaKey) && e.key === "\\") {
+            e.preventDefault();
+            options.onToggleSidebar?.();
+        }
     });
     // ── Close zoom widget on outside click ─────────────────────────────────────
     document.addEventListener("pointerdown", (e) => {

package/dist/state-machine.d.ts

@@ -98,6 +98,9 @@ type SpaceSub = {
     axis: "h" | "v" | null;
 };
 export type EditorMode = {
+    mode: "default";
+    sub: SelectSub;
+} | {
     mode: "select";
     sub: SelectSub;
 } | {
@@ -162,12 +165,20 @@ export declare class EditorStateMachine {
     private readonly _cb;
     private _mode;
     constructor(_cb: Callbacks);
+    /** Creates an idle state preserving the current base mode ("default" or "select"). */
+    private _idle;
+    /**
+     * Wraps a sub-state with the current base mode so that "default" and "select"
+     * mode operations return to the same mode when they complete.
+     */
+    private _withSub;
     get mode(): EditorMode;
     setMode(mode: EditorMode): void;
     onPointerDown(e: PointerEvent, diag: DiagPoint, hit: HitResult): void;
     onPointerMove(e: PointerEvent, diag: DiagPoint, hit: HitResult): void;
     onPointerUp(_e: PointerEvent, diag: DiagPoint, hit: HitResult): void;
     onDblClick(_e: MouseEvent, _diag: DiagPoint, hit: HitResult): void;
+    cancel(): void;
     onKeyDown(e: KeyboardEvent): void;
 }
 export {};

package/dist/state-machine.js

@@ -11,10 +11,21 @@ function screenDist(ax, ay, bx, by) {
  */
 export class EditorStateMachine {
     _cb;
-    _mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+    _mode = { mode: "default", sub: { name: "idle", hoveredId: null } };
     constructor(_cb) {
         this._cb = _cb;
     }
+    /** Creates an idle state preserving the current base mode ("default" or "select"). */
+    _idle() {
+        return this._withSub({ name: "idle", hoveredId: null });
+    }
+    /**
+     * Wraps a sub-state with the current base mode so that "default" and "select"
+     * mode operations return to the same mode when they complete.
+     */
+    _withSub(sub) {
+        return this._mode.mode === "default" ? { mode: "default", sub } : { mode: "select", sub };
+    }
     get mode() {
         return this._mode;
     }
@@ -24,11 +35,11 @@ export class EditorStateMachine {
     // ── Pointer down ─────────────────────────────────────────────────
     onPointerDown(e, diag, hit) {
         const mode = this._mode;
-        // Create mode: place shape and revert to select
+        // Create mode: place shape and revert to default
         if (mode.mode === "create") {
             this._cb.commitCreate(mode.elementType, diag);
-            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
-            this._cb.setTool("select");
+            this._mode = { mode: "default", sub: { name: "idle", hoveredId: null } };
+            this._cb.setTool("default");
             return;
         }
         // Space mode: lock viewport and begin drag
@@ -43,6 +54,17 @@ export class EditorStateMachine {
         // Pan mode: viewport handles this
         if (mode.mode === "pan")
             return;
+        // Default mode: canvas click without Shift → track for selection clear on pointer-up, but don't lock
+        // viewport so panning still works naturally. Shift falls through to rubber-band.
+        if (mode.mode === "default" && hit.type === "canvas" && !e.shiftKey) {
+            this._mode = this._withSub({
+                name: "pointing-canvas",
+                origin: diag,
+                screenX: e.clientX,
+                screenY: e.clientY,
+            });
+            return;
+        }
         // If already in connecting mode (entered from contextual toolbar), a click commits or cancels
         if (mode.sub.name === "connecting") {
             this._cb.lockViewport(false);
@@ -52,7 +74,7 @@ export class EditorStateMachine {
             else {
                 this._cb.cancelConnect();
             }
-            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+            this._mode = this._idle();
             return;
         }
         // In label-editing mode: clicking elsewhere commits label (via blur) — do nothing here
@@ -67,32 +89,26 @@ export class EditorStateMachine {
                 if (!shape)
                     return;
                 this._cb.lockViewport(true);
-                this._mode = {
-                    mode: "select",
-                    sub: {
-                        name: "pointing-handle",
-                        origin: diag,
-                        id: hit.shapeId,
-                        handle: hit.handle,
-                        screenX: e.clientX,
-                        screenY: e.clientY,
-                    },
-                };
+                this._mode = this._withSub({
+                    name: "pointing-handle",
+                    origin: diag,
+                    id: hit.shapeId,
+                    handle: hit.handle,
+                    screenX: e.clientX,
+                    screenY: e.clientY,
+                });
                 break;
             }
             case "port": {
                 this._cb.lockViewport(true);
-                this._mode = {
-                    mode: "select",
-                    sub: {
-                        name: "pointing-port",
-                        origin: diag,
-                        sourceId: hit.shapeId,
-                        port: hit.port,
-                        screenX: e.clientX,
-                        screenY: e.clientY,
-                    },
-                };
+                this._mode = this._withSub({
+                    name: "pointing-port",
+                    origin: diag,
+                    sourceId: hit.shapeId,
+                    port: hit.port,
+                    screenX: e.clientX,
+                    screenY: e.clientY,
+                });
                 break;
             }
             case "shape": {
@@ -102,95 +118,78 @@ export class EditorStateMachine {
                         ? selectedIds.filter((id) => id !== hit.id)
                         : [...selectedIds, hit.id];
                     this._cb.setSelection(newIds);
-                    this._mode = { mode: "select", sub: { name: "idle", hoveredId: hit.id } };
+                    this._mode = this._withSub({ name: "idle", hoveredId: hit.id });
                 }
                 else {
                     if (!selectedIds.includes(hit.id)) {
                         this._cb.setSelection([hit.id]);
                     }
-                    this._mode = {
-                        mode: "select",
-                        sub: {
-                            name: "pointing-shape",
-                            origin: diag,
-                            id: hit.id,
-                            screenX: e.clientX,
-                            screenY: e.clientY,
-                        },
-                    };
+                    this._mode = this._withSub({
+                        name: "pointing-shape",
+                        origin: diag,
+                        id: hit.id,
+                        screenX: e.clientX,
+                        screenY: e.clientY,
+                    });
                 }
                 break;
             }
             case "edge": {
                 this._cb.setEdgeSelected(hit.id);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "edge-segment": {
                 this._cb.lockViewport(true);
-                this._mode = {
-                    mode: "select",
-                    sub: {
-                        name: "pointing-edge-segment",
-                        edgeId: hit.id,
-                        segIdx: hit.segIdx,
-                        isHoriz: hit.isHoriz,
-                        projPt: hit.projPt,
-                        origin: diag,
-                        screenX: e.clientX,
-                        screenY: e.clientY,
-                    },
-                };
+                this._mode = this._withSub({
+                    name: "pointing-edge-segment",
+                    edgeId: hit.id,
+                    segIdx: hit.segIdx,
+                    isHoriz: hit.isHoriz,
+                    projPt: hit.projPt,
+                    origin: diag,
+                    screenX: e.clientX,
+                    screenY: e.clientY,
+                });
                 break;
             }
             case "edge-waypoint": {
                 this._cb.lockViewport(true);
-                this._mode = {
-                    mode: "select",
-                    sub: {
-                        name: "pointing-edge-waypoint",
-                        edgeId: hit.id,
-                        wpIdx: hit.wpIdx,
-                        pt: hit.pt,
-                        screenX: e.clientX,
-                        screenY: e.clientY,
-                    },
-                };
+                this._mode = this._withSub({
+                    name: "pointing-edge-waypoint",
+                    edgeId: hit.id,
+                    wpIdx: hit.wpIdx,
+                    pt: hit.pt,
+                    screenX: e.clientX,
+                    screenY: e.clientY,
+                });
                 break;
             }
             case "edge-endpoint": {
                 this._cb.lockViewport(true);
-                this._mode = {
-                    mode: "select",
-                    sub: {
-                        name: "pointing-edge-endpoint",
-                        edgeId: hit.edgeId,
-                        isStart: hit.isStart,
-                        origin: diag,
-                        screenX: e.clientX,
-                        screenY: e.clientY,
-                    },
-                };
+                this._mode = this._withSub({
+                    name: "pointing-edge-endpoint",
+                    edgeId: hit.edgeId,
+                    isStart: hit.isStart,
+                    origin: diag,
+                    screenX: e.clientX,
+                    screenY: e.clientY,
+                });
                 break;
             }
             case "canvas": {
                 if (e.shiftKey) {
                     this._cb.lockViewport(true);
-                    this._mode = {
-                        mode: "select",
-                        sub: { name: "rubber-band", origin: diag, current: diag },
-                    };
+                    this._mode = this._withSub({ name: "rubber-band", origin: diag, current: diag });
                 }
                 else {
-                    this._mode = {
-                        mode: "select",
-                        sub: {
-                            name: "pointing-canvas",
-                            origin: diag,
-                            screenX: e.clientX,
-                            screenY: e.clientY,
-                        },
-                    };
+                    // Only reachable in explicit "select" mode (default mode canvas+no-shift returned early)
+                    this._mode = this._withSub({
+                        name: "pointing-canvas",
+                        origin: diag,
+                        screenX: e.clientX,
+                        screenY: e.clientY,
+                    });
                 }
                 break;
             }
@@ -212,7 +211,7 @@ export class EditorStateMachine {
             this._cb.previewSpace(sub.origin, diag, axis);
             return;
         }
-        if (mode.mode !== "select") {
+        if (mode.mode !== "select" && mode.mode !== "default") {
             if (mode.mode === "create") {
                 // Ghost create: update overlay (editor reads state.mode to update ghost)
             }
@@ -224,7 +223,7 @@ export class EditorStateMachine {
                 const hoveredId = hit.type === "shape" ? hit.id : null;
                 if (hoveredId !== sub.hoveredId) {
                     this._cb.setHovered(hoveredId);
-                    this._mode = { mode: "select", sub: { name: "idle", hoveredId } };
+                    this._mode = this._withSub({ name: "idle", hoveredId });
                 }
                 if (hit.type === "edge-segment") {
                     this._cb.showEdgeHoverDot(hit.projPt);
@@ -244,10 +243,7 @@ export class EditorStateMachine {
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
                     this._cb.lockViewport(true);
-                    this._mode = {
-                        mode: "select",
-                        sub: { name: "translating", origin: sub.origin, last: diag },
-                    };
+                    this._mode = this._withSub({ name: "translating", origin: sub.origin, last: diag });
                     const dx = diag.x - sub.origin.x;
                     const dy = diag.y - sub.origin.y;
                     this._cb.previewTranslate(dx, dy);
@@ -257,7 +253,7 @@ export class EditorStateMachine {
             case "translating": {
                 const dx = diag.x - sub.origin.x;
                 const dy = diag.y - sub.origin.y;
-                this._mode = { mode: "select", sub: { ...sub, last: diag } };
+                this._mode = this._withSub({ ...sub, last: diag });
                 this._cb.previewTranslate(dx, dy);
                 break;
             }
@@ -269,54 +265,49 @@ export class EditorStateMachine {
                     if (!shape)
                         break;
                     const newBounds = applyResize(shape.shape.bounds, sub.handle, diag.x, diag.y);
-                    this._mode = {
-                        mode: "select",
-                        sub: {
-                            name: "resizing",
-                            id: sub.id,
-                            handle: sub.handle,
-                            original: shape.shape.bounds,
-                            current: diag,
-                        },
-                    };
+                    this._mode = this._withSub({
+                        name: "resizing",
+                        id: sub.id,
+                        handle: sub.handle,
+                        original: shape.shape.bounds,
+                        current: diag,
+                    });
                     this._cb.previewResize(newBounds);
                 }
                 break;
             }
             case "resizing": {
                 const newBounds = applyResize(sub.original, sub.handle, diag.x, diag.y);
-                this._mode = { mode: "select", sub: { ...sub, current: diag } };
+                this._mode = this._withSub({ ...sub, current: diag });
                 this._cb.previewResize(newBounds);
                 break;
             }
             case "pointing-port": {
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
-                    this._mode = {
-                        mode: "select",
-                        sub: { name: "connecting", sourceId: sub.sourceId, ghostEnd: diag },
-                    };
+                    this._mode = this._withSub({
+                        name: "connecting",
+                        sourceId: sub.sourceId,
+                        ghostEnd: diag,
+                    });
                     this._cb.previewConnect(diag);
                 }
                 break;
             }
             case "connecting": {
-                this._mode = { mode: "select", sub: { ...sub, ghostEnd: diag } };
+                this._mode = this._withSub({ ...sub, ghostEnd: diag });
                 this._cb.previewConnect(diag);
                 break;
             }
             case "pointing-edge-endpoint": {
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
-                    this._mode = {
-                        mode: "select",
-                        sub: {
-                            name: "dragging-edge-endpoint",
-                            edgeId: sub.edgeId,
-                            isStart: sub.isStart,
-                            origin: sub.origin,
-                        },
-                    };
+                    this._mode = this._withSub({
+                        name: "dragging-edge-endpoint",
+                        edgeId: sub.edgeId,
+                        isStart: sub.isStart,
+                        origin: sub.origin,
+                    });
                     this._cb.previewEndpointMove(sub.edgeId, sub.isStart, diag);
                 }
                 break;
@@ -328,15 +319,12 @@ export class EditorStateMachine {
             case "pointing-edge-segment": {
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
-                    this._mode = {
-                        mode: "select",
-                        sub: {
-                            name: "dragging-edge-waypoint-new",
-                            edgeId: sub.edgeId,
-                            segIdx: sub.segIdx,
-                            origin: sub.origin,
-                        },
-                    };
+                    this._mode = this._withSub({
+                        name: "dragging-edge-waypoint-new",
+                        edgeId: sub.edgeId,
+                        segIdx: sub.segIdx,
+                        origin: sub.origin,
+                    });
                     this._cb.previewWaypointInsert(sub.edgeId, sub.segIdx, diag);
                 }
                 break;
@@ -348,15 +336,12 @@ export class EditorStateMachine {
             case "pointing-edge-waypoint": {
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
-                    this._mode = {
-                        mode: "select",
-                        sub: {
-                            name: "dragging-edge-waypoint",
-                            edgeId: sub.edgeId,
-                            wpIdx: sub.wpIdx,
-                            origin: sub.pt,
-                        },
-                    };
+                    this._mode = this._withSub({
+                        name: "dragging-edge-waypoint",
+                        edgeId: sub.edgeId,
+                        wpIdx: sub.wpIdx,
+                        origin: sub.pt,
+                    });
                     this._cb.previewWaypointMove(sub.edgeId, sub.wpIdx, diag);
                 }
                 break;
@@ -366,20 +351,23 @@ export class EditorStateMachine {
                 break;
             }
             case "rubber-band": {
-                this._mode = { mode: "select", sub: { ...sub, current: diag } };
+                this._mode = this._withSub({ ...sub, current: diag });
                 this._cb.previewRubberBand(sub.origin, diag);
                 break;
             }
             case "pointing-canvas": {
-                // Transition to rubber-band when drag threshold exceeded (no Shift required)
                 const dist = screenDist(e.clientX, e.clientY, sub.screenX, sub.screenY);
                 if (dist > DRAG_THRESHOLD) {
-                    this._cb.lockViewport(true);
-                    this._mode = {
-                        mode: "select",
-                        sub: { name: "rubber-band", origin: sub.origin, current: diag },
-                    };
-                    this._cb.previewRubberBand(sub.origin, diag);
+                    if (this._mode.mode === "default") {
+                        // Default mode canvas drag → pan. Return to idle so pointer-up doesn't clear selection.
+                        this._mode = this._idle();
+                    }
+                    else {
+                        // Select mode canvas drag → rubber-band
+                        this._cb.lockViewport(true);
+                        this._mode = this._withSub({ name: "rubber-band", origin: sub.origin, current: diag });
+                        this._cb.previewRubberBand(sub.origin, diag);
+                    }
                 }
                 break;
             }
@@ -399,13 +387,21 @@ export class EditorStateMachine {
             }
             return;
         }
-        if (mode.mode !== "select")
+        // Pan mode: deselect tool on short click (no actual pan)
+        if (mode.mode === "pan") {
+            if (!this._cb.viewportDidPan()) {
+                this._mode = { mode: "default", sub: { name: "idle", hoveredId: null } };
+                this._cb.setTool("default");
+            }
+            return;
+        }
+        if (mode.mode !== "select" && mode.mode !== "default")
             return;
         const sub = mode.sub;
         switch (sub.name) {
             case "pointing-shape": {
                 this._cb.setSelection([sub.id]);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: sub.id } };
+                this._mode = this._withSub({ name: "idle", hoveredId: sub.id });
                 break;
             }
             case "translating": {
@@ -413,24 +409,24 @@ export class EditorStateMachine {
                 const dy = diag.y - sub.origin.y;
                 this._cb.lockViewport(false);
                 this._cb.commitTranslate(dx, dy);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "pointing-handle": {
                 this._cb.lockViewport(false);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "resizing": {
                 const newBounds = applyResize(sub.original, sub.handle, diag.x, diag.y);
                 this._cb.lockViewport(false);
                 this._cb.commitResize(sub.id, newBounds);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "pointing-port": {
                 this._cb.lockViewport(false);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "connecting": {
@@ -441,7 +437,7 @@ export class EditorStateMachine {
                 else {
                     this._cb.cancelConnect();
                 }
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "rubber-band": {
@@ -459,50 +455,52 @@ export class EditorStateMachine {
                 })
                     .map((s) => s.id);
                 this._cb.setSelection(ids);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "pointing-edge-endpoint": {
                 this._cb.lockViewport(false);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "dragging-edge-endpoint": {
                 this._cb.lockViewport(false);
                 this._cb.commitEndpointMove(sub.edgeId, sub.isStart, diag);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "pointing-edge-segment": {
                 this._cb.lockViewport(false);
                 // Tap without drag: select the edge
                 this._cb.setEdgeSelected(sub.edgeId);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "dragging-edge-waypoint-new": {
                 this._cb.lockViewport(false);
                 this._cb.commitWaypointInsert(sub.edgeId, sub.segIdx, diag);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "pointing-edge-waypoint": {
                 this._cb.lockViewport(false);
                 this._cb.setEdgeSelected(sub.edgeId);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "dragging-edge-waypoint": {
                 this._cb.lockViewport(false);
                 this._cb.commitWaypointMove(sub.edgeId, sub.wpIdx, diag);
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                this._mode = this._idle();
                 break;
             }
             case "pointing-canvas": {
                 if (!this._cb.viewportDidPan()) {
                     this._cb.setSelection([]);
                 }
-                this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+                // Return to default mode after canvas click
+                this._mode = { mode: "default", sub: { name: "idle", hoveredId: null } };
+                this._cb.setTool("default");
                 break;
             }
             default:
@@ -516,13 +514,59 @@ export class EditorStateMachine {
             this._cb.startLabelEdit(hit.id);
         }
     }
+    // ── Cancel (pointercancel / system gesture) ───────────────────────
+    cancel() {
+        const mode = this._mode;
+        if (mode.mode === "space") {
+            if (mode.sub.name === "dragging") {
+                this._cb.lockViewport(false);
+                this._cb.cancelSpace();
+            }
+        }
+        else if (mode.mode === "select" || mode.mode === "default") {
+            const sub = mode.sub;
+            if (sub.name === "translating") {
+                this._cb.cancelTranslate();
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "rubber-band") {
+                this._cb.cancelRubberBand();
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "pointing-handle" ||
+                sub.name === "resizing" ||
+                sub.name === "pointing-port") {
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "connecting") {
+                this._cb.cancelConnect();
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "pointing-edge-endpoint" || sub.name === "dragging-edge-endpoint") {
+                this._cb.cancelEndpointMove();
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "pointing-edge-segment" || sub.name === "pointing-edge-waypoint") {
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "dragging-edge-waypoint-new") {
+                this._cb.cancelWaypointInsert();
+                this._cb.lockViewport(false);
+            }
+            else if (sub.name === "dragging-edge-waypoint") {
+                this._cb.cancelWaypointMove();
+                this._cb.lockViewport(false);
+            }
+        }
+        this._mode = { mode: "default", sub: { name: "idle", hoveredId: null } };
+    }
     // ── Key down ──────────────────────────────────────────────────────
     onKeyDown(e) {
         const mode = this._mode;
         if (mode.mode === "create" && e.key === "Escape") {
             e.preventDefault();
-            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
-            this._cb.setTool("select");
+            this._mode = { mode: "default", sub: { name: "idle", hoveredId: null } };
+            this._cb.setTool("default");
             return;
         }
         if (mode.mode === "space" && e.key === "Escape") {
@@ -534,7 +578,7 @@ export class EditorStateMachine {
             this._mode = { mode: "space", sub: { name: "idle" } };
             return;
         }
-        if (mode.mode !== "select")
+        if (mode.mode !== "select" && mode.mode !== "default")
             return;
         const sub = mode.sub;
         if (e.key === "Escape") {
@@ -567,7 +611,7 @@ export class EditorStateMachine {
                 this._cb.cancelWaypointMove();
             }
             this._cb.setSelection([]);
-            this._mode = { mode: "select", sub: { name: "idle", hoveredId: null } };
+            this._mode = this._idle();
             return;
         }
         if (e.key === "Delete" || e.key === "Backspace") {

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import type { BpmnDefinitions } from "@bpmnkit/core";
 export type CreateShapeType = "startEvent" | "messageStartEvent" | "timerStartEvent" | "conditionalStartEvent" | "signalStartEvent" | "endEvent" | "messageEndEvent" | "escalationEndEvent" | "errorEndEvent" | "compensationEndEvent" | "signalEndEvent" | "terminateEndEvent" | "intermediateThrowEvent" | "intermediateCatchEvent" | "messageCatchEvent" | "messageThrowEvent" | "timerCatchEvent" | "escalationThrowEvent" | "conditionalCatchEvent" | "linkCatchEvent" | "linkThrowEvent" | "compensationThrowEvent" | "signalCatchEvent" | "signalThrowEvent" | "task" | "serviceTask" | "userTask" | "scriptTask" | "sendTask" | "receiveTask" | "businessRuleTask" | "manualTask" | "callActivity" | "subProcess" | "adHocSubProcess" | "transaction" | "exclusiveGateway" | "parallelGateway" | "inclusiveGateway" | "eventBasedGateway" | "complexGateway" | "textAnnotation";
 /** Element types that support resize handles. */
 export declare const RESIZABLE_TYPES: ReadonlySet<string>;
-export type Tool = "select" | "pan" | "space" | `create:${CreateShapeType}`;
+export type Tool = "default" | "select" | "pan" | "space" | `create:${CreateShapeType}`;
 export type HandleDir = "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w";
 export type PortDir = "top" | "right" | "bottom" | "left";
 export type EditorOptions = CanvasOptions & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/editor",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,8 +17,8 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/canvas": "0.0.11",
-    "@bpmnkit/core": "0.0.11"
+    "@bpmnkit/canvas": "0.0.13",
+    "@bpmnkit/core": "0.0.13"
   },
   "description": "Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI",
   "keywords": [