radiant-docs 0.1.6 → 0.1.8

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

@@ -1,11 +1,15 @@
 ---
 import { Icon } from "astro-icon/components";
 import type { OpenApiRoute } from "../../lib/routes";
+import { getConfig } from "../../lib/validation";
 import { renderMarkdown } from "../../lib/utils";
-import { headers, type RequestFields } from "../OpenApiPage.astro";
-import Accordian from "../user/Accordian.astro";
+import {
+  headers,
+  type RequestFields,
+  type RequestSectionVariantData,
+} from "../OpenApiPage.astro";
+import Accordion from "../user/Accordion.astro";
 import PlaygroundBar from "./PlaygroundBar.astro";
-import Field from "../ui/Field.astro";
 import ResponseDisplay from "./ResponseDisplay.astro";
 import PlaygroundField from "./PlaygroundField.astro";
 
@@ -13,37 +17,410 @@ interface Props {
   route: OpenApiRoute;
   serverUrl?: string;
   requestFields: RequestFields;
+  requestSectionVariants?: Partial<
+    Record<keyof RequestFields, RequestSectionVariantData>
+  >;
+  bodyDescription?: string;
+  bodyDefaultKind?: "object" | "array";
 }
 
-const { route, serverUrl, requestFields } = Astro.props;
+const {
+  route,
+  serverUrl,
+  requestFields,
+  requestSectionVariants = {},
+  bodyDescription = "",
+  bodyDefaultKind,
+} = Astro.props;
+const config = await getConfig();
+const proxyEnabled = config.playground?.proxy !== false;
+const proxyUrl =
+  import.meta.env.PUBLIC_PROXY_URL ||
+  "https://docs-proxy.stefanjoseph-dev.workers.dev";
+const formattedBodyDescription = bodyDescription
+  ? await renderMarkdown(bodyDescription)
+  : null;
+const queryFieldMeta = Object.fromEntries(
+  requestFields.query.map((field) => [
+    field.name,
+    {
+      isArray: field.isArray === true,
+      isObject:
+        (field.nested && field.nested.length > 0) ||
+        /\bobject\b/.test(field.type),
+      style: field.style || "form",
+      explode: field.explode,
+    },
+  ]),
+);
+const sectionVariantFieldNames = Object.fromEntries(
+  Object.entries(requestSectionVariants).map(([section, data]) => [
+    section,
+    (data?.variants || []).map((variant) =>
+      variant.fields.map((field) => field.name),
+    ),
+  ]),
+);
 ---
 
 <div
   x-data=`{
     loading: false,
     response: null,
+    queryFieldMeta: ${JSON.stringify(queryFieldMeta)},
+    sectionVariantFieldNames: ${JSON.stringify(sectionVariantFieldNames)},
+    bodyDefaultKind: ${JSON.stringify(bodyDefaultKind ?? null)},
+    selectedSectionVariants: {},
     inputs: {
       header: {},
       path: {},
       query: {},
+      cookie: {},
       body: {}
     },
-    async sendRequest() {
+    getSectionVariantFieldNames(section, variantIndex) {
+      const sectionVariants = this.sectionVariantFieldNames[section] || [];
+      const variantNames = sectionVariants[variantIndex];
+      return Array.isArray(variantNames) ? variantNames : [];
+    },
+    detectSectionVariant(section) {
+      const target = this.inputs[section];
+      if (!target || typeof target !== 'object' || Array.isArray(target)) {
+        return 0;
+      }
+
+      const sectionVariants = this.sectionVariantFieldNames[section] || [];
+      let selectedIndex = 0;
+      let bestScore = -1;
+
+      sectionVariants.forEach((fieldNames, variantIndex) => {
+        if (!Array.isArray(fieldNames) || fieldNames.length === 0) return;
+        const score = fieldNames.reduce((total, fieldName) => {
+          return total + (Object.prototype.hasOwnProperty.call(target, fieldName) ? 1 : 0);
+        }, 0);
+        if (score > bestScore) {
+          bestScore = score;
+          selectedIndex = variantIndex;
+        }
+      });
+
+      return selectedIndex;
+    },
+    getSelectedSectionVariant(section) {
+      if (Object.prototype.hasOwnProperty.call(this.selectedSectionVariants, section)) {
+        return this.selectedSectionVariants[section];
+      }
+      const detected = this.detectSectionVariant(section);
+      this.selectedSectionVariants[section] = detected;
+      return detected;
+    },
+    pruneSectionForVariant(section, selectedVariantIndex) {
+      if (
+        !this.inputs[section] ||
+        typeof this.inputs[section] !== 'object' ||
+        Array.isArray(this.inputs[section])
+      ) {
+        this.inputs[section] = {};
+      }
+      const target = this.inputs[section];
+      const selectedNames = new Set(
+        this.getSectionVariantFieldNames(section, selectedVariantIndex),
+      );
+      const namesToRemove = new Set();
+      const sectionVariants = this.sectionVariantFieldNames[section] || [];
+
+      sectionVariants.forEach((fieldNames, variantIndex) => {
+        if (!Array.isArray(fieldNames) || variantIndex === selectedVariantIndex) return;
+        fieldNames.forEach((fieldName) => {
+          if (!selectedNames.has(fieldName)) namesToRemove.add(fieldName);
+        });
+      });
+
+      namesToRemove.forEach((fieldName) => {
+        delete target[fieldName];
+      });
+    },
+    selectSectionVariant(section, variantIndex) {
+      this.selectedSectionVariants[section] = variantIndex;
+      this.pruneSectionForVariant(section, variantIndex);
+    },
+    resolvePathTokenValue(tokenName) {
+      const rawValue = this.inputs?.path?.[tokenName];
+      if (rawValue !== undefined && rawValue !== null) {
+        const value = String(rawValue).trim();
+        if (value.length > 0) return encodeURIComponent(value);
+      }
+
+      // Keep request URL valid even when server variables (e.g. {apiKey}) are unset,
+      // so the target API can return its own auth/validation error response.
+      if (/(^|[_-])(api[_-]?key|token|secret|key)$/i.test(String(tokenName))) {
+        return "invalid";
+      }
+
+      return "invalid";
+    },
+    resolveUrlPlaceholders(urlTemplate) {
+      return String(urlTemplate).replace(/\{([^}]+)\}/g, (_match, tokenName) =>
+        this.resolvePathTokenValue(String(tokenName)),
+      );
+    },
+    sanitizeBodyValue(value) {
+      if (value === undefined || value === null || value === '') {
+        return undefined;
+      }
+
+      if (Array.isArray(value)) {
+        const cleaned = value
+          .map((item) => this.sanitizeBodyValue(item))
+          .filter((item) => item !== undefined);
+        return cleaned.length > 0 ? cleaned : undefined;
+      }
+
+      if (typeof value === 'object') {
+        const cleanedEntries = Object.entries(value)
+          .map(([key, item]) => [key, this.sanitizeBodyValue(item)])
+          .filter(([, item]) => item !== undefined);
+
+        if (cleanedEntries.length === 0) return undefined;
+        return Object.fromEntries(cleanedEntries);
+      }
+
+      return value;
+    },
+    isPlainObject(value) {
+      return (
+        value !== null &&
+        typeof value === 'object' &&
+        !Array.isArray(value)
+      );
+    },
+    serializeQueryObject(params, key, rawValue, meta = {}) {
+      const cleanedObject = this.sanitizeBodyValue(rawValue);
+      if (!this.isPlainObject(cleanedObject)) return;
+
+      const entries = Object.entries(cleanedObject);
+      if (entries.length === 0) return;
+
+      const style = meta.style || 'form';
+      const explode =
+        typeof meta.explode === 'boolean' ? meta.explode : style === 'form';
+
+      if (style === 'deepObject') {
+        const appendDeepValue = (prefix, value) => {
+          if (value === undefined || value === null || value === '') return;
+
+          if (Array.isArray(value)) {
+            value.forEach((item, index) => {
+              appendDeepValue(prefix + '[' + index + ']', item);
+            });
+            return;
+          }
+
+          if (this.isPlainObject(value)) {
+            Object.entries(value).forEach(([nestedKey, nestedValue]) => {
+              appendDeepValue(prefix + '[' + nestedKey + ']', nestedValue);
+            });
+            return;
+          }
+
+          params.append(prefix, String(value));
+        };
+
+        entries.forEach(([propertyKey, propertyValue]) => {
+          appendDeepValue(key + '[' + propertyKey + ']', propertyValue);
+        });
+        return;
+      }
+
+      if (style === 'form' && explode) {
+        const appendExploded = (propertyKey, value) => {
+          if (value === undefined || value === null || value === '') return;
+
+          if (Array.isArray(value)) {
+            value.forEach((item) => appendExploded(propertyKey, item));
+            return;
+          }
+
+          if (this.isPlainObject(value)) {
+            params.append(propertyKey, JSON.stringify(value));
+            return;
+          }
+
+          params.append(propertyKey, String(value));
+        };
+
+        entries.forEach(([propertyKey, propertyValue]) => {
+          appendExploded(propertyKey, propertyValue);
+        });
+        return;
+      }
+
+      const flattenedPairs = [];
+      entries.forEach(([propertyKey, propertyValue]) => {
+        if (
+          propertyValue === undefined ||
+          propertyValue === null ||
+          propertyValue === ''
+        ) {
+          return;
+        }
+
+        let serializedValue = '';
+        if (Array.isArray(propertyValue)) {
+          serializedValue = propertyValue.map((item) => String(item)).join(',');
+        } else if (this.isPlainObject(propertyValue)) {
+          serializedValue = JSON.stringify(propertyValue);
+        } else {
+          serializedValue = String(propertyValue);
+        }
+
+        if (serializedValue === '') return;
+        flattenedPairs.push(propertyKey, serializedValue);
+      });
+
+      if (flattenedPairs.length === 0) return;
+
+      const delimiter =
+        style === 'spaceDelimited'
+          ? ' '
+          : style === 'pipeDelimited'
+            ? '|'
+            : ',';
+
+      params.append(key, flattenedPairs.join(delimiter));
+    },
+    getDefaultRequestBody() {
+      if (this.bodyDefaultKind === 'object') return {};
+      if (this.bodyDefaultKind === 'array') return [];
+      return undefined;
+    },
+    buildCookieHeader() {
+      const cookieInputs = this.inputs?.cookie;
+      if (
+        !cookieInputs ||
+        typeof cookieInputs !== 'object' ||
+        Array.isArray(cookieInputs)
+      ) {
+        return '';
+      }
+
+      const cookieParts = [];
+      Object.entries(cookieInputs).forEach(([key, rawValue]) => {
+        const cleanedValue = this.sanitizeBodyValue(rawValue);
+        if (cleanedValue === undefined) return;
+
+        let valueString = '';
+        if (Array.isArray(cleanedValue)) {
+          valueString = cleanedValue.map((item) => String(item)).join(',');
+        } else if (typeof cleanedValue === 'object') {
+          valueString = JSON.stringify(cleanedValue);
+        } else {
+          valueString = String(cleanedValue);
+        }
+
+        if (valueString.length === 0) return;
+        cookieParts.push(key + '=' + encodeURIComponent(valueString));
+      });
+
+      return cookieParts.join('; ');
+    },
+    buildQueryParams() {
+      const params = new URLSearchParams();
+
+      Object.entries(this.inputs.query || {}).forEach(([key, rawValue]) => {
+        const meta = this.queryFieldMeta[key] || {};
+
+        if (Array.isArray(rawValue) || meta.isArray) {
+          const values = (Array.isArray(rawValue) ? rawValue : [rawValue])
+            .map((value) => (value === undefined || value === null ? '' : String(value)))
+            .filter((value) => value !== '');
+
+          if (values.length === 0) return;
+
+          const style = meta.style || 'form';
+          const explode =
+            typeof meta.explode === 'boolean' ? meta.explode : style === 'form';
+
+          if (style === 'form') {
+            if (explode) {
+              values.forEach((value) => params.append(key, value));
+            } else {
+              params.append(key, values.join(','));
+            }
+            return;
+          }
+
+          if (style === 'spaceDelimited') {
+            params.append(key, values.join(' '));
+            return;
+          }
+
+          if (style === 'pipeDelimited') {
+            params.append(key, values.join('|'));
+            return;
+          }
+
+          values.forEach((value) => params.append(key, value));
+          return;
+        }
+
+        if (this.isPlainObject(rawValue) || meta.isObject) {
+          this.serializeQueryObject(params, key, rawValue, meta);
+          return;
+        }
+
+        if (rawValue === undefined || rawValue === null) return;
+        const value = String(rawValue);
+        if (value === '') return;
+        params.append(key, value);
+      });
+
+      return params.toString();
+    },
+    validateInputs(triggerEl) {
+      const rootFromTrigger =
+        triggerEl instanceof HTMLElement
+          ? triggerEl.closest('[data-playground-form-root]')
+          : null;
+      const root = rootFromTrigger || this.$root || this.$el;
+      if (!(root instanceof HTMLElement)) return true;
+
+      const controls = root.querySelectorAll('input, select, textarea');
+      for (const control of controls) {
+        if (
+          !(control instanceof HTMLInputElement) &&
+          !(control instanceof HTMLSelectElement) &&
+          !(control instanceof HTMLTextAreaElement)
+        ) {
+          continue;
+        }
+        if (control.disabled) continue;
+        if (control.type === 'hidden') continue;
+        if (control.getClientRects().length === 0) continue;
+
+        if (!control.reportValidity()) {
+          control.focus();
+          control.scrollIntoView({ block: 'center', behavior: 'smooth' });
+          return false;
+        }
+      }
+
+      return true;
+    },
+    async sendRequest(event) {
+      if (!this.validateInputs(event?.currentTarget)) return;
+
       this.loading = true;
-        await new Promise(resolve => setTimeout(resolve, 2000))
       try {
         // 1. Construct URL with Path Parameters
-        let url = ${JSON.stringify(serverUrl + route.openApiPath)};
-        Object.entries(this.inputs.path).forEach(([key, val]) => {
-          url = url.replace('{' + key + '}', encodeURIComponent(val));
-        });
+        const urlTemplate = ${JSON.stringify(serverUrl + route.openApiPath)};
+        let url = this.resolveUrlPlaceholders(urlTemplate);
 
         // 2. Add Query Parameters
-        const queryParams = new URLSearchParams(this.inputs.query).toString();
+        const queryParams = this.buildQueryParams();
         if (queryParams) url += '?' + queryParams;
 
         // 3. Prepare Fetch Options
-        console.log("Hello", this.inputs)
         const options = {
           method: ${JSON.stringify(route.openApiMethod.toUpperCase())},
           headers: {
@@ -51,87 +428,117 @@ const { route, serverUrl, requestFields } = Astro.props;
             ...this.inputs.header
           }
         };
+        const cookieHeader = this.buildCookieHeader();
 
         // 4. Add Body if needed
         if (['POST', 'PUT', 'PATCH'].includes(options.method)) {
-          options.body = JSON.stringify(this.inputs.body);
+          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);
+            }
+          }
         }
 
-        // 5. Execute Request
-        const res = await fetch(url, options);
+        // 5. Proxy Logic
+        let finalUrl = url;
+        let finalOptions = options;
 
-        const status = res.status;
-        const statusTextMap = {
-          400: 'Bad Request', 401: 'Unauthorized', 403: 'Forbidden',
-          404: 'Not Found', 405: 'Method Not Allowed', 409: 'Conflict',
-          422: 'Unprocessable Entity', 429: 'Too Many Requests',
-          500: 'Internal Server Error', 502: 'Bad Gateway',
-          503: 'Service Unavailable', 504: 'Gateway Timeout'
+        const isLocal = (url) => {
+          try {
+            const hostname = new URL(url).hostname;
+            return hostname === 'localhost' || 
+                   hostname === '127.0.0.1' || 
+                   hostname.endsWith('.local');
+          } catch (e) {
+            return false;
+          }
         };
-        const statusText = res.statusText || statusTextMap[status] || 'Unknown';
 
-        const headers = {};
+        if (${proxyEnabled} && !isLocal(url)) {
+          finalUrl = ${JSON.stringify(proxyUrl)};
+          finalOptions = {
+            ...options,
+            headers: {
+              ...options.headers,
+              'x-proxy-url': url,
+              ...(cookieHeader ? { 'x-proxy-cookie': cookieHeader } : {})
+            }
+          };
+        }
+          console.log("SEND", finalUrl, finalOptions)
+        // 6. Execute Request
+        const res = await fetch(finalUrl, finalOptions);
+
+        const status = res.status;
+
+        const responseHeaders = {};
         res.headers.forEach((value, key) => {
-          headers[key] = value;
+          responseHeaders[key] = value;
         });
 
-        let data;
         let highlightedData;
+        const highlightedHeaders = Prism.highlight(
+          JSON.stringify(responseHeaders, null, 2),
+          Prism.languages.json,
+          "json",
+        );
         const contentType = res.headers.get('content-type') || '';
+        const responseText = await res.text();
 
-        try {
-          if (contentType.includes('application/json')) {
-            data = await res.json();
+        if (contentType.includes('application/json')) {
+          try {
+            const parsed =
+              responseText.trim().length > 0 ? JSON.parse(responseText) : null;
             highlightedData = Prism.highlight(
-              JSON.stringify(data, null, 2), 
-              Prism.languages.json, 
+              JSON.stringify(parsed, null, 2),
+              Prism.languages.json,
               'json'
             );
-          } else {
-            // For non-JSON responses, try to get as text
-            const text = await res.text();
-            console.log("TEXT", text)
+          } catch (parseError) {
             highlightedData = Prism.highlight(
-              text || '(empty response)', 
-              Prism.languages.plaintext, 
+              responseText || '(empty response)',
+              Prism.languages.plaintext,
               'plaintext'
             );
           }
-        } catch (parseError) {
-          // If parsing fails, still show the response with error info
+        } else {
           highlightedData = Prism.highlight(
-            JSON.stringify({ error: 'Failed to parse response', message: parseError.message }, null, 2),
-            Prism.languages.json,
-            'json'
+            responseText || '(empty response)',
+            Prism.languages.plaintext,
+            'plaintext'
           );
         }
 
         this.response = {
           status,
-          statusText,
-          headers,
-          highlightedData
+          headers: responseHeaders,
+          highlightedData,
+          highlightedHeaders
         };
         
       } catch (err) {
-        console.log('error', err)
+        console.error('Playground error:', err);
         this.response = {
           status: err.status || 0,
-          statusText: err.statusText || err.message || 'Network Error',
         };
       } finally {
         this.loading = false;
       }
     }
   }`
-  class="flex flex-col gap-4"
+  data-playground-form-root
+  class="flex w-full h-full min-h-0 flex-col"
 >
-  <div class="w-full">
+
     <PlaygroundBar route={route} serverUrl={serverUrl}>
       <button
-        @click="sendRequest()"
+        @click="sendRequest($event)"
         :disabled="loading"
-        class="m-px flex items-center gap-1.5 px-4 py-[5px] text-sm font-medium rounded-lg bg-neutral-900 text-white/95 hover:text-white shadow-[inset_0_1px_0_rgb(255,255,255,0.3),0_0_0_1px_var(--color-neutral-800)] duration-200 whitespace-nowrap cursor-pointer relative before:absolute before:inset-0 before:shadow-sm before:rounded-lg before:bg-transparent disabled:bg-neutral-300 disabled:shadow-none disabled:before:shadow-none disabled:duration-0"
+        class="m-px flex items-center gap-1.5 px-4 py-[5px] text-sm font-medium rounded-lg bg-neutral-900 text-white/95 hover:text-white shadow-[inset_0_1px_0_rgb(255,255,255,0.3),0_0_0_1px_var(--color-neutral-800)] duration-200 whitespace-nowrap cursor-pointer relative before:absolute before:inset-0 before:shadow-sm before:rounded-lg before:bg-transparent disabled:opacity-70"
       >
         <span
           class="flex items-center gap-2"
@@ -147,31 +554,122 @@ const { route, serverUrl, requestFields } = Astro.props;
         />
       </button>
     </PlaygroundBar>
-  </div>
 
-  <div class="flex flex-col lg:flex-row-reverse gap-4">
-    <div class="lg:max-w-xl w-full">
+
+  <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="flex-3 space-y-4">
+    <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">
+      <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"></div>
+      <div class="space-y-4 lg:pr-4 pt-4 pb-6">
       {
         Object.keys(requestFields).map(
-          (key) =>
-            requestFields[key as keyof RequestFields].length > 0 && (
+          (key) => {
+            const sectionFields = requestFields[key as keyof RequestFields];
+            const sectionVariantData =
+              requestSectionVariants[key as keyof RequestFields];
+            const sectionVariants = sectionVariantData?.variants || [];
+            const keyLiteral = JSON.stringify(key);
+
+            if (sectionFields.length === 0 && sectionVariants.length === 0) {
+              return null;
+            }
+
+            return (
               <div class="border border-neutral-200 shadow-xs rounded-xl p-4">
-                <Accordian title={headers[key]} defaultOpen titleSize="xl">
-                  {requestFields[key as keyof RequestFields].map((field) => (
+                <Accordion title={headers[key]} defaultOpen titleSize="xl">
+                  {key === "body" && formattedBodyDescription && (
+                    <div
+                      class="mb-4 prose-rules prose-sm! text-neutral-500 **:text-neutral-500"
+                      set:html={formattedBodyDescription}
+                    />
+                  )}
+                  {sectionFields.map((field) => (
                     <div class="border-b border-b-neutral-100 last:border-none pb-4 mb-4 last:pb-0 last:mb-0 first:pt-2">
                       <PlaygroundField field={field} requestPart={key} />
                     </div>
                   ))}
-                </Accordian>
+                  {sectionVariants.length > 0 && (
+                    <div class:list={["space-y-2", sectionFields.length > 0 && "pt-1"]}>
+                      {sectionVariantData?.variantType === "oneOf" ? (
+                        <>
+                          <p class="text-xs text-neutral-500">
+                            Select one variant.
+                          </p>
+                          <div class="inline-flex max-w-full flex-wrap items-center gap-1 rounded-lg bg-neutral-100 p-1">
+                            {sectionVariants.map((variant, variantIndex) => (
+                              <button
+                                type="button"
+                                @click={`selectSectionVariant(${keyLiteral}, ${variantIndex})`}
+                                :class={`{
+                                  'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200': getSelectedSectionVariant(${keyLiteral}) === ${variantIndex},
+                                  'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800': 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"
+                              >
+                                {variant.label}
+                              </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">
+                                <div class="mb-2 text-xs font-medium text-neutral-600">
+                                  {variant.label}
+                                </div>
+                                <div class="space-y-3">
+                                  {variant.fields.map((field) => (
+                                    <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                                      <PlaygroundField
+                                        field={field}
+                                        requestPart={key}
+                                        defaultsEnabledExpr={`getSelectedSectionVariant(${keyLiteral}) === ${variantIndex}`}
+                                      />
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </>
+                      ) : (
+                        <>
+                          <p class="text-xs text-neutral-500">
+                            One or more variants may apply.
+                          </p>
+                          {sectionVariants.map((variant) => (
+                            <div class="rounded-md border border-neutral-200 bg-white p-2.5">
+                              <div class="mb-2 text-xs font-medium text-neutral-600">
+                                {variant.label}
+                              </div>
+                              <div class="space-y-3">
+                                {variant.fields.map((field) => (
+                                  <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                                    <PlaygroundField field={field} requestPart={key} />
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                        </>
+                      )}
+                    </div>
+                  )}
+                </Accordion>
               </div>
-            )
+            );
+          },
         )
       }
+      </div>
     </div>
   </div>
+  </div>
 </div>
 
 <script>