@bpmnkit/plugins 0.0.12 → 0.0.13

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/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" : ""}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/plugins",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": false,
   "type": "module",
   "exports": {
@@ -104,10 +104,10 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/ascii": "0.0.12",
-    "@bpmnkit/core": "0.0.12",
-    "@bpmnkit/canvas": "0.0.12",
-    "@bpmnkit/editor": "0.0.12",
+    "@bpmnkit/ascii": "0.0.13",
+    "@bpmnkit/canvas": "0.0.13",
+    "@bpmnkit/core": "0.0.13",
+    "@bpmnkit/editor": "0.0.13",
     "@bpmnkit/feel": "0.0.12"
   },
   "description": "22 composable canvas plugins for BPMN editors and viewers — minimap, AI chat, process simulation, storage, and more",