radiant-docs 0.1.59 → 0.1.61

package/template/src/components/OpenApiPage.astro

@@ -1,10 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import type { OpenApiRoute } from "../lib/routes";
-import { loadOpenApiSpec } from "../lib/validation";
 import RequestSnippets from "./endpoint/RequestSnippets.astro";
-import Oas from "oas";
-import type { HttpMethods } from "oas/types";
 import ResponseSnippets from "./endpoint/ResponseSnippets.astro";
 import { renderMarkdown } from "../lib/utils";
 import ListChevronsToggle from "./ui/ListChevronsToggle.astro";
@@ -13,842 +10,35 @@ import ResponseFieldTree from "./endpoint/ResponseFieldTree.astro";
 import PlaygroundBar from "./endpoint/PlaygroundBar.astro";
 import PlaygroundForm from "./endpoint/PlaygroundForm.astro";
 import PlaygroundButton from "./endpoint/PlaygroundButton.astro";
-import { getOasInstance } from "../lib/oas";
+import {
+  getOpenApiOperationDoc,
+  OPENAPI_REQUEST_SECTION_LABELS,
+  type OpenApiRequestFields,
+} from "../lib/openapi/operation-doc";
 
 interface Props {
   route: OpenApiRoute;
 }
 
-const { route } = Astro.props;
-
-// Load and parse the OpenAPI file (handles both URLs and local files)
-const api = await getOasInstance(route.filePath);
-
-const definition = api.getDefinition();
-const serverUrl = definition.servers?.[0]?.url;
-
-const operation = api.operation(
-  route.openApiPath,
-  route.openApiMethod as HttpMethods,
-);
+type RequestFields = OpenApiRequestFields;
 
-const title = route.title;
-const responses = operation.schema.responses;
-const description = operation.getDescription();
+const { route } = Astro.props;
+const operationDoc = await getOpenApiOperationDoc(route);
+const {
+  api,
+  responses,
+  requestFields,
+  requestSectionVariants,
+  bodyDescription,
+  bodyDefaultKind,
+  serverUrl,
+} = operationDoc;
+const title = operationDoc.title;
+const description = operationDoc.description;
+const headers: Record<string, string> = OPENAPI_REQUEST_SECTION_LABELS;
 const formattedDescription = description
   ? await renderMarkdown(description)
   : null;
-
-export const headers: { [key: string]: string } = {
-  header: "Header",
-  cookie: "Cookie",
-  path: "Path Parameters",
-  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 | 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 {
-  header: Field[];
-  cookie: Field[];
-  path: Field[];
-  query: Field[];
-  body: Field[];
-}
-
-export interface RequestSectionVariantData {
-  variants: FieldVariant[];
-  variantType: "oneOf" | "anyOf";
-}
-
-type BodyDefaultKind = "object" | "array";
-
-const requestFields: RequestFields = {
-  header: [] as Field[],
-  cookie: [] as Field[],
-  path: [] as Field[],
-  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();
-const schemes = definition.components?.securitySchemes || {};
-
-if (securityRequirements && securityRequirements.length > 0) {
-  const firstOption = securityRequirements[0];
-
-  Object.keys(firstOption).forEach((key) => {
-    const scheme = schemes[key];
-    if (!scheme) return;
-
-    // Common defaults for all auth types
-    const fieldData: Field = {
-      name: "", // Will be determined below
-      required: true, // If it's in the requirement list, it is required
-      type: "string", // Auth credentials are essentially always strings
-      description: scheme.description || "", // Fallback description logic below
-    };
-
-    // --- CASE 1: API KEY (Explicit Location) ---
-    if (scheme.type === "apiKey") {
-      fieldData.name = scheme.name; // e.g. 'x-api-key' or 'api_token'
-
-      if (!fieldData.description) {
-        fieldData.description = `API Key required in ${scheme.in}.`;
-      }
-
-      // Sort into buckets
-      if (scheme.in === "header") requestFields.header.push(fieldData);
-      else if (scheme.in === "query") requestFields.query.push(fieldData);
-      else if (scheme.in === "cookie") requestFields.cookie.push(fieldData);
-    }
-
-    // --- CASE 2: HTTP (Bearer / Basic) ---
-    // These are implicit headers.
-    else if (scheme.type === "http") {
-      fieldData.name = "Authorization";
-
-      if (scheme.scheme === "bearer") {
-        fieldData.description =
-          fieldData.description || "Bearer token authentication.";
-      } else if (scheme.scheme === "basic") {
-        fieldData.description =
-          fieldData.description ||
-          "Basic authentication (Base64 encoded username:password).";
-      }
-
-      requestFields.header.push(fieldData);
-    }
-
-    // --- CASE 3: OAUTH2 / OPENID ---
-    // Standard practice is a Bearer header.
-    else if (scheme.type === "oauth2" || scheme.type === "openIdConnect") {
-      fieldData.name = "Authorization";
-      fieldData.description = fieldData.description || "OAuth2 Bearer Token.";
-
-      requestFields.header.push(fieldData);
-    }
-  });
-}
-
-// --- 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: getSchemaTypeLabel(schema),
-    description: param.description || "",
-    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);
-
-  if (bodyContent.variants && bodyContent.variantType) {
-    requestSectionVariants.body = {
-      variants: bodyContent.variants,
-      variantType: bodyContent.variantType,
-    };
-  }
-}
-
 const formattedBodyDescription = bodyDescription
   ? await renderMarkdown(bodyDescription)
   : null;
@@ -921,13 +111,29 @@ const formattedBodyDescription = bodyDescription
             />
           )
         }
-        <div class="xl:hidden space-y-6 mt-6">
-          <RequestSnippets
-            api={api}
-            method={route.openApiMethod}
-            path={route.openApiPath}
-          />
-          {responses && <ResponseSnippets responses={responses} />}
+        <div data-inline-snippet-stack class="xl:hidden space-y-6 mt-6">
+          <div
+            data-snippet-slot
+            data-inline-snippet-slot
+            class="min-h-0 min-w-0 overflow-hidden transition-[height,max-height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+          >
+            <RequestSnippets
+              api={api}
+              method={route.openApiMethod}
+              path={route.openApiPath}
+            />
+          </div>
+          {
+            responses && (
+              <div
+                data-snippet-slot
+                data-inline-snippet-slot
+                class="min-h-0 min-w-0 overflow-hidden transition-[height,max-height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+              >
+                <ResponseSnippets responses={responses} />
+              </div>
+            )
+          }
         </div>
         <div class="mt-10">
           <!-- Request -->
@@ -967,10 +173,9 @@ const formattedBodyDescription = bodyDescription
                     />
                   )}
                   {hasCommonFields && (
-                    <div x-data="{ expanded: false }" class="mt-4">
+                    <div x-data="{ expanded: true }" class="mt-4">
                       <div
-                        class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                        x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                        class="w-full overflow-hidden rounded-xl border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                       >
                         <button
                           type="button"
@@ -1011,10 +216,9 @@ const formattedBodyDescription = bodyDescription
                             <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
-                            <div x-data="{ expanded: false }">
+                            <div x-data="{ expanded: true }">
                               <div
-                                class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
-                                x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
+                                class="w-full overflow-hidden rounded-lg border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                               >
                                 <button
                                   type="button"
@@ -1295,4 +499,138 @@ const formattedBodyDescription = bodyDescription
     );
     applySlotHeights();
   }
+
+  const inlineStack = document.querySelector("[data-inline-snippet-stack]");
+
+  if (inlineStack instanceof HTMLElement) {
+    const inlineSlots = Array.from(
+      inlineStack.querySelectorAll("[data-inline-snippet-slot]"),
+    ).filter((slot) => slot instanceof HTMLElement);
+
+    const getInlineViewportHeight = () => {
+      if (window.visualViewport?.height) {
+        return Math.floor(window.visualViewport.height);
+      }
+      return Math.floor(window.innerHeight);
+    };
+
+    const getInlineSlotHeightCap = () => {
+      const viewportCap = Math.floor(getInlineViewportHeight() * 0.7);
+      return Math.max(0, Math.min(448, viewportCap));
+    };
+
+    const inlinePrefersReducedMotion =
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const inlineSlotHeightTransitionMs = 360;
+    let isAnimatingInlineSlotHeights = false;
+    let inlineSlotHeightAnimationTimeoutId = null;
+
+    const resetInlineSlotHeights = () => {
+      for (const slot of inlineSlots) {
+        slot.style.height = "";
+        slot.style.maxHeight = "";
+      }
+    };
+
+    const applyInlineSlotHeights = ({ animate = false } = {}) => {
+      if (!inlineSlots.length) return;
+      if (isAnimatingInlineSlotHeights && !animate) return;
+
+      if (window.getComputedStyle(inlineStack).display === "none") {
+        resetInlineSlotHeights();
+        return;
+      }
+
+      const shouldAnimate = animate && !inlinePrefersReducedMotion;
+      const previousHeights = shouldAnimate
+        ? inlineSlots.map((slot) =>
+            Math.ceil(slot.getBoundingClientRect().height),
+          )
+        : [];
+      const previousTransitions = shouldAnimate
+        ? inlineSlots.map((slot) => slot.style.transition)
+        : [];
+      const heightCap = getInlineSlotHeightCap();
+
+      if (shouldAnimate) {
+        for (const slot of inlineSlots) {
+          slot.style.transition = "none";
+        }
+      }
+
+      for (const slot of inlineSlots) {
+        slot.style.height = "auto";
+        slot.style.maxHeight = "none";
+      }
+
+      const targetHeights = inlineSlots.map((slot) => {
+        const naturalHeight = Math.ceil(slot.scrollHeight);
+        return Math.min(naturalHeight, heightCap);
+      });
+
+      const setInlineSlotHeights = () => {
+        for (let i = 0; i < inlineSlots.length; i += 1) {
+          const height = targetHeights[i];
+          inlineSlots[i].style.height = `${height}px`;
+          inlineSlots[i].style.maxHeight = `${height}px`;
+        }
+      };
+
+      if (!shouldAnimate) {
+        setInlineSlotHeights();
+        return;
+      }
+
+      isAnimatingInlineSlotHeights = true;
+      if (inlineSlotHeightAnimationTimeoutId) {
+        window.clearTimeout(inlineSlotHeightAnimationTimeoutId);
+      }
+
+      for (let i = 0; i < inlineSlots.length; i += 1) {
+        const height = previousHeights[i];
+        inlineSlots[i].style.height = `${height}px`;
+        inlineSlots[i].style.maxHeight = `${height}px`;
+      }
+
+      void inlineStack.offsetHeight;
+
+      for (let i = 0; i < inlineSlots.length; i += 1) {
+        inlineSlots[i].style.transition = previousTransitions[i];
+      }
+
+      window.requestAnimationFrame(setInlineSlotHeights);
+
+      inlineSlotHeightAnimationTimeoutId = window.setTimeout(() => {
+        isAnimatingInlineSlotHeights = false;
+        inlineSlotHeightAnimationTimeoutId = null;
+        applyInlineSlotHeights();
+      }, inlineSlotHeightTransitionMs + 80);
+    };
+
+    let inlineSlotAnimationFrameId = null;
+    const scheduleInlineSlotHeights = (options = {}) => {
+      if (inlineSlotAnimationFrameId) {
+        window.cancelAnimationFrame(inlineSlotAnimationFrameId);
+      }
+
+      inlineSlotAnimationFrameId = window.requestAnimationFrame(() => {
+        inlineSlotAnimationFrameId = window.requestAnimationFrame(() => {
+          inlineSlotAnimationFrameId = null;
+          applyInlineSlotHeights(options);
+        });
+      });
+    };
+
+    const inlineResizeObserver = new ResizeObserver(scheduleInlineSlotHeights);
+    inlineResizeObserver.observe(inlineStack);
+
+    window.addEventListener("resize", scheduleInlineSlotHeights);
+    window.visualViewport?.addEventListener("resize", scheduleInlineSlotHeights);
+    window.addEventListener(
+      "rd:snippet-content-change",
+      () => scheduleInlineSlotHeights({ animate: true }),
+    );
+    scheduleInlineSlotHeights();
+  }
 </script>