@floegence/floe-webapp-core 0.86.25 → 0.86.28

package/dist/chat.css

@@ -1860,11 +1860,14 @@ pre.chat-md-code-block *::selection,
   .chat-media-heading { min-width: 0; }
   .chat-media-kind { display: none; }
   .chat-media-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground); }
-  .chat-media-actions { position: absolute; top: .5rem; right: .5rem; display: flex; align-items: center; gap: .125rem; padding: .25rem; border-radius: .625rem; background: rgb(24 24 24 / .72); backdrop-filter: blur(8px); color: white; opacity: 0; transform: translateY(-2px); transition: opacity 120ms ease, transform 120ms ease; }
+  .chat-media-actions { position: absolute; top: .5rem; right: .5rem; display: flex; align-items: center; gap: .2rem; padding: .25rem; border: 1px solid rgb(255 255 255 / .18); border-radius: .7rem; background: rgb(24 24 24 / .78); box-shadow: 0 .45rem 1.25rem rgb(0 0 0 / .2); backdrop-filter: blur(12px); color: white; opacity: 0; transform: translateY(-2px); transition: opacity 140ms ease, transform 140ms ease; }
   .chat-media-actions:empty { display: none; }
   .chat-media:hover .chat-media-actions, .chat-media:focus-within .chat-media-actions { opacity: 1; transform: none; }
-  .chat-media-action { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; padding: 0; border-radius: .35rem; background: transparent; color: inherit; cursor: pointer; }
-  .chat-media-action:hover { background: rgb(255 255 255 / .16); }
+  .chat-media-action { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; padding: 0; border-radius: .45rem; background: transparent; color: inherit; cursor: pointer; transition: background 120ms ease, color 120ms ease, transform 120ms ease; }
+  .chat-media-action:hover { background: rgb(255 255 255 / .16); transform: translateY(-1px); }
+  .chat-media-action[data-chat-media-action="preview"] { background: rgb(255 255 255 / .12); }
+  .chat-media-action[data-chat-media-action="preview"]:hover { background: var(--primary); color: var(--primary-foreground); }
+  .chat-media-action[data-chat-media-action="collapse"] { background: rgb(255 255 255 / .2); }
   .chat-media-action svg, .chat-media-retry svg { width: .95rem; height: .95rem; }
   .chat-media-action:focus-visible { outline: 2px solid white; outline-offset: -2px; }
   .chat-media-image-button:focus-visible, .chat-media-retry:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
@@ -1881,6 +1884,6 @@ pre.chat-md-code-block *::selection,
   .chat-media-preview-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; padding: .5rem; }
   .chat-media-full-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
   @media (hover: none) { .chat-media-actions { opacity: 1; transform: none; } }
-  @media (prefers-reduced-motion: reduce) { .chat-media-actions { transition: none; } }
+  @media (prefers-reduced-motion: reduce) { .chat-media-actions, .chat-media-action { transition: none; } }
   @media (max-width: 480px) { .chat-media[data-media-kind="html"] .chat-media-viewport, .chat-media-html { height: 18rem; } .chat-media-expanded[data-media-kind="html"] .chat-media-viewport { height: min(70vh, 48rem); } }
 }

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

@@ -7,6 +7,8 @@ export interface MarkdownMediaLabels {
     video: string;
     audio: string;
     html: string;
+    /** Label for opening an HTML file in the host's file preview surface. */
+    previewHTML?: string;
     loading: string;
     unavailable: string;
     retry: string;
@@ -21,7 +23,7 @@ export interface ResolvedMarkdownMedia {
     /** Optional host-authorized source link. */
     openURL?: string;
     loadHTML?: (signal: AbortSignal) => Promise<string>;
-    /** Open the image in the host's existing preview surface. */
+    /** Open the media in the host's existing preview surface. */
     preview?: {
         label: string;
         onSelect: () => void;

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

@@ -1,140 +1,140 @@
-import { use as B, insert as o, createComponent as i, effect as u, setAttribute as n, memo as R, className as P, template as h, delegateEvents as Q } from "solid-js/web";
-import { createSignal as M, onMount as X, onCleanup as D, createMemo as Y, createEffect as Z, on as q, Switch as N, Match as k, Show as E } from "solid-js";
-import { FloatingWindow as p } from "../../ui/FloatingWindow.js";
-import { Refresh as ee, FolderOpen as re, Eye as te, Maximize as ae, ExternalLink as le } from "../../icons/index.js";
-import { cn as ne } from "../../../utils/cn.js";
-import { sandboxedMarkdownHtml as V, safeMarkdownMediaURL as ie } from "../markdown/media.js";
-var oe = /* @__PURE__ */ h("<span class=chat-media-placeholder role=status>"), se = /* @__PURE__ */ h("<span class=chat-media-placeholder role=status><span></span><button type=button class=chat-media-retry>"), ce = /* @__PURE__ */ h("<button type=button class=chat-media-image-button><img class=chat-media-image loading=lazy decoding=async referrerpolicy=no-referrer>", !0, !1, !1), de = /* @__PURE__ */ h("<video class=chat-media-video controls playsinline preload=metadata>"), ve = /* @__PURE__ */ h("<audio class=chat-media-audio controls preload=metadata>"), ue = /* @__PURE__ */ h("<iframe class=chat-media-html sandbox=allow-scripts referrerpolicy=no-referrer>"), z = /* @__PURE__ */ h("<button type=button class=chat-media-action>"), he = /* @__PURE__ */ h("<div class=chat-media-preview-content><img referrerpolicy=no-referrer class=chat-media-full-image>"), me = /* @__PURE__ */ h("<span><span class=chat-media-viewport></span><span class=chat-media-header><span class=chat-media-heading><span class=chat-media-kind></span><span class=chat-media-title></span></span><span class=chat-media-actions>"), ge = /* @__PURE__ */ h('<a class=chat-media-action target=_blank rel="noopener noreferrer">');
-async function fe(a) {
-  const f = ie(a.src ?? "");
-  if (!f || a.kind === "html") throw new Error("A host resolver is required");
+import { use as B, insert as o, createComponent as i, effect as h, setAttribute as n, memo as _, className as Q, template as m, delegateEvents as X } from "solid-js/web";
+import { createSignal as S, onMount as Y, onCleanup as D, createMemo as Z, createEffect as q, on as p, Switch as N, Match as x, Show as M } from "solid-js";
+import { FloatingWindow as ee } from "../../ui/FloatingWindow.js";
+import { Refresh as te, FolderOpen as re, Eye as V, Minus as ae, Maximize as le, ExternalLink as ne } from "../../icons/index.js";
+import { cn as ie } from "../../../utils/cn.js";
+import { sandboxedMarkdownHtml as W, safeMarkdownMediaURL as oe } from "../markdown/media.js";
+var ce = /* @__PURE__ */ m("<span class=chat-media-placeholder role=status>"), de = /* @__PURE__ */ m("<span class=chat-media-placeholder role=status><span></span><button type=button class=chat-media-retry>"), se = /* @__PURE__ */ m("<button type=button class=chat-media-image-button><img class=chat-media-image loading=lazy decoding=async referrerpolicy=no-referrer>", !0, !1, !1), ve = /* @__PURE__ */ m("<video class=chat-media-video controls playsinline preload=metadata>"), ue = /* @__PURE__ */ m("<audio class=chat-media-audio controls preload=metadata>"), he = /* @__PURE__ */ m("<iframe class=chat-media-html sandbox=allow-scripts referrerpolicy=no-referrer>"), z = /* @__PURE__ */ m("<button type=button class=chat-media-action>"), me = /* @__PURE__ */ m("<button type=button class=chat-media-action data-chat-media-action=preview>"), ge = /* @__PURE__ */ m("<div class=chat-media-preview-content><img referrerpolicy=no-referrer class=chat-media-full-image>"), be = /* @__PURE__ */ m("<span><span class=chat-media-viewport></span><span class=chat-media-header><span class=chat-media-heading><span class=chat-media-kind></span><span class=chat-media-title></span></span><span class=chat-media-actions>"), fe = /* @__PURE__ */ m('<a class=chat-media-action target=_blank rel="noopener noreferrer">');
+async function we(a) {
+  const k = oe(a.src ?? "");
+  if (!k || a.kind === "html") throw new Error("A host resolver is required");
   return {
-    src: f,
-    openURL: f
+    src: k,
+    openURL: k
   };
 }
-const Me = (a) => {
-  let f, I;
-  const [W, O] = M(!1);
-  X(() => {
+const Se = (a) => {
+  let k, I;
+  const [j, O] = S(!1);
+  Y(() => {
     if (typeof IntersectionObserver > "u") {
       O(!0);
       return;
     }
-    const s = new IntersectionObserver((c) => {
-      c.some((L) => L.isIntersecting) && (O(!0), s.disconnect());
+    const c = new IntersectionObserver((d) => {
+      d.some((C) => C.isIntersecting) && (O(!0), c.disconnect());
     }, {
       rootMargin: "400px"
     });
-    s.observe(f), D(() => s.disconnect());
+    c.observe(k), D(() => c.disconnect());
   });
-  const [m, U] = M(), [j, T] = M(), [y, $] = M("loading"), [G, J] = M(0), [x, C] = M(!1), g = () => a.source.title || a.labels[a.source.kind], K = Y(() => a.source), H = () => m()?.preview?.label || a.labels.previewImage || a.labels.expand, A = (s) => {
-    I = s.currentTarget;
-    const c = m()?.preview;
-    c ? c.onSelect() : C(!0);
+  const [v, U] = S(), [G, H] = S(), [y, L] = S("loading"), [J, K] = S(0), [b, R] = S(!1), g = () => a.source.title || a.labels[a.source.kind], P = Z(() => a.source), E = () => v()?.preview?.label || (a.source.kind === "image" ? a.labels.previewImage : a.labels.previewHTML) || a.labels.open, A = (c) => {
+    I = c.currentTarget;
+    const d = v()?.preview;
+    d ? d.onSelect() : R(!0);
   };
-  return Z(q([W, K, () => a.resolve, G], ([s, c, L]) => {
-    if (!s) return;
-    const _ = L ?? fe, v = new AbortController();
-    D(() => v.abort()), U(void 0), T(void 0), $("loading"), C(!1), (async () => {
-      if (c.kind === "html" && c.html !== void 0) {
-        if (c.html.length > 1e6) throw new Error("HTML preview is too large");
-        v.signal.aborted || T(V(c.html));
+  return q(p([j, P, () => a.resolve, J], ([c, d, C]) => {
+    if (!c) return;
+    const T = C ?? we, u = new AbortController();
+    D(() => u.abort()), U(void 0), H(void 0), L("loading"), R(!1), (async () => {
+      if (d.kind === "html" && d.html !== void 0) {
+        if (d.html.length > 1e6) throw new Error("HTML preview is too large");
+        u.signal.aborted || H(W(d.html));
       } else {
-        const b = await _(c, v.signal);
-        if (v.signal.aborted) return;
-        if (c.kind === "html") {
-          if (!b.loadHTML) throw new Error("HTML loader is required");
-          const w = await b.loadHTML(v.signal);
-          if (v.signal.aborted) return;
-          if (w.length > 1e6) throw new Error("HTML preview is too large");
-          T(V(w));
-        } else if (!b.src) throw new Error("Media URL is required");
-        U(b);
+        const $ = await T(d, u.signal);
+        if (u.signal.aborted) return;
+        if (d.kind === "html") {
+          if (!$.loadHTML) throw new Error("HTML loader is required");
+          const f = await $.loadHTML(u.signal);
+          if (u.signal.aborted) return;
+          if (f.length > 1e6) throw new Error("HTML preview is too large");
+          H(W(f));
+        } else if (!$.src) throw new Error("Media URL is required");
+        U($);
       }
-      v.signal.aborted || $("ready");
+      u.signal.aborted || L("ready");
     })().catch(() => {
-      v.signal.aborted || $("error");
+      u.signal.aborted || L("error");
     });
   })), (() => {
-    var s = me(), c = s.firstChild, L = c.nextSibling, _ = L.firstChild, v = _.firstChild, b = v.nextSibling, w = _.nextSibling, F = f;
-    return typeof F == "function" ? B(F, s) : f = s, o(c, i(N, {
+    var c = be(), d = c.firstChild, C = d.nextSibling, T = C.firstChild, u = T.firstChild, $ = u.nextSibling, f = T.nextSibling, F = k;
+    return typeof F == "function" ? B(F, c) : k = c, o(d, i(N, {
       get children() {
-        return [i(k, {
+        return [i(x, {
           get when() {
             return y() === "loading";
           },
           get children() {
-            var e = oe();
+            var e = ce();
             return o(e, () => a.labels.loading), e;
           }
-        }), i(k, {
+        }), i(x, {
           get when() {
             return y() === "error";
           },
           get children() {
-            var e = se(), r = e.firstChild, t = r.nextSibling;
-            return o(r, () => a.labels.unavailable), t.$$click = () => J((l) => l + 1), o(t, i(ee, {}), null), o(t, () => a.labels.retry, null), e;
+            var e = de(), t = e.firstChild, r = t.nextSibling;
+            return o(t, () => a.labels.unavailable), r.$$click = () => K((l) => l + 1), o(r, i(te, {}), null), o(r, () => a.labels.retry, null), e;
           }
-        }), i(k, {
+        }), i(x, {
           get when() {
             return y() === "ready";
           },
           get children() {
             return i(N, {
               get children() {
-                return [i(k, {
+                return [i(x, {
                   get when() {
                     return a.source.kind === "image";
                   },
                   get children() {
-                    var e = ce(), r = e.firstChild;
-                    return e.$$click = A, r.addEventListener("error", () => $("error")), u((t) => {
-                      var l = `${H()}: ${g()}`, d = m()?.src, S = g();
-                      return l !== t.e && n(e, "aria-label", t.e = l), d !== t.t && n(r, "src", t.t = d), S !== t.a && n(r, "alt", t.a = S), t;
+                    var e = se(), t = e.firstChild;
+                    return e.$$click = A, t.addEventListener("error", () => L("error")), h((r) => {
+                      var l = `${E()}: ${g()}`, s = v()?.src, w = g();
+                      return l !== r.e && n(e, "aria-label", r.e = l), s !== r.t && n(t, "src", r.t = s), w !== r.a && n(t, "alt", r.a = w), r;
                     }, {
                       e: void 0,
                       t: void 0,
                       a: void 0
                     }), e;
                   }
-                }), i(k, {
+                }), i(x, {
                   get when() {
                     return a.source.kind === "video";
                   },
                   get children() {
-                    var e = de();
-                    return e.addEventListener("error", () => $("error")), u((r) => {
-                      var t = m()?.src, l = g();
-                      return t !== r.e && n(e, "src", r.e = t), l !== r.t && n(e, "aria-label", r.t = l), r;
+                    var e = ve();
+                    return e.addEventListener("error", () => L("error")), h((t) => {
+                      var r = v()?.src, l = g();
+                      return r !== t.e && n(e, "src", t.e = r), l !== t.t && n(e, "aria-label", t.t = l), t;
                     }, {
                       e: void 0,
                       t: void 0
                     }), e;
                   }
-                }), i(k, {
+                }), i(x, {
                   get when() {
                     return a.source.kind === "audio";
                   },
                   get children() {
-                    var e = ve();
-                    return e.addEventListener("error", () => $("error")), u((r) => {
-                      var t = m()?.src, l = g();
-                      return t !== r.e && n(e, "src", r.e = t), l !== r.t && n(e, "aria-label", r.t = l), r;
+                    var e = ue();
+                    return e.addEventListener("error", () => L("error")), h((t) => {
+                      var r = v()?.src, l = g();
+                      return r !== t.e && n(e, "src", t.e = r), l !== t.t && n(e, "aria-label", t.t = l), t;
                     }, {
                       e: void 0,
                       t: void 0
                     }), e;
                   }
-                }), i(k, {
+                }), i(x, {
                   get when() {
                     return a.source.kind === "html";
                   },
                   get children() {
-                    var e = ue();
-                    return u((r) => {
-                      var t = g(), l = j();
-                      return t !== r.e && n(e, "title", r.e = t), l !== r.t && n(e, "srcdoc", r.t = l), r;
+                    var e = he();
+                    return h((t) => {
+                      var r = g(), l = G();
+                      return r !== t.e && n(e, "title", t.e = r), l !== t.t && n(e, "srcdoc", t.t = l), t;
                     }, {
                       e: void 0,
                       t: void 0
@@ -146,75 +146,100 @@ const Me = (a) => {
           }
         })];
       }
-    })), o(v, () => a.labels[a.source.kind]), o(b, g), o(w, i(E, {
+    })), o(u, () => a.labels[a.source.kind]), o($, g), o(f, i(M, {
       get when() {
-        return R(() => y() === "ready")() && m()?.reveal;
+        return _(() => y() === "ready")() && v()?.reveal;
       },
       children: (e) => (() => {
-        var r = z();
-        return r.$$click = () => e().onSelect(), o(r, i(re, {})), u((t) => {
-          var l = e().label, d = e().label;
-          return l !== t.e && n(r, "aria-label", t.e = l), d !== t.t && n(r, "title", t.t = d), t;
+        var t = z();
+        return t.$$click = () => e().onSelect(), o(t, i(re, {})), h((r) => {
+          var l = e().label, s = e().label;
+          return l !== r.e && n(t, "aria-label", r.e = l), s !== r.t && n(t, "title", r.t = s), r;
         }, {
           e: void 0,
           t: void 0
-        }), r;
+        }), t;
       })()
-    }), null), o(w, i(E, {
+    }), null), o(f, i(M, {
       get when() {
-        return R(() => y() === "ready")() && a.source.kind === "image";
+        return _(() => y() === "ready")() && a.source.kind === "image";
       },
       get children() {
         var e = z();
-        return e.$$click = A, o(e, i(te, {})), u((r) => {
-          var t = H(), l = H();
-          return t !== r.e && n(e, "aria-label", r.e = t), l !== r.t && n(e, "title", r.t = l), r;
+        return e.$$click = A, o(e, i(V, {})), h((t) => {
+          var r = E(), l = E();
+          return r !== t.e && n(e, "aria-label", t.e = r), l !== t.t && n(e, "title", t.t = l), t;
+        }, {
+          e: void 0,
+          t: void 0
+        }), e;
+      }
+    }), null), o(f, i(M, {
+      get when() {
+        return _(() => !!(y() === "ready" && v()?.preview))() && a.source.kind !== "image";
+      },
+      get children() {
+        var e = me();
+        return e.$$click = () => v()?.preview?.onSelect(), o(e, i(V, {})), h((t) => {
+          var r = E(), l = E();
+          return r !== t.e && n(e, "aria-label", t.e = r), l !== t.t && n(e, "title", t.t = l), t;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
-    }), null), o(w, i(E, {
+    }), null), o(f, i(M, {
       get when() {
-        return R(() => y() === "ready")() && a.source.kind === "html";
+        return _(() => y() === "ready")() && a.source.kind === "html";
       },
       get children() {
         var e = z();
-        return e.$$click = () => C(!x()), o(e, i(ae, {})), u((r) => {
-          var t = x() ? a.labels.collapse : a.labels.expand, l = x() ? a.labels.collapse : a.labels.expand, d = x();
-          return t !== r.e && n(e, "aria-label", r.e = t), l !== r.t && n(e, "title", r.t = l), d !== r.a && n(e, "aria-expanded", r.a = d), r;
+        return e.$$click = () => R(!b()), o(e, i(M, {
+          get when() {
+            return b();
+          },
+          get fallback() {
+            return i(le, {});
+          },
+          get children() {
+            return i(ae, {});
+          }
+        })), h((t) => {
+          var r = b() ? "collapse" : "expand", l = b() ? a.labels.collapse : a.labels.expand, s = b() ? a.labels.collapse : a.labels.expand, w = b();
+          return r !== t.e && n(e, "data-chat-media-action", t.e = r), l !== t.t && n(e, "aria-label", t.t = l), s !== t.a && n(e, "title", t.a = s), w !== t.o && n(e, "aria-expanded", t.o = w), t;
         }, {
           e: void 0,
           t: void 0,
-          a: void 0
+          a: void 0,
+          o: void 0
         }), e;
       }
-    }), null), o(w, i(E, {
+    }), null), o(f, i(M, {
       get when() {
-        return R(() => a.source.kind !== "image" && !m()?.reveal)() && m()?.openURL;
+        return _(() => a.source.kind !== "image" && !v()?.reveal)() && v()?.openURL;
       },
       children: (e) => (() => {
-        var r = ge();
-        return o(r, i(le, {})), u((t) => {
-          var l = e(), d = a.labels.open, S = a.labels.open;
-          return l !== t.e && n(r, "href", t.e = l), d !== t.t && n(r, "aria-label", t.t = d), S !== t.a && n(r, "title", t.a = S), t;
+        var t = fe();
+        return o(t, i(ne, {})), h((r) => {
+          var l = e(), s = a.labels.open, w = a.labels.open;
+          return l !== r.e && n(t, "href", r.e = l), s !== r.t && n(t, "aria-label", r.t = s), w !== r.a && n(t, "title", r.a = w), r;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), r;
+        }), t;
       })()
-    }), null), o(s, i(E, {
+    }), null), o(c, i(M, {
       get when() {
         return a.source.kind === "image";
       },
       get children() {
-        return i(p, {
+        return i(ee, {
           get open() {
-            return x();
+            return b();
           },
           onOpenChange: (e) => {
-            C(e), e || I?.focus({
+            R(e), e || I?.focus({
               preventScroll: !0
             });
           },
@@ -239,12 +264,12 @@ const Me = (a) => {
           compactBelow: 640,
           class: "chat-media-preview-window",
           get children() {
-            var e = he(), r = e.firstChild;
-            return B((t) => queueMicrotask(() => t.closest('[role="dialog"]')?.focus({
+            var e = ge(), t = e.firstChild;
+            return B((r) => queueMicrotask(() => r.closest('[role="dialog"]')?.focus({
               preventScroll: !0
-            })), e), u((t) => {
-              var l = m()?.src, d = g();
-              return l !== t.e && n(r, "src", t.e = l), d !== t.t && n(r, "alt", t.t = d), t;
+            })), e), h((r) => {
+              var l = v()?.src, s = g();
+              return l !== r.e && n(t, "src", r.e = l), s !== r.t && n(t, "alt", r.t = s), r;
             }, {
               e: void 0,
               t: void 0
@@ -252,17 +277,17 @@ const Me = (a) => {
           }
         });
       }
-    }), null), u((e) => {
-      var r = ne("chat-media", x() && a.source.kind === "html" && "chat-media-expanded", a.class), t = a.source.kind, l = g();
-      return r !== e.e && P(s, e.e = r), t !== e.t && n(s, "data-media-kind", e.t = t), l !== e.a && n(b, "title", e.a = l), e;
+    }), null), h((e) => {
+      var t = ie("chat-media", b() && a.source.kind === "html" && "chat-media-expanded", a.class), r = a.source.kind, l = g();
+      return t !== e.e && Q(c, e.e = t), r !== e.t && n(c, "data-media-kind", e.t = r), l !== e.a && n($, "title", e.a = l), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), s;
+    }), c;
   })();
 };
-Q(["click"]);
+X(["click"]);
 export {
-  Me as MarkdownMedia
+  Se as MarkdownMedia
 };

package/dist/components/ui/Tabs.d.ts

@@ -2,6 +2,10 @@ import { type JSX } from 'solid-js';
 export interface TabItem {
     id: string;
     label: string;
+    /** DOM identity for references such as TabPanel.labelledBy. */
+    domId?: string;
+    /** DOM identity of the host-owned panel controlled by this tab. */
+    panelId?: string;
     icon?: JSX.Element;
     closable?: boolean;
     disabled?: boolean;