@bpmnkit/plugins 0.0.8

package/dist/config-panel/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @bpmnkit/canvas-plugin-config-panel — schema-driven element config panel for
+ * `@bpmnkit/editor`.
+ *
+ * Provides a compact right-rail panel and a full 65%-overlay editor for
+ * configuring BPMN element properties. Schemas and adapters are registered by
+ * companion plugins (e.g. `@bpmnkit/canvas-plugin-config-panel-bpmn`).
+ *
+ * ## Usage
+ * ```typescript
+ * import { createConfigPanelPlugin } from "@bpmnkit/canvas-plugin-config-panel";
+ *
+ * let editorRef: BpmnEditor | null = null;
+ * const configPanel = createConfigPanelPlugin({
+ *   getDefinitions: () => editorRef?.getDefinitions() ?? null,
+ *   applyChange: (fn) => { editorRef?.applyChange(fn); },
+ * });
+ * const editor = new BpmnEditor({ container, xml, plugins: [configPanel] });
+ * editorRef = editor;
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { ConfigPanelOptions, ConfigPanelPlugin } from "./types.js";
+export type { ConfigPanelOptions, ConfigPanelPlugin, FieldSchema, FieldType, FieldValue, GroupSchema, PanelAdapter, PanelSchema, SelectOption, } from "./types.js";
+export { CONFIG_PANEL_CSS, CONFIG_PANEL_STYLE_ID, injectConfigPanelStyles } from "./css.js";
+/**
+ * Creates the config panel plugin.
+ *
+ * @param options.getDefinitions - Returns the current BpmnDefinitions (may be
+ *   null before the editor is initialized). Called lazily when the panel opens.
+ * @param options.applyChange - Applies a pure transformation to the diagram.
+ *   May reference the editor lazily via a captured reference.
+ */
+export declare function createConfigPanelPlugin(options: ConfigPanelOptions): ConfigPanelPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/config-panel/index.js

@@ -0,0 +1,73 @@
+/**
+ * @bpmnkit/canvas-plugin-config-panel — schema-driven element config panel for
+ * `@bpmnkit/editor`.
+ *
+ * Provides a compact right-rail panel and a full 65%-overlay editor for
+ * configuring BPMN element properties. Schemas and adapters are registered by
+ * companion plugins (e.g. `@bpmnkit/canvas-plugin-config-panel-bpmn`).
+ *
+ * ## Usage
+ * ```typescript
+ * import { createConfigPanelPlugin } from "@bpmnkit/canvas-plugin-config-panel";
+ *
+ * let editorRef: BpmnEditor | null = null;
+ * const configPanel = createConfigPanelPlugin({
+ *   getDefinitions: () => editorRef?.getDefinitions() ?? null,
+ *   applyChange: (fn) => { editorRef?.applyChange(fn); },
+ * });
+ * const editor = new BpmnEditor({ container, xml, plugins: [configPanel] });
+ * editorRef = editor;
+ * ```
+ *
+ * @packageDocumentation
+ */
+import { injectConfigPanelStyles } from "./css.js";
+import { ConfigPanelRenderer } from "./renderer.js";
+export { CONFIG_PANEL_CSS, CONFIG_PANEL_STYLE_ID, injectConfigPanelStyles } from "./css.js";
+// ── Factory ───────────────────────────────────────────────────────────────────
+/**
+ * Creates the config panel plugin.
+ *
+ * @param options.getDefinitions - Returns the current BpmnDefinitions (may be
+ *   null before the editor is initialized). Called lazily when the panel opens.
+ * @param options.applyChange - Applies a pure transformation to the diagram.
+ *   May reference the editor lazily via a captured reference.
+ */
+export function createConfigPanelPlugin(options) {
+    const { getDefinitions, applyChange } = options;
+    // Shared schema registry — populated before or after install via registerSchema
+    const _schemas = new Map();
+    let _renderer = null;
+    const _unsubs = [];
+    return {
+        name: "config-panel",
+        install(api) {
+            injectConfigPanelStyles();
+            _renderer = new ConfigPanelRenderer(_schemas, getDefinitions, applyChange, () => api.viewportEl, () => api.getShapes(), {
+                container: options.container,
+                onPanelShow: options.onPanelShow,
+                onPanelHide: options.onPanelHide,
+                openInPlayground: options.openInPlayground,
+                readonly: options.readonly,
+            });
+            const anyOn = api.on.bind(api);
+            _unsubs.push(anyOn("editor:select", (rawIds) => {
+                _renderer?.onSelect(rawIds, api.getShapes(), api.getEdges());
+            }));
+            _unsubs.push(anyOn("diagram:change", (rawDefs) => {
+                _renderer?.onDiagramChange(rawDefs);
+            }));
+        },
+        uninstall() {
+            for (const unsub of _unsubs)
+                unsub();
+            _unsubs.length = 0;
+            _renderer?.destroy();
+            _renderer = null;
+        },
+        registerSchema(elementType, schema, adapter) {
+            _schemas.set(elementType, { schema, adapter });
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/config-panel/renderer.d.ts

@@ -0,0 +1,127 @@
+import type { RenderedEdge, RenderedShape } from "@bpmnkit/canvas";
+import type { BpmnDefinitions } from "@bpmnkit/core";
+import type { PanelAdapter, PanelSchema } from "./types.js";
+interface Registration {
+    schema: PanelSchema;
+    adapter: PanelAdapter;
+}
+export declare class ConfigPanelRenderer {
+    private readonly _schemas;
+    private readonly _getDefinitions;
+    private readonly _applyChange;
+    private readonly _getSvgViewport;
+    private readonly _getShapes;
+    private readonly _container;
+    private readonly _onPanelShow;
+    private readonly _onPanelHide;
+    private readonly _openInPlayground;
+    private readonly _readonly;
+    private _panelEl;
+    /** SVG group appended to the canvas viewport; holds all validation badges. */
+    private _badgeContainerEl;
+    private _collapsed;
+    /** User-set panel width; persisted to localStorage. */
+    private _panelWidth;
+    /** Sub-element refs for layout toggling; reset on panel teardown. */
+    private _tabsAreaEl;
+    private _tabsScrollEl;
+    private _tabsPrevBtn;
+    private _tabsNextBtn;
+    private _bodyEl;
+    private _searchResultsEl;
+    private _searchClearBtn;
+    private _searchQuery;
+    /** Guide bar sub-element refs; reset on panel teardown. */
+    private _guideBarEl;
+    private _guideTextEl;
+    private _guideBtnEl;
+    /** Key of the field the guide is currently pointing at. */
+    private _guideCurrentKey;
+    private _guideStarted;
+    private _selectedId;
+    private _selectedType;
+    private _elementName;
+    private _activeTabId;
+    private _values;
+    /** The effective registration after optional `resolve?` override. */
+    private _effectiveReg;
+    constructor(schemas: Map<string, Registration>, getDefinitions: () => BpmnDefinitions | null, applyChange: (fn: (d: BpmnDefinitions) => BpmnDefinitions) => void, getSvgViewport?: () => SVGGElement | null, getShapes?: () => RenderedShape[], opts?: {
+        container?: HTMLElement;
+        onPanelShow?: () => void;
+        onPanelHide?: () => void;
+        openInPlayground?: (expression: string) => void;
+        readonly?: boolean;
+    });
+    onSelect(ids: string[], shapes: RenderedShape[], edges?: RenderedEdge[]): void;
+    onDiagramChange(defs: BpmnDefinitions): void;
+    destroy(): void;
+    private _refreshValues;
+    private _applyField;
+    private _close;
+    private _hidePanel;
+    /** Update all input values in-place without re-rendering (preserves focus). */
+    private _refreshInputs;
+    /**
+     * Refresh both field-level and group-level conditional visibility.
+     * Called synchronously after any value change so the UI updates immediately.
+     */
+    private _refreshConditionals;
+    /**
+     * Returns true when a field value is considered empty for validation purposes.
+     * For `feel-expression` fields, a value of just "=" (no expression body) is
+     * treated the same as empty.
+     */
+    private _isEffectivelyEmpty;
+    /**
+     * Returns an error message string when the field has a validation error, or
+     * null when the value is valid. Checks (in order):
+     * 1. Required + empty → "Required"
+     * 2. feel-expression type with FEEL parse error → error from parser
+     * 3. Custom `field.validate` callback → its return value
+     */
+    private _fieldError;
+    /** Returns true when a field has any validation error. */
+    private _fieldHasError;
+    /**
+     * Returns true when a group has at least one required, currently-visible field
+     * that is effectively empty.
+     */
+    private _groupHasErrors;
+    /** Update invalid state for all fields, tab error dots, and guide bar. */
+    private _refreshValidation;
+    /** Show/hide tabs and groups based on their conditions. */
+    private _refreshGroupVisibility;
+    private _activateTab;
+    /** Show/hide tab scroll arrow buttons based on current scroll position and overflow. */
+    private _updateTabScrollBtns;
+    /**
+     * Hide the tabs area when there are 0 or 1 visible groups — a single tab
+     * provides no navigation value and adds visual noise.
+     */
+    private _syncTabsAreaVisibility;
+    /**
+     * Renders (or removes) a small red "!" badge on each canvas shape that has
+     * at least one required config field with a missing or empty value.
+     * Badges live in a `<g>` appended to the SVG viewport group so they
+     * automatically follow pan and zoom.
+     */
+    private _updateBadges;
+    /** Returns all visible fields that have any error (missing required or invalid FEEL). */
+    private _getMissingFields;
+    /** Switches to the group's tab, scrolls the field into view, and focuses its input. */
+    private _navigateToField;
+    /** Refreshes guide bar text and visibility; hides when no required fields are missing. */
+    private _refreshGuide;
+    private _setSearch;
+    private _buildSearchResults;
+    private _showPanel;
+    private _renderField;
+    private _renderFeelExpression;
+    private _renderTextInput;
+    private _renderTextarea;
+    private _renderSelect;
+    private _renderToggle;
+    private _renderActionButton;
+}
+export {};
+//# sourceMappingURL=renderer.d.ts.map