@floegence/floe-webapp-core 0.79.1 → 0.80.0

package/dist/chat.css

@@ -1847,6 +1847,13 @@ 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-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; }
+  .chat-media[data-media-kind="audio"] .chat-media-viewport { height: 54px; }
+  .chat-media[data-media-kind="html"] .chat-media-viewport { height: 22rem; }
+  .chat-media-expanded[data-media-kind="html"] .chat-media-viewport { height: min(70vh, 48rem); }
   .chat-media[data-media-kind="video"] { width: min(100%, 36rem); }
   .chat-media[data-media-kind="audio"] { width: min(100%, 28rem); }
   .chat-media-header { display: flex; align-items: center; min-width: 0; padding: .4rem .15rem 0; }
@@ -1861,12 +1868,12 @@ pre.chat-md-code-block *::selection,
   .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; }
-  .chat-media-placeholder { display: flex; align-items: center; justify-content: center; gap: .75rem; width: min(22rem, 100%); min-height: 7rem; padding: 1rem; border-radius: .75rem; background: var(--muted); font-size: .75rem; color: var(--muted-foreground); }
+  .chat-media-placeholder { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; height: 100%; overflow: auto; padding: .5rem; border-radius: .75rem; background: var(--muted); font-size: .75rem; color: var(--muted-foreground); }
   .chat-media-retry { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border-radius: .4rem; cursor: pointer; color: var(--foreground); }
   .chat-media-retry:hover { background: var(--background); }
-  .chat-media-image-button { display: block; max-width: 100%; padding: 0; border: 0; border-radius: .75rem; overflow: hidden; cursor: zoom-in; background: transparent; }
-  .chat-media-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 28rem; object-fit: contain; margin: 0; border: 0; border-radius: .75rem; }
-  .chat-media-video { display: block; width: 100%; max-width: 100%; max-height: 28rem; border: 0; border-radius: .75rem; background: #111; }
+  .chat-media-image-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: .75rem; overflow: hidden; cursor: zoom-in; background: transparent; }
+  .chat-media-image { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; border: 0; border-radius: .75rem; }
+  .chat-media-video { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: .75rem; background: #111; }
   .chat-media-audio { display: block; width: min(28rem, 100%); }
   .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%; }
@@ -1875,5 +1882,5 @@ pre.chat-md-code-block *::selection,
   .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; } }
+  @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.js

@@ -1,22 +1,22 @@
-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 ?? "");
+import { use as F, insert as s, createComponent as o, effect as u, setAttribute as n, memo as _, className as K, template as v, delegateEvents as P } from "solid-js/web";
+import { createSignal as x, onMount as Q, onCleanup as B, createMemo as X, createEffect as Y, Switch as D, Match as w, Show as S } from "solid-js";
+import { FloatingWindow as Z } from "../../ui/FloatingWindow.js";
+import { Refresh as p, FolderOpen as ee, Eye as re, Maximize as te, ExternalLink as ae } from "../../icons/index.js";
+import { cn as le } from "../../../utils/cn.js";
+import { sandboxedMarkdownHtml as N, safeMarkdownMediaURL as ne } from "../markdown/media.js";
+var ie = /* @__PURE__ */ v("<span class=chat-media-placeholder role=status>"), oe = /* @__PURE__ */ v("<span class=chat-media-placeholder role=status><span></span><button type=button class=chat-media-retry>"), se = /* @__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), ce = /* @__PURE__ */ v("<video class=chat-media-video controls playsinline preload=metadata>"), de = /* @__PURE__ */ v("<audio class=chat-media-audio controls preload=metadata>"), ue = /* @__PURE__ */ v("<iframe class=chat-media-html sandbox=allow-scripts referrerpolicy=no-referrer>"), H = /* @__PURE__ */ v("<button type=button class=chat-media-action>"), ve = /* @__PURE__ */ v("<div class=chat-media-preview-content><img referrerpolicy=no-referrer class=chat-media-full-image>"), he = /* @__PURE__ */ v("<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>"), me = /* @__PURE__ */ v('<a class=chat-media-action target=_blank rel="noopener noreferrer">');
+async function ge(a) {
+  const f = ne(a.src ?? "");
   if (!f || a.kind === "html") throw new Error("A host resolver is required");
   return {
     src: f,
     openURL: f
   };
 }
-const $e = (a) => {
+const xe = (a) => {
   let f, q;
-  const [N, z] = x(!1);
-  P(() => {
+  const [V, z] = x(!1);
+  Q(() => {
     if (typeof IntersectionObserver > "u") {
       z(!0);
       return;
@@ -26,22 +26,22 @@ const $e = (a) => {
     }, {
       rootMargin: "400px"
     });
-    i.observe(f), F(() => i.disconnect());
+    i.observe(f), B(() => i.disconnect());
   });
-  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) => {
+  const [h, I] = x(), [W, R] = x(), [k, y] = x("loading"), [j, G] = x(0), [$, E] = x(!1), m = () => a.source.title || a.labels[a.source.kind], J = X(() => 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);
+    g ? g.onSelect() : E(!0);
   };
-  return X(() => {
-    if (!N()) return;
-    const i = G(), g = a.resolve ?? me;
-    W();
+  return Y(() => {
+    if (!V()) return;
+    const i = J(), g = a.resolve ?? ge;
+    j();
     const d = new AbortController();
-    F(() => d.abort()), I(void 0), R(void 0), y("loading"), S(!1), (async () => {
+    B(() => d.abort()), I(void 0), R(void 0), y("loading"), E(!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));
+        d.signal.aborted || R(N(i.html));
       } else {
         const b = await g(i, d.signal);
         if (d.signal.aborted) return;
@@ -50,7 +50,7 @@ const $e = (a) => {
           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));
+          R(N(M));
         } else if (!b.src) throw new Error("Media URL is required");
         I(b);
       }
@@ -59,15 +59,15 @@ const $e = (a) => {
       d.signal.aborted || y("error");
     });
   }), (() => {
-    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, {
+    var i = he(), g = i.firstChild, d = g.nextSibling, b = d.firstChild, M = b.firstChild, U = M.nextSibling, C = b.nextSibling, A = f;
+    return typeof A == "function" ? F(A, i) : f = i, s(g, o(D, {
       get children() {
         return [o(w, {
           get when() {
             return k() === "loading";
           },
           get children() {
-            var e = ne();
+            var e = ie();
             return s(e, () => a.labels.loading), e;
           }
         }), o(w, {
@@ -75,22 +75,22 @@ const $e = (a) => {
             return k() === "error";
           },
           get children() {
-            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;
+            var e = oe(), r = e.firstChild, t = r.nextSibling;
+            return s(r, () => a.labels.unavailable), t.$$click = () => G((l) => l + 1), s(t, o(p, {}), null), s(t, () => a.labels.retry, null), e;
           }
         }), o(w, {
           get when() {
             return k() === "ready";
           },
           get children() {
-            return o(B, {
+            return o(D, {
               get children() {
                 return [o(w, {
                   get when() {
                     return a.source.kind === "image";
                   },
                   get children() {
-                    var e = oe(), r = e.firstChild;
+                    var e = se(), 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;
@@ -105,7 +105,7 @@ const $e = (a) => {
                     return a.source.kind === "video";
                   },
                   get children() {
-                    var e = se();
+                    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;
@@ -119,7 +119,7 @@ const $e = (a) => {
                     return a.source.kind === "audio";
                   },
                   get children() {
-                    var e = ce();
+                    var e = de();
                     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;
@@ -133,9 +133,9 @@ const $e = (a) => {
                     return a.source.kind === "html";
                   },
                   get children() {
-                    var e = de();
+                    var e = ue();
                     return u((r) => {
-                      var t = m(), l = V();
+                      var t = m(), l = W();
                       return t !== r.e && n(e, "title", r.e = t), l !== r.t && n(e, "srcdoc", r.t = l), r;
                     }, {
                       e: void 0,
@@ -148,13 +148,13 @@ const $e = (a) => {
           }
         })];
       }
-    }), g), s(b, () => a.labels[a.source.kind]), s(M, m), s(C, o(E, {
+    })), s(M, () => a.labels[a.source.kind]), s(U, m), s(C, o(S, {
       get when() {
         return _(() => k() === "ready")() && h()?.reveal;
       },
       children: (e) => (() => {
         var r = H();
-        return r.$$click = () => e().onSelect(), s(r, o(p, {})), u((t) => {
+        return r.$$click = () => e().onSelect(), s(r, o(ee, {})), 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;
         }, {
@@ -162,13 +162,13 @@ const $e = (a) => {
           t: void 0
         }), r;
       })()
-    }), null), s(C, o(E, {
+    }), null), s(C, o(S, {
       get when() {
         return _(() => k() === "ready")() && a.source.kind === "image";
       },
       get children() {
         var e = H();
-        return e.$$click = O, s(e, o(ee, {})), u((r) => {
+        return e.$$click = O, s(e, o(re, {})), 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;
         }, {
@@ -176,13 +176,13 @@ const $e = (a) => {
           t: void 0
         }), e;
       }
-    }), null), s(C, o(E, {
+    }), null), s(C, o(S, {
       get when() {
         return _(() => k() === "ready")() && a.source.kind === "html";
       },
       get children() {
         var e = H();
-        return e.$$click = () => S(!$()), s(e, o(re, {})), u((r) => {
+        return e.$$click = () => E(!$()), s(e, o(te, {})), 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;
         }, {
@@ -191,13 +191,13 @@ const $e = (a) => {
           a: void 0
         }), e;
       }
-    }), null), s(C, o(E, {
+    }), null), s(C, o(S, {
       get when() {
         return _(() => a.source.kind !== "image" && !h()?.reveal)() && h()?.openURL;
       },
       children: (e) => (() => {
-        var r = he();
-        return s(r, o(te, {})), u((t) => {
+        var r = me();
+        return s(r, o(ae, {})), 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;
         }, {
@@ -206,17 +206,17 @@ const $e = (a) => {
           a: void 0
         }), r;
       })()
-    }), null), s(i, o(E, {
+    }), null), s(i, o(S, {
       get when() {
         return a.source.kind === "image";
       },
       get children() {
-        return o(Y, {
+        return o(Z, {
           get open() {
             return $();
           },
           onOpenChange: (e) => {
-            S(e), e || q?.focus({
+            E(e), e || q?.focus({
               preventScroll: !0
             });
           },
@@ -241,8 +241,8 @@ const $e = (a) => {
           compactBelow: 640,
           class: "chat-media-preview-window",
           get children() {
-            var e = ue(), r = e.firstChild;
-            return A((t) => queueMicrotask(() => t.closest('[role="dialog"]')?.focus({
+            var e = ve(), r = e.firstChild;
+            return F((t) => queueMicrotask(() => t.closest('[role="dialog"]')?.focus({
               preventScroll: !0
             })), e), u((t) => {
               var l = h()?.src, c = m();
@@ -255,8 +255,8 @@ const $e = (a) => {
         });
       }
     }), 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;
+      var r = le("chat-media", $() && a.source.kind === "html" && "chat-media-expanded", a.class), t = a.source.kind, l = m();
+      return r !== e.e && K(i, e.e = r), t !== e.t && n(i, "data-media-kind", e.t = t), l !== e.a && n(U, "title", e.a = l), e;
     }, {
       e: void 0,
       t: void 0,
@@ -264,7 +264,7 @@ const $e = (a) => {
     }), i;
   })();
 };
-K(["click"]);
+P(["click"]);
 export {
-  $e as MarkdownMedia
+  xe as MarkdownMedia
 };

package/dist/components/ui/Button.js

@@ -1,9 +1,9 @@
-import { spread as d, mergeProps as c, insert as n, createComponent as t, memo as g, Dynamic as l, template as u } from "solid-js/web";
-import { splitProps as m, Show as b } from "solid-js";
-import { cn as a } from "../../utils/cn.js";
-import { Loader2 as p } from "../icons/index.js";
-var h = /* @__PURE__ */ u("<button type=button data-floe-control=button data-floe-surface-part=action>");
-const v = {
+import { spread as u, mergeProps as g, insert as n, createComponent as t, memo as m, Dynamic as b, effect as h, className as f, template as d } from "solid-js/web";
+import { splitProps as p, Show as i } from "solid-js";
+import { cn as s } from "../../utils/cn.js";
+import { Loader2 as v } from "../icons/index.js";
+var x = /* @__PURE__ */ d("<span aria-hidden=true>"), y = /* @__PURE__ */ d("<button type=button data-floe-control=button data-floe-surface-part=action>");
+const w = {
   default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
   primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
   secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:bg-secondary/70",
@@ -11,57 +11,64 @@ const v = {
   ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
   "ghost-destructive": "bg-transparent text-muted-foreground hover:bg-error hover:text-error-foreground active:bg-error/80",
   destructive: "bg-error text-error-foreground shadow-sm hover:bg-error/90 active:bg-error/80"
-}, f = {
+}, z = {
   xs: "h-6 px-2 text-[11px] rounded",
   sm: "h-7 px-2.5 text-xs rounded",
   md: "h-8 px-3 text-xs rounded-md",
   lg: "h-9 px-4 text-sm rounded-md",
   icon: "h-8 w-8 rounded-md"
-}, x = {
+}, S = {
   xs: "w-3 h-3",
   sm: "w-3.5 h-3.5",
   md: "w-3.5 h-3.5",
   lg: "w-4 h-4",
   icon: "w-4 h-4"
 };
-function k(i) {
-  const [r, s] = m(i, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), o = () => x[r.size ?? "md"];
+function P(a) {
+  const [e, c] = p(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), l = () => S[e.size ?? "md"];
   return (() => {
-    var e = h();
-    return d(e, c({
+    var r = y();
+    return u(r, g({
       get "data-floe-surface"() {
-        return r.variant === "ghost" || r.variant === "ghost-destructive" ? void 0 : "raised";
+        return e.variant === "ghost" || e.variant === "ghost-destructive" ? void 0 : "raised";
       },
       get class() {
-        return a("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", v[r.variant ?? "default"], f[r.size ?? "md"], r.class);
+        return s("inline-flex items-center justify-center gap-1.5 font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[e.variant ?? "default"], z[e.size ?? "md"], e.class);
       },
       get disabled() {
-        return r.disabled || r.loading;
+        return e.disabled || e.loading;
+      },
+      get "aria-busy"() {
+        return e.loading || void 0;
       }
-    }, s), !1, !0), n(e, t(b, {
+    }, c), !1, !0), n(r, t(i, {
       get when() {
-        return r.loading;
-      },
-      get fallback() {
-        return g(() => !!r.icon)() && t(l, {
-          get component() {
-            return r.icon;
-          },
-          get class() {
-            return o();
-          }
-        });
+        return e.icon || "loading" in a;
       },
       get children() {
-        return t(p, {
-          get class() {
-            return a(o(), "animate-spin");
+        var o = x();
+        return n(o, t(i, {
+          get when() {
+            return e.loading;
+          },
+          get fallback() {
+            return m(() => !!e.icon)() && t(b, {
+              get component() {
+                return e.icon;
+              },
+              class: "h-full w-full"
+            });
+          },
+          get children() {
+            return t(v, {
+              class: "h-full w-full animate-spin"
+            });
           }
-        });
+        })), h(() => f(o, s("inline-flex shrink-0 items-center justify-center", l()))), o;
       }
-    }), null), n(e, () => r.children, null), e;
+    }), null), n(r, () => e.children, null), r;
   })();
 }
 export {
-  k as Button
+  P as Button
 };

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

@@ -0,0 +1,9 @@
+import { type JSX } from 'solid-js';
+export interface StableTextProps {
+    children: string;
+    /** All transient labels, in the current locale. Only the current label is exposed to assistive technology. */
+    reserve: readonly string[];
+    class?: string;
+}
+/** Intrinsic sizing includes every state before the first interaction, including wrapped labels. */
+export declare function StableText(props: StableTextProps): JSX.Element;

package/dist/components/ui/StableText.js

@@ -0,0 +1,32 @@
+import { insert as a, createComponent as m, effect as o, style as d, className as v, template as c } from "solid-js/web";
+import { For as h } from "solid-js";
+var u = /* @__PURE__ */ c("<span style=display:inline-grid;min-width:0;vertical-align:bottom><span>"), f = /* @__PURE__ */ c("<span aria-hidden=true style=visibility:hidden;pointer-events:none;user-select:none>");
+function p(i) {
+  const s = {
+    "grid-area": "1 / 1",
+    "min-width": "0"
+  };
+  return (() => {
+    var r = u(), n = r.firstChild;
+    return a(r, m(h, {
+      get each() {
+        return i.reserve;
+      },
+      children: (e) => (() => {
+        var t = f();
+        return a(t, e), o((l) => d(t, {
+          ...s
+        }, l)), t;
+      })()
+    }), n), a(n, () => i.children), o((e) => {
+      var t = i.class, l = s;
+      return t !== e.e && v(r, e.e = t), e.t = d(n, l, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+export {
+  p as StableText
+};

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

@@ -0,0 +1,8 @@
+import { type JSX } from 'solid-js';
+export interface StatusRegionProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** Reserve a bounded number of text lines through idle, pending, success, and failure. */
+    lines?: number;
+    style?: JSX.CSSProperties;
+}
+/** A persistent, scrollable feedback slot. Long errors remain available without resizing adjacent content. */
+export declare function StatusRegion(props: StatusRegionProps): JSX.Element;

package/dist/components/ui/StatusRegion.js

@@ -0,0 +1,24 @@
+import { spread as o, mergeProps as i, insert as s, template as n } from "solid-js/web";
+import { splitProps as a } from "solid-js";
+var p = /* @__PURE__ */ n("<div role=status aria-live=polite>");
+function f(t) {
+  const [e, l] = a(t, ["lines", "style", "children"]);
+  return (() => {
+    var r = p();
+    return o(r, i(l, {
+      get style() {
+        return {
+          "block-size": `${e.lines ?? 2}lh`,
+          "flex-shrink": "0",
+          "min-width": "0",
+          overflow: "auto",
+          "overflow-wrap": "anywhere",
+          ...e.style
+        };
+      }
+    }), !1, !0), s(r, () => e.children), r;
+  })();
+}
+export {
+  f as StatusRegion
+};

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

@@ -1,4 +1,6 @@
 export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button';
+export { StableText, type StableTextProps } from './StableText';
+export { StatusRegion, type StatusRegionProps } from './StatusRegion';
 export { intersectSurfaceRects, type SurfaceFloatingBoundary } from './surfaceFloatingBoundary';
 export { Tag, type TagProps, type TagVariant, type TagSize } from './Tag';
 export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSize, type TextareaProps, type NumberInputProps, type AffixInputProps, type AffixOption, } from './Input';