@floegence/floe-webapp-core 0.86.75 → 0.86.76

package/dist/diagrams/Diagram.js

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

package/dist/diagrams.css

@@ -14,11 +14,13 @@
 .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-viewport { position:relative; box-sizing:border-box; padding:.75rem; min-width:0; height:clamp(12rem,36vw,24rem); 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 { box-sizing:border-box; height:clamp(12rem,36vw,24rem); max-height:65vh; overflow: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-status,.floe-diagram-error { position:absolute; inset:0; box-sizing:border-box; padding:.75rem; overflow:auto; background:var(--background); }
+.floe-diagram-status { display:grid; place-items:center; }
 .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; } }
@@ -26,4 +28,4 @@
 .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; }
+.floe-diagram-svg:not(.floe-diagram-zoomed) > svg { max-height:min(60vh,calc(clamp(12rem,36vw,24rem) - 1.5rem)); }

package/dist/floe-webapp-core.css

@@ -1 +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}
+.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{position:relative;box-sizing:border-box;padding:.75rem;min-width:0;height:clamp(12rem,36vw,24rem);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{box-sizing:border-box;height:clamp(12rem,36vw,24rem);max-height:65vh;overflow: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{position:absolute;inset:0;box-sizing:border-box;padding:.75rem;overflow:auto;background:var(--background)}.floe-diagram-status{display:grid;place-items:center}.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:min(60vh,calc(clamp(12rem,36vw,24rem) - 1.5rem))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.75",
+  "version": "0.86.76",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",