laif-ds 1.0.0 → 1.0.2

package/dist/components/ui/app-bottom-nav.js

@@ -1,159 +1,154 @@
 "use client";
-import { jsx as o, jsxs as y, Fragment as T } from "react/jsx-runtime";
-import * as F from "react";
-import { designTokens as u } from "../design-tokens.js";
-import { Icon as K } from "./icon.js";
-import { useSidebar as R } from "./sidebar.js";
-import { cn as i } from "../../lib/utils.js";
-const I = 6, w = /* @__PURE__ */ new Set(), c = (t) => {
-  w.has(t) || (w.add(t), console.warn(t));
-}, $ = (t) => `${t.url} ${t.title}`, k = (t) => !!t.isActive || !!t.subItems?.some((n) => n.isActive), z = "md:hidden shrink-0 overflow-hidden bg-d-card border-d-border rounded-t-lg border-t pb-[env(safe-area-inset-bottom)]", D = "flex items-stretch p-1", m = i(
+import { jsxs as d, jsx as n, Fragment as J } from "react/jsx-runtime";
+import * as Q from "react";
+import { designTokens as U } from "../design-tokens.js";
+import { navTokens as T } from "../nav-tokens.js";
+import { Icon as V } from "./icon.js";
+import { warnOnce as i, someRowBadged as _, normalizeNavBadge as W, NavBadgeOverlay as Y, NavBadgeDot as w, NavBadgeSrLabel as Z } from "./nav-badge.js";
+import { useSidebar as ee } from "./sidebar.js";
+import { cn as r } from "../../lib/utils.js";
+const O = 6, $ = (a) => `${a.url} ${a.title}`, A = (a) => !!a.isActive || !!a.subItems?.some((o) => o.isActive), te = "md:hidden shrink-0 overflow-hidden bg-d-card border-d-border rounded-t-lg border-t pb-[env(safe-area-inset-bottom)]", ae = "flex items-stretch p-1", g = r(
   // `min-h-11` (44px) written out rather than `sizes.touch`: that token also
-  // carries `px-4`, and 16px of horizontal padding inside a ~61px cell would
-  // leave 29px for the label. `min-h-`, never `h-`: a cell must be able to grow.
-  // `py-1.5` and not `py-2.5`: the bar's breathing room is the `<nav>`'s 4px
-  // inset, and paying for it twice would put the cell at 54px and the bar at
-  // 63px — past the column budget for no legibility gained. It stayed at
-  // `py-1.5` when the icon dropped to 16px, deliberately: `py-2` would have held
-  // the bar at the 59px it had with a 20px glyph, and a lower bar was the point
-  // of the smaller glyph, not a side effect of it. 12px of vertical padding
-  // around 34px of content (16 + 2 + 16) puts the pill at 46px.
+  // carries `px-4` and `text-sm`, and 16px of horizontal padding inside a ~61px
+  // cell would leave 29px for the label. `min-h-`, never `h-`: a cell must be
+  // able to grow. `cursor-pointer` because v4's preflight sets
+  // `cursor: default` on `<button>`, so without it the Menu cell would feel
+  // inert next to the `<a>` cells.
   //
-  // Which leaves this value boxed in from both directions, and tighter than it
-  // was: upwards by the column budget, downwards by the 44px touch floor, now
-  // 2px away instead of 6. Trim `py-1.5`, the icon or the label's line-height
-  // any further and `min-h-11` takes the cell's height over from the padding —
-  // at which point the class list stops describing what renders, silently.
-  // Measure the rendered cell, not the padding.
-  // `cursor-pointer` because the two cell elements must not diverge: v4's
-  // preflight sets `cursor: default` on `<button>`, so without it the Menu cell
-  // would feel inert next to the `<a>` cells on a desktop-narrow window.
-  //
-  // `flex-1 min-w-0` is the equal-width guarantee, and both halves are load
-  // bearing. `flex-1` alone is `1 1 0%`, which distributes the row evenly only
-  // as long as no cell's content forces it wider: a flex item's automatic
-  // minimum size is its min-content width, so a cell whose contents cannot
-  // shrink below the fair share silently takes more than it and every other
-  // cell takes less. Here that floor is 24px — a `shrink-0` 16px icon plus
-  // `px-1` — and the narrowest cell the budget produces is 52px (six cells at
-  // 320px), so today the row is even by arithmetic. `min-w-0` makes it even by
-  // construction instead, at any width and whatever a cell holds, which is what
-  // the row's rhythm actually depends on. The label shrinks in exchange
-  // (`w-full truncate`, whose `overflow-hidden` already floors its own
-  // min-content size at 0) — the label is the right thing to spend.
-  "flex min-h-11 min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 px-1 py-1.5 text-xs",
-  // The radius goes on every cell, not only the marked one: it costs nothing
-  // while the fill is transparent, and it keeps the hover and press surfaces of
-  // an inactive cell the same shape as the pill they can become.
-  u.navItem.basePill,
-  u.focusRing,
-  // `ring-inset` is still right, for a new reason: the cells now touch each
-  // other, not the dock's clipped corners, so a 3px outset ring would not be
-  // shaved — it would spill over the neighbouring cell and read as if two cells
-  // were focused.
+  // `min-w-0` beside `flex-1` is the equal-width guarantee: a flex item's
+  // automatic minimum size is its min-content width, so without it a cell whose
+  // contents cannot shrink below the fair share takes more than it and every
+  // other cell takes less. The label is what gives way instead.
+  "flex min-h-11 min-w-0 flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 px-1 py-2.5 text-xs",
+  // On every cell, not only the marked one: it keeps the hover and press
+  // surfaces of an inactive cell the same shape as the pill they can become.
+  T.item.basePill,
+  U.focusRing,
+  // `ring-inset` because the cells touch each other: an outset ring would spill
+  // over the neighbour and read as if two cells were focused.
   "focus-visible:ring-inset"
-), p = i(
+), h = r(
   "text-d-foreground font-medium",
   "[@media(hover:hover)_and_(pointer:fine)]:hover:bg-d-sidebar-accent [@media(hover:hover)_and_(pointer:fine)]:hover:text-d-sidebar-accent-foreground",
   "active:bg-d-sidebar-accent active:text-d-sidebar-accent-foreground"
-), v = u.navItem.selectedPill, d = (t, n) => /* @__PURE__ */ y(T, { children: [
-  /* @__PURE__ */ o(K, { name: t, size: "xs", className: "shrink-0" }),
-  /* @__PURE__ */ o("span", { className: "w-full truncate text-center", children: n })
+), M = T.item.selectedPill, P = "relative flex size-5 shrink-0 items-center justify-center", c = (a, o) => /* @__PURE__ */ d("span", { className: P, children: [
+  /* @__PURE__ */ n(V, { name: a, size: "sm", className: "shrink-0" }),
+  o
+] }), ne = (a, o) => /* @__PURE__ */ d("span", { className: r(P, "[&>svg]:size-full"), children: [
+  a,
+  o
+] }), oe = "-top-1 -right-1.5", S = "absolute -top-1 -right-1", N = (a, o, m) => /* @__PURE__ */ d(J, { children: [
+  a,
+  /* @__PURE__ */ n("span", { className: "w-full truncate text-center", children: o }),
+  m
 ] });
-function J({
-  items: t,
-  showMenu: n = !0,
-  menuLabel: A = "Menu",
-  ariaLabel: B = "Main navigation",
-  menuIconName: M = "Menu",
-  linkComponent: b,
-  linkProps: S = {},
-  className: _,
-  ...j
+function pe({
+  items: a,
+  showMenu: o = !0,
+  menuLabel: m = "Menu",
+  ariaLabel: j = "Main navigation",
+  menuIcon: p = "Menu",
+  menuBadge: D = !1,
+  linkComponent: x,
+  linkProps: z = {},
+  className: E,
+  ...R
 }) {
-  const { openMobile: f, setOpenMobile: h, mobileNavTarget: L, setMobileNavTarget: g } = R(), s = n ? I - 1 : I, r = t.slice(0, s);
-  if (t.length > s) {
-    const e = t.slice(s).map((a) => `"${a.title}"`).join(", ");
-    c(
-      `AppBottomNav: ${t.length} items passed, ${s} slots available. Dropped: ${e}.`
+  const { openMobile: I, setOpenMobile: B, mobileNavTarget: F, setMobileNavTarget: C } = ee(), u = o ? O - 1 : O, l = a.slice(0, u), v = a.slice(u);
+  if (v.length > 0) {
+    const e = v.map((t) => `"${t.title}"`).join(", ");
+    i(
+      `AppBottomNav: ${a.length} items passed, ${u} slots available. Dropped: ${e}.`
     );
   }
-  const N = /* @__PURE__ */ new Set();
-  for (const e of r) {
-    const a = $(e);
-    N.has(a) && c(
-      `AppBottomNav: duplicate item "${a}" — one of them is ignored.`
-    ), N.add(a);
+  const L = /* @__PURE__ */ new Set();
+  for (const e of l) {
+    const t = $(e);
+    L.has(t) && i(
+      `AppBottomNav: duplicate item "${t}" — one of them is ignored.`
+    ), L.add(t);
   }
-  const l = r.findIndex(k);
-  r.filter(k).length > 1 && c(
-    `AppBottomNav: more than one active item — "${r[l].title}" wins.`
+  const b = l.findIndex(A);
+  l.filter(A).length > 1 && i(
+    `AppBottomNav: more than one active item — "${l[b].title}" wins.`
   );
-  const x = n && l === -1, P = (e, a) => {
-    const C = {
-      className: i(
-        m,
-        a ? v : p
+  const K = D || _(v), G = (() => {
+    const e = K ? /* @__PURE__ */ n(w, { className: S }) : null;
+    if (typeof p == "string") return c(p, e);
+    const t = p();
+    return t == null ? c("Menu", e) : ne(t, e);
+  })(), k = (e) => {
+    const t = W(e.badge, "compact", e.title), s = /* @__PURE__ */ n(Z, { row: e, badge: t });
+    return t?.kind === "text" ? {
+      visual: /* @__PURE__ */ n(Y, { text: t.text, className: oe }),
+      srLabel: s
+    } : t?.kind === "dot" || _(e.subItems) ? { visual: /* @__PURE__ */ n(w, { className: S }), srLabel: s } : { visual: null, srLabel: s };
+  }, X = (e, t) => {
+    const s = {
+      className: r(
+        g,
+        t ? M : h
       ),
       "data-slot": "app-bottom-nav-item",
-      "data-active": a ? "true" : void 0,
+      "data-active": t ? "true" : void 0,
       // Not set unconditionally: `truncate` does not alter the text node, so
-      // the full title is already in the accessibility tree and a duplicating
-      // `aria-label` is dead weight.
+      // the full title is already in the accessibility tree.
       "aria-label": e.ariaLabel,
-      "aria-current": a ? "page" : void 0
-    };
-    return b ? /* @__PURE__ */ o(b, { href: e.url, ...C, ...S, children: d(e.iconName, e.title) }) : /* @__PURE__ */ o("a", { href: e.url, ...C, children: d(e.iconName, e.title) });
-  }, O = (e, a) => (
-    // A button is not a page, so no `aria-current` even when the indicator is here.
-    // No `aria-controls` either — the drill panel's id is Radix-generated and
-    // unreachable from the bar, and a dangling reference is worse than none —
-    // and no `aria-haspopup`, which would promise arrow-key menu semantics the
-    // drill-down does not implement.
-    /* @__PURE__ */ o(
-      "button",
-      {
-        type: "button",
-        "data-slot": "app-bottom-nav-item",
-        "data-active": a ? "true" : void 0,
-        "aria-label": e.ariaLabel,
-        "aria-expanded": f && L === e.title,
-        className: i(
-          m,
-          a ? v : p
-        ),
-        onClick: () => {
-          g(e.title), h(!0);
-        },
-        children: d(e.iconName, e.title)
-      }
-    )
-  );
-  return r.length === 0 && !n ? (c(
+      "aria-current": t ? "page" : void 0
+    }, { visual: f, srLabel: H } = k(e), y = N(
+      c(e.iconName, f),
+      e.title,
+      H
+    );
+    return x ? /* @__PURE__ */ n(x, { href: e.url, ...s, ...z, children: y }) : /* @__PURE__ */ n("a", { href: e.url, ...s, children: y });
+  }, q = (e, t) => {
+    const { visual: s, srLabel: f } = k(e);
+    return (
+      // A button is not a page, so no `aria-current` even when the indicator is
+      // here. No `aria-controls` — the drill panel's id is Radix-generated and
+      // unreachable from the bar — and no `aria-haspopup`, which would promise
+      // arrow-key menu semantics the drill-down does not implement.
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          "data-slot": "app-bottom-nav-item",
+          "data-active": t ? "true" : void 0,
+          "aria-label": e.ariaLabel,
+          "aria-expanded": I && F === e.title,
+          className: r(
+            g,
+            t ? M : h
+          ),
+          onClick: () => {
+            C(e.title), B(!0);
+          },
+          children: N(c(e.iconName, s), e.title, f)
+        }
+      )
+    );
+  };
+  return l.length === 0 && !o ? (i(
     "AppBottomNav: no items and showMenu={false} — nothing to render, the bar is omitted."
-  ), null) : /* @__PURE__ */ o(
+  ), null) : /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "app-bottom-nav",
-      className: i(z, _),
-      ...j,
-      children: /* @__PURE__ */ y("nav", { "aria-label": B, className: D, children: [
-        r.map((e, a) => /* @__PURE__ */ o(F.Fragment, { children: e.subItems?.length ? O(e, a === l) : P(e, a === l) }, $(e))),
-        n && /* @__PURE__ */ o(
+      className: r(te, E),
+      ...R,
+      children: /* @__PURE__ */ d("nav", { "aria-label": j, className: ae, children: [
+        l.map((e, t) => /* @__PURE__ */ n(Q.Fragment, { children: e.subItems?.length ? q(e, t === b) : X(e, t === b) }, $(e))),
+        o && /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             "data-slot": "app-bottom-nav-item",
-            "data-active": x ? "true" : void 0,
-            "aria-expanded": f,
-            className: i(
-              m,
-              x ? v : p
-            ),
+            "aria-expanded": I,
+            className: r(g, h),
             onClick: () => {
-              g(null), h(!0);
+              C(null), B(!0);
             },
-            children: d(M, A)
+            children: N(G, m)
           }
         )
       ] })
@@ -161,5 +156,5 @@ function J({
   );
 }
 export {
-  J as AppBottomNav
+  pe as AppBottomNav
 };

package/dist/components/ui/app-sidebar-mobile.js

@@ -1,26 +1,28 @@
 "use client";
-import { jsx as n, jsxs as f, Fragment as L } from "react/jsx-runtime";
-import * as l from "react";
-import { designTokens as c } from "../design-tokens.js";
+import { jsx as n, jsxs as u, Fragment as L } from "react/jsx-runtime";
+import * as i from "react";
+import { designTokens as h } from "../design-tokens.js";
+import { navTokens as j } from "../nav-tokens.js";
 import { Icon as R } from "./icon.js";
-import { useSidebar as U } from "./sidebar.js";
-import { cn as d } from "../../lib/utils.js";
-const v = (t, i) => `${t} ${i.url} ${i.title}`, V = (t, i, a) => {
+import { normalizeNavBadge as D, renderInlineNavBadge as G, NavBadgeSrLabel as O, someRowBadged as Y } from "./nav-badge.js";
+import { useSidebar as Z } from "./sidebar.js";
+import { cn as f } from "../../lib/utils.js";
+const v = (t, l) => `${t} ${l.url} ${l.title}`, _ = (t, l, a) => {
   if (!t) return null;
-  for (const h of [...i, ...a ?? []]) {
-    const u = h.items.find(
-      (b) => b.title === t && b.subItems?.length
+  for (const d of [...l, ...a ?? []]) {
+    const c = d.items.find(
+      (p) => p.title === t && p.subItems?.length
     );
-    if (u) return { key: v(h.title, u), item: u };
+    if (c) return { key: v(d.title, c), item: c };
   }
   return console.warn(
     `AppSidebarMobile: no navigation item with sub-items titled "${t}" — opening at level 0.`
   ), null;
-}, W = (t) => t.defaultPrevented || t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || t.button !== 0, M = d(
+}, ee = (t) => t.defaultPrevented || t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || t.button !== 0, M = f(
   "flex w-full items-center gap-3 text-left",
-  c.sizes.touch,
-  c.navItem.base,
-  c.focusRing,
+  h.sizes.touch,
+  j.item.base,
+  h.focusRing,
   // The card clips its children (`overflow-hidden` is what keeps the rounded
   // corners on the first and last row), so an outset ring would be cut off.
   "focus-visible:ring-inset",
@@ -28,134 +30,143 @@ const v = (t, i) => `${t} ${i.url} ${i.title}`, V = (t, i, a) => {
   // state is the only immediate feedback a finger gets. Not
   // `interaction.active` — that is the button squash, wrong on a list row.
   "active:bg-d-accent"
-), $ = (t) => t ? c.navItem.selected : c.interaction.hover, X = "text-d-foreground px-4 pb-2 text-xs font-semibold tracking-wide uppercase", E = d(
+), T = (t) => t ? j.item.selected : h.interaction.hover, te = "text-d-foreground flex items-center px-4 pb-2 text-xs font-semibold tracking-wide uppercase", $ = f(
   "divide-d-border border-d-border bg-d-card divide-y overflow-hidden border",
-  c.radius.lg
-), Y = (t) => {
+  h.radius.lg
+), ne = (t) => {
   if (t.icon) {
-    const i = t.icon;
-    return /* @__PURE__ */ n(i, { className: "size-5 shrink-0" });
+    const l = t.icon;
+    return /* @__PURE__ */ n(l, { className: "size-5 shrink-0" });
   }
   return t.iconName ? /* @__PURE__ */ n(R, { name: t.iconName, size: "sm", className: "shrink-0" }) : null;
-}, T = (t) => !!t.iconName || !!t.icon, I = (t, { showIconColumn: i, hasChildren: a }) => /* @__PURE__ */ f(L, { children: [
-  i && (Y(t) ?? // Empty placeholder, not an initial: on a wide row the label is right
-  // there, so an initial would only add noise. Desktop icon mode needs
-  // the fallback because there the icon is the only affordance.
-  /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "size-5 shrink-0" })),
-  /* @__PURE__ */ n("span", { className: "flex-1", children: t.title }),
-  a && /* @__PURE__ */ n(
-    R,
-    {
-      name: "ChevronRight",
-      size: "sm",
-      className: "text-d-muted-foreground shrink-0"
-    }
-  )
-] });
-function se({
+}, E = (t) => !!t.iconName || !!t.icon, y = (t, { showIconColumn: l, hasChildren: a }) => {
+  const d = D(t.badge, "full", t.title), c = d ?? (a && Y("subItems" in t ? t.subItems : void 0) ? { kind: "dot" } : null);
+  return /* @__PURE__ */ u(L, { children: [
+    l && (ne(t) ?? // Empty placeholder, not an initial: on a wide row the label is right
+    // there, so an initial would only add noise. Desktop icon mode needs
+    // the fallback because there the icon is the only affordance.
+    /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "size-5 shrink-0" })),
+    /* @__PURE__ */ n("span", { className: "flex-1", children: t.title }),
+    /* @__PURE__ */ n(O, { row: t, badge: d }),
+    G(c),
+    a && /* @__PURE__ */ n(
+      R,
+      {
+        name: "ChevronRight",
+        size: "sm",
+        className: "text-d-muted-foreground shrink-0"
+      }
+    )
+  ] });
+};
+function de({
   navigation: t,
-  navigationFooter: i,
+  navigationFooter: l,
   headerContent: a,
-  footerContent: h,
-  linkComponent: u,
-  linkProps: b = {}
+  footerContent: d,
+  linkComponent: c,
+  linkProps: p = {}
 }) {
-  const { openMobile: C, setOpenMobile: j, mobileNavTarget: D } = U(), [r, x] = l.useState(
-    () => V(D, t, i)
-  ), [G, N] = l.useState(!1), g = l.useRef(!0), w = (!!r || G) && !(g.current && r);
-  l.useEffect(() => {
+  const { openMobile: B, setOpenMobile: P, mobileNavTarget: q } = Z(), [r, x] = i.useState(
+    () => _(q, t, l)
+  ), [F, N] = i.useState(!1), g = i.useRef(!0), C = (!!r || F) && !(g.current && r);
+  i.useEffect(() => {
     g.current = !1;
-  }, []), l.useEffect(() => {
-    C || (x(null), N(!1));
-  }, [C]);
-  const B = l.useRef(null), k = l.useRef(/* @__PURE__ */ new Map()), y = l.useRef(null), O = (e) => (s) => {
+  }, []), i.useEffect(() => {
+    B || (x(null), N(!1));
+  }, [B]);
+  const w = i.useRef(null), k = i.useRef(/* @__PURE__ */ new Map()), I = i.useRef(null), H = (e) => (s) => {
     s ? k.current.set(e, s) : k.current.delete(e);
   };
-  l.useLayoutEffect(() => {
+  i.useLayoutEffect(() => {
     if (r) {
       if (g.current) return;
-      B.current?.focus();
+      w.current?.focus();
       return;
     }
-    const e = y.current;
-    e && (y.current = null, k.current.get(e)?.focus());
+    const e = I.current;
+    e && (I.current = null, k.current.get(e)?.focus());
   }, [r]);
-  const P = (e) => {
+  const J = (e) => {
     N(!1), x(e);
-  }, q = () => {
-    y.current = r?.key ?? null, N(!0), x(null);
-  }, A = (e, s) => {
-    const m = d(M, $(e.isActive)), o = (p) => {
-      W(p) || j(!1);
+  }, Q = () => {
+    I.current = r?.key ?? null, N(!0), x(null);
+  }, S = (e, s) => {
+    const b = f(M, T(e.isActive)), o = (m) => {
+      ee(m) || P(!1);
     };
-    return u ? /* @__PURE__ */ n(
-      u,
+    return c ? /* @__PURE__ */ n(
+      c,
       {
         href: e.url,
-        className: m,
+        className: b,
         "aria-current": e.isActive ? "page" : void 0,
         onClick: o,
-        ...b,
-        children: I(e, s)
+        ...p,
+        children: y(e, s)
       }
     ) : /* @__PURE__ */ n(
       "a",
       {
         href: e.url,
-        className: m,
+        className: b,
         "aria-current": e.isActive ? "page" : void 0,
         onClick: o,
-        children: I(e, s)
+        children: y(e, s)
       }
     );
-  }, F = (e, s, m) => {
-    const o = v(e.title, s), p = !!s.subItems?.length, K = { showIconColumn: m, hasChildren: p }, J = s.isActive || !!s.subItems?.some((Q) => Q.isActive);
-    return p ? /* @__PURE__ */ n(
+  }, U = (e, s, b) => {
+    const o = v(e.title, s), m = !!s.subItems?.length, K = { showIconColumn: b, hasChildren: m }, W = s.isActive || !!s.subItems?.some((X) => X.isActive);
+    return m ? /* @__PURE__ */ n(
       "button",
       {
-        ref: O(o),
+        ref: H(o),
         type: "button",
-        className: d(M, $(J)),
-        onClick: () => P({ key: o, item: s }),
-        children: I(s, K)
+        className: f(M, T(W)),
+        onClick: () => J({ key: o, item: s }),
+        children: y(s, K)
       }
-    ) : A(s, K);
-  }, S = (e, s = !0) => {
-    const m = e.items.some(T);
-    return /* @__PURE__ */ f("section", { children: [
-      s && e.title && /* @__PURE__ */ n("h3", { className: X, children: e.title }),
-      /* @__PURE__ */ n("ul", { className: E, children: e.items.map((o) => /* @__PURE__ */ n("li", { children: F(e, o, m) }, v(e.title, o))) })
+    ) : S(s, K);
+  }, A = (e, s = !0) => {
+    const b = e.items.some(E), o = D(e.badge, "full", e.title);
+    return /* @__PURE__ */ u("section", { children: [
+      s && e.title && /* @__PURE__ */ u("h3", { className: te, children: [
+        /* @__PURE__ */ n("span", { className: "min-w-0 flex-1", children: e.title }),
+        /* @__PURE__ */ n(O, { row: e, badge: o }),
+        G(o)
+      ] }),
+      /* @__PURE__ */ n("ul", { className: $, children: e.items.map((m) => /* @__PURE__ */ n("li", { children: U(e, m, b) }, v(e.title, m))) })
     ] }, e.title);
-  }, z = r?.item.subItems ?? [], H = z.some(T);
+  }, z = r?.item.subItems ?? [], V = z.some(E);
   return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "app-sidebar-mobile",
-      className: d(
+      className: f(
         "bg-d-muted text-d-foreground flex min-h-0 flex-1 flex-col",
         // The home indicator overlaps the bottom of the viewport, and
         // `footerContent` is the last thing in the panel — so the reserve lives
         // here, not on the scroll area above it.
         "pb-[max(1rem,env(safe-area-inset-bottom))]"
       ),
-      children: /* @__PURE__ */ f("div", { className: "flex min-h-0 w-full flex-1 flex-col sm:mx-auto sm:max-w-md", children: [
-        r ? /* @__PURE__ */ f(
+      children: /* @__PURE__ */ u("div", { className: "flex min-h-0 w-full flex-1 flex-col sm:mx-auto sm:max-w-md", children: [
+        r ? /* @__PURE__ */ u(
           "div",
           {
             "data-sidebar": "header",
-            className: "border-d-border shrink-0 border-b pb-2",
+            className: "border-d-border shrink-0 border-b pr-12 pb-2",
             children: [
-              /* @__PURE__ */ n("div", { className: "p-2", children: /* @__PURE__ */ f(
+              /* @__PURE__ */ n("div", { className: "p-2", children: /* @__PURE__ */ u(
                 "button",
                 {
                   type: "button",
                   "aria-label": "Back to menu",
-                  onClick: q,
-                  className: d(
+                  onClick: Q,
+                  className: f(
                     "flex min-h-11 items-center gap-1 pr-3 pl-2",
-                    c.radius.default,
-                    c.focusRing,
-                    c.interaction.hover,
+                    h.radius.default,
+                    h.focusRing,
+                    h.interaction.hover,
                     "active:bg-d-accent"
                   ),
                   children: [
@@ -167,7 +178,7 @@ function se({
               /* @__PURE__ */ n(
                 "h2",
                 {
-                  ref: B,
+                  ref: w,
                   tabIndex: -1,
                   className: "px-4 text-base font-semibold outline-none",
                   children: r.item.title
@@ -175,46 +186,50 @@ function se({
               )
             ]
           }
-        ) : a && // `px-4` so the consumer's header lands on the same grid as the cards.
-        /* @__PURE__ */ n("div", { "data-sidebar": "header", className: "shrink-0 px-4 py-2", children: a }),
+        ) : a && /* @__PURE__ */ n("div", { "data-sidebar": "header", className: "shrink-0 px-12 py-2", children: a }),
         /* @__PURE__ */ n(
           "nav",
           {
-            className: d(
-              "min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-4 pb-4",
+            className: f(
+              // A column, so the footer block can claim the leftover space with
+              // `mt-auto` and sit at the bottom the way the desktop panel's does.
+              "flex min-h-0 flex-1 flex-col space-y-6 overflow-y-auto overscroll-contain px-4 pb-4",
               // The sheet's close button floats over the top-right corner. A
               // header (or the back bar) sits under it and gets `pr-12`; with
               // neither, the list itself has to clear its 52px.
               r || a ? "pt-3" : "pt-14",
-              w && "animate-in fade-in-0 duration-200 motion-reduce:animate-none",
-              w && (r ? "slide-in-from-right-4" : "slide-in-from-left-4")
+              C && "animate-in fade-in-0 duration-200 motion-reduce:animate-none",
+              C && (r ? "slide-in-from-right-4" : "slide-in-from-left-4")
             ),
             children: r ? (
               // One card, no group heading: the level's title is already in the
               // back bar.
-              /* @__PURE__ */ n("ul", { className: E, children: z.map((e) => /* @__PURE__ */ n("li", { children: A(e, {
-                showIconColumn: H,
+              /* @__PURE__ */ n("ul", { className: $, children: z.map((e) => /* @__PURE__ */ n("li", { children: S(e, {
+                showIconColumn: V,
                 hasChildren: !1
               }) }, v(r.key, e))) })
-            ) : /* @__PURE__ */ f(L, { children: [
+            ) : /* @__PURE__ */ u(L, { children: [
               t.map(
-                (e) => S(e, t.length > 1)
+                (e) => A(e, t.length > 1)
               ),
-              i?.length ? (
+              l?.length ? (
                 // Detached by a wider gap: the "system" block at the bottom of a
                 // native Settings list. `pt-6` on top of the `space-y-6` — 8px
-                // read as an accident, not as a separation.
-                /* @__PURE__ */ n("div", { className: "space-y-6 pt-6", children: i.map((e) => S(e)) })
+                // read as an accident, not as a separation. `mt-auto` eats the
+                // leftover height when the list is short, so the block lands at
+                // the bottom of the panel; with a long list it resolves to 0 and
+                // the block just scrolls after the last group.
+                /* @__PURE__ */ n("div", { className: "mt-auto space-y-6 pt-6", children: l.map((e) => A(e)) })
               ) : null
             ] })
           },
           r ? `level-1 ${r.key}` : "level-0"
         ),
-        h
+        d
       ] })
     }
   );
 }
 export {
-  se as AppSidebarMobile
+  de as AppSidebarMobile
 };