@miragon/event-storming-renderer 0.4.1 → 0.5.1

package/README.md

@@ -1,7 +1,7 @@
 # @miragon/event-storming-renderer
 
 [![npm](https://img.shields.io/npm/v/@miragon/event-storming-renderer)](https://www.npmjs.com/package/@miragon/event-storming-renderer)
-[![License: MIT](https://img.shields.io/github/license/Miragon/event-storming-modeler)](https://github.com/Miragon/event-storming-modeler/blob/main/LICENSE)
+[![License: MIT](https://img.shields.io/github/license/Miragon/modeler-suite)](https://github.com/Miragon/modeler-suite/blob/main/modelers/event-storming/LICENSE)
 
 [diagram-js](https://github.com/bpmn-io/diagram-js)-based renderer for
 [Event Storming](https://www.eventstorming.com/) boards: `Viewer`, `NavigatedViewer`, and a full
@@ -16,10 +16,10 @@ npm install @miragon/event-storming-renderer
 ## Usage
 
 ```ts
-import { NavigatedViewer } from '@miragon/event-storming-renderer';
-import '@miragon/event-storming-renderer/assets/event-storming.css';
+import { NavigatedViewer } from "@miragon/event-storming-renderer";
+import "@miragon/event-storming-renderer/assets/event-storming.css";
 
-const viewer = new NavigatedViewer({ container: document.querySelector('#canvas')! });
+const viewer = new NavigatedViewer({ container: document.querySelector("#canvas")! });
 
 await viewer.importDSL(`title Order Checkout
 actor Customer [80, 300]
@@ -31,11 +31,12 @@ Place Order -> Order Placed`);
 const board = viewer.exportMap(); // canonical JSON model
 const dsl = viewer.exportDSL(); // back to .storm text
 const { svg } = await viewer.saveSVG();
+const box = viewer.contentBounds(); // the board's tight box, undefined while it is empty
 ```
 
 Swap `NavigatedViewer` for `Modeler` to get the editable board (sticky palette, context pad,
 arrows, undo/redo). Stickies are colored per kind (`STICKY_STYLES`): domain event, command,
-actor, aggregate, policy, read model, external system, hotspot — plus free-text notes and
+actor, aggregate, policy, read model, external system and hotspot, plus free-text notes and
 freeform drawings on an unbounded canvas.
 
 ### Options
@@ -56,7 +57,7 @@ chrome covers, or `{ center: () => ({ x, y }) }`, the free centre in diagram coo
 (`undefined` while there is none). `freeArea`, `fitOnImport` and `undoRedoKeys` are the names of
 the [`@miragon/modeler-api`](https://www.npmjs.com/package/@miragon/modeler-api) factory options
 (contract 1.2), the same for every Miragon renderer. `freeRectInsets: () => insets`, the earlier
-name of `freeArea: { insets }`, is deprecated and still accepted until the next minor release;
+name of `freeArea: { insets }`, is deprecated: still accepted through 0.5.x and removed in 0.6.0;
 given both, `freeArea` wins. Pass `fitOnImport: false` when the host sets the view after every
 import itself.
 
@@ -64,15 +65,41 @@ Pass `undoRedoKeys: false` when the host owns the history, as the VS Code extens
 then reach the host untouched and the host undoes the document, while copy, paste, delete, the
 arrow keys and the single-key tools keep working on the canvas.
 
-The modeler's keyboard listens on `document`, but only acts on keys aimed at the canvas: the
-target lies inside the canvas container, or nothing is focused (`document.body`). Keys another
-listener already handled (`defaultPrevented`) and keys typed into text fields are left alone, and
-the canvas container gets no `tabindex` of its own. Cmd/Ctrl+A selects the whole board. An import
-erases the undo history without firing `commandStack.changed`, and fires `import.parse.start`,
-`import.render.start` and `import.done` in that order. It frames the content centred at the
-largest zoom that shows all of it, never above 100%; an empty board shows at 100%. A label being
+The modeler's keyboard listens on `document`, but acts only while the canvas itself has the focus:
+the key's target is the canvas `<svg>` or lies inside it, the element diagram-js 15 binds its own
+keyboard to. `<body>` does not count, so no key acts right after a load or after a click on page
+text, and the palette, the context pad and the label editor, which sit next to the `<svg>`, keep
+their keys. Keys another listener already handled (`defaultPrevented`), events without a `key` and
+keys typed during an IME composition are left alone, and the canvas container gets no `tabindex` of
+its own. A pointer click or drag on a palette entry, a click on a context-pad entry that opens no
+editor or popup (delete, connect, append, line style) and a picked colour hand the focus to the
+canvas, without the keyboard focus ring. Enter and Space on a tool entry (lasso, draw) leave the
+focus on the entry; on a creating entry they place the sticky in the middle of the free area and
+open its label editor. While a line is drawn, Enter and Escape end it only when aimed at the
+modeler's container (the canvas, the palette or the context pad), never at a text field or a control
+outside the container, and every point focuses the canvas. To keep the keys away from a canvas it
+hides without destroying it, a host makes it `inert` (or `display: none`): the browser then moves
+the focus off the `<svg>` at its next rendering update. Cmd/Ctrl+A selects the whole board. An
+import erases the undo history without firing `commandStack.changed`, and fires
+`import.parse.start`, `import.render.start` and `import.done` in that order. It frames the content
+centred at the largest zoom that shows all of it, never above 100%; an empty board shows at 100%. A
+board with arrow annotations is imported once the font they are set in has loaded (or failed to), so
+that the fit on import, and a host's fit after the import resolves, frame them as drawn and not as
+the fallback font would set them; imports still run in the order they were called. A label being
 typed when an import arrives is reopened on the same element afterwards, with the typed text.
 
+`contentBounds()` gives the tight box around what the board draws (`{ x, y, width, height }` in
+board coordinates, which zoom and scroll leave alone): every sticky, note and drawing, a hotspot
+with its tilt, and every arrow's annotation, which can reach far past the two stickies it stands
+between. It reads the live canvas and measures the annotations on a 2D canvas, so a zoom never
+changes it, and gives `undefined` while the board has no element. The annotations are drawn with
+`text-rendering: geometricPrecision`, as they are measured: without it Chromium lays SVG text out
+at the zoomed font size, and where it rounds glyph advances to whole pixels (Linux) the drawn text
+grows and shrinks with the zoom. A host that fits the view itself fits to it and adds its own
+margins; the importer's fit and the SVG export frame the same box with padding. A sticky's label
+wider than the sticky can overhang it, since the wrapping goes by an estimated character width;
+that overhang is not part of the box.
+
 Enter or Space on a creating palette entry (a click without a pointer, `detail` 0) places the
 element in the centre of `freeArea` (the container minus the margins a host's chrome covers, or the
 centre the host names; without it the container's centre), 24px down and right while that spot is
@@ -90,7 +117,7 @@ drawing keeps literal light colours in its SVG attributes, so exports look the s
 
 ### Collaborative hosts
 
-The package implements the collaborative-modeler contract 1.2 of
+The package implements the collaborative-modeler contract 1.3 of
 [`@miragon/modeler-api`](https://www.npmjs.com/package/@miragon/modeler-api) (notation
 `event-storming`) and runs its conformance kit in CI, every case and no advisory:
 
@@ -98,7 +125,7 @@ The package implements the collaborative-modeler contract 1.2 of
 import {
   createCollaborativeModeler,
   createCollaborativeViewer,
-} from '@miragon/event-storming-renderer';
+} from "@miragon/event-storming-renderer";
 
 const modeler = createCollaborativeModeler(); // meta.editable: true
 modeler.attachTo(host); // in the document, with a size
@@ -132,13 +159,19 @@ const viewer = createCollaborativeViewer(); // meta.editable: false, never chang
   top-left corner and the size, which zoom and scroll leave alone), read from the live canvas: a
   sticky created or moved in the session has its current box. Any other id gives `undefined`. The
   viewer answers it too.
+- `contentBounds()` (contract 1.3) is the board's tight box, as on the `Modeler` and the viewers
+  above: it covers every `elements.bounds` box, the notes and drawings, a hotspot's tilt and every
+  arrow's annotation, and is `undefined` for a board without elements, before the first import and
+  after `destroy()`. The modeler shell's `connectDiagramJs(shell, diagram, { modeler })` fits to
+  it. The viewer answers it too.
 - New sticky ids are random: a sticky created on the canvas (palette, keyboard, append, paste) gets
   `<prefix>_<8 characters of [0-9a-z]>`, such as `(id event_k3x9q2ab)`, so two peers that each add
   one at the same time do not pick the same id. Ids already in a text are read as they are.
 - `diagram` is the wrapped `Modeler` or `NavigatedViewer`, for everything outside the contract.
   `createCollaborativeModeler` and `createCollaborativeViewer` accept the same options:
   `additionalModules`, `fitOnImport`, and for the modeler `undoRedoKeys` and `freeArea` (the
-  viewer ignores those two); the deprecated `freeRectInsets` still works for one minor release.
+  viewer ignores those two); the deprecated `freeRectInsets` still works through 0.5.x and goes
+  in 0.6.0.
 - After `destroy()`, `exportText()` returns the last state and `importText()` rejects.
 
 #### Migrating a host
@@ -161,14 +194,14 @@ const viewer = createCollaborativeViewer(); // meta.editable: false, never chang
 ### Fonts
 
 The package ships no fonts and uses no CDN. The canvas typeface is **Geist** (Miragon corporate
-identity); provide it yourself — recommended self-hosted via [`@fontsource`](https://fontsource.org/)
+identity); provide it yourself, preferably self-hosted via [`@fontsource`](https://fontsource.org/)
 (one variable file covers all weights):
 
 ```ts
-import '@fontsource-variable/geist/wght.css';
+import "@fontsource-variable/geist/wght.css";
 ```
 
-Part of the [Event Storming Modeler](https://github.com/Miragon/event-storming-modeler) monorepo.
+Part of the [Event Storming Modeler](https://github.com/Miragon/modeler-suite/tree/main/modelers/event-storming) in the [Miragon modeler suite](https://github.com/Miragon/modeler-suite).
 
 ## License
 

package/dist/EventStormingBaseViewer.d.ts

@@ -1,5 +1,6 @@
 import { ModuleDeclaration } from 'didi';
 import { EventStormingBoard } from '@miragon/event-storming-schema-model';
+import { Bounds } from './board-bounds/BoardBounds.js';
 import { ImportWarning } from './io/types.js';
 import { FreeArea, FreeRectInsets } from './palette/EventStormingPaletteProvider.js';
 export interface EventStormingViewerOptions {
@@ -22,8 +23,8 @@ export interface EventStormingViewerOptions {
      */
     freeArea?: FreeArea | undefined;
     /**
-     * @deprecated Pass `freeArea: { insets }` instead. Accepted until the next minor release;
-     * `freeArea` wins when both are given.
+     * @deprecated Pass `freeArea: { insets }` instead. Accepted through renderer 0.5.x and removed
+     * in 0.6.0; `freeArea` wins when both are given.
      */
     freeRectInsets?: (() => FreeRectInsets) | undefined;
     /**
@@ -46,16 +47,28 @@ export declare abstract class EventStormingBaseViewer {
     private _diagram;
     private readonly _container;
     private readonly _options;
+    /** The last import still waiting for its turn; a later one queues behind it. */
+    private _waitingImport;
     constructor(options?: EventStormingViewerOptions);
     private _createContainer;
     private _ensureDiagram;
     get<T>(name: string): T;
     on<T = unknown>(event: string, callback: EventCallback<T>, priority?: number): void;
     off(event: string, callback: EventCallback): void;
-    /** Load a board into the canvas (replaces existing content). */
+    /**
+     * Load a board into the canvas (replaces existing content). Resolves once the board stands
+     * fitted on its final content box: an annotated board waits for its annotations' font first.
+     */
     importMap(board: EventStormingBoard): Promise<{
         warnings: ImportWarning[];
     }>;
+    /**
+     * What an import waits for, `undefined` when it can run at once. The fit on import (the
+     * importer's and every host's after it) frames the annotations as measured, so they are measured
+     * in their own font, not in the fallback a board opened before it loaded would get; imports
+     * still run in call order, the waiting one before a later one that would not have to wait.
+     */
+    private _importTurn;
     /** Load `.storm` DSL text (internally parse -> importMap). Parser findings land in the warnings. */
     importDSL(text: string): Promise<{
         warnings: ImportWarning[];
@@ -63,6 +76,13 @@ export declare abstract class EventStormingBaseViewer {
     /** Current state as the canonical model (from the DI properties). */
     exportMap(): EventStormingBoard;
     exportDSL(): string;
+    /**
+     * The tight box around what the board draws, in diagram coordinates, which zoom and scroll leave
+     * alone: every sticky, note and drawing, a hotspot with its tilt and every arrow annotation.
+     * `undefined` while the board has no element. What a host fits its view to (modeler-api 1.3
+     * `contentBounds`); read from the live canvas, so an element created or moved counts at once.
+     */
+    contentBounds(): Bounds | undefined;
     /** Static, standalone SVG — framed by the content bounds of the free canvas. */
     saveSVG(): Promise<{
         svg: string;

package/dist/EventStormingBaseViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventStormingBaseViewer.d.ts","sourceRoot":"","sources":["../src/EventStormingBaseViewer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAO/F,OAAO,EAAW,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,0BAA0B;IACzC,kGAAkG;IAClG,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,cAAc,CAAC,GAAG,SAAS,CAAC;IACpD;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAkB5D;;;;;;GAMG;AACH,8BAAsB,uBAAuB;IAC3C,SAAS,CAAC,QAAQ,CAAC,WAAW,IAAI,iBAAiB,EAAE;IAErD,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6B;gBAE1C,OAAO,GAAE,0BAA+B;IAKpD,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;IActB,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;IAIvB,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,SAAO,GAAG,IAAI;IAIjF,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAIjD,gEAAgE;IAC1D,SAAS,CAAC,KAAK,EAAE,kBAAkB,GAAG,OAAO,CAAC;QAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;KAAE,CAAC;IAuBlF,oGAAoG;IAC9F,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;KAAE,CAAC;IAkBrE,qEAAqE;IACrE,SAAS,IAAI,kBAAkB;IAI/B,SAAS,IAAI,MAAM;IAInB,gFAAgF;IAC1E,OAAO,IAAI,OAAO,CAAC;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAOzC,yFAAyF;IACzF,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAK/B,4EAA4E;IAC5E,MAAM,IAAI,IAAI;IAId,KAAK,IAAI,IAAI;IAIb,OAAO,IAAI,IAAI;IAQf,IAAI,SAAS,IAAI,WAAW,CAE3B;CACF"}
+{"version":3,"file":"EventStormingBaseViewer.d.ts","sourceRoot":"","sources":["../src/EventStormingBaseViewer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAM/F,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAW,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,0BAA0B;IACzC,kGAAkG;IAClG,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,cAAc,CAAC,GAAG,SAAS,CAAC;IACpD;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnC;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAsB5D;;;;;;GAMG;AACH,8BAAsB,uBAAuB;IAC3C,SAAS,CAAC,QAAQ,CAAC,WAAW,IAAI,iBAAiB,EAAE;IAErD,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6B;IACtD,gFAAgF;IAChF,OAAO,CAAC,cAAc,CAA+B;gBAEzC,OAAO,GAAE,0BAA+B;IAKpD,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;IActB,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;IAIvB,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,SAAO,GAAG,IAAI;IAIjF,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAIjD;;;OAGG;IACG,SAAS,CAAC,KAAK,EAAE,kBAAkB,GAAG,OAAO,CAAC;QAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;KAAE,CAAC;IA6BlF;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAUnB,oGAAoG;IAC9F,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;KAAE,CAAC;IAkBrE,qEAAqE;IACrE,SAAS,IAAI,kBAAkB;IAI/B,SAAS,IAAI,MAAM;IAInB;;;;;OAKG;IACH,aAAa,IAAI,MAAM,GAAG,SAAS;IAOnC,gFAAgF;IAC1E,OAAO,IAAI,OAAO,CAAC;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAOzC,yFAAyF;IACzF,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAK/B,4EAA4E;IAC5E,MAAM,IAAI,IAAI;IAId,KAAK,IAAI,IAAI;IAIb,OAAO,IAAI,IAAI;IAQf,IAAI,SAAS,IAAI,WAAW,CAE3B;CACF"}

package/dist/board-bounds/BoardBounds.d.ts

@@ -6,21 +6,22 @@ export interface Bounds {
     height: number;
 }
 /**
- * Content bounds of the free Event Storming canvas — no rendering, no constraint. The single
- * bounds source for the SVG export viewBox and the apps' fitView (connections always run
- * between shapes, so the shape bbox covers everything).
+ * Content bounds of the free Event Storming canvas: every shape, a hotspot with its tilt, and every
+ * arrow's annotation, which stands between two stickies and can reach far past both. The single
+ * bounds source for the SVG export viewBox, the importer's fit and `contentBounds()`.
  */
 export default class BoardBounds {
     private readonly elementRegistry;
     static $inject: string[];
     constructor(elementRegistry: ElementRegistry);
     /**
-     * Bounding box over all elements, padded on every side. An empty board falls back to the
-     * schema-model default framing so fitView/export behave sensibly before the first sticky.
+     * Bounding box over everything the board draws, padded on every side. An empty board falls back
+     * to the schema-model default framing so fitView/export behave sensibly before the first sticky.
      */
     contentBounds(padding?: number): Bounds;
     /** No element on the board: `contentBounds` is only the default framing then. */
     isEmpty(): boolean;
+    private drawnBoxes;
     private positionedShapes;
 }
 //# sourceMappingURL=BoardBounds.d.ts.map

package/dist/board-bounds/BoardBounds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BoardBounds.d.ts","sourceRoot":"","sources":["../../src/board-bounds/BoardBounds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AAIvE,MAAM,WAAW,MAAM;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAwBD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAW;IAGlB,OAAO,CAAC,QAAQ,CAAC,eAAe;IAF5C,MAAM,CAAC,OAAO,WAAuB;gBAER,eAAe,EAAE,eAAe;IAE7D;;;OAGG;IACH,aAAa,CAAC,OAAO,SAAM,GAAG,MAAM;IAgBpC,iFAAiF;IACjF,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,gBAAgB;CAGzB"}
+{"version":3,"file":"BoardBounds.d.ts","sourceRoot":"","sources":["../../src/board-bounds/BoardBounds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AAKvE,MAAM,WAAW,MAAM;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAyBD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAW;IAGlB,OAAO,CAAC,QAAQ,CAAC,eAAe;IAF5C,MAAM,CAAC,OAAO,WAAuB;gBAER,eAAe,EAAE,eAAe;IAE7D;;;OAGG;IACH,aAAa,CAAC,OAAO,SAAM,GAAG,MAAM;IAgBpC,iFAAiF;IACjF,OAAO,IAAI,OAAO;IAIlB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,gBAAgB;CAGzB"}

package/dist/board-menu/ShortcutsDialog.d.ts

@@ -3,7 +3,7 @@ import { BoardShortcutOptions, ShortcutsChrome } from './shortcuts.js';
 export interface ShortcutsDialogChrome extends ShortcutsChrome {
     /** Where the dialog lives (the shell root), so it shares the chrome's mode and fonts. */
     readonly root: HTMLElement;
-    readonly messages: ShortcutsChrome['messages'] & {
+    readonly messages: ShortcutsChrome["messages"] & {
         readonly close: string;
     };
     /** The control the focus returns to once the dialog closes. */

package/dist/board-menu/menu.d.ts

@@ -1,6 +1,6 @@
 import { BoardLevel } from '@miragon/event-storming-schema-model';
 /** The icons the guide gives these entries (guide §5.14, the shell's common set). */
-export type BoardMenuIcon = 'file-image' | 'file-code-corner' | 'keyboard';
+export type BoardMenuIcon = "file-image" | "file-code-corner" | "keyboard";
 interface BoardMenuItem {
     readonly id: string;
     readonly label: string;
@@ -8,21 +8,21 @@ interface BoardMenuItem {
     readonly keepEnabledWhenReadOnly?: boolean;
 }
 export interface BoardMenuAction extends BoardMenuItem {
-    readonly kind: 'action';
+    readonly kind: "action";
     readonly shortcut?: string;
     onSelect(): void;
 }
 export interface BoardMenuDialog extends BoardMenuItem {
-    readonly kind: 'dialog';
+    readonly kind: "dialog";
     onSelect(): void;
 }
 export interface BoardMenuCheckbox extends BoardMenuItem {
-    readonly kind: 'checkbox';
+    readonly kind: "checkbox";
     checked(): boolean;
     onToggle(checked: boolean): void;
 }
 export interface BoardMenuRadioGroup {
-    readonly kind: 'radio';
+    readonly kind: "radio";
     readonly id: string;
     readonly label: string;
     readonly options: ReadonlyArray<{

package/dist/board-menu/shortcuts.d.ts

@@ -1,4 +1,4 @@
-export type ShortcutPlatform = 'mac' | 'other';
+export type ShortcutPlatform = "mac" | "other";
 export interface ShortcutKeyNames {
     readonly ctrl: string;
     readonly shift: string;
@@ -34,7 +34,7 @@ export interface BoardShortcutOptions {
     readonly fileKeys?: boolean | undefined;
 }
 /** "⌘O" on macOS, "Ctrl+O" elsewhere: the chip of a Cmd/Ctrl key the app binds itself. */
-export declare function commandKeyLabel(key: string, platform: ShortcutPlatform, keyNames: Pick<ShortcutKeyNames, 'ctrl'>): string;
+export declare function commandKeyLabel(key: string, platform: ShortcutPlatform, keyNames: Pick<ShortcutKeyNames, "ctrl">): string;
 /**
  * Every shortcut of the board, grouped as guide §5.4 asks (View, Edit, the notation's tools),
  * after the web app's File keys where it binds them.

package/dist/collaborative/CollaborativeEventStorming.d.ts

@@ -1,4 +1,4 @@
-import { CollaborativeModeler, CollaborativeModelerOptions, ElementsSurface } from '@miragon/modeler-api';
+import { CollaborativeModeler, CollaborativeModelerOptions, ElementBounds, ElementsSurface } from '@miragon/modeler-api';
 import { ModuleDeclaration } from 'didi';
 import { Modeler } from '../Modeler.js';
 import { NavigatedViewer } from '../NavigatedViewer.js';
@@ -14,15 +14,20 @@ export interface CollaborativeEventStormingOptions extends CollaborativeModelerO
     /** Appended to the renderer's own modules (e.g. a host's chrome module). */
     additionalModules?: ModuleDeclaration[] | undefined;
     /**
-     * @deprecated Pass `freeArea: { insets }` instead. Accepted until the next minor release;
-     * `freeArea` wins when both are given.
+     * @deprecated Pass `freeArea: { insets }` instead. Accepted through renderer 0.5.x and removed
+     * in 0.6.0; `freeArea` wins when both are given.
      */
     freeRectInsets?: (() => FreeRectInsets) | undefined;
 }
 /** The elements surface with `bounds`, which every Event Storming mount answers. */
-export type EventStormingElementsSurface = ElementsSurface & Required<Pick<ElementsSurface, 'bounds'>>;
+export type EventStormingElementsSurface = ElementsSurface & Required<Pick<ElementsSurface, "bounds">>;
 /** The contract surface plus the wrapped diagram for host-specific wiring. */
 export interface CollaborativeEventStormingModeler extends CollaborativeModeler {
+    /**
+     * The tight box around what the board draws, arrow annotations and a hotspot's tilt included;
+     * `undefined` while it has no element (contract 1.3).
+     */
+    contentBounds(): ElementBounds | undefined;
     readonly elements: EventStormingElementsSurface;
     readonly diagram: Modeler | NavigatedViewer;
 }

package/dist/collaborative/CollaborativeEventStorming.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollaborativeEventStorming.d.ts","sourceRoot":"","sources":["../../src/collaborative/CollaborativeEventStorming.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,2BAA2B,EAGhC,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAGjF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,mBAAmB,CAAC;AAExD;;;;GAIG;AACH,MAAM,WAAW,iCAAkC,SAAQ,2BAA2B;IACpF,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IACpD;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,cAAc,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,oFAAoF;AACpF,MAAM,MAAM,4BAA4B,GAAG,eAAe,GACxD,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;AAE5C,8EAA8E;AAC9E,MAAM,WAAW,iCAAkC,SAAQ,oBAAoB;IAC7E,QAAQ,CAAC,QAAQ,EAAE,4BAA4B,CAAC;IAChD,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC;CAC7C;AAgBD,uFAAuF;AACvF,wBAAgB,0BAA0B,CACxC,OAAO,GAAE,iCAAsC,GAC9C,iCAAiC,CASnC;AAED,+FAA+F;AAC/F,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,iCAAsC,GAC9C,iCAAiC,CAEnC"}
+{"version":3,"file":"CollaborativeEventStorming.d.ts","sourceRoot":"","sources":["../../src/collaborative/CollaborativeEventStorming.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,2BAA2B,EAChC,KAAK,aAAa,EAElB,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAGjF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,mBAAmB,CAAC;AAExD;;;;GAIG;AACH,MAAM,WAAW,iCAAkC,SAAQ,2BAA2B;IACpF,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IACpD;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,cAAc,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,oFAAoF;AACpF,MAAM,MAAM,4BAA4B,GAAG,eAAe,GACxD,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;AAE5C,8EAA8E;AAC9E,MAAM,WAAW,iCAAkC,SAAQ,oBAAoB;IAC7E;;;OAGG;IACH,aAAa,IAAI,aAAa,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,QAAQ,EAAE,4BAA4B,CAAC;IAChD,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC;CAC7C;AAgBD,uFAAuF;AACvF,wBAAgB,0BAA0B,CACxC,OAAO,GAAE,iCAAsC,GAC9C,iCAAiC,CASnC;AAED,+FAA+F;AAC/F,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,iCAAsC,GAC9C,iCAAiC,CAEnC"}

package/dist/color-picker/EventStormingColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventStormingColorPicker.d.ts","sourceRoot":"","sources":["../../src/color-picker/EventStormingColorPicker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAwB;IAazC,OAAO,CAAC,QAAQ,CAAC,MAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAd3B,MAAM,CAAC,OAAO,WAAmD;IAEjE,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IACF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAEpB;gBAGiB,MAAM,EAAE,MAAM,EAC/B,QAAQ,EAAE,QAAQ,EACD,QAAQ,EAAE,qBAAqB;IAMlD,sFAAsF;IACtF,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IA+CvE,KAAK,IAAI,IAAI;CAOd"}
+{"version":3,"file":"EventStormingColorPicker.d.ts","sourceRoot":"","sources":["../../src/color-picker/EventStormingColorPicker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAwB;IAazC,OAAO,CAAC,QAAQ,CAAC,MAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAd3B,MAAM,CAAC,OAAO,WAAmD;IAEjE,OAAO,CAAC,OAAO,CAA0B;IAEzC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAE3B;IACF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAEpB;gBAGiB,MAAM,EAAE,MAAM,EAC/B,QAAQ,EAAE,QAAQ,EACD,QAAQ,EAAE,qBAAqB;IAMlD,sFAAsF;IACtF,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IA+CvE,KAAK,IAAI,IAAI;CAUd"}

package/dist/context-pad/EventStormingContextPadProvider.d.ts

@@ -1,4 +1,5 @@
 import { default as ContextPad } from 'diagram-js/lib/features/context-pad/ContextPad';
+import { default as Canvas } from 'diagram-js/lib/core/Canvas';
 import { default as EventBus } from 'diagram-js/lib/core/EventBus';
 import { default as Modeling } from 'diagram-js/lib/features/modeling/Modeling';
 import { default as Connect } from 'diagram-js/lib/features/connect/Connect';
@@ -22,8 +23,15 @@ export default class EventStormingContextPadProvider implements ContextPadProvid
     private readonly factory;
     private readonly colorPicker;
     private readonly readOnly?;
+    private readonly canvas?;
     static $inject: string[];
-    constructor(contextPad: ContextPad, modeling: Modeling, connect: Connect, create: Create, popupMenu: PopupMenu, eventStormingModeling: EventStormingModeling, labelEditing: EventStormingLabelEditing, factory: EventStormingElementFactory, colorPicker: EventStormingColorPicker, eventBus?: EventBus, readOnly?: Pick<EventStormingReadOnly, "isReadOnly"> | undefined);
+    constructor(contextPad: ContextPad, modeling: Modeling, connect: Connect, create: Create, popupMenu: PopupMenu, eventStormingModeling: EventStormingModeling, labelEditing: EventStormingLabelEditing, factory: EventStormingElementFactory, colorPicker: EventStormingColorPicker, eventBus?: EventBus, readOnly?: Pick<EventStormingReadOnly, "isReadOnly"> | undefined, canvas?: Pick<Canvas, "focus" | "getContainer"> | undefined);
     getContextPadEntries(element: Element): ContextPadEntries;
+    /**
+     * The entries take no focus, so a click on one drops it to `<body>`, where the board's keys do
+     * not act: Cmd/Ctrl+Z after a delete or Delete after a connect would do nothing. Entries that
+     * open the label editor, the type popup or the colour picker leave the focus to them.
+     */
+    private focusingCanvas;
 }
 //# sourceMappingURL=EventStormingContextPadProvider.d.ts.map

package/dist/context-pad/EventStormingContextPadProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventStormingContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/EventStormingContextPadProvider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,SAAS,MAAM,8CAA8C,CAAC;AAC1E,OAAO,KAAK,EACV,iBAAiB,EACjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAO1D,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,KAAK,yBAAyB,MAAM,+CAA+C,CAAC;AAC3F,OAAO,KAAK,2BAA2B,MAAM,yCAAyC,CAAC;AACvF,OAAO,KAAK,wBAAwB,MAAM,6CAA6C,CAAC;AAExF,OAAO,EAA2B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAc5F,mCAAmC;AACnC,MAAM,CAAC,OAAO,OAAO,+BAAgC,YAAW,kBAAkB;IAiB9E,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,qBAAqB;IACtC,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,WAAW;IAE5B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAzB5B,MAAM,CAAC,OAAO,WAYZ;gBAGA,UAAU,EAAE,UAAU,EACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,yBAAyB,EACvC,OAAO,EAAE,2BAA2B,EACpC,WAAW,EAAE,wBAAwB,EACtD,QAAQ,CAAC,EAAE,QAAQ,EACF,QAAQ,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,YAAA;IAQvE,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB;CA6H1D"}
+{"version":3,"file":"EventStormingContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/EventStormingContextPadProvider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,SAAS,MAAM,8CAA8C,CAAC;AAC1E,OAAO,KAAK,EACV,iBAAiB,EACjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAO1D,OAAO,KAAK,qBAAqB,MAAM,sCAAsC,CAAC;AAC9E,OAAO,KAAK,yBAAyB,MAAM,+CAA+C,CAAC;AAC3F,OAAO,KAAK,2BAA2B,MAAM,yCAAyC,CAAC;AACvF,OAAO,KAAK,wBAAwB,MAAM,6CAA6C,CAAC;AAExF,OAAO,EAA2B,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAe5F,mCAAmC;AACnC,MAAM,CAAC,OAAO,OAAO,+BAAgC,YAAW,kBAAkB;IAkB9E,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,qBAAqB;IACtC,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,WAAW;IAE5B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAC1B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;IA3B1B,MAAM,CAAC,OAAO,WAaZ;gBAGA,UAAU,EAAE,UAAU,EACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,yBAAyB,EACvC,OAAO,EAAE,2BAA2B,EACpC,WAAW,EAAE,wBAAwB,EACtD,QAAQ,CAAC,EAAE,QAAQ,EACF,QAAQ,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,YAAA,EACpD,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,cAAc,CAAC,YAAA;IAQlE,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB;IAkIzD;;;;OAIG;IACH,OAAO,CAAC,cAAc;CAMvB"}

package/dist/draw/EventStormingRenderer.d.ts

@@ -15,9 +15,10 @@ export default class EventStormingRenderer extends BaseRenderer {
     /** Freeform drawing: polyline/polygon from relative points (see EventStormingDrawTool). */
     private drawDrawing;
     /**
-     * Every sticky (and the free note) is a rounded rectangle with centered, wrapped dark text
-     * inside — the label lives IN the sticky, never beside it. A user-picked `color` overrides
-     * the kind's fill; the border stays the kind's own (so the type remains recognizable).
+     * Every sticky (and the free note) is a rounded rectangle with centered, wrapped text inside —
+     * the label lives IN the sticky, never beside it. A user-picked `color` overrides the kind's
+     * fill and turns the text black or white, whichever reads better on it; the border stays the
+     * kind's own (so the type remains recognizable).
      */
     private drawSticky;
     drawConnection(visuals: SVGElement, element: ConnectionLike): SVGElement;

package/dist/draw/EventStormingRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventStormingRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/EventStormingRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAsBzF,OAAO,KAAK,wBAAwB,MAAM,6CAA6C,CAAC;AAQxF,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAiBhE,iGAAiG;AACjG,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAoCtE,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,YAAY;IAK3D,OAAO,CAAC,QAAQ,CAAC,WAAW;IAJ9B,MAAM,CAAC,OAAO,WAA4C;gBAGxD,QAAQ,EAAE,QAAQ,EACD,WAAW,EAAE,wBAAwB;IAK/C,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,GAAG,UAAU;IAMvE,2FAA2F;IAC3F,OAAO,CAAC,WAAW;IAiBnB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IA8DT,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,GAAG,UAAU;IA+BxE,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAKtC,iBAAiB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM;CAK/D"}
+{"version":3,"file":"EventStormingRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/EventStormingRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAgCzF,OAAO,KAAK,wBAAwB,MAAM,6CAA6C,CAAC;AAKxF,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,gCAAgC,CAAC;AAWhE,iGAAiG;AACjG,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAoCtE,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,YAAY;IAK3D,OAAO,CAAC,QAAQ,CAAC,WAAW;IAJ9B,MAAM,CAAC,OAAO,WAA4C;gBAGxD,QAAQ,EAAE,QAAQ,EACD,WAAW,EAAE,wBAAwB;IAK/C,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,GAAG,UAAU;IAMvE,2FAA2F;IAC3F,OAAO,CAAC,WAAW;IAiBnB;;;;;OAKG;IACH,OAAO,CAAC,UAAU;IAgET,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,GAAG,UAAU;IA+BxE,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAKtC,iBAAiB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM;CAK/D"}

package/dist/draw/contrast.d.ts

@@ -0,0 +1,8 @@
+import { MIRAGON } from '../theme/index.js';
+/**
+ * Text colour on a sticky's fill (guide §10.6): `schwarz` or `weiss`, whichever contrasts more
+ * with the fill, so a fill the user picks keeps its text readable. A translucent fill counts as
+ * it shows over the canvas ground; a fill the renderer cannot read keeps `schwarz`.
+ */
+export declare function textColorOn(fill: string): typeof MIRAGON.schwarz | typeof MIRAGON.weiss;
+//# sourceMappingURL=contrast.d.ts.map

package/dist/draw/contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast.d.ts","sourceRoot":"","sources":["../../src/draw/contrast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AA6F5C;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,OAAO,CAAC,OAAO,GAAG,OAAO,OAAO,CAAC,KAAK,CAKvF"}

package/dist/draw/extent.d.ts

@@ -0,0 +1,47 @@
+import { Point } from 'diagram-js/lib/util/Types';
+import { EventStormingConnection } from '../model/di-types.js';
+/** Hotspots stand out with a slight tilt (rotated around the sticky center). */
+export declare const HOTSPOT_ROTATION_DEG = -3;
+/** The arrow annotation (`; …`): small italic text centred above the arrow's midpoint. */
+export declare const LINK_LABEL_FONT_SIZE = 11;
+export declare const LINK_LABEL_RISE = 5;
+/**
+ * Chromium lays SVG text out at the zoomed font size and, where it snaps glyph advances to whole
+ * pixels (Linux), the annotation's width changes with the zoom, by up to a fifth. With geometric
+ * precision it lays the text out at its own size and scales the glyphs, so the canvas measure,
+ * taken with the same setting, holds at every zoom.
+ */
+export declare const LINK_LABEL_TEXT_RENDERING = "geometricPrecision";
+export interface DrawnBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface PositionedShape {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    eventStormingType?: unknown;
+}
+/**
+ * Connection endpoints from the CURRENT shape centers, cropped at the rectangle boundary
+ * (line ends at the sticky's edge, arrowhead visible — independent of z-order, and correct
+ * after moving, since recomputed on every render).
+ */
+export declare function connectionEndpoints(connection: EventStormingConnection): [Point, Point];
+/** Where the arrow annotation's baseline is centred. */
+export declare function linkLabelAnchor(connection: EventStormingConnection): Point;
+/** The box a shape covers on the canvas: a hotspot's tilt reaches past its own box. */
+export declare function drawnShapeBox(shape: PositionedShape): DrawnBox;
+/** The box of an arrow's annotation, `undefined` for an arrow without one. */
+export declare function linkLabelBox(connection: EventStormingConnection): DrawnBox | undefined;
+/**
+ * Resolves once the font faces the annotations `texts` are set in have loaded (or failed to);
+ * `undefined` when none is pending. Their box is measured in that font: before it arrives, the
+ * fallback's widths, several px off, would be what a fit frames.
+ */
+export declare function linkLabelFontLoading(texts: readonly string[]): Promise<void> | undefined;
+export {};
+//# sourceMappingURL=extent.d.ts.map

package/dist/draw/extent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extent.d.ts","sourceRoot":"","sources":["../../src/draw/extent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,KAAK,EAAE,uBAAuB,EAAsB,MAAM,sBAAsB,CAAC;AAExF,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAG9D,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAqBD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,uBAAuB,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,CAkBvF;AAED,wDAAwD;AACxD,wBAAgB,eAAe,CAAC,UAAU,EAAE,uBAAuB,GAAG,KAAK,CAG1E;AAED,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,GAAG,QAAQ,CAS9D;AAED,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,UAAU,EAAE,uBAAuB,GAAG,QAAQ,GAAG,SAAS,CAMtF;AAsBD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,SAAS,CAUxF"}

package/dist/draw/index.d.ts

@@ -3,4 +3,5 @@ import { ModuleDeclaration } from 'didi';
 export declare const eventStormingDrawModule: ModuleDeclaration;
 export { default as EventStormingRenderer } from './EventStormingRenderer.js';
 export { parseNoteMarkdown, serializeNoteMarkdown, plainNoteText, type NoteLine, type NoteRun, } from './note-markdown.js';
+export { drawnShapeBox, linkLabelBox, type DrawnBox } from './extent.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/draw/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/draw/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAI9C,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,EAAE,iBAMrC,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,aAAa,EACb,KAAK,QAAQ,EACb,KAAK,OAAO,GACb,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/draw/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAI9C,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,EAAE,iBAMrC,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,aAAa,EACb,KAAK,QAAQ,EACb,KAAK,OAAO,GACb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/draw/lucide.d.ts

@@ -5,21 +5,21 @@
  */
 export declare const LUCIDE: {
     readonly plus: "<path d=\"M5 12h14\"/><path d=\"M12 5v14\"/>";
-    readonly 'arrow-right': "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>";
+    readonly "arrow-right": "<path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/>";
     readonly pencil: "<path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\"/><path d=\"m15 5 4 4\"/>";
     readonly trash: "<path d=\"M10 11v6\"/><path d=\"M14 11v6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"/><path d=\"M3 6h18\"/><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>";
     readonly replace: "<path d=\"M14 4a1 1 0 0 1 1-1\"/><path d=\"M15 10a1 1 0 0 1-1-1\"/><path d=\"M21 4a1 1 0 0 0-1-1\"/><path d=\"M21 9a1 1 0 0 1-1 1\"/><path d=\"m3 7 3 3 3-3\"/><path d=\"M6 10V5a2 2 0 0 1 2-2h2\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>";
     readonly palette: "<path d=\"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"/><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>";
-    readonly 'line-style': "<path d=\"M11 5h2\"/><path d=\"M15 12h6\"/><path d=\"M19 5h2\"/><path d=\"M3 12h6\"/><path d=\"M3 19h18\"/><path d=\"M3 5h2\"/>";
+    readonly "line-style": "<path d=\"M11 5h2\"/><path d=\"M15 12h6\"/><path d=\"M19 5h2\"/><path d=\"M3 12h6\"/><path d=\"M3 19h18\"/><path d=\"M3 5h2\"/>";
     readonly bold: "<path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\"/>";
     readonly italic: "<line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\"/><line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\"/><line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\"/>";
     readonly list: "<path d=\"M3 5h.01\"/><path d=\"M3 12h.01\"/><path d=\"M3 19h.01\"/><path d=\"M8 5h13\"/><path d=\"M8 12h13\"/><path d=\"M8 19h13\"/>";
-    readonly 'text-align-start': "<path d=\"M21 5H3\"/><path d=\"M15 12H3\"/><path d=\"M17 19H3\"/>";
-    readonly 'text-align-center': "<path d=\"M21 5H3\"/><path d=\"M17 12H7\"/><path d=\"M19 19H5\"/>";
-    readonly 'text-align-end': "<path d=\"M21 5H3\"/><path d=\"M21 12H9\"/><path d=\"M21 19H7\"/>";
-    readonly 'align-vertical-justify-start': "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"6\" rx=\"2\"/><path d=\"M2 2h20\"/>";
-    readonly 'align-vertical-justify-center': "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 12h20\"/>";
-    readonly 'align-vertical-justify-end': "<rect width=\"14\" height=\"6\" x=\"5\" y=\"12\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 22h20\"/>";
+    readonly "text-align-start": "<path d=\"M21 5H3\"/><path d=\"M15 12H3\"/><path d=\"M17 19H3\"/>";
+    readonly "text-align-center": "<path d=\"M21 5H3\"/><path d=\"M17 12H7\"/><path d=\"M19 19H5\"/>";
+    readonly "text-align-end": "<path d=\"M21 5H3\"/><path d=\"M21 12H9\"/><path d=\"M21 19H7\"/>";
+    readonly "align-vertical-justify-start": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"6\" rx=\"2\"/><path d=\"M2 2h20\"/>";
+    readonly "align-vertical-justify-center": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"16\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 12h20\"/>";
+    readonly "align-vertical-justify-end": "<rect width=\"14\" height=\"6\" x=\"5\" y=\"12\" rx=\"2\"/><rect width=\"10\" height=\"6\" x=\"7\" y=\"2\" rx=\"2\"/><path d=\"M2 22h20\"/>";
     readonly x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>";
 };
 export type LucideIconName = keyof typeof LUCIDE;

package/dist/draw/styles.d.ts

@@ -12,14 +12,31 @@ export interface StickyStyle {
  * size and fill/border. Single source for the renderer, element factory, palette previews and
  * the color-picker swatches. Aggregate, policy and external system share the large block format —
  * they occupy the same slot in the grammar (receive commands / react to events); actors are the
- * small corner stickies.
+ * small corner stickies. Each border is the fill's hue, dark enough for 3:1 on the canvas ground:
+ * the light fills barely differ from the ground, so the border carries the sticky's outline.
  */
 export declare const STICKY_STYLES: Record<StickyKind, StickyStyle>;
 /** Free-text note: grows with its text (see `noteMetrics`) unless resized by hand, neutral grey. */
 export declare const NOTE_STYLE: {
     readonly label: "Note";
     readonly fill: "#ECECEC";
-    readonly stroke: "#C4C4C4";
+    readonly stroke: "#8F8A8A";
+};
+/**
+ * Provisional (blank append) sticky: plain paper with a dashed border in `kontur`, no kind yet.
+ * The border is all that sets it off the canvas ground, so it keeps 3:1 there (guide §3.6).
+ */
+export declare const PROVISIONAL_STICKY: {
+    readonly fill: "#FFFFFF";
+    readonly stroke: "#8F8A8A";
+    readonly dash: "6 4";
+};
+/** Soft drop shadow that makes stickies read as paper, in the ink of the design system's shadows. */
+export declare const STICKY_SHADOW: {
+    readonly color: "#1D1D1D";
+    readonly opacity: 0.2;
+    readonly dy: 5;
+    readonly blur: 5;
 };
 /** Smallest hand-resized note box — keeps a shrunken note grabbable and its handles apart. */
 export declare const NOTE_MIN_RESIZE: {
@@ -67,14 +84,18 @@ export declare function isManualNoteBox(label: string, box: {
 export declare const COLORS: {
     readonly paper: "#F9F7F7";
     readonly ink: "#1D1D1D";
-    readonly inkSoft: "#5B5B5B";
+    readonly inkSoft: "#6B6666";
     readonly surface: "#FFFFFF";
     readonly stroke: "#1D1D1D";
-    /** The single connection style: gray arrowed line. */
-    readonly arrow: "#9E9E9E";
+    /** The single connection style: an arrowed line in `kontur`, as edges are (guide §10.1). */
+    readonly arrow: "#8F8A8A";
     readonly accent: "#335DE5";
     readonly accentSoft: "rgba(51,93,229,0.12)";
-    /** Text inside every sticky: #1D1D1D reaches 4.5:1 on all eight fills, the hotspot included. */
+    /**
+     * Text inside a sticky on its kind's fill: #1D1D1D reaches 4.5:1 on all eight fills, the hotspot
+     * included. A fill the user picks gets black or white text, whichever reads better
+     * (`textColorOn`).
+     */
     readonly stickyText: "#1D1D1D";
 };
 /**