@miragon/value-chain-renderer 0.7.1 → 0.7.2

package/README.md

@@ -1,17 +1,17 @@
 # @miragon/value-chain-renderer
 
 [![npm](https://img.shields.io/npm/v/@miragon/value-chain-renderer)](https://www.npmjs.com/package/@miragon/value-chain-renderer)
-[![License: MIT](https://img.shields.io/github/license/Miragon/value-chain-modeler)](https://github.com/Miragon/value-chain-modeler/blob/main/LICENSE)
+[![License: MIT](https://img.shields.io/github/license/Miragon/modeler-suite)](https://github.com/Miragon/modeler-suite/blob/main/modelers/value-chain/LICENSE)
 
 Viewer and editor for value chain diagrams (ARIS-style _Wertschöpfungskettendiagramme_), built on
 [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
+[Value Chain Modeler](https://github.com/Miragon/modeler-suite/tree/main/modelers/value-chain) web app and VS Code extension
 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)
+![Modeler](https://raw.githubusercontent.com/Miragon/modeler-suite/main/modelers/value-chain/docs/screenshot.png)
 
 ## Install
 
@@ -26,14 +26,14 @@ diagram-js or Zod breaks the dependency injection and `instanceof` checks.
 ## Quick start
 
 ```ts
-import { Modeler } from '@miragon/value-chain-renderer';
-import '@miragon/value-chain-renderer/assets/value-chain.css';
-import { createEmptyDocument } from '@miragon/value-chain-schema-model';
+import { Modeler } from "@miragon/value-chain-renderer";
+import "@miragon/value-chain-renderer/assets/value-chain.css";
+import { createEmptyDocument } from "@miragon/value-chain-schema-model";
 
-const modeler = new Modeler({ container: document.querySelector('#canvas')! });
-modeler.importDocument(createEmptyDocument('My value chain'));
+const modeler = new Modeler({ container: document.querySelector("#canvas")! });
+modeler.importDocument(createEmptyDocument("My value chain"));
 
-modeler.on('commandStack.changed', () => {
+modeler.on("commandStack.changed", () => {
   const doc = modeler.exportDocument(); // ValueChainDocument
 });
 
@@ -45,7 +45,7 @@ The stylesheet is required. It loads, in this order, the design-system tokens
 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
+`miragon-brand:modeler-tool-design` skill (design system 1.20.1) 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.
 
@@ -99,6 +99,18 @@ Cmd/Ctrl+A select all, the arrows move the selection (Shift: in large steps), Cm
 the canvas, Delete/Backspace, copy, cut, paste and duplicate, and undo/redo unless `undoRedoKeys` is
 false. `diagramShortcuts()` lists them for a dialog.
 
+- The keys act only while the canvas itself has the focus, as diagram-js 15's keyboard binds them
+  to the canvas `<svg>`. Keys with nothing focused (`<body>`), on a host's chrome, on the palette,
+  the context pad or an editor pass, and so do keys someone already handled (`defaultPrevented`),
+  keys of an IME composition and a `keydown` without a key.
+- A pointer on a palette or context-pad entry hands the focus to the canvas before the entry runs,
+  so Delete and `Cmd/Ctrl+Z` act at once; a label editor or menu the entry opens takes it from
+  there. Enter or Space on an entry leave the focus on it, unless the entry's action left it on
+  `<body>`.
+- A host that hides the canvas without destroying the modeler makes its container `inert` or
+  `display: none`, not only transparent: a hidden or inert canvas cannot hold the focus, so no key
+  reaches it.
+
 ## Edit lock
 
 `modeler.get('vcReadOnly').setReadOnly(true)` locks every edit while the document behind the canvas
@@ -112,7 +124,7 @@ lasso, hand, zoom, copy and export keep working.
 import {
   createCollaborativeModeler,
   createCollaborativeViewer,
-} from '@miragon/value-chain-renderer';
+} from "@miragon/value-chain-renderer";
 
 const modeler = createCollaborativeModeler({ additionalModules: [] });
 modeler.attachTo(host); // in the document, with a size
@@ -126,10 +138,12 @@ contract 1.3 (`meta.notation` `"value-chain"`): blank text opens as an empty dia
 diagram-js viewbox, a host's `setViewState` or fit never commits a label being typed, 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, and
-`contentBounds()` is the live, tight box around every step, organizational unit and connection in
-diagram coordinates (`undefined` while the diagram is empty): what a host that fits the view itself
-fits to, as `connectDiagramJs(shell, diagram, { modeler, isEmpty })` of `@miragon/modeler-shell`
-does. Label text that overflows its shape is not part of the box, as in the SVG export. Both take
+`contentBounds()` is the live, tight box around every step, organizational unit and connection and
+every label, also where a long label runs past a small shape, in diagram coordinates (`undefined`
+while the diagram is empty): what a host that fits the view itself fits to, as
+`connectDiagramJs(shell, diagram, { modeler, isEmpty })` of `@miragon/modeler-shell` does, and what
+the SVG export frames. The renderer measures each label once per content change, so zoom and
+scroll leave the box alone. 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
@@ -156,7 +170,7 @@ shell's empty-file hint.
 
 ## License
 
-[MIT](https://github.com/Miragon/value-chain-modeler/blob/main/LICENSE). The inlined
+[MIT](https://github.com/Miragon/modeler-suite/blob/main/modelers/value-chain/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/bounds/VcBounds.d.ts

@@ -1,14 +1,16 @@
 import { default as ElementRegistry } from 'diagram-js/lib/core/ElementRegistry';
 import { Bounds } from '@miragon/value-chain-schema-model';
+import { default as VcRenderer } from '../draw/VcRenderer.js';
 /**
- * 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.
+ * The extent of the diagram's content: every step, org unit and connection (waypoints included)
+ * and every label, also where its text runs past its shape. 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;
+    private readonly vcRenderer;
     static $inject: string[];
-    constructor(elementRegistry: ElementRegistry);
+    constructor(elementRegistry: ElementRegistry, vcRenderer: VcRenderer);
     /** 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. */

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

@@ -1 +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"}
+{"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;AAChE,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AAGpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,QAAQ;IAIzB,OAAO,CAAC,QAAQ,CAAC,eAAe;IAChC,OAAO,CAAC,QAAQ,CAAC,UAAU;IAJ7B,MAAM,CAAC,OAAO,WAAqC;gBAGhC,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU;IAGzC,6CAA6C;IAC7C,OAAO,IAAI,OAAO;IAIlB,+FAA+F;IAC/F,aAAa,CAAC,OAAO,SAAI,GAAG,MAAM,GAAG,SAAS;CAiB/C"}

package/dist/bounds/index.d.ts

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bounds/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAI9C,6FAA6F;AAC7F,eAAO,MAAM,cAAc,EAAE,iBAG5B,CAAC;AAEF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/collaborative/CollaborativeValueChain.d.ts

@@ -22,11 +22,12 @@ export interface CollaborativeValueChainOptions extends CollaborativeModelerOpti
 }
 /** The contract surface plus the wrapped diagram for host-specific wiring. */
 export interface CollaborativeValueChainModeler extends CollaborativeModeler {
-    readonly elements: ElementsSurface & Required<Pick<ElementsSurface, 'bounds'>>;
+    readonly elements: ElementsSurface & Required<Pick<ElementsSurface, "bounds">>;
     /**
-     * The tight box around every step, org unit and connection (waypoints included) in diagram
-     * coordinates, without a margin of its own; undefined while the diagram has no element. Label
-     * text that overflows its shape is not part of the box, as in the SVG export.
+     * The tight box around every step, org unit and connection (waypoints included) and every label,
+     * also where its text runs past its shape, in diagram coordinates, without a margin of its own;
+     * undefined while the diagram has no element. The SVG export frames the same box. Labels are
+     * measured once per content change, so zoom and scroll leave the box alone.
      */
     contentBounds(): ElementBounds | undefined;
     readonly diagram: Modeler | NavigatedViewer;

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

@@ -1 +1 @@
-{"version":3,"file":"CollaborativeValueChain.d.ts","sourceRoot":"","sources":["../../src/collaborative/CollaborativeValueChain.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,2BAA2B,EAChC,KAAK,aAAa,EAElB,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,OAAO,EAIL,KAAK,KAAK,EAEX,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKxD,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;;;;OAIG;IACH,aAAa,IAAI,aAAa,GAAG,SAAS,CAAC;IAC3C,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"}
+{"version":3,"file":"CollaborativeValueChain.d.ts","sourceRoot":"","sources":["../../src/collaborative/CollaborativeValueChain.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,2BAA2B,EAChC,KAAK,aAAa,EAElB,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAK9C,OAAO,EAIL,KAAK,KAAK,EAEX,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKxD,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;;;;;OAKG;IACH,aAAa,IAAI,aAAa,GAAG,SAAS,CAAC;IAC3C,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/context-pad/VcContextPadProvider.d.ts

@@ -21,7 +21,7 @@ export default class VcContextPadProvider {
     private readonly vcModeling;
     private readonly readOnly;
     static $inject: string[];
-    constructor(contextPad: ContextPad, modeling: Modeling, popupMenu: PopupMenu, vcAppend: VcAppend, vcConnect: VcConnect, vcModeling: VcModeling, readOnly: Pick<VcReadOnly, 'isReadOnly'>);
+    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/diagram-menu/ShortcutsDialog.d.ts

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

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

@@ -1,17 +1,17 @@
 /** The icons the guide gives these entries (guide §5.14, the shell's common set). */
-export type DiagramMenuIcon = 'file-image' | 'file-code-corner' | 'keyboard';
+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 kind: "action";
     readonly shortcut?: string;
     onSelect(): void;
 }
 export interface DiagramMenuDialog extends DiagramMenuItem {
-    readonly kind: 'dialog';
+    readonly kind: "dialog";
     onSelect(): void;
 }
 export interface DiagramMenu {

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

@@ -1,4 +1,4 @@
-export type ShortcutPlatform = 'mac' | 'other';
+export type ShortcutPlatform = "mac" | "other";
 export interface ShortcutKeyNames {
     readonly ctrl: string;
     readonly shift: string;

package/dist/draw/VcRenderer.d.ts

@@ -3,6 +3,7 @@ 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';
+import { Bounds } from '@miragon/value-chain-schema-model';
 export default class VcRenderer extends BaseRenderer {
     private readonly elementRegistry;
     private readonly graphicsFactory;
@@ -10,6 +11,8 @@ export default class VcRenderer extends BaseRenderer {
     private readonly textUtil;
     /** Unique per instance so marker ids never collide across diagrams on one page. */
     private readonly markerSuffix;
+    /** Each shape's label box as last drawn, relative to the shape. */
+    private readonly labelBoxes;
     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
@@ -18,6 +21,12 @@ export default class VcRenderer extends BaseRenderer {
     private relayoutLabelsWhenTheFontArrives;
     canRender(element: Element): boolean;
     drawShape(visuals: SVGElement, element: Shape): SVGElement;
+    /**
+     * The box the shape's label covers in diagram coordinates, a long label on a small shape well
+     * past the shape; undefined without a label. Measured when the shape was last drawn, that is once
+     * per content change, so zoom and scroll leave it alone.
+     */
+    labelBounds(shape: Shape): Bounds | undefined;
     drawConnection(visuals: SVGElement, element: Connection): SVGElement;
     getShapePath(shape: Shape): string;
     getConnectionPath(connection: Connection): string;

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,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"}
+{"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;AAE7E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AA2BhE,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,YAAY;IAoBhD,OAAO,CAAC,QAAQ,CAAC,eAAe;IAChC,OAAO,CAAC,QAAQ,CAAC,eAAe;IApBlC,MAAM,CAAC,OAAO,WAAsD;IAEpE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAOtB;IAEH,mFAAmF;IACnF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiC;IAE9D,mEAAmE;IACnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAgC;gBAGzD,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;IAoDnE;;;;OAIG;IACH,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS;IAMpC,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/canvas2d.d.ts

@@ -0,0 +1,3 @@
+/** One detached 2D canvas context for measuring text and reading colours; null outside a browser. */
+export declare function canvasContext(): CanvasRenderingContext2D | null;
+//# sourceMappingURL=canvas2d.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.d.ts","sourceRoot":"","sources":["../../src/draw/canvas2d.ts"],"names":[],"mappings":"AAEA,qGAAqG;AACrG,wBAAgB,aAAa,IAAI,wBAAwB,GAAG,IAAI,CAO/D"}

package/dist/draw/fill.d.ts

@@ -0,0 +1,26 @@
+export interface ShapeColors {
+    fill: string;
+    label: string;
+    /**
+     * Opaque, the fill as it shows over the plot: a translucent halo would tint the fill a second
+     * time around every glyph.
+     */
+    halo: string;
+}
+/**
+ * How a shape with the stored `color` is drawn (guide §10.6): the colour fills the shape and its
+ * label is black or white, whichever contrasts more with that fill. The stored value never
+ * changes, so a value from an older document (an `hsl()` accent, a colour name) fills the shape
+ * too. Without a colour, or with a value that is no CSS colour, the shape takes the plot and ink
+ * roles. The contour stays ink either way, and the label's halo is the fill (guide §10.1).
+ */
+export declare function shapeColors(color: string | undefined): ShapeColors;
+/**
+ * A label line that runs past its shape stands on the surround, not on the fill: ink with the
+ * surround's halo (guide §10.1), whatever colour the shape has.
+ */
+export declare const SURROUND_LABEL: {
+    readonly label: string;
+    readonly halo: string;
+};
+//# sourceMappingURL=fill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fill.d.ts","sourceRoot":"","sources":["../../src/draw/fill.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAKlE;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc;;;CAAwD,CAAC"}

package/dist/draw/geometry.d.ts

@@ -15,4 +15,19 @@ export declare function labelInset(width: number, height: number): number;
 export declare function chevronPathAt(x: number, y: number, width: number, height: number): string;
 /** Ellipse path (organizational unit), arc-based so cropping intersects exactly. */
 export declare function ellipsePathAt(x: number, y: number, width: number, height: number): string;
+/** The shape-local span `[left, right]` a step's chevron covers at the height `y`. */
+export declare function chevronSpanAt(width: number, height: number, y: number): [number, number] | undefined;
+/** The shape-local span `[left, right]` an organizational unit's ellipse covers at the height `y`. */
+export declare function ellipseSpanAt(width: number, height: number, y: number): [number, number] | undefined;
+/**
+ * Whether a label line, in shape-local coordinates, sits on its shape: whether the shape covers at
+ * least half of the line's middle. A line that crosses the shape's edge can take only one colour,
+ * so it takes that of the surface under most of it.
+ */
+export declare function shapeHoldsLine(orgUnit: boolean, width: number, height: number, line: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): boolean;
 //# sourceMappingURL=geometry.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/draw/geometry.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED,6DAA6D;AAC7D,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAGhE;AAED,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAYzF;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAUzF"}
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/draw/geometry.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED,6DAA6D;AAC7D,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAGhE;AAED,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAYzF;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAUzF;AAED,sFAAsF;AACtF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,CAAC,EAAE,MAAM,GACR,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAM9B;AAED,sGAAsG;AACtG,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,CAAC,EAAE,MAAM,GACR,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAQ9B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC5D,OAAO,CAQT"}

package/dist/draw/labelBox.d.ts

@@ -0,0 +1,15 @@
+import { Bounds } from '@miragon/value-chain-schema-model';
+export interface LabelLine {
+    element: SVGTSpanElement;
+    box: Bounds;
+}
+/**
+ * The lines of a laid-out label and the box each covers, in the coordinates of the shape it
+ * labels: from its `tspan`'s start and baseline, as wide and as high as a 2D canvas measures it in
+ * the label font, which is the measure diagram-js wrapped it by. Never read from the live SVG:
+ * Chromium lays SVG text out at the zoomed font size, so that box would change with the zoom.
+ * Empty where nothing can be measured.
+ */
+export declare function labelLines(text: SVGTextElement): LabelLine[];
+export declare function linesBox(lines: readonly LabelLine[]): Bounds | undefined;
+//# sourceMappingURL=labelBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"labelBox.d.ts","sourceRoot":"","sources":["../../src/draw/labelBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAOhE,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,EAAE,CAsB5D;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,GAAG,MAAM,GAAG,SAAS,CAOxE"}

package/dist/draw/lucide.d.ts

@@ -4,14 +4,14 @@
  * 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 "square-dashed-mouse-pointer": string;
     readonly hand: string;
-    readonly 'unfold-horizontal': 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 "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;

package/dist/draw/styles.d.ts

@@ -1,11 +1,13 @@
 /**
  * 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.
+ * connections and labels in the text role, element fills in the plot role, the surround around the
+ * shapes in the grund 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: string;
     readonly fill: string;
+    readonly surround: string;
 };
 /**
  * The family goes onto every SVG text node, since SVG text does not inherit the container's font
@@ -19,9 +21,25 @@ export declare const FONT: {
 };
 export declare const STROKE_WIDTH = 2;
 export declare const LABEL_PADDING = 7;
-/** Accent colors offered by the color picker (stroke + label tint; fill stays white). */
+/**
+ * The label halo (guide §10.1), 1.5px around every glyph in the surface behind the line: a label
+ * line that runs past its shape stays readable where it crosses a neighbour or a connection.
+ */
+export declare const LABEL_HALO_WIDTH = 3;
+/**
+ * The colour picker (guide §10.6): "Default" stores no colour and follows the roles, then the
+ * palette and the status colours as fill colours, each once (success is gruen, info is blau).
+ * Blau-link and blau-hell are the link and focus tones of blau, no fill colours (guide §3.1).
+ * White is a fixed fill: it looks like Default on the light canvas, not once Default follows a
+ * dark plot.
+ */
 export declare const COLOR_OPTIONS: ReadonlyArray<{
     label: string;
     color?: string;
 }>;
+/** Label colours on a fill of the shape's own (guide §10.6), whichever contrasts more. */
+export declare const LABEL_ON_FILL: {
+    readonly dark: string;
+    readonly light: string;
+};
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/draw/styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAEX,eAAO,MAAM,YAAY,IAAI,CAAC;AAE9B,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAS1E,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,aAAa;;;CAGhB,CAAC"}