radiant-docs 0.1.7 → 0.1.8

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

@@ -6,13 +6,621 @@ import Field from "../ui/Field.astro";
 interface Props {
   field: FieldType;
   requestPart: string;
+  scopeExpr?: string;
+  defaultsEnabledExpr?: string;
 }
 
-const { field, requestPart } = Astro.props;
+const { field, requestPart, scopeExpr, defaultsEnabledExpr } = Astro.props;
+
+function cloneDefaultTemplate<T>(value: T): T {
+  if (value === undefined) return value;
+  try {
+    return JSON.parse(JSON.stringify(value)) as T;
+  } catch {
+    return value;
+  }
+}
+
+function buildObjectDefaultTemplateFromFields(
+  fields: FieldType[] | undefined,
+): Record<string, unknown> {
+  const defaults: Record<string, unknown> = {};
+  if (!fields || fields.length === 0) return defaults;
+
+  fields.forEach((childField) => {
+    if (childField.isAdditionalProperty) return;
+    const childDefault = buildFieldDefaultTemplate(childField);
+    if (childDefault !== undefined) {
+      defaults[childField.name] = childDefault;
+    }
+  });
+
+  return defaults;
+}
+
+function mergeObjectDefaults(
+  target: Record<string, unknown>,
+  source: Record<string, unknown>,
+) {
+  Object.entries(source).forEach(([key, value]) => {
+    if (!Object.prototype.hasOwnProperty.call(target, key)) {
+      target[key] = value;
+    }
+  });
+}
+
+function buildVariantDefaultTemplate(field: FieldType): Record<string, unknown> {
+  const variants = field.variants || [];
+  if (variants.length === 0) return {};
+
+  if (field.variantType === "oneOf") {
+    for (const variant of variants) {
+      const variantDefaults = buildObjectDefaultTemplateFromFields(
+        variant.fields,
+      );
+      if (Object.keys(variantDefaults).length > 0) {
+        return variantDefaults;
+      }
+    }
+    return {};
+  }
+
+  const merged: Record<string, unknown> = {};
+  variants.forEach((variant) => {
+    const variantDefaults = buildObjectDefaultTemplateFromFields(variant.fields);
+    mergeObjectDefaults(merged, variantDefaults);
+  });
+
+  return merged;
+}
+
+function buildFieldDefaultTemplate(field: FieldType): unknown | undefined {
+  if (field.hasDefault) {
+    return cloneDefaultTemplate(field.defaultValue);
+  }
+
+  const nestedDefaults = buildObjectDefaultTemplateFromFields(field.nested);
+  const variantDefaults = buildVariantDefaultTemplate(field);
+
+  if (field.isArray) {
+    const itemDefaults: Record<string, unknown> = {};
+    mergeObjectDefaults(itemDefaults, nestedDefaults);
+    mergeObjectDefaults(itemDefaults, variantDefaults);
+
+    if (field.required && Object.keys(itemDefaults).length > 0) {
+      return [itemDefaults];
+    }
+    return undefined;
+  }
+
+  const isObjectLikeField =
+    (field.nested && field.nested.length > 0) ||
+    (field.variants && field.variants.length > 0) ||
+    /\bobject\b/.test(field.type);
+  if (!isObjectLikeField) return undefined;
+
+  const objectDefaults: Record<string, unknown> = {};
+  mergeObjectDefaults(objectDefaults, nestedDefaults);
+  mergeObjectDefaults(objectDefaults, variantDefaults);
+
+  if (!field.required) return undefined;
+  return Object.keys(objectDefaults).length > 0 ? objectDefaults : undefined;
+}
+
+const requestPartKey = JSON.stringify(requestPart);
+const fieldNameKey = JSON.stringify(field.name);
+const defaultScopeExpr = `inputs[${requestPartKey}]`;
+const resolvedScopeExpr = scopeExpr || defaultScopeExpr;
+const resolvedDefaultsEnabledExpr = defaultsEnabledExpr || "true";
+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 isRequiredField = field.required === true;
+const stringMinLength =
+  typeof field.minLength === "number" &&
+  Number.isInteger(field.minLength) &&
+  field.minLength >= 0
+    ? field.minLength
+    : undefined;
+const stringMaxLength =
+  typeof field.maxLength === "number" &&
+  Number.isInteger(field.maxLength) &&
+  field.maxLength >= 0
+    ? field.maxLength
+    : undefined;
+const numericMinimum =
+  typeof field.minimum === "number" && Number.isFinite(field.minimum)
+    ? field.minimum
+    : undefined;
+const numericMaximum =
+  typeof field.maximum === "number" && Number.isFinite(field.maximum)
+    ? field.maximum
+    : undefined;
+const numericExclusiveMinimum =
+  typeof field.exclusiveMinimum === "number" &&
+  Number.isFinite(field.exclusiveMinimum)
+    ? field.exclusiveMinimum
+    : undefined;
+const numericExclusiveMaximum =
+  typeof field.exclusiveMaximum === "number" &&
+  Number.isFinite(field.exclusiveMaximum)
+    ? field.exclusiveMaximum
+    : undefined;
+const numericInputMin =
+  inputType === "number"
+    ? numericMinimum !== undefined
+      ? numericMinimum
+      : isIntegerType && numericExclusiveMinimum !== undefined
+        ? Math.floor(numericExclusiveMinimum) + 1
+        : numericExclusiveMinimum
+    : undefined;
+const numericInputMax =
+  inputType === "number"
+    ? numericMaximum !== undefined
+      ? numericMaximum
+      : isIntegerType && numericExclusiveMaximum !== undefined
+        ? Math.ceil(numericExclusiveMaximum) - 1
+        : numericExclusiveMaximum
+    : undefined;
+const numericInputStep =
+  inputType === "number" ? (isIntegerType ? "1" : "any") : undefined;
+const textInputMinLength = inputType === "text" ? stringMinLength : undefined;
+const textInputMaxLength = inputType === "text" ? stringMaxLength : undefined;
+const hasNumericMinimum = numericMinimum !== undefined;
+const hasNumericMaximum = numericMaximum !== undefined;
+const hasNumericExclusiveMinimum = numericExclusiveMinimum !== undefined;
+const hasNumericExclusiveMaximum = numericExclusiveMaximum !== undefined;
+const hasStringMinLength = stringMinLength !== undefined;
+const hasStringMaxLength = stringMaxLength !== undefined;
+const numericMinimumLiteral =
+  numericMinimum !== undefined ? JSON.stringify(numericMinimum) : "undefined";
+const numericMaximumLiteral =
+  numericMaximum !== undefined ? JSON.stringify(numericMaximum) : "undefined";
+const numericExclusiveMinimumLiteral =
+  numericExclusiveMinimum !== undefined
+    ? JSON.stringify(numericExclusiveMinimum)
+    : "undefined";
+const numericExclusiveMaximumLiteral =
+  numericExclusiveMaximum !== undefined
+    ? JSON.stringify(numericExclusiveMaximum)
+    : "undefined";
+const stringMinLengthLiteral =
+  stringMinLength !== undefined ? JSON.stringify(stringMinLength) : "undefined";
+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 hasOneOfVariants = field.variantType === "oneOf" && hasFieldVariants;
+const oneOfVariantFieldKeys = hasOneOfVariants
+  ? (field.variants || []).map((variant) =>
+      (variant.fields || []).map((variantField) => variantField.name),
+    )
+  : [];
+const isAdditionalPropertyField = field.isAdditionalProperty === true;
+const mapKnownKeys = JSON.stringify(field.mapKnownKeys || []);
+const oneOfVariantFieldKeysJson = JSON.stringify(oneOfVariantFieldKeys);
+const defaultTemplate = buildFieldDefaultTemplate(field);
+const hasDefaultTemplate = defaultTemplate !== undefined;
+const defaultTemplateJson = JSON.stringify(defaultTemplate ?? null).replaceAll(
+  "`",
+  "\\`",
+);
+const hasComplexMapValue =
+  field.isArray ||
+  hasNestedFields ||
+  hasFieldVariants ||
+  /\bobject\b/.test(field.type);
+const isObjectLikeField =
+  isAdditionalPropertyField ||
+  hasNestedFields ||
+  hasFieldVariants ||
+  /\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";
 ---
 
 <div
-  class="flex justify-between flex-col sm:flex-row lg:flex-col xl:flex-row gap-4"
+  x-data={`{
+    hasDefaultTemplate: ${hasDefaultTemplate ? "true" : "false"},
+    defaultTemplate: ${defaultTemplateJson},
+    ensureScopeObject() {
+      if (
+        !${resolvedScopeExpr} ||
+        typeof ${resolvedScopeExpr} !== 'object' ||
+        Array.isArray(${resolvedScopeExpr})
+      ) {
+        ${resolvedScopeExpr} = {};
+      }
+      return ${resolvedScopeExpr};
+    },
+    cloneDefaultValue(value) {
+      if (value === undefined) return undefined;
+      try {
+        return JSON.parse(JSON.stringify(value));
+      } catch (e) {
+        return value;
+      }
+    },
+    defaultsAreEnabled() {
+      try {
+        return Boolean(${resolvedDefaultsEnabledExpr});
+      } catch (e) {
+        return false;
+      }
+    },
+    applyInitialDefault() {
+      if (!this.hasDefaultTemplate || ${isAdditionalPropertyField ? "true" : "false"}) return;
+      if (!this.defaultsAreEnabled()) return;
+
+      this.ensureScopeObject();
+      if (Object.prototype.hasOwnProperty.call(${resolvedScopeExpr}, ${fieldNameKey})) {
+        return;
+      }
+
+      const nextValue = this.cloneDefaultValue(this.defaultTemplate);
+      if (nextValue === undefined) return;
+
+      ${fieldModelExpr} = nextValue;
+
+      if (
+        ${hasOneOfVariants ? "true" : "false"} &&
+        nextValue &&
+        typeof nextValue === 'object' &&
+        !Array.isArray(nextValue)
+      ) {
+        this.selectedOneOfVariant = this.detectOneOfVariant(nextValue);
+      }
+    },
+    init() {
+      this.applyInitialDefault();
+    },
+    oneOfVariantFieldKeys: ${oneOfVariantFieldKeysJson},
+    selectedOneOfVariant: null,
+    selectedArrayItemVariants: {},
+    ensureFieldObject() {
+      this.ensureScopeObject();
+      if (
+        !${fieldModelExpr} ||
+        typeof ${fieldModelExpr} !== 'object' ||
+        Array.isArray(${fieldModelExpr})
+      ) {
+        ${fieldModelExpr} = {};
+      }
+      return ${fieldModelExpr};
+    },
+    getOneOfVariantFieldKeys(variantIndex) {
+      const keys = this.oneOfVariantFieldKeys[variantIndex];
+      return Array.isArray(keys) ? keys : [];
+    },
+    detectOneOfVariant(target) {
+      if (!target || typeof target !== 'object' || Array.isArray(target)) {
+        return 0;
+      }
+      let selectedIndex = 0;
+      let bestScore = -1;
+      this.oneOfVariantFieldKeys.forEach((keys, variantIndex) => {
+        if (!Array.isArray(keys) || keys.length === 0) return;
+        const score = keys.reduce((total, key) => {
+          return total + (Object.prototype.hasOwnProperty.call(target, key) ? 1 : 0);
+        }, 0);
+        if (score > bestScore) {
+          bestScore = score;
+          selectedIndex = variantIndex;
+        }
+      });
+      return selectedIndex;
+    },
+    pruneObjectForOneOf(target, selectedVariantIndex) {
+      if (!target || typeof target !== 'object' || Array.isArray(target)) return;
+      const selectedKeys = new Set(
+        this.getOneOfVariantFieldKeys(selectedVariantIndex),
+      );
+      const keysToRemove = new Set();
+      this.oneOfVariantFieldKeys.forEach((keys, variantIndex) => {
+        if (!Array.isArray(keys) || variantIndex === selectedVariantIndex) return;
+        keys.forEach((key) => {
+          if (!selectedKeys.has(key)) keysToRemove.add(key);
+        });
+      });
+      keysToRemove.forEach((key) => {
+        delete target[key];
+      });
+    },
+    getSelectedOneOfVariant() {
+      if (Number.isInteger(this.selectedOneOfVariant)) {
+        return this.selectedOneOfVariant;
+      }
+      const target = ${fieldModelExpr};
+      const detected = this.detectOneOfVariant(target);
+      this.selectedOneOfVariant = detected;
+      return detected;
+    },
+    selectOneOfVariant(variantIndex) {
+      this.selectedOneOfVariant = variantIndex;
+      const target = this.ensureFieldObject();
+      this.pruneObjectForOneOf(target, variantIndex);
+    },
+    getSelectedArrayItemVariant(itemIndex) {
+      if (Object.prototype.hasOwnProperty.call(this.selectedArrayItemVariants, itemIndex)) {
+        return this.selectedArrayItemVariants[itemIndex];
+      }
+      const values = this.getArrayObjectValues();
+      const detected = this.detectOneOfVariant(values[itemIndex]);
+      this.selectedArrayItemVariants[itemIndex] = detected;
+      return detected;
+    },
+    selectArrayItemVariant(itemIndex, variantIndex) {
+      this.selectedArrayItemVariants[itemIndex] = variantIndex;
+      const target = this.ensureArrayObjectItem(itemIndex);
+      this.pruneObjectForOneOf(target, variantIndex);
+    },
+    shiftArrayItemVariantSelection(removedIndex) {
+      const nextSelections = {};
+      Object.entries(this.selectedArrayItemVariants).forEach(([rawIndex, variantIndex]) => {
+        const index = Number(rawIndex);
+        if (!Number.isInteger(index) || index === removedIndex) return;
+        nextSelections[index > removedIndex ? index - 1 : index] = variantIndex;
+      });
+      this.selectedArrayItemVariants = nextSelections;
+    },
+    mapKnownKeys: ${mapKnownKeys},
+    getMapEntryKeys() {
+      const target = this.ensureScopeObject();
+      return Object.keys(target).filter((key) => !this.mapKnownKeys.includes(key));
+    },
+    addMapEntry() {
+      const target = this.ensureScopeObject();
+      const baseKey = 'key';
+      let nextKey = baseKey;
+      let index = 1;
+      while (Object.prototype.hasOwnProperty.call(target, nextKey)) {
+        nextKey = baseKey + '_' + index;
+        index += 1;
+      }
+      target[nextKey] = '';
+    },
+    removeMapEntry(mapKey) {
+      const target = this.ensureScopeObject();
+      delete target[mapKey];
+    },
+    renameMapKey(oldKey, newKey) {
+      const target = this.ensureScopeObject();
+      const nextKey = String(newKey || '').trim();
+      if (!nextKey || nextKey === oldKey) return;
+      if (Object.prototype.hasOwnProperty.call(target, nextKey)) return;
+      target[nextKey] = target[oldKey];
+      delete target[oldKey];
+    },
+    getMapValue(mapKey) {
+      const target = this.ensureScopeObject();
+      const value = target[mapKey];
+      return value === undefined || value === null ? '' : value;
+    },
+    setMapValue(mapKey, value, element) {
+      const target = this.ensureScopeObject();
+      target[mapKey] = this.coerceScalarValue(value);
+      this.setScalarValidity(element, value);
+    },
+    coerceScalarValue(rawValue) {
+      const value = rawValue === undefined || rawValue === null ? '' : String(rawValue).trim();
+      if (value === '__clear__') return '';
+      if (value === '') return '';
+      if (!${isNumericType}) return value;
+
+      const numeric = Number(value);
+      if (!Number.isFinite(numeric)) return value;
+
+      if (${isIntegerType} && !Number.isInteger(numeric)) {
+        return value;
+      }
+
+      return numeric;
+    },
+    setScalarValidity(element, rawValue) {
+      if (!element || typeof element.setCustomValidity !== 'function') return;
+      const value = rawValue === undefined || rawValue === null ? '' : String(rawValue).trim();
+      if (value === '' || value === '__clear__') {
+        element.setCustomValidity('');
+        return;
+      }
+
+      if (${isNumericType}) {
+        const numeric = Number(value);
+        if (!Number.isFinite(numeric)) {
+          element.setCustomValidity('Enter a valid number.');
+          return;
+        }
+        if (${isIntegerType} && !Number.isInteger(numeric)) {
+          element.setCustomValidity('Enter a whole number.');
+          return;
+        }
+        if (${hasNumericMinimum ? "true" : "false"} && numeric < ${numericMinimumLiteral}) {
+          element.setCustomValidity('Must be greater than or equal to ${numericMinimum ?? ""}.');
+          return;
+        }
+        if (${hasNumericExclusiveMinimum ? "true" : "false"} && numeric <= ${numericExclusiveMinimumLiteral}) {
+          element.setCustomValidity('Must be greater than ${numericExclusiveMinimum ?? ""}.');
+          return;
+        }
+        if (${hasNumericMaximum ? "true" : "false"} && numeric > ${numericMaximumLiteral}) {
+          element.setCustomValidity('Must be less than or equal to ${numericMaximum ?? ""}.');
+          return;
+        }
+        if (${hasNumericExclusiveMaximum ? "true" : "false"} && numeric >= ${numericExclusiveMaximumLiteral}) {
+          element.setCustomValidity('Must be less than ${numericExclusiveMaximum ?? ""}.');
+          return;
+        }
+      } else if (${hasStringType || hasStringMinLength || hasStringMaxLength ? "true" : "false"}) {
+        if (${hasStringMinLength ? "true" : "false"} && value.length < ${stringMinLengthLiteral}) {
+          element.setCustomValidity('Must be at least ${stringMinLength ?? ""} characters.');
+          return;
+        }
+        if (${hasStringMaxLength ? "true" : "false"} && value.length > ${stringMaxLengthLiteral}) {
+          element.setCustomValidity('Must be at most ${stringMaxLength ?? ""} characters.');
+          return;
+        }
+      }
+
+      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';
+      return '';
+    },
+    getBooleanFieldValue() {
+      return this.toBooleanOption(${fieldModelExpr});
+    },
+    setBooleanFieldValue(rawValue) {
+      const value = String(rawValue || '');
+      this.ensureScopeObject();
+      if (value === 'true') {
+        ${fieldModelExpr} = true;
+        return;
+      }
+      if (value === 'false') {
+        ${fieldModelExpr} = false;
+        return;
+      }
+      delete ${resolvedScopeExpr}[${fieldNameKey}];
+    },
+    getArrayBooleanValue(index) {
+      const values = this.getArrayValues();
+      return this.toBooleanOption(values[index]);
+    },
+    setArrayBooleanValue(index, rawValue) {
+      const value = String(rawValue || '');
+      const values = this.ensureArrayField();
+      if (value === 'true') {
+        values[index] = true;
+        return;
+      }
+      if (value === 'false') {
+        values[index] = false;
+        return;
+      }
+      values[index] = '';
+    },
+    getMapBooleanValue(mapKey) {
+      return this.toBooleanOption(this.getMapValue(mapKey));
+    },
+    setMapBooleanValue(mapKey, rawValue) {
+      const value = String(rawValue || '');
+      const target = this.ensureScopeObject();
+      if (value === 'true') {
+        target[mapKey] = true;
+        return;
+      }
+      if (value === 'false') {
+        target[mapKey] = false;
+        return;
+      }
+      target[mapKey] = '';
+    },
+    getMapJsonValue(mapKey) {
+      const target = this.ensureScopeObject();
+      const value = target[mapKey];
+      if (value === undefined) return '';
+      try {
+        return JSON.stringify(value, null, 2);
+      } catch (e) {
+        return '';
+      }
+    },
+    setMapJsonValue(mapKey, jsonValue) {
+      const target = this.ensureScopeObject();
+      const raw = String(jsonValue || '');
+      if (!raw.trim()) {
+        target[mapKey] = '';
+        return;
+      }
+      try {
+        target[mapKey] = JSON.parse(raw);
+      } catch (e) {
+        // Keep previous valid value while editing invalid JSON.
+      }
+    },
+    getFieldValue() {
+      const value = ${fieldModelExpr};
+      return value === undefined || value === null ? '' : value;
+    },
+    setFieldValue(value, element) {
+      this.ensureScopeObject();
+      ${fieldModelExpr} = this.coerceScalarValue(value);
+      this.setScalarValidity(element, value);
+    },
+    ensureArrayField() {
+      this.ensureScopeObject();
+      if (!Array.isArray(${fieldModelExpr})) {
+        ${fieldModelExpr} = [];
+      }
+      return ${fieldModelExpr};
+    },
+    getArrayValues() {
+      const values = ${fieldModelExpr};
+      return Array.isArray(values) && values.length > 0 ? values : [''];
+    },
+    setArrayValue(index, value, element) {
+      const values = this.ensureArrayField();
+      values[index] = this.coerceScalarValue(value);
+      this.setScalarValidity(element, value);
+    },
+    addArrayValue() {
+      const values = this.ensureArrayField();
+      if (values.length === 0) {
+        values.push('', '');
+        return;
+      }
+      values.push('');
+    },
+    removeArrayValue(index) {
+      const values = ${fieldModelExpr};
+      if (!Array.isArray(values)) return;
+      values.splice(index, 1);
+      if (values.length === 0) {
+        delete ${resolvedScopeExpr}[${fieldNameKey}];
+      }
+    },
+    getArrayObjectValues() {
+      const values = ${fieldModelExpr};
+      return Array.isArray(values) ? values : [];
+    },
+    ensureArrayObjectItem(index) {
+      const values = this.ensureArrayField();
+      if (
+        !values[index] ||
+        typeof values[index] !== 'object' ||
+        Array.isArray(values[index])
+      ) {
+        values[index] = {};
+      }
+      return values[index];
+    },
+    addArrayObjectValue() {
+      const values = this.ensureArrayField();
+      values.push({});
+    },
+    removeArrayObjectValue(index) {
+      const values = ${fieldModelExpr};
+      if (!Array.isArray(values)) return;
+      values.splice(index, 1);
+      this.shiftArrayItemVariantSelection(index);
+      if (values.length === 0) {
+        delete ${resolvedScopeExpr}[${fieldNameKey}];
+      }
+    }
+  }`}
+  x-effect="applyInitialDefault()"
+  class={layoutClass}
 >
   <div class="w-full mt-1.5">
     <Field
@@ -20,34 +628,472 @@ const { field, requestPart } = Astro.props;
       type={field.type}
       description={field.description}
       required={field.required}
+      minLength={field.minLength}
+      maxLength={field.maxLength}
+      minimum={field.minimum}
+      maximum={field.maximum}
+      exclusiveMinimum={field.exclusiveMinimum}
+      exclusiveMaximum={field.exclusiveMaximum}
     />
   </div>
   <div class="w-full">
     {
-      field.enum && field.enum.length > 0 ? (
-        <div class="relative">
-          <select
-            name={`${requestPart}_${field.name}`}
-            x-model={`inputs['${requestPart}']['${field.name}']`}
-            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 placeholder:text-neutral-400 transition-all duration-200 bg-white appearance-none"
+      isAdditionalPropertyField ? (
+        <div class="space-y-2">
+          <template
+            x-for={`(mapKey, mapIndex) in getMapEntryKeys()`}
+            :key={`${fieldNameKey} + '-map-' + mapKey + '-' + mapIndex`}
           >
-            {field.enum.map((value) => (
-              <option value={String(value)}>{value}</option>
+            <div class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5">
+              <div class="mb-2 flex items-center gap-2">
+                <input
+                  type="text"
+                  :value="mapKey"
+                  @change="renameMapKey(mapKey, $event.target.value)"
+                  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 placeholder:text-neutral-400 transition-all duration-200 bg-white"
+                  placeholder="Property key"
+                />
+                <button
+                  type="button"
+                  @click="removeMapEntry(mapKey)"
+                  class="h-[31px] px-2 rounded-md border border-neutral-200 text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 hover:bg-white transition-colors duration-200 cursor-pointer"
+                  aria-label={`Remove ${field.name} key`}
+                >
+                  <Icon class="size-4" name="lucide:x" />
+                </button>
+              </div>
+              {
+                hasComplexMapValue ? (
+                  <textarea
+                    rows="3"
+                    :value="getMapJsonValue(mapKey)"
+                    @input="setMapJsonValue(mapKey, $event.target.value)"
+                    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"
+                    placeholder="JSON value"
+                  />
+                ) : field.enum && field.enum.length > 0 ? (
+                  <div class="relative">
+                    <select
+                      :value="getMapValue(mapKey)"
+                      @change="setMapValue(mapKey, $event.target.value, $event.target)"
+                      :class="getMapValue(mapKey) ? 'text-neutral-700' : 'text-neutral-400'"
+                      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"
+                    >
+                      <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>
+                ) : isBooleanType ? (
+                  <div class="relative">
+                    <select
+                      :value="getMapBooleanValue(mapKey)"
+                      @change="setMapBooleanValue(mapKey, $event.target.value)"
+                      :class="getMapBooleanValue(mapKey) ? 'text-neutral-700' : 'text-neutral-400'"
+                      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"
+                    >
+                      <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>
+                ) : (
+                  <input
+                    type={inputType}
+                    :value="getMapValue(mapKey)"
+                    @input="setMapValue(mapKey, $event.target.value, $event.target)"
+                    @blur="reportFieldValidity($event.target)"
+                    min={numericInputMin}
+                    max={numericInputMax}
+                    step={numericInputStep}
+                    minlength={textInputMinLength}
+                    maxlength={textInputMaxLength}
+                    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 placeholder:text-neutral-400 transition-all duration-200 bg-white"
+                    placeholder="Property value"
+                  />
+                )
+              }
+            </div>
+          </template>
+          <button
+            type="button"
+            @click="addMapEntry()"
+            class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200"
+          >
+            <Icon class="size-3.5" name="lucide:plus" />
+            Add property
+          </button>
+        </div>
+      ) : field.isArray ? (
+        hasNestedFields || hasFieldVariants ? (
+          <div class="space-y-2">
+            <template
+              x-for={`(item, index) in getArrayObjectValues()`}
+              :key={`${fieldNameKey} + '-item-' + index`}
+            >
+              <div
+                class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5"
+                x-init="ensureArrayObjectItem(index)"
+              >
+                <div class="mb-2 flex items-center justify-between">
+                  <span class="text-xs font-medium text-neutral-600">
+                    Item <span x-text="index + 1" />
+                  </span>
+                  <button
+                    type="button"
+                    @click="removeArrayObjectValue(index)"
+                    class="inline-flex h-6 items-center rounded-md border border-neutral-200 px-2 text-[11px] font-medium text-neutral-600 hover:border-neutral-300 hover:bg-white hover:text-neutral-700 transition-colors duration-200 cursor-pointer"
+                    aria-label={`Remove ${field.name} item`}
+                  >
+                    Remove
+                  </button>
+                </div>
+                <div class="space-y-3">
+                  {field.nested?.map((nestedField) => (
+                    <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                      <Astro.self
+                        field={nestedField}
+                        requestPart={requestPart}
+                        scopeExpr={`${fieldModelExpr}[index]`}
+                        defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                      />
+                    </div>
+                  ))}
+                  {field.variants && field.variants.length > 0 && (
+                    <div class:list={["space-y-2", hasNestedFields && "pt-1"]}>
+                      {hasOneOfVariants ? (
+                        <>
+                          <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">
+                            {field.variants.map((variant, variantIndex) => (
+                              <button
+                                type="button"
+                                @click={`selectArrayItemVariant(index, ${variantIndex})`}
+                                :class={`{
+                                  'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200': getSelectedArrayItemVariant(index) === ${variantIndex},
+                                  'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800': getSelectedArrayItemVariant(index) !== ${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>
+                          {field.variants.map((variant, variantIndex) => (
+                            <div
+                              x-show={`getSelectedArrayItemVariant(index) === ${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((variantField) => (
+                                    <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                                      <Astro.self
+                                        field={variantField}
+                                        requestPart={requestPart}
+                                        scopeExpr={`${fieldModelExpr}[index]`}
+                                        defaultsEnabledExpr={`(${resolvedDefaultsEnabledExpr}) && getSelectedArrayItemVariant(index) === ${variantIndex}`}
+                                      />
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </>
+                      ) : (
+                        <>
+                          <p class="text-xs text-neutral-500">
+                            One or more variants may apply.
+                          </p>
+                          {field.variants.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((variantField) => (
+                                  <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                                    <Astro.self
+                                      field={variantField}
+                                      requestPart={requestPart}
+                                      scopeExpr={`${fieldModelExpr}[index]`}
+                                      defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                                    />
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                        </>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </template>
+            <button
+              type="button"
+              @click="addArrayObjectValue()"
+              class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200"
+            >
+              <Icon class="size-3.5" name="lucide:plus" />
+              Add item
+            </button>
+          </div>
+        ) : (
+          <div class="space-y-2">
+            <template x-for={`(value, index) in getArrayValues()`} :key={`${fieldNameKey} + '-' + index`}>
+              <div class="flex items-center gap-2">
+                {
+                  field.enum && field.enum.length > 0 ? (
+                    <div class="relative w-full">
+                      <select
+                        name={`${requestPart}_${field.name}`}
+                        :value="value"
+                        @change={`setArrayValue(index, $event.target.value, $event.target)`}
+                        :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
+                        :class="value ? 'text-neutral-700' : 'text-neutral-400'"
+                        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"
+                      >
+                        <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>
+                  ) : (
+                    isBooleanType ? (
+                      <div class="relative w-full">
+                        <select
+                          name={`${requestPart}_${field.name}`}
+                          :value="getArrayBooleanValue(index)"
+                          @change={`setArrayBooleanValue(index, $event.target.value)`}
+                          :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
+                          :class="getArrayBooleanValue(index) ? 'text-neutral-700' : 'text-neutral-400'"
+                          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"
+                        >
+                          <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>
+                    ) : (
+                      <input
+                        name={field.name}
+                        placeholder={`Enter ${field.name}`}
+                        type={inputType}
+                        :value="value"
+                        @input={`setArrayValue(index, $event.target.value, $event.target)`}
+                        @blur="reportFieldValidity($event.target)"
+                        :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
+                        min={numericInputMin}
+                        max={numericInputMax}
+                        step={numericInputStep}
+                        minlength={textInputMinLength}
+                        maxlength={textInputMaxLength}
+                        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 placeholder:text-neutral-400 transition-all duration-200"
+                      />
+                    )
+                  )
+                }
+                <button
+                  type="button"
+                  @click="removeArrayValue(index)"
+                  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"
+                  aria-label={`Remove ${field.name} value`}
+                >
+                  <Icon class="size-4" name="lucide:x" />
+                </button>
+              </div>
+            </template>
+            <button
+              type="button"
+              @click="addArrayValue()"
+              class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200"
+            >
+              <Icon class="size-3.5" name="lucide:plus" />
+              Add value
+            </button>
+          </div>
+        )
+      ) : hasNestedFields || hasFieldVariants ? (
+        <div class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5">
+          <div class="space-y-3">
+            {field.nested?.map((nestedField) => (
+              <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                <Astro.self
+                  field={nestedField}
+                  requestPart={requestPart}
+                  scopeExpr={fieldModelExpr}
+                  defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                />
+              </div>
             ))}
-          </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"
-          />
+            {field.variants && field.variants.length > 0 && (
+              <div class:list={["space-y-2", hasNestedFields && "pt-1"]}>
+                {hasOneOfVariants ? (
+                  <>
+                    <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">
+                      {field.variants.map((variant, variantIndex) => (
+                        <button
+                          type="button"
+                          @click={`selectOneOfVariant(${variantIndex})`}
+                          :class={`{
+                            'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200': getSelectedOneOfVariant() === ${variantIndex},
+                            'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800': getSelectedOneOfVariant() !== ${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>
+                    {field.variants.map((variant, variantIndex) => (
+                      <div
+                        x-show={`getSelectedOneOfVariant() === ${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((variantField) => (
+                              <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                                <Astro.self
+                                  field={variantField}
+                                  requestPart={requestPart}
+                                  scopeExpr={fieldModelExpr}
+                                  defaultsEnabledExpr={`(${resolvedDefaultsEnabledExpr}) && getSelectedOneOfVariant() === ${variantIndex}`}
+                                />
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </>
+                ) : (
+                  <>
+                    <p class="text-xs text-neutral-500">
+                      One or more variants may apply.
+                    </p>
+                    {field.variants.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((variantField) => (
+                            <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                              <Astro.self
+                                field={variantField}
+                                requestPart={requestPart}
+                                scopeExpr={fieldModelExpr}
+                                defaultsEnabledExpr={resolvedDefaultsEnabledExpr}
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       ) : (
-        <input
-          name={field.name}
-          placeholder={`Enter ${field.name}`}
-          type={field.type === "number" ? "number" : "text"}
-          x-model={`inputs['${requestPart}']['${field.name}']`}
-          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 placeholder:text-neutral-400 transition-all duration-200"
-        />
+        <>
+          {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' : 'text-neutral-400'"
+                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"
+              >
+                <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>
+          ) : isBooleanType ? (
+            <div class="relative">
+              <select
+                name={`${requestPart}_${field.name}`}
+                :value="getBooleanFieldValue()"
+                @change="setBooleanFieldValue($event.target.value)"
+                required={isRequiredField}
+                :class="getBooleanFieldValue() ? 'text-neutral-700' : 'text-neutral-400'"
+                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"
+              >
+                <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>
+          ) : (
+            <input
+              name={field.name}
+              placeholder={`Enter ${field.name}`}
+              type={inputType}
+              :value="getFieldValue()"
+              @input="setFieldValue($event.target.value, $event.target)"
+              @blur="reportFieldValidity($event.target)"
+              required={isRequiredField}
+              min={numericInputMin}
+              max={numericInputMax}
+              step={numericInputStep}
+              minlength={textInputMinLength}
+              maxlength={textInputMaxLength}
+              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 placeholder:text-neutral-400 transition-all duration-200"
+            />
+          )}
+        </>
       )
     }
   </div>