@formicoidea/labre-framework-bpmn 0.58.0 → 0.60.0

package/dist/element-renderer.js

@@ -1,16 +1,80 @@
-import { createFrameworkBackgroundRenderer, ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { backgroundInstanceZones, backgroundPlot, createFrameworkBackgroundRenderer, ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
 import { BPMN_POOL_BACKGROUND } from './background.js';
+import { bpmnPoolLayout, cachePaintedBands } from './pool-hit.js';
 /**
- * Canvas renderer for the BPMN pool.
+ * The pool as the framework-background primitive paints it.
  *
  * There is no BPMN drawing code any more: the pool is an INSTANTIATION of the
  * framework-background primitive, configured by the `BPMN_POOL_BACKGROUND`
  * declaration. What used to be ninety lines of hand-traced rounded rectangle,
  * filled band and rotated name is now a declaration any other framework can
  * write for itself.
+ */
+const paintPool = createFrameworkBackgroundRenderer(BPMN_POOL_BACKGROUND, {
+    // The model cannot measure text, so picking would select by the DECLARED
+    // band widths while a long name paints them wider. Cache what was painted
+    // on the model's `@local()` `paintedBands` (never stored), and only when
+    // it changed: a local write is an `elementUpdated`, which repaints. The
+    // view writes the same cache before any paint (`element-view.ts`).
+    onBands: (model, layout) => {
+        cachePaintedBands(model, layout);
+    },
+});
+/** Width of the focused lane's outline, in model units. */
+const FOCUS_OUTLINE_WIDTH = 2;
+/**
+ * Canvas renderer for the BPMN pool: the declared background, then the outline
+ * of the FOCUSED lane, if this editor has one (`BpmnLaneFocusHolder`, held by
+ * the pool's view and never stored).
+ *
+ * The outline is the editor talking about the drawing — "this is the lane the
+ * reorder commands will move" — not part of it, so it is the theme's accent
+ * (`--affine-primary-color`, resolved through the renderer) rather than a
+ * notation colour. It is painted only onto the editor's OWN canvases: the SVG
+ * and PNG exports paint through this same renderer into a context of their
+ * own, and a file must not carry an on-screen focus. A renderer with no editor
+ * behind it (a bare unit test) paints none either, and a host that defines no
+ * accent gets none.
+ *
+ * Painted in the transform the primitive left on the context — element-local
+ * units, rotated about the centre like the rest of the pool.
  *
  * Exported as a function as well as an extension because the fidelity suite
  * drives it directly with a canvas stub.
  */
-export const bpmnPool = createFrameworkBackgroundRenderer(BPMN_POOL_BACKGROUND);
+export const bpmnPool = (model, ctx, matrix, renderer, rc, viewportBound) => {
+    paintPool(model, ctx, matrix, renderer, rc, viewportBound);
+    const canvas = renderer;
+    if (!canvas?.std)
+        return;
+    const onScreen = ctx.canvas === canvas.canvas ||
+        canvas.stackingCanvas.includes(ctx.canvas);
+    if (!onScreen)
+        return;
+    const holder = canvas.std
+        .getOptional(GfxControllerIdentifier)
+        ?.view?.get(model.id);
+    const id = holder?.focusedLaneId;
+    if (!id)
+        return;
+    const [, , w, h] = model.deserializedXYWH;
+    // The outline hugs the flow area as PAINTED, i.e. right of a participant
+    // band a long name may have widened.
+    const plot = backgroundPlot(BPMN_POOL_BACKGROUND, w, h, bpmnPoolLayout(model).margin);
+    const prefix = BPMN_POOL_BACKGROUND.instanceZones?.idPrefix ?? 'lane';
+    const zone = backgroundInstanceZones(BPMN_POOL_BACKGROUND, model).find(candidate => candidate.id === `${prefix}:${id}`);
+    if (!zone)
+        return;
+    const accent = canvas.getPropertyValue('--affine-primary-color').trim();
+    if (!accent)
+        return;
+    const inset = FOCUS_OUTLINE_WIDTH / 2;
+    ctx.save();
+    ctx.strokeStyle = accent;
+    ctx.lineWidth = FOCUS_OUTLINE_WIDTH;
+    ctx.setLineDash([]);
+    ctx.strokeRect(plot.x0 + inset, plot.y0 + zone.rect.y * plot.height + inset, plot.width - FOCUS_OUTLINE_WIDTH, zone.rect.h * plot.height - FOCUS_OUTLINE_WIDTH);
+    ctx.restore();
+};
 export const BpmnPoolRendererExtension = ElementRendererExtension(BPMN_POOL_BACKGROUND.type, bpmnPool);

package/dist/element-view.d.ts

@@ -2,6 +2,7 @@ import type { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
 import type { EditorHost } from '@formicoidea/labre-core/std';
 import type { PointTestOptions } from '@formicoidea/labre-core/std/gfx';
 import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+import { type BpmnLaneFocusHolder } from './actions.js';
 /**
  * View for a BPMN pool. Three direct gestures live here:
  *
@@ -14,7 +15,11 @@ import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
  *   renderer paints the name in, rather than a second set of metrics that would
  *   one day disagree with it;
  * - **drag on an internal lane boundary** moves the separator, taking from one
- *   lane and giving to the other.
+ *   lane and giving to the other;
+ * - **click in a lane's title band of a SELECTED pool** focuses that lane —
+ *   the lane "Move lane up / down" and "Remove lane" act on. On-screen state
+ *   only ({@link BpmnLaneFocusHolder}): never stored, outlined on the canvas
+ *   by the renderer, dropped when the pool leaves the selection.
  *
  * Both renames are ZONED to their band (PO recette, 2026-08-26). The whole pool
  * used to open the participant editor, which was right while a pool had one
@@ -55,14 +60,18 @@ import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
  * local point by `-model.rotate` about the element centre, at the one function
  * that has the element in hand (`_localPoint`), not a new declared field.
  */
-export declare class BpmnPoolView extends GfxElementModelView<BpmnPoolElementModel> {
+export declare class BpmnPoolView extends GfxElementModelView<BpmnPoolElementModel> implements BpmnLaneFocusHolder {
     static type: string;
     private _nameEditor;
+    private _focusedLaneId;
+    /** The focused lane's id — see {@link BpmnLaneFocusHolder}. */
+    get focusedLaneId(): string | null;
     /** The boundary the pointer is over, and the handlers armed for it. */
     private _armed;
     /** Everything a separator drag needs, frozen at `dragstart`. */
     private _drag;
     onCreated(): void;
+    private _refreshPaintedBands;
     onDestroyed(): void;
     /** Hand the cursor back on the way out; nothing here owns it for long. */
     private _leave;
@@ -90,9 +99,14 @@ export declare class BpmnPoolView extends GfxElementModelView<BpmnPoolElementMod
      * - the internal LANE SEPARATORS, twelve-unit strips in the middle of the
      *   flow area, which arm the drag that moves them;
      * - the zoom-GROWN rename targets, which reach past the painted bands when
-     *   the board is small on screen so a fingertip can still land on one.
+     *   the board is small on screen so a fingertip can still land on one;
+     * - the part of a title band a long name has WIDENED past its declared
+     *   width (the name wraps onto more lines and the band grows with it,
+     *   `backgroundBandWidths`). The model selects by the declared widths, since
+     *   it cannot measure text; the rename double-click must still land on every
+     *   line painted, so `pool-hit.ts` aims at the band as painted.
      *
-     * Neither is a selection zone — a click in the flow area still goes to
+     * None is a selection zone — a click in the flow area still goes to
      * whatever the user dropped there, because picking asks the MODEL. This
      * override only decides where the pool's own gestures are heard, which is why
      * it is declared here, beside the code that draws and handles them, rather
@@ -115,6 +129,18 @@ export declare class BpmnPoolView extends GfxElementModelView<BpmnPoolElementMod
     private _onDragStart;
     private _onDragMove;
     private _onDragEnd;
+    /**
+     * A press in a lane's title band of a SELECTED pool focuses that lane; a
+     * press in the participant band clears the focus. Anywhere else leaves it.
+     *
+     * On `pointerdown`, which this view already listens to, and NOT on `click`:
+     * a view that registers a handler reports the event as handled, and a
+     * registered `click` would take click-to-select away from the default tool.
+     * Selected first, for the reason the separator drag gives: a first click on
+     * a pool is "work on this pool", not "pick this lane".
+     */
+    private _focusAt;
+    private _setFocus;
     /**
      * A double-click renames whatever TITLE BAND it landed in, and nothing
      * otherwise (PO recette, 2026-08-26).

package/dist/element-view.js

@@ -1,8 +1,15 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { EdgelessCRUDIdentifier, } from '@formicoidea/labre-core/blocks/surface';
+import { ToolbarFlag, ToolbarRegistryIdentifier, } from '@formicoidea/labre-core/shared/services';
 import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-import { bpmnLanesOf, renameBpmnLane } from './actions.js';
+import { bpmnLanesOf, renameBpmnLane, } from './actions.js';
 import { POOL_LANE_MIN_HEIGHT } from './consts.js';
-import { bpmnLaneBoundaryAt, bpmnPoolBands, bpmnPoolTargetAt, } from './pool-hit.js';
+import { bpmnLaneBoundaryAt, bpmnPoolBands, bpmnPoolMeasuredLayout, bpmnPoolTargetAt, cachePaintedBands, } from './pool-hit.js';
+/**
+ * The props whose change moves a title band: the names it is sized by, and the
+ * box whose height a name wraps along. `paintedBands` itself is NOT here — the
+ * cache's own write must never re-enter the code that writes it.
+ */
+const BAND_PROPS = new Set(['name', 'lanes', 'xywh']);
 /**
  * View for a BPMN pool. Three direct gestures live here:
  *
@@ -15,7 +22,11 @@ import { bpmnLaneBoundaryAt, bpmnPoolBands, bpmnPoolTargetAt, } from './pool-hit
  *   renderer paints the name in, rather than a second set of metrics that would
  *   one day disagree with it;
  * - **drag on an internal lane boundary** moves the separator, taking from one
- *   lane and giving to the other.
+ *   lane and giving to the other;
+ * - **click in a lane's title band of a SELECTED pool** focuses that lane —
+ *   the lane "Move lane up / down" and "Remove lane" act on. On-screen state
+ *   only ({@link BpmnLaneFocusHolder}): never stored, outlined on the canvas
+ *   by the renderer, dropped when the pool leaves the selection.
  *
  * Both renames are ZONED to their band (PO recette, 2026-08-26). The whole pool
  * used to open the participant editor, which was right while a pool had one
@@ -60,18 +71,49 @@ export class BpmnPoolView extends GfxElementModelView {
     constructor() {
         super(...arguments);
         this._nameEditor = null;
+        this._focusedLaneId = null;
         /** The boundary the pointer is over, and the handlers armed for it. */
         this._armed = null;
         /** Everything a separator drag needs, frozen at `dragstart`. */
         this._drag = null;
     }
     static { this.type = 'bpmnPool'; }
+    /** The focused lane's id — see {@link BpmnLaneFocusHolder}. */
+    get focusedLaneId() {
+        return this._focusedLaneId;
+    }
     onCreated() {
         super.onCreated();
+        // Picking asks the MODEL, which selects by `paintedBands`. The renderer
+        // writes it after each paint, but a hidden tab never paints and the first
+        // click can come before the first frame: the view measures it now, and
+        // again whenever a band can have moved, so picking never waits for a
+        // frame. One measure per update; the renderer's write after the next
+        // paint lands on the same numbers and writes nothing.
+        this._refreshPaintedBands();
+        this.disposable.add(this.model.propsUpdated.subscribe(({ key }) => {
+            if (BAND_PROPS.has(key))
+                this._refreshPaintedBands();
+        }));
         this.on('dblclick', e => this._onDblClick(e));
         this.on('pointermove', e => this._updateHover(e));
-        this.on('pointerdown', e => this._updateHover(e));
+        this.on('pointerdown', e => {
+            this._updateHover(e);
+            this._focusAt(e);
+        });
         this.on('pointerleave', () => this._leave());
+        // The focus belongs to a pool the user is working on: once it leaves the
+        // selection, there is no lane to act on and nothing to outline.
+        this.disposable.add(this.gfx.selection.slots.updated.subscribe(() => {
+            if (this._focusedLaneId === null)
+                return;
+            if (this.gfx.selection.selectedIds.includes(this.model.id))
+                return;
+            this._setFocus(null);
+        }));
+    }
+    _refreshPaintedBands() {
+        cachePaintedBands(this.model, bpmnPoolMeasuredLayout(this.model));
     }
     onDestroyed() {
         this._closeEditor();
@@ -121,9 +163,14 @@ export class BpmnPoolView extends GfxElementModelView {
      * - the internal LANE SEPARATORS, twelve-unit strips in the middle of the
      *   flow area, which arm the drag that moves them;
      * - the zoom-GROWN rename targets, which reach past the painted bands when
-     *   the board is small on screen so a fingertip can still land on one.
+     *   the board is small on screen so a fingertip can still land on one;
+     * - the part of a title band a long name has WIDENED past its declared
+     *   width (the name wraps onto more lines and the band grows with it,
+     *   `backgroundBandWidths`). The model selects by the declared widths, since
+     *   it cannot measure text; the rename double-click must still land on every
+     *   line painted, so `pool-hit.ts` aims at the band as painted.
      *
-     * Neither is a selection zone — a click in the flow area still goes to
+     * None is a selection zone — a click in the flow area still goes to
      * whatever the user dropped there, because picking asks the MODEL. This
      * override only decides where the pool's own gestures are heard, which is why
      * it is declared here, beside the code that draws and handles them, rather
@@ -255,6 +302,37 @@ export class BpmnPoolView extends GfxElementModelView {
         this.model.pop('lanes');
         this._disarm();
     }
+    /* ── Lane focus ────────────────────────────────────────────────────── */
+    /**
+     * A press in a lane's title band of a SELECTED pool focuses that lane; a
+     * press in the participant band clears the focus. Anywhere else leaves it.
+     *
+     * On `pointerdown`, which this view already listens to, and NOT on `click`:
+     * a view that registers a handler reports the event as handled, and a
+     * registered `click` would take click-to-select away from the default tool.
+     * Selected first, for the reason the separator drag gives: a first click on
+     * a pool is "work on this pool", not "pick this lane".
+     */
+    _focusAt(e) {
+        if (!this.gfx.selection.selectedIds.includes(this.model.id))
+            return;
+        const target = this._targetAt(this._localPoint(e));
+        if (target === null)
+            return;
+        const lane = target.kind === 'lane' ? bpmnLanesOf(this.model)[target.index] : null;
+        this._setFocus(lane?.id ?? null);
+    }
+    _setFocus(id) {
+        if (this._focusedLaneId === id)
+            return;
+        this._focusedLaneId = id;
+        // The outline is painted by the canvas renderer, and the toolbar decides
+        // whether to offer the reorder commands: both have to be told.
+        this.gfx.surfaceComponent?.refresh();
+        this.gfx.std
+            .getOptional(ToolbarRegistryIdentifier)
+            ?.flags.refresh(ToolbarFlag.Surface);
+    }
     /* ── In-place naming ───────────────────────────────────────────────── */
     /**
      * A double-click renames whatever TITLE BAND it landed in, and nothing

package/dist/import.js

@@ -1,9 +1,8 @@
 import { InterchangeImportError, readXmlElement, } from '@formicoidea/labre-core/interchange';
-import { ConnectorMode, PointStyle, StrokeStyle, } from '@formicoidea/labre-core/model/headless';
 import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { ASSOCIATION_STROKE, ASSOCIATION_WIDTH, bpmnLabelMode, MESSAGE_STROKE, MESSAGE_WIDTH, NODE_SIZE, POOL_BAND_WIDTH, POOL_REF_HEIGHT, POOL_REF_WIDTH, SEQUENCE_STROKE, SEQUENCE_WIDTH, } from './consts.js';
+import { bpmnLabelMode, NODE_SIZE, POOL_BAND_WIDTH, POOL_REF_HEIGHT, POOL_REF_WIDTH, } from './consts.js';
 import { BPMN_FORMAT_ID, BPMN_NS, BPMN_OWN_DECLARATIONS, BPMN_SCOPE, BPMN_XML_OF_KIND, escapeAttr, escapeText, } from './export.js';
-import { bpmnLabelBoxUnder, bpmnLabelProps, bpmnNodeProps } from './presets.js';
+import { bpmnConnectorProps, bpmnLabelBoxUnder, bpmnLabelProps, bpmnNodeProps, } from './presets.js';
 import { BPMN_ROLE } from './roles.js';
 /**
  * The remarks whose wording is FIXED, as `[key, English]` pairs — one entry
@@ -637,39 +636,18 @@ const SWEEP_STEP = 200;
 const SWEEP_COLUMNS = 4;
 /** The margin between a minted pool's plot and the work inside it. */
 const MINTED_POOL_PADDING = 40;
-/** The connector a role is drawn as — the styles the tools arm, one table. */
+/**
+ * The connector a role is drawn as — the styles the tools arm, one table
+ * (`bpmnConnectorProps`). A role this reader does not know keeps its own name
+ * and takes the sequence flow's line.
+ */
 function connectorProps(role) {
-    const base = { type: 'connector', role, mode: ConnectorMode.Orthogonal };
-    if (role === BPMN_ROLE.messageFlow) {
-        return {
-            ...base,
-            stroke: MESSAGE_STROKE,
-            strokeWidth: MESSAGE_WIDTH,
-            strokeStyle: StrokeStyle.Dash,
-            frontEndpointStyle: PointStyle.Circle,
-            rearEndpointStyle: PointStyle.Arrow,
-        };
-    }
-    if (role === BPMN_ROLE.association) {
-        return {
-            ...base,
-            stroke: ASSOCIATION_STROKE,
-            strokeWidth: ASSOCIATION_WIDTH,
-            strokeStyle: StrokeStyle.Dash,
-            // No head at either end: an association claims no direction, and an
-            // arrowhead would be the picture claiming one (`docs/adr/0010`).
-            frontEndpointStyle: PointStyle.None,
-            rearEndpointStyle: PointStyle.None,
-        };
-    }
-    return {
-        ...base,
-        stroke: SEQUENCE_STROKE,
-        strokeWidth: SEQUENCE_WIDTH,
-        strokeStyle: StrokeStyle.Solid,
-        frontEndpointStyle: PointStyle.None,
-        rearEndpointStyle: PointStyle.Triangle,
-    };
+    const edge = role === BPMN_ROLE.messageFlow
+        ? 'messageFlow'
+        : role === BPMN_ROLE.association
+            ? 'association'
+            : 'sequenceFlow';
+    return { ...bpmnConnectorProps(edge), role };
 }
 /**
  * The version of the format this file declares (ADR 0012, P2 as amended).

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { bpmnCommandIcons, bpmnCommands } from './commands.js';
 export { BPMN_FORMAT_ID, BPMN_NS, BPMN_XML_OF_KIND, type BpmnExportBoard, type BpmnExportOptions, type BpmnExportOutcome, type BpmnXmlMapping, exportBpmnXml, exportBpmnXmlWithWarnings, isNcName, toNcName, } from './export.js';
 export { BPMN_KIND_OF_XML, BPMN_QUARANTINE_REASON, importBpmnXml, } from './import.js';
 export { bpmnLabelFit, type BpmnLabelFit, bpmnMorphClears, bpmnMorphProps, bpmnNodeProps, type BpmnNodePreset, NODE_PRESETS, } from './presets.js';
+export { BPMN_TOOLBOX, bpmnFlowElement, bpmnNodeElements, type BpmnNodeTexts, bpmnPoolElement, type BpmnPoolTexts, } from './toolbox.js';
 export { BPMN_MORPH_FAMILIES, BPMN_MORPH_SPEC } from './morph.js';
 export { BPMN_INTERCHANGE, BPMN_SVG_FORMAT, BPMN_SVG_IMPORT, BPMN_XML_EXPORT, BPMN_XML_EXTENSION, BPMN_XML_IMPORT, BPMN_XML_FORMAT, BPMN_XML_MIME, bpmnBoardFrom, bpmnSafeFilename, } from './interchange.js';
 export { bpmnLaneOf, bpmnPoolOf } from './facts.js';

package/dist/index.js

@@ -30,6 +30,8 @@ export { BPMN_KIND_OF_XML, BPMN_QUARANTINE_REASON, importBpmnXml, } from './impo
 // geometry of its own — a file, a generator, another editor's board — fits their
 // labels the way the importer does, rather than reinventing the arithmetic.
 export { bpmnLabelFit, bpmnMorphClears, bpmnMorphProps, bpmnNodeProps, NODE_PRESETS, } from './presets.js';
+// The toolbar as pure builders (`docs/adr/0045`), also on `./interchange`.
+export { BPMN_TOOLBOX, bpmnFlowElement, bpmnNodeElements, bpmnPoolElement, } from './toolbox.js';
 // What an artefact may BECOME: the declared families, and the spec the generic
 // morph module is registered with. Data a host can read without an editor.
 export { BPMN_MORPH_FAMILIES, BPMN_MORPH_SPEC } from './morph.js';

package/dist/interchange-headless.d.ts

@@ -72,3 +72,4 @@ export declare const BPMN_SVG_FORMAT: InterchangeFormat;
  * would be a re-render (P2).
  */
 export declare const BPMN_SVG_IMPORT: InterchangeImportCapability;
+export { BPMN_TOOLBOX, bpmnFlowElement, bpmnNodeElements, type BpmnNodeTexts, bpmnPoolElement, type BpmnPoolTexts, } from './toolbox.js';

package/dist/interchange-headless.js

@@ -98,3 +98,6 @@ export const BPMN_SVG_IMPORT = {
     direction: 'import',
     run: parseSvgSketch,
 };
+// The toolbar as pure builders (`docs/adr/0045`): what a host with no editor
+// places to draw the very elements a user places from the toolbar.
+export { BPMN_TOOLBOX, bpmnFlowElement, bpmnNodeElements, bpmnPoolElement, } from './toolbox.js';

package/dist/pool-hit.d.ts

@@ -1,4 +1,4 @@
-import { type BackgroundRect, backgroundPlot } from '@formicoidea/labre-core/blocks/surface';
+import { type BackgroundInset, type BackgroundRect, backgroundPlot } from '@formicoidea/labre-core/blocks/surface';
 /**
  * Where a pointer is on a pool, in ELEMENT-LOCAL model units.
  *
@@ -9,8 +9,18 @@ import { type BackgroundRect, backgroundPlot } from '@formicoidea/labre-core/blo
  *
  * Every box is derived from `backgroundInstanceZones` /
  * `backgroundInstanceZoneBand` — the same two functions the renderer paints
- * from and the audit reports from. Nothing here restates a coordinate, so a
- * target cannot drift away from the thing it is a target for.
+ * from and the audit reports from — at the band widths `backgroundBandWidths`
+ * resolves, the one resolver the renderer sizes the bands with. A long name
+ * WIDENS its band (it wraps onto more lines), and the rename target widens with
+ * it: a double-click on the second line of a participant name is a
+ * double-click on that name. Measured with `measureBackgroundText`, the same
+ * metrics the canvas paints with wherever a document exists. Nothing here
+ * restates a coordinate, so a target cannot drift away from the thing it is a
+ * target for.
+ *
+ * The model's own `includesPoint` (`affine-model`, headless, no text
+ * measurement) still selects by the DECLARED widths; the grown part of a band
+ * answers the pool's gestures through the view, which asks these functions.
  *
  * ponytail: a ROTATED pool is not accounted for — the caller converts by
  * subtraction, so every box assumes an upright pool. Same reserve
@@ -18,11 +28,60 @@ import { type BackgroundRect, backgroundPlot } from '@formicoidea/labre-core/blo
  * framework background today. Upgrade: rotate the local point by
  * `-model.rotate` about the element centre, in the caller that has the element.
  */
-/** What these functions need of a pool: its box and its lanes. */
+/**
+ * What these functions need of a pool: its box, its lanes and its name — the
+ * name and the lane names size the bands.
+ */
 export interface BpmnPoolGeometry {
     deserializedXYWH: readonly number[];
     lanes?: unknown;
+    name?: unknown;
+    /** What the renderer last painted — `BpmnPoolElementModel.paintedBands`. */
+    paintedBands?: {
+        margin: number;
+        zoneBandWidth: number;
+    };
 }
+/**
+ * The pool's bands as painted: the margin and strip width the names need.
+ *
+ * The widths the renderer cached on the model when it has painted the pool —
+ * the very numbers the model's `includesPoint` selects by, so a rename target
+ * and a selection click agree to the unit; measured here otherwise (a pool not
+ * painted yet, a headless caller).
+ */
+export declare function bpmnPoolLayout(model: BpmnPoolGeometry): {
+    margin: BackgroundInset;
+    zoneBandWidth: number | undefined;
+};
+/**
+ * The pool's bands MEASURED now, from its name and lanes, ignoring any cache:
+ * what the view writes into `paintedBands` before the first paint and after
+ * every change that moves a band.
+ */
+export declare function bpmnPoolMeasuredLayout(model: BpmnPoolGeometry): {
+    margin: BackgroundInset;
+    zoneBandWidth: number | undefined;
+};
+/**
+ * Write the band widths into the model's `paintedBands` cache — the one place
+ * that does, for both writers: the renderer after each paint (the measured
+ * truth on the canvas) and the view on creation and on every change that moves
+ * a band, so picking never waits for a frame (a hidden tab never paints).
+ *
+ * Writes ONLY when a width changed and returns whether it wrote: a `@local()`
+ * write emits `elementUpdated`, which repaints, so writing an equal value on
+ * every paint would repaint forever.
+ */
+export declare function cachePaintedBands(model: {
+    paintedBands?: {
+        margin: number;
+        zoneBandWidth: number;
+    };
+}, layout: {
+    margin: BackgroundInset;
+    zoneBandWidth: number | undefined;
+}): boolean;
 /** A lane band and, when the declaration asks for one, its title strip. */
 export interface BpmnLaneBand {
     top: number;

package/dist/pool-hit.js

@@ -1,10 +1,59 @@
-import { backgroundInstanceZoneBand, backgroundInstanceZones, backgroundPlot, } from '@formicoidea/labre-core/blocks/surface';
+import { backgroundBandWidths, backgroundInstanceZoneBand, backgroundInstanceZones, backgroundPlot, measureBackgroundText, } from '@formicoidea/labre-core/blocks/surface';
 import { BPMN_POOL_BACKGROUND } from './background.js';
-import { POOL_LANE_GRAB } from './consts.js';
+import { POOL_LANE_BAND_WIDTH, POOL_LANE_GRAB } from './consts.js';
+/**
+ * The pool's bands as painted: the margin and strip width the names need.
+ *
+ * The widths the renderer cached on the model when it has painted the pool —
+ * the very numbers the model's `includesPoint` selects by, so a rename target
+ * and a selection click agree to the unit; measured here otherwise (a pool not
+ * painted yet, a headless caller).
+ */
+export function bpmnPoolLayout(model) {
+    const declared = BPMN_POOL_BACKGROUND.geometry.margin;
+    const painted = model.paintedBands;
+    if (painted) {
+        return {
+            margin: { ...declared, left: painted.margin },
+            zoneBandWidth: painted.zoneBandWidth,
+        };
+    }
+    return bpmnPoolMeasuredLayout(model);
+}
+/**
+ * The pool's bands MEASURED now, from its name and lanes, ignoring any cache:
+ * what the view writes into `paintedBands` before the first paint and after
+ * every change that moves a band.
+ */
+export function bpmnPoolMeasuredLayout(model) {
+    const [, , w, h] = model.deserializedXYWH;
+    return backgroundBandWidths(BPMN_POOL_BACKGROUND, model, w, h, measureBackgroundText);
+}
+/**
+ * Write the band widths into the model's `paintedBands` cache — the one place
+ * that does, for both writers: the renderer after each paint (the measured
+ * truth on the canvas) and the view on creation and on every change that moves
+ * a band, so picking never waits for a frame (a hidden tab never paints).
+ *
+ * Writes ONLY when a width changed and returns whether it wrote: a `@local()`
+ * write emits `elementUpdated`, which repaints, so writing an equal value on
+ * every paint would repaint forever.
+ */
+export function cachePaintedBands(model, layout) {
+    const margin = layout.margin.left;
+    const zoneBandWidth = layout.zoneBandWidth ?? POOL_LANE_BAND_WIDTH;
+    const previous = model.paintedBands;
+    if (previous?.margin === margin && previous.zoneBandWidth === zoneBandWidth) {
+        return false;
+    }
+    model.paintedBands = { margin, zoneBandWidth };
+    return true;
+}
 /** The lane bands of this pool, or `null` when it has no usable partition. */
 export function bpmnPoolBands(model) {
     const [, , w, h] = model.deserializedXYWH;
-    const plot = backgroundPlot(BPMN_POOL_BACKGROUND, w, h);
+    const layout = bpmnPoolLayout(model);
+    const plot = backgroundPlot(BPMN_POOL_BACKGROUND, w, h, layout.margin);
     if (!(plot.width > 0) || !(plot.height > 0))
         return null;
     const zones = backgroundInstanceZones(BPMN_POOL_BACKGROUND, model);
@@ -15,7 +64,7 @@ export function bpmnPoolBands(model) {
         bands: zones.map(zone => ({
             top: plot.y0 + zone.rect.y * plot.height,
             height: zone.rect.h * plot.height,
-            strip: backgroundInstanceZoneBand(BPMN_POOL_BACKGROUND, zone, plot),
+            strip: backgroundInstanceZoneBand(BPMN_POOL_BACKGROUND, zone, plot, layout.zoneBandWidth),
         })),
     };
 }
@@ -94,10 +143,10 @@ export function bpmnLaneTitleBandAt(model, local, zoom) {
  */
 export function bpmnInPoolTitleBand(model, local, zoom) {
     const [, , w, h] = model.deserializedXYWH;
-    const plot = backgroundPlot(BPMN_POOL_BACKGROUND, w, h);
-    // The band IS the margin, clamped to a pool narrower than its own margin —
-    // the same degenerate case the renderer clamps.
-    const painted = Math.min(plot.x0, w);
+    // The band IS the margin — as wide as the wrapped name needs — clamped to a
+    // pool narrower than its own margin, the same degenerate case the renderer
+    // clamps.
+    const painted = Math.min(bpmnPoolLayout(model).margin.left, w);
     if (!(painted > 0))
         return false;
     // Grown rightwards, capped at twice the margin: past that lies the lane

package/dist/presets.d.ts

@@ -1,5 +1,6 @@
 import type { BpmnNodeKind } from '@formicoidea/labre-core/model';
 import { StrokeStyle, TextAlign, TextFitMode, TextVerticalAlign } from '@formicoidea/labre-core/model/headless';
+import { type BpmnEdgeKey } from './consts.js';
 /**
  * What a BPMN artefact is BORN as — the one description of a node's props, read
  * by every site that creates one.
@@ -174,6 +175,17 @@ export declare function bpmnPoolProps(box: {
 }): Record<string, unknown> & {
     type: string;
 };
+/**
+ * One BPMN connecting object, as the props `surface.addElement` takes, ends
+ * left to the caller: the role, the orthogonal mode the tools arm the
+ * connector with, and the line {@link BPMN_EDGE_STYLE} says it looks like.
+ *
+ * The importer and the toolbox both write a flow through here, so a flow read
+ * out of a `.bpmn` file and one a host places are the line the tool draws.
+ */
+export declare function bpmnConnectorProps(edge: BpmnEdgeKey): Record<string, unknown> & {
+    type: string;
+};
 /**
  * What a node's kind is worth to an element that ALREADY EXISTS — the same
  * description as {@link bpmnNodeProps}, minus the three things a morph has no

package/dist/presets.js

@@ -1,6 +1,6 @@
-import { FontFamily, SHAPE_TEXT_PADDING, SHAPE_TEXT_VERTICAL_PADDING, ShapeStyle, StrokeStyle, TextAlign, TextFitMode, TextVerticalAlign, } from '@formicoidea/labre-core/model/headless';
+import { ConnectorMode, FontFamily, SHAPE_TEXT_PADDING, SHAPE_TEXT_VERTICAL_PADDING, ShapeStyle, StrokeStyle, TextAlign, TextFitMode, TextVerticalAlign, } from '@formicoidea/labre-core/model/headless';
 import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { ACTIVITY_FIT_REF, BPMN_LABEL_GAP, BPMN_LABEL_H, BPMN_LABEL_W, CALL_ACTIVITY_WIDTH, END_WIDTH, EVENT_END, EVENT_START, GROUP_RADIUS, GROUP_STROKE, INNER_FONT_SIZE, isBpmnActivityKind, LABEL_FONT_SIZE, LABEL_INSET_RATIO, LABEL_MIN_FONT_SIZE, NEUTRAL_STROKE, NODE_FILL, NODE_SIZE, NODE_STROKE_WIDTH, START_WIDTH, TASK_RADIUS, } from './consts.js';
+import { ACTIVITY_FIT_REF, BPMN_EDGE_STYLE, BPMN_LABEL_GAP, BPMN_LABEL_H, BPMN_LABEL_W, CALL_ACTIVITY_WIDTH, END_WIDTH, EVENT_END, EVENT_START, GROUP_RADIUS, GROUP_STROKE, INNER_FONT_SIZE, isBpmnActivityKind, LABEL_FONT_SIZE, LABEL_INSET_RATIO, LABEL_MIN_FONT_SIZE, NEUTRAL_STROKE, NODE_FILL, NODE_SIZE, NODE_STROKE_WIDTH, START_WIDTH, TASK_RADIUS, } from './consts.js';
 import { BPMN_ROLE, BPMN_ROLE_OF_KIND } from './roles.js';
 /** Per-kind native shape + accent presets (style C). */
 export const NODE_PRESETS = {
@@ -320,6 +320,22 @@ export function bpmnPoolProps(box) {
         xywh: box.xywh,
     };
 }
+/**
+ * One BPMN connecting object, as the props `surface.addElement` takes, ends
+ * left to the caller: the role, the orthogonal mode the tools arm the
+ * connector with, and the line {@link BPMN_EDGE_STYLE} says it looks like.
+ *
+ * The importer and the toolbox both write a flow through here, so a flow read
+ * out of a `.bpmn` file and one a host places are the line the tool draws.
+ */
+export function bpmnConnectorProps(edge) {
+    return {
+        type: 'connector',
+        role: BPMN_ROLE[edge],
+        mode: ConnectorMode.Orthogonal,
+        ...BPMN_EDGE_STYLE[edge],
+    };
+}
 /**
  * The box {@link bpmnMorphProps} hands {@link bpmnNodeProps} and then throws
  * away. Never written to a document: a morph keeps the geometry the element