@floegence/floe-webapp-core 0.86.55 → 0.86.57

package/dist/chat.css

@@ -1918,7 +1918,7 @@ pre.chat-md-code-block *::selection,
 /* Images and HTML retain one quiet, bounded canvas throughout their lifecycle. */
 @layer components {
   .chat-html-canvas, .chat-media[data-media-kind="image"] .chat-media-viewport { position: relative; isolation: isolate; display: block; width: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--muted) 38%, var(--background)); }
-  .chat-html-canvas { --canvas-inset: clamp(1rem, 5%, 3rem); height: 28rem; }
+  .chat-html-canvas { --canvas-inset: .625rem; --canvas-control-size: 2.125rem; height: 28rem; }
   .chat-media[data-media-kind="image"] .chat-media-viewport { min-height: 14rem; padding: 3.5rem clamp(1rem, 5%, 2rem) 1.5rem; border: 0; }
   .chat-media[data-media-kind="image"] .chat-media-viewport::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
   .chat-media[data-media-kind="image"] .chat-media-placeholder { padding: 0; border-radius: 0; background: transparent; }
@@ -1929,7 +1929,7 @@ pre.chat-md-code-block *::selection,
   .chat-html-dots, .chat-media[data-media-kind="image"] .chat-media-viewport::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--muted-foreground) 24%, transparent) .75px, transparent .9px); background-size: 20px 20px; background-position: 9px 9px; }
   .chat-html-sheen { opacity: 0; background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--foreground) 20%, transparent) 49%, transparent 73%); background-size: 250% 100%; mask-image: radial-gradient(circle, black .9px, transparent 1.1px); mask-size: 20px 20px; mask-position: 9px 9px; }
   .chat-html-canvas:is([data-state="generating"], [data-state="loading"]) .chat-html-sheen { opacity: 1; animation: chat-html-sweep 3.4s ease-in-out infinite; }
-  .chat-html-sheet, .chat-html-source { position: absolute; inset: 3.5rem var(--canvas-inset) 4.25rem; display: flex; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: .625rem; box-shadow: 0 14px 40px rgb(0 0 0 / .06), 0 2px 6px rgb(0 0 0 / .03); background: var(--background); }
+  .chat-html-sheet, .chat-html-source { position: absolute; inset: calc(var(--canvas-control-size) + 1rem) var(--canvas-inset) var(--canvas-inset); display: flex; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: .625rem; box-shadow: 0 14px 40px rgb(0 0 0 / .06), 0 2px 6px rgb(0 0 0 / .03); background: var(--background); }
   .chat-html-sheet { transition: opacity 280ms ease; }
   .chat-html-sheet-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
   .chat-html-sheet .chat-media-html { height: 100%; border-radius: 0; }
@@ -1937,17 +1937,21 @@ pre.chat-md-code-block *::selection,
   .chat-html-source code { padding: 0; color: inherit; background: none; font: inherit; }
   .chat-html-loading { position: absolute; inset: 3.5rem var(--canvas-inset); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; text-align: center; color: var(--muted-foreground); font-size: .75rem; }
   .chat-html-orb, .chat-media[data-media-kind="image"] .chat-media-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.125rem; height: 2.125rem; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 50%; color: var(--muted-foreground); background: color-mix(in srgb, var(--background) 88%, transparent); box-shadow: 0 2px 5px rgb(0 0 0 / .035); backdrop-filter: blur(12px); cursor: pointer; transition: color 140ms, background 140ms, transform 140ms; }
-  .chat-html-orb:hover, .chat-media[data-media-kind="image"] .chat-media-action:hover { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
+  .chat-html-orb:hover:not(:disabled), .chat-media[data-media-kind="image"] .chat-media-action:hover { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
+  .chat-html-orb { width: var(--canvas-control-size); height: var(--canvas-control-size); }
+  .chat-html-orb:disabled { opacity: .45; cursor: not-allowed; }
   .chat-html-orb[aria-pressed="true"] { color: var(--foreground); background: var(--muted); }
   .chat-html-orb:focus-visible, .chat-html-source:focus-visible, .chat-media[data-media-kind="image"] .chat-media-action:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
   .chat-html-orb svg { width: .9375rem; height: .9375rem; }
-  .chat-html-expand { position: absolute; top: .875rem; right: .875rem; }
-  .chat-html-controls { position: absolute; bottom: .875rem; left: .875rem; display: flex; align-items: center; gap: .5rem; }
-  .chat-html-feedback { position: absolute; right: 1rem; bottom: 1.125rem; max-width: calc(100% - 7.5rem); display: flex; align-items: center; gap: .4rem; font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground); }
+  .chat-html-toolbar { position: absolute; top: .5rem; right: var(--canvas-inset); left: var(--canvas-inset); height: var(--canvas-control-size); display: flex; align-items: center; gap: .5rem; }
+  .chat-html-controls, .chat-html-window-actions { display: flex; flex-shrink: 0; align-items: center; gap: .5rem; }
+  .chat-html-window-actions { margin-left: auto; }
+  .chat-html-feedback { min-width: 0; display: flex; align-items: center; gap: .4rem; font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground); }
+  .chat-html-feedback > span { min-width: 0; max-height: var(--canvas-control-size); overflow: auto; }
   .chat-html-feedback svg { width: .875rem; height: .875rem; flex-shrink: 0; }
   @keyframes chat-html-sweep { from { background-position: 120% 0; } to { background-position: -80% 0; } }
-  @media (max-width: 480px) { .chat-html-canvas { height: 25rem; --canvas-inset: 1rem; } }
-  @media (pointer: coarse) { .chat-html-orb, .chat-media[data-media-kind="image"] .chat-media-action { width: 2.625rem; height: 2.625rem; } .chat-media[data-media-kind="image"] .chat-media-viewport { padding-top: 4rem; } .chat-html-controls { bottom: .75rem; left: .75rem; } }
+  @media (max-width: 480px) { .chat-html-canvas { height: 25rem; } }
+  @media (pointer: coarse) { .chat-html-canvas { --canvas-control-size: 2.625rem; } .chat-media[data-media-kind="image"] .chat-media-action { width: 2.625rem; height: 2.625rem; } .chat-media[data-media-kind="image"] .chat-media-viewport { padding-top: 4rem; } }
   @media (prefers-reduced-motion: reduce) { .chat-html-sheen { animation: none !important; background-position: 50% 0; } .chat-html-orb, .chat-html-sheet, .chat-media[data-media-kind="image"] .chat-media-action { transition: none; } }
   @media (forced-colors: active) { .chat-html-orb, .chat-html-source, .chat-html-canvas, .chat-media[data-media-kind="image"] .chat-media-action { border-color: CanvasText; } .chat-html-sheen { display: none; } }
 }

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

@@ -7,7 +7,7 @@ export interface HtmlPreviewCanvasProps {
     expanded: boolean;
     onExpand: () => void;
     onRetry: () => void;
-    onPreview: () => void;
+    onPreview: (event?: MouseEvent) => void;
     previewLabel: string;
     resource?: ResolvedMarkdownMedia;
     children: JSX.Element;

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

@@ -1,129 +1,129 @@
-import { createComponent as a, insert as l, effect as y, setAttribute as r, memo as N, template as h, use as O, delegateEvents as j } from "solid-js/web";
-import { createSignal as U, onCleanup as B, createMemo as I, Show as d } from "solid-js";
-import { Copy as J, Eye as z, Refresh as D, ExternalLink as K, FolderOpen as Q, Minus as W, Maximize as X, Code as Y, MoreHorizontal as Z, Check as p } from "../../icons/index.js";
-import { Dropdown as ee } from "../../ui/Dropdown.js";
-var te = /* @__PURE__ */ h("<pre class=chat-html-source tabindex=0><code>"), ae = /* @__PURE__ */ h("<button type=button class=chat-media-retry>"), le = /* @__PURE__ */ h("<span class=chat-html-loading role=status><span>"), ne = /* @__PURE__ */ h("<span class=chat-html-feedback role=status>"), re = /* @__PURE__ */ h('<span class=chat-html-canvas><span class=chat-html-dots aria-hidden=true></span><span class=chat-html-sheen aria-hidden=true></span><span class=chat-html-sheet></span><button type=button class="chat-html-orb chat-html-expand"></button><span class=chat-html-controls><button type=button class=chat-html-orb data-chat-media-action=source>');
-const de = (e) => {
-  const [c, x] = U(!1), [S, k] = U("");
-  let b, v = !1, f;
-  const $ = (n) => {
-    clearTimeout(f), k(n), f = setTimeout(() => k(""), 2400);
+import { createComponent as a, insert as l, effect as $, setAttribute as n, memo as Q, template as b, use as W, delegateEvents as X } from "solid-js/web";
+import { createSignal as N, onCleanup as Y, createMemo as Z, Show as u } from "solid-js";
+import { Copy as p, Eye as O, Refresh as j, ExternalLink as B, FolderOpen as ee, Code as te, MoreHorizontal as ae, Check as le, Minus as ne, Maximize as ie } from "../../icons/index.js";
+import { Dropdown as re } from "../../ui/Dropdown.js";
+var ce = /* @__PURE__ */ b("<pre class=chat-html-source tabindex=0><code>"), oe = /* @__PURE__ */ b("<button type=button class=chat-media-retry>"), se = /* @__PURE__ */ b("<span class=chat-html-loading role=status><span>"), de = /* @__PURE__ */ b("<span class=chat-html-feedback role=status><span>"), ue = /* @__PURE__ */ b('<span class=chat-html-canvas><span class=chat-html-dots aria-hidden=true></span><span class=chat-html-sheen aria-hidden=true></span><span class=chat-html-sheet></span><span class=chat-html-toolbar><span class=chat-html-controls><button type=button class=chat-html-orb data-chat-media-action=source></button></span><span class=chat-html-window-actions><button type=button class=chat-html-orb data-chat-media-action=preview></button><button type=button class="chat-html-orb chat-html-expand">');
+const ge = (e) => {
+  const [o, k] = N(!1), [C, L] = N("");
+  let v, m = !1, x;
+  const M = (i) => {
+    clearTimeout(x), L(i), x = setTimeout(() => L(""), 2400);
   };
-  B(() => {
-    v = !0, clearTimeout(f);
+  Y(() => {
+    m = !0, clearTimeout(x);
   });
-  const V = async () => {
+  const I = async () => {
     try {
-      if (await navigator.clipboard.writeText(e.html), v) return;
-      $(e.labels.copied ?? "Copied");
+      if (await navigator.clipboard.writeText(e.html), m) return;
+      M(e.labels.copied ?? "Copied");
     } catch {
-      if (v) return;
-      const n = e.labels.copyFailed ?? "Select and copy the source.";
-      x(!0), queueMicrotask(() => {
-        if (v) return;
-        b.focus({
+      if (m) return;
+      const i = e.labels.copyFailed ?? "Select and copy the source.";
+      k(!0), queueMicrotask(() => {
+        if (m) return;
+        v.focus({
           preventScroll: !0
         });
         const g = document.createRange();
-        g.selectNodeContents(b);
-        const m = window.getSelection();
-        m?.removeAllRanges(), m?.addRange(g), $(n);
+        g.selectNodeContents(v);
+        const w = window.getSelection();
+        w?.removeAllRanges(), w?.addRange(g), M(i);
       });
     }
-  }, q = I(() => [{
+  }, J = Z(() => [{
     id: "copy",
     label: e.labels.copyHTML ?? "Copy HTML",
-    icon: () => a(J, {}),
+    icon: () => a(p, {}),
     disabled: !e.html
   }, ...e.state === "ready" ? [{
     id: "preview",
     label: e.previewLabel,
-    icon: () => a(z, {})
+    icon: () => a(O, {})
   }, {
     id: "replay",
     label: e.labels.replay ?? "Reload preview",
-    icon: () => a(D, {})
+    icon: () => a(j, {})
   }] : [], ...e.resource?.openURL && !e.resource.reveal ? [{
     id: "open",
     label: e.labels.open,
-    icon: () => a(K, {})
+    icon: () => a(B, {})
   }] : [], ...e.resource?.reveal ? [{
     id: "reveal",
     label: e.resource.reveal.label,
-    icon: () => a(Q, {})
-  }] : []]), G = () => e.state === "generating" ? e.labels.generating ?? e.labels.loading : e.state === "incomplete" ? e.labels.incomplete ?? "Generation interrupted. Source is available." : e.state === "error" ? e.labels.unavailable : e.labels.loading;
+    icon: () => a(ee, {})
+  }] : []]), K = () => e.state === "generating" ? e.labels.generating ?? e.labels.loading : e.state === "incomplete" ? e.labels.incomplete ?? "Generation interrupted. Source is available." : e.state === "error" ? e.labels.unavailable : e.labels.loading;
   return (() => {
-    var n = re(), g = n.firstChild, m = g.nextSibling, w = m.nextSibling, o = w.nextSibling, C = o.nextSibling, u = C.firstChild;
-    return n.$$keydown = (t) => {
+    var i = ue(), g = i.firstChild, w = g.nextSibling, f = w.nextSibling, y = f.nextSibling, S = y.firstChild, h = S.firstChild, R = S.nextSibling, s = R.firstChild, d = s.nextSibling;
+    return i.$$keydown = (t) => {
       t.key === "Escape" && e.expanded && !t.defaultPrevented && (t.preventDefault(), e.onExpand());
-    }, l(w, () => e.children), l(n, a(d, {
+    }, l(f, () => e.children), l(i, a(u, {
       get when() {
-        return c();
+        return o();
       },
       get children() {
-        var t = te(), s = t.firstChild, i = b;
-        return typeof i == "function" ? O(i, t) : b = t, l(s, () => e.html), y(() => r(t, "aria-label", e.labels.showSource ?? "HTML source")), t;
+        var t = ce(), r = t.firstChild, c = v;
+        return typeof c == "function" ? W(c, t) : v = t, l(r, () => e.html), $(() => n(t, "aria-label", e.labels.showSource ?? "HTML source")), t;
       }
-    }), o), l(n, a(d, {
+    }), y), l(i, a(u, {
       get when() {
-        return N(() => !c())() && e.state !== "ready";
+        return Q(() => !o())() && e.state !== "ready";
       },
       get children() {
-        var t = le(), s = t.firstChild;
-        return l(s, G), l(t, a(d, {
+        var t = se(), r = t.firstChild;
+        return l(r, K), l(t, a(u, {
           get when() {
             return e.state === "error";
           },
           get children() {
-            var i = ae();
-            return i.$$click = () => e.onRetry(), l(i, a(D, {}), null), l(i, () => e.labels.retry, null), i;
+            var c = oe();
+            return c.$$click = () => e.onRetry(), l(c, a(j, {}), null), l(c, () => e.labels.retry, null), c;
           }
-        }), null), y(() => r(s, "data-floe-progress-shimmer", e.state === "loading" || e.state === "generating" ? "text" : void 0)), t;
+        }), null), $(() => n(r, "data-floe-progress-shimmer", e.state === "loading" || e.state === "generating" ? "text" : void 0)), t;
       }
-    }), o), o.$$click = () => e.onExpand(), l(o, a(d, {
+    }), y), h.$$click = () => k((t) => !t), l(h, a(u, {
       get when() {
-        return e.expanded;
-      },
-      get fallback() {
-        return a(X, {});
-      },
-      get children() {
-        return a(W, {});
-      }
-    })), u.$$click = () => x((t) => !t), l(u, a(d, {
-      get when() {
-        return c();
+        return o();
       },
       get fallback() {
-        return a(Y, {});
+        return a(te, {});
       },
       get children() {
-        return a(z, {});
+        return a(O, {});
       }
-    })), l(C, a(ee, {
+    })), l(S, a(re, {
       get trigger() {
-        return a(Z, {});
+        return a(ae, {});
       },
       triggerClass: "chat-html-orb",
       get triggerAriaLabel() {
         return e.labels.more ?? "More actions";
       },
-      items: q,
+      items: J,
       align: "start",
       onSelect: (t) => {
-        t === "copy" ? V() : t === "preview" ? e.onPreview() : t === "replay" ? e.onRetry() : t === "reveal" ? e.resource?.reveal?.onSelect() : t === "open" && e.resource?.openURL && window.open(e.resource.openURL, "_blank", "noopener,noreferrer");
+        t === "copy" ? I() : t === "preview" ? e.onPreview() : t === "replay" ? e.onRetry() : t === "reveal" ? e.resource?.reveal?.onSelect() : t === "open" && e.resource?.openURL && window.open(e.resource.openURL, "_blank", "noopener,noreferrer");
       }
-    }), null), l(n, a(d, {
+    }), null), l(y, a(u, {
       get when() {
-        return S();
+        return C();
+      },
+      get children() {
+        var t = de(), r = t.firstChild;
+        return l(t, a(le, {}), r), l(r, C), t;
+      }
+    }), R), s.$$click = (t) => e.onPreview(t), l(s, a(B, {})), d.$$click = () => e.onExpand(), l(d, a(u, {
+      get when() {
+        return e.expanded;
+      },
+      get fallback() {
+        return a(ie, {});
       },
       get children() {
-        var t = ne();
-        return l(t, a(p, {}), null), l(t, S, null), t;
+        return a(ne, {});
       }
-    }), null), y((t) => {
-      var s = e.state, i = c() ? "source" : "preview", L = e.state === "generating" || e.state === "loading", M = !!(c() || e.state !== "ready"), R = c() || e.state !== "ready", T = e.expanded ? "collapse" : "expand", _ = e.expanded, H = e.expanded ? e.labels.collapse : e.labels.expand, E = e.expanded ? e.labels.collapse : e.labels.expand, P = c(), A = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", F = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source";
-      return s !== t.e && r(n, "data-state", t.e = s), i !== t.t && r(n, "data-view", t.t = i), L !== t.a && r(n, "aria-busy", t.a = L), M !== t.o && w.classList.toggle("chat-html-sheet-hidden", t.o = M), R !== t.i && (w.inert = t.i = R), T !== t.n && r(o, "data-chat-media-action", t.n = T), _ !== t.s && r(o, "aria-expanded", t.s = _), H !== t.h && r(o, "aria-label", t.h = H), E !== t.r && r(o, "title", t.r = E), P !== t.d && r(u, "aria-pressed", t.d = P), A !== t.l && r(u, "aria-label", t.l = A), F !== t.u && r(u, "title", t.u = F), t;
+    })), $((t) => {
+      var r = e.state, c = o() ? "source" : "preview", T = e.state === "generating" || e.state === "loading", _ = !!(o() || e.state !== "ready"), H = o() || e.state !== "ready", E = o(), P = o() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", A = o() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", F = e.state !== "ready", U = e.previewLabel, z = e.previewLabel, D = e.expanded ? "collapse" : "expand", V = e.expanded, q = e.expanded ? e.labels.collapse : e.labels.expand, G = e.expanded ? e.labels.collapse : e.labels.expand;
+      return r !== t.e && n(i, "data-state", t.e = r), c !== t.t && n(i, "data-view", t.t = c), T !== t.a && n(i, "aria-busy", t.a = T), _ !== t.o && f.classList.toggle("chat-html-sheet-hidden", t.o = _), H !== t.i && (f.inert = t.i = H), E !== t.n && n(h, "aria-pressed", t.n = E), P !== t.s && n(h, "aria-label", t.s = P), A !== t.h && n(h, "title", t.h = A), F !== t.r && (s.disabled = t.r = F), U !== t.d && n(s, "aria-label", t.d = U), z !== t.l && n(s, "title", t.l = z), D !== t.u && n(d, "data-chat-media-action", t.u = D), V !== t.c && n(d, "aria-expanded", t.c = V), q !== t.w && n(d, "aria-label", t.w = q), G !== t.m && n(d, "title", t.m = G), t;
     }, {
       e: void 0,
       t: void 0,
@@ -136,11 +136,14 @@ const de = (e) => {
       r: void 0,
       d: void 0,
       l: void 0,
-      u: void 0
-    }), n;
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0
+    }), i;
   })();
 };
-j(["keydown", "click"]);
+X(["keydown", "click"]);
 export {
-  de as HtmlPreviewCanvas
+  ge as HtmlPreviewCanvas
 };

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

@@ -262,7 +262,7 @@ const Fe = (e) => {
           },
           onExpand: () => S((r) => !r),
           onRetry: () => D((r) => r + 1),
-          onPreview: () => j(),
+          onPreview: j,
           get previewLabel() {
             return M();
           },

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

@@ -1,6 +1,6 @@
 import { effect as s, className as a, template as c } from "solid-js/web";
 import "solid-js";
-import v from "../../../node_modules/.pnpm/dompurify@3.4.16/node_modules/dompurify/dist/purify.es.js";
+import v from "../../../node_modules/.pnpm/dompurify@3.4.17/node_modules/dompurify/dist/purify.es.js";
 import { cn as m } from "../../../utils/cn.js";
 var l = /* @__PURE__ */ c("<div>");
 const S = (r) => {