@stapel/search-react 0.20.0 → 0.22.0

package/src/api/types.ts

@@ -13,17 +13,85 @@ import type { components } from "./generated/schema.js";
 /** The generated schema table — the one source of truth for wire shapes. */
 export type Schemas = components["schemas"];
 
-/** `GET /query` 200 — the whole envelope. */
-export type SearchResponse = Schemas["SearchResponse"];
+/**
+ * One slug's captions: the GROUP's own name, and the words for its values.
+ *
+ * `label` is the group heading the server resolved from the category's
+ * feature definition, in the request's own language. It is the only source
+ * that always exists — `categoryFeatures` is an optional slot a live
+ * classified board never filled, and without it every heading in the panel
+ * was the raw index slug. `null` is the server saying it has no name for the
+ * slug either; ABSENT is a server too old to send one, and both read the same
+ * way here (fall through to the schema).
+ *
+ * WHAT THE GENERATOR LOST: the field is newer than this pair's pinned
+ * `schema.json`, so it is declared here as optional-and-nullable rather than
+ * regenerated into a shape a deployed older server does not send.
+ */
+export type FacetLabels = Schemas["FacetLabels"] & {
+  readonly label?: string | null;
+};
+
+/** `facet_labels` as a whole: `{slug: {label, translatable, values}}`. */
+export type FacetLabelsMap = Readonly<Record<string, FacetLabels>>;
+
+/** `GET /query` 200 — the whole envelope. Corrected in two places: see
+ * {@link FacetMeta} and {@link FacetLabels}. */
+export type SearchResponse = Omit<
+  Schemas["SearchResponse"],
+  "facet_meta" | "facet_labels"
+> & {
+  readonly facet_meta: FacetMeta;
+  readonly facet_labels: FacetLabelsMap;
+};
 
 /** One result row. `promoted` is present on EVERY item under EVERY sort — a
  * mandatory marking (DSA Art. 26), not an optional field, which is why the
  * card slot's contract carries it and why the default skin renders it. */
 export type SearchItem = Schemas["SearchItem"];
 
-/** The honesty block beside the counts: `approximate`, `candidates`,
- * `counted`, `skipped`. Rendered, never swallowed (spec §4.2). */
-export type FacetMeta = Schemas["FacetMeta"];
+/**
+ * One group the counter COUNTED and then held back, because its buckets
+ * describe too little of the result set (`FACET_MIN_COVERAGE`).
+ *
+ * The existence of this list is what makes "this search offers no filters"
+ * a false sentence whenever it is not empty (D175).
+ */
+export interface FacetWithheldGroup {
+  readonly slug: string;
+  /** Sum of that group's bucket counts — how much of the set it describes. */
+  readonly coverage: number;
+  /** Size of the candidate set `coverage` is a fraction of. */
+  readonly candidates: number;
+}
+
+/** One category the candidate set is made of. */
+export interface FacetCategoryCount {
+  /** The slash-joined id path (`"32/149/163"`) — the SAME string the
+   * `category` filter and `SearchQueryState.category` already take, so a
+   * panel can offer it as a filter without translating anything. */
+  readonly category: string;
+  readonly count: number;
+}
+
+/**
+ * The honesty block beside the counts: `approximate`, `candidates`,
+ * `counted`, `skipped`, and (stapel-search 0.12.0+) where the facet plan came
+ * from. Rendered, never swallowed (spec §4.2).
+ *
+ * WHAT THE GENERATOR LOST: drf-spectacular describes `withheld` and
+ * `categories` as bare `object` arrays, so the generated members are
+ * `{[key: string]: unknown}[]` — the two fields a panel has to read
+ * field-by-field are the two it cannot. Both are corrected here to the
+ * documented row shapes; nothing else about `FacetMeta` is hand-written.
+ */
+export type FacetMeta = Omit<
+  Schemas["FacetMeta"],
+  "withheld" | "categories"
+> & {
+  readonly withheld: readonly FacetWithheldGroup[];
+  readonly categories: readonly FacetCategoryCount[];
+};
 
 /** `GET /suggest` 200, as the CURRENT generated schema describes it. */
 export type SuggestResponse = Schemas["SuggestResponse"];
@@ -259,6 +327,10 @@ export type SearchDegradationKind =
   | "exact_total"
   | "exact_facet_counts"
   | "category_rollup"
+  /** The engine has no `category_counts` verb, so the categories the result
+   * set is made of are unknown and no evidence facet plan could be drawn.
+   * An empty filter panel then means "we do not know", not "there are none". */
+  | "facet_plan_evidence"
   | "scorer"
   | "unknown";
 

package/src/default/FacetGroupControl.tsx

@@ -19,6 +19,11 @@
  *  3. **A 60-option facet is not a list, it is a wall.** Every catalogue has
  *     one — brand, model, city — and printing all of it pushes every group
  *     under it off the screen.
+ *  4. **A vocabulary is not a long list, it is a DICTIONARY.** 418 car makes
+ *     behind "Show all (418)" is a control whose only mode is "read all of
+ *     it": the busiest values, a box, and the rest reachable by typing is the
+ *     only shape that answers "I want a Toyota" in one gesture. See
+ *     {@link isDictionaryFacet}.
  *
  * ── The presentation is DERIVED, never configured here ────────────────────
  *
@@ -59,12 +64,17 @@
  */
 import { useState } from "react";
 import type { CSSProperties, ReactElement } from "react";
-import { Button, Checkbox, Flex, Typography } from "antd";
+import { Button, Checkbox, Flex, Input, Typography } from "antd";
 import { useT } from "@stapel/core";
 import { radii, spacing } from "@stapel/tokens";
-import { featureConfig, featureType } from "@stapel/attributes-react";
+import {
+  VOCABULARY_BACKED_TYPES,
+  featureConfig,
+  featureType,
+} from "@stapel/attributes-react";
 import type { FeatureDef } from "@stapel/attributes-react";
 import type { FacetGroup, FacetOption } from "../state/facets.js";
+import { translitPrefixMatch } from "../state/translit.js";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 
 /**
@@ -77,8 +87,19 @@ import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
  */
 export const FACET_VISIBLE_OPTIONS = 8;
 
-/** The three shapes a facet group takes. */
-export type FacetGroupShape = "segmented" | "nested" | "checkbox";
+/**
+ * From how many values a group stops being a list and becomes a DICTIONARY —
+ * the same eight, because it is the same fold: past it the group is drawn as
+ * its busiest values plus a box that searches the rest.
+ */
+export const FACET_DICTIONARY_THRESHOLD: number = FACET_VISIBLE_OPTIONS;
+
+/** The four shapes a facet group takes. */
+export type FacetGroupShape =
+  | "segmented"
+  | "nested"
+  | "checkbox"
+  | "dictionary";
 
 /** The option rows of a group, already nested where the schema nests them. */
 export interface FacetOptionNode {
@@ -126,17 +147,52 @@ function singleChoice(feature: FeatureDef | undefined): boolean {
 }
 
 /**
- * Which of the three shapes a group takes.
+ * Is this group a DICTIONARY — a vocabulary's level, too long to scroll?
+ *
+ * Two ways to be one, because the schema is an optional slot and the live
+ * case is the one where it is empty:
+ *
+ *  - the def types the slug `ref_select`/`ref_hierarchical_select`, i.e. its
+ *    config is a POINTER into a vocabulary and there was never an option
+ *    table to draw;
+ *  - there is NO def at all and the answer came back with more values than a
+ *    fold. At a live classified's cars branch the storefront passed an empty
+ *    feature list, so the 418 makes arrived as an unnamed, untyped group of
+ *    418 checkboxes behind "Show all (418)". A box is the only control that
+ *    answers that, and refusing to draw one because the schema is missing
+ *    punishes the buyer for the wiring.
+ *
+ * Either way it takes more than {@link FACET_DICTIONARY_THRESHOLD} EVIDENCE
+ * buckets — values the answer actually counted. A zero-filled option table or
+ * a schema-only tail is a list a person can already read, and a box over it
+ * would search for values no document carries.
+ */
+export function isDictionaryFacet(group: FacetGroup): boolean {
+  const buckets = group.options.filter(
+    (option) => option.count !== null && option.count > 0
+  ).length;
+  if (buckets <= FACET_DICTIONARY_THRESHOLD) return false;
+  const feature = group.feature;
+  if (feature === undefined) return true;
+  const type = featureType(feature);
+  return type !== undefined && VOCABULARY_BACKED_TYPES.includes(type);
+}
+
+/**
+ * Which of the four shapes a group takes.
  *
  * Order matters: a hierarchical facet is nested even when it is single-choice,
- * because losing the tree costs more than losing the pills.
+ * because losing the tree costs more than losing the pills; and a dictionary
+ * is a dictionary before it is a checkbox list, because the checkbox list is
+ * the shape it was drawn as when nobody could pick a make.
  */
 export function facetGroupShape(group: FacetGroup): FacetGroupShape {
   const feature = group.feature;
   if (feature !== undefined && featureType(feature) === "hierarchical_select") {
     return "nested";
   }
-  return singleChoice(feature) ? "segmented" : "checkbox";
+  if (singleChoice(feature)) return "segmented";
+  return isDictionaryFacet(group) ? "dictionary" : "checkbox";
 }
 
 /**
@@ -327,6 +383,142 @@ function ChevronGlyph(props: { readonly open: boolean }): ReactElement {
   );
 }
 
+/**
+ * The list a dictionary scrolls in. A vocabulary level is 418 makes: without
+ * a ceiling the group alone is longer than the rail, and the box that filters
+ * it scrolls off the top of the panel while you type into it.
+ */
+const DICTIONARY_LIST: CSSProperties = {
+  maxBlockSize: 320,
+  overflowY: "auto",
+  // The scroll must not clip a focus ring against the panel's edge.
+  paddingInlineEnd: spacing[1],
+};
+
+/**
+ * A dictionary group: what is CHOSEN, a box, and the busiest values.
+ *
+ * ── Why the chosen values are their own block ─────────────────────────────
+ *
+ * They are the only rows that are not free to leave. A person who filtered by
+ * `Toyota` and then typed `bmw` must still be able to see — and undo — the
+ * filter that is narrowing what they are reading; a checkbox that scrolls out
+ * of the fold takes its own off-switch with it. So the chosen rows sit above
+ * the box, out of the filtered list entirely, and the list below never
+ * repeats them.
+ *
+ * ── The box filters LOCALLY, and matches across alphabets ─────────────────
+ *
+ * The buckets are already on the client — they arrived with the answer — so
+ * the box is a filter over an array and not a request per keystroke.
+ * `translitPrefixMatch` is what makes it usable in a catalogue whose values
+ * are Latin and whose buyers type Cyrillic: a Cyrillic "timberlend" finds
+ * `Timberland`.
+ * It is presentation, exactly like the panel's own search: nothing here
+ * touches the URL, because what a person typed to FIND a filter is not part
+ * of the search they would share.
+ */
+function DictionaryBody(props: {
+  readonly group: FacetGroup;
+  readonly onToggle: (slug: string, value: string) => void;
+  /** How many values before the box has to be used. */
+  readonly visible: number;
+}): ReactElement {
+  const t = useT();
+  const { group } = props;
+  const [needle, setNeedle] = useState("");
+  const [expanded, setExpanded] = useState(false);
+
+  const chosen = group.options.filter((option) => option.selected);
+  const rest = [...group.options.filter((option) => !option.selected)].sort(
+    (a, b) => (b.count ?? 0) - (a.count ?? 0)
+  );
+  const query = needle.trim();
+  const matched =
+    query === ""
+      ? rest
+      : rest.filter(
+          (option) =>
+            translitPrefixMatch(query, option.label) ||
+            translitPrefixMatch(query, option.value)
+        );
+  // The fold only exists while nothing is typed: a query has already narrowed
+  // the list, and hiding its tail behind "Show all" would hide the answer.
+  const folded = query === "" && !expanded && matched.length > props.visible;
+  const shown = folded ? matched.slice(0, props.visible) : matched;
+
+  return (
+    <Flex vertical gap={spacing[1]} data-testid={`facet-dictionary-${group.slug}`}>
+      {chosen.length > 0 && (
+        <Flex
+          vertical
+          gap={spacing[1]}
+          data-testid={`facet-dictionary-chosen-${group.slug}`}
+        >
+          <Typography.Text type="secondary">
+            {t(SEARCH_I18N_KEYS.facetsDictionaryChosen)}
+          </Typography.Text>
+          {chosen.map((option) => (
+            <CheckboxRow
+              key={option.value}
+              group={group}
+              node={{ option, depth: 0 }}
+              onToggle={props.onToggle}
+            />
+          ))}
+        </Flex>
+      )}
+      <Input
+        allowClear
+        size="small"
+        value={needle}
+        placeholder={t(SEARCH_I18N_KEYS.facetsDictionarySearch)}
+        aria-label={t(SEARCH_I18N_KEYS.facetsDictionarySearch)}
+        data-testid={`facet-dictionary-search-${group.slug}`}
+        onChange={(event) => {
+          setNeedle(event.target.value);
+        }}
+      />
+      {shown.length === 0 ? (
+        <Typography.Text
+          type="secondary"
+          data-testid={`facet-dictionary-empty-${group.slug}`}
+        >
+          {t(SEARCH_I18N_KEYS.facetsDictionaryEmpty)}
+        </Typography.Text>
+      ) : (
+        <Flex vertical gap={spacing[1]} style={DICTIONARY_LIST}>
+          {shown.map((option) => (
+            <CheckboxRow
+              key={option.value}
+              group={group}
+              node={{ option, depth: 0 }}
+              onToggle={props.onToggle}
+            />
+          ))}
+        </Flex>
+      )}
+      {query === "" && matched.length > props.visible && (
+        <Button
+          type="link"
+          size="small"
+          style={{ alignSelf: "flex-start", paddingInline: 0 }}
+          data-testid={`facet-more-${group.slug}`}
+          data-analytics="none"
+          data-analytics-reason="expanding a filter group is a read, not a flow step"
+          onClick={() => {
+            setExpanded((was) => !was);
+          }}
+        >
+          {expanded
+            ? t(SEARCH_I18N_KEYS.facetsShowLess)
+            : t(SEARCH_I18N_KEYS.facetsShowAll, { count: matched.length })}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
 export interface FacetGroupControlProps {
   readonly group: FacetGroup;
   readonly onToggle: (slug: string, value: string) => void;
@@ -386,6 +578,11 @@ export function FacetGroupControl(props: FacetGroupControlProps): ReactElement {
       data-testid={`facet-group-${group.slug}`}
       data-counted={group.counted ? "true" : "false"}
       data-shape={shape}
+      // Who named this heading — `none` means the raw slug is on screen
+      // because the answer sent no label and the schema defines none. It is
+      // drawn (a heading a person cannot read still beats none) and it is
+      // MARKED, so a storefront's own test can refuse to ship it.
+      data-label-source={group.labelSource}
     >
       {props.heading !== false &&
         (disclosure ? (
@@ -421,7 +618,15 @@ export function FacetGroupControl(props: FacetGroupControlProps): ReactElement {
       {/* Closed means NOT RENDERED, not hidden: a hundred `display:none`
           checkboxes are still a hundred stops for a screen reader, and the
           measured rail held 118 of them. */}
-      {open && (
+      {open && shape === "dictionary" && (
+        <DictionaryBody
+          group={group}
+          onToggle={props.onToggle}
+          visible={limit ?? FACET_VISIBLE_OPTIONS}
+        />
+      )}
+
+      {open && shape !== "dictionary" && (
         <>
           {shape === "segmented" ? (
             <Flex wrap gap={spacing[2]}>

package/src/default/FacetPanelPane.tsx

@@ -91,6 +91,7 @@ import { featureName } from "@stapel/attributes-react";
 import type { FeatureDef } from "@stapel/attributes-react";
 import type { SearchGeo } from "../api/types.js";
 import { FacetPanel } from "../headless/FacetPanel.js";
+import type { FacetPanelBag } from "../headless/FacetPanel.js";
 import type { FacetLabelResolver } from "../headless/useFacetLabels.js";
 import { useSearchState } from "../headless/SearchStateProvider.js";
 import { useAppliedCount } from "../headless/useAppliedCount.js";
@@ -421,6 +422,40 @@ function skippedNames(
     .join(", ");
 }
 
+/**
+ * The empty arm of the panel — the ONE place "this search offers no filters"
+ * may be said, and the two answers that forbid it (D175).
+ *
+ * A group list of zero is not the same claim. `withheld` names groups the
+ * counter counted and then held back for describing too little of the result
+ * set: they exist, so the honest line is how many. `planUnavailable` means
+ * the server could not work a plan out at all — the reader hears that from
+ * `<DegradationNotice>`, and this arm's only job is to not contradict it.
+ *
+ * A COMPONENT rather than a ternary inline in `empty=`, because `LoadList`
+ * reads a nullish `empty` as "no arm given" and draws its own default, which
+ * is the sentence again. An element that renders `null` says nothing; a
+ * `null` prop says it louder.
+ */
+function FacetsEmptyArm(props: { readonly bag: FacetPanelBag }): ReactElement | null {
+  const t = useT();
+  const tPlural = useTPlural();
+  const withheld = props.bag.withheld.length;
+  if (withheld > 0) {
+    return (
+      <EmptyState
+        compact
+        title={tPlural(SEARCH_I18N_KEYS.facetsWithheld, { count: withheld })}
+        testId="facets-withheld"
+      />
+    );
+  }
+  if (props.bag.planUnavailable) return null;
+  return (
+    <EmptyState compact title={t(SEARCH_I18N_KEYS.facetsEmpty)} testId="facets-empty" />
+  );
+}
+
 export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
   const t = useT();
   const { state } = useSearchState();
@@ -566,7 +601,7 @@ export function FacetPanelPane(props: FacetPanelPaneProps): ReactElement {
               state={bag.state}
               testId="facets"
               skeletonRows={4}
-              empty={<EmptyState compact title={t(SEARCH_I18N_KEYS.facetsEmpty)} testId="facets-empty" />}
+              empty={<FacetsEmptyArm bag={bag} />}
               failed={(error) => (
                 <ErrorAlert
                   testId="facets-failed"

package/src/default/LocationSummaryLine.tsx

@@ -94,6 +94,9 @@ import { GeoSheet, SUMMARY_GEO_TEST_IDS } from "./geoSheet.js";
 
 /** The class the row carries, for {@link locationLineCss}. */
 export const LOCATION_LINE_CLASS = "stapel-search-location-line";
+/** The class the ONE location control carries — the place and the offer,
+ * inside a single box. See {@link locationLineCss} for what it fixes. */
+export const LOCATION_LINE_GROUP_CLASS = "stapel-search-location-line-group";
 /** The class the shrinking half carries. */
 export const LOCATION_LINE_WHERE_CLASS = "stapel-search-location-line-where";
 /** The class the truncating label carries. */
@@ -117,6 +120,7 @@ export function locationLineCss(): string {
   const where = `.${LOCATION_LINE_WHERE_CLASS}`;
   const label = `.${LOCATION_LINE_LABEL_CLASS}`;
   const end = `.${LOCATION_LINE_END_CLASS}`;
+  const group = `.${LOCATION_LINE_GROUP_CLASS}`;
   return [
     // `min-width:0` on the row too: a flex item's default `min-width:auto`
     // is what makes a nested flex row refuse to shrink at all.
@@ -139,6 +143,35 @@ export function locationLineCss(): string {
       `text-overflow:ellipsis;white-space:nowrap}`,
     // The word a person is looking for never loses a pixel to a place name.
     `${end}{flex:0 0 auto}`,
+    // ── ONE control, not two red links at opposite ends of the page ────────
+    //
+    // Measured on a live 1440px leaf: the row is 992px wide, "📍 Searching
+    // everywhere" sat at x=370 and "Near me · Within 25 km" at x=776, both
+    // drawn in the same brand red, with ~400px of air between them and
+    // nothing — no border, no ground, no heading — saying they were about the
+    // same thing. Two identical-looking links at opposite ends of a strip are
+    // read as two unrelated controls, which is what they looked like.
+    //
+    // So the place and the offer share ONE box with a border and a ground,
+    // sitting together at the leading edge, with a hairline between them: the
+    // eye gets a single object that says where this search is looking and
+    // offers the one move that would change it. The border comes from the
+    // role token, so it is right in both themes by construction.
+    // `min-inline-size:0` explicitly, and `flex-shrink` on the box rather
+    // than on its contents: a flex item's `min-width:auto` refuses to go
+    // below its own content, so without this the group pushed the filters
+    // door off the end of a 390px row instead of letting the place name give
+    // way — which is the half that can.
+    `${group}{display:flex;align-items:stretch;flex:0 1 auto;min-inline-size:0;` +
+      `border:1px solid ${cssVar("border")};border-radius:${String(radii.md)}px;` +
+      `background:${cssVar("surface-raised")};overflow:hidden}`,
+    // The two halves are separated by the box's own line, never by a gap: a
+    // gap inside a bordered group reads as two groups again.
+    `${group}>*+*{border-inline-start:1px solid ${cssVar("border")}}`,
+    `${group}>*{border-radius:0}`,
+    // Both halves pay for their own breathing room; the antd Button's inline
+    // padding is zeroed above so the box, not the button, sets the measure.
+    `${group}>*{padding-inline:${String(spacing[2])}px}`,
   ].join("");
 }
 
@@ -149,7 +182,9 @@ const ROW: CSSProperties = { width: "100%" };
 /** The shrinking half. The flex rules it needs live in the hoisted sheet
  * (they have to reach antd's own wrapper span); this is the chrome. */
 const LOCATION: CSSProperties = {
-  paddingInline: 0,
+  // No `paddingInline` here: the group's sheet sets it for both halves, and
+  // an inline style would beat the sheet and leave one half flush against the
+  // border while the other breathed.
   textAlign: "start",
 };
 
@@ -159,7 +194,7 @@ const PIN: CSSProperties = { flex: "0 0 auto", display: "inline-flex" };
 
 /** The offer. It never shrinks: it is three words and a number, and half of
  * "Near me" is not an offer. */
-const OFFER: CSSProperties = { flex: "0 0 auto", paddingInline: 0 };
+const OFFER: CSSProperties = { flex: "0 0 auto" };
 
 /**
  * The count, IN the flow.
@@ -239,7 +274,8 @@ export function LocationSummaryLine(
   props: LocationSummaryLineProps
 ): ReactElement {
   const t = useT();
-  const { state, activeFilters, geoOffer, acceptGeoOffer } = useSearchState();
+  const { state, activeFilters, geoOffer, geoIsOffer, acceptGeoOffer } =
+    useSearchState();
   const [open, setOpen] = useState(false);
   const geo = state.geo;
 
@@ -257,13 +293,25 @@ export function LocationSummaryLine(
   // the question), so this row never shows an offer beside a place.
   const offerRadius =
     geoOffer !== undefined && geoOffer.kind === "center" && geoOffer.radiusKm !== undefined
-      ? t(SEARCH_I18N_KEYS.geoRadiusKm, { km: geoOffer.radiusKm })
+      ? t(SEARCH_I18N_KEYS.geoRadiusKmShort, { km: geoOffer.radiusKm })
       : undefined;
 
+  // What the line CALLS the place it is looking at.
+  //
+  // The host's name wins — it is the only one that can be checked by a reader
+  // — then the fact the provider holds, and only then the shape of the
+  // constraint. The middle arm is D184's second half: pressing "Near me"
+  // turned this line into "A chosen place on the map" for a person who had
+  // never opened a map. `geoIsOffer` is the provider reporting how the search
+  // came to be here, rather than this file inferring it from three numbers
+  // that look the same whatever produced them.
   const where: ReactNode =
     geo === undefined
       ? t(SEARCH_I18N_KEYS.geoEverywhere)
-      : (props.geoLabel ?? geoSummaryFallback(geo, t));
+      : (props.geoLabel ??
+        (geoIsOffer
+          ? t(SEARCH_I18N_KEYS.geoNearYou)
+          : geoSummaryFallback(geo, t)));
 
   return (
     <>
@@ -279,60 +327,73 @@ export function LocationSummaryLine(
         data-testid="search-location-summary"
         data-geo={geo === undefined ? "off" : "on"}
       >
-        {/* The glyph is rendered as a CHILD rather than through antd's `icon`
-            prop: the icon slot sits outside the wrapper span, so the label
-            beside it could not be given a min-width of its own — and a label
-            that cannot shrink is a label that overflows. */}
-        <Button
-          type="link"
-          style={LOCATION}
-          className={LOCATION_LINE_WHERE_CLASS}
-          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);
-          }}
+        {/* ONE control: where this search is looking, and — while the
+            question is still open — the one move that would change it. See
+            `locationLineCss` for the measurement that made them one box. */}
+        <div
+          className={LOCATION_LINE_GROUP_CLASS}
+          data-testid="search-location-group"
         >
-          <span style={PIN}>
-            <PinGlyph />
-          </span>
-          <span
-            className={LOCATION_LINE_LABEL_CLASS}
-            data-testid="search-location-label"
-          >
-            {where}
-            {radius !== undefined && (
-              <span data-testid="search-location-radius">
-                {" · "}
-                {radius}
-              </span>
-            )}
-          </span>
-        </Button>
+          {/* The glyph is rendered as a CHILD rather than through antd's
+              `icon` prop: the icon slot sits outside the wrapper span, so the
+              label beside it could not be given a min-width of its own — and
+              a label that cannot shrink is a label that overflows.
 
-        {/* The offer, and nothing is applied until it is pressed. Drawn only
-            when the host has a position to offer AND the search carries no
-            location of its own — the provider enforces the second half, so
-            this is one condition, not two that could disagree. */}
-        {geoOffer !== undefined && (
+              `type="text"`, not `type="link"`: this half is a STATEMENT about
+              where the search is looking, and painting it the brand colour
+              made it indistinguishable from the offer beside it. The offer
+              keeps the colour, because the offer is the action. */}
           <Button
-            type="link"
-            style={OFFER}
-            data-testid="search-location-offer"
+            type="text"
+            style={LOCATION}
+            className={LOCATION_LINE_WHERE_CLASS}
+            data-testid="search-location-open"
             data-analytics="none"
-            data-analytics-reason="applying a filter the person pressed is search state, and search state is the URL"
-            onClick={acceptGeoOffer}
+            data-analytics-reason="opening the location sheet is a read, not a flow step"
+            onClick={() => {
+              setOpen(true);
+            }}
           >
-            {t(SEARCH_I18N_KEYS.geoNearMe)}
-            {offerRadius !== undefined && (
-              <span data-testid="search-location-offer-radius">
-                {" · "}
-                {offerRadius}
-              </span>
-            )}
+            <span style={PIN}>
+              <PinGlyph />
+            </span>
+            <span
+              className={LOCATION_LINE_LABEL_CLASS}
+              data-testid="search-location-label"
+            >
+              {where}
+              {radius !== undefined && (
+                <span data-testid="search-location-radius">
+                  {" · "}
+                  {radius}
+                </span>
+              )}
+            </span>
           </Button>
-        )}
+
+          {/* The offer, and nothing is applied until it is pressed. Drawn only
+              when the host has a position to offer AND the search carries no
+              location of its own — the provider enforces the second half, so
+              this is one condition, not two that could disagree. */}
+          {geoOffer !== undefined && (
+            <Button
+              type="link"
+              style={OFFER}
+              data-testid="search-location-offer"
+              data-analytics="none"
+              data-analytics-reason="applying a filter the person pressed is search state, and search state is the URL"
+              onClick={acceptGeoOffer}
+            >
+              {t(SEARCH_I18N_KEYS.geoNearMe)}
+              {offerRadius !== undefined && (
+                <span data-testid="search-location-offer-radius">
+                  {" · "}
+                  {offerRadius}
+                </span>
+              )}
+            </Button>
+          )}
+        </div>
 
         {/* "Filters", not "All filters": this end of the row shares 390px
             with a place name that can run to fifteen characters, and the word