@floegence/floe-webapp-core 0.52.8 → 0.52.9

package/dist/components/layout/BottomBarCompanion.d.ts

@@ -10,6 +10,8 @@ export interface BottomBarCompanionProps {
     id: string;
     label: string;
     children?: JSX.Element;
+    /** Preferred expanded width in pixels; defaults to the anchor width and respects maxWidth. */
+    expandedWidth?: number;
     maxWidth?: number;
     maxHeight?: number;
     viewportPadding?: number;

package/dist/components/layout/BottomBarCompanion.js

@@ -1,14 +1,14 @@
-import { createComponent as Z, Portal as ce, use as $, insert as le, effect as ue, setAttribute as R, className as p, style as de, memo as fe, template as me } from "solid-js/web";
-import { createSignal as N, createEffect as k, untrack as G, onCleanup as U, Show as he } from "solid-js";
-import { cn as ee } from "../../utils/cn.js";
+import { createComponent as p, Portal as ce, use as ee, insert as le, effect as ue, setAttribute as V, className as te, style as de, memo as fe, template as me } from "solid-js/web";
+import { createSignal as x, createEffect as G, untrack as U, onCleanup as _, Show as he } from "solid-js";
+import { cn as ne } from "../../utils/cn.js";
 var ve = /* @__PURE__ */ me("<section role=region data-floe-bottom-bar-companion=true><div data-floe-bottom-bar-companion-content=true>");
-const we = 544, be = 544, ge = 12, z = {
+const we = 544, be = 544, ge = 12, q = {
   top: "--floe-bottom-bar-companion-safe-area-top",
   right: "--floe-bottom-bar-companion-safe-area-right",
   bottom: "--floe-bottom-bar-companion-safe-area-bottom",
   left: "--floe-bottom-bar-companion-safe-area-left"
 };
-function te(e, a) {
+function X(e, a) {
   const l = Number(e);
   return Number.isFinite(l) && l > 0 ? l : a;
 }
@@ -16,7 +16,7 @@ function Ce(e, a) {
   const l = Number(e);
   return Number.isFinite(l) && l >= 0 ? l : a;
 }
-function ne(e) {
+function oe(e) {
   if (!e?.isConnected) return null;
   const a = e.getBoundingClientRect();
   return !Number.isFinite(a.left) || !Number.isFinite(a.top) || a.width <= 0 || a.height <= 0 ? null : {
@@ -26,7 +26,7 @@ function ne(e) {
     height: a.height
   };
 }
-function B(e, a) {
+function k(e, a) {
   const l = e.ownerDocument.defaultView;
   if (!l) return 0;
   const m = Number.parseFloat(l.getComputedStyle(e).getPropertyValue(a));
@@ -34,19 +34,19 @@ function B(e, a) {
 }
 function Fe(e) {
   return {
-    top: B(e, z.top),
-    right: B(e, z.right),
-    bottom: B(e, z.bottom),
-    left: B(e, z.left)
+    top: k(e, q.top),
+    right: k(e, q.right),
+    bottom: k(e, q.bottom),
+    left: k(e, q.left)
   };
 }
-function ye(e, a, l, m, C) {
-  const F = a.ownerDocument.defaultView, y = F?.visualViewport, v = y?.offsetLeft ?? 0, D = y?.offsetTop ?? 0, q = y?.width ?? F?.innerWidth ?? e.left + e.width, H = y?.height ?? F?.innerHeight ?? e.top + e.height, E = Fe(a), W = v + E.left + C, w = v + q - E.right - C, b = D + E.top + C, h = D + H - E.bottom - C, g = Math.max(0, w - W), d = Math.min(e.width, l, g), P = e.left + (e.width - d) / 2, M = Math.max(W, Math.min(P, w - d)), L = Math.min(e.top + e.height, h), V = Math.max(e.height, L - b), x = Math.min(m, V);
+function ye(e, a, l, m, R, F) {
+  const E = a.ownerDocument.defaultView, f = E?.visualViewport, A = f?.offsetLeft ?? 0, z = f?.offsetTop ?? 0, N = f?.width ?? E?.innerWidth ?? e.left + e.width, H = f?.height ?? E?.innerHeight ?? e.top + e.height, P = Fe(a), b = A + P.left + F, h = A + N - P.right - F, v = z + P.top + F, g = z + H - P.bottom, w = Math.max(0, h - b), C = Math.min(l, m, w), L = e.left + (e.width - C) / 2, M = Math.max(b, Math.min(L, h - C)), D = Math.min(e.top + e.height, g), S = Math.max(e.height, D - v), B = Math.min(R, S);
   return {
     left: M,
-    top: L - x,
-    width: d,
-    height: x
+    top: D - B,
+    width: C,
+    height: B
   };
 }
 function Ee(e, a) {
@@ -61,157 +61,157 @@ function Ae(e) {
   } : {};
 }
 function Me(e) {
-  const [a, l] = N(null), [m, C] = N(!1), [F, y] = N(!1), [v, D] = N(null), [q, H] = N(null), [E, W] = N("collapsed");
-  let w = null, b = 0, h = 0, g = null, d = null, P = null, M = !1, L = !1;
-  const V = (i) => {
-    E() !== i && (W(i), e.onPhaseChange?.(i));
-  }, x = () => a()?.ownerDocument.defaultView ?? e.anchor?.ownerDocument.defaultView ?? null, oe = () => x()?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1, _ = (i) => {
+  const [a, l] = x(null), [m, R] = x(!1), [F, E] = x(!1), [f, A] = x(null), [z, N] = x(null), [H, P] = x("collapsed");
+  let b = null, h = 0, v = 0, g = null, w = null, C = null, L = !1, M = !1;
+  const D = (i) => {
+    H() !== i && (P(i), e.onPhaseChange?.(i));
+  }, S = () => a()?.ownerDocument.defaultView ?? e.anchor?.ownerDocument.defaultView ?? null, B = () => S()?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1, K = (i) => {
     const t = e.mount, r = e.anchor, n = !!(t?.isConnected && i && r?.ownerDocument === t.ownerDocument);
     n && l(t);
     const c = a();
     if (c) {
-      C(c.isConnected);
+      R(c.isConnected);
       const o = !!(n && c === t);
-      return y(o), {
+      return E(o), {
         mount: c,
         ready: o
       };
     }
-    return C(!1), y(!1), {
+    return R(!1), E(!1), {
       mount: null,
       ready: !1
     };
   }, ie = (i) => {
-    const t = ne(e.anchor);
-    t && H(t);
+    const t = oe(e.anchor);
+    t && N(t);
     const {
       mount: r,
       ready: n
-    } = _(t), c = t ?? q();
-    return !c || !r || !n ? null : i ? ye(c, r, te(e.maxWidth, we), te(e.maxHeight, be), Ce(e.viewportPadding, ge)) : c;
-  }, X = () => {
-    b && g && g.cancelAnimationFrame(b), h && d && d.cancelAnimationFrame(h), b = 0, h = 0, g = null, d = null, P = null;
-  }, K = (i, t) => {
+    } = K(t), c = t ?? z();
+    return !c || !r || !n ? null : i ? ye(c, r, X(e.expandedWidth, c.width), X(e.maxWidth, we), X(e.maxHeight, be), Ce(e.viewportPadding, ge)) : c;
+  }, j = () => {
+    h && g && g.cancelAnimationFrame(h), v && w && w.cancelAnimationFrame(v), h = 0, v = 0, g = null, w = null, C = null;
+  }, J = (i, t) => {
     const r = ie(i);
     if (!r) return;
-    const n = v(), c = i ? "expanded" : "collapsed";
-    if (!t || oe() || Ee(n, r)) {
-      D(r), P = null, V(c);
+    const n = f(), c = i ? "expanded" : "collapsed";
+    if (!t || B() || Ee(n, r)) {
+      A(r), C = null, D(c);
       return;
     }
-    P = ["height", "width", "top", "left"].find((u) => n?.[u] !== r[u]) ?? null, V(i ? "expanding" : "collapsing");
-    const o = x();
+    C = ["height", "width", "top", "left"].find((u) => n?.[u] !== r[u]) ?? null, D(i ? "expanding" : "collapsing");
+    const o = S();
     if (!o) {
-      D(r), V(c);
+      A(r), D(c);
       return;
     }
-    h = o.requestAnimationFrame(() => {
-      h = 0, d = null, D(r);
-    }), d = o;
-  }, j = (i, t) => {
-    const r = x();
+    v = o.requestAnimationFrame(() => {
+      v = 0, w = null, A(r);
+    }), w = o;
+  }, Q = (i, t) => {
+    const r = S();
     if (!r) {
-      K(t, i);
+      J(t, i);
       return;
     }
-    b && g && g.cancelAnimationFrame(b), h && d && d.cancelAnimationFrame(h), h = 0, d = null, b = r.requestAnimationFrame(() => {
-      b = 0, g = null, G(() => K(t, i));
+    h && g && g.cancelAnimationFrame(h), v && w && w.cancelAnimationFrame(v), v = 0, w = null, h = r.requestAnimationFrame(() => {
+      h = 0, g = null, U(() => J(t, i));
     }), g = r;
   };
-  k(() => {
+  G(() => {
     const i = e.retained, t = e.visible, r = e.open;
-    if (e.anchor, e.mount, e.maxWidth, e.maxHeight, e.viewportPadding, !i) {
-      X(), l(null), C(!1), y(!1), D(null), H(null), w = null, e.surfaceRef?.(null), e.contentHostRef?.(null), M = !1, L = r;
+    if (e.anchor, e.mount, e.expandedWidth, e.maxWidth, e.maxHeight, e.viewportPadding, !i) {
+      j(), l(null), R(!1), E(!1), A(null), N(null), b = null, e.surfaceRef?.(null), e.contentHostRef?.(null), L = !1, M = r;
       return;
     }
-    const n = ne(e.anchor);
-    if (n && H(n), _(n), !t) {
-      M = !1, L = r;
+    const n = oe(e.anchor);
+    if (n && N(n), K(n), !t) {
+      L = !1, M = r;
       return;
     }
-    const c = !M, o = L !== r;
-    M = !0, L = r, j(!c && o, r);
-  }), k(() => {
+    const c = !L, o = M !== r;
+    L = !0, M = r, Q(!c && o, r);
+  }), G(() => {
     if (!e.retained) return;
     const i = e.anchor, t = a(), r = e.mount, n = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
     for (const s of [i, t, r]) {
       if (!s) continue;
       n.add(s.ownerDocument);
-      const f = s.ownerDocument.defaultView;
-      f && c.add(f);
+      const d = s.ownerDocument.defaultView;
+      d && c.add(d);
     }
     if (c.size === 0 || n.size === 0) return;
-    const o = () => j(!1, G(() => e.open)), u = [];
+    const o = () => Q(!1, U(() => e.open)), u = [];
     for (const s of /* @__PURE__ */ new Set([i, t, r])) {
-      const f = s?.ownerDocument.defaultView;
-      if (!s || !f || typeof f.ResizeObserver != "function") continue;
-      const A = new f.ResizeObserver(o);
-      A.observe(s), u.push(A);
+      const d = s?.ownerDocument.defaultView;
+      if (!s || !d || typeof d.ResizeObserver != "function") continue;
+      const y = new d.ResizeObserver(o);
+      y.observe(s), u.push(y);
     }
-    let S = i?.isConnected ?? !1, T = t?.isConnected ?? !1, I = r?.isConnected ?? !1;
+    let T = i?.isConnected ?? !1, W = t?.isConnected ?? !1, I = r?.isConnected ?? !1;
     const O = [];
     for (const s of n) {
-      const f = s.defaultView;
-      if (!f || typeof f.MutationObserver != "function" || !s.documentElement) continue;
-      const A = new f.MutationObserver(() => {
-        const J = i?.isConnected ?? !1, Q = t?.isConnected ?? !1, Y = r?.isConnected ?? !1;
-        S === J && T === Q && I === Y || (S = J, T = Q, I = Y, G(o));
+      const d = s.defaultView;
+      if (!d || typeof d.MutationObserver != "function" || !s.documentElement) continue;
+      const y = new d.MutationObserver(() => {
+        const Y = i?.isConnected ?? !1, Z = t?.isConnected ?? !1, $ = r?.isConnected ?? !1;
+        T === Y && W === Z && I === $ || (T = Y, W = Z, I = $, U(o));
       });
-      A.observe(s.documentElement, {
+      y.observe(s.documentElement, {
         childList: !0,
         subtree: !0
-      }), O.push(A);
+      }), O.push(y);
     }
     for (const s of c)
       s.addEventListener("resize", o), s.visualViewport?.addEventListener("resize", o), s.visualViewport?.addEventListener("scroll", o);
-    U(() => {
+    _(() => {
       for (const s of u) s.disconnect();
       for (const s of O) s.disconnect();
       for (const s of c)
         s.removeEventListener("resize", o), s.visualViewport?.removeEventListener("resize", o), s.visualViewport?.removeEventListener("scroll", o);
     });
-  }), k(() => {
-    if (!e.retained || !e.visible || !e.open || !m() || !F() || !v()) return;
+  }), G(() => {
+    if (!e.retained || !e.visible || !e.open || !m() || !F() || !f()) return;
     const t = a()?.ownerDocument;
     if (!t) return;
     const r = (o) => {
       const u = typeof o.composedPath == "function" ? o.composedPath() : [];
-      return w && u.includes(w) || e.anchor && u.includes(e.anchor) ? !0 : e.isOwnedInteraction?.(o) ?? !1;
+      return b && u.includes(b) || e.anchor && u.includes(e.anchor) ? !0 : e.isOwnedInteraction?.(o) ?? !1;
     }, n = (o) => {
       r(o) || e.onDismiss?.("outside-pointer");
     }, c = (o) => {
       if (o.key !== "Escape" || o.defaultPrevented || o.isComposing || o.keyCode === 229) return;
       const u = t.activeElement;
-      !w?.contains(u) && !e.isOwnedInteraction?.(o) || (o.preventDefault(), e.onDismiss?.("escape"));
+      !b?.contains(u) && !e.isOwnedInteraction?.(o) || (o.preventDefault(), e.onDismiss?.("escape"));
     };
-    t.addEventListener("pointerdown", n, !0), t.addEventListener("keydown", c), U(() => {
+    t.addEventListener("pointerdown", n, !0), t.addEventListener("keydown", c), _(() => {
       t.removeEventListener("pointerdown", n, !0), t.removeEventListener("keydown", c);
     });
-  }), U(() => {
-    X(), e.surfaceRef?.(null), e.contentHostRef?.(null);
+  }), _(() => {
+    j(), e.surfaceRef?.(null), e.contentHostRef?.(null);
   });
   const re = (i) => {
-    w = i, e.surfaceRef?.(i);
+    b = i, e.surfaceRef?.(i);
   }, ae = (i) => {
     e.contentHostRef?.(i);
   }, se = (i) => {
-    if (i.target !== w || i.propertyName !== P) return;
+    if (i.target !== b || i.propertyName !== C) return;
     const t = e.open ? "expanding" : "collapsing";
-    E() === t && (P = null, V(e.open ? "expanded" : "collapsed"));
+    H() === t && (C = null, D(e.open ? "expanded" : "collapsed"));
   };
-  return Z(he, {
+  return p(he, {
     get when() {
       return fe(() => !!e.retained)() && a();
     },
-    children: (i) => Z(ce, {
+    children: (i) => p(ce, {
       get mount() {
         return i();
       },
       get children() {
         var t = ve(), r = t.firstChild;
-        return t.addEventListener("transitionend", se), $((n) => re(n), t), $((n) => ae(n), r), le(r, () => e.children), ue((n) => {
-          var c = e.id, o = e.label, u = !e.visible || !m() || !F() || !v() ? "true" : void 0, S = !e.visible || !m() || !F() || !v(), T = ee("floe-bottom-bar-companion", e.class), I = E(), O = e.visible && m() && F() ? "visible" : "hidden", s = v() ? "true" : "false", f = Ae(v()), A = ee("floe-bottom-bar-companion__content", e.contentClass);
-          return c !== n.e && R(t, "id", n.e = c), o !== n.t && R(t, "aria-label", n.t = o), u !== n.a && R(t, "aria-hidden", n.a = u), S !== n.o && (t.inert = n.o = S), T !== n.i && p(t, n.i = T), I !== n.n && R(t, "data-companion-phase", n.n = I), O !== n.s && R(t, "data-companion-visibility", n.s = O), s !== n.h && R(t, "data-companion-frame-ready", n.h = s), n.r = de(t, f, n.r), A !== n.d && p(r, n.d = A), n;
+        return t.addEventListener("transitionend", se), ee((n) => re(n), t), ee((n) => ae(n), r), le(r, () => e.children), ue((n) => {
+          var c = e.id, o = e.label, u = !e.visible || !m() || !F() || !f() ? "true" : void 0, T = !e.visible || !m() || !F() || !f(), W = ne("floe-bottom-bar-companion", e.class), I = H(), O = e.visible && m() && F() ? "visible" : "hidden", s = f() ? "true" : "false", d = Ae(f()), y = ne("floe-bottom-bar-companion__content", e.contentClass);
+          return c !== n.e && V(t, "id", n.e = c), o !== n.t && V(t, "aria-label", n.t = o), u !== n.a && V(t, "aria-hidden", n.a = u), T !== n.o && (t.inert = n.o = T), W !== n.i && te(t, n.i = W), I !== n.n && V(t, "data-companion-phase", n.n = I), O !== n.s && V(t, "data-companion-visibility", n.s = O), s !== n.h && V(t, "data-companion-frame-ready", n.h = s), n.r = de(t, d, n.r), y !== n.d && te(r, n.d = y), n;
         }, {
           e: void 0,
           t: void 0,

package/dist/floe.css

@@ -735,15 +735,15 @@
   pointer-events: auto;
   transform-origin: bottom center;
   transition:
-    left 240ms cubic-bezier(0.22, 1, 0.36, 1),
-    top 240ms cubic-bezier(0.22, 1, 0.36, 1),
-    width 240ms cubic-bezier(0.22, 1, 0.36, 1),
-    height 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    left 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
+    top 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
+    width 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
+    height 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
     border-radius 200ms ease,
     border-color 180ms ease,
+    background-color 200ms ease,
     box-shadow 200ms ease,
     opacity 120ms ease;
-  will-change: left, top, width, height;
 }
 
 .floe-bottom-bar-companion[data-companion-phase='expanding'],
@@ -755,8 +755,9 @@
     0 6px 18px -12px color-mix(in srgb, var(--foreground) 24%, transparent);
 }
 
+.floe-bottom-bar-companion[data-companion-phase='expanding'],
 .floe-bottom-bar-companion[data-companion-phase='collapsing'] {
-  transition-duration: 180ms, 180ms, 180ms, 180ms, 160ms, 140ms, 160ms, 100ms;
+  will-change: left, top, width, height;
 }
 
 .floe-bottom-bar-companion[data-companion-visibility='hidden'],