zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

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

@@ -1,11 +1,11 @@
 import type { TocEntry } from "@stefanprobst/rehype-extract-toc";
 import { ListTreeIcon } from "lucide-react";
 import {
+  type CSSProperties,
+  type PropsWithChildren,
   useEffect,
   useRef,
   useState,
-  type CSSProperties,
-  type PropsWithChildren,
 } from "react";
 import { cn } from "../../util/cn.js";
 import { AnchorLink } from "../AnchorLink.js";
@@ -85,11 +85,11 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
         <ListTreeIcon size={16} />
         On this page
       </div>
-      <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 end-auto bg-border w-[2px]" />
+      <div className="relative ms-px ps-4">
+        <div className="absolute inset-0 end-auto bg-border w-[1.5px]" />
         <div
           className={cn(
-            "absolute -start-px -translate-y-1 h-6 w-[4px] rounded-sm bg-primary",
+            "absolute start-0 -translate-y-1 h-6 w-[2.5px] bg-primary",
             paintedOnce.current &&
               "ease-out [transition:top_150ms,opacity_325ms]",
           )}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 
 const ZudokuLogo = (props: React.SVGProps<SVGSVGElement>) => (
   <svg

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

@@ -67,7 +67,6 @@ export const useIsCategoryOpen = (category: NavigationCategory) => {
       case "custom-page":
       case "doc":
         return joinUrl(item.path) === location.pathname ? true : undefined;
-      case "link":
       default:
         return undefined;
     }
@@ -75,14 +74,14 @@ export const useIsCategoryOpen = (category: NavigationCategory) => {
 };
 
 export const usePrevNext = (): {
-  prev?: { label: string; id: string };
-  next?: { label: string; id: string };
+  prev?: { label?: string; id: string };
+  next?: { label?: string; id: string };
 } => {
   const currentId = useLocation().pathname;
   const { navigation } = useCurrentNavigation();
 
-  let prev;
-  let next;
+  let prev: { label?: string; id: string } | undefined;
+  let next: { label?: string; id: string } | undefined;
 
   let foundCurrent = false;
 
@@ -134,7 +133,7 @@ export const navigationListItem = cva(
   },
 );
 
-export const isHiddenItem =
+export const shouldShowItem =
   (auth: UseAuthReturn, context: ZudokuContext) =>
   (item: NavigationItem): boolean => {
     if (typeof item.display === "function") {

package/src/lib/core/RouteGuard.tsx

@@ -1,11 +1,12 @@
-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 { Button } from "zudoku/ui/Button.js";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
@@ -37,17 +38,17 @@ export const RouteGuard = () => {
   const needsToSignIn =
     isProtectedRoute && !authCheckFn({ auth, context: zudoku });
 
-  useQuery({
-    queryKey: ["login-redirect"],
-    queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1200));
-      await zudoku.authentication?.signIn({
-        redirectTo: latestPath.current,
-      });
-      return true;
-    },
-    enabled: typeof window !== "undefined" && needsToSignIn && !auth.isPending,
-  });
+  if (isProtectedRoute && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
+  if (needsToSignIn && auth.isPending && typeof window !== "undefined") {
+    return null;
+  }
 
   if (needsToSignIn) {
     return (
@@ -61,24 +62,43 @@ export const RouteGuard = () => {
       >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Logging you in...</DialogTitle>
+            <DialogTitle>Login to continue</DialogTitle>
           </DialogHeader>
           <DialogDescription>
             Please wait while we log you in.
           </DialogDescription>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => void navigate(-1)}>
+              Cancel
+            </Button>
+            <div className="w-full"></div>
+            <Button
+              variant="secondary"
+              onClick={() =>
+                void zudoku.authentication?.signUp(
+                  { navigate },
+                  { redirectTo: latestPath.current },
+                )
+              }
+            >
+              Register
+            </Button>
+            <Button
+              onClick={() =>
+                void zudoku.authentication?.signIn(
+                  { navigate },
+                  { redirectTo: latestPath.current },
+                )
+              }
+            >
+              Login{" "}
+            </Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     );
   }
 
-  if (isProtectedRoute && !auth.isAuthEnabled) {
-    throw new ZudokuError("Authentication is not enabled", {
-      title: "Authentication is not enabled",
-      developerHint:
-        "To use protectedRoutes you need authentication to be enabled",
-    });
-  }
-
   return (
     <>
       {shouldBypass && (

package/src/lib/core/ZudokuContext.ts

@@ -3,7 +3,7 @@ import { createNanoEvents } from "nanoevents";
 import type { ReactNode } from "react";
 import type { Location } from "react-router";
 import type { BundledTheme, HighlighterCore } from "shiki";
-import type { z } from "zod/v4";
+import type { z } from "zod";
 import type { Navigation } from "../../config/validators/NavigationSchema.js";
 import type {
   CallbackContext,
@@ -129,6 +129,7 @@ export class ZudokuContext {
   public meta: ZudokuContextOptions["metadata"];
   public site: ZudokuContextOptions["site"];
   public readonly authentication?: ZudokuContextOptions["authentication"];
+  public readonly getAuthState: () => AuthState;
   public readonly queryClient: QueryClient;
   public readonly options: ZudokuContextOptions;
   private readonly navigationPlugins: NavigationPlugin[];
@@ -156,12 +157,15 @@ export class ZudokuContext {
     this.navigation = options.navigation ?? [];
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
     this.authentication = this.plugins.find(isAuthenticationPlugin);
+    this.getAuthState = useAuthState.getState;
+
     this.meta = options.metadata;
     this.site = options.site;
     this.plugins.forEach((plugin) => {
       if (!isEventConsumerPlugin(plugin)) return;
 
       objectEntries(plugin.events).forEach(([event, handler]) => {
+        // biome-ignore lint/style/noNonNullAssertion: handler is guaranteed to be defined
         this.emitter.on(event, handler!);
       });
     });

package/src/lib/errors/ErrorAlert.tsx

@@ -1,4 +1,3 @@
-// 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";
@@ -18,7 +17,7 @@ export function ErrorAlert({ error }: { error: unknown }) {
   const stringError = cause instanceof Error ? String(cause.stack) : stack;
 
   return (
-    <Typography className="grid grid-cols-1 !max-w-none pt-(--padding-content-top)">
+    <Typography className="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>}

package/src/lib/errors/RouterError.tsx

@@ -1,13 +1,18 @@
 import { isRouteErrorResponse, useRouteError } from "react-router";
 import { NotFoundPage } from "../components/NotFoundPage.js";
+import { cn } from "../util/cn.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 
-export function RouterError() {
+export function RouterError({ className }: { className?: string }) {
   const error = useRouteError();
 
   if (isRouteErrorResponse(error) && error.status === 404) {
     return <NotFoundPage />;
   }
 
-  return <ErrorAlert error={error} />;
+  return (
+    <div className={cn("mx-4 max-w-2xl", className)}>
+      <ErrorAlert error={error} />
+    </div>
+  );
 }

package/src/lib/errors/TopLevelError.tsx

@@ -1,8 +1,6 @@
-import { FallbackProps } from "react-error-boundary";
+import type { FallbackProps } from "react-error-boundary";
 import { ErrorAlert } from "./ErrorAlert.js";
 
-export function TopLevelError({ error, resetErrorBoundary }: FallbackProps) {
-  // Call resetErrorBoundary() to reset the error boundary and retry the render.
-
+export function TopLevelError({ error }: FallbackProps) {
   return <ErrorAlert error={error} />;
 }

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

@@ -1,7 +1,7 @@
 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 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";

package/src/lib/oas/graphql/circular.ts

@@ -1,5 +1,5 @@
-import { GraphQLJSON } from "graphql-type-json";
 import { GraphQLScalarType } from "graphql/index.js";
+import { GraphQLJSON } from "graphql-type-json";
 import type { RecordAny } from "../../util/traverse.js";
 
 export const CIRCULAR_REF = "$[Circular Reference]";
@@ -14,12 +14,12 @@ const OPENAPI_PROPS = new Set([
 ]);
 
 const handleCircularRefs = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   obj: any,
   visited = new WeakSet(),
   refs = new WeakMap(),
   path: string[] = [],
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
 ): any => {
   if (obj === null || typeof obj !== "object") return obj;
 

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+// biome-ignore-all lint/suspicious/noExplicitAny: Allow any type
 import SchemaBuilder from "@pothos/core";
 import {
   type CountableSlugify,
@@ -111,18 +111,34 @@ export const getAllTags = (
     ),
   );
 
-  return [
+  const result = [
     // Keep root tags that are actually used in operations
     ...rootTags
       .filter((tag) => operationTags.has(tag.name))
       .map((tag) => ({ ...tag, slug: slugs[tag.name] })),
     // Add tags found in operations but not defined in root tags
-    ...[...operationTags]
+    ...Array.from(operationTags)
       .filter((tag) => !rootTags.some((rt) => rt.name === tag))
       .map((tag) => ({ name: tag, slug: slugs[tag] })),
     // Add untagged operations if there are any
     ...(hasUntaggedOperations ? [{ name: undefined, slug: undefined }] : []),
   ];
+
+  // Apply x-tagGroups ordering if present
+  const tagGroups = (schema as any)["x-tagGroups"] ?? [];
+
+  if (tagGroups.length === 0) return result;
+
+  const groupOrder = tagGroups.flatMap((group: any) => group.tags);
+  return result.sort((a, b) => {
+    if (!a.name || !b.name) return 0; // Keep untagged at end
+    const indexA = groupOrder.indexOf(a.name);
+    const indexB = groupOrder.indexOf(b.name);
+    if (indexA === -1 && indexB === -1) return 0; // Keep original order for ungrouped
+    if (indexA === -1) return 1; // Ungrouped after grouped
+    if (indexB === -1) return -1; // Grouped before ungrouped
+    return indexA - indexB;
+  });
 };
 
 export const getAllSlugs = (
@@ -176,11 +192,21 @@ export const getAllOperations = (
         ...operationParameters,
       ];
 
+      // servers follow the OpenAPI 3.0 resolution hierarchy:
+      // 1. Operation-level servers (highest precedence)
+      // 2. Path-level servers
+      // 3. Global servers (handled at query time, lowest precedence)
+      const pathServers = value.servers ?? [];
+      const operationServers = operation.servers ?? [];
+      const servers =
+        operationServers.length > 0 ? operationServers : pathServers;
+
       return {
         ...operation,
         method,
         path,
         parameters,
+        servers,
         tags: operation.tags ?? [],
       } satisfies GraphQLOperationObject;
     }),
@@ -424,6 +450,15 @@ const OperationItem = builder
         type: [ParameterItem],
         nullable: true,
       }),
+      servers: t.field({
+        type: [ServerItem],
+        resolve: (parent, _, ctx) => {
+          // Return operation/path-level servers if defined, otherwise fall back to global servers
+          return parent.servers && parent.servers.length > 0
+            ? parent.servers
+            : (ctx.schema.servers ?? []);
+        },
+      }),
       requestBody: t.field({
         type: RequestBodyObject,
         resolve: (parent) => ({
@@ -554,6 +589,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
       resolve: (root) =>
         Object.entries(root.paths ?? {}).map(([path, value]) => ({
           path,
+          // biome-ignore lint/style/noNonNullAssertion: value is guaranteed to be defined
           methods: Object.keys(value!) as typeof HttpMethods,
         })),
     }),

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

@@ -8,7 +8,7 @@ type CustomResolver = (ref: string) => Promise<JSONSchema | undefined>;
 
 const cache = new Map<JSONSchema, JSONSchema>();
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: Allow any type
 const isIndexableObject = (obj: any): obj is Record<string, any> =>
   obj !== null && typeof obj === "object";
 
@@ -18,6 +18,7 @@ export const dereference = async (
   resolvers: CustomResolver[] = [],
 ) => {
   if (cache.has(schema)) {
+    // biome-ignore lint/style/noNonNullAssertion: Cache is guaranteed to have a value
     return cache.get(schema)!;
   }
 

package/src/lib/oas/parser/dereference/resolveRef.ts

@@ -11,13 +11,13 @@ export const resolveLocalRef = (schema: JSONSchema, ref: string): unknown => {
   }
   const schemaCache = cache.get(schema);
 
-  if (schemaCache!.has(ref)) {
-    return schemaCache!.get(ref);
+  if (schemaCache?.has(ref)) {
+    return schemaCache.get(ref);
   }
 
   const path = ref.split("/").slice(1);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   let current: any = schema;
   for (const segment of path) {
     if (!current || typeof current !== "object") {
@@ -27,6 +27,6 @@ export const resolveLocalRef = (schema: JSONSchema, ref: string): unknown => {
     current = current[segment] ?? null;
   }
 
-  schemaCache!.set(ref, current);
+  schemaCache?.set(ref, current);
   return current;
 };

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

@@ -1,6 +1,6 @@
-import { merge as mergeAllOf } from "allof-merge";
 import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
+import { flattenAllOfProcessor } from "../../util/flattenAllOf.js";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
 
@@ -43,7 +43,7 @@ const parseSchemaInput = async (
       }
     }
     if (schemaInput.includes("://")) {
-      let response;
+      let response: Response;
       try {
         response = await fetch(schemaInput, {
           cache: "force-cache",
@@ -83,7 +83,7 @@ const parseSchemaInput = async (
 
   if (typeof schemaInput === "object") return schemaInput as JSONSchema;
 
-  throw new GraphQLError("Unsupported schema input: " + schemaInput);
+  throw new GraphQLError(`Unsupported schema input: ${schemaInput}`);
 };
 
 /**
@@ -101,7 +101,12 @@ export const validate = async (schemaInput: unknown) => {
 
   const dereferenced = await dereference(schema);
   const upgraded = upgradeSchema(dereferenced);
-  const merged = mergeAllOf(upgraded) as OpenAPIDocument;
 
-  return merged;
+  const flattened = await flattenAllOfProcessor({
+    schema: upgraded,
+    file: "schema.json",
+    dereference: async (schema) => schema,
+  });
+
+  return flattened;
 };

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { type RecordAny, traverse } from "../../../util/traverse.js";
 import type { OpenAPIDocument } from "../index.js";
 /**
@@ -71,6 +70,7 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
 
       if (isMultipart) {
         // Types
+        // biome-ignore lint/suspicious/noExplicitAny: Allow any type
         const entries: [string, any][] = Object.entries(schema.properties);
 
         for (const [, value] of entries) {
@@ -110,6 +110,7 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
 
   schema = traverse(schema, (sub) => {
     if (sub.type === "string" && sub.format === "binary") {
+      // biome-ignore lint/suspicious/noExplicitAny: Allow any type
       return undefined as any;
     }
 

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -62,6 +62,13 @@ export const Catalog = ({
                   <Markdown
                     className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
                     content={api.description}
+                    components={{
+                      // Because we're wrapping the description in a Link already,
+                      // we need to strip out other links to not get a hydration error, like:
+                      // > In HTML, <a> cannot be a descendant of <a>.
+                      // > This will cause a hydration error.
+                      a: (props) => <span {...props} />,
+                    }}
                   />
                 </div>
               </Link>

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -16,7 +16,7 @@ import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { useAuth } from "../../hooks/index.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
-import { type ApiKeyService } from "./index.js";
+import type { ApiKeyService } from "./index.js";
 
 type CreateApiKey = { description?: string; expiresOn?: string };
 

package/src/lib/plugins/api-keys/CreateApiKeyDialog.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog.js";
+import { Button } from "../../ui/Button.js";
+import { CreateApiKey } from "./CreateApiKey.js";
+import type { ApiKeyService } from "./index.js";
+
+interface CreateApiKeyDialogProps {
+  service: ApiKeyService;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger?: ReactNode;
+  buttonVariant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+}
+
+export const CreateApiKeyDialog = ({
+  service,
+  isOpen,
+  onOpenChange,
+  trigger,
+  buttonVariant = "outline",
+}: CreateApiKeyDialogProps) => {
+  const defaultTrigger = (
+    <Button variant={buttonVariant}>Create API Key</Button>
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{trigger ?? defaultTrigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create API Key</DialogTitle>
+        </DialogHeader>
+        <CreateApiKey service={service} onOpenChange={onOpenChange} />
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/lib/plugins/api-keys/ProtectedRoute.tsx

@@ -11,15 +11,19 @@ export const ProtectedRoute = () => {
     return null;
   }
 
+  if (!auth.isAuthEnabled) {
+    return (
+      <div className="flex flex-col justify-center gap-2 items-center h-1/2">
+        <DeveloperHint className="max-w-[600px]">
+          Authentication needs to be enabled for API keys to work. Enable it in
+          your Zudoku configuration under <code>authentication</code>.
+        </DeveloperHint>
+      </div>
+    );
+  }
+
   return auth.isAuthenticated ? (
     <Outlet />
-  ) : !auth.isAuthEnabled ? (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2">
-      <DeveloperHint className="max-w-[600px]">
-        Authentication needs to be enabled for API keys to work. Enable it in
-        your Zudoku configuration under <code>authentication</code>.
-      </DeveloperHint>
-    </div>
   ) : (
     <div className="flex flex-col justify-center gap-2 items-center h-1/2">
       Please login first to view this page