@miragon/modeler-shell 0.0.0-stage → 0.1.0

package/dist/chunk-6LQOFACK.js

@@ -0,0 +1,1576 @@
+import {
+  SHELL,
+  TEXT_FIELD_SELECTOR,
+  TOOLTIP_DELAY_MS,
+  ariaKeyShortcuts,
+  ariaKeyShortcutsFromLabel,
+  canZoomIn,
+  canZoomOut,
+  decideKey,
+  decidePaletteRow,
+  detectPlatform,
+  fitInsets,
+  formatNumber,
+  formatPercent,
+  legendStartsOpen,
+  matchChromeKey,
+  placeTooltip,
+  resolveMessages,
+  shortcutLabel,
+  zoomReadout
+} from "./chunk-5JSZ4VGA.js";
+
+// src/dom/icons.ts
+var ICONS = {
+  menu: [
+    ["path", { d: "M4 5h16" }],
+    ["path", { d: "M4 12h16" }],
+    ["path", { d: "M4 19h16" }]
+  ],
+  minus: [["path", { d: "M5 12h14" }]],
+  plus: [
+    ["path", { d: "M5 12h14" }],
+    ["path", { d: "M12 5v14" }]
+  ],
+  maximize: [
+    ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }],
+    ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }],
+    ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }],
+    ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" }]
+  ],
+  check: [["path", { d: "M20 6 9 17l-5-5" }]],
+  x: [
+    ["path", { d: "M18 6 6 18" }],
+    ["path", { d: "m6 6 12 12" }]
+  ],
+  "file-plus": [
+    [
+      "path",
+      {
+        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+      }
+    ],
+    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }],
+    ["path", { d: "M9 15h6" }],
+    ["path", { d: "M12 18v-6" }]
+  ],
+  "folder-open": [
+    [
+      "path",
+      {
+        d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"
+      }
+    ]
+  ],
+  import: [
+    ["path", { d: "M12 3v12" }],
+    ["path", { d: "m8 11 4 4 4-4" }],
+    ["path", { d: "M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" }]
+  ],
+  "file-image": [
+    [
+      "path",
+      {
+        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+      }
+    ],
+    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }],
+    ["circle", { cx: "10", cy: "12", r: "2" }],
+    ["path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" }]
+  ],
+  "file-code-corner": [
+    [
+      "path",
+      {
+        d: "M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35"
+      }
+    ],
+    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }],
+    ["path", { d: "m5 16-3 3 3 3" }],
+    ["path", { d: "m9 22 3-3-3-3" }]
+  ],
+  keyboard: [
+    ["path", { d: "M10 8h.01" }],
+    ["path", { d: "M12 12h.01" }],
+    ["path", { d: "M14 8h.01" }],
+    ["path", { d: "M16 12h.01" }],
+    ["path", { d: "M18 8h.01" }],
+    ["path", { d: "M6 8h.01" }],
+    ["path", { d: "M7 16h10" }],
+    ["path", { d: "M8 12h.01" }],
+    ["rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }]
+  ],
+  "share-2": [
+    ["circle", { cx: "18", cy: "5", r: "3" }],
+    ["circle", { cx: "6", cy: "12", r: "3" }],
+    ["circle", { cx: "18", cy: "19", r: "3" }],
+    ["line", { x1: "8.59", x2: "15.42", y1: "13.51", y2: "17.49" }],
+    ["line", { x1: "15.41", x2: "8.59", y1: "6.51", y2: "10.49" }]
+  ],
+  "circle-x": [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["path", { d: "m15 9-6 6" }],
+    ["path", { d: "m9 9 6 6" }]
+  ],
+  "triangle-alert": [
+    ["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }],
+    ["path", { d: "M12 9v4" }],
+    ["path", { d: "M12 17h.01" }]
+  ],
+  "square-dashed-mouse-pointer": [
+    [
+      "path",
+      {
+        d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"
+      }
+    ],
+    ["path", { d: "M5 3a2 2 0 0 0-2 2" }],
+    ["path", { d: "M19 3a2 2 0 0 1 2 2" }],
+    ["path", { d: "M5 21a2 2 0 0 1-2-2" }],
+    ["path", { d: "M9 3h1" }],
+    ["path", { d: "M9 21h2" }],
+    ["path", { d: "M14 3h1" }],
+    ["path", { d: "M3 9v1" }],
+    ["path", { d: "M21 9v2" }],
+    ["path", { d: "M3 14v1" }]
+  ],
+  hand: [
+    ["path", { d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" }],
+    ["path", { d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" }],
+    ["path", { d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" }],
+    [
+      "path",
+      {
+        d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"
+      }
+    ]
+  ],
+  "line-segment": [
+    ["circle", { cx: "19", cy: "5", r: "2" }],
+    ["circle", { cx: "5", cy: "19", r: "2" }],
+    ["path", { d: "M6.5 17.5 17.5 6.5" }]
+  ],
+  "unfold-horizontal": [
+    ["path", { d: "M16 12h6" }],
+    ["path", { d: "M8 12H2" }],
+    ["path", { d: "M12 2v2" }],
+    ["path", { d: "M12 8v2" }],
+    ["path", { d: "M12 14v2" }],
+    ["path", { d: "M12 20v2" }],
+    ["path", { d: "m19 15 3-3-3-3" }],
+    ["path", { d: "m5 9-3 3 3 3" }]
+  ],
+  workflow: [
+    ["rect", { width: "8", height: "8", x: "3", y: "3", rx: "2" }],
+    ["path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }],
+    ["rect", { width: "8", height: "8", x: "13", y: "13", rx: "2" }]
+  ]
+};
+var PALETTE_TOOL_ICON = { size: 20, strokeWidth: 2 };
+var DEFAULT_SIZE = 16;
+var DEFAULT_STROKE_WIDTH = 2.5;
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var ICON_ELEMENTS = /* @__PURE__ */ new Set([
+  "path",
+  "circle",
+  "ellipse",
+  "line",
+  "polyline",
+  "polygon",
+  "rect"
+]);
+var GEOMETRY_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "d",
+  "cx",
+  "cy",
+  "r",
+  "rx",
+  "ry",
+  "x",
+  "y",
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "width",
+  "height",
+  "points"
+]);
+function positiveOr(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function iconNodeOf(icon) {
+  if (typeof icon !== "string") return icon;
+  return Object.prototype.hasOwnProperty.call(ICONS, icon) ? ICONS[icon] : [];
+}
+function sanitize(icon, options = {}) {
+  const size = String(positiveOr(options.size, DEFAULT_SIZE));
+  const root = [];
+  if (options.className) root.push(["class", options.className]);
+  root.push(
+    ["width", size],
+    ["height", size],
+    ["viewBox", "0 0 24 24"],
+    ["fill", "none"],
+    ["stroke", "currentColor"],
+    ["stroke-width", String(positiveOr(options.strokeWidth, DEFAULT_STROKE_WIDTH))],
+    ["stroke-linecap", "round"],
+    ["stroke-linejoin", "round"],
+    ["aria-hidden", "true"],
+    ["focusable", "false"]
+  );
+  const children = [];
+  for (const node of iconNodeOf(icon)) {
+    const [tag, attributes] = node;
+    if (!ICON_ELEMENTS.has(tag)) continue;
+    const kept = Object.entries(attributes).filter(([name]) => GEOMETRY_ATTRIBUTES.has(name)).map(([name, value]) => [name, String(value)]);
+    children.push([tag, kept]);
+  }
+  return { root, children };
+}
+function escapeAttribute(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 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/element.ts
+function createElement(ownerDocument, tag, attributes = {}, ...children) {
+  const element = ownerDocument.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value !== void 0) element.setAttribute(name, value);
+  }
+  for (const child of children) {
+    if (child === void 0 || child === null || child === false) continue;
+    element.append(child);
+  }
+  return element;
+}
+function toggleAttribute(element, name, value) {
+  if (value === null || value === false) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+}
+function boxRelativeTo(element, root) {
+  const box = element.getBoundingClientRect();
+  const origin = root.getBoundingClientRect();
+  return {
+    x: box.left - origin.left - root.clientLeft,
+    y: box.top - origin.top - root.clientTop,
+    width: box.width,
+    height: box.height
+  };
+}
+function accessibleName(control) {
+  return (control.getAttribute("aria-label") ?? control.textContent ?? "").trim();
+}
+function hasVisibleFocus(element) {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+
+// src/dom/hint.ts
+function createEmptyHint(ownerDocument, messages, options) {
+  const { onInsertExample } = options;
+  const action = onInsertExample ? createElement(
+    ownerDocument,
+    "button",
+    { type: "button", class: "cd-shell-hint-action" },
+    messages.insertExample
+  ) : void 0;
+  action?.addEventListener("click", () => onInsertExample?.());
+  const element = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-hint" },
+    createElement(ownerDocument, "p", { class: "cd-shell-hint-text" }, messages.emptyHint),
+    action
+  );
+  element.hidden = true;
+  return {
+    element,
+    isShown: () => !element.hidden,
+    setShown(shown) {
+      element.hidden = !shown;
+    },
+    place({ top, right, bottom, left }) {
+      element.style.inset = `${top}px ${right}px ${bottom}px ${left}px`;
+    },
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/inspector.ts
+function createInspector(ownerDocument, options, onChange) {
+  const element = createElement(ownerDocument, "aside", {
+    class: "cd-shell-inspector",
+    "data-chrome": "inspector",
+    "aria-label": options.label
+  });
+  element.hidden = true;
+  function setOpen(open) {
+    if (open === !element.hidden) return;
+    element.hidden = !open;
+    onChange(open);
+  }
+  return {
+    element,
+    isOpen: () => !element.hidden,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    destroy() {
+      element.remove();
+    }
+  };
+}
+
+// src/dom/keys.ts
+function isTextField(target) {
+  if (!target || typeof target.closest !== "function") return false;
+  const element = target;
+  return element.isContentEditable === true || element.closest(TEXT_FIELD_SELECTOR) !== null;
+}
+function isShown(element) {
+  if (element.localName === "dialog" && !element.hasAttribute("open")) return false;
+  if (element.closest("[hidden]")) return false;
+  return typeof element.checkVisibility !== "function" || element.checkVisibility({ visibilityProperty: true });
+}
+function isModal(element) {
+  if (element.getAttribute("aria-modal") === "true") return true;
+  try {
+    return element.matches(":modal");
+  } catch {
+    return false;
+  }
+}
+function openDialogs(scope) {
+  return [...scope.querySelectorAll('[role="dialog"], [role="alertdialog"], dialog')].filter(isShown);
+}
+function createKeyListener(context) {
+  return (event) => {
+    if (event.key === "Escape") context.hideTooltip();
+    const dialogs = openDialogs(context.dialogScope);
+    const decision = decideKey(event, {
+      host: context.host,
+      inTextField: isTextField(event.target),
+      menuOpen: context.menuOpen(),
+      dialogOpen: dialogs.length > 0,
+      modalOpen: dialogs.some(isModal),
+      defaultPrevented: event.defaultPrevented
+    });
+    if (decision.preventDefault) event.preventDefault();
+    if (decision.stopPropagation) event.stopPropagation();
+    if (decision.action === "closeMenu") context.closeMenu();
+    else if (decision.action) context.run(decision.action);
+  };
+}
+
+// src/dom/ledger.ts
+var Ledger = class {
+  undo = [];
+  originalAttributes = /* @__PURE__ */ new Map();
+  closed = false;
+  get isClosed() {
+    return this.closed;
+  }
+  /** Runs `task` on `close()`, in reverse order of registration. */
+  defer(task) {
+    this.undo.push(task);
+  }
+  /** Adds `className` unless present; `close()` removes it only if this ledger added it. */
+  addClass(element, className) {
+    if (element.classList.contains(className)) return;
+    const hadClassAttribute = element.hasAttribute("class");
+    element.classList.add(className);
+    this.defer(() => {
+      element.classList.remove(className);
+      if (!hadClassAttribute && element.classList.length === 0) element.removeAttribute("class");
+    });
+  }
+  /** Sets (string) or removes (`null`) an attribute; `close()` restores the value before the first change. */
+  attribute(element, name, value) {
+    let originals = this.originalAttributes.get(element);
+    if (!originals) {
+      originals = /* @__PURE__ */ new Map();
+      this.originalAttributes.set(element, originals);
+    }
+    if (!originals.has(name)) {
+      originals.set(name, element.getAttribute(name));
+      this.defer(() => {
+        const original = originals.get(name) ?? null;
+        if (original === null) element.removeAttribute(name);
+        else element.setAttribute(name, original);
+      });
+    }
+    if (value === null) element.removeAttribute(name);
+    else element.setAttribute(name, value);
+  }
+  listen(target, type, listener, options) {
+    const handler = listener;
+    target.addEventListener(type, handler, options);
+    this.defer(() => target.removeEventListener(type, handler, options));
+  }
+  /** Runs every undo task once; later calls are no-ops. */
+  close() {
+    if (this.closed) return;
+    this.closed = true;
+    for (const task of this.undo.reverse()) {
+      try {
+        task();
+      } catch {
+      }
+    }
+    this.undo.length = 0;
+    this.originalAttributes.clear();
+  }
+};
+
+// src/dom/legend.ts
+function createLegend(context) {
+  const { ownerDocument, messages, tooltip, titleId, options } = context;
+  const close = createElement(ownerDocument, "button", {
+    type: "button",
+    class: "cd-shell-legend-close",
+    "aria-label": messages.closeLegend
+  });
+  close.append(iconElement("x"));
+  const body = createElement(ownerDocument, "div", { class: "cd-shell-legend-body" });
+  const element = createElement(
+    ownerDocument,
+    "section",
+    { class: "cd-shell-legend cd-shell-island", "data-chrome": "legend", "aria-labelledby": titleId },
+    createElement(
+      ownerDocument,
+      "div",
+      { class: "cd-shell-legend-header" },
+      createElement(ownerDocument, "div", { class: "cd-shell-legend-title", id: titleId }, messages.legend),
+      close
+    ),
+    body
+  );
+  element.hidden = true;
+  options.render(body);
+  let open = false;
+  let started = false;
+  const detachTooltip = tooltip.attach(close, { label: messages.closeLegend });
+  function apply(next) {
+    started = true;
+    if (next === open) return false;
+    open = next;
+    element.hidden = !open;
+    if (!open && element.contains(ownerDocument.activeElement)) context.focusAfterClose();
+    context.onChange(open);
+    return true;
+  }
+  function setOpen(next) {
+    if (apply(next)) options.onToggle?.(next);
+  }
+  close.addEventListener("click", () => setOpen(false));
+  return {
+    element,
+    body,
+    isOpen: () => open,
+    setOpen,
+    toggle: () => setOpen(!open),
+    start(initial) {
+      if (!started) apply(initial);
+    },
+    isStarted: () => started,
+    destroy() {
+      detachTooltip();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/menu.ts
+var GROUP_ORDER = ["model", "export", "help"];
+function isPrintable(event) {
+  return event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function createMenu(context) {
+  const { root, layer, id, messages, tooltip } = context;
+  const ownerDocument = root.ownerDocument;
+  let groups = context.groups;
+  let items = [];
+  let destroyed = false;
+  const trigger = createElement(ownerDocument, "button", {
+    type: "button",
+    class: "cd-shell-menu-trigger cd-shell-island",
+    "data-chrome": "menu",
+    "aria-label": messages.menu,
+    "aria-haspopup": "menu",
+    "aria-expanded": "false",
+    "aria-controls": id
+  });
+  trigger.append(iconElement("menu"));
+  const dropdown = createElement(ownerDocument, "div", {
+    class: "cd-shell-menu",
+    id,
+    role: "menu",
+    "aria-label": messages.menu
+  });
+  dropdown.hidden = true;
+  layer.prepend(dropdown);
+  const isOpen = () => !dropdown.hidden;
+  function entriesOf(name) {
+    const own = groups[name] ?? [];
+    return name === "model" ? [...own, ...context.shellModelEntries()] : own;
+  }
+  function hasEntries() {
+    return GROUP_ORDER.some((name) => entriesOf(name).length > 0);
+  }
+  function updateTriggerVisibility() {
+    trigger.hidden = !hasEntries();
+    if (trigger.hidden) close();
+  }
+  function isDisabled(entry, group) {
+    if (group === "model" && context.isReadOnly() && entry.keepEnabledWhenReadOnly !== true) return true;
+    return entry.disabled?.() ?? false;
+  }
+  function itemElement(role, label, options) {
+    const iconSlot = createElement(ownerDocument, "span", { class: "cd-shell-menu-item-icon" });
+    if (options.icon) iconSlot.append(iconElement(options.icon));
+    const element = createElement(
+      ownerDocument,
+      "button",
+      { type: "button", class: "cd-shell-menu-item", role, tabindex: "-1" },
+      iconSlot,
+      createElement(ownerDocument, "span", { class: "cd-shell-menu-item-label" }, label),
+      options.end && createElement(ownerDocument, "span", { class: "cd-shell-menu-item-end" }, options.end)
+    );
+    toggleAttribute(element, "aria-disabled", options.disabled && "true");
+    if (options.checked !== void 0) element.setAttribute("aria-checked", String(options.checked));
+    return element;
+  }
+  function checkMark() {
+    return iconElement("check", { className: "cd-shell-menu-check" });
+  }
+  function renderEntry(entry, group) {
+    const disabled = isDisabled(entry, group);
+    if (entry.kind === "checkbox") {
+      const checked = entry.checked();
+      const element2 = itemElement("menuitemcheckbox", entry.label, {
+        icon: entry.icon,
+        end: checkMark(),
+        disabled,
+        checked
+      });
+      element2.dataset.menuId = entry.id;
+      element2.dataset.menuGroup = group;
+      return {
+        key: entry.id,
+        element: element2,
+        label: entry.label,
+        disabled,
+        activate() {
+          entry.onToggle(!entry.checked());
+          refresh();
+        }
+      };
+    }
+    const shortcut = entry.kind === "action" && entry.shortcut ? createElement(ownerDocument, "span", { class: "cd-shell-menu-shortcut" }, entry.shortcut) : void 0;
+    const element = itemElement("menuitem", entry.label, { icon: entry.icon, end: shortcut, disabled });
+    element.dataset.menuId = entry.id;
+    element.dataset.menuGroup = group;
+    if (entry.kind === "action") {
+      const keyShortcuts = entry.ariaKeyShortcuts ?? (entry.shortcut ? ariaKeyShortcutsFromLabel(entry.shortcut) : void 0);
+      toggleAttribute(element, "aria-keyshortcuts", keyShortcuts || null);
+    }
+    if (entry.kind === "dialog") element.setAttribute("aria-haspopup", "dialog");
+    if (entry.kind === "action" && entry.danger) element.dataset.danger = "";
+    return {
+      key: entry.id,
+      element,
+      label: entry.label,
+      disabled,
+      activate() {
+        close({ restoreFocus: true });
+        entry.onSelect();
+      }
+    };
+  }
+  function renderRadioGroup(entry, group) {
+    const disabled = isDisabled(entry, group);
+    const value = entry.value();
+    const container = createElement(
+      ownerDocument,
+      "div",
+      {
+        class: "cd-shell-menu-group",
+        role: "group",
+        "aria-label": entry.label,
+        "data-menu-id": entry.id,
+        "data-menu-group": group
+      },
+      // The group's aria-label carries the heading; a menu holds no loose text.
+      createElement(
+        ownerDocument,
+        "div",
+        { class: "cd-shell-menu-heading", "aria-hidden": "true" },
+        entry.label
+      )
+    );
+    const radioItems = entry.options.map((option) => {
+      const element = itemElement("menuitemradio", option.label, {
+        end: checkMark(),
+        disabled,
+        checked: option.value === value
+      });
+      element.dataset.menuValue = option.value;
+      container.append(element);
+      return {
+        key: `${entry.id}\0${option.value}`,
+        element,
+        label: option.label,
+        disabled,
+        activate() {
+          if (entry.value() !== option.value) entry.onSelect(option.value);
+          refresh();
+        }
+      };
+    });
+    return { element: container, items: radioItems };
+  }
+  function render() {
+    const focusedKey = items.find((item) => item.element === ownerDocument.activeElement)?.key;
+    const nodes = [];
+    const rendered = [];
+    for (const name of GROUP_ORDER) {
+      const entries = entriesOf(name);
+      if (entries.length === 0) continue;
+      if (nodes.length > 0) {
+        nodes.push(
+          createElement(ownerDocument, "div", { class: "cd-shell-menu-separator", role: "separator" })
+        );
+      }
+      for (const entry of entries) {
+        if (entry.kind === "radio") {
+          const radio = renderRadioGroup(entry, name);
+          nodes.push(radio.element);
+          rendered.push(...radio.items);
+        } else {
+          const item = renderEntry(entry, name);
+          nodes.push(item.element);
+          rendered.push(item);
+        }
+      }
+    }
+    for (const item of rendered) {
+      item.element.addEventListener("click", () => {
+        if (!item.disabled) item.activate();
+      });
+    }
+    dropdown.replaceChildren(...nodes);
+    items = rendered;
+    if (focusedKey !== void 0 && isOpen()) {
+      (items.find((item) => item.key === focusedKey) ?? items[0])?.element.focus();
+    }
+  }
+  function focusAt(index) {
+    if (items.length === 0) return;
+    items[(index + items.length) % items.length]?.element.focus();
+  }
+  function currentIndex() {
+    return items.findIndex((item) => item.element === ownerDocument.activeElement);
+  }
+  function typeAhead(character) {
+    const start = currentIndex();
+    const lower = character.toLowerCase();
+    for (let step = 1; step <= items.length; step++) {
+      const index = (Math.max(start, -1) + step) % items.length;
+      if (items[index]?.label.toLowerCase().startsWith(lower)) {
+        focusAt(index);
+        return;
+      }
+    }
+  }
+  const onOutsidePointerDown = (event) => {
+    const target = event.target;
+    if (target && (dropdown.contains(target) || trigger.contains(target))) return;
+    close();
+  };
+  const onWindowBlur = () => close();
+  function open(focus = "first") {
+    if (destroyed || !hasEntries()) return;
+    tooltip.hide();
+    const wasOpen = isOpen();
+    render();
+    if (!wasOpen) {
+      dropdown.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+      ownerDocument.addEventListener("pointerdown", onOutsidePointerDown, true);
+      ownerDocument.defaultView?.addEventListener("blur", onWindowBlur);
+    }
+    focusAt(focus === "last" ? items.length - 1 : 0);
+  }
+  function close(options = {}) {
+    if (!isOpen()) return;
+    dropdown.hidden = true;
+    trigger.setAttribute("aria-expanded", "false");
+    ownerDocument.removeEventListener("pointerdown", onOutsidePointerDown, true);
+    ownerDocument.defaultView?.removeEventListener("blur", onWindowBlur);
+    if (options.restoreFocus && !trigger.hidden) trigger.focus();
+  }
+  function refresh() {
+    if (isOpen()) render();
+  }
+  trigger.addEventListener("click", () => {
+    if (isOpen()) close();
+    else open("first");
+  });
+  function consume(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  trigger.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+      consume(event);
+      open("first");
+    } else if (event.key === "ArrowUp") {
+      consume(event);
+      open("last");
+    }
+  });
+  dropdown.addEventListener("keydown", (event) => {
+    if (matchChromeKey(event)) return;
+    switch (event.key) {
+      case "ArrowDown":
+        focusAt(currentIndex() + 1);
+        break;
+      case "ArrowUp": {
+        const index = currentIndex();
+        focusAt(index < 0 ? items.length - 1 : index - 1);
+        break;
+      }
+      case "Home":
+        focusAt(0);
+        break;
+      case "End":
+        focusAt(items.length - 1);
+        break;
+      case "Tab":
+        close({ restoreFocus: true });
+        return;
+      case "Escape":
+        return;
+      case "Enter":
+      case " ":
+      case "Delete":
+      case "Backspace":
+        event.stopPropagation();
+        return;
+      default:
+        if (!isPrintable(event)) return;
+        typeAhead(event.key);
+    }
+    consume(event);
+  });
+  updateTriggerVisibility();
+  return {
+    trigger,
+    dropdown,
+    isOpen,
+    open,
+    close,
+    refresh,
+    setGroups(next) {
+      groups = next;
+      updateTriggerVisibility();
+      refresh();
+    },
+    destroy() {
+      if (destroyed) return;
+      close();
+      destroyed = true;
+      trigger.remove();
+      dropdown.remove();
+    }
+  };
+}
+
+// src/dom/problems.ts
+function createProblemsPill(context) {
+  const { ownerDocument, messages, lang, tooltip, options } = context;
+  const icon = createElement(ownerDocument, "span", { class: "cd-shell-problems-icon" });
+  const text = createElement(ownerDocument, "span", { class: "cd-shell-problems-text" });
+  const element = createElement(
+    ownerDocument,
+    "button",
+    { type: "button", class: "cd-shell-problems cd-shell-island", "data-chrome": "problems" },
+    icon,
+    text
+  );
+  element.hidden = true;
+  element.addEventListener("click", () => options.onActivate());
+  const detachTooltip = context.showTooltip ? tooltip.attach(element, { label: messages.showProblems }) : void 0;
+  let severity;
+  return {
+    element,
+    isShown: () => !element.hidden,
+    set({ count, errors }) {
+      const shown = count > 0;
+      element.hidden = !shown;
+      if (!shown) {
+        tooltip.hide();
+        return;
+      }
+      const formattedCount = formatNumber(count, lang);
+      text.textContent = messages.problems(count, formattedCount);
+      element.setAttribute(
+        "aria-label",
+        messages.problemsLabel(count, errors, formattedCount, formatNumber(errors, lang))
+      );
+      const next = errors > 0 ? "danger" : "warning";
+      if (next !== severity) {
+        severity = next;
+        element.dataset.severity = next;
+        icon.replaceChildren(iconElement(next === "danger" ? "circle-x" : "triangle-alert"));
+      }
+    },
+    destroy() {
+      detachTooltip?.();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/status.ts
+function createStatusBox(ownerDocument) {
+  const icon = createElement(ownerDocument, "span", { class: "cd-shell-status-icon" });
+  const text = createElement(ownerDocument, "p", { class: "cd-shell-status-text" });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    { class: "cd-shell-status", "data-chrome": "status" },
+    icon,
+    text
+  );
+  element.hidden = true;
+  let pending;
+  function cancelPending() {
+    if (pending) clearTimeout(pending.timer);
+    pending = void 0;
+  }
+  function show(status) {
+    pending = void 0;
+    if (element.dataset.severity !== status.severity) {
+      element.dataset.severity = status.severity;
+      element.setAttribute("role", status.severity === "danger" ? "alert" : "status");
+      icon.replaceChildren(iconElement(status.severity === "danger" ? "circle-x" : "triangle-alert"));
+    }
+    if (text.textContent !== status.text) text.textContent = status.text;
+    element.hidden = false;
+  }
+  return {
+    element,
+    set(status, delayMs) {
+      if (status === null) {
+        cancelPending();
+        element.hidden = true;
+        return;
+      }
+      if (!element.hidden) {
+        show(status);
+        return;
+      }
+      if (pending) {
+        pending.status = status;
+        return;
+      }
+      if (delayMs > 0) {
+        const entry = { status, timer: setTimeout(() => show(entry.status), delayMs) };
+        pending = entry;
+      } else {
+        show(status);
+      }
+    },
+    destroy() {
+      cancelPending();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/tooltip.ts
+function createTooltip({ root, layer, id }) {
+  const ownerDocument = root.ownerDocument;
+  const label = createElement(ownerDocument, "span", { class: "cd-shell-tooltip-label" });
+  const shortcut = createElement(ownerDocument, "kbd", { class: "cd-shell-kbd" });
+  const element = createElement(ownerDocument, "div", { class: "cd-shell-tooltip", role: "tooltip", id });
+  element.hidden = true;
+  element.append(label, shortcut);
+  layer.append(element);
+  let shown;
+  let pending;
+  let warmUntil = 0;
+  let pressed;
+  const detachers = /* @__PURE__ */ new Set();
+  function cancelPending() {
+    if (pending) clearTimeout(pending.timer);
+    pending = void 0;
+  }
+  function resolve(source) {
+    return typeof source === "function" ? source() : source;
+  }
+  function place(control) {
+    const island = control.closest("[data-chrome]") ?? control;
+    const point = placeTooltip({
+      anchor: boxRelativeTo(control, root),
+      island: boxRelativeTo(island, root),
+      tooltip: { width: element.offsetWidth, height: element.offsetHeight },
+      container: { width: root.clientWidth, height: root.clientHeight }
+    });
+    element.style.left = `${point.x}px`;
+    element.style.top = `${point.y}px`;
+  }
+  function hide() {
+    cancelPending();
+    if (!shown) return;
+    const { control, describedBy } = shown;
+    shown = void 0;
+    element.hidden = true;
+    if (describedBy === null) control.removeAttribute("aria-describedby");
+    else control.setAttribute("aria-describedby", describedBy);
+  }
+  function show(control, source) {
+    cancelPending();
+    const content = resolve(source);
+    if (!content || !control.isConnected) {
+      if (shown?.control === control) hide();
+      return;
+    }
+    if (shown && shown.control !== control) hide();
+    label.textContent = content.label;
+    shortcut.textContent = content.shortcut ?? "";
+    shortcut.hidden = !content.shortcut;
+    element.hidden = false;
+    if (!shown) {
+      const describedBy = control.getAttribute("aria-describedby");
+      shown = { control, describedBy };
+      const saysMore = !accessibleName(control).includes(content.label) || Boolean(content.shortcut) && !control.hasAttribute("aria-keyshortcuts");
+      if (saysMore) {
+        control.setAttribute("aria-describedby", [describedBy, id].filter(Boolean).join(" "));
+      }
+    }
+    place(control);
+  }
+  function onEnter(control, source, event) {
+    if (event.pointerType === "touch" || pressed === control) return;
+    if (shown || Date.now() < warmUntil) {
+      show(control, source);
+      return;
+    }
+    cancelPending();
+    pending = { control, timer: setTimeout(() => show(control, source), TOOLTIP_DELAY_MS) };
+  }
+  function onLeave(control) {
+    if (pressed === control) pressed = void 0;
+    if (pending?.control === control) cancelPending();
+    if (shown?.control === control) {
+      hide();
+      warmUntil = Date.now() + TOOLTIP_DELAY_MS;
+    }
+  }
+  function onFocus(control, source) {
+    if (hasVisibleFocus(control)) show(control, source);
+  }
+  function onBlur(control) {
+    if (pending?.control === control) cancelPending();
+    if (shown?.control === control) hide();
+  }
+  function onPress(control, event) {
+    if (event.type === "pointerdown") pressed = control;
+    if (pending?.control === control) cancelPending();
+    if (shown?.control === control) hide();
+  }
+  function attach(control, source) {
+    const enter = (event) => onEnter(control, source, event);
+    const leave = () => onLeave(control);
+    const focus = () => onFocus(control, source);
+    const blur = () => onBlur(control);
+    const press = (event) => onPress(control, event);
+    control.addEventListener("pointerenter", enter);
+    control.addEventListener("pointerleave", leave);
+    control.addEventListener("focus", focus);
+    control.addEventListener("blur", blur);
+    control.addEventListener("pointerdown", press);
+    control.addEventListener("click", press);
+    const detach = () => {
+      if (!detachers.delete(detach)) return;
+      control.removeEventListener("pointerenter", enter);
+      control.removeEventListener("pointerleave", leave);
+      control.removeEventListener("focus", focus);
+      control.removeEventListener("blur", blur);
+      control.removeEventListener("pointerdown", press);
+      control.removeEventListener("click", press);
+      if (shown?.control === control || pending?.control === control) hide();
+      if (pressed === control) pressed = void 0;
+    };
+    detachers.add(detach);
+    return detach;
+  }
+  function delegate(container, selector, content) {
+    let hovered;
+    const controlOf = (target) => {
+      if (!target || typeof target.closest !== "function") return void 0;
+      const match = target.closest(selector);
+      return match && container.contains(match) ? match : void 0;
+    };
+    const sourceOf = (control) => () => content(control);
+    const over = (event) => {
+      const control = controlOf(event.target);
+      if (control === hovered) return;
+      if (hovered) onLeave(hovered);
+      hovered = control;
+      if (control) onEnter(control, sourceOf(control), event);
+    };
+    const out = (event) => {
+      if (!hovered) return;
+      if (controlOf(event.relatedTarget) === hovered) return;
+      onLeave(hovered);
+      hovered = void 0;
+    };
+    const focusIn = (event) => {
+      const control = controlOf(event.target);
+      if (control) onFocus(control, sourceOf(control));
+    };
+    const focusOut = (event) => {
+      const control = controlOf(event.target);
+      if (control) onBlur(control);
+    };
+    const press = (event) => {
+      const control = controlOf(event.target);
+      if (control) onPress(control, event);
+    };
+    container.addEventListener("pointerover", over);
+    container.addEventListener("pointerout", out);
+    container.addEventListener("focusin", focusIn);
+    container.addEventListener("focusout", focusOut);
+    container.addEventListener("pointerdown", press);
+    container.addEventListener("click", press);
+    const detach = () => {
+      if (!detachers.delete(detach)) return;
+      container.removeEventListener("pointerover", over);
+      container.removeEventListener("pointerout", out);
+      container.removeEventListener("focusin", focusIn);
+      container.removeEventListener("focusout", focusOut);
+      container.removeEventListener("pointerdown", press);
+      container.removeEventListener("click", press);
+      if (shown && container.contains(shown.control) || pending && container.contains(pending.control)) {
+        hide();
+      }
+      hovered = void 0;
+    };
+    detachers.add(detach);
+    return detach;
+  }
+  return {
+    element,
+    attach,
+    delegate,
+    hide,
+    destroy() {
+      hide();
+      for (const detach of [...detachers]) detach();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/zoom-panel.ts
+function createZoomPanel(context) {
+  const { ownerDocument, messages, lang, platform, tooltip } = context;
+  let target = null;
+  let unsubscribe;
+  let frame;
+  const detachers = [];
+  function button(zoom, key, tooltipLabel, options) {
+    const element2 = createElement(ownerDocument, "button", {
+      type: "button",
+      class: options.className ?? "cd-shell-target",
+      "data-zoom": zoom,
+      "aria-label": options.label,
+      "aria-keyshortcuts": ariaKeyShortcuts(key, platform)
+    });
+    if (options.icon) element2.append(iconElement(options.icon));
+    element2.addEventListener("click", () => run(key));
+    detachers.push(
+      tooltip.attach(element2, {
+        label: tooltipLabel,
+        shortcut: shortcutLabel(key, platform, messages.keyNames)
+      })
+    );
+    return element2;
+  }
+  const zoomOut = button("out", "zoomOut", messages.zoomOut, { label: messages.zoomOut, icon: "minus" });
+  const readout = button("actual", "zoomToActual", messages.zoomToActual(formatPercent(1, lang)), {
+    className: "cd-shell-target cd-shell-zoom-readout"
+  });
+  const zoomIn = button("in", "zoomIn", messages.zoomIn, { label: messages.zoomIn, icon: "plus" });
+  const fit = button("fit", "fit", messages.fit, { label: messages.fit, icon: "maximize" });
+  const separator = createElement(ownerDocument, "span", {
+    class: "cd-shell-zoom-separator",
+    "aria-hidden": "true"
+  });
+  const element = createElement(
+    ownerDocument,
+    "div",
+    {
+      class: "cd-shell-zoom cd-shell-island",
+      "data-chrome": "zoom",
+      role: "group",
+      "aria-label": messages.zoom
+    },
+    zoomOut,
+    readout,
+    zoomIn,
+    separator,
+    fit
+  );
+  function render() {
+    frame = void 0;
+    const zoom = target?.zoom() ?? 1;
+    const state = zoomReadout(zoom, lang, messages);
+    if (readout.textContent !== state.text) readout.textContent = state.text;
+    readout.setAttribute("aria-label", state.ariaLabel);
+    toggleAttribute(zoomOut, "aria-disabled", (!target || !state.canZoomOut) && "true");
+    toggleAttribute(zoomIn, "aria-disabled", (!target || !state.canZoomIn) && "true");
+    toggleAttribute(fit, "aria-disabled", (!target || !target.canFit()) && "true");
+  }
+  function schedule() {
+    if (frame === void 0) frame = requestAnimationFrame(render);
+  }
+  function cancelFrame() {
+    if (frame !== void 0) cancelAnimationFrame(frame);
+    frame = void 0;
+  }
+  function run(key) {
+    if (!target) return;
+    const zoom = target.zoom();
+    switch (key) {
+      case "zoomIn":
+        if (canZoomIn(zoom)) target.stepZoom(1);
+        break;
+      case "zoomOut":
+        if (canZoomOut(zoom)) target.stepZoom(-1);
+        break;
+      case "zoomToActual":
+        if (zoom !== 1) target.zoomToActual();
+        break;
+      case "fit":
+        if (target.canFit()) target.fit();
+        break;
+    }
+  }
+  render();
+  return {
+    element,
+    run,
+    setTarget(next) {
+      unsubscribe?.();
+      unsubscribe = void 0;
+      cancelFrame();
+      target = next;
+      if (next) unsubscribe = next.onChange(schedule);
+      render();
+    },
+    destroy() {
+      unsubscribe?.();
+      unsubscribe = void 0;
+      cancelFrame();
+      target = null;
+      for (const detach of detachers) detach();
+      element.remove();
+    }
+  };
+}
+
+// src/dom/mount.ts
+var MOUNT_COUNTER = /* @__PURE__ */ Symbol.for("@miragon/modeler-shell.mounts");
+function nextMountIndex() {
+  const scope = globalThis;
+  const index = (scope[MOUNT_COUNTER] ?? 0) + 1;
+  scope[MOUNT_COUNTER] = index;
+  return index;
+}
+var DEFAULT_THEMES = ["light"];
+function languageOf(root, host, requested) {
+  if (requested) return requested;
+  const declared = host === "embedded" ? root.getAttribute("lang") : root.closest("[lang]")?.getAttribute("lang");
+  return declared || "en";
+}
+function hostKontrast(root) {
+  const carrier = root.parentElement?.closest("[data-cd-theme], [data-cd-kontrast]");
+  return carrier?.getAttribute("data-cd-kontrast") === "hoch" ? "hoch" : null;
+}
+function mountShell(root, options) {
+  const themes = options.themes ?? DEFAULT_THEMES;
+  if (themes.length === 0) throw new Error("@miragon/modeler-shell: mountShell needs at least one theme");
+  const ledger = new Ledger();
+  try {
+    return renderShell(root, options, themes, ledger);
+  } catch (error) {
+    ledger.close();
+    throw error;
+  }
+}
+function renderShell(root, options, themes, ledger) {
+  const ownerDocument = root.ownerDocument;
+  const { host } = options;
+  const index = nextMountIndex();
+  const messages = resolveMessages(options.messages);
+  const platform = options.platform ?? detectPlatform(globalThis.navigator);
+  const lang = languageOf(root, host, options.lang);
+  const keyScope = options.keyScope ?? (host === "embedded" ? "root" : "document");
+  ledger.addClass(root, "cd-shell");
+  ledger.attribute(root, "data-cd-shell-host", host);
+  ledger.attribute(root, "data-palette", "top");
+  if (host === "embedded") {
+    ledger.attribute(root, "lang", lang);
+    carryOwnMode(root, themes[0] ?? "light", ledger);
+  } else {
+    ledger.addClass(ownerDocument.documentElement, "cd-shell-document");
+  }
+  const setState = (name, value) => {
+    if (!ledger.isClosed) ledger.attribute(root, name, value);
+  };
+  const layer = createElement(ownerDocument, "div", { class: "cd-shell-layer" });
+  ledger.defer(() => layer.remove());
+  const tooltip = createTooltip({ root, layer, id: `cd-shell-tooltip-${index}` });
+  ledger.defer(() => tooltip.destroy());
+  let readOnly = false;
+  let readOnlyShown = false;
+  let readOnlyTimer;
+  ledger.defer(() => clearTimeout(readOnlyTimer));
+  const legend = options.legend ? createLegend({
+    ownerDocument,
+    messages,
+    tooltip,
+    titleId: `cd-shell-legend-title-${index}`,
+    options: options.legend,
+    onChange(open) {
+      setState("data-legend", open ? "open" : null);
+      placeHint();
+      menu.refresh();
+    },
+    focusAfterClose: () => menu.trigger.focus()
+  }) : void 0;
+  if (legend) ledger.defer(() => legend.destroy());
+  const legendEntry = legend && options.legend?.menuEntry !== false ? {
+    kind: "checkbox",
+    id: "legend",
+    label: messages.legend,
+    checked: () => legend.isOpen(),
+    onToggle: (checked) => legend.setOpen(checked),
+    keepEnabledWhenReadOnly: true
+  } : void 0;
+  const shellModelEntries = legendEntry ? [legendEntry] : [];
+  const menu = createMenu({
+    root,
+    layer,
+    id: `cd-shell-menu-${index}`,
+    messages,
+    tooltip,
+    groups: options.menu ?? {},
+    shellModelEntries: () => shellModelEntries,
+    isReadOnly: () => readOnly
+  });
+  ledger.defer(() => menu.destroy());
+  ledger.defer(tooltip.attach(menu.trigger, () => menu.isOpen() ? null : { label: messages.menu }));
+  const canvas = options.canvas ?? createElement(ownerDocument, "div");
+  ledger.addClass(canvas, "cd-shell-canvas");
+  if (!options.canvas) ledger.defer(() => canvas.remove());
+  function moveFocusOutOf(island) {
+    if (!island.contains(ownerDocument.activeElement)) return;
+    const canvasTarget = canvas.querySelector("svg[tabindex]");
+    canvasTarget?.focus({ preventScroll: true });
+    if (canvasTarget && ownerDocument.activeElement === canvasTarget) return;
+    if (!menu.trigger.hidden) menu.trigger.focus({ preventScroll: true });
+  }
+  const status = createStatusBox(ownerDocument);
+  ledger.defer(() => status.destroy());
+  const hint = options.emptyHint ? createEmptyHint(ownerDocument, messages, options.emptyHint) : void 0;
+  if (hint) ledger.defer(() => hint.destroy());
+  const inspector = options.inspector ? createInspector(ownerDocument, options.inspector, (open) => {
+    setState("data-inspector", open ? "open" : null);
+    placeHint();
+  }) : void 0;
+  if (inspector) ledger.defer(() => inspector.destroy());
+  const pill = options.problems ? createProblemsPill({
+    ownerDocument,
+    messages,
+    lang,
+    tooltip,
+    showTooltip: host === "ide",
+    options: options.problems
+  }) : void 0;
+  if (pill) ledger.defer(() => pill.destroy());
+  const zoomPanel = createZoomPanel({ ownerDocument, messages, lang, platform, tooltip });
+  ledger.defer(() => zoomPanel.destroy());
+  root.prepend(menu.trigger, canvas);
+  root.append(
+    ...[
+      status.element,
+      hint?.element,
+      inspector?.element,
+      pill?.element,
+      legend?.element,
+      zoomPanel.element
+    ].filter((element) => element !== void 0),
+    layer
+  );
+  let palette;
+  let paletteRow = "top";
+  function containerSize() {
+    return { width: root.clientWidth, height: root.clientHeight };
+  }
+  function menuRight() {
+    const box = boxRelativeTo(menu.trigger, root);
+    return box.width > 0 ? box.x + box.width : SHELL.edge + SHELL.row;
+  }
+  function paletteWidth() {
+    const element = palette?.registration.element;
+    return element ? element.offsetWidth - element.clientWidth + element.scrollWidth : 0;
+  }
+  function currentFitInsets() {
+    const container = containerSize();
+    const layout = {
+      container,
+      host,
+      paletteRow,
+      problemsVisible: pill?.isShown() ?? false
+    };
+    if (legend?.isOpen()) layout.legendWidth = legend.element.getBoundingClientRect().width;
+    if (inspector?.isOpen()) {
+      layout.inspector = container.width > SHELL.narrow ? {} : { sheetTop: boxRelativeTo(inspector.element, root).y };
+    }
+    return fitInsets(layout);
+  }
+  function placeHint() {
+    if (hint?.isShown()) hint.place(currentFitInsets());
+  }
+  function updateLayout() {
+    if (ledger.isClosed) return;
+    const size = containerSize();
+    if (size.width === 0 || size.height === 0) return;
+    paletteRow = decidePaletteRow({
+      containerWidth: size.width,
+      paletteWidth: paletteWidth(),
+      menuRight: menuRight()
+    });
+    setState("data-palette", paletteRow);
+    if (legend && !legend.isStarted()) legend.start(options.legend?.open ?? legendStartsOpen(size.height));
+    placeHint();
+  }
+  const ResizeObserverClass = globalThis.ResizeObserver;
+  const resizeObserver = ResizeObserverClass ? new ResizeObserverClass(() => updateLayout()) : void 0;
+  resizeObserver?.observe(root);
+  ledger.defer(() => resizeObserver?.disconnect());
+  if (legend && options.legend?.open !== void 0) legend.start(options.legend.open);
+  updateLayout();
+  const keyTarget = keyScope === "root" ? root : ownerDocument;
+  const onKeydown = createKeyListener({
+    host,
+    dialogScope: keyTarget,
+    menuOpen: () => menu.isOpen(),
+    closeMenu() {
+      const active = ownerDocument.activeElement;
+      menu.close({ restoreFocus: active === menu.trigger || menu.dropdown.contains(active) });
+    },
+    hideTooltip: () => tooltip.hide(),
+    run: (key) => zoomPanel.run(key)
+  });
+  keyTarget.addEventListener("keydown", onKeydown);
+  ledger.defer(() => keyTarget.removeEventListener("keydown", onKeydown));
+  function readOnlyState() {
+    return { locked: readOnly, shown: readOnlyShown };
+  }
+  function applyReadOnly() {
+    setState("data-readonly", readOnlyShown ? "" : null);
+    palette?.registration.setReadOnly(readOnlyState());
+    menu.refresh();
+  }
+  function showReadOnly() {
+    readOnlyTimer = void 0;
+    if (ledger.isClosed || !readOnly) return;
+    readOnlyShown = true;
+    applyReadOnly();
+  }
+  function unregisterPalette() {
+    if (!palette) return;
+    palette.detachTooltip();
+    resizeObserver?.unobserve(palette.registration.element);
+    palette = void 0;
+  }
+  ledger.defer(unregisterPalette);
+  const menuHandle = {
+    trigger: menu.trigger,
+    dropdown: menu.dropdown,
+    isOpen: () => menu.isOpen(),
+    open: (focus) => menu.open(focus),
+    close: (closeOptions) => menu.close(closeOptions),
+    refresh: () => menu.refresh(),
+    setGroups: (groups) => {
+      if (!ledger.isClosed) menu.setGroups(groups);
+    }
+  };
+  const tooltipHandle = {
+    attach: (control, content) => ledger.isClosed ? () => {
+    } : tooltip.attach(control, content),
+    hide: () => tooltip.hide()
+  };
+  const legendHandle = legend && {
+    element: legend.element,
+    body: legend.body,
+    isOpen: () => legend.isOpen(),
+    setOpen: (open) => {
+      if (!ledger.isClosed) legend.setOpen(open);
+    },
+    toggle: () => {
+      if (!ledger.isClosed) legend.toggle();
+    }
+  };
+  const inspectorHandle = inspector && {
+    element: inspector.element,
+    isOpen: () => inspector.isOpen(),
+    open: () => {
+      if (!ledger.isClosed) inspector.open();
+    },
+    close: () => {
+      if (ledger.isClosed) return;
+      if (inspector.isOpen()) moveFocusOutOf(inspector.element);
+      inspector.close();
+    }
+  };
+  return {
+    root,
+    canvas,
+    host,
+    lang,
+    platform,
+    messages,
+    menu: menuHandle,
+    tooltip: tooltipHandle,
+    legend: legendHandle,
+    inspector: inspectorHandle,
+    setZoomTarget(target) {
+      if (!ledger.isClosed) zoomPanel.setTarget(target);
+    },
+    fitInsets: currentFitInsets,
+    registerPalette(registration) {
+      if (ledger.isClosed) return () => {
+      };
+      unregisterPalette();
+      palette = {
+        registration,
+        detachTooltip: tooltip.delegate(
+          registration.element,
+          ".entry",
+          (entry) => registration.entryTooltip(entry)
+        )
+      };
+      resizeObserver?.observe(registration.element);
+      registration.setReadOnly(readOnlyState());
+      updateLayout();
+      const registered = palette;
+      return () => {
+        if (palette !== registered) return;
+        unregisterPalette();
+        updateLayout();
+      };
+    },
+    setProblems(summary) {
+      if (ledger.isClosed || !pill) return;
+      pill.set(summary);
+      setState("data-problems", pill.isShown() ? "shown" : null);
+      placeHint();
+    },
+    setStatus(next, statusOptions) {
+      if (!ledger.isClosed) status.set(next, statusOptions?.delayMs ?? 0);
+    },
+    setEmptyHint(visible) {
+      if (ledger.isClosed || !hint) return;
+      if (!visible && hint.isShown()) moveFocusOutOf(hint.element);
+      hint.setShown(visible);
+      placeHint();
+    },
+    setReadOnly(next, readOnlyOptions) {
+      if (ledger.isClosed) return;
+      if (!next) {
+        clearTimeout(readOnlyTimer);
+        readOnlyTimer = void 0;
+        readOnly = false;
+        readOnlyShown = false;
+      } else {
+        readOnly = true;
+        const delayMs = readOnlyOptions?.delayMs ?? 0;
+        if (!readOnlyShown && readOnlyTimer === void 0) {
+          if (delayMs > 0) readOnlyTimer = setTimeout(showReadOnly, delayMs);
+          else readOnlyShown = true;
+        }
+      }
+      applyReadOnly();
+    },
+    isReadOnly: () => readOnly,
+    destroy() {
+      ledger.close();
+    }
+  };
+}
+function carryOwnMode(root, theme, ledger) {
+  ledger.attribute(root, "data-cd-theme", theme);
+  const mirror = () => {
+    if (ledger.isClosed) return;
+    const kontrast = hostKontrast(root);
+    if (root.getAttribute("data-cd-kontrast") !== kontrast)
+      ledger.attribute(root, "data-cd-kontrast", kontrast);
+  };
+  mirror();
+  const MutationObserverClass = globalThis.MutationObserver;
+  if (!MutationObserverClass) return;
+  const observer = new MutationObserverClass(mirror);
+  observer.observe(root.ownerDocument.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-cd-theme", "data-cd-kontrast"],
+    subtree: true
+  });
+  ledger.defer(() => observer.disconnect());
+}
+
+export {
+  ICONS,
+  PALETTE_TOOL_ICON,
+  iconMarkup,
+  iconElement,
+  mountShell
+};
+/*! @miragon/modeler-shell icon geometry
+ * Lucide (lucide-static 1.59.0) @license ISC
+ * Copyright (c) 2026 Lucide Icons and Contributors
+ * Derived from Feather, as Lucide's LICENSE lists them: check, circle-x (x-circle), maximize,
+ * minus, plus, triangle-alert (alert-triangle) and x. Feather @license MIT
+ * Copyright (c) 2013-present Cole Bemis
+ * Full notices: THIRD_PARTY_NOTICES.md of @miragon/modeler-shell */
+//# sourceMappingURL=chunk-6LQOFACK.js.map