@miragon/team-topologies-renderer 0.13.2 → 0.14.0

package/README.md

@@ -1,7 +1,7 @@
 # @miragon/team-topologies-renderer
 
 [![npm](https://img.shields.io/npm/v/@miragon/team-topologies-renderer)](https://www.npmjs.com/package/@miragon/team-topologies-renderer)
-[![License: MIT](https://img.shields.io/github/license/Miragon/team-topologies-modeler)](https://github.com/Miragon/team-topologies-modeler/blob/main/LICENSE)
+[![License: MIT](https://img.shields.io/github/license/Miragon/modeler-suite)](https://github.com/Miragon/modeler-suite/blob/main/modelers/team-topologies/LICENSE)
 
 The **browser layer** of the [Team Topologies Modeler](../../README.md): a framework-agnostic viewer
 and full editor for [Team Topologies](https://teamtopologies.com/) diagrams, built on
@@ -10,8 +10,11 @@ and full editor for [Team Topologies](https://teamtopologies.com/) diagrams, bui
 It renders the canonical document from
 [`@miragon/team-topologies-schema-model`](../schema-model) and gives you palette, move, resize,
 connect-by-overlap, multi-selection (lasso, select all) with group move, text annotations, context
-pad, in-place label editing and undo/redo — with no UI framework required.
-Mount it into any `<div>`; the web app and the VS Code extension both wrap this exact package.
+pad, in-place label editing and undo/redo, with no UI framework required.
+Mount it into any `<div>`; the web app and the VS Code extension both wrap this exact package. It
+hands a chrome such as [`@miragon/modeler-shell`](https://www.npmjs.com/package/@miragon/modeler-shell)
+its menu entries, legend rows and dialogs without importing it (see
+[Around the canvas](#around-the-canvas)).
 
 ## Install
 
@@ -42,18 +45,38 @@ npm install @miragon/team-topologies-renderer @miragon/team-topologies-schema-mo
 | Esc                                  | Clear the selection                                                     |
 | Enter / Space on a context-pad entry | Run it (rename, add annotation, delete)                                 |
 
-The shortcuts act only while the page itself or the canvas has focus, never inside host chrome,
-form fields, the label editor or an open modal dialog, and never on a key a closer listener already
-handled (`defaultPrevented`). Zoom and fit keys belong to the host's chrome (guide §5.8: only
+The shortcuts act only while the canvas itself has the focus, as diagram-js 15's own keyboard
+does: on keys whose target is the canvas `<svg>` or inside it. Keys with nothing focused
+(`<body>`), on host chrome, on the palette, the context pad or the label editor and keys while a
+modal dialog is open pass, and so do keys a closer listener already handled (`defaultPrevented`)
+and keys of an IME composition. A click or drag with a pointer on a palette entry, and the
+context pad's attach and delete, hand the focus to the canvas, so Delete and `Ctrl/Cmd+Z` act
+at once. Enter or Space leave it on the lasso, hand it to the canvas on the pad's delete, and
+on a creating palette entry open the label editor (see "Palette from the keyboard" below).
+Rename and "Add annotation" open the label editor too, which gives the focus back to the
+canvas when it closes. diagram-js rebuilds the context pad whenever its element changes, for
+example on an undo: a focused entry then moves to the same entry of the new pad, and to the
+canvas when the pad closes. Zoom and fit keys belong to the host's chrome (guide §5.8: only
 Cmd/Ctrl + `+` `-` `0` and Shift+1, each acting exactly once), so the canvas binds none; the
 [`@miragon/modeler-shell`](https://www.npmjs.com/package/@miragon/modeler-shell) chrome provides
 them together with the zoom panel.
 
+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. There is no separate switch to pause the keyboard.
+
 **Palette from the keyboard.** A host chrome that makes the palette a toolbar (the modeler shell)
 triggers an entry with a click whose `detail` is 0. On a creating entry that click places the
 element in the centre of the free part of the canvas (`freeArea`, else the centre of the view), 24px
 further diagonally while that spot is taken, selects it and opens its label editor.
 
+**Embedded in a page.** Layout reads the modeler's container, not the page: in a container up to
+760px wide the renderer's own palette takes a second row, whatever the window's width. Its tooltip
+stands 8px below the palette, centred on its entry and 12px from the container's sides. Without
+`freeArea: { insets }`, the context pad keeps inside the container. A host that resizes the
+container calls diagram-js's `canvas.resized()`, as for any diagram-js canvas; the pad then keeps
+inside the new size as well.
+
 **Label editor and the view.** A change of the view (a host's `setViewState` or fit, a wheel zoom or
 scroll) never commits an open label editor: it stays open with what was typed and moves with its
 element. Enter, a click or drag on the canvas and leaving the field commit; Escape discards (law L5
@@ -91,8 +114,8 @@ modeler.redo();
 
 > **The CSS is required.** Import `@miragon/team-topologies-renderer/assets/team-topologies.css`
 > (it also pulls in the Miragon design tokens, `diagram-js`'s own stylesheet and `cd-canvas.css`, in
-> that order) — without it the palette, context pad and label editor are unstyled. Every colour is a
-> `--cd-ui-*` role of design system 1.13.0, vendored unchanged under `src/theme/`. The tokens sit in
+> that order); without it the palette, context pad and label editor are unstyled. Every colour is a
+> `--cd-ui-*` role of design system 1.20.1, vendored unchanged under `src/theme/`. The tokens sit in
 > the cascade layer `team-topologies-tokens`, so a host page's own `--cd-*` tokens (unlayered) win
 > over this copy.
 
@@ -105,7 +128,7 @@ modeler.redo();
 
 ## API
 
-### Constructor — `TtViewerOptions`
+### Constructor: `TtViewerOptions`
 
 ```ts
 new Modeler({
@@ -143,7 +166,9 @@ Options: the contract's `CollaborativeModelerOptions` (1.2) and `additionalModul
 
 - `freeArea`: the part of the canvas no host chrome covers, `{ insets: () => shell.fitInsets() }`
   (px from the container's edges) or `{ center: () => viewport.freeRectCenter() }` (diagram
-  coordinates); keyboard creation lands in its centre. Default: the whole view.
+  coordinates); keyboard creation lands in its centre. Given as `insets`, the context pad also
+  keeps inside it: it flips to the left of its element or moves up or down instead of running
+  under the host's chrome. Default: the whole view.
 - `fitOnImport` (default true): a fit of at most 100 % that keeps the palette's strip free after
   every import; a host whose chrome fits the diagram itself passes false.
 - `undoRedoKeys` (default true): false when the host owns the history (VS Code).
@@ -169,8 +194,8 @@ estimated from the characters rather than measured. A host that fits the view it
 | `fitToView()`                      | `void`                          | Deprecated: fit every element, keeping the strip under the palette free.                                                               |
 | `contentBounds()`                  | `ElementBounds \| undefined`    | The tight box around every element and its label text in diagram coordinates (contract 1.3), `undefined` without elements.             |
 | `exportDocument()`                 | `TtDocument`                    | 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 (`title`); `setMeta` is deprecated, rename with `get("ttModeling").setTitle(title)` (one undo step). |
+| `saveSVG()`                        | `{ svg: string }`               | Self-contained SVG snapshot of the `contentBounds()` box, label text included, plus a 40px margin.                                     |
+| `setMeta(partial)` / `getMeta()`   | `void` / `RootBusinessObject`   | Read/write diagram-level metadata (`title`); `setMeta` is deprecated, rename with `get("ttModeling").setTitle(title)` (one undo step). |
 | `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.                                                                                                        |
@@ -180,6 +205,74 @@ estimated from the characters rather than measured. A host that fits the view it
 
 `undo()`, `redo()`, `canUndo()`, `canRedo()`.
 
+### Around the canvas
+
+What a chrome around the canvas shows, typed structurally (a `@miragon/modeler-shell` handle fits,
+and so does a host's own chrome with the same fields). The renderer's stylesheet styles all of it,
+so a host without the shell needs nothing else:
+
+- `diagramMenu({ exports, showKeyboardShortcuts, editTitle, shortcutsKey })` builds the menu groups
+  of guide §5.4, in the shape the shell's `menu` option takes: Model with "Diagram title…" (only
+  with `editTitle`; it changes the document, so a read-only canvas disables it), Export with
+  "Export as PNG" and "Export as SVG" (then "Export as JSON" with `exports.json`; an export's
+  `shortcut` shows as its chip) and Help with "Keyboard shortcuts…" (`shortcutsKey`, e.g.
+  `SHORTCUTS_DIALOG_KEY`, as its chip). The Model group's Legend checkbox is the shell's own.
+- `createTitleDialog(chrome, { title, setTitle })` is the "Diagram title…" dialog: one field,
+  Cancel and Apply. Enter applies the trimmed title, Escape and Cancel keep the old one, an
+  unchanged title writes nothing and a blank one cannot be applied. Pass
+  `setTitle: (title) => modeler.get("ttModeling").setTitle(title)` for one undo step.
+- `createShortcutsDialog(chrome, { fileKeys })` is the "Keyboard shortcuts…" dialog, one table per
+  group (`diagramShortcuts(chrome, options)` returns them as data); `fileKeys` adds a File group
+  (Open… on Cmd/Ctrl+O, Export as JSON on Cmd/Ctrl+S) and the `?` key for a web app that binds
+  them. Its View rows read the chrome's own zoom and fit texts and key names.
+- Both dialogs are native modal `<dialog>`s in `chrome.root` (the shell root), closed by Escape, the
+  Close button or a press on the backdrop; the focus goes back to the control that opened them, else
+  to `chrome.menu.trigger`. They are built on the first `open()`; call `destroy()` with the
+  diagram's teardown.
+- `renderLegend(body)` renders the notation legend into a chrome's legend card (the shell's
+  `legend.render`): team types, interaction modes and the other elements, each with the palette's
+  glyph in its official notation colours, its name and a short explanation. Rows, previews and
+  separators carry the shell's `cd-shell-legend-*` classes next to their own, and the renderer's
+  stylesheet lays them out with the shell's values, so the legend looks the same with or without
+  the shell. It returns the function that removes the rows again.
+  `legendGroups()` is the same content as DOM-free data (`preview` is SVG markup) for a host that
+  draws the legend itself.
+
+For the Export entries, a host takes `modeler.saveSVG()`: the SVG as it is, or rasterised to a PNG.
+An SVG drawn as an image cannot reach the page's fonts, so embed Geist before rasterising:
+`embedSvgStyles(svg, geistFontFaceCss({ latin, latinExt }))` (see [Typeface](#quick-start)).
+
+```ts
+import {
+  createShortcutsDialog,
+  createTitleDialog,
+  diagramMenu,
+  embedSvgStyles,
+  geistFontFaceCss,
+  renderLegend,
+  type TtModeling,
+} from "@miragon/team-topologies-renderer";
+
+// `chrome` is a modeler-shell handle or { root, menu: { trigger }, platform, lang, messages }.
+const title = createTitleDialog(chrome, {
+  title: () => modeler.getMeta()?.title ?? "",
+  setTitle: (next) => modeler.get<TtModeling>("ttModeling").setTitle(next),
+});
+const shortcuts = createShortcutsDialog(chrome);
+// The two latin Geist WOFF2 files as data: URLs, from the host's own copy of the font.
+const fontCss = geistFontFaceCss({ latin, latinExt });
+const menu = diagramMenu({
+  editTitle: () => title.open(),
+  exports: {
+    // savePng and saveSvg are the host's: rasterise and download, or hand the file on.
+    png: { onSelect: () => savePng(embedSvgStyles(modeler.saveSVG().svg, fontCss)) },
+    svg: { onSelect: () => saveSvg(modeler.saveSVG().svg) },
+  },
+  showKeyboardShortcuts: () => shortcuts.open(),
+});
+const removeLegend = renderLegend(legendBody);
+```
+
 ### Helpers & types
 
 - **Type guards:** `isTtElement`, `isTtTeam`, `isTtInteraction`, `isTtFlow`, `isTtAnnotation`,
@@ -187,7 +280,7 @@ estimated from the characters rather than measured. A host that fits the view it
 - **Runtime element types:** `TtTeam`, `TtInteraction`, `TtFlow`, `TtAnnotation`, `TtElement`, and
   `TtAssociation` (the connector from an annotation to the element it is attached to).
 - **Palette icon generators:** `teamIconSvg(type)`, `interactionIconSvg(mode)`, `flowIconSvg()`,
-  `annotationIconSvg()` — WYSIWYG SVG glyphs matching what the canvas draws. The annotation glyph
+  `annotationIconSvg()`: WYSIWYG SVG glyphs matching what the canvas draws. The annotation glyph
   strokes in `currentColor`.
 - **Functional icons:** `iconMarkup(icon, { size?, strokeWidth?, className? })` returns inline SVG
   markup (Lucide style: 24 × 24 grid, stroke 2.5, `currentColor`) for the bundled `ICON_*` Lucide
@@ -199,6 +292,11 @@ estimated from the characters rather than measured. A host that fits the view it
 - **Fonts in exports:** `geistFontFaceCss({ latin, latinExt })` builds the Geist `@font-face` rules
   from two `data:` URLs (`GEIST_UNICODE_RANGES` holds their subsets), and `embedSvgStyles(svg, css)`
   puts CSS at the top of a `saveSVG()` result, so a rasterised PNG keeps the canvas typeface.
+- **Chrome content** ([Around the canvas](#around-the-canvas)): `diagramMenu`, `diagramShortcuts`,
+  `createShortcutsDialog`, `createTitleDialog`, `renderLegend`, `legendGroups`,
+  `JSON_EXPORT_LABEL`, `SHORTCUTS_DIALOG_KEY`, and their structural types (`DiagramMenu`,
+  `DiagramMenuActions`, `DiagramExports`, `ShortcutsDialogChrome`, `TitleDialogChrome`,
+  `DiagramTitle`, `LegendGroup`, `LegendRow`, …).
 - **Other:** `TtViewerOptions`, `ImportOptions`, `ImportWarning`, `RootBusinessObject`, `ROOT_ID`,
   `saveSVG`, `TtReadOnly` and `READ_ONLY_CHANGED_EVENT` (the lock, DI name `ttReadOnly`), and
   `TtViewport` (DI name `ttViewport`: `contentBounds()` and the deprecated palette-aware fit behind
@@ -215,13 +313,13 @@ viewer via `additionalModules`:
 | `ttModelModule`        | Element factory with notation defaults (`TtElementFactory`).                           |
 | `ttDrawModule`         | SVG rendering of teams, interactions, flow and annotations (`TeamTopologiesRenderer`). |
 | `ioModule`             | Document ↔ canvas bridge (`TtImporter`, `TtExporter`, `saveSVG`, `TtViewport`).        |
-| `ttModelingModule`     | High-level mutations — label, type, mode, colours, description, annotations.           |
+| `ttModelingModule`     | High-level mutations: label, type, mode, colours, description, annotations.            |
 | `ttRulesModule`        | Editing rules (what can move / resize / be created / be attached).                     |
 | `ttBehaviorsModule`    | Keeps the model **flat** and annotation connectors cropped, one per annotation.        |
 | `ttPaletteModule`      | The lasso tool and the drag-to-create palette.                                         |
 | `ttContextPadModule`   | Per-element actions (rename, add/attach annotation, delete; delete a multi-selection). |
 | `ttLabelEditingModule` | Double-click in-place label editing.                                                   |
-| `ttKeyboardModule`     | Undo / redo / select all / delete / copy / paste / nudge / Esc shortcuts.              |
+| `ttKeyboardModule`     | Undo / redo / select all / delete / copy / paste / nudge / Esc on the focused canvas.  |
 | `ttReadOnlyModule`     | The edit lock for a document the canvas cannot save (`ttReadOnly`).                    |
 | `ttZOrderModule`       | Fixed stacking order (flow behind, teams, interactions, annotations on top).           |
 
@@ -230,12 +328,13 @@ viewer via `additionalModules`:
 A custom `TeamTopologiesRenderer` (priority `1500`, beating diagram-js's default) draws each element
 from the spec in [`@miragon/team-topologies-schema-model`](../schema-model): the four team outlines
 (octagon, vertical/horizontal rounded rectangles, square rectangle) drawn solid; the three
-interaction glyphs (parallelogram, triangle, circle) drawn dashed and translucent; the flow-of-change
-as a dashed left-to-right band; an annotation as a BPMN-style open bracket with left-aligned text,
-tied to its element by a dashed connector. Labels are word-wrapped (explicit line breaks are kept)
-and centred. Per-element `fill`/`stroke` overrides win over the spec defaults, and stay visible
-while an element is selected or hovered (the selection is a separate blue outline). On a dark custom
-fill, team and interaction labels switch to white.
+interaction glyphs (parallelogram, triangle, circle) drawn dashed and opaque, their translucent
+template fill mixed over white (design guide §10.6); the flow-of-change as a dashed left-to-right
+band; an annotation as a BPMN-style open bracket with left-aligned text, tied to its element by a
+dashed connector. Labels are word-wrapped (explicit line breaks are kept) and centred. Per-element
+`fill`/`stroke` overrides win over the spec defaults (an interaction's own fill is mixed over white
+the same way), and stay visible while an element is selected or hovered (the selection is a
+separate blue outline). On a dark custom fill, team and interaction labels switch to white.
 
 ## Import / export
 
@@ -248,14 +347,15 @@ rasterisation those formats need.
 
 ## Development
 
-Part of the [Team Topologies Modeler](../../README.md) monorepo; consumed from source by the apps.
-From the repo root:
+Part of the [Team Topologies Modeler](../../README.md) in the
+[Miragon modeler suite](https://github.com/Miragon/modeler-suite); consumed from source by the
+apps. From the suite's 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
+npm run build -w @miragon/team-topologies-renderer   # Vite library build → dist/ (publish build)
+npm run team-topologies test                         # Vitest unit tests
+npm run team-topologies test:browser                 # renderer integration tests in real Chromium
+npm run team-topologies typecheck
 ```
 
 ## License

package/dist/TtBaseViewer.d.ts

@@ -19,7 +19,8 @@ export interface TtViewerOptions {
      * Where Enter or Space on a creating palette entry places the element (guide §5.5): the centre
      * of the part of the canvas no chrome covers, given as its insets in px from the container's
      * edges (`{ insets }`) or as that centre in diagram coordinates (`{ center }`). Without it, the
-     * centre of the visible canvas.
+     * centre of the visible canvas. Given as `{ insets }`, the context pad also keeps inside that
+     * part; otherwise it keeps inside the container.
      */
     freeArea?: FreeArea | undefined;
     /**

package/dist/TtBaseViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TtBaseViewer.d.ts","sourceRoot":"","sources":["../src/TtBaseViewer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAM9C,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAK5F,OAAO,EAAW,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAErF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAQ5D,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;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CACxD;AAED,MAAM,WAAW,aAAa;IAC5B,+FAA+F;IAC/F,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC3B;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;IAiBtB;;;OAGG;IACH,OAAO,CAAC,eAAe;IA2BvB,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;;;;;;;OAOG;IACH,cAAc,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,GAAE,aAAkB,GAAG;QAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;KAAE;IAsB3F;;;;;;OAMG;IACH,SAAS,IAAI,IAAI;IAIjB,OAAO,CAAC,IAAI;IAMZ;;;;OAIG;IACH,aAAa,IAAI,aAAa,GAAG,SAAS;IAa1C,oDAAoD;IACpD,cAAc,IAAI,UAAU;IAI5B;;;;;OAKG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI;IAanD,6DAA6D;IAC7D,OAAO,IAAI,kBAAkB,GAAG,SAAS;IASzC,+CAA+C;IAC/C,OAAO,IAAI;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAI1B,0CAA0C;IAC1C,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAK/B,2DAA2D;IAC3D,MAAM,IAAI,IAAI;IAId,KAAK,IAAI,IAAI;IAIb,OAAO,IAAI,IAAI;IAQf,IAAI,SAAS,IAAI,WAAW,CAE3B;CACF"}
+{"version":3,"file":"TtBaseViewer.d.ts","sourceRoot":"","sources":["../src/TtBaseViewer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AAM9C,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAK5F,OAAO,EAAW,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAErF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAQ5D,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;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CACxD;AAED,MAAM,WAAW,aAAa;IAC5B,+FAA+F;IAC/F,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC3B;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;IAkBtB;;;OAGG;IACH,OAAO,CAAC,eAAe;IA2BvB,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;;;;;;;OAOG;IACH,cAAc,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,GAAE,aAAkB,GAAG;QAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;KAAE;IAsB3F;;;;;;OAMG;IACH,SAAS,IAAI,IAAI;IAIjB,OAAO,CAAC,IAAI;IAMZ;;;;OAIG;IACH,aAAa,IAAI,aAAa,GAAG,SAAS;IAa1C,oDAAoD;IACpD,cAAc,IAAI,UAAU;IAI5B;;;;;OAKG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI;IAanD,6DAA6D;IAC7D,OAAO,IAAI,kBAAkB,GAAG,SAAS;IASzC,+CAA+C;IAC/C,OAAO,IAAI;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAI1B,0CAA0C;IAC1C,QAAQ,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAK/B,2DAA2D;IAC3D,MAAM,IAAI,IAAI;IAId,KAAK,IAAI,IAAI;IAIb,OAAO,IAAI,IAAI;IAQf,IAAI,SAAS,IAAI,WAAW,CAE3B;CACF"}

package/dist/chrome/ShortcutsDialog.d.ts

@@ -0,0 +1,13 @@
+import { ChromeDialog, DialogChrome } from './dialog.js';
+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, DialogChrome {
+    readonly messages: ShortcutsChrome["messages"] & DialogChrome["messages"];
+}
+export type ShortcutsDialog = ChromeDialog;
+/**
+ * The "Keyboard shortcuts…" dialog of the Help group (guide §5.4, §8): one table per group, the
+ * action on the left and its keys as the chrome tooltip's chips on the right.
+ */
+export declare function createShortcutsDialog(chrome: ShortcutsDialogChrome, options?: DiagramShortcutOptions): ShortcutsDialog;
+//# sourceMappingURL=ShortcutsDialog.d.ts.map

package/dist/chrome/ShortcutsDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsDialog.d.ts","sourceRoot":"","sources":["../../src/chrome/ShortcutsDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAChG,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAKxB,sGAAsG;AACtG,MAAM,WAAW,qBAAsB,SAAQ,eAAe,EAAE,YAAY;IAC1E,QAAQ,CAAC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;CAC3E;AAED,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC;AAsB3C;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,qBAAqB,EAC7B,OAAO,GAAE,sBAA2B,GACnC,eAAe,CAWjB"}

package/dist/chrome/TitleDialog.d.ts

@@ -0,0 +1,16 @@
+import { ChromeDialog, DialogChrome } from './dialog.js';
+/** The diagram's title, read when the dialog opens and written when it applies. */
+export interface DiagramTitle {
+    title(): string;
+    setTitle(title: string): void;
+}
+export type TitleDialogChrome = DialogChrome;
+export type TitleDialog = ChromeDialog;
+/**
+ * The "Diagram title…" dialog of the Model group. Guide §5.4 keeps form fields out of the menu and
+ * puts no title field next to it, so the title is edited here: one field, Cancel and Apply. Enter
+ * applies, Escape cancels. An unchanged title writes nothing, so the history gets no empty step,
+ * and a blank one cannot be applied, because the exports name their files after the title.
+ */
+export declare function createTitleDialog(chrome: TitleDialogChrome, diagramTitle: DiagramTitle): TitleDialog;
+//# sourceMappingURL=TitleDialog.d.ts.map

package/dist/chrome/TitleDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleDialog.d.ts","sourceRoot":"","sources":["../../src/chrome/TitleDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhG,mFAAmF;AACnF,MAAM,WAAW,YAAY;IAC3B,KAAK,IAAI,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC7C,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC;AASvC;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,iBAAiB,EACzB,YAAY,EAAE,YAAY,GACzB,WAAW,CAkDb"}

package/dist/chrome/dialog.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The modeler's own dialogs in a host's chrome (guide §8, "Modeler dialogs" of the modeler shell's
+ * API): a native modal <dialog> in the chrome's root, so the browser keeps the focus inside it and
+ * closes it on Escape, and its top layer puts it above every island. Built on the first open and
+ * kept (closed) afterwards; `destroy()` removes it, because the chrome removes only what it added
+ * itself. The renderer's stylesheet styles it, so a host without the modeler shell gets it as is.
+ */
+/** What a dialog needs of the chrome around the diagram; a `@miragon/modeler-shell` handle fits. */
+export interface DialogChrome {
+    /** Where the dialog lives (the shell root), so it shares the chrome's mode and fonts. */
+    readonly root: HTMLElement;
+    readonly messages: {
+        readonly close: string;
+    };
+    /** The control the focus returns to when the one that opened the dialog is gone. */
+    readonly menu: {
+        readonly trigger: HTMLElement;
+    };
+}
+export interface ChromeDialog {
+    open(): void;
+    isOpen(): boolean;
+    close(): void;
+    destroy(): void;
+}
+export interface ChromeDialogSpec {
+    /** Class of the `<dialog>` next to `tt-dialog`, for the dialog's own rules. */
+    readonly className: string;
+    readonly titleId: string;
+    readonly title: string;
+    /** The parts below the header, built once on the first open. */
+    content(close: () => void): Node[];
+    /** Runs before every open, while the dialog is still closed. */
+    beforeOpen?(): void;
+    /** Runs after every open, once the dialog shows and holds the focus. */
+    afterOpen?(): void;
+}
+export declare function element<K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string): HTMLElementTagNameMap[K];
+export declare function createChromeDialog(chrome: DialogChrome, spec: ChromeDialogSpec): ChromeDialog;
+//# sourceMappingURL=dialog.d.ts.map

package/dist/chrome/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/chrome/dialog.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,oGAAoG;AACpG,MAAM,WAAW,YAAY;IAC3B,yFAAyF;IACzF,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,oFAAoF;IACpF,QAAQ,CAAC,IAAI,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC;CAClD;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,IAAI,IAAI,CAAC;IACb,MAAM,IAAI,OAAO,CAAC;IAClB,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,+EAA+E;IAC/E,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,gEAAgE;IAChE,OAAO,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,EAAE,CAAC;IACnC,gEAAgE;IAChE,UAAU,CAAC,IAAI,IAAI,CAAC;IACpB,wEAAwE;IACxE,SAAS,CAAC,IAAI,IAAI,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,qBAAqB,EAC3D,GAAG,EAAE,CAAC,EACN,SAAS,EAAE,MAAM,EACjB,IAAI,CAAC,EAAE,MAAM,GACZ,qBAAqB,CAAC,CAAC,CAAC,CAK1B;AAoBD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,gBAAgB,GAAG,YAAY,CAwD7F"}

package/dist/chrome/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chrome/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACjF,YAAY,EACV,aAAa,EACb,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,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,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/chrome/menu.d.ts

@@ -0,0 +1,59 @@
+/** 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;
+    readonly keepEnabledWhenReadOnly?: boolean;
+}
+export interface DiagramMenuAction extends DiagramMenuItem {
+    readonly kind: "action";
+    readonly shortcut?: string;
+    onSelect(): void;
+}
+export interface DiagramMenuDialog extends DiagramMenuItem {
+    readonly kind: "dialog";
+    /** The chip of a key that opens the dialog as well, e.g. "?". */
+    readonly shortcut?: string;
+    onSelect(): void;
+}
+export type DiagramMenuEntry = DiagramMenuAction | DiagramMenuDialog;
+export interface DiagramMenu {
+    readonly model: readonly DiagramMenuEntry[];
+    readonly export: readonly DiagramMenuEntry[];
+    readonly help: readonly DiagramMenuEntry[];
+}
+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;
+    /** Opens the "Diagram title…" dialog; without it the Model group has no title entry. */
+    editTitle?: (() => void) | undefined;
+    /** The chip of a key the host binds to the shortcuts dialog as well, e.g. "?" in the web app. */
+    readonly shortcutsKey?: string | undefined;
+}
+/** 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 key the web app opens the shortcuts dialog with, listed in the dialog's View group. */
+export declare const SHORTCUTS_DIALOG_KEY = "?";
+/**
+ * The menu groups of the diagram (guide §5.4): Model with "Diagram title…" where the host renames
+ * the diagram (it changes the document, so a read-only canvas disables it), Export with PNG first,
+ * Help with the shortcuts dialog.
+ */
+export declare function diagramMenu(actions: DiagramMenuActions): DiagramMenu;
+export {};
+//# sourceMappingURL=menu.d.ts.map

package/dist/chrome/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/chrome/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;IAChC,QAAQ,CAAC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CAC5C;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,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC5C,QAAQ,CAAC,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC7C,QAAQ,CAAC,IAAI,EAAE,SAAS,gBAAgB,EAAE,CAAC;CAC5C;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;IAC9B,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACrC,iGAAiG;IACjG,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5C;AAED,uFAAuF;AACvF,eAAO,MAAM,iBAAiB,mBAAmB,CAAC;AAElD,8FAA8F;AAC9F,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAkBxC;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CA6BpE"}

package/dist/chrome/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 own keys: Open…, Export as JSON and "?" for this dialog. */
+    readonly fileKeys?: boolean | undefined;
+}
+/**
+ * Every shortcut of the diagram, grouped as guide §5.4 asks (View, Edit, 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/chrome/shortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcuts.d.ts","sourceRoot":"","sources":["../../src/chrome/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,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC;AA6DD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,eAAe,EACvB,OAAO,GAAE,sBAA2B,GACnC,aAAa,EAAE,CAyDjB"}

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

@@ -0,0 +1,31 @@
+import { default as Canvas } from 'diagram-js/lib/core/Canvas';
+import { default as EventBus } from 'diagram-js/lib/core/EventBus';
+import { default as Scheduler } from 'diagram-js/lib/features/scheduler/Scheduler';
+import { FreeArea } from '@miragon/modeler-api';
+export interface TtContextPadConfig {
+    /**
+     * The part of the canvas no host chrome covers. Only `insets` name a rectangle; with `center`
+     * alone, or without the option, the pad keeps inside the whole container.
+     */
+    freeArea?: FreeArea | undefined;
+}
+export default class TtContextPadPlacement {
+    private readonly config;
+    private readonly canvas;
+    private readonly scheduler;
+    static $inject: string[];
+    private openPad;
+    /** Where diagram-js last put the open pad; every placement starts from it. */
+    private diagramJsPosition;
+    private positionWrites;
+    constructor(config: TtContextPadConfig | undefined, eventBus: EventBus, canvas: Canvas, scheduler: Scheduler);
+    private follow;
+    private stopFollowing;
+    private schedulePlacement;
+    private keepInsideFreeArea;
+    private placementFor;
+    private moveTo;
+    /** The box around the pad's element(s) in px from the container's top left, as diagram-js reads it. */
+    private targetBox;
+}
+//# sourceMappingURL=TtContextPadPlacement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TtContextPadPlacement.d.ts","sourceRoot":"","sources":["../../src/context-pad/TtContextPadPlacement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAkB,MAAM,sBAAsB,CAAC;AASrE,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACjC;AA8BD,MAAM,CAAC,OAAO,OAAO,qBAAqB;IAStC,OAAO,CAAC,QAAQ,CAAC,MAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,MAAM;IACvB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAX5B,MAAM,CAAC,OAAO,WAA8D;IAE5E,OAAO,CAAC,OAAO,CAAsB;IACrC,8EAA8E;IAC9E,OAAO,CAAC,iBAAiB,CAAuB;IAChD,OAAO,CAAC,cAAc,CAA+B;gBAGlC,MAAM,EAAE,kBAAkB,GAAG,SAAS,EACvD,QAAQ,EAAE,QAAQ,EACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS;IAavC,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,MAAM;IASd,uGAAuG;IACvG,OAAO,CAAC,SAAS;CAwBlB"}

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

@@ -24,6 +24,7 @@ export default class TtContextPadProvider implements ContextPadProvider {
     getContextPadEntries(element: Element): ContextPadEntries;
     getMultiElementContextPadEntries(elements: Element[]): ContextPadEntries;
     private onEntryKeyDown;
+    private focusSameEntryOrCanvas;
     private editEntry;
     private deleteEntry;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TtContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/TtContextPadProvider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AACzE,OAAO,KAAK,EACV,iBAAiB,EAEjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAS1D,OAAO,KAAK,cAAc,MAAM,oCAAoC,CAAC;AACrE,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AAuBxD,MAAM,CAAC,OAAO,OAAO,oBAAqB,YAAW,kBAAkB;IAgBnE,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,MAAM;IArBzB,MAAM,CAAC,OAAO,WAUZ;IAEF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;gBAG1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,cAAc,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EAC/B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE;QAAE,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,IAAI,CAAA;KAAE;IAahE,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB;IAqCzD,gCAAgC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,iBAAiB;IAKxE,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,WAAW;CAcpB"}
+{"version":3,"file":"TtContextPadProvider.d.ts","sourceRoot":"","sources":["../../src/context-pad/TtContextPadProvider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,MAAM,4BAA4B,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,8BAA8B,CAAC;AACzD,OAAO,KAAK,UAAU,MAAM,gDAAgD,CAAC;AAC7E,OAAO,KAAK,QAAQ,MAAM,2CAA2C,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,yCAAyC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,6CAA6C,CAAC;AACzE,OAAO,KAAK,EACV,iBAAiB,EAEjB,OAAO,IAAI,kBAAkB,EAC9B,MAAM,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAS1D,OAAO,KAAK,cAAc,MAAM,oCAAoC,CAAC;AACrE,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AAyBxD,MAAM,CAAC,OAAO,OAAO,oBAAqB,YAAW,kBAAkB;IAgBnE,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,UAAU;IAC3B,OAAO,CAAC,QAAQ,CAAC,YAAY;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,MAAM;IArBzB,MAAM,CAAC,OAAO,WAUZ;IAEF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;gBAG1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,cAAc,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EAC/B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE;QAAE,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,IAAI,CAAA;KAAE;IAmBhE,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,iBAAiB;IAwCzD,gCAAgC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,iBAAiB;IAKxE,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,WAAW;CAYpB"}

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

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

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

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

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

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

package/dist/draw/colour.d.ts

@@ -0,0 +1,22 @@
+import { TtInteraction } from '../model/di-types.js';
+export type Rgb = readonly [number, number, number];
+export declare function parseHexColour(colour: unknown): Rgb | undefined;
+export declare function contrastRatio(first: Rgb, second: Rgb): number;
+/**
+ * `fill` at `opacity` over white, as one opaque colour, or `undefined` for a value that is not a hex
+ * colour. Guide §10.6 draws notation fills that use opacity premixed like this: translucent over a
+ * dark canvas, they would turn into a tinted tone.
+ */
+export declare function premixOverWhite(fill: string, opacity: number): string | undefined;
+export interface InteractionPaint {
+    fill: string;
+    fillOpacity: number;
+}
+/**
+ * How an interaction's fill is drawn: its mode's premixed fill, or its own fill premixed at the
+ * mode's opacity, both opaque. An own fill that is not hex cannot be mixed, so it keeps the
+ * template's opacity instead of turning solid; the schema rejects such a fill, but a host can import
+ * a document without validating it.
+ */
+export declare function interactionPaint(interaction: Pick<TtInteraction, "mode" | "fill">): InteractionPaint;
+//# sourceMappingURL=colour.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colour.d.ts","sourceRoot":"","sources":["../../src/draw/colour.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,MAAM,GAAG,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpD,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,GAAG,GAAG,SAAS,CAQ/D;AAoBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CAK7D;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKjF;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC,GAChD,gBAAgB,CASlB"}