@es-joy/jsoe 0.28.2 → 0.30.0

package/src/jsoe.css

@@ -151,6 +151,24 @@ video.recordedMedia {
   color: #b00;
 }
 
+/* `demo/index-search.js`'s "Check validity" button and its immediately-
+   following result text (`.validityResult`) are both inline (a `<button>`
+   and a `<span>`), so without this they run together with no gap. */
+.checkValidityButton {
+  margin-inline-end: 0.5em;
+}
+
+/* `demo/index-search.js`'s per-section "Get query" result: a query for a
+   deeply-nested schema can be a long single-line JSON string, so this needs
+   the same scrollable-box treatment as `.jsoe-raw-editor` rather than
+   growing the page. */
+.queryResult {
+  max-width: 100%;
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid;
+}
+
 .visualizer {
   height: 60px;
 }
@@ -211,6 +229,7 @@ video.recordedMedia {
   background-color: purple;
 }
 [data-type="date"] {
+  color: white;
   background-color: teal;
 }
 [data-type="regexp"] {
@@ -258,6 +277,191 @@ video.recordedMedia {
   background-color: lightgray;
 }
 
+/* Search widgets (`buildSearchChoices`/`buildSearchWidget`, `src/search/`):
+   every built widget's custom-element root carries `data-search-kind`
+   (the leaf/composite kind it was built for - `object`, `array`, or, for
+   the "checked"-type factories that have no structural schema of their
+   own, the full tag name e.g. `jsoe-search-error`). Block-level with the
+   same border/padding treatment as `fieldset.xorTypeChoices` above, so a
+   hierarchical type's recursively-nested child widgets land on their own
+   indented line rather than running together inline, and the same
+   background colors as the corresponding view/edit UI `[data-type]` rules
+   above, so a given type reads the same whether browsing or searching. */
+[data-search-kind] {
+  display: block;
+  margin-block: 0.3em;
+  padding: 0.3em 0.6em 0.4em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  /* Reset explicitly rather than relying on inheriting the page default:
+     a light-background kind (e.g. `tuple`'s "args" widget nested inside a
+     dark-background `function`) would otherwise inherit that ancestor's
+     `color: white` and become unreadable against its own light
+     background. */
+  color: #000;
+}
+
+/* `objectSearchType.js` hides a "Doesn't have" property's own recursed
+   widget via the native `hidden` attribute - restore its effect, since the
+   unconditional `display: block` above (an author rule) would otherwise
+   beat the browser's default `[hidden] { display: none }` UA rule. */
+[data-search-kind][hidden] {
+  display: none;
+}
+
+/* A descendant selector rather than `>` (direct child): every search module
+   places its own `.searchLabel` as a direct child of its widget root except
+   `objectSearchType.js`, which nests it one level deeper inside its own
+   `.searchObjectControls` wrapper (alongside the "Add property" pull-down) -
+   a `>` combinator would leave that one span inline, squished directly
+   against the pull-down's label right after it with no gap. */
+[data-search-kind] .searchLabel {
+  display: block;
+  font-weight: bold;
+  margin-block-end: 0.2em;
+}
+
+/* `objectSearchType.js`'s required-property row, and `searchUtils.js`'s
+   shared `buildOptInFieldset` (array/set/tuple/filelist's element match(es),
+   map/record's key/value, file's name/content-type), both wrap a recursed
+   widget in a `<fieldset disabled>` (native constraint-validation opt-out
+   for the whole subtree, toggled by an "opt in" checkbox) purely for that
+   behavior, not for its default border/padding - which would otherwise
+   double up with the child widget's own `[data-search-kind]` box drawn just
+   inside it. `[class^=...]` matches `buildOptInFieldset`'s `key`-suffixed
+   class regardless of `key`. */
+fieldset.searchRequiredPropertyFieldset,
+fieldset[class^="jsoeSearchOptInFieldset--"] {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* `buildOptInFieldset`'s own "Key matches"/"Element matches"/etc. checkbox
+   label - `[data-search-kind] label`'s `margin-inline-end` above is meant
+   for short *inline* control pairs sharing one line (a "From:"/"To:"
+   pair), not a facet-toggling label like this one, which reads better
+   started on its own line rather than run together with whatever came
+   before it (an adjacent length/size control, another facet's own label,
+   etc). */
+[data-search-kind] .jsoeSearchOptInLabel {
+  display: block;
+}
+
+/* `searchUtils.js`'s `buildAtLeastOneSentinel` - kept off-screen without
+   `display: none`/the `hidden` attribute, which would exempt it from the
+   Constraint Validation API entirely (the same reason `[hidden]` needed a
+   `display: none` override above for `objectSearchType.js`'s "Doesn't
+   have" case, just the opposite problem: there, hiding needed to *win*;
+   here, hiding must *not* affect validity). Standard "visually-hidden"
+   technique - present and rendered, just clipped to nothing. */
+.searchAtLeastOneSentinel {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Inline control pairs built by `searchUtils.js` (a "Mode:"/"Value:" pair
+   from `buildLiteralRegexControls`, a "From:"/"To:" pair from
+   `buildRangeInputsPair`, a trailing tri-state like "Integer:") are each
+   their own `<label>` with no whitespace between them in the built markup,
+   so without this they visually run together (e.g. "To: [input]Integer:
+   [select]"). */
+[data-search-kind] label {
+  margin-inline-end: 0.6em;
+}
+
+/* Nested child widgets get progressively inset, so a hierarchical type's
+   structure (object properties, array/set elements, map/record key-value,
+   union branches, etc.) stays legible several levels deep. */
+[data-search-kind] [data-search-kind] {
+  margin-inline-start: 0.8em;
+}
+
+/* Dark backgrounds get a light text color so labels/inputs stay readable
+   (unlike the view/edit `[data-type]` rules above, which - for these same
+   colors - rely on their content being a short, bolded inline leaf rather
+   than a whole widget's worth of labels and form controls). */
+[data-search-kind="jsoe-search-undefined"] {
+  background-color: green;
+  color: white;
+}
+[data-search-kind="jsoe-search-null"] {
+  background-color: lightgreen;
+}
+[data-search-kind="jsoe-search-nan"] {
+  background-color: green;
+  color: white;
+}
+[data-search-kind="boolean"] {
+  background-color: aqua;
+}
+[data-search-kind="number"] {
+  background-color: violet;
+}
+[data-search-kind="string"] {
+  background-color: lightblue;
+}
+[data-search-kind="array"], [data-search-kind="tuple"] {
+  background-color: lightyellow;
+}
+[data-search-kind="object"], [data-search-kind="record"] {
+  background-color: orange;
+}
+[data-search-kind="symbol"] {
+  background-color: lightgreen;
+}
+[data-search-kind="promise"] {
+  background-color: orange;
+}
+[data-search-kind="function"] {
+  background-color: teal;
+  color: white;
+}
+[data-search-kind="date"] {
+  background-color: teal;
+  color: white;
+}
+[data-search-kind="regexp"] {
+  background-color: yellow;
+}
+[data-search-kind="SpecialRealNumber"] {
+  background-color: red;
+  color: white;
+}
+[data-search-kind="blobHTML"] {
+  background-color: sandybrown;
+}
+[data-search-kind="jsoe-search-error"],
+[data-search-kind="jsoe-search-errors-special"] {
+  background-color: red;
+  color: white;
+}
+[data-search-kind="file"] {
+  background-color: beige;
+}
+[data-search-kind="filelist"] {
+  background-color: bisque;
+}
+[data-search-kind="blob"] {
+  background-color: lightgray;
+}
+[data-search-kind="buffersource"] {
+  background-color: beige;
+}
+[data-search-kind="map"], [data-search-kind="set"],
+[data-search-kind="bigint"], [data-search-kind="domexception"],
+[data-search-kind="jsoe-search-domrect"], [data-search-kind="jsoe-search-dompoint"],
+[data-search-kind="jsoe-search-dommatrix"] {
+  background-color: lightgray;
+}
+
 .typedArrayArea {
   overflow: auto;
   max-height: 250px;

package/src/jtltExtensions.js

@@ -0,0 +1,103 @@
+/**
+ * A minimal structural stand-in for the jtlt template `this` context — just
+ * the two members these extensions use. Defined locally (rather than
+ * imported from jtlt) so this module adds no dependency on jtlt itself;
+ * jtlt's own `ContextExtensions` augmentation is a wider, compatible type.
+ * `get` mirrors `JSONPathTransformerContext#get(select, wrap)`: a JSONPath
+ * query against the current template data (or that data itself when
+ * `select` is falsy).
+ * @typedef {{
+ *   appendOutput: (item: unknown) => unknown,
+ *   get: (select: string|undefined, wrap: boolean) => unknown
+ * }} JtltExtensionContext
+ */
+
+/**
+ * The argument object a declarative `{$generateJsoeEditUI: {...}}` /
+ * `{$generateJsoeViewUI: {...}}` node supplies, entirely unresolved — see
+ * jtlt's own extension-call mechanism (`jsonTemplate.js`'s `runOperation`,
+ * jtlt 0.21.0+): jtlt does not interpret any of these keys itself, so
+ * resolving `select` (via `this.get`) is this module's own job, not
+ * jtlt's. `db`/`store`, when given, name which store's schema should shape
+ * the built controls — independent of `select`, since the *value* being
+ * edited/viewed and the *store it belongs to* are two separate facts a
+ * template may need to supply together (e.g. when a `behavior` reads rows
+ * from a store other than the one its own route targets).
+ * @typedef {{select: string, db?: string, store?: string}} JsoeUIArgs
+ */
+
+/**
+ * Builds a `generateJsoeEditUI` / `generateJsoeViewUI` pair, ready to spread
+ * into a jtlt `config.extensions` object — see
+ * `~/idb-manager/ROUTE-OVERRIDES-PLAN.md` §5 ("idb-manager behavior
+ * extensions"). Each function is a jtlt extension called with the
+ * declarative node's own argument object, e.g. `{$generateJsoeEditUI:
+ * {select: '$.record', db: 'myDb', store: 'myStore'}}` → `this.
+ * generateJsoeEditUI({select: '$.record', db: 'myDb', store: 'myStore'})`
+ * (or, from the raw-JS override tier, the same call made directly). It
+ * resolves `select` itself (`this.get(select, false)`), looks up that
+ * store's schema via `getSchemaContent` when `db`/`store` are both given,
+ * builds jsoe's own edit/view control tree for the resolved value, and
+ * inserts it into the current output itself via `this.appendOutput(...)`
+ * — matching jtlt's own `$renderDefault` convention of the extension doing
+ * its own insertion rather than returning a value for the interpreter to
+ * place.
+ *
+ * Takes the caller's own `Types` instance rather than constructing one:
+ * idb-manager (for example) already has a single, app-wide `Types`
+ * instance (`new Types()` in `Router.js`) configured with whatever
+ * constructor options it needs, and every control this builds should share
+ * that configuration, not a second, independently-configured one.
+ * @param {import('./types.js').default} types
+ * @param {{
+ *   typeNamespace?: string,
+ *   getSchemaContent?: (db: string, store: string) => (
+ *     import('./formats/schema.js').ZodexSchema | undefined |
+ *     Promise<import('./formats/schema.js').ZodexSchema | undefined>
+ *   )
+ * }} [options] - `typeNamespace` scopes the jsoe-internal type-choice state
+ *   so this doesn't collide with unrelated controls the same page builds
+ *   elsewhere (see other `getControlsForFormatAndValue` call sites' own
+ *   `typeNamespace` values); defaults to `'jtlt'`. `getSchemaContent`, when
+ *   given, is called with each call's own `db`/`store` (e.g. wrapping
+ *   idb-manager's `Schemas.js` lookup) — resolved fresh per call, so a
+ *   single bundle correctly serves a `behavior` that edits/views records
+ *   from more than one store, each with its own schema. Omitted (or a
+ *   call's `db`/`store` omitted) means no schema — jsoe's controls still
+ *   work, inferring type choices from the value alone.
+ * @returns {{
+ *   generateJsoeEditUI: (
+ *     this: JtltExtensionContext, argObject: JsoeUIArgs
+ *   ) => Promise<void>,
+ *   generateJsoeViewUI: (
+ *     this: JtltExtensionContext, argObject: JsoeUIArgs
+ *   ) => Promise<void>
+ * }}
+ */
+export default function createJtltExtensions (
+  types, {typeNamespace = 'jtlt', getSchemaContent} = {}
+) {
+  /**
+   * @param {boolean} readonly
+   * @returns {(
+   *   this: JtltExtensionContext, argObject: JsoeUIArgs
+   * ) => Promise<void>}
+   */
+  const buildAndAppend = (readonly) => async function (argObject) {
+    const {select, db, store} = argObject;
+    const value = this.get(select, false);
+    const schemaContent = db !== undefined && store !== undefined &&
+      getSchemaContent
+      ? await getSchemaContent(db, store)
+      : undefined;
+    const el = await types.getControlsForFormatAndValue(
+      'structuredCloning', value, {readonly, typeNamespace, schemaContent}
+    );
+    this.appendOutput(el);
+  };
+
+  return {
+    generateJsoeEditUI: buildAndAppend(false),
+    generateJsoeViewUI: buildAndAppend(true)
+  };
+}

package/src/search/fundamentalTypes/arraySearchType.js

@@ -0,0 +1,101 @@
+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';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @param {Element} root - a `jsoe-search-array` element
+ * @returns {void}
+ */
+function syncArrayValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readLengthSizeQuery(root, '') !== undefined || readOptInChecked(root)
+  );
+}
+
+/**
+ * Has length/size of <number>; Is/Is not sparse (README), plus - by
+ * recursing into the element schema's own search widget (search plan §6
+ * build order) - "the array contains at least one element matching Y",
+ * expressed via a `*` path segment (`queryTree.js`) so no dedicated wrapper
+ * leaf kind is needed: the two constraints simply combine with `$and`. The
+ * element match is wrapped in `buildOptInFieldset` (default unchecked/
+ * disabled) so a length/size-only search stays valid: unlike the length/
+ * size inputs (plain, un-`required` numbers), the recursed element widget
+ * can itself carry `required` controls (e.g. a `string` element's Value),
+ * which would otherwise force this whole array invalid just for existing,
+ * whether or not the user actually wants an element constraint. Leaving
+ * both length/size and the element match unconfigured at once is still
+ * invalid, though (`buildAtLeastOneSentinel`) - the same "no absent values"
+ * reasoning as everywhere else, just with two facets where either alone
+ * already suffices.
+ * @type {SearchTypeObject}
+ */
+const arraySearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-array`;
+    const arraySchemaObject = /** @type {import('zodexy').SzArray} */ (
+      schemaObject
+    );
+    const elementPath = `${path}/*`;
+    const elementArr = buildSearchWidget({
+      schemaObject: arraySchemaObject.element,
+      path: elementPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-array', {
+      dataset: {searchPath: path, searchKind: 'array'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, '', () => syncArrayValidity(this));
+          this.querySelector('input.jsoeSearchSize')?.addEventListener(
+            'input', () => syncArrayValidity(this)
+          );
+          this.querySelector('select.jsoeSearchTriState--')?.addEventListener(
+            'change', () => syncArrayValidity(this)
+          );
+          syncArrayValidity(this);
+        },
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const lengthLeaf = readLengthSizeQuery(this, searchPath);
+          const elementEl = findSearchElement(this, `${searchPath}/*`);
+          const elementLeaf = elementEl && hasGetQuery(elementEl) && readOptInChecked(this)
+            ? elementEl.getQuery()
+            : undefined;
+          return combineAnd([lengthLeaf, elementLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildLengthSizeControls({
+        name,
+        min: arraySchemaObject.minLength,
+        max: arraySchemaObject.maxLength,
+        includeSparse: true
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-element`, label: 'Element matches', children: [elementArr]
+      }),
+      buildAtLeastOneSentinel()
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default arraySearchType;

package/src/search/fundamentalTypes/bigintSearchType.js

@@ -0,0 +1,68 @@
+import {
+  buildPathLabel, buildRangeInputsPair, readRangeInputsPair, syncRangeValidity
+} from '../searchUtils.js';
+import {makeRangeLeaf} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @param {string} str
+ * @returns {string|undefined}
+ */
+function parseBigIntBound (str) {
+  if (!str) {
+    return undefined;
+  }
+  try {
+    // Kept as a decimal string (not a runtime `BigInt`) so the tree stays
+    //   JSON-serializable, mirroring `dateSearchType.js`'s ISO-string bounds.
+    return String(BigInt(str));
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * OR Ranges/Is Not Range (README) - text inputs rather than
+ * `<input type="number">`, since a native number input silently loses
+ * precision beyond `Number.MAX_SAFE_INTEGER`.
+ * @type {SearchTypeObject}
+ */
+const bigintSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-bigint`;
+    return ['jsoe-search-bigint', {
+      dataset: {searchPath: path, searchKind: 'bigint'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          syncRangeValidity(this);
+        },
+        /** @this {HTMLElement} */
+        getQuery () {
+          const {gte: gteStr, lte: lteStr} = readRangeInputsPair(this);
+          const $gte = parseBigIntBound(gteStr);
+          const $lte = parseBigIntBound(lteStr);
+          if ($gte === undefined && $lte === undefined) {
+            return undefined;
+          }
+          return makeRangeLeaf(this.dataset.searchPath ?? '', 'bigint', {
+            ...($gte === undefined ? {} : {$gte}),
+            ...($lte === undefined ? {} : {$lte})
+          });
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildRangeInputsPair({name, type: 'text'})
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default bigintSearchType;

package/src/search/fundamentalTypes/blobSearchType.js

@@ -0,0 +1,42 @@
+import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Blob: OR literal or regex search/Does Not contain search (README, grouped
+ * with string/StringObject/File/regexp-source/symbol-description) - against
+ * the Blob's `.type` (MIME string), a value-level facet the schema itself
+ * carries no constraint for (`blob` is one of jsoe's "checked" types,
+ * `{type: 'any', checks: [{name: 'blob'}]}`, with no further structural
+ * fields to read), the same way `symbolSearchType.js` targets
+ * `.description`. Matching *content* rather than the MIME type belongs to
+ * `blobHTMLSearchType.js` (XPath/CSS-selector/full-text/raw-HTML-regex,
+ * README) for the Blob-as-HTML case specifically, not this generic module.
+ * @type {SearchTypeObject}
+ */
+const blobSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-blob`;
+    return ['jsoe-search-blob', {
+      dataset: {searchPath: path, searchKind: 'blob'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [`${label} (MIME type)`]],
+      buildLiteralRegexControls({name, flagOptions: regexpType.allowedFlags})
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default blobSearchType;

package/src/search/fundamentalTypes/booleanSearchType.js

@@ -0,0 +1,40 @@
+import {buildPathLabel, buildTriStateSelect, readTriStateSelect} from '../searchUtils.js';
+import {makeBooleanEqualsLeaf} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * True or false (README).
+ * @type {SearchTypeObject}
+ */
+const booleanSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-boolean`;
+    return ['jsoe-search-boolean', {
+      dataset: {searchPath: path, searchKind: 'boolean'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const value = readTriStateSelect(this);
+          return value === undefined
+            ? undefined
+            : makeBooleanEqualsLeaf(this.dataset.searchPath ?? '', value);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ['label', [
+        `${label}: `,
+        buildTriStateSelect({name, trueLabel: 'True', falseLabel: 'False', required: true})
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default booleanSearchType;

package/src/search/fundamentalTypes/catchSearchType.js

@@ -0,0 +1,59 @@
+import {buildPathLabel} from '../searchUtils.js';
+import {makePassThroughLeaf} from '../queryTreeBuilders.js';
+import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {buildSearchWidget} from '../searchDispatch.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Promise, Literal, catch: pass on children (README) - same shape as
+ * `promiseSearchType.js`'s pass-through (recurse into `.innerType` at the
+ * same path, wrap in a `passThrough` leaf), except `getSchemaType`
+ * (`src/formats/schema.js`) has no case for `catch` at all - unlike
+ * `promise`/`function`, which `zodexToStructuredCloningTypeMap` already
+ * maps - so `getSearchSchemaType` adds `catch` as its own extra case purely
+ * for the search side, the same way it already does for `tuple`/`record`/
+ * the union family.
+ * @type {SearchTypeObject}
+ */
+const catchSearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const catchSchemaObject = /** @type {import('zodexy').SzCatch} */ (
+      schemaObject
+    );
+    const childArr = buildSearchWidget({
+      schemaObject: catchSchemaObject.innerType,
+      path,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-catch', {
+      dataset: {searchPath: path, searchKind: 'catch'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const childEl = findSearchElement(this, searchPath);
+          const childQuery = childEl && hasGetQuery(childEl)
+            ? childEl.getQuery()
+            : undefined;
+          return childQuery === undefined
+            ? undefined
+            : makePassThroughLeaf(searchPath, childQuery);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      childArr
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default catchSearchType;