@stapel/search-react 0.7.0 → 0.9.0

package/src/default/SearchPage.tsx

@@ -33,6 +33,20 @@
  * behind a "Filters (N)" button and opens as a bottom sheet through the shared
  * `SkinDialog`, with the count of what is applied on the button itself.
  *
+ * ── Where the search opens, and what it calls the place ───────────────────
+ *
+ * `defaultGeo` centres a fresh search on the visitor — a granted browser
+ * prompt, or the server's IP guess when there was none — and `geoLabel` says
+ * what that place is CALLED. Both are the host's to resolve: this page has a
+ * `lat` and a `lon` in its query string and no way on earth to turn them into
+ * "Berlin Mitte", which is exactly why it must not print them. A search
+ * package that grew a geocoder to say a nicer sentence would have taken on the
+ * whole of `geo-react` to avoid one bad line.
+ *
+ * The centring is applied once, only into a URL that carries no location, and
+ * never again after the visitor has said anything about location themselves —
+ * see {@link SearchStateProviderProps.defaultGeo}, which owns the rules.
+ *
  * ── The filter column is laid out only when there is something in it ──────
  *
  * `Col md={7}` was unconditional, and on a deployment whose search plan
@@ -59,6 +73,7 @@ import type { SearchParamsAdapter } from "../headless/SearchStateProvider.js";
 import { useFacetPanel } from "../headless/FacetPanel.js";
 import { useAppliedCount } from "../headless/useAppliedCount.js";
 import type { ParseSearchStateOptions } from "../state/urlState.js";
+import type { SearchGeo } from "../api/types.js";
 import { buildRangeGroups } from "../state/ranges.js";
 import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
 import { FacetPanelPane } from "./FacetPanelPane.js";
@@ -66,10 +81,13 @@ import type {
   CategoryFilterSlotProps,
   GeoFilterSlotProps,
 } from "./FacetPanelPane.js";
+import { FilterChips } from "./FilterChips.js";
 import { PageSizeSelect } from "./PageSizeSelect.js";
 import { SearchBox } from "./SearchBox.js";
 import { SearchResultsPane } from "./SearchResultsPane.js";
 import { SortSelect } from "./SortSelect.js";
+import { SEARCH_BUILTIN_VIEWS, ViewSwitch, resolveView } from "./ViewSwitch.js";
+import type { SearchView } from "./ViewSwitch.js";
 import type { DegradationNoticeVariant } from "./DegradationNotice.js";
 import type { SearchCardRenderer } from "./SearchResultCard.js";
 import { UrlIssueNotice } from "./UrlIssueNotice.js";
@@ -91,10 +109,31 @@ export type SearchFiltersLayout = "column" | "sheet";
  */
 export const FILTERS_RAIL_WIDTH = 280;
 
-/** The rail: fixed, never squeezed, never grown. */
+/**
+ * The rail: fixed width, never squeezed, never grown — and STICKY.
+ *
+ * A catalogue page is thirty cards long and the filters are at the top of it,
+ * so by the fourth row of results the controls that narrow the list are a
+ * screenful above the list they narrow: the only way to change a filter after
+ * scrolling was to scroll back. The rail now stays put while the results move
+ * under it, and scrolls INTERNALLY when its own content is taller than the
+ * window (`overflowY: auto` + a viewport-height cap), which is the one place a
+ * viewport measure is right — the sticky box's height IS the window's.
+ *
+ * `alignSelf: flex-start` is load-bearing: a flex child stretches to the row's
+ * height by default, and a stretched box has nothing to stick to.
+ */
 const RAIL: CSSProperties = {
   flex: `0 0 ${String(FILTERS_RAIL_WIDTH)}px`,
   maxWidth: FILTERS_RAIL_WIDTH,
+  position: "sticky",
+  top: 0,
+  alignSelf: "flex-start",
+  maxHeight: "100dvh",
+  overflowY: "auto",
+  overscrollBehavior: "contain",
+  // Room for the focus ring of the last control against the scroll edge.
+  paddingBlockEnd: spacing[2],
 };
 
 /** The results take what is left. `minWidth: 0` so a long word inside a card
@@ -117,6 +156,24 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
   readonly renderCategoryFilter?: (slot: CategoryFilterSlotProps) => ReactNode;
   /** The location control slot (`geo-react`). */
   readonly renderGeoFilter?: (slot: GeoFilterSlotProps) => ReactNode;
+  /**
+   * What the current location is CALLED, in words — set once here and it
+   * reaches both filter surfaces, the desktop panel and the phone chip row.
+   * See {@link FacetPanelPaneProps.geoLabel}: this page never prints a
+   * coordinate, with or without it.
+   */
+  readonly geoLabel?: ReactNode;
+  /**
+   * Open the search centred where the visitor is, when the URL says nothing
+   * about location — see {@link SearchStateProviderProps.defaultGeo} for the
+   * four rules that keep it from overruling a link or a person.
+   *
+   * The host resolves the position; this page does not know what a map or a
+   * geocoder is and must not learn. A browser prompt (`usePermission`
+   * + `geolocation`) or the server's IP guess both arrive here as the same two
+   * numbers, and `geoLabel` is where the name of the place they mean comes in.
+   */
+  readonly defaultGeo?: SearchGeo | undefined;
   /** Container chrome under the results — e.g. the ranking-disclosure link. */
   readonly footer?: ReactNode;
   /**
@@ -152,6 +209,45 @@ export interface SearchPageProps extends ThemeModeProp, ParseSearchStateOptions
   readonly defaultFiltersOpen?: boolean;
   /** Offer a page-size control beside the sort. Default `true`. */
   readonly pageSize?: boolean;
+  /**
+   * The trail above the heading — "Home / Cars / Sedans".
+   *
+   * A SLOT, because a breadcrumb is a walk up the CATEGORY tree and the tree
+   * belongs to `categories-react`; a search package knows the `category`
+   * parameter's value and nothing about its ancestors. Rendered above the
+   * results heading, inside the results column, so it sits over the list it
+   * describes rather than over the whole two-column page.
+   */
+  readonly breadcrumb?: ReactNode;
+  /**
+   * The arrangements the view switch offers. Default: the pair's own list and
+   * grid. A deployment adds its own — `{ id: "map", labelKey, icon, render }`
+   * — and the switch treats it like the two that ship; see {@link SearchView}.
+   *
+   * A single view draws no switch at all.
+   */
+  readonly views?: readonly SearchView[];
+  /** Which arrangement the page opens in. Default: the first of `views`. */
+  readonly defaultView?: string;
+  /** Told when the arrangement changes, for a host that remembers it. The
+   * view is NOT url state — see `<ViewSwitch>` for why. */
+  readonly onViewChange?: (id: string) => void;
+  /**
+   * The action at the trailing end of the results toolbar — conventionally
+   * "notify me about new ones".
+   *
+   * A SLOT, and it cannot be anything else: saving a search and mailing its
+   * new hits is a subscription with an owner, a schedule and a consent record,
+   * none of which this pair has. What the pair CAN state is where such a
+   * control belongs and that the page keeps room for it.
+   */
+  readonly resultsAction?: ReactNode;
+  /**
+   * Heading level for the results caption. Default `1` — on a results SCREEN
+   * the list's name is the page's heading. A container that already prints its
+   * own `<h1>` above this page passes a lower level.
+   */
+  readonly resultsHeadingLevel?: 1 | 2 | 3 | 4 | 5;
 }
 
 interface SearchPageBodyProps {
@@ -162,6 +258,7 @@ interface SearchPageBodyProps {
   readonly languages?: readonly string[];
   readonly renderCategoryFilter?: (slot: CategoryFilterSlotProps) => ReactNode;
   readonly renderGeoFilter?: (slot: GeoFilterSlotProps) => ReactNode;
+  readonly geoLabel?: ReactNode;
   readonly footer?: ReactNode;
   readonly filtersHeader?: ReactNode;
   readonly resultsHeading?: ReactNode;
@@ -169,6 +266,12 @@ interface SearchPageBodyProps {
   readonly filtersLayout?: SearchFiltersLayout;
   readonly defaultFiltersOpen?: boolean;
   readonly pageSize?: boolean;
+  readonly breadcrumb?: ReactNode;
+  readonly views?: readonly SearchView[];
+  readonly defaultView?: string;
+  readonly onViewChange?: (id: string) => void;
+  readonly resultsAction?: ReactNode;
+  readonly resultsHeadingLevel?: 1 | 2 | 3 | 4 | 5;
 }
 
 /**
@@ -190,6 +293,18 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
     props.filtersLayout ?? (surface === "sheet" ? "sheet" : "column");
   const [sheetOpen, setSheetOpen] = useState(props.defaultFiltersOpen === true);
 
+  // How the results are ARRANGED. Component state, not URL state: it changes
+  // how the same answer is drawn, never what the answer is, so it must not
+  // rewrite the meaning of a link somebody shared (`<ViewSwitch>` §the view is
+  // not URL state).
+  const views = props.views ?? SEARCH_BUILTIN_VIEWS;
+  const [viewId, setViewId] = useState<string | undefined>(props.defaultView);
+  const view = resolveView(views, viewId) ?? { id: "", labelKey: "" };
+  const changeView = (next: string): void => {
+    setViewId(next);
+    props.onViewChange?.(next);
+  };
+
   /**
    * "Show 25 results", not "Show results".
    *
@@ -251,21 +366,29 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
           {...(props.renderGeoFilter !== undefined
             ? { renderGeoFilter: props.renderGeoFilter }
             : {})}
+          {...(props.geoLabel !== undefined ? { geoLabel: props.geoLabel } : {})}
         />
       )}
     </Flex>
   );
 
+  // The toolbar over the results: how they are ARRANGED, how they are ORDERED,
+  // how many per page — and the surface's own action at the trailing end.
   const toolbar = (
     <Flex align="center" wrap gap={spacing[3]}>
+      <ViewSwitch views={views} value={view.id} onChange={changeView} />
       <SortSelect />
       {props.pageSize !== false && <PageSizeSelect />}
+      {props.resultsAction}
     </Flex>
   );
 
   const results = (
     <SearchResultsPane
       toolbar={toolbar}
+      headingLevel={props.resultsHeadingLevel ?? 1}
+      {...(view.render !== undefined ? { renderResults: view.render } : {})}
+      {...(view.layout !== undefined ? { layout: view.layout } : {})}
       {...(props.renderCard !== undefined ? { renderCard: props.renderCard } : {})}
       {...(props.footer !== undefined ? { footer: props.footer } : {})}
       {...(props.resultsHeading !== undefined
@@ -286,26 +409,30 @@ function SearchPageBody(props: SearchPageBodyProps): ReactElement {
       data-filters-layout={layout}
     >
       {props.searchBox !== false && <SearchBox />}
+      {props.breadcrumb !== undefined && (
+        <div data-testid="search-breadcrumb">{props.breadcrumb}</div>
+      )}
       <UrlIssueNotice />
 
       {showFilters && layout === "sheet" ? (
         <>
-          <Button
-            block
-            data-testid="search-filters-open"
-            data-analytics="none"
-            data-analytics-reason="opening the filter sheet is a read, not a flow step"
-            onClick={() => {
+          {/* The phone's filter row. It REPLACES the full-width "Filters (3)"
+              button that used to stand here: that button said how many
+              constraints were applied and not one word about WHICH, and put
+              every filter behind one tap onto a sheet you then had to scroll.
+              The chips state the filters on the page — and the leading chip is
+              still the whole panel, for the person who wants all of it. */}
+          <FilterChips
+            onOpenAll={() => {
               setSheetOpen(true);
             }}
-          >
-            {/* "Filters (0)" is a count of nothing printed on the control that
-                opens the thing that would produce one. The count appears when
-                there is a count. */}
-            {facets.activeFilters === 0
-              ? t(SEARCH_I18N_KEYS.facetsTitle)
-              : t(SEARCH_I18N_KEYS.filtersOpen, { count: facets.activeFilters })}
-          </Button>
+            {...(categoryFeatures !== undefined ? { categoryFeatures } : {})}
+            {...(locale !== undefined ? { locale } : {})}
+            {...(props.renderGeoFilter !== undefined
+              ? { renderGeoFilter: props.renderGeoFilter }
+              : {})}
+            {...(props.geoLabel !== undefined ? { geoLabel: props.geoLabel } : {})}
+          />
           <SkinDialog
             open={sheetOpen}
             onClose={() => {
@@ -361,6 +488,8 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     languages,
     renderCategoryFilter,
     renderGeoFilter,
+    geoLabel,
+    defaultGeo,
     footer,
     filtersHeader,
     resultsHeading,
@@ -368,13 +497,19 @@ export function SearchPage(props: SearchPageProps): ReactElement {
     filtersLayout,
     defaultFiltersOpen,
     pageSize,
+    breadcrumb,
+    views,
+    defaultView,
+    onViewChange,
+    resultsAction,
+    resultsHeadingLevel,
     mode,
     ...parseOptions
   } = props;
 
   return (
     <SkinTheme surface="base" {...(mode !== undefined ? { mode } : {})}>
-      <SearchStateProvider adapter={adapter} {...parseOptions}>
+      <SearchStateProvider adapter={adapter} defaultGeo={defaultGeo} {...parseOptions}>
         <SearchPageBody
           {...(renderCard !== undefined ? { renderCard } : {})}
           {...(categoryFeatures !== undefined ? { categoryFeatures } : {})}
@@ -383,6 +518,7 @@ export function SearchPage(props: SearchPageProps): ReactElement {
           {...(languages !== undefined ? { languages } : {})}
           {...(renderCategoryFilter !== undefined ? { renderCategoryFilter } : {})}
           {...(renderGeoFilter !== undefined ? { renderGeoFilter } : {})}
+          {...(geoLabel !== undefined ? { geoLabel } : {})}
           {...(footer !== undefined ? { footer } : {})}
           {...(filtersHeader !== undefined ? { filtersHeader } : {})}
           {...(resultsHeading !== undefined ? { resultsHeading } : {})}
@@ -390,6 +526,12 @@ export function SearchPage(props: SearchPageProps): ReactElement {
           {...(filtersLayout !== undefined ? { filtersLayout } : {})}
           {...(defaultFiltersOpen !== undefined ? { defaultFiltersOpen } : {})}
           {...(pageSize !== undefined ? { pageSize } : {})}
+          {...(breadcrumb !== undefined ? { breadcrumb } : {})}
+          {...(views !== undefined ? { views } : {})}
+          {...(defaultView !== undefined ? { defaultView } : {})}
+          {...(onViewChange !== undefined ? { onViewChange } : {})}
+          {...(resultsAction !== undefined ? { resultsAction } : {})}
+          {...(resultsHeadingLevel !== undefined ? { resultsHeadingLevel } : {})}
         />
       </SearchStateProvider>
     </SkinTheme>

package/src/default/SearchResultsPane.tsx

@@ -45,6 +45,7 @@ import { DegradationNotice } from "./DegradationNotice.js";
 import type { DegradationNoticeVariant } from "./DegradationNotice.js";
 import { SearchResultCard } from "./SearchResultCard.js";
 import type { SearchCardRenderer } from "./SearchResultCard.js";
+import type { SearchResultsLayout } from "./ViewSwitch.js";
 import type { ThemeModeProp } from "./types.js";
 
 /**
@@ -84,6 +85,20 @@ const RESULTS_GRID: CSSProperties = {
   alignItems: "stretch",
 };
 
+/**
+ * The LIST arrangement: one wide row per result.
+ *
+ * The same grid with one track, deliberately — not a second layout mechanism.
+ * A list is a grid whose column count is one, and expressing it that way is
+ * what keeps the card slot, the gap and the stretch identical between the two
+ * arrangements, so switching views cannot change anything except the number of
+ * columns.
+ */
+const RESULTS_LIST: CSSProperties = {
+  ...RESULTS_GRID,
+  gridTemplateColumns: "1fr",
+};
+
 export interface SearchResultsPaneProps extends ThemeModeProp {
   /**
    * The card slot (spec §6.2 item 1). A storefront passes
@@ -135,6 +150,24 @@ export interface SearchResultsPaneProps extends ThemeModeProp {
   /** Widest the column of results may grow (default {@link RESULTS_MAX_WIDTH});
    * `null` lets the container decide. */
   readonly maxWidth?: number | null;
+  /**
+   * How the loaded rows are arranged: as many card columns as fit
+   * (`"grid"`, the default) or one wide row each (`"list"`). The view SWITCH
+   * that flips this lives in `<ViewSwitch>`; the pane only draws.
+   *
+   * Ignored when `renderResults` replaces the arrangement entirely.
+   */
+  readonly layout?: SearchResultsLayout;
+  /**
+   * Heading level for the results caption. Default `4`, which is what every
+   * surface that EMBEDS this pane under its own title needs.
+   *
+   * `<SearchPage>` passes `1`: on a results SCREEN the list's name is the
+   * page's heading, and a page whose only heading is an `<h4>` has a document
+   * outline that starts three levels down — the thing a screen reader's
+   * heading list is for.
+   */
+  readonly headingLevel?: 1 | 2 | 3 | 4 | 5;
 }
 
 function Count(props: { bag: SearchResultsBag }): ReactElement | null {
@@ -217,7 +250,7 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
           <Flex vertical gap={spacing[4]}>
             <Flex justify="space-between" align="center" wrap gap={spacing[2]}>
               <Typography.Title
-                level={4}
+                level={props.headingLevel ?? 4}
                 style={{ margin: 0 }}
                 data-testid="search-results-heading"
               >
@@ -270,7 +303,11 @@ export function SearchResultsPane(props: SearchResultsPaneProps): ReactElement {
                   {renderResults !== undefined ? (
                     renderResults(items)
                   ) : (
-                    <div style={RESULTS_GRID} data-testid="search-results-grid">
+                    <div
+                      style={props.layout === "list" ? RESULTS_LIST : RESULTS_GRID}
+                      data-testid="search-results-grid"
+                      data-layout={props.layout ?? "grid"}
+                    >
                       {items.map((item: SearchItem) => (
                         <div key={item.key}>
                           {renderCard !== undefined ? (

package/src/default/ViewSwitch.tsx

@@ -0,0 +1,147 @@
+/**
+ * `<ViewSwitch>` — how the results are ARRANGED: a list, a grid, or something
+ * the deployment brought with it.
+ *
+ * ## Why two of the three views ship and the third is a slot
+ *
+ * A list and a grid are the SAME data in two arrangements: one column of wide
+ * rows, or as many card columns as fit. That is a layout decision and a search
+ * pair can take it. A MAP is not — it needs a tile source, a projection, a
+ * marker layer and a geocoder, all of which live in `geo-react` and none of
+ * which a search package may depend on. So the third view arrives as a
+ * {@link SearchView} the host declares, with its own `render`, and this
+ * component treats it exactly like the two it ships. A pair that hardcoded a
+ * "map" button and then had nothing to draw would be offering a control that
+ * cannot work — the defect class the fleet calls a silent slot.
+ *
+ * ## The view is not URL state, and that is deliberate
+ *
+ * `sort`, `page size`, every filter and the cursor are in the query string,
+ * because they change WHAT the answer is and a shared link has to carry them.
+ * The view changes only how the same answer is drawn. Putting it in the URL
+ * would make every arrangement flip a new history entry and would rewrite the
+ * meaning of a link somebody sent. The page holds it in component state and
+ * offers `defaultView`/`onViewChange` so a host that wants it remembered can
+ * persist it wherever it keeps preferences.
+ */
+import type { ReactElement, ReactNode } from "react";
+import { Segmented } from "antd";
+import { useT } from "@stapel/core";
+import { SEARCH_I18N_KEYS } from "../i18n/keys.js";
+import type { SearchResultsRenderer } from "./SearchResultsPane.js";
+
+/** How the pane's own arrangements lay a page of results out. */
+export type SearchResultsLayout = "grid" | "list";
+
+/** One arrangement offered by the switch. */
+export interface SearchView {
+  /** Stable id — what `defaultView`/`onViewChange` speak in. */
+  readonly id: string;
+  /** i18n KEY for the view's name (never a literal: the switch is chrome). */
+  readonly labelKey: string;
+  /** The glyph beside the name. Omitted, the name stands alone. */
+  readonly icon?: ReactNode;
+  /**
+   * One of the pane's own arrangements. Ignored when {@link SearchView.render}
+   * is present, which replaces the arrangement entirely.
+   */
+  readonly layout?: SearchResultsLayout;
+  /**
+   * The whole result surface, for a view the pair cannot draw — a map, a
+   * comparison table. It receives the loaded rows; the pane keeps its four
+   * load arms around it, so "nothing found" and "we could not run this search"
+   * stay the pane's sentences rather than the slot's problem.
+   */
+  readonly render?: SearchResultsRenderer;
+}
+
+/** Rows — one wide row per result, the arrangement a scan reads fastest. */
+function ListGlyph(): ReactElement {
+  return (
+    <ViewGlyph>
+      <path d="M4 6.5h16M4 12h16M4 17.5h16" />
+    </ViewGlyph>
+  );
+}
+
+/** Cards — as many columns as fit. */
+function GridGlyph(): ReactElement {
+  return (
+    <ViewGlyph>
+      <rect x="4" y="4" width="7" height="7" rx="1.5" />
+      <rect x="13" y="4" width="7" height="7" rx="1.5" />
+      <rect x="4" y="13" width="7" height="7" rx="1.5" />
+      <rect x="13" y="13" width="7" height="7" rx="1.5" />
+    </ViewGlyph>
+  );
+}
+
+function ViewGlyph(props: { readonly children: ReactNode }): ReactElement {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      role="img"
+      aria-hidden="true"
+    >
+      {props.children}
+    </svg>
+  );
+}
+
+/** The two arrangements the pair itself can draw. */
+export const SEARCH_BUILTIN_VIEWS: readonly SearchView[] = [
+  {
+    id: "list",
+    labelKey: SEARCH_I18N_KEYS.viewList,
+    icon: <ListGlyph />,
+    layout: "list",
+  },
+  {
+    id: "grid",
+    labelKey: SEARCH_I18N_KEYS.viewGrid,
+    icon: <GridGlyph />,
+    layout: "grid",
+  },
+];
+
+/** The view `id` currently in force, or the first offered one. */
+export function resolveView(
+  views: readonly SearchView[],
+  id: string | undefined
+): SearchView | undefined {
+  return views.find((view) => view.id === id) ?? views[0];
+}
+
+export interface ViewSwitchProps {
+  readonly views: readonly SearchView[];
+  readonly value: string;
+  readonly onChange: (id: string) => void;
+}
+
+/**
+ * The switch itself. Renders nothing for a single view: a control offering one
+ * choice is not a control, it is a label that can be clicked.
+ */
+export function ViewSwitch(props: ViewSwitchProps): ReactElement | null {
+  const t = useT();
+  if (props.views.length < 2) return null;
+  return (
+    <Segmented<string>
+      aria-label={t(SEARCH_I18N_KEYS.viewLabel)}
+      value={props.value}
+      data-testid="search-view-switch"
+      onChange={props.onChange}
+      options={props.views.map((view) => ({
+        value: view.id,
+        label: t(view.labelKey),
+        ...(view.icon !== undefined ? { icon: view.icon } : {}),
+      }))}
+    />
+  );
+}

package/src/default/index.ts

@@ -21,7 +21,12 @@
  *     owns walking the tree; this pair owns the `category` parameter.
  *  4. **`renderGeoFilter`** — the location control. `geo-react` owns the map
  *     and the geocoder; this pair owns `lat`/`lon`/`radius_km`/`bbox`, and
- *     keeps the controls that WIDEN a location a link already carries.
+ *     keeps the controls that WIDEN a location a link already carries. Its two
+ *     companions divide the same seam the same way: `geoLabel` is what the
+ *     current place is CALLED (owning a coordinate is not permission to print
+ *     one), and `defaultGeo` is where a fresh search opens when the URL names
+ *     nowhere — the visitor's own position, resolved by whoever is allowed to
+ *     ask for it.
  *  5. **retheming through the §68 token JSON** — every surface wraps itself
  *     in the shared `SkinTheme`, so a host's regenerated `--stapel-*` custom
  *     properties reach this skin with zero code.
@@ -43,6 +48,21 @@ export type {
   SearchResultsRenderer,
 } from "./SearchResultsPane.js";
 
+export { FilterChips, CHIP_ROW_CLASS, CHIP_ROW_STYLE_HREF, chipRowCss } from "./FilterChips.js";
+export type { FilterChipsProps } from "./FilterChips.js";
+
+export {
+  FacetGroupControl,
+  facetGroupShape,
+  facetOptionNodes,
+  FACET_VISIBLE_OPTIONS,
+} from "./FacetGroupControl.js";
+export type {
+  FacetGroupControlProps,
+  FacetGroupShape,
+  FacetOptionNode,
+} from "./FacetGroupControl.js";
+
 export { FacetPanelPane } from "./FacetPanelPane.js";
 export type {
   FacetPanelPaneProps,
@@ -58,6 +78,8 @@ export { SearchBox } from "./SearchBox.js";
 export type { SearchBoxProps } from "./SearchBox.js";
 export { SortSelect, SORT_SELECT_MIN_WIDTH } from "./SortSelect.js";
 export type { SortSelectProps } from "./SortSelect.js";
+export { ViewSwitch, SEARCH_BUILTIN_VIEWS, resolveView } from "./ViewSwitch.js";
+export type { ViewSwitchProps, SearchView, SearchResultsLayout } from "./ViewSwitch.js";
 export { PageSizeSelect, SEARCH_PAGE_SIZES } from "./PageSizeSelect.js";
 export type { PageSizeSelectProps } from "./PageSizeSelect.js";
 export { LanguageSelect } from "./LanguageSelect.js";