@formicoidea/labre-framework-bpmn 0.23.1 → 0.23.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-bpmn",
   "description": "Labre bpmn framework for @formicoidea/labre-core.",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -10,24 +10,15 @@
   ],
   "license": "MPL-2.0",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./view": {
-      "types": "./dist/view.d.ts",
-      "import": "./dist/view.js"
-    },
-    "./descriptor": {
-      "types": "./dist/descriptor.d.ts",
-      "import": "./dist/descriptor.js"
-    }
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts",
+    "./descriptor": "./src/descriptor.ts"
   },
   "files": [
-    "dist"
+    "src"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.23.1",
+    "@formicoidea/labre-core": "0.23.2",
     "lit": "^3.2.0"
   }
 }

package/{dist/consts.js → src/consts.ts}

@@ -1,48 +1,57 @@
-/**
- * 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 = {
-    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 = {
-    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;
-//# sourceMappingURL=consts.js.map
+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/{dist/descriptor.js → src/descriptor.ts}

@@ -5,4 +5,4 @@ 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(),
+};