@formicoidea/labre-framework-bpmn 0.31.0 → 0.33.0

package/dist/templates/index.js

@@ -1,12 +1,27 @@
 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.js';
-/** One BPMN flow-object node, as a surface-element JSON entry. */
+import { END_WIDTH, EVENT_END, EVENT_START, INNER_FONT_SIZE, MESSAGE_STROKE, MESSAGE_WIDTH, NEUTRAL_STROKE, NODE_FILL, NODE_SIZE, NODE_STROKE_WIDTH, SEQUENCE_STROKE, SEQUENCE_WIDTH, START_WIDTH, TASK_RADIUS, } from '../consts.js';
+import { BPMN_ROLE, BPMN_ROLE_OF_KIND } from '../roles.js';
+/**
+ * One BPMN flow-object node, as a surface-element JSON entry.
+ *
+ * Every kind that {@link NodeKind} admits paints its own body natively, as an
+ * ellipse, a rounded rect or a diamond. The GLYPH-BODIED kinds (`dataObject`,
+ * `dataStore`, `textAnnotation`) do not: they are created unfilled and
+ * unstroked and the renderer draws their silhouette, so a card that spelled one
+ * out here would insert an invisible rectangle. `group` is out for a neighbouring
+ * reason — it is `hollow`, and the branches below all fill. When any of them
+ * earns a card, this helper reads `NODE_PRESETS` instead of branching.
+ */
 function node(kind, x, y, text) {
     const { w, h } = NODE_SIZE[kind];
     const base = {
         type: 'bpmnNode',
         kind,
+        // A template must produce the same typed artefacts as the toolbox, or a
+        // process started from a preset would read differently from a hand-drawn
+        // one.
+        role: BPMN_ROLE_OF_KIND[kind],
         filled: true,
         fillColor: NODE_FILL,
         shapeStyle: ShapeStyle.General,
@@ -14,11 +29,26 @@ function node(kind, x, y, text) {
         xywh: `[${x},${y},${w},${h}]`,
     };
     if (kind === 'startEvent')
-        return { ...base, shapeType: 'ellipse', strokeColor: EVENT_START, strokeWidth: START_WIDTH };
+        return {
+            ...base,
+            shapeType: 'ellipse',
+            strokeColor: EVENT_START,
+            strokeWidth: START_WIDTH,
+        };
     if (kind === 'endEvent')
-        return { ...base, shapeType: 'ellipse', strokeColor: EVENT_END, strokeWidth: END_WIDTH };
+        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: 'diamond',
+            strokeColor: NEUTRAL_STROKE,
+            strokeWidth: NODE_STROKE_WIDTH,
+        };
     return {
         ...base,
         shapeType: 'rect',
@@ -33,12 +63,21 @@ function node(kind, x, y, text) {
     };
 }
 function pool(x, y, w, h, name = 'Pool') {
-    return { type: 'bpmnPool', name, xywh: `[${x},${y},${w},${h}]` };
+    return {
+        type: 'bpmnPool',
+        role: BPMN_ROLE.pool,
+        name,
+        xywh: `[${x},${y},${w},${h}]`,
+    };
 }
 /** A sequence-flow connector; ids are remapped on insert. */
 function seq(source, target) {
     return {
         type: 'connector',
+        // Both ends are BOUND, so this arrow relates two named things and its
+        // direction is a claim the template makes: source first, target next
+        // (`docs/adr/0010`).
+        role: BPMN_ROLE.sequenceFlow,
         mode: ConnectorMode.Orthogonal,
         stroke: SEQUENCE_STROKE,
         strokeWidth: SEQUENCE_WIDTH,
@@ -49,7 +88,40 @@ function seq(source, target) {
         target: { id: target, position: [0.5, 0.5] },
     };
 }
-/** A standalone (free) sequence-flow arrow for the prefab card. */
+/**
+ * A message-flow connector; ids are remapped on insert.
+ *
+ * The same shape as {@link seq} and the same claim — both ends are BOUND, so
+ * the arrow relates two named things — but a different sentence: "sends a
+ * message to", from the participant that sends to the one that receives
+ * (`docs/adr/0010`). Its style is the one `activateBpmnMessageFlow` arms the
+ * connector tool with, so a message flow dropped from this card and one drawn
+ * by hand are indistinguishable in the document.
+ */
+function msg(source, target) {
+    return {
+        type: 'connector',
+        role: BPMN_ROLE.messageFlow,
+        mode: ConnectorMode.Orthogonal,
+        stroke: MESSAGE_STROKE,
+        strokeWidth: MESSAGE_WIDTH,
+        strokeStyle: StrokeStyle.Dash,
+        frontEndpointStyle: PointStyle.Circle,
+        rearEndpointStyle: PointStyle.Arrow,
+        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.
+ *
+ * NEUTRAL on purpose (`docs/adr/0010` § Compatibility, and the same call the
+ * Wardley "Link" swatch makes): this is a horizontal stroke bound to nothing —
+ * a sample of a STYLE, in a palette. A typed edge claims "this is followed by
+ * that", and a stroke attached to neither end has no this and no that to say it
+ * about. Drawing it with the sequence-flow tool, or dropping this one and then
+ * attaching both of its ends, is what makes it a statement.
+ */
 function freeSeq() {
     return {
         type: 'connector',
@@ -63,7 +135,9 @@ function freeSeq() {
         target: { position: [140, 0] },
     };
 }
-const single = (el) => ({ a: el });
+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>`,
@@ -73,8 +147,17 @@ const previews = {
     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>`,
+    // Two participants stacked, and the dashed line between them is the whole
+    // point of the card: a message flow is the one arrow that crosses a pool.
+    // Its source terminator is a FILLED disc, matching what `renderCircle`
+    // actually paints rather than the hollow ring the norm asks for — a preview
+    // has one job, which is to look like what lands on the board.
+    messageExchange: `<svg ${PREVIEW_ATTRS} fill="none"><rect x="14" y="8" width="107" height="27" rx="3" stroke="#262626" stroke-width="1.6"/><rect x="14" y="8" width="11" height="27" fill="#f4f4f5"/><path d="M25 8 V35" stroke="#262626" stroke-width="1.4"/><rect x="14" y="45" width="107" height="27" rx="3" stroke="#262626" stroke-width="1.6"/><rect x="14" y="45" width="11" height="27" fill="#f4f4f5"/><path d="M25 45 V72" stroke="#262626" stroke-width="1.4"/><circle cx="36" cy="21.5" r="4.5" stroke="#43a06b" stroke-width="1.6"/><rect x="52" y="14" width="30" height="15" rx="3" stroke="#262626" stroke-width="1.6"/><rect x="52" y="51" width="30" height="15" rx="3" stroke="#262626" stroke-width="1.6"/><path d="M45 21.5 H52" stroke="#262626" stroke-width="1.4"/><circle cx="67" cy="31.5" r="2.2" fill="#262626"/><path d="M67 34 V48" stroke="#262626" stroke-width="1.4" stroke-dasharray="3 2.4"/><path d="M64 46 L67 50 L70 46" stroke="#262626" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
 };
-/** The lean BPMN basics: a simple worked process + every prefab the menu makes. */
+/**
+ * The BPMN basics: two worked scenes — a process end to end and a two-party
+ * message exchange — plus a prefab for each of the lean artefacts.
+ */
 function bpmnTemplates() {
     const process = {
         pool: pool(0, 0, 640, 200, 'Process'),
@@ -91,6 +174,29 @@ function bpmnTemplates() {
         c5: seq('task2', 'end'),
         c6: seq('task3', 'end'),
     };
+    /**
+     * Two participants, and the one arrow that is allowed to cross between them.
+     *
+     * The card exists because the message flow is the piece of BPMN people get
+     * wrong first: a sequence flow may never leave its pool, and the thing that
+     * does leave is a different statement with a different line. Laying the two
+     * pools out one above the other and drawing both flows once is the shortest
+     * way to show that — the solid arrow stays home, the dashed one crosses.
+     *
+     * Stacked vertically with a 40-unit gutter, so the message flow is a straight
+     * orthogonal drop between two tasks that already line up.
+     */
+    const messageExchange = {
+        customer: pool(0, 0, 640, 200, 'Customer'),
+        supplier: pool(0, 240, 640, 200, 'Supplier'),
+        start: node('startEvent', 40, 72),
+        ask: node('taskUser', 140, 64, 'Place order'),
+        answer: node('taskService', 140, 304, 'Confirm order'),
+        // Inside the first participant: what happens, and in what order.
+        inside: seq('start', 'ask'),
+        // Across the two: who told whom.
+        across: msg('ask', 'answer'),
+    };
     const t = (name, preview, elements) => ({
         name,
         type: 'template',
@@ -99,6 +205,7 @@ function bpmnTemplates() {
     });
     return [
         t('Simple process', previews.process, process),
+        t('Message exchange', previews.messageExchange, messageExchange),
         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))),

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

@@ -1,26 +1,11 @@
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { LitElement } from 'lit';
-declare const EdgelessBpmnMenu_base: typeof LitElement & import("@formicoidea/labre-core/_pkgs/global/utils").Constructor<import("@formicoidea/labre-core/_pkgs/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
+import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 /**
- * 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.
+ * The popover above the toolbar for the BPMN toolbox. Since PF3 it declares
+ * nothing: {@link EdgelessCommandMenu} renders `bpmnCommands` for the
+ * `senior-menu` surface (`docs/adr/0008`).
  */
-export declare class EdgelessBpmnMenu extends EdgelessBpmnMenu_base {
-    static styles: import("lit").CSSResult;
+export declare class EdgelessBpmnMenu extends EdgelessCommandMenu {
+    protected owner: "bpmn";
     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 {};

package/dist/toolbar/bpmn-menu.js

@@ -1,181 +1,14 @@
-import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
-import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextFitMode, } from '@formicoidea/labre-core/model';
-import { EditPropsStore, TelemetryProvider, } from '@formicoidea/labre-core/shared/services';
-import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { css, html, LitElement } from 'lit';
-import { EVENT_END, EVENT_START, END_WIDTH, INNER_FONT_SIZE, NEUTRAL_STROKE, NODE_FILL, NODE_LABEL, NODE_SIZE, NODE_STROKE_WIDTH, SEQUENCE_STROKE, SEQUENCE_WIDTH, START_WIDTH, TASK_RADIUS, } from '../consts.js';
-import { bpmnEndIcon, bpmnGatewayIcon, bpmnPoolIcon, bpmnSequenceIcon, bpmnStartIcon, bpmnTaskIcon, } from './icons.js';
-/** Per-kind native shape + accent presets (style C). */
-const NODE_PRESETS = {
-    startEvent: { shapeType: 'ellipse', stroke: EVENT_START, width: START_WIDTH },
-    endEvent: { shapeType: 'ellipse', stroke: EVENT_END, width: END_WIDTH },
-    task: { shapeType: 'rect', stroke: NEUTRAL_STROKE, width: NODE_STROKE_WIDTH },
-    gatewayExclusive: {
-        shapeType: 'diamond',
-        stroke: NEUTRAL_STROKE,
-        width: NODE_STROKE_WIDTH,
-    },
-};
+import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 /**
- * 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.
+ * The popover above the toolbar for the BPMN toolbox. Since PF3 it declares
+ * nothing: {@link EdgelessCommandMenu} renders `bpmnCommands` for the
+ * `senior-menu` surface (`docs/adr/0008`).
  */
-export class EdgelessBpmnMenu extends EdgelessToolbarToolMixin(LitElement) {
+export class EdgelessBpmnMenu extends EdgelessCommandMenu {
     constructor() {
         super(...arguments);
+        this.owner = 'bpmn';
         this.type = EmptyTool;
     }
-    static { this.styles = css `
-    :host {
-      display: flex;
-      z-index: -1;
-      justify-content: center;
-    }
-    .menu-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .button-group-container {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      fill: var(--affine-icon-color);
-    }
-    .button-group-container svg {
-      width: 24px;
-      height: 24px;
-    }
-  `; }
-    /** Create a flow-object node (native shape) centred on the viewport. */
-    _createNode(kind) {
-        const surface = this.gfx.surface;
-        if (!surface)
-            return;
-        const { w, h } = NODE_SIZE[kind];
-        const { centerX: cx, centerY: cy } = this.gfx.viewport;
-        const preset = NODE_PRESETS[kind];
-        const id = surface.addElement({
-            type: 'bpmnNode',
-            kind,
-            shapeType: preset.shapeType,
-            filled: true,
-            fillColor: NODE_FILL,
-            strokeColor: preset.stroke,
-            strokeWidth: preset.width,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-            radius: kind === 'task' ? TASK_RADIUS : 0,
-            text: NODE_LABEL[kind] || undefined,
-            color: NEUTRAL_STROKE,
-            fontFamily: FontFamily.Inter,
-            fontSize: INNER_FONT_SIZE,
-            textAlign: 'center',
-            // BPMN symbols have normative sizes: a long label overflows rather
-            // than deforming the node
-            textFitMode: TextFitMode.Overflow,
-            xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
-        });
-        this._track('FrameworkElementAdded', `node:${kind}`);
-        this._finish(id);
-    }
-    /** Create a pool (background container) centred on the viewport. */
-    _createPool() {
-        const surface = this.gfx.surface;
-        if (!surface)
-            return;
-        const w = 560;
-        const h = 200;
-        const { centerX: cx, centerY: cy } = this.gfx.viewport;
-        const id = surface.addElement({
-            type: 'bpmnPool',
-            xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
-        });
-        this._track('FrameworkElementAdded', 'pool');
-        this._finish(id);
-    }
-    /**
-     * 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).
-     */
-    _activateSequenceFlow() {
-        this.edgeless.std.get(EditPropsStore).recordLastProps('connector', {
-            mode: ConnectorMode.Orthogonal,
-            stroke: SEQUENCE_STROKE,
-            strokeStyle: StrokeStyle.Solid,
-            strokeWidth: SEQUENCE_WIDTH,
-            frontEndpointStyle: PointStyle.None,
-            rearEndpointStyle: PointStyle.Triangle,
-        });
-        this._track('FrameworkToolPicked', 'connector:sequence');
-        this.gfx.tool.setTool(ConnectorTool, { mode: ConnectorMode.Orthogonal });
-        // Keep the palette open (native sub-menu behaviour).
-    }
-    _finish(id) {
-        const { gfx } = this;
-        gfx.doc.captureSync();
-        gfx.tool.setTool(DefaultTool);
-        gfx.selection.set({ elements: [id], editing: false });
-        // Keep the palette open (native sub-menu behaviour).
-    }
-    _track(event, element) {
-        this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
-            framework: 'bpmn',
-            element,
-            page: 'whiteboard editor',
-            segment: 'bpmn toolbox',
-            module: 'bpmn menu',
-        });
-    }
-    render() {
-        return html `
-      <edgeless-slide-menu>
-        <div class="menu-content">
-          <div class="button-group-container">
-            <edgeless-tool-icon-button
-              .tooltip=${'Start event'}
-              @click=${() => this._createNode('startEvent')}
-            >
-              ${bpmnStartIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'End event'}
-              @click=${() => this._createNode('endEvent')}
-            >
-              ${bpmnEndIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Task'}
-              @click=${() => this._createNode('task')}
-            >
-              ${bpmnTaskIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Exclusive gateway'}
-              @click=${() => this._createNode('gatewayExclusive')}
-            >
-              ${bpmnGatewayIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Sequence flow'}
-              @click=${this._activateSequenceFlow}
-            >
-              ${bpmnSequenceIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Pool'}
-              @click=${this._createPool}
-            >
-              ${bpmnPoolIcon}
-            </edgeless-tool-icon-button>
-          </div>
-        </div>
-      </edgeless-slide-menu>
-    `;
-    }
 }

package/dist/toolbar/bpmn-senior-button.js

@@ -1,5 +1,6 @@
 import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { translateKey } from '@formicoidea/labre-core/shared/services';
 import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
 import { css, html, LitElement } from 'lit';
@@ -44,7 +45,10 @@ export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(SignalWat
       translate: var(--active-x, 0) var(--active-y, 0);
       rotate: var(--active-r, -2deg);
       scale: var(--active-s, 1);
-      transition: transform 0.3s ease, translate 0.3s ease, rotate 0.3s ease,
+      transition:
+        transform 0.3s ease,
+        translate 0.3s ease,
+        rotate 0.3s ease,
         scale 0.3s ease;
     }
     .bpmn-card svg {
@@ -71,7 +75,9 @@ export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(SignalWat
     render() {
         return html `<edgeless-toolbar-button
       class="bpmn-button"
-      .tooltip=${this.popper ? '' : 'BPMN'}
+      .tooltip=${this.popper
+            ? ''
+            : translateKey(this.edgeless.std, 'com.labre.framework.bpmn', 'BPMN')}
       .tooltipOffset=${4}
       .active=${!!this.popper}
       @click=${this._toggleMenu}

package/dist/toolbar/config.d.ts

@@ -1,4 +1,4 @@
-import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { ActionPlacement, type ToolbarContext } from '@formicoidea/labre-core/shared/services';
 import { type TemplateResult } from 'lit';
 export declare const bpmnPoolToolbarConfig: {
     readonly actions: [{
@@ -7,7 +7,32 @@ export declare const bpmnPoolToolbarConfig: {
         icon: TemplateResult;
         active(ctx: ToolbarContext): boolean;
         run(ctx: ToolbarContext): void;
+    }, {
+        id: string;
+        when: (ctx: ToolbarContext) => boolean;
+        generate: (ctx: ToolbarContext) => {
+            icon: TemplateResult;
+            tooltip: string;
+            run: (runCtx: ToolbarContext) => void;
+        };
+    }, {
+        id: string;
+        when: (ctx: ToolbarContext) => boolean;
+        generate: (ctx: ToolbarContext) => {
+            icon: TemplateResult;
+            tooltip: string;
+            run: (runCtx: ToolbarContext) => void;
+        };
+    }, {
+        id: string;
+        placement: ActionPlacement;
+        when: (ctx: ToolbarContext) => boolean;
+        generate: (ctx: ToolbarContext) => {
+            icon: TemplateResult;
+            label: string;
+            run: (runCtx: ToolbarContext) => void;
+        };
     }];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
-export declare const bpmnPoolToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+export declare const bpmnPoolToolbarExtension: import("@formicoidea/labre-core/store/index.js").ExtensionType;

package/dist/toolbar/config.js

@@ -1,8 +1,9 @@
 import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
 import { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
-import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
-import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { ActionPlacement, ToolbarModuleExtension, translateKey, } from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier, getRegisteredCommands, runCommand, } from '@formicoidea/labre-core/std';
 import { html } from 'lit';
+import { bpmnExportXmlIcon, bpmnLaneAddIcon, bpmnLaneRemoveIcon, } from './icons.js';
 const ResizeIcon = html `<svg
   width="24"
   height="24"
@@ -42,9 +43,92 @@ function booleanToggle(id, tooltip, icon, prop) {
         },
     };
 }
+/**
+ * A toolbar entry that INVOKES a registered command instead of restating what
+ * it does — the shape `docs/adr/0010` M3 introduced for the typed-edge
+ * inversion, and the reason a lane gesture has one behaviour, one availability
+ * rule and one telemetry emission whether it is reached from here, from the
+ * palette, from Settings › Shortcuts or from the agent.
+ *
+ * `generate` rather than a static entry because the i18n seam needs `std`:
+ * `translateKey` is what reaches the host's catalogue, and a hard-coded English
+ * tooltip would be the one wording a host could not override.
+ */
+function commandAction(id, commandId, labelKey, labelFallback, icon) {
+    return {
+        id,
+        when: (ctx) => {
+            const command = findCommand(ctx, commandId);
+            return command !== undefined && (command.when?.(ctx.std) ?? true);
+        },
+        generate: (ctx) => {
+            const label = translateKey(ctx.std, labelKey, labelFallback);
+            return {
+                icon,
+                tooltip: label,
+                run: (runCtx) => {
+                    const command = findCommand(runCtx, commandId);
+                    if (!command)
+                        return;
+                    runCommand(runCtx.std, command, {
+                        surface: 'contextual-toolbar',
+                        source: 'toolbar:general',
+                    });
+                },
+            };
+        },
+    };
+}
+/**
+ * The same thing, for the "⋮" menu instead of the row.
+ *
+ * Two differences, and the widget imposes both: a menu line is drawn from
+ * `label` (a tooltip on a line that is already words would be a second copy of
+ * them), and `placement: ActionPlacement.More` is what partitions it out of the
+ * row in the first place — `renderToolbar` splits on exactly that flag, and the
+ * entries it collects come from every module contributing to the element,
+ * so a framework can add to the "⋮" without owning it.
+ */
+function commandMoreAction(id, commandId, labelKey, labelFallback, icon) {
+    return {
+        id,
+        placement: ActionPlacement.More,
+        when: (ctx) => {
+            const command = findCommand(ctx, commandId);
+            return command !== undefined && (command.when?.(ctx.std) ?? true);
+        },
+        generate: (ctx) => ({
+            icon,
+            label: translateKey(ctx.std, labelKey, labelFallback),
+            run: (runCtx) => {
+                const command = findCommand(runCtx, commandId);
+                if (!command)
+                    return;
+                // The same `source` the row's own entries report: the "⋮" is a
+                // degradation of the row, not a surface of its own, and the
+                // `ElementCreationSource` union deliberately names places rather than
+                // widths (`docs/adr/0008`).
+                runCommand(runCtx.std, command, {
+                    surface: 'contextual-toolbar',
+                    source: 'toolbar:general',
+                });
+            },
+        }),
+    };
+}
+const findCommand = (ctx, id) => getRegisteredCommands(ctx.std).find(candidate => candidate.id === id);
 export const bpmnPoolToolbarConfig = {
     actions: [
         booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
+        // The two lane gestures, next to the resize toggle: everything on this row
+        // is about the SHAPE of the pool rather than about what is drawn in it.
+        // Add before remove, because that is the order they can be used in — a pool
+        // has no lane to remove until one has been added.
+        commandAction('b.add-lane', 'bpmn.addLane', 'com.labre.commands.bpmn.addLane', 'Add lane', bpmnLaneAddIcon),
+        commandAction('b.remove-lane', 'bpmn.removeLane', 'com.labre.commands.bpmn.removeLane', 'Remove lane', bpmnLaneRemoveIcon),
+        // …and, in the "⋮", the one thing you do to a finished process rather than
+        // to the shape of a pool: take it away as a file.
+        commandMoreAction('z.export-xml', 'bpmn.exportXml', 'com.labre.commands.bpmn.exportXml', 'Export BPMN XML', bpmnExportXmlIcon),
     ],
     when: ctx => ctx.getSurfaceModelsByType(BpmnPoolElementModel).length > 0,
 };