@floegence/floe-webapp-core 0.86.74 → 0.86.75

package/dist/components/chat/blocks/MermaidBlock.d.ts

@@ -1,6 +1,10 @@
 import { type Component } from 'solid-js';
+import { type DiagramLabels } from '../../../diagrams/Diagram';
+import '../../../styles/diagrams.css';
 export interface MermaidBlockProps {
     content: string;
     class?: string;
+    labels?: DiagramLabels;
 }
+/** Existing public component, now backed by the shared diagram surface. */
 export declare const MermaidBlock: Component<MermaidBlockProps>;

package/dist/components/chat/blocks/MermaidBlock.js

@@ -1,200 +1,25 @@
-import { insert as a, memo as k, createComponent as u, effect as D, className as ae, Portal as ce, setStyleProperty as W, template as o, delegateEvents as se } from "solid-js/web";
-import { createSignal as h, createEffect as O, onCleanup as R, Show as de } from "solid-js";
-import { cn as ue } from "../../../utils/cn.js";
-import { renderMermaid as me } from "../hooks/useMermaid.js";
-import { lockBodyStyle as he } from "../../../utils/bodyStyleLock.js";
-import { deferNonBlocking as pe } from "../../../utils/defer.js";
-var fe = /* @__PURE__ */ o("<div>"), ge = /* @__PURE__ */ o("<div class=chat-image-dialog-backdrop>"), ye = /* @__PURE__ */ o('<div class=chat-image-dialog><div class=chat-image-dialog-toolbar><button type=button class=chat-image-dialog-btn title="Zoom out (-)"></button><span class=chat-image-dialog-scale>%</span><button type=button class=chat-image-dialog-btn title="Zoom in (+)"></button><button type=button class=chat-image-dialog-btn title="Reset (0)"></button><div class=chat-image-dialog-separator></div><button type=button class=chat-image-dialog-btn title="Close (Esc)"></button></div><div class=chat-image-dialog-content style=touch-action:none><div class=chat-mermaid-dialog-svg></div></div><div class=chat-image-dialog-hint>Scroll/pinch to zoom · Drag to pan · Press Esc to close'), ve = /* @__PURE__ */ o("<div class=chat-mermaid-loading><span>Rendering diagram..."), xe = /* @__PURE__ */ o("<div class=chat-mermaid-error><span>"), $e = /* @__PURE__ */ o('<div class="chat-mermaid-content chat-mermaid-clickable">'), be = /* @__PURE__ */ o('<svg class="animate-spin h-5 w-5"viewBox="0 0 24 24"fill=none><circle class=opacity-25 cx=12 cy=12 r=10 stroke=currentColor stroke-width=4></circle><path class=opacity-75 fill=currentColor d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z">'), ke = /* @__PURE__ */ o('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><line x1=12 y1=8 x2=12 y2=12></line><line x1=12 y1=16 x2=12.01 y2=16>'), _e = /* @__PURE__ */ o('<svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>'), we = /* @__PURE__ */ o('<svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><circle cx=11 cy=11 r=8></circle><line x1=21 y1=21 x2=16.65 y2=16.65></line><line x1=11 y1=8 x2=11 y2=14></line><line x1=8 y1=11 x2=14 y2=11>'), Ce = /* @__PURE__ */ o('<svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><circle cx=11 cy=11 r=8></circle><line x1=21 y1=21 x2=16.65 y2=16.65></line><line x1=8 y1=11 x2=14 y2=11>'), Se = /* @__PURE__ */ o('<svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5">');
-const Xe = (T) => {
-  const [$, X] = h(null), [_, Y] = h(null), [j, b] = h(!0), [w, F] = h(!1), [r, C] = h(1), [y, v] = h({
-    x: 0,
-    y: 0
-  }), [G, d] = h(!1);
-  let S = 0, p = null, I = {
-    x: 0,
-    y: 0
-  };
-  const i = /* @__PURE__ */ new Map();
-  let c = null, s = null, f = 0, x = 1;
-  const J = 0.5, Q = 5, Z = 0.25, ee = (e) => Math.max(J, Math.min(e, Q)), M = (e) => {
-    const t = ee(e);
-    C(t), t <= 1 && (v({
-      x: 0,
-      y: 0
-    }), d(!1));
-  };
-  O(() => {
-    const e = ++S, t = T.content;
-    if (!t) {
-      X(null), b(!1);
-      return;
-    }
-    b(!0), Y(null), pe(() => {
-      me(t).then((n) => {
-        e === S && (X(n), b(!1));
-      }).catch((n) => {
-        e === S && (Y(n.message || "Failed to render diagram"), b(!1));
-      });
-    });
-  });
-  const te = () => {
-    C(1), v({
-      x: 0,
-      y: 0
-    }), F(!0);
-  }, E = () => {
-    F(!1);
-  }, L = () => {
-    M(r() + Z);
-  }, z = () => {
-    M(r() - Z);
-  }, N = () => {
-    C(1), v({
-      x: 0,
-      y: 0
-    }), d(!1);
-  }, ne = (e) => {
-    e.preventDefault(), e.deltaY < 0 ? L() : z();
-  }, ie = (e) => {
-    if (e.pointerType === "mouse" && e.button !== 0) return;
-    e.preventDefault();
-    const t = e.currentTarget;
-    i.set(e.pointerId, {
-      x: e.clientX,
-      y: e.clientY
-    });
-    try {
-      t.setPointerCapture(e.pointerId);
-    } catch {
-    }
-    if (i.size === 1) {
-      c = {
-        x: e.clientX,
-        y: e.clientY
-      }, s = {
-        ...y()
-      }, d(r() > 1);
-      return;
-    }
-    if (i.size === 2) {
-      const [n, l] = Array.from(i.values());
-      f = Math.hypot(n.x - l.x, n.y - l.y), x = r(), c = null, s = null, d(!1);
-    }
-  }, re = (e) => {
-    if (i.has(e.pointerId)) {
-      if (i.set(e.pointerId, {
-        x: e.clientX,
-        y: e.clientY
-      }), i.size === 2) {
-        const [t, n] = Array.from(i.values()), l = Math.hypot(t.x - n.x, t.y - n.y);
-        f > 0 && M(x * (l / f));
-        return;
-      }
-      if (!(i.size !== 1 || r() <= 1) && (d(!0), (!c || !s) && (c = {
-        x: e.clientX,
-        y: e.clientY
-      }, s = {
-        ...y()
-      }), I = {
-        x: s.x + (e.clientX - c.x),
-        y: s.y + (e.clientY - c.y)
-      }, p === null)) {
-        if (typeof requestAnimationFrame > "u") {
-          v(I);
-          return;
-        }
-        p = requestAnimationFrame(() => {
-          p = null, !(i.size !== 1 || r() <= 1) && v(I);
-        });
-      }
-    }
-  }, q = (e) => {
-    i.delete(e.pointerId);
-    try {
-      e.currentTarget.releasePointerCapture(e.pointerId);
-    } catch {
-    }
-    if (i.size === 0) {
-      d(!1), c = null, s = null, f = 0, x = r();
-      return;
-    }
-    if (i.size === 1) {
-      const t = Array.from(i.values())[0];
-      c = {
-        x: t.x,
-        y: t.y
-      }, s = {
-        ...y()
-      }, d(r() > 1), f = 0, x = r();
-      return;
-    }
-    if (i.size === 2) {
-      const [t, n] = Array.from(i.values());
-      f = Math.hypot(t.x - n.x, t.y - n.y), x = r(), c = null, s = null, d(!1);
-    }
-  };
-  return R(() => {
-    p !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(p), p = null), i.clear();
-  }), O(() => {
-    if (!w()) return;
-    const e = (t) => {
-      t.key === "Escape" ? E() : t.key === "+" || t.key === "=" ? L() : t.key === "-" ? z() : t.key === "0" && N();
-    };
-    document.addEventListener("keydown", e), R(() => document.removeEventListener("keydown", e));
-  }), O(() => {
-    if (!w()) return;
-    const e = he({
-      overflow: "hidden"
-    });
-    R(e);
-  }), [(() => {
-    var e = fe();
-    return a(e, (() => {
-      var t = k(() => !!j());
-      return () => t() && (() => {
-        var n = ve(), l = n.firstChild;
-        return a(n, u(Ie, {}), l), n;
-      })();
-    })(), null), a(e, (() => {
-      var t = k(() => !!_());
-      return () => t() && (() => {
-        var n = xe(), l = n.firstChild;
-        return a(n, u(Me, {}), l), a(l, _), n;
-      })();
-    })(), null), a(e, (() => {
-      var t = k(() => !!($() && !_()));
-      return () => t() && (() => {
-        var n = $e();
-        return n.$$click = te, D(() => n.innerHTML = $()), n;
-      })();
-    })(), null), D(() => ae(e, ue("chat-mermaid-block", T.class))), e;
-  })(), u(de, {
-    get when() {
-      return k(() => !!w())() && $();
-    },
-    get children() {
-      return u(ce, {
-        get children() {
-          return [(() => {
-            var e = ge();
-            return e.$$click = E, e;
-          })(), (() => {
-            var e = ye(), t = e.firstChild, n = t.firstChild, l = n.nextSibling, le = l.firstChild, A = l.nextSibling, P = A.nextSibling, oe = P.nextSibling, H = oe.nextSibling, g = t.nextSibling, B = g.firstChild;
-            return n.$$click = z, a(n, u(ze, {})), a(l, () => Math.round(r() * 100), le), A.$$click = L, a(A, u(Le, {})), P.$$click = N, a(P, u(Ae, {})), H.$$click = E, a(H, u(Ee, {})), g.addEventListener("pointercancel", q), g.$$pointerup = q, g.$$pointermove = re, g.$$pointerdown = ie, g.addEventListener("wheel", ne), D((m) => {
-              var K = `translate(${y().x}px, ${y().y}px) scale(${r()})`, U = r() > 1 ? G() ? "grabbing" : "grab" : "default", V = $();
-              return K !== m.e && W(B, "transform", m.e = K), U !== m.t && W(B, "cursor", m.t = U), V !== m.a && (B.innerHTML = m.a = V), m;
-            }, {
-              e: void 0,
-              t: void 0,
-              a: void 0
-            }), e;
-          })()];
-        }
-      });
-    }
-  })];
-}, Ie = () => be(), Me = () => ke(), Ee = () => _e(), Le = () => we(), ze = () => Ce(), Ae = () => Se();
-se(["click", "pointerdown", "pointermove", "pointerup"]);
+import { createComponent as a } from "solid-js/web";
+import "solid-js";
+import { Diagram as m, diagramLabelsEnUS as n } from "../../../diagrams/Diagram.js";
+import { renderMermaid as o } from "../hooks/useMermaid.js";
+/* empty css                           */
+const i = (e, r) => o(e, "default", r).then((t) => ({
+  svg: t,
+  width: 0,
+  height: 0,
+  type: "mermaid"
+})), u = (e) => a(m, {
+  get source() {
+    return e.content;
+  },
+  get class() {
+    return e.class;
+  },
+  get labels() {
+    return e.labels ?? n;
+  },
+  render: i
+});
 export {
-  Xe as MermaidBlock
+  u as MermaidBlock
 };

package/dist/components/chat/hooks/useMermaid.d.ts

@@ -1,10 +1,11 @@
+import { type DiagramRenderOptions } from '../../../diagrams/render';
 /**
  * Configure the Mermaid worker.
  * Call this during app initialization to enable worker mode.
  */
 export declare function configureMermaidWorker(worker: Worker): Promise<void>;
 /**
- * Configure a synchronous Mermaid renderer (fallback).
+ * Configure an explicit host Mermaid renderer.
  * If you don't use a worker, pass a Mermaid instance directly.
  */
 export declare function configureSyncMermaid(mermaid: {
@@ -12,7 +13,7 @@ export declare function configureSyncMermaid(mermaid: {
         svg: string;
     }>;
 }): void;
-export declare function renderMermaid(content: string, theme?: string): Promise<string>;
+export declare function renderMermaid(content: string, theme?: string, options?: DiagramRenderOptions): Promise<string>;
 export declare function useMermaid(): {
     render: (content: string, theme?: string) => Promise<string>;
     isLoading: import("solid-js").Accessor<boolean>;

package/dist/components/chat/hooks/useMermaid.js

@@ -1,76 +1,79 @@
 import { secureRandomUUID as w } from "../../../utils/secureRandom.js";
-import { createSignal as M } from "solid-js";
-let a = null, f = !1, c = null;
-const l = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), k = 200;
-let u = null, p = 0;
-function v(n) {
-  return a = n, c = new Promise((o) => {
+import { createSignal as y } from "solid-js";
+import { sanitizeDiagramSvg as m, renderDiagram as k } from "../../../diagrams/render.js";
+let a = null, f = !1, d = null;
+const c = /* @__PURE__ */ new Map();
+let l = null, p = 0;
+function D(r) {
+  return a = r, d = new Promise((o) => {
     a.onmessage = (e) => {
       if ("type" in e.data && e.data.type === "ready") {
         f = !0, o();
         return;
       }
-      const { id: i, svg: d, error: t } = e.data, r = l.get(i);
-      r && (l.delete(i), t ? r.reject(new Error(t)) : r.resolve(d));
+      const { id: s, svg: n, error: t } = e.data, i = c.get(s);
+      i && (c.delete(s), t ? i.reject(new Error(t)) : i.resolve(n));
     }, a.onerror = (e) => {
       console.error("Mermaid worker error:", e);
     };
-  }), c;
+  }), d;
 }
-function I(n) {
-  u = n;
+function R(r) {
+  l = r;
 }
-async function h() {
-  return a ? f ? !0 : c ? (await c, !0) : !1 : !1;
+async function M() {
+  return a ? f ? !0 : d ? (await d, !0) : !1 : !1;
 }
-async function W(n, o = "default") {
-  const e = `${o}:${n}`, i = s.get(e);
-  if (i) return i;
-  if (await h() && a)
-    return new Promise((t, r) => {
-      const m = w();
-      l.set(m, {
+async function v(r, o = "default", e = {}) {
+  if (await M() && a)
+    return new Promise((n, t) => {
+      const i = w();
+      c.set(i, {
         resolve: (g) => {
-          if (s.size >= k) {
-            const y = s.keys().next().value;
-            y && s.delete(y);
+          try {
+            n(m(g, e.document));
+          } catch (u) {
+            t(u instanceof Error ? u : new Error(String(u)));
           }
-          s.set(e, g), t(g);
         },
-        reject: r
-      }), a.postMessage({ id: m, content: n, theme: o });
+        reject: t
+      }), a.postMessage({ id: i, content: r, theme: o });
     });
-  if (u)
+  if (l)
     try {
-      const t = `mermaid-sync-${p++}`, { svg: r } = await u.render(t, n);
-      return s.set(e, r), r;
-    } catch (t) {
-      const r = t instanceof Error ? t.message : "Failed to render diagram";
-      throw new Error(r);
+      const n = `mermaid-sync-${p++}`, { svg: t } = await l.render(n, r);
+      return m(t, e.document);
+    } catch (n) {
+      const t = n instanceof Error ? n.message : "Failed to render diagram";
+      throw new Error(t);
     }
-  throw new Error("Mermaid renderer not configured. Call configureMermaidWorker() or configureSyncMermaid() first.");
+  return (await k(r, e)).svg;
 }
-function R() {
-  const [n, o] = M(!1);
+function S() {
+  const [r, o] = y(!1);
   return {
-    render: async (i, d) => {
+    render: async (s, n) => {
       o(!0);
       try {
-        return await W(i, d);
+        return await v(s, n);
       } finally {
         o(!1);
       }
     },
-    isLoading: n
+    isLoading: r
   };
 }
-function S() {
-  a && (a.terminate(), a = null, f = !1, c = null, l.clear()), s.clear();
+function I() {
+  if (a) {
+    a.terminate(), a = null, f = !1, d = null;
+    for (const r of c.values()) r.reject(new Error("Diagram worker terminated."));
+    c.clear();
+  }
 }
 export {
-  v as configureMermaidWorker,
-  I as configureSyncMermaid,
-  W as renderMermaid,
-  S as terminateMermaidWorker,
-  R as useMermaid
+  D as configureMermaidWorker,
+  R as configureSyncMermaid,
+  v as renderMermaid,
+  I as terminateMermaidWorker,
+  S as useMermaid
 };

package/dist/components/chat/markdown/fence.d.ts

@@ -0,0 +1,2 @@
+/** A matching CommonMark fence, independent of whether streaming has ended. */
+export declare function isClosedMarkdownFence(raw: string): boolean;

package/dist/components/chat/markdown/fence.js

@@ -0,0 +1,14 @@
+function r(s) {
+  const e = s.replace(/\r\n?/g, `
+`).split(`
+`), t = e[0]?.match(/^[ ]{0,3}(\x60{3,}|~{3,})/);
+  if (!t) return !1;
+  const c = t[1];
+  return e.slice(1).some((o) => {
+    const n = o.match(/^[ ]{0,3}(\x60+|~+)[ \t]*$/)?.[1];
+    return !!n && n[0] === c[0] && n.length >= c.length;
+  });
+}
+export {
+  r as isClosedMarkdownFence
+};

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; }

package/dist/diagrams.d.ts

@@ -0,0 +1,4 @@
+export { Diagram, diagramLabelsEnUS } from './diagrams/Diagram';
+export type { DiagramProps, DiagramLabels } from './diagrams/Diagram';
+export { renderDiagram, sanitizeDiagramSvg, DiagramError } from './diagrams/render';
+export type { DiagramRenderOptions, DiagramRenderResult, DiagramErrorCode } from './diagrams/render';

package/dist/diagrams.js

@@ -0,0 +1,9 @@
+import { Diagram as i, diagramLabelsEnUS as m } from "./diagrams/Diagram.js";
+import { DiagramError as g, renderDiagram as o, sanitizeDiagramSvg as D } from "./diagrams/render.js";
+export {
+  i as Diagram,
+  g as DiagramError,
+  m as diagramLabelsEnUS,
+  o as renderDiagram,
+  D as sanitizeDiagramSvg
+};

package/dist/floe-webapp-core.css

@@ -0,0 +1 @@
+.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}

package/dist/markdown.d.ts

@@ -1,4 +1,5 @@
 export { createMarkdownParser } from './components/chat/markdown/parser';
+export { isClosedMarkdownFence } from './components/chat/markdown/fence';
 export { createIncrementalMarkdownParser } from './components/chat/markdown/incremental';
 export { createMarkdownSessionWorker } from './components/chat/markdown/createSessionWorker';
 export { createMarkdownSessionHandler, createMarkdownWorkerClient } from './components/chat/markdown/workerSession';

package/dist/markdown.js

@@ -1,11 +1,13 @@
 import { createMarkdownParser as o } from "./components/chat/markdown/parser.js";
-import { createIncrementalMarkdownParser as n } from "./components/chat/markdown/incremental.js";
-import { createMarkdownSessionWorker as k } from "./components/chat/markdown/createSessionWorker.js";
-import { createMarkdownSessionHandler as d, createMarkdownWorkerClient as s } from "./components/chat/markdown/workerSession.js";
+import { isClosedMarkdownFence as n } from "./components/chat/markdown/fence.js";
+import { createIncrementalMarkdownParser as d } from "./components/chat/markdown/incremental.js";
+import { createMarkdownSessionWorker as s } from "./components/chat/markdown/createSessionWorker.js";
+import { createMarkdownSessionHandler as m, createMarkdownWorkerClient as w } from "./components/chat/markdown/workerSession.js";
 export {
-  n as createIncrementalMarkdownParser,
+  d as createIncrementalMarkdownParser,
   o as createMarkdownParser,
-  d as createMarkdownSessionHandler,
-  k as createMarkdownSessionWorker,
-  s as createMarkdownWorkerClient
+  m as createMarkdownSessionHandler,
+  s as createMarkdownSessionWorker,
+  w as createMarkdownWorkerClient,
+  n as isClosedMarkdownFence
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.74",
+  "version": "0.86.75",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,7 +155,12 @@
     "./pptx": {
       "types": "./dist/pptx.d.ts",
       "import": "./dist/pptx.js"
-    }
+    },
+    "./diagrams": {
+      "types": "./dist/diagrams.d.ts",
+      "import": "./dist/diagrams.js"
+    },
+    "./diagrams.css": "./dist/diagrams.css"
   },
   "files": [
     "dist",
@@ -174,7 +179,9 @@
     "clean": "rm -rf dist *.tsbuildinfo"
   },
   "peerDependencies": {
-    "solid-js": "^1.9.17"
+    "solid-js": "^1.9.17",
+    "pele": "1.13.0",
+    "katex": "0.18.10"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -184,7 +191,6 @@
     "libavoid-js": "0.5.0-beta.5",
     "marked": "^17.0.6",
     "marked-cjk-friendly": "0.1.2",
-    "mermaid": "^11.17.2",
     "monaco-editor": "^0.57.0",
     "pdfjs-dist": "6.3.289",
     "shiki": "^3.23.0",
@@ -192,12 +198,23 @@
     "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
+    "@aiden0z/pptx-renderer": "1.3.0",
     "@tailwindcss/vite": "^4.3.3",
+    "@types/katex": "0.16.8",
+    "katex": "0.18.10",
+    "pele": "1.13.0",
     "solid-js": "^1.9.17",
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.6",
-    "vite-plugin-solid": "^2.11.14",
-    "@aiden0z/pptx-renderer": "1.3.0"
+    "vite-plugin-solid": "^2.11.14"
+  },
+  "peerDependenciesMeta": {
+    "pele": {
+      "optional": true
+    },
+    "katex": {
+      "optional": true
+    }
   }
 }