radiant-docs 0.1.7 → 0.1.8

package/template/src/components/OpenApiPage.astro

@@ -7,8 +7,9 @@ import Oas from "oas";
 import type { HttpMethods } from "oas/types";
 import ResponseSnippets from "./endpoint/ResponseSnippets.astro";
 import { renderMarkdown } from "../lib/utils";
-import Field from "./ui/Field.astro";
+import ListChevronsToggle from "./ui/ListChevronsToggle.astro";
 import ResponseFields from "./endpoint/ResponseFields.astro";
+import ResponseFieldTree from "./endpoint/ResponseFieldTree.astro";
 import PlaygroundBar from "./endpoint/PlaygroundBar.astro";
 import PlaygroundForm from "./endpoint/PlaygroundForm.astro";
 import PlaygroundButton from "./endpoint/PlaygroundButton.astro";
@@ -28,7 +29,7 @@ const serverUrl = definition.servers?.[0]?.url;
 
 const operation = api.operation(
   route.openApiPath,
-  route.openApiMethod as HttpMethods
+  route.openApiMethod as HttpMethods,
 );
 
 const title = route.title;
@@ -45,12 +46,33 @@ export const headers: { [key: string]: string } = {
   query: "Query Parameters",
   body: "Body",
 };
+export interface FieldVariant {
+  label: string;
+  fields: Field[];
+}
+
 export interface Field {
   name: string;
   required: boolean;
   type: string;
   description: string;
-  enum?: string[];
+  enum?: (string | number)[];
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
+  hasDefault?: boolean;
+  defaultValue?: unknown;
+  isArray?: boolean;
+  style?: string;
+  explode?: boolean;
+  nested?: Field[];
+  variants?: FieldVariant[];
+  variantType?: "oneOf" | "anyOf";
+  isAdditionalProperty?: boolean;
+  mapKnownKeys?: string[];
 }
 
 export interface RequestFields {
@@ -61,6 +83,13 @@ export interface RequestFields {
   body: Field[];
 }
 
+export interface RequestSectionVariantData {
+  variants: FieldVariant[];
+  variantType: "oneOf" | "anyOf";
+}
+
+type BodyDefaultKind = "object" | "array";
+
 const requestFields: RequestFields = {
   header: [] as Field[],
   cookie: [] as Field[],
@@ -68,6 +97,647 @@ const requestFields: RequestFields = {
   query: [] as Field[],
   body: [] as Field[],
 };
+const requestSectionVariants: Partial<
+  Record<keyof RequestFields, RequestSectionVariantData>
+> = {};
+let bodyDescription = "";
+let bodyDefaultKind: BodyDefaultKind | undefined = undefined;
+
+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 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 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 variants = getSchemaVariants(schema);
+  if (variants.length === 0) return undefined;
+
+  const deduped = new Map<string, string | number>();
+  variants.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 variants = getSchemaVariants(schema);
+  if (variants.length > 0) {
+    const labels = Array.from(
+      new Set(
+        variants
+          .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 itemSchema = schema.items;
+    if (!itemSchema) return "unknown[]";
+    const itemType = getSchemaTypeLabel(itemSchema);
+    if (itemType.includes(" | ")) return `(${itemType})[]`;
+    return `${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 getSchemaStructuralType(schema: any): BodyDefaultKind | undefined {
+  if (!schema || typeof schema !== "object") return undefined;
+
+  if (schema.type === "object") return "object";
+  if (schema.type === "array") return "array";
+
+  const variants = getSchemaVariants(schema);
+  if (variants.length > 0) {
+    const variantTypes = Array.from(
+      new Set(
+        variants
+          .map((variant) => getSchemaStructuralType(variant))
+          .filter(
+            (variantType): variantType is BodyDefaultKind =>
+              variantType === "object" || variantType === "array",
+          ),
+      ),
+    );
+    if (variantTypes.length === 1) return variantTypes[0];
+    return undefined;
+  }
+
+  if (
+    (schema.properties && typeof schema.properties === "object") ||
+    schema.additionalProperties !== undefined
+  ) {
+    return "object";
+  }
+
+  if (schema.items) return "array";
+
+  if (Array.isArray(schema.allOf) && schema.allOf.length > 0) {
+    const allOfTypes = Array.from(
+      new Set(
+        schema.allOf
+          .map((part: any) => getSchemaStructuralType(part))
+          .filter(
+            (partType): partType is BodyDefaultKind =>
+              partType === "object" || partType === "array",
+          ),
+      ),
+    );
+    if (allOfTypes.length === 1) return allOfTypes[0];
+  }
+
+  return undefined;
+}
+
+function getTopLevelObjectShape(schema: any): {
+  properties: Record<string, any>;
+  required: Set<string>;
+  hasObjectShape: boolean;
+} {
+  if (!schema) {
+    return {
+      properties: {},
+      required: new Set<string>(),
+      hasObjectShape: false,
+    };
+  }
+
+  let properties: Record<string, any> = {};
+  const required = new Set<string>(
+    Array.isArray(schema.required) ? schema.required : [],
+  );
+  let hasObjectShape = false;
+
+  if (schema.properties && typeof schema.properties === "object") {
+    properties = { ...properties, ...schema.properties };
+    hasObjectShape = true;
+  }
+
+  if (Array.isArray(schema.allOf)) {
+    schema.allOf.forEach((part: any) => {
+      const partShape = getTopLevelObjectShape(part);
+      if (!partShape.hasObjectShape) return;
+
+      properties = { ...properties, ...partShape.properties };
+      partShape.required.forEach((name) => required.add(name));
+      hasObjectShape = true;
+    });
+  }
+
+  const variants = getSchemaVariants(schema);
+  if (variants.length > 0) {
+    const variantShapes = variants
+      .map((variant) => getTopLevelObjectShape(variant))
+      .filter((shape) => shape.hasObjectShape);
+
+    if (variantShapes.length > 0) {
+      variantShapes.forEach((shape) => {
+        properties = { ...properties, ...shape.properties };
+      });
+
+      const [firstShape, ...restShapes] = variantShapes;
+      const requiredAcrossVariants = new Set<string>(firstShape.required);
+      restShapes.forEach((shape) => {
+        Array.from(requiredAcrossVariants).forEach((name) => {
+          if (!shape.required.has(name)) {
+            requiredAcrossVariants.delete(name);
+          }
+        });
+      });
+      requiredAcrossVariants.forEach((name) => required.add(name));
+      hasObjectShape = true;
+    }
+  }
+
+  return { properties, required, hasObjectShape };
+}
+
+function extractRequestSchemaContent(
+  schema: any,
+  seen = new Set<any>(),
+): {
+  fields: Field[];
+  variants?: FieldVariant[];
+  variantType?: "oneOf" | "anyOf";
+} {
+  if (!schema || typeof schema !== "object") return { fields: [] };
+  if (seen.has(schema)) return { fields: [] };
+
+  const nextSeen = new Set(seen);
+  nextSeen.add(schema);
+
+  if (schema.type === "array" && schema.items) {
+    return extractRequestSchemaContent(schema.items, nextSeen);
+  }
+
+  const baseSchema = { ...schema };
+  delete baseSchema.oneOf;
+  delete baseSchema.anyOf;
+
+  const shape = getTopLevelObjectShape(baseSchema);
+
+  const fields: Field[] = Object.entries(shape.properties)
+    .sort(([nameA], [nameB]) => {
+      const aRequired = shape.required.has(nameA);
+      const bRequired = shape.required.has(nameB);
+      if (aRequired && !bRequired) return -1;
+      if (!aRequired && bRequired) return 1;
+      return 0;
+    })
+    .map(([name, propertySchema]: [string, any]) => {
+      const nestedContent = extractRequestSchemaContent(
+        propertySchema,
+        nextSeen,
+      );
+      return {
+        name,
+        required: shape.required.has(name),
+        type: getSchemaTypeLabel(propertySchema),
+        description: propertySchema?.description || "",
+        enum: getSchemaEnumValues(propertySchema),
+        ...getSchemaStringLengthConstraints(propertySchema, nextSeen),
+        ...getSchemaNumericConstraints(propertySchema, nextSeen),
+        hasDefault: Object.prototype.hasOwnProperty.call(
+          propertySchema || {},
+          "default",
+        ),
+        defaultValue: propertySchema?.default,
+        isArray: propertySchema?.type === "array",
+        nested:
+          nestedContent.fields.length > 0 ? nestedContent.fields : undefined,
+        variants: nestedContent.variants,
+        variantType: nestedContent.variantType,
+      };
+    });
+
+  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 additionalContent = additionalSchema
+      ? extractRequestSchemaContent(additionalSchema, nextSeen)
+      : { fields: [] as Field[] };
+
+    fields.push({
+      name: "[key: string]",
+      required: false,
+      type: additionalSchema ? getSchemaTypeLabel(additionalSchema) : "any",
+      description: additionalSchema?.description || "",
+      enum: additionalSchema
+        ? getSchemaEnumValues(additionalSchema)
+        : undefined,
+      ...getSchemaStringLengthConstraints(additionalSchema, nextSeen),
+      ...getSchemaNumericConstraints(additionalSchema, nextSeen),
+      hasDefault: Object.prototype.hasOwnProperty.call(
+        additionalSchema || {},
+        "default",
+      ),
+      defaultValue: additionalSchema?.default,
+      isArray: additionalSchema?.type === "array",
+      nested:
+        additionalContent.fields.length > 0
+          ? additionalContent.fields
+          : undefined,
+      variants: additionalContent.variants,
+      variantType: additionalContent.variantType,
+      isAdditionalProperty: true,
+      mapKnownKeys: Object.keys(shape.properties),
+    });
+  }
+
+  const variantType = getSchemaVariantType(schema);
+  const variantSchemas =
+    variantType === "oneOf"
+      ? schema.oneOf || []
+      : variantType === "anyOf"
+        ? schema.anyOf || []
+        : [];
+  const variants =
+    variantType && variantSchemas.length > 0
+      ? variantSchemas
+          .map((variantSchema: any, index: number) => ({
+            label: `Variant ${index + 1}`,
+            fields: extractRequestSchemaContent(variantSchema, nextSeen).fields,
+          }))
+          .filter((variant: FieldVariant) => variant.fields.length > 0)
+      : [];
+
+  return {
+    fields,
+    variants: variants.length > 0 ? variants : undefined,
+    variantType: variants.length > 0 ? variantType : undefined,
+  };
+}
 
 // Authorization
 const securityRequirements = operation.getSecurity();
@@ -130,82 +800,90 @@ if (securityRequirements && securityRequirements.length > 0) {
   });
 }
 
-// --- Regular Parameters (Path & Query) ---
+// --- Regular Parameters (Path, Query, Header, Cookie) ---
 const parameters = operation.getParameters();
 parameters.forEach((param) => {
   const schema = param.schema as any;
+  const isArray = schema?.type === "array";
+  const schemaContent = extractRequestSchemaContent(schema);
 
   const field = {
     name: param.name,
     required: param.required || false,
-    type: schema?.enum
-      ? `enum<${schema?.type || "string"}>`
-      : schema?.type || "string",
+    type: getSchemaTypeLabel(schema),
     description: param.description || "",
-    enum: schema?.enum,
+    enum: getSchemaEnumValues(schema),
+    ...getSchemaStringLengthConstraints(schema),
+    ...getSchemaNumericConstraints(schema),
+    hasDefault: Object.prototype.hasOwnProperty.call(schema || {}, "default"),
+    defaultValue: schema?.default,
+    isArray,
+    style: param.style,
+    explode: param.explode,
+    nested: schemaContent.fields.length > 0 ? schemaContent.fields : undefined,
+    variants: schemaContent.variants,
+    variantType: schemaContent.variantType,
   };
 
   if (param.in === "path") requestFields.path.push(field);
   if (param.in === "query") requestFields.query.push(field);
   if (param.in === "header") requestFields.header.push(field);
+  if (param.in === "cookie") requestFields.cookie.push(field);
 });
 
 // --- 3. Body Parameters ---
 if (operation.hasRequestBody()) {
   const requestBody = operation.getRequestBody("application/json");
   const bodySchema = (requestBody as any)?.schema as any;
+  bodyDescription =
+    (requestBody as any)?.description || bodySchema?.description || "";
+  bodyDefaultKind = getSchemaStructuralType(bodySchema);
+  const bodyContent = extractRequestSchemaContent(bodySchema);
+  requestFields.body.push(...bodyContent.fields);
 
-  // A helper to extract properties (handles direct properties or allOf)
-  let properties = bodySchema?.properties || {};
-  let required: string[] = bodySchema?.required || [];
-
-  if (bodySchema?.allOf) {
-    bodySchema.allOf.forEach((s: any) => {
-      if (s.properties) properties = { ...properties, ...s.properties };
-      if (s.required && Array.isArray(s.required)) {
-        // Merge required arrays from allOf schemas
-        required = [...new Set([...required, ...s.required])];
-      }
-    });
+  if (bodyContent.variants && bodyContent.variantType) {
+    requestSectionVariants.body = {
+      variants: bodyContent.variants,
+      variantType: bodyContent.variantType,
+    };
   }
-
-  Object.entries(properties)
-    .sort(([nameA], [nameB]) => {
-      const aRequired = required.includes(nameA);
-      const bRequired = required.includes(nameB);
-      // Required fields first (aRequired && !bRequired = -1, !aRequired && bRequired = 1, else 0)
-      if (aRequired && !bRequired) return -1;
-      if (!aRequired && bRequired) return 1;
-      return 0;
-    })
-    .forEach(([name, schema]: [string, any]) => {
-      requestFields.body.push({
-        name: name,
-        required: required.includes(name) || false,
-        type: schema?.enum
-          ? `enum<${schema?.type || "string"}>`
-          : schema?.type || "string",
-        description: schema.description || "",
-        enum: schema?.enum,
-      });
-    });
 }
+
+const formattedBodyDescription = bodyDescription
+  ? await renderMarkdown(bodyDescription)
+  : null;
 ---
 
-<Layout>
+<Layout pageTitle={title}>
   <article>
     <header class="mb-6">
-      <h1 class="text-3xl font-semibold">{title}</h1>
+      <h1 class="text-4xl font-semibold tracking-tight">{title}</h1>
     </header>
     <div class="flex flex-row-reverse justify-between gap-6 w-full">
-      <aside class="flex-1 hidden xl:block">
-        <div class="sticky top-[68px] space-y-6 pt-16 -mt-16">
-          <RequestSnippets
-            api={api}
-            method={route.openApiMethod}
-            path={route.openApiPath}
-          />
-          {responses && <ResponseSnippets responses={responses} />}
+      <aside class="flex-1 min-w-0 hidden xl:block">
+        <div
+          data-snippet-stack-host
+          class="sticky top-[92px] max-h-[calc(100vh-92px)] w-full min-w-0 overflow-hidden"
+        >
+          <div
+            data-snippet-stack
+            class="relative flex min-h-0 w-full min-w-0 flex-col gap-6 overflow-hidden"
+          >
+            <div data-snippet-slot class="min-h-0 min-w-0 overflow-hidden">
+              <RequestSnippets
+                api={api}
+                method={route.openApiMethod}
+                path={route.openApiPath}
+              />
+            </div>
+            {
+              responses && (
+                <div data-snippet-slot class="min-h-0 min-w-0 overflow-hidden">
+                  <ResponseSnippets responses={responses} />
+                </div>
+              )
+            }
+          </div>
         </div>
       </aside>
       <div class="flex-1 min-w-0">
@@ -218,6 +896,9 @@ if (operation.hasRequestBody()) {
                     serverUrl={serverUrl}
                     route={route}
                     requestFields={requestFields}
+                    requestSectionVariants={requestSectionVariants}
+                    bodyDescription={bodyDescription}
+                    bodyDefaultKind={bodyDefaultKind}
                   />
                 </PlaygroundButton>
               )
@@ -226,7 +907,10 @@ if (operation.hasRequestBody()) {
         </div>
         {
           formattedDescription && (
-            <div class="mb-6 prose-rules" set:html={formattedDescription} />
+            <div
+              class="mb-6 prose-rules text-neutral-500 **:text-neutral-500"
+              set:html={formattedDescription}
+            />
           )
         }
         <div class="xl:hidden space-y-6 mt-6">
@@ -240,25 +924,131 @@ if (operation.hasRequestBody()) {
         <div class="mt-10">
           <!-- Request -->
           {
-            Object.keys(requestFields).map(
-              (key) =>
-                requestFields[key as keyof RequestFields].length > 0 && (
-                  <>
-                    <h4 class="text-xl font-semibold mt-10">{headers[key]}</h4>
-                    <div class="*:mt-4 *:ml-4 *:pb-4 border-b border-b-neutral-100">
-                      {requestFields[key as keyof RequestFields].map((h) => (
-                        <Field
-                          name={h.name}
-                          type={h.type}
-                          required={h.required}
-                          description={h.description}
-                          enum={h.enum}
-                        />
+            Object.keys(requestFields).map((key) => {
+              const sectionFields = requestFields[key as keyof RequestFields];
+              const sectionVariantData =
+                requestSectionVariants[key as keyof RequestFields];
+              const sectionVariants = sectionVariantData?.variants || [];
+              const sectionVariantCount = sectionVariants.reduce(
+                (sum, variant) => sum + variant.fields.length,
+                0,
+              );
+              const hasCommonFields = sectionFields.length > 0;
+              const hasVariants = sectionVariantCount > 0;
+              if (!hasCommonFields && !hasVariants) return null;
+
+              const noun =
+                key === "body"
+                  ? sectionFields.length === 1
+                    ? "field"
+                    : "fields"
+                  : sectionFields.length === 1
+                    ? "parameter"
+                    : "parameters";
+              const variantNoun = key === "body" ? "field" : "parameter";
+
+              return (
+                <section class="mt-10">
+                  <h4 class="text-xl font-semibold">{headers[key]}</h4>
+                  {key === "body" && formattedBodyDescription && (
+                    <div
+                      class="mt-2 prose-rules prose-sm! text-neutral-500 **:text-neutral-500"
+                      set:html={formattedBodyDescription}
+                    />
+                  )}
+                  {hasCommonFields && (
+                    <div x-data="{ expanded: false }" class="mt-4">
+                      <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-4 py-2.5 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-400 group-hover:text-neutral-600 transition duration-200" />
+                            <span>
+                              {sectionFields.length} {noun}
+                            </span>
+                          </span>
+                        </button>
+                        <div x-show="expanded" x-collapse x-cloak>
+                          <div class="border-t border-neutral-100 p-4">
+                            <ResponseFieldTree fields={sectionFields} />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {hasVariants && (
+                    <div
+                      class:list={[
+                        "space-y-2",
+                        hasCommonFields ? "mt-3" : "mt-4",
+                      ]}
+                    >
+                      <p class="text-xs text-neutral-500">
+                        {sectionVariantData?.variantType === "anyOf"
+                          ? "One or more variants may apply."
+                          : "One of these variants applies."}
+                      </p>
+                      {sectionVariants.map((variant, index) => (
+                        <>
+                          <div class="rounded-lg 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
+                                        ? variantNoun
+                                        : `${variantNoun}s`}
+                                    </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>
+                          {sectionVariantData?.variantType === "oneOf" &&
+                            index < sectionVariants.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>
-                  </>
-                )
-            )
+                  )}
+                </section>
+              );
+            })
           }
 
           <!-- Response -->
@@ -268,3 +1058,180 @@ if (operation.hasRequestBody()) {
     </div>
   </article>
 </Layout>
+
+<script is:inline>
+  const stack = document.querySelector("[data-snippet-stack]");
+
+  if (stack instanceof HTMLElement) {
+    const stackHost = stack.closest("[data-snippet-stack-host]");
+    const host =
+      stackHost instanceof HTMLElement ? stackHost : stack.parentElement;
+    const stickyTopPx =
+      host instanceof HTMLElement
+        ? Number.parseFloat(window.getComputedStyle(host).top || "0") || 0
+        : 0;
+
+    const getViewportHeight = () => {
+      if (window.visualViewport?.height) {
+        return Math.floor(window.visualViewport.height);
+      }
+      return Math.floor(window.innerHeight);
+    };
+
+    const getViewportBudget = () => {
+      const insetTop = Math.max(0, Math.floor(stickyTopPx));
+      return Math.max(0, getViewportHeight() - insetTop);
+    };
+
+    const slots = Array.from(
+      stack.querySelectorAll("[data-snippet-slot]"),
+    ).filter((slot) => slot instanceof HTMLElement);
+
+    const applySlotHeights = () => {
+      if (!slots.length) return;
+
+      const viewportBudget = getViewportBudget();
+      if (host instanceof HTMLElement && viewportBudget > 0) {
+        host.style.maxHeight = `${viewportBudget}px`;
+      }
+
+      for (const slot of slots) {
+        slot.style.height = "auto";
+        slot.style.maxHeight = "none";
+      }
+
+      const getBorderY = (slot) => {
+        const style = window.getComputedStyle(slot);
+        const top = Number.parseFloat(style.borderTopWidth || "0") || 0;
+        const bottom = Number.parseFloat(style.borderBottomWidth || "0") || 0;
+        return top + bottom;
+      };
+
+      const computed = window.getComputedStyle(stack);
+      const gap =
+        Number.parseFloat(computed.rowGap || computed.gap || "0") || 0;
+      const hostHeight =
+        host instanceof HTMLElement
+          ? Math.floor(host.clientHeight)
+          : Math.floor(stack.clientHeight);
+      const isClampedByViewport =
+        viewportBudget > 0 && hostHeight >= viewportBudget - 1;
+      const bottomGutter = isClampedByViewport ? 24 : 0;
+      const available = Math.max(
+        0,
+        Math.floor(
+          hostHeight - gap * Math.max(0, slots.length - 1) - bottomGutter,
+        ),
+      );
+
+      const naturalHeights = slots.map((slot) =>
+        Math.ceil(slot.scrollHeight + getBorderY(slot)),
+      );
+      const naturalTotal = naturalHeights.reduce(
+        (sum, value) => sum + value,
+        0,
+      );
+
+      if (naturalTotal <= available) {
+        for (let i = 0; i < slots.length; i += 1) {
+          const height = naturalHeights[i];
+          slots[i].style.height = `${height}px`;
+          slots[i].style.maxHeight = `${height}px`;
+        }
+        return;
+      }
+
+      const roundedHeights = new Array(slots.length).fill(0);
+      let remainingHeight = available;
+      let remainingIndexes = slots
+        .map((_, index) => index)
+        .sort((a, b) => naturalHeights[a] - naturalHeights[b]);
+
+      while (remainingIndexes.length > 0) {
+        const evenShare = remainingHeight / remainingIndexes.length;
+        const smallestIndex = remainingIndexes[0];
+        const smallestNatural = naturalHeights[smallestIndex];
+
+        if (smallestNatural <= evenShare) {
+          const fixedHeight = Math.min(smallestNatural, remainingHeight);
+          roundedHeights[smallestIndex] = Math.floor(fixedHeight);
+          remainingHeight -= roundedHeights[smallestIndex];
+          remainingIndexes = remainingIndexes.slice(1);
+          continue;
+        }
+
+        const base = Math.floor(evenShare);
+        const remainder = remainingHeight - base * remainingIndexes.length;
+        for (let i = 0; i < remainingIndexes.length; i += 1) {
+          const index = remainingIndexes[i];
+          roundedHeights[index] = base + (i < remainder ? 1 : 0);
+        }
+        remainingHeight = 0;
+        remainingIndexes = [];
+      }
+
+      let roundedTotal = roundedHeights.reduce((sum, value) => sum + value, 0);
+      let delta = available - roundedTotal;
+
+      if (delta !== 0) {
+        const adjustOrder = slots
+          .map((_, index) => index)
+          .sort((a, b) => roundedHeights[b] - roundedHeights[a]);
+
+        while (delta !== 0) {
+          let changed = false;
+
+          for (const index of adjustOrder) {
+            if (delta === 0) break;
+
+            if (delta > 0) {
+              roundedHeights[index] += 1;
+              delta -= 1;
+              changed = true;
+              continue;
+            }
+
+            if (roundedHeights[index] > 0) {
+              roundedHeights[index] -= 1;
+              delta += 1;
+              changed = true;
+            }
+          }
+
+          if (!changed) break;
+        }
+      }
+
+      for (let i = 0; i < slots.length; i += 1) {
+        slots[i].style.height = `${roundedHeights[i]}px`;
+        slots[i].style.maxHeight = `${roundedHeights[i]}px`;
+      }
+    };
+
+    const scheduleApplySlotHeights = () => {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(applySlotHeights);
+      });
+    };
+
+    const resizeObserver = new ResizeObserver(applySlotHeights);
+    resizeObserver.observe(stack);
+    if (host instanceof HTMLElement) {
+      resizeObserver.observe(host);
+    }
+    for (const slot of slots) {
+      resizeObserver.observe(slot);
+    }
+
+    window.addEventListener("resize", applySlotHeights);
+    window.visualViewport?.addEventListener("resize", applySlotHeights);
+    window.addEventListener("scroll", scheduleApplySlotHeights, {
+      passive: true,
+    });
+    window.addEventListener(
+      "rd:snippet-content-change",
+      scheduleApplySlotHeights,
+    );
+    applySlotHeights();
+  }
+</script>