@logickernel/frame 0.6.0 → 0.8.0

package/README.md

@@ -479,9 +479,7 @@ For cross-origin requests, use the full API URL:
 ```typescript
 <AppSidebar
   user={user}
-  organizations={organizations}
   organizationId={orgId}
-  useApiNavigation={true}
   apiBaseUrl="https://kernel.example.com/api"
 />
 ```

package/dist/index.d.mts

@@ -111,12 +111,6 @@ interface AppLayoutProps {
     organizationId?: string;
     /** Custom API base URL (API mode only, defaults to "/api" which constructs "/api/navigation/{organizationId}") */
     apiBaseUrl?: string;
-    /** Enable API mode - library will fetch navigation from API */
-    useApiNavigation?: boolean;
-    /** Custom header content (breadcrumbs, actions, etc.) */
-    headerContent?: ReactNode;
-    /** Show/hide default header (default: true) */
-    showHeader?: boolean;
     /** Children to render in the main content area */
     children: ReactNode;
 }
@@ -168,18 +162,29 @@ declare function AppSidebar({ user, adapter: externalAdapter, data, organization
  * This component wraps AppSidebar and SidebarInset in SidebarProvider and provides
  * a default header with sidebar trigger. It handles all layout concerns internally.
  *
+ * Navigation mode is determined automatically:
+ * - If `data` prop is provided, uses props mode
+ * - If `data` is not provided, automatically uses API mode (fetches from API)
+ *
  * @example
  * ```tsx
+ * // API mode (no data prop)
+ * <AppLayout
+ *   user={user}
+ * >
+ *   {children}
+ * </AppLayout>
+ *
+ * // Props mode (with data prop)
  * <AppLayout
  *   user={user}
- *   useApiNavigation={true}
- *   headerContent={<Breadcrumb>...</Breadcrumb>}
+ *   data={{ organizations: [...], navigationItems: [...] }}
  * >
  *   {children}
  * </AppLayout>
  * ```
  */
-declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, useApiNavigation, headerContent, showHeader, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface NavMainProps {
     items: NavigationItem[];

package/dist/index.d.ts

@@ -111,12 +111,6 @@ interface AppLayoutProps {
     organizationId?: string;
     /** Custom API base URL (API mode only, defaults to "/api" which constructs "/api/navigation/{organizationId}") */
     apiBaseUrl?: string;
-    /** Enable API mode - library will fetch navigation from API */
-    useApiNavigation?: boolean;
-    /** Custom header content (breadcrumbs, actions, etc.) */
-    headerContent?: ReactNode;
-    /** Show/hide default header (default: true) */
-    showHeader?: boolean;
     /** Children to render in the main content area */
     children: ReactNode;
 }
@@ -168,18 +162,29 @@ declare function AppSidebar({ user, adapter: externalAdapter, data, organization
  * This component wraps AppSidebar and SidebarInset in SidebarProvider and provides
  * a default header with sidebar trigger. It handles all layout concerns internally.
  *
+ * Navigation mode is determined automatically:
+ * - If `data` prop is provided, uses props mode
+ * - If `data` is not provided, automatically uses API mode (fetches from API)
+ *
  * @example
  * ```tsx
+ * // API mode (no data prop)
+ * <AppLayout
+ *   user={user}
+ * >
+ *   {children}
+ * </AppLayout>
+ *
+ * // Props mode (with data prop)
  * <AppLayout
  *   user={user}
- *   useApiNavigation={true}
- *   headerContent={<Breadcrumb>...</Breadcrumb>}
+ *   data={{ organizations: [...], navigationItems: [...] }}
  * >
  *   {children}
  * </AppLayout>
  * ```
  */
-declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, useApiNavigation, headerContent, showHeader, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface NavMainProps {
     items: NavigationItem[];

package/dist/index.js

@@ -322,21 +322,20 @@ var SidebarInset = React2__namespace.forwardRef(({ className, style, ...props },
       ref,
       className: cn(
         "relative flex min-h-svh flex-1 flex-col bg-background",
-        // Auto-adjust margin based on sidebar state using CSS variables
+        // Auto-adjust margin based on sidebar state
         // Transition duration uses CSS variable for consistency
-        "transition-[margin-left] ease-linear",
+        "transition-[margin-left] duration-200 ease-linear",
         // On mobile, no margin needed (sidebar is overlay)
-        // On desktop, margin-left based on sidebar state
-        !isMobile && state === "expanded" && "md:ml-[var(--sidebar-width)]",
-        !isMobile && state === "collapsed" && "md:ml-[var(--sidebar-width-icon)]",
+        // On desktop, margin-left based on sidebar state:
+        // - Expanded: ml-64 (256px / 16rem)
+        // - Collapsed: ml-12 (48px / 3rem)
+        !isMobile && state === "expanded" && "md:ml-64",
+        !isMobile && state === "collapsed" && "md:ml-12",
         // Keep peer-based styles for inset variant
         "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       ),
-      style: {
-        transitionDuration: "var(--sidebar-transition-duration, 200ms)",
-        ...style
-      },
+      style,
       ...props
     }
   );
@@ -1265,32 +1264,21 @@ function AppLayout({
   data,
   organizationId,
   apiBaseUrl,
-  useApiNavigation,
-  headerContent,
-  showHeader = true,
   children
 }) {
-  const isApiMode = useApiNavigation === true;
-  const navigationApiBaseUrl = apiBaseUrl;
   return /* @__PURE__ */ jsxRuntime.jsxs(SidebarProvider, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       AppSidebar,
       {
         user,
         adapter,
-        data: isApiMode ? void 0 : data,
+        data,
         organizationId,
-        apiBaseUrl: navigationApiBaseUrl
+        apiBaseUrl
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(SidebarInset, { children: [
-      showHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-16 shrink-0 items-center gap-2 border-b px-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, {}),
-        headerContent && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-border" }),
-          headerContent
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, {}),
       /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex flex-1 flex-col gap-4 p-4 md:p-6", children })
     ] })
   ] });