@logickernel/frame 0.5.0 → 0.6.0

package/dist/index.d.mts

@@ -83,6 +83,43 @@ interface FrameworkAdapter {
         redirect?: boolean;
     }) => Promise<void>;
 }
+/**
+ * Props for AppSidebar component
+ */
+interface AppSidebarProps$1 {
+    user: User;
+    /** Optional adapter - if not provided, Next.js defaults will be used */
+    adapter?: FrameworkAdapter;
+    /** Sidebar data containing organizations and navigation items (props mode) */
+    data?: SidebarData;
+    /** Current organization ID (optional, can be extracted from pathname) */
+    organizationId?: string;
+    /** Custom API base URL (API mode only, defaults to "/api") */
+    apiBaseUrl?: string;
+}
+/**
+ * Props for AppLayout component
+ */
+interface AppLayoutProps {
+    /** User data for sidebar */
+    user: User;
+    /** Optional adapter - if not provided, Next.js defaults will be used */
+    adapter?: FrameworkAdapter;
+    /** Sidebar data containing organizations and navigation items (props mode) */
+    data?: SidebarData;
+    /** Current organization ID (optional, can be extracted from pathname) */
+    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;
+}
 
 type SidebarContext = {
     state: "expanded" | "collapsed";
@@ -125,6 +162,25 @@ interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar> {
 }
 declare function AppSidebar({ user, adapter: externalAdapter, data, organizationId, apiBaseUrl, ...props }: AppSidebarProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * High-level layout component that handles the entire sidebar + content layout structure.
+ *
+ * This component wraps AppSidebar and SidebarInset in SidebarProvider and provides
+ * a default header with sidebar trigger. It handles all layout concerns internally.
+ *
+ * @example
+ * ```tsx
+ * <AppLayout
+ *   user={user}
+ *   useApiNavigation={true}
+ *   headerContent={<Breadcrumb>...</Breadcrumb>}
+ * >
+ *   {children}
+ * </AppLayout>
+ * ```
+ */
+declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, useApiNavigation, headerContent, showHeader, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+
 interface NavMainProps {
     items: NavigationItem[];
     adapter: FrameworkAdapter;
@@ -189,4 +245,4 @@ declare function getIconComponent(icon?: string | LucideIcon): LucideIcon | unde
  */
 declare function createNextJSAdapter(): FrameworkAdapter;
 
-export { AppSidebar, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, type SidebarData, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
+export { AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps$1 as AppSidebarProps, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, type SidebarData, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };

package/dist/index.d.ts

@@ -83,6 +83,43 @@ interface FrameworkAdapter {
         redirect?: boolean;
     }) => Promise<void>;
 }
+/**
+ * Props for AppSidebar component
+ */
+interface AppSidebarProps$1 {
+    user: User;
+    /** Optional adapter - if not provided, Next.js defaults will be used */
+    adapter?: FrameworkAdapter;
+    /** Sidebar data containing organizations and navigation items (props mode) */
+    data?: SidebarData;
+    /** Current organization ID (optional, can be extracted from pathname) */
+    organizationId?: string;
+    /** Custom API base URL (API mode only, defaults to "/api") */
+    apiBaseUrl?: string;
+}
+/**
+ * Props for AppLayout component
+ */
+interface AppLayoutProps {
+    /** User data for sidebar */
+    user: User;
+    /** Optional adapter - if not provided, Next.js defaults will be used */
+    adapter?: FrameworkAdapter;
+    /** Sidebar data containing organizations and navigation items (props mode) */
+    data?: SidebarData;
+    /** Current organization ID (optional, can be extracted from pathname) */
+    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;
+}
 
 type SidebarContext = {
     state: "expanded" | "collapsed";
@@ -125,6 +162,25 @@ interface AppSidebarProps extends React$1.ComponentProps<typeof Sidebar> {
 }
 declare function AppSidebar({ user, adapter: externalAdapter, data, organizationId, apiBaseUrl, ...props }: AppSidebarProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * High-level layout component that handles the entire sidebar + content layout structure.
+ *
+ * This component wraps AppSidebar and SidebarInset in SidebarProvider and provides
+ * a default header with sidebar trigger. It handles all layout concerns internally.
+ *
+ * @example
+ * ```tsx
+ * <AppLayout
+ *   user={user}
+ *   useApiNavigation={true}
+ *   headerContent={<Breadcrumb>...</Breadcrumb>}
+ * >
+ *   {children}
+ * </AppLayout>
+ * ```
+ */
+declare function AppLayout({ user, adapter, data, organizationId, apiBaseUrl, useApiNavigation, headerContent, showHeader, children, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+
 interface NavMainProps {
     items: NavigationItem[];
     adapter: FrameworkAdapter;
@@ -189,4 +245,4 @@ declare function getIconComponent(icon?: string | LucideIcon): LucideIcon | unde
  */
 declare function createNextJSAdapter(): FrameworkAdapter;
 
-export { AppSidebar, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, type SidebarData, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };
+export { AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps$1 as AppSidebarProps, type FrameworkAdapter, type LinkProps, NavMain, NavUser, type NavigationConfig, type NavigationItem, type Organization, type Router, type SidebarData, SidebarInset, SidebarProvider, SidebarTrigger, TeamSwitcher, type User, createNextJSAdapter, getIconComponent, useNavigation, useSidebar };

package/dist/index.js

@@ -71,6 +71,7 @@ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_TRANSITION_DURATION = "200ms";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
 var SidebarContext = React2__namespace.createContext(null);
 function useSidebar() {
@@ -149,6 +150,7 @@ var SidebarProvider = React2__namespace.forwardRef(
         style: {
           "--sidebar-width": SIDEBAR_WIDTH,
           "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+          "--sidebar-transition-duration": SIDEBAR_TRANSITION_DURATION,
           ...style
         },
         className: cn(
@@ -312,16 +314,29 @@ var SidebarRail = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+var SidebarInset = React2__namespace.forwardRef(({ className, style, ...props }, ref) => {
+  const { state, isMobile } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
       ref,
       className: cn(
         "relative flex min-h-svh flex-1 flex-col bg-background",
+        // Auto-adjust margin based on sidebar state using CSS variables
+        // Transition duration uses CSS variable for consistency
+        "transition-[margin-left] 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)]",
+        // 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
+      },
       ...props
     }
   );
@@ -1244,6 +1259,42 @@ function AppSidebar({
     /* @__PURE__ */ jsxRuntime.jsx(SidebarRail, {})
   ] });
 }
+function AppLayout({
+  user,
+  adapter,
+  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,
+        organizationId,
+        apiBaseUrl: navigationApiBaseUrl
+      }
+    ),
+    /* @__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("main", { className: "flex flex-1 flex-col gap-4 p-4 md:p-6", children })
+    ] })
+  ] });
+}
 function createNextJSAdapter() {
   const NextJSLink2 = ({ href, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, className, children });
   return {
@@ -1260,6 +1311,7 @@ function createNextJSAdapter() {
   };
 }
 
+exports.AppLayout = AppLayout;
 exports.AppSidebar = AppSidebar;
 exports.NavMain = NavMain;
 exports.NavUser = NavUser;