zudoku 0.65.3 → 0.66.0

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 { Location, RouteObject } from \"react-router\";\nimport type { Navigation } from \"../../config/validators/NavigationSchema.js\";\nimport type { ProtectedRoutesInput } from \"../../config/validators/ProtectedRoutesSchema.js\";\nimport type { AuthenticationPlugin } from \"../authentication/authentication.js\";\nimport type { MdxComponentsType } from \"../util/MdxComponents.js\";\nimport type {\n  ApiIdentity,\n  ZudokuContext,\n  ZudokuEvents,\n} from \"./ZudokuContext.js\";\n\nexport type ZudokuPlugin =\n  | CommonPlugin\n  | ProfileMenuPlugin\n  | NavigationPlugin\n  | ApiIdentityPlugin\n  | SearchProviderPlugin\n  | EventConsumerPlugin\n  | AuthenticationPlugin;\n\nexport type { AuthenticationPlugin, RouteObject };\n\nexport interface NavigationPlugin {\n  getRoutes: () => RouteObject[];\n  getNavigation?: (path: string, context: ZudokuContext) => Promise<Navigation>;\n  getProtectedRoutes?: () => ProtectedRoutesInput;\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?: ({ location }: { location: Location }) => 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 isAuthenticationPlugin = (\n  obj: ZudokuPlugin,\n): obj is AuthenticationPlugin =>\n  \"signUp\" in obj && typeof obj.signUp === \"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","isAuthenticationPlugin","isSearchPlugin","needsInitialization","hasHead","isMdxProviderPlugin","isApiIdentityPlugin"],"mappings":"AA8BO,MAAMA,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,IAAyB,CACpCH,MAEA,YAAYA,KAAO,OAAOA,EAAI,UAAW,YAE9BI,IAAiB,CAC5BJ,MAEA,kBAAkBA,KAAO,OAAOA,EAAI,gBAAiB,YAE1CK,IAAsB,CAACL,MAClC,gBAAgBA,KAAO,OAAOA,EAAI,cAAe,YAEtCM,IAAU,CAACN,MACtB,aAAaA,KAAO,OAAOA,EAAI,WAAY,YAEhCO,IAAsB,CAACP,MAClC,sBAAsBA,KAAO,OAAOA,EAAI,oBAAqB,YAElDQ,IAAsB,CACjCR,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 { ReactNode } from \"react\";\nimport type { Location, RouteObject } from \"react-router\";\nimport type { Navigation } from \"../../config/validators/NavigationSchema.js\";\nimport type { ProtectedRoutesInput } from \"../../config/validators/ProtectedRoutesSchema.js\";\nimport type { AuthenticationPlugin } from \"../authentication/authentication.js\";\nimport type { MdxComponentsType } from \"../util/MdxComponents.js\";\nimport type {\n  ApiIdentity,\n  ZudokuContext,\n  ZudokuEvents,\n} from \"./ZudokuContext.js\";\n\nexport type ZudokuPlugin =\n  | CommonPlugin\n  | ProfileMenuPlugin\n  | NavigationPlugin\n  | ApiIdentityPlugin\n  | SearchProviderPlugin\n  | EventConsumerPlugin\n  | AuthenticationPlugin;\n\nexport type { AuthenticationPlugin, RouteObject };\n\nexport interface NavigationPlugin {\n  getRoutes: () => RouteObject[];\n  getNavigation?: (path: string, context: ZudokuContext) => Promise<Navigation>;\n  getProtectedRoutes?: () => ProtectedRoutesInput;\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?: (args: { location: Location }) => ReactNode | 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 isAuthenticationPlugin = (\n  obj: ZudokuPlugin,\n): obj is AuthenticationPlugin =>\n  \"signUp\" in obj && typeof obj.signUp === \"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","isAuthenticationPlugin","isSearchPlugin","needsInitialization","hasHead","isMdxProviderPlugin","isApiIdentityPlugin"],"mappings":"AA8BO,MAAMA,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,IAAyB,CACpCH,MAEA,YAAYA,KAAO,OAAOA,EAAI,UAAW,YAE9BI,IAAiB,CAC5BJ,MAEA,kBAAkBA,KAAO,OAAOA,EAAI,gBAAiB,YAE1CK,IAAsB,CAACL,MAClC,gBAAgBA,KAAO,OAAOA,EAAI,cAAe,YAEtCM,IAAU,CAACN,MACtB,aAAaA,KAAO,OAAOA,EAAI,WAAY,YAEhCO,IAAsB,CAACP,MAClC,sBAAsBA,KAAO,OAAOA,EAAI,oBAAqB,YAElDQ,IAAsB,CACjCR,MAEA,mBAAmBA,KAAO,OAAOA,EAAI,iBAAkB;"}

package/lib/zudoku.router.js

@@ -1,5 +1,5 @@
-import { f as We, s as $, g as ve, F as j, R as qe, S as Se, h as Ge, c as Xe, E as D, j as Ee, k as X, l as U, n as Ye, o as oe, p as Je, q as Ke, t as _e, v as Qe, w as be, x as Ce, i as A, y as De, z as Ze, A as C, B as et, C as tt, D as rt, G as at, O as nt, H as L, I as ot, J as st, K as it, M as lt, P as T, Q as ut, T as dt, r as ct, U as Z, V as ft, W as ht, X as pt, Y as mt, Z as yt, _ as Rt, $ as wt, a0 as gt, a1 as vt } from "./chunk-PVWAREVJ-BMhpCH5D.js";
-import { a2 as Ur, a3 as Mr, a4 as Nr, a5 as Or, a6 as zr, a7 as Br, a8 as $r, L as jr, a9 as Vr, aa as Wr, ab as qr, ac as Gr, N as Xr, ad as Yr, ae as Jr, af as Kr, ag as Qr, ah as Zr, ai as ea, aj as ta, ak as ra, al as aa, am as na, an as oa, ao as sa, ap as ia, aq as la, ar as ua, as as da, at as ca, au as fa, av as ha, aw as pa, ax as ma, ay as ya, az as Ra, aA as wa, aB as ga, aC as va, aD as Sa, aE as Ea, aF as _a, aG as ba, aH as Ca, aI as Da, aJ as Aa, aK as xa, aL as Fa, m as ka, aM as La, aN as Ta, aO as Ha, aP as Ia, aQ as Pa, aR as Ua, aS as Ma, aT as Na, aU as Oa, aV as za, aW as Ba, aX as $a, aY as ja, aZ as Va, a_ as Wa, a$ as qa, b0 as Ga, d as Xa, e as Ya, b1 as Ja, u as Ka, b2 as Qa, b3 as Za, b4 as en, b5 as tn, b as rn, b6 as an, b7 as nn, b8 as on, b9 as sn, a as ln, ba as un, bb as dn } from "./chunk-PVWAREVJ-BMhpCH5D.js";
+import { f as We, s as $, g as ve, F as j, R as qe, S as Se, h as Ge, d as Xe, E as D, j as Ee, k as X, l as U, n as Ye, o as oe, p as Je, q as Ke, t as _e, v as Qe, w as be, x as Ce, i as A, y as De, z as Ze, A as C, B as et, C as tt, D as rt, G as at, O as nt, H as L, I as ot, J as st, K as it, M as lt, P as T, Q as ut, T as dt, r as ct, U as Z, V as ft, W as ht, X as pt, Y as mt, Z as yt, _ as Rt, $ as wt, a0 as gt, a1 as vt } from "./chunk-PVWAREVJ-dLIqswPy.js";
+import { a2 as Ur, a3 as Mr, a4 as Nr, a5 as Or, a6 as zr, a7 as Br, a8 as $r, L as jr, a9 as Vr, aa as Wr, ab as qr, ac as Gr, N as Xr, ad as Yr, ae as Jr, af as Kr, ag as Qr, ah as Zr, ai as ea, aj as ta, ak as ra, al as aa, am as na, an as oa, ao as sa, ap as ia, aq as la, ar as ua, as as da, at as ca, au as fa, av as ha, aw as pa, ax as ma, ay as ya, az as Ra, aA as wa, aB as ga, aC as va, aD as Sa, aE as Ea, aF as _a, aG as ba, aH as Ca, aI as Da, aJ as Aa, aK as xa, aL as Fa, m as ka, aM as La, aN as Ta, aO as Ha, aP as Ia, aQ as Pa, aR as Ua, aS as Ma, aT as Na, aU as Oa, aV as za, aW as Ba, aX as $a, aY as ja, aZ as Va, a_ as Wa, a$ as qa, b0 as Ga, a as Xa, e as Ya, b1 as Ja, u as Ka, b2 as Qa, b3 as Za, b4 as en, b5 as tn, c as rn, b6 as an, b7 as nn, b8 as on, b9 as sn, b as ln, ba as un, bb as dn } from "./chunk-PVWAREVJ-dLIqswPy.js";
 import * as g from "react";
 import E from "react";
 import * as St from "react-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.65.3",
+  "version": "0.66.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -103,6 +103,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"
@@ -171,19 +175,19 @@
     "@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.17.0",
+    "@shikijs/langs": "3.17.0",
+    "@shikijs/rehype": "3.17.0",
+    "@shikijs/themes": "3.17.0",
+    "@shikijs/transformers": "3.17.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": "19.2.7",
     "@types/react-dom": "19.2.0",
     "@vitejs/plugin-react": "5.1.0",
     "@x0k/json-schema-merge": "1.0.2",
@@ -195,9 +199,9 @@
     "cmdk": "1.1.1",
     "embla-carousel-react": "8.6.0",
     "estree-util-value-to-estree": "3.4.1",
-    "express": "5.1.0",
+    "express": "5.2.0",
     "fast-equals": "5.2.2",
-    "glob": "11.1.0",
+    "glob": "13.0.0",
     "glob-parent": "6.0.2",
     "graphql": "16.12.0",
     "graphql-type-json": "0.3.2",
@@ -210,15 +214,15 @@
     "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.4.0",
     "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",
@@ -235,7 +239,7 @@
     "remark-mdx-frontmatter": "5.2.0",
     "rollup": "4.52.5",
     "semver": "7.7.2",
-    "shiki": "3.15.0",
+    "shiki": "3.17.0",
     "sitemap": "9.0.0",
     "strip-ansi": "7.1.2",
     "tailwind-merge": "3.3.1",
@@ -252,13 +256,13 @@
     "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.5",
     "@types/glob-parent": "5.1.3",
     "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",
@@ -271,24 +275,25 @@
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.35",
     "@vitest/coverage-v8": "3.2.4",
-    "esbuild": "0.25.11",
+    "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",
+    "rollup-plugin-visualizer": "6.0.5",
+    "tsx": "4.20.6",
     "typescript": "5.9.3",
     "vitest": "4.0.6"
   },
   "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"
   },
@@ -313,6 +318,9 @@
     },
     "firebase": {
       "optional": true
+    },
+    "mermaid": {
+      "optional": true
     }
   },
   "scripts": {

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/components/Mermaid.tsx

@@ -0,0 +1,68 @@
+import { useQuery } from "@tanstack/react-query";
+import type { MermaidConfig } from "mermaid";
+import type { ComponentProps } from "react";
+import { useId } from "react";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { useTheme } from "../hooks/index.js";
+import { Spinner } from "./Spinner.js";
+
+export type MermaidProps = {
+  chart: string;
+  config?: MermaidConfig;
+} & ComponentProps<"div">;
+
+let mermaidPromise: Promise<typeof import("mermaid").default> | null = null;
+
+const loadMermaid = () => {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid")
+      .then((mod) => mod.default)
+      .catch((error) => {
+        throw new Error(
+          "Mermaid is not installed. Please install it with: npm install mermaid",
+          { cause: error },
+        );
+      });
+  }
+  return mermaidPromise;
+};
+
+export const Mermaid = ({ chart, config, ...props }: MermaidProps) => {
+  const id = useId();
+  const theme = useTheme();
+
+  const {
+    data: svg,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["mermaid", chart, config, theme.resolvedTheme],
+    queryFn: async () => {
+      const mermaid = await loadMermaid();
+      mermaid.initialize({
+        theme: theme.resolvedTheme === "dark" ? "dark" : "base",
+        ...config,
+      });
+
+      const { svg } = await mermaid.render(id, chart);
+      return svg;
+    },
+    enabled: typeof window !== "undefined",
+    retry: false,
+  });
+
+  if (error)
+    return (
+      <Alert className="flex flex-col gap-2" variant="destructive">
+        <AlertTitle>Mermaid Error</AlertTitle>
+        <AlertDescription className="overflow-auto wrap-break-word whitespace-pre-wrap font-mono text-xs">
+          {error.message}
+        </AlertDescription>
+      </Alert>
+    );
+
+  if (isPending) return <Spinner />;
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid generates valid SVG
+  return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
+};

package/src/lib/components/PagefindSearchMeta.tsx

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from "react";
+
+/**
+ * Adds metadata to be captured by Pagefind for search results.
+ * Content is visually hidden but indexed by the search engine.
+ */
+export const PagefindSearchMeta = ({
+  name,
+  children,
+}: PropsWithChildren<{ name?: string }>) => (
+  <span data-pagefind-meta={name} className="sr-only">
+    {children}
+  </span>
+);

package/src/lib/components/Zudoku.tsx

@@ -74,16 +74,13 @@ const ZudokuInner = memo(
 
     zudokuContext ??= new ZudokuContext(props, queryClient);
 
-    const heads = props.plugins
-      ?.flatMap((plugin) =>
-        hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
-      )
-      // biome-ignore lint/suspicious/noArrayIndexKey: No other key is available
-      .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
+    const heads = props.plugins?.flatMap((plugin) =>
+      hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
+    );
 
     return (
       <>
-        {heads}
+        <Helmet>{heads}</Helmet>
         <StaggeredRenderContext.Provider value={staggeredValue}>
           <ZudokuProvider context={zudokuContext}>
             <RouterEventsEmitter />

package/src/lib/core/RouteGuard.tsx

@@ -101,7 +101,7 @@ export const RouteGuard = () => {
 
   return (
     <>
-      {shouldBypass && (
+      {shouldBypass && isProtectedRoute && (
         <Helmet>
           <meta
             name="pagefind"

package/src/lib/core/plugins.ts

@@ -1,5 +1,5 @@
 import type { LucideIcon } from "lucide-react";
-import type { ReactElement } from "react";
+import type { ReactNode } from "react";
 import type { Location, RouteObject } from "react-router";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
 import type { ProtectedRoutesInput } from "../../config/validators/ProtectedRoutesSchema.js";
@@ -64,7 +64,7 @@ export interface CommonPlugin {
   initialize?: (
     context: ZudokuContext,
   ) => Promise<void | boolean> | void | boolean;
-  getHead?: ({ location }: { location: Location }) => ReactElement | undefined;
+  getHead?: (args: { location: Location }) => ReactNode | undefined;
   getMdxComponents?: () => MdxComponentsType;
 }
 

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

@@ -25,6 +25,8 @@ export type TagObject = DeepOmitReference<OpenAPIV3_1.TagObject>;
 export type ExampleObject = DeepOmitReference<OpenAPIV3_1.ExampleObject>;
 export type EncodingObject = DeepOmitReference<OpenAPIV3_1.EncodingObject>;
 export type SchemaObject = DeepOmitReference<OpenAPIV3_1.SchemaObject>;
+export type ArraySchemaObject =
+  DeepOmitReference<OpenAPIV3_1.ArraySchemaObject>;
 export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
 
 export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);

package/src/lib/plugins/openapi/DownloadSchemaButton.tsx

@@ -0,0 +1,115 @@
+import {
+  ChevronDownIcon,
+  CopyIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+} from "lucide-react";
+import type { MouseEventHandler } from "react";
+import { Button } from "zudoku/components";
+import { ButtonGroup } from "zudoku/ui/ButtonGroup.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
+import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
+import { ChatGPTLogo } from "../markdown/assets/ChatGPTLogo.js";
+import { ClaudeLogo } from "../markdown/assets/ClaudeLogo.js";
+
+export const DownloadSchemaButton = ({
+  downloadUrl,
+}: {
+  downloadUrl: string;
+}) => {
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const handleDownload: MouseEventHandler<HTMLAnchorElement> = async (e) => {
+    const isExternal = downloadUrl.includes("://");
+
+    if (!isExternal) return;
+
+    e.preventDefault();
+    try {
+      const response = await fetch(downloadUrl);
+      if (!response.ok)
+        throw new Error(`Failed to fetch: ${response.statusText}`);
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = downloadUrl.split("/").pop() || "schema.json";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      // biome-ignore lint/suspicious/noConsole: Logging error
+      console.error("Failed to download schema:", error);
+    }
+  };
+
+  return (
+    <ButtonGroup>
+      <Button
+        variant="outline"
+        size="sm"
+        className="flex items-center gap-1.5"
+        asChild
+      >
+        <a href={downloadUrl} download onClick={handleDownload}>
+          <DownloadIcon size={14} />
+          Download schema
+        </a>
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button size="sm" variant="outline" className="px-1.5">
+            <ChevronDownIcon size={14} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem asChild>
+            <a href={downloadUrl} target="_blank" rel="noopener noreferrer">
+              <ExternalLinkIcon size={14} />
+              Open in new tab
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={async () => {
+              const response = await fetch(downloadUrl);
+              const schema = await response.text();
+              copyToClipboard(schema);
+            }}
+          >
+            <CopyIcon size={14} />
+            Copy to clipboard
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => {
+              const prompt = encodeURIComponent(
+                `Help me understand this API: ${new URL(downloadUrl, window.location.href).href}`,
+              );
+              window.open(`https://claude.ai/new?q=${prompt}`, "_blank");
+            }}
+          >
+            <ClaudeLogo className="size-4" />
+            Use in Claude
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => {
+              const prompt = encodeURIComponent(
+                `Help me understand this API: ${new URL(downloadUrl, window.location.href).href}`,
+              );
+              window.open(`https://chatgpt.com/?q=${prompt}`, "_blank");
+            }}
+          >
+            <ChatGPTLogo className="size-4" />
+            Use in ChatGPT
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ButtonGroup>
+  );
+};

package/src/lib/plugins/openapi/Endpoint.tsx

@@ -32,7 +32,7 @@ const CopyButton = ({ url }: { url: string }) => {
         });
       }}
       variant="ghost"
-      size="icon"
+      size="icon-xs"
     >
       {isCopied ? (
         <CheckIcon className="text-green-600" size={14} />
@@ -53,40 +53,33 @@ export const Endpoint = () => {
   );
 
   const { servers } = result.data.schema;
-
   const firstServer = servers.at(0);
 
   if (!firstServer) return null;
 
-  if (servers.length === 1) {
-    return (
-      <div className="flex items-center gap-2">
-        <span className="font-medium text-sm">Endpoint:</span>
+  return (
+    <div className="flex items-center gap-1.5 flex-nowrap">
+      <span className="font-medium text-sm">Endpoint</span>
+      {servers.length > 1 ? (
+        <SimpleSelect
+          className="font-mono text-xs border-input bg-transparent dark:bg-input/30 dark:hover:bg-input/50 py-1.5 max-w-[450px] truncate"
+          onChange={(e) =>
+            startTransition(() => setSelectedServer(e.target.value))
+          }
+          value={selectedServer}
+          showChevrons={servers.length > 1}
+          options={servers.map((server) => ({
+            value: server.url,
+            label: server.url,
+          }))}
+        />
+      ) : (
         <InlineCode className="text-xs px-2 py-1.5" selectOnClick>
           {firstServer.url}
         </InlineCode>
-        <CopyButton url={firstServer.url} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-wrap items-center gap-2">
-      <span className="font-medium text-sm">Endpoint</span>
+      )}
 
-      <SimpleSelect
-        className="font-mono text-xs bg-border/50 dark:bg-border/70 py-1.5 max-w-[450px] truncate"
-        onChange={(e) =>
-          startTransition(() => setSelectedServer(e.target.value))
-        }
-        value={selectedServer}
-        showChevrons={servers.length > 1}
-        options={servers.map((server) => ({
-          value: server.url,
-          label: server.url,
-        }))}
-      />
-      <CopyButton url={selectedServer} />
+      <CopyButton url={servers.length > 1 ? selectedServer : firstServer.url} />
     </div>
   );
 };

package/src/lib/plugins/openapi/OasProvider.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from "react";
 import { Outlet } from "react-router";
-import { joinPath } from "../../util/joinPath.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import type { GraphQLClient } from "./client/GraphQLClient.js";
 import { GraphQLProvider } from "./client/GraphQLContext.js";
 import { OasConfigProvider } from "./context.js";
 import type { OasPluginConfig } from "./interfaces.js";
-import { getVersions } from "./util/getRoutes.js";
+import { getVersionMetadata } from "./util/getRoutes.js";
 
 export const OasProvider = ({
   basePath,
@@ -19,25 +19,38 @@ export const OasProvider = ({
   client: GraphQLClient;
 }) => {
   const value = useMemo(() => {
-    const versions = getVersions(config);
-    const firstVersion = Object.values(config.input).at(0);
-    const input =
-      config.type === "file"
-        ? {
-            type: config.type,
-            // biome-ignore lint/style/noNonNullAssertion: is guaranteed to be defined
-            input: version ? config.input[version]! : firstVersion!,
-          }
-        : { type: config.type, input: config.input };
+    const { versions: availableVersions, labels } = getVersionMetadata(config);
+    const currentVersion = version ?? availableVersions.at(0);
+
+    const versionLinks = Object.fromEntries(
+      availableVersions.map((id) => [
+        id,
+        { path: joinUrl(basePath, id), label: labels[id] ?? id },
+      ]),
+    );
+
+    const resolveInput = (): string | (() => Promise<unknown>) => {
+      if (!Array.isArray(config.input)) {
+        return config.input;
+      }
+
+      const versionConfig = currentVersion
+        ? config.input.find((v) => v.path === currentVersion)
+        : config.input[0];
+
+      if (!versionConfig) {
+        throw new Error(`No input found for version: ${currentVersion}`);
+      }
+
+      return versionConfig.input;
+    };
 
     return {
       config: {
         ...config,
-        version: version ?? versions.at(0),
-        versions: Object.fromEntries(
-          versions.map((version) => [version, joinPath(basePath, version)]),
-        ),
-        ...input,
+        version: currentVersion,
+        versions: versionLinks,
+        input: resolveInput(),
       },
     };
   }, [config, basePath, version]);