@ramme-io/ui 4.1.0 → 4.1.1

package/dist/components/layout/DetailDrawer.js

@@ -1,56 +1,55 @@
 import { jsxs as b, jsx as r, Fragment as k } from "react/jsx-runtime";
-import { useRef as E, useEffect as c } from "react";
-import { createPortal as D } from "react-dom";
-import { Icon as L } from "../ui/Icon.js";
+import { useRef as E, useEffect as y } from "react";
+import { createPortal as L } from "react-dom";
+import { Icon as D } from "../ui/Icon.js";
 import { cn as h } from "../../utils/cn.js";
-const S = ({
-  isOpen: o,
+import { useBodyScrollLock as M } from "../../lib/hooks/useBodyScrollLock.js";
+const B = ({
+  isOpen: t,
   onClose: n,
-  children: g,
-  variant: s = "overlay",
-  resizable: u = !1,
-  width: p = 420,
+  children: p,
+  variant: u = "overlay",
+  resizable: d = !1,
+  width: g = 420,
   onWidthChange: a,
-  minWidth: m = 320,
-  maxWidth: f = typeof window < "u" ? window.innerWidth * 0.6 : 800,
-  side: t = "right"
+  minWidth: c = 320,
+  maxWidth: m = typeof window < "u" ? window.innerWidth * 0.6 : 800,
+  side: o = "right"
 }) => {
   const i = E(!1);
-  if (c(() => {
-    if (!u || !a) return;
-    const e = (y) => {
+  if (y(() => {
+    if (!d || !a) return;
+    const e = (v) => {
       if (!i.current) return;
-      const x = t === "right" ? window.innerWidth - y.clientX : y.clientX;
-      a(Math.max(m, Math.min(f, x)));
-    }, d = () => {
+      const x = o === "right" ? window.innerWidth - v.clientX : v.clientX;
+      a(Math.max(c, Math.min(m, x)));
+    }, s = () => {
       i.current && (i.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
     };
-    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", d), () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", d);
+    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", s), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", s);
     };
-  }, [u, a, m, f, t]), c(() => {
-    const e = (d) => {
-      d.key === "Escape" && o && n();
+  }, [d, a, c, m, o]), y(() => {
+    const e = (s) => {
+      s.key === "Escape" && t && n();
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [o, n]), c(() => (o && s === "overlay" ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [o, s]), !o) return null;
-  const l = s === "overlay", w = t === "right" ? "right-0 border-l" : "left-0 border-r", v = /* @__PURE__ */ b(
+  }, [t, n]), M(t && u === "overlay"), !t) return null;
+  const l = u === "overlay", f = o === "right" ? "right-0 border-l" : "left-0 border-r", w = /* @__PURE__ */ b(
     "div",
     {
       className: h(
         "flex flex-col border-border bg-card shadow-2xl transition-transform duration-300",
-        l ? `fixed inset-y-0 ${w} z-drawer w-full sm:w-[420px] animate-in ${t === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${w}`
+        l ? `fixed inset-y-0 ${f} z-drawer w-full sm:w-[420px] animate-in ${o === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${f}`
       ),
-      style: l ? void 0 : { width: `min(100vw, ${p}px)` },
+      style: l ? void 0 : { width: `min(100vw, ${g}px)` },
       children: [
-        u && !l && /* @__PURE__ */ r(
+        d && !l && /* @__PURE__ */ r(
           "div",
           {
             className: h(
               "absolute top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/50 active:bg-primary z-10",
-              t === "right" ? "left-0 -ml-0.5" : "right-0 -mr-0.5"
+              o === "right" ? "left-0 -ml-0.5" : "right-0 -mr-0.5"
             ),
             onMouseDown: (e) => {
               e.preventDefault(), i.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
@@ -63,14 +62,14 @@ const S = ({
             onClick: n,
             className: "rounded-full p-1.5 bg-background/50 backdrop-blur hover:bg-muted text-muted-foreground hover:text-foreground transition-all shadow-sm border border-border",
             "aria-label": "Close",
-            children: /* @__PURE__ */ r(L, { name: "x", size: 16 })
+            children: /* @__PURE__ */ r(D, { name: "x", size: 16 })
           }
         ) }),
-        /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: g })
+        /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: p })
       ]
     }
   );
-  return l ? typeof document > "u" ? null : D(
+  return l ? typeof document > "u" ? null : L(
     /* @__PURE__ */ b(k, { children: [
       /* @__PURE__ */ r(
         "div",
@@ -79,11 +78,11 @@ const S = ({
           onClick: n
         }
       ),
-      v
+      w
     ] }),
     document.body
-  ) : v;
+  ) : w;
 };
 export {
-  S as DetailDrawer
+  B as DetailDrawer
 };

package/dist/components/layout/SettingsContainer.js

@@ -3,22 +3,32 @@ import { Tabs as b, TabPanel as l } from "../navigation/Tabs.js";
 import { cn as c } from "../../utils/cn.js";
 import { AboutRamme as s } from "./AboutRamme.js";
 const p = ({
-  generalSlot: r,
-  aiGatewaySlot: i,
+  generalSlot: i,
+  aiGatewaySlot: r,
   themeLabSlot: n,
-  aboutSlot: o = /* @__PURE__ */ e(s, {}),
-  defaultTab: m = "general",
+  aboutSlot: d = /* @__PURE__ */ e(s, {}),
+  defaultTab: o = "general",
   title: a = "Settings",
-  className: d
-}) => /* @__PURE__ */ t("div", { className: c("w-full p-4 md:p-6", d), children: [
-  a !== null && /* @__PURE__ */ e("h2", { className: "text-2xl font-bold tracking-tight text-foreground mb-4", children: a }),
-  /* @__PURE__ */ t(b, { defaultActiveTab: m, size: "sm", children: [
-    /* @__PURE__ */ e(l, { id: "general", label: "General", children: r }),
-    /* @__PURE__ */ e(l, { id: "ai-gateway", label: "AI Gateway", children: i }),
-    /* @__PURE__ */ e(l, { id: "theme-lab", label: "Theme Lab", children: n }),
-    /* @__PURE__ */ e(l, { id: "about", label: "About", children: o })
+  className: m
+}) => (
+  /* @container so the padding answers to the space this panel was GIVEN,
+         not the size of the screen it happens to be on.
+  
+         No horizontal padding when narrow. Nested in a Sheet or a drawer, the
+         host already supplies the gutter, and adding a second one is how the
+         Theme Studio lost 21% of a 390px screen to three stacked insets before a
+         single label was drawn. Vertical padding is kept: it separates, it does
+         not compete. */
+  /* @__PURE__ */ t("div", { className: c("@container w-full py-fluid-md px-0 @md:p-fluid-lg", m), children: [
+    a !== null && /* @__PURE__ */ e("h2", { className: "text-2xl font-bold tracking-tight text-foreground mb-4", children: a }),
+    /* @__PURE__ */ t(b, { defaultActiveTab: o, size: "sm", children: [
+      /* @__PURE__ */ e(l, { id: "general", label: "General", children: i }),
+      /* @__PURE__ */ e(l, { id: "ai-gateway", label: "AI Gateway", children: r }),
+      /* @__PURE__ */ e(l, { id: "theme-lab", label: "Theme Lab", children: n }),
+      /* @__PURE__ */ e(l, { id: "about", label: "About", children: d })
+    ] })
   ] })
-] });
+);
 export {
   p as SettingsContainer
 };

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

@@ -0,0 +1,58 @@
+import React from 'react';
+/**
+ * @wizard
+ * @name Sheet
+ * @description A bottom sheet that opens at a partial height and grows to full screen as you drag or scroll it up. Strategic purpose: the native-feeling surface for mobile navigation, settings and pickers — reachable by thumb, dismissed by flicking down. Use instead of Drawer when the surface is primarily touched.
+ * @tags layout, overlay, sheet, mobile, touch, drawer, ui
+ * @category layout
+ * @id sheet
+ * @param {boolean} isOpen - Controls the open/closed state. Required.
+ * @param {function} onClose - Fired when the sheet requests dismissal (flick down, drag below the smallest detent, Escape, overlay tap, or the close button). Required.
+ * @param {number[]} detents - Resting heights as fractions of the viewport, ascending. Defaults to [0.6, 1] — opens at 60%, expands to full.
+ * @param {number} initialDetent - Index into detents to open at. Defaults to 0.
+ * @param {string} title - Optional title in the sticky header, beside the close button.
+ * @param {ReactNode} footer - Optional sticky footer, kept clear of the home indicator.
+ * @param {boolean} overlayDismiss - Tap the dimmed backdrop to close. Defaults to true.
+ * @param {string} className - Extra classes for the sheet panel.
+ */
+export interface SheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    detents?: number[];
+    initialDetent?: number;
+    title?: string;
+    footer?: React.ReactNode;
+    overlayDismiss?: boolean;
+    className?: string;
+}
+/**
+ * WHY THIS EXISTS ALONGSIDE Drawer
+ *
+ * `Drawer` already slides in from any edge, including the bottom, and it is
+ * used in 18 places across five products. It is a *static* panel: it animates
+ * to one size and stays there. The sheet pattern is a different interaction —
+ * detents, a drag that tracks your finger, and a body whose scroll is coupled
+ * to the sheet's height — and bolting that onto Drawer would put a gesture
+ * state machine into a component whose other three positions can never use it,
+ * destabilising every existing call site for a behaviour only `bottom` has.
+ *
+ * So Drawer stays as it is. Reach for Sheet when the surface is primarily
+ * touched; reach for Drawer when it is a desktop side panel.
+ *
+ * ZERO JANK
+ *
+ * - Height is driven by `transform: translateY`, never by animating `height`,
+ *   so no frame triggers layout (rule 3). The panel is laid out at full
+ *   viewport height once and slid down to reveal only the part in use.
+ * - `100dvh`, never `vh` (rule 5) — a sheet measured against `vh` is wrong by
+ *   the height of the toolbar on every mobile browser that retracts one.
+ * - The transition is dropped entirely while a finger is down, so the sheet
+ *   tracks the pointer exactly instead of lagging behind it by the duration.
+ * - `prefers-reduced-motion` disables the drag and the animation; the sheet
+ *   opens at its largest detent and closes, which is the same functionality
+ *   without the movement (rule 4).
+ * - Safe-area insets are honoured so the footer clears the home indicator.
+ */
+export declare const Sheet: React.FC<SheetProps>;
+export default Sheet;

package/dist/components/layout/Sheet.js

@@ -0,0 +1,144 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { useState as m, useRef as E, useEffect as w, useCallback as S } from "react";
+import { createPortal as j } from "react-dom";
+import { Icon as A } from "../ui/Icon.js";
+import { cn as x } from "../../utils/cn.js";
+import { useBodyScrollLock as R } from "../../lib/hooks/useBodyScrollLock.js";
+import { useSheetGesture as B } from "../../lib/hooks/useSheetGesture.js";
+const G = ({
+  isOpen: o,
+  onClose: r,
+  children: y,
+  detents: v = [0.6, 1],
+  initialDetent: f = 0,
+  title: s,
+  footer: h,
+  overlayDismiss: k = !0,
+  className: N
+}) => {
+  const [d, b] = m(!1), [g, p] = m(!1), D = E(null), [l] = m(
+    () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ), i = [...v].sort((n, a) => n - a), t = B({
+    detents: i,
+    // Under reduced motion there is no drag, so a partial height would be a
+    // height the reader can never change. Open fully instead.
+    initialDetent: l ? i.length - 1 : f,
+    onDismiss: r,
+    reducedMotion: l
+  });
+  R(o), w(() => {
+    let n, a;
+    return o ? (b(!0), t.setHeight(i[l ? i.length - 1 : f] ?? i[0]), n = requestAnimationFrame(() => {
+      a = window.setTimeout(() => p(!0), 10);
+    })) : (p(!1), a = window.setTimeout(() => b(!1), 320)), () => {
+      cancelAnimationFrame(n), clearTimeout(a);
+    };
+  }, [o]);
+  const c = S(
+    (n) => {
+      n.key === "Escape" && o && r();
+    },
+    [o, r]
+  );
+  if (w(() => {
+    if (d)
+      return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
+  }, [d, c]), !d) return null;
+  const P = g ? 1 - t.height : 1;
+  return j(
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: x(
+          "fixed inset-0 z-drawer",
+          "transition-opacity duration-300 ease-out",
+          g ? "opacity-100" : "opacity-0"
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50",
+              onClick: k ? r : void 0,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              ref: D,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": s ?? "Sheet",
+              style: {
+                transform: `translateY(${P * 100}%)`,
+                // Laid out at full height and slid down; only transform animates.
+                height: "100dvh",
+                paddingBottom: "env(safe-area-inset-bottom)"
+              },
+              className: x(
+                "absolute inset-x-0 bottom-0 flex flex-col",
+                "bg-card text-foreground border-t border-border shadow-xl",
+                // The corners round while the sheet is partial and square off once it
+                // owns the whole screen — the cue that tells you it is fully open.
+                t.expanded ? "rounded-t-none" : "rounded-t-2xl",
+                // No transition while dragging: the sheet must sit exactly under the
+                // finger, not chase it.
+                t.dragging ? "transition-none" : "transition-transform duration-300 ease-out",
+                "motion-reduce:transition-none",
+                N
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    onPointerDown: t.onPointerDown,
+                    style: { touchAction: "none" },
+                    className: "flex h-11 w-full shrink-0 cursor-grab items-center justify-center active:cursor-grabbing",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ e("div", { className: "h-1 w-10 rounded-full bg-muted-foreground/40" })
+                  }
+                ),
+                /* @__PURE__ */ u(
+                  "div",
+                  {
+                    onPointerDown: t.onPointerDown,
+                    style: { touchAction: "none" },
+                    className: "flex shrink-0 items-center justify-between gap-3 px-4 pb-3",
+                    children: [
+                      s ? /* @__PURE__ */ e("h2", { className: "text-lg font-semibold leading-tight", children: s }) : /* @__PURE__ */ e("span", {}),
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: r,
+                          "aria-label": "Close",
+                          className: "-mr-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground",
+                          children: /* @__PURE__ */ e(A, { name: "x", size: 22 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    onPointerDown: t.onBodyPointerDown,
+                    className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4",
+                    children: y
+                  }
+                ),
+                h && /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-border bg-card px-4 py-3", children: h })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+export {
+  G as Sheet,
+  G as default
+};

package/dist/components/navigation/MobileNav.d.ts

@@ -24,11 +24,50 @@ export interface MobileNavProps {
     drawerFooter?: React.ReactNode;
     /** Additional CSS classes on the root bar. */
     className?: string;
+    /**
+     * How navigation is presented.
+     *
+     * - `'bar'` (default) — the fixed bottom tab bar, with a "More" drawer for
+     *   `secondaryItems`.
+     * - `'sheet'` — no fixed bar at all. Every destination (tabs AND
+     *   secondaryItems) lives in a `Sheet`, which the host opens via `isOpen`.
+     *   Use this when the app already has a top header to hang a trigger from:
+     *   a persistent bottom bar stacks directly on top of a mobile browser's
+     *   own toolbar, and the two together eat ~120px of a phone screen before
+     *   any content is drawn.
+     *
+     *   `Sheet`, not `Drawer` — this surface is thumb-driven, which is the line
+     *   Sheet's own docs draw between the two. It opens at 60% and grows to
+     *   full as you drag or scroll it up, keeping the page visible behind it so
+     *   the menu reads as a layer over where you are rather than a departure
+     *   from it. ramme-marketing's AppHeader uses the same component the same
+     *   way; this is that pattern, with the item rendering shared rather than
+     *   hand-rolled per app.
+     */
+    variant?: 'bar' | 'sheet';
+    /**
+     * Controlled drawer state. Required for `'sheet'`, which has no trigger of
+     * its own. Ignored by `'bar'`, whose "More" button owns its own state.
+     */
+    isOpen?: boolean;
+    /** Fired when the sheet wants to close (backdrop, Escape, item tapped). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Extra content rendered inside the panel body, after the destinations and
+     * scrolling with them.
+     *
+     * The mirror of `drawerHeader` at the other end, and deliberately NOT
+     * `drawerFooter`: that one maps to the surface's sticky footer, pinned above
+     * the home indicator and always visible. Use this for content that belongs
+     * *with* the list rather than under it — a control that the header hides at
+     * narrow widths and would otherwise be unreachable, say.
+     */
+    children?: React.ReactNode;
 }
 /**
  * @wizard
  * @name MobileNav
- * @description A fixed bottom tab bar for mobile screens, providing native-feeling navigation with primary icon+label tabs and a "More" drawer for secondary links. Hidden on md: and up via Tailwind. Designed as the mobile counterpart to the desktop Sidebar.
+ * @description Mobile navigation, in two shapes. 'bar' is a fixed bottom tab bar with icon+label tabs and a "More" drawer for secondary links. 'sheet' drops the bar entirely and puts every destination in a bottom drawer the host opens from its own trigger — the right choice when a mobile browser's toolbar already owns the bottom edge. Hidden on md: and up via Tailwind. The mobile counterpart to the desktop Sidebar.
  * @tags navigation, mobile, bottom-bar, shell, ui
  * @category navigation
  * @id mobile-nav
@@ -40,5 +79,9 @@ export interface MobileNavProps {
  * @param {ReactNode} drawerHeader - Optional slot rendered at the top of the drawer body.
  * @param {ReactNode} drawerFooter - Optional slot rendered in the sticky drawer footer (e.g. Logout button).
  * @param {string} className - Additional CSS classes on the root nav bar.
+ * @param {string} variant - 'bar' (default) renders the fixed bottom tab bar with a "More" Drawer. 'sheet' renders no bar at all and puts every destination in a Sheet — opening at 60% and growing to full as you drag or scroll it up — which the host opens itself — use it when a top header can hold the trigger, since a fixed bar and a mobile browser's own toolbar stack into ~120px of lost screen.
+ * @param {boolean} isOpen - Controlled drawer state. Required by 'sheet', which has no trigger of its own; ignored by 'bar'.
+ * @param {function} onOpenChange - Fired when the sheet wants to close (backdrop, Escape, or an item tapped).
+ * @param {ReactNode} children - Extra content rendered in the panel body after the destinations, scrolling with them. The mirror of drawerHeader; use it instead of drawerFooter when the content belongs with the list rather than pinned under it.
  */
 export declare const MobileNav: React.FC<MobileNavProps>;

package/dist/components/navigation/MobileNav.js

@@ -1,98 +1,126 @@
-import { jsxs as l, Fragment as g, jsx as r } from "react/jsx-runtime";
-import { useState as w, useCallback as f } from "react";
-import { cn as c } from "../../utils/cn.js";
-import { Icon as a } from "../ui/Icon.js";
-import { Drawer as y } from "../layout/Drawer.js";
-const C = ({ tab: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
+import { jsxs as i, Fragment as w, jsx as r } from "react/jsx-runtime";
+import { useState as S, useCallback as p } from "react";
+import { cn as m } from "../../utils/cn.js";
+import { Icon as u } from "../ui/Icon.js";
+import { Drawer as z } from "../layout/Drawer.js";
+import { Sheet as B } from "../layout/Sheet.js";
+const v = ({ tab: t, isActive: s, onTap: o }) => /* @__PURE__ */ i(
   "button",
   {
-    onClick: s,
-    className: c(
+    onClick: o,
+    className: m(
       "flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 transition-colors duration-150",
-      o ? "text-primary" : "text-muted-foreground active:text-foreground"
+      s ? "text-primary" : "text-muted-foreground active:text-foreground"
     ),
     children: [
       /* @__PURE__ */ r(
-        a,
+        u,
         {
-          name: n.icon,
-          className: c(
+          name: t.icon,
+          className: m(
             "h-5 w-5 transition-transform duration-150",
-            o && "scale-110"
+            s && "scale-110"
           )
         }
       ),
-      /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: n.label })
+      /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: t.label })
     ]
   }
-), D = ({ item: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
+), A = ({ item: t, isActive: s, onTap: o }) => /* @__PURE__ */ i(
   "button",
   {
-    onClick: s,
-    className: c(
+    onClick: o,
+    className: m(
       "flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors duration-150",
-      o ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted active:bg-muted"
+      s ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted active:bg-muted"
     ),
     children: [
-      /* @__PURE__ */ r(a, { name: n.icon, className: "h-5 w-5 shrink-0" }),
-      /* @__PURE__ */ r("span", { className: "text-fluid-base font-medium", children: n.label })
+      /* @__PURE__ */ r(u, { name: t.icon, className: "h-5 w-5 shrink-0" }),
+      /* @__PURE__ */ r("span", { className: "text-fluid-base font-medium", children: t.label })
     ]
   }
-), z = ({
-  tabs: n,
-  secondaryItems: o = [],
-  activeTabId: s,
-  onNavigate: t,
-  drawerTitle: u = "Menu",
-  drawerHeader: m,
-  drawerFooter: x,
-  className: h
+), J = ({
+  tabs: t,
+  secondaryItems: s = [],
+  activeTabId: o,
+  onNavigate: l,
+  drawerTitle: x = "Menu",
+  drawerHeader: h,
+  drawerFooter: b,
+  className: g,
+  variant: D = "bar",
+  isOpen: j,
+  onOpenChange: a,
+  children: T
 }) => {
-  const [p, d] = w(!1), b = f(
+  const [C, I] = S(!1), n = D === "sheet", f = n ? !!j : C, c = p(
     (e) => {
-      var i;
-      (i = e.onClick) == null || i.call(e), t == null || t(e);
+      n ? a == null || a(e) : I(e);
     },
-    [t]
-  ), k = f(
+    [n, a]
+  ), k = n ? [...t, ...s] : s, M = p(
     (e) => {
-      var i;
-      (i = e.onClick) == null || i.call(e), t == null || t(e), d(!1);
+      var d;
+      (d = e.onClick) == null || d.call(e), l == null || l(e);
     },
-    [t]
+    [l]
+  ), N = p(
+    (e) => {
+      var d;
+      (d = e.onClick) == null || d.call(e), l == null || l(e), c(!1);
+    },
+    // `setIsDrawerOpen` closes over `onOpenChange`, so it belongs here. Without
+    // it, a host that memoises `onNavigate` but passes `onOpenChange` inline
+    // keeps the first render's close handler for the life of the component and
+    // the sheet stops closing on tap.
+    [l, c]
   );
-  return /* @__PURE__ */ l(g, { children: [
-    /* @__PURE__ */ r(
+  if (n && k.length === 0) return null;
+  const y = /* @__PURE__ */ i(w, { children: [
+    h && /* @__PURE__ */ r("div", { className: "mb-fluid-md pb-fluid-sm border-b border-border", children: h }),
+    /* @__PURE__ */ r("div", { className: "space-y-1", children: k.map((e) => /* @__PURE__ */ r(
+      A,
+      {
+        item: e,
+        isActive: o === e.id,
+        onTap: () => N(e)
+      },
+      e.id
+    )) }),
+    T
+  ] });
+  return /* @__PURE__ */ i(w, { children: [
+    !n && /* @__PURE__ */ r(
       "nav",
       {
-        className: c(
+        className: m(
           "fixed inset-x-0 bottom-0 z-nav md:hidden",
           "border-t border-border bg-card/95 backdrop-blur-md",
           "supports-[backdrop-filter]:bg-card/80",
           // Safe area for notched phones (iPhone etc.)
           "pb-[env(safe-area-inset-bottom,0px)]",
-          h
+          g
         ),
-        children: /* @__PURE__ */ l("div", { className: "flex items-stretch", children: [
-          n.map((e) => /* @__PURE__ */ r(
-            C,
+        children: /* @__PURE__ */ i("div", { className: "flex items-stretch", children: [
+          t.map((e) => /* @__PURE__ */ r(
+            v,
             {
               tab: e,
-              isActive: s === e.id,
-              onTap: () => b(e)
+              isActive: o === e.id,
+              onTap: () => M(e)
             },
             e.id
           )),
-          o.length > 0 && /* @__PURE__ */ l(
+          s.length > 0 && /* @__PURE__ */ i(
             "button",
             {
-              onClick: () => d(!0),
-              className: c(
+              onClick: () => c(!0),
+              className: m(
                 "flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 transition-colors duration-150",
-                p ? "text-primary" : "text-muted-foreground active:text-foreground"
+                f ? "text-primary" : "text-muted-foreground active:text-foreground"
               ),
               children: [
-                /* @__PURE__ */ r(a, { name: "menu", className: "h-5 w-5" }),
+                /* @__PURE__ */ r(u, { name: "menu", className: "h-5 w-5" }),
                 /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: "More" })
               ]
             }
@@ -100,31 +128,29 @@ const C = ({ tab: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
         ] })
       }
     ),
-    /* @__PURE__ */ l(
-      y,
+    n ? /* @__PURE__ */ r(
+      B,
       {
-        isOpen: p,
-        onClose: () => d(!1),
+        isOpen: f,
+        onClose: () => c(!1),
+        title: x,
+        footer: b,
+        children: y
+      }
+    ) : /* @__PURE__ */ r(
+      z,
+      {
+        isOpen: f,
+        onClose: () => c(!1),
         position: "bottom",
         size: "85dvh",
-        title: u,
-        footer: x,
-        children: [
-          m && /* @__PURE__ */ r("div", { className: "mb-fluid-md pb-fluid-sm border-b border-border", children: m }),
-          /* @__PURE__ */ r("div", { className: "space-y-1", children: o.map((e) => /* @__PURE__ */ r(
-            D,
-            {
-              item: e,
-              isActive: s === e.id,
-              onTap: () => k(e)
-            },
-            e.id
-          )) })
-        ]
+        title: x,
+        footer: b,
+        children: y
       }
     )
   ] });
 };
 export {
-  z as MobileNav
+  J as MobileNav
 };