@bpmnkit/plugins 0.0.11 → 0.0.13

package/dist/command-palette-editor/index.js

@@ -1,6 +1,9 @@
 /**
  * @bpmnkit/canvas-plugin-command-palette-editor — editor extension for the
- * command palette plugin. Adds one command per BPMN element type.
+ * command palette plugin. Adds one command per BPMN element type. When
+ * executed, shows a second-step picker listing candidate source nodes to
+ * connect after. Falls back to `setTool` (free-click placement) when the
+ * diagram is empty.
  *
  * Must be used together with `@bpmnkit/canvas-plugin-command-palette`.
  *
@@ -11,9 +14,7 @@
  *
  * let editorRef: BpmnEditor | null = null;
  * const palette = createCommandPalettePlugin({ ... });
- * const paletteEditor = createCommandPaletteEditorPlugin(palette, (tool) => {
- *   editorRef?.setTool(tool);
- * });
+ * const paletteEditor = createCommandPaletteEditorPlugin(palette, () => editorRef);
  * const editor = new BpmnEditor({ container, xml, plugins: [palette, paletteEditor] });
  * editorRef = editor;
  * ```
@@ -27,33 +28,116 @@ const ELEMENT_COMMANDS = ELEMENT_GROUPS.flatMap((group) => group.types.map((type
     title: `Add ${ELEMENT_TYPE_LABELS[type]}`,
     description: group.title,
 })));
+// BPMN element types that cannot have outgoing sequence flows
+const NO_OUTGOING_TYPES = new Set([
+    "endEvent",
+    "messageEndEvent",
+    "escalationEndEvent",
+    "errorEndEvent",
+    "compensationEndEvent",
+    "signalEndEvent",
+    "terminateEndEvent",
+    "textAnnotation",
+]);
+// Only gateways may have more than one outgoing sequence flow.
+// Every other connectable element is limited to one outgoing flow.
+const MULTI_OUTGOING_TYPES = new Set([
+    "exclusiveGateway",
+    "parallelGateway",
+    "inclusiveGateway",
+    "eventBasedGateway",
+    "complexGateway",
+]);
+// ── Candidate helpers ─────────────────────────────────────────────────────────
+function getCandidates(api) {
+    return api
+        .getShapes()
+        .filter((s) => {
+        const el = s.flowElement;
+        if (el == null)
+            return false;
+        if (NO_OUTGOING_TYPES.has(el.type))
+            return false;
+        // Non-gateway elements can only have one outgoing flow
+        if (!MULTI_OUTGOING_TYPES.has(el.type) && el.outgoing.length >= 1)
+            return false;
+        return true;
+    })
+        .sort((a, b) => {
+        // Prefer leaf nodes (no outgoing) — most natural append targets
+        const aOut = a.flowElement?.outgoing.length ?? 0;
+        const bOut = b.flowElement?.outgoing.length ?? 0;
+        return aOut - bOut;
+    });
+}
+function candidateLabel(s) {
+    const el = s.flowElement;
+    if (!el)
+        return s.id;
+    const typeLabel = ELEMENT_TYPE_LABELS[el.type] ?? el.type;
+    return el.name ? el.name : typeLabel;
+}
+function candidateDescription(s) {
+    const el = s.flowElement;
+    if (!el)
+        return undefined;
+    const typeLabel = ELEMENT_TYPE_LABELS[el.type] ?? el.type;
+    const out = el.outgoing.length;
+    if (el.name) {
+        return out > 0 ? `${typeLabel} · ${out} outgoing` : typeLabel;
+    }
+    return out > 0 ? `${out} outgoing` : undefined;
+}
 // ── Factory ───────────────────────────────────────────────────────────────────
 /**
  * Creates the editor command palette extension plugin.
  *
- * @param palette - The base command palette plugin returned by
- *   `createCommandPalettePlugin`. Commands are registered into it.
- * @param setTool - Callback that activates an element creation tool on the
- *   editor (e.g. `editor.setTool`). May reference the editor lazily — it is
- *   only called when the user executes a command, well after construction.
+ * @param palette  The base command palette plugin.
+ * @param getEditor  Lazy getter returning the editor instance (or null before
+ *   it is created). Called only when the user executes a command.
  */
-export function createCommandPaletteEditorPlugin(palette, setTool) {
+export function createCommandPaletteEditorPlugin(palette, getEditor) {
+    let _api = null;
     let _deregister = null;
     return {
         name: "command-palette-editor",
-        install(_api) {
+        install(api) {
+            _api = api;
             _deregister = palette.addCommands(ELEMENT_COMMANDS.map((cmd) => ({
                 id: `create:${cmd.type}`,
                 title: cmd.title,
                 description: cmd.description,
                 action() {
-                    setTool(`create:${cmd.type}`);
+                    const candidates = _api ? getCandidates(_api) : [];
+                    if (candidates.length === 0) {
+                        // Empty diagram — fall back to tool mode so the user can
+                        // click anywhere to place the element.
+                        getEditor()?.setTool(`create:${cmd.type}`);
+                        return;
+                    }
+                    // Step 2: pick a connection target.
+                    palette.pushView(candidates.map((s) => ({
+                        id: `connect:${s.id}:${cmd.type}`,
+                        title: candidateLabel(s),
+                        description: candidateDescription(s),
+                        action() {
+                            // Step 3: enter a label, then insert.
+                            const typeLabel = ELEMENT_TYPE_LABELS[cmd.type] ?? cmd.type;
+                            palette.pushView([], {
+                                placeholder: `Label for new ${typeLabel} (optional)\u2026`,
+                                onConfirm(label) {
+                                    getEditor()?.addConnectedElement(s.id, cmd.type, label.trim() || undefined);
+                                },
+                            });
+                        },
+                    })), { placeholder: "Connect after which element?" });
                 },
             })));
         },
         uninstall() {
             _deregister?.();
             _deregister = null;
+            _api = null;
         },
     };
 }

package/dist/main-menu/css.d.ts

@@ -1,4 +1,4 @@
 export declare const MAIN_MENU_STYLE_ID = "bpmnkit-main-menu-styles-v2";
-export declare const MAIN_MENU_CSS = "\n.bpmnkit-main-menu-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  padding: 0 6px;\n  background: #f0f4f8;\n  border: none;\n  border-left: 1px solid #d0d0d0;\n  border-radius: 0;\n  box-shadow: none;\n  z-index: 10000;\n}\n[data-theme=\"dark\"] .bpmnkit-main-menu-panel {\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border-left-color: #313244;\n}\n.bpmnkit-canvas-host:has(.bpmnkit-main-menu-panel:not([style*=\"none\"])) .bpmnkit-tabs {\n  padding-right: 160px;\n}\n.bpmnkit-main-menu-title {\n  padding: 0 6px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  color: var(--bpmnkit-text, #333333);\n  white-space: nowrap;\n  user-select: none;\n  opacity: 0.75;\n}\n.bpmnkit-main-menu-sep {\n  width: 1px;\n  height: 16px;\n  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  flex-shrink: 0;\n}\n.bpmnkit-menu-btn {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-btn:hover {\n  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n}\n.bpmnkit-menu-btn svg {\n  width: 16px;\n  height: 16px;\n  pointer-events: none;\n}\n.bpmnkit-menu-dropdown {\n  position: fixed;\n  display: none;\n  flex-direction: column;\n  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.96));\n  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  z-index: 10001;\n  min-width: 220px;\n  overflow: hidden;\n}\n.bpmnkit-menu-dropdown.open { display: flex; }\n.bpmnkit-menu-level {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 4px;\n  position: relative;\n  z-index: 1;\n}\n@keyframes bpmnkit-menu-in-right {\n  from { opacity: 0; transform: translateX(20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes bpmnkit-menu-in-left {\n  from { opacity: 0; transform: translateX(-20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes bpmnkit-menu-out-left {\n  from { opacity: 1; transform: translateX(0); }\n  to   { opacity: 0; transform: translateX(-20px); }\n}\n@keyframes bpmnkit-menu-out-right {\n  from { opacity: 1; transform: translateX(0); }\n  to   { opacity: 0; transform: translateX(20px); }\n}\n.bpmnkit-menu-level--in-right  { animation: bpmnkit-menu-in-right  180ms ease-out forwards; }\n.bpmnkit-menu-level--in-left   { animation: bpmnkit-menu-in-left   180ms ease-out forwards; }\n.bpmnkit-menu-level--out-left  { animation: bpmnkit-menu-out-left  150ms ease-in  forwards; }\n.bpmnkit-menu-level--out-right { animation: bpmnkit-menu-out-right 150ms ease-in  forwards; }\n.bpmnkit-menu-drop-label {\n  padding: 3px 8px 1px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--bpmnkit-text, #333333);\n  opacity: 0.45;\n}\n.bpmnkit-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  border-radius: 5px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  font-family: system-ui, sans-serif;\n  font-size: 12px;\n  text-align: left;\n  width: 100%;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-item:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-item-check {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  color: var(--bpmnkit-highlight, var(--bpmnkit-accent, #1a56db));\n}\n.bpmnkit-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  opacity: 0.65;\n}\n.bpmnkit-menu-item-label {\n  flex: 1;\n}\n.bpmnkit-menu-item-arrow {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  opacity: 0.45;\n}\n.bpmnkit-menu-item-icon svg,\n.bpmnkit-menu-item-check svg,\n.bpmnkit-menu-item-arrow svg {\n  width: 100%;\n  height: 100%;\n}\n.bpmnkit-menu-back-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 4px;\n}\n.bpmnkit-menu-back-btn {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-back-btn:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-back-btn svg {\n  width: 12px;\n  height: 12px;\n  pointer-events: none;\n}\n.bpmnkit-menu-level-title {\n  font-size: 12px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  color: var(--bpmnkit-text, #333333);\n  flex: 1;\n}\n.bpmnkit-menu-info-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 8px;\n  font-family: system-ui, sans-serif;\n  font-size: 12px;\n  color: var(--bpmnkit-text, #333333);\n  opacity: 0.75;\n}\n.bpmnkit-menu-info-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bpmnkit-menu-info-action {\n  flex-shrink: 0;\n  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  border-radius: 4px;\n  background: transparent;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 2px 7px;\n  font-size: 11px;\n  font-family: system-ui, sans-serif;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-info-action:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-drop-sep {\n  height: 1px;\n  background: var(--bpmnkit-overlay-border, rgba(0,0,0,0.1));\n  margin: 3px 4px;\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-dropdown {\n  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n  border-color: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-back-btn,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-level-title,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-row,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-drop-label {\n  color: rgba(205, 214, 244, 0.9);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item:hover,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-back-btn:hover,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action {\n  border-color: rgba(255, 255, 255, 0.15);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-drop-sep {\n  background: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item-check {\n  color: var(--bpmnkit-accent-bright, #89b4fa);\n}\n";
+export declare const MAIN_MENU_CSS = "\n.bpmnkit-main-menu-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  padding: 0 6px;\n  background: #f0f4f8;\n  border: none;\n  border-left: 1px solid #d0d0d0;\n  border-radius: 0;\n  box-shadow: none;\n  z-index: 10000;\n}\n[data-theme=\"dark\"] .bpmnkit-main-menu-panel {\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border-left-color: #313244;\n}\n[data-theme=\"neon\"] .bpmnkit-main-menu-panel {\n  background: oklch(7% 0.035 280);\n  border-left-color: oklch(65% 0.28 280 / 0.2);\n}\n.bpmnkit-canvas-host:has(.bpmnkit-main-menu-panel:not([style*=\"none\"])) .bpmnkit-tabs {\n  padding-right: 160px;\n}\n.bpmnkit-main-menu-title {\n  padding: 0 6px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  color: var(--bpmnkit-text, #333333);\n  white-space: nowrap;\n  user-select: none;\n  opacity: 0.75;\n}\n.bpmnkit-main-menu-sep {\n  width: 1px;\n  height: 16px;\n  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  flex-shrink: 0;\n}\n.bpmnkit-menu-btn {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-btn:hover {\n  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n}\n.bpmnkit-menu-btn svg {\n  width: 16px;\n  height: 16px;\n  pointer-events: none;\n}\n.bpmnkit-menu-dropdown {\n  position: fixed;\n  display: none;\n  flex-direction: column;\n  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.96));\n  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  z-index: 10001;\n  min-width: 220px;\n  overflow: hidden;\n}\n.bpmnkit-menu-dropdown.open { display: flex; }\n.bpmnkit-menu-level {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 4px;\n  position: relative;\n  z-index: 1;\n}\n@keyframes bpmnkit-menu-in-right {\n  from { opacity: 0; transform: translateX(20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes bpmnkit-menu-in-left {\n  from { opacity: 0; transform: translateX(-20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes bpmnkit-menu-out-left {\n  from { opacity: 1; transform: translateX(0); }\n  to   { opacity: 0; transform: translateX(-20px); }\n}\n@keyframes bpmnkit-menu-out-right {\n  from { opacity: 1; transform: translateX(0); }\n  to   { opacity: 0; transform: translateX(20px); }\n}\n.bpmnkit-menu-level--in-right  { animation: bpmnkit-menu-in-right  180ms ease-out forwards; }\n.bpmnkit-menu-level--in-left   { animation: bpmnkit-menu-in-left   180ms ease-out forwards; }\n.bpmnkit-menu-level--out-left  { animation: bpmnkit-menu-out-left  150ms ease-in  forwards; }\n.bpmnkit-menu-level--out-right { animation: bpmnkit-menu-out-right 150ms ease-in  forwards; }\n.bpmnkit-menu-drop-label {\n  padding: 3px 8px 1px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--bpmnkit-text, #333333);\n  opacity: 0.45;\n}\n.bpmnkit-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  border-radius: 5px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  font-family: system-ui, sans-serif;\n  font-size: 12px;\n  text-align: left;\n  width: 100%;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-item:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-item-check {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  color: var(--bpmnkit-highlight, var(--bpmnkit-accent, #1a56db));\n}\n.bpmnkit-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  opacity: 0.65;\n}\n.bpmnkit-menu-item-label {\n  flex: 1;\n}\n.bpmnkit-menu-item-arrow {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  opacity: 0.45;\n}\n.bpmnkit-menu-item-icon svg,\n.bpmnkit-menu-item-check svg,\n.bpmnkit-menu-item-arrow svg {\n  width: 100%;\n  height: 100%;\n}\n.bpmnkit-menu-back-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 4px;\n}\n.bpmnkit-menu-back-btn {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-back-btn:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-back-btn svg {\n  width: 12px;\n  height: 12px;\n  pointer-events: none;\n}\n.bpmnkit-menu-level-title {\n  font-size: 12px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  color: var(--bpmnkit-text, #333333);\n  flex: 1;\n}\n.bpmnkit-menu-info-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 8px;\n  font-family: system-ui, sans-serif;\n  font-size: 12px;\n  color: var(--bpmnkit-text, #333333);\n  opacity: 0.75;\n}\n.bpmnkit-menu-info-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bpmnkit-menu-info-action {\n  flex-shrink: 0;\n  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  border-radius: 4px;\n  background: transparent;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 2px 7px;\n  font-size: 11px;\n  font-family: system-ui, sans-serif;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-info-action:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-drop-sep {\n  height: 1px;\n  background: var(--bpmnkit-overlay-border, rgba(0,0,0,0.1));\n  margin: 3px 4px;\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-dropdown {\n  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n  border-color: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-back-btn,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-level-title,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-row,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-drop-label {\n  color: rgba(205, 214, 244, 0.9);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item:hover,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-back-btn:hover,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action {\n  border-color: rgba(255, 255, 255, 0.15);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-drop-sep {\n  background: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item-check {\n  color: var(--bpmnkit-accent-bright, #89b4fa);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-dropdown {\n  background: oklch(8% 0.03 270 / 0.96);\n  border-color: oklch(65% 0.28 280 / 0.2);\n  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(65% 0.28 280 / 0.1);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-item,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-back-btn,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-level-title,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-info-row,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-info-action,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-drop-label {\n  color: oklch(73% 0.16 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-item:hover,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-back-btn:hover,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-info-action:hover {\n  background: oklch(65% 0.28 280 / 0.1);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-info-action {\n  border-color: oklch(65% 0.28 280 / 0.2);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-drop-sep {\n  background: oklch(65% 0.28 280 / 0.15);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-menu-item-check {\n  color: oklch(72% 0.18 185);\n}\n";
 export declare function injectMainMenuStyles(): void;
 //# sourceMappingURL=css.d.ts.map

package/dist/main-menu/css.js

@@ -20,6 +20,10 @@ export const MAIN_MENU_CSS = `
   background: var(--bpmnkit-surface-2, #1e1e2e);
   border-left-color: #313244;
 }
+[data-theme="neon"] .bpmnkit-main-menu-panel {
+  background: oklch(7% 0.035 280);
+  border-left-color: oklch(65% 0.28 280 / 0.2);
+}
 .bpmnkit-canvas-host:has(.bpmnkit-main-menu-panel:not([style*="none"])) .bpmnkit-tabs {
   padding-right: 160px;
 }
@@ -258,6 +262,33 @@ export const MAIN_MENU_CSS = `
 [data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-item-check {
   color: var(--bpmnkit-accent-bright, #89b4fa);
 }
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-dropdown {
+  background: oklch(8% 0.03 270 / 0.96);
+  border-color: oklch(65% 0.28 280 / 0.2);
+  box-shadow: 0 4px 20px oklch(0% 0 0 / 0.6), 0 0 0 1px oklch(65% 0.28 280 / 0.1);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-item,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-back-btn,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-level-title,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-info-row,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-info-action,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-drop-label {
+  color: oklch(73% 0.16 280);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-item:hover,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-back-btn:hover,
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-info-action:hover {
+  background: oklch(65% 0.28 280 / 0.1);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-info-action {
+  border-color: oklch(65% 0.28 280 / 0.2);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-drop-sep {
+  background: oklch(65% 0.28 280 / 0.15);
+}
+[data-bpmnkit-hud-theme="neon"] .bpmnkit-menu-item-check {
+  color: oklch(72% 0.18 185);
+}
 `;
 export function injectMainMenuStyles() {
     if (typeof document === "undefined")

package/dist/main-menu/index.js

@@ -15,12 +15,14 @@ const CHECK_ICON = '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" s
 const MOON_ICON = '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M13 9.5a6 6 0 1 1-7.5-7.5 7 7 0 0 0 7.5 7.5z"/></svg>';
 const SUN_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="2.8"/><line x1="8" y1="1.5" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="14.5"/><line x1="1.5" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="14.5" y2="8"/><line x1="3.3" y1="3.3" x2="4.4" y2="4.4"/><line x1="11.6" y1="11.6" x2="12.7" y2="12.7"/><line x1="3.3" y1="12.7" x2="4.4" y2="11.6"/><line x1="11.6" y1="4.4" x2="12.7" y2="3.3"/></svg>';
 const AUTO_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="5.5"/><path d="M8 8V3.5"/><path d="M8 8l3.2 2"/></svg>';
+const NEON_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,1.5 5.5,8 8.5,8 6.5,14.5 10.5,8 7.5,8 9.5,1.5"/></svg>';
 const BACK_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,8 10,13"/></svg>';
 const ARROW_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>';
 const THEMES = [
     { value: "dark", label: "Dark", icon: MOON_ICON },
     { value: "light", label: "Light", icon: SUN_ICON },
     { value: "auto", label: "System", icon: AUTO_ICON },
+    { value: "neon", label: "Neon", icon: NEON_ICON },
 ];
 /**
  * Creates a main menu plugin instance.

package/dist/storage/index.d.ts

@@ -1,5 +1,5 @@
 import type { CanvasPlugin } from "@bpmnkit/canvas";
-import type { MainMenuApi } from "../main-menu/index.js";
+import type { MainMenuApi, MenuItem } from "../main-menu/index.js";
 import { StorageApi, type StorageApiOptions } from "./storage-api.js";
 import type { FileType } from "./types.js";
 export type { FileType, WorkspaceRecord, ProjectRecord, FileRecord, FileContentRecord, } from "./types.js";
@@ -30,6 +30,12 @@ export interface StoragePluginOptions extends StorageApiOptions {
      * Update the corresponding tab's display name from this callback.
      */
     onRenameCurrentFile?: (fileId: string, name: string) => void;
+    /**
+     * Optional items prepended to the dynamic menu items on every open.
+     * Use this to inject context-sensitive items (e.g. mobile edit actions)
+     * without being overridden by storage change events.
+     */
+    prependItems?: () => MenuItem[];
 }
 /**
  * Creates an IndexedDB-backed storage plugin.

package/dist/storage/index.js

@@ -107,7 +107,7 @@ export function createStoragePlugin(options) {
     }
     function buildDynamicItems() {
         const currentProjectId = storageApi.getCurrentProjectId();
-        const items = [];
+        const items = [...(options.prependItems?.() ?? [])];
         if (currentProjectId) {
             items.push({
                 type: "info",

package/dist/storage-tabs-bridge/index.d.ts

@@ -12,7 +12,7 @@
  */
 import type { CanvasPlugin } from "@bpmnkit/canvas";
 import type { CommandPalettePlugin } from "../command-palette/index.js";
-import type { MainMenuApi } from "../main-menu/index.js";
+import type { MainMenuApi, MenuItem } from "../main-menu/index.js";
 import type { StorageApi } from "../storage/index.js";
 import { InMemoryFileResolver } from "../tabs/index.js";
 import type { TabConfig, TabsApi, WelcomeExample, WelcomeSection } from "../tabs/index.js";
@@ -81,6 +81,11 @@ export interface StorageTabsBridgeOptions {
      * Use this to disable editing UI (toolbar buttons, sidebar) while raw mode is active.
      */
     onRawModeChange?: (active: boolean) => void;
+    /**
+     * Optional items prepended to the dynamic menu items on every menu open.
+     * Composed with storage items so they survive storage change events.
+     */
+    prependItems?: () => MenuItem[];
 }
 export interface StorageTabsBridgeResult {
     tabsPlugin: CanvasPlugin & {

package/dist/storage-tabs-bridge/index.js

@@ -131,6 +131,7 @@ export function createStorageTabsBridge(options) {
         mainMenu: options.mainMenu,
         getOpenTabs: () => tabsPlugin.api.getAllTabContent(),
         initialTitle: options.initialTitle,
+        prependItems: options.prependItems,
         onLeaveProject() {
             tabsPlugin.api.closeAllTabs();
             tabIdToStorageFileId.clear();

package/dist/tabs/css.js

@@ -52,6 +52,22 @@ export const TABS_CSS = `
   --tab-type-form: #a6e3a1;
 }
 
+.bpmnkit-tabs[data-theme="neon"] {
+  --tabs-bg: oklch(7% 0.035 280);
+  --tabs-border: oklch(65% 0.28 280 / 0.2);
+  --tab-fg: oklch(60% 0.12 280);
+  --tab-active-bg: oklch(5% 0.025 270);
+  --tab-active-fg: oklch(88% 0.02 270);
+  --tab-active-border: oklch(72% 0.18 185);
+  --tab-hover-bg: oklch(65% 0.28 280 / 0.08);
+  --tab-close-hover: oklch(65% 0.28 280 / 0.12);
+  --tab-warn-fg: oklch(75% 0.15 60);
+  --tab-type-bpmn: oklch(73% 0.16 280);
+  --tab-type-dmn: oklch(70% 0.18 300);
+  --tab-type-feel: oklch(75% 0.15 60);
+  --tab-type-form: oklch(72% 0.18 185);
+}
+
 /* ── Play mode: hide tab groups, show only center slot ───────────────── */
 
 .bpmnkit-tabs.bpmnkit-play-mode .bpmnkit-tab {
@@ -203,6 +219,18 @@ export const TABS_CSS = `
   --welcome-btn-secondary-border: rgba(255,255,255,0.12);
 }
 
+.bpmnkit-welcome[data-theme="neon"] {
+  --welcome-bg: oklch(5% 0.025 270);
+  --welcome-icon: oklch(72% 0.18 185);
+  --welcome-title: oklch(88% 0.02 270);
+  --welcome-sub: oklch(55% 0.06 280);
+  --welcome-btn-primary-bg: oklch(55% 0.22 280);
+  --welcome-btn-primary-fg: oklch(95% 0.01 270);
+  --welcome-btn-secondary-bg: oklch(65% 0.28 280 / 0.08);
+  --welcome-btn-secondary-fg: oklch(73% 0.16 280);
+  --welcome-btn-secondary-border: oklch(65% 0.28 280 / 0.25);
+}
+
 .bpmnkit-welcome-inner {
   display: flex;
   flex-direction: column;
@@ -431,6 +459,12 @@ export const TABS_CSS = `
   border-top: none;
 }
 
+.bpmnkit-tab-dropdown[data-theme="neon"] {
+  background: oklch(7% 0.035 280);
+  border: 1px solid oklch(65% 0.28 280 / 0.2);
+  border-top: none;
+}
+
 .bpmnkit-tab-drop-item {
   display: flex;
   align-items: center;
@@ -471,6 +505,17 @@ export const TABS_CSS = `
   color: #cdd6f4;
 }
 
+.bpmnkit-tab-dropdown[data-theme="neon"] .bpmnkit-tab-drop-item {
+  color: oklch(60% 0.12 280);
+}
+.bpmnkit-tab-dropdown[data-theme="neon"] .bpmnkit-tab-drop-item:hover {
+  background: oklch(65% 0.28 280 / 0.08);
+}
+.bpmnkit-tab-dropdown[data-theme="neon"] .bpmnkit-tab-drop-item.active {
+  background: oklch(5% 0.025 270);
+  color: oklch(88% 0.02 270);
+}
+
 .bpmnkit-tab-drop-name {
   flex: 1;
   overflow: hidden;
@@ -527,6 +572,20 @@ export const TABS_CSS = `
   --cd-ghost-hover: rgba(255,255,255,0.05);
 }
 
+.bpmnkit-close-dialog[data-theme="neon"] {
+  --cd-bg: oklch(9% 0.025 270);
+  --cd-border: oklch(65% 0.28 280 / 0.2);
+  --cd-title: oklch(88% 0.02 270);
+  --cd-body: oklch(65% 0.1 280);
+  --cd-primary-bg: oklch(55% 0.22 280);
+  --cd-primary-fg: oklch(95% 0.01 270);
+  --cd-secondary-bg: oklch(65% 0.28 280 / 0.08);
+  --cd-secondary-fg: oklch(73% 0.16 280);
+  --cd-secondary-hover: oklch(65% 0.28 280 / 0.14);
+  --cd-ghost-fg: oklch(50% 0.08 280);
+  --cd-ghost-hover: oklch(65% 0.28 280 / 0.06);
+}
+
 .bpmnkit-close-dialog-title {
   font-size: 14px;
   font-weight: 600;
@@ -592,6 +651,7 @@ export const TABS_CSS = `
 }
 
 .bpmnkit-raw-pane[data-theme="light"] { --raw-bg: #f8f9fa; }
+.bpmnkit-raw-pane[data-theme="neon"] { --raw-bg: oklch(5% 0.025 270); }
 
 .bpmnkit-raw-copy-btn {
   position: absolute;
@@ -614,6 +674,12 @@ export const TABS_CSS = `
   border-color: rgba(0,0,0,0.15);
 }
 .bpmnkit-raw-pane[data-theme="light"] .bpmnkit-raw-copy-btn:hover { background: rgba(0,0,0,0.12); }
+.bpmnkit-raw-pane[data-theme="neon"] .bpmnkit-raw-copy-btn {
+  background: oklch(65% 0.28 280 / 0.1);
+  color: oklch(73% 0.16 280);
+  border-color: oklch(65% 0.28 280 / 0.2);
+}
+.bpmnkit-raw-pane[data-theme="neon"] .bpmnkit-raw-copy-btn:hover { background: oklch(65% 0.28 280 / 0.18); }
 
 .bpmnkit-raw-content {
   margin: 0;
@@ -628,6 +694,7 @@ export const TABS_CSS = `
 }
 
 .bpmnkit-raw-pane[data-theme="light"] .bpmnkit-raw-content { --raw-fg: #374151; }
+.bpmnkit-raw-pane[data-theme="neon"] .bpmnkit-raw-content { --raw-fg: oklch(73% 0.16 280); }
 
 `.trim();
 const STYLE_ID = "bpmn-sdk-tabs-css";

package/dist/tabs/tabs-plugin.js

@@ -84,7 +84,7 @@ export function createTabsPlugin(options = {}) {
     const bpmnProcessNames = new Map();
     /** Tracks the last-activated tab ID per type group. */
     const groupActiveId = new Map();
-    /** Which type group's dropdown is currently open, if any. */
+    /** Which type group's dropdown is currently open, if any. "mobile" means the unified mobile dropdown. */
     let openDropdownType = null;
     let outsideClickHandler = null;
     // --- Close-confirmation dialog ---
@@ -449,6 +449,59 @@ export function createTabsPlugin(options = {}) {
             openDropdown(type, group, anchorEl);
         }
     }
+    function openMobileDropdown(anchorEl) {
+        if (!dropdownEl)
+            return;
+        dropdownEl.innerHTML = "";
+        dropdownEl.dataset.theme = theme;
+        for (const type of GROUP_TYPES) {
+            const group = tabs.filter((t) => t.config.type === type);
+            for (const tab of group) {
+                const item = document.createElement("div");
+                item.className = "bpmnkit-tab-drop-item";
+                if (tab.id === activeId)
+                    item.classList.add("active");
+                const badge = document.createElement("span");
+                badge.className = `bpmnkit-tab-type ${type}`;
+                badge.textContent = type.toUpperCase();
+                item.appendChild(badge);
+                const nameSpan = document.createElement("span");
+                nameSpan.className = "bpmnkit-tab-drop-name";
+                nameSpan.textContent = tab.config.name ?? tab.id;
+                item.appendChild(nameSpan);
+                if (!isProjectMode) {
+                    const closeBtn = document.createElement("span");
+                    closeBtn.className = "bpmnkit-tab-close";
+                    closeBtn.textContent = "×";
+                    closeBtn.addEventListener("click", (e) => {
+                        e.stopPropagation();
+                        closeDropdownEl();
+                        requestClose(tab);
+                    });
+                    item.appendChild(closeBtn);
+                }
+                item.addEventListener("click", () => {
+                    groupActiveId.set(type, tab.id);
+                    api.setActiveTab(tab.id);
+                    closeDropdownEl();
+                });
+                dropdownEl.appendChild(item);
+            }
+        }
+        const rect = anchorEl.getBoundingClientRect();
+        dropdownEl.style.top = `${rect.bottom}px`;
+        dropdownEl.style.left = `${rect.left}px`;
+        dropdownEl.classList.add("open");
+        openDropdownType = "mobile";
+    }
+    function toggleMobileDropdown(anchorEl) {
+        if (openDropdownType === "mobile") {
+            closeDropdownEl();
+        }
+        else {
+            openMobileDropdown(anchorEl);
+        }
+    }
     // --- Tab bar rendering ---
     function requestClose(tab) {
         if (isProjectMode)
@@ -465,29 +518,63 @@ export function createTabsPlugin(options = {}) {
     /**
      * Rebuilds the tab bar from scratch.
      * At most three group tabs are rendered (one per type: BPMN, DMN, Form).
+     * On narrow viewports (≤600px) a single unified tab is shown instead.
      */
     function renderTabBar() {
         if (!tabBar)
             return;
         tabBar.innerHTML = "";
-        for (const type of GROUP_TYPES) {
-            const group = tabs.filter((t) => t.config.type === type);
-            if (group.length === 0)
-                continue;
-            // Ensure groupActiveId[type] points to a valid tab in this group
-            if (!group.some((t) => t.id === groupActiveId.get(type))) {
-                const first = group[0];
-                if (first)
-                    groupActiveId.set(type, first.id);
+        if (window.innerWidth <= 600 && tabs.length > 0) {
+            const activeTab = tabs.find((t) => t.id === activeId);
+            if (activeTab) {
+                createMobileTabEl(activeTab);
+            }
+        }
+        else {
+            for (const type of GROUP_TYPES) {
+                const group = tabs.filter((t) => t.config.type === type);
+                if (group.length === 0)
+                    continue;
+                // Ensure groupActiveId[type] points to a valid tab in this group
+                if (!group.some((t) => t.id === groupActiveId.get(type))) {
+                    const first = group[0];
+                    if (first)
+                        groupActiveId.set(type, first.id);
+                }
+                const isGroupActive = group.some((t) => t.id === activeId);
+                createGroupTabEl(type, group, isGroupActive);
             }
-            const isGroupActive = group.some((t) => t.id === activeId);
-            createGroupTabEl(type, group, isGroupActive);
         }
         // Center slot must be re-appended after innerHTML clear
         if (centerSlotEl)
             tabBar.appendChild(centerSlotEl);
         updateRawModeBtn();
     }
+    function createMobileTabEl(activeTab) {
+        const el = document.createElement("div");
+        el.className = "bpmnkit-tab active";
+        const typeBadge = document.createElement("span");
+        typeBadge.className = `bpmnkit-tab-type ${activeTab.config.type}`;
+        typeBadge.textContent = activeTab.config.type.toUpperCase();
+        el.appendChild(typeBadge);
+        const nameEl = document.createElement("span");
+        nameEl.className = "bpmnkit-tab-name";
+        nameEl.textContent = activeTab.config.name ?? activeTab.config.type;
+        el.appendChild(nameEl);
+        if (tabs.length > 1) {
+            const chevron = document.createElement("span");
+            chevron.className = "bpmnkit-tab-chevron";
+            chevron.innerHTML =
+                '<svg viewBox="0 0 10 6" fill="currentColor"><path d="M0 0l5 6 5-6z"/></svg>';
+            el.appendChild(chevron);
+        }
+        el.addEventListener("click", () => {
+            if (tabs.length > 1) {
+                toggleMobileDropdown(el);
+            }
+        });
+        tabBar?.appendChild(el);
+    }
     function createGroupTabEl(type, group, isGroupActive) {
         const el = document.createElement("div");
         el.className = `bpmnkit-tab${isGroupActive ? " active" : ""}`;
@@ -552,7 +639,7 @@ export function createTabsPlugin(options = {}) {
         contentArea?.appendChild(pane);
         tab.pane = pane;
         if (tab.config.type === "dmn") {
-            const editor = new DmnEditor({ container: pane, theme });
+            const editor = new DmnEditor({ container: pane, theme: theme === "neon" ? "dark" : theme });
             tab.dmnEditor = editor;
             const xml = Dmn.export(tab.config.defs);
             void editor.loadXML(xml);
@@ -572,7 +659,7 @@ export function createTabsPlugin(options = {}) {
             });
         }
         else if (tab.config.type === "form") {
-            const editor = new FormEditor({ container: pane, theme });
+            const editor = new FormEditor({ container: pane, theme: theme === "neon" ? "dark" : theme });
             tab.formEditor = editor;
             const schema = JSON.parse(Form.export(tab.config.form));
             void editor.loadSchema(schema);
@@ -601,8 +688,9 @@ export function createTabsPlugin(options = {}) {
         // shows through. pointer-events are set to none in setActiveTab.
     }
     function applyThemeToTab(tab) {
-        tab.dmnEditor?.setTheme(theme);
-        tab.formEditor?.setTheme(theme);
+        const editorTheme = theme === "neon" ? "dark" : theme;
+        tab.dmnEditor?.setTheme(editorTheme);
+        tab.formEditor?.setTheme(editorTheme);
     }
     function showWarning(tab, show) {
         tab.hasWarning = show;
@@ -919,9 +1007,10 @@ export function createTabsPlugin(options = {}) {
         install(cApi) {
             canvasApi = cApi;
             injectTabsStyles();
-            // Detect theme from canvas (canvas sets data-theme="dark" for dark, removes it for light)
+            // Detect theme from canvas (canvas sets data-theme="dark"/"neon"; absence means light)
             const container = cApi.container;
-            theme = container.dataset.theme === "dark" ? "dark" : "light";
+            const initialTheme = container.dataset.theme;
+            theme = initialTheme === "dark" || initialTheme === "neon" ? initialTheme : "light";
             // Expand container to be position:relative for absolute children
             if (getComputedStyle(container).position === "static") {
                 container.style.position = "relative";
@@ -1048,10 +1137,10 @@ export function createTabsPlugin(options = {}) {
             }
             offDiagramChange = anyOn("diagram:change", onDiagramUpdate);
             anyOn("diagram:load", onDiagramUpdate);
-            // Listen for theme changes (canvas toggles data-theme="dark"; absence means light)
+            // Listen for theme changes (canvas sets data-theme="dark"/"neon"; absence means light)
             const observer = new MutationObserver(() => {
                 const t = container.dataset.theme;
-                theme = t === "dark" ? "dark" : "light";
+                theme = t === "dark" || t === "neon" ? t : "light";
                 if (tabBar)
                     tabBar.dataset.theme = theme;
                 if (welcomeEl)

package/dist/token-highlight/css.js

@@ -13,6 +13,8 @@ const CSS = `
   animation: bpmnkit-token-pulse 1.4s ease-in-out infinite;
 }
 .bpmnkit-token-active .bpmnkit-shape-body,
+.bpmnkit-token-active .bpmnkit-callactivity-body,
+.bpmnkit-token-active .bpmnkit-eventsubprocess-body,
 .bpmnkit-token-active .bpmnkit-event-body,
 .bpmnkit-token-active .bpmnkit-end-body,
 .bpmnkit-token-active .bpmnkit-gw-body {
@@ -23,6 +25,8 @@ const CSS = `
 
 /* ── Visited shapes (token has passed through) ──────────────────────────── */
 .bpmnkit-token-visited .bpmnkit-shape-body,
+.bpmnkit-token-visited .bpmnkit-callactivity-body,
+.bpmnkit-token-visited .bpmnkit-eventsubprocess-body,
 .bpmnkit-token-visited .bpmnkit-event-body,
 .bpmnkit-token-visited .bpmnkit-end-body,
 .bpmnkit-token-visited .bpmnkit-gw-body {