@es-joy/jsoe 0.15.0 → 0.17.0

package/src/fundamentalTypes/arrayType.js

@@ -1,13 +1,15 @@
 import {jml, nbsp} from '../vendor-imports.js';
 
 import {getPropertyValueFromLegend} from '../types.js';
-import {$e, U, DOM} from '../utils/templateUtils.js';
+import {$e, $$e, U, DOM} from '../utils/templateUtils.js';
 import dialogs from '../utils/dialogs.js';
 import {
   resolveJSONPointer, getJSONPointerParts, reduceJSONPointerParts
 } from '../utils/jsonPointer.js';
 import FileList from '../utils/FileList.js';
 
+let optionalPropertyId = 0;
+
 /**
  * @typedef {number} Integer
  */
@@ -88,12 +90,16 @@ const arrayType = {
   regexEndings: [',', ']'],
   stringRegexBegin: /^\[/u,
   stringRegexEnd: /^\]/u,
+  valueMatch (x) {
+    return Array.isArray(x);
+  },
   toValue (s, info) {
     const {
       /* istanbul ignore next -- Just a guard */
       endMatchTypeObjs = [],
       remnant: innerContents,
-      rootHolder
+      rootHolder,
+      schemaObject
     } = /** @type {import('../types.js').RootInfo} */ (info);
     // eslint-disable-next-line prefer-destructuring -- TS
     const format = /** @type {import('../types.js').RootInfo} */ (info).format;
@@ -157,6 +163,7 @@ const arrayType = {
               firstRun: false,
               format,
               state,
+              schemaObject,
               endMatchTypeObjs, rootHolder, parent: retObj, parentPath: idx
             }
           );
@@ -211,11 +218,11 @@ const arrayType = {
         [v, stringVal, beginOnly, assign] = types.getValueForString(
           stringVal,
           {
-            firstRun: false, format, state,
+            firstRun: false, format, state, schemaObject,
             endMatchTypeObjs, rootHolder, parent: retObj, parentPath: pr
           }
         );
-      } catch (err) {
+      } catch {
         // console.log(
         //   'errrrr', stringVal,
         //   JSON.stringify(endMatchTypeObjs)
@@ -299,6 +306,14 @@ const arrayType = {
             '.typeContainer',
             'div[data-type]'
           ]
+        )[0] || DOM.filterChildElements(
+          /** @type {HTMLFieldSetElement} */
+          (fieldset),
+          [
+            '[class^=optionalProperties-placeholder]',
+            '.typeContainer',
+            'div[data-type]'
+          ]
         )[0]
       );
       /* istanbul ignore if -- Should err first? */
@@ -351,11 +366,26 @@ const arrayType = {
             const key = select.$getValue();
             return [key, /** @type {any[]} */ (ret)[idx]];
           }))
-          : ret;
+          : this.record
+            ? arrayItems.$getMapKeySelects().reduce((obj, select, idx) => {
+              const key = select.$getValue();
+              const val = /** @type {any[]} */ (ret)[idx];
+              obj[key] = val;
+              // Todo: Reenable for native enums
+              // The nature of native enums
+              // if (typeof val === 'number') {
+              //   obj[val] = key;
+              // }
+              return obj;
+            }, /** @type {{[key: string]: any}} */ ({}))
+            : ret;
   },
 
   // Try to keep in sync with basic structure of `editUI`
-  viewUI ({typeNamespace, type, types, value, topRoot, resultType, format}) {
+  viewUI ({
+    typeNamespace, type, types, value, topRoot, resultType, format,
+    specificSchemaObject
+  }) {
     // const {sparse} = this;
     let itemIndex = -1;
 
@@ -373,175 +403,238 @@ const arrayType = {
       /* className, type, arrayItems, */
       itemIndex, typeNamespace, propName
     }) => {
+      const tupleItem = /** @type {import('zodex').SzTuple} */ (
+        specificSchemaObject
+      )?.items?.[itemIndex];
+      const restItem = /** @type {import('zodex').SzTuple} */ (
+        specificSchemaObject
+      )?.rest;
       return ['legend', [
-        this.array
-          ? 'Item'
-          : 'Property',
-        ':',
+        this.array && type !== 'record'
+          ? /** @type {import('zodex').SzArray} */ (
+            specificSchemaObject
+          )?.element?.description ??
+            ((type === 'set' && /** @type {import('zodex').SzSet} */ (
+              specificSchemaObject
+            )?.value?.description)
+              ? /** @type {import('zodex').SzSet} */ (
+                specificSchemaObject
+              )?.value?.description
+              : (
+                tupleItem?.description ?? restItem?.description
+              )) ?? 'Item'
+          : specificSchemaObject ? '' : 'Property',
+        specificSchemaObject ? '' : ':',
         nbsp.repeat(2),
         ['span', {
-          class: `propertyName-${typeNamespace}`
+          class: `propertyName-${typeNamespace}`,
+          title: type === 'record' && /** @type {import('zodex').SzRecord} */ (
+            specificSchemaObject
+          )?.key?.description
+            ? /** @type {import('zodex').SzRecord} */ (
+              specificSchemaObject
+            )?.key?.description
+            : specificSchemaObject ? propName : undefined
         }, [
           propName !== undefined
-            ? propName
+            ? /** @type {import('zodex').SzObject} */ (
+              specificSchemaObject
+            )?.properties?.[propName]?.description ?? propName
             // eslint-disable-next-line @stylistic/max-len -- Long
             /* istanbul ignore next -- Won't reach here as typeson will always give keypath? */
             : itemIndex
         ]]
       ]];
     };
-    const div = /** @type {HTMLDivElement} */ (
-      jml('div', /** @type {import('jamilih').JamilihAttributes} */ ({
-        class: 'arrayHolder',
-        dataset: {type},
-        $custom: {
-          /**
-           * @param {{
-           *   propName: string,
-           *   type: import('../types.js').AvailableType,
-           *   value: import('../formats.js').StructuredCloneValue,
-           *   bringIntoFocus: boolean,
-           *   schemaContent: object,
-           *   schemaState:
-           *     import('../types.js').GetPossibleSchemasForPathAndType
-           * }} cfg
-           * @returns {Element}
-           */
-          $addAndSetArrayElement ({
-            propName, type, value, bringIntoFocus,
-            schemaContent, schemaState
-          }) {
-            if (parentType === 'map') {
-              const root = types.getUIForModeAndType({
-                resultType,
-                readonly: true,
-                typeNamespace, type, topRoot,
-                bringIntoFocus,
-                format, schemaContent, schemaState,
-                value,
-                hasValue: true // type === 'sparseArrays' && value
-              });
-              if (propName === '0') {
-                const fieldset = this.$addMapElement();
-                this._lastFieldset = fieldset;
-                const keyFieldset = /** @type {HTMLFieldSetElement} */ (jml(
-                  'fieldset', [
-                    ['legend', ['Key']]
-                  ], fieldset
-                ));
-                jml(root, keyFieldset);
-              } else { // propName === '1'
-                const valueFieldset = /** @type {HTMLFieldSetElement} */ (jml(
-                  'fieldset', [
-                    ['legend', ['Value']]
-                  ], this._lastFieldset
-                ));
-                this._lastFieldset = null;
-                jml(root, valueFieldset);
-              }
-              return root;
-            }
-
-            const fieldset = this.$addArrayElement({propName});
+    const div = jml('div', /** @type {import('jamilih').JamilihAttributes} */ ({
+      class: 'arrayHolder',
+      dataset: {type},
+      $custom: {
+        /**
+         * @param {{
+         *   propName: string,
+         *   type: import('../types.js').AvailableType,
+         *   value: import('../formats.js').StructuredCloneValue,
+         *   bringIntoFocus: boolean,
+         *   schemaContent: import('../formats/schema.js').ZodexSchema,
+         * }} cfg
+         * @returns {Element}
+         */
+        $addAndSetArrayElement ({
+          propName, type, value, bringIntoFocus,
+          schemaContent
+        }) {
+          if (parentType === 'map') {
             const root = types.getUIForModeAndType({
               resultType,
               readonly: true,
               typeNamespace, type, topRoot,
               bringIntoFocus,
-              format, schemaContent, schemaState,
+              format, schemaContent,
               value,
               hasValue: true // type === 'sparseArrays' && value
             });
-            jml(root, fieldset);
+            if (propName === '0') {
+              const fieldset = this.$addMapElement();
+              this._lastFieldset = fieldset;
+              const keyFieldset = jml(
+                'fieldset', [
+                  ['legend', {
+                    title: /** @type {import('zodex').SzMap<any, any>} */ (
+                      specificSchemaObject
+                    )?.key?.description
+                      ? '(map key)'
+                      : undefined
+                  }, [
+                    /** @type {import('zodex').SzMap<any, any>} */ (
+                      specificSchemaObject
+                    )?.key?.description ?? 'Key'
+                  ]]
+                ], fieldset
+              );
+              jml(root, keyFieldset);
+            } else { // propName === '1'
+              const valueFieldset = jml(
+                'fieldset', [
+                  ['legend', {
+                    title: /** @type {import('zodex').SzMap<any, any>} */ (
+                      specificSchemaObject
+                    )?.value?.description
+                      ? '(map value)'
+                      : undefined
+                  }, [
+                    /** @type {import('zodex').SzMap<any, any>} */ (
+                      specificSchemaObject
+                    )?.value?.description ??
+                    'Value'
+                  ]]
+                ], this._lastFieldset
+              );
+              this._lastFieldset = null;
+              jml(root, valueFieldset);
+            }
             return root;
-          },
-          /**
-           * @returns {HTMLFieldSetElement}
-           */
-          $addMapElement () {
-            itemIndex++;
-            const arrayItems = this.$getArrayItems();
-            // const className = `${type}Item`;
-            const fieldset = /** @type {HTMLFieldSetElement} */ (
-              jml('fieldset', [
-                buildLegend({
-                  // className,
-                  // type,
-                  // arrayItems,
-                  itemIndex,
-                  typeNamespace,
-                  propName: undefined
-                })
-              ], arrayItems)
-            );
-            return fieldset;
-          },
-          /**
-           * @param {{propName: string}} cfg
-           * @returns {HTMLFieldSetElement}
-           */
-          $addArrayElement ({propName}) {
-            itemIndex++;
-            const arrayItems = this.$getArrayItems();
-            // const className = `${type}Item`;
-            const fieldset = /** @type {HTMLFieldSetElement} */ (
-              jml('fieldset', [
-                buildLegend({
-                  // className,
-                  // type,
-                  // arrayItems,
-                  itemIndex,
-                  typeNamespace,
-                  propName
-                })
-              ], arrayItems)
-            );
-            return fieldset;
-          },
-          $getArrayItems () {
-            return this.lastElementChild.lastElementChild;
           }
+
+          const fieldset = this.$addArrayElement({propName});
+          const root = types.getUIForModeAndType({
+            resultType,
+            readonly: true,
+            typeNamespace, type, topRoot,
+            bringIntoFocus,
+            format,
+            schemaContent,
+            specificSchemaObject: schemaContent,
+            value,
+            hasValue: true // type === 'sparseArrays' && value
+          });
+          jml(root, fieldset);
+          return root;
+        },
+        /**
+         * @returns {HTMLFieldSetElement}
+         */
+        $addMapElement () {
+          itemIndex++;
+          const arrayItems = this.$getArrayItems();
+          // const className = `${type}Item`;
+          const fieldset = jml('fieldset', [
+            buildLegend({
+              // className,
+              // type,
+              // arrayItems,
+              itemIndex,
+              typeNamespace,
+              propName: undefined
+            })
+          ], arrayItems);
+          return fieldset;
+        },
+        /**
+         * @param {{propName: string}} cfg
+         * @returns {HTMLFieldSetElement}
+         */
+        $addArrayElement ({propName}) {
+          itemIndex++;
+          const arrayItems = this.$getArrayItems();
+          // const className = `${type}Item`;
+          const fieldset = jml('fieldset', [
+            buildLegend({
+              // className,
+              // type,
+              // arrayItems,
+              itemIndex,
+              typeNamespace,
+              propName
+            })
+          ], arrayItems);
+          return fieldset;
+        },
+        $getArrayItems () {
+          return this.lastElementChild.lastElementChild;
         }
-      }), [
-        DOM.initialCaps(/** @type {import('../types.js').AvailableType} */ (
-          type
-        )).replace(/s$/u, ''), nbsp.repeat(2),
-        ['button', {$on: {click (/** @type {Event} */ e) {
-          e.preventDefault();
-          const {target} = e;
-          const arrayContents = /** @type {HTMLDivElement} */ ($e(
-            /** @type {HTMLElement} */
-            (/** @type {HTMLElement} */ (target).closest('.arrayHolder')),
-            '.arrayContents'
-          ));
-          arrayContents.hidden = !arrayContents.hidden;
-          /** @type {HTMLElement} */ (
-            target
-          ).textContent = arrayContents.hidden ? '+' : '-';
-        }}}, ['-']],
-        ['div', {class: 'arrayContents'}, [
-          this.array
-            ? ['div', [
-              type === 'filelist'
-                ? 'FileList length: '
+      }
+    }), [
+      ['span', {
+        title: specificSchemaObject?.description
+      }, [
+        specificSchemaObject
+          ? '—'
+          : DOM.initialCaps(/** @type {import('../types.js').AvailableType} */ (
+            type
+          )).replace(/s$/u, '')
+      ]],
+      nbsp.repeat(2),
+      ['button', {$on: {click (/** @type {Event} */ e) {
+        e.preventDefault();
+        const {target} = e;
+        const arrayContents = /** @type {HTMLDivElement} */ ($e(
+          /** @type {HTMLElement} */
+          (/** @type {HTMLElement} */ (target).closest('.arrayHolder')),
+          '.arrayContents'
+        ));
+        arrayContents.hidden = !arrayContents.hidden;
+        /** @type {HTMLElement} */ (
+          target
+        ).textContent = arrayContents.hidden ? '+' : '-';
+      }}}, ['-']],
+      ['div', {class: 'arrayContents'}, [
+        this.array && type !== 'record'
+          ? ['div', {
+            title: specificSchemaObject
+              ? (type === 'filelist'
+                ? '(a FileList)'
                 : type === 'set'
-                  ? 'Set size: '
+                  ? '(a Set)'
                   : type === 'map'
-                    ? 'Map size: '
-                    : 'Array length: ',
-              ['span', [
-                (value && (type === 'set' || type === 'map')
-                  ? value.size
-                  : value.length) || 0
-              ]]
+                    ? '(a Map)'
+                    : type === 'tuple'
+                      ? '(a tuple)'
+                      : '(an Array)')
+              : undefined
+          }, [
+            type === 'filelist'
+              ? (specificSchemaObject?.description ?? 'FileList') + ' length: '
+              : type === 'set'
+                ? (specificSchemaObject?.description ?? 'Set') + ' size: '
+                : type === 'map'
+                  ? (specificSchemaObject?.description ?? 'Map') + ' size: '
+                  : (specificSchemaObject?.description ?? 'Array') +
+                    ' length: ',
+            ['span', [
+              (value && (type === 'set' || type === 'map')
+                ? value.size
+                : value.length) || 0
             ]]
-            : '',
-          ['div', {
-            class: 'arrayItems'
-          }]
-        ]]
-      ])
-    );
+          ]]
+          : (type === 'record'
+            ? specificSchemaObject?.description ?? 'Record'
+            : ''),
+        ['div', {
+          class: 'arrayItems'
+        }]
+      ]]
+    ]);
     return [div];
   },
   getInput ({root}) {
@@ -553,17 +646,26 @@ const arrayType = {
   //    population of the array in the callback
   editUI ({
     typeNamespace, buildTypeChoices, format, // resultType,
-    formats, types,
-    type, arrayState, topRoot, value, bringIntoFocus = true
+    formats, types, specificSchemaObject, schemaFallingBack, schemaContent,
+    type, forcedState, topRoot, value: objectValue, bringIntoFocus = true
   }) {
     const {sparse} = this;
-    // eslint-disable-next-line consistent-this
+    // eslint-disable-next-line consistent-this -- Clearer
     const parentTypeObject = this;
     const itemAdjust = type === 'object' ? 1 : 0;
     let itemIndex = itemAdjust - 1;
     const editableProperties = type !== 'array' &&
-      type !== 'set' && type !== 'map' && type !== 'filelist';
-    const mapProperties = type === 'map';
+      type !== 'set' && type !== 'map' && type !== 'filelist' &&
+      type !== 'tuple' && type !== 'record'; // arrayNonindexKeys and object?
+    const mapProperties = type === 'map' || type === 'record';
+
+    const elementDesc = /** @type {import('zodex').SzArray} */ (
+      specificSchemaObject
+    )?.element?.description ?? (type === 'set'
+      ? /** @type {import('zodex').SzSet} */ (
+        specificSchemaObject
+      )?.value?.description
+      : undefined);
 
     /**
      * @param {HTMLInputElement} input
@@ -597,7 +699,7 @@ const arrayType = {
       if (!swapGroup || swapGroup.nodeName.toLowerCase() !== 'fieldset') {
         return;
       }
-      if (!sparse) {
+      if (!sparse && (!specificSchemaObject || parentTypeObject.array)) {
         const swapCountElem = DOM.filterChildElements(
           swapGroup, ['legend', `.${type}Item`]
         )[0];
@@ -659,6 +761,9 @@ const arrayType = {
      * @this {HTMLDivElement & {$swapGroup: SwapGroup}}
      */
     const $redrawMoveArrows = function () {
+      if (type === 'tuple') { // Don't want to move non-rest items at least
+        return;
+      }
       DOM.filterChildElements(this, [
         'fieldset', `.${type}Item-arrowHolder-${typeNamespace}`
       ]).forEach((holder, j, arr) => {
@@ -752,13 +857,15 @@ const arrayType = {
      *   itemIndex: number,
      *   typeNamespace: string|undefined,
      *   arrayItems: ArrayItems,
-     *   propName: string|undefined
+     *   propName: string|undefined,
+     *   required?: true,
+     *   schema?: import('zodex').SzType
      * }} cfg
      * @returns {import('jamilih').JamilihArray}
      */
     const buildLegend = ({
       className, splice, itemIndex, /* type, */ typeNamespace,
-      arrayItems, propName
+      arrayItems, propName, required, schema
     }) => {
       /**
        * @callback ValidateLength
@@ -774,40 +881,81 @@ const arrayType = {
        */
       const $validateLength = async function (avoidDialog) {
         if (!sparse) {
-          return undefined;
+          return;
         }
         const inputsExceedingLength = arrayItems.$inputsExceedingLength();
         const exceedsLength = inputsExceedingLength.length;
         if (avoidDialog || !exceedsLength || !(/^\d+$/u).test(this.value)) {
-          return undefined;
+          return;
         }
         await dialogs.confirm({
           message: 'You are attempting to add an (integer-based) ' +
             'array item beyond the length. Click "Ok" to allow to ' +
             'permit and extend the array length or "Cancel" otherwise.'
         });
-        const arrLengthInput = /** @type {HTMLInputElement} */ (
-          $e(
-            /** @type {HTMLElement} */ (arrayItems.previousElementSibling),
-            'input'
-          )
-        );
+        const arrLengthInput =
+          /** @type {HTMLInputElement & {$oldvalue: string}} */ (
+            $e(
+              /** @type {HTMLElement} */ (arrayItems.previousElementSibling),
+              'input'
+            )
+          );
         const highest = /** @type {number} */ (inputsExceedingLength.map(
           (i) => Number.parseInt(i.value)
         ).sort().at(-1));
         arrLengthInput.value = String(highest + 1);
-        return this.$validateLength(true);
+        arrLengthInput.$oldvalue = String(highest + 1);
+        // Does have potential side effects calling `$inputsExceedingLength`
+        this.$validateLength(true);
       };
       if (mapProperties) {
         const keyTypeSelection =
           /** @type {import('../typeChoices.js').BuildTypeChoices} */ (
             buildTypeChoices
           )({
-            format: 'structuredCloning',
+            value: propName !== undefined && type === 'record'
+              ? propName
+              : undefined,
+            setValue: propName !== undefined && type === 'record',
+            // Needed as false when map value supplied
+            autoTrigger: propName === undefined || type === 'record',
+            // eslint-disable-next-line object-shorthand -- TS
+            format: /** @type {import('../formats.js').AvailableFormat} */ (
+              format
+            ),
+            schemaOriginal: schemaContent,
+            // Can also be a `Record`
+            schemaContent: /** @type {import('zodex').SzMap<any, any>} */ (
+              specificSchemaObject
+            )?.key,
             typeNamespace: 'key-type-choices-only'
           });
         return ['legend', [
-          'Key ',
+          ['span', {
+            class: 'mapKey',
+            title: (
+              type === 'map' &&
+              /** @type {import('zodex').SzMap<any, any>} */ (
+                specificSchemaObject
+              )?.key?.description
+            )
+              ? '(map key)'
+              : type === 'record' &&
+              /** @type {import('zodex').SzRecord} */ (
+                specificSchemaObject
+              )?.key?.description
+                ? '(record key)'
+                : undefined
+          }, [
+            type === 'map'
+              ? /** @type {import('zodex').SzMap<any, any>} */ (
+                specificSchemaObject
+              )?.key?.description ?? 'Map key'
+              : /** @type {import('zodex').SzRecord} */ (
+                specificSchemaObject
+              )?.key?.description ?? 'Record key',
+            ' '
+          ]],
           ['span', {
             dataset: {prop: 'true'},
             className
@@ -816,7 +964,7 @@ const arrayType = {
           nbsp.repeat(2),
 
           ['span', {
-            class: 'mapKey',
+            class: 'mapKeyHolder',
             $on: {
               change: [function () {
                 /**
@@ -858,10 +1006,18 @@ const arrayType = {
                     return;
                   }
 
-                  select.setCustomValidity(
-                    'Duplicate Map key value'
+                  const control = select.hidden
+                    ? /** @type {HTMLInputElement|HTMLTextAreaElement} */ ($e(
+                      /** @type {HTMLDivElement} */ (
+                        select.nextElementSibling
+                      ), 'input,textarea'
+                    ))
+                    : select;
+
+                  control.setCustomValidity(
+                    `Duplicate ${type === 'map' ? 'Map' : 'Record'} key value`
                   );
-                  select.reportValidity();
+                  control.reportValidity();
                 });
               }
             }
@@ -869,24 +1025,85 @@ const arrayType = {
         ]];
       }
       if (editableProperties) {
+        // console.log('PROPNAME', propName, schema, specificSchemaObject);
+        const description = /** @type {import('zodex').SzObject} */ (
+          specificSchemaObject
+        )?.properties?.[/** @type {string} */ (propName)]?.description;
+        const optionalProperties = Object.entries(
+          /** @type {import('zodex').SzObject} */ (
+            specificSchemaObject
+          )?.properties ?? {}
+        ).map(([prop, val]) => {
+          if (!val.isOptional) {
+            return null;
+          }
+          return prop;
+        }).filter(Boolean);
+        optionalPropertyId++;
+        const initialValue = sparse
+          ? (
+            splice === 'append'
+              ? ''
+              : (propName !== undefined ? propName : itemIndex)
+          )
+          : propName || '';
         return /** @type {import('jamilih').JamilihArray} */ (['legend', [
           sparse
-            ? 'Item'
-            : {'#': [
-              'Property ',
-              ['span', {className}, [String(itemIndex)]],
-              ':'
-            ]},
+            ? elementDesc ?? 'Item'
+            : {'#': required
+              ? [
+                ['b', {className, title: description ? propName : undefined}, [
+                  elementDesc ?? description ?? propName ?? ''
+                ]]
+              ]
+              : [
+                ['span', {
+                  className: `${className}_propertyHolder${optionalPropertyId}`
+                }, [
+                  ...(specificSchemaObject && propName) // Optional but has name
+                    ? [
+                      ['b', [
+                        /** @type {import('zodex').SzObject} */
+                        (specificSchemaObject)?.properties?.[
+                          propName
+                        ]
+                          ? /** @type {import('zodex').SzObject} */ (
+                            specificSchemaObject
+                          )?.properties?.[
+                            propName
+                          ]?.description ?? propName
+                          : /** @type {import('zodex').SzObject} */ (
+                            specificSchemaObject
+                          )?.catchall?.description ?? propName
+                      ]]
+                    ]
+                    : [
+                      'Property ',
+                      ['span', {className}, [String(itemIndex)]],
+                      ':'
+                    ]
+                ]]
+              ]},
           nbsp.repeat(2),
+          specificSchemaObject && !required
+            ? ['datalist', {
+              id: `optionalProperties_${optionalPropertyId}`
+            }, optionalProperties.map((optionalProperty) => {
+              return ['option', {value: optionalProperty}];
+            })]
+            : '',
           ['input', {
-            value: sparse
-              ? (
-                splice === 'append'
-                  ? ''
-                  : (propName !== undefined ? propName : itemIndex)
-              )
-              : propName || '',
-            dataset: {prop: true, object: true},
+            list: specificSchemaObject && !required
+              ? `optionalProperties_${optionalPropertyId}`
+              : undefined,
+            style: {
+              display: required && type !== 'arrayNonindexKeys'
+                ? 'none'
+                : 'block'
+            },
+            disabled: required && type === 'arrayNonindexKeys',
+            value: initialValue,
+            dataset: {prop: true, object: true, optionalPropertyId},
             /*
             // Works but we do want to let the user input non-integer
             type: sparse ? 'number' : 'text',
@@ -905,7 +1122,7 @@ const arrayType = {
                 try {
                   try {
                     await this.$validateLength();
-                  } catch (err) {
+                  } catch {
                     // Give chance for other validations if cancelled
                   }
                   // Don't give chance to validate positively if failed
@@ -916,7 +1133,7 @@ const arrayType = {
                     // eslint-disable-next-line object-shorthand -- TS
                     topRoot: /** @type {HTMLDivElement} */ (topRoot)
                   }); // Needed
-                } catch (err) {}
+                } catch {}
               },
 
               /**
@@ -943,12 +1160,12 @@ const arrayType = {
                 * })[]}
                 */
                   (/**
-                   * @type {HTMLInputElement & {
-                   *   $arrayItems: HTMLDivElement & {
-                   *     $getPropertyInputs: GetPropertyInputs
-                   *   }
-                   * }}
-                   */ (
+                  * @type {HTMLInputElement & {
+                  *   $arrayItems: HTMLDivElement & {
+                  *     $getPropertyInputs: GetPropertyInputs
+                  *   }
+                  * }}
+                  */ (
                       this
                     ).$arrayItems.$getPropertyInputs());
                 if (inputs.length === 1) {
@@ -1051,6 +1268,34 @@ const arrayType = {
               }
             },
             $on: {
+              /**
+               * @this {HTMLInputElement}
+               */
+              input () {
+                if (!specificSchemaObject && !schema) {
+                  return;
+                }
+                const propHolder = /** @type {HTMLElement} */ (
+                  $e(arrayItems, `.${className}_propertyHolder${
+                    this.dataset.optionalPropertyId
+                  }`)
+                );
+                DOM.removeChildren(propHolder);
+                jml('b', [
+                  /** @type {import('zodex').SzObject} */
+                  (specificSchemaObject)?.properties?.[
+                    this.value
+                  ]
+                    ? /** @type {import('zodex').SzObject} */ (
+                      specificSchemaObject
+                    )?.properties?.[
+                      this.value
+                    ]?.description ?? this.value
+                    : /** @type {import('zodex').SzObject} */ (
+                      specificSchemaObject
+                    )?.catchall?.description ?? this.value
+                ], propHolder);
+              },
               /**
                * @param {Event} e
                * @this {HTMLInputElement & {
@@ -1059,7 +1304,86 @@ const arrayType = {
                * }}
                */
               change (e) {
-                this.$validate();
+                const neverProperty = /** @type {import('zodex').SzObject} */ (
+                  specificSchemaObject
+                )?.properties?.[
+                /** @type {string} */ (this.value)
+                ]?.type === 'never';
+
+                let invalid = false;
+                if (neverProperty) {
+                  this.setCustomValidity('Never value');
+                  this.reportValidity();
+                  this.style.backgroundColor = 'pink';
+
+                  invalid = true;
+                } else if (this.list && !parentTypeObject.array) {
+                  const dataListValues = [
+                    ...this.list.options
+                  ].map(({value}) => value);
+
+                  if (
+                    !dataListValues.includes(this.value) &&
+                    /** @type {import('zodex').SzObject} */ (
+                      specificSchemaObject
+                    ).unknownKeys === 'strict'
+                  ) {
+                    this.setCustomValidity('Bad value');
+                    this.reportValidity();
+                    this.style.backgroundColor = 'pink';
+                    invalid = true;
+                  } else {
+                    this.style.backgroundColor = 'revert-layer';
+                    this.setCustomValidity('');
+                    this.reportValidity();
+                    const {optionalPropertyId} = this.dataset;
+                    let placeholder = /** @type {HTMLElement} */ (
+                      $e(
+                        arrayItems,
+                        `.optionalProperties-placeholder${optionalPropertyId}`
+                      )
+                    );
+                    if (!placeholder) {
+                      placeholder = /** @type {HTMLElement} */ ($e(
+                        /** @type {HTMLElement} */
+                        (this.parentElement?.parentElement),
+                        `.property-placeholder`
+                      )?.previousElementSibling);
+                      // Remove extra select element too
+                      placeholder.previousElementSibling?.remove();
+                    }
+                    placeholder.replaceWith(
+                      jml('div', {
+                        className:
+                          `optionalProperties-placeholder${optionalPropertyId}`
+                      }, [
+                        ...buildTypeChoicesForProperty({
+                          propName: this.value,
+                          schema:
+                          /** @type {import('zodex').SzObject} */
+                          (specificSchemaObject)?.properties?.[this.value] ??
+                          /** @type {import('zodex').SzObject} */ (
+                            specificSchemaObject
+                          )?.catchall ??
+                          {type: 'any'}
+                        })
+                      ])
+                    );
+                  }
+                }
+
+                if (invalid) {
+                  const placeholder = /** @type {HTMLElement} */ (
+                    $e(
+                      arrayItems,
+                      `.optionalProperties-placeholder${optionalPropertyId}`
+                    )
+                  );
+                  DOM.removeChildren(placeholder);
+                } else {
+                  // Should this be awaited or awaited after stopPropagation?
+                  this.$validate();
+                }
                 // We don't want form `onchange` to run
                 //   `$checkForKeyDuplicates` again
                 e.stopPropagation();
@@ -1070,13 +1394,34 @@ const arrayType = {
           }]
         ]]);
       }
+
+      const fileDesc = /** @type {import('zodex').SzEffect} */ (
+        specificSchemaObject
+      )?.inner?.description;
+
       return /** @type {import('jamilih').JamilihArray} */ (['legend', [
-        'Item ',
+        elementDesc
+          ? ''
+          : fileDesc
+            ? `${fileDesc} `
+            : schema?.description
+              ? `${schema?.description} `
+              : type === 'tuple' && /** @type {import('zodex').SzTuple} */ (
+                specificSchemaObject
+              )?.rest?.description
+                ? `${/** @type {import('zodex').SzTuple} */ (
+                  specificSchemaObject
+                )?.rest?.description} `
+                : 'Item ',
         ['span', {
           dataset: {prop: true, array: true},
           className
         }, [
-          propName !== undefined ? propName : String(itemIndex)
+          elementDesc
+            ? `${elementDesc} ${itemIndex + 1}`
+            : propName !== undefined
+              ? propName
+              : String(itemIndex)
         ]]
       ]]);
     };
@@ -1104,26 +1449,155 @@ const arrayType = {
       }
     };
 
+    /**
+     * @param {{
+     *   propName: string|undefined,
+     *   schema?: import('zodex').SzType,
+     *   schemaIdx?: number,
+     *   autoTrigger?: boolean
+     * }} cfg
+     */
+    const buildTypeChoicesForProperty = ({
+      propName, schema, schemaIdx, autoTrigger
+    }) => {
+      return /** @type {import('../typeChoices.js').BuildTypeChoices} */ (
+        buildTypeChoices
+      )({
+        autoTrigger,
+        // resultType,
+        // eslint-disable-next-line object-shorthand -- TS
+        topRoot: /** @type {HTMLDivElement} */ (topRoot),
+        // eslint-disable-next-line object-shorthand -- TS
+        format: /** @type {import('../formats.js').AvailableFormat} */ (format),
+        schemaOriginal: schemaContent,
+        schemaIdx,
+        schemaContent: schema || type === 'tuple'
+          ? (schema ?? /** @type {import('zodex').SzTuple} */ (
+            specificSchemaObject
+          ).rest)
+          : mapProperties
+            // Can also be a `Record`
+            ? /** @type {import('zodex').SzMap<any, any>} */ (
+              specificSchemaObject
+            )?.value
+            : type === 'set'
+              ? /** @type {import('zodex').SzSet} */ (
+                specificSchemaObject
+              )?.value
+              : type === 'filelist'
+                ? /** @type {import('zodex').SzEffect} */ (
+                  specificSchemaObject
+                )?.inner
+                : type === 'array' || type === 'arrayNonindexKeys'
+                  ? /** @type {import('zodex').SzArray} */ (
+                    specificSchemaObject
+                  )?.element
+                  : /** @type {import('zodex').SzObject} */ (
+                    specificSchemaObject
+                  )?.properties?.[/** @type {string} */ (propName)],
+        state: parentTypeObject.filelist
+          ? 'filelistArray'
+          : forcedState ?? type,
+        // itemIndex,
+        typeNamespace
+      }).domArray;
+    };
+
+    /**
+     * @param {Integer} [offset]
+     * @returns {boolean}
+     */
+    function preventAdding (offset = 0) {
+      switch (type) {
+      case 'tuple':
+        if (/** @type {import('zodex').SzTuple} */ (
+          specificSchemaObject
+        )?.rest?.type === 'never') {
+          dialogs.alert(
+            'Tuple has rest type "never", so one cannot add to it.'
+          );
+          return true;
+        }
+        if (
+          /** @type {import('zodex').SzTuple} */ (
+            specificSchemaObject
+          )?.items?.[0]?.type === 'never'
+        ) {
+          dialogs.alert(
+            'Tuple has items type "never", so one cannot add to it.'
+          );
+          return true;
+        }
+        break;
+      case 'set': {
+        if (/** @type {import('zodex').SzSet} */ (
+          specificSchemaObject
+        )?.value?.type === 'never') {
+          dialogs.alert('Set has type "never", so one cannot add to it.');
+          return true;
+        }
+
+        const {maxSize} = /** @type {import('zodex').SzSet} */ (
+          specificSchemaObject
+        ) ?? {};
+        if (maxSize !== undefined &&
+          [...arrayItems.children].length + offset > maxSize
+        ) {
+          dialogs.alert(`You cannot add beyond the \`maxSize\` of the Set`);
+          return true;
+        }
+        break;
+      } case 'array': case 'arrayNonindexKeys': {
+        if (/** @type {import('zodex').SzArray} */ (
+          specificSchemaObject
+        )?.element?.type === 'never') {
+          dialogs.alert('Array has type "never", so one cannot add to it.');
+          return true;
+        }
+
+        const {maxLength} = /** @type {import('zodex').SzArray} */ (
+          specificSchemaObject
+        ) ?? {};
+
+        if (maxLength !== undefined &&
+          arrayItems.$getArrayLength() + offset > maxLength
+        ) {
+          dialogs.alert(`You cannot add beyond the \`maxLength\` of the array`);
+          return true;
+        }
+        break;
+      } default:
+        break;
+      }
+
+      return false;
+    }
+
     /**
      * @callback AddArrayElement
      * @param {{
      *   propName?: string,
      *   splice?: "append"|number,
      *   alwaysFocus?: true
+     *   required?: true
+     *   autoTrigger?: boolean,
+     *   schema?: import('zodex').SzType,
+     *   schemaIdx?: number
      * }} cfg
      * @returns {void}
      */
 
     /**
      * @type {AddArrayElement}
-     * @this {HTMLButtonElement & {
+     * @this {HTMLElement & {
      *   $getArrayItems: GetArrayItems,
      *   $addArrayElement: AddArrayElement,
      *   $getMapKeySelects?: GetMapKeySelects
      * }}
      */
-    const $addArrayElement = function ({propName, splice, alwaysFocus}) {
-      // console.log('propName', propName);
+    const $addArrayElement = function ({
+      propName, splice, alwaysFocus, required, schema, schemaIdx, autoTrigger
+    }) {
       const arrayItems = this.$getArrayItems();
       if (sparse) {
         if (propName) {
@@ -1150,180 +1624,230 @@ const arrayType = {
       } else {
         itemIndex++;
       }
-      const thisButton = this; // eslint-disable-line consistent-this
+      const thisButton = this; // eslint-disable-line consistent-this -- Clarity
       const className = `${type}Item`;
-      const fieldset =
-        /** @type {HTMLFieldSetElement} */ (
-          jml('fieldset',
-            {
-              $on: {
-                change: [() => {
-                  if (type !== 'set') {
-                    return;
-                  }
-                  setTimeout(() => {
-                    const root = div;
-                    const values = /** @type {any[]} */ (
-                      parentTypeObject.getValue.call({
-                        ...parentTypeObject,
-                        set: false
-                      }, {
-                        root,
-                        stateObj: {
-                          types,
-                          // eslint-disable-next-line object-shorthand -- TS
-                          formats:
-                          /** @type {import('../formats.js').default} */ (
-                            formats
-                          )
-                        }
-                      })
-                    );
-                    // console.log('values', values);
-
-                    const dupeIndex = values.findLastIndex((value, idx) => {
-                      return values.some((val, index) => {
-                        return idx !== index && value === val;
-                      });
-                    });
-
-                    if (dupeIndex === -1) {
-                      return;
-                    }
-                    const fieldsets = arrayItems.children;
-                    const controls = [...fieldsets].map((fieldset) => {
-                      const root = /** @type {HTMLDivElement} */ (
-                        $e(fieldset, 'div[data-type]')
-                      );
-                      /* istanbul ignore if -- Should err first? */
-                      if (!root) {
-                        return null;
-                      }
-                      return types.getFormControlForRoot(root);
-                    });
-
-                    const control = controls[dupeIndex];
-                    /* istanbul ignore if -- Should exist */
-                    if (!control) {
-                      return;
+      const fieldset = jml('fieldset',
+        {
+          dataset: required ? {required: 'required'} : {},
+          $on: {
+            change: [() => {
+              if (type !== 'set') {
+                return;
+              }
+              setTimeout(() => {
+                const root = div;
+                const values = /** @type {any[]} */ (
+                  parentTypeObject.getValue.call({
+                    ...parentTypeObject,
+                    set: false
+                  }, {
+                    root,
+                    stateObj: {
+                      types,
+                      // eslint-disable-next-line object-shorthand -- TS
+                      formats:
+                      /** @type {import('../formats.js').default} */ (
+                        formats
+                      )
                     }
+                  })
+                );
+                // console.log('values', values);
 
-                    control.setCustomValidity(
-                      'Duplicate Set value'
-                    );
-                    control.reportValidity();
+                const dupeIndex = values.findLastIndex((value, idx) => {
+                  return values.some((val, index) => {
+                    return idx !== index && value === val;
                   });
-                }, true]
-              },
-              $custom: {
-                /** @type {GetPropertyInput} */
-                $getPropertyInput () {
-                  return /** @type {HTMLInputElement} */ (
-                    DOM.filterChildElements(
-                      /** @type {HTMLFieldSetElement} */ (this),
-                      ['legend', `input.propertyName-${typeNamespace}`]
-                    ).pop()
+                });
+
+                if (dupeIndex === -1) {
+                  return;
+                }
+                const fieldsets = arrayItems.children;
+                const controls = [...fieldsets].map((fieldset) => {
+                  const root = /** @type {HTMLDivElement} */ (
+                    $e(fieldset, 'div[data-type]')
                   );
+                  /* istanbul ignore if -- Should err first? */
+                  if (!root) {
+                    return null;
+                  }
+                  return types.getFormControlForRoot(root);
+                });
+
+                const control = controls[dupeIndex];
+                /* istanbul ignore if -- Should exist */
+                if (!control) {
+                  return;
                 }
-              }
-            },
-            [
-              buildLegend({
-                className,
-                splice,
-                itemIndex,
-                // type,
-                typeNamespace,
-                arrayItems,
-                propName
-              })
-            ],
-            arrayItems)
-        );
+
+                control.setCustomValidity(
+                  'Duplicate Set value'
+                );
+                control.reportValidity();
+              });
+            }, true]
+          },
+          $custom: {
+            /** @type {GetPropertyInput} */
+            $getPropertyInput () {
+              return /** @type {HTMLInputElement} */ (
+                DOM.filterChildElements(
+                  /**
+                   * @type {HTMLFieldSetElement & {
+                   *   $getPropertyInput: GetPropertyInput
+                   * }}
+                   */ (this),
+                  ['legend', `input.propertyName-${typeNamespace}`]
+                ).pop()
+              );
+            }
+          }
+        },
+        [
+          buildLegend({
+            className,
+            splice,
+            itemIndex,
+            // type,
+            typeNamespace,
+            arrayItems,
+            propName,
+            required,
+            schema
+          })
+        ],
+        arrayItems);
+
       // We must ensure fieldset is built before passing it
       jml({'#': [
-        ...(/** @type {import('../typeChoices.js').BuildTypeChoices} */ (
-          buildTypeChoices
-        )({
-          // resultType,
-          // eslint-disable-next-line object-shorthand -- TS
-          topRoot: /** @type {HTMLDivElement} */ (topRoot),
-          // eslint-disable-next-line object-shorthand, @stylistic/max-len -- TS
-          format: /** @type {import('../formats.js').AvailableFormat} */ (format),
-          state: parentTypeObject.filelist
-            ? 'filelistArray'
-            : arrayState ?? type,
-          // itemIndex,
-          typeNamespace
-        }).domArray),
+        ['span', {
+          class: 'mapValue',
+          title: type === 'map' &&
+          /** @type {import('zodex').SzMap<any, any>} */ (
+            specificSchemaObject
+          )?.value?.description
+            ? '(map value)'
+            : type === 'record' &&
+            /** @type {import('zodex').SzRecord} */ (
+              specificSchemaObject
+            )?.value?.description
+              ? '(record value)'
+              : undefined
+        }, [
+          type === 'map'
+            ? /** @type {import('zodex').SzMap<any, any>} */ (
+              specificSchemaObject
+            )?.value?.description ?? 'Map value'
+            : type === 'record'
+              ? /** @type {import('zodex').SzRecord} */ (
+                specificSchemaObject
+              )?.value?.description ?? 'Record value'
+              : '',
+          ' '
+        ]],
+        ...(specificSchemaObject && !propName && !parentTypeObject.array
+          ? [jml('span', {
+            className: `optionalProperties-placeholder${optionalPropertyId}`
+          })]
+          : buildTypeChoicesForProperty({
+            propName, schema, schemaIdx, autoTrigger
+          })),
+        ['span', {className: 'property-placeholder'}],
         nbsp.repeat(2),
-        ['button', {$on: {click (/** @type {Event} */ e) {
-          e.preventDefault();
-          // e.stopPropagation();
-          let splice;
-          if (sparse) {
-            const prevInputVal =
-              /**
-               * @type {HTMLInputElement & {
-               *   $parseInt: ParseInt
-               * }}
-               */ (
+        ['button', {
+          disabled: type === 'tuple' && required &&
+            // The last item of a tuple can have content after it, but earlier
+            //   items cannot
+            /** @type {import('zodex').SzTuple} */
+            (specificSchemaObject)?.items?.length - 1 > itemIndex,
+          $on: {click (/** @type {Event} */ e) {
+            e.preventDefault();
+            // e.stopPropagation();
+
+            if (preventAdding(1)) {
+              return;
+            }
+
+            /** @type {number | "append" | undefined} */
+            let splice;
+            if (sparse) {
+              const prevInputVal =
                 /**
-                 * @type {HTMLFieldSetElement & {
-                 *   $getPropertyInput: GetPropertyInput
+                 * @type {HTMLInputElement & {
+                 *   $parseInt: ParseInt
                  * }}
                  */ (
-                  fieldset
-                ).$getPropertyInput()).$parseInt();
-            splice = prevInputVal === false ? 'append' : prevInputVal;
-          }
-          thisButton.$addArrayElement({
-            splice, alwaysFocus: true
-          });
-          const newArrayFieldset =
-            /** @type {Element & {$getPropertyInput: GetPropertyInput}} */ (
-              arrayItems.lastElementChild
-            );
-          fieldset.after(newArrayFieldset);
-          if (sparse) {
-            const newPrevInput = /** @type {HTMLInputElement} */ (
-              newArrayFieldset.$getPropertyInput()
-            );
-            bringFocus(newPrevInput, true);
-          } else {
-            DOM.filterChildElements(
-              arrayItems, [
-                'fieldset', 'legend', '.' + className
-              ]
-            ).forEach((span, i) => {
-              span.textContent = String(i + itemAdjust);
+                  /**
+                   * @type {HTMLFieldSetElement & {
+                   *   $getPropertyInput: GetPropertyInput
+                   * }}
+                   */ (
+                    fieldset
+                  ).$getPropertyInput()).$parseInt();
+              splice = prevInputVal === false ? 'append' : prevInputVal;
+            }
+            thisButton.$addArrayElement({
+              splice, alwaysFocus: true, schema
             });
-          }
-          // Maybe not needed as addition (without renumbering)
-          //   wouldn't yet add type
-          types.validateAllReferences({
-            // eslint-disable-next-line object-shorthand -- TS
-            topRoot: /** @type {HTMLDivElement} */ (topRoot)
-          });
-          arrayItems.$redrawMoveArrows();
-        }}}, ['+']],
+            const newArrayFieldset =
+              /** @type {Element & {$getPropertyInput: GetPropertyInput}} */ (
+                arrayItems.lastElementChild
+              );
+            fieldset.after(newArrayFieldset);
+            if (sparse || (
+              // Because schemas (with descriptions?) don't use className for
+              //   property count (and the else block will rewrite the
+              //   property name)
+              (specificSchemaObject || schema) &&
+              !parentTypeObject.array
+            )) {
+              const newPrevInput = /** @type {HTMLInputElement} */ (
+                newArrayFieldset.$getPropertyInput()
+              );
+              bringFocus(newPrevInput, true);
+            } else {
+              DOM.filterChildElements(
+                arrayItems, [
+                  'fieldset', 'legend', '.' + className
+                ]
+              ).forEach((span, i) => {
+                span.textContent = elementDesc
+                  ? `${elementDesc} ${i + itemAdjust + 1}`
+                  : String(i + itemAdjust);
+              });
+            }
+            // Maybe not needed as addition (without renumbering)
+            //   wouldn't yet add type
+            types.validateAllReferences({
+              // eslint-disable-next-line object-shorthand -- TS
+              topRoot: /** @type {HTMLDivElement} */ (topRoot)
+            });
+            arrayItems.$redrawMoveArrows();
+          }}
+        }, ['+']],
         /**
          * @type {import('jamilih').JamilihArray}
          */
         ([
           'button',
           {
+            disabled: required,
             $on: {
               click (/** @type {Event} */ e) {
                 e.preventDefault();
                 // e.stopPropagation();
                 fieldset.remove();
                 decrementItemIndex(arrayItems);
-                if (!sparse) {
+                if (!sparse &&
+                  (!specificSchemaObject || parentTypeObject.array)
+                ) {
                   DOM.filterChildElements(arrayItems, [
                     'fieldset', 'legend', '.' + className
                   ]).forEach((span, i) => {
-                    span.textContent = String(i + itemAdjust);
+                    span.textContent = elementDesc
+                      ? `${elementDesc} ${i + itemAdjust + 1}`
+                      : String(i + itemAdjust);
                   });
                 }
                 // Maybe not needed as removal would remove circular
@@ -1346,6 +1870,7 @@ const arrayType = {
           class: `${type}Item-arrowHolder-${typeNamespace}`
         }, []]
       ]}, fieldset);
+
       // Need to validate if adding more than one property (in
       //   case two have empty string)
       if (editableProperties) {
@@ -1430,6 +1955,12 @@ const arrayType = {
           }
         },
         $on: {click () {
+          if (preventAdding(1)) {
+            return;
+          }
+
+          // Todo: Should really check if all object properties have been used,
+          //        and stop and warn if so
           /**
            * @type {HTMLButtonElement & {
            *   $addArrayElement: AddArrayElement,
@@ -1453,10 +1984,11 @@ const arrayType = {
           'Array length: ',
           ['input', {
             type: 'number',
-            value: (value && value.length) || 0,
+            value: (objectValue && objectValue.length) || 0,
             step: 1,
             size: 4,
-            pattern: '\\d',
+            class: 'arrayLength',
+            pattern: String.raw`\d`,
             $on: {
               /**
                * @this {HTMLInputElement & {
@@ -1465,6 +1997,11 @@ const arrayType = {
                * @returns {Promise<void>}
                */
               async change () {
+                if (preventAdding()) {
+                  this.value = this.$oldvalue ?? this.defaultValue;
+                  return;
+                }
+
                 const arrayItems = $e(
                   /** @type {HTMLElement} */ (
                     this.closest('.arrayContents')
@@ -1488,16 +2025,54 @@ const arrayType = {
                       const fieldset = /** @type {HTMLFieldSetElement} */ (
                         input.closest('fieldset')
                       );
-                      fieldset.remove();
+                      if (!fieldset.matches('[data-required]')) {
+                        fieldset.remove();
+                      } else {
+                        // If not truncating the array, put the length back
+                        const arrayLengthInput =
+                          /**
+                           * @type {HTMLInputElement & {
+                           *   $oldvalue: string
+                           * }}
+                           */ (
+                            $e(div, '.arrayLength')
+                          );
+                        arrayLengthInput.value = String(Number.parseInt(
+                          arrayLengthInput.value
+                        ) + 1);
+                      }
                     });
                     // Maybe not needed as removal would remove circular
                     types.validateAllReferences({
                       // eslint-disable-next-line object-shorthand -- TS
                       topRoot: /** @type {HTMLDivElement} */ (topRoot)
                     });
+                  } else {
+                    const element = /** @type {import('zodex').SzArray} */ (
+                      specificSchemaObject
+                    )?.element;
+                    if (!['void', 'undefined'].includes(
+                      element?.type
+                    ) && (
+                      element?.type !== 'union' ||
+                      /** @type {import('zodex').SzUnion} */
+                      (element)?.options?.every((option) => {
+                        return !['void', 'undefined'].includes(option.type);
+                      })
+                    )) {
+                      const diff = Number.parseInt(this.value) -
+                        Number.parseInt(this.$oldvalue ?? this.defaultValue);
+                      for (let i = 0; i < diff; i++) {
+                        // Timeout needed by Cypress at least or will get
+                        //   validation triggered which prevents moving forward
+                        setTimeout(() => {
+                          div.$addArrayElement({});
+                        });
+                      }
+                    }
                   }
                   this.$oldvalue = this.value;
-                } catch (err) {
+                } catch {
                   this.value = this.$oldvalue; // Revert
                 }
               }
@@ -1507,47 +2082,50 @@ const arrayType = {
       ]]
       : '';
 
-    const arrayItems = ['div', {
-      class: 'arrayItems',
-      $custom: {
-        $swapGroup, $redrawMoveArrows, $getArrayLength,
-        $inputsExceedingLength,
+    const arrayItems =
+      /** @type {HTMLDivElement & {$getArrayLength: GetArrayLength}} */ (
+        jml('div', {
+          class: 'arrayItems',
+          $custom: {
+            $swapGroup, $redrawMoveArrows, $getArrayLength,
+            $inputsExceedingLength,
 
-        /**
-         * Only relevant for maps.
-         * @type {GetMapKeySelects}
-         * @this {HTMLDivElement}
-         */
-        $getMapKeySelects () {
-          const selects =
             /**
-             * @type {(HTMLSelectElement & {
-             *   $getValue: import('../typeChoices.js').GetValue}
-             * )[]}
-             */ (DOM.filterChildElements(
-              this,
-              [
-                'fieldset',
-                'legend:first-child',
-                'span.mapKey',
-                'select.typeChoices-key-type-choices-only'
-              ]
-            ));
-          return selects;
-        },
+             * Only relevant for maps.
+             * @type {GetMapKeySelects}
+             * @this {HTMLDivElement}
+             */
+            $getMapKeySelects () {
+              const selects =
+                /**
+                 * @type {(HTMLSelectElement & {
+                 *   $getValue: import('../typeChoices.js').GetValue}
+                 * )[]}
+                 */ (DOM.filterChildElements(
+                  this,
+                  [
+                    'fieldset',
+                    'legend:first-child',
+                    'span.mapKeyHolder',
+                    'select.typeChoices-key-type-choices-only'
+                  ]
+                ));
+              return selects;
+            },
 
-        /**
-         * @type {GetPropertyInputs}
-         * @this {HTMLDivElement}
-         */
-        $getPropertyInputs () {
-          return /** @type {HTMLInputElement[]} */ (DOM.filterChildElements(
-            this,
-            ['fieldset', 'legend', `input.propertyName-${typeNamespace}`]
-          ));
-        }
-      }
-    }];
+            /**
+             * @type {GetPropertyInputs}
+             * @this {HTMLDivElement}
+             */
+            $getPropertyInputs () {
+              return /** @type {HTMLInputElement[]} */ (DOM.filterChildElements(
+                this,
+                ['fieldset', 'legend', `input.propertyName-${typeNamespace}`]
+              ));
+            }
+          }
+        })
+      );
 
     const minusButton = ['button', {$on: {click (/** @type {Event} */ e) {
       e.preventDefault();
@@ -1576,7 +2154,7 @@ const arrayType = {
               $e(/** @type {HTMLElement} */ (arrayContents), '.arrayItems')
             );
           const lastElement = arrayItems.lastElementChild;
-          if (lastElement) {
+          if (lastElement && !lastElement.matches('[data-required]')) {
             lastElement.remove();
             decrementItemIndex(arrayItems);
             // eslint-disable-next-line @stylistic/max-len -- Long
@@ -1592,15 +2170,25 @@ const arrayType = {
         }}}, ['- Last item']],
         // We could only add this when there was more than one
         ['button', {$on: {click () {
+          const arrayContents = /** @type {HTMLElement} */ (
+            /** @type {HTMLElement} */ (this).closest('.arrayContents')
+          );
           const arrayItems =
             // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$getPropertyInputs: GetPropertyInputs}} */ ($e(
-              /** @type {HTMLElement} */ (
-                /** @type {HTMLElement} */ (this).closest('.arrayContents')
-              ),
+              arrayContents,
               '.arrayItems'
             ));
-          DOM.removeChildren(arrayItems);
+
+          const optionalFieldsetItems = $$e(
+            arrayContents,
+            '.arrayItems > fieldset:not([data-required])'
+          );
+
+          for (const optionalFieldsetItem of optionalFieldsetItems) {
+            optionalFieldsetItem.remove();
+          }
+
           if (sparse) {
             decrementItemIndex(arrayItems);
           } else {
@@ -1617,159 +2205,279 @@ const arrayType = {
 
     const parentType = type;
 
-    // eslint-disable-next-line @stylistic/max-len -- Long
-    const div = /** @type {HTMLDivElement & {$addAndSetArrayElement: import('../formats/structuredCloning.js').AddAndSetArrayElement}} */ (
-      jml('div', /** @type {import('jamilih').JamilihAttributes} */ ({
-        dataset: {type},
-        // is: 'array-or-object-editor',
-        $custom: {
-          // eslint-disable-next-line @stylistic/max-len -- Long
-          /** @type {import('../formats/structuredCloning.js').AddAndSetArrayElement} */
-          $addAndSetArrayElement ({
-            propName, type, value, bringIntoFocus, setAValue
-            // , schemaContent, schemaState
-          }) {
-            if (parentType === 'map') {
-              if (propName === '0') {
-                this.$addArrayElement({propName});
-                const arrayItems = this.$getArrayItems();
-                const keyTypeChoices = /**
-                 * @type {HTMLSelectElement & {
-                 *   $setType: import('../typeChoices.js').SetType,
-                 *   $getTypeRoot: import('../formatAndTypeChoices.js').
-                 *     TypeRootGetter
-                 * }}
-                */ (DOM.filterChildElements(
-                    arrayItems,
-                    ['fieldset:last-of-type', 'legend', '.mapKey', 'select']
-                  )[0]);
-                keyTypeChoices.$setType({
-                  type, baseValue: value, bringIntoFocus
-                });
+    const div =
+      /**
+       * @type {HTMLDivElement & {
+       *   $addAndSetArrayElement:
+       *     import('../formats/structuredCloning.js').AddAndSetArrayElement,
+       *   $addArrayElement: AddArrayElement
+       *   $getArrayItems: GetArrayItems,
+       *   $getMapKeySelects?: GetMapKeySelects
+       * }}
+       */ (
+        jml('div', /** @type {import('jamilih').JamilihAttributes} */ ({
+          dataset: {type},
+          // is: 'array-or-object-editor',
+          $custom: {
+            // eslint-disable-next-line @stylistic/max-len -- Long
+            /** @type {import('../formats/structuredCloning.js').AddAndSetArrayElement} */
+            $addAndSetArrayElement ({
+              propName, type, value, bringIntoFocus, setAValue,
+              schemaContent: schema, schemaIdx, mustBeOptional
+            }) {
+              if (parentType === 'map') {
+                if (propName === '0') {
+                  this.$addArrayElement({
+                    propName,
+                    // At least needed when value supplied
+                    autoTrigger: false
+                  });
+                  const arrayItems = this.$getArrayItems();
+                  const keyTypeChoices = /**
+                  * @type {HTMLSelectElement & {
+                  *   $setType: import('../typeChoices.js').SetType,
+                  *   $getTypeRoot: import('../formatAndTypeChoices.js').
+                  *     TypeRootGetter
+                  * }}
+                  */ (DOM.filterChildElements(
+                      arrayItems,
+                      [
+                        'fieldset:last-of-type', 'legend',
+                        '.mapKeyHolder', 'select'
+                      ]
+                    )[0]);
+                  keyTypeChoices.$setType({
+                    type, baseValue: value, bringIntoFocus,
+                    avoidReport: true
+                  });
 
-                // The key may itself be a map, etc.
-                return keyTypeChoices.$getTypeRoot();
+                  // The key may itself be a map, etc.
+                  return keyTypeChoices.$getTypeRoot();
+                }
+              } else if (parentType === 'record') {
+                this.$addArrayElement({
+                  propName, autoTrigger: false,
+                  required: false
+                });
+              } else {
+                // console.log('SCHEMA123', schema);
+                this.$addArrayElement({
+                  propName, schema, autoTrigger: false,
+                  schemaIdx,
+                  required: !mustBeOptional && schema && !schema.isOptional &&
+                    schema.type !== 'never'
+                });
               }
-            } else {
-              this.$addArrayElement({propName});
-            }
-            const typeChoices = this.$getTypeChoices();
-            typeChoices.$setType({type, baseValue: value, bringIntoFocus});
-            const root = typeChoices.$getTypeRoot();
-            // If run for all, causes problems with running `Error.cause`
-            //   type twice and is inefficient;
-            //   currently put behind `setAValue` as we need to set a value
-            //   from `errorsSpecialType` (and `filelistType`)
-            if (setAValue) {
-              const typeObj = /** @type {import('../types.js').TypeObject} */ (
-                types.getTypeObject(type)
-              );
-              if (typeObj.setValue) {
-                typeObj.setValue({root, value});
+              const typeChoices = this.$getTypeChoices();
+              typeChoices.$setType({
+                type, baseValue: value, bringIntoFocus,
+                avoidReport: true
+              });
+              const root = typeChoices.$getTypeRoot();
+              // If run for all, causes problems with running `Error.cause`
+              //   type twice and is inefficient;
+              //   currently put behind `setAValue` as we need to set a value
+              //   from `errorsSpecialType` (and `filelistType`)
+              if (setAValue) {
+                const typeObj =
+                  /** @type {import('../types.js').TypeObject} */ (
+                    types.getTypeObject(type)
+                  );
+                if (typeObj.setValue) {
+                  typeObj.setValue({root, value});
+                }
               }
-            }
-            types.validate({type, root, topRoot});
-            return root;
-          },
+              types.validate({
+                type, root, topRoot,
+                // We don't want focus when values auto-added
+                avoidReport: true
+              });
+              return root;
+            },
 
-          /**
-           * @typedef {() => Element} GetAddArrayElement
-           */
+            /**
+             * @typedef {() => Element} GetAddArrayElement
+             */
 
-          /** @type {GetAddArrayElement} */
-          $getAddArrayElement () {
-            const el = this.
-              lastElementChild.firstElementChild.nextElementSibling;
-            return sparse ? el.nextElementSibling : el;
-          },
-          /**
-           * @type {AddArrayElement}
-           * @this {HTMLDivElement & {
-           *   $getAddArrayElement: GetAddArrayElement
-           * }}
-           */
-          // @ts-ignore TS is apparently getting wrong $addArrayElement
-          $addArrayElement ({propName, splice, alwaysFocus}) {
-            const addArrayElement = this.$getAddArrayElement();
+            /** @type {GetAddArrayElement} */
+            $getAddArrayElement () {
+              const el = this.
+                lastElementChild.firstElementChild.nextElementSibling;
+              return sparse ? el.nextElementSibling : el;
+            },
             /**
-             * @type {HTMLButtonElement & {
-             *   $addArrayElement: AddArrayElement,
-             *   $getArrayItems: GetArrayItems
+             * @type {AddArrayElement}
+             * @this {HTMLDivElement & {
+             *   $getAddArrayElement: GetAddArrayElement
              * }}
              */
-            (addArrayElement).$addArrayElement({propName, splice, alwaysFocus});
-          },
-          $getArrayItems () {
-            const addArrayElement = this.$getAddArrayElement();
-            return addArrayElement.previousElementSibling;
+            // @ts-expect-error TS is apparently getting wrong $addArrayElement
+            $addArrayElement ({
+              propName, splice, alwaysFocus, required, schema, schemaIdx,
+              autoTrigger
+            }) {
+              const addArrayElement = this.$getAddArrayElement();
+              /**
+               * @type {HTMLButtonElement & {
+               *   $addArrayElement: AddArrayElement,
+               *   $getArrayItems: GetArrayItems
+               * }}
+               */
+              (addArrayElement).$addArrayElement({
+                propName, splice, alwaysFocus, required, schema,
+                schemaIdx,
+                autoTrigger
+              });
+            },
+            $getArrayItems () {
+              const addArrayElement = this.$getAddArrayElement();
+              return addArrayElement.previousElementSibling;
+            },
+            $getTypeChoices () {
+              const arrayItems = this.$getArrayItems();
+              return $e(
+                arrayItems.lastElementChild,
+                `fieldset > .typeChoices-${typeNamespace}` // Avoid keys
+              );
+            }
           },
-          $getTypeChoices () {
-            const arrayItems = this.$getArrayItems();
-            return $e(
-              arrayItems.lastElementChild,
-              `fieldset > .typeChoices-${typeNamespace}` // Avoid keys
-            );
-          }
-        },
-        $on: {
-          click (ev) {
-            const e = /** @type {Event} */ (ev);
-            // eslint-disable-next-line prefer-destructuring -- TS
-            const target = /** @type {HTMLInputElement} */ (e.target);
-
-            // We needed to stop preventing the default for the
-            //    invalid date checkbox; is this sufficient to prevent
-            //    other stray clicks apparently meant for the array
-            //    and object reference checking?
-            if (![
-              'checkbox', 'radio', 'file',
-              'datetime-local',
-              // For label radio clicks
-              undefined
-            ].includes(target.type)) {
-              e.preventDefault();
+          $on: {
+            click (ev) {
+              const e = /** @type {Event} */ (ev);
+              // eslint-disable-next-line prefer-destructuring -- TS
+              const target = /** @type {HTMLInputElement} */ (e.target);
+
+              // We needed to stop preventing the default for the
+              //    invalid date checkbox; is this sufficient to prevent
+              //    other stray clicks apparently meant for the array
+              //    and object reference checking?
+              if (![
+                'checkbox', 'radio', 'file',
+                'datetime-local',
+                // For label radio clicks
+                undefined
+              ].includes(target.type)) {
+                e.preventDefault();
+              }
             }
           }
-        }
-      }), /** @type {import('jamilih').JamilihChildren} */ ([
-        DOM.initialCaps(
-          /** @type {import('../types.js').AvailableType} */
-          (type)
-        ).replace(/s$/u, ''), nbsp.repeat(2),
-        type === 'filelist'
-          ? ['input', {
-            name: typeNamespace + '-filelist',
-            multiple: true,
-            type: 'file',
-            $on: {
-              /**
-               * @this {HTMLInputElement}
-               */
-              change () {
-                /* istanbul ignore if */
-                if (!this.files) {
-                  return;
-                }
-                for (let i = 0; i < this.files.length; i++) {
-                  const file = this.files.item(i);
-
-                  div.$addAndSetArrayElement({
-                    propName: String(i),
-                    type: 'file',
-                    value: file,
-                    bringIntoFocus: false,
-                    setAValue: true
-                  });
+        }), /** @type {import('jamilih').JamilihChildren} */ ([
+          [specificSchemaObject ? 'span' : 'b', {
+            title: specificSchemaObject?.description ?? (DOM.initialCaps(
+              /** @type {import('../types.js').AvailableType} */
+              (type)
+            ).replace(/s$/u, ''))
+          }, [
+            specificSchemaObject
+              ? '—'
+              : DOM.initialCaps(
+                /** @type {import('../types.js').AvailableType} */
+                (type)
+              ).replace(/s$/u, '')
+          ]],
+          nbsp.repeat(2),
+          type === 'filelist'
+            ? ['input', {
+              name: typeNamespace + '-filelist',
+              multiple: true,
+              type: 'file',
+              $on: {
+                /**
+                 * @this {HTMLInputElement}
+                 */
+                change () {
+                  /* istanbul ignore if */
+                  if (!this.files) {
+                    return;
+                  }
+                  for (let i = 0; i < this.files.length; i++) {
+                    const file = this.files.item(i);
+
+                    div.$addAndSetArrayElement({
+                      propName: String(i),
+                      type: 'file',
+                      value: file,
+                      bringIntoFocus: false,
+                      setAValue: true
+                    });
+                  }
                 }
               }
-            }
-          }]
-          : '',
-        minusButton,
-        arrayContents
-      ]))
-    );
+            }]
+            : '',
+          minusButton,
+          arrayContents
+        ]))
+      );
     topRoot = topRoot || div;
+
+    if (!objectValue && specificSchemaObject) {
+      switch (type) {
+      case 'object': {
+        // See comment referencing `arrayType.js` in `typeChoices.js`
+        if (!schemaFallingBack) {
+          for (const [prop, val] of
+            Object.entries(
+              /** @type {import('zodex').SzObject} */ (
+                specificSchemaObject
+              ).properties ?? {}
+            )
+          ) {
+            if (!val.isOptional && val.type !== 'never') {
+              div.$addArrayElement({propName: prop, required: true});
+            }
+          }
+        }
+        break;
+      }
+      case 'tuple': {
+        // See comment referencing `arrayType.js` in `typeChoices.js`
+        if (!schemaFallingBack) {
+          const specificSchemaObj = /** @type {import('zodex').SzTuple} */ (
+            specificSchemaObject
+          );
+          if (
+            /** @type {import('zodex').SzTuple} */ (
+              specificSchemaObject
+            )?.items?.[0]?.type !== 'never'
+          ) {
+            for (const schema of specificSchemaObj.items) {
+              div.$addArrayElement({schema, required: true});
+            }
+          }
+        }
+        break;
+      } case 'array': case 'arrayNonindexKeys': {
+        const {minLength = 0} = /** @type {import('zodex').SzArray} */ (
+          specificSchemaObject
+        ) ?? {};
+        const arrayLengthInput =
+          /** @type {HTMLInputElement & {$oldvalue: string}} */ (
+            $e(div, '.arrayLength')
+          );
+        arrayLengthInput.value = String(minLength);
+        arrayLengthInput.$oldvalue = String(minLength);
+
+        for (let i = 0; i < minLength; i++) {
+          div.$addArrayElement({required: true});
+        }
+        break;
+      } case 'set': {
+        // See comment referencing `arrayType.js` in `typeChoices.js`
+        if (!schemaFallingBack) {
+          const {minSize = 0} = /** @type {import('zodex').SzSet} */ (
+            specificSchemaObject
+          ) ?? {};
+          for (let i = 0; i < minSize; i++) {
+            div.$addArrayElement({required: true});
+          }
+        }
+        break;
+      } default:
+        break;
+      }
+    }
+
     return [div];
   }
 };