@miragon/value-chain-renderer 0.4.0 → 0.6.0

package/README.md

@@ -4,10 +4,12 @@
 [![License: MIT](https://img.shields.io/github/license/Miragon/value-chain-modeler)](https://github.com/Miragon/value-chain-modeler/blob/main/LICENSE)
 
 Viewer and editor for value chain diagrams (ARIS-style _Wertschöpfungskettendiagramme_), built on
-[diagram-js](https://github.com/bpmn-io/diagram-js) with the look & feel of
-[bpmn.io](https://bpmn.io/). Framework-agnostic: mount it into any element. The
+[diagram-js](https://github.com/bpmn-io/diagram-js) and styled by the Miragon design system.
+Framework-agnostic: mount it into any element. The
 [Value Chain Modeler](https://github.com/Miragon/value-chain-modeler) web app and VS Code extension
-both wrap this package.
+both wrap this package, and it implements the
+[`@miragon/modeler-api`](https://www.npmjs.com/package/@miragon/modeler-api) contract for
+collaborative hosts.
 
 ![Modeler](https://raw.githubusercontent.com/Miragon/value-chain-modeler/main/docs/screenshot.png)
 
@@ -17,7 +19,9 @@ both wrap this package.
 npm install @miragon/value-chain-renderer @miragon/value-chain-schema-model
 ```
 
-ESM only, for browsers and bundlers.
+ESM only, for browsers and bundlers. `diagram-js` (^15.28.0), `didi`, `tiny-svg` and `zod` are peer
+dependencies: an app that already has them shares its copy with the renderer, since a second
+diagram-js or Zod breaks the dependency injection and `instanceof` checks.
 
 ## Quick start
 
@@ -36,8 +40,21 @@ modeler.on('commandStack.changed', () => {
 const { svg } = modeler.saveSVG(); // standalone SVG
 ```
 
-The stylesheet is required: it includes diagram-js' own CSS and styles the palette, context pad and
-label editor.
+The stylesheet is required. It loads, in this order, the design-system tokens
+(`cd-tokens.generated.css`, in a cascade layer, so a host page's own `--cd-*` tokens win),
+diagram-js' own CSS and `cd-canvas.css`, which maps diagram-js' chrome onto the `--cd-ui-*` roles;
+then it styles the canvas surround, the context pad, the label editor and the shortcuts dialog on
+those roles only. The three design-system files are vendored unchanged from the
+`miragon-brand:modeler-tool-design` skill (design system 1.13.0) into `src/theme/`. The diagram
+itself is drawn with SVG presentation values in the light roles of those tokens, so SVG and PNG
+exports stay light in every mode.
+
+Labels are set in `'Geist Variable', 'Geist', ui-sans-serif, system-ui, sans-serif` on every SVG
+text node. The package does not ship the font: self-host it, for example with
+`@fontsource-variable/geist` (`import '@fontsource-variable/geist/wght.css'`), or the labels fall
+back to a system sans. Labels drawn before the font arrived are laid out again once it has. A host
+chrome such as [`@miragon/modeler-shell`](https://www.npmjs.com/package/@miragon/modeler-shell)
+loads its own stylesheet after this one.
 
 ## Entry points
 
@@ -47,11 +64,81 @@ label editor.
 | `NavigatedViewer` | Read-only plus zoom and pan.                                        |
 | `Modeler`         | The full editor, plus `undo()` / `redo()` on top of the shared API. |
 
-All three take `{ container?, width?, height?, additionalModules? }` and share `importDocument`,
-`exportDocument`, `saveSVG`, `fitViewport`, `clear`, `attachTo`, `detach`, `destroy`, `on`/`off`
-and `get` (DI lookup). `additionalModules` extends the DI container as in bpmn-js; the feature
-modules (`vcDrawModule`, `vcRulesModule`, `vcPaletteModule`, …) are exported to build custom
-setups.
+All three take `{ container?, width?, height?, additionalModules?, freeArea?, fitOnImport?, undoRedoKeys? }`
+and share `importDocument`, `exportDocument`, `saveSVG`, `fitViewport`, `clear`, `attachTo`,
+`detach`, `destroy`, `on`/`off` and `get` (DI lookup). `additionalModules` extends the DI
+container as in bpmn-js; the feature modules (`vcDrawModule`, `vcRulesModule`, `vcPaletteModule`,
+…) are exported to build custom setups.
+
+- `importDocument(document)` validates the document before it touches the canvas (a rejected one
+  throws and leaves the previous diagram, its ids and its undo history as they were), erases the
+  undo history silently (no `commandStack.changed`), and fits the view: the content centred at the
+  largest zoom that shows all of it, never above 100 % (`fitOnImport: false` leaves the view to a
+  host that fits itself). A label being typed is taken down without committing and reopened
+  afterwards on the element with the same id.
+- A label being typed stays open across every view change, a host's fit or restore as much as a
+  wheel zoom, and moves along with its element; only Enter, leaving the text box or a click or drag
+  on the canvas commits it.
+- `exportDocument()` writes back every key the schema does not define (vendor extensions on the
+  document, its meta, its elements and connections).
+- New elements get random ids (`step_k3x9q2mf`, `org_…`, `sequence_…`), so two people adding an
+  element to one document at the same time never pick the same id.
+- `freeArea`: the canvas area the host's chrome leaves free, as `{ insets: () => FreeAreaInsets }`
+  (px from the container's edges) or `{ center: () => Point | undefined }` (diagram coordinates).
+  Enter or Space on a creating palette entry places the element in its centre (default: the centre
+  of the visible canvas), selected, with the canvas focused and its label editor open.
+  `freeRectCenter` is the deprecated name of `freeArea: { center }`, accepted until the next minor
+  release; given both, `freeArea` wins.
+- `undoRedoKeys: false` leaves Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z and Ctrl+Y unbound and unprevented, for
+  a host that owns the history (the VS Code document).
+
+## Keyboard
+
+On the focused canvas: L lasso, H hand, S create or remove space, C connect, E edit the label,
+Cmd/Ctrl+A select all, the arrows move the selection (Shift: in large steps), Cmd/Ctrl + arrows move
+the canvas, Delete/Backspace, copy, cut, paste and duplicate, and undo/redo unless `undoRedoKeys` is
+false. `diagramShortcuts()` lists them for a dialog.
+
+## Edit lock
+
+`modeler.get('vcReadOnly').setReadOnly(true)` locks every edit while the document behind the canvas
+cannot be saved from it (an invalid file in an IDE): no create, move, resize, connect, waypoints,
+delete, align, paste, context pad or label editor, and no space, connect or label keys. Selection,
+lasso, hand, zoom, copy and export keep working.
+
+## Collaborative modeler (`@miragon/modeler-api`)
+
+```ts
+import {
+  createCollaborativeModeler,
+  createCollaborativeViewer,
+} from '@miragon/value-chain-renderer';
+
+const modeler = createCollaborativeModeler({ additionalModules: [] });
+modeler.attachTo(host); // in the document, with a size
+await modeler.importText(text); // silent, fitted; rejects when the text is no valid document
+modeler.onContentChanged(() => save(modeler.exportText())); // canonical JSON
+```
+
+`createCollaborativeModeler` and `createCollaborativeViewer` implement the `CollaborativeModeler`
+contract 1.2 (`meta.notation` `"value-chain"`): blank text opens as an empty diagram,
+`onContentChanged` fires for every edit and undo/redo and never for an import, view state is the
+diagram-js viewbox, a host's `setViewState` or fit never commits a label being typed, and the
+`elements` surface lists steps and organizational units (name = label) with `reveal`, selection and
+`bounds(id)`, the live box of a step or an organizational unit in diagram coordinates. Both take
+the contract's factory options `freeArea`, `fitOnImport` and `undoRedoKeys` (the viewer ignores
+the two that need editing) and the deprecated `freeRectCenter`. The browser test suite runs the
+contract's conformance kit on every law, with no case skipped and no advisory. `diagram` is the
+wrapped `Modeler` or `NavigatedViewer` for host wiring.
+
+## Chrome content for hosts
+
+What both apps show around the diagram, typed structurally like `@miragon/modeler-shell` (the
+renderer never imports the shell): `diagramMenu()` (Export as PNG, then SVG, optionally JSON; Help
+with "Keyboard shortcuts…"), `createShortcutsDialog(shell)` (a modal `<dialog>` in the chrome's
+root, with the high-contrast and forced-colours rules of the design system; `{ fileKeys: true }`
+adds the web app's File keys, Cmd/Ctrl+O and Cmd/Ctrl+S), `svgToPng()` and
+`blobToBase64()` for the PNG export, and `vcBounds.contentBounds(padding)` for a host's fit.
 
 ## Notation
 
@@ -64,4 +151,7 @@ setups.
 
 ## License
 
-[MIT](https://github.com/Miragon/value-chain-modeler/blob/main/LICENSE)
+[MIT](https://github.com/Miragon/value-chain-modeler/blob/main/LICENSE). The inlined
+[Lucide](https://lucide.dev) icons are ISC (© Lucide Icons and Contributors); `trash` and `x` derive
+from Feather, MIT (© Cole Bemis), as Lucide's LICENSE lists them. The bundle keeps both notices as a
+legal comment.

package/dist/Modeler.d.ts

@@ -1,6 +1,9 @@
 import { ModuleDeclaration } from 'didi';
 import { NavigatedViewer } from './NavigatedViewer.js';
-/** The full value chain editor. */
+/**
+ * The full value chain editor, with the edit lock for a document the canvas cannot save
+ * (`vcReadOnly`).
+ */
 export declare class Modeler extends NavigatedViewer {
     protected _getModules(): ModuleDeclaration[];
     undo(): void;

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;AAW9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAcvD,mCAAmC;AACnC,qBAAa,OAAQ,SAAQ,eAAe;cACvB,WAAW,IAAI,iBAAiB,EAAE;IA8BrD,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;AAW9C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAevD;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,eAAe;cACvB,WAAW,IAAI,iBAAiB,EAAE;IA+BrD,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,OAAO;CAGnB"}

package/dist/VcBaseViewer.d.ts

@@ -1,14 +1,28 @@
 import { ModuleDeclaration } from 'didi';
+import { CollaborativeModelerOptions } from '@miragon/modeler-api';
 import { EventBusEventCallback } from 'diagram-js/lib/core/EventBus';
-import { ValueChainDocument } from '@miragon/value-chain-schema-model';
+import { Point, ValueChainDocument } from '@miragon/value-chain-schema-model';
 import { ImportWarning } from './io/types.js';
-export interface VcViewerOptions {
+/**
+ * `freeArea`, `fitOnImport` and `undoRedoKeys` as `@miragon/modeler-api` 1.2 names them:
+ * `freeArea` is where Enter or Space on a creating palette entry places the element (the centre of
+ * the canvas area the host's chrome leaves free, guide §5.5; default the centre of the visible
+ * canvas), `fitOnImport: false` leaves the view after an import to the host, and
+ * `undoRedoKeys: false` leaves Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z and Ctrl+Y to a host that owns the
+ * history (the VS Code document).
+ */
+export interface VcViewerOptions extends CollaborativeModelerOptions {
     /** Host element. If missing, a detached <div> is created (attach later via attachTo). */
     container?: HTMLElement;
     width?: number | string;
     height?: number | string;
     /** Concatenated to the end of the module list (extension point). */
     additionalModules?: ModuleDeclaration[];
+    /**
+     * @deprecated Use `freeArea: { center }`; accepted until the next minor release. Given both,
+     * `freeArea` wins.
+     */
+    freeRectCenter?: (() => Point | undefined) | undefined;
 }
 /**
  * DI bootstrap and lifecycle shared by Viewer/NavigatedViewer/Modeler. The diagram is
@@ -27,7 +41,12 @@ export declare abstract class VcBaseViewer {
     getOptional<T>(name: string): T | null;
     on<T = unknown>(event: string, callback: EventBusEventCallback<T>, priority?: number): void;
     off<T = unknown>(event: string, callback: EventBusEventCallback<T>): void;
-    /** Replaces the current diagram contents; clears the undo history. */
+    /**
+     * Replaces the current diagram contents and erases the undo history, silently: no
+     * `commandStack.changed`, since an import is no edit a host should save. The document is
+     * validated before the canvas is touched, so a rejected one leaves no trace; an open label edit
+     * is taken down without committing and reopened afterwards when its element is still there.
+     */
     importDocument(document: ValueChainDocument): ImportWarning[];
     exportDocument(): ValueChainDocument;
     saveSVG(): {
@@ -39,6 +58,8 @@ export declare abstract class VcBaseViewer {
     attachTo(target: HTMLElement): void;
     detach(): void;
     destroy(): void;
+    private _render;
+    private _currentDocument;
     private _createContainer;
     private _ensureDiagram;
 }

package/dist/VcBaseViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VcBaseViewer.d.ts","sourceRoot":"","sources":["../src/VcBaseViewer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAI9C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAI5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,MAAM,WAAW,eAAe;IAC9B,yFAAyF;IACzF,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;CACzC;AAMD;;;;GAIG;AACH,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,IAAI,SAAS,IAAI,WAAW,CAE3B;IAED,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;IAIvB,mFAAmF;IACnF,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAItC,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,QAAQ,SAAO,GAAG,IAAI;IAIzF,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI;IAIzE,sEAAsE;IACtE,cAAc,CAAC,QAAQ,EAAE,kBAAkB,GAAG,aAAa,EAAE;IAU7D,cAAc,IAAI,kBAAkB;IAIpC,OAAO,IAAI;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAI1B,kDAAkD;IAClD,WAAW,IAAI,IAAI;IAYnB,KAAK,IAAI,IAAI;IAKb,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAMnC,MAAM,IAAI,IAAI;IAId,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;CAOvB"}
+{"version":3,"file":"VcBaseViewer.d.ts","sourceRoot":"","sources":["../src/VcBaseViewer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAC9C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAIxE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAEL,KAAK,KAAK,EACV,KAAK,kBAAkB,EACxB,MAAM,mCAAmC,CAAC;AAK3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;GAOG;AACH,MAAM,WAAW,eAAgB,SAAQ,2BAA2B;IAClE,yFAAyF;IACzF,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,cAAc,CAAC,EAAE,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CACxD;AAUD;;;;GAIG;AACH,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,IAAI,SAAS,IAAI,WAAW,CAE3B;IAED,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;IAIvB,mFAAmF;IACnF,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAItC,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,QAAQ,SAAO,GAAG,IAAI;IAIzF,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI;IAIzE;;;;;OAKG;IACH,cAAc,CAAC,QAAQ,EAAE,kBAAkB,GAAG,aAAa,EAAE;IAmB7D,cAAc,IAAI,kBAAkB;IAIpC,OAAO,IAAI;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAI1B,kDAAkD;IAClD,WAAW,IAAI,IAAI;IAYnB,KAAK,IAAI,IAAI;IAKb,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAMnC,MAAM,IAAI,IAAI;IAId,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;CAgBvB"}

package/dist/bounds/VcBounds.d.ts

@@ -0,0 +1,17 @@
+import { default as ElementRegistry } from 'diagram-js/lib/core/ElementRegistry';
+import { Bounds } from '@miragon/value-chain-schema-model';
+/**
+ * The extent of the diagram's content: every step, org unit and connection (waypoints included).
+ * One source for the import's fit, the SVG export's frame and a host's fit, which pass their own
+ * margin.
+ */
+export default class VcBounds {
+    private readonly elementRegistry;
+    static $inject: string[];
+    constructor(elementRegistry: ElementRegistry);
+    /** No step and no org unit on the canvas. */
+    isEmpty(): boolean;
+    /** The tight bounds of the content grown by `padding` on every side; undefined while empty. */
+    contentBounds(padding?: number): Bounds | undefined;
+}
+//# sourceMappingURL=VcBounds.d.ts.map

package/dist/bounds/VcBounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VcBounds.d.ts","sourceRoot":"","sources":["../../src/bounds/VcBounds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AAGvE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAGhE;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;IAGf,OAAO,CAAC,QAAQ,CAAC,eAAe;IAF5C,MAAM,CAAC,OAAO,WAAuB;gBAER,eAAe,EAAE,eAAe;IAE7D,6CAA6C;IAC7C,OAAO,IAAI,OAAO;IAIlB,+FAA+F;IAC/F,aAAa,CAAC,OAAO,SAAI,GAAG,MAAM,GAAG,SAAS;CAa/C"}

package/dist/bounds/index.d.ts

@@ -0,0 +1,5 @@
+import { ModuleDeclaration } from 'didi';
+/** Content bounds of the diagram (import fit, SVG export, a host's fit). */
+export declare const vcBoundsModule: ModuleDeclaration;
+export { default as VcBounds } from './VcBounds.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bounds/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAG9C,4EAA4E;AAC5E,eAAO,MAAM,cAAc,EAAE,iBAE5B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/collaborative/CollaborativeValueChain.d.ts

@@ -0,0 +1,32 @@
+import { CollaborativeModeler, CollaborativeModelerOptions, ElementsSurface } from '@miragon/modeler-api';
+import { ModuleDeclaration } from 'didi';
+import { Point } from '@miragon/value-chain-schema-model';
+import { Modeler } from '../Modeler.js';
+import { NavigatedViewer } from '../NavigatedViewer.js';
+/** Stable notation id in `meta.notation` of the collaborative-modeler contract. */
+export declare const VALUE_CHAIN_NOTATION = "value-chain";
+/** What a blank text (a file just created in the explorer) opens as. */
+export declare const BLANK_DOCUMENT_NAME = "New value chain";
+/**
+ * The contract's factory options (`freeArea`, `fitOnImport`, `undoRedoKeys`, see
+ * `VcViewerOptions`) plus the renderer's own. The viewer ignores the two that need editing.
+ */
+export interface CollaborativeValueChainOptions extends CollaborativeModelerOptions {
+    /** Appended to the renderer's own modules (e.g. a host's chrome module). */
+    additionalModules?: ModuleDeclaration[] | undefined;
+    /**
+     * @deprecated Use `freeArea: { center }`; accepted until the next minor release. Given both,
+     * `freeArea` wins.
+     */
+    freeRectCenter?: (() => Point | undefined) | undefined;
+}
+/** The contract surface plus the wrapped diagram for host-specific wiring. */
+export interface CollaborativeValueChainModeler extends CollaborativeModeler {
+    readonly elements: ElementsSurface & Required<Pick<ElementsSurface, 'bounds'>>;
+    readonly diagram: Modeler | NavigatedViewer;
+}
+/** The editing mount (`meta.editable: true`) of the collaborative-modeler contract. */
+export declare function createCollaborativeModeler(options?: CollaborativeValueChainOptions): CollaborativeValueChainModeler;
+/** The read-only mount (`meta.editable: false`): imports, exports and reveals, never edits. */
+export declare function createCollaborativeViewer(options?: CollaborativeValueChainOptions): CollaborativeValueChainModeler;
+//# sourceMappingURL=CollaborativeValueChain.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollaborativeValueChain.d.ts","sourceRoot":"","sources":["../../src/collaborative/CollaborativeValueChain.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,EAIL,KAAK,KAAK,EAEX,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIxD,mFAAmF;AACnF,eAAO,MAAM,oBAAoB,gBAAgB,CAAC;AAElD,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,oBAAoB,CAAC;AAErD;;;GAGG;AACH,MAAM,WAAW,8BAA+B,SAAQ,2BAA2B;IACjF,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IACpD;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CACxD;AAED,8EAA8E;AAC9E,MAAM,WAAW,8BAA+B,SAAQ,oBAAoB;IAC1E,QAAQ,CAAC,QAAQ,EAAE,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC/E,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,CAAC;CAC7C;AASD,uFAAuF;AACvF,wBAAgB,0BAA0B,CACxC,OAAO,GAAE,8BAAmC,GAC3C,8BAA8B,CAUhC;AAED,+FAA+F;AAC/F,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,8BAAmC,GAC3C,8BAA8B,CAEhC"}

package/dist/collaborative/index.d.ts

@@ -0,0 +1,2 @@
+export { BLANK_DOCUMENT_NAME, VALUE_CHAIN_NOTATION, createCollaborativeModeler, createCollaborativeViewer, type CollaborativeValueChainModeler, type CollaborativeValueChainOptions, } from './CollaborativeValueChain.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/collaborative/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,0BAA0B,EAC1B,yBAAyB,EACzB,KAAK,8BAA8B,EACnC,KAAK,8BAA8B,GACpC,MAAM,8BAA8B,CAAC"}

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

@@ -5,6 +5,7 @@ import { Element } from 'diagram-js/lib/model/Types';
 import { default as VcAppend } from '../append/VcAppend.js';
 import { default as VcConnect } from '../connect/VcConnect.js';
 import { default as VcModeling } from '../modeling/VcModeling.js';
+import { default as VcReadOnly } from '../read-only/VcReadOnly.js';
 interface ContextPadEntry {
     group: string;
     html?: string;
@@ -18,8 +19,9 @@ export default class VcContextPadProvider {
     private readonly vcAppend;
     private readonly vcConnect;
     private readonly vcModeling;
+    private readonly readOnly;
     static $inject: string[];
-    constructor(contextPad: ContextPad, modeling: Modeling, popupMenu: PopupMenu, vcAppend: VcAppend, vcConnect: VcConnect, vcModeling: VcModeling);
+    constructor(contextPad: ContextPad, modeling: Modeling, popupMenu: PopupMenu, vcAppend: VcAppend, vcConnect: VcConnect, vcModeling: VcModeling, readOnly: Pick<VcReadOnly, 'isReadOnly'>);
     getContextPadEntries(element: Element): Entries;
     getMultiElementContextPadEntries(elements: Element[]): Entries;
     private addStepEntries;

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

@@ -1 +1 @@
-{"version":3,"file":"VcContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/VcContextPadProvider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAE7E,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,SAAS,MAAM,8CAA8C,CAAC;AAC1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAa1D,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AAExD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;CACnE;AAED,KAAK,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,oBAAoB;IAKrC,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,UAAU;IAR7B,MAAM,CAAC,OAAO,WAAkF;gBAG9F,UAAU,EAAE,UAAU,EACL,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU;IAKzC,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;IA2D/C,gCAAgC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO;IA8B9D,OAAO,CAAC,cAAc;CAsDvB"}
+{"version":3,"file":"VcContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/VcContextPadProvider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAE7E,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,SAAS,MAAM,8CAA8C,CAAC;AAC1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAa1D,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,UAAU,MAAM,4BAA4B,CAAC;AAEzD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;CACnE;AAED,KAAK,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;AAE/C,MAAM,CAAC,OAAO,OAAO,oBAAoB;IAarC,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IAjB3B,MAAM,CAAC,OAAO,WAQZ;gBAGA,UAAU,EAAE,UAAU,EACL,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC;IAK3D,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;IA8D/C,gCAAgC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO;IAiC9D,OAAO,CAAC,cAAc;CA8CvB"}

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

@@ -0,0 +1,27 @@
+import { DiagramShortcutOptions, ShortcutsChrome } from './shortcuts.js';
+/** What the dialog needs of the chrome around the diagram; a `@miragon/modeler-shell` handle fits. */
+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 close: string;
+    };
+    /** The control the focus returns to once the dialog closes. */
+    readonly menu: {
+        readonly trigger: HTMLElement;
+    };
+}
+export interface ShortcutsDialog {
+    open(): void;
+    isOpen(): boolean;
+    close(): void;
+    destroy(): void;
+}
+/**
+ * The "Keyboard shortcuts…" dialog of the Help group (guide §5.4, §8), a native modal <dialog>
+ * inside the chrome's root: the browser keeps the focus inside it, closes it on Escape and puts it
+ * in the top layer. Built on the first open and kept (closed) afterwards; the host calls
+ * `destroy()` with the diagram's teardown, since the chrome removes only what it added itself.
+ */
+export declare function createShortcutsDialog(chrome: ShortcutsDialogChrome, options?: DiagramShortcutOptions): ShortcutsDialog;
+//# sourceMappingURL=ShortcutsDialog.d.ts.map

package/dist/diagram-menu/ShortcutsDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsDialog.d.ts","sourceRoot":"","sources":["../../src/diagram-menu/ShortcutsDialog.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAKxB,sGAAsG;AACtG,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,yFAAyF;IACzF,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5E,+DAA+D;IAC/D,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC;CAClD;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,IAAI,IAAI,CAAC;IACb,MAAM,IAAI,OAAO,CAAC;IAClB,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;CACjB;AAuDD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,qBAAqB,EAC7B,OAAO,GAAE,sBAA2B,GACnC,eAAe,CAgCjB"}

package/dist/diagram-menu/index.d.ts

@@ -0,0 +1,7 @@
+export { JSON_EXPORT_LABEL, diagramMenu } from './menu.js';
+export type { DiagramExport, DiagramExports, DiagramMenu, DiagramMenuAction, DiagramMenuActions, DiagramMenuDialog, DiagramMenuIcon, } from './menu.js';
+export { diagramShortcuts } from './shortcuts.js';
+export type { DiagramShortcutOptions, ShortcutGroup, ShortcutKeyNames, ShortcutPlatform, ShortcutRow, ShortcutsChrome, } from './shortcuts.js';
+export { createShortcutsDialog } from './ShortcutsDialog.js';
+export type { ShortcutsDialog, ShortcutsDialogChrome } from './ShortcutsDialog.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/diagram-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/diagram-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC3D,YAAY,EACV,aAAa,EACb,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,GAChB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACV,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,eAAe,GAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,44 @@
+/** The icons the guide gives these entries (guide §5.14, the shell's common set). */
+export type DiagramMenuIcon = 'file-image' | 'file-code-corner' | 'keyboard';
+interface DiagramMenuItem {
+    readonly id: string;
+    readonly label: string;
+    readonly icon?: DiagramMenuIcon;
+}
+export interface DiagramMenuAction extends DiagramMenuItem {
+    readonly kind: 'action';
+    readonly shortcut?: string;
+    onSelect(): void;
+}
+export interface DiagramMenuDialog extends DiagramMenuItem {
+    readonly kind: 'dialog';
+    onSelect(): void;
+}
+export interface DiagramMenu {
+    readonly export: readonly DiagramMenuAction[];
+    readonly help: readonly DiagramMenuDialog[];
+}
+export interface DiagramExport {
+    onSelect(): void;
+    /** The chip of an app key that runs the same export, e.g. "⌘S". */
+    readonly shortcut?: string | undefined;
+}
+/**
+ * The exports a host offers, in the guide's order: PNG first (the more frequent target), then SVG,
+ * then the document itself where the host is not the file (the web app).
+ */
+export interface DiagramExports {
+    readonly png: DiagramExport;
+    readonly svg: DiagramExport;
+    readonly json?: DiagramExport | undefined;
+}
+export interface DiagramMenuActions {
+    readonly exports: DiagramExports;
+    showKeyboardShortcuts(): void;
+}
+/** The label of the JSON export, also its row in the shortcuts dialog's File group. */
+export declare const JSON_EXPORT_LABEL = "Export as JSON";
+/** The menu groups of the diagram (guide §5.4): Export with PNG first, Help. */
+export declare function diagramMenu(actions: DiagramMenuActions): DiagramMenu;
+export {};
+//# sourceMappingURL=menu.d.ts.map

package/dist/diagram-menu/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/diagram-menu/menu.ts"],"names":[],"mappings":"AAOA,qFAAqF;AACrF,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,kBAAkB,GAAG,UAAU,CAAC;AAE7E,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,eAAe,CAAC;CACjC;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAC9C,QAAQ,CAAC,IAAI,EAAE,SAAS,iBAAiB,EAAE,CAAC;CAC7C;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,IAAI,IAAI,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,qBAAqB,IAAI,IAAI,CAAC;CAC/B;AAkBD,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,mBAAmB,CAAC;AAElD,gFAAgF;AAChF,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CAkBpE"}

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

@@ -0,0 +1,41 @@
+export type ShortcutPlatform = 'mac' | 'other';
+export interface ShortcutKeyNames {
+    readonly ctrl: string;
+    readonly shift: string;
+    readonly plus: string;
+    readonly minus: string;
+}
+/** What the shortcuts need of the chrome around the diagram. */
+export interface ShortcutsChrome {
+    readonly platform: ShortcutPlatform;
+    /** The tool's UI language, for the percentage in "Zoom to 100%". */
+    readonly lang: string;
+    readonly messages: {
+        readonly zoomIn: string;
+        readonly zoomOut: string;
+        zoomToActual(percent: string): string;
+        readonly fit: string;
+        /** The File group's "Open…" (the shell's `messages.openFile`); default "Open…". */
+        readonly openFile?: string | undefined;
+        readonly keyNames: ShortcutKeyNames;
+    };
+}
+export interface ShortcutRow {
+    readonly action: string;
+    /** Alternative key combinations, each shown as its own chip. */
+    readonly keys: readonly string[];
+}
+export interface ShortcutGroup {
+    readonly title: string;
+    readonly rows: readonly ShortcutRow[];
+}
+export interface DiagramShortcutOptions {
+    /** The web app's file keys: Cmd/Ctrl+O opens a file, Cmd/Ctrl+S exports the JSON document. */
+    readonly fileKeys?: boolean | undefined;
+}
+/**
+ * Every shortcut of the diagram, grouped as guide §5.4 asks (View, Edit, the notation's tools),
+ * after the web app's File keys where it binds them.
+ */
+export declare function diagramShortcuts(chrome: ShortcutsChrome, options?: DiagramShortcutOptions): ShortcutGroup[];
+//# sourceMappingURL=shortcuts.d.ts.map

package/dist/diagram-menu/shortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcuts.d.ts","sourceRoot":"","sources":["../../src/diagram-menu/shortcuts.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,gEAAgE;AAChE,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;IACpC,oEAAoE;IACpE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE;QACjB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;QACtC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QACrB,mFAAmF;QACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACvC,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAC;KACrC,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,WAAW,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC;AAiFD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,eAAe,EACvB,OAAO,GAAE,sBAA2B,GACnC,aAAa,EAAE,CA+CjB"}

package/dist/draw/VcRenderer.d.ts

@@ -1,12 +1,21 @@
 import { default as BaseRenderer } from 'diagram-js/lib/draw/BaseRenderer';
+import { default as ElementRegistry } from 'diagram-js/lib/core/ElementRegistry';
 import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { default as GraphicsFactory } from 'diagram-js/lib/core/GraphicsFactory';
 import { Connection, Element, Shape } from 'diagram-js/lib/model/Types';
 export default class VcRenderer extends BaseRenderer {
+    private readonly elementRegistry;
+    private readonly graphicsFactory;
     static $inject: string[];
     private readonly textUtil;
     /** Unique per instance so marker ids never collide across diagrams on one page. */
     private readonly markerSuffix;
-    constructor(eventBus: EventBus);
+    constructor(eventBus: EventBus, elementRegistry: ElementRegistry, graphicsFactory: GraphicsFactory);
+    /**
+     * A label drawn before the web font arrived was measured in the fallback font: its lines sit off
+     * centre, and may wrap differently, once the font renders. Such labels are laid out again then.
+     */
+    private relayoutLabelsWhenTheFontArrives;
     canRender(element: Element): boolean;
     drawShape(visuals: SVGElement, element: Shape): SVGElement;
     drawConnection(visuals: SVGElement, element: Connection): SVGElement;

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

@@ -1 +1 @@
-{"version":3,"file":"VcRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/VcRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAG5D,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAoB7E,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,YAAY;IAClD,MAAM,CAAC,OAAO,WAAgB;IAE9B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAOtB;IAEH,mFAAmF;IACnF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiC;gBAElD,QAAQ,EAAE,QAAQ;IAIrB,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;IAIpC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,GAAG,UAAU;IAqC1D,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,GAAG,UAAU;IA2BpE,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAOlC,iBAAiB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM;IAQ1D,OAAO,CAAC,WAAW;CA+BpB"}
+{"version":3,"file":"VcRenderer.d.ts","sourceRoot":"","sources":["../../src/draw/VcRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAG5D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAoB7E,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,YAAY;IAiBhD,OAAO,CAAC,QAAQ,CAAC,eAAe;IAChC,OAAO,CAAC,QAAQ,CAAC,eAAe;IAjBlC,MAAM,CAAC,OAAO,WAAsD;IAEpE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAOtB;IAEH,mFAAmF;IACnF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiC;gBAG5D,QAAQ,EAAE,QAAQ,EACD,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe;IAMnD;;;OAGG;IACH,OAAO,CAAC,gCAAgC;IA6B/B,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;IAIpC,SAAS,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,GAAG,UAAU;IAqC1D,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,GAAG,UAAU;IA2BpE,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM;IAOlC,iBAAiB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM;IAQ1D,OAAO,CAAC,WAAW;CA+BpB"}

package/dist/draw/icons.d.ts

@@ -1,24 +1,21 @@
-/**
- * Inline SVG icons for palette (28px) and context pad (24px) entries. All icons use
- * `currentColor`, so the diagram-js palette/context-pad hover colors apply.
- */
 export declare const ICONS: {
     readonly handTool: string;
     readonly lassoTool: string;
     readonly spaceTool: string;
     readonly globalConnect: string;
     readonly createStep: string;
+    readonly createOrgUnit: string;
     readonly appendStep: string;
     readonly appendSubStep: string;
     readonly connectSequence: string;
     readonly connectHierarchy: string;
-    readonly createOrgUnit: string;
     readonly appendOrgUnit: string;
     readonly toggleType: string;
     readonly align: string;
     readonly color: string;
     readonly trash: string;
 };
-export declare function paletteEntryHtml(iconSvg: string, title: string, draggable?: boolean): string;
-export declare function contextPadEntryHtml(iconSvg: string, title: string, draggable?: boolean): string;
+/** No native `title`: the palette's tooltip (diagram-js or a host's chrome) names the entry. */
+export declare function paletteEntryHtml(iconSvg: string, draggable?: boolean): string;
+export declare function contextPadEntryHtml(iconSvg: string, draggable?: boolean): 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;AAYH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CAkDR,CAAC;AAEX,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,UAAQ,GAAG,MAAM,CAK1F;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,UAAQ,GAAG,MAAM,CAK7F"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/draw/icons.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CAyBR,CAAC;AAEX,gGAAgG;AAChG,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,UAAQ,GAAG,MAAM,CAK3E;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,UAAQ,GAAG,MAAM,CAE9E"}

package/dist/draw/lucide.d.ts

@@ -0,0 +1,31 @@
+/*! @miragon/value-chain-renderer icon geometry
+ * Lucide (lucide-static 1.59.0) @license ISC
+ * Copyright (c) 2026 Lucide Icons and Contributors
+ * Derived from Feather, as Lucide's LICENSE lists them: trash and x. Feather @license MIT
+ * Copyright (c) 2013-present Cole Bemis */
+export declare const LUCIDE: {
+    readonly 'square-dashed-mouse-pointer': string;
+    readonly hand: string;
+    readonly 'unfold-horizontal': string;
+    readonly workflow: string;
+    readonly palette: string;
+    readonly trash: string;
+    readonly 'arrow-left-right': "<path d=\"M8 3 4 7l4 4\"/><path d=\"M4 7h16\"/><path d=\"m16 21 4-4-4-4\"/><path d=\"M20 17H4\"/>";
+    readonly 'align-start-vertical': string;
+    readonly x: "<path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/>";
+};
+export type LucideIconName = keyof typeof LUCIDE;
+export interface LucideIconOptions {
+    /** Rendered width and height in px. */
+    size: number;
+    /** Stroke width on the 24 grid. */
+    strokeWidth: number;
+}
+/**
+ * Guide §11: chrome icons are 16px at stroke 2.5 and palette tools 20px at stroke 2, both
+ * 1.67px on screen. `currentColor`, so the surrounding role (rest, hover, pressed) decides.
+ */
+export declare const CHROME_ICON: LucideIconOptions;
+export declare const PALETTE_TOOL_ICON: LucideIconOptions;
+export declare function lucideIcon(name: LucideIconName, options?: LucideIconOptions): string;
+//# sourceMappingURL=lucide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lucide.d.ts","sourceRoot":"","sources":["../../src/draw/lucide.ts"],"names":[],"mappings":"AAAA;;;;2CAI2C;AAO3C,eAAO,MAAM,MAAM;;;;;;;;;;CAgCT,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,MAAM,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,iBAAkD,CAAC;AAC7E,eAAO,MAAM,iBAAiB,EAAE,iBAAgD,CAAC;AAEjF,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,OAAO,GAAE,iBAA+B,GAAG,MAAM,CAOjG"}

package/dist/draw/styles.d.ts

@@ -1,13 +1,19 @@
 /**
- * Single source of visual constants, matching the bpmn.io design language:
- * near-black ink strokes (2px, round joins) on white fills, Arial 12px labels.
+ * Canvas colours, the light roles of the vendored design tokens (guide §10.1): contours,
+ * connections and labels in the text role, element fills in the plot role. The renderer writes
+ * them as presentation values, so exports look the same everywhere and stay light in every mode.
  */
 export declare const COLORS: {
-    readonly ink: "hsl(225, 10%, 15%)";
-    readonly fill: "white";
+    readonly ink: string;
+    readonly fill: string;
 };
+/**
+ * The family goes onto every SVG text node, since SVG text does not inherit the container's font
+ * (guide §4). "Geist Variable" is the name `@fontsource-variable/geist` registers; the hosts load
+ * it, and an exported SVG opened elsewhere falls back to "Geist" or a system sans.
+ */
 export declare const FONT: {
-    readonly family: "Arial, sans-serif";
+    readonly family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, sans-serif";
     readonly size: 12;
     readonly lineHeight: 1.2;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAEX,eAAO,MAAM,YAAY,IAAI,CAAC;AAE9B,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,yFAAyF;AACzF,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAO1E,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAEX,eAAO,MAAM,YAAY,IAAI,CAAC;AAE9B,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,yFAAyF;AACzF,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAO1E,CAAC"}