@stapel/search-react 0.9.1 → 0.11.0

package/src/default/DegradationNotice.tsx

@@ -12,27 +12,34 @@
  *
  * ── Two deliberate ways NOT to shout ───────────────────────────────────────
  *
- * 1. **`exact_total` alone never raises a banner.** It is a count NUANCE, not
- *    a failed search: the rows are right, and the single consequence — that
- *    the total is a floor — is already spoken by the count as "N+". A warning
- *    box over a perfectly good result page teaches the reader that the page
- *    is broken, and a banner that cries wolf on every landing page is a
- *    banner nobody reads on the day `category_rollup` appears in it. Beside
- *    any other degradation it renders normally, because the list is then
- *    describing an answer that really is degraded. See
- *    {@link isCountNuanceOnly}.
+ * 1. **A degradation addressed to the OPERATOR never reaches the reader.**
+ *    `typo_tolerance` and `phrase_synonyms` both say, in the shipped ru copy,
+ *    "the search engine in use cannot do this" — a sentence about which
+ *    engine somebody licensed, printed at a person trying to buy a phone. It
+ *    is the same sentence on every query forever, which is what makes it
+ *    invisible by the day `category_rollup` shows up in the same box.
+ *    `exact_total` joins them: the count already says "N+".
+ *
+ *    Measured live on a classified board: a full-screen yellow "synonyms
+ *    were not substituted" between the sort control and the first card, on every
+ *    query, for every buyer. Note what the fix is NOT — the string was not
+ *    deleted and the kind was not special-cased. `readerFacing` names the
+ *    *audience*, so the next engine-capability literal is filtered by the
+ *    same rule instead of growing its own copy of this comment.
  * 2. **`variant`.** A catalogue page wants the banner; a landing page that
  *    shows six cards under a hero has no room for a warning box and passes
- *    `"inline"` (one quiet line) or `"off"`. `"off"` is a decision the
- *    CONTAINER makes about ITS surface — the notice stays the default, and
- *    nothing here silences a degradation for everyone.
+ *    `"inline"` (one quiet line) or `"off"`. `"debug"` is the operator's
+ *    view: everything, unfiltered, for a status page or a support tool.
+ *    `"off"` is a decision the CONTAINER makes about ITS surface — the
+ *    notice stays the default, and nothing here silences a reader-facing
+ *    degradation for everyone.
  */
 import type { ReactElement } from "react";
 import { Alert, Flex, Typography } from "antd";
 import { fontSize, spacing } from "@stapel/tokens";
 import { useT } from "@stapel/core";
 import type { SearchDegradation } from "../api/types.js";
-import { isCountNuanceOnly } from "../state/degradations.js";
+import { readerFacing } from "../state/degradations.js";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 
 /**
@@ -40,10 +47,12 @@ import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
  *
  * - `"banner"` (default) — an antd warning `Alert` with one line per item.
  * - `"inline"` — the same sentences as quiet secondary text, no box.
+ * - `"debug"` — every degradation including the operator's, for a status page
+ *   or a support tool. The one variant that does not filter by audience.
  * - `"off"` — nothing. For a surface where the notice does not belong at all;
  *   the container that turns it off owns saying so somewhere else.
  */
-export type DegradationNoticeVariant = "banner" | "inline" | "off";
+export type DegradationNoticeVariant = "banner" | "inline" | "debug" | "off";
 
 export interface DegradationNoticeProps {
   readonly degradations: readonly SearchDegradation[];
@@ -63,9 +72,10 @@ export function DegradationNotice(
   const t = useT();
   const variant: DegradationNoticeVariant = props.variant ?? "banner";
   if (variant === "off") return null;
-  if (props.degradations.length === 0) return null;
-  // A count nuance is not a degraded search — the count already says "N+".
-  if (isCountNuanceOnly(props.degradations)) return null;
+  // Everything, or only what this page's reader can act on.
+  const degradations =
+    variant === "debug" ? props.degradations : readerFacing(props.degradations);
+  if (degradations.length === 0) return null;
 
   const say = (degradation: SearchDegradation): string => {
     const slug = degradation.scorer;
@@ -82,7 +92,7 @@ export function DegradationNotice(
   // theme's warning tint, and grey body text on it measured under 3:1 in the
   // visual pass. Inside a coloured box the readable colour is the box's own
   // text colour, which is what a plain `<Typography.Text>` inherits.
-  const lines = props.degradations.map((degradation) => (
+  const lines = degradations.map((degradation) => (
     <li key={degradation.raw} data-degradation={degradation.raw}>
       <Typography.Text>{say(degradation)}</Typography.Text>
     </li>
@@ -95,7 +105,7 @@ export function DegradationNotice(
           {t(SEARCH_I18N_KEYS.degradedTitle)}
         </Typography.Text>
         <ul style={{ margin: 0, paddingInlineStart: spacing[5], fontSize: fontSize.xs.fontSize }}>
-          {props.degradations.map((degradation) => (
+          {degradations.map((degradation) => (
             <li key={degradation.raw} data-degradation={degradation.raw}>
               <Typography.Text type="secondary">{say(degradation)}</Typography.Text>
             </li>
@@ -110,7 +120,7 @@ export function DegradationNotice(
       type="warning"
       showIcon
       data-testid="search-degraded"
-      data-variant="banner"
+      data-variant={variant === "debug" ? "debug" : "banner"}
       title={t(SEARCH_I18N_KEYS.degradedTitle)}
       description={
         <ul style={{ margin: 0, paddingInlineStart: spacing[5] }}>{lines}</ul>

package/src/default/FacetPanelPane.tsx

@@ -306,13 +306,6 @@ function skippedNames(
 export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
   const t = useT();
   const { state } = useSearchState();
-  const ranges = buildRangeGroups({
-    state,
-    ...(props.categoryFeatures !== undefined
-      ? { categoryFeatures: props.categoryFeatures }
-      : {}),
-    t,
-  });
 
   return (
     <SkinTheme {...(props.mode !== undefined ? { mode: props.mode } : {})}>
@@ -323,7 +316,24 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
         {...(props.locale !== undefined ? { locale: props.locale } : {})}
         {...(props.enabled !== undefined ? { enabled: props.enabled } : {})}
       >
-        {(bag) => (
+        {(bag) => {
+          // Built INSIDE the bag, because which axes exist is a property of
+          // the ANSWER now: `facet_meta.core_ranges` names the core columns
+          // this server can actually filter on (`r.price`), and the corpus
+          // currency is read off the cards it just returned. Computed
+          // outside, the panel would have had to keep its own list of core
+          // slugs — which is how a board ends up offering a price filter
+          // against a server that answers zero for one.
+          const ranges = buildRangeGroups({
+            state,
+            ...(props.categoryFeatures !== undefined
+              ? { categoryFeatures: props.categoryFeatures }
+              : {}),
+            coreRanges: bag.coreRanges,
+            ...(bag.currency !== undefined ? { currency: bag.currency } : {}),
+            t,
+          });
+          return (
           <Flex vertical gap={spacing[3]} data-testid="search-facets">
             <Flex justify="space-between" align="center" gap={spacing[2]}>
               {props.heading === null ? (
@@ -360,6 +370,25 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
               {...(props.geoLabel !== undefined ? { label: props.geoLabel } : {})}
             />
 
+            {/* Price first. Every numeric row below it is an ATTRIBUTE the
+                category happens to declare — on the phone board this was
+                measured against, all seven of them were parcel dimensions
+                and wholesale packing. The one number a buyer narrows by is
+                the price, and `buildRangeGroups` puts the core axes first. */}
+            {ranges.length > 0 && (
+              <Flex vertical gap={spacing[3]} data-testid="search-ranges">
+                {ranges.map((group) => (
+                  <RangeFilterRow
+                    key={group.slug}
+                    group={group}
+                    onApply={bag.setRange}
+                  />
+                ))}
+              </Flex>
+            )}
+
+            {ranges.length > 0 && <Divider style={{ margin: 0 }} />}
+
             {/* Honesty flags, not failures: the counts ARE approximate and
                 those slugs WERE skipped, and a red box would teach a person
                 the page is broken. `ErrorAlert` is for a read that did not
@@ -383,20 +412,6 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
               />
             )}
 
-            {ranges.length > 0 && (
-              <Flex vertical gap={spacing[3]} data-testid="search-ranges">
-                {ranges.map((group) => (
-                  <RangeFilterRow
-                    key={group.slug}
-                    group={group}
-                    onApply={bag.setRange}
-                  />
-                ))}
-              </Flex>
-            )}
-
-            {ranges.length > 0 && <Divider style={{ margin: 0 }} />}
-
             <LoadList
               state={bag.state}
               testId="facets"
@@ -440,7 +455,8 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
               )}
             </LoadList>
           </Flex>
-        )}
+          );
+        }}
       </FacetPanel>
     </SkinTheme>
   );

package/src/default/FilterChips.tsx

@@ -49,13 +49,12 @@
  */
 import { useState } from "react";
 import type { CSSProperties, ReactElement, ReactNode } from "react";
-import { Button, Flex, Typography } from "antd";
+import { Button } from "antd";
 import { SkinDialog, useDialogSurface } from "@stapel/tokens-antd/skin";
-import { SlotPlaceholder, useT, useTPlural } from "@stapel/core";
+import { useT } from "@stapel/core";
 import { radii, spacing } from "@stapel/tokens";
 import type { FeatureDef } from "@stapel/attributes-react";
 import { useFacetPanel } from "../headless/FacetPanel.js";
-import { useAppliedCount } from "../headless/useAppliedCount.js";
 import { useSearchState } from "../headless/SearchStateProvider.js";
 import { buildRangeGroups } from "../state/ranges.js";
 import type { FacetGroup } from "../state/facets.js";
@@ -64,6 +63,7 @@ import { FacetGroupControl } from "./FacetGroupControl.js";
 import { RangeFilterRow } from "./RangeFilterRow.js";
 import { geoSummaryFallback } from "./FacetPanelPane.js";
 import type { GeoFilterSlotProps } from "./FacetPanelPane.js";
+import { CHIP_GEO_TEST_IDS, GeoSheet, useApplyLabel } from "./geoSheet.js";
 
 /** The class the scroller carries, for {@link chipRowCss}. */
 export const CHIP_ROW_CLASS = "stapel-filter-chips";
@@ -142,23 +142,27 @@ function chipLabel(group: FacetGroup, t: (key: string, p?: Record<string, unknow
 
 export function FilterChips(props: FilterChipsProps): ReactElement {
   const t = useT();
-  const tPlural = useTPlural();
-  const { state, setGeo } = useSearchState();
+  const { state } = useSearchState();
   const bag = useFacetPanel({
     ...(props.categoryFeatures !== undefined
       ? { categoryFeatures: props.categoryFeatures }
       : {}),
     ...(props.locale !== undefined ? { locale: props.locale } : {}),
   });
-  const applied = useAppliedCount();
+  const applyLabel = useApplyLabel();
   const surface = useDialogSurface();
   const [open, setOpen] = useState<OpenChip>(null);
 
+  // Same source as the panel's rows, so the phone chip row and the desktop
+  // panel cannot disagree about which axes exist: the core columns come from
+  // the ANSWER (`facet_meta.core_ranges`) and the currency off its cards.
   const ranges = buildRangeGroups({
     state,
     ...(props.categoryFeatures !== undefined
       ? { categoryFeatures: props.categoryFeatures }
       : {}),
+    coreRanges: bag.coreRanges,
+    ...(bag.currency !== undefined ? { currency: bag.currency } : {}),
     t,
   });
   const groups =
@@ -166,19 +170,6 @@ export function FilterChips(props: FilterChipsProps): ReactElement {
       ? bag.state.data.filter((group) => group.options.length > 0)
       : [];
 
-  // The same sentence the panel's own commit button says, for the same reason:
-  // the results are BEHIND this sheet, so the button that closes it is the
-  // only place a person learns what their choice did.
-  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 }
-        );
-
   const close = (): void => {
     setOpen(null);
   };
@@ -338,43 +329,18 @@ export function FilterChips(props: FilterChipsProps): ReactElement {
               );
         })()}
 
-      {open === "geo" &&
-        sheetFor(
-          "geo",
-          t(SEARCH_I18N_KEYS.geoTitle),
-          <Flex vertical gap={spacing[3]}>
-            {/* SETTING a centre needs a geocoder, which is `geo-react`'s and
-                the deployment's. ADJUSTING or CLEARING one the URL already
-                carries does not — which is why the chip still opens on a
-                shared link with no slot filled, and why the absence of the
-                slot is NAMED in development rather than left as a gap under
-                the sheet's title. */}
-            {props.renderGeoFilter?.({
-              value: geo,
-              onChange: (next) => {
-                setGeo(next);
-              },
-            }) ?? <SlotPlaceholder name="renderGeoFilter" data-testid="search-chip-geo-slot" />}
-            {geo !== undefined && (
-              <>
-                <Typography.Text type="secondary" data-testid="search-chip-geo-summary">
-                  {geoChipLabel}
-                </Typography.Text>
-                <Button
-                  style={{ alignSelf: "flex-start" }}
-                  data-testid="search-chip-geo-clear"
-                  data-analytics="none"
-                  data-analytics-reason="a filter is a read, not a flow step"
-                  onClick={() => {
-                    setGeo(null);
-                  }}
-                >
-                  {t(SEARCH_I18N_KEYS.geoClear)}
-                </Button>
-              </>
-            )}
-          </Flex>
-        )}
+      {/* The LOCATION sheet is shared with `<LocationSummaryLine>` — the ref
+          puts a location control on both rows, and they must land in the same
+          place. See `geoSheet.tsx`. */}
+      <GeoSheet
+        open={open === "geo"}
+        onClose={close}
+        testIds={CHIP_GEO_TEST_IDS}
+        {...(props.renderGeoFilter !== undefined
+          ? { renderGeoFilter: props.renderGeoFilter }
+          : {})}
+        {...(props.geoLabel !== undefined ? { geoLabel: props.geoLabel } : {})}
+      />
     </>
   );
 }

package/src/default/LocationSummaryLine.tsx

@@ -0,0 +1,187 @@
+/**
+ * `<LocationSummaryLine>` — the row above a phone SERP's chips: WHERE this
+ * search is looking on the left, and how much has been narrowed on the right.
+ *
+ * ## Why the location gets a line of its own, above the chips
+ *
+ * It is already a chip (`<FilterChips>` draws one), and on the refs it is a
+ * ROW as well, and that is not redundancy. A chip row scrolls: the geo chip is
+ * one of eight and it is off screen the moment somebody has scrolled to
+ * "Year". Location is the one constraint on a classified that changes what a
+ * result MEANS rather than narrowing a set — "1 200 €" is a different offer in
+ * the next city — so it is the one that must be readable without scrolling
+ * anything. The two controls open the same sheet (`geoSheet.tsx`), so tapping
+ * either lands in the same place.
+ *
+ * ## Never a coordinate
+ *
+ * This pair holds a `lat` and a `lon` and has no way on earth to turn them
+ * into "Berlin Mitte" — that is a geocoder, and a search package that grew one
+ * to say a nicer sentence would have taken on the whole of `geo-react`. So the
+ * line says the name it was HANDED (`geoLabel`), or that a place is chosen,
+ * and adds the radius, which is a number this pair does own. With nothing
+ * applied it says the search is looking everywhere, which is the truth and is
+ * also the invitation to narrow it.
+ *
+ * ## The right-hand affordance carries a COUNT, and the chip row carries a dot
+ *
+ * `<FilterChips>`'s leading chip is a 32px circle: a number inside it is a
+ * number nobody reads, so it shows a dot. This is a full-width row with a word
+ * on it, so the badge has room to say HOW MANY constraints are applied — which
+ * is the difference between "something is filtered" and "four things are, and
+ * that is why there are three results". Both read the same
+ * `activeFilters` off the URL state; neither invents a second counter.
+ */
+import { useState } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import { Badge, Button, Flex } from "antd";
+import { useT } from "@stapel/core";
+import { spacing } from "@stapel/tokens";
+import { useSearchState } from "../headless/SearchStateProvider.js";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+import { geoSummaryFallback } from "./FacetPanelPane.js";
+import type { GeoFilterSlotProps } from "./FacetPanelPane.js";
+import { GeoSheet, SUMMARY_GEO_TEST_IDS } from "./geoSheet.js";
+
+/** The row. Both ends are text buttons, so the row reads as a line of type
+ * rather than as two controls bolted onto a results page. */
+const ROW: CSSProperties = { width: "100%" };
+
+/** Each end shrinks before it wraps; the location is the half that may
+ * ellipsis, because a long place name must not push "Filters" off screen. */
+const LOCATION: CSSProperties = {
+  minWidth: 0,
+  paddingInline: 0,
+  textAlign: "start",
+};
+
+export interface LocationSummaryLineProps {
+  /**
+   * The location control the sheet opens onto — the same slot the panel and
+   * the chip row take. Without it the sheet still opens (a location the URL
+   * already carries can be widened and cleared with no geocoder), and the
+   * absence is NAMED in development rather than left as a blank sheet.
+   */
+  readonly renderGeoFilter?: (slot: GeoFilterSlotProps) => ReactNode;
+  /**
+   * What the current place is CALLED. See the file header: this pair prints
+   * the name it is handed or admits it does not know one, never the numbers.
+   */
+  readonly geoLabel?: ReactNode;
+  /**
+   * Open the whole filter panel — the same contract `<FilterChips.onOpenAll>`
+   * states, and conventionally the same callback: the SURFACE owns that sheet
+   * because the surface is what it covers.
+   */
+  readonly onOpenAll: () => void;
+}
+
+/** A map pin in `currentColor` — the house convention: an inline monochrome
+ * SVG, no icon-font dependency, and it inherits the theme rather than carrying
+ * a colour. `aria-hidden` because the text beside it is the name. */
+function PinGlyph(): ReactElement {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-hidden="true"
+    >
+      <path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z" />
+      <circle cx="12" cy="10" r="2.6" />
+    </svg>
+  );
+}
+
+export function LocationSummaryLine(
+  props: LocationSummaryLineProps
+): ReactElement {
+  const t = useT();
+  const { state, activeFilters } = useSearchState();
+  const [open, setOpen] = useState(false);
+  const geo = state.geo;
+
+  // The radius is a NUMBER this pair owns (`radius_km` in the URL), so unlike
+  // the place's name it can be stated without asking anyone. A bbox has no
+  // radius to state; a centre without one is "around here" and says nothing
+  // rather than inventing a default the server never applied.
+  const radius =
+    geo !== undefined && geo.kind === "center" && geo.radiusKm !== undefined
+      ? t(SEARCH_I18N_KEYS.geoRadiusKm, { km: geo.radiusKm })
+      : undefined;
+
+  const where: ReactNode =
+    geo === undefined
+      ? t(SEARCH_I18N_KEYS.geoEverywhere)
+      : (props.geoLabel ?? geoSummaryFallback(geo, t));
+
+  return (
+    <>
+      <Flex
+        align="center"
+        justify="space-between"
+        gap={spacing[2]}
+        style={ROW}
+        data-testid="search-location-summary"
+        data-geo={geo === undefined ? "off" : "on"}
+      >
+        <Button
+          type="link"
+          style={LOCATION}
+          icon={<PinGlyph />}
+          data-testid="search-location-open"
+          data-analytics="none"
+          data-analytics-reason="opening the location sheet is a read, not a flow step"
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          {where}
+          {radius !== undefined && (
+            <span data-testid="search-location-radius">
+              {" · "}
+              {radius}
+            </span>
+          )}
+        </Button>
+
+        {/* The count, not a dot: this row has the width to say how many. */}
+        <Badge
+          count={activeFilters}
+          size="small"
+          data-testid="search-location-filters-badge"
+        >
+          <Button
+            type="link"
+            style={{ paddingInline: 0 }}
+            data-testid="search-location-filters"
+            data-active={activeFilters > 0 ? "true" : "false"}
+            data-analytics="none"
+            data-analytics-reason="opening the filter sheet is a read, not a flow step"
+            onClick={props.onOpenAll}
+          >
+            {t(SEARCH_I18N_KEYS.filtersAll)}
+          </Button>
+        </Badge>
+      </Flex>
+
+      <GeoSheet
+        open={open}
+        onClose={() => {
+          setOpen(false);
+        }}
+        testIds={SUMMARY_GEO_TEST_IDS}
+        {...(props.renderGeoFilter !== undefined
+          ? { renderGeoFilter: props.renderGeoFilter }
+          : {})}
+        {...(props.geoLabel !== undefined ? { geoLabel: props.geoLabel } : {})}
+      />
+    </>
+  );
+}

package/src/default/RangeFilterRow.tsx

@@ -18,7 +18,7 @@
 import { useRef, useState } from "react";
 import type { ReactElement } from "react";
 import { Button, Flex, InputNumber, Typography } from "antd";
-import { actionAvailable, actionBlocked, useT } from "@stapel/core";
+import { actionAvailable, actionBlocked, useFormat, useT } from "@stapel/core";
 import type { ActionAvailability } from "@stapel/core";
 import { GatedButton } from "@stapel/tokens-antd/skin";
 import { spacing } from "@stapel/tokens";
@@ -40,8 +40,39 @@ function toDraft(value: string | undefined): string {
   return value ?? "";
 }
 
+/**
+ * The suffix a bound field carries: a currency SYMBOL for a money axis, the
+ * category's own unit string otherwise.
+ *
+ * `group.currency` is an ISO 4217 code and `RUB` beside an input is not what
+ * money looks like anywhere; `Intl` knows the symbol per locale, so the code
+ * goes in and «₽» comes out. An unsupported code falls back to the code
+ * itself — still better than nothing, and it never throws inside a render.
+ */
+function boundSuffix(
+  format: ReturnType<typeof useFormat>,
+  group: RangeGroup
+): string | undefined {
+  if (group.currency === undefined) return group.unit;
+  if (!/^[A-Za-z]{3}$/.test(group.currency)) return group.currency;
+  try {
+    const sample = format.number(0, {
+      style: "currency",
+      currency: group.currency.toUpperCase(),
+      currencyDisplay: "narrowSymbol",
+      maximumFractionDigits: 0,
+    });
+    if (sample === null) return group.currency;
+    const symbol = sample.replace(/[\s\u00a0\u202f0-9.,]/g, "");
+    return symbol.length > 0 ? symbol : group.currency;
+  } catch {
+    return group.currency;
+  }
+}
+
 export function RangeFilterRow(props: RangeFilterRowProps): ReactElement {
   const t = useT();
+  const format = useFormat();
   const { group } = props;
   const [from, setFrom] = useState(toDraft(group.from));
   const [to, setTo] = useState(toDraft(group.to));
@@ -71,7 +102,23 @@ export function RangeFilterRow(props: RangeFilterRowProps): ReactElement {
     props.onApply(group.slug, empty ? null : draft);
   };
 
-  const unit = group.unit === undefined ? "" : ` ${group.unit}`;
+  const suffix = boundSuffix(format, group);
+  const unit = suffix === undefined ? "" : ` ${suffix}`;
+  // Thousands grouping inside the field, because a price is read in
+  // thousands: `119000` is a wall of digits and `119 000` is a number. The
+  // parser is digits-only, so whatever the locale's separator turns out to
+  // be, the value that leaves the control is still the one the URL carries.
+  const grouping =
+    group.core
+      ? {
+          formatter: (value: string | number | undefined): string =>
+            value === undefined || value === ""
+              ? ""
+              : (format.number(Number(value)) ?? String(value)),
+          parser: (value: string | undefined): string =>
+            (value ?? "").replace(/[^\d.-]/g, ""),
+        }
+      : {};
 
   return (
     <Flex
@@ -79,8 +126,17 @@ export function RangeFilterRow(props: RangeFilterRowProps): ReactElement {
       gap={spacing[1]}
       data-testid={`facet-range-${group.slug}`}
       data-active={group.active ? "true" : "false"}
+      data-core={group.core ? "true" : "false"}
     >
-      <Typography.Text strong>{group.label}</Typography.Text>
+      {/* The unit lives in the HEADING, not in the fields. It used to live
+          only in an aria-label, so a sighted reader of a money row saw two
+          bare integers and had to infer the currency from the results. antd
+          deprecated `addonAfter` on InputNumber in favour of `Space.Compact`,
+          and two addons plus an Apply button do not survive a 390px row —
+          "Price, RUB" states it once and costs no width. */}
+      <Typography.Text strong data-testid={`facet-range-${group.slug}-label`}>
+        {suffix === undefined ? group.label : `${group.label}, ${suffix}`}
+      </Typography.Text>
       <Flex gap={spacing[2]} align="center" wrap>
         <InputNumber
           value={from === "" ? null : Number(from)}
@@ -90,6 +146,7 @@ export function RangeFilterRow(props: RangeFilterRowProps): ReactElement {
           })}${unit}`}
           data-testid={`facet-range-${group.slug}-from`}
           style={{ minWidth: RANGE_FIELD_MIN_WIDTH }}
+          {...grouping}
           {...(group.min !== undefined ? { min: group.min } : {})}
           {...(group.max !== undefined ? { max: group.max } : {})}
           {...(group.step !== undefined ? { step: group.step } : {})}
@@ -106,6 +163,7 @@ export function RangeFilterRow(props: RangeFilterRowProps): ReactElement {
           })}${unit}`}
           data-testid={`facet-range-${group.slug}-to`}
           style={{ minWidth: RANGE_FIELD_MIN_WIDTH }}
+          {...grouping}
           {...(group.min !== undefined ? { min: group.min } : {})}
           {...(group.max !== undefined ? { max: group.max } : {})}
           {...(group.step !== undefined ? { step: group.step } : {})}