zudoku 0.0.0-e614aaa → 0.0.0-e64b729

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

@@ -1,26 +1,30 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router";
+import { NavLink, useLocation } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import { AnchorLink } from "../AnchorLink.js";
 import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { SidebarBadge } from "./SidebarBadge.js";
 import { SidebarCategory } from "./SidebarCategory.js";
 
 export const navigationListItem = cva(
-  "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent",
+  "flex items-center gap-2 px-(--padding-nav-item) my-0.5 py-1.5 rounded-lg hover:bg-accent tabular-nums",
   {
     variants: {
       isActive: {
-        true: "text-primary font-medium",
+        true: "bg-accent font-medium",
         false: "text-foreground/80",
       },
       isMuted: {
         true: "text-foreground/30",
         false: "",
       },
+      isPending: {
+        true: "bg-accent animate-pulse",
+        false: "",
+      },
     },
     defaultVariants: {
       isActive: false,
@@ -37,8 +41,8 @@ export const SidebarItem = ({
   item: SidebarItemType;
   onRequestClose?: () => void;
 }) => {
+  const location = useLocation();
   const { activeAnchor } = useViewportAnchor();
-  const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
@@ -48,8 +52,10 @@ export const SidebarItem = ({
     case "doc":
       return (
         <NavLink
-          className={({ isActive }) => navigationListItem({ isActive })}
-          to={joinPath(item.id)}
+          className={({ isActive, isPending }) =>
+            navigationListItem({ isActive, isPending })
+          }
+          to={joinUrl(item.id)}
           onClick={onRequestClose}
           end
         >
@@ -67,12 +73,16 @@ export const SidebarItem = ({
         </NavLink>
       );
     case "link":
-      return item.href.startsWith("#") ? (
+      return !item.href.startsWith("http") ? (
         <AnchorLink
-          to={{ hash: item.href, search: searchParams.toString() }}
-          {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
+          to={{
+            pathname: item.href.split("#")[0],
+            hash: item.href.split("#")[1],
+            search: location.search,
+          }}
+          {...{ [DATA_ANCHOR_ATTR]: item.href.split("#")[1] }}
           className={navigationListItem({
-            isActive: item.href.slice(1) === activeAnchor,
+            isActive: item.href === [location.pathname, activeAnchor].join("#"),
             className: item.badge?.placement !== "start" && "justify-between",
           })}
           onClick={onRequestClose}
@@ -88,25 +98,6 @@ export const SidebarItem = ({
             <span className="break-all">{item.label}</span>
           )}
         </AnchorLink>
-      ) : !item.href.startsWith("http") ? (
-        <NavLink
-          className={navigationListItem({
-            isActive: item.href.split("#")[1] === activeAnchor,
-            className: item.badge?.placement !== "start" && "justify-between",
-          })}
-          to={item.href}
-        >
-          {item.badge ? (
-            <>
-              <span className="truncate" title={item.label}>
-                {item.label}
-              </span>
-              <SidebarBadge {...item.badge} />
-            </>
-          ) : (
-            <span className="break-all">{item.label}</span>
-          )}
-        </NavLink>
       ) : (
         <a
           className={navigationListItem()}

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

@@ -1,27 +1,46 @@
-import { forwardRef, type PropsWithChildren } from "react";
+import { useEffect, useRef, type PropsWithChildren } from "react";
 import { cn } from "../../util/cn.js";
+import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
+import { useZudoku } from "../context/ZudokuContext.js";
+import { PoweredByZudoku } from "./PoweredByZudoku.js";
 
-export const SidebarWrapper = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(({ children, className, pushMainContent }, ref) => (
-  <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",
-      className,
-    )}
-    ref={ref}
-  >
-    {children}
-  </nav>
-));
+export const SidebarWrapper = ({
+  children,
+  className,
+}: PropsWithChildren<{
+  className?: string;
+}>) => {
+  const { options } = useZudoku();
+  const navRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const active = navRef.current?.querySelector('[aria-current="page"]');
+    scrollIntoViewIfNeeded(active ?? null);
+  }, []);
+
+  return (
+    <div className="grid sticky top-(--header-height) lg:h-[calc(100vh-var(--header-height))] grid-rows-[1fr_min-content] border-r">
+      <nav
+        ref={navRef}
+        className={cn(
+          "hidden max-w-[calc(var(--side-nav-width)+var(--padding-nav-item))] lg:flex scrollbar flex-col overflow-y-auto shrink-0 text-sm pe-3 ps-4 lg:ps-8",
+          "-mx-(--padding-nav-item) pb-[8vh] pt-(--padding-content-top) scroll-pt-2 gap-1",
+          // Revert the padding/margin on the first child
+          "-mt-2.5",
+          className,
+        )}
+        style={{
+          maskImage: `linear-gradient(180deg, transparent 1%, rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 90%, transparent 99%)`,
+        }}
+      >
+        {children}
+      </nav>
+
+      <div className="bg-background border-t p-2 mx-5  gap-2 items-center mt-2 drop-shadow-[0_-3px_1px_rgba(0,0,0,0.015)] hidden lg:[&:has(>_:nth-child(1):last-child)]:flex">
+        {options.page?.showPoweredBy !== false && <PoweredByZudoku />}
+      </div>
+    </div>
+  );
+};
 
 SidebarWrapper.displayName = "SidebarWrapper";

package/src/lib/{plugins/markdown → components/navigation}/Toc.tsx

@@ -7,9 +7,9 @@ import {
   type CSSProperties,
   type PropsWithChildren,
 } from "react";
-import { AnchorLink } from "../../components/AnchorLink.js";
-import { useViewportAnchor } from "../../components/context/ViewportAnchorContext.js";
 import { cn } from "../../util/cn.js";
+import { AnchorLink } from "../AnchorLink.js";
+import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 
 const DATA_ANCHOR_ATTR = "data-active";
 
@@ -24,23 +24,14 @@ const TocItem = ({
   className?: string;
 }>) => {
   return (
-    <li
-      className={cn(
-        "truncate",
-        isActive
-          ? "text-primary"
-          : "text-foreground/65 dark:text-foreground/75",
-        className,
-      )}
-      title={item.value}
-    >
+    <li className={cn("truncate", className)} title={item.value}>
       <AnchorLink
         to={`#${item.id}`}
         {...{ [DATA_ANCHOR_ATTR]: item.id }}
         className={cn(
           isActive
             ? "text-primary"
-            : "text-foreground/65 dark:text-foreground/75 hover:text-foreground",
+            : "hover:text-accent-foreground text-muted-foreground",
         )}
       >
         {item.value}
@@ -89,16 +80,16 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
   }, [activeAnchor]);
 
   return (
-    <aside className="sticky scrollbar top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm">
+    <aside className="sticky scrollbar top-8 lg:top-(--header-height) h-[calc(100vh-var(--header-height))] pt-(--padding-content-top) pb-(--padding-content-bottom) overflow-y-auto ps-1 text-sm">
       <div className="flex items-center gap-2 font-medium mb-2">
         <ListTreeIcon size={16} />
         On this page
       </div>
       <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 right-auto bg-border w-[2px]" />
+        <div className="absolute inset-0 end-auto bg-border w-[2px]" />
         <div
           className={cn(
-            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
+            "absolute -start-px -translate-y-1 h-6 w-[4px] rounded-sm bg-primary",
             paintedOnce.current &&
               "ease-out [transition:top_150ms,opacity_325ms]",
           )}
@@ -113,10 +104,10 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
               isActive={item.id === activeAnchor}
               key={item.id}
               item={item}
-              className="pl-0"
+              className="ps-0"
             >
               {item.children && (
-                <ul className="list-none pl-4 pt-2 space-y-2">
+                <ul className="list-none ps-4 pt-2 space-y-2">
                   {item.children.map((child) => (
                     <TocItem
                       item={child}

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 132 100"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M80.092 2.963A4.66 4.66 0 0 1 84.449 0h34.049c6.325 0 10.835 6.135 8.948 12.172L116.653 46.71a4.688 4.688 0 0 1-4.474 3.29H75c-5.178 0-7.813 4.687-9.375 9.374-1.288 3.864-11.07 28.963-14.467 37.662A4.66 4.66 0 0 1 46.801 100H12.75c-6.324 0-10.834-6.134-8.947-12.171l10.793-34.54A4.688 4.688 0 0 1 19.071 50H56.25c5.178 0 7.813-4.687 9.375-9.375 1.288-3.864 11.07-28.962 14.467-37.662Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="M83.54 57.813a7.813 7.813 0 0 0-7.316 5.07L63.888 95.777c-.766 2.043.744 4.222 2.926 4.222h36.828c5.211 0 9.875-3.232 11.704-8.11l8.821-23.522c1.915-5.107-1.861-10.555-7.315-10.555H83.539ZM29.17 0a12.5 12.5 0 0 0-11.704 8.111l-8.82 23.521c-1.915 5.107 1.86 10.556 7.315 10.556h33.312a7.813 7.813 0 0 0 7.316-5.07L68.924 4.223C69.691 2.18 68.18 0 65.998 0H29.17Z"
+    />
+  </svg>
+);
+
+ZudokuLogo.displayName = "ZudokuLogo";
+
+export default ZudokuLogo;

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

@@ -0,0 +1,14 @@
+import type * as React from "react";
+
+const ZuploLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 76 66"
+    fill="none"
+    {...props}
+  >
+    <path d="M55.331 43.537H32.527l24.295-24.343a1.642 1.642 0 0 0-1.157-2.802H17.07V.239h42.336a16.407 16.407 0 0 1 8.81 2.438 16.471 16.471 0 0 1 6.147 6.775 16.037 16.037 0 0 1-3.167 18.201L55.331 43.535v.002Z" />
+    <path d="M20.695 21.888H43.5L19.204 46.23a1.643 1.643 0 0 0 1.158 2.802h38.595v16.153H16.621a16.406 16.406 0 0 1-8.81-2.438 16.471 16.471 0 0 1-6.147-6.775 16.038 16.038 0 0 1 3.167-18.201L20.695 21.89v-.002Z" />
+  </svg>
+);
+export default ZuploLogo;

package/src/lib/components/navigation/utils.ts

@@ -110,3 +110,15 @@ export const usePrevNext = (): {
 
   return { prev, next };
 };
+
+export const isHiddenItem =
+  (isAuthenticated?: boolean) =>
+  (item: { display?: "auth" | "anon" | "always" | "hide" }): boolean => {
+    if (item.display === "hide") return false;
+    return (
+      (item.display === "auth" && isAuthenticated) ||
+      (item.display === "anon" && !isAuthenticated) ||
+      !item.display ||
+      item.display === "always"
+    );
+  };

package/src/lib/core/RouteGuard.tsx

@@ -1,4 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { use } from "react";
 import { matchPath, Outlet, useLocation, useNavigate } from "react-router";
 import {
   Dialog,
@@ -8,20 +10,28 @@ import {
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
 import { useAuth } from "../authentication/hook.js";
+import { BypassProtectedRoutesContext } from "../components/context/BypassProtectedRoutesContext.js";
 import { useZudoku } from "../components/context/ZudokuContext.js";
 import { ZudokuError } from "../util/invariant.js";
 import { useLatest } from "../util/useLatest.js";
 
+export const SEARCH_PROTECTED_SECTION = "protected";
+
 export const RouteGuard = () => {
   const auth = useAuth();
   const zudoku = useZudoku();
   const navigate = useNavigate();
   const location = useLocation();
   const latestPath = useLatest(location.pathname);
+  const shouldBypass = use(BypassProtectedRoutesContext);
 
-  const isProtected = zudoku.options.protectedRoutes?.some((path) =>
-    matchPath({ path, end: true }, location.pathname),
-  );
+  const { protectedRoutes = [] } = zudoku.options;
+
+  const isProtected =
+    !shouldBypass &&
+    protectedRoutes.some((path) =>
+      matchPath({ path, end: true }, location.pathname),
+    );
 
   useQuery({
     queryKey: ["login-redirect"],
@@ -69,5 +79,18 @@ export const RouteGuard = () => {
     });
   }
 
-  return <Outlet />;
+  return (
+    <>
+      {shouldBypass && (
+        <Helmet>
+          <meta
+            name="pagefind"
+            data-pagefind-filter={`section:${SEARCH_PROTECTED_SECTION}`}
+            content="true"
+          />
+        </Helmet>
+      )}
+      <Outlet />
+    </>
+  );
 };

package/src/lib/core/ZudokuContext.ts

@@ -1,16 +1,24 @@
+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 { BundledTheme, HighlighterCore } from "shiki";
+import type { z } from "zod";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import { type AuthenticationProvider } from "../authentication/authentication.js";
+import type {
+  FooterSchema,
+  TopNavigationItem,
+} from "../../config/validators/validate.js";
+import type { AuthenticationPlugin } from "../authentication/authentication.js";
+import { type AuthState, useAuthState } from "../authentication/state.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
-import { Slotlets } from "../components/SlotletProvider.js";
+import type { SlotType } from "../components/context/SlotProvider.js";
 import { joinPath } from "../util/joinPath.js";
 import type { MdxComponentsType } from "../util/MdxComponents.js";
 import { objectEntries } from "../util/objectEntries.js";
 import {
   isApiIdentityPlugin,
+  isAuthenticationPlugin,
   isEventConsumerPlugin,
   isNavigationPlugin,
   type NavigationPlugin,
@@ -20,10 +28,15 @@ import {
 
 export interface ZudokuEvents {
   location: (event: { from?: Location; to: Location }) => void;
+  auth: (auth: { prev: AuthState; next: AuthState }) => void;
 }
 
 export interface ApiIdentity {
   authorizeRequest: (request: Request) => Promise<Request> | Request;
+  authorizationFields?: {
+    headers?: string[];
+    queryParams?: string[];
+  };
   label: string;
   id: string;
 }
@@ -45,13 +58,15 @@ type Metadata = Partial<{
 }>;
 
 type Page = Partial<{
+  dir?: "ltr" | "rtl";
+  showPoweredBy?: boolean;
   pageTitle?: string;
   logo?: {
     src: {
       light: string;
       dark: string;
     };
-    width?: string;
+    width?: string | number;
     alt?: string;
   };
   banner?: {
@@ -59,21 +74,32 @@ type Page = Partial<{
     color?: "note" | "tip" | "info" | "caution" | "danger" | (string & {});
     dismissible?: boolean;
   };
+  footer?: z.infer<typeof FooterSchema>;
 }>;
 
 export type ZudokuContextOptions = {
+  basePath?: string;
+  canonicalUrlOrigin?: string;
   metadata?: Metadata;
   page?: Page;
-  authentication?: AuthenticationProvider;
+  authentication?: AuthenticationPlugin;
   topNavigation?: TopNavigationItem[];
   sidebars?: SidebarConfig;
   plugins?: ZudokuPlugin[];
-  slotlets?: Slotlets;
+  slots?: Record<string, SlotType>;
+  /**
+   * @deprecated Use `slots` instead
+   */
+  UNSAFE_slotlets?: Record<string, SlotType>;
   mdx?: {
     components?: MdxComponentsType;
   };
   overrides?: ComponentsContextType;
   protectedRoutes?: string[];
+  syntaxHighlighting?: {
+    highlighter: HighlighterCore;
+    themes?: { light: BundledTheme; dark: BundledTheme };
+  };
 };
 
 export class ZudokuContext {
@@ -82,24 +108,40 @@ export class ZudokuContext {
   public topNavigation: NonNullable<ZudokuContextOptions["topNavigation"]>;
   public meta: ZudokuContextOptions["metadata"];
   public page: ZudokuContextOptions["page"];
-  public authentication?: ZudokuContextOptions["authentication"];
+  public readonly authentication?: ZudokuContextOptions["authentication"];
+  public readonly queryClient: QueryClient;
+  public readonly options: ZudokuContextOptions;
   private readonly navigationPlugins: NavigationPlugin[];
   private emitter = createNanoEvents<ZudokuEvents>();
 
-  constructor(public readonly options: ZudokuContextOptions) {
+  constructor(options: ZudokuContextOptions, queryClient: QueryClient) {
+    const protectedRoutes = (options.protectedRoutes ?? []).concat(
+      options.plugins?.flatMap((plugin) =>
+        isNavigationPlugin(plugin) ? (plugin.getProtectedRoutes?.() ?? []) : [],
+      ) ?? [],
+    );
+
+    this.queryClient = queryClient;
+    this.options = { ...options, protectedRoutes };
     this.plugins = options.plugins ?? [];
     this.topNavigation = options.topNavigation ?? [];
     this.sidebars = options.sidebars ?? {};
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
-    this.authentication = options.authentication;
+    this.authentication = this.plugins.find(isAuthenticationPlugin);
     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);
+        this.emitter.on(event, handler!);
+      });
+    });
+
+    useAuthState.subscribe((state, prevState) => {
+      this.emitEvent("auth", {
+        prev: prevState,
+        next: state,
       });
     });
   }
@@ -139,7 +181,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),
       ),
     );
 
@@ -151,10 +193,6 @@ export class ZudokuContext {
       throw new Error("No authentication provider configured");
     }
 
-    const accessToken = await this.authentication.getAccessToken();
-
-    request.headers.set("Authorization", `Bearer ${accessToken}`);
-
-    return request;
+    return await this.authentication.signRequest(request);
   };
 }

package/src/lib/core/plugins.ts

@@ -1,12 +1,13 @@
 import type { LucideIcon } from "lucide-react";
-import { type ReactElement } from "react";
-import { type RouteObject } from "react-router";
+import type { ReactElement } from "react";
+import type { Location, RouteObject } from "react-router";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
-import { MdxComponentsType } from "../util/MdxComponents.js";
-import {
+import type { AuthenticationPlugin } from "../authentication/authentication.js";
+import type { MdxComponentsType } from "../util/MdxComponents.js";
+import type {
+  ApiIdentity,
   ZudokuContext,
   ZudokuEvents,
-  type ApiIdentity,
 } from "./ZudokuContext.js";
 
 export type ZudokuPlugin =
@@ -15,13 +16,15 @@ export type ZudokuPlugin =
   | NavigationPlugin
   | ApiIdentityPlugin
   | SearchProviderPlugin
-  | EventConsumerPlugin;
+  | EventConsumerPlugin
+  | AuthenticationPlugin;
 
-export type { RouteObject };
+export type { AuthenticationPlugin, RouteObject };
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
-  getSidebar?: (path: string) => Promise<Sidebar>;
+  getSidebar?: (path: string, context: ZudokuContext) => Promise<Sidebar>;
+  getProtectedRoutes?: () => string[];
 }
 
 export const createApiIdentityPlugin = (
@@ -60,12 +63,12 @@ export interface CommonPlugin {
   initialize?: (
     context: ZudokuContext,
   ) => Promise<void | boolean> | void | boolean;
-  getHead?: () => ReactElement | undefined;
+  getHead?: ({ location }: { location: Location }) => ReactElement | undefined;
   getMdxComponents?: () => MdxComponentsType;
 }
 
 export type EventConsumerPlugin<Event extends ZudokuEvents = ZudokuEvents> = {
-  events: { [K in keyof Event]: Event[K] };
+  events: { [K in keyof Event]?: Event[K] };
 };
 
 export const isEventConsumerPlugin = (
@@ -83,6 +86,11 @@ export const isNavigationPlugin = (
 ): obj is NavigationPlugin =>
   "getRoutes" in obj && typeof obj.getRoutes === "function";
 
+export const isAuthenticationPlugin = (
+  obj: ZudokuPlugin,
+): obj is AuthenticationPlugin =>
+  "signUp" in obj && typeof obj.signUp === "function";
+
 export const isSearchPlugin = (
   obj: ZudokuPlugin,
 ): obj is SearchProviderPlugin =>

package/src/lib/errors/ErrorAlert.tsx

@@ -1,5 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
 import { DeveloperHint } from "../components/DeveloperHint.js";
+import { Heading } from "../components/Heading.js";
+import { ProseClasses } from "../components/Markdown.js";
+import { cn } from "../util/cn.js";
 import { ZudokuError } from "../util/invariant.js";
 
 export function ErrorAlert({ error }: { error: unknown }) {
@@ -12,24 +16,27 @@ export function ErrorAlert({ error }: { error: unknown }) {
   const stack = error instanceof Error ? error.stack : undefined;
   const cause = error instanceof Error ? error.cause : undefined;
 
+  const stringError = cause instanceof Error ? String(cause.stack) : stack;
+
   return (
-    <div className="flex h-screen max-h-[calc(100vh-var(--header-height))] min-h-full items-center justify-center bg-primary-background px-4 py-16 lg:px-8">
-      <div className="mx-auto max-w-[85%] sm:max-w-[50%]">
-        <h1 className="text-4xl font-bold tracking-tight text-h1-text sm:text-5xl">
-          {title}
-        </h1>
-        <p className="mt-5 text-h1-text">{message}</p>
-        {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}
-        {cause instanceof Error ? (
-          <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
-            {cause.stack}
-          </pre>
-        ) : stack ? (
-          <pre className="mt-5 max-h-[400px] w-full overflow-scroll rounded-md border border-input-border bg-input-background p-3 text-property-name-text text-red-700">
-            {stack}
-          </pre>
-        ) : null}
-      </div>
+    <div
+      className={cn(
+        ProseClasses,
+        "grid grid-cols-1 !max-w-none pt-(--padding-content-top)",
+      )}
+    >
+      <Heading level={1}>{title}</Heading>
+      Error: {message}
+      {hint && <DeveloperHint className="mb-4">{hint}</DeveloperHint>}
+      {stringError && (
+        <div>
+          <SyntaxHighlight
+            className="max-h-[400px] border mt-2"
+            language="js"
+            code={stringError}
+          />
+        </div>
+      )}
     </div>
   );
 }

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>