@draftably/runtime 0.3.0 → 0.5.0

package/dist/viewer.js

@@ -1,440 +1,807 @@
-import { r as ce } from "./render-Dgo42PR4.js";
-import { a as ke } from "./render-Dgo42PR4.js";
-import { F as ee } from "./compile-Csfz4rk4.js";
-import { h as Ae } from "./compile-Csfz4rk4.js";
-const de = "http://www.w3.org/2000/svg", le = new Set(
+import { i as Ne, F as Oe } from "./geometry-DfUVE8b2.js";
+import { f as kt } from "./geometry-DfUVE8b2.js";
+import { r as St } from "./version-CO7i33cq.js";
+const $e = 0.02, ze = 8, He = 32, ye = (n, t = $e, i = ze) => Math.min(Math.max(n, Math.max($e, t)), Math.min(ze, i));
+function Re(n = {}) {
+  const t = n.padding ?? He;
+  return typeof t == "number" ? { top: t, right: t, bottom: t, left: t } : t;
+}
+function Ge(n) {
+  if (!n.length) return;
+  const t = Math.min(...n.map((d) => d.x)), i = Math.min(...n.map((d) => d.y)), r = Math.max(...n.map((d) => d.x + d.width)), c = Math.max(...n.map((d) => d.y + d.height));
+  return { x: t, y: i, width: r - t, height: c - i };
+}
+function Ie(n, t, i = {}) {
+  const r = Re(i), c = Math.max(1, t.width - r.left - r.right), d = Math.max(1, t.height - r.top - r.bottom), m = ye(
+    Math.min(c / Math.max(1, n.width), d / Math.max(1, n.height)),
+    i.minZoom,
+    i.maxZoom ?? 1
+  );
+  return {
+    centerX: n.x + n.width / 2 - (r.left - r.right) / 2 / m,
+    centerY: n.y + n.height / 2 - (r.top - r.bottom) / 2 / m,
+    zoom: m
+  };
+}
+function Ue(n, t, i, r = {}) {
+  const c = Re(r), d = { width: i.width - c.left - c.right, height: i.height - c.top - c.bottom };
+  let { centerX: m, centerY: s, zoom: f } = n;
+  if (t.width * f > d.width || t.height * f > d.height)
+    return Ie(t, i, { ...r, maxZoom: f });
+  f = ye(f, r.minZoom, r.maxZoom);
+  const g = (t.x - m) * f + i.width / 2, x = (t.y - s) * f + i.height / 2;
+  return g < c.left ? m -= (c.left - g) / f : g + t.width * f > i.width - c.right && (m += (g + t.width * f - (i.width - c.right)) / f), x < c.top ? s -= (c.top - x) / f : x + t.height * f > i.height - c.bottom && (s += (x + t.height * f - (i.height - c.bottom)) / f), { centerX: m, centerY: s, zoom: f };
+}
+const Ke = (n, t) => Math.abs(n.centerX - t.centerX) < 0.01 && Math.abs(n.centerY - t.centerY) < 0.01 && Math.abs(n.zoom - t.zoom) < 1e-6, Je = 0.4, Qe = (n, t) => n.nodes[t] ? "node" : n.groups[t] ? "group" : n.edges[t] ? "edge" : void 0, Te = (n, t, i) => ({
+  code: n,
+  severity: "warning",
+  message: t,
+  itemIds: [i]
+});
+function et(n, t = {}) {
+  const i = n.createElement("div"), r = n.createElement("div"), c = n.createElement("div");
+  i.className = "draft-anchors", r.className = "draft-anchors__bodies", c.className = "draft-anchors__overlays", i.append(r, c), i.dataset.draftDetail = "full";
+  const d = /* @__PURE__ */ new Map();
+  let m = [], s = null, f = !1, g = [], x = 1;
+  const p = /* @__PURE__ */ new Set(), b = n.defaultView, P = () => {
+    let l = !1;
+    for (const [h, w] of d) {
+      if (!w.body) continue;
+      const M = (E.get(w) ?? []).some(
+        (_) => _.offsetWidth > w.box.width + 0.5 || _.offsetHeight > w.box.height + 0.5
+      );
+      M !== p.has(h) && (l = !0, M ? p.add(h) : p.delete(h));
+    }
+    l && t.onOverflow?.();
+  }, L = b?.ResizeObserver ? new b.ResizeObserver(P) : void 0, E = /* @__PURE__ */ new Map(), re = (l) => {
+    if (!L || !l.body) return;
+    for (const w of E.get(l) ?? []) L.unobserve(w);
+    const h = U(l.el);
+    E.set(l, h);
+    for (const w of h) L.observe(w);
+  }, k = (l) => {
+    for (const h of E.get(l) ?? []) L?.unobserve(h);
+    E.delete(l);
+  }, Y = (l) => {
+    const h = l.closest?.("[data-draft-anchor]")?.getAttribute("data-draft-anchor");
+    return h ? d.get(h) : void 0;
+  };
+  i.addEventListener("slotchange", (l) => {
+    const h = Y(l.target);
+    h && re(h);
+  });
+  const W = b?.MutationObserver ? new b.MutationObserver((l) => {
+    const h = /* @__PURE__ */ new Set();
+    for (const w of l) {
+      const M = w.target.dataset?.draftAnchor ? Y(w.target) : void 0;
+      M && !h.has(M) && (h.add(M), re(M));
+    }
+  }) : void 0;
+  W?.observe(r, { childList: !0, subtree: !0 });
+  let G = !1;
+  const J = () => G = !0, F = () => G = !1;
+  i.addEventListener("pointerdown", J, !0), n.addEventListener("pointerup", F, !0), n.addEventListener("pointercancel", F, !0);
+  function U(l) {
+    const h = l.firstElementChild;
+    return h instanceof HTMLSlotElement ? h.assignedElements().filter((w) => w instanceof HTMLElement) : [...l.children].filter((w) => w instanceof HTMLElement);
+  }
+  function ne() {
+    let l = n.activeElement;
+    for (; l?.shadowRoot?.activeElement; ) l = l.shadowRoot.activeElement;
+    return l;
+  }
+  function se() {
+    let l = !1, h = !1;
+    const w = /* @__PURE__ */ new Set();
+    g = [];
+    let M;
+    const _ = (S) => {
+      M ??= new Map(
+        [s.nodes, s.groups, s.edges].flatMap(Object.keys).map((R, N) => [R, N])
+      );
+      const z = S.dataset.draftAnchor;
+      return M.get(z.slice(z.indexOf(":") + 1)) ?? 1 / 0;
+    };
+    for (const S of m) {
+      const z = S.indexOf(":"), R = S.slice(0, z), N = S.slice(z + 1), B = s ? Qe(s, N) : void 0;
+      if (!s || !B || R !== "body" && R !== "overlay" || R === "body" && B !== "node" || w.has(S)) {
+        f && !w.has(S) && g.push(S);
+        continue;
+      }
+      w.add(S);
+      const D = Ne(s, N);
+      let $ = d.get(S);
+      if (!$ || $.kind !== B) {
+        $ && ($.el.remove(), k($));
+        const I = n.createElement("div");
+        I.className = `draft-anchor draft-anchor--${R}`, I.dataset.draftAnchor = S, $ = { el: I, id: N, kind: B, body: R === "body", box: D }, d.set(S, $);
+        const Q = $.body ? r : c, Z = Q.children, ue = _(I);
+        let ee = 0, H = Z.length;
+        for (; ee < H; ) {
+          const ie = ee + H >> 1;
+          _(Z[ie]) > ue ? H = ie : ee = ie + 1;
+        }
+        Q.insertBefore(I, Z[ee] ?? null), re($), l = !0;
+      } else $.body && ($.box.width !== D.width || $.box.height !== D.height) && (h = !0);
+      if ($.box = D, $.body) {
+        const I = $.el.style;
+        I.left = `${D.x}px`, I.top = `${D.y}px`, I.width = `${D.width}px`, I.height = `${D.height}px`;
+      }
+    }
+    for (const [S, z] of d) {
+      if (w.has(S)) continue;
+      const R = ne(), N = !!R && (z.el.contains(R) || U(z.el).some((B) => B.contains(R)));
+      z.el.remove(), k(z), d.delete(S), p.delete(S), l = !0, N && i.dispatchEvent(new CustomEvent("draft-anchor-focus-lost"));
+    }
+    return h && L && P(), l;
+  }
+  return {
+    el: i,
+    setSlots(l) {
+      return m = [...new Set(l)], se();
+    },
+    hasSlots: () => m.length > 0,
+    setGeometry(l) {
+      return s = l, f = !0, se();
+    },
+    place(l, h, w) {
+      if (!m.length) return;
+      (w !== x || !i.style.getPropertyValue("--draft-zoom")) && i.style.setProperty("--draft-zoom", String(w)), x = w, r.style.transform = `translate(${l}px, ${h}px) scale(${w})`;
+      for (const _ of d.values()) {
+        if (_.body) continue;
+        const S = _.el.style;
+        S.transform = `translate(${l + _.box.x * w}px, ${h + _.box.y * w}px)`, S.width = `${_.box.width * w}px`, S.height = `${_.box.height * w}px`;
+      }
+      const M = t.detail !== "full" && w < Je;
+      i.dataset.draftDetail === "low" !== M && (i.dataset.draftDetail = M ? "low" : "full", r.inert = M);
+    },
+    anchors: () => [...d].map(([l, h]) => ({
+      slot: l,
+      id: h.id,
+      kind: h.kind,
+      el: h.el
+    })),
+    // Every anchored body, at any zoom: CSS shows titles again below LOW_DETAIL_ZOOM.
+    bodyIds: () => [...d.values()].filter((l) => l.body).map((l) => l.id),
+    warnings: () => [
+      ...g.map(
+        (l) => Te(
+          "DRAFT_SLOT_UNKNOWN",
+          /^(?:body|overlay):/.test(l) ? s ? `Slot ${l} names no item that can hold it. A body fills a node; an overlay covers a node, group or edge.` : `Slot ${l} shows nothing: this drawing repeats items (compare or states), so slots are off.` : `Slot ${l} shows nothing: a slot name starts with body: or overlay:, such as body:api.`,
+          l.slice(l.indexOf(":") + 1)
+        )
+      ),
+      ...[...p].map(
+        (l) => Te(
+          "DRAFT_SLOT_OVERFLOW",
+          `The content of ${l} is larger than its node. Declare the room with size … min-height=.`,
+          l.slice(l.indexOf(":") + 1)
+        )
+      )
+    ],
+    pressed: () => G,
+    idOf(l) {
+      for (const h of d.values())
+        if (h.el.contains(l) || U(h.el).some((w) => w.contains(l))) return h.id;
+    },
+    destroy() {
+      L?.disconnect(), W?.disconnect(), n.removeEventListener("pointerup", F, !0), n.removeEventListener("pointercancel", F, !0), E.clear(), d.clear(), i.remove();
+    }
+  };
+}
+const tt = /\bdark\b/, rt = /\blight\b/;
+function nt(n, t) {
+  const i = n.ownerDocument, r = i.defaultView, c = r?.matchMedia?.("(prefers-color-scheme: dark)"), d = i.createElement("span");
+  d.setAttribute("aria-hidden", "true"), d.setAttribute("data-draft-probe", ""), d.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;color:light-dark(rgb(0,0,0),rgb(255,255,255));transition:color 1ms !important", n.append(d);
+  let m;
+  const s = () => {
+    const p = r?.getComputedStyle(d).colorScheme ?? "", b = tt.test(p) && (!rt.test(p) || !!c?.matches);
+    b !== m && (m = b, t(b));
+  }, f = (p) => {
+    p.stopPropagation(), s();
+  };
+  d.addEventListener("transitionrun", f), c?.addEventListener?.("change", s);
+  const g = n.nodeType === 11 ? n.host : n, x = r && "ResizeObserver" in r ? new r.ResizeObserver(s) : void 0;
+  return x?.observe(g), s(), {
+    check: s,
+    stop() {
+      x?.disconnect(), c?.removeEventListener?.("change", s), d.removeEventListener("transitionrun", f), d.remove();
+    }
+  };
+}
+const De = Math.max(
+  1,
+  Math.min(4, (globalThis.navigator?.hardwareConcurrency || 2) - 1)
+), ot = 3e4, Fe = /* @__PURE__ */ new Map();
+let st = 0;
+const _e = "The worker is the module next to @draftably/runtime's viewer. With Vite 5–7, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.", it = () => new Worker(new URL("./assets/render.worker-D11vTqoO.js", import.meta.url), { type: "module" });
+function le(n, t, i) {
+  n.slots.splice(n.slots.indexOf(t), 1), clearTimeout(t.timer), clearTimeout(t.idle), t.worker.terminate();
+  const r = t.job;
+  t.job = void 0, r && i && r.reject(i);
+}
+function at(n, t) {
+  let i;
+  try {
+    i = (n ?? it)();
+  } catch (c) {
+    throw new Error(
+      `Viewer render worker could not start${c instanceof Error ? `: ${c.message}` : ""}. ${_e}`,
+      { cause: c }
+    );
+  }
+  const r = { worker: i };
+  return t.slots.push(r), i.addEventListener("message", (c) => {
+    const d = r.job;
+    !d || c.data?.id !== d.id || (clearTimeout(r.timer), r.job = void 0, d.resolve(c.data.result), r.idle = setTimeout(() => le(t, r), ot), ae(n, t));
+  }), i.addEventListener("error", (c) => {
+    c.preventDefault(), le(
+      t,
+      r,
+      new Error(`${c.message || "Viewer render worker failed."} ${_e}`)
+    ), ae(n, t);
+  }), i.addEventListener("messageerror", () => {
+    le(t, r, new Error("Viewer render worker returned an unreadable result.")), ae(n, t);
+  }), r;
+}
+function ae(n, t) {
+  for (; t.queue.length; ) {
+    const i = t.queue[0].options.idPrefix;
+    let r = t.slots.find((m) => !m.job && m.last === i);
+    if (!r && t.slots.length >= De && (r = t.slots.find((m) => !m.job)), !r && t.slots.length < De)
+      try {
+        r = at(n, t);
+      } catch (m) {
+        for (const s of t.queue.splice(0)) s.reject(m);
+        return;
+      }
+    if (!r) return;
+    const c = t.queue.shift();
+    clearTimeout(r.idle), r.job = c, r.last = i;
+    const d = r;
+    r.timer = setTimeout(() => {
+      le(t, d, new Error("Viewer render worker timed out.")), ae(n, t);
+    }, c.timeoutMs), r.worker.postMessage({ id: c.id, source: c.source, options: c.options });
+  }
+}
+function ct(n, t, {
+  create: i,
+  timeoutMs: r = 5e3,
+  signal: c
+}) {
+  return new Promise((d, m) => {
+    const s = Fe.get(i) ?? { slots: [], queue: [] };
+    Fe.set(i, s);
+    let f = !1;
+    const g = () => {
+      f = !0, c?.removeEventListener("abort", p);
+    }, x = {
+      id: ++st,
+      source: n,
+      options: t,
+      timeoutMs: r,
+      resolve: (b) => f || (g(), d(b)),
+      reject: (b) => f || (g(), m(b))
+    }, p = () => {
+      const b = s.queue.indexOf(x);
+      b >= 0 && s.queue.splice(b, 1), x.reject(new Error("Viewer render was aborted."));
+    };
+    c?.addEventListener("abort", p, { once: !0 }), s.queue.push(x), ae(i, s);
+  });
+}
+const fe = /* @__PURE__ */ new WeakMap(), we = (n, t) => fe.get(n)?.get(t)?.face;
+function dt(n, t, i) {
+  const r = fe.get(n) ?? /* @__PURE__ */ new Map();
+  fe.set(n, r);
+  const c = r.get(t);
+  if (c) return void c.refs++;
+  n.fonts.add(i), r.set(t, { face: i, refs: 1 });
+}
+function pe(n, t) {
+  const i = fe.get(n), r = i?.get(t);
+  !r || --r.refs > 0 || (n.fonts.delete(r.face), i.delete(t));
+}
+const lt = "http://www.w3.org/2000/svg", ft = new Set(
   "svg title desc metadata defs style marker g a path rect ellipse circle line polyline polygon text tspan".split(
     " "
   )
-), fe = new Set(
+), ut = new Set(
   "aria-labelledby role id data-id data-phase data-state data-theme xmlns viewBox width height x y x1 y1 x2 y2 cx cy r rx ry d points transform fill fill-rule fill-opacity stroke stroke-opacity stroke-width stroke-linecap stroke-linejoin stroke-dasharray opacity font-family font-size font-weight text-anchor dominant-baseline dy text-decoration marker-start marker-end markerWidth markerHeight markerUnits refX refY orient class clip-path nonce href target rel".split(
     " "
   )
 );
-let me = 0;
-function ue(y, c) {
-  const V = new y.defaultView.DOMParser().parseFromString(c, "image/svg+xml"), s = /* @__PURE__ */ new Map();
-  for (const v of Array.from(V.querySelectorAll("text[font-family]"))) {
-    const l = (v.getAttribute("font-family") ?? "").split(",")[0].trim().replace(/^['"]|['"]$/g, ""), b = v.getAttribute("font-weight") ?? "400";
-    if (!Object.values(ee).some((o) => o.family === l && String(o.weight) === b))
+let mt = 0;
+function ht(n, t) {
+  return new n.defaultView.DOMParser().parseFromString(t, "image/svg+xml");
+}
+function gt(n) {
+  const t = /* @__PURE__ */ new Map();
+  for (const i of Array.from(n.querySelectorAll("text[font-family]"))) {
+    const r = (i.getAttribute("font-family") ?? "").split(",")[0].trim().replace(/^['"]|['"]$/g, ""), c = i.getAttribute("font-weight") ?? "400";
+    if (!Object.values(Oe).some((d) => d.family === r && String(d.weight) === c))
       throw new Error("Runtime SVG requested an unknown bundled font face.");
-    s.set(`${l}:${b}`, { family: l, weight: b });
+    t.set(`${r}:${c}`, { family: r, weight: c });
   }
-  return [...s.values()];
+  return [...t.values()];
 }
-function we(y, c, V) {
-  const s = new y.defaultView.DOMParser().parseFromString(c, "image/svg+xml"), v = /* @__PURE__ */ new Map();
-  for (const l of Array.from(s.querySelectorAll("style"))) {
-    const b = l.textContent ?? "";
-    for (const [, o] of b.matchAll(/@font-face\s*\{([^{}]{1,200000})\}/g)) {
-      const f = /font-family\s*:\s*['"]([^'"]+)['"]/i.exec(o)?.[1], w = /font-weight\s*:\s*(\d{1,4})/i.exec(o)?.[1], p = /src\s*:\s*url\((data:font\/woff2;base64,[A-Za-z0-9+/=]+)\)/i.exec(o)?.[1];
-      !f || !w || !p || Object.values(ee).some((m) => m.family === f && String(m.weight) === w) && v.set(`${f}:${w}`, { family: f, weight: w, data: p });
+function wt(n, t) {
+  const i = /* @__PURE__ */ new Map();
+  for (const r of Array.from(n.querySelectorAll("style"))) {
+    const c = r.textContent ?? "";
+    for (const [, d] of c.matchAll(/@font-face\s*\{([^{}]{1,200000})\}/g)) {
+      const m = /font-family\s*:\s*['"]([^'"]+)['"]/i.exec(d)?.[1], s = /font-weight\s*:\s*(\d{1,4})/i.exec(d)?.[1], f = /src\s*:\s*url\((data:font\/woff2;base64,[A-Za-z0-9+/=]+)\)/i.exec(d)?.[1];
+      !m || !s || !f || Object.values(Oe).some((g) => g.family === m && String(g.weight) === s) && i.set(`${m}:${s}`, { family: m, weight: s, data: f });
     }
   }
-  return V.map((l) => {
-    const b = v.get(`${l.family}:${l.weight}`);
-    if (!b) throw new Error(`Embedded font ${l.family} ${l.weight} is missing.`);
-    return b;
+  return t.map((r) => {
+    const c = i.get(`${r.family}:${r.weight}`);
+    if (!c) throw new Error(`Embedded font ${r.family} ${r.weight} is missing.`);
+    return c;
   });
 }
-function ge(y, c, V, s = 1e5) {
-  const v = new y.defaultView.DOMParser().parseFromString(c, "image/svg+xml");
-  if (v.querySelector("parsererror") || v.documentElement.localName !== "svg")
+function pt(n, t, i, r = 1e5) {
+  if (t.querySelector("parsererror") || t.documentElement.localName !== "svg")
     throw new Error("Runtime returned invalid SVG.");
-  const l = new Set(
-    Array.from(v.querySelectorAll("[id]"), (f) => f.getAttribute("id") ?? "")
+  const c = new Set(
+    Array.from(t.querySelectorAll("[id]"), (s) => s.getAttribute("id") ?? "")
   );
-  let b = 0;
-  const o = (f) => {
-    if (++b > s || !le.has(f.localName))
+  let d = 0;
+  const m = (s) => {
+    if (++d > r || !ft.has(s.localName))
       throw new Error("Runtime SVG exceeded the allowed drawing vocabulary.");
-    const w = y.createElementNS(de, f.localName);
-    for (const { name: p, value: m } of Array.from(f.attributes)) {
-      if (/^on/i.test(p)) continue;
-      if (p === "href") {
-        if (f.localName !== "a") continue;
+    const f = n.createElementNS(lt, s.localName);
+    for (const { name: g, value: x } of Array.from(s.attributes)) {
+      if (/^on/i.test(g)) continue;
+      if (g === "href") {
+        if (s.localName !== "a") continue;
         try {
-          const a = new URL(m, y.baseURI);
-          (a.protocol === "http:" || a.protocol === "https:") && w.setAttribute("href", a.href);
+          const b = new URL(x, n.baseURI);
+          (b.protocol === "http:" || b.protocol === "https:") && f.setAttribute("href", b.href);
         } catch {
         }
         continue;
       }
-      if (!fe.has(p) && !/^data-[a-z0-9-]+$/.test(p)) continue;
-      const x = [...m.matchAll(/url\(#([^)]*)\)/g)].map((a) => a[1]);
-      /url\s*\(/i.test(m) && (x.length === 0 || x.some((a) => !l.has(a))) || p === "aria-labelledby" && m.split(/\s+/).some((a) => !l.has(a)) || w.setAttribute(p, m);
+      if (!ut.has(g) && !/^data-[a-z0-9-]+$/.test(g)) continue;
+      const p = [...x.matchAll(/url\(#([^)]*)\)/g)].map((b) => b[1]);
+      /url\s*\(/i.test(x) && (p.length === 0 || p.some((b) => !c.has(b))) || g === "aria-labelledby" && x.split(/\s+/).some((b) => !c.has(b)) || f.setAttribute(g, x);
     }
-    f.localName === "a" && w.getAttribute("target") === "_blank" && w.setAttribute("rel", "noopener noreferrer");
-    for (const p of Array.from(f.childNodes))
-      if (p.nodeType === 1) w.append(o(p));
-      else if (p.nodeType === 3) {
-        const m = p.nodeValue ?? "";
-        w.append(
-          y.createTextNode(
-            f.localName === "style" && V ? m.replace(/@font-face\s*\{[^{}]*\}/g, "") : m
+    s.localName === "a" && f.getAttribute("target") === "_blank" && f.setAttribute("rel", "noopener noreferrer");
+    for (const g of Array.from(s.childNodes))
+      if (g.nodeType === 1) f.append(m(g));
+      else if (g.nodeType === 3) {
+        const x = g.nodeValue ?? "";
+        f.append(
+          n.createTextNode(
+            s.localName === "style" && i ? x.replace(/@font-face\s*\{[^{}]*\}/g, "") : x
           )
         );
       }
-    return w;
+    return f;
   };
-  return o(v.documentElement);
+  return m(t.documentElement);
 }
-function K(y, c, V) {
+function de(n, t, i) {
   return {
     ok: !1,
-    reason: y,
-    diagnostics: [{ code: c, severity: "error", message: V, itemIds: [] }]
+    reason: n,
+    diagnostics: [{ code: t, severity: "error", message: i, itemIds: [] }]
   };
 }
-function be(y, c = {}) {
-  const V = y?.ownerDocument?.defaultView;
-  if (!V || !(y instanceof V.HTMLElement))
+function bt(n, t = {}) {
+  const i = n?.ownerDocument?.defaultView;
+  if (!i || !(n instanceof i.HTMLElement))
     throw new TypeError("host must be an HTMLElement.");
-  if (y.childNodes.length) throw new Error("Viewer host must be empty and exclusively owned.");
-  if ((c.execution ?? { mode: "worker" }).mode === "worker" && c.render?.links?.mode === "safe" && c.render.links.resolve)
+  if (n.childNodes.length) throw new Error("Viewer host must be empty and exclusively owned.");
+  if ((t.execution ?? { mode: "worker" }).mode === "worker" && t.render?.links?.mode === "safe" && t.render.links.resolve)
     throw new TypeError('A link resolver requires execution: { mode: "main" }.');
-  const s = y.ownerDocument, v = V, l = s.createElement("section");
-  l.className = "draft-viewer", c.outline !== "visible" && l.classList.add("draft-viewer--outline-hidden"), l.setAttribute("aria-label", c.label ?? "Diagram viewer");
-  const b = s.createElement("div");
-  b.className = "draft-viewer__toolbar", b.setAttribute("role", "toolbar"), b.setAttribute("aria-label", "Diagram controls");
-  const o = s.createElement("div");
-  o.className = "draft-viewer__viewport", o.tabIndex = 0, o.setAttribute("aria-label", c.label ?? "Diagram");
-  const f = s.createElement("p");
+  const r = n.ownerDocument, c = i, d = r.createElement("section");
+  d.className = "draft-viewer", t.outline !== "visible" && d.classList.add("draft-viewer--outline-hidden"), d.setAttribute("aria-label", t.label ?? "Diagram viewer");
+  const m = r.createElement("div");
+  m.className = "draft-viewer__toolbar", m.setAttribute("role", "toolbar"), m.setAttribute("aria-label", "Diagram controls");
+  const s = r.createElement("div");
+  s.className = "draft-viewer__viewport", s.tabIndex = 0, s.setAttribute("aria-label", t.label ?? "Diagram");
+  const f = r.createElement("p");
   f.className = "draft-viewer__status", f.setAttribute("role", "status"), f.setAttribute("aria-live", "polite");
-  const w = s.createElement("ol");
-  w.className = "draft-viewer__outline", w.setAttribute("aria-label", "Diagram outline"), l.append(b, o, f, w), y.append(l);
-  const p = `draftViewer${(++me).toString(36)}${Math.random().toString(36).slice(2, 9)}`;
-  let m = 0, x = !1, a = { centerX: 0, centerY: 0, zoom: 1 }, _ = !1, u, C, q, te = 0;
-  const N = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map(), L = (e, r) => {
-    for (const t of U.get(e) ?? [])
+  const g = r.createElement("ol");
+  g.className = "draft-viewer__outline", g.setAttribute("aria-label", "Diagram outline"), d.append(m, s, f, g);
+  const x = nt(n, (e) => d.style.colorScheme = e ? "dark" : "light"), p = et(r, {
+    detail: t.detail,
+    onOverflow: () => h()
+  });
+  s.append(p.el), n.append(d);
+  const b = `draftViewer${(++mt).toString(36)}${Math.random().toString(36).slice(2, 9)}`;
+  let P = 0, L = !1, E = { centerX: 0, centerY: 0, zoom: 1 }, re = !1, k, Y = { width: 0, height: 0 };
+  const W = /* @__PURE__ */ new Set(), G = /* @__PURE__ */ new Map(), J = /* @__PURE__ */ new Map(), F = (e, a) => {
+    for (const o of G.get(e) ?? [])
       try {
-        t(r);
+        o(a);
       } catch {
       }
-  }, j = (e, r) => {
-    const t = s.createElement("button");
-    t.type = "button", t.textContent = e, t.setAttribute("aria-label", e), t.addEventListener("click", r), b.append(t);
-  }, re = () => {
-    if (!u) return 1;
-    const e = o.getBoundingClientRect(), [, , r, t] = u.viewBox;
-    return Math.min(e.width / r, e.height / t);
-  }, R = () => {
-    const e = o.querySelector("svg");
-    if (!e || !u) return;
-    const [r, t] = u.viewBox, S = o.getBoundingClientRect(), g = a.zoom, n = S.width / 2 - (a.centerX - r) * g, h = S.height / 2 - (a.centerY - t) * g;
-    e.style.transformOrigin = "0 0", e.style.transform = `translate(${n}px, ${h}px) scale(${g})`, e.style.width = `${u.width}px`, e.style.height = `${u.height}px`, e.style.maxWidth = "none";
-  }, Y = (e = "fit") => {
-    if (!u) return;
-    const r = o.getBoundingClientRect();
-    if (!r.width || !r.height) return;
-    const [t, S, g, n] = u.viewBox;
-    a = {
-      centerX: t + g / 2,
-      centerY: S + n / 2,
-      zoom: Math.min(1, re() * 0.92)
-    }, _ = !1, R(), L("camera", { camera: { ...a }, reason: e });
-  }, P = (e) => {
-    a.zoom = Math.max(0.02, Math.min(8, a.zoom * e)), _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
+  }, U = (e, a) => {
+    const o = r.createElement("button");
+    o.type = "button", o.textContent = e, o.setAttribute("aria-label", e), o.addEventListener("click", a), m.append(o);
   }, ne = () => {
-    a.zoom = 1, _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
+    const e = s.querySelector("svg");
+    if (!e || !k) return;
+    const [a, o] = k.viewBox, v = Y, A = E.zoom, C = v.width / 2 - (E.centerX - a) * A, u = v.height / 2 - (E.centerY - o) * A;
+    e.style.transformOrigin = "0 0", e.style.transform = `translate(${C}px, ${u}px) scale(${A})`, e.style.width = `${k.width}px`, e.style.height = `${k.height}px`, e.style.maxWidth = "none", p.place(C - a * A, u - o * A, A);
+    const q = p.el.dataset.draftDetail;
+    s.dataset.draftDetail !== q && (s.dataset.draftDetail = q);
+  }, se = () => {
+    const e = new Set(p.bodyIds());
+    for (const a of s.querySelectorAll(":scope > svg [data-id]"))
+      a.toggleAttribute("data-draft-body", e.has(a.getAttribute("data-id")));
+    F("anchors", { anchors: p.anchors() });
+  };
+  let l = {
+    revision: 0,
+    diagnostics: [],
+    stale: !1
+  };
+  const h = () => F("diagnostics", {
+    ...l,
+    diagnostics: [...l.diagnostics, ...p.warnings()]
+  });
+  let w = "user", M = 0;
+  const _ = (e) => c.requestAnimationFrame ? c.requestAnimationFrame(e) : c.setTimeout(e, 16), S = (e) => {
+    w = e, !M && (M = _(() => {
+      M = 0, L || F("camera", { camera: { ...E }, reason: w });
+    }));
+  }, z = (e, a, o) => {
+    const v = { ...e, zoom: ye(e.zoom) };
+    return re = o, Ke(E, v) ? "unchanged" : (E = v, ne(), S(a), "moved");
+  }, R = () => {
+    const [e, a, o, v] = k.viewBox;
+    return { x: e, y: a, width: o, height: v };
   };
-  c.toolbar !== !1 && (j("Zoom in", () => P(1.2)), j("Zoom out", () => P(1 / 1.2)), j("Fit diagram", () => Y()), j("Actual size", ne));
-  const J = new v.ResizeObserver(() => {
-    u && !o.getBoundingClientRect().width || (_ ? R() : Y("resize"));
+  let N = null;
+  const B = (e) => N ? Ne(N, e) : void 0;
+  let D;
+  const $ = (e) => L ? "unchanged" : !k || !Y.width || !Y.height ? (D = e, "pending") : (D = void 0, e()), I = (e, a, o) => $(() => {
+    const v = e ? Ge(e.flatMap((A) => B(A) ?? [])) : R();
+    return v ? z(Ie(v, Y, a), o, !!e) : "missing";
+  }), Q = (e = "fit") => I(void 0, void 0, e), Z = (e) => z({ ...E, zoom: E.zoom * e }, "user", !0), ue = () => z({ ...E, zoom: 1 }, "user", !0);
+  U("Zoom in", () => Z(1.2)), U("Zoom out", () => Z(1 / 1.2)), U("Fit diagram", () => Q()), U("Actual size", ue), m.hidden = t.toolbar === !1;
+  const ee = new c.ResizeObserver((e) => {
+    const a = e.at(-1)?.contentRect;
+    a && (Y = { width: a.width, height: a.height }), !(k && !Y.width) && (D ? $(D) : re ? ne() : Q("resize"));
   });
-  J.observe(o);
-  const X = (e, r) => {
-    f.textContent = r.map((t) => t.message).join(" "), l.classList.add("draft-viewer--stale"), L("diagnostics", { revision: e, diagnostics: r, stale: !!u });
-  }, oe = async (e, r) => {
-    const t = ue(s, e);
-    if (!t.length) return [];
-    if (!s.fonts) throw new Error("The host document cannot load diagram fonts.");
-    if (r === "host") {
-      for (const n of t) {
-        const h = `${n.weight} 12px "${n.family}"`;
-        if (!(await s.fonts.load(h)).some(
-          (E) => E.family.replace(/^['"]|['"]$/g, "") === n.family && E.weight === n.weight && E.status === "loaded"
-        ) || !s.fonts.check(h))
-          throw new Error(`Host font ${n.family} ${n.weight} is unavailable.`);
+  ee.observe(s);
+  const H = (e, a) => {
+    f.textContent = a.map((o) => o.message).join(" "), d.classList.add("draft-viewer--stale"), l = { revision: e, diagnostics: a, stale: !!k }, h();
+  }, ie = async (e, a) => {
+    const o = gt(e);
+    if (!o.length) return [];
+    if (!r.fonts) throw new Error("The host document cannot load diagram fonts.");
+    if (a === "host") {
+      for (const u of o) {
+        const q = `${u.weight} 12px "${u.family}"`;
+        if (!(await r.fonts.load(q)).some(
+          (V) => V.family.replace(/^['"]|['"]$/g, "") === u.family && V.weight === u.weight && V.status === "loaded"
+        ) || !r.fonts.check(q))
+          throw new Error(`Host font ${u.family} ${u.weight} is unavailable.`);
       }
       return [];
     }
-    const S = we(s, e, t), g = v.FontFace;
-    if (!g) throw new Error("The browser cannot load embedded diagram fonts.");
+    const v = o.map((u) => `${u.family}:${u.weight}`);
+    if (v.every((u) => we(r, u)))
+      return v.map((u) => ({ key: u, face: we(r, u) }));
+    const A = wt(e, o), C = c.FontFace;
+    if (!C) throw new Error("The browser cannot load embedded diagram fonts.");
     return Promise.all(
-      S.map(async (n) => {
-        const h = `${n.family}:${n.weight}`, F = N.get(h);
-        if (F?.status === "loaded" && Array.from(s.fonts).includes(F))
-          return { key: h, face: F };
-        const d = new g(n.family, `url("${n.data}")`, { weight: n.weight });
-        if (await d.load(), d.status !== "loaded")
-          throw new Error(`Embedded font ${n.family} ${n.weight} did not load.`);
-        return { key: h, face: d };
+      A.map(async (u) => {
+        const q = `${u.family}:${u.weight}`, te = we(r, q);
+        if (te) return { key: q, face: te };
+        const T = new C(u.family, `url("${u.data}")`, { weight: u.weight });
+        if (await T.load(), T.status !== "loaded")
+          throw new Error(`Embedded font ${u.family} ${u.weight} did not load.`);
+        return { key: q, face: T };
       })
     );
-  }, z = (e) => {
-    const r = q;
-    q = void 0, r && (v.clearTimeout(r.timer), r.cleanup(), r.finish(void 0, e ?? new Error("Viewer render was cancelled."))), C?.terminate(), C = void 0;
-  }, ae = (e, r, t) => (c.execution ?? { mode: "worker" }).mode === "main" ? ce(e, { ...r, signal: t }) : new Promise((S, g) => {
-    const n = ++te;
-    let h = !1;
-    const F = () => {
-      C && (C.removeEventListener("message", E), C.removeEventListener("error", W), C.removeEventListener("messageerror", G), t?.removeEventListener("abort", H));
-    }, d = (k, D) => {
-      if (h) return;
-      h = !0;
-      const i = q;
-      i?.id === n && (q = void 0, v.clearTimeout(i.timer), i.cleanup()), D ? g(D) : S(k);
-    }, E = (k) => {
-      k.data?.id === n && d(k.data.result);
-    }, W = (k) => {
-      k.preventDefault(), z(new Error(k.message || "Viewer render worker failed."));
-    }, G = () => z(new Error("Viewer render worker returned an unreadable result.")), H = () => z(new Error("Viewer render was aborted."));
-    try {
-      C ??= c.execution?.mode === "worker" && c.execution.createWorker ? c.execution.createWorker() : new Worker(new URL(
-        /* @vite-ignore */
-        "" + new URL("assets/render.worker-dvseyGmC.js", import.meta.url).href,
-        import.meta.url
-      ), { type: "module" }), C.addEventListener("message", E), C.addEventListener("error", W), C.addEventListener("messageerror", G), t?.addEventListener("abort", H, { once: !0 });
-      const k = c.execution?.mode === "worker" ? c.execution.timeoutMs ?? 5e3 : 5e3, D = v.setTimeout(
-        () => z(new Error("Viewer render worker timed out.")),
-        k
-      );
-      q = { id: n, timer: D, finish: d, cleanup: F }, C.postMessage({ id: n, source: e, options: r });
-    } catch (k) {
-      z(
-        k instanceof Error ? k : new Error("Viewer render worker could not start.")
-      ), g(k);
+  }, Ce = async (e, a, o) => {
+    const v = t.execution ?? { mode: "worker" };
+    if (v.mode === "main") {
+      const { renderSvg: A } = await import("./render-CsJYFD3o.js");
+      return A(e, { ...a, signal: o });
     }
-  });
-  let A;
-  const ie = (e) => {
-    const r = o.querySelector("svg"), t = r?.querySelector(":scope > rect");
-    return e === o || e === r || e === t;
+    return ct(e, a, {
+      create: v.createWorker,
+      timeoutMs: v.timeoutMs,
+      signal: o
+    });
   };
-  o.addEventListener(
+  let O;
+  const qe = (e) => {
+    const a = s.querySelector("svg"), o = a?.querySelector(":scope > rect");
+    return e === s || e === a || e === o;
+  }, ve = (e) => !(e.target instanceof c.Node) || !s.contains(e.target) || p.el.contains(e.target), Ve = (e) => e.composedPath().some((a) => a instanceof c.Element && a.hasAttribute("data-draft-input"));
+  s.addEventListener(
     "wheel",
     (e) => {
-      e.preventDefault(), P(e.deltaY < 0 ? 1.1 : 1 / 1.1);
+      Ve(e) || (e.preventDefault(), Z(e.deltaY < 0 ? 1.1 : 1 / 1.1));
     },
     { passive: !1 }
-  ), o.addEventListener("pointerdown", (e) => {
-    !ie(e.target) || !u || (A = {
+  ), s.addEventListener("pointerdown", (e) => {
+    !qe(e.target) || !k || (O = {
       pointerId: e.pointerId,
       x: e.clientX,
       y: e.clientY,
-      centerX: a.centerX,
-      centerY: a.centerY,
-      scale: a.zoom
-    }, o.setPointerCapture(e.pointerId));
-  }), o.addEventListener("pointermove", (e) => {
-    A && (a.centerX = A.centerX - (e.clientX - A.x) / A.scale, a.centerY = A.centerY - (e.clientY - A.y) / A.scale, _ = !0, R());
+      centerX: E.centerX,
+      centerY: E.centerY,
+      scale: E.zoom
+    }, s.setPointerCapture(e.pointerId));
+  }), s.addEventListener("pointermove", (e) => {
+    O && z(
+      {
+        centerX: O.centerX - (e.clientX - O.x) / O.scale,
+        centerY: O.centerY - (e.clientY - O.y) / O.scale,
+        zoom: E.zoom
+      },
+      "user",
+      !0
+    );
   });
-  const Q = () => {
-    if (A) {
+  const be = () => {
+    if (O) {
       try {
-        o.releasePointerCapture(A.pointerId);
+        s.releasePointerCapture(O.pointerId);
       } catch {
       }
-      A = void 0, L("camera", { camera: { ...a }, reason: "user" });
+      O = void 0;
     }
   };
-  o.addEventListener("pointerup", Q), o.addEventListener("pointercancel", Q), o.addEventListener("click", (e) => {
-    const r = e.target instanceof v.Element ? e.target : null, t = r?.closest("a[href]");
-    if (t && o.contains(t)) {
-      const n = t.querySelector("[data-id]")?.getAttribute("data-id"), h = t.getAttribute("href");
-      n && h && L("link", {
-        itemId: n,
-        href: h,
-        target: t.getAttribute("target") === "_blank" ? "_blank" : "_self",
+  s.addEventListener("pointerup", be), s.addEventListener("pointercancel", be), s.addEventListener("click", (e) => {
+    if (ve(e)) return;
+    const a = e.target instanceof c.Element ? e.target : null, o = a?.closest("a[href]");
+    if (o && s.contains(o)) {
+      const C = o.querySelector("[data-id]")?.getAttribute("data-id"), u = o.getAttribute("href");
+      C && u && F("link", {
+        itemId: C,
+        href: u,
+        target: o.getAttribute("target") === "_blank" ? "_blank" : "_self",
         preventDefault: () => e.preventDefault()
       });
       return;
     }
-    const S = r?.closest("[data-id]")?.getAttribute("data-id"), g = u?.items.find((n) => n.id === S);
-    g && L("itemactivate", { id: g.id, kind: g.kind, input: "pointer", revision: m });
-  }), o.addEventListener("keydown", (e) => {
-    e.target !== o || e.altKey || e.ctrlKey || e.metaKey || (e.key === "+" || e.key === "=" ? P(1.2) : e.key === "-" ? P(1 / 1.2) : e.key.toLowerCase() === "f" && Y());
+    const v = a?.closest("[data-id]")?.getAttribute("data-id"), A = k?.items.find((C) => C.id === v);
+    A && F("itemactivate", { id: A.id, kind: A.kind, input: "pointer", revision: P });
+  }), s.addEventListener("contextmenu", (e) => {
+    if (ve(e)) return;
+    const o = (e.target instanceof c.Element ? e.target : null)?.closest("[data-id]")?.getAttribute("data-id") ?? null, v = o ? k?.items.find((A) => A.id === o) : void 0;
+    F("contextmenu", {
+      id: v?.id ?? null,
+      ...v ? { kind: v.kind } : {},
+      clientX: e.clientX,
+      clientY: e.clientY,
+      preventDefault: () => e.preventDefault()
+    });
+  }), p.el.addEventListener("focusin", (e) => {
+    const a = e.target instanceof c.Node ? p.idOf(e.target) : void 0;
+    a && !p.pressed() && xe.reveal(a);
+  }), p.el.addEventListener("keydown", (e) => {
+    e.key === "Escape" && s.focus({ preventScroll: !0 });
+  }), p.el.addEventListener(
+    "draft-anchor-focus-lost",
+    () => s.focus({ preventScroll: !0 })
+  ), s.addEventListener("keydown", (e) => {
+    e.target !== s || e.altKey || e.ctrlKey || e.metaKey || (e.key === "+" || e.key === "=" ? Z(1.2) : e.key === "-" ? Z(1 / 1.2) : e.key.toLowerCase() === "f" && Q());
   });
-  const se = (e, r) => {
-    for (const [t, S] of B)
-      t !== e && S.resolve({ status: r, revision: t });
+  const je = (e, a) => {
+    for (const [o, v] of J)
+      o !== e && v.resolve({ status: a, revision: o });
   };
-  return {
-    update: (e, r = {}) => {
-      const t = ++m;
-      return x ? Promise.resolve({ status: "destroyed", revision: t }) : (se(t, "superseded"), z(new Error("Viewer update was superseded.")), new Promise((S) => {
-        let g = !1;
-        const n = (d) => {
-          if (g) return;
-          g = !0, r.signal?.removeEventListener("abort", h), B.delete(t);
-          const E = x ? { status: "destroyed", revision: t } : t !== m ? { status: "superseded", revision: t } : r.signal?.aborted ? { status: "aborted", revision: t } : d;
-          S(E);
-        }, h = () => {
-          t === m && (c.execution ?? { mode: "worker" }).mode === "worker" && z(new Error("Viewer render was aborted.")), n({ status: "aborted", revision: t });
-        };
-        if (B.set(t, { resolve: n }), r.signal?.aborted) {
-          h();
+  let me = () => {
+  };
+  const Pe = (e, a = {}) => {
+    const o = ++P;
+    if (L) return Promise.resolve({ status: "destroyed", revision: o });
+    je(o, "superseded"), me();
+    const v = new AbortController();
+    return me = () => v.abort(), new Promise((A) => {
+      let C = !1;
+      const u = (T) => {
+        if (C) return;
+        C = !0, a.signal?.removeEventListener("abort", q), J.delete(o);
+        const V = L ? { status: "destroyed", revision: o } : o !== P ? { status: "superseded", revision: o } : a.signal?.aborted ? { status: "aborted", revision: o } : T;
+        A(V);
+      }, q = () => {
+        v.abort(), u({ status: "aborted", revision: o });
+      };
+      if (J.set(o, { resolve: u }), a.signal?.aborted) {
+        q();
+        return;
+      }
+      a.signal?.addEventListener("abort", q, { once: !0 });
+      const te = {
+        ...t.render ?? {},
+        target: "inline",
+        idPrefix: b,
+        fonts: t.render?.fonts ?? "embed",
+        colorScheme: "auto",
+        ...a.state !== void 0 ? { state: a.state } : {}
+      };
+      Ce(e, te, v.signal).then(async (T) => {
+        if (L || o !== P || a.signal?.aborted) {
+          u({ status: "superseded", revision: o });
           return;
         }
-        r.signal?.addEventListener("abort", h, { once: !0 });
-        const F = {
-          ...c.render ?? {},
-          target: "inline",
-          idPrefix: p,
-          fonts: c.render?.fonts ?? "embed",
-          ...r.state !== void 0 ? { state: r.state } : {}
-        };
-        ae(e, F, r.signal).then(async (d) => {
-          if (x || t !== m || r.signal?.aborted) {
-            n({ status: "superseded", revision: t });
-            return;
-          }
-          if (!d.ok) {
-            X(t, d.diagnostics), n({ status: "error", revision: t, error: d });
-            return;
-          }
-          let E;
-          try {
-            E = await oe(d.value.svg, F.fonts ?? "embed");
-          } catch (i) {
-            if (x || t !== m || r.signal?.aborted) {
-              n({
-                status: r.signal?.aborted ? "aborted" : "superseded",
-                revision: t
-              });
-              return;
-            }
-            const $ = K(
-              "environment",
-              "DRAFT_FONT_UNAVAILABLE",
-              i instanceof Error ? i.message : "Diagram fonts are unavailable."
-            );
-            X(t, $.diagnostics), n({ status: "error", revision: t, error: $ });
-            return;
-          }
-          if (x || t !== m || r.signal?.aborted) {
-            n({ status: "superseded", revision: t });
-            return;
-          }
-          let W;
-          try {
-            W = ge(s, d.value.svg, F.fonts !== "host");
-          } catch (i) {
-            const $ = i instanceof Error ? i.message : "Could not build safe SVG.", M = K("internal", "DRAFT_VIEWER_DOM", $);
-            X(t, M.diagnostics), n({ status: "error", revision: t, error: M });
-            return;
-          }
-          const G = [];
-          try {
-            for (const i of E)
-              N.has(i.key) || (s.fonts.add(i.face), N.set(i.key, i.face), G.push(i));
-          } catch (i) {
-            for (const { key: M, face: Z } of G)
-              s.fonts.delete(Z), N.delete(M);
-            const $ = K(
-              "environment",
-              "DRAFT_FONT_UNAVAILABLE",
-              i instanceof Error ? i.message : "Loaded fonts could not be registered."
-            );
-            X(t, $.diagnostics), n({ status: "error", revision: t, error: $ });
-            return;
-          }
-          const H = !!u;
-          u = d.value, o.replaceChildren(W), w.replaceChildren(
-            ...u.items.map((i) => {
-              const $ = s.createElement("li"), M = s.createElement("button");
-              M.type = "button";
-              const Z = i.label.trim() || (i.kind === "edge" ? `${i.from ?? "?"} to ${i.to ?? "?"}` : i.id);
-              return M.textContent = `${i.kind}: ${Z}`, M.dataset.itemId = i.id, M.addEventListener("click", () => {
-                L("itemactivate", {
-                  id: i.id,
-                  kind: i.kind,
-                  input: "keyboard",
-                  revision: t
-                });
-                const O = Array.from(o.querySelectorAll("[data-id]")).find(
-                  (T) => T.getAttribute("data-id") === i.id
-                );
-                if (O) {
-                  const T = O.getBoundingClientRect(), I = o.getBoundingClientRect();
-                  (T.width || T.height) && I.width && I.height && (a = {
-                    centerX: a.centerX + (T.left + T.width / 2 - (I.left + I.width / 2)) / a.zoom,
-                    centerY: a.centerY + (T.top + T.height / 2 - (I.top + I.height / 2)) / a.zoom,
-                    zoom: Math.max(1, a.zoom)
-                  }, _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" }));
-                }
-              }), $.append(M), $;
-            })
-          );
-          const k = new Set(E.map((i) => i.key));
-          for (const [i, $] of N)
-            k.has(i) || (s.fonts.delete($), N.delete(i));
-          l.classList.remove("draft-viewer--stale"), f.textContent = d.diagnostics.map((i) => i.message).join(" "), !H || r.camera === "fit" ? Y() : R();
-          const D = {
-            status: "committed",
-            revision: t,
-            value: u,
-            diagnostics: d.diagnostics
-          };
-          n(D), L("render", { revision: t, value: u }), L("diagnostics", { revision: t, diagnostics: d.diagnostics, stale: !1 });
-        }).catch((d) => {
-          if (x || t !== m || r.signal?.aborted) {
-            n({
-              status: r.signal?.aborted ? "aborted" : "superseded",
-              revision: t
+        if (!T.ok) {
+          H(o, T.diagnostics), u({ status: "error", revision: o, error: T });
+          return;
+        }
+        let V, he;
+        try {
+          he = ht(r, T.value.svg), V = await ie(he, te.fonts ?? "embed");
+        } catch (y) {
+          if (L || o !== P || a.signal?.aborted) {
+            u({
+              status: a.signal?.aborted ? "aborted" : "superseded",
+              revision: o
             });
             return;
           }
-          const E = K(
+          const j = de(
+            "environment",
+            "DRAFT_FONT_UNAVAILABLE",
+            y instanceof Error ? y.message : "Diagram fonts are unavailable."
+          );
+          H(o, j.diagnostics), u({ status: "error", revision: o, error: j });
+          return;
+        }
+        if (L || o !== P || a.signal?.aborted) {
+          u({ status: "superseded", revision: o });
+          return;
+        }
+        let ge;
+        try {
+          ge = pt(r, he, te.fonts !== "host");
+        } catch (y) {
+          const j = y instanceof Error ? y.message : "Could not build safe SVG.", X = de("internal", "DRAFT_VIEWER_DOM", j);
+          H(o, X.diagnostics), u({ status: "error", revision: o, error: X });
+          return;
+        }
+        const ke = [];
+        try {
+          for (const y of V)
+            W.has(y.key) || (dt(r, y.key, y.face), W.add(y.key), ke.push(y.key));
+        } catch (y) {
+          for (const X of ke)
+            pe(r, X), W.delete(X);
+          const j = de(
             "environment",
-            "DRAFT_VIEWER_WORKER",
-            d instanceof Error ? d.message : "Viewer render failed."
+            "DRAFT_FONT_UNAVAILABLE",
+            y instanceof Error ? y.message : "Loaded fonts could not be registered."
           );
-          X(t, E.diagnostics), n({ status: "error", revision: t, error: E });
-        });
-      }));
+          H(o, j.diagnostics), u({ status: "error", revision: o, error: j });
+          return;
+        }
+        const Ye = !!k;
+        k = T.value, N = k.geometry ? { ...k.geometry, revision: o } : null;
+        const Ae = s.querySelector(":scope > svg");
+        Ae ? Ae.replaceWith(ge) : s.prepend(ge), p.setGeometry(N);
+        const Se = g.getRootNode().activeElement, Le = g.contains(Se) ? Se.dataset.itemId : void 0;
+        g.replaceChildren(
+          ...k.items.map((y) => {
+            const j = r.createElement("li"), X = r.createElement("button");
+            X.type = "button";
+            const Ze = y.label.trim() || (y.kind === "edge" ? `${y.from ?? "?"} to ${y.to ?? "?"}` : y.id);
+            return X.textContent = `${y.kind}: ${Ze}`, X.dataset.itemId = y.id, X.addEventListener("click", () => {
+              F("itemactivate", {
+                id: y.id,
+                kind: y.kind,
+                input: "keyboard",
+                revision: o
+              });
+              const Me = Array.from(s.querySelectorAll("[data-id]")).find(
+                (K) => K.getAttribute("data-id") === y.id
+              );
+              if (Me) {
+                const K = Me.getBoundingClientRect(), oe = s.getBoundingClientRect();
+                (K.width || K.height) && oe.width && oe.height && z(
+                  {
+                    centerX: E.centerX + (K.left + K.width / 2 - (oe.left + oe.width / 2)) / E.zoom,
+                    centerY: E.centerY + (K.top + K.height / 2 - (oe.top + oe.height / 2)) / E.zoom,
+                    zoom: Math.max(1, E.zoom)
+                  },
+                  "user",
+                  !0
+                );
+              }
+            }), j.append(X), j;
+          })
+        ), Le !== void 0 && (Array.from(g.querySelectorAll("button")).find(
+          (j) => j.dataset.itemId === Le
+        ) ?? s).focus({ preventScroll: !0 });
+        const We = new Set(V.map((y) => y.key));
+        for (const y of W)
+          We.has(y) || (pe(r, y), W.delete(y));
+        d.classList.remove("draft-viewer--stale"), f.textContent = T.diagnostics.map((y) => y.message).join(" "), D ? $(D) : !Ye || a.camera === "fit" ? Q() : ne();
+        const Be = {
+          status: "committed",
+          revision: o,
+          value: k,
+          diagnostics: T.diagnostics
+        };
+        x.check(), F("render", { revision: o, value: k, geometry: N }), l = { revision: o, diagnostics: T.diagnostics, stale: !1 }, h(), se(), u(Be);
+      }).catch((T) => {
+        if (L || o !== P || a.signal?.aborted) {
+          u({
+            status: a.signal?.aborted ? "aborted" : "superseded",
+            revision: o
+          });
+          return;
+        }
+        const V = de(
+          "environment",
+          "DRAFT_VIEWER_WORKER",
+          T instanceof Error ? T.message : "Viewer render failed."
+        );
+        H(o, V.diagnostics), u({ status: "error", revision: o, error: V });
+      });
+    });
+  };
+  let ce, Ee;
+  const Xe = new Promise((e) => Ee = e), xe = {
+    get ready() {
+      return ce ?? Xe;
+    },
+    update: (e, a) => {
+      const o = Pe(e, a), v = o.then(
+        (A) => A.status === "superseded" && ce !== v ? ce : A
+      );
+      return ce = v, v.then(Ee), o;
+    },
+    geometry: () => N,
+    anchor(e) {
+      if (L) return;
+      const a = p.warnings().length;
+      p.setSlots(e), ne(), se(), (p.warnings().length || a) && h();
     },
-    on(e, r) {
-      if (x) return () => {
+    on(e, a) {
+      if (L) return () => {
       };
-      const t = U.get(e) ?? /* @__PURE__ */ new Set();
-      return t.add(r), U.set(e, t), () => t.delete(r);
+      const o = G.get(e) ?? /* @__PURE__ */ new Set();
+      return o.add(a), G.set(e, o), () => o.delete(a);
     },
-    getCamera: () => ({ ...a }),
+    getCamera: () => ({ ...E }),
     setCamera(e) {
-      x || !Number.isFinite(e.centerX) || !Number.isFinite(e.centerY) || !Number.isFinite(e.zoom) || e.zoom <= 0 || (a = { ...e }, _ = !0, R(), L("camera", { camera: { ...a }, reason: "api" }));
-    },
-    fit: () => {
-      x || Y();
+      L || !Number.isFinite(e.centerX) || !Number.isFinite(e.centerY) || !Number.isFinite(e.zoom) || e.zoom <= 0 || z({ ...e }, "api", !0);
     },
+    fit: (e, a) => I(e, a, "api"),
+    reveal: (e, a) => $(() => {
+      const o = B(e);
+      return o ? z(Ue(E, o, Y, a), "api", !0) : "missing";
+    }),
     focusItem(e) {
-      if (!u?.items.some((t) => t.id === e)) return !1;
-      const r = Array.from(w.querySelectorAll("button")).find(
-        (t) => t.dataset.itemId === e
+      if (!k?.items.some((o) => o.id === e)) return !1;
+      const a = Array.from(g.querySelectorAll("button")).find(
+        (o) => o.dataset.itemId === e
       );
-      return r?.focus(), !!r;
+      return a?.focus(), !!a;
     },
     destroy() {
-      if (!x) {
-        if (x = !0, m++, A) {
+      if (!L) {
+        if (L = !0, x.stop(), P++, D = void 0, M && (c.cancelAnimationFrame ?? c.clearTimeout)(M), O) {
           try {
-            o.releasePointerCapture(A.pointerId);
+            s.releasePointerCapture(O.pointerId);
           } catch {
           }
-          A = void 0;
+          O = void 0;
         }
-        for (const [e, r] of B)
-          r.resolve({ status: "destroyed", revision: e });
-        B.clear(), z(new Error("Viewer was destroyed."));
-        for (const e of N.values()) s.fonts.delete(e);
-        N.clear(), J.disconnect(), U.clear(), y.replaceChildren(), u = void 0;
+        for (const [e, a] of J)
+          a.resolve({ status: "destroyed", revision: e });
+        J.clear(), me();
+        for (const e of W) pe(r, e);
+        W.clear(), ee.disconnect(), F("anchors", { anchors: [] }), p.destroy(), G.clear(), n.replaceChildren(), k = void 0;
       }
     }
   };
+  return xe;
 }
 export {
-  Ae as fontMetricsVersion,
-  be as mountViewer,
-  ke as runtimeVersion
+  ze as ZOOM_MAX,
+  $e as ZOOM_MIN,
+  kt as fontMetricsVersion,
+  bt as mountViewer,
+  St as runtimeVersion
 };