zudoku 0.25.0 → 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-DkwDHnit.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.25.0",
+  "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/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/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

@@ -15,6 +15,7 @@ export const SidebarWrapper = forwardRef<
       "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

@@ -49,7 +49,7 @@ export const CollapsibleCode = ({
         )}
       >
         {!open && isOverflowing && (
-          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/90 dark:to-zinc-800/90 z-10 group-hover:to-transparent"></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 && (

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">

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

@@ -0,0 +1,163 @@
+import { useState } from "react";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { type SchemaObject } from "../../oas/graphql/index.js";
+import { CollapsibleCode } from "./CollapsibleCode.js";
+import type { OperationListItemResult } from "./OperationList.js";
+import * as SidecarBox from "./SidecarBox.js";
+import { SimpleSelect } from "./SimpleSelect.js";
+import { generateSchemaExample } from "./util/generateSchemaExample.js";
+
+export type Content = NonNullable<
+  NonNullable<OperationListItemResult["requestBody"]>["content"]
+>;
+export type Example = NonNullable<
+  NonNullable<Content[number]["examples"]>
+>[number];
+
+const formatExample = (example: unknown) => {
+  if (example == null) return "No example";
+
+  if (typeof example === "string" || typeof example !== "object") {
+    return String(example).trim();
+  }
+
+  return JSON.stringify(example, null, 2);
+};
+
+const getLanguageForContentType = (mediaType?: string) =>
+  mediaType
+    ? ({
+        "application/json": "json",
+        "application/xml": "xml",
+        "application/x-yaml": "yaml",
+        "text/csv": "csv",
+        "application/javascript": "javascript",
+        "application/graphql": "graphql",
+        "text/plain": "plain",
+        "application/x-www-form-urlencoded": "plain",
+        "multipart/form-data": "plain",
+        "application/x-protobuf": "plain",
+      }[mediaType] ?? "plain")
+    : "plain";
+
+const getExampleName = (example: Example) => {
+  if (example.summary) return example.summary;
+  if (example.name) return example.name;
+  if (example.description) return example.description;
+};
+
+const getExampleValue = (example?: Example) => {
+  if (!example) return undefined;
+
+  if (example.value !== undefined) return example.value;
+  if (example.externalValue) return example.externalValue;
+  if (example.name) return example;
+};
+
+export interface UseExampleDisplayProps {
+  content: Content;
+  description?: string;
+}
+
+export const useSidecarExamples = ({
+  content,
+  description,
+}: UseExampleDisplayProps) => {
+  const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  const selectedContent = content[selectedContentTypeIndex];
+  const examples = (selectedContent?.examples ?? []) as Example[];
+  const hasExamples = examples.length > 0;
+
+  const selectedExample = hasExamples
+    ? examples[selectedExampleIndex]
+    : undefined;
+
+  const example = hasExamples
+    ? getExampleValue(selectedExample)
+    : selectedContent?.schema
+      ? generateSchemaExample(selectedContent.schema as SchemaObject)
+      : undefined;
+
+  const formattedExample = formatExample(example);
+  const language = getLanguageForContentType(selectedContent?.mediaType);
+
+  const SidecarBody = () => (
+    <SidecarBox.Body className="p-0">
+      {selectedExample?.externalValue ? (
+        <div className="p-2">
+          <a
+            href={selectedExample.externalValue}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-primary hover:underline"
+          >
+            View External Example →
+          </a>
+        </div>
+      ) : (
+        <CollapsibleCode>
+          <SyntaxHighlight
+            language={language}
+            noBackground
+            copyable
+            className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
+            code={formattedExample}
+          />
+        </CollapsibleCode>
+      )}
+      {selectedExample?.description && (
+        <div className="border-t text-xs px-2 py-1">
+          {selectedExample.description}
+        </div>
+      )}
+    </SidecarBox.Body>
+  );
+
+  const SidebarFooter = () => (
+    <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-between py-1">
+      <div className="flex items-center gap-2 min-w-0">
+        {content.length > 1 ? (
+          <div className="flex items-center gap-1">
+            <SimpleSelect
+              className="max-w-[200px]"
+              value={selectedContentTypeIndex.toString()}
+              onChange={(e) =>
+                setSelectedContentTypeIndex(Number(e.target.value))
+              }
+              options={content.map((c, index) => ({
+                value: index.toString(),
+                label: c.mediaType,
+              }))}
+            />
+          </div>
+        ) : (
+          <span className="font-mono text-[11px]">{content[0]?.mediaType}</span>
+        )}
+        {description && (
+          <span className="text-muted-foreground truncate">{description}</span>
+        )}
+      </div>
+      {examples.length > 1 && (
+        <div className="flex items-center gap-1">
+          <SimpleSelect
+            className="max-w-[180px]"
+            value={selectedExampleIndex.toString()}
+            onChange={(e) => setSelectedExampleIndex(Number(e.target.value))}
+            options={examples.map((example, index) => ({
+              value: index.toString(),
+              label: getExampleName(example) ?? `Example ${index + 1}`,
+            }))}
+          />
+        </div>
+      )}
+    </SidecarBox.Footer>
+  );
+
+  return {
+    SidecarBody,
+    SidebarFooter,
+    hasContent: hasExamples || content.length > 0,
+  };
+};

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

@@ -57,9 +57,11 @@ export const OperationListItem = ({
               }
             }}
           >
-            <div className="text-neutral-400 dark:text-neutral-500 truncate">
-              {serverUrl}
-            </div>
+            {serverUrl && (
+              <div className="text-neutral-400 dark:text-neutral-500 truncate">
+                {serverUrl}
+              </div>
+            )}
             <div className="text-neutral-900 dark:text-neutral-200">
               {operation.path}
             </div>

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

@@ -45,7 +45,7 @@ export const ParameterListItem = ({
           )}
         </code>
         {parameter.required && (
-          <span className="py-px px-1.5 font-medium bg-primary/75 text-muted rounded-lg">
+          <span className="py-px px-1.5 font-medium bg-primary/75 text-primary-foreground rounded-lg">
             required
           </span>
         )}

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

@@ -1,44 +1,18 @@
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
-import { type SchemaObject } from "../../oas/graphql/index.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
-import type { OperationListItemResult } from "./OperationList.js";
+import { Content, useSidecarExamples } from "./ExampleDisplay.js";
 import * as SidecarBox from "./SidecarBox.js";
-import { generateSchemaExample } from "./util/generateSchemaExample.js";
 
-type Content = NonNullable<
-  NonNullable<OperationListItemResult["requestBody"]>["content"]
->;
-
-// @todo should we handle multiple content types?
 export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
-  if (!content.length) return null;
-
-  const firstContent = content.at(0);
-
-  const example =
-    firstContent?.examples?.at(0)?.value ??
-    (firstContent?.schema
-      ? generateSchemaExample(firstContent.schema as SchemaObject)
-      : "");
+  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
+    content,
+  });
 
   return (
-    <>
-      <SidecarBox.Root>
-        <SidecarBox.Head className="text-xs flex justify-between items-center">
-          <span className="font-mono">Request Body Example</span>
-        </SidecarBox.Head>
-        <SidecarBox.Body className="p-0">
-          <CollapsibleCode>
-            <SyntaxHighlight
-              language={example ? "json" : "plain"}
-              noBackground
-              copyable
-              className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
-              code={example ? JSON.stringify(example, null, 2) : "No example"}
-            />
-          </CollapsibleCode>
-        </SidecarBox.Body>
-      </SidecarBox.Root>
-    </>
+    <SidecarBox.Root>
+      <SidecarBox.Head className="text-xs flex justify-between items-center">
+        <span className="font-mono">Request Body Example</span>
+      </SidecarBox.Head>
+      <SidecarBody />
+      {hasContent && <SidebarFooter />}
+    </SidecarBox.Root>
   );
 };