@luigisbox/luma 0.4.0 → 0.6.0

package/build/vite.mjs

@@ -17,17 +17,21 @@ const FRAMEWORK = resolve(dirname(fileURLToPath(import.meta.url)), '../src');
 // One lazy chunk per widget plus what they share, so a page loads few files:
 //   lbx-core          lit, the template registry, a11y, core/support (i18n,
 //                     images, speculation rules) and the integration's shared
-//                     _global templates (the product tile): every widget's
+//                     _global templates (the product tile): every widget's;
+//                     a core module one chunk alone reaches goes with it
+//                     (soleUser: the listing's contrast toggle, fold, …)
 //   lbx-listing       search results and category pages (one listing: plp is
 //                     a route of it) with the integration's search/ templates
 //   lbx-autocomplete  lbx-recommender   each widget with its templates
-//   lbx-plp  lbx-place  lbx-search  lbx-speculate  lbx-token   the plp widget and its templates,
-//                     placement and recommender triggers, the search page's own,
-//                     search while typing, minting the token (chunkOf)
+//   lbx-plp  lbx-place  lbx-search  lbx-search-in-place  lbx-speculate  lbx-token
+//                     the plp widget and its templates, placement and
+//                     recommender triggers, the search page's own, a new query
+//                     in place, search while typing (and Enter straight to the
+//                     query's page), minting the token (chunkOf)
 //   lbx-nav           what search while typing (lbx-speculate) needs, a
 //                     search page's first request (widgets/search/first.ts)
 //                     and what they share with the listing (the route, query
-//                     building, stash, in-place query, URL writing): typing on
+//                     building, stash, a form's URL, URL writing): typing on
 //                     any page and the listing need it, a page with only a
 //                     recommender does not
 //   lbx-analytics     pageviews, our tiles' clicks and add-to-carts, the
@@ -82,17 +86,21 @@ export const chunkOf = (id) => {
   // Hydration of server-rendered listings: only those pages load it.
   // lit-html's private SSR support is the hydrator's alone (not every widget page's lbx-core).
   if (/\/node_modules\/(@lit-labs\/ssr-client\/|lit-html\/private-ssr-support\.js)/.test(id)) return 'lbx-hydrate';
-  // Helpers one widget alone uses go with it, not into lbx-core (every widget's).
-  if (/\/src\/core\/color\.ts$/.test(id)) return 'lbx-autocomplete';
-  if (/\/src\/core\/a11y-keys\.ts$/.test(id)) return 'lbx-listing';
   // Placing our elements (core/reconciler.ts) and the recommenders' triggers:
   // pages with a listing or a recommender, in parallel with their other chunks.
   if (/\/src\/core\/(reconciler|recommenders)\.ts$/.test(id)) return 'lbx-place';
-  // The search page's own (its start, a new query in place): not in lbx-listing,
-  // which a category page loads too (2.1 kB gzip it never ran).
-  if (/\/src\/widgets\/search\/(index|in-place)\.ts$/.test(id)) return 'lbx-search';
-  // Search while typing (main.ts loads it once the shopper types): not in lbx-nav, which a listing page loads at once.
-  if (/\/src\/widgets\/search\/speculate\.ts$/.test(id)) return 'lbx-speculate';
+  // The listing's high-contrast toggle: only a site that turns it on loads it (widgets/listing/element.ts).
+  if (/\/src\/core\/contrast-toggle\.ts$/.test(id)) return 'lbx-contrast';
+  // An Apply's cue in a staged drawer: asked for when such a drawer opens (widgets/listing/element.ts).
+  if (/\/src\/widgets\/listing\/applied\.ts$/.test(id)) return 'lbx-applied';
+  // The search page's own: not in lbx-listing, which a category page loads too
+  // (2.1 kB gzip it never ran).
+  if (/\/src\/widgets\/search\/index\.ts$/.test(id)) return 'lbx-search';
+  // A new query in place, and taking a submit of the site's search form (submit.ts, direct.ts's too: a
+  // category page never takes one): asked for as lbx-search runs, not waited for (widgets/search/index.ts).
+  if (/\/src\/widgets\/search\/(in-place|submit)\.ts$/.test(id)) return 'lbx-search-in-place';
+  // Search while typing, and Enter straight to the query's page (main.ts loads both once the shopper types): not in lbx-nav, which a listing page loads at once.
+  if (/\/src\/widgets\/search\/(speculate|direct)\.ts$/.test(id)) return 'lbx-speculate';
   // Analytics (src/analytics): every page once loaded (main.ts), widgets import it for their tiles' clicks.
   if (/\/src\/analytics\//.test(id)) return 'lbx-analytics';
   // Minting the browser token: a session's first page loads it at boot (main.ts), lbx-core imports it.
@@ -108,7 +116,31 @@ export const chunkOf = (id) => {
 // The entry's own modules are named into the entry chunk (rollupOptions.input's
 // key) rather than left out: Rollup would pull a module a manual chunk depends
 // on into that chunk, entry or not.
-const manualChunks = (id, { getModuleInfo, getModuleIds }) => (entryGraph(getModuleInfo, getModuleIds).has(id) ? 'integration' : chunkOf(id));
+//
+// A module bound for lbx-core (every widget's) that one other chunk alone
+// reaches (directly, or through other lbx-core modules) goes with that chunk:
+// a listing's helper is not on an autocomplete page (core/fold.ts, a11y-keys,
+// color, the contrast toggle).
+const soleUser = (id, getModuleInfo, entry, seen = new Set([id])) => {
+  const users = new Set();
+  for (const by of [...(getModuleInfo(id)?.importers ?? []), ...(getModuleInfo(id)?.dynamicImporters ?? [])]) {
+    if (seen.has(by)) continue;
+    seen.add(by);
+    const c = entry.has(by) ? 'integration' : chunkOf(by);
+    if (c === 'lbx-core') for (const u of soleUser(by, getModuleInfo, entry, seen)) users.add(u);
+    else users.add(c);
+  }
+  return users;
+};
+const manualChunks = (id, { getModuleInfo, getModuleIds }) => {
+  const entry = entryGraph(getModuleInfo, getModuleIds);
+  if (entry.has(id)) return 'integration';
+  const c = chunkOf(id);
+  if (c !== 'lbx-core') return c;
+  const users = soleUser(id, getModuleInfo, entry);
+  const [only] = users;
+  return users.size === 1 && only && only !== 'integration' ? only : c;
+};
 
 /**
  * Template scope members Luma no longer has, and what replaces each. A
@@ -356,7 +388,7 @@ export const dedentTemplates = (ts, code, file) => {
   for (const [a, b, s] of edits.sort((x, y) => y[0] - x[0])) out = out.slice(0, a) + s + out.slice(b);
   return out;
 };
-const templateText = (root) => {
+export const templateText = (root) => {
   let ts;
   // Module ids are real paths: an integration/ reached through a symlink too.
   const dir = resolve(root, 'integration');
@@ -377,6 +409,50 @@ const templateText = (root) => {
   };
 };
 
+/**
+ * lit-html's directives (`@/lit`) as free of side effects: each module only
+ * defines its directive, and one no template uses is left out. Without this
+ * one assigning its class's static fields (unsafeHTML: `directiveName`,
+ * `resultType`) stays in lbx-core though no template uses it (0.6 kB, found
+ * 2026-10-17); lit-html's package.json declares no `sideEffects`.
+ */
+const pureDirectives = () => ({
+  name: 'lbx-pure-directives',
+  apply: 'build',
+  transform(code, id) {
+    if (!/\/node_modules\/lit-html\/directives\/[\w-]+\.js$/.test(id.split('?')[0])) return null;
+    return { code, map: null, moduleSideEffects: false };
+  },
+});
+
+/**
+ * Chunks nothing loads, left out: a widget the integration has no folder for
+ * (src/core/features.ts) leaves its modules tree-shaken to nothing, and the
+ * chunk they are named into (manualChunks) would still be emitted, empty
+ * but for imports. A chunk is loaded when another one imports it, statically
+ * or dynamically, or names its file (a preload list); the entry always.
+ */
+const unreachable = () => ({
+  name: 'lbx-unreachable-chunks',
+  apply: 'build',
+  enforce: 'post',
+  generateBundle(_, bundle) {
+    for (let pruned = true; pruned; ) {
+      pruned = false;
+      const chunks = Object.values(bundle).filter((c) => c.type === 'chunk');
+      for (const c of chunks) {
+        if (c.isEntry) continue;
+        const base = c.fileName.split('/').pop();
+        const used = chunks.some((o) => o !== c && (o.imports.includes(c.fileName) || o.dynamicImports.includes(c.fileName) || o.code.includes(base)));
+        if (!used) {
+          delete bundle[c.fileName];
+          pruned = true;
+        }
+      }
+    }
+  },
+});
+
 /**
  * A second minifier after Vite's esbuild pass: terser (two compress passes,
  * mangled top-level names in each module) finds what esbuild leaves (~3 %
@@ -419,6 +495,14 @@ const terse = () => ({
  * handles CSS dependencies, a <meta> nonce, a `preload` fallback and a
  * vite:preloadError event, none of which a Luma build uses: ~1 kB gzip of the
  * entry. A failed preload is the import's failure (it fetches the same file).
+ *
+ * `deps` starts with the imported chunk itself, even when it is the only one
+ * (resolveDependencies below; Vite's is [] then), so that it is marked: no
+ * later import's link preloads a chunk already imported or in flight. WebKit
+ * fetches such a link's chunk again and never uses the response (lbx-token
+ * and lbx-place, imported by the entry, then a listing's dependencies: twice
+ * per document, 2026-10-15). Its own link stays: Firefox holds the page's
+ * load event for a chunk an import() fetches, not for one a link does.
  */
 export const PRELOAD_HELPER = `const seen = {};
 export const __vitePreload = (load, deps, base) => {
@@ -444,10 +528,159 @@ const preloadHelper = () => ({
   },
 });
 
+/**
+ * The widgets the integration has (src/core/features.ts): a widget is its
+ * folder of integration/, analytics an _analytics.ts in any. Defined for a
+ * build from the folders (the entry leaves out a missing widget's triggers);
+ * the dev server sees folders come and go: everything there.
+ */
+/** Options on by default whose reads fold where no file of the integration names them (src/core/features.ts NAMED_*). */
+export const ON_BY_DEFAULT = ['preconnectImages', 'prefetchFilters', 'preload', 'fade', 'restoreOnBack', 'prefetchNextPage', 'inPlaceQuery', 'prefetchWhileTyping', 'earlyHold', 'speculation'];
+
+export const featureDefines = (integrationDir) => {
+  const folders = existsSync(integrationDir) ? readdirSync(integrationDir, { withFileTypes: true }).filter((e) => e.isDirectory()).map((e) => e.name) : null;
+  // A recommender folder is `recommender <name>` (src/core/integration.ts slot: checked there in development only).
+  for (const f of folders ?? []) if (f.trim() === 'recommender') throw new Error(`integration/${f}: a recommender folder needs a name, e.g. "recommender home"`);
+  const has = (f) => String(!folders || f(folders));
+  // The integration repository's code and markup (integration/ and anything
+  // it imports from beside it; not node_modules, builds or hidden folders),
+  // read once: a feature only its own files can ask for (a template's
+  // attribute, a hook _init.ts sets).
+  let text;
+  const read = (dir) =>
+    readdirSync(dir, { withFileTypes: true }).flatMap((e) =>
+      e.name.startsWith('.') || e.name === 'node_modules' || e.name === 'dist' ? [] : e.isDirectory() ? read(resolve(dir, e.name)) : /\.(ts|tsx|js|jsx|mts|mjs|cts|cjs|html)$/.test(e.name) ? [readFileSync(resolve(dir, e.name), 'utf8')] : [],
+    );
+  const inFiles = (...needles) => ((text ??= read(dirname(integrationDir)).join('\n')), needles.some((n) => text.includes(n)));
+  return {
+    __LBX_AUTOCOMPLETE__: has((d) => d.includes('autocomplete')),
+    __LBX_SEARCH__: has((d) => d.includes('search')),
+    __LBX_PLP__: has((d) => d.includes('plp')),
+    __LBX_RECOMMENDER__: has((d) => d.some((f) => f.split(/\s+/)[0] === 'recommender')),
+    __LBX_ANALYTICS__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, '_analytics.ts')))),
+    __LBX_WIDGET_INITS__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, '_widget.ts')))),
+    __LBX_HOST_STYLES__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, 'style-host.css')))),
+    __LBX_TRANSLATIONS__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, '_translations.ts')))),
+    __LBX_INITS__: has((d) => d.some((f) => existsSync(resolve(integrationDir, f, '_init.ts')))),
+    // Only an integration's templates make a cart button, a filter drawer or a menu (Luma's own have none).
+    __LBX_CART__: has(() => inFiles('data-lbx-cart')),
+    __LBX_DRAWER__: has(() => inFiles('data-lbx-drawer')),
+    __LBX_MENU__: has(() => inFiles('data-lbx-menu')),
+    __LBX_DROPDOWN__: has(() => inFiles('data-lbx-dropdown')),
+    // Hooks only the integration's code sets (_init.ts, _widget.ts: functions, never in _config.ts).
+    __LBX_AC_HOOKS__: has(() => inFiles('onOpen', 'onClose', 'onSelect', 'onReady')),
+    __LBX_ON_RENDER__: has(() => inFiles('onRender')),
+    __LBX_READ_QUERY__: has(() => inFiles('readQuery')),
+    __LBX_FACETS_FOR__: has(() => inFiles('facetsFor')),
+    __LBX_QUERY_URL__: has(() => inFiles('queryUrl')),
+    // Options off by default: a key no file names keeps its default.
+    __LBX_EMPTY_VALUES__: has(() => inFiles('emptyValues')),
+    __LBX_PRERENDER_TYPING__: has(() => inFiles('prerenderWhileTyping', 'pageWhileTyping')),
+    __LBX_CONTENT_VISIBILITY__: has(() => inFiles('contentVisibility')),
+    // Options on by default: one no file names is on.
+    ...Object.fromEntries(ON_BY_DEFAULT.map((k) => [`__LBX_NAMED_${k.replace(/[A-Z]/g, (c) => `_${c}`).toUpperCase()}__`, has(() => inFiles(k))])),
+  };
+};
+/** Luma's dictionaries' namespaces (src/locales/*.json) a build without the widget leaves out: plp reads search's too. */
+export const LOCALE_NAMESPACES = { autocomplete: ['AUTOCOMPLETE'], search: ['SEARCH', 'PLP'], plp: ['PLP'], recommender: ['RECOMMENDER'] };
+export const pruneDictionary = (json, defines) => {
+  const dict = JSON.parse(json);
+  for (const [ns, flags] of Object.entries(LOCALE_NAMESPACES)) if (flags.every((f) => defines[`__LBX_${f}__`] === 'false')) delete dict[ns];
+  return JSON.stringify(dict);
+};
+const features = (root) => {
+  let defines = null;
+  return {
+    name: 'lbx-features',
+    enforce: 'pre',
+    config(_, { command }) {
+      if (command !== 'build') return undefined;
+      defines = featureDefines(resolve(root, 'integration'));
+      return { define: defines };
+    },
+    // Before Vite's JSON plugin: the dictionary as JSON.
+    transform(code, id) {
+      if (!defines || !id.startsWith(FRAMEWORK) || !/\/locales\/[\w-]+\.json$/.test(id.split('?')[0])) return null;
+      return { code: pruneDictionary(code, defines), map: null };
+    },
+  };
+};
+
+/**
+ * The locales the site uses (`locales` of clientConfig: a list), so the
+ * entry's map of Luma's dictionaries (src/core/locales.ts, a glob) has those
+ * and English only: ~20 B gzip on every page per locale left out. A locale not
+ * listed reads English (loadDictionary's fallback). Not declared: every one.
+ */
+export const LOCALES = readdirSync(resolve(FRAMEWORK, 'locales')).filter((f) => f.endsWith('.json')).map((f) => f.slice(0, -5));
+export const localeGlob = (locales) => {
+  if (locales === undefined) return null;
+  if (!Array.isArray(locales) || !locales.length) throw new Error(`clientConfig: locales is a list of locales (${LOCALES.join(', ')}), not ${JSON.stringify(locales)}`);
+  for (const l of locales) if (!LOCALES.includes(l)) throw new Error(`clientConfig: Luma has no dictionary for locale ${JSON.stringify(l)}: one of ${LOCALES.join(', ')}`);
+  return [...new Set(['en', ...locales])].sort().map((l) => `../locales/${l}.json`);
+};
+const onlyLocales = (locales) => {
+  const glob = localeGlob(locales);
+  return {
+    name: 'lbx-only-locales',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!glob || id.split('?')[0] !== resolve(FRAMEWORK, 'core/locales.ts')) return null;
+      const from = "import.meta.glob<Dictionary>('../locales/*.json',";
+      if (!code.includes(from)) return this.error('src/core/locales.ts: its dictionaries glob changed; update onlyLocales');
+      return { code: code.replace(from, `import.meta.glob<Dictionary>(${JSON.stringify(glob)},`), map: null };
+    },
+  };
+};
+
+/**
+ * Luma's support for the site's framework, in parts (src/core/frameworks.ts):
+ *   react          React roots and islands (hydration, Suspense)
+ *   documentReact  React hydrating the whole document (the entry's checks)
+ *   next           Next.js pages router (its router, its hydration measure)
+ *   vue            Vue 2 / 3 and Nuxt (mount, router)
+ *   angular        Angular hydration
+ *   sveltekit      SvelteKit (its root, its history entries)
+ *   astro          Astro (islands, ClientRouter history entries)
+ *   turbo          Turbo Drive / Turbolinks (snapshots, history, prefetch)
+ * A build has all of them unless the integration declares its framework(s)
+ * (`framework` of clientConfig: a name or a list): then only theirs, the rest
+ * left out of every chunk. Measured on the test fixture 2026-10-17: see
+ * test/browser/specs/budgets.spec.ts.
+ */
+export const SUPPORTS = ['react', 'documentReact', 'next', 'vue', 'angular', 'sveltekit', 'astro', 'turbo'];
+export const FRAMEWORKS = {
+  next: ['react', 'documentReact', 'next'],
+  remix: ['react', 'documentReact'],
+  'react-router': ['react', 'documentReact'],
+  react: ['react'],
+  vue: ['vue'],
+  nuxt: ['vue'],
+  angular: ['angular'],
+  svelte: [],
+  sveltekit: ['sveltekit'],
+  astro: ['astro'],
+  turbo: ['turbo'],
+  none: [],
+};
+
+/** The defines of a declaration (undefined: everything). */
+export const frameworkDefines = (framework) => {
+  const names = framework === undefined ? null : [framework].flat();
+  for (const f of names ?? [])
+    if (typeof f !== 'string' || !Object.hasOwn(FRAMEWORKS, f))
+      throw new Error(`clientConfig: unknown framework ${JSON.stringify(f)}: one of ${Object.keys(FRAMEWORKS).join(', ')}, a list of them, or leave it out`);
+  if (names && !names.length) throw new Error('clientConfig: framework is an empty list: name the site\'s framework(s), none, or leave it out');
+  const has = new Set(names ? names.flatMap((f) => FRAMEWORKS[f]) : SUPPORTS);
+  return Object.fromEntries(SUPPORTS.map((k) => [`__LBX_${k.replace(/[A-Z]/g, (c) => `_${c}`).toUpperCase()}__`, String(has.has(k))]));
+};
+
 /**
  * `overrides` are merged into the config; `plugins` are appended and `server`
  * is merged, so a client repo can add e.g. HTTPS for the loader's development
- * mode without losing ours.
+ * mode without losing ours. `framework` (FRAMEWORKS), `serverRendering`
+ * (false: the site has no server-rendered listings, src/core/features.ts SSR)
+ * and `locales` (onlyLocales) are Luma's, not Vite's.
  */
 export const clientConfig = (configUrl, overrides = {}) => {
   const root = dirname(fileURLToPath(configUrl));
@@ -456,11 +689,12 @@ export const clientConfig = (configUrl, overrides = {}) => {
   // may read it. Unset: any origin (convenient, but any page open in the
   // developer's browser could read the source while the server runs).
   const devOrigins = process.env.LBX_DEV_ORIGINS?.split(',').map((o) => o.trim()).filter(Boolean);
-  const { plugins = [], server = {}, ...rest } = overrides;
+  const { plugins = [], server = {}, framework, serverRendering, locales, ...rest } = overrides;
+  if (serverRendering !== undefined && typeof serverRendering !== 'boolean') throw new Error(`clientConfig: serverRendering is true or false, not ${JSON.stringify(serverRendering)}`);
   return {
     root,
     resolve: { alias: { '@': FRAMEWORK } },
-    define: { __VERSION__: JSON.stringify(new Date().toISOString()) },
+    define: { __VERSION__: JSON.stringify(new Date().toISOString()), ...frameworkDefines(framework), __LBX_SSR__: String(serverRendering !== false) },
     // css.postcss: {} stops Vite from picking up a PostCSS config from parent dirs.
     css: { postcss: {} },
     // Class fields are fields (tsconfig.json's ES2022), wherever Luma is: Vite
@@ -471,7 +705,7 @@ export const clientConfig = (configUrl, overrides = {}) => {
     // pre-bundled as a dependency: installed under node_modules/, Vite would.
     optimizeDeps: { exclude: ['@'] },
     base: './',
-    plugins: [preloadHelper(), scopeCheck(), unusedBuiltIns(root), rawCss(), templateText(root), terse(), ...plugins],
+    plugins: [preloadHelper(), scopeCheck(), features(root), onlyLocales(locales), unusedBuiltIns(root), rawCss(), templateText(root), pureDirectives(), terse(), unreachable(), ...plugins],
     server: {
       port: 8069,
       strictPort: true,
@@ -488,7 +722,8 @@ export const clientConfig = (configUrl, overrides = {}) => {
       // Syntax only: APIs are not polyfilled, which `yarn luma baseline` checks.
       target: 'baseline-widely-available',
       // Preload a lazy chunk's own dependencies in parallel with it.
-      modulePreload: { polyfill: false },
+      // Each import's own chunk first, even alone (Vite's []): the helper marks it.
+      modulePreload: { polyfill: false, resolveDependencies: (file, deps) => [file, ...deps.filter((d) => d !== file)] },
       rollupOptions: {
         input: { integration: resolve(root, 'integration/__integration.ts') },
         output: {

package/docs/ACCESSIBILITY.md

@@ -105,7 +105,8 @@ guessed alt text, and forced colours and the OS setting are honoured.
   the fallback products another, named by their heading and the note that
   they are not results; the help box's phone link is a plain link. "Show all
   products" is a real link (`href`: the
-  search page the site's form would submit to) and the open dropdown's one
+  search page the site's form would submit to, or with `search.queryUrl` the
+  query's page, the one Enter loads) and the open dropdown's one
   tab stop: Tab from the input reaches it (the options' selection cleared:
   one thing lit), Shift+Tab goes back, Escape closes and goes back, Tab moves
   on to the page's next control after the input. It is also the arrow keys'
@@ -133,7 +134,11 @@ guessed alt text, and forced colours and the OS setting are honoured.
   `aria-activedescendant` the selected option: the same shadow root); the
   site's input is left as it was. The back button is named "Close search",
   the clear button "Clear"; the type tabs are a `tablist` (arrow keys move
-  between them); Tab is the browser's; targets are 44 px; Escape and the
+  between them), shown for two types or more (one type: no tabs, its
+  listbox named by the type, "Products"); a finger's vertical swipe
+  through the list puts the on-screen keyboard away: focus moves from the
+  input to the sheet (`tabindex="-1"`), Escape still closes it, a tap on the
+  input brings the keyboard back; Tab is the browser's; targets are 44 px; Escape and the
   browser's Back close it.
 - **Forced colours**: the selection in `Highlight`/`HighlightText` with an
   outline, the panel (and the sheet) keep a `CanvasText` border, pills,
@@ -165,7 +170,10 @@ guessed alt text, and forced colours and the OS setting are honoured.
   opened from the keyboard, focus goes to its selected item
   (`aria-selected`/`aria-current`/`aria-checked`), else the first; arrows move
   through its items; Escape closes it and focus returns to the button; picking
-  an item returns focus to the button; Tab out of it closes it.
+  an item returns focus to the button; Tab out of it closes it. The build
+  includes menus only where a file of the integration's repository (a script or `.html` file, not in `node_modules`, `dist` or a hidden folder) has `data-lbx-menu` (written literally, as in a template). A
+  `<details data-lbx-dropdown>` menu closes on a press outside it and on
+  picking an item; the same holds for it with `data-lbx-dropdown`.
 - **The drawer** (`[data-lbx-drawer="open|close"]`): `aria-expanded` on its
   openers. With a panel marked `[data-lbx-drawer-panel]`, while open, the panel
   is a modal dialog (`role="dialog"`, `aria-modal="true"`, named "Filters",
@@ -176,6 +184,21 @@ guessed alt text, and forced colours and the OS setting are honoured.
   focus staying on the control. With `facetsApply: 'staged'` its
   changes wait for `[data-lbx-drawer="apply"]`; closing it otherwise discards
   them (the scope's `pending` says whether there is anything to apply).
+  Apply's result is said in Luma's status region as "Filters applied" and
+  the count (translation `search.applied`, WCAG 4.1.3), and shown for 2.5 s
+  in a pill at the listing's top with the same words (hidden from assistive
+  technology: it repeats the status region; white on dark, at least 10:1
+  over any page behind it; opaque in the high-contrast mode and in forced
+  colours, with a border there; taps go through it; it wraps rather than
+  cuts its words at 320 px or 200% text, and follows a larger default font
+  size; it moves no content). While the applied results load, the
+  old list is dimmed as a busy one is: not at all in the high-contrast
+  mode, to 60% in forced colours. The new tiles fade in; they also rise
+  unless reduced motion is asked for. The pill may overlap the top of the
+  drawer's opener, where focus returns, for its 2.5 s; it never hides it.
+  The build includes the drawer only where a file of the integration's
+  repository (a script or `.html` file, not in `node_modules`, `dist` or a hidden folder) has `data-lbx-drawer` (written
+  literally, as in a template).
 - **Facet groups** (built-in template): each group's title is a `<button
   aria-expanded aria-controls>` controlling its values (WAI-ARIA APG
   accordion), focus staying on it. A group's search box
@@ -206,7 +229,8 @@ guessed alt text, and forced colours and the OS setting are honoured.
 - Built-in templates: the pager is a native "Show more" button with a
   "Showing N of M" line (no numbered pages); tile pictures are decorative
   (`alt=""`: the link reads as its title and price once); targets of at least
-  24 px; no fade under reduced motion; tiles reflow to one column at 320 px.
+  24 px; no fade under reduced motion (except a staged drawer's Apply: its
+  new tiles fade in, without rising); tiles reflow to one column at 320 px.
 
 ### Recommenders (`widgets/recommender/`)
 
@@ -225,7 +249,9 @@ guessed alt text, and forced colours and the OS setting are honoured.
   reset cannot remove it there).
 - **Reduced motion**: the hold's loading bar stands still, the listing's
   dim while a re-render loads comes without its fade and the new results
-  without their fade-in, no smooth scrolling of ours.
+  without their fade-in, no smooth scrolling of ours. One exception: after
+  a staged drawer's Apply the new tiles still fade in (opacity only, nothing
+  moves), so the swap the shopper confirmed is seen.
 - `.lbx-sr-only`: a class for text that only screen readers read (e.g. "Was"
   before an old price), defined for every widget and in server-rendered CSS.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigisbox/luma",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Luma: Luigi's Box frontend integrations (autocomplete, search, category listings, recommenders) on the Luigi's Box AI API. Pre-release.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -29,7 +29,8 @@
     "snippet/early-hold.min.js",
     "docs/ACCESSIBILITY.md",
     "docs/INTEGRATION-PERFORMANCE.md",
-    "docs/PARITY.md"
+    "docs/PARITY.md",
+    "CHANGELOG.md"
   ],
   "publishConfig": {
     "access": "public"

package/src/analytics/chain.ts

@@ -71,7 +71,7 @@ export const reader = <E extends EventName, C>(event: E, f: (ctx: C) => Reads[E]
 /** `.read(r)` on event `name`: `r`, or an error when it is a reader of another event. */
 export const checked = (name: string, r: { event?: string }) => {
   const e = name.startsWith('recommender:') ? 'recommender' : name;
-  if (r.event && r.event !== e) throw new Error(`analytics: collect.${e}.read(): a reader of ${r.event}`);
+  if (r.event && r.event !== e) throw Error(`analytics: collect.${e}.read(): a reader of ${r.event}`);
 };
 
 export interface Chain<E extends EventName, C> {

package/src/analytics/pageview.ts

@@ -42,7 +42,7 @@ export const pageView = {
       },
       read(r) {
         checked('pageView', r);
-        if (chained) throw new Error('analytics: one collect.pageView chain per setup');
+        if (chained) throw Error('analytics: one collect.pageView chain per setup');
         chained = true;
         const ref = (ctx: C) => {
           try {

package/src/analytics/start.ts

@@ -33,10 +33,9 @@ export const start = async (o: StartOptions) => {
   if (started) return;
   started = true;
   state.g = o.config._global;
-  env.owns = o.owns;
-  env.visit = o.visit;
-  env.onUrlChange = o.onUrlChange;
-  env.kept = o.kept;
+  // One call, not a read per field: a setup that uses none of them leaves
+  // Rollup no property reads to keep (it keeps a read: it may be a getter).
+  Object.assign(env, o);
   // The setup (`_global` first). Its chains register as it runs.
   for (const [p, f] of Object.entries(o.files).sort(([a], [b]) => (a.includes('/_global/') ? -1 : b.includes('/_global/') ? 1 : 0)))
     try {

package/src/analytics/wire.ts

@@ -51,7 +51,7 @@ export const readDl = (x: any): DlEntry | null => {
   return null;
 };
 
-const IGNORE = new RegExp(`${TRACKING}|^${P.replace('.', '\\.')}`);
+const IGNORE = RegExp(`${TRACKING}|^${P.replace('.', '\\.')}`);
 /**
  * The page a URL shows, for pageviews: without tracking params, the hash and
  * our own `lbx.*` (a filter, a sort on our listing is the same page). A

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