@bpmnkit/plugins 0.0.8

package/README.md

@@ -0,0 +1,153 @@
+<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/plugins</h1>
+  <p>22 composable canvas plugins — minimap, AI chat, process simulation, storage, and more</p>
+
+  [![npm](https://img.shields.io/npm/v/@bpmnkit/plugins?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmnkit/plugins)
+  [![license](https://img.shields.io/npm/l/@bpmnkit/plugins?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/plugins/CHANGELOG.md)
+</div>
+
+---
+
+## Overview
+
+`@bpmnkit/plugins` is a single package containing 22 ready-made `CanvasPlugin` add-ons for `@bpmnkit/canvas` and `@bpmnkit/editor`. Each plugin is imported individually via subpath exports so you only bundle what you use.
+
+## Installation
+
+```sh
+npm install @bpmnkit/plugins
+```
+
+## Plugins
+
+### Visualization
+
+| Subpath | Factory | Description |
+|---------|---------|-------------|
+| `/minimap` | `createMinimapPlugin()` | Thumbnail navigation minimap |
+| `/watermark` | `createWatermarkPlugin(text)` | Corner watermark overlay |
+| `/ascii-view` | `createAsciiViewPlugin()` | Toggle ASCII art rendering |
+| `/zoom-controls` | `createZoomControlsPlugin()` | On-canvas +/− zoom buttons |
+
+### File Management
+
+| Subpath | Factory | Description |
+|---------|---------|-------------|
+| `/tabs` | `createTabsPlugin(options)` | Multi-file tab bar with welcome screen |
+| `/storage` | `createStoragePlugin(options)` | IndexedDB workspaces/projects/files with auto-save |
+| `/storage-tabs-bridge` | `createStorageTabsBridge(options)` | Wire tabs + storage + main menu together |
+
+### Editing
+
+| Subpath | Factory | Description |
+|---------|---------|-------------|
+| `/command-palette` | `createCommandPalettePlugin()` | ⌘K command palette |
+| `/command-palette-editor` | `createCommandPaletteEditorPlugin()` | Editor-specific commands |
+| `/history` | `createHistoryPlugin()` | Visual undo/redo history panel |
+| `/config-panel` | `createConfigPanelPlugin(options)` | Properties panel for selected elements |
+| `/config-panel-bpmn` | `createConfigPanelBpmnPlugin(options)` | BPMN-specific properties panel |
+
+### DMN & Forms
+
+| Subpath | Factory | Description |
+|---------|---------|-------------|
+| `/dmn-editor` | — | Embedded DMN decision table editor |
+| `/dmn-viewer` | — | Read-only DMN viewer |
+| `/form-editor` | — | Camunda Form schema editor |
+| `/form-viewer` | — | Read-only form renderer |
+| `/feel-playground` | — | Interactive FEEL expression tester |
+
+### Process Simulation
+
+| Subpath | Factory | Description |
+|---------|---------|-------------|
+| `/process-runner` | `createProcessRunnerPlugin(options)` | Run BPMN instances with play/step/stop UI |
+| `/token-highlight` | `createTokenHighlightPlugin()` | Highlight active/visited elements during execution |
+| `/optimize` | `createOptimizePlugin()` | Show optimizer findings overlay |
+
+### AI & Navigation
+
+| Subpath | Factory | Description |
+|---------|---------|-------------|
+| `/ai-bridge` | `createAiBridgePlugin(options)` | AI chat panel with diagram apply/checkpoint |
+| `/element-docs` | `createElementDocsPlugin(options)` | Built-in BPMN element reference docs |
+| `/main-menu` | `createMainMenuPlugin(options)` | File/Edit top-level menu |
+
+## Usage Examples
+
+### Minimap
+
+```typescript
+import { BpmnCanvas } from "@bpmnkit/canvas"
+import { createMinimapPlugin } from "@bpmnkit/plugins/minimap"
+
+const canvas = new BpmnCanvas({
+  container: document.getElementById("canvas")!,
+  plugins: [createMinimapPlugin()],
+})
+```
+
+### Storage + Tabs
+
+```typescript
+import { createStoragePlugin } from "@bpmnkit/plugins/storage"
+import { createTabsPlugin } from "@bpmnkit/plugins/tabs"
+import { createStorageTabsBridge } from "@bpmnkit/plugins/storage-tabs-bridge"
+
+const storage = createStoragePlugin({ editor })
+const tabs = createTabsPlugin({ editor })
+const bridge = createStorageTabsBridge({ storage, tabs, mainMenu })
+```
+
+### Process Simulation
+
+```typescript
+import { Engine } from "@bpmnkit/engine"
+import { createTokenHighlightPlugin } from "@bpmnkit/plugins/token-highlight"
+import { createProcessRunnerPlugin } from "@bpmnkit/plugins/process-runner"
+
+const engine = new Engine()
+const tokenHighlight = createTokenHighlightPlugin()
+const processRunner = createProcessRunnerPlugin({ engine, tokenHighlight })
+
+const canvas = new BpmnCanvas({
+  container,
+  plugins: [tokenHighlight, processRunner],
+})
+```
+
+### AI Chat Panel
+
+```typescript
+import { createAiBridgePlugin } from "@bpmnkit/plugins/ai-bridge"
+
+const ai = createAiBridgePlugin({
+  serverUrl: "http://localhost:3033",
+  container: dock.aiPane,
+  onOpen: () => dock.expand(),
+})
+```
+
+---
+
+## 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/editor`](https://www.npmjs.com/package/@bpmnkit/editor) | Full-featured interactive BPMN editor |
+| [`@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/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/ai-bridge/css.d.ts

@@ -0,0 +1,2 @@
+export declare function injectAiBridgeStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/ai-bridge/css.js

@@ -0,0 +1,366 @@
+const STYLE_ID = "ai-bridge-styles";
+export function injectAiBridgeStyles() {
+    const existing = document.getElementById(STYLE_ID);
+    const style = existing instanceof HTMLStyleElement ? existing : document.createElement("style");
+    if (!existing) {
+        style.id = STYLE_ID;
+        document.head.appendChild(style);
+    }
+    style.textContent = `
+.ai-panel {
+  position: fixed; top: 0; right: 0; bottom: 0;
+  width: 360px; z-index: 150;
+  display: flex; flex-direction: column;
+  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));
+  border-left: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));
+  color: rgba(255,255,255,0.85);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  transform: translateX(100%);
+  transition: transform 0.2s ease;
+  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
+}
+.ai-panel.ai-panel-open { transform: translateX(0); }
+.ai-panel-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  flex-shrink: 0;
+}
+.ai-panel-title { font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.92); }
+.ai-panel-header-actions { display: flex; gap: 4px; align-items: center; }
+.ai-panel-status {
+  padding: 6px 14px;
+  font-size: 11.5px;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  flex-shrink: 0;
+}
+.ai-panel-status-ok { color: rgba(120,220,120,0.8); }
+.ai-panel-status-err { color: rgba(220,100,80,0.9); }
+.ai-panel-status-err code {
+  display: block; margin-top: 4px;
+  background: rgba(255,255,255,0.05); border-radius: 4px;
+  padding: 4px 8px; font-size: 11px; color: rgba(255,255,255,0.9);
+  user-select: all;
+}
+/* ── Messages ── */
+.ai-messages {
+  flex: 1; overflow-y: auto; padding: 10px;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.ai-msg {
+  border-radius: 8px; padding: 8px 12px;
+  line-height: 1.5; word-break: break-word;
+}
+.ai-msg-user {
+  background: rgba(60,120,220,0.25);
+  border: 1px solid rgba(60,120,220,0.35);
+  align-self: flex-end; max-width: 85%;
+  white-space: pre-wrap;
+}
+.ai-msg-ai {
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.08);
+  align-self: flex-start; max-width: 95%;
+}
+.ai-msg-cursor::after {
+  content: "▊"; animation: ai-blink 0.8s step-end infinite;
+}
+@keyframes ai-blink { 50% { opacity: 0; } }
+/* ── Markdown elements ── */
+.ai-md-h { font-size: 13.5px; font-weight: 600; margin: 6px 0 2px; }
+.ai-md-h:first-child { margin-top: 0; }
+.ai-md-p { margin: 0; }
+.ai-md-p + .ai-md-p { margin-top: 5px; }
+.ai-md-list { margin: 4px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
+.ai-md-code {
+  background: rgba(0,0,0,0.28); border-radius: 3px;
+  padding: 1px 5px; font-family: monospace; font-size: 11.5px;
+}
+/* ── Diagram preview ── */
+.ai-msg-preview {
+  position: relative; height: 200px; margin: 8px 0;
+  border-radius: 6px; overflow: hidden;
+  border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));
+}
+.ai-msg-preview .bpmnkit-canvas { width: 100%; height: 100%; }
+/* ── Message action row (copy + apply) ── */
+.ai-msg-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
+.ai-msg-copy {
+  padding: 3px 10px; border-radius: 5px;
+  background: none; border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));
+  color: rgba(255,255,255,0.35); font-size: 11px; cursor: pointer;
+  font-family: inherit;
+  transition: color 0.15s, border-color 0.15s;
+}
+.ai-msg-copy:hover { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.2); }
+.ai-msg-apply {
+  padding: 3px 12px;
+  background: rgba(60,180,100,0.25); border: 1px solid rgba(60,180,100,0.4);
+  border-radius: 5px; color: rgba(120,230,140,0.9);
+  font-size: 11px; cursor: pointer; font-weight: 500; font-family: inherit;
+}
+.ai-msg-apply:hover { background: rgba(60,180,100,0.38); }
+.ai-msg-approve {
+  padding: 3px 12px;
+  background: rgba(200,150,30,0.25); border: 1px solid rgba(200,150,30,0.4);
+  border-radius: 5px; color: rgba(255,210,80,0.9);
+  font-size: 11px; cursor: pointer; font-weight: 500; font-family: inherit;
+}
+.ai-msg-approve:hover { background: rgba(200,150,30,0.38); }
+.ai-msg-approve:disabled { opacity: 0.4; cursor: default; }
+.ai-msg-code {
+  background: rgba(0,0,0,0.3); border-radius: 5px;
+  padding: 8px; margin: 6px 0;
+  font-family: monospace; font-size: 11.5px;
+  color: rgba(255,255,255,0.65);
+  overflow-x: auto; white-space: pre;
+}
+/* ── Welcome / empty state ── */
+.ai-welcome {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  padding: 16px; gap: 10px; text-align: center;
+}
+.ai-welcome-title {
+  font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85);
+}
+.ai-welcome-sub {
+  font-size: 12px; color: rgba(255,255,255,0.38); margin-bottom: 6px;
+}
+.ai-welcome-examples { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.ai-welcome-example {
+  padding: 8px 12px; border-radius: 8px; text-align: left;
+  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
+  color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer;
+  font-family: inherit; transition: background 0.15s, color 0.15s;
+}
+.ai-welcome-example:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); }
+/* ── Quick actions ── */
+.ai-quick-actions {
+  padding: 6px 10px;
+  display: flex; gap: 6px; flex-wrap: wrap;
+  border-top: 1px solid rgba(255,255,255,0.06);
+  flex-shrink: 0;
+}
+.ai-quick-btn {
+  padding: 4px 10px; border-radius: 14px;
+  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
+  color: rgba(255,255,255,0.65); font-size: 12px; cursor: pointer;
+  font-family: inherit; white-space: nowrap;
+  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
+  transition: background 0.15s, color 0.15s;
+}
+.ai-quick-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
+.ai-quick-btn:disabled { opacity: 0.3; cursor: default; }
+/* ── Context badge strip ── */
+.ai-context-refs {
+  padding: 6px 10px 4px;
+  display: flex; gap: 6px; flex-wrap: wrap;
+  border-top: 1px solid rgba(255,255,255,0.06);
+  flex-shrink: 0;
+}
+.ai-context-badge {
+  display: inline-flex; align-items: center; gap: 3px;
+  padding: 2px 4px 2px 8px;
+  background: rgba(60,120,220,0.15); border: 1px solid rgba(60,120,220,0.3);
+  border-radius: 4px; font-size: 11.5px;
+  color: rgba(160,190,255,0.9); max-width: 240px;
+  cursor: pointer; user-select: none;
+}
+.ai-context-badge__label {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-style: italic; cursor: pointer;
+}
+.ai-context-badge--pinned .ai-context-badge__label { font-style: normal; }
+.ai-context-badge__remove {
+  background: none; border: none; padding: 0 2px;
+  color: rgba(160,190,255,0.55); cursor: pointer;
+  font-size: 15px; line-height: 1; flex-shrink: 0;
+}
+.ai-context-badge__remove:hover { color: rgba(255,255,255,0.9); }
+.ai-msg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
+.ai-msg-context-chip {
+  display: inline-block;
+  font-size: 11px; padding: 1px 6px;
+  background: rgba(60,120,220,0.2); border: 1px solid rgba(60,120,220,0.3);
+  border-radius: 3px; color: rgba(160,190,255,0.85);
+}
+/* ── Input area ── */
+.ai-input-area {
+  padding: 10px 10px 6px; border-top: 1px solid rgba(255,255,255,0.08);
+  display: flex; gap: 8px; align-items: flex-end;
+  flex-shrink: 0;
+}
+.ai-textarea {
+  flex: 1; min-height: 36px; max-height: 200px;
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 6px; color: rgba(255,255,255,0.85);
+  font-size: 13px; font-family: inherit;
+  padding: 7px 10px; resize: none; overflow-y: auto;
+  outline: none; line-height: 1.45;
+}
+.ai-textarea:focus { border-color: rgba(60,120,220,0.5); }
+.ai-textarea::placeholder { color: rgba(255,255,255,0.3); }
+.ai-send-btn {
+  padding: 7px 14px; border-radius: 6px;
+  background: rgba(60,120,220,0.5); border: 1px solid rgba(60,120,220,0.7);
+  color: #fff; font-size: 13px; font-weight: 500;
+  cursor: pointer; flex-shrink: 0; height: 36px;
+}
+.ai-send-btn:hover:not(:disabled) { background: rgba(60,120,220,0.65); }
+.ai-send-btn:disabled { opacity: 0.4; cursor: default; }
+.ai-stop-btn {
+  padding: 7px 14px; border-radius: 6px;
+  background: rgba(200,60,60,0.45); border: 1px solid rgba(200,60,60,0.65);
+  color: #fff; font-size: 13px; font-weight: 500;
+  cursor: pointer; flex-shrink: 0; height: 36px;
+}
+.ai-stop-btn:hover { background: rgba(200,60,60,0.65); }
+.ai-input-hint {
+  padding: 0 10px 8px;
+  font-size: 10.5px; color: rgba(255,255,255,0.2);
+  flex-shrink: 0;
+}
+/* ── Header buttons ── */
+.ai-hdr-btn {
+  padding: 3px 8px; border-radius: 5px;
+  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
+  color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer;
+  display: flex; align-items: center; gap: 3px;
+}
+.ai-hdr-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
+.ai-hdr-btn svg { width: 13px; height: 13px; }
+.ai-backend-select {
+  padding: 3px 6px; border-radius: 5px;
+  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
+  color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer;
+  font-family: inherit; outline: none;
+}
+.ai-backend-select:hover { background: rgba(255,255,255,0.1); }
+/* ── Docked mode ── */
+.ai-panel--docked {
+  position: static !important;
+  transform: none !important;
+  width: auto !important;
+  right: auto; top: auto; bottom: auto;
+  flex: 1; min-height: 0;
+  box-shadow: none; border-left: none;
+}
+.ai-panel--docked, .ai-panel--docked.ai-panel-open { display: flex; }
+.ai-panel--docked .ai-hdr-btn[title="Close"] { display: none; }
+
+/* ── Light theme ── */
+[data-bpmnkit-hud-theme="light"] .ai-panel {
+  background: rgba(252,252,254,0.98);
+  border-left-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
+  color: rgba(0,0,0,0.8);
+  box-shadow: -4px 0 20px rgba(0,0,0,0.12);
+}
+[data-bpmnkit-hud-theme="light"] .ai-panel-header { border-bottom-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08)); }
+[data-bpmnkit-hud-theme="light"] .ai-panel-title { color: rgba(0,0,0,0.88); }
+[data-bpmnkit-hud-theme="light"] .ai-panel-status { border-bottom-color: rgba(0,0,0,0.06); }
+[data-bpmnkit-hud-theme="light"] .ai-panel-status-err { color: rgba(180,40,20,0.9); }
+[data-bpmnkit-hud-theme="light"] .ai-panel-status-err code {
+  background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.8);
+}
+[data-bpmnkit-hud-theme="light"] .ai-msg-user {
+  background: rgba(0,80,200,0.1); border-color: rgba(0,80,200,0.2);
+}
+[data-bpmnkit-hud-theme="light"] .ai-msg-ai {
+  background: rgba(0,0,0,0.03); border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
+}
+[data-bpmnkit-hud-theme="light"] .ai-md-code { background: rgba(0,0,0,0.06); }
+[data-bpmnkit-hud-theme="light"] .ai-msg-copy {
+  border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.35);
+}
+[data-bpmnkit-hud-theme="light"] .ai-msg-copy:hover { color: rgba(0,0,0,0.7); border-color: rgba(0,0,0,0.2); }
+[data-bpmnkit-hud-theme="light"] .ai-msg-apply {
+  background: rgba(0,150,60,0.1); border-color: rgba(0,150,60,0.25); color: #0a7030;
+}
+[data-bpmnkit-hud-theme="light"] .ai-msg-approve {
+  background: rgba(180,120,0,0.1); border-color: rgba(180,120,0,0.25); color: #7a5000;
+}
+[data-bpmnkit-hud-theme="light"] .ai-msg-code { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.65); }
+[data-bpmnkit-hud-theme="light"] .ai-msg-preview { border-color: rgba(0,0,0,0.1); }
+[data-bpmnkit-hud-theme="light"] .ai-welcome-title { color: rgba(0,0,0,0.85); }
+[data-bpmnkit-hud-theme="light"] .ai-welcome-sub { color: rgba(0,0,0,0.4); }
+[data-bpmnkit-hud-theme="light"] .ai-welcome-example {
+  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); color: rgba(0,0,0,0.6);
+}
+[data-bpmnkit-hud-theme="light"] .ai-welcome-example:hover { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.88); }
+[data-bpmnkit-hud-theme="light"] .ai-quick-actions { border-top-color: rgba(0,0,0,0.06); }
+[data-bpmnkit-hud-theme="light"] .ai-quick-btn {
+  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.55);
+}
+[data-bpmnkit-hud-theme="light"] .ai-quick-btn:hover:not(:disabled) { background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.8); }
+[data-bpmnkit-hud-theme="light"] .ai-context-refs { border-top-color: rgba(0,0,0,0.06); }
+[data-bpmnkit-hud-theme="light"] .ai-context-badge {
+  background: rgba(0,80,200,0.08); border-color: rgba(0,80,200,0.2); color: rgba(0,60,180,0.85);
+}
+[data-bpmnkit-hud-theme="light"] .ai-context-badge__remove { color: rgba(0,60,180,0.45); }
+[data-bpmnkit-hud-theme="light"] .ai-context-badge__remove:hover { color: rgba(0,0,0,0.8); }
+[data-bpmnkit-hud-theme="light"] .ai-msg-context-chip {
+  background: rgba(0,80,200,0.08); border-color: rgba(0,80,200,0.2); color: rgba(0,60,180,0.85);
+}
+[data-bpmnkit-hud-theme="light"] .ai-input-area { border-top-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08)); }
+[data-bpmnkit-hud-theme="light"] .ai-textarea {
+  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.8);
+}
+[data-bpmnkit-hud-theme="light"] .ai-textarea:focus { border-color: rgba(0,80,200,0.4); }
+[data-bpmnkit-hud-theme="light"] .ai-textarea::placeholder { color: rgba(0,0,0,0.3); }
+[data-bpmnkit-hud-theme="light"] .ai-send-btn { background: rgba(0,80,200,0.85); border-color: rgba(0,80,200,0.9); }
+[data-bpmnkit-hud-theme="light"] .ai-stop-btn { background: rgba(180,40,40,0.75); border-color: rgba(180,40,40,0.9); }
+[data-bpmnkit-hud-theme="light"] .ai-input-hint { color: rgba(0,0,0,0.25); }
+[data-bpmnkit-hud-theme="light"] .ai-hdr-btn {
+  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.55);
+}
+[data-bpmnkit-hud-theme="light"] .ai-hdr-btn:hover { color: rgba(0,0,0,0.85); }
+[data-bpmnkit-hud-theme="light"] .ai-backend-select {
+  background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.55);
+}
+[data-bpmnkit-hud-theme="light"] .ai-hist-panel { background: rgba(252,252,254,0.98); border-color: rgba(0,0,0,0.1); }
+[data-bpmnkit-hud-theme="light"] .ai-hist-header { color: rgba(0,0,0,0.88); border-bottom-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08)); }
+[data-bpmnkit-hud-theme="light"] .ai-hist-time { color: rgba(0,0,0,0.45); }
+[data-bpmnkit-hud-theme="light"] .ai-hist-item { border-bottom-color: rgba(0,0,0,0.05); }
+[data-bpmnkit-hud-theme="light"] .ai-hist-item:hover { background: rgba(0,0,0,0.03); }
+[data-bpmnkit-hud-theme="light"] .ai-hist-empty { color: rgba(0,0,0,0.35); }
+.ai-companion-offer {
+  margin-top: 10px; padding: 10px 12px;
+  border: 1px solid rgba(100,160,255,0.2);
+  border-radius: 6px; background: rgba(60,120,255,0.06);
+}
+.ai-companion-title {
+  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
+  color: rgba(255,255,255,0.45); margin-bottom: 8px;
+}
+.ai-companion-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 8px; margin-bottom: 5px;
+}
+.ai-companion-row:last-child { margin-bottom: 0; }
+.ai-companion-row span {
+  font-size: 12px; color: rgba(255,255,255,0.75); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
+}
+.ai-companion-create {
+  flex-shrink: 0; padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer;
+  border: 1px solid rgba(100,160,255,0.3); background: rgba(60,120,255,0.12);
+  color: rgba(140,190,255,0.9); transition: background 0.15s;
+}
+.ai-companion-create:hover:not(:disabled) { background: rgba(60,120,255,0.22); }
+.ai-companion-create:disabled { opacity: 0.6; cursor: default; }
+[data-bpmnkit-hud-theme="light"] .ai-companion-offer {
+  background: rgba(0,80,200,0.04); border-color: rgba(0,80,200,0.15);
+}
+[data-bpmnkit-hud-theme="light"] .ai-companion-title { color: rgba(0,0,0,0.4); }
+[data-bpmnkit-hud-theme="light"] .ai-companion-row span { color: rgba(0,0,0,0.7); }
+[data-bpmnkit-hud-theme="light"] .ai-companion-create {
+  border-color: rgba(0,80,200,0.25); background: rgba(0,80,200,0.07); color: rgba(0,60,180,0.85);
+}
+[data-bpmnkit-hud-theme="light"] .ai-companion-create:hover:not(:disabled) { background: rgba(0,80,200,0.13); }
+`;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/ai-bridge/index.d.ts

@@ -0,0 +1,44 @@
+import type { BpmnDefinitions } from "@bpmnkit/core";
+import type { NodeContext } from "./panel.js";
+export type { NodeContext };
+export interface AiBridgePluginOptions {
+    /** URL of the local AI server. Defaults to http://localhost:3033 */
+    serverUrl?: string;
+    /** Returns the current diagram definitions, or null if no diagram is loaded. */
+    getDefinitions(): BpmnDefinitions | null;
+    /** Loads the given XML into the editor. */
+    loadXml(xml: string): void;
+    /** Returns the current storage context for checkpoint saving, if available. */
+    getCurrentContext?(): {
+        projectId: string;
+        fileId: string;
+    } | null;
+    /** Dock AI pane to mount into instead of document.body. */
+    container?: HTMLElement;
+    /** Called when the button is clicked in docked mode. */
+    onOpen?: () => void;
+    /** Returns the current editor theme — used to match the diagram preview color scheme. */
+    getTheme?(): "dark" | "light";
+    /**
+     * Called when the user requests creation of a companion DMN or Form file.
+     * Receives a suggested file name, file type, and the serialized content.
+     */
+    createCompanionFile?(name: string, type: "dmn" | "form", content: string): Promise<void>;
+}
+/**
+ * Creates an AI bridge plugin that provides a chat panel for AI-assisted
+ * BPMN diagram creation and modification.
+ *
+ * The returned `button` should be passed to `initEditorHud` as `aiButton`.
+ * The panel is injected into `document.body` on first open.
+ */
+export declare function createAiBridgePlugin(options: AiBridgePluginOptions): {
+    name: string;
+    install(api: unknown): void;
+    button: HTMLButtonElement;
+    /** Initialize the panel (if not yet created) and open it. */
+    openPanel(): void;
+    /** Set the node context shown as a badge above the chat input. Pass null to clear. */
+    setContext(node: NodeContext | null): void;
+};
+//# sourceMappingURL=index.d.ts.map