zudoku 0.0.0-f9d5b02 → 0.0.0-fabd0c1

package/src/lib/plugins/custom-pages/index.tsx

@@ -1,5 +1,5 @@
 import { type ComponentType, type ReactNode } from "react";
-import type { RouteObject } from "react-router-dom";
+import type { RouteObject } from "react-router";
 import { type ExposedComponentProps } from "../../components/SlotletProvider.js";
 import type { NavigationPlugin, ZudokuPlugin } from "../../core/plugins.js";
 import { CustomPage } from "./CustomPage.js";

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

@@ -1,8 +1,8 @@
 import { useMDXComponents } from "@mdx-js/react";
 import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { type PropsWithChildren } from "react";
-import { Link } from "react-router-dom";
+import { type PropsWithChildren, useEffect } from "react";
+import { Link } from "react-router";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
@@ -15,6 +15,14 @@ import { cn } from "../../util/cn.js";
 import { Toc } from "./Toc.js";
 import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
+declare global {
+  interface Window {
+    __getReactRefreshIgnoredExports?: (args: {
+      id: string;
+    }) => string[] | undefined;
+  }
+}
+
 const MarkdownHeadings = {
   h2: ({ children, id }) => (
     <Heading level={2} id={id} registerSidebarAnchor>
@@ -30,11 +38,14 @@ const MarkdownHeadings = {
 
 export const MdxPage = ({
   mdxComponent: MdxComponent,
+  file,
   frontmatter = {},
   defaultOptions,
   tableOfContents,
+  excerpt,
 }: PropsWithChildren<
   Omit<MDXImport, "default"> & {
+    file: string;
     mdxComponent: MDXImport["default"];
     defaultOptions?: MarkdownPluginDefaultOptions;
   }
@@ -57,10 +68,25 @@ export const MdxPage = ({
 
   const { prev, next } = usePrevNext();
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      window.__getReactRefreshIgnoredExports = ({ id }) => {
+        if (!id.endsWith(file)) return;
+
+        return ["frontmatter", "tableOfContents"];
+      };
+
+      return () => {
+        window.__getReactRefreshIgnoredExports = undefined;
+      };
+    }
+  }, [file]);
+
   return (
     <div className="xl:grid grid-cols-[--sidecar-grid-cols] gap-8 justify-between">
       <Helmet>
         <title>{pageTitle}</title>
+        {excerpt && <meta name="description" content={excerpt} />}
       </Helmet>
       <div
         className={cn(

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

@@ -1,7 +1,8 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
-import { RouteObject } from "react-router-dom";
-import { ZudokuDocsConfig } from "../../../config/validators/validate.js";
+import { type JSX } from "react";
+import { RouteObject } from "react-router";
+import { ZudokuDocsConfig } from "../../../config/validators/common.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 import { DocResolver } from "./resolver.js";
 
@@ -24,6 +25,7 @@ export type Frontmatter = {
 export type MDXImport = {
   tableOfContents: Toc;
   frontmatter: Frontmatter;
+  excerpt?: string;
   default: (props: MDXProps) => JSX.Element;
 };
 
@@ -57,6 +59,7 @@ export const markdownPlugin = (
             return {
               element: (
                 <MdxPage
+                  file={file}
                   mdxComponent={Component}
                   {...props}
                   defaultOptions={defaultOptions}

package/src/lib/plugins/markdown/resolver.ts

@@ -1,9 +1,7 @@
 import fs from "fs";
 import path from "path";
-import {
-  ZudokuConfig,
-  ZudokuDocsConfig,
-} from "../../../config/validators/validate.js";
+import { ZudokuDocsConfig } from "../../../config/validators/common.js";
+import { ZudokuConfig } from "../../../config/validators/validate.js";
 
 const DEFAULT_DOCS_FILES = "/pages/**/*.{md,mdx}";
 

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

@@ -6,10 +6,10 @@ import { pastellize } from "../../util/pastellize.js";
 export const DATA_ATTR = "data-linked-param";
 
 export const usePastellizedColor = (name: string) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   return pastellize(
     name,
-    theme === "light" ? { saturation: 85, lightness: 50 } : undefined,
+    resolvedTheme === "light" ? { saturation: 85, lightness: 50 } : undefined,
   );
 };
 

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

@@ -1,5 +1,15 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { useNavigate } from "react-router";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "zudoku/ui/Select.js";
+import { useSelectedServerStore } from "../../authentication/state.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
@@ -10,6 +20,7 @@ import StaggeredRender from "./StaggeredRender.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
+import { sanitizeMarkdownForMetatag } from "./util/sanitizeMarkdownForMetatag.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
   fragment OperationsFragment on OperationItem {
@@ -81,6 +92,7 @@ const AllOperationsQuery = graphql(/* GraphQL */ `
   query AllOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       description
+      summary
       title
       url
       version
@@ -97,30 +109,73 @@ const AllOperationsQuery = graphql(/* GraphQL */ `
 `);
 
 export const OperationList = () => {
-  const { input, type } = useOasConfig();
+  const { input, type, versions, version } = useOasConfig();
   const query = useCreateQuery(AllOperationsQuery, { input, type });
+  const { selectedServer } = useSelectedServerStore();
   const result = useSuspenseQuery(query);
+  const title = result.data.schema.title;
+  const summary = result.data.schema.summary;
+  const description = result.data.schema.description;
+  const navigate = useNavigate();
+
+  // The summary property is preferable here as it is a short description of
+  // the API, whereas the description property is typically longer and supports
+  // commonmark formatting, making it ill-suited for use in the meta description
+  const metaDescription = summary
+    ? summary
+    : description
+      ? sanitizeMarkdownForMetatag(description)
+      : undefined;
 
   return (
     <div className="pt-[--padding-content-top]">
+      <Helmet>
+        <title>{title}</title>
+        {metaDescription && (
+          <meta name="description" content={metaDescription} />
+        )}
+      </Helmet>
       <div
         className={cn(ProseClasses, "mb-16 max-w-full prose-img:max-w-prose")}
       >
-        <CategoryHeading>Overview</CategoryHeading>
-        <Heading level={1} id="description" registerSidebarAnchor>
-          {result.data.schema.title}
-        </Heading>
+        <div className="flex">
+          <div className="flex-1">
+            <CategoryHeading>Overview</CategoryHeading>
+            <Heading level={1} id="description" registerSidebarAnchor>
+              {title}
+            </Heading>
+          </div>
+          <div>
+            {Object.entries(versions).length > 1 && (
+              <Select
+                onValueChange={(version) => navigate(versions[version]!)}
+                defaultValue={version}
+              >
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Select version" />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(versions).map(([version]) => (
+                    <SelectItem key={version} value={version}>
+                      {version}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+        </div>
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
       <hr />
-      <div className="my-4 flex justify-end">
+      <div className="my-4 flex items-center justify-end gap-4">
         <Endpoint />
       </div>
-
       {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)
         .map((tag) => (
-          <div key={tag.name} className="[content-visibility:auto]">
+          // px, -mx is so that `content-visibility` doesn't cut off overflown heading anchor links '#'
+          <div key={tag.name} className="px-6 -mx-6 [content-visibility:auto]">
             {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
             {tag.description && (
               <Markdown
@@ -132,6 +187,7 @@ export const OperationList = () => {
               <StaggeredRender>
                 {tag.operations.map((fragment) => (
                   <OperationListItem
+                    serverUrl={selectedServer ?? result.data.schema.url}
                     key={fragment.slug}
                     operationFragment={fragment}
                   />

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
@@ -9,20 +9,24 @@ import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
 import { SchemaView } from "./schema/SchemaView.js";
+import { methodForColor } from "./util/methodToColor.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
 
 export const OperationListItem = ({
   operationFragment,
+  serverUrl,
 }: {
   operationFragment: FragmentType<typeof OperationsFragment>;
+  serverUrl?: string;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
   const groupedParameters = groupBy(
     operation.parameters ?? [],
     (param) => param.in,
   );
+  const parentRef = useRef<HTMLDivElement>(null);
 
   const first = operation.responses.at(0);
   const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
@@ -30,12 +34,37 @@ export const OperationListItem = ({
   return (
     <div
       key={operation.operationId}
-      className="grid grid-cols-1 lg:grid-cols-[4fr_3fr] gap-8 items-start border-b-2 mb-16 pb-16"
+      className="grid grid-cols-1 lg:grid-cols-[minmax(0,4fr)_minmax(0,3fr)] gap-8 items-start border-b-2 mb-16 pb-16"
     >
       <div className="flex flex-col gap-4">
         <Heading level={2} id={operation.slug} registerSidebarAnchor>
           {operation.summary}
         </Heading>
+        <div className="text-sm flex gap-2 font-mono">
+          <span className={methodForColor(operation.method)}>
+            {operation.method.toUpperCase()}
+          </span>
+          <div
+            ref={parentRef}
+            className="max-w-full truncate flex cursor-pointer"
+            onClick={() => {
+              if (parentRef.current) {
+                const range = document.createRange();
+                range.selectNodeContents(parentRef.current);
+                const selection = window.getSelection();
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+              }
+            }}
+          >
+            <div className="text-neutral-400 dark:text-neutral-500 truncate">
+              {serverUrl}
+            </div>
+            <div className="text-neutral-900 dark:text-neutral-200">
+              {operation.path}
+            </div>
+          </div>
+        </div>
         {operation.description && (
           <Markdown
             className={`${ProseClasses} max-w-full prose-img:max-w-prose`}

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

@@ -1,19 +1,55 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useParams } from "react-router";
+import { joinPath } from "../../util/joinPath.js";
 import type { GraphQLClient } from "./client/GraphQLClient.js";
 import { GraphQLProvider } from "./client/GraphQLContext.js";
 import { OasConfigProvider } from "./context.js";
-import { OasPluginConfig } from "./interfaces.js";
+import { type OasPluginConfig } from "./interfaces.js";
 
 export const OpenApiRoute = ({
+  basePath,
+  versions,
   config,
   client,
 }: {
+  basePath: string;
+  versions: string[];
   config: OasPluginConfig;
   client: GraphQLClient;
-}) => (
-  <OasConfigProvider value={{ config }}>
-    <GraphQLProvider client={client}>
-      <Outlet />
-    </GraphQLProvider>
-  </OasConfigProvider>
-);
+}) => {
+  const { version } = useParams<"version">();
+
+  const input =
+    config.type === "file"
+      ? {
+          type: config.type,
+          input: version
+            ? config.input[version]!
+            : Object.values(config.input).at(0)!,
+        }
+      : { type: config.type, input: config.input };
+
+  const currentVersion = version ?? versions.at(0);
+
+  if (!currentVersion) {
+    throw new Error("No version found");
+  }
+
+  return (
+    <OasConfigProvider
+      value={{
+        config: {
+          ...config,
+          version: currentVersion,
+          versions: Object.fromEntries(
+            versions.map((version) => [version, joinPath(basePath, version)]),
+          ),
+          ...input,
+        },
+      }}
+    >
+      <GraphQLProvider client={client}>
+        <Outlet />
+      </GraphQLProvider>
+    </OasConfigProvider>
+  );
+};

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

@@ -1,9 +1,8 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useTransition } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 import { useSelectedServerStore } from "../../authentication/state.js";
-import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
@@ -20,6 +19,7 @@ import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
+import { methodForColor } from "./util/methodToColor.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
   let converted;
@@ -76,17 +76,6 @@ export const GetServerQuery = graphql(/* GraphQL */ `
   }
 `);
 
-const methodToColor = {
-  get: TextColorMap.green,
-  post: TextColorMap.blue,
-  put: TextColorMap.yellow,
-  delete: TextColorMap.red,
-  patch: TextColorMap.purple,
-  options: TextColorMap.indigo,
-  head: TextColorMap.gray,
-  trace: TextColorMap.gray,
-};
-
 const EXAMPLE_LANGUAGES = [
   { value: "shell", label: "cURL" },
   { value: "js", label: "JavaScript" },
@@ -114,10 +103,7 @@ export const Sidecar = ({
   const query = useCreateQuery(GetServerQuery, { input, type });
   const result = useSuspenseQuery(query);
 
-  const methodTextColor =
-    methodToColor[
-      operation.method.toLocaleLowerCase() as keyof typeof methodToColor
-    ] ?? TextColorMap.gray;
+  const methodTextColor = methodForColor(operation.method);
 
   const [searchParams, setSearchParams] = useSearchParams();
   const [, startTransition] = useTransition();

package/src/lib/plugins/openapi/client/GraphQLClient.tsx

@@ -15,6 +15,20 @@ type GraphQLResponse<TResult> = {
   data: TResult;
 };
 
+const resolveVariables = async (variables?: unknown) => {
+  if (!variables) return;
+
+  if (
+    typeof variables === "object" &&
+    "type" in variables &&
+    variables.type === "file" &&
+    "input" in variables &&
+    typeof variables.input === "function"
+  ) {
+    variables.input = await variables.input();
+  }
+};
+
 const throwIfError = (response: GraphQLResponse<unknown>) => {
   if (!response.errors?.[0]) return;
 
@@ -47,6 +61,9 @@ export class GraphQLClient {
     ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
   ) => {
     const operationName = query.match(/query (\w+)/)?.[1];
+
+    await resolveVariables(variables);
+
     const body = JSON.stringify({ query, variables, operationName });
 
     switch (this.#mode) {

package/src/lib/plugins/openapi/client/useCreateQuery.ts

@@ -1,4 +1,5 @@
-import { useContext } from "react";
+import hashit from "object-hash";
+import { useContext, useMemo } from "react";
 import type { TypedDocumentString } from "../graphql/graphql.js";
 import { GraphQLContext } from "./GraphQLContext.js";
 
@@ -11,8 +12,10 @@ export const useCreateQuery = <TResult, TVariables>(
     throw new Error("useGraphQL must be used within a GraphQLProvider");
   }
 
+  const hash = useMemo(() => hashit(variables[0] ?? {}), [variables]);
+
   return {
     queryFn: () => graphQLClient.fetch(query, ...variables),
-    queryKey: [query, variables[0]],
+    queryKey: [query, hash],
   } as const;
 };

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

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
-import { OasPluginConfig } from "./interfaces.js";
+import { OasPluginContext } from "./interfaces.js";
 
-const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
+const OasContext = createContext<{ config: OasPluginContext } | undefined>(
   undefined,
 );
 

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -17,7 +17,7 @@ const documents = {
     types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        examples {\n          name\n          description\n          externalValue\n          value\n          summary\n        }\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
-  "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
+  "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
@@ -41,7 +41,7 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n",
+  source: "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      summary\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").AllOperationsDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

package/src/lib/plugins/openapi/graphql/graphql.ts

@@ -136,6 +136,7 @@ export type Schema = {
   title: Scalars["String"]["output"];
   url: Scalars["String"]["output"];
   version: Scalars["String"]["output"];
+  summary?: Maybe<Scalars["String"]["output"]>;
 };
 
 export type SchemaOperationsArgs = {
@@ -261,6 +262,7 @@ export type AllOperationsQuery = {
   schema: {
     __typename?: "Schema";
     description?: string | null;
+    summary?: string | null;
     title: string;
     url: string;
     version: string;
@@ -419,6 +421,7 @@ export const AllOperationsDocument = new TypedDocumentString(`
     query AllOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
     description
+    summary
     title
     url
     version

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

@@ -1,4 +1,4 @@
-import { matchPath, type RouteObject } from "react-router-dom";
+import { matchPath } from "react-router";
 import { type ZudokuPlugin } from "../../core/plugins.js";
 import { graphql } from "./graphql/index.js";
 
@@ -52,6 +52,8 @@ export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
 export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
   const basePath = joinPath(config.navigationId ?? "/reference");
 
+  const versions = config.type === "file" ? Object.keys(config.input) : [];
+
   const client = new GraphQLClient(config);
 
   return {
@@ -125,9 +127,14 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
       }
 
       try {
+        const version =
+          versions.find((v) => path === joinPath(basePath, v)) ??
+          Object.keys(config.input).at(0);
+
         const data = await client.fetch(GetCategoriesQuery, {
           type: config.type,
-          input: config.input,
+          input: config.type === "file" ? config.input[version!] : config.input,
+          version,
         });
 
         const categories = data.schema.tags
@@ -159,32 +166,32 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         return [];
       }
     },
-    getRoutes: () =>
-      [
-        {
-          async lazy() {
-            const { OpenApiRoute } = await import("./Route.js");
-            return {
-              element: <OpenApiRoute client={client} config={config} />,
-            };
-          },
-          children: [
-            {
-              path: basePath,
-              children: [
-                {
-                  index: true,
-                  async lazy() {
-                    const { OperationList } = await import(
-                      "./OperationList.js"
-                    );
-                    return { element: <OperationList /> };
-                  },
-                },
-              ],
-            },
-          ],
+    getRoutes: () => [
+      {
+        path: basePath + "/:version?",
+        async lazy() {
+          const { OpenApiRoute } = await import("./Route.js");
+          return {
+            element: (
+              <OpenApiRoute
+                basePath={basePath}
+                versions={versions}
+                client={client}
+                config={config}
+              />
+            ),
+          };
         },
-      ] satisfies RouteObject[],
+        children: [
+          {
+            index: true,
+            async lazy() {
+              const { OperationList } = await import("./OperationList.js");
+              return { element: <OperationList /> };
+            },
+          },
+        ],
+      },
+    ],
   };
 };

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,6 +1,19 @@
 type OasSource =
   | { type: "url"; input: string }
-  | { type: "file"; input: any }
+  | {
+      type: "file";
+      input: {
+        [version: string]: () => Promise<unknown>;
+      };
+    }
+  | { type: "raw"; input: string };
+
+export type ContextOasSource =
+  | { type: "url"; input: string }
+  | {
+      type: "file";
+      input: () => Promise<unknown>;
+    }
   | { type: "raw"; input: string };
 
 export type OasPluginConfig = {
@@ -8,3 +21,11 @@ export type OasPluginConfig = {
   navigationId?: string;
   skipPreload?: boolean;
 } & OasSource;
+
+export type OasPluginContext = {
+  server?: string;
+  navigationId?: string;
+  skipPreload?: boolean;
+  version: string;
+  versions: Record<string, string>;
+} & ContextOasSource;

package/src/lib/plugins/openapi/playground/PathParams.tsx

@@ -50,6 +50,7 @@ export const PathParams = ({
                   render={({ field }) => (
                     <Input
                       {...field}
+                      required
                       placeholder="Enter value"
                       className="border-0 shadow-none ring-0 font-mono text-xs"
                     />