zudoku 0.35.5 → 0.36.0

package/lib/zudoku.hooks.js

@@ -1,6 +1,6 @@
 import { z as f } from "./index-DwT-v3zK.js";
 import { useState as m, useEffect as i } from "react";
-import { a } from "./hook-CfCFKZ-2.js";
+import { a } from "./hook-Bo80UX00.js";
 function d(e, t) {
   const s = a(), [n, o] = m();
   return i(() => s.addEventListener(e, (...u) => {

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

@@ -2,10 +2,10 @@ import { j as e } from "./jsx-runtime-CYK1ROHF.js";
 import { s as h } from "./index-LNp6rxyU.js";
 import { d as b, m as x } from "./chunk-HA7DTUK3-ZGg2W6yV.js";
 import { j as d } from "./joinUrl-10po2Jdj.js";
-import { u as j, b as y } from "./hook-CfCFKZ-2.js";
+import { u as j, b as y } from "./hook-Bo80UX00.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-hBN9vkm5.js";
+import { H as S, M as w } from "./Markdown-BlioIqkZ.js";
 const H = ({
   items: s,
   filterCatalogItems: l = (n) => n,

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

@@ -1,12 +1,12 @@
 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-D-XPr1Wg.js";
+import { D as I, S as x, R as S } from "./SlotletProvider-CXb3wQiR.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";
 import { a as q } from "./index.esm--gIChbWs.js";
 import { a as R, L as u, O } from "./chunk-HA7DTUK3-ZGg2W6yV.js";
-import { a as g, e as z, b as F } from "./hook-CfCFKZ-2.js";
+import { a as g, e as z, b as F } from "./hook-Bo80UX00.js";
 import { Button as l } from "./ui/Button.js";
 import { Input as T } from "./ui/Input.js";
 import { useState as y } from "react";

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-hBN9vkm5.js";
+import { P as n } from "./Markdown-BlioIqkZ.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-UCWwxhzC.js"), { default: f, ...l } = await i();
+            const { MdxPage: p } = await import("./MdxPage-7XnN9J9R.js"), { default: f, ...l } = await i();
             return {
               element: /* @__PURE__ */ d.jsx(
                 p,

package/lib/zudoku.plugin-openapi.js

@@ -1,13 +1,12 @@
 import "./jsx-runtime-CYK1ROHF.js";
-import "./index-LNp6rxyU.js";
 import "lucide-react";
 import "./chunk-HA7DTUK3-ZGg2W6yV.js";
-import "./hook-CfCFKZ-2.js";
+import "./hook-Bo80UX00.js";
 import "./ui/Button.js";
 import "./joinUrl-10po2Jdj.js";
-import { U as n, o as s } from "./index-Dowg8c_k.js";
+import { U as e, o as n } from "./index-D5m8_oyY.js";
 export {
-  n as UNTAGGED_PATH,
-  s as openApiPlugin
+  e as UNTAGGED_PATH,
+  n as openApiPlugin
 };
 //# sourceMappingURL=zudoku.plugin-openapi.js.map

package/lib/zudoku.plugin-openapi.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/lib/zudoku.plugins.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugins.js","sources":["../src/lib/core/plugins.ts"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport { type ReactElement } from \"react\";\nimport { type RouteObject } from \"react-router\";\nimport type { Sidebar } from \"../../config/validators/SidebarSchema.js\";\nimport { MdxComponentsType } from \"../util/MdxComponents.js\";\nimport {\n  ZudokuContext,\n  ZudokuEvents,\n  type ApiIdentity,\n} from \"./ZudokuContext.js\";\n\nexport type ZudokuPlugin =\n  | CommonPlugin\n  | ProfileMenuPlugin\n  | NavigationPlugin\n  | ApiIdentityPlugin\n  | SearchProviderPlugin\n  | EventConsumerPlugin;\n\nexport type { RouteObject };\n\nexport interface NavigationPlugin {\n  getRoutes: () => RouteObject[];\n  getSidebar?: (path: string) => Promise<Sidebar>;\n}\n\nexport const createApiIdentityPlugin = (\n  plugin: ApiIdentityPlugin,\n): ApiIdentityPlugin => plugin;\n\nexport const createProfileMenuPlugin = (\n  plugin: ProfileMenuPlugin,\n): ProfileMenuPlugin => plugin;\n\nexport interface ApiIdentityPlugin {\n  getIdentities: (context: ZudokuContext) => Promise<ApiIdentity[]>;\n}\n\nexport interface SearchProviderPlugin {\n  renderSearch: (o: {\n    isOpen: boolean;\n    onClose: () => void;\n  }) => React.JSX.Element | null;\n}\n\nexport interface ProfileMenuPlugin {\n  getProfileMenuItems: (context: ZudokuContext) => ProfileNavigationItem[];\n}\n\nexport type ProfileNavigationItem = {\n  label: string;\n  path?: string;\n  weight?: number;\n  category?: \"top\" | \"middle\" | \"bottom\";\n  children?: ProfileNavigationItem[];\n  icon?: LucideIcon;\n};\n\nexport interface CommonPlugin {\n  initialize?: (\n    context: ZudokuContext,\n  ) => Promise<void | boolean> | void | boolean;\n  getHead?: () => ReactElement | undefined;\n  getMdxComponents?: () => MdxComponentsType;\n}\n\nexport type EventConsumerPlugin<Event extends ZudokuEvents = ZudokuEvents> = {\n  events: { [K in keyof Event]: Event[K] };\n};\n\nexport const isEventConsumerPlugin = (\n  obj: ZudokuPlugin,\n): obj is EventConsumerPlugin =>\n  \"events\" in obj && typeof obj.events === \"object\";\n\nexport const isProfileMenuPlugin = (\n  obj: ZudokuPlugin,\n): obj is ProfileMenuPlugin =>\n  \"getProfileMenuItems\" in obj && typeof obj.getProfileMenuItems === \"function\";\n\nexport const isNavigationPlugin = (\n  obj: ZudokuPlugin,\n): obj is NavigationPlugin =>\n  \"getRoutes\" in obj && typeof obj.getRoutes === \"function\";\n\nexport const isSearchPlugin = (\n  obj: ZudokuPlugin,\n): obj is SearchProviderPlugin =>\n  \"renderSearch\" in obj && typeof obj.renderSearch === \"function\";\n\nexport const needsInitialization = (obj: ZudokuPlugin): obj is CommonPlugin =>\n  \"initialize\" in obj && typeof obj.initialize === \"function\";\n\nexport const hasHead = (obj: ZudokuPlugin): obj is CommonPlugin =>\n  \"getHead\" in obj && typeof obj.getHead === \"function\";\n\nexport const isMdxProviderPlugin = (obj: ZudokuPlugin): obj is CommonPlugin =>\n  \"getMdxComponents\" in obj && typeof obj.getMdxComponents === \"function\";\n\nexport const isApiIdentityPlugin = (\n  obj: ZudokuPlugin,\n): obj is ApiIdentityPlugin =>\n  \"getIdentities\" in obj && typeof obj.getIdentities === \"function\";\n"],"names":["createApiIdentityPlugin","plugin","createProfileMenuPlugin","isEventConsumerPlugin","obj","isProfileMenuPlugin","isNavigationPlugin","isSearchPlugin","needsInitialization","hasHead","isMdxProviderPlugin","isApiIdentityPlugin"],"mappings":"AA0Ba,MAAAA,IAA0B,CACrCC,MACsBA,GAEXC,IAA0B,CACrCD,MACsBA,GAsCXE,IAAwB,CACnCC,MAEA,YAAYA,KAAO,OAAOA,EAAI,UAAW,UAE9BC,IAAsB,CACjCD,MAEA,yBAAyBA,KAAO,OAAOA,EAAI,uBAAwB,YAExDE,IAAqB,CAChCF,MAEA,eAAeA,KAAO,OAAOA,EAAI,aAAc,YAEpCG,IAAiB,CAC5BH,MAEA,kBAAkBA,KAAO,OAAOA,EAAI,gBAAiB,YAE1CI,IAAsB,CAACJ,MAClC,gBAAgBA,KAAO,OAAOA,EAAI,cAAe,YAEtCK,IAAU,CAACL,MACtB,aAAaA,KAAO,OAAOA,EAAI,WAAY,YAEhCM,IAAsB,CAACN,MAClC,sBAAsBA,KAAO,OAAOA,EAAI,oBAAqB,YAElDO,IAAsB,CACjCP,MAEA,mBAAmBA,KAAO,OAAOA,EAAI,iBAAkB;"}
+{"version":3,"file":"zudoku.plugins.js","sources":["../src/lib/core/plugins.ts"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport { type ReactElement } from \"react\";\nimport { type RouteObject } from \"react-router\";\nimport type { Sidebar } from \"../../config/validators/SidebarSchema.js\";\nimport { type MdxComponentsType } from \"../util/MdxComponents.js\";\nimport {\n  type ApiIdentity,\n  type ZudokuContext,\n  type ZudokuEvents,\n} from \"./ZudokuContext.js\";\n\nexport type ZudokuPlugin =\n  | CommonPlugin\n  | ProfileMenuPlugin\n  | NavigationPlugin\n  | ApiIdentityPlugin\n  | SearchProviderPlugin\n  | EventConsumerPlugin;\n\nexport type { RouteObject };\n\nexport interface NavigationPlugin {\n  getRoutes: () => RouteObject[];\n  getSidebar?: (path: string, context: ZudokuContext) => Promise<Sidebar>;\n}\n\nexport const createApiIdentityPlugin = (\n  plugin: ApiIdentityPlugin,\n): ApiIdentityPlugin => plugin;\n\nexport const createProfileMenuPlugin = (\n  plugin: ProfileMenuPlugin,\n): ProfileMenuPlugin => plugin;\n\nexport interface ApiIdentityPlugin {\n  getIdentities: (context: ZudokuContext) => Promise<ApiIdentity[]>;\n}\n\nexport interface SearchProviderPlugin {\n  renderSearch: (o: {\n    isOpen: boolean;\n    onClose: () => void;\n  }) => React.JSX.Element | null;\n}\n\nexport interface ProfileMenuPlugin {\n  getProfileMenuItems: (context: ZudokuContext) => ProfileNavigationItem[];\n}\n\nexport type ProfileNavigationItem = {\n  label: string;\n  path?: string;\n  weight?: number;\n  category?: \"top\" | \"middle\" | \"bottom\";\n  children?: ProfileNavigationItem[];\n  icon?: LucideIcon;\n};\n\nexport interface CommonPlugin {\n  initialize?: (\n    context: ZudokuContext,\n  ) => Promise<void | boolean> | void | boolean;\n  getHead?: () => ReactElement | undefined;\n  getMdxComponents?: () => MdxComponentsType;\n}\n\nexport type EventConsumerPlugin<Event extends ZudokuEvents = ZudokuEvents> = {\n  events: { [K in keyof Event]: Event[K] };\n};\n\nexport const isEventConsumerPlugin = (\n  obj: ZudokuPlugin,\n): obj is EventConsumerPlugin =>\n  \"events\" in obj && typeof obj.events === \"object\";\n\nexport const isProfileMenuPlugin = (\n  obj: ZudokuPlugin,\n): obj is ProfileMenuPlugin =>\n  \"getProfileMenuItems\" in obj && typeof obj.getProfileMenuItems === \"function\";\n\nexport const isNavigationPlugin = (\n  obj: ZudokuPlugin,\n): obj is NavigationPlugin =>\n  \"getRoutes\" in obj && typeof obj.getRoutes === \"function\";\n\nexport const isSearchPlugin = (\n  obj: ZudokuPlugin,\n): obj is SearchProviderPlugin =>\n  \"renderSearch\" in obj && typeof obj.renderSearch === \"function\";\n\nexport const needsInitialization = (obj: ZudokuPlugin): obj is CommonPlugin =>\n  \"initialize\" in obj && typeof obj.initialize === \"function\";\n\nexport const hasHead = (obj: ZudokuPlugin): obj is CommonPlugin =>\n  \"getHead\" in obj && typeof obj.getHead === \"function\";\n\nexport const isMdxProviderPlugin = (obj: ZudokuPlugin): obj is CommonPlugin =>\n  \"getMdxComponents\" in obj && typeof obj.getMdxComponents === \"function\";\n\nexport const isApiIdentityPlugin = (\n  obj: ZudokuPlugin,\n): obj is ApiIdentityPlugin =>\n  \"getIdentities\" in obj && typeof obj.getIdentities === \"function\";\n"],"names":["createApiIdentityPlugin","plugin","createProfileMenuPlugin","isEventConsumerPlugin","obj","isProfileMenuPlugin","isNavigationPlugin","isSearchPlugin","needsInitialization","hasHead","isMdxProviderPlugin","isApiIdentityPlugin"],"mappings":"AA0Ba,MAAAA,IAA0B,CACrCC,MACsBA,GAEXC,IAA0B,CACrCD,MACsBA,GAsCXE,IAAwB,CACnCC,MAEA,YAAYA,KAAO,OAAOA,EAAI,UAAW,UAE9BC,IAAsB,CACjCD,MAEA,yBAAyBA,KAAO,OAAOA,EAAI,uBAAwB,YAExDE,IAAqB,CAChCF,MAEA,eAAeA,KAAO,OAAOA,EAAI,aAAc,YAEpCG,IAAiB,CAC5BH,MAEA,kBAAkBA,KAAO,OAAOA,EAAI,gBAAiB,YAE1CI,IAAsB,CAACJ,MAClC,gBAAgBA,KAAO,OAAOA,EAAI,cAAe,YAEtCK,IAAU,CAACL,MACtB,aAAaA,KAAO,OAAOA,EAAI,WAAY,YAEhCM,IAAsB,CAACN,MAClC,sBAAsBA,KAAO,OAAOA,EAAI,oBAAqB,YAElDO,IAAsB,CACjCP,MAEA,mBAAmBA,KAAO,OAAOA,EAAI,iBAAkB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.35.5",
+  "version": "0.36.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -127,7 +127,7 @@
     }
   },
   "dependencies": {
-    "@apidevtools/json-schema-ref-parser": "11.9.1",
+    "@apidevtools/json-schema-ref-parser": "11.9.3",
     "@envelop/core": "5.0.3",
     "@graphql-typed-document-node/core": "3.2.0",
     "@hookform/resolvers": "4.1.3",
@@ -157,7 +157,7 @@
     "@radix-ui/react-toggle-group": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.8",
     "@radix-ui/react-visually-hidden": "1.1.2",
-    "@scalar/openapi-parser": "0.10.6",
+    "@scalar/openapi-parser": "0.10.12",
     "@sentry/node": "9.1.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.1",
@@ -181,7 +181,7 @@
     "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.12.0",
+    "graphql-yoga": "5.13.2",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "3.0.1",
@@ -240,7 +240,7 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.5",
-    "@graphql-codegen/client-preset": "4.6.2",
+    "@graphql-codegen/client-preset": "4.7.0",
     "@testing-library/react": "16.2.0",
     "@types/estree": "1.0.6",
     "@types/express": "5.0.0",

package/src/app/entry.server.tsx

@@ -13,6 +13,7 @@ import {
 import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
+import { NO_DEHYDRATE } from "../lib/components/cache.js";
 import type { FileWritingResponse } from "../vite/prerender/FileWritingResponse.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -115,10 +116,15 @@ export const render = async ({
       );
 
       transformStream.on("finish", () => {
+        const dehydrated = dehydrate(queryClient, {
+          shouldDehydrateQuery: (query) =>
+            !query.queryKey.includes(NO_DEHYDRATE),
+        });
+
         response.end(
           htmlEnd?.replace(
             "</body>",
-            `<script>window.DATA = ${JSON.stringify(dehydrate(queryClient))}</script></body>`,
+            `<script>window.DATA=${JSON.stringify(dehydrated)}</script></body>`,
           ),
         );
       });

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

@@ -13,6 +13,7 @@ import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
+const STATE_KEY = "oauth-state";
 
 export interface OpenIdProviderData {
   accessToken: string;
@@ -201,16 +202,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
 
     /**
-     * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
-     * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
+     * The state parameter is used to prevent CSRF attacks and should be used in all authorization requests.
+     * It is independent of PKCE and should be used regardless of PKCE support.
      */
-    if (
-      authorizationServer.code_challenge_methods_supported?.includes("S256") !==
-      true
-    ) {
-      const state = oauth.generateRandomState();
-      authorizationUrl.searchParams.set("state", state);
-    }
+    const state = oauth.generateRandomState();
+    sessionStorage.setItem(STATE_KEY, state);
+    authorizationUrl.searchParams.set("state", state);
 
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
@@ -295,6 +292,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
+    const storedState = sessionStorage.getItem(STATE_KEY);
+    sessionStorage.removeItem(STATE_KEY);
+
+    if (state !== storedState) {
+      throw new AuthorizationError("Invalid state parameter");
+    }
 
     // one eternity later, the user lands back on the redirect_uri
     // Authorization Code Grant Request & Response

package/src/lib/components/AnchorLink.tsx

@@ -8,11 +8,13 @@ import { useScrollToHash } from "../util/useScrollToAnchor.js";
 export const AnchorLink = (props: NavLinkProps) => {
   const location = useLocation();
   const scrollToHash = useScrollToHash();
-  const hash = useHref(props.to).split("#")[1];
+  const href = useHref(props.to);
+  const [pathname, hash] = href.split("#");
 
   const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
     props.onClick?.(event);
-    if (hash !== location.hash.slice(1)) return;
+    if (hash !== location.hash.slice(1) || pathname !== location.pathname)
+      return;
 
     event.preventDefault();
     scrollToHash(hash);

package/src/lib/components/Layout.tsx

@@ -1,10 +1,9 @@
 import { Helmet } from "@zudoku/react-helmet-async";
-import { Suspense, useEffect, useRef, type ReactNode } from "react";
-import { Outlet, useLocation, useNavigation } from "react-router";
+import { Suspense, useEffect, type ReactNode } from "react";
+import { Outlet, useNavigation } from "react-router";
 import { useSpinDelay } from "spin-delay";
 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 { Main } from "./Main.js";
@@ -18,29 +17,17 @@ const LoadingFallback = () => (
 );
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
-  const location = useLocation();
-  const { setActiveAnchor } = useViewportAnchor();
   const { meta, authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
 
-  const previousLocationPath = useRef(location.pathname);
-
   useEffect(() => {
     // Initialize the authentication plugin
     authentication?.onPageLoad?.();
   }, [authentication]);
 
-  useEffect(() => {
-    // always reset on location change
-    if (location.pathname !== previousLocationPath.current) {
-      setActiveAnchor("");
-    }
-    previousLocationPath.current = location.pathname;
-  }, [location.pathname, setActiveAnchor]);
-
-  // Page transition is happening: https://reactrouter.com/start/framework/pending-ui#global-pending-navigation
+  // Page transition is happening: https://reactrouter.com/start/framework/pending-navigation
   const isNavigating = Boolean(useNavigation().location);
   const showSpinner = useSpinDelay(isNavigating, {
     delay: 300,

package/src/lib/components/Zudoku.tsx

@@ -1,4 +1,5 @@
 import { MDXProvider } from "@mdx-js/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ThemeProvider } from "next-themes";
 import {
@@ -59,6 +60,7 @@ const ZudokoInner = memo(
       [stagger, didNavigate],
     );
     const navigation = useNavigation();
+    const queryClient = useQueryClient();
 
     useEffect(() => {
       if (didNavigate) {
@@ -67,7 +69,9 @@ const ZudokoInner = memo(
       setDidNavigate(true);
     }, [didNavigate, navigation.location]);
 
-    const [zudokuContext] = useState(() => new ZudokuContext(props));
+    const [zudokuContext] = useState(
+      () => new ZudokuContext(props, queryClient),
+    );
 
     const heads = props.plugins
       ?.flatMap((plugin) => (hasHead(plugin) ? (plugin.getHead?.() ?? []) : []))

package/src/lib/components/cache.ts

@@ -13,3 +13,11 @@ export const useCache = () => {
     },
   };
 };
+
+/**
+ * If a query has this key in its queryKey, it will not put its result in the dehydrated state in the SSR.
+ *
+ * This is useful if the query should only be suspended and not included in the initial HTML response.
+ * (e.g. too large in size, or not needed for the initial page load)
+ */
+export const NO_DEHYDRATE = "no-dehydrate";

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

@@ -94,14 +94,11 @@ export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
         window.innerHeight + window.scrollY >= document.body.scrollHeight;
 
       if (hasReachedTop) {
-        // reset the active anchor when we reach the top
         setActiveAnchor("");
       } else if (hasReachedBottom) {
-        requestIdleCallback(() => {
-          // set the last anchor when we reach the bottom
-          const lastItem = Array.from(elements).pop();
-          setActiveAnchor(lastItem?.id ?? "");
-        });
+        const lastItem = Array.from(elements).pop();
+        const lastId = lastItem?.id ?? "";
+        setActiveAnchor(lastId);
       }
     };
 

package/src/lib/components/context/ZudokuContext.ts

@@ -2,9 +2,9 @@ import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
-import { ZudokuContext } from "../../core/ZudokuContext.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinPath } from "../../util/joinPath.js";
-import { CACHE_KEYS } from "../cache.js";
+import { CACHE_KEYS, NO_DEHYDRATE } from "../cache.js";
 import { traverseSidebar } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -26,7 +26,7 @@ export const useApiIdentities = () => {
 
   return useQuery({
     queryFn: getApiIdentities,
-    queryKey: [CACHE_KEYS.API_IDENTITIES],
+    queryKey: CACHE_KEYS.API_IDENTITIES,
   });
 };
 
@@ -59,7 +59,8 @@ export const useCurrentNavigation = () => {
 
   const { data } = useSuspenseQuery({
     queryFn: () => getPluginSidebar(location.pathname),
-    queryKey: ["plugin-sidebar", location.pathname],
+    // We just want to suspend here and don't store in SSR dehydrated state
+    queryKey: ["plugin-sidebar", NO_DEHYDRATE, location.pathname],
   });
 
   const hideSidebar =

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router";
+import { NavLink, useLocation, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -37,6 +37,7 @@ export const SidebarItem = ({
   item: SidebarItemType;
   onRequestClose?: () => void;
 }) => {
+  const location = useLocation();
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
@@ -76,7 +77,7 @@ export const SidebarItem = ({
           }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
           className={navigationListItem({
-            isActive: item.href.split("#")[1] === activeAnchor,
+            isActive: item.href === [location.pathname, activeAnchor].join("#"),
             className: item.badge?.placement !== "start" && "justify-between",
           })}
           onClick={onRequestClose}

package/src/lib/core/ZudokuContext.ts

@@ -1,11 +1,12 @@
+import type { QueryClient } from "@tanstack/react-query";
 import { createNanoEvents } from "nanoevents";
-import { ReactNode } from "react";
-import { Location } from "react-router";
-import { TopNavigationItem } from "../../config/validators/common.js";
+import type { ReactNode } from "react";
+import type { Location } from "react-router";
+import type { TopNavigationItem } from "../../config/validators/common.js";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import { type AuthenticationProvider } from "../authentication/authentication.js";
+import type { AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
-import { Slotlets } from "../components/SlotletProvider.js";
+import type { Slotlets } from "../components/SlotletProvider.js";
 import { joinPath } from "../util/joinPath.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import { objectEntries } from "../util/objectEntries.js";
@@ -90,7 +91,10 @@ export class ZudokuContext {
   private readonly navigationPlugins: NavigationPlugin[];
   private emitter = createNanoEvents<ZudokuEvents>();
 
-  constructor(public readonly options: ZudokuContextOptions) {
+  constructor(
+    public readonly options: ZudokuContextOptions,
+    public readonly queryClient: QueryClient,
+  ) {
     this.plugins = options.plugins ?? [];
     this.topNavigation = options.topNavigation ?? [];
     this.sidebars = options.sidebars ?? {};
@@ -98,7 +102,6 @@ export class ZudokuContext {
     this.authentication = options.authentication;
     this.meta = options.metadata;
     this.page = options.page;
-
     this.plugins.forEach((plugin) => {
       if (!isEventConsumerPlugin(plugin)) return;
 
@@ -143,7 +146,7 @@ export class ZudokuContext {
   getPluginSidebar = async (path: string) => {
     const navigations = await Promise.all(
       this.navigationPlugins.map((plugin) =>
-        plugin.getSidebar?.(joinPath(path)),
+        plugin.getSidebar?.(joinPath(path), this),
       ),
     );
 

package/src/lib/core/plugins.ts

@@ -2,11 +2,11 @@ import type { LucideIcon } from "lucide-react";
 import { type ReactElement } from "react";
 import { type RouteObject } from "react-router";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
-import { MdxComponentsType } from "../util/MdxComponents.js";
+import { type MdxComponentsType } from "../util/MdxComponents.js";
 import {
-  ZudokuContext,
-  ZudokuEvents,
   type ApiIdentity,
+  type ZudokuContext,
+  type ZudokuEvents,
 } from "./ZudokuContext.js";
 
 export type ZudokuPlugin =
@@ -21,7 +21,7 @@ export type { RouteObject };
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
-  getSidebar?: (path: string) => Promise<Sidebar>;
+  getSidebar?: (path: string, context: ZudokuContext) => Promise<Sidebar>;
 }
 
 export const createApiIdentityPlugin = (

package/src/lib/hooks/useEvent.test.tsx

@@ -12,8 +12,8 @@ import { useEvent } from "./useEvent.js";
  */
 
 const createTestContext = () => {
-  const context = new ZudokuContext({});
   const queryClient = new QueryClient();
+  const context = new ZudokuContext({}, queryClient);
   const wrapper = ({ children }: PropsWithChildren) => (
     <QueryClientProvider client={queryClient}>
       <ZudokuProvider context={context}>{children}</ZudokuProvider>