@floegence/floe-webapp-core 0.71.0 → 0.72.0

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

@@ -0,0 +1,9 @@
+import { type JSX } from 'solid-js';
+import { type ViewportSnapshot } from '../../viewport';
+export interface AppViewportProps {
+    children: JSX.Element;
+    class?: string;
+    onViewportChange?: (viewport: ViewportSnapshot) => void;
+}
+/** A stable document-level host that follows browser chrome and the soft keyboard. */
+export declare function AppViewport(props: AppViewportProps): JSX.Element;

package/dist/components/layout/AppViewport.js

@@ -0,0 +1,31 @@
+import { insert as f, effect as u, className as c, setAttribute as m, style as p, template as s, use as w } from "solid-js/web";
+import { createSignal as h, onMount as y, onCleanup as V, untrack as b } from "solid-js";
+import { viewportStyle as g, observeViewport as k } from "../../viewport.js";
+var x = /* @__PURE__ */ s("<div data-floe-app-viewport style=position:fixed;inset:0;overflow:hidden;min-height:0>");
+function D(r) {
+  const [i, d] = h();
+  let n;
+  return y(() => {
+    const e = n?.ownerDocument.defaultView;
+    e && V(k(e, (o) => {
+      d(o), b(() => r.onViewportChange?.(o));
+    }));
+  }), (() => {
+    var e = x(), o = n;
+    return typeof o == "function" ? w(o, e) : n = e, f(e, () => r.children), u((t) => {
+      var a = r.class, v = i()?.keyboardOpen || void 0, l = {
+        ...i() ? g(i()) : {
+          height: "100dvh"
+        }
+      };
+      return a !== t.e && c(e, t.e = a), v !== t.t && m(e, "data-keyboard-open", t.t = v), t.a = p(e, l, t.a), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), e;
+  })();
+}
+export {
+  D as AppViewport
+};

package/dist/components/layout/BottomBarCompanion.js

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

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

@@ -10,6 +10,7 @@ export interface MobileTabBarItem {
     onClick?: () => void;
 }
 export interface MobileTabBarProps {
+    hidden?: boolean;
     items: MobileTabBarItem[];
     activeId: string;
     onSelect: (id: string) => void;