@formicoidea/labre-framework-bpmn 0.32.0 → 0.34.1

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-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,13 +1,39 @@
-import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { ActionPlacement, type ChromeWording, type ToolbarContext } from '@formicoidea/labre-core/shared/services';
 import { type TemplateResult } from 'lit';
 export declare const bpmnPoolToolbarConfig: {
     readonly actions: [{
         id: string;
         tooltip: string;
+        tooltipWording: ChromeWording | undefined;
         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, BOARD_RESIZE_TOGGLE, 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"
@@ -23,7 +24,12 @@ const ResizeIcon = html `<svg
 function booleanToggle(id, tooltip, icon, prop) {
     return {
         id,
-        tooltip,
+        tooltip: typeof tooltip === 'string' ? tooltip : tooltip[1],
+        // The declared wording, when the caller gave one instead of a literal:
+        // `combine` resolves it against the host's catalogue and writes it over
+        // the English default above, so a playground with no catalogue reads
+        // exactly what it read before (#183).
+        tooltipWording: typeof tooltip === 'string' ? undefined : tooltip,
         icon,
         active(ctx) {
             const models = ctx.getSurfaceModelsByType(BpmnPoolElementModel);
@@ -42,9 +48,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'),
+        booleanToggle('a.toggle-resize', BOARD_RESIZE_TOGGLE, 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,
 };

package/dist/toolbar/icons.d.ts

@@ -1,15 +1,82 @@
 /** Colored BPMN glyph for the main toolbar button: a pool (green name band) with
  * a single activity inside. */
 export declare const bpmnToolbarIcon: import("lit-html").TemplateResult<2>;
+/** Export BPMN XML — a document with an arrow leaving it. */
+export declare const bpmnExportXmlIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Import BPMN XML — the export's document, with the arrow coming back IN.
+ *
+ * Deliberately the same page and the same arrow, mirrored: the two commands are
+ * one subject in two directions, and a reader who has met one should recognise
+ * the other without reading its label.
+ */
+export declare const bpmnImportXmlIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Import an SVG sketch — the import page again, with the picture frame that
+ * says "this arrives as a drawing" rather than as a process.
+ *
+ * Kept a sibling of {@link bpmnImportXmlIcon} on purpose: they are the same
+ * gesture (a file becomes a board) and the difference between them is the TIER,
+ * which is what the mountain-in-a-frame glyph is for.
+ */
+export declare const bpmnImportSvgIcon: import("lit-html").TemplateResult<2>;
 /** Start event — thin green ring. */
 export declare const bpmnStartIcon: import("lit-html").TemplateResult<2>;
 /** End event — thick red ring. */
 export declare const bpmnEndIcon: import("lit-html").TemplateResult<2>;
+/** Message start event — thin green ring, envelope inside. */
+export declare const bpmnStartMessageIcon: import("lit-html").TemplateResult<2>;
+/** Timer start event — thin green ring, clock inside (rim + two hands). */
+export declare const bpmnStartTimerIcon: import("lit-html").TemplateResult<2>;
+/** Message end event — thick red ring, envelope inside. */
+export declare const bpmnEndMessageIcon: import("lit-html").TemplateResult<2>;
+/** Terminate end event — thick red ring, solid disc inside. */
+export declare const bpmnEndTerminateIcon: import("lit-html").TemplateResult<2>;
 /** Task — rounded rectangle. */
 export declare const bpmnTaskIcon: import("lit-html").TemplateResult<2>;
+/** User task — the rectangle with a person in its top-left corner. */
+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. */
+export declare const bpmnSubProcessIcon: import("lit-html").TemplateResult<2>;
+/** Call activity — the same [+] marker, 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>;
+/** Parallel gateway — diamond with a +. */
+export declare const bpmnGatewayParallelIcon: import("lit-html").TemplateResult<2>;
+/** Data object — a page with its top-right corner turned down. */
+export declare const bpmnDataObjectIcon: import("lit-html").TemplateResult<2>;
+/** Data store — a cylinder. */
+export declare const bpmnDataStoreIcon: import("lit-html").TemplateResult<2>;
+/** Text annotation — an open bracket down the leading edge, and a note beside it. */
+export declare const bpmnTextAnnotationIcon: import("lit-html").TemplateResult<2>;
 /** Sequence flow — solid arrow with a filled head. */
 export declare const bpmnSequenceIcon: import("lit-html").TemplateResult<2>;
+/** Group — a dashed, generously rounded rectangle drawn AROUND things. */
+export declare const bpmnGroupIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Message flow — dashed line, disc at the source, open head at the target.
+ *
+ * The source terminator is drawn FILLED because that is what the canvas paints:
+ * `renderCircle` fills with the connector's `fillColor` before stroking it. The
+ * norm asks for a hollow ring, and the shared connector renderer is where that
+ * would be fixed; until then an icon promising a ring would be advertising a
+ * shape the tool does not draw.
+ */
+export declare const bpmnMessageIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Association — a dashed line with no head at either end.
+ *
+ * Same weight as the message flow's line, because on canvas it IS the same
+ * weight: both are `strokeWidth: 2`. A thinner icon would hint at a distinction
+ * the tool cannot draw (`ASSOCIATION_WIDTH` in `../consts.ts` says why).
+ */
+export declare const bpmnAssociationIcon: import("lit-html").TemplateResult<2>;
 /** Pool — rectangle with a left name band. */
 export declare const bpmnPoolIcon: import("lit-html").TemplateResult<2>;
+/** Add lane — the pool, cut in two, with a plus on the new band. */
+export declare const bpmnLaneAddIcon: import("lit-html").TemplateResult<2>;
+/** Remove lane — the same pool, with a minus on the band that goes. */
+export declare const bpmnLaneRemoveIcon: import("lit-html").TemplateResult<2>;

package/dist/toolbar/icons.js

@@ -7,6 +7,37 @@ export const bpmnToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0
   <line x1="11" y1="13" x2="11" y2="43" stroke="#262626" stroke-width="1.8"/>
   <rect x="20" y="20" width="24" height="16" rx="3.5" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
 </svg>`;
+/** Export BPMN XML — a document with an arrow leaving it. */
+export const bpmnExportXmlIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.5 3.5H7a1.5 1.5 0 0 0-1.5 1.5v14A1.5 1.5 0 0 0 7 20.5h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M13.5 3.5 18.5 8.5V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 20.5v-6M13.5 18l2.5 2.5 2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+/**
+ * Import BPMN XML — the export's document, with the arrow coming back IN.
+ *
+ * Deliberately the same page and the same arrow, mirrored: the two commands are
+ * one subject in two directions, and a reader who has met one should recognise
+ * the other without reading its label.
+ */
+export const bpmnImportXmlIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.5 3.5H7a1.5 1.5 0 0 0-1.5 1.5v14A1.5 1.5 0 0 0 7 20.5h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M13.5 3.5 18.5 8.5V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 14.5v6M13.5 17l2.5-2.5 2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+/**
+ * Import an SVG sketch — the import page again, with the picture frame that
+ * says "this arrives as a drawing" rather than as a process.
+ *
+ * Kept a sibling of {@link bpmnImportXmlIcon} on purpose: they are the same
+ * gesture (a file becomes a board) and the difference between them is the TIER,
+ * which is what the mountain-in-a-frame glyph is for.
+ */
+export const bpmnImportSvgIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="5" width="14" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
+  <path d="M3.5 13 7 9.5l3 3 2-2 3.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 14.5v6M16.5 17l2.5-2.5 2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
 /** Start event — thin green ring. */
 export const bpmnStartIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="12" cy="12" r="8" stroke="#43a06b" stroke-width="2"/>
@@ -15,22 +46,132 @@ export const bpmnStartIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24
 export const bpmnEndIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="12" cy="12" r="8" stroke="#cf5648" stroke-width="3.5"/>
 </svg>`;
+/** Message start event — thin green ring, envelope inside. */
+export const bpmnStartMessageIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="8" stroke="#43a06b" stroke-width="2"/>
+  <rect x="8" y="9.5" width="8" height="5.5" stroke="currentColor" stroke-width="1.1"/>
+  <path d="M8 9.5 L12 13 L16 9.5" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
+</svg>`;
+/** Timer start event — thin green ring, clock inside (rim + two hands). */
+export const bpmnStartTimerIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="8" stroke="#43a06b" stroke-width="2"/>
+  <circle cx="12" cy="12" r="4.2" stroke="currentColor" stroke-width="1.1"/>
+  <path d="M12 12 V8.8 M12 12 L14.2 13.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
+</svg>`;
+/** Message end event — thick red ring, envelope inside. */
+export const bpmnEndMessageIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="8" stroke="#cf5648" stroke-width="3.5"/>
+  <rect x="8.5" y="9.8" width="7" height="4.8" stroke="currentColor" stroke-width="1.1"/>
+  <path d="M8.5 9.8 L12 12.8 L15.5 9.8" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
+</svg>`;
+/** Terminate end event — thick red ring, solid disc inside. */
+export const bpmnEndTerminateIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="8" stroke="#cf5648" stroke-width="3.5"/>
+  <circle cx="12" cy="12" r="3.6" fill="currentColor"/>
+</svg>`;
 /** Task — rounded rectangle. */
 export const bpmnTaskIcon = 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"/>
 </svg>`;
+/** User task — the rectangle with a person in its top-left corner. */
+export const bpmnTaskUserIcon = 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"/>
+  <circle cx="7.4" cy="9.9" r="1.15" stroke="currentColor" stroke-width="1"/>
+  <path d="M5.7 13.3 A1.7 1.7 0 0 1 9.1 13.3" stroke="currentColor" stroke-width="1"/>
+</svg>`;
+/** Service task — the rectangle with a gear in its top-left corner. */
+export const bpmnTaskServiceIcon = 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"/>
+  <circle cx="7.6" cy="11" r="1.7" stroke="currentColor" stroke-width="1"/>
+  <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. */
+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. */
+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">
   <path d="M12 3 L21 12 L12 21 L3 12 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
   <path d="M9 9 L15 15 M15 9 L9 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
 </svg>`;
+/** Parallel gateway — diamond with a +. */
+export const bpmnGatewayParallelIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 3 L21 12 L12 21 L3 12 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+  <path d="M12 8 V16 M8 12 H16" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+</svg>`;
+/** Data object — a page with its top-right corner turned down. */
+export const bpmnDataObjectIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 3.5 H14 L18 7.5 V20.5 H6 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+  <path d="M14 3.5 V7.5 H18" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
+</svg>`;
+/** Data store — a cylinder. */
+export const bpmnDataStoreIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.5 7 V17 C4.5 18.4 8 19.5 12 19.5 C16 19.5 19.5 18.4 19.5 17 V7" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+  <ellipse cx="12" cy="7" rx="7.5" ry="2.5" stroke="currentColor" stroke-width="1.6"/>
+</svg>`;
+/** Text annotation — an open bracket down the leading edge, and a note beside it. */
+export const bpmnTextAnnotationIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9 5 H5.5 V19 H9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M11.5 9 H18.5 M11.5 12 H18.5 M11.5 15 H16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+</svg>`;
 /** Sequence flow — solid arrow with a filled head. */
 export const bpmnSequenceIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M3 12 H17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
   <path d="M15 8 L21 12 L15 16 Z" fill="currentColor"/>
 </svg>`;
+/** Group — a dashed, generously rounded rectangle drawn AROUND things. */
+export const bpmnGroupIcon = 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="5.5" width="17" height="13" rx="4" stroke="currentColor" stroke-width="1.6" stroke-dasharray="3.4 2.6"/>
+</svg>`;
+/**
+ * Message flow — dashed line, disc at the source, open head at the target.
+ *
+ * The source terminator is drawn FILLED because that is what the canvas paints:
+ * `renderCircle` fills with the connector's `fillColor` before stroking it. The
+ * norm asks for a hollow ring, and the shared connector renderer is where that
+ * would be fixed; until then an icon promising a ring would be advertising a
+ * shape the tool does not draw.
+ */
+export const bpmnMessageIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="4.8" cy="12" r="2.2" fill="currentColor"/>
+  <path d="M7.4 12 H17.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-dasharray="3 2.6"/>
+  <path d="M15.6 8.6 L20 12 L15.6 15.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+/**
+ * Association — a dashed line with no head at either end.
+ *
+ * Same weight as the message flow's line, because on canvas it IS the same
+ * weight: both are `strokeWidth: 2`. A thinner icon would hint at a distinction
+ * the tool cannot draw (`ASSOCIATION_WIDTH` in `../consts.ts` says why).
+ */
+export const bpmnAssociationIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.5 17 L20.5 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-dasharray="2.4 2.4"/>
+</svg>`;
 /** Pool — rectangle with a left name band. */
 export const bpmnPoolIcon = 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="5.5" width="17" height="13" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
   <path d="M8 5.5 V18.5" stroke="currentColor" stroke-width="1.6"/>
 </svg>`;
+/** Add lane — the pool, cut in two, with a plus on the new band. */
+export const bpmnLaneAddIcon = 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="5.5" width="17" height="13" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 5.5 V18.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 12 H20.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M14.25 13.25 V17 M12.4 15.1 H16.1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+</svg>`;
+/** Remove lane — the same pool, with a minus on the band that goes. */
+export const bpmnLaneRemoveIcon = 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="5.5" width="17" height="13" rx="1.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 5.5 V18.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M8 12 H20.5" stroke="currentColor" stroke-width="1.6"/>
+  <path d="M12.4 15.1 H16.1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+</svg>`;