@formicoidea/labre-framework-bpmn 0.23.0

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@formicoidea/labre-framework-bpmn",
+  "description": "Labre bpmn framework for @formicoidea/labre-core.",
+  "version": "0.23.0",
+  "type": "module",
+  "sideEffects": false,
+  "author": "lajola",
+  "contributors": [
+    "toeverything"
+  ],
+  "license": "MPL-2.0",
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts",
+    "./descriptor": "./src/descriptor.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@formicoidea/labre-core": "0.23.0",
+    "lit": "^3.2.0"
+  }
+}

package/src/consts.ts

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

package/src/descriptor.ts

@@ -0,0 +1,8 @@
+import { BpmnViewExtension } from './view.js';
+
+/** Host wiring for the bpmn framework. */
+export const bpmnFramework = {
+  flag: 'bpmn',
+  telemetry: 'bpmn',
+  viewExtension: BpmnViewExtension,
+} as const;

package/src/effects.ts

@@ -0,0 +1,14 @@
+import { EdgelessBpmnMenu } from './toolbar/bpmn-menu';
+import { EdgelessBpmnSeniorButton } from './toolbar/bpmn-senior-button';
+
+export function effects() {
+  customElements.define('edgeless-bpmn-menu', EdgelessBpmnMenu);
+  customElements.define('edgeless-bpmn-senior-button', EdgelessBpmnSeniorButton);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-bpmn-menu': EdgelessBpmnMenu;
+    'edgeless-bpmn-senior-button': EdgelessBpmnSeniorButton;
+  }
+}

package/src/element-renderer.ts

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

package/src/element-view.ts

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

package/src/index.ts

@@ -0,0 +1 @@
+export {};

package/src/node/node-renderer.ts

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

package/src/node/node-view.ts

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

package/src/templates/index.ts

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

package/src/toolbar/bpmn-menu.ts

@@ -0,0 +1,224 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import {
+  ConnectorMode,
+  FontFamily,
+  PointStyle,
+  ShapeStyle,
+  StrokeStyle,
+} from '@formicoidea/labre-core/model';
+import {
+  EditPropsStore,
+  TelemetryProvider,
+} from '@formicoidea/labre-core/shared/services';
+import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { css, html, LitElement } from 'lit';
+
+import {
+  EVENT_END,
+  EVENT_START,
+  END_WIDTH,
+  INNER_FONT_SIZE,
+  NEUTRAL_STROKE,
+  NODE_FILL,
+  NODE_LABEL,
+  NODE_SIZE,
+  NODE_STROKE_WIDTH,
+  SEQUENCE_STROKE,
+  SEQUENCE_WIDTH,
+  START_WIDTH,
+  TASK_RADIUS,
+} from '../consts';
+import {
+  bpmnEndIcon,
+  bpmnGatewayIcon,
+  bpmnPoolIcon,
+  bpmnSequenceIcon,
+  bpmnStartIcon,
+  bpmnTaskIcon,
+} from './icons';
+
+type NodeKind = 'startEvent' | 'endEvent' | 'task' | 'gatewayExclusive';
+
+/** Per-kind native shape + accent presets (style C). */
+const NODE_PRESETS: Record<
+  NodeKind,
+  { shapeType: 'ellipse' | 'rect' | 'diamond'; stroke: string; width: number }
+> = {
+  startEvent: { shapeType: 'ellipse', stroke: EVENT_START, width: START_WIDTH },
+  endEvent: { shapeType: 'ellipse', stroke: EVENT_END, width: END_WIDTH },
+  task: { shapeType: 'rect', stroke: NEUTRAL_STROKE, width: NODE_STROKE_WIDTH },
+  gatewayExclusive: {
+    shapeType: 'diamond',
+    stroke: NEUTRAL_STROKE,
+    width: NODE_STROKE_WIDTH,
+  },
+};
+
+/**
+ * The popover above the toolbar for the BPMN toolbox. Items create the flow
+ * objects (native shapes, so they stay editable), the pool background, and arm
+ * the native connector tool for sequence flows. Mirrors the EDGY menu.
+ */
+export class EdgelessBpmnMenu extends EdgelessToolbarToolMixin(LitElement) {
+  static override styles = css`
+    :host {
+      position: absolute;
+      display: flex;
+      z-index: -1;
+    }
+    .menu-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .button-group-container {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      fill: var(--affine-icon-color);
+    }
+    .button-group-container svg {
+      width: 24px;
+      height: 24px;
+    }
+  `;
+
+  override type = EmptyTool;
+
+  /** Create a flow-object node (native shape) centred on the viewport. */
+  private _createNode(kind: NodeKind) {
+    const surface = this.gfx.surface;
+    if (!surface) return;
+
+    const { w, h } = NODE_SIZE[kind];
+    const { centerX: cx, centerY: cy } = this.gfx.viewport;
+    const preset = NODE_PRESETS[kind];
+
+    const id = surface.addElement({
+      type: 'bpmnNode',
+      kind,
+      shapeType: preset.shapeType,
+      filled: true,
+      fillColor: NODE_FILL,
+      strokeColor: preset.stroke,
+      strokeWidth: preset.width,
+      shapeStyle: ShapeStyle.General,
+      roughness: 0,
+      radius: kind === 'task' ? TASK_RADIUS : 0,
+      text: NODE_LABEL[kind] || undefined,
+      color: NEUTRAL_STROKE,
+      fontFamily: FontFamily.Inter,
+      fontSize: INNER_FONT_SIZE,
+      textAlign: 'center',
+      xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+    });
+    this._track('FrameworkElementAdded', `node:${kind}`);
+    this._finish(id);
+  }
+
+  /** Create a pool (background container) centred on the viewport. */
+  private _createPool() {
+    const surface = this.gfx.surface;
+    if (!surface) return;
+
+    const w = 560;
+    const h = 200;
+    const { centerX: cx, centerY: cy } = this.gfx.viewport;
+    const id = surface.addElement({
+      type: 'bpmnPool',
+      xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+    });
+    this._track('FrameworkElementAdded', 'pool');
+    this._finish(id);
+  }
+
+  /**
+   * Arm the native connector tool, pre-styled for a BPMN sequence flow:
+   * orthogonal, solid, with a filled triangle head. The user then draws from
+   * one node to another (endpoints attach to centers).
+   */
+  private _activateSequenceFlow() {
+    this.edgeless.std.get(EditPropsStore).recordLastProps('connector', {
+      mode: ConnectorMode.Orthogonal,
+      stroke: SEQUENCE_STROKE,
+      strokeStyle: StrokeStyle.Solid,
+      strokeWidth: SEQUENCE_WIDTH,
+      frontEndpointStyle: PointStyle.None,
+      rearEndpointStyle: PointStyle.Triangle,
+    });
+    this._track('FrameworkToolPicked', 'connector:sequence');
+    this.gfx.tool.setTool(ConnectorTool, { mode: ConnectorMode.Orthogonal });
+    // Keep the palette open (native sub-menu behaviour).
+  }
+
+  private _finish(id: string) {
+    const { gfx } = this;
+    gfx.doc.captureSync();
+    gfx.tool.setTool(DefaultTool);
+    gfx.selection.set({ elements: [id], editing: false });
+    // Keep the palette open (native sub-menu behaviour).
+  }
+
+  private _track(
+    event: 'FrameworkElementAdded' | 'FrameworkToolPicked',
+    element: string
+  ) {
+    this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
+      framework: 'bpmn',
+      element,
+      page: 'whiteboard editor',
+      segment: 'bpmn toolbox',
+      module: 'bpmn menu',
+    });
+  }
+
+  override render() {
+    return html`
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            <edgeless-tool-icon-button
+              .tooltip=${'Start event'}
+              @click=${() => this._createNode('startEvent')}
+            >
+              ${bpmnStartIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'End event'}
+              @click=${() => this._createNode('endEvent')}
+            >
+              ${bpmnEndIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Task'}
+              @click=${() => this._createNode('task')}
+            >
+              ${bpmnTaskIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Exclusive gateway'}
+              @click=${() => this._createNode('gatewayExclusive')}
+            >
+              ${bpmnGatewayIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Sequence flow'}
+              @click=${this._activateSequenceFlow}
+            >
+              ${bpmnSequenceIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Pool'}
+              @click=${this._createPool}
+            >
+              ${bpmnPoolIcon}
+            </edgeless-tool-icon-button>
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+  }
+}

package/src/toolbar/bpmn-senior-button.ts

@@ -0,0 +1,102 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { 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';
+
+/**
+ * Main toolbar button (colored BPMN glyph) that opens the BPMN toolbox sub-menu
+ * above the toolbar. Mirrors the EDGY / Wardley senior buttons.
+ */
+export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host,
+    .bpmn-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    :host {
+      position: relative;
+    }
+    .bpmn-root {
+      width: 100%;
+      height: 64px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .bpmn-card {
+      --y: -4px;
+      --s: 1;
+      position: absolute;
+      bottom: 0;
+      width: 54px;
+      height: 54px;
+      transform: translateY(var(--y)) scale(var(--s));
+      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,
+        scale 0.3s ease;
+    }
+    .bpmn-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .bpmn-root:hover .bpmn-card {
+      --y: -10px;
+      --s: 1.07;
+    }
+  `;
+
+  override enableActiveBackground = true;
+
+  override type = EmptyTool;
+
+  private _toggleMenu() {
+    if (this.popper) {
+      this.popper.dispose();
+      this.popper = null;
+      return;
+    }
+    this.setEdgelessTool(DefaultTool);
+    const menu = this.createPopper('edgeless-bpmn-menu', this);
+    menu.element.edgeless = this.edgeless;
+
+    const el = menu.element as HTMLElement;
+    const wrap = el.parentElement;
+    if (wrap) {
+      wrap.style.overflow = 'visible';
+      wrap.style.justifyContent = 'flex-end';
+    }
+    Object.assign(el.style, {
+      position: 'static',
+      width: 'max-content',
+      maxWidth: 'calc(100vw - 16px)',
+      marginLeft: '0',
+    });
+  }
+
+  override render() {
+    return html`<edgeless-toolbar-button
+      class="bpmn-button"
+      .tooltip=${this.popper ? '' : 'BPMN'}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="bpmn-root">
+        <div class="bpmn-card">${bpmnToolbarIcon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+  }
+}

package/src/toolbar/config.ts

@@ -0,0 +1,74 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { BpmnPoolElementModel } from '@formicoidea/labre-core/model';
+import {
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html, type TemplateResult } from 'lit';
+
+const ResizeIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 5H5v4M15 19h4v-4" />
+  <path d="M5 5l6 6M19 19l-6-6" />
+</svg>`;
+
+type BpmnPoolToggleProp = 'resizeEnabled';
+
+/**
+ * Build a toolbar toggle that flips a boolean flag on every selected pool:
+ * `active` reflects the current state, `run` flips it (with an undo checkpoint).
+ */
+function booleanToggle(
+  id: string,
+  tooltip: string,
+  icon: TemplateResult,
+  prop: BpmnPoolToggleProp
+) {
+  return {
+    id,
+    tooltip,
+    icon,
+    active(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(BpmnPoolElementModel);
+      return models.length > 0 && models.every(model => model[prop]);
+    },
+    run(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(BpmnPoolElementModel);
+      if (!models.length) return;
+
+      const enable = !models.every(model => model[prop]);
+      ctx.std.store.captureSync();
+      const crud = ctx.std.get(EdgelessCRUDIdentifier);
+      for (const model of models) {
+        crud.updateElement(model.id, { [prop]: enable });
+      }
+    },
+  };
+}
+
+export const bpmnPoolToolbarConfig = {
+  actions: [
+    booleanToggle(
+      'a.toggle-resize',
+      'Enable / lock resizing',
+      ResizeIcon,
+      'resizeEnabled'
+    ),
+  ],
+  when: ctx => ctx.getSurfaceModelsByType(BpmnPoolElementModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+export const bpmnPoolToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:bpmnPool'),
+  config: bpmnPoolToolbarConfig,
+});

package/src/toolbar/icons.ts

@@ -0,0 +1,43 @@
+import { svg } from 'lit';
+
+/** Colored BPMN glyph for the main toolbar button: a pool (green name band) with
+ * a single activity inside. */
+export const bpmnToolbarIcon = svg`<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="13" width="48" height="30" rx="3" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
+  <path d="M6 14 h5 v28 h-5 z" fill="#43a06b"/>
+  <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>`;
+
+/** 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"/>
+</svg>`;
+
+/** End event — thick red ring. */
+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>`;
+
+/** 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>`;
+
+/** 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>`;
+
+/** 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>`;
+
+/** 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>`;

package/src/toolbar/senior-tool.ts

@@ -0,0 +1,11 @@
+import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { html } from 'lit';
+
+export const bpmnSeniorTool = SeniorToolExtension('bpmn', ({ block }) => {
+  return {
+    name: 'BPMN',
+    content: html`<edgeless-bpmn-senior-button
+      .edgeless=${block}
+    ></edgeless-bpmn-senior-button>`,
+  };
+});

package/src/view.ts

@@ -0,0 +1,37 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@formicoidea/labre-core/ext-loader';
+import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+
+import { effects } from './effects';
+import { bpmnTemplateCategory } from './templates';
+import { BpmnPoolRendererExtension } from './element-renderer';
+import { BpmnPoolInteraction, BpmnPoolView } from './element-view';
+import { BpmnNodeRendererExtension } from './node/node-renderer';
+import { BpmnNodeView } from './node/node-view';
+import { bpmnPoolToolbarExtension } from './toolbar/config';
+import { bpmnSeniorTool } from './toolbar/senior-tool';
+
+export class BpmnViewExtension extends ViewExtensionProvider {
+  override name = 'affine-bpmn-gfx';
+
+  override effect(): void {
+    super.effect();
+    effects();
+    extendTemplateCategory(bpmnTemplateCategory);
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(BpmnPoolView);
+    context.register(BpmnPoolRendererExtension);
+    context.register(BpmnNodeView);
+    context.register(BpmnNodeRendererExtension);
+    if (this.isEdgeless(context.scope)) {
+      context.register(BpmnPoolInteraction);
+      context.register(bpmnSeniorTool);
+      context.register(bpmnPoolToolbarExtension);
+    }
+  }
+}