@formicoidea/labre-framework-bpmn 0.23.0 → 0.23.1

package/dist/consts.d.ts

@@ -0,0 +1,42 @@
+import type { BpmnNodeKind } from '@formicoidea/labre-core/model';
+/**
+ * Visual constants for the BPMN basics. Style "C" (hybrid): spec-accurate
+ * shapes and line weights, with accent colour only on the event rings — the
+ * task and gateway stay neutral. All of these are just the creation-time
+ * defaults; every value is an editable shape property afterwards.
+ */
+/** Accent stroke for the start event (thin green ring). */
+export declare const EVENT_START = "#43a06b";
+/** Accent stroke for the end event (thick red ring). */
+export declare const EVENT_END = "#cf5648";
+/** Neutral stroke for task / gateway (matches the EDGY base shapes). */
+export declare const NEUTRAL_STROKE = "#262626";
+/** Default fill for events / task / gateway. */
+export declare const NODE_FILL = "#ffffff";
+/** BPMN line weights: thin start ring, thick end ring, regular elsewhere. */
+export declare const START_WIDTH = 2;
+export declare const END_WIDTH = 4;
+export declare const NODE_STROKE_WIDTH = 2;
+/** Task corner radius (absolute px — a lightly rounded rectangle). */
+export declare const TASK_RADIUS = 10;
+/** Inner-text font for the task label. */
+export declare const INNER_FONT_SIZE = 18;
+/** Default node sizes (model units) per kind. */
+export declare const NODE_SIZE: Record<BpmnNodeKind, {
+    w: number;
+    h: number;
+}>;
+/** Default inner text per kind (only the task carries a label). */
+export declare const NODE_LABEL: Record<BpmnNodeKind, string>;
+/** Pool (background container) defaults. */
+export declare const POOL_BAND_WIDTH = 28;
+export declare const POOL_FRAME_COLOR = "#262626";
+export declare const POOL_BAND_FILL = "#f4f4f5";
+export declare const POOL_FRAME_WIDTH = 1.5;
+export declare const POOL_NAME_FONT_SIZE = 15;
+export declare const POOL_NAME_COLOR = "#262626";
+export declare const POOL_FONT_FAMILY = "Inter, sans-serif";
+/** Sequence-flow connector preset. */
+export declare const SEQUENCE_STROKE = "#262626";
+export declare const SEQUENCE_WIDTH = 2;
+//# sourceMappingURL=consts.d.ts.map

package/{src/consts.ts → dist/consts.js}

@@ -1,12 +1,9 @@
-import type { BpmnNodeKind } from '@formicoidea/labre-core/model';
-
 /**
  * Visual constants for the BPMN basics. Style "C" (hybrid): spec-accurate
  * shapes and line weights, with accent colour only on the event rings — the
  * task and gateway stay neutral. All of these are just the creation-time
  * defaults; every value is an editable shape property afterwards.
  */
-
 /** Accent stroke for the start event (thin green ring). */
 export const EVENT_START = '#43a06b';
 /** Accent stroke for the end event (thick red ring). */
@@ -15,34 +12,28 @@ export const EVENT_END = '#cf5648';
 export const NEUTRAL_STROKE = '#262626';
 /** Default fill for events / task / gateway. */
 export const NODE_FILL = '#ffffff';
-
 /** BPMN line weights: thin start ring, thick end ring, regular elsewhere. */
 export const START_WIDTH = 2;
 export const END_WIDTH = 4;
 export const NODE_STROKE_WIDTH = 2;
-
 /** Task corner radius (absolute px — a lightly rounded rectangle). */
 export const TASK_RADIUS = 10;
-
 /** Inner-text font for the task label. */
 export const INNER_FONT_SIZE = 18;
-
 /** Default node sizes (model units) per kind. */
-export const NODE_SIZE: Record<BpmnNodeKind, { w: number; h: number }> = {
-  startEvent: { w: 56, h: 56 },
-  endEvent: { w: 56, h: 56 },
-  task: { w: 120, h: 72 },
-  gatewayExclusive: { w: 72, h: 72 },
+export const NODE_SIZE = {
+    startEvent: { w: 56, h: 56 },
+    endEvent: { w: 56, h: 56 },
+    task: { w: 120, h: 72 },
+    gatewayExclusive: { w: 72, h: 72 },
 };
-
 /** Default inner text per kind (only the task carries a label). */
-export const NODE_LABEL: Record<BpmnNodeKind, string> = {
-  startEvent: '',
-  endEvent: '',
-  task: 'Task',
-  gatewayExclusive: '',
+export const NODE_LABEL = {
+    startEvent: '',
+    endEvent: '',
+    task: 'Task',
+    gatewayExclusive: '',
 };
-
 /** Pool (background container) defaults. */
 export const POOL_BAND_WIDTH = 28;
 export const POOL_FRAME_COLOR = '#262626';
@@ -51,7 +42,7 @@ export const POOL_FRAME_WIDTH = 1.5;
 export const POOL_NAME_FONT_SIZE = 15;
 export const POOL_NAME_COLOR = '#262626';
 export const POOL_FONT_FAMILY = 'Inter, sans-serif';
-
 /** Sequence-flow connector preset. */
 export const SEQUENCE_STROKE = '#262626';
 export const SEQUENCE_WIDTH = 2;
+//# sourceMappingURL=consts.js.map

package/dist/descriptor.d.ts

@@ -0,0 +1,7 @@
+import { BpmnViewExtension } from './view.js';
+
+export declare const bpmnFramework: {
+  readonly flag: 'bpmn';
+  readonly telemetry: 'bpmn';
+  readonly viewExtension: typeof BpmnViewExtension;
+};

package/{src/descriptor.ts → dist/descriptor.js}

@@ -5,4 +5,4 @@ export const bpmnFramework = {
   flag: 'bpmn',
   telemetry: 'bpmn',
   viewExtension: BpmnViewExtension,
-} as const;
+};

package/dist/effects.d.ts

@@ -0,0 +1,10 @@
+import { EdgelessBpmnMenu } from './toolbar/bpmn-menu';
+import { EdgelessBpmnSeniorButton } from './toolbar/bpmn-senior-button';
+export declare function effects(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'edgeless-bpmn-menu': EdgelessBpmnMenu;
+        'edgeless-bpmn-senior-button': EdgelessBpmnSeniorButton;
+    }
+}
+//# sourceMappingURL=effects.d.ts.map

package/dist/effects.js

@@ -0,0 +1,7 @@
+import { EdgelessBpmnMenu } from './toolbar/bpmn-menu';
+import { EdgelessBpmnSeniorButton } from './toolbar/bpmn-senior-button';
+export function effects() {
+    customElements.define('edgeless-bpmn-menu', EdgelessBpmnMenu);
+    customElements.define('edgeless-bpmn-senior-button', EdgelessBpmnSeniorButton);
+}
+//# sourceMappingURL=effects.js.map

package/dist/element-renderer.d.ts

@@ -0,0 +1,13 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import type { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Canvas renderer for a BPMN pool: a rounded-rect frame with a vertical name
+ * band on the left (the participant name is drawn rotated, as in the spec).
+ * Drawn directly in element space; the band width and font are fixed so they
+ * stay legible at any pool size. Mirrors the other framework backgrounds.
+ */
+export declare const bpmnPool: ElementRenderer<BpmnPoolElementModel>;
+export declare const BpmnPoolRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<BpmnPoolElementModel>>;
+};
+//# sourceMappingURL=element-renderer.d.ts.map

package/dist/element-renderer.js

@@ -0,0 +1,58 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { POOL_BAND_FILL, POOL_BAND_WIDTH, POOL_FONT_FAMILY, POOL_FRAME_COLOR, POOL_FRAME_WIDTH, POOL_NAME_COLOR, POOL_NAME_FONT_SIZE, } from './consts';
+/** Trace a rounded-rectangle path (no dependency on ctx.roundRect). */
+function roundedRectPath(ctx, x, y, w, h, r) {
+    const rr = Math.min(r, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + rr, y);
+    ctx.lineTo(x + w - rr, y);
+    ctx.arcTo(x + w, y, x + w, y + rr, rr);
+    ctx.lineTo(x + w, y + h - rr);
+    ctx.arcTo(x + w, y + h, x + w - rr, y + h, rr);
+    ctx.lineTo(x + rr, y + h);
+    ctx.arcTo(x, y + h, x, y + h - rr, rr);
+    ctx.lineTo(x, y + rr);
+    ctx.arcTo(x, y, x + rr, y, rr);
+    ctx.closePath();
+}
+/**
+ * Canvas renderer for a BPMN pool: a rounded-rect frame with a vertical name
+ * band on the left (the participant name is drawn rotated, as in the spec).
+ * Drawn directly in element space; the band width and font are fixed so they
+ * stay legible at any pool size. Mirrors the other framework backgrounds.
+ */
+export const bpmnPool = (model, ctx, matrix) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
+    const band = Math.min(POOL_BAND_WIDTH, w);
+    const inset = POOL_FRAME_WIDTH / 2;
+    // Name band (left), filled.
+    ctx.fillStyle = POOL_BAND_FILL;
+    ctx.fillRect(0, 0, band, h);
+    // Frame + band divider.
+    ctx.strokeStyle = POOL_FRAME_COLOR;
+    ctx.lineWidth = POOL_FRAME_WIDTH;
+    ctx.lineJoin = 'round';
+    roundedRectPath(ctx, inset, inset, w - POOL_FRAME_WIDTH, h - POOL_FRAME_WIDTH, 6);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(band, 0);
+    ctx.lineTo(band, h);
+    ctx.stroke();
+    // Participant name, rotated to read up the band (skip when empty / too narrow).
+    if (model.name && band > 12) {
+        ctx.save();
+        ctx.translate(band / 2, h / 2);
+        ctx.rotate(-Math.PI / 2);
+        ctx.fillStyle = POOL_NAME_COLOR;
+        ctx.font = `600 ${POOL_NAME_FONT_SIZE}px ${POOL_FONT_FAMILY}`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(model.name, 0, 0);
+        ctx.restore();
+    }
+};
+export const BpmnPoolRendererExtension = ElementRendererExtension('bpmnPool', bpmnPool);
+//# sourceMappingURL=element-renderer.js.map

package/dist/element-view.d.ts

@@ -0,0 +1,22 @@
+import type { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a BPMN pool. A double-click edits the participant name in place
+ * (single field — the whole pool is the hit target). Mirrors the inline label
+ * editor used by the EDGY / Wardley backgrounds.
+ */
+export declare class BpmnPoolView extends GfxElementModelView<BpmnPoolElementModel> {
+    static type: string;
+    private _nameEditor;
+    onCreated(): void;
+    onDestroyed(): void;
+    private _onDblClick;
+    private _openEditor;
+    private _closeEditor;
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving / selecting stays available.
+ */
+export declare const BpmnPoolInteraction: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=element-view.d.ts.map

package/dist/element-view.js

@@ -0,0 +1,103 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a BPMN pool. A double-click edits the participant name in place
+ * (single field — the whole pool is the hit target). Mirrors the inline label
+ * editor used by the EDGY / Wardley backgrounds.
+ */
+export class BpmnPoolView extends GfxElementModelView {
+    constructor() {
+        super(...arguments);
+        this._nameEditor = null;
+    }
+    static { this.type = 'bpmnPool'; }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', e => this._onDblClick(e));
+    }
+    onDestroyed() {
+        this._closeEditor();
+        super.onDestroyed();
+    }
+    _onDblClick(e) {
+        if (this.model.isLocked())
+            return;
+        this._openEditor(e);
+    }
+    _openEditor(e) {
+        this._closeEditor();
+        const input = document.createElement('input');
+        input.value = String(this.model.name ?? '');
+        Object.assign(input.style, {
+            position: 'fixed',
+            left: `${e.raw.clientX}px`,
+            top: `${e.raw.clientY}px`,
+            transform: 'translate(-50%, -50%)',
+            zIndex: '10000',
+            minWidth: '140px',
+            padding: '3px 8px',
+            font: '14px Inter, sans-serif',
+            color: 'var(--affine-text-primary-color, #1f2328)',
+            background: 'var(--affine-background-overlay-panel-color, #ffffff)',
+            border: '1px solid var(--affine-primary-color, #1e96eb)',
+            borderRadius: '6px',
+            boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
+            outline: 'none',
+        });
+        document.body.append(input);
+        this._nameEditor = input;
+        // Mark "editing" so the global edgeless key handlers (delete, escape, …)
+        // don't act on the pool while the user types.
+        this.gfx.selection.set({ elements: [this.model.id], editing: true });
+        input.focus();
+        input.select();
+        const commit = () => {
+            if (this._nameEditor !== input)
+                return;
+            const value = input.value;
+            this._closeEditor();
+            this.gfx.std.store.captureSync();
+            this.gfx.std
+                .get(EdgelessCRUDIdentifier)
+                .updateElement(this.model.id, { name: value });
+        };
+        input.addEventListener('keydown', ev => {
+            ev.stopPropagation();
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                commit();
+            }
+            else if (ev.key === 'Escape') {
+                ev.preventDefault();
+                this._closeEditor();
+            }
+        });
+        input.addEventListener('blur', commit);
+    }
+    _closeEditor() {
+        if (!this._nameEditor)
+            return;
+        const input = this._nameEditor;
+        this._nameEditor = null;
+        input.remove();
+        if (this.isConnected) {
+            this.gfx.selection.set({ elements: [this.model.id], editing: false });
+        }
+    }
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving / selecting stays available.
+ */
+export const BpmnPoolInteraction = GfxViewInteractionExtension(BpmnPoolView.type, {
+    handleResize({ model }) {
+        return {
+            beforeResize({ set }) {
+                if (!model.resizeEnabled) {
+                    set({ allowedHandlers: [] });
+                }
+            },
+        };
+    },
+});
+//# sourceMappingURL=element-view.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

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

package/dist/node/node-renderer.d.ts

@@ -0,0 +1,16 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import { type BpmnNodeElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Renderer for a BPMN flow-object node. The shape body (ellipse / rounded rect
+ * / diamond) is drawn by REUSING the native shape renderer — so stroke width,
+ * colors, inner text and theme behave exactly like a native shape. Only
+ * `gatewayExclusive` is decorated: an X drawn on top in the node's (editable)
+ * stroke color. Events and task are plain native shapes.
+ *
+ * Mirrors the EDGY node renderer.
+ */
+export declare const bpmnNode: ElementRenderer<BpmnNodeElementModel>;
+export declare const BpmnNodeRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<BpmnNodeElementModel>>;
+};
+//# sourceMappingURL=node-renderer.d.ts.map

package/dist/node/node-renderer.js

@@ -0,0 +1,43 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
+import { DefaultTheme } from '@formicoidea/labre-core/model';
+/**
+ * Renderer for a BPMN flow-object node. The shape body (ellipse / rounded rect
+ * / diamond) is drawn by REUSING the native shape renderer — so stroke width,
+ * colors, inner text and theme behave exactly like a native shape. Only
+ * `gatewayExclusive` is decorated: an X drawn on top in the node's (editable)
+ * stroke color. Events and task are plain native shapes.
+ *
+ * Mirrors the EDGY node renderer.
+ */
+export const bpmnNode = (model, ctx, matrix, renderer, rc, bound) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    // Capture the element-local transform BEFORE the shape renderer mutates the
+    // matrix, so the glyph can be drawn in the same space afterwards.
+    const glyphMatrix = DOMMatrix.fromMatrix(matrix)
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy);
+    // Native shape (fill / stroke / inner text / theme handled natively).
+    shapeRenderer(model, ctx, matrix, renderer, rc, bound);
+    if (model.kind !== 'gatewayExclusive')
+        return;
+    const color = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
+    // ── Exclusive-gateway X, centred and sized to the diamond ───────────
+    const r = Math.min(w, h) * 0.2;
+    ctx.setTransform(glyphMatrix);
+    ctx.translate(cx, cy);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = Math.max(2, Math.min(w, h) * 0.06);
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    ctx.moveTo(-r, -r);
+    ctx.lineTo(r, r);
+    ctx.moveTo(-r, r);
+    ctx.lineTo(r, -r);
+    ctx.stroke();
+};
+export const BpmnNodeRendererExtension = ElementRendererExtension('bpmnNode', bpmnNode);
+//# sourceMappingURL=node-renderer.js.map

package/dist/node/node-view.d.ts

@@ -0,0 +1,17 @@
+import { type BpmnNodeElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a BPMN flow-object node. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select / connector interactions work).
+ *
+ * BPMN nodes are native shapes, so we reuse the shape inner-text editor: a
+ * double-click mounts the editable text overlay (`mountShapeTextEditor`),
+ * exactly like a native shape (used to label the task).
+ *
+ * Mirrors {@link EdgyNodeView}.
+ */
+export declare class BpmnNodeView extends GfxElementModelView<BpmnNodeElementModel> {
+    static type: string;
+    onCreated(): void;
+}
+//# sourceMappingURL=node-view.d.ts.map

package/dist/node/node-view.js

@@ -0,0 +1,28 @@
+import { mountShapeTextEditor } from '@formicoidea/labre-core/gfx/shape';
+import { ShapeElementModel, } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a BPMN flow-object node. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select / connector interactions work).
+ *
+ * BPMN nodes are native shapes, so we reuse the shape inner-text editor: a
+ * double-click mounts the editable text overlay (`mountShapeTextEditor`),
+ * exactly like a native shape (used to label the task).
+ *
+ * Mirrors {@link EdgyNodeView}.
+ */
+export class BpmnNodeView extends GfxElementModelView {
+    static { this.type = 'bpmnNode'; }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', () => {
+            const edgeless = this.std.view.getBlock(this.std.store.root.id);
+            if (edgeless &&
+                !this.model.isLocked() &&
+                this.model instanceof ShapeElementModel) {
+                mountShapeTextEditor(this.model, edgeless);
+            }
+        });
+    }
+}
+//# sourceMappingURL=node-view.js.map

package/dist/templates/index.d.ts

@@ -0,0 +1,3 @@
+import { type TemplateCategory } from '@formicoidea/labre-core/gfx/template';
+export declare const bpmnTemplateCategory: TemplateCategory;
+//# sourceMappingURL=index.d.ts.map

package/dist/templates/index.js

@@ -0,0 +1,114 @@
+import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
+import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, } from '@formicoidea/labre-core/model';
+import { END_WIDTH, EVENT_END, EVENT_START, INNER_FONT_SIZE, NEUTRAL_STROKE, NODE_FILL, NODE_SIZE, NODE_STROKE_WIDTH, SEQUENCE_STROKE, SEQUENCE_WIDTH, START_WIDTH, TASK_RADIUS, } from '../consts';
+/** One BPMN flow-object node, as a surface-element JSON entry. */
+function node(kind, x, y, text) {
+    const { w, h } = NODE_SIZE[kind];
+    const base = {
+        type: 'bpmnNode',
+        kind,
+        filled: true,
+        fillColor: NODE_FILL,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: `[${x},${y},${w},${h}]`,
+    };
+    if (kind === 'startEvent')
+        return { ...base, shapeType: 'ellipse', strokeColor: EVENT_START, strokeWidth: START_WIDTH };
+    if (kind === 'endEvent')
+        return { ...base, shapeType: 'ellipse', strokeColor: EVENT_END, strokeWidth: END_WIDTH };
+    if (kind === 'gatewayExclusive')
+        return { ...base, shapeType: 'diamond', strokeColor: NEUTRAL_STROKE, strokeWidth: NODE_STROKE_WIDTH };
+    return {
+        ...base,
+        shapeType: 'rect',
+        radius: TASK_RADIUS,
+        strokeColor: NEUTRAL_STROKE,
+        strokeWidth: NODE_STROKE_WIDTH,
+        text: surfaceText(text ?? 'Task'),
+        color: NEUTRAL_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: INNER_FONT_SIZE,
+        textAlign: 'center',
+    };
+}
+function pool(x, y, w, h, name = 'Pool') {
+    return { type: 'bpmnPool', name, xywh: `[${x},${y},${w},${h}]` };
+}
+/** A sequence-flow connector; ids are remapped on insert. */
+function seq(source, target) {
+    return {
+        type: 'connector',
+        mode: ConnectorMode.Orthogonal,
+        stroke: SEQUENCE_STROKE,
+        strokeWidth: SEQUENCE_WIDTH,
+        strokeStyle: StrokeStyle.Solid,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.Triangle,
+        source: { id: source, position: [0.5, 0.5] },
+        target: { id: target, position: [0.5, 0.5] },
+    };
+}
+/** A standalone (free) sequence-flow arrow for the prefab card. */
+function freeSeq() {
+    return {
+        type: 'connector',
+        mode: ConnectorMode.Orthogonal,
+        stroke: SEQUENCE_STROKE,
+        strokeWidth: SEQUENCE_WIDTH,
+        strokeStyle: StrokeStyle.Solid,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.Triangle,
+        source: { position: [0, 0] },
+        target: { position: [140, 0] },
+    };
+}
+const single = (el) => ({ a: el });
+const PREVIEW_ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
+const previews = {
+    process: `<svg ${PREVIEW_ATTRS} fill="none"><circle cx="16" cy="40" r="8" stroke="#43a06b" stroke-width="2"/><rect x="34" y="31" width="26" height="18" rx="3" stroke="#262626" stroke-width="1.6"/><path d="M78 31 L88 40 L78 49 L68 40 Z" stroke="#262626" stroke-width="1.4"/><path d="M73 37 L83 43 M83 37 L73 43" stroke="#262626" stroke-width="1.2"/><circle cx="118" cy="40" r="8" stroke="#cf5648" stroke-width="3"/><path d="M24 40 H34 M60 40 H68 M88 40 H110" stroke="#262626" stroke-width="1.2"/></svg>`,
+    startEvent: `<svg ${PREVIEW_ATTRS} fill="none"><circle cx="67" cy="40" r="20" stroke="#43a06b" stroke-width="3"/></svg>`,
+    endEvent: `<svg ${PREVIEW_ATTRS} fill="none"><circle cx="67" cy="40" r="20" stroke="#cf5648" stroke-width="5"/></svg>`,
+    task: `<svg ${PREVIEW_ATTRS} fill="none"><rect x="34" y="24" width="66" height="32" rx="6" stroke="#262626" stroke-width="2.4"/></svg>`,
+    gateway: `<svg ${PREVIEW_ATTRS} fill="none"><path d="M67 16 L92 40 L67 64 L42 40 Z" stroke="#262626" stroke-width="2.4" stroke-linejoin="round"/><path d="M58 31 L76 49 M76 31 L58 49" stroke="#262626" stroke-width="2.2" stroke-linecap="round"/></svg>`,
+    sequence: `<svg ${PREVIEW_ATTRS} fill="none"><path d="M24 40 H96" stroke="#262626" stroke-width="2.4" stroke-linecap="round"/><path d="M94 33 L108 40 L94 47 Z" fill="#262626"/></svg>`,
+    pool: `<svg ${PREVIEW_ATTRS} fill="none"><rect x="14" y="20" width="107" height="40" rx="3" stroke="#262626" stroke-width="2"/><path d="M30 20 V60" stroke="#262626" stroke-width="1.8"/><rect x="14" y="20" width="16" height="40" fill="#f4f4f5"/><path d="M30 20 V60" stroke="#262626" stroke-width="1.8"/></svg>`,
+};
+/** The lean BPMN basics: a simple worked process + every prefab the menu makes. */
+function bpmnTemplates() {
+    const process = {
+        pool: pool(0, 0, 640, 200, 'Process'),
+        start: node('startEvent', 40, 72),
+        task1: node('task', 116, 64, 'Submit request'),
+        gw: node('gatewayExclusive', 272, 64),
+        task2: node('task', 376, 20, 'Fulfil'),
+        task3: node('task', 376, 124, 'Reject'),
+        end: node('endEvent', 556, 72),
+        c1: seq('start', 'task1'),
+        c2: seq('task1', 'gw'),
+        c3: seq('gw', 'task2'),
+        c4: seq('gw', 'task3'),
+        c5: seq('task2', 'end'),
+        c6: seq('task3', 'end'),
+    };
+    const t = (name, preview, elements) => ({
+        name,
+        type: 'template',
+        preview,
+        content: makeTemplateSnapshot(elements, name),
+    });
+    return [
+        t('Simple process', previews.process, process),
+        t('Start event', previews.startEvent, single(node('startEvent', 0, 0))),
+        t('End event', previews.endEvent, single(node('endEvent', 0, 0))),
+        t('Task', previews.task, single(node('task', 0, 0))),
+        t('Exclusive gateway', previews.gateway, single(node('gatewayExclusive', 0, 0))),
+        t('Sequence flow', previews.sequence, single(freeSeq())),
+        t('Pool', previews.pool, single(pool(0, 0, 560, 200))),
+    ];
+}
+export const bpmnTemplateCategory = {
+    name: 'BPMN',
+    templates: bpmnTemplates(),
+};
+//# sourceMappingURL=index.js.map

package/dist/toolbar/bpmn-menu.d.ts

@@ -0,0 +1,27 @@
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { LitElement } from 'lit';
+declare const EdgelessBpmnMenu_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
+/**
+ * The popover above the toolbar for the BPMN toolbox. Items create the flow
+ * objects (native shapes, so they stay editable), the pool background, and arm
+ * the native connector tool for sequence flows. Mirrors the EDGY menu.
+ */
+export declare class EdgelessBpmnMenu extends EdgelessBpmnMenu_base {
+    static styles: import("lit").CSSResult;
+    type: typeof EmptyTool;
+    /** Create a flow-object node (native shape) centred on the viewport. */
+    private _createNode;
+    /** Create a pool (background container) centred on the viewport. */
+    private _createPool;
+    /**
+     * Arm the native connector tool, pre-styled for a BPMN sequence flow:
+     * orthogonal, solid, with a filled triangle head. The user then draws from
+     * one node to another (endpoints attach to centers).
+     */
+    private _activateSequenceFlow;
+    private _finish;
+    private _track;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=bpmn-menu.d.ts.map