zudoku 0.37.1 → 0.39.0

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

@@ -2,7 +2,8 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { useMemo, useState, useTransition } from "react";
 import { useSearchParams } from "react-router";
-import { useSelectedServer } from "../../authentication/state.js";
+import { useZudoku } from "zudoku/components";
+import { useAuthState } from "../../authentication/state.js";
 import { PathRenderer } from "../../components/PathRenderer.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
@@ -19,6 +20,7 @@ import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
 import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
+import { useSelectedServer } from "./state.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
 import { methodForColor } from "./util/methodToColor.js";
 
@@ -101,8 +103,10 @@ export const Sidecar = ({
   onSelectResponse: (response: string) => void;
 }) => {
   const { input, type, options } = useOasConfig();
+  const auth = useAuthState();
   const query = useCreateQuery(GetServerQuery, { input, type });
   const result = useSuspenseQuery(query);
+  const context = useZudoku();
 
   const methodTextColor = methodForColor(operation.method);
 
@@ -115,6 +119,17 @@ export const Sidecar = ({
 
   const requestBodyContent = operation.requestBody?.content;
 
+  const transformedRequestBodyContent =
+    requestBodyContent && options?.transformExamples
+      ? options.transformExamples({
+          auth,
+          type: "request",
+          operation,
+          content: requestBodyContent,
+          context,
+        })
+      : requestBodyContent;
+
   const path = (
     <PathRenderer
       path={operation.path}
@@ -136,8 +151,10 @@ export const Sidecar = ({
   const code = useMemo(() => {
     const example =
       selectedExample ??
-      (requestBodyContent?.[0]?.schema
-        ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
+      (transformedRequestBodyContent?.[0]?.schema
+        ? generateSchemaExample(
+            transformedRequestBodyContent[0].schema as SchemaObject,
+          )
         : undefined);
 
     const snippet = new HTTPSnippet({
@@ -162,7 +179,7 @@ export const Sidecar = ({
     return getConverted(snippet, selectedLang);
   }, [
     selectedExample,
-    requestBodyContent,
+    transformedRequestBodyContent,
     operation.method,
     operation.path,
     selectedServer,
@@ -232,9 +249,9 @@ export const Sidecar = ({
           </>
         )}
       </SidecarBox.Root>
-      {isOnScreen && requestBodyContent && (
+      {isOnScreen && transformedRequestBodyContent && (
         <RequestBodySidecarBox
-          content={requestBodyContent}
+          content={transformedRequestBodyContent}
           onExampleChange={setSelectedExample}
         />
       )}
@@ -242,7 +259,19 @@ export const Sidecar = ({
         <ResponsesSidecarBox
           selectedResponse={selectedResponse}
           onSelectResponse={onSelectResponse}
-          responses={operation.responses}
+          responses={operation.responses.map((response) => ({
+            ...response,
+            content:
+              response.content && options?.transformExamples
+                ? options.transformExamples({
+                    auth,
+                    type: "response",
+                    context,
+                    operation,
+                    content: response.content,
+                  })
+                : response.content,
+          }))}
         />
       )}
     </aside>

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

@@ -43,7 +43,7 @@ export class GraphQLClient {
 
   fetch = async <TResult, TVariables>(
     query: TypedDocumentString<TResult, TVariables>,
-    ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
+    variables?: TVariables,
   ): Promise<TResult> => {
     const operationName = query.match(/query (\w+)/)?.[1];
 

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

@@ -1,19 +1,26 @@
 import { stripIgnoredCharacters } from "graphql";
-import { useContext } from "react";
+import { use } from "react";
 import type { TypedDocumentString } from "../graphql/graphql.js";
 import { GraphQLContext } from "./GraphQLContext.js";
 
+type NoExtraProps<T, U extends T = T> = U & {
+  [K in Exclude<keyof U, keyof T>]?: never;
+};
+
 export const useCreateQuery = <TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
-  ...variables: TVariables extends Record<string, never> ? [] : [TVariables]
+  ...[variables]: TVariables extends Record<string, never>
+    ? []
+    : [NoExtraProps<TVariables>]
 ) => {
-  const graphQLClient = useContext(GraphQLContext);
+  const graphQLClient = use(GraphQLContext);
+
   if (graphQLClient === undefined) {
     throw new Error("useGraphQL must be used within a GraphQLProvider");
   }
 
   return {
-    queryFn: () => graphQLClient.fetch(query, ...variables),
-    queryKey: [stripIgnoredCharacters(query.toString()), variables[0]],
+    queryFn: () => graphQLClient.fetch(query, variables),
+    queryKey: [stripIgnoredCharacters(query.toString()), variables],
   } as const;
 };

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 px-1 font-mono">
             {value}
           </SelectOnClick>
         </div>

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

@@ -16,9 +16,10 @@ 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  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      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\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        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    }\n  }\n": typeof types.GetSidebarOperationsDocument;
+  "\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;
 };
 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":
@@ -27,11 +28,13 @@ const documents: Documents = {
     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      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\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        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\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    }\n  }\n":
+  "\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,
 };
 
@@ -57,8 +60,14 @@ 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      tags(name: $tag) {\n        name\n        description\n      }\n      operations(tag: $tag, untagged: $untagged) {\n        slug\n        ...OperationsFragment\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        next {\n          name\n          slug\n        }\n        prev {\n          name\n          slug\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.
+ */
+export function graphql(
+  source: "\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 import("./graphql.js").GetSchemasDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -69,7 +78,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 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    }\n  }\n",
+  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;
 
 export function graphql(source: string) {

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

@@ -35,6 +35,11 @@ export type Scalars = {
   JSONSchema: { input: any; output: any };
 };
 
+export type Components = {
+  __typename?: "Components";
+  schemas?: Maybe<Array<SchemaItem>>;
+};
+
 export type EncodingItem = {
   __typename?: "EncodingItem";
   allowReserved?: Maybe<Scalars["Boolean"]["output"]>;
@@ -132,6 +137,7 @@ export type ResponseItem = {
 
 export type Schema = {
   __typename?: "Schema";
+  components?: Maybe<Components>;
   description?: Maybe<Scalars["String"]["output"]>;
   extensions?: Maybe<Scalars["JSONObject"]["output"]>;
   openapi: Scalars["String"]["output"];
@@ -139,6 +145,7 @@ export type Schema = {
   paths: Array<PathItem>;
   servers: Array<Server>;
   summary?: Maybe<Scalars["String"]["output"]>;
+  tag?: Maybe<SchemaTag>;
   tags: Array<SchemaTag>;
   title: Scalars["String"]["output"];
   url?: Maybe<Scalars["String"]["output"]>;
@@ -153,16 +160,28 @@ export type SchemaOperationsArgs = {
   untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
 };
 
-export type SchemaTagsArgs = {
+export type SchemaTagArgs = {
   name?: InputMaybe<Scalars["String"]["input"]>;
+  slug?: InputMaybe<Scalars["String"]["input"]>;
+  untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
+};
+
+export type SchemaItem = {
+  __typename?: "SchemaItem";
+  extensions?: Maybe<Scalars["JSONObject"]["output"]>;
+  name: Scalars["String"]["output"];
+  schema: Scalars["JSONSchema"]["output"];
 };
 
 export type SchemaTag = {
   __typename?: "SchemaTag";
   description?: Maybe<Scalars["String"]["output"]>;
   extensions?: Maybe<Scalars["JSONObject"]["output"]>;
+  isUntagged: Scalars["Boolean"]["output"];
   name?: Maybe<Scalars["String"]["output"]>;
+  next?: Maybe<SchemaTag>;
   operations: Array<OperationItem>;
+  prev?: Maybe<SchemaTag>;
   slug?: Maybe<Scalars["String"]["output"]>;
 };
 
@@ -292,18 +311,52 @@ export type OperationsForTagQuery = {
     url?: string | null;
     version: string;
     servers: Array<{ __typename?: "Server"; url: string }>;
-    tags: Array<{
+    tag?: {
       __typename?: "SchemaTag";
       name?: string | null;
       description?: string | null;
-    }>;
-    operations: Array<
-      { __typename?: "OperationItem"; slug: string } & {
-        " $fragmentRefs"?: {
-          OperationsFragmentFragment: OperationsFragmentFragment;
-        };
-      }
-    >;
+      operations: Array<
+        { __typename?: "OperationItem"; slug: string } & {
+          " $fragmentRefs"?: {
+            OperationsFragmentFragment: OperationsFragmentFragment;
+          };
+        }
+      >;
+      next?: {
+        __typename?: "SchemaTag";
+        name?: string | null;
+        slug?: string | null;
+      } | null;
+      prev?: {
+        __typename?: "SchemaTag";
+        name?: string | null;
+        slug?: string | null;
+      } | null;
+    } | null;
+  };
+};
+
+export type GetSchemasQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type GetSchemasQuery = {
+  __typename?: "Query";
+  schema: {
+    __typename?: "Schema";
+    title: string;
+    description?: string | null;
+    summary?: string | null;
+    components?: {
+      __typename?: "Components";
+      schemas?: Array<{
+        __typename?: "SchemaItem";
+        name: string;
+        schema: any;
+        extensions?: any | null;
+      }> | null;
+    } | null;
   };
 };
 
@@ -344,6 +397,10 @@ export type GetSidebarOperationsQuery = {
         path: string;
       }>;
     }>;
+    components?: {
+      __typename?: "Components";
+      schemas?: Array<{ __typename: "SchemaItem" }> | null;
+    } | null;
   };
 };
 
@@ -468,13 +525,21 @@ export const OperationsForTagDocument = new TypedDocumentString(`
     title
     url
     version
-    tags(name: $tag) {
+    tag(slug: $tag, untagged: $untagged) {
       name
       description
-    }
-    operations(tag: $tag, untagged: $untagged) {
-      slug
-      ...OperationsFragment
+      operations {
+        slug
+        ...OperationsFragment
+      }
+      next {
+        name
+        slug
+      }
+      prev {
+        name
+        slug
+      }
     }
   }
 }
@@ -545,6 +610,25 @@ export const OperationsForTagDocument = new TypedDocumentString(`
   OperationsForTagQuery,
   OperationsForTagQueryVariables
 >;
+export const GetSchemasDocument = new TypedDocumentString(`
+    query GetSchemas($input: JSON!, $type: SchemaType!) {
+  schema(input: $input, type: $type) {
+    title
+    description
+    summary
+    components {
+      schemas {
+        name
+        schema
+        extensions
+      }
+    }
+  }
+}
+    `) as unknown as TypedDocumentString<
+  GetSchemasQuery,
+  GetSchemasQueryVariables
+>;
 export const GetServerQueryDocument = new TypedDocumentString(`
     query getServerQuery($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
@@ -573,6 +657,11 @@ export const GetSidebarOperationsDocument = new TypedDocumentString(`
         path
       }
     }
+    components {
+      schemas {
+        __typename
+      }
+    }
   }
 }
     `) as unknown as TypedDocumentString<

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

@@ -29,6 +29,11 @@ const GetSidebarOperationsQuery = graphql(`
           path
         }
       }
+      components {
+        schemas {
+          __typename
+        }
+      }
     }
   }
 `);
@@ -168,6 +173,14 @@ export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
           );
         }
 
+        if (data.schema.components?.schemas?.length) {
+          categories.push({
+            type: "link" as const,
+            label: "Schemas",
+            href: joinUrl(basePath, versionParam, "~schemas"),
+          });
+        }
+
         return categories;
       } catch {
         return [];

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

@@ -1,4 +1,7 @@
+import { AuthState } from "../../authentication/state.js";
+import { ZudokuContext } from "../../core/ZudokuContext.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
+import { OperationListItemResult } from "./OperationList.js";
 
 type DynamicInput = () => Promise<unknown>;
 
@@ -12,6 +15,31 @@ export type ContextOasSource =
   | { type: "file"; input: DynamicInput }
   | { type: "raw"; input: string };
 
+type Example = {
+  name: string;
+  description?: string | null;
+  externalValue?: string | null;
+  value?: any | null;
+  summary?: string | null;
+};
+
+type Content = {
+  mediaType: string;
+  schema?: any | null;
+  encoding?: Array<{
+    name: string;
+  }> | null;
+  examples?: Array<Example> | null;
+};
+
+export type transformExamples = (options: {
+  content: Content[];
+  context: ZudokuContext;
+  auth: AuthState;
+  operation: OperationListItemResult;
+  type: "request" | "response";
+}) => Content[];
+
 type BaseOasConfig = {
   server?: string;
   navigationId?: string;
@@ -23,6 +51,7 @@ type BaseOasConfig = {
     disablePlayground?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
     expandAllTags?: boolean;
+    transformExamples?: transformExamples;
   };
 };
 

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

@@ -13,7 +13,6 @@ import {
   SelectValue,
 } from "zudoku/ui/Select.js";
 import { Textarea } from "zudoku/ui/Textarea.js";
-import { useSelectedServer } from "../../../authentication/state.js";
 import { useApiIdentities } from "../../../components/context/ZudokuContext.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
 import { cn } from "../../../util/cn.js";
@@ -21,6 +20,7 @@ import { objectEntries } from "../../../util/objectEntries.js";
 import { useLatest } from "../../../util/useLatest.js";
 import { ColorizedParam } from "../ColorizedParam.js";
 import { type Content } from "../SidecarExamples.js";
+import { useSelectedServer } from "../state.js";
 import { createUrl } from "./createUrl.js";
 import ExamplesDropdown from "./ExamplesDropdown.js";
 import { Headers } from "./Headers.js";

package/src/lib/plugins/openapi/playground/result-panel/ResultPanel.tsx

@@ -32,7 +32,7 @@ export const ResultPanel = ({
 }) => {
   const status = ((queryMutation.data?.status ?? 0) / 100).toFixed(0);
   return (
-    <div className="min-w-0 p-4 bg-muted/50">
+    <div className="min-w-0 p-4 py-8 bg-muted/50">
       {queryMutation.error ? (
         <div className="flex flex-col gap-2">
           {showPathParamsWarning && (
@@ -99,6 +99,7 @@ export const ResultPanel = ({
               >
                 Looks like the request is taking longer than expected.
                 <Button
+                  type="button"
                   onClick={onCancel}
                   size="sm"
                   className="w-fit"

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroup.tsx

@@ -15,14 +15,12 @@ export const LogicalGroup = ({
   schemas,
   type,
   isOpen,
-  level,
   toggleOpen,
 }: {
   schemas: SchemaObject[];
   type: LogicalGroupType;
   isOpen: boolean;
   toggleOpen: () => void;
-  level: number;
 }) => (
   <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
     <Card className="px-6">
@@ -34,12 +32,7 @@ export const LogicalGroup = ({
       <Collapsible.Content className="pb-4">
         {schemas.map((subSchema, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <LogicalGroupItem
-            key={index}
-            type={type}
-            schema={subSchema}
-            level={level}
-          />
+          <LogicalGroupItem key={index} type={type} schema={subSchema} />
         ))}
       </Collapsible.Content>
     </Card>

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupItem.tsx

@@ -8,7 +8,6 @@ import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
 export const LogicalGroupItem = (props: {
   type: LogicalGroupType;
   schema: SchemaObject;
-  level: number;
 }) => {
   const [isOpen, setIsOpen] = useState(true);
 
@@ -23,7 +22,7 @@ export const LogicalGroupItem = (props: {
       </Collapsible.Trigger>
       {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
       <Collapsible.Content>
-        <SchemaView schema={props.schema} level={props.level + 1} />
+        <SchemaView schema={props.schema} />
       </Collapsible.Content>
     </Collapsible.Root>
   );

package/src/lib/plugins/openapi/schema/SchemaExampleAndDefault.tsx

@@ -0,0 +1,36 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "../components/SelectOnClick.js";
+
+export const SchemaExampleAndDefault = ({
+  schema,
+}: {
+  schema: SchemaObject;
+}) => {
+  const example = schema.examples?.at(0);
+  const defaultValue = schema.default;
+
+  if (!example && !defaultValue) return null;
+
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      {example && (
+        <div>
+          <span className="text-muted-foreground">Example: </span>
+          <SelectOnClick className="border rounded px-1 font-mono">
+            {typeof example === "object" ? JSON.stringify(example) : example}
+          </SelectOnClick>
+        </div>
+      )}
+      {defaultValue && (
+        <div>
+          <span className="text-muted-foreground">Default: </span>
+          <SelectOnClick className="border rounded px-1 font-mono">
+            {typeof defaultValue === "object"
+              ? JSON.stringify(defaultValue)
+              : defaultValue}
+          </SelectOnClick>
+        </div>
+      )}
+    </div>
+  );
+};