@miragon/team-topologies-renderer 0.7.1 → 0.8.0

package/README.md

@@ -9,7 +9,8 @@ and full editor for [Team Topologies](https://teamtopologies.com/) diagrams, bui
 
 It renders the canonical document from
 [`@miragon/team-topologies-schema-model`](../schema-model) and gives you palette, move, resize,
-connect-by-overlap, context pad, inline label editing and undo/redo — with no UI framework required.
+connect-by-overlap, multi-selection (lasso, select all) with group move, text annotations, context
+pad, in-place label editing and undo/redo — with no UI framework required.
 Mount it into any `<div>`; the web app (React) and the VS Code extension both wrap this exact package.
 
 ## Install
@@ -26,6 +27,19 @@ npm install @miragon/team-topologies-renderer @miragon/team-topologies-schema-mo
 | `NavigatedViewer` | Read-only + zoom (scroll), pan (drag) and selection.                           |
 | `Modeler`         | The full editor: palette, move, resize, context pad, label editing, undo/redo. |
 
+## Editing gestures (`Modeler`)
+
+| Gesture                            | Effect                                                                  |
+| ---------------------------------- | ----------------------------------------------------------------------- |
+| Double-click an element            | Edit its label in place (Enter commits, Shift+Enter breaks, Esc aborts) |
+| `Ctrl/Cmd+A`                       | Select every element                                                    |
+| Shift+drag on the canvas           | Lasso-select (also the first palette tool)                              |
+| Shift+click                        | Add an element to / remove it from the selection                        |
+| Drag a selected element            | Move the whole selection as one undo step                               |
+| Arrow keys (Shift: ×10)            | Nudge the selection                                                     |
+| `Ctrl/Cmd+C` / `V`, Delete         | Copy, paste, delete the selection                                       |
+| `Ctrl/Cmd+Z`, `Ctrl/Cmd+Shift+Z/Y` | Undo / redo                                                             |
+
 All three share a common base (`TtBaseViewer`) with the same import/export and lifecycle API.
 
 ## Quick start
@@ -91,10 +105,12 @@ new Modeler({
 
 ### Helpers & types
 
-- **Type guards:** `isTtElement`, `isTtTeam`, `isTtInteraction`, `isTtFlow`.
-- **Runtime element types:** `TtTeam`, `TtInteraction`, `TtFlow`, `TtElement`.
-- **Palette icon generators:** `teamIconSvg(type)`, `interactionIconSvg(mode)`, `flowIconSvg()` —
-  WYSIWYG SVG glyphs matching what the canvas draws.
+- **Type guards:** `isTtElement`, `isTtTeam`, `isTtInteraction`, `isTtFlow`, `isTtAnnotation`,
+  `isTtAssociation`.
+- **Runtime element types:** `TtTeam`, `TtInteraction`, `TtFlow`, `TtAnnotation`, `TtElement`, and
+  `TtAssociation` (the connector from an annotation to the element it is attached to).
+- **Palette icon generators:** `teamIconSvg(type)`, `interactionIconSvg(mode)`, `flowIconSvg()`,
+  `annotationIconSvg()` — WYSIWYG SVG glyphs matching what the canvas draws.
 - **Other:** `TtViewerOptions`, `ImportWarning`, `RootBusinessObject`, `ROOT_ID`, `saveSVG`.
 
 ## How it's built
@@ -103,19 +119,19 @@ The package is a set of [didi](https://github.com/nikku/didi) modules layered on
 exported (e.g. `ttDrawModule`, `ttPaletteModule`, `ttModelingModule`) so you can compose your own
 viewer via `additionalModules`:
 
-| Module                 | Responsibility                                                                   |
-| ---------------------- | -------------------------------------------------------------------------------- |
-| `ttModelModule`        | Element factory with notation defaults (`TtElementFactory`).                     |
-| `ttDrawModule`         | Custom SVG rendering of teams, interactions and flow (`TeamTopologiesRenderer`). |
-| `ioModule`             | Document ↔ canvas bridge (`TtImporter`, `TtExporter`, `saveSVG`).                |
-| `ttModelingModule`     | High-level mutations — label, team type, interaction mode, colours, description. |
-| `ttRulesModule`        | Editing rules (what can move / resize / be created).                             |
-| `ttBehaviorsModule`    | Keeps the model **flat** — shapes never nest.                                    |
-| `ttPaletteModule`      | The drag-to-create tool palette.                                                 |
-| `ttContextPadModule`   | Per-element actions (rename, delete).                                            |
-| `ttLabelEditingModule` | Double-click inline label editing.                                               |
-| `ttKeyboardModule`     | Undo / redo / delete shortcuts.                                                  |
-| `ttZOrderModule`       | Fixed stacking order (flow behind, teams, interactions on top).                  |
+| Module                 | Responsibility                                                                         |
+| ---------------------- | -------------------------------------------------------------------------------------- |
+| `ttModelModule`        | Element factory with notation defaults (`TtElementFactory`).                           |
+| `ttDrawModule`         | SVG rendering of teams, interactions, flow and annotations (`TeamTopologiesRenderer`). |
+| `ioModule`             | Document ↔ canvas bridge (`TtImporter`, `TtExporter`, `saveSVG`).                      |
+| `ttModelingModule`     | High-level mutations — label, type, mode, colours, description, annotations.           |
+| `ttRulesModule`        | Editing rules (what can move / resize / be created / be attached).                     |
+| `ttBehaviorsModule`    | Keeps the model **flat** and annotation connectors cropped, one per annotation.        |
+| `ttPaletteModule`      | The lasso tool and the drag-to-create palette.                                         |
+| `ttContextPadModule`   | Per-element actions (rename, add/attach annotation, delete; delete a multi-selection). |
+| `ttLabelEditingModule` | Double-click in-place label editing.                                                   |
+| `ttKeyboardModule`     | Undo / redo / select all / delete / copy / paste / nudge shortcuts.                    |
+| `ttZOrderModule`       | Fixed stacking order (flow behind, teams, interactions, annotations on top).           |
 
 ### Rendering
 
@@ -123,8 +139,9 @@ A custom `TeamTopologiesRenderer` (priority `1500`, beating diagram-js's default
 from the spec in [`@miragon/team-topologies-schema-model`](../schema-model): the four team outlines
 (octagon, vertical/horizontal rounded rectangles, square rectangle) drawn solid; the three
 interaction glyphs (parallelogram, triangle, circle) drawn dashed and translucent; the flow-of-change
-as a dashed left-to-right band. Labels are word-wrapped and centred. Per-element `fill`/`stroke`
-overrides win over the spec defaults.
+as a dashed left-to-right band; an annotation as a BPMN-style open bracket with left-aligned text,
+tied to its element by a dashed connector. Labels are word-wrapped (explicit line breaks are kept)
+and centred. Per-element `fill`/`stroke` overrides win over the spec defaults.
 
 ## Import / export
 

package/dist/Modeler.d.ts

@@ -1,8 +1,9 @@
 import { ModuleDeclaration } from 'didi';
 import { NavigatedViewer } from './NavigatedViewer.js';
 /**
- * Full Team Topologies editor: palette/create, move, resize, connect with
- * rules, context pad, inline label editing, undo/redo.
+ * Full Team Topologies editor: palette/create, multi-selection (lasso, select
+ * all) and group move, resize, annotations with connectors, context pad,
+ * in-place label editing, undo/redo.
  */
 export declare class Modeler extends NavigatedViewer {
     protected _getModules(): ModuleDeclaration[];

package/dist/Modeler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modeler.d.ts","sourceRoot":"","sources":["../src/Modeler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAQ9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAWvD;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,eAAe;cACvB,WAAW,IAAI,iBAAiB,EAAE;IAqBrD,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,OAAO;CAGnB"}
+{"version":3,"file":"Modeler.d.ts","sourceRoot":"","sources":["../src/Modeler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAS9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAWvD;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,eAAe;cACvB,WAAW,IAAI,iBAAiB,EAAE;IAsBrD,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,OAAO;CAGnB"}

package/dist/behaviors/TtAssociationBehavior.d.ts

@@ -0,0 +1,9 @@
+import { default as CommandInterceptor } from 'diagram-js/lib/command/CommandInterceptor';
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { default as Modeling } from 'diagram-js/lib/features/modeling/Modeling';
+import { default as ConnectionDocking } from 'diagram-js/lib/layout/ConnectionDocking';
+export default class TtAssociationBehavior extends CommandInterceptor {
+    static $inject: string[];
+    constructor(eventBus: EventBus, connectionDocking: ConnectionDocking, modeling: Modeling);
+}
+//# sourceMappingURL=TtAssociationBehavior.d.ts.map

package/dist/behaviors/TtAssociationBehavior.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtAssociationBehavior.d.ts","sourceRoot":"","sources":["../../src/behaviors/TtAssociationBehavior.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAC3E,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAS7E,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,kBAAkB;IACnE,OAAgB,OAAO,WAAiD;gBAE5D,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ;CAsCzF"}

package/dist/behaviors/index.d.ts

@@ -1,5 +1,9 @@
 import { ModuleDeclaration } from 'didi';
-/** Editing behaviors that keep the Team Topologies model flat (no nesting). */
+/**
+ * Editing behaviors that keep the Team Topologies model flat (no nesting) and
+ * annotation connectors cropped and one per annotation.
+ */
 export declare const ttBehaviorsModule: ModuleDeclaration;
 export { default as TtFlatModelBehavior } from './TtFlatModelBehavior.js';
+export { default as TtAssociationBehavior } from './TtAssociationBehavior.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/behaviors/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAG9C,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB,EAAE,iBAG/B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/behaviors/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAI9C;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAI/B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}

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

@@ -1,13 +1,22 @@
 import { default as ContextPad } from 'diagram-js/lib/features/context-pad/ContextPad';
 import { default as Modeling } from 'diagram-js/lib/features/modeling/Modeling';
+import { default as Connect } from 'diagram-js/lib/features/connect/Connect';
+import { default as Selection } from 'diagram-js/lib/features/selection/Selection';
 import { ContextPadEntries, default as ContextPadProvider } from 'diagram-js/lib/features/context-pad/ContextPadProvider';
 import { Element } from 'diagram-js/lib/model/Types';
 import { default as TtLabelEditing } from '../label-editing/TtLabelEditing.js';
+import { default as TtModeling } from '../modeling/TtModeling.js';
 export default class TtContextPadProvider implements ContextPadProvider {
     private readonly modeling;
+    private readonly ttModeling;
     private readonly labelEditing;
+    private readonly connect;
+    private readonly selection;
     static $inject: string[];
-    constructor(contextPad: ContextPad, modeling: Modeling, labelEditing: TtLabelEditing);
+    constructor(contextPad: ContextPad, modeling: Modeling, ttModeling: TtModeling, labelEditing: TtLabelEditing, connect: Connect, selection: Selection);
     getContextPadEntries(element: Element): ContextPadEntries;
+    getMultiElementContextPadEntries(elements: Element[]): ContextPadEntries;
+    private editEntry;
+    private deleteEntry;
 }
 //# sourceMappingURL=TtContextPadProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TtContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/TtContextPadProvider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,EACV,iBAAiB,EACjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,cAAc,MAAM,oCAAoC,CAAC;AAOrE,MAAM,CAAC,OAAO,OAAO,oBAAqB,YAAW,kBAAkB;IAKnE,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,YAAY;IAL/B,MAAM,CAAC,OAAO,WAAgD;gBAG5D,UAAU,EAAE,UAAU,EACL,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,cAAc;IAK/C,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB;CAiB1D"}
+{"version":3,"file":"TtContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/TtContextPadProvider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AACzE,OAAO,KAAK,EACV,iBAAiB,EAEjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,cAAc,MAAM,oCAAoC,CAAC;AACrE,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AAOxD,MAAM,CAAC,OAAO,OAAO,oBAAqB,YAAW,kBAAkB;IAYnE,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAf5B,MAAM,CAAC,OAAO,WAOZ;gBAGA,UAAU,EAAE,UAAU,EACL,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,cAAc,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;IAKvC,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB;IAqCzD,gCAAgC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,iBAAiB;IAIxE,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,WAAW;CAQpB"}

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

@@ -1,5 +1,5 @@
 import { ModuleDeclaration } from 'didi';
-/** Per-element context actions (rename, delete). */
+/** Per-element context actions (rename, annotate, attach, delete). */
 export declare const ttContextPadModule: ModuleDeclaration;
 export { default as TtContextPadProvider } from './TtContextPadProvider.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context-pad/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAI9C,oDAAoD;AACpD,eAAO,MAAM,kBAAkB,EAAE,iBAIhC,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context-pad/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAM9C,sEAAsE;AACtE,eAAO,MAAM,kBAAkB,EAAE,iBAIhC,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/copy-paste/TtCopyPaste.d.ts

@@ -7,11 +7,12 @@ import { default as EventBus } from 'diagram-js/lib/core/EventBus';
 import { default as Modeling } from 'diagram-js/lib/features/modeling/Modeling';
 import { default as Mouse } from 'diagram-js/lib/features/mouse/Mouse';
 import { default as Rules } from 'diagram-js/lib/features/rules/Rules';
-import { Shape } from 'diagram-js/lib/model/Types';
+import { Connection, Shape } from 'diagram-js/lib/model/Types';
 export default class TtCopyPaste extends CopyPaste {
     private readonly elementFactory;
     static $inject: string[];
     constructor(canvas: Canvas, create: Create, clipboard: Clipboard, elementFactory: ElementFactory, eventBus: EventBus, modeling: Modeling, mouse: Mouse, rules: Rules);
+    createConnection(attrs: Record<string, unknown>): Connection;
     createShape(attrs: Record<string, unknown>): Shape;
 }
 //# sourceMappingURL=TtCopyPaste.d.ts.map

package/dist/copy-paste/TtCopyPaste.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TtCopyPaste.d.ts","sourceRoot":"","sources":["../../src/copy-paste/TtCopyPaste.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,SAAS,MAAM,iDAAiD,CAAC;AAGxE,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AACzE,OAAO,KAAK,cAAc,MAAM,oCAAoC,CAAC;AACrE,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAC7D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAgBxD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,SAAS;IAgB9C,OAAO,CAAC,QAAQ,CAAC,cAAc;IAfjC,OAAgB,OAAO,WASrB;gBAGA,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACH,cAAc,EAAE,cAAc,EAC/C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK;IAKL,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,KAAK;CAS5D"}
+{"version":3,"file":"TtCopyPaste.d.ts","sourceRoot":"","sources":["../../src/copy-paste/TtCopyPaste.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,SAAS,MAAM,iDAAiD,CAAC;AAGxE,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AACzE,OAAO,KAAK,cAAc,MAAM,oCAAoC,CAAC;AACrE,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAoBpE,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,SAAS;IAgB9C,OAAO,CAAC,QAAQ,CAAC,cAAc;IAfjC,OAAgB,OAAO,WASrB;gBAGA,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACH,cAAc,EAAE,cAAc,EAC/C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK;IAKL,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,UAAU;IAQ5D,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,KAAK;CAS5D"}

package/dist/draw/TeamTopologiesRenderer.d.ts

@@ -1,16 +1,19 @@
 import { default as BaseRenderer } from 'diagram-js/lib/draw/BaseRenderer';
 import { default as EventBus } from 'diagram-js/lib/core/EventBus';
-import { ElementLike, ShapeLike } from 'diagram-js/lib/model/Types';
+import { ConnectionLike, ElementLike, ShapeLike } from 'diagram-js/lib/model/Types';
 export default class TeamTopologiesRenderer extends BaseRenderer {
     static $inject: string[];
     constructor(eventBus: EventBus);
     canRender(element: ElementLike): boolean;
     drawShape(visuals: SVGElement, element: ShapeLike): SVGElement;
+    drawConnection(visuals: SVGElement, connection: ConnectionLike): SVGElement;
     getShapePath(shape: ShapeLike): string;
+    getConnectionPath(connection: ConnectionLike): string;
     private drawTeam;
     private teamOutline;
     private drawInteraction;
     private drawFlow;
+    private drawAnnotation;
     private appendLabel;
 }
 //# sourceMappingURL=TeamTopologiesRenderer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TeamTopologiesRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/TeamTopologiesRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAqBzE,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,YAAY;IAC9D,MAAM,CAAC,OAAO,WAAgB;gBAElB,QAAQ,EAAE,QAAQ;IAIrB,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,GAAG,UAAU;IAa9D,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAO/C,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,eAAe;IA8CvB,OAAO,CAAC,QAAQ;IA0ChB,OAAO,CAAC,WAAW;CAqBpB"}
+{"version":3,"file":"TeamTopologiesRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/TeamTopologiesRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAE5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AA+BzF,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,YAAY;IAC9D,MAAM,CAAC,OAAO,WAAgB;gBAElB,QAAQ,EAAE,QAAQ;IAIrB,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,GAAG,UAAU;IAc9D,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,GAAG,UAAU;IAa3E,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAKtC,iBAAiB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM;IAM9D,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,QAAQ;IAmChB,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,WAAW;CA0BpB"}

package/dist/draw/icons.d.ts

@@ -5,6 +5,9 @@
 export declare const ICON_ARROW_FORWARD = "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z";
 export declare const ICON_EDIT = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z";
 export declare const ICON_DELETE = "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z";
+export declare const ICON_LINK = "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z";
+/** An open bracket with text lines — the annotation glyph. */
+export declare const ICON_ANNOTATION = "M4 3h5v2H6v14h3v2H4V3zm7 4h9v2h-9V7zm0 4h9v2h-9v-2zm0 4h6v2h-6v-2z";
 export declare const ICON_SWAP = "M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z";
 export declare function iconMarkup(path: string, size?: number): string;
 //# sourceMappingURL=icons.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/draw/icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,kBAAkB,8DAA8D,CAAC;AAC9F,eAAO,MAAM,SAAS,yJACkI,CAAC;AACzJ,eAAO,MAAM,WAAW,kFACyD,CAAC;AAClF,eAAO,MAAM,SAAS,4EAA4E,CAAC;AAEnG,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,SAAK,GAAG,MAAM,CAE1D"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/draw/icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,kBAAkB,8DAA8D,CAAC;AAC9F,eAAO,MAAM,SAAS,yJACkI,CAAC;AACzJ,eAAO,MAAM,WAAW,kFACyD,CAAC;AAClF,eAAO,MAAM,SAAS,wNACiM,CAAC;AACxN,8DAA8D;AAC9D,eAAO,MAAM,eAAe,uEAAuE,CAAC;AACpG,eAAO,MAAM,SAAS,4EAA4E,CAAC;AAEnG,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,SAAK,GAAG,MAAM,CAE1D"}

package/dist/draw/index.d.ts

@@ -1,5 +1,9 @@
 import { ModuleDeclaration } from 'didi';
-/** SVG rendering of all Team Topologies element types (BaseRenderer, priority 1500). */
+/**
+ * SVG rendering of all Team Topologies element types (BaseRenderer, priority
+ * 1500), plus the docking that crops annotation connectors to the outlines of
+ * the shapes they join.
+ */
 export declare const ttDrawModule: ModuleDeclaration;
 export { default as TeamTopologiesRenderer } from './TeamTopologiesRenderer.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;AAG9C,wFAAwF;AACxF,eAAO,MAAM,YAAY,EAAE,iBAG1B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,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;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,iBAI1B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/draw/label-layout.d.ts

@@ -0,0 +1,28 @@
+import { TtElement } from '../model/di-types.js';
+export declare const LINE_HEIGHT = 1.2;
+export interface LabelBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface LabelLayout {
+    /** The area the text is laid out in, relative to the element's top-left corner. */
+    box: LabelBox;
+    /** `center`: centred both ways (shape labels). `left-top`: flows from the top-left (annotations). */
+    align: "center" | "left-top";
+    fontSize: number;
+    fontWeight: string;
+    letterSpacing?: string;
+    fill: string;
+}
+/** Width of the flow arrow's head; the label stays on the shaft. */
+export declare function flowHeadWidth(width: number, height: number): number;
+export declare function labelLayout(element: TtElement): LabelLayout;
+/**
+ * Greedy word-wrap into lines that roughly fit `maxWidth` at the font size.
+ * Explicit line breaks are kept. Character-count based (not measured), so the
+ * result is identical on every platform and exported SVGs stay stable.
+ */
+export declare function wrapLabel(text: string, maxWidth: number, fontSize: number): string[];
+//# sourceMappingURL=label-layout.d.ts.map

package/dist/draw/label-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-layout.d.ts","sourceRoot":"","sources":["../../src/draw/label-layout.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAA6C,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMjG,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,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,MAAM,WAAW,WAAW;IAC1B,mFAAmF;IACnF,GAAG,EAAE,QAAQ,CAAC;IACd,qGAAqG;IACrG,KAAK,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,oEAAoE;AACpE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,SAAS,GAAG,WAAW,CAsC3D;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAqBpF"}

package/dist/draw/palette-icons.d.ts

@@ -1,5 +1,8 @@
 import { InteractionMode, TeamType } from '@miragon/team-topologies-schema-model';
 export declare function teamIconSvg(type: TeamType): string;
 export declare function flowIconSvg(): string;
+export declare function annotationIconSvg(): string;
+/** Dashed selection frame with a pointer — the lasso (multi-select) tool. */
+export declare function lassoIconSvg(): string;
 export declare function interactionIconSvg(mode: InteractionMode): string;
 //# sourceMappingURL=palette-icons.d.ts.map

package/dist/draw/palette-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette-icons.d.ts","sourceRoot":"","sources":["../../src/draw/palette-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAMvF,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAgBlD;AAED,wBAAgB,WAAW,IAAI,MAAM,CAKpC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,MAAM,CAchE"}
+{"version":3,"file":"palette-icons.d.ts","sourceRoot":"","sources":["../../src/draw/palette-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,OAAO,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAOvF,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAgBlD;AAED,wBAAgB,WAAW,IAAI,MAAM,CAKpC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAK1C;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,IAAI,MAAM,CAKrC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,MAAM,CAchE"}

package/dist/draw/styles.d.ts

@@ -21,6 +21,7 @@ export declare const FONT: {
     readonly family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
     readonly label: 13.5;
     readonly small: 11;
+    readonly annotation: 12;
 };
 /** Paper colour used for the label halo so text stays legible over lines. */
 export declare const PAPER: "#FFFFFF";

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC,wGAAwG;AACxG,eAAO,MAAM,MAAM,WAAe,CAAC;AAEnC,eAAO,MAAM,GAAG,WAAkB,CAAC;AACnC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAElC,eAAO,MAAM,IAAI;IACf;;;;;;;OAOG;;;;CAKK,CAAC;AAEX,6EAA6E;AAC7E,eAAO,MAAM,KAAK,WAAgB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,0FAA0F;AAC1F,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC,wGAAwG;AACxG,eAAO,MAAM,MAAM,WAAe,CAAC;AAEnC,eAAO,MAAM,GAAG,WAAkB,CAAC;AACnC,eAAO,MAAM,QAAQ,YAAY,CAAC;AAElC,eAAO,MAAM,IAAI;IACf;;;;;;;OAOG;;;;;CAMK,CAAC;AAEX,6EAA6E;AAC7E,eAAO,MAAM,KAAK,WAAgB,CAAC"}

package/dist/index.d.ts

@@ -6,16 +6,16 @@ export type { TtViewerOptions, EventCallback } from './TtBaseViewer.js';
 export { ttModelModule, TtElementFactory } from './model/index.js';
 export { ttDrawModule, TeamTopologiesRenderer } from './draw/index.js';
 export { ioModule, TtImporter, TtExporter, saveSVG, ROOT_ID } from './io/index.js';
-export { ttModelingModule, TtModeling } from './modeling/index.js';
+export { ttModelingModule, TtModeling, TtLayouter } from './modeling/index.js';
 export { ttRulesModule, TtRules } from './rules/index.js';
-export { ttBehaviorsModule, TtFlatModelBehavior } from './behaviors/index.js';
+export { ttBehaviorsModule, TtFlatModelBehavior, TtAssociationBehavior, } from './behaviors/index.js';
 export { ttPaletteModule, TtPaletteProvider } from './palette/index.js';
 export { ttContextPadModule, TtContextPadProvider } from './context-pad/index.js';
 export { ttLabelEditingModule, TtLabelEditing } from './label-editing/index.js';
 export { ttKeyboardModule, TtKeyboard } from './keyboard/index.js';
 export { ttZOrderModule, TtZOrder } from './zorder/index.js';
-export { isTtElement, isTtTeam, isTtInteraction, isTtFlow } from './model/di-types.js';
-export type { TtElement, TtTeam, TtInteraction, TtFlow } from './model/di-types.js';
+export { isTtElement, isTtTeam, isTtInteraction, isTtFlow, isTtAnnotation, isTtAssociation, } from './model/di-types.js';
+export type { TtElement, TtTeam, TtInteraction, TtFlow, TtAnnotation, TtAssociation, } from './model/di-types.js';
 export type { ImportWarning, RootBusinessObject } from './io/index.js';
-export { teamIconSvg, interactionIconSvg, flowIconSvg } from './draw/palette-icons.js';
+export { teamIconSvg, interactionIconSvg, flowIconSvg, annotationIconSvg, } from './draw/palette-icons.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,8BAA8B,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGxE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvF,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACpF,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGvE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,8BAA8B,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGxE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EACL,WAAW,EACX,QAAQ,EACR,eAAe,EACf,QAAQ,EACR,cAAc,EACd,eAAe,GAChB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,SAAS,EACT,MAAM,EACN,aAAa,EACb,MAAM,EACN,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGvE,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,iBAAiB,GAClB,MAAM,yBAAyB,CAAC"}