@bpmnkit/plugins 0.0.8

package/dist/tabs/tabs-plugin.js

@@ -0,0 +1,1119 @@
+import { Bpmn, Dmn, Form, } from "@bpmnkit/core";
+import { DmnEditor } from "../dmn-editor/index.js";
+import { buildFeelPlaygroundPanel, injectPlaygroundStyles } from "../feel-playground/index.js";
+import { FormEditor } from "../form-editor/index.js";
+import { injectTabsStyles } from "./css.js";
+import { InMemoryFileResolver } from "./file-resolver.js";
+let _tabCounter = 0;
+const RAW_MODE_ICON = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="5,3 1,8 5,13"/><polyline points="11,3 15,8 11,13"/></svg>';
+/** The order in which type groups appear in the tab bar. */
+const GROUP_TYPES = ["bpmn", "dmn", "form", "feel"];
+/**
+ * Creates a tabs plugin instance.
+ *
+ * When installed into a `BpmnCanvas` (or `BpmnEditor`), it adds a tab bar overlay
+ * at the top of the canvas container and manages multiple BPMN/DMN/Form views.
+ *
+ * @example
+ * ```typescript
+ * const resolver = new InMemoryFileResolver();
+ * resolver.registerDmn(dmnDefs);
+ * resolver.registerForm(formDef);
+ *
+ * const tabsPlugin = createTabsPlugin({ resolver });
+ * const canvas = new BpmnCanvas({ container, xml, plugins: [tabsPlugin] });
+ *
+ * // Navigate programmatically
+ * tabsPlugin.api.openDecision("Decision_1");
+ * ```
+ */
+export function createTabsPlugin(options = {}) {
+    const resolver = options.resolver ?? null;
+    const tabs = [];
+    let activeId = null;
+    let canvasApi = null;
+    let tabBar = null;
+    let contentArea = null;
+    let welcomeEl = null;
+    let dynamicSectionsEl = null;
+    let dropdownEl = null;
+    let recentBtnEl = null;
+    let recentListEl = null;
+    let theme = "dark";
+    let offDiagramChange;
+    let isRawMode = false;
+    let rawPaneEl = null;
+    let rawPreEl = null;
+    let rawModeBtn = null;
+    let isProjectMode = false;
+    let centerSlotEl = null;
+    let fileInputEl = null;
+    let dndDragoverHandler = null;
+    let dndDropHandler = null;
+    async function importFiles(files) {
+        for (const file of Array.from(files)) {
+            const name = file.name;
+            const ext = name.slice(name.lastIndexOf(".")).toLowerCase();
+            try {
+                const text = await file.text();
+                if (ext === ".bpmn" || ext === ".xml") {
+                    Bpmn.parse(text); // validate — throws on malformed XML
+                    api.openTab({ type: "bpmn", xml: text, name });
+                }
+                else if (ext === ".dmn") {
+                    const defs = Dmn.parse(text);
+                    if (resolver instanceof InMemoryFileResolver)
+                        resolver.registerDmn(defs);
+                    api.openTab({ type: "dmn", defs, name: defs.name ?? name });
+                }
+                else if (ext === ".form" || ext === ".json") {
+                    const form = Form.parse(text);
+                    if (resolver instanceof InMemoryFileResolver)
+                        resolver.registerForm(form);
+                    api.openTab({ type: "form", form, name: form.id ?? name });
+                }
+            }
+            catch (err) {
+                console.error(`[bpmn-sdk] Failed to import ${name}:`, err);
+            }
+        }
+    }
+    /** Tracks which tab ID each BPMN process ID belongs to. */
+    const bpmnProcessToTabId = new Map();
+    /** Display name for each tracked BPMN process ID. */
+    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. */
+    let openDropdownType = null;
+    let outsideClickHandler = null;
+    // --- Close-confirmation dialog ---
+    /** Returns true when a tab has in-memory content worth offering to save. */
+    function hasContent(config) {
+        // A BPMN tab with xml:"" represents the main canvas — skip dialog for it.
+        if (config.type === "bpmn")
+            return config.xml.length > 0;
+        if (config.type === "feel")
+            return false;
+        return true; // dmn and form always carry parsed content
+    }
+    /**
+     * Shows an in-canvas confirmation dialog asking the user whether to download
+     * the tab's content before closing.
+     */
+    function showCloseDialog(container, tabName, onDownload, onClose) {
+        const overlay = document.createElement("div");
+        overlay.className = "bpmnkit-close-overlay";
+        const dialog = document.createElement("div");
+        dialog.className = "bpmnkit-close-dialog";
+        dialog.dataset.theme = theme;
+        const titleEl = document.createElement("div");
+        titleEl.className = "bpmnkit-close-dialog-title";
+        titleEl.textContent = `Close "${tabName}"?`;
+        const bodyEl = document.createElement("div");
+        bodyEl.className = "bpmnkit-close-dialog-body";
+        bodyEl.textContent =
+            "This file only exists in memory and will be lost. Download a copy before closing?";
+        const actionsEl = document.createElement("div");
+        actionsEl.className = "bpmnkit-close-dialog-actions";
+        function dismiss() {
+            overlay.remove();
+            document.removeEventListener("keydown", handleKey);
+        }
+        const cancelBtn = document.createElement("button");
+        cancelBtn.type = "button";
+        cancelBtn.className = "bpmnkit-close-dialog-btn ghost";
+        cancelBtn.textContent = "Cancel";
+        cancelBtn.addEventListener("click", dismiss);
+        const discardBtn = document.createElement("button");
+        discardBtn.type = "button";
+        discardBtn.className = "bpmnkit-close-dialog-btn secondary";
+        discardBtn.textContent = "Close without saving";
+        discardBtn.addEventListener("click", () => {
+            dismiss();
+            onClose();
+        });
+        actionsEl.appendChild(cancelBtn);
+        actionsEl.appendChild(discardBtn);
+        if (onDownload) {
+            const downloadBtn = document.createElement("button");
+            downloadBtn.type = "button";
+            downloadBtn.className = "bpmnkit-close-dialog-btn primary";
+            downloadBtn.textContent = "Download & Close";
+            downloadBtn.addEventListener("click", () => {
+                dismiss();
+                onDownload();
+                onClose();
+            });
+            actionsEl.appendChild(downloadBtn);
+            // Delay focus so the button is in the DOM and focusable
+            requestAnimationFrame(() => downloadBtn.focus());
+        }
+        dialog.appendChild(titleEl);
+        dialog.appendChild(bodyEl);
+        dialog.appendChild(actionsEl);
+        overlay.appendChild(dialog);
+        container.appendChild(overlay);
+        function handleKey(e) {
+            if (e.key === "Escape")
+                dismiss();
+        }
+        document.addEventListener("keydown", handleKey);
+    }
+    // --- Welcome screen ---
+    function createWelcomeEl() {
+        const el = document.createElement("div");
+        el.className = "bpmnkit-welcome";
+        el.dataset.theme = theme;
+        el.style.display = "none";
+        const inner = document.createElement("div");
+        inner.className = "bpmnkit-welcome-inner";
+        const iconEl = document.createElement("div");
+        iconEl.className = "bpmnkit-welcome-icon";
+        iconEl.innerHTML =
+            '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">' +
+                '<polygon points="50,10 90,50 50,90 10,50" fill="currentColor"/>' +
+                '<line x1="50" y1="27" x2="50" y2="73" style="stroke: var(--welcome-bg, #1e1e2e)" stroke-width="7.5" stroke-linecap="round"/>' +
+                '<line x1="27" y1="50" x2="73" y2="50" style="stroke: var(--welcome-bg, #1e1e2e)" stroke-width="7.5" stroke-linecap="round"/>' +
+                "</svg>";
+        inner.appendChild(iconEl);
+        const title = document.createElement("h2");
+        title.className = "bpmnkit-welcome-title";
+        title.textContent = "BPMN Editor";
+        inner.appendChild(title);
+        const sub = document.createElement("p");
+        sub.className = "bpmnkit-welcome-sub";
+        sub.textContent = "Open a diagram or start fresh to get going.";
+        inner.appendChild(sub);
+        const actions = document.createElement("div");
+        actions.className = "bpmnkit-welcome-actions";
+        const newBtn = document.createElement("button");
+        newBtn.type = "button";
+        newBtn.className = "bpmnkit-welcome-btn primary";
+        newBtn.textContent = "New diagram";
+        newBtn.addEventListener("click", () => options.onNewDiagram?.());
+        const importBtn = document.createElement("button");
+        importBtn.type = "button";
+        importBtn.className = "bpmnkit-welcome-btn secondary";
+        importBtn.textContent = "Import files\u2026";
+        importBtn.addEventListener("click", () => {
+            if (options.onImportFiles) {
+                options.onImportFiles();
+            }
+            else if (options.enableFileImport) {
+                api.openFilePicker();
+            }
+        });
+        actions.appendChild(newBtn);
+        actions.appendChild(importBtn);
+        // Recent projects dropdown button — populated each time the welcome screen is shown
+        if (options.getRecentProjects) {
+            const recentBtn = document.createElement("button");
+            recentBtn.type = "button";
+            recentBtn.className = "bpmnkit-welcome-btn secondary";
+            recentBtn.disabled = true;
+            recentBtnEl = recentBtn;
+            const recentList = document.createElement("div");
+            recentList.className = "bpmnkit-welcome-recent-list";
+            recentList.style.display = "none";
+            recentListEl = recentList;
+            recentBtn.addEventListener("click", () => {
+                if (!recentListEl)
+                    return;
+                recentListEl.style.display = recentListEl.style.display === "none" ? "" : "none";
+            });
+            actions.appendChild(recentBtn);
+            actions.appendChild(recentList);
+        }
+        inner.appendChild(actions);
+        if (options.examples && options.examples.length > 0) {
+            const divider = document.createElement("div");
+            divider.className = "bpmnkit-welcome-divider";
+            inner.appendChild(divider);
+            const examplesLabel = document.createElement("div");
+            examplesLabel.className = "bpmnkit-welcome-examples-label";
+            examplesLabel.textContent = "Examples";
+            inner.appendChild(examplesLabel);
+            const list = document.createElement("div");
+            list.className = "bpmnkit-welcome-examples";
+            for (const example of options.examples) {
+                const item = document.createElement("button");
+                item.type = "button";
+                item.className = "bpmnkit-welcome-example";
+                item.addEventListener("click", () => example.onOpen());
+                if (example.badge) {
+                    const badge = document.createElement("span");
+                    badge.className = `bpmnkit-welcome-example-badge ${example.badge.toLowerCase()}`;
+                    badge.textContent = example.badge;
+                    item.appendChild(badge);
+                }
+                const text = document.createElement("span");
+                text.className = "bpmnkit-welcome-example-text";
+                const labelEl = document.createElement("span");
+                labelEl.className = "bpmnkit-welcome-example-label";
+                labelEl.textContent = example.label;
+                text.appendChild(labelEl);
+                if (example.description) {
+                    const descEl = document.createElement("span");
+                    descEl.className = "bpmnkit-welcome-example-desc";
+                    descEl.textContent = example.description;
+                    text.appendChild(descEl);
+                }
+                item.appendChild(text);
+                const arrow = document.createElement("span");
+                arrow.className = "bpmnkit-welcome-example-arrow";
+                arrow.innerHTML =
+                    '<svg viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1,1 7,6 1,11"/></svg>';
+                item.appendChild(arrow);
+                list.appendChild(item);
+            }
+            inner.appendChild(list);
+        }
+        // Placeholder for dynamic sections (e.g. projects) — populated on each show
+        if (options.getWelcomeSections) {
+            const sectionsContainer = document.createElement("div");
+            sectionsContainer.className = "bpmnkit-welcome-dynamic-sections";
+            inner.appendChild(sectionsContainer);
+            dynamicSectionsEl = sectionsContainer;
+        }
+        el.appendChild(inner);
+        return el;
+    }
+    function renderDynamicSections() {
+        const container = dynamicSectionsEl;
+        if (!container || !options.getWelcomeSections)
+            return;
+        container.textContent = "";
+        const sections = options.getWelcomeSections();
+        for (const section of sections) {
+            const items = section.getItems();
+            const divider = document.createElement("div");
+            divider.className = "bpmnkit-welcome-divider";
+            container.appendChild(divider);
+            const sectionLabel = document.createElement("div");
+            sectionLabel.className = "bpmnkit-welcome-examples-label";
+            sectionLabel.textContent = section.label;
+            container.appendChild(sectionLabel);
+            if (items.length === 0 && section.emptyText) {
+                const empty = document.createElement("div");
+                empty.className = "bpmnkit-welcome-empty";
+                empty.textContent = section.emptyText;
+                container.appendChild(empty);
+                continue;
+            }
+            const list = document.createElement("div");
+            list.className = "bpmnkit-welcome-examples";
+            for (const item of items) {
+                const btn = document.createElement("button");
+                btn.type = "button";
+                btn.className = "bpmnkit-welcome-example";
+                btn.addEventListener("click", () => item.onOpen());
+                const text = document.createElement("span");
+                text.className = "bpmnkit-welcome-example-text";
+                const labelEl = document.createElement("span");
+                labelEl.className = "bpmnkit-welcome-example-label";
+                labelEl.textContent = item.label;
+                text.appendChild(labelEl);
+                if (item.description) {
+                    const descEl = document.createElement("span");
+                    descEl.className = "bpmnkit-welcome-example-desc";
+                    descEl.textContent = item.description;
+                    text.appendChild(descEl);
+                }
+                btn.appendChild(text);
+                const arrow = document.createElement("span");
+                arrow.className = "bpmnkit-welcome-example-arrow";
+                arrow.innerHTML =
+                    '<svg viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1,1 7,6 1,11"/></svg>';
+                btn.appendChild(arrow);
+                list.appendChild(btn);
+            }
+            container.appendChild(list);
+        }
+    }
+    function renderRecentProjects() {
+        if (!recentBtnEl || !recentListEl || !options.getRecentProjects)
+            return;
+        const items = options.getRecentProjects();
+        if (!items || items.length === 0) {
+            recentBtnEl.disabled = true;
+            recentBtnEl.textContent = "Open recent\u2026";
+            recentListEl.style.display = "none";
+            return;
+        }
+        recentBtnEl.disabled = false;
+        recentBtnEl.innerHTML =
+            'Open recent\u2026 <svg style="width:8px;height:5px;vertical-align:middle;margin-left:2px" viewBox="0 0 10 6" fill="currentColor"><path d="M0 0l5 6 5-6z"/></svg>';
+        // Collapse the list on re-render
+        recentListEl.style.display = "none";
+        recentListEl.textContent = "";
+        for (const item of items) {
+            const btn = document.createElement("button");
+            btn.type = "button";
+            btn.className = "bpmnkit-welcome-example";
+            btn.addEventListener("click", () => {
+                if (recentListEl)
+                    recentListEl.style.display = "none";
+                item.onOpen();
+            });
+            const text = document.createElement("span");
+            text.className = "bpmnkit-welcome-example-text";
+            const labelEl = document.createElement("span");
+            labelEl.className = "bpmnkit-welcome-example-label";
+            labelEl.textContent = item.label;
+            text.appendChild(labelEl);
+            if (item.description) {
+                const descEl = document.createElement("span");
+                descEl.className = "bpmnkit-welcome-example-desc";
+                descEl.textContent = item.description;
+                text.appendChild(descEl);
+            }
+            btn.appendChild(text);
+            const arrow = document.createElement("span");
+            arrow.className = "bpmnkit-welcome-example-arrow";
+            arrow.innerHTML =
+                '<svg viewBox="0 0 8 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="1,1 7,6 1,11"/></svg>';
+            btn.appendChild(arrow);
+            recentListEl.appendChild(btn);
+        }
+    }
+    function showWelcomeScreen() {
+        if (welcomeEl)
+            welcomeEl.style.display = "";
+        if (tabBar)
+            tabBar.style.display = "none";
+        canvasApi?.container.classList.add("bpmnkit-welcome-active");
+        renderDynamicSections();
+        renderRecentProjects();
+        // Defer so the callback runs after all synchronous plugin/HUD initialization
+        // completes. On initial install the HUD elements don't exist yet; rAF fires
+        // after the current JS task, by which time initEditorHud() has run.
+        requestAnimationFrame(() => options.onWelcomeShow?.());
+    }
+    function hideWelcomeScreen() {
+        if (welcomeEl)
+            welcomeEl.style.display = "none";
+        if (tabBar)
+            tabBar.style.display = "";
+        canvasApi?.container.classList.remove("bpmnkit-welcome-active");
+    }
+    // --- Group dropdown ---
+    function closeDropdownEl() {
+        if (dropdownEl)
+            dropdownEl.classList.remove("open");
+        openDropdownType = null;
+    }
+    function openDropdown(type, group, anchorEl) {
+        if (!dropdownEl)
+            return;
+        dropdownEl.innerHTML = "";
+        dropdownEl.dataset.theme = theme;
+        for (const tab of group) {
+            const item = document.createElement("div");
+            item.className = "bpmnkit-tab-drop-item";
+            if (tab.id === groupActiveId.get(type))
+                item.classList.add("active");
+            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 = type;
+    }
+    function toggleDropdown(type, group, anchorEl) {
+        if (openDropdownType === type) {
+            closeDropdownEl();
+        }
+        else {
+            openDropdown(type, group, anchorEl);
+        }
+    }
+    // --- Tab bar rendering ---
+    function requestClose(tab) {
+        if (isProjectMode)
+            return;
+        if (hasContent(tab.config) && canvasApi) {
+            const tabName = tab.config.name ?? `${tab.config.type} tab`;
+            const onDownload = options.onDownloadTab ? () => options.onDownloadTab?.(tab.config) : null;
+            showCloseDialog(canvasApi.container, tabName, onDownload, () => api.closeTab(tab.id));
+        }
+        else {
+            api.closeTab(tab.id);
+        }
+    }
+    /**
+     * Rebuilds the tab bar from scratch.
+     * At most three group tabs are rendered (one per type: BPMN, DMN, Form).
+     */
+    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);
+            }
+            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 createGroupTabEl(type, group, isGroupActive) {
+        const el = document.createElement("div");
+        el.className = `bpmnkit-tab${isGroupActive ? " active" : ""}`;
+        // Type badge
+        const typeBadge = document.createElement("span");
+        typeBadge.className = `bpmnkit-tab-type ${type}`;
+        typeBadge.textContent = type.toUpperCase();
+        el.appendChild(typeBadge);
+        // Active file name within this group
+        const activeTabId = groupActiveId.get(type);
+        const activeTab = group.find((t) => t.id === activeTabId) ?? group[0];
+        const nameEl = document.createElement("span");
+        nameEl.className = "bpmnkit-tab-name";
+        nameEl.textContent = activeTab?.config.name ?? type;
+        el.appendChild(nameEl);
+        // Warn indicator — shown if the group's active tab has a warning
+        if (activeTab?.hasWarning) {
+            const warnEl = document.createElement("span");
+            warnEl.className = "bpmnkit-tab-warn";
+            warnEl.textContent = "⚠";
+            warnEl.title = "Referenced file not found in registry";
+            el.appendChild(warnEl);
+        }
+        if (group.length > 1) {
+            // Chevron — opens the group dropdown listing all files of this type
+            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);
+        }
+        else if (!isProjectMode) {
+            // Close button — only when the group has a single file and not in project mode
+            const tab = group[0];
+            if (tab) {
+                const closeBtn = document.createElement("span");
+                closeBtn.className = "bpmnkit-tab-close";
+                closeBtn.textContent = "×";
+                closeBtn.addEventListener("click", (e) => {
+                    e.stopPropagation();
+                    requestClose(tab);
+                });
+                el.appendChild(closeBtn);
+            }
+        }
+        el.addEventListener("click", () => {
+            // Toggle dropdown first (while el is still in the DOM for correct positioning)
+            if (group.length > 1) {
+                toggleDropdown(type, group, el);
+            }
+            // Activate the group's last-selected file
+            const id = groupActiveId.get(type);
+            if (id)
+                api.setActiveTab(id);
+        });
+        tabBar?.appendChild(el);
+    }
+    // --- Tab content mounting ---
+    function mountTabContent(tab) {
+        const pane = document.createElement("div");
+        pane.className = "bpmnkit-tab-pane hidden";
+        contentArea?.appendChild(pane);
+        tab.pane = pane;
+        if (tab.config.type === "dmn") {
+            const editor = new DmnEditor({ container: pane, theme });
+            tab.dmnEditor = editor;
+            const xml = Dmn.export(tab.config.defs);
+            void editor.loadXML(xml);
+            tab.offDmnChange = editor.onChange(() => {
+                void (async () => {
+                    const newXml = await editor.getXML();
+                    if (tab.config.type === "dmn") {
+                        try {
+                            tab.config = { type: "dmn", defs: Dmn.parse(newXml), name: tab.config.name };
+                        }
+                        catch {
+                            // keep old defs if parse fails
+                        }
+                        options.onTabChange?.(tab.id, tab.config);
+                    }
+                })();
+            });
+        }
+        else if (tab.config.type === "form") {
+            const editor = new FormEditor({ container: pane, theme });
+            tab.formEditor = editor;
+            const schema = JSON.parse(Form.export(tab.config.form));
+            void editor.loadSchema(schema);
+            tab.offFormChange = editor.onChange(() => {
+                if (tab.config.type === "form") {
+                    const newSchema = editor.getSchema();
+                    try {
+                        tab.config = {
+                            type: "form",
+                            form: Form.parse(JSON.stringify(newSchema)),
+                            name: tab.config.name,
+                        };
+                    }
+                    catch {
+                        // keep old form if parse fails
+                    }
+                    options.onTabChange?.(tab.id, tab.config);
+                }
+            });
+        }
+        else if (tab.config.type === "feel") {
+            injectPlaygroundStyles();
+            pane.appendChild(buildFeelPlaygroundPanel(undefined, tab.config.expression));
+        }
+        // BPMN pane is intentionally empty and transparent — the main canvas SVG
+        // shows through. pointer-events are set to none in setActiveTab.
+    }
+    function applyThemeToTab(tab) {
+        tab.dmnEditor?.setTheme(theme);
+        tab.formEditor?.setTheme(theme);
+    }
+    function showWarning(tab, show) {
+        tab.hasWarning = show;
+        renderTabBar();
+    }
+    // --- BPMN process tracking ---
+    function trackBpmnProcesses(tabId, xml) {
+        try {
+            for (const proc of Bpmn.parse(xml).processes) {
+                bpmnProcessToTabId.set(proc.id, tabId);
+                bpmnProcessNames.set(proc.id, proc.name ?? proc.id);
+            }
+        }
+        catch {
+            // Malformed XML — tab still opens, process map unchanged
+        }
+    }
+    function untrackBpmnProcesses(tabId) {
+        for (const [procId, tid] of [...bpmnProcessToTabId]) {
+            if (tid === tabId) {
+                bpmnProcessToTabId.delete(procId);
+                bpmnProcessNames.delete(procId);
+            }
+        }
+    }
+    // --- Raw mode ---
+    function getTabSource(tab) {
+        if (tab.config.type === "bpmn")
+            return tab.config.xml;
+        if (tab.config.type === "dmn")
+            return Dmn.export(tab.config.defs);
+        if (tab.config.type === "form")
+            return Form.export(tab.config.form);
+        return "";
+    }
+    function updateRawModeBtn() {
+        if (!rawModeBtn)
+            return;
+        const activeTab = activeId !== null ? tabs.find((t) => t.id === activeId) : undefined;
+        rawModeBtn.disabled = activeTab === undefined || activeTab.config.type === "feel";
+        rawModeBtn.classList.toggle("active", isRawMode);
+    }
+    function updateRawPane() {
+        if (!rawPaneEl || !rawPreEl)
+            return;
+        const activeTab = activeId !== null ? tabs.find((t) => t.id === activeId) : undefined;
+        if (!isRawMode || !activeTab || activeTab.config.type === "feel") {
+            rawPaneEl.style.display = "none";
+            return;
+        }
+        rawPreEl.textContent = getTabSource(activeTab);
+        rawPaneEl.style.display = "";
+    }
+    // --- Public API ---
+    const api = {
+        openTab(config) {
+            const id = `tab_${++_tabCounter}`;
+            const tab = {
+                id,
+                config,
+                pane: null,
+                hasWarning: false,
+            };
+            tabs.push(tab);
+            groupActiveId.set(config.type, id);
+            hideWelcomeScreen();
+            if (contentArea)
+                mountTabContent(tab);
+            // Track BPMN processes for navigation and the config panel picker
+            if (config.type === "bpmn") {
+                trackBpmnProcesses(id, config.xml);
+            }
+            renderTabBar();
+            api.setActiveTab(id);
+            return id;
+        },
+        closeTab(id) {
+            const idx = tabs.findIndex((t) => t.id === id);
+            if (idx === -1)
+                return;
+            const [tab] = tabs.splice(idx, 1);
+            if (!tab)
+                return;
+            tab.offDmnChange?.();
+            tab.offFormChange?.();
+            tab.dmnEditor?.destroy();
+            tab.formEditor?.destroy();
+            tab.pane.remove();
+            if (tab.config.type === "bpmn") {
+                untrackBpmnProcesses(id);
+            }
+            if (activeId === id) {
+                const next = tabs[idx] ?? tabs[idx - 1];
+                activeId = null;
+                if (next) {
+                    api.setActiveTab(next.id);
+                }
+                else {
+                    // All tabs closed — restore pointer-events and show welcome screen
+                    if (contentArea)
+                        contentArea.style.pointerEvents = "";
+                    showWelcomeScreen();
+                }
+            }
+            renderTabBar();
+        },
+        closeAllTabs() {
+            bpmnProcessToTabId.clear();
+            bpmnProcessNames.clear();
+            isRawMode = false;
+            for (const tab of [...tabs]) {
+                tab.offDmnChange?.();
+                tab.offFormChange?.();
+                tab.dmnEditor?.destroy();
+                tab.formEditor?.destroy();
+                tab.pane.remove();
+            }
+            tabs.length = 0;
+            activeId = null;
+            groupActiveId.clear();
+            if (contentArea)
+                contentArea.style.pointerEvents = "";
+            if (rawPaneEl)
+                rawPaneEl.style.display = "none";
+            renderTabBar();
+            showWelcomeScreen();
+        },
+        setActiveTab(id) {
+            const tab = tabs.find((t) => t.id === id);
+            if (!tab)
+                return;
+            // Deactivate current
+            if (activeId) {
+                const prev = tabs.find((t) => t.id === activeId);
+                if (prev)
+                    prev.pane.classList.add("hidden");
+            }
+            // Activate new
+            activeId = id;
+            tab.pane.classList.remove("hidden");
+            groupActiveId.set(tab.config.type, id);
+            // BPMN panes are transparent; disable pointer-events so the canvas is interactive.
+            // In raw mode the raw pane overlays everything so pointer-events must stay on.
+            if (contentArea) {
+                contentArea.style.pointerEvents = tab.config.type === "bpmn" && !isRawMode ? "none" : "";
+            }
+            renderTabBar();
+            options.onTabActivate?.(id, tab.config);
+            updateRawPane();
+        },
+        getActiveTabId() {
+            return activeId;
+        },
+        getTabIds() {
+            return tabs.map((t) => t.id);
+        },
+        navigateToProcess(processId) {
+            const tabId = bpmnProcessToTabId.get(processId);
+            if (tabId && tabs.some((t) => t.id === tabId)) {
+                api.setActiveTab(tabId);
+            }
+        },
+        getAvailableProcesses() {
+            return [...bpmnProcessToTabId.keys()].map((id) => ({
+                id,
+                name: bpmnProcessNames.get(id),
+            }));
+        },
+        getAvailableDecisions() {
+            const result = [];
+            for (const tab of tabs) {
+                if (tab.config.type !== "dmn")
+                    continue;
+                for (const decision of tab.config.defs.decisions) {
+                    result.push({ id: decision.id, name: decision.name ?? undefined });
+                }
+            }
+            return result;
+        },
+        getAvailableForms() {
+            const result = [];
+            for (const tab of tabs) {
+                if (tab.config.type !== "form")
+                    continue;
+                const formId = tab.config.form.id;
+                if (formId)
+                    result.push({ id: formId, name: tab.config.name });
+            }
+            return result;
+        },
+        getAllTabContent() {
+            const result = [];
+            for (const tab of tabs) {
+                if (tab.config.type === "bpmn") {
+                    result.push({
+                        tabId: tab.id,
+                        name: tab.config.name ?? "Diagram",
+                        type: "bpmn",
+                        content: tab.config.xml,
+                    });
+                }
+                else if (tab.config.type === "dmn") {
+                    result.push({
+                        tabId: tab.id,
+                        name: tab.config.name ?? "Decision",
+                        type: "dmn",
+                        content: Dmn.export(tab.config.defs),
+                    });
+                }
+                else if (tab.config.type === "form") {
+                    result.push({
+                        tabId: tab.id,
+                        name: tab.config.name ?? "Form",
+                        type: "form",
+                        content: Form.export(tab.config.form),
+                    });
+                }
+                // FEEL tabs have no file content — skipped
+            }
+            return result;
+        },
+        refreshWelcomeScreen() {
+            renderRecentProjects();
+            renderDynamicSections();
+        },
+        setProjectMode(enabled) {
+            isProjectMode = enabled;
+            renderTabBar();
+        },
+        renameTab(id, name) {
+            const tab = tabs.find((t) => t.id === id);
+            if (!tab)
+                return;
+            tab.config = { ...tab.config, name };
+            renderTabBar();
+        },
+        get rawModeButton() {
+            return rawModeBtn;
+        },
+        openFilePicker() {
+            fileInputEl?.click();
+        },
+        setPlayMode(enabled) {
+            if (tabBar === null)
+                return;
+            if (enabled) {
+                tabBar.classList.add("bpmnkit-play-mode");
+            }
+            else {
+                tabBar.classList.remove("bpmnkit-play-mode");
+            }
+        },
+        openDecision(decisionId) {
+            // Check if already open
+            const existing = tabs.find((t) => t.config.type === "dmn" && t.config.defs.decisions.some((d) => d.id === decisionId));
+            if (existing) {
+                api.setActiveTab(existing.id);
+                return;
+            }
+            const defs = resolver?.resolveDmn(decisionId) ?? null;
+            if (!defs) {
+                // Open a tab with a warning
+                const id = api.openTab({
+                    type: "dmn",
+                    defs: {
+                        id: decisionId,
+                        name: decisionId,
+                        namespace: "",
+                        namespaces: {},
+                        modelerAttributes: {},
+                        decisions: [],
+                        inputData: [],
+                        knowledgeSources: [],
+                        businessKnowledgeModels: [],
+                        textAnnotations: [],
+                        associations: [],
+                    },
+                    name: decisionId,
+                });
+                const tab = tabs.find((t) => t.id === id);
+                if (tab)
+                    showWarning(tab, true);
+                return;
+            }
+            const decision = defs.decisions.find((d) => d.id === decisionId);
+            api.openTab({ type: "dmn", defs, name: decision?.name ?? decisionId });
+        },
+        openForm(formId) {
+            // Check if already open
+            const existing = tabs.find((t) => t.config.type === "form" && t.config.form.id === formId);
+            if (existing) {
+                api.setActiveTab(existing.id);
+                return;
+            }
+            const form = resolver?.resolveForm(formId) ?? null;
+            if (!form) {
+                const id = api.openTab({
+                    type: "form",
+                    form: { id: formId, type: "default", components: [] },
+                    name: formId,
+                });
+                const tab = tabs.find((t) => t.id === id);
+                if (tab)
+                    showWarning(tab, true);
+                return;
+            }
+            api.openTab({ type: "form", form, name: form.id });
+        },
+    };
+    // --- CanvasPlugin ---
+    return {
+        name: "tabs",
+        api,
+        install(cApi) {
+            canvasApi = cApi;
+            injectTabsStyles();
+            // Detect theme from canvas (canvas sets data-theme="dark" for dark, removes it for light)
+            const container = cApi.container;
+            theme = container.dataset.theme === "dark" ? "dark" : "light";
+            // Expand container to be position:relative for absolute children
+            if (getComputedStyle(container).position === "static") {
+                container.style.position = "relative";
+            }
+            // Create tab bar
+            tabBar = document.createElement("div");
+            tabBar.className = "bpmnkit-tabs";
+            tabBar.dataset.theme = theme;
+            container.appendChild(tabBar);
+            if (options.centerSlot) {
+                centerSlotEl = document.createElement("div");
+                centerSlotEl.className = "bpmnkit-tabs-center";
+                centerSlotEl.appendChild(options.centerSlot);
+                tabBar.appendChild(centerSlotEl);
+            }
+            // Create content area (below tab bar)
+            contentArea = document.createElement("div");
+            contentArea.className = "bpmnkit-tab-content";
+            container.appendChild(contentArea);
+            // Create welcome screen (shown until the first tab opens)
+            welcomeEl = createWelcomeEl();
+            contentArea.appendChild(welcomeEl);
+            showWelcomeScreen();
+            // Create raw source pane (overlaid on top of content when raw mode is on)
+            rawPaneEl = document.createElement("div");
+            rawPaneEl.className = "bpmnkit-raw-pane";
+            rawPaneEl.dataset.theme = theme;
+            rawPaneEl.style.display = "none";
+            const rawCopyBtn = document.createElement("button");
+            rawCopyBtn.type = "button";
+            rawCopyBtn.className = "bpmnkit-raw-copy-btn";
+            rawCopyBtn.textContent = "Copy";
+            rawCopyBtn.addEventListener("click", () => {
+                const text = rawPreEl?.textContent ?? "";
+                void navigator.clipboard.writeText(text).then(() => {
+                    rawCopyBtn.textContent = "Copied!";
+                    setTimeout(() => {
+                        rawCopyBtn.textContent = "Copy";
+                    }, 1500);
+                });
+            });
+            rawPaneEl.appendChild(rawCopyBtn);
+            rawPreEl = document.createElement("pre");
+            rawPreEl.className = "bpmnkit-raw-content";
+            rawPaneEl.appendChild(rawPreEl);
+            contentArea.appendChild(rawPaneEl);
+            // Raw mode toggle button — exposed via api.rawModeButton; caller places it in the HUD
+            rawModeBtn = document.createElement("button");
+            rawModeBtn.type = "button";
+            rawModeBtn.title = "Toggle raw source";
+            rawModeBtn.disabled = true;
+            rawModeBtn.innerHTML = RAW_MODE_ICON;
+            rawModeBtn.addEventListener("click", () => {
+                isRawMode = !isRawMode;
+                const activeTab = activeId !== null ? tabs.find((t) => t.id === activeId) : undefined;
+                if (contentArea && activeTab?.config.type === "bpmn") {
+                    contentArea.style.pointerEvents = isRawMode ? "" : "none";
+                }
+                updateRawPane();
+                updateRawModeBtn();
+                options.onRawModeChange?.(isRawMode);
+            });
+            // Create body-level dropdown for groups with multiple files
+            dropdownEl = document.createElement("div");
+            dropdownEl.className = "bpmnkit-tab-dropdown";
+            dropdownEl.dataset.theme = theme;
+            document.body.appendChild(dropdownEl);
+            // Close dropdown when clicking outside the tab bar or dropdown
+            outsideClickHandler = (e) => {
+                if (dropdownEl &&
+                    !dropdownEl.contains(e.target) &&
+                    !tabBar?.contains(e.target)) {
+                    closeDropdownEl();
+                }
+            };
+            document.addEventListener("pointerdown", outsideClickHandler);
+            // File import — hidden input + drag-and-drop
+            if (options.enableFileImport) {
+                const fileInput = document.createElement("input");
+                fileInput.type = "file";
+                fileInput.multiple = true;
+                fileInput.accept = ".bpmn,.xml,.dmn,.form,.json";
+                fileInput.style.display = "none";
+                document.body.appendChild(fileInput);
+                fileInput.addEventListener("change", () => {
+                    if (fileInput.files) {
+                        void importFiles(fileInput.files);
+                        fileInput.value = "";
+                    }
+                });
+                fileInputEl = fileInput;
+                dndDragoverHandler = (e) => {
+                    e.preventDefault();
+                };
+                dndDropHandler = (e) => {
+                    e.preventDefault();
+                    const files = e.dataTransfer?.files;
+                    if (files && files.length > 0)
+                        void importFiles(files);
+                };
+                container.addEventListener("dragover", dndDragoverHandler);
+                container.addEventListener("drop", dndDropHandler);
+            }
+            // Subscribe to diagram:change and diagram:load to keep BPMN tab XML in sync.
+            // diagram:load fires when XML is programmatically loaded (e.g. AI apply, history restore).
+            // diagram:change fires on every user edit.
+            const anyOn = cApi.on.bind(cApi);
+            function onDiagramUpdate(rawDefs) {
+                if (!activeId)
+                    return;
+                const activeTab = tabs.find((t) => t.id === activeId);
+                if (!activeTab || activeTab.config.type !== "bpmn")
+                    return;
+                const defs = rawDefs;
+                const xml = Bpmn.export(defs);
+                // Update stored XML so onTabActivate always receives the latest content
+                activeTab.config = { ...activeTab.config, xml };
+                // Refresh process map for this tab
+                untrackBpmnProcesses(activeId);
+                trackBpmnProcesses(activeId, xml);
+                // Keep raw pane in sync
+                if (isRawMode)
+                    updateRawPane();
+            }
+            offDiagramChange = anyOn("diagram:change", onDiagramUpdate);
+            anyOn("diagram:load", onDiagramUpdate);
+            // Listen for theme changes (canvas toggles data-theme="dark"; absence means light)
+            const observer = new MutationObserver(() => {
+                const t = container.dataset.theme;
+                theme = t === "dark" ? "dark" : "light";
+                if (tabBar)
+                    tabBar.dataset.theme = theme;
+                if (welcomeEl)
+                    welcomeEl.dataset.theme = theme;
+                if (dropdownEl)
+                    dropdownEl.dataset.theme = theme;
+                if (rawPaneEl)
+                    rawPaneEl.dataset.theme = theme;
+                for (const tab of tabs)
+                    applyThemeToTab(tab);
+            });
+            observer.observe(container, { attributes: true, attributeFilter: ["data-theme"] });
+        },
+        uninstall() {
+            offDiagramChange?.();
+            offDiagramChange = undefined;
+            if (outsideClickHandler) {
+                document.removeEventListener("pointerdown", outsideClickHandler);
+                outsideClickHandler = null;
+            }
+            if (fileInputEl) {
+                fileInputEl.remove();
+                fileInputEl = null;
+            }
+            if (canvasApi && dndDragoverHandler) {
+                canvasApi.container.removeEventListener("dragover", dndDragoverHandler);
+                dndDragoverHandler = null;
+            }
+            if (canvasApi && dndDropHandler) {
+                canvasApi.container.removeEventListener("drop", dndDropHandler);
+                dndDropHandler = null;
+            }
+            dropdownEl?.remove();
+            dropdownEl = null;
+            welcomeEl?.remove();
+            welcomeEl = null;
+            dynamicSectionsEl = null;
+            recentBtnEl = null;
+            recentListEl = null;
+            isRawMode = false;
+            rawPaneEl = null;
+            rawPreEl = null;
+            rawModeBtn = null;
+            bpmnProcessToTabId.clear();
+            bpmnProcessNames.clear();
+            for (const tab of tabs) {
+                tab.offDmnChange?.();
+                tab.offFormChange?.();
+                tab.dmnEditor?.destroy();
+                tab.formEditor?.destroy();
+            }
+            tabs.length = 0;
+            activeId = null;
+            groupActiveId.clear();
+            openDropdownType = null;
+            tabBar?.remove();
+            contentArea?.remove();
+            tabBar = null;
+            contentArea = null;
+            centerSlotEl = null;
+            canvasApi = null;
+        },
+    };
+}
+//# sourceMappingURL=tabs-plugin.js.map