@floegence/floe-webapp-core 0.86.33 → 0.86.36

package/dist/chat.css

@@ -1847,7 +1847,7 @@ pre.chat-md-code-block *::selection,
 @layer components {
   .chat-media { position: relative; display: flex; flex-direction: column; width: fit-content; max-width: min(100%, 42rem); min-width: 0; margin: .8rem 0 1rem; color: var(--foreground); text-align: left; }
   .chat-media[data-media-kind="html"] { width: 100%; }
-  .chat-media[data-media-kind="image"] { width: min(100%, 36rem); }
+  .chat-media[data-media-kind="image"] { width: 100%; }
   .chat-media-viewport { display: block; width: 100%; min-width: 0; overflow: hidden; }
   .chat-media[data-media-kind="image"] .chat-media-viewport,
   .chat-media[data-media-kind="video"] .chat-media-viewport { aspect-ratio: 16 / 9; }
@@ -1888,12 +1888,18 @@ pre.chat-md-code-block *::selection,
   @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); } }
 }
 
-/* HTML outputs retain one quiet, bounded canvas throughout their lifecycle. */
+/* Images and HTML retain one quiet, bounded canvas throughout their lifecycle. */
 @layer components {
-  .chat-html-canvas { --canvas-inset: clamp(1rem, 5%, 3rem); position: relative; isolation: isolate; display: block; width: 100%; height: 28rem; 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, .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-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; }
+  .chat-media[data-media-kind="image"] :is(.chat-media-image-button, .chat-media-image) { border-radius: .25rem; }
+  .chat-media[data-media-kind="image"] .chat-media-actions { top: .875rem; right: .875rem; gap: .5rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; color: var(--muted-foreground); opacity: 1; transform: none; }
   .chat-media-expanded .chat-html-canvas { height: min(78vh, 52rem); }
   .chat-html-dots, .chat-html-sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
-  .chat-html-dots { 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-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); }
@@ -1902,16 +1908,11 @@ pre.chat-md-code-block *::selection,
   .chat-html-sheet .chat-media-html { height: 100%; border-radius: 0; }
   .chat-html-source { display: block; margin: 0; padding: 1.25rem; overflow: auto; overscroll-behavior: contain; white-space: pre; font: .6875rem/1.85 var(--font-mono); color: var(--foreground); }
   .chat-html-source code { padding: 0; color: inherit; background: none; font: inherit; }
-  .chat-html-loading { position: absolute; inset: 3.5rem var(--canvas-inset) 4.25rem; 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-skeleton { display: flex; flex-direction: column; justify-content: center; gap: .875rem; width: min(72%, 19rem); height: 11rem; padding: 1.75rem; border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: .625rem; background: color-mix(in srgb, var(--background) 65%, transparent); }
-  .chat-html-skeleton > span { height: .375rem; border-radius: 1rem; background: color-mix(in srgb, var(--muted-foreground) 12%, transparent); }
-  .chat-html-skeleton > span:first-child { width: 35%; height: .5rem; margin-bottom: .75rem; }
-  .chat-html-skeleton > span:nth-child(3) { width: 82%; }
-  .chat-html-skeleton > span:last-child { width: 60%; }
-  .chat-html-orb { 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 { color: var(--foreground); background: var(--background); transform: translateY(-1px); }
+  .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[aria-pressed="true"] { color: var(--foreground); background: var(--muted); }
-  .chat-html-orb:focus-visible, .chat-html-source:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
+  .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; }
@@ -1919,7 +1920,7 @@ pre.chat-md-code-block *::selection,
   .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 { width: 2.625rem; height: 2.625rem; } .chat-html-controls { bottom: .75rem; left: .75rem; } }
-  @media (prefers-reduced-motion: reduce) { .chat-html-sheen { animation: none !important; background-position: 50% 0; } .chat-html-orb, .chat-html-sheet { transition: none; } }
-  @media (forced-colors: active) { .chat-html-orb, .chat-html-source, .chat-html-canvas { border-color: CanvasText; } .chat-html-sheen { display: none; } }
+  @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 (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.js

@@ -1,13 +1,13 @@
-import { createComponent as a, insert as l, effect as F, setAttribute as r, memo as N, template as u, use as O, delegateEvents as j } from "solid-js/web";
+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__ */ u("<pre class=chat-html-source tabindex=0><code>"), ae = /* @__PURE__ */ u("<span class=chat-html-skeleton aria-hidden=true><span></span><span></span><span></span><span>"), le = /* @__PURE__ */ u("<button type=button class=chat-media-retry>"), ne = /* @__PURE__ */ u("<span class=chat-html-loading role=status><span>"), re = /* @__PURE__ */ u("<span class=chat-html-feedback role=status>"), ie = /* @__PURE__ */ u('<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 ue = (e) => {
-  const [c, y] = U(!1), [x, S] = U("");
+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 k = (n) => {
-    clearTimeout(f), S(n), f = setTimeout(() => S(""), 2400);
+  const $ = (n) => {
+    clearTimeout(f), k(n), f = setTimeout(() => k(""), 2400);
   };
   B(() => {
     v = !0, clearTimeout(f);
@@ -15,11 +15,11 @@ const ue = (e) => {
   const V = async () => {
     try {
       if (await navigator.clipboard.writeText(e.html), v) return;
-      k(e.labels.copied ?? "Copied");
+      $(e.labels.copied ?? "Copied");
     } catch {
       if (v) return;
       const n = e.labels.copyFailed ?? "Select and copy the source.";
-      y(!0), queueMicrotask(() => {
+      x(!0), queueMicrotask(() => {
         if (v) return;
         b.focus({
           preventScroll: !0
@@ -27,7 +27,7 @@ const ue = (e) => {
         const g = document.createRange();
         g.selectNodeContents(b);
         const m = window.getSelection();
-        m?.removeAllRanges(), m?.addRange(g), k(n);
+        m?.removeAllRanges(), m?.addRange(g), $(n);
       });
     }
   }, q = I(() => [{
@@ -53,7 +53,7 @@ const ue = (e) => {
     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;
   return (() => {
-    var n = ie(), g = n.firstChild, m = g.nextSibling, w = m.nextSibling, s = w.nextSibling, $ = s.nextSibling, h = $.firstChild;
+    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) => {
       t.key === "Escape" && e.expanded && !t.defaultPrevented && (t.preventDefault(), e.onExpand());
     }, l(w, () => e.children), l(n, a(d, {
@@ -61,33 +61,26 @@ const ue = (e) => {
         return c();
       },
       get children() {
-        var t = te(), o = t.firstChild, i = b;
-        return typeof i == "function" ? O(i, t) : b = t, l(o, () => e.html), F(() => r(t, "aria-label", e.labels.showSource ?? "HTML source")), t;
+        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;
       }
-    }), s), l(n, a(d, {
+    }), o), l(n, a(d, {
       get when() {
         return N(() => !c())() && e.state !== "ready";
       },
       get children() {
-        var t = ne(), o = t.firstChild;
-        return l(t, a(d, {
-          get when() {
-            return e.state === "loading" || e.state === "generating";
-          },
-          get children() {
-            return ae();
-          }
-        }), o), l(o, G), l(t, a(d, {
+        var t = le(), s = t.firstChild;
+        return l(s, G), l(t, a(d, {
           get when() {
             return e.state === "error";
           },
           get children() {
-            var i = le();
+            var i = ae();
             return i.$$click = () => e.onRetry(), l(i, a(D, {}), null), l(i, () => e.labels.retry, null), i;
           }
-        }), null), t;
+        }), null), y(() => r(s, "data-floe-progress-shimmer", e.state === "loading" || e.state === "generating" ? "text" : void 0)), t;
       }
-    }), s), s.$$click = () => e.onExpand(), l(s, a(d, {
+    }), o), o.$$click = () => e.onExpand(), l(o, a(d, {
       get when() {
         return e.expanded;
       },
@@ -97,7 +90,7 @@ const ue = (e) => {
       get children() {
         return a(W, {});
       }
-    })), h.$$click = () => y((t) => !t), l(h, a(d, {
+    })), u.$$click = () => x((t) => !t), l(u, a(d, {
       get when() {
         return c();
       },
@@ -107,7 +100,7 @@ const ue = (e) => {
       get children() {
         return a(z, {});
       }
-    })), l($, a(ee, {
+    })), l(C, a(ee, {
       get trigger() {
         return a(Z, {});
       },
@@ -122,15 +115,15 @@ const ue = (e) => {
       }
     }), null), l(n, a(d, {
       get when() {
-        return x();
+        return S();
       },
       get children() {
-        var t = re();
-        return l(t, a(p, {}), null), l(t, x, null), t;
+        var t = ne();
+        return l(t, a(p, {}), null), l(t, S, null), t;
       }
-    }), null), F((t) => {
-      var o = e.state, i = c() ? "source" : "preview", C = e.state === "generating" || e.state === "loading", L = !!(c() || e.state !== "ready"), M = c() || e.state !== "ready", R = e.expanded ? "collapse" : "expand", T = e.expanded, _ = e.expanded ? e.labels.collapse : e.labels.expand, H = e.expanded ? e.labels.collapse : e.labels.expand, E = c(), P = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source", A = c() ? e.labels.showPreview ?? "Show preview" : e.labels.showSource ?? "Show HTML source";
-      return o !== t.e && r(n, "data-state", t.e = o), i !== t.t && r(n, "data-view", t.t = i), C !== t.a && r(n, "aria-busy", t.a = C), L !== t.o && w.classList.toggle("chat-html-sheet-hidden", t.o = L), M !== t.i && (w.inert = t.i = M), R !== t.n && r(s, "data-chat-media-action", t.n = R), T !== t.s && r(s, "aria-expanded", t.s = T), _ !== t.h && r(s, "aria-label", t.h = _), H !== t.r && r(s, "title", t.r = H), E !== t.d && r(h, "aria-pressed", t.d = E), P !== t.l && r(h, "aria-label", t.l = P), A !== t.u && r(h, "title", t.u = A), t;
+    }), 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;
     }, {
       e: void 0,
       t: void 0,
@@ -149,5 +142,5 @@ const ue = (e) => {
 };
 j(["keydown", "click"]);
 export {
-  ue as HtmlPreviewCanvas
+  de as HtmlPreviewCanvas
 };