@luigisbox/luma 0.0.0-stage → 0.2.0

package/src/widgets/search/speculate.ts

@@ -0,0 +1,202 @@
+// Search results ready on Enter. While the shopper types in the site's search
+// input (any page), once the phrase settles, the search page's result for the
+// URL their form would submit to is fetched, exactly as the listing would
+// fetch it (listingQuery, page 1, the default sort, the facets and quick
+// types: the listing's first request, nothing more):
+// - in memory (core/prefetch.ts): Enter on the search page (a new query in
+//   place, ./in-place.ts) renders it without a request in the task of the
+//   history write, or waits for the one in flight (never much longer than a
+//   fresh request would take: ../listing/element.ts fromPrefetch);
+// - in sessionStorage (../listing/stash.ts, `spec`): Enter on another page
+//   loads the search page, whose listing renders it at boot, like a
+//   server-rendered state;
+// - optionally (`prerenderWhileTyping`) the search page itself is prerendered
+//   once that result is stashed and the phrase is still the one typed: Enter
+//   then activates a page that is already rendered (it renders from the
+//   stash: no request of its own).
+//
+// Only what is likely: the settled phrase (not every keystroke), 2+
+// characters, not the page we are on, none offline, with Save-Data or on 2G.
+// One request in flight (a newer phrase aborts it); the latest two results
+// kept, for `prefetchMaxAgeMs` (2 min); identical ones reused meanwhile.
+// Enter, a query suggestion handed to the form or a page change cancel a
+// pending phrase: the page load or the listing asks itself, nothing is
+// fetched for a page that is going away. Loaded by the entry on the first
+// input into `_global.inputSelector`; `search.prefetchWhileTyping: false` turns it off.
+//
+// Analytics: nothing here renders or reports a search. A result is shown (and
+// the integration's onRender runs) only when the shopper asks for it; in a
+// prerendered page, onRender waits for its activation (../listing/element.ts).
+// The API cannot tell these requests from the listing's own.
+
+import { getApi } from '../../api';
+import { firstRowImages, resultFactory, warmImages } from '../../core/support';
+import { mark, reportError } from '../../core/health';
+import { pageKey } from '../../core/page';
+import { dropPrefetch, hasPrefetch, putPrefetch } from '../../core/prefetch';
+import { onUrlChange } from '../../core/sense';
+import type { GlobalConfigType, SearchConfigType } from '../../types';
+import { listingQuery, type ListingResult } from '../listing/query';
+import type { Query, Route } from '../listing/state';
+import { writeStash } from '../listing/stash';
+import { formUrl } from './form-url';
+import { searchRoute } from './route';
+
+const MIN_CHARS = 2;
+/** Speculative results kept at once (the phrase before the latest one: a shopper backspacing). */
+const KEEP = 2;
+
+const thrifty = () => {
+  const c = (navigator as any).connection;
+  return navigator.onLine === false || !!c?.saveData || /(^|-)2g$/.test(c?.effectiveType ?? '');
+};
+
+export const startSpeculation = (g: GlobalConfigType, cfg: SearchConfigType, first?: HTMLInputElement) => {
+  const api = getApi(g);
+  const route = searchRoute(cfg);
+  const sel = g.inputSelector!;
+  const delay = cfg.prefetchDelayMs ?? 300;
+  const ttl = cfg.prefetchMaxAgeMs ?? 2 * 60e3;
+  let timer = 0;
+  let flight: { key: string; ctrl: AbortController; p: Promise<unknown>; href: string } | null = null;
+  /** Page -> when its result arrived (reused for ttl). */
+  const done = new Map<string, number>();
+  // The first images of a result fetched ahead (`_global.images.warm`, off by default): its tiles show at once on Enter.
+  // core/support is lbx-core's, which lbx-nav imports anyway (the API client's requests).
+  const warm = g.images?.warm ?? 0;
+  const warmFor = (res: ListingResult) => {
+    try {
+      warmImages(firstRowImages(g.images, res.hits.slice(0, warm).map(resultFactory({ ...g.computedAttributes, ...cfg.computedAttributes })), true), warm);
+    } catch {}
+  };
+  /** Ours in the prefetch map, oldest first. */
+  const kept: { href: string; p: Promise<unknown> }[] = [];
+
+  /** The search input an event is about: the input itself, or another control of its form (a filter the form submits). */
+  const inputOf = (e: Event) => {
+    const t = e.composedPath?.()[0] ?? e.target;
+    if (t instanceof HTMLInputElement && t.matches(sel)) return t;
+    const form = (t as HTMLInputElement | null)?.form;
+    return form instanceof HTMLFormElement ? ([...form.elements].find((el) => el instanceof HTMLInputElement && el.matches(sel)) as HTMLInputElement | undefined) ?? null : null;
+  };
+
+  const prerender = startPrerender(cfg, route);
+
+  const run = (i: HTMLInputElement) => {
+    clearTimeout(timer);
+    if (thrifty() || !i.form || !i.isConnected) return;
+    const url = formUrl(i.form, null);
+    if (!url || url.origin !== location.origin || !route.accepts(url)) return;
+    const key = pageKey(url.href);
+    if (key === pageKey(location.href)) return; // the page we are on
+    const q = route.resolve(url) as Query | null;
+    if (!q?.q || q.q.length < MIN_CHARS) return;
+    prerender?.keep(key);
+    if (flight?.key === key || hasPrefetch(url.href) || performance.now() - (done.get(key) ?? -Infinity) < ttl) return;
+    if (flight) {
+      flight.ctrl.abort(); // a newer phrase: the older result is not what Enter will ask for
+      dropPrefetch(flight.href, flight.p);
+    }
+    const ctrl = new AbortController();
+    mark(`search prefetch: ${q.q}`);
+    const p: Promise<ListingResult | null> = listingQuery(api, g, cfg, route, q, ctrl.signal).then(
+      (res) => {
+        if (flight?.ctrl === ctrl) flight = null;
+        done.set(key, performance.now());
+        // For a page load of it: the whole result, unless something optional failed.
+        if (!res.partial && writeStash(url.href, { kind: 'spec', route: route.id, query: q, result: res, ttl })) {
+          // Still the phrase in the form: that page, rendered ahead (it renders from the stash).
+          const now = i.isConnected && i.form ? formUrl(i.form, null) : null;
+          if (now && pageKey(now.href) === key) prerender?.start(url.href, key);
+        }
+        if (warm > 0) warmFor(res);
+        return res;
+      },
+      (e) => {
+        if (flight?.ctrl === ctrl) flight = null;
+        if ((e as Error)?.name !== 'AbortError') reportError('search prefetch', e);
+        return null; // the listing asks itself
+      },
+    );
+    flight = { key, ctrl, p, href: url.href };
+    putPrefetch(url.href, p, { ttl, spec: true, abort: () => ctrl.abort() });
+    // Memory: the latest few phrases only (each a page of hits, facets and quick types).
+    kept.push({ href: url.href, p });
+    for (const old of kept.splice(0, Math.max(0, kept.length - KEEP))) dropPrefetch(old.href, old.p);
+  };
+
+  const onInput = (e: Event) => {
+    const i = inputOf(e);
+    if (!i) return;
+    clearTimeout(timer);
+    timer = window.setTimeout(() => {
+      try {
+        run(i);
+      } catch (err) {
+        reportError('search prefetch', err);
+      }
+    }, delay);
+  };
+  // Enter (or the autocomplete's hand-off, a synthetic Enter) before the
+  // phrase settled: not fetched from here. A page load asks itself (a request
+  // started now would die with this page); in place, the listing asks itself.
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.isComposing && inputOf(e)) clearTimeout(timer);
+  };
+  addEventListener('input', onInput, true);
+  addEventListener('change', onInput, true);
+  addEventListener('keydown', onKey, true);
+  // Another page (a query in place, an SPA visit): a pending phrase is moot,
+  // and a flight for another page than this one is no longer needed.
+  onUrlChange((u) => {
+    clearTimeout(timer);
+    if (flight && flight.key !== pageKey(u.href)) {
+      flight.ctrl.abort();
+      dropPrefetch(flight.href, flight.p);
+      flight = null;
+    }
+  });
+  if (first) onInput({ target: first, composedPath: () => [first] } as unknown as Event);
+};
+
+/**
+ * The search page prerendered while the shopper types (`prerenderWhileTyping`,
+ * Speculation Rules: Chrome, Edge): one list rule for one URL, the phrase whose
+ * result was just stashed. A newer phrase replaces it (removing a rule cancels
+ * its prerender): one prerendered search page at most. Not on the search page
+ * itself when queries there are in place (no page load to save).
+ *
+ * The cost: a host document rendered on their server per settled phrase the
+ * shopper may never submit, and their scripts run in it (Chromium runs a
+ * prerendered page's scripts; only APIs with visible effects wait for the
+ * activation: tags that defer to `prerenderingchange`, as Google's do, count
+ * nothing until then, others count a page view). Ours renders from the stash
+ * (no request) and defers onRender to the activation. Off by default.
+ */
+const startPrerender = (cfg: SearchConfigType, route: Route) => {
+  if (!cfg.prerenderWhileTyping || !(HTMLScriptElement as any).supports?.('speculationrules')) return null;
+  let el: HTMLScriptElement | null = null;
+  let at = '';
+  const stop = () => {
+    el?.remove();
+    el = null;
+    at = '';
+  };
+  return {
+    /** The phrase now settled: a prerender of another page goes. */
+    keep: (key: string) => void (at && at !== key && stop()),
+    start: (href: string, key: string) => {
+      if (at === key) return;
+      // A search page in place has no page load to save.
+      if (cfg.inPlaceQuery !== false && route.accepts(new URL(location.href))) return;
+      stop();
+      el = document.createElement('script');
+      el.type = 'speculationrules';
+      el.setAttribute('data-lbx', 'search-prerender');
+      el.textContent = JSON.stringify({ prerender: [{ source: 'list', urls: [href], eagerness: cfg.prerenderEagerness ?? 'immediate' }] });
+      document.head.append(el);
+      at = key;
+      mark(`search prerender: ${href}`);
+    },
+  };
+};

package/src/widgets/search/style-search.css

@@ -0,0 +1,65 @@
+lbx-search, lbx-plp { display: block; }
+/* Text for screen readers only, for templates ("Was" before an old price): here too for server-rendered pages. */
+.lbx-sr-only:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
+/* The region takes focus only from script (a render removed the focused control): no ring on the whole listing. */
+lbx-search:focus, lbx-plp:focus { outline: none; }
+.lbx-s__head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 16px 0; }
+.lbx-s__body { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 24px; align-items: start; }
+.lbx-s__facets fieldset { border: 0; padding: 0; margin: 0 0 16px; }
+.lbx-s__facets legend { font-weight: 600; margin-bottom: 6px; }
+/* Targets of at least 24 px (WCAG 2.5.8). */
+.lbx-s__facets label { display: flex; gap: 8px; align-items: center; min-height: 24px; margin: 4px 0; cursor: pointer; }
+.lbx-s__facets summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; min-height: 24px; }
+.lbx-s__sort select, .lbx-s__more { min-height: 24px; min-width: 24px; }
+.lbx-s__main { min-width: 0; }
+.lbx-s__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 16px; }
+.lbx-s__tile { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: var(--lbx-c-underline, none); }
+/* Images (src/core/images.ts): the box keeps its size before the image arrives; its placeholder (the catalog's --lbx-ph, else a neutral skeleton) until it has loaded; lazy images fade in, never the first row, not under reduced motion. */
+.lbx-img { display: block; }
+.lbx-img > img { display: block; width: 100%; height: 100%; object-fit: contain; }
+[data-lbx-ph]:not([data-lbx-loaded]) { background: var(--lbx-ph, var(--lbx-c-ph, #efefef)); }
+@media (prefers-reduced-motion: no-preference) {
+  [data-lbx-fade] img[data-lbx-img][loading="lazy"]:not([data-lbx-loaded]) { opacity: 0; }
+  [data-lbx-fade] img[data-lbx-loaded="fade"] { animation: lbx-img-in .25s ease-out; }
+}
+@keyframes lbx-img-in { from { opacity: 0; } }
+.lbx-s__tile-price { font-weight: 600; }
+.lbx-s__pager { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 24px 0; }
+.lbx-s__shown { margin: 0; }
+.lbx-s__msg { padding: 32px 0; text-align: center; }
+@media (max-width: 767px) { .lbx-s__body { grid-template-columns: 1fr; } }
+/* Facet groups as an accordion (facetGroups.open): the title is the button. */
+.lbx-s__group-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: start; cursor: pointer; }
+.lbx-s__group-toggle::after { content: ""; flex: none; width: .45em; height: .45em; margin-inline-end: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
+.lbx-s__group-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
+.lbx-s__group-n { font-weight: 400; }
+/* The active filters ("Selected filters: Colour: Red ×"). */
+.lbx-s__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
+.lbx-s__chips-title { flex-basis: 100%; font-weight: 600; }
+.lbx-s__chip, .lbx-s__clear { display: inline-flex; align-items: center; min-height: 24px; color: inherit; }
+.lbx-s__chip { padding: 2px 10px; border: 1px solid currentColor; border-radius: 12px; text-decoration: none; }
+/* A group's search box (facetGroups.search). */
+.lbx-s__fsearch { margin: 4px 0 8px; }
+.lbx-s__fsearch-input { box-sizing: border-box; width: 100%; min-height: 24px; font: inherit; }
+.lbx-s__fsearch-n { display: block; min-height: 1.2em; font-size: .875em; }
+/* A range facet's slider: its theming variables in template-search-range-default.ts. */
+.lbx-s__range-slider { --lbx-rs: var(--lbx-range-thumb-size, 24px); --lbx-rt: var(--lbx-range-thumb, #fff); --lbx-rb: var(--lbx-range-thumb-border, currentColor); --lbx-rr: var(--lbx-range-ring, currentColor); position: relative; height: max(24px, var(--lbx-rs)); margin: 4px 0 8px; }
+.lbx-s__range-track { position: absolute; top: 50%; left: calc(var(--lbx-rs) / 2); right: calc(var(--lbx-rs) / 2); height: var(--lbx-range-height, 4px); transform: translateY(-50%); border-radius: 4px; background: var(--lbx-range-track, #c4c4c4); }
+.lbx-s__range-fill { position: absolute; top: 0; bottom: 0; left: var(--lbx-from, 0%); right: calc(100% - var(--lbx-to, 100%)); border-radius: inherit; background: var(--lbx-range-fill, currentColor); }
+[dir="rtl"] .lbx-s__range-fill { left: calc(100% - var(--lbx-to, 100%)); right: var(--lbx-from, 0%); }
+.lbx-s__range-thumb { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; appearance: none; pointer-events: none; }
+.lbx-s__range-thumb[data-top] { z-index: 1; }
+.lbx-s__range-thumb:focus-visible { outline: none; }
+.lbx-s__range-thumb::-webkit-slider-runnable-track { height: 100%; border: 0; background: none; }
+.lbx-s__range-thumb::-moz-range-track { height: 100%; border: 0; background: none; }
+.lbx-s__range-thumb::-webkit-slider-thumb { box-sizing: border-box; width: var(--lbx-rs); height: var(--lbx-rs); margin-top: calc((max(24px, var(--lbx-rs)) - var(--lbx-rs)) / 2); border: 2px solid var(--lbx-rb); border-radius: 50%; background: var(--lbx-rt); cursor: grab; pointer-events: auto; appearance: none; }
+.lbx-s__range-thumb::-moz-range-thumb { box-sizing: border-box; width: var(--lbx-rs); height: var(--lbx-rs); border: 2px solid var(--lbx-rb); border-radius: 50%; background: var(--lbx-rt); cursor: grab; pointer-events: auto; }
+.lbx-s__range-thumb:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--lbx-rt), 0 0 0 4px var(--lbx-rr); }
+.lbx-s__range-thumb:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--lbx-rt), 0 0 0 4px var(--lbx-rr); }
+.lbx-s__range-inputs { display: flex; gap: 8px; align-items: center; }
+.lbx-s__range-num { box-sizing: border-box; flex: 1 1 0; min-width: 0; min-height: 24px; font: inherit; }
+@media (forced-colors: active) {
+  .lbx-s__range-slider { --lbx-rt: ButtonFace; --lbx-rb: ButtonText; --lbx-rr: Highlight; }
+  .lbx-s__range-track { background: GrayText; }
+  .lbx-s__range-fill { background: Highlight; }
+}

package/src/widgets/search/template-search-box.ts

@@ -0,0 +1,17 @@
+import { html, nothing } from '../../lit';
+import type { SearchScope } from '../../types';
+
+export default (s: SearchScope) => html`
+  <div class="lbx-s">
+    ${s.showTitle ? html`<h1 class="lbx-s__title">${s.title}</h1>` : nothing}
+    ${s.include('search-header')}
+    <div class="lbx-s__body">
+      ${s.include('search-facets-default')}
+      <div class="lbx-s__main">
+        ${s.include('search-results-default')}
+        ${s.message ? html`<div class="lbx-s__msg" data-lbx-part="empty">${s.message}</div>` : nothing}
+        ${s.include('search-pagination')}
+      </div>
+    </div>
+  </div>
+`;

package/src/widgets/search/template-search-facets-default.ts

@@ -0,0 +1,73 @@
+import { html, nothing, repeat } from '../../lit';
+import type { SearchScope } from '../../types';
+
+type Facet = SearchScope['facets'][number];
+
+// A group's values: its search box first (`facetGroups.search`: a labelled
+// input filtering the values as typed, how many match next to it), then the
+// values that match. data-lbx-href: the state a row's checkbox leads to
+// (intent prefetches it, _global.prefetchFilters).
+const values = (s: SearchScope, f: Facet) => html`
+  ${f.search
+    ? html`<div class="lbx-s__fsearch">
+        <input type="search" class="lbx-s__fsearch-input" .value=${f.search.text} aria-label=${s.t('facetSearch', { facet: f.label })} placeholder=${s.t('facetSearchPlaceholder')} aria-describedby=${`${f.id}-n`} autocomplete="off" enterkeyhint="search"
+          @input=${(e: Event) => f.search!.set((e.target as HTMLInputElement).value)}
+          @keydown=${(e: KeyboardEvent) => {
+            if (e.key === 'Enter') e.preventDefault(); // nothing to submit: the values are filtered as typed
+            if (e.key === 'Escape' && f.search!.text) (e.preventDefault(), e.stopPropagation(), f.search!.set('')); // clears it (not the drawer's Escape)
+          }} />
+        <span class="lbx-s__fsearch-n" id=${`${f.id}-n`}>${f.search.text.trim() ? s.t('facetMatches', { count: f.search.matches, facet: f.label }) : ''}</span>
+      </div>`
+    : nothing}
+  ${repeat(f.values.filter((v) => v.match), (v) => v.value, (v) => html`
+    <label data-lbx-part="facet-value" data-lbx-href=${v.href}>
+      <input type="checkbox" data-facet=${f.name} value=${v.value} .checked=${v.checked} @change=${() => s.toggleFacet(f.name, v.value)} />
+      <span>${v.label}</span>
+    </label>`)}
+`;
+
+// Collapsible groups (`facetGroups.open`): the title is a button with
+// aria-expanded controlling the group's values (WAI-ARIA APG accordion).
+const group = (s: SearchScope, g: { id: string; name: string; label: string; open: boolean; toggle: () => void; selected?: number }, body: () => unknown) => html`
+  <fieldset class="lbx-s__group" data-lbx-part="facet-group" data-facet=${g.name}>
+    <legend data-lbx-part="facet-title">
+      <button type="button" class="lbx-s__group-toggle" aria-expanded=${g.open ? 'true' : 'false'} aria-controls=${g.id} @click=${g.toggle}>
+        <span>${g.label}</span>${g.selected ? html` <span class="lbx-s__group-n">(${g.selected})</span>` : nothing}
+      </button>
+    </legend>
+    <div class="lbx-s__group-body" id=${g.id} ?hidden=${!g.open}>${g.open ? body() : nothing}</div>
+  </fieldset>
+`;
+
+// Text and range groups in the sidebar's order (`layout`); a range is a
+// dual-thumb slider over two inputs (template-search-range-default.ts).
+const groups = (s: SearchScope): (Facet | SearchScope['ranges'][number])[] => {
+  const by = new Map<string, Facet | SearchScope['ranges'][number]>([...s.facets, ...s.ranges].map((g) => [g.name, g]));
+  const out = s.layout.map((n) => by.get(n)).filter((g) => !!g);
+  return [...out, ...[...by.values()].filter((g) => !out.includes(g))];
+};
+
+export default (s: SearchScope) => html`
+  <details class="lbx-s__facets" data-lbx-part="facets" ?open=${s.facetsOpen}>
+    <summary>${s.t('filters')}</summary>
+    <div class="lbx-s__fs">
+      ${s.chips.length
+        ? html`<div class="lbx-s__chips" role="group" aria-labelledby="lbx-chips-title">
+            <span class="lbx-s__chips-title" id="lbx-chips-title">${s.t('chosen')}</span>
+            ${s.chips.map((c) => {
+              const text = c.value ? `${c.title}: ${c.value}` : c.title;
+              return html`<a class="lbx-s__chip" data-lbx-part="chip" href=${c.href} aria-label=${s.t('removeFilter', { label: text })} @click=${s.go(c)}>${c.value ? html`<span class="lbx-s__chip-title">${c.title}:</span> ${c.value}` : c.title}<span aria-hidden="true"> ×</span></a>`;
+            })}
+            ${s.clear ? html`<a class="lbx-s__clear" href=${s.clear.href} @click=${s.go(s.clear)}>${s.t('clearAll')}</a>` : nothing}
+          </div>`
+        : nothing}
+      ${s.flags.length
+        ? html`<fieldset>
+            ${repeat(s.flags, (f) => f.id, (f) => html`
+              <label data-lbx-href=${f.href}><input type="checkbox" data-flag=${f.id} .checked=${f.checked} @change=${() => s.toggleFlag(f.id)} /> <span>${f.label}</span></label>`)}
+          </fieldset>`
+        : nothing}
+      ${repeat(groups(s), (g) => g.name, (g) => ('values' in g ? group(s, g, () => values(s, g)) : group(s, { ...g, selected: g.active ? 1 : 0 }, () => s.include('search-range-default', { range: g }))))}
+    </div>
+  </details>
+`;

package/src/widgets/search/template-search-header.ts

@@ -0,0 +1,14 @@
+import { html } from '../../lit';
+import type { SearchScope } from '../../types';
+
+export default (s: SearchScope) => html`
+  <div class="lbx-s__head">
+    <p class="lbx-s__count" data-lbx-part="count">${s.t('results', { count: s.total, query: s.query })}</p>
+    <label class="lbx-s__sort" data-lbx-part="sort">
+      ${s.t('sort')}
+      <select @change=${(e: Event) => s.setSort((e.target as HTMLSelectElement).value)}>
+        ${s.sorts.map((o) => html`<option value=${o.value} .selected=${o.selected}>${o.label}</option>`)}
+      </select>
+    </label>
+  </div>
+`;

package/src/widgets/search/template-search-pagination.ts

@@ -0,0 +1,12 @@
+import { html, nothing } from '../../lit';
+import type { SearchScope } from '../../types';
+
+// "Show more": the next page appended to the results (no numbered pages: a
+// listing opens on its first page and grows). `data-lbx-more`: intent on it
+// prefetches that page. From the keyboard, focus moves on to the first new tile.
+export default (s: SearchScope) => html`
+  <div class="lbx-s__pager" data-lbx-part="pagination">
+    ${s.results.length && s.total ? html`<p class="lbx-s__shown">${s.t('shown', { shown: s.results.length, total: s.total, count: s.total })}</p>` : nothing}
+    ${s.more ? html`<button type="button" class="lbx-s__more" data-lbx-part="more" data-lbx-more @click=${s.showMore}>${s.t('more')}</button>` : nothing}
+  </div>
+`;

package/src/widgets/search/template-search-range-default.ts

@@ -0,0 +1,48 @@
+import { html, nothing, styleMap } from '../../lit';
+import type { SearchRangeScope } from '../../types';
+import { percent, rangeHandlers, valueText } from './range';
+
+// A range facet (a price "0 – 500"): a dual-thumb slider over the two
+// number inputs, kept in sync as either moves, committed once on release
+// (range.ts). `include('search-range-default', { range })` from a facets
+// template; an integration's file of this name replaces it.
+//
+// Parts: `range-slider` (the track and both thumbs), `range-min` /
+// `range-max` (the inputs). Theming (style-search.css; any site rule wins:
+// @layer lbx), CSS variables set anywhere around it: --lbx-range-track,
+// --lbx-range-fill (default currentColor), --lbx-range-thumb (its fill),
+// --lbx-range-thumb-border, --lbx-range-ring (the focused thumb's ring: both
+// inputs span the track, so an outline would not say which has focus),
+// --lbx-range-height (the track's), --lbx-range-thumb-size (px, default
+// 24 px: the target size; the control is never under 24 px tall).
+//
+// Values are bound as properties (`.value`: what a control shows once it was
+// moved; the server renderer writes them as the `value` attribute), plainly:
+// lit leaves a control alone until the state it drives agrees (src/lit.ts).
+export default (s: SearchRangeScope) => {
+  const r = s.range;
+  const h = rangeHandlers(r);
+  const name = (key: string) => s.t(key, { facet: r.label });
+  const top = percent(r.from, r) > 50;
+  return html`
+    <div class="lbx-s__range" data-lbx-range=${r.name}>
+      <div class="lbx-s__range-slider" data-lbx-part="range-slider" style=${styleMap({ '--lbx-from': `${percent(r.from, r)}%`, '--lbx-to': `${percent(r.to, r)}%` })} @pointerdown=${h.press}>
+        <span class="lbx-s__range-track" aria-hidden="true"><span class="lbx-s__range-fill"></span></span>
+        <input type="range" class="lbx-s__range-thumb" data-lbx-thumb="min" ?data-top=${top} min=${r.min} max=${r.max} step=${r.step} .value=${String(r.from)}
+          aria-label=${name('rangeMin')} aria-valuetext=${valueText(r.from, r)}
+          @input=${h.thumbInput} @change=${h.thumbChange} @keydown=${h.thumbKey} @blur=${h.blur} />
+        <input type="range" class="lbx-s__range-thumb" data-lbx-thumb="max" min=${r.min} max=${r.max} step=${r.step} .value=${String(r.to)}
+          aria-label=${name('rangeMax')} aria-valuetext=${valueText(r.to, r)}
+          @input=${h.thumbInput} @change=${h.thumbChange} @keydown=${h.thumbKey} @blur=${h.blur} />
+      </div>
+      <div class="lbx-s__range-inputs">
+        <input type="number" class="lbx-s__range-num" data-lbx-part="range-min" inputmode="decimal" min=${r.min} max=${r.max} step=${r.step} .value=${String(r.from)}
+          aria-label=${name('rangeFrom')} @input=${h.numberInput} @change=${h.numberChange} @keydown=${h.numberKey} @blur=${h.blur} />
+        <span class="lbx-s__range-sep">${s.t('rangeSeparator')}</span>
+        <input type="number" class="lbx-s__range-num" data-lbx-part="range-max" inputmode="decimal" min=${r.min} max=${r.max} step=${r.step} .value=${String(r.to)}
+          aria-label=${name('rangeTo')} @input=${h.numberInput} @change=${h.numberChange} @keydown=${h.numberKey} @blur=${h.blur} />
+        ${r.unit ? html`<span class="lbx-s__range-unit">${r.unit}</span>` : nothing}
+      </div>
+    </div>
+  `;
+};

package/src/widgets/search/template-search-result-default.ts

@@ -0,0 +1,13 @@
+import { html, nothing } from '../../lit';
+import type { SearchResultScope } from '../../types';
+
+// The image from `_global.images` (img(): srcset, the first row eager with
+// high priority, width/height, its placeholder box). Decorative next to the
+// title: alt="".
+export default ({ r, i, img, plain, price }: SearchResultScope) => html`
+  <a class="lbx-s__tile" data-lbx-part="tile" href=${r.c.url}>
+    ${r.c.image ? img(r, i) : nothing}
+    <span class="lbx-s__tile-title" data-lbx-part="title">${plain(r.c.title)}</span>
+    ${r.c.price ? html`<span class="lbx-s__tile-price" data-lbx-part="price">${price(r.c.price)}</span>` : nothing}
+  </a>
+`;

package/src/widgets/search/template-search-results-default.ts

@@ -0,0 +1,8 @@
+import { html, repeat } from '../../lit';
+import type { SearchScope } from '../../types';
+
+export default (s: SearchScope) => html`
+  <div class="lbx-s__list" data-lbx-list data-lbx-part="list">
+    ${repeat(s.results, (r) => r.c.id, (r, i) => s.include('search-result-default', { r, i }))}
+  </div>
+`;

package/tasks/model.mjs

@@ -0,0 +1,116 @@
+// `yarn luma tasks` (tasks/run.mjs): the main-thread tasks that run Luma's code, from
+// a CPU profile of the page's isolate and a trace of its tasks taken together.
+// The browser side needs Chromium; this part runs offline (and is unit-tested).
+//
+// A task is a trace event `ThreadControllerImpl::RunTask` (category
+// `toplevel`) on the page's main thread. A sample is ours when a frame of
+// ours is on its stack (`ours`), and our own when the innermost frame with a
+// script is ours (`own`): the site's code a call of ours runs (its
+// history.pushState hooks, an integration's hook calling into the page) is
+// ours but not our own. The budget applies to our own time in a task.
+
+/** A trace event that is a task of the main loop. */
+export const isTask = (e) => e.ph === 'X' && /(^|::)RunTask$/.test(e.name ?? '');
+
+/** The absolute time (µs, the trace's clock) of each sample, and its length (the gap to the next one). */
+export const sampleTimes = (profile) => {
+  const at = [];
+  let t = profile.startTime;
+  for (const d of profile.timeDeltas) at.push((t += d));
+  const len = at.map((t, i) => (at[i + 1] ?? t) - t);
+  return { at, len };
+};
+
+/** The task holding time `t` in `tasks` (sorted by ts), or null. */
+export const taskAt = (tasks, t) => {
+  let lo = 0;
+  let hi = tasks.length - 1;
+  while (lo <= hi) {
+    const m = (lo + hi) >> 1;
+    const e = tasks[m];
+    if (t < e.ts) hi = m - 1;
+    else if (t > e.ts + e.dur) lo = m + 1;
+    else return e;
+  }
+  return null;
+};
+
+/** The page's main thread: the one whose tasks hold most of the profile's samples. Its tasks, sorted. */
+export const mainThreadTasks = (traceEvents, at) => {
+  const byThread = new Map();
+  for (const e of traceEvents) if (isTask(e)) byThread.set(`${e.pid}:${e.tid}`, [...(byThread.get(`${e.pid}:${e.tid}`) ?? []), e]);
+  let best = [];
+  let most = -1;
+  for (const list of byThread.values()) {
+    list.sort((a, b) => a.ts - b.ts);
+    let hits = 0;
+    for (let i = 0; i < at.length; i += 5) if (taskAt(list, at[i])) hits++;
+    if (hits > most) (most = hits), (best = list);
+  }
+  return best;
+};
+
+/**
+ * Our time per task: `ours(callFrame)` says whether a frame is ours, `name(callFrame)`
+ * names it (source-mapped by the caller). Per task: its length, our time, our own
+ * time, and our own time per function (the innermost frame of ours; the browser's
+ * native calls it makes count as its own). Tasks without a sample of ours are left out.
+ */
+export const attribute = (profile, tasks, { ours, name = (f) => f.functionName || '(anonymous)' }) => {
+  const nodes = new Map(profile.nodes.map((n) => [n.id, n]));
+  for (const n of profile.nodes) for (const c of n.children ?? []) if (nodes.has(c)) nodes.get(c).parent ??= n.id;
+  const { at, len } = sampleTimes(profile);
+  const per = new Map();
+  profile.samples.forEach((id, i) => {
+    const task = taskAt(tasks, at[i]);
+    if (!task) return;
+    let any = false;
+    let own = null;
+    let mine = null;
+    const leaf = nodes.get(id)?.callFrame;
+    for (let n = nodes.get(id); n; n = nodes.get(n.parent)) {
+      const f = n.callFrame;
+      if (ours(f)) {
+        any = true;
+        mine ??= f;
+      }
+      if (own === null && f.url) own = ours(f);
+    }
+    if (!any) return;
+    const r = per.get(task) ?? { start: task.ts, ms: task.dur / 1000, ours: 0, own: 0, fns: new Map() };
+    r.ours += len[i] / 1000;
+    if (own) {
+      r.own += len[i] / 1000;
+      // The browser's own work it called (no script: pushState, querySelectorAll, a forced layout's getter) named with it.
+      const k = leaf && leaf !== mine && !leaf.url && leaf.functionName && !/^\(/.test(leaf.functionName) ? `${name(mine)} → ${leaf.functionName}` : name(mine);
+      r.fns.set(k, (r.fns.get(k) ?? 0) + len[i] / 1000);
+    }
+    per.set(task, r);
+  });
+  return [...per.values()].sort((a, b) => a.start - b.start);
+};
+
+/** A scenario's verdict from its runs (each the attributed tasks of one run): the worst task by own time, per run, and their median. */
+export const summarize = (runs, budget) => {
+  const worst = runs.map((tasks) => tasks.reduce((w, t) => (t.own > (w?.own ?? -1) ? t : w), null));
+  const owns = worst.map((t) => t?.own ?? 0).sort((a, b) => a - b);
+  const median = owns.length ? owns[Math.floor((owns.length - 1) / 2)] : 0;
+  return { median, worst: worst.filter(Boolean).sort((a, b) => b.own - a.own)[0] ?? null, over: median > budget, runs: owns };
+};
+
+const ms = (v) => `${v.toFixed(1)} ms`;
+/** The report: per scenario, the median of each run's worst task (our own time), and that task's breakdown. */
+export const formatReport = (results, { budget, cpu, meta = {} }) => {
+  const lines = [];
+  for (const [k, v] of Object.entries(meta)) lines.push(`${k}: ${v}`);
+  lines.push(`budget: ${budget} ms of our own code per task at ${cpu}x CPU`, '');
+  const w = Math.max(...results.map((r) => r.name.length), 8);
+  lines.push(`${'scenario'.padEnd(w)}  worst own (median)  runs                 verdict`);
+  for (const r of results) lines.push(`${r.name.padEnd(w)}  ${ms(r.median).padStart(18)}  ${r.runs.map((x) => x.toFixed(1)).join(' / ').padEnd(20)} ${r.over ? 'OVER' : 'ok'}`);
+  for (const r of results.filter((r) => r.worst)) {
+    const t = r.worst;
+    lines.push('', `${r.name}: its worst task ${ms(t.ms)}, ours ${ms(t.ours)}, our own ${ms(t.own)} (the rest of ours: the site's code under our calls)`);
+    for (const [f, v] of [...t.fns].sort((a, b) => b[1] - a[1]).slice(0, 6)) lines.push(`  ${ms(v).padStart(9)}  ${f}`);
+  }
+  return lines.join('\n');
+};