@logickernel/frame 0.7.0 → 0.8.2

package/dist/index.js

@@ -1,11 +1,8 @@
 'use strict';
 
-var React2 = require('react');
-var Link = require('next/link');
-var navigation = require('next/navigation');
-var react = require('next-auth/react');
 var LucideIcons = require('lucide-react');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var React2 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -14,6 +11,9 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var Link = require('next/link');
+var navigation = require('next/navigation');
+var react = require('next-auth/react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -35,15 +35,15 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
-var Link__default = /*#__PURE__*/_interopDefault(Link);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var Link__default = /*#__PURE__*/_interopDefault(Link);
 
-// src/components/AppSidebar.tsx
+// src/components/NavMain.tsx
 var Collapsible = CollapsiblePrimitive__namespace.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive__namespace.CollapsibleContent;
@@ -82,7 +82,10 @@ function useSidebar() {
   return context;
 }
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React2__namespace.useState(false);
+  const [isMobile, setIsMobile] = React2__namespace.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(max-width: 768px)").matches;
+  });
   React2__namespace.useEffect(() => {
     const mql = window.matchMedia("(max-width: 768px)");
     const onChange = () => setIsMobile(mql.matches);
@@ -104,7 +107,19 @@ var SidebarProvider = React2__namespace.forwardRef(
   }, ref) => {
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = React2__namespace.useState(false);
-    const [_open, _setOpen] = React2__namespace.useState(defaultOpen);
+    const getInitialState = React2__namespace.useCallback(() => {
+      if (typeof document === "undefined") return defaultOpen;
+      const cookies = document.cookie.split(";");
+      const sidebarCookie = cookies.find(
+        (cookie) => cookie.trim().startsWith(`${SIDEBAR_COOKIE_NAME}=`)
+      );
+      if (sidebarCookie) {
+        const value = sidebarCookie.split("=")[1];
+        return value === "true";
+      }
+      return defaultOpen;
+    }, [defaultOpen]);
+    const [_open, _setOpen] = React2__namespace.useState(getInitialState);
     const open = openProp ?? _open;
     const setOpen = React2__namespace.useCallback(
       (value) => {
@@ -119,7 +134,11 @@ var SidebarProvider = React2__namespace.forwardRef(
       [setOpenProp, open]
     );
     const toggleSidebar = React2__namespace.useCallback(() => {
-      return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+      if (isMobile) {
+        setOpenMobile((open2) => !open2);
+      } else {
+        setOpen((open2) => !open2);
+      }
     }, [isMobile, setOpen, setOpenMobile]);
     React2__namespace.useEffect(() => {
       const handleKeyDown = (event) => {
@@ -131,6 +150,15 @@ var SidebarProvider = React2__namespace.forwardRef(
       window.addEventListener("keydown", handleKeyDown);
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
+    React2__namespace.useEffect(() => {
+      if (isMobile && openMobile) {
+        const originalStyle = window.getComputedStyle(document.body).overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+          document.body.style.overflow = originalStyle;
+        };
+      }
+    }, [isMobile, openMobile]);
     const state = open ? "expanded" : "collapsed";
     const contextValue = React2__namespace.useMemo(
       () => ({
@@ -154,7 +182,7 @@ var SidebarProvider = React2__namespace.forwardRef(
           ...style
         },
         className: cn(
-          "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+          "group/sidebar-wrapper flex min-h-svh w-full bg-background has-[[data-variant=inset]]:bg-sidebar",
           className
         ),
         ref,
@@ -190,35 +218,44 @@ var Sidebar = React2__namespace.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "fixed inset-0 z-50 bg-black/80",
-            openMobile ? "block" : "hidden"
-          ),
-          onClick: () => setOpenMobile(false),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-sidebar": "sidebar",
-              "data-mobile": "true",
-              className: cn(
-                "fixed inset-y-0 z-50 flex h-svh w-[--sidebar-width] flex-col bg-sidebar p-2 text-sidebar-foreground",
-                side === "left" ? "left-0 border-r" : "right-0 border-l",
-                className
-              ),
-              style: {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE
-              },
-              onClick: (e) => e.stopPropagation(),
-              ref,
-              ...props,
-              children
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: () => setOpenMobile(false),
+            "aria-hidden": "true",
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 40,
+              backgroundColor: "rgba(0, 0, 0, 0.8)",
+              opacity: openMobile ? 1 : 0,
+              transition: "opacity 200ms",
+              pointerEvents: openMobile ? "auto" : "none"
             }
-          )
-        }
-      );
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-sidebar": "sidebar",
+            "data-mobile": "true",
+            className: cn(
+              "fixed inset-y-0 z-50 flex h-svh w-[--sidebar-width] flex-col bg-sidebar p-2 text-sidebar-foreground transition-transform duration-200 ease-in-out",
+              side === "left" ? "left-0 border-r" : "right-0 border-l",
+              openMobile ? "translate-x-0" : side === "left" ? "-translate-x-full" : "translate-x-full",
+              className
+            ),
+            style: {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+            },
+            onClick: (e) => e.stopPropagation(),
+            ref,
+            ...props,
+            children
+          }
+        )
+      ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -315,23 +352,24 @@ var SidebarRail = React2__namespace.forwardRef(({ className, ...props }, ref) =>
 });
 SidebarRail.displayName = "SidebarRail";
 var SidebarInset = React2__namespace.forwardRef(({ className, style, ...props }, ref) => {
-  const { state, isMobile } = useSidebar();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "main",
+    "div",
     {
       ref,
       className: cn(
         "relative flex min-h-svh flex-1 flex-col bg-background",
-        // Auto-adjust margin based on sidebar state
-        // Transition duration uses CSS variable for consistency
         "transition-[margin-left] duration-200 ease-linear",
+        // Use peer selectors to respond to sidebar state
         // On mobile, no margin needed (sidebar is overlay)
-        // 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
+        // For default "sidebar" variant, the spacer div already creates space, so no margin needed
+        // Only add margin for floating/inset variants that don't have a spacer
+        "md:peer-data-[variant=floating]:ml-[--sidebar-width]",
+        "md:peer-data-[variant=floating]:peer-data-[collapsible=offcanvas]:ml-0",
+        "md:peer-data-[variant=floating]:peer-data-[collapsible=icon]:ml-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
+        "md:peer-data-[variant=inset]:ml-[--sidebar-width]",
+        "md:peer-data-[variant=inset]:peer-data-[collapsible=offcanvas]:ml-0",
+        "md:peer-data-[variant=inset]:peer-data-[collapsible=icon]:ml-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]",
+        // Inset variant specific styles
         "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
       ),
@@ -689,7 +727,7 @@ function getIconComponent(icon) {
 }
 function NavMain({ items, adapter }) {
   const pathname = adapter.usePathname();
-  const Link3 = adapter.Link;
+  const Link2 = adapter.Link;
   const groups = [];
   let currentGroup = {
     items: []
@@ -745,7 +783,7 @@ function NavMain({ items, adapter }) {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3, { href: subItem.url, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: subItem.title }) }) }) }, subItem.title)) }) })
+              /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuSub, { children: item.items?.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuSubButton, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subItem.url, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: subItem.title }) }) }) }, subItem.title)) }) })
             ] })
           },
           item.title
@@ -757,7 +795,7 @@ function NavMain({ items, adapter }) {
           asChild: true,
           tooltip: item.title,
           isActive,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Link3, { href: item.url, children: [
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Link2, { href: item.url, children: [
             item.icon && /* @__PURE__ */ jsxRuntime.jsx(item.icon, {}),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.title })
           ] })
@@ -1193,28 +1231,24 @@ function useNavigation({
   }, [organizationId, apiBaseUrl, enabled]);
   return { items, organizations, loading, error };
 }
-var NextJSLink = ({ href, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, className, children });
 function AppSidebar({
   user,
-  adapter: externalAdapter,
+  adapter,
   data,
   organizationId,
   apiBaseUrl,
   ...props
 }) {
-  const pathname = navigation.usePathname();
-  const nextRouter = navigation.useRouter();
-  const router = React2__namespace.useMemo(() => ({
-    push: (path) => nextRouter.push(path),
-    refresh: () => nextRouter.refresh()
-  }), [nextRouter]);
-  const internalAdapter = React2__namespace.useMemo(() => ({
-    usePathname: () => pathname,
-    useRouter: () => router,
-    Link: NextJSLink,
-    signOut: react.signOut
-  }), [pathname, router]);
-  const adapter = externalAdapter ?? internalAdapter;
+  if (!adapter) {
+    throw new Error(
+      "AppSidebar: adapter is required. Please provide a framework adapter. For Next.js, use: const adapter = useNextJSAdapter()"
+    );
+  }
+  if (typeof adapter.usePathname !== "function") {
+    throw new Error(
+      "AppSidebar: Invalid adapter provided. The adapter must have a usePathname function. Make sure you're using the correct adapter for your framework."
+    );
+  }
   const currentPathname = adapter.usePathname();
   const isPropsMode = data !== void 0;
   const pathSegments = currentPathname.split("/");
@@ -1264,50 +1298,61 @@ 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("main", { className: "flex flex-1 flex-col gap-4 p-4 md:p-6", children })
+      /* @__PURE__ */ jsxRuntime.jsx(SidebarTrigger, {}),
+      children
     ] })
   ] });
 }
-function createNextJSAdapter() {
-  const NextJSLink2 = ({ href, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, className, children });
-  return {
-    usePathname: navigation.usePathname,
-    useRouter: () => {
-      const router = navigation.useRouter();
+function useNextJSAdapter() {
+  const pathname = navigation.usePathname();
+  const nextRouter = navigation.useRouter();
+  const router = React2__namespace.useMemo(
+    () => {
+      if (!nextRouter) {
+        throw new Error(
+          "Next.js router is not available. Make sure you're using useNextJSAdapter in a Client Component ('use client') and that Next.js router is properly initialized."
+        );
+      }
       return {
-        push: (path) => router.push(path),
-        refresh: () => router.refresh()
+        push: (path) => nextRouter.push(path),
+        refresh: () => nextRouter.refresh()
       };
     },
-    Link: NextJSLink2,
-    signOut: react.signOut
-  };
+    [nextRouter]
+  );
+  const NextJSLink = React2__namespace.useMemo(
+    () => ({ href, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href, className, children }),
+    []
+  );
+  const adapter = React2__namespace.useMemo(
+    () => ({
+      usePathname: () => {
+        if (pathname === void 0 || pathname === null) {
+          return "";
+        }
+        return pathname;
+      },
+      useRouter: () => router,
+      Link: NextJSLink,
+      signOut: react.signOut
+    }),
+    [pathname, router, NextJSLink]
+  );
+  return adapter;
 }
 
 exports.AppLayout = AppLayout;
@@ -1318,9 +1363,9 @@ exports.SidebarInset = SidebarInset;
 exports.SidebarProvider = SidebarProvider;
 exports.SidebarTrigger = SidebarTrigger;
 exports.TeamSwitcher = TeamSwitcher;
-exports.createNextJSAdapter = createNextJSAdapter;
 exports.getIconComponent = getIconComponent;
 exports.useNavigation = useNavigation;
+exports.useNextJSAdapter = useNextJSAdapter;
 exports.useSidebar = useSidebar;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map