@luigisbox/luma 0.3.0 → 0.5.0

package/src/api/ai.ts

@@ -8,6 +8,7 @@
 // Also runs in Node (the edge render service): there the
 // storefront origin is sent explicitly and nothing touches the DOM.
 
+import { PLP, RECOMMENDER, SEARCH } from '../core/features';
 import { health } from '../core/health';
 import type { GlobalConfigType } from '../types';
 import type { Api, FacetData, Hit, Page } from '.';
@@ -15,6 +16,11 @@ import { fetchJson, TIMEOUT_MS, tokensFor, untilAborted, visitorId } from './tok
 
 export { untilAborted };
 
+/** A method of a widget the build has no folder for (never called). */
+const unbuilt = (): never => {
+  throw Error('not in this build');
+};
+
 export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
   const tk = tokensFor(g, origin);
   const { API, originHeaders } = tk;
@@ -48,8 +54,8 @@ export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
         return post(path, params, body, signal, true);
       }
     }
-    if (!r.ok) throw new Error(`${path}: HTTP ${r.status} ${r.body.slice(0, 300)}`);
-    if (r.json == null) throw new Error(`${path}: not JSON`);
+    if (!r.ok) throw Error(`${path}: HTTP ${r.status} ${r.body.slice(0, 300)}`);
+    if (r.json == null) throw Error(`${path}: not JSON`);
     return r.json;
   };
 
@@ -75,24 +81,30 @@ export const aiApi = (g: GlobalConfigType, origin?: string): Api => {
       return { hits: j.hits ?? [], total: j.total ?? j.total_approx ?? 0, guid: j.guid, cursor: j.next_page_cursor ?? null, status: j.pagination_status ?? 'exhausted' };
     },
 
-    facets: async (guid, facets, signal): Promise<Record<string, FacetData>> =>
-      (await post('facets', { channel_id: g.channelId }, { guid, facets: facets.map((f) => compact(f)) }, signal)).facets ?? {},
+    // A listing's and a recommender's (core/features.ts): not in a build without one.
+    facets:
+      SEARCH || PLP
+        ? async (guid, facets, signal): Promise<Record<string, FacetData>> =>
+            (await post('facets', { channel_id: g.channelId }, { guid, facets: facets.map((f) => compact(f)) }, signal)).facets ?? {}
+        : unbuilt,
 
-    recommend: async (r, signal): Promise<Hit[]> =>
-      (
-        await post(
-          'recommender',
-          { channel_id: g.channelId, surface_id: r.surface },
-          compact({
-            type: r.type,
-            size: r.size,
-            anchor_ids: r.anchors.length ? r.anchors.slice(0, 50) : undefined,
-            exclude_ids: r.exclude?.length ? r.exclude.slice(0, 50) : undefined,
-            filters: nonEmpty(r.filters),
-            return_fields: r.fields?.length ? r.fields : undefined,
-          }),
-          signal,
-        )
-      ).hits ?? [],
+    recommend: RECOMMENDER
+      ? async (r, signal): Promise<Hit[]> =>
+          (
+            await post(
+              'recommender',
+              { channel_id: g.channelId, surface_id: r.surface },
+              compact({
+                type: r.type,
+                size: r.size,
+                anchor_ids: r.anchors.length ? r.anchors.slice(0, 50) : undefined,
+                exclude_ids: r.exclude?.length ? r.exclude.slice(0, 50) : undefined,
+                filters: nonEmpty(r.filters),
+                return_fields: r.fields?.length ? r.fields : undefined,
+              }),
+              signal,
+            )
+          ).hits ?? []
+      : unbuilt,
   };
 };

package/src/api/token.ts

@@ -99,7 +99,7 @@ export async function solveHere(nonce: string, difficulty: number, until: number
   let t0 = Date.now();
   for (let n = 0; ; n++) {
     if ((n & 1023) === 0 && Date.now() - t0 > (slice || 50)) {
-      if (Date.now() > until) throw new Error('proof of work: no answer in time');
+      if (Date.now() > until) throw Error('proof of work: no answer in time');
       if (slice) await new Promise((r) => setTimeout(r));
       t0 = Date.now();
     }
@@ -142,8 +142,8 @@ const solve = (nonce: string, difficulty: number): Promise<number> => {
       return here(); // CSP worker-src
     }
     // A worker that never answers is stopped.
-    timer = window.setTimeout(() => (done(), reject(new Error('proof of work: no answer in time'))), POW_TIMEOUT_MS);
-    w.onmessage = (e) => (done(), e.data == null ? reject(new Error('proof of work failed')) : resolve(e.data));
+    timer = window.setTimeout(() => (done(), reject(Error('proof of work: no answer in time'))), POW_TIMEOUT_MS);
+    w.onmessage = (e) => (done(), e.data == null ? reject(Error('proof of work failed')) : resolve(e.data));
     w.onerror = here;
     w.postMessage([nonce, difficulty, until]);
   });
@@ -236,9 +236,9 @@ const tokens = (g: GlobalConfigType, origin?: string): Tokens => {
     const url = challengeUrl(g);
     // The one the entry asked while this chunk loaded (the first try only: a retry needs a new one).
     const ch = await fetchJson(url, { headers: originHeaders }, TIMEOUT_MS, undefined, browser && retries ? takeChallenge(url) : undefined);
-    if (!ch.ok) throw new Error(`browser-challenge: HTTP ${ch.status}`);
+    if (!ch.ok) throw Error(`browser-challenge: HTTP ${ch.status}`);
     const { nonce, difficulty } = ch.json ?? {};
-    if (typeof nonce !== 'string' || !(difficulty >= 0 && difficulty <= MAX_DIFFICULTY)) throw new Error('browser-challenge: unexpected challenge');
+    if (typeof nonce !== 'string' || !(difficulty >= 0 && difficulty <= MAX_DIFFICULTY)) throw Error('browser-challenge: unexpected challenge');
     const solution = await solve(nonce, difficulty);
     const r = await fetchJson(
       `${AUTH}/browser-token`,
@@ -260,10 +260,10 @@ const tokens = (g: GlobalConfigType, origin?: string): Tokens => {
     if (!r.ok) {
       const detail = r.json?.detail;
       if (retries > 0 && detail === 'Nonce expired') return mint(retries - 1);
-      throw new Error(`browser-token: HTTP ${r.status} ${typeof detail === 'string' ? detail : ''}`);
+      throw Error(`browser-token: HTTP ${r.status} ${typeof detail === 'string' ? detail : ''}`);
     }
     const { access_token, expires_in } = r.json ?? {};
-    if (typeof access_token !== 'string' || !(expires_in > 30)) throw new Error('browser-token: unexpected response');
+    if (typeof access_token !== 'string' || !(expires_in > 30)) throw Error('browser-token: unexpected response');
     return { token: access_token, exp: Date.now() + (expires_in - 30) * 1000 };
   };
 

package/src/core/a11y.ts

@@ -90,17 +90,17 @@ export const CONTRAST_CSS =
   `@media (prefers-contrast:more){:root:not([data-lbx-contrast="off"]) ${OURS}{outline:3px solid!important;outline-offset:2px!important}}` +
   `:root[data-lbx-contrast="more"] ${OURS}{outline:3px solid!important;outline-offset:2px!important}\n`;
 
-const KEY = 'lbx:contrast';
+export const CONTRAST_KEY = 'lbx:contrast';
 const stored = () => {
   try {
-    const v = localStorage.getItem(KEY);
+    const v = localStorage.getItem(CONTRAST_KEY);
     return v === 'more' || v === 'off' ? v : null;
   } catch {
     return null;
   }
 };
 const more = () => (typeof matchMedia === 'function' ? matchMedia('(prefers-contrast: more)') : null);
-const prefersMore = () => !!more()?.matches;
+export const prefersMore = () => !!more()?.matches;
 
 /** The mode's state: the visitor's toggle, else their OS setting ('more'), else none. */
 const state = () => stored() ?? (prefersMore() ? 'more' : null);
@@ -112,7 +112,7 @@ export const contrastOn = () => state() === 'more';
  * is on (the toggle, or the OS setting: one selector for both), `"off"` when
  * the visitor switched it off against their OS setting.
  */
-const apply = () => {
+export const applyContrast = () => {
   const v = state();
   const html = document.documentElement;
   if (!v) html.removeAttribute('data-lbx-contrast');
@@ -125,36 +125,7 @@ export const useContrast = () => {
   setCss('lbx:contrast', layered(CONTRAST_CSS));
   if (!watching) {
     watching = true;
-    more()?.addEventListener?.('change', apply);
+    more()?.addEventListener?.('change', applyContrast);
   }
-  apply();
-};
-
-/** Switch it (our toggle): remembered for this browser; back to "as the OS says" when that matches. */
-export const setContrast = (on: boolean) => {
-  const v = on === prefersMore() ? null : on ? 'more' : 'off';
-  try {
-    if (v) localStorage.setItem(KEY, v);
-    else localStorage.removeItem(KEY);
-  } catch {}
-  apply();
-};
-
-/**
- * Modelled on the previous-generation Luma's switch (`_global.contrastToggle`): a button that turns the
- * mode on and off. Visually hidden until focused unless the visitor's OS asks
- * for a contrast preference or the mode is on (as that one was), so a
- * keyboard user who reaches it always sees it.
- */
-export const contrastToggle = (label: string) => {
-  const b = document.createElement('button');
-  b.type = 'button';
-  b.className = 'lbx-contrast-toggle';
-  b.textContent = label;
-  b.setAttribute('aria-pressed', String(contrastOn()));
-  b.addEventListener('click', (e) => {
-    e.stopPropagation();
-    setContrast(!contrastOn());
-  });
-  return b;
+  applyContrast();
 };

package/src/core/context.ts

@@ -6,6 +6,7 @@
 import type { Templates } from './templates';
 import type { LumaConfigType } from '../types';
 import type { WidgetContext } from '../main';
+import { QUERY_URL } from './features';
 import { nameOf, slot } from './integration';
 
 type Support = typeof import('./support');
@@ -104,5 +105,6 @@ export const widgetContext = (
     result: s.resultFactory({ ...g.computedAttributes, ...w.app.computedAttributes }),
     // Images: a listing's first row is eager; elsewhere (recommenders, the autocomplete) every image is lazy.
     helpers: { t, price, plain: s.plain, first: s.first, ...s.imageHelpers(g.images, w.id !== 'search' && w.id !== 'plp') },
+    queryUrl: QUERY_URL ? config.search?.queryUrl : undefined,
   };
 };

package/src/core/contrast-toggle.ts

@@ -0,0 +1,32 @@
+// The listing's high-contrast toggle (`contrastToggle` of a listing config):
+// apart from ./a11y.ts (every widget's), so only the listing's chunk has it.
+import { applyContrast, CONTRAST_KEY, contrastOn, prefersMore } from './a11y';
+
+/** Switch it (our toggle): remembered for this browser; back to "as the OS says" when that matches. */
+export const setContrast = (on: boolean) => {
+  const v = on === prefersMore() ? null : on ? 'more' : 'off';
+  try {
+    if (v) localStorage.setItem(CONTRAST_KEY, v);
+    else localStorage.removeItem(CONTRAST_KEY);
+  } catch {}
+  applyContrast();
+};
+
+/**
+ * Modelled on the previous-generation Luma's switch (`_global.contrastToggle`): a button that turns the
+ * mode on and off. Visually hidden until focused unless the visitor's OS asks
+ * for a contrast preference or the mode is on (as that one was), so a
+ * keyboard user who reaches it always sees it.
+ */
+export const contrastToggle = (label: string) => {
+  const b = document.createElement('button');
+  b.type = 'button';
+  b.className = 'lbx-contrast-toggle';
+  b.textContent = label;
+  b.setAttribute('aria-pressed', String(contrastOn()));
+  b.addEventListener('click', (e) => {
+    e.stopPropagation();
+    setContrast(!contrastOn());
+  });
+  return b;
+};

package/src/core/default-button.ts

@@ -0,0 +1,66 @@
+// A form's default button, what an implicit submission (Enter in a field)
+// submits with. In lbx-core: the autocomplete's "show all" link (its href is
+// the URL Enter would load) and the search form's URL (widgets/search/form-url.ts,
+// lbx-nav) read the same button, so the link, the result fetched while typing
+// and the page fetched ahead agree.
+
+export type Submitter = HTMLButtonElement | HTMLInputElement;
+
+/** FormData(form, submitter) is newer (Chrome 112, Safari 16.4, Firefox 111): before, the second argument is ignored (it does not throw). */
+let withSubmitter: boolean | undefined;
+export const submitterSupported = () => {
+  if (withSubmitter === undefined) {
+    try {
+      const f = document.createElement('form');
+      const b = f.appendChild(document.createElement('button'));
+      b.name = 'x';
+      b.value = '1';
+      withSubmitter = new FormData(f, b).get('x') === '1';
+    } catch {
+      withSubmitter = false;
+    }
+  }
+  return withSubmitter;
+};
+
+/**
+ * The form's data as a submit by `btn` sends it (null: by no button). Where
+ * the engine ignores the submitter argument, its own entry is added by hand:
+ * name=value, or an image button's x and y (`name.x`, `name.y`; `x`, `y`
+ * without a name), 0 as a submit without a pointer.
+ */
+export const formDataOf = (form: HTMLFormElement, btn: Submitter | null): FormData => {
+  const native = submitterSupported();
+  let own = !native; // the submitter's entry is ours to add
+  let data: FormData;
+  try {
+    data = new FormData(form, native && btn ? btn : undefined);
+  } catch {
+    data = new FormData(form); // not a submit button of this form
+    own = true;
+  }
+  if (own && btn) {
+    if (btn.type === 'image') {
+      data.append(btn.name ? `${btn.name}.x` : 'x', '0');
+      data.append(btn.name ? `${btn.name}.y` : 'y', '0');
+    } else if (btn.name) data.append(btn.name, btn.value);
+  }
+  return data;
+};
+
+/**
+ * The form's default button: the first submit button it owns in tree order
+ * (inside it, or anywhere in its tree through `form=`), what an implicit
+ * submission (Enter in a field) submits with, so its `formaction`,
+ * `formmethod`, `formtarget`, `formnovalidate` and name=value count as on a
+ * click. null without one.
+ */
+export const defaultSubmitter = (form: HTMLFormElement): Submitter | null => {
+  // A button outside the form owns it through form="<id>": the whole tree only when the form has an id.
+  for (const el of (form.id ? (form.getRootNode() as ParentNode) : form).querySelectorAll<Submitter>('button, input')) {
+    if (el.form !== form) continue;
+    const type = (el.getAttribute('type') ?? '').trim().toLowerCase();
+    if (el instanceof HTMLButtonElement ? type === '' || type === 'submit' : type === 'submit' || type === 'image') return el;
+  }
+  return null;
+};

package/src/core/early-rules.ts

@@ -16,6 +16,7 @@
 import { holdCss } from './hold';
 import { P, TRACKING } from './routes';
 import type { PlpConfigType, SearchConfigType } from '../types';
+import { NAMED_EARLY_HOLD } from './features';
 
 const EARLY_KEY = 'lbx:early';
 // Short: when the bundle stops running (switched off, blocked), holds end soon after.
@@ -35,9 +36,22 @@ export interface EarlyRoute {
 const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 // reserveSelector: set by loadConfig (default: the first anchor).
 
-/** Only what the snippet can express: a path regex and a query param (no custom readQuery/active). */
-export const searchRule = (c: SearchConfigType, hostCss: string): EarlyRoute | null =>
-  c.urlMatch && c.queryParam && !c.readQuery && !c.active ? { id: 'search', path: c.urlMatch, need: [c.queryParam], css: holdCss(hostCss, c.reserveSelector!) } : null;
+/** Capture groups in a regex source (its alternation with the empty string always matches). */
+const groups = (re: string) => RegExp(`${re}|`).exec('')!.length - 1;
+
+/**
+ * Only what the snippet can express (no custom readQuery/active): a path
+ * regex and a query param, or a path regex whose capture group 1 is the query
+ * (/search/<q>/). The snippet cannot check that capture (the bundle decodes
+ * and trims it), so it also holds a blank one (/search/+/); the bundle
+ * rejects that URL and drops the unclaimed hold at boot, as for plpRule's `active`.
+ */
+export const searchRule = (c: SearchConfigType, hostCss: string): EarlyRoute | null => {
+  if (!c.urlMatch || c.readQuery || c.active) return null;
+  const css = holdCss(hostCss, c.reserveSelector!);
+  if (c.queryParam) return { id: 'search', path: c.urlMatch, need: [c.queryParam], css };
+  return groups(c.urlMatch) ? { id: 'search', path: c.urlMatch, css } : null;
+};
 
 /**
  * Param names the category route can express (values are checked by the bundle).
@@ -48,7 +62,7 @@ export const searchRule = (c: SearchConfigType, hostCss: string): EarlyRoute | n
  * the unclaimed hold at boot; `earlyHold: false` opts out where it is not.
  */
 export const plpRule = (c: PlpConfigType, hostCss: string): EarlyRoute | null => {
-  if (c.earlyHold === false) return null;
+  if ((NAMED_EARLY_HOLD ? c.earlyHold === false : false)) return null;
   const pm = c.params ?? {};
   // Their page param too: their page 1 is ours. A later page of theirs is
   // theirs (plpAccepts), a value the snippet does not check: held until the

package/src/core/features.ts

@@ -0,0 +1,109 @@
+// The widgets an integration has (build/vite.mjs `features`): a widget is its
+// folder (integration/autocomplete/, search/, plp/, recommender <name>/; an
+// _analytics.ts or _widget.ts in any folder); a feature only the
+// integration's own files can ask for (a template's attribute, a hook its
+// _init.ts sets) by that text in them. The build defines these from the folders, so
+// the entry leaves out what a missing widget's triggers need. The dev server
+// (folders come and go), the render service and unit tests: all true.
+// As in core/frameworks.ts: a flag in `if (FLAG)` or `FLAG ? x : y` only.
+
+declare const __LBX_AUTOCOMPLETE__: boolean | undefined;
+declare const __LBX_SEARCH__: boolean | undefined;
+declare const __LBX_PLP__: boolean | undefined;
+declare const __LBX_RECOMMENDER__: boolean | undefined;
+declare const __LBX_ANALYTICS__: boolean | undefined;
+declare const __LBX_SSR__: boolean | undefined;
+declare const __LBX_WIDGET_INITS__: boolean | undefined;
+declare const __LBX_CART__: boolean | undefined;
+declare const __LBX_DRAWER__: boolean | undefined;
+declare const __LBX_MENU__: boolean | undefined;
+declare const __LBX_DROPDOWN__: boolean | undefined;
+declare const __LBX_AC_HOOKS__: boolean | undefined;
+declare const __LBX_ON_RENDER__: boolean | undefined;
+declare const __LBX_READ_QUERY__: boolean | undefined;
+declare const __LBX_FACETS_FOR__: boolean | undefined;
+declare const __LBX_QUERY_URL__: boolean | undefined;
+declare const __LBX_HOST_STYLES__: boolean | undefined;
+declare const __LBX_TRANSLATIONS__: boolean | undefined;
+declare const __LBX_INITS__: boolean | undefined;
+declare const __LBX_EMPTY_VALUES__: boolean | undefined;
+declare const __LBX_PRERENDER_TYPING__: boolean | undefined;
+declare const __LBX_CONTENT_VISIBILITY__: boolean | undefined;
+declare const __LBX_NAMED_PRECONNECT_IMAGES__: boolean | undefined;
+declare const __LBX_NAMED_PREFETCH_FILTERS__: boolean | undefined;
+declare const __LBX_NAMED_PRELOAD__: boolean | undefined;
+declare const __LBX_NAMED_FADE__: boolean | undefined;
+declare const __LBX_NAMED_RESTORE_ON_BACK__: boolean | undefined;
+declare const __LBX_NAMED_PREFETCH_NEXT_PAGE__: boolean | undefined;
+declare const __LBX_NAMED_IN_PLACE_QUERY__: boolean | undefined;
+declare const __LBX_NAMED_PREFETCH_WHILE_TYPING__: boolean | undefined;
+declare const __LBX_NAMED_EARLY_HOLD__: boolean | undefined;
+declare const __LBX_NAMED_SPECULATION__: boolean | undefined;
+
+/** integration/autocomplete/. */
+export const AUTOCOMPLETE = typeof __LBX_AUTOCOMPLETE__ === 'boolean' ? __LBX_AUTOCOMPLETE__ : true;
+/** integration/search/. */
+export const SEARCH = typeof __LBX_SEARCH__ === 'boolean' ? __LBX_SEARCH__ : true;
+/** integration/plp/. */
+export const PLP = typeof __LBX_PLP__ === 'boolean' ? __LBX_PLP__ : true;
+/** An integration/recommender <name>/. */
+export const RECOMMENDER = typeof __LBX_RECOMMENDER__ === 'boolean' ? __LBX_RECOMMENDER__ : true;
+/** An _analytics.ts in any folder (without one, analytics is off: main.ts). */
+export const ANALYTICS = typeof __LBX_ANALYTICS__ === 'boolean' ? __LBX_ANALYTICS__ : true;
+/** A _widget.ts in any folder (without one, core/widget-inits.ts has nothing to run). */
+export const WIDGET_INITS = typeof __LBX_WIDGET_INITS__ === 'boolean' ? __LBX_WIDGET_INITS__ : true;
+/** `data-lbx-cart` in any file of the integration (its templates): a tile's add-to-cart (core/tiles.ts). */
+export const CART = typeof __LBX_CART__ === 'boolean' ? __LBX_CART__ : true;
+/** `data-lbx-drawer` in any file of the integration: the listing's filter drawer (widgets/listing/element.ts). */
+export const DRAWER = typeof __LBX_DRAWER__ === 'boolean' ? __LBX_DRAWER__ : true;
+/** `data-lbx-menu` in any file of the integration: menus in the listing's markup (widgets/listing/element.ts). */
+export const MENU = typeof __LBX_MENU__ === 'boolean' ? __LBX_MENU__ : true;
+/** `data-lbx-dropdown` in any file of the integration: `<details>` menus in the listing's markup, closed from outside. */
+export const DROPDOWN = typeof __LBX_DROPDOWN__ === 'boolean' ? __LBX_DROPDOWN__ : true;
+/** The autocomplete's `onOpen`, `onClose`, `onSelect`, `onReady` named in the integration's code. */
+export const AC_HOOKS = typeof __LBX_AC_HOOKS__ === 'boolean' ? __LBX_AC_HOOKS__ : true;
+/** A listing's `onRender` named in the integration's code. */
+export const ON_RENDER = typeof __LBX_ON_RENDER__ === 'boolean' ? __LBX_ON_RENDER__ : true;
+/** The search page's `readQuery` named in the integration's code. */
+export const READ_QUERY = typeof __LBX_READ_QUERY__ === 'boolean' ? __LBX_READ_QUERY__ : true;
+/** A category page's `facetsFor` named in the integration's code. */
+export const FACETS_FOR = typeof __LBX_FACETS_FOR__ === 'boolean' ? __LBX_FACETS_FOR__ : true;
+/** The search page's `queryUrl` named in the integration's code: Enter straight to the query's page (widgets/search/direct.ts), the hook's page as every search's. */
+export const QUERY_URL = typeof __LBX_QUERY_URL__ === 'boolean' ? __LBX_QUERY_URL__ : true;
+/** A style-host.css in any folder (core/integration.ts hostStyle: the host's own to hide or hold). */
+export const HOST_STYLES = typeof __LBX_HOST_STYLES__ === 'boolean' ? __LBX_HOST_STYLES__ : true;
+/** A _translations.ts in any folder (core/integration.ts: over Luma's dictionary). */
+export const TRANSLATIONS = typeof __LBX_TRANSLATIONS__ === 'boolean' ? __LBX_TRANSLATIONS__ : true;
+/** An _init.ts in any folder (core/integration.ts loadConfig). */
+export const INITS = typeof __LBX_INITS__ === 'boolean' ? __LBX_INITS__ : true;
+/**
+ * Options off by default, named in the integration's code (its _config.ts,
+ * or code setting them): a key no file names keeps its default, as only
+ * code naming it can change it. `emptyValues`, `prerenderWhileTyping` (or
+ * `pageWhileTyping`: prerendering the search page typed for), `contentVisibility`.
+ */
+export const EMPTY_VALUES = typeof __LBX_EMPTY_VALUES__ === 'boolean' ? __LBX_EMPTY_VALUES__ : true;
+export const PRERENDER_TYPING = typeof __LBX_PRERENDER_TYPING__ === 'boolean' ? __LBX_PRERENDER_TYPING__ : true;
+export const CONTENT_VISIBILITY = typeof __LBX_CONTENT_VISIBILITY__ === 'boolean' ? __LBX_CONTENT_VISIBILITY__ : true;
+/**
+ * Server-rendered listings (Luigi's Box's server-side includes): adopting
+ * and hydrating the server's markup. Declared, not found in the folders:
+ * `clientConfig(url, { serverRendering: false })` for a site without them.
+ */
+export const SSR = typeof __LBX_SSR__ === 'boolean' ? __LBX_SSR__ : true;
+
+/**
+ * Options on by default, named in the integration's code: where none names
+ * one it is on (only code naming a key sets it), and a read of it is
+ * `NAMED_X ? cfg.x !== false : true` (build/vite.mjs ON_BY_DEFAULT).
+ */
+export const NAMED_PRECONNECT_IMAGES = typeof __LBX_NAMED_PRECONNECT_IMAGES__ === 'boolean' ? __LBX_NAMED_PRECONNECT_IMAGES__ : true;
+export const NAMED_PREFETCH_FILTERS = typeof __LBX_NAMED_PREFETCH_FILTERS__ === 'boolean' ? __LBX_NAMED_PREFETCH_FILTERS__ : true;
+export const NAMED_PRELOAD = typeof __LBX_NAMED_PRELOAD__ === 'boolean' ? __LBX_NAMED_PRELOAD__ : true;
+export const NAMED_FADE = typeof __LBX_NAMED_FADE__ === 'boolean' ? __LBX_NAMED_FADE__ : true;
+export const NAMED_RESTORE_ON_BACK = typeof __LBX_NAMED_RESTORE_ON_BACK__ === 'boolean' ? __LBX_NAMED_RESTORE_ON_BACK__ : true;
+export const NAMED_PREFETCH_NEXT_PAGE = typeof __LBX_NAMED_PREFETCH_NEXT_PAGE__ === 'boolean' ? __LBX_NAMED_PREFETCH_NEXT_PAGE__ : true;
+export const NAMED_IN_PLACE_QUERY = typeof __LBX_NAMED_IN_PLACE_QUERY__ === 'boolean' ? __LBX_NAMED_IN_PLACE_QUERY__ : true;
+export const NAMED_PREFETCH_WHILE_TYPING = typeof __LBX_NAMED_PREFETCH_WHILE_TYPING__ === 'boolean' ? __LBX_NAMED_PREFETCH_WHILE_TYPING__ : true;
+export const NAMED_EARLY_HOLD = typeof __LBX_NAMED_EARLY_HOLD__ === 'boolean' ? __LBX_NAMED_EARLY_HOLD__ : true;
+export const NAMED_SPECULATION = typeof __LBX_NAMED_SPECULATION__ === 'boolean' ? __LBX_NAMED_SPECULATION__ : true;

package/src/core/frameworks-check.ts

@@ -0,0 +1,32 @@
+// Development only (src/main.ts, import.meta.env.DEV): a framework on the
+// page whose support the build left out (clientConfig `framework`,
+// core/frameworks.ts) is said in window.__lbx.health.errors. Without its
+// support Luma does not wait for its hydration or talk to its router: a
+// re-rendered page, ours dropped, a router putting its URL back.
+import { SSR } from './features';
+import { ANGULAR, ASTRO, DOCUMENT_REACT, NEXT, REACT, SVELTEKIT, TURBO, VUE } from './frameworks';
+import { reportError } from './health';
+import { reactDocumentSigns } from './own';
+
+const keyed = (prefixes: string[]) => [...document.querySelectorAll('*')].some((el) => Object.keys(el).some((k) => prefixes.some((p) => k.startsWith(p))));
+
+/** Per part of the support (build/vite.mjs SUPPORTS): left out of this build, and the page shows its framework. */
+const CHECKS: [boolean, string, () => boolean][] = [
+  [DOCUMENT_REACT, 'React hydrating the whole document (next, remix or react-router)', reactDocumentSigns],
+  [REACT, 'React (react)', () => !!document.querySelector('#__next, #___gatsby, [data-reactroot]') || keyed(['__reactContainer$', '__reactFiber$'])],
+  [NEXT, 'the Next.js pages router (next)', () => !!(window as any).__NEXT_DATA__ && !(window as any).next?.appDir],
+  [VUE, 'Vue (vue or nuxt)', () => !!((window as any).__NUXT__ || (window as any).$nuxt || document.querySelector('[data-v-app], #__nuxt, [data-server-rendered]')) || keyed(['__vue_app__', '__vue__'])],
+  [ANGULAR, 'Angular (angular)', () => !!document.querySelector('[ng-version], [ng-server-context]')],
+  [SVELTEKIT, 'SvelteKit (sveltekit)', () => [...document.scripts].some((s) => s.text.includes('__sveltekit_')) || !!document.querySelector('link[href*="/immutable/entry/start."]')],
+  [ASTRO, 'Astro (astro)', () => !!document.querySelector('astro-island, meta[name="astro-view-transitions-enabled"]')],
+  [TURBO, 'Turbo (turbo)', () => !!((window as any).Turbo || (window as any).Turbolinks)],
+  [SSR, 'server-rendered listings (serverRendering)', () => !!document.querySelector('[data-lbx-ssr]')],
+];
+
+/** The frameworks on the page this build has no support for (reported once). */
+export const checkFrameworks = () => {
+  const missing = CHECKS.filter(([has, , seen]) => !has && seen()).map(([, name]) => name);
+  if (missing.length)
+    reportError('boot', `this page uses ${missing.join(', ')}, which the build leaves out (clientConfig \`framework\`, \`serverRendering\`). Declare every framework the site uses, or leave them out.`);
+  return missing;
+};

package/src/core/frameworks.ts

@@ -0,0 +1,35 @@
+// What of each framework's support a build has (build/vite.mjs SUPPORTS):
+// all of it unless the integration declares its framework(s). Constants the
+// build replaces, so code behind a false one is left out of every chunk.
+// Not built by clientConfig (the render service, unit tests): all true.
+//
+// Use them in `if (FLAG)` or `FLAG ? x : y`, not as a value (`FLAG && x`):
+// Rollup keeps such a reference, and a chunk other than the entry then imports
+// the flag from it and keeps the code (test/browser/specs/budgets.spec.ts,
+// .claude/skills/tree-shaking/SKILL.md).
+
+declare const __LBX_REACT__: boolean | undefined;
+declare const __LBX_DOCUMENT_REACT__: boolean | undefined;
+declare const __LBX_NEXT__: boolean | undefined;
+declare const __LBX_VUE__: boolean | undefined;
+declare const __LBX_ANGULAR__: boolean | undefined;
+declare const __LBX_SVELTEKIT__: boolean | undefined;
+declare const __LBX_ASTRO__: boolean | undefined;
+declare const __LBX_TURBO__: boolean | undefined;
+
+/** React roots and islands: createRoot / hydrateRoot, Suspense boundaries, Gatsby. */
+export const REACT = typeof __LBX_REACT__ === 'boolean' ? __LBX_REACT__ : true;
+/** React hydrating the whole document (Next.js, Remix, React Router 7 / Hydrogen): the entry's checks (core/own.ts, core/styles.ts). */
+export const DOCUMENT_REACT = typeof __LBX_DOCUMENT_REACT__ === 'boolean' ? __LBX_DOCUMENT_REACT__ : true;
+/** Next.js pages router: its router (core/url.ts), its hydration measure (core/reconciler.ts). */
+export const NEXT = typeof __LBX_NEXT__ === 'boolean' ? __LBX_NEXT__ : true;
+/** Vue 2 / 3 and Nuxt: their mount (core/reconciler.ts), their router (core/url.ts). */
+export const VUE = typeof __LBX_VUE__ === 'boolean' ? __LBX_VUE__ : true;
+/** Angular's hydration (core/reconciler.ts). */
+export const ANGULAR = typeof __LBX_ANGULAR__ === 'boolean' ? __LBX_ANGULAR__ : true;
+/** SvelteKit: its root (core/reconciler.ts), its history entries (core/url.ts). */
+export const SVELTEKIT = typeof __LBX_SVELTEKIT__ === 'boolean' ? __LBX_SVELTEKIT__ : true;
+/** Astro: islands (core/reconciler.ts), ClientRouter history entries (core/url.ts). */
+export const ASTRO = typeof __LBX_ASTRO__ === 'boolean' ? __LBX_ASTRO__ : true;
+/** Turbo Drive / Turbolinks: snapshots (core/reconciler.ts), history and prefetch (core/turbo.ts). */
+export const TURBO = typeof __LBX_TURBO__ === 'boolean' ? __LBX_TURBO__ : true;

package/src/core/image-load.ts

@@ -50,32 +50,6 @@ export const settleImages = (root: Element, fade = true) => {
   if (fade && !root.hasAttribute('data-lbx-fade')) root.setAttribute('data-lbx-fade', '');
 };
 
-const preloaded = new Set<string>();
-/** <link rel=preload as=image> for these images (their srcset and sizes, so the candidate the <img> picks is the one fetched), at high priority. */
-export const preloadImages = (list: ImageInfo[]) => {
-  try {
-    for (const im of list) {
-      const key = im.srcset || im.src;
-      if (!im.src || preloaded.has(key)) continue;
-      preloaded.add(key);
-      const l = document.createElement('link');
-      l.rel = 'preload';
-      l.setAttribute('as', 'image');
-      l.href = im.src;
-      if (im.srcset) {
-        l.setAttribute('imagesrcset', im.srcset);
-        if (im.sizes) l.setAttribute('imagesizes', im.sizes);
-      }
-      l.setAttribute('fetchpriority', 'high');
-      l.setAttribute('data-lbx', 'preload');
-      document.head.append(l);
-    }
-    // Bounded: the oldest of ours go (a long session of filters and queries).
-    const ours = document.head.querySelectorAll('link[data-lbx="preload"]');
-    for (let k = 0; k < ours.length - 24; k++) ours[k].remove();
-  } catch {}
-};
-
 const warmed = new Set<string>();
 /**
  * The first `cap` images of results fetched ahead, at low priority (the

package/src/core/image-preload.ts

@@ -0,0 +1,29 @@
+// The listing's preload of its first row's images: apart from ./image-load.ts
+// (every widget's), so only the listing's chunk has it.
+import type { ImageInfo } from './images';
+
+const preloaded = new Set<string>();
+/** <link rel=preload as=image> for these images (their srcset and sizes, so the candidate the <img> picks is the one fetched), at high priority. */
+export const preloadImages = (list: ImageInfo[]) => {
+  try {
+    for (const im of list) {
+      const key = im.srcset || im.src;
+      if (!im.src || preloaded.has(key)) continue;
+      preloaded.add(key);
+      const l = document.createElement('link');
+      l.rel = 'preload';
+      l.setAttribute('as', 'image');
+      l.href = im.src;
+      if (im.srcset) {
+        l.setAttribute('imagesrcset', im.srcset);
+        if (im.sizes) l.setAttribute('imagesizes', im.sizes);
+      }
+      l.setAttribute('fetchpriority', 'high');
+      l.setAttribute('data-lbx', 'preload');
+      document.head.append(l);
+    }
+    // Bounded: the oldest of ours go (a long session of filters and queries).
+    const ours = document.head.querySelectorAll('link[data-lbx="preload"]');
+    for (let k = 0; k < ours.length - 24; k++) ours[k].remove();
+  } catch {}
+};

package/src/core/image-tags.ts

@@ -10,9 +10,15 @@ import type { ImagesConfig, Result } from '../types';
  * A complete `<img>` (data-lbx-img: load marks, the fade-in). The placeholder
  * goes on its box: put `data-lbx-ph` and `style=${image(r, i).ph}` on the
  * element around it (the `img` helper does).
+ *
+ * `src` last: lit sets the attributes in this order, and WebKit starts an
+ * image's fetch the moment `src` is set, with the attributes it has then.
+ * With `loading` after it, every lazy image of a listing was fetched at once
+ * in Safari (and the listing's rehearsal fetched its `about:blank`, a console
+ * error); with `srcset` after it, the `src` was fetched besides the candidate.
  */
 export const imgOf = (im: ImageInfo, o: ImageOptions = {}) =>
-  html`<img data-lbx-img src=${im.src} srcset=${im.srcset || nothing} sizes=${im.sizes || nothing} width=${im.width} height=${im.height} alt=${o.alt ?? ''} class=${o.class ?? nothing} title=${o.title ?? nothing} loading=${im.loading} fetchpriority=${im.fetchpriority ?? nothing} decoding="async" />`;
+  html`<img data-lbx-img loading=${im.loading} fetchpriority=${im.fetchpriority ?? nothing} decoding="async" width=${im.width} height=${im.height} alt=${o.alt ?? ''} class=${o.class ?? nothing} title=${o.title ?? nothing} sizes=${im.sizes || nothing} srcset=${im.srcset || nothing} src=${im.src} />`;
 
 /** The template helpers: `image(r, i, opts)` (the attributes) and `img(r, i, opts)` (an `<img>` in its placeholder box). */
 export const imageHelpers = (cfg: ImagesConfig = {}, lazy = false) => ({

package/src/core/images.ts

@@ -15,6 +15,7 @@
 
 import type { ImagesConfig, Result } from '../types';
 import { first, safeUrl } from './result';
+import { NAMED_PRELOAD } from './features';
 
 /** What a template binds on an `<img>` (or its `<source>`), and on the image's box (`ph`). */
 export interface ImageInfo {
@@ -51,7 +52,7 @@ const res = new Map<string, RegExp | null>();
 const regex = (s: string) => {
   if (!res.has(s))
     try {
-      res.set(s, new RegExp(s));
+      res.set(s, RegExp(s));
     } catch {
       res.set(s, null);
     }
@@ -158,7 +159,7 @@ export const firstRowImages = (cfg: ImagesConfig = {}, results: Result[], all =
 const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
 /** `<link rel=preload as=image>` markup for a server-rendered listing: every image of the widest first row, each for the widths it is in the first row at. */
 export const preloadMarkup = (cfg: ImagesConfig = {}, results: Result[]) => {
-  if (cfg.preload === false) return '';
+  if ((NAMED_PRELOAD ? cfg.preload === false : false)) return '';
   return firstRowImages(cfg, results, true)
     .map((im) => {
       const media = firstRowMedia(cfg, im.i);