zudoku 0.0.0-f36627bd → 0.0.0-f370c714

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -1,9 +1,23 @@
 import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { EditIcon } from "lucide-react";
-import { type PropsWithChildren, useEffect } from "react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CopyIcon,
+  EditIcon,
+  ExternalLinkIcon,
+  Link2Icon,
+} from "lucide-react";
+import { type PropsWithChildren, useEffect, useState } from "react";
+import { useLocation } from "react-router";
 import { Button } from "zudoku/ui/Button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "zudoku/ui/DropdownMenu.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Toc } from "../../components/navigation/Toc.js";
@@ -13,7 +27,10 @@ import {
 } from "../../components/navigation/utils.js";
 import { Pagination } from "../../components/Pagination.js";
 import { Typography } from "../../components/Typography.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
+import { ChatGPTLogo } from "./assets/ChatGPTLogo.js";
+import { ClaudeLogo } from "./assets/ClaudeLogo.js";
 import type { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
 declare global {
@@ -39,6 +56,7 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
+  basePath,
   frontmatter = {},
   defaultOptions,
   __filepath,
@@ -46,11 +64,14 @@ export const MdxPage = ({
   excerpt,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
+    basePath: string;
     mdxComponent: MDXImport["default"];
     defaultOptions?: MarkdownPluginDefaultOptions;
   }
 >) => {
   const categoryTitle = useCurrentItem()?.categoryLabel;
+  const location = useLocation();
+  const [isCopied, setIsCopied] = useState(false);
 
   const title = frontmatter.title;
   const description = frontmatter.description ?? excerpt;
@@ -80,6 +101,20 @@ export const MdxPage = ({
     : null;
   const editText = editConfig ? editConfig.text || "Edit this page" : null;
 
+  const copyMarkdownConfig =
+    frontmatter.copyPage !== false && defaultOptions?.copyPage !== false;
+
+  const markdownUrl = joinUrl(basePath, `${location.pathname}.md`);
+
+  const handleCopyMarkdown = async () => {
+    const response = await fetch(markdownUrl);
+    if (!response.ok) throw new Error("Failed to fetch markdown");
+    const markdown = await response.text();
+    void navigator.clipboard.writeText(markdown);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  };
+
   const tocEntries =
     tableOfContents.find((item) => item.depth === 1)?.children ??
     // if `title` is provided by frontmatter it does not appear in the table of contents
@@ -115,15 +150,97 @@ export const MdxPage = ({
       </Helmet>
       <Typography className="max-w-full xl:w-full xl:max-w-3xl flex-1 shrink pt-(--padding-content-top)">
         {(category || title) && (
-          <header>
-            {category && <CategoryHeading>{category}</CategoryHeading>}
-            {title && (
-              <Heading level={1} id={slugify(title)}>
-                {title}
-              </Heading>
+          <header className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              {category && <CategoryHeading>{category}</CategoryHeading>}
+              {title && (
+                <Heading level={1} id={slugify(title)}>
+                  {title}
+                </Heading>
+              )}
+            </div>
+            {copyMarkdownConfig && (
+              <div className="flex items-center border rounded-md">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleCopyMarkdown}
+                  className="rounded-r-none border-r gap-2 h-7"
+                >
+                  {isCopied ? (
+                    <CheckIcon size={14} className="text-emerald-600" />
+                  ) : (
+                    <CopyIcon size={14} />
+                  )}
+                  <span>Copy page</span>
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-xs"
+                      className="rounded-l-none"
+                    >
+                      <ChevronDownIcon size={14} />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      className="gap-2"
+                      onClick={() =>
+                        void navigator.clipboard.writeText(window.location.href)
+                      }
+                    >
+                      <Link2Icon className="size-4" />
+                      Copy link to page
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="gap-2" asChild>
+                      <a
+                        href={markdownUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <ExternalLinkIcon className="size-4" />
+                        Open Markdown page
+                      </a>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="gap-2"
+                      onClick={() => {
+                        const prompt = encodeURIComponent(
+                          `Help me understand this documentation page: ${window.location.href}`,
+                        );
+                        window.open(
+                          `https://claude.ai/new?q=${prompt}`,
+                          "_blank",
+                        );
+                      }}
+                    >
+                      <ClaudeLogo className="size-4" />
+                      Open in Claude
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="gap-2"
+                      onClick={() => {
+                        const prompt = encodeURIComponent(
+                          `Help me understand this documentation page: ${window.location.href}`,
+                        );
+                        window.open(
+                          `https://chatgpt.com/?q=${prompt}`,
+                          "_blank",
+                        );
+                      }}
+                    >
+                      <ChatGPTLogo className="size-4" />
+                      Open in ChatGPT
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
             )}
           </header>
         )}
+
         <MdxComponent
           components={{ ...useMDXComponents(), ...MarkdownHeadings }}
         />

package/src/lib/plugins/markdown/assets/ChatGPTLogo.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from "react";
+
+export const ChatGPTLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" {...props}>
+    <title>ChatGPT</title>
+    <path
+      fill="currentColor"
+      d="M297.06 130.97a79.712 79.712 0 0 0-6.85-65.48c-17.46-30.4-52.56-46.04-86.84-38.68A79.747 79.747 0 0 0 143.24 0C108.2-.08 77.11 22.48 66.33 55.82a79.754 79.754 0 0 0-53.31 38.67c-17.59 30.32-13.58 68.54 9.92 94.54a79.712 79.712 0 0 0 6.85 65.48c17.46 30.4 52.56 46.04 86.84 38.68a79.687 79.687 0 0 0 60.13 26.8c35.06.09 66.16-22.49 76.94-55.86a79.754 79.754 0 0 0 53.31-38.67c17.57-30.32 13.55-68.51-9.94-94.51zM176.78 299.08a59.77 59.77 0 0 1-38.39-13.88c.49-.26 1.34-.73 1.89-1.07l63.72-36.8a10.36 10.36 0 0 0 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zM47.94 244.05a59.71 59.71 0 0 1-7.15-40.18c.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83L129.87 266c-28.69 16.52-65.33 6.7-81.92-21.95zM31.17 104.96c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91L118.44 224c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94a59.94 59.94 0 0 1-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8a10.375 10.375 0 0 0-10.47 0l-77.79 44.92V92c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22a59.95 59.95 0 0 1 7.15 40.1zm-168.51 55.43-26.94-15.55a.943.943 0 0 1-.52-.74V80.86c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07L116 72.67a10.344 10.344 0 0 0-5.24 9.06l-.04 89.79zM125.35 140 160 119.99l34.65 20V180L160 200l-34.65-20z"
+    />
+  </svg>
+);

package/src/lib/plugins/markdown/assets/ClaudeLogo.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+export const ClaudeLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    fillRule="evenodd"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <title>Claude</title>
+    <path
+      fill="#D97757"
+      d="m4.709 15.955 4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312z"
+    />
+  </svg>
+);

package/src/lib/plugins/markdown/index.tsx

@@ -5,11 +5,12 @@ import type { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 
 export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  basePath: string;
   fileImports: Record<string, () => Promise<MDXImport>>;
 }
 export type MarkdownPluginDefaultOptions = Pick<
   Frontmatter,
-  "toc" | "disablePager" | "showLastModified" | "suggestEdit"
+  "toc" | "disablePager" | "showLastModified" | "suggestEdit" | "copyPage"
 >;
 
 export type Frontmatter = {
@@ -21,12 +22,8 @@ export type Frontmatter = {
   disable_pager?: boolean;
   showLastModified?: boolean;
   lastModifiedTime?: number;
-  suggestEdit?:
-    | {
-        url: string;
-        text?: string;
-      }
-    | false;
+  suggestEdit?: { url: string; text?: string } | false;
+  copyPage?: boolean;
 };
 
 export type MDXImport = {
@@ -50,6 +47,7 @@ export const markdownPlugin = (
           return {
             element: (
               <MdxPage
+                basePath={options.basePath}
                 mdxComponent={Component}
                 {...props}
                 defaultOptions={options.defaultOptions}

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

@@ -9,6 +9,10 @@ import {
 import { cn } from "../../util/cn.js";
 import useIsomorphicLayoutEffect from "../../util/useIsomorphicLayoutEffect.js";
 
+export const OverflowOverlay = () => (
+  <div className="absolute inset-0 bg-linear-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent" />
+);
+
 export const CollapsibleCode = ({
   children,
   maxHeight = 250,
@@ -48,9 +52,7 @@ export const CollapsibleCode = ({
           !open && isOverflowing && "max-h-(--max-height)",
         )}
       >
-        {!open && isOverflowing && (
-          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent"></div>
-        )}
+        {!open && isOverflowing && <OverflowOverlay />}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
           <CollapsibleTrigger

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/GeneratedExampleSidecarBox.tsx

@@ -0,0 +1,52 @@
+import { InfoIcon } from "lucide-react";
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "zudoku/ui/Tooltip.js";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
+import * as SidecarBox from "./SidecarBox.js";
+
+export const GeneratedExampleSidecarBox = ({
+  code,
+  isOnScreen,
+  shouldLazyHighlight,
+}: {
+  code: string;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+}) => {
+  return (
+    <SidecarBox.Root>
+      <SidecarBox.Head className="text-xs flex justify-between items-center">
+        <div className="flex items-center gap-1.5">
+          <span className="font-medium">Example Request Body</span>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <InfoIcon size={13} />
+              </TooltipTrigger>
+              <TooltipContent>
+                This example is auto-generated from the schema.
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </SidecarBox.Head>
+      <SidecarBox.Body className="p-0">
+        {shouldLazyHighlight && !isOnScreen ? (
+          <NonHighlightedCode code={code} />
+        ) : (
+          <SyntaxHighlight
+            embedded
+            language="json"
+            code={code}
+            className="[--scrollbar-color:gray] rounded-none text-xs max-h-[200px]"
+          />
+        )}
+      </SidecarBox.Body>
+    </SidecarBox.Root>
+  );
+};

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

@@ -30,10 +30,10 @@ export const MCPEndpoint = ({
   "mcpServers": {
     "${name}": {
       "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-fetch"],
-      "env": {
-        "FETCH_URL": "${mcpUrl}"
-      }
+      "args": [
+        "mcp-remote",
+        "${mcpUrl}"
+      ]
     }
   }
 }`;
@@ -51,21 +51,11 @@ export const MCPEndpoint = ({
   const vscodeConfig = `{
   "servers": {
     "${name}": {
-      "type": "stdio",
       "command": "npx",
-      "args": ["-y", "@modelcontextprotocol/server-fetch"],
-      "env": {
-        "FETCH_URL": "${mcpUrl}"
-      }
-    }
-  }
-}`;
-
-  const vscodeSseConfig = `{
-  "servers": {
-    "${name}": {
-      "type": "sse",
-      "url": "${mcpUrl}"
+      "args": [
+        "mcp-remote",
+        "${mcpUrl}"
+      ]
     }
   }
 }`;
@@ -259,16 +249,6 @@ export const MCPEndpoint = ({
                       className="mt-2"
                     />
                   </li>
-                  <li>
-                    Alternatively, configure SSE without a wrapper:
-                    <SyntaxHighlight
-                      showLanguageIndicator
-                      title="mcp.json (SSE)"
-                      language="json"
-                      code={vscodeSseConfig}
-                      className="mt-2"
-                    />
-                  </li>
                   <li>Restart VS Code to apply the configuration</li>
                   <li>
                     Use MCP tools in GitHub Copilot Chat by selecting Agent mode

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]);