@luigisbox/luma 0.3.0 → 0.5.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,19 @@ 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';
+  // 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 +114,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 +386,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 +407,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 +493,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 +526,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 +687,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 +703,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 +720,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'
@@ -165,7 +166,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 +180,9 @@ 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).
+  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luigisbox/luma",
-  "version": "0.3.0",
+  "version": "0.5.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

@@ -26,6 +26,14 @@ export interface AddToCart {
   reference: string;
   count?: number;
   price?: number;
+  /** Added in a list (a tile's cart button): the platform credits it to that list. */
+  attributedToList?: boolean;
+}
+/** One click: what `collect.click` sends (a bare reference: not in a list). */
+export interface Click {
+  reference: string;
+  /** Picked in a list (a search, suggestions, a recommender, a listing): the platform credits it to that list. */
+  attributedToList?: boolean;
 }
 /** A purchase: what `collect.purchase` sends, once per `id`. */
 export interface Purchase {
@@ -42,7 +50,7 @@ export interface List {
 /** What `.read()` returns, per event (null or undefined: nothing sent). */
 export interface Reads {
   pageView: string | null | undefined;
-  click: string | { reference: string };
+  click: string | Click;
   addToCart: AddToCart | AddToCart[];
   purchase: Purchase;
   search: List;
@@ -63,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/collect.ts

@@ -3,9 +3,13 @@
 // - pageView: `pv` per page (./pageview.ts);
 // - search, autocomplete, recommender(name): a `list` event of the site's own
 //   service (`{ query?, items, filters? }`; ours the API records itself);
-// - click: an `interaction` click (a reference, or `{ reference }`);
-// - addToCart: `interaction` add_to_cart per item (`{ reference, count?, price? }` or a list);
+// - click: an `interaction` click (a reference, or `{ reference, attributedToList? }`);
+// - addToCart: `interaction` add_to_cart per item (`{ reference, count?, price?, attributedToList? }` or a list);
 // - purchase: a `transaction` (`{ id?, currency?, items }`), once per id.
+// `attributedToList`: the product was picked in a list (a search, suggestions,
+// a recommender, a listing): sent as `attributed_to_list: true`, the only
+// interactions the platform credits to the last list in the session that
+// held the product. Without it the interaction counts for the product alone.
 
 import { emit } from './outbox';
 import { state } from './setup';
@@ -26,24 +30,27 @@ export const autocomplete = /* @__PURE__ */ surface<'autocomplete'>('autocomplet
 /** The site's own recommender `name` (silent where ours of that name runs): a `list` event. */
 export const recommender = (name: string) => surface<'recommender'>(`recommender:${name}`, list('Recommendation'));
 
-/** A product click: the reference (or `{ reference }`). */
+/** `attributed_to_list: true` where the product was picked in a list (only then: absent is false). */
+const inList = (x: { attributedToList?: boolean } | undefined) => (x?.attributedToList === true ? { attributed_to_list: true } : {});
+
+/** A product click: the reference (or `{ reference, attributedToList? }`). */
 export const click = /* @__PURE__ */ surface<'click'>('click', (p) => {
-  const reference = typeof p === 'string' ? p : p?.reference;
-  if (isRef(reference)) emit({ type: 'interaction', interaction_type: 'click', listing_ab_test: false, reference });
+  const o = typeof p === 'string' ? { reference: p } : p;
+  if (isRef(o?.reference)) emit({ type: 'interaction', interaction_type: 'click', listing_ab_test: false, reference: o.reference, ...inList(o) });
 });
 
 const currency = () => state.g?.currency;
 /** When the last add-to-cart on our tiles was: the site's own push its cart then makes is the same one. */
 let ourCart = 0;
 const OUR_CART_MS = 10_000;
-/** Add-to-cart: `{ reference, count?, price? }` or a list of them. */
+/** Add-to-cart: `{ reference, count?, price?, attributedToList? }` or a list of them. */
 export const addToCart = /* @__PURE__ */ surface<'addToCart'>('addToCart', (p) => {
   const all: (AddToCart & { [OURS]?: true })[] = Array.isArray(p) ? p : [p];
   if (all.some((x) => x?.[OURS])) ourCart = Date.now();
   else if (Date.now() - ourCart < OUR_CART_MS) return void (ourCart = 0);
   for (const x of all) {
     if (!isRef(x?.reference)) continue;
-    emit({ type: 'interaction', interaction_type: 'add_to_cart', listing_ab_test: false, reference: x.reference, ...(x.count ? { count: x.count } : {}), ...(x.price != null && x.price >= 0 ? { price: x.price } : {}), ...(currency() ? { currency: currency() } : {}) });
+    emit({ type: 'interaction', interaction_type: 'add_to_cart', listing_ab_test: false, reference: x.reference, ...(x.count ? { count: x.count } : {}), ...(x.price != null && x.price >= 0 ? { price: x.price } : {}), ...(currency() ? { currency: currency() } : {}), ...inList(x) });
   }
 });
 

package/src/analytics/from-ga4.ts

@@ -56,8 +56,11 @@ export const purchase = /* @__PURE__ */ reader('purchase', (ctx: Ctx) => {
   });
   return items.length ? { id: e.transaction_id, currency: e.currency, items } : null;
 });
-/** select_item: the product clicked. */
-export const click = /* @__PURE__ */ reader('click', first);
+/** select_item (GA4: an item picked from a list): the product clicked, in its list. */
+export const click = /* @__PURE__ */ reader('click', (ctx: Ctx) => {
+  const reference = first(ctx);
+  return reference ? { reference, attributedToList: true } : null;
+});
 /** view_item: the page's product. */
 export const pageView = /* @__PURE__ */ reader('pageView', first);
 /** view_item_list of their search: its items, the query from search_term. */

package/src/analytics/from-luma.ts

@@ -6,7 +6,9 @@
 //   collect.addToCart.on(lumaCarts()).read(fromLuma.addToCart);
 //
 // Our tiles' references are their results' `@id`s (every result has one),
-// whatever ref.product.by() says for the site's own data.
+// whatever ref.product.by() says for the site's own data. Every tile of ours
+// is in a list (a search, suggestions, a recommender, a listing): its clicks
+// and add-to-carts are attributed to it.
 
 import type { TileEvent } from '../core/tiles';
 import { reader } from './chain';
@@ -15,7 +17,7 @@ import type { Page } from './page';
 
 /** A page: no reference of its own. */
 export const pageView = /* @__PURE__ */ reader('pageView', (_: Page) => null);
-/** A click on one of our tiles: the product clicked. */
-export const click = /* @__PURE__ */ reader('click', (t: TileEvent) => t.reference);
+/** A click on one of our tiles: the product clicked, in its list. */
+export const click = /* @__PURE__ */ reader('click', (t: TileEvent) => ({ reference: t.reference, attributedToList: true }));
 /** `[data-lbx-cart]` on one of our tiles: the product, its quantity and price (the site's own push its cart then makes is the same one). */
-export const addToCart = /* @__PURE__ */ reader('addToCart', (t: TileEvent) => ({ reference: t.reference, count: t.count ?? 1, ...(t.price != null ? { price: t.price } : {}), [OURS]: true as const }));
+export const addToCart = /* @__PURE__ */ reader('addToCart', (t: TileEvent) => ({ reference: t.reference, count: t.count ?? 1, ...(t.price != null ? { price: t.price } : {}), attributedToList: true, [OURS]: true as const }));

package/src/analytics/index.ts

@@ -19,6 +19,6 @@ export { user } from './user';
 export { ref } from './ref';
 export { dl, domClick, lumaCarts, lumaClicks, lumaPages, manual, mutationOf, urlChange, xhrMatching } from './triggers';
 export type { DlContext, DomClickContext, ManualContext, MutationContext, UrlChangeContext, XhrContext } from './triggers';
-export type { AddToCart, List, Purchase, Read, Trigger } from './chain';
+export type { AddToCart, Click, List, Purchase, Read, Trigger } from './chain';
 export type { Page } from './page';
 export type { TileEvent } from '../core/tiles';

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