@formicoidea/labre-framework-bpmn 0.40.0 → 0.42.0

package/dist/node/node-renderer.js

@@ -12,7 +12,6 @@ import { DefaultTheme, } from '@formicoidea/labre-core/model';
  *
  *  - events    — envelope (message), clock (timer), solid disc (terminate);
  *  - tasks     — a person (user) or a gear (service) in the top-left corner;
- *  - activity  — the `+` box at the bottom edge (sub-process, call activity);
  *  - gateway   — the X (exclusive) or the `+` (parallel);
  *  - data      — folded page, cylinder, open bracket.
  *
@@ -34,6 +33,13 @@ import { DefaultTheme, } from '@formicoidea/labre-core/model';
  *   two and the one that is legible zoomed out.
  * - The **timer** has no hour ticks and the **data store** no shelf lines: at
  *   the sizes this canvas draws them, both read as noise around the shape.
+ * - The **collapsed `[+]`** of the sub-process and the call activity is not
+ *   drawn at all. In bpmn.io that boxed plus is a BUTTON — it unfolds the
+ *   process the box stands for. Labre has no such gesture: a process defined
+ *   elsewhere is a linked document, which carries a symbol of its own. Drawn
+ *   here the marker would promise an action nothing performs, so the two kinds
+ *   are bare and the call activity is told apart by its thick border, a
+ *   creation-time preset (`CALL_ACTIVITY_WIDTH` in `consts.ts`).
  *
  * Mirrors the EDGY node renderer.
  */
@@ -41,13 +47,19 @@ import { DefaultTheme, } from '@formicoidea/labre-core/model';
  * The artefacts BPMN draws BARE — a plain native shape with nothing on it.
  * Everything else in the union is decorated here.
  *
- * `group` is bare for a different reason from the other three. They are
- * undecorated because the notation puts no marker on them; the group has a
- * distinctive look — a dashed, rounded, unfilled rectangle — and it is here
- * because that look is expressible as a native shape's own properties
- * (`strokeStyle: dash`, `radius`, `filled: false`). Drawing it by hand would
- * have meant re-implementing dashes the shape renderer already does, and losing
- * the editability that comes free with them.
+ * Three of them are here because the notation puts no marker on them at all.
+ * The other three are here for reasons of their own:
+ *
+ * - `group` has a distinctive look — a dashed, rounded, unfilled rectangle —
+ *   and it is bare because that look is expressible as a native shape's own
+ *   properties (`strokeStyle: dash`, `radius`, `filled: false`). Drawing it by
+ *   hand would have meant re-implementing dashes the shape renderer already
+ *   does, and losing the editability that comes free with them.
+ * - `subProcess` and `callActivity` do carry a marker in the notation — the
+ *   collapsed `[+]` — and Labre drops it on purpose, because here it opens
+ *   nothing (see the note on simplifications above). What tells the call
+ *   activity from the sub-process is its thick border, a creation-time preset
+ *   rather than anything drawn here.
  *
  * Written as the short list rather than the long one, so that the glyph kinds
  * are DERIVED from the model's union instead of restated beside it: a kind
@@ -61,6 +73,8 @@ const UNDECORATED_KINDS = {
     startEvent: true,
     endEvent: true,
     task: true,
+    subProcess: true,
+    callActivity: true,
     group: true,
 };
 const isUndecorated = (kind) => Object.hasOwn(UNDECORATED_KINDS, kind);
@@ -204,30 +218,6 @@ export const bpmnNode = (model, ctx, matrix, renderer, rc, bound) => {
         ctx.stroke();
         return;
     }
-    if (kind === 'subProcess' || kind === 'callActivity') {
-        // The collapsed marker: a small boxed `+` on the bottom edge, saying
-        // "there is a whole process folded up in here". The call activity carries
-        // the SAME marker — what tells the two apart is its thick border, which is
-        // a creation-time preset rather than anything drawn here.
-        const side = unit * 0.2;
-        const bx = cx;
-        const by = h - unit * 0.1 - side / 2;
-        const half = side / 2;
-        const arm = side * 0.3;
-        ctx.lineWidth = Math.max(1, unit * 0.028);
-        ctx.beginPath();
-        ctx.moveTo(bx - half, by - half);
-        ctx.lineTo(bx + half, by - half);
-        ctx.lineTo(bx + half, by + half);
-        ctx.lineTo(bx - half, by + half);
-        ctx.lineTo(bx - half, by - half);
-        ctx.moveTo(bx - arm, by);
-        ctx.lineTo(bx + arm, by);
-        ctx.moveTo(bx, by - arm);
-        ctx.lineTo(bx, by + arm);
-        ctx.stroke();
-        return;
-    }
     // ── Data and artifacts: the glyph IS the body ────────────────────────
     // The native rect under these three is unfilled and unstroked, so both the
     // fill and the outline are drawn here — off the model's own colours, which

package/dist/presets.js

@@ -29,9 +29,10 @@ export const NODE_PRESETS = {
         stroke: EVENT_END,
         width: END_WIDTH,
     },
-    // Activities: the same rounded rectangle, and a marker tells them apart —
-    // except the call activity, whose thick border IS the distinction (it carries
-    // the same `+` as the sub-process).
+    // Activities: the same rounded rectangle, and a corner marker tells the two
+    // typed tasks apart. The sub-process wears nothing (its collapsed `+` opens
+    // nothing here, so it is not drawn) and the call activity's thick border IS
+    // its distinction.
     task: {
         shapeType: 'rect',
         stroke: NEUTRAL_STROKE,

package/dist/templates/index.d.ts

@@ -1,2 +1,57 @@
 import { type TemplateCategory } from '@formicoidea/labre-core/gfx/template';
+import { type ChromeWording } from '@formicoidea/labre-core/shared/services';
+/**
+ * The seeds the two worked scenes write — declared once so the scene builder
+ * and the manifest ({@link ../translations.ts}) read the very same fallback,
+ * never a restated literal. `com.labre.bpmn.example.<scene>.<slug>`, per
+ * `docs/adr/0023`.
+ */
+export declare const SIMPLE_PROCESS_SEED: {
+    readonly poolName: {
+        readonly key: "com.labre.bpmn.example.simple-process.pool-name";
+        readonly fallback: "Process";
+    };
+    readonly submitRequest: {
+        readonly key: "com.labre.bpmn.example.simple-process.submit-request";
+        readonly fallback: "Submit request";
+    };
+    readonly fulfil: {
+        readonly key: "com.labre.bpmn.example.simple-process.fulfil";
+        readonly fallback: "Fulfil";
+    };
+    readonly reject: {
+        readonly key: "com.labre.bpmn.example.simple-process.reject";
+        readonly fallback: "Reject";
+    };
+};
+/**
+ * The two worked scenes' and the free-standing "Sequence flow" swatch's own
+ * tile names — a `nameKey` per hand-composed card, since none of the three
+ * derives from a command (`Template.nameKey`; `resolveTemplateName` checks it
+ * BEFORE `commandId`). `com.labre.bpmn.template.<slug>`, distinct from the
+ * `com.labre.bpmn.example.<scene>.*` seeds the two scenes WRITE — a tile name
+ * is chrome (re-rendered every time the panel opens), a seed is content
+ * (translated once, at insertion).
+ */
+export declare const BPMN_TEMPLATE_NAME_SIMPLE_PROCESS: ChromeWording;
+export declare const BPMN_TEMPLATE_NAME_MESSAGE_EXCHANGE: ChromeWording;
+export declare const BPMN_TEMPLATE_NAME_SEQUENCE_FLOW: ChromeWording;
+export declare const MESSAGE_EXCHANGE_SEED: {
+    readonly customer: {
+        readonly key: "com.labre.bpmn.example.message-exchange.customer";
+        readonly fallback: "Customer";
+    };
+    readonly supplier: {
+        readonly key: "com.labre.bpmn.example.message-exchange.supplier";
+        readonly fallback: "Supplier";
+    };
+    readonly placeOrder: {
+        readonly key: "com.labre.bpmn.example.message-exchange.place-order";
+        readonly fallback: "Place order";
+    };
+    readonly confirmOrder: {
+        readonly key: "com.labre.bpmn.example.message-exchange.confirm-order";
+        readonly fallback: "Confirm order";
+    };
+};
 export declare const bpmnTemplateCategory: TemplateCategory;

package/dist/templates/index.js

@@ -1,9 +1,81 @@
 import { makeTemplateSnapshot, surfaceText, templateFromCommand, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, PointStyle, StrokeStyle, } from '@formicoidea/labre-core/model';
+import { translateKey, } from '@formicoidea/labre-core/shared/services';
 import { bpmnCommands } from '../commands.js';
 import { EVENT_END, EVENT_START, GROUP_STROKE, MESSAGE_STROKE, MESSAGE_WIDTH, NEUTRAL_STROKE, NODE_SIZE, POOL_BAND_FILL, POOL_FRAME_COLOR, SEQUENCE_STROKE, SEQUENCE_WIDTH, } from '../consts.js';
 import { bpmnNodeProps, bpmnPoolProps } from '../presets.js';
 import { BPMN_ROLE } from '../roles.js';
+/**
+ * The seeds the two worked scenes write — declared once so the scene builder
+ * and the manifest ({@link ../translations.ts}) read the very same fallback,
+ * never a restated literal. `com.labre.bpmn.example.<scene>.<slug>`, per
+ * `docs/adr/0023`.
+ */
+export const SIMPLE_PROCESS_SEED = {
+    poolName: {
+        key: 'com.labre.bpmn.example.simple-process.pool-name',
+        fallback: 'Process',
+    },
+    submitRequest: {
+        key: 'com.labre.bpmn.example.simple-process.submit-request',
+        fallback: 'Submit request',
+    },
+    fulfil: {
+        key: 'com.labre.bpmn.example.simple-process.fulfil',
+        fallback: 'Fulfil',
+    },
+    reject: {
+        key: 'com.labre.bpmn.example.simple-process.reject',
+        fallback: 'Reject',
+    },
+};
+/**
+ * The two worked scenes' and the free-standing "Sequence flow" swatch's own
+ * tile names — a `nameKey` per hand-composed card, since none of the three
+ * derives from a command (`Template.nameKey`; `resolveTemplateName` checks it
+ * BEFORE `commandId`). `com.labre.bpmn.template.<slug>`, distinct from the
+ * `com.labre.bpmn.example.<scene>.*` seeds the two scenes WRITE — a tile name
+ * is chrome (re-rendered every time the panel opens), a seed is content
+ * (translated once, at insertion).
+ */
+export const BPMN_TEMPLATE_NAME_SIMPLE_PROCESS = [
+    'com.labre.bpmn.template.simple-process',
+    'Simple process',
+];
+export const BPMN_TEMPLATE_NAME_MESSAGE_EXCHANGE = [
+    'com.labre.bpmn.template.message-exchange',
+    'Message exchange',
+];
+export const BPMN_TEMPLATE_NAME_SEQUENCE_FLOW = [
+    'com.labre.bpmn.template.sequence-flow',
+    'Sequence flow',
+];
+export const MESSAGE_EXCHANGE_SEED = {
+    customer: {
+        key: 'com.labre.bpmn.example.message-exchange.customer',
+        fallback: 'Customer',
+    },
+    supplier: {
+        key: 'com.labre.bpmn.example.message-exchange.supplier',
+        fallback: 'Supplier',
+    },
+    placeOrder: {
+        key: 'com.labre.bpmn.example.message-exchange.place-order',
+        fallback: 'Place order',
+    },
+    confirmOrder: {
+        key: 'com.labre.bpmn.example.message-exchange.confirm-order',
+        fallback: 'Confirm order',
+    },
+};
+/**
+ * One seed's resolved text — the host's catalogue when `std` is a real
+ * inserting editor, the English fallback when building the module's own
+ * `content` (no editor exists yet at that point).
+ */
+function seedText(std, def) {
+    return std ? translateKey(std, def.key, def.fallback) : def.fallback;
+}
 /**
  * The BPMN palette — DERIVED from the toolbox, one template per artefact
  * command.
@@ -139,8 +211,6 @@ const taskPreview = (glyph = '', width = 2.4) => `<svg ${A} fill="none"><rect x=
 const gatewayPreview = (marker) => `<svg ${A} fill="none"><path d="M67 16 L92 40 L67 64 L42 40 Z" stroke="${NEUTRAL_STROKE}" stroke-width="2.4" stroke-linejoin="round"/><path d="${marker}" stroke="${NEUTRAL_STROKE}" stroke-width="2.2" stroke-linecap="round"/></svg>`;
 const ENVELOPE = `<rect x="59" y="35" width="16" height="11" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M59 35 L67 42 L75 35" stroke="${NEUTRAL_STROKE}" stroke-width="1.4" stroke-linejoin="round"/>`;
 const CLOCK = `<circle cx="67" cy="40" r="9" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M67 40 V33 M67 40 L72 43" stroke="${NEUTRAL_STROKE}" stroke-width="1.4" stroke-linecap="round"/>`;
-/** The collapsed `[+]`, on the activity's bottom edge — sub-process and call alike. */
-const COLLAPSED = `<rect x="61" y="44" width="12" height="12" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M67 47 V53 M64 50 H70" stroke="${NEUTRAL_STROKE}" stroke-width="1.4" stroke-linecap="round"/>`;
 const previews = {
     process: `<svg ${A} fill="none"><circle cx="16" cy="40" r="8" stroke="${EVENT_START}" stroke-width="2"/><rect x="34" y="31" width="26" height="18" rx="3" stroke="${NEUTRAL_STROKE}" stroke-width="1.6"/><path d="M78 31 L88 40 L78 49 L68 40 Z" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M73 37 L83 43 M83 37 L73 43" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/><circle cx="118" cy="40" r="8" stroke="${EVENT_END}" stroke-width="3"/><path d="M24 40 H34 M60 40 H68 M88 40 H110" stroke="${SEQUENCE_STROKE}" stroke-width="1.2"/></svg>`,
     startEvent: eventPreview(EVENT_START, 3),
@@ -152,10 +222,13 @@ const previews = {
     task: taskPreview(),
     taskUser: taskPreview(`<circle cx="41" cy="31" r="2.6" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/><path d="M37.4 38 a3.6 3.6 0 0 1 7.2 0" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/>`),
     taskService: taskPreview(`<circle cx="41" cy="32" r="3.4" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/><circle cx="41" cy="32" r="1" fill="${NEUTRAL_STROKE}"/><path d="M41 27.4 V29 M41 35 V36.6 M36.4 32 H38 M44 32 H45.6" stroke="${NEUTRAL_STROKE}" stroke-width="1.2" stroke-linecap="round"/>`),
-    subProcess: taskPreview(COLLAPSED),
+    // Neither carries the notation's collapsed `[+]`: it opens nothing in Labre
+    // and the board does not paint it, so a card that did would be advertising a
+    // drawing the command never makes.
+    subProcess: taskPreview(),
     // The thick border IS the distinction: this box stands for a process defined
     // elsewhere (`presets.ts`, `CALL_ACTIVITY_WIDTH`).
-    callActivity: taskPreview(COLLAPSED, 4.5),
+    callActivity: taskPreview('', 4.5),
     gateway: gatewayPreview('M58 31 L76 49 M76 31 L58 49'),
     gatewayParallel: gatewayPreview('M67 30 V50 M57 40 H77'),
     dataObject: `<svg ${A} fill="none"><path d="M52 14 H76 L88 26 V66 H52 Z" stroke="${NEUTRAL_STROKE}" stroke-width="2.2" stroke-linejoin="round"/><path d="M76 14 V26 H88" stroke="${NEUTRAL_STROKE}" stroke-width="1.8" stroke-linejoin="round"/></svg>`,
@@ -172,28 +245,39 @@ const previews = {
     messageExchange: `<svg ${A} fill="none"><rect x="14" y="8" width="107" height="27" rx="3" stroke="${POOL_FRAME_COLOR}" stroke-width="1.6"/><rect x="14" y="8" width="11" height="27" fill="${POOL_BAND_FILL}"/><path d="M25 8 V35" stroke="${POOL_FRAME_COLOR}" stroke-width="1.4"/><rect x="14" y="45" width="107" height="27" rx="3" stroke="${POOL_FRAME_COLOR}" stroke-width="1.6"/><rect x="14" y="45" width="11" height="27" fill="${POOL_BAND_FILL}"/><path d="M25 45 V72" stroke="${POOL_FRAME_COLOR}" stroke-width="1.4"/><circle cx="33" cy="21.5" r="4.5" stroke="${EVENT_START}" stroke-width="1.6"/><rect x="46" y="14" width="26" height="15" rx="3" stroke="${NEUTRAL_STROKE}" stroke-width="1.6"/><circle cx="88" cy="21.5" r="4.5" stroke="${EVENT_END}" stroke-width="2.6"/><rect x="46" y="51" width="26" height="15" rx="3" stroke="${NEUTRAL_STROKE}" stroke-width="1.6"/><path d="M41 21.5 H46 M72 21.5 H83" stroke="${SEQUENCE_STROKE}" stroke-width="1.4"/><circle cx="59" cy="31.5" r="2.2" fill="${MESSAGE_STROKE}"/><path d="M59 34 V48" stroke="${MESSAGE_STROKE}" stroke-width="1.4" stroke-dasharray="3 2.4"/><path d="M56 46 L59 50 L62 46" stroke="${MESSAGE_STROKE}" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
 };
 /* ── The two worked scenes ────────────────────────────────────────────────── */
-/** A hand-composed card — what is left once the artefacts are derived. */
-const scene = (name, preview, elements) => ({
+/**
+ * A hand-composed card — what is left once the artefacts are derived.
+ *
+ * `build` takes the OPTIONAL inserting editor: called with none, at module
+ * load, for the English `content`; called again with the real `std` as
+ * {@link Template.localize}, so the two builds read the very same layout and
+ * differ only in the words a seed resolves to (`docs/adr/0023`).
+ */
+const scene = (name, preview, build, nameKey) => ({
     name,
     type: 'template',
     preview,
-    content: makeTemplateSnapshot(elements, name),
+    nameKey,
+    content: makeTemplateSnapshot(build(), name),
+    localize: std => makeTemplateSnapshot(build(std), name),
 });
-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'),
-};
+function process(std) {
+    return {
+        pool: pool(0, 0, 640, 200, seedText(std, SIMPLE_PROCESS_SEED.poolName)),
+        start: node('startEvent', 40, 72),
+        task1: node('task', 116, 64, seedText(std, SIMPLE_PROCESS_SEED.submitRequest)),
+        gw: node('gatewayExclusive', 272, 64),
+        task2: node('task', 376, 20, seedText(std, SIMPLE_PROCESS_SEED.fulfil)),
+        task3: node('task', 376, 124, seedText(std, SIMPLE_PROCESS_SEED.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'),
+    };
+}
 /**
  * Two participants, and the one arrow that is allowed to cross between them.
  *
@@ -216,30 +300,34 @@ const process = {
  * until this slice ran the rules over the shipped cards. The customer's process
  * now closes where it should: order placed, then done.
  */
-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'),
-    done: node('endEvent', 320, 72),
-    answer: node('taskService', 140, 304, 'Confirm order'),
-    // Inside the first participant: what happens, and in what order.
-    inside: seq('start', 'ask'),
-    closes: seq('ask', 'done'),
-    // Across the two: who told whom.
-    across: msg('ask', 'answer'),
-};
+function messageExchange(std) {
+    return {
+        customer: pool(0, 0, 640, 200, seedText(std, MESSAGE_EXCHANGE_SEED.customer)),
+        supplier: pool(0, 240, 640, 200, seedText(std, MESSAGE_EXCHANGE_SEED.supplier)),
+        start: node('startEvent', 40, 72),
+        ask: node('taskUser', 140, 64, seedText(std, MESSAGE_EXCHANGE_SEED.placeOrder)),
+        done: node('endEvent', 320, 72),
+        answer: node('taskService', 140, 304, seedText(std, MESSAGE_EXCHANGE_SEED.confirmOrder)),
+        // Inside the first participant: what happens, and in what order.
+        inside: seq('start', 'ask'),
+        closes: seq('ask', 'done'),
+        // Across the two: who told whom.
+        across: msg('ask', 'answer'),
+    };
+}
 export const bpmnTemplateCategory = {
     name: 'BPMN',
+    // Reuses the senior button's own key — see `TemplateCategory.nameKey`.
+    nameKey: 'com.labre.framework.bpmn',
     templates: [
-        scene('Simple process', previews.process, process),
-        scene('Message exchange', previews.messageExchange, messageExchange),
+        scene('Simple process', previews.process, process, BPMN_TEMPLATE_NAME_SIMPLE_PROCESS[0]),
+        scene('Message exchange', previews.messageExchange, messageExchange, BPMN_TEMPLATE_NAME_MESSAGE_EXCHANGE[0]),
         /* ── The core: a drawable process, from the first click ─────────────── */
         templateFromCommand(byId('bpmn.addStartEvent'), previews.startEvent),
         templateFromCommand(byId('bpmn.addEndEvent'), previews.endEvent),
         templateFromCommand(byId('bpmn.addTask'), previews.task),
         templateFromCommand(byId('bpmn.addExclusiveGateway'), previews.gateway),
-        scene('Sequence flow', previews.sequence, { a: freeSeq() }),
+        scene('Sequence flow', previews.sequence, () => ({ a: freeSeq() }), BPMN_TEMPLATE_NAME_SEQUENCE_FLOW[0]),
         templateFromCommand(byId('bpmn.addPool'), previews.pool),
         /* ── Activities ─────────────────────────────────────────────────────── */
         templateFromCommand(byId('bpmn.addUserTask'), previews.taskUser),

package/dist/toolbar/bpmn-senior-button.d.ts

@@ -10,6 +10,8 @@ export declare class EdgelessBpmnSeniorButton extends EdgelessBpmnSeniorButton_b
     enableActiveBackground: boolean;
     type: typeof EmptyTool;
     private _toggleMenu;
+    /** Lit while one of THIS framework's artefacts is armed. See the Wardley one. */
+    private get _armed();
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -1,7 +1,7 @@
 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 { armedArtefact, EdgelessToolbarToolMixin, } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
 import { css, html, LitElement } from 'lit';
 import { bpmnToolbarIcon } from './icons.js';
@@ -72,6 +72,10 @@ export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(SignalWat
         const menu = this.createPopper('edgeless-bpmn-menu', this);
         menu.element.edgeless = this.edgeless;
     }
+    /** Lit while one of THIS framework's artefacts is armed. See the Wardley one. */
+    get _armed() {
+        return armedArtefact(this.gfx)?.owner === 'bpmn';
+    }
     render() {
         return html `<edgeless-toolbar-button
       class="bpmn-button"
@@ -79,7 +83,7 @@ export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(SignalWat
             ? ''
             : translateKey(this.edgeless.std, 'com.labre.framework.bpmn', 'BPMN')}
       .tooltipOffset=${4}
-      .active=${!!this.popper}
+      .active=${!!this.popper || this._armed}
       @click=${this._toggleMenu}
     >
       <div class="bpmn-root">

package/dist/toolbar/config.d.ts

@@ -1,4 +1,4 @@
-import { ActionPlacement, type ChromeWording, type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { type ChromeWording, type ToolbarContext, type ToolbarModuleConfig } from '@formicoidea/labre-core/shared/services';
 import { type TemplateResult } from 'lit';
 export declare const bpmnPoolToolbarConfig: {
     readonly actions: [{
@@ -24,16 +24,27 @@ export declare const bpmnPoolToolbarConfig: {
             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;
-        };
-    }];
+    }, import("@formicoidea/labre-core/shared/services").ToolbarActionGenerator];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
 export declare const bpmnPoolToolbarExtension: import("@formicoidea/labre-core/store/index.js").ExtensionType;
+/**
+ * The pool's FLAG-GATED row: the legend and the validation dropdown, in one
+ * module because a flavour may carry exactly one (a second on the same key
+ * throws `DuplicateServiceDefinitionError` before the editor finishes setting
+ * up — the same merge C4's board makes for the same reason).
+ *
+ * `c.legend` and not `b.legend`: the toolbar sorts lexicographically by id
+ * after partitioning by placement, and `'b.add-lane' < 'b.legend' <
+ * 'b.remove-lane'` would wedge the button between the two lane gestures. `c.`
+ * puts it where it belongs — resize · add lane · remove lane · **Legend** ·
+ * Validation, with Export XML in the "⋮".
+ *
+ * Gated, because GENERATING a legend is tooling (ADR 0026, amending 0009). What
+ * the gesture already wrote is document content and keeps painting with the
+ * flag off: the box is plain shapes and text plus `bpmnNode`s the always-on
+ * renderer paints, and the pool keeps its resize handle and its lanes either
+ * way.
+ */
+export declare const bpmnPoolToolingToolbarConfig: ToolbarModuleConfig;
+export declare const bpmnPoolToolingToolbarExtension: import("@formicoidea/labre-core/store/index.js").ExtensionType;

package/dist/toolbar/config.js

@@ -1,6 +1,6 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { EdgelessCRUDIdentifier, legendToolbarAction, validationToolbarConfig, } from '@formicoidea/labre-core/blocks/surface';
 import { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
-import { ActionPlacement, BOARD_RESIZE_TOGGLE, ToolbarModuleExtension, translateKey, } from '@formicoidea/labre-core/shared/services';
+import { BOARD_RESIZE_TOGGLE, commandMoreAction, 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';
@@ -84,43 +84,6 @@ function commandAction(id, commandId, labelKey, labelFallback, icon) {
         },
     };
 }
-/**
- * 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: [
@@ -141,3 +104,40 @@ export const bpmnPoolToolbarExtension = ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:bpmnPool'),
     config: bpmnPoolToolbarConfig,
 });
+/**
+ * The pool's FLAG-GATED row: the legend and the validation dropdown, in one
+ * module because a flavour may carry exactly one (a second on the same key
+ * throws `DuplicateServiceDefinitionError` before the editor finishes setting
+ * up — the same merge C4's board makes for the same reason).
+ *
+ * `c.legend` and not `b.legend`: the toolbar sorts lexicographically by id
+ * after partitioning by placement, and `'b.add-lane' < 'b.legend' <
+ * 'b.remove-lane'` would wedge the button between the two lane gestures. `c.`
+ * puts it where it belongs — resize · add lane · remove lane · **Legend** ·
+ * Validation, with Export XML in the "⋮".
+ *
+ * Gated, because GENERATING a legend is tooling (ADR 0026, amending 0009). What
+ * the gesture already wrote is document content and keeps painting with the
+ * flag off: the box is plain shapes and text plus `bpmnNode`s the always-on
+ * renderer paints, and the pool keeps its resize handle and its lanes either
+ * way.
+ */
+export const bpmnPoolToolingToolbarConfig = {
+    actions: [
+        legendToolbarAction({
+            id: 'c.legend',
+            Model: BpmnPoolElementModel,
+            owner: 'bpmn',
+            framework: 'bpmn',
+        }),
+        // The generic dropdown, not a BPMN variant of it: the config names no
+        // framework — it reads the registered rules and profiles — so this is the
+        // very same object wardley, c4 and the context map register.
+        ...validationToolbarConfig.actions,
+    ],
+    when: bpmnPoolToolbarConfig.when,
+};
+export const bpmnPoolToolingToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('custom:affine:surface:bpmnPool'),
+    config: bpmnPoolToolingToolbarConfig,
+});

package/dist/toolbar/icons.d.ts

@@ -38,9 +38,16 @@ export declare const bpmnTaskIcon: import("lit-html").TemplateResult<2>;
 export declare const bpmnTaskUserIcon: import("lit-html").TemplateResult<2>;
 /** Service task — the rectangle with a gear in its top-left corner. */
 export declare const bpmnTaskServiceIcon: import("lit-html").TemplateResult<2>;
-/** Sub-process — the rectangle with the collapsed [+] marker on its bottom edge. */
+/**
+ * Sub-process — the plain rectangle, like the task it is drawn as.
+ *
+ * The notation puts a collapsed [+] on its bottom edge and the canvas does not
+ * paint one (see `node/node-renderer.ts`): that box is a button everywhere else
+ * and opens nothing here. A palette glyph says what lands on the board, so it
+ * has none either, and the menu label is what tells this entry from the task.
+ */
 export declare const bpmnSubProcessIcon: import("lit-html").TemplateResult<2>;
-/** Call activity — the same [+] marker, on the notation's THICKEST border. */
+/** Call activity — the same bare rectangle, on the notation's THICKEST border. */
 export declare const bpmnCallActivityIcon: import("lit-html").TemplateResult<2>;
 /** Exclusive gateway — diamond with an X. */
 export declare const bpmnGatewayIcon: import("lit-html").TemplateResult<2>;

package/dist/toolbar/icons.js

@@ -87,17 +87,20 @@ export const bpmnTaskServiceIcon = svg `<svg width="24" height="24" viewBox="0 0
   <circle cx="7.6" cy="11" r="0.5" stroke="currentColor" stroke-width="0.8"/>
   <path d="M7.6 8.9 V9.3 M7.6 12.7 V13.1 M5.5 11 H5.9 M9.3 11 H9.7 M6.1 9.5 L6.4 9.8 M8.8 12.2 L9.1 12.5 M9.1 9.5 L8.8 9.8 M6.4 12.2 L6.1 12.5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
 </svg>`;
-/** Sub-process — the rectangle with the collapsed [+] marker on its bottom edge. */
+/**
+ * Sub-process — the plain rectangle, like the task it is drawn as.
+ *
+ * The notation puts a collapsed [+] on its bottom edge and the canvas does not
+ * paint one (see `node/node-renderer.ts`): that box is a button everywhere else
+ * and opens nothing here. A palette glyph says what lands on the board, so it
+ * has none either, and the menu label is what tells this entry from the task.
+ */
 export const bpmnSubProcessIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3.5" y="6.5" width="17" height="11" rx="2.5" stroke="currentColor" stroke-width="1.6"/>
-  <rect x="9.6" y="12.6" width="4.8" height="4.8" stroke="currentColor" stroke-width="1.1"/>
-  <path d="M12 13.8 V16.2 M10.8 15 H13.2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
 </svg>`;
-/** Call activity — the same [+] marker, on the notation's THICKEST border. */
+/** Call activity — the same bare rectangle, on the notation's THICKEST border. */
 export const bpmnCallActivityIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="4" y="7" width="16" height="10" rx="2.5" stroke="currentColor" stroke-width="3"/>
-  <rect x="9.6" y="12.2" width="4.8" height="4.8" stroke="currentColor" stroke-width="1.1"/>
-  <path d="M12 13.4 V15.8 M10.8 14.6 H13.2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
 </svg>`;
 /** Exclusive gateway — diamond with an X. */
 export const bpmnGatewayIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/toolbar/palette.d.ts

@@ -0,0 +1,23 @@
+import type { FrameworkPalette, NamedPalette } from '@formicoidea/labre-core/components/color-picker';
+import type { ChromeWording } from '@formicoidea/labre-core/shared/services';
+/**
+ * The two BPMN swatches' own names, resolved by `resolvePaletteLabel`
+ * (`@labre/affine-components/color-picker`) through each swatch's own
+ * {@link NamedPalette.labelWording} — the mechanism `WARDLEY_PALETTE_WORDINGS`
+ * established, reused here without either package naming the other.
+ *
+ * Exported so `../translations.ts` can list them under source `chrome`: a
+ * swatch's name is toolbar chrome, never seeded into a document.
+ */
+export declare const BPMN_PALETTE_WORDING_START: ChromeWording;
+export declare const BPMN_PALETTE_WORDING_END: ChromeWording;
+export declare const BPMN_PALETTE_WORDINGS: readonly ChromeWording[];
+/** The two notation hues, then the neutrals every drawing needs. */
+export declare const BPMN_PALETTE_LIST: NamedPalette[];
+/**
+ * BPMN's page of the colour pickers' carousel (`docs/adr/0027`). Registered
+ * from the FLAG-GATED view extension, because offering hues is TOOLING: a
+ * process drawn while the flag was on keeps every colour it was painted with
+ * when the flag goes off (`docs/adr/0009`).
+ */
+export declare const BPMN_FRAMEWORK_PALETTE: FrameworkPalette;