@stapel/search-react 0.3.1 → 0.7.0

package/dist/default/SearchBox.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `<SearchBox>` — the control this pair shipped a search page without.
+ *
+ * `setText` existed from the first release and had ZERO callers in the whole
+ * repository: the URL codec could carry `q`, the state machine could set it,
+ * the request sent it — and nothing on any screen could type one. A results
+ * page reachable only by editing the address bar is not a search feature, so
+ * this is the blocker of the pair's audit (S-1) and the reason the page is now
+ * a screen rather than a viewer.
+ *
+ * ── What it does, and what it refuses to do ───────────────────────────────
+ *
+ *  - **Types into a draft, searches after a pause.** `useSearchBox` owns the
+ *    debounce and the URL round-trip; this file is the antd shape of it.
+ *  - **Suggests from the INDEX.** `GET /suggest` returns title prefixes out of
+ *    the catalogue — never a query log, because stapel-search keeps none — so
+ *    every suggestion is a search that has results. The endpoint was typed and
+ *    unreachable for three releases (S-8).
+ *  - **Never grows a "no results" dropdown.** With nothing to suggest the menu
+ *    stays shut: an empty popover under a half-typed word says "there is
+ *    nothing" about a search that has not run.
+ *  - **Caps the input at the server's own limit** (200 chars), so
+ *    `error.400.search_query_too_long` is a refusal this control cannot cause.
+ *
+ * Exported from `/default` so a container can mount it in the header —
+ * `nav/manifest.ts` calls `/s` "a navigation TARGET reached from the header's
+ * search box", and this is that box. It needs the same `<SearchStateProvider>`
+ * as everything else; a header outside one renders `<SearchPage>`'s copy.
+ */
+import { useState } from "react";
+import { AutoComplete, Button, Flex, Input } from "antd";
+import { useT } from "@stapel/core";
+import { SkinTheme } from "@stapel/tokens-antd/skin";
+import { spacing } from "@stapel/tokens";
+import { useSearchBox } from "../headless/useSearchBox.js";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+export function SearchBox(props) {
+    const t = useT();
+    const { mode, placeholder, submitButton, autoFocus, ...boxOptions } = props;
+    const box = useSearchBox(boxOptions);
+    const [open, setOpen] = useState(false);
+    const options = box.suggestions.map((value) => ({ value }));
+    return (_jsx(SkinTheme, { surface: "bare", ...(mode !== undefined ? { mode } : {}), "data-testid": "search-box", children: _jsxs(Flex, { gap: spacing[2], align: "center", wrap: false, children: [_jsx(AutoComplete, { value: box.draft, options: options, 
+                    // Shut whenever there is nothing to say — see the header. The
+                    // open state is the skin's, not antd's: the prop that reports the
+                    // menu opening was renamed between antd 5 and 6 and this package
+                    // supports both, so nothing here asks antd when to open.
+                    open: open && options.length > 0, style: { flex: 1, minWidth: 0 }, onSelect: (value) => {
+                        setOpen(false);
+                        box.submit(value);
+                    }, onChange: (value) => {
+                        setOpen(true);
+                        box.setDraft(value);
+                    }, children: _jsx(Input, { allowClear: {
+                            clearIcon: (_jsx("span", { "aria-label": t(SEARCH_I18N_KEYS.boxClear), role: "img", children: "×" })),
+                        }, autoFocus: autoFocus === true, maxLength: box.maxLength, "aria-label": t(SEARCH_I18N_KEYS.boxLabel), placeholder: placeholder ?? t(SEARCH_I18N_KEYS.boxPlaceholder), "data-testid": "search-box-input", "data-analytics": "none", "data-analytics-reason": "typing a query is a read, not a flow step", onPressEnter: () => {
+                            setOpen(false);
+                            box.submit();
+                        }, onBlur: () => {
+                            setOpen(false);
+                        } }) }), submitButton !== false && (_jsx(Button, { type: "primary", "data-testid": "search-box-submit", "data-analytics": "none", "data-analytics-reason": "running a search is a read, not a flow step", onClick: () => {
+                        setOpen(false);
+                        box.submit();
+                    }, children: t(SEARCH_I18N_KEYS.boxSubmit) }))] }) }));
+}
+//# sourceMappingURL=SearchBox.js.map

package/dist/default/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../src/default/SearchBox.tsx"],"names":[],"mappings":"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"}

package/dist/default/SearchPage.d.ts

@@ -1,25 +1,25 @@
-/**
- * `<SearchPage>` — the composed screen the nav manifest points at: filters on
- * the left, sort and results on the right, the ranking link in the footer.
- *
- * It composes the two panes and owns NO state of its own. The URL is the
- * state, and it arrives through the `adapter` prop — which is where a host
- * hands in `useRouterSearchParams()` from `@stapel/search-react/router`, or
- * its own binding. The page does not reach for a router, so the same
- * component renders under react-router, under a Next.js app router, and in a
- * test with a plain `URLSearchParams`.
- *
- * The three seams a storefront fills (spec §6.2 items 1–3): `renderCard`
- * (a `<ListingCard>`), `categoryFeatures` (from categories-react, for facet
- * labels), and `footer` (the container's own chrome). None of them is
- * optional behaviour in disguise — every one has a working default.
- */
 import type { ReactElement, ReactNode } from "react";
 import type { FeatureDef } from "@stapel/attributes-react";
 import type { SearchParamsAdapter } from "../headless/SearchStateProvider.js";
 import type { ParseSearchStateOptions } from "../state/urlState.js";
+import type { CategoryFilterSlotProps, GeoFilterSlotProps } from "./FacetPanelPane.js";
+import type { DegradationNoticeVariant } from "./DegradationNotice.js";
 import type { SearchCardRenderer } from "./SearchResultCard.js";
 import type { ThemeModeProp } from "./types.js";
+/** Where the filters live: beside the results, or behind a button in a sheet. */
+export type SearchFiltersLayout = "column" | "sheet";
+/**
+ * The desktop filter rail's width.
+ *
+ * A rail, not a half-page. `Col md={7}` gave the panel a SHARE of the page, so
+ * on a wide screen the filters grew with it — the visual pass measured 570 of
+ * 1280px (45%) spent on the controls that narrow a list, next to the list they
+ * narrow. Filters are a fixed instrument: a checkbox column needs the width of
+ * its longest label and nothing more, and every pixel past that comes out of
+ * the results. 280px is that width at the default type step, and it is the
+ * same panel the phone sheet draws — one component, two frames.
+ */
+export declare const FILTERS_RAIL_WIDTH = 280;
 export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions {
     /** The URL binding. `useRouterSearchParams()` from `./router` is the
      * react-router one. */
@@ -27,8 +27,50 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
     readonly renderCard?: SearchCardRenderer;
     readonly categoryFeatures?: readonly FeatureDef[];
     readonly locale?: string;
+    /** Render the query box at the top. `false` for a container whose HEADER
+     * already mounts `<SearchBox>` — one box per screen, not two. */
+    readonly searchBox?: boolean;
+    /** BCP-47 tags this deployment indexes, for the language filter. */
+    readonly languages?: readonly string[];
+    /** The catalogue picker slot — see {@link FacetPanelPaneProps}. */
+    readonly renderCategoryFilter?: (slot: CategoryFilterSlotProps) => ReactNode;
+    /** The location control slot (`geo-react`). */
+    readonly renderGeoFilter?: (slot: GeoFilterSlotProps) => ReactNode;
     /** Container chrome under the results — e.g. the ranking-disclosure link. */
     readonly footer?: ReactNode;
+    /**
+     * Rendered at the TOP of the filter column, above everything else.
+     *
+     * The slot exists for a filter this pair cannot ship and has no named seam
+     * for. Whatever a host renders here reads and writes the same URL state as
+     * the facets beside it (`useSearchState()`), so it is a filter in every
+     * sense that matters and not a decoration bolted on top.
+     */
+    readonly filtersHeader?: ReactNode;
+    /** What this surface calls its result list. See
+     * {@link SearchResultsPaneProps.heading}. */
+    readonly resultsHeading?: ReactNode;
+    /** How the results surface says what the engine could not do (default
+     * `"banner"`). Handed straight to `<SearchResultsPane>`. */
+    readonly degradationNotice?: DegradationNoticeVariant;
+    /**
+     * Force the filter surface instead of reading the viewport. For tests and
+     * for a host that renders the page inside a phone-width container that is
+     * not the viewport — not an escape hatch for "I prefer a column on phones".
+     */
+    readonly filtersLayout?: SearchFiltersLayout;
+    /**
+     * Open the phone filter sheet on mount.
+     *
+     * For a container that deep-links INTO the filters ("Refine this search"
+     * from a category page), and for the story that photographs the sheet —
+     * a state reached only by a tap is a state nothing outside a browser has
+     * ever seen. The person still closes it; this is the initial value, not a
+     * controlled one.
+     */
+    readonly defaultFiltersOpen?: boolean;
+    /** Offer a page-size control beside the sort. Default `true`. */
+    readonly pageSize?: boolean;
 }
 export declare function SearchPage(props: SearchPageProps): ReactElement;
 //# sourceMappingURL=SearchPage.d.ts.map

package/dist/default/SearchPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchPage.d.ts","sourceRoot":"","sources":["../../src/default/SearchPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAIpE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,uBAAuB;IAC7E;2BACuB;IACvB,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IACzC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAwC/D"}
+{"version":3,"file":"SearchPage.d.ts","sourceRoot":"","sources":["../../src/default/SearchPage.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAG9E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAIpE,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,iFAAiF;AACjF,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAYtC,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,uBAAuB;IAC7E;2BACuB;IACvB,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IACzC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB;qEACiE;IACjE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,mEAAmE;IACnE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAC7E,+CAA+C;IAC/C,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,SAAS,CAAC;IACnE,6EAA6E;IAC7E,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;;;OAOG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC;iDAC6C;IAC7C,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC;gEAC4D;IAC5D,QAAQ,CAAC,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;IACtD;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAC7C;;;;;;;;OAQG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAuMD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA2C/D"}

package/dist/default/SearchPage.js

@@ -1,13 +1,162 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Col, Flex, Row } from "antd";
-import { SearchStateProvider } from "../headless/SearchStateProvider.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `<SearchPage>` — the composed screen the nav manifest points at: the query
+ * box, the filters, the sort and the results.
+ *
+ * It composes the panes and owns NO state of its own. The URL is the state,
+ * and it arrives through the `adapter` prop — which is where a host hands in
+ * `useRouterSearchParams()` from `@stapel/search-react/router`, or its own
+ * binding. The page does not reach for a router, so the same component renders
+ * under react-router, under a Next.js app router, and in a test with a plain
+ * `URLSearchParams`.
+ *
+ * The seams a storefront fills: `renderCard` (a `<ListingCard>`),
+ * `categoryFeatures` (from categories-react, for facet labels and range rows),
+ * `renderCategoryFilter` / `renderGeoFilter` (controls other pairs own),
+ * `footer` (the container's own chrome), `filtersHeader` and `resultsHeading`.
+ * None of them is optional behaviour in disguise — every one has a working
+ * default or a visible placeholder.
+ *
+ * ── The screen could not start a search ───────────────────────────────────
+ *
+ * Until this release the page rendered filters, sort and results and NO query
+ * box: `q` reached the state only from the address bar, and `setText` had zero
+ * callers in the repository. A scaffolded app therefore had a search route and
+ * no way to search (audit S-1). `<SearchBox>` is now the first thing on the
+ * page — and it is exported, so a container that puts the real box in its
+ * header can pass `searchBox={false}` and keep exactly one.
+ *
+ * ── On a phone the filters are a sheet ────────────────────────────────────
+ *
+ * The filter column was `xs={24}`: on a 390px screen the entire panel stacked
+ * ABOVE the results, so a person scrolled past every facet to reach the first
+ * card (§83(b), audit S-6). Below the tablet breakpoint the panel now lives
+ * behind a "Filters (N)" button and opens as a bottom sheet through the shared
+ * `SkinDialog`, with the count of what is applied on the button itself.
+ *
+ * ── The filter column is laid out only when there is something in it ──────
+ *
+ * `Col md={7}` was unconditional, and on a deployment whose search plan
+ * declares no facets that spent a quarter of every results page — `/s`, every
+ * category page, every seller page — on an empty-state illustration saying
+ * "no filters for this search". Saying it once is honest; reserving a column
+ * for it on every screen is not a message, it is a hole. The page asks the
+ * facet bag what it has (`useFacetPanel`) and gives the results the whole
+ * width when the answer is nothing AND no other filter control has anything
+ * to show. Note which way the test runs: the column stays for `loading` and
+ * for `failed`, because a panel that has not answered yet is not a panel with
+ * nothing in it, and a layout that reflowed underneath a person mid-load would
+ * be worse than the hole.
+ */
+import { useState } from "react";
+import { Button, Flex } from "antd";
+import { SkinDialog, SkinTheme, useDialogSurface } from "@stapel/tokens-antd/skin";
+import { useT, useTPlural } from "@stapel/core";
+import { spacing } from "@stapel/tokens";
+import { SearchStateProvider, useSearchState } from "../headless/SearchStateProvider.js";
+import { useFacetPanel } from "../headless/FacetPanel.js";
+import { useAppliedCount } from "../headless/useAppliedCount.js";
+import { buildRangeGroups } from "../state/ranges.js";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 import { FacetPanelPane } from "./FacetPanelPane.js";
+import { PageSizeSelect } from "./PageSizeSelect.js";
+import { SearchBox } from "./SearchBox.js";
 import { SearchResultsPane } from "./SearchResultsPane.js";
 import { SortSelect } from "./SortSelect.js";
-import { SearchSkinTheme } from "./theme.js";
 import { UrlIssueNotice } from "./UrlIssueNotice.js";
+/**
+ * The desktop filter rail's width.
+ *
+ * A rail, not a half-page. `Col md={7}` gave the panel a SHARE of the page, so
+ * on a wide screen the filters grew with it — the visual pass measured 570 of
+ * 1280px (45%) spent on the controls that narrow a list, next to the list they
+ * narrow. Filters are a fixed instrument: a checkbox column needs the width of
+ * its longest label and nothing more, and every pixel past that comes out of
+ * the results. 280px is that width at the default type step, and it is the
+ * same panel the phone sheet draws — one component, two frames.
+ */
+export const FILTERS_RAIL_WIDTH = 280;
+/** The rail: fixed, never squeezed, never grown. */
+const RAIL = {
+    flex: `0 0 ${String(FILTERS_RAIL_WIDTH)}px`,
+    maxWidth: FILTERS_RAIL_WIDTH,
+};
+/** The results take what is left. `minWidth: 0` so a long word inside a card
+ * cannot push the grid wider than its column. */
+const RESULTS_COLUMN = { flex: "1 1 auto", minWidth: 0 };
+/**
+ * The two columns, inside the state provider — which is where they have to be,
+ * because the layout decision reads the same search the panes read.
+ */
+function SearchPageBody(props) {
+    const t = useT();
+    const tPlural = useTPlural();
+    const { categoryFeatures, locale, filtersHeader } = props;
+    const { state } = useSearchState();
+    const facets = useFacetPanel({
+        ...(categoryFeatures !== undefined ? { categoryFeatures } : {}),
+        ...(locale !== undefined ? { locale } : {}),
+    });
+    const applied = useAppliedCount();
+    const surface = useDialogSurface();
+    const layout = props.filtersLayout ?? (surface === "sheet" ? "sheet" : "column");
+    const [sheetOpen, setSheetOpen] = useState(props.defaultFiltersOpen === true);
+    /**
+     * "Show 25 results", not "Show results".
+     *
+     * The sheet's own button is the only place a person learns what the filters
+     * they just ticked did — the results are behind it. When the engine cannot
+     * say how many there are (`countKind: "unknown"`) the button says so by
+     * saying nothing: a fabricated number on the one control that commits the
+     * change is worse than a generic verb.
+     */
+    const applyLabel = applied.count === null || applied.kind === "unknown"
+        ? t(SEARCH_I18N_KEYS.filtersApply)
+        : tPlural(applied.kind === "at_least"
+            ? SEARCH_I18N_KEYS.filtersShowCountAtLeast
+            : SEARCH_I18N_KEYS.filtersShowCount, { count: applied.count });
+    // "Nothing to filter by" is a LOADED answer of zero facet groups AND no
+    // other control with anything to say — see the header. Every clause is a
+    // control that would otherwise be hidden behind an empty panel: a numeric
+    // range the schema declares, a category or a language the URL carries, a
+    // host slot that is filled.
+    const ranges = buildRangeGroups({
+        state,
+        ...(categoryFeatures !== undefined ? { categoryFeatures } : {}),
+    });
+    const filtersEmpty = facets.state.status === "ready" &&
+        facets.state.data.length === 0 &&
+        facets.activeFilters === 0 &&
+        ranges.length === 0 &&
+        state.category === undefined &&
+        state.lang === undefined &&
+        props.renderCategoryFilter === undefined &&
+        props.renderGeoFilter === undefined &&
+        (props.languages ?? []).length === 0;
+    const showFilters = filtersHeader !== undefined || !filtersEmpty;
+    const panel = (_jsxs(Flex, { vertical: true, gap: spacing[4], children: [filtersHeader, filtersEmpty ? null : (_jsx(FacetPanelPane, { ...(layout === "sheet" ? { heading: null } : {}), ...(categoryFeatures !== undefined ? { categoryFeatures } : {}), ...(locale !== undefined ? { locale } : {}), ...(props.languages !== undefined ? { languages: props.languages } : {}), ...(props.renderCategoryFilter !== undefined
+                    ? { renderCategoryFilter: props.renderCategoryFilter }
+                    : {}), ...(props.renderGeoFilter !== undefined
+                    ? { renderGeoFilter: props.renderGeoFilter }
+                    : {}) }))] }));
+    const toolbar = (_jsxs(Flex, { align: "center", wrap: true, gap: spacing[3], children: [_jsx(SortSelect, {}), props.pageSize !== false && _jsx(PageSizeSelect, {})] }));
+    const results = (_jsx(SearchResultsPane, { toolbar: toolbar, ...(props.renderCard !== undefined ? { renderCard: props.renderCard } : {}), ...(props.footer !== undefined ? { footer: props.footer } : {}), ...(props.resultsHeading !== undefined
+            ? { heading: props.resultsHeading }
+            : {}), ...(props.degradationNotice !== undefined
+            ? { degradationNotice: props.degradationNotice }
+            : {}) }));
+    return (_jsxs(Flex, { vertical: true, gap: spacing[4], "data-testid": "search-page", "data-filters": showFilters ? "on" : "off", "data-filters-layout": layout, children: [props.searchBox !== false && _jsx(SearchBox, {}), _jsx(UrlIssueNotice, {}), showFilters && layout === "sheet" ? (_jsxs(_Fragment, { children: [_jsx(Button, { block: true, "data-testid": "search-filters-open", "data-analytics": "none", "data-analytics-reason": "opening the filter sheet is a read, not a flow step", onClick: () => {
+                            setSheetOpen(true);
+                        }, children: facets.activeFilters === 0
+                            ? t(SEARCH_I18N_KEYS.facetsTitle)
+                            : t(SEARCH_I18N_KEYS.filtersOpen, { count: facets.activeFilters }) }), _jsx(SkinDialog, { open: sheetOpen, onClose: () => {
+                            setSheetOpen(false);
+                        }, title: t(SEARCH_I18N_KEYS.facetsTitle), dismissLabel: t(SEARCH_I18N_KEYS.filtersDismiss), "data-testid": "search-filters-sheet", footer: _jsx(Button, { block: true, type: "primary", "data-testid": "search-filters-apply", "data-analytics": "none", "data-analytics-reason": "the filters are already applied; this closes the sheet", onClick: () => {
+                                setSheetOpen(false);
+                            }, children: applyLabel }), children: panel }), results] })) : showFilters ? (_jsxs(Flex, { align: "flex-start", gap: spacing[5], "data-testid": "search-page-columns", children: [_jsx("div", { style: RAIL, children: panel }), _jsx("div", { style: RESULTS_COLUMN, children: results })] })) : (results)] }));
+}
 export function SearchPage(props) {
-    const { adapter, renderCard, categoryFeatures, locale, footer, mode, ...parseOptions } = props;
-    return (_jsx(SearchSkinTheme, { ...(mode !== undefined ? { mode } : {}), children: _jsx(SearchStateProvider, { adapter: adapter, ...parseOptions, children: _jsxs(Flex, { vertical: true, gap: 16, "data-testid": "search-page", children: [_jsx(UrlIssueNotice, {}), _jsxs(Row, { gutter: [16, 16], children: [_jsx(Col, { xs: 24, md: 7, children: _jsx(FacetPanelPane, { ...(categoryFeatures !== undefined ? { categoryFeatures } : {}), ...(locale !== undefined ? { locale } : {}) }) }), _jsx(Col, { xs: 24, md: 17, children: _jsx(SearchResultsPane, { toolbar: _jsx(SortSelect, {}), ...(renderCard !== undefined ? { renderCard } : {}), ...(footer !== undefined ? { footer } : {}) }) })] })] }) }) }));
+    const { adapter, renderCard, categoryFeatures, locale, searchBox, languages, renderCategoryFilter, renderGeoFilter, footer, filtersHeader, resultsHeading, degradationNotice, filtersLayout, defaultFiltersOpen, pageSize, mode, ...parseOptions } = props;
+    return (_jsx(SkinTheme, { surface: "base", ...(mode !== undefined ? { mode } : {}), children: _jsx(SearchStateProvider, { adapter: adapter, ...parseOptions, children: _jsx(SearchPageBody, { ...(renderCard !== undefined ? { renderCard } : {}), ...(categoryFeatures !== undefined ? { categoryFeatures } : {}), ...(locale !== undefined ? { locale } : {}), ...(searchBox !== undefined ? { searchBox } : {}), ...(languages !== undefined ? { languages } : {}), ...(renderCategoryFilter !== undefined ? { renderCategoryFilter } : {}), ...(renderGeoFilter !== undefined ? { renderGeoFilter } : {}), ...(footer !== undefined ? { footer } : {}), ...(filtersHeader !== undefined ? { filtersHeader } : {}), ...(resultsHeading !== undefined ? { resultsHeading } : {}), ...(degradationNotice !== undefined ? { degradationNotice } : {}), ...(filtersLayout !== undefined ? { filtersLayout } : {}), ...(defaultFiltersOpen !== undefined ? { defaultFiltersOpen } : {}), ...(pageSize !== undefined ? { pageSize } : {}) }) }) }));
 }
 //# sourceMappingURL=SearchPage.js.map

package/dist/default/SearchPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchPage.js","sourceRoot":"","sources":["../../src/default/SearchPage.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,MAAM,CAAC;AAEtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,MAAM,EACN,IAAI,EACJ,GAAG,YAAY,EAChB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,eAAe,OAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACvD,KAAC,mBAAmB,IAAC,OAAO,EAAE,OAAO,KAAM,YAAY,YACrD,MAAC,IAAI,IAAC,QAAQ,QAAC,GAAG,EAAE,EAAE,iBAAc,aAAa,aAC/C,KAAC,cAAc,KAAG,EAClB,MAAC,GAAG,IAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,aACnB,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YAChB,KAAC,cAAc,OACT,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC5D,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC5C,GACE,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,YAMjB,KAAC,iBAAiB,IAChB,OAAO,EAAE,KAAC,UAAU,KAAG,KACnB,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAChD,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC5C,GACE,IACF,IACD,GACa,GACN,CACnB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"SearchPage.js","sourceRoot":"","sources":["../../src/default/SearchPage.tsx"],"names":[],"mappings":"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"}

package/dist/default/SearchResultCard.d.ts

@@ -1,22 +1,5 @@
-/**
- * The GENERIC card — the fallback behind `renderCard`, and the default the
- * spec (§3.7) says the pair must ship.
- *
- * `SearchItem.card` is a free-form object: "stored row fields, so a result
- * page costs one query". Which fields it holds is the DOC TYPE's business,
- * not search's, so this card reads a small, documented set of conventional
- * names and shows what it finds. A storefront replaces the whole thing by
- * passing `renderCard` and rendering `<ListingCard>` from
- * `@stapel/listings-react/default` — that is the slot seam, and the reason
- * these two L2 pairs never import each other.
- *
- * The ONE thing a replacement card may not drop is the `promoted` marking:
- * DSA Art. 26 makes it mandatory, the serializer puts it on every item under
- * every sort, and a storefront where some lists show it and some do not is
- * legally worse than one that never showed it. `renderCard` receives the whole
- * item so the marking is always reachable, and this default renders it.
- */
 import type { ReactElement, ReactNode } from "react";
+import type { Format } from "@stapel/core";
 import type { SearchItem } from "../api/types.js";
 /** What the card slot is handed. */
 export interface SearchCardProps {
@@ -30,5 +13,23 @@ export type SearchCardRenderer = (item: SearchItem) => ReactNode;
  * belongs in the owning pair's own card.
  */
 export declare const GENERIC_CARD_FIELDS: readonly string[];
+/**
+ * The card's price, written the way money is written.
+ *
+ * `card.price` arrives as a string because the index stores it as one, and
+ * `card.currency` as an ISO 4217 code because that is what a document carries.
+ * Rendered verbatim they read "3200 RUB": no grouping, the code where the
+ * symbol belongs, and the reader doing the arithmetic of where the thousands
+ * are. `Intl` knows all of that per locale, so the code goes in and the
+ * locale's own rendering comes out.
+ *
+ * Two ways this refuses to guess. A `price` that is not a finite number is
+ * passed through UNCHANGED — a doc type may store "on request", and turning
+ * that into `NaN` or into nothing loses what the seller wrote. A `currency`
+ * that is not a three-letter code (or one this runtime rejects) falls back to
+ * the plain grouped number plus the code, which is still better than the raw
+ * pair and never throws inside a render.
+ */
+export declare function formatCardPrice(format: Format, price: string | undefined, currency: string | undefined): string | undefined;
 export declare function SearchResultCard(props: SearchCardProps): ReactElement;
 //# sourceMappingURL=SearchResultCard.d.ts.map

package/dist/default/SearchResultCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultCard.d.ts","sourceRoot":"","sources":["../../src/default/SearchResultCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,oCAAoC;AACpC,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;CAC3B;AAED,wDAAwD;AACxD,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,UAAU,KAAK,SAAS,CAAC;AAQjE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,MAAM,EAMhD,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA4CrE"}
+{"version":3,"file":"SearchResultCard.d.ts","sourceRoot":"","sources":["../../src/default/SearchResultCard.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,oCAAoC;AACpC,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;CAC3B;AAED,wDAAwD;AACxD,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,UAAU,KAAK,SAAS,CAAC;AAQjE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,MAAM,EAOhD,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,QAAQ,EAAE,MAAM,GAAG,SAAS,GAC3B,MAAM,GAAG,SAAS,CAoBpB;AAiFD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAgGrE"}

package/dist/default/SearchResultCard.js

@@ -1,6 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Flex, Tag, Tooltip, Typography } from "antd";
-import { useT } from "@stapel/core";
+/**
+ * The GENERIC card — the fallback behind `renderCard`, and the default the
+ * spec (§3.7) says the pair must ship.
+ *
+ * `SearchItem.card` is a free-form object: "stored row fields, so a result
+ * page costs one query". Which fields it holds is the DOC TYPE's business,
+ * not search's, so this card reads a small, documented set of conventional
+ * names and shows what it finds. A storefront replaces the whole thing by
+ * passing `renderCard` and rendering `<ListingCard>` from
+ * `@stapel/listings-react/default` — that is the slot seam, and the reason
+ * these two L2 pairs never import each other.
+ *
+ * The ONE thing a replacement card may not drop is the `promoted` marking:
+ * DSA Art. 26 makes it mandatory, the serializer puts it on every item under
+ * every sort, and a storefront where some lists show it and some do not is
+ * legally worse than one that never showed it. `renderCard` receives the whole
+ * item so the marking is always reachable, and this default renders it.
+ *
+ * ── Two things this card used to get wrong ────────────────────────────────
+ *
+ * 1. **It declared `image_url` and drew nothing.** A text-only card in a
+ *    classifieds search is not a card; the field was in `GENERIC_CARD_FIELDS`
+ *    and in no render path. It is drawn now, through `@stapel/image`, so the
+ *    aspect box lands before the network does and a dead URL renders a named
+ *    placeholder instead of the browser's torn-page icon.
+ * 2. **The marking's EXPLANATION was in a `Tooltip`.** Touch has no hover, so
+ *    on the device most of this traffic arrives from, the sentence the law is
+ *    actually about was unreachable — the tag said "Promoted" and nothing on
+ *    screen said what that meant. It is ordinary text under the tag now
+ *    (`stapel/no-tooltip-in-skin`), and the tag itself is a `--stapel-*` role
+ *    rather than an antd preset, because the one legally-mandated marking in
+ *    the pair has to look the same in every skin a deployment builds.
+ * 3. **The tag was white on cream.** `warning-on` is the text colour for the
+ *    SOLID warning fill; over `warning-bg` the readable role is `warning`
+ *    itself. The visual pass measured the one legally-mandated string in the
+ *    package at roughly 1.2:1 — a disclosure nobody can read is the same as
+ *    no disclosure, in both themes.
+ * 4. **The price was a raw amount and an ISO code.** "3200 RUB" is a wire
+ *    value printed as prose: no grouping, no symbol, and the code in the
+ *    reader's face. It goes through core's `useFormat().number` with
+ *    `style: "currency"`, which is the same `Intl` path `@stapel/currencies-
+ *    react`'s `formatMoney` takes — this pair does not depend on that package
+ *    (a search index is not a price book) but it must not invent a second
+ *    way to write money either.
+ */
+import { useMemo } from "react";
+import { Card, Flex, Typography } from "antd";
+import { Image } from "@stapel/image";
+import { useFormat, useT } from "@stapel/core";
+import { cssVar, fontSize, fontWeight, radii, spacing } from "@stapel/tokens";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 function text(value) {
     if (typeof value === "string" && value.length > 0)
@@ -20,19 +68,144 @@ export const GENERIC_CARD_FIELDS = [
     "currency",
     "location",
     "image_url",
+    "url",
 ];
+/**
+ * The card's price, written the way money is written.
+ *
+ * `card.price` arrives as a string because the index stores it as one, and
+ * `card.currency` as an ISO 4217 code because that is what a document carries.
+ * Rendered verbatim they read "3200 RUB": no grouping, the code where the
+ * symbol belongs, and the reader doing the arithmetic of where the thousands
+ * are. `Intl` knows all of that per locale, so the code goes in and the
+ * locale's own rendering comes out.
+ *
+ * Two ways this refuses to guess. A `price` that is not a finite number is
+ * passed through UNCHANGED — a doc type may store "on request", and turning
+ * that into `NaN` or into nothing loses what the seller wrote. A `currency`
+ * that is not a three-letter code (or one this runtime rejects) falls back to
+ * the plain grouped number plus the code, which is still better than the raw
+ * pair and never throws inside a render.
+ */
+export function formatCardPrice(format, price, currency) {
+    if (price === undefined)
+        return undefined;
+    const amount = Number(price);
+    if (!Number.isFinite(amount))
+        return price;
+    if (currency !== undefined && /^[A-Za-z]{3}$/.test(currency)) {
+        try {
+            const money = format.number(amount, {
+                style: "currency",
+                currency: currency.toUpperCase(),
+                currencyDisplay: "narrowSymbol",
+                maximumFractionDigits: Number.isInteger(amount) ? 0 : 2,
+            });
+            if (money !== null)
+                return money;
+        }
+        catch {
+            // An unsupported currency code: fall through to the grouped number.
+        }
+    }
+    const grouped = format.number(amount);
+    if (grouped === null)
+        return price;
+    return currency === undefined ? grouped : `${grouped} ${currency}`;
+}
+/**
+ * The DSA Art. 26 marking, as a token role.
+ *
+ * `warning` is the §68 dictionary's "look at this, it is not an error" role —
+ * the same one every skin in the fleet resolves from its own theme JSON. The
+ * previous `<Tag color="gold">` was an antd PRESET: it survived a retheme
+ * unchanged, so a deployment with its own palette had one component still
+ * painted in Ant Design's gold, and the one marking that must be recognisable
+ * everywhere was the one thing the design system did not own.
+ */
+const PROMOTED_TAG = {
+    alignSelf: "flex-start",
+    background: cssVar("warning-bg"),
+    // `warning`, not `warning-on`: the latter is the text colour for the SOLID
+    // warning fill (white on light), and over `warning-bg` it is cream on cream.
+    color: cssVar("warning"),
+    fontWeight: fontWeight.medium,
+    border: `1px solid ${cssVar("warning-border")}`,
+    borderRadius: radii.sm,
+    padding: `0 ${String(spacing[2])}px`,
+    fontSize: fontSize.xs.fontSize,
+    lineHeight: `${String(fontSize.md.lineHeight)}px`,
+    whiteSpace: "nowrap",
+};
+/** The photo's box: a 4:3 well the image fills, drawn before it loads. */
+const PHOTO = {
+    width: "100%",
+    aspectRatio: "4 / 3",
+    overflow: "hidden",
+    borderRadius: radii.md,
+    background: cssVar("surface-sunken"),
+};
+/**
+ * A plain `image_url` as the descriptor `<Image>` consumes.
+ *
+ * A doc type that stores a bare URL has no variant ladder and no dimensions —
+ * `source: "link"` is exactly that case, and `<Image>` degrades to the single
+ * URL rather than pretending to shop a tier. A doc type that stores the whole
+ * `StapelImage` snapshot (`card.image`) gets the ladder, blur-up and all.
+ */
+function cardImage(card) {
+    const rich = card["image"];
+    if (rich !== null && typeof rich === "object" && "url" in rich) {
+        return rich;
+    }
+    const url = text(card["image_url"]);
+    if (url === undefined)
+        return undefined;
+    return {
+        source: "link",
+        url,
+        mime: null,
+        width: null,
+        height: null,
+        aspect: null,
+        square: false,
+        preview_b64: null,
+        variants: [],
+    };
+}
+/**
+ * The whole card as ONE tap target.
+ *
+ * A catalogue row is a link — the person taps the picture, the title or the
+ * price and expects the same thing to happen. The card used to have no
+ * clickable anything at all: the entire result page of a storefront that had
+ * not passed `renderCard` was a wall of text with the tap target missing
+ * (class C-NOPRIMARY). `card.url` is the conventional field a doc type stores
+ * it in; without one the card stays exactly what it was, because inventing a
+ * destination is worse than not having one.
+ */
+const CARD_LINK = {
+    color: "inherit",
+    display: "block",
+    textDecoration: "none",
+};
 export function SearchResultCard(props) {
     const t = useT();
+    const format = useFormat();
     const card = props.item.card;
     const title = text(card["title"]) ?? t(SEARCH_I18N_KEYS.resultsUntitled);
-    const price = text(card["price"]);
-    const currency = text(card["currency"]);
+    const price = formatCardPrice(format, text(card["price"]), text(card["currency"]));
+    const href = text(card["url"]);
     const location = text(card["location"]);
     const distance = props.item.distance_km !== null
         ? t(SEARCH_I18N_KEYS.resultsDistanceKm, {
             km: props.item.distance_km.toFixed(1),
         })
         : undefined;
-    return (_jsx(Card, { size: "small", "data-testid": "search-result-card", "data-promoted": props.item.promoted ? "true" : "false", children: _jsxs(Flex, { vertical: true, gap: 4, children: [_jsxs(Flex, { justify: "space-between", align: "start", gap: 8, children: [_jsx(Typography.Text, { strong: true, children: title }), props.item.promoted && (_jsx(Tooltip, { title: t(SEARCH_I18N_KEYS.resultsPromotedHint), children: _jsx(Tag, { color: "gold", "data-testid": "search-result-promoted", children: t(SEARCH_I18N_KEYS.resultsPromoted) }) }))] }), price !== undefined && (_jsx(Typography.Text, { children: currency !== undefined ? `${price} ${currency}` : price })), (location !== undefined || distance !== undefined) && (_jsx(Typography.Text, { type: "secondary", children: [location, distance].filter((v) => v !== undefined).join(" · ") }))] }) }));
+    // Memoised on the two fields it reads: a fresh `meta` identity every render
+    // is a load `<Image>` has to decide is or is not the same one.
+    const image = useMemo(() => cardImage(card), [card]);
+    const body = (_jsxs(Flex, { vertical: true, gap: spacing[2], children: [image !== undefined && (_jsx("div", { style: PHOTO, "data-testid": "search-result-photo", children: _jsx(Image, { meta: image, alt: t(SEARCH_I18N_KEYS.resultsImageAlt, { title }), fit: "cover", style: { width: "100%", height: "100%" } }) })), _jsxs(Flex, { vertical: true, gap: spacing[1], children: [_jsx(Typography.Text, { strong: true, children: title }), price !== undefined && (_jsx(Typography.Text, { strong: true, style: { fontSize: fontSize.lg.fontSize }, "data-testid": "search-result-price", children: price })), (location !== undefined || distance !== undefined) && (_jsx(Typography.Text, { type: "secondary", children: [location, distance].filter((v) => v !== undefined).join(" · ") }))] })] }));
+    return (_jsx(Card, { size: "small", "data-testid": "search-result-card", "data-promoted": props.item.promoted ? "true" : "false", ...(href !== undefined ? { hoverable: true } : {}), styles: { body: { padding: spacing[3] } }, children: _jsxs(Flex, { vertical: true, gap: spacing[2], children: [href === undefined ? (body) : (_jsx("a", { href: href, style: CARD_LINK, "data-testid": "search-result-link", children: body })), props.item.promoted && (_jsxs(Flex, { vertical: true, gap: spacing[1], "data-testid": "search-result-promotion", children: [_jsx("span", { style: PROMOTED_TAG, "data-testid": "search-result-promoted", children: t(SEARCH_I18N_KEYS.resultsPromoted) }), _jsx(Typography.Text, { type: "secondary", style: { fontSize: fontSize.xs.fontSize }, "data-testid": "search-result-promoted-hint", children: t(SEARCH_I18N_KEYS.resultsPromotedHint) })] }))] }) }));
 }
 //# sourceMappingURL=SearchResultCard.js.map