zudoku 0.32.6 → 0.33.0

package/lib/zudoku.css

@@ -0,0 +1 @@
+@tailwind components;@layer components{.stepper>ol{--bullet-size: 1.75rem;--line-spacing: .25rem;@apply flex flex-col list-none p-0 m-0;counter-reset:step-counter}.stepper>ol>li{@apply relative ps-12 pb-6 my-0;counter-increment:step-counter}.stepper>ol>li:last-child{@apply pb-0;}.stepper>ol>li:before{@apply absolute left-0 flex items-center justify-center size-[--bullet-size];@apply bg-muted/80 border border-border text-muted-foreground text-[calc(var(--bullet-size)/2)] font-semibold rounded-full;content:counter(step-counter)}.stepper>ol>li:after{@apply absolute content-[""] w-[2px] bg-border -translate-x-1/2;left:calc(var(--bullet-size) / 2);top:calc(var(--bullet-size) + var(--line-spacing));height:calc(100% - var(--bullet-size) - (2 * var(--line-spacing)))}.stepper>ol>li>:first-child{@apply mt-0 pt-0;transform:translateY(calc((var(--bullet-size) - 1lh) / 2))}}

package/lib/zudoku.hooks.js

@@ -0,0 +1,19 @@
+import { z as f } from "./index-DwT-v3zK.js";
+import { useState as m, useEffect as i } from "react";
+import { a } from "./hook-4_6pQSo4.js";
+function d(e, t) {
+  const s = a(), [n, o] = m();
+  return i(() => s.addEventListener(e, (...u) => {
+    if (t) {
+      const r = t(...u);
+      o(r);
+    } else
+      o(u);
+  }), [s, e, t]), n;
+}
+const v = d, z = f;
+export {
+  v as useEvent,
+  z as useTheme
+};
+//# sourceMappingURL=zudoku.hooks.js.map

package/lib/zudoku.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zudoku.hooks.js","sources":["../src/lib/hooks/useEvent.ts","../src/lib/hooks/index.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useZudoku } from \"../components/context/ZudokuContext.js\";\nimport type { ZudokuEvents } from \"../core/ZudokuContext.js\";\n\ntype EventParameters<Event extends keyof ZudokuEvents> = Parameters<\n  ZudokuEvents[Event]\n>;\n\n/**\n * Hook to subscribe to Zudoku events with automatic cleanup\n * @param event The event to subscribe to\n * @param callback Optional callback to be called when the event is emitted\n * @returns The latest event data if no callback is provided, or the callback's return value if it returns something\n */\nexport function useEvent<E extends keyof ZudokuEvents>(\n  event: E,\n): EventParameters<E>;\nexport function useEvent<E extends keyof ZudokuEvents, R>(\n  event: E,\n  callback: (...args: EventParameters<E>) => R,\n): R;\nexport function useEvent<E extends keyof ZudokuEvents, R>(\n  event: E,\n  callback?: (...args: EventParameters<E>) => R,\n) {\n  const zudoku = useZudoku();\n  const [latestData, setLatestData] = useState<R | EventParameters<E>>();\n\n  useEffect(() => {\n    return zudoku.addEventListener(event, ((...args: EventParameters<E>) => {\n      if (callback) {\n        const result = callback(...args);\n        setLatestData(result);\n      } else {\n        setLatestData(args);\n      }\n    }) as ZudokuEvents[E]);\n  }, [zudoku, event, callback]);\n\n  return latestData;\n}\n","import { useTheme as useThemeImport } from \"next-themes\";\nimport { useEvent as useEventImport } from \"./useEvent.js\";\n\nexport const useEvent = /*@__PURE__*/ useEventImport;\nexport const useTheme = /*@__PURE__*/ useThemeImport;\n"],"names":["useEvent","event","callback","zudoku","useZudoku","latestData","setLatestData","useState","useEffect","args","result","useEventImport","useTheme","useThemeImport"],"mappings":";;;AAqBgB,SAAAA,EACdC,GACAC,GACA;AACA,QAAMC,IAASC,EAAU,GACnB,CAACC,GAAYC,CAAa,IAAIC,EAAiC;AAErE,SAAAC,EAAU,MACDL,EAAO,iBAAiBF,GAAQ,IAAIQ,MAA6B;AACtE,QAAIP,GAAU;AACN,YAAAQ,IAASR,EAAS,GAAGO,CAAI;AAC/B,MAAAH,EAAcI,CAAM;AAAA,IAAA;AAEpB,MAAAJ,EAAcG,CAAI;AAAA,EACpB,CACmB,GACpB,CAACN,GAAQF,GAAOC,CAAQ,CAAC,GAErBG;AACT;ACrCO,MAAML,IAAyBW,GACzBC,IAAyBC;"}

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

@@ -2,9 +2,9 @@ import { j as e } from "./jsx-runtime-CYK1ROHF.js";
 import { s as f } from "./index-LNp6rxyU.js";
 import { d as b, m as x } from "./chunk-IR6S3I6Y-D_3UmFIn.js";
 import { j as d } from "./joinUrl-10po2Jdj.js";
-import { u as j, a as y } from "./hook-CWwSAAlH.js";
+import { u as j, b as y } from "./hook-4_6pQSo4.js";
 import { Head as v, Link as N } from "./zudoku.components.js";
-import { H as S, M as w } from "./Markdown-Cr9sYpR_.js";
+import { H as S, M as w } from "./Markdown-DePfm7oQ.js";
 const M = ({
   items: a,
   filterCatalogItems: r = (s) => s,

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

@@ -1,9 +1,9 @@
 import { j as e } from "./jsx-runtime-CYK1ROHF.js";
-import { RotateCwIcon as j, TrashIcon as v, EyeOffIcon as w, EyeIcon as K, CheckIcon as k, CopyIcon as b, FileKey2Icon as N } from "lucide-react";
-import { D as I, S as x, R as S } from "./SlotletProvider-CEfNOA8i.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-DdtIOUi6.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { i as h, e as g, k as A, a as C } from "./hook-CWwSAAlH.js";
-import { u as d, S as E, a as P, b as D, c as q, d as R, e as p } from "./Select-D9hI1G-y.js";
+import { a as h, f as g, k as A, b as C } from "./hook-4_6pQSo4.js";
+import { u as d, S as E, a as P, b as D, c as q, d as R, e as p } from "./Select-BmoX1iTH.js";
 import { a as O } from "./index.esm--gIChbWs.js";
 import { a as z, L as u, O as F } from "./chunk-IR6S3I6Y-D_3UmFIn.js";
 import { Button as l } from "./ui/Button.js";
@@ -195,7 +195,7 @@ const V = ({ service: t }) => {
           });
         },
         size: "icon",
-        children: r ? /* @__PURE__ */ e.jsx(k, { size: 16 }) : /* @__PURE__ */ e.jsx(b, { size: 16 })
+        children: r ? /* @__PURE__ */ e.jsx(b, { size: 16 }) : /* @__PURE__ */ e.jsx(k, { size: 16 })
       }
     )
   ] });

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-Cr9sYpR_.js";
+import { P as n } from "./Markdown-DePfm7oQ.js";
 import { c } from "./cn-qaFjX9_3.js";
 import { u as p } from "./useExposedProps-RIvey2Oy.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-Dt-UEQl8.js"), { default: f, ...l } = await i();
+            const { MdxPage: p } = await import("./MdxPage-DM9mE-G-.js"), { default: f, ...l } = await i();
             return {
               element: /* @__PURE__ */ d.jsx(
                 p,

package/lib/zudoku.plugin-openapi.js

@@ -2,10 +2,10 @@ import "./jsx-runtime-CYK1ROHF.js";
 import "./index-LNp6rxyU.js";
 import "lucide-react";
 import "./chunk-IR6S3I6Y-D_3UmFIn.js";
-import "./hook-CWwSAAlH.js";
+import "./hook-4_6pQSo4.js";
 import "./ui/Button.js";
 import "./joinUrl-10po2Jdj.js";
-import { U as n, o as s } from "./index-Do_30Hpk.js";
+import { U as n, o as s } from "./index-DVBlM15k.js";
 export {
   n as UNTAGGED_PATH,
   s as openApiPlugin

package/lib/zudoku.plugins.js

@@ -1,13 +1,14 @@
-const n = (e) => e, t = (e) => e, i = (e) => "getProfileMenuItems" in e && typeof e.getProfileMenuItems == "function", o = (e) => "getRoutes" in e && typeof e.getRoutes == "function", s = (e) => "renderSearch" in e && typeof e.renderSearch == "function", c = (e) => "initialize" in e && typeof e.initialize == "function", u = (e) => "getHead" in e && typeof e.getHead == "function", f = (e) => "getMdxComponents" in e && typeof e.getMdxComponents == "function", g = (e) => "getIdentities" in e && typeof e.getIdentities == "function";
+const n = (e) => e, t = (e) => e, i = (e) => "events" in e && typeof e.events == "object", o = (e) => "getProfileMenuItems" in e && typeof e.getProfileMenuItems == "function", s = (e) => "getRoutes" in e && typeof e.getRoutes == "function", c = (e) => "renderSearch" in e && typeof e.renderSearch == "function", u = (e) => "initialize" in e && typeof e.initialize == "function", f = (e) => "getHead" in e && typeof e.getHead == "function", g = (e) => "getMdxComponents" in e && typeof e.getMdxComponents == "function", r = (e) => "getIdentities" in e && typeof e.getIdentities == "function";
 export {
   n as createApiIdentityPlugin,
   t as createProfileMenuPlugin,
-  u as hasHead,
-  g as isApiIdentityPlugin,
-  f as isMdxProviderPlugin,
-  o as isNavigationPlugin,
-  i as isProfileMenuPlugin,
-  s as isSearchPlugin,
-  c as needsInitialization
+  f as hasHead,
+  r as isApiIdentityPlugin,
+  i as isEventConsumerPlugin,
+  g as isMdxProviderPlugin,
+  s as isNavigationPlugin,
+  o as isProfileMenuPlugin,
+  c as isSearchPlugin,
+  u as needsInitialization
 };
 //# sourceMappingURL=zudoku.plugins.js.map

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 { ZudokuContext, type ApiIdentity } from \"./ZudokuContext.js\";\n\nexport type ZudokuPlugin =\n  | CommonPlugin\n  | ProfileMenuPlugin\n  | NavigationPlugin\n  | ApiIdentityPlugin\n  | SearchProviderPlugin;\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 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","isProfileMenuPlugin","obj","isNavigationPlugin","isSearchPlugin","needsInitialization","hasHead","isMdxProviderPlugin","isApiIdentityPlugin"],"mappings":"AAqBa,MAAAA,IAA0B,CACrCC,MACsBA,GAEXC,IAA0B,CACrCD,MACsBA,GAkCXE,IAAsB,CACjCC,MAEA,yBAAyBA,KAAO,OAAOA,EAAI,uBAAwB,YAExDC,IAAqB,CAChCD,MAEA,eAAeA,KAAO,OAAOA,EAAI,aAAc,YAEpCE,IAAiB,CAC5BF,MAEA,kBAAkBA,KAAO,OAAOA,EAAI,gBAAiB,YAE1CG,IAAsB,CAACH,MAClC,gBAAgBA,KAAO,OAAOA,EAAI,cAAe,YAEtCI,IAAU,CAACJ,MACtB,aAAaA,KAAO,OAAOA,EAAI,WAAY,YAEhCK,IAAsB,CAACL,MAClC,sBAAsBA,KAAO,OAAOA,EAAI,oBAAqB,YAElDM,IAAsB,CACjCN,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 { 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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.32.6",
+  "version": "0.33.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -35,6 +35,10 @@
       "import": "./lib/ui/*.js",
       "types": "./dist/lib/ui/*.d.ts"
     },
+    "./hooks": {
+      "import": "./lib/hooks/index.js",
+      "types": "./dist/lib/hooks/index.d.ts"
+    },
     "./client": {
       "types": "./client.d.ts"
     },
@@ -168,7 +172,7 @@
     "glob": "11.0.1",
     "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.11.0",
+    "graphql-yoga": "5.12.0",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "hast-util-to-string": "3.0.1",
@@ -177,6 +181,7 @@
     "loglevel": "1.9.2",
     "lru-cache": "11.0.2",
     "lucide-react": "0.475.0",
+    "nanoevents": "^9.1.0",
     "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
@@ -221,11 +226,13 @@
     "yargs": "17.7.2",
     "zod": "3.24.2",
     "zod-validation-error": "3.4.0",
-    "zustand": "5.0.3"
+    "zustand": "5.0.3",
+    "esm-loader-css": "^1.0.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.5",
     "@graphql-codegen/client-preset": "4.6.2",
+    "@testing-library/react": "16.2.0",
     "@types/estree": "1.0.6",
     "@types/express": "5.0.0",
     "@types/har-format": "1.2.16",
@@ -233,13 +240,14 @@
     "@types/json-schema": "7.0.15",
     "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
-    "@types/node": "20.16.11",
+    "@types/node": "22.13.5",
     "@types/object-hash": "3.0.6",
     "@types/react-is": "19.0.0",
     "@types/semver": "7.5.8",
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.0.5",
+    "happy-dom": "17.1.1",
     "mdast-util-mdx": "3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",

package/src/app/main.tsx

@@ -81,7 +81,7 @@ export const getRoutesByOptions = (
   enableStatusPages = false,
 ) => {
   const allPlugins = [
-    ...(options.plugins ? options.plugins : []),
+    ...(options.plugins ?? []),
     ...(options.authentication?.getAuthenticationPlugin
       ? [options.authentication.getAuthenticationPlugin()]
       : []),

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

@@ -1,5 +1,5 @@
-import { Auth0AuthenticationConfig } from "../../../config/config.js";
-import { AuthenticationProviderInitializer } from "../authentication.js";
+import { type Auth0AuthenticationConfig } from "../../../config/config.js";
+import { type AuthenticationProviderInitializer } from "../authentication.js";
 import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
 
@@ -11,6 +11,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
       issuer: `https://${config.domain}`,
       clientId: config.clientId,
       audience: config.audience,
+      scopes: config.scopes,
     });
   }
 

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

@@ -1,16 +1,16 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import {
-  AuthenticationProvider,
-  AuthenticationProviderInitializer,
+  type AuthenticationProvider,
+  type AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
-import { useAuthState, UserProfile } from "../state.js";
+import { useAuthState, type UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
 
@@ -60,6 +60,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   private readonly redirectToAfterSignIn: string;
   private readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
+  private readonly scopes: string[];
 
   constructor({
     issuer,
@@ -69,6 +70,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignIn,
     redirectToAfterSignOut,
     basePath,
+    scopes,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -77,6 +79,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     this.audience = audience;
     this.issuer = issuer;
     this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+    this.scopes = scopes ?? ["openid", "profile", "email"];
 
     const root = joinUrl(basePath, "/");
 
@@ -178,7 +181,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     authorizationUrl.searchParams.set("client_id", this.client.client_id);
     authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
     authorizationUrl.searchParams.set("response_type", "code");
-    authorizationUrl.searchParams.set("scope", "openid profile email");
+    authorizationUrl.searchParams.set("scope", this.scopes.join(" "));
     authorizationUrl.searchParams.set("code_challenge", codeChallenge);
     authorizationUrl.searchParams.set(
       "code_challenge_method",

package/src/lib/components/ThemeSwitch.tsx

@@ -22,7 +22,7 @@ export const ThemeSwitch = () => {
         <div
           className={cn(
             "border border-transparent rounded-full p-0.5 [&>svg>circle]:transition-colors [&>svg>path]:transition-transform transition-all [&>svg>path]:duration-200 [&>svg>circle]:duration-500 [&>svg>circle]:fill-transparent",
-            resolvedTheme === "light" && "border-border bg-muted/50",
+            resolvedTheme === "light" && "border-border bg-muted",
             resolvedTheme === "dark" &&
               "group-hover:[&>svg>path]:scale-110 group-hover:[&>svg>path]:-translate-x-[1px] group-hover:[&>svg>path]:-translate-y-[1px] group-hover:rotate-[15deg] ",
           )}

package/src/lib/components/Zudoku.tsx

@@ -2,7 +2,6 @@ import { MDXProvider } from "@mdx-js/react";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ThemeProvider } from "next-themes";
 import {
-  Fragment,
   memo,
   type PropsWithChildren,
   useContext,
@@ -13,7 +12,10 @@ import {
 import { ErrorBoundary } from "react-error-boundary";
 import { Outlet, useNavigation } from "react-router";
 import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
-import { ZudokuContext, ZudokuContextOptions } from "../core/ZudokuContext.js";
+import {
+  ZudokuContext,
+  type ZudokuContextOptions,
+} from "../core/ZudokuContext.js";
 import { TopLevelError } from "../errors/TopLevelError.js";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
 import { MdxComponents } from "../util/MdxComponents.js";
@@ -22,6 +24,7 @@ import {
   ComponentsProvider,
   DEFAULT_COMPONENTS,
 } from "./context/ComponentsContext.js";
+import { RouterEventsEmitter } from "./context/RouterEventsEmitter.js";
 import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
 import { ZudokuProvider } from "./context/ZudokuProvider.js";
 import { SlotletProvider } from "./SlotletProvider.js";
@@ -67,15 +70,16 @@ const ZudokoInner = memo(
     const [zudokuContext] = useState(() => new ZudokuContext(props));
 
     const heads = props.plugins
-      ?.filter(hasHead)
+      ?.flatMap((plugin) => (hasHead(plugin) ? (plugin.getHead?.() ?? []) : []))
       // eslint-disable-next-line react/no-array-index-key
-      .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
+      .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 
     return (
       <>
-        <Helmet>{heads}</Helmet>
+        {heads}
         <StaggeredRenderContext.Provider value={staggeredValue}>
           <ZudokuProvider context={zudokuContext}>
+            <RouterEventsEmitter />
             <MDXProvider components={mdxComponents}>
               <ThemeProvider attribute="class" disableTransitionOnChange>
                 <ComponentsProvider value={components}>

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

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLocation, type Location } from "react-router";
+import { useZudoku } from "./ZudokuContext.js";
+
+export const RouterEventsEmitter = () => {
+  const location = useLocation();
+  const zudoku = useZudoku();
+  const previousLocation = useRef<Location | undefined>(undefined);
+
+  useEffect(() => {
+    zudoku.emitEvent("location", {
+      from: previousLocation.current,
+      to: location,
+    });
+    previousLocation.current = location;
+  }, [zudoku, location]);
+
+  return null;
+};

package/src/lib/core/ZudokuContext.ts

@@ -1,4 +1,6 @@
+import { createNanoEvents } from "nanoevents";
 import { ReactNode } from "react";
+import { Location } from "react-router";
 import { TopNavigationItem } from "../../config/validators/common.js";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
@@ -6,14 +8,20 @@ import type { ComponentsContextType } from "../components/context/ComponentsCont
 import { Slotlets } from "../components/SlotletProvider.js";
 import { joinPath } from "../util/joinPath.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
+import { objectEntries } from "../util/objectEntries.js";
 import {
   isApiIdentityPlugin,
+  isEventConsumerPlugin,
   isNavigationPlugin,
   type NavigationPlugin,
   needsInitialization,
   type ZudokuPlugin,
 } from "./plugins.js";
 
+export interface ZudokuEvents {
+  location: (event: { from?: Location; to: Location }) => void;
+}
+
 export interface ApiIdentity {
   authorizeRequest: (request: Request) => Promise<Request> | Request;
   label: string;
@@ -76,6 +84,7 @@ export class ZudokuContext {
   public page: ZudokuContextOptions["page"];
   public authentication?: ZudokuContextOptions["authentication"];
   private readonly navigationPlugins: NavigationPlugin[];
+  private emitter = createNanoEvents<ZudokuEvents>();
 
   constructor(public readonly options: ZudokuContextOptions) {
     this.plugins = options.plugins ?? [];
@@ -85,6 +94,14 @@ export class ZudokuContext {
     this.authentication = options.authentication;
     this.meta = options.metadata;
     this.page = options.page;
+
+    this.plugins.forEach((plugin) => {
+      if (!isEventConsumerPlugin(plugin)) return;
+
+      objectEntries(plugin.events).forEach(([event, handler]) => {
+        this.emitter.on(event, handler);
+      });
+    });
   }
 
   initialize = async (): Promise<void> => {
@@ -105,6 +122,20 @@ export class ZudokuContext {
     return keys.flat();
   };
 
+  addEventListener<E extends keyof ZudokuEvents>(
+    event: E,
+    callback: ZudokuEvents[E],
+  ) {
+    return this.emitter.on(event, callback);
+  }
+
+  emitEvent = <E extends keyof ZudokuEvents>(
+    event: E,
+    ...data: Parameters<ZudokuEvents[E]>
+  ) => {
+    return this.emitter.emit(event, ...data);
+  };
+
   getPluginSidebar = async (path: string) => {
     const navigations = await Promise.all(
       this.navigationPlugins.map((plugin) =>

package/src/lib/core/plugins.ts

@@ -3,14 +3,19 @@ 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 { ZudokuContext, type ApiIdentity } from "./ZudokuContext.js";
+import {
+  ZudokuContext,
+  ZudokuEvents,
+  type ApiIdentity,
+} from "./ZudokuContext.js";
 
 export type ZudokuPlugin =
   | CommonPlugin
   | ProfileMenuPlugin
   | NavigationPlugin
   | ApiIdentityPlugin
-  | SearchProviderPlugin;
+  | SearchProviderPlugin
+  | EventConsumerPlugin;
 
 export type { RouteObject };
 
@@ -59,6 +64,15 @@ export interface CommonPlugin {
   getMdxComponents?: () => MdxComponentsType;
 }
 
+export type EventConsumerPlugin<Event extends ZudokuEvents = ZudokuEvents> = {
+  events: { [K in keyof Event]: Event[K] };
+};
+
+export const isEventConsumerPlugin = (
+  obj: ZudokuPlugin,
+): obj is EventConsumerPlugin =>
+  "events" in obj && typeof obj.events === "object";
+
 export const isProfileMenuPlugin = (
   obj: ZudokuPlugin,
 ): obj is ProfileMenuPlugin =>

package/src/lib/hooks/index.ts

@@ -0,0 +1,5 @@
+import { useTheme as useThemeImport } from "next-themes";
+import { useEvent as useEventImport } from "./useEvent.js";
+
+export const useEvent = /*@__PURE__*/ useEventImport;
+export const useTheme = /*@__PURE__*/ useThemeImport;

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

@@ -0,0 +1,149 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { type PropsWithChildren } from "react";
+import { type Location } from "react-router";
+import { assertType, describe, expect, it, vi } from "vitest";
+import { ZudokuProvider } from "../components/context/ZudokuProvider.js";
+import { ZudokuContext, type ZudokuEvents } from "../core/ZudokuContext.js";
+import { useEvent } from "./useEvent.js";
+
+/**
+ * @vitest-environment happy-dom
+ */
+
+const createTestContext = () => {
+  const context = new ZudokuContext({});
+  const queryClient = new QueryClient();
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={queryClient}>
+      <ZudokuProvider context={context}>{children}</ZudokuProvider>
+    </QueryClientProvider>
+  );
+
+  return { context, wrapper };
+};
+
+const locationData = {
+  pathname: "/test",
+  hash: "",
+  search: "",
+  key: "",
+  state: {},
+} satisfies Location;
+
+describe("useEvent", () => {
+  it("returns latest event data without callback", async () => {
+    const { context, wrapper } = createTestContext();
+    const { result } = renderHook(() => useEvent("location"), { wrapper });
+
+    await act(() => Promise.resolve());
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    expect(result.current).toEqual([{ to: locationData }]);
+  });
+
+  it("transforms event data with callback", async () => {
+    const { context, wrapper } = createTestContext();
+    const { result } = renderHook(
+      () => useEvent("location", ({ to }) => to.pathname),
+      { wrapper },
+    );
+
+    await act(() => Promise.resolve());
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    await waitFor(() => expect(result.current).toEqual("/test"));
+  });
+
+  it("handles side effects without return value", async () => {
+    const { context, wrapper } = createTestContext();
+    const sideEffect = vi.fn();
+
+    const { result } = renderHook(
+      () =>
+        useEvent("location", (event) => {
+          sideEffect(event);
+        }),
+      { wrapper },
+    );
+
+    await act(() => Promise.resolve());
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    expect(result.current).toBeUndefined();
+    expect(sideEffect).toHaveBeenCalledWith({ to: locationData });
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+  });
+
+  it("removes event listener on cleanup", async () => {
+    const { context, wrapper } = createTestContext();
+    const sideEffect = vi.fn();
+
+    const { unmount } = renderHook(
+      () =>
+        useEvent("location", (event) => {
+          sideEffect(event);
+        }),
+      { wrapper },
+    );
+
+    await act(() => Promise.resolve());
+
+    // First event emission
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+
+    // Unmount the hook
+    unmount();
+
+    // Second event emission after unmount
+    await act(async () => {
+      context.emitEvent("location", { to: locationData });
+    });
+
+    // The callback should not have been called again
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+  });
+
+  describe("types", () => {
+    const { wrapper } = createTestContext();
+
+    it("infers event type when no callback is provided", () => {
+      const hook = renderHook(() => useEvent("location"), { wrapper });
+      assertType<Parameters<ZudokuEvents["location"]> | undefined>(
+        hook.result.current,
+      );
+    });
+
+    it("infers string type from pathname callback", () => {
+      const hook = renderHook(
+        () => useEvent("location", ({ to }) => to.pathname),
+        { wrapper },
+      );
+      assertType<string>(hook.result.current);
+    });
+
+    it("infers object type from object callback", () => {
+      const hook = renderHook(
+        () => useEvent("location", ({ to }) => ({ query: to.search })),
+        { wrapper },
+      );
+      assertType<{ query: string }>(hook.result.current);
+    });
+
+    it("infers void type from empty callback", () => {
+      const hook = renderHook(() => useEvent("location", () => {}), {
+        wrapper,
+      });
+      assertType<void>(hook.result.current);
+    });
+  });
+});