@miragon/modeler-shell 0.0.0-stage → 0.1.0

package/dist/vscode-webview.cjs

@@ -0,0 +1,2198 @@
+"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/fit.ts
+function fitInsets(layout) {
+  const { container, host, paletteRow, problemsVisible, legendWidth, inspector } = layout;
+  const insets = {
+    top: paletteRow === "second-row" ? SHELL.fitInsetTopSecondRow : SHELL.fitInsetTop,
+    right: SHELL.fitInsetSide,
+    bottom: host === "web" && problemsVisible ? SHELL.fitInsetBottomWeb : 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) {
+    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" }
+};
+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/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/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 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
+    });
+    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/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/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 = ["model", "export", "help"];
+function isPrintable(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 = groups[name] ?? [];
+    return name === "model" ? [...own, ...context.shellModelEntries()] : 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.kind === "action" && 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;
+    if (entry.kind === "action") {
+      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 (!isPrintable(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, options } = 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", () => options.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/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"];
+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");
+  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 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 menu = createMenu({
+    root,
+    layer,
+    id: `cd-shell-menu-${index}`,
+    messages,
+    tooltip,
+    groups: options.menu ?? {},
+    shellModelEntries: () => shellModelEntries,
+    isReadOnly: () => readOnly
+  });
+  ledger.defer(() => menu.destroy());
+  ledger.defer(tooltip.attach(menu.trigger, () => menu.isOpen() ? null : { label: messages.menu }));
+  const canvas = options.canvas ?? createElement(ownerDocument, "div");
+  ledger.addClass(canvas, "cd-shell-canvas");
+  if (!options.canvas) ledger.defer(() => canvas.remove());
+  function moveFocusOutOf(island) {
+    if (!island.contains(ownerDocument.activeElement)) return;
+    const canvasTarget = canvas.querySelector("svg[tabindex]");
+    canvasTarget?.focus({ preventScroll: true });
+    if (canvasTarget && ownerDocument.activeElement === canvasTarget) return;
+    if (!menu.trigger.hidden) menu.trigger.focus({ preventScroll: true });
+  }
+  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 inspector = options.inspector ? createInspector(ownerDocument, options.inspector, (open) => {
+    setState("data-inspector", open ? "open" : null);
+    placeHint();
+  }) : void 0;
+  if (inspector) ledger.defer(() => inspector.destroy());
+  const pill = options.problems ? createProblemsPill({
+    ownerDocument,
+    messages,
+    lang,
+    tooltip,
+    showTooltip: host === "ide",
+    options: options.problems
+  }) : void 0;
+  if (pill) ledger.defer(() => pill.destroy());
+  const zoomPanel = createZoomPanel({ ownerDocument, messages, lang, platform, tooltip });
+  ledger.defer(() => zoomPanel.destroy());
+  root.prepend(menu.trigger, canvas);
+  root.append(
+    ...[
+      status.element,
+      hint?.element,
+      inspector?.element,
+      pill?.element,
+      legend?.element,
+      zoomPanel.element
+    ].filter((element) => element !== void 0),
+    layer
+  );
+  let palette;
+  let paletteRow = "top";
+  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 (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;
+    paletteRow = decidePaletteRow({
+      containerWidth: size.width,
+      paletteWidth: paletteWidth(),
+      menuRight: menuRight()
+    });
+    setState("data-palette", paletteRow);
+    if (legend && !legend.isStarted()) legend.start(options.legend?.open ?? legendStartsOpen(size.height));
+    placeHint();
+  }
+  const ResizeObserverClass = globalThis.ResizeObserver;
+  const resizeObserver = ResizeObserverClass ? new ResizeObserverClass(() => updateLayout()) : void 0;
+  resizeObserver?.observe(root);
+  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(),
+    closeMenu() {
+      const active = ownerDocument.activeElement;
+      menu.close({ restoreFocus: active === menu.trigger || menu.dropdown.contains(active) });
+    },
+    hideTooltip: () => tooltip.hide(),
+    run: (key) => 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 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,
+    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;
+      pill.set(summary);
+      setState("data-problems", pill.isShown() ? "shown" : null);
+      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,
+    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;
+    },
+    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(),
+    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