@luigisbox/luma 0.4.0 → 0.5.0

package/src/main.ts

@@ -25,6 +25,7 @@ import { plpAccepts, searchAccepts, searchReadQuery } from './core/routes';
 import { clearEarlyRules, earlyHold, plpRule, searchRule, writeEarlyRules, type EarlyRoute } from './core/early-rules';
 import { askChallenge, storedToken } from './api/token-key';
 import { loadDictionary } from './core/locales';
+import { ANALYTICS, AUTOCOMPLETE, NAMED_PRECONNECT_IMAGES, NAMED_PREFETCH_WHILE_TYPING, NAMED_SPECULATION, PLP, QUERY_URL, RECOMMENDER, SEARCH, SSR } from './core/features';
 import { keepDl } from './core/kept';
 import './core/boot-state'; // the page's state at boot, for lbx-place's reconciler
 import { onFlush, schedule } from './core/scheduler';
@@ -32,7 +33,7 @@ import { onUrlChange, startSensing } from './core/sense';
 import { layered, setCss, whenApplied } from './core/styles';
 import type { ListingRoute } from './core/listings';
 import type { Reco } from './core/recommenders';
-import type { GlobalConfigType, LumaConfigType, Result } from './types';
+import type { GlobalConfigType, LumaConfigType, Result, SearchConfigType } from './types';
 
 declare const __VERSION__: string;
 // Replaced at build time; the dev server (the loader's development mode) does not replace it.
@@ -54,6 +55,8 @@ export interface WidgetContext<C = any> {
   result: (hit: any) => Result;
   /** Helpers every template scope gets. */
   helpers: Record<string, unknown>;
+  /** The search page of a phrase where the site's server redirects its form there (`search.queryUrl`): the autocomplete's "show all" link. */
+  queryUrl?: SearchConfigType['queryUrl'];
 }
 
 export const startIntegration = async (files: IntegrationFiles) => {
@@ -78,7 +81,7 @@ export const startIntegration = async (files: IntegrationFiles) => {
       // its solver is plain JS since (api/token.ts), the rule stands. Said
       // once, with the fix; nothing starts and the site keeps its own UI.
       if (!isSecureContext)
-        return void (reportError('boot', `not a secure context (${location.origin}): Luma runs on HTTPS pages only. Serve the site over HTTPS; Luma's widgets did not start (the site keeps its own).`), off());
+        return void (reportError('boot', `not a secure context (${location.origin}): Luma runs on HTTPS pages only; its widgets did not start (the site keeps its own).`), off());
       return boot(config, files);
     }
   } catch (e) {
@@ -105,11 +108,12 @@ type Loaded = { mod: any; ctx: WidgetContext };
 const run = (where: string, p: Promise<Loaded>, f: (m: Loaded) => unknown, onFail?: () => void) =>
   p.then(f, () => onFail?.()).catch((e) => reportError(where, e));
 
+// A widget the integration has no folder for (core/features.ts): no chunk.
 const modules = {
-  autocomplete: () => import('./widgets/autocomplete'),
-  search: () => import('./widgets/search'),
-  plp: () => import('./widgets/plp'),
-  recommender: () => import('./widgets/recommender'),
+  autocomplete: AUTOCOMPLETE ? () => import('./widgets/autocomplete') : null,
+  search: SEARCH ? () => import('./widgets/search') : null,
+  plp: PLP ? () => import('./widgets/plp') : null,
+  recommender: RECOMMENDER ? () => import('./widgets/recommender') : null,
 };
 type Kind = keyof typeof modules;
 
@@ -121,7 +125,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // The product image host, learnt from an earlier listing (widgets/listing/instant.ts).
   let img: string | null = null;
   try {
-    img = g.preconnectImages !== false ? localStorage.getItem('lbx:img') : null;
+    img = (NAMED_PRECONNECT_IMAGES ? g.preconnectImages !== false : true) ? localStorage.getItem('lbx:img') : null;
   } catch {}
   const api = `https://api.${region}.luigisbox.ai`;
   const preconnect = (host: string, cors = true) => {
@@ -160,6 +164,9 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     else addEventListener('load', idle, { once: true });
   };
   afterLoad(warm);
+  // A framework on the page whose support the build left out (clientConfig
+  // `framework`): said in development (core/frameworks-check.ts, not in a build).
+  if (import.meta.env.DEV) afterLoad(() => void import('./core/frameworks-check').then((m) => m.checkFrameworks()).catch((e) => reportError('frameworks check', e)));
   startSensing();
 
   // Analytics starts once the page has loaded, or with the first widget (its
@@ -177,7 +184,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     startAnalytics();
     const support = import('./core/support');
     const p = Promise.all([
-      modules[kind]() as Promise<any>,
+      modules[kind]!() as Promise<any>,
       support,
       widgetFiles(kind, [...folders], files.templates),
       widgetFiles(kind, [...folders], files.styles),
@@ -188,7 +195,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     ]).then(([mod, s, tpls, css, dict]) => {
       if (mod.css) setCss(`default:${kind}`, layered(mod.css));
       // Product pages on intent (default on, core/speculation.ts): our links come with the first widget.
-      if (g.speculation !== false) s.speculate(g, onUrlChange);
+      if ((NAMED_SPECULATION ? g.speculation !== false : true)) s.speculate(g, onUrlChange);
       const ctx = s.widgetContext(s, config, { id, folders: [...folders], app, scopes: [...scopes] }, mod.templates, tpls, css, dict);
       mark(`loaded ${id}`);
       return { mod, ctx };
@@ -207,7 +214,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // --- autocomplete: the first interaction with the search input loads it
   const ac = config.autocomplete;
   // The dropdown is a popover (top layer): without it (Safari < 17, Firefox < 125) the site keeps its own.
-  if (ac && !ac.disabled && g.inputSelector && 'showPopover' in HTMLElement.prototype) {
+  if (AUTOCOMPLETE && ac && !ac.disabled && g.inputSelector && 'showPopover' in HTMLElement.prototype) {
     const css = hostCss('autocomplete');
     const TYPES = ['pointerdown', 'focusin', 'input'];
     const loadAc = () => load('autocomplete', 'autocomplete', ['_global', 'autocomplete'], ac, ['autocomplete']);
@@ -297,9 +304,11 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     clearTimeout(lateTimer);
     lateTimer = window.setTimeout(() => (recently = false), LATE_MS);
   };
-  late();
-  if (document.readyState !== 'complete') addEventListener('load', late, { once: true });
-  onUrlChange(late);
+  if (SEARCH || PLP || RECOMMENDER) {
+    late();
+    if (document.readyState !== 'complete') addEventListener('load', late, { once: true });
+    onUrlChange(late);
+  }
   const recent = () => recently;
 
   // --- listings: search results and category pages. Their boot (takeover,
@@ -310,8 +319,8 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // timer), or writes the hold CSS itself before first paint and in the same
   // task as an SPA's URL change into the route; the takeover continues that hold.
   const routes: ListingRoute[] = [];
-  const search = config.search && !config.search.disabled ? config.search : null;
-  const plp = config.plp && !config.plp.disabled ? config.plp : null;
+  const search = SEARCH ? (config.search && !config.search.disabled ? config.search : null) : null;
+  const plp = PLP ? (config.plp && !config.plp.disabled ? config.plp : null) : null;
   if (search) setUp('search', () => routes.push({ kind: 'search', cfg: search, accepts: searchAccepts(search), hostCss: hostCss('search') }));
   if (plp) setUp('plp', () => routes.push({ kind: 'plp', cfg: plp, accepts: plpAccepts(plp), hostCss: hostCss('plp') }));
   const early = earlyHold();
@@ -359,7 +368,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
       any = true;
       // Theirs shows at once where we failed too often; a server-rendered page holds nothing.
       // Moving within the route (their filters) keeps what is shown.
-      if (held.has(r.kind) || (spa && prev && r.accepts(prev)) || failures(r.kind) >= MAX_FAILURES || document.querySelector(`lbx-${r.kind}[data-lbx-ssr], template[data-lbx-ssr="${r.kind}"]`)) continue;
+      if (held.has(r.kind) || (spa && prev && r.accepts(prev)) || failures(r.kind) >= MAX_FAILURES || (SSR ? !!document.querySelector(`lbx-${r.kind}[data-lbx-ssr], template[data-lbx-ssr="${r.kind}"]`) : false)) continue;
       const claimed = !spa && !!early?.claim?.(r.kind);
       if (!claimed && !spa && painted()) continue; // booted after first paint: theirs stays until ours renders
       // Ours too where the early hold is claimed: with the height ours had on this
@@ -376,37 +385,44 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     // Loading adds modulepreload links to <head>: not while it is being parsed.
     for (const r of routes) if (r.accepts(u)) whenApplied(() => void loadListing(r.kind).catch(() => {}));
   };
-  enter(new URL(location.href), false);
-  onUrlChange((u) => enter(u, true));
-  // A page of a listing route's URL shape whose hook accepts it only later
-  // (their data layer, after our boot): its token from now, not from then
-  // (a production storefront's category pages: ~0.3 s sooner).
-  if (routes.some((r) => r.cfg.urlMatch && setUp(`${r.kind} urlMatch`, () => new RegExp(r.cfg.urlMatch!).test(location.pathname)))) warm();
-  // A route whose hook reads the page (an `active()` on their data layer or a
-  // node) may accept it only once the page has that: looked at again on
-  // reconciles (while `recent()`) until the listings' boot is asked for (a failed one: on the next URL).
-  if (routes.length) onFlush(() => recent() && !booting && failedOn !== location.href && enter(new URL(location.href), false));
-  // Results ready on Enter: the first input into the search field loads the prefetch-while-typing chunk.
-  if (search && routes.some((r) => r.kind === 'search') && search.prefetchWhileTyping !== false && g.inputSelector) {
+  if (SEARCH || PLP) {
+    enter(new URL(location.href), false);
+    onUrlChange((u) => enter(u, true));
+    // A page of a listing route's URL shape whose hook accepts it only later
+    // (their data layer, after our boot): its token from now, not from then
+    // (a production storefront's category pages: ~0.3 s sooner).
+    if (routes.some((r) => r.cfg.urlMatch && setUp(`${r.kind} urlMatch`, () => RegExp(r.cfg.urlMatch!).test(location.pathname)))) warm();
+    // A route whose hook reads the page (an `active()` on their data layer or a
+    // node) may accept it only once the page has that: looked at again on
+    // reconciles (while `recent()`) until the listings' boot is asked for (a failed one: on the next URL).
+    if (routes.length) onFlush(() => recent() && !booting && failedOn !== location.href && enter(new URL(location.href), false));
+  }
+  // Results ready on Enter, and Enter straight to the query's page (search.queryUrl):
+  // the first input into the search field loads the typing chunk (both are in it;
+  // the second only where the integration names the hook: QUERY_URL).
+  if (search && routes.some((r) => r.kind === 'search') && ((NAMED_PREFETCH_WHILE_TYPING ? search.prefetchWhileTyping !== false : true) || (QUERY_URL ? !!search.queryUrl : false)) && g.inputSelector) {
     const first = (e: Event) => {
       const i = e.composedPath?.()[0] ?? e.target;
       if (!(i instanceof HTMLInputElement) || !i.matches(g.inputSelector!)) return;
       removeEventListener('input', first, true);
-      import('./widgets/search/speculate').then((m) => m.startSpeculation(g, search, i)).catch((err) => reportError('search prefetch', err));
+      if (NAMED_PREFETCH_WHILE_TYPING ? search.prefetchWhileTyping !== false : true) import('./widgets/search/speculate').then((m) => m.startSpeculation(g, search, i)).catch((err) => reportError('search prefetch', err));
+      if (QUERY_URL && search.queryUrl) import('./widgets/search/direct').then((m) => m.startDirect(search, g.inputSelector!)).catch((err) => reportError('search direct', err));
     };
     addEventListener('input', first, true);
   }
   // A hold no route of ours continues (stale rules, a URL the snippet
   // over-matched) ends now, not at its timeout; a held route's ends with its takeover.
-  if (!held.size) whenApplied(() => early?.drop?.());
+  if (!(SEARCH || PLP) || !held.size) whenApplied(() => early?.drop?.());
   // Rules for the inline early-hold snippet's next hard load (src/core/early-rules.ts).
   // Dev bundles boot late (unbundled modules): a longer snippet timeout there.
   // A route failing this session gets no rule: the snippet must not hold it on every page view.
   const ok = (kind: string) => routes.some((r) => r.kind === kind) && failures(kind) < MAX_FAILURES;
-  writeEarlyRules(
-    [search && ok('search') ? searchRule(search, hostCss('search')) : null, plp && ok('plp') ? plpRule(plp, hostCss('plp')) : null].filter((r): r is EarlyRoute => !!r),
-    VERSION === 'dev' ? 6000 : 1500,
-  );
+  if (SEARCH || PLP)
+    writeEarlyRules(
+      [search && ok('search') ? searchRule(search, hostCss('search')) : null, plp && ok('plp') ? plpRule(plp, hostCss('plp')) : null].filter((r): r is EarlyRoute => !!r),
+      VERSION === 'dev' ? 6000 : 1500,
+    );
+  else clearEarlyRules(); // none to hold (a listing folder removed: its stale rules go)
 
   // --- recommenders: their triggers and placement (core/recommenders.ts, in
   // lbx-place with the reconciler) load on a page an inline one's urlMatch /
@@ -416,22 +432,23 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   const pages: ((u: URL) => boolean)[] = [];
   /** Our recommenders by name, and the pages each runs on: where ours runs, the site's of that name is not tracked. */
   const recoPages = new Map<string, (u: URL) => boolean>();
-  for (const [name, rc] of Object.entries(config.recommenders ?? {})) {
-    if (rc.disabled) continue;
-    const id = `reco-${name}`;
-    const folders = ['_global', `recommender ${name}`];
-    // style-host.css of the folder: e.g. hides the host's own box our widget replaces
-    // (scoped by our element's state, so it is inert where the widget is not).
-    const css = hostCss(`recommender ${name}`);
-    if (css) setCss(`host-${id}`, css);
-    // The popup is a popover (top layer): without the API there is no popup.
-    if (rc.confirm && !('showPopover' in HTMLElement.prototype)) continue;
-    recos.push({ id, rc, get: () => load('recommender', id, folders, rc, ['recommender']) });
-    const re = !rc.confirm && rc.urlMatch ? setUp(id, () => new RegExp(rc.urlMatch!)) : null;
-    pages.push(rc.confirm ? () => true : (u) => (rc.active ? rc.active(u) : !re || re.test(u.pathname)));
-    recoPages.set(name, pages[pages.length - 1]);
-  }
-  if (recos.length) {
+  if (RECOMMENDER)
+    for (const [name, rc] of Object.entries(config.recommenders ?? {})) {
+      if (rc.disabled) continue;
+      const id = `reco-${name}`;
+      const folders = ['_global', `recommender ${name}`];
+      // style-host.css of the folder: e.g. hides the host's own box our widget replaces
+      // (scoped by our element's state, so it is inert where the widget is not).
+      const css = hostCss(`recommender ${name}`);
+      if (css) setCss(`host-${id}`, css);
+      // The popup is a popover (top layer): without the API there is no popup.
+      if (rc.confirm && !('showPopover' in HTMLElement.prototype)) continue;
+      recos.push({ id, rc, get: () => load('recommender', id, folders, rc, ['recommender']) });
+      const re = !rc.confirm && rc.urlMatch ? setUp(id, () => RegExp(rc.urlMatch!)) : null;
+      pages.push(rc.confirm ? () => true : (u) => (rc.active ? rc.active(u) : !re || re.test(u.pathname)));
+      recoPages.set(name, pages[pages.length - 1]);
+    }
+  if (RECOMMENDER && recos.length) {
     let asked = false;
     let failedOn = '';
     const check = () => {
@@ -456,12 +473,12 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // _analytics.ts (nothing is sent that it does not say), every page once it
   // has loaded or with the first widget (its chains on our tiles listen then).
   // Without one, `analytics: false`: our tiles queue nothing (core/tiles.ts).
-  if (!Object.keys(files.analytics ?? {}).length) g.analytics = false;
-  if (g.analytics !== false) {
+  if (!ANALYTICS || !Object.keys(files.analytics ?? {}).length) g.analytics = false;
+  if (ANALYTICS && g.analytics !== false) {
     const here = () => new URL(location.href);
     const readQ = search ? searchReadQuery(search) : null;
     const owns = (s: string) => {
-      if (s === 'autocomplete') return !!(ac && !ac.disabled && g.inputSelector);
+      if (s === 'autocomplete') return AUTOCOMPLETE ? !!(ac && !ac.disabled && g.inputSelector) : false;
       if (s === 'search') return routes.some((r) => r.kind === 'search' && r.accepts(here()));
       const reco = s.startsWith('recommender:') ? recoPages.get(s.slice(12)) : undefined;
       return !!reco && !!setUp(`${s} active`, () => reco(here()));

package/src/types.ts

@@ -109,7 +109,8 @@ export interface GlobalConfigType {
    * Puts a product in the site's cart (`_init.ts`, or `_global/_widget.ts`:
    * only widgets call it): what a click on `[data-lbx-cart]` in one of our
    * tiles runs (announced to analytics first: `lumaCarts()`). `count`: the
-   * attribute's value (default 1).
+   * attribute's value (default 1). The build has it only where a file of the
+   * integration contains `data-lbx-cart` (a template: core/features.ts CART).
    */
   addToCart?: (r: Result, o: { count: number; el: HTMLElement; event: MouseEvent }) => unknown;
 }
@@ -375,6 +376,18 @@ export interface SearchConfigType extends AppConfig<SearchConfigType>, ListingCo
   /** _init.ts overrides for URLs a regex cannot describe. */
   active?: (url: URL) => boolean;
   readQuery?: (url: URL) => string;
+  /**
+   * _init.ts: the search page of a phrase, where the site's server sends the
+   * search form (a form that submits to `/search?q=…` and is redirected to
+   * `/search/<phrase>/`). `form` is the URL the form would submit to (its other
+   * fields). The URL returned must be one `urlMatch` / `readQuery` accept;
+   * `''` means no page of its own for this phrase (the form submits as it is). With
+   * it, Enter in the site's search input (and the autocomplete's "show all" and
+   * its hand-off of a query) loads that page directly, without the redirect;
+   * the result fetched while typing, the page prerendered and a query in place
+   * are that page's. An empty phrase submits the form as the site has it.
+   */
+  queryUrl?: (q: string, form: URL) => string | URL;
   /** Extra result types shown above the results (category and brand tiles), one request each. */
   quick?: { type: string; size: number; fields?: string[] }[];
   /**
@@ -400,17 +413,24 @@ export interface SearchConfigType extends AppConfig<SearchConfigType>, ListingCo
   /** How long a result fetched while typing is used (ms; older: asked anew). Default 120000. */
   prefetchMaxAgeMs?: number;
   /**
-   * Also prerender the search page (Speculation Rules: Chrome, Edge) of the
-   * phrase whose result was just fetched while typing, if it is still the one
-   * typed, so Enter from another page activates a page already rendered. One
-   * at a time (a newer phrase replaces it). It costs a host page render on
-   * the site's server per settled phrase, and runs the site's scripts in it:
+   * The search page itself, ahead of Enter (Speculation Rules): once the
+   * phrase's result is fetched while typing and the phrase is still the one
+   * typed, one list rule for that page. `'prefetch'` (default): its document
+   * is fetched (Chrome, Edge; Firefox and Safari as they ship it), so Enter
+   * from another page skips the site's server render and still renders from
+   * the stash: a document fetch on the site's server per settled phrase, no
+   * scripts run. `'prerender'`: the page is rendered ahead as well (Chrome,
+   * Edge; a prefetch rule too, for engines without prerendering): Enter
+   * activates a page already rendered, but the site's scripts run in it, and
    * analytics that do not wait for `prerenderingchange` count a page view the
-   * shopper may never see. Not on the search page when `inPlaceQuery` is on.
-   * Default false.
+   * shopper may never see. `false`: neither. One page at a time (a newer
+   * phrase replaces it); not on the search page when `inPlaceQuery` is on
+   * (no page load to save); nothing offline, with Save-Data or on 2G.
    */
+  pageWhileTyping?: 'prefetch' | 'prerender' | false;
+  /** `true` is `pageWhileTyping: 'prerender'`. */
   prerenderWhileTyping?: boolean;
-  /** Speculation Rules eagerness of that list rule: 'immediate' (default) or 'eager'. */
+  /** Speculation Rules eagerness of the prerender rule: 'immediate' (default) or 'eager'. */
   prerenderEagerness?: 'immediate' | 'eager';
 }
 

package/src/widgets/autocomplete/index.ts

@@ -16,7 +16,9 @@
 
 import { borrow, liveRegion, useContrast } from '../../core/a11y';
 import { luminanceOf, readable } from '../../core/color';
+import { defaultSubmitter, formDataOf } from '../../core/default-button';
 import { onOwnBack } from '../../core/entries';
+import { AC_HOOKS, ANALYTICS, QUERY_URL } from '../../core/features';
 import { mark, reportError } from '../../core/health';
 import { modalOf } from '../../core/own';
 import { byName, view } from '../../core/templates';
@@ -341,13 +343,15 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     const intoMirror = (e: Event) => sheet && e.composedPath()[0] === mirror;
     box.addEventListener('pointerdown', (e) => e.pointerType !== 'touch' && !intoMirror(e) && e.preventDefault());
     box.addEventListener('mousedown', (e) => !intoMirror(e) && e.preventDefault());
-    // A middle click opens a suggestion in a new tab (no choose()): a click too (core/tiles.ts).
-    box.addEventListener('auxclick', (e) => {
-      if ((e as MouseEvent).button !== 1) return;
-      const a = (e.composedPath()[0] as Element | null)?.closest?.('a[href]') as HTMLAnchorElement | null;
-      const i = a ? items.findIndex((r) => r.type !== 'query' && !!r.c.url && new URL(r.c.url, location.href).href === a.href) : -1;
-      if (i >= 0) track(i);
-    });
+    // A middle click opens a suggestion in a new tab (no choose()): a click too
+    // (core/tiles.ts), announced for analytics only (core/features.ts ANALYTICS).
+    if (ANALYTICS)
+      box.addEventListener('auxclick', (e) => {
+        if ((e as MouseEvent).button !== 1) return;
+        const a = (e.composedPath()[0] as Element | null)?.closest?.('a[href]') as HTMLAnchorElement | null;
+        const i = a ? items.findIndex((r) => r.type !== 'query' && !!r.c.url && new URL(r.c.url, location.href).href === a.href) : -1;
+        if (i >= 0) track(i);
+      });
     // "Show all products" has focus (Tab from the input): Shift+Tab goes back
     // to the input, Escape closes and goes back, Tab moves on as from the
     // input (focus put back on it, the browser's own Tab then leaves it: the
@@ -591,12 +595,12 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       host!.showPopover();
       open = true;
       aria?.set('aria-expanded', 'true');
-      hook('onOpen', ac.onOpen);
+      if (AC_HOOKS) hook('onOpen', ac.onOpen);
       cancelAnimationFrame(raf);
       // A hook may move the field (a storefront's opens its search strip, the
       // input lower): placed from where it is now, not from `m`, read before
       // it (otherwise the dropdown opens at the old place, then jumps).
-      position(false, ac.onOpen ? undefined : m);
+      position(false, AC_HOOKS && ac.onOpen ? undefined : m);
     }
   };
 
@@ -605,11 +609,15 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    * the focus's frame has rendered (layout clean then), ahead of the first
    * opening: read at the opening, after the page and our render had changed,
    * they forced a style and layout into the task that shows the results.
+   * Not once focus has left the input: putting the dropdown in the page
+   * borrows its ARIA, which focus leaving had put back (Shift+Tab back and
+   * Tab on within a frame left role=combobox on their input: WebKit on a slow
+   * machine, 2026-10-15).
    */
   let prepared: HTMLInputElement | null = null;
   const prepare = (i: HTMLInputElement) =>
     afterFrame(() => {
-      if (open || input !== i || !i.isConnected || sheet) return;
+      if (open || input !== i || !i.isConnected || sheet || focused() !== i) return;
       lineUp(i);
       if (!light) sampleTokens(i, field!);
       prepared = i;
@@ -741,7 +749,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
       host!.style.setProperty('display', 'block', 'important');
       host!.showPopover();
       open = true;
-      hook('onOpen', ac.onOpen);
+      if (AC_HOOKS) hook('onOpen', ac.onOpen);
       setCss('ac:sheet', ':root { overflow: hidden !important; }');
       try {
         history.pushState(null, '', location.href);
@@ -847,7 +855,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     aria?.set('aria-activedescendant', null);
     live.clear();
     said = '';
-    hook('onClose', ac.onClose, reason);
+    if (AC_HOOKS) hook('onClose', ac.onClose, reason);
   };
 
   /** The sheet input's value the last render drew (its clear button). */
@@ -956,16 +964,37 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
    * target only: its click still hands the query to the host (submitViaHost).
    * `value`: the phrase instead of the input's (the phone sheet's own input).
    */
+  // Where the site's server redirects the form to the phrase's page (search.queryUrl): that page,
+  // same origin and http(s) as the form's (as every other use of the hook checks), else the form's.
+  // Decided outside searchHref's try (a flag in a try block is never folded: build/vite.mjs).
+  const pageOf = QUERY_URL
+    ? (q: string, u: URL) => {
+        if (!q || !ctx.queryUrl) return u.href;
+        try {
+          const to = ctx.queryUrl(q, new URL(u.href));
+          if (to === '') return u.href;
+          const r = new URL(to, location.href);
+          return (r.protocol === 'https:' || r.protocol === 'http:') && r.origin === location.origin ? r.href : u.href;
+        } catch (e) {
+          reportError('search queryUrl', e);
+          return u.href;
+        }
+      }
+    : null;
   const searchHref = (i: HTMLInputElement | null, value?: string) => {
     const f = i?.form;
     if (!f || (f.getAttribute('method') || 'get').trim().toLowerCase() !== 'get') return '';
     try {
       const u = new URL(f.getAttribute('action')?.trim() || location.href, document.baseURI);
       const p = new URLSearchParams();
-      for (const [k, v] of new FormData(f)) if (typeof v === 'string') p.append(k, v);
+      // With the form's default button, as Enter submits (its name=value, or an
+      // image button's x and y): the URL the result and the page were fetched
+      // ahead for (widgets/search/form-url.ts reads the same, core/default-button.ts).
+      for (const [k, v] of formDataOf(f, defaultSubmitter(f))) if (typeof v === 'string') p.append(k, v);
       if (value !== undefined && i!.name) p.set(i!.name, value);
       u.search = p.toString();
-      return u.protocol === 'https:' || u.protocol === 'http:' ? u.href : '';
+      if (u.protocol !== 'https:' && u.protocol !== 'http:') return '';
+      return pageOf ? pageOf((value ?? i!.value).trim(), u) : u.href;
     } catch {
       return '';
     }
@@ -1214,7 +1243,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
   /** Hand a query to the host so its own router/form performs navigation. */
   const submitViaHost = (q: string) => {
     const i = input!;
-    hook('onSelect', ac.onSelect, null);
+    if (AC_HOOKS) hook('onSelect', ac.onSelect, null);
     // Paint our close first; the host's router render then runs in its own task.
     if (sheet) return leave('select', () => handToHost(i, q));
     close('select');
@@ -1254,7 +1283,17 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     const opts = { key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true, cancelable: true, composed: true } as KeyboardEventInit;
     const notCancelled = i.dispatchEvent(new KeyboardEvent('keydown', opts));
     i.dispatchEvent(new KeyboardEvent('keyup', opts));
-    if (notCancelled && i.form) i.form.requestSubmit();
+    // As Enter would: with the form's default button (its name=value, formaction), so
+    // the page loads at the URL the result and the document were fetched ahead for
+    // (instant-search.spec 'a search button with a name', on a phone: here, not an Enter).
+    if (notCancelled && i.form) {
+      const f = i.form;
+      try {
+        f.requestSubmit(defaultSubmitter(f) ?? undefined);
+      } catch {
+        f.requestSubmit(); // a button the engine refuses as a submitter (none of this form)
+      }
+    }
   };
 
   /**
@@ -1274,8 +1313,8 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     if (r.type === 'query') submitViaHost(plain(r.c.title));
     else if (safeUrl(r.c.url)) {
       const url = safeUrl(r.c.url);
-      track(idx);
-      hook('onSelect', ac.onSelect, (r as any).__empty ? null : r);
+      if (ANALYTICS) track(idx);
+      if (AC_HOOKS) hook('onSelect', ac.onSelect, (r as any).__empty ? null : r);
       leave('select', () => location.assign(url));
     }
   }
@@ -1534,7 +1573,7 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     close('navigate');
   });
 
-  hook('onReady', ac.onReady, { close: () => (sheet ? leave('api') : close('api')), reposition: () => (cancelAnimationFrame(raf), input && lineUp(input), position()) });
+  if (AC_HOOKS) hook('onReady', ac.onReady, { close: () => (sheet ? leave('api') : close('api')), reposition: () => (cancelAnimationFrame(raf), input && lineUp(input), position()) });
 
   // The interaction that loaded us has already happened: pick it up.
   const now = focused();