@bpmnkit/plugins 0.0.11 → 0.0.12

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/plugins</h1>
   <p>22 composable canvas plugins — minimap, AI chat, process simulation, storage, and more</p>
 
@@ -155,3 +155,7 @@ const ai = createAiBridgePlugin({
 ## 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/ai-bridge/index.d.ts

@@ -40,5 +40,7 @@ export declare function createAiBridgePlugin(options: AiBridgePluginOptions): {
     openPanel(): void;
     /** Set the node context shown as a badge above the chat input. Pass null to clear. */
     setContext(node: NodeContext | null): void;
+    /** Open the AI panel, pre-fill `prompt`, and submit it immediately. */
+    ask(prompt: string): void;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/ai-bridge/index.js

@@ -121,12 +121,17 @@ export function createAiBridgePlugin(options) {
             setContext(findElementById(options.getDefinitions(), id));
         });
     }
+    function ask(prompt) {
+        openPanel();
+        getOrCreatePanel().submit(prompt);
+    }
     return {
         name: "ai-bridge",
         install,
         button,
         openPanel,
         setContext,
+        ask,
     };
 }
 //# sourceMappingURL=index.js.map

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

@@ -22,6 +22,7 @@ export declare function createAiPanel(options: PanelOptions): {
     open(): void;
     close(): void;
     setContext(node: NodeContext | null): void;
+    submit(prompt: string): void;
 };
 export { DEFAULT_SERVER };
 //# sourceMappingURL=panel.d.ts.map

package/dist/ai-bridge/panel.js

@@ -709,7 +709,14 @@ export function createAiPanel(options) {
     function close() {
         panel.classList.remove("ai-panel-open");
     }
-    return { panel, open, close, setContext };
+    /** Open the panel, pre-fill the given prompt, and submit it immediately. */
+    function submit(prompt) {
+        open();
+        textarea.value = prompt;
+        autoGrow();
+        void send();
+    }
+    return { panel, open, close, setContext, submit };
 }
 export { DEFAULT_SERVER };
 //# sourceMappingURL=panel.js.map

package/dist/command-palette/css.d.ts

@@ -1,4 +1,4 @@
 export declare const COMMAND_PALETTE_STYLE_ID = "bpmnkit-command-palette-styles-v1";
-export declare const COMMAND_PALETTE_CSS = "\n/* \u2500\u2500 Overlay backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  backdrop-filter: blur(3px);\n  z-index: 9999;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 15vh;\n  font-family: system-ui, -apple-system, sans-serif;\n}\n\n/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-panel {\n  width: min(560px, calc(100vw - 32px));\n  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n  border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \u2500\u2500 Search row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-search {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 0 16px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n}\n.bpmnkit-palette-search-icon {\n  display: flex;\n  align-items: center;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  color: rgba(255, 255, 255, 0.35);\n  pointer-events: none;\n}\n.bpmnkit-palette-search-icon svg { width: 16px; height: 16px; }\n.bpmnkit-palette-input {\n  flex: 1;\n  height: 48px;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 14px;\n  caret-color: var(--bpmnkit-accent, #6b9df7);\n}\n.bpmnkit-palette-input::placeholder { color: rgba(255, 255, 255, 0.3); }\n\n/* \u2500\u2500 Keyboard hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-kbd {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n.bpmnkit-palette-kbd kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 5px;\n  background: rgba(255, 255, 255, 0.07);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 4px;\n  font-family: system-ui, sans-serif;\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  line-height: 1;\n}\n\n/* \u2500\u2500 Commands list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-list {\n  max-height: 360px;\n  overflow-y: auto;\n  padding: 4px;\n}\n.bpmnkit-palette-empty {\n  padding: 20px 16px;\n  text-align: center;\n  color: rgba(255, 255, 255, 0.3);\n  font-size: 13px;\n}\n.bpmnkit-palette-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  border-radius: 7px;\n  cursor: pointer;\n  color: rgba(255, 255, 255, 0.75);\n  font-size: 13px;\n  user-select: none;\n}\n.bpmnkit-palette-item:hover,\n.bpmnkit-palette-item.bpmnkit-palette-focused {\n  background: rgba(255, 255, 255, 0.08);\n  color: rgba(255, 255, 255, 0.95);\n}\n.bpmnkit-palette-item-title { flex: 1; }\n.bpmnkit-palette-item-desc {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.35);\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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette--light .bpmnkit-palette-panel {\n  background: rgba(250, 250, 252, 0.98);\n  border-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n}\n.bpmnkit-palette--light .bpmnkit-palette-search {\n  border-bottom-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n}\n.bpmnkit-palette--light .bpmnkit-palette-search-icon { color: rgba(0, 0, 0, 0.35); }\n.bpmnkit-palette--light .bpmnkit-palette-input { color: rgba(0, 0, 0, 0.9); caret-color: var(--bpmnkit-accent, #1a56db); }\n.bpmnkit-palette--light .bpmnkit-palette-input::placeholder { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-kbd kbd {\n  background: rgba(0, 0, 0, 0.05);\n  border-color: rgba(0, 0, 0, 0.12);\n  color: rgba(0, 0, 0, 0.4);\n}\n.bpmnkit-palette--light .bpmnkit-palette-empty { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-item { color: rgba(0, 0, 0, 0.75); }\n.bpmnkit-palette--light .bpmnkit-palette-item:hover,\n.bpmnkit-palette--light .bpmnkit-palette-item.bpmnkit-palette-focused {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.95);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item-desc { color: rgba(0, 0, 0, 0.4); }\n\n/* \u2500\u2500 Zen mode: hide internal canvas controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-zen-mode .bpmnkit-zoom-controls,\n.bpmnkit-zen-mode .bpmnkit-main-menu-panel {\n  display: none !important;\n}\n";
+export declare const COMMAND_PALETTE_CSS = "\n/* \u2500\u2500 Overlay backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n  backdrop-filter: blur(3px);\n  z-index: 9999;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 15vh;\n  font-family: system-ui, -apple-system, sans-serif;\n}\n\n/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-panel {\n  width: min(560px, calc(100vw - 32px));\n  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n  border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \u2500\u2500 Search row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-search {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 0 16px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n}\n.bpmnkit-palette-search-icon {\n  display: flex;\n  align-items: center;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  color: rgba(255, 255, 255, 0.35);\n  pointer-events: none;\n}\n.bpmnkit-palette-search-icon svg { width: 16px; height: 16px; }\n.bpmnkit-palette-input {\n  flex: 1;\n  height: 48px;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: rgba(255, 255, 255, 0.9);\n  font-size: 14px;\n  caret-color: var(--bpmnkit-accent, #6b9df7);\n}\n.bpmnkit-palette-input::placeholder { color: rgba(255, 255, 255, 0.3); }\n\n/* \u2500\u2500 Keyboard hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-kbd {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n.bpmnkit-palette-kbd kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 5px;\n  background: rgba(255, 255, 255, 0.07);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 4px;\n  font-family: system-ui, sans-serif;\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  line-height: 1;\n}\n\n/* \u2500\u2500 Commands list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-list {\n  max-height: 360px;\n  overflow-y: auto;\n  padding: 4px;\n}\n.bpmnkit-palette-empty {\n  padding: 20px 16px;\n  text-align: center;\n  color: rgba(255, 255, 255, 0.3);\n  font-size: 13px;\n}\n.bpmnkit-palette-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  border-radius: 7px;\n  cursor: pointer;\n  color: rgba(255, 255, 255, 0.75);\n  font-size: 13px;\n  user-select: none;\n}\n.bpmnkit-palette-item:hover,\n.bpmnkit-palette-item.bpmnkit-palette-focused {\n  background: rgba(255, 255, 255, 0.08);\n  color: rgba(255, 255, 255, 0.95);\n}\n.bpmnkit-palette-item-title { flex: 1; }\n.bpmnkit-palette-item-desc {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.35);\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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette--light .bpmnkit-palette-panel {\n  background: rgba(250, 250, 252, 0.98);\n  border-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n}\n.bpmnkit-palette--light .bpmnkit-palette-search {\n  border-bottom-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n}\n.bpmnkit-palette--light .bpmnkit-palette-search-icon { color: rgba(0, 0, 0, 0.35); }\n.bpmnkit-palette--light .bpmnkit-palette-input { color: rgba(0, 0, 0, 0.9); caret-color: var(--bpmnkit-accent, #1a56db); }\n.bpmnkit-palette--light .bpmnkit-palette-input::placeholder { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-kbd kbd {\n  background: rgba(0, 0, 0, 0.05);\n  border-color: rgba(0, 0, 0, 0.12);\n  color: rgba(0, 0, 0, 0.4);\n}\n.bpmnkit-palette--light .bpmnkit-palette-empty { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-item { color: rgba(0, 0, 0, 0.75); }\n.bpmnkit-palette--light .bpmnkit-palette-item:hover,\n.bpmnkit-palette--light .bpmnkit-palette-item.bpmnkit-palette-focused {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.95);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item-desc { color: rgba(0, 0, 0, 0.4); }\n\n/* \u2500\u2500 Section labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-section {\n  padding: 6px 12px 3px;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: rgba(255, 255, 255, 0.28);\n  user-select: none;\n}\n\n/* \u2500\u2500 Item leading icon (doc / ai) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-item-icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  opacity: 0.55;\n}\n.bpmnkit-palette-item-icon svg { width: 14px; height: 14px; }\n\n/* \u2500\u2500 Doc items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-item--doc .bpmnkit-palette-item-title {\n  color: var(--bpmnkit-accent-bright, #89b4fa);\n}\n.bpmnkit-palette-item--doc:hover .bpmnkit-palette-item-icon,\n.bpmnkit-palette-item--doc.bpmnkit-palette-focused .bpmnkit-palette-item-icon {\n  opacity: 0.85;\n}\n\n/* \u2500\u2500 AI item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-item--ai .bpmnkit-palette-item-icon {\n  color: var(--bpmnkit-accent, #6b9df7);\n  opacity: 0.8;\n}\n.bpmnkit-palette-item--ai .bpmnkit-palette-item-title {\n  color: var(--bpmnkit-accent, #6b9df7);\n  font-style: italic;\n}\n.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled):hover .bpmnkit-palette-item-icon,\n.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled).bpmnkit-palette-focused .bpmnkit-palette-item-icon {\n  opacity: 1;\n}\n\n/* \u2500\u2500 Disabled items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette-item--disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.bpmnkit-palette-item--disabled:hover,\n.bpmnkit-palette-item--disabled.bpmnkit-palette-focused {\n  background: rgba(255, 255, 255, 0.04);\n}\n\n/* \u2500\u2500 Light overrides for new additions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-palette--light .bpmnkit-palette-section { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-item--doc .bpmnkit-palette-item-title {\n  color: var(--bpmnkit-accent-bright, #3b82f6);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-icon,\n.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-title {\n  color: var(--bpmnkit-accent, #1a56db);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item--disabled:hover,\n.bpmnkit-palette--light .bpmnkit-palette-item--disabled.bpmnkit-palette-focused {\n  background: rgba(0, 0, 0, 0.03);\n}\n\n/* \u2500\u2500 Zen mode: hide internal canvas controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-zen-mode .bpmnkit-zoom-controls,\n.bpmnkit-zen-mode .bpmnkit-main-menu-panel {\n  display: none !important;\n}\n";
 export declare function injectCommandPaletteStyles(): void;
 //# sourceMappingURL=css.d.ts.map

package/dist/command-palette/css.js

@@ -138,6 +138,75 @@ export const COMMAND_PALETTE_CSS = `
 }
 .bpmnkit-palette--light .bpmnkit-palette-item-desc { color: rgba(0, 0, 0, 0.4); }
 
+/* ── Section labels ───────────────────────────────────────────────────────── */
+.bpmnkit-palette-section {
+  padding: 6px 12px 3px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.28);
+  user-select: none;
+}
+
+/* ── Item leading icon (doc / ai) ─────────────────────────────────────────── */
+.bpmnkit-palette-item-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  opacity: 0.55;
+}
+.bpmnkit-palette-item-icon svg { width: 14px; height: 14px; }
+
+/* ── Doc items ────────────────────────────────────────────────────────────── */
+.bpmnkit-palette-item--doc .bpmnkit-palette-item-title {
+  color: var(--bpmnkit-accent-bright, #89b4fa);
+}
+.bpmnkit-palette-item--doc:hover .bpmnkit-palette-item-icon,
+.bpmnkit-palette-item--doc.bpmnkit-palette-focused .bpmnkit-palette-item-icon {
+  opacity: 0.85;
+}
+
+/* ── AI item ──────────────────────────────────────────────────────────────── */
+.bpmnkit-palette-item--ai .bpmnkit-palette-item-icon {
+  color: var(--bpmnkit-accent, #6b9df7);
+  opacity: 0.8;
+}
+.bpmnkit-palette-item--ai .bpmnkit-palette-item-title {
+  color: var(--bpmnkit-accent, #6b9df7);
+  font-style: italic;
+}
+.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled):hover .bpmnkit-palette-item-icon,
+.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled).bpmnkit-palette-focused .bpmnkit-palette-item-icon {
+  opacity: 1;
+}
+
+/* ── Disabled items ───────────────────────────────────────────────────────── */
+.bpmnkit-palette-item--disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.bpmnkit-palette-item--disabled:hover,
+.bpmnkit-palette-item--disabled.bpmnkit-palette-focused {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+/* ── Light overrides for new additions ───────────────────────────────────── */
+.bpmnkit-palette--light .bpmnkit-palette-section { color: rgba(0, 0, 0, 0.3); }
+.bpmnkit-palette--light .bpmnkit-palette-item--doc .bpmnkit-palette-item-title {
+  color: var(--bpmnkit-accent-bright, #3b82f6);
+}
+.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-icon,
+.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-title {
+  color: var(--bpmnkit-accent, #1a56db);
+}
+.bpmnkit-palette--light .bpmnkit-palette-item--disabled:hover,
+.bpmnkit-palette--light .bpmnkit-palette-item--disabled.bpmnkit-palette-focused {
+  background: rgba(0, 0, 0, 0.03);
+}
+
 /* ── Zen mode: hide internal canvas controls ──────────────────────────────── */
 .bpmnkit-zen-mode .bpmnkit-zoom-controls,
 .bpmnkit-zen-mode .bpmnkit-main-menu-panel {

package/dist/command-palette/index.d.ts

@@ -12,6 +12,7 @@
  *       (el) => { (el as HTMLElement).style.display = active ? "none" : ""; }
  *     );
  *   },
+ *   onAskAI: (query) => aiBridgePlugin.ask(query),
  * });
  *
  * const editor = new BpmnEditor({ container, xml, plugins: [palette] });
@@ -37,6 +38,21 @@ export interface CommandPaletteOptions {
     onZenModeChange?: (active: boolean) => void;
     /** Filename for exported BPMN XML downloads. Defaults to `"diagram.bpmn"`. */
     exportFilename?: string;
+    /**
+     * Called when the user submits a free-text AI query from the palette.
+     * If not provided, the "Ask AI" item is hidden.
+     */
+    onAskAI?: (query: string) => void;
+    /**
+     * URL of the proxy / AI server used to check whether the AI feature is
+     * available. Defaults to `http://localhost:3033`.
+     */
+    aiServerUrl?: string;
+    /**
+     * Base URL for documentation links.
+     * Defaults to `https://docs.bpmnkit.com`.
+     */
+    docsBaseUrl?: string;
 }
 /**
  * The command palette plugin extends `CanvasPlugin` with an `addCommands`
@@ -48,6 +64,19 @@ export interface CommandPalettePlugin extends CanvasPlugin {
      * Returns a function that, when called, deregisters those commands.
      */
     addCommands(cmds: Command[]): () => void;
+    /**
+     * Pushes a new view onto the palette's navigation stack.
+     * Pressing Escape pops back to the previous view (or closes if at root).
+     * Calling this while the palette is closed is a no-op.
+     *
+     * When `onConfirm` is provided the view acts as a free-text input step:
+     * the item list is empty and pressing Enter calls `onConfirm(inputValue)`
+     * then closes the palette.
+     */
+    pushView(cmds: Command[], opts?: {
+        placeholder?: string;
+        onConfirm?: (value: string) => void;
+    }): void;
 }
 export declare function createCommandPalettePlugin(options?: CommandPaletteOptions): CommandPalettePlugin;
 //# sourceMappingURL=index.d.ts.map