@bpmnkit/plugins 0.0.8

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

@@ -0,0 +1,118 @@
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+import type { BpmnDefinitions } from "@bpmnkit/core";
+/** Input field types supported by the config panel renderer. */
+export type FieldType = "text" | "select" | "textarea" | "feel-expression" | "toggle" | "action";
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+/** Describes a single configurable field. */
+export interface FieldSchema {
+    /** Unique key used to read/write the value via the adapter. */
+    key: string;
+    label: string;
+    type: FieldType;
+    placeholder?: string;
+    /** Options for `select` fields. */
+    options?: SelectOption[];
+    /** Short hint displayed below the field. */
+    hint?: string;
+    /** Tooltip text shown on hover over the field label. */
+    tooltip?: string;
+    /** Link to external documentation. */
+    docsUrl?: string;
+    /** Mask the input (password-style) for secret values. */
+    secret?: boolean;
+    /** If true, the field is mandatory — shown with an asterisk and a red border when empty. */
+    required?: boolean;
+    /** If provided, the field is only shown when this returns true. */
+    condition?: (values: Record<string, FieldValue>) => boolean;
+    /**
+     * For `type: "action"` fields — called when the button is clicked.
+     * Receives the current field values and a `setValue` helper that updates a
+     * field in the panel and immediately writes it back to the diagram.
+     */
+    onClick?: (values: Record<string, FieldValue>, setValue: (key: string, val: FieldValue) => void) => void;
+    /**
+     * For `type: "feel-expression"` fields — when true, the field is always a
+     * FEEL expression. The FEEL/string toggle is hidden and the `=` prefix is
+     * managed automatically (not shown in the input).
+     */
+    feelFixed?: boolean;
+    /**
+     * For `type: "feel-expression"` fields — optional callback to open the
+     * expression in an external playground/editor.
+     */
+    openInPlayground?: (values: Record<string, FieldValue>) => void;
+    /**
+     * Custom validation function. Called after the built-in required/FEEL checks.
+     * Return `null` when the value is valid, or an error message string when invalid.
+     */
+    validate?: (value: FieldValue) => string | null;
+}
+/** A named group of fields shown as a section in the full editor. */
+export interface GroupSchema {
+    id: string;
+    label: string;
+    fields: FieldSchema[];
+    /** If provided, the group (and its tab) is only shown when this returns true. */
+    condition?: (values: Record<string, FieldValue>) => boolean;
+}
+/** Describes the full config panel for an element type. */
+export interface PanelSchema {
+    /** Optional link to documentation for this element type. Shown as a ? button in the panel header. */
+    docsUrl?: string;
+    /** Optional connector/template name shown in the panel header (e.g. "REST Connector"). */
+    templateName?: string;
+    /** Fields shown in the compact (right-rail) panel. */
+    compact: FieldSchema[];
+    /** All field groups shown in the full overlay editor. */
+    groups: GroupSchema[];
+}
+export type FieldValue = string | boolean | undefined;
+/** Bridges between the generic field schema and the BPMN data model. */
+export interface PanelAdapter {
+    /** Read current values for the selected element. */
+    read(defs: BpmnDefinitions, id: string): Record<string, FieldValue>;
+    /** Apply updated values and return new definitions. */
+    write(defs: BpmnDefinitions, id: string, values: Record<string, FieldValue>): BpmnDefinitions;
+    /**
+     * Optional: dynamically resolve a different schema+adapter for this specific element instance.
+     * Called on each select and diagram-change event. When it returns non-null the renderer uses
+     * the returned registration instead of the one stored in the schema registry.
+     *
+     * Typical use: detect a `zeebe:modelerTemplate` attribute and switch to the matching template
+     * schema without requiring a separate registration for every possible template.
+     */
+    resolve?(defs: BpmnDefinitions, id: string): {
+        schema: PanelSchema;
+        adapter: PanelAdapter;
+    } | null;
+}
+/** The config panel plugin — extends CanvasPlugin with a schema registration API. */
+export interface ConfigPanelPlugin extends CanvasPlugin {
+    registerSchema(elementType: string, schema: PanelSchema, adapter: PanelAdapter): void;
+}
+export interface ConfigPanelOptions {
+    getDefinitions: () => BpmnDefinitions | null;
+    applyChange: (fn: (defs: BpmnDefinitions) => BpmnDefinitions) => void;
+    /** Render into this element instead of document.body. */
+    container?: HTMLElement;
+    /** Called when an element is selected and the panel appears. */
+    onPanelShow?: () => void;
+    /** Called when the panel is hidden (element deselected). */
+    onPanelHide?: () => void;
+    /**
+     * Called when the user clicks "Open in FEEL Playground ↗" on any
+     * `feel-expression` field that is currently in FEEL mode and does not have
+     * its own `field.openInPlayground` override.
+     * Receives the expression body (without the leading `=`).
+     */
+    openInPlayground?: (expression: string) => void;
+    /**
+     * When true, all form fields are rendered in read-only / disabled state.
+     * Use this when the panel is shown purely for inspection (e.g. operate views).
+     */
+    readonly?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/config-panel/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,58 @@
+/**
+ * @bpmnkit/canvas-plugin-config-panel-bpmn — BPMN element schemas for the
+ * config panel plugin.
+ *
+ * Registers config panel schemas for all standard BPMN element types. For
+ * service tasks the panel is template-aware: when `zeebe:modelerTemplate` is
+ * set on an element the matching template's property form is shown instead of
+ * the generic connector selector.
+ *
+ * ## Usage
+ * ```typescript
+ * import { createConfigPanelPlugin } from "@bpmnkit/canvas-plugin-config-panel";
+ * import { createConfigPanelBpmnPlugin } from "@bpmnkit/canvas-plugin-config-panel-bpmn";
+ *
+ * let editorRef: BpmnEditor | null = null;
+ * const configPanel = createConfigPanelPlugin({
+ *   getDefinitions: () => editorRef?.getDefinitions() ?? null,
+ *   applyChange: (fn) => { editorRef?.applyChange(fn); },
+ * });
+ * const configPanelBpmn = createConfigPanelBpmnPlugin(configPanel);
+ * const editor = new BpmnEditor({ container, xml, plugins: [configPanel, configPanelBpmn] });
+ * editorRef = editor;
+ * ```
+ *
+ * @packageDocumentation
+ */
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+import { ELEMENT_TYPE_LABELS } from "@bpmnkit/editor";
+import type { ConfigPanelPlugin } from "../config-panel/index.js";
+import type { ElementTemplate } from "./template-types.js";
+export { CAMUNDA_CONNECTOR_TEMPLATES } from "./templates/generated.js";
+export { templateToServiceTaskOptions } from "./template-to-service-task.js";
+export interface ConfigPanelBpmnOptions {
+    /**
+     * Called when the user clicks "Open in FEEL Playground ↗" in a FEEL expression field.
+     * Typically implemented by calling `tabsPlugin.api.openTab({ type: "feel", ... })`.
+     */
+    openFeelPlayground?: (expression: string) => void;
+}
+/**
+ * Creates the BPMN config panel extension plugin.
+ *
+ * Registers property schemas for all standard BPMN element types. Service tasks
+ * are template-aware: when `zeebe:modelerTemplate` is set the matching
+ * connector template form is rendered; otherwise a generic connector selector
+ * is shown. Custom templates can be registered via `registerTemplate`.
+ *
+ * @param configPanel - The base config panel plugin returned by
+ *   `createConfigPanelPlugin`.
+ * @param options - Optional callbacks for FEEL playground navigation.
+ */
+export declare function createConfigPanelBpmnPlugin(configPanel: ConfigPanelPlugin, options?: ConfigPanelBpmnOptions): CanvasPlugin & {
+    /** Register an additional element template to make it available in the UI. */
+    registerTemplate(template: ElementTemplate): void;
+};
+export { ELEMENT_TYPE_LABELS };
+export type { ElementTemplate };
+//# sourceMappingURL=index.d.ts.map