zudoku 0.24.1 → 0.25.1

package/lib/zudoku.openapi-worker.js

@@ -2,7 +2,7 @@ const o = () => {
   const r = new SharedWorker(
     new URL(
       /* @vite-ignore */
-      "./assets/worker-DV9Ecqy9.js",
+      "./assets/worker-Cbp2r2BQ.js",
       import.meta.url
     ),
     { type: "module" }

package/lib/zudoku.plugin-openapi.js

@@ -1,6 +1,6 @@
 import "./jsx-runtime-Dx-03ztt.js";
 import "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { o as a } from "./index-DzRORsY1.js";
+import { o as a } from "./index-BNx95gkf.js";
 import "./ZudokuContext-hmLMUdf2.js";
 import "lucide-react";
 import "./hook-CHq7pFyz.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.24.1",
+  "version": "0.25.1",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -147,7 +147,7 @@
     "@sentry/node": "8.42.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
-    "@tailwindcss/typography": "0.5.15",
+    "@tailwindcss/typography": "0.5.16",
     "@tanstack/react-query": "5.62.3",
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",
@@ -240,7 +240,7 @@
     "mdast-util-mdx": "3.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "rollup-plugin-visualizer": "5.12.0",
+    "rollup-plugin-visualizer": "5.14.0",
     "typescript": "5.7.2",
     "vitest": "2.1.8"
   },
@@ -250,7 +250,7 @@
   },
   "optionalDependencies": {
     "@clerk/clerk-js": "^5.43.4",
-    "@sentry/react": "^8.48.0"
+    "@sentry/react": "^8.50.0"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",

package/src/app/main.css

@@ -85,8 +85,8 @@
       var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.72");
-    --padding-content-top: theme("spacing.12");
+    --side-nav-width: theme("spacing.80");
+    --padding-content-top: theme("spacing.6");
     --padding-content-bottom: theme("spacing.12");
     --padding-nav-item: theme("spacing[2.5]");
     --sidecar-grid-cols: 1fr minmax(200px, 260px);
@@ -238,48 +238,61 @@
   }
 
   /* Theme */
+  
+@layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 72.22% 50.59%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: var(--primary);
-    --radius: 0.5rem;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 95%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.75rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: var(--primary);
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+      --chart-2: 160 60% 45%;
+      --chart-3: 30 80% 55%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+    }
   }
 }

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

@@ -5,9 +5,10 @@ import { useZudoku } from "../../components/context/ZudokuContext.js";
 export const SignOut = () => {
   const context = useZudoku();
   const navigate = useNavigate();
+
   useEffect(() => {
     void context.authentication?.signOut().then(() => navigate("/"));
-  }, [navigate, context.authentication]);
+  }, []);
 
   return null;
 };

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

@@ -16,14 +16,19 @@ class ClerkAuthPlugin extends AuthenticationPlugin {
     }
 
     if (clerk.session) {
+      const verifiedEmail = clerk.session.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
       useAuthState.setState({
         isAuthenticated: true,
         isPending: false,
         profile: {
           sub: clerk.session.user.id,
           name: clerk.session.user.fullName ?? undefined,
-          email: clerk.session.user.emailAddresses[0]?.emailAddress,
-          emailVerified: false, // TODO: Check this
+          email:
+            verifiedEmail?.emailAddress ??
+            clerk.session.user.emailAddresses[0]?.emailAddress,
+          emailVerified: verifiedEmail !== undefined,
           pictureUrl: clerk.session.user.imageUrl,
         },
       });
@@ -45,19 +50,39 @@ const clerkAuth: AuthenticationProviderInitializer<
   redirectToAfterSignUp = "/",
   redirectToAfterSignIn = "/",
 }) => {
-  let clerkApi: Clerk;
+  let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
     const { Clerk } = await import("@clerk/clerk-js");
     clerkApi = new Clerk(clerkPubKey);
 
     await clerkApi.load();
+
+    if (clerkApi.user) {
+      const verifiedEmail = clerkApi.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
+      useAuthState.setState({
+        isAuthenticated: true,
+        isPending: false,
+        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,
+        },
+      });
+    }
+
     return clerkApi;
   })();
 
   async function getAccessToken() {
     await ensureLoaded;
-    if (!clerkApi.session) {
+    if (!clerkApi?.session) {
       throw new Error("No session available");
     }
     const response = await clerkApi.session.getToken();
@@ -71,20 +96,26 @@ const clerkAuth: AuthenticationProviderInitializer<
     getAccessToken,
     signOut: async () => {
       await ensureLoaded;
-      await clerkApi.signOut({
+      await clerkApi?.signOut({
         redirectUrl: window.location.origin + redirectToAfterSignOut,
       });
+      useAuthState.setState({
+        isAuthenticated: false,
+        isPending: false,
+        profile: null,
+        providerData: null,
+      });
     },
     signIn: async () => {
       await ensureLoaded;
-      await clerkApi.redirectToSignIn({
+      await clerkApi?.redirectToSignIn({
         signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
         signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
       });
     },
     signUp: async () => {
       await ensureLoaded;
-      await clerkApi.redirectToSignUp({
+      await clerkApi?.redirectToSignUp({
         signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
         signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
       });

package/src/lib/components/Header.tsx

@@ -65,8 +65,8 @@ export const Header = memo(function HeaderInner() {
   return (
     <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
       <Banner />
-      <div className="max-w-screen-2xl mx-auto">
-        <div className="grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-4 lg:px-12 h-[--top-header-height]">
+      <div className="border-b">
+        <div className="max-w-screen-2xl border-l border-r mx-auto grid grid-cols-[1fr_auto] lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center px-4 lg:px-12 h-[--top-header-height]">
           <div className="flex">
             <Link to="/">
               <div className="flex items-center gap-3.5">
@@ -176,9 +176,13 @@ export const Header = memo(function HeaderInner() {
             </div>
           </div>
         </div>
-        <Slotlet name="top-navigation-before" />
-        <TopNavigation />
-        <Slotlet name="top-navigation-after" />
+      </div>
+      <div className="border-b">
+        <div className="max-w-screen-2xl mx-auto border-l border-r">
+          <Slotlet name="top-navigation-before" />
+          <TopNavigation />
+          <Slotlet name="top-navigation-after" />
+        </div>
       </div>
     </header>
   );

package/src/lib/components/Layout.tsx

@@ -66,7 +66,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       <Header />
       <Slotlet name="layout-after-head" />
 
-      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12">
+      <div className="w-full max-w-screen-2xl mx-auto px-4 lg:px-12 border-l border-r">
         {showSpinner ? (
           <LoadingFallback />
         ) : (

package/src/lib/components/TopNavigation.tsx

@@ -30,7 +30,7 @@ export const TopNavigation = () => {
 
   return (
     <Suspense>
-      <nav className="hidden lg:block border-b text-sm px-12 h-[--top-nav-height]">
+      <nav className="hidden lg:block text-sm px-12 h-[--top-nav-height]">
         <ul className="flex flex-row items-center gap-8">
           {topNavigation.filter(isHiddenItem(isAuthenticated)).map((item) => (
             <li key={item.id}>
@@ -78,7 +78,7 @@ export const TopNavItem = ({
     <NavLink
       className={({ isPending }) =>
         cx(
-          "block lg:py-3.5 font-medium -mb-px border-b-2",
+          "block lg:py-3.5 font-medium -mb-px",
           isActive || isPending
             ? "border-primary text-foreground"
             : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",

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

@@ -10,20 +10,32 @@ export const ColorMap = {
   gray: "bg-gray-400 dark:bg-gray-600",
 };
 
+export const ColorMapInvert = {
+  green: "text-green-500 dark:text-green-600",
+  blue: "text-sky-400 dark:text-sky-600",
+  yellow: "text-yellow-400 dark:text-yellow-600",
+  red: "text-red-400 dark:text-red-600",
+  purple: "text-purple-400 dark:text-purple-600",
+  indigo: "text-indigo-400 dark:text-indigo-600",
+  gray: "text-gray-400 dark:text-gray-600",
+};
+
 export const SidebarBadge = ({
   color,
   label,
   className,
+  invert,
 }: {
   color: keyof typeof ColorMap;
   label: string;
   className?: string;
+  invert?: boolean;
 }) => {
   return (
     <span
       className={cn(
         "mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1",
-        ColorMap[color],
+        invert ? ColorMapInvert[color] : ColorMap[color],
         className,
       )}
     >

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

@@ -66,7 +66,7 @@ export const SidebarCategory = ({
           className={navigationListItem({
             isActive: false,
             className: [
-              "text-start",
+              "text-start font-medium",
               isCollapsible
                 ? "cursor-pointer"
                 : "cursor-default hover:bg-transparent",
@@ -112,14 +112,10 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
-          "ms-6 my-1",
+          "my-1",
         )}
       >
-        <ul
-          className={
-            "relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border"
-          }
-        >
+        <ul className={"relative"}>
           {category.items.map((item) => (
             <SidebarItem
               key={

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

@@ -12,9 +12,10 @@ export const SidebarWrapper = forwardRef<
     // 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",
-      "-mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
+      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 border-r pr-10",
+      "-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}

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

@@ -329,9 +329,12 @@ const OperationItem = builder
             ([mediaType, content]) => ({
               mediaType,
               schema: content.schema,
-              examples: Object.entries(content.examples ?? {}).map(
-                ([name, value]) => ({ name, ...value }),
-              ),
+              examples: content.examples
+                ? Object.entries(content.examples).map(([name, value]) => ({
+                    name,
+                    ...(typeof value === "string" ? { value } : value),
+                  }))
+                : [],
               encoding: Object.entries(content.encoding ?? {}).map(
                 ([name, value]) => ({ name, ...value }),
               ),
@@ -351,9 +354,12 @@ const OperationItem = builder
                 ([mediaType, { schema, examples }]) => ({
                   mediaType,
                   schema,
-                  examples: Object.entries(examples ?? {}).map(
-                    ([name, value]) => ({ name, ...value }),
-                  ),
+                  examples: examples
+                    ? Object.entries(examples).map(([name, value]) => ({
+                        name,
+                        ...(typeof value === "string" ? { value } : value),
+                      }))
+                    : [],
                 }),
               ),
               headers: response.headers,
@@ -379,7 +385,10 @@ const OperationItem = builder
 const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
   fields: (t) => ({
     openapi: t.string({ resolve: (root) => root.openapi }),
-    url: t.string({ resolve: (root) => root.servers?.at(0)?.url ?? "/" }),
+    url: t.string({
+      resolve: (root) => root.servers?.at(0)?.url,
+      nullable: true,
+    }),
     servers: t.field({
       type: [ServerItem],
       resolve: (root) => root.servers ?? [],

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

@@ -42,12 +42,27 @@ export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
 
   schema = traverse(schema, (sub) => {
     if (sub.example !== undefined) {
-      sub.examples = {
-        default: sub.example,
-      };
+      const isExampleObject =
+        typeof sub.example === "object" &&
+        (sub.example.summary !== undefined ||
+          sub.example.description !== undefined ||
+          sub.example.value !== undefined ||
+          sub.example.externalValue !== undefined);
+
+      const exampleValue = isExampleObject
+        ? sub.example
+        : { value: sub.example };
+
+      if (!sub.examples) {
+        sub.examples = { default: exampleValue };
+      } else {
+        sub.examples = {
+          default: exampleValue,
+          ...sub.examples,
+        };
+      }
       delete sub.example;
     }
-
     return sub;
   });
 

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

@@ -1,3 +1,4 @@
+import { FoldVerticalIcon, UnfoldVerticalIcon } from "lucide-react";
 import { type CSSProperties, type ReactNode, useRef, useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
 import {
@@ -43,22 +44,23 @@ export const CollapsibleCode = ({
       <CollapsibleContent
         forceMount
         className={cn(
-          "relative overflow-hidden",
+          "relative overflow-hidden group",
           !open && isOverflowing && "max-h-[--max-height]",
         )}
       >
         {!open && isOverflowing && (
-          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/90 dark:to-zinc-800/90 z-10"></div>
+          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 group-hover:to-transparent"></div>
         )}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
           <CollapsibleTrigger
-            className="absolute inset-0 grid place-items-center z-10"
+            className="absolute inset-0 grid place-items-center z-10 cursor-pointer peer"
             asChild
           >
             <div>
-              <Button className="bg-primary/70 border border-accent-foreground/25">
-                Expand code
+              <Button variant="outline" className="hidden group-hover:flex">
+                <UnfoldVerticalIcon size={14} className="mr-1.5" />
+                Click to expand
               </Button>
             </div>
           </CollapsibleTrigger>
@@ -69,8 +71,9 @@ export const CollapsibleCode = ({
           className={cn("flex justify-center w-full mb-2", !open && "hidden")}
         >
           <CollapsibleTrigger asChild>
-            <Button className="border border-accent-foreground/25">
-              Collapse code
+            <Button variant="outline" size="sm">
+              Collapse
+              <FoldVerticalIcon size={14} className="ml-1.5" />
             </Button>
           </CollapsibleTrigger>
         </div>

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

@@ -52,6 +52,8 @@ export const Endpoint = () => {
 
   const { servers } = result.data.schema;
 
+  if (servers.length === 0) return null;
+
   if (servers.length === 1) {
     return (
       <div className="flex items-center gap-2">
@@ -66,9 +68,7 @@ export const Endpoint = () => {
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <span className="font-medium text-sm">
-        {servers.length > 1 ? "Endpoints" : "Endpoint"}:
-      </span>
+      <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"