@luigisbox/luma 0.0.0-stage → 0.2.0

package/src/widgets/search/form-url.ts

@@ -0,0 +1,59 @@
+// The URL a GET form navigates to (formUrl): what in-place search
+// (./in-place.ts, the search page) and search while typing (./speculate.ts,
+// any page) both read. Its own module: neither chunk loads the other for it.
+
+export type Submitter = HTMLButtonElement | HTMLInputElement;
+
+/**
+ * The URL a GET form navigates to, as the browser builds it: the submitter's
+ * formaction / formmethod / formtarget over the form's, the action's query
+ * replaced by the form data. null for anything else (POST, dialog, another
+ * window, a file field, a non-http action). Attributes are read with
+ * getAttribute: a field named `action` or `method` shadows the form's properties.
+ */
+let withSubmitter: boolean | undefined;
+const submitterSupported = () => {
+  if (withSubmitter === undefined) {
+    try {
+      const f = document.createElement('form');
+      const b = f.appendChild(document.createElement('button'));
+      b.name = 'x';
+      b.value = '1';
+      withSubmitter = new FormData(f, b).get('x') === '1';
+    } catch {
+      withSubmitter = false;
+    }
+  }
+  return withSubmitter;
+};
+
+export const formUrl = (form: HTMLFormElement, submitter?: HTMLElement | null): URL | null => {
+  const sub = submitter && 'form' in submitter ? (submitter as Submitter) : null;
+  const attr = (name: string) => (sub?.hasAttribute(`form${name}`) ? sub.getAttribute(`form${name}`) : form.getAttribute(name));
+  if ((attr('method') || 'get').trim().toLowerCase() !== 'get') return null;
+  const target = (attr('target') ?? document.querySelector('base[target]')?.getAttribute('target') ?? '').trim().toLowerCase();
+  if (target && target !== '_self') return null;
+  const action = attr('action')?.trim();
+  const url = new URL(action ? action : location.href, action ? document.baseURI : undefined);
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
+  // FormData(form, submitter) is newer (Chrome 112, Safari 16.4, Firefox
+  // 111): before, the second argument is ignored (it does not throw), so the
+  // submitter's own entry is added by hand there.
+  const native = submitterSupported();
+  let own = !native; // the submitter's entry is ours to add
+  let data: FormData;
+  try {
+    data = new FormData(form, native && sub ? sub : undefined);
+  } catch {
+    data = new FormData(form); // not a submit button of this form
+    own = true;
+  }
+  if (own && sub?.name) data.append(sub.name, sub.value);
+  const params = new URLSearchParams();
+  for (const [k, v] of data) {
+    if (typeof v !== 'string') return null;
+    params.append(k, v);
+  }
+  url.search = params.toString();
+  return url;
+};

package/src/widgets/search/in-place.ts

@@ -0,0 +1,226 @@
+// In-place search: on the search page, a new query from the host's search form
+// (typed + Enter, its search button, and our autocomplete's Enter / "show all"
+// / a query suggestion, which submit that form) becomes a new history entry
+// and a re-render of our listing, not a page load. Anywhere else, and for
+// anything we cannot do exactly as the browser would, the form submits as usual.
+//
+// A window-capture `submit` listener, nothing bound to the host's form. The
+// form's target is resolved as the browser would (method GET, action, target,
+// its fields): only when the page we are on and that URL are both search
+// pages of ours, the navigation is ours. What the page load did for free is
+// done here: the listing starts the new query anew (its filters and sort
+// are our own URL params, which the form's URL does not carry), the input
+// loses focus (the autocomplete closes, a phone's keyboard goes), the page
+// scrolls to the top, the host's native modal or popover around the form
+// closes (a <dialog>, a [popover]; a scripted one is the host's to close), the
+// host's inputs show the query on back/forward. A query our listing cannot show
+// (it hands the page back) is loaded for real.
+//
+// Opt-out per integration: `inPlaceQuery: false` in search/_config.ts.
+// Loaded with the search widget (not in the entry): until it has loaded, a
+// search submits as usual.
+
+import { mark, reportError } from '../../core/health';
+import { searchReadQuery } from '../../core/routes';
+import { onUrlChange } from '../../core/sense';
+import type { Takeover } from '../../core/takeover';
+import { canon, writeUrl } from '../../core/url';
+import type { SearchConfigType } from '../../types';
+import type { Route } from '../listing/state';
+import { formUrl } from './form-url';
+
+export const startInPlace = (cfg: SearchConfigType, inputSelector: string | undefined, tk: Takeover, route: Route) => {
+  const read = searchReadQuery(cfg);
+  const bootQuery = read(new URL(location.href));
+  const POPOVER = 'showPopover' in HTMLElement.prototype;
+  /** Queries whose visit we created in this document (the page they would load is not this one). */
+  const ours = new Set<string>();
+  /** Our own history write is running (its URL change is not a back/forward). */
+  let pushing = false;
+  const isInput = (el: Element | null): el is HTMLInputElement => !!inputSelector && el instanceof HTMLInputElement && el.matches(inputSelector);
+  /** The focused element, inside shadow roots too. */
+  const focused = () => {
+    let a = document.activeElement;
+    while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement;
+    return a;
+  };
+  // A search input in a shadow root (a web-component header): its key events
+  // reach window retargeted to the shadow host, and its form's `submit` does
+  // not leave the shadow root at all (it is not composed). Such an input is
+  // read from the event's composed path, its root gets the same submit
+  // listener once one of its inputs is used, and it is remembered for the
+  // query on back/forward (document queries do not reach it).
+  const shadowInputs = new Set<HTMLInputElement>();
+  const roots = new WeakSet<ShadowRoot>();
+  const realTarget = (e: Event) => (e.composedPath?.()[0] ?? e.target) as Element | null;
+  const seen = (e: Event) => {
+    const i = realTarget(e);
+    const root = isInput(i) ? i.getRootNode() : null;
+    if (!(root instanceof ShadowRoot)) return;
+    shadowInputs.add(i as HTMLInputElement);
+    if (roots.has(root)) return;
+    roots.add(root);
+    root.addEventListener('submit', onSubmit as EventListener, true);
+  };
+  addEventListener('focusin', seen, true);
+  const ourElement = () => document.querySelector<HTMLElement>(`${route.tag}[data-lbx]`);
+  /**
+   * The host's open <dialog>s and popovers around `el`, across shadow roots,
+   * closed as a page load would have (a new document): innermost first.
+   */
+  const closeAround = (el: Element) => {
+    for (let n: Element | null = el; n; ) {
+      if (n instanceof HTMLDialogElement && n.open) n.close();
+      // Not without the Popover API (newer than Baseline Widely available):
+      // there a [popover] is a plain element, and `:popover-open` an invalid
+      // selector (matches() throws, and the dialogs further out stay open).
+      else if (n instanceof HTMLElement && POPOVER && n.hasAttribute('popover') && n.matches(':popover-open')) n.hidePopover();
+      const root = n.getRootNode();
+      n = n.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+    }
+  };
+  const top = () => scrollTo({ top: 0, left: 0, behavior: 'instant' } as unknown as ScrollToOptions);
+
+  // A form submitted with a modifier (a new tab or window, where the browser supports it) stays the browser's.
+  let mods = { on: false, t: -1 };
+  const track = (e: KeyboardEvent | MouseEvent) => void (mods = { on: e.ctrlKey || e.metaKey || e.shiftKey || e.altKey, t: e.timeStamp });
+  addEventListener('keydown', track, true);
+  addEventListener('click', track, true);
+
+  /**
+   * The visit settles: ours once it renders (then the page scrolls to the top,
+   * after host code that restores its own scroll position, a search overlay
+   * closing), or handed back, where the host's page in this document is about
+   * another query: loaded for real.
+   */
+  const settle = (url: URL, q: string, scroll: boolean) => {
+    const href = canon(url.href);
+    const started = performance.now();
+    const tick = () => {
+      if (canon(location.href) !== href) return;
+      const el = ourElement();
+      if (tk.state === 'ours' && el?.dataset.q === q && el.getAttribute('aria-busy') !== 'true') {
+        if (scroll && el.getBoundingClientRect().top < 0) top();
+        return;
+      }
+      if (tk.state === 'released' || tk.state === 'native') {
+        if (ours.has(q) && q !== bootQuery) {
+          mark(`search in place: handed back, loading ${q}`);
+          location.reload();
+        }
+        return;
+      }
+      if (performance.now() - started < 20000) setTimeout(tick, 100);
+    };
+    tick();
+  };
+
+  /**
+   * The search `form` would do, in place if it is ours to do: true when taken
+   * (the caller's event is cancelled here). `submitter`: the button, for a submit.
+   */
+  const take = (form: HTMLFormElement, submitter: HTMLElement | null | undefined, e: Event): boolean => {
+    let url: URL | null = null;
+    try {
+      if (inputSelector && ![...form.elements].some(isInput)) return false; // not the site's search form
+      if (mods.on && e.timeStamp - mods.t < 100) return false;
+      const here = new URL(location.href);
+      // Only while our listing shows this search page (not one handed back, or failing this session).
+      if (!route.accepts(here) || tk.failing || (tk.state !== 'ours' && tk.state !== 'hold') || !ourElement()) return false;
+      url = formUrl(form, submitter);
+      if (!url || url.origin !== location.origin || !route.accepts(url)) return false;
+    } catch (err) {
+      reportError('search in place', err);
+      return false;
+    }
+    e.preventDefault();
+    const to = url;
+    const q = read(to);
+    ours.add(q);
+    mark(`search in place: ${q}`);
+    // Respond first: the input lets go (the autocomplete closes, a phone's
+    // keyboard hides); the history write and the fetch run in a later task.
+    const a = focused();
+    if (isInput(a) || (a instanceof HTMLElement && form.contains(a))) a.blur();
+    try {
+      closeAround(form);
+    } catch (err) {
+      reportError('search in place', err);
+    }
+    setTimeout(() => {
+      try {
+        pushing = true;
+        writeUrl(to);
+        top();
+      } catch (err) {
+        reportError('search in place', err);
+        location.assign(to.href);
+      } finally {
+        pushing = false;
+      }
+    }, 0);
+    return true;
+  };
+
+  // A submit we take goes no further: a host handler that ignores
+  // defaultPrevented would navigate as well (htmx's boosted form: its own
+  // fetch, swap and second history entry for the same query). The Enter path
+  // below never lets a submit happen at all.
+  const onSubmit = (e: SubmitEvent) => {
+    const form = e.target;
+    if (e.defaultPrevented || !(form instanceof HTMLFormElement)) return;
+    if (take(form, e.submitter, e)) e.stopPropagation();
+  };
+  addEventListener('submit', onSubmit, true);
+
+  // Enter in the site's search input, ahead of the site's own handlers: some
+  // navigate with form.submit() or location on Enter, which fires no submit
+  // event (a storefront's own autocomplete script: form.submit() on every
+  // Enter). An Enter on a suggestion selected in our
+  // autocomplete is the autocomplete's (it opens that one); a plain Enter,
+  // and the autocomplete's own hand-off of a query (a synthetic Enter on the
+  // input), are taken here.
+  // In its shadow root by default (light DOM with dom: 'light'); only while it is open.
+  const acSelection = () => {
+    const o = document.querySelector('[data-lbx="ac-overlay"]');
+    return !!o?.matches(':popover-open') && !!(o.shadowRoot ?? o).querySelector('[aria-selected="true"]');
+  };
+  addEventListener(
+    'keydown',
+    (e) => {
+      if (e.key !== 'Enter' || e.isComposing || e.defaultPrevented || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+      const input = realTarget(e);
+      if (!isInput(input) || !input.form) return;
+      seen(e);
+      if (e.isTrusted && acSelection()) return;
+      if (take(input.form, null, e)) e.stopImmediatePropagation();
+    },
+    true,
+  );
+
+  // Another query in this document (ours, or back/forward between them): the
+  // host's inputs show it, as their server renders them on a page load. As a
+  // typed value (the native setter, then an input event): a framework that
+  // controls the input (React's onChange, v-model, ngModel) takes it into its
+  // state; a value set behind React's back is put back by its next render
+  // (React Router never heard of our entries, so its state stays the old query).
+  const show = (i: HTMLInputElement, q: string) => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!.call(i, q);
+    i.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  };
+  let prev = new URL(location.href);
+  onUrlChange((url) => {
+    const was = prev;
+    prev = url;
+    if (!route.accepts(url) || !route.accepts(was)) return;
+    const q = read(url);
+    if (q === read(was)) return;
+    for (const i of shadowInputs) if (!i.isConnected) shadowInputs.delete(i);
+    const inputs = inputSelector ? [...document.querySelectorAll(inputSelector), ...shadowInputs] : [];
+    for (const i of inputs) if (isInput(i) && i !== focused() && i.value !== q) show(i, q);
+    // Back/forward with the browser's scroll restoration off (the host restores
+    // its own entries, not ours): a page load would have landed at the top.
+    if (!pushing && history.scrollRestoration === 'manual') top();
+    settle(url, q, pushing);
+  });
+};

package/src/widgets/search/index.ts

@@ -0,0 +1,16 @@
+// Search results (route: ./route.ts; a new query in place: ./in-place.ts).
+
+import type { Takeover } from '../../core/takeover';
+import type { WidgetContext } from '../../main';
+import type { SearchConfigType } from '../../types';
+import { startListing } from '../listing/element';
+import { startInPlace } from './in-place';
+import { searchRoute } from './route';
+
+export { templates, css } from './assets';
+
+export const start = (ctx: WidgetContext<SearchConfigType>, tk: Takeover) => {
+  const route = searchRoute(ctx.config);
+  if (ctx.config.inPlaceQuery !== false) startInPlace(ctx.config, ctx.global.inputSelector, tk, route);
+  return startListing(ctx, tk, route);
+};

package/src/widgets/search/range.ts

@@ -0,0 +1,260 @@
+// A range facet's dual-thumb slider kept in step with its two number inputs
+// (the built-in template-search-range-default.ts; an integration's own markup
+// may use the same handlers). Two native `<input type="range">` laid over one
+// track: each thumb is a slider to assistive technology (role, value, name,
+// the platform's own adjust gestures), and the pointer reaches whichever thumb
+// is under it (the inputs ignore the pointer, their thumbs do not: the CSS).
+//
+// Moving changes nothing but the controls (the other thumb, the input beside
+// it, the fill): the range is committed once, when the shopper lets go (the
+// pointer released, a pause after the keys, an input's change or Enter),
+// through the scope's `set` (one request, or held by a staged drawer).
+//
+// No DOM access at import or render time (the server renderer imports the
+// templates): only in the handlers.
+import type { SearchScope } from '../../types';
+
+type Range = SearchScope['ranges'][number];
+
+/** A pause after the last key before a thumb moved from the keyboard commits (one request for a run of presses). */
+export const KEY_COMMIT_MS = 600;
+
+interface Parts {
+  root: HTMLElement;
+  slider: HTMLElement | null;
+  lo: HTMLInputElement | null;
+  hi: HTMLInputElement | null;
+  min: HTMLInputElement | null;
+  max: HTMLInputElement | null;
+}
+interface State {
+  /** The committed values this root was last drawn with, and what was sent since. */
+  drawn: string;
+  sent: string;
+  timer: number;
+  /** A pointer is pressing a thumb or the track: committed when it lets go. */
+  pressed: boolean;
+}
+const states = new WeakMap<Element, State>();
+
+const partsOf = (el: Element): Parts | null => {
+  const root = el.closest<HTMLElement>('[data-lbx-range]');
+  if (!root) return null;
+  const q = (s: string) => root.querySelector<HTMLInputElement>(s);
+  return {
+    root,
+    slider: root.querySelector<HTMLElement>('[data-lbx-part="range-slider"]'),
+    lo: q('input[data-lbx-thumb="min"]'),
+    hi: q('input[data-lbx-thumb="max"]'),
+    min: q('input[data-lbx-part="range-min"]'),
+    max: q('input[data-lbx-part="range-max"]'),
+  };
+};
+const stateOf = (p: Parts, r: Range): State => {
+  const drawn = `${r.from}|${r.to}`;
+  let st = states.get(p.root);
+  // Drawn anew with other values (committed, or another state): what was sent is behind us.
+  if (!st || st.drawn !== drawn) {
+    if (st) clearTimeout(st.timer);
+    st = { drawn, sent: drawn, timer: 0, pressed: st?.pressed ?? false };
+    states.set(p.root, st);
+  }
+  return st;
+};
+
+/** The value on the range's scale: snapped to its step from `min`, within [lo, hi]. */
+export const snap = (v: number, r: Pick<Range, 'min' | 'max' | 'step'>, lo = r.min, hi = r.max) => {
+  const s = r.step > 0 ? r.step : 1;
+  const n = Math.round((v - r.min) / s) * s + r.min;
+  // Float steps (0.1): no 0.30000000000000004.
+  const d = (String(s).split('.')[1] ?? '').length;
+  return Math.min(hi, Math.max(lo, Number(n.toFixed(d))));
+};
+/** Where a value sits on the track, 0-100. */
+export const percent = (v: number, r: Pick<Range, 'min' | 'max'>) => (r.max > r.min ? ((Math.min(r.max, Math.max(r.min, v)) - r.min) / (r.max - r.min)) * 100 : 0);
+/** A thumb's value as read: in the facet's unit when it has one. */
+export const valueText = (v: number, r: Pick<Range, 'unit'>) => (r.unit ? `${v} ${r.unit}` : String(v));
+/** The value a key moves a thumb to (WAI-ARIA APG slider): arrows a step, Page Up / Down a tenth (whole steps), Home / End the end it may reach. */
+export const keyed = (key: string, v: number, r: Pick<Range, 'min' | 'max' | 'step'>, lo: number, hi: number, rtl = false): number | null => {
+  const big = Math.max(r.step, Math.round((r.max - r.min) / 10 / r.step) * r.step);
+  const k = rtl && (key === 'ArrowLeft' || key === 'ArrowRight') ? (key === 'ArrowLeft' ? 'ArrowRight' : 'ArrowLeft') : key;
+  const to = k === 'ArrowRight' || k === 'ArrowUp' ? v + r.step : k === 'ArrowLeft' || k === 'ArrowDown' ? v - r.step : k === 'PageUp' ? v + big : k === 'PageDown' ? v - big : k === 'Home' ? lo : k === 'End' ? hi : null;
+  return to == null ? null : snap(to, r, lo, hi);
+};
+
+/** The thumb's width (--lbx-range-thumb-size, px), 24 by default. */
+const thumbSize = (slider: HTMLElement) => parseFloat(getComputedStyle(slider).getPropertyValue('--lbx-range-thumb-size')) || 24;
+
+/** The controls to the values (from, to): the thumbs, their text, the fill, the inputs unless one is being typed into. */
+const show = (p: Parts, r: Range, from: number, to: number, typing?: HTMLInputElement) => {
+  if (p.lo) (p.lo.value = String(from)), p.lo.setAttribute('aria-valuetext', valueText(from, r));
+  if (p.hi) (p.hi.value = String(to)), p.hi.setAttribute('aria-valuetext', valueText(to, r));
+  if (p.min && p.min !== typing) p.min.value = String(from);
+  if (p.max && p.max !== typing) p.max.value = String(to);
+  if (p.slider) {
+    p.slider.style.setProperty('--lbx-from', `${percent(from, r)}%`);
+    p.slider.style.setProperty('--lbx-to', `${percent(to, r)}%`);
+  }
+  // Two thumbs on one spot: the one that can move away from the end it is near goes on top.
+  p.lo?.toggleAttribute('data-top', percent(from, r) > 50);
+};
+const values = (p: Parts, r: Range) => {
+  const from = p.lo ? p.lo.valueAsNumber : r.from;
+  const to = p.hi ? p.hi.valueAsNumber : r.to;
+  return { from: Number.isFinite(from) ? from : r.from, to: Number.isFinite(to) ? to : r.to };
+};
+
+/** Commit what the controls show, once: nothing when it is what is drawn or was already sent. */
+const commit = (p: Parts, r: Range) => {
+  const st = stateOf(p, r);
+  clearTimeout(st.timer);
+  st.timer = 0;
+  const { from, to } = values(p, r);
+  const key = `${from}|${to}`;
+  if (key === st.sent) return;
+  st.sent = key;
+  r.set(from, to);
+};
+const later = (p: Parts, r: Range, ms: number) => {
+  const st = stateOf(p, r);
+  clearTimeout(st.timer);
+  st.timer = window.setTimeout(() => commit(p, r), ms);
+};
+
+/**
+ * The handlers of one range's controls, for a template: bind them on the
+ * root (`data-lbx-range`), the slider (`data-lbx-part="range-slider"`), the
+ * thumbs (`input[type=range][data-lbx-thumb="min|max"]`) and the inputs
+ * (`data-lbx-part="range-min|range-max"`).
+ */
+export const rangeHandlers = (r: Range) => {
+  const at = (e: Event) => partsOf(e.currentTarget as Element);
+  /** A thumb moved (a drag, the platform's adjust gesture): the other controls follow; the thumbs never cross. */
+  const thumbInput = (e: Event) => {
+    const p = at(e);
+    if (!p) return;
+    stateOf(p, r);
+    let { from, to } = values(p, r);
+    if (from > to) (e.currentTarget === p.lo ? (from = to) : (to = from));
+    show(p, r, from, to);
+  };
+  return {
+    thumbInput,
+    /** A thumb let go by the pointer, or moved by an assistive technology's gesture: commit (a pointer still down commits on its release). */
+    thumbChange: (e: Event) => {
+      const p = at(e);
+      if (!p) return;
+      if (stateOf(p, r).pressed) return;
+      commit(p, r);
+    },
+    /** Keys as the APG slider has them, the same on every engine; the commit waits for a pause, or Enter. */
+    thumbKey: (e: KeyboardEvent) => {
+      const p = at(e);
+      if (!p || e.altKey || e.ctrlKey || e.metaKey) return;
+      if (e.key === 'Enter') return commit(p, r);
+      const el = e.currentTarget as HTMLInputElement;
+      const { from, to } = values(p, r);
+      const isLo = el === p.lo;
+      const next = keyed(e.key, isLo ? from : to, r, isLo ? r.min : from, isLo ? to : r.max, getComputedStyle(el).direction === 'rtl');
+      if (next == null) return;
+      e.preventDefault();
+      show(p, r, isLo ? next : from, isLo ? to : next);
+      later(p, r, KEY_COMMIT_MS);
+    },
+    /** Focus leaving a control: a pending commit goes now. */
+    blur: (e: Event) => {
+      const p = at(e);
+      if (p && stateOf(p, r).timer) commit(p, r);
+    },
+    /**
+     * A press on the slider: on a thumb, the native drag (committed when the
+     * pointer lets go); on the track, the nearer thumb jumps there and follows
+     * the pointer until it lets go.
+     */
+    press: (e: PointerEvent) => {
+      const p = at(e);
+      if (!p || !p.slider || !p.lo || !p.hi || e.button > 0) return;
+      const st = stateOf(p, r);
+      st.pressed = true;
+      const target = e.target as Element;
+      const track = target !== p.lo && target !== p.hi;
+      const box = p.slider.getBoundingClientRect();
+      const inset = thumbSize(p.slider) / 2; // the thumb's centre runs from half a thumb in
+      const valueAt = (x: number) => {
+        const w = box.width - 2 * inset;
+        let f = w > 0 ? (x - box.left - inset) / w : 0;
+        if (getComputedStyle(p.slider!).direction === 'rtl') f = 1 - f;
+        return snap(r.min + Math.min(1, Math.max(0, f)) * (r.max - r.min), r);
+      };
+      let thumb: HTMLInputElement | null = null;
+      if (track) {
+        e.preventDefault();
+        const v = valueAt(e.clientX);
+        const { from, to } = values(p, r);
+        thumb = Math.abs(v - from) < Math.abs(v - to) || (v < from && from === to) ? p.lo : p.hi;
+        thumb.focus({ preventScroll: true });
+        const move = (x: number) => {
+          const { from: f, to: t } = values(p, r);
+          const n = valueAt(x);
+          show(p, r, thumb === p.lo ? Math.min(n, t) : f, thumb === p.lo ? t : Math.max(n, f));
+        };
+        move(e.clientX);
+        try {
+          p.slider.setPointerCapture(e.pointerId);
+        } catch {}
+        const onMove = (m: PointerEvent) => m.pointerId === e.pointerId && move(m.clientX);
+        p.slider.addEventListener('pointermove', onMove);
+        const done = () => p.slider!.removeEventListener('pointermove', onMove);
+        p.slider.addEventListener('lostpointercapture', done, { once: true });
+      }
+      const up = (u: PointerEvent) => {
+        if (u.pointerId !== e.pointerId) return;
+        window.removeEventListener('pointerup', up, true);
+        window.removeEventListener('pointercancel', up, true);
+        st.pressed = false;
+        // The native drag's own `change` may come after this: commit() sends a value once.
+        setTimeout(() => commit(p, r), 0);
+      };
+      window.addEventListener('pointerup', up, true);
+      window.addEventListener('pointercancel', up, true);
+    },
+    /** Typed into an input: the thumbs follow (within the range); nothing is committed yet. */
+    numberInput: (e: Event) => {
+      const p = at(e);
+      if (!p) return;
+      stateOf(p, r);
+      const el = e.currentTarget as HTMLInputElement;
+      const v = el.valueAsNumber;
+      if (!Number.isFinite(v)) return;
+      const cur = values(p, r);
+      const isMin = el === p.min;
+      const from = isMin ? snap(v, r, r.min, cur.to) : cur.from;
+      const to = isMin ? cur.to : snap(v, r, cur.from, r.max);
+      show(p, r, from, to, el);
+    },
+    /** An input's change (Enter, focus leaving it, its spin buttons): committed, the inputs showing what was. Spin buttons wait for a pause too. */
+    numberChange: (e: Event) => {
+      const p = at(e);
+      if (!p) return;
+      const el = e.currentTarget as HTMLInputElement;
+      const cur = values(p, r);
+      const v = el.valueAsNumber;
+      // Emptied: that end open again.
+      const isMin = el === p.min;
+      const from = isMin ? (Number.isFinite(v) ? snap(v, r, r.min, cur.to) : r.min) : cur.from;
+      const to = isMin ? cur.to : Number.isFinite(v) ? snap(v, r, cur.from, r.max) : r.max;
+      show(p, r, from, to);
+      if (el.ownerDocument.activeElement === el) later(p, r, KEY_COMMIT_MS);
+      else commit(p, r);
+    },
+    numberKey: (e: KeyboardEvent) => {
+      if (e.key !== 'Enter') return;
+      e.preventDefault(); // nothing to submit: a host form around the listing must not
+      const p = at(e);
+      if (!p) return;
+      // Enter commits what is typed (some engines fire no change for it).
+      (e.currentTarget as HTMLInputElement).dispatchEvent(new Event('change', { bubbles: true }));
+      commit(p, r);
+    },
+  };
+};

package/src/widgets/search/route.ts

@@ -0,0 +1,32 @@
+// Search results: the host's search URL (?q=…, /browse/<q>, …) gives the
+// query; our own state (facets, flags, sort) lives in namespaced lbx.*
+// params that never collide with the host's. No DOM: the edge render
+// service resolves URLs with it too.
+
+import { P, searchAccepts, searchReadQuery } from '../../core/routes';
+import type { SearchConfigType } from '../../types';
+import { clearOwn, readOwn, type Query, type Route } from '../listing/state';
+
+export const searchRoute = (c: SearchConfigType): Route => {
+  const read = searchReadQuery(c);
+  const flagDefs = c.flags ?? [];
+  return {
+    id: 'search',
+    tag: 'lbx-search',
+    endpoint: 'search',
+    flagDefs,
+    accepts: searchAccepts(c),
+    resolve: (url): Query => {
+      const q = read(url);
+      const flags = url.searchParams.getAll(P + 'flag').filter((id) => flagDefs.some((f) => f.id === id));
+      return { q, title: q, ...readOwn(url), flags };
+    },
+    write: (url, next) => {
+      clearOwn(url);
+      for (const [f, vs] of Object.entries(next.filters)) for (const v of vs) url.searchParams.append(P + f, v);
+      for (const id of next.flags) url.searchParams.append(P + 'flag', id);
+      if (next.sort) url.searchParams.set(P + 'sort', next.sort);
+      return url;
+    },
+  };
+};