@luigisbox/luma 0.3.0 → 0.5.0

package/src/core/integration.ts

@@ -5,6 +5,7 @@
 // templates, translations and helpers the bundle would.
 
 import type { LumaApi, LumaConfigType, LumaInitType } from '../types';
+import { AUTOCOMPLETE, HOST_STYLES, INITS, PLP, RECOMMENDER, SEARCH, TRANSLATIONS } from './features';
 
 export type Lazy<T> = Record<string, () => Promise<T>>;
 
@@ -52,26 +53,36 @@ export interface IntegrationFiles {
 
 /** A folder's style-host.css; a category page without its own uses the search page's. */
 export const hostStyle = (files: Pick<IntegrationFiles, 'hostStyles'>, folder: string): string => {
+  // None in the integration (core/features.ts): nothing of the host's to hide or hold.
+  if (!HOST_STYLES) return '';
   const css = Object.entries(files.hostStyles).find(([p]) => folderOf(p) === folder)?.[1] ?? '';
-  return css || (folder === 'plp' ? hostStyle(files, 'search') : '');
+  return css || (PLP ? (folder === 'plp' ? hostStyle(files, 'search') : '') : '');
 };
 
-/** `_config.ts` is JSON by contract (checked at boot; code belongs in `_init.ts`). */
+/**
+ * `_config.ts` is JSON by contract (code belongs in `_init.ts`): a function
+ * in it is dropped. Said in development (the dev server, unit tests), where
+ * configs are written; a build (the bundle, the render service's) leaves the
+ * check out: ~0.1 kB gzip of every page.
+ */
 const parseConfigJson = (value: any, file: string) => {
-  const check = (v: any, key: string): void => {
-    if (typeof v === 'function') console.error(`[lbx] ${file}: "${key}" is a function; _config.ts is parsed as JSON, set functions in _init.ts`);
-    else if (v && typeof v === 'object') for (const [k, x] of Object.entries(v)) check(x, k);
-  };
-  check(value, '');
+  if (import.meta.env.DEV) {
+    const check = (v: any, key: string): void => {
+      if (typeof v === 'function') console.error(`[lbx] ${file}: "${key}" is a function; _config.ts is parsed as JSON, set functions in _init.ts`);
+      else if (v && typeof v === 'object') for (const [k, x] of Object.entries(v)) check(x, k);
+    };
+    check(value, '');
+  }
   return JSON.parse(JSON.stringify(value ?? {}));
 };
 
 /** Folder -> slot in the config: `recommender home` -> recommenders.home. */
 export const slot = (config: any, folder: string) => {
   const [type, ...rest] = folder.split(' ');
-  if (type !== 'recommender') return (config[type] ??= {});
+  if (!RECOMMENDER || type !== 'recommender') return (config[type] ??= {});
   const name = rest.join(' ');
-  if (!name) throw new Error(`[lbx] "${folder}": a recommender folder needs a name, e.g. "recommender home"`);
+  // A build fails on such a folder (build/vite.mjs featureDefines): said here in development only.
+  if (import.meta.env.DEV && !name) throw Error(`[lbx] "${folder}": a recommender folder needs a name, e.g. "recommender home"`);
   return ((config.recommenders ??= {})[name] ??= {});
 };
 
@@ -83,32 +94,37 @@ export const loadConfig = async (files: Pick<IntegrationFiles, 'configs' | 'init
   const config = { _global: {} } as LumaConfigType;
   let globalInit: LumaInitType | undefined;
   for (const [p, v] of Object.entries(files.configs)) Object.assign(slot(config, folderOf(p)), parseConfigJson(v, p));
-  for (const [p, v] of Object.entries(files.translations)) if (typeof v !== 'function') slot(config, folderOf(p)).translations = parseConfigJson(v, p);
-  for (const [p, v] of Object.entries(files.inits)) {
-    if (folderOf(p) === '_global') globalInit = v;
-    else slot(config, folderOf(p)).initialize = v;
-  }
+  if (TRANSLATIONS) for (const [p, v] of Object.entries(files.translations)) if (typeof v !== 'function') slot(config, folderOf(p)).translations = parseConfigJson(v, p);
+  // No _init.ts in the integration (core/features.ts INITS): no function sets initialize either.
+  if (INITS)
+    for (const [p, v] of Object.entries(files.inits)) {
+      if (folderOf(p) === '_global') globalInit = v;
+      else slot(config, folderOf(p)).initialize = v;
+    }
   const Luma: LumaApi = { version, config };
   if (globalInit && (await globalInit(config, Luma)) === false) return null;
   if (config._global.disabled || !config._global.publishableKey || !config._global.channelId) return null;
-  const apps = [config.autocomplete, config.search, config.plp, ...Object.values(config.recommenders ?? {})];
-  for (const app of apps) if (app && !app.disabled && app.initialize && (await (app.initialize as any)(app, Luma)) === false) app.disabled = true;
+  const apps = [AUTOCOMPLETE ? config.autocomplete : null, SEARCH ? config.search : null, PLP ? config.plp : null, ...(RECOMMENDER ? Object.values(config.recommenders ?? {}) : [])];
+  if (INITS) for (const app of apps) if (app && !app.disabled && app.initialize && (await (app.initialize as any)(app, Luma)) === false) app.disabled = true;
   // Anything a category page does not set is the search page's.
-  const { search, plp } = config;
-  if (plp) for (const k of LISTING) if (plp[k] == null && search?.[k] != null) (plp as any)[k] = search[k];
-  for (const l of [search, plp]) if (l && l.reserveSelector == null && l.anchor) l.reserveSelector = [l.anchor].flat()[0];
+  const plp = PLP ? config.plp : null;
+  if (plp) for (const k of LISTING) if (plp[k] == null && config.search?.[k] != null) (plp as any)[k] = config.search[k];
+  if (SEARCH || PLP) for (const l of [config.search, config.plp]) if (l && l.reserveSelector == null && l.anchor) l.reserveSelector = [l.anchor].flat()[0];
   return config;
 };
 
 /** A widget's lazy `_translations.ts` (see IntegrationFiles), into their folders' slots before its context is built. */
 export const loadTranslations = (config: LumaConfigType, files: Pick<IntegrationFiles, 'translations'>, folders: readonly string[]) =>
-  Promise.all(
-    Object.entries(files.translations)
-      .filter(([p, v]) => typeof v === 'function' && folders.includes(folderOf(p)))
-      .map(async ([p, f]) => {
-        slot(config, folderOf(p)).translations = parseConfigJson(await f(), p);
-      }),
-  );
+  // None in the integration (core/features.ts): Luma's dictionary alone.
+  TRANSLATIONS
+    ? Promise.all(
+        Object.entries(files.translations)
+          .filter(([p, v]) => typeof v === 'function' && folders.includes(folderOf(p)))
+          .map(async ([p, f]) => {
+            slot(config, folderOf(p)).translations = parseConfigJson(await f(), p);
+          }),
+      )
+    : Promise.resolve([]);
 
 /** A widget's files from a glob, in folder order; from _global/, files named after another widget stay out. */
 export const widgetFiles = <X>(kind: string, folders: string[], glob: Lazy<X>) => {

package/src/core/listings.ts

@@ -6,6 +6,8 @@
 // CSS); each route's takeover continues that hold.
 
 import type { SearchConfigType, PlpConfigType, GlobalConfigType } from '../types';
+import { SEARCH, SSR } from './features';
+import { TURBO } from './frameworks';
 import { hasPrefetch, productsChannel, putPrefetch } from './prefetch';
 import type { Rule } from './reconciler';
 import { searchReadQuery } from './routes';
@@ -43,6 +45,8 @@ const toArray = <X>(v: X | X[] | undefined): X[] => (v == null ? [] : Array.isAr
 
 const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run, held, addRule }: ListingDeps) => {
   const tag = `lbx-${kind}`;
+  /** The query a search URL holds (the route's readQuery / urlMatch), once. */
+  const read = kind === 'search' ? searchReadQuery(cfg as SearchConfigType) : null;
   const tk: Takeover = takeover({
     id: kind,
     tag,
@@ -51,13 +55,13 @@ const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run,
     reserveSelector: cfg.reserveSelector!,
     holdTimeoutMs: cfg.holdTimeoutMs ?? 4000,
     // Another category, another query: a new visit (hold, or hand back anew).
-    visitKey: kind === 'plp' ? (u) => u.pathname : searchReadQuery(cfg as SearchConfigType),
+    visitKey: read ?? ((u) => u.pathname),
     held: held.has(kind),
   });
   // The element is placed by the reconciler; its class arrives with the
   // widget's chunk and upgrades it in place (custom elements are upgraded when
   // defined). Where their server fell back to their own listing, the page is theirs.
-  const active = (u: URL) => accepts(u) && tk.ssr !== 'fellback';
+  const active = (u: URL) => accepts(u) && (SSR ? tk.ssr !== 'fellback' : true);
   addRule({ id: kind, active, anchors: toArray(cfg.anchor), position: cfg.position!, settleMs: cfg.settleMs, create: () => document.createElement(tag) });
   // Search: the request starts here, in parallel with the widget's chunks
   // (the entry asked for them with this one). Once our element is on the page
@@ -66,8 +70,8 @@ const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run,
   // the listing starts, so it waits for this request rather than asking twice.
   // A failure (the chunk, the request) is the listing's, as a failed request is.
   const prefetch = (url: URL) => {
-    // A result stashed for this load (typed on the previous page, or left for Back): the listing renders that.
-    if (kind !== 'search' || !active(url) || tk.ssr || hasPrefetch(url.href) || document.querySelector(tag) || hasStash(url.href)) return;
+    // A result stashed for this load (typed on the previous page: under the query; or left for Back: under the page): the listing renders that.
+    if (!SEARCH || !read || !active(url) || (SSR ? !!tk.ssr : false) || hasPrefetch(url.href) || document.querySelector(tag) || hasStash(url.href, { route: kind, q: read(url) })) return;
     const { products, onProducts } = productsChannel();
     putPrefetch(url.href, import('../widgets/search/first').then((m) => m.searchFirst(g, cfg as SearchConfigType, url, onProducts)), { products });
   };
@@ -95,6 +99,6 @@ const listing = ({ kind, cfg, accepts, hostCss }: ListingRoute, { g, load, run,
 /** Each route's takeover, placement rule and loading; Turbo Drive's history around ours (core/turbo.ts). */
 export const startListings = (routes: ListingRoute[], deps: ListingDeps, setUp: <X>(where: string, f: () => X) => X | null) => {
   const listings = routes.map((r) => setUp(r.kind, () => listing(r, deps))).filter((l): l is NonNullable<typeof l> => !!l);
-  if (listings.length) setUp('turbo', () => startTurbo(listings));
+  if (TURBO && listings.length) setUp('turbo', () => startTurbo(listings));
   return listings;
 };

package/src/core/locales.ts

@@ -1,5 +1,6 @@
 // Luma's dictionaries (src/locales/<locale>.json), each its own chunk, only
-// the site's locale ever loaded. In the entry (a few bytes: the glob's map),
+// the site's locale ever loaded. In the entry (a few bytes per locale: the
+// glob's map, narrowed to the declared ones: build/vite.mjs onlyLocales),
 // so a widget's load asks for its dictionary in parallel with its chunks
 // rather than after lbx-core arrived. No DOM: the server renderer uses it too.
 

package/src/core/own.ts

@@ -1,6 +1,8 @@
 // Everything we insert into the page is marked, so sensing can ignore our own
 // mutations and the reconciler can find its nodes.
 
+import { DOCUMENT_REACT } from './frameworks';
+
 export const OWN_ATTR = 'data-lbx';
 
 /**
@@ -28,17 +30,19 @@ export const modalOf = (el: Element): Element | null => {
   return null;
 };
 
-/** React hydrating the whole document (Next.js app router, Remix, React Router 7 / Hydrogen). */
-export const wholeDocument = () => {
+/** The page's own signs of React hydrating the whole document (Next.js app router, Remix, React Router 7 / Hydrogen). */
+export const reactDocumentSigns = () => {
   const w = window as any;
   return !!(w.__next_f || w.__remixContext || w.__reactRouterContext);
 };
+/** React hydrating the whole document. */
+export const wholeDocument = DOCUMENT_REACT ? reactDocumentSigns : () => false;
 /**
  * A page that may yet be hydrated as a whole: known whole-document React, or a
  * Next.js page still parsing (its flag comes at the end of <body>, its assets
  * show before). Anywhere else, nothing of ours has to wait for a framework.
  */
-export const documentMayHydrate = () => wholeDocument() || (document.readyState === 'loading' && !!document.querySelector('script[src*="/_next/"]'));
+export const documentMayHydrate = () => (DOCUMENT_REACT ? wholeDocument() || (document.readyState === 'loading' && !!document.querySelector('script[src*="/_next/"]')) : false);
 
 /** React has hydrated this element (claimed it: a fiber, or React 16's instance). */
 export const hasFiber = (n: object) => Object.keys(n).some((k) => k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$'));

package/src/core/recommenders.ts

@@ -40,7 +40,7 @@ export const startRecommenders = (recos: Reco[], run: Run, setUp: <X>(where: str
  * (2026-10-11).
  */
 function inlineRecommender(id: string, rc: RecommenderConfigType, get: () => Promise<Loaded>, run: Run) {
-  const re = rc.urlMatch ? new RegExp(rc.urlMatch) : null;
+  const re = rc.urlMatch ? RegExp(rc.urlMatch) : null;
   const page = rc.active ?? ((u: URL) => !re || re.test(u.pathname));
   const io = new IntersectionObserver(
     (entries) => {
@@ -113,7 +113,7 @@ function inlineRecommender(id: string, rc: RecommenderConfigType, get: () => Pro
  * their way) when the notice appears.
  */
 function popupTrigger(rc: RecommenderConfigType, get: () => Promise<Loaded>, run: Run) {
-  if (!rc.intent) return reportError('reco popup', new Error('a popup recommender needs intent() in its _init.ts'));
+  if (!rc.intent) return reportError('reco popup', Error('a popup recommender needs intent() in its _init.ts'));
   let intent: { item: string; t: number } | null = null;
   // Sensing sees nodes come and go, not attributes: a notice the host shows by
   // a class (or style, hidden, open) on a node that stays is watched for while

package/src/core/reconciler.ts

@@ -6,6 +6,8 @@
 // are stable and need no settle wait. Read at the entry's boot (this module arrives later, in lbx-place).
 import { lateBoot } from './boot-state';
 import { documentMayHydrate, hasFiber, OWN_ATTR, watchOwnRemovals, wholeDocument } from './own';
+import { SSR } from './features';
+import { ANGULAR, ASTRO, NEXT, REACT, SVELTEKIT, TURBO, VUE } from './frameworks';
 import { onFlush, scheduleIn, scheduleNow } from './scheduler';
 import { bump, health, mark, reportError } from './health';
 
@@ -46,11 +48,12 @@ const pausedUntil = new Map<string, number>();
 // re-renders the root on the client (a full-page flash), Vue drops our node,
 // Angular reports NG0500. The host CSS hold covers the wait. Any other React
 // root is known by its container key once createRoot/hydrateRoot has run
-// (reactContainer(), below).
+// (reactContainer(), below). Only the frameworks the build has (core/frameworks.ts).
 const REACT_ROOTS = '#__next, #___gatsby, [data-reactroot]';
 const VUE_ROOTS = '#__nuxt, [data-server-rendered]';
 // Astro removes `ssr` once an island has hydrated.
-const SSR_ROOTS = `${REACT_ROOTS}, ${VUE_ROOTS}, [ng-server-context], astro-island[ssr]`;
+// (Ternaries, not &&: a false flag must leave no reference behind, or this chunk imports it and keeps the code.)
+const SSR_ROOTS = [REACT ? REACT_ROOTS : '', VUE ? VUE_ROOTS : '', ANGULAR ? '[ng-server-context]' : '', ASTRO ? 'astro-island[ssr]' : ''].filter(Boolean).join(', ');
 const keyOf = (n: object, prefix: string) => Object.keys(n).find((k) => k.startsWith(prefix));
 
 const CONTAINER = '__reactContainer$';
@@ -60,6 +63,7 @@ const CONTAINER = '__reactContainer$';
  * is as common as `#__next`), or the document React hydrates as a whole.
  */
 const reactContainer = (el: Element): Element | Document | null => {
+  if (!REACT) return null;
   for (let a: Element | null = el; a; a = a.parentElement) if (keyOf(a, CONTAINER)) return a;
   return wholeDocument() ? document : null;
 };
@@ -70,7 +74,7 @@ const reactContainer = (el: Element): Element | Document | null => {
  * ours in that markup was React error #418, the root rendered anew).
  */
 const reactDehydrated = (c: Element | Document | null) => {
-  const k = c && keyOf(c, CONTAINER);
+  const k = REACT ? c && keyOf(c, CONTAINER) : null;
   return !!k && (c as any)[k]?.stateNode?.current?.memoizedState?.isDehydrated === true;
 };
 // A wait for the parse to end (hydrated(), below) needs a reconcile when it does.
@@ -97,10 +101,12 @@ const beforeCache = () => {
   // (Turbolinks snapshots in a setTimeout of 1 ms: a few ms more covers it.)
   setTimeout(() => setTimeout(endSnapshot, 5));
 };
-addEventListener('turbo:before-cache', beforeCache);
-addEventListener('turbolinks:before-cache', beforeCache);
-addEventListener('turbo:render', endSnapshot);
-addEventListener('turbolinks:render', endSnapshot);
+if (TURBO) {
+  addEventListener('turbo:before-cache', beforeCache);
+  addEventListener('turbolinks:before-cache', beforeCache);
+  addEventListener('turbo:render', endSnapshot);
+  addEventListener('turbolinks:render', endSnapshot);
+}
 const sinceLoad = () => {
   const end = (performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming | undefined)?.loadEventEnd;
   return end ? performance.now() - end : -1;
@@ -173,7 +179,7 @@ const inDehydratedSuspense = (el: Element): boolean => {
  * meanwhile (their listing shows); ours is placed once React is done.
  */
 const reactHydrating = (anchor: Element, age: number) => {
-  return age <= MAX_REACT_WAIT && reactDehydrated(reactContainer(anchor));
+  return REACT ? age <= MAX_REACT_WAIT && reactDehydrated(reactContainer(anchor)) : false;
 };
 /** However long React takes, not longer than this. */
 const MAX_REACT_WAIT = 15_000;
@@ -185,7 +191,7 @@ const MAX_REACT_WAIT = 15_000;
  * production Angular binds the server's next node to the wrong element.
  */
 const ngHydrating = (anchor: Element, pos: Position, age: number) => {
-  if (age > MAX_REACT_WAIT) return false;
+  if (!ANGULAR || age > MAX_REACT_WAIT) return false;
   const node = pos === 'before' || pos === 'after' ? anchor.parentElement ?? anchor : anchor;
   return !!node.closest('[ng-server-context][ngh], [ng-server-context] [ngh]');
 };
@@ -203,37 +209,39 @@ const ngHydrating = (anchor: Element, pos: Position, age: number) => {
 let svelteKit: Element | null | undefined;
 let svelteKitStarted = false;
 const svelteKitRoot = (anchor: Element) => {
+  if (!SVELTEKIT) return null;
   if (svelteKit === undefined) {
     const boot = [...document.scripts].find((s) => !s.src && s.text.includes('__sveltekit_') && s.text.includes('.start('));
     if (boot || document.readyState !== 'loading') svelteKit = boot?.parentElement ?? null;
   }
   return svelteKit?.contains(anchor) ? svelteKit : null;
 };
-const svelteKitParsing = () => svelteKit === undefined && !!document.querySelector('link[href*="/immutable/entry/start."]');
+const svelteKitParsing = () => (SVELTEKIT ? svelteKit === undefined && !!document.querySelector('link[href*="/immutable/entry/start."]') : false);
 
 const hydrated = (anchor: Element, pos: Position) => {
   if (svelteKitRoot(anchor)) return (svelteKitStarted ||= history.scrollRestoration === 'manual');
   // Any React root (its container key), and not before it has committed its hydration.
   const react = reactContainer(anchor);
   if (reactDehydrated(react)) return false;
-  const root = anchor.closest(SSR_ROOTS) ?? (react !== document ? (react as Element | null) : null) ?? (wholeDocument() ? document.body : null);
+  const root = (SSR_ROOTS ? anchor.closest(SSR_ROOTS) : null) ?? (REACT ? (react !== document ? (react as Element | null) : null) : null) ?? (wholeDocument() ? document.body : null);
   // Still parsing a Next.js page (its whole-document flag comes at the end of
   // <body>, its assets are visible before) or a SvelteKit page (its boot
   // script is at the end of <body>): wait for the parse. Any other page is
   // placed at once (before first paint, as the hold intends).
   if (!root) return !documentMayHydrate() && !svelteKitParsing();
-  // For a sibling insert, the parent's state is what counts (all of its children claimed).
-  const node = pos === 'before' || pos === 'after' ? anchor.parentElement ?? anchor : anchor;
+  // For a sibling insert, the parent's state is what counts (all of its
+  // children claimed): React's and Angular's only (a read the rest leave out).
+  const node = REACT || ANGULAR ? (pos === 'before' || pos === 'after' ? anchor.parentElement ?? anchor : anchor) : anchor;
   // Frameworks with a signal: wait for it (the cap bounds the wait).
   // For a sibling insert, the anchor's own place counts too: its parent may be
   // claimed while the anchor sits in a boundary React has not hydrated yet.
-  if (root === document.body || root === react || root.matches(REACT_ROOTS)) {
+  if (REACT && (root === document.body || root === react || root.matches(REACT_ROOTS))) {
     // Next.js pages router: its hydration measure (it stays; the marks it is
     // made of do not) says the shell is done, not the Suspense boundaries.
-    const shell = performance.getEntriesByName('Next.js-hydration', 'measure').length ? !inAnyDehydratedBoundary(node) : reactHydrated(node);
+    const shell = NEXT && performance.getEntriesByName('Next.js-hydration', 'measure').length ? !inAnyDehydratedBoundary(node) : reactHydrated(node);
     return shell && (node === anchor || !inDehydratedSuspense(anchor));
   }
-  if (root.matches(VUE_ROOTS)) {
+  if (VUE && root.matches(VUE_ROOTS)) {
     const vue = (root as any).__vue_app__;
     const nuxt = vue?.config?.globalProperties?.$nuxt;
     if (nuxt) return nuxt.isHydrating === false; // Nuxt 3 hydrates async parts after mount
@@ -243,11 +251,11 @@ const hydrated = (anchor: Element, pos: Position) => {
   // that task), and no component around the anchor still has its hydration
   // key (`ngh`, removed once Angular has read it): a lazy route's page
   // hydrates later than the shell, when its chunk has arrived.
-  if ('__ngContext__' in root) {
+  if (ANGULAR && '__ngContext__' in root) {
     const waiting = node.closest('[ngh]');
     return !waiting || waiting === root || !root.contains(waiting);
   }
-  if (root.localName === 'astro-island') return false; // it drops `ssr` when hydrated (the cap bounds the wait)
+  if (ASTRO && root.localName === 'astro-island') return false; // it drops `ssr` when hydrated (the cap bounds the wait)
   // No signal (a framework we cannot see): after load and a moment.
   return lateBoot || sinceLoad() > 1000;
 };
@@ -300,8 +308,9 @@ const allowInsert = (id: string, now: number) => {
  * markup in an island that hydrates after the swap; ours in it then fails
  * that hydration and the island renders anew).
  */
+// (hydrated() reads the position for React and Angular only: no read of it in a build without them.)
 const mustWait = (r: Rule, anchor: Element, age: number) =>
-  (!lost.has(r.id) || !!anchor.closest('astro-island[ssr]')) && !hydrated(anchor, r.position) && (age < MAX_HYDRATION_WAIT || reactHydrating(anchor, age) || ngHydrating(anchor, r.position, age));
+  (!lost.has(r.id) || (ASTRO ? !!anchor.closest('astro-island[ssr]') : false)) && !hydrated(anchor, REACT || ANGULAR ? r.position : 'prepend') && (age < MAX_HYDRATION_WAIT || reactHydrating(anchor, age) || (ANGULAR ? ngHydrating(anchor, r.position, age) : false));
 
 const reconcileRule = (r: Rule, url: URL, now: number) => {
   const mine = [...document.querySelectorAll(`[${OWN_ATTR}="${r.id}"]`)];
@@ -322,21 +331,21 @@ const reconcileRule = (r: Rule, url: URL, now: number) => {
   // placed. Otherwise only our own instance counts: a copy of it (a Turbo
   // snapshot restored) is not live, it goes.
   const keep =
-    mine.find((el) => el.hasAttribute('data-lbx-ssr') && isPlaced(el, anchor!, r.position)) ??
+    (SSR ? mine.find((el) => el.hasAttribute('data-lbx-ssr') && isPlaced(el, anchor!, r.position)) : undefined) ??
     mine.find((el) => el === instances.get(r.id) && isPlaced(el, anchor!, r.position));
   if (!keep && placedOn.has(r.id) && placedOn.get(r.id) !== anchor) lost.add(r.id);
   mine.filter((el) => el !== keep).forEach((el) => el.remove());
   if (keep) {
     // The server's element becomes ours (it drops its marker once hydrated).
     instances.set(r.id, keep as HTMLElement);
-    if (!keep.hasAttribute('data-turbo-temporary')) keep.setAttribute('data-turbo-temporary', '');
+    if (TURBO && !keep.hasAttribute('data-turbo-temporary')) keep.setAttribute('data-turbo-temporary', '');
     // Placed while parsing, before the page said React hydrates it as a whole
     // (Remix, React Router 7 and Hydrogen say so at the end of <body>): out
     // again until React has it, or React re-renders the document. Their
     // scripts run after the parse, so it is gone before hydration starts.
     // Within the same limits as the wait before an insert (React never hydrating must not keep ours out).
     if (!firstSeen.has(anchor)) firstSeen.set(anchor, now);
-    if (!keep.hasAttribute('data-lbx-ssr') && wholeDocument() && mustWait(r, anchor, now - (firstSeen.get(anchor) ?? now))) {
+    if ((!SSR || !keep.hasAttribute('data-lbx-ssr')) && wholeDocument() && mustWait(r, anchor, now - (firstSeen.get(anchor) ?? now))) {
       keep.remove();
       scheduleIn(200);
     }
@@ -361,7 +370,7 @@ const reconcileRule = (r: Rule, url: URL, now: number) => {
   instances.set(r.id, el);
   el.setAttribute(OWN_ATTR, r.id);
   // Turbo Drive: not in its page snapshots (a restored copy would sit next to ours).
-  el.setAttribute('data-turbo-temporary', '');
+  if (TURBO) el.setAttribute('data-turbo-temporary', '');
   place(el, anchor, r.position);
   placedOn.set(r.id, anchor);
   lost.delete(r.id);

package/src/core/routes.ts

@@ -3,6 +3,7 @@
 
 import type { ParamMap, PlpConfigType, SearchConfigType } from '../types';
 import { reportError } from './health';
+import { READ_QUERY } from './features';
 
 /** An integration's URL hook (active, readQuery) that throws: the page is not ours. */
 const guarded = (where: string, f: (u: URL) => boolean) => (u: URL) => {
@@ -19,7 +20,7 @@ export const P = 'lbx.';
 
 // Tracking params, and the LBX loader's own (_lbx_env=development, …): never a reason to leave a page to the host.
 export const TRACKING = '^(utm_|_lbx_|gclid$|gbraid$|wbraid$|fbclid$|msclkid$|_gl$|mc_(cid|eid)$|srsltid$)';
-const TRACKING_RE = new RegExp(TRACKING);
+const TRACKING_RE = RegExp(TRACKING);
 
 /** A URL without the params in `ignore` (default: tracking) and without its #hash: the page it shows. */
 export const withoutTracking = (href: string, ignore = TRACKING_RE) => {
@@ -47,7 +48,7 @@ export const firstPage = (v: string) => /^0*1$/.test(v.trim());
 export const has = (o: object, k: string) => Object.prototype.hasOwnProperty.call(o, k);
 
 export const searchReadQuery = (c: SearchConfigType) => {
-  if (c.readQuery) {
+  if (READ_QUERY && c.readQuery) {
     const read = c.readQuery;
     return (u: URL) => {
       try {
@@ -58,13 +59,13 @@ export const searchReadQuery = (c: SearchConfigType) => {
       }
     };
   }
-  const re = c.urlMatch ? new RegExp(c.urlMatch) : null;
+  const re = c.urlMatch ? RegExp(c.urlMatch) : null;
   return (u: URL) => (c.queryParam ? u.searchParams.get(c.queryParam) : decode((re?.exec(u.pathname)?.[1] ?? '').replace(/\+/g, ' ')))?.trim() || '';
 };
 
 export const searchAccepts = (c: SearchConfigType) => {
   if (c.active) return guarded('search active', c.active);
-  const re = c.urlMatch ? new RegExp(c.urlMatch) : null;
+  const re = c.urlMatch ? RegExp(c.urlMatch) : null;
   const read = searchReadQuery(c);
   return guarded('search readQuery', (u: URL) => (!re || re.test(u.pathname)) && !!read(u));
 };
@@ -83,9 +84,9 @@ export const flagId = (f: { param: string; value: string }) => `${f.param}=${f.v
  * anything else leaves the page to the host, so no URL ever loses a filter.
  */
 export const plpAccepts = (c: Pick<PlpConfigType, 'urlMatch' | 'params' | 'active'>) => {
-  const re = new RegExp(c.urlMatch);
+  const re = RegExp(c.urlMatch);
   const pm: ParamMap = c.params ?? {};
-  const ignore = new RegExp(pm.ignore ?? TRACKING);
+  const ignore = RegExp(pm.ignore ?? TRACKING);
   const flags = pm.flags ?? [];
   const facetParams = pm.facetParams ?? {};
   const byParam = new Map(Object.entries(facetParams).map(([facet, fp]) => [fp.param, facet]));

package/src/core/scheduler.ts

@@ -28,12 +28,36 @@ let framesRunning = false;
 const firstPaintDone = () =>
   framesRunning || (framesRunning = performance.getEntriesByType('paint').length > 0 || document.readyState === 'complete');
 
+/** Longest wait for a frame: past it the reconcile runs in a task (afterFrame too, once frames are stalled). */
+const FRAME_FALLBACK_MS = 100;
+/** A frame asked for this long ago that has not come: frames are stalled (WebKit on a busy machine: none for ~5 s). */
+const STALL_MS = 250;
+let asked = 0; // our requestAnimationFrame callbacks not yet run
+let askedAt = 0; // when the earliest of them was asked for, or the last frame of ours ran
+/** requestAnimationFrame, counted: whether a frame is overdue is known to every caller. */
+const frame = (cb: () => void) => {
+  if (!asked++) askedAt = performance.now();
+  requestAnimationFrame(() => {
+    asked--;
+    askedAt = performance.now(); // a frame came: the asks still waiting start the clock anew
+    cb();
+  });
+};
+const framesStalled = () => asked > 0 && performance.now() - askedAt > STALL_MS;
+
 export const schedule = () => {
   if (pending) return;
   pending = true;
   // rAF does not run in background tabs or before the first paint; use a timeout there.
-  if (document.visibilityState === 'visible' && firstPaintDone()) requestAnimationFrame(flush);
-  else setTimeout(flush, document.visibilityState === 'visible' ? 16 : 50);
+  if (document.visibilityState !== 'visible' || !firstPaintDone()) return void setTimeout(flush, document.visibilityState === 'visible' ? 16 : 50);
+  // A visible page can still run no frames for seconds while its timers run
+  // (WebKit on a busy 2-CPU machine: ~5 s after typing). Waiting for one
+  // then outlasted the hold's timeout: their listing came back, ours stayed
+  // hidden. Whichever comes first, once.
+  let done = false;
+  const run = () => !done && ((done = true), flush());
+  frame(run);
+  setTimeout(run, FRAME_FALLBACK_MS);
 };
 
 export const scheduleIn = (ms: number) => setTimeout(schedule, ms);
@@ -43,7 +67,11 @@ export const scheduleIn = (ms: number) => setTimeout(schedule, ms);
  * are clean then, so reading computed styles or sizes costs only what we read,
  * not a style pass over the whole (host) document. Where no frames run (a
  * hidden tab, before the first paint) in a task of its own; a tab hidden
- * meanwhile (rAF waits until it is shown) by a timeout.
+ * meanwhile (rAF waits until it is shown) by a timeout: 500 ms, so a slow
+ * frame (a large page at 4x CPU) still comes first and the read costs no
+ * forced style pass; FRAME_FALLBACK_MS once frames are stalled (none for
+ * STALL_MS while asked for: WebKit ran none for ~5 s on a busy machine, and a
+ * listing's first render, one step per frame, showed nothing for 2.5 s then).
  */
 export const afterFrame = (f: Task) => {
   if (document.visibilityState !== 'visible') {
@@ -57,8 +85,14 @@ export const afterFrame = (f: Task) => {
   const run = () => !done && ((done = true), f());
   // Ahead of the page's own queued tasks where the browser can (Chrome's scheduler).
   const post = (globalThis as any).scheduler?.postTask;
-  requestAnimationFrame(() => (post ? post.call((globalThis as any).scheduler, run, { priority: 'user-blocking' }) : setTimeout(run, 0)));
-  setTimeout(run, 500);
+  frame(() => (post ? post.call((globalThis as any).scheduler, run, { priority: 'user-blocking' }) : setTimeout(run, 0)));
+  const t0 = performance.now();
+  const tick = () => {
+    if (done) return;
+    if (framesStalled() || performance.now() - t0 >= 500) run();
+    else setTimeout(tick, FRAME_FALLBACK_MS);
+  };
+  setTimeout(tick, FRAME_FALLBACK_MS);
 };
 
 let pendingNow = false;

package/src/core/speculation.ts

@@ -18,6 +18,7 @@
 // activation (core/takeover.ts).
 
 import { mark } from './health';
+import { cspNonce } from './styles';
 import type { GlobalConfigType } from '../types';
 
 const LINKS = ':is(lbx-search, lbx-plp) [data-lbx-list] a[href], lbx-reco a[href], [data-lbx="ac-overlay"] a[href]';
@@ -49,6 +50,7 @@ export const speculate = (g: GlobalConfigType, onUrlChange: (f: () => void) => u
     el = document.createElement('script');
     el.type = 'speculationrules';
     el.setAttribute('data-lbx', 'speculation');
+    el.nonce = cspNonce(); // a strict script-src applies to inline speculation rules
     el.textContent = JSON.stringify(rules);
     document.head.append(el);
   };

package/src/core/stash.ts

@@ -1,11 +1,17 @@
-// A listing result kept in sessionStorage for the next page load of its URL
-// (widgets/listing/stash.ts reads and writes them). The entry only asks
+// A listing result kept in sessionStorage for the next page load that shows
+// it (widgets/listing/stash.ts reads and writes them): a listing left for
+// Back, under its page's URL; a typed query's search page, under the query
+// (the URL its form submits to is often not the one its page loads at: a
+// server that redirects `/search?q=x` to `/search/x/`). The entry only asks
 // whether this load can use one: a search page then does not send its own
 // request before the listing's chunk has read it.
 import { pageKey } from './page';
 
 export const STASH = 'lbx:r:';
+/** A listing left for Back: its page. */
 export const stashKey = (href: string) => STASH + pageKey(href);
+/** A typed query's result (`spec`): the query, on its route, whatever URL its page loads at. */
+export const specKey = (route: string, q: string) => `${STASH}spec:${route}:${q}`;
 
 /** How this document was loaded, and its URL (a later SPA visit is not the load a stash is for). */
 export const navigation = () => {
@@ -47,11 +53,14 @@ export const stashFits = (kind: string, at = 0) => {
   return Date.now() - at < ROUND_TRIP_MS && (t === 'reload' || (t === 'navigate' && fromItself()));
 };
 
-/** A stash this load will likely use (the listing checks it fully). Reads only the start of the entry. */
-export const hasStash = (href: string) => {
+/** A stash this load will likely use (the listing checks it fully): the page's for Back, or the search query's (`spec`). Reads only the start of the entry. */
+export const hasStash = (href: string, spec?: { route: string; q: string }) => {
   try {
-    const head = sessionStorage.getItem(stashKey(href))?.slice(0, 60);
-    return !!head && stashFits(head.includes('"kind":"back"') ? 'back' : 'spec', Number(/"at":(\d+)/.exec(head)?.[1]) || 0);
+    const fits = (key: string) => {
+      const head = sessionStorage.getItem(key)?.slice(0, 60);
+      return !!head && stashFits(head.includes('"kind":"back"') ? 'back' : 'spec', Number(/"at":(\d+)/.exec(head)?.[1]) || 0);
+    };
+    return fits(stashKey(href)) || (!!spec?.q && fits(specKey(spec.route, spec.q)));
   } catch {
     return false;
   }

package/src/core/styles.ts

@@ -13,13 +13,14 @@
 //    route-scoped. CSS survives host re-renders, DOM mutations would not.
 // Every sheet is put back when a host re-render drops it (onFlush).
 
+import { DOCUMENT_REACT } from './frameworks';
 import { documentMayHydrate, hasFiber, watchOwnRemovals } from './own';
 import { onFlush } from './scheduler';
 
-// While <head> is still parsing, on every page: whole-document frameworks
-// announce themselves only at the end of <body>, and the body-start observer
-// puts ours in before anything of the body paints.
-const deferred = () => !document.body;
+// While <head> is still parsing, on every page that may be whole-document
+// React (DOCUMENT_REACT): it announces itself only at the end of <body>, and
+// the body-start observer puts ours in before anything of the body paints.
+const deferred = () => (DOCUMENT_REACT ? !document.body : false);
 
 const sheets = new Map<string, HTMLStyleElement>();
 
@@ -38,7 +39,7 @@ const declareLayer = () => {
   const head = document.head || document.documentElement;
   // React has it once it has claimed <head>, or <html> when its root renders
   // no <head> of its own (Next's app router: Next fills it): hydrated past it.
-  const early = (document.readyState === 'loading' || documentMayHydrate()) && !hasFiber(head) && !hasFiber(document.documentElement);
+  const early = DOCUMENT_REACT ? (document.readyState === 'loading' || documentMayHydrate()) && !hasFiber(head) && !hasFiber(document.documentElement) : false;
   if (order?.isConnected && (early || head.firstElementChild === order)) return;
   order ??= styleEl();
   order.textContent = '@layer lbx;';

package/src/core/support.ts

@@ -9,4 +9,4 @@ export { speculate } from './speculation';
 // Images (./images.ts, ./image-tags.ts, ./image-load.ts): every widget's templates and pages.
 export { imageHelpers } from './image-tags';
 export { firstRowCount, firstRowImages, imageOf } from './images';
-export { preloadImages, settleImages, warmImages } from './image-load';
+export { settleImages, warmImages } from './image-load';