@es-joy/jsoe 0.16.0 → 0.18.0

package/src/jsoe.css

@@ -39,12 +39,20 @@ video.recordedMedia {
   height: 60px;
 }
 
-[data-type="undef"] {
+:invalid {
+  background-color: 1px solid pink !important;
+}
+
+[data-type="undef"], [data-type="void"] {
   background-color: green;
 }
 [data-type="null"] {
   background-color: lightgreen;
 }
+[data-type="nan"] {
+  background-color: green;
+}
+
 [data-type="true"] {
   background-color: blue;
   color: white;
@@ -52,19 +60,35 @@ video.recordedMedia {
 [data-type="false"] {
   background-color: pink;
 }
+[data-type="boolean"] {
+  background-color: aqua;
+}
 [data-type="number"] {
   background-color: violet;
 }
 [data-type="string"] {
   background-color: lightblue;
 }
-[data-type="array"], [data-type="sparseArrays"], [data-type="arrayNonindexKeys"] {
+[data-type="array"], [data-type="sparseArrays"], [data-type="arrayNonindexKeys"], [data-type="tuple"] {
   background-color: lightyellow;
 }
-[data-type="object"] {
+[data-type="object"], [data-type="record"] {
   background-color: orange;
 }
 
+[data-type="literal"] {
+  background-color: lightblue;
+}
+
+[data-type="symbol"] {
+  background-color: lightgreen;
+}
+[data-type="promise"] {
+  background-color: orange;
+}
+[data-type="function"] {
+  background-color: teal;
+}
 
 [data-type="arrayReference"] {
   color: white;
@@ -113,6 +137,16 @@ video.recordedMedia {
   background-color: yellow;
 }
 
+[data-type="map"], [data-type="set"],
+[data-type="bigint"], [data-type="bigintObject"],
+[data-type="never"], [data-type="domexception"],
+[data-type="resurrectable"], /* i.e., `noneditable` */
+[data-type="domrect"], [data-type="dompoint"],
+[data-type="dommatrix"],
+[data-type="catch"], [data-type="enum"], [data-type="nativeEnum"] {
+  background-color: lightgray;
+}
+
 .typedArrayArea {
   overflow: auto;
   max-height: 250px;

package/src/subTypes/blobHTMLType.js

@@ -1,4 +1,4 @@
-/* globals sceditor */
+/* globals sceditor -- No ESM version yet */
 import {jml} from '../vendor-imports.js';
 import {$e} from '../utils/templateUtils.js';
 
@@ -20,7 +20,7 @@ const blobHTMLType = {
   // Todo (low): Support other content-types
   option: ['Blob (text/html)'],
   stringRegex: /^data:text\/html(?:;base64)?,.*$/u,
-  valueMatch: (v) => v.type === 'text/html',
+  valueMatch: (v) => v && v.type === 'text/html',
   superType: 'blob',
   toValue (s) {
     // Todo (low): `Blob` untested; use https://stackoverflow.com/a/30407840/271577 ?
@@ -75,23 +75,26 @@ const blobHTMLType = {
     ).sceditorInstance.val(/** @type {string} */ (result));
     // this.getInput({root}).value = result;
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     /** @type {string} */
     let val;
-    const div = /** @type {HTMLDivElement} */ (
-      jml('div', {dataset: {type: 'blobHTML'}}, [
-        'HTML: ',
-        ['button', {$on: {
-          click () {
-            dialogs.alert({message: ['div', [
-              'Source: ',
-              ['textarea', {class: 'view-source'}, [val]]
-            ]]});
-          }
-        }}, ['View source']]
-      ])
-    );
-    // eslint-disable-next-line promise/prefer-await-to-then
+    const div = jml('div', {
+      dataset: {type: 'blobHTML'},
+      title: specificSchemaObject?.description ? 'HTML' : undefined
+    }, [
+      specificSchemaObject?.description ?? 'HTML',
+      ': ',
+      ['button', {$on: {
+        click () {
+          dialogs.alert({message: ['div', [
+            'Source: ',
+            ['textarea', {class: 'view-source'}, [val]]
+          ]]});
+        }
+      }}, ['View source']]
+    ]);
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    // eslint-disable-next-line promise/prefer-await-to-then -- Not an async method
     this.loadBlob(value).then((
       result
     ) => {
@@ -101,17 +104,20 @@ const blobHTMLType = {
         srcdoc: val
       }, div);
       return undefined;
-    // eslint-disable-next-line promise/prefer-await-to-then
+    // eslint-disable-next-line @stylistic/max-len -- Long
+    // eslint-disable-next-line promise/prefer-await-to-then -- Not an async method
     }).catch(
       /* istanbul ignore next -- How to simulate? */
-      () => {
-      // Todo: Show an error message?
+      // eslint-disable-next-line promise/prefer-await-to-callbacks -- Not async
+      (err) => {
+        // Todo: Show an error message?
+        console.error('Err', err);
       }
     );
     return [div];
     // return ['i', [`data:text/html,${value}`]];
   },
-  editUI ({typeNamespace, value}) {
+  editUI ({typeNamespace, specificSchemaObject, value}) {
     const textarea =
       /**
        * @type {SCEditorTextarea}
@@ -125,13 +131,16 @@ const blobHTMLType = {
       }
     };
 
-    const root = /** @type {HTMLDivElement} */ (jml(
+    const root = jml(
       'div',
-      {dataset: {type: 'blobHTML'}},
+      {
+        dataset: {type: 'blobHTML'},
+        title: specificSchemaObject?.description ?? 'Blob (HTML)'
+      },
       [
         textarea
       ]
-    ));
+    );
     setTimeout(() => {
       // Push onto these: https://www.sceditor.com/documentation/formats/xhtml/
       // sceditor.formats.xhtml.converters array

package/src/superTypes/SpecialRealNumberType.js

@@ -7,6 +7,10 @@ const SpecialRealNumberSuperType = {
   option: ['Special Real Number', {title: '`Infinity`, `-Infinity`, `-0`'}],
   childTypes: ['infinity', 'negativeInfinity', 'negativeZero'],
   stringRegex: /^(?:-?Infinity|-0)$/u,
+  valueMatch (x) {
+    return Object.is(x, -0) || x === Number.POSITIVE_INFINITY ||
+      x === Number.NEGATIVE_INFINITY;
+  },
   toValue (s) {
     return {
       value: s === '-0'
@@ -31,19 +35,31 @@ const SpecialRealNumberSuperType = {
       this
     ).getSelect({root}).value = Object.is(value, -0) ? '-0' : String(value);
   },
-  viewUI ({value}) {
-    return ['i', {dataset: {type: 'SpecialRealNumber'}}, [
-      Object.is(value, -0) ? '-0' : String(value)
+  viewUI ({value, specificSchemaObject}) {
+    const isNegativeZero = Object.is(value, -0);
+    return ['i', {
+      dataset: {type: 'SpecialRealNumber'},
+      title: specificSchemaObject?.description ?? (isNegativeZero
+        ? '(negative zero)'
+        : `(${String(value)})`)
+    }, [
+      isNegativeZero
+        ? '-0'
+        : String(value)
     ]];
   },
   /* istanbul ignore next -- No dupe keys, array refs, or validation */
   getInput ({root}) {
     return /** @type {HTMLSelectElement} */ ($e(root, 'select'));
   },
-  editUI ({typeNamespace, value = Number.POSITIVE_INFINITY}) {
-    return ['div', {dataset: {type: 'SpecialRealNumber'}}, [
+  editUI ({
+    typeNamespace, specificSchemaObject, value = Number.POSITIVE_INFINITY
+  }) {
+    return ['div', {
+      dataset: {type: 'SpecialRealNumber'},
+      title: specificSchemaObject?.description ?? 'Special Real Number'
+    }, [
       ['label', [
-        'Special Real Number: ',
         ['select', {name: `${typeNamespace}-SpecialRealNumber`}, [
           ['option', {
             value: 'Infinity', selected: value === Number.POSITIVE_INFINITY

package/src/superTypes/buffersourceType.js

@@ -110,6 +110,13 @@ const getTypedArray = (prop) => {
   }
 };
 
+const bufferSourceClasses = new Set([
+  'ArrayBuffer', 'DataView',
+  'Int8Array', 'Uint8Array', 'Uint8ClampedArray', 'Int16Array', 'Uint16Array',
+  'Int32Array', 'Uint32Array', 'Float32Array', 'Float64Array', 'BigInt64Array',
+  'BigUint64Array'
+]);
+
 let idx = 0;
 
 /**
@@ -125,6 +132,9 @@ const buffersourceType = {
     'float64array', 'bigint64array', 'biguint64array'
   ],
   stringRegex: /^(?<bufferSourceClass>ArrayBuffer|DataView|(?:Int8|Uint8|Uint8Clamped|Int16|Uint16|Int32|Uint32|Float32|Float64|BigInt64|BigUint64)Array)\((?<innerContent>.*)\)$/u,
+  valueMatch (x) {
+    return bufferSourceClasses.has(toStringTag(x));
+  },
   toValue (s, rootInfo) {
     const {groups: {
       bufferSourceClass
@@ -278,12 +288,21 @@ const buffersourceType = {
       this.getInput({root})
     ).$value;
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     const stringTag = toStringTag(value);
     const buffer = stringTag === 'ArrayBuffer' ? value : value.buffer;
 
     return ['div', {dataset: {type: 'buffersource'}}, [
-      ['b', {class: 'emphasis'}, [stringTag]],
+      ['b', {
+        class: 'emphasis',
+        title: specificSchemaObject?.description
+          ? (/^[aeiou]/iu).test(stringTag)
+            ? `(an ${stringTag})`
+            : `(a ${stringTag})`
+          : undefined
+      }, [
+        specificSchemaObject?.description ?? stringTag
+      ]],
       ['br'],
       ['b', ['Buffer byte length: ']],
       buffer.byteLength,
@@ -382,15 +401,16 @@ const buffersourceType = {
       }, ['View data']]
     ]];
   },
-  editUI ({typeNamespace, value}) {
+  editUI ({typeNamespace, specificSchemaObject, value}) {
     idx++;
 
     /**
      * @typedef {() => void} BuildInstances
      */
 
-    const div = /** @type {HTMLDivElement} */ (jml('div', {
-      dataset: {type: 'buffersource'}
+    const div = jml('div', {
+      dataset: {type: 'buffersource'},
+      title: specificSchemaObject?.description ?? 'BufferSource'
     }, [
       ['fieldset', {
         class: 'returnType',
@@ -406,7 +426,11 @@ const buffersourceType = {
         $custom: {
           /** @type {BuildInstances} */
           $buildInstances () {
-            const that = /** @type {HTMLFieldSetElement} */ (this);
+            const that = /**
+            * @type {HTMLFieldSetElement & {
+            *   $buildInstances: BuildInstances
+            * }}
+            */ (this);
             const ancestor = /** @type {HTMLDivElement} */ (that.parentElement);
             const {value} = /** @type {HTMLInputElement} */ ($e(
               that, `[name=${typeNamespace}-buffersource-returnType-${idx}]` +
@@ -670,7 +694,8 @@ const buffersourceType = {
             'Byte length ',
             ['input', {
               class: 'byteLength',
-              type: 'number', step: '1', size: '4', pattern: '\\d+',
+              type: 'number', step: '1', size: '4',
+              pattern: String.raw`\d+`,
               min: 0,
               $custom: {
                 $value: value ?? new ArrayBuffer(0)
@@ -752,7 +777,8 @@ const buffersourceType = {
             'Max byte length ',
             ['input', {
               class: 'maxByteLength',
-              type: 'number', step: '1', size: '4', pattern: '\\d+',
+              type: 'number', step: '1', size: '4',
+              pattern: String.raw`\d+`,
               min: 0,
               $on: {
                 change (e) {
@@ -786,7 +812,8 @@ const buffersourceType = {
             'Byte length ',
             ['input', {
               class: 'dataViewByteLength',
-              type: 'number', step: '1', size: '4', pattern: '\\d+',
+              type: 'number', step: '1', size: '4',
+              pattern: String.raw`\d+`,
               min: 0,
               $custom: {
                 /**
@@ -795,9 +822,13 @@ const buffersourceType = {
 
                 /** @type {CheckDataViewByteLength} */
                 $checkDataViewByteLength (e) {
-                  const that = /** @type {HTMLInputElement} */ (
-                    this
-                  );
+                  const that = /**
+                  * @type {HTMLInputElement & {
+                  *   $checkDataViewByteLength: CheckDataViewByteLength
+                  * }}
+                  */ (
+                      this
+                    );
                   const greatGrandparent = /** @type {HTMLElement} */
                     (that.parentElement?.parentElement?.parentElement);
 
@@ -855,7 +886,8 @@ const buffersourceType = {
             'Byte offset ',
             ['input', {
               class: 'dataViewByteOffset',
-              type: 'number', step: '1', size: '4', pattern: '\\d+',
+              type: 'number', step: '1', size: '4',
+              pattern: String.raw`\d+`,
               min: 0,
               $on: {
                 change (e) {
@@ -884,7 +916,8 @@ const buffersourceType = {
             'Byte offset ',
             ['input', {
               class: 'typedArrayByteOffset',
-              type: 'number', step: '1', size: '4', pattern: '\\d+',
+              type: 'number', step: '1', size: '4',
+              pattern: String.raw`\d+`,
               min: 0,
               max: (2 ** 53) - 1,
               $custom: {
@@ -894,7 +927,11 @@ const buffersourceType = {
 
                 /** @type {CheckByteOffsetMultiple} */
                 $checkByteOffsetMultiple (e) {
-                  const that = /** @type {HTMLInputElement} */ (this);
+                  const that = /**
+                  * @type {HTMLInputElement & {
+                  *   $checkByteOffsetMultiple: CheckByteOffsetMultiple
+                  * }}
+                  */ (this);
                   const ancestor = /** @type {HTMLElement} */ (
                     that.
                       parentElement?.parentElement?.parentElement?.parentElement
@@ -979,7 +1016,12 @@ const buffersourceType = {
 
               /** @type {HTMLInputElement[]} */ (
                 $$e(/** @type {HTMLElement} */ (
-                  /** @type {HTMLSelectElement} */ (this).parentElement
+                  /**
+                   * @type {HTMLSelectElement & {
+                   *   $setMinsAndMaxes: SetMinsAndMaxes,
+                   *   $checkTypedArrayByteLength: CheckTypedArrayByteLength
+                   * }}
+                   */ (this).parentElement
                 ), '.typedArrayValue')
               ).forEach((typedArrayValue) => {
                 typedArrayValue.className =
@@ -995,7 +1037,12 @@ const buffersourceType = {
 
             /** @type {CheckTypedArrayByteLength} */
             $checkTypedArrayByteLength (e) {
-              const that = /** @type {HTMLSelectElement} */ (this);
+              const that = /**
+              * @type {HTMLSelectElement & {
+              *   $setMinsAndMaxes: SetMinsAndMaxes,
+              *   $checkTypedArrayByteLength: CheckTypedArrayByteLength
+              * }}
+              */ (this);
               const TypedArray = getTypedArray(
                 /** @type {TypedArray} */ (that.value)
               );
@@ -1092,7 +1139,8 @@ const buffersourceType = {
           'Array length: ',
           ['input', {
             class: 'typedArrayLength',
-            type: 'number', step: '1', size: '4', pattern: '\\d+',
+            type: 'number', step: '1', size: '4',
+            pattern: String.raw`\d+`,
             min: 0,
             $custom: {
               /**
@@ -1104,7 +1152,12 @@ const buffersourceType = {
 
               /** @type {CheckBufferBounds} */
               $checkBufferBounds (e) {
-                const that = /** @type {HTMLInputElement} */ (this);
+                const that = /**
+                * @type {HTMLInputElement & {
+                *   $checkBufferBounds: CheckBufferBounds,
+                *   $buildTypedArray: BuildTypedArray
+                * }}
+                */ (this);
 
                 const ancestor = /** @type {HTMLElement} */ (
                   that.parentElement?.parentElement?.parentElement
@@ -1141,10 +1194,6 @@ const buffersourceType = {
                   ? Number.parseInt(typedArrayByteOffsetVal)
                   : 0;
 
-                console.log('1111', typedArrayByteOffset,
-                  length, TypedArray.BYTES_PER_ELEMENT,
-                  bufferByteLength);
-
                 if (
                   (typedArrayByteOffset +
                     (length * TypedArray.BYTES_PER_ELEMENT)) >
@@ -1170,7 +1219,12 @@ const buffersourceType = {
 
               /** @type {BuildTypedArray} */
               $buildTypedArray () {
-                const that = /** @type {HTMLInputElement} */ (this);
+                const that = /**
+                * @type {HTMLInputElement & {
+                *   $checkBufferBounds: CheckBufferBounds,
+                *   $buildTypedArray: BuildTypedArray
+                * }}
+                */ (this);
                 const length = Number.parseInt(that.value);
                 const grandparent = /** @type {HTMLElement} */ (
                   that.parentElement?.parentElement
@@ -1224,8 +1278,8 @@ const buffersourceType = {
                         },
                         type: 'number', step: '1',
                         pattern: value.startsWith('Float')
-                          ? '\\d+(?:\\.\\d+)?'
-                          : '\\d+',
+                          ? String.raw`\d+(?:\.\d+)?`
+                          : String.raw`\d+`,
                         value: bufferByteLength.$typedArray[key]
                           ? String(bufferByteLength.$typedArray[key])
                           : '0',
@@ -1268,7 +1322,7 @@ const buffersourceType = {
                   );
                   // eslint-disable-next-line no-new -- Testing
                   new TypedArray(length);
-                } catch (err) {
+                } catch {
                   that.setCustomValidity('Typed Array length is too long');
                   e.stopPropagation();
                   that.reportValidity();
@@ -1320,7 +1374,8 @@ const buffersourceType = {
                     ['input', {
                       type: 'number',
                       class: 'dataViewSetByteOffset',
-                      step: '1', size: '4', pattern: '\\d+'
+                      step: '1', size: '4',
+                      pattern: String.raw`\d+`
                     }]
                   ]
                 ),
@@ -1330,7 +1385,8 @@ const buffersourceType = {
                     'Value ',
                     ['input', {
                       type: 'number',
-                      step: '1', size: '4', pattern: '\\d+',
+                      step: '1', size: '4',
+                      pattern: String.raw`\d+`,
                       class: 'typedArrayValue typedArray-' + typedArray,
                       ...getMinMaxForTypedArray(typedArray)
                     }]
@@ -1434,7 +1490,7 @@ const buffersourceType = {
         ' ',
         ['div', {class: 'dataViewArea'}]
       ]]
-    ]));
+    ]);
 
     if (this.setValue && value) {
       this.setValue({root: div, value});

package/src/superTypes/dommatrixType.js

@@ -10,6 +10,9 @@ const dommatrixType = {
   option: ['DOMMatrix'],
   childTypes: ['dommatrixreadonly'],
   stringRegex: /^(?<domMatrixClass>DOMMatrix|DOMMatrixReadOnly)\((?<innerContent>.*)\)$/u,
+  valueMatch (x) {
+    return ['DOMMatrix', 'DOMMatrixReadOnly'].includes(toStringTag(x));
+  },
   toValue (s, rootInfo) {
     const {groups: {
       domMatrixClass
@@ -35,7 +38,7 @@ const dommatrixType = {
     return {value: dommatrix};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input:not([type])'));
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   setValue ({root, value: o}) {
     const {is2D} = o;
@@ -221,11 +224,17 @@ const dommatrixType = {
       m41, m42, m43, m44
     ]);
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     const isReadWrite = toStringTag(value) === 'DOMMatrix';
     return ['div', {dataset: {type: 'dommatrix'}}, [
-      ['b', {class: 'emphasis'}, [
-        isReadWrite ? 'DOMMatrix' : 'DOMMatrixReadOnly'
+      ['b', {
+        class: 'emphasis',
+        title: specificSchemaObject?.description
+          ? `(a \`${(isReadWrite ? 'DOMMatrix' : 'DOMMatrixReadOnly')}\`)`
+          : undefined
+      }, [
+        specificSchemaObject?.description ??
+          (isReadWrite ? 'DOMMatrix' : 'DOMMatrixReadOnly')
       ]],
       value.is2D
         ? ['div', [
@@ -301,11 +310,15 @@ const dommatrixType = {
         ]]
     ]];
   },
-  editUI ({typeNamespace, value = {}}) {
+  editUI ({typeNamespace, specificSchemaObject, value = {}}) {
     idx++;
     const {is2D} = value;
-    // eslint-disable-next-line @stylistic/max-len -- Long
-    return ['div', {dataset: {type: 'dommatrix'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+    const step = 'any'; // Proper step?
+
+    return ['div', {
+      dataset: {type: 'dommatrix'},
+      title: specificSchemaObject?.description ?? 'DOMMatrix'
+    }, /** @type {import('jamilih').JamilihChildren} */ ([
       ['div', [
         ['label', [
           ['input', {
@@ -376,6 +389,8 @@ const dommatrixType = {
           ['label', [
             label + ': ',
             ['input', {
+              type: 'number',
+              step,
               class: label,
               name: `${typeNamespace}-dommatrix-${label}`,
               value: value[label] ?? ''
@@ -397,6 +412,8 @@ const dommatrixType = {
           ['label', [
             label + ': ',
             ['input', {
+              type: 'number',
+              step,
               class: label,
               name: `${typeNamespace}-dommatrix-${label}`,
               value: value[label] ?? ''

package/src/superTypes/dompointType.js

@@ -10,6 +10,9 @@ const dompointType = {
   option: ['DOMPoint'],
   childTypes: ['dompointreadonly'],
   stringRegex: /^(?<domPointClass>DOMPoint|DOMPointReadOnly)\((?<innerContent>.*)\)$/u,
+  valueMatch (x) {
+    return ['DOMPoint', 'DOMPointReadOnly'].includes(toStringTag(x));
+  },
   toValue (s, rootInfo) {
     const {groups: {
       domPointClass
@@ -23,7 +26,7 @@ const dompointType = {
     )(x, y, z, w)};
   },
   getInput ({root}) {
-    return /** @type {HTMLInputElement} */ ($e(root, 'input:not([type])'));
+    return /** @type {HTMLInputElement} */ ($e(root, 'input'));
   },
   setValue ({root, value}) {
     /** @type {HTMLInputElement} */ (
@@ -68,11 +71,17 @@ const dompointType = {
     ).checked;
     return new (isReadWrite ? DOMPoint : DOMPointReadOnly)(x, y, z, w);
   },
-  viewUI ({value}) {
+  viewUI ({value, specificSchemaObject}) {
     const isReadWrite = toStringTag(value) === 'DOMPoint';
-    return ['div', {dataset: {type: 'dompoint'}}, [
+    return ['div', {
+      dataset: {type: 'dompoint'},
+      title: specificSchemaObject?.description
+        ? `(a \`${(isReadWrite ? 'DOMPoint' : 'DOMPointReadOnly')}\`)`
+        : undefined
+    }, [
       ['b', {class: 'emphasis'}, [
-        isReadWrite ? 'DOMPoint' : 'DOMPointReadOnly'
+        specificSchemaObject?.description ??
+          (isReadWrite ? 'DOMPoint' : 'DOMPointReadOnly')
       ]],
       ['br'],
       ['b', ['x ']],
@@ -88,15 +97,18 @@ const dompointType = {
       value.w
     ]];
   },
-  editUI ({typeNamespace, value = {
+  editUI ({typeNamespace, specificSchemaObject, value = {
     x: '',
     y: '',
     z: '',
     w: ''
   }}) {
     idx++;
-    // eslint-disable-next-line @stylistic/max-len -- Long
-    return ['div', {dataset: {type: 'dompoint'}}, /** @type {import('jamilih').JamilihChildren} */ ([
+    const step = 'any'; // Proper step?
+    return ['div', {
+      dataset: {type: 'dompoint'},
+      title: specificSchemaObject?.description ?? 'DOMPoint'
+    }, /** @type {import('jamilih').JamilihChildren} */ ([
       ['div', [
         ['label', [
           ['input', {
@@ -123,6 +135,8 @@ const dompointType = {
       ['label', [
         'x: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'x',
           name: `${typeNamespace}-dompoint-x`, value: value.x
         }]
@@ -131,6 +145,8 @@ const dompointType = {
       ['label', [
         'y: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'y',
           name: `${typeNamespace}-dompoint-y`, value: value.y
         }]
@@ -139,6 +155,8 @@ const dompointType = {
       ['label', [
         'z: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'z',
           name: `${typeNamespace}-dompoint-z`, value: value.z
         }]
@@ -147,6 +165,8 @@ const dompointType = {
       ['label', [
         'w: ',
         ['input', {
+          type: 'number',
+          step,
           class: 'w',
           name: `${typeNamespace}-dompoint-w`, value: value.w
         }]