radiant-docs 0.1.64 → 0.1.65

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

@@ -10,7 +10,7 @@ import {
   type OpenApiRequestFields,
   type OpenApiRequestSectionVariantData,
 } from "../../lib/openapi/operation-doc";
-import Accordion from "../user/Accordion.astro";
+import ListChevronsToggle from "../ui/ListChevronsToggle.astro";
 import PlaygroundBar from "./PlaygroundBar.astro";
 import ResponseDisplay from "./ResponseDisplay.astro";
 import PlaygroundField from "./PlaygroundField.astro";
@@ -27,6 +27,7 @@ interface Props {
   >;
   bodyDescription?: string;
   bodyDefaultKind?: "object" | "array";
+  requestBodyContentType?: string;
 }
 
 const {
@@ -36,6 +37,7 @@ const {
   requestSectionVariants = {},
   bodyDescription = "",
   bodyDefaultKind,
+  requestBodyContentType,
 } = Astro.props;
 const headers: Record<string, string> = OPENAPI_REQUEST_SECTION_LABELS;
 const config = await getConfig();
@@ -70,6 +72,11 @@ const sectionVariantFieldNames = Object.fromEntries(
     ),
   ]),
 );
+const headerValuePrefixes = Object.fromEntries(
+  requestFields.header
+    .filter((field) => field.valuePrefix)
+    .map((field) => [field.name.toLowerCase(), field.valuePrefix]),
+);
 ---
 
 <div
@@ -77,8 +84,10 @@ const sectionVariantFieldNames = Object.fromEntries(
     loading: false,
     response: null,
     queryFieldMeta: ${JSON.stringify(queryFieldMeta)},
+    headerValuePrefixes: ${JSON.stringify(headerValuePrefixes)},
     sectionVariantFieldNames: ${JSON.stringify(sectionVariantFieldNames)},
     bodyDefaultKind: ${JSON.stringify(bodyDefaultKind ?? null)},
+    requestBodyContentType: ${JSON.stringify(requestBodyContentType ?? null)},
     shiki: ${JSON.stringify(shikiRuntimeConfig ?? null)},
     selectedSectionVariants: {},
     inputs: {
@@ -88,6 +97,9 @@ const sectionVariantFieldNames = Object.fromEntries(
       cookie: {},
       body: {}
     },
+    destroy() {
+      this.revokeResponseObjectUrl();
+    },
     getSectionVariantFieldNames(section, variantIndex) {
       const sectionVariants = this.sectionVariantFieldNames[section] || [];
       const variantNames = sectionVariants[variantIndex];
@@ -179,6 +191,10 @@ const sectionVariantFieldNames = Object.fromEntries(
         return undefined;
       }
 
+      if (this.isFileValue(value)) {
+        return value;
+      }
+
       if (Array.isArray(value)) {
         const cleaned = value
           .map((item) => this.sanitizeBodyValue(item))
@@ -201,8 +217,217 @@ const sectionVariantFieldNames = Object.fromEntries(
       return (
         value !== null &&
         typeof value === 'object' &&
-        !Array.isArray(value)
+        !Array.isArray(value) &&
+        !this.isFileValue(value)
+      );
+    },
+    isFileValue(value) {
+      return (
+        (typeof File !== 'undefined' && value instanceof File) ||
+        (typeof Blob !== 'undefined' && value instanceof Blob)
+      );
+    },
+    revokeResponseObjectUrl() {
+      const objectUrl = this.response?.bodyObjectUrl;
+      if (objectUrl && typeof URL !== 'undefined') {
+        URL.revokeObjectURL(objectUrl);
+      }
+    },
+    getBaseContentType(contentType) {
+      return String(contentType || '').split(';')[0].trim().toLowerCase();
+    },
+    getMediaKind(contentType) {
+      const baseContentType = this.getBaseContentType(contentType);
+      if (baseContentType.startsWith('audio/')) return 'audio';
+      if (baseContentType.startsWith('image/')) return 'image';
+      if (baseContentType.startsWith('video/')) return 'video';
+      return null;
+    },
+    getTextPreviewLanguage(contentType, filename) {
+      const baseContentType = this.getBaseContentType(contentType);
+      const normalizedFilename = String(filename || '').toLowerCase();
+      if (baseContentType === 'text/event-stream') return 'yaml';
+      if (
+        baseContentType === 'application/json' ||
+        baseContentType.endsWith('+json') ||
+        normalizedFilename.endsWith('.json') ||
+        normalizedFilename.endsWith('.jsonl')
+      ) {
+        return 'json';
+      }
+      if (
+        baseContentType === 'application/yaml' ||
+        baseContentType === 'application/x-yaml' ||
+        normalizedFilename.endsWith('.yaml') ||
+        normalizedFilename.endsWith('.yml')
+      ) {
+        return 'yaml';
+      }
+      return 'plaintext';
+    },
+    isJsonContentType(contentType) {
+      const baseContentType = this.getBaseContentType(contentType);
+      return baseContentType === 'application/json' || baseContentType.endsWith('+json');
+    },
+    isTextLikeFilename(filename) {
+      const normalizedFilename = String(filename || '').toLowerCase();
+      return [
+        '.csv',
+        '.css',
+        '.html',
+        '.js',
+        '.json',
+        '.jsonl',
+        '.md',
+        '.mjs',
+        '.svg',
+        '.ts',
+        '.txt',
+        '.xml',
+        '.yaml',
+        '.yml',
+      ].some((extension) => normalizedFilename.endsWith(extension));
+    },
+    isTextPreviewContentType(contentType, filename) {
+      const baseContentType = this.getBaseContentType(contentType);
+      if (!baseContentType) return true;
+      if (baseContentType.startsWith('text/')) return true;
+      if (this.isJsonContentType(baseContentType)) return true;
+      if (baseContentType === 'application/x-ndjson') return true;
+      if (baseContentType === 'application/xml' || baseContentType.endsWith('+xml')) {
+        return true;
+      }
+      if (
+        baseContentType === 'application/javascript' ||
+        baseContentType === 'application/x-javascript'
+      ) {
+        return true;
+      }
+      return this.isTextLikeFilename(filename);
+    },
+    getFilenameFromContentDisposition(contentDisposition) {
+      const parts = String(contentDisposition || '')
+        .split(';')
+        .map((part) => part.trim())
+        .filter(Boolean);
+      const filenameStarPart = parts.find((part) =>
+        part.toLowerCase().startsWith('filename*='),
       );
+      const filenamePart =
+        filenameStarPart ||
+        parts.find((part) => part.toLowerCase().startsWith('filename='));
+
+      if (!filenamePart) return '';
+
+      let value = filenamePart.slice(filenamePart.indexOf('=') + 1).trim();
+      if (
+        (value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))
+      ) {
+        value = value.slice(1, -1);
+      }
+
+      if (filenameStarPart && value.toLowerCase().startsWith("utf-8''")) {
+        value = value.slice(7);
+      }
+
+      try {
+        value = decodeURIComponent(value);
+      } catch (_error) {
+        // Leave non-percent-encoded filenames as-is.
+      }
+
+      return value.split(String.fromCharCode(92)).join('/').split('/').pop() || '';
+    },
+    getResponseFileExtension(contentType) {
+      const baseContentType = this.getBaseContentType(contentType);
+      const extensionByType = {
+        'application/gzip': '.gz',
+        'application/json': '.json',
+        'application/octet-stream': '.bin',
+        'application/pdf': '.pdf',
+        'application/zip': '.zip',
+        'audio/aac': '.aac',
+        'audio/flac': '.flac',
+        'audio/mpeg': '.mp3',
+        'audio/ogg': '.ogg',
+        'audio/wav': '.wav',
+        'audio/webm': '.webm',
+        'image/gif': '.gif',
+        'image/jpeg': '.jpg',
+        'image/png': '.png',
+        'image/svg+xml': '.svg',
+        'image/webp': '.webp',
+        'text/csv': '.csv',
+        'text/plain': '.txt',
+        'video/mp4': '.mp4',
+        'video/mpeg': '.mpeg',
+        'video/quicktime': '.mov',
+        'video/webm': '.webm',
+      };
+      return extensionByType[baseContentType] || '';
+    },
+    getResponseFilename(headers, contentType) {
+      const disposition =
+        headers['content-disposition'] || headers['Content-Disposition'] || '';
+      const filename = this.getFilenameFromContentDisposition(disposition);
+      if (filename) return filename;
+      return 'response' + this.getResponseFileExtension(contentType);
+    },
+    formatByteSize(bytes) {
+      if (!Number.isFinite(bytes)) return '';
+      if (bytes < 1024) return bytes + ' B';
+      const units = ['KB', 'MB', 'GB'];
+      let size = bytes / 1024;
+      let unitIndex = 0;
+      while (size >= 1024 && unitIndex < units.length - 1) {
+        size = size / 1024;
+        unitIndex += 1;
+      }
+      return size.toFixed(size >= 10 ? 1 : 2) + ' ' + units[unitIndex];
+    },
+    buildFormData(rawValue) {
+      const cleanedValue = this.sanitizeBodyValue(rawValue);
+      if (cleanedValue === undefined) return undefined;
+
+      const formData = new FormData();
+      let hasEntries = false;
+
+      const appendValue = (key, value) => {
+        const cleaned = this.sanitizeBodyValue(value);
+        if (cleaned === undefined) return;
+
+        if (this.isFileValue(cleaned)) {
+          formData.append(key, cleaned);
+          hasEntries = true;
+          return;
+        }
+
+        if (Array.isArray(cleaned)) {
+          cleaned.forEach((item) => appendValue(key, item));
+          return;
+        }
+
+        if (this.isPlainObject(cleaned)) {
+          Object.entries(cleaned).forEach(([nestedKey, nestedValue]) => {
+            appendValue(key + '[' + nestedKey + ']', nestedValue);
+          });
+          return;
+        }
+
+        formData.append(key, String(cleaned));
+        hasEntries = true;
+      };
+
+      if (this.isPlainObject(cleanedValue)) {
+        Object.entries(cleanedValue).forEach(([key, value]) => {
+          appendValue(key, value);
+        });
+      } else {
+        appendValue('body', cleanedValue);
+      }
+
+      return hasEntries ? formData : undefined;
     },
     serializeQueryObject(params, key, rawValue, meta = {}) {
       const cleanedObject = this.sanitizeBodyValue(rawValue);
@@ -334,6 +559,37 @@ const sectionVariantFieldNames = Object.fromEntries(
 
       return cookieParts.join('; ');
     },
+    formatHeaderValue(name, value) {
+      const valueText =
+        value === undefined || value === null ? '' : String(value).trim();
+      if (!valueText) return '';
+
+      const prefix = this.headerValuePrefixes[String(name).toLowerCase()];
+      if (!prefix) return valueText;
+
+      const prefixText = String(prefix).trim();
+      if (!prefixText) return valueText;
+
+      return valueText.toLowerCase().startsWith(prefixText.toLowerCase() + ' ')
+        ? valueText
+        : prefixText + ' ' + valueText;
+    },
+    buildRequestHeaders() {
+      const headers = {};
+      const contentType = String(this.requestBodyContentType || '').toLowerCase();
+      if (!contentType.includes('multipart/form-data')) {
+        headers['Content-Type'] = this.requestBodyContentType || 'application/json';
+      }
+
+      Object.entries(this.inputs.header || {}).forEach(([key, value]) => {
+        const headerName = String(key).trim();
+        const headerValue = this.formatHeaderValue(headerName, value);
+        if (!headerName || !headerValue) return;
+        headers[headerName] = headerValue;
+      });
+
+      return headers;
+    },
     buildQueryParams() {
       const params = new URLSearchParams();
 
@@ -420,6 +676,7 @@ const sectionVariantFieldNames = Object.fromEntries(
     async sendRequest(event) {
       if (!this.validateInputs(event?.currentTarget)) return;
 
+      this.revokeResponseObjectUrl();
       this.loading = true;
       try {
         // 1. Construct URL with Path Parameters
@@ -433,22 +690,30 @@ const sectionVariantFieldNames = Object.fromEntries(
         // 3. Prepare Fetch Options
         const options = {
           method: ${JSON.stringify(route.openApiMethod.toUpperCase())},
-          headers: {
-            'Content-Type': 'application/json',
-            ...this.inputs.header
-          }
+          headers: this.buildRequestHeaders()
         };
         const cookieHeader = this.buildCookieHeader();
 
         // 4. Add Body if needed
         if (['POST', 'PUT', 'PATCH'].includes(options.method)) {
-          const sanitizedBody = this.sanitizeBodyValue(this.inputs.body);
-          if (sanitizedBody !== undefined) {
-            options.body = JSON.stringify(sanitizedBody);
+          const isMultipartBody = String(this.requestBodyContentType || '')
+            .toLowerCase()
+            .includes('multipart/form-data');
+
+          if (isMultipartBody) {
+            const formData = this.buildFormData(this.inputs.body);
+            if (formData !== undefined) {
+              options.body = formData;
+            }
           } else {
-            const defaultBody = this.getDefaultRequestBody();
-            if (defaultBody !== undefined) {
-              options.body = JSON.stringify(defaultBody);
+            const sanitizedBody = this.sanitizeBodyValue(this.inputs.body);
+            if (sanitizedBody !== undefined) {
+              options.body = JSON.stringify(sanitizedBody);
+            } else {
+              const defaultBody = this.getDefaultRequestBody();
+              if (defaultBody !== undefined) {
+                options.body = JSON.stringify(defaultBody);
+              }
             }
           }
         }
@@ -498,9 +763,54 @@ const sectionVariantFieldNames = Object.fromEntries(
           this.shiki,
         );
         const contentType = res.headers.get('content-type') || '';
+        const responseFilename = this.getResponseFilename(responseHeaders, contentType);
+        const mediaKind = this.getMediaKind(contentType);
+        const shouldPreviewAsText = this.isTextPreviewContentType(
+          contentType,
+          responseFilename,
+        );
+
+        if (mediaKind) {
+          const blob = await res.blob();
+          const bodyObjectUrl = URL.createObjectURL(blob);
+          this.response = {
+            status,
+            headers: responseHeaders,
+            bodyKind: 'media',
+            mediaKind,
+            bodyObjectUrl,
+            bodyContentType: contentType,
+            bodyFilename: responseFilename,
+            bodySize: blob.size,
+            bodySizeLabel: this.formatByteSize(blob.size),
+            highlightedHeaders
+          };
+          return;
+        }
+
+        if (!shouldPreviewAsText) {
+          const blob = await res.blob();
+          const bodyObjectUrl = URL.createObjectURL(blob);
+          this.response = {
+            status,
+            headers: responseHeaders,
+            bodyKind: 'binary',
+            bodyObjectUrl,
+            bodyContentType: contentType,
+            bodyFilename: responseFilename,
+            bodySize: blob.size,
+            bodySizeLabel: this.formatByteSize(blob.size),
+            highlightedHeaders
+          };
+          return;
+        }
+
         const responseText = await res.text();
 
-        if (contentType.includes('application/json')) {
+        if (contentType.toLowerCase().includes('text/event-stream')) {
+          responseDataText = responseText || '(empty response)';
+          responseDataLanguage = 'yaml';
+        } else if (this.isJsonContentType(contentType)) {
           try {
             const parsed =
               responseText.trim().length > 0 ? JSON.parse(responseText) : null;
@@ -508,9 +818,17 @@ const sectionVariantFieldNames = Object.fromEntries(
             responseDataLanguage = 'json';
           } catch (parseError) {
             responseDataText = responseText || '(empty response)';
+            responseDataLanguage = this.getTextPreviewLanguage(
+              contentType,
+              responseFilename,
+            );
           }
         } else {
           responseDataText = responseText || '(empty response)';
+          responseDataLanguage = this.getTextPreviewLanguage(
+            contentType,
+            responseFilename,
+          );
         }
         const highlightedData = await window.RadiantPlaygroundHighlightCode(
           responseDataText,
@@ -521,6 +839,9 @@ const sectionVariantFieldNames = Object.fromEntries(
         this.response = {
           status,
           headers: responseHeaders,
+          bodyKind: 'code',
+          bodyContentType: contentType,
+          bodyFilename: responseFilename,
           highlightedData,
           highlightedHeaders
         };
@@ -538,7 +859,7 @@ const sectionVariantFieldNames = Object.fromEntries(
   data-playground-form-root
   class="flex w-full h-full min-h-0 flex-col"
 >
-
+<div>
     <PlaygroundBar route={route} serverUrl={serverUrl}>
       <button
         @click="sendRequest($event)"
@@ -561,15 +882,14 @@ const sectionVariantFieldNames = Object.fromEntries(
         </span>
       </button>
     </PlaygroundBar>
-
+  </div>
 
   <div class="min-h-0 flex-1 flex flex-col lg:flex-row-reverse">
     <div class="lg:flex-1 w-full min-h-0 h-[calc(40dvh-2rem-23px-12px)] max-h-[calc(40dvh-2rem-23px-12px)] lg:h-auto lg:max-h-[calc(100dvh-4rem-46px-24px)] overflow-hidden pt-4 lg:pb-6">
       <ResponseDisplay />
     </div>
     <div class="lg:flex-1 relative">
-    <div class="flex-3 min-h-0 max-h-[calc(60dvh-2rem-23px-12px)] lg:max-h-[calc(100dvh-4rem-46px-24px)] overflow-y-auto overscroll-contain [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90">
-      <div class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 bg-linear-to-b from-background via-white/60 to-transparent dark:via-neutral-900/70"></div>
+    <div class="flex-3 min-h-0 max-h-[calc(60dvh-2rem-23px-12px)] lg:max-h-[calc(100dvh-4rem-46px-24px)] overflow-y-auto overscroll-contain mask-[linear-gradient(to_bottom,transparent_0,black_16px,black_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0,black_16px,black_100%)] [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90">
       <div class="space-y-4 lg:pr-4 pt-4 pb-6">
       {
         Object.keys(requestFields).map(
@@ -578,97 +898,160 @@ const sectionVariantFieldNames = Object.fromEntries(
             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;
             const keyLiteral = JSON.stringify(key);
 
-            if (sectionFields.length === 0 && sectionVariants.length === 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 (
-              <div class="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)] rounded-xl p-4 pb-0 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)] [&_[role='region']]:border-b-0">
-                <Accordion title={headers[key]} defaultOpen titleSize="xl">
-                  {key === "body" && formattedBodyDescription && (
-                    <div
-                      class="mb-4 prose-rules prose-sm! text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
-                      set:html={formattedBodyDescription}
-                    />
-                  )}
-                  {sectionFields.map((field) => (
-                    <div class="border-b border-b-neutral-100 dark:border-b-neutral-800 last:border-none pb-4 mb-4 last:pb-0 last:mb-0 first:pt-2">
-                      <PlaygroundField field={field} requestPart={key} />
+              <section>
+                <h4 class="rd-document-heading text-base font-semibold text-neutral-900 dark:text-neutral-100">
+                  {headers[key]}
+                </h4>
+                {key === "body" && formattedBodyDescription && (
+                  <div
+                    class="mt-2 prose-rules prose-sm! text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
+                    set:html={formattedBodyDescription}
+                  />
+                )}
+                {hasCommonFields && (
+                  <div x-data="{ expanded: true }" class="mt-3">
+                    <div class="w-full overflow-hidden rounded-xl border-[0.5px] border-neutral-900/12 bg-neutral-50/50 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"
+                        x-on:click="expanded = !expanded"
+                        x-bind:aria-expanded="expanded"
+                        class="group flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-neutral-700 transition-colors duration-200 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
+                      >
+                        <span class="inline-flex items-center gap-2">
+                          <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 transition duration-200 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
+                          <span>
+                            {sectionFields.length} {noun}
+                          </span>
+                        </span>
+                      </button>
+                      <div x-show="expanded" x-collapse x-cloak>
+                        <div class="border-t border-neutral-100 p-4 dark:border-neutral-800">
+                          {sectionFields.map((field) => (
+                            <div class="border-b border-b-neutral-100 pb-4 mb-4 last:border-none last:pb-0 last:mb-0 dark:border-b-neutral-800">
+                              <PlaygroundField field={field} requestPart={key} />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
                     </div>
-                  ))}
-                  {sectionVariants.length > 0 && (
-                    <div class:list={["space-y-2", sectionFields.length > 0 && "pt-1"]}>
-                      {sectionVariantData?.variantType === "oneOf" ? (
-                        <>
-                          <p class="text-xs text-neutral-500 dark:text-neutral-400">
-                            Select one variant.
-                          </p>
-                          <div class="inline-flex max-w-full flex-wrap items-center gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-900/60">
-                            {sectionVariants.map((variant, variantIndex) => (
+                  </div>
+                )}
+                {hasVariants && (
+                  <div
+                    class:list={[
+                      "space-y-2",
+                      hasCommonFields ? "mt-3" : "mt-4",
+                    ]}
+                  >
+                    <p class="text-xs text-neutral-500 dark:text-neutral-400">
+                      {sectionVariantData?.variantType === "anyOf"
+                        ? "One or more variants may apply."
+                        : "One of these variants applies."}
+                    </p>
+                    {sectionVariantData?.variantType === "oneOf" && (
+                      <div class="inline-flex max-w-full flex-wrap items-center gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-900/60">
+                        {sectionVariants.map((variant, variantIndex) => (
+                          <button
+                            type="button"
+                            @click={`selectSectionVariant(${keyLiteral}, ${variantIndex})`}
+                            :class={`{
+                              'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200 dark:bg-(--rd-code-surface) dark:text-neutral-100 dark:ring-neutral-700/70': getSelectedSectionVariant(${keyLiteral}) === ${variantIndex},
+                              'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200': getSelectedSectionVariant(${keyLiteral}) !== ${variantIndex}
+                            }`}
+                            class="inline-flex h-7 cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-2.5 text-[11px] font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700"
+                          >
+                            {variant.label}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                    {sectionVariants.map((variant, variantIndex) => (
+                      <>
+                        <div
+                          class="rounded-lg border border-neutral-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900/60"
+                          x-show={
+                            sectionVariantData?.variantType === "oneOf"
+                              ? `getSelectedSectionVariant(${keyLiteral}) === ${variantIndex}`
+                              : undefined
+                          }
+                          x-cloak={sectionVariantData?.variantType === "oneOf"}
+                        >
+                          <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
+                            {variant.label}
+                          </div>
+                          <div x-data="{ expanded: true }">
+                            <div 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"
-                                @click={`selectSectionVariant(${keyLiteral}, ${variantIndex})`}
-                                :class={`{
-                                  'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200 dark:bg-(--rd-code-surface) dark:text-neutral-100 dark:ring-neutral-700/70': getSelectedSectionVariant(${keyLiteral}) === ${variantIndex},
-                                  'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200': getSelectedSectionVariant(${keyLiteral}) !== ${variantIndex}
-                                }`}
-                                class="inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md px-2.5 text-[11px] font-medium transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700"
+                                x-on:click="expanded = !expanded"
+                                x-bind:aria-expanded="expanded"
+                                class="group flex w-full cursor-pointer items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 transition-colors duration-200 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
                               >
-                                {variant.label}
+                                <span class="inline-flex items-center gap-2">
+                                  <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 transition duration-200 group-hover:text-neutral-600 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
+                                  <span>
+                                    {variant.fields.length}{" "}
+                                    {variant.fields.length === 1
+                                      ? variantNoun
+                                      : `${variantNoun}s`}
+                                  </span>
+                                </span>
                               </button>
-                            ))}
-                          </div>
-                          {sectionVariants.map((variant, variantIndex) => (
-                            <div
-                              x-show={`getSelectedSectionVariant(${keyLiteral}) === ${variantIndex}`}
-                              x-cloak
-                            >
-                              <div class="rounded-md border border-neutral-200 bg-white p-2.5 dark:border-neutral-800 dark:bg-neutral-900/60">
-                                <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
-                                  {variant.label}
-                                </div>
-                                <div class="space-y-3">
+                              <div x-show="expanded" x-collapse x-cloak>
+                                <div class="border-t border-neutral-100 px-3 py-3 dark:border-neutral-800">
                                   {variant.fields.map((field) => (
-                                    <div class="border-b border-b-neutral-100 dark:border-b-neutral-800 last:border-none pb-3 last:pb-0">
+                                    <div class="border-b border-b-neutral-100 pb-3 mb-3 last:border-none last:pb-0 last:mb-0 dark:border-b-neutral-800">
                                       <PlaygroundField
                                         field={field}
                                         requestPart={key}
-                                        defaultsEnabledExpr={`getSelectedSectionVariant(${keyLiteral}) === ${variantIndex}`}
+                                        defaultsEnabledExpr={
+                                          sectionVariantData?.variantType ===
+                                          "oneOf"
+                                            ? `getSelectedSectionVariant(${keyLiteral}) === ${variantIndex}`
+                                            : undefined
+                                        }
+                                        requiredEnabledExpr={
+                                          sectionVariantData?.variantType ===
+                                          "oneOf"
+                                            ? `getSelectedSectionVariant(${keyLiteral}) === ${variantIndex}`
+                                            : undefined
+                                        }
                                       />
                                     </div>
                                   ))}
                                 </div>
                               </div>
                             </div>
-                          ))}
-                        </>
-                      ) : (
-                        <>
-                          <p class="text-xs text-neutral-500 dark:text-neutral-400">
-                            One or more variants may apply.
-                          </p>
-                          {sectionVariants.map((variant) => (
-                            <div class="rounded-md border border-neutral-200 bg-white p-2.5 dark:border-neutral-800 dark:bg-neutral-900/60">
-                              <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
-                                {variant.label}
-                              </div>
-                              <div class="space-y-3">
-                                {variant.fields.map((field) => (
-                                  <div class="border-b border-b-neutral-100 dark:border-b-neutral-800 last:border-none pb-3 last:pb-0">
-                                    <PlaygroundField field={field} requestPart={key} />
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          ))}
-                        </>
-                      )}
-                    </div>
-                  )}
-                </Accordion>
-              </div>
+                          </div>
+                        </div>
+                      </>
+                    ))}
+                  </div>
+                )}
+              </section>
             );
           },
         )