zudoku 0.0.0-efc60ba6 → 0.0.0-efe3cd16

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

@@ -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}`);
 };
 
 /**

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

@@ -16,7 +16,6 @@ import {
 } from "lucide-react";
 import { AnimatePresence } from "motion/react";
 import React, { useState } from "react";
-import { Link } from "react-router";
 import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
 import { Card, CardHeader } from "zudoku/ui/Card.js";
 import {
@@ -29,14 +28,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "zudoku/ui/Dialog.js";
+import { Secret } from "zudoku/ui/Secret.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Slot } from "../../components/Slot.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
 import { useCopyToClipboard } from "../../util/useCopyToClipboard.js";
-import { CreateApiKey } from "./CreateApiKey.js";
-import { type ApiConsumer, type ApiKey, type ApiKeyService } from "./index.js";
+import { CreateApiKeyDialog } from "./CreateApiKeyDialog.js";
+import type { ApiConsumer, ApiKey, ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useZudoku();
@@ -90,7 +90,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -136,7 +136,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -186,23 +186,11 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
         <h1 className="font-medium text-2xl">API Keys</h1>
 
         {service.createKey && (
-          <Dialog
-            open={isCreateApiKeyOpen}
+          <CreateApiKeyDialog
+            service={service}
+            isOpen={isCreateApiKeyOpen}
             onOpenChange={setIsCreateApiKeyOpen}
-          >
-            <DialogTrigger asChild>
-              <Button variant="outline">Create API Key</Button>
-            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Create API Key</DialogTitle>
-              </DialogHeader>
-              <CreateApiKey
-                service={service}
-                onOpenChange={setIsCreateApiKeyOpen}
-              />
-            </DialogContent>
-          </Dialog>
+          />
         )}
       </div>
       <p>Create, manage, and monitor your API keys</p>
@@ -236,9 +224,11 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
               {service.createKey && "Get started and create your first key."}
             </p>
             {service.createKey && (
-              <Button asChild variant="outline">
-                <Link to="/settings/api-keys/new">Create API Key</Link>
-              </Button>
+              <CreateApiKeyDialog
+                service={service}
+                isOpen={isCreateApiKeyOpen}
+                onOpenChange={setIsCreateApiKeyOpen}
+              />
             )}
           </div>
         ) : (
@@ -290,7 +280,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                           </div>
                         </div>
                       ) : (
-                        <>{consumers.label}</>
+                        consumers.label
                       )}
                       <div className="text-muted-foreground text-xs">
                         {consumers.createdOn}
@@ -444,8 +434,7 @@ const RevealApiKey = ({
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
   const daysUntilExpiry = expiresOn
     ? Math.ceil(
-        (new Date(expiresOn).getTime() - new Date().getTime()) /
-          (1000 * 60 * 60 * 24),
+        (new Date(expiresOn).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
       )
     : Infinity;
   const expiresSoon = daysUntilExpiry <= 7 && !isExpired;
@@ -454,28 +443,11 @@ const RevealApiKey = ({
     <div className={cn("grid col-span-full grid-cols-subgrid p-6", className)}>
       <div className="flex flex-col gap-1">
         <div className="flex gap-2 items-center text-sm border rounded-md w-full max-w-fit px-1">
-          <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
-            <div
-              className={cn(
-                "rounded-full w-2 h-2 bg-emerald-400 mr-2",
-                (expiresSoon || isExpired) && "bg-neutral-200",
-              )}
-            ></div>
-            <span className="w-full truncate">
-              <div
-                className={cn(
-                  "w-40 inline-block md:w-full truncate",
-                  revealed ? "" : "opacity-20",
-                )}
-              >
-                {revealed
-                  ? key.slice(0, -5)
-                  : "**** ".repeat(key.slice(0, -5).length / 5) +
-                    "*".repeat(key.slice(0, -5).length % 5)}
-              </div>
-              <span>{key.slice(-5)}</span>
-            </span>
-          </div>
+          <Secret
+            className="max-w-fit w-full"
+            secret={key}
+            status={isExpired ? "expired" : expiresSoon ? "expiring" : "active"}
+          />
           <Button
             variant="ghost"
             onClick={() => setRevealed((prev) => !prev)}

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

@@ -1,12 +1,12 @@
 import { KeyRoundIcon } from "lucide-react";
-import { type RouteObject } from "react-router";
-import { UseAuthReturn } from "../../authentication/hook.js";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
-import {
-  type ApiIdentityPlugin,
-  type ProfileMenuPlugin,
-  type ZudokuPlugin,
+import type { RouteObject } from "react-router";
+import type { UseAuthReturn } from "../../authentication/hook.js";
+import type {
+  ApiIdentityPlugin,
+  ProfileMenuPlugin,
+  ZudokuPlugin,
 } from "../../core/plugins.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { RouterError } from "../../errors/RouterError.js";
 import invariant from "../../util/invariant.js";
 import { ProtectedRoute } from "./ProtectedRoute.js";
@@ -140,7 +140,7 @@ const createDefaultHandler = (
     },
     getConsumers: async (context) => {
       const request = new Request(
-        DEFAULT_API_KEY_ENDPOINT + `/${deploymentName}/consumers`,
+        `${DEFAULT_API_KEY_ENDPOINT}/${deploymentName}/consumers`,
       );
       await context.signRequest(request);
 

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { RouteObject } from "react-router";
 import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import { traverseNavigation } from "../../components/navigation/utils.js";
@@ -20,6 +20,9 @@ export const customPagesPlugin = (
         customPages.push({
           path: item.path,
           element: item.element,
+          handle: {
+            layout: item.layout ?? "default",
+          },
         });
       }
     });

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

@@ -6,15 +6,15 @@ import { type PropsWithChildren, useEffect } from "react";
 import { Button } from "zudoku/ui/Button.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { Heading } from "../../components/Heading.js";
-import { Pagination } from "../../components/Pagination.js";
-import { Typography } from "../../components/Typography.js";
 import { Toc } from "../../components/navigation/Toc.js";
 import {
   useCurrentItem,
   usePrevNext,
 } from "../../components/navigation/utils.js";
+import { Pagination } from "../../components/Pagination.js";
+import { Typography } from "../../components/Typography.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
-import { type MarkdownPluginDefaultOptions, type MDXImport } from "./index.js";
+import type { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
 declare global {
   interface Window {
@@ -157,7 +157,7 @@ export const MdxPage = ({
                   >
                     Last modified on{" "}
                     <time dateTime={lastModifiedDate.toISOString()}>
-                      {lastModifiedDate.toLocaleDateString(undefined, {
+                      {lastModifiedDate.toLocaleDateString("en-US", {
                         dateStyle: "long",
                       })}
                     </time>
@@ -171,8 +171,8 @@ export const MdxPage = ({
           <>
             <div className="h-px bg-border mt-2 mb-6" />
             <Pagination
-              prev={prev ? { to: prev.id, label: prev.label } : undefined}
-              next={next ? { to: next.id, label: next.label } : undefined}
+              prev={prev ? { to: prev.id, label: prev.label ?? "" } : undefined}
+              next={next ? { to: next.id, label: next.label ?? "" } : undefined}
               className="mb-10"
             />
           </>

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

@@ -1,6 +1,6 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
-import { type JSX } from "react";
+import type { JSX } from "react";
 import type { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 

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

@@ -1,5 +1,5 @@
 import { useTheme } from "next-themes";
-import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import { type CSSProperties, type ReactNode, useEffect, useRef } from "react";
 import { cn } from "../../util/cn.js";
 import { pastellize } from "../../util/pastellize.js";
 
@@ -86,6 +86,8 @@ export const ColorizedParam = ({
   }, [normalizedSlug]);
 
   return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Just passing props through
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Just passing props through
     <span
       {...{ [DATA_ATTR]: normalizedSlug }}
       className={cn(

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

@@ -54,9 +54,9 @@ export const Endpoint = () => {
 
   const { servers } = result.data.schema;
 
-  if (servers.length === 0) return null;
+  const firstServer = servers.at(0);
 
-  const firstServer = servers.at(0)!;
+  if (!firstServer) return null;
 
   if (servers.length === 1) {
     return (

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

@@ -4,7 +4,7 @@ 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 { type OasPluginConfig } from "./interfaces.js";
+import type { OasPluginConfig } from "./interfaces.js";
 import { getVersions } from "./util/getRoutes.js";
 
 export const OasProvider = ({
@@ -25,6 +25,7 @@ export const OasProvider = ({
       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 };

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

@@ -1,4 +1,3 @@
-import { type ResultOf } from "@graphql-typed-document-node/core";
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { ChevronsDownUpIcon, ChevronsUpDownIcon } from "lucide-react";
@@ -16,16 +15,16 @@ import {
   SelectValue,
 } from "zudoku/ui/Select.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { useApiIdentities } from "../../components/context/ZudokuContext.js";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
 import { Pagination } from "../../components/Pagination.js";
-import { useApiIdentities } from "../../components/context/ZudokuContext.js";
-import { Endpoint } from "./Endpoint.js";
-import { OperationListItem } from "./OperationListItem.js";
 import { useCreateQuery } from "./client/useCreateQuery.js";
 import { useOasConfig } from "./context.js";
+import { Endpoint } from "./Endpoint.js";
 import { graphql } from "./graphql/index.js";
 import { UNTAGGED_PATH } from "./index.js";
+import { OperationListItem } from "./OperationListItem.js";
 import { useSelectedServer } from "./state.js";
 import { sanitizeMarkdownForMetatag } from "./util/sanitizeMarkdownForMetatag.js";
 
@@ -96,8 +95,6 @@ export const OperationsFragment = graphql(/* GraphQL */ `
   }
 `);
 
-export type OperationListItemResult = ResultOf<typeof OperationsFragment>;
-
 const SchemaWarmupQuery = graphql(/* GraphQL */ `
   query SchemaWarmup($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
@@ -129,6 +126,7 @@ const OperationsForTagQuery = graphql(/* GraphQL */ `
           slug
           ...OperationsFragment
         }
+        extensions
         next {
           name
           slug
@@ -220,7 +218,8 @@ export const OperationList = ({
       : undefined,
   };
 
-  const helmetTitle = [schema.tag.name, title].filter(Boolean).join(" - ");
+  const tagTitle = schema.tag.extensions?.["x-displayName"] ?? schema.tag.name;
+  const helmetTitle = [tagTitle, title].filter(Boolean).join(" - ");
 
   return (
     <div
@@ -245,7 +244,7 @@ export const OperationList = ({
                 registerNavigationAnchor
                 className="mb-0"
               >
-                {schema.tag.name ?? "Documentation"}
+                {tagTitle}
                 {showVersions && (
                   <span className="text-xl text-muted-foreground ms-1.5">
                     {" "}
@@ -258,6 +257,7 @@ export const OperationList = ({
             <div className="flex flex-col gap-4 sm:items-end">
               {showVersions && (
                 <Select
+                  // biome-ignore lint/style/noNonNullAssertion: is guaranteed to be defined
                   onValueChange={(version) => navigate(versions[version]!)}
                   defaultValue={version}
                   disabled={!hasMultipleVersions}

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

@@ -6,13 +6,13 @@ import { Markdown } from "../../components/Markdown.js";
 import { cn } from "../../util/cn.js";
 import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
-import { OperationsFragment } from "./OperationList.js";
-import { ParameterList } from "./ParameterList.js";
-import { Sidecar } from "./Sidecar.js";
 import { ResponseContent } from "./components/ResponseContent.js";
 import { SelectOnClick } from "./components/SelectOnClick.js";
 import { useOasConfig } from "./context.js";
 import { type FragmentType, useFragment } from "./graphql/index.js";
+import { OperationsFragment } from "./OperationList.js";
+import { ParameterList } from "./ParameterList.js";
+import { Sidecar } from "./Sidecar.js";
 import { SchemaView } from "./schema/SchemaView.js";
 import { methodForColor } from "./util/methodToColor.js";
 
@@ -86,23 +86,21 @@ export const OperationListItem = ({
               content={operation.description}
             />
           )}
-          {operation.parameters && operation.parameters.length > 0 && (
-            <>
-              {PARAM_GROUPS.flatMap((group) =>
-                groupedParameters[group]?.length ? (
-                  <ParameterList
-                    key={group}
-                    summary={operation.summary ?? undefined}
-                    id={operation.slug}
-                    parameters={groupedParameters[group]}
-                    group={group}
-                  />
-                ) : (
-                  []
-                ),
-              )}
-            </>
-          )}
+          {operation.parameters &&
+            operation.parameters.length > 0 &&
+            PARAM_GROUPS.flatMap((group) =>
+              groupedParameters[group]?.length ? (
+                <ParameterList
+                  key={group}
+                  summary={operation.summary ?? undefined}
+                  id={operation.slug}
+                  parameters={groupedParameters[group]}
+                  group={group}
+                />
+              ) : (
+                []
+              ),
+            )}
           {renderIf(operation.requestBody?.content?.at(0)?.schema, (schema) => (
             <div className="mt-4 flex flex-col gap-4">
               <Heading

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

@@ -1,7 +1,7 @@
 import { ChevronsLeftRightIcon } from "lucide-react";
 import { isValidElement, useState } from "react";
 import { InlineCode } from "../../components/InlineCode.js";
-import { type SchemaObject } from "../../oas/parser/index.js";
+import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 
 const Pattern = ({ pattern }: { pattern: string }) => {
@@ -40,15 +40,15 @@ const getSchemaInfos = (schema?: SchemaObject) => {
     schema.enum && "enum",
     schema.const && "const",
     schema.format,
-    schema.minimum && `min: ${schema.minimum}`,
-    schema.maximum && `max: ${schema.maximum}`,
-    schema.minLength && `minLength: ${schema.minLength}`,
-    schema.maxLength && `maxLength: ${schema.maxLength}`,
-    schema.minItems && `minItems: ${schema.minItems}`,
-    schema.maxItems && `maxItems: ${schema.maxItems}`,
+    schema.minimum !== undefined && `min: ${schema.minimum}`,
+    schema.maximum !== undefined && `max: ${schema.maximum}`,
+    schema.minLength !== undefined && `minLength: ${schema.minLength}`,
+    schema.maxLength !== undefined && `maxLength: ${schema.maxLength}`,
+    schema.minItems !== undefined && `minItems: ${schema.minItems}`,
+    schema.maxItems !== undefined && `maxItems: ${schema.maxItems}`,
+    schema.minProperties !== undefined && `minProps: ${schema.minProperties}`,
+    schema.maxProperties !== undefined && `maxProps: ${schema.maxProperties}`,
     schema.uniqueItems && "unique",
-    schema.minProperties && `minProps: ${schema.minProperties}`,
-    schema.maxProperties && `maxProps: ${schema.maxProperties}`,
     schema.readOnly && "readOnly",
     schema.writeOnly && "writeOnly",
     schema.deprecated && "deprecated",
@@ -76,6 +76,7 @@ export const ParamInfos = ({
   return (
     <span className={className}>
       {filteredItems.map((item, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: index should be stable
         <span className="text-muted-foreground" key={index}>
           {item}
           {index < filteredItems.length - 1 && (

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

@@ -1,11 +1,9 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { Heading } from "../../components/Heading.js";
 import { Card } from "../../ui/Card.js";
+import type { ParameterItem } from "./graphql/graphql.js";
 import type { ParameterGroup } from "./OperationListItem.js";
-import {
-  ParameterListItem,
-  type ParameterListItemResult,
-} from "./ParameterListItem.js";
+import { ParameterListItem } from "./ParameterListItem.js";
 
 export const ParameterList = ({
   summary,
@@ -15,7 +13,7 @@ export const ParameterList = ({
 }: {
   summary?: string;
   group: ParameterGroup;
-  parameters: ParameterListItemResult[];
+  parameters: ParameterItem[];
   id: string;
 }) => (
   <>