@floegence/floe-webapp-core 0.57.1 → 0.59.0

package/dist/chat.css

@@ -1853,9 +1853,10 @@ 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: .15rem; padding: .2rem; border-radius: .55rem; background: rgb(24 24 24 / .78); 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: .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: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: 1.8rem; height: 1.8rem; border: 0; padding: 0; border-radius: .35rem; background: transparent; color: inherit; cursor: pointer; }
+  .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 svg, .chat-media-retry svg { width: .95rem; height: .95rem; }
   .chat-media-action:focus-visible { outline: 2px solid white; outline-offset: -2px; }
@@ -1870,9 +1871,8 @@ pre.chat-md-code-block *::selection,
   .chat-media-html { display: block; width: 100%; height: 22rem; border: 0; border-radius: .75rem; background: white; color-scheme: light; }
   .chat-media-expanded { max-width: 100%; }
   .chat-media-expanded .chat-media-html { height: min(70vh, 48rem); }
-  .chat-media-dialog { width: min(92vw, 80rem); max-width: 80rem; }
-  .chat-media-dialog-body { min-height: 0; overflow: auto; }
-  .chat-media-full-image { display: block; max-width: 100%; max-height: 75vh; margin: auto; object-fit: contain; }
+  .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 (max-width: 480px) { .chat-media-html { height: 18rem; } }

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

@@ -2,6 +2,8 @@ import { type Component } from 'solid-js';
 import { type MarkdownMediaSource } from '../markdown/media';
 export interface MarkdownMediaLabels {
     image: string;
+    /** Label for opening an image in its preview window. */
+    previewImage?: string;
     video: string;
     audio: string;
     html: string;
@@ -19,6 +21,16 @@ 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. */
+    preview?: {
+        label: string;
+        onSelect: () => void;
+    };
+    /** Reveal the authorized file in its containing folder. Omit for non-file resources. */
+    reveal?: {
+        label: string;
+        onSelect: () => void;
+    };
 }
 export interface MarkdownMediaProps {
     source: MarkdownMediaSource;

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

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

package/dist/components/file-browser/DirectoryTree.js

@@ -86,9 +86,9 @@ function ue(e) {
     $(!1);
     const a = e.dragContext.dragState();
     a.isDragging && a.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
-  }, V = (t) => {
+  }, z = (t) => {
     g.consumeClickSuppression(t) || o.navigateTo(x);
-  }, j = (t) => {
+  }, V = (t) => {
     t.preventDefault(), t.stopPropagation(), !F() && o.showContextMenu(le({
       x: t.clientX,
       y: t.clientY,
@@ -96,7 +96,7 @@ function ue(e) {
       items: [e.item],
       source: "tree"
     }));
-  }, z = () => {
+  }, j = () => {
     D() && o.toggleFolder(e.item.path);
   };
   return (() => {
@@ -110,7 +110,7 @@ function ue(e) {
       },
       get children() {
         var n = se();
-        return n.$$click = z, l(n, s(ie, {
+        return n.$$click = j, l(n, s(ie, {
           class: "w-3 h-3 opacity-50"
         })), y((c) => {
           var m = u("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-150", i() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), f = i() ? "Collapse folder" : "Expand folder";
@@ -121,8 +121,8 @@ function ue(e) {
         }), n;
       }
     }), d), X(d, Y(oe, {
-      onClick: V,
-      onContextMenu: j,
+      onClick: z,
+      onContextMenu: V,
       onPointerDown: A,
       onPointerMove: N,
       onPointerUp: O,
@@ -137,6 +137,7 @@ function ue(e) {
       get open() {
         return i();
       },
+      size: 16,
       class: "w-4 h-4"
     }), null), l(b, s(ne, {
       get item() {