@es-joy/jsoe 0.30.0 → 0.32.0

package/src/search/fundamentalTypes/numberSearchType.js

@@ -1,9 +1,9 @@
 import {
   buildPathLabel, buildRangeInputsPair, readRangeInputsPair, buildTriStateSelect,
-  readTriStateSelect, syncRangeValidity
+  readTriStateSelect, syncRangeValidity, applyRangeQuery, applyTriState, extractLeafOfKind
 } from '../searchUtils.js';
 import {makeRangeLeaf, makeIntegerCheckLeaf, combineAnd} from '../queryTreeBuilders.js';
-import {getQueryViaElement} from '../searchElementUtils.js';
+import {getQueryViaElement, applyQueryViaElement} from '../searchElementUtils.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
@@ -40,6 +40,17 @@ const numberSearchType = {
             ? undefined
             : makeIntegerCheckLeaf(searchPath, isInteger);
           return combineAnd([rangeLeaf, integerLeaf]);
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const {matched: rangeLeaf} = extractLeafOfKind(queryNode, 'range');
+          applyRangeQuery(this, rangeLeaf);
+          const {matched: integerLeaf} = extractLeafOfKind(queryNode, 'integerCheck');
+          applyTriState(this, integerLeaf?.isInteger);
         }
       }
     }, [
@@ -53,7 +64,8 @@ const numberSearchType = {
       ]]
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default numberSearchType;

package/src/search/fundamentalTypes/objectSearchType.js

@@ -1,13 +1,15 @@
 import {jml} from '../../vendor-imports.js';
 import {escapeJSONPointer} from '../../utils/jsonPointer.js';
 import {
-  buildPathLabel, buildHasPropertyToggle, readTriStateSelect, findOwnControl,
-  buildCheckbox, readCheckbox, buildAtLeastOneSentinel, syncAtLeastOneCheck,
-  setDescendantsRequired, revalidateDescendants, resyncAtLeastOne
+  buildPathLabel, buildHasPropertyToggle, readTriStateSelect, applyTriState, findOwnControl,
+  buildCheckbox, readCheckbox, applyCheckbox, buildAtLeastOneSentinel, syncAtLeastOneCheck,
+  setDescendantsRequired, revalidateDescendants, resyncAtLeastOne,
+  extractLeafOfKind, extractClauseForPath
 } from '../searchUtils.js';
 import {combineAnd, makeHasPropertyLeaf} from '../queryTreeBuilders.js';
 import {
-  findSearchElement, getQueryViaElement, hasGetQuery
+  findSearchElement, getQueryViaElement, hasGetQuery,
+  applyQueryViaElement, hasApplyQuery
 } from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
 
@@ -307,6 +309,91 @@ const objectSearchType = {
         getQuery () {
           const rows = [...this.children].filter(hasGetQuery);
           return combineAnd(rows.map((row) => row.getQuery()));
+        },
+        /**
+         * `$define` methods are shared once per tag (this file's other
+         * docs), so - like `getQuery` - this reads every per-instance fact
+         * (which properties exist, their names) off `this`'s own live DOM
+         * rather than closing over `objectSchemaObject`/`propertyEntries`.
+         * A property the query doesn't reference is reset to "no
+         * constraint" (its tri-state back to "(any)"/checkbox unchecked,
+         * its own child cleared) rather than removed outright - cheaper and
+         * just as correct a way to reach the same resulting query, and
+         * non-destructive (the row, and any of the user's other in-progress
+         * edits to it, stay put to remove by hand if truly unwanted).
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const searchPath = this.dataset.searchPath ?? '';
+          let remaining = queryNode;
+
+          [...this.querySelectorAll(':scope > jsoe-search-has-property')].forEach((row) => {
+            const propertyName = /** @type {HTMLElement} */ (row).dataset.propertyName ?? '';
+            const childPath = `${searchPath}/${escapeJSONPointer(propertyName)}`;
+            const {matched, rest} = extractClauseForPath(remaining, childPath);
+            remaining = rest;
+            const {matched: existsLeaf, rest: childQuery} = extractLeafOfKind(matched, 'hasProperty');
+            applyTriState(row, existsLeaf?.$exists);
+            const childEl = findSearchElement(row, childPath);
+            if (childEl && hasApplyQuery(childEl)) {
+              childEl.applyQuery(childQuery);
+            }
+          });
+
+          [...this.querySelectorAll(':scope > jsoe-search-required-property')].forEach((row) => {
+            const propertyName = /** @type {HTMLElement} */ (row).dataset.propertyName ?? '';
+            const childPath = `${searchPath}/${escapeJSONPointer(propertyName)}`;
+            const {matched, rest} = extractClauseForPath(remaining, childPath);
+            remaining = rest;
+            applyCheckbox(row, matched !== undefined);
+            const childEl = findSearchElement(row, childPath);
+            if (childEl && hasApplyQuery(childEl)) {
+              childEl.applyQuery(matched);
+            }
+          });
+
+          // Optional properties the query references but that aren't added
+          // yet: pick each in turn from the pull-down and click "Add" (that
+          // click handler is wired per-instance, so - unlike this method -
+          // it's safe for it to close over this widget's own schema/path),
+          // then apply the same way an already-added row above would.
+          const addPropertySelect = /** @type {HTMLSelectElement|undefined} */ (
+            findOwnControl(this, 'select.addPropertySelect')
+          );
+          const addButton = /** @type {HTMLButtonElement|undefined} */ (
+            findOwnControl(this, 'button.addPropertyButton')
+          );
+          [...(addPropertySelect?.options ?? [])].
+            filter((opt) => opt.value && !opt.disabled).
+            map((opt) => opt.value).
+            forEach((propertyName) => {
+              const childPath = `${searchPath}/${escapeJSONPointer(propertyName)}`;
+              const {matched, rest} = extractClauseForPath(remaining, childPath);
+              if (matched === undefined) {
+                return;
+              }
+              remaining = rest;
+              if (addPropertySelect) {
+                addPropertySelect.value = propertyName;
+              }
+              addButton?.click();
+              const row = [
+                ...this.querySelectorAll(':scope > jsoe-search-has-property')
+              ].find((r) => /** @type {HTMLElement} */ (r).dataset.propertyName === propertyName);
+              if (!row) {
+                return;
+              }
+              const {matched: existsLeaf, rest: childQuery} = extractLeafOfKind(matched, 'hasProperty');
+              applyTriState(row, existsLeaf?.$exists);
+              const childEl = findSearchElement(row, childPath);
+              if (childEl && hasApplyQuery(childEl)) {
+                childEl.applyQuery(childQuery);
+              }
+            });
+
+          syncObjectValidity(this);
         }
       }
     }, [
@@ -325,6 +412,7 @@ const objectSearchType = {
           : ['span', ['(no optional properties to search on)']],
         ['button', {
           type: 'button',
+          class: 'addPropertyButton',
           $on: {
             click () {
               const container = this.closest('jsoe-search-object');
@@ -361,7 +449,8 @@ const objectSearchType = {
       ...(propertyEntries.length > 0 ? [buildAtLeastOneSentinel()] : [])
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default objectSearchType;

package/src/search/fundamentalTypes/promiseSearchType.js

@@ -1,6 +1,9 @@
-import {buildPathLabel} from '../searchUtils.js';
+import {buildPathLabel, extractLeafOfKind} from '../searchUtils.js';
 import {makePassThroughLeaf} from '../queryTreeBuilders.js';
-import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {
+  findSearchElement, getQueryViaElement, hasGetQuery,
+  applyQueryViaElement, hasApplyQuery
+} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
 
 /**
@@ -48,6 +51,19 @@ const promiseSearchType = {
           return childQuery === undefined
             ? undefined
             : makePassThroughLeaf(searchPath, childQuery);
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const {matched} = extractLeafOfKind(queryNode, 'passThrough');
+          const searchPath = this.dataset.searchPath ?? '';
+          const childEl = findSearchElement(this, searchPath);
+          if (childEl && hasApplyQuery(childEl)) {
+            childEl.applyQuery(matched?.query);
+          }
         }
       }
     }, [
@@ -55,7 +71,8 @@ const promiseSearchType = {
       childArr
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default promiseSearchType;

package/src/search/fundamentalTypes/regexpSearchType.js

@@ -1,9 +1,9 @@
 import {
-  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery,
-  buildMultiSelect, readMultiSelect, findOwnControl
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery, applyLiteralRegexQuery,
+  buildMultiSelect, readMultiSelect, applyMultiSelect, findOwnControl, extractLeafOfKind
 } from '../searchUtils.js';
 import {makeMultiSelectLeaf, combineAnd} from '../queryTreeBuilders.js';
-import {getQueryViaElement} from '../searchElementUtils.js';
+import {getQueryViaElement, applyQueryViaElement} from '../searchElementUtils.js';
 import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
@@ -43,6 +43,25 @@ const regexpSearchType = {
             ? makeMultiSelectLeaf(searchPath, {$in: selectedFlags})
             : undefined;
           return combineAnd([sourceLeaf, flagsLeaf]);
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const {matched: flagsLeaf, rest: sourceLeaf} = extractLeafOfKind(queryNode, 'multiSelect');
+          // Sets Mode/Value first (dispatching the `change` that also
+          // toggles the Flags multi-select's own `hidden` state via this
+          // widget's `onModeChange`), then Flags.
+          applyLiteralRegexQuery(
+            this,
+            /**
+             * @type {import('../queryTree.js').QueryLiteralSetLeaf|
+             *import('../queryTree.js').QueryRegexLeaf|
+              import('../queryTree.js').QueryNotContainsLeaf|undefined} */ (sourceLeaf)
+          );
+          applyMultiSelect(this, flagsLeaf?.$in ?? []);
         }
       }
     }, [
@@ -66,7 +85,8 @@ const regexpSearchType = {
       ]]
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default regexpSearchType;

package/src/search/fundamentalTypes/setSearchType.js

@@ -1,10 +1,13 @@
 import {
-  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery,
-  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
-  buildAtLeastOneSentinel, syncAtLeastOneCheck
+  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery, applyLengthSizeQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset, applyOptIn,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck, extractLeafOfKind
 } from '../searchUtils.js';
 import {combineAnd} from '../queryTreeBuilders.js';
-import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {
+  findSearchElement, getQueryViaElement, hasGetQuery,
+  applyQueryViaElement, hasApplyQuery
+} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
 
 /**
@@ -69,6 +72,22 @@ const setSearchType = {
             ? elementEl.getQuery()
             : undefined;
           return combineAnd([lengthLeaf, elementLeaf]);
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const searchPath = this.dataset.searchPath ?? '';
+          const {matched: lengthLeaf, rest} = extractLeafOfKind(queryNode, 'lengthSize');
+          applyLengthSizeQuery(this, lengthLeaf);
+          applyOptIn(this, rest !== undefined, '');
+          const elementEl = findSearchElement(this, `${searchPath}/*`);
+          if (elementEl && hasApplyQuery(elementEl)) {
+            elementEl.applyQuery(rest);
+          }
+          syncSetValidity(this);
         }
       }
     }, [
@@ -85,7 +104,8 @@ const setSearchType = {
       buildAtLeastOneSentinel()
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default setSearchType;

package/src/search/fundamentalTypes/stringSearchType.js

@@ -1,5 +1,7 @@
-import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
-import {getQueryViaElement} from '../searchElementUtils.js';
+import {
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery, applyLiteralRegexQuery
+} from '../searchUtils.js';
+import {getQueryViaElement, applyQueryViaElement} from '../searchElementUtils.js';
 import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
@@ -31,6 +33,25 @@ const stringSearchType = {
         /** @this {HTMLElement} */
         getQuery () {
           return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+        },
+        /**
+         * `getQuery` returns a bare leaf here (no other facet to combine it
+         * with via `$and`), so `queryNode` normally already is one -
+         * unwrapping a trivial one-element `$and` too just tolerates a
+         * hand-edited raw query that wraps it anyway.
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const leaf = queryNode && '$and' in queryNode ? queryNode.$and[0] : queryNode;
+          applyLiteralRegexQuery(
+            this,
+            /**
+             * @type {import('../queryTree.js').QueryLiteralSetLeaf|
+             *import('../queryTree.js').QueryRegexLeaf|
+              import('../queryTree.js').QueryNotContainsLeaf|undefined} */ (leaf)
+          );
         }
       }
     }, [
@@ -38,7 +59,8 @@ const stringSearchType = {
       buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default stringSearchType;

package/src/search/fundamentalTypes/symbolSearchType.js

@@ -1,5 +1,7 @@
-import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
-import {getQueryViaElement} from '../searchElementUtils.js';
+import {
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery, applyLiteralRegexQuery
+} from '../searchUtils.js';
+import {getQueryViaElement, applyQueryViaElement} from '../searchElementUtils.js';
 import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
@@ -26,6 +28,21 @@ const symbolSearchType = {
         /** @this {HTMLElement} */
         getQuery () {
           return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+        },
+        /**
+         * @this {HTMLElement}
+         * @param {import('../queryTree.js').QueryNode|undefined} queryNode
+         * @returns {void}
+         */
+        applyQuery (queryNode) {
+          const leaf = queryNode && '$and' in queryNode ? queryNode.$and[0] : queryNode;
+          applyLiteralRegexQuery(
+            this,
+            /**
+             * @type {import('../queryTree.js').QueryLiteralSetLeaf|
+             *import('../queryTree.js').QueryRegexLeaf|
+              import('../queryTree.js').QueryNotContainsLeaf|undefined} */ (leaf)
+          );
         }
       }
     }, [
@@ -33,7 +50,8 @@ const symbolSearchType = {
       buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
     ]];
   },
-  getQuery: getQueryViaElement
+  getQuery: getQueryViaElement,
+  applyQuery: applyQueryViaElement
 };
 
 export default symbolSearchType;

package/src/search/index.js

@@ -5,6 +5,7 @@ import {getSearchTypeObject, buildSearchWidget, resolveIntersection} from './sea
  * @typedef {{
  *   container: HTMLFormElement,
  *   $getQuery: () => import('./queryTree.js').QueryAnd,
+ *   $applyQuery: (queryDoc: import('./queryTree.js').QueryAnd) => void,
  *   whenReady: Promise<void>
  * }} SearchChoicesControl
  */
@@ -91,6 +92,27 @@ export function buildSearchChoices ({schemaContent, typeNamespace, topRoot, type
       });
       return {$and: result === undefined ? [] : [result]};
     },
+    /**
+     * The "Edit raw" round-trip's entry point - the inverse of `$getQuery`,
+     * unwrapping its own `{$and: [...]}` convention back to a bare
+     * `QueryNode` (or `undefined` for an empty `$and`, "no constraint")
+     * before handing off to the root schema's own `applyQuery`, which
+     * recurses through the whole tree exactly as `getQuery` does.
+     * @param {import('./queryTree.js').QueryAnd} queryDoc
+     * @returns {void}
+     */
+    $applyQuery (queryDoc) {
+      const {$and: clauses} = queryDoc;
+      let queryNode;
+      if (clauses.length === 1) {
+        [queryNode] = clauses;
+      } else if (clauses.length > 1) {
+        queryNode = {$and: clauses};
+      }
+      getSearchTypeObject(schemaObject).applyQuery({
+        root: container, path, queryNode
+      });
+    },
     whenReady: Promise.resolve()
   };
 }

package/src/search/queryTree.js

@@ -167,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
  */
 

package/src/search/queryTreeBuilders.js

@@ -172,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} : {})};
 }
 
 /**

package/src/search/searchDispatch.js

@@ -41,9 +41,12 @@ import blobHTMLSearchType from './subTypes/blobHTMLSearchType.js';
  */
 
 /**
- * The search-side analogue of `TypeObject` (`src/types.js:308-408`): two
- * methods, `buildUI` (a `jml` array) and `getQuery` (reads the built DOM
- * back into a `QueryNode`, or `undefined` when no constraint was entered).
+ * The search-side analogue of `TypeObject` (`src/types.js:308-408`): three
+ * methods, `buildUI` (a `jml` array), `getQuery` (reads the built DOM back
+ * into a `QueryNode`, or `undefined` when no constraint was entered), and
+ * `applyQuery` (the inverse - drives the built DOM back into the state a
+ * previously-read, or hand-edited, `QueryNode` describes, for the "Edit raw"
+ * round-trip, `SearchChoicesControl.$applyQuery`, `src/search/index.js`).
  * @typedef {{
  *   buildUI: (cfg: {
  *     schemaObject: import('../formats/schema.js').ZodexSchema,
@@ -56,7 +59,12 @@ import blobHTMLSearchType from './subTypes/blobHTMLSearchType.js';
  *   getQuery: (cfg: {
  *     root: HTMLElement,
  *     path: string
- *   }) => QueryNode|undefined
+ *   }) => QueryNode|undefined,
+ *   applyQuery: (cfg: {
+ *     root: HTMLElement,
+ *     path: string,
+ *     queryNode: QueryNode|undefined
+ *   }) => void
  * }} SearchTypeObject
  */
 
@@ -71,7 +79,8 @@ import blobHTMLSearchType from './subTypes/blobHTMLSearchType.js';
 function stubSearchType (searchSchemaType) {
   return {
     buildUI: () => ['span', [`TODO: ${searchSchemaType}`]],
-    getQuery: () => undefined
+    getQuery: () => undefined,
+    applyQuery () {}
   };
 }
 

package/src/search/searchElementUtils.js

@@ -1,10 +1,12 @@
 import {
   buildPathLabel, buildCheckbox, readCheckbox,
-  buildLiteralRegexControls, readLiteralRegexQuery,
-  buildRangeInputsPair, readRangeInputsPair, syncRangeValidity,
-  buildTriStateSelect, readTriStateSelect,
-  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
-  buildAtLeastOneSentinel, syncAtLeastOneCheck
+  buildLiteralRegexControls, readLiteralRegexQuery, applyOptInLiteralRegexFacet,
+  buildRangeInputsPair, readRangeInputsPair, syncRangeValidity, applyOptInRangeFacet,
+  applyRangeQuery,
+  buildTriStateSelect, readTriStateSelect, applyTriState,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset, applyOptIn,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck,
+  extractLeafOfKind
 } from './searchUtils.js';
 import {combineAnd, makeRangeLeaf, makeDomShapeLeaf} from './queryTreeBuilders.js';
 import regexpType from '../fundamentalTypes/regexpType.js';
@@ -27,7 +29,8 @@ export function findSearchElement (root, path) {
 
 /**
  * @typedef {HTMLElement & {
- *   getQuery: () => import('./queryTree.js').QueryNode|undefined
+ *   getQuery: () => import('./queryTree.js').QueryNode|undefined,
+ *   applyQuery?: (queryNode: import('./queryTree.js').QueryNode|undefined) => void
  * }} SearchElement
  */
 
@@ -45,6 +48,24 @@ export function getQueryViaElement ({root, path}) {
   return el?.getQuery();
 }
 
+/**
+ * The `SearchTypeObject.applyQuery` every module implements identically -
+ * the "Edit raw" round-trip's counterpart to `getQueryViaElement`: locate
+ * the element built under `root` and delegate to its own `applyQuery(...)`
+ * method.
+ * @param {{
+ *   root: HTMLElement, path: string,
+ *   queryNode: import('./queryTree.js').QueryNode|undefined
+ * }} cfg
+ * @returns {void}
+ */
+export function applyQueryViaElement ({root, path, queryNode}) {
+  const el = /** @type {SearchElement|undefined} */ (
+    findSearchElement(root, path)
+  );
+  el?.applyQuery?.(queryNode);
+}
+
 /**
  * Type-predicate guard distinguishing a built search element (leaf or
  * container, either answers to `.getQuery()`) from a plain DOM node - used
@@ -60,6 +81,20 @@ export function hasGetQuery (el) {
     'function';
 }
 
+/**
+ * Same as `hasGetQuery`, for `applyQuery` - a container walking its own
+ * children to recurse an "Edit raw" apply into each needs to know which
+ * ones answer to it, same reasoning as `hasGetQuery`'s own doc.
+ * @param {Element} el
+ * @returns {el is SearchElement & {applyQuery: (
+ *   queryNode: import('./queryTree.js').QueryNode|undefined
+ * ) => void}}
+ */
+export function hasApplyQuery (el) {
+  return typeof (/** @type {{applyQuery?: unknown}} */ (el)).applyQuery ===
+    'function';
+}
+
 /**
  * Factory for the README's "no variants to allow for distinct search"
  * leaves (`undefined`/`void`, `null`, `NaN`): the only meaningful question
@@ -89,7 +124,10 @@ export function makePresenceOnlySearchType ({tagName}) {
             return checked
               ? {kind: 'presence', path: this.dataset.searchPath ?? '', $exists: true}
               : undefined;
-          }
+          },
+          // The checkbox is permanently checked and `disabled` - nothing
+          // for a raw query to change here either way.
+          applyQuery () {}
         }
       }, [
         ['span', {class: 'searchLabel'}, [label]],
@@ -98,7 +136,8 @@ export function makePresenceOnlySearchType ({tagName}) {
         })
       ]];
     },
-    getQuery: getQueryViaElement
+    getQuery: getQueryViaElement,
+    applyQuery: applyQueryViaElement
   };
 }
 
@@ -211,11 +250,27 @@ export function makeErrorFamilySearchType ({tagName}) {
               });
             });
             return combineAnd([...stringLeaves, ...numberLeaves]);
+          },
+          /**
+           * @this {HTMLElement}
+           * @param {import('./queryTree.js').QueryNode|undefined} queryNode
+           * @returns {void}
+           */
+          applyQuery (queryNode) {
+            const searchPath = this.dataset.searchPath ?? '';
+            errorStringProps.forEach((prop) => {
+              applyOptInLiteralRegexFacet(this, queryNode, `${searchPath}/${prop}`, prop);
+            });
+            errorNumberProps.forEach((prop) => {
+              applyOptInRangeFacet(this, queryNode, `${searchPath}/${prop}`, prop);
+            });
+            syncErrorFamilyValidity(this);
           }
         }
       }, buildErrorFamilyChildren({label, name})];
     },
-    getQuery: getQueryViaElement
+    getQuery: getQueryViaElement,
+    applyQuery: applyQueryViaElement
   };
 }
 
@@ -362,12 +417,45 @@ export function makeDomShapeSearchType ({
                 ? {}
                 : {dimensionCheck: dimensionCheck ? 3 : 2})
             });
+          },
+          /**
+           * @this {HTMLElement}
+           * @param {import('./queryTree.js').QueryNode|undefined} queryNode
+           * @returns {void}
+           */
+          applyQuery (queryNode) {
+            // A `domShape` leaf embeds each dimension's own `range` leaf
+            // directly (`dimensions`), not via `$and` - so, unlike
+            // `makeErrorFamilySearchType`'s flat properties,
+            // `extractClauseForPath` (which `applyOptInRangeFacet` uses)
+            // isn't needed here: read the whole leaf once and apply each
+            // dimension straight from it.
+            const {matched} = extractLeafOfKind(queryNode, 'domShape');
+            dimensionKeys.forEach((dim) => {
+              const dimLeaf = matched?.dimensions[dim];
+              applyOptIn(this, dimLeaf !== undefined, dim);
+              applyRangeQuery(this, dimLeaf, dim);
+            });
+            if (includeReadonly) {
+              applyTriState(this, matched?.readonlyCheck, 'readonly');
+            }
+            if (includeDimensionCheck) {
+              applyTriState(
+                this,
+                matched?.dimensionCheck === undefined
+                  ? undefined
+                  : matched.dimensionCheck === 3,
+                'dimension'
+              );
+            }
+            syncDomShapeValidity({root: this, dimensionKeys, includeReadonly, includeDimensionCheck});
           }
         }
       }, buildDomShapeChildren({
         label, name, dimensionKeys, includeReadonly, includeDimensionCheck
       })];
     },
-    getQuery: getQueryViaElement
+    getQuery: getQueryViaElement,
+    applyQuery: applyQueryViaElement
   };
 }