@bpmnkit/editor 0.0.31 → 0.0.33

package/README.md

@@ -115,10 +115,12 @@ interface SideDock {
 | [`@bpmnkit/plugins`](https://www.npmjs.com/package/@bpmnkit/plugins) | 22 composable canvas plugins |
 | [`@bpmnkit/api`](https://www.npmjs.com/package/@bpmnkit/api) | Camunda 8 REST API TypeScript client |
 | [`@bpmnkit/ascii`](https://www.npmjs.com/package/@bpmnkit/ascii) | Render BPMN diagrams as Unicode ASCII art |
+| [`@bpmnkit/docspack`](https://www.npmjs.com/package/@bpmnkit/docspack) | BPMN Kit docs as an offline docspack package for AI agents |
 | [`@bpmnkit/ui`](https://www.npmjs.com/package/@bpmnkit/ui) | Shared design tokens and UI components |
 | [`@bpmnkit/profiles`](https://www.npmjs.com/package/@bpmnkit/profiles) | Shared auth, profile storage, and client factories for CLI & proxy |
 | [`@bpmnkit/operate`](https://www.npmjs.com/package/@bpmnkit/operate) | Monitoring & operations frontend for Camunda clusters |
 | [`@bpmnkit/connector-gen`](https://www.npmjs.com/package/@bpmnkit/connector-gen) | Generate connector templates from OpenAPI specs |
+| [`@bpmnkit/connectors`](https://www.npmjs.com/package/@bpmnkit/connectors) | Camunda 8 OOTB connector catalog and deterministic template application |
 | [`@bpmnkit/cli`](https://www.npmjs.com/package/@bpmnkit/cli) | Camunda 8 command-line interface (casen) |
 | [`@bpmnkit/proxy`](https://www.npmjs.com/package/@bpmnkit/proxy) | Local AI bridge and Camunda API proxy server |
 | [`@bpmnkit/patterns`](https://www.npmjs.com/package/@bpmnkit/patterns) | Domain process patterns for BPMNKit AIKit |

package/dist/command-stack.d.ts

@@ -1,15 +1,26 @@
 import type { BpmnDefinitions } from "@bpmnkit/core";
 /**
  * Snapshot-based undo/redo history for the BPMN editor.
- * Each push stores a full copy of the definitions model; since BPMN models
- * are small the memory overhead is negligible.
+ *
+ * Each entry stores a reference to an immutable `BpmnDefinitions`. Because
+ * `modeling.ts` operations return structurally-shared copies (only the touched
+ * elements are new objects), 100 single-element edits on a large model share
+ * almost all of their memory — the stack never deep-copies.
+ *
+ * Consecutive pushes carrying the same `key` are *coalesced*: the top entry is
+ * replaced in place rather than appended, so a burst (e.g. typing a label,
+ * dragging a colour slider) collapses to a single undo step.
  */
 export declare class CommandStack {
-    private _snapshots;
+    private _entries;
     private _cursor;
     private readonly _maxSize;
-    /** Appends a new snapshot, clearing any redo states, and enforces maxSize. */
-    push(defs: BpmnDefinitions): void;
+    /**
+     * Appends a new snapshot, clearing any redo states, and enforces maxSize.
+     * When `key` matches the current top entry's key (and no redo is pending),
+     * the top entry is replaced instead — coalescing a burst into one step.
+     */
+    push(defs: BpmnDefinitions, label?: string, key?: string): void;
     /** Returns the current snapshot, or null if the stack is empty. */
     current(): BpmnDefinitions | null;
     /** Moves the cursor back one step and returns that snapshot. */
@@ -18,6 +29,10 @@ export declare class CommandStack {
     redo(): BpmnDefinitions | null;
     canUndo(): boolean;
     canRedo(): boolean;
+    /** Label of the change that `undo()` would revert, or null. */
+    undoLabel(): string | null;
+    /** Label of the change that `redo()` would re-apply, or null. */
+    redoLabel(): string | null;
     clear(): void;
 }
 //# sourceMappingURL=command-stack.d.ts.map

package/dist/command-stack.js

@@ -1,47 +1,74 @@
 /**
  * Snapshot-based undo/redo history for the BPMN editor.
- * Each push stores a full copy of the definitions model; since BPMN models
- * are small the memory overhead is negligible.
+ *
+ * Each entry stores a reference to an immutable `BpmnDefinitions`. Because
+ * `modeling.ts` operations return structurally-shared copies (only the touched
+ * elements are new objects), 100 single-element edits on a large model share
+ * almost all of their memory — the stack never deep-copies.
+ *
+ * Consecutive pushes carrying the same `key` are *coalesced*: the top entry is
+ * replaced in place rather than appended, so a burst (e.g. typing a label,
+ * dragging a colour slider) collapses to a single undo step.
  */
 export class CommandStack {
-    _snapshots = [];
+    _entries = [];
     _cursor = -1;
     _maxSize = 100;
-    /** Appends a new snapshot, clearing any redo states, and enforces maxSize. */
-    push(defs) {
-        this._snapshots.splice(this._cursor + 1);
-        this._snapshots.push(defs);
-        if (this._snapshots.length > this._maxSize) {
-            this._snapshots.shift();
+    /**
+     * Appends a new snapshot, clearing any redo states, and enforces maxSize.
+     * When `key` matches the current top entry's key (and no redo is pending),
+     * the top entry is replaced instead — coalescing a burst into one step.
+     */
+    push(defs, label = "", key) {
+        const top = this._entries[this._cursor];
+        const atTop = this._cursor === this._entries.length - 1;
+        if (key !== undefined && atTop && top && top.key === key) {
+            // Coalesce: keep the same undo entry, update its resulting state.
+            top.defs = defs;
+            top.label = label || top.label;
+            return;
         }
-        this._cursor = this._snapshots.length - 1;
+        this._entries.splice(this._cursor + 1);
+        this._entries.push({ defs, label, key });
+        if (this._entries.length > this._maxSize) {
+            this._entries.shift();
+        }
+        this._cursor = this._entries.length - 1;
     }
     /** Returns the current snapshot, or null if the stack is empty. */
     current() {
-        return this._snapshots[this._cursor] ?? null;
+        return this._entries[this._cursor]?.defs ?? null;
     }
     /** Moves the cursor back one step and returns that snapshot. */
     undo() {
         if (!this.canUndo())
             return null;
         this._cursor--;
-        return this._snapshots[this._cursor] ?? null;
+        return this._entries[this._cursor]?.defs ?? null;
     }
     /** Moves the cursor forward one step and returns that snapshot. */
     redo() {
         if (!this.canRedo())
             return null;
         this._cursor++;
-        return this._snapshots[this._cursor] ?? null;
+        return this._entries[this._cursor]?.defs ?? null;
     }
     canUndo() {
         return this._cursor > 0;
     }
     canRedo() {
-        return this._cursor < this._snapshots.length - 1;
+        return this._cursor < this._entries.length - 1;
+    }
+    /** Label of the change that `undo()` would revert, or null. */
+    undoLabel() {
+        return this.canUndo() ? (this._entries[this._cursor]?.label ?? "") : null;
+    }
+    /** Label of the change that `redo()` would re-apply, or null. */
+    redoLabel() {
+        return this.canRedo() ? (this._entries[this._cursor + 1]?.label ?? "") : null;
     }
     clear() {
-        this._snapshots = [];
+        this._entries = [];
         this._cursor = -1;
     }
 }

package/dist/css.d.ts

@@ -3,7 +3,7 @@ export declare const EDITOR_STYLE_ID = "bpmnkit-editor-styles-v1";
 /** ID used to prevent duplicate HUD style injection. */
 export declare const HUD_STYLE_ID = "bpmnkit-editor-hud-styles-v1";
 /** CSS for editor-specific overlays injected once into `<head>`. */
-export declare const EDITOR_CSS = "\n/* Selection outline */\n.bpmnkit-sel-indicator {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  pointer-events: none;\n}\n\n/* Resize handle */\n.bpmnkit-resize-handle {\n  fill: #fff;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  cursor: nwse-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"n\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"s\"] {\n  cursor: ns-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"e\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"w\"] {\n  cursor: ew-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"ne\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"sw\"] {\n  cursor: nesw-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"nw\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"se\"] {\n  cursor: nwse-resize;\n}\n\n/* Connection port */\n.bpmnkit-conn-port {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: none;\n  cursor: crosshair;\n  opacity: 0.7;\n}\n.bpmnkit-conn-port:hover {\n  opacity: 1;\n}\n\n/* Rubber-band selection */\n.bpmnkit-rubber-band {\n  fill: rgba(0, 102, 204, 0.05);\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Ghost element (create / connect preview) */\n.bpmnkit-ghost {\n  opacity: 0.45;\n  pointer-events: none;\n}\n\n/* Ghost connection line */\n.bpmnkit-ghost-conn {\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  stroke-dasharray: 6 3;\n  fill: none;\n  pointer-events: none;\n}\n\n/* Resize preview rect */\n.bpmnkit-resize-preview {\n  fill: rgba(0, 102, 204, 0.05);\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Alignment guide lines (snap helpers) */\n.bpmnkit-align-guide {\n  stroke: var(--bpmnkit-accent-bright, #6b9df7);\n  stroke-width: 1;\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Edge transparent hit area (wide stroke for easier clicking) */\n.bpmnkit-edge-hitarea {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 12;\n  cursor: pointer;\n}\n\n/* Edge hover dot (waypoint insertion indicator) */\n.bpmnkit-edge-hover-dot {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  pointer-events: none;\n  opacity: 0.85;\n}\n[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge waypoint angle balls (visible on edge hover) */\n.bpmnkit-edge-waypoint-ball {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  cursor: move;\n}\n.bpmnkit-edge-waypoint-ball:hover { fill: var(--bpmnkit-accent, #1a56db); }\n[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge endpoint drag handles */\n.bpmnkit-edge-endpoint {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  cursor: grab;\n}\n.bpmnkit-edge-endpoint:hover {\n  fill: var(--bpmnkit-accent, #1a56db);\n}\n\n/* Ghost polyline when dragging an edge endpoint */\n.bpmnkit-endpoint-ghost {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  stroke-dasharray: 5 3;\n  pointer-events: none;\n}\n\n/* Edge split target highlight (shown while dragging a shape over an edge) */\n.bpmnkit-edge-split-highlight .bpmnkit-edge-path {\n  stroke: var(--bpmnkit-success, #22c55e);\n  stroke-width: 2.5;\n}\n\n/* Distance/spacing guide arrows */\n.bpmnkit-dist-guide {\n  stroke: var(--bpmnkit-warn, #f97316);\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n}\n\n/* Space tool split indicator line */\n.bpmnkit-space-line {\n  stroke: var(--bpmnkit-warn, #f59e0b);\n  stroke-width: 1.5;\n  stroke-dasharray: 6 3;\n  pointer-events: none;\n}\n\n/* Label editor */\n.bpmnkit-label-editor {\n  position: absolute;\n  min-width: 40px;\n  min-height: 16px;\n  padding: 1px 3px;\n  background: #fff;\n  border: 1px solid var(--bpmnkit-accent, #1a56db);\n  border-radius: 2px;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 11px;\n  text-align: center;\n  outline: none;\n  z-index: 10;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Boundary event attach highlight */\n.bpmnkit-boundary-host {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 2;\n  stroke-dasharray: 6 3;\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n/* Duplicate-ID warning banner */\n.bpmnkit-editor-warning-banner {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  max-width: calc(100% - 32px);\n  padding: 6px 12px;\n  border-radius: 6px;\n  background: #fef3c7;\n  border: 1px solid #f59e0b;\n  color: #92400e;\n  font-size: 12px;\n  line-height: 1.4;\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-editor-warning-banner {\n  background: #451a03;\n  border-color: #d97706;\n  color: #fde68a;\n}\n";
+export declare const EDITOR_CSS = "\n/* Visually-hidden live region for screen-reader announcements */\n.bpmnkit-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Keyboard-focus ring on the editor host \u2014 distinct from the selection outline */\n.bpmnkit-canvas-host:focus-visible {\n  outline: 2px dashed var(--bpmnkit-accent-bright, #3b82f6);\n  outline-offset: -2px;\n}\n\n/* Selection outline */\n.bpmnkit-sel-indicator {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  pointer-events: none;\n}\n\n/* Resize handle */\n.bpmnkit-resize-handle {\n  fill: #fff;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  cursor: nwse-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"n\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"s\"] {\n  cursor: ns-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"e\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"w\"] {\n  cursor: ew-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"ne\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"sw\"] {\n  cursor: nesw-resize;\n}\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"nw\"],\n.bpmnkit-resize-handle[data-bpmnkit-handle=\"se\"] {\n  cursor: nwse-resize;\n}\n\n/* Connection port */\n.bpmnkit-conn-port {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: none;\n  cursor: crosshair;\n  opacity: 0.7;\n}\n.bpmnkit-conn-port:hover {\n  opacity: 1;\n}\n\n/* Rubber-band selection */\n.bpmnkit-rubber-band {\n  fill: rgba(0, 102, 204, 0.05);\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Ghost element (create / connect preview) */\n.bpmnkit-ghost {\n  opacity: 0.45;\n  pointer-events: none;\n}\n\n/* Ghost connection line */\n.bpmnkit-ghost-conn {\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  stroke-dasharray: 6 3;\n  fill: none;\n  pointer-events: none;\n}\n\n/* Ghost connection over a target the rules forbid */\n.bpmnkit-ghost-conn-invalid {\n  stroke: var(--bpmnkit-danger, #dc2626);\n}\n\n/* Resize preview rect */\n.bpmnkit-resize-preview {\n  fill: rgba(0, 102, 204, 0.05);\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Alignment guide lines (snap helpers) */\n.bpmnkit-align-guide {\n  stroke: var(--bpmnkit-accent-bright, #6b9df7);\n  stroke-width: 1;\n  stroke-dasharray: 4 2;\n  pointer-events: none;\n}\n\n/* Edge transparent hit area (wide stroke for easier clicking) */\n.bpmnkit-edge-hitarea {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 12;\n  cursor: pointer;\n}\n\n/* Edge hover dot (waypoint insertion indicator) */\n.bpmnkit-edge-hover-dot {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  pointer-events: none;\n  opacity: 0.85;\n}\n[data-theme=\"dark\"] .bpmnkit-edge-hover-dot { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge waypoint angle balls (visible on edge hover) */\n.bpmnkit-edge-waypoint-ball {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  cursor: move;\n}\n.bpmnkit-edge-waypoint-ball:hover { fill: var(--bpmnkit-accent, #1a56db); }\n[data-theme=\"dark\"] .bpmnkit-edge-waypoint-ball { fill: var(--bpmnkit-accent, #6b9df7); }\n\n/* Edge endpoint drag handles */\n.bpmnkit-edge-endpoint {\n  fill: var(--bpmnkit-accent, #1a56db);\n  stroke: #fff;\n  stroke-width: 1.5;\n  cursor: grab;\n}\n.bpmnkit-edge-endpoint:hover {\n  fill: var(--bpmnkit-accent, #1a56db);\n}\n\n/* Ghost polyline when dragging an edge endpoint */\n.bpmnkit-endpoint-ghost {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 1.5;\n  stroke-dasharray: 5 3;\n  pointer-events: none;\n}\n\n/* Edge split target highlight (shown while dragging a shape over an edge) */\n.bpmnkit-edge-split-highlight .bpmnkit-edge-path {\n  stroke: var(--bpmnkit-success, #22c55e);\n  stroke-width: 2.5;\n}\n\n/* Distance/spacing guide arrows */\n.bpmnkit-dist-guide {\n  stroke: var(--bpmnkit-warn, #f97316);\n  stroke-width: 1;\n  fill: none;\n  pointer-events: none;\n}\n\n/* Space tool split indicator line */\n.bpmnkit-space-line {\n  stroke: var(--bpmnkit-warn, #f59e0b);\n  stroke-width: 1.5;\n  stroke-dasharray: 6 3;\n  pointer-events: none;\n}\n\n/* Label editor */\n.bpmnkit-label-editor {\n  position: absolute;\n  min-width: 40px;\n  min-height: 16px;\n  padding: 1px 3px;\n  background: #fff;\n  border: 1px solid var(--bpmnkit-accent, #1a56db);\n  border-radius: 2px;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 11px;\n  text-align: center;\n  outline: none;\n  z-index: 10;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Boundary event attach highlight */\n.bpmnkit-boundary-host {\n  fill: none;\n  stroke: var(--bpmnkit-accent, #1a56db);\n  stroke-width: 2;\n  stroke-dasharray: 6 3;\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n/* Duplicate-ID warning banner */\n.bpmnkit-editor-warning-banner {\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 100;\n  max-width: calc(100% - 32px);\n  padding: 6px 12px;\n  border-radius: 6px;\n  background: #fef3c7;\n  border: 1px solid #f59e0b;\n  color: #92400e;\n  font-size: 12px;\n  line-height: 1.4;\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.bpmnkit-canvas-host[data-theme=\"dark\"] .bpmnkit-editor-warning-banner {\n  background: #451a03;\n  border-color: #d97706;\n  color: #fde68a;\n}\n\n/* Coarse pointers (touch): enlarge drag targets to a finger-friendly \u226524px.\n   Resize handles are 7px rects centred on the corner; grow + recentre them.\n   Endpoint / waypoint / port circles grow via the SVG geometry 'r' property. */\n@media (pointer: coarse) {\n  .bpmnkit-resize-handle {\n    width: 24px;\n    height: 24px;\n    transform: translate(-8.5px, -8.5px);\n  }\n  .bpmnkit-edge-endpoint,\n  .bpmnkit-edge-waypoint-ball,\n  .bpmnkit-conn-port {\n    r: 12px;\n  }\n}\n";
 /** Injects the editor stylesheet into `<head>` if not already present. */
 export declare function injectEditorStyles(): void;
 /** CSS for the editor HUD — panels, buttons, dropdowns, group picker.

package/dist/css.js

@@ -4,6 +4,25 @@ export const EDITOR_STYLE_ID = "bpmnkit-editor-styles-v1";
 export const HUD_STYLE_ID = "bpmnkit-editor-hud-styles-v1";
 /** CSS for editor-specific overlays injected once into `<head>`. */
 export const EDITOR_CSS = `
+/* Visually-hidden live region for screen-reader announcements */
+.bpmnkit-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Keyboard-focus ring on the editor host — distinct from the selection outline */
+.bpmnkit-canvas-host:focus-visible {
+  outline: 2px dashed var(--bpmnkit-accent-bright, #3b82f6);
+  outline-offset: -2px;
+}
+
 /* Selection outline */
 .bpmnkit-sel-indicator {
   fill: none;
@@ -70,6 +89,11 @@ export const EDITOR_CSS = `
   pointer-events: none;
 }
 
+/* Ghost connection over a target the rules forbid */
+.bpmnkit-ghost-conn-invalid {
+  stroke: var(--bpmnkit-danger, #dc2626);
+}
+
 /* Resize preview rect */
 .bpmnkit-resize-preview {
   fill: rgba(0, 102, 204, 0.05);
@@ -209,6 +233,22 @@ export const EDITOR_CSS = `
   border-color: #d97706;
   color: #fde68a;
 }
+
+/* Coarse pointers (touch): enlarge drag targets to a finger-friendly ≥24px.
+   Resize handles are 7px rects centred on the corner; grow + recentre them.
+   Endpoint / waypoint / port circles grow via the SVG geometry 'r' property. */
+@media (pointer: coarse) {
+  .bpmnkit-resize-handle {
+    width: 24px;
+    height: 24px;
+    transform: translate(-8.5px, -8.5px);
+  }
+  .bpmnkit-edge-endpoint,
+  .bpmnkit-edge-waypoint-ball,
+  .bpmnkit-conn-port {
+    r: 12px;
+  }
+}
 `;
 /** Injects the editor stylesheet into `<head>` if not already present. */
 export function injectEditorStyles() {

package/dist/editor.d.ts

@@ -1,5 +1,7 @@
+import { OverlayManager } from "@bpmnkit/canvas";
 import type { Theme } from "@bpmnkit/canvas";
 import type { BpmnDefinitions, DiColor } from "@bpmnkit/core";
+import type { Translate } from "./i18n.js";
 import type { CreateShapeType, EditorEvents, EditorOptions, LabelPosition, Tool } from "./types.js";
 /**
  * BpmnEditor — a full BPMN 2.0 diagram editor with create, move, resize,
@@ -20,6 +22,7 @@ export declare class BpmnEditor {
     private readonly _viewport;
     private readonly _keyboard;
     private readonly _overlay;
+    private readonly _htmlOverlays;
     private readonly _commandStack;
     private readonly _stateMachine;
     private readonly _labelEditor;
@@ -39,6 +42,9 @@ export declare class BpmnEditor {
     private _readOnly;
     private _isDragging;
     private _boundaryHostId;
+    private readonly _t;
+    private readonly _liveRegion;
+    private _lastTap;
     private _warningBanner;
     private readonly _listeners;
     private readonly _ro;
@@ -60,6 +66,30 @@ export declare class BpmnEditor {
     setTool(tool: Tool): void;
     setSelection(ids: string[]): void;
     deleteSelected(): void;
+    /** Bounds of the currently-selected shapes (edges have none, and are skipped). */
+    private _selectedShapeBounds;
+    /**
+     * Aligns the selected shapes along an edge or centre-line, as a single
+     * undoable command. No-op for fewer than two selected shapes.
+     */
+    alignSelected(edge: "left" | "center" | "right" | "top" | "middle" | "bottom"): void;
+    /**
+     * Distributes the selected shapes so the gaps between them are equal along
+     * the axis (the outermost two stay fixed), as a single undoable command.
+     * No-op for fewer than three selected shapes.
+     */
+    distributeSelected(axis: "horizontal" | "vertical"): void;
+    /**
+     * Searches the model (recursively, including sub-process children) for
+     * elements matching `query`, ranked: a word-prefix match on the name beats a
+     * name substring, which beats an id or type match. Returns `[]` for a blank
+     * query.
+     */
+    find(query: string): Array<{
+        id: string;
+        label: string;
+        type: string;
+    }>;
     undo(): void;
     redo(): void;
     canUndo(): boolean;
@@ -71,11 +101,20 @@ export declare class BpmnEditor {
     get container(): HTMLElement;
     getTheme(): "light" | "dark" | "neon";
     setTheme(theme: Theme): void;
+    /** HTML overlays anchored to diagram elements (badges, tooltips, panels). */
+    get overlays(): OverlayManager;
+    /**
+     * The resolved translation hook (from `options.translate`, or identity).
+     * Used by the HUD to localize its strings; also available to plugins.
+     */
+    get translate(): Translate;
     zoomIn(): void;
     zoomOut(): void;
     setZoom(scale: number): void;
     selectAll(): void;
     paste(): void;
+    /** Copies the current selection to the clipboard and deletes it as one undo step. */
+    cut(): void;
     /** Pans the viewport to center on the element with the given id (preserves zoom). */
     scrollToElement(id: string): void;
     on<K extends keyof EditorEvents>(event: K, handler: EditorEvents[K]): () => void;
@@ -84,7 +123,16 @@ export declare class BpmnEditor {
     private _setDuplicateIdWarning;
     private _renderDefs;
     private _executeCommand;
+    /** Label of the change `undo()` would revert (for HUD tooltips), or null. */
+    getUndoLabel(): string | null;
+    /** Label of the change `redo()` would re-apply (for HUD tooltips), or null. */
+    getRedoLabel(): string | null;
     private _setSelection;
+    /** Human-readable name for an element (its label, else its type). */
+    private _displayName;
+    /** Pushes `message` to the aria-live region for assistive technology. */
+    private _announce;
+    private _announceSelection;
     private _previewTranslate;
     private _cancelTranslate;
     private _commitTranslate;
@@ -95,8 +143,12 @@ export declare class BpmnEditor {
     private _doConnect;
     private _doCopy;
     private _doPaste;
+    private _doCut;
     private _startLabelEdit;
     private _connectSourceBounds;
+    private _connectSourceId;
+    /** True when hovering a target the connect tool would reject (self, or a rule violation). */
+    private _isConnectTargetInvalid;
     /** Returns screen-space bounds of a shape (for positioning overlays). */
     getShapeBounds(id: string): {
         x: number;
@@ -151,6 +203,8 @@ export declare class BpmnEditor {
     private readonly _onPointerDown;
     private readonly _onPointerMove;
     private readonly _onPointerUp;
+    /** On coarse pointers, a double-tap on a shape starts label editing (mirrors dblclick). */
+    private _detectDoubleTap;
     private readonly _onPointerCancel;
     private readonly _onDblClick;
     private readonly _onKeyDown;
@@ -160,6 +214,12 @@ export declare class BpmnEditor {
     /** Snaps a diagram point to nearby shape/waypoint positions and returns guide lines. */
     private _snapWaypoint;
     private _applyTheme;
+    /** Finds the SVG group for a shape or edge by BPMN id. */
+    private _elementById;
+    /** Element bounding box in screen pixels relative to the host, or `null`. */
+    private _absoluteBBox;
+    /** Diagram-coordinate bounds of a shape (from DI) or edge (waypoint bbox). */
+    private _boundsById;
     private _installPlugin;
     private _emit;
 }