@floegence/floe-webapp-core 0.77.2 → 0.78.0

package/dist/components/layout/Shell.js

@@ -1,192 +1,199 @@
-import { createComponent as a, Dynamic as L, insert as d, memo as x, effect as $, className as y, setAttribute as z, setStyleProperty as U, template as M, use as ce, delegateEvents as be } from "solid-js/web";
-import { createSignal as F, onMount as ue, onCleanup as me, batch as fe, createEffect as w, createMemo as I, For as H, Show as g } from "solid-js";
-import { observeViewport as ve } from "../../viewport.js";
-import { useLayout as he } from "../../context/LayoutContext.js";
-import { useResolvedFloeConfig as ge } from "../../context/FloeConfigContext.js";
-import { useMediaQuery as Se } from "../../hooks/useMediaQuery.js";
-import { useOverlayMask as ye } from "../../hooks/useOverlayMask.js";
-import { cn as C } from "../../utils/cn.js";
-import { deferAfterPaint as Ce, deferNonBlocking as we } from "../../utils/defer.js";
-import { useComponentRegistry as Ie } from "../../context/ComponentRegistry.js";
-import { Sidebar as Me } from "./Sidebar.js";
-import { TopBar as Ae } from "./TopBar.js";
-import { TopBarIconButton as Be } from "./TopBarIconButton.js";
-import { BottomBar as ke } from "./BottomBar.js";
-import { MobileTabBar as xe } from "./MobileTabBar.js";
-import { ActivityBar as Te } from "./ActivityBar.js";
-import { ResizeHandle as j } from "./ResizeHandle.js";
-import { resolveMobileTabActiveId as Oe, resolveMobileTabSelect as Ne } from "./mobileTabs.js";
-import { KeepAliveStack as pe } from "./KeepAliveStack.js";
-import { resolveShellSidebarActiveTabChange as Le } from "./sidebarVisibilityMotion.js";
-import { createUIFirstSelection as $e } from "../../utils/uiFirstSelection.js";
-var G = /* @__PURE__ */ M('<div class="flex items-center gap-2">'), ze = /* @__PURE__ */ M("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), Pe = /* @__PURE__ */ M('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), Re = /* @__PURE__ */ M("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), We = /* @__PURE__ */ M('<div data-floe-shell-slot=mobile-accessory class="relative shrink-0">'), Fe = /* @__PURE__ */ M('<div data-floe-shell><a></a><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main tabindex=-1>');
-function at(r) {
-  const [J, X] = F(!1);
-  ue(() => {
-    me(ve(window, (e) => X(e.keyboardOpen)));
+import { createComponent as o, Dynamic as W, insert as d, memo as w, effect as N, className as y, setAttribute as P, setStyleProperty as Y, mergeProps as he, template as B, use as Se, delegateEvents as ye } from "solid-js/web";
+import { createSignal as F, onMount as Ce, onCleanup as Me, createEffect as C, batch as we, createMemo as I, For as _, Show as g } from "solid-js";
+import { observeViewport as Ie } from "../../viewport.js";
+import { useLayout as Be } from "../../context/LayoutContext.js";
+import { useResolvedFloeConfig as Ae } from "../../context/FloeConfigContext.js";
+import { useMediaQuery as ke } from "../../hooks/useMediaQuery.js";
+import { useOverlayMask as xe } from "../../hooks/useOverlayMask.js";
+import { cn as M } from "../../utils/cn.js";
+import { deferAfterPaint as Ne, deferNonBlocking as Pe } from "../../utils/defer.js";
+import { useComponentRegistry as Te } from "../../context/ComponentRegistry.js";
+import { Sidebar as Oe } from "./Sidebar.js";
+import { TopBar as Le } from "./TopBar.js";
+import { TopBarIconButton as ze } from "./TopBarIconButton.js";
+import { BottomBar as Re } from "./BottomBar.js";
+import { MobileTabBar as $e } from "./MobileTabBar.js";
+import { MobileNavigationPanel as We } from "./MobileNavigationPanel.js";
+import { ActivityBar as Fe } from "./ActivityBar.js";
+import { ResizeHandle as Z } from "./ResizeHandle.js";
+import { resolveMobileTabActiveId as He, resolveMobileTabSelect as Ve } from "./mobileTabs.js";
+import { KeepAliveStack as Ee } from "./KeepAliveStack.js";
+import { resolveShellSidebarActiveTabChange as _e } from "./sidebarVisibilityMotion.js";
+import { createUIFirstSelection as qe } from "../../utils/uiFirstSelection.js";
+var ee = /* @__PURE__ */ B('<div class="flex items-center gap-2">'), De = /* @__PURE__ */ B("<div data-floe-shell-slot=mobile-sidebar-backdrop>"), Ke = /* @__PURE__ */ B('<div data-floe-shell-slot=mobile-sidebar-drawer tabindex=-1 role=dialog aria-modal=true><div class="h-full overflow-auto overscroll-contain">'), Qe = /* @__PURE__ */ B("<div data-floe-shell-slot=terminal-panel style=border-top-color:var(--terminal-panel-border)>"), Ue = /* @__PURE__ */ B('<div data-floe-shell-slot=mobile-accessory class="relative shrink-0">'), je = /* @__PURE__ */ B('<div data-floe-shell><a></a><div class="relative flex min-h-0 flex-1 flex-col overflow-hidden"data-floe-shell-slot=mobile-content-boundary><div data-floe-shell-slot=main-layout class="flex-1 min-h-0 flex overflow-hidden relative"><div data-floe-shell-slot=content-area><main data-floe-shell-slot=main tabindex=-1>');
+function gt(i) {
+  const [te, ie] = F(!1);
+  Ce(() => {
+    Me(Ie(window, (e) => ie(e.keyboardOpen)));
   });
-  const i = he(), V = ge(), c = Se(V.config.layout.mobileQuery), [T, S] = F(!1), [E, P] = F(null);
-  let R;
-  const b = () => r.sidebarMode === "hidden", s = (() => {
+  const r = Be(), q = Ae(), l = ke(q.config.layout.mobileQuery), [T, h] = F(!1), [O, re] = F(!1);
+  let D;
+  const ne = () => l() && !!i.mobileNavigationPanel?.open;
+  C(() => {
+    !l() && i.mobileNavigationPanel?.open && i.mobileNavigationPanel.onOpenChange(!1), ne() && h(!1);
+  });
+  const [K, H] = F(null);
+  let V;
+  const u = () => i.sidebarMode === "hidden", c = (() => {
     try {
-      return Ie();
+      return Te();
     } catch {
       return null;
     }
-  })(), O = (e, o) => {
-    const l = s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+  })(), L = (e, a) => {
+    const s = c?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
       openSidebar: n,
-      visibilityMotion: u
-    } = Le({
-      currentActiveId: i.sidebarActiveTab(),
+      visibilityMotion: b
+    } = _e({
+      currentActiveId: r.sidebarActiveTab(),
       nextActiveId: e,
-      requestedOpenSidebar: o?.openSidebar,
-      sidebarHidden: b(),
-      nextActiveFullScreen: l,
-      isMobile: c(),
-      resolveSidebarVisibilityMotion: r.resolveSidebarVisibilityMotion
+      requestedOpenSidebar: a?.openSidebar,
+      sidebarHidden: u(),
+      nextActiveFullScreen: s,
+      isMobile: l(),
+      resolveSidebarVisibilityMotion: i.resolveSidebarVisibilityMotion
     });
-    i.setSidebarActiveTab(e, {
+    r.setSidebarActiveTab(e, {
       openSidebar: n,
-      visibilityMotion: u
+      visibilityMotion: b
     });
-  }, N = $e({
-    committed: i.sidebarActiveTab,
-    commit: (e, o) => {
-      fe(() => {
-        O(e, o?.opts), typeof o?.mobileSidebarOpen == "boolean" && S(o.mobileSidebarOpen);
+  }, z = qe({
+    committed: r.sidebarActiveTab,
+    commit: (e, a) => {
+      we(() => {
+        L(e, a?.opts), typeof a?.mobileSidebarOpen == "boolean" && h(a.mobileSidebarOpen);
       });
     },
-    onEvent: (e) => r.onActivitySelectionEvent?.(e)
-  }), p = () => r.activitySelectionMode === "ui-first" ? N.visual() : i.sidebarActiveTab(), Y = (e, o) => {
-    if (r.activitySelectionMode === "ui-first") {
-      N.request(e, {
+    onEvent: (e) => i.onActivitySelectionEvent?.(e)
+  }), R = () => i.activitySelectionMode === "ui-first" ? z.visual() : r.sidebarActiveTab(), oe = (e, a) => {
+    if (i.activitySelectionMode === "ui-first") {
+      z.request(e, {
         source: "activity-bar",
-        opts: o
+        opts: a
       });
       return;
     }
-    O(e, o);
+    L(e, a);
   };
-  w(() => {
-    b() && S(!1);
-  }), w(() => {
-    const e = c();
-    i.isMobile() !== e && i.setIsMobile(e);
-  }), w(() => {
-    c() || S(!1);
-  }), w(() => {
-    const e = i.sidebarVisibilityMotion(), o = i.sidebarVisibilityMotionRevision();
-    e === "instant" && Ce(() => i.clearSidebarVisibilityMotion(o));
+  C(() => {
+    u() && h(!1);
+  }), C(() => {
+    const e = l();
+    r.isMobile() !== e && r.setIsMobile(e);
+  }), C(() => {
+    l() || h(!1);
+  }), C(() => {
+    const e = r.sidebarVisibilityMotion(), a = r.sidebarVisibilityMotionRevision();
+    e === "instant" && Ne(() => r.clearSidebarVisibilityMotion(a));
   });
-  const A = I(() => r.activityItems ? r.activityItems : s ? s.sidebarItems().filter((e) => !!e.icon).filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).map((e) => ({
+  const A = I(() => i.activityItems ? i.activityItems : c ? c.sidebarItems().filter((e) => !!e.icon).filter((e) => !(l() && e.sidebar?.hiddenOnMobile)).map((e) => ({
     id: e.id,
     icon: e.icon,
     label: e.name,
     badge: e.sidebar?.badge,
     collapseBehavior: e.sidebar?.collapseBehavior ?? (e.sidebar?.fullScreen ? "preserve" : "toggle")
-  })) : []), Z = I(() => b() ? [] : r.sidebarContent ? [] : s ? s.sidebarItems().filter((e) => !(c() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
+  })) : []), ae = I(() => u() ? [] : i.sidebarContent ? [] : c ? c.sidebarItems().filter((e) => !(l() && e.sidebar?.hiddenOnMobile)).filter((e) => e.sidebar?.fullScreen !== !0 && e.sidebar?.renderIn !== "main").map((e) => ({
     id: e.id,
-    render: () => a(L, {
+    render: () => o(W, {
       get component() {
         return e.component;
       }
     })
-  })) : []), _ = (e) => {
-    if (!b()) {
-      if (r.sidebarContent) return r.sidebarContent(e);
-      if (s)
-        return a(pe, {
+  })) : []), Q = (e) => {
+    if (!u()) {
+      if (i.sidebarContent) return i.sidebarContent(e);
+      if (c)
+        return o(Ee, {
           get views() {
-            return Z();
+            return ae();
           },
           activeId: e
         });
     }
-  }, W = I(() => b() ? !0 : s ? s.getComponent(i.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), ee = I(() => {
-    if (b()) return !0;
-    if (!s) return !1;
-    const e = s.getComponent(i.sidebarActiveTab());
+  }, E = I(() => u() ? !0 : c ? c.getComponent(r.sidebarActiveTab())?.sidebar?.fullScreen ?? !1 : !1), le = I(() => {
+    if (u()) return !0;
+    if (!c) return !1;
+    const e = c.getComponent(r.sidebarActiveTab());
     return e?.sidebar ? e.sidebar.fullScreen === !0 || e.sidebar.renderIn === "main" : !1;
   });
-  w(() => {
-    c() && W() && S(!1);
+  C(() => {
+    l() && E() && h(!1);
   });
-  const te = I(() => {
-    if (r.bottomBarItems) return r.bottomBarItems;
-    if (!s) return;
-    const e = [...s.statusBarItems()].sort((n, u) => (n.order ?? 100) - (u.order ?? 100)), o = e.filter((n) => n.position === "left"), l = e.filter((n) => n.position === "right");
+  const se = I(() => {
+    if (i.bottomBarItems) return i.bottomBarItems;
+    if (!c) return;
+    const e = [...c.statusBarItems()].sort((n, b) => (n.order ?? 100) - (b.order ?? 100)), a = e.filter((n) => n.position === "left"), s = e.filter((n) => n.position === "right");
     return [(() => {
-      var n = G();
-      return d(n, a(H, {
-        each: o,
-        children: (u) => a(L, {
+      var n = ee();
+      return d(n, o(_, {
+        each: a,
+        children: (b) => o(W, {
           get component() {
-            return u.component;
+            return b.component;
           }
         })
       })), n;
     })(), (() => {
-      var n = G();
-      return d(n, a(H, {
-        each: l,
-        children: (u) => a(L, {
+      var n = ee();
+      return d(n, o(_, {
+        each: s,
+        children: (b) => o(W, {
           get component() {
-            return u.component;
+            return b.component;
           }
         })
       })), n;
     })()];
   });
-  w(() => {
+  C(() => {
     const e = A();
     if (!e.length) return;
-    if (!i.sidebarActiveTab()) {
-      const l = e.find((n) => !n.onClick);
-      if (!l) return;
-      O(l.id);
+    if (!r.sidebarActiveTab()) {
+      const s = e.find((n) => !n.onClick);
+      if (!s) return;
+      L(s.id);
     }
   });
-  const q = (e) => {
-    const o = b() ? !0 : s?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
-      nextActiveId: l,
+  const U = (e) => {
+    const a = u() ? !0 : c?.getComponent(e)?.sidebar?.fullScreen ?? !1, {
+      nextActiveId: s,
       nextMobileSidebarOpen: n
-    } = Ne({
+    } = Ve({
       clickedId: e,
-      activeId: i.sidebarActiveTab(),
+      activeId: r.sidebarActiveTab(),
       mobileSidebarOpen: T(),
-      clickedIsFullScreen: o
+      clickedIsFullScreen: a
     });
-    if (i.sidebarActiveTab() !== l) {
-      if (r.activitySelectionMode === "ui-first") {
-        N.request(l, {
+    if (r.sidebarActiveTab() !== s) {
+      if (i.activitySelectionMode === "ui-first") {
+        z.request(s, {
           source: "mobile-tab-bar",
           mobileSidebarOpen: n
         });
         return;
       }
-      O(l);
+      L(s);
     }
-    S(n);
-  }, re = (e) => {
+    h(n);
+  }, de = (e) => {
     if (e.onClick) {
-      we(() => e.onClick());
+      Pe(() => e.onClick());
       return;
     }
-    q(e.id);
-  }, ie = I(() => {
-    const e = r.topBarActions;
-    if (!c() || (r.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
-    const l = r.activityBottomItems ?? [];
-    return l.length ? [a(H, {
-      each: l,
-      children: (n) => a(Be, {
+    U(e.id);
+  }, ce = I(() => {
+    const e = i.topBarActions;
+    if (!l() || (i.activityBottomItemsMobileMode ?? "hidden") !== "topBar") return e;
+    const s = i.activityBottomItems ?? [];
+    return s.length ? [o(_, {
+      each: s,
+      children: (n) => o(ze, {
         get label() {
           return n.label;
         },
-        onClick: () => re(n),
+        onClick: () => de(n),
         get children() {
-          return a(L, {
+          return o(W, {
             get component() {
               return n.icon;
             },
@@ -195,18 +202,18 @@ function at(r) {
         }
       })
     }), e] : e;
-  }), ne = () => b() ? !0 : i.sidebarCollapsed(), oe = () => E() ?? i.sidebarWidth(), v = () => V.config.accessibility, ae = () => {
-    P(i.sidebarWidth());
-  }, le = (e) => {
-    P((o) => i.clampSidebarWidth((o ?? i.sidebarWidth()) + e));
-  }, se = () => {
-    const e = E();
-    e !== null && (i.setSidebarWidth(e), P(null));
+  }), be = () => u() ? !0 : r.sidebarCollapsed(), ue = () => K() ?? r.sidebarWidth(), v = () => q.config.accessibility, me = () => {
+    H(r.sidebarWidth());
+  }, fe = (e) => {
+    H((a) => r.clampSidebarWidth((a ?? r.sidebarWidth()) + e));
+  }, ve = () => {
+    const e = K();
+    e !== null && (r.setSidebarWidth(e), H(null));
   };
-  ye({
-    open: () => c() && T() && !b(),
-    root: () => R,
-    onClose: () => S(!1),
+  xe({
+    open: () => l() && T() && !u(),
+    root: () => V,
+    onClose: () => h(!1),
     lockBodyScroll: !0,
     trapFocus: !0,
     closeOnEscape: !0,
@@ -216,7 +223,7 @@ function at(r) {
     autoFocus: !1,
     restoreFocus: !0
   });
-  const de = () => {
+  const ge = () => {
     if (typeof document > "u") return;
     const e = document.getElementById(v().mainContentId);
     if (!(!e || !(e instanceof HTMLElement)))
@@ -226,195 +233,221 @@ function at(r) {
       }
   };
   return (() => {
-    var e = Fe(), o = e.firstChild, l = o.nextSibling, n = l.firstChild, u = n.firstChild;
-    return o.$$click = () => de(), d(o, () => v().skipLinkLabel), d(e, a(Ae, {
-      get logo() {
-        return r.logo;
-      },
-      get actions() {
-        return ie();
-      },
-      get ariaLabel() {
-        return v().topBarLabel;
+    var e = je(), a = e.firstChild, s = a.nextSibling, n = s.firstChild, b = n.firstChild, $ = b.firstChild;
+    return a.$$click = () => ge(), d(a, () => v().skipLinkLabel), d(e, o(g, {
+      get when() {
+        return !l() || i.topBarMobileMode !== "hidden";
       },
-      get class() {
-        return r.slotClassNames?.topBar;
+      get children() {
+        return o(Le, {
+          get logo() {
+            return i.logo;
+          },
+          get actions() {
+            return ce();
+          },
+          get ariaLabel() {
+            return v().topBarLabel;
+          },
+          get class() {
+            return i.slotClassNames?.topBar;
+          }
+        });
       }
-    }), l), d(l, a(g, {
+    }), s), d(n, o(g, {
       get when() {
-        return !c();
+        return !l();
       },
       get children() {
-        return [a(g, {
+        return [o(g, {
           get when() {
             return A().length > 0;
           },
           get children() {
-            return a(Te, {
+            return o(Fe, {
               get items() {
                 return A();
               },
               get bottomItems() {
-                return r.activityBottomItems;
+                return i.activityBottomItems;
               },
               get activeId() {
-                return p();
+                return R();
               },
-              onActiveChange: Y,
+              onActiveChange: oe,
               get collapsed() {
-                return ne();
+                return be();
               },
               get onCollapsedChange() {
-                return x(() => !!b())() ? void 0 : i.setSidebarCollapsed;
+                return w(() => !!u())() ? void 0 : r.setSidebarCollapsed;
               },
               get ariaLabel() {
                 return v().primaryNavigationLabel;
               },
               get class() {
-                return r.slotClassNames?.activityBar;
+                return i.slotClassNames?.activityBar;
               }
             });
           }
-        }), a(g, {
+        }), o(g, {
           get when() {
-            return !b();
+            return !u();
           },
           get children() {
-            return a(Me, {
+            return o(Oe, {
               get width() {
-                return oe();
+                return ue();
               },
               get collapsed() {
-                return i.sidebarCollapsed() || W();
+                return r.sidebarCollapsed() || E();
               },
               get visibilityMotion() {
-                return i.sidebarVisibilityMotion();
+                return r.sidebarVisibilityMotion();
               },
               get ariaLabel() {
                 return v().sidebarLabel;
               },
               get resizer() {
-                return a(j, {
+                return o(Z, {
                   direction: "horizontal",
-                  onResize: le,
-                  onResizeStart: ae,
-                  onResizeEnd: se
+                  onResize: fe,
+                  onResizeStart: me,
+                  onResizeEnd: ve
                 });
               },
               get class() {
-                return r.slotClassNames?.sidebar;
+                return i.slotClassNames?.sidebar;
               },
               get children() {
-                return _(i.sidebarActiveTab());
+                return Q(r.sidebarActiveTab());
               }
             });
           }
         })];
       }
-    }), n), d(l, a(g, {
+    }), b), d(n, o(g, {
       get when() {
-        return x(() => !!(c() && T()))() && !b();
+        return w(() => !!(l() && T()))() && !u();
       },
       get children() {
         return [(() => {
-          var t = ze();
-          return t.$$click = () => S(!1), $(() => y(t, C("absolute inset-0 z-40 bg-black/30 cursor-pointer", r.slotClassNames?.mobileSidebarBackdrop))), t;
+          var t = De();
+          return t.$$click = () => h(!1), N(() => y(t, M("absolute inset-0 z-40 bg-black/30 cursor-pointer", i.slotClassNames?.mobileSidebarBackdrop))), t;
         })(), (() => {
-          var t = Pe(), m = t.firstChild, h = R;
-          return typeof h == "function" ? ce(h, t) : R = t, d(m, () => _(i.sidebarActiveTab())), $((f) => {
-            var B = C("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200", r.slotClassNames?.mobileSidebarDrawer), k = v().sidebarLabel;
-            return B !== f.e && y(t, f.e = B), k !== f.t && z(t, "aria-label", f.t = k), f;
+          var t = Ke(), m = t.firstChild, S = V;
+          return typeof S == "function" ? Se(S, t) : V = t, d(m, () => Q(r.sidebarActiveTab())), N((f) => {
+            var k = M("absolute left-0 top-0 bottom-0 z-50", "w-72 max-w-[80vw]", "bg-sidebar border-r border-sidebar-border", "shadow-xl", "animate-in slide-in-from-left duration-200", i.slotClassNames?.mobileSidebarDrawer), x = v().sidebarLabel;
+            return k !== f.e && y(t, f.e = k), x !== f.t && P(t, "aria-label", f.t = x), f;
           }, {
             e: void 0,
             t: void 0
           }), t;
         })()];
       }
-    }), n), d(u, () => r.children), d(n, a(g, {
+    }), b), d($, () => i.children), d(b, o(g, {
       get when() {
-        return x(() => !!(!c() && i.terminalOpened()))() && r.terminalPanel;
+        return w(() => !!(!l() && r.terminalOpened()))() && i.terminalPanel;
       },
       get children() {
-        var t = Re();
-        return d(t, a(j, {
+        var t = Qe();
+        return d(t, o(Z, {
           direction: "vertical",
-          onResize: (m) => i.setTerminalHeight(i.terminalHeight() - m)
-        }), null), d(t, () => r.terminalPanel, null), $((m) => {
-          var h = C("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", r.slotClassNames?.terminalPanel), f = `${i.terminalHeight()}px`;
-          return h !== m.e && y(t, m.e = h), f !== m.t && U(t, "height", m.t = f), m;
+          onResize: (m) => r.setTerminalHeight(r.terminalHeight() - m)
+        }), null), d(t, () => i.terminalPanel, null), N((m) => {
+          var S = M("relative shrink-0 border-t border-border bg-terminal-background overflow-hidden", i.slotClassNames?.terminalPanel), f = `${r.terminalHeight()}px`;
+          return S !== m.e && y(t, m.e = S), f !== m.t && Y(t, "height", m.t = f), m;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), d(e, a(g, {
+    }), null), d(s, o(g, {
       get when() {
-        return x(() => !!c())() && r.mobileAccessory;
+        return w(() => !!l())() && i.mobileAccessory;
       },
       get children() {
-        var t = We();
-        return d(t, () => r.mobileAccessory), t;
+        var t = Ue();
+        return d(t, () => i.mobileAccessory), N(() => t.inert = O()), t;
       }
-    }), null), d(e, a(g, {
+    }), null), d(s, o(g, {
       get when() {
-        return !c();
+        return w(() => !!l())() && i.mobileNavigationPanel;
       },
       get children() {
-        return a(ke, {
+        return o(We, he(() => i.mobileNavigationPanel, {
+          navigation: () => D,
+          onPresenceChange: (t) => {
+            re(t), i.mobileNavigationPanel?.onPresenceChange?.(t);
+          }
+        }));
+      }
+    }), null), d(e, o(g, {
+      get when() {
+        return !l();
+      },
+      get children() {
+        return o(Re, {
           get class() {
-            return r.slotClassNames?.bottomBar;
+            return i.slotClassNames?.bottomBar;
           },
           get height() {
-            return r.slotClassNames?.bottomBarHeight;
+            return i.slotClassNames?.bottomBarHeight;
           },
           get children() {
-            return te();
+            return se();
           }
         });
       }
-    }), null), d(e, a(g, {
+    }), null), d(e, o(g, {
       get when() {
-        return x(() => !!c())() && A().length > 0;
+        return w(() => !!l())() && (A().length > 0 || i.mobileNavigationActions?.length);
       },
       get children() {
-        return a(xe, {
+        return o($e, {
+          ref: (t) => {
+            D = t;
+          },
+          get actions() {
+            return i.mobileNavigationActions;
+          },
           get hidden() {
-            return !!(r.hideMobileNavigationWhenKeyboardOpen && J());
+            return !!(i.hideMobileNavigationWhenKeyboardOpen && te() && !O());
           },
           get items() {
             return A();
           },
           get activeId() {
-            return Oe({
-              activeId: p(),
-              mobileSidebarOpen: N.pending() ? !0 : T(),
-              activeIsFullScreen: s?.getComponent(p())?.sidebar?.fullScreen ?? W(),
+            return He({
+              activeId: R(),
+              mobileSidebarOpen: z.pending() ? !0 : T(),
+              activeIsFullScreen: c?.getComponent(R())?.sidebar?.fullScreen ?? E(),
               activeIsPage: (() => {
-                const t = s?.getComponent(p())?.sidebar;
-                return t ? t.fullScreen === !0 || t.renderIn === "main" : ee();
+                const t = c?.getComponent(R())?.sidebar;
+                return t ? t.fullScreen === !0 || t.renderIn === "main" : le();
               })()
             });
           },
-          onSelect: q,
+          onSelect: U,
           get ariaLabel() {
             return v().mobileNavigationLabel;
           },
           get class() {
-            return r.slotClassNames?.mobileTabBar;
+            return i.slotClassNames?.mobileTabBar;
           }
         });
       }
-    }), null), $((t) => {
-      var m = r.fillParent ? "100%" : void 0, h = C(
+    }), null), N((t) => {
+      var m = i.fillParent ? "100%" : void 0, S = M(
         // Use dvh when supported to avoid mobile browser UI causing layout jumps.
         "h-screen h-[100dvh] w-full flex flex-col overflow-hidden",
         "bg-background text-foreground",
         // Prevent overscroll on the shell container
         "overscroll-none",
-        r.slotClassNames?.root,
-        r.class
-      ), f = `#${v().mainContentId}`, B = C("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), k = C("flex-1 min-w-0 flex flex-col overflow-hidden", r.slotClassNames?.contentArea), D = C("flex-1 min-h-0 overflow-auto overscroll-contain", r.slotClassNames?.main), K = v().mainContentId, Q = v().mainLabel;
-      return m !== t.e && U(e, "height", t.e = m), h !== t.t && y(e, t.t = h), f !== t.a && z(o, "href", t.a = f), B !== t.o && y(o, t.o = B), k !== t.i && y(n, t.i = k), D !== t.n && y(u, t.n = D), K !== t.s && z(u, "id", t.s = K), Q !== t.h && z(u, "aria-label", t.h = Q), t;
+        l() && i.topBarMobileMode === "hidden" && "safe-top",
+        i.slotClassNames?.root,
+        i.class
+      ), f = `#${v().mainContentId}`, k = M("fixed left-3 top-3 z-[120] rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground shadow-md", "transition-transform duration-150 motion-reduce:transition-none", "-translate-y-[200%] focus:translate-y-0"), x = O(), j = O() ? "true" : void 0, p = M("flex-1 min-w-0 flex flex-col overflow-hidden", i.slotClassNames?.contentArea), G = M("flex-1 min-h-0 overflow-auto overscroll-contain", i.slotClassNames?.main), J = v().mainContentId, X = v().mainLabel;
+      return m !== t.e && Y(e, "height", t.e = m), S !== t.t && y(e, t.t = S), f !== t.a && P(a, "href", t.a = f), k !== t.o && y(a, t.o = k), x !== t.i && (n.inert = t.i = x), j !== t.n && P(n, "aria-hidden", t.n = j), p !== t.s && y(b, t.s = p), G !== t.h && y($, t.h = G), J !== t.r && P($, "id", t.r = J), X !== t.d && P($, "aria-label", t.d = X), t;
     }, {
       e: void 0,
       t: void 0,
@@ -423,11 +456,13 @@ function at(r) {
       i: void 0,
       n: void 0,
       s: void 0,
-      h: void 0
+      h: void 0,
+      r: void 0,
+      d: void 0
     }), e;
   })();
 }
-be(["click"]);
+ye(["click"]);
 export {
-  at as Shell
+  gt as Shell
 };