@logickernel/bridge 0.8.2 → 0.8.4

package/README.md

@@ -6,17 +6,13 @@ Framework-agnostic micro-frontend authentication library for AuthJS/NextAuth JWT
 
 ```bash
 npm install @logickernel/bridge
-# or
-pnpm add @logickernel/bridge
-# or
-yarn add @logickernel/bridge
 ```
 
 ## Quick Start (Next.js)
 
 ### 1. Environment Variables
 
-Add these to your `.env` file:
+Add these to the `.env` file of your application:
 
 ```bash
 AUTH_SECRET=your-nextauth-secret  # Required: Same secret used by your kernel/auth server
@@ -39,16 +35,56 @@ 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.
+
 ### 3. Use the Layout Component
 
-The library provides a ready-to-use layout component with sidebar navigation. Import `AppLayoutWrapper` directly from the library:
+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.
+
+**Step 1: Create a wrapper component**
+
+Create `src/components/app-layout-wrapper.tsx`:
+
+```typescript
+"use client"
+
+/**
+ * Client boundary wrapper for AppLayout.
+ * 
+ * This wrapper is required because "use client" directives are not preserved
+ * in bundled library code. Next.js needs this directive in your source code
+ * to properly handle the client/server boundary.
+ */
+import { AppLayout } from "@logickernel/bridge/next-components"
+
+export function AppLayoutWrapper({
+  children,
+  organizationId,
+  apiBaseUrl,
+}: {
+  children: React.ReactNode
+  organizationId?: string
+  apiBaseUrl?: string
+}) {
+  return (
+    <AppLayout
+      organizationId={organizationId}
+      apiBaseUrl={apiBaseUrl}
+    >
+      {children}
+    </AppLayout>
+  )
+}
+```
+
+**Step 2: Use in your layout**
 
 In your `app/app/layout.tsx` (or wherever your app layout is):
 
 ```typescript
 import { redirect } from "next/navigation"
 import { auth } from "@/lib/next-auth" // or your auth setup
-import { AppLayoutWrapper } from "@logickernel/bridge/next-components"
+import { AppLayoutWrapper } from "@/components/app-layout-wrapper"
 
 export default async function Layout({
   children,
@@ -69,17 +105,6 @@ export default async function Layout({
 }
 ```
 
-**Optional: Pass organization ID and API base URL**
-
-```typescript
-<AppLayoutWrapper
-  organizationId={organizationId}
-  apiBaseUrl={apiBaseUrl}
->
-  {children}
-</AppLayoutWrapper>
-```
-
 The `user` prop is **not needed** - the layout automatically fetches user information from the navigation API endpoint.
 
 ### 4. Navigation API Endpoint
@@ -285,8 +310,7 @@ import { AppLayout, type User } from "@logickernel/bridge/next-components"
 
 | Export | Description |
 |--------|-------------|
-| `AppLayout` | Main layout component with sidebar navigation (use `AppLayoutWrapper` in server components) |
-| `AppLayoutWrapper` | Wrapper component for use in server components (recommended) |
+| `AppLayout` | Main layout component with sidebar navigation (wrap in a local component with `"use client"` for server components) |
 | `useNavigation` | Hook to fetch navigation items from API |
 | `getIconComponent` | Utility to get icon component from icon name |
 
@@ -301,16 +325,6 @@ interface AppLayoutProps {
 }
 ```
 
-## Why AppLayoutWrapper?
-
-The library provides `AppLayoutWrapper` as a convenience wrapper for `AppLayout` because:
-
-1. **React Context Requirement**: `AppLayout` uses React Context internally (for sidebar state)
-2. **SSR Build Compatibility**: Next.js requires a clean client/server boundary when client components with Context are used in server components
-3. **Simplified Usage**: Using `AppLayoutWrapper` directly avoids React resolution issues during build-time analysis
-
-You can use `AppLayoutWrapper` directly in server components without creating your own wrapper.
-
 ## TypeScript Types
 
 ```typescript

package/dist/next-components.cjs

@@ -1335,23 +1335,8 @@ function AppLayout({
     ] })
   ] });
 }
-function AppLayoutWrapper({
-  organizationId,
-  apiBaseUrl,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AppLayout,
-    {
-      organizationId,
-      apiBaseUrl,
-      children
-    }
-  );
-}
 
 exports.AppLayout = AppLayout;
-exports.AppLayoutWrapper = AppLayoutWrapper;
 exports.AppSidebar = AppSidebar;
 exports.NavMain = NavMain;
 exports.NavUser = NavUser;