@miragon/context-maps-renderer 0.0.1

package/README.md

@@ -0,0 +1,148 @@
+# @miragon/context-maps-renderer
+
+[![npm](https://img.shields.io/npm/v/@miragon/context-maps-renderer)](https://www.npmjs.com/package/@miragon/context-maps-renderer)
+[![License: MIT](https://img.shields.io/github/license/Miragon/context-maps-modeler)](https://github.com/Miragon/context-maps-modeler/blob/main/LICENSE)
+
+The **browser layer** of the [Context Maps Modeler](../../README.md): a framework-agnostic viewer
+and full editor for strategic Domain-Driven Design [Context Maps](https://contextmapper.org/)
+diagrams, built on [diagram-js](https://github.com/bpmn-io/diagram-js) (MIT).
+
+It renders the canonical document from
+[`@miragon/context-maps-schema-model`](../schema-model) and gives you palette, move, resize,
+connect-by-relationship, context pad, inline 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
+
+```bash
+npm install @miragon/context-maps-renderer @miragon/context-maps-schema-model
+```
+
+## Three entry points
+
+| Class             | Use it for                                                                     |
+| ----------------- | ------------------------------------------------------------------------------ |
+| `Viewer`          | Read-only rendering, no interaction (thumbnails, static embeds).               |
+| `NavigatedViewer` | Read-only + zoom (scroll), pan (drag) and selection.                           |
+| `Modeler`         | The full editor: palette, move, resize, context pad, label editing, undo/redo. |
+
+All three share a common base (`CmBaseViewer`) with the same import/export and lifecycle API.
+
+## Quick start
+
+```ts
+import { Modeler } from "@miragon/context-maps-renderer";
+import "@miragon/context-maps-renderer/assets/context-maps.css";
+import { SAMPLE_DOCUMENT } from "@miragon/context-maps-schema-model";
+
+const modeler = new Modeler({ container: document.querySelector("#canvas")! });
+
+// Load a document (auto-fits the viewport)
+const { warnings } = modeler.importDocument(SAMPLE_DOCUMENT);
+
+// Read the live canvas back as the canonical model
+const doc = modeler.exportDocument();
+
+// Export a standalone, self-contained SVG
+const { svg } = modeler.saveSVG();
+
+// Undo / redo are driven by the command stack
+modeler.undo();
+modeler.redo();
+```
+
+> **The CSS is required.** Import `@miragon/context-maps-renderer/assets/context-maps.css`
+> (it also pulls in `diagram-js`'s own stylesheet) — without it the palette, context pad and label
+> editor are unstyled.
+
+## API
+
+### Constructor — `CmViewerOptions`
+
+```ts
+new Modeler({
+  container?: HTMLElement,            // host element (a detached <div> if omitted)
+  width?: number | string,           // canvas width  (default "100%")
+  height?: number | string,          // canvas height (default "100%", or "600px" with no container)
+  additionalModules?: ModuleDeclaration[], // extra diagram-js modules
+});
+```
+
+### Shared methods (`Viewer` / `NavigatedViewer` / `Modeler`)
+
+| Method                             | Returns                         | Purpose                                           |
+| ---------------------------------- | ------------------------------- | ------------------------------------------------- |
+| `importDocument(doc)`              | `{ warnings: ImportWarning[] }` | Replace canvas content and auto-fit.              |
+| `exportDocument()`                 | `CmDocument`                    | Rebuild the canonical model from the live canvas. |
+| `saveSVG()`                        | `{ svg: string }`               | Self-contained SVG snapshot (fitted viewBox).     |
+| `setMeta(partial)` / `getMeta()`   | — / `RootBusinessObject`        | Read/write diagram-level metadata (e.g. `title`). |
+| `attachTo(el)` / `detach()`        | `void`                          | Move the canvas in/out of the DOM (keeps state).  |
+| `clear()` / `destroy()`            | `void`                          | Empty the canvas / tear it down.                  |
+| `on(event, cb)` / `off(event, cb)` | `void`                          | Subscribe to diagram-js events.                   |
+| `get<T>(name)`                     | `T`                             | Resolve a diagram-js service (advanced).          |
+
+### Modeler-only
+
+`undo()`, `redo()`, `canUndo()`, `canRedo()`.
+
+### Helpers & types
+
+- **Type guards:** `isCmElement`, `isCmContext`, `isCmRelationship`.
+- **Runtime element types:** `CmContext`, `CmRelationship`, `CmElement`.
+- **Palette icon generators:** `contextIconSvg(type)`, `relationshipIconSvg(pattern)` —
+  WYSIWYG SVG glyphs matching what the canvas draws.
+- **Other:** `CmViewerOptions`, `ImportWarning`, `RootBusinessObject`, `ROOT_ID`, `saveSVG`.
+
+## How it's built
+
+The package is a set of [didi](https://github.com/nikku/didi) modules layered on diagram-js. Each is
+exported (e.g. `cmDrawModule`, `cmPaletteModule`, `cmModelingModule`) so you can compose your own
+viewer via `additionalModules`:
+
+| Module                 | Responsibility                                                                      |
+| ---------------------- | ----------------------------------------------------------------------------------- |
+| `cmModelModule`        | Element factory with notation defaults (`CmElementFactory`).                        |
+| `cmDrawModule`         | Custom SVG rendering of contexts and relationships (`ContextMapsRenderer`).         |
+| `ioModule`             | Document ↔ canvas bridge (`CmImporter`, `CmExporter`, `saveSVG`).                   |
+| `cmModelingModule`     | High-level mutations — label, subdomain type, relationship pattern, roles, colours. |
+| `cmRulesModule`        | Editing rules (what can move / resize / be created / connected).                    |
+| `cmBehaviorsModule`    | Keeps the model **flat** — shapes never nest.                                       |
+| `cmPaletteModule`      | The drag-to-create tool palette.                                                    |
+| `cmContextPadModule`   | Per-element actions (rename, delete, connect).                                      |
+| `cmLabelEditingModule` | Double-click inline label editing.                                                  |
+| `cmKeyboardModule`     | Undo / redo / delete shortcuts.                                                     |
+| `cmZOrderModule`       | Fixed stacking order (relationships behind, contexts on top).                       |
+
+### Rendering
+
+A custom `ContextMapsRenderer` (priority `1500`, beating diagram-js's default) draws each element
+from the spec in [`@miragon/context-maps-schema-model`](../schema-model): bounded-context boxes
+coloured by subdomain type (core / supporting / generic) with their glyphs; and relationships drawn
+as lines styled per context-mapping pattern (partnership, shared kernel, customer-supplier,
+upstream-downstream, separate ways), carrying the pattern abbreviation, U/D end markers and the
+OHS/PL/ACL/CF integration-role badges. Labels are word-wrapped and centred. Per-element `fill`/`stroke`
+overrides win over the spec defaults.
+
+## Import / export
+
+The package reads and writes the canonical `CmDocument` (JSON) and exports a standalone **SVG**.
+PNG export and the embedded-scene round-trip (storing the document inside the exported image) live in
+the [web app](../../apps/webapp) and the [VS Code extension](../../apps/vscode), which add the canvas
+rasterisation those formats need.
+
+## Development
+
+Part of the [Context Maps Modeler](../../README.md) monorepo; consumed from source by the apps.
+From the repo root:
+
+```bash
+npm run build -w packages/renderer   # Vite library build → dist/ (publish build)
+npm test                             # Vitest unit tests
+npm run test:browser                 # renderer integration tests in real Chromium
+npm run typecheck
+```
+
+## License
+
+[MIT](../../LICENSE). diagram-js and its dependencies are MIT / ISC / Apache-2.0.

package/dist/CmBaseViewer.d.ts

@@ -0,0 +1,49 @@
+import { ModuleDeclaration } from 'didi';
+import { CmDocument } from '@miragon/context-maps-schema-model';
+import { ImportWarning, RootBusinessObject } from './io/types.js';
+export interface CmViewerOptions {
+    /** Host element. When absent, a detached <div> is created (attach later). */
+    container?: HTMLElement;
+    width?: number | string;
+    height?: number | string;
+    /** Appended to the module list (extension point). */
+    additionalModules?: ModuleDeclaration[];
+}
+export type EventCallback<T = unknown> = (event: T) => void;
+export declare abstract class CmBaseViewer {
+    protected abstract _getModules(): ModuleDeclaration[];
+    private _diagram;
+    private readonly _container;
+    private readonly _options;
+    constructor(options?: CmViewerOptions);
+    private _createContainer;
+    private _ensureDiagram;
+    /** Resolve a diagram-js service from the didi injector. */
+    get<T>(name: string): T;
+    on<T = unknown>(event: string, callback: EventCallback<T>, priority?: number): void;
+    off(event: string, callback: EventCallback): void;
+    /** Load a document into the canvas (replaces existing content). */
+    importDocument(doc: CmDocument): {
+        warnings: ImportWarning[];
+    };
+    /** Current canvas state as a canonical document. */
+    exportDocument(): CmDocument;
+    /** Update diagram-level metadata (title / flow-of-change) on the root. */
+    setMeta(partial: Partial<RootBusinessObject>): void;
+    /** Read diagram-level metadata (title / flow-of-change) from the root. */
+    getMeta(): RootBusinessObject | undefined;
+    /** Standalone, self-contained SVG snapshot. */
+    saveSVG(): {
+        svg: string;
+    };
+    /** Fit the content into the viewport, leaving room at the top for the palette. */
+    private _fit;
+    /** Attach the container into `target`. */
+    attachTo(target: HTMLElement): void;
+    /** Detach the container from the DOM, preserving state. */
+    detach(): void;
+    clear(): void;
+    destroy(): void;
+    get container(): HTMLElement;
+}
+//# sourceMappingURL=CmBaseViewer.d.ts.map

package/dist/CmBaseViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CmBaseViewer.d.ts","sourceRoot":"","sources":["../src/CmBaseViewer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,EAAW,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAErF,MAAM,WAAW,eAAe;IAC9B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CACzC;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAQ5D,8BAAsB,YAAY;IAChC,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,CAAkB;gBAE/B,OAAO,GAAE,eAAoB;IAKzC,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;IAQtB,2DAA2D;IAC3D,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,mEAAmE;IACnE,cAAc,CAAC,GAAG,EAAE,UAAU,GAAG;QAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;KAAE;IAW9D,oDAAoD;IACpD,cAAc,IAAI,UAAU;IAI5B,0EAA0E;IAC1E,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI;IAanD,0EAA0E;IAC1E,OAAO,IAAI,kBAAkB,GAAG,SAAS;IASzC,+CAA+C;IAC/C,OAAO,IAAI;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAI1B,kFAAkF;IAClF,OAAO,CAAC,IAAI;IA0CZ,0CAA0C;IAC1C,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAKnC,2DAA2D;IAC3D,MAAM,IAAI,IAAI;IAId,KAAK,IAAI,IAAI;IAIb,OAAO,IAAI,IAAI;IAQf,IAAI,SAAS,IAAI,WAAW,CAE3B;CACF"}

package/dist/Modeler.d.ts

@@ -0,0 +1,14 @@
+import { ModuleDeclaration } from 'didi';
+import { NavigatedViewer } from './NavigatedViewer.js';
+/**
+ * Full Context Maps editor: palette/create, move, resize, connect with
+ * rules, context pad, inline label editing, undo/redo.
+ */
+export declare class Modeler extends NavigatedViewer {
+    protected _getModules(): ModuleDeclaration[];
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+}
+//# sourceMappingURL=Modeler.d.ts.map

package/dist/Modeler.d.ts.map

@@ -0,0 +1 @@
+{"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;;;GAGG;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/NavigatedViewer.d.ts

@@ -0,0 +1,7 @@
+import { ModuleDeclaration } from 'didi';
+import { Viewer } from './Viewer.js';
+/** Read-only + navigation: zoom (scroll), pan (drag), selection. */
+export declare class NavigatedViewer extends Viewer {
+    protected _getModules(): ModuleDeclaration[];
+}
+//# sourceMappingURL=NavigatedViewer.d.ts.map

package/dist/NavigatedViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigatedViewer.d.ts","sourceRoot":"","sources":["../src/NavigatedViewer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAI9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,oEAAoE;AACpE,qBAAa,eAAgB,SAAQ,MAAM;cACtB,WAAW,IAAI,iBAAiB,EAAE;CAGtD"}

package/dist/Viewer.d.ts

@@ -0,0 +1,7 @@
+import { ModuleDeclaration } from 'didi';
+import { CmBaseViewer } from './CmBaseViewer.js';
+/** Read-only renderer: draws a Context Maps diagram with no interaction. */
+export declare class Viewer extends CmBaseViewer {
+    protected _getModules(): ModuleDeclaration[];
+}
+//# sourceMappingURL=Viewer.d.ts.map

package/dist/Viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewer.d.ts","sourceRoot":"","sources":["../src/Viewer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKjD,4EAA4E;AAC5E,qBAAa,MAAO,SAAQ,YAAY;IACtC,SAAS,CAAC,WAAW,IAAI,iBAAiB,EAAE;CAG7C"}

package/dist/behaviors/CmClickSelectionBehavior.d.ts

@@ -0,0 +1,7 @@
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { default as Selection } from 'diagram-js/lib/features/selection/Selection';
+export default class CmClickSelectionBehavior {
+    static $inject: string[];
+    constructor(eventBus: EventBus, selection: Selection);
+}
+//# sourceMappingURL=CmClickSelectionBehavior.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CmClickSelectionBehavior.d.ts","sourceRoot":"","sources":["../../src/behaviors/CmClickSelectionBehavior.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AAOzE,MAAM,CAAC,OAAO,OAAO,wBAAwB;IAC3C,MAAM,CAAC,OAAO,WAA6B;gBAE/B,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS;CAYrD"}

package/dist/behaviors/CmDragBehavior.d.ts

@@ -0,0 +1,7 @@
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { default as Canvas } from 'diagram-js/lib/core/Canvas';
+export default class CmDragBehavior {
+    static $inject: string[];
+    constructor(eventBus: EventBus, canvas: Canvas);
+}
+//# sourceMappingURL=CmDragBehavior.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CmDragBehavior.d.ts","sourceRoot":"","sources":["../../src/behaviors/CmDragBehavior.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AAIrD,MAAM,CAAC,OAAO,OAAO,cAAc;IACjC,MAAM,CAAC,OAAO,WAA0B;gBAE5B,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM;CAQ/C"}

package/dist/behaviors/CmFlatModelBehavior.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 Canvas } from 'diagram-js/lib/core/Canvas';
+import { default as Modeling } from 'diagram-js/lib/features/modeling/Modeling';
+export default class CmFlatModelBehavior extends CommandInterceptor {
+    static $inject: string[];
+    constructor(eventBus: EventBus, canvas: Canvas, modeling: Modeling);
+}
+//# sourceMappingURL=CmFlatModelBehavior.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CmFlatModelBehavior.d.ts","sourceRoot":"","sources":["../../src/behaviors/CmFlatModelBehavior.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAC3E,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AAQtE,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,kBAAkB;IACjE,OAAgB,OAAO,WAAsC;gBAEjD,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ;CA6BnE"}

package/dist/behaviors/index.d.ts

@@ -0,0 +1,7 @@
+import { ModuleDeclaration } from 'didi';
+/** Editing behaviors: keep the model flat (no nesting), drag-state CSS marker. */
+export declare const cmBehaviorsModule: ModuleDeclaration;
+export { default as CmFlatModelBehavior } from './CmFlatModelBehavior.js';
+export { default as CmDragBehavior } from './CmDragBehavior.js';
+export { default as CmClickSelectionBehavior } from './CmClickSelectionBehavior.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/behaviors/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,kFAAkF;AAClF,eAAO,MAAM,iBAAiB,EAAE,iBAK/B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/connect-handles/CmConnectHandles.d.ts

@@ -0,0 +1,15 @@
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { default as Overlays } from 'diagram-js/lib/features/overlays/Overlays';
+import { default as Selection } from 'diagram-js/lib/features/selection/Selection';
+import { default as Connect } from 'diagram-js/lib/features/connect/Connect';
+import { default as Dragging } from 'diagram-js/lib/features/dragging/Dragging';
+export default class CmConnectHandles {
+    private readonly eventBus;
+    private readonly selection;
+    private readonly overlays;
+    private readonly dragging;
+    static $inject: string[];
+    constructor(eventBus: EventBus, selection: Selection, overlays: Overlays, connect: Connect, dragging: Dragging);
+    private refresh;
+}
+//# sourceMappingURL=CmConnectHandles.d.ts.map

package/dist/connect-handles/CmConnectHandles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CmConnectHandles.d.ts","sourceRoot":"","sources":["../../src/connect-handles/CmConnectHandles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AACzE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AAuCtE,MAAM,CAAC,OAAO,OAAO,gBAAgB;IAIjC,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAEzB,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAP3B,MAAM,CAAC,OAAO,WAAgE;gBAG3D,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EACnC,OAAO,EAAE,OAAO,EACC,QAAQ,EAAE,QAAQ;IAYrC,OAAO,CAAC,OAAO;CA8ChB"}

package/dist/connect-handles/index.d.ts

@@ -0,0 +1,5 @@
+import { ModuleDeclaration } from 'didi';
+/** Four outward connect arrows around a selected context (top/right/bottom/left). */
+export declare const cmConnectHandlesModule: ModuleDeclaration;
+export { default as CmConnectHandles } from './CmConnectHandles.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/connect-handles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/connect-handles/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAM9C,qFAAqF;AACrF,eAAO,MAAM,sBAAsB,EAAE,iBAIpC,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/context-maps.css

@@ -0,0 +1,2 @@
+.djs-parent{--color-grey-225-10-15:#22242a;--color-grey-225-10-35:#505562;--color-grey-225-10-55:#818798;--color-grey-225-10-75:#b9bcc6;--color-grey-225-10-80:#c7c9d1;--color-grey-225-10-85:#d5d7dd;--color-grey-225-10-90:#e3e4e8;--color-grey-225-10-95:#f1f2f4;--color-grey-225-10-97:#f7f7f8;--color-blue-205-100-45:#0086e6;--color-blue-205-100-45-opacity-30:#0086e64d;--color-blue-205-100-50:#0095ff;--color-blue-205-100-50-opacity-15:#0095ff26;--color-blue-205-100-70:#80caff;--color-blue-205-100-95:#e6f4ff;--color-green-150-86-44:#10d170;--color-red-360-100-40:#c00;--color-red-360-100-45:#e60000;--color-red-360-100-92:#ffd6d6;--color-red-360-100-97:#fff0f0;--color-white:#fff;--color-black:#000;--color-black-opacity-10:#0000001a;--color-black-opacity-30:#0000004d;--canvas-fill-color:var(--color-white);--bendpoint-fill-color:var(--color-blue-205-100-45);--bendpoint-stroke-color:var(--canvas-fill-color);--context-pad-entry-background-color:var(--color-white);--context-pad-entry-hover-background-color:var(--color-grey-225-10-95);--element-dragger-color:var(--color-blue-205-100-50);--element-hover-outline-fill-color:var(--color-blue-205-100-45);--element-selected-outline-stroke-color:var(--color-blue-205-100-50);--element-selected-outline-secondary-stroke-color:var(--color-blue-205-100-70);--lasso-fill-color:var(--color-blue-205-100-50-opacity-15);--lasso-stroke-color:var(--element-selected-outline-stroke-color);--palette-entry-color:var(--color-grey-225-10-15);--palette-entry-hover-color:var(--color-blue-205-100-45);--palette-entry-selected-color:var(--color-blue-205-100-50);--palette-separator-color:var(--color-grey-225-10-75);--palette-toggle-hover-background-color:var(--color-grey-225-10-55);--palette-background-color:var(--color-grey-225-10-97);--palette-border-color:var(--color-grey-225-10-75);--popup-font-family:"IBM Plex Sans", sans-serif;--popup-font-size:14px;--popup-secondary-font-size:.9em;--popup-header-entry-selected-color:var(--color-blue-205-100-50);--popup-header-font-weight:bolder;--popup-header-group-divider-color:var(--color-grey-225-10-75);--popup-background-color:var(--color-white);--popup-border-color:transparent;--popup-shadow-color:var(--color-black-opacity-30);--popup-disabled-color:var(--color-grey-225-10-35);--popup-description-color:var(--color-grey-225-10-35);--popup-no-results-color:var(--color-grey-225-10-55);--popup-entry-title-color:var(--color-grey-225-10-55);--popup-entry-hover-color:var(--color-grey-225-10-95);--popup-search-border-color:var(--color-grey-225-10-75);--popup-search-focus-border-color:var(--color-blue-205-100-50);--popup-search-focus-background-color:var(--color-blue-205-100-95);--resizer-fill-color:var(--color-blue-205-100-45);--resizer-stroke-color:var(--canvas-fill-color);--search-font-family:"IBM Plex Sans", sans-serif;--search-font-size:14px;--search-container-background-color:var(--color-white);--search-shadow-color:var(--color-black-opacity-30);--search-input-border-color:var(--color-grey-225-10-75);--search-input-focus-border-color:var(--color-blue-205-100-50);--search-input-focus-background-color:var(--color-blue-205-100-95);--search-result-hover-background-color:var(--color-grey-225-10-95);--search-result-secondary-color:var(--color-grey-225-10-55);--search-preselected-background-color:var(--color-blue-205-100-50-opacity-15);--shape-attach-allowed-stroke-color:var(--color-blue-205-100-50);--shape-connect-allowed-fill-color:var(--color-grey-225-10-97);--shape-drop-allowed-fill-color:var(--color-grey-225-10-97);--shape-drop-not-allowed-fill-color:var(--color-red-360-100-97);--shape-resize-preview-stroke-color:var(--color-blue-205-100-50);--snap-line-stroke-color:var(--color-blue-205-100-45-opacity-30);--space-tool-crosshair-stroke-color:var(--color-black);--tooltip-error-background-color:var(--color-red-360-100-97);--tooltip-error-border-color:var(--color-red-360-100-45);--tooltip-error-color:var(--color-red-360-100-45)}.djs-container svg.drop-not-ok{background:var(--shape-drop-not-allowed-fill-color)!important}.djs-container svg.new-parent{background:var(--shape-drop-allowed-fill-color)!important}.djs-container svg:focus{outline-offset:-1px}.djs-outline,.djs-selection-outline{fill:none;shape-rendering:geometricprecision;stroke-width:2px}.djs-outline{visibility:hidden}.djs-selection-outline{stroke:var(--element-selected-outline-stroke-color)}.djs-element.selected .djs-outline{visibility:visible;stroke:var(--element-selected-outline-stroke-color)}.djs-connection.selected .djs-outline{display:none}.djs-multi-select .djs-element.selected .djs-outline,.djs-dragging-active-lasso .djs-element.selected .djs-outline{stroke:var(--element-selected-outline-secondary-stroke-color);display:block}.djs-shape.connect-ok .djs-visual>:first-child{fill:var(--shape-connect-allowed-fill-color)!important}.djs-shape.connect-not-ok .djs-visual>:first-child,.djs-shape.drop-not-ok .djs-visual>:first-child{fill:var(--shape-drop-not-allowed-fill-color)!important}.djs-shape.new-parent .djs-visual>:first-child{fill:var(--shape-drop-allowed-fill-color)!important}.drop-not-ok,.connect-not-ok,.drop-not-ok *,.connect-not-ok *{cursor:not-allowed!important}.drop-ok,.connect-ok,.drop-ok *,.connect-ok *{cursor:default!important}.djs-element.attach-ok .djs-visual>:first-child{stroke-width:5px!important;stroke:var(--shape-attach-allowed-stroke-color)!important}.djs-frame.connect-not-ok .djs-visual>:first-child,.djs-frame.drop-not-ok .djs-visual>:first-child{stroke-width:3px!important;stroke:var(--shape-drop-not-allowed-fill-color)!important;fill:none!important}.djs-lasso-overlay{fill:var(--lasso-fill-color);stroke:var(--lasso-stroke-color);stroke-width:2px;shape-rendering:geometricprecision;pointer-events:none}.djs-resize-overlay{fill:none;stroke-dasharray:5 1 3 1;stroke:var(--shape-resize-preview-stroke-color);pointer-events:none}.djs-resizer-hit{fill:none;pointer-events:all}.djs-resizer-visual{fill:var(--resizer-fill-color);stroke-width:1px;stroke:var(--resizer-stroke-color);shape-rendering:geometricprecision}.djs-resizer:hover .djs-resizer-visual{stroke:var(--resizer-stroke-color);stroke-opacity:1}.djs-cursor-resize-ns,.djs-resizer-n,.djs-resizer-s{cursor:ns-resize}.djs-cursor-resize-ew,.djs-resizer-e,.djs-resizer-w{cursor:ew-resize}.djs-cursor-resize-nwse,.djs-resizer-nw,.djs-resizer-se{cursor:nwse-resize}.djs-cursor-resize-nesw,.djs-resizer-ne,.djs-resizer-sw{cursor:nesw-resize}.djs-shape.djs-resizing>.djs-outline{visibility:hidden!important}.djs-shape.djs-resizing>.djs-resizer,.djs-dragger>.djs-resizer{visibility:hidden}.djs-dragger *{fill:none!important;stroke:var(--element-dragger-color)!important}.djs-dragger tspan,.djs-dragger text,.djs-dragger marker circle,.djs-dragger marker path,.djs-dragger marker polygon,.djs-dragger marker polyline,.djs-dragger marker rect{fill:var(--element-dragger-color)!important;stroke:none!important}.djs-dragger marker text,.djs-dragger marker tspan{fill:none!important;stroke:var(--element-dragger-color)!important}.djs-dragging,.djs-dragging>*{opacity:.3!important;pointer-events:none!important}.djs-visual,.djs-outline{pointer-events:none}.djs-element.attach-ok .djs-hit{stroke-width:60px!important}.djs-element>.djs-hit-all,.djs-element>.djs-hit-no-move{pointer-events:all}.djs-element>.djs-hit-stroke,.djs-element>.djs-hit-click-stroke{pointer-events:stroke}.djs-connection .djs-visual{stroke-width:2px;fill:none}.djs-cursor-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.djs-cursor-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.djs-cursor-crosshair{cursor:crosshair}.djs-cursor-move{cursor:move}.djs-cursor-resize-ns{cursor:ns-resize}.djs-cursor-resize-ew{cursor:ew-resize}.djs-snap-line{stroke:var(--snap-line-stroke-color);stroke-linecap:round;stroke-width:2px;pointer-events:none}.djs-crosshair{stroke:var(--space-tool-crosshair-stroke-color);stroke-linecap:round;stroke-width:1px;pointer-events:none;shape-rendering:geometricprecision;stroke-dasharray:5 5}.djs-palette{box-sizing:border-box;width:48px;position:absolute;top:20px;left:20px}.djs-palette .separator{border:none;border-bottom:solid 1px var(--palette-separator-color);clear:both;margin:5px;padding-top:5px}.djs-palette .entry:before{vertical-align:initial}.djs-palette .djs-palette-toggle{cursor:pointer}.djs-palette .entry,.djs-palette .djs-palette-toggle{color:var(--palette-entry-color);text-align:center;font-size:30px}.djs-palette .entry{float:left}.djs-palette .entry img{max-width:100%}.djs-palette .djs-palette-entries:after{content:"";clear:both;display:table}.djs-palette .djs-palette-toggle:hover{background:var(--palette-toggle-hover-background-color)}.djs-palette .entry:hover{color:var(--palette-entry-hover-color)}.djs-palette .highlighted-entry{color:var(--palette-entry-selected-color)!important}.djs-palette .entry,.djs-palette .djs-palette-toggle{cursor:default;width:46px;height:46px;line-height:46px}.djs-palette.two-column.open{width:94px}.djs-palette:not(.open) .djs-palette-entries{display:none}.djs-palette:not(.open){overflow:hidden}.djs-palette.open .djs-palette-toggle{display:none}.djs-context-pad{pointer-events:none;z-index:100;width:72px;line-height:1;display:none;position:absolute}.djs-context-pad .entry{text-align:center;cursor:default;background-color:var(--context-pad-entry-background-color);width:22px;height:22px;box-shadow:0 0 2px 1px var(--context-pad-entry-background-color);pointer-events:all;vertical-align:middle;border-radius:3px;margin:0 2px 2px 0;font-size:22px;display:inline-block}.djs-context-pad .entry:hover{background:var(--context-pad-entry-hover-background-color)}.djs-context-pad.open{display:block}.djs-popup{box-sizing:border-box;background:var(--popup-background-color);z-index:200;box-shadow:0px 2px 6px var(--popup-shadow-color);border:solid 1px var(--popup-border-color);min-width:120px;max-width:300px;line-height:1;font-size:var(--popup-font-size);font-family:var(--popup-font-family);outline:none;position:fixed;overflow:hidden}.djs-popup-search input{box-sizing:border-box;width:100%;font-size:var(--popup-font-size);border:solid 1px var(--popup-search-border-color);border-radius:2px;padding:3px 6px 3px 28px;line-height:21px}.djs-popup-search input:focus{background-color:var(--popup-search-focus-background-color);border:solid 1px var(--popup-search-focus-border-color);outline:none}.djs-popup-header{align-items:stretch;margin:10px 12px;line-height:20px;display:flex}.djs-popup-header .entry{border-radius:2px}.djs-popup button.entry{background:0 0;border:0;padding:0}.djs-popup-header .entry.active{color:var(--popup-header-entry-selected-color)}.djs-popup-header .entry.disabled{color:inherit}.djs-popup-header-group{flex-direction:row;align-items:center;margin:0;padding:0;list-style:none;display:flex}.djs-popup-header-group .entry{flex-direction:row;align-items:center;display:flex}.djs-popup-header-group+.djs-popup-header-group:before{content:"";background:var(--popup-header-group-divider-color);width:1px;height:20px;margin:0 5px}.djs-popup-search{width:auto;margin:10px 12px;position:relative}.djs-popup-title{font-size:var(--popup-font-size);font-weight:var(--popup-header-font-weight);flex:1;margin:0}.djs-popup-breadcrumbs{margin:10px 12px;line-height:20px;display:flex}.djs-popup-breadcrumbs-item{appearance:none;min-width:0;color:var(--popup-description-color);font:inherit;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:0;outline:none;margin:0;padding:0;display:inline-flex;overflow:hidden}.djs-popup-breadcrumbs-item--separator:before{content:"/";color:var(--popup-description-color);margin:0 4px;display:inline-block}.djs-popup-breadcrumbs-item:hover{color:inherit;text-decoration:underline}.djs-popup-breadcrumbs-item:focus-visible{outline:1px solid var(--popup-search-focus-border-color);outline-offset:2px}.djs-popup-breadcrumbs-item--back{border:1px solid var(--popup-search-border-color);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;margin-right:6px;padding:2px 3px}.djs-popup-breadcrumbs-item--back:hover{background:#f2f3f5}.djs-popup-breadcrumbs-item--current{font-weight:var(--popup-header-font-weight);color:inherit;cursor:default}.djs-popup-breadcrumbs-item--current:hover{text-decoration:none}.djs-popup-entry-chevron{color:var(--popup-description-color);align-items:center;margin-left:6px;display:flex}.djs-popup-search-icon{position:absolute;top:7px;left:8px}.djs-popup-search-count{font-size:var(--popup-secondary-font-size);color:var(--popup-description-color);margin:0 12px}.djs-popup-results{max-height:280px;margin:7px 3px 7px 12px;padding-right:9px;list-style:none;overflow:auto}.djs-popup-results:focus{outline:none}.djs-popup-group{width:100%;margin:0;padding:0}.djs-popup-body .entry,.djs-popup-body .entry-header{cursor:default;border-radius:4px;padding:5px 7px}.djs-popup-body .entry-header{font-weight:var(--popup-header-font-weight);color:var(--popup-entry-title-color);padding-left:0}.djs-popup [class*=icon] .djs-popup-label,.djs-popup-label:not(:first-child){margin-left:.5em}.djs-popup [class*=icon]:before,.djs-popup-entry-icon{vertical-align:middle;width:1em;height:1em;font-size:1.4em;display:inline-block}.djs-popup-body .entry-header:not(:first-child){margin-top:8px;margin-bottom:2px}.djs-popup-body .entry{flex-direction:row;align-items:stretch;height:min-content;display:flex}.djs-popup .entry.selected{background-color:var(--popup-entry-hover-color)}.djs-popup .entry.disabled{color:var(--popup-disabled-color);cursor:not-allowed}.djs-popup-body .entry:not(:first-child){margin-top:2px}.djs-popup-entry-content{flex-direction:column;flex:1;display:flex}.djs-popup-entry-description{font-size:var(--popup-secondary-font-size);color:var(--popup-description-color);margin-top:.25em}.djs-popup-label,.djs-popup-entry-description{line-height:1.4em}.djs-popup .entry,.djs-popup .entry-header{margin:1px}.djs-popup-body{flex-direction:column;width:auto}.djs-popup ::-webkit-scrollbar{width:6px}.djs-popup ::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.djs-popup ::-webkit-scrollbar-track{box-shadow:none;background:0 0;margin:0;padding:5px}.djs-popup-no-results{color:var(--popup-no-results-color);padding:0 12px 12px}.djs-popup-footer{border-top:solid 1px var(--popup-border-color);padding:5px 12px 7px;display:flex}.djs-popup-results:hover~.djs-popup-footer{display:none}.djs-popup-entry-docs{color:var(--popup-description-color);margin-left:3px;display:none}.djs-popup-body .entry:hover .djs-popup-entry-docs{display:inline}.djs-popup-entry-docs svg{vertical-align:middle;margin:2px}.djs-popup-footer-docs{font-size:var(--popup-secondary-font-size);color:var(--popup-description-color);align-items:center;gap:3px;text-decoration:none;display:inline-flex}.djs-popup-footer-docs:hover{text-decoration:underline}.djs-popup-footer-docs svg{vertical-align:middle;margin:2px}.djs-palette{background:var(--palette-background-color);border:solid 1px var(--palette-border-color);border-radius:2px}.djs-segment-dragger,.djs-bendpoint{display:none}.djs-segment-dragger .djs-visual{fill:var(--bendpoint-fill-color);stroke:var(--bendpoint-stroke-color);stroke-width:1px;stroke-opacity:1;display:none}.djs-segment-dragger:hover .djs-visual{display:block}.djs-bendpoint .djs-visual{fill:var(--bendpoint-fill-color);stroke:var(--bendpoint-stroke-color);stroke-width:1px}.djs-segment-dragger:hover,.djs-bendpoints.hover .djs-segment-dragger,.djs-bendpoints.selected .djs-segment-dragger,.djs-bendpoint:hover,.djs-bendpoints.hover .djs-bendpoint,.djs-bendpoints.selected .djs-bendpoint{display:block}.djs-drag-active .djs-bendpoints *,.djs-bendpoints:not(.hover) .floating,.djs-bendpoint.floating:not(.positioned){display:none}.djs-segment-dragger:hover .djs-visual,.djs-segment-dragger.djs-dragging .djs-visual,.djs-bendpoint:hover .djs-visual,.djs-bendpoint.floating .djs-visual{fill:var(--bendpoint-fill-color);stroke:var(--bendpoint-stroke-color);stroke-opacity:1}.djs-bendpoint.floating .djs-hit{pointer-events:none}.djs-segment-dragger .djs-hit,.djs-bendpoint .djs-hit{fill:none;pointer-events:all}.djs-segment-dragger.horizontal .djs-hit{cursor:ns-resize}.djs-segment-dragger.vertical .djs-hit{cursor:ew-resize}.djs-segment-dragger.djs-dragging .djs-hit{pointer-events:none}.djs-updating,.djs-updating>*{pointer-events:none!important}.djs-updating .djs-context-pad,.djs-updating .djs-outline,.djs-updating .djs-bendpoint,.djs-multi-select .djs-bendpoint,.djs-multi-select .djs-segment-dragger,.connect-ok .djs-bendpoint,.connect-not-ok .djs-bendpoint,.drop-ok .djs-bendpoint,.drop-not-ok .djs-bendpoint{display:none!important}.djs-segment-dragger.djs-dragging,.djs-bendpoint.djs-dragging{opacity:1;display:block}.djs-tooltip-error{background:var(--tooltip-error-background-color);border:solid 1px var(--tooltip-error-border-color);width:160px;color:var(--tooltip-error-color);opacity:.75;border-radius:2px;padding:6px;font-size:12px;line-height:16px}.djs-tooltip-error:hover{opacity:1}.djs-search-open .djs-context-pad{display:none}.djs-search-open .djs-connection.selected .djs-outline{display:block}.djs-search-container{z-index:10;width:25%;min-width:300px;max-width:400px;font-family:var(--search-font-family);font-size:var(--search-font-size);box-shadow:0px 2px 6px var(--search-shadow-color);border-radius:2px;margin-left:auto;margin-right:auto;position:absolute;top:20px;left:0;right:0}.djs-search-container:not(.open){display:none}.djs-search-input{position:relative}.djs-search-input svg{position:absolute;top:7px;left:8px}.djs-search-input input{font-size:var(--search-font-size);border:1px solid var(--search-input-border-color);box-sizing:border-box;border-radius:2px;width:100%;padding:3px 6px 3px 28px;line-height:21px}.djs-search-input input:focus{background-color:var(--search-input-focus-background-color);border:solid 1px var(--search-input-focus-border-color);outline:none}.djs-search-results{background:var(--search-container-background-color);max-height:200px;position:relative;overflow-y:auto}.djs-search-result{padding:6px 8px}.djs-search-result-primary{text-overflow:ellipsis;white-space:nowrap;margin:0 0 3px;overflow:hidden}.djs-search-result-secondary{text-overflow:ellipsis;white-space:nowrap;color:var(--search-result-secondary-color);margin:0;font-family:monospace;overflow:hidden}.djs-search-result:hover,.djs-search-result-selected,.djs-search-result-selected:hover{background:var(--search-result-hover-background-color)}.djs-search-open .djs-element .djs-outline{fill:var(--search-preselected-background-color)!important}.djs-element-hidden,.djs-element-hidden .djs-hit,.djs-element-hidden .djs-outline,.djs-label-hidden .djs-label{display:none!important}.djs-element .djs-hit-stroke,.djs-element .djs-hit-click-stroke,.djs-element .djs-hit-all{cursor:move}:root{--cd-blau:#335de5;--cd-gruen:#00e676;--cd-grau:#f9f7f7;--cd-schwarz:#1d1d1d;--cd-weiss:#fff;--cd-blau-link:#2b50d4;--cd-blau-hell:#6b8aff;--cd-success:#0b7a55;--cd-success-soft:#0b7a551f;--cd-warning:#92610a;--cd-warning-soft:#92610a1f;--cd-danger:#c92a2a;--cd-danger-soft:#c92a2a1f;--cd-info:#2b50d4;--cd-info-soft:#2b50d41f;--cd-gradient-brand:linear-gradient(120deg, #335de5 30%, #00e676);--cd-gradient-format:linear-gradient(135deg, #335de5 0%, #00e676 140%);--cd-space-1:4px;--cd-space-2:8px;--cd-space-3:16px;--cd-space-4:24px;--cd-space-5:32px;--cd-space-6:48px;--cd-space-7:64px;--cd-space-8:96px;--cd-radius-sm:6px;--cd-radius-md:12px;--cd-radius-lg:16px;--cd-radius-pill:999px;--cd-shadow-1:0 1px 2px #1d1d1d0f, 0 1px 3px #1d1d1d1a;--cd-shadow-2:0 4px 12px #1d1d1d1a;--cd-shadow-3:0 12px 32px #1d1d1d29;--cd-motion-fast:.15s;--cd-motion-base:.25s;--cd-motion-slow:.4s;--cd-ease:cubic-bezier(.4, 0, .2, 1);--cd-ease-out:cubic-bezier(0, 0, .2, 1)}.cm-djs-container{--cm-accent:var(--cd-blau);--cm-accent-soft:#335de51f;--cm-line:#e6e2e2;--cm-ink:var(--cd-schwarz);background-color:var(--cd-grau);background-image:radial-gradient(#1d1d1d0f .6px,#0000 .6px);background-size:22px 22px;width:100%;height:100%;font-family:Geist Variable,Geist,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;position:relative;overflow:hidden}.cm-djs-container:focus,.cm-djs-container:focus-visible,.cm-djs-container svg:focus{outline:none}.cm-djs-container .djs-element text{-webkit-user-select:none;user-select:none}.cm-djs-container .djs-element.hover .djs-visual>:first-child:not(text),.cm-djs-container .djs-element.selected .djs-visual>:first-child:not(text){stroke:var(--cm-accent)!important}.cm-djs-container .djs-outline{stroke:var(--cm-accent);stroke-dasharray:3 3}.cm-djs-container .djs-resizer-visual{fill:var(--cd-weiss);stroke:var(--cm-accent)}.cm-djs-container .djs-resizer-hit{fill:none}.djs-palette{background:var(--cd-weiss);border:1px solid var(--cm-line,#e6e2e2);border-radius:var(--cd-radius-md);width:auto;box-shadow:var(--cd-shadow-2);align-items:center;padding:5px 6px;display:flex;top:12px;left:50%;transform:translate(-50%)}.djs-palette .djs-palette-entries,.djs-palette .group{flex-direction:row;align-items:center;gap:2px;display:flex}.djs-palette .entry{float:none;border-radius:var(--cd-radius-sm);width:40px;height:40px;color:var(--cd-schwarz);line-height:normal;transition:background .12s,color .12s,box-shadow .12s;position:relative}.djs-palette .entry:hover{color:var(--cd-blau);background:#335de51f}.djs-palette .group+.group{margin-left:9px;padding-left:9px;position:relative}.djs-palette .group+.group:before{content:"";background:var(--cm-line,#e6e2e2);width:1px;position:absolute;top:6px;bottom:6px;left:0}.cm-palette-entry{justify-content:center;align-items:center;width:100%;min-width:24px;height:100%;min-height:24px;line-height:1;display:flex}.cm-palette-svg{pointer-events:none;display:block}.cm-mode-entry.is-active{background:var(--cm-accent-soft);box-shadow:inset 0 0 0 1.5px var(--cm-accent)}.cm-connect-handle{border-radius:var(--cd-radius-sm);width:28px;height:28px;box-shadow:var(--cd-shadow-1);background:var(--cd-weiss);color:var(--cd-schwarz);cursor:pointer;justify-content:center;align-items:center;transition:background .12s,color .12s;display:flex}.cm-connect-handle:hover{background:var(--cm-accent-soft);color:var(--cm-accent)}.cm-djs-container .cm-label-input{text-align:center;border:1.5px solid var(--cm-accent);border-radius:var(--cd-radius-sm);background:var(--cd-weiss);color:var(--cm-ink);z-index:100;outline:none;padding:3px 6px;font-family:inherit;font-size:13.5px;font-weight:600;box-shadow:0 4px 14px #335de533}.cm-validation-marker{cursor:help;filter:drop-shadow(0 1px 1px #00000040);width:20px;height:20px;position:relative}.cm-validation-tooltip{width:max-content;max-width:280px;color:var(--cm-ink,#1d1d1d);pointer-events:none;z-index:200;background:#fff;border:1px solid #d9d5cc;border-radius:8px;padding:8px 10px;font-family:Geist Variable,Geist,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:12px;line-height:1.45;display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 6px 18px #0000002e}.cm-validation-marker:hover .cm-validation-tooltip{display:block}.cm-validation-tooltip__message+.cm-validation-tooltip__message{border-top:1px solid #eceae4;margin-top:6px;padding-top:6px}.cm-dragging .djs-overlay-container,.cm-dragging .djs-overlay-container *{pointer-events:none!important}.cm-djs-container .djs-element.connect-ok,.cm-djs-container svg.connect-ok{cursor:crosshair}.cm-djs-container .djs-element.connect-not-ok,.cm-djs-container svg.connect-not-ok{cursor:not-allowed}
+/*$vite$:1*/

package/dist/draw/ContextMapsRenderer.d.ts

@@ -0,0 +1,26 @@
+import { default as BaseRenderer } from 'diagram-js/lib/draw/BaseRenderer';
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { ConnectionLike, ElementLike, ShapeLike } from 'diagram-js/lib/model/Types';
+export default class ContextMapsRenderer 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 drawContext;
+    private drawRelationship;
+    /**
+     * Draws the markers at one relationship end: the direction letter (U/D/S/C) as
+     * a plain letter right at the domain (no box), then the integration roles side
+     * by side inside a single axis-aligned parent box.
+     */
+    private endMarkers;
+    /** A fixed-size coloured sub-label (own colour + border) inside a parent box. */
+    private miniChip;
+    /** A single small filled, bordered box (background, text colour, border colour). */
+    private chip;
+    private appendLabel;
+}
+//# sourceMappingURL=ContextMapsRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMapsRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/ContextMapsRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAO5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAwBzF,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,YAAY;IAC3D,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;IAY3E,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAKtC,iBAAiB,CAAC,UAAU,EAAE,cAAc,GAAG,MAAM;IAQ9D,OAAO,CAAC,WAAW;IAsEnB,OAAO,CAAC,gBAAgB;IAuCxB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IA8DlB,iFAAiF;IACjF,OAAO,CAAC,QAAQ;IAmChB,oFAAoF;IACpF,OAAO,CAAC,IAAI;IA2CZ,OAAO,CAAC,WAAW;CAqBpB"}

package/dist/draw/endRoleChips.d.ts

@@ -0,0 +1,17 @@
+import { Point } from 'diagram-js/lib/util/Types';
+export interface EndRoleChipLayout {
+    /** The parent box around all chips of this end. */
+    box: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    center: Point;
+    chipWidths: number[];
+    chipHeight: number;
+    innerWidth: number;
+    gap: number;
+}
+export declare function endRoleChipLayout(endpoint: Point, toward: Point, direction: string, roles: string[]): EndRoleChipLayout | null;
+//# sourceMappingURL=endRoleChips.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"endRoleChips.d.ts","sourceRoot":"","sources":["../../src/draw/endRoleChips.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGvD,MAAM,WAAW,iBAAiB;IAChC,mDAAmD;IACnD,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,MAAM,EAAE,KAAK,CAAC;IACd,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,KAAK,EACf,MAAM,EAAE,KAAK,EACb,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EAAE,GACd,iBAAiB,GAAG,IAAI,CA8B1B"}

package/dist/draw/icons.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A handful of Material-style icon paths (Apache-2.0) used by the context pad,
+ * exposed as HTML markup. Reusable by host chrome too.
+ */
+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_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

@@ -0,0 +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"}

package/dist/draw/index.d.ts

@@ -0,0 +1,5 @@
+import { ModuleDeclaration } from 'didi';
+/** SVG rendering of all Context Maps element types (BaseRenderer, priority 1500). */
+export declare const cmDrawModule: ModuleDeclaration;
+export { default as ContextMapsRenderer } from './ContextMapsRenderer.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,qFAAqF;AACrF,eAAO,MAAM,YAAY,EAAE,iBAG1B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}

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

@@ -0,0 +1,4 @@
+import { RelationshipPattern, SubdomainType } from '@miragon/context-maps-schema-model';
+export declare function contextIconSvg(type: SubdomainType): string;
+export declare function relationshipIconSvg(pattern?: RelationshipPattern): string;
+//# sourceMappingURL=palette-icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette-icons.d.ts","sourceRoot":"","sources":["../../src/draw/palette-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AA4B7F,wBAAgB,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAM1D;AAED,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,mBAA2C,GAAG,MAAM,CAUhG"}

package/dist/draw/styles.d.ts

@@ -0,0 +1,25 @@
+/** Shared rendering constants (typography, accent, priorities) — Miragon corporate identity.
+ *  Colours are derived from the single source of truth in `theme/palette.ts` (`MIRAGON`), which
+ *  mirrors the vendored `--cd-*` brand tokens. */
+/** BaseRenderer default priority is 1000; 1500 wins the render.shape/connection event. */
+export declare const TT_RENDER_PRIORITY = 1500;
+/** Selection / hover accent (Miragon blue — kept in sync with the app theme via the shared palette). */
+export declare const ACCENT: "#335DE5";
+export declare const INK: "#1D1D1D";
+export declare const INK_SOFT = "#5B5B5B";
+export declare const FONT: {
+    /**
+     * Set directly as the `font-family` attribute on every SVG <text> (canvas
+     * labels and therefore the SVG export too) — not inherited from a CSS
+     * container. Prefers the self-hosted Miragon typeface Geist (registered as
+     * 'Geist Variable' by @fontsource-variable/geist, with 'Geist' as a fallback
+     * name), and falls back to a system sans when the host hasn't loaded it (e.g.
+     * an exported SVG opened standalone).
+     */
+    readonly family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
+    readonly label: 13.5;
+    readonly small: 11;
+};
+/** Paper colour used for the label halo so text stays legible over lines. */
+export declare const PAPER: "#FFFFFF";
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA;;kDAEkD;AAIlD,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"}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export { Viewer } from './Viewer.js';
+export { NavigatedViewer } from './NavigatedViewer.js';
+export { Modeler } from './Modeler.js';
+export { CmBaseViewer } from './CmBaseViewer.js';
+export type { CmViewerOptions, EventCallback } from './CmBaseViewer.js';
+export { cmModelModule, CmElementFactory } from './model/index.js';
+export { cmDrawModule, ContextMapsRenderer } from './draw/index.js';
+export { ioModule, CmImporter, CmExporter, saveSVG, ROOT_ID } from './io/index.js';
+export { cmModelingModule, CmModeling } from './modeling/index.js';
+export { cmRulesModule, CmRules } from './rules/index.js';
+export { cmBehaviorsModule, CmFlatModelBehavior } from './behaviors/index.js';
+export { cmPaletteModule, CmPaletteProvider } from './palette/index.js';
+export { cmConnectHandlesModule, CmConnectHandles } from './connect-handles/index.js';
+export { cmLabelEditingModule, CmLabelEditing } from './label-editing/index.js';
+export { cmKeyboardModule, CmKeyboard } from './keyboard/index.js';
+export { cmZOrderModule, CmZOrder } from './zorder/index.js';
+export { isCmElement, isCmContext, isCmRelationship } from './model/di-types.js';
+export type { CmElement, CmContext, CmRelationship } from './model/di-types.js';
+export type { ImportWarning, RootBusinessObject } from './io/index.js';
+export { contextIconSvg, relationshipIconSvg } from './draw/palette-icons.js';
+export { MIRAGON, CD_TOKENS } from './theme/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,2BAA2B,CAAC;AAGnC,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,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACpE,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,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACtF,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,WAAW,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACjF,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChF,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAG9E,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}