@bpmnkit/plugins 0.0.8

package/dist/ascii-view/css.d.ts

@@ -0,0 +1,4 @@
+export declare const ASCII_VIEW_STYLE_ID = "bpmnkit-ascii-view-styles-v1";
+export declare const ASCII_VIEW_CSS = "\n.bpmnkit-ascii-overlay {\n  position: fixed; inset: 0; z-index: 200;\n  background: rgba(0,0,0,0.6);\n  display: flex; align-items: center; justify-content: center;\n}\n.bpmnkit-ascii-panel {\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: 10px;\n  width: 80vw; max-width: 900px; max-height: 80vh;\n  display: flex; flex-direction: column;\n  font-family: system-ui, sans-serif;\n  box-shadow: 0 16px 48px rgba(0,0,0,0.7);\n  overflow: hidden;\n}\n.bpmnkit-ascii-header {\n  padding: 14px 18px;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  display: flex; align-items: center; justify-content: space-between;\n  flex-shrink: 0;\n}\n.bpmnkit-ascii-title {\n  font-size: 14px; font-weight: 600;\n  color: rgba(255,255,255,0.9);\n  margin: 0;\n}\n.bpmnkit-ascii-actions { display: flex; gap: 8px; align-items: center; }\n.bpmnkit-ascii-btn {\n  font-size: 12px; padding: 4px 12px; border-radius: 5px;\n  cursor: pointer; font-weight: 500;\n  border: 1px solid rgba(255,255,255,0.12);\n  background: rgba(255,255,255,0.06);\n  color: rgba(255,255,255,0.8);\n}\n.bpmnkit-ascii-btn:hover { background: rgba(255,255,255,0.1); }\n.bpmnkit-ascii-btn-copied {\n  background: rgba(40,180,80,0.25) !important;\n  border-color: rgba(40,180,80,0.5) !important;\n  color: #8f8 !important;\n}\n.bpmnkit-ascii-body {\n  flex: 1; overflow: auto; padding: 16px 18px;\n  background: rgba(0,0,0,0.2);\n}\n.bpmnkit-ascii-pre {\n  margin: 0;\n  font-family: \"Fira Code\", \"Cascadia Code\", Consolas, Monaco, monospace;\n  font-size: 13px; line-height: 1.45;\n  color: #b0c4de;\n  white-space: pre;\n}\n/* Light theme */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-ascii-panel {\n  background: rgba(252,252,254,0.98);\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}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-ascii-header {\n  border-bottom-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-ascii-title { color: rgba(0,0,0,0.88); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-ascii-btn {\n  border-color: rgba(0,0,0,0.12);\n  background: rgba(0,0,0,0.04);\n  color: rgba(0,0,0,0.7);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-ascii-btn:hover { background: rgba(0,0,0,0.08); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-ascii-body { background: rgba(0,0,0,0.03); }\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-ascii-pre { color: #1a3050; }\n";
+export declare function injectAsciiViewStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/ascii-view/css.js

@@ -0,0 +1,83 @@
+export const ASCII_VIEW_STYLE_ID = "bpmnkit-ascii-view-styles-v1";
+export const ASCII_VIEW_CSS = `
+.bpmnkit-ascii-overlay {
+  position: fixed; inset: 0; z-index: 200;
+  background: rgba(0,0,0,0.6);
+  display: flex; align-items: center; justify-content: center;
+}
+.bpmnkit-ascii-panel {
+  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));
+  border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));
+  border-radius: 10px;
+  width: 80vw; max-width: 900px; max-height: 80vh;
+  display: flex; flex-direction: column;
+  font-family: system-ui, sans-serif;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
+  overflow: hidden;
+}
+.bpmnkit-ascii-header {
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  display: flex; align-items: center; justify-content: space-between;
+  flex-shrink: 0;
+}
+.bpmnkit-ascii-title {
+  font-size: 14px; font-weight: 600;
+  color: rgba(255,255,255,0.9);
+  margin: 0;
+}
+.bpmnkit-ascii-actions { display: flex; gap: 8px; align-items: center; }
+.bpmnkit-ascii-btn {
+  font-size: 12px; padding: 4px 12px; border-radius: 5px;
+  cursor: pointer; font-weight: 500;
+  border: 1px solid rgba(255,255,255,0.12);
+  background: rgba(255,255,255,0.06);
+  color: rgba(255,255,255,0.8);
+}
+.bpmnkit-ascii-btn:hover { background: rgba(255,255,255,0.1); }
+.bpmnkit-ascii-btn-copied {
+  background: rgba(40,180,80,0.25) !important;
+  border-color: rgba(40,180,80,0.5) !important;
+  color: #8f8 !important;
+}
+.bpmnkit-ascii-body {
+  flex: 1; overflow: auto; padding: 16px 18px;
+  background: rgba(0,0,0,0.2);
+}
+.bpmnkit-ascii-pre {
+  margin: 0;
+  font-family: "Fira Code", "Cascadia Code", Consolas, Monaco, monospace;
+  font-size: 13px; line-height: 1.45;
+  color: #b0c4de;
+  white-space: pre;
+}
+/* Light theme */
+[data-bpmnkit-hud-theme="light"] .bpmnkit-ascii-panel {
+  background: rgba(252,252,254,0.98);
+  border-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
+  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-ascii-header {
+  border-bottom-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08));
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-ascii-title { color: rgba(0,0,0,0.88); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-ascii-btn {
+  border-color: rgba(0,0,0,0.12);
+  background: rgba(0,0,0,0.04);
+  color: rgba(0,0,0,0.7);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-ascii-btn:hover { background: rgba(0,0,0,0.08); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-ascii-body { background: rgba(0,0,0,0.03); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-ascii-pre { color: #1a3050; }
+`;
+export function injectAsciiViewStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(ASCII_VIEW_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = ASCII_VIEW_STYLE_ID;
+    style.textContent = ASCII_VIEW_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/ascii-view/index.d.ts

@@ -0,0 +1,25 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export { ASCII_VIEW_CSS, ASCII_VIEW_STYLE_ID, injectAsciiViewStyles } from "./css.js";
+export interface AsciiViewPluginOptions {
+    /** Returns the current BPMN XML string, or null if no diagram is loaded. */
+    getXml: () => string | null;
+}
+/**
+ * Creates an ASCII view plugin that provides a button for viewing the current
+ * BPMN diagram rendered as a Unicode box-drawing ASCII diagram.
+ *
+ * The returned `button` should be passed to `initEditorHud` as `asciiButton`.
+ *
+ * @example
+ * ```typescript
+ * const asciiViewPlugin = createAsciiViewPlugin({
+ *   getXml: () => editorRef?.getXml() ?? null,
+ * });
+ * // ...
+ * initEditorHud(editor, { asciiButton: asciiViewPlugin.button });
+ * ```
+ */
+export declare function createAsciiViewPlugin(options: AsciiViewPluginOptions): CanvasPlugin & {
+    button: HTMLButtonElement;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/ascii-view/index.js

@@ -0,0 +1,92 @@
+import { renderBpmnAscii } from "@bpmnkit/ascii";
+import { injectAsciiViewStyles } from "./css.js";
+export { ASCII_VIEW_CSS, ASCII_VIEW_STYLE_ID, injectAsciiViewStyles } from "./css.js";
+const ASCII_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="14" height="10" rx="1.5"/><path d="M4 7l1.5 2L4 11"/><path d="M8.5 11h3.5"/></svg>`;
+function showAsciiDialog(xml) {
+    const ascii = renderBpmnAscii(xml, { title: false });
+    const overlay = document.createElement("div");
+    overlay.className = "bpmnkit-ascii-overlay";
+    overlay.addEventListener("click", (e) => {
+        if (e.target === overlay)
+            overlay.remove();
+    });
+    const panel = document.createElement("div");
+    panel.className = "bpmnkit-ascii-panel";
+    const header = document.createElement("div");
+    header.className = "bpmnkit-ascii-header";
+    const title = document.createElement("div");
+    title.className = "bpmnkit-ascii-title";
+    title.textContent = "ASCII Diagram";
+    const actions = document.createElement("div");
+    actions.className = "bpmnkit-ascii-actions";
+    const copyBtn = document.createElement("button");
+    copyBtn.className = "bpmnkit-ascii-btn";
+    copyBtn.textContent = "Copy";
+    copyBtn.addEventListener("click", () => {
+        void navigator.clipboard.writeText(ascii).then(() => {
+            copyBtn.textContent = "Copied!";
+            copyBtn.classList.add("bpmnkit-ascii-btn-copied");
+            setTimeout(() => {
+                copyBtn.textContent = "Copy";
+                copyBtn.classList.remove("bpmnkit-ascii-btn-copied");
+            }, 1500);
+        });
+    });
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "bpmnkit-ascii-btn";
+    closeBtn.textContent = "Close";
+    closeBtn.addEventListener("click", () => overlay.remove());
+    actions.append(copyBtn, closeBtn);
+    header.append(title, actions);
+    const body = document.createElement("div");
+    body.className = "bpmnkit-ascii-body";
+    const pre = document.createElement("pre");
+    pre.className = "bpmnkit-ascii-pre";
+    pre.textContent = ascii;
+    body.append(pre);
+    panel.append(header, body);
+    overlay.append(panel);
+    document.body.append(overlay);
+    // Close on Escape
+    const onKey = (e) => {
+        if (e.key === "Escape") {
+            overlay.remove();
+            document.removeEventListener("keydown", onKey);
+        }
+    };
+    document.addEventListener("keydown", onKey);
+    overlay.addEventListener("remove", () => document.removeEventListener("keydown", onKey));
+}
+/**
+ * Creates an ASCII view plugin that provides a button for viewing the current
+ * BPMN diagram rendered as a Unicode box-drawing ASCII diagram.
+ *
+ * The returned `button` should be passed to `initEditorHud` as `asciiButton`.
+ *
+ * @example
+ * ```typescript
+ * const asciiViewPlugin = createAsciiViewPlugin({
+ *   getXml: () => editorRef?.getXml() ?? null,
+ * });
+ * // ...
+ * initEditorHud(editor, { asciiButton: asciiViewPlugin.button });
+ * ```
+ */
+export function createAsciiViewPlugin(options) {
+    injectAsciiViewStyles();
+    const button = document.createElement("button");
+    button.title = "View as ASCII";
+    button.innerHTML = ASCII_ICON;
+    button.addEventListener("click", () => {
+        const xml = options.getXml();
+        if (!xml)
+            return;
+        showAsciiDialog(xml);
+    });
+    return {
+        name: "ascii-view",
+        install() { },
+        button,
+    };
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 function injectCommandPaletteStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/command-palette/css.js

@@ -0,0 +1,157 @@
+export const COMMAND_PALETTE_STYLE_ID = "bpmnkit-command-palette-styles-v1";
+export const COMMAND_PALETTE_CSS = `
+/* ── Overlay backdrop ─────────────────────────────────────────────────────── */
+.bpmnkit-palette-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(3px);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* ── Panel ────────────────────────────────────────────────────────────────── */
+.bpmnkit-palette-panel {
+  width: min(560px, calc(100vw - 32px));
+  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));
+  border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Search row ───────────────────────────────────────────────────────────── */
+.bpmnkit-palette-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+}
+.bpmnkit-palette-search-icon {
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: rgba(255, 255, 255, 0.35);
+  pointer-events: none;
+}
+.bpmnkit-palette-search-icon svg { width: 16px; height: 16px; }
+.bpmnkit-palette-input {
+  flex: 1;
+  height: 48px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  caret-color: var(--bpmnkit-accent, #6b9df7);
+}
+.bpmnkit-palette-input::placeholder { color: rgba(255, 255, 255, 0.3); }
+
+/* ── Keyboard hint ────────────────────────────────────────────────────────── */
+.bpmnkit-palette-kbd {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+}
+.bpmnkit-palette-kbd kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.07);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  font-family: system-ui, sans-serif;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 1;
+}
+
+/* ── Commands list ────────────────────────────────────────────────────────── */
+.bpmnkit-palette-list {
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.bpmnkit-palette-empty {
+  padding: 20px 16px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 13px;
+}
+.bpmnkit-palette-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 12px;
+  border-radius: 7px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 13px;
+  user-select: none;
+}
+.bpmnkit-palette-item:hover,
+.bpmnkit-palette-item.bpmnkit-palette-focused {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.95);
+}
+.bpmnkit-palette-item-title { flex: 1; }
+.bpmnkit-palette-item-desc {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+/* ── Light theme overrides ────────────────────────────────────────────────── */
+.bpmnkit-palette--light .bpmnkit-palette-panel {
+  background: rgba(250, 250, 252, 0.98);
+  border-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
+}
+.bpmnkit-palette--light .bpmnkit-palette-search {
+  border-bottom-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));
+}
+.bpmnkit-palette--light .bpmnkit-palette-search-icon { color: rgba(0, 0, 0, 0.35); }
+.bpmnkit-palette--light .bpmnkit-palette-input { color: rgba(0, 0, 0, 0.9); caret-color: var(--bpmnkit-accent, #1a56db); }
+.bpmnkit-palette--light .bpmnkit-palette-input::placeholder { color: rgba(0, 0, 0, 0.3); }
+.bpmnkit-palette--light .bpmnkit-palette-kbd kbd {
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.4);
+}
+.bpmnkit-palette--light .bpmnkit-palette-empty { color: rgba(0, 0, 0, 0.3); }
+.bpmnkit-palette--light .bpmnkit-palette-item { color: rgba(0, 0, 0, 0.75); }
+.bpmnkit-palette--light .bpmnkit-palette-item:hover,
+.bpmnkit-palette--light .bpmnkit-palette-item.bpmnkit-palette-focused {
+  background: rgba(0, 0, 0, 0.06);
+  color: rgba(0, 0, 0, 0.95);
+}
+.bpmnkit-palette--light .bpmnkit-palette-item-desc { color: rgba(0, 0, 0, 0.4); }
+
+/* ── Zen mode: hide internal canvas controls ──────────────────────────────── */
+.bpmnkit-zen-mode .bpmnkit-zoom-controls,
+.bpmnkit-zen-mode .bpmnkit-main-menu-panel {
+  display: none !important;
+}
+`;
+export function injectCommandPaletteStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(COMMAND_PALETTE_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = COMMAND_PALETTE_STYLE_ID;
+    style.textContent = COMMAND_PALETTE_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

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

@@ -0,0 +1,53 @@
+/**
+ * @bpmnkit/canvas-plugin-command-palette — Ctrl+K / ⌘K command palette for
+ * `@bpmnkit/canvas` and `@bpmnkit/editor`.
+ *
+ * ## Usage
+ * ```typescript
+ * import { createCommandPalettePlugin } from "@bpmnkit/canvas-plugin-command-palette";
+ *
+ * const palette = createCommandPalettePlugin({
+ *   onZenModeChange: (active) => {
+ *     document.querySelectorAll(".hud").forEach(
+ *       (el) => { (el as HTMLElement).style.display = active ? "none" : ""; }
+ *     );
+ *   },
+ * });
+ *
+ * const editor = new BpmnEditor({ container, xml, plugins: [palette] });
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export { COMMAND_PALETTE_CSS, COMMAND_PALETTE_STYLE_ID, injectCommandPaletteStyles, } from "./css.js";
+export interface Command {
+    id: string;
+    title: string;
+    /** Short hint shown on the right side of the item. */
+    description?: string;
+    action: () => void;
+}
+export interface CommandPaletteOptions {
+    /**
+     * Called when zen mode is toggled.
+     * Use this to hide/show external toolbars that live outside the canvas
+     * container (e.g. HUD elements in the landing page).
+     */
+    onZenModeChange?: (active: boolean) => void;
+    /** Filename for exported BPMN XML downloads. Defaults to `"diagram.bpmn"`. */
+    exportFilename?: string;
+}
+/**
+ * The command palette plugin extends `CanvasPlugin` with an `addCommands`
+ * method so other plugins (e.g. the editor extension) can register commands.
+ */
+export interface CommandPalettePlugin extends CanvasPlugin {
+    /**
+     * Registers additional commands in the palette.
+     * Returns a function that, when called, deregisters those commands.
+     */
+    addCommands(cmds: Command[]): () => void;
+}
+export declare function createCommandPalettePlugin(options?: CommandPaletteOptions): CommandPalettePlugin;
+//# sourceMappingURL=index.d.ts.map