@luigisbox/luma 0.0.0-stage → 0.2.0

package/src/widgets/listing/stash.ts

@@ -0,0 +1,97 @@
+// Listing results for the next page load of their URL, in sessionStorage
+// (`lbx:r:<pageKey>`, core/stash.ts), so that load renders at once, as from a
+// server-rendered state:
+// - `spec`: the search page of a query the shopper was typing on another page
+//   (widgets/search/speculate.ts). Used by a plain navigation (or a prerender
+//   of the page) within its `ttl` (2 minutes), once.
+// - `back`: the listing as the shopper left it for a product page (pages
+//   1..N, where they were). Used by a back/forward load within 30 minutes; the
+//   listing then restores the scroll position and revalidates in the background.
+// Bounded: at most 3 entries (one `spec`), 400k characters each; a full store
+// drops ours first. Best-effort: storage may be unavailable, never required.
+
+import { navigation, STASH, stashFits, stashKey } from '../../core/stash';
+import { pageKey } from '../../core/page';
+import type { ListingResult } from './query';
+import type { Query } from './state';
+
+export interface Stash {
+  v: 1;
+  /** Date.now() when written. First in the JSON: pruning reads it without parsing the rest. */
+  at: number;
+  kind: 'spec' | 'back';
+  /** ms it is good for (default: its kind's MAX_AGE). */
+  ttl?: number;
+  /** The listing route it is for (search, plp). */
+  route: string;
+  query: Query;
+  result: ListingResult;
+  /** back: the link the shopper followed (its href, its top in the viewport) and scrollY where it is gone. */
+  scroll?: { y: number; href?: string; top?: number };
+}
+
+const MAX_CHARS = 400_000;
+const KEEP = 3;
+const MAX_AGE = { spec: 2 * 60e3, back: 30 * 60e3 };
+
+const atOf = (raw: string | null) => Number(/"at":(\d+)/.exec(raw?.slice(0, 40) ?? '')?.[1]) || 0;
+
+/** Ours, oldest first (without `except`). */
+const entries = (except?: string) => {
+  const out: { k: string; at: number; spec: boolean }[] = [];
+  for (let i = 0; i < sessionStorage.length; i++) {
+    const k = sessionStorage.key(i);
+    if (!k?.startsWith(STASH) || k === except) continue;
+    const raw = sessionStorage.getItem(k);
+    out.push({ k, at: atOf(raw), spec: !!raw?.slice(0, 60).includes('"kind":"spec"') });
+  }
+  return out.sort((a, b) => a.at - b.at);
+};
+
+/** The stashed result this page load may render from, or null. */
+export const readStash = (route: string, href: string): Stash | null => {
+  try {
+    const key = stashKey(href);
+    const raw = sessionStorage.getItem(key);
+    if (!raw) return null;
+    const s = JSON.parse(raw) as Stash;
+    const age = Date.now() - s.at;
+    const nav = navigation();
+    const fresh = s.v === 1 && age >= 0 && age < (s.ttl ?? MAX_AGE[s.kind] ?? 0);
+    if (!fresh || s.kind === 'spec') sessionStorage.removeItem(key); // a speculation is used once
+    if (!fresh || s.route !== route || pageKey(nav.url) !== pageKey(href)) return null;
+    return stashFits(s.kind) ? s : null;
+  } catch {
+    return null;
+  }
+};
+
+/** A page the browser restored itself (the back/forward cache): its stash is not needed. */
+export const dropStash = (href: string) => {
+  try {
+    sessionStorage.removeItem(stashKey(href));
+  } catch {}
+};
+
+/** false: too big, or storage refused it. */
+export const writeStash = (href: string, s: Omit<Stash, 'v' | 'at'>) => {
+  try {
+    const json = JSON.stringify({ at: Date.now(), v: 1, kind: s.kind, ttl: s.ttl, route: s.route, query: s.query, result: s.result, scroll: s.scroll });
+    if (json.length > MAX_CHARS) return false;
+    const key = stashKey(href);
+    const others = entries(key);
+    // One speculation at a time; the newest few overall.
+    const drop = [...others.filter((e) => s.kind === 'spec' && e.spec), ...others.filter((e) => !(s.kind === 'spec' && e.spec)).slice(0, -(KEEP - 1) || undefined)];
+    for (const e of drop) sessionStorage.removeItem(e.k);
+    try {
+      sessionStorage.setItem(key, json);
+    } catch {
+      // Full (the host's own entries): ours go first, then one more try.
+      for (const e of entries(key)) sessionStorage.removeItem(e.k);
+      sessionStorage.setItem(key, json);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+};

package/src/widgets/listing/state.ts

@@ -0,0 +1,131 @@
+// Listing state shared by search results and category pages.
+
+import type { FilterNode } from '../../api';
+import { P } from '../../core/routes';
+
+export interface Query {
+  /** Search: the query. */
+  q?: string;
+  /** Category page: the page's scope (collection_filters). */
+  scope?: FilterNode;
+  /** Facet selections (OR within a facet); a range is one `min|max` value. */
+  filters: Record<string, string[]>;
+  /** Active on/off flags, by flag id. */
+  flags: string[];
+  sort: string;
+  /** The query, or the category name. */
+  title: string;
+  /** Faceted fields of this page, in order (plp `facetsFor`); default: the listing's `facets`. */
+  facets?: string[];
+  /** The sidebar's group order for templates (fields and the integration's own group keys); default: the facets. */
+  layout?: string[];
+}
+
+/**
+ * What the URL holds and the shopper changes: filters, flags, sort. No page:
+ * a listing shows its first page and appends the next one on "show more"
+ * (`listingMore`, ./query.ts), which is not a state of the URL.
+ */
+export type UiState = Pick<Query, 'filters' | 'flags' | 'sort'>;
+
+/** What differs between search and category pages: URL <-> state. */
+export interface Route {
+  id: string;
+  tag: string;
+  /** search: a query on a search surface; collections: a scope on a collection surface. */
+  endpoint: 'search' | 'collections';
+  /** On/off filters shown as checkboxes; ids are what Query.flags holds. */
+  flagDefs: { id: string; filter: FilterNode }[];
+  accepts: (url: URL) => boolean;
+  /** URL -> query. Sync when known (memoised); null = leave this page to the host. */
+  resolve: (url: URL) => Query | null | Promise<Query | null>;
+  /** A UI change -> the URL to navigate to. */
+  write: (url: URL, next: UiState) => URL;
+  /** An empty first result means the catalog cannot populate this page: hand it back. */
+  releaseOnEmpty?: boolean;
+}
+
+/** Nothing to show for the page itself (not for the shopper's filters): a route that releases on empty hands it back. The bundle and the server renderer both use it. */
+export const handsBack = (route: Route, q: Query, total: number) => !!route.releaseOnEmpty && !total && !Object.keys(q.filters).length && !q.flags.length;
+
+/** The page's faceted fields: its own list (or the listing's), then any other field with a selection. */
+export const facetFields = (cfg: { facets: string[] }, q: Pick<Query, 'facets' | 'filters'>) => {
+  const list = q.facets ?? cfg.facets;
+  return [...list, ...Object.keys(q.filters).filter((f) => q.filters[f]?.length && !list.includes(f))];
+};
+
+export const stateOf = (q: Pick<Query, 'filters' | 'flags' | 'sort'>): UiState => ({ filters: q.filters, flags: q.flags, sort: q.sort });
+
+/**
+ * Our params that are not a facet. `lbx.page` is no longer written (pages are
+ * appended, never opened by URL): an old link carrying it shows the first
+ * page, and it is never read as a facet named "page".
+ */
+const RESERVED = new Set([P + 'page', P + 'sort', P + 'flag']);
+
+/**
+ * Facets and sort from our namespaced params. Every other `lbx.<field>`
+ * is a facet selection: which facets a page shows may depend on the page
+ * (a category's own parameters), and only our UI writes them.
+ */
+export const readOwn = (url: URL): UiState => {
+  const filters: Record<string, string[]> = {};
+  for (const k of new Set(url.searchParams.keys())) {
+    if (!k.startsWith(P) || RESERVED.has(k) || k.length === P.length) continue;
+    const v = url.searchParams.getAll(k).filter(Boolean);
+    if (v.length) filters[k.slice(P.length)] = v;
+  }
+  return {
+    filters,
+    flags: [],
+    sort: url.searchParams.get(P + 'sort') || '',
+  };
+};
+
+export const clearOwn = (url: URL) => {
+  for (const k of [...url.searchParams.keys()]) if (k.startsWith(P)) url.searchParams.delete(k);
+};
+
+/**
+ * The values a click changes (against the render it was built at), each
+ * toggled in the latest requested state. A value the click adds that is
+ * requested already, or removes that is removed already, is the same control
+ * clicked again before the first click rendered (a double click): it flips
+ * back. Two clicks cancel out, as the shopper's native checkbox does.
+ */
+const addRemove = (base: string[], shown: string[], patched: string[]) => {
+  const removed = shown.filter((v) => !patched.includes(v));
+  const added = patched.filter((v) => !shown.includes(v));
+  const flipped = [...removed, ...added];
+  return [...base.filter((v) => !flipped.includes(v)), ...flipped.filter((v) => !base.includes(v))];
+};
+
+/**
+ * A link's patch is a whole state built at the last render. Clicked while an
+ * earlier click is still loading, it would undo that one (two quick brand
+ * ticks kept only the second). So it is applied as the change it makes to the
+ * rendered state (values added and removed), on top of the latest requested
+ * state. "Clear all" (no filters and no flags) and ranges (one min|max value)
+ * replace. Removing the only active filter is a change like any other: it
+ * keeps a tick still loading. The same value clicked twice before a render
+ * (a double click) is ticked, then unticked (`addRemove`).
+ */
+export const nextState = (base: UiState, shown: UiState, patch: Partial<UiState>): UiState => {
+  let filters = base.filters;
+  if (patch.filters) {
+    if (!Object.keys(patch.filters).length && patch.flags && !patch.flags.length) filters = {};
+    else {
+      filters = { ...base.filters };
+      for (const k of new Set([...Object.keys(shown.filters), ...Object.keys(patch.filters)])) {
+        const s = shown.filters[k] ?? [];
+        const p = patch.filters[k] ?? [];
+        if (s.join('\u0000') === p.join('\u0000')) continue; // untouched by this click
+        const vs = [...s, ...p].some((v) => v.includes('|')) ? p : addRemove(base.filters[k] ?? [], s, p);
+        if (vs.length) filters[k] = vs;
+        else delete filters[k];
+      }
+    }
+  }
+  const flags = patch.flags ? addRemove(base.flags, shown.flags, patch.flags) : base.flags;
+  return { filters, flags, sort: patch.sort ?? base.sort };
+};

package/src/widgets/listing/view.ts

@@ -0,0 +1,257 @@
+// A listing's template scope, from (route, query, result) and nothing else:
+// no DOM, no location. The bundle renders the live page with it,
+// and the edge render service renders the server-side HTML with
+// it, so the two agree and the bundle can hydrate the server's markup.
+//
+// Every UI action is a patch of the listing state; the scope carries the URL
+// each patch leads to (`href`), so filters and sort are real links:
+// crawlable, and working without JavaScript on a server-rendered page. The
+// bundle turns a click on one into a client-side update (`go(patch)`).
+
+import type { WidgetContext } from '../../main';
+import type { Helpers, SearchScope } from '../../types';
+import { fold } from '../../core/fold';
+import { navigable } from '../../core/result';
+import { hasMore, parseRange, type ListingConfig, type ListingResult } from './query';
+import { facetFields, stateOf, type Query, type Route, type UiState } from './state';
+
+/**
+ * A config value per viewport min-width (`{ "0": a, "768": b }`, or one value
+ * for every width): the one for the widest min-width `media` says matches.
+ * Without `media` (a server, which cannot know the width): the narrowest's.
+ */
+export const atWidth = <T>(v: T | Record<string, T> | undefined, fallback: T, media?: (query: string) => boolean): T => {
+  if (v == null || typeof v !== 'object' || Array.isArray(v)) return (v ?? fallback) as T;
+  const bp = Object.entries(v as Record<string, T>)
+    .map(([w, x]) => [Number(w) || 0, x] as [number, T])
+    .sort((a, b) => a[0] - b[0]);
+  if (!bp.length) return fallback;
+  let out = bp[0][1];
+  if (media) for (const [w, x] of bp) if (!w || media(`(min-width: ${w}px)`)) out = x;
+  return out;
+};
+/** The viewport's media queries (matchMedia: no layout read), for atWidth in the bundle (not in the entry: the listing's chunk and the server renderer only). */
+export { media as viewport } from '../../core/images';
+
+export type ListingData = Omit<SearchScope, keyof Helpers | 'go' | 'toggleFacet' | 'toggleFlag' | 'setSort' | 'showMore' | 'setRange' | 'ui' | 'setUi'>;
+
+/**
+ * The listing's view state that is not in the URL, as the bundle holds it
+ * (widgets/listing/element.ts): the groups the shopper opened or closed, the
+ * text typed into a group's search box, the drawer's mode and whether it
+ * holds changes, and the actions that change them. Without it (a server, a
+ * hydration's first pass): every group and the drawer's mode as configured
+ * for the narrowest width, no search text, nothing pending.
+ */
+export interface ListingView {
+  /** Groups opened or closed by the shopper, by facet name. */
+  open?: Record<string, boolean>;
+  /** Groups open by default (`facetGroups.open` at this width): all, none, or the first N of the sidebar. */
+  openDefault?: boolean | number;
+  /** A group's search text, by facet name. */
+  text?: Record<string, string>;
+  /** The drawer's mode at this width (`facetsApply`). */
+  apply?: 'instant' | 'staged';
+  /** The drawer holds changes not applied yet. */
+  pending?: boolean;
+  toggleGroup?: (name: string) => void;
+  searchGroup?: (name: string, text: string) => void;
+  /** A range committed (`setRange` of the scope): from–to, `null` an open end. */
+  setRange?: (name: string, from: number | null, to: number | null) => void;
+}
+
+/** A DOM id for a facet group of a route: `lbx-plp-g-lbx_price` (names may hold ':' or spaces). */
+export const groupId = (route: string, name: string) => `lbx-${route}-g-${name.replace(/[^\w-]/g, '_')}`;
+/**
+ * A hit's Result, the same object for the same hit across renders (a
+ * result is derived from its hit alone): the templates' cache of a tile
+ * (core/templates.ts `include`) is keyed by it.
+ */
+const resultsBy = new WeakMap<(h: any) => any, WeakMap<object, any>>();
+const resultOf = <R>(make: (h: any) => R) => {
+  let m = resultsBy.get(make);
+  if (!m) resultsBy.set(make, (m = new WeakMap()));
+  const cache = m;
+  return (h: object): R => {
+    let r = cache.get(h);
+    if (!r) cache.set(h, (r = make(h)));
+    return r;
+  };
+};
+
+/** A group's search: the text folded (case, diacritics: "size" finds "Size", "creme" "Crème"), as a substring. */
+const matcher = (text: string) => {
+  const t = fold(text.trim());
+  return (label: string, value: string) => !t || fold(label).includes(t) || fold(value).includes(t);
+};
+
+/**
+ * Template data for (query, result) at `url`. `url` is the page's URL: the
+ * hrefs are built from it with the route's own write(), so they are the same
+ * URLs the bundle would navigate to.
+ */
+export const listingData = (ctx: Pick<WidgetContext<ListingConfig>, 'config' | 't' | 'result'>, route: Route, url: URL, q: Query, res: ListingResult, message: string | null, view: ListingView = {}): ListingData => {
+  const cfg = ctx.config;
+  const groups = cfg.facetGroups ?? {};
+  const openDefault = view.openDefault ?? atWidth<boolean | number>(groups.open, true);
+  const searchable = new Set(groups.search ?? []);
+  const searchMin = groups.searchMin ?? 10;
+  const t = ctx.t;
+  const label = (key: string, fallback: string) => {
+    const s = t(key);
+    return s === key ? fallback : s;
+  };
+  const current = stateOf(q);
+  const href = (patch: Partial<UiState>) => {
+    const u = route.write(new URL(url.href), { ...current, ...patch });
+    // A path starting with // would be read as another host's URL.
+    return u.pathname.startsWith('//') ? u.href : u.pathname + u.search;
+  };
+  const link = (patch: Partial<UiState>) => ({ patch, href: href(patch) });
+  const without = (name: string, value?: string) => {
+    const filters = { ...q.filters };
+    filters[name] = value === undefined ? [] : (filters[name] || []).filter((v) => v !== value);
+    if (!filters[name].length) delete filters[name];
+    return filters;
+  };
+  const chips: SearchScope['chips'] = [];
+
+  const facets: SearchScope['facets'] = [];
+  const ranges: SearchScope['ranges'] = [];
+  const names = facetFields(cfg, q);
+  const layout = q.layout ? [...q.layout, ...names.filter((n) => !q.layout!.includes(n))] : names;
+  /** A group's accordion state: the shopper's toggle, else open with a selection, else the default (all, none, the first N of the sidebar). */
+  const group = (name: string, selected: boolean) => {
+    const at = layout.indexOf(name);
+    const byDefault = typeof openDefault === 'number' ? at >= 0 && at < openDefault : !!openDefault;
+    return { id: groupId(route.id, name), open: view.open?.[name] ?? (selected || byDefault), toggle: () => view.toggleGroup?.(name) };
+  };
+  for (const name of names) {
+    const data = res.facets[name];
+    const sel = q.filters[name] || [];
+    const flabel = label(`facets.${name}`, name);
+    // A range selected over a terms field (numbers as text): a range too, its bounds from the values.
+    const nums = data?.type === 'range' ? [] : (data?.values ?? []).map((v) => parseFloat(String(v))).filter(Number.isFinite);
+    if (data?.type === 'range' || (sel.length === 1 && sel[0].includes('|') && (nums.length || !data))) {
+      const picked = parseRange(sel[0]);
+      // No values yet (the products shown before their facets): the selection's
+      // ends, one open end the other's. A max of 0 under a site's own price param had the
+      // browser clamp the thumbs, and lit never set them back once the facets came.
+      const min = Math.floor(data?.type === 'range' ? data.min ?? 0 : nums.length ? Math.min(...nums) : picked.from ?? picked.to ?? 0);
+      const max = Math.ceil(data?.type === 'range' ? data.max ?? 0 : nums.length ? Math.max(...nums) : picked.to ?? picked.from ?? 0);
+      if (min >= max && !sel.length) continue;
+      const unit = label(`units.${name}`, '');
+      const step = cfg.rangeSteps?.[name] ?? 1;
+      // An end at its bound is open; both at their bounds clears it.
+      const set = (from: number | null, to: number | null) => view.setRange?.(name, from == null || from <= min ? null : from, to == null || to >= max ? null : to);
+      const cur = { from: picked.from ?? null, to: picked.to ?? null };
+      ranges.push({
+        name,
+        label: flabel,
+        min,
+        max,
+        from: picked.from ?? min,
+        to: picked.to ?? max,
+        active: !!sel.length,
+        unit,
+        step: step > 0 ? step : 1,
+        clear: link({ filters: without(name) }),
+        set,
+        setFrom: (from) => set(from, cur.to),
+        setTo: (to) => set(cur.from, to),
+        ...group(name, !!sel.length),
+      });
+      if (sel.length) {
+        const value = `${picked.from ?? min}–${picked.to ?? max}${unit ? ` ${unit}` : ''}`;
+        chips.push({ kind: 'range', name, title: flabel, value, label: `${flabel}: ${value}`, ...link({ filters: without(name) }) });
+      }
+      continue;
+    }
+    if (data && data.type !== 'terms') continue; // hierarchy facets: not rendered yet
+    const vals: string[] = (data?.values ?? []).map(String);
+    const present = new Set(vals);
+    // Keep selected values visible even if the API stops returning them.
+    for (const v of sel) if (!vals.includes(v)) vals.push(v);
+    // The page's other values (emptyValues): none of the filtered results has them.
+    const all = res.facetsAll?.[name];
+    if (all?.type === 'terms') for (const v of (all.values ?? []).map(String)) if (!vals.includes(v)) vals.push(v);
+    if (!vals.length) continue;
+    const vlabel = (v: string) => label(`values.${name}.${v}`, v);
+    // A search box over the group's values (`facetGroups.search`), from `searchMin` values; client-side, as typed.
+    const text = view.text?.[name] ?? '';
+    const match = matcher(text);
+    const values = vals.map((v, rank) => {
+      const checked = sel.includes(v);
+      const filters = checked ? without(name, v) : { ...q.filters, [name]: [...sel, v] };
+      const vl = vlabel(v);
+      return { value: v, label: vl, checked, rank, match: match(vl, v), ...(present.has(v) || checked ? {} : { empty: true }), ...link({ filters }) };
+    });
+    facets.push({
+      name,
+      label: flabel,
+      selected: sel.length,
+      values,
+      search: searchable.has(name) && vals.length > searchMin ? { text, matches: values.filter((v) => v.match).length, set: (t: string) => view.searchGroup?.(name, t) } : null,
+      ...group(name, !!sel.length),
+    });
+    for (const v of sel) chips.push({ kind: 'facet', name, title: flabel, value: vlabel(v), label: vlabel(v), ...link({ filters: without(name, v) }) });
+  }
+
+  const flags = route.flagDefs.map((f) => {
+    const checked = q.flags.includes(f.id);
+    return { id: f.id, label: label(`flags.${f.id}`, f.id), checked, ...link({ flags: checked ? q.flags.filter((x) => x !== f.id) : [...q.flags, f.id] }) };
+  });
+  // A flag is its own title ("In stock"): no value.
+  for (const f of flags) if (f.checked) chips.unshift({ kind: 'flag', name: f.id, title: f.label, value: '', label: f.label, ...link({ flags: q.flags.filter((x) => x !== f.id) }) });
+
+  return {
+    message: message ?? (res.total ? null : t('empty', { query: q.title })),
+    route: route.id,
+    query: q.title,
+    title: q.title,
+    showTitle: !!cfg.showTitle,
+    total: res.total,
+    results: res.hits.map(resultOf(ctx.result)),
+    quick: Object.fromEntries(Object.entries(res.quick ?? {}).map(([k, hs]) => [k, hs.map(ctx.result).filter(navigable)])),
+    facets,
+    ranges,
+    layout,
+    flags,
+    chips,
+    clear: chips.length ? link({ filters: {}, flags: [] }) : null,
+    sorts: cfg.sorts.map((value) => ({ value, label: label(`sorts.${value}`, value || '–'), selected: value === q.sort, ...link({ sort: value }) })),
+    sort: q.sort,
+    // As far as the API can page: a set that cannot page ('unsupported') or has ended has no more, whatever its total says.
+    more: hasMore(res),
+    path: url.pathname,
+    facetsOpen: true,
+    facetsPending: !!res.pending,
+    quickPending: !!res.quickPending,
+    facetsApply: view.apply ?? atWidth(cfg.facetsApply, 'instant'),
+    pending: !!view.pending,
+  };
+};
+
+/** Server-rendered state, embedded before the listing: the bundle adopts it. */
+export interface SsrState {
+  href: string;
+  query: Query;
+  result: ListingResult;
+}
+export const ssrStateId = (routeId: string) => `lbx-ssr-${routeId}`;
+
+/** A wait for a re-render's results this long (ms) dims the list (./element.ts loading()); a quicker answer shows no dim. */
+export const DIM_MS = 100;
+/**
+ * The list dimmed while another state's results are awaited, once that
+ * takes DIM_MS (`data-lbx-loading`, set by ./element.ts loading()), and
+ * faded back when they are drawn. `--lbx-c-dim` the opacity. Reduced motion:
+ * no fade. Contrast themes: dimmed less (colours are the system's).
+ */
+export const LOADING_CSS =
+  ':is(lbx-search,lbx-plp) [data-lbx-list]{transition:opacity .15s}' +
+  ':is(lbx-search,lbx-plp)[data-lbx-loading] [data-lbx-list]{opacity:var(--lbx-c-dim,.45)}' +
+  '@media (prefers-reduced-motion:reduce){:is(lbx-search,lbx-plp) [data-lbx-list]{transition:none}}' +
+  '@media (forced-colors:active){:is(lbx-search,lbx-plp)[data-lbx-loading] [data-lbx-list]{opacity:.6}}';
+/** sizeTiles(): out of view, a tile is skipped at the size the first one measures (Baseline Newly available: under @supports, checked by Luma's Baseline tests). */
+export const CV_CSS = '@supports (content-visibility:auto){[data-lbx-cv] [data-lbx-list]>*{content-visibility:auto;contain-intrinsic-size:auto var(--lbx-tile-w) auto var(--lbx-tile-h)}}';

package/src/widgets/plp/index.ts

@@ -0,0 +1,11 @@
+// Category listing (route: ./route.ts).
+
+import type { Takeover } from '../../core/takeover';
+import type { WidgetContext } from '../../main';
+import type { PlpConfigType } from '../../types';
+import { startListing } from '../listing/element';
+import { plpRoute } from './route';
+
+export { templates, css } from '../search/assets';
+
+export const start = (ctx: WidgetContext<PlpConfigType>, tk: Takeover) => startListing(ctx as any, tk, plpRoute(ctx.config, ctx.api, ctx.global));