@luigisbox/luma 0.3.0 → 0.5.0

package/src/widgets/listing/stash.ts

@@ -1,10 +1,14 @@
-// Listing results for the next page load of their URL, in sessionStorage
-// (`lbx:r:<pageKey>`, core/stash.ts), so that load renders at once, as from a
-// server-rendered state:
+// Listing results for the next page load that shows them, in sessionStorage
+// (core/stash.ts), so that load renders at once, as from a server-rendered
+// state:
 // - `spec`: the search page of a query the shopper was typing on another page
-//   (widgets/search/speculate.ts). Used by a plain navigation (or a prerender
-//   of the page) within its `ttl` (2 minutes), once.
-// - `back`: the listing as the shopper left it for a product page (pages
+//   (widgets/search/speculate.ts), under the query (`lbx:r:spec:<route>:<q>`),
+//   not the URL: the form's URL and the page's often differ (a server that
+//   redirects `/search?q=x` to `/search/x/`, a `queryUrl` the form does not
+//   know). Used by a plain navigation (or a prerender of the page) whose URL
+//   resolves to the same query (its filters, flags and sort too), within its
+//   `ttl` (2 minutes), once.
+// - `back` (`lbx:r:<pageKey>`): the listing as the shopper left it for a product page (pages
 //   1..N, where they were). Used by a back/forward load within 30 minutes, or
 //   by a reload or a navigation from the page itself within a minute (a link
 //   whose server redirects back to it); the listing then restores the scroll
@@ -14,10 +18,10 @@
 // Bounded: at most 3 entries (one `spec`), 400k characters each; a full store
 // drops ours first. Best-effort: storage may be unavailable, never required.
 
-import { navigation, STASH, stashFits, stashKey } from '../../core/stash';
+import { navigation, specKey, STASH, stashFits, stashKey } from '../../core/stash';
 import { pageKey } from '../../core/page';
 import type { ListingResult } from './query';
-import type { Query } from './state';
+import { queryKey, type Query } from './state';
 import type { Spot } from './instant';
 
 export interface Stash {
@@ -57,10 +61,14 @@ const entries = (except?: string) => {
   return out.sort((a, b) => a.at - b.at);
 };
 
-/** The stashed result this page load may render from, or null. `stale`: a Back entry too old to render, for its scroll only. */
-export const readStash = (route: string, href: string): Stash | null => {
-  try {
-    const key = stashKey(href);
+/**
+ * The stashed result this page load may render from, or null: the page's
+ * (`back`), else the search query's (`spec`, when `query` is this page's
+ * resolved state, under `specKey(route, query.q)`). `stale`: a Back entry too
+ * old to render, for its scroll only.
+ */
+export const readStash = (route: string, href: string, query?: Query | null): Stash | null => {
+  const read = (key: string): Stash | null => {
     const raw = sessionStorage.getItem(key);
     if (!raw) return null;
     const s = JSON.parse(raw) as Stash;
@@ -69,12 +77,18 @@ export const readStash = (route: string, href: string): Stash | null => {
     const fresh = s.v === 1 && age >= 0 && age < (s.ttl ?? MAX_AGE[s.kind] ?? 0);
     if (!fresh || s.kind === 'spec') sessionStorage.removeItem(key); // a speculation is used once
     if (s.route !== route || pageKey(nav.url) !== pageKey(href)) return null;
+    if (s.kind === 'spec' && !(query && queryKey(s.query) === queryKey(query))) return null; // the form's other fields changed since
     if (fresh && stashFits(s.kind, s.at)) return s;
     // The entry left loaded again (Back after long, a reload after the round
     // trip's minute): the browser restores nothing where Luma turned its
     // restoration off; where the shopper was is still known.
     const again = nav.type === 'back_forward' || nav.type === 'reload';
     return s.v === 1 && s.kind === 'back' && s.sr && again ? { ...s, stale: true } : null;
+  };
+  try {
+    // The page's own entry (Back) first; one it cannot use (a navigation from
+    // another page: the same query typed on a product page) does not hide the query's.
+    return read(stashKey(href)) ?? (query?.q ? read(specKey(route, query.q)) : null);
   } catch {
     return null;
   }
@@ -90,18 +104,21 @@ export const peekStash = (href: string): Stash | null => {
 };
 
 /** A page the browser restored itself (the back/forward cache): its stash is not needed. */
-export const dropStash = (href: string) => {
+export const dropStash = (href: string) => removeStash(stashKey(href));
+
+/** The entry at `key` (`stashKey` or `specKey`) is not needed any more. */
+export const removeStash = (key: string) => {
   try {
-    sessionStorage.removeItem(stashKey(href));
+    sessionStorage.removeItem(key);
   } catch {}
 };
 
-/** false: too big, or storage refused it. */
+/** Under the page's URL (`back`) or the query (`spec`). false: too big, or storage refused it. */
 export const writeStash = (href: string, s: Omit<Stash, 'v' | 'at'>) => {
   try {
     const json = JSON.stringify({ at: Date.now(), v: 1, kind: s.kind, ttl: s.ttl, route: s.route, query: s.query, result: s.result, scroll: s.scroll, sr: s.sr });
     if (json.length > MAX_CHARS) return false;
-    const key = stashKey(href);
+    const key = s.kind === 'spec' ? specKey(s.route, s.query.q ?? '') : stashKey(href);
     const others = entries(key);
     // One speculation at a time; the newest few overall.
     const drop = [...others.filter((e) => s.kind === 'spec' && e.spec), ...others.filter((e) => !(s.kind === 'spec' && e.spec)).slice(0, -(KEEP - 1) || undefined)];

package/src/widgets/listing/state.ts

@@ -28,6 +28,18 @@ export interface Query {
  */
 export type UiState = Pick<Query, 'filters' | 'flags' | 'sort'>;
 
+/** The listing state a query is, as a key: its query or scope, filters and flags whatever their order, sort (not its title or layout). */
+export const queryKey = (q: Query) =>
+  JSON.stringify([
+    q.q ?? '',
+    q.scope ?? null,
+    Object.entries(q.filters)
+      .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
+      .map(([f, vs]) => [f, [...vs].sort()]),
+    [...q.flags].sort(),
+    q.sort,
+  ]);
+
 /** What differs between search and category pages: URL <-> state. */
 export interface Route {
   id: string;

package/src/widgets/listing/view.ts

@@ -10,6 +10,7 @@
 
 import type { WidgetContext } from '../../main';
 import type { Helpers, SearchScope } from '../../types';
+import { SEARCH } from '../../core/features';
 import { fold } from '../../core/fold';
 import { navigable } from '../../core/result';
 import { hasMore, parseRange, type ListingConfig, type ListingResult } from './query';
@@ -222,7 +223,7 @@ export const listingData = (ctx: Pick<WidgetContext<ListingConfig>, 'config' | '
     showTitle: !!cfg.showTitle,
     total: res.total,
     results: res.hits.map(resultOf(ctx.result)),
-    quick: Object.fromEntries(Object.entries(res.quick ?? {}).map(([k, hs]) => [k, hs.map(ctx.result).filter(navigable)])),
+    quick: SEARCH ? Object.fromEntries(Object.entries(res.quick ?? {}).map(([k, hs]) => [k, hs.map(ctx.result).filter(navigable)])) : {},
     facets,
     ranges,
     layout,

package/src/widgets/plp/route.ts

@@ -17,6 +17,7 @@ import { flagId, has, P, paramValues, plpAccepts, TRACKING, withoutTracking } fr
 import { lru, session } from '../../core/storage';
 import type { CategoryFilter, FacetLayout, GlobalConfigType, PlpConfigType } from '../../types';
 import { reportError } from '../../core/health';
+import { FACETS_FOR } from '../../core/features';
 import { readOwn, type Query, type Route, type UiState } from '../listing/state';
 import { parseRange } from '../listing/query';
 
@@ -43,7 +44,7 @@ export const plpRoute = (pc: PlpConfigType, api: Api, g: GlobalConfigType): Rout
   const mappedParams = new Set(mapped.map(([, fp]) => fp.param));
   // Our value -> their value, per facet with a value map.
   const inverse = Object.fromEntries(Object.entries(facetParams).map(([facet, fp]) => [facet, fp.values ? new Map(Object.entries(fp.values).map(([h, v]) => [v, h])) : null]));
-  const ignore = new RegExp(pm.ignore ?? TRACKING);
+  const ignore = RegExp(pm.ignore ?? TRACKING);
   const values = (url: URL, param: string) => paramValues(url, param, sep);
 
   /**
@@ -157,7 +158,7 @@ export const plpRoute = (pc: PlpConfigType, api: Api, g: GlobalConfigType): Rout
 
   /** The page's own facet list (`facetsFor`, _init.ts): e.g. the category's parameters. */
   const withFacets = (url: URL, q: Query): Query | Promise<Query> => {
-    if (!pc.facetsFor) return q;
+    if (!FACETS_FOR || !pc.facetsFor) return q;
     const apply = (l: FacetLayout | null | undefined): Query => (l?.facets ? { ...q, facets: l.facets, layout: l.layout } : q);
     const failed = (e: unknown) => (reportError('plp facetsFor', e), q);
     try {

package/src/widgets/recommender/index.ts

@@ -20,6 +20,7 @@ import { settleImages } from '../../core/support';
 import type { WidgetContext } from '../../main';
 import type { RecommenderConfigType, Result } from '../../types';
 import { watch } from '../../core/tiles';
+import { NAMED_FADE } from '../../core/features';
 
 export { default as css } from './style-recommender.css?raw';
 export const templates = byName(import.meta.glob('./template-*.ts', { eager: true, import: 'default' }));
@@ -98,7 +99,7 @@ const load = (ctx: Ctx, el: HTMLElement, s: State, items: string[], key: string)
       if (ctl.signal.aborted) return;
       s.results = hits.map(ctx.result);
       s.v.render('recommender-box-default', { ...ctx.helpers, results: s.results });
-      settleImages(el, ctx.global.images?.fade !== false);
+      settleImages(el, (NAMED_FADE ? ctx.global.images?.fade !== false : true));
       el.style.minHeight = '';
       el.dataset.state = hits.length ? 'ready' : 'empty';
       s.failures = 0;
@@ -243,7 +244,7 @@ export const openPopup = (ctx: Ctx, item: string, near: DOMRect, notice?: Elemen
       pop.setAttribute('aria-label', ctx.t('title'));
       popResults = hits.map(ctx.result);
       popView!.render('recommender-popup', { ...ctx.helpers, results: popResults, close });
-      settleImages(pop, ctx.global.images?.fade !== false);
+      settleImages(pop, (NAMED_FADE ? ctx.global.images?.fade !== false : true));
       pop.querySelector('[data-lbx-list]')?.scrollTo(0, 0);
       // Just below the host's notice, right-aligned with it.
       const vw = document.documentElement.clientWidth;

package/src/widgets/search/direct.ts

@@ -0,0 +1,39 @@
+// Enter goes to the query's page. Where the site's server redirects its
+// search form to the page of the phrase (`/search?q=x` to `/search/x/`), the
+// integration's `search.queryUrl` names that page (types.ts), and a submit of
+// the site's search form (typed + Enter, its button, our autocomplete's "show
+// all" and its hand-off of a query, which submit that form) loads it directly:
+// the redirect's round trip, and the site's handling of the form, are not paid.
+// Only when that page is another URL than the form's own, and only what the
+// browser would do with the form (./form-url.ts: GET, this window, no
+// modifier, no file field; Enter as the browser's implicit submission); not
+// on the search page while queries there are in place (./in-place.ts takes
+// the submit, or leaves it to the browser). Anything else submits as usual.
+// Loaded with search while typing (main.ts, once the shopper types), never in
+// the entry.
+import { NAMED_IN_PLACE_QUERY } from '../../core/features';
+import { mark } from '../../core/health';
+import { pageKey } from '../../core/page';
+import type { SearchConfigType } from '../../types';
+import { formUrl, queryPage } from './form-url';
+import { onSearchSubmit } from './submit';
+import { searchRoute } from './route';
+
+export const startDirect = (cfg: SearchConfigType, inputSelector: string) => {
+  const route = searchRoute(cfg);
+  onSearchSubmit(
+    'search direct',
+    inputSelector,
+    (form, submitter, input) => {
+      if (!input || ((NAMED_IN_PLACE_QUERY ? cfg.inPlaceQuery !== false : true) && route.accepts(new URL(location.href)))) return null; // in-place.ts's
+      const own = formUrl(form, submitter);
+      if (!own) return null;
+      const to = queryPage(cfg.queryUrl, input.value.trim(), own);
+      return to.origin === location.origin && route.accepts(to) && pageKey(to.href) !== pageKey(own.href) ? to : null;
+    },
+    (to, _form, input) => {
+      mark(`search direct: ${input!.value.trim()}`);
+      location.assign(to.href);
+    },
+  );
+};

package/src/widgets/search/form-url.ts

@@ -1,8 +1,16 @@
-// The URL a GET form navigates to (formUrl): what in-place search
-// (./in-place.ts, the search page) and search while typing (./speculate.ts,
-// any page) both read. Its own module: neither chunk loads the other for it.
+// The URL a GET form navigates to (formUrl), and the search page a submit of
+// the site's search form leads to (searchTarget: that URL, or the page the
+// integration's `queryUrl` names for the phrase typed, where the site's server
+// redirects the form): what in-place search (./in-place.ts, the search page),
+// search while typing (./speculate.ts, any page) and the direct load of the
+// query's page (./direct.ts) all read. In lbx-nav, which every listing page
+// loads: only the URL helpers (taking a submit is ./submit.ts, loaded where
+// one is taken).
 
-export type Submitter = HTMLButtonElement | HTMLInputElement;
+import { QUERY_URL } from '../../core/features';
+import { reportError } from '../../core/health';
+import { formDataOf, type Submitter } from '../../core/default-button';
+import type { SearchConfigType } from '../../types';
 
 /**
  * The URL a GET form navigates to, as the browser builds it: the submitter's
@@ -11,22 +19,6 @@ export type Submitter = HTMLButtonElement | HTMLInputElement;
  * window, a file field, a non-http action). Attributes are read with
  * getAttribute: a field named `action` or `method` shadows the form's properties.
  */
-let withSubmitter: boolean | undefined;
-const submitterSupported = () => {
-  if (withSubmitter === undefined) {
-    try {
-      const f = document.createElement('form');
-      const b = f.appendChild(document.createElement('button'));
-      b.name = 'x';
-      b.value = '1';
-      withSubmitter = new FormData(f, b).get('x') === '1';
-    } catch {
-      withSubmitter = false;
-    }
-  }
-  return withSubmitter;
-};
-
 export const formUrl = (form: HTMLFormElement, submitter?: HTMLElement | null): URL | null => {
   const sub = submitter && 'form' in submitter ? (submitter as Submitter) : null;
   const attr = (name: string) => (sub?.hasAttribute(`form${name}`) ? sub.getAttribute(`form${name}`) : form.getAttribute(name));
@@ -36,24 +28,36 @@ export const formUrl = (form: HTMLFormElement, submitter?: HTMLElement | null):
   const action = attr('action')?.trim();
   const url = new URL(action ? action : location.href, action ? document.baseURI : undefined);
   if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
-  // FormData(form, submitter) is newer (Chrome 112, Safari 16.4, Firefox
-  // 111): before, the second argument is ignored (it does not throw), so the
-  // submitter's own entry is added by hand there.
-  const native = submitterSupported();
-  let own = !native; // the submitter's entry is ours to add
-  let data: FormData;
-  try {
-    data = new FormData(form, native && sub ? sub : undefined);
-  } catch {
-    data = new FormData(form); // not a submit button of this form
-    own = true;
-  }
-  if (own && sub?.name) data.append(sub.name, sub.value);
   const params = new URLSearchParams();
-  for (const [k, v] of data) {
+  for (const [k, v] of formDataOf(form, sub)) {
     if (typeof v !== 'string') return null;
     params.append(k, v);
   }
   url.search = params.toString();
   return url;
 };
+
+/**
+ * The page a search for `q` leads to: `url` (the form's own), or with
+ * `search.queryUrl` the page the hook names (the site's server would redirect
+ * the form there). An empty phrase is the form's own submit (the site's empty
+ * search), and so is a hook's `''` (no page of its own for this phrase); a
+ * hook that throws or returns an invalid URL is reported, and `url` stands.
+ */
+export const queryPage = (queryUrl: SearchConfigType['queryUrl'], q: string, url: URL): URL => {
+  if (!QUERY_URL || !queryUrl || !q) return url;
+  try {
+    // '' from the hook: the form's URL (never the current page, which `new URL('')` would be).
+    const to = queryUrl(q, new URL(url.href));
+    return to === '' ? url : new URL(to, location.href);
+  } catch (e) {
+    reportError('search queryUrl', e);
+    return url;
+  }
+};
+
+/** The search page a submit of `form` leads to: `queryPage` of the form's URL and the phrase in `input`. */
+export const searchTarget = (queryUrl: SearchConfigType['queryUrl'], form: HTMLFormElement, submitter: HTMLElement | null | undefined, input: HTMLInputElement | null | undefined): URL | null => {
+  const url = formUrl(form, submitter);
+  return url && queryPage(queryUrl, input?.value.trim() ?? '', url);
+};

package/src/widgets/search/in-place.ts

@@ -4,10 +4,13 @@
 // and a re-render of our listing, not a page load. Anywhere else, and for
 // anything we cannot do exactly as the browser would, the form submits as usual.
 //
-// A window-capture `submit` listener, nothing bound to the host's form. The
-// form's target is resolved as the browser would (method GET, action, target,
-// its fields): only when the page we are on and that URL are both search
-// pages of ours, the navigation is ours. What the page load did for free is
+// The form's submit, and Enter in its input ahead of the site's own handlers,
+// are heard by ./form-url.ts onSearchSubmit (a window-capture listener,
+// nothing bound to the host's form; a shadow-root header's too; Enter as the
+// browser's implicit submission). The form's target is resolved as the browser
+// would (method GET, action, target, its fields), or as the site's server
+// would redirect it (`queryUrl`, searchTarget): only when the page we are on
+// and that URL are both search pages of ours, the navigation is ours. What the page load did for free is
 // done here: the listing starts the new query anew (its filters and sort
 // are our own URL params, which the form's URL does not carry), the input
 // loses focus (the autocomplete closes, a phone's keyboard goes), the page
@@ -17,8 +20,8 @@
 // (it hands the page back) is loaded for real.
 //
 // Opt-out per integration: `inPlaceQuery: false` in search/_config.ts.
-// Loaded with the search widget (not in the entry): until it has loaded, a
-// search submits as usual.
+// Its own chunk (lbx-search-in-place), asked for as the search widget starts and
+// never waited for: until it has loaded, a search submits as usual.
 
 import { mark, reportError } from '../../core/health';
 import { searchReadQuery } from '../../core/routes';
@@ -27,7 +30,8 @@ import type { Takeover } from '../../core/takeover';
 import { canon, writeUrl } from '../../core/url';
 import type { SearchConfigType } from '../../types';
 import type { Route } from '../listing/state';
-import { formUrl } from './form-url';
+import { searchTarget } from './form-url';
+import { onSearchSubmit } from './submit';
 
 export const startInPlace = (cfg: SearchConfigType, inputSelector: string | undefined, tk: Takeover, route: Route) => {
   const read = searchReadQuery(cfg);
@@ -37,32 +41,12 @@ export const startInPlace = (cfg: SearchConfigType, inputSelector: string | unde
   const ours = new Set<string>();
   /** Our own history write is running (its URL change is not a back/forward). */
   let pushing = false;
-  const isInput = (el: Element | null): el is HTMLInputElement => !!inputSelector && el instanceof HTMLInputElement && el.matches(inputSelector);
   /** The focused element, inside shadow roots too. */
   const focused = () => {
     let a = document.activeElement;
     while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
     return a;
   };
-  // A search input in a shadow root (a web-component header): its key events
-  // reach window retargeted to the shadow host, and its form's `submit` does
-  // not leave the shadow root at all (it is not composed). Such an input is
-  // read from the event's composed path, its root gets the same submit
-  // listener once one of its inputs is used, and it is remembered for the
-  // query on back/forward (document queries do not reach it).
-  const shadowInputs = new Set<HTMLInputElement>();
-  const roots = new WeakSet<ShadowRoot>();
-  const realTarget = (e: Event) => (e.composedPath?.()[0] ?? e.target) as Element | null;
-  const seen = (e: Event) => {
-    const i = realTarget(e);
-    const root = isInput(i) ? i.getRootNode() : null;
-    if (!(root instanceof ShadowRoot)) return;
-    shadowInputs.add(i as HTMLInputElement);
-    if (roots.has(root)) return;
-    roots.add(root);
-    root.addEventListener('submit', onSubmit as EventListener, true);
-  };
-  addEventListener('focusin', seen, true);
   const ourElement = () => document.querySelector<HTMLElement>(`${route.tag}[data-lbx]`);
   /**
    * The host's open <dialog>s and popovers around `el`, across shadow roots,
@@ -81,12 +65,6 @@ export const startInPlace = (cfg: SearchConfigType, inputSelector: string | unde
   };
   const top = () => scrollTo({ top: 0, left: 0, behavior: 'instant' } as unknown as ScrollToOptions);
 
-  // A form submitted with a modifier (a new tab or window, where the browser supports it) stays the browser's.
-  let mods = { on: false, t: -1 };
-  const track = (e: KeyboardEvent | MouseEvent) => void (mods = { on: e.ctrlKey || e.metaKey || e.shiftKey || e.altKey, t: e.timeStamp });
-  addEventListener('keydown', track, true);
-  addEventListener('click', track, true);
-
   /**
    * The visit settles: ours once it renders (then the page scrolls to the top,
    * after host code that restores its own scroll position, a search overlay
@@ -115,87 +93,44 @@ export const startInPlace = (cfg: SearchConfigType, inputSelector: string | unde
     tick();
   };
 
-  /**
-   * The search `form` would do, in place if it is ours to do: true when taken
-   * (the caller's event is cancelled here). `submitter`: the button, for a submit.
-   */
-  const take = (form: HTMLFormElement, submitter: HTMLElement | null | undefined, e: Event): boolean => {
-    let url: URL | null = null;
-    try {
-      if (inputSelector && ![...form.elements].some(isInput)) return false; // not the site's search form
-      if (mods.on && e.timeStamp - mods.t < 100) return false;
-      const here = new URL(location.href);
+  // Where a submit of the site's search form leads when it is ours to do (our
+  // listing shows this search page, the target a search page of ours), and
+  // what it does in place.
+  const { isInput, shadowInputs } = onSearchSubmit(
+    'search in place',
+    inputSelector,
+    (form, submitter, input) => {
       // Only while our listing shows this search page (not one handed back, or failing this session).
-      if (!route.accepts(here) || tk.failing || (tk.state !== 'ours' && tk.state !== 'hold') || !ourElement()) return false;
-      url = formUrl(form, submitter);
-      if (!url || url.origin !== location.origin || !route.accepts(url)) return false;
-    } catch (err) {
-      reportError('search in place', err);
-      return false;
-    }
-    e.preventDefault();
-    const to = url;
-    const q = read(to);
-    ours.add(q);
-    mark(`search in place: ${q}`);
-    // Respond first: the input lets go (the autocomplete closes, a phone's
-    // keyboard hides); the history write and the fetch run in a later task.
-    const a = focused();
-    if (isInput(a) || (a instanceof HTMLElement && form.contains(a))) a.blur();
-    try {
-      closeAround(form);
-    } catch (err) {
-      reportError('search in place', err);
-    }
-    setTimeout(() => {
+      if (!route.accepts(new URL(location.href)) || tk.failing || (tk.state !== 'ours' && tk.state !== 'hold') || !ourElement()) return null;
+      const to = searchTarget(cfg.queryUrl, form, submitter, input);
+      return to && to.origin === location.origin && route.accepts(to) ? to : null;
+    },
+    (to, form) => {
+      const q = read(to);
+      ours.add(q);
+      mark(`search in place: ${q}`);
+      // Respond first: the input lets go (the autocomplete closes, a phone's
+      // keyboard hides); the history write and the fetch run in a later task.
+      const a = focused();
+      if (isInput(a) || (a instanceof HTMLElement && form.contains(a))) a.blur();
       try {
-        pushing = true;
-        writeUrl(to);
-        top();
+        closeAround(form);
       } catch (err) {
         reportError('search in place', err);
-        location.assign(to.href);
-      } finally {
-        pushing = false;
       }
-    }, 0);
-    return true;
-  };
-
-  // A submit we take goes no further: a host handler that ignores
-  // defaultPrevented would navigate as well (htmx's boosted form: its own
-  // fetch, swap and second history entry for the same query). The Enter path
-  // below never lets a submit happen at all.
-  const onSubmit = (e: SubmitEvent) => {
-    const form = e.target;
-    if (e.defaultPrevented || !(form instanceof HTMLFormElement)) return;
-    if (take(form, e.submitter, e)) e.stopPropagation();
-  };
-  addEventListener('submit', onSubmit, true);
-
-  // Enter in the site's search input, ahead of the site's own handlers: some
-  // navigate with form.submit() or location on Enter, which fires no submit
-  // event (a storefront's own autocomplete script: form.submit() on every
-  // Enter). An Enter on a suggestion selected in our
-  // autocomplete is the autocomplete's (it opens that one); a plain Enter,
-  // and the autocomplete's own hand-off of a query (a synthetic Enter on the
-  // input), are taken here.
-  // In its shadow root by default (light DOM with dom: 'light'); only while it is open.
-  const acSelection = () => {
-    const o = document.querySelector('[data-lbx="ac-overlay"]');
-    return !!o?.matches(':popover-open') && !!(o.shadowRoot ?? o).querySelector('[aria-selected="true"]');
-  };
-  addEventListener(
-    'keydown',
-    (e) => {
-      if (e.key !== 'Enter' || e.isComposing || e.defaultPrevented || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
-      const input = realTarget(e);
-      if (!isInput(input) || !input.form) return;
-      seen(e);
-      if (e.isTrusted && acSelection()) return;
-      if (take(input.form, null, e)) e.stopImmediatePropagation();
+      setTimeout(() => {
+        try {
+          pushing = true;
+          writeUrl(to);
+          top();
+        } catch (err) {
+          reportError('search in place', err);
+          location.assign(to.href);
+        } finally {
+          pushing = false;
+        }
+      }, 0);
     },
-    true,
   );
 
   // Another query in this document (ours, or back/forward between them): the

package/src/widgets/search/index.ts

@@ -4,13 +4,18 @@ import type { Takeover } from '../../core/takeover';
 import type { WidgetContext } from '../../main';
 import type { SearchConfigType } from '../../types';
 import { startListing } from '../listing/element';
-import { startInPlace } from './in-place';
+import { reportError } from '../../core/health';
 import { searchRoute } from './route';
+import { NAMED_IN_PLACE_QUERY } from '../../core/features';
 
 export { templates, css } from './assets';
 
 export const start = (ctx: WidgetContext<SearchConfigType>, tk: Takeover) => {
   const route = searchRoute(ctx.config);
-  if (ctx.config.inPlaceQuery !== false) startInPlace(ctx.config, ctx.global.inputSelector, tk, route);
+  // A new query in place (./in-place.ts, its own chunk lbx-search-in-place):
+  // asked for now, not waited for. Only a query typed after the page's first
+  // render uses it; one submitted before it ran is a page load, as without it.
+  if (NAMED_IN_PLACE_QUERY ? ctx.config.inPlaceQuery !== false : true)
+    import('./in-place').then((m) => m.startInPlace(ctx.config, ctx.global.inputSelector, tk, route)).catch((e) => reportError('search in place', e));
   return startListing(ctx, tk, route);
 };