radiant-docs 0.1.6 → 0.1.8

package/template/src/components/endpoint/ResponseFields.astro

@@ -1,6 +1,7 @@
 ---
 import type { OpenAPIV3, OpenAPIV3_1 } from "openapi-types";
-import Field from "../ui/Field.astro";
+import ListChevronsToggle from "../ui/ListChevronsToggle.astro";
+import ResponseFieldTree from "./ResponseFieldTree.astro";
 
 interface Props {
   responses: OpenAPIV3.ResponsesObject | OpenAPIV3_1.ResponsesObject;
@@ -8,37 +9,490 @@ interface Props {
 
 const { responses } = Astro.props;
 
+interface ResponseFieldVariant {
+  label: string;
+  fields: ResponseField[];
+}
+
 interface ResponseField {
   name: string;
   required: boolean;
   type: string;
   description: string;
   nested?: ResponseField[]; // For nested objects
-  enum?: string[];
+  enum?: (string | number)[];
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+  variants?: ResponseFieldVariant[];
+  variantType?: "oneOf" | "anyOf";
 }
 
+type ResponseVariant = ResponseFieldVariant;
+
 interface ResponseData {
   statusCode: string;
   description?: string;
   fields: ResponseField[];
+  variants?: ResponseVariant[];
+  variantType?: "oneOf" | "anyOf";
+}
+
+function getStatusCodeDotClass(statusCode: string): string {
+  const family = statusCode[0];
+  if (family === "2") return "bg-green-700/70";
+  if (family === "3") return "bg-blue-700/70";
+  if (family === "4") return "bg-yellow-500/80";
+  if (family === "5") return "bg-red-700/70";
+  return "bg-neutral-400";
+}
+
+function getSchemaVariants(schema: any): any[] {
+  if (!schema) return [];
+  if (Array.isArray(schema.oneOf)) return schema.oneOf;
+  if (Array.isArray(schema.anyOf)) return schema.anyOf;
+  return [];
+}
+
+function getSchemaEnumValues(schema: any): (string | number)[] | undefined {
+  if (!schema) return undefined;
+  if (Array.isArray(schema.enum) && schema.enum.length > 0) {
+    const values = schema.enum.filter(
+      (value: unknown): value is string | number =>
+        typeof value === "string" || typeof value === "number",
+    );
+    return values.length > 0 ? values : undefined;
+  }
+
+  const variantSchemas: any[] = getSchemaVariants(schema);
+  if (variantSchemas.length === 0) return undefined;
+
+  const deduped = new Map<string, string | number>();
+  variantSchemas.forEach((variant) => {
+    const variantEnum = getSchemaEnumValues(variant);
+    variantEnum?.forEach((value) => {
+      deduped.set(`${typeof value}:${String(value)}`, value);
+    });
+  });
+
+  return deduped.size > 0 ? Array.from(deduped.values()) : undefined;
+}
+
+function parseFiniteNumber(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+
+function parseNonNegativeInteger(value: unknown): number | undefined {
+  if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+  if (!Number.isInteger(value) || value < 0) return undefined;
+  return value;
+}
+
+function getDirectSchemaNumericConstraints(schema: any): {
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+} {
+  const minimum = parseFiniteNumber(schema?.minimum);
+  const maximum = parseFiniteNumber(schema?.maximum);
+  const exclusiveMinimumValue = parseFiniteNumber(schema?.exclusiveMinimum);
+  const exclusiveMaximumValue = parseFiniteNumber(schema?.exclusiveMaximum);
+
+  const exclusiveMinimum =
+    exclusiveMinimumValue !== undefined
+      ? exclusiveMinimumValue
+      : schema?.exclusiveMinimum === true
+        ? minimum
+        : undefined;
+  const exclusiveMaximum =
+    exclusiveMaximumValue !== undefined
+      ? exclusiveMaximumValue
+      : schema?.exclusiveMaximum === true
+        ? maximum
+        : undefined;
+
+  const constraints: {
+    minimum?: number;
+    maximum?: number;
+    exclusiveMinimum?: number;
+    exclusiveMaximum?: number;
+  } = {};
+
+  if (exclusiveMinimum !== undefined) {
+    constraints.exclusiveMinimum = exclusiveMinimum;
+  } else if (minimum !== undefined) {
+    constraints.minimum = minimum;
+  }
+
+  if (exclusiveMaximum !== undefined) {
+    constraints.exclusiveMaximum = exclusiveMaximum;
+  } else if (maximum !== undefined) {
+    constraints.maximum = maximum;
+  }
+
+  return constraints;
+}
+
+function mergeConjunctiveNumericConstraints(
+  base: {
+    minimum?: number;
+    maximum?: number;
+    exclusiveMinimum?: number;
+    exclusiveMaximum?: number;
+  },
+  next: {
+    minimum?: number;
+    maximum?: number;
+    exclusiveMinimum?: number;
+    exclusiveMaximum?: number;
+  },
+): {
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+} {
+  const toLowerBound = (constraint: typeof base) => {
+    if (constraint.exclusiveMinimum !== undefined) {
+      return { value: constraint.exclusiveMinimum, exclusive: true };
+    }
+    if (constraint.minimum !== undefined) {
+      return { value: constraint.minimum, exclusive: false };
+    }
+    return undefined;
+  };
+  const toUpperBound = (constraint: typeof base) => {
+    if (constraint.exclusiveMaximum !== undefined) {
+      return { value: constraint.exclusiveMaximum, exclusive: true };
+    }
+    if (constraint.maximum !== undefined) {
+      return { value: constraint.maximum, exclusive: false };
+    }
+    return undefined;
+  };
+  const pickStricterLower = (
+    first?: { value: number; exclusive: boolean },
+    second?: { value: number; exclusive: boolean },
+  ) => {
+    if (!first) return second;
+    if (!second) return first;
+    if (first.value > second.value) return first;
+    if (second.value > first.value) return second;
+    return { value: first.value, exclusive: first.exclusive || second.exclusive };
+  };
+  const pickStricterUpper = (
+    first?: { value: number; exclusive: boolean },
+    second?: { value: number; exclusive: boolean },
+  ) => {
+    if (!first) return second;
+    if (!second) return first;
+    if (first.value < second.value) return first;
+    if (second.value < first.value) return second;
+    return { value: first.value, exclusive: first.exclusive || second.exclusive };
+  };
+
+  const lower = pickStricterLower(toLowerBound(base), toLowerBound(next));
+  const upper = pickStricterUpper(toUpperBound(base), toUpperBound(next));
+
+  const merged: {
+    minimum?: number;
+    maximum?: number;
+    exclusiveMinimum?: number;
+    exclusiveMaximum?: number;
+  } = {};
+  if (lower) {
+    if (lower.exclusive) merged.exclusiveMinimum = lower.value;
+    else merged.minimum = lower.value;
+  }
+  if (upper) {
+    if (upper.exclusive) merged.exclusiveMaximum = upper.value;
+    else merged.maximum = upper.value;
+  }
+
+  return merged;
+}
+
+function getSchemaNumericConstraints(
+  schema: any,
+  seen = new Set<any>(),
+): {
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+} {
+  if (!schema || typeof schema !== "object") return {};
+  if (seen.has(schema)) return {};
+
+  const nextSeen = new Set(seen);
+  nextSeen.add(schema);
+
+  let constraints = getDirectSchemaNumericConstraints(schema);
+
+  if (Array.isArray(schema.allOf)) {
+    schema.allOf.forEach((part: any) => {
+      constraints = mergeConjunctiveNumericConstraints(
+        constraints,
+        getSchemaNumericConstraints(part, nextSeen),
+      );
+    });
+  }
+
+  const variants = getSchemaVariants(schema);
+  if (variants.length > 0) {
+    const variantConstraints = variants.map((variant) =>
+      getSchemaNumericConstraints(variant, nextSeen),
+    );
+    const shared: {
+      minimum?: number;
+      maximum?: number;
+      exclusiveMinimum?: number;
+      exclusiveMaximum?: number;
+    } = {};
+    const keys = [
+      "minimum",
+      "maximum",
+      "exclusiveMinimum",
+      "exclusiveMaximum",
+    ] as const;
+
+    keys.forEach((key) => {
+      const firstValue = variantConstraints[0]?.[key];
+      if (firstValue === undefined) return;
+      const allMatch = variantConstraints.every(
+        (variantConstraint) => variantConstraint[key] === firstValue,
+      );
+      if (allMatch) {
+        shared[key] = firstValue;
+      }
+    });
+
+    constraints = mergeConjunctiveNumericConstraints(constraints, shared);
+  }
+
+  return constraints;
+}
+
+function getDirectSchemaStringLengthConstraints(schema: any): {
+  minLength?: number;
+  maxLength?: number;
+} {
+  const minLength = parseNonNegativeInteger(schema?.minLength);
+  const maxLength = parseNonNegativeInteger(schema?.maxLength);
+
+  const constraints: {
+    minLength?: number;
+    maxLength?: number;
+  } = {};
+  if (minLength !== undefined) constraints.minLength = minLength;
+  if (maxLength !== undefined) constraints.maxLength = maxLength;
+
+  return constraints;
+}
+
+function mergeConjunctiveStringLengthConstraints(
+  base: {
+    minLength?: number;
+    maxLength?: number;
+  },
+  next: {
+    minLength?: number;
+    maxLength?: number;
+  },
+): {
+  minLength?: number;
+  maxLength?: number;
+} {
+  const merged: {
+    minLength?: number;
+    maxLength?: number;
+  } = {};
+
+  const minLengthCandidates = [base.minLength, next.minLength].filter(
+    (value): value is number => value !== undefined,
+  );
+  const maxLengthCandidates = [base.maxLength, next.maxLength].filter(
+    (value): value is number => value !== undefined,
+  );
+
+  if (minLengthCandidates.length > 0) {
+    merged.minLength = Math.max(...minLengthCandidates);
+  }
+  if (maxLengthCandidates.length > 0) {
+    merged.maxLength = Math.min(...maxLengthCandidates);
+  }
+
+  return merged;
+}
+
+function getSchemaStringLengthConstraints(
+  schema: any,
+  seen = new Set<any>(),
+): {
+  minLength?: number;
+  maxLength?: number;
+} {
+  if (!schema || typeof schema !== "object") return {};
+  if (seen.has(schema)) return {};
+
+  const nextSeen = new Set(seen);
+  nextSeen.add(schema);
+
+  let constraints = getDirectSchemaStringLengthConstraints(schema);
+
+  if (Array.isArray(schema.allOf)) {
+    schema.allOf.forEach((part: any) => {
+      constraints = mergeConjunctiveStringLengthConstraints(
+        constraints,
+        getSchemaStringLengthConstraints(part, nextSeen),
+      );
+    });
+  }
+
+  const variants = getSchemaVariants(schema);
+  if (variants.length > 0) {
+    const variantConstraints = variants.map((variant) =>
+      getSchemaStringLengthConstraints(variant, nextSeen),
+    );
+    const shared: {
+      minLength?: number;
+      maxLength?: number;
+    } = {};
+
+    (["minLength", "maxLength"] as const).forEach((key) => {
+      const firstValue = variantConstraints[0]?.[key];
+      if (firstValue === undefined) return;
+      const allMatch = variantConstraints.every(
+        (variantConstraint) => variantConstraint[key] === firstValue,
+      );
+      if (allMatch) {
+        shared[key] = firstValue;
+      }
+    });
+
+    constraints = mergeConjunctiveStringLengthConstraints(constraints, shared);
+  }
+
+  return constraints;
+}
+
+function getSchemaTypeLabel(schema: any): string {
+  if (!schema) return "unknown";
+
+  const variantSchemas: any[] = getSchemaVariants(schema);
+  if (variantSchemas.length > 0) {
+    const labels = Array.from(
+      new Set(
+        variantSchemas
+          .map((variant) => getSchemaTypeLabel(variant))
+          .filter((label) => label.length > 0),
+      ),
+    );
+    if (labels.length === 0) return "unknown";
+    return labels.length === 1 ? labels[0] : labels.join(" | ");
+  }
+
+  if (schema.type === "array") {
+    const itemType = getSchemaTypeLabel(schema.items);
+    return itemType.includes(" | ") ? `(${itemType})[]` : `${itemType}[]`;
+  }
+
+  if (Array.isArray(schema.enum) && schema.enum.length > 0) {
+    return `enum<${schema.type || "string"}>`;
+  }
+
+  if (schema.format && schema.type) {
+    return `${schema.type} (${schema.format})`;
+  }
+
+  if (schema.type) return schema.type;
+  if (schema.properties || schema.allOf || schema.oneOf || schema.anyOf) {
+    return "object";
+  }
+  return "unknown";
+}
+
+function getSchemaVariantType(schema: any): "oneOf" | "anyOf" | undefined {
+  if (Array.isArray(schema?.oneOf) && schema.oneOf.length > 0) return "oneOf";
+  if (Array.isArray(schema?.anyOf) && schema.anyOf.length > 0) return "anyOf";
+  return undefined;
+}
+
+function getAdditionalPropertiesSchema(schema: any): any {
+  if (!schema || typeof schema !== "object") return undefined;
+
+  let additionalProperties = schema.additionalProperties;
+  if (Array.isArray(schema.allOf)) {
+    schema.allOf.forEach((part: any) => {
+      const partAdditional = getAdditionalPropertiesSchema(part);
+      if (partAdditional !== undefined) {
+        additionalProperties = partAdditional;
+      }
+    });
+  }
+
+  return additionalProperties;
+}
+
+function extractVariantData(
+  schema: any,
+  parentName: string,
+  fallbackRequired: string[] = [],
+): {
+  variants?: ResponseFieldVariant[];
+  variantType?: "oneOf" | "anyOf";
+} {
+  const variantType = getSchemaVariantType(schema);
+  const variantSchemas =
+    variantType === "oneOf"
+      ? schema?.oneOf || []
+      : variantType === "anyOf"
+        ? schema?.anyOf || []
+        : [];
+
+  if (!variantType || variantSchemas.length === 0) return {};
+
+  const variants = variantSchemas
+    .map((variantSchema: any, index: number) => ({
+      label: `Variant ${index + 1}`,
+      fields: extractFieldsFromSchema(
+        variantSchema,
+        parentName,
+        Array.isArray(variantSchema?.required)
+          ? variantSchema.required
+          : fallbackRequired,
+      ),
+    }))
+    .filter((variant) => variant.fields.length > 0);
+
+  if (variants.length === 0) return {};
+  return { variants, variantType };
 }
 
-// Helper function to extract fields from a schema recursively
 function extractFieldsFromSchema(
   schema: any,
   parentName: string = "",
-  required: string[] = []
+  required: string[] = [],
 ): ResponseField[] {
   if (!schema) return [];
 
   const fields: ResponseField[] = [];
+  const baseSchema = { ...schema };
+  delete baseSchema.oneOf;
+  delete baseSchema.anyOf;
 
   // Handle allOf - merge properties and required arrays
-  let properties = schema.properties || {};
-  let schemaRequired = schema.required || [];
+  let properties = baseSchema.properties || {};
+  let schemaRequired = Array.isArray(baseSchema.required)
+    ? baseSchema.required
+    : [];
 
-  if (schema.allOf) {
-    schema.allOf.forEach((s: any) => {
+  if (Array.isArray(baseSchema.allOf)) {
+    baseSchema.allOf.forEach((s: any) => {
       if (s.properties) {
         properties = { ...properties, ...s.properties };
       }
@@ -50,22 +504,37 @@ function extractFieldsFromSchema(
 
   // Handle array types - extract fields from items
   if (schema.type === "array" && schema.items) {
+    const itemSchema = schema.items;
+    const baseItemSchema = { ...itemSchema };
+    delete baseItemSchema.oneOf;
+    delete baseItemSchema.anyOf;
+
     const itemFields = extractFieldsFromSchema(
-      schema.items,
+      baseItemSchema,
       "",
-      schema.items.required || []
+      Array.isArray(baseItemSchema.required) ? baseItemSchema.required : [],
     );
-    if (itemFields.length > 0) {
+    const itemVariantData = extractVariantData(
+      itemSchema,
+      "",
+      Array.isArray(itemSchema?.required) ? itemSchema.required : [],
+    );
+    if (itemFields.length > 0 || itemVariantData.variants) {
       fields.push({
         name: parentName || "items",
         required: required.includes(parentName) || false,
-        type: "array",
+        type: getSchemaTypeLabel(schema),
         description: schema.description || "",
-        nested: itemFields,
+        ...getSchemaStringLengthConstraints(schema),
+        ...getSchemaNumericConstraints(schema),
+        nested: itemFields.length > 0 ? itemFields : undefined,
+        variants: itemVariantData.variants,
+        variantType: itemVariantData.variantType,
       });
     }
     return fields;
   }
+
   // Extract object properties
   if (properties && Object.keys(properties).length > 0) {
     Object.entries(properties)
@@ -79,66 +548,126 @@ function extractFieldsFromSchema(
       .forEach(([name, propSchema]: [string, any]) => {
         const fullName = parentName ? `${parentName}.${name}` : name;
         const isRequired = schemaRequired.includes(name);
+        const variantData = extractVariantData(
+          propSchema,
+          fullName,
+          Array.isArray(propSchema?.required) ? propSchema.required : [],
+        );
 
-        // Determine type
-        let type = propSchema.type || "object";
-        if (propSchema.format) {
-          type = `${type} (${propSchema.format})`;
-        } else if (propSchema.enum) {
-          type = `enum<${propSchema.type || "string"}>`;
-        }
-
-        // Handle nested objects
         if (
           propSchema.type === "object" ||
           propSchema.properties ||
-          propSchema.allOf
+          propSchema.allOf ||
+          propSchema.oneOf ||
+          propSchema.anyOf
         ) {
+          const basePropSchema = { ...propSchema };
+          delete basePropSchema.oneOf;
+          delete basePropSchema.anyOf;
+
           const nestedFields = extractFieldsFromSchema(
-            propSchema,
+            basePropSchema,
             fullName,
-            propSchema.required || []
+            Array.isArray(basePropSchema.required) ? basePropSchema.required : [],
           );
           fields.push({
             name: fullName,
             required: isRequired,
-            type: type,
+            type: getSchemaTypeLabel(propSchema),
             description: propSchema.description || "",
+            ...getSchemaStringLengthConstraints(propSchema),
+            ...getSchemaNumericConstraints(propSchema),
             nested: nestedFields.length > 0 ? nestedFields : undefined,
+            variants: variantData.variants,
+            variantType: variantData.variantType,
             enum: propSchema.enum,
           });
-        }
-        // Handle arrays
-        else if (propSchema.type === "array" && propSchema.items) {
+        } else if (propSchema.type === "array" && propSchema.items) {
+          const itemSchema = propSchema.items;
+          const baseItemSchema = { ...itemSchema };
+          delete baseItemSchema.oneOf;
+          delete baseItemSchema.anyOf;
+
           const itemFields = extractFieldsFromSchema(
-            propSchema.items,
+            baseItemSchema,
             `${fullName}[]`,
-            propSchema.items.required || []
+            Array.isArray(baseItemSchema.required) ? baseItemSchema.required : [],
+          );
+          const itemVariantData = extractVariantData(
+            itemSchema,
+            `${fullName}[]`,
+            Array.isArray(itemSchema?.required) ? itemSchema.required : [],
           );
           fields.push({
             name: fullName,
             required: isRequired,
-            type: propSchema.items?.enum
-              ? `enum<${propSchema.items?.type || "object"}>[]`
-              : `${propSchema.items.type || "object"}[]`,
+            type: getSchemaTypeLabel(propSchema),
             description: propSchema.description || "",
+            ...getSchemaStringLengthConstraints(propSchema),
+            ...getSchemaNumericConstraints(propSchema),
             nested: itemFields.length > 0 ? itemFields : undefined,
-            enum: propSchema.items?.enum,
+            variants: itemVariantData.variants,
+            variantType: itemVariantData.variantType,
+            enum: itemSchema?.enum,
           });
-        }
-        // Handle primitive types
-        else {
+        } else {
           fields.push({
             name: fullName,
             required: isRequired,
-            type: type,
+            type: getSchemaTypeLabel(propSchema),
             description: propSchema.description || "",
+            ...getSchemaStringLengthConstraints(propSchema),
+            ...getSchemaNumericConstraints(propSchema),
             enum: propSchema.enum,
           });
         }
       });
   }
 
+  const additionalProperties = getAdditionalPropertiesSchema(baseSchema);
+  const supportsAdditionalProperties =
+    additionalProperties === true ||
+    (additionalProperties &&
+      typeof additionalProperties === "object" &&
+      !Array.isArray(additionalProperties));
+
+  if (supportsAdditionalProperties) {
+    const additionalSchema =
+      additionalProperties && typeof additionalProperties === "object"
+        ? additionalProperties
+        : null;
+    const mapFieldName = parentName
+      ? `${parentName}.[key: string]`
+      : "[key: string]";
+    const additionalContent = additionalSchema
+      ? extractFieldsFromSchema(
+          additionalSchema,
+          mapFieldName,
+          Array.isArray(additionalSchema?.required) ? additionalSchema.required : [],
+        )
+      : [];
+    const additionalVariantData = additionalSchema
+      ? extractVariantData(
+          additionalSchema,
+          mapFieldName,
+          Array.isArray(additionalSchema?.required) ? additionalSchema.required : [],
+        )
+      : {};
+
+    fields.push({
+      name: mapFieldName,
+      required: false,
+      type: additionalSchema ? getSchemaTypeLabel(additionalSchema) : "any",
+      description: additionalSchema?.description || "",
+      ...getSchemaStringLengthConstraints(additionalSchema),
+      ...getSchemaNumericConstraints(additionalSchema),
+      nested: additionalContent.length > 0 ? additionalContent : undefined,
+      variants: additionalVariantData.variants,
+      variantType: additionalVariantData.variantType,
+      enum: additionalSchema ? getSchemaEnumValues(additionalSchema) : undefined,
+    });
+  }
+
   return fields;
 }
 
@@ -167,14 +696,49 @@ Object.entries(responses)
     const mediaType = contentType ? response.content?.[contentType] : null;
     const schema = mediaType?.schema;
 
-    const fields: ResponseField[] = schema
-      ? extractFieldsFromSchema(schema, "", schema.required || [])
-      : [];
+    let fields: ResponseField[] = [];
+    let variants: ResponseVariant[] | undefined;
+    let variantType: "oneOf" | "anyOf" | undefined;
+
+    if (schema) {
+      const hasOneOf = Array.isArray(schema.oneOf) && schema.oneOf.length > 0;
+      const hasAnyOf = Array.isArray(schema.anyOf) && schema.anyOf.length > 0;
+
+      if (hasOneOf || hasAnyOf) {
+        variantType = hasOneOf ? "oneOf" : "anyOf";
+        const variantSchemas: any[] = hasOneOf ? schema.oneOf : schema.anyOf;
+
+        const baseSchema = { ...schema };
+        delete baseSchema.oneOf;
+        delete baseSchema.anyOf;
+
+        fields = extractFieldsFromSchema(
+          baseSchema,
+          "",
+          baseSchema.required || [],
+        );
+
+        variants = variantSchemas
+          .map((variantSchema, index) => ({
+            label: `Variant ${index + 1}`,
+            fields: extractFieldsFromSchema(
+              variantSchema,
+              "",
+              variantSchema?.required || [],
+            ),
+          }))
+          .filter((variant) => variant.fields.length > 0);
+      } else {
+        fields = extractFieldsFromSchema(schema, "", schema.required || []);
+      }
+    }
 
     responseFields.push({
       statusCode,
       description: response.description,
       fields,
+      variants,
+      variantType,
     });
   });
 ---
@@ -184,40 +748,119 @@ Object.entries(responses)
   {
     responseFields.map((response) => (
       <div class="mt-6">
-        <div class="flex items-center gap-2 mb-4">
-          <h5 class="text-lg font-medium">{response.statusCode}</h5>
+        <div class="flex items-start gap-2 mb-4">
+          <div class="mt-1.5 flex items-center gap-1.5">
+            <span
+              class:list={[
+                "size-[7px] shrink-0 rounded-full",
+                getStatusCodeDotClass(response.statusCode),
+              ]}
+            />
+            <h5 class="text-lg font-medium leading-none">
+              {response.statusCode}
+            </h5>
+          </div>
           {response.description && (
-            <span class="text-sm text-neutral-600">{response.description}</span>
+            <span class="mt-1 text-sm text-neutral-500">
+              {response.description}
+            </span>
           )}
         </div>
-        {response.fields.length > 0 ? (
-          <div class="ml-2 space-y-4">
-            {response.fields.map((field) => (
-              <div>
-                <Field
-                  name={field.name}
-                  type={field.type}
-                  optional={!field.required}
-                  description={field.description}
-                />
-                {field.nested && field.nested.length > 0 && (
-                  <div class="ml-6 mt-2 space-y-2">
-                    {field.nested.map((nestedField) => (
-                      <Field
-                        name={nestedField.name}
-                        type={nestedField.type}
-                        optional={!nestedField.required}
-                        description={nestedField.description}
-                      />
-                    ))}
+        {response.fields.length > 0 && (
+          <>
+            {response.variants && response.variants.length > 0 && (
+              <p class="mb-2 text-xs text-neutral-500">Common fields</p>
+            )}
+            <div x-data="{ expanded: false }">
+              <div
+                class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200"
+                x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+              >
+                <button
+                  type="button"
+                  x-on:click="expanded = !expanded"
+                  x-bind:aria-expanded="expanded"
+                  class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                >
+                  <span class="inline-flex items-center gap-2">
+                    <ListChevronsToggle class="size-4 shrink-0 text-neutral-500 group-hover:text-neutral-600 transition duration-200" />
+                    <span>
+                      {response.fields.length}{" "}
+                      {response.fields.length === 1
+                        ? "field"
+                        : "fields"}
+                    </span>
+                  </span>
+                </button>
+                <div x-show="expanded" x-collapse x-cloak>
+                  <div class="border-t border-neutral-100 p-3">
+                    <ResponseFieldTree fields={response.fields} />
                   </div>
-                )}
+                </div>
               </div>
+            </div>
+          </>
+        )}
+        {response.variants && response.variants.length > 0 && (
+          <div class="mt-3 space-y-2">
+            <p class="text-xs text-neutral-500">
+              {response.variantType === "anyOf"
+                ? "One or more response variants may apply."
+                : "Returns one of these response variants."}
+            </p>
+            {response.variants.map((variant, index) => (
+              <>
+                <div class="rounded-xl border border-neutral-200 bg-white p-3">
+                  <div class="mb-2 text-xs font-medium text-neutral-600">
+                    {variant.label}
+                  </div>
+                  <div x-data="{ expanded: false }">
+                    <div
+                      class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200"
+                      x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+                    >
+                      <button
+                        type="button"
+                        x-on:click="expanded = !expanded"
+                        x-bind:aria-expanded="expanded"
+                        class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                      >
+                        <span class="inline-flex items-center gap-2">
+                          <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                          <span>
+                            {variant.fields.length}{" "}
+                            {variant.fields.length === 1
+                              ? "field"
+                              : "fields"}
+                          </span>
+                        </span>
+                      </button>
+                      <div x-show="expanded" x-collapse x-cloak>
+                        <div class="border-t border-neutral-100 px-3 py-3">
+                          <ResponseFieldTree fields={variant.fields} />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {response.variantType === "oneOf" &&
+                  index < response.variants.length - 1 && (
+                    <div class="flex items-center gap-2 py-0">
+                      <div class="h-px flex-1 bg-neutral-200" />
+                      <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500">
+                        OR
+                      </span>
+                      <div class="h-px flex-1 bg-neutral-200" />
+                    </div>
+                  )}
+              </>
             ))}
           </div>
-        ) : (
-          <p class="text-sm text-neutral-500 ml-2">No response body fields</p>
         )}
+        {response.fields.length === 0 &&
+        (!response.variants || response.variants.length === 0) ? (
+          <p class="text-sm text-neutral-500 ml-2">No response body fields</p>
+        ) : null}
       </div>
     ))
   }