radiant-docs 0.1.64 → 0.1.65

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

@@ -8,9 +8,16 @@ interface Props {
   requestPart: string;
   scopeExpr?: string;
   defaultsEnabledExpr?: string;
+  requiredEnabledExpr?: string;
 }
 
-const { field, requestPart, scopeExpr, defaultsEnabledExpr } = Astro.props;
+const {
+  field,
+  requestPart,
+  scopeExpr,
+  defaultsEnabledExpr,
+  requiredEnabledExpr,
+} = Astro.props;
 
 function cloneDefaultTemplate<T>(value: T): T {
   if (value === undefined) return value;
@@ -49,6 +56,16 @@ function mergeObjectDefaults(
   });
 }
 
+function isObjectLikeOpenApiField(field: FieldType): boolean {
+  return (
+    field.isAdditionalProperty === true ||
+    Boolean(field.nested && field.nested.length > 0) ||
+    Boolean(field.variants && field.variants.length > 0) ||
+    Boolean(field.valueVariants && field.valueVariants.length > 0) ||
+    /\bobject\b/.test(field.type)
+  );
+}
+
 function buildVariantDefaultTemplate(field: FieldType): Record<string, unknown> {
   const variants = field.variants || [];
   if (variants.length === 0) return {};
@@ -107,17 +124,34 @@ function buildFieldDefaultTemplate(field: FieldType): unknown | undefined {
   return Object.keys(objectDefaults).length > 0 ? objectDefaults : undefined;
 }
 
+function buildFieldInitialValue(field: FieldType): unknown {
+  if (field.hasDefault) {
+    return cloneDefaultTemplate(field.defaultValue);
+  }
+
+  if (field.isArray) return [];
+  if (isObjectLikeOpenApiField(field)) return {};
+  return "";
+}
+
 const requestPartKey = JSON.stringify(requestPart);
 const fieldNameKey = JSON.stringify(field.name);
 const defaultScopeExpr = `inputs[${requestPartKey}]`;
 const resolvedScopeExpr = scopeExpr || defaultScopeExpr;
 const resolvedDefaultsEnabledExpr = defaultsEnabledExpr || "true";
+const resolvedRequiredEnabledExpr =
+  requiredEnabledExpr || resolvedDefaultsEnabledExpr;
 const fieldModelExpr = `${resolvedScopeExpr}[${fieldNameKey}]`;
 const isNumericType = /\b(number|integer)\b/.test(field.type);
 const isIntegerType = /\binteger\b/.test(field.type);
 const hasStringType = /\bstring\b/.test(field.type);
 const isBooleanType = /\bboolean\b/.test(field.type);
-const inputType = isNumericType && !hasStringType ? "number" : "text";
+const isFileInput = field.isFile === true;
+const inputType = isFileInput
+  ? "file"
+  : isNumericType && !hasStringType
+    ? "number"
+    : "text";
 const isRequiredField = field.required === true;
 const stringMinLength =
   typeof field.minLength === "number" &&
@@ -193,13 +227,35 @@ const stringMaxLengthLiteral =
   stringMaxLength !== undefined ? JSON.stringify(stringMaxLength) : "undefined";
 const hasNestedFields = Boolean(field.nested && field.nested.length > 0);
 const hasFieldVariants = Boolean(field.variants && field.variants.length > 0);
+const valueVariants = field.valueVariants || [];
+const hasValueVariants = valueVariants.length > 0;
 const hasOneOfVariants = field.variantType === "oneOf" && hasFieldVariants;
 const oneOfVariantFieldKeys = hasOneOfVariants
   ? (field.variants || []).map((variant) =>
       (variant.fields || []).map((variantField) => variantField.name),
     )
   : [];
+const oneOfVariantDefaultTemplates = hasOneOfVariants
+  ? (field.variants || []).map((variant) =>
+      buildObjectDefaultTemplateFromFields(variant.fields),
+    )
+  : [];
+const oneOfVariantDefaultTemplatesJson = JSON.stringify(
+  oneOfVariantDefaultTemplates,
+).replaceAll("`", "\\`");
+const valueVariantMeta = valueVariants.map((variant) => ({
+  initialValue: buildFieldInitialValue(variant.field),
+  isArray: variant.field.isArray === true,
+  isObjectLike:
+    !variant.field.isArray && isObjectLikeOpenApiField(variant.field),
+  type: variant.field.type,
+}));
+const valueVariantMetaJson = JSON.stringify(valueVariantMeta).replaceAll(
+  "`",
+  "\\`",
+);
 const isAdditionalPropertyField = field.isAdditionalProperty === true;
+const renderAsJsonInput = field.renderAsJson === true && !field.isArray;
 const mapKnownKeys = JSON.stringify(field.mapKnownKeys || []);
 const oneOfVariantFieldKeysJson = JSON.stringify(oneOfVariantFieldKeys);
 const defaultTemplate = buildFieldDefaultTemplate(field);
@@ -212,15 +268,28 @@ const hasComplexMapValue =
   field.isArray ||
   hasNestedFields ||
   hasFieldVariants ||
+  hasValueVariants ||
+  renderAsJsonInput ||
   /\bobject\b/.test(field.type);
 const isObjectLikeField =
   isAdditionalPropertyField ||
   hasNestedFields ||
   hasFieldVariants ||
+  hasValueVariants ||
   /\bobject\b/.test(field.type);
 const layoutClass = isObjectLikeField
   ? "flex justify-between flex-col gap-4"
   : "flex justify-between flex-col sm:flex-row lg:flex-col xl:flex-row gap-4";
+const fieldPlaceholder = field.valuePrefix
+  ? `Enter ${field.valuePrefix.toLowerCase()} token`
+  : `Enter ${field.name}`;
+const fieldRequiredExpr = isRequiredField
+  ? `Boolean(${resolvedRequiredEnabledExpr})`
+  : "false";
+const fieldValueGetterExpr = `readFieldValue(() => ${fieldModelExpr})`;
+const childRequiredEnabledExpr = isRequiredField
+  ? `Boolean(${resolvedRequiredEnabledExpr})`
+  : `Boolean(${resolvedRequiredEnabledExpr}) && isRequiredScopeActive(${fieldValueGetterExpr})`;
 ---
 
 <div
@@ -245,6 +314,28 @@ const layoutClass = isObjectLikeField
         return value;
       }
     },
+    readFieldValue(getter) {
+      try {
+        return getter();
+      } catch (e) {
+        return undefined;
+      }
+    },
+    isRequiredScopeActive(value) {
+      if (value === undefined || value === null || value === '') return false;
+
+      if (Array.isArray(value)) {
+        return value.some((item) => this.isRequiredScopeActive(item));
+      }
+
+      if (typeof value === 'object') {
+        return Object.values(value).some((item) =>
+          this.isRequiredScopeActive(item),
+        );
+      }
+
+      return true;
+    },
     defaultsAreEnabled() {
       try {
         return Boolean(${resolvedDefaultsEnabledExpr});
@@ -279,8 +370,36 @@ const layoutClass = isObjectLikeField
       this.applyInitialDefault();
     },
     oneOfVariantFieldKeys: ${oneOfVariantFieldKeysJson},
+    oneOfVariantDefaultTemplates: ${oneOfVariantDefaultTemplatesJson},
+    valueVariantMeta: ${valueVariantMetaJson},
+    selectedValueVariant: null,
     selectedOneOfVariant: null,
     selectedArrayItemVariants: {},
+    arrayValueKeys: [],
+    arrayObjectKeys: [],
+    createArrayItemKey() {
+      return Date.now().toString(36) + '-' + Math.random().toString(36).slice(2);
+    },
+    syncArrayKeys(keys, length) {
+      while (keys.length < length) {
+        keys.push(this.createArrayItemKey());
+      }
+      if (keys.length > length) {
+        keys.splice(length);
+      }
+      return keys;
+    },
+    getArrayValueKey(index) {
+      const values = ${fieldModelExpr};
+      const length = Array.isArray(values) ? values.length : 1;
+      const keys = this.syncArrayKeys(this.arrayValueKeys, length);
+      return keys[index] || String(index);
+    },
+    getArrayObjectKey(index) {
+      const values = this.getArrayObjectValues();
+      const keys = this.syncArrayKeys(this.arrayObjectKeys, values.length);
+      return keys[index] || String(index);
+    },
     ensureFieldObject() {
       this.ensureScopeObject();
       if (
@@ -330,6 +449,21 @@ const layoutClass = isObjectLikeField
         delete target[key];
       });
     },
+    applyObjectDefaults(target, defaults, overwrite = false) {
+      if (!target || typeof target !== 'object' || Array.isArray(target)) return;
+      if (!defaults || typeof defaults !== 'object' || Array.isArray(defaults)) return;
+
+      Object.entries(defaults).forEach(([key, value]) => {
+        if (!overwrite && Object.prototype.hasOwnProperty.call(target, key)) {
+          return;
+        }
+        target[key] = this.cloneDefaultValue(value);
+      });
+    },
+    applyOneOfVariantDefaults(target, variantIndex, overwrite = false) {
+      const defaults = this.oneOfVariantDefaultTemplates[variantIndex];
+      this.applyObjectDefaults(target, defaults, overwrite);
+    },
     getSelectedOneOfVariant() {
       if (Number.isInteger(this.selectedOneOfVariant)) {
         return this.selectedOneOfVariant;
@@ -343,6 +477,68 @@ const layoutClass = isObjectLikeField
       this.selectedOneOfVariant = variantIndex;
       const target = this.ensureFieldObject();
       this.pruneObjectForOneOf(target, variantIndex);
+      this.applyOneOfVariantDefaults(target, variantIndex, true);
+    },
+    getValueVariantMeta(variantIndex) {
+      const meta = this.valueVariantMeta[variantIndex];
+      return meta && typeof meta === 'object' ? meta : {};
+    },
+    isScalarValueVariant(meta) {
+      return !meta.isArray && !meta.isObjectLike;
+    },
+    findValueVariantIndex(predicate) {
+      const index = this.valueVariantMeta.findIndex((meta) => predicate(meta));
+      return index >= 0 ? index : undefined;
+    },
+    detectValueVariant(value) {
+      if (!Array.isArray(this.valueVariantMeta) || this.valueVariantMeta.length === 0) {
+        return 0;
+      }
+
+      let matchedIndex;
+      if (Array.isArray(value)) {
+        matchedIndex = this.findValueVariantIndex((meta) => meta.isArray);
+      } else if (value && typeof value === 'object') {
+        matchedIndex = this.findValueVariantIndex((meta) => meta.isObjectLike);
+      } else if (typeof value === 'boolean') {
+        matchedIndex = this.findValueVariantIndex((meta) =>
+          String(meta.type || '').includes('boolean'),
+        );
+      } else if (typeof value === 'number') {
+        matchedIndex = this.findValueVariantIndex((meta) =>
+          /\b(number|integer)\b/.test(String(meta.type || '')),
+        );
+      } else {
+        matchedIndex = this.findValueVariantIndex((meta) =>
+          /\bstring\b/.test(String(meta.type || '')),
+        );
+      }
+
+      if (matchedIndex !== undefined) return matchedIndex;
+      matchedIndex = this.findValueVariantIndex((meta) =>
+        this.isScalarValueVariant(meta),
+      );
+      return matchedIndex !== undefined ? matchedIndex : 0;
+    },
+    cloneValueVariantInitialValue(variantIndex) {
+      const initialValue = this.getValueVariantMeta(variantIndex).initialValue;
+      return this.cloneDefaultValue(initialValue);
+    },
+    getSelectedValueVariant() {
+      if (Number.isInteger(this.selectedValueVariant)) {
+        return this.selectedValueVariant;
+      }
+      const detected = this.detectValueVariant(${fieldModelExpr});
+      this.selectedValueVariant = detected;
+      return detected;
+    },
+    selectValueVariant(variantIndex) {
+      this.selectedValueVariant = variantIndex;
+      this.ensureScopeObject();
+      ${fieldModelExpr} = this.cloneValueVariantInitialValue(variantIndex);
+      this.arrayValueKeys = [];
+      this.arrayObjectKeys = [];
+      this.selectedArrayItemVariants = {};
     },
     getSelectedArrayItemVariant(itemIndex) {
       if (Object.prototype.hasOwnProperty.call(this.selectedArrayItemVariants, itemIndex)) {
@@ -357,6 +553,7 @@ const layoutClass = isObjectLikeField
       this.selectedArrayItemVariants[itemIndex] = variantIndex;
       const target = this.ensureArrayObjectItem(itemIndex);
       this.pruneObjectForOneOf(target, variantIndex);
+      this.applyOneOfVariantDefaults(target, variantIndex, true);
     },
     shiftArrayItemVariantSelection(removedIndex) {
       const nextSelections = {};
@@ -405,9 +602,15 @@ const layoutClass = isObjectLikeField
       target[mapKey] = this.coerceScalarValue(value);
       this.setScalarValidity(element, value);
     },
+    isFileValue(value) {
+      return (
+        (typeof File !== 'undefined' && value instanceof File) ||
+        (typeof Blob !== 'undefined' && value instanceof Blob)
+      );
+    },
     coerceScalarValue(rawValue) {
+      if (this.isFileValue(rawValue)) return rawValue;
       const value = rawValue === undefined || rawValue === null ? '' : String(rawValue).trim();
-      if (value === '__clear__') return '';
       if (value === '') return '';
       if (!${isNumericType}) return value;
 
@@ -422,8 +625,12 @@ const layoutClass = isObjectLikeField
     },
     setScalarValidity(element, rawValue) {
       if (!element || typeof element.setCustomValidity !== 'function') return;
+      if (this.isFileValue(rawValue)) {
+        element.setCustomValidity('');
+        return;
+      }
       const value = rawValue === undefined || rawValue === null ? '' : String(rawValue).trim();
-      if (value === '' || value === '__clear__') {
+      if (value === '') {
         element.setCustomValidity('');
         return;
       }
@@ -467,11 +674,6 @@ const layoutClass = isObjectLikeField
 
       element.setCustomValidity('');
     },
-    reportFieldValidity(element) {
-      if (!element || typeof element.reportValidity !== 'function') return true;
-      this.setScalarValidity(element, element.value);
-      return element.reportValidity();
-    },
     toBooleanOption(value) {
       if (value === true || value === 'true') return 'true';
       if (value === false || value === 'false') return 'false';
@@ -549,6 +751,51 @@ const layoutClass = isObjectLikeField
         // Keep previous valid value while editing invalid JSON.
       }
     },
+    getJsonFieldValue() {
+      const value = ${fieldModelExpr};
+      if (value === undefined || value === null || value === '') return '';
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch (e) {
+        return '';
+      }
+    },
+    setJsonFieldValue(jsonValue, element) {
+      const raw = String(jsonValue || '');
+      this.ensureScopeObject();
+
+      if (!raw.trim()) {
+        delete ${resolvedScopeExpr}[${fieldNameKey}];
+        if (element && typeof element.setCustomValidity === 'function') {
+          element.setCustomValidity('');
+        }
+        return;
+      }
+
+      try {
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+          if (element && typeof element.setCustomValidity === 'function') {
+            element.setCustomValidity('Enter a JSON object.');
+          }
+          return;
+        }
+
+        ${fieldModelExpr} = parsed;
+        if (element && typeof element.setCustomValidity === 'function') {
+          element.setCustomValidity('');
+        }
+      } catch (e) {
+        if (element && typeof element.setCustomValidity === 'function') {
+          element.setCustomValidity('Enter valid JSON.');
+        }
+      }
+    },
+    formatJsonFieldValue(element) {
+      if (!element || typeof element.value !== 'string') return;
+      if (element.validationMessage) return;
+      element.value = this.getJsonFieldValue();
+    },
     getFieldValue() {
       const value = ${fieldModelExpr};
       return value === undefined || value === null ? '' : value;
@@ -558,6 +805,10 @@ const layoutClass = isObjectLikeField
       ${fieldModelExpr} = this.coerceScalarValue(value);
       this.setScalarValidity(element, value);
     },
+    clearFieldValue() {
+      this.ensureScopeObject();
+      delete ${resolvedScopeExpr}[${fieldNameKey}];
+    },
     ensureArrayField() {
       this.ensureScopeObject();
       if (!Array.isArray(${fieldModelExpr})) {
@@ -567,7 +818,7 @@ const layoutClass = isObjectLikeField
     },
     getArrayValues() {
       const values = ${fieldModelExpr};
-      return Array.isArray(values) && values.length > 0 ? values : [''];
+      return Array.isArray(values) ? values : [''];
     },
     setArrayValue(index, value, element) {
       const values = this.ensureArrayField();
@@ -575,20 +826,34 @@ const layoutClass = isObjectLikeField
       this.setScalarValidity(element, value);
     },
     addArrayValue() {
+      const hadArray = Array.isArray(${fieldModelExpr});
       const values = this.ensureArrayField();
-      if (values.length === 0) {
+      if (!hadArray) {
+        this.arrayValueKeys = [];
+      }
+      if (values.length === 0 && !hadArray) {
         values.push('', '');
+        this.syncArrayKeys(this.arrayValueKeys, values.length);
         return;
       }
       values.push('');
+      this.syncArrayKeys(this.arrayValueKeys, values.length);
     },
     removeArrayValue(index) {
       const values = ${fieldModelExpr};
-      if (!Array.isArray(values)) return;
+      if (!Array.isArray(values)) {
+        this.ensureScopeObject();
+        ${fieldModelExpr} = [];
+        this.arrayValueKeys = [];
+        return;
+      }
       values.splice(index, 1);
+      this.arrayValueKeys.splice(index, 1);
       if (values.length === 0) {
-        delete ${resolvedScopeExpr}[${fieldNameKey}];
+        this.ensureScopeObject();
+        ${fieldModelExpr} = [];
       }
+      this.syncArrayKeys(this.arrayValueKeys, values.length);
     },
     getArrayObjectValues() {
       const values = ${fieldModelExpr};
@@ -608,15 +873,19 @@ const layoutClass = isObjectLikeField
     addArrayObjectValue() {
       const values = this.ensureArrayField();
       values.push({});
+      this.syncArrayKeys(this.arrayObjectKeys, values.length);
     },
     removeArrayObjectValue(index) {
       const values = ${fieldModelExpr};
       if (!Array.isArray(values)) return;
       values.splice(index, 1);
+      this.arrayObjectKeys.splice(index, 1);
       this.shiftArrayItemVariantSelection(index);
       if (values.length === 0) {
-        delete ${resolvedScopeExpr}[${fieldNameKey}];
+        this.ensureScopeObject();
+        ${fieldModelExpr} = [];
       }
+      this.syncArrayKeys(this.arrayObjectKeys, values.length);
     }
   }`}
   x-effect="applyInitialDefault()"
@@ -638,7 +907,56 @@ const layoutClass = isObjectLikeField
   </div>
   <div class="w-full">
     {
-      isAdditionalPropertyField ? (
+      hasValueVariants ? (
+        <div class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5 dark:border-neutral-800 dark:bg-neutral-900/50">
+          <div class="space-y-3">
+            <div class="space-y-1.5">
+              <p class="text-xs text-neutral-500 dark:text-neutral-400">
+                Select value type.
+              </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">
+                {valueVariants.map((variant, variantIndex) => (
+                  <button
+                    type="button"
+                    @click={`selectValueVariant(${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': getSelectedValueVariant() === ${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': getSelectedValueVariant() !== ${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"
+                  >
+                    {variant.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            {valueVariants.map((variant, variantIndex) => (
+              <template x-if={`getSelectedValueVariant() === ${variantIndex}`}>
+                <div class="rounded-md border border-neutral-200 bg-white p-2.5 dark:border-neutral-800 dark:bg-neutral-900/60">
+                  <Astro.self
+                    field={variant.field}
+                    requestPart={requestPart}
+                    scopeExpr={resolvedScopeExpr}
+                    defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                    requiredEnabledExpr={resolvedRequiredEnabledExpr}
+                  />
+                </div>
+              </template>
+            ))}
+          </div>
+        </div>
+      ) : renderAsJsonInput ? (
+        <textarea
+          name={`${requestPart}_${field.name}`}
+          rows="8"
+          :value="getJsonFieldValue()"
+          @input="setJsonFieldValue($event.target.value, $event.target)"
+          @blur="formatJsonFieldValue($event.target)"
+          :required={fieldRequiredExpr}
+          class="w-full px-3 py-2 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white font-mono dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:border-neutral-600"
+          placeholder={`{\n  "type": "object",\n  "properties": {}\n}`}
+        />
+      ) : isAdditionalPropertyField ? (
         <div class="space-y-2">
           <template
             x-for={`(mapKey, mapIndex) in getMapEntryKeys()`}
@@ -680,7 +998,6 @@ const layoutClass = isObjectLikeField
                       class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                     >
                       <option value="" disabled hidden>Select value</option>
-                      <option value="__clear__">Clear selection</option>
                       {field.enum.map((value) => (
                         <option value={String(value)}>{value}</option>
                       ))}
@@ -699,7 +1016,6 @@ const layoutClass = isObjectLikeField
                       class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                     >
                       <option value="" disabled hidden>Select value</option>
-                      <option value="__clear__">Clear selection</option>
                       <option value="true">true</option>
                       <option value="false">false</option>
                     </select>
@@ -713,7 +1029,7 @@ const layoutClass = isObjectLikeField
                     type={inputType}
                     :value="getMapValue(mapKey)"
                     @input="setMapValue(mapKey, $event.target.value, $event.target)"
-                    @blur="reportFieldValidity($event.target)"
+                    @blur="setScalarValidity($event.target, $event.target.value)"
                     min={numericInputMin}
                     max={numericInputMax}
                     step={numericInputStep}
@@ -740,10 +1056,10 @@ const layoutClass = isObjectLikeField
           <div class="space-y-2">
             <template
               x-for={`(item, index) in getArrayObjectValues()`}
-              :key={`${fieldNameKey} + '-item-' + index`}
+              :key={`getArrayObjectKey(index)`}
             >
               <div
-                class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5 dark:border-neutral-800 dark:bg-neutral-900/50"
+                class="overflow-hidden rounded-xl border-[0.5px] border-neutral-900/12 bg-neutral-50/50 p-3 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)]"
                 x-init="ensureArrayObjectItem(index)"
               >
                 <div class="mb-2 flex items-center justify-between">
@@ -765,8 +1081,9 @@ const layoutClass = isObjectLikeField
                       <Astro.self
                         field={nestedField}
                         requestPart={requestPart}
-                        scopeExpr={`${fieldModelExpr}[index]`}
+                        scopeExpr="item"
                         defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                        requiredEnabledExpr={resolvedRequiredEnabledExpr}
                       />
                     </div>
                   ))}
@@ -807,8 +1124,9 @@ const layoutClass = isObjectLikeField
                                       <Astro.self
                                         field={variantField}
                                         requestPart={requestPart}
-                                        scopeExpr={`${fieldModelExpr}[index]`}
+                                        scopeExpr="item"
                                         defaultsEnabledExpr={`(${resolvedDefaultsEnabledExpr}) && getSelectedArrayItemVariant(index) === ${variantIndex}`}
+                                        requiredEnabledExpr={`(${resolvedRequiredEnabledExpr}) && getSelectedArrayItemVariant(index) === ${variantIndex}`}
                                       />
                                     </div>
                                   ))}
@@ -833,8 +1151,9 @@ const layoutClass = isObjectLikeField
                                     <Astro.self
                                       field={variantField}
                                       requestPart={requestPart}
-                                      scopeExpr={`${fieldModelExpr}[index]`}
+                                      scopeExpr="item"
                                       defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                                      requiredEnabledExpr={resolvedRequiredEnabledExpr}
                                     />
                                   </div>
                                 ))}
@@ -859,7 +1178,7 @@ const layoutClass = isObjectLikeField
           </div>
         ) : (
           <div class="space-y-2">
-            <template x-for={`(value, index) in getArrayValues()`} :key={`${fieldNameKey} + '-' + index`}>
+            <template x-for={`(value, index) in getArrayValues()`} :key={`getArrayValueKey(index)`}>
               <div class="flex items-center gap-2">
                 {
                   field.enum && field.enum.length > 0 ? (
@@ -868,12 +1187,11 @@ const layoutClass = isObjectLikeField
                         name={`${requestPart}_${field.name}`}
                         :value="value"
                         @change={`setArrayValue(index, $event.target.value, $event.target)`}
-                        :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
+                        :required={`index === 0 && (${fieldRequiredExpr})`}
                         :class="value ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
                         class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                       >
                         <option value="" disabled hidden>Select value</option>
-                        <option value="__clear__">Clear selection</option>
                         {field.enum.map((value) => (
                           <option value={String(value)}>{value}</option>
                         ))}
@@ -890,12 +1208,11 @@ const layoutClass = isObjectLikeField
                           name={`${requestPart}_${field.name}`}
                           :value="getArrayBooleanValue(index)"
                           @change={`setArrayBooleanValue(index, $event.target.value)`}
-                          :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
+                          :required={`index === 0 && (${fieldRequiredExpr})`}
                           :class="getArrayBooleanValue(index) ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
                           class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                         >
                           <option value="" disabled hidden>Select value</option>
-                          <option value="__clear__">Clear selection</option>
                           <option value="true">true</option>
                           <option value="false">false</option>
                         </select>
@@ -904,15 +1221,23 @@ const layoutClass = isObjectLikeField
                           name="lucide:chevrons-up-down"
                         />
                       </div>
+                    ) : isFileInput ? (
+                      <input
+                        name={field.name}
+                        type="file"
+                        @change={`setArrayValue(index, $event.target.files?.[0] || '', $event.target)`}
+                        :required={`index === 0 && (${fieldRequiredExpr})`}
+                        class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow file:mr-3 file:rounded-md file:border-0 file:bg-neutral-100 file:px-2.5 file:py-1 file:text-xs file:font-medium file:text-neutral-700 transition-all duration-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:file:bg-neutral-800 dark:file:text-neutral-200 dark:focus:border-neutral-600"
+                      />
                     ) : (
                       <input
                         name={field.name}
-                        placeholder={`Enter ${field.name}`}
+                        placeholder={fieldPlaceholder}
                         type={inputType}
                         :value="value"
                         @input={`setArrayValue(index, $event.target.value, $event.target)`}
-                        @blur="reportFieldValidity($event.target)"
-                        :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
+                        @blur="setScalarValidity($event.target, $event.target.value)"
+                        :required={`index === 0 && (${fieldRequiredExpr})`}
                         min={numericInputMin}
                         max={numericInputMax}
                         step={numericInputStep}
@@ -953,6 +1278,7 @@ const layoutClass = isObjectLikeField
                   requestPart={requestPart}
                   scopeExpr={fieldModelExpr}
                   defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                  requiredEnabledExpr={childRequiredEnabledExpr}
                 />
               </div>
             ))}
@@ -995,6 +1321,7 @@ const layoutClass = isObjectLikeField
                                   requestPart={requestPart}
                                   scopeExpr={fieldModelExpr}
                                   defaultsEnabledExpr={`(${resolvedDefaultsEnabledExpr}) && getSelectedOneOfVariant() === ${variantIndex}`}
+                                  requiredEnabledExpr={`(${childRequiredEnabledExpr}) && getSelectedOneOfVariant() === ${variantIndex}`}
                                 />
                               </div>
                             ))}
@@ -1021,6 +1348,7 @@ const layoutClass = isObjectLikeField
                                 requestPart={requestPart}
                                 scopeExpr={fieldModelExpr}
                                 defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                                requiredEnabledExpr={childRequiredEnabledExpr}
                               />
                             </div>
                           ))}
@@ -1036,55 +1364,89 @@ const layoutClass = isObjectLikeField
       ) : (
         <>
           {field.enum && field.enum.length > 0 ? (
-            <div class="relative">
-              <select
-                name={`${requestPart}_${field.name}`}
-                :value="getFieldValue()"
-                @change="setFieldValue($event.target.value, $event.target)"
-                required={isRequiredField}
-                :class="getFieldValue() ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
-                class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
-              >
-                <option value="" disabled hidden>Select value</option>
-                <option value="__clear__">Clear selection</option>
-                {field.enum.map((value) => (
-                  <option value={String(value)}>{value}</option>
-                ))}
-              </select>
-              <Icon
-                class="absolute right-3 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-neutral-400"
-                name="lucide:chevrons-up-down"
-              />
+            <div class="flex items-center gap-2">
+              <div class="relative w-full">
+                <select
+                  name={`${requestPart}_${field.name}`}
+                  :value="getFieldValue()"
+                  @change="setFieldValue($event.target.value, $event.target)"
+                  :required={fieldRequiredExpr}
+                  :class="getFieldValue() ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                  class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
+                >
+                  <option value="" disabled hidden>Select value</option>
+                  {field.enum.map((value) => (
+                    <option value={String(value)}>{value}</option>
+                  ))}
+                </select>
+                <Icon
+                  class="absolute right-3 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-neutral-400"
+                  name="lucide:chevrons-up-down"
+                />
+              </div>
+              {!isRequiredField && (
+                <button
+                  type="button"
+                  @click="clearFieldValue()"
+                  x-show="getFieldValue()"
+                  x-cloak
+                  class="h-[31px] px-2 rounded-md border border-neutral-200 text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 hover:bg-neutral-50 transition-colors duration-200 cursor-pointer dark:border-neutral-700 dark:text-neutral-400 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200"
+                  aria-label={`Clear ${field.name}`}
+                >
+                  <Icon class="size-4" name="lucide:x" />
+                </button>
+              )}
             </div>
           ) : isBooleanType ? (
-            <div class="relative">
-              <select
-                name={`${requestPart}_${field.name}`}
-                :value="getBooleanFieldValue()"
-                @change="setBooleanFieldValue($event.target.value)"
-                required={isRequiredField}
-                :class="getBooleanFieldValue() ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
-                class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
-              >
-                <option value="" disabled hidden>Select value</option>
-                <option value="__clear__">Clear selection</option>
-                <option value="true">true</option>
-                <option value="false">false</option>
-              </select>
-              <Icon
-                class="absolute right-3 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-neutral-400"
-                name="lucide:chevrons-up-down"
-              />
+            <div class="flex items-center gap-2">
+              <div class="relative w-full">
+                <select
+                  name={`${requestPart}_${field.name}`}
+                  :value="getBooleanFieldValue()"
+                  @change="setBooleanFieldValue($event.target.value)"
+                  :required={fieldRequiredExpr}
+                  :class="getBooleanFieldValue() ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                  class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
+                >
+                  <option value="" disabled hidden>Select value</option>
+                  <option value="true">true</option>
+                  <option value="false">false</option>
+                </select>
+                <Icon
+                  class="absolute right-3 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-neutral-400"
+                  name="lucide:chevrons-up-down"
+                />
+              </div>
+              {!isRequiredField && (
+                <button
+                  type="button"
+                  @click="clearFieldValue()"
+                  x-show="getBooleanFieldValue()"
+                  x-cloak
+                  class="h-[31px] px-2 rounded-md border border-neutral-200 text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 hover:bg-neutral-50 transition-colors duration-200 cursor-pointer dark:border-neutral-700 dark:text-neutral-400 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200"
+                  aria-label={`Clear ${field.name}`}
+                >
+                  <Icon class="size-4" name="lucide:x" />
+                </button>
+              )}
             </div>
+          ) : isFileInput ? (
+            <input
+              name={field.name}
+              type="file"
+              @change="setFieldValue($event.target.files?.[0] || '', $event.target)"
+              :required={fieldRequiredExpr}
+              class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow file:mr-3 file:rounded-md file:border-0 file:bg-neutral-100 file:px-2.5 file:py-1 file:text-xs file:font-medium file:text-neutral-700 transition-all duration-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:file:bg-neutral-800 dark:file:text-neutral-200 dark:focus:border-neutral-600"
+            />
           ) : (
             <input
               name={field.name}
-              placeholder={`Enter ${field.name}`}
+              placeholder={fieldPlaceholder}
               type={inputType}
               :value="getFieldValue()"
               @input="setFieldValue($event.target.value, $event.target)"
-              @blur="reportFieldValidity($event.target)"
-              required={isRequiredField}
+              @blur="setScalarValidity($event.target, $event.target.value)"
+              :required={fieldRequiredExpr}
               min={numericInputMin}
               max={numericInputMax}
               step={numericInputStep}