@luigisbox/luma 0.4.0 → 0.5.0

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);
 };

package/src/widgets/search/speculate.ts

@@ -10,10 +10,16 @@
 // - in sessionStorage (../listing/stash.ts, `spec`): Enter on another page
 //   loads the search page, whose listing renders it at boot, like a
 //   server-rendered state;
-// - optionally (`prerenderWhileTyping`) the search page itself is prerendered
-//   once that result is stashed and the phrase is still the one typed: Enter
-//   then activates a page that is already rendered (it renders from the
-//   stash: no request of its own).
+// - the search page itself (`pageWhileTyping`, Speculation Rules): once that
+//   result is stashed and the phrase is still the one typed, its document is
+//   fetched ahead (default), so Enter skips the site's server render, or the
+//   page is prerendered as well (`'prerender'`): Enter then activates a page
+//   that is already rendered (it renders from the stash: no request of its own).
+//
+// The page fetched for is the one the form's submit leads to (./form-url.ts
+// searchTarget: the form's URL, or the integration's `queryUrl` of the phrase
+// where the site's server redirects the form); the stash is under the query,
+// so the page it loads at finds it whatever its URL.
 //
 // Only what is likely: the settled phrase (not every keystroke), 2+
 // characters, not the page we are on, none offline, with Save-Data or on 2G.
@@ -32,6 +38,7 @@
 import { getApi } from '../../api';
 import { firstRowImages, resultFactory, warmImages } from '../../core/support';
 import { mark, reportError } from '../../core/health';
+import { cspNonce } from '../../core/styles';
 import { pageKey } from '../../core/page';
 import { dropPrefetch, hasPrefetch, putPrefetch } from '../../core/prefetch';
 import { onUrlChange } from '../../core/sense';
@@ -39,8 +46,10 @@ import type { GlobalConfigType, SearchConfigType } from '../../types';
 import { listingQuery, type ListingResult } from '../listing/query';
 import type { Query, Route } from '../listing/state';
 import { writeStash } from '../listing/stash';
-import { formUrl } from './form-url';
+import { defaultSubmitter } from '../../core/default-button';
+import { searchTarget } from './form-url';
 import { searchRoute } from './route';
+import { NAMED_IN_PLACE_QUERY, PRERENDER_TYPING } from '../../core/features';
 
 const MIN_CHARS = 2;
 /** Speculative results kept at once (the phrase before the latest one: a shopper backspacing). */
@@ -80,12 +89,14 @@ export const startSpeculation = (g: GlobalConfigType, cfg: SearchConfigType, fir
     return form instanceof HTMLFormElement ? ([...form.elements].find((el) => el instanceof HTMLInputElement && el.matches(sel)) as HTMLInputElement | undefined) ?? null : null;
   };
 
-  const prerender = startPrerender(cfg, route);
+  const prerender = startPage(cfg, route);
+  // The page Enter would load: the browser's implicit submission, with the form's default button (its name=value, formaction).
+  const target = (i: HTMLInputElement) => (i.isConnected && i.form ? searchTarget(cfg.queryUrl, i.form, defaultSubmitter(i.form), i) : null);
 
   const run = (i: HTMLInputElement) => {
     clearTimeout(timer);
-    if (thrifty() || !i.form || !i.isConnected) return;
-    const url = formUrl(i.form, null);
+    if (thrifty()) return;
+    const url = target(i);
     if (!url || url.origin !== location.origin || !route.accepts(url)) return;
     const key = pageKey(url.href);
     if (key === pageKey(location.href)) return; // the page we are on
@@ -106,7 +117,7 @@ export const startSpeculation = (g: GlobalConfigType, cfg: SearchConfigType, fir
         // For a page load of it: the whole result, unless something optional failed.
         if (!res.partial && writeStash(url.href, { kind: 'spec', route: route.id, query: q, result: res, ttl })) {
           // Still the phrase in the form: that page, rendered ahead (it renders from the stash).
-          const now = i.isConnected && i.form ? formUrl(i.form, null) : null;
+          const now = target(i);
           if (now && pageKey(now.href) === key) prerender?.start(url.href, key);
         }
         if (warm > 0) warmFor(res);
@@ -160,21 +171,27 @@ export const startSpeculation = (g: GlobalConfigType, cfg: SearchConfigType, fir
 };
 
 /**
- * The search page prerendered while the shopper types (`prerenderWhileTyping`,
- * Speculation Rules: Chrome, Edge): one list rule for one URL, the phrase whose
- * result was just stashed. A newer phrase replaces it (removing a rule cancels
- * its prerender): one prerendered search page at most. Not on the search page
- * itself when queries there are in place (no page load to save).
- *
- * The cost: a host document rendered on their server per settled phrase the
- * shopper may never submit, and their scripts run in it (Chromium runs a
- * prerendered page's scripts; only APIs with visible effects wait for the
+ * The search page itself, ahead of Enter (`pageWhileTyping`, Speculation
+ * Rules): one list rule for one URL, the phrase whose result was just stashed.
+ * `'prefetch'` (default) fetches its document: a navigation to that URL is
+ * served from it (Chromium: `deliveryType` `navigational-prefetch`, cache
+ * headers and cookies as any navigation's; Firefox and Safari as they ship
+ * prefetch), the site's server render off the shopper's wait, nothing of the
+ * page run. `'prerender'` renders it as well (Chromium; the prefetch rule is
+ * kept for engines without prerendering, and Chromium's prerender takes the
+ * prefetched response): Enter activates a page already rendered, but the
+ * site's scripts run in it (only APIs with visible effects wait for the
  * activation: tags that defer to `prerenderingchange`, as Google's do, count
- * nothing until then, others count a page view). Ours renders from the stash
- * (no request) and defers onRender to the activation. Off by default.
+ * nothing until then, others count a page view); ours renders from the stash
+ * (no request) and defers onRender to the activation. A newer phrase replaces
+ * the rule (removing it cancels a prerender): one page at most. Not on the
+ * search page itself when queries there are in place (no page load to save).
+ * The cost either way: a document from their server per settled phrase the
+ * shopper may never submit.
  */
-const startPrerender = (cfg: SearchConfigType, route: Route) => {
-  if (!cfg.prerenderWhileTyping || !(HTMLScriptElement as any).supports?.('speculationrules')) return null;
+const startPage = (cfg: SearchConfigType, route: Route) => {
+  const mode = cfg.pageWhileTyping ?? (PRERENDER_TYPING && cfg.prerenderWhileTyping ? 'prerender' : 'prefetch');
+  if (!mode || !(HTMLScriptElement as any).supports?.('speculationrules')) return null;
   let el: HTMLScriptElement | null = null;
   let at = '';
   const stop = () => {
@@ -183,20 +200,24 @@ const startPrerender = (cfg: SearchConfigType, route: Route) => {
     at = '';
   };
   return {
-    /** The phrase now settled: a prerender of another page goes. */
+    /** The phrase now settled: another page's rule goes. */
     keep: (key: string) => void (at && at !== key && stop()),
     start: (href: string, key: string) => {
       if (at === key) return;
       // A search page in place has no page load to save.
-      if (cfg.inPlaceQuery !== false && route.accepts(new URL(location.href))) return;
+      if ((NAMED_IN_PLACE_QUERY ? cfg.inPlaceQuery !== false : true) && route.accepts(new URL(location.href))) return;
       stop();
       el = document.createElement('script');
       el.type = 'speculationrules';
-      el.setAttribute('data-lbx', 'search-prerender');
-      el.textContent = JSON.stringify({ prerender: [{ source: 'list', urls: [href], eagerness: cfg.prerenderEagerness ?? 'immediate' }] });
+      el.setAttribute('data-lbx', 'search-page');
+      el.nonce = cspNonce(); // a strict script-src applies to inline speculation rules
+      // A list rule's eagerness is `immediate` unless said otherwise.
+      const rules: Record<string, unknown[]> = { prefetch: [{ source: 'list', urls: [href] }] };
+      if (PRERENDER_TYPING && mode === 'prerender') rules.prerender = [{ source: 'list', urls: [href], eagerness: cfg.prerenderEagerness }]; // unset: not written (JSON.stringify)
+      el.textContent = JSON.stringify(rules);
       document.head.append(el);
       at = key;
-      mark(`search prerender: ${href}`);
+      mark(`search page ${mode}: ${href}`);
     },
   };
 };