@logickernel/bridge 0.9.7 → 0.9.9

package/dist/next/components.d.cts

@@ -75,7 +75,7 @@ declare function useNavigation({ organizationId, apiBaseUrl, enabled, }?: UseNav
 interface NavMainProps {
     items: NavigationItem[];
 }
-declare function NavMain({ items }: NavMainProps): react_jsx_runtime.JSX.Element;
+declare function NavMain({ items }: NavMainProps): react_jsx_runtime.JSX.Element | null;
 
 interface NavUserProps {
     user: User;
@@ -86,7 +86,7 @@ interface TeamSwitcherProps {
     teams: NavigationOrganization[];
     organizationId?: string;
 }
-declare function TeamSwitcher({ teams, organizationId, }: TeamSwitcherProps): react_jsx_runtime.JSX.Element | null;
+declare function TeamSwitcher({ teams, organizationId, }: TeamSwitcherProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Icon mapper utility

package/dist/next/components.d.ts

@@ -75,7 +75,7 @@ declare function useNavigation({ organizationId, apiBaseUrl, enabled, }?: UseNav
 interface NavMainProps {
     items: NavigationItem[];
 }
-declare function NavMain({ items }: NavMainProps): react_jsx_runtime.JSX.Element;
+declare function NavMain({ items }: NavMainProps): react_jsx_runtime.JSX.Element | null;
 
 interface NavUserProps {
     user: User;
@@ -86,7 +86,7 @@ interface TeamSwitcherProps {
     teams: NavigationOrganization[];
     organizationId?: string;
 }
-declare function TeamSwitcher({ teams, organizationId, }: TeamSwitcherProps): react_jsx_runtime.JSX.Element | null;
+declare function TeamSwitcher({ teams, organizationId, }: TeamSwitcherProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Icon mapper utility

package/dist/next/components.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LucideIcons from 'lucide-react';
-import { ChevronRight, ChevronsUpDown, BadgeCheck, LogOut, GalleryVerticalEnd, Check, PanelLeftIcon, XIcon } from 'lucide-react';
+import { ChevronRight, ChevronsUpDown, BadgeCheck, LogOut, GalleryVerticalEnd, Check, XIcon, MenuIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -416,14 +416,14 @@ function SidebarTrigger({
       "data-slot": "sidebar-trigger",
       variant: "ghost",
       size: "icon",
-      className: cn("size-7", className),
+      className: cn(className, "size-7"),
       onClick: (event) => {
         onClick?.(event);
         toggleSidebar();
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx(MenuIcon, {}),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
@@ -455,12 +455,11 @@ function SidebarRail({ className, ...props }) {
 }
 function SidebarInset({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    "main",
+    "div",
     {
       "data-slot": "sidebar-inset",
       className: cn(
         "bg-background relative flex w-full flex-1 flex-col",
-        "px-4",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       ),
@@ -728,6 +727,7 @@ function getIconComponent(icon) {
 }
 function NavMain({ items }) {
   const pathname = usePathname();
+  const { isMobile, setOpenMobile } = useSidebar();
   if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
     console.log("[NavMain] Received items:", {
       itemsCount: items.length,
@@ -771,59 +771,105 @@ function NavMain({ items }) {
       groupsCount: groups.length,
       groups: groups.map((group) => ({
         hasLabel: !!group.label,
+        labelTitle: group.label?.title,
         itemsCount: group.items.length,
         items: group.items.map((item) => item.title)
       }))
     });
+    const firstGroup = groups.length > 0 ? groups[0] : null;
+    console.log("[NavMain] Will render:", {
+      groupsLength: groups.length,
+      willRender: groups.length > 0,
+      firstGroupHasItems: firstGroup ? firstGroup.items.length > 0 : false,
+      firstGroupHasLabel: !!firstGroup?.label
+    });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [
-    group.label && /* @__PURE__ */ jsxs(SidebarGroupLabel, { children: [
-      group.label.icon && /* @__PURE__ */ jsx(group.label.icon, { className: "mr-2" }),
-      group.label.title
-    ] }),
-    group.items.length > 0 && /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => {
-      const isActive = pathname === item.url || item.isActive;
-      const hasSubItems = item.items && item.items.length > 0;
-      if (hasSubItems) {
-        return /* @__PURE__ */ jsx(
-          Collapsible,
+  if (groups.length === 0) {
+    if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+      console.warn("[NavMain] No groups to render, returning null");
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, groupIndex) => {
+    if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+      console.log(`[NavMain] Rendering group ${groupIndex}:`, {
+        hasLabel: !!group.label,
+        itemsCount: group.items.length,
+        willRenderLabel: !!group.label,
+        willRenderItems: group.items.length > 0
+      });
+    }
+    return /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+      group.label && /* @__PURE__ */ jsxs(SidebarGroupLabel, { children: [
+        group.label.icon && /* @__PURE__ */ jsx(group.label.icon, { className: "mr-2" }),
+        group.label.title
+      ] }),
+      group.items.length > 0 && /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => {
+        const isActive = pathname === item.url || item.isActive;
+        const hasSubItems = item.items && item.items.length > 0;
+        if (hasSubItems) {
+          return /* @__PURE__ */ jsx(
+            Collapsible,
+            {
+              asChild: true,
+              defaultOpen: isActive,
+              className: "group/collapsible",
+              children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+                /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  SidebarMenuButton,
+                  {
+                    tooltip: item.title,
+                    isActive,
+                    children: [
+                      item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                      /* @__PURE__ */ jsx("span", { children: item.title }),
+                      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: subItem.url,
+                    onClick: () => {
+                      if (isMobile) {
+                        setOpenMobile(false);
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx("span", { children: subItem.title })
+                  }
+                ) }) }, subItem.title)) }) })
+              ] })
+            },
+            item.title
+          );
+        }
+        return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+          SidebarMenuButton,
           {
             asChild: true,
-            defaultOpen: isActive,
-            className: "group/collapsible",
-            children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
-              /* @__PURE__ */ jsx(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs(
-                SidebarMenuButton,
-                {
-                  tooltip: item.title,
-                  isActive,
-                  children: [
-                    item.icon && /* @__PURE__ */ jsx(item.icon, {}),
-                    /* @__PURE__ */ jsx("span", { children: item.title }),
-                    /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: subItem.url, children: /* @__PURE__ */ jsx("span", { children: subItem.title }) }) }) }, subItem.title)) }) })
-            ] })
-          },
-          item.title
-        );
-      }
-      return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
-        SidebarMenuButton,
-        {
-          asChild: true,
-          tooltip: item.title,
-          isActive,
-          children: /* @__PURE__ */ jsxs(Link, { href: item.url, children: [
-            item.icon && /* @__PURE__ */ jsx(item.icon, {}),
-            /* @__PURE__ */ jsx("span", { children: item.title })
-          ] })
-        }
-      ) }, item.title);
-    }) })
-  ] }, groupIndex)) });
+            tooltip: item.title,
+            isActive,
+            children: /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: item.url,
+                onClick: () => {
+                  if (isMobile) {
+                    setOpenMobile(false);
+                  }
+                },
+                children: [
+                  item.icon && /* @__PURE__ */ jsx(item.icon, {}),
+                  /* @__PURE__ */ jsx("span", { children: item.title })
+                ]
+              }
+            )
+          }
+        ) }, item.title);
+      }) })
+    ] }, groupIndex);
+  }) });
 }
 function Avatar({
   className,
@@ -1056,11 +1102,19 @@ function TeamSwitcher({
   const isAppOrgRoute = pathname.startsWith("/app/") && pathSegments.length > 2 && pathSegments[2] !== "user";
   const pathOrgId = isAppOrgRoute ? pathSegments[2] : null;
   const currentOrgId = organizationId || (pathOrgId && teams.some((team) => team.id === pathOrgId) ? pathOrgId : null);
-  const activeTeam = currentOrgId ? teams.find((team) => team.id === currentOrgId) : null;
   const handleTeamChange = (teamId) => {
+    if (isMobile && sidebar?.setOpenMobile) {
+      sidebar.setOpenMobile(false);
+    }
     router.push(`/app/${teamId}/home`);
     router.refresh();
   };
+  const handleManageOrganizations = () => {
+    if (isMobile && sidebar?.setOpenMobile) {
+      sidebar.setOpenMobile(false);
+    }
+    router.push("/app/user/organizations");
+  };
   const teamsWithLogo = teams.map((org) => {
     const logoIcon = org.logo ? getIconComponent(org.logo) : GalleryVerticalEnd;
     return {
@@ -1070,6 +1124,7 @@ function TeamSwitcher({
       plan: org.plan || "Member"
     };
   });
+  const activeTeamWithLogo = currentOrgId ? teamsWithLogo.find((team) => team.id === currentOrgId) : null;
   if (teamsWithLogo.length === 0) {
     return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { size: "lg", className: "cursor-default", children: [
       /* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4 text-muted-foreground" }) }),
@@ -1079,70 +1134,6 @@ function TeamSwitcher({
       ] })
     ] }) }) });
   }
-  if (!activeTeam) {
-    return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        SidebarMenuButton,
-        {
-          size: "lg",
-          className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-              /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: "Organizations" }),
-              /* @__PURE__ */ jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [
-                teamsWithLogo.length,
-                " available"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(
-        DropdownMenuContent,
-        {
-          className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
-          align: "start",
-          side: isMobile ? "bottom" : "right",
-          sideOffset: 4,
-          children: [
-            /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-muted-foreground text-xs", children: "Select an organization" }),
-            teamsWithLogo.map((team) => /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                onClick: () => handleTeamChange(team.id),
-                className: "gap-2 p-2",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border", children: /* @__PURE__ */ jsx(team.logo, { className: "size-3.5 shrink-0" }) }),
-                  team.name
-                ]
-              },
-              team.id
-            )),
-            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                className: "gap-2 p-2",
-                onClick: () => router.push("/app/user/organizations"),
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4" }) }),
-                  /* @__PURE__ */ jsx("div", { className: "text-muted-foreground font-medium", children: "Manage organizations" })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] }) }) });
-  }
-  const activeTeamWithLogo = teamsWithLogo.find(
-    (team) => team.id === currentOrgId
-  );
-  if (!activeTeamWithLogo) {
-    return null;
-  }
   return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       SidebarMenuButton,
@@ -1150,10 +1141,18 @@ function TeamSwitcher({
         size: "lg",
         className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(activeTeamWithLogo.logo, { className: "size-4" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: activeTeamWithLogo.name }),
-            /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: activeTeamWithLogo.plan })
+          activeTeamWithLogo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(activeTeamWithLogo.logo, { className: "size-4" }) }),
+            /* @__PURE__ */ jsx("div", { className: "grid flex-1 text-left text-sm leading-tight", children: /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: activeTeamWithLogo.name }) })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-muted flex aspect-square size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: "Organizations" }),
+              /* @__PURE__ */ jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [
+                teamsWithLogo.length,
+                " available"
+              ] })
+            ] })
           ] }),
           /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto" })
         ]
@@ -1167,7 +1166,7 @@ function TeamSwitcher({
         side: isMobile ? "bottom" : "right",
         sideOffset: 4,
         children: [
-          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-muted-foreground text-xs", children: "Organizations" }),
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-muted-foreground text-xs", children: activeTeamWithLogo ? "Organizations" : "Select an organization" }),
           teamsWithLogo.map((team) => /* @__PURE__ */ jsxs(
             DropdownMenuItem,
             {
@@ -1186,7 +1185,7 @@ function TeamSwitcher({
             DropdownMenuItem,
             {
               className: "gap-2 p-2",
-              onClick: () => router.push("/app/user/organizations"),
+              onClick: handleManageOrganizations,
               children: [
                 /* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: /* @__PURE__ */ jsx(GalleryVerticalEnd, { className: "size-4" }) }),
                 /* @__PURE__ */ jsx("div", { className: "text-muted-foreground font-medium", children: "Manage organizations" })
@@ -1214,16 +1213,12 @@ function useNavigation({
         enabled,
         organizationId,
         apiBaseUrl,
-        willFetch: enabled && !!organizationId
+        willFetch: enabled
       });
     }
-    if (!enabled || !organizationId) {
+    if (!enabled) {
       if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
-        console.log("[useNavigation] Skipping fetch:", {
-          reason: !enabled ? "disabled" : "no organizationId",
-          enabled,
-          organizationId
-        });
+        console.log("[useNavigation] Skipping fetch: disabled");
       }
       setItems([]);
       setOrganizations([]);
@@ -1231,7 +1226,7 @@ function useNavigation({
       return;
     }
     const fetchNavigation = async () => {
-      const url = `${apiBaseUrl}/navigation/${organizationId}`;
+      const url = organizationId ? `${apiBaseUrl}/navigation/${organizationId}` : `${apiBaseUrl}/navigation`;
       if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
         console.log("[useNavigation] Fetching navigation:", url);
       }
@@ -1259,7 +1254,8 @@ function useNavigation({
           console.log("[useNavigation] Navigation data received:", {
             itemsCount: data.items?.length || 0,
             organizationsCount: data.organizations?.length || 0,
-            hasUser: !!data.user
+            hasUser: !!data.user,
+            organizationId: data.organizationId
           });
         }
         setItems(data.items || []);
@@ -1411,6 +1407,22 @@ function AppSidebar({
     /* @__PURE__ */ jsx(SidebarRail, {})
   ] });
 }
+function AppHeader() {
+  const { isMobile } = useSidebar();
+  if (!isMobile) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("header", { className: "p-2 relative flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(SidebarTrigger, { className: "absolute left-2" }),
+    /* @__PURE__ */ jsx("span", { className: "font-sans text-xl", children: "Random Truffle" })
+  ] });
+}
+function SidebarContent2({ children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AppHeader, {}),
+    /* @__PURE__ */ jsx("main", { className: "px-4 py-2 md:py-4", children })
+  ] });
+}
 function AppLayout({
   user,
   organizationId,
@@ -1426,10 +1438,7 @@ function AppLayout({
         apiBaseUrl
       }
     ),
-    /* @__PURE__ */ jsxs(SidebarInset, { children: [
-      /* @__PURE__ */ jsx(SidebarTrigger, {}),
-      children
-    ] })
+    /* @__PURE__ */ jsx(SidebarInset, { children: /* @__PURE__ */ jsx(SidebarContent2, { children }) })
   ] });
 }