zudoku 0.0.0-feat-openapi-docs-redesign.dab3fc6a → 0.0.0-feat-navigation-at-property.z8cd07fa5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-feat-openapi-docs-redesign.dab3fc6a",
+  "version": "0.0.0-feat-navigation-at-property.z8cd07fa5",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -18,6 +18,7 @@
     "src/lib",
     "src/app",
     "src/shiki",
+    "src/zuplo",
     "client.d.ts"
   ],
   "bin": {
@@ -59,6 +60,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 +108,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 +120,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"
@@ -171,35 +184,37 @@
     "@radix-ui/react-tooltip": "1.2.8",
     "@radix-ui/react-visually-hidden": "1.2.4",
     "@scalar/openapi-parser": "0.23.2",
-    "@sentry/node": "9.26.0",
-    "@shikijs/engine-javascript": "3.15.0",
-    "@shikijs/langs": "3.15.0",
-    "@shikijs/rehype": "3.15.0",
-    "@shikijs/themes": "3.15.0",
-    "@shikijs/transformers": "3.15.0",
+    "@sentry/node": "10.27.0",
+    "@shikijs/engine-javascript": "3.21.0",
+    "@shikijs/langs": "3.21.0",
+    "@shikijs/rehype": "3.21.0",
+    "@shikijs/themes": "3.21.0",
+    "@shikijs/transformers": "3.21.0",
     "@sindresorhus/slugify": "3.0.0",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
     "@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",
+    "@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",
+    "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.1.0",
+    "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",
@@ -210,20 +225,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.21.2",
     "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",
@@ -235,11 +250,11 @@
     "remark-mdx-frontmatter": "5.2.0",
     "rollup": "4.52.5",
     "semver": "7.7.2",
-    "shiki": "3.15.0",
+    "shiki": "3.21.0",
     "sitemap": "9.0.0",
     "strip-ansi": "7.1.2",
-    "tailwind-merge": "3.3.1",
-    "tailwindcss": "4.1.16",
+    "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",
@@ -248,50 +263,58 @@
     "vite": "6.4.1",
     "yaml": "2.8.1",
     "yargs": "18.0.0",
-    "zod": "4.1.12",
+    "zod": "4.3.6",
     "zustand": "5.0.8"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "6.0.1",
-    "@inkeep/cxkit-types": "0.5.101",
+    "@graphql-codegen/cli": "6.1.0",
+    "@inkeep/cxkit-types": "0.5.113",
     "@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": "4.0.6"
+    "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"
   },
+  "typesVersions": {
+    "*": {
+      "ui/*": [
+        "./src/lib/ui/*"
+      ]
+    }
+  },
   "peerDependenciesMeta": {
     "@azure/msal-browser": {
       "optional": true
@@ -313,11 +336,14 @@
     },
     "firebase": {
       "optional": true
+    },
+    "mermaid": {
+      "optional": true
     }
   },
   "scripts": {
     "build": "tsc --project tsconfig.app.json",
-    "build:dev": "esbuild './src/**/*.ts' --format=esm --platform=node --target=node22 --outdir=dist --splitting --log-level=warning",
+    "build:dev": "esbuild './src/**/*.ts' './src/**/*.tsx' --format=esm --platform=node --target=node22 --outdir=dist --splitting --log-level=warning",
     "build:vite": "vite build",
     "generate:types": "tsx scripts/generate-types.js && tsx scripts/generate-flat-config.js",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",

package/src/app/defaultTheme.css

@@ -20,6 +20,8 @@
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.47 0.14 46.2);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
   --ring: oklch(0.705 0.015 286.067);
@@ -54,6 +56,8 @@
   --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.552 0.016 285.938);

package/src/app/main.css

@@ -8,6 +8,8 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);

package/src/app/main.tsx

@@ -111,7 +111,7 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
   return [
     {
       element: (
-        <Zudoku {...options}>
+        <Zudoku {...options} env={import.meta.env}>
           <BuildCheck
             buildId={import.meta.env.ZUPLO_BUILD_ID}
             environmentType={import.meta.env.ZUPLO_ENVIRONMENT_TYPE}

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

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

package/src/lib/authentication/authentication.ts

@@ -6,6 +6,7 @@ export type AuthActionOptions = { redirectTo?: string; replace?: boolean };
 
 export interface AuthenticationPlugin {
   initialize?(context: ZudokuContext): Promise<void>;
+  onPageLoad?(): void;
   setNavigate?(navigate: NavigateFunction): void;
 
   signUp(
@@ -18,12 +19,17 @@ export interface AuthenticationPlugin {
   ): 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>;
-  onPageLoad?(): void;
-  signRequest(request: Request): Promise<Request>;
 }
 
 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/SignIn.tsx

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

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

@@ -7,14 +7,17 @@ import {
   CardHeader,
   CardTitle,
 } from "zudoku/ui/Card.js";
+import { useLatest } from "../../util/useLatest.js";
 import { useAuth } from "../hook.js";
 
 export const SignUp = () => {
   const auth = useAuth();
 
+  const signup = useLatest(auth.signup);
+
   useEffect(() => {
-    void auth.signup();
-  }, [auth]);
+    void signup.current();
+  }, [signup]);
 
   return (
     <div className="flex items-center justify-center mt-8">

package/src/lib/authentication/hook.ts

@@ -52,5 +52,21 @@ export const useAuth = () => {
         },
       );
     },
+    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,
+        },
+      );
+    },
   };
 };

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

@@ -1,4 +1,5 @@
 import type { Auth0AuthenticationConfig } from "../../../config/config.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import type {
   AuthActionContext,
   AuthenticationPlugin,
@@ -28,9 +29,14 @@ class Auth0AuthenticationProvider
     url: URL,
     { isSignUp }: { isSignUp: boolean },
   ) => {
-    if (this.options?.alwaysPromptLogin !== false) {
+    if (this.options?.prompt !== undefined) {
+      if (this.options.prompt !== "") {
+        url.searchParams.set("prompt", this.options.prompt);
+      }
+    } else if (this.options?.alwaysPromptLogin !== false) {
       url.searchParams.set("prompt", "login");
     }
+
     if (isSignUp) {
       url.searchParams.set("screen_hint", "signup");
     }
@@ -38,7 +44,10 @@ class Auth0AuthenticationProvider
 
   signOut = async (_: AuthActionContext): Promise<void> => {
     const as = await this.getAuthServer();
-    const idToken = await this.getAccessToken();
+
+    // biome-ignore lint/suspicious/noExplicitAny: We don't have a good way for typing provider-data yet.
+    const providerData = useAuthState.getState().providerData as any;
+    const idToken = providerData?.idToken;
 
     useAuthState.setState({
       isAuthenticated: false,
@@ -48,15 +57,18 @@ class Auth0AuthenticationProvider
     });
 
     const redirectUrl = new URL(window.location.origin);
-    redirectUrl.pathname = this.redirectToAfterSignOut;
+    redirectUrl.pathname = joinUrl(
+      import.meta.env.BASE_URL,
+      this.redirectToAfterSignOut,
+    );
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
     // For Auth0 tenants created on or after 14 November 2023, RP-Initiated
     // Logout End Session Endpoint Discovery is enabled by default.
     // Otherwise we fallback to the old non-compliant logout
 
-    // The endSessionEndpoint is set, the IdP supports some form of logout,
-    // so we use the IdP logout. Otherwise, just redirect the user to home
+    // The end_session_endpoint is set, the IdP supports some form of logout,
+    // so we use auth0 logout. Otherwise, just redirect the user to home
     if (as.end_session_endpoint) {
       const logoutUrl = new URL(as.end_session_endpoint);
       if (idToken) {
@@ -67,12 +79,11 @@ class Auth0AuthenticationProvider
         redirectUrl.toString(),
       );
 
-      // window.location.href = logoutUrl.toString();
+      window.location.href = logoutUrl.toString();
     } else {
-      const _logoutUrl = new URL(
-        `${this.issuer.replace(/\/$/, "")}/oidc/logout`,
-      );
-      // window.location.href = logoutUrl.toString();
+      // const logoutUrl = new URL(`${this.issuer.replace(/\/$/, "")}/v2/logout`);
+      // logoutUrl.searchParams.set("returnTo", redirectUrl.toString());
+      // don't support the deprecated logout today
     }
   };
 }

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

@@ -29,32 +29,6 @@ const clerkAuth: AuthenticationProviderInitializer<
 
     await clerkApi.load();
 
-    if (clerkApi.user) {
-      const verifiedEmail = clerkApi.user.emailAddresses.find(
-        (email) => email.verification.status === "verified",
-      );
-      useAuthState.getState().setLoggedIn({
-        profile: {
-          sub: clerkApi.user.id,
-          name: clerkApi.user.fullName ?? undefined,
-          email:
-            verifiedEmail?.emailAddress ??
-            clerkApi.user.emailAddresses[0]?.emailAddress,
-          emailVerified: verifiedEmail !== undefined,
-          pictureUrl: clerkApi.user.imageUrl,
-        },
-        providerData: {
-          user: {
-            publicMetadata: clerkApi.user.publicMetadata,
-            id: clerkApi.user.id,
-            emailAddresses: clerkApi.user.emailAddresses,
-            imageUrl: clerkApi.user.imageUrl,
-            fullName: clerkApi.user.fullName,
-          },
-        },
-      });
-    }
-
     return clerkApi;
   })();