@miragon/modeler-shell 0.1.0 → 0.2.0

package/dist/{chunk-6LQOFACK.js → chunk-66HCSJNY.js}

@@ -1,24 +1,37 @@
 import {
+  APPEARANCE_STORAGE_KEY,
+  LEGAL_LINE_HEIGHT,
+  MAX_TOASTS,
+  REDUCED_MOTION_CLASS,
   SHELL,
   TEXT_FIELD_SELECTOR,
   TOOLTIP_DELAY_MS,
+  acceptsFile,
   ariaKeyShortcuts,
   ariaKeyShortcutsFromLabel,
   canZoomIn,
   canZoomOut,
   decideKey,
-  decidePaletteRow,
+  decideTopRow,
   detectPlatform,
+  documentMode,
+  dragVerdict,
   fitInsets,
   formatNumber,
   formatPercent,
+  legalLineHeight,
   legendStartsOpen,
   matchChromeKey,
+  parseAppearanceChoice,
   placeTooltip,
   resolveMessages,
   shortcutLabel,
-  zoomReadout
-} from "./chunk-5JSZ4VGA.js";
+  toastLifetime,
+  toastStackBottom,
+  toastToEvict,
+  zoomReadout,
+  zoomRowRaised
+} from "./chunk-OADW3GPA.js";
 
 // src/dom/icons.ts
 var ICONS = {
@@ -288,6 +301,636 @@ function hasVisibleFocus(element) {
   }
 }
 
+// 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)'
+    );
+  }
+  const html = ownerDocument.documentElement;
+  const view = ownerDocument.defaultView;
+  const cleanups = [];
+  const contrast = typeof view?.matchMedia === "function" ? view.matchMedia(CONTRAST_QUERY) : void 0;
+  if (contrast) {
+    const mirrorContrast = () => toggleAttribute(html, "data-cd-kontrast", contrast.matches && "hoch");
+    mirrorContrast();
+    cleanups.push(onMediaChange(contrast, mirrorContrast));
+  }
+  function destroy() {
+    for (const cleanup of cleanups.splice(0)) cleanup();
+  }
+  if (!darkCapable || !options) {
+    return { choice: () => "system", setChoice() {
+    }, destroy };
+  }
+  const { themeColors } = options;
+  function storage() {
+    if (options?.storage) return options.storage;
+    try {
+      return globalThis.localStorage;
+    } catch {
+      return void 0;
+    }
+  }
+  function readStored() {
+    try {
+      return parseAppearanceChoice(storage()?.getItem(APPEARANCE_STORAGE_KEY));
+    } catch {
+      return "system";
+    }
+  }
+  function store(choice) {
+    try {
+      const target = storage();
+      if (choice === "system") target?.removeItem(APPEARANCE_STORAGE_KEY);
+      else target?.setItem(APPEARANCE_STORAGE_KEY, choice);
+    } catch {
+    }
+  }
+  function nextFrame(callback) {
+    if (view && typeof view.requestAnimationFrame === "function") {
+      const frame = view.requestAnimationFrame(() => callback());
+      return () => view.cancelAnimationFrame(frame);
+    }
+    const timer = setTimeout(callback, 16);
+    return () => clearTimeout(timer);
+  }
+  let cancelTransitionFrame;
+  function allowTransitions() {
+    cancelTransitionFrame?.();
+    cancelTransitionFrame = void 0;
+    html.classList.remove(NO_TRANSITION_CLASS);
+  }
+  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/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;
@@ -367,6 +1010,9 @@ function isModal(element) {
 function openDialogs(scope) {
   return [...scope.querySelectorAll('[role="dialog"], [role="alertdialog"], dialog')].filter(isShown);
 }
+function isModalOpen(scope) {
+  return openDialogs(scope).some(isModal);
+}
 function createKeyListener(context) {
   return (event) => {
     if (event.key === "Escape") context.hideTooltip();
@@ -377,7 +1023,8 @@ function createKeyListener(context) {
       menuOpen: context.menuOpen(),
       dialogOpen: dialogs.length > 0,
       modalOpen: dialogs.some(isModal),
-      defaultPrevented: event.defaultPrevented
+      defaultPrevented: event.defaultPrevented,
+      startScreen: context.startScreen?.() ?? false
     });
     if (decision.preventDefault) event.preventDefault();
     if (decision.stopPropagation) event.stopPropagation();
@@ -505,8 +1152,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) {
@@ -535,8 +1185,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);
@@ -590,14 +1241,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 {
@@ -782,7 +1431,7 @@ function createMenu(context) {
         event.stopPropagation();
         return;
       default:
-        if (!isPrintable(event)) return;
+        if (!isPrintable2(event)) return;
         typeAhead(event.key);
     }
     consume(event);
@@ -812,7 +1461,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(
@@ -823,7 +1472,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 {
@@ -1099,6 +1748,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;
@@ -1216,6 +2239,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");
@@ -1244,6 +2277,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");
@@ -1256,6 +2290,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}` });
@@ -1287,6 +2324,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,
@@ -1294,55 +2339,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 };
   }
@@ -1362,6 +2485,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 };
@@ -1375,18 +2502,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();
@@ -1395,12 +2580,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));
@@ -1452,6 +2641,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(),
@@ -1475,6 +2679,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);
     },
@@ -1503,8 +2709,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) {
@@ -1534,6 +2747,9 @@ function renderShell(root, options, themes, ledger) {
       applyReadOnly();
     },
     isReadOnly: () => readOnly,
+    setEmptyState: setEmptyStateShown,
+    isEmptyStateShown: () => emptyState?.isShown() ?? false,
+    toast: showToast,
     destroy() {
       ledger.close();
     }
@@ -1573,4 +2789,4 @@ export {
  * minus, plus, triangle-alert (alert-triangle) and x. Feather @license MIT
  * Copyright (c) 2013-present Cole Bemis
  * Full notices: THIRD_PARTY_NOTICES.md of @miragon/modeler-shell */
-//# sourceMappingURL=chunk-6LQOFACK.js.map
+//# sourceMappingURL=chunk-66HCSJNY.js.map