zudoku 0.0.0-f06d326 → 0.0.0-f0b4321

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

@@ -1,8 +1,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
-import { useZudoku } from "zudoku/components";
+import { useZudoku } from "zudoku/hooks";
 import { useAuthState } from "../../authentication/state.js";
 import { PathRenderer } from "../../components/PathRenderer.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
@@ -21,53 +20,10 @@ import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
 import { useSelectedServer } from "./state.js";
+import { createHttpSnippet, getConverted } from "./util/createHttpSnippet.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { methodForColor } from "./util/methodToColor.js";
 
-const getConverted = (snippet: HTTPSnippet, option: string) => {
-  let converted;
-  switch (option) {
-    case "shell":
-      converted = snippet.convert("shell", "curl");
-      break;
-    case "js":
-      converted = snippet.convert("javascript", "fetch");
-      break;
-    case "python":
-      converted = snippet.convert("python", "requests");
-      break;
-    case "java":
-      converted = snippet.convert("java", "okhttp");
-      break;
-    case "go":
-      converted = snippet.convert("go", "native");
-      break;
-    case "csharp":
-      converted = snippet.convert("csharp", "httpclient");
-      break;
-    case "kotlin":
-      converted = snippet.convert("kotlin", "okhttp");
-      break;
-    case "objc":
-      converted = snippet.convert("objc", "nsurlsession");
-      break;
-    case "php":
-      converted = snippet.convert("php", "http2");
-      break;
-    case "ruby":
-      converted = snippet.convert("ruby");
-      break;
-    case "swift":
-      converted = snippet.convert("swift");
-      break;
-    default:
-      converted = snippet.convert("shell");
-      break;
-  }
-
-  return converted ? converted[0] : "";
-};
-
 export const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
@@ -149,7 +105,7 @@ export const Sidecar = ({
   const { selectedServer } = useSelectedServer(result.data.schema.servers);
 
   const code = useMemo(() => {
-    const example =
+    const exampleBody =
       selectedExample ??
       (transformedRequestBodyContent?.[0]?.schema
         ? generateSchemaExample(
@@ -157,31 +113,22 @@ export const Sidecar = ({
           )
         : undefined);
 
-    const snippet = new HTTPSnippet({
-      method: operation.method.toLocaleUpperCase(),
-      url:
-        selectedServer +
-        operation.path.replaceAll("{", ":").replaceAll("}", ""),
-      postData: example
+    const snippet = createHttpSnippet({
+      operation,
+      selectedServer,
+      exampleBody: exampleBody
         ? {
-            text: JSON.stringify(example, null, 2),
             mimeType: "application/json",
+            text: JSON.stringify(exampleBody, null, 2),
           }
-        : ({} as any),
-      headers: [{ name: "Content-Type", value: "application/json" }],
-      queryString: [],
-      httpVersion: "",
-      cookies: [],
-      headersSize: 0,
-      bodySize: 0,
+        : { mimeType: "application/json" },
     });
 
     return getConverted(snippet, selectedLang);
   }, [
     selectedExample,
     transformedRequestBodyContent,
-    operation.method,
-    operation.path,
+    operation,
     selectedServer,
     selectedLang,
   ]);
@@ -198,14 +145,14 @@ export const Sidecar = ({
   return (
     <aside
       ref={ref}
-      className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4"
+      className="flex flex-col overflow-hidden sticky top-(--scroll-padding) gap-4"
       data-pagefind-ignore="all"
     >
       <SidecarBox.Root>
         <SidecarBox.Head className="flex justify-between items-center flex-nowrap py-2.5 gap-2 text-xs">
           <span className="font-mono break-words leading-6">
             <span className={cn("font-semibold", methodTextColor)}>
-              {operation.method.toLocaleUpperCase()}
+              {operation.method.toUpperCase()}
             </span>
             &nbsp;
             {path}
@@ -223,9 +170,10 @@ export const Sidecar = ({
             <SidecarBox.Body className="p-0">
               <CollapsibleCode>
                 <SyntaxHighlight
+                  embedded
                   language={selectedLang}
                   noBackground
-                  className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
+                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
                   code={code!}
                 />
               </CollapsibleCode>

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

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { SchemaObject } from "../../oas/parser/index.js";
+import { type SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
 import type { OperationListItemResult } from "./OperationList.js";
@@ -22,7 +22,13 @@ const formatForDisplay = (value: unknown): string => {
 
 const getLanguage = (mediaType?: string): string => {
   if (!mediaType) return "plain";
+  if (mediaType.endsWith("+json")) return "json";
+  if (mediaType.endsWith("+xml")) return "xml";
+  if (mediaType.endsWith("+yaml")) return "yaml";
+
   const languages: Record<string, string> = {
+    "text/html": "html",
+    "application/x-ndjson": "json",
     "application/json": "json",
     "application/xml": "xml",
     "application/x-yaml": "yaml",
@@ -95,9 +101,10 @@ export const SidecarExamples = ({
         ) : (
           <CollapsibleCode>
             <SyntaxHighlight
+              embedded
               language={language}
               noBackground
-              className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
+              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
               code={formattedExample}
             />
           </CollapsibleCode>

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

@@ -1,12 +1,29 @@
 import { stripIgnoredCharacters } from "graphql";
 import { use } from "react";
 import type { TypedDocumentString } from "../graphql/graphql.js";
+import type { GraphQLClient } from "./GraphQLClient.js";
 import { GraphQLContext } from "./GraphQLContext.js";
 
 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>];
+
+export const createQuery = <TResult, TVariables>(
+  client: GraphQLClient,
+  query: TypedDocumentString<TResult, TVariables>,
+  ...[variables]: TVariables extends Record<string, never>
+    ? []
+    : [NoExtraProps<TVariables>]
+) => {
+  return {
+    queryFn: () => client.fetch(query, variables),
+    queryKey: [stripIgnoredCharacters(query.toString()), variables],
+  } as const;
+};
+
 export const useCreateQuery = <TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
   ...[variables]: TVariables extends Record<string, never>
@@ -19,8 +36,10 @@ export const useCreateQuery = <TResult, TVariables>(
     throw new Error("useGraphQL must be used within a GraphQLProvider");
   }
 
-  return {
-    queryFn: () => graphQLClient.fetch(query, variables),
-    queryKey: [stripIgnoredCharacters(query.toString()), variables],
-  } as const;
+  const args =
+    variables === undefined
+      ? ([] as VarArgs<TVariables>)
+      : ([variables] as VarArgs<TVariables>);
+
+  return createQuery(graphQLClient, query, ...args);
 };

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

@@ -0,0 +1,24 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "./SelectOnClick.js";
+
+export const ConstValue = ({
+  schema,
+  hideDescription = false,
+}: {
+  schema: SchemaObject;
+  hideDescription?: boolean;
+}) => {
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      <div>
+        <span className="text-muted-foreground">Const value: </span>
+        <SelectOnClick className="border rounded px-1 font-mono">
+          {schema.const}
+        </SelectOnClick>
+        {!hideDescription && schema.description && (
+          <div className="text-muted-foreground">{schema.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -26,7 +26,7 @@ export const EnumValues = ({
       <span className="text-muted-foreground">Enum values: </span>
       {visibleValues.map((value) => (
         <div key={value}>
-          <SelectOnClick className="border rounded px-1 font-mono cursor-pointer">
+          <SelectOnClick className="border rounded-sm px-1 font-mono">
             {value}
           </SelectOnClick>
         </div>

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

@@ -0,0 +1,104 @@
+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 { cn } from "zudoku/ui/util.js";
+import type { MediaTypeObject } from "../graphql/graphql.js";
+import { SchemaView } from "../schema/SchemaView.js";
+
+type Response = {
+  statusCode: string;
+  description?: string | null;
+  content?: MediaTypeObject[] | null;
+};
+
+export const ResponseContent = ({
+  responses,
+  selectedResponse,
+  onSelectResponse,
+}: {
+  responses: Response[];
+  selectedResponse?: string;
+  onSelectResponse?: (value: string) => void;
+}) => {
+  const [selectedMediaType, setSelectedMediaType] = useState(
+    responses[0]?.content?.[0]?.mediaType ?? "",
+  );
+  const currentResponse =
+    responses.find((r) => r.statusCode === selectedResponse) ?? responses[0];
+
+  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>
+        {currentResponse?.content && currentResponse.content.length > 1 && (
+          <Select
+            value={selectedMediaType}
+            onValueChange={setSelectedMediaType}
+          >
+            <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>
+        )}
+      </div>
+      {currentResponse?.description && (
+        <Markdown
+          className="text-sm border-t px-4 py-2 text-muted-foreground"
+          content={currentResponse.description}
+        />
+      )}
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Tabs.Root
+        value={selectedResponse}
+        onValueChange={(value) => {
+          onSelectResponse?.(value);
+          const newResponse = responses.find((r) => r.statusCode === value);
+          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>
+          );
+        })}
+      </Tabs.Root>
+    </div>
+  );
+};

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

@@ -19,7 +19,7 @@ type Documents = {
   "\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 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      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":
@@ -34,8 +34,8 @@ const documents: Documents = {
     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      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,
 };
 
 /**
@@ -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      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] ?? {};

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

@@ -374,12 +374,12 @@ export type GetServerQueryQuery = {
   };
 };
 
-export type GetSidebarOperationsQueryVariables = Exact<{
+export type GetNavigationOperationsQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
 }>;
 
-export type GetSidebarOperationsQuery = {
+export type GetNavigationOperationsQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
@@ -642,8 +642,8 @@ export const GetServerQueryDocument = new TypedDocumentString(`
   GetServerQueryQuery,
   GetServerQueryQueryVariables
 >;
-export const GetSidebarOperationsDocument = new TypedDocumentString(`
-    query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
+export const GetNavigationOperationsDocument = new TypedDocumentString(`
+    query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
     tags {
       slug
@@ -665,6 +665,6 @@ export const GetSidebarOperationsDocument = new TypedDocumentString(`
   }
 }
     `) as unknown as TypedDocumentString<
-  GetSidebarOperationsQuery,
-  GetSidebarOperationsQueryVariables
+  GetNavigationOperationsQuery,
+  GetNavigationOperationsQueryVariables
 >;

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

@@ -6,16 +6,17 @@ import { type ZudokuPlugin } from "../../core/plugins.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
-import type { GetSidebarOperationsQuery } from "./graphql/graphql.js";
+import { createQuery } from "./client/useCreateQuery.js";
+import type { GetNavigationOperationsQuery as GetNavigationOperationsQueryResult } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
-import { createSidebarCategory } from "./util/createSidebarCategory.js";
+import { createNavigationCategory } from "./util/createNavigationCategory.js";
 import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-const GetSidebarOperationsQuery = graphql(`
-  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
+export const GetNavigationOperationsQuery = graphql(`
+  query GetNavigationOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       tags {
         slug
@@ -39,14 +40,14 @@ const GetSidebarOperationsQuery = graphql(`
 `);
 
 export type OperationResult =
-  GetSidebarOperationsQuery["schema"]["tags"][number]["operations"][number];
+  GetNavigationOperationsQueryResult["schema"]["tags"][number]["operations"][number];
 
 export type OpenApiPluginOptions = OasPluginConfig;
 
 export const UNTAGGED_PATH = "~endpoints";
 
 export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
-  const basePath = joinUrl(config.navigationId ?? "/reference");
+  const basePath = joinUrl(config.path);
   const client = new GraphQLClient(config);
 
   return {
@@ -116,7 +117,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         );
       },
     }),
-    getSidebar: async (path, context) => {
+    getNavigation: async (path, context) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
       }
@@ -132,11 +133,11 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
         const { type } = config;
         const input = type === "file" ? config.input[version!] : config.input;
 
-        const data = await context.queryClient.ensureQueryData({
-          queryKey: ["sidebar-operations-query", input],
-          queryFn: () =>
-            client.fetch(GetSidebarOperationsQuery, { type, input }),
+        const query = createQuery(client, GetNavigationOperationsQuery, {
+          type,
+          input,
         });
+        const data = await context.queryClient.ensureQueryData(query);
 
         const categories = data.schema.tags.flatMap((tag) => {
           if (!tag.name || tag.operations.length === 0) return [];
@@ -149,7 +150,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           const isCollapsible =
             tag.extensions?.["x-zudoku-collapsible"] ?? true;
 
-          return createSidebarCategory({
+          return createNavigationCategory({
             label: tag.name,
             path: categoryPath,
             operations: tag.operations,
@@ -164,8 +165,8 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
 
         if (untaggedOperations) {
           categories.push(
-            createSidebarCategory({
-              label: "Other endpoints",
+            createNavigationCategory({
+              label: categories.length === 0 ? "Endpoints" : "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
               operations: untaggedOperations,
               collapsed: !config.options?.expandAllTags,
@@ -177,7 +178,7 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           categories.push({
             type: "link" as const,
             label: "Schemas",
-            href: joinUrl(basePath, versionParam, "~schemas"),
+            to: joinUrl(basePath, versionParam, "~schemas"),
           });
         }
 

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

@@ -1,7 +1,7 @@
-import { AuthState } from "../../authentication/state.js";
-import { ZudokuContext } from "../../core/ZudokuContext.js";
+import { type AuthState } from "../../authentication/state.js";
+import { type ZudokuContext } from "../../core/ZudokuContext.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
-import { OperationListItemResult } from "./OperationList.js";
+import { type OperationListItemResult } from "./OperationList.js";
 
 type DynamicInput = () => Promise<unknown>;
 
@@ -32,7 +32,7 @@ type Content = {
   examples?: Array<Example> | null;
 };
 
-export type transformExamples = (options: {
+export type TransformExamplesFn = (options: {
   content: Content[];
   context: ZudokuContext;
   auth: AuthState;
@@ -42,16 +42,17 @@ export type transformExamples = (options: {
 
 type BaseOasConfig = {
   server?: string;
-  navigationId?: string;
+  path?: string;
   skipPreload?: boolean;
   tagPages?: Array<string>;
   schemaImports?: SchemaImports;
   options?: {
     examplesLanguage?: string;
     disablePlayground?: boolean;
+    disableSidecar?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
-    transformExamples?: transformExamples;
+    transformExamples?: TransformExamplesFn;
   };
 };
 

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

@@ -0,0 +1,55 @@
+import { FileInput } from "lucide-react";
+import { useFormContext } from "react-hook-form";
+import { Collapsible, CollapsibleContent } from "zudoku/ui/Collapsible.js";
+import { Textarea } from "zudoku/ui/Textarea.js";
+import { cn } from "../../../util/cn.js";
+import { type Content } from "../SidecarExamples.js";
+import {
+  CollapsibleHeader,
+  CollapsibleHeaderTrigger,
+} from "./CollapsibleHeader.js";
+import ExamplesDropdown from "./ExamplesDropdown.js";
+import { type PlaygroundForm } from "./Playground.js";
+
+export const BodyPanel = ({ content }: { content?: Content }) => {
+  const { register, setValue, watch } = useFormContext<PlaygroundForm>();
+  const examples = (content ?? []).flatMap((e) => e.examples);
+  const headers = watch("headers");
+  return (
+    <Collapsible defaultOpen>
+      <CollapsibleHeaderTrigger>
+        <FileInput size={16} />
+        <CollapsibleHeader>Body</CollapsibleHeader>
+        {content && examples.length > 0 ? (
+          <ExamplesDropdown
+            examples={content}
+            onSelect={(example, mediaType) => {
+              setValue("body", JSON.stringify(example.value, null, 2));
+              setValue("headers", [
+                ...headers.filter((h) => h.name !== "Content-Type"),
+                {
+                  name: "Content-Type",
+                  value: mediaType,
+                  active: true,
+                },
+              ]);
+            }}
+          />
+        ) : (
+          <div />
+        )}
+      </CollapsibleHeaderTrigger>
+      <CollapsibleContent className="flex flex-col gap-2 ">
+        <Textarea
+          {...register("body")}
+          className={cn(
+            "w-full p-2 h-64 font-mono md:text-xs border-none rounded-none focus-visible:ring-0",
+          )}
+          placeholder="Your body here..."
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export default BodyPanel;

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

@@ -0,0 +1,47 @@
+import { ChevronUpIcon } from "lucide-react";
+import { CollapsibleTrigger } from "zudoku/ui/Collapsible.js";
+import { cn } from "../../../util/cn.js";
+
+export const CollapsibleHeaderTrigger = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-[max-content_1fr_min-content_max-content] items-center gap-4 group bg-muted w-full h-10 ps-4 pe-2 border-b",
+        className,
+      )}
+    >
+      {children}
+      <CollapsibleTrigger
+        className={cn(
+          "flex items-center gap-4 group bg-muted w-full p-2 hover:bg-accent hover:brightness-95 rounded-md",
+          className,
+        )}
+      >
+        <ChevronUpIcon
+          className="group-data-[state=open]:rotate-180 transition-transform flex-shrink-0"
+          size={16}
+        />
+      </CollapsibleTrigger>
+    </div>
+  );
+};
+
+export const CollapsibleHeader = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <span className={cn("font-semibold w-full text-start", className)}>
+      {children}
+    </span>
+  );
+};