zudoku 0.0.0-reset-hash-value.ac516c6d → 0.0.0-z179c4f85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-reset-hash-value.ac516c6d",
+  "version": "0.0.0-z179c4f85",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -59,6 +59,10 @@
       "import": "./lib/zudoku.auth-azureb2c.js",
       "types": "./dist/lib/authentication/providers/azureb2c.d.ts"
     },
+    "./auth/firebase": {
+      "import": "./lib/zudoku.auth-firebase.js",
+      "types": "./dist/lib/authentication/providers/firebase.d.ts"
+    },
     "./plugins": {
       "import": "./lib/zudoku.plugins.js",
       "types": "./dist/lib/core/plugins.d.ts"
@@ -103,6 +107,10 @@
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
     },
+    "./mermaid": {
+      "import": "./lib/zudoku.mermaid.js",
+      "types": "./dist/lib/components/Mermaid.d.ts"
+    },
     "./__internal": {
       "import": "./lib/zudoku.__internal.js",
       "types": "./dist/lib/__internal.d.ts"
@@ -111,6 +119,10 @@
       "import": "./lib/zudoku.router.js",
       "types": "./dist/lib/core/router.d.ts"
     },
+    "./react-query": {
+      "import": "./lib/zudoku.react-query.js",
+      "types": "./dist/lib/core/react-query.d.ts"
+    },
     "./processors/*": {
       "import": "./lib/processors/*.js",
       "types": "./dist/lib/plugins/openapi/processors/*.d.ts"
@@ -149,56 +161,59 @@
     "@pothos/core": "4.10.0",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-alert-dialog": "1.1.15",
-    "@radix-ui/react-aspect-ratio": "1.1.7",
+    "@radix-ui/react-aspect-ratio": "1.1.8",
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-collapsible": "1.1.12",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-dropdown-menu": "2.1.16",
     "@radix-ui/react-hover-card": "1.1.15",
-    "@radix-ui/react-label": "2.1.7",
+    "@radix-ui/react-label": "2.1.8",
     "@radix-ui/react-popover": "1.1.15",
-    "@radix-ui/react-progress": "1.1.7",
+    "@radix-ui/react-progress": "1.1.8",
     "@radix-ui/react-radio-group": "1.3.8",
     "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slider": "1.3.6",
-    "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-switch": "1.2.6",
     "@radix-ui/react-tabs": "1.1.13",
     "@radix-ui/react-toggle": "1.1.10",
     "@radix-ui/react-toggle-group": "1.1.11",
     "@radix-ui/react-tooltip": "1.2.8",
-    "@radix-ui/react-visually-hidden": "1.2.3",
-    "@scalar/openapi-parser": "0.22.3",
-    "@sentry/node": "9.26.0",
-    "@shikijs/engine-javascript": "3.14.0",
-    "@shikijs/langs": "3.14.0",
-    "@shikijs/rehype": "3.14.0",
-    "@shikijs/themes": "3.14.0",
-    "@shikijs/transformers": "3.14.0",
+    "@radix-ui/react-visually-hidden": "1.2.4",
+    "@scalar/openapi-parser": "0.23.2",
+    "@sentry/node": "10.27.0",
+    "@shikijs/engine-javascript": "3.20.0",
+    "@shikijs/langs": "3.20.0",
+    "@shikijs/rehype": "3.20.0",
+    "@shikijs/themes": "3.20.0",
+    "@shikijs/transformers": "3.20.0",
     "@sindresorhus/slugify": "3.0.0",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
-    "@tailwindcss/typography": "0.5.16",
-    "@tailwindcss/vite": "4.1.11",
+    "@tailwindcss/typography": "0.5.19",
+    "@tailwindcss/vite": "4.1.16",
     "@tanem/react-nprogress": "5.0.56",
-    "@tanstack/react-query": "5.85.5",
-    "@types/react": "19.2.0",
-    "@types/react-dom": "19.2.0",
-    "@vitejs/plugin-react": "5.0.4",
+    "@tanstack/react-query": "5.90.12",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.0",
+    "@x0k/json-schema-merge": "1.0.2",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
     "@zuplo/mcp": "^0.0.22",
-    "allof-merge": "0.6.7",
+    "bs58": "^6.0.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
+    "dotenv": "^17.2.3",
     "embla-carousel-react": "8.6.0",
     "estree-util-value-to-estree": "3.4.1",
-    "express": "5.1.0",
+    "express": "5.2.1",
     "fast-equals": "5.2.2",
-    "glob": "11.0.3",
+    "glob": "13.0.0",
     "glob-parent": "6.0.2",
-    "graphql": "16.11.0",
+    "graphql": "16.12.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.16.0",
     "gray-matter": "4.0.3",
@@ -209,20 +224,20 @@
     "json-schema-to-typescript-lite": "15.0.0",
     "loglevel": "1.9.2",
     "lucide-react": "0.548.0",
-    "motion": "12.23.12",
+    "motion": "12.23.24",
     "nanoevents": "^9.1.0",
     "next-themes": "0.4.6",
     "oauth4webapi": "2.17.0",
     "openapi-types": "12.1.3",
-    "pagefind": "1.4.0-alpha.1",
+    "pagefind": "1.5.0-beta.1",
     "picocolors": "1.1.1",
-    "piscina": "5.1.3",
-    "posthog-node": "5.7.0",
+    "piscina": "5.1.4",
+    "posthog-node": "5.14.1",
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.66.0",
-    "react-is": "19.2.0",
+    "react-is": "19.2.3",
     "react-markdown": "10.1.0",
-    "react-router": "7.8.2",
+    "react-router": "7.12.0",
     "rehype-mdx-import-media": "1.2.0",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
@@ -234,11 +249,11 @@
     "remark-mdx-frontmatter": "5.2.0",
     "rollup": "4.52.5",
     "semver": "7.7.2",
-    "shiki": "3.14.0",
-    "sitemap": "8.0.0",
+    "shiki": "3.20.0",
+    "sitemap": "9.0.0",
     "strip-ansi": "7.1.2",
-    "tailwind-merge": "3.3.1",
-    "tailwindcss": "4.1.11",
+    "tailwind-merge": "3.4.0",
+    "tailwindcss": "4.1.18",
     "tw-animate-css": "1.4.0",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
@@ -251,40 +266,44 @@
     "zustand": "5.0.8"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "6.0.1",
+    "@graphql-codegen/cli": "6.1.0",
     "@inkeep/cxkit-types": "0.5.101",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@types/estree": "1.0.8",
-    "@types/express": "5.0.3",
+    "@types/express": "5.0.6",
     "@types/glob-parent": "5.1.3",
     "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",
     "@types/json-schema": "7.0.15",
     "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
-    "@types/node": "22.13.5",
+    "@types/node": "22.19.1",
     "@types/react-is": "19.2.0",
     "@types/semver": "7.7.0",
     "@types/unist": "^3.0.3",
-    "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "3.2.4",
-    "esbuild": "0.25.11",
+    "@types/yargs": "17.0.35",
+    "@vitest/coverage-v8": "4.0.16",
+    "esbuild": "0.27.0",
     "happy-dom": "20.0.10",
     "mdast-util-mdx": "3.0.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "rollup-plugin-visualizer": "6.0.3",
-    "tsx": "4.20.4",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "rollup-plugin-visualizer": "6.0.5",
+    "tsx": "4.20.6",
     "typescript": "5.9.3",
-    "vitest": "3.2.4"
+    "vitest": "4.0.15"
   },
   "peerDependencies": {
     "@azure/msal-browser": "^4.13.0",
     "@clerk/clerk-js": "^5.63.1",
-    "@sentry/react": "^9.12.0",
+    "@sentry/react": "^10.0.0",
+    "@supabase/auth-ui-react": "^0.4.0",
+    "@supabase/auth-ui-shared": "^0.1.0",
     "@supabase/supabase-js": "^2.49.4",
+    "firebase": "^12.6.0",
+    "mermaid": "^11.0.0",
     "react": ">=19.2.0",
     "react-dom": ">=19.2.0"
   },
@@ -300,6 +319,18 @@
     },
     "@supabase/supabase-js": {
       "optional": true
+    },
+    "@supabase/auth-ui-react": {
+      "optional": true
+    },
+    "@supabase/auth-ui-shared": {
+      "optional": true
+    },
+    "firebase": {
+      "optional": true
+    },
+    "mermaid": {
+      "optional": true
     }
   },
   "scripts": {

package/src/app/entry.server.tsx

@@ -122,12 +122,22 @@ export const render = async ({
             !query.queryKey.includes(NO_DEHYDRATE),
         });
 
-        response.end(
-          htmlEnd?.replace(
-            "</body>",
-            `<script>window.DATA=${JSON.stringify(dehydrated)}</script></body>`,
-          ),
-        );
+        if (!htmlEnd) return response.end();
+
+        const closingTag = "</body>";
+        const idx = htmlEnd.lastIndexOf(closingTag);
+
+        if (idx === -1) return response.end(htmlEnd);
+
+        const serialized = JSON.stringify(dehydrated)
+          .replace(/</g, "\\u003c")
+          .replace(/>/g, "\\u003e");
+
+        response.write(htmlEnd.slice(0, idx));
+        response.write("<script>window.DATA=");
+        response.write(serialized);
+        response.write("</script>");
+        response.end(htmlEnd.slice(idx));
       });
 
       pipe(transformStream);

package/src/app/main.css

@@ -7,6 +7,48 @@
 @plugin "@tailwindcss/typography";
 @custom-variant dark (&:is(.dark *));
 
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+}
+
 @utility prose {
   a {
     @apply font-normal underline-offset-4 hover:text-primary;
@@ -37,6 +79,23 @@
   ol > li {
     @apply my-2.5;
   }
+
+  header:has(h1) {
+    & + p {
+      @apply my-0;
+    }
+  }
+
+  h2 {
+    @apply mt-8 mb-4;
+  }
+
+  ul.contains-task-list {
+    @apply list-none px-0;
+    li {
+      @apply my-1 flex items-center gap-1.5;
+    }
+  }
 }
 
 @layer base {
@@ -96,7 +155,8 @@
   }
 
   ::selection {
-    @apply bg-primary text-primary-foreground;
+    background: var(--color-primary);
+    color: var(--color-primary-foreground);
   }
 
   .bg-primary::selection,
@@ -114,14 +174,6 @@
     cursor: pointer;
   }
 
-  .prose.prose {
-    ul.contains-task-list {
-      @apply list-none px-0;
-      li {
-        @apply flex items-center gap-2;
-      }
-    }
-  }
 
   .shiki {
     counter-reset: line;

package/src/app/main.tsx

@@ -90,7 +90,11 @@ export const getRoutesByOptions = (
           }))
         : [],
     )
-    .concat([{ path: "*", element: <StatusPage statusCode={404} /> }]);
+    .concat([{ path: "*", element: <StatusPage statusCode={404} /> }])
+    .map((route) => ({
+      ...route,
+      errorElement: <RouterError className="w-full m-0" />,
+    }));
 
   // @TODO Detect conflicts in routes and log warning
 

package/src/app/sentry.ts

@@ -11,7 +11,7 @@ export const initSentry = ({ dsn }: { dsn: string }) => {
   Sentry.init({
     dsn,
     integrations: [
-      Sentry.reactRouterV6BrowserTracingIntegration({
+      Sentry.reactRouterV7BrowserTracingIntegration({
         useEffect,
         useLocation,
         useNavigationType,

package/src/lib/auth/issuer.ts

@@ -31,6 +31,9 @@ export const getIssuer = async (config: ZudokuConfig) => {
     case "azureb2c": {
       return config.authentication.issuer;
     }
+    case "firebase": {
+      return `https://securetoken.google.com/${config.authentication.projectId}`;
+    }
     case undefined: {
       return undefined;
     }

package/src/lib/authentication/authentication.ts

@@ -1,11 +1,35 @@
+import type { NavigateFunction } from "react-router";
+import type { ZudokuContext } from "../core/ZudokuContext.js";
+
+export type AuthActionContext = { navigate: NavigateFunction };
+export type AuthActionOptions = { redirectTo?: string; replace?: boolean };
+
 export interface AuthenticationPlugin {
-  signUp(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
-  signIn(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
-  signOut(): Promise<void>;
-  // @deprecated use signRequest instead
-  getAccessToken(): Promise<string>;
+  initialize?(context: ZudokuContext): Promise<void>;
   onPageLoad?(): void;
+  setNavigate?(navigate: NavigateFunction): void;
+
+  signUp(
+    { navigate }: AuthActionContext,
+    options?: AuthActionOptions,
+  ): Promise<void>;
+  signIn(
+    { navigate }: AuthActionContext,
+    options?: AuthActionOptions,
+  ): Promise<void>;
+
+  signOut({ navigate }: AuthActionContext): Promise<void>;
+
   signRequest(request: Request): Promise<Request>;
+  requestEmailVerification?(
+    { navigate }: AuthActionContext,
+    options?: AuthActionOptions,
+  ): Promise<void>;
+
+  /**
+   * @deprecated use signRequest instead
+   */
+  getAccessToken?(): Promise<string>;
 }
 
 export type AuthenticationProviderInitializer<TConfig> = (

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -13,7 +13,7 @@ export function CallbackHandler({
   const { options } = useZudoku();
   const executeCallback = useSuspenseQuery({
     retry: false,
-    queryKey: ["oauth-callback"],
+    queryKey: ["oauth-callback", window.location.search],
     queryFn: async () => {
       const url = new URL(window.location.href);
 

package/src/lib/authentication/components/OAuthErrorPage.tsx

@@ -106,7 +106,7 @@ export function OAuthErrorPage({ error }: { error: unknown }) {
               type === "invalid_grant" ||
               type === "token_expired") && (
               <Button
-                onClick={login}
+                onClick={() => login()}
                 className="w-full capitalize"
                 variant={"default"}
               >

package/src/lib/authentication/components/SignIn.tsx

@@ -8,17 +8,22 @@ import {
   CardHeader,
   CardTitle,
 } from "zudoku/ui/Card.js";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
 
 export const SignIn = () => {
-  const context = useZudoku();
+  const auth = useAuth();
   const [search] = useSearchParams();
+  const redirectTo = search.get("redirect") ?? undefined;
+
+  const login = useLatest(auth.login);
+
   useEffect(() => {
-    void context.authentication?.signIn({
-      redirectTo: search.get("redirect") ?? undefined,
+    void login.current({
+      redirectTo,
       replace: true,
     });
-  }, [context.authentication, search]);
+  }, [login, redirectTo]);
 
   return (
     <div className="flex items-center justify-center mt-8">

package/src/lib/authentication/components/SignOut.tsx

@@ -1,14 +1,15 @@
 import { useEffect } from "react";
-import { useNavigate } from "react-router";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
 
 export const SignOut = () => {
-  const context = useZudoku();
-  const navigate = useNavigate();
+  const auth = useAuth();
+
+  const logout = useLatest(auth.logout);
 
   useEffect(() => {
-    void context.authentication?.signOut().then(() => navigate("/"));
-  }, [context.authentication, navigate]);
+    void logout.current();
+  }, [logout]);
 
   return null;
 };

package/src/lib/authentication/components/SignUp.tsx

@@ -7,14 +7,17 @@ import {
   CardHeader,
   CardTitle,
 } from "zudoku/ui/Card.js";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
 
 export const SignUp = () => {
-  const context = useZudoku();
+  const auth = useAuth();
+
+  const signup = useLatest(auth.signup);
 
   useEffect(() => {
-    void (context.authentication?.signUp() ?? context.authentication?.signIn());
-  }, [context.authentication]);
+    void signup.current();
+  }, [signup]);
 
   return (
     <div className="flex items-center justify-center mt-8">
@@ -28,10 +31,7 @@ export const SignUp = () => {
         </CardHeader>
         <CardContent>
           <div className="flex flex-col gap-2 justify-center">
-            <Button
-              onClick={() => context.authentication?.signIn()}
-              variant="default"
-            >
+            <Button onClick={() => auth.signup()} variant="default">
               Register
             </Button>
             <Button variant="link" className="text-muted-foreground" asChild>

package/src/lib/authentication/hook.ts

@@ -1,4 +1,6 @@
+import { useNavigate } from "react-router";
 import { useZudoku } from "../components/context/ZudokuContext.js";
+import type { AuthActionOptions } from "./authentication.js";
 import { useAuthState } from "./state.js";
 
 export type UseAuthReturn = ReturnType<typeof useAuth>;
@@ -7,19 +9,24 @@ export const useAuth = () => {
   const { authentication } = useZudoku();
   const authState = useAuthState();
   const isAuthEnabled = typeof authentication !== "undefined";
+  const navigate = useNavigate();
 
   return {
     isAuthEnabled,
     ...authState,
 
-    login: async () => {
+    login: async (options?: AuthActionOptions) => {
       if (!isAuthEnabled) {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.signIn({
-        redirectTo: window.location.href,
-      });
+      await authentication.signIn(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
     },
 
     logout: async () => {
@@ -27,19 +34,39 @@ export const useAuth = () => {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.signOut();
+      await authentication.signOut({ navigate });
 
       // Redirect to home
-      window.location.href = "/";
+      void navigate("/", { replace: true });
     },
 
-    signup: async () => {
+    signup: async (options?: AuthActionOptions) => {
       if (!isAuthEnabled) {
         throw new Error("Authentication is not enabled.");
       }
-      await authentication.signUp({
-        redirectTo: window.location.href,
-      });
+      await authentication.signUp(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
+    },
+    supportsEmailVerification:
+      typeof authentication?.requestEmailVerification === "function",
+
+    requestEmailVerification: async (options?: AuthActionOptions) => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+
+      await authentication.requestEmailVerification?.(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
     },
   };
 };