@es-joy/jsoe 0.29.0 → 0.31.0

package/src/search/fundamentalTypes/objectSearchType.js

@@ -1,6 +1,10 @@
 import {jml} from '../../vendor-imports.js';
 import {escapeJSONPointer} from '../../utils/jsonPointer.js';
-import {buildPathLabel, buildHasPropertyToggle, readTriStateSelect} from '../searchUtils.js';
+import {
+  buildPathLabel, buildHasPropertyToggle, readTriStateSelect, findOwnControl,
+  buildCheckbox, readCheckbox, buildAtLeastOneSentinel, syncAtLeastOneCheck,
+  setDescendantsRequired, revalidateDescendants, resyncAtLeastOne
+} from '../searchUtils.js';
 import {combineAnd, makeHasPropertyLeaf} from '../queryTreeBuilders.js';
 import {
   findSearchElement, getQueryViaElement, hasGetQuery
@@ -11,6 +15,27 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * An object with zero active rows (nothing added from the pull-down, and no
+ * required property opted into) expresses no constraint at all - the same
+ * "no absent values" reasoning as every other leaf's own required control,
+ * just with nothing native to hang a `required` attribute directly off of,
+ * since what counts as "active" is a dynamically-changing count of child
+ * rows rather than one fixed input. `searchUtils.js`'s
+ * `buildAtLeastOneSentinel`/`syncAtLeastOneCheck` stand in for that.
+ * @param {Element} root - a `jsoe-search-object` element
+ * @returns {void}
+ */
+function syncObjectValidity (root) {
+  const addedRowCount = root.querySelectorAll(':scope > jsoe-search-has-property').length;
+  const checkedRequiredCount = [
+    ...root.querySelectorAll(
+      ':scope > jsoe-search-required-property > label > input.jsoeSearchCheckbox'
+    )
+  ].filter((checkbox) => /** @type {HTMLInputElement} */ (checkbox).checked).length;
+  syncAtLeastOneCheck(root, () => addedRowCount + checkedRequiredCount > 0);
+}
+
 /**
  * One added property's row: the fixed "has property" tri-state toggle
  * (`buildHasPropertyToggle`) plus, immediately recursing (search plan §6
@@ -25,12 +50,14 @@ import {buildSearchWidget} from '../searchDispatch.js';
  *   typeNamespace: string|undefined,
  *   topRoot: import('../../types.js').RootElement|undefined,
  *   types: import('../../types.js').default|undefined,
- *   originalJSON: import('../../formats/schema.js').ZodexSchema|undefined
+ *   originalJSON: import('../../formats/schema.js').ZodexSchema|undefined,
+ *   addPropertySelect: HTMLSelectElement
  * }} cfg
  * @returns {HTMLElement}
  */
 function buildHasPropertyRow ({
-  propertyName, propSchema, path, typeNamespace, topRoot, types, originalJSON
+  propertyName, propSchema, path, typeNamespace, topRoot, types, originalJSON,
+  addPropertySelect
 }) {
   const childPath = `${path}/${escapeJSONPointer(propertyName)}`;
   const name = `${typeNamespace}-hasProperty-${propertyName}`;
@@ -38,7 +65,7 @@ function buildHasPropertyRow ({
     schemaObject: propSchema, path: childPath, typeNamespace, topRoot, types,
     originalJSON
   });
-  return /** @type {HTMLElement} */ (jml('jsoe-search-has-property', {
+  const row = /** @type {HTMLElement} */ (jml('jsoe-search-has-property', {
     dataset: {searchPath: childPath, searchKind: 'hasProperty', propertyName},
     $define: {
       // Reads `childPath` off `this.dataset` rather than closing over the
@@ -56,7 +83,17 @@ function buildHasPropertyRow ({
         const existsLeaf = existsCheck === undefined
           ? undefined
           : makeHasPropertyLeaf(searchPath, existsCheck);
-        const childEl = findSearchElement(this, searchPath);
+        // "Doesn't have" already hides the child (its own `syncChildState`),
+        // since a value/presence constraint on an asserted-absent property
+        // is meaningless - skip its query outright rather than combining a
+        // stale/leftover constraint with a contradictory `$exists: false`.
+        // This matters most for `makePresenceOnlySearchType`'s leaves
+        // (undef/null/NaN), whose checkbox is permanently checked
+        // (`buildCheckbox`'s doc) and so would otherwise always contribute
+        // its `presence` leaf regardless of this row's own answer.
+        const childEl = existsCheck === false
+          ? undefined
+          : findSearchElement(this, searchPath);
         const childLeaf = childEl && hasGetQuery(childEl)
           ? childEl.getQuery()
           : undefined;
@@ -65,8 +102,152 @@ function buildHasPropertyRow ({
     }
   }, [
     buildHasPropertyToggle({name, propertyName}),
+    ['button', {
+      type: 'button',
+      class: 'removePropertyButton',
+      $on: {
+        // `row`/`addPropertySelect`/`propertyName` are all closed over
+        // directly - safe since `buildHasPropertyRow` (unlike `$define`)
+        // runs fresh per row, so nothing here is shared across instances.
+        click () {
+          const option = /** @type {HTMLOptionElement|null} */ (
+            addPropertySelect.querySelector(
+              `option[value="${CSS.escape(propertyName)}"]`
+            )
+          );
+          if (option) {
+            option.disabled = false;
+          }
+          const objectRoot = row.closest('jsoe-search-object');
+          row.remove();
+          if (objectRoot) {
+            syncObjectValidity(/** @type {HTMLElement} */ (objectRoot));
+          }
+        }
+      }
+    }, ['Remove']],
     childArr
   ]));
+
+  // Asserting the property is absent ("Doesn't have") makes a value
+  // constraint on it meaningless, so hide the recursed child widget while
+  // that's selected rather than leaving it showing (and usable) alongside a
+  // contradictory "doesn't have" answer - `buildUI` runs fresh per row, so
+  // (unlike `$define`) it's safe for this listener to close over `select`/
+  // `childRoot` directly.
+  const select = /** @type {HTMLSelectElement|undefined} */ (
+    findOwnControl(row, 'select.jsoeSearchTriState--')
+  );
+  const childRoot = findSearchElement(row, childPath);
+  // "Doesn't have" hides the child entirely (a value constraint on an
+  // asserted-absent property is meaningless) - a hidden control is already
+  // exempt from constraint validation on its own. "Has" keeps the child
+  // visible and interactive (so "Has property X" AND "X matches Y" can
+  // still be combined), but that existence assertion is *already* a
+  // complete constraint by itself, so its own required inputs (whatever
+  // type the child turns out to be) are relaxed via `setDescendantsRequired`
+  // rather than disabled - only "(any)" (no existence assertion) leaves
+  // them actually required, since the child's own value is then the row's
+  // only possible contribution. `revalidateDescendants` covers anything
+  // that (unlike a plain `required` attribute) re-asserts its own
+  // constraint imperatively on every keystroke regardless of this row's
+  // state - a range pair's `isExemptedByAncestorHasProperty` check
+  // (`searchUtils.js`) only takes effect once something re-runs it, which
+  // otherwise wouldn't happen until the user next touches that field.
+  // `resyncAtLeastOne` covers the same gap for a child that's itself an
+  // `object`/`array`/`map`/etc. with its own "at least one facet" sentinel
+  // (`buildAtLeastOneSentinel`) - `revalidateDescendants`' event-redispatch
+  // reaches `array`/`map`/etc. fine (their own answer changes via a plain
+  // `input`/`change` on a real control), but not `objectSearchType.js`
+  // itself, whose sentinel changes when a row is added/removed - a button
+  // click and a structural DOM change, neither of which redispatching
+  // `input`/`change` events can simulate.
+  const syncChildState = () => {
+    if (!childRoot) {
+      return;
+    }
+    childRoot.hidden = select?.value === 'false';
+    setDescendantsRequired(childRoot, select?.value === '');
+    revalidateDescendants(childRoot);
+    resyncAtLeastOne(childRoot);
+  };
+  select?.addEventListener('change', syncChildState);
+  syncChildState();
+
+  return row;
+}
+
+/**
+ * A required property's own value-match widget, wrapped in an opt-in
+ * "Search on this property" checkbox (default unchecked) around a disabled
+ * `<fieldset>`: a required property has no existence to ask about, but it
+ * still auto-appears with no "Remove" affordance the moment its parent
+ * object is added (search plan build order never lists it in the "Add
+ * property" pull-down at all) - and several leaf widgets now mark their own
+ * value input `required` (`buildLiteralRegexControls`'s doc), which would
+ * otherwise make the *whole* form invalid the instant such a property's
+ * object exists, before the user has asked to search on it at all.
+ * `<fieldset disabled>` is a native way to exempt a whole subtree from
+ * constraint validation in one step (every descendant control, whatever
+ * type it turns out to be, stops blocking `checkValidity`/`reportValidity`
+ * while disabled) - checking the box re-enables the fieldset, making its
+ * contents both interactive and, if left with a `required` field empty,
+ * actually invalid again.
+ * @param {{
+ *   propertyName: string,
+ *   propSchema: import('../../formats/schema.js').ZodexSchema,
+ *   path: string,
+ *   typeNamespace: string|undefined,
+ *   topRoot: import('../../types.js').RootElement|undefined,
+ *   types: import('../../types.js').default|undefined,
+ *   originalJSON: import('../../formats/schema.js').ZodexSchema|undefined
+ * }} cfg
+ * @returns {HTMLElement}
+ */
+function buildRequiredPropertyRow ({
+  propertyName, propSchema, path, typeNamespace, topRoot, types, originalJSON
+}) {
+  const childPath = `${path}/${escapeJSONPointer(propertyName)}`;
+  const name = `${typeNamespace}-requiredProperty-${propertyName}`;
+  const childArr = buildSearchWidget({
+    schemaObject: propSchema, path: childPath, typeNamespace, topRoot, types,
+    originalJSON
+  });
+  const row = /** @type {HTMLElement} */ (jml('jsoe-search-required-property', {
+    dataset: {searchPath: childPath, searchKind: 'requiredProperty', propertyName},
+    $define: {
+      /** @this {HTMLElement} */
+      getQuery () {
+        if (!readCheckbox(this)) {
+          return undefined;
+        }
+        const searchPath = this.dataset.searchPath ?? '';
+        const childEl = findSearchElement(this, searchPath);
+        return childEl && hasGetQuery(childEl) ? childEl.getQuery() : undefined;
+      }
+    }
+  }, [
+    buildCheckbox({name, label: `Search on "${propertyName}"`}),
+    ['fieldset', {disabled: true, class: 'searchRequiredPropertyFieldset'}, [childArr]]
+  ]));
+
+  const checkbox = /** @type {HTMLInputElement|undefined} */ (
+    findOwnControl(row, 'input.jsoeSearchCheckbox')
+  );
+  const fieldset = /** @type {HTMLFieldSetElement|null} */ (
+    row.querySelector('fieldset.searchRequiredPropertyFieldset')
+  );
+  checkbox?.addEventListener('change', () => {
+    if (fieldset) {
+      fieldset.disabled = !checkbox.checked;
+    }
+    const objectRoot = row.closest('jsoe-search-object');
+    if (objectRoot) {
+      syncObjectValidity(/** @type {HTMLElement} */ (objectRoot));
+    }
+  });
+
+  return row;
 }
 
 /**
@@ -74,10 +255,16 @@ function buildHasPropertyRow ({
  * optional properties are offered ("avoid listing required" - a required
  * property is guaranteed present, so asking about its existence is
  * meaningless), and picking one from the pull-down adds a row for it
- * (removed from the pull-down so it can't be added twice); there is no
- * remove affordance, since setting a row's toggle back to "(any)" already
- * expresses "no constraint from this row" for the existence half, same as
- * clearing the nested widget does for the value half.
+ * (disabled in the pull-down, rather than removed, so it can't be added a
+ * second time while its row exists). Each row's own "Remove" button
+ * discards the row and re-enables its property in the pull-down, for
+ * undoing an added-by-mistake property - a coarser-grained option than
+ * setting the row's toggle back to "(any)" (which already expresses "no
+ * constraint from this row" without removing it). A required property gets
+ * no pull-down entry (its existence is never in question), but does still
+ * get its own row - `buildRequiredPropertyRow`'s opt-in checkbox, defaulting
+ * unchecked/disabled, so it doesn't force a search constraint the user never
+ * asked for just by existing.
  * @type {SearchTypeObject}
  */
 const objectSearchType = {
@@ -86,14 +273,36 @@ const objectSearchType = {
     const objectSchemaObject = /** @type {import('zodexy').SzObject} */ (
       schemaObject
     );
-    const availableProperties = Object.entries(
-      objectSchemaObject.properties
-    ).filter(([, propSchema]) => propSchema.isOptional === true);
+    const propertyEntries = Object.entries(objectSchemaObject.properties);
+    const availableProperties = propertyEntries.filter(
+      ([, propSchema]) => propSchema.isOptional === true
+    );
+    // A required property is guaranteed present, so a has/doesn't-have
+    // toggle would be meaningless for it (same reasoning `availableProperties`
+    // already uses to leave it out of the "Add property" pull-down) - but it
+    // still gets its own row, via `buildRequiredPropertyRow`'s opt-in
+    // checkbox, so it doesn't silently force a search constraint the user
+    // never asked for just by its parent object existing.
+    const requiredProperties = propertyEntries.filter(
+      ([, propSchema]) => propSchema.isOptional !== true
+    );
+    const requiredArr = requiredProperties.map(([propertyName, propSchema]) => (
+      buildRequiredPropertyRow({
+        propertyName, propSchema, path, typeNamespace, topRoot, types,
+        originalJSON
+      })
+    ));
 
     return ['jsoe-search-object', {
       dataset: {searchPath: path, searchKind: 'object'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          if (propertyEntries.length > 0) {
+            syncObjectValidity(this);
+          }
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const rows = [...this.children].filter(hasGetQuery);
@@ -129,17 +338,27 @@ const objectSearchType = {
               const propSchema = objectSchemaObject.properties[propertyName];
               const row = buildHasPropertyRow({
                 propertyName, propSchema, path, typeNamespace, topRoot, types,
-                originalJSON
+                originalJSON, addPropertySelect: select
               });
               container.append(row);
-              const option = select.querySelector(
-                `option[value="${CSS.escape(propertyName)}"]`
+              const option = /** @type {HTMLOptionElement|null} */ (
+                select.querySelector(
+                  `option[value="${CSS.escape(propertyName)}"]`
+                )
               );
-              option?.remove();
+              if (option) {
+                option.disabled = true;
+              }
+              select.value = '';
+              syncObjectValidity(/** @type {HTMLElement} */ (container));
             }
           }
         }, ['Add']]
-      ]]
+      ]],
+      ...requiredArr,
+      // Placed last purely for markup order; a plain rendered-but-off-
+      // screen input, so its position among siblings has no visual effect.
+      ...(propertyEntries.length > 0 ? [buildAtLeastOneSentinel()] : [])
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/regexpSearchType.js

@@ -1,4 +1,7 @@
-import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery, buildMultiSelect, readMultiSelect} from '../searchUtils.js';
+import {
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery,
+  buildMultiSelect, readMultiSelect, findOwnControl
+} from '../searchUtils.js';
 import {makeMultiSelectLeaf, combineAnd} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
 import regexpType from '../../fundamentalTypes/regexpType.js';
@@ -11,7 +14,13 @@ import regexpType from '../../fundamentalTypes/regexpType.js';
  * Regexp (source): OR literal or regex search/Does Not contain search, plus
  * a multiple-select search of flags (README). `regexpType.js`'s own
  * `allowedFlags` list is imported as-is for the flags control (search plan
- * §4 - already a plain exported property, no extraction needed).
+ * §4 - already a plain exported property, no extraction needed). Flags are
+ * a property of the regexp itself, not of how its source is being matched,
+ * but the Flags control is only shown (and only contributes to the query)
+ * while the source's own Mode is "Matches regex" - searching a source
+ * literal/substring while also constraining flags is a much rarer
+ * combination, and hiding Flags the rest of the time keeps the common case
+ * uncluttered.
  * @type {SearchTypeObject}
  */
 const regexpSearchType = {
@@ -26,7 +35,10 @@ const regexpSearchType = {
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const sourceLeaf = readLiteralRegexQuery(this, searchPath);
-          const selectedFlags = readMultiSelect(this);
+          const mode = /** @type {HTMLSelectElement|undefined} */ (
+            findOwnControl(this, 'select.jsoeSearchMode--')
+          )?.value;
+          const selectedFlags = mode === 'regex' ? readMultiSelect(this) : [];
           const flagsLeaf = selectedFlags.length
             ? makeMultiSelectLeaf(searchPath, {$in: selectedFlags})
             : undefined;
@@ -35,8 +47,20 @@ const regexpSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [`${label} (source)`]],
-      buildLiteralRegexControls({name}),
-      ['label', [
+      buildLiteralRegexControls({
+        name,
+        /** @this {HTMLElement} */
+        onModeChange () {
+          const flagsLabel = this.closest('jsoe-search-regexp')?.querySelector(
+            '.searchRegexpFlags'
+          );
+          if (flagsLabel) {
+            /** @type {HTMLElement} */ (flagsLabel).hidden =
+              /** @type {HTMLSelectElement} */ (this).value !== 'regex';
+          }
+        }
+      }),
+      ['label', {class: 'searchRegexpFlags', hidden: true}, [
         'Flags: ',
         buildMultiSelect({name: `${name}-flags`, options: regexpType.allowedFlags})
       ]]

package/src/search/fundamentalTypes/setSearchType.js

@@ -1,4 +1,8 @@
-import {buildPathLabel, buildLengthSizeControls, readLengthSizeQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {combineAnd} from '../queryTreeBuilders.js';
 import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
@@ -7,11 +11,25 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-set` element
+ * @returns {void}
+ */
+function syncSetValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readLengthSizeQuery(root, '') !== undefined || readOptInChecked(root)
+  );
+}
+
 /**
  * Has length/size of <number> (README) - no sparse toggle: unlike
  * `array`, a `Set` cannot have holes. Also recurses into the value schema's
  * own search widget (as `arraySearchType.js` does for its element), via the
- * same `*` path-segment convention (`queryTree.js`).
+ * same `*` path-segment convention (`queryTree.js`), wrapped in the same
+ * `buildOptInFieldset` `arraySearchType.js` uses and for the same reason -
+ * a length/size-only search should stay valid. Leaving *both* length/size
+ * and the element match unconfigured is still invalid, though
+ * (`buildAtLeastOneSentinel`), same as `arraySearchType.js`.
  * @type {SearchTypeObject}
  */
 const setSearchType = {
@@ -34,12 +52,20 @@ const setSearchType = {
       dataset: {searchPath: path, searchKind: 'set'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, '', () => syncSetValidity(this));
+          this.querySelector('input.jsoeSearchSize')?.addEventListener(
+            'input', () => syncSetValidity(this)
+          );
+          syncSetValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const lengthLeaf = readLengthSizeQuery(this, searchPath);
           const elementEl = findSearchElement(this, `${searchPath}/*`);
-          const elementLeaf = elementEl && hasGetQuery(elementEl)
+          const elementLeaf = elementEl && hasGetQuery(elementEl) && readOptInChecked(this)
             ? elementEl.getQuery()
             : undefined;
           return combineAnd([lengthLeaf, elementLeaf]);
@@ -53,10 +79,10 @@ const setSearchType = {
         max: setSchemaObject.maxSize,
         includeSparse: false
       }),
-      ['div', {class: 'searchSetElement'}, [
-        ['span', ['Element matches: ']],
-        elementArr
-      ]]
+      ...buildOptInFieldset({
+        name: `${name}-element`, label: 'Element matches', children: [elementArr]
+      }),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/stringSearchType.js

@@ -1,5 +1,6 @@
 import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
@@ -8,7 +9,15 @@ import {getQueryViaElement} from '../searchElementUtils.js';
 /**
  * OR literal or regex search/Does Not contain search (README; also covers
  * `StringObject` and `templateLiteral`, aliased to this same module in
- * `searchDispatch.js` since the query semantics are identical).
+ * `searchDispatch.js` since the query semantics are identical), plus - only
+ * while "Matches regex" is the chosen mode - a Flags multi-select
+ * (`buildLiteralRegexControls`'s `flagOptions`, `regexpType.js`'s own
+ * `allowedFlags` list reused as-is, matching `regexpSearchType.js`'s flags
+ * for the actual regexp's own flags): unlike `regexpSearchType.js`, whose
+ * "source" is already a real regexp with its own flags regardless of
+ * search mode, here the regex is only ever the search's *own* device for
+ * matching the string, so flags only make sense while that regex is
+ * actually in play.
  * @type {SearchTypeObject}
  */
 const stringSearchType = {
@@ -26,7 +35,7 @@ const stringSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [label]],
-      buildLiteralRegexControls({name})
+      buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/symbolSearchType.js

@@ -1,5 +1,6 @@
 import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
@@ -29,7 +30,7 @@ const symbolSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [`${label} (description)`]],
-      buildLiteralRegexControls({name})
+      buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/index.js

@@ -3,7 +3,7 @@ import {getSearchTypeObject, buildSearchWidget, resolveIntersection} from './sea
 
 /**
  * @typedef {{
- *   container: HTMLDivElement,
+ *   container: HTMLFormElement,
  *   $getQuery: () => import('./queryTree.js').QueryAnd,
  *   whenReady: Promise<void>
  * }} SearchChoicesControl
@@ -36,12 +36,22 @@ import {getSearchTypeObject, buildSearchWidget, resolveIntersection} from './sea
  * `$getQuery()` reads the live DOM into a `QueryAnd` on demand (`{$and:
  * []}` when nothing has been entered anywhere, matching the empty-`$and`
  * convention of "no constraint"), and a host that wants live updates wraps
- * it in its own `container.addEventListener('input', ...)` since
- * `container` is a plain `HTMLDivElement`. Every widget built so far is
- * synchronous, so `whenReady` (unlike `buildTypeChoices`'s) has no deferred
- * work to wait on and settles immediately - it's still returned, so a
- * caller can `await` either function uniformly without checking which one
- * it has.
+ * it in its own `container.addEventListener('input', ...)`. Every widget
+ * built so far is synchronous, so `whenReady` (unlike `buildTypeChoices`'s)
+ * has no deferred work to wait on and settles immediately - it's still
+ * returned, so a caller can `await` either function uniformly without
+ * checking which one it has.
+ *
+ * `container` is a real `<form>` (its own `submit` prevented, since it is
+ * never actually submitted) rather than a plain `<div>`, matching the edit
+ * side's own root `<form>` (`src/types.js`'s `Types.validValuesSet` reads
+ * `form.checkValidity()`) - the various cross-field checks the individual
+ * search widgets wire up (`searchUtils.js`'s `buildRangeInputsPair`,
+ * `dateSearchType.js`, etc.) are native Constraint Validation API calls
+ * (`setCustomValidity`/`required`), so a host only needs the one native
+ * `container.checkValidity()`/`container.reportValidity()` to check them
+ * all at once, the same way `demo/index-search.js`'s "Check validity"
+ * button does.
  * @param {{
  *   schemaContent: import('../formats/schema.js').ZodexSchema,
  *   typeNamespace?: string,
@@ -62,8 +72,15 @@ export function buildSearchChoices ({schemaContent, typeNamespace, topRoot, type
     schemaObject: schemaContent, path, typeNamespace, topRoot, types,
     originalJSON: schemaContent
   });
-  const container = /** @type {HTMLDivElement} */ (
-    jml('div', {class: 'searchChoicesContainer'}, [arr])
+  const container = /** @type {HTMLFormElement} */ (
+    jml('form', {
+      class: 'searchChoicesContainer',
+      $on: {
+        submit (e) {
+          e.preventDefault();
+        }
+      }
+    }, [arr])
   );
   const schemaObject = resolveIntersection(schemaContent, schemaContent);
   return {

package/src/search/queryTree.js

@@ -92,6 +92,14 @@
  * @typedef {{kind: 'integerCheck', path: string, isInteger: boolean}} QueryIntegerCheckLeaf
  */
 
+/**
+ * `date`: is/is-not a valid `Date` (a structured-cloned `Date` can itself be
+ * an "Invalid Date" - a `NaN` internal time value - `dateType.js`'s own
+ * `notANum`/`ValidDate`/`InvalidDate` handling deals with the same state on
+ * the edit side).
+ * @typedef {{kind: 'validDateCheck', path: string, isValid: boolean}} QueryValidDateCheckLeaf
+ */
+
 /**
  * `string`/`StringObject`/`Blob`/`File`/regexp-source/symbol-description
  * (via `$in`/`$nin`).
@@ -159,11 +167,14 @@
 
 /**
  * XPath/CSS-selector/full-text/raw-HTML-regex; no Mongo equivalent.
+ * `$options`, mirroring `QueryRegexLeaf`'s field of the same name, is only
+ * ever populated for `mode: 'rawHTMLRegex'`.
  * @typedef {{
  *   kind: 'blobHTML',
  *   path: string,
  *   mode: 'xpath'|'cssSelector'|'fullText'|'rawHTMLRegex',
- *   value: string
+ *   value: string,
+ *   $options?: string
  * }} QueryBlobHTMLLeaf
  */
 
@@ -220,7 +231,8 @@
 
 /**
  * @typedef {QueryHasPropertyLeaf|QueryLengthSizeLeaf|QueryRangeLeaf|
- *   QueryNotLeaf|QueryIntegerCheckLeaf|QueryLiteralSetLeaf|QueryRegexLeaf|
+ *   QueryNotLeaf|QueryIntegerCheckLeaf|QueryValidDateCheckLeaf|
+ *   QueryLiteralSetLeaf|QueryRegexLeaf|
  *   QueryNotContainsLeaf|QueryMultiSelectLeaf|QueryKeyValueEnumLeaf|
  *   QueryTypeOfLeaf|QueryBlobHTMLLeaf|QueryDomShapeLeaf|
  *   QueryMapRecordJointLeaf|QueryPassThroughLeaf|QueryPresenceLeaf|

package/src/search/queryTreeBuilders.js

@@ -97,6 +97,15 @@ export function makeIntegerCheckLeaf (path, isInteger) {
   return {kind: 'integerCheck', path, isInteger};
 }
 
+/**
+ * @param {string} path
+ * @param {boolean} isValid
+ * @returns {import('./queryTree.js').QueryValidDateCheckLeaf}
+ */
+export function makeValidDateCheckLeaf (path, isValid) {
+  return {kind: 'validDateCheck', path, isValid};
+}
+
 /**
  * @param {string} path
  * @param {{$in?: unknown[], $nin?: unknown[]}} cfg
@@ -163,10 +172,11 @@ export function makeTypeOfLeaf (path, searchType, discriminatorValue) {
  * @param {string} path
  * @param {import('./queryTree.js').QueryBlobHTMLLeaf['mode']} mode
  * @param {string} value
+ * @param {string} [$options]
  * @returns {import('./queryTree.js').QueryBlobHTMLLeaf}
  */
-export function makeBlobHTMLLeaf (path, mode, value) {
-  return {kind: 'blobHTML', path, mode, value};
+export function makeBlobHTMLLeaf (path, mode, value, $options) {
+  return {kind: 'blobHTML', path, mode, value, ...($options ? {$options} : {})};
 }
 
 /**