@es-joy/jsoe 0.12.4 → 0.13.1

package/dist/index.js

@@ -2680,6 +2680,8 @@ dialogs.setLocale();
  *   requireObject?: boolean,
  *   objectHasValue?: boolean,
  *   topRoot?: import('./types.js').RootElement,
+ *   formats?: import('./formats.js').default
+ *   types?: import('./types.js').default
  *   schema?: string,
  *   schemaContent?: object,
  * }} cfg
@@ -2706,13 +2708,15 @@ const buildTypeChoices = ({
   requireObject,
   objectHasValue,
   topRoot,
+  formats = new Formats(),
+  types = new Types(),
   schema,
   schemaContent
 }) => {
   // console.log('format', format, 'state', state, 'path', typeNamespace);
   const typeOptions = requireObject
-    ? [Types$1.getOptionForType('object')]
-    : Types$1.getTypeOptionsForFormatAndState(format, state);
+    ? [types.getOptionForType('object')]
+    : types.getTypeOptionsForFormatAndState(format, state);
 
   let editUI;
 
@@ -2721,11 +2725,13 @@ const buildTypeChoices = ({
     const root = /** @type {HTMLDivElement} */ (
       $e(typeContainer, 'div[data-type]')
     );
-    return Types$1.getValueForRoot(
+    return types.getValueForRoot(
       root,
       /** @type {import('./types.js').StateObject} */ ({
         typeNamespace,
+        formats,
         format,
+        types,
         ...stateObj
       }),
       currentPath
@@ -2788,7 +2794,7 @@ const buildTypeChoices = ({
         //    (needed by arrayNonindexKeys for setting an array
         //    length and avoiding errors); could set all
         //    values through here?
-        editUI = Types$1.getUIForModeAndType({
+        editUI = types.getUIForModeAndType({
           readonly: false,
           typeNamespace,
           type,
@@ -2803,7 +2809,7 @@ const buildTypeChoices = ({
         this.$validate();
         topRoot = this.$getTopRoot(); // May be existing now
         // Needed; Array/object ref somewhere could now be valid or invalid
-        Types$1.validateAllReferences({topRoot});
+        types.validateAllReferences({topRoot});
       },
 
       /** @type {AddTypeAndEditUI} */
@@ -2835,7 +2841,7 @@ const buildTypeChoices = ({
           return false;
         }
         const editUI = container.firstElementChild;
-        return Types$1.validate({
+        return types.validate({
           type, root: editUI, topRoot: this.$getTopRoot()
         });
       }
@@ -2872,17 +2878,21 @@ const buildTypeChoices = ({
         value = {};
       }
       try {
-        const rootEditUI = await Formats.availableFormats[format].iterate(
+        const rootEditUI = await formats.getControlsForFormatAndValue(
+          types,
+          format,
           value,
           {
             readonly: false,
             typeNamespace,
             schema,
-            schemaContent
+            schemaContent,
+            formats,
+            types
           }
         );
         const type =
-          Types$1.getTypeForRoot(/** @type {HTMLDivElement} */ (
+          Types.getTypeForRoot(/** @type {HTMLDivElement} */ (
             rootEditUI
           ));
         // eslint-disable-next-line @stylistic/max-len -- Long
@@ -2919,7 +2929,7 @@ const buildTypeChoices = ({
       const root = /** @type {HTMLDivElement} */ (
         $e(typeContainer, 'div[data-type]')
       );
-      return Types$1.getTypeForRoot(root);
+      return Types.getTypeForRoot(root);
     },
 
     /** @type {ValidValuesSet} */
@@ -2928,17 +2938,18 @@ const buildTypeChoices = ({
         $e(typeContainer, 'div[data-type]')
       );
       const form = /** @type {HTMLFormElement} */ (root.closest('form'));
-      return Types$1.validValuesSet({form, typeNamespace});
+      return Types.validValuesSet({form, typeNamespace});
     },
 
     /** @type {SetValue} */
     async setValue (value, stateObj) {
       const rootEditUI = /** @type {HTMLDivElement} */ (
-        await getControlsForFormatAndValue(
+        await formats.getControlsForFormatAndValue(
+          types,
           format, value, stateObj
         )
       );
-      const type = Types$1.getTypeForRoot(rootEditUI);
+      const type = Types.getTypeForRoot(rootEditUI);
       /** @type {HTMLSelectElement & {$addTypeAndEditUI: AddTypeAndEditUI}} */ (
         sel
       ).$addTypeAndEditUI({type, editUI: rootEditUI});
@@ -3061,7 +3072,7 @@ const json = {
       return undefined; // Todo: Fix?
     }
   },
-  getTypesForState (state) {
+  getTypesForState (types, state) {
     /* istanbul ignore else -- No other states apparently */
     if (!state || ['array', 'object'].includes(state)) {
       return this.types();
@@ -3094,6 +3105,8 @@ const json = {
 const encapsulateObserver = (stateObj) => {
   const {
     typeNamespace, readonly, format: frmt, schemaContent,
+    formats,
+    types,
     getPossibleSchemasForPathAndType
   } = stateObj;
 
@@ -3166,11 +3179,13 @@ const encapsulateObserver = (stateObj) => {
       newValue = typesonPathToJSONPointer(cyclicKeypath);
       newType = type === 'array' ? 'arrayReference' : 'objectReference';
       newType = canonicalToAvailableType(
-        format, state, newType, value
+        types, formats, format, state, newType, value
       ); // Todo (low): Add accurate state for second argument
     } else {
       try {
         newType = canonicalToAvailableType(
+          types,
+          formats,
           format,
           state,
           /**
@@ -3207,7 +3222,7 @@ const encapsulateObserver = (stateObj) => {
 
     if (!stateObj.rootUI) {
       // console.log('vvvv0', newType, newValue);
-      stateObj.rootUI = Types$1.getUIForModeAndType({
+      stateObj.rootUI = types.getUIForModeAndType({
         readonly,
         typeNamespace,
         type: newType,
@@ -3305,13 +3320,13 @@ const encapsulateObserver = (stateObj) => {
       }
 
       if (!readonly) {
-        Types$1.setValue({
+        types.setValue({
           type: newType,
           // eslint-disable-next-line object-shorthand -- TS
           root: /** @type {HTMLDivElement} */ (root),
           value: newValue
         });
-        Types$1.validate({
+        types.validate({
           type: newType,
           // eslint-disable-next-line object-shorthand -- TS
           root: /** @type {HTMLDivElement} */ (root),
@@ -3355,6 +3370,8 @@ const replaceTypes = (originTypes, replacements) => {
 };
 
 /**
+ * @param {import('../types.js').default} types
+ * @param {import('../formats.js').default} formats
  * @param {import('../formats.js').AvailableFormat} format
  * @param {string} state
  * @param {import('../types.js').AvailableType} valType
@@ -3362,10 +3379,12 @@ const replaceTypes = (originTypes, replacements) => {
  * @throws {Error}
  * @returns {import('../types.js').AvailableType}
  */
-const canonicalToAvailableType = (format, state, valType, v) => {
-  const frmt = Formats.availableFormats[format];
+const canonicalToAvailableType = (
+  types, formats, format, state, valType, v
+) => {
+  const frmt = formats.getAvailableFormat(format);
   const {getTypesForState, convertFromTypeson, testInvalid} = frmt;
-  const allowableTypes = getTypesForState.call(frmt, state);
+  const allowableTypes = getTypesForState.call(frmt, types, state);
   /* istanbul ignore if -- Guard */
   if (!allowableTypes) {
     throw new Error('Unexpected undefined type for state');
@@ -3402,7 +3421,7 @@ const canonicalToAvailableType = (format, state, valType, v) => {
   allowableTypes.some((allowableType) => {
     // eslint-disable-next-line @stylistic/max-len -- Long
     const typeObj = /** @type {import('../types.js').TypeObject & {childTypes: string[]}} */ (
-      Types$1.availableTypes[allowableType]
+      types.getTypeObject(allowableType)
     );
     const {
       valueMatch, superType, childTypes
@@ -3469,12 +3488,13 @@ const structuredCloning = {
       }
     });
   },
-  getTypesForState (state) {
-    if (state && Types$1.contexts.structuredCloning[state]) {
-      const typesForFormat = this.getTypesForState() ||
+  getTypesForState (types, state) {
+    if (state && types.getContextInfo('structuredCloning', state)) {
+      const typesForFormat = this.getTypesForState(types) ||
         /* istanbul ignore next -- types should be an array */
         [];
-      Types$1.contexts.structuredCloning[state].forEach(({type, after}) => {
+      const contextInfo = types.getContextInfo('structuredCloning', state);
+      contextInfo.forEach(({type, after}) => {
         const precedingIdx = typesForFormat.indexOf(after);
         typesForFormat.splice(precedingIdx + 1, 0, type);
       });
@@ -3588,7 +3608,7 @@ const indexedDBKey = {
     stateObj.format = 'indexedDBKey';
     return structuredCloning.iterate(records, stateObj);
   },
-  getTypesForState (state) {
+  getTypesForState (types, state) {
     if (!state || ['array'].includes(state)) {
       return this.types();
     }
@@ -3617,6 +3637,14 @@ const typesonToIndexedDBKey = new Map([
  * @typedef {any} StructuredCloneValue
  */
 
+/**
+ * @callback GetTypesForFormatAndState
+ * @param {import('./types.js').default} types
+ * @param {AvailableFormat} format
+ * @param {string} [state]
+ * @returns {import('./types.js').AvailableType[]|undefined}
+ */
+
 /* schema:
 export const getTypeForFormatStateAndValue = ({format, state, value}) => {
   const valType = new Typeson().register(
@@ -3640,39 +3668,92 @@ export const getTypeForFormatStateAndValue = ({format, state, value}) => {
  *     typesonType: import('./types.js').AvailableType
  *   ) => import('./types.js').AvailableType|undefined,
  *   iterate: import('./formats/structuredCloning.js').FormatIterator,
- *   getTypesForState: (state?: string) => undefined|
+ *   getTypesForState: (
+ *     types: import('./types.js').default,
+ *     state?: string
+ *   ) => undefined|
  *     (import('./types.js').AvailableType)[]
  * }} Format
  */
 
-// Using methods ensure we have fresh copies
-const Formats = {
-  availableFormats: /** @type {{[key: string]: Format}} */ ({
-    indexedDBKey,
-    json,
-    // Todo (readme): these too? getTypesForState(state)
-    /* schema:
-    schemaAndArbitrary,
-    schemaOnly,
-    */
-    structuredCloning
-  })
-};
-
 /**
- * @param {AvailableFormat} format
- * @param {StructuredCloneValue} record
- * @param {import('./types.js').StateObject} stateObj
- * @returns {Promise<Element>}
+ * Class for processing multiple formats.
  */
-async function getControlsForFormatAndValue (format, record, stateObj) {
-  return await Formats.availableFormats[format].
-    iterate(record, {
-      ...stateObj,
-      // This had been before `stateObj` but should apparently have precedence
-      //   or just avoid passing `format` to this function
-      format
+class Formats {
+  /**
+   *
+   */
+  constructor () {
+    // Can enable later (and add tests)
+    // if (formats) {
+    //   this.availableFormats = {};
+    //   formats.forEach((format) => {
+    //     let formatValue;
+    //     switch (format) {
+    //     case 'indexedDBKey':
+    //       formatValue = indexedDBKey;
+    //       break;
+    //     case 'json':
+    //       formatValue = json;
+    //       break;
+    //     case 'structuredCloning':
+    //       formatValue = structuredCloning;
+    //       break;
+    //     default:
+    //       throw new Error('Unknown format');
+    //     }
+    //     this.availableFormats[format] = formatValue;
+    //   });
+    //   return;
+    // }
+    // Using methods ensure we have fresh copies
+    this.availableFormats = /** @type {{[key: string]: Format}} */ ({
+      indexedDBKey,
+      json,
+      // Todo (readme): these too? getTypesForState(types, state)
+      /* schema:
+      schemaAndArbitrary,
+      schemaOnly,
+      */
+      structuredCloning
     });
+  }
+
+  /**
+   * @param {import('./types.js').default} types
+   * @param {AvailableFormat} format
+   * @param {StructuredCloneValue} record
+   * @param {import('./types.js').StateObject} stateObj
+   * @returns {Promise<Element>}
+   */
+  async getControlsForFormatAndValue (types, format, record, stateObj) {
+    return await this.availableFormats[format].
+      iterate(record, {
+        ...stateObj,
+        types,
+        formats: this,
+        // This had been before `stateObj` but should apparently have precedence
+        //   or just avoid passing `format` to this function
+        format
+      });
+  }
+
+  /**
+   * @type {GetTypesForFormatAndState}
+   */
+  getTypesForFormatAndState (
+    types, format, state
+  ) {
+    return this.availableFormats[format].getTypesForState(types, state);
+  }
+
+  /**
+   * @param {AvailableFormat} format
+   * @returns {Format}
+   */
+  getAvailableFormat (format) {
+    return this.availableFormats[format];
+  }
 }
 
 /**
@@ -4191,7 +4272,7 @@ const arrayReferenceType = {
         'arrayNonindexKeys'
         // 'sparseArrays'
       ].includes(
-        Types$1.getTypeForRoot(referent)
+        Types.getTypeForRoot(referent)
       );
     };
     let message;
@@ -4248,7 +4329,7 @@ const arrayReferenceType = {
 
     // Condition to confirm that referenced element is an array or
     //    object (or reference) with the designated `type`
-    const referentType = Types$1.getTypeForRoot(referent);
+    const referentType = Types.getTypeForRoot(referent);
     const referentBaseType = /** @type {(string|null|undefined)[]} */ ([
       'array',
       'arrayNonindexKeys'
@@ -4270,12 +4351,12 @@ const arrayReferenceType = {
       valid: true
     };
   },
-  validateAll ({topRoot}) {
+  validateAll ({types, topRoot}) {
     const type = /** @type {import('../types.js').AvailableType} */ (
       `${this.type}Reference`
     );
     $$e(topRoot, `div[data-type="${type}"]`).forEach((root) => {
-      Types$1.validate({
+      types.validate({
         type,
         // eslint-disable-next-line object-shorthand -- TS
         root: /** @type {HTMLDivElement} */ (root),
@@ -4481,7 +4562,10 @@ const arrayType = {
     } = /** @type {import('../types.js').RootInfo} */ (info);
     // eslint-disable-next-line prefer-destructuring -- TS
     const format = /** @type {import('../types.js').RootInfo} */ (info).format;
-
+    // eslint-disable-next-line prefer-destructuring -- TS
+    const types = /** @type {import('../types.js').default} */ (
+      /** @type {import('../types.js').RootInfo} */ (info).types
+    );
     const {sparse} = this;
     const state = sparse
       ? 'arrayNonindexKeys'
@@ -4532,7 +4616,7 @@ const arrayType = {
         }
         let v, beginOnly, assign;
         try {
-          [v, stringVal, beginOnly, assign] = Types$1.getValueForString(
+          [v, stringVal, beginOnly, assign] = types.getValueForString(
             stringVal,
             {
               firstRun: false,
@@ -4589,7 +4673,7 @@ const arrayType = {
       stringVal = stringVal.slice(propAndColon[0].length);
       let v, beginOnly, assign;
       try {
-        [v, stringVal, beginOnly, assign] = Types$1.getValueForString(
+        [v, stringVal, beginOnly, assign] = types.getValueForString(
           stringVal,
           {
             firstRun: false, format, state,
@@ -4618,7 +4702,13 @@ const arrayType = {
     parse();
     return {value: retObj, remnant: stringVal};
   },
-  getValue ({root, stateObj = {}, currentPath = ''}) {
+  getValue ({root, stateObj, currentPath = ''}) {
+    /* istanbul ignore if */
+    if (!stateObj) {
+      throw new Error('TS guard'); // TS guard
+    }
+    // eslint-disable-next-line prefer-destructuring -- TS
+    const types = /** @type {import('../types.js').default} */ (stateObj.types);
     const top = currentPath === '';
     const arrayItems =
       /**
@@ -4651,10 +4741,10 @@ const arrayType = {
      * @returns {[boolean, any?]}
      */
     const getValOrRef = (root, currentPathPart) => {
-      const value = Types$1.getValueForRoot(
+      const value = types.getValueForRoot(
         root, stateObj, currentPath + '/' + currentPathPart
       );
-      if (stateObj.handlingReference) {
+      if ('handlingReference' in stateObj && stateObj.handlingReference) {
         // We deal with references later once object is fully constructed
         stateObj.handlingReference = false;
         return [false];
@@ -4730,7 +4820,7 @@ const arrayType = {
   },
 
   // Try to keep in sync with basic structure of `editUI`
-  viewUI ({typeNamespace, type, value, topRoot, resultType, format}) {
+  viewUI ({typeNamespace, type, types, value, topRoot, resultType, format}) {
     // const {sparse} = this;
     let itemIndex = -1;
 
@@ -4787,7 +4877,7 @@ const arrayType = {
             schemaContent, schemaState
           }) {
             if (parentType === 'map') {
-              const root = Types$1.getUIForModeAndType({
+              const root = types.getUIForModeAndType({
                 resultType,
                 readonly: true,
                 typeNamespace, type, topRoot,
@@ -4818,7 +4908,7 @@ const arrayType = {
             }
 
             const fieldset = this.$addArrayElement({propName});
-            const root = Types$1.getUIForModeAndType({
+            const root = types.getUIForModeAndType({
               resultType,
               readonly: true,
               typeNamespace, type, topRoot,
@@ -4928,6 +5018,7 @@ const arrayType = {
   //    population of the array in the callback
   editUI ({
     typeNamespace, buildTypeChoices, format, // resultType,
+    formats, types,
     type, arrayState, topRoot, value, bringIntoFocus = true
   }) {
     const {sparse} = this;
@@ -5018,7 +5109,7 @@ const arrayType = {
       } else {
         group.before(swapGroup);
       }
-      Types$1.validateAllReferences({
+      types.validateAllReferences({
         // eslint-disable-next-line object-shorthand -- TS
         topRoot: /** @type {HTMLDivElement} */ (topRoot)
       }); // Needed
@@ -5201,7 +5292,7 @@ const arrayType = {
                 (this).$validateMapKey();
 
                 // Needed?
-                Types$1.validateAllReferences({
+                types.validateAllReferences({
                   // eslint-disable-next-line object-shorthand -- TS
                   topRoot: /** @type {HTMLDivElement} */ (topRoot)
                 });
@@ -5286,7 +5377,7 @@ const arrayType = {
                   /* await */ this.$validateLegend();
                   // Todo (low): We could make this more efficient by waiting
                   //   until all added (when pre-populating)
-                  Types$1.validateAllReferences({
+                  types.validateAllReferences({
                     // eslint-disable-next-line object-shorthand -- TS
                     topRoot: /** @type {HTMLDivElement} */ (topRoot)
                   }); // Needed
@@ -5541,7 +5632,17 @@ const arrayType = {
                       parentTypeObject.getValue.call({
                         ...parentTypeObject,
                         set: false
-                      }, {root})
+                      }, {
+                        root,
+                        stateObj: {
+                          types,
+                          // eslint-disable-next-line object-shorthand -- TS
+                          formats:
+                          /** @type {import('../formats.js').default} */ (
+                            formats
+                          )
+                        }
+                      })
                     );
                     // console.log('values', values);
 
@@ -5563,7 +5664,7 @@ const arrayType = {
                       if (!root) {
                         return null;
                       }
-                      return Types$1.getFormControlForRoot(root);
+                      return types.getFormControlForRoot(root);
                     });
 
                     const control = controls[dupeIndex];
@@ -5665,7 +5766,7 @@ const arrayType = {
           }
           // Maybe not needed as addition (without renumbering)
           //   wouldn't yet add type
-          Types$1.validateAllReferences({
+          types.validateAllReferences({
             // eslint-disable-next-line object-shorthand -- TS
             topRoot: /** @type {HTMLDivElement} */ (topRoot)
           });
@@ -5691,7 +5792,7 @@ const arrayType = {
                   });
                 }
                 // Maybe not needed as removal would remove circular
-                Types$1.validateAllReferences({
+                types.validateAllReferences({
                   // eslint-disable-next-line object-shorthand -- TS
                   topRoot: /** @type {HTMLDivElement} */ (topRoot)
                 });
@@ -5803,7 +5904,7 @@ const arrayType = {
           (this).$addArrayElement({alwaysFocus: true});
           // Maybe not needed as addition (without renumbering)
           //   wouldn't yet add type
-          Types$1.validateAllReferences({
+          types.validateAllReferences({
             // eslint-disable-next-line object-shorthand -- TS
             topRoot: /** @type {HTMLDivElement} */ (topRoot)
           });
@@ -5855,7 +5956,7 @@ const arrayType = {
                       fieldset.remove();
                     });
                     // Maybe not needed as removal would remove circular
-                    Types$1.validateAllReferences({
+                    types.validateAllReferences({
                       // eslint-disable-next-line object-shorthand -- TS
                       topRoot: /** @type {HTMLDivElement} */ (topRoot)
                     });
@@ -5949,7 +6050,7 @@ const arrayType = {
             ).$redrawMoveArrows();
           }
           // Maybe not needed as removal would remove circular
-          Types$1.validateAllReferences({
+          types.validateAllReferences({
             // eslint-disable-next-line object-shorthand -- TS
             topRoot: /** @type {HTMLDivElement} */ (topRoot)
           });
@@ -5971,7 +6072,7 @@ const arrayType = {
             itemIndex = -1;
           }
           // Maybe not needed as removal would remove circular
-          Types$1.validateAllReferences({
+          types.validateAllReferences({
             // eslint-disable-next-line object-shorthand -- TS
             topRoot: /** @type {HTMLDivElement} */ (topRoot)
           });
@@ -6026,13 +6127,13 @@ const arrayType = {
             //   from `errorsSpecialType` (and `filelistType`)
             if (setAValue) {
               const typeObj = /** @type {import('../types.js').TypeObject} */ (
-                Types$1.availableTypes[type]
+                types.getTypeObject(type)
               );
               if (typeObj.setValue) {
                 typeObj.setValue({root, value});
               }
             }
-            Types$1.validate({type, root, topRoot});
+            types.validate({type, root, topRoot});
             return root;
           },
 
@@ -6255,7 +6356,7 @@ const dateType = {
   },
   // Change to default to `new Date()` when can't be `NaN`
   //   value (keys)?
-  editUI ({typeNamespace, value = ''}) {
+  editUI ({typeNamespace, types, value = ''}) {
     const notANum = this.isValueInvalid(value);
     const invalid = this.valid
       ? ''
@@ -6285,7 +6386,7 @@ const dateType = {
                 const root = /** @type {HTMLDivElement} */ (
                   label.parentElement
                 );
-                Types$1.validate({type: 'date', root});
+                types.validate({type: 'date', root});
               }
             },
             $on: {
@@ -6473,7 +6574,7 @@ const regexpType = {
   viewUI ({value}) {
     return ['i', {dataset: {type: 'regexp'}}, [String(value)]];
   },
-  editUI ({typeNamespace, value = {source: '', flags: ''}}) {
+  editUI ({typeNamespace, types, value = {source: '', flags: ''}}) {
     // Todo (low): Add RegExp syntax highlighter
     const select = /** @type {HTMLSelectElement} */ (jml(
       'select',
@@ -6515,7 +6616,7 @@ const regexpType = {
     // Could be disallowed flags; we might instead try in
     //   advance which will work
     select.addEventListener('change', () => {
-      Types$1.validate({type: 'regexp', root});
+      types.validate({type: 'regexp', root});
     });
     return [root];
   }
@@ -6948,7 +7049,7 @@ const errorType = {
     return errObj;
   },
   viewUI (
-    {value: o, format}
+    {value: o, types, format}
   ) {
     return /** @type {import('jamilih').JamilihArray} */ ([
       'div', {dataset: {type: 'error'}}, [
@@ -6987,7 +7088,8 @@ const errorType = {
             o.cause
               ? this.viewUI({
                 format,
-                value: o.cause
+                value: o.cause,
+                types
               })
               : ''
           ]]
@@ -6995,7 +7097,7 @@ const errorType = {
       ]
     ]);
   },
-  editUI ({typeNamespace, value = {
+  editUI ({typeNamespace, types, value = {
     message: '',
     name: '',
     fileName: '',
@@ -7161,6 +7263,7 @@ const errorType = {
                 if (!causeContents?.children.length) {
                   const editui = component.editUI({
                     typeNamespace,
+                    types,
                     value: value.cause
                   });
                   jml(...editui, causeContents);
@@ -7360,7 +7463,7 @@ const errorsSpecialType = {
       }
     });
   },
-  getValue ({root}) {
+  getValue ({root, stateObj}) {
     const UserErrorType = specialErrorsMap.get(
       /** @type {HTMLSelectElement} */ (
         $e(root, '.errorType')
@@ -7397,6 +7500,7 @@ const errorsSpecialType = {
           )).firstElementChild;
 
         const errors = arrayType.getValue({
+          stateObj,
           root: /** @type {HTMLDivElement} */ (errorRoot)
         });
         errObj = new UET(errors, message);
@@ -7412,6 +7516,7 @@ const errorsSpecialType = {
             root, '.aggregateErrorsContents'
           )).firstElementChild;
         const errors = arrayType.getValue({
+          stateObj,
           root: /** @type {HTMLDivElement} */ (errorRoot)
         });
         errObj = new UET(errors);
@@ -7469,6 +7574,7 @@ const errorsSpecialType = {
     );
     if (causeContents.children.length) {
       errObj.cause = this.getValue({
+        stateObj,
         root: causeContents
       });
     }
@@ -7476,7 +7582,7 @@ const errorsSpecialType = {
     return errObj;
   },
   viewUI (
-    {value: o, format, typeNamespace, resultType}
+    {value: o, types, format, typeNamespace, resultType}
   ) {
     const constructor = getConstructor(o.constructor);
     return /** @type {import('jamilih').JamilihArray} */ ([
@@ -7518,7 +7624,8 @@ const errorsSpecialType = {
             o.cause
               ? this.viewUI({
                 format,
-                value: o.cause
+                value: o.cause,
+                types
               })
               : ''
           ]]
@@ -7545,7 +7652,8 @@ const errorsSpecialType = {
                     const [div] = arrayType.viewUI({
                       typeNamespace, resultType, format,
                       type: 'arrayNonindexKeys',
-                      value: []
+                      value: [],
+                      types
                     });
 
                     /** @type {Error[]} */
@@ -7580,6 +7688,7 @@ const errorsSpecialType = {
   },
   editUI ({
     typeNamespace,
+    types,
 
     // Pass these to `errors` array
     buildTypeChoices,
@@ -7808,6 +7917,7 @@ const errorsSpecialType = {
                 if (!causeContents?.children.length) {
                   const editui = component.editUI({
                     typeNamespace,
+                    types,
                     value: value.cause
                   });
                   jml(...editui, causeContents);
@@ -7874,7 +7984,7 @@ const errorsSpecialType = {
                 );
                 if (!aggregateErrorsContents?.children.length) {
                   const [editui] = arrayType.editUI({
-                    typeNamespace, buildTypeChoices, format,
+                    typeNamespace, types, buildTypeChoices, format,
                     type: 'array',
                     topRoot, bringIntoFocus,
                     arrayState: 'errorsArray',
@@ -10889,6 +10999,11 @@ const getPropertyValueFromLegend = (legend) => {
   return String(Number.parseInt(propElem.textContent) - 1);
 };
 
+/**
+ * Any other possibilities than `div`?
+ * @typedef {HTMLDivElement} RootElement
+ */
+
 /**
  * Utility to retrieve the type out of a type root element.
  * @callback GetTypeForRoot
@@ -10901,7 +11016,7 @@ const getPropertyValueFromLegend = (legend) => {
  *   state and path.
  * @callback GetValueForRoot
  * @param {RootElement} root
- * @param {StateObject} [stateObj]
+ * @param {StateObject} stateObj
  * @param {string} [currentPath]
  * @returns {StructuredCloneValue}
  */
@@ -10918,7 +11033,7 @@ const getPropertyValueFromLegend = (legend) => {
  * Utility to get the value for a root using its ancestor and state.
  * @callback GetValueFromRootAncestor
  * @param {string|HTMLElement} selOrEl
- * @param {StateObject} [stateObj]
+ * @param {StateObject} stateObj
  * @returns {StructuredCloneValue}
  */
 
@@ -10929,13 +11044,6 @@ const getPropertyValueFromLegend = (legend) => {
  *   HTMLButtonElement}
  */
 
-/**
- * @callback GetTypesForFormatAndState
- * @param {string} format
- * @param {string} [state]
- * @returns {AvailableType[]|undefined}
- */
-
 /**
  * @callback GetOptionForType
  * @param {AvailableType} type
@@ -10944,11 +11052,40 @@ const getPropertyValueFromLegend = (legend) => {
 
 /**
  * @callback GetTypeOptionsForFormatAndState
- * @param {string} format
+ * @param {import('./formats.js').AvailableFormat} format
  * @param {string} [parserState]
  * @returns {[string, {value: AvailableType, title?: string}][]}
  */
 
+/**
+ * @typedef {(
+*   keypath: string,
+*   parentPath: string,
+*   arrayOrObjectPropertyName: string,
+*   valueType: string
+* ) => StateObject} GetPossibleSchemasForPathAndType
+*/
+
+/**
+* @typedef {{
+*   typeNamespace?: string,
+*   "readonly"?: boolean,
+*   format?: import('./formats.js').AvailableFormat,
+*   formats: import('./formats.js').default,
+*   types: Types,
+*   error?: Error,
+*   rootUI?: Element,
+*   schema?: string,
+*   schemaContent?: object,
+*   getPossibleSchemasForPathAndType?: GetPossibleSchemasForPathAndType,
+*   paths?: {[currentPath: string]: {
+*     referentPath: string,
+*     expectArrayReferent: boolean
+*   }},
+*   handlingReference?: boolean
+* }} StateObject
+*/
+
 /* eslint-disable jsdoc/valid-types -- readonly reserved */
 /**
  * @typedef {(cfg: {
@@ -11027,35 +11164,6 @@ const getPropertyValueFromLegend = (legend) => {
  * ) => void} CustomValidateAllReferences
  */
 
-/**
- * @type {{
- *   availableTypes: {
- *     [key in AvailableType]: Partial<TypeObject>|string[]
- *   },
- *   getTypeForRoot: GetTypeForRoot,
- *   getValueForRoot: GetValueForRoot,
- *   getFormControlForRoot: GetFormControlForRoot,
- *   getValueFromRootAncestor: GetValueFromRootAncestor,
- *   getFormControlFromRootAncestor: GetFormControlFromRootAncestor,
- *   getTypesForFormatAndState: GetTypesForFormatAndState,
- *   getOptionForType: GetOptionForType,
- *   getTypeOptionsForFormatAndState: GetTypeOptionsForFormatAndState,
- *   getUIForModeAndType: GetUIForModeAndType,
- *   contexts: {
- *     [key: string]: {
- *       [key: string]: {type: AvailableType, after: AvailableType}[]
- *     }
- *   },
- *   validValuesSet: ValidValuesSet,
- *   validateAllReferences: ValidateAllReferences,
- *   validate: Validate,
- *   setValue: SetValue,
- *   getValueForString: GetValueForString,
- *   customValidateAllReferences?: CustomValidateAllReferences
- * }}
- */
-const Types = {};
-
 /**
  * @typedef {import('./formats.js').StructuredCloneValue} StructuredCloneValue
  */
@@ -11077,7 +11185,8 @@ const Types = {};
  *     path: string
  *   ][],
  *   parent?: object,
- *   parentPath?: string|number
+ *   parentPath?: string|number,
+ *   types?: Types
  * }} RootInfo
  */
 
@@ -11142,13 +11251,16 @@ const Types = {};
  *   type?: AvailableType,
  *   topRoot?: HTMLDivElement,
  *   resultType?: "keys"|"values"|"both",
- *   format: import('./formats.js').AvailableFormat
+ *   format: import('./formats.js').AvailableFormat,
+ *   types: Types
  * }) => JamilihArray} viewUI
  * @property {(info: {
  *   value?: StructuredCloneValue,
  *   typeNamespace?: string,
  *   bringIntoFocus?: boolean,
  *   format?: import('./formats.js').AvailableFormat,
+ *   formats?: import('./formats.js').default,
+ *   types: Types,
  *   resultType?: "keys"|"values"|"both",
  *   type?: AvailableType,
  *   arrayState?: string,
@@ -11168,7 +11280,10 @@ const Types = {};
  *   message?: string,
  *   valid: boolean
  * }} [validate] Message will be used if validity is false.
- * @property {(info: {topRoot: HTMLDivElement}) => void} [validateAll] For
+ * @property {(info: {
+ *   topRoot: HTMLDivElement,
+ *   types: Types
+ * }) => void} [validateAll] For
  *   validation of array and object references only.
  * @property {{
  *   structuredCloning: {
@@ -11179,308 +11294,566 @@ const Types = {};
  *   context types
  */
 
-Types.availableTypes = {
-  null: nullType,
-  true: trueType,
-  false: falseType,
-  number: numberType,
-  bigint: bigintType,
-  string: stringType,
-  arrayReference: arrayReferenceType,
-  objectReference: objectReferenceType,
-  array: arrayType,
-  // Note: We don't do for BooleanObject/NumberObject/StringObject, date,
-  //   regexp, as added properties on them are not being cloned (in Chrome
-  //   at least)
-  object: objectType,
-  date: dateType,
+/**
+ * @typedef {"null"|"true"|"false"|"number"|"bigint"|"string"|"arrayReference"|
+ *   "objectReference"|"array"|"object"|"date"|"userObject"|"undef"|
+ *   "SpecialRealNumber"|"SpecialNumber"|"regexp"|"BooleanObject"|
+ *   "NumberObject"|"StringObject"|"map"|"set"|"file"|"filelist"|"blobHTML"|
+ *   "arraybuffer"|"arraybufferview"|"dataview"|"imagedata"|"imagebitmap"|
+ *   "int8array"|"uint8array"|"uint8clampedarray"|"int16array"|"uint16array"|
+ *   "int32array"|"uint32array"|"float32array"|"float64array"|"ValidDate"|
+ *   "arrayNonindexKeys"|"error"|"errors"|"blob"|"domexception"|"domrect"|
+ *   "dompoint"|"dommatrix"} AvailableType
+ */
 
-  // This type is only for throwing upon cloning errors:
-  // 'checkDataCloneException'
-  // This type might be supported by evaluable JS or config
-  //   passed in:
-  userObject: ['User objects'],
-  undef: undefinedType,
-  SpecialRealNumber: SpecialRealNumberSuperType,
-  SpecialNumber: SpecialNumberSuperType,
+/**
+ *
+ */
+class Types {
+  /**
+   *
+   */
+  constructor () {
+    this.formats = new Formats(); // Todo: Make customizable and test
 
-  error: errorType,
-  errors: errorsSpecialType,
+    /** @type {CustomValidateAllReferences|undefined} */
+    this.customValidateAllReferences = undefined;
+    /**
+     * @type {{
+     *   [key in AvailableType]: Partial<TypeObject>|string[]
+     * }}
+     */
+    this.availableTypes = {
+      null: nullType,
+      true: trueType,
+      false: falseType,
+      number: numberType,
+      bigint: bigintType,
+      string: stringType,
+      arrayReference: arrayReferenceType,
+      objectReference: objectReferenceType,
+      array: arrayType,
+      // Note: We don't do for BooleanObject/NumberObject/StringObject, date,
+      //   regexp, as added properties on them are not being cloned (in Chrome
+      //   at least)
+      object: objectType,
+      date: dateType,
 
-  regexp: regexpType,
-  BooleanObject: BooleanObjectType,
-  NumberObject: NumberObjectType,
-  StringObject: StringObjectType,
+      // This type is only for throwing upon cloning errors:
+      // 'checkDataCloneException'
+      // This type might be supported by evaluable JS or config
+      //   passed in:
+      userObject: ['User objects'],
+      undef: undefinedType,
+      SpecialRealNumber: SpecialRealNumberSuperType,
+      SpecialNumber: SpecialNumberSuperType,
+
+      error: errorType,
+      errors: errorsSpecialType,
+
+      regexp: regexpType,
+      BooleanObject: BooleanObjectType,
+      NumberObject: NumberObjectType,
+      StringObject: StringObjectType,
+
+      map: mapType,
+      set: setType,
+
+      file: fileType,
+      filelist: filelistType,
+      blob: blobType,
+      blobHTML: blobHTMLType,
+
+      domexception: domexceptionType,
+      domrect: domrectType,
+      dompoint: dompointType,
+      dommatrix: dommatrixType,
+
+      arraybuffer: {
+        option: ['ArrayBuffer']
+      },
+      arraybufferview: {
+        option: ['ArrayBufferView']
+      },
+      dataview: {
+        option: ['DataView']
+      },
+      imagedata: {
+        option: ['ImageData']
+      },
+      imagebitmap: {
+        option: ['ImageBitmap']
+      },
 
-  map: mapType,
-  set: setType,
+      // Typed Arrays
+      int8array: {
+        option: ['Int8Array']
+      },
+      uint8array: {
+        option: ['Uint8Array']
+      },
+      uint8clampedarray: {
+        option: ['Uint8ClampedArray']
+      },
+      int16array: {
+        option: ['Int16Array']
+      },
+      uint16array: {
+        option: ['Uint16Array']
+      },
+      int32array: {
+        option: ['Int32Array']
+      },
+      uint32array: {
+        option: ['Uint32Array']
+      },
+      float32array: {
+        option: ['Float32Array']
+      },
+      float64array: {
+        option: ['Float64Array']
+      },
 
-  file: fileType,
-  filelist: filelistType,
-  blob: blobType,
-  blobHTML: blobHTMLType,
+      // We're catching this instead of using this
+      // sparseUndefined: sparseUndefinedType,
 
-  domexception: domexceptionType,
-  domrect: domrectType,
-  dompoint: dompointType,
-  dommatrix: dommatrixType,
+      ValidDate: {
+        valid: true
+      },
+      /*
+      sparseArrays: {
+          sparse: true
+      },
+      */
+      arrayNonindexKeys: {
+        sparse: true
+      }
+    };
 
-  arraybuffer: {
-    option: ['ArrayBuffer']
-  },
-  arraybufferview: {
-    option: ['ArrayBufferView']
-  },
-  dataview: {
-    option: ['DataView']
-  },
-  imagedata: {
-    option: ['ImageData']
-  },
-  imagebitmap: {
-    option: ['ImageBitmap']
-  },
+    /**
+     * @param {[
+     *   copyFrom: AvailableType, copyTo: AvailableType
+     * ][]} replacements
+     * @returns {void}
+     */
+    const copyTypeObjs = (replacements) => {
+      replacements.forEach(([copyFrom, copyTo]) => {
+        Object.assign(this.availableTypes[
+          /** @type {AvailableType} */
+          (copyTo)
+        ], this.availableTypes[
+          /** @type {AvailableType} */
+          (copyFrom)
+        ]);
+      });
+    };
 
-  // Typed Arrays
-  int8array: {
-    option: ['Int8Array']
-  },
-  uint8array: {
-    option: ['Uint8Array']
-  },
-  uint8clampedarray: {
-    option: ['Uint8ClampedArray']
-  },
-  int16array: {
-    option: ['Int16Array']
-  },
-  uint16array: {
-    option: ['Uint16Array']
-  },
-  int32array: {
-    option: ['Int32Array']
-  },
-  uint32array: {
-    option: ['Uint32Array']
-  },
-  float32array: {
-    option: ['Float32Array']
-  },
-  float64array: {
-    option: ['Float64Array']
-  },
+    copyTypeObjs(
+      [
+        /** @type {[AvailableType, AvailableType]} */ (
+          ['date', 'ValidDate']
+        ),
+        // 'sparseArrays'
+        /** @type {[AvailableType, AvailableType]} */ (
+          ['array', 'arrayNonindexKeys']
+        )
+      ]
+    );
 
-  // We're catching this instead of using this
-  // sparseUndefined: sparseUndefinedType,
+    /**
+     * @type {{
+     *   [key: string]: {
+     *     [key: string]: {type: AvailableType, after: AvailableType}[]
+     *   }
+     * }}
+     */
+    this.contexts = {};
+    Object.entries(this.availableTypes).forEach(([typ, typeObj]) => {
+      const type = /** @type {AvailableType} */ (typ);
+      const {stateDependent} = /** @type {TypeObject} */ (typeObj);
+      if (stateDependent) {
+        Object.entries(stateDependent).forEach(([
+          format, formatStateDependent
+        ]) => {
+          if (!this.contexts[format]) {
+            this.contexts[format] = {};
+          }
+          const {contexts, after} = formatStateDependent;
+          contexts.forEach((context) => {
+            if (!this.contexts[format][context]) {
+              this.contexts[format][context] = [];
+            }
+            this.contexts[format][context].push({type, after});
+          });
+        });
+      }
+    });
+  }
 
-  ValidDate: {
-    valid: true
-  },
-  /*
-  sparseArrays: {
-      sparse: true
-  },
-  */
-  arrayNonindexKeys: {
-    sparse: true
+  /**
+   * @param {import('./formats.js').AvailableFormat} format
+   * @param {StructuredCloneValue} record
+   * @param {StateObject} stateObj
+   * @returns {Promise<Element>}
+   */
+  async getControlsForFormatAndValue (
+    format, record, stateObj
+  ) {
+    return await this.formats.getControlsForFormatAndValue(
+      this, format, record, stateObj
+    );
   }
-};
 
-/**
- * @typedef {"null"|"true"|"false"|"number"|"bigint"|"string"|"arrayReference"|
-*   "objectReference"|"array"|"object"|"date"|"userObject"|"undef"|
-*   "SpecialRealNumber"|"SpecialNumber"|"regexp"|"BooleanObject"|
-*   "NumberObject"|"StringObject"|"map"|"set"|"file"|"filelist"|"blobHTML"|
-*   "arraybuffer"|"arraybufferview"|"dataview"|"imagedata"|"imagebitmap"|
-*   "int8array"|"uint8array"|"uint8clampedarray"|"int16array"|"uint16array"|
-*   "int32array"|"uint32array"|"float32array"|"float64array"|"ValidDate"|
-*   "arrayNonindexKeys"|"error"|"errors"|"blob"|"domexception"|"domrect"|
-*   "dompoint"|"dommatrix"} AvailableType
-*/
+  /**
+   * @param {import('./formats.js').AvailableFormat} format
+   * @param {string} context
+   * @returns {{
+   *   type: AvailableType
+   *   after: AvailableType
+   * }[]}
+   */
+  getContextInfo (format, context) {
+    return this.contexts[format][context];
+  }
 
-/**
- * @param {[
- *   copyFrom: AvailableType, copyTo: AvailableType
- * ][]} replacements
- * @returns {void}
- */
-const copyTypeObjs = (replacements) => {
-  replacements.forEach(([copyFrom, copyTo]) => {
-    Object.assign(Types.availableTypes[
-      /** @type {AvailableType} */
-      (copyTo)
-    ], Types.availableTypes[
+  /** @type {GetValueForRoot} */
+  getValueForRoot (root, stateObj, currentPath) {
+    const typeObject = /** @type {TypeObject} */ (
+      this.availableTypes[
+        /** @type {AvailableType} */
+        (Types.getTypeForRoot(root))
+      ]
+    );
+    return typeObject.getValue({
+      root, stateObj, currentPath
+    });
+  }
+
+  /** @type {GetFormControlForRoot} */
+  getFormControlForRoot (root) {
+    const typeObj = /** @type {TypeObject} */ (this.availableTypes[
       /** @type {AvailableType} */
-      (copyFrom)
+      (Types.getTypeForRoot(root))
     ]);
-  });
-};
+    /* istanbul ignore if -- All have except aliases */
+    if (!typeObj.getInput) {
+      return null;
+    }
+    return typeObj.getInput({root});
+  }
 
-copyTypeObjs(
-  [
-    /** @type {[AvailableType, AvailableType]} */ (
-      ['date', 'ValidDate']
-    ),
-    // 'sparseArrays'
-    /** @type {[AvailableType, AvailableType]} */ (
-      ['array', 'arrayNonindexKeys']
-    )
-  ]
-);
+  /** @type {GetValueFromRootAncestor} */
+  getValueFromRootAncestor (selOrEl, stateObj) {
+    return this.getValueForRoot(
+      /** @type {RootElement} */
+      ($e(selOrEl, 'div[data-type]')),
+      {
+        ...stateObj,
+        formats: this.formats
+      }
+    );
+  }
 
-Types.getTypeForRoot = (root) => {
-  return String(root ? root.dataset.type : root);
-};
+  /** @type {GetFormControlFromRootAncestor} */
+  getFormControlFromRootAncestor (selOrEl) {
+    const root = /** @type {RootElement} */ ($e(selOrEl, 'div[data-type]'));
+    if (!root) {
+      return null;
+    }
+    return this.getFormControlForRoot(root);
+  }
 
-/**
- * @typedef {(
- *   keypath: string,
- *   parentPath: string,
- *   arrayOrObjectPropertyName: string,
- *   valueType: string
- * ) => StateObject} GetPossibleSchemasForPathAndType
- */
+  /** @type {GetOptionForType} */
+  getOptionForType (type) {
+    /** @type {[string, {value?: AvailableType, title?: string}?]} */
+    const optInfo = [
+      ...(/** @type {TypeObject} */ (
+        this.availableTypes[type]
+      )).option
+    ];
+    optInfo[1] = {value: type, ...(optInfo[1])};
+    return /** @type {[string, {value: AvailableType, title?: string}]} */ (
+      optInfo
+    );
+  }
 
-/**
- * @typedef {{
- *   typeNamespace?: string,
- *   "readonly"?: boolean,
- *   format?: import('./formats.js').AvailableFormat,
- *   error?: Error,
- *   rootUI?: Element,
- *   schema?: string,
- *   schemaContent?: object,
- *   getPossibleSchemasForPathAndType?: GetPossibleSchemasForPathAndType,
- *   paths?: {[currentPath: string]: {
- *     referentPath: string,
- *     expectArrayReferent: boolean
- *   }},
- *   handlingReference?: boolean
- * }} StateObject
- */
-
-Types.getValueForRoot = (root, stateObj, currentPath) => {
-  const typeObject = /** @type {TypeObject} */ (
-    Types.availableTypes[
-      /** @type {AvailableType} */
-      (Types.getTypeForRoot(root))
-    ]
-  );
-  return typeObject.getValue({
-    root, stateObj, currentPath
-  });
-};
+  /** @type {GetTypeOptionsForFormatAndState} */
+  getTypeOptionsForFormatAndState (format, parserState) {
+    const typesForFormatAndState = this.formats.getTypesForFormatAndState(
+      this, format, parserState
+    );
+    if (!typesForFormatAndState) {
+      throw new Error('Unexpected type for format and state');
+    }
+    return typesForFormatAndState.map((type) => {
+      return this.getOptionForType(type);
+    });
+  }
 
-Types.getFormControlForRoot = (root) => {
-  const typeObj = /** @type {TypeObject} */ (Types.availableTypes[
-    /** @type {AvailableType} */
-    (Types.getTypeForRoot(root))
-  ]);
-  /* istanbul ignore if -- All have except aliases */
-  if (!typeObj.getInput) {
-    return null;
+  /** @type {GetUIForModeAndType} */
+  getUIForModeAndType ({
+    readonly, resultType, typeNamespace, type, topRoot, bringIntoFocus,
+    buildTypeChoices, format, schemaContent, schemaState, value, hasValue,
+    replaced
+  }) {
+    const typeObj = /** @type {TypeObject} */ (this.availableTypes[type]);
+    const arg = hasValue
+      ? {
+        typeNamespace, type, buildTypeChoices,
+        format, schemaContent, schemaState,
+        resultType, topRoot, bringIntoFocus, value,
+        replaced,
+        types: this
+      }
+      : {
+        typeNamespace, type, buildTypeChoices,
+        format, schemaContent, schemaState,
+        resultType, topRoot, bringIntoFocus,
+        replaced,
+        types: this
+      };
+    const root = /** @type {HTMLDivElement} */ (jml(
+      ...(readonly
+        ? typeObj.viewUI(arg)
+        : typeObj.editUI(arg))
+    ));
+    if (!readonly && typeObj.validate) {
+      const formControl = typeObj.getInput({root});
+      formControl.addEventListener('input', () => {
+        this.validate({type, root, topRoot});
+      });
+    }
+    return root;
   }
-  return typeObj.getInput({root});
-};
 
-Types.getValueFromRootAncestor = (selOrEl, stateObj) => {
-  return Types.getValueForRoot(
-    /** @type {RootElement} */
-    ($e(selOrEl, 'div[data-type]')),
-    stateObj
-  );
-};
+  /** @type {ValidateAllReferences} */
+  validateAllReferences ({topRoot}) {
+    /* istanbul ignore if -- Unreachable? */
+    if (!topRoot) {
+      console.log('No references present');
+      return;
+    }
 
-Types.getFormControlFromRootAncestor = (selOrEl) => {
-  const root = /** @type {RootElement} */ ($e(selOrEl, 'div[data-type]'));
-  if (!root) {
-    return null;
+    // Could just hard-code arrayReference and objectReference,
+    //  but we'll try to avoid depending on specific types
+    Object.values(this.availableTypes).forEach((typeObj) => {
+      const typeObject = /** @type {TypeObject} */ (typeObj);
+      if (typeObject.validateAll) {
+        typeObject.validateAll({topRoot, types: this});
+      }
+    });
+
+    if (this.customValidateAllReferences) {
+      this.customValidateAllReferences({topRoot});
+    }
   }
-  return Types.getFormControlForRoot(root);
-};
 
-Types.getTypesForFormatAndState = (
-  format, state
-) => Formats.availableFormats[format].getTypesForState(state);
-
-Types.getOptionForType = (type) => {
-  /** @type {[string, {value?: AvailableType, title?: string}?]} */
-  const optInfo = [
-    ...(/** @type {TypeObject} */ (
-      Types.availableTypes[type]
-    )).option
-  ];
-  optInfo[1] = {value: type, ...(optInfo[1])};
-  return /** @type {[string, {value: AvailableType, title?: string}]} */ (
-    optInfo
-  );
-};
+  /** @type {Validate} */
+  validate ({type, root, topRoot}) {
+    const typeObj = /** @type {TypeObject} */ (this.availableTypes[type]);
+    // Todo (low): We limit for now to input boxes which have `validate`
+    if (typeObj.validate) {
+      const {valid, message} = typeObj.validate({root, topRoot});
+      const formControl = typeObj.getInput({root});
+      formControl.setCustomValidity(
+        valid
+          ? ''
+          /* istanbul ignore next -- Should always have a message */
+          : message || 'Invalid'
+      );
+      formControl.reportValidity();
+      return valid;
+    }
+    return true;
+  }
 
-Types.getTypeOptionsForFormatAndState = (format, parserState) => {
-  const typesForFormatAndState = Types.getTypesForFormatAndState(
-    format, parserState
-  );
-  if (!typesForFormatAndState) {
-    throw new Error('Unexpected type for format and state');
+  /** @type {SetValue} */
+  setValue ({type, root, value}) {
+    const typeObj = /** @type {TypeObject} */ (this.availableTypes[type]);
+    if (typeObj.setValue) {
+      typeObj.setValue({root, value});
+    }
   }
-  return typesForFormatAndState.map((type) => {
-    return Types.getOptionForType(type);
-  });
-};
 
-Types.getUIForModeAndType = ({
-  readonly, resultType, typeNamespace, type, topRoot, bringIntoFocus,
-  buildTypeChoices, format, schemaContent, schemaState, value, hasValue,
-  replaced
-}) => {
-  const typeObj = /** @type {TypeObject} */ (Types.availableTypes[type]);
-  const arg = hasValue
-    ? {
-      typeNamespace, type, buildTypeChoices,
-      format, schemaContent, schemaState,
-      resultType, topRoot, bringIntoFocus, value,
-      replaced
+  // Todo (low): Should really add real parser
+  // Todo (low): Implement `getStringForValue` (e.g., to expose feature for
+  //          bookmarking object value currently in view); would not be
+  //          enough to iterate DOM to get string URL as we'd also like
+  //          the ability to have arbitrary JSON/structuredCloning sent to this
+  //          URL from other sites/programs (can currently pass in JSON
+  //          format to the URL, but that is still expecting our Router
+  //          string syntax)
+
+  /** @type {GetValueForString} */
+  getValueForString (s, {
+    format, state, endMatchTypeObjs = [], firstRun = true,
+    rootHolder = [], parent, parentPath
+  }) {
+    const allowedTypes = this.formats.getTypesForFormatAndState(
+      this, format, state
+    );
+    if (!allowedTypes) {
+      throw new Error('Could not get types for format and state');
     }
-    : {
-      typeNamespace, type, buildTypeChoices,
-      format, schemaContent, schemaState,
-      resultType, topRoot, bringIntoFocus,
-      replaced
-    };
-  const root = /** @type {HTMLDivElement} */ (jml(
-    ...(readonly
-      ? typeObj.viewUI(arg)
-      : typeObj.editUI(arg))
-  ));
-  if (!readonly && typeObj.validate) {
-    const formControl = typeObj.getInput({root});
-    formControl.addEventListener('input', () => {
-      Types.validate({type, root, topRoot});
+    const allowedTypeObjs = Object.entries(
+      this.availableTypes
+    ).filter(([type]) => {
+      return allowedTypes.includes(/** @type {AvailableType} */ (type));
     });
-  }
-  return root;
-};
+    const allowedTypeObjsVals = allowedTypeObjs.map(([, arr]) => arr);
 
-Types.contexts = {};
-Object.entries(Types.availableTypes).forEach(([typ, typeObj]) => {
-  const type = /** @type {AvailableType} */ (typ);
-  const {stateDependent} = /** @type {TypeObject} */ (typeObj);
-  if (stateDependent) {
-    Object.entries(stateDependent).forEach(([format, formatStateDependent]) => {
-      if (!Types.contexts[format]) {
-        Types.contexts[format] = {};
+    const reduced = allowedTypeObjsVals.reduce((array, typObj) => {
+      const typeObj = /** @type {TypeObject} */ (typObj);
+      let arr = /** @type {string[]} */ (array);
+      if (typeObj.regexEndings) {
+        arr.push(...typeObj.regexEndings);
+        arr = [...new Set(arr)];
       }
-      const {contexts, after} = formatStateDependent;
-      contexts.forEach((context) => {
-        if (!Types.contexts[format][context]) {
-          Types.contexts[format][context] = [];
+      return arr;
+    }, []);
+    const endings = '|' + /** @type {string[]} */ (
+      reduced
+    ).map((str) => escapeRegex(str)).join('|');
+
+    /**
+     * @type {RegExpMatchArray|boolean|null}
+     */
+    let match = null;
+    let found = allowedTypeObjs.find(([/* _type */, typObj]) => {
+      const typeObj = /** @type {TypeObject} */ (typObj);
+      let {stringRegex} = typeObj;
+      if (typeof typeObj.stringRegex === 'function') {
+        stringRegex = typeObj.stringRegex(true);
+      }
+      stringRegex = stringRegex
+        // Strip off terminal (dollar sign) when matching substrings
+        ? new RegExp(
+          /** @type {RegExp} */ (
+            stringRegex
+          ).source.slice(0, -1) + '(?=$' + endings + ')',
+          'u'
+        )
+        : stringRegex;
+      match = Boolean(stringRegex && s) && s.match(
+        /** @type {RegExp} */ (stringRegex)
+      );
+      return match;
+    });
+
+    let beginOnly = false;
+    if (found === undefined) {
+      found = allowedTypeObjs.find(([/* _type */, typObj]) => {
+        const typeObj = /** @type {TypeObject} */ (typObj);
+        const {stringRegexBegin} = typeObj;
+        match = Boolean(stringRegexBegin && s) && s.match(
+          /** @type {RegExp} */ (stringRegexBegin)
+        );
+        if (match) {
+          beginOnly = true;
+          endMatchTypeObjs.push(typeObj);
         }
-        Types.contexts[format][context].push({type, after});
+        return match;
       });
-    });
+    }
+    let assign = true;
+    if (found !== undefined) {
+      // The `found` is evaluated again, so sets `match` to non-null
+      const mtch = /** @type {RegExpMatchArray} */ (
+        /** @type {unknown} */ (match)
+      );
+      const [content, innerContent] = mtch;
+      let remnant = s.slice(content.length);
+      s = s.slice(0, content.length);
+      // console.log('s0', s, '::', remnant, match);
+      let valObj;
+      try {
+        valObj = /** @type {TypeObject} */ (found[1]).toValue(
+          mtch.groups?.innerContent || innerContent || s, {
+            types: this,
+            format,
+            match,
+            endMatchTypeObjs,
+            remnant,
+            rootHolder,
+            parent,
+            parentPath
+          }
+        );
+      /* istanbul ignore next -- Good regexes should prevent */
+      } catch (e) {
+        /* istanbul ignore next -- Good regexes should prevent */
+        console.log('eee', e);
+        /* istanbul ignore next -- Good regexes should prevent */
+        throw e;
+      }
+      if (valObj.assign === false) {
+        assign = false;
+      }
+      const {value} = valObj;
+      if (valObj.remnant !== undefined) {
+        ({remnant} = valObj);
+      }
+
+      if (beginOnly && endMatchTypeObjs.length) {
+        const endMatch = remnant.match(
+          /** @type {RegExp} */ (/** @type {TypeObject} */ (
+            endMatchTypeObjs.at(-1)
+          ).stringRegexEnd)
+        );
+        if (endMatch) {
+          endMatchTypeObjs.pop(); // Safe now to extract
+          remnant = remnant.slice(endMatch[0].length);
+        }
+      }
+      if (firstRun) {
+        const typeson = new c().register(
+          ae
+        );
+        try {
+          const topRoot = typeson.revive(value);
+          rootHolder.forEach(([type, parent, parentPath, path]) => {
+            const typeObject = this.availableTypes[
+              /** @type {AvailableType} */ (type + 'Reference')
+            ];
+
+            // @ts-expect-error Reference method exists
+            const val = typeObject.resolveReference(path, topRoot);
+            const basicType = getJSONType(val);
+            // eslint-disable-next-line @stylistic/max-len -- Long
+            /* istanbul ignore else -- Successful reference always an object/array? */
+            if (
+              ['array', 'object'].includes(type) && basicType === type
+            ) {
+              /** @type {{[key: string]: any}} */ (
+                parent
+              )[/** @type {string|number} */ (parentPath)] = val;
+            }
+          });
+          return [topRoot, remnant, beginOnly, assign];
+        } catch (err) {
+          console.log('failed Typeson revival', err);
+        }
+      }
+      return [value, remnant, beginOnly, assign];
+    }
+    throw new Error('Bad parsing data');
   }
-});
 
+  /**
+   * @param {AvailableType} type
+   * @returns {Partial<TypeObject>|string[]}
+   */
+  getTypeObject (type) {
+    return this.availableTypes[type];
+  }
+}
+
+/** @type {GetTypeForRoot} */
+Types.getTypeForRoot = (root) => {
+  return String(root ? root.dataset.type : root);
+};
+
+/** @type {ValidValuesSet} */
 Types.validValuesSet = ({form, typeNamespace, keySelectClass}) => {
   // If form is hidden, don't list errors by default
   if (!form.offsetParent ||
@@ -11514,57 +11887,6 @@ Types.validValuesSet = ({form, typeNamespace, keySelectClass}) => {
   );
 };
 
-/**
- * Any other possibilities than `div`?
- * @typedef {HTMLDivElement} RootElement
- */
-
-Types.validateAllReferences = ({topRoot}) => {
-  /* istanbul ignore if -- Unreachable? */
-  if (!topRoot) {
-    console.log('No references present');
-    return;
-  }
-
-  // Could just hard-code arrayReference and objectReference,
-  //  but we'll try to avoid depending on specific types
-  Object.values(Types.availableTypes).forEach((typeObj) => {
-    const typeObject = /** @type {TypeObject} */ (typeObj);
-    if (typeObject.validateAll) {
-      typeObject.validateAll({topRoot});
-    }
-  });
-
-  if (Types.customValidateAllReferences) {
-    Types.customValidateAllReferences({topRoot});
-  }
-};
-
-Types.validate = ({type, root, topRoot}) => {
-  const typeObj = /** @type {TypeObject} */ (Types.availableTypes[type]);
-  // Todo (low): We limit for now to input boxes which have `validate`
-  if (typeObj.validate) {
-    const {valid, message} = typeObj.validate({root, topRoot});
-    const formControl = typeObj.getInput({root});
-    formControl.setCustomValidity(
-      valid
-        ? ''
-        /* istanbul ignore next -- Should always have a message */
-        : message || 'Invalid'
-    );
-    formControl.reportValidity();
-    return valid;
-  }
-  return true;
-};
-
-Types.setValue = ({type, root, value}) => {
-  const typeObj = /** @type {TypeObject} */ (Types.availableTypes[type]);
-  if (typeObj.setValue) {
-    typeObj.setValue({root, value});
-  }
-};
-
 /**
  *
  * @param {string} str
@@ -11575,168 +11897,6 @@ function escapeRegex (str) {
     replaceAll(/[.\\+*?^[\]$(){}=!<>|:-]/gu, '\\$&');
 }
 
-// Todo (low): Should really add real parser
-// Todo (low): Implement `getStringForValue` (e.g., to expose feature for
-//          bookmarking object value currently in view); would not be
-//          enough to iterate DOM to get string URL as we'd also like
-//          the ability to have arbitrary JSON/structuredCloning sent to this
-//          URL from other sites/programs (can currently pass in JSON
-//          format to the URL, but that is still expecting our Router
-//          string syntax)
-
-Types.getValueForString = (s, {
-  format, state, endMatchTypeObjs = [], firstRun = true,
-  rootHolder = [], parent, parentPath
-}) => {
-  const allowedTypes = Types.getTypesForFormatAndState(format, state);
-  if (!allowedTypes) {
-    throw new Error('Could not get types for format and state');
-  }
-  const allowedTypeObjs = Object.entries(
-    Types.availableTypes
-  ).filter(([type]) => {
-    return allowedTypes.includes(/** @type {AvailableType} */ (type));
-  });
-  const allowedTypeObjsVals = allowedTypeObjs.map(([, arr]) => arr);
-
-  const reduced = allowedTypeObjsVals.reduce((array, typObj) => {
-    const typeObj = /** @type {TypeObject} */ (typObj);
-    let arr = /** @type {string[]} */ (array);
-    if (typeObj.regexEndings) {
-      arr.push(...typeObj.regexEndings);
-      arr = [...new Set(arr)];
-    }
-    return arr;
-  }, []);
-  const endings = '|' + /** @type {string[]} */ (
-    reduced
-  ).map((str) => escapeRegex(str)).join('|');
-
-  /**
-   * @type {RegExpMatchArray|boolean|null}
-   */
-  let match = null;
-  let found = allowedTypeObjs.find(([/* _type */, typObj]) => {
-    const typeObj = /** @type {TypeObject} */ (typObj);
-    let {stringRegex} = typeObj;
-    if (typeof typeObj.stringRegex === 'function') {
-      stringRegex = typeObj.stringRegex(true);
-    }
-    stringRegex = stringRegex
-      // Strip off terminal (dollar sign) when matching substrings
-      ? new RegExp(
-        /** @type {RegExp} */ (
-          stringRegex
-        ).source.slice(0, -1) + '(?=$' + endings + ')',
-        'u'
-      )
-      : stringRegex;
-    match = Boolean(stringRegex && s) && s.match(
-      /** @type {RegExp} */ (stringRegex)
-    );
-    return match;
-  });
-
-  let beginOnly = false;
-  if (found === undefined) {
-    found = allowedTypeObjs.find(([/* _type */, typObj]) => {
-      const typeObj = /** @type {TypeObject} */ (typObj);
-      const {stringRegexBegin} = typeObj;
-      match = Boolean(stringRegexBegin && s) && s.match(
-        /** @type {RegExp} */ (stringRegexBegin)
-      );
-      if (match) {
-        beginOnly = true;
-        endMatchTypeObjs.push(typeObj);
-      }
-      return match;
-    });
-  }
-  let assign = true;
-  if (found !== undefined) {
-    // The `found` is evaluated again, so sets `match` to non-null
-    const mtch = /** @type {RegExpMatchArray} */ (
-      /** @type {unknown} */ (match)
-    );
-    const [content, innerContent] = mtch;
-    let remnant = s.slice(content.length);
-    s = s.slice(0, content.length);
-    // console.log('s0', s, '::', remnant, match);
-    let valObj;
-    try {
-      valObj = /** @type {TypeObject} */ (found[1]).toValue(
-        mtch.groups?.innerContent || innerContent || s, {
-          format,
-          match,
-          endMatchTypeObjs,
-          remnant,
-          rootHolder,
-          parent,
-          parentPath
-        }
-      );
-    /* istanbul ignore next -- Good regexes should prevent */
-    } catch (e) {
-      /* istanbul ignore next -- Good regexes should prevent */
-      console.log('eee', e);
-      /* istanbul ignore next -- Good regexes should prevent */
-      throw e;
-    }
-    if (valObj.assign === false) {
-      assign = false;
-    }
-    const {value} = valObj;
-    if (valObj.remnant !== undefined) {
-      ({remnant} = valObj);
-    }
-
-    if (beginOnly && endMatchTypeObjs.length) {
-      const endMatch = remnant.match(
-        /** @type {RegExp} */ (/** @type {TypeObject} */ (
-          endMatchTypeObjs.at(-1)
-        ).stringRegexEnd)
-      );
-      if (endMatch) {
-        endMatchTypeObjs.pop(); // Safe now to extract
-        remnant = remnant.slice(endMatch[0].length);
-      }
-    }
-    if (firstRun) {
-      const typeson = new c().register(
-        ae
-      );
-      try {
-        const topRoot = typeson.revive(value);
-        rootHolder.forEach(([type, parent, parentPath, path]) => {
-          const typeObject = Types.availableTypes[
-            /** @type {AvailableType} */ (type + 'Reference')
-          ];
-
-          // @ts-expect-error Reference method exists
-          const val = typeObject.resolveReference(path, topRoot);
-          const basicType = getJSONType(val);
-          // eslint-disable-next-line @stylistic/max-len -- Long
-          /* istanbul ignore else -- Successful reference always an object/array? */
-          if (
-            ['array', 'object'].includes(type) && basicType === type
-          ) {
-            /** @type {{[key: string]: any}} */ (
-              parent
-            )[/** @type {string|number} */ (parentPath)] = val;
-          }
-        });
-        return [topRoot, remnant, beginOnly, assign];
-      } catch (err) {
-        console.log('failed Typeson revival', err);
-      }
-    }
-    return [value, remnant, beginOnly, assign];
-  }
-  throw new Error('Bad parsing data');
-};
-
-var Types$1 = Types;
-
 /**
  * @callback TypeRootGetter
  * @returns {HTMLDivElement|null}
@@ -11823,6 +11983,8 @@ const getFormatAndSchemaChoices = ({schema, hasKeyPath} = {}) => {
  *   plain object).
  * @param {string} [cfg.typeNamespace] Used to prevent conflicts with other
  *   instances of typeChoices on the page
+ * @param {import('./formats.js').default} cfg.formats
+ * @param {import('./types.js').default} [cfg.types]
  * @returns {{
  *   formatChoices: FormatChoices,
  *   typesHolder: TypesHolder,
@@ -11831,7 +11993,9 @@ const getFormatAndSchemaChoices = ({schema, hasKeyPath} = {}) => {
  *     currentPath: string) => import('./formats.js').StructuredCloneValue,
  *   getType: () => string,
  *   validValuesSet: () => boolean,
- *   setValue: SetValue
+ *   setValue: SetValue,
+ *   formats: import('./formats.js').default,
+ *   types: import('./types.js').default
  * }} The selector for types and the container for them. Both should be
  *   added to the page.
  */
@@ -11841,7 +12005,9 @@ function formatAndTypeChoices ({
   hasValue,
   singleValue,
   hasKeyPath,
-  typeNamespace
+  typeNamespace,
+  formats = new Formats(),
+  types = new Types()
 }) {
   const format = 'structuredCloning';
   const formatChoices = /** @type {FormatChoices} */ (jml('select', {
@@ -11888,6 +12054,8 @@ function formatAndTypeChoices ({
           ),
           // resultType: 'both',
           format: this.value,
+          formats,
+          types,
           typeNamespace,
           requireObject: hasKeyPath,
           objectHasValue: hasValue,
@@ -11939,6 +12107,8 @@ function formatAndTypeChoices ({
     // resultType: 'both',
     topRoot: /** @type {HTMLDivElement} */ ($e(typesHolder, 'div[data-type]')),
     format,
+    formats,
+    types,
     typeNamespace,
     requireObject: hasKeyPath,
     objectHasValue: hasValue,
@@ -11947,6 +12117,8 @@ function formatAndTypeChoices ({
   }).domArray}, typesHolder);
 
   return {
+    formats,
+    types,
     formatChoices,
     typesHolder,
     // Easier for Jamilih
@@ -11965,11 +12137,13 @@ function formatAndTypeChoices ({
       const root = /** @type {HTMLDivElement & {$getTypeRoot: TypeRootGetter}} */ (
         typesHolder
       ).$getTypeRoot();
-      return Types$1.getValueForRoot(/** @type {HTMLDivElement} */ (root), {
+      return types.getValueForRoot(/** @type {HTMLDivElement} */ (root), {
         typeNamespace,
         format: /** @type {import('./formats.js').AvailableFormat} */ (
           formatChoices.value
         ),
+        formats,
+        types,
         ...stateObj
       }, currentPath);
     },
@@ -11982,7 +12156,7 @@ function formatAndTypeChoices ({
       const root = /** @type {HTMLDivElement & {$getTypeRoot: TypeRootGetter}} */ (
         typesHolder
       ).$getTypeRoot();
-      return Types$1.getTypeForRoot(/** @type {HTMLDivElement} */ (root));
+      return Types.getTypeForRoot(/** @type {HTMLDivElement} */ (root));
     },
 
     /**
@@ -11996,13 +12170,14 @@ function formatAndTypeChoices ({
       const form = /** @type {HTMLFormElement} */ (
         /** @type {Element} */ (root).closest('form')
       );
-      return Types$1.validValuesSet({form, typeNamespace});
+      return Types.validValuesSet({form, typeNamespace});
     },
 
     /** @type {SetValue} */
     async setValue (value, stateObj) {
       const rootEditUI = /** @type {HTMLDivElement} */ (
-        await getControlsForFormatAndValue(
+        await formats.getControlsForFormatAndValue(
+          types,
           /** @type {import('./formats.js').AvailableFormat} */ (
             formatChoices.value
           ),
@@ -12010,7 +12185,7 @@ function formatAndTypeChoices ({
           stateObj
         )
       );
-      const type = Types$1.getTypeForRoot(rootEditUI);
+      const type = Types.getTypeForRoot(rootEditUI);
       // eslint-disable-next-line @stylistic/max-len -- Long
       const sel = /** @type {HTMLDivElement & {$getTypeSelect: TypeSelectGetter}} */ (
         typesHolder
@@ -12023,4 +12198,4 @@ function formatAndTypeChoices ({
   };
 }
 
-export { Formats, Types$1 as Types, formatAndTypeChoices, getControlsForFormatAndValue, getFormatAndSchemaChoices, buildTypeChoices as typeChoices };
+export { Formats, Types, formatAndTypeChoices, getFormatAndSchemaChoices, buildTypeChoices as typeChoices };