@bpmnkit/editor 0.0.8

package/README.md

@@ -0,0 +1,121 @@
+<div align="center">
+  <img src="https://raw.githubusercontent.com/bpmn-sdk/monorepo/main/doc/logos/logo-2-gateway.svg" width="72" height="72" alt="BPMN Kit logo">
+  <h1>@bpmnkit/editor</h1>
+  <p>Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI</p>
+
+  [![npm](https://img.shields.io/npm/v/@bpmnkit/editor?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmnkit/editor)
+  [![license](https://img.shields.io/npm/l/@bpmnkit/editor?style=flat-square)](https://github.com/bpmnkit/monorepo/blob/main/LICENSE)
+  [![typescript](https://img.shields.io/badge/TypeScript-strict-6244d7?style=flat-square&logo=typescript&logoColor=white)](https://github.com/bpmnkit/monorepo)
+
+  [Documentation](https://bpmn-sdk-docs.pages.dev) · [GitHub](https://github.com/bpmnkit/monorepo) · [Changelog](https://github.com/bpmnkit/monorepo/blob/main/packages/editor/CHANGELOG.md)
+</div>
+
+---
+
+## Overview
+
+`@bpmnkit/editor` turns the `@bpmnkit/canvas` viewer into a fully interactive editor. Drag to connect elements, inline-edit labels, resize shapes, attach boundary events, and integrate AI-assisted design — all through a composable API.
+
+## Features
+
+- **40+ element types** — all BPMN 2.0 tasks, events, gateways, sub-processes
+- **Drag-to-connect** — draw sequence flows with automatic waypoint routing
+- **Resize & move** — multi-select, group move, constrained resize
+- **Label editing** — inline text editor with multi-line support
+- **Undo/redo** — full command history with keyboard shortcuts
+- **Copy/paste** — multi-element clipboard with offset paste
+- **Boundary events** — attach and detach boundary events interactively
+- **HUD toolbar** — customisable palette with shape categories
+- **Side dock** — resizable right sidebar with Properties, AI chat, and Docs tabs
+- **Theme persistence** — auto read/write `localStorage` with `persistTheme`
+
+## Installation
+
+```sh
+npm install @bpmnkit/editor @bpmnkit/canvas
+```
+
+## Quick Start
+
+```typescript
+import { BpmnEditor, initEditorHud, createSideDock } from "@bpmnkit/editor"
+
+// Full editor (viewer + editing interactions)
+const editor = new BpmnEditor({
+  container: document.getElementById("editor")!,
+  theme: "dark",
+  persistTheme: true,
+  plugins: [],
+})
+
+// Toolbar HUD (palette, zoom controls, etc.)
+initEditorHud(editor, {
+  container: document.getElementById("hud")!,
+})
+
+// Sidebar with Properties + AI tabs
+const dock = createSideDock(document.body)
+editor.loadXML(bpmnXml)
+```
+
+## API Reference
+
+### `BpmnEditor`
+
+Extends `BpmnCanvas`. Adds all editing interactions.
+
+```typescript
+interface EditorOptions extends CanvasOptions {
+  persistTheme?: boolean  // auto-save theme to localStorage
+}
+```
+
+### `initEditorHud(editor, options)`
+
+Mounts the toolbar HUD into a container.
+
+```typescript
+interface HudOptions {
+  container: HTMLElement
+  optimizeButton?: HTMLElement  // inject into action bar
+  aiButton?: HTMLElement        // inject into action bar
+}
+```
+
+### `createSideDock(container)` → `SideDock`
+
+Creates the right-side collapsible dock.
+
+```typescript
+interface SideDock {
+  el: HTMLElement
+  propertiesPane: HTMLDivElement
+  aiPane: HTMLDivElement
+  docsPane: HTMLDivElement
+  switchTab(tab: "properties" | "ai" | "docs" | "history" | "play"): void
+  expand(): void
+  collapse(): void
+  collapsed: boolean
+  setDiagramInfo(processName: string, fileName: string): void
+}
+```
+
+---
+
+## Related Packages
+
+| Package | Description |
+|---------|-------------|
+| [`@bpmnkit/core`](https://www.npmjs.com/package/@bpmnkit/core) | BPMN/DMN/Form parser, builder, layout engine |
+| [`@bpmnkit/canvas`](https://www.npmjs.com/package/@bpmnkit/canvas) | Zero-dependency SVG BPMN viewer |
+| [`@bpmnkit/engine`](https://www.npmjs.com/package/@bpmnkit/engine) | Lightweight BPMN process execution engine |
+| [`@bpmnkit/feel`](https://www.npmjs.com/package/@bpmnkit/feel) | FEEL expression language parser & evaluator |
+| [`@bpmnkit/plugins`](https://www.npmjs.com/package/@bpmnkit/plugins) | 22 composable canvas plugins |
+| [`@bpmnkit/api`](https://www.npmjs.com/package/@bpmnkit/api) | Camunda 8 REST API TypeScript client |
+| [`@bpmnkit/ascii`](https://www.npmjs.com/package/@bpmnkit/ascii) | Render BPMN diagrams as Unicode ASCII art |
+| [`@bpmnkit/profiles`](https://www.npmjs.com/package/@bpmnkit/profiles) | Shared auth, profile storage, and client factories for CLI & proxy |
+| [`@bpmnkit/operate`](https://www.npmjs.com/package/@bpmnkit/operate) | Monitoring & operations frontend for Camunda clusters |
+
+## License
+
+[MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © bpmn-sdk

package/dist/command-stack.d.ts

@@ -0,0 +1,23 @@
+import type { BpmnDefinitions } from "@bpmnkit/core";
+/**
+ * Snapshot-based undo/redo history for the BPMN editor.
+ * Each push stores a full copy of the definitions model; since BPMN models
+ * are small the memory overhead is negligible.
+ */
+export declare class CommandStack {
+    private _snapshots;
+    private _cursor;
+    private readonly _maxSize;
+    /** Appends a new snapshot, clearing any redo states, and enforces maxSize. */
+    push(defs: BpmnDefinitions): void;
+    /** Returns the current snapshot, or null if the stack is empty. */
+    current(): BpmnDefinitions | null;
+    /** Moves the cursor back one step and returns that snapshot. */
+    undo(): BpmnDefinitions | null;
+    /** Moves the cursor forward one step and returns that snapshot. */
+    redo(): BpmnDefinitions | null;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    clear(): void;
+}
+//# sourceMappingURL=command-stack.d.ts.map

package/dist/command-stack.js

@@ -0,0 +1,48 @@
+/**
+ * Snapshot-based undo/redo history for the BPMN editor.
+ * Each push stores a full copy of the definitions model; since BPMN models
+ * are small the memory overhead is negligible.
+ */
+export class CommandStack {
+    _snapshots = [];
+    _cursor = -1;
+    _maxSize = 100;
+    /** Appends a new snapshot, clearing any redo states, and enforces maxSize. */
+    push(defs) {
+        this._snapshots.splice(this._cursor + 1);
+        this._snapshots.push(defs);
+        if (this._snapshots.length > this._maxSize) {
+            this._snapshots.shift();
+        }
+        this._cursor = this._snapshots.length - 1;
+    }
+    /** Returns the current snapshot, or null if the stack is empty. */
+    current() {
+        return this._snapshots[this._cursor] ?? null;
+    }
+    /** Moves the cursor back one step and returns that snapshot. */
+    undo() {
+        if (!this.canUndo())
+            return null;
+        this._cursor--;
+        return this._snapshots[this._cursor] ?? null;
+    }
+    /** Moves the cursor forward one step and returns that snapshot. */
+    redo() {
+        if (!this.canRedo())
+            return null;
+        this._cursor++;
+        return this._snapshots[this._cursor] ?? null;
+    }
+    canUndo() {
+        return this._cursor > 0;
+    }
+    canRedo() {
+        return this._cursor < this._snapshots.length - 1;
+    }
+    clear() {
+        this._snapshots = [];
+        this._cursor = -1;
+    }
+}
+//# sourceMappingURL=command-stack.js.map

package/dist/css.d.ts

@@ -0,0 +1,15 @@
+/** ID used to prevent duplicate style injection. */
+export declare const EDITOR_STYLE_ID = "bpmnkit-editor-styles-v1";
+/** ID used to prevent duplicate HUD style injection. */
+export declare const HUD_STYLE_ID = "bpmnkit-editor-hud-styles-v1";
+/** CSS for editor-specific overlays injected once into `<head>`. */
+export declare const EDITOR_CSS = "\n/* Selection outline */\n.bpmnkit-sel-indicator {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  pointer-events: none;\n}\n\n/* Resize handle */\n.bpmnkit-resize-handle {\n  fill: #fff;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  cursor: nwse-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"n\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"s\"] {\n  cursor: ns-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"e\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"w\"] {\n  cursor: ew-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"ne\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"sw\"] {\n  cursor: nesw-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"nw\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"se\"] {\n  cursor: nwse-resize;\n}\n\n/* Connection port */\n.bpmnkit-conn-port {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: none;\n  cursor: crosshair;\n  opacity: 0.7;\n}\n.bpmnkit-conn-port:hover {\n  opacity: 1;\n}\n\n/* Rubber-band selection */\n.bpmnkit-rubber-band {\n  fill: rgba(0, 102, 204, 0.05);\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Ghost element (create / connect preview) */\n.bpmnkit-ghost {\n  opacity: 0.45;\n  pointer-events: none;\n}\n\n/* Ghost connection line */\n.bpmnkit-ghost-conn {\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  stroke-dasharray: 6 3;\n  fill: none;\n  pointer-events: none;\n}\n\n/* Resize preview rect */\n.bpmnkit-resize-preview {\n  fill: rgba(0, 102, 204, 0.05);\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Alignment guide lines (snap helpers) */\n.bpmnkit-align-guide {\n  stroke: var(--bpmnkit-accent-bright, #6b9df7);\n  stroke-width: 1;\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Edge transparent hit area (wide stroke for easier clicking) */\n.bpmnkit-edge-hitarea {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 12;\n  cursor: pointer;\n}\n\n/* Edge hover dot (waypoint insertion indicator) */\n.bpmnkit-edge-hover-dot {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  pointer-events: none;\n  opacity: 0.85;\n}\n[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge waypoint angle balls (visible on edge hover) */\n.bpmnkit-edge-waypoint-ball {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  cursor: move;\n}\n.bpmnkit-edge-waypoint-ball:hover { fill: var(--bpmnkit-accent, #1a56db); }\n[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge endpoint drag handles */\n.bpmnkit-edge-endpoint {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  cursor: grab;\n}\n.bpmnkit-edge-endpoint:hover {\n  fill: var(--bpmnkit-accent, #1a56db);\n}\n\n/* Ghost polyline when dragging an edge endpoint */\n.bpmnkit-endpoint-ghost {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  stroke-dasharray: 5 3;\n  pointer-events: none;\n}\n\n/* Edge split target highlight (shown while dragging a shape over an edge) */\n.bpmnkit-edge-split-highlight .bpmnkit-edge-path {\n  stroke: var(--bpmnkit-success, #22c55e);\n  stroke-width: 2.5;\n}\n\n/* Distance/spacing guide arrows */\n.bpmnkit-dist-guide {\n  stroke: var(--bpmnkit-warn, #f97316);\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n}\n\n/* Space tool split indicator line */\n.bpmnkit-space-line {\n  stroke: var(--bpmnkit-warn, #f59e0b);\n  stroke-width: 1.5;\n  stroke-dasharray: 6 3;\n  pointer-events: none;\n}\n\n/* Label editor */\n.bpmnkit-label-editor {\n  position: absolute;\n  min-width: 40px;\n  min-height: 16px;\n  padding: 1px 3px;\n  background: #fff;\n  border: 1px solid var(--bpmnkit-accent, #1a56db);\n  border-radius: 2px;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 11px;\n  text-align: center;\n  outline: none;\n  z-index: 10;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Boundary event attach highlight */\n.bpmnkit-boundary-host {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 2;\n  stroke-dasharray: 6 3;\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n/* Duplicate-ID warning banner */\n.bpmnkit-editor-warning-banner {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  max-width: calc(100% - 32px);\n  padding: 6px 12px;\n  border-radius: 6px;\n  background: #fef3c7;\n  border: 1px solid #f59e0b;\n  color: #92400e;\n  font-size: 12px;\n  line-height: 1.4;\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-editor-warning-banner {\n  background: #451a03;\n  border-color: #d97706;\n  color: #fde68a;\n}\n";
+/** Injects the editor stylesheet into `<head>` if not already present. */
+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";
+/** Injects the HUD stylesheet into `<head>` if not already present. */
+export declare function injectHudStyles(): void;
+//# sourceMappingURL=css.d.ts.map