@floegence/floe-webapp-core 0.86.32 → 0.86.33

package/dist/chat.css

@@ -1887,3 +1887,39 @@ pre.chat-md-code-block *::selection,
   @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); } }
 }
+
+/* HTML outputs 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-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-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 { 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; }
+  .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-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 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-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; } }
+}

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

@@ -0,0 +1,16 @@
+import { type Component, type JSX } from 'solid-js';
+import type { MarkdownMediaLabels, ResolvedMarkdownMedia } from './MarkdownMedia';
+export interface HtmlPreviewCanvasProps {
+    state: 'loading' | 'generating' | 'incomplete' | 'ready' | 'error';
+    html: string;
+    labels: MarkdownMediaLabels;
+    expanded: boolean;
+    onExpand: () => void;
+    onRetry: () => void;
+    onPreview: () => void;
+    previewLabel: string;
+    resource?: ResolvedMarkdownMedia;
+    children: JSX.Element;
+}
+/** One bounded surface owns generation, source inspection, and the isolated preview. */
+export declare const HtmlPreviewCanvas: Component<HtmlPreviewCanvasProps>;

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

@@ -0,0 +1,153 @@
+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 { 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("");
+  let b, v = !1, f;
+  const k = (n) => {
+    clearTimeout(f), S(n), f = setTimeout(() => S(""), 2400);
+  };
+  B(() => {
+    v = !0, clearTimeout(f);
+  });
+  const V = async () => {
+    try {
+      if (await navigator.clipboard.writeText(e.html), v) return;
+      k(e.labels.copied ?? "Copied");
+    } catch {
+      if (v) return;
+      const n = e.labels.copyFailed ?? "Select and copy the source.";
+      y(!0), queueMicrotask(() => {
+        if (v) return;
+        b.focus({
+          preventScroll: !0
+        });
+        const g = document.createRange();
+        g.selectNodeContents(b);
+        const m = window.getSelection();
+        m?.removeAllRanges(), m?.addRange(g), k(n);
+      });
+    }
+  }, q = I(() => [{
+    id: "copy",
+    label: e.labels.copyHTML ?? "Copy HTML",
+    icon: () => a(J, {}),
+    disabled: !e.html
+  }, ...e.state === "ready" ? [{
+    id: "preview",
+    label: e.previewLabel,
+    icon: () => a(z, {})
+  }, {
+    id: "replay",
+    label: e.labels.replay ?? "Reload preview",
+    icon: () => a(D, {})
+  }] : [], ...e.resource?.openURL && !e.resource.reveal ? [{
+    id: "open",
+    label: e.labels.open,
+    icon: () => a(K, {})
+  }] : [], ...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;
+  return (() => {
+    var n = ie(), g = n.firstChild, m = g.nextSibling, w = m.nextSibling, s = w.nextSibling, $ = s.nextSibling, h = $.firstChild;
+    return n.$$keydown = (t) => {
+      t.key === "Escape" && e.expanded && !t.defaultPrevented && (t.preventDefault(), e.onExpand());
+    }, l(w, () => e.children), l(n, a(d, {
+      get when() {
+        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;
+      }
+    }), s), 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, {
+          get when() {
+            return e.state === "error";
+          },
+          get children() {
+            var i = le();
+            return i.$$click = () => e.onRetry(), l(i, a(D, {}), null), l(i, () => e.labels.retry, null), i;
+          }
+        }), null), t;
+      }
+    }), s), s.$$click = () => e.onExpand(), l(s, a(d, {
+      get when() {
+        return e.expanded;
+      },
+      get fallback() {
+        return a(X, {});
+      },
+      get children() {
+        return a(W, {});
+      }
+    })), h.$$click = () => y((t) => !t), l(h, a(d, {
+      get when() {
+        return c();
+      },
+      get fallback() {
+        return a(Y, {});
+      },
+      get children() {
+        return a(z, {});
+      }
+    })), l($, a(ee, {
+      get trigger() {
+        return a(Z, {});
+      },
+      triggerClass: "chat-html-orb",
+      get triggerAriaLabel() {
+        return e.labels.more ?? "More actions";
+      },
+      items: q,
+      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");
+      }
+    }), null), l(n, a(d, {
+      get when() {
+        return x();
+      },
+      get children() {
+        var t = re();
+        return l(t, a(p, {}), null), l(t, x, 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;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0
+    }), n;
+  })();
+};
+j(["keydown", "click"]);
+export {
+  ue as HtmlPreviewCanvas
+};

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

@@ -1,6 +1,15 @@
 import { type Component } from 'solid-js';
 import { type MarkdownMediaSource } from '../markdown/media';
 export interface MarkdownMediaLabels {
+    generating?: string;
+    incomplete?: string;
+    showSource?: string;
+    showPreview?: string;
+    more?: string;
+    copyHTML?: string;
+    copied?: string;
+    copyFailed?: string;
+    replay?: string;
     image: string;
     /** Label for opening an image in its preview window. */
     previewImage?: string;
@@ -40,6 +49,8 @@ export interface ResolvedMarkdownMedia {
 }
 export interface MarkdownMediaProps {
     source: MarkdownMediaSource;
+    /** Partial HTML remains inspectable but never executes before a closed fence. */
+    htmlState?: 'generating' | 'incomplete';
     labels: MarkdownMediaLabels;
     /** Replace this callback when its authorization or resource context changes. Reads inside it do not trigger reloads. */
     resolve?: (source: MarkdownMediaSource, signal: AbortSignal) => Promise<ResolvedMarkdownMedia>;