@miragon/modeler-shell 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -20,21 +20,27 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  APPEARANCE_STORAGE_KEY: () => APPEARANCE_STORAGE_KEY,
   CHROME_ISLANDS: () => CHROME_ISLANDS,
   FIT_ANIMATION_MS: () => FIT_ANIMATION_MS,
   ICONS: () => ICONS,
   INVALID_STATUS_DELAY_MS: () => INVALID_STATUS_DELAY_MS,
+  LEGAL_LINE_HEIGHT: () => LEGAL_LINE_HEIGHT,
   MAX_FIT_ZOOM: () => MAX_FIT_ZOOM,
+  MAX_TOASTS: () => MAX_TOASTS,
   PALETTE_CLEARANCE: () => PALETTE_CLEARANCE,
   PALETTE_TOOL_ICON: () => PALETTE_TOOL_ICON,
   REDUCED_MOTION_CLASS: () => REDUCED_MOTION_CLASS,
   SHELL: () => SHELL,
   SHELL_TOKENS: () => SHELL_TOKENS,
   TEXT_FIELD_SELECTOR: () => TEXT_FIELD_SELECTOR,
+  TOAST_DURATION_MS: () => TOAST_DURATION_MS,
+  TOAST_MAX_WIDTH: () => TOAST_MAX_WIDTH,
   TOOLTIP_DELAY_MS: () => TOOLTIP_DELAY_MS,
   VIEW_TOLERANCE: () => VIEW_TOLERANCE,
   ZOOM_MAX: () => ZOOM_MAX,
   ZOOM_MIN: () => ZOOM_MIN,
+  acceptsFile: () => acceptsFile,
   appearanceAttributes: () => appearanceAttributes,
   appearanceFromBodyClasses: () => appearanceFromBodyClasses,
   appearanceFromColorThemeKind: () => appearanceFromColorThemeKind,
@@ -42,10 +48,14 @@ __export(src_exports, {
   ariaKeyShortcutsFromLabel: () => ariaKeyShortcutsFromLabel,
   canZoomIn: () => canZoomIn,
   canZoomOut: () => canZoomOut,
+  commandKeyLabel: () => commandKeyLabel,
   decideKey: () => decideKey,
   decidePaletteRow: () => decidePaletteRow,
+  decideTopRow: () => decideTopRow,
   defaultMessages: () => defaultMessages,
   detectPlatform: () => detectPlatform,
+  documentMode: () => documentMode,
+  dragVerdict: () => dragVerdict,
   easeStandard: () => easeStandard,
   fitInsets: () => fitInsets,
   fitViewbox: () => fitViewbox,
@@ -56,10 +66,13 @@ __export(src_exports, {
   iconMarkup: () => iconMarkup,
   interpolateViewbox: () => interpolateViewbox,
   isUndoRedoKey: () => isUndoRedoKey,
+  legalLineHeight: () => legalLineHeight,
   legendStartsOpen: () => legendStartsOpen,
   matchChromeKey: () => matchChromeKey,
   mountShell: () => mountShell,
+  parseAppearanceChoice: () => parseAppearanceChoice,
   placeTooltip: () => placeTooltip,
+  problemSummary: () => problemSummary,
   reducedMotionFromBodyClasses: () => reducedMotionFromBodyClasses,
   requestedAppearance: () => requestedAppearance,
   resolveAppearance: () => resolveAppearance,
@@ -67,7 +80,14 @@ __export(src_exports, {
   sameView: () => sameView,
   shellSizesFromTokens: () => shellSizesFromTokens,
   shortcutLabel: () => shortcutLabel,
-  zoomReadout: () => zoomReadout
+  toastLifetime: () => toastLifetime,
+  toastStackBottom: () => toastStackBottom,
+  toastStackWidth: () => toastStackWidth,
+  toastToEvict: () => toastToEvict,
+  webHeadMarkup: () => webHeadMarkup,
+  webModeScript: () => webModeScript,
+  zoomReadout: () => zoomReadout,
+  zoomRowRaised: () => zoomRowRaised
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -80,7 +100,12 @@ var CHROME_ISLANDS = [
   "problems",
   "legend",
   "inspector",
-  "status"
+  "status",
+  "legal",
+  "toasts",
+  "empty-state",
+  "drop-zone",
+  "problems-popover"
 ];
 
 // src/core/sizes.ts
@@ -151,6 +176,19 @@ function shellSizesFromTokens(shellGroup) {
   return sizes;
 }
 
+// src/core/web-chrome/bottom-row.ts
+var LEGAL_LINE_HEIGHT = 20;
+function legalLineHeight(measured) {
+  if (measured === void 0 || !Number.isFinite(measured) || measured <= 0) return LEGAL_LINE_HEIGHT;
+  return Math.max(1, Math.round(measured / LEGAL_LINE_HEIGHT)) * LEGAL_LINE_HEIGHT;
+}
+function zoomRowRaised(input) {
+  const { containerWidth, legalRight, zoomWidth } = input;
+  if (legalRight === void 0 || zoomWidth === void 0) return false;
+  const zoomLeft = containerWidth - SHELL.edge - zoomWidth;
+  return legalRight + SHELL.gap > zoomLeft;
+}
+
 // src/core/fit.ts
 var MAX_FIT_ZOOM = 1;
 var FIT_ANIMATION_MS = 250;
@@ -191,11 +229,13 @@ function freeRectCenter(container, insets) {
   };
 }
 function fitInsets(layout) {
-  const { container, host, paletteRow, problemsVisible, legendWidth, inspector } = layout;
+  const { container, host, paletteRow, problemsVisible, zoomRaised, legendWidth, inspector } = layout;
+  const raisedBottomRow = host === "web" && (problemsVisible || zoomRaised === true);
+  const wrappedLegalLines = legalLineHeight(layout.legalHeight) - LEGAL_LINE_HEIGHT;
   const insets = {
     top: paletteRow === "second-row" ? SHELL.fitInsetTopSecondRow : SHELL.fitInsetTop,
     right: SHELL.fitInsetSide,
-    bottom: host === "web" && problemsVisible ? SHELL.fitInsetBottomWeb : SHELL.fitInsetBottom,
+    bottom: raisedBottomRow ? SHELL.fitInsetBottomWeb + wrappedLegalLines : SHELL.fitInsetBottom,
     left: SHELL.fitInsetSide
   };
   const bottomSheetOpen = inspector !== void 0 && container.width <= SHELL.narrow;
@@ -349,6 +389,7 @@ function decideKey(event, context) {
   }
   const chromeKey = matchChromeKey(event);
   if (chromeKey !== void 0) {
+    if (context.startScreen === true && !stop) return { preventDefault: false, stopPropagation: false };
     const blocked = composing || context.inTextField || context.modalOpen;
     if (!blocked) return { action: chromeKey, preventDefault: true, stopPropagation: stop };
     return { preventDefault: false, stopPropagation: chromeKey === "fit" ? false : stop };
@@ -374,6 +415,9 @@ function shortcutLabel(key, platform, keyNames) {
       return `${keyNames.shift}+1`;
   }
 }
+function commandKeyLabel(key, platform, keyNames) {
+  return platform === "mac" ? `\u2318${key}` : `${keyNames.ctrl}+${key}`;
+}
 var MAC_SHORTCUT_LABELS = {
   zoomIn: "\u2318+",
   zoomOut: "\u2318\u2212",
@@ -536,7 +580,27 @@ var defaultMessages = {
   emptyHint: "Pick a tool from the palette to start.",
   insertExample: "Insert example",
   invalidFile: (diagram) => `This file isn't a valid ${diagram} right now. The diagram shows the last valid version and is read-only until you fix the text.`,
-  keyNames: { ctrl: "Ctrl", shift: "Shift", plus: "Plus", minus: "Minus" }
+  keyNames: { ctrl: "Ctrl", shift: "Shift", plus: "Plus", minus: "Minus" },
+  share: "Share",
+  legal: "Legal",
+  copyright: (year) => `\xA9 ${year} Miragon GmbH`,
+  opensInNewTab: "Opens in a new tab",
+  newDiagram: "New diagram",
+  openFile: "Open\u2026",
+  showExample: "Show example",
+  importFile: "Import\u2026",
+  appearance: "Appearance",
+  appearanceSystem: "System",
+  appearanceLight: "Light",
+  appearanceDark: "Dark",
+  problemsTitle: "Problems",
+  problemSeverity: (severity) => severity === "error" ? "Error" : "Warning",
+  close: "Close",
+  dropFile: "Drop file here",
+  dropForbidden: (reason) => reason === "multiple" ? "Drop one file at a time" : reason === "dialog" ? "Close the dialog to drop a file" : "This modeler can't open this file type",
+  dropHint: "Or drop a file here",
+  openFileLink: "Open a file\u2026",
+  cannotOpenFile: (name, accepted) => `Couldn't open \u201C${name}\u201D. Drop a ${accepted} file.`
 };
 function resolveMessages(overrides) {
   const { keyNames, ...texts } = overrides ?? {};
@@ -576,6 +640,176 @@ function placeTooltip(input) {
   return { x, y };
 }
 
+// src/core/web-chrome/top-row.ts
+function decideTopRow(input) {
+  const { containerWidth, paletteWidth, menuRight, primary } = input;
+  if (!primary) {
+    return {
+      paletteRow: decidePaletteRow({ containerWidth, paletteWidth, menuRight }),
+      primaryLabel: "shown"
+    };
+  }
+  const paletteRowBeside = (primaryWidth) => decidePaletteRow({
+    containerWidth,
+    paletteWidth,
+    menuRight,
+    primaryLeft: containerWidth - SHELL.edge - primaryWidth
+  });
+  if (paletteRowBeside(primary.withLabel) === "top") return { paletteRow: "top", primaryLabel: "shown" };
+  if (paletteRowBeside(primary.iconOnly) === "top") return { paletteRow: "top", primaryLabel: "collapsed" };
+  const labelledLeft = containerWidth - SHELL.edge - primary.withLabel;
+  return {
+    paletteRow: "second-row",
+    primaryLabel: menuRight + PALETTE_CLEARANCE <= labelledLeft ? "shown" : "collapsed"
+  };
+}
+
+// src/core/web-chrome/drop.ts
+function acceptEntries(accept) {
+  const entries = accept.map((entry) => entry.trim().toLowerCase()).filter((entry) => entry !== "");
+  return {
+    extensions: entries.filter((entry) => entry.startsWith(".")),
+    mimeTypes: entries.filter((entry) => !entry.startsWith(".") && entry.includes("/"))
+  };
+}
+function matchesMimeType(type, mimeTypes) {
+  const normalized = type.trim().toLowerCase();
+  if (normalized === "") return false;
+  return mimeTypes.some(
+    (entry) => entry.endsWith("/*") ? normalized.startsWith(entry.slice(0, -1)) : normalized === entry
+  );
+}
+function dragVerdict(items, context) {
+  const files = items.filter((item) => item.kind === "file");
+  if (files.length === 0) return { state: "none" };
+  if (context.dialogOpen) return { state: "forbidden", reason: "dialog" };
+  if (files.length > 1 && !context.multiple) return { state: "forbidden", reason: "multiple" };
+  const { mimeTypes } = acceptEntries(context.accept);
+  const foreignType = (item) => item.type.trim() !== "" && !matchesMimeType(item.type, mimeTypes);
+  if (mimeTypes.length > 0 && files.every(foreignType)) return { state: "forbidden", reason: "type" };
+  return { state: "over" };
+}
+function acceptsFile(file, accept) {
+  const { extensions, mimeTypes } = acceptEntries(accept);
+  if (extensions.length === 0 && mimeTypes.length === 0) return true;
+  const name = file.name.toLowerCase();
+  return extensions.some((extension) => name.endsWith(extension)) || matchesMimeType(file.type, mimeTypes);
+}
+
+// src/core/feedback/toasts.ts
+var MAX_TOASTS = 3;
+var TOAST_DURATION_MS = {
+  success: 2800,
+  info: 2800,
+  warning: 5e3,
+  danger: 5e3
+};
+var TOAST_MAX_WIDTH = 480;
+function toastLifetime(request) {
+  if (request.action) return void 0;
+  const requested = request.durationMs;
+  const longer = requested !== void 0 && Number.isFinite(requested) ? requested : 0;
+  return Math.max(TOAST_DURATION_MS[request.status], longer);
+}
+function toastToEvict(stack) {
+  if (stack.length < MAX_TOASTS) return void 0;
+  const evicted = stack.find((slot) => !slot.engaged && !slot.hasAction) ?? stack.find((slot) => !slot.engaged) ?? stack[0];
+  return evicted?.id;
+}
+function toastStackWidth(containerWidth) {
+  return Math.max(0, Math.min(TOAST_MAX_WIDTH, containerWidth - 2 * SHELL.edge));
+}
+function toastStackBottom(input) {
+  const stackWidth = toastStackWidth(input.containerWidth);
+  const { cardWidth } = input;
+  const width = cardWidth !== void 0 && Number.isFinite(cardWidth) ? Math.min(stackWidth, Math.max(0, cardWidth)) : stackWidth;
+  const left = (input.containerWidth - width) / 2;
+  const right = left + width;
+  let highest;
+  for (const obstacle of input.obstacles) {
+    const distance = Math.max(obstacle.left - right, left - obstacle.right);
+    if (distance >= SHELL.gap) continue;
+    highest = highest === void 0 ? obstacle.top : Math.max(highest, obstacle.top);
+  }
+  return highest === void 0 ? SHELL.edge : Math.max(SHELL.edge, highest + SHELL.gap);
+}
+
+// src/core/feedback/appearance.ts
+var APPEARANCE_STORAGE_KEY = "miragon.darstellung";
+function parseAppearanceChoice(stored) {
+  return stored === "light" || stored === "dark" ? stored : "system";
+}
+function documentMode(choice, themes, colors) {
+  if (!themes.includes("dark")) return fixedMode("light", colors.light);
+  const parsed = parseAppearanceChoice(choice);
+  if (parsed === "system") {
+    return {
+      theme: "system",
+      colorScheme: "light dark",
+      themeColor: { light: colors.light, dark: colors.dark }
+    };
+  }
+  return fixedMode(parsed, colors[parsed]);
+}
+function fixedMode(theme, color) {
+  return { theme, colorScheme: theme, themeColor: { light: color, dark: color } };
+}
+function webModeScript(options) {
+  const contrast = [
+    `if (window.matchMedia && window.matchMedia(${scriptString("(prefers-contrast: more)")}).matches)`,
+    `  document.documentElement.setAttribute("data-cd-kontrast", "hoch");`
+  ];
+  if (!options.themes.includes("dark")) return contrast.join("\n");
+  const { light, dark } = options.themeColors;
+  return [
+    "(function () {",
+    "  var html = document.documentElement;",
+    "  var choice = null;",
+    "  try {",
+    `    choice = window.localStorage.getItem(${scriptString(APPEARANCE_STORAGE_KEY)});`,
+    "  } catch (error) {}",
+    `  if (choice === "light" || choice === "dark") {`,
+    `    var color = choice === "dark" ? ${scriptString(dark)} : ${scriptString(light)};`,
+    `    html.setAttribute("data-cd-theme", choice);`,
+    `    var scheme = document.querySelector("meta[name=color-scheme]");`,
+    `    if (scheme) scheme.setAttribute("content", choice);`,
+    `    var metas = document.querySelectorAll("meta[name=theme-color]");`,
+    `    for (var index = 0; index < metas.length; index++) metas[index].setAttribute("content", color);`,
+    "  }",
+    ...contrast.map((line) => `  ${line}`),
+    "})();"
+  ].join("\n");
+}
+function scriptString(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function webHeadMarkup(options) {
+  const mode = documentMode("system", options.themes, options.themeColors);
+  const script = `<script>
+${webModeScript(options)}
+</script>`;
+  if (mode.theme !== "system") {
+    return [`<meta name="theme-color" content="${escapeAttribute(mode.themeColor.light)}">`, script].join(
+      "\n"
+    );
+  }
+  return [
+    `<meta name="color-scheme" content="${escapeAttribute(mode.colorScheme)}">`,
+    `<meta name="theme-color" content="${escapeAttribute(mode.themeColor.light)}" media="(prefers-color-scheme: light)">`,
+    `<meta name="theme-color" content="${escapeAttribute(mode.themeColor.dark)}" media="(prefers-color-scheme: dark)">`,
+    script
+  ].join("\n");
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/core/feedback/problems.ts
+function problemSummary(items) {
+  const errors = items.filter((item) => item.severity === "error").length;
+  return { count: items.length, errors, items };
+}
+
 // src/dom/element.ts
 function createElement(ownerDocument, tag, attributes = {}, ...children) {
   const element = ownerDocument.createElement(tag);
@@ -613,163 +847,134 @@ function hasVisibleFocus(element) {
   }
 }
 
-// src/dom/hint.ts
-function createEmptyHint(ownerDocument, messages, options) {
-  const { onInsertExample } = options;
-  const action = onInsertExample ? createElement(
-    ownerDocument,
-    "button",
-    { type: "button", class: "cd-shell-hint-action" },
-    messages.insertExample
-  ) : void 0;
-  action?.addEventListener("click", () => onInsertExample?.());
-  const element = createElement(
-    ownerDocument,
-    "div",
-    { class: "cd-shell-hint" },
-    createElement(ownerDocument, "p", { class: "cd-shell-hint-text" }, messages.emptyHint),
-    action
-  );
-  element.hidden = true;
-  return {
-    element,
-    isShown: () => !element.hidden,
-    setShown(shown) {
-      element.hidden = !shown;
-    },
-    place({ top, right, bottom, left }) {
-      element.style.inset = `${top}px ${right}px ${bottom}px ${left}px`;
-    },
-    destroy() {
-      element.remove();
-    }
-  };
-}
-
-// src/dom/inspector.ts
-function createInspector(ownerDocument, options, onChange) {
-  const element = createElement(ownerDocument, "aside", {
-    class: "cd-shell-inspector",
-    "data-chrome": "inspector",
-    "aria-label": options.label
-  });
-  element.hidden = true;
-  function setOpen(open) {
-    if (open === !element.hidden) return;
-    element.hidden = !open;
-    onChange(open);
+// src/dom/feedback/appearance.ts
+var NO_TRANSITION_CLASS = "cd-shell-no-transition";
+var CONTRAST_QUERY = "(prefers-contrast: more)";
+var SCHEME_MEDIA = {
+  light: "(prefers-color-scheme: light)",
+  dark: "(prefers-color-scheme: dark)"
+};
+function onMediaChange(query, listener) {
+  if (typeof query.addEventListener === "function") {
+    query.addEventListener("change", listener);
+    return () => query.removeEventListener("change", listener);
+  }
+  query.addListener(listener);
+  return () => query.removeListener(listener);
+}
+function connectWebAppearance(context) {
+  const { ownerDocument, themes, options } = context;
+  const darkCapable = themes.includes("dark");
+  if (darkCapable && !options) {
+    throw new Error(
+      '@miragon/modeler-shell: a web modeler whose themes include "dark" needs the appearance option ({ themeColors } from its vendored cd-tokens.generated.json)'
+    );
   }
-  return {
-    element,
-    isOpen: () => !element.hidden,
-    open: () => setOpen(true),
-    close: () => setOpen(false),
-    destroy() {
-      element.remove();
+  const html = ownerDocument.documentElement;
+  const view = ownerDocument.defaultView;
+  const cleanups = [];
+  const contrast = typeof view?.matchMedia === "function" ? view.matchMedia(CONTRAST_QUERY) : void 0;
+  if (contrast) {
+    const mirrorContrast = () => toggleAttribute(html, "data-cd-kontrast", contrast.matches && "hoch");
+    mirrorContrast();
+    cleanups.push(onMediaChange(contrast, mirrorContrast));
+  }
+  function destroy() {
+    for (const cleanup of cleanups.splice(0)) cleanup();
+  }
+  if (!darkCapable || !options) {
+    return { choice: () => "system", setChoice() {
+    }, destroy };
+  }
+  const { themeColors } = options;
+  function storage() {
+    if (options?.storage) return options.storage;
+    try {
+      return globalThis.localStorage;
+    } catch {
+      return void 0;
     }
-  };
-}
-
-// src/dom/keys.ts
-function isTextField(target) {
-  if (!target || typeof target.closest !== "function") return false;
-  const element = target;
-  return element.isContentEditable === true || element.closest(TEXT_FIELD_SELECTOR) !== null;
-}
-function isShown(element) {
-  if (element.localName === "dialog" && !element.hasAttribute("open")) return false;
-  if (element.closest("[hidden]")) return false;
-  return typeof element.checkVisibility !== "function" || element.checkVisibility({ visibilityProperty: true });
-}
-function isModal(element) {
-  if (element.getAttribute("aria-modal") === "true") return true;
-  try {
-    return element.matches(":modal");
-  } catch {
-    return false;
-  }
-}
-function openDialogs(scope) {
-  return [...scope.querySelectorAll('[role="dialog"], [role="alertdialog"], dialog')].filter(isShown);
-}
-function createKeyListener(context) {
-  return (event) => {
-    if (event.key === "Escape") context.hideTooltip();
-    const dialogs = openDialogs(context.dialogScope);
-    const decision = decideKey(event, {
-      host: context.host,
-      inTextField: isTextField(event.target),
-      menuOpen: context.menuOpen(),
-      dialogOpen: dialogs.length > 0,
-      modalOpen: dialogs.some(isModal),
-      defaultPrevented: event.defaultPrevented
-    });
-    if (decision.preventDefault) event.preventDefault();
-    if (decision.stopPropagation) event.stopPropagation();
-    if (decision.action === "closeMenu") context.closeMenu();
-    else if (decision.action) context.run(decision.action);
-  };
-}
-
-// src/dom/ledger.ts
-var Ledger = class {
-  undo = [];
-  originalAttributes = /* @__PURE__ */ new Map();
-  closed = false;
-  get isClosed() {
-    return this.closed;
   }
-  /** Runs `task` on `close()`, in reverse order of registration. */
-  defer(task) {
-    this.undo.push(task);
-  }
-  /** Adds `className` unless present; `close()` removes it only if this ledger added it. */
-  addClass(element, className) {
-    if (element.classList.contains(className)) return;
-    const hadClassAttribute = element.hasAttribute("class");
-    element.classList.add(className);
-    this.defer(() => {
-      element.classList.remove(className);
-      if (!hadClassAttribute && element.classList.length === 0) element.removeAttribute("class");
-    });
+  function readStored() {
+    try {
+      return parseAppearanceChoice(storage()?.getItem(APPEARANCE_STORAGE_KEY));
+    } catch {
+      return "system";
+    }
   }
-  /** Sets (string) or removes (`null`) an attribute; `close()` restores the value before the first change. */
-  attribute(element, name, value) {
-    let originals = this.originalAttributes.get(element);
-    if (!originals) {
-      originals = /* @__PURE__ */ new Map();
-      this.originalAttributes.set(element, originals);
+  function store(choice) {
+    try {
+      const target = storage();
+      if (choice === "system") target?.removeItem(APPEARANCE_STORAGE_KEY);
+      else target?.setItem(APPEARANCE_STORAGE_KEY, choice);
+    } catch {
     }
-    if (!originals.has(name)) {
-      originals.set(name, element.getAttribute(name));
-      this.defer(() => {
-        const original = originals.get(name) ?? null;
-        if (original === null) element.removeAttribute(name);
-        else element.setAttribute(name, original);
-      });
+  }
+  function nextFrame(callback) {
+    if (view && typeof view.requestAnimationFrame === "function") {
+      const frame = view.requestAnimationFrame(() => callback());
+      return () => view.cancelAnimationFrame(frame);
     }
-    if (value === null) element.removeAttribute(name);
-    else element.setAttribute(name, value);
+    const timer = setTimeout(callback, 16);
+    return () => clearTimeout(timer);
   }
-  listen(target, type, listener, options) {
-    const handler = listener;
-    target.addEventListener(type, handler, options);
-    this.defer(() => target.removeEventListener(type, handler, options));
+  let cancelTransitionFrame;
+  function allowTransitions() {
+    cancelTransitionFrame?.();
+    cancelTransitionFrame = void 0;
+    html.classList.remove(NO_TRANSITION_CLASS);
   }
-  /** Runs every undo task once; later calls are no-ops. */
-  close() {
-    if (this.closed) return;
-    this.closed = true;
-    for (const task of this.undo.reverse()) {
-      try {
-        task();
-      } catch {
-      }
-    }
-    this.undo.length = 0;
-    this.originalAttributes.clear();
+  cleanups.push(() => {
+    if (cancelTransitionFrame) allowTransitions();
+  });
+  function suspendTransitions() {
+    cancelTransitionFrame?.();
+    html.classList.add(NO_TRANSITION_CLASS);
+    cancelTransitionFrame = nextFrame(() => {
+      cancelTransitionFrame = nextFrame(allowTransitions);
+    });
   }
-};
+  function metaFor(name, media) {
+    const normalize = (value) => (value ?? "").replace(/\s+/g, "").toLowerCase();
+    const existing = [...ownerDocument.querySelectorAll(`meta[name="${name}"]`)].find(
+      (meta) => media === void 0 ? true : normalize(meta.getAttribute("media")) === normalize(media)
+    );
+    if (existing) return existing;
+    const created = createElement(ownerDocument, "meta", { name, media });
+    (ownerDocument.head ?? html).append(created);
+    return created;
+  }
+  function apply(choice) {
+    const mode = documentMode(choice, themes, themeColors);
+    suspendTransitions();
+    html.setAttribute("data-cd-theme", mode.theme);
+    metaFor("color-scheme").setAttribute("content", mode.colorScheme);
+    metaFor("theme-color", SCHEME_MEDIA.light).setAttribute("content", mode.themeColor.light);
+    metaFor("theme-color", SCHEME_MEDIA.dark).setAttribute("content", mode.themeColor.dark);
+  }
+  let current = readStored();
+  const onStorage = (event) => {
+    if (event.key !== null && event.key !== APPEARANCE_STORAGE_KEY) return;
+    const next = event.key === null ? "system" : parseAppearanceChoice(event.newValue);
+    if (next === current) return;
+    current = next;
+    apply(next);
+  };
+  if (view) {
+    view.addEventListener("storage", onStorage);
+    cleanups.push(() => view.removeEventListener("storage", onStorage));
+  }
+  return {
+    choice: () => current,
+    setChoice(choice) {
+      const next = parseAppearanceChoice(choice);
+      current = next;
+      store(next);
+      apply(next);
+    },
+    destroy
+  };
+}
 
 // src/dom/icons.ts
 var ICONS = {
@@ -979,28 +1184,691 @@ function sanitize(icon, options = {}) {
   }
   return { root, children };
 }
-function escapeAttribute(value) {
+function escapeAttribute2(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function attributeList(attributes) {
-  return attributes.map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`).join("");
+function attributeList(attributes) {
+  return attributes.map(([name, value]) => ` ${name}="${escapeAttribute2(value)}"`).join("");
+}
+function iconMarkup(icon, options) {
+  const { root, children } = sanitize(icon, options);
+  const content = children.map(([tag, attributes]) => `<${tag}${attributeList(attributes)}/>`).join("");
+  return `<svg xmlns="${SVG_NAMESPACE}"${attributeList(root)}>${content}</svg>`;
+}
+function iconElement(icon, options) {
+  const { root, children } = sanitize(icon, options);
+  const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+  for (const [name, value] of root) svg.setAttribute(name, value);
+  for (const [tag, attributes] of children) {
+    const child = document.createElementNS(SVG_NAMESPACE, tag);
+    for (const [name, value] of attributes) child.setAttribute(name, value);
+    svg.append(child);
+  }
+  return svg;
+}
+
+// src/dom/feedback/problems-popover.ts
+var PILL_ATTRIBUTES = ["aria-haspopup", "aria-expanded", "aria-controls"];
+function isPrintable(event) {
+  return event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function createProblemsPopover(context) {
+  const { ownerDocument, root, layer, pill, id, titleId, messages } = context;
+  const view = ownerDocument.defaultView;
+  const list = createElement(ownerDocument, "ul", { class: "cd-shell-problems-list", role: "list" });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    {
+      class: "cd-shell-problems-popover",
+      "data-chrome": "problems-popover",
+      role: "dialog",
+      id,
+      "aria-labelledby": titleId,
+      tabindex: "-1"
+    },
+    createElement(
+      ownerDocument,
+      "h2",
+      { class: "cd-shell-problems-popover-title", id: titleId },
+      messages.problemsTitle
+    ),
+    list
+  );
+  element.hidden = true;
+  layer.append(element);
+  pill.setAttribute("aria-haspopup", "dialog");
+  pill.setAttribute("aria-expanded", "false");
+  pill.setAttribute("aria-controls", id);
+  let items = [];
+  let rows = [];
+  let destroyed = false;
+  const isOpen = () => !element.hidden;
+  function keyOf(item) {
+    return `${item.elementId ?? ""}\0${item.severity}\0${item.message}`;
+  }
+  function rowElement(item) {
+    const severity = item.severity === "error" ? "error" : "warning";
+    const parts = [
+      // The shape and colour of the icon carry the severity on screen, its name for screen readers.
+      createElement(
+        ownerDocument,
+        "span",
+        { class: "cd-shell-problem-icon", role: "img", "aria-label": messages.problemSeverity(severity) },
+        iconElement(severity === "error" ? "circle-x" : "triangle-alert")
+      ),
+      createElement(ownerDocument, "span", { class: "cd-shell-problem-message" }, item.message),
+      item.location ? createElement(ownerDocument, "span", { class: "cd-shell-problem-location" }, item.location) : void 0
+    ];
+    const attributes = { class: "cd-shell-problem", "data-severity": severity };
+    if (!item.elementId) {
+      const text = createElement(ownerDocument, "div", { ...attributes, tabindex: "-1" }, ...parts);
+      rows.push({ key: keyOf(item), element: text });
+      return text;
+    }
+    const button = createElement(ownerDocument, "button", { type: "button", ...attributes }, ...parts);
+    button.addEventListener("click", () => select(item));
+    rows.push({ key: keyOf(item), element: button });
+    return button;
+  }
+  function focusedRowIndex() {
+    return rows.findIndex((row) => row.element === ownerDocument.activeElement);
+  }
+  function render() {
+    const focusedIndex = focusedRowIndex();
+    const focusedKey = rows[focusedIndex]?.key;
+    rows = [];
+    list.replaceChildren(...items.map((item) => createElement(ownerDocument, "li", {}, rowElement(item))));
+    if (focusedKey === void 0 || !isOpen()) return;
+    const kept = rows.find((row) => row.key === focusedKey) ?? rows[Math.min(focusedIndex, rows.length - 1)];
+    if (kept) focusRowElement(kept.element);
+    else element.focus({ preventScroll: true });
+  }
+  function revealInList(row) {
+    const rowBox = row.getBoundingClientRect();
+    const listBox = list.getBoundingClientRect();
+    if (rowBox.top < listBox.top) list.scrollTop -= listBox.top - rowBox.top;
+    else if (rowBox.bottom > listBox.bottom) list.scrollTop += rowBox.bottom - listBox.bottom;
+  }
+  function focusRowElement(row) {
+    row.focus({ preventScroll: true });
+    revealInList(row);
+  }
+  function focusCanvas() {
+    const canvas = root.querySelector(".cd-shell-canvas svg[tabindex]");
+    canvas?.focus({ preventScroll: true });
+    if ((!canvas || ownerDocument.activeElement !== canvas) && !pill.hidden)
+      pill.focus({ preventScroll: true });
+  }
+  function select(item) {
+    close();
+    focusCanvas();
+    context.onSelectItem?.(item);
+  }
+  function focusRow(index) {
+    if (rows.length === 0) return;
+    const row = rows[(index + rows.length) % rows.length];
+    if (row) focusRowElement(row.element);
+  }
+  const onOutsidePointerDown = (event) => {
+    const target = event.target;
+    if (target && (element.contains(target) || pill.contains(target))) return;
+    close();
+  };
+  const onWindowBlur = () => close();
+  function open() {
+    if (destroyed || isOpen()) return;
+    element.hidden = false;
+    pill.setAttribute("aria-expanded", "true");
+    ownerDocument.addEventListener("pointerdown", onOutsidePointerDown, true);
+    view?.addEventListener("blur", onWindowBlur);
+    list.scrollTop = 0;
+    const first = rows[0];
+    if (first) focusRowElement(first.element);
+    else element.focus({ preventScroll: true });
+  }
+  function close(options = {}) {
+    if (!isOpen()) return;
+    element.hidden = true;
+    pill.setAttribute("aria-expanded", "false");
+    ownerDocument.removeEventListener("pointerdown", onOutsidePointerDown, true);
+    view?.removeEventListener("blur", onWindowBlur);
+    if (options.restoreFocus && !pill.hidden) pill.focus({ preventScroll: true });
+  }
+  function consume(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  element.addEventListener("keydown", (event) => {
+    if (matchChromeKey(event)) return;
+    const index = focusedRowIndex();
+    switch (event.key) {
+      case "Escape":
+        consume(event);
+        close({ restoreFocus: true });
+        return;
+      case "Tab": {
+        const first = index <= 0;
+        const last = rows.length === 0 || index === rows.length - 1;
+        if (event.shiftKey && first) {
+          consume(event);
+          close({ restoreFocus: true });
+        } else if (!event.shiftKey && last) {
+          event.stopPropagation();
+          close({ restoreFocus: true });
+        }
+        return;
+      }
+      case "ArrowDown":
+        focusRow(index + 1);
+        break;
+      case "ArrowUp":
+        focusRow(index < 0 ? rows.length - 1 : index - 1);
+        break;
+      case "Home":
+        focusRow(0);
+        break;
+      case "End":
+        focusRow(rows.length - 1);
+        break;
+      case "Enter":
+      case " ":
+      case "Delete":
+      case "Backspace":
+        event.stopPropagation();
+        return;
+      default:
+        if (isPrintable(event)) event.stopPropagation();
+        return;
+    }
+    consume(event);
+  });
+  return {
+    element,
+    isOpen,
+    toggle() {
+      if (isOpen()) close({ restoreFocus: true });
+      else open();
+    },
+    open,
+    close,
+    setItems(next) {
+      items = next;
+      if (!destroyed) render();
+    },
+    destroy() {
+      if (destroyed) return;
+      close();
+      destroyed = true;
+      for (const name of PILL_ATTRIBUTES) pill.removeAttribute(name);
+      element.remove();
+    }
+  };
+}
+
+// src/dom/feedback/toasts.ts
+var TOAST_RESUME_MIN_MS = 1500;
+var TOAST_LEAVE_FALLBACK_MS = 400;
+var LEAVE_ANIMATION = "cd-shell-toast-out";
+var TOAST_ANNOUNCE_DELAY_MS = 100;
+var INERT_HANDLE = Object.freeze({ dismiss() {
+} });
+function createToaster(context) {
+  const { ownerDocument, messages } = context;
+  const web = context.host === "web";
+  const element = createElement(ownerDocument, "div", {
+    class: "cd-shell-toasts",
+    "data-chrome": "toasts",
+    popover: web ? "manual" : void 0
+  });
+  const liveRegion = (politeness) => createElement(ownerDocument, "div", {
+    class: "cd-shell-live-region",
+    "data-live": politeness,
+    role: politeness === "polite" ? "status" : "alert",
+    "aria-live": politeness,
+    "aria-atomic": "true"
+  });
+  const politeRegion = liveRegion("polite");
+  const assertiveRegion = liveRegion("assertive");
+  const announcer = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-live" },
+    politeRegion,
+    assertiveRegion
+  );
+  const live = [];
+  const leaveTimers = /* @__PURE__ */ new Set();
+  const announceTimers = /* @__PURE__ */ new Map();
+  let lastId = 0;
+  let destroyed = false;
+  function regionFor(request) {
+    return request.status === "danger" ? assertiveRegion : politeRegion;
+  }
+  function announce(request) {
+    const region = regionFor(request);
+    clearTimeout(announceTimers.get(region));
+    region.textContent = "";
+    announceTimers.set(
+      region,
+      setTimeout(() => {
+        announceTimers.delete(region);
+        if (!destroyed) region.textContent = request.text;
+      }, TOAST_ANNOUNCE_DELAY_MS)
+    );
+  }
+  function silence(request) {
+    const region = regionFor(request);
+    if (region.textContent === request.text) region.textContent = "";
+  }
+  function changed() {
+    if (!destroyed) context.onChange?.();
+  }
+  function supportsPopover() {
+    return web && typeof element.showPopover === "function" && typeof element.hidePopover === "function";
+  }
+  function popoverOpen() {
+    try {
+      return element.matches(":popover-open");
+    } catch {
+      return false;
+    }
+  }
+  function modalOpen() {
+    try {
+      return ownerDocument.querySelector(":modal") !== null;
+    } catch {
+      return true;
+    }
+  }
+  function raise() {
+    if (!supportsPopover() || !element.isConnected) return;
+    if (popoverOpen() && !modalOpen()) return;
+    const focused = ownerDocument.activeElement;
+    const keepFocus = focused && element.contains(focused) ? focused : void 0;
+    try {
+      element.hidePopover();
+      element.showPopover();
+    } catch {
+      return;
+    }
+    if (keepFocus && ownerDocument.activeElement !== keepFocus) keepFocus.focus({ preventScroll: true });
+  }
+  function lowerWhenEmpty() {
+    if (element.childElementCount > 0 || !supportsPopover()) return;
+    try {
+      element.hidePopover();
+    } catch {
+    }
+  }
+  function engaged(toast) {
+    return toast.hovered || toast.focused;
+  }
+  function stopTimer(toast) {
+    clearTimeout(toast.timer);
+    toast.timer = void 0;
+  }
+  function runTimer(toast) {
+    stopTimer(toast);
+    if (toast.remaining === void 0 || engaged(toast)) return;
+    toast.startedAt = Date.now();
+    toast.timer = setTimeout(() => close(toast), toast.remaining);
+  }
+  function pause(toast) {
+    if (toast.timer === void 0) return;
+    stopTimer(toast);
+    if (toast.remaining !== void 0) {
+      toast.remaining = Math.max(0, toast.remaining - (Date.now() - toast.startedAt));
+    }
+  }
+  function setEngagement(toast, hovered, focused) {
+    if (!live.includes(toast)) return;
+    const wasEngaged = engaged(toast);
+    toast.hovered = hovered;
+    toast.focused = focused;
+    if (engaged(toast) === wasEngaged) return;
+    if (wasEngaged) {
+      if (toast.remaining !== void 0) toast.remaining = Math.max(toast.remaining, TOAST_RESUME_MIN_MS);
+      runTimer(toast);
+    } else {
+      pause(toast);
+    }
+  }
+  function reducedMotion() {
+    if (ownerDocument.documentElement.classList.contains(REDUCED_MOTION_CLASS)) return true;
+    const view = ownerDocument.defaultView;
+    return typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  function removeElement(toastElement) {
+    toastElement.remove();
+    lowerWhenEmpty();
+    changed();
+  }
+  function leave(toastElement) {
+    toastElement.setAttribute("data-leaving", "");
+    toastElement.inert = true;
+    if (reducedMotion()) {
+      removeElement(toastElement);
+      return;
+    }
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      clearTimeout(fallback);
+      leaveTimers.delete(fallback);
+      removeElement(toastElement);
+    };
+    toastElement.addEventListener("animationend", (event) => {
+      if (event.target === toastElement && event.animationName === LEAVE_ANIMATION) finish();
+    });
+    const fallback = setTimeout(finish, TOAST_LEAVE_FALLBACK_MS);
+    leaveTimers.add(fallback);
+  }
+  function close(toast) {
+    const index = live.indexOf(toast);
+    if (index < 0) return;
+    live.splice(index, 1);
+    stopTimer(toast);
+    silence(toast.request);
+    const heldFocus = toast.element.contains(ownerDocument.activeElement);
+    if (heldFocus) {
+      const next = live[index] ?? live[index - 1];
+      if (next) next.closeButton.focus({ preventScroll: true });
+      else context.focusFallback();
+    }
+    leave(toast.element);
+  }
+  function setAction(toast, action) {
+    const previous = toast.actionButton;
+    const hadFocus = previous !== void 0 && ownerDocument.activeElement === previous;
+    previous?.remove();
+    toast.actionButton = void 0;
+    if (action) {
+      const button = createElement(
+        ownerDocument,
+        "button",
+        { type: "button", class: "cd-shell-toast-action cd-shell-button", "data-variant": "ghost" },
+        action.label
+      );
+      button.addEventListener("click", () => {
+        close(toast);
+        action.onSelect();
+      });
+      toast.closeButton.before(button);
+      toast.actionButton = button;
+    }
+    if (hadFocus) (toast.actionButton ?? toast.closeButton).focus({ preventScroll: true });
+  }
+  function slotOf(toast) {
+    return { id: toast.id, hasAction: toast.request.action !== void 0, engaged: engaged(toast) };
+  }
+  function render(request) {
+    const id = ++lastId;
+    const textId = `${context.idPrefix}-${id}`;
+    const closeButton = createElement(
+      ownerDocument,
+      "button",
+      {
+        type: "button",
+        class: "cd-shell-toast-close",
+        "aria-label": messages.close,
+        "aria-describedby": textId
+      },
+      iconElement("x")
+    );
+    const toastElement = createElement(
+      ownerDocument,
+      "div",
+      { class: "cd-shell-toast", "data-status": request.status },
+      createElement(ownerDocument, "span", { class: "cd-shell-toast-dot", "aria-hidden": "true" }),
+      createElement(ownerDocument, "span", { class: "cd-shell-toast-text", id: textId }, request.text),
+      closeButton
+    );
+    const toast = {
+      id,
+      element: toastElement,
+      closeButton,
+      handle: Object.freeze({ dismiss: () => close(toast) }),
+      request,
+      actionButton: void 0,
+      hovered: false,
+      focused: false,
+      remaining: toastLifetime(request),
+      startedAt: Date.now(),
+      timer: void 0
+    };
+    setAction(toast, request.action);
+    closeButton.addEventListener("click", () => close(toast));
+    toastElement.addEventListener("mouseenter", () => setEngagement(toast, true, toast.focused));
+    toastElement.addEventListener("mouseleave", () => setEngagement(toast, false, toast.focused));
+    toastElement.addEventListener("focusin", () => setEngagement(toast, toast.hovered, true));
+    toastElement.addEventListener(
+      "focusout",
+      (event) => setEngagement(toast, toast.hovered, toastElement.contains(event.relatedTarget))
+    );
+    return toast;
+  }
+  function show(request) {
+    if (destroyed) return INERT_HANDLE;
+    const same = live.find(
+      (toast2) => toast2.request.status === request.status && toast2.request.text === request.text
+    );
+    if (same) {
+      same.request = request;
+      setAction(same, request.action);
+      same.remaining = toastLifetime(request);
+      runTimer(same);
+      raise();
+      announce(request);
+      changed();
+      return same.handle;
+    }
+    while (live.length >= MAX_TOASTS) {
+      const evictedId = toastToEvict(live.map(slotOf));
+      const evicted = live.find((toast2) => toast2.id === evictedId) ?? live[0];
+      if (!evicted) break;
+      close(evicted);
+    }
+    const toast = render(request);
+    live.push(toast);
+    element.append(toast.element);
+    raise();
+    runTimer(toast);
+    announce(request);
+    changed();
+    return toast.handle;
+  }
+  return {
+    element,
+    announcer,
+    show,
+    setBottom(bottom) {
+      element.style.bottom = `${bottom}px`;
+    },
+    widestCard() {
+      let widest;
+      for (const card of element.children) {
+        const width = card.getBoundingClientRect().width;
+        if (width > 0) widest = Math.max(widest ?? 0, width);
+      }
+      return widest;
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      for (const toast of live.splice(0)) stopTimer(toast);
+      for (const timer of leaveTimers) clearTimeout(timer);
+      leaveTimers.clear();
+      for (const timer of announceTimers.values()) clearTimeout(timer);
+      announceTimers.clear();
+      element.remove();
+      announcer.remove();
+    }
+  };
+}
+
+// src/dom/hint.ts
+function createEmptyHint(ownerDocument, messages, options) {
+  const { onInsertExample } = options;
+  const action = onInsertExample ? createElement(
+    ownerDocument,
+    "button",
+    { type: "button", class: "cd-shell-hint-action" },
+    messages.insertExample
+  ) : void 0;
+  action?.addEventListener("click", () => onInsertExample?.());
+  const element = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-hint" },
+    createElement(ownerDocument, "p", { class: "cd-shell-hint-text" }, messages.emptyHint),
+    action
+  );
+  element.hidden = true;
+  return {
+    element,
+    isShown: () => !element.hidden,
+    setShown(shown) {
+      element.hidden = !shown;
+    },
+    place({ top, right, bottom, left }) {
+      element.style.inset = `${top}px ${right}px ${bottom}px ${left}px`;
+    },
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/inspector.ts
+function createInspector(ownerDocument, options, onChange) {
+  const element = createElement(ownerDocument, "aside", {
+    class: "cd-shell-inspector",
+    "data-chrome": "inspector",
+    "aria-label": options.label
+  });
+  element.hidden = true;
+  function setOpen(open) {
+    if (open === !element.hidden) return;
+    element.hidden = !open;
+    onChange(open);
+  }
+  return {
+    element,
+    isOpen: () => !element.hidden,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/keys.ts
+function isTextField(target) {
+  if (!target || typeof target.closest !== "function") return false;
+  const element = target;
+  return element.isContentEditable === true || element.closest(TEXT_FIELD_SELECTOR) !== null;
+}
+function isShown(element) {
+  if (element.localName === "dialog" && !element.hasAttribute("open")) return false;
+  if (element.closest("[hidden]")) return false;
+  return typeof element.checkVisibility !== "function" || element.checkVisibility({ visibilityProperty: true });
+}
+function isModal(element) {
+  if (element.getAttribute("aria-modal") === "true") return true;
+  try {
+    return element.matches(":modal");
+  } catch {
+    return false;
+  }
+}
+function openDialogs(scope) {
+  return [...scope.querySelectorAll('[role="dialog"], [role="alertdialog"], dialog')].filter(isShown);
+}
+function isModalOpen(scope) {
+  return openDialogs(scope).some(isModal);
 }
-function iconMarkup(icon, options) {
-  const { root, children } = sanitize(icon, options);
-  const content = children.map(([tag, attributes]) => `<${tag}${attributeList(attributes)}/>`).join("");
-  return `<svg xmlns="${SVG_NAMESPACE}"${attributeList(root)}>${content}</svg>`;
+function createKeyListener(context) {
+  return (event) => {
+    if (event.key === "Escape") context.hideTooltip();
+    const dialogs = openDialogs(context.dialogScope);
+    const decision = decideKey(event, {
+      host: context.host,
+      inTextField: isTextField(event.target),
+      menuOpen: context.menuOpen(),
+      dialogOpen: dialogs.length > 0,
+      modalOpen: dialogs.some(isModal),
+      defaultPrevented: event.defaultPrevented,
+      startScreen: context.startScreen?.() ?? false
+    });
+    if (decision.preventDefault) event.preventDefault();
+    if (decision.stopPropagation) event.stopPropagation();
+    if (decision.action === "closeMenu") context.closeMenu();
+    else if (decision.action) context.run(decision.action);
+  };
 }
-function iconElement(icon, options) {
-  const { root, children } = sanitize(icon, options);
-  const svg = document.createElementNS(SVG_NAMESPACE, "svg");
-  for (const [name, value] of root) svg.setAttribute(name, value);
-  for (const [tag, attributes] of children) {
-    const child = document.createElementNS(SVG_NAMESPACE, tag);
-    for (const [name, value] of attributes) child.setAttribute(name, value);
-    svg.append(child);
+
+// src/dom/ledger.ts
+var Ledger = class {
+  undo = [];
+  originalAttributes = /* @__PURE__ */ new Map();
+  closed = false;
+  get isClosed() {
+    return this.closed;
   }
-  return svg;
-}
+  /** Runs `task` on `close()`, in reverse order of registration. */
+  defer(task) {
+    this.undo.push(task);
+  }
+  /** Adds `className` unless present; `close()` removes it only if this ledger added it. */
+  addClass(element, className) {
+    if (element.classList.contains(className)) return;
+    const hadClassAttribute = element.hasAttribute("class");
+    element.classList.add(className);
+    this.defer(() => {
+      element.classList.remove(className);
+      if (!hadClassAttribute && element.classList.length === 0) element.removeAttribute("class");
+    });
+  }
+  /** Sets (string) or removes (`null`) an attribute; `close()` restores the value before the first change. */
+  attribute(element, name, value) {
+    let originals = this.originalAttributes.get(element);
+    if (!originals) {
+      originals = /* @__PURE__ */ new Map();
+      this.originalAttributes.set(element, originals);
+    }
+    if (!originals.has(name)) {
+      originals.set(name, element.getAttribute(name));
+      this.defer(() => {
+        const original = originals.get(name) ?? null;
+        if (original === null) element.removeAttribute(name);
+        else element.setAttribute(name, original);
+      });
+    }
+    if (value === null) element.removeAttribute(name);
+    else element.setAttribute(name, value);
+  }
+  listen(target, type, listener, options) {
+    const handler = listener;
+    target.addEventListener(type, handler, options);
+    this.defer(() => target.removeEventListener(type, handler, options));
+  }
+  /** Runs every undo task once; later calls are no-ops. */
+  close() {
+    if (this.closed) return;
+    this.closed = true;
+    for (const task of this.undo.reverse()) {
+      try {
+        task();
+      } catch {
+      }
+    }
+    this.undo.length = 0;
+    this.originalAttributes.clear();
+  }
+};
 
 // src/dom/legend.ts
 function createLegend(context) {
@@ -1061,8 +1929,11 @@ function createLegend(context) {
 }
 
 // src/dom/menu.ts
-var GROUP_ORDER = ["model", "export", "help"];
-function isPrintable(event) {
+var GROUP_ORDER = ["file", "model", "export", "appearance", "help"];
+function isModelerGroup(name) {
+  return name === "model" || name === "export" || name === "help";
+}
+function isPrintable2(event) {
   return event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
 }
 function createMenu(context) {
@@ -1091,8 +1962,9 @@ function createMenu(context) {
   layer.prepend(dropdown);
   const isOpen = () => !dropdown.hidden;
   function entriesOf(name) {
-    const own = groups[name] ?? [];
-    return name === "model" ? [...own, ...context.shellModelEntries()] : own;
+    const own = isModelerGroup(name) ? groups[name] ?? [] : [];
+    const added = context.shellEntries(name);
+    return added.length > 0 ? [...own, ...added] : own;
   }
   function hasEntries() {
     return GROUP_ORDER.some((name) => entriesOf(name).length > 0);
@@ -1146,14 +2018,12 @@ function createMenu(context) {
         }
       };
     }
-    const shortcut = entry.kind === "action" && entry.shortcut ? createElement(ownerDocument, "span", { class: "cd-shell-menu-shortcut" }, entry.shortcut) : void 0;
+    const shortcut = entry.shortcut ? createElement(ownerDocument, "span", { class: "cd-shell-menu-shortcut" }, entry.shortcut) : void 0;
     const element = itemElement("menuitem", entry.label, { icon: entry.icon, end: shortcut, disabled });
     element.dataset.menuId = entry.id;
     element.dataset.menuGroup = group;
-    if (entry.kind === "action") {
-      const keyShortcuts = entry.ariaKeyShortcuts ?? (entry.shortcut ? ariaKeyShortcutsFromLabel(entry.shortcut) : void 0);
-      toggleAttribute(element, "aria-keyshortcuts", keyShortcuts || null);
-    }
+    const keyShortcuts = entry.ariaKeyShortcuts ?? (entry.shortcut ? ariaKeyShortcutsFromLabel(entry.shortcut) : void 0);
+    toggleAttribute(element, "aria-keyshortcuts", keyShortcuts || null);
     if (entry.kind === "dialog") element.setAttribute("aria-haspopup", "dialog");
     if (entry.kind === "action" && entry.danger) element.dataset.danger = "";
     return {
@@ -1338,7 +2208,7 @@ function createMenu(context) {
         event.stopPropagation();
         return;
       default:
-        if (!isPrintable(event)) return;
+        if (!isPrintable2(event)) return;
         typeAhead(event.key);
     }
     consume(event);
@@ -1368,7 +2238,7 @@ function createMenu(context) {
 
 // src/dom/problems.ts
 function createProblemsPill(context) {
-  const { ownerDocument, messages, lang, tooltip, options } = context;
+  const { ownerDocument, messages, lang, tooltip } = context;
   const icon = createElement(ownerDocument, "span", { class: "cd-shell-problems-icon" });
   const text = createElement(ownerDocument, "span", { class: "cd-shell-problems-text" });
   const element = createElement(
@@ -1379,7 +2249,7 @@ function createProblemsPill(context) {
     text
   );
   element.hidden = true;
-  element.addEventListener("click", () => options.onActivate());
+  element.addEventListener("click", () => context.onActivate());
   const detachTooltip = context.showTooltip ? tooltip.attach(element, { label: messages.showProblems }) : void 0;
   let severity;
   return {
@@ -1655,6 +2525,380 @@ function createTooltip({ root, layer, id }) {
   };
 }
 
+// src/dom/web/drop-zone.ts
+var DRAG_EVENTS = ["dragenter", "dragover", "dragleave", "drop"];
+function carriesFiles(transfer) {
+  if (!transfer) return false;
+  if (Array.from(transfer.types ?? []).includes("Files")) return true;
+  return Array.from(transfer.items ?? []).some((item) => item.kind === "file");
+}
+function dragItems(transfer) {
+  const items = Array.from(transfer.items ?? [], (item) => ({ kind: item.kind, type: item.type }));
+  return items.length > 0 ? items : [{ kind: "file", type: "" }];
+}
+function acceptList(accept, lang) {
+  const entries = accept.map((entry) => entry.trim()).filter((entry) => entry !== "");
+  const extensions = entries.filter((entry) => entry.startsWith("."));
+  const listed = extensions.length > 0 ? extensions : entries;
+  let format;
+  try {
+    format = new Intl.ListFormat(lang, { type: "disjunction" });
+  } catch {
+    format = new Intl.ListFormat("en", { type: "disjunction" });
+  }
+  return format.format(listed);
+}
+function createDropZone(context) {
+  const { ownerDocument, layer, messages, lang, options, modalOpen, toast, setState } = context;
+  const chip = createElement(ownerDocument, "span", { class: "cd-shell-drop-zone-chip" });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-drop-zone", "data-chrome": "drop-zone", "aria-hidden": "true" },
+    chip
+  );
+  element.hidden = true;
+  layer.append(element);
+  const view = ownerDocument.defaultView;
+  let depth = 0;
+  let current = null;
+  function verdictFor(items) {
+    return dragVerdict(items, {
+      accept: options.accept,
+      multiple: options.multiple ?? false,
+      dialogOpen: modalOpen()
+    });
+  }
+  function show(verdict) {
+    const next = verdict.state === "none" ? null : verdict.state;
+    if (verdict.state === "over") chip.textContent = messages.dropFile;
+    if (verdict.state === "forbidden") chip.textContent = messages.dropForbidden(verdict.reason);
+    if (next === current) return;
+    current = next;
+    element.hidden = next === null;
+    if (next === null) element.removeAttribute("data-state");
+    else element.setAttribute("data-state", next);
+    setState(next);
+  }
+  function track(transfer) {
+    const verdict = verdictFor(dragItems(transfer));
+    show(verdict);
+    transfer.dropEffect = verdict.state === "forbidden" ? "none" : "copy";
+  }
+  function rejectByDefault(files) {
+    const accepted = acceptList(options.accept, lang);
+    for (const file of files) toast({ status: "danger", text: messages.cannotOpenFile(file.name, accepted) });
+  }
+  function receive(files, verdict) {
+    if (verdict.state === "forbidden" && verdict.reason !== "type") return;
+    const accepted = files.filter((file) => acceptsFile(file, options.accept));
+    const rejected = files.filter((file) => !accepted.includes(file));
+    if (accepted.length > 0) options.onDrop(accepted);
+    if (rejected.length > 0) (options.onReject ?? rejectByDefault)(rejected);
+  }
+  const onDragEvent = (event) => {
+    const transfer = event.dataTransfer;
+    if (!carriesFiles(transfer)) return;
+    event.preventDefault();
+    switch (event.type) {
+      case "dragenter":
+        depth += 1;
+        track(transfer);
+        break;
+      case "dragover":
+        depth = Math.max(depth, 1);
+        track(transfer);
+        break;
+      case "dragleave":
+        depth = Math.max(0, depth - 1);
+        if (depth === 0) show({ state: "none" });
+        break;
+      case "drop": {
+        depth = 0;
+        show({ state: "none" });
+        const files = Array.from(transfer.files ?? []);
+        const items = files.length > 0 ? files.map((file) => ({ kind: "file", type: file.type })) : dragItems(transfer);
+        receive(files, verdictFor(items));
+        break;
+      }
+    }
+  };
+  for (const type of DRAG_EVENTS) view?.addEventListener(type, onDragEvent);
+  return {
+    element,
+    state: () => current,
+    destroy() {
+      for (const type of DRAG_EVENTS) view?.removeEventListener(type, onDragEvent);
+      depth = 0;
+      if (current !== null) {
+        current = null;
+        setState(null);
+      }
+      element.remove();
+    }
+  };
+}
+
+// src/dom/web/empty-state.ts
+var KOMET_SIZE = "64";
+function createEmptyState(context) {
+  const { ownerDocument, messages, options, dropHint, open, titleId, onLeave } = context;
+  const button = (variant, label, run) => {
+    const element2 = createElement(
+      ownerDocument,
+      "button",
+      { type: "button", class: "cd-shell-button", "data-variant": variant },
+      label
+    );
+    element2.addEventListener("click", () => {
+      onLeave();
+      run();
+    });
+    return element2;
+  };
+  const onShowExample = options.onShowExample;
+  const newDiagram = button("primary", messages.newDiagram, () => options.onNewDiagram());
+  const element = createElement(
+    ownerDocument,
+    "section",
+    { class: "cd-shell-empty-state", "data-chrome": "empty-state", "aria-labelledby": titleId },
+    // Dragging the mark would start an image drag that some browsers carry as a file.
+    createElement(ownerDocument, "img", {
+      class: "cd-shell-empty-state-mark",
+      src: options.komet,
+      width: KOMET_SIZE,
+      height: KOMET_SIZE,
+      alt: "",
+      draggable: "false"
+    }),
+    createElement(ownerDocument, "h1", { class: "cd-shell-empty-state-title", id: titleId }, options.title),
+    createElement(ownerDocument, "p", { class: "cd-shell-empty-state-text" }, options.text),
+    createElement(
+      ownerDocument,
+      "div",
+      { class: "cd-shell-empty-state-actions" },
+      newDiagram,
+      onShowExample && button("ghost", messages.showExample, () => onShowExample())
+    ),
+    hintParagraph()
+  );
+  function hintParagraph() {
+    const hasDropHint = dropHint !== void 0 && dropHint !== "";
+    if (!hasDropHint && !open) return void 0;
+    const paragraph = createElement(ownerDocument, "p", { class: "cd-shell-empty-state-hint" });
+    if (hasDropHint) paragraph.append(dropHint);
+    if (!open) return paragraph;
+    const shortcut = open.shortcut?.trim();
+    const link = createElement(
+      ownerDocument,
+      "button",
+      {
+        type: "button",
+        class: "cd-shell-empty-state-open",
+        "aria-keyshortcuts": shortcut ? ariaKeyShortcutsFromLabel(shortcut) : void 0,
+        "aria-haspopup": open.dialog ? "dialog" : void 0
+      },
+      messages.openFileLink
+    );
+    link.addEventListener("click", () => open.onSelect());
+    if (hasDropHint) {
+      paragraph.append(" ", createElement(ownerDocument, "span", { "aria-hidden": "true" }, "\xB7"), " ");
+    }
+    const openItem = createElement(ownerDocument, "span", { class: "cd-shell-empty-state-open-item" }, link);
+    if (shortcut) {
+      openItem.append(
+        " ",
+        createElement(
+          ownerDocument,
+          "kbd",
+          { class: "cd-shell-empty-state-key", "aria-hidden": "true" },
+          shortcut
+        )
+      );
+    }
+    paragraph.append(openItem);
+    return paragraph;
+  }
+  element.hidden = true;
+  return {
+    element,
+    isShown: () => !element.hidden,
+    setShown(shown) {
+      element.hidden = !shown;
+    },
+    focus() {
+      newDiagram.focus({ preventScroll: true });
+    },
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/web/legal.ts
+var MIRAGON_HOME = "https://www.miragon.io/";
+var MIRAGON_IMPRESSUM = "https://www.miragon.io/impressum/";
+var MIRAGON_DATENSCHUTZ = "https://www.miragon.io/datenschutz/";
+function createLegalLine(context) {
+  const { ownerDocument, messages, options } = context;
+  const year = options.year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const newTabId = `${context.idPrefix}-new-tab`;
+  const link = (label, href, lang) => createElement(
+    ownerDocument,
+    "a",
+    { href, lang, target: "_blank", rel: "noopener noreferrer", "aria-describedby": newTabId },
+    label
+  );
+  const separator = () => createElement(ownerDocument, "span", { "aria-hidden": "true" }, "\xB7");
+  const item = (anchor) => createElement(ownerDocument, "span", { class: "cd-shell-legal-item" }, separator(), anchor);
+  const links = [
+    link(messages.copyright(year), MIRAGON_HOME),
+    link("Impressum", MIRAGON_IMPRESSUM, "de"),
+    link("Datenschutz", MIRAGON_DATENSCHUTZ, "de"),
+    ...(options.links ?? []).map((extra) => link(extra.label, extra.href, extra.lang))
+  ];
+  const element = createElement(ownerDocument, "nav", {
+    class: "cd-shell-legal",
+    "data-chrome": "legal",
+    "aria-label": messages.legal
+  });
+  element.append(
+    ...links.map((anchor, index) => index === 0 ? anchor : item(anchor)),
+    createElement(ownerDocument, "span", { id: newTabId, hidden: "" }, messages.opensInNewTab)
+  );
+  return {
+    element,
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/web/menu-groups.ts
+function fileEntry(spec, action) {
+  const common = {
+    id: spec.id,
+    label: spec.label,
+    ...spec.icon ? { icon: spec.icon } : {},
+    ...action.disabled ? { disabled: action.disabled } : {},
+    ...action.shortcut ? { shortcut: action.shortcut } : {},
+    onSelect: () => action.onSelect()
+  };
+  return action.dialog ? { kind: "dialog", ...common } : { kind: "action", ...common };
+}
+function fileMenuEntries(options, messages) {
+  const specs = [
+    { option: "newDiagram", id: "new-diagram", label: messages.newDiagram, icon: "file-plus" },
+    { option: "open", id: "open", label: messages.openFile, icon: "folder-open" },
+    // §5.14 gives "Show example" no icon.
+    { option: "showExample", id: "show-example", label: messages.showExample, icon: void 0 },
+    { option: "import", id: "import", label: messages.importFile, icon: "import" }
+  ];
+  return specs.flatMap((spec) => {
+    const action = options[spec.option];
+    return action ? [fileEntry(spec, action)] : [];
+  });
+}
+function appearanceMenuEntries(appearance, messages) {
+  return [
+    {
+      kind: "radio",
+      id: "appearance",
+      label: messages.appearance,
+      options: [
+        { value: "system", label: messages.appearanceSystem },
+        { value: "light", label: messages.appearanceLight },
+        { value: "dark", label: messages.appearanceDark }
+      ],
+      value: () => appearance.choice(),
+      onSelect: (value) => appearance.setChoice(parseAppearanceChoice(value))
+    }
+  ];
+}
+
+// src/dom/web/primary.ts
+var COLLAPSED_ATTRIBUTE = "data-collapsed";
+function createPrimaryAction(context) {
+  const { ownerDocument, messages, tooltip, options } = context;
+  const label = options.label ?? messages.share;
+  const labelElement = createElement(ownerDocument, "span", { class: "cd-shell-primary-label" }, label);
+  const element = createElement(
+    ownerDocument,
+    "button",
+    {
+      type: "button",
+      class: "cd-shell-primary cd-shell-button",
+      "data-variant": "primary",
+      "data-chrome": "primary",
+      "aria-label": label
+    },
+    iconElement(options.icon ?? "share-2"),
+    labelElement
+  );
+  let collapsed = false;
+  let disabled = false;
+  let labelledWidth;
+  function readDisabled() {
+    disabled = options.disabled?.() ?? false;
+    toggleAttribute(element, "aria-disabled", disabled ? "true" : null);
+  }
+  function showCollapsed(state) {
+    labelElement.hidden = state;
+    toggleAttribute(element, COLLAPSED_ATTRIBUTE, state ? "" : null);
+  }
+  function measureLabelledWidth() {
+    if (!collapsed) return element.offsetWidth;
+    showCollapsed(false);
+    const width = element.offsetWidth;
+    showCollapsed(true);
+    return width;
+  }
+  function isEngaged() {
+    if (ownerDocument.activeElement === element) return true;
+    try {
+      return element.matches(":hover");
+    } catch {
+      return false;
+    }
+  }
+  const onClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    options.onSelect();
+  };
+  element.addEventListener("click", onClick);
+  const detachTooltip = tooltip.attach(element, () => collapsed ? { label } : null);
+  readDisabled();
+  return {
+    element,
+    isCollapsed: () => collapsed,
+    refresh() {
+      readDisabled();
+      labelledWidth = void 0;
+    },
+    widths() {
+      if (!collapsed || labelledWidth === void 0) {
+        const measured = measureLabelledWidth();
+        if (measured > 0) labelledWidth = measured;
+      }
+      return { withLabel: labelledWidth ?? 0, iconOnly: SHELL.row };
+    },
+    setCollapsed(next) {
+      if (next === collapsed) return;
+      collapsed = next;
+      showCollapsed(next);
+      if (!next && isEngaged()) tooltip.hide();
+    },
+    destroy() {
+      detachTooltip();
+      element.removeEventListener("click", onClick);
+      element.remove();
+    }
+  };
+}
+
 // src/dom/zoom-panel.ts
 function createZoomPanel(context) {
   const { ownerDocument, messages, lang, platform, tooltip } = context;
@@ -1772,6 +3016,16 @@ function nextMountIndex() {
   return index;
 }
 var DEFAULT_THEMES = ["light"];
+var LEGAL_HEIGHT_PROPERTY = "--modeler-shell-legal-height";
+var INERT_TOAST = Object.freeze({ dismiss() {
+} });
+function visibleBoxIn(element, root) {
+  if (!element || element.hidden || !element.isConnected) return void 0;
+  if (typeof element.checkVisibility === "function" && !element.checkVisibility({ visibilityProperty: true }))
+    return void 0;
+  const box = boxRelativeTo(element, root);
+  return box.width > 0 && box.height > 0 ? box : void 0;
+}
 function languageOf(root, host, requested) {
   if (requested) return requested;
   const declared = host === "embedded" ? root.getAttribute("lang") : root.closest("[lang]")?.getAttribute("lang");
@@ -1800,6 +3054,7 @@ function renderShell(root, options, themes, ledger) {
   const platform = options.platform ?? detectPlatform(globalThis.navigator);
   const lang = languageOf(root, host, options.lang);
   const keyScope = options.keyScope ?? (host === "embedded" ? "root" : "document");
+  const web = host === "web";
   ledger.addClass(root, "cd-shell");
   ledger.attribute(root, "data-cd-shell-host", host);
   ledger.attribute(root, "data-palette", "top");
@@ -1812,6 +3067,9 @@ function renderShell(root, options, themes, ledger) {
   const setState = (name, value) => {
     if (!ledger.isClosed) ledger.attribute(root, name, value);
   };
+  const appearance = web ? connectWebAppearance({ ownerDocument, themes, options: options.appearance }) : void 0;
+  if (appearance) ledger.defer(() => appearance.destroy());
+  const darkCapable = themes.includes("dark");
   const layer = createElement(ownerDocument, "div", { class: "cd-shell-layer" });
   ledger.defer(() => layer.remove());
   const tooltip = createTooltip({ root, layer, id: `cd-shell-tooltip-${index}` });
@@ -1843,6 +3101,14 @@ function renderShell(root, options, themes, ledger) {
     keepEnabledWhenReadOnly: true
   } : void 0;
   const shellModelEntries = legendEntry ? [legendEntry] : [];
+  const fileEntries = web && options.file ? fileMenuEntries(options.file, messages) : [];
+  const appearanceEntries = appearance && darkCapable ? appearanceMenuEntries(appearance, messages) : [];
+  const shellEntries = (group) => {
+    if (group === "file") return fileEntries;
+    if (group === "model") return shellModelEntries;
+    if (group === "appearance") return appearanceEntries;
+    return [];
+  };
   const menu = createMenu({
     root,
     layer,
@@ -1850,55 +3116,133 @@ function renderShell(root, options, themes, ledger) {
     messages,
     tooltip,
     groups: options.menu ?? {},
-    shellModelEntries: () => shellModelEntries,
+    shellEntries,
     isReadOnly: () => readOnly
   });
   ledger.defer(() => menu.destroy());
   ledger.defer(tooltip.attach(menu.trigger, () => menu.isOpen() ? null : { label: messages.menu }));
+  const primary = web && options.primary ? createPrimaryAction({ ownerDocument, messages, tooltip, options: options.primary }) : void 0;
+  if (primary) ledger.defer(() => primary.destroy());
   const canvas = options.canvas ?? createElement(ownerDocument, "div");
   ledger.addClass(canvas, "cd-shell-canvas");
+  if (web && !canvas.hasAttribute("role")) ledger.attribute(canvas, "role", "main");
   if (!options.canvas) ledger.defer(() => canvas.remove());
+  function focusCanvasOrTrigger() {
+    const took = (target) => {
+      target?.focus({ preventScroll: true });
+      return target !== null && target !== void 0 && ownerDocument.activeElement === target;
+    };
+    if (emptyState?.isShown()) {
+      emptyState.focus();
+      if (emptyState.element.contains(ownerDocument.activeElement)) return;
+    }
+    if (took(canvas.querySelector("svg[tabindex]"))) return;
+    if (!menu.trigger.hidden) took(menu.trigger);
+  }
   function moveFocusOutOf(island) {
-    if (!island.contains(ownerDocument.activeElement)) return;
-    const canvasTarget = canvas.querySelector("svg[tabindex]");
-    canvasTarget?.focus({ preventScroll: true });
-    if (canvasTarget && ownerDocument.activeElement === canvasTarget) return;
-    if (!menu.trigger.hidden) menu.trigger.focus({ preventScroll: true });
+    if (island.contains(ownerDocument.activeElement)) focusCanvasOrTrigger();
   }
   const status = createStatusBox(ownerDocument);
   ledger.defer(() => status.destroy());
   const hint = options.emptyHint ? createEmptyHint(ownerDocument, messages, options.emptyHint) : void 0;
   if (hint) ledger.defer(() => hint.destroy());
+  const emptyState = web && options.emptyState ? createEmptyState({
+    ownerDocument,
+    messages,
+    options: options.emptyState,
+    dropHint: options.dropZone ? options.emptyState.dropHint ?? messages.dropHint : void 0,
+    open: options.file?.open,
+    titleId: `cd-shell-empty-state-title-${index}`,
+    onLeave: () => setEmptyStateShown(false)
+  }) : void 0;
+  if (emptyState) ledger.defer(() => emptyState.destroy());
   const inspector = options.inspector ? createInspector(ownerDocument, options.inspector, (open) => {
     setState("data-inspector", open ? "open" : null);
+    updateBottomRow();
     placeHint();
   }) : void 0;
   if (inspector) ledger.defer(() => inspector.destroy());
-  const pill = options.problems ? createProblemsPill({
+  const problemsOptions = options.problems;
+  let popover;
+  const pill = problemsOptions ? createProblemsPill({
     ownerDocument,
     messages,
     lang,
     tooltip,
     showTooltip: host === "ide",
-    options: options.problems
+    onActivate() {
+      if (popover) popover.toggle();
+      else problemsOptions.onActivate?.();
+    }
   }) : void 0;
   if (pill) ledger.defer(() => pill.destroy());
+  if (pill && (web || host === "embedded" && !problemsOptions?.onActivate)) {
+    const created = createProblemsPopover({
+      ownerDocument,
+      root,
+      layer,
+      pill: pill.element,
+      id: `cd-shell-problems-${index}`,
+      titleId: `cd-shell-problems-title-${index}`,
+      messages,
+      onSelectItem: problemsOptions?.onSelectItem
+    });
+    popover = created;
+    ledger.defer(() => created.destroy());
+  }
+  const legal = web ? createLegalLine({
+    ownerDocument,
+    messages,
+    options: options.legal ?? {},
+    idPrefix: `cd-shell-legal-${index}`
+  }) : void 0;
+  if (legal) ledger.defer(() => legal.destroy());
   const zoomPanel = createZoomPanel({ ownerDocument, messages, lang, platform, tooltip });
   ledger.defer(() => zoomPanel.destroy());
-  root.prepend(menu.trigger, canvas);
+  const toaster = host === "ide" ? void 0 : createToaster({
+    ownerDocument,
+    host,
+    messages,
+    idPrefix: `cd-shell-toast-${index}`,
+    focusFallback: focusCanvasOrTrigger,
+    onChange: () => updateBottomRow()
+  });
+  if (toaster) ledger.defer(() => toaster.destroy());
+  const defined = (element) => element !== void 0;
+  root.prepend(...[menu.trigger, primary?.element, canvas].filter(defined));
   root.append(
     ...[
       status.element,
       hint?.element,
+      emptyState?.element,
       inspector?.element,
       pill?.element,
       legend?.element,
+      legal?.element,
       zoomPanel.element
-    ].filter((element) => element !== void 0),
-    layer
+    ].filter(defined),
+    layer,
+    ...[toaster?.announcer, toaster?.element].filter(defined)
   );
+  function showToast(request) {
+    return ledger.isClosed || !toaster ? INERT_TOAST : toaster.show(request);
+  }
+  const dropZone = web && options.dropZone ? createDropZone({
+    ownerDocument,
+    layer,
+    messages,
+    lang,
+    options: options.dropZone,
+    modalOpen: () => isModalOpen(ownerDocument),
+    toast: showToast,
+    setState: (state) => setState("data-drop", state)
+  }) : void 0;
+  if (dropZone) ledger.defer(() => dropZone.destroy());
   let palette;
   let paletteRow = "top";
+  let zoomRaised = false;
+  let legalHeight = LEGAL_LINE_HEIGHT;
+  if (legal) ledger.defer(() => root.style.removeProperty(LEGAL_HEIGHT_PROPERTY));
   function containerSize() {
     return { width: root.clientWidth, height: root.clientHeight };
   }
@@ -1918,6 +3262,10 @@ function renderShell(root, options, themes, ledger) {
       paletteRow,
       problemsVisible: pill?.isShown() ?? false
     };
+    if (web) {
+      layout.zoomRaised = zoomRaised;
+      layout.legalHeight = legalHeight;
+    }
     if (legend?.isOpen()) layout.legendWidth = legend.element.getBoundingClientRect().width;
     if (inspector?.isOpen()) {
       layout.inspector = container.width > SHELL.narrow ? {} : { sheetTop: boxRelativeTo(inspector.element, root).y };
@@ -1931,18 +3279,76 @@ function renderShell(root, options, themes, ledger) {
     if (ledger.isClosed) return;
     const size = containerSize();
     if (size.width === 0 || size.height === 0) return;
-    paletteRow = decidePaletteRow({
+    const topRow = decideTopRow({
       containerWidth: size.width,
       paletteWidth: paletteWidth(),
-      menuRight: menuRight()
+      menuRight: menuRight(),
+      primary: primary?.widths()
     });
+    paletteRow = topRow.paletteRow;
     setState("data-palette", paletteRow);
+    if (primary) {
+      const collapsed = topRow.primaryLabel === "collapsed";
+      primary.setCollapsed(collapsed);
+      setState("data-primary", collapsed ? "collapsed" : null);
+    }
     if (legend && !legend.isStarted()) legend.start(options.legend?.open ?? legendStartsOpen(size.height));
+    updateBottomRow();
     placeHint();
   }
+  function updateBottomRow() {
+    if (ledger.isClosed) return;
+    const size = containerSize();
+    if (size.width === 0 || size.height === 0) return;
+    if (legal) {
+      const legalBox = visibleBoxIn(legal.element, root);
+      const height = legalLineHeight(legalBox?.height);
+      if (height !== legalHeight || !root.style.getPropertyValue(LEGAL_HEIGHT_PROPERTY)) {
+        legalHeight = height;
+        root.style.setProperty(LEGAL_HEIGHT_PROPERTY, `${height}px`);
+      }
+      zoomRaised = zoomRowRaised({
+        containerWidth: size.width,
+        legalRight: legalBox && legalBox.x + legalBox.width,
+        zoomWidth: visibleBoxIn(zoomPanel.element, root)?.width
+      });
+      setState("data-zoom-row", zoomRaised ? "raised" : null);
+    }
+    if (toaster) {
+      const obstacles = [zoomPanel.element, legal?.element, pill?.element].flatMap(
+        (element) => {
+          const box = visibleBoxIn(element, root);
+          return box ? [{ left: box.x, right: box.x + box.width, top: size.height - box.y }] : [];
+        }
+      );
+      toaster.setBottom(
+        toastStackBottom({ containerWidth: size.width, obstacles, cardWidth: toaster.widestCard() })
+      );
+    }
+  }
+  function setEmptyStateShown(shown) {
+    if (ledger.isClosed || !emptyState || emptyState.isShown() === shown) return;
+    const active = ownerDocument.activeElement;
+    const hadFocus = emptyState.element.contains(active);
+    const workHadFocus = shown && active !== null && root.contains(active) && ![emptyState.element, legal?.element, toaster?.element].some((kept) => kept?.contains(active));
+    emptyState.setShown(shown);
+    setState("data-empty-state", shown ? "shown" : null);
+    ledger.attribute(canvas, "inert", shown ? "" : null);
+    if (shown) {
+      menu.close();
+      popover?.close();
+      tooltip.hide();
+      if (workHadFocus) emptyState.focus();
+    } else if (hadFocus) {
+      focusCanvasOrTrigger();
+    }
+    updateLayout();
+  }
   const ResizeObserverClass = globalThis.ResizeObserver;
   const resizeObserver = ResizeObserverClass ? new ResizeObserverClass(() => updateLayout()) : void 0;
   resizeObserver?.observe(root);
+  if (primary) resizeObserver?.observe(primary.element);
+  if (legal) resizeObserver?.observe(legal.element);
   ledger.defer(() => resizeObserver?.disconnect());
   if (legend && options.legend?.open !== void 0) legend.start(options.legend.open);
   updateLayout();
@@ -1951,12 +3357,16 @@ function renderShell(root, options, themes, ledger) {
     host,
     dialogScope: keyTarget,
     menuOpen: () => menu.isOpen(),
+    startScreen: () => emptyState?.isShown() ?? false,
     closeMenu() {
       const active = ownerDocument.activeElement;
       menu.close({ restoreFocus: active === menu.trigger || menu.dropdown.contains(active) });
     },
     hideTooltip: () => tooltip.hide(),
-    run: (key) => zoomPanel.run(key)
+    // Behind the start screen the keys reach the browser instead: there is no diagram to zoom.
+    run: (key) => {
+      if (!emptyState?.isShown()) zoomPanel.run(key);
+    }
   });
   keyTarget.addEventListener("keydown", onKeydown);
   ledger.defer(() => keyTarget.removeEventListener("keydown", onKeydown));
@@ -2008,6 +3418,21 @@ function renderShell(root, options, themes, ledger) {
       if (!ledger.isClosed) legend.toggle();
     }
   };
+  const primaryHandle = primary && {
+    element: primary.element,
+    isCollapsed: () => primary.isCollapsed(),
+    refresh: () => {
+      if (!ledger.isClosed) primary.refresh();
+    }
+  };
+  const appearanceHandle = appearance && darkCapable ? {
+    choice: () => appearance.choice(),
+    setChoice: (choice) => {
+      if (ledger.isClosed) return;
+      appearance.setChoice(choice);
+      menu.refresh();
+    }
+  } : void 0;
   const inspectorHandle = inspector && {
     element: inspector.element,
     isOpen: () => inspector.isOpen(),
@@ -2031,6 +3456,8 @@ function renderShell(root, options, themes, ledger) {
     tooltip: tooltipHandle,
     legend: legendHandle,
     inspector: inspectorHandle,
+    primary: primaryHandle,
+    appearance: appearanceHandle,
     setZoomTarget(target) {
       if (!ledger.isClosed) zoomPanel.setTarget(target);
     },
@@ -2059,8 +3486,15 @@ function renderShell(root, options, themes, ledger) {
     },
     setProblems(summary) {
       if (ledger.isClosed || !pill) return;
+      const listHadFocus = popover?.element.contains(ownerDocument.activeElement) ?? false;
       pill.set(summary);
       setState("data-problems", pill.isShown() ? "shown" : null);
+      popover?.setItems(summary.items ?? []);
+      if (!pill.isShown() && popover?.isOpen()) {
+        popover.close();
+        if (listHadFocus) focusCanvasOrTrigger();
+      }
+      updateBottomRow();
       placeHint();
     },
     setStatus(next, statusOptions) {
@@ -2090,6 +3524,9 @@ function renderShell(root, options, themes, ledger) {
       applyReadOnly();
     },
     isReadOnly: () => readOnly,
+    setEmptyState: setEmptyStateShown,
+    isEmptyStateShown: () => emptyState?.isShown() ?? false,
+    toast: showToast,
     destroy() {
       ledger.close();
     }
@@ -2116,21 +3553,27 @@ function carryOwnMode(root, theme, ledger) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  APPEARANCE_STORAGE_KEY,
   CHROME_ISLANDS,
   FIT_ANIMATION_MS,
   ICONS,
   INVALID_STATUS_DELAY_MS,
+  LEGAL_LINE_HEIGHT,
   MAX_FIT_ZOOM,
+  MAX_TOASTS,
   PALETTE_CLEARANCE,
   PALETTE_TOOL_ICON,
   REDUCED_MOTION_CLASS,
   SHELL,
   SHELL_TOKENS,
   TEXT_FIELD_SELECTOR,
+  TOAST_DURATION_MS,
+  TOAST_MAX_WIDTH,
   TOOLTIP_DELAY_MS,
   VIEW_TOLERANCE,
   ZOOM_MAX,
   ZOOM_MIN,
+  acceptsFile,
   appearanceAttributes,
   appearanceFromBodyClasses,
   appearanceFromColorThemeKind,
@@ -2138,10 +3581,14 @@ function carryOwnMode(root, theme, ledger) {
   ariaKeyShortcutsFromLabel,
   canZoomIn,
   canZoomOut,
+  commandKeyLabel,
   decideKey,
   decidePaletteRow,
+  decideTopRow,
   defaultMessages,
   detectPlatform,
+  documentMode,
+  dragVerdict,
   easeStandard,
   fitInsets,
   fitViewbox,
@@ -2152,10 +3599,13 @@ function carryOwnMode(root, theme, ledger) {
   iconMarkup,
   interpolateViewbox,
   isUndoRedoKey,
+  legalLineHeight,
   legendStartsOpen,
   matchChromeKey,
   mountShell,
+  parseAppearanceChoice,
   placeTooltip,
+  problemSummary,
   reducedMotionFromBodyClasses,
   requestedAppearance,
   resolveAppearance,
@@ -2163,7 +3613,14 @@ function carryOwnMode(root, theme, ledger) {
   sameView,
   shellSizesFromTokens,
   shortcutLabel,
-  zoomReadout
+  toastLifetime,
+  toastStackBottom,
+  toastStackWidth,
+  toastToEvict,
+  webHeadMarkup,
+  webModeScript,
+  zoomReadout,
+  zoomRowRaised
 });
 /*! @miragon/modeler-shell icon geometry
  * Lucide (lucide-static 1.59.0) @license ISC