@floegence/floe-webapp-core 0.86.73 → 0.86.75

package/dist/components/layout/splitWorkspaceModel.js

@@ -1,96 +1,159 @@
-const o = (i) => ({ type: "pane", id: i });
-function x(i) {
-  return i ? i.type === "pane" ? [i.id] : [...x(i.first), ...x(i.second)] : [];
+const w = (t) => ({ type: "pane", id: t });
+function M(t) {
+  return t ? t.type === "pane" ? [t.id] : [...M(t.first), ...M(t.second)] : [];
 }
-function u(i) {
-  const s = /* @__PURE__ */ new Set();
-  let n = 0;
-  const r = (t, c) => {
-    if (!t || typeof t != "object" || c > 32 || ++n > 127) return !1;
-    const e = t;
-    return typeof e.id != "string" || !e.id.trim() || s.has(e.id) ? !1 : (s.add(e.id), e.type === "pane" ? !0 : e.type === "split" && (e.axis === "x" || e.axis === "y") && typeof e.ratio == "number" && Number.isFinite(e.ratio) && e.ratio >= 0.15 && e.ratio <= 0.85 && r(e.first, c + 1) && r(e.second, c + 1));
+function v(t) {
+  const e = /* @__PURE__ */ new Set();
+  let r = 0;
+  const n = (i, f) => {
+    if (!i || typeof i != "object" || f > 32 || ++r > 127) return !1;
+    const c = i;
+    return typeof c.id != "string" || !c.id.trim() || e.has(c.id) ? !1 : (e.add(c.id), c.type === "pane" ? !0 : c.type === "split" && (c.axis === "x" || c.axis === "y") && typeof c.ratio == "number" && Number.isFinite(c.ratio) && c.ratio >= 0.15 && c.ratio <= 0.85 && n(c.first, f + 1) && n(c.second, f + 1));
   };
-  return r(i, 0);
+  return n(t, 0);
 }
-function a(i, s, n) {
-  if (i.id === s) return n(i);
-  if (i.type === "pane") return i;
-  const r = a(i.first, s, n), t = a(i.second, s, n);
-  return r === i.first && t === i.second ? i : { ...i, first: r, second: t };
+function k(t, e, r) {
+  if (t.id === e) return r(t);
+  if (t.type === "pane") return t;
+  const n = k(t.first, e, r), i = k(t.second, e, r);
+  return n === t.first && i === t.second ? t : { ...t, first: n, second: i };
 }
-function m(i, s) {
-  if (!i || i.id === s) return null;
-  if (i.type === "pane") return i;
-  const n = m(i.first, s), r = m(i.second, s);
-  return n ? r ? n === i.first && r === i.second ? i : { ...i, first: n, second: r } : n : r;
+function W(t, e) {
+  if (!t || t.id === e) return null;
+  if (t.type === "pane") return t;
+  const r = W(t.first, e), n = W(t.second, e);
+  return r ? n ? r === t.first && n === t.second ? t : { ...t, first: r, second: n } : r : n;
 }
-function k(i, s) {
-  const n = new Set(s);
-  return x(i).reduce(
-    (r, t) => n.has(t) ? r : m(r, t),
-    i
+function b(t, e) {
+  const r = new Set(e);
+  return M(t).reduce(
+    (n, i) => r.has(i) ? n : W(n, i),
+    t
   );
 }
-function w(i, s, n) {
-  return Number.isFinite(n) ? a(
-    i,
-    s,
-    (r) => r.type === "split" ? { ...r, ratio: Math.max(0.15, Math.min(0.85, n)) } : r
-  ) : i;
+function N(t, e, r) {
+  return Number.isFinite(r) ? k(
+    t,
+    e,
+    (n) => n.type === "split" ? { ...n, ratio: Math.max(0.15, Math.min(0.85, r)) } : n
+  ) : t;
 }
-function S(i, s, n, r, t) {
-  if (!i || s === n || !x(i).includes(n))
-    return i;
-  const c = x(i).includes(s);
-  if (r === "center") {
-    const p = (f) => f.type === "pane" ? f.id === n ? o(s) : c && f.id === s ? o(n) : f : { ...f, first: p(f.first), second: p(f.second) };
-    return p(i);
+function q(t, e, r, n, i) {
+  if (!t || e === r || !M(t).includes(r))
+    return t;
+  const f = M(t).includes(e);
+  if (n === "center") {
+    const h = (o) => o.type === "pane" ? o.id === r ? w(e) : f && o.id === e ? w(r) : o : { ...o, first: h(o.first), second: h(o.second) };
+    return h(t);
   }
-  const e = m(i, s);
-  return e ? a(e, n, (p) => ({
+  const c = W(t, e);
+  return c ? k(c, r, (h) => ({
     type: "split",
-    id: t,
-    axis: r === "left" || r === "right" ? "x" : "y",
+    id: i,
+    axis: n === "left" || n === "right" ? "x" : "y",
     ratio: 0.5,
-    first: r === "left" || r === "top" ? o(s) : p,
-    second: r === "left" || r === "top" ? p : o(s)
-  })) : i;
+    first: n === "left" || n === "top" ? w(e) : h,
+    second: n === "left" || n === "top" ? h : w(e)
+  })) : t;
 }
-function W(i, s, n) {
-  const r = i === "single" ? 1 : i === "grid" ? 4 : i === "columns" || i === "rows" ? 2 : 3, t = [...new Set(s)].slice(0, r).map(o), c = (e, p, f, h = 0.5) => ({ type: "split", id: n(), axis: e, ratio: h, first: p, second: f });
-  return t.length ? t.length === 1 ? t[0] : t.length === 2 ? c(i === "rows" ? "y" : "x", t[0], t[1]) : i === "grid" && t.length === 4 ? c("x", c("y", t[0], t[2]), c("y", t[1], t[3])) : c(
+function A(t, e, r) {
+  const n = t === "single" ? 1 : t === "grid" ? 4 : t === "columns" || t === "rows" ? 2 : 3, i = [...new Set(e)].slice(0, n).map(w), f = (c, h, o, m = 0.5) => ({ type: "split", id: r(), axis: c, ratio: m, first: h, second: o });
+  return i.length ? i.length === 1 ? i[0] : i.length === 2 ? f(t === "rows" ? "y" : "x", i[0], i[1]) : t === "grid" && i.length === 4 ? f("x", f("y", i[0], i[2]), f("y", i[1], i[3])) : f(
     "x",
-    t[0],
-    c(i === "three-columns" ? "x" : "y", t[1], t[2]),
-    i === "three-columns" ? 1 / 3 : 0.5
+    i[0],
+    f(t === "three-columns" ? "x" : "y", i[1], i[2]),
+    t === "three-columns" ? 1 / 3 : 0.5
   ) : null;
 }
-function l(i) {
-  const s = /* @__PURE__ */ new Map(), n = [], r = (t, c) => {
-    if (t.type === "pane") {
-      s.set(t.id, c);
+function z(t) {
+  const e = /* @__PURE__ */ new Map(), r = [], n = (i, f) => {
+    if (i.type === "pane") {
+      e.set(i.id, f);
       return;
     }
-    n.push({ ...c, id: t.id, axis: t.axis, ratio: t.ratio });
-    const { x: e, y: p, width: f, height: h } = c;
-    t.axis === "x" ? (r(t.first, { x: e, y: p, width: f * t.ratio, height: h }), r(t.second, { x: e + f * t.ratio, y: p, width: f * (1 - t.ratio), height: h })) : (r(t.first, { x: e, y: p, width: f, height: h * t.ratio }), r(t.second, {
-      x: e,
-      y: p + h * t.ratio,
-      width: f,
-      height: h * (1 - t.ratio)
+    r.push({ ...f, id: i.id, axis: i.axis, ratio: i.ratio });
+    const { x: c, y: h, width: o, height: m } = f;
+    i.axis === "x" ? (n(i.first, { x: c, y: h, width: o * i.ratio, height: m }), n(i.second, { x: c + o * i.ratio, y: h, width: o * (1 - i.ratio), height: m })) : (n(i.first, { x: c, y: h, width: o, height: m * i.ratio }), n(i.second, {
+      x: c,
+      y: h + m * i.ratio,
+      width: o,
+      height: m * (1 - i.ratio)
     }));
   };
-  return i && r(i, { x: 0, y: 0, width: 100, height: 100 }), { panes: s, dividers: n };
+  return t && n(t, { x: 0, y: 0, width: 100, height: 100 }), { panes: e, dividers: r };
+}
+function F(t, e) {
+  const r = t.length;
+  if (r < 2 || r > 32 || new Set(t).size !== r || t.some((s) => !s.trim()))
+    return [];
+  const n = (s, a, l, u) => ({ type: "split", id: e(), axis: s, ratio: u, first: a, second: l }), i = (s, a) => {
+    if (s.length === 1) return s[0];
+    const l = Math.ceil(s.length / 2);
+    return n(
+      a,
+      i(s.slice(0, l), a),
+      i(s.slice(l), a),
+      l / s.length
+    );
+  }, f = (s, a, l) => {
+    let u = 0;
+    const x = Array.from({ length: a }, (y, S) => {
+      const p = Math.floor(s.length / a) + (S < s.length % a ? 1 : 0), g = s.slice(u, u + p).map(w);
+      return u += p, i(g, l === "x" ? "y" : "x");
+    });
+    return i(x, l);
+  }, c = [], h = /* @__PURE__ */ new Set(), o = (s, a, l) => {
+    const u = [...z(l).panes.entries()].sort(
+      ([, p], [, g]) => Math.round(p.y * 1e6) - Math.round(g.y * 1e6) || p.x - g.x
+    ), x = JSON.stringify(
+      u.map(
+        ([, p]) => [p.x, p.y, p.width, p.height].map((g) => Math.round(g * 1e6))
+      )
+    );
+    if (h.has(x)) return;
+    h.add(x);
+    const y = new Map(u.map(([p], g) => [p, t[g]])), S = (p) => p.type === "pane" ? w(y.get(p.id)) : { ...p, first: S(p.first), second: S(p.second) };
+    c.push({ id: s, kind: a, layout: S(l) });
+  }, m = [.../* @__PURE__ */ new Set([Math.ceil(Math.sqrt(r)), 1, 2, 3, 4, r])].filter(
+    (s) => s <= r
+  );
+  for (const s of m)
+    o(
+      "rows-" + s,
+      s === 1 ? "columns" : s === r ? "rows" : "grid",
+      f(t, s, "y")
+    );
+  for (const s of [2, 3])
+    s < r && o("columns-" + s, "grid", f(t, s, "x"));
+  for (const s of ["left", "right", "top", "bottom"]) {
+    const a = s === "left" || s === "right", l = w(t[0]), u = f(
+      t.slice(1),
+      Math.ceil(Math.sqrt((r - 1) / 2)),
+      a ? "x" : "y"
+    ), x = s === "left" || s === "top";
+    o(
+      "main-" + s,
+      "main-" + s,
+      n(
+        a ? "x" : "y",
+        x ? l : u,
+        x ? u : l,
+        x ? 0.62 : 0.38
+      )
+    );
+  }
+  return c;
 }
 export {
-  S as dockSplitWorkspaceItem,
-  u as isSplitWorkspaceLayout,
-  a as mapSplitWorkspace,
-  l as measureSplitWorkspace,
-  W as presetSplitWorkspace,
-  k as reconcileSplitWorkspace,
-  m as removeSplitWorkspaceItem,
-  w as resizeSplitWorkspace,
-  x as splitWorkspaceItems,
-  o as splitWorkspacePane
+  F as createSplitWorkspaceArrangements,
+  q as dockSplitWorkspaceItem,
+  v as isSplitWorkspaceLayout,
+  k as mapSplitWorkspace,
+  z as measureSplitWorkspace,
+  A as presetSplitWorkspace,
+  b as reconcileSplitWorkspace,
+  W as removeSplitWorkspaceItem,
+  N as resizeSplitWorkspace,
+  M as splitWorkspaceItems,
+  w as splitWorkspacePane
 };

package/dist/diagrams/Diagram.d.ts

@@ -0,0 +1,30 @@
+import { type Component } from 'solid-js';
+import { type DiagramRenderOptions, type DiagramRenderResult } from './render';
+export interface DiagramLabels {
+    diagram: string;
+    loading: string;
+    unavailable: string;
+    retry: string;
+    source: string;
+    preview: string;
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    expand: string;
+    close: string;
+    zoomIn: string;
+    zoomOut: string;
+    fit: string;
+}
+export declare const diagramLabelsEnUS: DiagramLabels;
+export interface DiagramProps {
+    source: string;
+    labels: DiagramLabels;
+    class?: string;
+    onCopy?: (source: string) => Promise<void>;
+    onOpenLink?: (href: string) => void | Promise<void>;
+    /** Explicit renderer injection for existing hosts; never an error fallback. */
+    render?: (source: string, options: DiagramRenderOptions) => Promise<DiagramRenderResult>;
+}
+/** Shared diagram controls. The host owns source identity, localization and navigation. */
+export declare const Diagram: Component<DiagramProps>;

package/dist/diagrams/Diagram.js

@@ -0,0 +1,224 @@
+import { insert as d, memo as V, createComponent as y, mergeProps as H, effect as N, setAttribute as D, className as J, template as S, use as G, setStyleProperty as U, delegateEvents as K } from "solid-js/web";
+import { createSignal as m, onCleanup as Z, Show as O, createMemo as Q, createEffect as j, onMount as X, on as Y } from "solid-js";
+import { Dialog as p } from "../components/ui/Dialog.js";
+import { renderDiagram as ee, sanitizeDiagramSvg as te } from "./render.js";
+var ne = /* @__PURE__ */ S("<div class=floe-diagram-viewport data-floe-workbench-text-selection-surface=true><div class=floe-diagram-svg>"), oe = /* @__PURE__ */ S("<div class=floe-diagram-status role=status>"), re = /* @__PURE__ */ S("<div class=floe-diagram-error role=alert><strong></strong><pre></pre><pre><code>"), ie = /* @__PURE__ */ S("<button type=button>"), ae = /* @__PURE__ */ S("<pre class=floe-diagram-source data-floe-workbench-text-selection-surface=true><code>"), le = /* @__PURE__ */ S("<div class=floe-diagram><div class=floe-diagram-toolbar><button type=button>−</button><button type=button></button><button type=button>+"), se = /* @__PURE__ */ S("<section><div class=floe-diagram-toolbar><button type=button></button><button type=button></button><span class=floe-diagram-feedback role=status></span><button type=button>⤢</button></div><div>");
+const me = {
+  diagram: "Diagram",
+  loading: "Rendering diagram…",
+  unavailable: "Diagram unavailable",
+  retry: "Retry",
+  source: "Source",
+  preview: "Preview",
+  copy: "Copy source",
+  copied: "Copied",
+  copyFailed: "Could not copy",
+  expand: "Expand diagram",
+  close: "Close",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit"
+}, B = (e) => {
+  let s;
+  const [A, R] = m(!1), [T, I] = m(0), [v, P] = m(0), [x, $] = m("loading"), [W, w] = m(""), L = Q(() => e.source);
+  j(() => e.onStatus?.(x())), X(() => {
+    const o = new ResizeObserver((n) => {
+      const l = Math.round(n[0]?.contentRect.width ?? s.clientWidth);
+      l > 0 && I(l);
+    });
+    o.observe(s);
+    const r = new IntersectionObserver((n) => {
+      n.some((l) => l.isIntersecting) && (R(!0), r.disconnect());
+    }, {
+      rootMargin: "200px"
+    });
+    r.observe(s);
+    const c = s.ownerDocument.fonts, i = () => P((n) => n + 1);
+    c?.addEventListener("loadingdone", i), Z(() => {
+      o.disconnect(), r.disconnect(), c?.removeEventListener("loadingdone", i);
+    });
+  }), j(Y([L, T, A, v, () => e.revision], ([o, r, c]) => {
+    if (!c || !r) return;
+    const i = new AbortController(), n = s.ownerDocument, l = getComputedStyle(s);
+    $("loading"), w("");
+    const g = (u) => {
+      if (i.signal.aborted || !s.isConnected) return;
+      const b = n.getSelection();
+      for (let C = 0; b && C < b.rangeCount; C++)
+        if (b.getRangeAt(C).intersectsNode(s)) {
+          const t = () => {
+            n.removeEventListener("selectionchange", t), g(u);
+          };
+          n.addEventListener("selectionchange", t, {
+            once: !0,
+            signal: i.signal
+          });
+          return;
+        }
+      const f = n.createElement("template");
+      f.innerHTML = te(u.svg, n);
+      const M = f.content.querySelector("svg");
+      M && e.expanded && (M.style.maxWidth = "none"), s.replaceChildren(f.content), $("ready");
+    };
+    (e.render ?? ee)(o, {
+      signal: i.signal,
+      maxWidth: r,
+      document: n,
+      fontFamily: l.fontFamily,
+      fontFamilyMono: l.getPropertyValue("--font-mono").trim() || "monospace",
+      fontSize: parseFloat(l.fontSize) || 16,
+      links: !!e.onOpenLink
+    }).then(g).catch((u) => {
+      i.signal.aborted || (s.replaceChildren(), w(u instanceof Error ? u.message : String(u)), $("error"));
+    }), Z(() => i.abort());
+  }));
+  const z = (o) => {
+    const r = o.target instanceof Element ? o.target.closest("a") : null;
+    if (!r) return;
+    o.preventDefault();
+    const c = r.getAttribute("href");
+    !c || !/^(?:https?:\/\/|mailto:)/i.test(c) || !e.onOpenLink || Promise.resolve(e.onOpenLink(c)).catch(() => {
+      w(e.labels.unavailable), $("error");
+    });
+  };
+  return [(() => {
+    var o = ne(), r = o.firstChild;
+    r.$$click = z;
+    var c = s;
+    return typeof c == "function" ? G(c, r) : s = r, N((i) => {
+      var n = e.expanded ? "true" : void 0, l = e.expanded ? "auto" : "hidden", g = !!e.expanded, u = x() === "loading", b = e.scale ?? 1;
+      return n !== i.e && D(o, "data-floe-local-interaction-surface", i.e = n), l !== i.t && U(o, "overflow", i.t = l), g !== i.a && r.classList.toggle("floe-diagram-zoomed", i.a = g), u !== i.o && D(r, "aria-busy", i.o = u), b !== i.i && U(r, "--floe-diagram-scale", i.i = b), i;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), o;
+  })(), y(O, {
+    get when() {
+      return x() === "loading";
+    },
+    get children() {
+      var o = oe();
+      return d(o, () => e.labels.loading), o;
+    }
+  }), y(O, {
+    get when() {
+      return x() === "error";
+    },
+    get children() {
+      var o = re(), r = o.firstChild, c = r.nextSibling, i = c.nextSibling, n = i.firstChild;
+      return d(r, () => e.labels.unavailable), d(c, W), d(n, () => e.source), o;
+    }
+  })];
+}, fe = (e) => {
+  const [s, A] = m(!1), [R, T] = m(!1), [I, v] = m(1), [P, x] = m(0), [$, W] = m("loading"), [w, L] = m("idle");
+  let z, o = !1, r;
+  Z(() => {
+    o = !0, clearTimeout(z);
+  });
+  const c = async () => {
+    try {
+      await (e.onCopy ? e.onCopy(e.source) : navigator.clipboard.writeText(e.source)), o || L("copied");
+    } catch {
+      o || L("error");
+    }
+    o || (clearTimeout(z), z = setTimeout(() => L("idle"), 1600));
+  }, i = (n) => {
+    const l = typeof document < "u" ? document.activeElement : null, g = l instanceof Element && !!l.closest('[role="dialog"]');
+    T(n), !n && g && r?.isConnected && r.focus({
+      preventScroll: !0
+    });
+  };
+  return (() => {
+    var n = se(), l = n.firstChild, g = l.firstChild, u = g.nextSibling, b = u.nextSibling, f = b.nextSibling, M = l.nextSibling;
+    g.$$click = () => A((t) => !t), d(g, (() => {
+      var t = V(() => !!s());
+      return () => t() ? e.labels.preview : e.labels.source;
+    })()), u.$$click = () => {
+      c();
+    }, d(u, () => e.labels.copy), d(b, (() => {
+      var t = V(() => w() === "copied");
+      return () => t() ? e.labels.copied : V(() => w() === "error")() ? e.labels.copyFailed : "";
+    })()), d(l, y(O, {
+      get when() {
+        return $() === "error";
+      },
+      get children() {
+        var t = ie();
+        return t.$$click = () => x((h) => h + 1), d(t, () => e.labels.retry), t;
+      }
+    }), f), f.$$click = () => {
+      v(1), T(!0);
+    };
+    var C = r;
+    return typeof C == "function" ? G(C, f) : r = f, d(M, y(B, H(e, {
+      get revision() {
+        return P();
+      },
+      onStatus: W
+    }))), d(n, y(O, {
+      get when() {
+        return s();
+      },
+      get children() {
+        var t = ae(), h = t.firstChild;
+        return d(h, () => e.source), t;
+      }
+    }), null), d(n, y(p, {
+      get open() {
+        return R();
+      },
+      onOpenChange: i,
+      get title() {
+        return e.labels.diagram;
+      },
+      get closeLabel() {
+        return e.labels.close;
+      },
+      class: "floe-diagram-dialog",
+      get children() {
+        var t = le(), h = t.firstChild, k = h.firstChild, _ = k.nextSibling, F = _.nextSibling;
+        return t.$$keydown = (a) => {
+          a.target instanceof Element && a.target.closest("button,input,textarea") || ((a.key === "+" || a.key === "=") && (a.preventDefault(), v((E) => Math.min(4, E + 0.25))), a.key === "-" && (a.preventDefault(), v((E) => Math.max(0.5, E - 0.25))), a.key === "0" && (a.preventDefault(), v(1)));
+        }, k.$$click = () => v((a) => Math.max(0.5, a - 0.25)), _.$$click = () => v(1), d(_, () => e.labels.fit), F.$$click = () => v((a) => Math.min(4, a + 0.25)), d(t, y(O, {
+          get when() {
+            return R();
+          },
+          get children() {
+            return y(B, H(e, {
+              expanded: !0,
+              get scale() {
+                return I();
+              },
+              get revision() {
+                return P();
+              }
+            }));
+          }
+        }), null), N((a) => {
+          var E = e.labels.zoomOut, q = e.labels.zoomIn;
+          return E !== a.e && D(k, "aria-label", a.e = E), q !== a.t && D(F, "aria-label", a.t = q), a;
+        }, {
+          e: void 0,
+          t: void 0
+        }), t;
+      }
+    }), null), N((t) => {
+      var h = "floe-diagram " + (e.class ?? ""), k = s(), _ = $() !== "ready", F = e.labels.expand, a = s();
+      return h !== t.e && J(n, t.e = h), k !== t.t && D(g, "aria-pressed", t.t = k), _ !== t.a && (f.disabled = t.a = _), F !== t.o && D(f, "aria-label", t.o = F), a !== t.i && (M.hidden = t.i = a), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), n;
+  })();
+};
+K(["click", "keydown"]);
+export {
+  fe as Diagram,
+  me as diagramLabelsEnUS
+};

package/dist/diagrams/render.d.ts

@@ -0,0 +1,27 @@
+export type DiagramErrorCode = 'syntax' | 'semantic' | 'limit' | 'unsupported-diagram' | 'unavailable';
+export declare class DiagramError extends Error {
+    readonly code: DiagramErrorCode;
+    readonly line: number;
+    readonly column: number;
+    constructor(code: DiagramErrorCode, message: string, line?: number, column?: number);
+}
+export interface DiagramRenderOptions {
+    signal?: AbortSignal;
+    /** The owner supplies actual local CSS width, never transformed screen width. */
+    maxWidth?: number;
+    fontFamily?: string;
+    fontFamilyMono?: string;
+    fontSize?: number;
+    document?: Document;
+    /** Links remain inert unless the host explicitly owns navigation. */
+    links?: boolean;
+}
+export interface DiagramRenderResult {
+    svg: string;
+    width: number;
+    height: number;
+    type: string;
+}
+export declare function sanitizeDiagramSvg(svg: string, doc?: Document): string;
+/** One lazy renderer for all Mermaid syntax surfaces. Never retries another engine. */
+export declare function renderDiagram(source: string, options?: DiagramRenderOptions): Promise<DiagramRenderResult>;

package/dist/diagrams/render.js

@@ -0,0 +1,107 @@
+import d from "../node_modules/.pnpm/dompurify@3.4.17/node_modules/dompurify/dist/purify.es.js";
+import { secureRandomUUID as y } from "../utils/secureRandom.js";
+class c extends Error {
+  constructor(t, l, n = 0, e = 0) {
+    super(l), this.code = t, this.line = n, this.column = e, this.name = "DiagramError";
+  }
+  code;
+  line;
+  column;
+}
+let p = Promise.resolve(), f = 0;
+const u = (o) => {
+  if (o?.aborted) throw new DOMException("Aborted", "AbortError");
+};
+function S(o, t = document) {
+  const l = t.defaultView?.DOMParser ?? DOMParser, n = new l().parseFromString(o, "image/svg+xml"), e = [];
+  for (const r of Array.from(n.querySelectorAll("foreignObject"))) {
+    const i = r.querySelector("math");
+    if (!i) {
+      r.remove();
+      continue;
+    }
+    const h = t.createElement("template");
+    h.innerHTML = d.sanitize(i.outerHTML, { USE_PROFILES: { mathMl: !0 }, FORBID_TAGS: ["annotation-xml"], FORBID_ATTR: ["href", "style"] });
+    const g = h.content.querySelector("math");
+    if (!g) {
+      r.remove();
+      continue;
+    }
+    r.replaceChildren(), r.setAttribute("data-floe-formula", String(e.length)), e.push(g);
+  }
+  const m = d.sanitize(new XMLSerializer().serializeToString(n.documentElement), {
+    USE_PROFILES: { svg: !0, svgFilters: !0, mathMl: !0 },
+    ADD_TAGS: ["foreignObject"],
+    ADD_ATTR: ["role"],
+    FORBID_TAGS: ["script", "style", "image", "iframe", "object", "embed", "animate", "set"]
+  }), a = new l().parseFromString(m, "image/svg+xml"), s = a.documentElement;
+  if (s.localName !== "svg" || a.querySelector("parsererror")) throw new c("unavailable", "Invalid diagram SVG.");
+  for (const r of [s, ...Array.from(s.querySelectorAll("*"))])
+    for (const i of Array.from(r.attributes))
+      /^on/i.test(i.name) && r.removeAttribute(i.name), i.localName === "href" && !/^(?:#|https?:\/\/|mailto:)/i.test(i.value.trim()) && r.removeAttribute(i.name), /url\s*\(/i.test(i.value) && !/^url\(#[\w-]+\)$/.test(i.value.trim()) && r.removeAttribute(i.name);
+  for (const r of Array.from(s.querySelectorAll("foreignObject"))) {
+    const i = e[Number(r.getAttribute("data-floe-formula"))];
+    r.removeAttribute("data-floe-formula"), i ? r.append(a.importNode(i, !0)) : r.remove();
+  }
+  return new XMLSerializer().serializeToString(s);
+}
+async function w(o, t, l) {
+  if (!o.includes("$$")) return { dispose() {
+  } };
+  const { default: n } = await import("katex"), e = t.createElement("span");
+  return e.style.cssText = "position:fixed;left:-99999px;top:0;visibility:hidden;display:inline-block;white-space:nowrap;", e.style.fontSize = l + "px", t.body.append(e), {
+    dispose: () => e.remove(),
+    math(m, a) {
+      e.style.fontSize = a + "px", e.innerHTML = d.sanitize(n.renderToString(m, { output: "mathml", throwOnError: !0, trust: !1, strict: "error" }), { USE_PROFILES: { html: !0, mathMl: !0 } });
+      const s = e.querySelector("math");
+      if (!s) throw new c("semantic", "The diagram formula could not be typeset.");
+      const { width: r, height: i } = s.getBoundingClientRect();
+      return { html: s.outerHTML, width: r, height: i };
+    }
+  };
+}
+function A(o, t = {}) {
+  if (o.length > 5e4 || f >= 128) return Promise.reject(new c("limit", "Diagram rendering limit exceeded."));
+  f++;
+  const l = p.then(async () => {
+    await new Promise((a) => setTimeout(a, 0)), u(t.signal);
+    const n = t.document ?? document, { renderAsync: e } = await import("pele/lazy");
+    u(t.signal);
+    const m = await w(o, n, t.fontSize ?? 16);
+    try {
+      u(t.signal);
+      const a = await e(o, {
+        idPrefix: "floe-diagram-" + y(),
+        autoDirection: !1,
+        maxWidth: t.maxWidth,
+        fontFamily: t.fontFamily ?? "Inter, system-ui, sans-serif",
+        fontFamilyMono: t.fontFamilyMono ?? "monospace",
+        fontSize: t.fontSize ?? 16,
+        links: t.links === !0,
+        images: !1,
+        linkSchemes: ["https", "http", "mailto"],
+        linkRel: "noopener noreferrer",
+        limit: 5e4,
+        maxEdges: 500,
+        outputLimit: 4e6,
+        math: m.math
+      });
+      return u(t.signal), { svg: S(a.svg, n), width: a.width, height: a.height, type: a.type };
+    } finally {
+      m.dispose();
+    }
+  }).catch((n) => {
+    if (n instanceof c || n instanceof DOMException && n.name === "AbortError") throw n;
+    const e = n;
+    throw new c(e.code ?? "unavailable", e.message ?? "Diagram rendering failed.", e.line, e.column);
+  });
+  return p = l.catch(() => {
+  }).finally(() => {
+    f--;
+  }), l;
+}
+export {
+  c as DiagramError,
+  A as renderDiagram,
+  S as sanitizeDiagramSvg
+};

package/dist/diagrams.css

@@ -0,0 +1,29 @@
+.floe-diagram {
+  --pele-bg: var(--background); --pele-fg: var(--foreground);
+  --pele-muted: var(--muted-foreground); --pele-line: var(--muted-foreground);
+  --pele-surface: var(--card); --pele-surface-alt: var(--muted);
+  --pele-border: var(--border); --pele-accent: var(--primary);
+  --pele-font: var(--font-sans, Inter, system-ui, sans-serif);
+  --pele-font-mono: var(--font-mono, monospace);
+  --pele-fg-on-light: #171717; --pele-fg-on-dark: #fafafa;
+  min-width: 0; background:var(--background); color: var(--foreground); font: 14px/1.5 var(--pele-font);
+  border: 1px solid var(--border); border-radius: .5rem; overflow: hidden;
+}
+.floe-diagram-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; padding:.375rem; border-bottom:1px solid var(--border); }
+.floe-diagram-toolbar button { font:inherit; white-space:nowrap; border:0; border-radius:.25rem; padding:.25rem .5rem; background:transparent; color:inherit; cursor:pointer; }
+.floe-diagram-toolbar button:hover,.floe-diagram-toolbar button[aria-pressed=true] { background:var(--accent); }
+.floe-diagram-toolbar button:focus-visible { outline:2px solid var(--ring); outline-offset:-2px; }
+.floe-diagram-feedback { flex:1; min-width:0; font-size:.85em; }
+.floe-diagram-viewport { padding:.75rem; min-width:0; max-height:65vh; }
+.floe-diagram-svg { min-height:2rem; width:100%; }
+.floe-diagram-svg > svg { display:block; max-width:100%; height:auto; margin:auto; }
+.floe-diagram-source,.floe-diagram-error pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:.75rem; font:12px/1.6 var(--pele-font-mono); }
+.floe-diagram-status,.floe-diagram-error { padding:.75rem; }
+.floe-diagram-error { color:var(--error,var(--foreground)); }
+.floe-diagram-dialog { width:min(94vw,1100px); max-width:94vw; }
+@media (forced-colors:active) { .floe-diagram { --pele-fg:CanvasText; --pele-line:CanvasText; --pele-bg:Canvas; --pele-surface:Canvas; --pele-surface-alt:Canvas; --pele-border:CanvasText; --pele-accent:Highlight; } }
+
+.floe-diagram-zoomed > svg { width:calc(100% * var(--floe-diagram-scale,1)); max-width:none; }
+.floe-diagram-toolbar button:disabled { opacity:.5; cursor:default; }
+
+.floe-diagram-svg:not(.floe-diagram-zoomed) > svg { max-height:60vh; }