@miragon/modeler-shell 0.1.0 → 0.2.1

package/dist/testing.js

@@ -1,10 +1,20 @@
 import {
+  APPEARANCE_STORAGE_KEY,
   CHROME_ISLANDS,
   INVALID_STATUS_DELAY_MS,
+  LEGAL_LINE_HEIGHT,
+  MAX_TOASTS,
   PALETTE_CLEARANCE,
   SHELL,
-  TOOLTIP_DELAY_MS
-} from "./chunk-5JSZ4VGA.js";
+  TOAST_DURATION_MS,
+  TOOLTIP_DELAY_MS,
+  decideTopRow,
+  defaultMessages,
+  legalLineHeight,
+  toastStackBottom,
+  toastStackWidth,
+  zoomRowRaised
+} from "./chunk-OADW3GPA.js";
 
 // src/testing/page-tools.ts
 var installPageTools = (_) => {
@@ -47,6 +57,7 @@ var installPageTools = (_) => {
     errors: [],
     injected: [],
     cleanups: [],
+    clicks: 0,
     frame,
     async settle() {
       await frame();
@@ -135,7 +146,9 @@ var CHROME_TARGET_SELECTORS = {
   "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"
+  canvas: ".djs-container > svg",
+  primary: '[data-chrome="primary"]',
+  pill: '[data-chrome="problems"]'
 };
 var targetProbe = ({ root, selector }) => {
   const tools = window.__modelerShellConformance;
@@ -267,7 +280,10 @@ var hostPageModeProbe = ({ theme, kontrast }) => {
 var GEOMETRY_TOLERANCE_PX = 1;
 var DEFAULT_ROOT = ".cd-shell";
 var ZOOM_PANEL_WIDTH = 173;
-var LEGAL_LINE = 20;
+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;
@@ -288,14 +304,19 @@ var measureProbe = ({ root, islands }) => {
     }
     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"
+      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
   };
@@ -311,7 +332,8 @@ async function measureChrome(page, root = DEFAULT_ROOT) {
     container: result.container,
     paletteRow: result.paletteRow,
     islands: result.islands,
-    open: result.open
+    open: result.open,
+    ...result.toastCardWidth !== void 0 ? { toastCardWidth: result.toastCardWidth } : {}
   };
 }
 function isNarrow(container) {
@@ -323,34 +345,66 @@ function isVeryNarrow(container) {
 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 = ["menu", "palette"];
+  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;
-  limits.palette = secondRow ? { maxWidth: container.width - 2 * edge } : menu ? { minLeft: menu.left + menu.width + PALETTE_CLEARANCE } : {};
+  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 {
-    required.push("zoom");
-    boxes.zoom = { right: edge, bottom: edge, width: ZOOM_PANEL_WIDTH, height: row };
-    const stackBase = web ? edge + LEGAL_LINE + gap : edge;
+    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 bottom = isVeryNarrow(container) ? Math.max(besidePill, edge + row + gap) : besidePill;
+      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 };
     }
@@ -373,9 +427,52 @@ function chromeExpectations(measurement, host) {
     };
   }
   if (web) {
-    if (islands.primary) boxes.primary = { top: edge, right: edge, height: row };
+    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 {
-    hidden.primary = "the top right stays empty in IDE and embedded hosts (guide \xA75.7)";
+    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 };
 }
@@ -391,7 +488,8 @@ function sides(box, container) {
     bottom: container.height - box.top - box.height,
     width: box.width,
     height: box.height,
-    centerX: box.left + box.width / 2
+    centerX: box.left + box.width / 2,
+    centerY: box.top + box.height / 2
   };
 }
 function boxMismatches(name2, box, expected, container, tolerance = GEOMETRY_TOLERANCE_PX) {
@@ -452,12 +550,17 @@ function geometryProblems(measurement, host, tolerance = GEOMETRY_TOLERANCE_PX)
   }
   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;
-    if (!clipped && topRowLeft >= menu.left + menu.width + PALETTE_CLEARANCE + tolerance) {
+    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 ${round(topRowLeft - menu.left - menu.width)}px to the menu trigger (at least ${PALETTE_CLEARANCE}px suffice, guide \xA75.15)`
+        `palette: in the second row although the top row keeps ${kept} (at least ${PALETTE_CLEARANCE}px suffice, guide \xA75.15)`
       );
     }
   }
@@ -468,9 +571,43 @@ function geometryProblems(measurement, host, tolerance = GEOMETRY_TOLERANCE_PX)
     }
     if (!flag && shown) problems.push(`${island}: visible, but the root lacks ${attribute2}`);
   };
-  state("problems", open.problems, 'data-problems="shown"', sheet);
-  state("legend", open.legend, 'data-legend="open"', sheet);
-  state("inspector", open.inspector, 'data-inspector="open"', false);
+  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) {
@@ -478,7 +615,7 @@ function expectedFitInsets(measurement, host) {
   const insets = {
     top: paletteRow === "second-row" ? SHELL.fitInsetTopSecondRow : SHELL.fitInsetTop,
     right: SHELL.fitInsetSide,
-    bottom: host === "web" && open.problems ? SHELL.fitInsetBottomWeb : SHELL.fitInsetBottom,
+    bottom: host === "web" && (open.problems || open.zoomRaised) ? SHELL.fitInsetBottomWeb + legalLineHeight(islands.legal?.height) - LEGAL_LINE : SHELL.fitInsetBottom,
     left: SHELL.fitInsetSide
   };
   if (sheetOpen(measurement)) {
@@ -522,10 +659,10 @@ function dropdownProblems(box, container, tolerance = GEOMETRY_TOLERANCE_PX) {
     )
   ];
 }
-function tooltipProblems(tooltip, anchor, row, container, tolerance = GEOMETRY_TOLERANCE_PX) {
+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: edge + rowHeight + gap } : { left, top: (row === "top" ? edge : free) + rowHeight + gap };
+  const expectedAt = (left) => row === "bottom" ? { left, bottom: bottomRow + rowHeight + gap } : { left, top: (row === "top" ? edge : free) + rowHeight + gap };
   let mismatches = boxMismatches(
     "tooltip",
     tooltip,
@@ -563,10 +700,13 @@ var DOM_ORDER = [
   "canvas",
   "status",
   "hint",
+  "empty-state",
   "inspector",
   "problems",
   "legend",
-  "zoom"
+  "legal",
+  "zoom",
+  "toasts"
 ];
 var ariaProbe = ({ root }) => {
   const tools = window.__modelerShellConformance;
@@ -587,6 +727,8 @@ var ariaProbe = ({ root }) => {
   }
   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"]')],
@@ -596,13 +738,17 @@ var ariaProbe = ({ root }) => {
     ["hint", find(".cd-shell-hint")],
     ["inspector", find('[data-chrome="inspector"]')],
     ["problems", find('[data-chrome="problems"]')],
+    ["empty-state", find('[data-chrome="empty-state"]')],
     ["legend", legend],
-    ["zoom", zoom]
+    ["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]'
@@ -630,7 +776,18 @@ var ariaProbe = ({ root }) => {
     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"]'))
+    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 }) => {
@@ -899,617 +1056,2583 @@ var menuEntriesProbe = ({ root }) => {
       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
+      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/checks.ts
+// src/testing/web-checks.ts
+var round2 = (value) => Math.round(value * 10) / 10;
 var normalize = (text) => text.replace(/\s+/g, " ").trim();
-var name = (element) => normalize(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"
-  };
+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 ariaProblems(facts, host) {
+function primaryAriaProblems(facts, host) {
+  const primary = facts.primary;
+  if (!primary || host !== "web") return [];
   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)");
+  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)`
+    );
   }
-  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 (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)`
+      );
     }
-    if (attribute(trigger, "aria-expanded") !== "false") {
+  }
+  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(
-        `menu: aria-expanded is "${attribute(trigger, "aria-expanded") ?? ""}" while closed, expected "false"`
+        `problems: aria-controls names a ${facts.problemsControlled.description} with role "${role ?? ""}", expected "dialog"`
       );
     }
-    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") {
+    if (facts.problemsControlled.attributes["aria-modal"] === "true") {
       problems.push(
-        `menu: aria-controls names a ${facts.controlled.description} with role "${attribute(facts.controlled, "role") ?? ""}", expected "menu"`
+        'problems: the problems list is aria-modal="true"; it is a non-modal popover (guide \xA75.10)'
       );
     }
   }
-  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`);
-      }
+  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;
     }
-    const stops = facts.entries.filter((entry) => attribute(entry, "tabindex") === "0");
-    if (facts.entries.length > 0 && stops.length !== 1) {
+    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(
-        `palette: ${stops.length} entries with tabindex="0", expected exactly one (roving tabindex)`
+        `menu: File entry "${entry.name}" carries an icon; the guide gives ${entry.menuId} none (guide \xA75.14)`
       );
     }
-    const tools = facts.entries.filter(
-      (entry) => entry.group === "tools" && (attribute(entry, "data-action") ?? "").endsWith("-tool")
+  }
+  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)`
     );
-    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`);
+  }
+  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));
     }
-    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]) {
+  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(
-          `zoom: [data-zoom="${button}"] aria-keyshortcuts is "${attribute(control, "aria-keyshortcuts") ?? ""}", expected "${shortcuts[button]}" (${facts.platform})`
+          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 (control.disabled) {
+      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(
-          `zoom: [data-zoom="${button}"] is natively disabled; aria-disabled keeps the focus (guide \xA75.8)`
+          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)`
         );
       }
     }
-    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 = normalize(attribute(readout, "aria-label") ?? "");
-      if (!label.includes(readout.text)) {
+    if (primary.collapsed) {
+      if (Math.abs(primary.box.width - SHELL.row) > GEOMETRY_TOLERANCE_PX + 1e-6) {
         problems.push(
-          `zoom: the readout's aria-label "${label}" does not name the current zoom "${readout.text}"`
+          `${at} primary: ${round2(primary.box.width)}px wide while collapsed, expected ${SHELL.row}px`
         );
       }
-      if (attribute(readout, "aria-disabled") === "true")
-        problems.push("zoom: the readout is never disabled");
+      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)`
+      );
     }
   }
-  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)`
-    );
+  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 (!present.has("canvas")) problems.push("canvas: no diagram-js <svg> (.djs-container > svg) in the root");
-  const canvas = facts.canvas;
-  if (canvas && !normalize(attribute(canvas, "aria-label") ?? "") && !attribute(canvas, "aria-labelledby")) {
+  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(
-      'canvas: the focusable <svg> has no accessible name (WCAG 4.1.2); shellModule names it role="application" with messages.canvas'
+      `primary: Enter on the focused primary action clicked it ${clicks.enter} times, expected once (keyboard activation)`
     );
   }
-  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)`);
-  }
   return problems;
 }
-function optionalIslandProblems(facts, shown) {
+function legalContentProblems(links) {
   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 = normalize(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}"`);
-      }
-    }
+  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}`);
   }
-  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}"`
-        );
-      }
+  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}`);
   }
-  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");
-      }
+  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)`
+      );
     }
   }
-  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 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 tabSequenceProblems(stops) {
-  const [first, second, third] = stops;
-  const sequence = first?.kind === "primary" ? [second, third] : [first, second];
-  const [palette, canvas] = sequence;
+function emptyStateTabProblems(owners) {
   const problems = [];
-  if (palette?.kind !== "palette") {
+  for (const stop of owners) {
+    if (["empty-state", "legal", "toasts", "body", "outside"].includes(stop.owner)) continue;
     problems.push(
-      `tab order: Tab from the menu trigger lands on ${palette?.description ?? "nothing"}, expected the palette's roving entry (guide \xA75.14)`
+      `empty-state: Tab reaches ${stop.description} (${stop.owner}) behind the start screen; only the card and the legal links take the focus (guide \xA78)`
     );
-  } else if (canvas?.kind !== "canvas") {
+  }
+  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(
-      `tab order: Tab from the palette lands on ${canvas?.description ?? "nothing"}, expected the canvas <svg> (an unexpected tab stop, guide \xA75.14)`
+      `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 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 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 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 toastLiveRegion(regions, status) {
+  const role = status === "danger" ? "alert" : "status";
+  return regions.find((region) => region.role === role);
 }
-function menuOpenProblems(facts, focus) {
+function toastAnatomyProblems(toast, status, lang, announcement) {
   const problems = [];
-  if (facts.expanded !== "true") {
-    problems.push(`menu: aria-expanded is "${facts.expanded ?? ""}" while open, expected "true"`);
+  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)`
+    );
   }
-  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) {
+  if (toast.role === "status" || toast.role === "alert") {
     problems.push(
-      `menu: the visible dropdown is #${attribute(menu, "id") ?? ""}, the trigger controls #${facts.controls}`
+      `toasts: the ${status} toast's card carries role="${toast.role}"; the live region announces it, so a live card is read twice`
     );
   }
-  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"`);
+  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 (item.haspopup === "dialog" && !item.name.endsWith("\u2026")) {
-      problems.push(`menu: "${label}" opens a dialog, so its label ends with "\u2026" (U+2026)`);
+    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 [];
   });
-  if (focus && facts.items.length > 0) {
-    const expected = focus === "first" ? 0 : facts.items.length - 1;
-    if (facts.active !== expected) {
+}
+function popoverKeyboardProblems(steps, rowCount) {
+  const problems = [];
+  for (const step of steps) {
+    if (step.focused?.index !== step.expected) {
       problems.push(
-        `menu: focus is on ${facts.active < 0 ? "no entry" : `entry ${facts.active + 1}`}, expected the ${focus} entry`
+        `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 menuClosedProblems(facts, focusOnTrigger) {
+function openPopoverProblems(facts, container, lang) {
   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;
+  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 (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 (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 (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 (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 (!prevented && shouldPrevent) {
-    return `${press} arrived unprevented; a handled key calls preventDefault (the browser would zoom the page)`;
+  if (facts.rows.length === 0) {
+    problems.push("problems-popover: the list has no rows; show.problems passes items in the web host");
   }
-  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) {
-  const ownDocument = host !== "embedded";
-  const expected = ownDocument ? expectedAppearance(requested, themes) : expectedEmbeddedAppearance(facts, themes);
-  const problems = [];
-  const label = ownDocument ? `requested ${describeAppearance(requested)}, expected ${describeAppearance(expected)}` : `host page ${describeAppearance(requested)}, expected ${describeAppearance(expected)}`;
-  const carrier = ownDocument ? facts.themed.find((element) => element.isDocument && element.theme !== null) : facts.themed.find((element) => element.relation === "self" && element.theme !== null);
-  if (!carrier) {
+  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(
-      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)`
+      `problems-popover: opening it leaves the focus on ${facts.focused}; it moves to the first row (API.md, Problems popover)`
     );
-  } else {
-    if (carrier.theme !== expected.theme) {
-      problems.push(`${carrier.description} has data-cd-theme="${carrier.theme}" (${label})`);
-    }
-    if ((carrier.kontrast ?? void 0) !== expected.kontrast) {
+  }
+  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(
-        `${carrier.description} has ${carrier.kontrast ? `data-cd-kontrast="${carrier.kontrast}"` : "no data-cd-kontrast"} (${label})`
+        `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`);
+    }
   }
-  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;
+  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(
-      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)`
+      `problems: aria-expanded is "${facts.pill.attributes["aria-expanded"] ?? ""}" after ${how}, expected "false"`
     );
   }
-  if (ownDocument && !facts.documentClasses.includes("cd-shell-document")) {
+  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(
-      "<html> lacks cd-shell-document in an own document (the reset of the webview's host styles)"
+      "problems-popover: an outside click moved the focus to the pill; it closes without moving the focus"
     );
   }
-  if (!ownDocument && facts.documentClasses.includes("cd-shell-document")) {
+  if (how === "a row with an element" && facts.focus !== "canvas") {
     problems.push(
-      "<html> of a foreign page carries cd-shell-document: the own-document reset restyles the host page"
+      `problems-popover: a row with an element leaves the focus on ${facts.focused}, expected the canvas`
     );
   }
-  const reference = facts.parts[0];
-  if (reference && !reference.roles["--cd-ui-text"]) {
+  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(
-      "--cd-ui-text is empty at the shell root: the vendored cd-tokens.generated.css is not loaded"
+      `drop-zone: ${context} sets data-drop="${facts.state ?? ""}", expected "${expected}" (guide \xA79)`
     );
   }
-  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)`
-          );
-        }
-      }
-    }
+  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`);
   }
-  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`);
-    }
+  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}"`);
   }
-  return { problems };
-}
-var SHELL_ROOT_ATTRIBUTES = [
-  "data-cd-shell-host",
-  "data-palette",
-  "data-legend",
-  "data-inspector",
-  "data-problems",
-  "data-readonly"
-];
-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`);
+  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)`
+    );
   }
-  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`);
+  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)`
+    );
   }
-  for (const error of facts.errors) {
-    if (!BENIGN_ERRORS.test(error)) problems.push(`the page reported an error after destroy: ${error}`);
+  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 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) => harness.absent?.includes(hook) && harness.show?.[hook]).map((hook) => `harness: absent lists "${hook}", but show.${hook} is given`);
+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 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)"
-    ];
+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;
   }
-  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)`
-  ];
+  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 isToolEntry(entry) {
-  return entry.group === "tools" || entry.action.endsWith("-tool");
+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;
 }
-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";
+
+// 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 paletteColorProblems(facts) {
+function ariaProblems(facts, host) {
   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) {
+  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(
-        `palette: tool "${entry.action}" ${state} has color ${entry.color}, expected ${role} (${value}) (guide \xA75.5)`
+        `menu: aria-expanded is "${attribute(trigger, "aria-expanded") ?? ""}" while closed, expected "false"`
       );
     }
-    if (entry.icon && entry.icon.color !== value) {
-      const icon = entry.icon.kind === "svg" ? "<svg> icon" : "::before icon";
+    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(
-        `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)`
+        `menu: aria-controls names a ${facts.controlled.description} with role "${attribute(facts.controlled, "role") ?? ""}", expected "menu"`
       );
     }
   }
-  return problems;
-}
-var round2 = (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 (!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`);
   }
-  if (added.length > 1) {
-    return [
-      `create: ${pressed} added ${added.length} elements (${added.map((shape2) => shape2.id).join(", ")}), expected exactly one`
-    ];
+  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 [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) {
+  const present = new Set(facts.order);
+  const expectedOrder = DOM_ORDER.filter((part) => present.has(part));
+  if (facts.order.join() !== expectedOrder.join()) {
     problems.push(
-      `create: after ${pressed} the focus is on ${facts.canvas.focused}, expected the canvas (its <svg> or the label editor, guide \xA75.5)`
+      `DOM order is ${facts.order.join(", ")}; expected ${expectedOrder.join(", ")} (guide \xA75.14)`
     );
   }
-  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) {
+  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(
-      `create: the new element "${shape.id}" is centred at (${round2(centre.x)}, ${round2(centre.y)})px, outside the free rectangle ${round2(free.left)}\u2013${round2(free.right)} \xD7 ${round2(free.top)}\u2013${round2(free.bottom)}px (guide \xA75.5, \xA75.9)`
+      '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;
 }
-function readOnlyStateProblems(facts) {
+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 = [];
-  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") {
+  if ((await toasts(page, root))?.stack?.popover !== "manual") {
     problems.push(
-      `read-only: the status box of an invalid file has role "${status.attributes.role ?? ""}", expected "alert" (guide \xA713.5)`
+      `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 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)`];
+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, []);
     }
-    return [];
-  });
+    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 });
 }
-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)`
+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);
   }
-  return problems;
+};
+function drag(page, spec) {
+  return inPage(page, dragProbe, spec);
 }
-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}", ${round2(before.size.width)} \xD7 ${round2(before.size.height)} \u2192 ${round2(after.size.width)} \xD7 ${round2(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)`
+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, []);
   }
-  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;
+};
+function createWebCases() {
+  return [webChromeCase, emptyStateCase, toastsCase, problemsListCase, dropZoneCase];
 }
 
 // src/testing/cases.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 LOCKED_DRAG_PX = 40;
 var CREATE_WAIT_MS = 1e3;
 var READ_ONLY_WAIT_MS = 1e3;
 var COLOR_WAIT_MS = 600;
-var POLL_MS = 50;
 var REQUESTED_APPEARANCES = [
   { theme: "dark" },
   { theme: "dark", kontrast: "hoch" },
   { theme: "light", kontrast: "hoch" }
 ];
-var HOVER_MARGIN_MS = 200;
-var PARK = { x: 1, y: 1 };
 var TEXT_FIELDS = [
   ["input", "a text field"],
   ["textarea", "a textarea"],
@@ -1526,71 +3649,20 @@ var ONE_STEP_UP = 135;
 var TWO_STEPS_UP = 182;
 var ZOOM_LIMIT_MAX = 400;
 var ZOOM_LIMIT_MIN = 20;
-function sizeLabel(size) {
-  return `${size.width} \xD7 ${size.height}`;
-}
 function appearanceLabel(appearance) {
   return appearance.kontrast ? `${appearance.theme} + ${appearance.kontrast}` : appearance.theme;
 }
-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);
-}
 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`
   }));
 }
-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;
-}
 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 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 popupGeometry(page, root, measurement) {
   const problems = [];
   if (!await openMenuByClick(page, root)) return ["dropdown: no visible menu trigger to open it"];
@@ -1618,8 +3690,10 @@ async function popupGeometry(page, root, measurement) {
     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).map(
+      ...tooltipProblems(tooltip.box, anchor.box, row, measurement.container, void 0, bottomRow).map(
         (problem) => `${problem} (on ${target})`
       )
     );
@@ -1627,15 +3701,28 @@ async function popupGeometry(page, root, measurement) {
   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);
+    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 harness.open(page, { size, requested: LIGHT });
+      await openHarness(page, harness, { size, requested: LIGHT });
       await settle(page);
       const check = async (state) => {
         const measurement = await measureChrome(page, root);
@@ -1649,15 +3736,36 @@ var geometryCase = {
       };
       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"));
+    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) {
@@ -1760,7 +3868,7 @@ async function paletteShortcutWalk(page, root) {
   }
   return paletteShortcutProblems(seen);
 }
-async function tabSequenceFromMenu(page, root) {
+async function tabSequenceFromMenu(page, root, primary) {
   if (!await focusTarget(page, root, "menu")) return [];
   const stops = [];
   for (let step = 0; step < 3; step++) {
@@ -1768,7 +3876,7 @@ async function tabSequenceFromMenu(page, root) {
     const stop = await inPage(page, activeStopProbe, { root });
     stops.push({ description: stop.description, kind: stop.kind });
   }
-  return tabSequenceProblems(stops);
+  return tabSequenceProblems(stops, primary);
 }
 async function zoomLimitProblems(page, root) {
   const problems = [];
@@ -1813,15 +3921,18 @@ var ariaCase = {
     assertHooksConsistent("aria", harness, SHOWN_ISLANDS);
     const root = harness.root ?? DEFAULT_ROOT;
     const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
-    await harness.open(page, { size, requested: LIGHT });
+    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));
+    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) {
@@ -1837,6 +3948,7 @@ var ariaCase = {
       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}`)
@@ -1853,7 +3965,7 @@ var keysCase = {
     const root = harness.root ?? DEFAULT_ROOT;
     const host = harness.host;
     const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
-    await harness.open(page, { size, requested: LIGHT });
+    await openHarness(page, harness, { size, requested: LIGHT });
     await settle(page);
     const problems = [];
     if (!await focusTarget(page, root, "canvas")) {
@@ -2021,15 +4133,76 @@ async function paletteColorWalk(page, root) {
   }
   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 = [];
-    for (const requested of REQUESTED_APPEARANCES) {
+    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 harness.open(page, { size, requested });
+      await openHarness(page, harness, { size, requested });
       if (harness.host === "embedded") {
         await inPage(page, hostPageModeProbe, {
           theme: requested.theme,
@@ -2042,18 +4215,34 @@ var appearanceCase = {
         problems.push(`${at} no element matches the shell root selector "${root}"`);
         continue;
       }
-      const verdict = appearanceProblems(facts, harness.host, requested, harness.themes);
+      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, []);
+    return finish("appearance", harness.host, problems, skipped);
   }
 };
-function shapes(page, root) {
-  return inPage(page, shapesProbe, { root });
-}
 async function focusPaletteEntry(page, root, action) {
   const before = await inPage(page, paletteFocusProbe, { root });
   if (!before || !before.entries.includes(action)) return false;
@@ -2085,7 +4274,7 @@ var createCase = {
   async run(page, harness) {
     const root = harness.root ?? DEFAULT_ROOT;
     const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
-    await harness.open(page, { size, requested: LIGHT });
+    await openHarness(page, harness, { size, requested: LIGHT });
     await settle(page);
     const entry = firstCreatingEntry(await inPage(page, paletteEntriesProbe, { root }));
     if (!entry) return void 0;
@@ -2102,12 +4291,6 @@ var createCase = {
     return finish("create", harness.host, problems, []);
   }
 };
-async function menuEntries(page, root) {
-  if (!await openMenuByClick(page, root)) return [];
-  const entries = await inPage(page, menuEntriesProbe, { root }) ?? [];
-  await closeByEscape(page);
-  return entries;
-}
 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);
@@ -2168,7 +4351,7 @@ var readOnlyCase = {
     const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
     const problems = [];
     const skipped = [];
-    await harness.open(page, { size, requested: LIGHT });
+    await openHarness(page, harness, { size, requested: LIGHT });
     await settle(page);
     const menuBefore = await menuEntries(page, root);
     await invalid(page);
@@ -2226,7 +4409,7 @@ var cleanupCase = {
     }
     const root = harness.root ?? DEFAULT_ROOT;
     const size = (harness.sizes ?? DEFAULT_SIZES)[0] ?? DEFAULT_SIZES[0];
-    await harness.open(page, { size, requested: LIGHT });
+    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}"`]);
@@ -2258,9 +4441,12 @@ var cleanupCase = {
     return finish("cleanup", harness.host, problems, []);
   }
 };
-function createCases() {
+function createBaseCases() {
   return [geometryCase, ariaCase, keysCase, createCase, readOnlyCase, appearanceCase, cleanupCase];
 }
+function createCases() {
+  return [...createBaseCases(), ...createWebCases()];
+}
 
 // src/testing/harness.ts
 function shellConformanceCases() {