@stapel/search-react 0.7.0 → 0.9.0

package/dist/i18n/ru.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ru.d.ts","sourceRoot":"","sources":["../../src/i18n/ru.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB,EAAE,cA6IhC,CAAC;AAEF;yDACyD;AACzD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAE7D"}
+{"version":3,"file":"ru.d.ts","sourceRoot":"","sources":["../../src/i18n/ru.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAsJhC,CAAC;AAEF;yDACyD;AACzD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAE7D"}

package/dist/i18n/ru.js

@@ -68,6 +68,9 @@ export const searchI18nBundleRu = {
     "search.sort.price_desc": "Сначала дороже",
     "search.sort.distance": "Сначала ближние",
     "search.sort.server_chose": "Отсортировано: {sort}",
+    "search.view.label": "Вид",
+    "search.view.list": "Списком",
+    "search.view.grid": "Плиткой",
     "search.facets.title": "Фильтры",
     "search.facets.loading": "Загружаем фильтры…",
     "search.facets.load_failed": "Не удалось загрузить фильтры.",
@@ -84,6 +87,8 @@ export const searchI18nBundleRu = {
     "search.facets.range_clear": "Сбросить",
     "search.facets.range_from_aria": "{feature}, от",
     "search.facets.range_to_aria": "{feature}, до",
+    "search.facets.show_all": "Показать все ({count})",
+    "search.facets.show_less": "Свернуть",
     "search.facets.range_invalid": "«От» больше, чем «до», — под такой диапазон ничего не подойдёт. Поменяйте значения местами.",
     "search.filters.open": "Фильтры ({count})",
     "search.filters.apply": "Показать результаты",
@@ -96,6 +101,9 @@ export const searchI18nBundleRu = {
     "search.filters.show_count_at_least.many": "Показать {count}+ объявлений",
     "search.filters.show_count_at_least.other": "Показать {count}+ объявления",
     "search.filters.dismiss": "Закрыть фильтры",
+    "search.filters.chips_label": "Фильтры",
+    "search.filters.all": "Все фильтры",
+    "search.filters.chip_more": ", +{count}",
     "search.category.title": "Категория",
     "search.category.clear": "Искать по всему каталогу",
     "search.category.current": "Ищем внутри {path}",
@@ -109,7 +117,7 @@ export const searchI18nBundleRu = {
     "search.geo.radius_label": "Радиус, км",
     "search.geo.clear": "Везде",
     "search.geo.box": "В показанной области",
-    "search.geo.center": "Рядом с {lat}, {lon}",
+    "search.geo.chosen_place": "Выбранное место на карте",
     "search.url.issues_title": "Часть этой ссылки прочитать не удалось",
     "search.url.issue.not_a_number": "«{param}» в этой ссылке — не число, поэтому параметр пропущен",
     "search.url.issue.geo_incomplete": "точка в этой ссылке указана наполовину, поэтому она пропущена",

package/dist/i18n/ru.js.map

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

package/llms.txt

@@ -1,4 +1,4 @@
-# @stapel/search-react 0.7.0
+# @stapel/search-react 0.9.0
 
 Headless React flow pair for stapel-search (contract >=0.2 <0.3) — business + state, zero visual opinion.
 Built on @stapel/core: typed client + StapelApiError envelope, auth token refresh,
@@ -76,6 +76,7 @@ const { tracked } = useTracked();
 
 ## Demos (defineDemo → manifest.demos; compiled, linted, rendered examples)
 - search.box → <SearchBox> [empty|typed]  demo/SearchBox.demo.tsx
+- search.classified-filters → <FilterChips> [chips|applied|shapes|views]  demo/ClassifiedFilters.demo.tsx
 - search.degradation-notice → <DegradationNotice> [banner|inline]  demo/DegradationNotice.demo.tsx
 - search.facet-panel-pane → <FacetPanelPane> [open-search|narrowed]  demo/FacetPanelPane.demo.tsx
 - search.filter-sheet → <SearchPage> [open]  demo/FilterSheet.demo.tsx

package/manifest.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-manifest.mjs — do not edit; drift-gated (pnpm gen:manifest:check)",
   "package": "@stapel/search-react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "backend": {
     "module": "stapel-search",
     "contract": ">=0.2 <0.3"
@@ -417,6 +417,27 @@
       ],
       "source": "demo/SearchBox.demo.tsx"
     },
+    {
+      "id": "search.classified-filters",
+      "title": "Filter chips and group shapes",
+      "description": "The phone's filter row — one scrolling line of chips, each opening its own bottom sheet, with the whole panel behind the leading icon-only chip and a dot on it when something is applied. Beside it, the three shapes a facet group takes, all three DERIVED from the category schema rather than chosen per screen: pills for a single-choice facet, indented rows for a hierarchical one, and a fold for a long one that says how many are behind it.",
+      "component": "FilterChips",
+      "covers": [
+        "FacetGroupControl",
+        "ViewSwitch"
+      ],
+      "tokens": [
+        "surface-raised",
+        "brand"
+      ],
+      "variants": [
+        "chips",
+        "applied",
+        "shapes",
+        "views"
+      ],
+      "source": "demo/ClassifiedFilters.demo.tsx"
+    },
     {
       "id": "search.degradation-notice",
       "title": "Degradation notice",
@@ -694,9 +715,14 @@
     "search.facets.range_invalid",
     "search.facets.range_to",
     "search.facets.range_to_aria",
+    "search.facets.show_all",
+    "search.facets.show_less",
     "search.facets.skipped",
     "search.facets.title",
+    "search.filters.all",
     "search.filters.apply",
+    "search.filters.chip_more",
+    "search.filters.chips_label",
     "search.filters.dismiss",
     "search.filters.open",
     "search.filters.show_count",
@@ -706,7 +732,7 @@
     "search.filters.show_count_at_least.one",
     "search.filters.show_count_at_least.other",
     "search.geo.box",
-    "search.geo.center",
+    "search.geo.chosen_place",
     "search.geo.clear",
     "search.geo.radius_km",
     "search.geo.radius_label",
@@ -764,7 +790,10 @@
     "search.url.issue.geo_incomplete",
     "search.url.issue.not_a_number",
     "search.url.issue.range_malformed",
-    "search.url.issues_title"
+    "search.url.issues_title",
+    "search.view.grid",
+    "search.view.label",
+    "search.view.list"
   ],
   "exports": {
     "runtime": [

package/nav-manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "@stapel/search-react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "entries": [
     {
       "id": "search.results",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/search-react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Headless React pair for stapel-search: a typed query client, TanStack Query hooks, and a URL-first state codec that makes a search shareable by construction (filters, ranges, geo, sort and the keyset cursor all live in the query string). Drill-down facets rendered with their remaining counts and with the server's own honesty flags — approximate, skipped, degraded — never swallowed; keyset pagination with the window refusal named; DSA Art. 26 `promoted` marking carried into every card slot and the P2B Art. 5 ranking disclosure exposed as data. Zero visual opinion in the main entry; an opt-in /default subpath ships the antd skin, and /router binds the codec to react-router's useSearchParams.",
   "license": "MIT",
   "repository": {
@@ -57,9 +57,9 @@
       "limit": "10 KB"
     },
     {
-      "name": "default — the antd skin (query box + typeahead, filters incl. ranges/geo/category slots, results, ranking) must stay out of the main bundle",
+      "name": "default — the antd skin (query box + typeahead, filters incl. ranges/geo/category slots + the phone chip row, results incl. the view switch, ranking) must stay out of the main bundle",
       "path": "dist/default/index.js",
-      "limit": "16 KB"
+      "limit": "18 KB"
     },
     {
       "name": "router — the react-router binding is opt-in; the main entry must never pull a router",
@@ -115,12 +115,12 @@
     "size-limit": "^11.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
-    "@stapel/image": "^0.4.1",
-    "@stapel/showcase": "^0.3.0",
-    "@stapel/core": "^0.18.1",
-    "@stapel/tokens": "^0.5.1",
     "@stapel/attributes-react": "^0.3.1",
-    "@stapel/tokens-antd": "^0.7.0"
+    "@stapel/core": "^0.20.0",
+    "@stapel/image": "^0.4.2",
+    "@stapel/showcase": "^0.3.0",
+    "@stapel/tokens": "^0.6.0",
+    "@stapel/tokens-antd": "^0.8.0"
   },
   "engines": {
     "node": ">=22"

package/src/analytics/generated/events.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-events.mjs — do not edit; drift-gated (pnpm gen:events:check)",
   "package": "@stapel/search-react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "defined": [],
   "flows": []
 }

package/src/default/FacetGroupControl.tsx

@@ -0,0 +1,312 @@
+/**
+ * `<FacetGroupControl>` — ONE facet group, drawn the way its own schema says
+ * it should be drawn.
+ *
+ * Until this release every group was the same thing: a flat column of
+ * checkboxes, however many options it had and whatever the category schema
+ * said about it. That is wrong in three ways a person meets on the first
+ * screen of a real catalogue:
+ *
+ *  1. **A single-choice facet is not a checkbox list.** `maxSelected: 1` is a
+ *     fact the schema already carries, and `@stapel/attributes-react`'s editor
+ *     already reads it to draw a segmented control rather than a set of boxes.
+ *     A filter that says "pick one" with controls that say "pick any" teaches
+ *     the wrong thing before the click and surprises after it.
+ *  2. **A hierarchical facet is not flat.** `hierarchical_select` carries a
+ *     TREE in `config.options`; rendering its values as one alphabetical
+ *     column hides that "Sedan" is under "Cars" and puts a child next to its
+ *     own parent as if they were siblings.
+ *  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.
+ *
+ * ── The presentation is DERIVED, never configured here ────────────────────
+ *
+ * {@link facetGroupShape} reads the same `config` keys the attributes editor
+ * reads (`maxSelected`, `type`, `options`), so a facet cannot look one way in
+ * the filter and another way in the composer that produced the value. There is
+ * no `presentation` prop on this component and there must not be one: a
+ * per-call-site override is how the two halves drift.
+ *
+ * A group with NO schema (the host passed no `categoryFeatures`, or the slug
+ * is not in it) is a flat checkbox list — the honest default, and the shape
+ * every group had before.
+ */
+import { useState } from "react";
+import type { CSSProperties, ReactElement } from "react";
+import { Button, Checkbox, Flex, Typography } from "antd";
+import { useT } from "@stapel/core";
+import { radii, spacing } from "@stapel/tokens";
+import { featureConfig, featureType } from "@stapel/attributes-react";
+import type { FeatureDef } from "@stapel/attributes-react";
+import type { FacetGroup, FacetOption } from "../state/facets.js";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+
+/**
+ * How many options a group shows before the rest go behind "Show all".
+ *
+ * Eight is the count at which a group stops being readable at a glance and
+ * starts being a scroll: it is two more than the six the visual pass measured
+ * as the fold on a 390px phone with the sheet's own chrome above it, which
+ * leaves a group of seven whole rather than truncated by one row.
+ */
+export const FACET_VISIBLE_OPTIONS = 8;
+
+/** The three shapes a facet group takes. */
+export type FacetGroupShape = "segmented" | "nested" | "checkbox";
+
+/** The option rows of a group, already nested where the schema nests them. */
+export interface FacetOptionNode {
+  readonly option: FacetOption;
+  /** 0 for a root option; 1+ for a child of a `hierarchical_select` tree. */
+  readonly depth: number;
+}
+
+function numberish(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+
+/**
+ * The DEPTH of every value a `hierarchical_select` config declares, walked
+ * once — `{value: depth}`.
+ *
+ * The tree lives in `config.options[].children[]` (the same shape
+ * `@stapel/attributes-react`'s `Cascader` reads). The facets themselves arrive
+ * FLAT from the server, because an index term has no parent; the schema is the
+ * only thing that knows one value sits under another.
+ */
+function optionDepths(
+  raw: unknown,
+  depth = 0,
+  into: Map<string, number> = new Map()
+): Map<string, number> {
+  if (!Array.isArray(raw)) return into;
+  for (const option of raw) {
+    if (option === null || typeof option !== "object") continue;
+    const entry = option as { value?: unknown; children?: unknown };
+    if (entry.value !== undefined && entry.value !== null) {
+      into.set(String(entry.value), depth);
+    }
+    optionDepths(entry.children, depth + 1, into);
+  }
+  return into;
+}
+
+/** Is this feature single-choice? The schema's own answer, not a guess. */
+function singleChoice(feature: FeatureDef | undefined): boolean {
+  if (feature === undefined) return false;
+  // `maxSelected` ABSENT means unlimited — the engine's own default. Reading
+  // an absent key as 1 would turn every unconfigured facet into a radio group.
+  return numberish(featureConfig(feature)["maxSelected"]) === 1;
+}
+
+/**
+ * Which of the three 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.
+ */
+export function facetGroupShape(group: FacetGroup): FacetGroupShape {
+  const feature = group.feature;
+  if (feature !== undefined && featureType(feature) === "hierarchical_select") {
+    return "nested";
+  }
+  return singleChoice(feature) ? "segmented" : "checkbox";
+}
+
+/** The group's options in render order, carrying the depth the schema gives. */
+export function facetOptionNodes(group: FacetGroup): readonly FacetOptionNode[] {
+  if (facetGroupShape(group) !== "nested" || group.feature === undefined) {
+    return group.options.map((option) => ({ option, depth: 0 }));
+  }
+  const depths = optionDepths(featureConfig(group.feature)["options"]);
+  // Depth alone would leave children beside strangers: the options are
+  // re-ordered so each child follows its own parent, and a value the schema
+  // does not know keeps depth 0 rather than being hidden under someone.
+  const byValue = new Map(group.options.map((option) => [option.value, option]));
+  const out: FacetOptionNode[] = [];
+  const emitted = new Set<string>();
+  for (const [value, depth] of depths) {
+    const option = byValue.get(value);
+    if (option === undefined) continue;
+    out.push({ option, depth });
+    emitted.add(value);
+  }
+  for (const option of group.options) {
+    if (!emitted.has(option.value)) out.push({ option, depth: 0 });
+  }
+  return out;
+}
+
+/** A count, or the honest "we did not count this". Never a zero standing in
+ * for an absent answer. */
+function OptionCount(props: {
+  readonly group: FacetGroup;
+  readonly option: FacetOption;
+}): ReactElement {
+  const t = useT();
+  return (
+    <Typography.Text
+      type="secondary"
+      data-testid={`facet-count-${props.group.slug}-${props.option.value}`}
+    >
+      {props.option.count === null
+        ? t(SEARCH_I18N_KEYS.facetsNotCounted)
+        : props.option.count}
+    </Typography.Text>
+  );
+}
+
+/** The indent one level of a hierarchical facet is drawn with. */
+const NEST_STEP = spacing[5];
+
+function CheckboxRow(props: {
+  readonly group: FacetGroup;
+  readonly node: FacetOptionNode;
+  readonly onToggle: (slug: string, value: string) => void;
+}): ReactElement {
+  const { group, node } = props;
+  return (
+    <Flex
+      justify="space-between"
+      align="center"
+      gap={spacing[2]}
+      style={
+        node.depth > 0
+          ? { paddingInlineStart: node.depth * NEST_STEP }
+          : undefined
+      }
+      data-depth={node.depth}
+    >
+      <Checkbox
+        checked={node.option.selected}
+        data-testid={`facet-option-${group.slug}-${node.option.value}`}
+        data-analytics="none"
+        data-analytics-reason="a filter is a read, not a flow step"
+        onChange={() => {
+          props.onToggle(group.slug, node.option.value);
+        }}
+      >
+        {node.option.label}
+      </Checkbox>
+      <OptionCount group={group} option={node.option} />
+    </Flex>
+  );
+}
+
+/**
+ * One pill of a single-choice group.
+ *
+ * A real `<button aria-pressed>` rather than antd's `Segmented`: the count has
+ * to sit inside the pill (a filter without its remaining count is the
+ * drill-down facet turned naive), and `Segmented` takes labels, not rows.
+ * `aria-pressed` is what makes a styled button a TOGGLE to a screen reader
+ * instead of a link-shaped thing that mysteriously changes the page.
+ */
+function OptionPill(props: {
+  readonly group: FacetGroup;
+  readonly option: FacetOption;
+  readonly onToggle: (slug: string, value: string) => void;
+}): ReactElement {
+  const { group, option } = props;
+  const style: CSSProperties = { borderRadius: radii.full };
+  return (
+    <Button
+      size="small"
+      shape="round"
+      type={option.selected ? "primary" : "default"}
+      aria-pressed={option.selected}
+      style={style}
+      data-testid={`facet-option-${group.slug}-${option.value}`}
+      data-analytics="none"
+      data-analytics-reason="a filter is a read, not a flow step"
+      onClick={() => {
+        props.onToggle(group.slug, option.value);
+      }}
+    >
+      {option.count === null ? option.label : `${option.label} ${option.count}`}
+    </Button>
+  );
+}
+
+export interface FacetGroupControlProps {
+  readonly group: FacetGroup;
+  readonly onToggle: (slug: string, value: string) => void;
+  /** Draw the group's own name above its options. `false` for a surface that
+   * has already said it — a per-group sheet whose title IS the group. */
+  readonly heading?: boolean;
+  /** How many options before "Show all". Default {@link FACET_VISIBLE_OPTIONS};
+   * `null` shows every option (a sheet devoted to one group has the room). */
+  readonly visibleOptions?: number | null;
+}
+
+export function FacetGroupControl(props: FacetGroupControlProps): ReactElement {
+  const t = useT();
+  const { group } = props;
+  const [expanded, setExpanded] = useState(false);
+  const shape = facetGroupShape(group);
+  const nodes = facetOptionNodes(group);
+
+  const limit =
+    props.visibleOptions === null
+      ? null
+      : (props.visibleOptions ?? FACET_VISIBLE_OPTIONS);
+  // A group one row over the limit is not truncated: hiding a single option
+  // behind "Show all (9)" costs a tap to reveal exactly one thing.
+  const collapsible = limit !== null && nodes.length > limit + 1;
+  const shown = collapsible && !expanded ? nodes.slice(0, limit) : nodes;
+
+  return (
+    <Flex
+      vertical
+      gap={shape === "segmented" ? spacing[2] : spacing[1]}
+      data-testid={`facet-group-${group.slug}`}
+      data-counted={group.counted ? "true" : "false"}
+      data-shape={shape}
+    >
+      {props.heading !== false && (
+        <Typography.Text strong>{group.label}</Typography.Text>
+      )}
+
+      {shape === "segmented" ? (
+        <Flex wrap gap={spacing[2]}>
+          {shown.map((node) => (
+            <OptionPill
+              key={node.option.value}
+              group={group}
+              option={node.option}
+              onToggle={props.onToggle}
+            />
+          ))}
+        </Flex>
+      ) : (
+        shown.map((node) => (
+          <CheckboxRow
+            key={node.option.value}
+            group={group}
+            node={node}
+            onToggle={props.onToggle}
+          />
+        ))
+      )}
+
+      {collapsible && (
+        <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: nodes.length })}
+        </Button>
+      )}
+    </Flex>
+  );
+}