@logickernel/bridge 0.9.0 → 0.9.1

package/README.md

@@ -35,15 +35,20 @@ const nextConfig: NextConfig = {
 export default nextConfig
 ```
 
-**Why `transpilePackages`?** This tells Next.js to transpile the bridge library's TypeScript/ES modules during the build process. This is necessary because the library uses modern JavaScript features and needs to be processed by Next.js's bundler (Turbopack or webpack) to work correctly with your application.
+Use webpack instead of Turbopack (the default) in your `package.json` scripts:
 
-### 3. Use the Layout Component
-
-The library provides a ready-to-use layout component with sidebar navigation. You need a thin wrapper component in your app to establish the client/server boundary.
+```json
+{
+  "scripts": {
+    "dev": "next dev --webpack",
+    "build": "next build --webpack"
+  }
+}
+```
 
-**Step 1: Create a wrapper component**
+### 3. Use the Layout Component
 
-Create `src/components/app-layout-wrapper.tsx`:
+Create a wrapper component to establish the client/server boundary:
 
 ```typescript
 "use client"
@@ -77,11 +82,9 @@ export function AppLayoutWrapper({
 }
 ```
 
-**Step 2: Use in your layout**
+Use in your layout:
 
-In your `app/app/layout.tsx` (or wherever your app layout is):
-
-```typescript
+```tsx
 import { redirect } from "next/navigation"
 import { auth } from "@/lib/next-auth" // or your auth setup
 import { AppLayoutWrapper } from "@/components/app-layout-wrapper"
@@ -105,11 +108,11 @@ export default async function Layout({
 }
 ```
 
-The `user` prop is **not needed** - the layout automatically fetches user information from the navigation API endpoint.
+The layout automatically fetches user information from the navigation API endpoint.
 
 ### 4. Navigation API Endpoint
 
-The layout component automatically loads navigation items from your API. The **Kernel Core application** provides this endpoint at `/api/navigation/[organization_id]`.
+The layout automatically loads navigation items from `/api/navigation/[organization_id]`.
 
 **Required Endpoint:** `GET /api/navigation/[organization_id]`
 
@@ -147,25 +150,22 @@ interface NavigationOrganization {
 }
 ```
 
-**Note:** The endpoint should be protected and only return data the authenticated user has access to. The `{organizationId}` placeholder in item URLs will be automatically replaced with the current organization ID.
+The endpoint should be protected and only return data the authenticated user has access to. The `{organizationId}` placeholder in item URLs is automatically replaced with the current organization ID.
 
 ## Features
 
-The `AppLayout` component provides:
-
-- ✅ **Built-in sidebar navigation** with collapsible sections
-- ✅ **Organization switcher** - Switch between organizations the user belongs to
-- ✅ **User menu** with profile information and sign-out
-- ✅ **Responsive design** - Works on mobile and desktop
-- ✅ **Automatic navigation loading** - Fetches from your API endpoint
-- ✅ **Consistent UI** - Same look and feel across all microfrontends using the library
-- ✅ **No extra components required** - All UI components are included in the library
+- Built-in sidebar navigation with collapsible sections
+- Organization switcher
+- User menu with profile and sign-out
+- Responsive design (mobile and desktop)
+- Automatic navigation loading from API
+- Consistent UI across microfrontends
 
 ## Next.js Utilities
 
 ### Server Components / Pages
 
-```typescript
+```tsx
 import { getSession } from "@logickernel/bridge/next"
 import { redirect } from "next/navigation"
 
@@ -182,7 +182,7 @@ export default async function DashboardPage() {
 
 ### Role-Based Page Protection
 
-```typescript
+```tsx
 import { checkPageAuth } from "@logickernel/bridge/next"
 import { redirect, notFound } from "next/navigation"
 
@@ -267,8 +267,6 @@ export const config = {
 
 ## Import Paths
 
-The library uses top-level exports (no subpath exports) for better bundler compatibility:
-
 ```typescript
 // Core utilities (framework-agnostic)
 import { decodeSessionToken, fetchUserRoles } from "@logickernel/bridge"
@@ -277,7 +275,7 @@ import { decodeSessionToken, fetchUserRoles } from "@logickernel/bridge"
 import { getSession, withAuth, checkPageAuth } from "@logickernel/bridge/next"
 
 // Layout components (client components)
-import { AppLayout, type User } from "@logickernel/bridge/next-components"
+import { AppLayout, type User } from "@logickernel/bridge/next/components"
 ```
 
 ## API Reference
@@ -318,10 +316,10 @@ import { AppLayout, type User } from "@logickernel/bridge/next-components"
 
 ```typescript
 interface AppLayoutProps {
-  user?: User                    // Optional: User information (auto-fetched if not provided)
+  user?: User                    // Optional: Auto-fetched if not provided
   organizationId?: string        // Optional: Current organization ID
-  apiBaseUrl?: string            // Optional: API base URL (defaults to "/api")
-  children: React.ReactNode      // Page content
+  apiBaseUrl?: string            // Optional: Defaults to "/api"
+  children: React.ReactNode
 }
 ```
 
@@ -349,7 +347,7 @@ import type {
   User,
   NavigationItem,
   NavigationOrganization,
-} from "@logickernel/bridge/next-components"
+} from "@logickernel/bridge/next/components"
 ```
 
 ## Architecture

package/dist/next/components.cjs

@@ -1217,18 +1217,37 @@ function useNavigation({
   const [loading, setLoading] = React2.useState(false);
   const [error, setError] = React2.useState(null);
   React2.useEffect(() => {
+    if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+      console.log("[useNavigation] Hook called:", {
+        enabled,
+        organizationId,
+        apiBaseUrl,
+        willFetch: enabled && !!organizationId
+      });
+    }
     if (!enabled || !organizationId) {
+      if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+        console.log("[useNavigation] Skipping fetch:", {
+          reason: !enabled ? "disabled" : "no organizationId",
+          enabled,
+          organizationId
+        });
+      }
       setItems([]);
       setOrganizations([]);
       setUser(null);
       return;
     }
     const fetchNavigation = async () => {
+      const url = `${apiBaseUrl}/navigation/${organizationId}`;
+      if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+        console.log("[useNavigation] Fetching navigation:", url);
+      }
       setLoading(true);
       setError(null);
       try {
         const response = await fetch(
-          `${apiBaseUrl}/navigation/${organizationId}`,
+          url,
           {
             credentials: "include"
             // Include cookies for auth
@@ -1244,11 +1263,25 @@ function useNavigation({
           throw new Error(`Failed to fetch navigation: ${response.statusText}`);
         }
         const data = await response.json();
+        if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+          console.log("[useNavigation] Navigation data received:", {
+            itemsCount: data.items?.length || 0,
+            organizationsCount: data.organizations?.length || 0,
+            hasUser: !!data.user
+          });
+        }
         setItems(data.items || []);
         setOrganizations(data.organizations || []);
         setUser(data.user || null);
       } catch (err) {
         const error2 = err instanceof Error ? err : new Error("Unknown error");
+        if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+          console.error("[useNavigation] Fetch error:", {
+            error: error2.message,
+            url,
+            organizationId
+          });
+        }
         setError(error2);
         setItems([]);
         setOrganizations([]);
@@ -1268,19 +1301,60 @@ function AppSidebar({
   ...props
 }) {
   const currentPathname = navigation.usePathname();
-  const pathSegments = currentPathname.split("/");
-  const isAppOrgRoute = currentPathname.startsWith("/app/") && pathSegments.length > 2 && pathSegments[2] !== "user";
-  const pathOrgId = isAppOrgRoute ? pathSegments[2] : null;
+  const pathSegments = currentPathname.split("/").filter(Boolean);
+  let pathOrgId = null;
+  if (pathSegments.length >= 2 && pathSegments[0] === "app") {
+    const potentialOrgId = pathSegments[1];
+    if (potentialOrgId && potentialOrgId !== "user") {
+      pathOrgId = potentialOrgId;
+    }
+  } else if (pathSegments.length >= 1) {
+    const potentialOrgId = pathSegments[0];
+    const skipSegments = ["user", "api", "auth", "dashboard", "settings", "app"];
+    if (potentialOrgId && !skipSegments.includes(potentialOrgId)) {
+      if (potentialOrgId.includes("-") || potentialOrgId.length >= 8) {
+        pathOrgId = potentialOrgId;
+      }
+    }
+  }
+  const detectedOrgId = organizationId || pathOrgId || void 0;
+  if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+    console.log("[AppSidebar] Debug:", {
+      currentPathname,
+      pathSegments,
+      pathOrgId,
+      organizationId,
+      detectedOrgId,
+      apiBaseUrl
+    });
+  }
   const {
     items: apiNavigationItems,
     organizations: apiOrganizations,
     user: navigationUser,
-    loading: navigationLoading
+    loading: navigationLoading,
+    error: navigationError
   } = useNavigation({
-    organizationId: organizationId || pathOrgId || void 0,
+    organizationId: detectedOrgId,
     apiBaseUrl,
     enabled: true
   });
+  React2__namespace.useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      console.log("[AppSidebar] Navigation state:", {
+        currentPathname,
+        pathOrgId,
+        organizationId,
+        detectedOrgId,
+        apiBaseUrl,
+        itemsCount: apiNavigationItems.length,
+        organizationsCount: apiOrganizations.length,
+        loading: navigationLoading,
+        error: navigationError?.message,
+        navigationUrl: detectedOrgId ? `${apiBaseUrl}/navigation/${detectedOrgId}` : "N/A"
+      });
+    }
+  }, [currentPathname, pathOrgId, organizationId, detectedOrgId, apiBaseUrl, apiNavigationItems.length, apiOrganizations.length, navigationLoading, navigationError]);
   const user = navigationUser || userProp;
   const currentOrgId = organizationId || (pathOrgId && apiOrganizations.some((org) => org.id === pathOrgId) ? pathOrgId : void 0);
   let navigationItems = apiNavigationItems;