@floegence/floe-webapp-core 0.71.0 → 0.72.0

package/dist/components/layout/MobileTabBar.js

@@ -1,11 +1,11 @@
-import { insert as c, createComponent as d, effect as S, className as v, setAttribute as C, template as b, Dynamic as W, memo as M, use as R, delegateEvents as z } from "solid-js/web";
-import { createSignal as I, onMount as D, onCleanup as E, Show as A, For as j } from "solid-js";
+import { insert as c, createComponent as d, effect as $, className as v, setAttribute as A, template as b, Dynamic as W, memo as M, use as R, delegateEvents as z } from "solid-js/web";
+import { createSignal as L, onMount as D, onCleanup as E, Show as S, For as j } from "solid-js";
 import { cn as g } from "../../utils/cn.js";
-import { deferNonBlocking as L } from "../../utils/defer.js";
+import { deferNonBlocking as _ } from "../../utils/defer.js";
 var q = /* @__PURE__ */ b('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ b('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), K = /* @__PURE__ */ b('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"role=tablist aria-orientation=horizontal style=-webkit-overflow-scrolling:touch>'), N = /* @__PURE__ */ b("<span>"), T = /* @__PURE__ */ b('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), H = /* @__PURE__ */ b("<button type=button role=tab><div></div><span>");
 function P(e) {
   let i;
-  const [o, u] = I(!1), [h, t] = I(!1);
+  const [a, u] = L(!1), [h, t] = L(!1);
   let n = null;
   const s = () => {
     i && (u(i.scrollLeft > 0), t(i.scrollLeft < i.scrollWidth - i.clientWidth - 1));
@@ -19,35 +19,35 @@ function P(e) {
         n = null, s();
       });
     }
-  }, k = () => e.items, w = (l) => {
-    const r = k()[l];
-    if (r) {
-      if (r.onClick) {
-        L(() => r.onClick());
+  }, k = () => e.items, w = (r) => {
+    const l = k()[r];
+    if (l) {
+      if (l.onClick) {
+        _(() => l.onClick());
         return;
       }
-      e.onSelect(r.id);
+      e.onSelect(l.id);
     }
   };
   return D(() => {
     s();
-    const l = e.items.findIndex((r) => r.id === e.activeId);
-    if (l > 0 && i) {
-      const r = i.scrollWidth / e.items.length;
-      i.scrollLeft = Math.max(0, r * l - i.clientWidth / 2 + r / 2);
+    const r = e.items.findIndex((l) => l.id === e.activeId);
+    if (r > 0 && i) {
+      const l = i.scrollWidth / e.items.length;
+      i.scrollLeft = Math.max(0, l * r - i.clientWidth / 2 + l / 2);
     }
   }), E(() => {
     n !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(n), n = null);
   }), (() => {
-    var l = K(), r = l.firstChild, m = r.firstChild;
-    c(r, d(A, {
+    var r = K(), l = r.firstChild, m = l.firstChild;
+    c(l, d(S, {
       get when() {
-        return o();
+        return a();
       },
       get children() {
         return q();
       }
-    }), m), c(r, d(A, {
+    }), m), c(l, d(S, {
       get when() {
         return h();
       },
@@ -55,15 +55,15 @@ function P(e) {
         return B();
       }
     }), m), m.addEventListener("scroll", x);
-    var $ = i;
-    return typeof $ == "function" ? R($, m) : i = m, c(m, d(j, {
+    var I = i;
+    return typeof I == "function" ? R(I, m) : i = m, c(m, d(j, {
       get each() {
         return e.items;
       },
-      children: (a, y) => d(U, {
-        item: a,
+      children: (o, y) => d(U, {
+        item: o,
         get isActive() {
-          return e.activeId === a.id;
+          return e.activeId === o.id;
         },
         get index() {
           return y();
@@ -73,30 +73,31 @@ function P(e) {
         },
         onClick: () => {
           "vibrate" in navigator && navigator.vibrate(10);
-          const f = a.onClick, _ = e.onSelect, F = a.id;
-          a.onClick ? L(() => f()) : _(F);
+          const f = o.onClick, C = e.onSelect, F = o.id;
+          o.onClick ? _(() => f()) : C(F);
         },
         onKeyboardSelect: (f) => w(f)
       })
-    })), S((a) => {
-      var y = g(
+    })), $((o) => {
+      var y = e.hidden, f = g(
         // Same safe-area rule as TopBar: keep the visual bar height stable, and
         // add safe-area padding on an outer wrapper (avoid squeezing content).
         "relative shrink-0 bg-background border-t border-border safe-bottom safe-left safe-right",
         e.class
-      ), f = e.ariaLabel;
-      return y !== a.e && v(l, a.e = y), f !== a.t && C(l, "aria-label", a.t = f), a;
+      ), C = e.ariaLabel;
+      return y !== o.e && (r.hidden = o.e = y), f !== o.t && v(r, o.t = f), C !== o.a && A(r, "aria-label", o.a = C), o;
     }, {
       e: void 0,
-      t: void 0
-    }), l;
+      t: void 0,
+      a: void 0
+    }), r;
   })();
 }
 function U(e) {
   const i = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var o = H(), u = o.firstChild, h = u.nextSibling;
-    return o.$$keydown = (t) => {
+    var a = H(), u = a.firstChild, h = u.nextSibling;
+    return a.$$keydown = (t) => {
       let n = null;
       switch (t.key) {
         case "ArrowRight":
@@ -117,12 +118,12 @@ function U(e) {
           return;
       }
       t.preventDefault(), e.onKeyboardSelect(n);
-    }, o.$$click = () => e.onClick(), c(u, d(W, {
+    }, a.$$click = () => e.onClick(), c(u, d(W, {
       get component() {
         return e.item.icon;
       },
       class: "w-6 h-6"
-    }), null), c(u, d(A, {
+    }), null), c(u, d(S, {
       get when() {
         return i();
       },
@@ -131,18 +132,18 @@ function U(e) {
         return c(t, (() => {
           var n = M(() => typeof i() == "number" && i() > 99);
           return () => n() ? "99+" : i();
-        })()), S(() => v(t, g("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
+        })()), $(() => v(t, g("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
       }
-    }), null), c(h, () => e.item.label), c(o, d(A, {
+    }), null), c(h, () => e.item.label), c(a, d(S, {
       get when() {
         return e.isActive;
       },
       get children() {
         return T();
       }
-    }), null), S((t) => {
-      var n = g("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), s = e.item.label, x = e.isActive, k = e.isActive ? 0 : -1, w = g("relative transition-transform duration-150", e.isActive && "scale-110"), l = g("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return n !== t.e && v(o, t.e = n), s !== t.t && C(o, "aria-label", t.t = s), x !== t.a && C(o, "aria-selected", t.a = x), k !== t.o && C(o, "tabindex", t.o = k), w !== t.i && v(u, t.i = w), l !== t.n && v(h, t.n = l), t;
+    }), null), $((t) => {
+      var n = g("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), s = e.item.label, x = e.isActive, k = e.isActive ? 0 : -1, w = g("relative transition-transform duration-150", e.isActive && "scale-110"), r = g("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return n !== t.e && v(a, t.e = n), s !== t.t && A(a, "aria-label", t.t = s), x !== t.a && A(a, "aria-selected", t.a = x), k !== t.o && A(a, "tabindex", t.o = k), w !== t.i && v(u, t.i = w), r !== t.n && v(h, t.n = r), t;
     }, {
       e: void 0,
       t: void 0,
@@ -150,7 +151,7 @@ function U(e) {
       o: void 0,
       i: void 0,
       n: void 0
-    }), o;
+    }), a;
   })();
 }
 z(["click", "keydown"]);

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

@@ -26,6 +26,8 @@ export interface ShellSlotClassNames {
 }
 export interface ShellProps {
     children: JSX.Element;
+    /** Fill a containing AppViewport or embedded host instead of the document viewport. */
+    fillParent?: boolean;
     logo?: JSX.Element;
     activityItems?: ActivityBarItem[];
     activityBottomItems?: ActivityBarItem[];
@@ -41,6 +43,10 @@ export interface ShellProps {
     activityBottomItemsMobileMode?: 'hidden' | 'topBar';
     topBarActions?: JSX.Element;
     bottomBarItems?: JSX.Element;
+    /** Stable content directly above mobile navigation, such as a composer anchor. */
+    mobileAccessory?: JSX.Element;
+    /** Hide navigation only while a focused editor is occluded by the soft keyboard. */
+    hideMobileNavigationWhenKeyboardOpen?: boolean;
     sidebarContent?: (activeTab: string) => JSX.Element;
     /** Defer user-requested Activity content commits until the selected control has painted. */
     activitySelectionMode?: 'sync' | 'ui-first';