@rafal.lemieszewski/tide-ui 0.87.2 → 0.87.4

package/dist/es/components/product/app-frame.js

@@ -1,15 +1,15 @@
-import { jsxs as l, jsx as e, Fragment as X } from "react/jsx-runtime";
-import * as u from "react";
-import { SidebarProvider as ie, SidebarInset as te, Sidebar as ne, SidebarHeader as ae, SidebarGroup as R, SidebarGroupContent as U, SidebarMenu as j, SidebarMenuItem as O, SidebarMenuButton as x, SidebarGroupLabel as q, SidebarMenuSub as Y, SidebarMenuSubItem as _, SidebarMenuSubButton as ee, SidebarFooter as oe, SidebarRail as se, useSidebar as ce, SidebarTrigger as de } from "../fundamental/sidebar.js";
+import { jsxs as l, jsx as e, Fragment as Q } from "react/jsx-runtime";
+import * as h from "react";
+import { SidebarProvider as ie, SidebarInset as te, Sidebar as ne, SidebarHeader as ae, SidebarGroup as j, SidebarGroupContent as D, SidebarMenu as I, SidebarMenuItem as O, SidebarMenuButton as y, SidebarGroupLabel as q, SidebarMenuSub as Y, SidebarMenuSubItem as _, SidebarMenuSubButton as ee, SidebarFooter as oe, SidebarRail as se, useSidebar as ce, SidebarTrigger as de } from "../fundamental/sidebar.js";
 import { Button as pe } from "../fundamental/button.js";
 import { Icon as s } from "../fundamental/icon.js";
-import { Bell as he, CircleHelp as ue, Globe as me, Container as fe, Anchor as be, Ship as ge, TrendingUp as ve, ScrollText as xe, ShieldCheck as ye, House as Ce, LayoutDashboard as we, Search as Z, ChevronRight as re, ChevronDown as ke, Check as K, User as Ne, Settings as Se, LogOut as ze, RotateCcw as Ae } from "lucide-react";
+import { Bell as he, CircleHelp as ue, Globe as me, Container as fe, Anchor as be, Ship as ge, TrendingUp as ve, ScrollText as xe, ShieldCheck as ye, House as Ce, LayoutDashboard as we, Search as W, ChevronRight as re, ChevronDown as ke, Check as K, User as Se, Settings as Ne, LogOut as ze, RotateCcw as Ae } from "lucide-react";
 import { Avatar as z, AvatarImage as A, AvatarFallback as M } from "../fundamental/avatar.js";
-import { Separator as $ } from "../fundamental/separator.js";
+import { Separator as J } from "../fundamental/separator.js";
 import { Kbd as E } from "../fundamental/kbd.js";
-import { DropdownMenu as P, DropdownMenuTrigger as W, DropdownMenuContent as G, DropdownMenuLabel as T, DropdownMenuSeparator as H, DropdownMenuItem as y } from "../fundamental/dropdown-menu.js";
-import { TooltipProvider as Me, Tooltip as C, TooltipTrigger as w, TooltipContent as k } from "../fundamental/tooltip.js";
-import { CommandDialog as Ve, CommandInput as Le, CommandList as He, CommandEmpty as Te, CommandGroup as D, CommandItem as V } from "../fundamental/command.js";
+import { DropdownMenu as G, DropdownMenuTrigger as $, DropdownMenuContent as X, DropdownMenuLabel as H, DropdownMenuSeparator as T, DropdownMenuItem as C } from "../fundamental/dropdown-menu.js";
+import { TooltipProvider as Me, Tooltip as w, TooltipTrigger as k, TooltipContent as S } from "../fundamental/tooltip.js";
+import { CommandDialog as Ve, CommandInput as Le, CommandList as Te, CommandEmpty as He, CommandGroup as F, CommandItem as V } from "../fundamental/command.js";
 const Ee = {
   name: "John Doe",
   email: "john@example.com",
@@ -133,44 +133,44 @@ const Ee = {
       isActive: !1
     }
   ]
-}, B = (o) => o.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase(), I = (o) => o.split(" ").filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase(), F = () => typeof navigator < "u" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+}, Z = (o) => o.split(" ").filter(Boolean).map((a) => a[0]).join("").slice(0, 2).toUpperCase(), B = (o) => o.split(" ").filter(Boolean).map((a) => a[0]).join("").slice(0, 2).toUpperCase(), P = () => typeof navigator < "u" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
 function le(o) {
-  const n = {};
+  const a = {};
   return [
     ...o.main || [],
     ...o.operations || [],
     ...o.intelligence || [],
     ...o.support || []
-  ].forEach((t) => {
-    if (t.items && t.items.length > 0) {
-      const p = t.items.some((h) => h.isActive);
-      n[t.title] = p;
+  ].forEach((n) => {
+    if (n.items && n.items.length > 0) {
+      const p = n.items.some((u) => u.isActive);
+      a[n.title] = p;
     }
-  }), n;
+  }), a;
 }
-function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMode: p, onNavigationModeChange: h }) {
-  const [f, c] = u.useState(!1), [v, N] = u.useState(""), [b, a] = u.useState(
+function je({ navigationData: o, user: a, teams: f, onNavigate: n, navigationMode: p, onNavigationModeChange: u }) {
+  const [b, d] = h.useState(!1), [x, g] = h.useState(""), [v, L] = h.useState(
     () => le(o)
-  ), [d, g] = u.useState(m[0]), J = (r) => {
-    a((i) => ({
-      ...i,
-      [r]: !i[r]
+  ), [m, R] = h.useState(f[0]), U = (r) => {
+    L((t) => ({
+      ...t,
+      [r]: !t[r]
     }));
-  }, Q = (r) => r.items && r.items.some((i) => i.isActive), L = (r) => {
+  }, i = (r) => r.items && r.items.some((t) => t.isActive), c = (r) => {
     if (r.items && r.items.length > 0) {
-      const i = r.items.find((S) => S.isActive);
-      if (i)
-        return `${r.title} → ${i.title}`;
+      const t = r.items.find((N) => N.isActive);
+      if (t)
+        return `${r.title} → ${t.title}`;
     }
     return r.title;
   };
-  return u.useEffect(() => {
-    const r = (i) => {
-      i.key === "k" && (i.metaKey || i.ctrlKey) && (i.preventDefault(), c((S) => !S));
+  return h.useEffect(() => {
+    const r = (t) => {
+      t.key === "k" && (t.metaKey || t.ctrlKey) && (t.preventDefault(), d((N) => !N));
     };
     return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, []), u.useEffect(() => {
-    a(le(o));
+  }, []), h.useEffect(() => {
+    L(le(o));
   }, [o]), /* @__PURE__ */ l(Me, { delayDuration: 100, children: [
     /* @__PURE__ */ l(ne, { variant: "sidebar", collapsible: "icon", className: "flex h-full flex-col", children: [
       /* @__PURE__ */ e(ae, { className: "sticky top-0 z-10 h-12 border-b border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-2 box-border", children: /* @__PURE__ */ e("div", { className: "flex h-[22px] w-7 items-center justify-center", children: /* @__PURE__ */ e(
@@ -197,47 +197,47 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
           "data-sidebar": "content",
           children: [
             /* @__PURE__ */ e("div", { className: "p-[var(--space-m)] pt-[var(--space-s)] group-data-[collapsible=icon]:px-2", children: /* @__PURE__ */ l("div", { className: "relative", children: [
-              /* @__PURE__ */ e("div", { className: "absolute top-1/2 left-2 -translate-y-1/2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ e(s, { name: Z, size: "m", color: "tertiary" }) }),
+              /* @__PURE__ */ e("div", { className: "absolute top-1/2 left-2 -translate-y-1/2 group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ e(s, { name: W, size: "m", color: "tertiary" }) }),
               /* @__PURE__ */ l("div", { className: "group-data-[collapsible=icon]:hidden", children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => c(!0),
+                    onClick: () => d(!0),
                     className: "text-body-md flex h-8 w-full cursor-pointer items-center rounded-m border border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] px-3 py-1 pr-20 pl-8 text-left text-[var(--color-text-tertiary)] transition-colors hover:border-[var(--color-border-primary-medium)] hover:!bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)]/20 focus:ring-offset-0 focus:outline-none active:border-[var(--color-border-primary-medium)]",
                     children: "Search"
                   }
                 ),
                 /* @__PURE__ */ l("div", { className: "absolute top-1/2 right-2 flex -translate-y-1/2 gap-1", children: [
-                  /* @__PURE__ */ e(E, { size: "s", children: F() ? "⌘" : "Ctrl" }),
+                  /* @__PURE__ */ e(E, { size: "s", children: P() ? "⌘" : "Ctrl" }),
                   /* @__PURE__ */ e(E, { size: "s", children: "K" })
                 ] })
               ] }),
-              /* @__PURE__ */ l(C, { delayDuration: 500, children: [
-                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
+              /* @__PURE__ */ l(w, { delayDuration: 500, children: [
+                /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: () => c(!0),
+                    onClick: () => d(!0),
                     className: "hidden h-8 w-8 cursor-pointer items-center justify-center rounded border border-[var(--color-border-primary-subtle)] bg-transparent transition-all duration-200 group-data-[collapsible=icon]:flex hover:border-[var(--color-border-primary-medium)] hover:!bg-[var(--color-background-neutral-subtlest-hovered)] focus:border-[var(--color-border-brand-bold)] focus:ring-2 focus:ring-[var(--color-border-brand-bold)]/20 focus:ring-offset-0 focus:outline-none active:border-[var(--color-border-primary-medium)]",
                     "aria-label": "Search",
-                    children: /* @__PURE__ */ e(s, { name: Z, size: "m", color: "tertiary" })
+                    children: /* @__PURE__ */ e(s, { name: W, size: "m", color: "tertiary" })
                   }
                 ) }),
-                /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e(S, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ e("span", { children: "Search" }),
                   /* @__PURE__ */ l("div", { className: "flex gap-1", children: [
-                    /* @__PURE__ */ e(E, { size: "s", variant: "dark", children: F() ? "⌘" : "Ctrl" }),
+                    /* @__PURE__ */ e(E, { size: "s", variant: "dark", children: P() ? "⌘" : "Ctrl" }),
                     /* @__PURE__ */ e(E, { size: "s", variant: "dark", children: "K" })
                   ] })
                 ] }) })
               ] })
             ] }) }),
-            /* @__PURE__ */ e(R, { className: "pb-1 mt-1 p-[var(--space-s)]", children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.main.map((r) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(C, { children: [
-              /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
-                x,
+            /* @__PURE__ */ e(j, { className: "pb-1 mt-1 p-[var(--space-s)]", children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(I, { children: o.main.map((r) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(w, { children: [
+              /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ l(
+                y,
                 {
                   isActive: r.isActive,
-                  onClick: (i) => {
-                    t && (i.preventDefault(), t(r.url));
+                  onClick: (t) => {
+                    n && (t.preventDefault(), n(r.url));
                   },
                   children: [
                     /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
@@ -245,17 +245,17 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+              /* @__PURE__ */ e(S, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: c(r) })
             ] }) }, r.title)) }) }) }),
-            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e($, { layout: "vertical" }) }),
-            /* @__PURE__ */ l(R, { className: "mt-1 p-[var(--space-s)]", children: [
+            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(J, { layout: "vertical" }) }),
+            /* @__PURE__ */ l(j, { className: "mt-1 p-[var(--space-s)]", children: [
               /* @__PURE__ */ e(q, { className: "py-1 pb-1.5 group-data-[collapsible=icon]:hidden", children: "Operations" }),
-              /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.operations.map((r) => /* @__PURE__ */ e(O, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(X, { children: [
+              /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(I, { children: o.operations.map((r) => /* @__PURE__ */ e(O, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(Q, { children: [
                 /* @__PURE__ */ e("div", { className: "group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ l(
-                  x,
+                  y,
                   {
                     isActive: r.isActive && !r.items?.length,
-                    onClick: () => J(r.title),
+                    onClick: () => U(r.title),
                     children: [
                       /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
                       /* @__PURE__ */ e("span", { children: r.title }),
@@ -264,57 +264,57 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                         {
                           name: re,
                           size: "s",
-                          className: `ml-auto transition-transform ${b[r.title] ? "rotate-90" : ""}`
+                          className: `ml-auto transition-transform ${v[r.title] ? "rotate-90" : ""}`
                         }
                       )
                     ]
                   }
                 ) }),
-                r.items && r.items.length > 0 && b[r.title] && /* @__PURE__ */ e(Y, { children: r.items.map((i) => /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
+                r.items && r.items.length > 0 && v[r.title] && /* @__PURE__ */ e(Y, { children: r.items.map((t) => /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
                   ee,
                   {
-                    isActive: i.isActive,
-                    onClick: (S) => {
-                      t && (S.preventDefault(), t(i.url));
+                    isActive: t.isActive,
+                    onClick: (N) => {
+                      n && (N.preventDefault(), n(t.url));
                     },
-                    children: /* @__PURE__ */ e("span", { children: i.title })
+                    children: /* @__PURE__ */ e("span", { children: t.title })
                   }
-                ) }, i.title)) }),
-                /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l(P, { children: [
-                  /* @__PURE__ */ l(C, { children: [
-                    /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
-                      x,
+                ) }, t.title)) }),
+                /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l(G, { children: [
+                  /* @__PURE__ */ l(w, { children: [
+                    /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e(
+                      y,
                       {
-                        isActive: Q(r),
+                        isActive: i(r),
                         className: "w-full justify-center",
                         children: /* @__PURE__ */ e(s, { name: r.icon, size: "s" })
                       }
                     ) }) }),
-                    /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+                    /* @__PURE__ */ e(S, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: c(r) })
                   ] }),
-                  /* @__PURE__ */ l(G, { side: "right", sideOffset: 8, align: "start", children: [
-                    /* @__PURE__ */ e(T, { className: "text-body-medium-sm font-medium", children: r.title }),
-                    /* @__PURE__ */ e(H, {}),
-                    r.items.map((i) => /* @__PURE__ */ e(
-                      y,
+                  /* @__PURE__ */ l(X, { side: "right", sideOffset: 8, align: "start", children: [
+                    /* @__PURE__ */ e(H, { className: "text-body-medium-sm font-medium", children: r.title }),
+                    /* @__PURE__ */ e(T, {}),
+                    r.items.map((t) => /* @__PURE__ */ e(
+                      C,
                       {
-                        className: i.isActive ? "bg-[var(--color-background-blue-subtle-selected)] text-[var(--color-text-brand-bold)]" : "",
+                        className: t.isActive ? "bg-[var(--color-background-blue-subtle-selected)] text-[var(--color-text-brand-bold)]" : "",
                         onSelect: () => {
-                          t && t(i.url);
+                          n && n(t.url);
                         },
-                        children: i.title
+                        children: t.title
                       },
-                      i.title
+                      t.title
                     ))
                   ] })
                 ] }) })
-              ] }) : /* @__PURE__ */ l(C, { children: [
-                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
-                  x,
+              ] }) : /* @__PURE__ */ l(w, { children: [
+                /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ l(
+                  y,
                   {
                     isActive: r.isActive,
-                    onClick: (i) => {
-                      t && (i.preventDefault(), t(r.url));
+                    onClick: (t) => {
+                      n && (t.preventDefault(), n(r.url));
                     },
                     children: [
                       /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
@@ -322,18 +322,18 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+                /* @__PURE__ */ e(S, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: c(r) })
               ] }) }, r.title)) }) })
             ] }),
-            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e($, { layout: "vertical" }) }),
-            /* @__PURE__ */ l(R, { className: "mt-1 p-[var(--space-s)]", children: [
+            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(J, { layout: "vertical" }) }),
+            /* @__PURE__ */ l(j, { className: "mt-1 p-[var(--space-s)]", children: [
               /* @__PURE__ */ e(q, { className: "py-1 pb-1.5 group-data-[collapsible=icon]:hidden", children: "Intelligence" }),
-              /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.intelligence.map((r) => /* @__PURE__ */ e(O, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(X, { children: [
+              /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(I, { children: o.intelligence.map((r) => /* @__PURE__ */ e(O, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(Q, { children: [
                 /* @__PURE__ */ e("div", { className: "group-data-[collapsible=icon]:hidden", children: /* @__PURE__ */ l(
-                  x,
+                  y,
                   {
                     isActive: r.isActive && !r.items?.length,
-                    onClick: () => J(r.title),
+                    onClick: () => U(r.title),
                     children: [
                       /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
                       /* @__PURE__ */ e("span", { children: r.title }),
@@ -342,57 +342,57 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                         {
                           name: re,
                           size: "s",
-                          className: `ml-auto transition-transform ${b[r.title] ? "rotate-90" : ""}`
+                          className: `ml-auto transition-transform ${v[r.title] ? "rotate-90" : ""}`
                         }
                       )
                     ]
                   }
                 ) }),
-                r.items && r.items.length > 0 && b[r.title] && /* @__PURE__ */ e(Y, { children: r.items.map((i) => /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
+                r.items && r.items.length > 0 && v[r.title] && /* @__PURE__ */ e(Y, { children: r.items.map((t) => /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
                   ee,
                   {
-                    isActive: i.isActive,
-                    onClick: (S) => {
-                      t && (S.preventDefault(), t(i.url));
+                    isActive: t.isActive,
+                    onClick: (N) => {
+                      n && (N.preventDefault(), n(t.url));
                     },
-                    children: /* @__PURE__ */ e("span", { children: i.title })
+                    children: /* @__PURE__ */ e("span", { children: t.title })
                   }
-                ) }, i.title)) }),
-                /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l(P, { children: [
-                  /* @__PURE__ */ l(C, { children: [
-                    /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
-                      x,
+                ) }, t.title)) }),
+                /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsible=icon]:block", children: /* @__PURE__ */ l(G, { children: [
+                  /* @__PURE__ */ l(w, { children: [
+                    /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e(
+                      y,
                       {
-                        isActive: Q(r),
+                        isActive: i(r),
                         className: "w-full justify-center",
                         children: /* @__PURE__ */ e(s, { name: r.icon, size: "s" })
                       }
                     ) }) }),
-                    /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+                    /* @__PURE__ */ e(S, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: c(r) })
                   ] }),
-                  /* @__PURE__ */ l(G, { side: "right", sideOffset: 8, align: "start", children: [
-                    /* @__PURE__ */ e(T, { className: "text-body-medium-sm font-medium", children: r.title }),
-                    /* @__PURE__ */ e(H, {}),
-                    r.items.map((i) => /* @__PURE__ */ e(
-                      y,
+                  /* @__PURE__ */ l(X, { side: "right", sideOffset: 8, align: "start", children: [
+                    /* @__PURE__ */ e(H, { className: "text-body-medium-sm font-medium", children: r.title }),
+                    /* @__PURE__ */ e(T, {}),
+                    r.items.map((t) => /* @__PURE__ */ e(
+                      C,
                       {
-                        className: i.isActive ? "bg-[var(--color-background-blue-subtle-selected)] text-[var(--color-text-brand-bold)]" : "",
+                        className: t.isActive ? "bg-[var(--color-background-blue-subtle-selected)] text-[var(--color-text-brand-bold)]" : "",
                         onSelect: () => {
-                          t && t(i.url);
+                          n && n(t.url);
                         },
-                        children: i.title
+                        children: t.title
                       },
-                      i.title
+                      t.title
                     ))
                   ] })
                 ] }) })
-              ] }) : /* @__PURE__ */ l(C, { children: [
-                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
-                  x,
+              ] }) : /* @__PURE__ */ l(w, { children: [
+                /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ l(
+                  y,
                   {
                     isActive: r.isActive,
-                    onClick: (i) => {
-                      t && (i.preventDefault(), t(r.url));
+                    onClick: (t) => {
+                      n && (t.preventDefault(), n(r.url));
                     },
                     children: [
                       /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
@@ -400,16 +400,16 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+                /* @__PURE__ */ e(S, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: c(r) })
               ] }) }, r.title)) }) })
             ] }),
-            /* @__PURE__ */ e(R, { className: "pb-2 p-[var(--space-s)] mt-auto", children: /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(j, { children: o.support.map((r) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(C, { children: [
-              /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ l(
-                x,
+            /* @__PURE__ */ e(j, { className: "pb-2 p-[var(--space-s)] mt-auto", children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(I, { children: o.support.map((r) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(w, { children: [
+              /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ l(
+                y,
                 {
                   isActive: r.isActive,
-                  onClick: (i) => {
-                    t && (i.preventDefault(), t(r.url));
+                  onClick: (t) => {
+                    n && (t.preventDefault(), n(r.url));
                   },
                   children: [
                     /* @__PURE__ */ e(s, { name: r.icon, size: "s" }),
@@ -417,13 +417,13 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e(k, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: L(r) })
+              /* @__PURE__ */ e(S, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: c(r) })
             ] }) }, r.title)) }) }) })
           ]
         }
       ),
-      /* @__PURE__ */ e(oe, { className: "sticky bottom-0 z-10 border-t border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-2", children: /* @__PURE__ */ e("div", { className: "group/user-menu rounded-m border border-[var(--color-border-primary-subtle)] transition-colors hover:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:rounded-none group-data-[collapsible=icon]:border-none", children: /* @__PURE__ */ l(P, { children: [
-        /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ l(
+      /* @__PURE__ */ e(oe, { className: "sticky bottom-0 z-10 border-t border-[var(--color-border-primary-subtle)] bg-[var(--color-surface-primary)] group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-2", children: /* @__PURE__ */ e("div", { className: "group/user-menu rounded-m border border-[var(--color-border-primary-subtle)] transition-colors hover:border-[var(--color-border-primary-medium)] group-data-[collapsible=icon]:rounded-none group-data-[collapsible=icon]:border-none", children: /* @__PURE__ */ l(G, { children: [
+        /* @__PURE__ */ e($, { asChild: !0, children: /* @__PURE__ */ l(
           pe,
           {
             variant: "ghost",
@@ -432,66 +432,66 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
               /* @__PURE__ */ l("div", { className: "flex w-full items-center gap-3 group-data-[collapsible=icon]:hidden", children: [
                 /* @__PURE__ */ l("div", { className: "relative flex-shrink-0", children: [
                   /* @__PURE__ */ l(z, { size: "m", type: "user", children: [
-                    /* @__PURE__ */ e(A, { src: n.avatarUrl, alt: n.name }),
-                    /* @__PURE__ */ e(M, { size: "m", type: "user", children: B(n.name) })
+                    /* @__PURE__ */ e(A, { src: a.avatarUrl, alt: a.name }),
+                    /* @__PURE__ */ e(M, { size: "m", type: "user", children: Z(a.name) })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "absolute -right-1 -bottom-1 rounded-[4px] border-2 border-white p-0", children: /* @__PURE__ */ l(z, { size: "xxs", type: "organization", children: [
-                    /* @__PURE__ */ e(A, { src: d.avatarUrl, alt: d.name }),
-                    /* @__PURE__ */ e(M, { size: "xxs", type: "organization", children: I(d.name) })
+                    /* @__PURE__ */ e(A, { src: m.avatarUrl, alt: m.name }),
+                    /* @__PURE__ */ e(M, { size: "xxs", type: "organization", children: B(m.name) })
                   ] }) })
                 ] }),
                 /* @__PURE__ */ l("div", { className: "min-w-0 flex-1 text-left", children: [
-                  /* @__PURE__ */ e("div", { className: "text-body-medium-sm truncate font-medium text-[var(--color-text-primary)]", children: n.name }),
+                  /* @__PURE__ */ e("div", { className: "text-body-medium-sm truncate font-medium text-[var(--color-text-primary)]", children: a.name }),
                   /* @__PURE__ */ l("div", { className: "text-body-xsm text-[var(--color-text-secondary)]", children: [
-                    d.role,
+                    m.role,
                     " at ",
-                    d.name
+                    m.name
                   ] })
                 ] }),
                 /* @__PURE__ */ e(s, { name: ke, size: "m", className: "opacity-50" })
               ] }),
               /* @__PURE__ */ l("div", { className: "relative hidden group-data-[collapsible=icon]:block", children: [
                 /* @__PURE__ */ l(z, { size: "s", type: "user", children: [
-                  /* @__PURE__ */ e(A, { src: n.avatarUrl, alt: n.name }),
-                  /* @__PURE__ */ e(M, { size: "s", type: "user", children: B(n.name) })
+                  /* @__PURE__ */ e(A, { src: a.avatarUrl, alt: a.name }),
+                  /* @__PURE__ */ e(M, { size: "s", type: "user", children: Z(a.name) })
                 ] }),
                 /* @__PURE__ */ e("div", { className: "absolute -right-1 -bottom-1 rounded-[2px] border-2 border-white bg-[var(--color-surface-primary)]", children: /* @__PURE__ */ l(z, { size: "xxs", type: "organization", children: [
-                  /* @__PURE__ */ e(A, { src: d.avatarUrl, alt: d.name }),
-                  /* @__PURE__ */ e(M, { size: "xxs", type: "organization", children: I(d.name) })
+                  /* @__PURE__ */ e(A, { src: m.avatarUrl, alt: m.name }),
+                  /* @__PURE__ */ e(M, { size: "xxs", type: "organization", children: B(m.name) })
                 ] }) })
               ] })
             ]
           }
         ) }),
         /* @__PURE__ */ l(
-          G,
+          X,
           {
             className: "w-[--radix-dropdown-menu-trigger-width]",
             align: "start",
             side: "top",
             sideOffset: 4,
             children: [
-              /* @__PURE__ */ e(T, { className: "p-0 font-normal", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3 px-2 py-2", children: [
+              /* @__PURE__ */ e(H, { className: "p-0 font-normal", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3 px-2 py-2", children: [
                 /* @__PURE__ */ l(z, { size: "s", type: "user", children: [
-                  /* @__PURE__ */ e(A, { src: n.avatarUrl, alt: n.name }),
-                  /* @__PURE__ */ e(M, { size: "s", type: "user", children: B(n.name) })
+                  /* @__PURE__ */ e(A, { src: a.avatarUrl, alt: a.name }),
+                  /* @__PURE__ */ e(M, { size: "s", type: "user", children: Z(a.name) })
                 ] }),
                 /* @__PURE__ */ l("div", { className: "grid flex-1 text-left", children: [
-                  /* @__PURE__ */ e("span", { className: "text-body-medium-sm truncate font-semibold text-[var(--color-text-primary)]", children: n.name }),
-                  /* @__PURE__ */ e("span", { className: "text-caption-xsm truncate text-[var(--color-text-secondary)]", children: n.email })
+                  /* @__PURE__ */ e("span", { className: "text-body-medium-sm truncate font-semibold text-[var(--color-text-primary)]", children: a.name }),
+                  /* @__PURE__ */ e("span", { className: "text-caption-xsm truncate text-[var(--color-text-secondary)]", children: a.email })
                 ] })
               ] }) }),
-              /* @__PURE__ */ e(H, {}),
-              /* @__PURE__ */ e(T, { className: "px-2 py-1 text-[12px] font-medium text-[var(--color-text-tertiary)]", children: "Organizations" }),
-              m.map((r) => /* @__PURE__ */ l(
-                y,
+              /* @__PURE__ */ e(T, {}),
+              /* @__PURE__ */ e(H, { className: "px-2 py-1 text-[12px] font-medium text-[var(--color-text-tertiary)]", children: "Organizations" }),
+              f.map((r) => /* @__PURE__ */ l(
+                C,
                 {
-                  onSelect: () => g(r),
+                  onSelect: () => R(r),
                   className: "mx-1 mb-1 h-10 cursor-pointer gap-2 px-1 pr-2 pl-1",
                   children: [
                     /* @__PURE__ */ l(z, { size: "s", type: "organization", children: [
                       /* @__PURE__ */ e(A, { src: r.avatarUrl, alt: r.name }),
-                      /* @__PURE__ */ e(M, { size: "s", type: "organization", children: I(r.name) })
+                      /* @__PURE__ */ e(M, { size: "s", type: "organization", children: B(r.name) })
                     ] }),
                     /* @__PURE__ */ l("div", { className: "flex flex-1 flex-col text-left", children: [
                       /* @__PURE__ */ e("span", { className: "text-body-medium-sm truncate font-semibold text-[var(--color-text-primary)]", children: r.name }),
@@ -502,18 +502,18 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                         " plan"
                       ] })
                     ] }),
-                    d.name === r.name && /* @__PURE__ */ e(s, { name: K, size: "m", className: "text-[var(--color-icon-brand-bold)]" })
+                    m.name === r.name && /* @__PURE__ */ e(s, { name: K, size: "m", className: "text-[var(--color-icon-brand-bold)]" })
                   ]
                 },
                 r.name
               )),
-              /* @__PURE__ */ e(H, {}),
-              /* @__PURE__ */ e(T, { className: "px-2 py-1 text-[12px] font-medium text-[var(--color-text-tertiary)]", children: "Navigation" }),
+              /* @__PURE__ */ e(T, {}),
+              /* @__PURE__ */ e(H, { className: "px-2 py-1 text-[12px] font-medium text-[var(--color-text-tertiary)]", children: "Navigation" }),
               /* @__PURE__ */ l(
-                y,
+                C,
                 {
                   className: "mx-1 mb-0.5 cursor-pointer gap-2 px-2",
-                  onSelect: () => h("sidebar"),
+                  onSelect: () => u("sidebar"),
                   children: [
                     /* @__PURE__ */ e("span", { className: "flex-1", children: "New sidebar navigation" }),
                     p === "sidebar" && /* @__PURE__ */ e(s, { name: K, size: "m", className: "text-[var(--color-icon-brand-bold)]" })
@@ -521,48 +521,48 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
                 }
               ),
               /* @__PURE__ */ l(
-                y,
+                C,
                 {
                   className: "mx-1 mb-1 cursor-pointer gap-2 px-2",
-                  onSelect: () => h("horizontal"),
+                  onSelect: () => u("horizontal"),
                   children: [
                     /* @__PURE__ */ e("span", { className: "flex-1", children: "Old horizontal menu" }),
                     p === "horizontal" && /* @__PURE__ */ e(s, { name: K, size: "m", className: "text-[var(--color-icon-brand-bold)]" })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(H, {}),
+              /* @__PURE__ */ e(T, {}),
               /* @__PURE__ */ e(
-                y,
+                C,
                 {
-                  icon: Ne,
+                  icon: Se,
                   className: "cursor-pointer",
                   onSelect: () => {
-                    t && t("/user/profile");
+                    n && n("/user/profile");
                   },
                   children: "User profile"
                 }
               ),
               /* @__PURE__ */ e(
-                y,
+                C,
                 {
-                  icon: Se,
+                  icon: Ne,
                   className: "cursor-pointer",
                   onSelect: () => {
-                    t && t("/organization/settings");
+                    n && n("/organization/settings");
                   },
                   children: "Organization settings"
                 }
               ),
-              /* @__PURE__ */ e(H, {}),
+              /* @__PURE__ */ e(T, {}),
               /* @__PURE__ */ e(
-                y,
+                C,
                 {
                   icon: ze,
                   destructive: !0,
                   className: "cursor-pointer",
                   onSelect: () => {
-                    t && t("/auth/sign-out");
+                    n && n("/auth/sign-out");
                   },
                   children: "Sign out"
                 }
@@ -573,58 +573,58 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
       ] }) }) }),
       /* @__PURE__ */ e(se, {})
     ] }),
-    /* @__PURE__ */ l(Ve, { open: f, onOpenChange: c, children: [
+    /* @__PURE__ */ l(Ve, { open: b, onOpenChange: d, children: [
       /* @__PURE__ */ e(
         Le,
         {
           placeholder: "Type a command or search...",
-          value: v,
-          onValueChange: N,
+          value: x,
+          onValueChange: g,
           clearable: !1
         }
       ),
-      /* @__PURE__ */ l(He, { children: [
-        /* @__PURE__ */ e(Te, { children: "No results found." }),
-        /* @__PURE__ */ l(D, { heading: "Quick actions", children: [
+      /* @__PURE__ */ l(Te, { children: [
+        /* @__PURE__ */ e(He, { children: "No results found." }),
+        /* @__PURE__ */ l(F, { heading: "Quick actions", children: [
           /* @__PURE__ */ l(V, { onSelect: () => console.log("Reload"), children: [
             /* @__PURE__ */ e(s, { name: Ae, size: "s", className: "mr-2" }),
             /* @__PURE__ */ e("span", { children: "Reload Page" }),
             /* @__PURE__ */ l("span", { className: "text-caption-sm ml-auto text-[var(--color-text-tertiary)]", children: [
-              F() ? "⌘" : "Ctrl",
+              P() ? "⌘" : "Ctrl",
               "R"
             ] })
           ] }),
-          /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
-            /* @__PURE__ */ e(s, { name: Z, size: "s", className: "mr-2" }),
+          /* @__PURE__ */ l(V, { onSelect: () => d(!1), children: [
+            /* @__PURE__ */ e(s, { name: W, size: "s", className: "mr-2" }),
             /* @__PURE__ */ e("span", { children: "Search" }),
             /* @__PURE__ */ l("span", { className: "text-caption-sm ml-auto text-[var(--color-text-tertiary)]", children: [
-              F() ? "⌘" : "Ctrl",
+              P() ? "⌘" : "Ctrl",
               "K"
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ l(D, { heading: "Navigation", children: [
-          o.main.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+        /* @__PURE__ */ l(F, { heading: "Navigation", children: [
+          o.main.map((r) => /* @__PURE__ */ l(V, { onSelect: () => d(!1), children: [
             /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
             /* @__PURE__ */ e("span", { children: r.title })
           ] }, r.title)),
-          o.operations.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+          o.operations.map((r) => /* @__PURE__ */ l(V, { onSelect: () => d(!1), children: [
             /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
             /* @__PURE__ */ e("span", { children: r.title })
           ] }, r.title)),
-          o.intelligence.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+          o.intelligence.map((r) => /* @__PURE__ */ l(V, { onSelect: () => d(!1), children: [
             /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
             /* @__PURE__ */ e("span", { children: r.title })
           ] }, r.title))
         ] }),
-        /* @__PURE__ */ e(D, { heading: "Settings", children: o.support.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+        /* @__PURE__ */ e(F, { heading: "Settings", children: o.support.map((r) => /* @__PURE__ */ l(V, { onSelect: () => d(!1), children: [
           /* @__PURE__ */ e(s, { name: r.icon, size: "s", className: "mr-2" }),
           /* @__PURE__ */ e("span", { children: r.title })
         ] }, r.title)) }),
-        /* @__PURE__ */ e(D, { heading: "Switch team", children: m.map((r) => /* @__PURE__ */ l(V, { onSelect: () => c(!1), children: [
+        /* @__PURE__ */ e(F, { heading: "Switch team", children: f.map((r) => /* @__PURE__ */ l(V, { onSelect: () => d(!1), children: [
           /* @__PURE__ */ l(z, { size: "s", className: "mr-2", type: "organization", children: [
             /* @__PURE__ */ e(A, { src: r.avatarUrl, alt: r.name }),
-            /* @__PURE__ */ e(M, { size: "s", type: "organization", children: I(r.name) })
+            /* @__PURE__ */ e(M, { size: "s", type: "organization", children: B(r.name) })
           ] }),
           /* @__PURE__ */ e("span", { children: r.name })
         ] }, r.name)) })
@@ -632,27 +632,27 @@ function je({ navigationData: o, user: n, teams: m, onNavigate: t, navigationMod
     ] })
   ] });
 }
-function Oe({
+function De({
   navigationData: o,
-  user: n,
-  activeTeam: m,
-  onNavigate: t,
+  user: a,
+  activeTeam: f,
+  onNavigate: n,
   navigationMode: p,
-  onNavigationModeChange: h
+  onNavigationModeChange: u
 }) {
-  const [f, c] = u.useState(!1), v = u.useRef(null);
-  u.useEffect(() => {
-    if (!f) return;
-    const a = (d) => {
-      v.current && !v.current.contains(d.target) && c(!1);
+  const [b, d] = h.useState(!1), x = h.useRef(null);
+  h.useEffect(() => {
+    if (!b) return;
+    const i = (c) => {
+      x.current && !x.current.contains(c.target) && d(!1);
     };
-    return document.addEventListener("mousedown", a), () => document.removeEventListener("mousedown", a);
-  }, [f]);
-  const N = [
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [b]);
+  const g = [
     ...o.main,
     ...o.operations,
     ...o.intelligence
-  ], b = B(n.name);
+  ], v = g.find((i) => i.isActive || i.items?.some((c) => c.isActive))?.title ?? null, [L, m] = h.useState(v), R = g.find((i) => i.title === L)?.items ?? [], U = Z(a.name);
   return /* @__PURE__ */ l("div", { style: { width: "100%" }, children: [
     /* @__PURE__ */ l(
       "div",
@@ -696,7 +696,7 @@ function Oe({
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => t?.("/notifications"),
+                onClick: () => n?.("/notifications"),
                 style: {
                   background: "none",
                   border: "none",
@@ -707,11 +707,11 @@ function Oe({
                   alignItems: "center",
                   justifyContent: "center"
                 },
-                onMouseEnter: (a) => {
-                  a.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+                onMouseEnter: (i) => {
+                  i.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
                 },
-                onMouseLeave: (a) => {
-                  a.currentTarget.style.backgroundColor = "transparent";
+                onMouseLeave: (i) => {
+                  i.currentTarget.style.backgroundColor = "transparent";
                 },
                 children: /* @__PURE__ */ l("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                   /* @__PURE__ */ e("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
@@ -719,11 +719,11 @@ function Oe({
                 ] })
               }
             ),
-            /* @__PURE__ */ l("div", { ref: v, style: { position: "relative" }, children: [
+            /* @__PURE__ */ l("div", { ref: x, style: { position: "relative" }, children: [
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: () => c((a) => !a),
+                  onClick: () => d((i) => !i),
                   style: {
                     width: 32,
                     height: 32,
@@ -739,17 +739,17 @@ function Oe({
                     fontWeight: 600,
                     padding: 0
                   },
-                  children: n.avatarUrl ? /* @__PURE__ */ e(
+                  children: a.avatarUrl ? /* @__PURE__ */ e(
                     "img",
                     {
-                      src: n.avatarUrl,
-                      alt: n.name,
+                      src: a.avatarUrl,
+                      alt: a.name,
                       style: { width: "100%", height: "100%", borderRadius: "50%", objectFit: "cover" }
                     }
-                  ) : b
+                  ) : U
                 }
               ),
-              f && /* @__PURE__ */ l(
+              b && /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -766,8 +766,8 @@ function Oe({
                   },
                   children: [
                     /* @__PURE__ */ l("div", { style: { padding: "8px 12px", borderBottom: "1px solid #e5e7eb" }, children: [
-                      /* @__PURE__ */ e("div", { style: { fontWeight: 600, color: "#111827" }, children: n.name }),
-                      /* @__PURE__ */ e("div", { style: { fontSize: 12, color: "#6b7280" }, children: n.email })
+                      /* @__PURE__ */ e("div", { style: { fontWeight: 600, color: "#111827" }, children: a.name }),
+                      /* @__PURE__ */ e("div", { style: { fontSize: 12, color: "#6b7280" }, children: a.email })
                     ] }),
                     /* @__PURE__ */ l("div", { style: { padding: "4px 0", borderBottom: "1px solid #e5e7eb" }, children: [
                       /* @__PURE__ */ e("div", { style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Navigation" }),
@@ -775,7 +775,7 @@ function Oe({
                         "button",
                         {
                           onClick: () => {
-                            h("sidebar"), c(!1);
+                            u("sidebar"), d(!1);
                           },
                           style: {
                             display: "flex",
@@ -789,11 +789,11 @@ function Oe({
                             color: "#374151",
                             textAlign: "left"
                           },
-                          onMouseEnter: (a) => {
-                            a.currentTarget.style.backgroundColor = "#f3f4f6";
+                          onMouseEnter: (i) => {
+                            i.currentTarget.style.backgroundColor = "#f3f4f6";
                           },
-                          onMouseLeave: (a) => {
-                            a.currentTarget.style.backgroundColor = "transparent";
+                          onMouseLeave: (i) => {
+                            i.currentTarget.style.backgroundColor = "transparent";
                           },
                           children: [
                             /* @__PURE__ */ e("span", { style: { flex: 1 }, children: "New sidebar navigation" }),
@@ -805,7 +805,7 @@ function Oe({
                         "button",
                         {
                           onClick: () => {
-                            h("horizontal"), c(!1);
+                            u("horizontal"), d(!1);
                           },
                           style: {
                             display: "flex",
@@ -819,11 +819,11 @@ function Oe({
                             color: "#374151",
                             textAlign: "left"
                           },
-                          onMouseEnter: (a) => {
-                            a.currentTarget.style.backgroundColor = "#f3f4f6";
+                          onMouseEnter: (i) => {
+                            i.currentTarget.style.backgroundColor = "#f3f4f6";
                           },
-                          onMouseLeave: (a) => {
-                            a.currentTarget.style.backgroundColor = "transparent";
+                          onMouseLeave: (i) => {
+                            i.currentTarget.style.backgroundColor = "transparent";
                           },
                           children: [
                             /* @__PURE__ */ e("span", { style: { flex: 1 }, children: "Old horizontal menu" }),
@@ -836,7 +836,7 @@ function Oe({
                       "button",
                       {
                         onClick: () => {
-                          t?.("/auth/sign-out"), c(!1);
+                          n?.("/auth/sign-out"), d(!1);
                         },
                         style: {
                           display: "flex",
@@ -850,11 +850,11 @@ function Oe({
                           color: "#dc2626",
                           textAlign: "left"
                         },
-                        onMouseEnter: (a) => {
-                          a.currentTarget.style.backgroundColor = "#fef2f2";
+                        onMouseEnter: (i) => {
+                          i.currentTarget.style.backgroundColor = "#fef2f2";
                         },
-                        onMouseLeave: (a) => {
-                          a.currentTarget.style.backgroundColor = "transparent";
+                        onMouseLeave: (i) => {
+                          i.currentTarget.style.backgroundColor = "transparent";
                         },
                         children: "Sign out"
                       }
@@ -879,13 +879,13 @@ function Oe({
           gap: 2,
           overflowX: "auto"
         },
-        children: N.map((a) => {
-          const d = a.isActive || (a.items?.some((g) => g.isActive) ?? !1);
+        children: g.map((i) => {
+          const c = i.isActive || (i.items?.some((r) => r.isActive) ?? !1);
           return /* @__PURE__ */ e(
             "button",
             {
-              onClick: (g) => {
-                g.preventDefault(), t?.(a.url);
+              onClick: (r) => {
+                r.preventDefault(), m(i.title), n?.(i.url);
               },
               style: {
                 padding: "6px 14px",
@@ -893,94 +893,137 @@ function Oe({
                 border: "none",
                 cursor: "pointer",
                 fontSize: 13,
-                fontWeight: d ? 600 : 400,
+                fontWeight: c ? 600 : 400,
                 color: "white",
-                backgroundColor: d ? "#005F85" : "transparent",
+                backgroundColor: c ? "#005F85" : "transparent",
                 whiteSpace: "nowrap",
                 transition: "background-color 0.15s"
               },
-              onMouseEnter: (g) => {
-                d || (g.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)");
+              onMouseEnter: (r) => {
+                c || (r.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)");
               },
-              onMouseLeave: (g) => {
-                d || (g.currentTarget.style.backgroundColor = "transparent");
+              onMouseLeave: (r) => {
+                c || (r.currentTarget.style.backgroundColor = "transparent");
               },
-              children: a.title
+              children: i.title
             },
-            a.title
+            i.title
           );
         })
       }
+    ),
+    R.length > 0 && /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          height: 36,
+          backgroundColor: "#f0f5f8",
+          padding: "0 16px",
+          gap: 2,
+          borderBottom: "1px solid #d1dde6",
+          overflowX: "auto"
+        },
+        children: R.map((i) => /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: (c) => {
+              c.preventDefault(), n?.(i.url);
+            },
+            style: {
+              padding: "4px 12px",
+              borderRadius: 4,
+              border: "none",
+              cursor: "pointer",
+              fontSize: 13,
+              fontWeight: i.isActive ? 600 : 400,
+              color: i.isActive ? "#005F85" : "#374151",
+              backgroundColor: i.isActive ? "#dbeeff" : "transparent",
+              whiteSpace: "nowrap",
+              transition: "background-color 0.15s"
+            },
+            onMouseEnter: (c) => {
+              i.isActive || (c.currentTarget.style.backgroundColor = "#e5eef4");
+            },
+            onMouseLeave: (c) => {
+              i.isActive || (c.currentTarget.style.backgroundColor = "transparent");
+            },
+            children: i.title
+          },
+          i.title
+        ))
+      }
     )
   ] });
 }
-function De() {
-  const { state: o, toggleSidebar: n } = ce(), m = o === "collapsed";
-  return u.useEffect(() => {
-    const t = (p) => {
-      p.key === "[" && (p.preventDefault(), n());
+function Ie() {
+  const { state: o, toggleSidebar: a } = ce(), f = o === "collapsed";
+  return h.useEffect(() => {
+    const n = (p) => {
+      p.key === "[" && (p.preventDefault(), a());
     };
-    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [n]), /* @__PURE__ */ l(C, { delayDuration: 500, children: [
-    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(de, { className: "-ml-1" }) }),
-    /* @__PURE__ */ e(k, { side: "bottom", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ e("span", { children: m ? "Expand sidebar" : "Collapse sidebar" }),
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [a]), /* @__PURE__ */ l(w, { delayDuration: 500, children: [
+    /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e(de, { className: "-ml-1" }) }),
+    /* @__PURE__ */ e(S, { side: "bottom", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { children: f ? "Expand sidebar" : "Collapse sidebar" }),
       /* @__PURE__ */ e(E, { size: "s", variant: "dark", children: "[" })
     ] }) })
   ] });
 }
-function Xe({
+function Qe({
   navigationData: o = Ue,
-  user: n = Ee,
-  teams: m = Re,
-  defaultSidebarOpen: t = !0,
+  user: a = Ee,
+  teams: f = Re,
+  defaultSidebarOpen: n = !0,
   headerContent: p,
-  headerTabs: h,
-  headerActions: f,
-  children: c,
-  onNavigate: v
+  headerTabs: u,
+  headerActions: b,
+  children: d,
+  onNavigate: x
 }) {
-  const [N, b] = u.useState("sidebar"), [a] = u.useState(m[0]);
-  return N === "horizontal" ? /* @__PURE__ */ l("div", { className: "h-screen overflow-hidden", style: { display: "flex", flexDirection: "column" }, children: [
+  const [g, v] = h.useState("sidebar"), [L] = h.useState(f[0]);
+  return g === "horizontal" ? /* @__PURE__ */ l("div", { className: "h-screen overflow-hidden", style: { display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ e(
-      Oe,
+      De,
       {
         navigationData: o,
-        user: n,
-        activeTeam: a,
-        onNavigate: v,
-        navigationMode: N,
-        onNavigationModeChange: b
+        user: a,
+        activeTeam: L,
+        onNavigate: x,
+        navigationMode: g,
+        onNavigationModeChange: v
       }
     ),
-    /* @__PURE__ */ e("div", { style: { flex: 1, overflow: "auto", minHeight: 0, backgroundColor: "var(--color-surface-base)" }, children: c })
-  ] }) : /* @__PURE__ */ e("div", { className: "h-screen overflow-hidden", children: /* @__PURE__ */ l(ie, { defaultOpen: t, children: [
+    /* @__PURE__ */ e("div", { style: { flex: 1, overflow: "auto", minHeight: 0, backgroundColor: "var(--color-surface-base)" }, children: d })
+  ] }) : /* @__PURE__ */ e("div", { className: "h-screen overflow-hidden", children: /* @__PURE__ */ l(ie, { defaultOpen: n, children: [
     /* @__PURE__ */ e(
       je,
       {
         navigationData: o,
-        user: n,
-        teams: m,
-        onNavigate: v,
-        navigationMode: N,
-        onNavigationModeChange: b
+        user: a,
+        teams: f,
+        onNavigate: x,
+        navigationMode: g,
+        onNavigationModeChange: v
       }
     ),
     /* @__PURE__ */ l(te, { children: [
-      (p || f || h) && /* @__PURE__ */ l("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-[var(--color-border-primary-subtle)] transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 box-border px-[var(--space-m)]", children: [
-        /* @__PURE__ */ e(De, {}),
-        /* @__PURE__ */ e($, { layout: "horizontal", className: "mr-2 h-4" }),
+      (p || b || u) && /* @__PURE__ */ l("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-[var(--color-border-primary-subtle)] transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 box-border px-[var(--space-m)]", children: [
+        /* @__PURE__ */ e(Ie, {}),
+        /* @__PURE__ */ e(J, { layout: "horizontal", className: "mr-2 h-4" }),
         /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: p }),
         /* @__PURE__ */ l("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: [
-          h && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: h }),
-          h && f && /* @__PURE__ */ e("span", { className: "text-[var(--color-text-tertiary)] select-none", "aria-hidden": !0, children: "•" }),
-          f && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: f })
+          u && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: u }),
+          u && b && /* @__PURE__ */ e("span", { className: "text-[var(--color-text-tertiary)] select-none", "aria-hidden": !0, children: "•" }),
+          b && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: b })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col overflow-auto min-h-0 min-w-0", children: c })
+      /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col overflow-auto min-h-0 min-w-0", children: d })
     ] })
   ] }) });
 }
 export {
-  Xe as AppFrame
+  Qe as AppFrame
 };