@miragon/modeler-shell 0.0.0-stage → 0.2.0

package/dist/vscode-webview.cjs

@@ -0,0 +1,3561 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vscode-webview.ts
+var vscode_webview_exports = {};
+__export(vscode_webview_exports, {
+  APPEARANCE_MESSAGE_TYPE: () => APPEARANCE_MESSAGE_TYPE,
+  SHELL_STATE_KEY: () => SHELL_STATE_KEY,
+  appearanceMessage: () => appearanceMessage,
+  applyAppearance: () => applyAppearance,
+  connectAppearance: () => connectAppearance,
+  connectReducedMotion: () => connectReducedMotion,
+  isAppearanceMessage: () => isAppearanceMessage,
+  mountVsCodeShell: () => mountVsCodeShell,
+  persistView: () => persistView,
+  readShellState: () => readShellState,
+  writeShellState: () => writeShellState
+});
+module.exports = __toCommonJS(vscode_webview_exports);
+
+// src/core/sizes.ts
+var SHELL = {
+  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
+};
+
+// src/core/web-chrome/bottom-row.ts
+var LEGAL_LINE_HEIGHT = 20;
+function legalLineHeight(measured) {
+  if (measured === void 0 || !Number.isFinite(measured) || measured <= 0) return LEGAL_LINE_HEIGHT;
+  return Math.max(1, Math.round(measured / LEGAL_LINE_HEIGHT)) * LEGAL_LINE_HEIGHT;
+}
+function zoomRowRaised(input) {
+  const { containerWidth, legalRight, zoomWidth } = input;
+  if (legalRight === void 0 || zoomWidth === void 0) return false;
+  const zoomLeft = containerWidth - SHELL.edge - zoomWidth;
+  return legalRight + SHELL.gap > zoomLeft;
+}
+
+// src/core/fit.ts
+function fitInsets(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 = {
+    top: paletteRow === "second-row" ? SHELL.fitInsetTopSecondRow : SHELL.fitInsetTop,
+    right: SHELL.fitInsetSide,
+    bottom: raisedBottomRow ? SHELL.fitInsetBottomWeb + wrappedLegalLines : SHELL.fitInsetBottom,
+    left: SHELL.fitInsetSide
+  };
+  const bottomSheetOpen = inspector !== void 0 && container.width <= SHELL.narrow;
+  if (inspector !== void 0 && !bottomSheetOpen) {
+    insets.right = SHELL.edge + SHELL.inspectorWidth + SHELL.fitInsetSide;
+  }
+  if (bottomSheetOpen) {
+    insets.bottom = inspector.sheetTop === void 0 ? SHELL.fitInsetBottom : container.height - inspector.sheetTop + SHELL.edge;
+  } else if (legendWidth !== void 0 && legendWidth > 0 && container.width > SHELL.veryNarrow) {
+    insets.left = SHELL.edge + legendWidth + SHELL.fitInsetSide;
+  }
+  return insets;
+}
+var STANDARD_EASING = cubicBezier(0.4, 0, 0.2, 1);
+function cubicBezier(x1, y1, x2, y2) {
+  const polynomial = (first, second) => {
+    const c = 3 * first;
+    const b = 3 * (second - first) - c;
+    const a = 1 - c - b;
+    return {
+      at: (t) => ((a * t + b) * t + c) * t,
+      slope: (t) => (3 * a * t + 2 * b) * t + c
+    };
+  };
+  const curveX = polynomial(x1, x2);
+  const curveY = polynomial(y1, y2);
+  const precision = 1e-7;
+  const parameterFor = (x) => {
+    let t = x;
+    for (let iteration = 0; iteration < 8; iteration++) {
+      const error = curveX.at(t) - x;
+      if (Math.abs(error) < precision) return t;
+      const slope = curveX.slope(t);
+      if (Math.abs(slope) < 1e-6) break;
+      t -= error / slope;
+      if (t < 0 || t > 1) break;
+    }
+    let low = 0;
+    let high = 1;
+    t = x;
+    for (let iteration = 0; iteration < 60; iteration++) {
+      const value = curveX.at(t);
+      if (Math.abs(value - x) < precision) break;
+      if (value < x) low = t;
+      else high = t;
+      t = (low + high) / 2;
+    }
+    return t;
+  };
+  return (progress) => {
+    if (!(progress > 0)) return 0;
+    if (progress >= 1) return 1;
+    return curveY.at(parameterFor(progress));
+  };
+}
+
+// src/core/zoom.ts
+var ZOOM_MIN = 0.2;
+var ZOOM_MAX = 4;
+function canZoomOut(zoom) {
+  return zoom > ZOOM_MIN * 1.001;
+}
+function canZoomIn(zoom) {
+  return zoom < ZOOM_MAX * 0.999;
+}
+function formatPercent(zoom, lang) {
+  return numberFormat(lang, "percent").format(zoom);
+}
+function formatNumber(value, lang) {
+  return numberFormat(lang, "decimal").format(value);
+}
+var FALLBACK_LANG = "en";
+var formats = /* @__PURE__ */ new Map();
+function numberFormat(lang, style) {
+  const key = `${style}|${lang}`;
+  let format = formats.get(key);
+  if (!format) {
+    const options = 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;
+}
+function zoomReadout(zoom, lang, messages) {
+  const text = formatPercent(zoom, lang);
+  return {
+    text,
+    ariaLabel: messages.zoomToActualNow(formatPercent(1, lang), text),
+    canZoomOut: canZoomOut(zoom),
+    canZoomIn: canZoomIn(zoom)
+  };
+}
+
+// src/core/keymap.ts
+function matchChromeKey(event) {
+  if (event.altKey) return void 0;
+  if (isCommand(event)) {
+    if (event.key === "+" || event.key === "=" || event.code === "NumpadAdd") return "zoomIn";
+    if (event.key === "-" || event.key === "_" || event.code === "NumpadSubtract") return "zoomOut";
+    if (event.key === "0" || event.code === "Numpad0") return "zoomToActual";
+    return void 0;
+  }
+  return event.shiftKey && event.code === "Digit1" ? "fit" : void 0;
+}
+function isCommand(event) {
+  return event.metaKey || event.ctrlKey;
+}
+function isUndoRedoKey(event) {
+  if (event.altKey || !isCommand(event)) return false;
+  const letter = undoRedoLetter(event);
+  return letter === "z" || letter === "y" && !event.shiftKey;
+}
+function undoRedoLetter(event) {
+  if (event.key.length === 1 && event.key.charCodeAt(0) < 128) return event.key.toLowerCase();
+  if (event.code === "KeyZ") return "z";
+  if (event.code === "KeyY") return "y";
+  return void 0;
+}
+var TEXT_FIELD_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
+function decideKey(event, context) {
+  const stop = context.host === "ide";
+  const composing = event.isComposing === true;
+  if (event.key === "Escape" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
+    if (context.menuOpen && !composing) {
+      return { action: "closeMenu", preventDefault: true, stopPropagation: stop };
+    }
+    if (context.menuOpen || context.dialogOpen) return { preventDefault: false, stopPropagation: stop };
+  }
+  const chromeKey = matchChromeKey(event);
+  if (chromeKey !== void 0) {
+    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 };
+    return { preventDefault: false, stopPropagation: chromeKey === "fit" ? false : stop };
+  }
+  if (context.inTextField && isUndoRedoKey(event)) return { preventDefault: false, stopPropagation: stop };
+  if (context.defaultPrevented) return { preventDefault: false, stopPropagation: stop };
+  return { preventDefault: false, stopPropagation: false };
+}
+function detectPlatform(navigator) {
+  const platform = navigator?.userAgentData?.platform || navigator?.platform || "";
+  return /mac/i.test(platform) ? "mac" : "other";
+}
+function shortcutLabel(key, platform, keyNames) {
+  if (platform === "mac") return MAC_SHORTCUT_LABELS[key];
+  switch (key) {
+    case "zoomIn":
+      return `${keyNames.ctrl}+${keyNames.plus}`;
+    case "zoomOut":
+      return `${keyNames.ctrl}+${keyNames.minus}`;
+    case "zoomToActual":
+      return `${keyNames.ctrl}+0`;
+    case "fit":
+      return `${keyNames.shift}+1`;
+  }
+}
+var MAC_SHORTCUT_LABELS = {
+  zoomIn: "\u2318+",
+  zoomOut: "\u2318\u2212",
+  zoomToActual: "\u23180",
+  fit: "\u21E71"
+};
+function ariaKeyShortcuts(key, platform) {
+  const command = platform === "mac" ? "Meta" : "Control";
+  switch (key) {
+    case "zoomIn":
+      return `${command}+= ${command}+Plus`;
+    case "zoomOut":
+      return `${command}+-`;
+    case "zoomToActual":
+      return `${command}+0`;
+    case "fit":
+      return "Shift+1";
+  }
+}
+var MAC_MODIFIER_SYMBOLS = {
+  "\u2318": "Meta",
+  "\u21E7": "Shift",
+  "\u2325": "Alt",
+  "\u2303": "Control"
+};
+var MODIFIER_NAMES = {
+  cmd: "Meta",
+  command: "Meta",
+  meta: "Meta",
+  ctrl: "Control",
+  control: "Control",
+  strg: "Control",
+  shift: "Shift",
+  umschalt: "Shift",
+  alt: "Alt",
+  option: "Alt",
+  opt: "Alt"
+};
+var NAMED_KEYS = {
+  esc: "Escape",
+  escape: "Escape",
+  del: "Delete",
+  delete: "Delete",
+  entf: "Delete",
+  backspace: "Backspace",
+  enter: "Enter",
+  return: "Enter",
+  tab: "Tab",
+  space: "Space",
+  home: "Home",
+  end: "End",
+  pageup: "PageUp",
+  pagedown: "PageDown",
+  arrowup: "ArrowUp",
+  arrowdown: "ArrowDown",
+  arrowleft: "ArrowLeft",
+  arrowright: "ArrowRight",
+  "\u2191": "ArrowUp",
+  "\u2193": "ArrowDown",
+  "\u2190": "ArrowLeft",
+  "\u2192": "ArrowRight",
+  plus: "Plus"
+};
+function ariaKeyName(key) {
+  const named = NAMED_KEYS[key.toLowerCase()];
+  if (named) return named;
+  if (/^f\d{1,2}$/i.test(key)) return key.toUpperCase();
+  if (key.length !== 1 || MAC_MODIFIER_SYMBOLS[key]) return void 0;
+  if (key === "+") return "Plus";
+  if (key === " ") return "Space";
+  return key.toUpperCase();
+}
+function ariaKeyShortcutsFromLabel(label) {
+  let rest = label.trim();
+  const modifiers = [];
+  for (let symbol = MAC_MODIFIER_SYMBOLS[rest.charAt(0)]; symbol && rest.length > 1; ) {
+    modifiers.push(symbol);
+    rest = rest.slice(1).trim();
+    symbol = MAC_MODIFIER_SYMBOLS[rest.charAt(0)];
+  }
+  if (!rest || /\s/.test(rest.replace(/\s*\+\s*/g, "+"))) return void 0;
+  const parts = rest.split("+").map((part) => part.trim());
+  let key = parts.pop() ?? "";
+  if (key === "" && parts.at(-1) === "") {
+    parts.pop();
+    key = "+";
+  }
+  for (const part of parts) {
+    const modifier = MODIFIER_NAMES[part.toLowerCase()];
+    if (!modifier) return void 0;
+    modifiers.push(modifier);
+  }
+  const name = ariaKeyName(key);
+  return name ? [...new Set(modifiers), name].join("+") : void 0;
+}
+
+// src/core/appearance.ts
+function resolveAppearance(requested, themes) {
+  const [fallback] = themes;
+  if (fallback === void 0) {
+    throw new Error(
+      "@miragon/modeler-shell: resolveAppearance needs at least one theme the modeler can show"
+    );
+  }
+  const theme = themes.includes(requested.theme) ? requested.theme : fallback;
+  return withKontrast(theme, requested.kontrast);
+}
+function withKontrast(theme, kontrast) {
+  return kontrast === "hoch" ? { theme, kontrast } : { theme };
+}
+function appearanceFromBodyClasses(classes) {
+  const present = new Set(classes);
+  if (present.has("vscode-high-contrast-light")) return { theme: "light", kontrast: "hoch" };
+  if (present.has("vscode-high-contrast")) return { theme: "dark", kontrast: "hoch" };
+  if (present.has("vscode-dark")) return { theme: "dark" };
+  if (present.has("vscode-light")) return { theme: "light" };
+  return void 0;
+}
+function reducedMotionFromBodyClasses(classes) {
+  return new Set(classes).has("vscode-reduce-motion");
+}
+var REDUCED_MOTION_CLASS = "cd-shell-reduce-motion";
+function appearanceAttributes(appearance) {
+  return appearance.kontrast === "hoch" ? { "data-cd-theme": appearance.theme, "data-cd-kontrast": "hoch" } : { "data-cd-theme": appearance.theme };
+}
+
+// src/core/messages.ts
+var defaultMessages = {
+  menu: "Menu",
+  tools: "Tools",
+  canvas: "Diagram",
+  zoom: "Zoom",
+  zoomOut: "Zoom out",
+  zoomIn: "Zoom in",
+  zoomToActual: (percent) => `Zoom to ${percent}`,
+  zoomToActualNow: (percent, now) => `Zoom to ${percent} (now ${now})`,
+  fit: "Fit to view",
+  legend: "Legend",
+  closeLegend: "Close legend",
+  problems: (count, formattedCount) => `${formattedCount} ${count === 1 ? "problem" : "problems"}`,
+  problemsLabel: (count, errors, formattedCount, formattedErrors) => `${formattedCount} ${count === 1 ? "problem" : "problems"}, ${errors === 0 ? "no errors" : `${formattedErrors} ${errors === 1 ? "error" : "errors"}`}`,
+  showProblems: "Show in Problems view",
+  emptyHint: "Pick a tool from the palette to start.",
+  insertExample: "Insert example",
+  invalidFile: (diagram) => `This file isn't a valid ${diagram} right now. The diagram shows the last valid version and is read-only until you fix the text.`,
+  keyNames: { ctrl: "Ctrl", shift: "Shift", plus: "Plus", minus: "Minus" },
+  share: "Share",
+  legal: "Legal",
+  copyright: (year) => `\xA9 ${year} Miragon GmbH`,
+  opensInNewTab: "Opens in a new tab",
+  newDiagram: "New diagram",
+  openFile: "Open\u2026",
+  showExample: "Show example",
+  importFile: "Import\u2026",
+  appearance: "Appearance",
+  appearanceSystem: "System",
+  appearanceLight: "Light",
+  appearanceDark: "Dark",
+  problemsTitle: "Problems",
+  problemSeverity: (severity) => severity === "error" ? "Error" : "Warning",
+  close: "Close",
+  dropFile: "Drop file here",
+  dropForbidden: (reason) => reason === "multiple" ? "Drop one file at a time" : reason === "dialog" ? "Close the dialog to drop a file" : "This modeler can't open this file type",
+  dropHint: "Or drop a file here",
+  openFileLink: "Open a file\u2026",
+  cannotOpenFile: (name, accepted) => `Couldn't open \u201C${name}\u201D. Drop a ${accepted} file.`
+};
+function resolveMessages(overrides) {
+  const { keyNames, ...texts } = overrides ?? {};
+  return {
+    ...defaultMessages,
+    ...definedEntries(texts),
+    keyNames: { ...defaultMessages.keyNames, ...definedEntries(keyNames ?? {}) }
+  };
+}
+function definedEntries(partial) {
+  return Object.fromEntries(Object.entries(partial).filter(([, value]) => value !== void 0));
+}
+
+// src/core/layout.ts
+var PALETTE_CLEARANCE = 16;
+var TOOLTIP_DELAY_MS = 300;
+function decidePaletteRow(input) {
+  const { containerWidth, paletteWidth, menuRight, primaryLeft } = input;
+  if (containerWidth <= SHELL.narrow) return "second-row";
+  const paletteLeft = (containerWidth - paletteWidth) / 2;
+  const paletteRight = (containerWidth + paletteWidth) / 2;
+  if (paletteLeft < menuRight + PALETTE_CLEARANCE) return "second-row";
+  if (primaryLeft !== void 0 && paletteRight > primaryLeft - PALETTE_CLEARANCE) return "second-row";
+  return "top";
+}
+function legendStartsOpen(containerHeight) {
+  return containerHeight > SHELL.low;
+}
+function placeTooltip(input) {
+  const { anchor, island, tooltip, container } = input;
+  const inUpperHalf = island.y + island.height / 2 < container.height / 2;
+  const y = inUpperHalf ? island.y + island.height + SHELL.gap : island.y - SHELL.gap - tooltip.height;
+  const centred = anchor.x + anchor.width / 2 - tooltip.width / 2;
+  const rightmost = container.width - SHELL.edge - tooltip.width;
+  const x = Math.max(SHELL.edge, Math.min(centred, rightmost));
+  return { x, y };
+}
+
+// src/core/web-chrome/top-row.ts
+function decideTopRow(input) {
+  const { containerWidth, paletteWidth, menuRight, primary } = input;
+  if (!primary) {
+    return {
+      paletteRow: decidePaletteRow({ containerWidth, paletteWidth, menuRight }),
+      primaryLabel: "shown"
+    };
+  }
+  const paletteRowBeside = (primaryWidth) => 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"
+  };
+}
+
+// src/core/web-chrome/drop.ts
+function acceptEntries(accept) {
+  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, mimeTypes) {
+  const normalized = type.trim().toLowerCase();
+  if (normalized === "") return false;
+  return mimeTypes.some(
+    (entry) => entry.endsWith("/*") ? normalized.startsWith(entry.slice(0, -1)) : normalized === entry
+  );
+}
+function dragVerdict(items, context) {
+  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) => item.type.trim() !== "" && !matchesMimeType(item.type, mimeTypes);
+  if (mimeTypes.length > 0 && files.every(foreignType)) return { state: "forbidden", reason: "type" };
+  return { state: "over" };
+}
+function acceptsFile(file, accept) {
+  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);
+}
+
+// src/core/feedback/toasts.ts
+var MAX_TOASTS = 3;
+var TOAST_DURATION_MS = {
+  success: 2800,
+  info: 2800,
+  warning: 5e3,
+  danger: 5e3
+};
+var TOAST_MAX_WIDTH = 480;
+function toastLifetime(request) {
+  if (request.action) return void 0;
+  const requested = request.durationMs;
+  const longer = requested !== void 0 && Number.isFinite(requested) ? requested : 0;
+  return Math.max(TOAST_DURATION_MS[request.status], longer);
+}
+function toastToEvict(stack) {
+  if (stack.length < MAX_TOASTS) return void 0;
+  const evicted = stack.find((slot) => !slot.engaged && !slot.hasAction) ?? stack.find((slot) => !slot.engaged) ?? stack[0];
+  return evicted?.id;
+}
+function toastStackWidth(containerWidth) {
+  return Math.max(0, Math.min(TOAST_MAX_WIDTH, containerWidth - 2 * SHELL.edge));
+}
+function toastStackBottom(input) {
+  const stackWidth = toastStackWidth(input.containerWidth);
+  const { cardWidth } = input;
+  const width = cardWidth !== void 0 && Number.isFinite(cardWidth) ? Math.min(stackWidth, Math.max(0, cardWidth)) : stackWidth;
+  const left = (input.containerWidth - width) / 2;
+  const right = left + width;
+  let highest;
+  for (const obstacle of input.obstacles) {
+    const distance = Math.max(obstacle.left - right, left - obstacle.right);
+    if (distance >= SHELL.gap) continue;
+    highest = highest === void 0 ? obstacle.top : Math.max(highest, obstacle.top);
+  }
+  return highest === void 0 ? SHELL.edge : Math.max(SHELL.edge, highest + SHELL.gap);
+}
+
+// src/core/feedback/appearance.ts
+var APPEARANCE_STORAGE_KEY = "miragon.darstellung";
+function parseAppearanceChoice(stored) {
+  return stored === "light" || stored === "dark" ? stored : "system";
+}
+function documentMode(choice, themes, colors) {
+  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, color) {
+  return { theme, colorScheme: theme, themeColor: { light: color, dark: color } };
+}
+
+// src/vscode/protocol.ts
+var APPEARANCE_MESSAGE_TYPE = "modelerShell.appearance";
+function appearanceMessage(appearance) {
+  return {
+    type: APPEARANCE_MESSAGE_TYPE,
+    appearance: appearance.kontrast ? { theme: appearance.theme, kontrast: appearance.kontrast } : { theme: appearance.theme }
+  };
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isAppearanceMessage(value) {
+  if (!isRecord(value) || value.type !== APPEARANCE_MESSAGE_TYPE || !isRecord(value.appearance)) return false;
+  const { theme, kontrast } = value.appearance;
+  return (theme === "light" || theme === "dark") && (kontrast === void 0 || kontrast === "hoch");
+}
+
+// src/vscode/webview/appearance.ts
+var NO_TRANSITION_CLASS = "cd-shell-no-transition";
+var latestSwitch = /* @__PURE__ */ new WeakMap();
+function showsAppearance(element, appearance) {
+  const attributes = appearanceAttributes(appearance);
+  return element.getAttribute("data-cd-theme") === attributes["data-cd-theme"] && element.getAttribute("data-cd-kontrast") === (attributes["data-cd-kontrast"] ?? null);
+}
+function applyAppearance(appearance, element) {
+  const target = element ?? document.documentElement;
+  const html = target.ownerDocument.documentElement;
+  const attributes = appearanceAttributes(appearance);
+  const kontrast = attributes["data-cd-kontrast"];
+  const switchId = (latestSwitch.get(html) ?? 0) + 1;
+  latestSwitch.set(html, switchId);
+  html.classList.add(NO_TRANSITION_CLASS);
+  target.setAttribute("data-cd-theme", attributes["data-cd-theme"]);
+  if (kontrast) target.setAttribute("data-cd-kontrast", kontrast);
+  else target.removeAttribute("data-cd-kontrast");
+  requestAnimationFrame(
+    () => requestAnimationFrame(() => {
+      if (latestSwitch.get(html) !== switchId) return;
+      latestSwitch.delete(html);
+      html.classList.remove(NO_TRANSITION_CLASS);
+    })
+  );
+}
+function connectAppearance(options) {
+  const { themes } = options;
+  if (themes.length === 0) {
+    throw new Error("@miragon/modeler-shell: connectAppearance needs at least one theme");
+  }
+  const html = document.documentElement;
+  const show = (requested) => {
+    const resolved = resolveAppearance(requested, themes);
+    if (!showsAppearance(html, resolved)) applyAppearance(resolved, html);
+  };
+  let fallbackActive = !html.hasAttribute("data-cd-theme");
+  const applyBodyClasses = () => {
+    if (!fallbackActive || !document.body) return;
+    const requested = appearanceFromBodyClasses(document.body.classList);
+    if (requested) show(requested);
+  };
+  const observer = new MutationObserver(applyBodyClasses);
+  const startFallback = () => {
+    if (!fallbackActive || !document.body) return;
+    observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+    applyBodyClasses();
+  };
+  const stopFallback = () => {
+    if (!fallbackActive) return;
+    fallbackActive = false;
+    observer.disconnect();
+    document.removeEventListener("DOMContentLoaded", startFallback);
+  };
+  const onMessage = (event) => {
+    if (!isAppearanceMessage(event.data)) return;
+    stopFallback();
+    show(event.data.appearance);
+  };
+  window.addEventListener("message", onMessage);
+  if (document.body) startFallback();
+  else if (fallbackActive) document.addEventListener("DOMContentLoaded", startFallback, { once: true });
+  return () => {
+    window.removeEventListener("message", onMessage);
+    fallbackActive = false;
+    observer.disconnect();
+    document.removeEventListener("DOMContentLoaded", startFallback);
+  };
+}
+function connectReducedMotion() {
+  const html = document.documentElement;
+  const apply = () => {
+    if (document.body)
+      html.classList.toggle(REDUCED_MOTION_CLASS, reducedMotionFromBodyClasses(document.body.classList));
+  };
+  const observer = new MutationObserver(apply);
+  const start = () => {
+    if (!document.body) return;
+    observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+    apply();
+  };
+  if (document.body) start();
+  else document.addEventListener("DOMContentLoaded", start, { once: true });
+  return () => {
+    observer.disconnect();
+    document.removeEventListener("DOMContentLoaded", start);
+    html.classList.remove(REDUCED_MOTION_CLASS);
+  };
+}
+
+// src/dom/element.ts
+function createElement(ownerDocument, tag, attributes = {}, ...children) {
+  const element = ownerDocument.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value !== void 0) element.setAttribute(name, value);
+  }
+  for (const child of children) {
+    if (child === void 0 || child === null || child === false) continue;
+    element.append(child);
+  }
+  return element;
+}
+function toggleAttribute(element, name, value) {
+  if (value === null || value === false) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+}
+function boxRelativeTo(element, root) {
+  const box = element.getBoundingClientRect();
+  const origin = root.getBoundingClientRect();
+  return {
+    x: box.left - origin.left - root.clientLeft,
+    y: box.top - origin.top - root.clientTop,
+    width: box.width,
+    height: box.height
+  };
+}
+function accessibleName(control) {
+  return (control.getAttribute("aria-label") ?? control.textContent ?? "").trim();
+}
+function hasVisibleFocus(element) {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+
+// src/dom/feedback/appearance.ts
+var NO_TRANSITION_CLASS2 = "cd-shell-no-transition";
+var CONTRAST_QUERY = "(prefers-contrast: more)";
+var SCHEME_MEDIA = {
+  light: "(prefers-color-scheme: light)",
+  dark: "(prefers-color-scheme: dark)"
+};
+function onMediaChange(query, listener) {
+  if (typeof query.addEventListener === "function") {
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+  }
+  query.addListener(listener);
+  return () => query.removeListener(listener);
+}
+function connectWebAppearance(context) {
+  const { ownerDocument, themes, options } = context;
+  const darkCapable = themes.includes("dark");
+  if (darkCapable && !options) {
+    throw new Error(
+      '@miragon/modeler-shell: a web modeler whose themes include "dark" needs the appearance option ({ themeColors } from its vendored cd-tokens.generated.json)'
+    );
+  }
+  const html = ownerDocument.documentElement;
+  const view = ownerDocument.defaultView;
+  const cleanups = [];
+  const contrast = typeof view?.matchMedia === "function" ? view.matchMedia(CONTRAST_QUERY) : void 0;
+  if (contrast) {
+    const mirrorContrast = () => toggleAttribute(html, "data-cd-kontrast", contrast.matches && "hoch");
+    mirrorContrast();
+    cleanups.push(onMediaChange(contrast, mirrorContrast));
+  }
+  function destroy() {
+    for (const cleanup of cleanups.splice(0)) cleanup();
+  }
+  if (!darkCapable || !options) {
+    return { choice: () => "system", setChoice() {
+    }, destroy };
+  }
+  const { themeColors } = options;
+  function storage() {
+    if (options?.storage) return options.storage;
+    try {
+      return globalThis.localStorage;
+    } catch {
+      return void 0;
+    }
+  }
+  function readStored() {
+    try {
+      return parseAppearanceChoice(storage()?.getItem(APPEARANCE_STORAGE_KEY));
+    } catch {
+      return "system";
+    }
+  }
+  function store(choice) {
+    try {
+      const target = storage();
+      if (choice === "system") target?.removeItem(APPEARANCE_STORAGE_KEY);
+      else target?.setItem(APPEARANCE_STORAGE_KEY, choice);
+    } catch {
+    }
+  }
+  function nextFrame(callback) {
+    if (view && typeof view.requestAnimationFrame === "function") {
+      const frame = view.requestAnimationFrame(() => callback());
+      return () => view.cancelAnimationFrame(frame);
+    }
+    const timer = setTimeout(callback, 16);
+    return () => clearTimeout(timer);
+  }
+  let cancelTransitionFrame;
+  function allowTransitions() {
+    cancelTransitionFrame?.();
+    cancelTransitionFrame = void 0;
+    html.classList.remove(NO_TRANSITION_CLASS2);
+  }
+  cleanups.push(() => {
+    if (cancelTransitionFrame) allowTransitions();
+  });
+  function suspendTransitions() {
+    cancelTransitionFrame?.();
+    html.classList.add(NO_TRANSITION_CLASS2);
+    cancelTransitionFrame = nextFrame(() => {
+      cancelTransitionFrame = nextFrame(allowTransitions);
+    });
+  }
+  function metaFor(name, media) {
+    const normalize = (value) => (value ?? "").replace(/\s+/g, "").toLowerCase();
+    const existing = [...ownerDocument.querySelectorAll(`meta[name="${name}"]`)].find(
+      (meta) => media === void 0 ? true : normalize(meta.getAttribute("media")) === normalize(media)
+    );
+    if (existing) return existing;
+    const created = createElement(ownerDocument, "meta", { name, media });
+    (ownerDocument.head ?? html).append(created);
+    return created;
+  }
+  function apply(choice) {
+    const mode = documentMode(choice, themes, themeColors);
+    suspendTransitions();
+    html.setAttribute("data-cd-theme", mode.theme);
+    metaFor("color-scheme").setAttribute("content", mode.colorScheme);
+    metaFor("theme-color", SCHEME_MEDIA.light).setAttribute("content", mode.themeColor.light);
+    metaFor("theme-color", SCHEME_MEDIA.dark).setAttribute("content", mode.themeColor.dark);
+  }
+  let current = readStored();
+  const onStorage = (event) => {
+    if (event.key !== null && event.key !== APPEARANCE_STORAGE_KEY) return;
+    const next = event.key === null ? "system" : parseAppearanceChoice(event.newValue);
+    if (next === current) return;
+    current = next;
+    apply(next);
+  };
+  if (view) {
+    view.addEventListener("storage", onStorage);
+    cleanups.push(() => view.removeEventListener("storage", onStorage));
+  }
+  return {
+    choice: () => current,
+    setChoice(choice) {
+      const next = parseAppearanceChoice(choice);
+      current = next;
+      store(next);
+      apply(next);
+    },
+    destroy
+  };
+}
+
+// src/dom/icons.ts
+var ICONS = {
+  menu: [
+    ["path", { d: "M4 5h16" }],
+    ["path", { d: "M4 12h16" }],
+    ["path", { d: "M4 19h16" }]
+  ],
+  minus: [["path", { d: "M5 12h14" }]],
+  plus: [
+    ["path", { d: "M5 12h14" }],
+    ["path", { d: "M12 5v14" }]
+  ],
+  maximize: [
+    ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }],
+    ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }],
+    ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }],
+    ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" }]
+  ],
+  check: [["path", { d: "M20 6 9 17l-5-5" }]],
+  x: [
+    ["path", { d: "M18 6 6 18" }],
+    ["path", { d: "m6 6 12 12" }]
+  ],
+  "file-plus": [
+    [
+      "path",
+      {
+        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+      }
+    ],
+    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }],
+    ["path", { d: "M9 15h6" }],
+    ["path", { d: "M12 18v-6" }]
+  ],
+  "folder-open": [
+    [
+      "path",
+      {
+        d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+      }
+    ]
+  ],
+  import: [
+    ["path", { d: "M12 3v12" }],
+    ["path", { d: "m8 11 4 4 4-4" }],
+    ["path", { d: "M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" }]
+  ],
+  "file-image": [
+    [
+      "path",
+      {
+        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+      }
+    ],
+    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }],
+    ["circle", { cx: "10", cy: "12", r: "2" }],
+    ["path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" }]
+  ],
+  "file-code-corner": [
+    [
+      "path",
+      {
+        d: "M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35"
+      }
+    ],
+    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }],
+    ["path", { d: "m5 16-3 3 3 3" }],
+    ["path", { d: "m9 22 3-3-3-3" }]
+  ],
+  keyboard: [
+    ["path", { d: "M10 8h.01" }],
+    ["path", { d: "M12 12h.01" }],
+    ["path", { d: "M14 8h.01" }],
+    ["path", { d: "M16 12h.01" }],
+    ["path", { d: "M18 8h.01" }],
+    ["path", { d: "M6 8h.01" }],
+    ["path", { d: "M7 16h10" }],
+    ["path", { d: "M8 12h.01" }],
+    ["rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }]
+  ],
+  "share-2": [
+    ["circle", { cx: "18", cy: "5", r: "3" }],
+    ["circle", { cx: "6", cy: "12", r: "3" }],
+    ["circle", { cx: "18", cy: "19", r: "3" }],
+    ["line", { x1: "8.59", x2: "15.42", y1: "13.51", y2: "17.49" }],
+    ["line", { x1: "15.41", x2: "8.59", y1: "6.51", y2: "10.49" }]
+  ],
+  "circle-x": [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["path", { d: "m15 9-6 6" }],
+    ["path", { d: "m9 9 6 6" }]
+  ],
+  "triangle-alert": [
+    ["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }],
+    ["path", { d: "M12 9v4" }],
+    ["path", { d: "M12 17h.01" }]
+  ],
+  "square-dashed-mouse-pointer": [
+    [
+      "path",
+      {
+        d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"
+      }
+    ],
+    ["path", { d: "M5 3a2 2 0 0 0-2 2" }],
+    ["path", { d: "M19 3a2 2 0 0 1 2 2" }],
+    ["path", { d: "M5 21a2 2 0 0 1-2-2" }],
+    ["path", { d: "M9 3h1" }],
+    ["path", { d: "M9 21h2" }],
+    ["path", { d: "M14 3h1" }],
+    ["path", { d: "M3 9v1" }],
+    ["path", { d: "M21 9v2" }],
+    ["path", { d: "M3 14v1" }]
+  ],
+  hand: [
+    ["path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }],
+    ["path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }],
+    ["path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }],
+    [
+      "path",
+      {
+        d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"
+      }
+    ]
+  ],
+  "line-segment": [
+    ["circle", { cx: "19", cy: "5", r: "2" }],
+    ["circle", { cx: "5", cy: "19", r: "2" }],
+    ["path", { d: "M6.5 17.5 17.5 6.5" }]
+  ],
+  "unfold-horizontal": [
+    ["path", { d: "M16 12h6" }],
+    ["path", { d: "M8 12H2" }],
+    ["path", { d: "M12 2v2" }],
+    ["path", { d: "M12 8v2" }],
+    ["path", { d: "M12 14v2" }],
+    ["path", { d: "M12 20v2" }],
+    ["path", { d: "m19 15 3-3-3-3" }],
+    ["path", { d: "m5 9-3 3 3 3" }]
+  ],
+  workflow: [
+    ["rect", { width: "8", height: "8", x: "3", y: "3", rx: "2" }],
+    ["path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }],
+    ["rect", { width: "8", height: "8", x: "13", y: "13", rx: "2" }]
+  ]
+};
+var DEFAULT_SIZE = 16;
+var DEFAULT_STROKE_WIDTH = 2.5;
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var ICON_ELEMENTS = /* @__PURE__ */ new Set([
+  "path",
+  "circle",
+  "ellipse",
+  "line",
+  "polyline",
+  "polygon",
+  "rect"
+]);
+var GEOMETRY_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "d",
+  "cx",
+  "cy",
+  "r",
+  "rx",
+  "ry",
+  "x",
+  "y",
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "width",
+  "height",
+  "points"
+]);
+function positiveOr(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function iconNodeOf(icon) {
+  if (typeof icon !== "string") return icon;
+  return Object.prototype.hasOwnProperty.call(ICONS, icon) ? ICONS[icon] : [];
+}
+function sanitize(icon, options = {}) {
+  const size = String(positiveOr(options.size, DEFAULT_SIZE));
+  const root = [];
+  if (options.className) root.push(["class", options.className]);
+  root.push(
+    ["width", size],
+    ["height", size],
+    ["viewBox", "0 0 24 24"],
+    ["fill", "none"],
+    ["stroke", "currentColor"],
+    ["stroke-width", String(positiveOr(options.strokeWidth, DEFAULT_STROKE_WIDTH))],
+    ["stroke-linecap", "round"],
+    ["stroke-linejoin", "round"],
+    ["aria-hidden", "true"],
+    ["focusable", "false"]
+  );
+  const children = [];
+  for (const node of iconNodeOf(icon)) {
+    const [tag, attributes] = node;
+    if (!ICON_ELEMENTS.has(tag)) continue;
+    const kept = Object.entries(attributes).filter(([name]) => GEOMETRY_ATTRIBUTES.has(name)).map(([name, value]) => [name, String(value)]);
+    children.push([tag, kept]);
+  }
+  return { root, children };
+}
+function iconElement(icon, options) {
+  const { root, children } = sanitize(icon, options);
+  const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+  for (const [name, value] of root) svg.setAttribute(name, value);
+  for (const [tag, attributes] of children) {
+    const child = document.createElementNS(SVG_NAMESPACE, tag);
+    for (const [name, value] of attributes) child.setAttribute(name, value);
+    svg.append(child);
+  }
+  return svg;
+}
+
+// src/dom/feedback/problems-popover.ts
+var PILL_ATTRIBUTES = ["aria-haspopup", "aria-expanded", "aria-controls"];
+function isPrintable(event) {
+  return event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function createProblemsPopover(context) {
+  const { ownerDocument, root, layer, pill, id, titleId, messages } = context;
+  const view = ownerDocument.defaultView;
+  const list = createElement(ownerDocument, "ul", { class: "cd-shell-problems-list", role: "list" });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    {
+      class: "cd-shell-problems-popover",
+      "data-chrome": "problems-popover",
+      role: "dialog",
+      id,
+      "aria-labelledby": titleId,
+      tabindex: "-1"
+    },
+    createElement(
+      ownerDocument,
+      "h2",
+      { class: "cd-shell-problems-popover-title", id: titleId },
+      messages.problemsTitle
+    ),
+    list
+  );
+  element.hidden = true;
+  layer.append(element);
+  pill.setAttribute("aria-haspopup", "dialog");
+  pill.setAttribute("aria-expanded", "false");
+  pill.setAttribute("aria-controls", id);
+  let items = [];
+  let rows = [];
+  let destroyed = false;
+  const isOpen = () => !element.hidden;
+  function keyOf(item) {
+    return `${item.elementId ?? ""}\0${item.severity}\0${item.message}`;
+  }
+  function rowElement(item) {
+    const severity = item.severity === "error" ? "error" : "warning";
+    const parts = [
+      // The shape and colour of the icon carry the severity on screen, its name for screen readers.
+      createElement(
+        ownerDocument,
+        "span",
+        { class: "cd-shell-problem-icon", role: "img", "aria-label": messages.problemSeverity(severity) },
+        iconElement(severity === "error" ? "circle-x" : "triangle-alert")
+      ),
+      createElement(ownerDocument, "span", { class: "cd-shell-problem-message" }, item.message),
+      item.location ? createElement(ownerDocument, "span", { class: "cd-shell-problem-location" }, item.location) : void 0
+    ];
+    const attributes = { class: "cd-shell-problem", "data-severity": severity };
+    if (!item.elementId) {
+      const text = createElement(ownerDocument, "div", { ...attributes, tabindex: "-1" }, ...parts);
+      rows.push({ key: keyOf(item), element: text });
+      return text;
+    }
+    const button = createElement(ownerDocument, "button", { type: "button", ...attributes }, ...parts);
+    button.addEventListener("click", () => select(item));
+    rows.push({ key: keyOf(item), element: button });
+    return button;
+  }
+  function focusedRowIndex() {
+    return rows.findIndex((row) => row.element === ownerDocument.activeElement);
+  }
+  function render() {
+    const focusedIndex = focusedRowIndex();
+    const focusedKey = rows[focusedIndex]?.key;
+    rows = [];
+    list.replaceChildren(...items.map((item) => createElement(ownerDocument, "li", {}, rowElement(item))));
+    if (focusedKey === void 0 || !isOpen()) return;
+    const kept = rows.find((row) => row.key === focusedKey) ?? rows[Math.min(focusedIndex, rows.length - 1)];
+    if (kept) focusRowElement(kept.element);
+    else element.focus({ preventScroll: true });
+  }
+  function revealInList(row) {
+    const rowBox = row.getBoundingClientRect();
+    const listBox = list.getBoundingClientRect();
+    if (rowBox.top < listBox.top) list.scrollTop -= listBox.top - rowBox.top;
+    else if (rowBox.bottom > listBox.bottom) list.scrollTop += rowBox.bottom - listBox.bottom;
+  }
+  function focusRowElement(row) {
+    row.focus({ preventScroll: true });
+    revealInList(row);
+  }
+  function focusCanvas() {
+    const canvas = root.querySelector(".cd-shell-canvas svg[tabindex]");
+    canvas?.focus({ preventScroll: true });
+    if ((!canvas || ownerDocument.activeElement !== canvas) && !pill.hidden)
+      pill.focus({ preventScroll: true });
+  }
+  function select(item) {
+    close();
+    focusCanvas();
+    context.onSelectItem?.(item);
+  }
+  function focusRow(index) {
+    if (rows.length === 0) return;
+    const row = rows[(index + rows.length) % rows.length];
+    if (row) focusRowElement(row.element);
+  }
+  const onOutsidePointerDown = (event) => {
+    const target = event.target;
+    if (target && (element.contains(target) || pill.contains(target))) return;
+    close();
+  };
+  const onWindowBlur = () => close();
+  function open() {
+    if (destroyed || isOpen()) return;
+    element.hidden = false;
+    pill.setAttribute("aria-expanded", "true");
+    ownerDocument.addEventListener("pointerdown", onOutsidePointerDown, true);
+    view?.addEventListener("blur", onWindowBlur);
+    list.scrollTop = 0;
+    const first = rows[0];
+    if (first) focusRowElement(first.element);
+    else element.focus({ preventScroll: true });
+  }
+  function close(options = {}) {
+    if (!isOpen()) return;
+    element.hidden = true;
+    pill.setAttribute("aria-expanded", "false");
+    ownerDocument.removeEventListener("pointerdown", onOutsidePointerDown, true);
+    view?.removeEventListener("blur", onWindowBlur);
+    if (options.restoreFocus && !pill.hidden) pill.focus({ preventScroll: true });
+  }
+  function consume(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  element.addEventListener("keydown", (event) => {
+    if (matchChromeKey(event)) return;
+    const index = focusedRowIndex();
+    switch (event.key) {
+      case "Escape":
+        consume(event);
+        close({ restoreFocus: true });
+        return;
+      case "Tab": {
+        const first = index <= 0;
+        const last = rows.length === 0 || index === rows.length - 1;
+        if (event.shiftKey && first) {
+          consume(event);
+          close({ restoreFocus: true });
+        } else if (!event.shiftKey && last) {
+          event.stopPropagation();
+          close({ restoreFocus: true });
+        }
+        return;
+      }
+      case "ArrowDown":
+        focusRow(index + 1);
+        break;
+      case "ArrowUp":
+        focusRow(index < 0 ? rows.length - 1 : index - 1);
+        break;
+      case "Home":
+        focusRow(0);
+        break;
+      case "End":
+        focusRow(rows.length - 1);
+        break;
+      case "Enter":
+      case " ":
+      case "Delete":
+      case "Backspace":
+        event.stopPropagation();
+        return;
+      default:
+        if (isPrintable(event)) event.stopPropagation();
+        return;
+    }
+    consume(event);
+  });
+  return {
+    element,
+    isOpen,
+    toggle() {
+      if (isOpen()) close({ restoreFocus: true });
+      else open();
+    },
+    open,
+    close,
+    setItems(next) {
+      items = next;
+      if (!destroyed) render();
+    },
+    destroy() {
+      if (destroyed) return;
+      close();
+      destroyed = true;
+      for (const name of PILL_ATTRIBUTES) pill.removeAttribute(name);
+      element.remove();
+    }
+  };
+}
+
+// src/dom/feedback/toasts.ts
+var TOAST_RESUME_MIN_MS = 1500;
+var TOAST_LEAVE_FALLBACK_MS = 400;
+var LEAVE_ANIMATION = "cd-shell-toast-out";
+var TOAST_ANNOUNCE_DELAY_MS = 100;
+var INERT_HANDLE = Object.freeze({ dismiss() {
+} });
+function createToaster(context) {
+  const { ownerDocument, messages } = context;
+  const web = context.host === "web";
+  const element = createElement(ownerDocument, "div", {
+    class: "cd-shell-toasts",
+    "data-chrome": "toasts",
+    popover: web ? "manual" : void 0
+  });
+  const liveRegion = (politeness) => createElement(ownerDocument, "div", {
+    class: "cd-shell-live-region",
+    "data-live": politeness,
+    role: politeness === "polite" ? "status" : "alert",
+    "aria-live": politeness,
+    "aria-atomic": "true"
+  });
+  const politeRegion = liveRegion("polite");
+  const assertiveRegion = liveRegion("assertive");
+  const announcer = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-live" },
+    politeRegion,
+    assertiveRegion
+  );
+  const live = [];
+  const leaveTimers = /* @__PURE__ */ new Set();
+  const announceTimers = /* @__PURE__ */ new Map();
+  let lastId = 0;
+  let destroyed = false;
+  function regionFor(request) {
+    return request.status === "danger" ? assertiveRegion : politeRegion;
+  }
+  function announce(request) {
+    const region = regionFor(request);
+    clearTimeout(announceTimers.get(region));
+    region.textContent = "";
+    announceTimers.set(
+      region,
+      setTimeout(() => {
+        announceTimers.delete(region);
+        if (!destroyed) region.textContent = request.text;
+      }, TOAST_ANNOUNCE_DELAY_MS)
+    );
+  }
+  function silence(request) {
+    const region = regionFor(request);
+    if (region.textContent === request.text) region.textContent = "";
+  }
+  function changed() {
+    if (!destroyed) context.onChange?.();
+  }
+  function supportsPopover() {
+    return web && typeof element.showPopover === "function" && typeof element.hidePopover === "function";
+  }
+  function popoverOpen() {
+    try {
+      return element.matches(":popover-open");
+    } catch {
+      return false;
+    }
+  }
+  function modalOpen() {
+    try {
+      return ownerDocument.querySelector(":modal") !== null;
+    } catch {
+      return true;
+    }
+  }
+  function raise() {
+    if (!supportsPopover() || !element.isConnected) return;
+    if (popoverOpen() && !modalOpen()) return;
+    const focused = ownerDocument.activeElement;
+    const keepFocus = focused && element.contains(focused) ? focused : void 0;
+    try {
+      element.hidePopover();
+      element.showPopover();
+    } catch {
+      return;
+    }
+    if (keepFocus && ownerDocument.activeElement !== keepFocus) keepFocus.focus({ preventScroll: true });
+  }
+  function lowerWhenEmpty() {
+    if (element.childElementCount > 0 || !supportsPopover()) return;
+    try {
+      element.hidePopover();
+    } catch {
+    }
+  }
+  function engaged(toast) {
+    return toast.hovered || toast.focused;
+  }
+  function stopTimer(toast) {
+    clearTimeout(toast.timer);
+    toast.timer = void 0;
+  }
+  function runTimer(toast) {
+    stopTimer(toast);
+    if (toast.remaining === void 0 || engaged(toast)) return;
+    toast.startedAt = Date.now();
+    toast.timer = setTimeout(() => close(toast), toast.remaining);
+  }
+  function pause(toast) {
+    if (toast.timer === void 0) return;
+    stopTimer(toast);
+    if (toast.remaining !== void 0) {
+      toast.remaining = Math.max(0, toast.remaining - (Date.now() - toast.startedAt));
+    }
+  }
+  function setEngagement(toast, hovered, focused) {
+    if (!live.includes(toast)) return;
+    const wasEngaged = engaged(toast);
+    toast.hovered = hovered;
+    toast.focused = focused;
+    if (engaged(toast) === wasEngaged) return;
+    if (wasEngaged) {
+      if (toast.remaining !== void 0) toast.remaining = Math.max(toast.remaining, TOAST_RESUME_MIN_MS);
+      runTimer(toast);
+    } else {
+      pause(toast);
+    }
+  }
+  function reducedMotion() {
+    if (ownerDocument.documentElement.classList.contains(REDUCED_MOTION_CLASS)) return true;
+    const view = ownerDocument.defaultView;
+    return typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  function removeElement(toastElement) {
+    toastElement.remove();
+    lowerWhenEmpty();
+    changed();
+  }
+  function leave(toastElement) {
+    toastElement.setAttribute("data-leaving", "");
+    toastElement.inert = true;
+    if (reducedMotion()) {
+      removeElement(toastElement);
+      return;
+    }
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      clearTimeout(fallback);
+      leaveTimers.delete(fallback);
+      removeElement(toastElement);
+    };
+    toastElement.addEventListener("animationend", (event) => {
+      if (event.target === toastElement && event.animationName === LEAVE_ANIMATION) finish();
+    });
+    const fallback = setTimeout(finish, TOAST_LEAVE_FALLBACK_MS);
+    leaveTimers.add(fallback);
+  }
+  function close(toast) {
+    const index = live.indexOf(toast);
+    if (index < 0) return;
+    live.splice(index, 1);
+    stopTimer(toast);
+    silence(toast.request);
+    const heldFocus = toast.element.contains(ownerDocument.activeElement);
+    if (heldFocus) {
+      const next = live[index] ?? live[index - 1];
+      if (next) next.closeButton.focus({ preventScroll: true });
+      else context.focusFallback();
+    }
+    leave(toast.element);
+  }
+  function setAction(toast, action) {
+    const previous = toast.actionButton;
+    const hadFocus = previous !== void 0 && ownerDocument.activeElement === previous;
+    previous?.remove();
+    toast.actionButton = void 0;
+    if (action) {
+      const button = createElement(
+        ownerDocument,
+        "button",
+        { type: "button", class: "cd-shell-toast-action cd-shell-button", "data-variant": "ghost" },
+        action.label
+      );
+      button.addEventListener("click", () => {
+        close(toast);
+        action.onSelect();
+      });
+      toast.closeButton.before(button);
+      toast.actionButton = button;
+    }
+    if (hadFocus) (toast.actionButton ?? toast.closeButton).focus({ preventScroll: true });
+  }
+  function slotOf(toast) {
+    return { id: toast.id, hasAction: toast.request.action !== void 0, engaged: engaged(toast) };
+  }
+  function render(request) {
+    const id = ++lastId;
+    const textId = `${context.idPrefix}-${id}`;
+    const closeButton = createElement(
+      ownerDocument,
+      "button",
+      {
+        type: "button",
+        class: "cd-shell-toast-close",
+        "aria-label": messages.close,
+        "aria-describedby": textId
+      },
+      iconElement("x")
+    );
+    const toastElement = createElement(
+      ownerDocument,
+      "div",
+      { class: "cd-shell-toast", "data-status": request.status },
+      createElement(ownerDocument, "span", { class: "cd-shell-toast-dot", "aria-hidden": "true" }),
+      createElement(ownerDocument, "span", { class: "cd-shell-toast-text", id: textId }, request.text),
+      closeButton
+    );
+    const toast = {
+      id,
+      element: toastElement,
+      closeButton,
+      handle: Object.freeze({ dismiss: () => close(toast) }),
+      request,
+      actionButton: void 0,
+      hovered: false,
+      focused: false,
+      remaining: toastLifetime(request),
+      startedAt: Date.now(),
+      timer: void 0
+    };
+    setAction(toast, request.action);
+    closeButton.addEventListener("click", () => close(toast));
+    toastElement.addEventListener("mouseenter", () => setEngagement(toast, true, toast.focused));
+    toastElement.addEventListener("mouseleave", () => setEngagement(toast, false, toast.focused));
+    toastElement.addEventListener("focusin", () => setEngagement(toast, toast.hovered, true));
+    toastElement.addEventListener(
+      "focusout",
+      (event) => setEngagement(toast, toast.hovered, toastElement.contains(event.relatedTarget))
+    );
+    return toast;
+  }
+  function show(request) {
+    if (destroyed) return INERT_HANDLE;
+    const same = live.find(
+      (toast2) => toast2.request.status === request.status && toast2.request.text === request.text
+    );
+    if (same) {
+      same.request = request;
+      setAction(same, request.action);
+      same.remaining = toastLifetime(request);
+      runTimer(same);
+      raise();
+      announce(request);
+      changed();
+      return same.handle;
+    }
+    while (live.length >= MAX_TOASTS) {
+      const evictedId = toastToEvict(live.map(slotOf));
+      const evicted = live.find((toast2) => toast2.id === evictedId) ?? live[0];
+      if (!evicted) break;
+      close(evicted);
+    }
+    const toast = render(request);
+    live.push(toast);
+    element.append(toast.element);
+    raise();
+    runTimer(toast);
+    announce(request);
+    changed();
+    return toast.handle;
+  }
+  return {
+    element,
+    announcer,
+    show,
+    setBottom(bottom) {
+      element.style.bottom = `${bottom}px`;
+    },
+    widestCard() {
+      let widest;
+      for (const card of element.children) {
+        const width = card.getBoundingClientRect().width;
+        if (width > 0) widest = Math.max(widest ?? 0, width);
+      }
+      return widest;
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      for (const toast of live.splice(0)) stopTimer(toast);
+      for (const timer of leaveTimers) clearTimeout(timer);
+      leaveTimers.clear();
+      for (const timer of announceTimers.values()) clearTimeout(timer);
+      announceTimers.clear();
+      element.remove();
+      announcer.remove();
+    }
+  };
+}
+
+// src/dom/hint.ts
+function createEmptyHint(ownerDocument, messages, options) {
+  const { onInsertExample } = options;
+  const action = onInsertExample ? createElement(
+    ownerDocument,
+    "button",
+    { type: "button", class: "cd-shell-hint-action" },
+    messages.insertExample
+  ) : void 0;
+  action?.addEventListener("click", () => onInsertExample?.());
+  const element = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-hint" },
+    createElement(ownerDocument, "p", { class: "cd-shell-hint-text" }, messages.emptyHint),
+    action
+  );
+  element.hidden = true;
+  return {
+    element,
+    isShown: () => !element.hidden,
+    setShown(shown) {
+      element.hidden = !shown;
+    },
+    place({ top, right, bottom, left }) {
+      element.style.inset = `${top}px ${right}px ${bottom}px ${left}px`;
+    },
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/inspector.ts
+function createInspector(ownerDocument, options, onChange) {
+  const element = createElement(ownerDocument, "aside", {
+    class: "cd-shell-inspector",
+    "data-chrome": "inspector",
+    "aria-label": options.label
+  });
+  element.hidden = true;
+  function setOpen(open) {
+    if (open === !element.hidden) return;
+    element.hidden = !open;
+    onChange(open);
+  }
+  return {
+    element,
+    isOpen: () => !element.hidden,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/keys.ts
+function isTextField(target) {
+  if (!target || typeof target.closest !== "function") return false;
+  const element = target;
+  return element.isContentEditable === true || element.closest(TEXT_FIELD_SELECTOR) !== null;
+}
+function isShown(element) {
+  if (element.localName === "dialog" && !element.hasAttribute("open")) return false;
+  if (element.closest("[hidden]")) return false;
+  return typeof element.checkVisibility !== "function" || element.checkVisibility({ visibilityProperty: true });
+}
+function isModal(element) {
+  if (element.getAttribute("aria-modal") === "true") return true;
+  try {
+    return element.matches(":modal");
+  } catch {
+    return false;
+  }
+}
+function openDialogs(scope) {
+  return [...scope.querySelectorAll('[role="dialog"], [role="alertdialog"], dialog')].filter(isShown);
+}
+function isModalOpen(scope) {
+  return openDialogs(scope).some(isModal);
+}
+function createKeyListener(context) {
+  return (event) => {
+    if (event.key === "Escape") context.hideTooltip();
+    const dialogs = openDialogs(context.dialogScope);
+    const decision = decideKey(event, {
+      host: context.host,
+      inTextField: isTextField(event.target),
+      menuOpen: context.menuOpen(),
+      dialogOpen: dialogs.length > 0,
+      modalOpen: dialogs.some(isModal),
+      defaultPrevented: event.defaultPrevented,
+      startScreen: context.startScreen?.() ?? false
+    });
+    if (decision.preventDefault) event.preventDefault();
+    if (decision.stopPropagation) event.stopPropagation();
+    if (decision.action === "closeMenu") context.closeMenu();
+    else if (decision.action) context.run(decision.action);
+  };
+}
+
+// src/dom/ledger.ts
+var Ledger = class {
+  undo = [];
+  originalAttributes = /* @__PURE__ */ new Map();
+  closed = false;
+  get isClosed() {
+    return this.closed;
+  }
+  /** Runs `task` on `close()`, in reverse order of registration. */
+  defer(task) {
+    this.undo.push(task);
+  }
+  /** Adds `className` unless present; `close()` removes it only if this ledger added it. */
+  addClass(element, className) {
+    if (element.classList.contains(className)) return;
+    const hadClassAttribute = element.hasAttribute("class");
+    element.classList.add(className);
+    this.defer(() => {
+      element.classList.remove(className);
+      if (!hadClassAttribute && element.classList.length === 0) element.removeAttribute("class");
+    });
+  }
+  /** Sets (string) or removes (`null`) an attribute; `close()` restores the value before the first change. */
+  attribute(element, name, value) {
+    let originals = this.originalAttributes.get(element);
+    if (!originals) {
+      originals = /* @__PURE__ */ new Map();
+      this.originalAttributes.set(element, originals);
+    }
+    if (!originals.has(name)) {
+      originals.set(name, element.getAttribute(name));
+      this.defer(() => {
+        const original = originals.get(name) ?? null;
+        if (original === null) element.removeAttribute(name);
+        else element.setAttribute(name, original);
+      });
+    }
+    if (value === null) element.removeAttribute(name);
+    else element.setAttribute(name, value);
+  }
+  listen(target, type, listener, options) {
+    const handler = listener;
+    target.addEventListener(type, handler, options);
+    this.defer(() => target.removeEventListener(type, handler, options));
+  }
+  /** Runs every undo task once; later calls are no-ops. */
+  close() {
+    if (this.closed) return;
+    this.closed = true;
+    for (const task of this.undo.reverse()) {
+      try {
+        task();
+      } catch {
+      }
+    }
+    this.undo.length = 0;
+    this.originalAttributes.clear();
+  }
+};
+
+// src/dom/legend.ts
+function createLegend(context) {
+  const { ownerDocument, messages, tooltip, titleId, options } = context;
+  const close = createElement(ownerDocument, "button", {
+    type: "button",
+    class: "cd-shell-legend-close",
+    "aria-label": messages.closeLegend
+  });
+  close.append(iconElement("x"));
+  const body = createElement(ownerDocument, "div", { class: "cd-shell-legend-body" });
+  const element = createElement(
+    ownerDocument,
+    "section",
+    { class: "cd-shell-legend cd-shell-island", "data-chrome": "legend", "aria-labelledby": titleId },
+    createElement(
+      ownerDocument,
+      "div",
+      { class: "cd-shell-legend-header" },
+      createElement(ownerDocument, "div", { class: "cd-shell-legend-title", id: titleId }, messages.legend),
+      close
+    ),
+    body
+  );
+  element.hidden = true;
+  options.render(body);
+  let open = false;
+  let started = false;
+  const detachTooltip = tooltip.attach(close, { label: messages.closeLegend });
+  function apply(next) {
+    started = true;
+    if (next === open) return false;
+    open = next;
+    element.hidden = !open;
+    if (!open && element.contains(ownerDocument.activeElement)) context.focusAfterClose();
+    context.onChange(open);
+    return true;
+  }
+  function setOpen(next) {
+    if (apply(next)) options.onToggle?.(next);
+  }
+  close.addEventListener("click", () => setOpen(false));
+  return {
+    element,
+    body,
+    isOpen: () => open,
+    setOpen,
+    toggle: () => setOpen(!open),
+    start(initial) {
+      if (!started) apply(initial);
+    },
+    isStarted: () => started,
+    destroy() {
+      detachTooltip();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/menu.ts
+var GROUP_ORDER = ["file", "model", "export", "appearance", "help"];
+function isModelerGroup(name) {
+  return name === "model" || name === "export" || name === "help";
+}
+function isPrintable2(event) {
+  return event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function createMenu(context) {
+  const { root, layer, id, messages, tooltip } = context;
+  const ownerDocument = root.ownerDocument;
+  let groups = context.groups;
+  let items = [];
+  let destroyed = false;
+  const trigger = createElement(ownerDocument, "button", {
+    type: "button",
+    class: "cd-shell-menu-trigger cd-shell-island",
+    "data-chrome": "menu",
+    "aria-label": messages.menu,
+    "aria-haspopup": "menu",
+    "aria-expanded": "false",
+    "aria-controls": id
+  });
+  trigger.append(iconElement("menu"));
+  const dropdown = createElement(ownerDocument, "div", {
+    class: "cd-shell-menu",
+    id,
+    role: "menu",
+    "aria-label": messages.menu
+  });
+  dropdown.hidden = true;
+  layer.prepend(dropdown);
+  const isOpen = () => !dropdown.hidden;
+  function entriesOf(name) {
+    const own = isModelerGroup(name) ? groups[name] ?? [] : [];
+    const added = context.shellEntries(name);
+    return added.length > 0 ? [...own, ...added] : own;
+  }
+  function hasEntries() {
+    return GROUP_ORDER.some((name) => entriesOf(name).length > 0);
+  }
+  function updateTriggerVisibility() {
+    trigger.hidden = !hasEntries();
+    if (trigger.hidden) close();
+  }
+  function isDisabled(entry, group) {
+    if (group === "model" && context.isReadOnly() && entry.keepEnabledWhenReadOnly !== true) return true;
+    return entry.disabled?.() ?? false;
+  }
+  function itemElement(role, label, options) {
+    const iconSlot = createElement(ownerDocument, "span", { class: "cd-shell-menu-item-icon" });
+    if (options.icon) iconSlot.append(iconElement(options.icon));
+    const element = createElement(
+      ownerDocument,
+      "button",
+      { type: "button", class: "cd-shell-menu-item", role, tabindex: "-1" },
+      iconSlot,
+      createElement(ownerDocument, "span", { class: "cd-shell-menu-item-label" }, label),
+      options.end && createElement(ownerDocument, "span", { class: "cd-shell-menu-item-end" }, options.end)
+    );
+    toggleAttribute(element, "aria-disabled", options.disabled && "true");
+    if (options.checked !== void 0) element.setAttribute("aria-checked", String(options.checked));
+    return element;
+  }
+  function checkMark() {
+    return iconElement("check", { className: "cd-shell-menu-check" });
+  }
+  function renderEntry(entry, group) {
+    const disabled = isDisabled(entry, group);
+    if (entry.kind === "checkbox") {
+      const checked = entry.checked();
+      const element2 = itemElement("menuitemcheckbox", entry.label, {
+        icon: entry.icon,
+        end: checkMark(),
+        disabled,
+        checked
+      });
+      element2.dataset.menuId = entry.id;
+      element2.dataset.menuGroup = group;
+      return {
+        key: entry.id,
+        element: element2,
+        label: entry.label,
+        disabled,
+        activate() {
+          entry.onToggle(!entry.checked());
+          refresh();
+        }
+      };
+    }
+    const shortcut = entry.shortcut ? createElement(ownerDocument, "span", { class: "cd-shell-menu-shortcut" }, entry.shortcut) : void 0;
+    const element = itemElement("menuitem", entry.label, { icon: entry.icon, end: shortcut, disabled });
+    element.dataset.menuId = entry.id;
+    element.dataset.menuGroup = group;
+    const keyShortcuts = entry.ariaKeyShortcuts ?? (entry.shortcut ? ariaKeyShortcutsFromLabel(entry.shortcut) : void 0);
+    toggleAttribute(element, "aria-keyshortcuts", keyShortcuts || null);
+    if (entry.kind === "dialog") element.setAttribute("aria-haspopup", "dialog");
+    if (entry.kind === "action" && entry.danger) element.dataset.danger = "";
+    return {
+      key: entry.id,
+      element,
+      label: entry.label,
+      disabled,
+      activate() {
+        close({ restoreFocus: true });
+        entry.onSelect();
+      }
+    };
+  }
+  function renderRadioGroup(entry, group) {
+    const disabled = isDisabled(entry, group);
+    const value = entry.value();
+    const container = createElement(
+      ownerDocument,
+      "div",
+      {
+        class: "cd-shell-menu-group",
+        role: "group",
+        "aria-label": entry.label,
+        "data-menu-id": entry.id,
+        "data-menu-group": group
+      },
+      // The group's aria-label carries the heading; a menu holds no loose text.
+      createElement(
+        ownerDocument,
+        "div",
+        { class: "cd-shell-menu-heading", "aria-hidden": "true" },
+        entry.label
+      )
+    );
+    const radioItems = entry.options.map((option) => {
+      const element = itemElement("menuitemradio", option.label, {
+        end: checkMark(),
+        disabled,
+        checked: option.value === value
+      });
+      element.dataset.menuValue = option.value;
+      container.append(element);
+      return {
+        key: `${entry.id}\0${option.value}`,
+        element,
+        label: option.label,
+        disabled,
+        activate() {
+          if (entry.value() !== option.value) entry.onSelect(option.value);
+          refresh();
+        }
+      };
+    });
+    return { element: container, items: radioItems };
+  }
+  function render() {
+    const focusedKey = items.find((item) => item.element === ownerDocument.activeElement)?.key;
+    const nodes = [];
+    const rendered = [];
+    for (const name of GROUP_ORDER) {
+      const entries = entriesOf(name);
+      if (entries.length === 0) continue;
+      if (nodes.length > 0) {
+        nodes.push(
+          createElement(ownerDocument, "div", { class: "cd-shell-menu-separator", role: "separator" })
+        );
+      }
+      for (const entry of entries) {
+        if (entry.kind === "radio") {
+          const radio = renderRadioGroup(entry, name);
+          nodes.push(radio.element);
+          rendered.push(...radio.items);
+        } else {
+          const item = renderEntry(entry, name);
+          nodes.push(item.element);
+          rendered.push(item);
+        }
+      }
+    }
+    for (const item of rendered) {
+      item.element.addEventListener("click", () => {
+        if (!item.disabled) item.activate();
+      });
+    }
+    dropdown.replaceChildren(...nodes);
+    items = rendered;
+    if (focusedKey !== void 0 && isOpen()) {
+      (items.find((item) => item.key === focusedKey) ?? items[0])?.element.focus();
+    }
+  }
+  function focusAt(index) {
+    if (items.length === 0) return;
+    items[(index + items.length) % items.length]?.element.focus();
+  }
+  function currentIndex() {
+    return items.findIndex((item) => item.element === ownerDocument.activeElement);
+  }
+  function typeAhead(character) {
+    const start = currentIndex();
+    const lower = character.toLowerCase();
+    for (let step = 1; step <= items.length; step++) {
+      const index = (Math.max(start, -1) + step) % items.length;
+      if (items[index]?.label.toLowerCase().startsWith(lower)) {
+        focusAt(index);
+        return;
+      }
+    }
+  }
+  const onOutsidePointerDown = (event) => {
+    const target = event.target;
+    if (target && (dropdown.contains(target) || trigger.contains(target))) return;
+    close();
+  };
+  const onWindowBlur = () => close();
+  function open(focus = "first") {
+    if (destroyed || !hasEntries()) return;
+    tooltip.hide();
+    const wasOpen = isOpen();
+    render();
+    if (!wasOpen) {
+      dropdown.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+      ownerDocument.addEventListener("pointerdown", onOutsidePointerDown, true);
+      ownerDocument.defaultView?.addEventListener("blur", onWindowBlur);
+    }
+    focusAt(focus === "last" ? items.length - 1 : 0);
+  }
+  function close(options = {}) {
+    if (!isOpen()) return;
+    dropdown.hidden = true;
+    trigger.setAttribute("aria-expanded", "false");
+    ownerDocument.removeEventListener("pointerdown", onOutsidePointerDown, true);
+    ownerDocument.defaultView?.removeEventListener("blur", onWindowBlur);
+    if (options.restoreFocus && !trigger.hidden) trigger.focus();
+  }
+  function refresh() {
+    if (isOpen()) render();
+  }
+  trigger.addEventListener("click", () => {
+    if (isOpen()) close();
+    else open("first");
+  });
+  function consume(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  trigger.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+      consume(event);
+      open("first");
+    } else if (event.key === "ArrowUp") {
+      consume(event);
+      open("last");
+    }
+  });
+  dropdown.addEventListener("keydown", (event) => {
+    if (matchChromeKey(event)) return;
+    switch (event.key) {
+      case "ArrowDown":
+        focusAt(currentIndex() + 1);
+        break;
+      case "ArrowUp": {
+        const index = currentIndex();
+        focusAt(index < 0 ? items.length - 1 : index - 1);
+        break;
+      }
+      case "Home":
+        focusAt(0);
+        break;
+      case "End":
+        focusAt(items.length - 1);
+        break;
+      case "Tab":
+        close({ restoreFocus: true });
+        return;
+      case "Escape":
+        return;
+      case "Enter":
+      case " ":
+      case "Delete":
+      case "Backspace":
+        event.stopPropagation();
+        return;
+      default:
+        if (!isPrintable2(event)) return;
+        typeAhead(event.key);
+    }
+    consume(event);
+  });
+  updateTriggerVisibility();
+  return {
+    trigger,
+    dropdown,
+    isOpen,
+    open,
+    close,
+    refresh,
+    setGroups(next) {
+      groups = next;
+      updateTriggerVisibility();
+      refresh();
+    },
+    destroy() {
+      if (destroyed) return;
+      close();
+      destroyed = true;
+      trigger.remove();
+      dropdown.remove();
+    }
+  };
+}
+
+// src/dom/problems.ts
+function createProblemsPill(context) {
+  const { ownerDocument, messages, lang, tooltip } = context;
+  const icon = createElement(ownerDocument, "span", { class: "cd-shell-problems-icon" });
+  const text = createElement(ownerDocument, "span", { class: "cd-shell-problems-text" });
+  const element = createElement(
+    ownerDocument,
+    "button",
+    { type: "button", class: "cd-shell-problems cd-shell-island", "data-chrome": "problems" },
+    icon,
+    text
+  );
+  element.hidden = true;
+  element.addEventListener("click", () => context.onActivate());
+  const detachTooltip = context.showTooltip ? tooltip.attach(element, { label: messages.showProblems }) : void 0;
+  let severity;
+  return {
+    element,
+    isShown: () => !element.hidden,
+    set({ count, errors }) {
+      const shown = count > 0;
+      element.hidden = !shown;
+      if (!shown) {
+        tooltip.hide();
+        return;
+      }
+      const formattedCount = formatNumber(count, lang);
+      text.textContent = messages.problems(count, formattedCount);
+      element.setAttribute(
+        "aria-label",
+        messages.problemsLabel(count, errors, formattedCount, formatNumber(errors, lang))
+      );
+      const next = errors > 0 ? "danger" : "warning";
+      if (next !== severity) {
+        severity = next;
+        element.dataset.severity = next;
+        icon.replaceChildren(iconElement(next === "danger" ? "circle-x" : "triangle-alert"));
+      }
+    },
+    destroy() {
+      detachTooltip?.();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/status.ts
+function createStatusBox(ownerDocument) {
+  const icon = createElement(ownerDocument, "span", { class: "cd-shell-status-icon" });
+  const text = createElement(ownerDocument, "p", { class: "cd-shell-status-text" });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-status", "data-chrome": "status" },
+    icon,
+    text
+  );
+  element.hidden = true;
+  let pending;
+  function cancelPending() {
+    if (pending) clearTimeout(pending.timer);
+    pending = void 0;
+  }
+  function show(status) {
+    pending = void 0;
+    if (element.dataset.severity !== status.severity) {
+      element.dataset.severity = status.severity;
+      element.setAttribute("role", status.severity === "danger" ? "alert" : "status");
+      icon.replaceChildren(iconElement(status.severity === "danger" ? "circle-x" : "triangle-alert"));
+    }
+    if (text.textContent !== status.text) text.textContent = status.text;
+    element.hidden = false;
+  }
+  return {
+    element,
+    set(status, delayMs) {
+      if (status === null) {
+        cancelPending();
+        element.hidden = true;
+        return;
+      }
+      if (!element.hidden) {
+        show(status);
+        return;
+      }
+      if (pending) {
+        pending.status = status;
+        return;
+      }
+      if (delayMs > 0) {
+        const entry = { status, timer: setTimeout(() => show(entry.status), delayMs) };
+        pending = entry;
+      } else {
+        show(status);
+      }
+    },
+    destroy() {
+      cancelPending();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/tooltip.ts
+function createTooltip({ root, layer, id }) {
+  const ownerDocument = root.ownerDocument;
+  const label = createElement(ownerDocument, "span", { class: "cd-shell-tooltip-label" });
+  const shortcut = createElement(ownerDocument, "kbd", { class: "cd-shell-kbd" });
+  const element = createElement(ownerDocument, "div", { class: "cd-shell-tooltip", role: "tooltip", id });
+  element.hidden = true;
+  element.append(label, shortcut);
+  layer.append(element);
+  let shown;
+  let pending;
+  let warmUntil = 0;
+  let pressed;
+  const detachers = /* @__PURE__ */ new Set();
+  function cancelPending() {
+    if (pending) clearTimeout(pending.timer);
+    pending = void 0;
+  }
+  function resolve(source) {
+    return typeof source === "function" ? source() : source;
+  }
+  function place(control) {
+    const island = control.closest("[data-chrome]") ?? control;
+    const point = placeTooltip({
+      anchor: boxRelativeTo(control, root),
+      island: boxRelativeTo(island, root),
+      tooltip: { width: element.offsetWidth, height: element.offsetHeight },
+      container: { width: root.clientWidth, height: root.clientHeight }
+    });
+    element.style.left = `${point.x}px`;
+    element.style.top = `${point.y}px`;
+  }
+  function hide() {
+    cancelPending();
+    if (!shown) return;
+    const { control, describedBy } = shown;
+    shown = void 0;
+    element.hidden = true;
+    if (describedBy === null) control.removeAttribute("aria-describedby");
+    else control.setAttribute("aria-describedby", describedBy);
+  }
+  function show(control, source) {
+    cancelPending();
+    const content = resolve(source);
+    if (!content || !control.isConnected) {
+      if (shown?.control === control) hide();
+      return;
+    }
+    if (shown && shown.control !== control) hide();
+    label.textContent = content.label;
+    shortcut.textContent = content.shortcut ?? "";
+    shortcut.hidden = !content.shortcut;
+    element.hidden = false;
+    if (!shown) {
+      const describedBy = control.getAttribute("aria-describedby");
+      shown = { control, describedBy };
+      const saysMore = !accessibleName(control).includes(content.label) || Boolean(content.shortcut) && !control.hasAttribute("aria-keyshortcuts");
+      if (saysMore) {
+        control.setAttribute("aria-describedby", [describedBy, id].filter(Boolean).join(" "));
+      }
+    }
+    place(control);
+  }
+  function onEnter(control, source, event) {
+    if (event.pointerType === "touch" || pressed === control) return;
+    if (shown || Date.now() < warmUntil) {
+      show(control, source);
+      return;
+    }
+    cancelPending();
+    pending = { control, timer: setTimeout(() => show(control, source), TOOLTIP_DELAY_MS) };
+  }
+  function onLeave(control) {
+    if (pressed === control) pressed = void 0;
+    if (pending?.control === control) cancelPending();
+    if (shown?.control === control) {
+      hide();
+      warmUntil = Date.now() + TOOLTIP_DELAY_MS;
+    }
+  }
+  function onFocus(control, source) {
+    if (hasVisibleFocus(control)) show(control, source);
+  }
+  function onBlur(control) {
+    if (pending?.control === control) cancelPending();
+    if (shown?.control === control) hide();
+  }
+  function onPress(control, event) {
+    if (event.type === "pointerdown") pressed = control;
+    if (pending?.control === control) cancelPending();
+    if (shown?.control === control) hide();
+  }
+  function attach(control, source) {
+    const enter = (event) => onEnter(control, source, event);
+    const leave = () => onLeave(control);
+    const focus = () => onFocus(control, source);
+    const blur = () => onBlur(control);
+    const press = (event) => onPress(control, event);
+    control.addEventListener("pointerenter", enter);
+    control.addEventListener("pointerleave", leave);
+    control.addEventListener("focus", focus);
+    control.addEventListener("blur", blur);
+    control.addEventListener("pointerdown", press);
+    control.addEventListener("click", press);
+    const detach = () => {
+      if (!detachers.delete(detach)) return;
+      control.removeEventListener("pointerenter", enter);
+      control.removeEventListener("pointerleave", leave);
+      control.removeEventListener("focus", focus);
+      control.removeEventListener("blur", blur);
+      control.removeEventListener("pointerdown", press);
+      control.removeEventListener("click", press);
+      if (shown?.control === control || pending?.control === control) hide();
+      if (pressed === control) pressed = void 0;
+    };
+    detachers.add(detach);
+    return detach;
+  }
+  function delegate(container, selector, content) {
+    let hovered;
+    const controlOf = (target) => {
+      if (!target || typeof target.closest !== "function") return void 0;
+      const match = target.closest(selector);
+      return match && container.contains(match) ? match : void 0;
+    };
+    const sourceOf = (control) => () => content(control);
+    const over = (event) => {
+      const control = controlOf(event.target);
+      if (control === hovered) return;
+      if (hovered) onLeave(hovered);
+      hovered = control;
+      if (control) onEnter(control, sourceOf(control), event);
+    };
+    const out = (event) => {
+      if (!hovered) return;
+      if (controlOf(event.relatedTarget) === hovered) return;
+      onLeave(hovered);
+      hovered = void 0;
+    };
+    const focusIn = (event) => {
+      const control = controlOf(event.target);
+      if (control) onFocus(control, sourceOf(control));
+    };
+    const focusOut = (event) => {
+      const control = controlOf(event.target);
+      if (control) onBlur(control);
+    };
+    const press = (event) => {
+      const control = controlOf(event.target);
+      if (control) onPress(control, event);
+    };
+    container.addEventListener("pointerover", over);
+    container.addEventListener("pointerout", out);
+    container.addEventListener("focusin", focusIn);
+    container.addEventListener("focusout", focusOut);
+    container.addEventListener("pointerdown", press);
+    container.addEventListener("click", press);
+    const detach = () => {
+      if (!detachers.delete(detach)) return;
+      container.removeEventListener("pointerover", over);
+      container.removeEventListener("pointerout", out);
+      container.removeEventListener("focusin", focusIn);
+      container.removeEventListener("focusout", focusOut);
+      container.removeEventListener("pointerdown", press);
+      container.removeEventListener("click", press);
+      if (shown && container.contains(shown.control) || pending && container.contains(pending.control)) {
+        hide();
+      }
+      hovered = void 0;
+    };
+    detachers.add(detach);
+    return detach;
+  }
+  return {
+    element,
+    attach,
+    delegate,
+    hide,
+    destroy() {
+      hide();
+      for (const detach of [...detachers]) detach();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/web/drop-zone.ts
+var DRAG_EVENTS = ["dragenter", "dragover", "dragleave", "drop"];
+function carriesFiles(transfer) {
+  if (!transfer) return false;
+  if (Array.from(transfer.types ?? []).includes("Files")) return true;
+  return Array.from(transfer.items ?? []).some((item) => item.kind === "file");
+}
+function dragItems(transfer) {
+  const items = Array.from(transfer.items ?? [], (item) => ({ kind: item.kind, type: item.type }));
+  return items.length > 0 ? items : [{ kind: "file", type: "" }];
+}
+function acceptList(accept, lang) {
+  const entries = accept.map((entry) => entry.trim()).filter((entry) => entry !== "");
+  const extensions = entries.filter((entry) => entry.startsWith("."));
+  const listed = extensions.length > 0 ? extensions : entries;
+  let format;
+  try {
+    format = new Intl.ListFormat(lang, { type: "disjunction" });
+  } catch {
+    format = new Intl.ListFormat("en", { type: "disjunction" });
+  }
+  return format.format(listed);
+}
+function createDropZone(context) {
+  const { ownerDocument, layer, messages, lang, options, modalOpen, toast, setState } = context;
+  const chip = createElement(ownerDocument, "span", { class: "cd-shell-drop-zone-chip" });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-drop-zone", "data-chrome": "drop-zone", "aria-hidden": "true" },
+    chip
+  );
+  element.hidden = true;
+  layer.append(element);
+  const view = ownerDocument.defaultView;
+  let depth = 0;
+  let current = null;
+  function verdictFor(items) {
+    return dragVerdict(items, {
+      accept: options.accept,
+      multiple: options.multiple ?? false,
+      dialogOpen: modalOpen()
+    });
+  }
+  function show(verdict) {
+    const next = verdict.state === "none" ? null : verdict.state;
+    if (verdict.state === "over") chip.textContent = messages.dropFile;
+    if (verdict.state === "forbidden") chip.textContent = messages.dropForbidden(verdict.reason);
+    if (next === current) return;
+    current = next;
+    element.hidden = next === null;
+    if (next === null) element.removeAttribute("data-state");
+    else element.setAttribute("data-state", next);
+    setState(next);
+  }
+  function track(transfer) {
+    const verdict = verdictFor(dragItems(transfer));
+    show(verdict);
+    transfer.dropEffect = verdict.state === "forbidden" ? "none" : "copy";
+  }
+  function rejectByDefault(files) {
+    const accepted = acceptList(options.accept, lang);
+    for (const file of files) toast({ status: "danger", text: messages.cannotOpenFile(file.name, accepted) });
+  }
+  function receive(files, verdict) {
+    if (verdict.state === "forbidden" && verdict.reason !== "type") return;
+    const accepted = files.filter((file) => acceptsFile(file, options.accept));
+    const rejected = files.filter((file) => !accepted.includes(file));
+    if (accepted.length > 0) options.onDrop(accepted);
+    if (rejected.length > 0) (options.onReject ?? rejectByDefault)(rejected);
+  }
+  const onDragEvent = (event) => {
+    const transfer = event.dataTransfer;
+    if (!carriesFiles(transfer)) return;
+    event.preventDefault();
+    switch (event.type) {
+      case "dragenter":
+        depth += 1;
+        track(transfer);
+        break;
+      case "dragover":
+        depth = Math.max(depth, 1);
+        track(transfer);
+        break;
+      case "dragleave":
+        depth = Math.max(0, depth - 1);
+        if (depth === 0) show({ state: "none" });
+        break;
+      case "drop": {
+        depth = 0;
+        show({ state: "none" });
+        const files = Array.from(transfer.files ?? []);
+        const items = files.length > 0 ? files.map((file) => ({ kind: "file", type: file.type })) : dragItems(transfer);
+        receive(files, verdictFor(items));
+        break;
+      }
+    }
+  };
+  for (const type of DRAG_EVENTS) view?.addEventListener(type, onDragEvent);
+  return {
+    element,
+    state: () => current,
+    destroy() {
+      for (const type of DRAG_EVENTS) view?.removeEventListener(type, onDragEvent);
+      depth = 0;
+      if (current !== null) {
+        current = null;
+        setState(null);
+      }
+      element.remove();
+    }
+  };
+}
+
+// src/dom/web/empty-state.ts
+var KOMET_SIZE = "64";
+function createEmptyState(context) {
+  const { ownerDocument, messages, options, dropHint, open, titleId, onLeave } = context;
+  const button = (variant, label, run) => {
+    const element2 = createElement(
+      ownerDocument,
+      "button",
+      { type: "button", class: "cd-shell-button", "data-variant": variant },
+      label
+    );
+    element2.addEventListener("click", () => {
+      onLeave();
+      run();
+    });
+    return element2;
+  };
+  const onShowExample = options.onShowExample;
+  const newDiagram = button("primary", messages.newDiagram, () => options.onNewDiagram());
+  const element = createElement(
+    ownerDocument,
+    "section",
+    { class: "cd-shell-empty-state", "data-chrome": "empty-state", "aria-labelledby": titleId },
+    // Dragging the mark would start an image drag that some browsers carry as a file.
+    createElement(ownerDocument, "img", {
+      class: "cd-shell-empty-state-mark",
+      src: options.komet,
+      width: KOMET_SIZE,
+      height: KOMET_SIZE,
+      alt: "",
+      draggable: "false"
+    }),
+    createElement(ownerDocument, "h1", { class: "cd-shell-empty-state-title", id: titleId }, options.title),
+    createElement(ownerDocument, "p", { class: "cd-shell-empty-state-text" }, options.text),
+    createElement(
+      ownerDocument,
+      "div",
+      { class: "cd-shell-empty-state-actions" },
+      newDiagram,
+      onShowExample && button("ghost", messages.showExample, () => onShowExample())
+    ),
+    hintParagraph()
+  );
+  function hintParagraph() {
+    const hasDropHint = dropHint !== void 0 && dropHint !== "";
+    if (!hasDropHint && !open) return void 0;
+    const paragraph = createElement(ownerDocument, "p", { class: "cd-shell-empty-state-hint" });
+    if (hasDropHint) paragraph.append(dropHint);
+    if (!open) return paragraph;
+    const shortcut = open.shortcut?.trim();
+    const link = createElement(
+      ownerDocument,
+      "button",
+      {
+        type: "button",
+        class: "cd-shell-empty-state-open",
+        "aria-keyshortcuts": shortcut ? ariaKeyShortcutsFromLabel(shortcut) : void 0,
+        "aria-haspopup": open.dialog ? "dialog" : void 0
+      },
+      messages.openFileLink
+    );
+    link.addEventListener("click", () => open.onSelect());
+    if (hasDropHint) {
+      paragraph.append(" ", createElement(ownerDocument, "span", { "aria-hidden": "true" }, "\xB7"), " ");
+    }
+    const openItem = createElement(ownerDocument, "span", { class: "cd-shell-empty-state-open-item" }, link);
+    if (shortcut) {
+      openItem.append(
+        " ",
+        createElement(
+          ownerDocument,
+          "kbd",
+          { class: "cd-shell-empty-state-key", "aria-hidden": "true" },
+          shortcut
+        )
+      );
+    }
+    paragraph.append(openItem);
+    return paragraph;
+  }
+  element.hidden = true;
+  return {
+    element,
+    isShown: () => !element.hidden,
+    setShown(shown) {
+      element.hidden = !shown;
+    },
+    focus() {
+      newDiagram.focus({ preventScroll: true });
+    },
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/web/legal.ts
+var MIRAGON_HOME = "https://www.miragon.io/";
+var MIRAGON_IMPRESSUM = "https://www.miragon.io/impressum/";
+var MIRAGON_DATENSCHUTZ = "https://www.miragon.io/datenschutz/";
+function createLegalLine(context) {
+  const { ownerDocument, messages, options } = context;
+  const year = options.year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const newTabId = `${context.idPrefix}-new-tab`;
+  const link = (label, href, lang) => createElement(
+    ownerDocument,
+    "a",
+    { href, lang, target: "_blank", rel: "noopener noreferrer", "aria-describedby": newTabId },
+    label
+  );
+  const separator = () => createElement(ownerDocument, "span", { "aria-hidden": "true" }, "\xB7");
+  const item = (anchor) => createElement(ownerDocument, "span", { class: "cd-shell-legal-item" }, separator(), anchor);
+  const links = [
+    link(messages.copyright(year), MIRAGON_HOME),
+    link("Impressum", MIRAGON_IMPRESSUM, "de"),
+    link("Datenschutz", MIRAGON_DATENSCHUTZ, "de"),
+    ...(options.links ?? []).map((extra) => link(extra.label, extra.href, extra.lang))
+  ];
+  const element = createElement(ownerDocument, "nav", {
+    class: "cd-shell-legal",
+    "data-chrome": "legal",
+    "aria-label": messages.legal
+  });
+  element.append(
+    ...links.map((anchor, index) => index === 0 ? anchor : item(anchor)),
+    createElement(ownerDocument, "span", { id: newTabId, hidden: "" }, messages.opensInNewTab)
+  );
+  return {
+    element,
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/web/menu-groups.ts
+function fileEntry(spec, action) {
+  const common = {
+    id: spec.id,
+    label: spec.label,
+    ...spec.icon ? { icon: spec.icon } : {},
+    ...action.disabled ? { disabled: action.disabled } : {},
+    ...action.shortcut ? { shortcut: action.shortcut } : {},
+    onSelect: () => action.onSelect()
+  };
+  return action.dialog ? { kind: "dialog", ...common } : { kind: "action", ...common };
+}
+function fileMenuEntries(options, messages) {
+  const specs = [
+    { option: "newDiagram", id: "new-diagram", label: messages.newDiagram, icon: "file-plus" },
+    { option: "open", id: "open", label: messages.openFile, icon: "folder-open" },
+    // §5.14 gives "Show example" no icon.
+    { option: "showExample", id: "show-example", label: messages.showExample, icon: void 0 },
+    { option: "import", id: "import", label: messages.importFile, icon: "import" }
+  ];
+  return specs.flatMap((spec) => {
+    const action = options[spec.option];
+    return action ? [fileEntry(spec, action)] : [];
+  });
+}
+function appearanceMenuEntries(appearance, messages) {
+  return [
+    {
+      kind: "radio",
+      id: "appearance",
+      label: messages.appearance,
+      options: [
+        { value: "system", label: messages.appearanceSystem },
+        { value: "light", label: messages.appearanceLight },
+        { value: "dark", label: messages.appearanceDark }
+      ],
+      value: () => appearance.choice(),
+      onSelect: (value) => appearance.setChoice(parseAppearanceChoice(value))
+    }
+  ];
+}
+
+// src/dom/web/primary.ts
+var COLLAPSED_ATTRIBUTE = "data-collapsed";
+function createPrimaryAction(context) {
+  const { ownerDocument, messages, tooltip, options } = context;
+  const label = options.label ?? messages.share;
+  const labelElement = createElement(ownerDocument, "span", { class: "cd-shell-primary-label" }, label);
+  const element = createElement(
+    ownerDocument,
+    "button",
+    {
+      type: "button",
+      class: "cd-shell-primary cd-shell-button",
+      "data-variant": "primary",
+      "data-chrome": "primary",
+      "aria-label": label
+    },
+    iconElement(options.icon ?? "share-2"),
+    labelElement
+  );
+  let collapsed = false;
+  let disabled = false;
+  let labelledWidth;
+  function readDisabled() {
+    disabled = options.disabled?.() ?? false;
+    toggleAttribute(element, "aria-disabled", disabled ? "true" : null);
+  }
+  function showCollapsed(state) {
+    labelElement.hidden = state;
+    toggleAttribute(element, COLLAPSED_ATTRIBUTE, state ? "" : null);
+  }
+  function measureLabelledWidth() {
+    if (!collapsed) return element.offsetWidth;
+    showCollapsed(false);
+    const width = element.offsetWidth;
+    showCollapsed(true);
+    return width;
+  }
+  function isEngaged() {
+    if (ownerDocument.activeElement === element) return true;
+    try {
+      return element.matches(":hover");
+    } catch {
+      return false;
+    }
+  }
+  const onClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    options.onSelect();
+  };
+  element.addEventListener("click", onClick);
+  const detachTooltip = tooltip.attach(element, () => collapsed ? { label } : null);
+  readDisabled();
+  return {
+    element,
+    isCollapsed: () => collapsed,
+    refresh() {
+      readDisabled();
+      labelledWidth = void 0;
+    },
+    widths() {
+      if (!collapsed || labelledWidth === void 0) {
+        const measured = measureLabelledWidth();
+        if (measured > 0) labelledWidth = measured;
+      }
+      return { withLabel: labelledWidth ?? 0, iconOnly: SHELL.row };
+    },
+    setCollapsed(next) {
+      if (next === collapsed) return;
+      collapsed = next;
+      showCollapsed(next);
+      if (!next && isEngaged()) tooltip.hide();
+    },
+    destroy() {
+      detachTooltip();
+      element.removeEventListener("click", onClick);
+      element.remove();
+    }
+  };
+}
+
+// src/dom/zoom-panel.ts
+function createZoomPanel(context) {
+  const { ownerDocument, messages, lang, platform, tooltip } = context;
+  let target = null;
+  let unsubscribe;
+  let frame;
+  const detachers = [];
+  function button(zoom, key, tooltipLabel, options) {
+    const element2 = createElement(ownerDocument, "button", {
+      type: "button",
+      class: options.className ?? "cd-shell-target",
+      "data-zoom": zoom,
+      "aria-label": options.label,
+      "aria-keyshortcuts": ariaKeyShortcuts(key, platform)
+    });
+    if (options.icon) element2.append(iconElement(options.icon));
+    element2.addEventListener("click", () => run(key));
+    detachers.push(
+      tooltip.attach(element2, {
+        label: tooltipLabel,
+        shortcut: shortcutLabel(key, platform, messages.keyNames)
+      })
+    );
+    return element2;
+  }
+  const zoomOut = button("out", "zoomOut", messages.zoomOut, { label: messages.zoomOut, icon: "minus" });
+  const readout = button("actual", "zoomToActual", messages.zoomToActual(formatPercent(1, lang)), {
+    className: "cd-shell-target cd-shell-zoom-readout"
+  });
+  const zoomIn = button("in", "zoomIn", messages.zoomIn, { label: messages.zoomIn, icon: "plus" });
+  const fit = button("fit", "fit", messages.fit, { label: messages.fit, icon: "maximize" });
+  const separator = createElement(ownerDocument, "span", {
+    class: "cd-shell-zoom-separator",
+    "aria-hidden": "true"
+  });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    {
+      class: "cd-shell-zoom cd-shell-island",
+      "data-chrome": "zoom",
+      role: "group",
+      "aria-label": messages.zoom
+    },
+    zoomOut,
+    readout,
+    zoomIn,
+    separator,
+    fit
+  );
+  function render() {
+    frame = void 0;
+    const zoom = target?.zoom() ?? 1;
+    const state = zoomReadout(zoom, lang, messages);
+    if (readout.textContent !== state.text) readout.textContent = state.text;
+    readout.setAttribute("aria-label", state.ariaLabel);
+    toggleAttribute(zoomOut, "aria-disabled", (!target || !state.canZoomOut) && "true");
+    toggleAttribute(zoomIn, "aria-disabled", (!target || !state.canZoomIn) && "true");
+    toggleAttribute(fit, "aria-disabled", (!target || !target.canFit()) && "true");
+  }
+  function schedule() {
+    if (frame === void 0) frame = requestAnimationFrame(render);
+  }
+  function cancelFrame() {
+    if (frame !== void 0) cancelAnimationFrame(frame);
+    frame = void 0;
+  }
+  function run(key) {
+    if (!target) return;
+    const zoom = target.zoom();
+    switch (key) {
+      case "zoomIn":
+        if (canZoomIn(zoom)) target.stepZoom(1);
+        break;
+      case "zoomOut":
+        if (canZoomOut(zoom)) target.stepZoom(-1);
+        break;
+      case "zoomToActual":
+        if (zoom !== 1) target.zoomToActual();
+        break;
+      case "fit":
+        if (target.canFit()) target.fit();
+        break;
+    }
+  }
+  render();
+  return {
+    element,
+    run,
+    setTarget(next) {
+      unsubscribe?.();
+      unsubscribe = void 0;
+      cancelFrame();
+      target = next;
+      if (next) unsubscribe = next.onChange(schedule);
+      render();
+    },
+    destroy() {
+      unsubscribe?.();
+      unsubscribe = void 0;
+      cancelFrame();
+      target = null;
+      for (const detach of detachers) detach();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/mount.ts
+var MOUNT_COUNTER = /* @__PURE__ */ Symbol.for("@miragon/modeler-shell.mounts");
+function nextMountIndex() {
+  const scope = globalThis;
+  const index = (scope[MOUNT_COUNTER] ?? 0) + 1;
+  scope[MOUNT_COUNTER] = index;
+  return index;
+}
+var DEFAULT_THEMES = ["light"];
+var LEGAL_HEIGHT_PROPERTY = "--modeler-shell-legal-height";
+var INERT_TOAST = Object.freeze({ dismiss() {
+} });
+function visibleBoxIn(element, root) {
+  if (!element || element.hidden || !element.isConnected) return void 0;
+  if (typeof element.checkVisibility === "function" && !element.checkVisibility({ visibilityProperty: true }))
+    return void 0;
+  const box = boxRelativeTo(element, root);
+  return box.width > 0 && box.height > 0 ? box : void 0;
+}
+function languageOf(root, host, requested) {
+  if (requested) return requested;
+  const declared = host === "embedded" ? root.getAttribute("lang") : root.closest("[lang]")?.getAttribute("lang");
+  return declared || "en";
+}
+function hostKontrast(root) {
+  const carrier = root.parentElement?.closest("[data-cd-theme], [data-cd-kontrast]");
+  return carrier?.getAttribute("data-cd-kontrast") === "hoch" ? "hoch" : null;
+}
+function mountShell(root, options) {
+  const themes = options.themes ?? DEFAULT_THEMES;
+  if (themes.length === 0) throw new Error("@miragon/modeler-shell: mountShell needs at least one theme");
+  const ledger = new Ledger();
+  try {
+    return renderShell(root, options, themes, ledger);
+  } catch (error) {
+    ledger.close();
+    throw error;
+  }
+}
+function renderShell(root, options, themes, ledger) {
+  const ownerDocument = root.ownerDocument;
+  const { host } = options;
+  const index = nextMountIndex();
+  const messages = resolveMessages(options.messages);
+  const platform = options.platform ?? detectPlatform(globalThis.navigator);
+  const lang = languageOf(root, host, options.lang);
+  const keyScope = options.keyScope ?? (host === "embedded" ? "root" : "document");
+  const web = host === "web";
+  ledger.addClass(root, "cd-shell");
+  ledger.attribute(root, "data-cd-shell-host", host);
+  ledger.attribute(root, "data-palette", "top");
+  if (host === "embedded") {
+    ledger.attribute(root, "lang", lang);
+    carryOwnMode(root, themes[0] ?? "light", ledger);
+  } else {
+    ledger.addClass(ownerDocument.documentElement, "cd-shell-document");
+  }
+  const setState = (name, value) => {
+    if (!ledger.isClosed) ledger.attribute(root, name, value);
+  };
+  const appearance = web ? connectWebAppearance({ ownerDocument, themes, options: options.appearance }) : void 0;
+  if (appearance) ledger.defer(() => appearance.destroy());
+  const darkCapable = themes.includes("dark");
+  const layer = createElement(ownerDocument, "div", { class: "cd-shell-layer" });
+  ledger.defer(() => layer.remove());
+  const tooltip = createTooltip({ root, layer, id: `cd-shell-tooltip-${index}` });
+  ledger.defer(() => tooltip.destroy());
+  let readOnly = false;
+  let readOnlyShown = false;
+  let readOnlyTimer;
+  ledger.defer(() => clearTimeout(readOnlyTimer));
+  const legend = options.legend ? createLegend({
+    ownerDocument,
+    messages,
+    tooltip,
+    titleId: `cd-shell-legend-title-${index}`,
+    options: options.legend,
+    onChange(open) {
+      setState("data-legend", open ? "open" : null);
+      placeHint();
+      menu.refresh();
+    },
+    focusAfterClose: () => menu.trigger.focus()
+  }) : void 0;
+  if (legend) ledger.defer(() => legend.destroy());
+  const legendEntry = legend && options.legend?.menuEntry !== false ? {
+    kind: "checkbox",
+    id: "legend",
+    label: messages.legend,
+    checked: () => legend.isOpen(),
+    onToggle: (checked) => legend.setOpen(checked),
+    keepEnabledWhenReadOnly: true
+  } : void 0;
+  const shellModelEntries = legendEntry ? [legendEntry] : [];
+  const fileEntries = web && options.file ? fileMenuEntries(options.file, messages) : [];
+  const appearanceEntries = appearance && darkCapable ? appearanceMenuEntries(appearance, messages) : [];
+  const shellEntries = (group) => {
+    if (group === "file") return fileEntries;
+    if (group === "model") return shellModelEntries;
+    if (group === "appearance") return appearanceEntries;
+    return [];
+  };
+  const menu = createMenu({
+    root,
+    layer,
+    id: `cd-shell-menu-${index}`,
+    messages,
+    tooltip,
+    groups: options.menu ?? {},
+    shellEntries,
+    isReadOnly: () => readOnly
+  });
+  ledger.defer(() => menu.destroy());
+  ledger.defer(tooltip.attach(menu.trigger, () => menu.isOpen() ? null : { label: messages.menu }));
+  const primary = web && options.primary ? createPrimaryAction({ ownerDocument, messages, tooltip, options: options.primary }) : void 0;
+  if (primary) ledger.defer(() => primary.destroy());
+  const canvas = options.canvas ?? createElement(ownerDocument, "div");
+  ledger.addClass(canvas, "cd-shell-canvas");
+  if (web && !canvas.hasAttribute("role")) ledger.attribute(canvas, "role", "main");
+  if (!options.canvas) ledger.defer(() => canvas.remove());
+  function focusCanvasOrTrigger() {
+    const took = (target) => {
+      target?.focus({ preventScroll: true });
+      return target !== null && target !== void 0 && ownerDocument.activeElement === target;
+    };
+    if (emptyState?.isShown()) {
+      emptyState.focus();
+      if (emptyState.element.contains(ownerDocument.activeElement)) return;
+    }
+    if (took(canvas.querySelector("svg[tabindex]"))) return;
+    if (!menu.trigger.hidden) took(menu.trigger);
+  }
+  function moveFocusOutOf(island) {
+    if (island.contains(ownerDocument.activeElement)) focusCanvasOrTrigger();
+  }
+  const status = createStatusBox(ownerDocument);
+  ledger.defer(() => status.destroy());
+  const hint = options.emptyHint ? createEmptyHint(ownerDocument, messages, options.emptyHint) : void 0;
+  if (hint) ledger.defer(() => hint.destroy());
+  const emptyState = web && options.emptyState ? createEmptyState({
+    ownerDocument,
+    messages,
+    options: options.emptyState,
+    dropHint: options.dropZone ? options.emptyState.dropHint ?? messages.dropHint : void 0,
+    open: options.file?.open,
+    titleId: `cd-shell-empty-state-title-${index}`,
+    onLeave: () => setEmptyStateShown(false)
+  }) : void 0;
+  if (emptyState) ledger.defer(() => emptyState.destroy());
+  const inspector = options.inspector ? createInspector(ownerDocument, options.inspector, (open) => {
+    setState("data-inspector", open ? "open" : null);
+    updateBottomRow();
+    placeHint();
+  }) : void 0;
+  if (inspector) ledger.defer(() => inspector.destroy());
+  const problemsOptions = options.problems;
+  let popover;
+  const pill = problemsOptions ? createProblemsPill({
+    ownerDocument,
+    messages,
+    lang,
+    tooltip,
+    showTooltip: host === "ide",
+    onActivate() {
+      if (popover) popover.toggle();
+      else problemsOptions.onActivate?.();
+    }
+  }) : void 0;
+  if (pill) ledger.defer(() => pill.destroy());
+  if (pill && (web || host === "embedded" && !problemsOptions?.onActivate)) {
+    const created = createProblemsPopover({
+      ownerDocument,
+      root,
+      layer,
+      pill: pill.element,
+      id: `cd-shell-problems-${index}`,
+      titleId: `cd-shell-problems-title-${index}`,
+      messages,
+      onSelectItem: problemsOptions?.onSelectItem
+    });
+    popover = created;
+    ledger.defer(() => created.destroy());
+  }
+  const legal = web ? createLegalLine({
+    ownerDocument,
+    messages,
+    options: options.legal ?? {},
+    idPrefix: `cd-shell-legal-${index}`
+  }) : void 0;
+  if (legal) ledger.defer(() => legal.destroy());
+  const zoomPanel = createZoomPanel({ ownerDocument, messages, lang, platform, tooltip });
+  ledger.defer(() => zoomPanel.destroy());
+  const toaster = host === "ide" ? void 0 : createToaster({
+    ownerDocument,
+    host,
+    messages,
+    idPrefix: `cd-shell-toast-${index}`,
+    focusFallback: focusCanvasOrTrigger,
+    onChange: () => updateBottomRow()
+  });
+  if (toaster) ledger.defer(() => toaster.destroy());
+  const defined = (element) => element !== void 0;
+  root.prepend(...[menu.trigger, primary?.element, canvas].filter(defined));
+  root.append(
+    ...[
+      status.element,
+      hint?.element,
+      emptyState?.element,
+      inspector?.element,
+      pill?.element,
+      legend?.element,
+      legal?.element,
+      zoomPanel.element
+    ].filter(defined),
+    layer,
+    ...[toaster?.announcer, toaster?.element].filter(defined)
+  );
+  function showToast(request) {
+    return ledger.isClosed || !toaster ? INERT_TOAST : toaster.show(request);
+  }
+  const dropZone = web && options.dropZone ? createDropZone({
+    ownerDocument,
+    layer,
+    messages,
+    lang,
+    options: options.dropZone,
+    modalOpen: () => isModalOpen(ownerDocument),
+    toast: showToast,
+    setState: (state) => setState("data-drop", state)
+  }) : void 0;
+  if (dropZone) ledger.defer(() => dropZone.destroy());
+  let palette;
+  let paletteRow = "top";
+  let zoomRaised = false;
+  let legalHeight = LEGAL_LINE_HEIGHT;
+  if (legal) ledger.defer(() => root.style.removeProperty(LEGAL_HEIGHT_PROPERTY));
+  function containerSize() {
+    return { width: root.clientWidth, height: root.clientHeight };
+  }
+  function menuRight() {
+    const box = boxRelativeTo(menu.trigger, root);
+    return box.width > 0 ? box.x + box.width : SHELL.edge + SHELL.row;
+  }
+  function paletteWidth() {
+    const element = palette?.registration.element;
+    return element ? element.offsetWidth - element.clientWidth + element.scrollWidth : 0;
+  }
+  function currentFitInsets() {
+    const container = containerSize();
+    const layout = {
+      container,
+      host,
+      paletteRow,
+      problemsVisible: pill?.isShown() ?? false
+    };
+    if (web) {
+      layout.zoomRaised = zoomRaised;
+      layout.legalHeight = legalHeight;
+    }
+    if (legend?.isOpen()) layout.legendWidth = legend.element.getBoundingClientRect().width;
+    if (inspector?.isOpen()) {
+      layout.inspector = container.width > SHELL.narrow ? {} : { sheetTop: boxRelativeTo(inspector.element, root).y };
+    }
+    return fitInsets(layout);
+  }
+  function placeHint() {
+    if (hint?.isShown()) hint.place(currentFitInsets());
+  }
+  function updateLayout() {
+    if (ledger.isClosed) return;
+    const size = containerSize();
+    if (size.width === 0 || size.height === 0) return;
+    const topRow = decideTopRow({
+      containerWidth: size.width,
+      paletteWidth: paletteWidth(),
+      menuRight: menuRight(),
+      primary: primary?.widths()
+    });
+    paletteRow = topRow.paletteRow;
+    setState("data-palette", paletteRow);
+    if (primary) {
+      const collapsed = topRow.primaryLabel === "collapsed";
+      primary.setCollapsed(collapsed);
+      setState("data-primary", collapsed ? "collapsed" : null);
+    }
+    if (legend && !legend.isStarted()) legend.start(options.legend?.open ?? legendStartsOpen(size.height));
+    updateBottomRow();
+    placeHint();
+  }
+  function updateBottomRow() {
+    if (ledger.isClosed) return;
+    const size = containerSize();
+    if (size.width === 0 || size.height === 0) return;
+    if (legal) {
+      const legalBox = visibleBoxIn(legal.element, root);
+      const height = legalLineHeight(legalBox?.height);
+      if (height !== legalHeight || !root.style.getPropertyValue(LEGAL_HEIGHT_PROPERTY)) {
+        legalHeight = height;
+        root.style.setProperty(LEGAL_HEIGHT_PROPERTY, `${height}px`);
+      }
+      zoomRaised = zoomRowRaised({
+        containerWidth: size.width,
+        legalRight: legalBox && legalBox.x + legalBox.width,
+        zoomWidth: visibleBoxIn(zoomPanel.element, root)?.width
+      });
+      setState("data-zoom-row", zoomRaised ? "raised" : null);
+    }
+    if (toaster) {
+      const obstacles = [zoomPanel.element, legal?.element, pill?.element].flatMap(
+        (element) => {
+          const box = visibleBoxIn(element, root);
+          return box ? [{ left: box.x, right: box.x + box.width, top: size.height - box.y }] : [];
+        }
+      );
+      toaster.setBottom(
+        toastStackBottom({ containerWidth: size.width, obstacles, cardWidth: toaster.widestCard() })
+      );
+    }
+  }
+  function setEmptyStateShown(shown) {
+    if (ledger.isClosed || !emptyState || emptyState.isShown() === shown) return;
+    const active = ownerDocument.activeElement;
+    const hadFocus = emptyState.element.contains(active);
+    const workHadFocus = shown && active !== null && root.contains(active) && ![emptyState.element, legal?.element, toaster?.element].some((kept) => kept?.contains(active));
+    emptyState.setShown(shown);
+    setState("data-empty-state", shown ? "shown" : null);
+    ledger.attribute(canvas, "inert", shown ? "" : null);
+    if (shown) {
+      menu.close();
+      popover?.close();
+      tooltip.hide();
+      if (workHadFocus) emptyState.focus();
+    } else if (hadFocus) {
+      focusCanvasOrTrigger();
+    }
+    updateLayout();
+  }
+  const ResizeObserverClass = globalThis.ResizeObserver;
+  const resizeObserver = ResizeObserverClass ? new ResizeObserverClass(() => updateLayout()) : void 0;
+  resizeObserver?.observe(root);
+  if (primary) resizeObserver?.observe(primary.element);
+  if (legal) resizeObserver?.observe(legal.element);
+  ledger.defer(() => resizeObserver?.disconnect());
+  if (legend && options.legend?.open !== void 0) legend.start(options.legend.open);
+  updateLayout();
+  const keyTarget = keyScope === "root" ? root : ownerDocument;
+  const onKeydown = createKeyListener({
+    host,
+    dialogScope: keyTarget,
+    menuOpen: () => menu.isOpen(),
+    startScreen: () => emptyState?.isShown() ?? false,
+    closeMenu() {
+      const active = ownerDocument.activeElement;
+      menu.close({ restoreFocus: active === menu.trigger || menu.dropdown.contains(active) });
+    },
+    hideTooltip: () => tooltip.hide(),
+    // Behind the start screen the keys reach the browser instead: there is no diagram to zoom.
+    run: (key) => {
+      if (!emptyState?.isShown()) zoomPanel.run(key);
+    }
+  });
+  keyTarget.addEventListener("keydown", onKeydown);
+  ledger.defer(() => keyTarget.removeEventListener("keydown", onKeydown));
+  function readOnlyState() {
+    return { locked: readOnly, shown: readOnlyShown };
+  }
+  function applyReadOnly() {
+    setState("data-readonly", readOnlyShown ? "" : null);
+    palette?.registration.setReadOnly(readOnlyState());
+    menu.refresh();
+  }
+  function showReadOnly() {
+    readOnlyTimer = void 0;
+    if (ledger.isClosed || !readOnly) return;
+    readOnlyShown = true;
+    applyReadOnly();
+  }
+  function unregisterPalette() {
+    if (!palette) return;
+    palette.detachTooltip();
+    resizeObserver?.unobserve(palette.registration.element);
+    palette = void 0;
+  }
+  ledger.defer(unregisterPalette);
+  const menuHandle = {
+    trigger: menu.trigger,
+    dropdown: menu.dropdown,
+    isOpen: () => menu.isOpen(),
+    open: (focus) => menu.open(focus),
+    close: (closeOptions) => menu.close(closeOptions),
+    refresh: () => menu.refresh(),
+    setGroups: (groups) => {
+      if (!ledger.isClosed) menu.setGroups(groups);
+    }
+  };
+  const tooltipHandle = {
+    attach: (control, content) => ledger.isClosed ? () => {
+    } : tooltip.attach(control, content),
+    hide: () => tooltip.hide()
+  };
+  const legendHandle = legend && {
+    element: legend.element,
+    body: legend.body,
+    isOpen: () => legend.isOpen(),
+    setOpen: (open) => {
+      if (!ledger.isClosed) legend.setOpen(open);
+    },
+    toggle: () => {
+      if (!ledger.isClosed) legend.toggle();
+    }
+  };
+  const primaryHandle = primary && {
+    element: primary.element,
+    isCollapsed: () => primary.isCollapsed(),
+    refresh: () => {
+      if (!ledger.isClosed) primary.refresh();
+    }
+  };
+  const appearanceHandle = appearance && darkCapable ? {
+    choice: () => appearance.choice(),
+    setChoice: (choice) => {
+      if (ledger.isClosed) return;
+      appearance.setChoice(choice);
+      menu.refresh();
+    }
+  } : void 0;
+  const inspectorHandle = inspector && {
+    element: inspector.element,
+    isOpen: () => inspector.isOpen(),
+    open: () => {
+      if (!ledger.isClosed) inspector.open();
+    },
+    close: () => {
+      if (ledger.isClosed) return;
+      if (inspector.isOpen()) moveFocusOutOf(inspector.element);
+      inspector.close();
+    }
+  };
+  return {
+    root,
+    canvas,
+    host,
+    lang,
+    platform,
+    messages,
+    menu: menuHandle,
+    tooltip: tooltipHandle,
+    legend: legendHandle,
+    inspector: inspectorHandle,
+    primary: primaryHandle,
+    appearance: appearanceHandle,
+    setZoomTarget(target) {
+      if (!ledger.isClosed) zoomPanel.setTarget(target);
+    },
+    fitInsets: currentFitInsets,
+    registerPalette(registration) {
+      if (ledger.isClosed) return () => {
+      };
+      unregisterPalette();
+      palette = {
+        registration,
+        detachTooltip: tooltip.delegate(
+          registration.element,
+          ".entry",
+          (entry) => registration.entryTooltip(entry)
+        )
+      };
+      resizeObserver?.observe(registration.element);
+      registration.setReadOnly(readOnlyState());
+      updateLayout();
+      const registered = palette;
+      return () => {
+        if (palette !== registered) return;
+        unregisterPalette();
+        updateLayout();
+      };
+    },
+    setProblems(summary) {
+      if (ledger.isClosed || !pill) return;
+      const listHadFocus = popover?.element.contains(ownerDocument.activeElement) ?? false;
+      pill.set(summary);
+      setState("data-problems", pill.isShown() ? "shown" : null);
+      popover?.setItems(summary.items ?? []);
+      if (!pill.isShown() && popover?.isOpen()) {
+        popover.close();
+        if (listHadFocus) focusCanvasOrTrigger();
+      }
+      updateBottomRow();
+      placeHint();
+    },
+    setStatus(next, statusOptions) {
+      if (!ledger.isClosed) status.set(next, statusOptions?.delayMs ?? 0);
+    },
+    setEmptyHint(visible) {
+      if (ledger.isClosed || !hint) return;
+      if (!visible && hint.isShown()) moveFocusOutOf(hint.element);
+      hint.setShown(visible);
+      placeHint();
+    },
+    setReadOnly(next, readOnlyOptions) {
+      if (ledger.isClosed) return;
+      if (!next) {
+        clearTimeout(readOnlyTimer);
+        readOnlyTimer = void 0;
+        readOnly = false;
+        readOnlyShown = false;
+      } else {
+        readOnly = true;
+        const delayMs = readOnlyOptions?.delayMs ?? 0;
+        if (!readOnlyShown && readOnlyTimer === void 0) {
+          if (delayMs > 0) readOnlyTimer = setTimeout(showReadOnly, delayMs);
+          else readOnlyShown = true;
+        }
+      }
+      applyReadOnly();
+    },
+    isReadOnly: () => readOnly,
+    setEmptyState: setEmptyStateShown,
+    isEmptyStateShown: () => emptyState?.isShown() ?? false,
+    toast: showToast,
+    destroy() {
+      ledger.close();
+    }
+  };
+}
+function carryOwnMode(root, theme, ledger) {
+  ledger.attribute(root, "data-cd-theme", theme);
+  const mirror = () => {
+    if (ledger.isClosed) return;
+    const kontrast = hostKontrast(root);
+    if (root.getAttribute("data-cd-kontrast") !== kontrast)
+      ledger.attribute(root, "data-cd-kontrast", kontrast);
+  };
+  mirror();
+  const MutationObserverClass = globalThis.MutationObserver;
+  if (!MutationObserverClass) return;
+  const observer = new MutationObserverClass(mirror);
+  observer.observe(root.ownerDocument.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-cd-theme", "data-cd-kontrast"],
+    subtree: true
+  });
+  ledger.defer(() => observer.disconnect());
+}
+
+// src/vscode/webview/mount.ts
+function withDestroyHook(shell, beforeDestroy) {
+  return {
+    get root() {
+      return shell.root;
+    },
+    get canvas() {
+      return shell.canvas;
+    },
+    get host() {
+      return shell.host;
+    },
+    get lang() {
+      return shell.lang;
+    },
+    get platform() {
+      return shell.platform;
+    },
+    get messages() {
+      return shell.messages;
+    },
+    get menu() {
+      return shell.menu;
+    },
+    get tooltip() {
+      return shell.tooltip;
+    },
+    get legend() {
+      return shell.legend;
+    },
+    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),
+    setProblems: (summary) => shell.setProblems(summary),
+    setStatus: (status, options) => shell.setStatus(status, options),
+    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();
+    }
+  };
+}
+function mountVsCodeShell(root, options) {
+  const { themes } = options;
+  const disconnectAppearance = connectAppearance({ themes });
+  const disconnectReducedMotion = connectReducedMotion();
+  const disconnect = () => {
+    disconnectAppearance();
+    disconnectReducedMotion();
+  };
+  let shell;
+  try {
+    shell = mountShell(root, { ...options, host: "ide", keyScope: "document" });
+  } catch (error) {
+    disconnect();
+    throw error;
+  }
+  return withDestroyHook(shell, disconnect);
+}
+
+// src/vscode/webview/state.ts
+var SHELL_STATE_KEY = "modelerShell";
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function storedState(api) {
+  const state = api.getState();
+  return isRecord2(state) ? state : {};
+}
+function viewboxFrom(value) {
+  if (!isRecord2(value)) return void 0;
+  const { x, y, width, height } = value;
+  if (typeof x !== "number" || typeof y !== "number") return void 0;
+  if (typeof width !== "number" || typeof height !== "number") return void 0;
+  if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(width) || !Number.isFinite(height)) {
+    return void 0;
+  }
+  return width > 0 && height > 0 ? { x, y, width, height } : void 0;
+}
+function viewFrom(value) {
+  if (!isRecord2(value) || typeof value.userMoved !== "boolean") return void 0;
+  const viewbox = viewboxFrom(value.viewbox);
+  return viewbox ? { viewbox, userMoved: value.userMoved } : void 0;
+}
+function readShellState(api) {
+  const part = storedState(api)[SHELL_STATE_KEY];
+  if (!isRecord2(part)) return {};
+  const state = {};
+  if (typeof part.legendOpen === "boolean") state.legendOpen = part.legendOpen;
+  const view = viewFrom(part.view);
+  if (view) state.view = view;
+  return state;
+}
+function writeShellState(api, patch) {
+  const state = storedState(api);
+  const part = isRecord2(state[SHELL_STATE_KEY]) ? state[SHELL_STATE_KEY] : {};
+  const next = { ...part };
+  if (typeof patch.legendOpen === "boolean") next.legendOpen = patch.legendOpen;
+  const view = viewFrom(patch.view);
+  if (view) next.view = view;
+  if (JSON.stringify(next) === JSON.stringify(state[SHELL_STATE_KEY])) return;
+  api.setState({ ...state, [SHELL_STATE_KEY]: next });
+}
+var PERSIST_VIEW_DELAY_MS = 250;
+function persistView(api, viewport, options = {}) {
+  const delayMs = options.delayMs ?? PERSIST_VIEW_DELAY_MS;
+  let timer;
+  const write = () => {
+    timer = void 0;
+    writeShellState(api, { view: viewport.getState() });
+  };
+  const unsubscribe = viewport.onChange(() => {
+    clearTimeout(timer);
+    timer = setTimeout(write, delayMs);
+  });
+  let stopped = false;
+  return () => {
+    if (stopped) return;
+    stopped = true;
+    unsubscribe();
+    if (timer === void 0) return;
+    clearTimeout(timer);
+    write();
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  APPEARANCE_MESSAGE_TYPE,
+  SHELL_STATE_KEY,
+  appearanceMessage,
+  applyAppearance,
+  connectAppearance,
+  connectReducedMotion,
+  isAppearanceMessage,
+  mountVsCodeShell,
+  persistView,
+  readShellState,
+  writeShellState
+});
+/*! @miragon/modeler-shell icon geometry
+ * Lucide (lucide-static 1.59.0) @license ISC
+ * Copyright (c) 2026 Lucide Icons and Contributors
+ * Derived from Feather, as Lucide's LICENSE lists them: check, circle-x (x-circle), maximize,
+ * minus, plus, triangle-alert (alert-triangle) and x. Feather @license MIT
+ * Copyright (c) 2013-present Cole Bemis
+ * Full notices: THIRD_PARTY_NOTICES.md of @miragon/modeler-shell */
+//# sourceMappingURL=vscode-webview.cjs.map