@formicoidea/labre-framework-bpmn 0.23.0 → 0.23.1

package/dist/toolbar/bpmn-menu.js

@@ -0,0 +1,179 @@
+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';
+/** Per-kind native shape + accent presets (style C). */
+const NODE_PRESETS = {
+    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) {
+    constructor() {
+        super(...arguments);
+        this.type = EmptyTool;
+    }
+    static { this.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;
+    }
+  `; }
+    /** Create a flow-object node (native shape) centred on the viewport. */
+    _createNode(kind) {
+        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. */
+    _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).
+     */
+    _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).
+    }
+    _finish(id) {
+        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).
+    }
+    _track(event, element) {
+        this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
+            framework: 'bpmn',
+            element,
+            page: 'whiteboard editor',
+            segment: 'bpmn toolbox',
+            module: 'bpmn menu',
+        });
+    }
+    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>
+    `;
+    }
+}
+//# sourceMappingURL=bpmn-menu.js.map

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

@@ -0,0 +1,16 @@
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { LitElement } from 'lit';
+declare const EdgelessBpmnSeniorButton_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
+/**
+ * Main toolbar button (colored BPMN glyph) that opens the BPMN toolbox sub-menu
+ * above the toolbar. Mirrors the EDGY / Wardley senior buttons.
+ */
+export declare class EdgelessBpmnSeniorButton extends EdgelessBpmnSeniorButton_base {
+    static styles: import("lit").CSSResult;
+    enableActiveBackground: boolean;
+    type: typeof EmptyTool;
+    private _toggleMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=bpmn-senior-button.d.ts.map

package/{src/toolbar/bpmn-senior-button.ts → dist/toolbar/bpmn-senior-button.js}

@@ -3,17 +3,18 @@ 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`
+export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.enableActiveBackground = true;
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
     :host,
     .bpmn-button {
       display: block;
@@ -56,38 +57,31 @@ export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(
       --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';
+  `; }
+    _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;
+        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',
+        });
     }
-    Object.assign(el.style, {
-      position: 'static',
-      width: 'max-content',
-      maxWidth: 'calc(100vw - 16px)',
-      marginLeft: '0',
-    });
-  }
-
-  override render() {
-    return html`<edgeless-toolbar-button
+    render() {
+        return html `<edgeless-toolbar-button
       class="bpmn-button"
       .tooltip=${this.popper ? '' : 'BPMN'}
       .tooltipOffset=${4}
@@ -98,5 +92,6 @@ export class EdgelessBpmnSeniorButton extends EdgelessToolbarToolMixin(
         <div class="bpmn-card">${bpmnToolbarIcon}</div>
       </div>
     </edgeless-toolbar-button>`;
-  }
+    }
 }
+//# sourceMappingURL=bpmn-senior-button.js.map

package/dist/toolbar/config.d.ts

@@ -0,0 +1,14 @@
+import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { type TemplateResult } from 'lit';
+export declare const bpmnPoolToolbarConfig: {
+    readonly actions: [{
+        id: string;
+        tooltip: string;
+        icon: TemplateResult;
+        active(ctx: ToolbarContext): boolean;
+        run(ctx: ToolbarContext): void;
+    }];
+    readonly when: (ctx: ToolbarContext) => boolean;
+};
+export declare const bpmnPoolToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=config.d.ts.map

package/dist/toolbar/config.js

@@ -0,0 +1,55 @@
+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 { html } 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>`;
+/**
+ * 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, tooltip, icon, prop) {
+    return {
+        id,
+        tooltip,
+        icon,
+        active(ctx) {
+            const models = ctx.getSurfaceModelsByType(BpmnPoolElementModel);
+            return models.length > 0 && models.every(model => model[prop]);
+        },
+        run(ctx) {
+            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,
+};
+export const bpmnPoolToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:bpmnPool'),
+    config: bpmnPoolToolbarConfig,
+});
+//# sourceMappingURL=config.js.map

package/dist/toolbar/icons.d.ts

@@ -0,0 +1,16 @@
+/** 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>;
+/** 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>;
+/** Task — rounded rectangle. */
+export declare const bpmnTaskIcon: import("lit-html").TemplateResult<2>;
+/** Exclusive gateway — diamond with an X. */
+export declare const bpmnGatewayIcon: import("lit-html").TemplateResult<2>;
+/** Sequence flow — solid arrow with a filled head. */
+export declare const bpmnSequenceIcon: import("lit-html").TemplateResult<2>;
+/** Pool — rectangle with a left name band. */
+export declare const bpmnPoolIcon: import("lit-html").TemplateResult<2>;
+//# sourceMappingURL=icons.d.ts.map

package/{src/toolbar/icons.ts → dist/toolbar/icons.js}

@@ -1,43 +1,37 @@
 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">
+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">
+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">
+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">
+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">
+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">
+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">
+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>`;
+//# sourceMappingURL=icons.js.map

package/dist/toolbar/senior-tool.d.ts

@@ -0,0 +1,2 @@
+export declare const bpmnSeniorTool: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=senior-tool.d.ts.map

package/{src/toolbar/senior-tool.ts → dist/toolbar/senior-tool.js}

@@ -1,11 +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
+    return {
+        name: 'BPMN',
+        content: html `<edgeless-bpmn-senior-button
       .edgeless=${block}
     ></edgeless-bpmn-senior-button>`,
-  };
+    };
 });
+//# sourceMappingURL=senior-tool.js.map

package/dist/view.d.ts

@@ -0,0 +1,7 @@
+import { type ViewExtensionContext, ViewExtensionProvider } from '@formicoidea/labre-core/ext-loader';
+export declare class BpmnViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+    setup(context: ViewExtensionContext): void;
+}
+//# sourceMappingURL=view.d.ts.map

package/dist/view.js

@@ -0,0 +1,34 @@
+import { 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 {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-bpmn-gfx';
+    }
+    effect() {
+        super.effect();
+        effects();
+        extendTemplateCategory(bpmnTemplateCategory);
+    }
+    setup(context) {
+        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);
+        }
+    }
+}
+//# sourceMappingURL=view.js.map

package/package.json

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

package/src/effects.ts

@@ -1,14 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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
-);