zudoku 0.0.0-feat-bundled-types.9aa135e → 0.0.0-feat-openapi-docs-redesign.dab3fc6a

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

@@ -1,21 +1,13 @@
-import { useEffect, useMemo, useState } from "react";
-import { type SchemaObject } from "../../oas/parser/index.js";
+import { ExternalLinkIcon } from "lucide-react";
+import { Badge } from "zudoku/ui/Badge.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
-import { CollapsibleCode } from "./CollapsibleCode.js";
-import type { OperationListItemResult } from "./OperationList.js";
+import { NonHighlightedCode } from "./components/NonHighlightedCode.js";
+import type { MediaTypeObject } from "./graphql/graphql.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 formatForDisplay = (value: unknown): string => {
-  if (value == null) return "No example";
+const formatForDisplay = (value: unknown): string | undefined => {
+  if (value == null) return;
   if (typeof value === "string") return value.trim();
   return JSON.stringify(value, null, 2);
 };
@@ -40,73 +32,66 @@ const getLanguage = (mediaType?: string): string => {
 };
 
 export type SidecarExamplesProps = {
-  content: Content;
+  content: MediaTypeObject[];
   description?: string;
-  onExampleChange?: (example: unknown) => void;
+  selectedContentIndex: number;
+  selectedExampleIndex: number;
+  onExampleChange?: ({
+    contentTypeIndex,
+    exampleIndex,
+  }: {
+    contentTypeIndex: number;
+    exampleIndex: number;
+  }) => void;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
 };
 
 export const SidecarExamples = ({
   content,
   description,
   onExampleChange,
+  selectedContentIndex,
+  selectedExampleIndex,
+  isOnScreen,
+  shouldLazyHighlight,
 }: SidecarExamplesProps) => {
-  const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
-  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
-
-  // Get the effective content (handle single item array case)
-  const effectiveContent =
-    Array.isArray(content) && content.length === 1
-      ? content[0]
-      : content[selectedContentTypeIndex];
-
   // Get example value, with fallback to schema-generated example
-  const examples = effectiveContent?.examples ?? [];
-  const selectedExample = examples[selectedExampleIndex];
-
-  const exampleValue = useMemo(() => {
-    if (selectedExample) {
-      // If it's a wrapped example with a value field, use that
-      return "value" in selectedExample
-        ? selectedExample.value
-        : selectedExample;
-    } else if (effectiveContent?.schema) {
-      // No example provided, generate one from schema
-      return generateSchemaExample(effectiveContent.schema as SchemaObject);
-    }
-  }, [selectedExample, effectiveContent?.schema]);
-
-  useEffect(() => {
-    if (!exampleValue) return;
-
-    onExampleChange?.(exampleValue);
-  }, [exampleValue, onExampleChange]);
+  const selectedContent = content[selectedContentIndex];
+  const examples = selectedContent?.examples ?? [];
+  const selectedExample = examples?.[selectedExampleIndex];
 
-  const formattedExample = formatForDisplay(exampleValue);
-  const language = getLanguage(effectiveContent?.mediaType);
+  const formattedExample = formatForDisplay(selectedExample?.value);
+  const language = getLanguage(selectedContent?.mediaType);
 
   return (
     <>
       <SidecarBox.Body className="p-0">
         {selectedExample?.externalValue ? (
-          <div className="p-2">
+          <div className="p-4">
             <a
               href={selectedExample.externalValue}
               target="_blank"
               rel="noopener noreferrer"
               className="text-xs text-primary hover:underline"
             >
-              View External Example →
+              View External Example
+              <ExternalLinkIcon className="size-3 inline-block ms-1 align-[-0.125em]" />
             </a>
           </div>
+        ) : shouldLazyHighlight && !isOnScreen && formattedExample ? (
+          <NonHighlightedCode code={formattedExample} />
+        ) : formattedExample ? (
+          <SyntaxHighlight
+            embedded
+            language={language}
+            className="[--scrollbar-color:gray] rounded-none max-h-[200px] text-xs overflow-auto"
+            code={formattedExample}
+          />
         ) : (
-          <CollapsibleCode>
-            <SyntaxHighlight
-              language={language}
-              noBackground
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
-              code={formattedExample}
-            />
-          </CollapsibleCode>
+          <div className="grid place-items-center text-xs text-muted-foreground min-h-18">
+            No example specified for this content type
+          </div>
         )}
         {selectedExample?.description && (
           <div className="border-t text-xs px-3 py-1.5 text-muted-foreground">
@@ -114,51 +99,72 @@ export const SidecarExamples = ({
           </div>
         )}
       </SidecarBox.Body>
-      <SidecarBox.Footer className="text-xs p-0 divide-y divide-border">
+      <SidecarBox.Footer className="text-xs">
         {description && (
-          <div className="text-muted-foreground text-xs px-3 py-2">
+          <div className="text-muted-foreground text-xs px-1 py-2">
             {description}
           </div>
         )}
         {(examples.length !== 0 || content.length !== 0) && (
-          <div className="flex items-center gap-2 justify-between min-w-0 px-3 py-2">
-            <div className="flex items-center gap-2 min-w-0">
+          <div className="flex items-center gap-2 justify-between min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
               {content.length > 1 ? (
-                <SimpleSelect
-                  className="max-w-[200px]"
-                  value={selectedContentTypeIndex.toString()}
+                <NativeSelect
+                  className="text-xs h-fit py-1 truncate bg-background"
+                  value={selectedContentIndex.toString()}
                   onChange={(e) =>
-                    setSelectedContentTypeIndex(Number(e.target.value))
+                    onExampleChange?.({
+                      contentTypeIndex: Number(e.target.value),
+                      exampleIndex: 0,
+                    })
                   }
-                  options={content.map((c, index) => ({
-                    value: index.toString(),
-                    label: c.mediaType,
-                  }))}
-                />
+                >
+                  {content.map((c, index) => (
+                    <NativeSelectOption
+                      key={c.mediaType}
+                      value={index.toString()}
+                    >
+                      {c.mediaType}
+                    </NativeSelectOption>
+                  ))}
+                </NativeSelect>
               ) : (
-                <span className="font-mono text-[11px]">
+                <Badge
+                  className="text-[11px] font-mono font-normal"
+                  variant="outline"
+                >
                   {content[0]?.mediaType}
-                </span>
+                </Badge>
               )}
             </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:
+              <NativeSelect
+                className="text-xs h-fit py-1 truncate bg-background"
+                value={selectedExampleIndex.toString()}
+                onChange={(e) =>
+                  onExampleChange?.({
+                    contentTypeIndex: selectedContentIndex,
+                    exampleIndex: Number(e.target.value),
+                  })
+                }
+              >
+                {examples.map((example, index) => (
+                  <NativeSelectOption
+                    key={
                       example.summary ||
                       example.name ||
                       example.description ||
-                      `Example ${index + 1}`,
-                  }))}
-                />
-              </div>
+                      `Example ${index + 1}`
+                    }
+                    value={index.toString()}
+                  >
+                    {example.summary ||
+                      example.name ||
+                      example.description ||
+                      `Example ${index + 1}`}
+                  </NativeSelectOption>
+                ))}
+              </NativeSelect>
             )}
           </div>
         )}

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

@@ -1,7 +1,7 @@
 import {
   Children,
   createContext,
-  ReactNode,
+  type ReactNode,
   useContext,
   useEffect,
   useState,

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

@@ -1,5 +1,5 @@
 import { createContext, type ReactNode } from "react";
-import { GraphQLClient } from "./GraphQLClient.js";
+import type { GraphQLClient } from "./GraphQLClient.js";
 
 export const GraphQLContext = createContext<GraphQLClient | undefined>(
   undefined,

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

@@ -13,7 +13,6 @@ export const createServer = (config: OpenApiPluginOptions) =>
       schemaImports: config.schemaImports,
     },
     plugins: [
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       useLogger({
         logFn: (eventName, { args }) => {
           if (import.meta.env.PROD) return;
@@ -24,7 +23,7 @@ export const createServer = (config: OpenApiPluginOptions) =>
             const startEvent = eventName.replace("-end", "-start");
             const start = map.get(`${startEvent}-${args.operationName}`);
             if (start) {
-              // eslint-disable-next-line no-console
+              // biome-ignore lint/suspicious/noConsole: Logging allowed here
               console.log(
                 `[zudoku:debug] ${args.operationName} query took ${performance.now() - start}ms`,
               );

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

@@ -8,8 +8,9 @@ type NoExtraProps<T, U extends T = T> = U & {
   [K in Exclude<keyof U, keyof T>]?: never;
 };
 
-type VarArgs<TVariables> =
-  TVariables extends Record<string, never> ? [] : [NoExtraProps<TVariables>];
+type VarArgs<TVariables> = TVariables extends Record<string, never>
+  ? []
+  : [NoExtraProps<TVariables>];
 
 export const createQuery = <TResult, TVariables>(
   client: GraphQLClient,

package/src/lib/plugins/openapi/components/ConstValue.tsx

@@ -9,7 +9,7 @@ export const ConstValue = ({
   hideDescription?: boolean;
 }) => {
   return (
-    <div className="flex flex-col gap-1 text-xs">
+    <div className="flex flex-col gap-1">
       <div>
         <span className="text-muted-foreground">Const value: </span>
         <SelectOnClick className="border rounded px-1 font-mono">

package/src/lib/plugins/openapi/components/EnumValues.tsx

@@ -22,8 +22,8 @@ export const EnumValues = ({
     shouldCollapse && !isOpen ? values.slice(0, maxVisibleValues) : values;
 
   return (
-    <div className={cn("flex flex-wrap gap-1.5 text-xs", className)}>
-      <span className="text-muted-foreground">Enum values: </span>
+    <div className={cn("flex flex-wrap gap-1.5", className)}>
+      <span className="text-muted-foreground">Enum values:</span>
       {visibleValues.map((value) => (
         <div key={value}>
           <SelectOnClick className="border rounded-sm px-1 font-mono">

package/src/lib/plugins/openapi/components/NonHighlightedCode.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../../../util/cn.js";
+import { OverflowOverlay } from "../CollapsibleCode.js";
+
+export const NonHighlightedCode = ({
+  code,
+  className,
+}: {
+  code: string;
+  className?: string;
+}) => (
+  <pre
+    className={cn(
+      "relative text-(--shiki-light) dark:text-(--shiki-dark) p-2 text-xs font-mono max-h-[250px] leading-4.5 bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg) overflow-hidden",
+      className,
+    )}
+  >
+    <code>
+      {code.split("\n").length > 13 && <OverflowOverlay />}
+      {code}
+    </code>
+  </pre>
+);

package/src/lib/plugins/openapi/components/ResponseContent.tsx

@@ -1,13 +1,8 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { useState } from "react";
 import { Markdown } from "zudoku/components";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "zudoku/ui/Select.js";
+import { Badge } from "zudoku/ui/Badge.js";
+import { NativeSelect, NativeSelectOption } from "zudoku/ui/NativeSelect.js";
 import { cn } from "zudoku/ui/util.js";
 import type { MediaTypeObject } from "../graphql/graphql.js";
 import { SchemaView } from "../schema/SchemaView.js";
@@ -33,48 +28,61 @@ export const ResponseContent = ({
   const currentResponse =
     responses.find((r) => r.statusCode === selectedResponse) ?? responses[0];
 
+  const hideTabs =
+    responses.length === 1 && responses.at(0)?.statusCode === "200";
+
   const cardHeader = (
-    <div className="flex flex-col bg-muted text-muted-foreground">
-      <div className="flex flex-row items-center gap-2 justify-between px-4 py-2">
-        <Tabs.List className="flex flex-row font-medium text-sm gap-4">
-          {responses.map((response) => (
-            <Tabs.Trigger
-              key={response.statusCode}
-              value={response.statusCode}
-              className={cn(
-                "py-1 -mx-2 px-2 rounded-md",
-                "data-[state=active]:dark:ring-1 data-[state=active]:dark:ring-border data-[state=active]:bg-background data-[state=active]:drop-shadow",
-                "data-[state=active]:font-semibold data-[state=active]:text-foreground",
-              )}
-            >
-              {response.statusCode}
-            </Tabs.Trigger>
-          ))}
-        </Tabs.List>
+    <div className="flex flex-col text-muted-foreground">
+      <div
+        className={cn(
+          "flex flex-row items-center gap-2 justify-between",
+          !hideTabs && "px-4 py-1.5 border-b",
+        )}
+      >
+        {!hideTabs && (
+          <Tabs.List className="flex flex-row font-medium text-sm gap-4">
+            {responses.map((response) => (
+              <Tabs.Trigger
+                key={response.statusCode}
+                value={response.statusCode}
+                className={cn(
+                  "py-0.5 h-fit -mx-2 px-2 rounded-md",
+                  "data-[state=active]:dark:ring-1 data-[state=active]:dark:ring-border data-[state=active]:bg-background data-[state=active]:drop-shadow",
+                  "data-[state=active]:font-semibold data-[state=active]:text-foreground",
+                )}
+              >
+                {response.statusCode}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        )}
         {currentResponse?.content && currentResponse.content.length > 1 && (
-          <Select
+          <NativeSelect
             value={selectedMediaType}
-            onValueChange={setSelectedMediaType}
+            onChange={(e) => setSelectedMediaType(e.target.value)}
+            className="text-xs h-fit py-1 bg-background"
           >
-            <SelectTrigger className="h-8 mt-0 max-w-48 text-xs truncate">
-              <SelectValue placeholder="Select a type" />
-            </SelectTrigger>
-            <SelectContent>
-              {currentResponse.content.map((c) => (
-                <SelectItem key={c.mediaType} value={c.mediaType}>
-                  {c.mediaType}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+            {currentResponse.content.map((c) => (
+              <NativeSelectOption key={c.mediaType} value={c.mediaType}>
+                {c.mediaType}
+              </NativeSelectOption>
+            ))}
+          </NativeSelect>
+        )}
+      </div>
+      <div className="p-2 clear-both">
+        {hideTabs && (
+          <Badge variant="outline" className="float-start me-2">
+            {currentResponse?.statusCode}
+          </Badge>
+        )}
+        {currentResponse?.description && (
+          <Markdown
+            className="text-sm text-muted-foreground max-w-none"
+            content={currentResponse.description}
+          />
         )}
       </div>
-      {currentResponse?.description && (
-        <Markdown
-          className="text-sm border-t px-4 py-2 text-muted-foreground"
-          content={currentResponse.description}
-        />
-      )}
     </div>
   );
 
@@ -88,16 +96,18 @@ export const ResponseContent = ({
           setSelectedMediaType(newResponse?.content?.[0]?.mediaType ?? "");
         }}
       >
-        {responses.map((response) => {
-          const content = response.content?.find(
-            (c) => c.mediaType === selectedMediaType,
-          );
-          return (
-            <Tabs.Content key={response.statusCode} value={response.statusCode}>
-              <SchemaView schema={content?.schema} cardHeader={cardHeader} />
-            </Tabs.Content>
-          );
-        })}
+        {responses.map((response) => (
+          <Tabs.Content key={response.statusCode} value={response.statusCode}>
+            <SchemaView
+              schema={
+                response.content?.find(
+                  (content) => content.mediaType === selectedMediaType,
+                )?.schema
+              }
+              cardHeader={cardHeader}
+            />
+          </Tabs.Content>
+        ))}
       </Tabs.Root>
     </div>
   );

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

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

package/src/lib/plugins/openapi/graphql/fragment-masking.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type {
-  DocumentTypeDecoration,
   ResultOf,
+  DocumentTypeDecoration,
 } from "@graphql-typed-document-node/core";
 import type { Incremental, TypedDocumentString } from "./graphql.js";
 

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

@@ -14,28 +14,28 @@ import * as types from "./graphql.js";
  */
 type Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.ServersQueryDocument;
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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": typeof types.OperationsFragmentFragmentDoc;
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    servers {\n      url\n      description\n    }\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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": typeof types.OperationsFragmentFragmentDoc;
   "\n  query SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n": typeof types.SchemaWarmupDocument;
-  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
+  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        extensions\n        next {\n          name\n          slug\n          extensions\n        }\n        prev {\n          name\n          slug\n          extensions\n        }\n      }\n    }\n  }\n": typeof types.OperationsForTagDocument;
   "\n  query GetSchemas($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      title\n      description\n      summary\n      components {\n        schemas {\n          name\n          schema\n          extensions\n        }\n      }\n    }\n  }\n": typeof types.GetSchemasDocument;
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n": typeof types.GetServerQueryDocument;
-  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetSidebarOperationsDocument;
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n": typeof types.GetNavigationOperationsDocument;
 };
 const documents: Documents = {
   "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.ServersQueryDocument,
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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":
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    servers {\n      url\n      description\n    }\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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 SchemaWarmup($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      openapi\n    }\n  }\n":
     types.SchemaWarmupDocument,
-  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n":
+  "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        extensions\n        next {\n          name\n          slug\n          extensions\n        }\n        prev {\n          name\n          slug\n          extensions\n        }\n      }\n    }\n  }\n":
     types.OperationsForTagDocument,
   "\n  query GetSchemas($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      title\n      description\n      summary\n      components {\n        schemas {\n          name\n          schema\n          extensions\n        }\n      }\n    }\n  }\n":
     types.GetSchemasDocument,
   "\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,
-  "\n  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
-    types.GetSidebarOperationsDocument,
+  "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n":
+    types.GetNavigationOperationsDocument,
 };
 
 /**
@@ -48,7 +48,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  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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",
+  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    deprecated\n    extensions\n    servers {\n      url\n      description\n    }\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      explode\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",
 ): typeof import("./graphql.js").OperationsFragmentFragmentDoc;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
@@ -60,7 +60,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 OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\n        }\n      }\n    }\n  }\n",
+  source: "\n  query OperationsForTag(\n    $input: JSON!\n    $type: SchemaType!\n    $tag: String\n    $untagged: Boolean\n  ) {\n    schema(input: $input, type: $type) {\n      servers {\n        url\n      }\n      description\n      summary\n      title\n      url\n      version\n      tag(slug: $tag, untagged: $untagged) {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n        extensions\n        next {\n          name\n          slug\n          extensions\n        }\n        prev {\n          name\n          slug\n          extensions\n        }\n      }\n    }\n  }\n",
 ): typeof import("./graphql.js").OperationsForTagDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
@@ -78,8 +78,8 @@ 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 GetSidebarOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
-): typeof import("./graphql.js").GetSidebarOperationsDocument;
+  source: "\n  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      extensions\n      tags {\n        slug\n        name\n        extensions\n        operations {\n          summary\n          slug\n          method\n          operationId\n          path\n        }\n      }\n      components {\n        schemas {\n          __typename\n        }\n      }\n    }\n  }\n",
+): typeof import("./graphql.js").GetNavigationOperationsDocument;
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};