@bpmnkit/plugins 0.0.8

package/dist/tabs/file-resolver.js

@@ -0,0 +1,46 @@
+/**
+ * In-memory implementation of `FileResolver`.
+ *
+ * Register files by their IDs; tabs plugin will resolve references against this store.
+ *
+ * @example
+ * ```typescript
+ * const resolver = new InMemoryFileResolver();
+ * resolver.registerDmn(dmnDefs);    // keyed by each decision's id
+ * resolver.registerForm(formDef);   // keyed by form.id
+ * resolver.registerBpmn("proc_1", xmlString);
+ *
+ * const tabs = createTabsPlugin({ resolver });
+ * ```
+ */
+export class InMemoryFileResolver {
+    _dmn = new Map();
+    _forms = new Map();
+    _bpmn = new Map();
+    /** Register a DMN definitions object. Each decision's id is indexed. */
+    registerDmn(defs) {
+        for (const decision of defs.decisions) {
+            this._dmn.set(decision.id, defs);
+        }
+        // Also index by definitions id for direct lookup
+        this._dmn.set(defs.id, defs);
+    }
+    /** Register a Camunda Form definition. */
+    registerForm(form) {
+        this._forms.set(form.id, form);
+    }
+    /** Register a BPMN XML by process/definition ID. */
+    registerBpmn(id, xml) {
+        this._bpmn.set(id, xml);
+    }
+    resolveDmn(decisionId) {
+        return this._dmn.get(decisionId) ?? null;
+    }
+    resolveForm(formId) {
+        return this._forms.get(formId) ?? null;
+    }
+    resolveBpmn(processId) {
+        return this._bpmn.get(processId) ?? null;
+    }
+}
+//# sourceMappingURL=file-resolver.js.map

package/dist/tabs/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @bpmnkit/canvas-plugin-tabs — multi-tab view management for BpmnCanvas/BpmnEditor.
+ *
+ * Adds a tab bar overlay to the canvas container. Each tab can hold a BPMN,
+ * DMN, or Form view. Includes a `FileResolver` abstraction for pluggable
+ * reference resolution (in-memory by default; extensible to FS, SaaS DB, etc.).
+ *
+ * @packageDocumentation
+ */
+export { createTabsPlugin } from "./tabs-plugin.js";
+export type { TabConfig, TabsPluginOptions, TabsApi, WelcomeExample, WelcomeSection, WelcomeSectionItem, WelcomeRecentItem, TabContentSnapshot, } from "./tabs-plugin.js";
+export { InMemoryFileResolver } from "./file-resolver.js";
+export type { FileResolver, ResolvedFile } from "./file-resolver.js";
+export { TABS_CSS, injectTabsStyles } from "./css.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/tabs/index.js

@@ -0,0 +1,13 @@
+/**
+ * @bpmnkit/canvas-plugin-tabs — multi-tab view management for BpmnCanvas/BpmnEditor.
+ *
+ * Adds a tab bar overlay to the canvas container. Each tab can hold a BPMN,
+ * DMN, or Form view. Includes a `FileResolver` abstraction for pluggable
+ * reference resolution (in-memory by default; extensible to FS, SaaS DB, etc.).
+ *
+ * @packageDocumentation
+ */
+export { createTabsPlugin } from "./tabs-plugin.js";
+export { InMemoryFileResolver } from "./file-resolver.js";
+export { TABS_CSS, injectTabsStyles } from "./css.js";
+//# sourceMappingURL=index.js.map

package/dist/tabs/tabs-plugin.d.ts

@@ -0,0 +1,250 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+import { type DmnDefinitions, type FormDefinition } from "@bpmnkit/core";
+import type { FileResolver } from "./file-resolver.js";
+/** A tab configuration — one of BPMN, DMN, Form, or FEEL Playground. */
+export type TabConfig = {
+    type: "bpmn";
+    xml: string;
+    name?: string;
+} | {
+    type: "dmn";
+    defs: DmnDefinitions;
+    name?: string;
+} | {
+    type: "form";
+    form: FormDefinition;
+    name?: string;
+} | {
+    type: "feel";
+    name?: string;
+    expression?: string;
+};
+/** A recent project item shown in the welcome screen dropdown. */
+export interface WelcomeRecentItem {
+    label: string;
+    description?: string;
+    onOpen: () => void;
+}
+/** Serialized content snapshot for save/export operations. Not available for FEEL tabs. */
+export interface TabContentSnapshot {
+    tabId: string;
+    name: string;
+    type: "bpmn" | "dmn" | "form";
+    content: string;
+}
+/** Options for the tabs plugin. */
+export interface TabsPluginOptions {
+    /**
+     * File resolver used to open referenced DMN/form files by ID.
+     * Provide an `InMemoryFileResolver` (or custom implementation)
+     * to enable "Open Decision" / "Open Form" navigation.
+     */
+    resolver?: FileResolver;
+    /**
+     * Called whenever a tab becomes active.
+     * Use this to react to tab switches — e.g. reload the BPMN editor
+     * when a BPMN tab is activated.
+     */
+    onTabActivate?: (id: string, config: TabConfig) => void;
+    /**
+     * Called when the user confirms they want to download a tab's content
+     * before closing. Implement file serialization and browser download here.
+     * If not provided, the "Download & Close" button is hidden.
+     */
+    onDownloadTab?: (config: TabConfig) => void;
+    /**
+     * Called when the user clicks "New diagram" on the welcome screen.
+     * Open a new BPMN tab from here.
+     */
+    onNewDiagram?: () => void;
+    /**
+     * Called when the user clicks "Import files" on the welcome screen.
+     * Trigger your file-picker here.
+     */
+    onImportFiles?: () => void;
+    /**
+     * Called whenever the welcome screen becomes visible (on initial install
+     * and when the last tab is closed). Use this to hide toolbars and menus
+     * that have no meaning without an open diagram.
+     */
+    onWelcomeShow?: () => void;
+    /**
+     * Example items shown in the welcome screen. Each item has a label,
+     * optional description, optional badge (e.g. "BPMN", "MULTI"), and an
+     * `onOpen` callback that opens the relevant tab(s).
+     */
+    examples?: WelcomeExample[];
+    /**
+     * Dynamic sections shown below the examples on the welcome screen.
+     * Each section's `getItems()` is called fresh every time the welcome screen
+     * becomes visible, so the content stays up to date.
+     */
+    getWelcomeSections?: () => WelcomeSection[];
+    /**
+     * Called when the welcome screen becomes visible to populate the "Open recent"
+     * dropdown button. Return null or an empty array to disable the button.
+     */
+    getRecentProjects?: () => WelcomeRecentItem[] | null;
+    /**
+     * Called whenever a DMN or Form tab's content changes (i.e. the user made an edit).
+     * Use this to trigger auto-save for the active file. Not called for BPMN tabs
+     * (use the `diagram:change` canvas event for those).
+     */
+    onTabChange?: (tabId: string, config: TabConfig) => void;
+    /**
+     * Called when raw source view mode is toggled on or off.
+     * Use this to disable editing UI (toolbar buttons, sidebar) while raw mode is active.
+     */
+    onRawModeChange?: (active: boolean) => void;
+    /**
+     * When true, the plugin handles file import automatically:
+     * - Creates a hidden `<input type="file">` for the "Import files" welcome screen button
+     * - Adds drag-and-drop support to the canvas container
+     * - Parses `.bpmn`, `.xml`, `.dmn`, `.form`, and `.json` files and opens them as tabs
+     *
+     * Use `tabsPlugin.api.openFilePicker()` to trigger the file picker programmatically
+     * (e.g. from a menu item). The `resolver` option must be set to register DMN/Form files.
+     */
+    enableFileImport?: boolean;
+    /**
+     * Optional element to place in the center of the tabs bar.
+     * The element is wrapped in an absolutely-centered slot so it does not
+     * interfere with tab scrolling. Typical use: process runner toolbar.
+     */
+    centerSlot?: HTMLElement;
+}
+/** A single example entry shown on the welcome screen. */
+export interface WelcomeExample {
+    label: string;
+    description?: string;
+    /** Short badge text, e.g. "BPMN", "DMN", "FORM", "MULTI". */
+    badge?: string;
+    onOpen: () => void;
+}
+/** A dynamic item inside a welcome screen section. */
+export interface WelcomeSectionItem {
+    label: string;
+    description?: string;
+    onOpen: () => void;
+}
+/** A dynamic section shown on the welcome screen, rebuilt on each show. */
+export interface WelcomeSection {
+    label: string;
+    /** Called each time the welcome screen becomes visible to get fresh items. */
+    getItems: () => WelcomeSectionItem[];
+    /** Shown when `getItems` returns an empty array. */
+    emptyText?: string;
+}
+/** Public API for the tabs plugin, accessible via `tabsPlugin.api`. */
+export interface TabsApi {
+    /** Open a new tab (or activate it if already open). Returns the tab ID. */
+    openTab(config: TabConfig): string;
+    /** Close a tab by ID. */
+    closeTab(id: string): void;
+    /** Close all open tabs immediately without a confirmation dialog. Shows the welcome screen. */
+    closeAllTabs(): void;
+    /** Activate a tab by ID. */
+    setActiveTab(id: string): void;
+    /** Get the active tab ID. */
+    getActiveTabId(): string | null;
+    /** Get all open tab IDs. */
+    getTabIds(): string[];
+    /**
+     * Open the DMN decision referenced by `decisionId` using the resolver.
+     * Shows a warning in the tab if the decision is not found.
+     */
+    openDecision(decisionId: string, resultVariable?: string): void;
+    /**
+     * Open the form referenced by `formId` using the resolver.
+     * Shows a warning in the tab if the form is not found.
+     */
+    openForm(formId: string): void;
+    /**
+     * Navigate to the BPMN tab that contains the given process ID.
+     * No-op if no open tab contains that process.
+     */
+    navigateToProcess(processId: string): void;
+    /**
+     * Get all BPMN processes tracked across open tabs.
+     * Useful for providing a process picker in the HUD toolbar.
+     */
+    getAvailableProcesses(): Array<{
+        id: string;
+        name?: string;
+    }>;
+    /**
+     * Get all DMN decisions from open DMN tabs.
+     * Useful for providing a decision picker in the HUD toolbar.
+     */
+    getAvailableDecisions(): Array<{
+        id: string;
+        name?: string;
+    }>;
+    /**
+     * Get all forms from open form tabs.
+     * Useful for providing a form picker in the HUD toolbar.
+     */
+    getAvailableForms(): Array<{
+        id: string;
+        name?: string;
+    }>;
+    /**
+     * Get serialized content for all non-FEEL open tabs.
+     * BPMN tabs return their current XML; DMN/Form tabs are serialized on demand.
+     */
+    getAllTabContent(): TabContentSnapshot[];
+    /**
+     * Re-render the welcome screen's dynamic content (recent projects, sections).
+     * Call this after async data loads to update the welcome screen if it is visible.
+     */
+    refreshWelcomeScreen(): void;
+    /**
+     * The raw mode toggle button element. Pass this to `initEditorHud` to place it
+     * in the bottom-left HUD panel instead of the tab bar.
+     */
+    rawModeButton: HTMLButtonElement | null;
+    /**
+     * Enable or disable project mode.
+     * In project mode, tabs cannot be closed by the user.
+     */
+    setProjectMode(enabled: boolean): void;
+    /**
+     * Update the display name of a tab.
+     * Used when a project file is renamed via the command palette or main menu.
+     */
+    renameTab(id: string, name: string): void;
+    /**
+     * Programmatically open the file picker dialog.
+     * Only available when `enableFileImport: true` was passed to `createTabsPlugin`.
+     * No-op otherwise.
+     */
+    openFilePicker(): void;
+    /**
+     * Enter or exit play mode. In play mode the tab groups are hidden so only
+     * the center slot (process runner controls) is visible in the tab bar.
+     */
+    setPlayMode(enabled: boolean): void;
+}
+/**
+ * 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 declare function createTabsPlugin(options?: TabsPluginOptions): CanvasPlugin & {
+    api: TabsApi;
+};
+//# sourceMappingURL=tabs-plugin.d.ts.map