@luigisbox/luma 0.4.0 → 0.5.0

package/src/widgets/listing/element.ts

@@ -13,14 +13,16 @@
 // (lit SSR) instead of rebuilding it, so nothing is fetched or repainted on
 // load. From then on the listing is client-side as usual.
 
-import { borrow, contrastToggle, liveRegion, useContrast } from '../../core/a11y';
+import { borrow, liveRegion, useContrast } from '../../core/a11y';
 import { activateByKey, byKeyboard, focusables, trapTab } from '../../core/a11y-keys';
+import { CONTENT_VISIBILITY, DRAWER, DROPDOWN, MENU, NAMED_FADE, NAMED_PRECONNECT_IMAGES, NAMED_PREFETCH_FILTERS, NAMED_PREFETCH_NEXT_PAGE, NAMED_PRELOAD, NAMED_RESTORE_ON_BACK, ON_RENDER, SEARCH, SSR } from '../../core/features';
 import { mark, reportError } from '../../core/health';
 import { claim } from '../../core/reconciler';
 import { afterLayout, rememberHeight } from '../../core/hold';
 import { hasPrefetch, observe, peekPrefetch, peekProducts, productsChannel, putPrefetch, takePrefetch, typicalMs, type Prefetch } from '../../core/prefetch';
 // Through the support chunk, which every widget loads with its own (src/main.ts load()).
-import { firstRowCount, firstRowImages, imageHelpers, imageOf, preloadImages, settleImages, warmImages } from '../../core/support';
+import { preloadImages } from '../../core/image-preload';
+import { firstRowCount, firstRowImages, imageHelpers, imageOf, settleImages, warmImages } from '../../core/support';
 import { view } from '../../core/templates';
 import { afterFrame, isPromise } from '../../core/scheduler';
 import { onUrlChange } from '../../core/sense';
@@ -31,13 +33,14 @@ import { canon, pageKey, writeUrl } from '../../core/url';
 import { lru } from '../../core/storage';
 import type { WidgetContext } from '../../main';
 import type { Link } from '../../types';
-import { facetFields, handsBack, nextState, stateOf, type Query, type Route, type UiState } from './state';
+import { facetFields, handsBack, nextState, queryKey, stateOf, type Query, type Route, type UiState } from './state';
+import { specKey } from '../../core/stash';
 import { firstRequest, hasMore, listingMore, listingQuery, type ListingConfig, type ListingResult } from './query';
 import { flowKey, notAbove, onQuickLanded, quickChannel } from './flow';
 import { firstPages, targetOf, thrifty, watchIntent } from './intent';
 import type { Page } from '../../api';
 import { atWidth, CV_CSS, DIM_MS, LOADING_CSS, listingData, ssrStateId, viewport, type ListingView, type SsrState } from './view';
-import { dropStash, peekStash, readStash, writeStash, type Stash } from './stash';
+import { dropStash, peekStash, readStash, removeStash, writeStash, type Stash } from './stash';
 import { adoptScroll, holdScroll, keepViewport, leavingLink, nearEnd, preconnectImages, releaseScroll, restoreScroll, scrollSpot } from './instant';
 import { watch } from '../../core/tiles';
 
@@ -88,7 +91,7 @@ const sameUrl = (u: unknown, href: string) => {
     return false;
   }
 };
-const keyOf = (q: Query) => JSON.stringify([q.q, q.scope, q.filters, q.flags, q.sort]);
+const keyOf = queryKey;
 
 type Hydrate = (v: unknown, c: HTMLElement | ShadowRoot) => void;
 
@@ -100,7 +103,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   useContrast();
   const query = (q: Query, signal?: AbortSignal, pre?: Page, onProducts?: (r: ListingResult) => void) => {
     const t0 = performance.now();
-    const p = listingQuery(ctx.api, ctx.global, cfg, route, q, signal, pre, onProducts, quickChannel(route.id));
+    const p = listingQuery(ctx.api, ctx.global, cfg, route, q, signal, pre, onProducts, SEARCH ? quickChannel(route.id) : undefined);
     // A whole listing (not a first page fetched already): how long a fresh one takes here.
     if (!pre) p.then((r) => !r.partial && observe(performance.now() - t0), () => {});
     return p;
@@ -158,7 +161,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   };
   // Filter clicks that render at once (./intent.ts): first pages fetched on intent, by their request.
   const early = firstPages();
-  const prefetchFilters = ctx.global.prefetchFilters !== false;
+  const prefetchFilters = (NAMED_PREFETCH_FILTERS ? ctx.global.prefetchFilters !== false : true);
+  // The high-contrast toggle (`_global.contrastToggle`, off by default): its
+  // own chunk (lbx-contrast), asked for now where it is on, so a site without
+  // it does not download it with every listing.
+  const toggle = ctx.global.contrastToggle ? import('../../core/contrast-toggle') : null;
   const visitOf = (q: Query) => JSON.stringify([q.q, q.scope]);
   const earlyKey = (q: Query) => {
     const r = firstRequest(ctx.global, cfg, route, q);
@@ -190,7 +197,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       return false;
     }
   };
-  if (document.querySelector(`${route.tag}[data-lbx-ssr]`)) adopt();
+  if (SSR && document.querySelector(`${route.tag}[data-lbx-ssr]`)) adopt();
 
   // A result stashed for this page load (./stash.ts): the query typed on the
   // previous page, or the listing as the shopper left it (Back). Seeded like a
@@ -199,7 +206,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   /** The page's templates prepared ahead (`rehearse`), once. */
   let rehearsed = false;
   if (!seeded.size) {
-    stashed = readStash(route.id, location.href);
+    // A typed query's stash is under the query: this page's, as the search
+    // route reads it (sync for search; a category's lookup is not asked here).
+    const here = new URL(location.href);
+    const resolved = route.id === 'search' && route.accepts(here) ? route.resolve(here) : null;
+    stashed = readStash(route.id, location.href, resolved instanceof Promise ? null : resolved);
     if (stashed?.sr) adoptScroll();
     // Too old to render from: where the shopper was only (the results are asked for as on any load).
     if (stashed?.stale) mark(`${route.id} back: stash too old, its scroll only`);
@@ -209,12 +220,12 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       mark(`${route.id} from stash (${stashed.kind}, ${stashed.result.hits.length} hits)`);
       // A prerendered page reads (and drops) it in a copy of sessionStorage; at
       // its activation the opener's storage, still holding it, comes back: used once.
-      const at = location.href;
-      if (stashed.kind === 'spec' && (document as any).prerendering) document.addEventListener('prerenderingchange', () => dropStash(at), { once: true });
+      const key = specKey(route.id, stashed.query.q ?? '');
+      if (stashed.kind === 'spec' && (document as any).prerendering) document.addEventListener('prerenderingchange', () => removeStash(key), { once: true });
     }
   }
-  const restoreOn = cfg.restoreOnBack !== false;
-  const skipOut = cfg.contentVisibility === true;
+  const restoreOn = (NAMED_RESTORE_ON_BACK ? cfg.restoreOnBack !== false : true);
+  const skipOut = CONTENT_VISIBILITY ? cfg.contentVisibility === true : false;
 
   // The request for the URL we loaded on starts now, before the element exists.
   const bootUrl = new URL(location.href);
@@ -235,7 +246,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
   // usually arrives while the chunk's templates, the fonts or the anchor are
   // still on their way. A server-rendered page has them in its HTML (the server renderer).
   const imgs = ctx.global.images ?? {};
-  const preloadOn = imgs.preload !== false;
+  const preloadOn = (NAMED_PRELOAD ? imgs.preload !== false : true);
   const warm = imgs.warm ?? 0;
   const preloadRow = (res: ListingResult | null | undefined) => {
     if (res?.hits.length) preloadImages(firstRowImages(imgs, res.hits.map(ctx.result)));
@@ -398,19 +409,30 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
     };
 
     connectedCallback() {
-      onQuickLanded(route.id, (r) => this.quickIn(r));
+      // The quick types landed in a result shown without them (where they do
+      // not sit above the products): drawn now, into the render in steps if it
+      // is still going on. No hook, no announcement: the same result. A
+      // search page's only (core/features.ts): here, not a method, so a build
+      // without search/ leaves it out.
+      if (SEARCH)
+        onQuickLanded(route.id, (r) => {
+          if (this.stepping?.hits === r.hits) return void this.stepping.again();
+          if (this.last !== r) return; // not shown (yet): a render of it shows them
+          mark(`${route.id} quick types after the products`);
+          this.redraw();
+        });
       // Not in the constructor: an element the parser creates after our class
       // is defined (an async include) is constructed before its attributes are set.
       if (this.ssr == null) {
         // Every server element is checked against its own state (a later visit's page is another page).
-        this.ssr = this.hasAttribute('data-lbx-ssr') && adopt();
+        this.ssr = SSR ? this.hasAttribute('data-lbx-ssr') && adopt() : false;
         // Ours from now on, before it drops its marker (the reconciler keeps it).
         if (this.ssr) claim(route.id, this);
         // Server markup whose state we cannot use (another URL: a param the page
         // stripped, another host name): ours replaces it once it has rendered.
         // A parser-created element (an async bundle ran first) is still getting
         // its children: kept once they are all there (sync() awaits that).
-        else if (this.hasAttribute('data-lbx-ssr')) {
+        else if (SSR && this.hasAttribute('data-lbx-ssr')) {
           claim(route.id, this);
           const keep = () => void (this.server = [...this.childNodes]);
           if (document.readyState === 'loading') this.cleared = new Promise<void>((r) => document.addEventListener('DOMContentLoaded', () => (keep(), r()), { once: true }));
@@ -427,20 +449,23 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (!this.hasAttribute('tabindex')) this.tabIndex = -1;
       // Moved on within this document (an SPA's navigation): its scroll is the host's again.
       this.unsub = onUrlChange(() => (releaseScroll(), this.urlMoved(), this.resync()));
-      this.unBack ??= onOwnBack(this.onBack);
+      // The drawer's own history entry: only where a template has a drawer (core/features.ts DRAWER).
+      if (DRAWER) this.unBack ??= onOwnBack(this.onBack);
       // Product clicks and add-to-carts on our tiles: the framework's, never a template's (core/tiles.ts).
       watch(this, { list: `lbx_${route.id}`, global: ctx.global, results: () => this.last?.hits.map(ctx.result) ?? [] });
       this.addEventListener('click', this.onClick);
       this.addEventListener('keydown', this.onKey);
       this.addEventListener('focusout', this.onFocusOut);
-      document.addEventListener('click', this.onOutside, true);
-      document.addEventListener('pointerdown', this.onOutside, true);
+      if (MENU || DROPDOWN) {
+        document.addEventListener('click', this.onOutside, true);
+        document.addEventListener('pointerdown', this.onOutside, true);
+      }
       addEventListener('pagehide', this.onPageHide);
       addEventListener('pageshow', this.onPageShow);
       addEventListener('scroll', this.onScroll, { passive: true });
       if (prefetchFilters) this.intent ??= watchIntent(this, (el) => this.onIntent(el));
       // Put back by a host re-render with its drawer open: still watched.
-      if (this.hasAttribute('data-drawer-open') && !this.unwatchApply) this.watchApply();
+      if (DRAWER && this.hasAttribute('data-drawer-open') && !this.unwatchApply) this.watchApply();
       // Microtask: runs before paint (no empty frame) but outside the
       // reconciler's placement pass.
       queueMicrotask(() => this.resync());
@@ -454,8 +479,10 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.removeEventListener('click', this.onClick);
       this.removeEventListener('keydown', this.onKey);
       this.removeEventListener('focusout', this.onFocusOut);
-      document.removeEventListener('click', this.onOutside, true);
-      document.removeEventListener('pointerdown', this.onOutside, true);
+      if (MENU || DROPDOWN) {
+        document.removeEventListener('click', this.onOutside, true);
+        document.removeEventListener('pointerdown', this.onOutside, true);
+      }
       removeEventListener('pagehide', this.onPageHide);
       removeEventListener('pageshow', this.onPageShow);
       removeEventListener('scroll', this.onScroll);
@@ -487,7 +514,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       // A menu in the host's markup (their dropdown classes): [data-lbx-toggle]
       // opens/closes its [data-lbx-menu] ancestor by a data-lbx-open attribute
       // (the integration's CSS maps it onto their open state).
-      const tg = target.closest?.('[data-lbx-toggle]');
+      const tg = MENU ? target.closest?.('[data-lbx-toggle]') : null;
       if (tg && this.contains(tg)) {
         e.preventDefault();
         // Ours alone: host code delegating on the same (their) dropdown classes must not toggle it too.
@@ -497,7 +524,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         if (menu) setMenu(menu, !menu.hasAttribute('data-lbx-open'), byKeyboard(e));
         return;
       }
-      const d = target.closest?.('[data-lbx-drawer]');
+      const d = DRAWER ? target.closest?.('[data-lbx-drawer]') : null;
       if (!d || !this.contains(d)) {
         // A link to another page (a product): remembered for Back.
         const away = restoreOn && leavingLink(e, this);
@@ -547,7 +574,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (this.href) this.scrolls.set(this.href, this.y);
       const y = this.scrolls.get(href);
       this.restoreY = y == null ? null : { href, y };
-      if (this.hasAttribute('data-drawer-open') && !this.drawerBack) this.setDrawer(false);
+      if (DRAWER && this.hasAttribute('data-drawer-open') && !this.drawerBack) this.setDrawer(false);
     }
 
     /**
@@ -567,7 +594,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
 
     /** Changes go to the drawer's held state instead of the URL: it is open, where it stages. */
     private staging() {
-      return this.stagedMode && this.hasAttribute('data-drawer-open');
+      return DRAWER ? this.stagedMode && this.hasAttribute('data-drawer-open') : false;
     }
 
     /**
@@ -577,6 +604,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * middle, the count and the first tiles above the viewport.
      */
     private applyStaged(from?: HTMLElement) {
+      if (!DRAWER) return;
       const next = this.staged;
       this.staged = null;
       this.setDrawer(false, from, next ? () => (this.navigate(next), (this.topFor = this.wantedHref), this.toListTop()) : undefined);
@@ -610,6 +638,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * takes the entry back first, then runs `then`.
      */
     private setDrawer(open: boolean, from?: HTMLElement, then?: () => void) {
+      if (!DRAWER) return;
       const was = this.hasAttribute('data-drawer-open');
       this.toggleAttribute('data-drawer-open', open);
       for (const b of this.querySelectorAll('[data-lbx-drawer="open"]')) b.setAttribute('aria-expanded', String(open));
@@ -675,6 +704,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * is safer than applying: the shopper never pressed Apply.
      */
     private watchApply() {
+      if (!DRAWER) return;
       const v = cfg.facetsApply;
       if (!v || typeof v !== 'object' || typeof matchMedia !== 'function') return;
       const mode = atWidth(v, 'instant', viewport);
@@ -693,14 +723,14 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      */
     private onKey = (e: KeyboardEvent) => {
       const target = e.target as Element;
-      const menu = target.closest?.('[data-lbx-menu][data-lbx-open]');
+      const menu = MENU ? target.closest?.('[data-lbx-menu][data-lbx-open]') : null;
       if (e.key === 'Escape') {
         if (menu && this.contains(menu)) {
           e.preventDefault();
           e.stopPropagation(); // ours, not a host modal's
           setMenu(menu, false);
           triggerOf(menu)?.focus();
-        } else if (this.hasAttribute('data-drawer-open')) {
+        } else if (DRAWER && this.hasAttribute('data-drawer-open')) {
           e.preventDefault();
           e.stopPropagation();
           this.setDrawer(false);
@@ -716,7 +746,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         items[next].focus();
         return;
       }
-      if (e.key === 'Tab' && this.hasAttribute('data-drawer-open')) {
+      if (DRAWER && e.key === 'Tab' && this.hasAttribute('data-drawer-open')) {
         const panel = this.querySelector('[data-lbx-drawer-panel]');
         if (panel) trapTab(e, panel);
         return;
@@ -726,7 +756,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
 
     /** Focus leaving an open menu (Tab past it) closes it. */
     private onFocusOut = (e: FocusEvent) => {
-      const menu = (e.target as Element).closest?.('[data-lbx-menu][data-lbx-open]');
+      const menu = MENU ? (e.target as Element).closest?.('[data-lbx-menu][data-lbx-open]') : null;
       if (menu && !(e.relatedTarget && menu.contains(e.relatedTarget as Node))) setMenu(menu, false);
     };
 
@@ -737,12 +767,12 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         root.setAttribute('data-lbx-a11y', '');
         const live = liveRegion();
         root.append(live.el);
-        if (ctx.global.contrastToggle) root.append(contrastToggle(t('contrast')));
+        toggle?.then((m) => root.append(m.contrastToggle(t('contrast'))), (e) => reportError(`${route.id} contrast toggle`, e));
         this.a11y = { root, live };
       }
       if (this.firstChild !== this.a11y.root) this.prepend(this.a11y.root);
-      for (const m of this.querySelectorAll('[data-lbx-menu]')) setMenu(m, m.hasAttribute('data-lbx-open'));
-      for (const b of this.querySelectorAll('[data-lbx-drawer="open"]')) b.setAttribute('aria-expanded', String(this.hasAttribute('data-drawer-open')));
+      if (MENU) for (const m of this.querySelectorAll('[data-lbx-menu]')) setMenu(m, m.hasAttribute('data-lbx-open'));
+      if (DRAWER) for (const b of this.querySelectorAll('[data-lbx-drawer="open"]')) b.setAttribute('aria-expanded', String(this.hasAttribute('data-drawer-open')));
       const was = this.focusWas;
       this.focusWas = null;
       const tile = this.moreByKey ? this.querySelector('[data-lbx-list]')?.children[this.shownBefore] : null;
@@ -770,8 +800,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
      * not clickable (a heading, the page's background), only the pointer events.
      */
     private onOutside = (e: Event) => {
-      for (const d of this.querySelectorAll('details[data-lbx-dropdown][open]')) if (!d.contains(e.target as Node)) d.removeAttribute('open');
-      for (const d of this.querySelectorAll('[data-lbx-menu][data-lbx-open]')) if (!d.contains(e.target as Node)) setMenu(d, false);
+      if (DROPDOWN) for (const d of this.querySelectorAll('details[data-lbx-dropdown][open]')) if (!d.contains(e.target as Node)) d.removeAttribute('open');
+      if (MENU) for (const d of this.querySelectorAll('[data-lbx-menu][data-lbx-open]')) if (!d.contains(e.target as Node)) setMenu(d, false);
     };
 
     /**
@@ -930,7 +960,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       // A host re-render may destroy and re-create us for the same URL: render
       // synchronously from cache so the replacement never shows an empty frame.
       const hit = cache.get(key);
-      if (hit && this.ssr && !this.hydrateWith) {
+      if (SSR && hit && this.ssr && !this.hydrateWith) {
         // Hydrate complete markup only: a parser-created element connects before its children are parsed.
         if (document.readyState === 'loading') await new Promise((r) => document.addEventListener('DOMContentLoaded', r, { once: true }));
         try {
@@ -962,6 +992,9 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       const ek = !pf && prefetchFilters ? earlyKey(q) : null;
       const pre = ek ? early.take(ek) : undefined;
       early.abortInFlight();
+      // Server markup still being parsed (a streamed include): decided out
+      // here, not in the try below (Rollup folds no flag in a try).
+      const serverParsing = SSR ? () => !!this.ssr && document.readyState === 'loading' : () => false;
       try {
         let res: ListingResult;
         let shownEarly = false;
@@ -1013,7 +1046,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
         }
         if (shownEarly) this.quiet = true; // said with the products
         // Server markup still being parsed (a streamed include): render once it is complete.
-        if (this.ssr && document.readyState === 'loading') {
+        if (serverParsing()) {
           await new Promise((r) => document.addEventListener('DOMContentLoaded', r, { once: true }));
           if (this.href !== href) return;
         }
@@ -1070,7 +1103,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
 
     /** Images a render put in that are there already (cached, persisted tiles) lose their placeholder now: no flash, no fade. */
     private images() {
-      settleImages(this, imgs.fade !== false);
+      settleImages(this, (NAMED_FADE ? imgs.fade !== false : true));
     }
 
     /** Render anew, dropping the state lit keeps on the container (or it reuses it and paints nothing). */
@@ -1155,11 +1188,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.ahead = null;
       if (skipOut) this.sizeTiles();
       // Not while prerendered: a next page of a page nobody may open is a request for nothing.
-      if (cfg.prefetchNextPage !== false && hasMore(res)) {
+      if ((NAMED_PREFETCH_NEXT_PAGE ? cfg.prefetchNextPage !== false : true) && hasMore(res)) {
         const href = this.href;
         whenShown(() => this.href === href && !this.ahead && (this.ahead = nearEnd(this, () => this.prefetchNext(q, res))));
       }
-      if (res.hits[0] && ctx.global.preconnectImages !== false) preconnectImages(ctx.result(res.hits[0]).c.image);
+      if (res.hits[0] && (NAMED_PRECONNECT_IMAGES ? ctx.global.preconnectImages !== false : true)) preconnectImages(ctx.result(res.hits[0]).c.image);
     }
 
     /**
@@ -1349,18 +1382,6 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       }, 600);
     }
 
-    /**
-     * The quick types landed in a result shown without them (where they do
-     * not sit above the products): drawn now, into the render in steps if it
-     * is still going on. No hook, no announcement: the same result.
-     */
-    private quickIn(r: ListingResult) {
-      if (this.stepping?.hits === r.hits) return void this.stepping.again();
-      if (this.last !== r) return; // not shown (yet): a render of it shows them
-      mark(`${route.id} quick types after the products`);
-      this.redraw();
-    }
-
     /** The last render's data again with the current view state: no fetch, no announcement, focus where it is. */
     private redraw() {
       const q = this.lastQ;
@@ -1388,8 +1409,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
           if (!link || m.button > 0 || m.metaKey || m.ctrlKey || m.shiftKey || m.altKey) return; // new tab etc.: the browser's
           e.preventDefault();
           const at = e.currentTarget as Element | null;
-          at?.closest('details[data-lbx-dropdown]')?.removeAttribute('open');
-          const menu = at?.closest('[data-lbx-menu]');
+          if (DROPDOWN) at?.closest('details[data-lbx-dropdown]')?.removeAttribute('open');
+          const menu = MENU ? at?.closest('[data-lbx-menu]') : null;
           if (menu) {
             setMenu(menu, false);
             // Its item had focus: back to the menu's button, not lost with the closed menu.
@@ -1468,11 +1489,11 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       this.drawn = data;
       // Server markup that is not hydrated (no cached result for it: its facets
       // were missing) is replaced, not rendered after.
-      if (this.ssr && !this.hydrateWith) {
+      if (SSR && this.ssr && !this.hydrateWith) {
         this.ssr = false;
         this.server ??= [...this.childNodes];
       }
-      if (this.ssr && this.hydrateWith) {
+      if (SSR && this.ssr && this.hydrateWith) {
         this.ssr = false;
         const markup = [...this.childNodes];
         try {
@@ -1605,6 +1626,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
             if (!res.pending) this.setBusy(false); // the products alone: busy until their facets
             return this.finish(q, res, url, total, fonts, shown);
           }
+          // The next step after a frame (afterFrame: a task soon where frames are stalled; each step's
+          // wait was 500 ms then, five steps 2.5 s of nothing shown, 2026-10-19).
           afterFrame(() => this.renders === n && this.href === href && this.guarded(() => step(false)));
         };
         // The scope and the first step in one task were 17-18 ms on a production storefront at 4x: apart when they would not fit.
@@ -1796,7 +1819,7 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       // yet: the hook (titles, and often the site's analytics) runs when it
       // is shown, never for a prerender the shopper does not open.
       // The products alone (`pending`): the hook once the facets are there too, once a visit.
-      if (!res.pending)
+      if (ON_RENDER && !res.pending)
         whenShown(() => {
           try {
             cfg.onRender?.(info);

package/src/widgets/listing/query.ts

@@ -2,6 +2,7 @@
 // (a search page's request starts before any widget chunk), the listing
 // element and the edge render service share it.
 
+import { SEARCH } from '../../core/features';
 import { isPromise } from '../../core/scheduler';
 import type { Api, FacetData, FilterNode, Hit, ListingRequest, Page, Sort } from '../../api';
 import type { GlobalConfigType, ListingConfigType, SearchConfigType } from '../../types';
@@ -9,6 +10,7 @@ import { facetFields, type Query, type Route } from './state';
 import { lru } from '../../core/storage';
 import { reportError } from '../../core/health';
 import { MAX_PAGE } from '../../core/routes';
+import { EMPTY_VALUES } from '../../core/features';
 
 const num = (s: string | undefined) => (s === undefined || s === '' ? null : Number(s));
 /** A range filter value `min|max` (either end may be empty). */
@@ -184,7 +186,8 @@ export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingCo
   }
   const req = (omit?: string, size = cfg.size): ListingRequest => listingRequest(g, cfg, route, q, omit, size, asValues);
   const quickKey = JSON.stringify([cfg.surface, q.q]);
-  const wantsQuick = route.endpoint === 'search' && !!q.q && !!cfg.quick?.length;
+  // Quick types are a search page's (no search/ folder: none, core/features.ts).
+  const wantsQuick = SEARCH ? route.endpoint === 'search' && !!q.q && !!cfg.quick?.length : false;
   const quick =
     wantsQuick && cfg.quick
       ? quickMemo.get(quickKey) ?? remember(quickKey, (() => {
@@ -255,7 +258,7 @@ export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingCo
       ? facetsOf().catch((e) => ((partial = true), (e as Error)?.name === 'AbortError' || reportError('facets', e), {}))
       : {};
   // Optional too: without them no value shows as empty.
-  const all = cfg.emptyValues && narrowed ? allOf().catch(() => undefined) : undefined;
+  const all = EMPTY_VALUES && cfg.emptyValues && narrowed ? allOf().catch(() => undefined) : undefined;
   // The products now, the facets when they come: a request (theirs needs
   // this result set's guid) the shopper would otherwise wait for.
   const early: ListingResult | null =
@@ -265,7 +268,7 @@ export const listingQuery = async (api: Api, g: GlobalConfigType, cfg: ListingCo
   if (early) onProducts!(early);
   // Not waited for (onQuick): the facets alone hold the result.
   const [facetData, quickHits, facetsAll] = await Promise.all([facets, onQuick ? quickNow ?? LATE : soon(quick), all]);
-  if (cfg.emptyValues && !narrowed && !partial && Object.keys(facetData).length) unfiltered.set(allKey, Promise.resolve(facetData));
+  if (EMPTY_VALUES && cfg.emptyValues && !narrowed && !partial && Object.keys(facetData).length) unfiltered.set(allKey, Promise.resolve(facetData));
   // Shown early without them and not where they may come late: they come
   // with a later render, not this one (above the grid, they would push it down).
   const late = quickHits === LATE || (!onQuick && !!early && !Object.keys(early.quick).length && quickHits !== early.quick);

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 {