@es-joy/jsoe 0.24.2 → 0.25.0

package/src/fundamentalTypes/arrayType.js

@@ -1,15 +1,32 @@
 import {jml, nbsp} from '../vendor-imports.js';
 
 import {getPropertyValueFromLegend} from '../types.js';
+import {recordKeyConforms} from '../formats/schema.js';
 import {$e, $$e, U, DOM} from '../utils/templateUtils.js';
+import {
+  schemaLabel, lastTypeChild, deprecatedClassSuffix
+} from '../utils/schemaMeta.js';
 import dialogs from '../utils/dialogs.js';
 import {
   resolveJSONPointer, getJSONPointerParts, reduceJSONPointerParts
 } from '../utils/jsonPointer.js';
 import FileList from '../utils/FileList.js';
+import {isUnionLike} from '../utils/types.js';
 
 let optionalPropertyId = 0;
 
+/**
+ * @callback AddAndSetArrayElement
+ * @param {{
+ *   propName: string,
+ *   type: import('../types.js').AvailableType,
+ *   value: import('../formats.js').StructuredCloneValue,
+ *   bringIntoFocus: boolean,
+ *   schemaContent: import('../formats/schema.js').ZodexSchema,
+ * }} cfg
+ * @returns {Element}
+ */
+
 /**
  * @typedef {number} Integer
  */
@@ -111,14 +128,11 @@ const arrayType = {
     const state = sparse
       ? 'arrayNonindexKeys'
     // ? 'sparseArrays'
-      : (this.array && !this.record ? 'array' : 'object');
+      : (this.array ? 'array' : 'object');
     /** @type {{[key: (string|number)]: any}} */
-    const retObj = this.array && !this.record ? [] : {};
+    const retObj = this.array ? [] : {};
     /* istanbul ignore next -- Unreachable? */
-    let stringVal = innerContents !== undefined
-      ? innerContents
-      /* istanbul ignore next -- Unreachable? */
-      : s;
+    let stringVal = innerContents;
 
     /**
      * @param {boolean} beginOnly
@@ -141,7 +155,7 @@ const arrayType = {
       }
       return false;
     };
-    if (this.array && !this.record) {
+    if (this.array) {
       let idx = 0;
       const parse = () => {
         if (!stringVal) {
@@ -190,6 +204,7 @@ const arrayType = {
           : this.map
             ? new Map(/** @type {Array<any>} */ (retObj))
             : this.filelist
+              // @ts-expect-error -- Virtual API
               ? new FileList(retObj)
               : retObj,
         remnant: stringVal
@@ -212,7 +227,12 @@ const arrayType = {
         return;
       }
       const [, prop, propHadQuotes] = propAndColon;
-      const pr = prop !== undefined ? prop : propHadQuotes;
+      // `prop` (the unquoted-key alternative) is either a non-empty string or
+      //   `undefined`; when it did not match, the key came in quoted and its
+      //   text (possibly `''`) is in `propHadQuotes`. A `prop !== ''` test
+      //   wrongly lets `undefined` through, so a quoted key like `"c"` becomes
+      //   the string `"undefined"`.
+      const pr = prop ?? propHadQuotes;
       stringVal = stringVal.slice(propAndColon[0].length);
       let v, beginOnly, assign;
       try {
@@ -232,7 +252,6 @@ const arrayType = {
       }
       // console.log('vvv', stringVal, beginOnly, v);
       if (assign) {
-        // eslint-disable-next-line @stylistic/max-len -- Long
         /** @type {{[key: string]: import('../formats.js').StructuredCloneValue}} */ (
           retObj
         )[pr] = v;
@@ -259,21 +278,32 @@ const arrayType = {
        *   $getMapKeySelects: GetMapKeySelects
        * }}
        */ ($e(root, '.arrayItems'));
+    /* istanbul ignore if -- Async guard */
+    if (!arrayItems) {
+      // The `.arrayItems` container may not exist yet if `getValue` is
+      //   reached (e.g. via a synchronous `validate`) before an async
+      //   `setValue` has finished building the UI.
+      throw new Error('Not yet instantiated');
+    }
     const fieldsets = [...arrayItems.children];
 
+    // A `record` schema renders through the `object` type but, like a `Map`,
+    //   builds its entries from key-type selectors; it is flagged on the root.
+    const isRecord = root.dataset.record === 'true';
+
     /**
      * @type {({[key: string]: any})|any[]}
      */
-    const ret = root.dataset.type === 'object'
+    const ret = !isRecord && root.dataset.type === 'object'
       ? {}
       : !this.sparse
         ? []
-        : Array.from({length: Number.parseInt(
+        : Array.from({length: Math.trunc(Number(
           /** @type {HTMLInputElement} */ (DOM.filterChildElements(
             root,
             ['div', 'div', 'label', 'input']
           )[0]).value
-        )});
+        ))});
 
     // Todo: Should this be renamed per return arguments to
     //   `getRefOrVal` or is it ok?
@@ -359,6 +389,7 @@ const arrayType = {
       );
     }
     return this.filelist
+      // @ts-expect-error -- Virtual API
       ? new FileList(ret)
       : this.set && Array.isArray(ret)
         ? new Set(ret)
@@ -367,13 +398,11 @@ const arrayType = {
             const key = select.$getValue();
             return [key, /** @type {any[]} */ (ret)[idx]];
           }))
-          : this.record
+          : isRecord
             ? arrayItems.$getMapKeySelects().reduce((obj, select, idx) => {
               const key = select.$getValue();
-              const val = /** @type {any[]} */ (ret)[idx];
-              obj[key] = val;
+              obj[key] = /** @type {any[]} */ (ret)[idx];
               // Todo: Reenable for native enums
-              // The nature of native enums
               // if (typeof val === 'number') {
               //   obj[val] = key;
               // }
@@ -392,6 +421,12 @@ const arrayType = {
 
     const parentType = type;
 
+    // `record`/`tuple` are not distinct types; they are `object`/`array` whose
+    //   associated schema refines them. Detect the refinement from the schema.
+    const recordMode = specificSchemaObject?.type === 'record' ||
+      specificSchemaObject?.type === 'looseRecord';
+    const tupleMode = specificSchemaObject?.type === 'tuple';
+
     /**
      * @param {{
      *   itemIndex: number,
@@ -404,67 +439,83 @@ const arrayType = {
       /* className, type, arrayItems, */
       itemIndex, typeNamespace, propName
     }) => {
-      const tupleItem = /** @type {import('zodex').SzTuple} */ (
+      const tupleItem = /** @type {import('zodexy').SzTuple} */ (
         specificSchemaObject
       )?.items?.[itemIndex];
-      const restItem = /** @type {import('zodex').SzTuple} */ (
+      const restItem = /** @type {import('zodexy').SzTuple} */ (
         specificSchemaObject
       )?.rest;
       return ['legend', [
-        this.array && type !== 'record'
-          ? /** @type {import('zodex').SzArray} */ (
+        !recordMode && this.array
+          ? schemaLabel(/** @type {import('zodexy').SzArray} */ (
             specificSchemaObject
-          )?.element?.description ??
-            ((type === 'set' && /** @type {import('zodex').SzSet} */ (
+          )?.element) ??
+            ((type === 'set' && schemaLabel(/** @type {import('zodexy').SzSet} */ (
               specificSchemaObject
-            )?.value?.description)
-              ? /** @type {import('zodex').SzSet} */ (
+            )?.value))
+              ? schemaLabel(/** @type {import('zodexy').SzSet} */ (
                 specificSchemaObject
-              )?.value?.description
+              )?.value)
               : (
-                tupleItem?.description ?? restItem?.description
+                schemaLabel(tupleItem) ?? schemaLabel(restItem)
               )) ?? 'Item'
           : specificSchemaObject ? '' : 'Property',
         specificSchemaObject ? '' : ':',
         nbsp.repeat(2),
         ['span', {
           class: `propertyName-${typeNamespace}`,
-          title: type === 'record' && /** @type {import('zodex').SzRecord} */ (
+          title: recordMode && schemaLabel(/** @type {import('zodexy').SzRecord} */ (
             specificSchemaObject
-          )?.key?.description
-            ? /** @type {import('zodex').SzRecord} */ (
+          )?.key)
+            ? schemaLabel(/** @type {import('zodexy').SzRecord} */ (
               specificSchemaObject
-            )?.key?.description
+            )?.key)
             : specificSchemaObject ? propName : undefined
         }, [
           propName !== undefined
-            ? /** @type {import('zodex').SzObject} */ (
+            ? schemaLabel(/** @type {import('zodexy').SzObject} */ (
               specificSchemaObject
-            )?.properties?.[propName]?.description ?? propName
-            // eslint-disable-next-line @stylistic/max-len -- Long
+            )?.properties?.[propName]) ?? propName
             /* istanbul ignore next -- Won't reach here as typeson will always give keypath? */
             : itemIndex
         ]]
       ]];
     };
-    const div = jml('div', /** @type {import('jamilih').JamilihAttributes} */ ({
+
+    /**
+     * @typedef {HTMLDivElement & {
+     *   $addAndSetArrayElement: AddAndSetArrayElement,
+     *   $addMapElement: () => HTMLFieldSetElement,
+     *   $addArrayElement: (cfg: {propName: string}) => HTMLFieldSetElement,
+     *   $getArrayItems: () => HTMLElement,
+     *   _lastFieldset?: HTMLFieldSetElement|null
+     * }} ArrayHolder
+     */
+
+    /**
+     * @callback AddMapElement
+     * @returns {HTMLFieldSetElement}
+     */
+
+    const div = jml('div', {
       class: 'arrayHolder',
-      dataset: {type},
+      // `record`/`tuple` render through `object`/`array`; flag the refinement
+      //   for `getValue` (which has no schema in scope) and for styling/tests.
+      dataset: {
+        type,
+        ...(recordMode ? {record: 'true'} : {}),
+        ...(tupleMode ? {tuple: 'true'} : {})
+      },
       $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}
+         * @this {ArrayHolder}
+         * @param {Parameters<AddAndSetArrayElement>[0]} cfg
          */
-        $addAndSetArrayElement ({
-          propName, type, value, bringIntoFocus,
-          schemaContent
-        }) {
+        $addAndSetArrayElement (cfg) {
+          const {
+            propName, type, value, bringIntoFocus,
+            schemaContent
+          } = cfg;
           if (parentType === 'map') {
             const root = types.getUIForModeAndType({
               resultType,
@@ -481,15 +532,15 @@ const arrayType = {
               const keyFieldset = jml(
                 'fieldset', [
                   ['legend', {
-                    title: /** @type {import('zodex').SzMap<any, any>} */ (
+                    title: schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
                       specificSchemaObject
-                    )?.key?.description
+                    )?.key)
                       ? '(map key)'
                       : undefined
                   }, [
-                    /** @type {import('zodex').SzMap<any, any>} */ (
+                    schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
                       specificSchemaObject
-                    )?.key?.description ?? 'Key'
+                    )?.key) ?? 'Key'
                   ]]
                 ], fieldset
               );
@@ -498,15 +549,15 @@ const arrayType = {
               const valueFieldset = jml(
                 'fieldset', [
                   ['legend', {
-                    title: /** @type {import('zodex').SzMap<any, any>} */ (
+                    title: schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
                       specificSchemaObject
-                    )?.value?.description
+                    )?.value)
                       ? '(map value)'
                       : undefined
                   }, [
-                    /** @type {import('zodex').SzMap<any, any>} */ (
+                    schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
                       specificSchemaObject
-                    )?.value?.description ??
+                    )?.value) ??
                     'Value'
                   ]]
                 ], this._lastFieldset
@@ -533,7 +584,8 @@ const arrayType = {
           return root;
         },
         /**
-         * @returns {HTMLFieldSetElement}
+         * @this {ArrayHolder}
+         * @type {AddMapElement}
          */
         $addMapElement () {
           itemIndex++;
@@ -552,10 +604,12 @@ const arrayType = {
           return fieldset;
         },
         /**
+         * @this {ArrayHolder}
          * @param {{propName: string}} cfg
          * @returns {HTMLFieldSetElement}
          */
-        $addArrayElement ({propName}) {
+        $addArrayElement (cfg) {
+          const {propName} = cfg;
           itemIndex++;
           const arrayItems = this.$getArrayItems();
           // const className = `${type}Item`;
@@ -571,13 +625,19 @@ const arrayType = {
           ], arrayItems);
           return fieldset;
         },
+        /**
+         * @this {ArrayHolder}
+         * @returns {HTMLElement}
+         */
         $getArrayItems () {
-          return this.lastElementChild.lastElementChild;
+          return /** @type {HTMLElement} */ (
+            /** @type {Element} */ (lastTypeChild(this)).lastElementChild
+          );
         }
       }
-    }), [
+    }, [
       ['span', {
-        title: specificSchemaObject?.description
+        title: schemaLabel(specificSchemaObject)
       }, [
         specificSchemaObject
           ? '—'
@@ -600,7 +660,7 @@ const arrayType = {
         ).textContent = arrayContents.hidden ? '+' : '-';
       }}}, ['-']],
       ['div', {class: 'arrayContents'}, [
-        this.array && type !== 'record'
+        !recordMode && this.array
           ? ['div', {
             title: specificSchemaObject
               ? (type === 'filelist'
@@ -609,18 +669,18 @@ const arrayType = {
                   ? '(a Set)'
                   : type === 'map'
                     ? '(a Map)'
-                    : type === 'tuple'
+                    : tupleMode
                       ? '(a tuple)'
                       : '(an Array)')
               : undefined
           }, [
             type === 'filelist'
-              ? (specificSchemaObject?.description ?? 'FileList') + ' length: '
+              ? (schemaLabel(specificSchemaObject) ?? 'FileList') + ' length: '
               : type === 'set'
-                ? (specificSchemaObject?.description ?? 'Set') + ' size: '
+                ? (schemaLabel(specificSchemaObject) ?? 'Set') + ' size: '
                 : type === 'map'
-                  ? (specificSchemaObject?.description ?? 'Map') + ' size: '
-                  : (specificSchemaObject?.description ?? 'Array') +
+                  ? (schemaLabel(specificSchemaObject) ?? 'Map') + ' size: '
+                  : (schemaLabel(specificSchemaObject) ?? 'Array') +
                     ' length: ',
             ['span', [
               (value && (type === 'set' || type === 'map')
@@ -628,8 +688,8 @@ const arrayType = {
                 : value.length) || 0
             ]]
           ]]
-          : (type === 'record'
-            ? specificSchemaObject?.description ?? 'Record'
+          : (recordMode
+            ? schemaLabel(specificSchemaObject) ?? 'Record'
             : ''),
         ['div', {
           class: 'arrayItems'
@@ -653,20 +713,55 @@ const arrayType = {
     const {sparse} = this;
     // eslint-disable-next-line consistent-this -- Clearer
     const parentTypeObject = this;
+
+    // `record`/`tuple` are not distinct types; they are `object`/`array` whose
+    //   associated schema refines them (map-style key/value controls for a
+    //   record, positional `items`/`rest` for a tuple). Detect the refinement
+    //   from the schema.
+    const recordMode = specificSchemaObject?.type === 'record' ||
+      specificSchemaObject?.type === 'looseRecord';
+    const tupleMode = specificSchemaObject?.type === 'tuple';
+
+    // A `record` refines `object` but, for legend numbering/reordering, behaves
+    //   like the array-based types did when it was its own (`array: true`) type.
+    const parentIsArrayLike = parentTypeObject.array || recordMode;
+
+    // Keep the historical per-item CSS class names (`recordItem`, `tupleItem`)
+    //   even though the root type is now `object`/`array`.
+    const itemType = recordMode ? 'record' : tupleMode ? 'tuple' : type;
+
     const itemAdjust = type === 'object' ? 1 : 0;
     let itemIndex = itemAdjust - 1;
     const editableProperties = type !== 'array' &&
       type !== 'set' && type !== 'map' && type !== 'filelist' &&
-      type !== 'tuple' && type !== 'record'; // arrayNonindexKeys and object?
-    const mapProperties = type === 'map' || type === 'record';
+      !tupleMode && !recordMode; // arrayNonindexKeys and object?
+    const mapProperties = type === 'map' || recordMode;
 
-    const elementDesc = /** @type {import('zodex').SzArray} */ (
+    /**
+     * @param {string} message
+     * @returns {string}
+     */
+    const getSchemaValidationMessage = (message) => {
+      return types.getValidationMessage({
+        message,
+        schema: specificSchemaObject,
+        typeSpecific: true
+      }) ?? message;
+    };
+
+    const elementDesc = schemaLabel(/** @type {import('zodexy').SzArray} */ (
       specificSchemaObject
-    )?.element?.description ?? (type === 'set'
-      ? /** @type {import('zodex').SzSet} */ (
+    )?.element) ?? (type === 'set'
+      ? schemaLabel(/** @type {import('zodexy').SzSet} */ (
         specificSchemaObject
-      )?.value?.description
-      : undefined);
+      )?.value)
+      : type === 'filelist'
+        ? schemaLabel(/** @type {import('zodexy').SzArray} */ (
+          /** @type {import('zodexy').SzCodec} */ (
+            specificSchemaObject
+          )?.output
+        )?.element)
+        : undefined);
 
     /**
      * @param {HTMLInputElement} input
@@ -674,10 +769,12 @@ const arrayType = {
      * @returns {void}
      */
     const bringFocus = (input, alwaysFocus) => {
-      if (bringIntoFocus || alwaysFocus) {
-        input.scrollIntoView();
-        input.focus();
+      if (!(bringIntoFocus || alwaysFocus)) {
+        return;
       }
+
+      input.scrollIntoView();
+      input.focus();
     };
 
     /**
@@ -700,31 +797,38 @@ const arrayType = {
       if (!swapGroup || swapGroup.nodeName.toLowerCase() !== 'fieldset') {
         return;
       }
-      if (!sparse && (!specificSchemaObject || parentTypeObject.array)) {
+      if (!sparse && (!specificSchemaObject || parentIsArrayLike)) {
+        // The item-count element is `span.${itemType}Item`, but its depth in the
+        //   legend differs by layout: a plain array puts it directly under
+        //   `<legend>`, while `object`/`arrayNonindexKeys` nest it inside a
+        //   `span.…_propertyHolder` wrapper. Try the nested path first (added in
+        //   the object-property swap fix) and fall back to the direct child.
         const swapCountElem = DOM.filterChildElements(
-          swapGroup, ['legend', 'span', `.${type}Item`]
+          swapGroup, ['legend', 'span', `.${itemType}Item`]
+        )[0] ?? DOM.filterChildElements(
+          swapGroup, ['legend', `.${itemType}Item`]
+        )[0];
+        const baseCountElem = DOM.filterChildElements(
+          group, ['legend', 'span', `.${itemType}Item`]
+        )[0] ?? DOM.filterChildElements(
+          group, ['legend', `.${itemType}Item`]
         )[0];
-        const baseCountElem = DOM.filterChildElements(group, [
-          'legend', 'span', `.${type}Item`
-        ])[0];
 
         const swap = swapCountElem.textContent;
         const base = baseCountElem.textContent;
         swapCountElem.textContent = base;
         baseCountElem.textContent = swap;
       } else {
-        // eslint-disable-next-line @stylistic/max-len -- Long
         const swapCountElem = /** @type {HTMLInputElement & {$parseInt: ParseInt}} */
           (/**
-           * @type {HTMLFieldSetElement & {$getPropertyInput: GetPropertyInput}}
-           */ (
+            * @type {HTMLFieldSetElement & {$getPropertyInput: GetPropertyInput}}
+            */ (
               group
             ).$getPropertyInput());
-        // eslint-disable-next-line @stylistic/max-len -- Long
         const baseCountElem = /** @type {HTMLInputElement & {$parseInt: ParseInt}} */
           (/**
-           * @type {HTMLFieldSetElement & {$getPropertyInput: GetPropertyInput}}
-           */ (
+            * @type {HTMLFieldSetElement & {$getPropertyInput: GetPropertyInput}}
+            */ (
               swapGroup
             ).$getPropertyInput());
         if (typeof swapCountElem.$parseInt() === 'number' ||
@@ -748,7 +852,6 @@ const arrayType = {
         group.before(swapGroup);
       }
       types.validateAllReferences({
-        // eslint-disable-next-line object-shorthand -- TS
         topRoot: /** @type {HTMLDivElement} */ (topRoot)
       }); // Needed
 
@@ -762,17 +865,18 @@ const arrayType = {
      * @this {HTMLDivElement & {$swapGroup: SwapGroup}}
      */
     const $redrawMoveArrows = function () {
-      if (type === 'tuple') { // Don't want to move non-rest items at least
+      if (tupleMode) { // Don't want to move non-rest items at least
         return;
       }
       DOM.filterChildElements(this, [
-        'fieldset', `.${type}Item-arrowHolder-${typeNamespace}`
+        'fieldset', `.${itemType}Item-arrowHolder-${typeNamespace}`
       ]).forEach((holder, j, arr) => {
         DOM.removeChildren(holder);
-        let up = true, down = true;
         if (arr.length === 1) { // Nowhere to move
           return;
         }
+
+        let up = true, down = true;
         if (j === 0) {
           up = false;
         } else if (j === arr.length - 1) {
@@ -820,6 +924,8 @@ const arrayType = {
       }
 
       // Others may be ok (or problematic) now too
+
+      // eslint-disable-next-line unicorn/no-unused-array-method-return -- Short-circuiting
       propertyNameInputs.some((input, /* typeNamespace, */ _i, arr) => {
         const invalidStr = arr.some((item) => {
           return input !== item && input.value === item.value;
@@ -863,8 +969,8 @@ const arrayType = {
      *   typeNamespace: string|undefined,
      *   arrayItems: ArrayItems,
      *   propName: string|undefined,
-     *   required?: true,
-     *   schema?: import('zodex').SzType
+     *   required?: boolean,
+     *   schema?: import('zodexy').SzType
      * }} cfg
      * @returns {import('jamilih').JamilihArray}
      */
@@ -872,65 +978,23 @@ const arrayType = {
       className, splice, itemIndex, /* type, */ typeNamespace,
       arrayItems, propName, required, schema
     }) => {
-      /**
-       * @callback ValidateLength
-       * @param {boolean} [avoidDialog]
-       * @returns {Promise<void>}
-       */
-
-      /**
-       * @type {ValidateLength}
-       * @this {HTMLInputElement & {
-       *   $validateLength: ValidateLength
-       * }}
-       */
-      const $validateLength = async function (avoidDialog) {
-        if (!sparse) {
-          return;
-        }
-        const inputsExceedingLength = arrayItems.$inputsExceedingLength();
-        const exceedsLength = inputsExceedingLength.length;
-        if (avoidDialog || !exceedsLength || !(/^\d+$/u).test(this.value)) {
-          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 & {$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);
-        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
           )({
-            value: propName !== undefined && type === 'record'
+            value: propName !== undefined && recordMode
               ? propName
               : undefined,
-            setValue: propName !== undefined && type === 'record',
+            setValue: propName !== undefined && recordMode,
             // Needed as false when map value supplied
-            autoTrigger: propName === undefined || type === 'record',
-            // eslint-disable-next-line object-shorthand -- TS
+            autoTrigger: propName === undefined || recordMode,
             format: /** @type {import('../formats.js').AvailableFormat} */ (
               format
             ),
             schemaOriginal: schemaContent,
             // Can also be a `Record`
-            schemaContent: /** @type {import('zodex').SzMap<any, any>} */ (
+            schemaContent: /** @type {import('zodexy').SzMap<any, any>} */ (
               specificSchemaObject
             )?.key,
             typeNamespace: 'key-type-choices-only'
@@ -940,25 +1004,25 @@ const arrayType = {
             class: 'mapKey',
             title: (
               type === 'map' &&
-              /** @type {import('zodex').SzMap<any, any>} */ (
+              schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
                 specificSchemaObject
-              )?.key?.description
+              )?.key)
             )
               ? '(map key)'
-              : type === 'record' &&
-              /** @type {import('zodex').SzRecord} */ (
+              : recordMode &&
+              schemaLabel(/** @type {import('zodexy').SzRecord} */ (
                 specificSchemaObject
-              )?.key?.description
+              )?.key)
                 ? '(record key)'
                 : undefined
           }, [
             type === 'map'
-              ? /** @type {import('zodex').SzMap<any, any>} */ (
+              ? schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
                 specificSchemaObject
-              )?.key?.description ?? 'Map key'
-              : /** @type {import('zodex').SzRecord} */ (
+              )?.key) ?? 'Map key'
+              : schemaLabel(/** @type {import('zodexy').SzRecord} */ (
                 specificSchemaObject
-              )?.key?.description ?? 'Record key',
+              )?.key) ?? 'Record key',
             ' '
           ]],
           ['span', {
@@ -981,7 +1045,6 @@ const arrayType = {
 
                 // Needed?
                 types.validateAllReferences({
-                  // eslint-disable-next-line object-shorthand -- TS
                   topRoot: /** @type {HTMLDivElement} */ (topRoot)
                 });
               }, true]
@@ -1023,19 +1086,63 @@ const arrayType = {
                     `Duplicate ${type === 'map' ? 'Map' : 'Record'} key value`
                   );
                   control.reportValidity();
-                });
+                }, 0);
               }
             }
           }, keyTypeSelection.domArray]
         ]];
       }
+
+      /**
+       * @callback ValidateLength
+       * @param {boolean} [avoidDialog]
+       * @returns {Promise<void>}
+       */
+
+      /**
+       * @type {ValidateLength}
+       * @this {HTMLInputElement & {
+       *   $validateLength: ValidateLength
+       * }}
+       */
+      const $validateLength = async function (avoidDialog) {
+        if (!sparse) {
+          return;
+        }
+        const inputsExceedingLength = arrayItems.$inputsExceedingLength();
+        const exceedsLength = inputsExceedingLength.length;
+        if (avoidDialog || !exceedsLength || !(/^\d+$/u).test(this.value)) {
+          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 & {$oldvalue: string}} */ (
+            $e(
+              /** @type {HTMLElement} */ (arrayItems.previousElementSibling),
+              'input'
+            )
+          );
+        const highest = Math.max(...inputsExceedingLength.map(
+          (i) => Math.trunc(Number(i.value))
+        ));
+        arrLengthInput.value = String(highest + 1);
+        arrLengthInput.$oldvalue = String(highest + 1);
+        // Does have potential side effects calling `$inputsExceedingLength`
+        this.$validateLength(true);
+      };
+
       if (editableProperties) {
         // console.log('PROPNAME', propName, schema, specificSchemaObject);
-        const description = /** @type {import('zodex').SzObject} */ (
+        const propSchemaForMeta = /** @type {import('zodexy').SzObject} */ (
           specificSchemaObject
-        )?.properties?.[/** @type {string} */ (propName)]?.description;
+        )?.properties?.[/** @type {string} */ (propName)];
+        const description = schemaLabel(propSchemaForMeta);
         const optionalProperties = Object.entries(
-          /** @type {import('zodex').SzObject} */ (
+          /** @type {import('zodexy').SzObject} */ (
             specificSchemaObject
           )?.properties ?? {}
         ).map(([prop, val]) => {
@@ -1052,7 +1159,9 @@ const arrayType = {
               : (propName !== undefined ? propName : itemIndex)
           )
           : propName || '';
-        return /** @type {import('jamilih').JamilihArray} */ (['legend', [
+        return /** @type {import('jamilih').JamilihArray} */ (['legend', {
+          class: deprecatedClassSuffix(propSchemaForMeta).trim()
+        }, [
           sparse
             ? elementDesc ?? 'Item'
             : {'#': required
@@ -1071,19 +1180,20 @@ const arrayType = {
                   ...(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
-                          /* istanbul ignore next -- Guard */
-                          )?.catchall?.description ?? propName
+                        (() => {
+                          const propSchema =
+                            /** @type {import('zodexy').SzObject} */ (
+                              specificSchemaObject
+                            )?.properties?.[propName];
+                          return propSchema
+                            ? schemaLabel(propSchema) ?? propName
+                            : schemaLabel(
+                              /** @type {import('zodexy').SzObject} */ (
+                                specificSchemaObject
+                              /* istanbul ignore next -- Guard */
+                              )?.catchall
+                            ) ?? propName;
+                        })()
                       ]]
                     ]
                     : [
@@ -1121,11 +1231,11 @@ const arrayType = {
             */
             $custom: {
               /**
-               * @type {Validate}
                * @this {HTMLInputElement & {
                *   $validateLength: ValidateLength,
                *   $validateLegend: ValidateLegend
                * }}
+               * @type {Validate}
                */
               async $validate () {
                 try {
@@ -1139,7 +1249,6 @@ const arrayType = {
                   // Todo (low): We could make this more efficient by waiting
                   //   until all added (when pre-populating)
                   types.validateAllReferences({
-                    // eslint-disable-next-line object-shorthand -- TS
                     topRoot: /** @type {HTMLDivElement} */ (topRoot)
                   }); // Needed
                 } catch {}
@@ -1153,28 +1262,29 @@ const arrayType = {
                 if (!(/^\d+$/u).test(this.value)) {
                   return false;
                 }
-                return Number.parseInt(this.value);
+                return Math.trunc(Number(this.value));
               },
               $validateLegend,
               $arrayItems: arrayItems,
               $validateLength,
               /**
-               * @type {Resort}
                * @this {HTMLInputElement}
+               * @param {Parameters<Resort>[0]} cfg
                */
-              $resort ({alwaysFocus}) {
+              $resort (cfg) {
+                const {alwaysFocus} = cfg;
                 const inputs = /**
-                * @type {(HTMLInputElement & {
-                *   $parseInt: ParseInt
-                * })[]}
-                */
+                                * @type {(HTMLInputElement & {
+                                *   $parseInt: ParseInt
+                                * })[]}
+                                */
                   (/**
-                  * @type {HTMLInputElement & {
-                  *   $arrayItems: HTMLDivElement & {
-                  *     $getPropertyInputs: GetPropertyInputs
-                  *   }
-                  * }}
-                  */ (
+                    * @type {HTMLInputElement & {
+                    *   $arrayItems: HTMLDivElement & {
+                    *     $getPropertyInputs: GetPropertyInputs
+                    *   }
+                    * }}
+                    */ (
                       this
                     ).$arrayItems.$getPropertyInputs());
                 if (inputs.length === 1) {
@@ -1188,12 +1298,13 @@ const arrayType = {
                   el.closest('fieldset')
                 );
                 const thisFieldset = getFieldset(this);
-                // eslint-disable-next-line @stylistic/max-len -- Long
                 const intVal = /** @type {HTMLInputElement & {$parseInt: ParseInt}} */ (
                   this
                 ).$parseInt();
                 if (intVal === false) {
-                  inputs.reverse().some((input) => {
+                  inputs.reverse();
+                  // eslint-disable-next-line unicorn/no-unused-array-method-return -- Short-circuiting
+                  inputs.some((input) => {
                     if (input === this) { // No need to search further
                       return true;
                     }
@@ -1223,6 +1334,7 @@ const arrayType = {
                    */
                   let nearest;
 
+                  // eslint-disable-next-line unicorn/no-unused-array-method-return -- Short-circuiting
                   inputs.some((input) => {
                     if (input === this) {
                       return false;
@@ -1246,8 +1358,13 @@ const arrayType = {
                       return latest ? a > b : a < b;
                     };
                     if (cmp(intVal, intValOlder) &&
-                      (!nearest || cmp(
-                        intValOlder, Number.parseInt(nearest.value)
+                      // A non-numeric `nearest` (e.g. an unset/blank property
+                      //   name) must not compare as `0`; keep the pre-existing
+                      //   `parseInt`-style behavior of treating it as `NaN` so
+                      //   the comparison below is skipped.
+                      (!nearest || (
+                        (/^\d+$/u).test(nearest.value) &&
+                        cmp(intValOlder, Math.trunc(Number(nearest.value)))
                       ))
                     ) {
                       nearest = input;
@@ -1268,7 +1385,7 @@ const arrayType = {
                     getFieldset(nearest)[method](thisFieldset);
                     bringFocus(this, alwaysFocus);
                     arrayItems.$redrawMoveArrows();
-                  });
+                  }, 0);
                   return true;
                 };
                 if (!getNearest()) {
@@ -1290,19 +1407,15 @@ const arrayType = {
                   }`)
                 );
                 DOM.removeChildren(propHolder);
+                const propSchema = /** @type {import('zodexy').SzObject} */ (
+                  specificSchemaObject
+                )?.properties?.[this.value];
                 jml('b', [
-                  /** @type {import('zodex').SzObject} */
-                  (specificSchemaObject)?.properties?.[
-                    this.value
-                  ]
-                    ? /** @type {import('zodex').SzObject} */ (
+                  propSchema
+                    ? schemaLabel(propSchema) ?? this.value
+                    : schemaLabel(/** @type {import('zodexy').SzObject} */ (
                       specificSchemaObject
-                    )?.properties?.[
-                      this.value
-                    ]?.description ?? this.value
-                    : /** @type {import('zodex').SzObject} */ (
-                      specificSchemaObject
-                    )?.catchall?.description ?? this.value
+                    )?.catchall) ?? this.value
                 ], propHolder);
               },
               /**
@@ -1313,7 +1426,7 @@ const arrayType = {
                * }}
                */
               change (e) {
-                const neverProperty = /** @type {import('zodex').SzObject} */ (
+                const neverProperty = /** @type {import('zodexy').SzObject} */ (
                   specificSchemaObject
                 )?.properties?.[
                 /** @type {string} */ (this.value)
@@ -1333,9 +1446,9 @@ const arrayType = {
 
                   if (
                     !dataListValues.includes(this.value) &&
-                    /** @type {import('zodex').SzObject} */ (
+                    /** @type {import('zodexy').SzObject} */ (
                       specificSchemaObject
-                    ).unknownKeys === 'strict'
+                    ).catchall?.type === 'never'
                   ) {
                     this.setCustomValidity('Bad value');
                     this.reportValidity();
@@ -1369,9 +1482,9 @@ const arrayType = {
                         ...buildTypeChoicesForProperty({
                           propName: this.value,
                           schema:
-                          /** @type {import('zodex').SzObject} */
+                          /** @type {import('zodexy').SzObject} */
                           (specificSchemaObject)?.properties?.[this.value] ??
-                          /** @type {import('zodex').SzObject} */ (
+                          /** @type {import('zodexy').SzObject} */ (
                             specificSchemaObject
                           )?.catchall ??
                           {type: 'any'}
@@ -1404,23 +1517,25 @@ const arrayType = {
         ]]);
       }
 
-      const fileDesc = /** @type {import('zodex').SzEffect} */ (
-        specificSchemaObject
-      )?.inner?.description;
+      const fileDesc = type === 'filelist'
+        ? schemaLabel(specificSchemaObject)
+        : undefined;
 
-      return /** @type {import('jamilih').JamilihArray} */ (['legend', [
+      return /** @type {import('jamilih').JamilihArray} */ (['legend', {
+        class: deprecatedClassSuffix(schema).trim()
+      }, [
         elementDesc
           ? ''
           : fileDesc
             ? `${fileDesc} `
-            : schema?.description
-              ? `${schema?.description} `
-              : type === 'tuple' && /** @type {import('zodex').SzTuple} */ (
+            : schemaLabel(schema)
+              ? `${schemaLabel(schema)} `
+              : tupleMode && schemaLabel(/** @type {import('zodexy').SzTuple} */ (
                 specificSchemaObject
-              )?.rest?.description
-                ? `${/** @type {import('zodex').SzTuple} */ (
+              )?.rest)
+                ? `${schemaLabel(/** @type {import('zodexy').SzTuple} */ (
                   specificSchemaObject
-                )?.rest?.description} `
+                )?.rest)} `
                 : 'Item ',
         ['span', {
           dataset: {prop: true, array: true},
@@ -1443,7 +1558,6 @@ const arrayType = {
      */
     const decrementItemIndex = (arrayItems) => {
       if (sparse) {
-        // eslint-disable-next-line @stylistic/max-len -- Long
         itemIndex = /** @type {(HTMLInputElement & {$parseInt: ParseInt})[]} */ (
           arrayItems.$getPropertyInputs()
         ).reduce(
@@ -1458,10 +1572,69 @@ const arrayType = {
       }
     };
 
+    /**
+     * Resolves the schema to use for a child (property/item) type-chooser.
+     * @param {string|undefined} propName
+     * @param {import('zodexy').SzType|undefined} schema Per-item schema (tuples)
+     * @returns {import('zodexy').SzType|undefined}
+     */
+    const getChildSchema = (propName, schema) => {
+      if (schema) {
+        return schema;
+      }
+      if (tupleMode) {
+        return /** @type {import('zodexy').SzTuple} */ (
+          specificSchemaObject
+        ).rest;
+      }
+      if (recordMode) {
+        const recordSchema =
+          /** @type {import('zodexy').SzLooseRecord<any, any>} */ (
+            specificSchemaObject
+          );
+        // A `looseRecord` only applies its `value` schema to entries whose key
+        //   satisfies the `key` schema; Zod passes any other entry through
+        //   untyped, so its control is offered the unconstrained type choice
+        //   rather than being pinned to `value`.
+        if (specificSchemaObject?.type === 'looseRecord' &&
+            !recordKeyConforms(types, recordSchema.key, propName)) {
+          return /** @type {import('zodexy').SzType} */ ({type: 'unknown'});
+        }
+        return recordSchema?.value;
+      }
+      if (mapProperties) {
+        return /** @type {import('zodexy').SzMap<any, any>} */ (
+          specificSchemaObject
+        )?.value;
+      }
+      if (type === 'set') {
+        return /** @type {import('zodexy').SzSet} */ (
+          specificSchemaObject
+        )?.value;
+      }
+      // This is a hack specifically for filelist; the desired solution
+      //   was: https://github.com/colinhacks/zod/issues/6413
+      if (type === 'filelist') {
+        return /** @type {import('zodexy').SzArray} */ (
+          /** @type {import('zodexy').SzCodec} */ (
+            specificSchemaObject
+          )?.output
+        )?.element;
+      }
+      if (type === 'array' || type === 'arrayNonindexKeys') {
+        return /** @type {import('zodexy').SzArray} */ (
+          specificSchemaObject
+        )?.element;
+      }
+      return /** @type {import('zodexy').SzObject} */ (
+        specificSchemaObject
+      )?.properties?.[/** @type {string} */ (propName)];
+    };
+
     /**
      * @param {{
      *   propName: string|undefined,
-     *   schema?: import('zodex').SzType,
+     *   schema?: import('zodexy').SzType,
      *   schemaIdx?: number,
      *   autoTrigger?: boolean
      * }} cfg
@@ -1474,39 +1647,23 @@ const arrayType = {
       )({
         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)],
+        schemaContent: getChildSchema(propName, schema),
+        // A tuple renders through `array` (so `type` is `'array'` here), but
+        //   its children are schema-constrained by the positional `items` and
+        //   `rest` schemas. `schema.js` short-circuits `state === 'array'` and
+        //   discards the child schema (a leftover from when arrays had no
+        //   per-child schema); pass the `arrayNonindexKeys` state real zodexy
+        //   arrays already use so the child schema is honored (and a
+        //   single-type child auto-renders).
         state: parentTypeObject.filelist
           ? 'filelistArray'
-          : forcedState ?? type,
+          : tupleMode
+            ? 'arrayNonindexKeys'
+            : forcedState ?? type,
         // itemIndex,
         typeNamespace
       }).domArray;
@@ -1517,61 +1674,87 @@ const arrayType = {
      * @returns {boolean}
      */
     function preventAdding (offset = 0) {
-      switch (type) {
-      case 'tuple':
-        if (/** @type {import('zodex').SzTuple} */ (
+      if (tupleMode) {
+        if (/** @type {import('zodexy').SzTuple} */ (
           specificSchemaObject
         )?.rest?.type === 'never') {
           dialogs.alert(
-            'Tuple has rest type "never", so one cannot add to it.'
+            getSchemaValidationMessage(
+              'Tuple has rest type "never", so one cannot add to it.'
+            )
           );
           return true;
         }
         if (
-          /** @type {import('zodex').SzTuple} */ (
+          /** @type {import('zodexy').SzTuple} */ (
             specificSchemaObject
           )?.items?.[0]?.type === 'never'
         ) {
           dialogs.alert(
-            'Tuple has items type "never", so one cannot add to it.'
+            getSchemaValidationMessage(
+              'Tuple has items type "never", so one cannot add to it.'
+            )
           );
           return true;
         }
-        break;
+        return false;
+      }
+      switch (type) {
       case 'set': {
-        if (/** @type {import('zodex').SzSet} */ (
+        if (/** @type {import('zodexy').SzSet} */ (
           specificSchemaObject
         )?.value?.type === 'never') {
-          dialogs.alert('Set has type "never", so one cannot add to it.');
+          dialogs.alert(getSchemaValidationMessage(
+            'Set has type "never", so one cannot add to it.'
+          ));
           return true;
         }
 
-        const {maxSize} = /** @type {import('zodex').SzSet} */ (
+        const {maxSize} = /** @type {import('zodexy').SzSet} */ (
           specificSchemaObject
         ) ?? {};
         if (maxSize !== undefined &&
           [...arrayItems.children].length + offset > maxSize
         ) {
-          dialogs.alert(`You cannot add beyond the \`maxSize\` of the Set`);
+          dialogs.alert(getSchemaValidationMessage(
+            `You cannot add beyond the \`maxSize\` of the Set`
+          ));
+          return true;
+        }
+        break;
+      } case 'map': {
+        const {max} = /** @type {import('zodexy').SzMap<any, any>} */ (
+          specificSchemaObject
+        ) ?? {};
+        if (max !== undefined &&
+          [...arrayItems.children].length + offset > max
+        ) {
+          dialogs.alert(getSchemaValidationMessage(
+            `You cannot add beyond the \`max\` of the Map`
+          ));
           return true;
         }
         break;
       } case 'array': case 'arrayNonindexKeys': {
-        if (/** @type {import('zodex').SzArray} */ (
+        if (/** @type {import('zodexy').SzArray} */ (
           specificSchemaObject
         )?.element?.type === 'never') {
-          dialogs.alert('Array has type "never", so one cannot add to it.');
+          dialogs.alert(getSchemaValidationMessage(
+            'Array has type "never", so one cannot add to it.'
+          ));
           return true;
         }
 
-        const {maxLength} = /** @type {import('zodex').SzArray} */ (
+        const {maxLength} = /** @type {import('zodexy').SzArray} */ (
           specificSchemaObject
         ) ?? {};
 
         if (maxLength !== undefined &&
           arrayItems.$getArrayLength() + offset > maxLength
         ) {
-          dialogs.alert(`You cannot add beyond the \`maxLength\` of the array`);
+          dialogs.alert(getSchemaValidationMessage(
+            `You cannot add beyond the \`maxLength\` of the array`
+          ));
           return true;
         }
         break;
@@ -1588,9 +1771,9 @@ const arrayType = {
      *   propName?: string,
      *   splice?: "append"|number,
      *   alwaysFocus?: true
-     *   required?: true
+     *   required?: boolean
      *   autoTrigger?: boolean,
-     *   schema?: import('zodex').SzType,
+     *   schema?: import('zodexy').SzType,
      *   schemaIdx?: number
      * }} cfg
      * @returns {void}
@@ -1610,16 +1793,14 @@ const arrayType = {
       const arrayItems = this.$getArrayItems();
       if (sparse) {
         if (propName) {
-          const intVal = propName.match(/^\d+$/u) && Number.parseInt(propName);
+          const intVal = propName.match(/^\d+$/u) && Math.trunc(Number(propName));
           if (typeof intVal === 'number') {
             itemIndex = intVal;
           }
         } else if (typeof splice === 'number') {
           itemIndex = splice + 1;
         } else if (typeof splice !== 'string') {
-          // eslint-disable-next-line @stylistic/max-len -- Long
           itemIndex = /** @type {(HTMLInputElement & {$parseInt: ParseInt})[]} */ (
-            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$getPropertyInputs: GetPropertyInputs}} */
             (arrayItems).$getPropertyInputs()
           ).reduce(
@@ -1634,7 +1815,7 @@ const arrayType = {
         itemIndex++;
       }
       const thisButton = this; // eslint-disable-line consistent-this -- Clarity
-      const className = `${type}Item`;
+      const className = `${itemType}Item`;
       const fieldset = jml('fieldset',
         {
           dataset: required ? {required: 'required'} : {},
@@ -1653,7 +1834,6 @@ const arrayType = {
                     root,
                     stateObj: {
                       types,
-                      // eslint-disable-next-line object-shorthand -- TS
                       formats:
                       /** @type {import('../formats.js').default} */ (
                         formats
@@ -1694,7 +1874,7 @@ const arrayType = {
                   'Duplicate Set value'
                 );
                 control.reportValidity();
-              });
+              }, 10);
             }, true]
           },
           $custom: {
@@ -1733,29 +1913,29 @@ const arrayType = {
         ['span', {
           class: 'mapValue',
           title: type === 'map' &&
-          /** @type {import('zodex').SzMap<any, any>} */ (
+          schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
             specificSchemaObject
-          )?.value?.description
+          )?.value)
             ? '(map value)'
-            : type === 'record' &&
-            /** @type {import('zodex').SzRecord} */ (
+            : recordMode &&
+            schemaLabel(/** @type {import('zodexy').SzRecord} */ (
               specificSchemaObject
-            )?.value?.description
+            )?.value)
               ? '(record value)'
               : undefined
         }, [
           type === 'map'
-            ? /** @type {import('zodex').SzMap<any, any>} */ (
+            ? schemaLabel(/** @type {import('zodexy').SzMap<any, any>} */ (
               specificSchemaObject
-            )?.value?.description ?? 'Map value'
-            : type === 'record'
-              ? /** @type {import('zodex').SzRecord} */ (
+            )?.value) ?? 'Map value'
+            : recordMode
+              ? schemaLabel(/** @type {import('zodexy').SzRecord} */ (
                 specificSchemaObject
-              )?.value?.description ?? 'Record value'
+              )?.value) ?? 'Record value'
               : '',
           ' '
         ]],
-        ...(specificSchemaObject && !propName && !parentTypeObject.array
+        ...(specificSchemaObject && !propName && !parentIsArrayLike
           ? [jml('span', {
             className: `optionalProperties-placeholder${optionalPropertyId}`
           })]
@@ -1765,10 +1945,10 @@ const arrayType = {
         ['span', {className: 'property-placeholder'}],
         nbsp.repeat(2),
         ['button', {
-          disabled: type === 'tuple' && required &&
+          disabled: tupleMode && required &&
             // The last item of a tuple can have content after it, but earlier
             //   items cannot
-            /** @type {import('zodex').SzTuple} */
+            /** @type {import('zodexy').SzTuple} */
             (specificSchemaObject)?.items?.length - 1 > itemIndex,
           $on: {click (/** @type {Event} */ e) {
             e.preventDefault();
@@ -1808,8 +1988,8 @@ const arrayType = {
               // Because schemas (with descriptions?) don't use className for
               //   property count (and the else block will rewrite the
               //   property name)
-              (specificSchemaObject || schema) &&
-              !parentTypeObject.array
+              !parentIsArrayLike &&
+              (specificSchemaObject || schema)
             )) {
               const newPrevInput = /** @type {HTMLInputElement} */ (
                 newArrayFieldset.$getPropertyInput()
@@ -1829,16 +2009,12 @@ const arrayType = {
             // 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,
@@ -1849,7 +2025,7 @@ const arrayType = {
                 fieldset.remove();
                 decrementItemIndex(arrayItems);
                 if (!sparse &&
-                  (!specificSchemaObject || parentTypeObject.array)
+                  (!specificSchemaObject || parentIsArrayLike)
                 ) {
                   DOM.filterChildElements(arrayItems, [
                     'fieldset', 'legend', '.' + className
@@ -1861,7 +2037,6 @@ const arrayType = {
                 }
                 // Maybe not needed as removal would remove circular
                 types.validateAllReferences({
-                  // eslint-disable-next-line object-shorthand -- TS
                   topRoot: /** @type {HTMLDivElement} */ (topRoot)
                 });
 
@@ -1874,9 +2049,9 @@ const arrayType = {
               }
             }
           }, ['x']
-        ]),
+        ],
         ['span', {
-          class: `${type}Item-arrowHolder-${typeNamespace}`
+          class: `${itemType}Item-arrowHolder-${typeNamespace}`
         }, []]
       ]}, fieldset);
 
@@ -1930,7 +2105,7 @@ const arrayType = {
         (input) => input.value.match(/^\d+$/u)
       ).filter((input) => {
         // We cycle through all elements to set the proper validity on them
-        const val = Number.parseInt(input.value);
+        const val = Math.trunc(Number(input.value));
         const exceedsLength = val > highestExpectedIndex;
         input.setCustomValidity(
           exceedsLength
@@ -1953,13 +2128,13 @@ const arrayType = {
            */
           $getArrayItems () {
             const prevSibling = /**
-             * @type {HTMLDivElement & {
-             *   $inputsExceedingLength: InputsExceedingLength,
-             *   $getPropertyInputs: GetPropertyInputs,
-             *   $redrawMoveArrows: RedrawMoveArrows,
-             *   $getMapKeySelects: GetMapKeySelects
-             * }}
-             */ (this.previousElementSibling);
+                                 * @type {HTMLDivElement & {
+                                 *   $inputsExceedingLength: InputsExceedingLength,
+                                 *   $getPropertyInputs: GetPropertyInputs,
+                                 *   $redrawMoveArrows: RedrawMoveArrows,
+                                 *   $getMapKeySelects: GetMapKeySelects
+                                 * }}
+                                 */ (this.previousElementSibling);
             return prevSibling;
           }
         },
@@ -1980,7 +2155,6 @@ const arrayType = {
           // 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)
           });
         }}
@@ -2047,37 +2221,44 @@ const arrayType = {
                            */ (
                             $e(div, '.arrayLength')
                           );
-                        arrayLengthInput.value = String(Number.parseInt(
-                          arrayLengthInput.value
-                        ) + 1);
+                        arrayLengthInput.value = String(Math.trunc(Number(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} */ (
+                    const element = /** @type {import('zodexy').SzArray} */ (
                       specificSchemaObject
                     )?.element;
                     if (!['void', 'undefined'].includes(
                       element?.type
                     ) && (
-                      element?.type !== 'union' ||
-                      /** @type {import('zodex').SzUnion} */
+                      !isUnionLike(element?.type) ||
+                      /** @type {import('zodexy').SzUnion} */
                       (element)?.options?.every((option) => {
                         return !['void', 'undefined'].includes(option.type);
                       })
                     )) {
-                      const diff = Number.parseInt(this.value) -
-                        Number.parseInt(this.$oldvalue ?? this.defaultValue);
+                      // On the first length change there is no prior value to
+                      //   grow from: `$oldvalue` is unset and the `<input>` has
+                      //   no `value` attribute, so `defaultValue` is `''`. Only
+                      //   auto-add items when there is a numeric baseline to
+                      //   measure the increase against (previously this fell out
+                      //   naturally because `parseInt('')` is `NaN`, making
+                      //   `diff` `NaN` and the loop a no-op; `Number('')` is
+                      //   `0`, so the guard must now be explicit).
+                      const prev = this.$oldvalue ?? this.defaultValue;
+                      const diff = (/^\d+$/u).test(prev)
+                        ? Math.trunc(Number(this.value)) - Math.trunc(Number(prev))
+                        : 0;
                       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({});
-                        });
+                        }, 0);
                       }
                     }
                   }
@@ -2159,7 +2340,6 @@ const arrayType = {
             this.closest('.arrayContents')
           );
           const arrayItems =
-            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$getPropertyInputs: GetPropertyInputs;}} */ (
               $e(/** @type {HTMLElement} */ (arrayContents), '.arrayItems')
             );
@@ -2167,14 +2347,12 @@ const arrayType = {
           if (lastElement && !lastElement.matches('[data-required]')) {
             lastElement.remove();
             decrementItemIndex(arrayItems);
-            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$redrawMoveArrows: RedrawMoveArrows}} */ (
               $e(/** @type {HTMLElement} */ (arrayContents), '.arrayItems')
             ).$redrawMoveArrows();
           }
           // Maybe not needed as removal would remove circular
           types.validateAllReferences({
-            // eslint-disable-next-line object-shorthand -- TS
             topRoot: /** @type {HTMLDivElement} */ (topRoot)
           });
         }}}, ['- Last item']],
@@ -2184,7 +2362,6 @@ const arrayType = {
             /** @type {HTMLElement} */ (this).closest('.arrayContents')
           );
           const arrayItems =
-            // eslint-disable-next-line @stylistic/max-len -- Long
             /** @type {HTMLDivElement & {$getPropertyInputs: GetPropertyInputs}} */ ($e(
               arrayContents,
               '.arrayItems'
@@ -2206,7 +2383,6 @@ const arrayType = {
           }
           // Maybe not needed as removal would remove circular
           types.validateAllReferences({
-            // eslint-disable-next-line object-shorthand -- TS
             topRoot: /** @type {HTMLDivElement} */ (topRoot)
           });
         }}}, ['x All']]
@@ -2215,26 +2391,49 @@ const arrayType = {
 
     const parentType = type;
 
+    /**
+     * @typedef {() => HTMLElement} GetAddArrayElement
+     */
+
+    /**
+     * @typedef {HTMLDivElement & {
+     *   $addAndSetArrayElement:
+     *     import('../formats/structuredCloning.js').AddAndSetArrayElement,
+     *   $addArrayElement: AddArrayElement,
+     *   $getArrayItems: GetArrayItems,
+     *   $getAddArrayElement: GetAddArrayElement,
+     *   $getTypeChoices: () => HTMLSelectElement & {
+     *     $setType: import('../typeChoices.js').SetType,
+     *     $getTypeRoot: import('../formatAndTypeChoices.js').TypeRootGetter
+     *   }
+     * }} DivArrayOrObjectHolder
+     */
+
     const div =
       /**
-       * @type {HTMLDivElement & {
-       *   $addAndSetArrayElement:
-       *     import('../formats/structuredCloning.js').AddAndSetArrayElement,
-       *   $addArrayElement: AddArrayElement
-       *   $getArrayItems: GetArrayItems,
-       *   $getMapKeySelects?: GetMapKeySelects
-       * }}
+       * @type {DivArrayOrObjectHolder}
        */ (
-        jml('div', /** @type {import('jamilih').JamilihAttributes} */ ({
-          dataset: {type},
+        jml('div', {
+          // `record`/`tuple` render through `object`/`array`; flag the
+          //   refinement for `getValue` (no schema in scope) and styling/tests.
+          dataset: {
+            type,
+            ...(recordMode ? {record: 'true'} : {}),
+            ...(tupleMode ? {tuple: 'true'} : {})
+          },
           // 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
-            }) {
+            /**
+             * @this {DivArrayOrObjectHolder}
+             * @param {Parameters<
+             *   import('../formats/structuredCloning.js').AddAndSetArrayElement
+             * >[0]} cfg
+             */
+            $addAndSetArrayElement (cfg) {
+              const {
+                propName, type, value, bringIntoFocus, setAValue,
+                schemaContent: schema, schemaIdx, mustBeOptional
+              } = cfg;
               if (parentType === 'map') {
                 if (propName === '0') {
                   this.$addArrayElement({
@@ -2244,12 +2443,12 @@ const arrayType = {
                   });
                   const arrayItems = this.$getArrayItems();
                   const keyTypeChoices = /**
-                  * @type {HTMLSelectElement & {
-                  *   $setType: import('../typeChoices.js').SetType,
-                  *   $getTypeRoot: import('../formatAndTypeChoices.js').
-                  *     TypeRootGetter
-                  * }}
-                  */ (DOM.filterChildElements(
+                                          * @type {HTMLSelectElement & {
+                                          *   $setType: import('../typeChoices.js').SetType,
+                                          *   $getTypeRoot: import('../formatAndTypeChoices.js').
+                                          *     TypeRootGetter
+                                          * }}
+                                          */ (DOM.filterChildElements(
                       arrayItems,
                       [
                         'fieldset:last-of-type', 'legend',
@@ -2264,7 +2463,7 @@ const arrayType = {
                   // The key may itself be a map, etc.
                   return keyTypeChoices.$getTypeRoot();
                 }
-              } else if (parentType === 'record') {
+              } else if (recordMode) {
                 this.$addArrayElement({
                   propName, autoTrigger: false,
                   required: false
@@ -2282,8 +2481,10 @@ const arrayType = {
               typeChoices.$setType({
                 type, baseValue: value, bringIntoFocus,
                 specificSchema:
-                  schema?.type === 'union' && schemaIdx !== undefined
-                    ? schema.options[schemaIdx]
+                  schemaIdx !== undefined && isUnionLike(schema?.type)
+                    ? /** @type {import('zodexy').SzUnion} */ (
+                      schema
+                    ).options[schemaIdx]
                     : schema,
                 avoidReport: true
               });
@@ -2298,11 +2499,13 @@ const arrayType = {
                     types.getTypeObject(type)
                   );
                 if (typeObj.setValue) {
-                  typeObj.setValue({root, value});
+                  typeObj.setValue({
+                    root: /** @type {HTMLDivElement} */ (root), value
+                  });
                 }
               }
               types.validate({
-                type, root, topRoot,
+                type, root: /** @type {HTMLDivElement} */ (root), topRoot,
                 // We don't want focus when values auto-added
                 avoidReport: true
               });
@@ -2310,26 +2513,28 @@ const arrayType = {
             },
 
             /**
-             * @typedef {() => Element} GetAddArrayElement
+             * @this {DivArrayOrObjectHolder}
+             * @type {GetAddArrayElement}
              */
-
-            /** @type {GetAddArrayElement} */
             $getAddArrayElement () {
-              const el = this.
-                lastElementChild.firstElementChild.nextElementSibling;
-              return sparse ? el.nextElementSibling : el;
+              const el = /** @type {Element} */ (
+                /** @type {Element} */ (
+                  lastTypeChild(this)
+                ).firstElementChild
+              ).nextElementSibling;
+              return /** @type {HTMLElement} */ (
+                sparse ? el?.nextElementSibling : el
+              );
             },
             /**
-             * @type {AddArrayElement}
-             * @this {HTMLDivElement & {
-             *   $getAddArrayElement: GetAddArrayElement
-             * }}
+             * @this {DivArrayOrObjectHolder}
+             * @param {Parameters<AddArrayElement>[0]} cfg
              */
-            // @ts-expect-error TS is apparently getting wrong $addArrayElement
-            $addArrayElement ({
-              propName, splice, alwaysFocus, required, schema, schemaIdx,
-              autoTrigger
-            }) {
+            $addArrayElement (cfg) {
+              const {
+                propName, splice, alwaysFocus, required, schema, schemaIdx,
+                autoTrigger
+              } = cfg;
               const addArrayElement = this.$getAddArrayElement();
               /**
                * @type {HTMLButtonElement & {
@@ -2343,16 +2548,36 @@ const arrayType = {
                 autoTrigger
               });
             },
+            /**
+             * @this {DivArrayOrObjectHolder}
+             * @type {GetArrayItems}
+             */
             $getArrayItems () {
-              const addArrayElement = this.$getAddArrayElement();
-              return addArrayElement.previousElementSibling;
+              return /** @type {ReturnType<GetArrayItems>} */ (
+                this.$getAddArrayElement().previousElementSibling
+              );
             },
+            /**
+             * @this {DivArrayOrObjectHolder}
+             * @returns {HTMLSelectElement & {
+             *   $setType: import('../typeChoices.js').SetType,
+             *   $getTypeRoot: import('../formatAndTypeChoices.js').TypeRootGetter
+             * }}
+             */
             $getTypeChoices () {
               const arrayItems = this.$getArrayItems();
-              return $e(
-                arrayItems.lastElementChild,
-                `fieldset > .typeChoices-${typeNamespace}` // Avoid keys
-              );
+              const typeChoices =
+                /**
+                 * @type {HTMLSelectElement & {
+                 *   $setType: import('../typeChoices.js').SetType,
+                 *   $getTypeRoot: import('../formatAndTypeChoices.js').
+                 *     TypeRootGetter
+                 * }}
+                 */ ($e(
+                  /** @type {Element} */ (arrayItems.lastElementChild),
+                  `fieldset > .typeChoices-${typeNamespace}` // Avoid keys
+                ));
+              return typeChoices;
             }
           },
           $on: {
@@ -2375,11 +2600,11 @@ const arrayType = {
               }
             }
           }
-        }), /** @type {import('jamilih').JamilihChildren} */ ([
+        }, /** @type {import('jamilih').JamilihChildren} */ ([
           [specificSchemaObject ? 'span' : 'b', {
-            title: specificSchemaObject?.description ?? (DOM.initialCaps(
+            title: schemaLabel(specificSchemaObject) ?? (DOM.initialCaps(
               /** @type {import('../types.js').AvailableType} */
-              (type)
+              (itemType)
             ).replace(/s$/u, ''))
           }, [
             specificSchemaObject
@@ -2412,7 +2637,12 @@ const arrayType = {
                       type: 'file',
                       value: file,
                       bringIntoFocus: false,
-                      setAValue: true
+                      setAValue: true,
+                      schemaContent: /** @type {import('zodexy').SzArray} */ (
+                        /** @type {import('zodexy').SzCodec} */ (
+                          specificSchemaObject
+                        )?.output
+                      )?.element
                     });
                   }
                 }
@@ -2423,16 +2653,29 @@ const arrayType = {
           arrayContents
         ]))
       );
-    topRoot = topRoot || div;
+    topRoot ||= div;
 
-    if (!objectValue && specificSchemaObject) {
+    if (!objectValue && specificSchemaObject && tupleMode) {
+      // See comment referencing `arrayType.js` in `typeChoices.js`
+      if (!schemaFallingBack) {
+        const specificSchemaObj = /** @type {import('zodexy').SzTuple} */ (
+          specificSchemaObject
+        );
+        if (specificSchemaObj?.items?.[0]?.type !== 'never') {
+          for (const schema of specificSchemaObj.items) {
+            div.$addArrayElement({schema, required: true});
+          }
+        }
+      }
+    } else if (!objectValue && specificSchemaObject) {
       switch (type) {
       case 'object': {
         // See comment referencing `arrayType.js` in `typeChoices.js`
         if (!schemaFallingBack) {
           for (const [prop, val] of
+            // eslint-disable-next-line unicorn/no-unreadable-for-of-expression -- Convenient
             Object.entries(
-              /** @type {import('zodex').SzObject} */ (
+              /** @type {import('zodexy').SzObject} */ (
                 specificSchemaObject
               /* istanbul ignore next -- Should always have `properties` */
               ).properties ?? {}
@@ -2445,27 +2688,9 @@ const arrayType = {
         }
         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': // None with schemas?
       case 'arrayNonindexKeys': {
-        const {minLength = 0} = /** @type {import('zodex').SzArray} */ (
+        const {minLength = 0} = /** @type {import('zodexy').SzArray} */ (
           specificSchemaObject
         );
         const arrayLengthInput =
@@ -2482,7 +2707,7 @@ const arrayType = {
       } case 'set': {
         // See comment referencing `arrayType.js` in `typeChoices.js`
         if (!schemaFallingBack) {
-          const {minSize = 0} = /** @type {import('zodex').SzSet} */ (
+          const {minSize = 0} = /** @type {import('zodexy').SzSet} */ (
             specificSchemaObject
           );
           for (let i = 0; i < minSize; i++) {
@@ -2490,6 +2715,16 @@ const arrayType = {
           }
         }
         break;
+      } case 'map': {
+        if (!schemaFallingBack) {
+          const {min = 0} = /** @type {import('zodexy').SzMap<any, any>} */ (
+            specificSchemaObject
+          );
+          for (let i = 0; i < min; i++) {
+            div.$addArrayElement({required: true});
+          }
+        }
+        break;
       } default:
         break;
       }