zudoku 0.34.4 → 0.35.0

package/lib/zudoku.plugin-api-catalog.js

@@ -5,7 +5,7 @@ import { j as d } from "./joinUrl-10po2Jdj.js";
 import { u as j, b as y } from "./hook-CfCFKZ-2.js";
 import { H as v } from "./index.esm-CltAN0Tf.js";
 import { Link as N } from "./zudoku.components.js";
-import { H as S, M as w } from "./Markdown-DZXjQjpH.js";
+import { H as S, M as w } from "./Markdown-D1Y3cd9l.js";
 const H = ({
   items: s,
   filterCatalogItems: l = (n) => n,

package/lib/zudoku.plugin-api-keys.js

@@ -1,6 +1,6 @@
 import { j as e } from "./jsx-runtime-CYK1ROHF.js";
 import { RotateCwIcon as j, TrashIcon as v, EyeOffIcon as w, EyeIcon as K, CheckIcon as b, CopyIcon as k, FileKey2Icon as N } from "lucide-react";
-import { D as I, S as x, R as S } from "./SlotletProvider-TydSHROc.js";
+import { D as I, S as x, R as S } from "./SlotletProvider-iDmNlxD5.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
 import { u as h } from "./useQuery-CQUwWR9i.js";
 import { u as d, S as A, a as C, b as E, c as P, d as D, e as p } from "./Select-FAYHOYTy.js";

package/lib/zudoku.plugin-custom-pages.js

@@ -1,6 +1,6 @@
 import { j as o } from "./jsx-runtime-CYK1ROHF.js";
 import a from "react";
-import { P as n } from "./Markdown-DZXjQjpH.js";
+import { P as n } from "./Markdown-D1Y3cd9l.js";
 import { c } from "./cn-qaFjX9_3.js";
 import { u as p } from "./useExposedProps-BslIn-FE.js";
 const u = ({

package/lib/zudoku.plugin-markdown.js

@@ -53,7 +53,7 @@ const P = (e) => ({
         const u = {
           path: r,
           lazy: async () => {
-            const { MdxPage: p } = await import("./MdxPage-52vRwa_7.js"), { default: f, ...l } = await i();
+            const { MdxPage: p } = await import("./MdxPage-CUL_SQzW.js"), { default: f, ...l } = await i();
             return {
               element: /* @__PURE__ */ d.jsx(
                 p,

package/lib/zudoku.plugin-openapi.js

@@ -5,7 +5,7 @@ import "./chunk-HA7DTUK3-ZGg2W6yV.js";
 import "./hook-CfCFKZ-2.js";
 import "./ui/Button.js";
 import "./joinUrl-10po2Jdj.js";
-import { U as n, o as s } from "./index-BO-sA1cw.js";
+import { U as n, o as s } from "./index-PKytqmuw.js";
 export {
   n as UNTAGGED_PATH,
   s as openApiPlugin

package/lib/zudoku.plugin-search-pagefind.js

@@ -3,7 +3,7 @@ import { C as x } from "./ClientOnly-E7hGysn1.js";
 import { VisuallyHidden as y } from "@radix-ui/react-visually-hidden";
 import { d as f, k as j } from "./useQuery-CQUwWR9i.js";
 import { useCallback as S, useState as b } from "react";
-import { C as k, a as u, b as h, c as C, d as N, e as v, f as w } from "./Callout-B_sEhkYd.js";
+import { C as k, a as u, b as h, c as C, d as N, e as v, f as w } from "./Callout-B2vsR09t.js";
 import { b as _ } from "./Dialog-sbgekbjb.js";
 import { j as L } from "./joinUrl-10po2Jdj.js";
 import { FileTextIcon as F } from "lucide-react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.34.4",
+  "version": "0.35.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -54,6 +54,10 @@
       "import": "./lib/zudoku.auth-openid.js",
       "types": "./dist/lib/authentication/providers/openid.d.ts"
     },
+    "./auth/supabase": {
+      "import": "./lib/zudoku.auth-supabase.js",
+      "types": "./dist/lib/authentication/providers/supabase.d.ts"
+    },
     "./plugins": {
       "import": "./lib/zudoku.plugins.js",
       "types": "./dist/lib/core/plugins.d.ts"
@@ -126,7 +130,7 @@
     "@apidevtools/json-schema-ref-parser": "11.9.1",
     "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hookform/resolvers": "4.1.0",
+    "@hookform/resolvers": "4.1.3",
     "@lekoarts/rehype-meta-as-attributes": "3.0.2",
     "@mdx-js/react": "3.1.0",
     "@mdx-js/rollup": "3.1.0",
@@ -179,7 +183,7 @@
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.12.0",
     "gray-matter": "4.0.3",
-    "hast-util-to-jsx-runtime": "^2.3.2",
+    "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "3.0.1",
     "html-url-attributes": "^3.0.1",
     "http-terminator": "3.2.0",
@@ -197,7 +201,7 @@
     "postcss": "8.5.3",
     "posthog-node": "4.8.1",
     "prism-react-renderer": "2.4.1",
-    "prismjs": "1.29.0",
+    "prismjs": "1.30.0",
     "react-error-boundary": "5.0.0",
     "react-hook-form": "7.54.2",
     "react-is": "19.0.0",
@@ -213,7 +217,7 @@
     "remark-mdx-frontmatter": "5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "rollup": "4.34.8",
+    "rollup": "4.35.0",
     "semver": "7.7.1",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
@@ -266,7 +270,8 @@
   },
   "optionalDependencies": {
     "@clerk/clerk-js": "^5.52.3",
-    "@sentry/react": "^9.1.0"
+    "@sentry/react": "^9.1.0",
+    "@supabase/supabase-js": "^2.49.1"
   },
   "scripts": {
     "build": "tsc --project tsconfig.app.json",

package/src/app/main.css

@@ -82,10 +82,11 @@
     --top-nav-height: 50px;
     --banner-height: 40px;
     --header-height: calc(
-      var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
+      var(--top-header-height) + var(--top-nav-height) + var(--banner-height) -
+        /* borders */ 2px
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.80");
+    --side-nav-width: theme("spacing.72");
     --padding-content-top: theme("spacing.6");
     --padding-content-bottom: theme("spacing.12");
     --padding-nav-item: theme("spacing[2.5]");
@@ -108,8 +109,9 @@
   }
 
   #root {
-    @apply min-h-screen w-full;
+    @apply min-h-screen w-full grid grid-rows-[auto_1fr];
   }
+
   * {
     @apply border-border;
   }

package/src/lib/authentication/providers/clerk.tsx

@@ -1,6 +1,6 @@
 import type { Clerk } from "@clerk/clerk-js";
-import { ClerkAuthenticationConfig } from "../../../config/config.js";
-import { AuthenticationProviderInitializer } from "../authentication.js";
+import { type ClerkAuthenticationConfig } from "../../../config/config.js";
+import { type AuthenticationProviderInitializer } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { useAuthState } from "../state.js";
 

package/src/lib/authentication/providers/supabase.tsx

@@ -0,0 +1,151 @@
+import {
+  createClient,
+  type Provider,
+  type Session,
+  type SupabaseClient,
+} from "@supabase/supabase-js";
+import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
+import {
+  type AuthenticationProvider,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { AuthorizationError } from "../errors.js";
+import { useAuthState, type UserProfile } from "../state.js";
+
+class SupabaseAuthPlugin extends AuthenticationPlugin {}
+
+class SupabaseAuthenticationProvider implements AuthenticationProvider {
+  private readonly client: SupabaseClient;
+  private readonly provider: Provider;
+  private readonly redirectToAfterSignUp: string;
+  private readonly redirectToAfterSignIn: string;
+  private readonly redirectToAfterSignOut: string;
+
+  constructor({
+    supabaseUrl,
+    supabaseKey,
+    provider,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut,
+    basePath,
+  }: SupabaseAuthenticationConfig) {
+    this.provider = provider;
+    this.client = createClient(supabaseUrl, supabaseKey, {
+      auth: {
+        autoRefreshToken: true,
+        persistSession: true,
+      },
+    });
+
+    const root = basePath ?? "/";
+
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+
+    this.client.auth.onAuthStateChange(async (event, session) => {
+      if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
+        await this.updateUserState(session);
+      } else if (event === "SIGNED_OUT") {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: undefined,
+          providerData: undefined,
+        });
+      }
+    });
+  }
+
+  private async updateUserState(session: Session) {
+    const { user } = session;
+
+    const profile: UserProfile = {
+      sub: user.id,
+      email: user.email,
+      name: user.user_metadata.full_name || user.user_metadata.name,
+      emailVerified: user.email_confirmed_at != null,
+      pictureUrl: user.user_metadata.avatar_url,
+    };
+
+    useAuthState.setState({
+      isAuthenticated: true,
+      isPending: false,
+      profile,
+      providerData: { session },
+    });
+  }
+
+  async getAccessToken(): Promise<string> {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (error || !data.session) {
+      throw new AuthorizationError("User is not authenticated");
+    }
+
+    return data.session.access_token;
+  }
+
+  signUp = async ({ redirectTo }: { redirectTo?: string }) => {
+    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignUp;
+
+    // Open Supabase Auth UI in a new window
+    await this.client.auth.signInWithOAuth({
+      provider: this.provider,
+      options: {
+        redirectTo: window.location.origin + finalRedirectTo,
+      },
+    });
+  };
+
+  signIn = async ({ redirectTo }: { redirectTo?: string }) => {
+    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignIn;
+
+    await this.client.auth.signInWithOAuth({
+      provider: this.provider,
+      options: {
+        redirectTo: window.location.origin + finalRedirectTo,
+        queryParams: {
+          access_type: "offline",
+          prompt: "consent",
+        },
+      },
+    });
+  };
+
+  signOut = async () => {
+    await new Promise<void>((resolve) => {
+      const { data } = this.client.auth.onAuthStateChange(async (event) => {
+        if (event !== "SIGNED_OUT") return;
+        data.subscription.unsubscribe();
+        resolve();
+      });
+      void this.client.auth.signOut();
+    });
+
+    useAuthState.setState({
+      isAuthenticated: false,
+      isPending: false,
+      profile: undefined,
+      providerData: undefined,
+    });
+  };
+
+  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
+
+  onPageLoad = async () => {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (!error && data.session) {
+      await this.updateUserState(data.session);
+    }
+  };
+}
+
+const supabaseAuth: AuthenticationProviderInitializer<
+  SupabaseAuthenticationConfig
+> = (options) => new SupabaseAuthenticationProvider(options);
+
+export default supabaseAuth;

package/src/lib/components/Header.tsx

@@ -3,7 +3,10 @@ import { Link } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
-import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
+import {
+  isProfileMenuPlugin,
+  type ProfileNavigationItem,
+} from "../core/plugins.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -66,7 +69,7 @@ export const Header = memo(function HeaderInner() {
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
       <div className="border-b">
-        <div className="max-w-screen-2xl 2xl:border-x mx-auto grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center px-4 lg:px-8 h-[--top-header-height]">
+        <div className="max-w-screen-2xl 2xl:border-x mx-auto flex relative items-center justify-between px-4 lg:px-8 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -108,11 +111,12 @@ export const Header = memo(function HeaderInner() {
               </div>
             </Link>
           </div>
-          <div className="grid grid-cols-1 lg:grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full justify-center hidden lg:flex">
-              <Search />
-            </div>
 
+          <div className="absolute inset-x-0 justify-center items-center hidden lg:flex w-full pointer-events-none">
+            <Search className="pointer-events-auto" />
+          </div>
+
+          <div className="flex items-center gap-8">
             <MobileTopNavigation />
             <div className="hidden lg:flex items-center justify-self-end text-sm gap-2">
               <Slotlet name="head-navigation-start" />

package/src/lib/components/InlineCode.tsx

@@ -20,7 +20,7 @@ export const InlineCode = ({
       selection?.addRange(range);
     }}
     className={cn(
-      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
+      "font-mono border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 [overflow-wrap:anywhere]",
       className,
     )}
   >

package/src/lib/components/Layout.tsx

@@ -1,21 +1,18 @@
 import { Helmet } from "@zudoku/react-helmet-async";
-import { PanelLeftIcon } from "lucide-react";
-import { Suspense, useEffect, useRef, useState, type ReactNode } from "react";
+import { Suspense, useEffect, useRef, type ReactNode } from "react";
 import { Outlet, useLocation, useNavigation } from "react-router";
 import { useSpinDelay } from "spin-delay";
-import { Drawer, DrawerTrigger } from "../ui/Drawer.js";
-import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
 import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { Header } from "./Header.js";
-import { Sidebar } from "./navigation/Sidebar.js";
+import { Main } from "./Main.js";
 import { Slotlet } from "./SlotletProvider.js";
 import { Spinner } from "./Spinner.js";
 
 const LoadingFallback = () => (
-  <main className="grid h-[calc(100vh-var(--header-height))] place-items-center">
+  <main className="col-span-full grid place-items-center">
     <Spinner />
   </main>
 );
@@ -49,7 +46,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
     delay: 300,
     minDuration: 500,
   });
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
 
   return (
     <>
@@ -66,43 +62,12 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="w-full min-h-[calc(100vh-var(--header-height))] max-w-screen-2xl mx-auto px-4 lg:px-8 2xl:border-x">
+      <div className="grid lg:grid-cols-[var(--side-nav-width)_1fr] max-w-screen-2xl w-full lg:mx-auto px-4 lg:px-8 2xl:border-x">
         {showSpinner ? (
           <LoadingFallback />
         ) : (
           <Suspense fallback={<LoadingFallback />}>
-            <Drawer
-              direction="left"
-              open={isDrawerOpen}
-              onOpenChange={(open) => setDrawerOpen(open)}
-            >
-              <Sidebar onRequestClose={() => setDrawerOpen(false)} />
-              <div
-                className={cn(
-                  "lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b",
-                  "peer-data-[navigation=false]:hidden",
-                )}
-              >
-                <DrawerTrigger className="flex items-center gap-2">
-                  <PanelLeftIcon size={16} strokeWidth={1.5} />
-                  <span className="text-sm">Menu</span>
-                </DrawerTrigger>
-              </div>
-              <main
-                data-pagefind-body
-                className={cn(
-                  "h-full dark:border-white/10 translate-x-0",
-                  "lg:overflow-visible",
-                  // This works in tandem with the `SidebarWrapper` component
-                  "lg:peer-data-[navigation=true]:w-[calc(100%-var(--side-nav-width))]",
-                  "lg:peer-data-[navigation=true]:translate-x-[--side-nav-width] lg:peer-data-[navigation=true]:pl-12",
-                )}
-              >
-                <Slotlet name="zudoku-before-content" />
-                {children ?? <Outlet />}
-                <Slotlet name="zudoku-after-content" />
-              </main>
-            </Drawer>
+            <Main>{children ?? <Outlet />}</Main>
           </Suspense>
         )}
       </div>

package/src/lib/components/Main.tsx

@@ -0,0 +1,47 @@
+import { PanelLeftIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
+import { Drawer, DrawerTrigger } from "zudoku/ui/Drawer.js";
+import { cn } from "../util/cn.js";
+import { useCurrentNavigation } from "./context/ZudokuContext.js";
+import { Sidebar } from "./navigation/Sidebar.js";
+import { Slotlet } from "./SlotletProvider.js";
+
+export const Main = ({ children }: PropsWithChildren) => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const { sidebar } = useCurrentNavigation();
+  const hasSidebar = sidebar.length > 0;
+
+  return (
+    <Drawer
+      direction="left"
+      open={isDrawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
+      {hasSidebar && (
+        <Sidebar
+          onRequestClose={() => setDrawerOpen(false)}
+          sidebar={sidebar}
+        />
+      )}
+      {hasSidebar && (
+        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur z-10 top-0 left-0 right-0 border-b">
+          <DrawerTrigger className="flex items-center gap-2">
+            <PanelLeftIcon size={16} strokeWidth={1.5} />
+            <span className="text-sm">Menu</span>
+          </DrawerTrigger>
+        </div>
+      )}
+      <main
+        data-pagefind-body
+        className={cn(
+          "h-auto dark:border-white/10 translate-x-0",
+          hasSidebar ? "lg:pl-12" : "col-span-full",
+        )}
+      >
+        <Slotlet name="zudoku-before-content" />
+        {children}
+        <Slotlet name="zudoku-after-content" />
+      </main>
+    </Drawer>
+  );
+};

package/src/lib/components/context/ViewportAnchorContext.tsx

@@ -1,5 +1,4 @@
 import {
-  type ReactNode,
   createContext,
   useCallback,
   useContext,
@@ -7,6 +6,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type PropsWithChildren,
 } from "react";
 
 type AnchorContextType = {
@@ -55,11 +55,7 @@ export const useRegisterAnchorElement = () => {
   return { ref: setRef };
 };
 
-export const ViewportAnchorProvider = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
+export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
   const [activeAnchor, setActiveAnchor] = useState("");
   const observerRef = useRef<IntersectionObserver | null>(null);
   const registeredElements = useRef(new Set<HTMLElement>());
@@ -75,9 +71,7 @@ export const ViewportAnchorProvider = ({
         }
       },
       {
-        // 115px is the height of the sticky header
-        // see --header-height in `main.css`
-        rootMargin: "115px 0px -80% 0px",
+        rootMargin: "0px 0px -80% 0px",
         threshold: 0.75,
       },
     );

package/src/lib/components/navigation/Sidebar.tsx

@@ -1,20 +1,21 @@
 import { useEffect, useRef } from "react";
 
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
 import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
-import { useCurrentNavigation } from "../context/ZudokuContext.js";
 import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
 export const Sidebar = ({
   onRequestClose,
+  sidebar,
 }: {
   onRequestClose?: () => void;
+  sidebar: SidebarItemType[];
 }) => {
-  const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useCurrentNavigation();
+  const navRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const active = navRef.current?.querySelector('[aria-current="page"]');
@@ -23,12 +24,9 @@ export const Sidebar = ({
 
   return (
     <>
-      <SidebarWrapper
-        ref={navRef}
-        pushMainContent={navigation.sidebar.length > 0}
-      >
+      <SidebarWrapper ref={navRef}>
         <Slotlet name="zudoku-before-navigation" />
-        {navigation.sidebar.map((item) => (
+        {sidebar.map((item) => (
           <SidebarItem key={item.label} item={item} />
         ))}
         <Slotlet name="zudoku-after-navigation" />
@@ -41,7 +39,7 @@ export const Sidebar = ({
           <VisuallyHidden>
             <DrawerTitle>Sidebar</DrawerTitle>
           </VisuallyHidden>
-          {navigation.sidebar.map((item) => (
+          {sidebar.map((item) => (
             <SidebarItem
               key={item.label}
               item={item}

package/src/lib/components/navigation/SidebarWrapper.tsx

@@ -1,27 +1,25 @@
-import { forwardRef, type PropsWithChildren } from "react";
+import { type PropsWithChildren, type Ref } from "react";
 import { cn } from "../../util/cn.js";
 
-export const SidebarWrapper = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(({ children, className, pushMainContent }, ref) => (
+export const SidebarWrapper = ({
+  children,
+  className,
+  ref,
+}: PropsWithChildren<{
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}>) => (
   <nav
-    // this data attribute is used in `Layout.tsx` to determine if side navigation
-    // is present for the current page so the main content is pushed to the right
-    // it's also important to set `peer` class here.
-    // maybe this could be simplified by adjusting the layout
-    data-navigation={String(pushMainContent)}
     className={cn(
-      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-6",
-      "-mx-[--padding-nav-item] pb-20 pt-[--padding-content-top]",
-      "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
-      !pushMainContent && "border-r-0",
+      "hidden lg:flex h-full scrollbar peer flex-col overflow-y-auto shrink-0 text-sm border-r pr-6",
+      "sticky top-[--header-height] h-[calc(100vh-var(--header-height))]",
+      "-mx-[--padding-nav-item] max-w-[--side-nav-width] pb-20 pt-[--padding-content-top] scroll-pt-2 gap-2",
       className,
     )}
     ref={ref}
   >
     {children}
   </nav>
-));
+);
 
 SidebarWrapper.displayName = "SidebarWrapper";

package/src/lib/core/RouteGuard.tsx

@@ -18,8 +18,9 @@ export const RouteGuard = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const latestPath = useLatest(location.pathname);
+  const { protectedRoutes = [] } = zudoku.options;
 
-  const isProtected = zudoku.options.protectedRoutes?.some((path) =>
+  const isProtected = protectedRoutes.some((path) =>
     matchPath({ path, end: true }, location.pathname),
   );