laif-ds 1.0.0 → 1.0.2

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

@@ -1,92 +1,218 @@
 "use client";
-import { jsx as t, jsxs as s, Fragment as E } from "react/jsx-runtime";
-import * as o from "react";
-import { designTokens as l } from "../design-tokens.js";
-import { AppSidebarMobile as de } from "./app-sidebar-mobile.js";
-import { DropdownMenu as q, DropdownMenuTrigger as J, DropdownMenuContent as Q, DropdownMenuRadioGroup as ue, DropdownMenuRadioItem as he, DropdownMenuItem as pe } from "./dropdown-menu.js";
-import { Icon as k } from "./icon.js";
-import { useSidebar as fe, Sidebar as W, SidebarHeader as me, SidebarContent as be, SidebarRail as ge, SidebarGroup as z, SidebarSeparator as ve, SidebarGroupLabel as xe, SidebarGroupContent as Se, SidebarMenu as Ne, SidebarMenuItem as D, SidebarMenuButton as _, SidebarMenuSub as Ae, SidebarMenuSubItem as we, SidebarMenuSubButton as X } from "./sidebar.js";
-import { Tabs as ye, TabsList as Me, TabsContent as Te, TabsTrigger as Ce } from "./tabs.js";
-import { Tooltip as j, TooltipTrigger as K, TooltipContent as O } from "./tooltip.js";
-import { cn as d } from "../../lib/utils.js";
-const Z = (i, a) => `${i.title} ${a.url} ${a.title}`, P = (i) => `${i.url} ${i.title}`, Ie = { xs: "size-4", sm: "size-5" }, T = (i, a, b) => {
-  if (i.icon) {
-    const h = i.icon;
-    return /* @__PURE__ */ t(h, { className: d(Ie[a], "shrink-0", b) });
+import { jsx as t, jsxs as c, Fragment as W } from "react/jsx-runtime";
+import * as i from "react";
+import { designTokens as f } from "../design-tokens.js";
+import { navTokens as _e } from "../nav-tokens.js";
+import { AppSidebarMobile as mn } from "./app-sidebar-mobile.js";
+import { DropdownMenu as $e, DropdownMenuTrigger as Ge, DropdownMenuContent as De, DropdownMenuRadioGroup as pn, DropdownMenuRadioItem as bn, DropdownMenuItem as vn } from "./dropdown-menu.js";
+import { Icon as ne } from "./icon.js";
+import { someRowBadged as Y, NavBadgeDot as me, normalizeNavBadge as M, renderInlineNavBadge as P, NavBadgeSrLabel as B } from "./nav-badge.js";
+import { useSidebar as gn, Sidebar as Fe, SidebarContent as wn, SidebarRail as xn, SidebarHeader as ze, SidebarGroup as pe, SidebarSeparator as Nn, SidebarGroupLabel as Sn, SidebarGroupContent as En, SidebarMenu as yn, SidebarMenuItem as be, SidebarMenuButton as ve, SidebarMenuSub as Rn, SidebarMenuSubItem as Tn, SidebarMenuSubButton as je } from "./sidebar.js";
+import { Tabs as Mn, TabsList as Cn, TabsContent as kn, TabsTrigger as An } from "./tabs.js";
+import { Tooltip as J, TooltipTrigger as Q, TooltipContent as X } from "./tooltip.js";
+import { cn as h } from "../../lib/utils.js";
+const He = (o, l) => `${o.title} ${l.url} ${l.title}`, Ke = (o) => `${o.url} ${o.title}`, In = { xs: "size-4", sm: "size-5" }, Ve = "absolute top-0 -right-[5px]", Z = (o, l, x) => {
+  if (o.icon) {
+    const v = o.icon;
+    return /* @__PURE__ */ t(v, { className: h(In[l], "shrink-0", x) });
   }
-  return i.iconName ? /* @__PURE__ */ t(k, { name: i.iconName, size: a, className: b }) : null;
-}, C = "__group-selector";
-function Oe({
-  navigation: i,
-  navigationFooter: a,
-  navigationDisplay: b = "list",
-  headerContent: h,
-  footerContent: B,
-  showRail: L = !0,
-  collapsible: g,
-  linkComponent: u,
-  linkProps: v = {},
-  ...F
+  return o.iconName ? /* @__PURE__ */ t(ne, { name: o.iconName, size: l, className: x }) : null;
+}, ee = "__group-selector", qe = 300, Ue = 300, On = 120, b = (o) => {
+  o.current !== null && (window.clearTimeout(o.current), o.current = null);
+}, Pn = (o, l) => l instanceof Node ? o?.contains(l) ? !0 : l instanceof Element && !!l.closest("[data-radix-popper-content-wrapper]") : !1;
+function Bn() {
+  const [o, l] = i.useState(!1);
+  return i.useEffect(() => {
+    if (typeof window > "u" || !window.matchMedia) return;
+    const x = window.matchMedia("(hover: hover) and (pointer: fine)"), v = () => l(x.matches);
+    return v(), x.addEventListener("change", v), () => x.removeEventListener("change", v);
+  }, []), o;
+}
+function Un({
+  navigation: o,
+  navigationFooter: l,
+  navigationDisplay: x = "list",
+  headerContent: v,
+  footerContent: ge,
+  showRail: We = !0,
+  collapsible: N,
+  side: te = "left",
+  expandOnHover: re,
+  pinned: C,
+  defaultPinned: Ye,
+  onPinnedChange: we,
+  linkComponent: y,
+  linkProps: j = {},
+  ...k
 }) {
-  const { state: ee, isMobile: V } = fe(), re = o.useId(), x = g === "icon" && ee === "collapsed" && !V, [te, H] = o.useState({}), I = o.useMemo(
-    () => [...i, ...a ?? []].flatMap(
+  const { state: Je, isMobile: ie, open: a, setOpen: H, peek: A, setPeek: m } = gn(), Qe = i.useId(), u = N === "icon" && Je === "collapsed" && !ie, Xe = Bn(), p = !!re && N === "icon" && !ie && Xe;
+  i.useEffect(() => {
+    !re || N === "icon" || console.warn(
+      `AppSidebar: \`expandOnHover\` requires \`collapsible="icon"\` — got "${N ?? "offcanvas"}", so the prop is ignored.`
+    );
+  }, [re, N]);
+  const I = i.useRef(null), R = i.useRef(null), S = i.useRef(null), L = i.useRef(null), T = i.useRef(!1), _ = i.useRef(!1), se = i.useCallback(
+    () => !!I.current?.contains(document.activeElement),
+    []
+  ), $ = i.useCallback(() => {
+    const e = document.activeElement;
+    return !(e instanceof HTMLElement) || !I.current?.contains(e) ? !1 : e.matches(":focus-visible");
+  }, []), G = i.useCallback(
+    () => !!I.current?.querySelector(
+      '[aria-expanded="true"][data-state="open"]'
+    ),
+    []
+  ), g = i.useCallback(() => {
+    b(R), b(S), b(L);
+  }, []), D = i.useCallback(() => {
+    g(), m(!1);
+  }, [g, m]), oe = i.useCallback(() => {
+    b(S);
+    const e = () => {
+      if (S.current = null, !(T.current || $())) {
+        if (G()) {
+          S.current = window.setTimeout(e, Ue);
+          return;
+        }
+        m(!1);
+      }
+    };
+    S.current = window.setTimeout(e, Ue);
+  }, [$, G, m]), Ze = () => {
+    T.current = !0, p && (b(S), !(a || A || _.current) && (b(R), R.current = window.setTimeout(function e() {
+      if (R.current = null, G()) {
+        R.current = window.setTimeout(e, qe);
+        return;
+      }
+      m(!0);
+    }, qe)));
+  }, en = () => {
+    T.current = !1, p && (_.current = !1, b(R), A && oe());
+  }, nn = () => {
+    b(L), !(!p || a || A || _.current) && (G() || (b(R), m(!0)));
+  }, tn = () => {
+    p && (b(L), L.current = window.setTimeout(() => {
+      L.current = null, document.activeElement !== document.body && (se() || (_.current = !1, !($() || T.current) && (G() || m(!1))));
+    }, On));
+  };
+  i.useEffect(() => {
+    if (!p || !A) return;
+    const e = (w) => {
+      const O = Pn(I.current, w.target);
+      if (T.current = O, O) {
+        b(S);
+        return;
+      }
+      S.current === null && oe();
+    }, n = () => {
+      T.current = !1, D();
+    }, r = () => D(), s = () => {
+      document.visibilityState === "hidden" && D();
+    }, d = (w) => {
+      w.key === "Escape" && ($() || D());
+    };
+    return document.addEventListener("mouseover", e), document.addEventListener("mouseleave", n), document.addEventListener("visibilitychange", s), window.addEventListener("blur", r), window.addEventListener("keydown", d), () => {
+      document.removeEventListener("mouseover", e), document.removeEventListener("mouseleave", n), document.removeEventListener("visibilitychange", s), window.removeEventListener("blur", r), window.removeEventListener("keydown", d);
+    };
+  }, [p, A, oe, D, $]), i.useEffect(() => g, [g]), i.useEffect(() => {
+    p || (g(), m(!1));
+  }, [p, g, m]);
+  const xe = i.useRef(a);
+  i.useEffect(() => {
+    const e = xe.current;
+    if (xe.current = a, !p) return;
+    if (a) {
+      g(), m(!1);
+      return;
+    }
+    if (!e) return;
+    _.current = T.current || se(), g(), m(!1);
+    const n = I.current, r = document.activeElement, s = r === document.body || r instanceof HTMLElement && r.dataset.sidebar === "pin";
+    n && s && n.querySelector(
+      '[data-sidebar="menu-button"], [data-sidebar="menu-sub-button"]'
+    )?.focus();
+  }, [a, p, g, se, m]);
+  const Ne = i.useRef(a), rn = i.useRef(Ye);
+  i.useEffect(() => {
+    const e = rn.current;
+    e === void 0 || e === a || H(e);
+  }, []), i.useEffect(() => {
+    Ne.current !== a && (Ne.current = a, we?.(a));
+  }, [a, we]);
+  const Se = i.useRef(null);
+  i.useEffect(() => {
+    const e = Se.current;
+    Se.current = C, C !== void 0 && C !== e && C !== a && H(C);
+  }, [C, a, H]);
+  const ce = i.useRef(null), Ee = i.useRef(0), ye = i.useRef(u);
+  ye.current !== u && (ye.current = u, Ee.current = ce.current?.scrollTop ?? 0), i.useLayoutEffect(() => {
+    const e = ce.current;
+    e && (e.scrollTop = Ee.current);
+  }, [u]);
+  const [sn, Re] = i.useState({}), ae = i.useMemo(
+    () => [...o, ...l ?? []].flatMap(
       (e) => e.items.filter(
-        (r) => r.subItems?.length && (r.isActive || r.subItems.some((n) => n.isActive))
-      ).map((r) => Z(e, r))
+        (n) => n.subItems?.length && (n.isActive || n.subItems.some((r) => r.isActive))
+      ).map((n) => He(e, n))
     ).join("|"),
-    [i, a]
+    [o, l]
   );
-  o.useEffect(() => {
-    I && H((e) => {
-      const r = I.split("|").filter((n) => e[n] === void 0);
-      return r.length ? { ...e, ...Object.fromEntries(r.map((n) => [n, !0])) } : e;
+  i.useEffect(() => {
+    ae && Re((e) => {
+      const n = ae.split("|").filter((r) => e[r] === void 0);
+      return n.length ? { ...e, ...Object.fromEntries(n.map((r) => [r, !0])) } : e;
     });
-  }, [I]);
-  const $ = o.useRef(/* @__PURE__ */ new Map()), p = o.useRef(null), S = (e) => (r) => {
-    r ? $.current.set(e, r) : $.current.delete(e);
+  }, [ae]);
+  const le = i.useRef(/* @__PURE__ */ new Map()), F = i.useRef(null), K = (e) => (n) => {
+    n ? le.current.set(e, n) : le.current.delete(e);
   };
-  o.useLayoutEffect(() => {
-    const e = p.current;
-    !e || document.activeElement !== document.body || $.current.get(e)?.focus();
-  }, [x]);
-  const ne = b === "tab" && i.length > 1, N = o.useMemo(() => {
-    const e = i.findIndex(
-      (r) => r.items.some(
-        (n) => n.isActive || n.subItems?.some((c) => c.isActive)
+  i.useLayoutEffect(() => {
+    const e = F.current;
+    !e || document.activeElement !== document.body || le.current.get(e)?.focus();
+  }, [u]);
+  const on = x === "tab" && o.length > 1, V = i.useMemo(() => {
+    const e = o.findIndex(
+      (n) => n.items.some(
+        (r) => r.isActive || r.subItems?.some((s) => s.isActive)
       )
     );
     return e === -1 ? null : e;
-  }, [i]), [U, G] = o.useState(
-    N ?? 0
+  }, [o]), [Te, de] = i.useState(
+    V ?? 0
   );
-  o.useEffect(() => {
-    N !== null && G(N);
-  }, [N]);
-  const A = U < i.length ? U : 0, w = (e) => {
-    const r = T(e, "sm");
-    return r || (g !== "icon" ? null : /* @__PURE__ */ t(
+  i.useEffect(() => {
+    V !== null && de(V);
+  }, [V]);
+  const z = Te < o.length ? Te : 0, ue = (e) => {
+    const n = Z(e, "sm");
+    return n || (N !== "icon" ? null : /* @__PURE__ */ t(
       "span",
       {
         "aria-hidden": "true",
-        className: "flex size-4 shrink-0 items-center justify-center text-xs font-semibold uppercase opacity-0 transition-opacity group-data-[collapsible=icon]:opacity-100",
+        className: h(
+          "flex shrink-0 items-center justify-center text-xs font-semibold uppercase opacity-0 transition-opacity group-data-[collapsible=icon]:opacity-100",
+          _e.rail.fallbackGlyph
+        ),
         children: e.title.charAt(0)
       }
     ));
-  }, ie = (e) => {
-    const r = /* @__PURE__ */ s(E, { children: [
-      T(e, "xs"),
-      /* @__PURE__ */ t("span", { children: e.title })
+  }, cn = (e) => {
+    const n = M(e.badge, "full", e.title), r = /* @__PURE__ */ c(W, { children: [
+      Z(e, "xs"),
+      /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: e.title }),
+      /* @__PURE__ */ t(B, { row: e, badge: n }),
+      P(n)
     ] });
-    return u ? /* @__PURE__ */ t(X, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
-      u,
+    return y ? /* @__PURE__ */ t(je, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
+      y,
       {
         href: e.url,
         className: "flex w-full items-center gap-2",
         "aria-current": e.isActive ? "page" : void 0,
-        ...v,
+        ...j,
         children: r
       }
-    ) }) : /* @__PURE__ */ t(X, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
+    ) }) : /* @__PURE__ */ t(je, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
       "a",
       {
         href: e.url,
@@ -95,294 +221,317 @@ function Oe({
         children: r
       }
     ) });
-  }, se = (e) => {
-    const r = /* @__PURE__ */ s(E, { children: [
-      T(e, "xs"),
-      /* @__PURE__ */ t("span", { children: e.title })
-    ] }), n = d(
+  }, an = (e) => {
+    const n = M(e.badge, "full", e.title), r = /* @__PURE__ */ c(W, { children: [
+      Z(e, "xs"),
+      /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: e.title }),
+      /* @__PURE__ */ t(B, { row: e, badge: n }),
+      P(n)
+    ] }), s = h(
       "flex w-full items-center gap-2",
-      e.isActive && l.dropdownItem.selected
+      e.isActive && f.dropdownItem.selected
     );
-    return /* @__PURE__ */ t(pe, { asChild: !0, children: u ? /* @__PURE__ */ t(
-      u,
+    return /* @__PURE__ */ t(vn, { asChild: !0, children: y ? /* @__PURE__ */ t(
+      y,
       {
         href: e.url,
-        className: n,
+        className: s,
         "aria-current": e.isActive ? "page" : void 0,
-        ...v,
+        ...j,
         children: r
       }
     ) : /* @__PURE__ */ t(
       "a",
       {
         href: e.url,
-        className: n,
+        className: s,
         "aria-current": e.isActive ? "page" : void 0,
         children: r
       }
-    ) }, P(e));
-  }, ce = (e, r) => {
-    const n = Z(e, r), c = r.subItems ?? [], f = te[n] ?? !1, Y = `${re}-${n.replace(/[^\w-]+/g, "-")}-submenu`, M = /* @__PURE__ */ t("span", { className: "truncate", children: r.title });
-    return c.length === 0 ? /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(
-      _,
-      {
-        asChild: !0,
-        isActive: r.isActive,
-        tooltip: r.title,
-        children: u ? /* @__PURE__ */ s(
-          u,
+    ) }, Ke(e));
+  }, ln = (e, n) => {
+    const r = He(e, n), s = n.subItems ?? [], d = sn[r] ?? !1, w = `${Qe}-${r.replace(/[^\w-]+/g, "-")}-submenu`, O = u ? "dot" : "full", Ae = M(n.badge, O, n.title), Ie = Ae ?? ((u || !d) && Y(s) ? { kind: "dot" } : null), Oe = u ? M(n.badge, "full", n.title) : null, Pe = Oe?.kind === "text" ? `${n.title} · ${Oe.text}` : n.title, fe = /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: n.title }), he = /* @__PURE__ */ t(B, { row: n, badge: Ae }), Be = u ? null : P(Ie), Le = u && Ie ? /* @__PURE__ */ t(me, { className: Ve }) : null;
+    if (s.length === 0) {
+      const E = /* @__PURE__ */ c(W, { children: [
+        ue(n),
+        fe,
+        he,
+        Be
+      ] });
+      return /* @__PURE__ */ c(be, { children: [
+        /* @__PURE__ */ t(ve, { asChild: !0, isActive: n.isActive, tooltip: Pe, children: y ? /* @__PURE__ */ t(
+          y,
           {
-            href: r.url,
-            "aria-current": r.isActive ? "page" : void 0,
-            ...v,
-            children: [
-              w(r),
-              M
-            ]
+            href: n.url,
+            "aria-current": n.isActive ? "page" : void 0,
+            ...j,
+            children: E
           }
-        ) : /* @__PURE__ */ s(
+        ) : /* @__PURE__ */ t(
           "a",
           {
-            href: r.url,
-            "aria-current": r.isActive ? "page" : void 0,
-            children: [
-              w(r),
-              M
-            ]
-          }
-        )
-      }
-    ) }, n) : x ? /* @__PURE__ */ t(D, { children: /* @__PURE__ */ s(j, { children: [
-      /* @__PURE__ */ s(q, { modal: !1, children: [
-        /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ t(K, { asChild: !0, children: /* @__PURE__ */ s(
-          _,
-          {
-            ref: S(n),
-            type: "button",
-            isActive: r.isActive,
-            onFocus: () => {
-              p.current = n;
-            },
-            children: [
-              w(r),
-              M
-            ]
+            href: n.url,
+            "aria-current": n.isActive ? "page" : void 0,
+            children: E
           }
-        ) }) }),
+        ) }),
+        Le
+      ] }, r);
+    }
+    return u ? /* @__PURE__ */ c(be, { children: [
+      /* @__PURE__ */ c(J, { children: [
+        /* @__PURE__ */ c($e, { modal: !1, children: [
+          /* @__PURE__ */ t(Ge, { asChild: !0, children: /* @__PURE__ */ t(Q, { asChild: !0, children: /* @__PURE__ */ c(
+            ve,
+            {
+              ref: K(r),
+              type: "button",
+              isActive: n.isActive,
+              onFocus: () => {
+                F.current = r;
+              },
+              children: [
+                ue(n),
+                fe,
+                he
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ t(
+            De,
+            {
+              side: "right",
+              align: "start",
+              sideOffset: 8,
+              className: "min-w-48",
+              children: s.map(an)
+            }
+          )
+        ] }),
         /* @__PURE__ */ t(
-          Q,
+          X,
           {
             side: "right",
-            align: "start",
-            sideOffset: 8,
-            className: "min-w-48",
-            children: c.map(se)
+            align: "center",
+            hidden: !u,
+            children: Pe
           }
         )
       ] }),
-      /* @__PURE__ */ t(
-        O,
-        {
-          side: "right",
-          align: "center",
-          hidden: !x,
-          children: r.title
-        }
-      )
-    ] }) }, n) : /* @__PURE__ */ s(D, { children: [
-      /* @__PURE__ */ s(
-        _,
+      Le
+    ] }, r) : /* @__PURE__ */ c(be, { children: [
+      /* @__PURE__ */ c(
+        ve,
         {
-          ref: S(n),
+          ref: K(r),
           type: "button",
-          isActive: r.isActive,
-          tooltip: r.title,
-          "aria-expanded": f,
-          "aria-controls": Y,
+          isActive: n.isActive,
+          tooltip: n.title,
+          "aria-expanded": d,
+          "aria-controls": w,
           onFocus: () => {
-            p.current = n;
+            F.current = r;
           },
-          onClick: () => H((m) => ({ ...m, [n]: !m[n] })),
+          onClick: () => Re((E) => ({ ...E, [r]: !E[r] })),
           children: [
-            w(r),
-            M,
+            ue(n),
+            fe,
+            he,
+            Be,
             /* @__PURE__ */ t(
-              k,
+              ne,
               {
-                name: f ? "ChevronDown" : "ChevronRight",
-                className: "text-d-muted-foreground ml-auto size-4 shrink-0 group-data-[collapsible=icon]:hidden"
+                name: "ChevronRight",
+                className: h(
+                  "text-d-muted-foreground size-4 shrink-0 group-data-[collapsible=icon]:hidden",
+                  "transition-transform motion-reduce:transition-none",
+                  f.motion.duration,
+                  f.motion.ease,
+                  d && "rotate-90"
+                )
               }
             )
           ]
         }
       ),
-      f && /* @__PURE__ */ t(Ae, { id: Y, children: c.map((m) => /* @__PURE__ */ t(we, { children: ie(m) }, P(m))) })
-    ] }, n);
-  }, y = (e, r = !0, n) => /* @__PURE__ */ s(
-    z,
-    {
-      role: n ? "group" : void 0,
-      "aria-label": n,
-      children: [
-        r && e.title && /* @__PURE__ */ t(xe, { children: e.title }),
-        /* @__PURE__ */ t(Se, { children: /* @__PURE__ */ t(Ne, { children: e.items.map((c) => ce(e, c)) }) })
-      ]
-    },
-    e.title
-  ), R = (e) => {
-    const r = T(e, "sm");
-    return r || /* @__PURE__ */ t(
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: h(
+            "grid transition-[grid-template-rows,visibility] motion-reduce:transition-none",
+            f.motion.duration,
+            f.motion.ease,
+            d ? "visible grid-rows-[1fr]" : "invisible grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ t("div", { className: "overflow-hidden", children: /* @__PURE__ */ t(Rn, { id: w, children: s.map((E) => /* @__PURE__ */ t(Tn, { children: cn(E) }, Ke(E))) }) })
+        }
+      )
+    ] }, r);
+  }, q = (e, n = !0, r) => {
+    const s = u ? null : M(e.badge, "full", e.title);
+    return /* @__PURE__ */ c(
+      pe,
+      {
+        role: r ? "group" : void 0,
+        "aria-label": r,
+        children: [
+          n && e.title && /* @__PURE__ */ c(Sn, { children: [
+            /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: e.title }),
+            /* @__PURE__ */ t(B, { row: e, badge: s }),
+            P(s)
+          ] }),
+          /* @__PURE__ */ t(En, { children: /* @__PURE__ */ t(yn, { children: e.items.map((d) => ln(e, d)) }) })
+        ]
+      },
+      e.title
+    );
+  }, U = (e) => {
+    const n = Z(e, "sm");
+    return n || /* @__PURE__ */ t(
       "span",
       {
         "aria-hidden": "true",
-        className: "flex size-4 shrink-0 items-center justify-center text-xs font-semibold uppercase",
+        className: h(
+          "flex shrink-0 items-center justify-center text-xs font-semibold uppercase",
+          _e.rail.fallbackGlyph
+        ),
         children: e.title.charAt(0)
       }
     );
-  }, ae = (e, r) => {
-    const n = `${r} ${e.title}`, c = r === A, f = /* @__PURE__ */ s(
-      Ce,
+  }, Me = (e) => e.items.some(
+    (n) => Y([n]) || Y(n.subItems)
+  ), dn = (e, n) => {
+    const r = `${n} ${e.title}`, s = n === z, d = M(
+      e.badge,
+      s ? "full" : "dot",
+      e.title
+    ), w = d ?? (!s && Me(e) ? { kind: "dot" } : null), O = /* @__PURE__ */ c(
+      An,
       {
-        value: String(r),
-        ref: c ? S(C) : void 0,
-        onFocus: c ? () => {
-          p.current = C;
+        value: String(n),
+        ref: s ? K(ee) : void 0,
+        onFocus: s ? () => {
+          F.current = ee;
         } : void 0,
-        className: d(
+        className: h(
           "text-d-sidebar-foreground/70 h-8 min-w-0 flex-initial justify-start gap-0 p-2",
-          // Overrides the `transition-all duration-200` the primitive inherits
-          // from `focusRing`: `all` would also pick up the width the label
-          // animation drives from the child, and 200ms/`ease-out` is not the
-          // house curve.
-          //
-          // No `interaction.active` here. These tabs are styled as sidebar rows,
-          // and no row in the sidebar squashes — `SidebarMenuButton` has no
-          // press state at all, and `app-sidebar-mobile.tsx` turns the token
-          // down in as many words ("that is the button squash, wrong on a list
-          // row"). A tab that squashed above nav rows that do not would break
-          // the rail's homogeneity, which is the same reason the icon-mode
-          // selector button below refuses it.
+          // Overrides the `transition-all` inherited from `focusRing`: `all`
+          // would also pick up the width the label animation drives from the
+          // child. No `interaction.active` either — no sidebar row squashes.
           "transition-[box-shadow,background-color,border-color,color]",
-          l.motion.duration,
-          l.motion.ease,
-          // Only the *unselected* tabs take a hover tint.
-          // `hover:bg-d-sidebar-accent/50` has specificity 0-2-0 and so beat the
-          // selected tab's own background, halving its alpha (0.4 -> 0.2): the
-          // hover *lightened* the selected tab instead of darkening it. The
-          // pointer query is the second half of the same fix — without it a tap
-          // on a tablet (>= 768px, where this bar is rendered) leaves the hover
-          // tint stuck on the tab it opened.
-          !c && "[@media(hover:hover)_and_(pointer:fine)]:hover:bg-d-sidebar-accent/50 [@media(hover:hover)_and_(pointer:fine)]:hover:text-d-sidebar-accent-foreground",
-          c && "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-semibold shadow-none"
+          f.motion.duration,
+          f.motion.ease,
+          // Only the *unselected* tabs take a hover tint: unguarded it beat the
+          // selected tab's own background and *lightened* it. The pointer query
+          // keeps a tap on a tablet from leaving the tint stuck.
+          !s && "[@media(hover:hover)_and_(pointer:fine)]:hover:bg-d-sidebar-accent/50 [@media(hover:hover)_and_(pointer:fine)]:hover:text-d-sidebar-accent-foreground",
+          s && "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-semibold shadow-none"
         ),
         children: [
-          R(e),
+          w && !s ? /* @__PURE__ */ c("span", { className: "relative inline-flex shrink-0", children: [
+            U(e),
+            /* @__PURE__ */ t(me, { className: "absolute -top-0.5 -right-0.5" })
+          ] }) : U(e),
+          /* @__PURE__ */ t(B, { row: e, badge: d }),
           /* @__PURE__ */ t(
             "span",
             {
-              className: d(
-                // Deliberate exception: `grid-template-columns` is a layout
-                // property, so this animation runs on the main thread and cannot be
-                // composited. It is kept on purpose — it is the only CSS-only way to
-                // animate to the *content's* width (`width: auto` is not
-                // animatable), and the alternative is a JS measurement or a
-                // `max-width` guess to keep in sync with the longest title. The cost
-                // is bounded by there being a handful of tabs, each reflowing a
-                // single text node. Do not "fix" this into a transform.
+              className: h(
+                // Deliberate exception: this animates a layout property on the
+                // main thread. It is the only CSS-only way to reach the *content's*
+                // width, and the cost is bounded by a handful of tabs. Do not
+                // "fix" it into a transform.
                 "grid grid-cols-[0fr] transition-[grid-template-columns] motion-reduce:transition-none",
-                l.motion.duration,
-                l.motion.ease,
-                c && "grid-cols-[1fr]"
+                f.motion.duration,
+                f.motion.ease,
+                s && "grid-cols-[1fr]"
               ),
-              children: /* @__PURE__ */ t(
+              children: /* @__PURE__ */ c(
                 "span",
                 {
-                  className: d(
-                    // `text-ellipsis` needs all three of overflow/nowrap/ellipsis on
-                    // this box: it is the grid item, so the 0fr/1fr column is what
-                    // gives it the definite width the text overflows.
+                  className: h(
+                    // On this box because it is the grid item: the 0fr/1fr column is
+                    // what gives it the definite width the text overflows.
                     "overflow-hidden text-ellipsis whitespace-nowrap",
-                    // Clipping alone let the text slide out from under the icon with a
-                    // hard edge, so it fades. Asymmetric on purpose, and both halves
-                    // are timed against the *same* front-loaded curve the width uses —
-                    // which covers ~90% of its travel in the first quarter of its
-                    // 160ms, so "half the duration" would not have been half the
-                    // distance.
-                    //   Exit: 60ms, no delay. Measured, the tab is ~91% shut 43ms in,
-                    //   so anything slower leaves the text visibly under the closing
-                    //   edge; at 60ms on this curve it is at ~2% opacity by then.
-                    //   Entry: delayed 70ms, by which point the box is already ~88%
-                    //   open. That delay doubles as the ellipsis mitigation — the
-                    //   narrow "A…"/"Am…" intermediate states play out while the text
-                    //   is still transparent.
+                    // Asymmetric on purpose: the entry delay doubles as the ellipsis
+                    // mitigation — the narrow "A…"/"Am…" intermediate states play out
+                    // while the text is still transparent.
                     "transition-opacity motion-reduce:transition-none",
-                    l.motion.ease,
-                    c ? "opacity-100 delay-[70ms] duration-[140ms]" : "opacity-0 delay-0 duration-[60ms]"
+                    f.motion.ease,
+                    s ? "opacity-100 delay-[70ms] duration-[140ms]" : "opacity-0 delay-0 duration-[60ms]"
                   ),
-                  children: /* @__PURE__ */ t("span", { className: "pl-2", children: e.title })
+                  children: [
+                    /* @__PURE__ */ t("span", { className: "pl-2", children: e.title }),
+                    s && P(w, "ml-1 align-middle")
+                  ]
                 }
               )
             }
           )
         ]
       },
-      n
+      r
     );
-    return /* @__PURE__ */ s(j, { children: [
-      /* @__PURE__ */ t(K, { asChild: !0, children: f }),
-      /* @__PURE__ */ t(O, { side: "right", align: "center", hidden: c, children: e.title })
-    ] }, n);
-  }, oe = () => {
-    const e = i[A];
-    return /* @__PURE__ */ s(E, { children: [
-      /* @__PURE__ */ t(z, { className: "pb-0", children: /* @__PURE__ */ s(j, { children: [
-        /* @__PURE__ */ s(q, { modal: !1, children: [
-          /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ t(K, { asChild: !0, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ c(J, { children: [
+      /* @__PURE__ */ t(Q, { asChild: !0, children: O }),
+      /* @__PURE__ */ t(X, { side: "right", align: "center", hidden: s, children: e.title })
+    ] }, r);
+  }, un = () => {
+    const e = o[z], n = o.some(
+      (r, s) => s !== z && (Y([r]) || Me(r))
+    );
+    return /* @__PURE__ */ c(W, { children: [
+      /* @__PURE__ */ t(pe, { className: "pb-0", children: /* @__PURE__ */ c(J, { children: [
+        /* @__PURE__ */ c($e, { modal: !1, children: [
+          /* @__PURE__ */ t(Ge, { asChild: !0, children: /* @__PURE__ */ t(Q, { asChild: !0, children: /* @__PURE__ */ c(
             "button",
             {
               type: "button",
-              ref: S(C),
+              ref: K(ee),
               onFocus: () => {
-                p.current = C;
+                F.current = ee;
               },
               "aria-label": `Navigation group: ${e.title}`,
-              className: d(
+              className: h(
+                // The glyph's centre stays where the expanded
+                // `TabsTrigger` puts it, which is what makes the swap
+                // read as a change of shape instead of a jump.
+                // `relative` only anchors the badge dot — this button is
+                // not `overflow-hidden`.
+                "group/tab-selector relative flex h-10 w-8 cursor-pointer flex-col items-center gap-0 pt-1.5 pb-0.5",
                 // Not `SidebarMenuButton`: in icon mode the primitive
-                // forces `!size-8 !p-2`, which would flatten the
-                // icon-over-chevron stack this button is.
-                "group/tab-selector flex h-10 w-8 cursor-pointer flex-col items-center gap-0.5 pt-2 pb-0.5",
-                // `renderGroupTabIcon` asks for `size="sm"` (20px) and
-                // relies on the host to bring it down; expanded, that host
-                // is `TabsTrigger`. Without the same rule here the icon
-                // rendered 20px wide and was squashed to 16 tall by the
-                // column — measured, and visibly distorted. `:not([class*='size-'])`
-                // is what keeps it off the chevron's own `size-3`.
-                "[&_svg:not([class*='size-'])]:size-4",
+                // forces a `!size-8` square, which would flatten the
+                // icon-over-chevron stack this button is — so the rail's
+                // 20px glyph is restated here rather than inherited from
+                // `navTokens.rail.button`. `:not([class*='size-'])` is
+                // what keeps the rule off the chevron's own `size-3`.
+                "[&_svg:not([class*='size-'])]:size-5",
                 // Same surface as the selected tab when expanded, so the
                 // swap reads as a change of shape, not of state.
                 "bg-d-sidebar-accent text-d-sidebar-accent-foreground font-semibold",
-                l.radius.default,
-                l.focusRing
+                f.radius.default,
+                f.focusRing
               ),
               children: [
-                R(e),
+                U(e),
                 /* @__PURE__ */ t(
-                  k,
+                  ne,
                   {
                     name: "ChevronDown",
-                    className: d(
+                    className: h(
                       "text-d-sidebar-foreground/70 size-3 shrink-0 transition-colors",
                       "group-hover/tab-selector:text-d-sidebar-accent-foreground",
                       "group-data-[state=open]/tab-selector:text-d-sidebar-accent-foreground",
                       "animate-in fade-in motion-reduce:animate-none motion-reduce:transition-none"
                     )
                   }
-                )
+                ),
+                n && /* @__PURE__ */ t(me, { className: Ve })
               ]
             }
           ) }) }),
           /* @__PURE__ */ t(
-            Q,
+            De,
             {
               side: "right",
               align: "start",
@@ -390,78 +539,132 @@ function Oe({
               "aria-label": "Navigation groups",
               className: "max-w-64 min-w-48",
               children: /* @__PURE__ */ t(
-                ue,
+                pn,
                 {
-                  value: String(A),
-                  onValueChange: (r) => G(Number(r)),
-                  children: i.map((r, n) => /* @__PURE__ */ s(
-                    he,
-                    {
-                      value: String(n),
-                      className: "cursor-pointer gap-2 [&>svg]:size-4",
-                      children: [
-                        R(r),
-                        /* @__PURE__ */ t("span", { className: "truncate", children: r.title })
-                      ]
-                    },
-                    `${n} ${r.title}`
-                  ))
+                  value: String(z),
+                  onValueChange: (r) => de(Number(r)),
+                  children: o.map((r, s) => {
+                    const d = M(
+                      r.badge,
+                      "full",
+                      r.title
+                    );
+                    return /* @__PURE__ */ c(
+                      bn,
+                      {
+                        value: String(s),
+                        className: "cursor-pointer gap-2 [&>svg]:size-4",
+                        children: [
+                          U(r),
+                          /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: r.title }),
+                          /* @__PURE__ */ t(B, { row: r, badge: d }),
+                          P(d)
+                        ]
+                      },
+                      `${s} ${r.title}`
+                    );
+                  })
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ t(O, { side: "right", align: "center", children: e.title })
+        /* @__PURE__ */ t(X, { side: "right", align: "center", children: e.title })
       ] }) }),
-      /* @__PURE__ */ t(ve, {}),
-      y(e, !1, e.title)
+      /* @__PURE__ */ t(Nn, {}),
+      q(e, !1, e.title)
     ] });
-  }, le = () => /* @__PURE__ */ s(
-    ye,
+  }, fn = () => /* @__PURE__ */ c(
+    Mn,
     {
-      value: String(A),
-      onValueChange: (e) => G(Number(e)),
+      value: String(z),
+      onValueChange: (e) => de(Number(e)),
       className: "gap-0",
       children: [
-        /* @__PURE__ */ t(z, { className: "pb-0", children: /* @__PURE__ */ t(
-          Me,
+        /* @__PURE__ */ t(pe, { className: "pb-0", children: /* @__PURE__ */ t(
+          Cn,
           {
-            className: d(
-              // `justify-start`: tabs are sized by their content now, not stretched
-              // to equal widths, so the row packs to the left and the space the
-              // selected tab does not need stays empty.
+            className: h(
+              // Tabs are sized by their content, not stretched to equal widths.
               "h-auto w-full justify-start gap-1 bg-transparent p-0"
-              // 3rem of rail leaves no room for a row of tabs: they stack into an
-              // icon-only strip instead of falling back to a flat list, so the
-              // "one group at a time" model survives the collapse.
             ),
-            children: i.map((e, r) => ae(e, r))
+            children: o.map((e, n) => dn(e, n))
           }
         ) }),
-        i.map((e, r) => /* @__PURE__ */ t(Te, { value: String(r), children: y(e, !1) }, `${r} ${e.title}`))
+        o.map((e, n) => /* @__PURE__ */ t(kn, { value: String(n), children: q(e, !1) }, `${n} ${e.title}`))
       ]
     }
-  );
-  return V ? /* @__PURE__ */ t(W, { collapsible: g, ...F, children: /* @__PURE__ */ t(
-    de,
+  ), Ce = a ? "Collapse sidebar to icons" : "Keep sidebar open", ke = (e) => /* @__PURE__ */ c(J, { children: [
+    /* @__PURE__ */ t(Q, { asChild: !0, children: /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        "data-sidebar": "pin",
+        "aria-label": Ce,
+        "aria-hidden": e ? void 0 : !0,
+        tabIndex: e ? void 0 : -1,
+        onClick: () => H(!a),
+        className: h(
+          "text-d-sidebar-foreground/70 hover:bg-d-sidebar-accent hover:text-d-sidebar-accent-foreground flex size-8 shrink-0 cursor-pointer items-center justify-center",
+          f.radius.default,
+          f.focusRing,
+          !e && "pointer-events-none opacity-0"
+        ),
+        children: /* @__PURE__ */ t(ne, { name: a ? "PinOff" : "Pin", size: "xs" })
+      }
+    ) }),
+    /* @__PURE__ */ t(X, { side: "bottom", align: "end", children: Ce })
+  ] }), hn = () => {
+    if (!p)
+      return v ? /* @__PURE__ */ t(ze, { children: v }) : null;
+    const e = A || a, n = te === "right";
+    return /* @__PURE__ */ t(ze, { children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+      n && ke(e),
+      /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: v }),
+      !n && ke(e)
+    ] }) });
+  };
+  return ie ? /* @__PURE__ */ t(Fe, { collapsible: N, side: te, ...k, children: /* @__PURE__ */ t(
+    mn,
     {
-      navigation: i,
-      navigationFooter: a,
-      headerContent: h,
-      footerContent: B,
-      linkComponent: u,
-      linkProps: v
+      navigation: o,
+      navigationFooter: l,
+      headerContent: v,
+      footerContent: ge,
+      linkComponent: y,
+      linkProps: j
     }
-  ) }) : /* @__PURE__ */ s(W, { collapsible: g, ...F, children: [
-    h && /* @__PURE__ */ t(me, { children: h }),
-    /* @__PURE__ */ t(be, { children: ne ? x ? oe() : le() : i.map(
-      (e) => y(e, i.length > 1)
-    ) }),
-    a?.map((e) => y(e)),
-    B,
-    L && /* @__PURE__ */ t(ge, {})
-  ] });
+  ) }) : /* @__PURE__ */ c(
+    Fe,
+    {
+      ref: I,
+      collapsible: N,
+      side: te,
+      ...k,
+      onMouseEnter: (e) => {
+        k.onMouseEnter?.(e), Ze();
+      },
+      onMouseLeave: (e) => {
+        k.onMouseLeave?.(e), en();
+      },
+      onFocus: (e) => {
+        k.onFocus?.(e), nn();
+      },
+      onBlur: (e) => {
+        k.onBlur?.(e), tn();
+      },
+      children: [
+        hn(),
+        /* @__PURE__ */ t(wn, { ref: ce, children: on ? u ? un() : fn() : o.map(
+          (e) => q(e, o.length > 1)
+        ) }),
+        l?.map((e) => q(e)),
+        ge,
+        We && /* @__PURE__ */ t(xn, {})
+      ]
+    }
+  );
 }
 export {
-  Oe as AppSidebar
+  Un as AppSidebar
 };