@flamingo-stack/openframe-frontend-core 0.0.661 → 0.0.662-snapshot.20260923194332

package/dist/{chunk-Q4XWYP5U.js → chunk-JVAG5CHS.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useOptionalTicketLive
-} from "./chunk-EUT6SQW7.js";
+} from "./chunk-Q3G5WOER.js";
 import {
   AppLayoutDrawerContainerContext,
   AppLayoutDrawerCoordinationContext,
@@ -13,15 +13,16 @@ import {
   UnreadDot,
   buildTicketOpenHref,
   useOptionalNotifications
-} from "./chunk-M23ZPKOK.js";
+} from "./chunk-3PSNWOAP.js";
 import {
   useFocusTrap,
   useLocalStorage
-} from "./chunk-LXBHYUIN.js";
+} from "./chunk-OZTH6T4W.js";
 import {
   OVERLAY_BACKDROP_CLASS,
+  Tag,
   useIsHydrated
-} from "./chunk-4NKKPGDN.js";
+} from "./chunk-RP4TSHMY.js";
 import {
   useHeaderHeight,
   useIsomorphicLayoutEffect,
@@ -33,7 +34,7 @@ import {
   MingoIcon,
   OpenFrameText,
   UserIcon
-} from "./chunk-UA3V3KXX.js";
+} from "./chunk-KU7HL52F.js";
 import {
   BellIcon,
   Chevrons03LeftIcon,
@@ -893,7 +894,25 @@ function NavigationSidebarHeader({ minimized }) {
 
 // src/components/navigation/navigation-sidebar-item.tsx
 import { cloneElement, memo } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/components/navigation/navigation-item-badge.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function NavigationItemBadge({ label, compact = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx10(
+    Tag,
+    {
+      as: "span",
+      label,
+      variant: "warning",
+      className: cn("pointer-events-none shrink-0", compact && "h-5 px-[var(--spacing-system-xxs)]", className),
+      labelClassName: compact ? "text-badge" : void 0,
+      ...rest
+    }
+  );
+}
+
+// src/components/navigation/navigation-sidebar-item.tsx
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl({
   item,
   isActive,
@@ -904,6 +923,7 @@ var NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl(
 }) {
   const unreadCount = item.unreadCount ?? 0;
   const hasUnread = unreadCount > 0;
+  const name = item.badge ? `${item.label} (${item.badge})` : item.label;
   const className = cn(
     // `isolate` scopes the hover layer's negative z-index to this row, so it
     // paints over the row's own background and under its content instead of
@@ -944,43 +964,46 @@ var NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl(
       cloneElement(item.icon, {
         color: isActive && !disabled ? "text-ods-accent" : "text-ods-text-secondary"
       }),
-      hasUnread && !showLabel && /* @__PURE__ */ jsx10(UnreadDot, { size: "fixed" })
+      hasUnread && !showLabel && /* @__PURE__ */ jsx11(UnreadDot, { size: "fixed" })
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs9(
       "span",
       {
         className: cn(
-          "flex-1 truncate text-left transition-[opacity,margin-left] duration-300 text-h4",
+          "flex min-w-0 flex-1 items-center overflow-hidden text-left transition-[opacity,margin-left] duration-300",
           showLabel ? "ml-[var(--spacing-system-xs)] opacity-100" : "ml-0 opacity-0"
         ),
         "aria-hidden": !showLabel,
-        children: item.label
+        children: [
+          /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate text-h4", children: item.label }),
+          item.badge && /* @__PURE__ */ jsx11(NavigationItemBadge, { label: item.badge, className: "ml-[var(--spacing-system-xs)] shrink-0" })
+        ]
       }
     ),
-    hasUnread && showLabel && /* @__PURE__ */ jsx10("span", { className: "flex size-6 flex-shrink-0 items-center justify-center rounded-md bg-ods-accent p-2", children: /* @__PURE__ */ jsx10("span", { className: "text-ods-text-on-accent text-h5", children: unreadCount > 99 ? "99+" : unreadCount }) })
+    hasUnread && showLabel && /* @__PURE__ */ jsx11("span", { className: "flex size-6 flex-shrink-0 items-center justify-center rounded-md bg-ods-accent p-2", children: /* @__PURE__ */ jsx11("span", { className: "text-ods-text-on-accent text-h5", children: unreadCount > 99 ? "99+" : unreadCount }) })
   ] });
   const shared = {
     className,
-    title: !showLabel ? item.label : void 0,
-    "aria-label": item.label,
+    title: !showLabel ? name : void 0,
+    "aria-label": name,
     "aria-current": isActive ? "page" : void 0
   };
   if (disabled || !item.path || item.onClick) {
-    return /* @__PURE__ */ jsx10("button", { type: "button", onClick: (event) => onClick(item, event), disabled, ...shared, children: content });
+    return /* @__PURE__ */ jsx11("button", { type: "button", onClick: (event) => onClick(item, event), disabled, ...shared, children: content });
   }
-  return /* @__PURE__ */ jsx10(next_link_default, { href: item.path, onClick: (event) => onClick(item, event), ...shared, children: content });
+  return /* @__PURE__ */ jsx11(next_link_default, { href: item.path, onClick: (event) => onClick(item, event), ...shared, children: content });
 });
 function NavigationSidebarItemSkeleton({ showLabel }) {
   return /* @__PURE__ */ jsxs9("div", { className: "flex h-14 w-full items-center justify-start p-[var(--spacing-system-m)]", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx10("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx10("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) }),
-    showLabel && /* @__PURE__ */ jsx10("div", { className: "ml-[var(--spacing-system-xs)] h-4 flex-1 animate-pulse rounded bg-ods-border" })
+    /* @__PURE__ */ jsx11("div", { className: "relative flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx11("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) }),
+    showLabel && /* @__PURE__ */ jsx11("div", { className: "ml-[var(--spacing-system-xs)] h-4 flex-1 animate-pulse rounded bg-ods-border" })
   ] });
 }
 
 // src/components/navigation/navigation-sidebar-toggle.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function NavigationSidebarToggle({ minimized, showLabel, onToggle }) {
-  return /* @__PURE__ */ jsx11("div", { className: "border-t border-ods-border", children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx12("div", { className: "border-t border-ods-border", children: /* @__PURE__ */ jsxs10(
     "button",
     {
       onClick: onToggle,
@@ -994,8 +1017,8 @@ function NavigationSidebarToggle({ minimized, showLabel, onToggle }) {
       title: minimized ? "Hide Menu" : void 0,
       "aria-label": "Hide Menu",
       children: [
-        /* @__PURE__ */ jsx11("div", { className: "flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx11(Chevrons03LeftIcon, { className: "h-6 w-6 rotate-180 text-ods-text-secondary transition-transform duration-300 @[140px]/of-nav-sidebar:rotate-0" }) }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12("div", { className: "flex flex-shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx12(Chevrons03LeftIcon, { className: "h-6 w-6 rotate-180 text-ods-text-secondary transition-transform duration-300 @[140px]/of-nav-sidebar:rotate-0" }) }),
+        /* @__PURE__ */ jsx12(
           "span",
           {
             className: cn(
@@ -1012,7 +1035,7 @@ function NavigationSidebarToggle({ minimized, showLabel, onToggle }) {
 }
 
 // src/components/navigation/navigation-sidebar.tsx
-import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var MINIMIZED_WIDTH = 56;
 var EXPANDED_WIDTH = 224;
 var STORAGE_KEY = "of.navigationSidebar.minimized";
@@ -1120,7 +1143,7 @@ function NavigationSidebar({ config, disabled = false }) {
     return () => cancelAnimationFrame(id);
   }, [transitionsEnabled]);
   return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "div",
       {
         className: cn(
@@ -1133,7 +1156,7 @@ function NavigationSidebar({ config, disabled = false }) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx12("div", { className: "hidden h-full w-14 flex-shrink-0 md:block lg:hidden", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx13("div", { className: "hidden h-full w-14 flex-shrink-0 md:block lg:hidden", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs11(
       "aside",
       {
@@ -1151,11 +1174,11 @@ function NavigationSidebar({ config, disabled = false }) {
         ),
         "aria-label": "Main navigation sidebar",
         children: [
-          /* @__PURE__ */ jsx12(NavigationSidebarHeader, { minimized }),
+          /* @__PURE__ */ jsx13(NavigationSidebarHeader, { minimized }),
           /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 flex-col justify-between overflow-y-auto py-4", children: [
             /* @__PURE__ */ jsxs11("div", { className: "flex flex-col", children: [
               config.topSlot?.({ minimized }),
-              /* @__PURE__ */ jsx12("nav", { className: "flex flex-col", "aria-label": "Primary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.primary.map((key) => /* @__PURE__ */ jsx12(NavigationSidebarItemSkeleton, { showLabel }, key)) : primaryItems.map((item) => /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13("nav", { className: "flex flex-col", "aria-label": "Primary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.primary.map((key) => /* @__PURE__ */ jsx13(NavigationSidebarItemSkeleton, { showLabel }, key)) : primaryItems.map((item) => /* @__PURE__ */ jsx13(
                 NavigationSidebarItemButton,
                 {
                   item,
@@ -1168,7 +1191,7 @@ function NavigationSidebar({ config, disabled = false }) {
                 item.id
               )) })
             ] }),
-            (loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && /* @__PURE__ */ jsx12("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.secondary.map((key) => /* @__PURE__ */ jsx12(NavigationSidebarItemSkeleton, { showLabel }, key)) : secondaryItems.map((item) => /* @__PURE__ */ jsx12(
+            (loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && /* @__PURE__ */ jsx13("nav", { className: "flex flex-col", "aria-label": "Secondary navigation", "aria-busy": !!loadingRows, children: loadingRows ? loadingRows.secondary.map((key) => /* @__PURE__ */ jsx13(NavigationSidebarItemSkeleton, { showLabel }, key)) : secondaryItems.map((item) => /* @__PURE__ */ jsx13(
               NavigationSidebarItemButton,
               {
                 item,
@@ -1181,7 +1204,7 @@ function NavigationSidebar({ config, disabled = false }) {
               item.id
             )) })
           ] }),
-          /* @__PURE__ */ jsx12(NavigationSidebarToggle, { minimized, showLabel, onToggle: handleToggle })
+          /* @__PURE__ */ jsx13(NavigationSidebarToggle, { minimized, showLabel, onToggle: handleToggle })
         ]
       }
     )
@@ -1193,7 +1216,7 @@ import React3 from "react";
 
 // src/components/navigation/header-global-search.tsx
 import React2 from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function HeaderGlobalSearch({
   value = "",
   onChange,
@@ -1233,8 +1256,8 @@ function HeaderGlobalSearch({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx13(SearchIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(SearchIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "text",
@@ -1256,7 +1279,7 @@ function HeaderGlobalSearch({
 }
 
 // src/components/navigation/header-mingo-button.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function HeaderMingoButton({ isActive = false, iconOnly = false, className, ...props }) {
   return /* @__PURE__ */ jsxs13(
     "button",
@@ -1284,11 +1307,11 @@ function HeaderMingoButton({ isActive = false, iconOnly = false, className, ...p
           // Mobile, drawer open: the icon-only button doubles as the close
           // affordance, so swap the Mingo logo for an X. Match the other header
           // icons (e.g. notifications): secondary color, w-4 h-4 → md:w-6 h-6.
-          /* @__PURE__ */ jsx14(XmarkIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" })
+          /* @__PURE__ */ jsx15(XmarkIcon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" })
         ) : (
           // Outer frame follows the button's text color (currentColor); the eyes
           // and corner block are ODS cyan.
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             MingoIcon,
             {
               color: "currentColor",
@@ -1298,14 +1321,14 @@ function HeaderMingoButton({ isActive = false, iconOnly = false, className, ...p
             }
           )
         ),
-        !iconOnly && /* @__PURE__ */ jsx14("span", { className: "whitespace-nowrap font-bold tracking-[-0.36px] text-h3", children: "Mingo AI" })
+        !iconOnly && /* @__PURE__ */ jsx15("span", { className: "whitespace-nowrap font-bold tracking-[-0.36px] text-h3", children: "Mingo AI" })
       ]
     }
   );
 }
 
 // src/components/navigation/header-organization-filter.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function HeaderOrganizationFilter({
   organizations = [],
   selectedOrgId,
@@ -1317,7 +1340,7 @@ function HeaderOrganizationFilter({
   const displayName = selectedOrg?.name || "All Organizations";
   const deviceCount = selectedOrg?.deviceCount ?? totalDeviceCount;
   return /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx15(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsx16(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
       "button",
       {
         className: cn(
@@ -1329,9 +1352,9 @@ function HeaderOrganizationFilter({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx15(Filter02Icon, { className: "h-4 w-4 shrink-0 text-ods-text-secondary" }),
+          /* @__PURE__ */ jsx16(Filter02Icon, { className: "h-4 w-4 shrink-0 text-ods-text-secondary" }),
           /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col items-start justify-center", children: [
-            /* @__PURE__ */ jsx15("span", { className: "truncate text-ods-text-primary text-h5", title: displayName, children: displayName }),
+            /* @__PURE__ */ jsx16("span", { className: "truncate text-ods-text-primary text-h5", title: displayName, children: displayName }),
             deviceCount !== void 0 && /* @__PURE__ */ jsxs14("span", { className: "truncate text-ods-text-secondary text-h6", children: [
               deviceCount.toLocaleString(),
               " Devices"
@@ -1341,14 +1364,14 @@ function HeaderOrganizationFilter({
       }
     ) }),
     /* @__PURE__ */ jsxs14(DropdownMenuContent, { align: "end", className: "min-w-[240px]", children: [
-      /* @__PURE__ */ jsx15(DropdownMenuItem, { onClick: () => onOrgChange?.(""), children: "All Organizations" }),
-      organizations.map((org) => /* @__PURE__ */ jsx15(DropdownMenuItem, { onClick: () => onOrgChange?.(org.id), children: org.name }, org.id))
+      /* @__PURE__ */ jsx16(DropdownMenuItem, { onClick: () => onOrgChange?.(""), children: "All Organizations" }),
+      organizations.map((org) => /* @__PURE__ */ jsx16(DropdownMenuItem, { onClick: () => onOrgChange?.(org.id), children: org.name }, org.id))
     ] })
   ] });
 }
 
 // src/components/navigation/app-header.tsx
-import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var AppHeader = React3.memo(function AppHeaderImpl({
   showSearch,
   onSearch,
@@ -1380,7 +1403,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
 }) {
   const isMdUp = useMdUp() ?? false;
   if (loading) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       AppHeaderSkeleton,
       {
         showSearch,
@@ -1403,19 +1426,19 @@ var AppHeader = React3.memo(function AppHeaderImpl({
   }
   const dimmedClass = disabled ? "pointer-events-none opacity-50" : "";
   const cellDivider = "border-l border-ods-border";
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     TopNavigation,
     {
       className: cn("sticky top-0 z-40", className),
       centerBreakpoint: "md",
       leading: (
         // Mobile: Burger Menu Button
-        !isMdUp && /* @__PURE__ */ jsx16(
+        !isMdUp && /* @__PURE__ */ jsx17(
           HeaderButton,
           {
             onClick: onToggleMobileMenu,
             isActive: isMobileMenuOpen,
-            icon: isMobileMenuOpen ? /* @__PURE__ */ jsx16(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx16(Menu01Icon, { className: "h-6 w-6" }),
+            icon: isMobileMenuOpen ? /* @__PURE__ */ jsx17(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx17(Menu01Icon, { className: "h-6 w-6" }),
             "aria-label": isMobileMenuOpen ? "Close menu" : "Open menu",
             "aria-expanded": isMobileMenuOpen,
             className: "border-r border-ods-border"
@@ -1423,7 +1446,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
         )
       ),
       logo: !isMdUp && /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           OpenFrameLogo,
           {
             className: "h-6 w-6 shrink-0",
@@ -1431,21 +1454,21 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             lowerPathColor: "var(--color-accent-primary)"
           }
         ),
-        /* @__PURE__ */ jsx16(OpenFrameText, { textColor: "var(--color-text-primary)", className: "h-4" })
+        /* @__PURE__ */ jsx17(OpenFrameText, { textColor: "var(--color-text-primary)", className: "h-4" })
       ] }),
       logoClassName: "gap-2",
-      center: showSearch ? /* @__PURE__ */ jsx16(HeaderGlobalSearch, { onSubmit: onSearch, className: cn("w-full", dimmedClass) }) : void 0,
+      center: showSearch ? /* @__PURE__ */ jsx17(HeaderGlobalSearch, { onSubmit: onSearch, className: cn("w-full", dimmedClass) }) : void 0,
       sideActions: /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        showSearch && /* @__PURE__ */ jsx16(
+        showSearch && /* @__PURE__ */ jsx17(
           HeaderButton,
           {
-            icon: /* @__PURE__ */ jsx16(SearchIcon, { className: "h-6 w-6" }),
+            icon: /* @__PURE__ */ jsx17(SearchIcon, { className: "h-6 w-6" }),
             "aria-label": "Search",
             className: cn("md:hidden", cellDivider, dimmedClass),
             disabled
           }
         ),
-        showOrganizations && /* @__PURE__ */ jsx16(
+        showOrganizations && /* @__PURE__ */ jsx17(
           HeaderOrganizationFilter,
           {
             organizations,
@@ -1454,8 +1477,8 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             className: cn("hidden lg:flex", dimmedClass)
           }
         ),
-        showTimeTracker && /* @__PURE__ */ jsx16(TimeTrackerHeaderButton, { disabled, className: cn(cellDivider, dimmedClass) }),
-        showNotifications && /* @__PURE__ */ jsx16(
+        showTimeTracker && /* @__PURE__ */ jsx17(TimeTrackerHeaderButton, { disabled, className: cn(cellDivider, dimmedClass) }),
+        showNotifications && /* @__PURE__ */ jsx17(
           NotificationsHeaderButton,
           {
             fallbackUnreadCount: unreadCount,
@@ -1463,7 +1486,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             dimmedClass: cn(cellDivider, dimmedClass)
           }
         ),
-        showTicketAlerts && /* @__PURE__ */ jsx16(
+        showTicketAlerts && /* @__PURE__ */ jsx17(
           TicketAlertsButton,
           {
             href: ticketAlertsHref ?? "/tickets",
@@ -1473,10 +1496,10 @@ var AppHeader = React3.memo(function AppHeaderImpl({
           }
         ),
         isMdUp && showUser && /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx16(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx17(
             HeaderButton,
             {
-              icon: /* @__PURE__ */ jsx16(
+              icon: /* @__PURE__ */ jsx17(
                 SquareAvatar,
                 {
                   src: userAvatarUrl || void 0,
@@ -1502,7 +1525,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
               className: "z-[104] w-[280px] overflow-hidden rounded-[6px] border-ods-border bg-ods-bg p-0",
               children: [
                 /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 border-b border-ods-border bg-ods-card p-3", children: [
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx17(
                     SquareAvatar,
                     {
                       src: userAvatarUrl || void 0,
@@ -1513,29 +1536,29 @@ var AppHeader = React3.memo(function AppHeaderImpl({
                     }
                   ),
                   /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1", children: [
-                    userName && /* @__PURE__ */ jsx16("div", { className: "truncate text-ods-text-primary text-h4", children: userName }),
-                    userEmail && /* @__PURE__ */ jsx16("div", { className: "truncate text-ods-text-secondary text-h6", children: userEmail })
+                    userName && /* @__PURE__ */ jsx17("div", { className: "truncate text-ods-text-primary text-h4", children: userName }),
+                    userEmail && /* @__PURE__ */ jsx17("div", { className: "truncate text-ods-text-secondary text-h6", children: userEmail })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   DropdownMenuItem,
                   {
                     onClick: onProfile,
                     className: "cursor-pointer rounded-none border-b border-ods-border bg-ods-card px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80",
                     children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx16(UserIcon, { className: "h-6 w-6 shrink-0 text-ods-text-primary" }),
-                      /* @__PURE__ */ jsx16("span", { className: "text-ods-text-primary text-h4", children: "Profile Settings" })
+                      /* @__PURE__ */ jsx17(UserIcon, { className: "h-6 w-6 shrink-0 text-ods-text-primary" }),
+                      /* @__PURE__ */ jsx17("span", { className: "text-ods-text-primary text-h4", children: "Profile Settings" })
                     ] })
                   }
                 ),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   DropdownMenuItem,
                   {
                     onClick: onLogout,
                     className: "cursor-pointer rounded-none bg-ods-card px-3 py-3 hover:bg-ods-card/80 focus:bg-ods-card/80",
                     children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx16(LogOutIcon, { className: "shrink-0 text-ods-error", size: 24 }),
-                      /* @__PURE__ */ jsx16("span", { className: "text-ods-text-primary text-h4", children: "Log Out" })
+                      /* @__PURE__ */ jsx17(LogOutIcon, { className: "shrink-0 text-ods-error", size: 24 }),
+                      /* @__PURE__ */ jsx17("span", { className: "text-ods-text-primary text-h4", children: "Log Out" })
                     ] })
                   }
                 )
@@ -1543,7 +1566,7 @@ var AppHeader = React3.memo(function AppHeaderImpl({
             }
           )
         ] }),
-        showMingoAI && /* @__PURE__ */ jsx16(
+        showMingoAI && /* @__PURE__ */ jsx17(
           HeaderMingoButton,
           {
             onClick: onMingoAI,
@@ -1562,10 +1585,10 @@ function NotificationsHeaderButton({ fallbackUnreadCount, disabled, dimmedClass
   const hasUnread = (ctx?.unreadCount ?? fallbackUnreadCount) > 0;
   const isActive = ctx?.isOpen ?? false;
   const onClick = ctx?.toggle;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     HeaderButton,
     {
-      icon: isActive ? /* @__PURE__ */ jsx16(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx16(BellIcon, { className: "h-6 w-6" }),
+      icon: isActive ? /* @__PURE__ */ jsx17(XmarkIcon, { className: "h-6 w-6" }) : /* @__PURE__ */ jsx17(BellIcon, { className: "h-6 w-6" }),
       showUnreadDot: !isActive && hasUnread,
       "aria-label": isActive ? "Close notifications" : "Notifications",
       onClick,
@@ -1581,12 +1604,12 @@ var CELL_VISIBILITY = {
   "icon-lg": "hidden lg:flex"
 };
 function HeaderCellSkeleton({ className }) {
-  return /* @__PURE__ */ jsx16("div", { className: cn("flex h-full w-14 shrink-0 items-center justify-center border-l border-ods-border", className), children: /* @__PURE__ */ jsx16("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) });
+  return /* @__PURE__ */ jsx17("div", { className: cn("flex h-full w-14 shrink-0 items-center justify-center border-l border-ods-border", className), children: /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) });
 }
 function HeaderWideCellSkeleton() {
   return /* @__PURE__ */ jsxs15("div", { className: "flex h-full w-14 shrink-0 items-center justify-center gap-2 border-l border-ods-border md:w-[140px] md:px-4", children: [
-    /* @__PURE__ */ jsx16("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
-    /* @__PURE__ */ jsx16("div", { className: "hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" })
+    /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
+    /* @__PURE__ */ jsx17("div", { className: "hidden h-5 animate-pulse rounded bg-ods-border md:block md:w-[72px]" })
   ] });
 }
 function AppHeaderSkeleton({
@@ -1595,7 +1618,7 @@ function AppHeaderSkeleton({
   className
 }) {
   const cells = typeof actionCells === "number" ? Array.from({ length: Math.max(0, actionCells) }, () => "icon") : actionCells;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     TopNavigation,
     {
       className: cn("sticky top-0 z-40", className),
@@ -1603,18 +1626,18 @@ function AppHeaderSkeleton({
       "aria-busy": "true",
       leading: (
         // Burger cell: mobile only, in CSS.
-        /* @__PURE__ */ jsx16("div", { className: "flex h-full w-14 shrink-0 items-center justify-center border-r border-ods-border md:hidden", children: /* @__PURE__ */ jsx16("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) })
+        /* @__PURE__ */ jsx17("div", { className: "flex h-full w-14 shrink-0 items-center justify-center border-r border-ods-border md:hidden", children: /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-border" }) })
       ),
       logo: /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        /* @__PURE__ */ jsx16("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx16("div", { className: "h-4 w-24 animate-pulse rounded bg-ods-border" })
+        /* @__PURE__ */ jsx17("div", { className: "h-6 w-6 shrink-0 animate-pulse rounded bg-ods-border" }),
+        /* @__PURE__ */ jsx17("div", { className: "h-4 w-24 animate-pulse rounded bg-ods-border" })
       ] }),
       logoClassName: "gap-2 md:hidden",
-      center: showSearch ? /* @__PURE__ */ jsx16("div", { className: "h-10 w-full animate-pulse rounded-md bg-ods-border" }) : void 0,
+      center: showSearch ? /* @__PURE__ */ jsx17("div", { className: "h-10 w-full animate-pulse rounded-md bg-ods-border" }) : void 0,
       sideActions: /* @__PURE__ */ jsxs15(Fragment7, { children: [
-        showSearch && /* @__PURE__ */ jsx16(HeaderCellSkeleton, { className: "md:hidden" }),
+        showSearch && /* @__PURE__ */ jsx17(HeaderCellSkeleton, { className: "md:hidden" }),
         cells.map(
-          (cell, i) => cell === "wide" ? /* @__PURE__ */ jsx16(HeaderWideCellSkeleton, {}, i) : /* @__PURE__ */ jsx16(HeaderCellSkeleton, { className: CELL_VISIBILITY[cell] }, i)
+          (cell, i) => cell === "wide" ? /* @__PURE__ */ jsx17(HeaderWideCellSkeleton, {}, i) : /* @__PURE__ */ jsx17(HeaderCellSkeleton, { className: CELL_VISIBILITY[cell] }, i)
         )
       ] })
     }
@@ -1627,7 +1650,7 @@ import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMem
 // src/components/navigation/mobile-burger-menu.tsx
 import { usePreventScroll as usePreventScroll3 } from "@react-aria/overlays";
 import React4, { useCallback as useCallback2, useRef as useRef4 } from "react";
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
   isOpen,
@@ -1675,29 +1698,33 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
           disabled && "cursor-not-allowed opacity-50"
         ),
         "aria-current": isActive ? "page" : void 0,
+        "aria-label": item.badge ? `${item.label} (${item.badge})` : void 0,
         children: [
-          item.icon && /* @__PURE__ */ jsx17("div", { className: "flex size-4 flex-shrink-0 items-center justify-center", children: React4.cloneElement(item.icon, {
+          item.icon && /* @__PURE__ */ jsx18("div", { className: "flex size-4 flex-shrink-0 items-center justify-center", children: React4.cloneElement(item.icon, {
             size: 16,
             color: isActive && !disabled ? "var(--color-accent-primary)" : "var(--color-text-secondary)"
           }) }),
-          /* @__PURE__ */ jsx17(
-            "span",
-            {
-              className: cn(
-                "flex-1 truncate text-left text-h6",
-                isActive && !disabled ? "text-ods-accent" : "text-ods-text-primary"
-              ),
-              children: item.label
-            }
-          )
+          /* @__PURE__ */ jsxs16("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx18(
+              "span",
+              {
+                className: cn(
+                  "min-w-0 truncate text-left text-h6",
+                  isActive && !disabled ? "text-ods-accent" : "text-ods-text-primary"
+                ),
+                children: item.label
+              }
+            ),
+            item.badge && /* @__PURE__ */ jsx18(NavigationItemBadge, { compact: true, label: item.badge })
+          ] })
         ]
       },
       item.id
     );
   };
-  const renderNavigationGrid = (items) => /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-2 gap-3", children: items.map((item) => /* @__PURE__ */ jsx17(React4.Fragment, { children: renderNavigationItem(item, true) }, item.id)) });
+  const renderNavigationGrid = (items) => /* @__PURE__ */ jsx18("div", { className: "grid grid-cols-2 gap-3", children: items.map((item) => /* @__PURE__ */ jsx18(React4.Fragment, { children: renderNavigationItem(item, true) }, item.id)) });
   return /* @__PURE__ */ jsxs16(Fragment8, { children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "div",
       {
         className: cn(
@@ -1711,7 +1738,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "div",
       {
         ref: panelRef,
@@ -1742,7 +1769,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
               ),
               "aria-disabled": disabled || void 0,
               children: [
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx18(
                   SquareAvatar,
                   {
                     src: user.userAvatarUrl || void 0,
@@ -1755,21 +1782,21 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                 ),
                 /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-1 flex-col", children: [
                   /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx17("span", { className: "truncate text-ods-text-primary text-h6", children: user.userName || "User" }),
-                    user.userRole && /* @__PURE__ */ jsx17("span", { className: "shrink-0 rounded-md border border-ods-border bg-ods-card px-2 py-0.5 uppercase text-ods-text-primary text-h6", children: user.userRole })
+                    /* @__PURE__ */ jsx18("span", { className: "truncate text-ods-text-primary text-h6", children: user.userName || "User" }),
+                    user.userRole && /* @__PURE__ */ jsx18("span", { className: "shrink-0 rounded-md border border-ods-border bg-ods-card px-2 py-0.5 uppercase text-ods-text-primary text-h6", children: user.userRole })
                   ] }),
-                  user.userEmail && /* @__PURE__ */ jsx17("span", { className: "truncate text-ods-text-secondary text-h6", children: user.userEmail })
+                  user.userEmail && /* @__PURE__ */ jsx18("span", { className: "truncate text-ods-text-secondary text-h6", children: user.userEmail })
                 ] }),
                 /* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-2", children: [
-                  onSearchUser && /* @__PURE__ */ jsx17(Button, { size: "icon", onClick: onSearchUser, variant: "outline", "aria-label": "Search users", children: /* @__PURE__ */ jsx17(UserSearchIcon, { className: "size-4 text-ods-text-primary" }) }),
-                  onEditProfile && /* @__PURE__ */ jsx17(Button, { size: "icon", onClick: onEditProfile, variant: "outline", "aria-label": "Edit profile", children: /* @__PURE__ */ jsx17(PenEditIcon, { className: "size-4 text-ods-text-primary" }) })
+                  onSearchUser && /* @__PURE__ */ jsx18(Button, { size: "icon", onClick: onSearchUser, variant: "outline", "aria-label": "Search users", children: /* @__PURE__ */ jsx18(UserSearchIcon, { className: "size-4 text-ods-text-primary" }) }),
+                  onEditProfile && /* @__PURE__ */ jsx18(Button, { size: "icon", onClick: onEditProfile, variant: "outline", "aria-label": "Edit profile", children: /* @__PURE__ */ jsx18(PenEditIcon, { className: "size-4 text-ods-text-primary" }) })
                 ] })
               ]
             }
           ),
           config.topSlot?.({ minimized: false }),
-          /* @__PURE__ */ jsx17("nav", { "aria-label": "Primary navigation", children: renderNavigationGrid(primaryItems) }),
-          secondaryItems.length > 0 && /* @__PURE__ */ jsx17("nav", { "aria-label": "Secondary navigation", className: "flex flex-col gap-3", children: secondaryItems.map((item) => /* @__PURE__ */ jsx17(React4.Fragment, { children: renderNavigationItem(item, false) }, item.id)) }),
+          /* @__PURE__ */ jsx18("nav", { "aria-label": "Primary navigation", children: renderNavigationGrid(primaryItems) }),
+          secondaryItems.length > 0 && /* @__PURE__ */ jsx18("nav", { "aria-label": "Secondary navigation", className: "flex flex-col gap-3", children: secondaryItems.map((item) => /* @__PURE__ */ jsx18(React4.Fragment, { children: renderNavigationItem(item, false) }, item.id)) }),
           onLogout && /* @__PURE__ */ jsxs16(
             "button",
             {
@@ -1781,8 +1808,8 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
                 disabled && "cursor-not-allowed opacity-50"
               ),
               children: [
-                /* @__PURE__ */ jsx17(Logout02Icon, { className: "size-4 text-ods-error" }),
-                /* @__PURE__ */ jsx17("span", { className: "flex-1 text-left text-ods-text-primary text-h6", children: "Log Out" })
+                /* @__PURE__ */ jsx18(Logout02Icon, { className: "size-4 text-ods-error" }),
+                /* @__PURE__ */ jsx18("span", { className: "flex-1 text-left text-ods-text-primary text-h6", children: "Log Out" })
               ]
             }
           )
@@ -1793,7 +1820,7 @@ var MobileBurgerMenu = React4.memo(function MobileBurgerMenuImpl({
 });
 
 // src/components/navigation/app-layout.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function AppLayout({
   children,
   sidebarConfig,
@@ -1837,11 +1864,11 @@ function AppLayout({
     }),
     []
   );
-  return /* @__PURE__ */ jsx18(AppLayoutDrawerContainerContext.Provider, { value: drawerContainer, children: /* @__PURE__ */ jsx18(AppLayoutDrawerCoordinationContext.Provider, { value: drawerCoordination, children: /* @__PURE__ */ jsxs17("div", { className: cn("flex h-screen flex-col bg-ods-bg", className), children: [
+  return /* @__PURE__ */ jsx19(AppLayoutDrawerContainerContext.Provider, { value: drawerContainer, children: /* @__PURE__ */ jsx19(AppLayoutDrawerCoordinationContext.Provider, { value: drawerCoordination, children: /* @__PURE__ */ jsxs17("div", { className: cn("flex h-screen flex-col bg-ods-bg", className), children: [
     topBar,
     /* @__PURE__ */ jsxs17("div", { className: "relative flex min-h-0 flex-1", children: [
-      /* @__PURE__ */ jsx18(NavigationSidebar, { config: sidebarConfig, disabled }),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(NavigationSidebar, { config: sidebarConfig, disabled }),
+      /* @__PURE__ */ jsx19(
         MobileBurgerMenu,
         {
           ...mobileBurgerMenuProps,
@@ -1852,7 +1879,7 @@ function AppLayout({
         }
       ),
       /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           AppHeader,
           {
             ...headerProps,
@@ -1861,9 +1888,9 @@ function AppLayout({
             disabled
           }
         ),
-        /* @__PURE__ */ jsx18(NotificationDrawer, {}),
+        /* @__PURE__ */ jsx19(NotificationDrawer, {}),
         /* @__PURE__ */ jsxs17("div", { ref: setDrawerContainer, className: "relative flex flex-1 flex-col overflow-hidden", children: [
-          /* @__PURE__ */ jsx18("main", { className: cn("flex-1 overflow-y-auto", mainClassName), children }),
+          /* @__PURE__ */ jsx19("main", { className: cn("flex-1 overflow-y-auto", mainClassName), children }),
           drawer
         ] })
       ] })
@@ -1881,6 +1908,7 @@ export {
   HeaderSkeleton,
   ClientOnlyHeader,
   SlidingSidebar,
+  NavigationItemBadge,
   NAVIGATION_SIDEBAR_WIDTH_VAR,
   NavigationSidebar,
   HeaderGlobalSearch,
@@ -1890,4 +1918,4 @@ export {
   MobileBurgerMenu,
   AppLayout
 };
-//# sourceMappingURL=chunk-Q4XWYP5U.js.map
+//# sourceMappingURL=chunk-JVAG5CHS.js.map