@stapel/search-react 0.24.0 → 0.25.0

package/src/default/OtherCategoriesLine.tsx

@@ -0,0 +1,238 @@
+/**
+ * `<OtherCategoriesLine>` — "Search in other categories: Cars 12 · Buses 3 ·
+ * Motorhomes 1 · …", on ONE line, drawn from the answer that drew the cards.
+ *
+ * ## What it replaces
+ *
+ * A full-width block under the results with one row per category, fetched
+ * separately and arriving after the page had settled. Two defects in one
+ * control:
+ *
+ *  - **it was tall.** Fourteen sections became fourteen rows — a screen and a
+ *    half of navigation under a list of listings, for information that fits
+ *    in a sentence.
+ *  - **it was late.** A second request meant the block appeared a beat after
+ *    the cards and PUSHED them, on the one screen where a person has already
+ *    started reading. The information was not even new: `/query` had already
+ *    answered with `facet_meta.categories`, and the type-ahead had shown the
+ *    same sections a keystroke earlier.
+ *
+ * This line renders in the SAME frame as the results, out of the same
+ * response ({@link useOtherCategories}), so there is nothing to arrive late.
+ * The single case that still needs a request — an empty result set, whose
+ * candidate list is empty by definition — draws into a slot whose height is
+ * reserved from the first frame, so the answer lands without moving anything.
+ *
+ * ## Pressing an entry narrows the search; it does not leave it
+ *
+ * The count beside a name is the count for THIS QUERY in that section — the
+ * server's `facet_meta.categories`. A link to the bare category feed would
+ * show a different, larger number, so the caption would be a lie one click
+ * later. Each entry therefore writes the `category` parameter of the search
+ * already on screen, keeping the query: press "Cars 12" and twelve results
+ * follow. That is a state change, so each entry is a real `<button>` and not
+ * an anchor.
+ *
+ * ## Two rows on a phone, at most
+ *
+ * The cap is halved on the sheet surface ({@link OTHER_CATEGORIES_PHONE_LIMIT}),
+ * and the collapsed line is clamped to two rows besides — a cap counts
+ * entries, and it is name LENGTH that turns a line into a paragraph. Expanding
+ * is the person's own press, and an expanded line is allowed to be as tall as
+ * what they asked for.
+ */
+import { Fragment, useState } from "react";
+import type { CSSProperties, ReactElement } from "react";
+import { Button, Typography } from "antd";
+import { useDialogSurface } from "@stapel/tokens-antd/skin";
+import { useT } from "@stapel/core";
+import { cssVar } from "@stapel/tokens";
+import { useSearchState } from "../headless/SearchStateProvider.js";
+import {
+  OTHER_CATEGORIES_LIMIT,
+  OTHER_CATEGORIES_PHONE_LIMIT,
+  otherCategoryLeaf,
+  useOtherCategories,
+} from "../headless/useOtherCategories.js";
+import type { OtherCategoryRow } from "../headless/useOtherCategories.js";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+
+/**
+ * The height the empty-result slot holds before its answer arrives.
+ *
+ * One text line. Reserving it is the whole difference between "the sections
+ * appeared" and "the sections pushed the page", and it is reserved whether the
+ * request ends with rows or with none.
+ */
+export const OTHER_CATEGORIES_SLOT_MIN_HEIGHT = 24;
+
+/** Names an id path the pair cannot name on its own. Returning `undefined`
+ * drops the row rather than printing a number at a person. */
+export type OtherCategoryNamer = (category: string) => string | undefined;
+
+export interface OtherCategoriesLineProps {
+  /** How many entries before the fold (default {@link OTHER_CATEGORIES_LIMIT}). */
+  readonly limit?: number;
+  /** The same, on the phone surface (default
+   * {@link OTHER_CATEGORIES_PHONE_LIMIT}). */
+  readonly phoneLimit?: number;
+  /**
+   * What a category id path is CALLED.
+   *
+   * The pair holds `"140/145"` and has no catalogue: naming it is the host's,
+   * exactly as `categoryLabel` is for the chip. Without this the line still
+   * draws every row the server named (a `/suggest` answer already in the
+   * cache, or the empty-result path) and every path whose last segment is a
+   * slug — and drops the rest, because "163 · 149" is not a sentence.
+   */
+  readonly categoryName?: OtherCategoryNamer;
+  /** Skip the read entirely — mirrors `<SearchResultsPane enabled>`. */
+  readonly enabled?: boolean;
+}
+
+const ENTRY: CSSProperties = {
+  padding: 0,
+  height: "auto",
+  // The line is text: an entry has to sit ON the baseline of the words around
+  // it rather than in a button-shaped box of its own.
+  verticalAlign: "baseline",
+  fontSize: "inherit",
+};
+
+const COUNT: CSSProperties = { color: cssVar("text-subtle") };
+
+/** How many rows the collapsed phone line may occupy. */
+export const OTHER_CATEGORIES_PHONE_ROWS = 2;
+
+/** The class the clamp is hung on. */
+export const OTHER_CATEGORIES_CLASS = "stapel-search-other-categories";
+
+/** The `href` the hoisted sheet is deduplicated by. */
+export const OTHER_CATEGORIES_STYLE_HREF = "stapel-search-other-categories";
+
+/**
+ * The clamp — two rows, collapsed, on the phone.
+ *
+ * A SHEET rather than an inline style, for the same reason the rail's
+ * scrollbar is one: `-webkit-line-clamp` needs `display:-webkit-box` and
+ * `-webkit-box-orient` together, and a vendor property set through the DOM
+ * style object is dropped by anything that does not already know it — which
+ * is how a clamp silently stops clamping.
+ */
+export function otherCategoriesCss(): string {
+  const clamped = `.${OTHER_CATEGORIES_CLASS}--clamped`;
+  return [
+    `${clamped}{display:-webkit-box;-webkit-box-orient:vertical;`,
+    `-webkit-line-clamp:${String(OTHER_CATEGORIES_PHONE_ROWS)};overflow:hidden}`,
+  ].join("");
+}
+
+interface Entry {
+  readonly row: OtherCategoryRow;
+  readonly name: string;
+}
+
+export function OtherCategoriesLine(
+  props: OtherCategoriesLineProps
+): ReactElement | null {
+  const t = useT();
+  const { setCategory } = useSearchState();
+  const bag = useOtherCategories(
+    props.enabled !== undefined ? { enabled: props.enabled } : {}
+  );
+  const surface = useDialogSurface();
+  const phone = surface === "sheet";
+  const [expanded, setExpanded] = useState(false);
+
+  const limit = phone
+    ? (props.phoneLimit ?? OTHER_CATEGORIES_PHONE_LIMIT)
+    : (props.limit ?? OTHER_CATEGORIES_LIMIT);
+
+  const entries: Entry[] = [];
+  for (const row of bag.rows) {
+    const name =
+      props.categoryName?.(row.category) ?? row.name ?? otherCategoryLeaf(row.category);
+    if (name !== undefined) entries.push({ row, name });
+  }
+
+  const shown = expanded ? entries : entries.slice(0, limit);
+  const hidden = entries.length - shown.length;
+
+  if (entries.length === 0) {
+    // Nothing to say, and nothing coming: say nothing. A reserved band under a
+    // page that will never fill it is the same hole an empty filter column was.
+    if (!bag.reserving) return null;
+    return (
+      <div
+        data-testid="search-other-categories"
+        data-reserved="on"
+        data-source={bag.source}
+        style={{ minBlockSize: OTHER_CATEGORIES_SLOT_MIN_HEIGHT }}
+      />
+    );
+  }
+
+  return (
+    <Typography.Text
+      type="secondary"
+      data-testid="search-other-categories"
+      data-source={bag.source}
+      data-shown={shown.length}
+      {...(bag.reserving ? { "data-reserved": "on" } : {})}
+      className={
+        phone && !expanded
+          ? `${OTHER_CATEGORIES_CLASS} ${OTHER_CATEGORIES_CLASS}--clamped`
+          : OTHER_CATEGORIES_CLASS
+      }
+      style={
+        bag.reserving ? { minBlockSize: OTHER_CATEGORIES_SLOT_MIN_HEIGHT } : {}
+      }
+    >
+      <style href={OTHER_CATEGORIES_STYLE_HREF} precedence="default">
+        {otherCategoriesCss()}
+      </style>
+      {t(SEARCH_I18N_KEYS.otherCategoriesLabel)}{" "}
+      {shown.map((entry, index) => (
+        <Fragment key={entry.row.category}>
+          {index > 0 && <span aria-hidden="true"> · </span>}
+          <Button
+            type="link"
+            size="small"
+            style={ENTRY}
+            data-testid="search-other-category"
+            data-category={entry.row.category}
+            data-analytics="none"
+            data-analytics-reason="narrowing a search is a read, not a flow step"
+            aria-label={t(SEARCH_I18N_KEYS.otherCategoriesNarrow, {
+              name: entry.name,
+            })}
+            onClick={() => {
+              setCategory(entry.row.category);
+            }}
+          >
+            {entry.name} <span style={COUNT}>{entry.row.count}</span>
+          </Button>
+        </Fragment>
+      ))}
+      {hidden > 0 && (
+        <>
+          <span aria-hidden="true"> · </span>
+          <Button
+            type="link"
+            size="small"
+            style={ENTRY}
+            data-testid="search-other-categories-more"
+            data-analytics="none"
+            data-analytics-reason="unfolding a line is a read, not a flow step"
+            aria-expanded={false}
+            onClick={() => {
+              setExpanded(true);
+            }}
+          >
+            {t(SEARCH_I18N_KEYS.otherCategoriesMore, { count: hidden })}
+          </Button>
+        </>
+      )}
+    </Typography.Text>
+  );
+}

package/src/default/SearchPage.tsx

@@ -86,6 +86,7 @@ import { FilterChips } from "./FilterChips.js";
 import { LocationSummaryLine } from "./LocationSummaryLine.js";
 import { PageSizeSelect } from "./PageSizeSelect.js";
 import { SearchBox } from "./SearchBox.js";
+import type { OtherCategoryNamer } from "./OtherCategoriesLine.js";
 import { SearchResultsPane } from "./SearchResultsPane.js";
 import type { SearchResultsWrapper } from "./SearchResultsPane.js";
 import { SortSelect } from "./SortSelect.js";
@@ -320,6 +321,25 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
    * ask.
    */
   readonly appliedChips?: boolean | "desktop";
+  /**
+   * Draw "Search in other categories: Cars 12 · Buses 3 · …" above the
+   * results — one line, from the SAME response the cards came from.
+   *
+   * It replaces the shape a storefront had built by hand: a full-width block
+   * of one row per category, fetched from `/suggest` after the page had
+   * settled and pushing everything below it when it landed. Here the rows are
+   * `facet_meta.categories`, which the answer already carried, so with results
+   * on screen the line costs no request and cannot arrive late. Only an EMPTY
+   * result set asks `/suggest`, into a slot whose height is reserved from the
+   * first frame.
+   *
+   * Opt-in, and `categoryName` is what makes it useful: the pair holds id
+   * paths and no catalogue — see {@link OtherCategoriesLineProps.categoryName}.
+   */
+  readonly otherCategories?: boolean;
+  /** What a category id path is CALLED, for the line above. The same question
+   * `categoryLabel` answers for the chip, asked once per row. */
+  readonly categoryName?: OtherCategoryNamer;
   /** What this surface calls its result list. See
    * {@link SearchResultsPaneProps.heading}. */
   readonly resultsHeading?: ReactNode;
@@ -417,6 +437,8 @@ interface SearchPageBodyProps {
   readonly filtersHeader?: ReactNode;
   readonly resultsHeader?: ReactNode;
   readonly appliedChips?: boolean | "desktop";
+  readonly otherCategories?: boolean;
+  readonly categoryName?: OtherCategoryNamer;
   readonly resultsHeading?: ReactNode;
   readonly degradationNotice?: DegradationNoticeVariant;
   readonly filtersLayout?: SearchFiltersLayout;
@@ -586,6 +608,12 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
       {...(view.layout !== undefined ? { layout: view.layout } : {})}
       {...(props.renderCard !== undefined ? { renderCard: props.renderCard } : {})}
       {...(props.footer !== undefined ? { footer: props.footer } : {})}
+      {...(props.otherCategories !== undefined
+        ? { otherCategories: props.otherCategories }
+        : {})}
+      {...(props.categoryName !== undefined
+        ? { categoryName: props.categoryName }
+        : {})}
       {...(props.resultsHeading !== undefined
         ? { heading: props.resultsHeading }
         : {})}
@@ -763,6 +791,8 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     filtersHeader,
     resultsHeader,
     appliedChips,
+    otherCategories,
+    categoryName,
     resultsHeading,
     degradationNotice,
     filtersLayout,
@@ -798,6 +828,8 @@ export function SearchPage(props: SearchPageProps): ReactElement {
           {...(filtersHeader !== undefined ? { filtersHeader } : {})}
           {...(resultsHeader !== undefined ? { resultsHeader } : {})}
           {...(appliedChips !== undefined ? { appliedChips } : {})}
+          {...(otherCategories !== undefined ? { otherCategories } : {})}
+          {...(categoryName !== undefined ? { categoryName } : {})}
           {...(resultsHeading !== undefined ? { resultsHeading } : {})}
           {...(degradationNotice !== undefined ? { degradationNotice } : {})}
           {...(filtersLayout !== undefined ? { filtersLayout } : {})}

package/src/default/SearchResultsPane.tsx

@@ -46,6 +46,8 @@ import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 import { DegradationNotice } from "./DegradationNotice.js";
 import { EmptyExits } from "./EmptyExits.js";
 import type { DegradationNoticeVariant } from "./DegradationNotice.js";
+import { OtherCategoriesLine } from "./OtherCategoriesLine.js";
+import type { OtherCategoryNamer } from "./OtherCategoriesLine.js";
 import { SearchResultCard } from "./SearchResultCard.js";
 import type { SearchCardRenderer } from "./SearchResultCard.js";
 import type { SearchResultsLayout } from "./ViewSwitch.js";
@@ -261,6 +263,20 @@ export interface SearchResultsPaneProps extends ThemeModeProp {
    * this pair offers the slot and never the tree.
    */
   readonly renderEmptyExits?: () => ReactNode;
+  /**
+   * Draw "Search in other categories: Cars 12 · Buses 3 · …" above the
+   * results — the sections THIS answer is made of, one line, from the same
+   * response (`<OtherCategoriesLine>`).
+   *
+   * Opt-in, because the rows are id PATHS and naming them is the host's
+   * (`categoryName`): a deployment that passes neither gets the line only for
+   * the paths the server itself named, which on a slug-less catalogue is
+   * none. Where it is on, it costs no request while there are results.
+   */
+  readonly otherCategories?: boolean;
+  /** What a category id path is CALLED, for the line above — see
+   * {@link OtherCategoriesLineProps.categoryName}. */
+  readonly categoryName?: OtherCategoryNamer;
 }
 
 function Count(props: { bag: SearchResultsBag }): ReactElement | null {
@@ -375,6 +391,18 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
               scorerName={scorerName}
             />
 
+            {/* ABOVE the results and in the SAME frame as them. Under them
+                and asynchronously is where it was, and both halves of that
+                pushed a page a person had started reading. */}
+            {props.otherCategories === true && (
+              <OtherCategoriesLine
+                {...(props.enabled !== undefined ? { enabled: props.enabled } : {})}
+                {...(props.categoryName !== undefined
+                  ? { categoryName: props.categoryName }
+                  : {})}
+              />
+            )}
+
             <LoadList
               state={bag.state}
               testId="search"

package/src/default/index.ts

@@ -48,6 +48,19 @@ export {
 } from "./SearchPage.js";
 export type { SearchPageProps, SearchFiltersLayout } from "./SearchPage.js";
 
+export {
+  OtherCategoriesLine,
+  OTHER_CATEGORIES_CLASS,
+  OTHER_CATEGORIES_PHONE_ROWS,
+  OTHER_CATEGORIES_SLOT_MIN_HEIGHT,
+  OTHER_CATEGORIES_STYLE_HREF,
+  otherCategoriesCss,
+} from "./OtherCategoriesLine.js";
+export type {
+  OtherCategoriesLineProps,
+  OtherCategoryNamer,
+} from "./OtherCategoriesLine.js";
+
 export { SearchResultsPane, RESULTS_MAX_WIDTH } from "./SearchResultsPane.js";
 export type {
   SearchResultsPaneProps,

package/src/headless/useOtherCategories.ts

@@ -0,0 +1,193 @@
+/**
+ * "The same query, in another section" — the categories THIS answer is made
+ * of, read out of the answer that drew the cards.
+ *
+ * ## What it replaces
+ *
+ * A storefront drew this as a full-width block under the results: one row per
+ * category, fetched from `/suggest` AFTER the page had settled, so a tall
+ * panel appeared a beat late and pushed everything a person was already
+ * reading. Both halves were avoidable. The block was tall where one line
+ * says the same thing, and the request was a second ask for something the
+ * page already had: `/query` answers with `facet_meta.categories` — `{path,
+ * count}` for every category the candidate set contains — and that is
+ * exactly the list the block was printing.
+ *
+ * So the rows come from the SEARCH response. No request of this hook's own
+ * while there are results, and therefore nothing to arrive late.
+ *
+ * ## The one case that DOES earn a request
+ *
+ * An empty result set has no candidates, so `facet_meta.categories` is empty
+ * too — and that is precisely the screen where "this word exists in these
+ * sections" is worth the most. There, and only there, `/suggest` is asked.
+ * The bag says so through {@link OtherCategoriesBag.reserving}, so a surface
+ * can hold the row's height from the first frame instead of letting the
+ * answer push the page a second time.
+ *
+ * ## Names come from the cache, not from a request
+ *
+ * `facet_meta.categories` carries id PATHS and counts, never names — the
+ * catalogue belongs to `categories-react`. Three sources are tried, in order:
+ *
+ *  1. the host's resolver (a surface prop), which is the only one that can
+ *     name an id path with certainty;
+ *  2. the `/suggest` answer ALREADY IN THE QUERY CACHE — the type-ahead asked
+ *     about this same word a keystroke earlier, and its rows carry the
+ *     server's own names. `useSuggest` with `enabled: false` hands back a
+ *     cached answer and fires nothing, so this costs no request;
+ *  3. the path's last segment, when it is a slug rather than a number.
+ *
+ * A row none of the three can name is DROPPED rather than printed as "163" —
+ * the same rule `categoryLeaf` states for the category chip.
+ */
+import type { SearchResponse, SuggestCategory } from "../api/types.js";
+import { useSearchQuery, useSuggest } from "../model/queries.js";
+import { offerableCategories } from "./useSearchBox.js";
+import { useSearchState } from "./SearchStateProvider.js";
+
+/** How many entries the line prints before it folds the rest. */
+export const OTHER_CATEGORIES_LIMIT = 8;
+
+/**
+ * The phone's cap.
+ *
+ * Half the desktop's, because the requirement is a LINE and at 390px eight
+ * entries are not one — they are the block this replaces, wearing a comma.
+ * Four short section names plus the fold marker are the two rows a phone can
+ * spend on a navigation aid above a list of cards.
+ */
+export const OTHER_CATEGORIES_PHONE_LIMIT = 4;
+
+/** One category the current answer reached, with the count that answer gives it. */
+export interface OtherCategoryRow {
+  /** The slash-joined id path — the same string the `category` filter takes,
+   * so narrowing to it needs no translation and no tree. */
+  readonly category: string;
+  /** Documents matching THIS query that live there. Scoped to the query, which
+   * is why narrowing the search is the honest destination and the bare
+   * category feed is not: the feed would show a different number. */
+  readonly count: number;
+  /** The server's own name, when this row came from `/suggest` or when a
+   * cached suggest answer named the same path. */
+  readonly name?: string;
+  /** Display names root→leaf, when the server sent them. */
+  readonly path?: readonly string[];
+}
+
+export interface OtherCategoriesBag {
+  /** Every row, uncapped and in the order the line should print them. Capping
+   * is a decision about the SURFACE (a phone takes fewer), so it is not made
+   * here. */
+  readonly rows: readonly OtherCategoryRow[];
+  /**
+   * Where the rows came from. `"results"` — the search response itself, drawn
+   * in the same frame as the cards. `"suggest"` — the empty-result path, the
+   * only one with a request behind it. `"none"` — nothing to offer.
+   */
+  readonly source: "results" | "suggest" | "none";
+  /**
+   * The empty-result path is active, so a row is coming from a request that
+   * has not landed (or landed empty). A surface keeps the height either way:
+   * space reserved from the first frame is space nothing can push.
+   */
+  readonly reserving: boolean;
+  /** That request is in flight right now. */
+  readonly pending: boolean;
+}
+
+const NO_ROWS: readonly OtherCategoryRow[] = [];
+
+/** The path's last segment, when it names something — never a bare id. */
+export function otherCategoryLeaf(category: string): string | undefined {
+  const parts = category.split("/").filter((part) => part.length > 0);
+  const leaf = parts[parts.length - 1];
+  if (leaf === undefined || /^\d+$/.test(leaf)) return undefined;
+  return leaf;
+}
+
+/** The rows the ANSWER carries, busiest first and without the section the
+ * search is already in. */
+function rowsFromResponse(
+  answer: SearchResponse | undefined,
+  applied: string | undefined,
+  named: ReadonlyMap<string, SuggestCategory>
+): readonly OtherCategoryRow[] {
+  const meta = answer?.facet_meta.categories ?? [];
+  const rows = meta
+    // "Other" than the one the search is in. Descendants stay: narrowing from
+    // a branch to one of its leaves is a different section and the move this
+    // line exists for.
+    .filter((row) => row.category !== applied)
+    .map((row) => {
+      const match = named.get(row.category);
+      return {
+        category: row.category,
+        count: row.count,
+        ...(match !== undefined ? { name: match.name, path: match.path } : {}),
+      };
+    });
+  // The server documents "busiest first" and the cap has to take the busiest
+  // eight; asserting the order here is cheaper than trusting it and being
+  // wrong about which eight a person sees.
+  return [...rows].sort((a, b) =>
+    b.count === a.count ? a.category.localeCompare(b.category) : b.count - a.count
+  );
+}
+
+export function useOtherCategories(
+  options: { readonly enabled?: boolean } = {}
+): OtherCategoriesBag {
+  const { state } = useSearchState();
+  const enabled = options.enabled ?? true;
+
+  // The SAME query the results pane runs: identical key, identical cache
+  // entry, no second request. This hook can therefore be mounted anywhere
+  // under the provider without the envelope having to be threaded to it.
+  const query = useSearchQuery(state, { enabled });
+  const answer = query.data;
+
+  // Ready AND empty. `answer === undefined` is "still loading", which is not
+  // an empty result and must not spend a request.
+  const resultsEmpty = enabled && answer !== undefined && answer.items.length === 0;
+
+  // `enabled: false` still returns whatever the box already put in the cache
+  // and asks nothing — which is how a page WITH results gets the server's
+  // names for free. A page WITHOUT results turns the same hook into the one
+  // request this feature ever makes.
+  const suggest = useSuggest({ type: state.type, q: state.q, enabled: resultsEmpty });
+  // Through the pair's own reader, which is where "this server sent no
+  // categories key at all" is already distinguished from "nothing matched".
+  const suggested = offerableCategories(suggest.data);
+  const named = new Map(suggested.map((row) => [row.category, row]));
+
+  const fromResults = rowsFromResponse(answer, state.category, named);
+
+  const pending = resultsEmpty && suggest.isLoading && suggest.fetchStatus === "fetching";
+
+  if (fromResults.length > 0) {
+    return { rows: fromResults, source: "results", reserving: false, pending: false };
+  }
+
+  if (resultsEmpty) {
+    // The server's rank order is kept as sent: `/suggest` ranks by match grade
+    // and stock before count, and re-sorting by count here would throw that
+    // away for a number that is not what ranked them.
+    const rows = suggested
+      .filter((row) => row.category !== state.category)
+      .map((row) => ({
+        category: row.category,
+        count: row.count,
+        name: row.name,
+        path: row.path,
+      }));
+    return {
+      rows,
+      source: rows.length > 0 ? "suggest" : "none",
+      reserving: true,
+      pending,
+    };
+  }
+
+  return { rows: NO_ROWS, source: "none", reserving: false, pending: false };
+}

package/src/i18n/es.ts

@@ -131,6 +131,10 @@ export const searchI18nBundleEs: I18nDictionary = {
   "search.empty.widen_radius": "Buscar en un radio de {km} km",
   "search.empty.anywhere": "Buscar en todas partes",
   "search.empty.drop_filter": "Sin «{name}»",
+
+  "search.other_categories.label": "Buscar en otras categorías:",
+  "search.other_categories.narrow": "Buscar en {name}",
+  "search.other_categories.more": "{count} más",
   "search.category.title": "Categoría",
   "search.category.clear": "Buscar en todo el catálogo",
   "search.category.current": "Buscando dentro de {path}",

package/src/i18n/keys.ts

@@ -282,6 +282,33 @@ export const SEARCH_I18N_KEYS = {
   /** "Without {name}" — one applied filter, named as its own chip names it. */
   emptyDropFilter: "search.empty.drop_filter",
 
+  // ── the same query, in another section (one line, from the answer) ───────
+  /**
+   * The line's lead-in — "Search in other categories:". It ends in a colon
+   * because what follows is a list on the same line, and a translator who is
+   * shown the string without one has no way to know that.
+   *
+   * Not `search.box.categories` ("Sections", the type-ahead's group heading):
+   * that one titles a menu of destinations while a person types, this one
+   * introduces a row of narrowings beside a result list. Same noun, two
+   * surfaces, and the languages that decline it need both.
+   */
+  otherCategoriesLabel: "search.other_categories.label",
+  /**
+   * The accessible name of one entry. The visible caption is "Cars 12" — a
+   * name and a number, which says nothing about what pressing it DOES. This
+   * does: it narrows the search that is already on screen, and it keeps the
+   * query, which is why the number beside it stays true afterwards.
+   */
+  otherCategoriesNarrow: "search.other_categories.narrow",
+  /**
+   * The fold at the end of the line: how many sections it did not print.
+   * `{count}` is a bare number after a word, not a counted noun in a
+   * sentence, so this is not a plural family — the same shape as
+   * `facetsAllFilters` and `filtersChipOverflow`.
+   */
+  otherCategoriesMore: "search.other_categories.more",
+
   // ── category (a host slot, plus the control that removes it) ─────────────
   categoryTitle: "search.category.title",
   categoryClear: "search.category.clear",
@@ -573,6 +600,11 @@ export const searchI18nBundleEn: Record<string, string> = {
   "search.empty.widen_radius": "Search within {km} km",
   "search.empty.anywhere": "Search anywhere",
   "search.empty.drop_filter": "Without {name}",
+
+  "search.other_categories.label": "Search in other categories:",
+  "search.other_categories.narrow": "Search in {name}",
+  "search.other_categories.more": "{count} more",
+
   "search.category.title": "Category",
   "search.category.clear": "Search the whole catalogue",
   "search.category.current": "Searching inside {path}",

package/src/i18n/ru.ts

@@ -166,6 +166,11 @@ export const searchI18nBundleRu: I18nDictionary = {
   "search.empty.widen_radius": "Искать в радиусе {km} км",
   "search.empty.anywhere": "Искать везде",
   "search.empty.drop_filter": "Без «{name}»",
+
+  // One line, out of the same answer the cards came from: section and count.
+  "search.other_categories.label": "Поиск в других категориях:",
+  "search.other_categories.narrow": "Искать в разделе «{name}»",
+  "search.other_categories.more": "ещё {count}",
   "search.category.title": "Категория",
   "search.category.clear": "Искать по всему каталогу",
   "search.category.current": "Ищем внутри {path}",

package/src/index.ts

@@ -194,6 +194,16 @@ export type {
 } from "./headless/useFacetLabels.js";
 export { useAppliedSort } from "./headless/useAppliedSort.js";
 export { offerableCategories, useSearchBox } from "./headless/useSearchBox.js";
+export {
+  OTHER_CATEGORIES_LIMIT,
+  OTHER_CATEGORIES_PHONE_LIMIT,
+  otherCategoryLeaf,
+  useOtherCategories,
+} from "./headless/useOtherCategories.js";
+export type {
+  OtherCategoriesBag,
+  OtherCategoryRow,
+} from "./headless/useOtherCategories.js";
 export type { SearchBoxBag, UseSearchBoxOptions } from "./headless/useSearchBox.js";
 export { countQueryState, useSearchCount } from "./headless/useSearchCount.js";
 export type {