@floegence/floe-webapp-core 0.86.62 → 0.86.64

package/dist/components/ui/Tabs.js

@@ -1,42 +1,42 @@
-import { createComponent as v, spread as ue, mergeProps as fe, insert as f, effect as y, className as x, setStyleProperty as ae, memo as le, use as ie, setAttribute as p, template as w, delegateEvents as Re } from "solid-js/web";
-import { splitProps as ve, Show as B, createSignal as L, untrack as ce, createEffect as U, onCleanup as de } from "solid-js";
+import { createComponent as v, spread as ue, mergeProps as fe, insert as f, effect as x, className as B, setStyleProperty as le, memo as ae, use as ie, setAttribute as m, template as C, delegateEvents as ze } from "solid-js/web";
+import { splitProps as ve, Show as I, createSignal as L, untrack as de, createEffect as K, onCleanup as ce } from "solid-js";
 import { cn as h } from "../../utils/cn.js";
-import { deferAfterPaint as _ } from "../../utils/defer.js";
-import { KeyedFor as Te } from "./KeyedFor.js";
-import { createUIFirstSelection as ze } from "../../utils/uiFirstSelection.js";
+import { deferAfterPaint as O } from "../../utils/defer.js";
+import { KeyedFor as Re } from "./KeyedFor.js";
+import { createUIFirstSelection as Te } from "../../utils/uiFirstSelection.js";
 import { useViewActivation as Ee } from "../../context/ViewActivationContext.js";
 import { X as He, Plus as Pe, ChevronRight as De } from "../icons/index.js";
-var Me = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), _e = /* @__PURE__ */ w('<button type=button data-floe-interactive=icon aria-label="Scroll left">'), Oe = /* @__PURE__ */ w("<div>"), We = /* @__PURE__ */ w('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), Fe = /* @__PURE__ */ w('<button type=button data-floe-interactive=icon aria-label="Scroll right">'), je = /* @__PURE__ */ w("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), qe = /* @__PURE__ */ w("<span class=flex-shrink-0>"), Ge = /* @__PURE__ */ w("<button type=button data-floe-interactive=icon>"), Ue = /* @__PURE__ */ w('<div role=tab data-floe-surface-part=tab data-floe-interactive=item><span class="truncate max-w-32">'), Xe = /* @__PURE__ */ w("<div role=tabpanel>");
-const X = {
+var Me = /* @__PURE__ */ C('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), Oe = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Scroll left">'), We = /* @__PURE__ */ C("<div>"), Fe = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), _e = /* @__PURE__ */ C('<button type=button data-floe-interactive=icon aria-label="Scroll right">'), je = /* @__PURE__ */ C("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), qe = /* @__PURE__ */ C("<span class=flex-shrink-0>"), Ge = /* @__PURE__ */ C("<button type=button data-floe-interactive=icon>"), Ue = /* @__PURE__ */ C('<div role=tab data-floe-surface-part=tab data-floe-interactive=item><span class="truncate max-w-32">'), Xe = /* @__PURE__ */ C("<div role=tabpanel>");
+const V = {
   x: 0,
   width: 0,
   visible: !1
 };
-function Ke(i, e, b) {
-  const c = i.filter((k) => !k.disabled);
-  if (!c.length) return null;
-  const C = c.findIndex((k) => k.id === e);
-  if (C < 0) return null;
+function Ke(i, t, b) {
+  const d = i.filter((k) => !k.disabled);
+  if (!d.length) return null;
+  const p = d.findIndex((k) => k.id === t);
+  if (p < 0) return null;
   let g = null;
   switch (b) {
     case "ArrowRight":
     case "ArrowDown":
-      g = (C + 1) % c.length;
+      g = (p + 1) % d.length;
       break;
     case "ArrowLeft":
     case "ArrowUp":
-      g = (C - 1 + c.length) % c.length;
+      g = (p - 1 + d.length) % d.length;
       break;
     case "Home":
       g = 0;
       break;
     case "End":
-      g = c.length - 1;
+      g = d.length - 1;
       break;
     default:
       return null;
   }
-  return c[g]?.id ?? null;
+  return d[g]?.id ?? null;
 }
 function Ve(i) {
   return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
@@ -85,81 +85,81 @@ function Je(i) {
   }
 }
 const Qe = (i) => (() => {
-  var e = Me();
-  return y(() => p(e, "class", i.class)), e;
+  var t = Me();
+  return x(() => m(t, "class", i.class)), t;
 })();
 function Ze(i) {
   const {
-    container: e,
+    container: t,
     tab: b
-  } = i, c = b.offsetParent, C = b.offsetWidth;
-  if (c === e && Number.isFinite(b.offsetLeft) && Number.isFinite(C))
+  } = i, d = b.offsetParent, p = b.offsetWidth;
+  if (d === t && Number.isFinite(b.offsetLeft) && Number.isFinite(p))
     return {
       x: b.offsetLeft,
-      width: C,
-      visible: C > 0
+      width: p,
+      visible: p > 0
     };
-  const g = e.getBoundingClientRect(), k = b.getBoundingClientRect(), R = e.offsetWidth || e.clientWidth, I = g.width > 0 && R > 0 ? g.width / R : 1, T = Number.isFinite(I) && I > 0 ? I : 1, z = k.width / T;
+  const g = t.getBoundingClientRect(), k = b.getBoundingClientRect(), z = t.offsetWidth || t.clientWidth, S = g.width > 0 && z > 0 ? g.width / z : 1, R = Number.isFinite(S) && S > 0 ? S : 1, T = k.width / R;
   return {
-    x: (k.left - g.left + e.scrollLeft) / T,
-    width: z,
-    visible: z > 0
+    x: (k.left - g.left + t.scrollLeft) / R,
+    width: T,
+    visible: T > 0
   };
 }
-function ct(i) {
-  const [e, b] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), c = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Ve(e.features?.indicator?.thicknessPx), g = () => e.features?.indicator?.colorToken ?? "primary", k = () => e.features?.indicator?.animated ?? !0, R = () => e.features?.containerBorder ?? !0, I = () => e.features?.scrollButtons ?? "auto", T = () => e.features?.closeButton?.dangerHover ?? !0, z = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, he = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, K = () => Ye(C()), O = () => Je(g());
+function dt(i) {
+  const [t, b] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => t.features?.indicator?.mode ?? "activeBorder", p = () => Ve(t.features?.indicator?.thicknessPx), g = () => t.features?.indicator?.colorToken ?? "primary", k = () => t.features?.indicator?.animated ?? !0, z = () => t.features?.containerBorder ?? !0, S = () => t.features?.scrollButtons ?? "auto", R = () => t.features?.closeButton?.dangerHover ?? !0, T = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, he = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, Y = () => Ye(p()), W = () => Je(g());
   let u;
-  const V = (() => {
+  const J = (() => {
     try {
       return Ee();
     } catch {
       return null;
     }
-  })(), S = () => V ? V.active() : !0;
-  let W = !1;
-  const [E, F] = L(X), H = /* @__PURE__ */ new Map();
+  })(), A = () => J ? J.active() : !0;
+  let F = !1;
+  const [E, _] = L(V), H = /* @__PURE__ */ new Map();
   let j = !1;
-  const P = () => c() === "slider", Y = (s) => {
+  const P = () => d() === "slider", Q = (s) => {
     if (!u || !P()) return !1;
-    const o = H.get(s);
-    if (!o) return !1;
+    const r = H.get(s);
+    if (!r) return !1;
     const a = Ze({
       container: u,
-      tab: o
+      tab: r
     });
-    return F(a), a.visible;
+    return _(a), a.visible;
   }, be = () => {
     if (!P()) {
-      F(X);
+      _(V);
       return;
     }
-    Y(q()) || F(X);
+    Q(q()) || _(V);
   }, D = () => {
-    j || (j = !0, _(() => {
-      j = !1, ce(() => {
-        S() && be();
+    j || (j = !0, O(() => {
+      j = !1, de(() => {
+        A() && be();
       });
     }));
-  }, J = () => e.activeId !== void 0, ge = () => e.onChange ?? e.onActiveIdChange, [me, we] = L(ce(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = ze({
-    committed: () => J() ? e.activeId : me(),
+  }, Z = () => t.activeId !== void 0, ge = () => t.onChange ?? t.onActiveIdChange, [me, we] = L(de(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), ee = Te({
+    committed: () => Z() ? t.activeId : me(),
     commit: (s) => {
-      J() || we(s), ge()?.(s);
+      Z() || we(s), ge()?.(s);
     }
-  }), q = Q.visual;
-  U(() => {
-    S() && (c(), q(), D());
+  }), q = ee.visual;
+  K(() => {
+    A() && (d(), q(), D());
   });
-  const [Z, Ce] = L(!1), [ee, pe] = L(!1), [ke, ye] = L(!1), te = () => I() === "auto" && ke(), xe = () => {
+  const [G, Ce] = L(!1), [U, pe] = L(!1), [ke, ye] = L(!1), te = () => S() === "auto" && ke(), xe = () => {
     if (!u) return;
     const {
       scrollLeft: s,
-      scrollWidth: o,
+      scrollWidth: r,
       clientWidth: a
-    } = u, t = o > a;
-    ye(t), Ce(s > 0), pe(s + a < o - 1);
+    } = u, e = r > a;
+    ye(e), Ce(s > 0), pe(s + a < r - 1);
   }, M = () => {
-    W || (W = !0, _(() => {
-      W = !1, S() && xe();
+    F || (F = !0, O(() => {
+      F = !1, A() && xe();
     }));
   }, Be = () => {
     u && u.scrollBy({
@@ -172,148 +172,159 @@ function ct(i) {
       behavior: "smooth"
     });
   };
-  U(() => {
-    if (!u || !S()) return;
+  K(() => {
+    if (!u || !A()) return;
     M(), D();
     const s = () => M();
     u.addEventListener("scroll", s);
-    const o = () => {
+    const r = () => {
       M(), D();
     };
     let a;
-    typeof ResizeObserver < "u" ? (a = new ResizeObserver(o), a.observe(u)) : typeof window < "u" && window.addEventListener("resize", o), de(() => {
-      u?.removeEventListener("scroll", s), a?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
+    typeof ResizeObserver < "u" ? (a = new ResizeObserver(r), a.observe(u)) : typeof window < "u" && window.addEventListener("resize", r), ce(() => {
+      u?.removeEventListener("scroll", s), a?.disconnect(), typeof window < "u" && window.removeEventListener("resize", r);
     });
-  }), U(() => {
-    S() && (e.items.length, M(), D());
+  }), K(() => {
+    A() && (t.items.length, M(), D());
   });
-  const G = (s, o) => {
-    o || (Q.request(s), P() && Y(s));
+  const X = (s, r) => {
+    r || (ee.request(s), P() && Q(s));
   }, Se = (s) => {
-    const o = e.items.find((t) => t.id === s);
-    if (!o) return;
-    G(o.id, o.disabled);
-    const a = H.get(o.id);
+    const r = t.items.find((e) => e.id === s);
+    if (!r) return;
+    X(r.id, r.disabled);
+    const a = H.get(r.id);
     a?.focus({
       preventScroll: !0
     }), a?.scrollIntoView({
       block: "nearest",
       inline: "nearest"
     });
-  }, Ae = (s, o) => {
-    const a = Ke(e.items, o.id, s.key);
+  }, Ae = (s, r) => {
+    const a = Ke(t.items, r.id, s.key);
     a && (s.preventDefault(), Se(a));
-  }, $e = (s, o) => {
+  }, Ne = (s, r) => {
     s.stopPropagation();
-    const a = e.onClose;
+    const a = t.onClose;
     if (!a) return;
-    const t = o;
-    _(() => a(t));
-  }, Ne = {
+    const e = r;
+    O(() => a(e));
+  }, $e = {
     sm: "h-[var(--floe-control-height-sm)] px-[var(--floe-control-padding-sm)]",
     md: "h-[var(--floe-control-height-md)] px-[var(--floe-control-padding-md)]"
-  }, Le = (s, o) => {
-    const a = h("inline-flex items-center gap-1.5 whitespace-nowrap", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), t = o ? "cursor-not-allowed opacity-50" : "cursor-pointer", r = (() => {
-      const d = c();
-      return d === "none" || d === "slider" && E().visible ? "border-transparent" : O().tabBorderClass;
+  }, Le = (s, r) => {
+    const a = h("inline-flex items-center gap-1.5 whitespace-nowrap", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), e = r ? "cursor-not-allowed opacity-50" : "cursor-pointer", o = (() => {
+      const c = d();
+      return c === "none" || c === "slider" && E().visible ? "border-transparent" : W().tabBorderClass;
     })();
     return h(
       a,
-      t,
-      Ne[e.size ?? "md"],
+      e,
+      $e[t.size ?? "md"],
       "rounded-control",
-      K().tabBorderClass,
+      Y().tabBorderClass,
       /* The selected face is painted by the surface layer (`data-floe-surface`
        * plus `aria-selected`), which keeps the fill, hairline and first
        * elevation step identical to every other selected control. */
-      s ? h(r, "text-foreground", e.slotClassNames?.tabActive) : h("border-transparent text-[var(--floe-ink-soft)]", e.slotClassNames?.tabInactive),
-      o && "opacity-50",
-      e.slotClassNames?.tab
+      s ? h(o, "text-foreground", t.slotClassNames?.tabActive) : h("border-transparent text-[var(--floe-ink-soft)]", t.slotClassNames?.tabInactive),
+      r && "opacity-50",
+      t.slotClassNames?.tab
     );
   };
   return (() => {
-    var s = je(), o = s.firstChild;
+    var s = je(), r = s.firstChild;
     ue(s, fe({
       get class() {
-        return h("relative flex items-center gap-0.5", R() && "border-b border-[var(--floe-line)]", e.slotClassNames?.root, e.class);
+        return h(
+          /* One strip, one baseline: the rail, the scroll buttons and the add
+           * button all take their height from the row, so nothing floats above
+           * the rule. The rail's fill is carried onto those trailing controls,
+           * otherwise the band stops short and leaves a notch beside the last
+           * control. */
+          "relative flex items-stretch",
+          t.size === "sm" ? "min-h-[var(--floe-control-height-sm)]" : "min-h-[var(--floe-control-height-md)]",
+          z() && "border-b border-[var(--floe-line)]",
+          t.slotClassNames?.root,
+          t.class
+        );
       }
-    }, b), !1, !0), f(s, v(B, {
+    }, b), !1, !0), f(s, v(I, {
       get when() {
         return te();
       },
       get children() {
-        var t = _e();
-        return t.$$click = Be, f(t, v(Qe, {
+        var e = Oe();
+        return e.$$click = Be, f(e, v(Qe, {
           class: "w-4 h-4"
-        })), y((r) => {
-          var d = !Z(), l = h("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded-control cursor-pointer", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", Z() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
-          return d !== r.e && (t.disabled = r.e = d), l !== r.t && x(t, r.t = l), r;
+        })), x((o) => {
+          var c = !G(), l = h("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", G() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
+          return c !== o.e && (e.disabled = o.e = c), l !== o.t && B(e, o.t = l), o;
         }, {
           e: void 0,
           t: void 0
-        }), t;
+        }), e;
       }
-    }), o);
+    }), r);
     var a = u;
-    return typeof a == "function" ? ie(a, o) : u = o, f(o, v(B, {
+    return typeof a == "function" ? ie(a, r) : u = r, f(r, v(I, {
       get when() {
-        return le(() => !!P())() && E().visible;
+        return ae(() => !!P())() && E().visible;
       },
       get children() {
-        var t = Oe();
-        return y((r) => {
-          var d = h("pointer-events-none absolute bottom-0 left-0 z-10", K().sliderHeightClass, O().sliderBgClass, k() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), l = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
-          return d !== r.e && x(t, r.e = d), l !== r.t && ae(t, "transform", r.t = l), A !== r.a && ae(t, "width", r.a = A), r;
+        var e = We();
+        return x((o) => {
+          var c = h("pointer-events-none absolute bottom-0 left-0 z-10", Y().sliderHeightClass, W().sliderBgClass, k() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), l = `translate3d(${E().x}px, 0, 0)`, y = `${E().width}px`;
+          return c !== o.e && B(e, o.e = c), l !== o.t && le(e, "transform", o.t = l), y !== o.a && le(e, "width", o.a = y), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), t;
+        }), e;
       }
-    }), null), f(o, v(Te, {
+    }), null), f(r, v(Re, {
       get each() {
-        return e.items;
+        return t.items;
       },
-      by: (t) => t.id,
-      children: (t) => {
-        const r = () => t().id === q(), d = () => t().closable ?? z();
+      by: (e) => e.id,
+      children: (e) => {
+        const o = () => e().id === q(), c = () => e().closable ?? T();
         return (() => {
-          var l = Ue(), A = l.firstChild;
+          var l = Ue(), y = l.firstChild;
           return l.$$keydown = (n) => {
             if (n.key === "Enter" || n.key === " ") {
-              n.preventDefault(), G(t().id, t().disabled);
+              n.preventDefault(), X(e().id, e().disabled);
               return;
             }
-            Ae(n, t());
-          }, l.$$click = () => G(t().id, t().disabled), ie((n) => {
-            H.set(t().id, n), de(() => H.delete(t().id));
-          }, l), f(l, v(B, {
+            Ae(n, e());
+          }, l.$$click = () => X(e().id, e().disabled), ie((n) => {
+            H.set(e().id, n), ce(() => H.delete(e().id));
+          }, l), f(l, v(I, {
             get when() {
-              return t().icon;
+              return e().icon;
             },
             get children() {
               var n = qe();
-              return f(n, () => t().icon), n;
+              return f(n, () => e().icon), n;
             }
-          }), A), f(A, () => t().label), f(l, v(B, {
+          }), y), f(y, () => e().label), f(l, v(I, {
             get when() {
-              return le(() => !!d())() && !t().disabled;
+              return ae(() => !!c())() && !e().disabled;
             },
             get children() {
               var n = Ge();
-              return n.$$click = (m) => $e(m, t().id), f(n, v(He, {
+              return n.$$click = (w) => Ne(w, e().id), f(n, v(He, {
                 class: "w-3 h-3"
-              })), y((m) => {
-                var $ = h("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", T() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t().label}`;
-                return $ !== m.e && x(n, m.e = $), N !== m.t && p(n, "aria-label", m.t = N), m;
+              })), x((w) => {
+                var N = h("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", R() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", t.slotClassNames?.closeButton), $ = `Close ${e().label}`;
+                return N !== w.e && B(n, w.e = N), $ !== w.t && m(n, "aria-label", w.t = $), w;
               }, {
                 e: void 0,
                 t: void 0
               }), n;
             }
-          }), null), y((n) => {
-            var m = Le(r(), t().disabled), $ = t().domId, N = t().panelId, re = r() ? "raised" : "flat", oe = r(), ne = t().disabled, se = t().disabled ? -1 : r() ? 0 : -1;
-            return m !== n.e && x(l, n.e = m), $ !== n.t && p(l, "id", n.t = $), N !== n.a && p(l, "aria-controls", n.a = N), re !== n.o && p(l, "data-floe-surface", n.o = re), oe !== n.i && p(l, "aria-selected", n.i = oe), ne !== n.n && p(l, "aria-disabled", n.n = ne), se !== n.s && p(l, "tabindex", n.s = se), n;
+          }), null), x((n) => {
+            var w = Le(o(), e().disabled), N = e().domId, $ = e().panelId, re = o() ? "raised" : "flat", oe = o(), ne = e().disabled, se = e().disabled ? -1 : o() ? 0 : -1;
+            return w !== n.e && B(l, n.e = w), N !== n.t && m(l, "id", n.t = N), $ !== n.a && m(l, "aria-controls", n.a = $), re !== n.o && m(l, "data-floe-surface", n.o = re), oe !== n.i && m(l, "aria-selected", n.i = oe), ne !== n.n && m(l, "aria-disabled", n.n = ne), se !== n.s && m(l, "tabindex", n.s = se), n;
           }, {
             e: void 0,
             t: void 0,
@@ -325,80 +336,82 @@ function ct(i) {
           }), l;
         })();
       }
-    }), null), f(s, v(B, {
+    }), null), f(s, v(I, {
       get when() {
         return he();
       },
       get children() {
-        var t = We();
-        return t.$$click = () => {
-          const r = e.onAdd;
-          r && _(() => r());
-        }, f(t, v(Pe, {
+        var e = Fe();
+        return e.$$click = () => {
+          const o = t.onAdd;
+          o && O(() => o());
+        }, f(e, v(Pe, {
           get class() {
-            return e.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
+            return t.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), y(() => x(t, h("flex-shrink-0 flex items-center justify-center", "rounded-control cursor-pointer", "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)]", e.size === "sm" ? "w-6 h-6" : "w-7 h-7", e.slotClassNames?.addButton))), t;
+        })), x(() => B(e, h("flex-shrink-0 flex items-center justify-center", "rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] hover:text-foreground", t.size === "sm" ? "w-7" : "w-8", t.slotClassNames?.addButton))), e;
       }
-    }), null), f(s, v(B, {
+    }), null), f(s, v(I, {
       get when() {
         return te();
       },
       get children() {
-        var t = Fe();
-        return t.$$click = Ie, f(t, v(De, {
+        var e = _e();
+        return e.$$click = Ie, f(e, v(De, {
           class: "w-4 h-4"
-        })), y((r) => {
-          var d = !ee(), l = h("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded-control cursor-pointer", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", ee() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
-          return d !== r.e && (t.disabled = r.e = d), l !== r.t && x(t, r.t = l), r;
+        })), x((o) => {
+          var c = !U(), l = h("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", U() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
+          return c !== o.e && (e.disabled = o.e = c), l !== o.t && B(e, o.t = l), o;
         }, {
           e: void 0,
           t: void 0
-        }), t;
+        }), e;
       }
-    }), null), y((t) => {
-      var r = h(
+    }), null), x((e) => {
+      var o = h(
         "relative flex-1 flex items-end gap-0.5 overflow-x-auto",
         "scrollbar-none",
         // Hide scrollbar for all browsers
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-        e.slotClassNames?.scrollContainer
-      ), d = e.ariaLabel;
-      return r !== t.e && x(o, t.e = r), d !== t.t && p(o, "aria-label", t.t = d), t;
+        t.slotClassNames?.scrollContainer
+      ), c = G() ? "" : void 0, l = U() ? "" : void 0, y = t.ariaLabel;
+      return o !== e.e && B(r, e.e = o), c !== e.t && m(r, "data-floe-overflow-start", e.t = c), l !== e.a && m(r, "data-floe-overflow-end", e.a = l), y !== e.o && m(r, "aria-label", e.o = y), e;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0,
+      o: void 0
     }), s;
   })();
 }
-function dt(i) {
-  const [e, b] = ve(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
-  return v(B, {
+function ct(i) {
+  const [t, b] = ve(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
+  return v(I, {
     get when() {
-      return e.keepMounted || e.active;
+      return t.keepMounted || t.active;
     },
     get children() {
-      var c = Xe();
-      return ue(c, fe({
+      var d = Xe();
+      return ue(d, fe({
         get "aria-labelledby"() {
-          return e.labelledBy;
+          return t.labelledBy;
         },
         get "aria-hidden"() {
-          return !e.active && e.keepMounted ? "true" : void 0;
+          return !t.active && t.keepMounted ? "true" : void 0;
         },
         get tabIndex() {
-          return e.active ? 0 : -1;
+          return t.active ? 0 : -1;
         },
         get class() {
-          return h(!e.active && e.keepMounted && "hidden", e.class);
+          return h(!t.active && t.keepMounted && "hidden", t.class);
         }
-      }, b), !1, !0), f(c, () => e.children), c;
+      }, b), !1, !0), f(d, () => t.children), d;
     }
   });
 }
-Re(["click", "keydown"]);
+ze(["click", "keydown"]);
 export {
-  dt as TabPanel,
-  ct as Tabs,
+  ct as TabPanel,
+  dt as Tabs,
   Ke as resolveTabNavigationTargetId
 };

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

@@ -0,0 +1,9 @@
+/**
+ * Animate the panel from its previous height to whatever its content now needs.
+ * Returns a disposer. A panel that is entering, exiting, suspended, or hidden
+ * is left alone: its own opening motion already owns the box, and animating a
+ * height nobody can see only queues late frames.
+ */
+export declare function observeDialogHeight(element: HTMLElement, options?: {
+    isSettled?: () => boolean;
+}): () => void;

package/dist/components/ui/dialogHeightMotion.js

@@ -0,0 +1,49 @@
+function g() {
+  const e = globalThis.matchMedia;
+  return typeof e != "function" ? !1 : e.call(globalThis, "(prefers-reduced-motion: reduce)").matches;
+}
+function p(e, l = {}) {
+  const u = globalThis.ResizeObserver;
+  if (typeof u != "function") return () => {
+  };
+  const f = () => e.offsetHeight, d = () => typeof e.getAnimations == "function" && e.getAnimations().some((t) => t !== n && t.playState === "running");
+  let a = f(), n = null, c = !1, i = null;
+  const b = () => {
+    n = null, e.style.willChange = "", !c && i && i.observe(e, { box: "border-box" });
+  }, h = (t) => {
+    const r = a;
+    if (a = t, !Number.isFinite(r) || Math.abs(r - t) < 0.5 || g()) return;
+    i?.unobserve(e);
+    const o = e.animate(
+      [{ height: `${r}px` }, { height: `${t}px` }],
+      {
+        duration: 220,
+        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+        fill: "none"
+      }
+    );
+    n = o, e.style.willChange = "height", o.addEventListener("finish", () => {
+      if (c) return;
+      b();
+      const s = f();
+      Math.abs(s - a) >= 0.5 && h(s);
+    }), o.oncancel = () => {
+      c || b();
+    };
+  };
+  return i = new u((t) => {
+    const r = t[t.length - 1];
+    if (!r || n) return;
+    const o = Array.isArray(r.borderBoxSize) ? r.borderBoxSize[0] : r.borderBoxSize, s = o ? o.blockSize : r.contentRect.height;
+    if (l.isSettled && !l.isSettled() || d()) {
+      a = s;
+      return;
+    }
+    h(s);
+  }), i.observe(e, { box: "border-box" }), () => {
+    c = !0, i.disconnect(), n?.cancel(), n = null, e.style.willChange = "";
+  };
+}
+export {
+  p as observeDialogHeight
+};

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

@@ -11,6 +11,7 @@ export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
 export { SurfaceFloatingPanel, type SurfaceFloatingPanelProps, type SurfaceFloatingPanelHandleProps, } from './SurfaceFloatingPanel';
 export type { SurfaceFloatingPanelBoundaryInsets, SurfaceFloatingPanelPosition, } from './surfaceFloatingPanelGeometry';
 export { createFloatingPresence, type FloatingPresence, type FloatingPresenceOptions, type FloatingPresenceState, } from './floatingPresence';
+export { observeDialogHeight } from './dialogHeightMotion';
 export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuItemNavigationOptions, type MenuKeyboardNavigationOptions, } from './menuUtils';
 export { resolveFloatingWindowViewport, type FloatingWindowRect, type FloatingWindowViewport, type FloatingWindowViewportInsets, } from './floatingWindowGeometry';
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';

package/dist/context/ComponentRegistry.d.ts

@@ -40,12 +40,6 @@ export interface CommandContribution<TProtocol = unknown> {
     category?: string;
     execute: (ctx: ComponentContext<TProtocol>) => void | Promise<void>;
 }
-export interface StatusBarContribution {
-    id: string;
-    position: 'left' | 'right';
-    order?: number;
-    component: Component;
-}
 export type SidebarCollapseBehavior = 'toggle' | 'preserve';
 export interface FloeComponent<TProtocol = unknown> {
     id: string;
@@ -84,7 +78,6 @@ export interface FloeComponent<TProtocol = unknown> {
         collapseBehavior?: SidebarCollapseBehavior;
     };
     commands?: CommandContribution<TProtocol>[];
-    statusBar?: StatusBarContribution[];
     onMount?: (context: ComponentContext<TProtocol>) => void | Promise<void>;
     onUnmount?: () => void | Promise<void>;
 }
@@ -103,7 +96,6 @@ export interface ComponentRegistryValue<TProtocol = unknown> {
         order: number;
     }>>;
     allCommands: Accessor<CommandContribution<TProtocol>[]>;
-    statusBarItems: Accessor<StatusBarContribution[]>;
     getComponent: (id: string) => FloeComponent<TProtocol> | undefined;
 }
 export declare function useComponentContextFactory<TProtocol = unknown>(): (componentId: string, extra?: Pick<ComponentContext<TProtocol>, "protocol">) => ComponentContext<TProtocol>;