@floegence/floe-webapp-core 0.77.3 → 0.78.0

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

@@ -0,0 +1,20 @@
+import { type JSX } from 'solid-js';
+export interface MobileNavigationPanelProps {
+    id: string;
+    open: boolean;
+    title: string;
+    children: JSX.Element;
+    onOpenChange: (open: boolean) => void;
+    trigger?: HTMLElement | null;
+    /** Null allows content with its own identity and close controls. */
+    header?: JSX.Element;
+    closeLabel?: string;
+    class?: string;
+    contentClass?: string;
+    onKeyDown?: JSX.EventHandler<HTMLDivElement, KeyboardEvent>;
+    onPresenceChange?: (present: boolean) => void;
+}
+/** Shell-owned navigation surface; its backdrop never covers the bottom navigation. */
+export declare function MobileNavigationPanel(props: MobileNavigationPanelProps & {
+    navigation: () => HTMLElement | undefined;
+}): JSX.Element;

package/dist/components/layout/MobileNavigationPanel.js

@@ -0,0 +1,95 @@
+import { createComponent as b, use as E, setAttribute as a, insert as f, effect as S, memo as N, className as P, template as g, delegateEvents as T } from "solid-js/web";
+import { createUniqueId as j, createEffect as M, onCleanup as q, createMemo as A, Show as _, untrack as I } from "solid-js";
+import { useOverlayMask as K } from "../../hooks/useOverlayMask.js";
+import { createFloatingPresence as O } from "../ui/floatingPresence.js";
+import { cn as F } from "../../utils/cn.js";
+import { deferAfterPaint as z } from "../../utils/defer.js";
+import { X as L } from "../icons/index.js";
+var R = /* @__PURE__ */ g('<header class="flex shrink-0 items-center gap-2 border-b px-4 py-2"><h2 class="min-w-0 flex-1 text-base font-semibold"></h2><button type=button data-floe-autofocus class="flex h-11 w-11 shrink-0 items-center justify-center rounded-md hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">'), U = /* @__PURE__ */ g('<div data-floe-mobile-navigation-overlay class="absolute inset-0 z-50 overflow-hidden p-2"><div class="absolute inset-0 floe-floating-presence floe-floating-backdrop floe-bottom-drawer-backdrop"data-floe-mobile-navigation-backdrop></div><div class="relative pointer-events-none flex h-full min-h-0 items-end justify-center"><div role=dialog tabindex=-1 data-floe-mobile-navigation-panel data-floe-surface=floating data-floe-surface-portal-layer=true style="max-height:min(680px, 86%);border-radius:24px"><div>'), W = /* @__PURE__ */ g("<h2 class=sr-only>");
+function Z(t) {
+  const u = `mobile-navigation-${j()}`, r = O({
+    open: () => t.open,
+    exitDurationMs: 180
+  });
+  let i, d = null;
+  const v = () => {
+    d = t.trigger ?? null, t.onOpenChange(!1);
+  };
+  M(() => {
+    const n = r.mounted();
+    if (t.onPresenceChange?.(n), !n && d) {
+      const l = d;
+      d = null, l.isConnected && !l.closest("[hidden], [inert]") && l.focus({
+        preventScroll: !0
+      });
+    }
+  }), q(() => t.onPresenceChange?.(!1)), M(() => {
+    const n = t.id;
+    t.open && (d = null, z(() => I(() => {
+      if (!t.open || t.id !== n || !i?.isConnected) return;
+      const l = i.ownerDocument.activeElement;
+      l && i.contains(l) || (i.querySelector("[data-floe-autofocus]") ?? i).focus({
+        preventScroll: !0
+      });
+    })));
+  }), K({
+    open: r.mounted,
+    root: () => i,
+    focusRoots: () => [i, t.navigation()].filter((n) => !!n),
+    containsTarget: (n) => n instanceof Node && !!(i?.contains(n) || t.navigation()?.contains(n)),
+    onClose: v,
+    lockBodyScroll: !1,
+    trapFocus: !0,
+    blockWheel: "outside",
+    blockTouchMove: "outside",
+    escapeKeyPhase: "bubble",
+    autoFocus: !1,
+    restoreFocus: !1
+  });
+  const B = A(() => t.children);
+  return b(_, {
+    get when() {
+      return r.mounted();
+    },
+    get children() {
+      var n = U(), l = n.firstChild, D = l.nextSibling, o = D.firstChild, m = o.firstChild;
+      l.$$click = () => {
+        t.open && v();
+      }, o.$$keydown = (e) => t.onKeyDown?.(e);
+      var h = i;
+      return typeof h == "function" ? E(h, o) : i = o, a(o, "aria-labelledby", u), f(o, b(_, {
+        get when() {
+          return t.header === void 0;
+        },
+        get fallback() {
+          return [(() => {
+            var e = W();
+            return a(e, "id", u), f(e, () => t.title), e;
+          })(), N(() => t.header)];
+        },
+        get children() {
+          var e = R(), s = e.firstChild, c = s.nextSibling;
+          return a(s, "id", u), f(s, () => t.title), c.$$click = v, f(c, b(L, {
+            class: "h-5 w-5"
+          })), S(() => a(c, "aria-label", t.closeLabel ?? "Close")), e;
+        }
+      }), m), f(m, B), S((e) => {
+        var s = r.state(), c = r.state(), x = t.id, w = r.state(), y = r.exiting(), k = r.exiting() ? "true" : void 0, C = F("pointer-events-auto relative flex min-h-0 w-full max-w-[640px] flex-col border border-border bg-card text-card-foreground shadow-xl floe-floating-presence floe-bottom-drawer-panel", t.class), $ = F("flex min-h-0 flex-col overflow-auto overscroll-contain", t.contentClass);
+        return s !== e.e && a(n, "data-floating-presence", e.e = s), c !== e.t && a(l, "data-floating-presence", e.t = c), x !== e.a && a(o, "id", e.a = x), w !== e.o && a(o, "data-floating-presence", e.o = w), y !== e.i && (o.inert = e.i = y), k !== e.n && a(o, "aria-hidden", e.n = k), C !== e.s && P(o, e.s = C), $ !== e.h && P(m, e.h = $), e;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0,
+        h: void 0
+      }), n;
+    }
+  });
+}
+T(["click", "keydown"]);
+export {
+  Z as MobileNavigationPanel
+};

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

@@ -11,6 +11,8 @@ export interface MobileTabBarItem extends Pick<ActivityBarItem, 'buttonRef' | 'a
     onClick?: () => void;
 }
 export interface MobileTabBarProps {
+    ref?: (element: HTMLElement) => void;
+    actions?: MobileTabBarItem[];
     hidden?: boolean;
     items: MobileTabBarItem[];
     activeId: string;

package/dist/components/layout/MobileTabBar.js

@@ -1,106 +1,129 @@
-import { insert as m, createComponent as v, effect as L, className as w, setAttribute as f, template as x, use as E, Dynamic as _, memo as z, delegateEvents as D } from "solid-js/web";
-import { createSignal as $, onMount as F, onCleanup as W, Show as S, For as j } from "solid-js";
-import { cn as y } from "../../utils/cn.js";
-import { deferNonBlocking as R } from "../../utils/defer.js";
-var q = /* @__PURE__ */ x('<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__ */ x('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), H = /* @__PURE__ */ x('<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>'), K = /* @__PURE__ */ x("<span>"), N = /* @__PURE__ */ x('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), T = /* @__PURE__ */ x("<button type=button role=tab><div></div><span>");
-function O(e) {
-  let l;
-  const [I, b] = $(!1), [n, h] = $(!1);
-  let c = null;
+import { use as R, insert as u, createComponent as d, effect as _, className as C, setAttribute as s, template as v, Dynamic as j, memo as q, delegateEvents as B } from "solid-js/web";
+import { createSignal as E, onMount as z, onCleanup as D, Show as S, For as F } from "solid-js";
+import { cn as A } from "../../utils/cn.js";
+import { deferNonBlocking as W } from "../../utils/defer.js";
+var H = /* @__PURE__ */ v('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), N = /* @__PURE__ */ v('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), T = /* @__PURE__ */ v('<div data-floe-mobile-navigation-actions class="flex shrink-0 border-l border-border">'), P = /* @__PURE__ */ v('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative flex h-14"><div class="relative min-w-0 flex-1"><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>'), U = /* @__PURE__ */ v("<span>"), V = /* @__PURE__ */ v('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), G = /* @__PURE__ */ v("<button type=button><div></div><span>");
+function Y(e) {
+  let r;
+  const [$, b] = E(!1), [i, h] = E(!1);
+  let f = null;
   const g = () => {
-    l && (b(l.scrollLeft > 0), h(l.scrollLeft < l.scrollWidth - l.clientWidth - 1));
+    r && (b(r.scrollLeft > 0), h(r.scrollLeft < r.scrollWidth - r.clientWidth - 1));
   }, t = () => {
-    if (c === null) {
+    if (f === null) {
       if (typeof requestAnimationFrame > "u") {
         g();
         return;
       }
-      c = requestAnimationFrame(() => {
-        c = null, g();
+      f = requestAnimationFrame(() => {
+        f = null, g();
       });
     }
-  }, o = () => e.items, C = (a) => {
-    const i = o()[a];
-    if (i) {
-      if (i.onClick) {
-        R(() => i.onClick());
+  }, o = () => e.items, I = (l) => {
+    const a = o()[l];
+    if (a) {
+      if (a.onClick) {
+        W(() => a.onClick());
         return;
       }
-      e.onSelect(i.id);
+      e.onSelect(a.id);
     }
   };
-  return F(() => {
+  return z(() => {
     g();
-    const a = e.items.findIndex((i) => i.id === e.activeId);
-    if (a > 0 && l) {
-      const i = l.scrollWidth / e.items.length;
-      l.scrollLeft = Math.max(0, i * a - l.clientWidth / 2 + i / 2);
+    const l = e.items.findIndex((a) => a.id === e.activeId);
+    if (l > 0 && r) {
+      const a = r.scrollWidth / e.items.length;
+      r.scrollLeft = Math.max(0, a * l - r.clientWidth / 2 + a / 2);
     }
-  }), W(() => {
-    c !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(c), c = null);
+  }), D(() => {
+    f !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(f), f = null);
   }), (() => {
-    var a = H(), i = a.firstChild, d = i.firstChild;
-    m(i, v(S, {
+    var l = P(), a = l.firstChild, x = a.firstChild, m = x.firstChild, w = e.ref;
+    typeof w == "function" ? R(w, l) : e.ref = l, u(x, d(S, {
       get when() {
-        return I();
+        return $();
       },
       get children() {
-        return q();
+        return H();
       }
-    }), d), m(i, v(S, {
+    }), m), u(x, d(S, {
       get when() {
-        return n();
+        return i();
       },
       get children() {
-        return B();
+        return N();
       }
-    }), d), d.addEventListener("scroll", t);
-    var k = l;
-    return typeof k == "function" ? E(k, d) : l = d, m(d, v(j, {
+    }), m), m.addEventListener("scroll", t);
+    var y = r;
+    return typeof y == "function" ? R(y, m) : r = m, u(m, d(F, {
       get each() {
         return e.items;
       },
-      children: (r, s) => v(P, {
-        item: r,
+      children: (n, c) => d(M, {
+        item: n,
         get isActive() {
-          return e.activeId === r.id;
+          return e.activeId === n.id;
         },
         get index() {
-          return s();
+          return c();
         },
         get itemCount() {
           return e.items.length;
         },
         onClick: () => {
           "vibrate" in navigator && navigator.vibrate(10);
-          const u = r.onClick, A = e.onSelect, M = r.id;
-          r.onClick ? R(() => u()) : A(M);
+          const k = n.onClick, L = e.onSelect, K = n.id;
+          n.onClick ? W(() => k()) : L(K);
         },
-        onKeyboardSelect: (u) => C(u)
+        onKeyboardSelect: (k) => I(k)
       })
-    })), L((r) => {
-      var s = e.hidden, u = y(
+    })), u(a, d(S, {
+      get when() {
+        return e.actions?.length;
+      },
+      get children() {
+        var n = T();
+        return u(n, d(F, {
+          get each() {
+            return e.actions;
+          },
+          children: (c) => d(M, {
+            item: c,
+            action: !0,
+            isActive: !1,
+            index: 0,
+            itemCount: 1,
+            onKeyboardSelect: () => {
+            },
+            onClick: () => c.onClick?.()
+          })
+        })), n;
+      }
+    }), null), _((n) => {
+      var c = e.hidden, k = A(
         // 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
-      ), A = e.ariaLabel;
-      return s !== r.e && (a.hidden = r.e = s), u !== r.t && w(a, r.t = u), A !== r.a && f(a, "aria-label", r.a = A), r;
+      ), L = e.ariaLabel;
+      return c !== n.e && (l.hidden = n.e = c), k !== n.t && C(l, n.t = k), L !== n.a && s(l, "aria-label", n.a = L), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), a;
+    }), l;
   })();
 }
-function P(e) {
-  let l;
-  const I = () => typeof e.item.ariaExpanded == "function" ? e.item.ariaExpanded() : e.item.ariaExpanded;
-  F(() => e.item.buttonRef?.(l ?? null)), W(() => e.item.buttonRef?.(null));
+function M(e) {
+  let r;
+  const $ = () => typeof e.item.ariaExpanded == "function" ? e.item.ariaExpanded() : e.item.ariaExpanded;
+  z(() => e.item.buttonRef?.(r ?? null)), D(() => e.item.buttonRef?.(null));
   const b = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var n = T(), h = n.firstChild, c = h.nextSibling;
-    n.$$keydown = (t) => {
+    var i = G(), h = i.firstChild, f = h.nextSibling;
+    i.$$keydown = (t) => {
+      if (e.action) return;
       let o = null;
       switch (t.key) {
         case "ArrowRight":
@@ -121,34 +144,34 @@ function P(e) {
           return;
       }
       t.preventDefault(), e.onKeyboardSelect(o);
-    }, n.$$click = () => e.onClick();
-    var g = l;
-    return typeof g == "function" ? E(g, n) : l = n, m(h, v(_, {
+    }, i.$$click = () => e.onClick();
+    var g = r;
+    return typeof g == "function" ? R(g, i) : r = i, u(h, d(j, {
       get component() {
         return e.item.icon;
       },
       class: "w-6 h-6"
-    }), null), m(h, v(S, {
+    }), null), u(h, d(S, {
       get when() {
         return b();
       },
       get children() {
-        var t = K();
-        return m(t, (() => {
-          var o = z(() => typeof b() == "number" && b() > 99);
+        var t = U();
+        return u(t, (() => {
+          var o = q(() => typeof b() == "number" && b() > 99);
           return () => o() ? "99+" : b();
-        })()), L(() => w(t, y("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;
+        })()), _(() => C(t, A("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), m(c, () => e.item.label), m(n, v(S, {
+    }), null), u(f, () => e.item.label), u(i, d(S, {
       get when() {
         return e.isActive;
       },
       get children() {
-        return N();
+        return V();
       }
-    }), null), L((t) => {
-      var o = y("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"), C = e.item.label, a = e.isActive, i = I(), d = e.item.ariaControls, k = e.item.ariaHasPopup, r = e.isActive ? 0 : -1, s = y("relative transition-transform duration-150", e.isActive && "scale-110"), u = y("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return o !== t.e && w(n, t.e = o), C !== t.t && f(n, "aria-label", t.t = C), a !== t.a && f(n, "aria-selected", t.a = a), i !== t.o && f(n, "aria-expanded", t.o = i), d !== t.i && f(n, "aria-controls", t.i = d), k !== t.n && f(n, "aria-haspopup", t.n = k), r !== t.s && f(n, "tabindex", t.s = r), s !== t.h && w(h, t.h = s), u !== t.r && w(c, t.r = u), t;
+    }), null), _((t) => {
+      var o = A("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.action && "w-16 px-1", $() && "bg-muted text-foreground", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), I = e.item.label, l = e.action ? void 0 : e.isActive, a = $(), x = e.item.ariaControls, m = e.item.ariaHasPopup, w = e.action ? void 0 : "tab", y = e.action || e.isActive ? 0 : -1, n = A("relative transition-transform duration-150", e.isActive && "scale-110"), c = A("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return o !== t.e && C(i, t.e = o), I !== t.t && s(i, "aria-label", t.t = I), l !== t.a && s(i, "aria-selected", t.a = l), a !== t.o && s(i, "aria-expanded", t.o = a), x !== t.i && s(i, "aria-controls", t.i = x), m !== t.n && s(i, "aria-haspopup", t.n = m), w !== t.s && s(i, "role", t.s = w), y !== t.h && s(i, "tabindex", t.h = y), n !== t.r && C(h, t.r = n), c !== t.d && C(f, t.d = c), t;
     }, {
       e: void 0,
       t: void 0,
@@ -158,11 +181,12 @@ function P(e) {
       n: void 0,
       s: void 0,
       h: void 0,
-      r: void 0
-    }), n;
+      r: void 0,
+      d: void 0
+    }), i;
   })();
 }
-D(["click", "keydown"]);
+B(["click", "keydown"]);
 export {
-  O as MobileTabBar
+  Y as MobileTabBar
 };

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

@@ -1,4 +1,6 @@
 import { type JSX } from 'solid-js';
+import { type MobileTabBarItem } from './MobileTabBar';
+import { type MobileNavigationPanelProps } from './MobileNavigationPanel';
 import { type ActivityBarItem } from './ActivityBar';
 import type { SidebarVisibilityMotion } from '../../context/LayoutContext';
 import { type UIFirstSelectionEvent } from '../../utils/uiFirstSelection';
@@ -25,6 +27,12 @@ export interface ShellSlotClassNames {
     mobileTabBar?: string;
 }
 export interface ShellProps {
+    /** Defaults to visible; hidden transfers the top safe area to Shell. */
+    topBarMobileMode?: 'visible' | 'hidden';
+    /** Fixed actions outside the horizontally scrolling mobile tabs. */
+    mobileNavigationActions?: MobileTabBarItem[];
+    /** A controlled navigation surface above the persistent mobile tab bar. */
+    mobileNavigationPanel?: MobileNavigationPanelProps;
     children: JSX.Element;
     /** Fill a containing AppViewport or embedded host instead of the document viewport. */
     fillParent?: boolean;