@miragon/modeler-shell 0.1.0 → 0.2.0

package/dist/vscode-webview.d.cts

@@ -1,8 +1,8 @@
 import { T as Theme, A as Appearance } from './appearance-D3FUcbu6.cjs';
-import { S as ShellOptions, a as ShellHandle } from './types-OuFlqZp0.cjs';
-import { V as ViewportState } from './types-B6NfkiUG.cjs';
+import { S as ShellOptions, a as ShellHandle } from './types-CnRrINRs.cjs';
+import { V as ViewportState } from './toasts-Bp0REqdq.cjs';
 export { A as APPEARANCE_MESSAGE_TYPE, a as AppearanceMessage, b as appearanceMessage, i as isAppearanceMessage } from './protocol-DhYBakWL.cjs';
-import './keymap-CObQE6q6.cjs';
+import './appearance-XX3JC3pI.cjs';
 
 /**
  * Writes `data-cd-theme` and `data-cd-kontrast` on `element` (default `<html>`) in one task, with
@@ -34,7 +34,9 @@ declare function connectAppearance(options: AppearanceListenerOptions): () => vo
  */
 declare function connectReducedMotion(): () => void;
 
-interface VsCodeShellOptions extends Omit<ShellOptions, "host" | "keyScope" | "themes">, AppearanceListenerOptions {
+/** The web column's options (0.2): a VS Code webview has none of them (guide §5.2, §13.5). */
+type WebHostOptionKey = "primary" | "legal" | "file" | "appearance" | "emptyState" | "dropZone";
+interface VsCodeShellOptions extends Omit<ShellOptions, "host" | "keyScope" | "themes" | WebHostOptionKey>, AppearanceListenerOptions {
 }
 /**
  * `mountShell` for a VS Code webview: `host: "ide"`, the key listener on `document` (VS Code's own

package/dist/vscode-webview.d.ts

@@ -1,8 +1,8 @@
 import { T as Theme, A as Appearance } from './appearance-D3FUcbu6.js';
-import { S as ShellOptions, a as ShellHandle } from './types-DnZn9CPw.js';
-import { V as ViewportState } from './types-B6NfkiUG.js';
+import { S as ShellOptions, a as ShellHandle } from './types-PuDZczzy.js';
+import { V as ViewportState } from './toasts-Bp0REqdq.js';
 export { A as APPEARANCE_MESSAGE_TYPE, a as AppearanceMessage, b as appearanceMessage, i as isAppearanceMessage } from './protocol-IeW8bf4f.js';
-import './keymap-DORzHnK-.js';
+import './appearance-BBaM_4bD.js';
 
 /**
  * Writes `data-cd-theme` and `data-cd-kontrast` on `element` (default `<html>`) in one task, with
@@ -34,7 +34,9 @@ declare function connectAppearance(options: AppearanceListenerOptions): () => vo
  */
 declare function connectReducedMotion(): () => void;
 
-interface VsCodeShellOptions extends Omit<ShellOptions, "host" | "keyScope" | "themes">, AppearanceListenerOptions {
+/** The web column's options (0.2): a VS Code webview has none of them (guide §5.2, §13.5). */
+type WebHostOptionKey = "primary" | "legal" | "file" | "appearance" | "emptyState" | "dropZone";
+interface VsCodeShellOptions extends Omit<ShellOptions, "host" | "keyScope" | "themes" | WebHostOptionKey>, AppearanceListenerOptions {
 }
 /**
  * `mountShell` for a VS Code webview: `host: "ide"`, the key listener on `document` (VS Code's own

package/dist/vscode-webview.js

@@ -1,6 +1,6 @@
 import {
   mountShell
-} from "./chunk-6LQOFACK.js";
+} from "./chunk-66HCSJNY.js";
 import {
   APPEARANCE_MESSAGE_TYPE,
   appearanceMessage,
@@ -12,7 +12,7 @@ import {
   appearanceFromBodyClasses,
   reducedMotionFromBodyClasses,
   resolveAppearance
-} from "./chunk-5JSZ4VGA.js";
+} from "./chunk-OADW3GPA.js";
 
 // src/vscode/webview/appearance.ts
 var NO_TRANSITION_CLASS = "cd-shell-no-transition";
@@ -137,6 +137,12 @@ function withDestroyHook(shell, beforeDestroy) {
     get inspector() {
       return shell.inspector;
     },
+    get primary() {
+      return shell.primary;
+    },
+    get appearance() {
+      return shell.appearance;
+    },
     setZoomTarget: (target) => shell.setZoomTarget(target),
     fitInsets: () => shell.fitInsets(),
     registerPalette: (palette) => shell.registerPalette(palette),
@@ -145,6 +151,9 @@ function withDestroyHook(shell, beforeDestroy) {
     setEmptyHint: (visible) => shell.setEmptyHint(visible),
     setReadOnly: (readOnly, options) => shell.setReadOnly(readOnly, options),
     isReadOnly: () => shell.isReadOnly(),
+    setEmptyState: (shown) => shell.setEmptyState(shown),
+    isEmptyStateShown: () => shell.isEmptyStateShown(),
+    toast: (request) => shell.toast(request),
     destroy() {
       beforeDestroy();
       shell.destroy();

package/dist/vscode-webview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vscode/webview/appearance.ts","../src/vscode/webview/mount.ts","../src/vscode/webview/state.ts"],"sourcesContent":["import {\n  REDUCED_MOTION_CLASS,\n  appearanceAttributes,\n  appearanceFromBodyClasses,\n  reducedMotionFromBodyClasses,\n  resolveAppearance,\n  type Appearance,\n  type Theme,\n} from \"../../core/index.js\";\nimport { isAppearanceMessage } from \"../protocol.js\";\n\nconst NO_TRANSITION_CLASS = \"cd-shell-no-transition\";\n\n/** The latest mode switch per `<html>`: only its second frame may lift the transition stop. */\nconst latestSwitch = new WeakMap<Element, number>();\n\nfunction showsAppearance(element: Element, appearance: Appearance): boolean {\n  const attributes = appearanceAttributes(appearance);\n  return (\n    element.getAttribute(\"data-cd-theme\") === attributes[\"data-cd-theme\"] &&\n    element.getAttribute(\"data-cd-kontrast\") === (attributes[\"data-cd-kontrast\"] ?? null)\n  );\n}\n\n/**\n * Writes `data-cd-theme` and `data-cd-kontrast` on `element` (default `<html>`) in one task, with\n * transitions suppressed for one frame: adds `cd-shell-no-transition` to `<html>`, sets both\n * attributes and removes the class in a nested `requestAnimationFrame` (after the last of several\n * quick switches).\n */\nexport function applyAppearance(appearance: Appearance, element?: HTMLElement): void {\n  const target = element ?? document.documentElement;\n  const html = target.ownerDocument.documentElement;\n  const attributes = appearanceAttributes(appearance);\n  const kontrast = attributes[\"data-cd-kontrast\"];\n\n  const switchId = (latestSwitch.get(html) ?? 0) + 1;\n  latestSwitch.set(html, switchId);\n  html.classList.add(NO_TRANSITION_CLASS);\n  target.setAttribute(\"data-cd-theme\", attributes[\"data-cd-theme\"]);\n  if (kontrast) target.setAttribute(\"data-cd-kontrast\", kontrast);\n  else target.removeAttribute(\"data-cd-kontrast\");\n\n  requestAnimationFrame(() =>\n    requestAnimationFrame(() => {\n      if (latestSwitch.get(html) !== switchId) return;\n      latestSwitch.delete(html);\n      html.classList.remove(NO_TRANSITION_CLASS);\n    }),\n  );\n}\n\nexport interface AppearanceListenerOptions {\n  /** The modes the modeler can show; the body-class fallback resolves against them. */\n  themes: readonly Theme[];\n}\n\n/**\n * Listens for `AppearanceMessage`s on `window` and applies them to `<html>`, resolved against\n * `themes` once more so a webview never shows a mode its bundle cannot. A page whose `<html>` has\n * no `data-cd-theme` at connect (no `renderWebviewHtml`) falls back to the VS Code body classes,\n * through a `MutationObserver` on `<body>` until the first message (resolved against `themes`).\n * With the attributes of `renderWebviewHtml` there is no fallback: the extension's bridge knows the\n * `colorTheme` setting, the body classes do not, and VS Code changes them before the bridge's\n * message arrives, which would flash the mode without the setting. Returns the disconnect\n * function. Throws when `themes` is empty.\n */\nexport function connectAppearance(options: AppearanceListenerOptions): () => void {\n  const { themes } = options;\n  if (themes.length === 0) {\n    throw new Error(\"@miragon/modeler-shell: connectAppearance needs at least one theme\");\n  }\n  const html = document.documentElement;\n  const show = (requested: Appearance): void => {\n    const resolved = resolveAppearance(requested, themes);\n    if (!showsAppearance(html, resolved)) applyAppearance(resolved, html);\n  };\n\n  let fallbackActive = !html.hasAttribute(\"data-cd-theme\");\n  const applyBodyClasses = (): void => {\n    if (!fallbackActive || !document.body) return;\n    const requested = appearanceFromBodyClasses(document.body.classList);\n    if (requested) show(requested);\n  };\n  const observer = new MutationObserver(applyBodyClasses);\n  const startFallback = (): void => {\n    if (!fallbackActive || !document.body) return;\n    observer.observe(document.body, { attributes: true, attributeFilter: [\"class\"] });\n    applyBodyClasses();\n  };\n  const stopFallback = (): void => {\n    if (!fallbackActive) return;\n    fallbackActive = false;\n    observer.disconnect();\n    document.removeEventListener(\"DOMContentLoaded\", startFallback);\n  };\n\n  const onMessage = (event: MessageEvent): void => {\n    if (!isAppearanceMessage(event.data)) return;\n    stopFallback();\n    show(event.data.appearance);\n  };\n\n  window.addEventListener(\"message\", onMessage);\n  if (document.body) startFallback();\n  else if (fallbackActive) document.addEventListener(\"DOMContentLoaded\", startFallback, { once: true });\n\n  return () => {\n    window.removeEventListener(\"message\", onMessage);\n    fallbackActive = false;\n    observer.disconnect();\n    document.removeEventListener(\"DOMContentLoaded\", startFallback);\n  };\n}\n\n/**\n * Mirrors VS Code's `workbench.reduceMotion` (the body class `vscode-reduce-motion`, which VS Code\n * keeps up to date) as `REDUCED_MOTION_CLASS` on `<html>` for the whole session: the shell's\n * animations stop and an explicit fit jumps, as under `prefers-reduced-motion` (guide §5.14, §7).\n * Returns the disconnect function, which removes the class again.\n */\nexport function connectReducedMotion(): () => void {\n  const html = document.documentElement;\n  const apply = (): void => {\n    if (document.body)\n      html.classList.toggle(REDUCED_MOTION_CLASS, reducedMotionFromBodyClasses(document.body.classList));\n  };\n  const observer = new MutationObserver(apply);\n  const start = (): void => {\n    if (!document.body) return;\n    observer.observe(document.body, { attributes: true, attributeFilter: [\"class\"] });\n    apply();\n  };\n  if (document.body) start();\n  else document.addEventListener(\"DOMContentLoaded\", start, { once: true });\n  return () => {\n    observer.disconnect();\n    document.removeEventListener(\"DOMContentLoaded\", start);\n    html.classList.remove(REDUCED_MOTION_CLASS);\n  };\n}\n","import { mountShell, type ShellHandle, type ShellOptions } from \"../../dom/index.js\";\nimport { connectAppearance, connectReducedMotion, type AppearanceListenerOptions } from \"./appearance.js\";\n\nexport interface VsCodeShellOptions\n  extends Omit<ShellOptions, \"host\" | \"keyScope\" | \"themes\">, AppearanceListenerOptions {}\n\n/** The shell's handle with a `destroy` that runs `beforeDestroy` first; every other member delegates. */\nfunction withDestroyHook(shell: ShellHandle, beforeDestroy: () => void): ShellHandle {\n  return {\n    get root() {\n      return shell.root;\n    },\n    get canvas() {\n      return shell.canvas;\n    },\n    get host() {\n      return shell.host;\n    },\n    get lang() {\n      return shell.lang;\n    },\n    get platform() {\n      return shell.platform;\n    },\n    get messages() {\n      return shell.messages;\n    },\n    get menu() {\n      return shell.menu;\n    },\n    get tooltip() {\n      return shell.tooltip;\n    },\n    get legend() {\n      return shell.legend;\n    },\n    get inspector() {\n      return shell.inspector;\n    },\n    setZoomTarget: (target) => shell.setZoomTarget(target),\n    fitInsets: () => shell.fitInsets(),\n    registerPalette: (palette) => shell.registerPalette(palette),\n    setProblems: (summary) => shell.setProblems(summary),\n    setStatus: (status, options) => shell.setStatus(status, options),\n    setEmptyHint: (visible) => shell.setEmptyHint(visible),\n    setReadOnly: (readOnly, options) => shell.setReadOnly(readOnly, options),\n    isReadOnly: () => shell.isReadOnly(),\n    destroy() {\n      beforeDestroy();\n      shell.destroy();\n    },\n  };\n}\n\n/**\n * `mountShell` for a VS Code webview: `host: \"ide\"`, the key listener on `document` (VS Code's own\n * listener sits on `window`, so handled keys are stopped before it), `cd-shell-document` on\n * `<html>`, plus `connectAppearance` and `connectReducedMotion`. `destroy()` also disconnects both.\n */\nexport function mountVsCodeShell(root: HTMLElement, options: VsCodeShellOptions): ShellHandle {\n  const { themes } = options;\n  const disconnectAppearance = connectAppearance({ themes });\n  const disconnectReducedMotion = connectReducedMotion();\n  const disconnect = (): void => {\n    disconnectAppearance();\n    disconnectReducedMotion();\n  };\n  let shell: ShellHandle;\n  try {\n    shell = mountShell(root, { ...options, host: \"ide\", keyScope: \"document\" });\n  } catch (error) {\n    disconnect();\n    throw error;\n  }\n  return withDestroyHook(shell, disconnect);\n}\n","import type { Bounds, ViewportState } from \"../../core/index.js\";\n\n/** `acquireVsCodeApi()` as far as the state helpers need it. */\nexport interface WebviewStateApi {\n  getState(): unknown;\n  setState(state: unknown): void;\n}\n\n/** What the shell keeps across a webview rebuild (guide §13.5: legend state and view). */\nexport interface ShellWebviewState {\n  legendOpen?: boolean | undefined;\n  view?: ViewportState | undefined;\n}\n\n/** The key under which the shell's part lives in the webview state; other keys stay untouched. */\nexport const SHELL_STATE_KEY = \"modelerShell\";\n\ntype StateRecord = Record<string, unknown>;\n\nfunction isRecord(value: unknown): value is StateRecord {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction storedState(api: WebviewStateApi): StateRecord {\n  const state = api.getState();\n  return isRecord(state) ? state : {};\n}\n\nfunction viewboxFrom(value: unknown): Bounds | undefined {\n  if (!isRecord(value)) return undefined;\n  const { x, y, width, height } = value;\n  if (typeof x !== \"number\" || typeof y !== \"number\") return undefined;\n  if (typeof width !== \"number\" || typeof height !== \"number\") return undefined;\n  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(width) || !Number.isFinite(height)) {\n    return undefined;\n  }\n  return width > 0 && height > 0 ? { x, y, width, height } : undefined;\n}\n\nfunction viewFrom(value: unknown): ViewportState | undefined {\n  if (!isRecord(value) || typeof value.userMoved !== \"boolean\") return undefined;\n  const viewbox = viewboxFrom(value.viewbox);\n  return viewbox ? { viewbox, userMoved: value.userMoved } : undefined;\n}\n\n/** The shell's part of `api.getState()`; `{}` when there is none or it is malformed. */\nexport function readShellState(api: WebviewStateApi): ShellWebviewState {\n  const part = storedState(api)[SHELL_STATE_KEY];\n  if (!isRecord(part)) return {};\n  const state: ShellWebviewState = {};\n  if (typeof part.legendOpen === \"boolean\") state.legendOpen = part.legendOpen;\n  const view = viewFrom(part.view);\n  if (view) state.view = view;\n  return state;\n}\n\n/**\n * Merges `patch` into the shell's part and writes the whole state back, keeping every other key.\n * A value that is `undefined` (for example `viewport.getState()` before the first import) or\n * malformed leaves the stored value alone; nothing is written when nothing changed.\n */\nexport function writeShellState(api: WebviewStateApi, patch: ShellWebviewState): void {\n  const state = storedState(api);\n  const part = isRecord(state[SHELL_STATE_KEY]) ? (state[SHELL_STATE_KEY] as StateRecord) : {};\n  const next: StateRecord = { ...part };\n  if (typeof patch.legendOpen === \"boolean\") next.legendOpen = patch.legendOpen;\n  const view = viewFrom(patch.view);\n  if (view) next.view = view;\n  if (JSON.stringify(next) === JSON.stringify(state[SHELL_STATE_KEY])) return;\n  api.setState({ ...state, [SHELL_STATE_KEY]: next });\n}\n\n/** What `persistView` reads of a viewport (`connectDiagramJs(…).viewport`). */\nexport interface PersistableView {\n  onChange(listener: () => void): () => void;\n  getState(): ViewportState | undefined;\n}\n\nexport interface PersistViewOptions {\n  /** Quiet time before the write, default 250ms. */\n  delayMs?: number | undefined;\n}\n\n/** A pan, a wheel zoom or a fit animation changes the view on every frame. */\nconst PERSIST_VIEW_DELAY_MS = 250;\n\n/**\n * Keeps the stored view (`writeShellState(api, { view })`) up to date once the view has rested for\n * `delayMs`, instead of one `vscode.setState` IPC message per animation frame. Returns the stop\n * function; it writes a pending change at once.\n */\nexport function persistView(\n  api: WebviewStateApi,\n  viewport: PersistableView,\n  options: PersistViewOptions = {},\n): () => void {\n  const delayMs = options.delayMs ?? PERSIST_VIEW_DELAY_MS;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  const write = (): void => {\n    timer = undefined;\n    writeShellState(api, { view: viewport.getState() });\n  };\n  const unsubscribe = viewport.onChange(() => {\n    clearTimeout(timer);\n    timer = setTimeout(write, delayMs);\n  });\n  let stopped = false;\n  return () => {\n    if (stopped) return;\n    stopped = true;\n    unsubscribe();\n    if (timer === undefined) return;\n    clearTimeout(timer);\n    write();\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/vscode/webview/appearance.ts","../src/vscode/webview/mount.ts","../src/vscode/webview/state.ts"],"sourcesContent":["import {\n  REDUCED_MOTION_CLASS,\n  appearanceAttributes,\n  appearanceFromBodyClasses,\n  reducedMotionFromBodyClasses,\n  resolveAppearance,\n  type Appearance,\n  type Theme,\n} from \"../../core/index.js\";\nimport { isAppearanceMessage } from \"../protocol.js\";\n\nconst NO_TRANSITION_CLASS = \"cd-shell-no-transition\";\n\n/** The latest mode switch per `<html>`: only its second frame may lift the transition stop. */\nconst latestSwitch = new WeakMap<Element, number>();\n\nfunction showsAppearance(element: Element, appearance: Appearance): boolean {\n  const attributes = appearanceAttributes(appearance);\n  return (\n    element.getAttribute(\"data-cd-theme\") === attributes[\"data-cd-theme\"] &&\n    element.getAttribute(\"data-cd-kontrast\") === (attributes[\"data-cd-kontrast\"] ?? null)\n  );\n}\n\n/**\n * Writes `data-cd-theme` and `data-cd-kontrast` on `element` (default `<html>`) in one task, with\n * transitions suppressed for one frame: adds `cd-shell-no-transition` to `<html>`, sets both\n * attributes and removes the class in a nested `requestAnimationFrame` (after the last of several\n * quick switches).\n */\nexport function applyAppearance(appearance: Appearance, element?: HTMLElement): void {\n  const target = element ?? document.documentElement;\n  const html = target.ownerDocument.documentElement;\n  const attributes = appearanceAttributes(appearance);\n  const kontrast = attributes[\"data-cd-kontrast\"];\n\n  const switchId = (latestSwitch.get(html) ?? 0) + 1;\n  latestSwitch.set(html, switchId);\n  html.classList.add(NO_TRANSITION_CLASS);\n  target.setAttribute(\"data-cd-theme\", attributes[\"data-cd-theme\"]);\n  if (kontrast) target.setAttribute(\"data-cd-kontrast\", kontrast);\n  else target.removeAttribute(\"data-cd-kontrast\");\n\n  requestAnimationFrame(() =>\n    requestAnimationFrame(() => {\n      if (latestSwitch.get(html) !== switchId) return;\n      latestSwitch.delete(html);\n      html.classList.remove(NO_TRANSITION_CLASS);\n    }),\n  );\n}\n\nexport interface AppearanceListenerOptions {\n  /** The modes the modeler can show; the body-class fallback resolves against them. */\n  themes: readonly Theme[];\n}\n\n/**\n * Listens for `AppearanceMessage`s on `window` and applies them to `<html>`, resolved against\n * `themes` once more so a webview never shows a mode its bundle cannot. A page whose `<html>` has\n * no `data-cd-theme` at connect (no `renderWebviewHtml`) falls back to the VS Code body classes,\n * through a `MutationObserver` on `<body>` until the first message (resolved against `themes`).\n * With the attributes of `renderWebviewHtml` there is no fallback: the extension's bridge knows the\n * `colorTheme` setting, the body classes do not, and VS Code changes them before the bridge's\n * message arrives, which would flash the mode without the setting. Returns the disconnect\n * function. Throws when `themes` is empty.\n */\nexport function connectAppearance(options: AppearanceListenerOptions): () => void {\n  const { themes } = options;\n  if (themes.length === 0) {\n    throw new Error(\"@miragon/modeler-shell: connectAppearance needs at least one theme\");\n  }\n  const html = document.documentElement;\n  const show = (requested: Appearance): void => {\n    const resolved = resolveAppearance(requested, themes);\n    if (!showsAppearance(html, resolved)) applyAppearance(resolved, html);\n  };\n\n  let fallbackActive = !html.hasAttribute(\"data-cd-theme\");\n  const applyBodyClasses = (): void => {\n    if (!fallbackActive || !document.body) return;\n    const requested = appearanceFromBodyClasses(document.body.classList);\n    if (requested) show(requested);\n  };\n  const observer = new MutationObserver(applyBodyClasses);\n  const startFallback = (): void => {\n    if (!fallbackActive || !document.body) return;\n    observer.observe(document.body, { attributes: true, attributeFilter: [\"class\"] });\n    applyBodyClasses();\n  };\n  const stopFallback = (): void => {\n    if (!fallbackActive) return;\n    fallbackActive = false;\n    observer.disconnect();\n    document.removeEventListener(\"DOMContentLoaded\", startFallback);\n  };\n\n  const onMessage = (event: MessageEvent): void => {\n    if (!isAppearanceMessage(event.data)) return;\n    stopFallback();\n    show(event.data.appearance);\n  };\n\n  window.addEventListener(\"message\", onMessage);\n  if (document.body) startFallback();\n  else if (fallbackActive) document.addEventListener(\"DOMContentLoaded\", startFallback, { once: true });\n\n  return () => {\n    window.removeEventListener(\"message\", onMessage);\n    fallbackActive = false;\n    observer.disconnect();\n    document.removeEventListener(\"DOMContentLoaded\", startFallback);\n  };\n}\n\n/**\n * Mirrors VS Code's `workbench.reduceMotion` (the body class `vscode-reduce-motion`, which VS Code\n * keeps up to date) as `REDUCED_MOTION_CLASS` on `<html>` for the whole session: the shell's\n * animations stop and an explicit fit jumps, as under `prefers-reduced-motion` (guide §5.14, §7).\n * Returns the disconnect function, which removes the class again.\n */\nexport function connectReducedMotion(): () => void {\n  const html = document.documentElement;\n  const apply = (): void => {\n    if (document.body)\n      html.classList.toggle(REDUCED_MOTION_CLASS, reducedMotionFromBodyClasses(document.body.classList));\n  };\n  const observer = new MutationObserver(apply);\n  const start = (): void => {\n    if (!document.body) return;\n    observer.observe(document.body, { attributes: true, attributeFilter: [\"class\"] });\n    apply();\n  };\n  if (document.body) start();\n  else document.addEventListener(\"DOMContentLoaded\", start, { once: true });\n  return () => {\n    observer.disconnect();\n    document.removeEventListener(\"DOMContentLoaded\", start);\n    html.classList.remove(REDUCED_MOTION_CLASS);\n  };\n}\n","import { mountShell, type ShellHandle, type ShellOptions } from \"../../dom/index.js\";\nimport { connectAppearance, connectReducedMotion, type AppearanceListenerOptions } from \"./appearance.js\";\n\n/** The web column's options (0.2): a VS Code webview has none of them (guide §5.2, §13.5). */\ntype WebHostOptionKey = \"primary\" | \"legal\" | \"file\" | \"appearance\" | \"emptyState\" | \"dropZone\";\n\nexport interface VsCodeShellOptions\n  extends Omit<ShellOptions, \"host\" | \"keyScope\" | \"themes\" | WebHostOptionKey>, AppearanceListenerOptions {}\n\n/** The shell's handle with a `destroy` that runs `beforeDestroy` first; every other member delegates. */\nfunction withDestroyHook(shell: ShellHandle, beforeDestroy: () => void): ShellHandle {\n  return {\n    get root() {\n      return shell.root;\n    },\n    get canvas() {\n      return shell.canvas;\n    },\n    get host() {\n      return shell.host;\n    },\n    get lang() {\n      return shell.lang;\n    },\n    get platform() {\n      return shell.platform;\n    },\n    get messages() {\n      return shell.messages;\n    },\n    get menu() {\n      return shell.menu;\n    },\n    get tooltip() {\n      return shell.tooltip;\n    },\n    get legend() {\n      return shell.legend;\n    },\n    get inspector() {\n      return shell.inspector;\n    },\n    get primary() {\n      return shell.primary;\n    },\n    get appearance() {\n      return shell.appearance;\n    },\n    setZoomTarget: (target) => shell.setZoomTarget(target),\n    fitInsets: () => shell.fitInsets(),\n    registerPalette: (palette) => shell.registerPalette(palette),\n    setProblems: (summary) => shell.setProblems(summary),\n    setStatus: (status, options) => shell.setStatus(status, options),\n    setEmptyHint: (visible) => shell.setEmptyHint(visible),\n    setReadOnly: (readOnly, options) => shell.setReadOnly(readOnly, options),\n    isReadOnly: () => shell.isReadOnly(),\n    setEmptyState: (shown) => shell.setEmptyState(shown),\n    isEmptyStateShown: () => shell.isEmptyStateShown(),\n    toast: (request) => shell.toast(request),\n    destroy() {\n      beforeDestroy();\n      shell.destroy();\n    },\n  };\n}\n\n/**\n * `mountShell` for a VS Code webview: `host: \"ide\"`, the key listener on `document` (VS Code's own\n * listener sits on `window`, so handled keys are stopped before it), `cd-shell-document` on\n * `<html>`, plus `connectAppearance` and `connectReducedMotion`. `destroy()` also disconnects both.\n */\nexport function mountVsCodeShell(root: HTMLElement, options: VsCodeShellOptions): ShellHandle {\n  const { themes } = options;\n  const disconnectAppearance = connectAppearance({ themes });\n  const disconnectReducedMotion = connectReducedMotion();\n  const disconnect = (): void => {\n    disconnectAppearance();\n    disconnectReducedMotion();\n  };\n  let shell: ShellHandle;\n  try {\n    shell = mountShell(root, { ...options, host: \"ide\", keyScope: \"document\" });\n  } catch (error) {\n    disconnect();\n    throw error;\n  }\n  return withDestroyHook(shell, disconnect);\n}\n","import type { Bounds, ViewportState } from \"../../core/index.js\";\n\n/** `acquireVsCodeApi()` as far as the state helpers need it. */\nexport interface WebviewStateApi {\n  getState(): unknown;\n  setState(state: unknown): void;\n}\n\n/** What the shell keeps across a webview rebuild (guide §13.5: legend state and view). */\nexport interface ShellWebviewState {\n  legendOpen?: boolean | undefined;\n  view?: ViewportState | undefined;\n}\n\n/** The key under which the shell's part lives in the webview state; other keys stay untouched. */\nexport const SHELL_STATE_KEY = \"modelerShell\";\n\ntype StateRecord = Record<string, unknown>;\n\nfunction isRecord(value: unknown): value is StateRecord {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction storedState(api: WebviewStateApi): StateRecord {\n  const state = api.getState();\n  return isRecord(state) ? state : {};\n}\n\nfunction viewboxFrom(value: unknown): Bounds | undefined {\n  if (!isRecord(value)) return undefined;\n  const { x, y, width, height } = value;\n  if (typeof x !== \"number\" || typeof y !== \"number\") return undefined;\n  if (typeof width !== \"number\" || typeof height !== \"number\") return undefined;\n  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(width) || !Number.isFinite(height)) {\n    return undefined;\n  }\n  return width > 0 && height > 0 ? { x, y, width, height } : undefined;\n}\n\nfunction viewFrom(value: unknown): ViewportState | undefined {\n  if (!isRecord(value) || typeof value.userMoved !== \"boolean\") return undefined;\n  const viewbox = viewboxFrom(value.viewbox);\n  return viewbox ? { viewbox, userMoved: value.userMoved } : undefined;\n}\n\n/** The shell's part of `api.getState()`; `{}` when there is none or it is malformed. */\nexport function readShellState(api: WebviewStateApi): ShellWebviewState {\n  const part = storedState(api)[SHELL_STATE_KEY];\n  if (!isRecord(part)) return {};\n  const state: ShellWebviewState = {};\n  if (typeof part.legendOpen === \"boolean\") state.legendOpen = part.legendOpen;\n  const view = viewFrom(part.view);\n  if (view) state.view = view;\n  return state;\n}\n\n/**\n * Merges `patch` into the shell's part and writes the whole state back, keeping every other key.\n * A value that is `undefined` (for example `viewport.getState()` before the first import) or\n * malformed leaves the stored value alone; nothing is written when nothing changed.\n */\nexport function writeShellState(api: WebviewStateApi, patch: ShellWebviewState): void {\n  const state = storedState(api);\n  const part = isRecord(state[SHELL_STATE_KEY]) ? (state[SHELL_STATE_KEY] as StateRecord) : {};\n  const next: StateRecord = { ...part };\n  if (typeof patch.legendOpen === \"boolean\") next.legendOpen = patch.legendOpen;\n  const view = viewFrom(patch.view);\n  if (view) next.view = view;\n  if (JSON.stringify(next) === JSON.stringify(state[SHELL_STATE_KEY])) return;\n  api.setState({ ...state, [SHELL_STATE_KEY]: next });\n}\n\n/** What `persistView` reads of a viewport (`connectDiagramJs(…).viewport`). */\nexport interface PersistableView {\n  onChange(listener: () => void): () => void;\n  getState(): ViewportState | undefined;\n}\n\nexport interface PersistViewOptions {\n  /** Quiet time before the write, default 250ms. */\n  delayMs?: number | undefined;\n}\n\n/** A pan, a wheel zoom or a fit animation changes the view on every frame. */\nconst PERSIST_VIEW_DELAY_MS = 250;\n\n/**\n * Keeps the stored view (`writeShellState(api, { view })`) up to date once the view has rested for\n * `delayMs`, instead of one `vscode.setState` IPC message per animation frame. Returns the stop\n * function; it writes a pending change at once.\n */\nexport function persistView(\n  api: WebviewStateApi,\n  viewport: PersistableView,\n  options: PersistViewOptions = {},\n): () => void {\n  const delayMs = options.delayMs ?? PERSIST_VIEW_DELAY_MS;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  const write = (): void => {\n    timer = undefined;\n    writeShellState(api, { view: viewport.getState() });\n  };\n  const unsubscribe = viewport.onChange(() => {\n    clearTimeout(timer);\n    timer = setTimeout(write, delayMs);\n  });\n  let stopped = false;\n  return () => {\n    if (stopped) return;\n    stopped = true;\n    unsubscribe();\n    if (timer === undefined) return;\n    clearTimeout(timer);\n    write();\n  };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@miragon/modeler-shell",
-  "version": "0.1.0",
-  "description": "The shared, framework-free chrome around Miragon diagram-js modelers: menu, palette skin, tooltip, zoom panel, keys, fit, problems pill, status box, legend and inspector slots, and the VS Code host plumbing.",
+  "version": "0.2.0",
+  "description": "The shared, framework-free chrome around Miragon diagram-js modelers: menu, palette skin, tooltip, zoom panel, keys, fit, problems pill, status box, legend and inspector slots, the VS Code host plumbing and the web-app chrome (primary action, legal line, toasts, empty state, drop zone).",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/core/feedback/appearance.ts

@@ -0,0 +1,141 @@
+import type { Theme } from "../appearance.js";
+
+/** The web app's mode choice (guide §13.3): Appearance, System · Light · Dark. */
+export type AppearanceChoice = "system" | "light" | "dark";
+
+/** Where the web app keeps the choice: `light` or `dark`; "System" removes the entry (guide §13.3). */
+export const APPEARANCE_STORAGE_KEY = "miragon.darstellung";
+
+/**
+ * The two `theme-color` values (guide §11, §13.3): light is the app's own value (`#335DE5`, `fest`
+ * `--cd-blau` of the vendored `cd-tokens.generated.json`), dark `#1D1D1D` (`dunkel`
+ * `--cd-ui-grund`). The modeler reads both from its vendored JSON; the shell keeps no colour.
+ */
+export interface ThemeColors {
+  light: string;
+  dark: string;
+}
+
+/** `"light"` and `"dark"` pass, everything else (a missing entry, a foreign value) is `"system"`. */
+export function parseAppearanceChoice(stored: unknown): AppearanceChoice {
+  return stored === "light" || stored === "dark" ? stored : "system";
+}
+
+/** What `<html>` and the meta tags carry for a choice. */
+export interface DocumentMode {
+  /** `data-cd-theme` on `<html>`. */
+  theme: "system" | Theme;
+  /** `<meta name="color-scheme" content>`. */
+  colorScheme: "light dark" | Theme;
+  /** The `content` of the `theme-color` metas with `media="(prefers-color-scheme: light|dark)"`. */
+  themeColor: ThemeColors;
+}
+
+/**
+ * The document mode for `choice` (guide §13.3). A modeler that cannot show dark (`themes` without
+ * `"dark"`) is `light` whatever the choice: theme `light`, color-scheme `light`, both theme
+ * colours `colors.light`. Dark-capable: `system` → theme `system`, color-scheme `light dark`,
+ * `colors` as they are; `light`/`dark` → that theme and color-scheme, both theme colours the
+ * chosen mode's, so the browser bar matches a fixed choice under the other system mode.
+ */
+export function documentMode(
+  choice: AppearanceChoice,
+  themes: readonly Theme[],
+  colors: ThemeColors,
+): DocumentMode {
+  if (!themes.includes("dark")) return fixedMode("light", colors.light);
+  const parsed = parseAppearanceChoice(choice);
+  if (parsed === "system") {
+    return {
+      theme: "system",
+      colorScheme: "light dark",
+      themeColor: { light: colors.light, dark: colors.dark },
+    };
+  }
+  return fixedMode(parsed, colors[parsed]);
+}
+
+function fixedMode(theme: Theme, color: string): DocumentMode {
+  return { theme, colorScheme: theme, themeColor: { light: color, dark: color } };
+}
+
+export interface WebModeScriptOptions {
+  /** The modes the modeler can show, as passed to `mountShell`. */
+  themes: readonly Theme[];
+  themeColors: ThemeColors;
+}
+
+/**
+ * The body of the inline `<script>` in `<head>`, before the first stylesheet (guide §13.3). With
+ * `themes` including `"dark"`: the guide's script, which reads `APPEARANCE_STORAGE_KEY` inside
+ * `try`/`catch`, writes `data-cd-theme`, `color-scheme` and both `theme-color` metas for a fixed
+ * choice and sets `data-cd-kontrast="hoch"` under `(prefers-contrast: more)`. Light-only: the
+ * contrast line alone. Plain ES5 without the modeler's bundle, so it runs before the first paint.
+ */
+export function webModeScript(options: WebModeScriptOptions): string {
+  const contrast = [
+    `if (window.matchMedia && window.matchMedia(${scriptString("(prefers-contrast: more)")}).matches)`,
+    `  document.documentElement.setAttribute("data-cd-kontrast", "hoch");`,
+  ];
+  if (!options.themes.includes("dark")) return contrast.join("\n");
+  const { light, dark } = options.themeColors;
+  return [
+    "(function () {",
+    "  var html = document.documentElement;",
+    "  var choice = null;",
+    "  try {",
+    `    choice = window.localStorage.getItem(${scriptString(APPEARANCE_STORAGE_KEY)});`,
+    "  } catch (error) {}",
+    `  if (choice === "light" || choice === "dark") {`,
+    `    var color = choice === "dark" ? ${scriptString(dark)} : ${scriptString(light)};`,
+    `    html.setAttribute("data-cd-theme", choice);`,
+    `    var scheme = document.querySelector("meta[name=color-scheme]");`,
+    `    if (scheme) scheme.setAttribute("content", choice);`,
+    `    var metas = document.querySelectorAll("meta[name=theme-color]");`,
+    `    for (var index = 0; index < metas.length; index++) metas[index].setAttribute("content", color);`,
+    "  }",
+    ...contrast.map((line) => `  ${line}`),
+    "})();",
+  ].join("\n");
+}
+
+// The script sits inline in <head>: "<" never appears in a literal, so a value cannot end the
+// element ("</script>"), and U+2028/U+2029 are escaped because ES5 forbids them in string literals.
+function scriptString(value: string): string {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+}
+
+/**
+ * The `<head>` markup the web app's `index.html` carries for its mode, as one string (for a Vite
+ * `transformIndexHtml` hook or to paste): dark-capable `<meta name="color-scheme" content="light
+ * dark">`, two `theme-color` metas with `media` and the script; light-only one `theme-color`
+ * without `media` and the contrast script. `<html>` itself carries `lang` and
+ * `data-cd-theme="<documentMode("system", themes, colors).theme>"` statically.
+ */
+export function webHeadMarkup(options: WebModeScriptOptions): string {
+  const mode = documentMode("system", options.themes, options.themeColors);
+  const script = `<script>\n${webModeScript(options)}\n</script>`;
+  if (mode.theme !== "system") {
+    return [`<meta name="theme-color" content="${escapeAttribute(mode.themeColor.light)}">`, script].join(
+      "\n",
+    );
+  }
+  return [
+    `<meta name="color-scheme" content="${escapeAttribute(mode.colorScheme)}">`,
+    `<meta name="theme-color" content="${escapeAttribute(mode.themeColor.light)}" media="(prefers-color-scheme: light)">`,
+    `<meta name="theme-color" content="${escapeAttribute(mode.themeColor.dark)}" media="(prefers-color-scheme: dark)">`,
+    script,
+  ].join("\n");
+}
+
+function escapeAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}

package/src/core/feedback/problems.ts

@@ -0,0 +1,23 @@
+/** The severity of one problem; the pill and the list show `circle-x` or `triangle-alert` (guide §5.10). */
+export type ProblemSeverity = "error" | "warning";
+
+/** One row of the web app's problems list (guide §5.10). */
+export interface ProblemItem {
+  severity: ProblemSeverity;
+  /** 13px `--cd-ui-text`: "Unknown sticky type “evnt”." */
+  message: string;
+  /** The place in 13px `--cd-ui-text-leise` below the message: "Line 12", "“Order Placed”". */
+  location?: string | undefined;
+  /** The diagram element a click on the row selects (`ProblemsOptions.onSelectItem`). */
+  elementId?: string | undefined;
+}
+
+/** `ShellHandle.setProblems` input built from the items: count, errors and the items themselves. */
+export function problemSummary(items: readonly ProblemItem[]): {
+  count: number;
+  errors: number;
+  items: readonly ProblemItem[];
+} {
+  const errors = items.filter((item) => item.severity === "error").length;
+  return { count: items.length, errors, items };
+}

package/src/core/feedback/toasts.ts

@@ -0,0 +1,118 @@
+import { SHELL } from "../sizes.js";
+
+/** The statuses of guide §3.3 and §9; each colours bar and dot through `--cd-ui-<status>`. */
+export type ToastStatus = "success" | "info" | "warning" | "danger";
+
+/** A ghost button before Close (guide §8); the toast then never closes by itself. */
+export interface ToastAction {
+  label: string;
+  /** Runs after the toast closed. */
+  onSelect(): void;
+}
+
+export interface ToastRequest {
+  status: ToastStatus;
+  /** What happened and what you can do (guide §2): "Link copied", "Couldn't read this file. …". */
+  text: string;
+  action?: ToastAction | undefined;
+  /** Only to give a long text more time than `TOAST_DURATION_MS`; ignored with an `action`. */
+  durationMs?: number | undefined;
+}
+
+/** At most three toasts at once, the newest at the bottom (guide §8). */
+export const MAX_TOASTS = 3;
+
+/**
+ * How long a toast stays without hover or focus (guide §8: about 2.8 s, errors about 5 s). A
+ * warning asks you to read a sentence and act on it like an error, so it gets the error's 5 s.
+ */
+export const TOAST_DURATION_MS: Readonly<Record<ToastStatus, number>> = {
+  success: 2800,
+  info: 2800,
+  warning: 5000,
+  danger: 5000,
+};
+
+/** The stack's widest toast: `min(480px, 100cqw − 24px)` (guide §8). */
+export const TOAST_MAX_WIDTH = 480;
+
+/**
+ * Milliseconds until the toast closes by itself: `undefined` with an `action` (it never closes by
+ * itself, guide §8), else `max(TOAST_DURATION_MS[status], durationMs ?? 0)`.
+ */
+export function toastLifetime(request: ToastRequest): number | undefined {
+  if (request.action) return undefined;
+  const requested = request.durationMs;
+  // A NaN or an infinite duration would reach setTimeout, which fires at once for both.
+  const longer = requested !== undefined && Number.isFinite(requested) ? requested : 0;
+  return Math.max(TOAST_DURATION_MS[request.status], longer);
+}
+
+/** A toast in the stack as the eviction sees it, oldest first. */
+export interface ToastSlot {
+  id: number;
+  hasAction: boolean;
+  /** Hovered or holding the focus. */
+  engaged: boolean;
+}
+
+/**
+ * Which toast leaves when a fourth arrives (`MAX_TOASTS`): the oldest that is neither engaged nor
+ * has an action, else the oldest that is not engaged, else the oldest. `undefined` while the
+ * stack has room.
+ */
+export function toastToEvict(stack: readonly ToastSlot[]): number | undefined {
+  if (stack.length < MAX_TOASTS) return undefined;
+  const evicted =
+    stack.find((slot) => !slot.engaged && !slot.hasAction) ?? stack.find((slot) => !slot.engaged) ?? stack[0];
+  return evicted?.id;
+}
+
+/** Something in the bottom row the toast stack must clear, relative to the shell root. */
+export interface BottomObstacle {
+  left: number;
+  right: number;
+  /** Distance of its top edge from the container's bottom edge. */
+  top: number;
+}
+
+export interface ToastStackInput {
+  containerWidth: number;
+  /** The visible zoom panel, legal line and problems pill (not the legend card). */
+  obstacles: readonly BottomObstacle[];
+  /**
+   * Measured width of the widest toast in the stack. The cards are sized to their text and centred
+   * in the stack, so only this column can touch an obstacle; absent = the whole `toastStackWidth`.
+   */
+  cardWidth?: number | undefined;
+}
+
+/** `min(TOAST_MAX_WIDTH, containerWidth − 2 · SHELL.edge)`. */
+export function toastStackWidth(containerWidth: number): number {
+  return Math.max(0, Math.min(TOAST_MAX_WIDTH, containerWidth - 2 * SHELL.edge));
+}
+
+/**
+ * The stack's `bottom` in px. Guide §8 anchors it at `bottom: 12px`, centred; where the column of
+ * its widest card (`cardWidth`, at most `toastStackWidth`, centred) comes closer than `SHELL.gap`
+ * horizontally to an obstacle, the stack stands `SHELL.gap` above the highest such obstacle instead
+ * (above the legal line 40, above the zoom panel 60, above a raised zoom panel or the web pill 88).
+ * Guide §8 does not settle this collision of a narrow container; it is the shell's rule until it does.
+ */
+export function toastStackBottom(input: ToastStackInput): number {
+  const stackWidth = toastStackWidth(input.containerWidth);
+  const { cardWidth } = input;
+  const width =
+    cardWidth !== undefined && Number.isFinite(cardWidth)
+      ? Math.min(stackWidth, Math.max(0, cardWidth))
+      : stackWidth;
+  const left = (input.containerWidth - width) / 2;
+  const right = left + width;
+  let highest: number | undefined;
+  for (const obstacle of input.obstacles) {
+    const distance = Math.max(obstacle.left - right, left - obstacle.right);
+    if (distance >= SHELL.gap) continue;
+    highest = highest === undefined ? obstacle.top : Math.max(highest, obstacle.top);
+  }
+  return highest === undefined ? SHELL.edge : Math.max(SHELL.edge, highest + SHELL.gap);
+}

package/src/core/fit.ts

@@ -1,4 +1,5 @@
 import { SHELL } from "./sizes.js";
+import { LEGAL_LINE_HEIGHT, legalLineHeight } from "./web-chrome/bottom-row.js";
 import type { Bounds, Insets, PaletteRow, Point, ScaledViewbox, ShellHost, Size } from "./types.js";
 
 /** Fit never zooms above 100 % (guide §5.9). */
@@ -73,6 +74,17 @@ export interface FitLayout {
   paletteRow: PaletteRow;
   /** The problems pill is shown (only the web app reserves room for it). */
   problemsVisible: boolean;
+  /**
+   * Web app: the zoom panel stands above the legal line (`bottom: 40px`) because the two would
+   * meet in the bottom row of a narrow container (`zoomRowRaised`); the bottom then keeps 92px as
+   * with the pill.
+   */
+  zoomRaised?: boolean | undefined;
+  /**
+   * Web app: the measured height of the legal line (`LEGAL_LINE_HEIGHT`, more where a narrow
+   * container wraps it); the raised bottom row stands on it. Default one line.
+   */
+  legalHeight?: number | undefined;
   /** Rendered width of the open legend; `undefined` when it is closed or the modeler has none. */
   legendWidth?: number | undefined;
   /**
@@ -83,16 +95,19 @@ export interface FitLayout {
 }
 
 /**
- * The fit insets of guide §5.9: top 88 (second row 140), sides 24, bottom 64 (web app with pill 92),
+ * The fit insets of guide §5.9: top 88 (second row 140), sides 24, bottom 64 (web app with pill or
+ * with the zoom panel raised above the legal line 92, plus 20 per extra line of a wrapped legal line),
  * right 324 with an open side inspector, left 12 + legend width + 24 with an open legend above
  * `SHELL.veryNarrow`, bottom = distance to the sheet's top edge + 12 with an open bottom sheet.
  */
 export function fitInsets(layout: FitLayout): Insets {
-  const { container, host, paletteRow, problemsVisible, legendWidth, inspector } = layout;
+  const { container, host, paletteRow, problemsVisible, zoomRaised, legendWidth, inspector } = layout;
+  const raisedBottomRow = host === "web" && (problemsVisible || zoomRaised === true);
+  const wrappedLegalLines = legalLineHeight(layout.legalHeight) - LEGAL_LINE_HEIGHT;
   const insets: Insets = {
     top: paletteRow === "second-row" ? SHELL.fitInsetTopSecondRow : SHELL.fitInsetTop,
     right: SHELL.fitInsetSide,
-    bottom: host === "web" && problemsVisible ? SHELL.fitInsetBottomWeb : SHELL.fitInsetBottom,
+    bottom: raisedBottomRow ? SHELL.fitInsetBottomWeb + wrappedLegalLines : SHELL.fitInsetBottom,
     left: SHELL.fitInsetSide,
   };
 

package/src/core/index.ts

@@ -52,6 +52,7 @@ export {
   TEXT_FIELD_SELECTOR,
   ariaKeyShortcuts,
   ariaKeyShortcutsFromLabel,
+  commandKeyLabel,
   decideKey,
   detectPlatform,
   isUndoRedoKey,
@@ -82,3 +83,45 @@ export {
   legendStartsOpen,
   placeTooltip,
 } from "./layout.js";
+
+// ---- Web host (0.2) ----
+
+export type { PrimaryWidths, TopRow, TopRowInput } from "./web-chrome/top-row.js";
+export { decideTopRow } from "./web-chrome/top-row.js";
+export type { BottomRowInput } from "./web-chrome/bottom-row.js";
+export { LEGAL_LINE_HEIGHT, legalLineHeight, zoomRowRaised } from "./web-chrome/bottom-row.js";
+export type { DragContext, DragItemLike, DragVerdict, DropForbiddenReason } from "./web-chrome/drop.js";
+export { acceptsFile, dragVerdict } from "./web-chrome/drop.js";
+
+export type {
+  BottomObstacle,
+  ToastAction,
+  ToastRequest,
+  ToastSlot,
+  ToastStackInput,
+  ToastStatus,
+} from "./feedback/toasts.js";
+export {
+  MAX_TOASTS,
+  TOAST_DURATION_MS,
+  TOAST_MAX_WIDTH,
+  toastLifetime,
+  toastStackBottom,
+  toastStackWidth,
+  toastToEvict,
+} from "./feedback/toasts.js";
+export type {
+  AppearanceChoice,
+  DocumentMode,
+  ThemeColors,
+  WebModeScriptOptions,
+} from "./feedback/appearance.js";
+export {
+  APPEARANCE_STORAGE_KEY,
+  documentMode,
+  parseAppearanceChoice,
+  webHeadMarkup,
+  webModeScript,
+} from "./feedback/appearance.js";
+export type { ProblemItem, ProblemSeverity } from "./feedback/problems.js";
+export { problemSummary } from "./feedback/problems.js";

package/src/core/keymap.ts

@@ -74,6 +74,11 @@ export interface KeyContext {
   modalOpen: boolean;
   /** `event.defaultPrevented` when the listener ran: the canvas (or the modeler) handled the key. */
   defaultPrevented: boolean;
+  /**
+   * The web app's start screen shows (`setEmptyState(true)`): there is no diagram to zoom, so the
+   * zoom keys and Shift+1 are left to the browser, which zooms the page.
+   */
+  startScreen?: boolean | undefined;
 }
 
 export type KeyAction = ChromeKey | "closeMenu";
@@ -91,6 +96,7 @@ export interface KeyDecision {
  *    or a dialog/popover is open. During IME composition Escape belongs to the IME: no `closeMenu`.
  * 2. Zoom keys: executed and prevented unless composing, in a text field or with a modal dialog;
  *    in the IDE host always stopped, also when not executed (VS Code must never zoom the window).
+ *    Behind the web app's start screen untouched: the browser zooms the page (WCAG 1.4.4).
  * 3. Shift+1: `fit` under the same conditions; otherwise untouched (it types "!").
  * 4. IDE host, text field, undo/redo key: stopped only (the field keeps its native undo).
  * 5. IDE host, `defaultPrevented`: stopped (the canvas handled it; VS Code must not run it again).
@@ -109,6 +115,7 @@ export function decideKey(event: KeyLike, context: KeyContext): KeyDecision {
 
   const chromeKey = matchChromeKey(event);
   if (chromeKey !== undefined) {
+    if (context.startScreen === true && !stop) return { preventDefault: false, stopPropagation: false };
     const blocked = composing || context.inTextField || context.modalOpen;
     if (!blocked) return { action: chromeKey, preventDefault: true, stopPropagation: stop };
     // Blocked zoom keys are still kept from VS Code (it would zoom the window); a blocked Shift+1
@@ -162,6 +169,19 @@ export function shortcutLabel(
   }
 }
 
+/**
+ * The chip of a Cmd/Ctrl key a modeler binds itself (the web app's File entries, guide §5.4): macOS
+ * `⌘O`, elsewhere `Ctrl+O` with the key name of the messages table (`Strg+O`). `key` as printed on
+ * the key cap; pass the result to `FileMenuAction.shortcut` or `MenuActionEntry.shortcut`.
+ */
+export function commandKeyLabel(
+  key: string,
+  platform: Platform,
+  keyNames: Pick<ShellMessages["keyNames"], "ctrl">,
+): string {
+  return platform === "mac" ? `⌘${key}` : `${keyNames.ctrl}+${key}`;
+}
+
 const MAC_SHORTCUT_LABELS: Readonly<Record<ChromeKey, string>> = {
   zoomIn: "⌘+",
   zoomOut: "⌘\u2212",