@miragon/modeler-shell 0.0.0-stage → 0.2.0

package/dist/testing.cjs

@@ -0,0 +1,4663 @@
+"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 name2 in all)
+    __defProp(target, name2, { get: all[name2], 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/testing.ts
+var testing_exports = {};
+__export(testing_exports, {
+  GEOMETRY_TOLERANCE_PX: () => GEOMETRY_TOLERANCE_PX,
+  expectedChromeBoxes: () => expectedChromeBoxes,
+  measureChrome: () => measureChrome,
+  registerShellConformance: () => registerShellConformance,
+  shellConformanceCases: () => shellConformanceCases,
+  vsCodeStubSearch: () => vsCodeStubSearch
+});
+module.exports = __toCommonJS(testing_exports);
+
+// src/core/types.ts
+var CHROME_ISLANDS = [
+  "menu",
+  "palette",
+  "primary",
+  "zoom",
+  "problems",
+  "legend",
+  "inspector",
+  "status",
+  "legal",
+  "toasts",
+  "empty-state",
+  "drop-zone",
+  "problems-popover"
+];
+
+// 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/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: (name2, accepted) => `Couldn't open \u201C${name2}\u201D. Drop a ${accepted} file.`
+};
+
+// src/core/layout.ts
+var PALETTE_CLEARANCE = 16;
+var TOOLTIP_DELAY_MS = 300;
+var INVALID_STATUS_DELAY_MS = 800;
+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";
+}
+
+// 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/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 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";
+
+// src/testing/page-tools.ts
+var installPageTools = (_) => {
+  const scope = window;
+  if (scope.__modelerShellConformance) return;
+  const modifierKeys = ["Control", "Meta", "Shift", "Alt", "AltGraph", "CapsLock", "Fn"];
+  const frame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  const borders = (element) => {
+    const style = getComputedStyle(element);
+    return {
+      left: parseFloat(style.borderLeftWidth) || 0,
+      top: parseFloat(style.borderTopWidth) || 0,
+      right: parseFloat(style.borderRightWidth) || 0,
+      bottom: parseFloat(style.borderBottomWidth) || 0
+    };
+  };
+  const visible = (element) => {
+    if (!element.isConnected) return false;
+    if (typeof element.checkVisibility === "function") {
+      if (!element.checkVisibility({ visibilityProperty: true })) return false;
+    } else {
+      if (element.closest("[hidden]")) return false;
+      for (let node = element; node; node = node.parentElement) {
+        if (getComputedStyle(node).display === "none") return false;
+      }
+      if (getComputedStyle(element).visibility === "hidden") return false;
+    }
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+  };
+  const describe = (element) => {
+    const id = element.id ? `#${element.id}` : "";
+    const classes = [...element.classList].slice(0, 3).map((name2) => `.${name2}`).join("");
+    const chrome = element.getAttribute("data-chrome");
+    return `${element.tagName.toLowerCase()}${id}${classes}${chrome ? `[data-chrome="${chrome}"]` : ""}`;
+  };
+  const tools = {
+    keys: [],
+    documentKeys: [],
+    errors: [],
+    injected: [],
+    cleanups: [],
+    clicks: 0,
+    frame,
+    async settle() {
+      await frame();
+      await frame();
+      const running = typeof document.getAnimations === "function" ? document.getAnimations().filter((animation) => {
+        const end = animation.effect?.getComputedTiming().endTime;
+        return animation.playState === "running" && typeof end === "number" && Number.isFinite(end);
+      }) : [];
+      if (running.length > 0) {
+        await Promise.race([
+          Promise.allSettled(running.map((animation) => animation.finished)),
+          new Promise((resolve) => setTimeout(resolve, 2e3))
+        ]);
+      }
+      await frame();
+    },
+    visible,
+    container(root) {
+      const rect = root.getBoundingClientRect();
+      const border = borders(root);
+      return {
+        width: rect.width - border.left - border.right,
+        height: rect.height - border.top - border.bottom
+      };
+    },
+    box(element, root) {
+      const rect = element.getBoundingClientRect();
+      const origin = root.getBoundingClientRect();
+      const border = borders(root);
+      return {
+        left: rect.left - origin.left - border.left,
+        top: rect.top - origin.top - border.top,
+        width: rect.width,
+        height: rect.height
+      };
+    },
+    describe,
+    facts(element) {
+      const attributes = {};
+      for (const name2 of element.getAttributeNames()) attributes[name2] = element.getAttribute(name2) ?? "";
+      return {
+        tag: element.tagName.toLowerCase(),
+        description: describe(element),
+        attributes,
+        text: (element.textContent ?? "").replace(/\s+/g, " ").trim(),
+        visible: visible(element),
+        disabled: Boolean(element.disabled)
+      };
+    }
+  };
+  const recorder = (into) => (event) => {
+    if (modifierKeys.includes(event.key)) return;
+    into.push({
+      key: event.key,
+      code: event.code,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+      defaultPrevented: event.defaultPrevented
+    });
+  };
+  document.addEventListener("keydown", recorder(tools.documentKeys));
+  window.addEventListener("keydown", recorder(tools.keys));
+  window.addEventListener("error", (event) => {
+    tools.errors.push(event.message || String(event.error));
+  });
+  window.addEventListener("unhandledrejection", (event) => {
+    tools.errors.push(`unhandled rejection: ${String(event.reason)}`);
+  });
+  scope.__modelerShellConformance = tools;
+};
+async function inPage(page, pageFunction, arg) {
+  await page.evaluate(installPageTools, null);
+  return page.evaluate(pageFunction, arg);
+}
+var settleInPage = (_) => window.__modelerShellConformance.settle();
+function settle(page) {
+  return inPage(page, settleInPage, null);
+}
+var CHROME_TARGET_SELECTORS = {
+  menu: '[data-chrome="menu"]',
+  "palette-entry": '[data-chrome="palette"] [data-action]',
+  "palette-tab-stop": '[data-chrome="palette"] [data-action][tabindex="0"]',
+  "zoom-out": '[data-chrome="zoom"] [data-zoom="out"]',
+  "zoom-actual": '[data-chrome="zoom"] [data-zoom="actual"]',
+  "zoom-in": '[data-chrome="zoom"] [data-zoom="in"]',
+  "zoom-fit": '[data-chrome="zoom"] [data-zoom="fit"]',
+  canvas: ".djs-container > svg",
+  primary: '[data-chrome="primary"]',
+  pill: '[data-chrome="problems"]'
+};
+var targetProbe = ({ root, selector }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const element = [...rootElement.querySelectorAll(selector)].find((candidate) => tools.visible(candidate));
+  if (!element) return null;
+  const rect = element.getBoundingClientRect();
+  return {
+    client: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 },
+    box: tools.box(element, rootElement),
+    label: (element.getAttribute("aria-label") ?? element.textContent ?? "").replace(/\s+/g, " ").trim()
+  };
+};
+async function findTarget(page, root, target) {
+  return inPage(page, targetProbe, { root, selector: CHROME_TARGET_SELECTORS[target] });
+}
+var focusProbe = ({ root, selector }) => {
+  const tools = window.__modelerShellConformance;
+  const element = document.querySelector(root)?.querySelector(selector);
+  if (!element) return null;
+  element.focus();
+  return document.activeElement === element ? tools.describe(element) : null;
+};
+async function focusTarget(page, root, target) {
+  return inPage(page, focusProbe, { root, selector: CHROME_TARGET_SELECTORS[target] });
+}
+var overlayProbe = ({ root, role }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const shown = [...rootElement.querySelectorAll(`[role="${role}"]`)].filter(
+    (element) => tools.visible(element)
+  );
+  const first = shown[0];
+  if (!first) return null;
+  return {
+    box: tools.box(first, rootElement),
+    text: (first.textContent ?? "").replace(/\s+/g, " ").trim(),
+    count: shown.length,
+    id: first.id
+  };
+};
+async function findOverlay(page, root, role) {
+  return inPage(page, overlayProbe, { root, role });
+}
+var afterPressProbe = async ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  await tools.settle();
+  const readout = document.querySelector(root)?.querySelector('[data-chrome="zoom"] [data-zoom="actual"]')?.textContent;
+  const digits = (readout ?? "").replace(/[^0-9]/g, "");
+  return {
+    zoom: digits ? Number(digits) : null,
+    keys: tools.keys.splice(0),
+    documentKeys: tools.documentKeys.splice(0)
+  };
+};
+var clearKeysProbe = (_) => {
+  const tools = window.__modelerShellConformance;
+  tools.keys.splice(0);
+  tools.documentKeys.splice(0);
+};
+var injectProbe = ({ root, kind }) => {
+  const tools = window.__modelerShellConformance;
+  const parent = document.querySelector(root) ?? tools.armedRoot ?? document.body;
+  const host = parent.isConnected ? parent : document.body;
+  const element = kind === "input" || kind === "textarea" ? document.createElement(kind) : document.createElement("div");
+  element.setAttribute("data-modeler-shell-conformance", kind);
+  element.style.cssText = "position:absolute;left:0;top:0;width:40px;height:20px;";
+  if (kind === "modal" || kind === "popover") {
+    element.setAttribute("role", "dialog");
+    element.setAttribute("aria-label", "Conformance stand-in");
+    if (kind === "modal") element.setAttribute("aria-modal", "true");
+  }
+  if (kind === "contenteditable") element.setAttribute("contenteditable", "true");
+  else if (kind !== "input" && kind !== "textarea") element.tabIndex = -1;
+  host.append(element);
+  tools.injected.push(element);
+  element.focus();
+  return document.activeElement === element;
+};
+var removeInjectedProbe = (_) => {
+  const tools = window.__modelerShellConformance;
+  for (const element of tools.injected.splice(0)) element.remove();
+  for (const cleanup of tools.cleanups.splice(0)) cleanup();
+};
+var canvasHandlesProbe = ({ root, key }) => {
+  const tools = window.__modelerShellConformance;
+  const svg = document.querySelector(root)?.querySelector(".djs-container > svg");
+  if (!svg) return false;
+  const listener = (event) => {
+    if (event.key === key) event.preventDefault();
+  };
+  svg.addEventListener("keydown", listener);
+  tools.cleanups.push(() => svg.removeEventListener("keydown", listener));
+  return true;
+};
+var armCleanupProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (rootElement) tools.armedRoot = rootElement;
+  tools.errors.splice(0);
+  tools.keys.splice(0);
+  tools.documentKeys.splice(0);
+  return Boolean(rootElement);
+};
+var leftoverProbe = (_) => {
+  const tools = window.__modelerShellConformance;
+  const ours = (element) => element.hasAttribute("data-modeler-shell-conformance");
+  const shellClass = (name2) => name2.startsWith("cd-shell");
+  const root = tools.armedRoot;
+  return {
+    classedElements: [...document.querySelectorAll("[class]")].filter((element) => element !== document.documentElement && !ours(element)).filter((element) => [...element.classList].some(shellClass)).map((element) => tools.describe(element)),
+    documentClasses: [...document.documentElement.classList].filter(shellClass),
+    chromeElements: [...document.querySelectorAll("[data-chrome]")].map((element) => tools.describe(element)),
+    rootClasses: root ? [...root.classList].filter(shellClass) : [],
+    rootAttributes: root ? root.getAttributeNames() : [],
+    errors: [...tools.errors]
+  };
+};
+var hostPageModeProbe = ({ theme, kontrast }) => {
+  const html = document.documentElement;
+  html.setAttribute("data-cd-theme", theme);
+  if (kontrast) html.setAttribute("data-cd-kontrast", kontrast);
+  else html.removeAttribute("data-cd-kontrast");
+};
+
+// src/testing/geometry.ts
+var GEOMETRY_TOLERANCE_PX = 1;
+var DEFAULT_ROOT = ".cd-shell";
+var ZOOM_PANEL_WIDTH = 173;
+var LEGAL_LINE = LEGAL_LINE_HEIGHT;
+var EMPTY_STATE_MAX_WIDTH = 400;
+var POPOVER_MAX_WIDTH = 320;
+var POPOVER_MAX_HEIGHT = 320;
+var LEGEND_MIN_WIDTH = 184;
+var STATUS_MAX_WIDTH = 560;
+var DROPDOWN_MAX_WIDTH = 320;
+var TOOLTIP_MAX_WIDTH = 280;
+var SHEET_MAX_HEIGHT_SHARE = 0.45;
+var measureProbe = ({ root, islands }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return { error: `no element matches the shell root selector "${root}"` };
+  const boxes = {};
+  const duplicates = [];
+  for (const element of rootElement.querySelectorAll("[data-chrome]")) {
+    const name2 = element.getAttribute("data-chrome") ?? "";
+    if (!islands.includes(name2) || !tools.visible(element)) continue;
+    if (boxes[name2]) {
+      duplicates.push(name2);
+      continue;
+    }
+    boxes[name2] = tools.box(element, rootElement);
+  }
+  const cardWidths = [...rootElement.querySelectorAll('[data-chrome="toasts"] > [data-status]')].filter((card) => tools.visible(card)).map((card) => card.getBoundingClientRect().width);
+  return {
+    ...cardWidths.length > 0 ? { toastCardWidth: Math.max(...cardWidths) } : {},
+    container: tools.container(rootElement),
+    paletteRow: rootElement.getAttribute("data-palette") === "second-row" ? "second-row" : "top",
+    islands: boxes,
+    open: {
+      legend: rootElement.getAttribute("data-legend") === "open",
+      inspector: rootElement.getAttribute("data-inspector") === "open",
+      problems: rootElement.getAttribute("data-problems") === "shown",
+      emptyState: rootElement.getAttribute("data-empty-state") === "shown",
+      primaryCollapsed: rootElement.getAttribute("data-primary") === "collapsed",
+      zoomRaised: rootElement.getAttribute("data-zoom-row") === "raised"
+    },
+    duplicates
+  };
+};
+async function measureChrome(page, root = DEFAULT_ROOT) {
+  const result = await inPage(page, measureProbe, { root, islands: CHROME_ISLANDS });
+  if ("error" in result) throw new Error(`@miragon/modeler-shell conformance: ${result.error}`);
+  if (result.duplicates.length > 0) {
+    const names = [...new Set(result.duplicates)].map((name2) => `[data-chrome="${name2}"]`).join(", ");
+    throw new Error(`@miragon/modeler-shell conformance: more than one visible ${names}`);
+  }
+  return {
+    container: result.container,
+    paletteRow: result.paletteRow,
+    islands: result.islands,
+    open: result.open,
+    ...result.toastCardWidth !== void 0 ? { toastCardWidth: result.toastCardWidth } : {}
+  };
+}
+function isNarrow(container) {
+  return container.width <= SHELL.narrow;
+}
+function isVeryNarrow(container) {
+  return container.width <= SHELL.veryNarrow;
+}
+function sheetOpen(measurement) {
+  return measurement.open.inspector && isNarrow(measurement.container);
+}
+function bottomObstacle(box, container) {
+  return { left: box.left, right: box.left + box.width, top: container.height - box.top };
+}
+var WEB_ONLY = {
+  primary: "the top right stays empty in IDE and embedded hosts (guide \xA75.7)",
+  legal: "the legal line belongs to the web app; an IDE or an embedding host carries its own (guide \xA75.2)",
+  "empty-state": "IDE and embedded hosts have no start screen; they show the empty-file hint (guide \xA713.5)",
+  "drop-zone": "IDE and embedded hosts have no drop zone; their files belong to the host (guide \xA75.2)"
+};
+var WORK_CHROME = [
+  "menu",
+  "primary",
+  "palette",
+  "zoom",
+  "problems",
+  "legend",
+  "status",
+  "inspector"
+];
+function chromeExpectations(measurement, host) {
+  const { container, islands, open, paletteRow } = measurement;
+  const { edge, gap, row, free, inspectorWidth } = SHELL;
+  const web = host === "web";
+  const startScreen2 = web && open.emptyState;
+  const raised = web && open.zoomRaised;
+  const secondRow = paletteRow === "second-row";
+  const sheet = sheetOpen(measurement);
+  const sideInspector = open.inspector && !isNarrow(container);
+  const legalHeight = legalLineHeight(web ? islands.legal?.height : void 0);
+  const boxes = {};
+  const limits = {};
+  const hidden = {};
+  const required = startScreen2 ? ["empty-state"] : ["menu", "palette"];
+  if (web) required.push("legal");
+  boxes.menu = { left: edge, top: edge, width: row, height: row };
+  boxes.palette = { top: secondRow ? free : edge, height: row, centerX: container.width / 2 };
+  const menu = islands.menu;
+  const primary = web ? islands.primary : void 0;
+  if (secondRow) {
+    limits.palette = { maxWidth: container.width - 2 * edge };
+  } else {
+    limits.palette = {};
+    if (menu) limits.palette.minLeft = menu.left + menu.width + PALETTE_CLEARANCE;
+    if (primary) limits.palette.minRight = container.width - primary.left + PALETTE_CLEARANCE;
+  }
+  if (sheet) {
+    const reason = "hidden while the inspector is a bottom sheet (guide \xA75.11)";
+    hidden.zoom = reason;
+    hidden.problems = reason;
+    hidden.legend = reason;
+  } else {
+    if (!startScreen2) required.push("zoom");
+    const legalStack = edge + legalHeight + gap;
+    boxes.zoom = { right: edge, bottom: raised ? legalStack : edge, width: ZOOM_PANEL_WIDTH, height: row };
+    const stackBase = web ? legalStack : edge;
+    if (islands.problems) boxes.problems = { left: edge, bottom: stackBase, height: row };
+    if (islands.legend) {
+      const besidePill = open.problems ? stackBase + row + gap : stackBase;
+      const aboveBottomRow = (raised ? legalStack : edge) + row + gap;
+      const bottom = isVeryNarrow(container) ? Math.max(besidePill, aboveBottomRow) : besidePill;
+      boxes.legend = { left: edge, bottom };
+      limits.legend = { minWidth: LEGEND_MIN_WIDTH };
+    }
+  }
+  if (islands.inspector) {
+    if (sheet) {
+      boxes.inspector = { left: edge, right: edge, bottom: edge };
+      limits.inspector = { maxHeight: container.height * SHEET_MAX_HEIGHT_SHARE };
+    } else {
+      boxes.inspector = { top: free, right: edge, width: inspectorWidth };
+      limits.inspector = { minBottom: free };
+    }
+  }
+  if (islands.status) {
+    const strip = sideInspector ? container.width - edge - inspectorWidth : container.width;
+    boxes.status = { top: secondRow ? free + row + edge : free, centerX: strip / 2 };
+    limits.status = {
+      minLeft: edge,
+      maxWidth: Math.min(STATUS_MAX_WIDTH, container.width - 2 * edge)
+    };
+  }
+  if (web) {
+    if (primary) {
+      boxes.primary = { top: edge, right: edge, height: row };
+      if (open.primaryCollapsed) boxes.primary.width = row;
+    }
+    boxes.legal = { left: edge, bottom: edge, height: legalHeight };
+    limits.legal = { maxWidth: container.width - 2 * edge };
+    if (islands["empty-state"]) {
+      boxes["empty-state"] = {
+        centerX: container.width / 2,
+        centerY: container.height / 2,
+        width: Math.min(EMPTY_STATE_MAX_WIDTH, container.width - 2 * edge)
+      };
+    }
+    if (islands["drop-zone"]) boxes["drop-zone"] = { left: edge, top: edge, right: edge, bottom: edge };
+  } else {
+    Object.assign(hidden, WEB_ONLY);
+  }
+  if (host === "ide") {
+    hidden.toasts = "the IDE host shows no toasts; the extension shows the host's notification (guide \xA713.5)";
+    hidden["problems-popover"] = "the IDE host opens its Problems view, never a list of its own (guide \xA75.10)";
+  } else {
+    if (islands.toasts) {
+      const obstacles = ["zoom", "legal", "problems"].flatMap((name2) => {
+        const box = islands[name2];
+        return box ? [bottomObstacle(box, container)] : [];
+      });
+      boxes.toasts = {
+        centerX: container.width / 2,
+        width: toastStackWidth(container.width),
+        bottom: toastStackBottom({
+          containerWidth: container.width,
+          obstacles,
+          cardWidth: measurement.toastCardWidth
+        })
+      };
+    }
+    const pill = islands.problems;
+    if (pill) {
+      boxes["problems-popover"] = { left: edge, bottom: container.height - pill.top + gap };
+      limits["problems-popover"] = {
+        maxWidth: Math.min(POPOVER_MAX_WIDTH, container.width - 2 * edge),
+        maxHeight: POPOVER_MAX_HEIGHT
+      };
+    } else {
+      hidden["problems-popover"] = "the problems list opens only above a visible pill (guide \xA75.10)";
+    }
+  }
+  return { boxes, limits, required, hidden };
+}
+function expectedChromeBoxes(measurement, host) {
+  return chromeExpectations(measurement, host).boxes;
+}
+var round = (value) => Math.round(value * 10) / 10;
+function sides(box, container) {
+  return {
+    left: box.left,
+    top: box.top,
+    right: container.width - box.left - box.width,
+    bottom: container.height - box.top - box.height,
+    width: box.width,
+    height: box.height,
+    centerX: box.left + box.width / 2,
+    centerY: box.top + box.height / 2
+  };
+}
+function boxMismatches(name2, box, expected, container, tolerance = GEOMETRY_TOLERANCE_PX) {
+  const actual = sides(box, container);
+  return Object.keys(expected).flatMap((field) => {
+    const want = expected[field];
+    if (want === void 0) return [];
+    const have = actual[field];
+    return Math.abs(have - want) > tolerance + 1e-6 ? [`${name2}: ${field} is ${round(have)}px, expected ${round(want)}px (\xB1${tolerance}px)`] : [];
+  });
+}
+function limitViolations(name2, box, limits, container, tolerance = GEOMETRY_TOLERANCE_PX) {
+  const actual = sides(box, container);
+  const problems = [];
+  const atLeast = (field, have, limit) => {
+    if (limit !== void 0 && have < limit - tolerance - 1e-6) {
+      problems.push(`${name2}: ${field} is ${round(have)}px, at least ${round(limit)}px expected`);
+    }
+  };
+  const atMost = (field, have, limit) => {
+    if (limit !== void 0 && have > limit + tolerance + 1e-6) {
+      problems.push(`${name2}: ${field} is ${round(have)}px, at most ${round(limit)}px expected`);
+    }
+  };
+  atLeast("width", actual.width, limits.minWidth);
+  atMost("width", actual.width, limits.maxWidth);
+  atMost("height", actual.height, limits.maxHeight);
+  atLeast("left", actual.left, limits.minLeft);
+  atLeast("right", actual.right, limits.minRight);
+  atLeast("bottom", actual.bottom, limits.minBottom);
+  return problems;
+}
+function geometryProblems(measurement, host, tolerance = GEOMETRY_TOLERANCE_PX) {
+  const { container, islands, open, paletteRow } = measurement;
+  const expectations = chromeExpectations(measurement, host);
+  const problems = [];
+  const sheet = sheetOpen(measurement);
+  for (const name2 of expectations.required) {
+    if (!islands[name2]) problems.push(`${name2}: [data-chrome="${name2}"] is missing or not visible`);
+  }
+  for (const name2 of CHROME_ISLANDS) {
+    const box = islands[name2];
+    if (!box) continue;
+    const expected = expectations.boxes[name2];
+    if (!expected) {
+      const reason = expectations.hidden[name2] ?? "no anchor of the guide applies";
+      problems.push(`${name2}: visible, but ${reason}`);
+      continue;
+    }
+    problems.push(...boxMismatches(name2, box, expected, container, tolerance));
+    const limits = expectations.limits[name2];
+    if (limits) problems.push(...limitViolations(name2, box, limits, container, tolerance));
+  }
+  if (isNarrow(container) && paletteRow !== "second-row") {
+    problems.push(
+      `palette: data-palette="${paletteRow}" in a ${round(container.width)}px wide container; up to ${SHELL.narrow}px it is "second-row" (guide \xA75.15)`
+    );
+  }
+  const palette = islands.palette;
+  const menu = islands.menu;
+  const primary = host === "web" ? islands.primary : void 0;
+  if (paletteRow === "second-row" && !isNarrow(container) && palette && menu) {
+    const clipped = palette.width >= container.width - 2 * SHELL.edge - tolerance;
+    const topRowLeft = (container.width - palette.width) / 2;
+    const toMenu = topRowLeft - menu.left - menu.width;
+    const toPrimary = primary ? container.width - SHELL.edge - SHELL.row - (topRowLeft + palette.width) : Number.POSITIVE_INFINITY;
+    const fits = toMenu >= PALETTE_CLEARANCE + tolerance && toPrimary >= PALETTE_CLEARANCE + tolerance;
+    if (!clipped && fits) {
+      const kept = primary ? `${round(toMenu)}px to the menu trigger and ${round(toPrimary)}px to the primary action's icon` : `${round(toMenu)}px to the menu trigger`;
+      problems.push(
+        `palette: in the second row although the top row keeps ${kept} (at least ${PALETTE_CLEARANCE}px suffice, guide \xA75.15)`
+      );
+    }
+  }
+  const state = (island, flag, attribute2, hiddenBySheet) => {
+    const shown = Boolean(islands[island]);
+    if (flag && !shown && !hiddenBySheet) {
+      problems.push(`${island}: the root carries ${attribute2}, but the island is not visible`);
+    }
+    if (!flag && shown) problems.push(`${island}: visible, but the root lacks ${attribute2}`);
+  };
+  state("problems", open.problems, 'data-problems="shown"', sheet || open.emptyState);
+  state("legend", open.legend, 'data-legend="open"', sheet || open.emptyState);
+  state("inspector", open.inspector, 'data-inspector="open"', open.emptyState);
+  state("empty-state", open.emptyState, 'data-empty-state="shown"', false);
+  problems.push(...webRowProblems(measurement, host, tolerance));
+  return problems;
+}
+function webRowProblems(measurement, host, tolerance = GEOMETRY_TOLERANCE_PX) {
+  const { container, islands, open } = measurement;
+  const problems = [];
+  if (host !== "web") {
+    if (open.primaryCollapsed)
+      problems.push('primary: the root carries data-primary="collapsed" outside the web app');
+    if (open.zoomRaised) problems.push('zoom: the root carries data-zoom-row="raised" outside the web app');
+    return problems;
+  }
+  if (open.primaryCollapsed && !islands.primary && !open.emptyState) {
+    problems.push('primary: the root carries data-primary="collapsed", but no primary action is visible');
+  }
+  const legal = islands.legal;
+  const zoom = islands.zoom;
+  if (legal && zoom) {
+    const legalRight = legal.left + legal.width;
+    const gap = container.width - SHELL.edge - zoom.width - legalRight;
+    const raised = zoomRowRaised({ containerWidth: container.width, legalRight, zoomWidth: zoom.width });
+    const borderline = Math.abs(gap - SHELL.gap) <= tolerance;
+    if (raised && !open.zoomRaised && !borderline) {
+      problems.push(
+        `zoom: ${round(gap)}px between the legal line and the zoom panel, but the root lacks data-zoom-row="raised" (below ${SHELL.gap}px the zoom panel stands above the legal line)`
+      );
+    }
+    if (!raised && open.zoomRaised && !borderline) {
+      problems.push(
+        `zoom: the root carries data-zoom-row="raised" although the zoom panel keeps ${round(gap)}px to the legal line (at least ${SHELL.gap}px)`
+      );
+    }
+  }
+  return problems;
+}
+function expectedFitInsets(measurement, host) {
+  const { container, islands, open, paletteRow } = measurement;
+  const insets = {
+    top: paletteRow === "second-row" ? SHELL.fitInsetTopSecondRow : SHELL.fitInsetTop,
+    right: SHELL.fitInsetSide,
+    bottom: host === "web" && (open.problems || open.zoomRaised) ? SHELL.fitInsetBottomWeb + legalLineHeight(islands.legal?.height) - LEGAL_LINE : SHELL.fitInsetBottom,
+    left: SHELL.fitInsetSide
+  };
+  if (sheetOpen(measurement)) {
+    const sheet = islands.inspector;
+    insets.bottom = sheet ? container.height - sheet.top + SHELL.edge : SHELL.fitInsetBottom;
+    return insets;
+  }
+  if (open.inspector) insets.right = SHELL.edge + SHELL.inspectorWidth + SHELL.fitInsetSide;
+  const legend = islands.legend;
+  if (open.legend && legend && legend.width > 0 && container.width > SHELL.veryNarrow) {
+    insets.left = SHELL.edge + legend.width + SHELL.fitInsetSide;
+  }
+  return insets;
+}
+function freeRectangle(measurement, host) {
+  const { container } = measurement;
+  const insets = expectedFitInsets(measurement, host);
+  const horizontal = container.width - insets.left - insets.right > 0;
+  const vertical = container.height - insets.top - insets.bottom > 0;
+  return {
+    left: horizontal ? insets.left : 0,
+    top: vertical ? insets.top : 0,
+    right: horizontal ? container.width - insets.right : container.width,
+    bottom: vertical ? container.height - insets.bottom : container.height
+  };
+}
+function dropdownProblems(box, container, tolerance = GEOMETRY_TOLERANCE_PX) {
+  const { edge, gap, row, menuMinWidth } = SHELL;
+  return [
+    ...boxMismatches("dropdown", box, { top: edge + row + gap, left: edge }, container, tolerance),
+    ...limitViolations(
+      "dropdown",
+      box,
+      {
+        minWidth: menuMinWidth,
+        maxWidth: Math.min(DROPDOWN_MAX_WIDTH, container.width - 2 * edge),
+        minBottom: edge
+      },
+      container,
+      tolerance
+    )
+  ];
+}
+function tooltipProblems(tooltip, anchor, row, container, tolerance = GEOMETRY_TOLERANCE_PX, bottomRow = SHELL.edge) {
+  const { edge, gap, row: rowHeight, free } = SHELL;
+  const clamp = (centred) => Math.max(edge, Math.min(centred, container.width - edge - tooltip.width));
+  const expectedAt = (left) => row === "bottom" ? { left, bottom: bottomRow + rowHeight + gap } : { left, top: (row === "top" ? edge : free) + rowHeight + gap };
+  let mismatches = boxMismatches(
+    "tooltip",
+    tooltip,
+    expectedAt(clamp(anchor.left + anchor.width / 2 - tooltip.width / 2)),
+    container,
+    tolerance
+  );
+  if (row === "second-row" && mismatches.length > 0) {
+    const inContainer = boxMismatches(
+      "tooltip",
+      tooltip,
+      expectedAt(clamp(container.width / 2 - tooltip.width / 2)),
+      container,
+      tolerance
+    );
+    if (inContainer.length === 0) mismatches = inContainer;
+  }
+  return [
+    ...mismatches,
+    ...limitViolations(
+      "tooltip",
+      tooltip,
+      { minLeft: edge, minRight: edge, maxWidth: Math.min(TOOLTIP_MAX_WIDTH, container.width - 2 * edge) },
+      container,
+      tolerance
+    )
+  ];
+}
+
+// src/testing/facts.ts
+var DOM_ORDER = [
+  "menu",
+  "primary",
+  "palette",
+  "canvas",
+  "status",
+  "hint",
+  "empty-state",
+  "inspector",
+  "problems",
+  "legend",
+  "legal",
+  "zoom",
+  "toasts"
+];
+var ariaProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const find = (selector) => rootElement.querySelector(selector);
+  const factsOf = (element) => element ? tools.facts(element) : null;
+  const navigatorLike = navigator;
+  const trigger = find('[data-chrome="menu"]');
+  const controlsId = trigger?.getAttribute("aria-controls");
+  const palette = find('[data-chrome="palette"]');
+  const toolbar = palette?.querySelector('[role="toolbar"]') ?? palette?.querySelector(".djs-palette-entries");
+  const zoom = find('[data-chrome="zoom"]');
+  const zoomButtons = {};
+  for (const name2 of ["out", "actual", "in", "fit"]) {
+    const button = zoom?.querySelector(`[data-zoom="${name2}"]`);
+    if (button) zoomButtons[name2] = tools.facts(button);
+  }
+  const legend = find('[data-chrome="legend"]');
+  const labelledBy = legend?.getAttribute("aria-labelledby");
+  const legal = find('[data-chrome="legal"]');
+  const pillControls = find('[data-chrome="problems"]')?.getAttribute("aria-controls");
+  const parts = [
+    ["menu", trigger],
+    ["primary", find('[data-chrome="primary"]')],
+    ["palette", palette],
+    ["canvas", find(".djs-container > svg")],
+    ["status", find('[data-chrome="status"]')],
+    ["hint", find(".cd-shell-hint")],
+    ["inspector", find('[data-chrome="inspector"]')],
+    ["problems", find('[data-chrome="problems"]')],
+    ["empty-state", find('[data-chrome="empty-state"]')],
+    ["legend", legend],
+    ["legal", find('[data-chrome="legal"]')],
+    ["zoom", zoom],
+    ["toasts", find('[data-chrome="toasts"]')]
+  ];
+  const present = parts.filter((part) => part[1] !== null);
+  present.sort(([, a], [, b]) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+  const titledSelector = [
+    '[data-chrome="menu"][title]',
+    '[data-chrome="primary"][title]',
+    '[data-chrome="palette"] [data-action][title]',
+    '[data-chrome="zoom"] [title]',
+    '[data-chrome="problems"][title]'
+  ].join(", ");
+  return {
+    platform: /mac/i.test(navigatorLike.userAgentData?.platform ?? navigatorLike.platform ?? "") ? "mac" : "other",
+    documentLang: document.documentElement.lang,
+    rootLang: rootElement.getAttribute("lang"),
+    trigger: factsOf(trigger),
+    controlled: factsOf(controlsId ? document.getElementById(controlsId) : null),
+    palette: factsOf(palette),
+    toolbar: factsOf(toolbar),
+    canvas: factsOf(find(".djs-container > svg")),
+    entries: [...palette?.querySelectorAll("[data-action]") ?? []].map((entry) => ({
+      ...tools.facts(entry),
+      group: entry.closest("[data-group]")?.getAttribute("data-group") ?? null
+    })),
+    zoom: factsOf(zoom),
+    zoomButtons,
+    order: present.map(([name2]) => name2),
+    positiveTabindex: [...rootElement.querySelectorAll("[tabindex]")].filter((element) => Number(element.getAttribute("tabindex")) > 0).map((element) => `${tools.describe(element)} (tabindex="${element.getAttribute("tabindex")}")`),
+    titled: [...rootElement.querySelectorAll(titledSelector)].map((element) => tools.describe(element)),
+    problems: factsOf(find('[data-chrome="problems"]')),
+    status: factsOf(find('[data-chrome="status"]')),
+    legend: factsOf(legend),
+    legendTitle: labelledBy ? labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent?.trim() ?? "").join(" ").trim() : null,
+    legendClose: factsOf(legend?.querySelector("button")),
+    inspector: factsOf(find('[data-chrome="inspector"]')),
+    primary: factsOf(find('[data-chrome="primary"]')),
+    primaryCollapsed: rootElement.getAttribute("data-primary") === "collapsed",
+    legal: factsOf(legal),
+    legalLinks: [...legal?.querySelectorAll("a") ?? []].map((link) => ({
+      text: (link.textContent ?? "").replace(/\s+/g, " ").trim(),
+      href: link.getAttribute("href") ?? "",
+      lang: link.getAttribute("lang"),
+      target: link.getAttribute("target"),
+      rel: link.getAttribute("rel")
+    })),
+    problemsControlled: factsOf(pillControls ? document.getElementById(pillControls) : null)
+  };
+};
+var menuProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const trigger = rootElement.querySelector('[data-chrome="menu"]');
+  const menu = [...rootElement.querySelectorAll('[role="menu"]')].find((element) => tools.visible(element)) ?? null;
+  const items = menu ? [
+    ...menu.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]')
+  ].filter((item) => tools.visible(item)) : [];
+  return {
+    expanded: trigger?.getAttribute("aria-expanded") ?? null,
+    controls: trigger?.getAttribute("aria-controls") ?? null,
+    menu: menu ? tools.facts(menu) : null,
+    items: items.map((item) => {
+      const group = item.closest('[role="group"]');
+      return {
+        role: item.getAttribute("role") ?? "",
+        name: (item.getAttribute("aria-label") ?? item.textContent ?? "").replace(/\s+/g, " ").trim(),
+        checked: item.getAttribute("aria-checked"),
+        disabled: item.getAttribute("aria-disabled"),
+        haspopup: item.getAttribute("aria-haspopup"),
+        group: group && menu?.contains(group) ? group.getAttribute("aria-label") ?? "" : null
+      };
+    }),
+    active: items.findIndex((item) => item === document.activeElement),
+    activeIsTrigger: Boolean(trigger) && document.activeElement === trigger
+  };
+};
+var paletteFocusProbe = ({ root }) => {
+  const palette = document.querySelector(root)?.querySelector('[data-chrome="palette"]');
+  if (!palette) return null;
+  const entries = [...palette.querySelectorAll("[data-action]")];
+  const active = document.activeElement;
+  return {
+    entries: entries.map((entry) => entry.getAttribute("data-action") ?? ""),
+    tabStops: entries.filter((entry) => entry.getAttribute("tabindex") === "0").map((entry) => entry.getAttribute("data-action") ?? ""),
+    active: active && entries.includes(active) ? active.getAttribute("data-action") : null
+  };
+};
+var zoomButtonsProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const zoom = document.querySelector(root)?.querySelector('[data-chrome="zoom"]');
+  const buttons = {};
+  for (const name2 of ["out", "actual", "in", "fit"]) {
+    const button = zoom?.querySelector(`[data-zoom="${name2}"]`);
+    if (button) buttons[name2] = tools.facts(button);
+  }
+  return buttons;
+};
+var MODE_ROLES = ["--cd-ui-grund", "--cd-ui-text", "--cd-ui-flaeche-hoch", "--cd-ui-linie"];
+var appearanceProbe = ({
+  root,
+  roles
+}) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const mode = (name2, element) => {
+    const style = getComputedStyle(element);
+    const resolved = {};
+    for (const role of roles) resolved[role] = style.getPropertyValue(role).trim();
+    return { name: name2, description: tools.describe(element), colorScheme: style.colorScheme, roles: resolved };
+  };
+  const parts = [mode("root", rootElement)];
+  const canvas = rootElement.querySelector(".djs-container");
+  if (canvas) parts.push(mode("canvas", canvas));
+  for (const island of rootElement.querySelectorAll("[data-chrome]")) {
+    if (tools.visible(island)) parts.push(mode(island.getAttribute("data-chrome") ?? "island", island));
+  }
+  for (const [name2, role] of [
+    ["dropdown", "menu"],
+    ["tooltip", "tooltip"]
+  ]) {
+    const popup = [...rootElement.querySelectorAll(`[role="${role}"]`)].find(
+      (element) => tools.visible(element)
+    );
+    if (popup) parts.push(mode(name2, popup));
+  }
+  return {
+    documentClasses: [...document.documentElement.classList],
+    themed: [...document.querySelectorAll("[data-cd-theme], [data-cd-kontrast]")].map((element) => ({
+      description: tools.describe(element),
+      isDocument: element === document.documentElement,
+      relation: element === rootElement ? "self" : element.contains(rootElement) ? "ancestor" : rootElement.contains(element) ? "descendant" : "elsewhere",
+      theme: element.getAttribute("data-cd-theme"),
+      kontrast: element.getAttribute("data-cd-kontrast")
+    })),
+    parts
+  };
+};
+var activeStopProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const active = document.activeElement;
+  const rootElement = document.querySelector(root);
+  if (!active || active === document.body || !rootElement) return { description: "<body>", kind: "other" };
+  const description = tools.describe(active);
+  if (!rootElement.contains(active))
+    return { description: `${description} outside the shell root`, kind: "other" };
+  if (active.matches('[data-chrome="palette"] [data-action]')) return { description, kind: "palette" };
+  if (active.matches(".djs-container > svg")) return { description, kind: "canvas" };
+  if (active.closest('[data-chrome="primary"]')) return { description, kind: "primary" };
+  const tabindex = active.getAttribute("tabindex");
+  return {
+    description: tabindex === null ? description : `${description}[tabindex="${tabindex}"]`,
+    kind: "other"
+  };
+};
+var paletteShortcutProbe = ({
+  root
+}) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  const active = document.activeElement;
+  if (!rootElement || !active?.matches('[data-chrome="palette"] [data-action]')) return null;
+  const tooltip = [...rootElement.querySelectorAll('[role="tooltip"]')].find(
+    (element) => tools.visible(element)
+  );
+  const chip = tooltip ? [...tooltip.querySelectorAll("kbd")].find((element) => tools.visible(element)) : void 0;
+  return {
+    action: active.getAttribute("data-action") ?? "",
+    chip: (chip?.textContent ?? "").trim(),
+    keyShortcuts: active.getAttribute("aria-keyshortcuts")
+  };
+};
+var surroundProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const transparent = (color) => {
+    if (color === "" || color === "transparent") return true;
+    const legacy = /^rgba\([^)]*,\s*([\d.]+)\)$/.exec(color);
+    if (legacy) return Number(legacy[1]) === 0;
+    const modern = /\/\s*([\d.]+)%?\s*\)$/.exec(color);
+    return modern ? Number(modern[1]) === 0 : false;
+  };
+  const start = rootElement.querySelector(".djs-container");
+  let painted = null;
+  for (let node = start; node && !painted; node = node.parentElement) {
+    const color = getComputedStyle(node).backgroundColor;
+    if (!transparent(color)) painted = { description: tools.describe(node), color };
+    if (node === rootElement) break;
+  }
+  const probe = document.createElement("span");
+  probe.setAttribute("data-modeler-shell-conformance", "role-probe");
+  probe.style.cssText = "position:absolute;visibility:hidden;background-color:var(--cd-ui-grund);";
+  rootElement.append(probe);
+  const grund = getComputedStyle(probe).backgroundColor;
+  probe.remove();
+  return { container: start !== null, painted, grund };
+};
+var paletteEntriesProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const palette = document.querySelector(root)?.querySelector('[data-chrome="palette"]');
+  if (!palette) return [];
+  return [...palette.querySelectorAll("[data-action]")].filter((entry) => tools.visible(entry)).map((entry) => {
+    const rect = entry.getBoundingClientRect();
+    return {
+      action: entry.getAttribute("data-action") ?? "",
+      group: entry.closest("[data-group]")?.getAttribute("data-group") ?? null,
+      pressed: entry.getAttribute("aria-pressed") === "true",
+      disabled: entry.getAttribute("aria-disabled") === "true",
+      client: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+    };
+  });
+};
+var paletteColorProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const palette = document.querySelector(root)?.querySelector('[data-chrome="palette"]');
+  if (!palette) return null;
+  const resolve = (role) => {
+    const probe = document.createElement("span");
+    probe.setAttribute("data-modeler-shell-conformance", "role-probe");
+    probe.style.cssText = `position:absolute;visibility:hidden;color:var(${role});`;
+    palette.append(probe);
+    const color = getComputedStyle(probe).color;
+    probe.remove();
+    return color;
+  };
+  const iconOf = (entry) => {
+    const svg = entry.querySelector("svg");
+    if (svg) return { kind: "svg", color: getComputedStyle(svg).color };
+    const before = getComputedStyle(entry, "::before");
+    if (before.content && before.content !== "none" && before.content !== "normal") {
+      return { kind: "::before", color: before.color };
+    }
+    return null;
+  };
+  return {
+    roles: {
+      text: resolve("--cd-ui-text"),
+      interaktion: resolve("--cd-ui-interaktion"),
+      textLeise: resolve("--cd-ui-text-leise")
+    },
+    entries: [...palette.querySelectorAll("[data-action]")].filter((entry) => tools.visible(entry)).map((entry) => ({
+      action: entry.getAttribute("data-action") ?? "",
+      group: entry.closest("[data-group]")?.getAttribute("data-group") ?? null,
+      pressed: entry.getAttribute("aria-pressed") === "true",
+      disabled: entry.getAttribute("aria-disabled") === "true",
+      hovered: entry.matches(":hover"),
+      color: getComputedStyle(entry).color,
+      icon: iconOf(entry)
+    }))
+  };
+};
+var shapesProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return [];
+  return [...rootElement.querySelectorAll(".djs-container .djs-shape[data-element-id]")].filter((shape) => tools.visible(shape)).map((shape) => {
+    const visual = shape.querySelector(".djs-visual") ?? shape;
+    const rect = visual.getBoundingClientRect();
+    const client = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    const local = typeof visual.getBBox === "function" ? visual.getBBox() : rect;
+    const hitElement = document.elementFromPoint(client.x, client.y);
+    return {
+      id: shape.getAttribute("data-element-id") ?? "",
+      selected: shape.classList.contains("selected"),
+      transform: shape.getAttribute("transform") ?? "",
+      size: { width: local.width, height: local.height },
+      box: tools.box(visual, rootElement),
+      client,
+      hit: hitElement !== null && shape.contains(hitElement)
+    };
+  });
+};
+var canvasStateProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const container = document.querySelector(root)?.querySelector(".djs-container");
+  const active = document.activeElement;
+  const ours = (element) => element.closest("[data-modeler-shell-conformance]") !== null;
+  const visibleIn = (selector) => container ? [...container.querySelectorAll(selector)].filter(
+    (element) => !ours(element) && tools.visible(element)
+  ) : [];
+  return {
+    focusInCanvas: Boolean(container && active && container.contains(active)),
+    focused: !active || active === document.body ? "<body>" : tools.describe(active),
+    contextPadEntries: visibleIn(".djs-context-pad .entry").map(
+      (entry) => entry.getAttribute("data-action") ?? tools.describe(entry)
+    ),
+    textFields: visibleIn('input, textarea, [contenteditable]:not([contenteditable="false"])').map(
+      (field) => tools.describe(field)
+    )
+  };
+};
+var readOnlyStateProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const status = rootElement.querySelector('[data-chrome="status"]');
+  return { readOnly: rootElement.hasAttribute("data-readonly"), status: status ? tools.facts(status) : null };
+};
+var menuEntriesProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  const menu = rootElement ? [...rootElement.querySelectorAll('[role="menu"]')].find((element) => tools.visible(element)) : void 0;
+  if (!menu) return null;
+  const entries = [];
+  const selector = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+  for (const element of menu.querySelectorAll(selector)) {
+    const role = element.getAttribute("role") ?? "";
+    if (!tools.visible(element)) continue;
+    entries.push({
+      name: (element.getAttribute("aria-label") ?? element.textContent ?? "").replace(/\s+/g, " ").trim(),
+      role,
+      menuId: element.closest("[data-menu-id]")?.getAttribute("data-menu-id") ?? null,
+      disabled: element.getAttribute("aria-disabled") === "true",
+      group: element.closest("[data-menu-group]")?.getAttribute("data-menu-group") ?? null,
+      value: element.getAttribute("data-menu-value"),
+      checked: element.getAttribute("aria-checked"),
+      icon: element.querySelector(".cd-shell-menu-item-icon svg") !== null
+    });
+  }
+  return entries;
+};
+
+// src/testing/web-checks.ts
+var round2 = (value) => Math.round(value * 10) / 10;
+var normalize = (text) => text.replace(/\s+/g, " ").trim();
+var MIRAGON_HOME = "https://www.miragon.io/";
+var MIRAGON_IMPRESSUM = "https://www.miragon.io/impressum/";
+var MIRAGON_DATENSCHUTZ = "https://www.miragon.io/datenschutz/";
+var GERMAN_LEGAL_LINKS = ["Impressum", "Datenschutz"];
+function speaksEnglish(lang) {
+  return /^en(-|$)/i.test(lang.trim());
+}
+function primaryAriaProblems(facts, host) {
+  const primary = facts.primary;
+  if (!primary || host !== "web") return [];
+  const problems = [];
+  if (primary.tag !== "button") problems.push(`primary: a <${primary.tag}>, expected a <button>`);
+  const label = normalize(primary.attributes["aria-label"] ?? "");
+  if (!label) {
+    problems.push(
+      "primary: no aria-label; it names the action also while the label is collapsed (guide \xA75.15)"
+    );
+  } else if (!facts.primaryCollapsed && primary.text && !label.includes(primary.text)) {
+    problems.push(
+      `primary: the aria-label "${label}" does not contain the visible label "${primary.text}" (WCAG 2.5.3)`
+    );
+  }
+  if (primary.disabled) {
+    problems.push(
+      "primary: natively disabled; a disabled primary action keeps the focus with aria-disabled (guide \xA78)"
+    );
+  }
+  return problems;
+}
+function legalAriaProblems(facts, host) {
+  if (host !== "web") return [];
+  const legal = facts.legal;
+  if (!legal) return ['legal: no [data-chrome="legal"] in the web app (guide \xA75.10)'];
+  const problems = [];
+  if (legal.tag !== "nav") problems.push(`legal: the legal line is a <${legal.tag}>, expected a <nav>`);
+  if (!normalize(legal.attributes["aria-label"] ?? "")) problems.push("legal: the <nav> has no aria-label");
+  for (const text of GERMAN_LEGAL_LINKS) {
+    const link = facts.legalLinks.find((candidate) => candidate.text === text);
+    if (!link) {
+      problems.push(`legal: no "${text}" link (guide \xA75.10)`);
+    } else if (link.lang !== "de") {
+      problems.push(
+        `legal: "${text}" has ${link.lang === null ? "no lang" : `lang="${link.lang}"`}, expected lang="de" (guide \xA72: Impressum and Datenschutz stay German)`
+      );
+    }
+  }
+  for (const link of facts.legalLinks) {
+    if (link.target !== "_blank") continue;
+    const rel = (link.rel ?? "").split(/\s+/);
+    if (!rel.includes("noopener") || !rel.includes("noreferrer")) {
+      problems.push(`legal: the link "${link.text}" opens a new tab without rel="noopener noreferrer"`);
+    }
+  }
+  return problems;
+}
+function pillPopupAriaProblems(facts, host) {
+  const pill = facts.problems;
+  if (!pill || host === "ide") return [];
+  const haspopup = pill.attributes["aria-haspopup"];
+  if (host === "embedded" && haspopup === void 0) return [];
+  const problems = [];
+  if (haspopup !== "dialog") {
+    problems.push(
+      `problems: the pill has aria-haspopup "${haspopup ?? ""}", expected "dialog" (it opens the problems list)`
+    );
+  }
+  if (pill.attributes["aria-expanded"] !== "false") {
+    problems.push(
+      `problems: the pill has aria-expanded "${pill.attributes["aria-expanded"] ?? ""}" while the list is closed, expected "false"`
+    );
+  }
+  const controls = pill.attributes["aria-controls"];
+  if (!controls) {
+    problems.push("problems: the pill has no aria-controls");
+  } else if (!facts.problemsControlled) {
+    problems.push(`problems: aria-controls="${controls}" names no element`);
+  } else {
+    const role = facts.problemsControlled.attributes.role;
+    if (role !== "dialog") {
+      problems.push(
+        `problems: aria-controls names a ${facts.problemsControlled.description} with role "${role ?? ""}", expected "dialog"`
+      );
+    }
+    if (facts.problemsControlled.attributes["aria-modal"] === "true") {
+      problems.push(
+        'problems: the problems list is aria-modal="true"; it is a non-modal popover (guide \xA75.10)'
+      );
+    }
+  }
+  return problems;
+}
+var MENU_GROUP_ORDER = ["file", "model", "export", "appearance", "help"];
+var FILE_ENTRIES = [
+  { id: "new-diagram", icon: true },
+  { id: "open", icon: true },
+  { id: "show-example", icon: false },
+  { id: "import", icon: true }
+];
+var APPEARANCE_VALUES = ["system", "light", "dark"];
+function menuGroupProblems(entries, host, themes, choice = "system") {
+  const problems = [];
+  const file = entries.filter((entry) => entry.group === "file");
+  const appearance = entries.filter((entry) => entry.group === "appearance");
+  if (host !== "web") {
+    const guide = host === "ide" ? "its file actions are native (guide \xA713.5)" : "the host owns file and mode (guide \xA75.2)";
+    if (file.length > 0) problems.push(`menu: the ${host} host shows a File group; ${guide}`);
+    if (appearance.length > 0) problems.push(`menu: the ${host} host shows an Appearance group; ${guide}`);
+    return problems;
+  }
+  const sequence = [];
+  for (const entry of entries) {
+    if (entry.group && sequence.at(-1) !== entry.group) sequence.push(entry.group);
+  }
+  const rank = (group) => MENU_GROUP_ORDER.indexOf(group);
+  const ordered = sequence.every((group, index) => index === 0 || rank(sequence[index - 1]) < rank(group));
+  if (!ordered) {
+    problems.push(
+      `menu: the groups stand in the order ${sequence.join(", ")}; expected File, Model, Export, Appearance, Help (guide \xA75.4)`
+    );
+  }
+  const known = FILE_ENTRIES.map((entry) => entry.id);
+  for (const entry of file) {
+    const spec = FILE_ENTRIES.find((candidate) => candidate.id === entry.menuId);
+    if (!spec) {
+      problems.push(
+        `menu: File entry "${entry.name}" has data-menu-id "${entry.menuId ?? ""}"; the shell builds the File group from ${known.join(", ")}`
+      );
+      continue;
+    }
+    if (entry.role !== "menuitem")
+      problems.push(`menu: File entry "${entry.name}" is a ${entry.role}, expected a menuitem`);
+    if (spec.icon && !entry.icon) problems.push(`menu: File entry "${entry.name}" has no icon (guide \xA75.4)`);
+    if (!spec.icon && entry.icon) {
+      problems.push(
+        `menu: File entry "${entry.name}" carries an icon; the guide gives ${entry.menuId} none (guide \xA75.14)`
+      );
+    }
+  }
+  const fileIds = file.map((entry) => entry.menuId ?? "");
+  const expectedIds = known.filter((id) => fileIds.includes(id));
+  if (fileIds.join() !== expectedIds.join() && fileIds.every((id) => known.includes(id))) {
+    problems.push(
+      `menu: the File group reads ${fileIds.join(", ")}; expected the order ${expectedIds.join(", ")} (guide \xA75.4)`
+    );
+  }
+  if (themes.includes("dark")) {
+    if (appearance.length === 0) {
+      problems.push("menu: a dark-capable modeler shows no Appearance group (guide \xA75.4, \xA713.3)");
+    } else {
+      const values = appearance.map((entry) => entry.value ?? "");
+      if (values.join() !== APPEARANCE_VALUES.join()) {
+        problems.push(
+          `menu: the Appearance options are ${values.join(", ")}; expected system, light, dark (guide \xA713.3)`
+        );
+      }
+      for (const entry of appearance) {
+        if (entry.role !== "menuitemradio" || entry.menuId !== "appearance") {
+          problems.push(
+            `menu: Appearance option "${entry.name}" is a ${entry.role} in "${entry.menuId ?? ""}"; expected a menuitemradio of the radio group "appearance"`
+          );
+        }
+      }
+      problems.push(...appearanceChoiceProblems(entries, choice));
+    }
+  }
+  return problems;
+}
+function appearanceChoiceProblems(entries, choice) {
+  const checked = entries.filter((entry) => entry.group === "appearance" && entry.checked === "true").map((entry) => entry.value ?? "");
+  return checked.length === 1 && checked[0] === choice ? [] : [
+    `menu: the Appearance group checks ${checked.length > 0 ? checked.join(", ") : "nothing"}; expected "${choice}" (aria-checked, guide \xA712)`
+  ];
+}
+function lightOnlyMenuProblems(entries, themes) {
+  if (themes.includes("dark")) return [];
+  return entries.some((entry) => entry.group === "appearance" || entry.menuId === "appearance") ? ["menu: a light-only modeler shows the Appearance group; it comes with dark (guide \xA713.3)"] : [];
+}
+function labelledWidth(samples) {
+  const widths = samples.flatMap(
+    (sample) => sample.primary && !sample.primary.collapsed && sample.primary.label ? [sample.primary.box.width] : []
+  );
+  return widths.length > 0 ? Math.max(...widths) : void 0;
+}
+function topRowProblems(samples, withLabel, name2) {
+  const problems = [];
+  for (const sample of samples) {
+    const { container, paletteWidth, menuRight, primary } = sample;
+    if (!primary || paletteWidth === null || menuRight === null) continue;
+    const decide = (palette, labelled) => decideTopRow({
+      containerWidth: container.width,
+      paletteWidth: palette,
+      menuRight,
+      primary: { withLabel: labelled, iconOnly: SHELL.row }
+    });
+    const expected = decide(paletteWidth, withLabel);
+    const low = decide(paletteWidth - 1, withLabel - 1);
+    const high = decide(paletteWidth + 1, withLabel + 1);
+    const at = `[${round2(container.width)}px wide]`;
+    if (low.paletteRow === high.paletteRow && low.primaryLabel === high.primaryLabel && expected.paletteRow === low.paletteRow && expected.primaryLabel === low.primaryLabel) {
+      const collapsed = expected.primaryLabel === "collapsed";
+      if (collapsed && !primary.collapsed) {
+        problems.push(
+          expected.paletteRow === "top" ? `${at} primary: shows its label, but the ${round2(paletteWidth)}px palette fits the top row only beside the icon; the label collapses first (guide \xA75.15)` : `${at} primary: shows its label, but it no longer fits next to the menu trigger (data-primary="collapsed", guide \xA75.15)`
+        );
+      }
+      if (!collapsed && primary.collapsed) {
+        problems.push(`${at} primary: collapsed although its ${round2(withLabel)}px label fits (guide \xA75.15)`);
+      }
+      if (expected.paletteRow !== sample.paletteRow) {
+        problems.push(
+          expected.paletteRow === "top" ? `${at} palette: in the second row although it fits the top row beside the collapsed primary action; the label collapses first (guide \xA75.15)` : `${at} palette: in the top row although it keeps less than 16px to the primary action even icon only (guide \xA75.15)`
+        );
+      }
+    }
+    if (primary.collapsed) {
+      if (Math.abs(primary.box.width - SHELL.row) > GEOMETRY_TOLERANCE_PX + 1e-6) {
+        problems.push(
+          `${at} primary: ${round2(primary.box.width)}px wide while collapsed, expected ${SHELL.row}px`
+        );
+      }
+      if (primary.label)
+        problems.push(`${at} primary: collapsed, but its label "${primary.label}" still shows`);
+      if (primary.ariaLabel !== name2) {
+        problems.push(
+          `${at} primary: the aria-label is "${primary.ariaLabel ?? ""}" while collapsed; it keeps "${name2}" (guide \xA75.15)`
+        );
+      }
+    } else if (!primary.label) {
+      problems.push(`${at} primary: shows no label although the root lacks data-primary="collapsed"`);
+    }
+    if (primary.describedBy) {
+      problems.push(
+        `${at} primary: aria-describedby="${primary.describedBy}"; its tooltip repeats the name (API.md, Primary action)`
+      );
+    }
+  }
+  return problems;
+}
+function primaryTooltipProblems(collapsed, tooltip, name2, width) {
+  const at = `[${round2(width)}px wide]`;
+  if (collapsed && tooltip === null) {
+    return [`${at} primary: no chrome tooltip while collapsed; it shows the label "${name2}" (guide \xA75.15)`];
+  }
+  if (collapsed && tooltip !== null && !normalize(tooltip).startsWith(name2)) {
+    return [`${at} primary: the tooltip while collapsed reads "${normalize(tooltip)}", expected "${name2}"`];
+  }
+  if (!collapsed && tooltip !== null) {
+    return [
+      `${at} primary: a tooltip "${normalize(tooltip)}" while the label shows; only the collapsed action has one`
+    ];
+  }
+  return [];
+}
+function primaryActivationProblems(clicks) {
+  const problems = [];
+  if (clicks.pointer !== 1)
+    problems.push(`primary: a pointer click reached it ${clicks.pointer} times, expected once`);
+  if (clicks.enter !== 1) {
+    problems.push(
+      `primary: Enter on the focused primary action clicked it ${clicks.enter} times, expected once (keyboard activation)`
+    );
+  }
+  return problems;
+}
+function legalContentProblems(links) {
+  const problems = [];
+  const [copyright, impressum, datenschutz] = links;
+  if (!copyright || !/^©/.test(copyright.text) || !copyright.text.includes("Miragon GmbH")) {
+    problems.push(
+      `legal: the line starts with "${copyright?.text ?? ""}", expected the copyright "\xA9 <year> Miragon GmbH" (guide \xA75.10)`
+    );
+  } else if (copyright.href !== MIRAGON_HOME) {
+    problems.push(`legal: the copyright links "${copyright.href}", expected ${MIRAGON_HOME}`);
+  }
+  const expected = [
+    [impressum, "Impressum", MIRAGON_IMPRESSUM],
+    [datenschutz, "Datenschutz", MIRAGON_DATENSCHUTZ]
+  ];
+  for (const [link, text, href] of expected) {
+    if (link?.text !== text) {
+      problems.push(
+        `legal: the links read ${links.map((entry) => `"${entry.text}"`).join(", ")}; expected the copyright, "Impressum", "Datenschutz", then the modeler's links (guide \xA75.10)`
+      );
+      break;
+    }
+    if (link.href !== href) problems.push(`legal: "${text}" links "${link.href}", expected ${href}`);
+  }
+  return [...new Set(problems)];
+}
+function legalReachProblems(facts) {
+  const legal = facts.legal;
+  if (!legal) return [];
+  const width = round2(facts.container.width);
+  const problems = [];
+  for (const link of facts.links) {
+    const box = link.box;
+    const inside = box.left >= Math.max(0, legal.left) - GEOMETRY_TOLERANCE_PX && box.left + box.width <= Math.min(legal.left + legal.width, facts.container.width) + GEOMETRY_TOLERANCE_PX && box.top >= legal.top - GEOMETRY_TOLERANCE_PX && box.top + box.height <= legal.top + legal.height + GEOMETRY_TOLERANCE_PX;
+    if (!inside) {
+      problems.push(
+        `legal: [${width}px wide] "${link.text}" is cut off or scrolled out of the legal line; it wraps instead (guide \xA75.10, WCAG 1.4.10)`
+      );
+    }
+  }
+  return problems;
+}
+function zoomRowBottomProblems(zoom, raised, container, legalHeight) {
+  if (!zoom) return [];
+  const bottom = raised ? SHELL.edge + legalLineHeight(legalHeight) + SHELL.gap : SHELL.edge;
+  return boxMismatches("zoom", zoom, { bottom }, container).map(
+    (problem) => `[${round2(container.width)}px wide${raised ? ", raised" : ""}] ${problem}`
+  );
+}
+function emptyStateProblems(facts, container, lang) {
+  const problems = [];
+  if (!facts.shown)
+    problems.push('empty-state: the root lacks data-empty-state="shown" after show.emptyState');
+  const card = facts.card;
+  if (!card?.visible) return [...problems, "empty-state: the card is not visible after show.emptyState"];
+  problems.push(
+    ...boxMismatches(
+      "empty-state",
+      card.box,
+      {
+        centerX: container.width / 2,
+        centerY: container.height / 2,
+        width: Math.min(400, container.width - 2 * SHELL.edge)
+      },
+      container
+    )
+  );
+  if (!card.labelledBy) problems.push("empty-state: the card is not labelled by its title (aria-labelledby)");
+  if (!facts.komet) {
+    problems.push("empty-state: no Komet <img> on the card (guide \xA72, \xA78)");
+  } else {
+    if (facts.komet.alt !== "") {
+      problems.push(
+        `empty-state: the Komet has ${facts.komet.alt === null ? "no alt" : `alt="${facts.komet.alt}"`}; it is decorative, alt="" (guide \xA78)`
+      );
+    }
+    if (Math.abs(facts.komet.width - 64) > 1 || Math.abs(facts.komet.height - 64) > 1) {
+      problems.push(
+        `empty-state: the Komet is ${round2(facts.komet.width)} \xD7 ${round2(facts.komet.height)}px, expected 64 \xD7 64 (guide \xA78)`
+      );
+    }
+  }
+  if (facts.heading?.tag !== "h1") {
+    problems.push(
+      `empty-state: the title is ${facts.heading ? `a <${facts.heading.tag}>` : "missing"}, expected an <h1>`
+    );
+  }
+  const [primary, ghost, ...rest] = facts.buttons;
+  if (!primary) {
+    problems.push('empty-state: no "New diagram" button on the card (guide \xA78)');
+  } else {
+    if (primary.variant !== "primary") {
+      problems.push(
+        `empty-state: the first button "${primary.name}" is ${primary.variant ?? "no"} variant, expected the blue primary "New diagram" first (guide \xA78)`
+      );
+    }
+    if (ghost && ghost.variant !== "ghost") {
+      problems.push(
+        `empty-state: the second button "${ghost.name}" is ${ghost.variant ?? "no"} variant, expected the ghost "Show example" (guide \xA78)`
+      );
+    }
+    if (rest.length > 0)
+      problems.push(
+        `empty-state: ${facts.buttons.length} buttons on the card; exactly two actions (guide \xA78)`
+      );
+    for (const button of [primary, ghost]) {
+      if (button && Math.abs(button.height - SHELL.entry) > 1) {
+        problems.push(
+          `empty-state: "${button.name}" is ${round2(button.height)}px high, expected ${SHELL.entry}px (guide \xA78)`
+        );
+      }
+    }
+    if (speaksEnglish(lang)) {
+      if (primary.name !== defaultMessages.newDiagram) {
+        problems.push(
+          `empty-state: the primary button reads "${primary.name}", expected "${defaultMessages.newDiagram}" (guide \xA72)`
+        );
+      }
+      if (ghost && ghost.name !== defaultMessages.showExample) {
+        problems.push(
+          `empty-state: the ghost button reads "${ghost.name}", expected "${defaultMessages.showExample}" (guide \xA72)`
+        );
+      }
+    }
+  }
+  for (const part of facts.work) {
+    if (part.visible) {
+      problems.push(
+        `empty-state: ${part.name} is visible behind the start screen; it hides the work chrome (guide \xA78)`
+      );
+    }
+  }
+  if (!facts.canvasInert) {
+    problems.push(
+      "empty-state: the canvas slot is not inert behind the start screen; nothing else takes a click or the Tab (guide \xA78)"
+    );
+  }
+  if (!facts.legalVisible)
+    problems.push("empty-state: the legal line is not visible; a public page always shows it (guide \xA78)");
+  return problems;
+}
+function emptyStateTabProblems(owners) {
+  const problems = [];
+  for (const stop of owners) {
+    if (["empty-state", "legal", "toasts", "body", "outside"].includes(stop.owner)) continue;
+    problems.push(
+      `empty-state: Tab reaches ${stop.description} (${stop.owner}) behind the start screen; only the card and the legal links take the focus (guide \xA78)`
+    );
+  }
+  if (!owners.some((stop) => stop.owner === "empty-state")) {
+    problems.push("empty-state: Tab never reaches the card's buttons");
+  }
+  if (!owners.some((stop) => stop.owner === "legal"))
+    problems.push("empty-state: Tab never reaches the legal links");
+  return [...new Set(problems)];
+}
+function emptyStateKeyProblems(key, before, after, keys) {
+  const problems = [];
+  if (after !== before) {
+    problems.push(
+      `empty-state: ${key} behind the start screen changed the zoom from ${before ?? "?"}% to ${after ?? "?"}%; the chrome keys zoom no diagram there`
+    );
+  }
+  if (keys.some((recorded) => recorded.defaultPrevented)) {
+    problems.push(
+      `empty-state: ${key} behind the start screen arrived prevented; with no diagram to zoom the browser keeps its page zoom (WCAG 1.4.4)`
+    );
+  }
+  return problems;
+}
+function afterStartProblems(facts, focus) {
+  const problems = [];
+  const after = 'after "New diagram"';
+  if (facts.shown) problems.push(`empty-state: ${after} the root still carries data-empty-state="shown"`);
+  if (facts.card?.visible) problems.push(`empty-state: ${after} the card still shows`);
+  for (const name2 of ["menu", "palette", "zoom"]) {
+    const part = facts.work.find((candidate) => candidate.name === name2);
+    if (part && !part.visible) problems.push(`empty-state: ${after} the ${name2} is still hidden`);
+  }
+  if (facts.canvasInert) problems.push(`empty-state: ${after} the canvas slot is still inert`);
+  if (focus.owner !== "canvas") {
+    problems.push(
+      `empty-state: ${after} the focus is on ${focus.description}, expected the canvas <svg> (API.md, Empty state)`
+    );
+  }
+  return problems;
+}
+function toastLiveRegion(regions, status) {
+  const role = status === "danger" ? "alert" : "status";
+  return regions.find((region) => region.role === role);
+}
+function toastAnatomyProblems(toast, status, lang, announcement) {
+  const problems = [];
+  const role = status === "danger" ? "alert" : "status";
+  if (!announcement.persistent) {
+    problems.push(
+      `toasts: no role="${role}" live region in the root before the first toast; a live region created together with its text is often not announced (guide \xA78, \xA712)`
+    );
+  } else if (!announcement.announced) {
+    problems.push(
+      `toasts: the ${status} toast's text never reaches the role="${role}" live region (guide \xA78, \xA712)`
+    );
+  }
+  if (toast.role === "status" || toast.role === "alert") {
+    problems.push(
+      `toasts: the ${status} toast's card carries role="${toast.role}"; the live region announces it, so a live card is read twice`
+    );
+  }
+  const close = toast.buttons.at(-1);
+  if (!close || close.text !== "") {
+    problems.push(`toasts: the ${status} toast has no Close icon button at its end (guide \xA78)`);
+  } else if (!close.name) {
+    problems.push(`toasts: the ${status} toast's Close button has no accessible name`);
+  } else if (speaksEnglish(lang) && close.name !== defaultMessages.close) {
+    problems.push(
+      `toasts: the Close button is named "${close.name}", expected "${defaultMessages.close}" (guide \xA78)`
+    );
+  }
+  if (toast.box.height < 40 - GEOMETRY_TOLERANCE_PX) {
+    problems.push(
+      `toasts: the ${status} toast is ${round2(toast.box.height)}px high, at least 40px (guide \xA78)`
+    );
+  }
+  return problems;
+}
+function shownToasts(toasts2, texts) {
+  return toasts2.flatMap((toast) => texts.filter((text) => toast.text.includes(text)));
+}
+function toastStackProblems(toasts2, shown, expected) {
+  const problems = [];
+  const present = shownToasts(toasts2, shown);
+  if (toasts2.length > MAX_TOASTS)
+    problems.push(`toasts: ${toasts2.length} toasts at once, at most ${MAX_TOASTS} (guide \xA78)`);
+  if (present.join("\0") !== expected.join("\0")) {
+    problems.push(
+      `toasts: after ${shown.length} toasts the stack shows ${present.map((text) => `"${text}"`).join(", ") || "none"}; expected ${expected.map((text) => `"${text}"`).join(", ")} (at most ${MAX_TOASTS}, the oldest without an action leaves, guide \xA78)`
+    );
+  }
+  const tops = toasts2.filter((toast) => shown.some((text) => toast.text.includes(text))).map((toast) => toast.box.top);
+  if (tops.some((top, index) => index > 0 && top < tops[index - 1])) {
+    problems.push("toasts: the newest toast is not at the bottom of the stack (guide \xA78)");
+  }
+  return problems;
+}
+function repeatedToastProblems(toasts2, text) {
+  const count = toasts2.filter((toast) => toast.text.includes(text)).length;
+  return count > 1 ? [`toasts: a repeated "${text}" stacks ${count} toasts; it restarts the shown one (API.md, Toasts)`] : [];
+}
+var TOAST_RULES = {
+  plain: "it stays for its lifetime",
+  hovered: "hover pauses its time",
+  focused: "focus pauses its time",
+  resumed: "it resumes with at least 1.5s left",
+  action: "a toast with an action never closes by itself"
+};
+function toastTimingProblems(timings) {
+  return timings.flatMap((timing) => {
+    const since = timing.condition === "resumed" ? "after the pointer and the focus left it" : "after it appeared";
+    if (timing.expectation === "present" && !timing.present) {
+      return [
+        `toasts: "${timing.text}" closed within ${timing.after}ms ${since}; ${TOAST_RULES[timing.condition]} (guide \xA78)`
+      ];
+    }
+    if (timing.expectation === "gone" && timing.present) {
+      return [
+        `toasts: "${timing.text}" is still there ${timing.after}ms ${since}; it closes after its lifetime (guide \xA78)`
+      ];
+    }
+    return [];
+  });
+}
+function popoverKeyboardProblems(steps, rowCount) {
+  const problems = [];
+  for (const step of steps) {
+    if (step.focused?.index !== step.expected) {
+      problems.push(
+        `problems-popover: ${step.key} reaches ${step.focused ? `row ${step.focused.index + 1}` : "no row"}, expected row ${step.expected + 1} of ${rowCount}; the keyboard reads every row, text rows too (guide \xA75.10, WCAG 2.1.1)`
+      );
+    } else if (!step.focused.inView) {
+      problems.push(
+        `problems-popover: row ${step.expected + 1} takes the focus on ${step.key} but stays scrolled out of the list`
+      );
+    }
+  }
+  return problems;
+}
+function openPopoverProblems(facts, container, lang) {
+  const problems = [];
+  const popover2 = facts.popover;
+  if (!popover2?.visible)
+    return ["problems-popover: a click on the pill shows no problems list (guide \xA75.10)"];
+  if (popover2.attributes.role !== "dialog") {
+    problems.push(`problems-popover: role "${popover2.attributes.role ?? ""}", expected "dialog"`);
+  }
+  if (popover2.attributes["aria-modal"] === "true")
+    problems.push('problems-popover: aria-modal="true"; it is not modal');
+  if (!popover2.title) {
+    problems.push("problems-popover: not labelled by its title (aria-labelledby)");
+  } else if (speaksEnglish(lang) && popover2.title !== defaultMessages.problemsTitle) {
+    problems.push(
+      `problems-popover: titled "${popover2.title}", expected "${defaultMessages.problemsTitle}" (guide \xA75.10)`
+    );
+  }
+  if (facts.pill?.attributes["aria-expanded"] !== "true") {
+    problems.push(
+      `problems: aria-expanded is "${facts.pill?.attributes["aria-expanded"] ?? ""}" while the list is open, expected "true"`
+    );
+  }
+  if (facts.rows.length === 0) {
+    problems.push("problems-popover: the list has no rows; show.problems passes items in the web host");
+  }
+  for (const row of facts.rows) {
+    if (row.height < SHELL.entry - GEOMETRY_TOLERANCE_PX) {
+      problems.push(
+        `problems-popover: the row "${row.text}" is ${round2(row.height)}px high, at least ${SHELL.entry}px (guide \xA75.10)`
+      );
+    }
+    if (!row.icon)
+      problems.push(`problems-popover: the row "${row.text}" has no severity icon (guide \xA75.10)`);
+  }
+  if (facts.focus !== "popover") {
+    problems.push(
+      `problems-popover: opening it leaves the focus on ${facts.focused}; it moves to the first row (API.md, Problems popover)`
+    );
+  }
+  const pill = facts.pill;
+  if (pill) {
+    problems.push(
+      ...boxMismatches(
+        "problems-popover",
+        popover2.box,
+        { left: SHELL.edge, bottom: container.height - pill.box.top + SHELL.gap },
+        container
+      )
+    );
+    if (popover2.box.width > Math.min(320, container.width - 2 * SHELL.edge) + GEOMETRY_TOLERANCE_PX + 1e-6) {
+      problems.push(
+        `problems-popover: width is ${round2(popover2.box.width)}px, at most ${round2(Math.min(320, container.width - 2 * SHELL.edge))}px expected`
+      );
+    }
+    if (popover2.box.height > 320 + GEOMETRY_TOLERANCE_PX + 1e-6) {
+      problems.push(`problems-popover: height is ${round2(popover2.box.height)}px, at most 320px expected`);
+    }
+  }
+  return problems;
+}
+function closedPopoverProblems(facts, how) {
+  const problems = [];
+  if (facts.popover?.visible) problems.push(`problems-popover: ${how} does not close the list`);
+  if (facts.pill && facts.pill.attributes["aria-expanded"] !== "false") {
+    problems.push(
+      `problems: aria-expanded is "${facts.pill.attributes["aria-expanded"] ?? ""}" after ${how}, expected "false"`
+    );
+  }
+  if (how === "Escape" && facts.focus !== "pill") {
+    problems.push(`problems-popover: Escape leaves the focus on ${facts.focused}, expected the pill`);
+  }
+  if (how === "an outside click" && facts.focus === "pill") {
+    problems.push(
+      "problems-popover: an outside click moved the focus to the pill; it closes without moving the focus"
+    );
+  }
+  if (how === "a row with an element" && facts.focus !== "canvas") {
+    problems.push(
+      `problems-popover: a row with an element leaves the focus on ${facts.focused}, expected the canvas`
+    );
+  }
+  return problems;
+}
+function dropStateProblems(facts, expected, context, container) {
+  const problems = [];
+  const zone = facts.zone;
+  const over = facts.events.filter((event) => event.type === "dragover");
+  if (expected === "none") {
+    if (facts.state !== null)
+      problems.push(`drop-zone: ${context} sets data-drop="${facts.state}"; it is no file drag`);
+    if (zone?.visible) problems.push(`drop-zone: ${context} shows the drop zone`);
+    if (over.some((event) => event.defaultPrevented))
+      problems.push(`drop-zone: ${context} is prevented; the drop zone leaves non-file drags alone`);
+    return problems;
+  }
+  if (facts.state !== expected) {
+    problems.push(
+      `drop-zone: ${context} sets data-drop="${facts.state ?? ""}", expected "${expected}" (guide \xA79)`
+    );
+  }
+  if (facts.events.some((event) => !event.defaultPrevented && event.type !== "dragleave")) {
+    problems.push(`drop-zone: ${context} is not prevented, so the browser would open the file`);
+  }
+  const effect = expected === "over" ? "copy" : "none";
+  for (const event of over) {
+    if (event.dropEffect !== effect)
+      problems.push(`drop-zone: ${context} has dropEffect "${event.dropEffect}", expected "${effect}"`);
+  }
+  if (!zone?.visible) return [...problems, `drop-zone: ${context} shows no drop zone (guide \xA79)`];
+  problems.push(
+    ...boxMismatches("drop-zone", zone.box, { left: 12, top: 12, right: 12, bottom: 12 }, container).map(
+      (problem) => `${problem} (${context})`
+    )
+  );
+  if (zone.ariaHidden !== "true") problems.push('drop-zone: the overlay lacks aria-hidden="true"');
+  const fill = expected === "over" ? ["--cd-ui-hover", facts.roles.hover] : ["--cd-ui-danger-flaeche", facts.roles.dangerFlaeche];
+  const border = expected === "over" ? ["--cd-ui-interaktion", facts.roles.interaktion] : ["--cd-ui-danger", facts.roles.danger];
+  if (zone.background !== fill[1]) {
+    problems.push(
+      `drop-zone: ${context} fills ${zone.background}, expected ${fill[0]} (${fill[1]}) (guide \xA79)`
+    );
+  }
+  if (zone.borderStyle !== "dashed" || zone.borderWidth !== "2px" || zone.borderColor !== border[1]) {
+    problems.push(
+      `drop-zone: ${context} has a ${zone.borderWidth} ${zone.borderStyle} ${zone.borderColor} border, expected 2px dashed ${border[0]} (${border[1]}) (guide \xA79)`
+    );
+  }
+  if (!facts.chip?.text) {
+    problems.push(`drop-zone: ${context} shows no chip text (guide \xA79)`);
+  } else if (facts.chip.background !== facts.roles.flaecheHoch) {
+    problems.push(
+      `drop-zone: the chip fills ${facts.chip.background}, expected --cd-ui-flaeche-hoch (${facts.roles.flaecheHoch})`
+    );
+  }
+  return problems;
+}
+function expectedWebMode(requested, themes, choice) {
+  const kontrast = requested.kontrast ? { kontrast: requested.kontrast } : {};
+  if (!themes.includes("dark")) return { carrier: "light", effective: { theme: "light", ...kontrast } };
+  if (choice === "system") return { carrier: "system", effective: { theme: requested.theme, ...kontrast } };
+  return { carrier: choice, effective: { theme: choice, ...kontrast } };
+}
+function webModeProblems(facts, themes, choice, colors) {
+  const problems = [];
+  const dark = themes.includes("dark");
+  if (!dark) {
+    const metas = facts.themeColors;
+    if (metas.length !== 1 || metas[0]?.media !== null) {
+      problems.push(
+        `mode: a light-only web app carries one theme-color without media (guide \xA713.3); found ${metas.map((meta) => meta.media ? `${meta.content} (${meta.media})` : meta.content).join(", ") || "none"}`
+      );
+    }
+    if (facts.colorScheme !== null && facts.colorScheme.split(/\s+/).includes("dark")) {
+      problems.push(`mode: a light-only web app declares color-scheme "${facts.colorScheme}"`);
+    }
+    return problems;
+  }
+  const label = choice === "system" ? "System" : choice === "dark" ? "Dark" : "Light";
+  const expectedScheme = choice === "system" ? "light dark" : choice;
+  if (facts.colorScheme !== expectedScheme) {
+    problems.push(
+      `mode: with ${label} <meta name="color-scheme"> reads "${facts.colorScheme ?? "(none)"}", expected "${expectedScheme}" (guide \xA713.3)`
+    );
+  }
+  const stored = choice === "system" ? null : choice;
+  if (!facts.storageBlocked && facts.stored !== stored) {
+    problems.push(
+      stored === null ? `mode: with System localStorage keeps miragon.darstellung="${facts.stored ?? ""}"; System removes the entry (guide \xA713.3)` : `mode: with ${label} localStorage holds miragon.darstellung=${facts.stored === null ? "(none)" : `"${facts.stored}"`}, expected "${stored}" (guide \xA713.3)`
+    );
+  }
+  const byMedia = (scheme) => facts.themeColors.find((meta) => meta.media?.replace(/\s+/g, "") === `(prefers-color-scheme:${scheme})`);
+  const light = byMedia("light");
+  const darkMeta = byMedia("dark");
+  if (!light || !darkMeta) {
+    problems.push(
+      "mode: a dark-capable web app carries two theme-color metas, one per prefers-color-scheme (guide \xA713.3)"
+    );
+  } else if (colors) {
+    const want = choice === "system" ? colors : { light: colors[choice], dark: colors[choice] };
+    if (light.content !== want.light || darkMeta.content !== want.dark) {
+      problems.push(
+        `mode: with ${label} the theme-color metas read ${light.content} (light) and ${darkMeta.content} (dark), expected ${want.light} and ${want.dark} (guide \xA713.3)`
+      );
+    }
+  }
+  return problems;
+}
+function modeSwitchProblems(changes, label) {
+  const relevant = changes.filter((change) => ["theme", "color-scheme", "theme-color"].includes(change.part));
+  if (relevant.length === 0) return [`mode: choosing ${label} changed nothing on <html> or its meta tags`];
+  const problems = [];
+  const frames = [...new Set(relevant.map((change) => change.frame))];
+  if (frames.length > 1) {
+    const parts = relevant.map((change) => `${change.part} in frame ${change.frame}`).join(", ");
+    problems.push(`mode: choosing ${label} changed ${parts}; one frame for all of them (guide \xA713.3)`);
+  }
+  const first = Math.min(...frames);
+  if (!changes.some(
+    (change) => change.part === "no-transition" && change.value === "on" && change.frame === first
+  )) {
+    problems.push(
+      `mode: choosing ${label} switched without cd-shell-no-transition on <html> in that frame (guide \xA77: no colour fades)`
+    );
+  }
+  return problems;
+}
+
+// src/testing/checks.ts
+var normalize2 = (text) => text.replace(/\s+/g, " ").trim();
+var name = (element) => normalize2(element.attributes["aria-label"] ?? element.text);
+var attribute = (element, key) => element.attributes[key];
+function expectedKeyShortcuts(platform) {
+  const modifier = platform === "mac" ? "Meta" : "Control";
+  return {
+    in: `${modifier}+= ${modifier}+Plus`,
+    out: `${modifier}+-`,
+    actual: `${modifier}+0`,
+    fit: "Shift+1"
+  };
+}
+function ariaProblems(facts, host) {
+  const problems = [];
+  if (host === "embedded") {
+    if (!facts.rootLang)
+      problems.push("root: an embedded shell root carries the tool's lang itself (guide \xA72, \xA712)");
+  } else if (!facts.documentLang) {
+    problems.push("<html> has no lang (guide \xA72)");
+  }
+  const trigger = facts.trigger;
+  if (!trigger) {
+    problems.push('menu: no [data-chrome="menu"] trigger');
+  } else {
+    if (trigger.tag !== "button")
+      problems.push(`menu: the trigger is a <${trigger.tag}>, expected a <button>`);
+    if (!attribute(trigger, "aria-label")) problems.push("menu: the icon-only trigger has no aria-label");
+    if (attribute(trigger, "aria-haspopup") !== "menu") {
+      problems.push(`menu: aria-haspopup is "${attribute(trigger, "aria-haspopup") ?? ""}", expected "menu"`);
+    }
+    if (attribute(trigger, "aria-expanded") !== "false") {
+      problems.push(
+        `menu: aria-expanded is "${attribute(trigger, "aria-expanded") ?? ""}" while closed, expected "false"`
+      );
+    }
+    if (!attribute(trigger, "aria-controls")) {
+      problems.push("menu: the trigger has no aria-controls");
+    } else if (!facts.controlled) {
+      problems.push(`menu: aria-controls="${attribute(trigger, "aria-controls")}" names no element`);
+    } else if (attribute(facts.controlled, "role") !== "menu") {
+      problems.push(
+        `menu: aria-controls names a ${facts.controlled.description} with role "${attribute(facts.controlled, "role") ?? ""}", expected "menu"`
+      );
+    }
+  }
+  if (!facts.palette) {
+    problems.push('palette: no [data-chrome="palette"]');
+  } else {
+    const toolbar = facts.toolbar;
+    if (!toolbar || attribute(toolbar, "role") !== "toolbar") {
+      problems.push('palette: .djs-palette-entries has no role="toolbar"');
+    } else if (!attribute(toolbar, "aria-label")) {
+      problems.push("palette: the toolbar has no aria-label");
+    }
+    for (const entry of facts.entries) {
+      const action = attribute(entry, "data-action") ?? entry.description;
+      if (attribute(entry, "role") !== "button")
+        problems.push(`palette: entry "${action}" has no role="button"`);
+      if (!attribute(entry, "aria-label"))
+        problems.push(`palette: entry "${action}" has no aria-label (title)`);
+      const tabindex = attribute(entry, "tabindex");
+      if (tabindex !== "0" && tabindex !== "-1") {
+        problems.push(`palette: entry "${action}" has tabindex "${tabindex ?? ""}", expected roving 0/-1`);
+      }
+    }
+    const stops = facts.entries.filter((entry) => attribute(entry, "tabindex") === "0");
+    if (facts.entries.length > 0 && stops.length !== 1) {
+      problems.push(
+        `palette: ${stops.length} entries with tabindex="0", expected exactly one (roving tabindex)`
+      );
+    }
+    const tools = facts.entries.filter(
+      (entry) => entry.group === "tools" && (attribute(entry, "data-action") ?? "").endsWith("-tool")
+    );
+    for (const tool of tools) {
+      const pressed2 = attribute(tool, "aria-pressed");
+      if (pressed2 !== "true" && pressed2 !== "false") {
+        problems.push(`palette: tool "${attribute(tool, "data-action")}" has no aria-pressed`);
+      }
+    }
+    const pressed = tools.filter((tool) => attribute(tool, "aria-pressed") === "true");
+    if (pressed.length > 1) problems.push(`palette: ${pressed.length} tools are aria-pressed at once`);
+  }
+  const zoom = facts.zoom;
+  if (!zoom) {
+    problems.push('zoom: no [data-chrome="zoom"]');
+  } else {
+    if (attribute(zoom, "role") !== "group") problems.push('zoom: the panel has no role="group"');
+    if (!attribute(zoom, "aria-label")) problems.push("zoom: the panel has no aria-label");
+    const shortcuts = expectedKeyShortcuts(facts.platform);
+    for (const button of ["out", "actual", "in", "fit"]) {
+      const control = facts.zoomButtons[button];
+      if (!control) {
+        problems.push(`zoom: no [data-zoom="${button}"] button`);
+        continue;
+      }
+      if (control.tag !== "button") problems.push(`zoom: [data-zoom="${button}"] is a <${control.tag}>`);
+      if (!name(control)) problems.push(`zoom: [data-zoom="${button}"] has no accessible name`);
+      if (attribute(control, "aria-keyshortcuts") !== shortcuts[button]) {
+        problems.push(
+          `zoom: [data-zoom="${button}"] aria-keyshortcuts is "${attribute(control, "aria-keyshortcuts") ?? ""}", expected "${shortcuts[button]}" (${facts.platform})`
+        );
+      }
+      if (control.disabled) {
+        problems.push(
+          `zoom: [data-zoom="${button}"] is natively disabled; aria-disabled keeps the focus (guide \xA75.8)`
+        );
+      }
+    }
+    const readout = facts.zoomButtons.actual;
+    if (readout) {
+      if (!/\d/.test(readout.text))
+        problems.push(`zoom: the readout shows "${readout.text}", expected a percentage`);
+      const label = normalize2(attribute(readout, "aria-label") ?? "");
+      if (!label.includes(readout.text)) {
+        problems.push(
+          `zoom: the readout's aria-label "${label}" does not name the current zoom "${readout.text}"`
+        );
+      }
+      if (attribute(readout, "aria-disabled") === "true")
+        problems.push("zoom: the readout is never disabled");
+    }
+  }
+  const present = new Set(facts.order);
+  const expectedOrder = DOM_ORDER.filter((part) => present.has(part));
+  if (facts.order.join() !== expectedOrder.join()) {
+    problems.push(
+      `DOM order is ${facts.order.join(", ")}; expected ${expectedOrder.join(", ")} (guide \xA75.14)`
+    );
+  }
+  if (!present.has("canvas")) problems.push("canvas: no diagram-js <svg> (.djs-container > svg) in the root");
+  const canvas = facts.canvas;
+  if (canvas && !normalize2(attribute(canvas, "aria-label") ?? "") && !attribute(canvas, "aria-labelledby")) {
+    problems.push(
+      'canvas: the focusable <svg> has no accessible name (WCAG 4.1.2); shellModule names it role="application" with messages.canvas'
+    );
+  }
+  for (const element of facts.positiveTabindex)
+    problems.push(`positive tabindex on ${element} (guide \xA75.14)`);
+  for (const element of facts.titled) {
+    problems.push(`${element} has a native title; the chrome tooltip replaces it (guide \xA75.6)`);
+  }
+  problems.push(...primaryAriaProblems(facts, host), ...legalAriaProblems(facts, host));
+  return problems;
+}
+function optionalIslandProblems(facts, shown) {
+  const problems = [];
+  if (shown.has("problems")) {
+    const pill = facts.problems;
+    if (!pill?.visible) {
+      problems.push("problems: the pill is not visible after show.problems");
+    } else {
+      if (pill.tag !== "button") problems.push(`problems: the pill is a <${pill.tag}>, expected a <button>`);
+      const label = normalize2(attribute(pill, "aria-label") ?? "");
+      if (!label) problems.push("problems: the pill has no aria-label (count and errors)");
+      else if (!label.includes(pill.text)) {
+        problems.push(`problems: the aria-label "${label}" does not contain the visible text "${pill.text}"`);
+      }
+    }
+  }
+  if (shown.has("status")) {
+    const status = facts.status;
+    if (!status?.visible) {
+      problems.push("status: the status box is not visible after show.status");
+    } else {
+      const role = attribute(status, "role");
+      const severity = attribute(status, "data-severity");
+      const expected = severity === "danger" ? "alert" : "status";
+      if (role !== expected) {
+        problems.push(
+          `status: role is "${role ?? ""}" for data-severity="${severity ?? ""}", expected "${expected}"`
+        );
+      }
+    }
+  }
+  if (shown.has("legend")) {
+    const legend = facts.legend;
+    if (!legend?.visible) {
+      problems.push("legend: the legend is not visible after show.legend");
+    } else {
+      if (!facts.legendTitle)
+        problems.push("legend: the card is not labelled by its title (aria-labelledby)");
+      if (!facts.legendClose || !attribute(facts.legendClose, "aria-label")) {
+        problems.push("legend: the close button has no aria-label");
+      }
+    }
+  }
+  if (shown.has("inspector")) {
+    const inspector = facts.inspector;
+    if (!inspector?.visible) {
+      problems.push("inspector: the inspector is not visible after show.inspector");
+    } else {
+      if (inspector.tag !== "aside") problems.push(`inspector: a <${inspector.tag}>, expected an <aside>`);
+      if (!attribute(inspector, "aria-label")) problems.push("inspector: the <aside> has no aria-label");
+    }
+  }
+  return problems;
+}
+function tabSequenceProblems(stops, primary = false) {
+  const [first, second, third] = stops;
+  const sequence = first?.kind === "primary" ? [second, third] : [first, second];
+  const [palette, canvas] = sequence;
+  const problems = [];
+  if (primary && first?.kind !== "primary") {
+    problems.push(
+      `tab order: Tab from the menu trigger lands on ${first?.description ?? "nothing"}, expected the primary action (top left, top right, top centre, guide \xA75.14)`
+    );
+  }
+  if (palette?.kind !== "palette") {
+    problems.push(
+      `tab order: Tab from the menu trigger lands on ${palette?.description ?? "nothing"}, expected the palette's roving entry (guide \xA75.14)`
+    );
+  } else if (canvas?.kind !== "canvas") {
+    problems.push(
+      `tab order: Tab from the palette lands on ${canvas?.description ?? "nothing"}, expected the canvas <svg> (an unexpected tab stop, guide \xA75.14)`
+    );
+  }
+  return problems;
+}
+function paletteShortcutProblems(entries) {
+  return entries.filter((entry) => entry.chip && !entry.keyShortcuts).map(
+    (entry) => `palette: entry "${entry.action}" shows the shortcut "${entry.chip}" in its tooltip but has no aria-keyshortcuts (guide \xA75.6)`
+  );
+}
+function menuKeysAtDocumentProblems(pressed, documentKeys) {
+  const reached = new Set(documentKeys.map((key) => key.key));
+  return pressed.filter((key) => reached.has(key)).map(
+    (key) => `menu: ${key} in the open menu reached a keydown listener on document; a modeler's document keyboard acts on it (stop it at the menu, guide \xA75.4)`
+  );
+}
+function menuOpenProblems(facts, focus) {
+  const problems = [];
+  if (facts.expanded !== "true") {
+    problems.push(`menu: aria-expanded is "${facts.expanded ?? ""}" while open, expected "true"`);
+  }
+  const menu = facts.menu;
+  if (!menu) return [...problems, 'menu: no visible role="menu" after opening'];
+  if (!attribute(menu, "aria-label")) problems.push("menu: the dropdown has no aria-label");
+  if (facts.controls && attribute(menu, "id") !== facts.controls) {
+    problems.push(
+      `menu: the visible dropdown is #${attribute(menu, "id") ?? ""}, the trigger controls #${facts.controls}`
+    );
+  }
+  if (facts.items.length === 0) problems.push("menu: the dropdown has no menuitem");
+  facts.items.forEach((item, index) => {
+    const label = item.name || `item ${index + 1}`;
+    if (!item.name) problems.push(`menu: ${label} has no accessible name`);
+    if (item.role !== "menuitem" && item.checked !== "true" && item.checked !== "false") {
+      problems.push(`menu: "${label}" (${item.role}) has aria-checked "${item.checked ?? ""}"`);
+    }
+    if (item.role === "menuitemradio" && !item.group) {
+      problems.push(`menu: radio "${label}" is not in a labelled role="group"`);
+    }
+    if (item.haspopup === "dialog" && !item.name.endsWith("\u2026")) {
+      problems.push(`menu: "${label}" opens a dialog, so its label ends with "\u2026" (U+2026)`);
+    }
+  });
+  if (focus && facts.items.length > 0) {
+    const expected = focus === "first" ? 0 : facts.items.length - 1;
+    if (facts.active !== expected) {
+      problems.push(
+        `menu: focus is on ${facts.active < 0 ? "no entry" : `entry ${facts.active + 1}`}, expected the ${focus} entry`
+      );
+    }
+  }
+  return problems;
+}
+function menuClosedProblems(facts, focusOnTrigger) {
+  const problems = [];
+  if (facts.expanded !== "false")
+    problems.push(`menu: aria-expanded is "${facts.expanded ?? ""}" after closing`);
+  if (facts.menu) problems.push("menu: the dropdown is still visible after Escape");
+  if (focusOnTrigger && !facts.activeIsTrigger)
+    problems.push("menu: Escape did not return the focus to the trigger");
+  return problems;
+}
+function keyReachProblem(press, reach, host, seen) {
+  const shouldPrevent = reach === "handled" || reach === "canvas";
+  if (host === "ide" && reach !== "free") {
+    if (seen.keys.length > 0) {
+      return `${press} reached a keydown listener on window; in the IDE host the shell stops it on document, or VS Code runs it again (guide \xA713.5)`;
+    }
+    const atDocument = seen.documentKeys ?? [];
+    const prevented2 = atDocument.length === 1 ? atDocument[0]?.defaultPrevented : void 0;
+    if (prevented2 === true && !shouldPrevent) {
+      return `${press} was prevented; the shell only stops it, so the field, dialog or browser still acts (guide \xA713.5)`;
+    }
+    if (prevented2 === false && shouldPrevent) {
+      return `${press} was stopped but not prevented; a handled key also calls preventDefault`;
+    }
+    return void 0;
+  }
+  if (seen.keys.length === 0) {
+    return host === "ide" ? `${press} never reached window; keys the webview does not handle must go on to VS Code (guide \xA713.5)` : `${press} never reached window; outside the IDE host the shell never stops propagation`;
+  }
+  if (seen.keys.length > 1) return `${press} reached window ${seen.keys.length} times`;
+  const prevented = seen.keys[0]?.defaultPrevented ?? false;
+  if (prevented && !shouldPrevent) {
+    return `${press} arrived prevented; ${reach === "free" ? "nothing may handle it" : "the browser, the field or the dialog must act"}`;
+  }
+  if (!prevented && shouldPrevent) {
+    return `${press} arrived unprevented; a handled key calls preventDefault (the browser would zoom the page)`;
+  }
+  return void 0;
+}
+function expectedAppearance(requested, themes) {
+  const fallback = themes[0];
+  if (fallback === void 0) throw new Error("@miragon/modeler-shell conformance: harness.themes is empty");
+  const theme = themes.includes(requested.theme) ? requested.theme : fallback;
+  return requested.kontrast ? { theme, kontrast: requested.kontrast } : { theme };
+}
+var describeAppearance = (appearance) => appearance.kontrast ? `${appearance.theme} + ${appearance.kontrast}` : appearance.theme;
+function expectedEmbeddedAppearance(facts, themes) {
+  const fallback = themes[0];
+  if (fallback === void 0) throw new Error("@miragon/modeler-shell conformance: harness.themes is empty");
+  const host = facts.themed.filter((element) => element.relation === "ancestor").at(-1);
+  return host?.kontrast === "hoch" ? { theme: fallback, kontrast: "hoch" } : { theme: fallback };
+}
+function appearanceProblems(facts, host, requested, themes, web) {
+  const ownDocument = host !== "embedded";
+  const expected = web?.effective ?? (ownDocument ? expectedAppearance(requested, themes) : expectedEmbeddedAppearance(facts, themes));
+  const carrierTheme = web?.carrier ?? expected.theme;
+  const problems = [];
+  const described = carrierTheme === expected.theme ? describeAppearance(expected) : `${carrierTheme} showing ${describeAppearance(expected)}`;
+  const label = ownDocument ? `requested ${describeAppearance(requested)}, expected ${described}` : `host page ${describeAppearance(requested)}, expected ${described}`;
+  const carrier = ownDocument ? facts.themed.find((element) => element.isDocument && element.theme !== null) : facts.themed.find((element) => element.relation === "self" && element.theme !== null);
+  if (!carrier) {
+    problems.push(
+      ownDocument ? `<html> has no data-cd-theme (${label}); the host always writes it, also "light" (guide \xA713.3)` : `the embedded root has no data-cd-theme (${label}): it takes the host page's mode instead of its own (guide \xA713.3)`
+    );
+  } else {
+    if (carrier.theme !== carrierTheme) {
+      problems.push(`${carrier.description} has data-cd-theme="${carrier.theme}" (${label})`);
+    }
+    if ((carrier.kontrast ?? void 0) !== expected.kontrast) {
+      problems.push(
+        `${carrier.description} has ${carrier.kontrast ? `data-cd-kontrast="${carrier.kontrast}"` : "no data-cd-kontrast"} (${label})`
+      );
+    }
+  }
+  for (const element of facts.themed) {
+    if (element === carrier) continue;
+    const stray = ownDocument ? !element.isDocument || element.theme === null : element.relation === "descendant" || element.relation === "self";
+    if (!stray) continue;
+    const values = [
+      element.theme !== null ? `data-cd-theme="${element.theme}"` : "",
+      element.kontrast !== null ? `data-cd-kontrast="${element.kontrast}"` : ""
+    ].filter(Boolean).join(" ");
+    const sameMode = carrier !== void 0 && element.theme === carrier.theme && element.kontrast === carrier.kontrast;
+    problems.push(
+      element.theme === null ? `${element.description} carries ${values} without data-cd-theme on the same element (guide \xA713.3)` : sameMode ? `${element.description} repeats ${values}: in an own document the attributes stand only on <html> (guide \xA713.5)` : `${element.description} carries ${values}: a second mode inside the modeler is half-dark (guide \xA713.5)`
+    );
+  }
+  if (ownDocument && !facts.documentClasses.includes("cd-shell-document")) {
+    problems.push(
+      "<html> lacks cd-shell-document in an own document (the reset of the webview's host styles)"
+    );
+  }
+  if (!ownDocument && facts.documentClasses.includes("cd-shell-document")) {
+    problems.push(
+      "<html> of a foreign page carries cd-shell-document: the own-document reset restyles the host page"
+    );
+  }
+  const reference = facts.parts[0];
+  if (reference && !reference.roles["--cd-ui-text"]) {
+    problems.push(
+      "--cd-ui-text is empty at the shell root: the vendored cd-tokens.generated.css is not loaded"
+    );
+  }
+  for (const part of facts.parts) {
+    const schemes = part.colorScheme.split(/\s+/);
+    const dark = schemes.includes("dark");
+    const light = schemes.includes("light");
+    if (expected.theme === "light" && (dark || carrier && !light)) {
+      problems.push(`${part.name}: color-scheme is "${part.colorScheme}" (${label})`);
+    }
+    if (expected.theme === "dark" && (!dark || light)) {
+      problems.push(`${part.name}: color-scheme is "${part.colorScheme}" (${label})`);
+    }
+    if (reference && part !== reference) {
+      for (const [role, value] of Object.entries(part.roles)) {
+        if (value !== reference.roles[role]) {
+          problems.push(
+            `${part.name}: ${role} resolves to "${value}", the root to "${reference.roles[role] ?? ""}" (half-dark)`
+          );
+        }
+      }
+    }
+  }
+  for (const required of ["dropdown", "tooltip"]) {
+    if (!facts.parts.some((part) => part.name === required)) {
+      problems.push(`${required}: not visible when the kit opened it, so its mode was not checked`);
+    }
+  }
+  return { problems };
+}
+var SHELL_ROOT_ATTRIBUTES = [
+  "data-cd-shell-host",
+  "data-palette",
+  "data-legend",
+  "data-inspector",
+  "data-problems",
+  "data-readonly",
+  "data-primary",
+  "data-zoom-row",
+  "data-empty-state",
+  "data-drop"
+];
+var EMBEDDED_ROOT_ATTRIBUTES = ["data-cd-theme", "data-cd-kontrast"];
+var BENIGN_ERRORS = /ResizeObserver loop/;
+function leftoverProblems(facts, host) {
+  const problems = [];
+  for (const element of facts.classedElements) problems.push(`${element} is left after destroy`);
+  const ownDocument = host !== "embedded";
+  for (const name2 of facts.documentClasses) {
+    if (ownDocument && name2 === "cd-shell-document") continue;
+    problems.push(`<html> keeps the class ${name2} after destroy`);
+  }
+  for (const element of facts.chromeElements) problems.push(`${element} is left after destroy`);
+  for (const name2 of facts.rootClasses) problems.push(`the root keeps the class ${name2} after destroy`);
+  const written = ownDocument ? SHELL_ROOT_ATTRIBUTES : [...SHELL_ROOT_ATTRIBUTES, ...EMBEDDED_ROOT_ATTRIBUTES];
+  for (const name2 of facts.rootAttributes) {
+    if (written.includes(name2)) problems.push(`the root keeps ${name2} after destroy`);
+  }
+  for (const error of facts.errors) {
+    if (!BENIGN_ERRORS.test(error)) problems.push(`the page reported an error after destroy: ${error}`);
+  }
+  return problems;
+}
+function afterDestroyKeyProblem(press, recorded) {
+  if (recorded.length === 0)
+    return `${press} after destroy never reached window: a shell listener still stops it`;
+  if (recorded.some((key) => key.defaultPrevented)) {
+    return `${press} after destroy arrived prevented: a shell listener is still installed`;
+  }
+  return void 0;
+}
+var ABSENT_ISLANDS = ["legend", "inspector", "problems", "status"];
+function absentIslands(absent) {
+  return ABSENT_ISLANDS.filter((island) => absent?.includes(island));
+}
+function absentIslandProblems(visible, absent) {
+  return absentIslands(absent).filter((island) => visible.has(island)).map((island) => `${island}: visible, but harness.absent says the modeler has no ${island}`);
+}
+function harnessHookProblems(harness, hooks) {
+  return hooks.filter(
+    (hook) => hook === "drop" ? harness.absent?.includes("drop") && harness.drop : hook !== "problemSelection" && harness.absent?.includes(hook) && harness.show?.[hook]
+  ).map(
+    (hook) => hook === "drop" ? 'harness: absent lists "drop", but harness.drop is given' : `harness: absent lists "${hook}", but show.${hook} is given`
+  );
+}
+function surroundProblems(facts) {
+  if (!facts.container) return ["canvas surround: no .djs-container in the root to check"];
+  if (!facts.painted) {
+    return [
+      "canvas surround: nothing from .djs-container out to the root paints a background colour; the surround is var(--cd-ui-grund) (guide \xA710.1)"
+    ];
+  }
+  if (facts.painted.color === facts.grund) return [];
+  return [
+    `canvas surround: ${facts.painted.description} paints ${facts.painted.color}, but --cd-ui-grund resolves to ${facts.grund}; the surround follows the mode (guide \xA710.1)`
+  ];
+}
+function isToolEntry(entry) {
+  return entry.group === "tools" || entry.action.endsWith("-tool");
+}
+function paletteEntryState(entry) {
+  if (entry.disabled) return "aria-disabled";
+  if (entry.hovered) return entry.pressed ? "pressed and hovered" : "hovered";
+  return entry.pressed ? "pressed" : "at rest";
+}
+function paletteColorProblems(facts) {
+  const problems = [];
+  for (const entry of facts.entries) {
+    if (!isToolEntry(entry)) continue;
+    const [role, value] = entry.disabled ? ["--cd-ui-text-leise", facts.roles.textLeise] : entry.hovered ? ["--cd-ui-interaktion", facts.roles.interaktion] : ["--cd-ui-text", facts.roles.text];
+    const state = paletteEntryState(entry);
+    if (entry.color !== value) {
+      problems.push(
+        `palette: tool "${entry.action}" ${state} has color ${entry.color}, expected ${role} (${value}) (guide \xA75.5)`
+      );
+    }
+    if (entry.icon && entry.icon.color !== value) {
+      const icon = entry.icon.kind === "svg" ? "<svg> icon" : "::before icon";
+      problems.push(
+        `palette: the ${icon} of tool "${entry.action}" ${state} has color ${entry.icon.color}, expected ${role} (${value}); a renderer rule overrides the skin (guide \xA75.5)`
+      );
+    }
+  }
+  return problems;
+}
+var round3 = (value) => Math.round(value * 10) / 10;
+function createProblems(facts) {
+  const known = new Set(facts.before.map((shape2) => shape2.id));
+  const added = facts.after.filter((shape2) => !known.has(shape2.id));
+  const pressed = `Enter on palette entry "${facts.entry}"`;
+  if (added.length === 0) {
+    return [
+      `create: ${pressed} added no element; Enter on a creating entry places it in the centre of the free rectangle (guide \xA75.5)`
+    ];
+  }
+  if (added.length > 1) {
+    return [
+      `create: ${pressed} added ${added.length} elements (${added.map((shape2) => shape2.id).join(", ")}), expected exactly one`
+    ];
+  }
+  const [shape] = added;
+  const problems = [];
+  if (!shape.selected) problems.push(`create: the new element "${shape.id}" is not selected (guide \xA75.5)`);
+  if (!facts.canvas.focusInCanvas) {
+    problems.push(
+      `create: after ${pressed} the focus is on ${facts.canvas.focused}, expected the canvas (its <svg> or the label editor, guide \xA75.5)`
+    );
+  }
+  const centre = { x: shape.box.left + shape.box.width / 2, y: shape.box.top + shape.box.height / 2 };
+  const { free } = facts;
+  const tolerance = GEOMETRY_TOLERANCE_PX + 1e-6;
+  const inside = centre.x >= free.left - tolerance && centre.x <= free.right + tolerance && centre.y >= free.top - tolerance && centre.y <= free.bottom + tolerance;
+  if (!inside) {
+    problems.push(
+      `create: the new element "${shape.id}" is centred at (${round3(centre.x)}, ${round3(centre.y)})px, outside the free rectangle ${round3(free.left)}\u2013${round3(free.right)} \xD7 ${round3(free.top)}\u2013${round3(free.bottom)}px (guide \xA75.5, \xA75.9)`
+    );
+  }
+  return problems;
+}
+function readOnlyStateProblems(facts) {
+  const problems = [];
+  const after = `${INVALID_STATUS_DELAY_MS}ms after show.invalid`;
+  if (!facts.readOnly) problems.push(`read-only: the root has no data-readonly ${after}`);
+  const status = facts.status;
+  if (!status?.visible) {
+    problems.push(`read-only: the status box is not visible ${after} (guide \xA75.12)`);
+  } else if (status.attributes.role !== "alert") {
+    problems.push(
+      `read-only: the status box of an invalid file has role "${status.attributes.role ?? ""}", expected "alert" (guide \xA713.5)`
+    );
+  }
+  return problems;
+}
+var READ_ONLY_PALETTE_ACTIONS = ["lasso-tool", "hand-tool"];
+function readOnlyPaletteProblems(entries) {
+  return entries.flatMap((entry) => {
+    const staysActive = READ_ONLY_PALETTE_ACTIONS.includes(entry.action);
+    if (staysActive && entry.disabled) {
+      return [
+        `palette: "${entry.action}" is aria-disabled on the read-only canvas; Lasso and Hand stay active (guide \xA713.5)`
+      ];
+    }
+    if (!staysActive && !entry.disabled) {
+      return [`palette: "${entry.action}" is not aria-disabled on the read-only canvas (guide \xA713.5)`];
+    }
+    return [];
+  });
+}
+var LEGEND_MENU_ID = "legend";
+function readOnlyMenuProblems(before, after) {
+  const problems = [];
+  const key = (entry) => `${entry.menuId ?? ""}\0${entry.name}`;
+  const enabledBefore = new Set(before.filter((entry) => !entry.disabled).map(key));
+  for (const entry of after) {
+    if (!entry.disabled) continue;
+    if (entry.menuId === LEGEND_MENU_ID && entry.role === "menuitemcheckbox") {
+      problems.push(
+        "menu: the Legend toggle is aria-disabled on the read-only canvas; a view-only toggle stays usable (guide \xA713.5)"
+      );
+    } else if (entry.group !== "model" && enabledBefore.has(key(entry))) {
+      problems.push(
+        `menu: "${entry.name}" is aria-disabled on the read-only canvas; export and help stay usable (guide \xA713.5)`
+      );
+    }
+  }
+  return problems;
+}
+function lockedShapeProblems(facts) {
+  const problems = [];
+  const { before, after } = facts.dragged;
+  if (facts.contextPadEntries.length > 0) {
+    problems.push(
+      `read-only: selecting "${before.id}" shows the context pad (${facts.contextPadEntries.join(", ")}) (guide \xA713.5)`
+    );
+  }
+  if (!after) {
+    problems.push(`read-only: a 40px drag removed "${before.id}" from the canvas (guide \xA713.5)`);
+  } else if (after.transform !== before.transform || Math.abs(after.size.width - before.size.width) > 0.5 || Math.abs(after.size.height - before.size.height) > 0.5) {
+    problems.push(
+      `read-only: a 40px drag changed "${before.id}" (transform "${before.transform}" \u2192 "${after.transform}", ${round3(before.size.width)} \xD7 ${round3(before.size.height)} \u2192 ${round3(after.size.width)} \xD7 ${round3(after.size.height)}) (guide \xA713.5)`
+    );
+  }
+  if (facts.textFields.length > 0) {
+    problems.push(
+      `read-only: a double-click on "${before.id}" opens a text field (${facts.textFields.join(", ")}) (guide \xA713.5)`
+    );
+  }
+  for (const key of ["Delete", "Backspace"]) {
+    if (!facts.kept[key])
+      problems.push(`read-only: ${key} on the canvas deleted "${before.id}" (guide \xA713.5)`);
+  }
+  return problems;
+}
+
+// src/testing/case-tools.ts
+var DEFAULT_SIZES = [
+  { width: 1280, height: 900 },
+  { width: 720, height: 700 },
+  { width: 420, height: 700 }
+];
+var LIGHT = { theme: "light" };
+var SHOWN_ISLANDS = ["legend", "problems", "status", "inspector"];
+var POLL_MS = 50;
+var HOVER_MARGIN_MS = 200;
+var PARK = { x: 1, y: 1 };
+function sizeLabel(size) {
+  return `${size.width} \xD7 ${size.height}`;
+}
+function fail(caseName, host, problems) {
+  const unique = [...new Set(problems)];
+  throw new Error(
+    `@miragon/modeler-shell conformance: ${caseName} (${host} host)
+${unique.map((problem) => `- ${problem}`).join("\n")}`
+  );
+}
+function finish(caseName, host, problems, skipped) {
+  if (problems.length > 0) fail(caseName, host, problems);
+  const seen = /* @__PURE__ */ new Set();
+  const unique = [...skipped].filter((skip) => !seen.has(skip.reason) && seen.add(skip.reason));
+  return unique.length > 0 ? { skipped: unique } : void 0;
+}
+function assertHooksConsistent(caseName, harness, hooks) {
+  const problems = harnessHookProblems(harness, hooks);
+  if (problems.length > 0) fail(caseName, harness.host, problems);
+}
+function unfed(harness, hook) {
+  return !harness.show?.[hook] && !harness.absent?.includes(hook);
+}
+async function openHarness(page, harness, context) {
+  if (harness.host === "web" && page.emulateMedia) {
+    await page.emulateMedia({
+      colorScheme: context.requested.theme,
+      contrast: context.requested.kontrast === "hoch" ? "more" : "no-preference"
+    });
+  }
+  await harness.open(page, context);
+}
+function webHookSkips(harness, hooks) {
+  return Object.entries(hooks).filter(([hook]) => hook === "toast" ? harness.host !== "ide" : harness.host === "web").filter(([hook]) => unfed(harness, hook)).map(([hook, what]) => ({ hook, reason: `show.${hook} is undefined: ${what} not verified` }));
+}
+async function pollUntil(page, read, done, timeoutMs) {
+  let value = await read();
+  for (let waited = 0; !done(value) && waited < timeoutMs; waited += POLL_MS) {
+    await page.waitForTimeout(POLL_MS);
+    value = await read();
+  }
+  return value;
+}
+async function hover(page, root, target) {
+  const anchor = await findTarget(page, root, target);
+  if (!anchor) return null;
+  await page.mouse.move(PARK.x, PARK.y);
+  await page.mouse.move(anchor.client.x, anchor.client.y);
+  await page.waitForTimeout(TOOLTIP_DELAY_MS + HOVER_MARGIN_MS);
+  await settle(page);
+  return anchor;
+}
+async function openMenuByClick(page, root) {
+  const trigger = await findTarget(page, root, "menu");
+  if (!trigger) return false;
+  await page.mouse.click(trigger.client.x, trigger.client.y);
+  await settle(page);
+  return true;
+}
+async function closeByEscape(page) {
+  await page.keyboard.press("Escape");
+  await settle(page);
+}
+async function menuEntries(page, root) {
+  if (!await openMenuByClick(page, root)) return [];
+  const entries = await inPage(page, menuEntriesProbe, { root }) ?? [];
+  await closeByEscape(page);
+  return entries;
+}
+function shapes(page, root) {
+  return inPage(page, shapesProbe, { root });
+}
+
+// src/testing/web-facts.ts
+var webModeProbe = ({ key }) => {
+  const html = document.documentElement;
+  let stored = null;
+  let storageBlocked = false;
+  try {
+    stored = localStorage.getItem(key);
+  } catch {
+    storageBlocked = true;
+  }
+  return {
+    theme: html.getAttribute("data-cd-theme"),
+    kontrast: html.getAttribute("data-cd-kontrast"),
+    colorScheme: document.querySelector('meta[name="color-scheme"]')?.getAttribute("content") ?? null,
+    themeColors: [...document.querySelectorAll('meta[name="theme-color"]')].map((meta) => ({
+      content: meta.getAttribute("content") ?? "",
+      media: meta.getAttribute("media")
+    })),
+    stored,
+    storageBlocked,
+    noTransition: html.classList.contains("cd-shell-no-transition")
+  };
+};
+var watchModeProbe = (_) => {
+  const tools = window.__modelerShellConformance;
+  tools.modeWatch?.stop();
+  const html = document.documentElement;
+  const changes = [];
+  let frame = 0;
+  let running = true;
+  const tick = () => {
+    if (!running) return;
+    frame += 1;
+    requestAnimationFrame(tick);
+  };
+  requestAnimationFrame(tick);
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      const target = record.target;
+      if (target === html) {
+        if (record.attributeName === "class") {
+          const had = (record.oldValue ?? "").split(/\s+/).includes("cd-shell-no-transition");
+          const has = html.classList.contains("cd-shell-no-transition");
+          if (had !== has) changes.push({ part: "no-transition", value: has ? "on" : "off", frame });
+        } else if (record.attributeName === "data-cd-theme") {
+          changes.push({ part: "theme", value: html.getAttribute("data-cd-theme"), frame });
+        } else if (record.attributeName === "data-cd-kontrast") {
+          changes.push({ part: "kontrast", value: html.getAttribute("data-cd-kontrast"), frame });
+        }
+      } else if (target.localName === "meta") {
+        const name2 = target.getAttribute("name");
+        const media = target.getAttribute("media");
+        changes.push({
+          part: name2 === "color-scheme" ? "color-scheme" : "theme-color",
+          value: `${target.getAttribute("content") ?? ""}${media ? ` ${media}` : ""}`,
+          frame
+        });
+      }
+    }
+  });
+  observer.observe(html, {
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: ["data-cd-theme", "data-cd-kontrast", "class"]
+  });
+  for (const meta of document.querySelectorAll('meta[name="color-scheme"], meta[name="theme-color"]')) {
+    observer.observe(meta, { attributes: true, attributeFilter: ["content"] });
+  }
+  tools.modeWatch = {
+    changes,
+    stop() {
+      running = false;
+      observer.disconnect();
+    }
+  };
+};
+var modeChangesProbe = (_) => {
+  const tools = window.__modelerShellConformance;
+  const watch = tools.modeWatch;
+  if (!watch) return [];
+  watch.stop();
+  tools.modeWatch = void 0;
+  return [...watch.changes];
+};
+var legalLineProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const legal = rootElement.querySelector('[data-chrome="legal"]');
+  return {
+    container: tools.container(rootElement),
+    legal: legal && tools.visible(legal) ? tools.box(legal, rootElement) : null,
+    links: [...legal?.querySelectorAll("a") ?? []].map((link) => ({
+      text: (link.textContent ?? "").replace(/\s+/g, " ").trim(),
+      box: tools.box(link, rootElement)
+    }))
+  };
+};
+var topRowProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const palette = rootElement.querySelector('[data-chrome="palette"]');
+  const menu = rootElement.querySelector('[data-chrome="menu"]');
+  const primary = rootElement.querySelector('[data-chrome="primary"]');
+  const menuBox = menu && tools.visible(menu) ? tools.box(menu, rootElement) : null;
+  let primaryFacts = null;
+  if (primary && tools.visible(primary)) {
+    const rect = primary.getBoundingClientRect();
+    const labels = [...primary.querySelectorAll("span")].filter(
+      (span) => tools.visible(span) && (span.textContent ?? "").trim() !== ""
+    );
+    primaryFacts = {
+      box: tools.box(primary, rootElement),
+      client: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 },
+      collapsed: rootElement.getAttribute("data-primary") === "collapsed",
+      ariaLabel: primary.getAttribute("aria-label"),
+      describedBy: primary.getAttribute("aria-describedby"),
+      label: labels.length > 0 ? labels.map((span) => (span.textContent ?? "").trim()).join(" ") : null
+    };
+  }
+  return {
+    container: tools.container(rootElement),
+    paletteRow: rootElement.getAttribute("data-palette") === "second-row" ? "second-row" : "top",
+    paletteWidth: palette ? palette.offsetWidth - palette.clientWidth + palette.scrollWidth : null,
+    menuRight: menuBox ? menuBox.left + menuBox.width : null,
+    primary: primaryFacts
+  };
+};
+var countClicksProbe = ({ root, selector }) => {
+  const tools = window.__modelerShellConformance;
+  const element = document.querySelector(root)?.querySelector(selector);
+  if (!element) return false;
+  tools.clicks = 0;
+  const listener = () => {
+    tools.clicks += 1;
+  };
+  element.addEventListener("click", listener, true);
+  tools.cleanups.push(() => element.removeEventListener("click", listener, true));
+  return true;
+};
+var clicksProbe = (_) => window.__modelerShellConformance.clicks;
+var emptyStateProbe = ({
+  root,
+  work
+}) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const card = rootElement.querySelector('[data-chrome="empty-state"]');
+  const image = card?.querySelector("img") ?? null;
+  const heading = card?.querySelector("h1, h2, h3, h4, h5, h6") ?? null;
+  const labelledBy = card?.getAttribute("aria-labelledby");
+  const parts = work.map((name2) => [
+    name2,
+    rootElement.querySelector(`[data-chrome="${name2}"]`)
+  ]);
+  parts.push(["hint", rootElement.querySelector(".cd-shell-hint")]);
+  const legal = rootElement.querySelector('[data-chrome="legal"]');
+  return {
+    shown: rootElement.getAttribute("data-empty-state") === "shown",
+    card: card ? {
+      visible: tools.visible(card),
+      box: tools.box(card, rootElement),
+      tag: card.tagName.toLowerCase(),
+      labelledBy: labelledBy ? labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent?.trim() ?? "").join(" ").trim() : null
+    } : null,
+    komet: image ? {
+      tag: image.tagName.toLowerCase(),
+      alt: image.getAttribute("alt"),
+      width: image.getBoundingClientRect().width,
+      height: image.getBoundingClientRect().height
+    } : null,
+    heading: heading ? { tag: heading.tagName.toLowerCase(), text: (heading.textContent ?? "").replace(/\s+/g, " ").trim() } : null,
+    // The card's actions; a text link inside the hint paragraph is no action (guide §8).
+    buttons: [...card?.querySelectorAll("button") ?? []].filter((button) => tools.visible(button) && !button.closest("p")).map((button) => {
+      const rect = button.getBoundingClientRect();
+      return {
+        variant: button.getAttribute("data-variant"),
+        name: (button.getAttribute("aria-label") ?? button.textContent ?? "").replace(/\s+/g, " ").trim(),
+        height: rect.height,
+        client: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+      };
+    }),
+    hint: [...card?.querySelectorAll("p") ?? []].map((paragraph) => (paragraph.textContent ?? "").trim()).filter(Boolean).at(-1) ?? null,
+    work: parts.filter((part) => part[1] !== null).map(([name2, element]) => ({
+      name: name2,
+      visibility: getComputedStyle(element).visibility,
+      visible: tools.visible(element)
+    })),
+    canvasInert: rootElement.querySelector(".cd-shell-canvas")?.hasAttribute("inert") ?? false,
+    legalVisible: legal ? tools.visible(legal) : false
+  };
+};
+var focusOwnerProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const active = document.activeElement;
+  const rootElement = document.querySelector(root);
+  if (!active || active === document.body || active === document.documentElement) {
+    return { owner: "body", description: "<body>" };
+  }
+  const description = tools.describe(active);
+  if (!rootElement?.contains(active)) return { owner: "outside", description };
+  if (active.closest(".djs-container")) return { owner: "canvas", description };
+  const island = active.closest("[data-chrome]")?.getAttribute("data-chrome");
+  return { owner: island ?? "other", description };
+};
+var blurProbe = (_) => {
+  document.activeElement?.blur?.();
+};
+var toastsProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const stack = rootElement.querySelector('[data-chrome="toasts"]');
+  const open = (element) => {
+    try {
+      return element.matches(":popover-open");
+    } catch {
+      return false;
+    }
+  };
+  const toasts2 = stack ? [...stack.querySelectorAll(":scope > [data-status]")].filter(
+    (toast) => tools.visible(toast)
+  ) : [];
+  const name2 = (element) => (element.getAttribute("aria-label") ?? element.textContent ?? "").replace(/\s+/g, " ").trim();
+  const centre = (element) => {
+    const rect = element.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  };
+  return {
+    stack: stack ? {
+      visible: tools.visible(stack),
+      box: tools.box(stack, rootElement),
+      popover: stack.getAttribute("popover"),
+      popoverOpen: open(stack)
+    } : null,
+    toasts: toasts2.map((toast) => {
+      const point = centre(toast);
+      const hit = document.elementFromPoint(point.x, point.y);
+      return {
+        text: (toast.textContent ?? "").replace(/\s+/g, " ").trim(),
+        role: toast.getAttribute("role"),
+        status: toast.getAttribute("data-status"),
+        box: tools.box(toast, rootElement),
+        client: point,
+        buttons: [...toast.querySelectorAll("button")].filter((button) => tools.visible(button)).map((button) => ({
+          name: name2(button),
+          text: (button.textContent ?? "").replace(/\s+/g, " ").trim(),
+          client: centre(button)
+        })),
+        topmost: hit !== null && toast.contains(hit),
+        focused: toast.contains(document.activeElement)
+      };
+    }),
+    strays: [...document.querySelectorAll(".cd-shell-toast")].filter((element) => !stack?.contains(element) && tools.visible(element)).map((element) => tools.describe(element)),
+    live: [...rootElement.querySelectorAll(".cd-shell-live [role], .cd-shell-live [aria-live]")].map(
+      (region) => ({
+        role: region.getAttribute("role"),
+        live: region.getAttribute("aria-live"),
+        text: (region.textContent ?? "").replace(/\s+/g, " ").trim()
+      })
+    )
+  };
+};
+var focusToastButtonProbe = ({
+  root,
+  text,
+  name: name2
+}) => {
+  const stack = document.querySelector(root)?.querySelector('[data-chrome="toasts"]');
+  const toast = [...stack?.querySelectorAll(":scope > [data-status]") ?? []].find(
+    (candidate) => (candidate.textContent ?? "").includes(text)
+  );
+  const button = [...toast?.querySelectorAll("button") ?? []].find(
+    (candidate) => (candidate.getAttribute("aria-label") ?? candidate.textContent ?? "").trim() === name2
+  );
+  if (!button) return false;
+  button.focus();
+  return document.activeElement === button;
+};
+var watchToastStackProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const stack = document.querySelector(root)?.querySelector('[data-chrome="toasts"]');
+  if (!stack) return false;
+  const seen = [];
+  const listener = (event) => seen.push(event.newState);
+  stack.addEventListener("beforetoggle", listener);
+  tools.cleanups.push(() => stack.removeEventListener("beforetoggle", listener));
+  tools.toastToggles = seen;
+  return true;
+};
+var toastStackTogglesProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const stack = document.querySelector(root)?.querySelector('[data-chrome="toasts"]');
+  let open = false;
+  try {
+    open = stack?.matches(":popover-open") ?? false;
+  } catch {
+    open = false;
+  }
+  return { toggles: [...tools.toastToggles ?? []], open };
+};
+var showModalProbe = (_) => {
+  const tools = window.__modelerShellConformance;
+  const dialog = document.createElement("dialog");
+  dialog.setAttribute("data-modeler-shell-conformance", "show-modal");
+  dialog.setAttribute("aria-label", "Conformance stand-in");
+  dialog.style.cssText = "width:60vw;height:60vh;max-width:none;max-height:none;";
+  document.body.append(dialog);
+  tools.injected.push(dialog);
+  dialog.showModal();
+  try {
+    return dialog.matches(":modal");
+  } catch {
+    return dialog.open;
+  }
+};
+var popoverProbe = ({ root }) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(root);
+  if (!rootElement) return null;
+  const pill = rootElement.querySelector('[data-chrome="problems"]');
+  const controls = pill?.getAttribute("aria-controls");
+  const popover2 = (controls ? document.getElementById(controls) : null) ?? rootElement.querySelector('[data-chrome="problems-popover"]');
+  const attributes = (element) => {
+    const all = {};
+    for (const name2 of element.getAttributeNames()) all[name2] = element.getAttribute(name2) ?? "";
+    return all;
+  };
+  const labelledBy = popover2?.getAttribute("aria-labelledby");
+  const active = document.activeElement;
+  const rows = popover2 ? [...popover2.querySelectorAll(".cd-shell-problem")].filter((row) => tools.visible(row)) : [];
+  const pillRect = pill?.getBoundingClientRect();
+  return {
+    pill: pill && pillRect ? {
+      attributes: attributes(pill),
+      box: tools.box(pill, rootElement),
+      client: { x: pillRect.left + pillRect.width / 2, y: pillRect.top + pillRect.height / 2 },
+      visible: tools.visible(pill)
+    } : null,
+    popover: popover2 ? {
+      attributes: attributes(popover2),
+      box: tools.box(popover2, rootElement),
+      visible: tools.visible(popover2),
+      title: labelledBy ? labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent?.trim() ?? "").join(" ").trim() : null
+    } : null,
+    rows: rows.map((row) => {
+      const target = row.matches("button") ? row : row.querySelector("button");
+      const rect = (target ?? row).getBoundingClientRect();
+      return {
+        button: target !== null,
+        height: row.getBoundingClientRect().height,
+        icon: row.querySelector("svg") !== null,
+        text: (row.textContent ?? "").replace(/\s+/g, " ").trim(),
+        client: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+      };
+    }),
+    focus: !active || active === document.body ? "body" : pill && active === pill ? "pill" : popover2?.contains(active) ? "popover" : active.closest(".djs-container") ? "canvas" : "other",
+    focused: !active || active === document.body ? "<body>" : tools.describe(active),
+    focusedRow: (() => {
+      const index = active ? rows.findIndex((row2) => row2 === active || row2.contains(active)) : -1;
+      const row = rows[index];
+      if (!row) return null;
+      let scroller = row.parentElement;
+      while (scroller && scroller !== popover2 && scroller.scrollHeight <= scroller.clientHeight) {
+        scroller = scroller.parentElement;
+      }
+      const view = (scroller ?? popover2 ?? row).getBoundingClientRect();
+      const box = row.getBoundingClientRect();
+      return { index, inView: box.top >= view.top - 1 && box.bottom <= view.bottom + 1 };
+    })()
+  };
+};
+var dragProbe = async (spec) => {
+  const tools = window.__modelerShellConformance;
+  const rootElement = document.querySelector(spec.root);
+  if (!rootElement) return null;
+  const transfer = new DataTransfer();
+  for (const file of spec.files) {
+    transfer.items.add(new File([file.text], file.name, { type: file.type }));
+  }
+  for (const text of spec.strings ?? []) transfer.items.add(text, "text/plain");
+  const rect = rootElement.getBoundingClientRect();
+  const clientX = rect.left + rect.width / 2;
+  const clientY = rect.top + rect.height / 2;
+  const target = document.elementFromPoint(clientX, clientY) ?? rootElement;
+  const events = [];
+  for (const type of spec.steps) {
+    const event = new DragEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      dataTransfer: transfer,
+      clientX,
+      clientY
+    });
+    const effects = { dropEffect: "none", effectAllowed: "all" };
+    const recorded = new Proxy(transfer, {
+      get(target2, key) {
+        if (key === "dropEffect" || key === "effectAllowed") return effects[key];
+        const value = Reflect.get(target2, key, target2);
+        return typeof value === "function" ? value.bind(target2) : value;
+      },
+      set(target2, key, value) {
+        if (key === "dropEffect" || key === "effectAllowed") {
+          effects[key] = String(value);
+          return true;
+        }
+        return Reflect.set(target2, key, value, target2);
+      }
+    });
+    Object.defineProperty(event, "dataTransfer", { configurable: true, value: recorded });
+    target.dispatchEvent(event);
+    events.push({ type, defaultPrevented: event.defaultPrevented, dropEffect: effects.dropEffect ?? "none" });
+  }
+  await tools.settle();
+  const resolve = (role) => {
+    const probe = document.createElement("span");
+    probe.setAttribute("data-modeler-shell-conformance", "role-probe");
+    probe.style.cssText = `position:absolute;visibility:hidden;background-color:var(${role});`;
+    rootElement.append(probe);
+    const color = getComputedStyle(probe).backgroundColor;
+    probe.remove();
+    return color;
+  };
+  const resolveColor = (role) => {
+    const probe = document.createElement("span");
+    probe.setAttribute("data-modeler-shell-conformance", "role-probe");
+    probe.style.cssText = `position:absolute;visibility:hidden;color:var(${role});`;
+    rootElement.append(probe);
+    const color = getComputedStyle(probe).color;
+    probe.remove();
+    return color;
+  };
+  const zone = rootElement.querySelector('[data-chrome="drop-zone"]');
+  const chip = zone?.querySelector(".cd-shell-drop-zone-chip") ?? null;
+  const zoneStyle = zone ? getComputedStyle(zone) : null;
+  return {
+    state: rootElement.getAttribute("data-drop"),
+    events,
+    zone: zone && zoneStyle ? {
+      visible: tools.visible(zone),
+      box: tools.box(zone, rootElement),
+      ariaHidden: zone.getAttribute("aria-hidden"),
+      background: zoneStyle.backgroundColor,
+      borderStyle: zoneStyle.borderTopStyle,
+      borderWidth: zoneStyle.borderTopWidth,
+      borderColor: zoneStyle.borderTopColor,
+      radius: zoneStyle.borderTopLeftRadius,
+      cursor: zoneStyle.cursor
+    } : null,
+    chip: chip ? {
+      text: (chip.textContent ?? "").replace(/\s+/g, " ").trim(),
+      background: getComputedStyle(chip).backgroundColor
+    } : null,
+    roles: {
+      hover: resolve("--cd-ui-hover"),
+      interaktion: resolveColor("--cd-ui-interaktion"),
+      dangerFlaeche: resolve("--cd-ui-danger-flaeche"),
+      danger: resolveColor("--cd-ui-danger"),
+      flaecheHoch: resolve("--cd-ui-flaeche-hoch")
+    }
+  };
+};
+
+// src/testing/web-cases.ts
+var WIDEST_STEP = 1280;
+var NARROWEST_STEP = 400;
+var PHONE_WIDTH = 320;
+var STEP_PX = 24;
+var TOAST_MARGIN_MS = 900;
+var TOAST_RESUME_MS = 1500;
+var TOAST_ANNOUNCE_WAIT_MS = 1e3;
+var DROP_WAIT_MS = 2e3;
+var START_SCREEN_TABS = 10;
+var TOAST_STATUSES = ["success", "info", "warning", "danger"];
+var documentLangProbe = (_) => document.documentElement.lang;
+function sizeOf(harness) {
+  return (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
+}
+function skipFor(hook, what) {
+  return {
+    skipped: [
+      {
+        hook,
+        reason: `${hook === "drop" ? "harness.drop" : `show.${hook}`} is undefined: ${what} not verified`
+      }
+    ]
+  };
+}
+async function aria(page, root) {
+  return inPage(page, ariaProbe, { root });
+}
+async function rowSamples(page, root, height) {
+  const samples = [];
+  const measurements = [];
+  for (let width = WIDEST_STEP; width >= NARROWEST_STEP; width -= STEP_PX) {
+    await page.setViewportSize({ width, height });
+    await settle(page);
+    const sample = await inPage(page, topRowProbe, { root });
+    if (sample) samples.push(sample);
+    measurements.push(await measureChrome(page, root));
+  }
+  return { samples, measurements };
+}
+async function primaryTooltipAt(page, root, width, height) {
+  await page.setViewportSize({ width, height });
+  await settle(page);
+  const primary = await findTarget(page, root, "primary");
+  if (!primary) return null;
+  await page.mouse.move(PARK.x, PARK.y);
+  await page.mouse.move(primary.client.x, primary.client.y);
+  await page.waitForTimeout(TOOLTIP_DELAY_MS + HOVER_MARGIN_MS);
+  await settle(page);
+  const tooltip = await findOverlay(page, root, "tooltip");
+  await page.mouse.move(PARK.x, PARK.y);
+  return tooltip?.text ?? null;
+}
+async function primaryActivation(page, root) {
+  const primary = await findTarget(page, root, "primary");
+  if (!primary) return [];
+  await inPage(page, countClicksProbe, { root, selector: '[data-chrome="primary"]' });
+  await page.mouse.click(primary.client.x, primary.client.y);
+  await settle(page);
+  const pointer = await inPage(page, clicksProbe, null);
+  if (!await focusTarget(page, root, "primary")) {
+    await inPage(page, removeInjectedProbe, null);
+    return ["primary: the primary action cannot take the focus"];
+  }
+  await page.keyboard.press("Enter");
+  await settle(page);
+  const enter = await inPage(page, clicksProbe, null) - pointer;
+  await inPage(page, removeInjectedProbe, null);
+  await page.mouse.move(PARK.x, PARK.y);
+  return primaryActivationProblems({ pointer, enter });
+}
+async function fileEntryProblems(page, root) {
+  const entries = (await menuEntries(page, root)).filter((entry) => entry.group === "file");
+  const problems = [];
+  for (const entry of entries) {
+    if (!entry.menuId || !await openMenuByClick(page, root)) continue;
+    const item = await inPage(page, fileItemProbe, { root, menuId: entry.menuId });
+    if (!item) {
+      await closeByEscape(page);
+      continue;
+    }
+    await page.mouse.click(item.x, item.y);
+    await settle(page);
+    const menu = await inPage(page, menuProbe, { root });
+    if (menu?.menu || menu?.expanded === "true") {
+      problems.push(
+        `menu: File entry "${entry.name}" leaves the menu open; an action closes it first (guide \xA75.4)`
+      );
+      await closeByEscape(page);
+    }
+    if (entry.name.endsWith("\u2026")) await closeByEscape(page);
+  }
+  return problems;
+}
+var fileItemProbe = ({
+  root,
+  menuId
+}) => {
+  const item = document.querySelector(root)?.querySelector(`[role="menu"] [data-menu-id="${menuId}"]`);
+  if (!item) return null;
+  const rect = item.getBoundingClientRect();
+  return rect.width > 0 ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } : null;
+};
+async function lockedFileProblems(page, harness, root) {
+  const invalid = harness.show?.invalid;
+  if (!invalid) return [];
+  await invalid(page);
+  await page.waitForTimeout(INVALID_STATUS_DELAY_MS + HOVER_MARGIN_MS);
+  return (await menuEntries(page, root)).filter((entry) => entry.group === "file" && entry.disabled).map(
+    (entry) => `menu: File entry "${entry.name}" is aria-disabled on the read-only canvas (guide \xA713.5)`
+  );
+}
+var webChromeCase = {
+  name: "webChrome",
+  async run(page, harness) {
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = sizeOf(harness);
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const problems = [];
+    if (harness.host !== "web") {
+      const measurement = await measureChrome(page, root);
+      for (const island of ["primary", "legal", "empty-state", "drop-zone"]) {
+        if (measurement.islands[island]) {
+          problems.push(
+            `${island}: visible in the ${harness.host} host; it belongs to the web app (guide \xA75.2)`
+          );
+        }
+      }
+      return finish("webChrome", harness.host, problems, []);
+    }
+    const facts = await aria(page, root);
+    if (facts) problems.push(...legalContentProblems(facts.legalLinks));
+    const name2 = (facts?.primary?.attributes["aria-label"] ?? "").trim();
+    problems.push(...await primaryActivation(page, root));
+    const { samples, measurements } = await rowSamples(page, root, size.height);
+    for (const measurement of measurements) {
+      problems.push(
+        ...webRowProblems(measurement, "web").map(
+          (problem) => `[${Math.round(measurement.container.width)}px wide] ${problem}`
+        ),
+        ...zoomRowBottomProblems(
+          measurement.islands.zoom,
+          measurement.open.zoomRaised,
+          measurement.container,
+          measurement.islands.legal?.height
+        )
+      );
+    }
+    if (samples.some((sample) => sample.primary)) {
+      const withLabel = labelledWidth(samples);
+      if (withLabel === void 0) {
+        problems.push(
+          `primary: never shows its label between ${WIDEST_STEP}px and ${NARROWEST_STEP}px; it collapses only when the top row gets tight (guide \xA75.15)`
+        );
+      } else {
+        problems.push(...topRowProblems(samples, withLabel, name2));
+      }
+      const collapsed = samples.find((sample) => sample.primary?.collapsed);
+      const labelled = samples.find((sample) => sample.primary && !sample.primary.collapsed);
+      for (const sample of [labelled, collapsed]) {
+        if (!sample?.primary) continue;
+        const width = sample.container.width;
+        const tooltip = await primaryTooltipAt(page, root, width, size.height);
+        problems.push(...primaryTooltipProblems(sample.primary.collapsed, tooltip, name2, width));
+      }
+    }
+    await page.setViewportSize({ width: PHONE_WIDTH, height: size.height });
+    await settle(page);
+    const legalLine = await inPage(page, legalLineProbe, { root });
+    if (legalLine) problems.push(...legalReachProblems(legalLine));
+    await page.setViewportSize({ width: size.width, height: size.height });
+    await settle(page);
+    problems.push(...await fileEntryProblems(page, root));
+    problems.push(...await lockedFileProblems(page, harness, root));
+    return finish("webChrome", harness.host, [...new Set(problems)], []);
+  }
+};
+function startScreen(page, root) {
+  return inPage(page, emptyStateProbe, { root, work: WORK_CHROME });
+}
+async function toastFocusOnStartScreen(page, root, show) {
+  const text = "Conformance: a toast on the start screen";
+  await show(page, { status: "danger", text });
+  await settle(page);
+  const closeName = (await toasts(page, root))?.toasts.find((toast) => toast.text.includes(text))?.buttons.at(-1)?.name;
+  if (!closeName || !await inPage(page, focusToastButtonProbe, { root, text, name: closeName })) return [];
+  await page.keyboard.press("Enter");
+  await settle(page);
+  const focus = await inPage(page, focusOwnerProbe, { root });
+  return focus.owner === "empty-state" ? [] : [
+    `empty-state: closing a focused toast on the start screen leaves the focus on ${focus.description}; it goes to the card's "New diagram" (WCAG 2.4.3)`
+  ];
+}
+var emptyStateCase = {
+  name: "emptyState",
+  async run(page, harness) {
+    assertHooksConsistent("emptyState", harness, ["emptyState"]);
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = sizeOf(harness);
+    const show = harness.show?.emptyState;
+    if (harness.host !== "web") {
+      await openHarness(page, harness, { size, requested: LIGHT });
+      if (show) await show(page);
+      await settle(page);
+      const facts2 = await startScreen(page, root);
+      const problems2 = [];
+      if (facts2?.card?.visible || facts2?.shown) {
+        problems2.push(
+          `empty-state: a start screen in the ${harness.host} host; it shows the empty-file hint instead (guide \xA713.5)`
+        );
+      }
+      return finish("emptyState", harness.host, problems2, []);
+    }
+    if (!show) {
+      return unfed(harness, "emptyState") ? skipFor("emptyState", "the start screen") : void 0;
+    }
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const lang = await inPage(page, documentLangProbe, null);
+    await show(page);
+    await settle(page);
+    const container = (await measureChrome(page, root)).container;
+    const facts = await startScreen(page, root);
+    if (!facts) return finish("emptyState", harness.host, [`no element matches "${root}"`], []);
+    const problems = emptyStateProblems(facts, container, lang);
+    await inPage(page, blurProbe, null);
+    const stops = [];
+    for (let press = 0; press < START_SCREEN_TABS; press++) {
+      await page.keyboard.press("Tab");
+      stops.push(await inPage(page, focusOwnerProbe, { root }));
+    }
+    problems.push(...emptyStateTabProblems(stops));
+    await inPage(page, blurProbe, null);
+    for (const key of ["Control+Equal", "Control+Minus", "Shift+Digit1"]) {
+      await inPage(page, clearKeysProbe, null);
+      const before = (await inPage(page, afterPressProbe, { root })).zoom;
+      await page.keyboard.press(key);
+      const after = await inPage(page, afterPressProbe, { root });
+      problems.push(...emptyStateKeyProblems(key, before, after.zoom, after.keys));
+    }
+    const showToast = harness.show?.toast;
+    if (showToast) problems.push(...await toastFocusOnStartScreen(page, root, showToast));
+    const start = facts.buttons[0];
+    if (start) {
+      await page.mouse.click(start.client.x, start.client.y);
+      await settle(page);
+      const after = await pollUntil(
+        page,
+        () => startScreen(page, root),
+        (state) => state === null || !state.shown,
+        1e3
+      );
+      if (after) problems.push(...afterStartProblems(after, await inPage(page, focusOwnerProbe, { root })));
+    }
+    return finish("emptyState", harness.host, problems, []);
+  }
+};
+function toasts(page, root) {
+  return inPage(page, toastsProbe, { root });
+}
+async function dismissAll(page, root) {
+  for (let attempt = 0; attempt < 6; attempt++) {
+    const close = (await toasts(page, root))?.toasts[0]?.buttons.at(-1);
+    if (!close) break;
+    await page.mouse.click(close.client.x, close.client.y);
+    await settle(page);
+  }
+  await page.mouse.move(PARK.x, PARK.y);
+}
+async function presentAt(page, root, since, ms, texts) {
+  const wait = since + ms - Date.now();
+  if (wait > 0) await page.waitForTimeout(wait);
+  await settle(page);
+  const shown = (await toasts(page, root))?.toasts ?? [];
+  return new Set(texts.filter((text) => shown.some((toast) => toast.text.includes(text))));
+}
+async function toastAnatomy(page, root, show, lang) {
+  const problems = [];
+  const before = (await toasts(page, root))?.live ?? [];
+  for (const status of TOAST_STATUSES) {
+    const text = `Conformance: a ${status} toast`;
+    await show(page, { status, text });
+    await settle(page);
+    const toast = (await toasts(page, root))?.toasts.find((candidate) => candidate.text.includes(text));
+    if (!toast) {
+      problems.push(`toasts: show.toast with a ${status} toast shows nothing`);
+      continue;
+    }
+    const persistent = toastLiveRegion(before, status) !== void 0;
+    const reached = (facts) => toastLiveRegion(facts?.live ?? [], status)?.text.includes(text) ?? false;
+    const announced = persistent && reached(await pollUntil(page, () => toasts(page, root), reached, TOAST_ANNOUNCE_WAIT_MS));
+    problems.push(...toastAnatomyProblems(toast, status, lang, { persistent, announced }));
+    const close = toast.buttons.at(-1);
+    if (close) {
+      await page.mouse.click(close.client.x, close.client.y);
+      await page.mouse.move(PARK.x, PARK.y);
+      await settle(page);
+      const still = (await toasts(page, root))?.toasts.some((candidate) => candidate.text.includes(text));
+      if (still) problems.push(`toasts: Close does not close the ${status} toast`);
+    }
+  }
+  await dismissAll(page, root);
+  return problems;
+}
+async function toastStack(page, root, show) {
+  const texts = ["A", "B", "C", "D"].map((letter) => `Conformance: stacked ${letter}`);
+  const [first, second, third, fourth] = texts;
+  await show(page, { status: "info", text: first, actionLabel: "Undo" });
+  for (const text of [second, third, fourth]) await show(page, { status: "success", text });
+  await settle(page);
+  const problems = toastStackProblems((await toasts(page, root))?.toasts ?? [], texts, [
+    first,
+    third,
+    fourth
+  ]);
+  await show(page, { status: "success", text: third });
+  await settle(page);
+  problems.push(...repeatedToastProblems((await toasts(page, root))?.toasts ?? [], third));
+  await dismissAll(page, root);
+  return problems;
+}
+async function toastTiming(page, root, show) {
+  const lifetime = TOAST_DURATION_MS.success;
+  const plain = "Conformance: a plain toast";
+  const hovered = "Conformance: a hovered toast";
+  const focused = "Conformance: a focused toast";
+  const texts = [plain, hovered, focused];
+  for (const text of texts) await show(page, { status: "success", text });
+  const shownAt = Date.now();
+  await settle(page);
+  const target = (await toasts(page, root))?.toasts.find((toast) => toast.text.includes(hovered));
+  if (target) await page.mouse.move(target.client.x, target.client.y);
+  const focusTarget2 = (await toasts(page, root))?.toasts.find((toast) => toast.text.includes(focused));
+  const closeName = focusTarget2?.buttons.at(-1)?.name ?? "";
+  await inPage(page, focusToastButtonProbe, { root, text: focused, name: closeName });
+  const timings = [];
+  const record = (shown, after, expect) => {
+    for (const [text, expectation, condition] of expect) {
+      timings.push({ text, expectation, after, present: shown.has(text), condition });
+    }
+  };
+  const early = lifetime - 800;
+  record(await presentAt(page, root, shownAt, early, texts), early, [[plain, "present", "plain"]]);
+  const late = lifetime + TOAST_MARGIN_MS;
+  record(await presentAt(page, root, shownAt, late, texts), late, [
+    [plain, "gone", "plain"],
+    [hovered, "present", "hovered"],
+    [focused, "present", "focused"]
+  ]);
+  await page.mouse.move(PARK.x, PARK.y);
+  await inPage(page, blurProbe, null);
+  const leftAt = Date.now();
+  const resumed = TOAST_RESUME_MS - 500;
+  record(await presentAt(page, root, leftAt, resumed, texts), resumed, [
+    [hovered, "present", "resumed"],
+    [focused, "present", "resumed"]
+  ]);
+  const gone = lifetime + TOAST_MARGIN_MS;
+  record(await presentAt(page, root, leftAt, gone, texts), gone, [
+    [hovered, "gone", "resumed"],
+    [focused, "gone", "resumed"]
+  ]);
+  const action = "Conformance: a toast with an action";
+  await show(page, { status: "info", text: action, actionLabel: "Undo" });
+  const actionAt = Date.now();
+  const actionWait = TOAST_DURATION_MS.info + TOAST_MARGIN_MS;
+  record(await presentAt(page, root, actionAt, actionWait, [action]), actionWait, [
+    [action, "present", "action"]
+  ]);
+  await dismissAll(page, root);
+  return toastTimingProblems(timings);
+}
+async function toastAboveModal(page, root, show) {
+  const before = "Conformance: a toast before the dialog";
+  const text = "Conformance: a toast above the dialog";
+  await show(page, { status: "info", text: before, actionLabel: "Undo" });
+  await settle(page);
+  const problems = [];
+  if ((await toasts(page, root))?.stack?.popover !== "manual") {
+    problems.push(
+      `toasts: the web app's stack is no popover="manual"; it stays above a showModal() dialog only in the top layer (API.md, Toasts)`
+    );
+  } else if (await inPage(page, watchToastStackProbe, { root })) {
+    if (await inPage(page, showModalProbe, null)) {
+      await show(page, { status: "success", text });
+      await settle(page);
+      const shown = (await toasts(page, root))?.toasts.some((toast) => toast.text.includes(text)) ?? false;
+      const { toggles, open } = await inPage(page, toastStackTogglesProbe, { root });
+      if (!shown) problems.push("toasts: show.toast with a showModal() dialog open shows nothing");
+      else if (!open || toggles.at(-1) !== "open") {
+        problems.push(
+          "toasts: a toast shown with a showModal() dialog open does not raise the stack above it; the stack is shown again with every toast (API.md, Toasts)"
+        );
+      }
+    }
+  }
+  await inPage(page, removeInjectedProbe, null);
+  await settle(page);
+  await dismissAll(page, root);
+  return problems;
+}
+var toastsCase = {
+  name: "toasts",
+  async run(page, harness) {
+    assertHooksConsistent("toasts", harness, ["toast"]);
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = sizeOf(harness);
+    const show = harness.show?.toast;
+    if (harness.host === "ide") {
+      await openHarness(page, harness, { size, requested: LIGHT });
+      if (show) await show(page, { status: "success", text: "Conformance: a toast in the IDE host" });
+      await settle(page);
+      const facts = await toasts(page, root);
+      const problems2 = [];
+      if (facts?.stack) {
+        problems2.push(
+          'toasts: the IDE host renders a toast stack [data-chrome="toasts"]; it shows no toasts (guide \xA713.5)'
+        );
+      }
+      if ((facts?.toasts.length ?? 0) > 0 || (facts?.strays.length ?? 0) > 0) {
+        problems2.push(
+          "toasts: show.toast shows a toast in the IDE host; the extension shows the host's notification (guide \xA713.5)"
+        );
+      }
+      return finish("toasts", harness.host, problems2, []);
+    }
+    if (!show) return unfed(harness, "toast") ? skipFor("toast", "the toasts") : void 0;
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const lang = await inPage(page, documentLangProbe, null);
+    await dismissAll(page, root);
+    const problems = [
+      ...await toastAnatomy(page, root, show, lang),
+      ...await toastStack(page, root, show),
+      ...await toastTiming(page, root, show)
+    ];
+    if (harness.host === "web") problems.push(...await toastAboveModal(page, root, show));
+    return finish("toasts", harness.host, problems, []);
+  }
+};
+function popover(page, root) {
+  return inPage(page, popoverProbe, { root });
+}
+async function clickPill(page, root) {
+  const pill = (await popover(page, root))?.pill;
+  if (!pill?.visible) return null;
+  await page.mouse.click(pill.client.x, pill.client.y);
+  await settle(page);
+  return popover(page, root);
+}
+async function keyboardRows(page, root) {
+  if (!await focusTarget(page, root, "pill")) return ["problems: the pill cannot take the focus"];
+  await page.keyboard.press("Enter");
+  await settle(page);
+  const opened = await popover(page, root);
+  const count = opened?.rows.length ?? 0;
+  if (!opened?.popover?.visible || count === 0) {
+    await closeByEscape(page);
+    return opened?.popover?.visible ? [] : ["problems-popover: Enter on the pill does not open the list"];
+  }
+  const steps = [{ key: "Enter on the pill", expected: 0, focused: opened.focusedRow }];
+  for (let index = 1; index < count; index++) {
+    await page.keyboard.press("ArrowDown");
+    steps.push({
+      key: "ArrowDown",
+      expected: index,
+      focused: (await popover(page, root))?.focusedRow ?? null
+    });
+  }
+  if (count > 1) {
+    await page.keyboard.press("Home");
+    steps.push({ key: "Home", expected: 0, focused: (await popover(page, root))?.focusedRow ?? null });
+    await page.keyboard.press("End");
+    steps.push({ key: "End", expected: count - 1, focused: (await popover(page, root))?.focusedRow ?? null });
+  }
+  await closeByEscape(page);
+  return popoverKeyboardProblems(steps, count);
+}
+var problemsListCase = {
+  name: "problemsList",
+  async run(page, harness) {
+    assertHooksConsistent("problemsList", harness, ["problems"]);
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = sizeOf(harness);
+    const show = harness.show?.problems;
+    if (!show) return unfed(harness, "problems") ? skipFor("problems", "the problems list") : void 0;
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    await show(page);
+    await settle(page);
+    const before = await popover(page, root);
+    const problems = [];
+    if (!before?.pill?.visible) {
+      return finish(
+        "problemsList",
+        harness.host,
+        ["problems: the pill is not visible after show.problems"],
+        []
+      );
+    }
+    const opensList = harness.host === "web" || before.pill.attributes["aria-haspopup"] === "dialog";
+    if (!opensList) {
+      const after = await clickPill(page, root);
+      if (after?.popover?.visible) {
+        problems.push(
+          `problems-popover: the ${harness.host} host shows a problems list; its pill opens the host's own view (guide \xA75.10)`
+        );
+      }
+      return finish("problemsList", harness.host, problems, []);
+    }
+    const lang = await inPage(page, documentLangProbe, null);
+    const container = (await measureChrome(page, root)).container;
+    const opened = await clickPill(page, root);
+    if (!opened) return finish("problemsList", harness.host, ["problems: the pill cannot be clicked"], []);
+    problems.push(...openPopoverProblems(opened, container, lang));
+    await closeByEscape(page);
+    const escaped = await popover(page, root);
+    if (escaped) problems.push(...closedPopoverProblems(escaped, "Escape"));
+    await clickPill(page, root);
+    await page.mouse.click(PARK.x, PARK.y);
+    await settle(page);
+    const outside = await popover(page, root);
+    if (outside) problems.push(...closedPopoverProblems(outside, "an outside click"));
+    problems.push(...await keyboardRows(page, root));
+    const skipped = [];
+    const reopened = await clickPill(page, root);
+    const row = reopened?.rows.find((candidate) => candidate.button);
+    if (row) {
+      await page.mouse.click(row.client.x, row.client.y);
+      await settle(page);
+      const selected = await popover(page, root);
+      if (selected) problems.push(...closedPopoverProblems(selected, "a row with an element"));
+    } else {
+      await closeByEscape(page);
+      if ((reopened?.rows.length ?? 0) > 0 && !harness.absent?.includes("problemSelection")) {
+        skipped.push({
+          hook: "problems",
+          reason: 'show.problems gives no item with an elementId: a row that selects its element was not verified (absent: ["problemSelection"] for a modeler whose problems never point at an element)'
+        });
+      }
+    }
+    return finish("problemsList", harness.host, problems, skipped);
+  }
+};
+function drag(page, spec) {
+  return inPage(page, dragProbe, spec);
+}
+function secondFile(file) {
+  return { ...file, name: `second-${file.name}` };
+}
+var dropZoneCase = {
+  name: "dropZone",
+  async run(page, harness) {
+    assertHooksConsistent("dropZone", harness, ["drop", "emptyState"]);
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = sizeOf(harness);
+    const fixtures = harness.drop;
+    if (harness.host === "web" && !fixtures) {
+      return harness.absent?.includes("drop") ? void 0 : skipFor("drop", "the drop zone");
+    }
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const problems = [];
+    const probeFile = { name: "conformance.txt", type: "text/plain", text: "conformance" };
+    if (harness.host !== "web" || !fixtures) {
+      const facts = await drag(page, { root, files: [probeFile], steps: ["dragenter", "dragover"] });
+      if (facts && (facts.state !== null || facts.zone?.visible)) {
+        problems.push(
+          `drop-zone: a file drag shows a drop zone in the ${harness.host} host; its files belong to the host (guide \xA75.2)`
+        );
+      }
+      await drag(page, { root, files: [probeFile], steps: ["dragleave"] });
+      return finish("dropZone", harness.host, problems, []);
+    }
+    const container = (await measureChrome(page, root)).container;
+    const { accepted, rejected } = fixtures;
+    const check = async (files, strings, expected, context) => {
+      const over = await drag(page, { root, files, strings, steps: ["dragenter", "dragover"] });
+      if (over) problems.push(...dropStateProblems(over, expected, context, container));
+      const left = await drag(page, { root, files, strings, steps: ["dragleave"] });
+      if (left && expected !== "none") {
+        problems.push(...dropStateProblems(left, "none", `${context}, once it left the page,`, container));
+      }
+    };
+    await check([accepted], [], "over", `a drag of "${accepted.name}"`);
+    await check(
+      [accepted, secondFile(accepted)],
+      [],
+      fixtures.multiple ? "over" : "forbidden",
+      fixtures.multiple ? "a drag of two files (multiple)" : "a drag of two files"
+    );
+    if (await inPage(page, injectProbe, { root, kind: "modal" })) {
+      await check([accepted], [], "forbidden", "a file drag with a modal dialog open");
+    }
+    await inPage(page, removeInjectedProbe, null);
+    await check([], ["Conformance text"], "none", "a text drag");
+    const emptyState = harness.show?.emptyState;
+    if (emptyState) {
+      await emptyState(page);
+      await settle(page);
+    }
+    const onStartScreen = async () => (await inPage(page, emptyStateProbe, { root, work: [] }))?.shown ?? false;
+    const started = await onStartScreen();
+    if (rejected) {
+      await drag(page, { root, files: [rejected], steps: ["dragenter", "dragover", "drop"] });
+      const shown = await pollUntil(
+        page,
+        () => toasts(page, root),
+        (facts) => facts?.toasts.some((toast) => toast.status === "danger") ?? false,
+        DROP_WAIT_MS
+      );
+      if (!shown?.toasts.some((toast) => toast.status === "danger")) {
+        problems.push(
+          `drop-zone: dropping "${rejected.name}" shows no danger toast (guide \xA79, or the modeler's onReject)`
+        );
+      }
+      if (started && !await onStartScreen()) {
+        problems.push(
+          `drop-zone: dropping "${rejected.name}" opened it; a file outside accept opens nothing`
+        );
+      }
+      await dismissAll(page, root);
+    }
+    const dropped = await drag(page, { root, files: [accepted], steps: ["dragenter", "dragover", "drop"] });
+    if (dropped?.events.find((event) => event.type === "drop")?.defaultPrevented === false) {
+      problems.push(
+        `drop-zone: the drop of "${accepted.name}" is not prevented, so the browser would open the file`
+      );
+    }
+    if (started) {
+      const opened = await pollUntil(page, onStartScreen, (shown) => !shown, DROP_WAIT_MS);
+      if (opened)
+        problems.push(
+          `drop-zone: dropping "${accepted.name}" on the start screen does not open it (the card stays)`
+        );
+    }
+    const after = await drag(page, { root, files: [], steps: [] });
+    if (after && (after.state !== null || after.zone?.visible)) {
+      problems.push("drop-zone: the drop zone still shows after the drop");
+    }
+    return finish("dropZone", harness.host, problems, []);
+  }
+};
+function createWebCases() {
+  return [webChromeCase, emptyStateCase, toastsCase, problemsListCase, dropZoneCase];
+}
+
+// src/testing/cases.ts
+var LOCKED_DRAG_PX = 40;
+var CREATE_WAIT_MS = 1e3;
+var READ_ONLY_WAIT_MS = 1e3;
+var COLOR_WAIT_MS = 600;
+var REQUESTED_APPEARANCES = [
+  { theme: "dark" },
+  { theme: "dark", kontrast: "hoch" },
+  { theme: "light", kontrast: "hoch" }
+];
+var TEXT_FIELDS = [
+  ["input", "a text field"],
+  ["textarea", "a textarea"],
+  ["contenteditable", "an editable label"]
+];
+var UNDO_REDO_PRESSES = [
+  "Control+KeyZ",
+  "Meta+KeyZ",
+  "Control+Shift+KeyZ",
+  "Meta+Shift+KeyZ",
+  "Control+KeyY"
+];
+var ONE_STEP_UP = 135;
+var TWO_STEPS_UP = 182;
+var ZOOM_LIMIT_MAX = 400;
+var ZOOM_LIMIT_MIN = 20;
+function appearanceLabel(appearance) {
+  return appearance.kontrast ? `${appearance.theme} + ${appearance.kontrast}` : appearance.theme;
+}
+function missingHooks(harness, what) {
+  return SHOWN_ISLANDS.filter((island) => unfed(harness, island)).map((island) => ({
+    hook: island,
+    reason: `show.${island} is undefined: ${what} of the ${island} island not verified`
+  }));
+}
+function visibleIslands(facts) {
+  const islands = /* @__PURE__ */ new Set();
+  for (const island of SHOWN_ISLANDS) if (facts[island]?.visible) islands.add(island);
+  return islands;
+}
+async function popupGeometry(page, root, measurement) {
+  const problems = [];
+  if (!await openMenuByClick(page, root)) return ["dropdown: no visible menu trigger to open it"];
+  const dropdown = await findOverlay(page, root, "menu");
+  if (!dropdown) problems.push('dropdown: no visible role="menu" after clicking the trigger');
+  else problems.push(...dropdownProblems(dropdown.box, measurement.container));
+  await closeByEscape(page);
+  const rows = [
+    ["menu", "top"],
+    ["palette-entry", measurement.paletteRow === "second-row" ? "second-row" : "top"],
+    ["zoom-in", "bottom"]
+  ];
+  for (const [target, row] of rows) {
+    const anchor = await hover(page, root, target);
+    if (!anchor) {
+      problems.push(`tooltip: no visible ${target} to hover`);
+      continue;
+    }
+    const tooltip = await findOverlay(page, root, "tooltip");
+    if (!tooltip) {
+      problems.push(`tooltip: none visible ${TOOLTIP_DELAY_MS + HOVER_MARGIN_MS}ms after hovering ${target}`);
+      continue;
+    }
+    if (tooltip.count > 1) problems.push(`tooltip: ${tooltip.count} tooltips visible at once`);
+    if (anchor.label && !tooltip.text.startsWith(anchor.label)) {
+      problems.push(`tooltip: hovering ${target} ("${anchor.label}") shows "${tooltip.text}"`);
+    }
+    const legalHeight = legalLineHeight(measurement.islands.legal?.height);
+    const bottomRow = measurement.open.zoomRaised ? SHELL.edge + legalHeight + SHELL.gap : SHELL.edge;
+    problems.push(
+      ...tooltipProblems(tooltip.box, anchor.box, row, measurement.container, void 0, bottomRow).map(
+        (problem) => `${problem} (on ${target})`
+      )
+    );
+  }
+  await page.mouse.move(PARK.x, PARK.y);
+  return problems;
+}
+var GEOMETRY_TOAST = {
+  status: "info",
+  text: "Conformance: the toast stack's geometry",
+  actionLabel: "Undo"
+};
+async function withProblemsListOpen(page, root, check) {
+  const pill = await findTarget(page, root, "pill");
+  if (!pill) return;
+  await page.mouse.click(pill.client.x, pill.client.y);
+  await settle(page);
+  await check();
+  await closeByEscape(page);
+}
+var geometryCase = {
+  name: "geometry",
+  async run(page, harness) {
+    assertHooksConsistent("geometry", harness, [...SHOWN_ISLANDS, "toast", "emptyState"]);
+    const root = harness.root ?? DEFAULT_ROOT;
+    const problems = [];
+    for (const size of harness.sizes ?? DEFAULT_SIZES) {
+      const at = sizeLabel(size);
+      await openHarness(page, harness, { size, requested: LIGHT });
+      await settle(page);
+      const check = async (state) => {
+        const measurement = await measureChrome(page, root);
+        problems.push(
+          ...[
+            ...geometryProblems(measurement, harness.host),
+            ...absentIslandProblems(new Set(Object.keys(measurement.islands)), harness.absent)
+          ].map((problem) => `[${at}, ${state}] ${problem}`)
+        );
+        return measurement;
+      };
+      const opened = await check("as opened");
+      problems.push(...(await popupGeometry(page, root, opened)).map((problem) => `[${at}] ${problem}`));
+      const toast = harness.show?.toast;
+      if (toast) {
+        await toast(page, GEOMETRY_TOAST);
+        await settle(page);
+        await check("with a toast");
+      }
+      for (const island of SHOWN_ISLANDS) {
+        const show = harness.show?.[island];
+        if (!show) continue;
+        await show(page);
+        await settle(page);
+        await check(`after show.${island}`);
+        if (island === "problems" && harness.host !== "ide") {
+          await withProblemsListOpen(page, root, () => check("with the problems list open"));
+        }
+      }
+      const emptyState = harness.show?.emptyState;
+      if (emptyState) {
+        await emptyState(page);
+        await settle(page);
+        await check("after show.emptyState");
+      }
+    }
+    return finish("geometry", harness.host, problems, [
+      ...missingHooks(harness, "the geometry"),
+      ...webHookSkips(harness, {
+        toast: "the geometry of the toast stack",
+        emptyState: "the geometry of the start screen"
+      })
+    ]);
+  }
+};
+async function menuState(page, root) {
+  const facts = await inPage(page, menuProbe, { root });
+  if (!facts) throw new Error(`@miragon/modeler-shell conformance: no element matches "${root}"`);
+  return facts;
+}
+async function menuKeyboardProblems(page, root) {
+  const problems = [];
+  const openWith = async (key, focus) => {
+    if (!await focusTarget(page, root, "menu")) {
+      problems.push("menu: the trigger cannot take focus");
+      return void 0;
+    }
+    await page.keyboard.press(key);
+    await settle(page);
+    const opened2 = await menuState(page, root);
+    problems.push(...menuOpenProblems(opened2, focus).map((problem) => `${key} on the trigger: ${problem}`));
+    return opened2;
+  };
+  const close = async (key) => {
+    await closeByEscape(page);
+    problems.push(
+      ...menuClosedProblems(await menuState(page, root), true).map(
+        (problem) => `${key}, then Escape: ${problem}`
+      )
+    );
+  };
+  const opened = await openWith("Enter", "first");
+  if (opened && opened.items.length > 1) {
+    const moves = [
+      ["ArrowUp", (count) => count - 1],
+      ["ArrowDown", () => 0],
+      ["End", (count) => count - 1],
+      ["Home", () => 0]
+    ];
+    await inPage(page, clearKeysProbe, null);
+    for (const [key, target] of moves) {
+      await page.keyboard.press(key);
+      const moved = await menuState(page, root);
+      const expected = target(moved.items.length);
+      if (moved.active !== expected) {
+        problems.push(
+          `menu: ${key} moves the focus to entry ${moved.active + 1}, expected entry ${expected + 1} of ${moved.items.length}`
+        );
+      }
+    }
+    const { documentKeys } = await inPage(page, afterPressProbe, { root });
+    problems.push(
+      ...menuKeysAtDocumentProblems(
+        moves.map(([key]) => key),
+        documentKeys
+      )
+    );
+  }
+  if (opened) await close("Enter");
+  if (await openWith("ArrowDown", "first")) await close("ArrowDown");
+  if (await openWith("ArrowUp", "last")) await close("ArrowUp");
+  return problems;
+}
+async function paletteKeyboardProblems(page, root) {
+  const before = await inPage(page, paletteFocusProbe, { root });
+  if (!before || before.entries.length < 2) return [];
+  if (!await focusTarget(page, root, "palette-tab-stop")) {
+    return ['palette: no entry with tabindex="0" takes the focus'];
+  }
+  const problems = [];
+  const start = before.entries.indexOf(before.tabStops[0] ?? "");
+  const step = start < before.entries.length - 1 ? 1 : -1;
+  const moves = [
+    [step === 1 ? "ArrowRight" : "ArrowLeft", start + step],
+    ["End", before.entries.length - 1],
+    ["Home", 0]
+  ];
+  for (const [key, index] of moves) {
+    await page.keyboard.press(key);
+    const after = await inPage(page, paletteFocusProbe, { root });
+    const expected = before.entries[index];
+    if (!after || after.active !== expected) {
+      problems.push(`palette: ${key} focuses "${after?.active ?? "nothing"}", expected "${expected}"`);
+    } else if (after.tabStops.length !== 1 || after.tabStops[0] !== expected) {
+      problems.push(
+        `palette: after ${key} tabindex="0" is on ${after.tabStops.join(", ") || "no entry"}, expected "${expected}"`
+      );
+    }
+  }
+  return problems;
+}
+async function paletteShortcutWalk(page, root) {
+  const before = await inPage(page, paletteFocusProbe, { root });
+  if (!before || before.entries.length === 0) return [];
+  if (!await focusTarget(page, root, "palette-tab-stop")) return [];
+  if (before.entries.length > 1) await page.keyboard.press("End");
+  await page.keyboard.press("Home");
+  const seen = [];
+  for (let index = 0; index < before.entries.length; index++) {
+    const facts = await inPage(page, paletteShortcutProbe, { root });
+    if (facts) seen.push(facts);
+    await page.keyboard.press("ArrowRight");
+  }
+  return paletteShortcutProblems(seen);
+}
+async function tabSequenceFromMenu(page, root, primary) {
+  if (!await focusTarget(page, root, "menu")) return [];
+  const stops = [];
+  for (let step = 0; step < 3; step++) {
+    await page.keyboard.press("Tab");
+    const stop = await inPage(page, activeStopProbe, { root });
+    stops.push({ description: stop.description, kind: stop.kind });
+  }
+  return tabSequenceProblems(stops, primary);
+}
+async function zoomLimitProblems(page, root) {
+  const problems = [];
+  const limits = [
+    ["in", "zoom-in", ZOOM_LIMIT_MAX, 12, "out"],
+    ["out", "zoom-out", ZOOM_LIMIT_MIN, 16, "in"]
+  ];
+  for (const [button, target, limit, maxClicks, other] of limits) {
+    const control = await findTarget(page, root, target);
+    if (!control) continue;
+    let buttons = await inPage(page, zoomButtonsProbe, { root });
+    for (let click = 0; click < maxClicks && buttons[button]?.attributes["aria-disabled"] !== "true"; click++) {
+      await page.mouse.click(control.client.x, control.client.y);
+      await settle(page);
+      buttons = await inPage(page, zoomButtonsProbe, { root });
+    }
+    const { zoom } = await inPage(page, afterPressProbe, { root });
+    const reached = buttons[button];
+    if (reached?.attributes["aria-disabled"] !== "true") {
+      problems.push(
+        `zoom: [data-zoom="${button}"] is not aria-disabled after ${maxClicks} clicks (readout ${zoom ?? "?"}%)`
+      );
+    } else {
+      if (zoom !== limit) {
+        problems.push(`zoom: [data-zoom="${button}"] is disabled at ${zoom ?? "?"}%, expected at ${limit}%`);
+      }
+      if (reached.disabled) problems.push(`zoom: [data-zoom="${button}"] is natively disabled at the limit`);
+    }
+    if (buttons[other]?.attributes["aria-disabled"] === "true") {
+      problems.push(`zoom: [data-zoom="${other}"] is aria-disabled at ${zoom ?? "?"}%`);
+    }
+    if (buttons.actual?.attributes["aria-disabled"] === "true") {
+      problems.push("zoom: the readout is disabled at a limit");
+    }
+  }
+  await page.mouse.move(PARK.x, PARK.y);
+  return problems;
+}
+var ariaCase = {
+  name: "aria",
+  async run(page, harness) {
+    assertHooksConsistent("aria", harness, SHOWN_ISLANDS);
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const facts = await inPage(page, ariaProbe, { root });
+    if (!facts) fail("aria", harness.host, [`no element matches the shell root selector "${root}"`]);
+    const problems = ariaProblems(facts, harness.host);
+    problems.push(...menuGroupProblems(await menuEntries(page, root), harness.host, harness.themes));
+    problems.push(...await menuKeyboardProblems(page, root));
+    problems.push(...await paletteKeyboardProblems(page, root));
+    problems.push(...await paletteShortcutWalk(page, root));
+    problems.push(
+      ...await tabSequenceFromMenu(page, root, harness.host === "web" && Boolean(facts.primary?.visible))
+    );
+    problems.push(...await zoomLimitProblems(page, root));
+    const shown = /* @__PURE__ */ new Set();
+    for (const island of SHOWN_ISLANDS) {
+      const show = harness.show?.[island];
+      if (!show) continue;
+      await show(page);
+      shown.add(island);
+    }
+    let final = facts;
+    if (shown.size > 0) {
+      await settle(page);
+      const withIslands = await inPage(page, ariaProbe, { root });
+      if (withIslands) {
+        final = withIslands;
+        problems.push(...optionalIslandProblems(withIslands, shown));
+        if (shown.has("problems")) problems.push(...pillPopupAriaProblems(withIslands, harness.host));
+        const known = new Set(problems);
+        problems.push(
+          ...ariaProblems(withIslands, harness.host).filter((problem) => !known.has(problem)).map((problem) => `with every island shown: ${problem}`)
+        );
+      }
+    }
+    problems.push(...absentIslandProblems(visibleIslands(final), harness.absent));
+    return finish("aria", harness.host, problems, missingHooks(harness, "the roles and names"));
+  }
+};
+var keysCase = {
+  name: "keys",
+  async run(page, harness) {
+    const root = harness.root ?? DEFAULT_ROOT;
+    const host = harness.host;
+    const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const problems = [];
+    if (!await focusTarget(page, root, "canvas")) {
+      fail("keys", host, ["canvas: the diagram-js <svg> (.djs-container > svg) cannot take focus"]);
+    }
+    await inPage(page, clearKeysProbe, null);
+    let current = (await inPage(page, afterPressProbe, { root })).zoom;
+    if (current === null) fail("keys", host, ['zoom: no readout [data-zoom="actual"] showing a percentage']);
+    const press = async (key, reach, zoom, context = "on the canvas") => {
+      const before = current;
+      await page.keyboard.press(key);
+      let after = await inPage(page, afterPressProbe, { root });
+      const where = `${key} ${context}`;
+      if (reach) {
+        const problem = keyReachProblem(where, reach, host, after);
+        if (problem) problems.push(problem);
+      }
+      if (zoom === void 0) return;
+      const expected = zoom === "unchanged" ? before : zoom;
+      for (let poll = 0; after.zoom === before && expected !== before && poll < 10; poll++) {
+        await page.waitForTimeout(50);
+        after = await inPage(page, afterPressProbe, { root });
+      }
+      if (after.zoom !== expected) {
+        problems.push(
+          zoom === "unchanged" ? `${where} changed the zoom from ${before}% to ${after.zoom ?? "?"}%; it must not act` : `${where} zoomed to ${after.zoom ?? "?"}% from ${before}%, expected ${expected}% (exactly one step)`
+        );
+      }
+      current = after.zoom ?? current;
+    };
+    const inside = async (kind, context, steps) => {
+      if (await inPage(page, injectProbe, { root, kind })) await steps();
+      else problems.push(`cannot focus ${context} stand-in inside the root`);
+      await inPage(page, removeInjectedProbe, null);
+    };
+    await press("Control+Digit0", "handled", 100);
+    const pairs = [
+      ["Control+Equal", "Control+Minus"],
+      ["Control+Shift+Equal", "Control+Shift+Minus"],
+      ["Meta+Equal", "Meta+Minus"],
+      ["Meta+Shift+Equal", "Meta+Shift+Minus"],
+      ["Control+NumpadAdd", "Control+NumpadSubtract"],
+      ["Meta+NumpadAdd", "Meta+NumpadSubtract"]
+    ];
+    for (const [zoomIn, zoomOut] of pairs) {
+      await press(zoomIn, "handled", ONE_STEP_UP);
+      await press(zoomOut, "handled", 100);
+    }
+    for (const zoomToActual of ["Meta+Digit0", "Control+Numpad0"]) {
+      await press("Control+Equal", "handled", ONE_STEP_UP);
+      await press(zoomToActual, "handled", 100);
+    }
+    for (const key of ["Equal", "Minus", "Shift+Equal", "Shift+Minus", "NumpadAdd", "NumpadSubtract"]) {
+      await press(key, "free", "unchanged", "on the canvas without Cmd/Ctrl");
+    }
+    for (const key of ["Digit0", "Control+Alt+Equal", "Control+Alt+Minus", "Control+Shift+Digit1"]) {
+      await press(key, void 0, "unchanged");
+    }
+    await press("F1", "free", void 0);
+    await press("Escape", "free", void 0, "on the canvas without a menu or dialog");
+    if (await inPage(page, canvasHandlesProbe, { root, key: "F9" })) {
+      await press("F9", "canvas", void 0, "handled by the canvas");
+    }
+    await inPage(page, removeInjectedProbe, null);
+    if (host === "ide") {
+      for (const key of UNDO_REDO_PRESSES) {
+        await press(key, "free", void 0, "on the canvas (undo and redo belong to the VS Code document)");
+      }
+    }
+    for (const key of ["Control+KeyA", "Meta+KeyA"]) {
+      await press(key, "canvas", void 0, "on the canvas (select all acts on the canvas only)");
+    }
+    await press("Control+Equal", "handled", ONE_STEP_UP);
+    for (const [kind, field] of TEXT_FIELDS) {
+      await inside(kind, field, async () => {
+        await press("Control+Equal", "blocked", "unchanged", `in ${field}`);
+        await press("Control+Minus", "blocked", "unchanged", `in ${field}`);
+        await press("Shift+Digit1", "free", "unchanged", `in ${field}`);
+        await press("Control+KeyZ", "blocked", void 0, `in ${field}`);
+        await press("Meta+Shift+KeyZ", "blocked", void 0, `in ${field}`);
+        await press("Control+KeyY", "blocked", void 0, `in ${field}`);
+      });
+    }
+    await inside("modal", "a modal dialog", async () => {
+      await press("Control+Equal", "blocked", "unchanged", "with a modal dialog open");
+      await press("Shift+Digit1", "free", "unchanged", "with a modal dialog open");
+      await press("Escape", "blocked", void 0, "with a modal dialog open");
+    });
+    await inside("popover", "a popover", async () => {
+      await press("Control+Minus", "handled", 100, "in a popover");
+      await press("Control+Equal", "handled", ONE_STEP_UP, "in a popover");
+      await press("Escape", "blocked", void 0, "with a popover open");
+    });
+    if (await openMenuByClick(page, root)) {
+      await inPage(page, clearKeysProbe, null);
+      await press("Escape", "handled", void 0, "with the menu open");
+      if (await findOverlay(page, root, "menu")) problems.push("Escape with the menu open did not close it");
+    }
+    await focusTarget(page, root, "canvas");
+    await press("Control+Equal", "handled", TWO_STEPS_UP);
+    await page.keyboard.press("Shift+Digit1");
+    let fitted = await inPage(page, afterPressProbe, { root });
+    const reachProblem = keyReachProblem("Shift+Digit1 on the canvas", "handled", host, fitted);
+    if (reachProblem) problems.push(reachProblem);
+    for (let poll = 0; (fitted.zoom === null || fitted.zoom > 100) && poll < 20; poll++) {
+      await page.waitForTimeout(50);
+      fitted = await inPage(page, afterPressProbe, { root });
+    }
+    if (fitted.zoom === null || fitted.zoom > 100) {
+      problems.push(
+        `Shift+Digit1 on the canvas left the zoom at ${fitted.zoom ?? "?"}%, expected a fit (at most 100%)`
+      );
+    }
+    return finish("keys", host, problems, []);
+  }
+};
+async function appearanceFacts(page, root) {
+  const probe = () => inPage(page, appearanceProbe, { root, roles: MODE_ROLES });
+  await hover(page, root, "zoom-in");
+  const withTooltip = await probe();
+  const opened = await openMenuByClick(page, root);
+  const withMenu = await probe();
+  if (opened) await closeByEscape(page);
+  await page.mouse.move(PARK.x, PARK.y);
+  if (!withTooltip || !withMenu) return withTooltip ?? withMenu;
+  const names = new Set(withTooltip.parts.map((part) => part.name));
+  return {
+    ...withMenu,
+    parts: [...withTooltip.parts, ...withMenu.parts.filter((part) => !names.has(part.name))]
+  };
+}
+async function paletteColors(page, root) {
+  const read = async () => {
+    const facts = await inPage(page, paletteColorProbe, { root });
+    return facts ? paletteColorProblems(facts) : [];
+  };
+  return pollUntil(page, read, (problems) => problems.length === 0, COLOR_WAIT_MS);
+}
+async function paletteColorWalk(page, root) {
+  const problems = [];
+  await page.mouse.move(PARK.x, PARK.y);
+  problems.push(...await paletteColors(page, root));
+  const tools = (await inPage(page, paletteEntriesProbe, { root })).filter(
+    (entry) => isToolEntry(entry) && !entry.disabled
+  );
+  for (const tool of tools) {
+    await page.mouse.move(tool.client.x, tool.client.y);
+    problems.push(...await paletteColors(page, root));
+    await page.mouse.move(PARK.x, PARK.y);
+  }
+  const armed = tools.find((tool) => tool.action === "lasso-tool") ?? tools.find((tool) => tool.action.endsWith("-tool"));
+  if (armed) {
+    await page.mouse.click(armed.client.x, armed.client.y);
+    await settle(page);
+    const pressed = (await inPage(page, paletteEntriesProbe, { root })).find(
+      (entry) => entry.action === armed.action
+    );
+    if (!pressed?.pressed) {
+      problems.push(`palette: clicking tool "${armed.action}" does not set aria-pressed="true" (guide \xA75.5)`);
+    }
+    problems.push(...await paletteColors(page, root));
+    await page.mouse.move(PARK.x, PARK.y);
+    problems.push(...await paletteColors(page, root));
+    await closeByEscape(page);
+  }
+  return [...new Set(problems)];
+}
+function webMode(page) {
+  return inPage(page, webModeProbe, { key: APPEARANCE_STORAGE_KEY });
+}
+var APPEARANCE_LABELS = {
+  system: "System",
+  light: "Light",
+  dark: "Dark"
+};
+async function appearanceSwitchProblems(page, harness, root, requested) {
+  const problems = [];
+  const system = await webMode(page);
+  const media = (scheme) => system.themeColors.find((meta) => meta.media?.replace(/\s+/g, "") === `(prefers-color-scheme:${scheme})`)?.content;
+  const light = media("light");
+  const dark = media("dark");
+  const colors = light && dark ? { light, dark } : void 0;
+  for (const choice of ["dark", "light", "system"]) {
+    const label = APPEARANCE_LABELS[choice];
+    if (!await openMenuByClick(page, root)) {
+      problems.push(`menu: no visible menu trigger to choose ${label}`);
+      break;
+    }
+    const option = await inPage(page, targetProbe, {
+      root,
+      selector: `[data-menu-id="appearance"] [data-menu-value="${choice}"]`
+    });
+    if (!option) {
+      problems.push(`menu: no Appearance option "${choice}" to choose (guide \xA713.3)`);
+      await closeByEscape(page);
+      break;
+    }
+    await inPage(page, watchModeProbe, null);
+    await page.mouse.click(option.client.x, option.client.y);
+    await settle(page);
+    problems.push(...modeSwitchProblems(await inPage(page, modeChangesProbe, null), label));
+    problems.push(
+      ...appearanceChoiceProblems(await inPage(page, menuEntriesProbe, { root }) ?? [], choice)
+    );
+    await closeByEscape(page);
+    problems.push(...webModeProblems(await webMode(page), harness.themes, choice, colors));
+    const facts = await appearanceFacts(page, root);
+    if (facts) {
+      const expected = expectedWebMode(requested, harness.themes, choice);
+      problems.push(
+        ...appearanceProblems(facts, "web", requested, harness.themes, expected).problems.map(
+          (problem) => `[chose ${label}] ${problem}`
+        )
+      );
+    }
+  }
+  return problems;
+}
+var appearanceCase = {
+  name: "appearance",
+  async run(page, harness) {
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
+    const problems = [];
+    const skipped = [];
+    const web = harness.host === "web";
+    const emulated = !web || page.emulateMedia !== void 0;
+    if (!emulated) {
+      skipped.push({
+        hook: "open",
+        reason: "page.emulateMedia is undefined: the web app's mode under a dark system and under high contrast was not verified"
+      });
+    }
+    let switched = false;
+    for (const requested of emulated ? REQUESTED_APPEARANCES : [LIGHT]) {
+      const at = `[requested ${appearanceLabel(requested)}]`;
+      await openHarness(page, harness, { size, requested });
+      if (harness.host === "embedded") {
+        await inPage(page, hostPageModeProbe, {
+          theme: requested.theme,
+          kontrast: requested.kontrast ?? null
+        });
+      }
+      await settle(page);
+      const facts = await appearanceFacts(page, root);
+      if (!facts) {
+        problems.push(`${at} no element matches the shell root selector "${root}"`);
+        continue;
+      }
+      const expected = web ? expectedWebMode(requested, harness.themes, "system") : void 0;
+      const verdict = appearanceProblems(facts, harness.host, requested, harness.themes, expected);
+      problems.push(...verdict.problems.map((problem) => `${at} ${problem}`));
+      const surround = await inPage(page, surroundProbe, { root });
+      if (surround) problems.push(...surroundProblems(surround).map((problem) => `${at} ${problem}`));
+      problems.push(...(await paletteColorWalk(page, root)).map((problem) => `${at} ${problem}`));
+      if (web) {
+        problems.push(
+          ...webModeProblems(await webMode(page), harness.themes, "system", void 0).map(
+            (problem) => `${at} ${problem}`
+          ),
+          ...lightOnlyMenuProblems(await menuEntries(page, root), harness.themes).map(
+            (problem) => `${at} ${problem}`
+          )
+        );
+        if (harness.themes.includes("dark") && !switched && requested.theme === "dark") {
+          switched = true;
+          problems.push(
+            ...(await appearanceSwitchProblems(page, harness, root, requested)).map(
+              (problem) => `${at} ${problem}`
+            )
+          );
+        }
+      }
+    }
+    return finish("appearance", harness.host, problems, skipped);
+  }
+};
+async function focusPaletteEntry(page, root, action) {
+  const before = await inPage(page, paletteFocusProbe, { root });
+  if (!before || !before.entries.includes(action)) return false;
+  if (!await focusTarget(page, root, "palette-tab-stop")) return false;
+  await page.keyboard.press("Home");
+  for (let step = 0; step <= before.entries.length; step++) {
+    if ((await inPage(page, paletteFocusProbe, { root }))?.active === action) return true;
+    await page.keyboard.press("ArrowRight");
+  }
+  return false;
+}
+function firstCreatingEntry(entries) {
+  return entries.find((entry) => !isToolEntry(entry));
+}
+async function enterOnEntry(page, root, entry, before) {
+  if (!await focusPaletteEntry(page, root, entry)) return void 0;
+  await page.keyboard.press("Enter");
+  await settle(page);
+  const known = new Set(before.map((shape) => shape.id));
+  return pollUntil(
+    page,
+    () => shapes(page, root),
+    (after) => after.some((shape) => !known.has(shape.id)),
+    CREATE_WAIT_MS
+  );
+}
+var createCase = {
+  name: "create",
+  async run(page, harness) {
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const entry = firstCreatingEntry(await inPage(page, paletteEntriesProbe, { root }));
+    if (!entry) return void 0;
+    await page.mouse.move(PARK.x, PARK.y);
+    const free = freeRectangle(await measureChrome(page, root), harness.host);
+    const before = await shapes(page, root);
+    const after = await enterOnEntry(page, root, entry.action, before);
+    if (!after) {
+      fail("create", harness.host, [`create: the palette's roving focus does not reach "${entry.action}"`]);
+    }
+    const canvas = await inPage(page, canvasStateProbe, { root });
+    const problems = createProblems({ entry: entry.action, before, after, canvas, free });
+    await closeByEscape(page);
+    return finish("create", harness.host, problems, []);
+  }
+};
+async function reachableShape(page, root, id) {
+  const all = await shapes(page, root);
+  return id === void 0 ? all.find((shape) => shape.hit) : all.find((shape) => shape.id === id);
+}
+async function lockedShapeChecks(page, root, shape) {
+  await page.mouse.click(shape.client.x, shape.client.y);
+  await settle(page);
+  const selected = await inPage(page, canvasStateProbe, { root });
+  const before = await reachableShape(page, root, shape.id) ?? shape;
+  await page.mouse.move(before.client.x, before.client.y);
+  await page.mouse.down();
+  for (let step = 1; step <= 4; step++) {
+    await page.mouse.move(before.client.x + LOCKED_DRAG_PX * step / 4, before.client.y);
+  }
+  await page.mouse.up();
+  await settle(page);
+  const dragged = await reachableShape(page, root, shape.id);
+  const target = dragged ?? before;
+  await page.mouse.dblclick(target.client.x, target.client.y);
+  await settle(page);
+  const { textFields } = await inPage(page, canvasStateProbe, { root });
+  await closeByEscape(page);
+  const kept = { Delete: true, Backspace: true };
+  for (const key of ["Delete", "Backspace"]) {
+    const current = await reachableShape(page, root, shape.id);
+    if (!current) break;
+    if (!current.selected) await page.mouse.click(current.client.x, current.client.y);
+    await focusTarget(page, root, "canvas");
+    await page.keyboard.press(key);
+    await settle(page);
+    kept[key] = await reachableShape(page, root, shape.id) !== void 0;
+  }
+  await page.mouse.move(PARK.x, PARK.y);
+  return lockedShapeProblems({
+    contextPadEntries: selected.contextPadEntries,
+    dragged: { before, after: dragged },
+    textFields,
+    kept
+  });
+}
+var readOnlyCase = {
+  name: "readOnly",
+  async run(page, harness) {
+    assertHooksConsistent("readOnly", harness, ["invalid"]);
+    const invalid = harness.show?.invalid;
+    if (!invalid) {
+      if (harness.absent?.includes("invalid")) return void 0;
+      return {
+        skipped: [
+          {
+            hook: "invalid",
+            reason: "show.invalid is undefined: the read-only canvas of an invalid file was not verified"
+          }
+        ]
+      };
+    }
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
+    const problems = [];
+    const skipped = [];
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const menuBefore = await menuEntries(page, root);
+    await invalid(page);
+    await page.waitForTimeout(INVALID_STATUS_DELAY_MS);
+    const state = await pollUntil(
+      page,
+      () => inPage(page, readOnlyStateProbe, { root }),
+      (facts) => facts === null || readOnlyStateProblems(facts).length === 0,
+      READ_ONLY_WAIT_MS
+    );
+    if (!state) fail("readOnly", harness.host, [`no element matches the shell root selector "${root}"`]);
+    await settle(page);
+    problems.push(...readOnlyStateProblems(state));
+    const entries = await inPage(page, paletteEntriesProbe, { root });
+    problems.push(...readOnlyPaletteProblems(entries));
+    problems.push(...await paletteColors(page, root));
+    const creating = firstCreatingEntry(entries);
+    if (creating) {
+      const before = await shapes(page, root);
+      const after = await enterOnEntry(page, root, creating.action, before);
+      const known = new Set(before.map((shape2) => shape2.id));
+      const added = (after ?? []).filter((shape2) => !known.has(shape2.id));
+      if (added.length > 0) {
+        problems.push(
+          `read-only: Enter on palette entry "${creating.action}" added ${added.map((shape2) => `"${shape2.id}"`).join(", ")} (guide \xA713.5)`
+        );
+      }
+      await closeByEscape(page);
+    }
+    problems.push(...readOnlyMenuProblems(menuBefore, await menuEntries(page, root)));
+    const shape = await reachableShape(page, root);
+    if (shape) {
+      problems.push(...await lockedShapeChecks(page, root, shape));
+    } else {
+      skipped.push({
+        hook: "open",
+        reason: "the opened document shows no shape a pointer reaches: context pad, move, delete and label editor of the read-only canvas not verified"
+      });
+    }
+    return finish("readOnly", harness.host, problems, skipped);
+  }
+};
+var cleanupCase = {
+  name: "cleanup",
+  async run(page, harness) {
+    if (!harness.destroy) {
+      return {
+        skipped: [
+          {
+            hook: "destroy",
+            reason: "harness.destroy is undefined: the cleanup after destroy was not verified"
+          }
+        ]
+      };
+    }
+    const root = harness.root ?? DEFAULT_ROOT;
+    const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
+    await openHarness(page, harness, { size, requested: LIGHT });
+    await settle(page);
+    const armed = await inPage(page, armCleanupProbe, { root });
+    if (!armed) fail("cleanup", harness.host, [`no element matches the shell root selector "${root}"`]);
+    const problems = [];
+    const zoomIn = await findTarget(page, root, "zoom-in");
+    if (zoomIn) {
+      await page.mouse.move(PARK.x, PARK.y);
+      await page.mouse.move(zoomIn.client.x, zoomIn.client.y);
+    }
+    try {
+      await harness.destroy(page);
+    } catch (error) {
+      problems.push(`destroy threw: ${error instanceof Error ? error.message : String(error)}`);
+    }
+    await page.waitForTimeout(Math.max(INVALID_STATUS_DELAY_MS, TOOLTIP_DELAY_MS) + HOVER_MARGIN_MS);
+    await page.mouse.move(PARK.x, PARK.y);
+    await page.setViewportSize({ width: size.width - 40, height: size.height - 40 });
+    await settle(page);
+    await inPage(page, injectProbe, { root, kind: "focus-target" });
+    await inPage(page, clearKeysProbe, null);
+    for (const key of ["Control+Equal", "Control+Minus", "Control+Digit0", "Shift+Digit1"]) {
+      await page.keyboard.press(key);
+      const { keys } = await inPage(page, afterPressProbe, { root });
+      const problem = afterDestroyKeyProblem(key, keys);
+      if (problem) problems.push(problem);
+    }
+    await inPage(page, removeInjectedProbe, null);
+    problems.push(...leftoverProblems(await inPage(page, leftoverProbe, null), harness.host));
+    return finish("cleanup", harness.host, problems, []);
+  }
+};
+function createBaseCases() {
+  return [geometryCase, ariaCase, keysCase, createCase, readOnlyCase, appearanceCase, cleanupCase];
+}
+function createCases() {
+  return [...createBaseCases(), ...createWebCases()];
+}
+
+// src/testing/harness.ts
+function shellConformanceCases() {
+  return createCases();
+}
+function vsCodeStubSearch(requested, extra = {}) {
+  const query = new URLSearchParams({ theme: requested.theme });
+  if (requested.kontrast) query.set("kontrast", requested.kontrast);
+  if (extra.colorTheme) query.set("colorTheme", extra.colorTheme);
+  if (extra.reduceMotion) query.set("reduceMotion", "");
+  return query.toString();
+}
+function registerShellConformance(harness, test, options = {}) {
+  const onSkip = options.onSkip ?? ((caseName, skips) => {
+    console.warn(
+      `@miragon/modeler-shell conformance: SKIPPED "${caseName}" (${harness.host} host): ${skips.map((skip) => skip.reason).join("; ")}`
+    );
+  });
+  for (const conformanceCase of shellConformanceCases()) {
+    test(`shell conformance: ${conformanceCase.name}`, async ({ page }) => {
+      const outcome = await conformanceCase.run(page, harness);
+      if (outcome?.skipped && outcome.skipped.length > 0) onSkip(conformanceCase.name, outcome.skipped);
+    });
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GEOMETRY_TOLERANCE_PX,
+  expectedChromeBoxes,
+  measureChrome,
+  registerShellConformance,
+  shellConformanceCases,
+  vsCodeStubSearch
+});
+//# sourceMappingURL=testing.cjs.map