zudoku 0.35.6 → 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-C0eXdzGn.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-BJC58V32.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-C0eXdzGn.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-BKkG1cm1.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-Dm1QJHVl.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.6",
+  "version": "0.36.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {

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/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/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>

package/src/lib/oas/graphql/index.ts

@@ -51,17 +51,19 @@ export const createOperationSlug = (
   return slugify(summary);
 };
 
-type SchemaImport = () => Promise<{ schema: OpenAPIDocument }>;
+export type SchemaImport = () => Promise<{
+  schema: OpenAPIDocument;
+  slugs: ReturnType<typeof getAllSlugs>;
+}>;
 
 export type SchemaImports = Record<string, SchemaImport>;
 
 type Context = {
   schema: OpenAPIDocument;
   operations: GraphQLOperationObject[];
-  tags: TagObject[];
   schemaImports?: SchemaImports;
-  slugify: CountableSlugify;
-  slugs: Record<string, string>;
+  tags: ReturnType<typeof getAllTags>;
+  slugs: ReturnType<typeof getAllSlugs>;
 };
 
 const builder = new SchemaBuilder<{
@@ -87,17 +89,15 @@ const JSONScalar = builder.addScalarType("JSON", GraphQLJSON);
 const JSONObjectScalar = builder.addScalarType("JSONObject", GraphQLJSONObject);
 const JSONSchemaScalar = builder.addScalarType("JSONSchema", GraphQLJSONSchema);
 
-const resolveExtensions = (obj: Record<string, any>) => {
-  const extensions: Record<string, any> = {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (key.startsWith("x-")) {
-      extensions[key] = value;
-    }
-  }
-  return extensions;
-};
+const resolveExtensions = (obj: Record<string, any>) =>
+  Object.fromEntries(
+    Object.entries(obj).filter(([key]) => key.startsWith("x-")),
+  );
 
-export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
+export const getAllTags = (
+  schema: OpenAPIDocument,
+  slugs: ReturnType<typeof getAllSlugs>["tags"],
+): Array<TagObject & { slug?: string }> => {
   const rootTags = schema.tags ?? [];
   const operationTags = new Set(
     Object.values(schema.paths ?? {})
@@ -107,24 +107,42 @@ export const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
 
   return [
     // Keep root tags that are actually used in operations
-    ...rootTags.filter((tag) => operationTags.has(tag.name)),
+    ...rootTags
+      .filter((tag) => operationTags.has(tag.name))
+      .map((tag) => ({ ...tag, slug: slugs[tag.name] })),
     // Add tags found in operations but not defined in root tags
     ...[...operationTags]
       .filter((tag) => !rootTags.some((rt) => rt.name === tag))
-      .map((tag) => ({ name: tag })),
+      .map((tag) => ({ name: tag, slug: slugs[tag] })),
   ];
 };
 
-const getAllSlugs = (operations: GraphQLOperationObject[]) =>
-  Object.fromEntries(
-    operations.map((op) => [
-      getSlugName(op),
-      createOperationSlug(slugifyWithCounter(), op),
+export const getAllSlugs = (
+  ops: GraphQLOperationObject[],
+  schemaTags: TagObject[] = [],
+) => {
+  const slugify = slugifyWithCounter();
+
+  const tags = Array.from(
+    new Set([
+      ...ops.flatMap((op) => op.tags ?? []),
+      ...schemaTags.map((tag) => tag.name),
     ]),
   );
 
-const getSlugName = (op: GraphQLOperationObject) =>
-  `${op.path}-${op.method}-${op.operationId}-${op.summary}`;
+  return {
+    operations: Object.fromEntries(
+      ops.map((op) => [
+        getOperationSlugKey(op),
+        createOperationSlug(slugify, op),
+      ]),
+    ),
+    tags: Object.fromEntries(tags.map((tag) => [tag, slugify(tag)])),
+  };
+};
+
+const getOperationSlugKey = (op: GraphQLOperationObject) =>
+  [op.path, op.method, op.operationId, op.summary].filter(Boolean).join("-");
 
 export const getAllOperations = (
   paths?: PathsObject,
@@ -163,30 +181,38 @@ export const getAllOperations = (
   return operations;
 };
 
-const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
-  fields: (t) => ({
-    name: t.exposeString("name"),
-    description: t.exposeString("description", { nullable: true }),
-    operations: t.field({
-      type: [OperationItem],
-      resolve: (parent, _args, ctx) => {
-        const rootTags = ctx.tags.map((tag) => tag.name);
-        return ctx.operations
-          .filter((item) =>
-            parent.name
-              ? item.tags?.includes(parent.name)
-              : item.tags?.length === 0 ||
-                // If none of the tags are present in the root tags, then show them here
-                item.tags?.every((tag) => !rootTags.includes(tag)),
-          )
-          .map((item) => ({
-            ...item,
-            parentTag: parent.name,
-          }));
-      },
+const SchemaTag = builder
+  .objectRef<
+    Omit<TagObject, "name"> & { name?: string; slug?: string }
+  >("SchemaTag")
+  .implement({
+    fields: (t) => ({
+      name: t.exposeString("name", { nullable: true }),
+      slug: t.exposeString("slug", { nullable: true }),
+      description: t.exposeString("description", { nullable: true }),
+      operations: t.field({
+        type: [OperationItem],
+        resolve: (parent, _args, ctx) => {
+          const rootTags = ctx.tags.map((tag) => tag.name);
+
+          return ctx.operations
+            .filter((item) =>
+              parent.name
+                ? item.tags?.includes(parent.name)
+                : item.tags?.length === 0 ||
+                  // If none of the tags are present in the root tags, then show them here
+                  item.tags?.every((tag) => !rootTags.includes(tag)),
+            )
+            .map((item) => ({ ...item, parentTag: parent.name }));
+        },
+      }),
+      extensions: t.field({
+        type: JSONObjectScalar,
+        resolve: (parent) => resolveExtensions(parent),
+        nullable: true,
+      }),
     }),
-  }),
-});
+  });
 
 const ServerItem = builder.objectRef<ServerObject>("Server").implement({
   fields: (t) => ({
@@ -350,7 +376,16 @@ const OperationItem = builder
     fields: (t) => ({
       slug: t.field({
         type: "String",
-        resolve: (parent, _, ctx) => ctx.slugs[getSlugName(parent)]!,
+        resolve: (parent, _, ctx) => {
+          const slug = ctx.slugs.operations[getOperationSlugKey(parent)];
+
+          if (!slug) {
+            throw new Error(
+              `No slug found for operation: ${getOperationSlugKey(parent)}`,
+            );
+          }
+          return slug;
+        },
       }),
       path: t.exposeString("path"),
       method: t.exposeString("method"),
@@ -465,10 +500,17 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
         name: t.arg.string(),
       },
       type: [SchemaTag],
-      resolve: (root, args, ctx) => {
-        return args.name
-          ? ctx.tags.filter((tag) => tag.name === args.name)
-          : ctx.tags;
+      resolve: (_root, args, ctx) => {
+        if (args.name) {
+          return ctx.tags.filter((tag) => tag.name === args.name);
+        }
+
+        // Append empty tag which will be used to display untagged operations
+        if (ctx.operations.some((op) => !op.tags?.length)) {
+          return [...ctx.tags, { name: undefined, slug: undefined }];
+        }
+
+        return ctx.tags;
       },
     }),
     operations: t.field({
@@ -512,27 +554,25 @@ builder.queryType({
         input: t.arg({ type: JSONScalar, required: true }),
       },
       resolve: async (_, args, ctx) => {
-        let schema: OpenAPIDocument;
-
         if (args.type === "file" && typeof args.input === "string") {
           const loadSchema = ctx.schemaImports?.[args.input];
 
           if (!loadSchema) {
             throw new Error(`No schema loader found for path: ${args.input}`);
           }
-          const module = await loadSchema();
-          schema = module.schema;
+          const { schema, slugs } = await loadSchema();
+          ctx.schema = schema;
+          ctx.operations = getAllOperations(schema.paths);
+          ctx.slugs = slugs;
+          ctx.tags = getAllTags(schema, ctx.slugs.tags);
         } else {
-          schema = await validate(args.input as string);
+          ctx.schema = await validate(args.input as string);
+          ctx.operations = getAllOperations(ctx.schema.paths);
+          ctx.slugs = getAllSlugs(ctx.operations);
+          ctx.tags = getAllTags(ctx.schema, ctx.slugs.tags);
         }
 
-        ctx.schema = schema;
-        ctx.operations = getAllOperations(schema.paths);
-        ctx.slugify = slugifyWithCounter();
-        ctx.tags = getAllTags(schema);
-        ctx.slugs = getAllSlugs(ctx.operations);
-
-        return schema;
+        return ctx.schema;
       },
     }),
   }),
@@ -542,4 +582,4 @@ export const schema = builder.toSchema();
 
 export const createGraphQLServer = (
   options?: Omit<YogaServerOptions<any, any>, "schema">,
-) => createYoga({ schema, ...options });
+) => createYoga({ schema, batching: true, ...options });