@prediktif/ui 0.1.25 → 0.1.26

package/dist/index.js

@@ -1403,7 +1403,7 @@ function isRouteActive(url, pathname) {
   if (cleanUrl === "/") return cleanPath === "/";
   return cleanPath === cleanUrl || cleanPath.startsWith(`${cleanUrl}/`);
 }
-var AppSidebar = (0, import_react.memo)(function AppSidebar2({
+function AppSidebarInner({
   name = "",
   email = "",
   orgRole = "",
@@ -1412,7 +1412,6 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
   confirmDialog = false,
   headerDropdown = false,
   image,
-  defaultOpen = true,
   navMainItems,
   navSecondaryItems = [],
   organizations,
@@ -1420,11 +1419,19 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
   setActiveOrg,
   children
 }) {
-  const _isMobile = useIsMobile();
   const pathname = (0, import_navigation.usePathname)();
+  const { setOpenMobile } = useSidebar();
   const segments = pathname ? pathname.split("/").filter(Boolean) : [];
+  (0, import_react.useEffect)(() => {
+    if (pathname) {
+      setOpenMobile(false);
+    }
+  }, [pathname, setOpenMobile]);
+  const handleLinkClick = () => {
+    setOpenMobile(false);
+  };
   const initials = name ? name.trim().split(" ").map((n) => n[0]).join("").substring(0, 2).toUpperCase() : "U";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarProvider, { defaultOpen, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Sidebar, { collapsible: "icon", children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarHeader, { children: headerDropdown ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DropdownMenu, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1473,55 +1480,73 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
             ] })
           }
         )
-      ] }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuButton, { size: "lg", render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href: "/" }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Command, { className: "size-4" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: brand }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs capitalize", children: orgRole })
-        ] })
-      ] }) }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarContent, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarGroupLabel, { children: "Platform" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: navMainItems.map(({ title, url, icon, locked }) => {
-            const isActive = isRouteActive(url, pathname);
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuItem, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                SidebarMenuButton,
-                {
-                  isActive,
-                  tooltip: title,
-                  render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href: url }),
-                  children: [
-                    renderNavIcon(icon),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title })
-                  ]
-                }
-              ),
-              locked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuBadge, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.LockIcon, { size: 12 }) })
-            ] }, title);
-          }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarGroup, { className: "mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: navSecondaryItems.map(({ title, url, icon, locked }) => {
-          const isActive = isRouteActive(url, pathname);
-          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuItem, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              SidebarMenuButton,
-              {
-                size: "sm",
-                isActive,
-                tooltip: title,
-                render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href: url }),
-                children: [
-                  renderNavIcon(icon),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title })
-                ]
-              }
-            ),
-            locked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuBadge, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.LockIcon, { size: 12 }) })
-          ] }, title);
-        }) }) }) })
-      ] }),
+      ] }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        SidebarMenuButton,
+        {
+          size: "lg",
+          render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href: "/", onClick: handleLinkClick }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Command, { className: "size-4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: brand }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs capitalize", children: orgRole })
+            ] })
+          ]
+        }
+      ) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        SidebarContent,
+        {
+          onClick: (e) => {
+            const target = e.target;
+            if (target.closest("a")) {
+              setOpenMobile(false);
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarGroupLabel, { children: "Platform" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: navMainItems.map(({ title, url, icon, locked }) => {
+                const isActive = isRouteActive(url, pathname);
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuItem, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    SidebarMenuButton,
+                    {
+                      isActive,
+                      tooltip: title,
+                      render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href: url, onClick: handleLinkClick }),
+                      children: [
+                        renderNavIcon(icon),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title })
+                      ]
+                    }
+                  ),
+                  locked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuBadge, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.LockIcon, { size: 12 }) })
+                ] }, title);
+              }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarGroup, { className: "mt-auto", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarGroupContent, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: navSecondaryItems.map(({ title, url, icon, locked }) => {
+              const isActive = isRouteActive(url, pathname);
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuItem, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  SidebarMenuButton,
+                  {
+                    size: "sm",
+                    isActive,
+                    tooltip: title,
+                    render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href: url, onClick: handleLinkClick }),
+                    children: [
+                      renderNavIcon(icon),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: title })
+                    ]
+                  }
+                ),
+                locked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuBadge, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.LockIcon, { size: 12 }) })
+              ] }, title);
+            }) }) }) })
+          ]
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuItem, { children: confirmDialog ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialog, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           AlertDialogTrigger,
@@ -1549,22 +1574,36 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
               AlertDialogAction,
               {
                 nativeButton: false,
-                render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href, target: "_blank" }),
+                render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  import_link.default,
+                  {
+                    href,
+                    target: "_blank",
+                    onClick: handleLinkClick
+                  }
+                ),
                 children: "Continue"
               }
             )
           ] })
         ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuButton, { size: "lg", render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Avatar, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarImage, { src: image || "", alt: name || "" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarFallback, { children: initials })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: email })
-        ] })
-      ] }) }) }) }),
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        SidebarMenuButton,
+        {
+          size: "lg",
+          render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_link.default, { href, onClick: handleLinkClick }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Avatar, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarImage, { src: image || "", alt: name || "" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarFallback, { children: initials })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: name }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: email })
+            ] })
+          ]
+        }
+      ) }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarRail, {})
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarInset, { children: [
@@ -1591,6 +1630,14 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "p-4 pt-0", children })
     ] })
   ] });
+}
+var AppSidebar = (0, import_react.memo)(function AppSidebar2(_a) {
+  var _b = _a, {
+    defaultOpen = true
+  } = _b, props = __objRest(_b, [
+    "defaultOpen"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarProvider, { defaultOpen, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppSidebarInner, __spreadValues({}, props)) });
 });
 
 // src/components/composed/columns/avatar-group-invitations.tsx
@@ -1598,14 +1645,14 @@ var import_react2 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function getInitials(name, email) {
   const target = (name || email || "U").trim();
-  return target.split(/[\s.@]/).filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+  return target.split(/[\s.@]/).filter(Boolean).map((n) => n[0]).join("").slice(0, 1).toUpperCase();
 }
 var AvatarGroupInvitations = (0, import_react2.memo)(function AvatarGroupInvitations2({
   invitations,
   maxDisplay = 3,
   onlyPending = true,
   fallback = null,
-  size = "default",
+  size = "sm",
   className
 }) {
   const list = invitations != null ? invitations : [];
@@ -1632,7 +1679,7 @@ var AvatarGroupInvitations = (0, import_react2.memo)(function AvatarGroupInvitat
               Avatar,
               {
                 size,
-                className: "cursor-pointer border border-dashed border-primary/40",
+                className: "border border-dashed border-primary/40",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     AvatarImage,
@@ -1641,7 +1688,7 @@ var AvatarGroupInvitations = (0, import_react2.memo)(function AvatarGroupInvitat
                       alt: displayName
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AvatarFallback, { className: "bg-muted text-xs", children: initials })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AvatarFallback, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[10px]", children: initials }) })
                 ]
               }
             )
@@ -1660,7 +1707,7 @@ var AvatarGroupInvitations = (0, import_react2.memo)(function AvatarGroupInvitat
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         TooltipTrigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(AvatarGroupCount, { className: "cursor-pointer border border-dashed border-primary/40 font-mono", children: [
+          render: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(AvatarGroupCount, { className: "border border-dashed border-primary/40 text-[10px]", children: [
             "+",
             remainingCount
           ] })
@@ -1696,7 +1743,7 @@ var AvatarGroupUsers = (0, import_react3.memo)(function AvatarGroupUsers2({
   maxDisplay = 3,
   fallback = null,
   className,
-  size = "default"
+  size = "sm"
 }) {
   const list = users != null ? users : [];
   if (list.length === 0) {
@@ -1714,9 +1761,9 @@ var AvatarGroupUsers = (0, import_react3.memo)(function AvatarGroupUsers2({
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           TooltipTrigger,
           {
-            render: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Avatar, { size, className: "cursor-pointer", children: [
+            render: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Avatar, { size, children: [
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AvatarImage, { src: (_b = u.image) != null ? _b : void 0, alt: displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AvatarFallback, { children: initials })
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AvatarFallback, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px]", children: initials }) })
             ] })
           }
         ),
@@ -1727,7 +1774,7 @@ var AvatarGroupUsers = (0, import_react3.memo)(function AvatarGroupUsers2({
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         TooltipTrigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(AvatarGroupCount, { className: "cursor-pointer font-mono", children: [
+          render: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(AvatarGroupCount, { className: "text-[10px]", children: [
             "+",
             remainingCount
           ] })
@@ -2042,7 +2089,7 @@ var MetadataProgress = (0, import_react10.memo)(function MetadataProgress2({
   fields = DEFAULT_METADATA_FIELDS,
   completedCount: propCompleted,
   totalCount: propTotal,
-  title = "Website Metadata",
+  title = "Metadata",
   fallback = null,
   className
 }) {
@@ -2140,10 +2187,14 @@ var MetadataProgress = (0, import_react10.memo)(function MetadataProgress2({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(TooltipContent, { className: "max-w-xs text-xs space-y-1.5 p-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between border-b pb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "font-semibold text-xs", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "font-mono text-[11px] text-muted-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipContent, { className: "max-w-xs text-xs", children: completed === total ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { children: [
+      "All ",
+      total,
+      " metadata fields completed"
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1 py-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between gap-4 font-medium text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "font-mono text-[11px] opacity-80", children: [
           completed,
           "/",
           total,
@@ -2152,15 +2203,12 @@ var MetadataProgress = (0, import_react10.memo)(function MetadataProgress2({
           "%)"
         ] })
       ] }),
-      missing.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-[11px] text-muted-foreground leading-relaxed", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-amber-600 dark:text-amber-400 font-medium", children: [
-          "Missing:",
-          " "
-        ] }),
-        missing.slice(0, 4).join(", "),
-        missing.length > 4 ? ` +${missing.length - 4} more` : ""
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-[11px] text-emerald-600 dark:text-emerald-400 font-medium", children: "All metadata fields completed!" })
-    ] })
+      missing.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-[11px] opacity-80 leading-normal", children: [
+        "Missing: ",
+        missing.slice(0, 3).join(", "),
+        missing.length > 3 ? ` +${missing.length - 3} more` : ""
+      ] })
+    ] }) })
   ] });
 });
 var MetadataStatus = MetadataProgress;
@@ -2492,16 +2540,18 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var RunningStatus = (0, import_react14.memo)(function RunningStatus2({
   count = 0,
   isRunning,
-  accessTokens = 0,
-  refreshTokens = 0,
-  usersCount = 0,
+  accessTokens,
+  refreshTokens,
+  usersCount,
   runningLabel = "Running",
   idleLabel = "Idle",
-  tooltipTitle = "Sessions & Active Tokens",
+  tooltipTitle,
   className
 }) {
   const activeCount = count != null ? count : 0;
   const running = isRunning != null ? isRunning : activeCount > 0;
+  const hasDetails = accessTokens != null && accessTokens > 0 || refreshTokens != null && refreshTokens > 0 || usersCount != null && usersCount > 0;
+  const title = tooltipTitle != null ? tooltipTitle : `${activeCount} Active Token${activeCount === 1 ? "" : "s"}`;
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       TooltipTrigger,
@@ -2541,35 +2591,23 @@ var RunningStatus = (0, import_react14.memo)(function RunningStatus2({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(TooltipContent, { className: "text-xs space-y-2 p-3 min-w-[200px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between border-b pb-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-semibold text-xs", children: tooltipTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          "span",
-          {
-            className: (0, import_cn22.cn)(
-              "text-[10px] px-1.5 py-0.5 rounded font-medium",
-              running ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-muted text-muted-foreground"
-            ),
-            children: running ? "Active" : "Idle"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-1 text-[11px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Active Access Tokens:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-mono font-medium text-foreground", children: accessTokens != null ? accessTokens : 0 })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipContent, { className: "text-xs", children: running ? hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-1 py-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-medium text-xs", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-0.5 text-[11px] opacity-80", children: [
+        accessTokens != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Access tokens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-mono", children: accessTokens })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Active Refresh Tokens:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-mono font-medium text-foreground", children: refreshTokens != null ? refreshTokens : 0 })
+        refreshTokens != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Refresh tokens" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-mono", children: refreshTokens })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Authorized Users:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-mono font-medium text-foreground", children: usersCount != null ? usersCount : 0 })
+        usersCount != null && usersCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Authorized users" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "font-mono", children: usersCount })
         ] })
       ] })
-    ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: title }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "No active tokens" }) })
   ] });
 });
 var TokenActivity = RunningStatus;

package/dist/index.mjs

@@ -35,7 +35,7 @@ var __objRest = (source, exclude) => {
 import { ChevronsUpDown, Command, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { memo } from "react";
+import { memo, useEffect as useEffect3 } from "react";
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
@@ -1287,7 +1287,7 @@ function SidebarMenuBadge(_a) {
 }
 
 // src/components/composed/app-sidebar.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function renderNavIcon(icon) {
   if (!icon) return null;
   if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
@@ -1312,7 +1312,7 @@ function isRouteActive(url, pathname) {
   if (cleanUrl === "/") return cleanPath === "/";
   return cleanPath === cleanUrl || cleanPath.startsWith(`${cleanUrl}/`);
 }
-var AppSidebar = memo(function AppSidebar2({
+function AppSidebarInner({
   name = "",
   email = "",
   orgRole = "",
@@ -1321,7 +1321,6 @@ var AppSidebar = memo(function AppSidebar2({
   confirmDialog = false,
   headerDropdown = false,
   image,
-  defaultOpen = true,
   navMainItems,
   navSecondaryItems = [],
   organizations,
@@ -1329,11 +1328,19 @@ var AppSidebar = memo(function AppSidebar2({
   setActiveOrg,
   children
 }) {
-  const _isMobile = useIsMobile();
   const pathname = usePathname();
+  const { setOpenMobile } = useSidebar();
   const segments = pathname ? pathname.split("/").filter(Boolean) : [];
+  useEffect3(() => {
+    if (pathname) {
+      setOpenMobile(false);
+    }
+  }, [pathname, setOpenMobile]);
+  const handleLinkClick = () => {
+    setOpenMobile(false);
+  };
   const initials = name ? name.trim().split(" ").map((n) => n[0]).join("").substring(0, 2).toUpperCase() : "U";
-  return /* @__PURE__ */ jsxs7(SidebarProvider, { defaultOpen, children: [
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
     /* @__PURE__ */ jsxs7(Sidebar, { collapsible: "icon", children: [
       /* @__PURE__ */ jsx12(SidebarHeader, { children: headerDropdown ? /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
         /* @__PURE__ */ jsx12(
@@ -1382,55 +1389,73 @@ var AppSidebar = memo(function AppSidebar2({
             ] })
           }
         )
-      ] }) }) }) : /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: /* @__PURE__ */ jsxs7(SidebarMenuButton, { size: "lg", render: /* @__PURE__ */ jsx12(Link, { href: "/" }), children: [
-        /* @__PURE__ */ jsx12("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ jsx12(Command, { className: "size-4" }) }),
-        /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-          /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: brand }),
-          /* @__PURE__ */ jsx12("span", { className: "truncate text-xs capitalize", children: orgRole })
-        ] })
-      ] }) }) }) }),
-      /* @__PURE__ */ jsxs7(SidebarContent, { children: [
-        /* @__PURE__ */ jsxs7(SidebarGroup, { children: [
-          /* @__PURE__ */ jsx12(SidebarGroupLabel, { children: "Platform" }),
-          /* @__PURE__ */ jsx12(SidebarMenu, { children: navMainItems.map(({ title, url, icon, locked }) => {
-            const isActive = isRouteActive(url, pathname);
-            return /* @__PURE__ */ jsxs7(SidebarMenuItem, { children: [
-              /* @__PURE__ */ jsxs7(
-                SidebarMenuButton,
-                {
-                  isActive,
-                  tooltip: title,
-                  render: /* @__PURE__ */ jsx12(Link, { href: url }),
-                  children: [
-                    renderNavIcon(icon),
-                    /* @__PURE__ */ jsx12("span", { children: title })
-                  ]
-                }
-              ),
-              locked && /* @__PURE__ */ jsx12(SidebarMenuBadge, { children: /* @__PURE__ */ jsx12(LockIcon, { size: 12 }) })
-            ] }, title);
-          }) })
-        ] }),
-        /* @__PURE__ */ jsx12(SidebarGroup, { className: "mt-auto", children: /* @__PURE__ */ jsx12(SidebarGroupContent, { children: /* @__PURE__ */ jsx12(SidebarMenu, { children: navSecondaryItems.map(({ title, url, icon, locked }) => {
-          const isActive = isRouteActive(url, pathname);
-          return /* @__PURE__ */ jsxs7(SidebarMenuItem, { children: [
-            /* @__PURE__ */ jsxs7(
-              SidebarMenuButton,
-              {
-                size: "sm",
-                isActive,
-                tooltip: title,
-                render: /* @__PURE__ */ jsx12(Link, { href: url }),
-                children: [
-                  renderNavIcon(icon),
-                  /* @__PURE__ */ jsx12("span", { children: title })
-                ]
-              }
-            ),
-            locked && /* @__PURE__ */ jsx12(SidebarMenuBadge, { children: /* @__PURE__ */ jsx12(LockIcon, { size: 12 }) })
-          ] }, title);
-        }) }) }) })
-      ] }),
+      ] }) }) }) : /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: /* @__PURE__ */ jsxs7(
+        SidebarMenuButton,
+        {
+          size: "lg",
+          render: /* @__PURE__ */ jsx12(Link, { href: "/", onClick: handleLinkClick }),
+          children: [
+            /* @__PURE__ */ jsx12("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ jsx12(Command, { className: "size-4" }) }),
+            /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: brand }),
+              /* @__PURE__ */ jsx12("span", { className: "truncate text-xs capitalize", children: orgRole })
+            ] })
+          ]
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsxs7(
+        SidebarContent,
+        {
+          onClick: (e) => {
+            const target = e.target;
+            if (target.closest("a")) {
+              setOpenMobile(false);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs7(SidebarGroup, { children: [
+              /* @__PURE__ */ jsx12(SidebarGroupLabel, { children: "Platform" }),
+              /* @__PURE__ */ jsx12(SidebarMenu, { children: navMainItems.map(({ title, url, icon, locked }) => {
+                const isActive = isRouteActive(url, pathname);
+                return /* @__PURE__ */ jsxs7(SidebarMenuItem, { children: [
+                  /* @__PURE__ */ jsxs7(
+                    SidebarMenuButton,
+                    {
+                      isActive,
+                      tooltip: title,
+                      render: /* @__PURE__ */ jsx12(Link, { href: url, onClick: handleLinkClick }),
+                      children: [
+                        renderNavIcon(icon),
+                        /* @__PURE__ */ jsx12("span", { children: title })
+                      ]
+                    }
+                  ),
+                  locked && /* @__PURE__ */ jsx12(SidebarMenuBadge, { children: /* @__PURE__ */ jsx12(LockIcon, { size: 12 }) })
+                ] }, title);
+              }) })
+            ] }),
+            /* @__PURE__ */ jsx12(SidebarGroup, { className: "mt-auto", children: /* @__PURE__ */ jsx12(SidebarGroupContent, { children: /* @__PURE__ */ jsx12(SidebarMenu, { children: navSecondaryItems.map(({ title, url, icon, locked }) => {
+              const isActive = isRouteActive(url, pathname);
+              return /* @__PURE__ */ jsxs7(SidebarMenuItem, { children: [
+                /* @__PURE__ */ jsxs7(
+                  SidebarMenuButton,
+                  {
+                    size: "sm",
+                    isActive,
+                    tooltip: title,
+                    render: /* @__PURE__ */ jsx12(Link, { href: url, onClick: handleLinkClick }),
+                    children: [
+                      renderNavIcon(icon),
+                      /* @__PURE__ */ jsx12("span", { children: title })
+                    ]
+                  }
+                ),
+                locked && /* @__PURE__ */ jsx12(SidebarMenuBadge, { children: /* @__PURE__ */ jsx12(LockIcon, { size: 12 }) })
+              ] }, title);
+            }) }) }) })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx12(SidebarFooter, { children: /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: confirmDialog ? /* @__PURE__ */ jsxs7(AlertDialog, { children: [
         /* @__PURE__ */ jsx12(
           AlertDialogTrigger,
@@ -1458,22 +1483,36 @@ var AppSidebar = memo(function AppSidebar2({
               AlertDialogAction,
               {
                 nativeButton: false,
-                render: /* @__PURE__ */ jsx12(Link, { href, target: "_blank" }),
+                render: /* @__PURE__ */ jsx12(
+                  Link,
+                  {
+                    href,
+                    target: "_blank",
+                    onClick: handleLinkClick
+                  }
+                ),
                 children: "Continue"
               }
             )
           ] })
         ] })
-      ] }) : /* @__PURE__ */ jsxs7(SidebarMenuButton, { size: "lg", render: /* @__PURE__ */ jsx12(Link, { href }), children: [
-        /* @__PURE__ */ jsxs7(Avatar, { children: [
-          /* @__PURE__ */ jsx12(AvatarImage, { src: image || "", alt: name || "" }),
-          /* @__PURE__ */ jsx12(AvatarFallback, { children: initials })
-        ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-          /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: name }),
-          /* @__PURE__ */ jsx12("span", { className: "truncate text-xs text-muted-foreground", children: email })
-        ] })
-      ] }) }) }) }),
+      ] }) : /* @__PURE__ */ jsxs7(
+        SidebarMenuButton,
+        {
+          size: "lg",
+          render: /* @__PURE__ */ jsx12(Link, { href, onClick: handleLinkClick }),
+          children: [
+            /* @__PURE__ */ jsxs7(Avatar, { children: [
+              /* @__PURE__ */ jsx12(AvatarImage, { src: image || "", alt: name || "" }),
+              /* @__PURE__ */ jsx12(AvatarFallback, { children: initials })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: name }),
+              /* @__PURE__ */ jsx12("span", { className: "truncate text-xs text-muted-foreground", children: email })
+            ] })
+          ]
+        }
+      ) }) }) }),
       /* @__PURE__ */ jsx12(SidebarRail, {})
     ] }),
     /* @__PURE__ */ jsxs7(SidebarInset, { children: [
@@ -1500,21 +1539,29 @@ var AppSidebar = memo(function AppSidebar2({
       /* @__PURE__ */ jsx12("div", { className: "p-4 pt-0", children })
     ] })
   ] });
+}
+var AppSidebar = memo(function AppSidebar2(_a) {
+  var _b = _a, {
+    defaultOpen = true
+  } = _b, props = __objRest(_b, [
+    "defaultOpen"
+  ]);
+  return /* @__PURE__ */ jsx12(SidebarProvider, { defaultOpen, children: /* @__PURE__ */ jsx12(AppSidebarInner, __spreadValues({}, props)) });
 });
 
 // src/components/composed/columns/avatar-group-invitations.tsx
 import { memo as memo2 } from "react";
-import { Fragment, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function getInitials(name, email) {
   const target = (name || email || "U").trim();
-  return target.split(/[\s.@]/).filter(Boolean).map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+  return target.split(/[\s.@]/).filter(Boolean).map((n) => n[0]).join("").slice(0, 1).toUpperCase();
 }
 var AvatarGroupInvitations = memo2(function AvatarGroupInvitations2({
   invitations,
   maxDisplay = 3,
   onlyPending = true,
   fallback = null,
-  size = "default",
+  size = "sm",
   className
 }) {
   const list = invitations != null ? invitations : [];
@@ -1524,7 +1571,7 @@ var AvatarGroupInvitations = memo2(function AvatarGroupInvitations2({
   }) : list;
   if (targetInvites.length === 0) {
     if (!fallback) return null;
-    return /* @__PURE__ */ jsx13(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx13(Fragment2, { children: fallback });
   }
   const visibleInvites = targetInvites.slice(0, maxDisplay);
   const remainingCount = targetInvites.length - visibleInvites.length;
@@ -1541,7 +1588,7 @@ var AvatarGroupInvitations = memo2(function AvatarGroupInvitations2({
               Avatar,
               {
                 size,
-                className: "cursor-pointer border border-dashed border-primary/40",
+                className: "border border-dashed border-primary/40",
                 children: [
                   /* @__PURE__ */ jsx13(
                     AvatarImage,
@@ -1550,7 +1597,7 @@ var AvatarGroupInvitations = memo2(function AvatarGroupInvitations2({
                       alt: displayName
                     }
                   ),
-                  /* @__PURE__ */ jsx13(AvatarFallback, { className: "bg-muted text-xs", children: initials })
+                  /* @__PURE__ */ jsx13(AvatarFallback, { children: /* @__PURE__ */ jsx13("span", { className: "text-[10px]", children: initials }) })
                 ]
               }
             )
@@ -1569,7 +1616,7 @@ var AvatarGroupInvitations = memo2(function AvatarGroupInvitations2({
       /* @__PURE__ */ jsx13(
         TooltipTrigger,
         {
-          render: /* @__PURE__ */ jsxs8(AvatarGroupCount, { className: "cursor-pointer border border-dashed border-primary/40 font-mono", children: [
+          render: /* @__PURE__ */ jsxs8(AvatarGroupCount, { className: "border border-dashed border-primary/40 text-[10px]", children: [
             "+",
             remainingCount
           ] })
@@ -1595,7 +1642,7 @@ var OrganizationInvitations = AvatarGroupInvitations;
 
 // src/components/composed/columns/avatar-group-users.tsx
 import { memo as memo3 } from "react";
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function getInitials2(name, email) {
   const target = (name || email || "U").trim();
   return target.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
@@ -1605,12 +1652,12 @@ var AvatarGroupUsers = memo3(function AvatarGroupUsers2({
   maxDisplay = 3,
   fallback = null,
   className,
-  size = "default"
+  size = "sm"
 }) {
   const list = users != null ? users : [];
   if (list.length === 0) {
     if (!fallback) return null;
-    return /* @__PURE__ */ jsx14(Fragment2, { children: fallback });
+    return /* @__PURE__ */ jsx14(Fragment3, { children: fallback });
   }
   const visibleUsers = list.slice(0, maxDisplay);
   const remainingCount = list.length - visibleUsers.length;
@@ -1623,9 +1670,9 @@ var AvatarGroupUsers = memo3(function AvatarGroupUsers2({
         /* @__PURE__ */ jsx14(
           TooltipTrigger,
           {
-            render: /* @__PURE__ */ jsxs9(Avatar, { size, className: "cursor-pointer", children: [
+            render: /* @__PURE__ */ jsxs9(Avatar, { size, children: [
               /* @__PURE__ */ jsx14(AvatarImage, { src: (_b = u.image) != null ? _b : void 0, alt: displayName }),
-              /* @__PURE__ */ jsx14(AvatarFallback, { children: initials })
+              /* @__PURE__ */ jsx14(AvatarFallback, { children: /* @__PURE__ */ jsx14("span", { className: "text-[10px]", children: initials }) })
             ] })
           }
         ),
@@ -1636,7 +1683,7 @@ var AvatarGroupUsers = memo3(function AvatarGroupUsers2({
       /* @__PURE__ */ jsx14(
         TooltipTrigger,
         {
-          render: /* @__PURE__ */ jsxs9(AvatarGroupCount, { className: "cursor-pointer font-mono", children: [
+          render: /* @__PURE__ */ jsxs9(AvatarGroupCount, { className: "text-[10px]", children: [
             "+",
             remainingCount
           ] })
@@ -1698,7 +1745,7 @@ var createToastManager = ToastPrimitive.createToastManager;
 var useToastManager = ToastPrimitive.useToastManager;
 
 // src/components/composed/columns/copyable-code.tsx
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var CopyableCode = memo5(function CopyableCode2({
   value,
   label,
@@ -1737,7 +1784,7 @@ var CopyableCode = memo5(function CopyableCode2({
   );
   if (!value) {
     if (!fallback) return null;
-    return /* @__PURE__ */ jsx17(Fragment3, { children: fallback });
+    return /* @__PURE__ */ jsx17(Fragment4, { children: fallback });
   }
   const tooltipText = copied ? "Copied!" : `Copy ${label || "value"}`;
   const copyButton = /* @__PURE__ */ jsx17(
@@ -1938,7 +1985,7 @@ var JoinedLabel = memo9(function JoinedLabel2({
 // src/components/composed/columns/metadata-progress.tsx
 import { cn as cn18 } from "cn";
 import { memo as memo10, useMemo as useMemo2 } from "react";
-import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_METADATA_FIELDS = [
   { key: "title", label: "Page Title" },
   { key: "description", label: "Meta Description" },
@@ -1958,7 +2005,7 @@ var MetadataProgress = memo10(function MetadataProgress2({
   fields = DEFAULT_METADATA_FIELDS,
   completedCount: propCompleted,
   totalCount: propTotal,
-  title = "Website Metadata",
+  title = "Metadata",
   fallback = null,
   className
 }) {
@@ -2012,7 +2059,7 @@ var MetadataProgress = memo10(function MetadataProgress2({
   }, [metadata, fields, propCompleted, propTotal]);
   const { completed, total, percentage, missing } = stats;
   if (completed === 0 && fallback !== null) {
-    return /* @__PURE__ */ jsx22(Fragment4, { children: fallback });
+    return /* @__PURE__ */ jsx22(Fragment5, { children: fallback });
   }
   return /* @__PURE__ */ jsxs15(Tooltip, { children: [
     /* @__PURE__ */ jsx22(
@@ -2056,10 +2103,14 @@ var MetadataProgress = memo10(function MetadataProgress2({
         )
       }
     ),
-    /* @__PURE__ */ jsxs15(TooltipContent, { className: "max-w-xs text-xs space-y-1.5 p-3", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-b pb-1", children: [
-        /* @__PURE__ */ jsx22("p", { className: "font-semibold text-xs", children: title }),
-        /* @__PURE__ */ jsxs15("span", { className: "font-mono text-[11px] text-muted-foreground", children: [
+    /* @__PURE__ */ jsx22(TooltipContent, { className: "max-w-xs text-xs", children: completed === total ? /* @__PURE__ */ jsxs15("span", { children: [
+      "All ",
+      total,
+      " metadata fields completed"
+    ] }) : /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1 py-0.5", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between gap-4 font-medium text-xs", children: [
+        /* @__PURE__ */ jsx22("span", { children: title }),
+        /* @__PURE__ */ jsxs15("span", { className: "font-mono text-[11px] opacity-80", children: [
           completed,
           "/",
           total,
@@ -2068,15 +2119,12 @@ var MetadataProgress = memo10(function MetadataProgress2({
           "%)"
         ] })
       ] }),
-      missing.length > 0 ? /* @__PURE__ */ jsxs15("p", { className: "text-[11px] text-muted-foreground leading-relaxed", children: [
-        /* @__PURE__ */ jsxs15("span", { className: "text-amber-600 dark:text-amber-400 font-medium", children: [
-          "Missing:",
-          " "
-        ] }),
-        missing.slice(0, 4).join(", "),
-        missing.length > 4 ? ` +${missing.length - 4} more` : ""
-      ] }) : /* @__PURE__ */ jsx22("p", { className: "text-[11px] text-emerald-600 dark:text-emerald-400 font-medium", children: "All metadata fields completed!" })
-    ] })
+      missing.length > 0 && /* @__PURE__ */ jsxs15("p", { className: "text-[11px] opacity-80 leading-normal", children: [
+        "Missing: ",
+        missing.slice(0, 3).join(", "),
+        missing.length > 3 ? ` +${missing.length - 3} more` : ""
+      ] })
+    ] }) })
   ] });
 });
 var MetadataStatus = MetadataProgress;
@@ -2359,7 +2407,7 @@ var PermissionsBadges = PermissionBadges;
 // src/components/composed/columns/redirect-uris.tsx
 import { cn as cn21 } from "cn";
 import { memo as memo13, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var RedirectUris = memo13(function RedirectUris2({
   uris,
   maxDisplay = 1,
@@ -2374,7 +2422,7 @@ var RedirectUris = memo13(function RedirectUris2({
   }, [uris]);
   if (list.length === 0) {
     if (!fallback) return null;
-    return /* @__PURE__ */ jsx25(Fragment5, { children: fallback });
+    return /* @__PURE__ */ jsx25(Fragment6, { children: fallback });
   }
   const primaryUri = list[0];
   const remainingCount = list.length - maxDisplay;
@@ -2415,16 +2463,18 @@ import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var RunningStatus = memo14(function RunningStatus2({
   count = 0,
   isRunning,
-  accessTokens = 0,
-  refreshTokens = 0,
-  usersCount = 0,
+  accessTokens,
+  refreshTokens,
+  usersCount,
   runningLabel = "Running",
   idleLabel = "Idle",
-  tooltipTitle = "Sessions & Active Tokens",
+  tooltipTitle,
   className
 }) {
   const activeCount = count != null ? count : 0;
   const running = isRunning != null ? isRunning : activeCount > 0;
+  const hasDetails = accessTokens != null && accessTokens > 0 || refreshTokens != null && refreshTokens > 0 || usersCount != null && usersCount > 0;
+  const title = tooltipTitle != null ? tooltipTitle : `${activeCount} Active Token${activeCount === 1 ? "" : "s"}`;
   return /* @__PURE__ */ jsxs19(Tooltip, { children: [
     /* @__PURE__ */ jsx26(
       TooltipTrigger,
@@ -2464,35 +2514,23 @@ var RunningStatus = memo14(function RunningStatus2({
         )
       }
     ),
-    /* @__PURE__ */ jsxs19(TooltipContent, { className: "text-xs space-y-2 p-3 min-w-[200px]", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between border-b pb-1.5", children: [
-        /* @__PURE__ */ jsx26("span", { className: "font-semibold text-xs", children: tooltipTitle }),
-        /* @__PURE__ */ jsx26(
-          "span",
-          {
-            className: cn22(
-              "text-[10px] px-1.5 py-0.5 rounded font-medium",
-              running ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-muted text-muted-foreground"
-            ),
-            children: running ? "Active" : "Idle"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1 text-[11px]", children: [
-        /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between text-muted-foreground", children: [
-          /* @__PURE__ */ jsx26("span", { children: "Active Access Tokens:" }),
-          /* @__PURE__ */ jsx26("span", { className: "font-mono font-medium text-foreground", children: accessTokens != null ? accessTokens : 0 })
+    /* @__PURE__ */ jsx26(TooltipContent, { className: "text-xs", children: running ? hasDetails ? /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1 py-0.5", children: [
+      /* @__PURE__ */ jsx26("span", { className: "font-medium text-xs", children: title }),
+      /* @__PURE__ */ jsxs19("div", { className: "space-y-0.5 text-[11px] opacity-80", children: [
+        accessTokens != null && /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx26("span", { children: "Access tokens" }),
+          /* @__PURE__ */ jsx26("span", { className: "font-mono", children: accessTokens })
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between text-muted-foreground", children: [
-          /* @__PURE__ */ jsx26("span", { children: "Active Refresh Tokens:" }),
-          /* @__PURE__ */ jsx26("span", { className: "font-mono font-medium text-foreground", children: refreshTokens != null ? refreshTokens : 0 })
+        refreshTokens != null && /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx26("span", { children: "Refresh tokens" }),
+          /* @__PURE__ */ jsx26("span", { className: "font-mono", children: refreshTokens })
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between text-muted-foreground", children: [
-          /* @__PURE__ */ jsx26("span", { children: "Authorized Users:" }),
-          /* @__PURE__ */ jsx26("span", { className: "font-mono font-medium text-foreground", children: usersCount != null ? usersCount : 0 })
+        usersCount != null && usersCount > 0 && /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx26("span", { children: "Authorized users" }),
+          /* @__PURE__ */ jsx26("span", { className: "font-mono", children: usersCount })
         ] })
       ] })
-    ] })
+    ] }) : /* @__PURE__ */ jsx26("span", { children: title }) : /* @__PURE__ */ jsx26("span", { children: "No active tokens" }) })
   ] });
 });
 var TokenActivity = RunningStatus;
@@ -3064,12 +3102,12 @@ function DataTableFooterPagination({
 
 // src/components/composed/data-table/table-header-add.tsx
 import { PlusIcon } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
 function DataTableHeaderAdd({
   onAdd,
   addLabel
 }) {
-  return /* @__PURE__ */ jsxs25(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs25(Fragment7, { children: [
     /* @__PURE__ */ jsxs25(Tooltip, { children: [
       /* @__PURE__ */ jsx36(
         TooltipTrigger,
@@ -3787,7 +3825,7 @@ function SelectScrollDownButton(_a) {
 }
 
 // src/components/composed/data-table/table-header-filter.tsx
-import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 function smartFilterFn(row, columnId, filterValue) {
   var _a, _b, _c;
   if (filterValue === void 0 || filterValue === null || filterValue === "" || filterValue === "all") {
@@ -4129,7 +4167,7 @@ function DataTableHeaderFilter({
           column.id
         );
       }) }),
-      columnFilters.length > 0 && /* @__PURE__ */ jsxs28(Fragment7, { children: [
+      columnFilters.length > 0 && /* @__PURE__ */ jsxs28(Fragment8, { children: [
         /* @__PURE__ */ jsx41(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsx41(
           DropdownMenuItem,
@@ -4219,7 +4257,7 @@ function DataTableHeaderSearch({
 
 // src/components/composed/data-table/table-header-sort.tsx
 import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function DataTableHeaderSort({
   table,
   sorting
@@ -4275,7 +4313,7 @@ function DataTableHeaderSort({
           column.id
         );
       }),
-      sorting.length > 0 && /* @__PURE__ */ jsxs31(Fragment8, { children: [
+      sorting.length > 0 && /* @__PURE__ */ jsxs31(Fragment9, { children: [
         /* @__PURE__ */ jsx44(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsx44(
           DropdownMenuItem,
@@ -4335,8 +4373,8 @@ function DataTableHeaderToggle({
 
 // src/components/composed/data-table/data-row-actions.tsx
 import { MoreHorizontal } from "lucide-react";
-import { Fragment as Fragment9 } from "react";
-import { Fragment as Fragment10, jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment10 } from "react";
+import { Fragment as Fragment11, jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
 function RowActions({
   label = "Actions",
   items = [],
@@ -4367,7 +4405,7 @@ function RowActions({
             align,
             className: cn26("w-40", contentClassName),
             children: /* @__PURE__ */ jsxs33(DropdownMenuGroup, { children: [
-              label && /* @__PURE__ */ jsxs33(Fragment10, { children: [
+              label && /* @__PURE__ */ jsxs33(Fragment11, { children: [
                 /* @__PURE__ */ jsx46(DropdownMenuLabel, { children: label }),
                 /* @__PURE__ */ jsx46(DropdownMenuSeparator, {})
               ] }),
@@ -4375,7 +4413,7 @@ function RowActions({
                 var _a;
                 const itemKey = (_a = item.id) != null ? _a : `${item.label}-${index}`;
                 const isDestructive = item.variant === "destructive";
-                return /* @__PURE__ */ jsxs33(Fragment9, { children: [
+                return /* @__PURE__ */ jsxs33(Fragment10, { children: [
                   item.separatorBefore && /* @__PURE__ */ jsx46(DropdownMenuSeparator, {}),
                   /* @__PURE__ */ jsxs33(
                     DropdownMenuItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prediktif/ui",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",