@miragon/modeler-shell 0.0.0-stage → 0.2.0

package/src/core/sizes.ts

@@ -0,0 +1,85 @@
+/**
+ * The shell dimensions of the design system (guide §5.1, `shell` group of
+ * `cd-tokens.generated.json`), keyed by a readable name. Scripts use `SHELL`; CSS uses the
+ * `var(--cd-shell-*)` variables the consumer vendors. A drift test pins `SHELL` to the token JSON.
+ */
+export const SHELL_TOKENS = {
+  edge: "--cd-shell-rand",
+  gap: "--cd-shell-luecke",
+  row: "--cd-shell-zeile",
+  target: "--cd-shell-ziel",
+  entry: "--cd-shell-eintrag",
+  free: "--cd-shell-frei",
+  menuMinWidth: "--cd-shell-menue-breite",
+  inspectorWidth: "--cd-shell-inspector-breite",
+  fitInsetTop: "--cd-shell-einpassen-oben",
+  fitInsetTopSecondRow: "--cd-shell-einpassen-oben-schmal",
+  fitInsetSide: "--cd-shell-einpassen-seite",
+  fitInsetBottom: "--cd-shell-einpassen-unten",
+  fitInsetBottomWeb: "--cd-shell-einpassen-unten-web",
+  narrow: "--cd-shell-schmal",
+  veryNarrow: "--cd-shell-sehr-schmal",
+  low: "--cd-shell-niedrig",
+  layerIslands: "--cd-shell-ebene-inseln",
+  layerInspector: "--cd-shell-ebene-inspector",
+  layerTopRow: "--cd-shell-ebene-reihe",
+  layerPopups: "--cd-shell-ebene-aufklapper",
+  layerDialog: "--cd-shell-ebene-dialog",
+  layerToast: "--cd-shell-ebene-toast",
+} as const;
+
+export type ShellSizeName = keyof typeof SHELL_TOKENS;
+
+export type ShellSizes = Readonly<Record<ShellSizeName, number>>;
+
+/** Pixels (layers: plain z-index numbers), equal to `parseFloat` of the token JSON values. */
+export const SHELL: ShellSizes = {
+  edge: 12,
+  gap: 8,
+  row: 40,
+  target: 32,
+  entry: 36,
+  free: 64,
+  menuMinWidth: 248,
+  inspectorWidth: 288,
+  fitInsetTop: 88,
+  fitInsetTopSecondRow: 140,
+  fitInsetSide: 24,
+  fitInsetBottom: 64,
+  fitInsetBottomWeb: 92,
+  narrow: 760,
+  veryNarrow: 440,
+  low: 820,
+  layerIslands: 20,
+  layerInspector: 25,
+  layerTopRow: 30,
+  layerPopups: 40,
+  layerDialog: 50,
+  layerToast: 60,
+};
+
+// Shell sizes are pixels ("12px") or plain z-index numbers ("20"); any other unit would make
+// parseFloat silently return a number with the wrong meaning.
+const PIXEL_OR_PLAIN_NUMBER = /^\s*-?(?:\d+\.?\d*|\.\d+)(?:px)?\s*$/;
+
+/**
+ * Reads the `shell` group of `cd-tokens.generated.json` (`{ "--cd-shell-rand": "12px", … }`) into
+ * numbers. Throws when a size of `SHELL_TOKENS` is missing or not a number.
+ */
+export function shellSizesFromTokens(shellGroup: Readonly<Record<string, string>>): ShellSizes {
+  const sizes = {} as Record<ShellSizeName, number>;
+  for (const name of Object.keys(SHELL_TOKENS) as ShellSizeName[]) {
+    const token = SHELL_TOKENS[name];
+    const raw: unknown = Object.hasOwn(shellGroup, token) ? shellGroup[token] : undefined;
+    if (raw === undefined) {
+      throw new Error(`@miragon/modeler-shell: the shell token ${token} is missing`);
+    }
+    if (typeof raw !== "string" || !PIXEL_OR_PLAIN_NUMBER.test(raw)) {
+      throw new Error(
+        `@miragon/modeler-shell: the shell token ${token} is not a number: ${JSON.stringify(raw)}`,
+      );
+    }
+    sizes[name] = Number.parseFloat(raw);
+  }
+  return sizes;
+}

package/src/core/types.ts

@@ -0,0 +1,106 @@
+/** A point in pixels or diagram coordinates, as the context says. */
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+/** A rectangle; content bounds and viewboxes are in diagram coordinates. */
+export interface Bounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** A viewbox together with the scale diagram-js shows it at (`canvas.viewbox().scale`). */
+export interface ScaledViewbox extends Bounds {
+  scale: number;
+}
+
+/** Distances in pixels from the edges of the modeler's container. */
+export interface Insets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+/**
+ * The host column of guide §5.2: `ide` is a VS Code webview (later IntelliJ), `web` a Miragon web
+ * app that owns its page, `embedded` a modeler inside a foreign page (designIQ, modeler-api hosts).
+ */
+export type ShellHost = "ide" | "web" | "embedded";
+
+/**
+ * The `data-chrome` names of the chrome (guide §5.2, §13.4). The web column adds `primary`, `legal`,
+ * `toasts`, `empty-state`, `drop-zone` and `problems-popover` (0.2); IDE and embedded hosts never
+ * show `primary`, `legal`, `empty-state` and `drop-zone`, the IDE host never `toasts` and
+ * `problems-popover`.
+ */
+export type ChromeIsland =
+  | "menu"
+  | "palette"
+  | "primary"
+  | "zoom"
+  | "problems"
+  | "legend"
+  | "inspector"
+  | "status"
+  | "legal"
+  | "toasts"
+  | "empty-state"
+  | "drop-zone"
+  | "problems-popover";
+
+export const CHROME_ISLANDS: readonly ChromeIsland[] = [
+  "menu",
+  "palette",
+  "primary",
+  "zoom",
+  "problems",
+  "legend",
+  "inspector",
+  "status",
+  "legal",
+  "toasts",
+  "empty-state",
+  "drop-zone",
+  "problems-popover",
+];
+
+/** Where the palette sits: in the top row, or in the second row below it (guide §5.15). */
+export type PaletteRow = "top" | "second-row";
+
+/**
+ * What the zoom panel and the chrome keys act on. The diagram-js viewport implements it; the DOM
+ * shell only talks to this interface.
+ */
+export interface ZoomTarget {
+  /** The current zoom, 1 = 100 % (diagram-js `canvas.zoom()`, rounded to three decimals). */
+  zoom(): number;
+  /** One step on the zoom raster around the container centre (diagram-js `zoomScroll.stepZoom`). */
+  stepZoom(direction: 1 | -1): void;
+  /** 100 % around the container centre. Counts as a user move. */
+  zoomToActual(): void;
+  /** Explicit fit (button, Shift+1, command): animated unless reduced motion, makes the view automatic. */
+  fit(): void;
+  /** False while there is nothing to fit (the content bounds are empty). */
+  canFit(): boolean;
+  /**
+   * Calls `listener` after every viewbox change and whenever `canFit()` may have changed, possibly
+   * several times per frame. Returns the unsubscribe function.
+   */
+  onChange(listener: () => void): () => void;
+}
+
+/** The persisted view (VS Code `setState`): JSON-serializable. */
+export interface ViewportState {
+  viewbox: Bounds;
+  /** The user zoomed or panned since the last fit; a resize no longer refits. */
+  userMoved: boolean;
+}

package/src/core/web-chrome/bottom-row.ts

@@ -0,0 +1,37 @@
+import { SHELL } from "../sizes.js";
+
+/**
+ * Height of one line of the web app's legal line: 13px text on a 20px line (guide §5.10). Where a
+ * narrow container cannot hold it in one line, it wraps (40 for two lines) and everything stacked
+ * above it rises by as much: the pill, the legend, the raised zoom panel and the fit's bottom.
+ */
+export const LEGAL_LINE_HEIGHT = 20;
+
+/** A measured legal line's height in whole lines, at least one: what the stack above it stands on. */
+export function legalLineHeight(measured: number | undefined): number {
+  if (measured === undefined || !Number.isFinite(measured) || measured <= 0) return LEGAL_LINE_HEIGHT;
+  return Math.max(1, Math.round(measured / LEGAL_LINE_HEIGHT)) * LEGAL_LINE_HEIGHT;
+}
+
+export interface BottomRowInput {
+  containerWidth: number;
+  /** Measured right edge of the legal line relative to the shell root; absent while it is not shown. */
+  legalRight?: number | undefined;
+  /** Measured width of the zoom panel (173 with a 56px readout); absent while it is not shown. */
+  zoomWidth?: number | undefined;
+}
+
+/**
+ * Web app, bottom row: true when the zoom panel at `right: 12px` would keep less than
+ * `SHELL.gap` (8px) to the legal line at `left: 12px`. The zoom panel then stands above the legal
+ * line at `bottom: 40px` (12 + 20 + 8; a wrapped line lifts it further), like the pill
+ * (`data-zoom-row="raised"` on the root), and the fit keeps 92px at the bottom (`FitLayout.zoomRaised`). Guide §5.10 and §5.15 do not settle
+ * this collision of a narrow container; it is the shell's rule until they do.
+ * False when either of the two is not shown.
+ */
+export function zoomRowRaised(input: BottomRowInput): boolean {
+  const { containerWidth, legalRight, zoomWidth } = input;
+  if (legalRight === undefined || zoomWidth === undefined) return false;
+  const zoomLeft = containerWidth - SHELL.edge - zoomWidth;
+  return legalRight + SHELL.gap > zoomLeft;
+}

package/src/core/web-chrome/drop.ts

@@ -0,0 +1,78 @@
+/** Why a drag cannot be dropped (guide §9 Drop forbidden); `messages.dropForbidden` words each one. */
+export type DropForbiddenReason = "multiple" | "type" | "dialog";
+
+/** One entry of `DataTransfer.items` as a drag shows it (names are not readable before the drop). */
+export interface DragItemLike {
+  kind: string;
+  type: string;
+}
+
+export interface DragContext {
+  /** `DropZoneOptions.accept`: extensions (".storm") and MIME types ("application/json", "text/*"). */
+  accept: readonly string[];
+  /** `DropZoneOptions.multiple`. */
+  multiple: boolean;
+  /** A modal dialog is open (the shell's dialog test, as for the keys). */
+  dialogOpen: boolean;
+}
+
+/** What the drop zone shows for the drag over the page right now (guide §9). */
+export type DragVerdict =
+  { state: "none" } | { state: "over" } | { state: "forbidden"; reason: DropForbiddenReason };
+
+interface AcceptEntries {
+  extensions: readonly string[];
+  mimeTypes: readonly string[];
+}
+
+/** `<input accept>` tokens: trimmed, lower case, blanks dropped; "." starts an extension, "/" marks a MIME type. */
+function acceptEntries(accept: readonly string[]): AcceptEntries {
+  const entries = accept.map((entry) => entry.trim().toLowerCase()).filter((entry) => entry !== "");
+  return {
+    extensions: entries.filter((entry) => entry.startsWith(".")),
+    mimeTypes: entries.filter((entry) => !entry.startsWith(".") && entry.includes("/")),
+  };
+}
+
+function matchesMimeType(type: string, mimeTypes: readonly string[]): boolean {
+  const normalized = type.trim().toLowerCase();
+  if (normalized === "") return false;
+  return mimeTypes.some((entry) =>
+    entry.endsWith("/*") ? normalized.startsWith(entry.slice(0, -1)) : normalized === entry,
+  );
+}
+
+/**
+ * The drop zone's state for a drag (guide §9, Drag-over and Drop forbidden):
+ *
+ * - `none`: no item of kind `file` (a palette drag, selected text): the drop zone stays out of it.
+ * - `forbidden` / `dialog`: a modal dialog is open.
+ * - `forbidden` / `multiple`: more than one file and `multiple` is false.
+ * - `forbidden` / `type`: `accept` lists at least one MIME type and every file item carries a
+ *   non-empty type that none of them matches (`type/*` wildcards included). Extensions cannot be
+ *   checked before the drop, and an empty type (".storm" has none) never forbids.
+ * - `over` otherwise.
+ */
+export function dragVerdict(items: readonly DragItemLike[], context: DragContext): DragVerdict {
+  const files = items.filter((item) => item.kind === "file");
+  if (files.length === 0) return { state: "none" };
+  if (context.dialogOpen) return { state: "forbidden", reason: "dialog" };
+  if (files.length > 1 && !context.multiple) return { state: "forbidden", reason: "multiple" };
+  const { mimeTypes } = acceptEntries(context.accept);
+  const foreignType = (item: DragItemLike) =>
+    item.type.trim() !== "" && !matchesMimeType(item.type, mimeTypes);
+  if (mimeTypes.length > 0 && files.every(foreignType)) return { state: "forbidden", reason: "type" };
+  return { state: "over" };
+}
+
+/**
+ * A dropped file matches `accept` like `<input accept>`: an entry starting with "." matches the
+ * end of the name (case-insensitive), an entry with "/" the MIME type exactly or as `type/*`; an
+ * empty `accept` matches every file.
+ */
+export function acceptsFile(file: { name: string; type: string }, accept: readonly string[]): boolean {
+  const { extensions, mimeTypes } = acceptEntries(accept);
+  if (extensions.length === 0 && mimeTypes.length === 0) return true;
+  const name = file.name.toLowerCase();
+  return extensions.some((extension) => name.endsWith(extension)) || matchesMimeType(file.type, mimeTypes);
+}

package/src/core/web-chrome/top-row.ts

@@ -0,0 +1,66 @@
+import { PALETTE_CLEARANCE, decidePaletteRow } from "../layout.js";
+import { SHELL } from "../sizes.js";
+import type { PaletteRow } from "../types.js";
+
+/** Border-box widths of the web app's primary action, measured with and without its label. */
+export interface PrimaryWidths {
+  /** Icon and label: padding `0 16px`, icon 16px, gap 8px, label 13px/600 (guide §5.7). */
+  withLabel: number;
+  /** The icon alone: `SHELL.row` (40) square. */
+  iconOnly: number;
+}
+
+export interface TopRowInput {
+  containerWidth: number;
+  /** The palette's intrinsic border-box width, as for `decidePaletteRow`. */
+  paletteWidth: number;
+  /** Right edge of the menu trigger, relative to the shell root. */
+  menuRight: number;
+  /** The primary action at `right: 12px`; absent in IDE and embedded hosts and without one. */
+  primary?: PrimaryWidths | undefined;
+}
+
+export interface TopRow {
+  paletteRow: PaletteRow;
+  /** `collapsed`: the primary action shows its icon only; its `aria-label` keeps the name. */
+  primaryLabel: "shown" | "collapsed";
+}
+
+/**
+ * The top row of guide §5.15 with a primary action: when it gets tight, the primary action loses
+ * its label first, and only then the palette moves to the second row.
+ *
+ * 1. Without `primary`: `decidePaletteRow` alone, label `shown`.
+ * 2. With the label (`primaryLeft = containerWidth − SHELL.edge − withLabel`): palette `top` →
+ *    `{ top, shown }`.
+ * 3. Icon only (`primaryLeft = containerWidth − SHELL.edge − iconOnly`): palette `top` →
+ *    `{ top, collapsed }`.
+ * 4. Otherwise the palette is in the second row and the top row holds only menu trigger and
+ *    primary action: the label shows again when `menuRight + PALETTE_CLEARANCE` stays left of the
+ *    labelled button, else it stays collapsed.
+ *
+ * Up to `SHELL.narrow` the palette is always in the second row (step 4).
+ */
+export function decideTopRow(input: TopRowInput): TopRow {
+  const { containerWidth, paletteWidth, menuRight, primary } = input;
+  if (!primary) {
+    return {
+      paletteRow: decidePaletteRow({ containerWidth, paletteWidth, menuRight }),
+      primaryLabel: "shown",
+    };
+  }
+  const paletteRowBeside = (primaryWidth: number): PaletteRow =>
+    decidePaletteRow({
+      containerWidth,
+      paletteWidth,
+      menuRight,
+      primaryLeft: containerWidth - SHELL.edge - primaryWidth,
+    });
+  if (paletteRowBeside(primary.withLabel) === "top") return { paletteRow: "top", primaryLabel: "shown" };
+  if (paletteRowBeside(primary.iconOnly) === "top") return { paletteRow: "top", primaryLabel: "collapsed" };
+  const labelledLeft = containerWidth - SHELL.edge - primary.withLabel;
+  return {
+    paletteRow: "second-row",
+    primaryLabel: menuRight + PALETTE_CLEARANCE <= labelledLeft ? "shown" : "collapsed",
+  };
+}

package/src/core/zoom.ts

@@ -0,0 +1,74 @@
+import type { ShellMessages } from "./messages.js";
+
+/** diagram-js `ZoomScroll` RANGE (not configurable): 20 % … 400 %. */
+export const ZOOM_MIN = 0.2;
+export const ZOOM_MAX = 4;
+
+/** Zoom out is disabled at 20 % and below (`zoom <= 0.2 · 1.001`), so it never zooms in. */
+export function canZoomOut(zoom: number): boolean {
+  return zoom > ZOOM_MIN * 1.001;
+}
+
+/** Zoom in is disabled at 400 % (`zoom >= 4 · 0.999`). */
+export function canZoomIn(zoom: number): boolean {
+  return zoom < ZOOM_MAX * 0.999;
+}
+
+/**
+ * A zoom as a whole percentage in the UI language: `Intl.NumberFormat(lang, { style: "percent",
+ * maximumFractionDigits: 0 })`, so English "86%", German "86 %" (with U+00A0).
+ */
+export function formatPercent(zoom: number, lang: string): string {
+  return numberFormat(lang, "percent").format(zoom);
+}
+
+/** Any other number in the chrome ("2 problems"), via `Intl.NumberFormat(lang)`. */
+export function formatNumber(value: number, lang: string): string {
+  return numberFormat(lang, "decimal").format(value);
+}
+
+const FALLBACK_LANG = "en";
+const formats = new Map<string, Intl.NumberFormat>();
+
+// The readout formats on every animation frame of a zoom, so each formatter is built once. A
+// language tag Intl rejects (an empty `lang=""`, a typo) falls back to English, the shell's default
+// language, instead of breaking the chrome.
+function numberFormat(lang: string, style: "percent" | "decimal"): Intl.NumberFormat {
+  const key = `${style}|${lang}`;
+  let format = formats.get(key);
+  if (!format) {
+    const options: Intl.NumberFormatOptions =
+      style === "percent" ? { style, maximumFractionDigits: 0 } : { style };
+    try {
+      format = new Intl.NumberFormat(lang, options);
+    } catch {
+      format = new Intl.NumberFormat(FALLBACK_LANG, options);
+    }
+    formats.set(key, format);
+  }
+  return format;
+}
+
+export interface ZoomReadout {
+  /** "86%" */
+  text: string;
+  /** "Zoom to 100% (now 86%)" */
+  ariaLabel: string;
+  canZoomOut: boolean;
+  canZoomIn: boolean;
+}
+
+/** Everything the zoom panel shows for a zoom: readout text, its accessible name and the limits. */
+export function zoomReadout(
+  zoom: number,
+  lang: string,
+  messages: Pick<ShellMessages, "zoomToActualNow">,
+): ZoomReadout {
+  const text = formatPercent(zoom, lang);
+  return {
+    text,
+    ariaLabel: messages.zoomToActualNow(formatPercent(1, lang), text),
+    canZoomOut: canZoomOut(zoom),
+    canZoomIn: canZoomIn(zoom),
+  };
+}

package/src/core.ts

@@ -0,0 +1,2 @@
+// "@miragon/modeler-shell/core": DOM-free (Node, extension host, workers, unit tests).
+export * from "./core/index.js";

package/src/diagram-js/connect.ts

@@ -0,0 +1,75 @@
+import type { Bounds } from "../core/index.js";
+import type { ShellHandle } from "../dom/index.js";
+import { shellServiceOf } from "./service.js";
+import type { DiagramEventListener, EventBusLike, InjectorLike } from "./types.js";
+import { DiagramViewport, type Viewport } from "./viewport.js";
+
+export interface ConnectOptions {
+  /**
+   * Content bounds in diagram coordinates, tight around the content: the fit insets are the only
+   * margin (guide §5.9). `undefined` = nothing to fit (empty file).
+   */
+  contentBounds(): Bounds | undefined;
+  /**
+   * An empty file (guide §13.5: no element, only whitespace, comments or a title), which shows the
+   * empty-file hint. Default: `contentBounds()` is empty. A notation whose bounds are never empty
+   * (Wardley's plot) passes its own test.
+   */
+  isEmpty?: (() => boolean) | undefined;
+  prefersReducedMotion?: (() => boolean) | undefined;
+}
+
+export interface DiagramJsConnection {
+  readonly viewport: Viewport;
+  /**
+   * Unbinds viewport, palette, keys and the hint sync from the shell; destroys neither the diagram
+   * nor the shell. Runs by itself on `diagram.destroy`.
+   */
+  destroy(): void;
+}
+
+/** After the viewport's own listeners, so its content state is fresh when the hint reads it. */
+const HINT_SYNC_PRIORITY = 500;
+
+/**
+ * Connects a diagram built with `shellModule` to a mounted shell: creates the viewport with
+ * `shell.fitInsets`, binds it with `shell.setZoomTarget`, registers the palette
+ * (`shell.registerPalette`), keeps the empty-file hint in sync with the diagram (after every
+ * `import.done` and `elements.changed`, so the first element created on the canvas hides it) and
+ * calls `canvas.resized()`. Throws when `shellModule` is missing.
+ */
+export function connectDiagramJs(
+  shell: ShellHandle,
+  diagram: InjectorLike,
+  options: ConnectOptions,
+): DiagramJsConnection {
+  const service = shellServiceOf(diagram);
+  const eventBus = diagram.get<EventBusLike>("eventBus");
+  const prefersReducedMotion = options.prefersReducedMotion?.bind(options);
+  const viewport = new DiagramViewport(diagram, {
+    contentBounds: () => options.contentBounds(),
+    insets: () => shell.fitInsets(),
+    ...(prefersReducedMotion ? { prefersReducedMotion } : {}),
+  });
+  shell.setZoomTarget(viewport);
+  const detachPalette = service.attachShell(shell);
+  // The shell has moved the canvas element into its slot; diagram-js caches the old size.
+  viewport.resized();
+
+  const isEmpty = options.isEmpty ? () => options.isEmpty?.() === true : () => !viewport.canFit();
+  const syncHint: DiagramEventListener = () => shell.setEmptyHint(isEmpty());
+  eventBus.on(["import.done", "elements.changed"], HINT_SYNC_PRIORITY, syncHint);
+
+  let destroyed = false;
+  const destroy = (): void => {
+    if (destroyed) return;
+    destroyed = true;
+    eventBus.off(["import.done", "elements.changed"], syncHint);
+    eventBus.off("diagram.destroy", destroy);
+    detachPalette();
+    shell.setZoomTarget(null);
+    viewport.destroy();
+  };
+  eventBus.on("diagram.destroy", destroy);
+  return { viewport, destroy };
+}

package/src/diagram-js/index.ts

@@ -0,0 +1,16 @@
+export type {
+  CanvasLike,
+  DiagramEventListener,
+  DiagramViewbox,
+  EventBusLike,
+  InjectorLike,
+  KeyboardLike,
+  ModuleDeclarationLike,
+  PaletteLike,
+  ZoomScrollLike,
+} from "./types.js";
+export { shellModule } from "./module.js";
+export type { Viewport, ViewportOptions } from "./viewport.js";
+export { createViewport } from "./viewport.js";
+export type { ConnectOptions, DiagramJsConnection } from "./connect.js";
+export { connectDiagramJs } from "./connect.js";

package/src/diagram-js/module.ts

@@ -0,0 +1,20 @@
+import { SHELL_SERVICE, ShellDiagramService } from "./service.js";
+import type { ModuleDeclarationLike } from "./types.js";
+
+/**
+ * Add to the modeler's modules (`additionalModules`, after the renderer's own modules):
+ * - `paletteTooltip: ["value", null]` removes diagram-js's (or the renderer's) palette tooltip; the
+ *   chrome tooltip takes over;
+ * - the palette skin: on `palette.create` it sets `data-chrome="palette"` and moves the palette
+ *   before the canvas `<svg>`; after every `palette.changed` it re-applies `role="toolbar"`,
+ *   `aria-label`, roving `tabindex` and `aria-pressed` (from `tool-manager.update`);
+ * - `keyboard.addListener(2000, …)` returning `true` for every chrome key, so `KeyboardBindings` and
+ *   the modeler's keyboard modules (priority 1000) never act on them.
+ * It buffers the palette until `connectDiagramJs` hands it to a shell, so the diagram may be
+ * constructed before `mountShell`.
+ */
+export const shellModule: ModuleDeclarationLike = {
+  __init__: [SHELL_SERVICE],
+  [SHELL_SERVICE]: ["type", ShellDiagramService],
+  paletteTooltip: ["value", null],
+};