@draftably/runtime 0.2.0 → 0.4.0

package/dist/viewer.js

@@ -1,438 +1,786 @@
-import { r as ce, F as ee } from "./render-ZzhO-2H6.js";
-import { f as Ee, a as ke } from "./render-ZzhO-2H6.js";
-const de = "http://www.w3.org/2000/svg", le = new Set(
+import { i as Ne, F as Ie } from "./geometry-DfUVE8b2.js";
+import { f as vt } from "./geometry-DfUVE8b2.js";
+import { r as Et } from "./version-CKs2Vl8m.js";
+const $e = 0.02, ze = 8, Ze = 32, ye = (o, t = $e, a = ze) => Math.min(Math.max(o, Math.max($e, t)), Math.min(ze, a));
+function Oe(o = {}) {
+  const t = o.padding ?? Ze;
+  return typeof t == "number" ? { top: t, right: t, bottom: t, left: t } : t;
+}
+function Ge(o) {
+  if (!o.length) return;
+  const t = Math.min(...o.map((d) => d.x)), a = Math.min(...o.map((d) => d.y)), r = Math.max(...o.map((d) => d.x + d.width)), c = Math.max(...o.map((d) => d.y + d.height));
+  return { x: t, y: a, width: r - t, height: c - a };
+}
+function Re(o, t, a = {}) {
+  const r = Oe(a), c = Math.max(1, t.width - r.left - r.right), d = Math.max(1, t.height - r.top - r.bottom), g = ye(
+    Math.min(c / Math.max(1, o.width), d / Math.max(1, o.height)),
+    a.minZoom,
+    a.maxZoom ?? 1
+  );
+  return {
+    centerX: o.x + o.width / 2 - (r.left - r.right) / 2 / g,
+    centerY: o.y + o.height / 2 - (r.top - r.bottom) / 2 / g,
+    zoom: g
+  };
+}
+function He(o, t, a, r = {}) {
+  const c = Oe(r), d = { width: a.width - c.left - c.right, height: a.height - c.top - c.bottom };
+  let { centerX: g, centerY: i, zoom: f } = o;
+  if (t.width * f > d.width || t.height * f > d.height)
+    return Re(t, a, { ...r, maxZoom: f });
+  f = ye(f, r.minZoom, r.maxZoom);
+  const p = (t.x - g) * f + a.width / 2, m = (t.y - i) * f + a.height / 2;
+  return p < c.left ? g -= (c.left - p) / f : p + t.width * f > a.width - c.right && (g += (p + t.width * f - (a.width - c.right)) / f), m < c.top ? i -= (c.top - m) / f : m + t.height * f > a.height - c.bottom && (i += (m + t.height * f - (a.height - c.bottom)) / f), { centerX: g, centerY: i, zoom: f };
+}
+const Ue = (o, t) => Math.abs(o.centerX - t.centerX) < 0.01 && Math.abs(o.centerY - t.centerY) < 0.01 && Math.abs(o.zoom - t.zoom) < 1e-6, Ke = 0.4, Je = (o, t) => o.nodes[t] ? "node" : o.groups[t] ? "group" : o.edges[t] ? "edge" : void 0, Te = (o, t, a) => ({
+  code: o,
+  severity: "warning",
+  message: t,
+  itemIds: [a]
+});
+function Qe(o, t = {}) {
+  const a = o.createElement("div"), r = o.createElement("div"), c = o.createElement("div");
+  a.className = "draft-anchors", r.className = "draft-anchors__bodies", c.className = "draft-anchors__overlays", a.append(r, c), a.dataset.draftDetail = "full";
+  const d = /* @__PURE__ */ new Map();
+  let g = [], i = null, f = !1, p = [], m = 1;
+  const N = /* @__PURE__ */ new Set(), b = o.defaultView, M = () => {
+    let l = !1;
+    for (const [w, h] of d) {
+      if (!h.body) continue;
+      const $ = (Z.get(h) ?? []).some(
+        (D) => D.offsetWidth > h.box.width + 0.5 || D.offsetHeight > h.box.height + 0.5
+      );
+      $ !== N.has(w) && (l = !0, $ ? N.add(w) : N.delete(w));
+    }
+    l && t.onOverflow?.();
+  }, x = b?.ResizeObserver ? new b.ResizeObserver(M) : void 0, Z = /* @__PURE__ */ new Map(), k = (l) => {
+    if (!x || !l.body) return;
+    for (const h of Z.get(l) ?? []) x.unobserve(h);
+    const w = U(l.el);
+    Z.set(l, w);
+    for (const h of w) x.observe(h);
+  }, X = (l) => {
+    for (const w of Z.get(l) ?? []) x?.unobserve(w);
+    Z.delete(l);
+  }, Y = (l) => {
+    const w = l.closest?.("[data-draft-anchor]")?.getAttribute("data-draft-anchor");
+    return w ? d.get(w) : void 0;
+  };
+  a.addEventListener("slotchange", (l) => {
+    const w = Y(l.target);
+    w && k(w);
+  });
+  const Q = b?.MutationObserver ? new b.MutationObserver((l) => {
+    const w = /* @__PURE__ */ new Set();
+    for (const h of l) {
+      const $ = h.target.dataset?.draftAnchor ? Y(h.target) : void 0;
+      $ && !w.has($) && (w.add($), k($));
+    }
+  }) : void 0;
+  Q?.observe(r, { childList: !0, subtree: !0 });
+  let G = !1;
+  const j = () => G = !0, H = () => G = !1;
+  a.addEventListener("pointerdown", j, !0), o.addEventListener("pointerup", H, !0), o.addEventListener("pointercancel", H, !0);
+  function U(l) {
+    const w = l.firstElementChild;
+    return w instanceof HTMLSlotElement ? w.assignedElements().filter((h) => h instanceof HTMLElement) : [...l.children].filter((h) => h instanceof HTMLElement);
+  }
+  function ae() {
+    let l = o.activeElement;
+    for (; l?.shadowRoot?.activeElement; ) l = l.shadowRoot.activeElement;
+    return l;
+  }
+  function ee() {
+    let l = !1, w = !1;
+    const h = /* @__PURE__ */ new Set();
+    p = [];
+    let $;
+    const D = (E) => {
+      $ ??= new Map(
+        [i.nodes, i.groups, i.edges].flatMap(Object.keys).map((z, W) => [z, W])
+      );
+      const C = E.dataset.draftAnchor;
+      return $.get(C.slice(C.indexOf(":") + 1)) ?? 1 / 0;
+    };
+    for (const E of g) {
+      const C = E.indexOf(":"), z = E.slice(0, C), W = E.slice(C + 1), F = i ? Je(i, W) : void 0;
+      if (!i || !F || z === "body" && F !== "node" || h.has(E)) {
+        f && !h.has(E) && p.push(E);
+        continue;
+      }
+      h.add(E);
+      const I = Ne(i, W);
+      let S = d.get(E);
+      if (!S || S.kind !== F) {
+        S && (S.el.remove(), X(S));
+        const T = o.createElement("div");
+        T.className = `draft-anchor draft-anchor--${z}`, T.dataset.draftAnchor = E, S = { el: T, id: W, kind: F, body: z === "body", box: I }, d.set(E, S);
+        const K = S.body ? r : c, ne = K.children, ce = D(T);
+        let B = 0, oe = ne.length;
+        for (; B < oe; ) {
+          const se = B + oe >> 1;
+          D(ne[se]) > ce ? oe = se : B = se + 1;
+        }
+        K.insertBefore(T, ne[B] ?? null), k(S), l = !0;
+      } else S.body && (S.box.width !== I.width || S.box.height !== I.height) && (w = !0);
+      if (S.box = I, S.body) {
+        const T = S.el.style;
+        T.left = `${I.x}px`, T.top = `${I.y}px`, T.width = `${I.width}px`, T.height = `${I.height}px`;
+      }
+    }
+    for (const [E, C] of d) {
+      if (h.has(E)) continue;
+      const z = ae(), W = !!z && (C.el.contains(z) || U(C.el).some((F) => F.contains(z)));
+      C.el.remove(), X(C), d.delete(E), N.delete(E), l = !0, W && a.dispatchEvent(new CustomEvent("draft-anchor-focus-lost"));
+    }
+    return w && x && M(), l;
+  }
+  return {
+    el: a,
+    setSlots(l) {
+      return g = [...new Set(l)], ee();
+    },
+    hasSlots: () => g.length > 0,
+    setGeometry(l) {
+      return i = l, f = !0, ee();
+    },
+    place(l, w, h) {
+      if (!g.length) return;
+      (h !== m || !a.style.getPropertyValue("--draft-zoom")) && a.style.setProperty("--draft-zoom", String(h)), m = h, r.style.transform = `translate(${l}px, ${w}px) scale(${h})`;
+      for (const D of d.values()) {
+        if (D.body) continue;
+        const E = D.el.style;
+        E.transform = `translate(${l + D.box.x * h}px, ${w + D.box.y * h}px)`, E.width = `${D.box.width * h}px`, E.height = `${D.box.height * h}px`;
+      }
+      const $ = t.detail !== "full" && h < Ke;
+      a.dataset.draftDetail === "low" !== $ && (a.dataset.draftDetail = $ ? "low" : "full", r.inert = $);
+    },
+    anchors: () => [...d].map(([l, w]) => ({
+      slot: l,
+      id: w.id,
+      kind: w.kind,
+      el: w.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: () => [
+      ...p.map(
+        (l) => Te(
+          "DRAFT_SLOT_UNKNOWN",
+          i ? `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.`,
+          l.slice(l.indexOf(":") + 1)
+        )
+      ),
+      ...[...N].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 w of d.values())
+        if (w.el.contains(l) || U(w.el).some((h) => h.contains(l))) return w.id;
+    },
+    destroy() {
+      x?.disconnect(), Q?.disconnect(), o.removeEventListener("pointerup", H, !0), o.removeEventListener("pointercancel", H, !0), Z.clear(), d.clear(), a.remove();
+    }
+  };
+}
+const De = Math.max(
+  1,
+  Math.min(4, (globalThis.navigator?.hardwareConcurrency || 2) - 1)
+), et = 3e4, Fe = /* @__PURE__ */ new Map();
+let tt = 0;
+const _e = "The worker is the module next to @draftably/runtime's viewer. With Vite, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.", rt = () => new Worker(new URL("./assets/render.worker-BXjS76Gy.js", import.meta.url), { type: "module" });
+function fe(o, t, a) {
+  o.slots.splice(o.slots.indexOf(t), 1), clearTimeout(t.timer), clearTimeout(t.idle), t.worker.terminate();
+  const r = t.job;
+  t.job = void 0, r && a && r.reject(a);
+}
+function nt(o, t) {
+  let a;
+  try {
+    a = (o ?? rt)();
+  } catch (c) {
+    throw new Error(
+      `Viewer render worker could not start${c instanceof Error ? `: ${c.message}` : ""}. ${_e}`,
+      { cause: c }
+    );
+  }
+  const r = { worker: a };
+  return t.slots.push(r), a.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(() => fe(t, r), et), ie(o, t));
+  }), a.addEventListener("error", (c) => {
+    c.preventDefault(), fe(
+      t,
+      r,
+      new Error(`${c.message || "Viewer render worker failed."} ${_e}`)
+    ), ie(o, t);
+  }), a.addEventListener("messageerror", () => {
+    fe(t, r, new Error("Viewer render worker returned an unreadable result.")), ie(o, t);
+  }), r;
+}
+function ie(o, t) {
+  for (; t.queue.length; ) {
+    const a = t.queue[0].options.idPrefix;
+    let r = t.slots.find((g) => !g.job && g.last === a);
+    if (!r && t.slots.length >= De && (r = t.slots.find((g) => !g.job)), !r && t.slots.length < De)
+      try {
+        r = nt(o, t);
+      } catch (g) {
+        for (const i of t.queue.splice(0)) i.reject(g);
+        return;
+      }
+    if (!r) return;
+    const c = t.queue.shift();
+    clearTimeout(r.idle), r.job = c, r.last = a;
+    const d = r;
+    r.timer = setTimeout(() => {
+      fe(t, d, new Error("Viewer render worker timed out.")), ie(o, t);
+    }, c.timeoutMs), r.worker.postMessage({ id: c.id, source: c.source, options: c.options });
+  }
+}
+function ot(o, t, {
+  create: a,
+  timeoutMs: r = 5e3,
+  signal: c
+}) {
+  return new Promise((d, g) => {
+    const i = Fe.get(a) ?? { slots: [], queue: [] };
+    Fe.set(a, i);
+    let f = !1;
+    const p = () => {
+      f = !0, c?.removeEventListener("abort", N);
+    }, m = {
+      id: ++tt,
+      source: o,
+      options: t,
+      timeoutMs: r,
+      resolve: (b) => f || (p(), d(b)),
+      reject: (b) => f || (p(), g(b))
+    }, N = () => {
+      const b = i.queue.indexOf(m);
+      b >= 0 && i.queue.splice(b, 1), m.reject(new Error("Viewer render was aborted."));
+    };
+    c?.addEventListener("abort", N, { once: !0 }), i.queue.push(m), ie(a, i);
+  });
+}
+const ue = /* @__PURE__ */ new WeakMap(), we = (o, t) => ue.get(o)?.get(t)?.face;
+function st(o, t, a) {
+  const r = ue.get(o) ?? /* @__PURE__ */ new Map();
+  ue.set(o, r);
+  const c = r.get(t);
+  if (c) return void c.refs++;
+  o.fonts.add(a), r.set(t, { face: a, refs: 1 });
+}
+function pe(o, t) {
+  const a = ue.get(o), r = a?.get(t);
+  !r || --r.refs > 0 || (o.fonts.delete(r.face), a.delete(t));
+}
+const it = "http://www.w3.org/2000/svg", at = new Set(
   "svg title desc metadata defs style marker g a path rect ellipse circle line polyline polygon text tspan".split(
     " "
   )
-), fe = new Set(
+), ct = 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 lt = 0;
+function dt(o, t) {
+  return new o.defaultView.DOMParser().parseFromString(t, "image/svg+xml");
+}
+function ft(o) {
+  const t = /* @__PURE__ */ new Map();
+  for (const a of Array.from(o.querySelectorAll("text[font-family]"))) {
+    const r = (a.getAttribute("font-family") ?? "").split(",")[0].trim().replace(/^['"]|['"]$/g, ""), c = a.getAttribute("font-weight") ?? "400";
+    if (!Object.values(Ie).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 ut(o, t) {
+  const a = /* @__PURE__ */ new Map();
+  for (const r of Array.from(o.querySelectorAll("style"))) {
+    const c = r.textContent ?? "";
+    for (const [, d] of c.matchAll(/@font-face\s*\{([^{}]{1,200000})\}/g)) {
+      const g = /font-family\s*:\s*['"]([^'"]+)['"]/i.exec(d)?.[1], i = /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];
+      !g || !i || !f || Object.values(Ie).some((p) => p.family === g && String(p.weight) === i) && a.set(`${g}:${i}`, { family: g, weight: i, 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 = a.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 mt(o, t, a, 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]"), (i) => i.getAttribute("id") ?? "")
   );
-  let b = 0;
-  const o = (f) => {
-    if (++b > s || !le.has(f.localName))
+  let d = 0;
+  const g = (i) => {
+    if (++d > r || !at.has(i.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)) {
+    const f = o.createElementNS(it, i.localName);
+    for (const { name: p, value: m } of Array.from(i.attributes)) {
       if (/^on/i.test(p)) continue;
       if (p === "href") {
-        if (f.localName !== "a") continue;
+        if (i.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(m, o.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 (!ct.has(p) && !/^data-[a-z0-9-]+$/.test(p)) continue;
+      const N = [...m.matchAll(/url\(#([^)]*)\)/g)].map((b) => b[1]);
+      /url\s*\(/i.test(m) && (N.length === 0 || N.some((b) => !c.has(b))) || p === "aria-labelledby" && m.split(/\s+/).some((b) => !c.has(b)) || f.setAttribute(p, m);
     }
-    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));
+    i.localName === "a" && f.getAttribute("target") === "_blank" && f.setAttribute("rel", "noopener noreferrer");
+    for (const p of Array.from(i.childNodes))
+      if (p.nodeType === 1) f.append(g(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
+        f.append(
+          o.createTextNode(
+            i.localName === "style" && a ? m.replace(/@font-face\s*\{[^{}]*\}/g, "") : m
           )
         );
       }
-    return w;
+    return f;
   };
-  return o(v.documentElement);
+  return g(t.documentElement);
 }
-function K(y, c, V) {
+function de(o, t, a) {
   return {
     ok: !1,
-    reason: y,
-    diagnostics: [{ code: c, severity: "error", message: V, itemIds: [] }]
+    reason: o,
+    diagnostics: [{ code: t, severity: "error", message: a, itemIds: [] }]
   };
 }
-function ve(y, c = {}) {
-  const V = y?.ownerDocument?.defaultView;
-  if (!V || !(y instanceof V.HTMLElement))
+function wt(o, t = {}) {
+  const a = o?.ownerDocument?.defaultView;
+  if (!a || !(o instanceof a.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 (o.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 = o.ownerDocument, c = a, 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 g = r.createElement("div");
+  g.className = "draft-viewer__toolbar", g.setAttribute("role", "toolbar"), g.setAttribute("aria-label", "Diagram controls");
+  const i = r.createElement("div");
+  i.className = "draft-viewer__viewport", i.tabIndex = 0, i.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, F, q, te = 0;
-  const N = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map(), L = (e, r) => {
-    for (const t of G.get(e) ?? [])
+  const p = r.createElement("ol");
+  p.className = "draft-viewer__outline", p.setAttribute("aria-label", "Diagram outline"), d.append(g, i, f, p);
+  const m = Qe(r, {
+    detail: t.detail,
+    onOverflow: () => l()
+  });
+  i.append(m.el), o.append(d);
+  const N = `draftViewer${(++lt).toString(36)}${Math.random().toString(36).slice(2, 9)}`;
+  let b = 0, M = !1, x = { centerX: 0, centerY: 0, zoom: 1 }, Z = !1, k, X = { width: 0, height: 0 };
+  const Y = /* @__PURE__ */ new Set(), Q = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Map(), j = (e, s) => {
+    for (const n of Q.get(e) ?? [])
       try {
-        t(r);
+        n(s);
       } 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" });
-  }, ne = () => {
-    a.zoom = 1, _ = !0, R(), L("camera", { camera: { ...a }, reason: "user" });
+  }, H = (e, s) => {
+    const n = r.createElement("button");
+    n.type = "button", n.textContent = e, n.setAttribute("aria-label", e), n.addEventListener("click", s), g.append(n);
+  }, U = () => {
+    const e = i.querySelector("svg");
+    if (!e || !k) return;
+    const [s, n] = k.viewBox, v = X, A = x.zoom, O = v.width / 2 - (x.centerX - s) * A, u = v.height / 2 - (x.centerY - n) * A;
+    e.style.transformOrigin = "0 0", e.style.transform = `translate(${O}px, ${u}px) scale(${A})`, e.style.width = `${k.width}px`, e.style.height = `${k.height}px`, e.style.maxWidth = "none", m.place(O - s * A, u - n * A, A);
+    const R = m.el.dataset.draftDetail;
+    i.dataset.draftDetail !== R && (i.dataset.draftDetail = R);
+  }, ae = () => {
+    const e = new Set(m.bodyIds());
+    for (const s of i.querySelectorAll(":scope > svg [data-id]"))
+      s.toggleAttribute("data-draft-body", e.has(s.getAttribute("data-id")));
+    j("anchors", { anchors: m.anchors() });
   };
-  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 ee = {
+    revision: 0,
+    diagnostics: [],
+    stale: !1
+  };
+  const l = () => j("diagnostics", {
+    ...ee,
+    diagnostics: [...ee.diagnostics, ...m.warnings()]
+  });
+  let w = "user", h = 0;
+  const $ = (e) => c.requestAnimationFrame ? c.requestAnimationFrame(e) : c.setTimeout(e, 16), D = (e) => {
+    w = e, !h && (h = $(() => {
+      h = 0, M || j("camera", { camera: { ...x }, reason: w });
+    }));
+  }, E = (e, s, n) => {
+    const v = { ...e, zoom: ye(e.zoom) };
+    return Z = n, Ue(x, v) ? "unchanged" : (x = v, U(), D(s), "moved");
+  }, C = () => {
+    const [e, s, n, v] = k.viewBox;
+    return { x: e, y: s, width: n, height: v };
+  };
+  let z = null;
+  const W = (e) => z ? Ne(z, e) : void 0;
+  let F;
+  const I = (e) => M ? "unchanged" : !k || !X.width || !X.height ? (F = e, "pending") : (F = void 0, e()), S = (e, s, n) => I(() => {
+    const v = e ? Ge(e.flatMap((A) => W(A) ?? [])) : C();
+    return v ? E(Re(v, X, s), n, !!e) : "missing";
+  }), T = (e = "fit") => S(void 0, void 0, e), K = (e) => E({ ...x, zoom: x.zoom * e }, "user", !0), ne = () => E({ ...x, zoom: 1 }, "user", !0);
+  H("Zoom in", () => K(1.2)), H("Zoom out", () => K(1 / 1.2)), H("Fit diagram", () => T()), H("Actual size", ne), g.hidden = t.toolbar === !1;
+  const ce = new c.ResizeObserver((e) => {
+    const s = e.at(-1)?.contentRect;
+    s && (X = { width: s.width, height: s.height }), !(k && !X.width) && (F ? I(F) : Z ? U() : T("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.`);
+  ce.observe(i);
+  const B = (e, s) => {
+    f.textContent = s.map((n) => n.message).join(" "), d.classList.add("draft-viewer--stale"), ee = { revision: e, diagnostics: s, stale: !!k }, l();
+  }, oe = async (e, s) => {
+    const n = ft(e);
+    if (!n.length) return [];
+    if (!r.fonts) throw new Error("The host document cannot load diagram fonts.");
+    if (s === "host") {
+      for (const u of n) {
+        const R = `${u.weight} 12px "${u.family}"`;
+        if (!(await r.fonts.load(R)).some(
+          (q) => q.family.replace(/^['"]|['"]$/g, "") === u.family && q.weight === u.weight && q.status === "loaded"
+        ) || !r.fonts.check(R))
+          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 = n.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 = ut(e, n), O = c.FontFace;
+    if (!O) throw new Error("The browser cannot load embedded diagram fonts.");
     return Promise.all(
-      S.map(async (n) => {
-        const h = `${n.family}:${n.weight}`, C = N.get(h);
-        if (C?.status === "loaded" && Array.from(s.fonts).includes(C))
-          return { key: h, face: C };
-        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 R = `${u.family}:${u.weight}`, te = we(r, R);
+        if (te) return { key: R, face: te };
+        const L = new O(u.family, `url("${u.data}")`, { weight: u.weight });
+        if (await L.load(), L.status !== "loaded")
+          throw new Error(`Embedded font ${u.family} ${u.weight} did not load.`);
+        return { key: R, face: L };
       })
     );
-  }, 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."))), F?.terminate(), F = 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 C = () => {
-      F && (F.removeEventListener("message", E), F.removeEventListener("error", W), F.removeEventListener("messageerror", U), 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."));
-    }, U = () => z(new Error("Viewer render worker returned an unreadable result.")), H = () => z(new Error("Viewer render was aborted."));
-    try {
-      F ??= c.execution?.mode === "worker" && c.execution.createWorker ? c.execution.createWorker() : new Worker(new URL(
-        /* @vite-ignore */
-        "" + new URL("assets/render.worker-fWW85Tf9.js", import.meta.url).href,
-        import.meta.url
-      ), { type: "module" }), F.addEventListener("message", E), F.addEventListener("error", W), F.addEventListener("messageerror", U), 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: C }, F.postMessage({ id: n, source: e, options: r });
-    } catch (k) {
-      z(
-        k instanceof Error ? k : new Error("Viewer render worker could not start.")
-      ), g(k);
+  }, se = async (e, s, n) => {
+    const v = t.execution ?? { mode: "worker" };
+    if (v.mode === "main") {
+      const { renderSvg: A } = await import("./render-CFWEEKPT.js");
+      return A(e, { ...s, signal: n });
     }
-  });
-  let A;
-  const ie = (e) => {
-    const r = o.querySelector("svg"), t = r?.querySelector(":scope > rect");
-    return e === o || e === r || e === t;
+    return ot(e, s, {
+      create: v.createWorker,
+      timeoutMs: v.timeoutMs,
+      signal: n
+    });
   };
-  o.addEventListener(
+  let _;
+  const Ce = (e) => {
+    const s = i.querySelector("svg"), n = s?.querySelector(":scope > rect");
+    return e === i || e === s || e === n;
+  }, ve = (e) => !(e.target instanceof c.Node) || !i.contains(e.target) || m.el.contains(e.target), qe = (e) => e.composedPath().some((s) => s instanceof c.Element && s.hasAttribute("data-draft-input"));
+  i.addEventListener(
     "wheel",
     (e) => {
-      e.preventDefault(), P(e.deltaY < 0 ? 1.1 : 1 / 1.1);
+      qe(e) || (e.preventDefault(), K(e.deltaY < 0 ? 1.1 : 1 / 1.1));
     },
     { passive: !1 }
-  ), o.addEventListener("pointerdown", (e) => {
-    !ie(e.target) || !u || (A = {
+  ), i.addEventListener("pointerdown", (e) => {
+    !Ce(e.target) || !k || (_ = {
       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: x.centerX,
+      centerY: x.centerY,
+      scale: x.zoom
+    }, i.setPointerCapture(e.pointerId));
+  }), i.addEventListener("pointermove", (e) => {
+    _ && E(
+      {
+        centerX: _.centerX - (e.clientX - _.x) / _.scale,
+        centerY: _.centerY - (e.clientY - _.y) / _.scale,
+        zoom: x.zoom
+      },
+      "user",
+      !0
+    );
   });
-  const Q = () => {
-    if (A) {
+  const be = () => {
+    if (_) {
       try {
-        o.releasePointerCapture(A.pointerId);
+        i.releasePointerCapture(_.pointerId);
       } catch {
       }
-      A = void 0, L("camera", { camera: { ...a }, reason: "user" });
+      _ = 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",
+  i.addEventListener("pointerup", be), i.addEventListener("pointercancel", be), i.addEventListener("click", (e) => {
+    if (ve(e)) return;
+    const s = e.target instanceof c.Element ? e.target : null, n = s?.closest("a[href]");
+    if (n && i.contains(n)) {
+      const O = n.querySelector("[data-id]")?.getAttribute("data-id"), u = n.getAttribute("href");
+      O && u && j("link", {
+        itemId: O,
+        href: u,
+        target: n.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 = s?.closest("[data-id]")?.getAttribute("data-id"), A = k?.items.find((O) => O.id === v);
+    A && j("itemactivate", { id: A.id, kind: A.kind, input: "pointer", revision: b });
+  }), i.addEventListener("contextmenu", (e) => {
+    if (ve(e)) return;
+    const n = (e.target instanceof c.Element ? e.target : null)?.closest("[data-id]")?.getAttribute("data-id") ?? null, v = n ? k?.items.find((A) => A.id === n) : void 0;
+    j("contextmenu", {
+      id: v?.id ?? null,
+      ...v ? { kind: v.kind } : {},
+      clientX: e.clientX,
+      clientY: e.clientY,
+      preventDefault: () => e.preventDefault()
+    });
+  }), m.el.addEventListener("focusin", (e) => {
+    const s = e.target instanceof c.Node ? m.idOf(e.target) : void 0;
+    s && !m.pressed() && xe.reveal(s);
+  }), m.el.addEventListener("keydown", (e) => {
+    e.key === "Escape" && i.focus({ preventScroll: !0 });
+  }), m.el.addEventListener(
+    "draft-anchor-focus-lost",
+    () => i.focus({ preventScroll: !0 })
+  ), i.addEventListener("keydown", (e) => {
+    e.target !== i || e.altKey || e.ctrlKey || e.metaKey || (e.key === "+" || e.key === "=" ? K(1.2) : e.key === "-" ? K(1 / 1.2) : e.key.toLowerCase() === "f" && T());
   });
-  const se = (e, r) => {
-    for (const [t, S] of B)
-      t !== e && S.resolve({ status: r, revision: t });
+  const Ve = (e, s) => {
+    for (const [n, v] of G)
+      n !== e && v.resolve({ status: s, revision: n });
   };
-  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 je = (e, s = {}) => {
+    const n = ++b;
+    if (M) return Promise.resolve({ status: "destroyed", revision: n });
+    Ve(n, "superseded"), me();
+    const v = new AbortController();
+    return me = () => v.abort(), new Promise((A) => {
+      let O = !1;
+      const u = (L) => {
+        if (O) return;
+        O = !0, s.signal?.removeEventListener("abort", R), G.delete(n);
+        const q = M ? { status: "destroyed", revision: n } : n !== b ? { status: "superseded", revision: n } : s.signal?.aborted ? { status: "aborted", revision: n } : L;
+        A(q);
+      }, R = () => {
+        v.abort(), u({ status: "aborted", revision: n });
+      };
+      if (G.set(n, { resolve: u }), s.signal?.aborted) {
+        R();
+        return;
+      }
+      s.signal?.addEventListener("abort", R, { once: !0 });
+      const te = {
+        ...t.render ?? {},
+        target: "inline",
+        idPrefix: N,
+        fonts: t.render?.fonts ?? "embed",
+        ...s.state !== void 0 ? { state: s.state } : {}
+      };
+      se(e, te, v.signal).then(async (L) => {
+        if (M || n !== b || s.signal?.aborted) {
+          u({ status: "superseded", revision: n });
           return;
         }
-        r.signal?.addEventListener("abort", h, { once: !0 });
-        const C = {
-          ...c.render ?? {},
-          target: "inline",
-          idPrefix: p,
-          fonts: c.render?.fonts ?? "embed",
-          ...r.state !== void 0 ? { state: r.state } : {}
-        };
-        ae(e, C, 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, C.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, C.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 U = [];
-          try {
-            for (const i of E)
-              N.has(i.key) || (s.fonts.add(i.face), N.set(i.key, i.face), U.push(i));
-          } catch (i) {
-            for (const { key: M, face: Z } of U)
-              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 (!L.ok) {
+          B(n, L.diagnostics), u({ status: "error", revision: n, error: L });
+          return;
+        }
+        let q, he;
+        try {
+          he = dt(r, L.value.svg), q = await oe(he, te.fonts ?? "embed");
+        } catch (y) {
+          if (M || n !== b || s.signal?.aborted) {
+            u({
+              status: s.signal?.aborted ? "aborted" : "superseded",
+              revision: n
             });
             return;
           }
-          const E = K(
+          const V = de(
             "environment",
-            "DRAFT_VIEWER_WORKER",
-            d instanceof Error ? d.message : "Viewer render failed."
+            "DRAFT_FONT_UNAVAILABLE",
+            y instanceof Error ? y.message : "Diagram fonts are unavailable."
           );
-          X(t, E.diagnostics), n({ status: "error", revision: t, error: E });
-        });
-      }));
+          B(n, V.diagnostics), u({ status: "error", revision: n, error: V });
+          return;
+        }
+        if (M || n !== b || s.signal?.aborted) {
+          u({ status: "superseded", revision: n });
+          return;
+        }
+        let ge;
+        try {
+          ge = mt(r, he, te.fonts !== "host");
+        } catch (y) {
+          const V = y instanceof Error ? y.message : "Could not build safe SVG.", P = de("internal", "DRAFT_VIEWER_DOM", V);
+          B(n, P.diagnostics), u({ status: "error", revision: n, error: P });
+          return;
+        }
+        const ke = [];
+        try {
+          for (const y of q)
+            Y.has(y.key) || (st(r, y.key, y.face), Y.add(y.key), ke.push(y.key));
+        } catch (y) {
+          for (const P of ke)
+            pe(r, P), Y.delete(P);
+          const V = de(
+            "environment",
+            "DRAFT_FONT_UNAVAILABLE",
+            y instanceof Error ? y.message : "Loaded fonts could not be registered."
+          );
+          B(n, V.diagnostics), u({ status: "error", revision: n, error: V });
+          return;
+        }
+        const Xe = !!k;
+        k = L.value, z = k.geometry ? { ...k.geometry, revision: n } : null;
+        const Ae = i.querySelector(":scope > svg");
+        Ae ? Ae.replaceWith(ge) : i.prepend(ge), m.setGeometry(z);
+        const Se = p.getRootNode().activeElement, Le = p.contains(Se) ? Se.dataset.itemId : void 0;
+        p.replaceChildren(
+          ...k.items.map((y) => {
+            const V = r.createElement("li"), P = r.createElement("button");
+            P.type = "button";
+            const Be = y.label.trim() || (y.kind === "edge" ? `${y.from ?? "?"} to ${y.to ?? "?"}` : y.id);
+            return P.textContent = `${y.kind}: ${Be}`, P.dataset.itemId = y.id, P.addEventListener("click", () => {
+              j("itemactivate", {
+                id: y.id,
+                kind: y.kind,
+                input: "keyboard",
+                revision: n
+              });
+              const Me = Array.from(i.querySelectorAll("[data-id]")).find(
+                (J) => J.getAttribute("data-id") === y.id
+              );
+              if (Me) {
+                const J = Me.getBoundingClientRect(), re = i.getBoundingClientRect();
+                (J.width || J.height) && re.width && re.height && E(
+                  {
+                    centerX: x.centerX + (J.left + J.width / 2 - (re.left + re.width / 2)) / x.zoom,
+                    centerY: x.centerY + (J.top + J.height / 2 - (re.top + re.height / 2)) / x.zoom,
+                    zoom: Math.max(1, x.zoom)
+                  },
+                  "user",
+                  !0
+                );
+              }
+            }), V.append(P), V;
+          })
+        ), Le !== void 0 && (Array.from(p.querySelectorAll("button")).find(
+          (V) => V.dataset.itemId === Le
+        ) ?? i).focus({ preventScroll: !0 });
+        const Ye = new Set(q.map((y) => y.key));
+        for (const y of Y)
+          Ye.has(y) || (pe(r, y), Y.delete(y));
+        d.classList.remove("draft-viewer--stale"), f.textContent = L.diagnostics.map((y) => y.message).join(" "), F ? I(F) : !Xe || s.camera === "fit" ? T() : U();
+        const We = {
+          status: "committed",
+          revision: n,
+          value: k,
+          diagnostics: L.diagnostics
+        };
+        j("render", { revision: n, value: k, geometry: z }), ee = { revision: n, diagnostics: L.diagnostics, stale: !1 }, l(), ae(), u(We);
+      }).catch((L) => {
+        if (M || n !== b || s.signal?.aborted) {
+          u({
+            status: s.signal?.aborted ? "aborted" : "superseded",
+            revision: n
+          });
+          return;
+        }
+        const q = de(
+          "environment",
+          "DRAFT_VIEWER_WORKER",
+          L instanceof Error ? L.message : "Viewer render failed."
+        );
+        B(n, q.diagnostics), u({ status: "error", revision: n, error: q });
+      });
+    });
+  };
+  let le, Ee;
+  const Pe = new Promise((e) => Ee = e), xe = {
+    get ready() {
+      return le ?? Pe;
+    },
+    update: (e, s) => {
+      const n = je(e, s), v = n.then(
+        (A) => A.status === "superseded" && le !== v ? le : A
+      );
+      return le = v, v.then(Ee), n;
+    },
+    geometry: () => z,
+    anchor(e) {
+      if (M) return;
+      const s = m.warnings().length;
+      m.setSlots(e), U(), ae(), (m.warnings().length || s) && l();
     },
-    on(e, r) {
-      if (x) return () => {
+    on(e, s) {
+      if (M) return () => {
       };
-      const t = G.get(e) ?? /* @__PURE__ */ new Set();
-      return t.add(r), G.set(e, t), () => t.delete(r);
+      const n = Q.get(e) ?? /* @__PURE__ */ new Set();
+      return n.add(s), Q.set(e, n), () => n.delete(s);
     },
-    getCamera: () => ({ ...a }),
+    getCamera: () => ({ ...x }),
     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();
+      M || !Number.isFinite(e.centerX) || !Number.isFinite(e.centerY) || !Number.isFinite(e.zoom) || e.zoom <= 0 || E({ ...e }, "api", !0);
     },
+    fit: (e, s) => S(e, s, "api"),
+    reveal: (e, s) => I(() => {
+      const n = W(e);
+      return n ? E(He(x, n, X, s), "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((n) => n.id === e)) return !1;
+      const s = Array.from(p.querySelectorAll("button")).find(
+        (n) => n.dataset.itemId === e
       );
-      return r?.focus(), !!r;
+      return s?.focus(), !!s;
     },
     destroy() {
-      if (!x) {
-        if (x = !0, m++, A) {
+      if (!M) {
+        if (M = !0, b++, F = void 0, h && (c.cancelAnimationFrame ?? c.clearTimeout)(h), _) {
           try {
-            o.releasePointerCapture(A.pointerId);
+            i.releasePointerCapture(_.pointerId);
           } catch {
           }
-          A = void 0;
+          _ = 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(), G.clear(), y.replaceChildren(), u = void 0;
+        for (const [e, s] of G)
+          s.resolve({ status: "destroyed", revision: e });
+        G.clear(), me();
+        for (const e of Y) pe(r, e);
+        Y.clear(), ce.disconnect(), j("anchors", { anchors: [] }), m.destroy(), Q.clear(), o.replaceChildren(), k = void 0;
       }
     }
   };
+  return xe;
 }
 export {
-  Ee as fontMetricsVersion,
-  ve as mountViewer,
-  ke as runtimeVersion
+  ze as ZOOM_MAX,
+  $e as ZOOM_MIN,
+  vt as fontMetricsVersion,
+  wt as mountViewer,
+  Et as runtimeVersion
 };