torch-glare 2.5.4 → 2.5.5

package/apps/lib/components/SlideDatePicker.tsx

@@ -149,11 +149,11 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
 
     return (
       <Popover onOpenChange={setIsOpen}>
-        {/* The theme goes to the field as a prop, not as `data-theme` on the trigger. `asChild`
-            merges trigger props onto the child, which lands the attribute on the bare <input> — the
-            text then resolves dark tokens while the field around it follows the page, and on a light
-            page the value is white on white. Passing `theme` through means the whole field is dark
-            together, so it stays dark *and* readable. */}
+        {/* `theme` is deliberately NOT passed to the field: only the picker panel below is pinned
+            dark. The field follows the surrounding page instead, so it matches the other inputs
+            next to it. Note it must not be handed down as `data-theme` either — `asChild` merges
+            trigger props onto the child, which would land the attribute on the bare <input> and
+            leave its text resolving dark tokens inside a light field (white on white). */}
         <PopoverTrigger ref={triggerRef} asChild className="w-full flex-1">
           {isValidElement(children) ? (
             cloneElement(children as React.ReactElement<HTMLInputElement & { theme?: string }>, {
@@ -161,13 +161,11 @@ export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps
                 (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
               type: "input",
               readOnly: true,
-              theme,
             })
           ) : (
             /* If the children is not a valid element, Show the default input */
             <InputField
               readOnly
-              theme={theme}
               type="input"
               {...props}
               childrenSide={

package/apps/lib/components/TabSwitch.tsx

@@ -31,13 +31,16 @@ const trackStyles = cva(
     "rounded-[10px]",
     "bg-background-presentation-body-primary",
     "shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)]",
+    // Contains the active pill's drop-shadow: it is clipped at the track's rounded edge instead
+    // of bleeding onto whatever sits behind the switcher.
+    "overflow-hidden",
   ],
   {
     variants: {
       size: {
-        S: ["gap-[2px] p-[2px]"],
-        M: ["gap-[2px] p-[2px]"],
-        L: ["gap-[3px] p-[3px]"],
+        S: ["p-[2px]"],
+        M: ["p-[2px]"],
+        L: ["p-[3px] rounded-[12px]"],
       },
     },
     defaultVariants: { size: "M" },
@@ -48,7 +51,7 @@ const trackStyles = cva(
 // transparent and lighten on hover.
 const optionStyles = cva(
   [
-    "flex items-center justify-center gap-[4px]",
+    "flex items-center justify-center",
     "rounded-[8px]",
     "font-[510] leading-none",
     "transition-all duration-200 ease-in-out",
@@ -61,7 +64,7 @@ const optionStyles = cva(
       size: {
         S: ["h-5 px-2 text-[12px]", "[&_svg]:h-3 [&_svg]:w-3", "[&_i]:text-[12px]"],
         M: ["h-6 px-3 text-[14px]", "[&_svg]:h-[14px] [&_svg]:w-[14px]", "[&_i]:text-[14px]"],
-        L: ["h-8 px-4 text-[16px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
+        L: ["h-8 px-4 text-[16px] rounded-[10px]", "[&_svg]:h-4 [&_svg]:w-4", "[&_i]:text-[16px]"],
       },
       active: {
         // Active option = a solid raised WHITE pill with dark text, in every
@@ -78,6 +81,8 @@ const optionStyles = cva(
           // keeps both states the same width — without it, selecting a tab resizes the pill and
           // shoves its neighbours. The design's own 4px gap absorbs the 1px.
           "border border-black/5",
+          // The pill casts outward to look raised; the track clips it (`overflow-hidden` on
+          // `trackStyles`) so the shadow never spills past the container.
           "drop-shadow-[0px_0px_5px_rgba(0,0,0,0.25)]",
         ],
         false: [
@@ -116,22 +121,23 @@ function TabSwitchInner<T extends string = string>(
     >
       {options.map((option, idx) => {
         const active = option.value === value;
+        const isDisabled = disabled || option.disabled;
+        // A divider is drawn only between two INACTIVE options — the raised pill is never flanked
+        // by a rule, so the two dividers touching it fade out.
         const prevActive = idx > 0 && options[idx - 1].value === value;
-        // A divider sits between two inactive options only — the active pill is
-        // never flanked by one.
         const showDivider = idx > 0 && !active && !prevActive;
-        const isDisabled = disabled || option.disabled;
 
         return (
           <div key={option.value} className="flex items-center">
             {idx > 0 && (
               <div
                 aria-hidden
+                // The slot is ALWAYS rendered and only its ink changes. Unmounting it instead cost
+                // the track 7px (`w-px` + `mx-[3px]`) every time one went away, so picking a tab
+                // resized the track and shoved its neighbours — with three options, selecting the
+                // middle one dropped both dividers and moved the track 14px.
                 className={cn(
-                  // The slot is always here, and only its ink changes. Unmounting it instead cost
-                  // the track 7px every time the rule below hid one, so picking a tab resized the
-                  // track and shoved its neighbours sideways.
-                  "mx-[3px] h-3 w-px",
+                  "h-3 w-px",
                   showDivider ? "bg-border-presentation-action-disabled" : "bg-transparent",
                 )}
               />

package/apps/lib/layouts/FieldSection.tsx

@@ -27,6 +27,14 @@ export function FieldSection({
   childrenUnderLabel,
   ...props
 }: Props) {
+  // Which copy of `childrenUnderLabel` is visible, driven purely by the `@md` container
+  // breakpoint (this section's own width reaching 650px) — deliberately not by `direction`.
+  // Pinning it per-direction breaks the common case: `FormRenderer` forces `direction="vertical"`
+  // inside a drawer and FormBuilder puts the field's validation error in this slot, so a vertical
+  // form would strand every error under the label at any width.
+  const underLabelSlot = direction === "vertical" ? "hidden" : "hidden @md:block";
+  const underChildrenSlot = direction === "vertical" ? "block" : "block @md:hidden";
+
   return (
     <section
       {...props}
@@ -54,11 +62,29 @@ export function FieldSection({
           )}
 
           {secondaryLabel && <Label size={size} secondaryLabel={secondaryLabel} />}
-          {childrenUnderLabel}
+
+          {/* Stacked (below `@md`): the label column IS the full width, so under the label is the
+              natural spot. Hidden once `@md` splits the row into two columns — the copy in the
+              children column takes over there. Exactly one of the two is ever displayed. */}
+          {childrenUnderLabel && (
+            <div data-slot="under-label" className={cn(underLabelSlot)}>
+              {childrenUnderLabel}
+            </div>
+          )}
         </div>
 
         {/* Flexible section that takes up the remaining space */}
-        <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
+        <div className="grid grid-cols-1 place-items-end gap-[12px]">
+          {children}
+
+          {/* Two-column (`@md` and up): the hint belongs under the control it describes, not
+              stranded at the bottom of the 350px label column. */}
+          {childrenUnderLabel && (
+            <div data-slot="under-children" className={cn("w-full", underChildrenSlot)}>
+              {childrenUnderLabel}
+            </div>
+          )}
+        </div>
       </div>
     </section>
   );

package/apps/lib/registry.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.4",
+  "version": "2.5.5",
   "generatedBy": "scripts/bin/generateRegistry",
   "npmVersions": {
     "@dnd-kit/core": "^6.3.1",
@@ -786,7 +786,6 @@
       "registryDependencies": [
         "components/ActionButton",
         "components/DropdownMenu",
-        "components/Tooltip",
         "utils/cn",
         "utils/types"
       ]

package/docs/components/badge-field.md

@@ -335,7 +335,7 @@ export function BadgeFieldWithIcon() {
 
 ### With Error State
 
-Display validation errors with tooltip.
+Display validation errors. `errorMessage` turns on the field's negative border.
 
 ```tsx
 export function BadgeFieldWithError() {
@@ -467,9 +467,9 @@ Extends all Input element props (except size and variant).
 | size | `'XS' \| 'S' \| 'M'` | `'M'` | Field size |
 | variant | `'PresentationStyle'` | `'PresentationStyle'` | Visual variant |
 | icon | `ReactNode` | - | Leading icon |
-| errorMessage | `string` | - | Error message (shows tooltip) |
+| errorMessage | `string` | - | Marks the field invalid — any non-undefined value turns on the negative border |
 | onTable | `boolean` | `false` | Table-specific styling |
-| toolTipSide | `ToolTipSide` | - | Tooltip position |
+| toolTipSide | `ToolTipSide` | - | **Deprecated, ignored.** The error tooltip was removed; an invalid field is shown by its border alone |
 | label | `string` | - | Field label |
 | required | `boolean` | `false` | Required indicator |
 | theme | `Themes` | - | Theme override |
@@ -674,7 +674,7 @@ describe('BadgeField', () => {
 - **ARIA Labels**: Proper labels for screen readers
 - **Focus Management**: Clear focus indicators
 - **Screen Reader**: Announces selected/removed tags
-- **Error Messages**: Accessible error tooltips
+- **Error Messages**: Invalid fields are marked with the negative border token
 - **Tab Order**: Logical tab navigation
 
 ## Performance

package/docs/components/context-menu.md

@@ -230,6 +230,8 @@ function RtlMenu() {
 
 Tall menus scroll instead of overflowing off-screen. The surface caps at `maxHeight` (default `320`px) and never exceeds the space available after collision handling. Pass `maxHeight` to change the cap.
 
+The panel itself does not scroll — it clips, and an inner viewport inside it does the scrolling. That keeps the panel's 4px frosted gutter fixed instead of scrolling away with the rows. Submenus behave identically and take their own `maxHeight` (same `320`px default).
+
 ```typescript
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel } from "@/components/ContextMenu";
 
@@ -425,7 +427,7 @@ export const ContextMenuRadioItem: React.ForwardRefExoticComponent<ContextMenuRa
 - **Opens at the pointer**: the menu opens on right-click (`contextmenu`) at the exact cursor position, not anchored to a fixed trigger button.
 - **Second right-click closes it**: the Root is made controlled and tracks `open` in context. The Trigger listens in the capture phase, and when the menu is already open it `preventDefault()` / `stopPropagation()` and closes — so a second right-click dismisses instead of re-anchoring (which Radix handles unreliably).
 - **Auto-grouping**: by default (`autoGroup` on `ContextMenuContent`, default `true`) consecutive loose items (`ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioItem`, and `ContextMenuSub`) are automatically wrapped in a `Boxed` `ContextMenuGroup`, so they render inside a boxed container like DropdownMenu even when you do not write a group. Labels and explicit groups act as boundaries and pass through unchanged. Set `autoGroup={false}` to render children verbatim.
-- **Max height & scrolling**: the surface caps its height at `min(maxHeight, available-height)` (where `maxHeight` defaults to `320`px and `available-height` is the space Radix has after collision handling). A taller menu scrolls vertically instead of overflowing off-screen — items and groups keep their full height rather than squishing. Pass `maxHeight={N}` to change the cap.
+- **Max height & scrolling**: the surface caps its height at `min(maxHeight, available-height)` (where `maxHeight` defaults to `320`px and `available-height` is the space Radix has after collision handling). A taller menu scrolls vertically instead of overflowing off-screen — items and groups keep their full height rather than squishing. The panel clips and an inner viewport scrolls, so the panel's frosted gutter stays put. Pass `maxHeight={N}` to change the cap; `ContextMenuSubContent` accepts it too.
 - **Checkbox / radio keep the menu open**: `ContextMenuCheckboxItem` and `ContextMenuRadioItem` call `event.preventDefault()` inside `onSelect`, stopping Radix's default auto-close so users can toggle multiple options in one pass.
 - **Open-only animation**: only the open (enter) state animates (`fade-in`). There is intentionally no exit animation — holding the old DOM node during close breaks close/reposition on a second right-click, so it is omitted to keep repositioning reliable.
 - **Submenus and RTL**: nested `ContextMenuSub` / `ContextMenuSubTrigger` / `ContextMenuSubContent` are supported, and `dir="rtl"` on the Root mirrors the layout (including the submenu chevron).

package/docs/components/data-views/examples/filters.md

@@ -231,7 +231,6 @@ export default function FiltersExample() {
 
         {/* The active query, as removable chips — including the search term. */}
         <div className="border-border-presentation-global-primary border-b px-4 py-2 empty:hidden">
-          <DataViews.Filters.Summary />
         </div>
 
         <DataViews.Table />

package/docs/components/data-views/index.md

@@ -406,21 +406,13 @@ control at its neutral position emits no key at all, is under
 </DataViews.Filters>
 ```
 
-`Filters.Summary` paints whatever is active as removable chips. It reads the same context, so it
-works anywhere — most usefully **outside** the rail, where it tells the user what is filtering the
-rows they are looking at:
-
-```tsx
-<DataViews.Filters.Summary className="px-4 py-2" />
-```
-
 ### Questions this design gets asked
 
 | Question | Answer |
 | --- | --- |
 | Is there an in-view filter panel *and* a Filters tab — which is canonical? | **One surface.** `DataViews.Filters` is a single component. Render it inside a `Panel.Tab` or as a standalone bar; author against the component, not against a tab. |
 | What orders the sections? | **The order you write the children.** There is no `order` prop for filters. |
-| Does the applied-count badge count constrained *fields* or selected *values*? | **There is no count badge.** `PanelToggle` carries none. `Filters.Summary` is the equivalent, and it renders **one chip per constrained field** — Status with three values selected is one chip. |
+| Is there an applied-count badge or a chip summary of active filters? | **No.** `PanelToggle` carries no count, and there is no summary component — the controls themselves show what is set. Render your own above the rows if you want one. |
 | Do `BadgeField` chip colours and `FieldConfig.variants` share a token set? | **They never meet.** Chips come from the field's own `options`; `variants` (`BadgeVariant`) styles `enum-badge` **columns**. Filters and columns are independent. |
 
 And the behaviours worth stating because they are easy to assume wrongly:
@@ -771,14 +763,6 @@ A filter no FormBuilder field covers.
 | `render` | `(args: { value: FilterValue \| undefined; setValue: (v: FilterValue \| undefined) => void }) => ReactNode` | — | **yes** | |
 | `label` | `ReactNode` | derived from `path` | no | |
 
-### DataViews.Filters.Summary
-
-| Prop | Type | Default | Required | Notes |
-| --- | --- | --- | --- | --- |
-| `className` | `string` | — | no | |
-
-Active filters — and the search term — as removable chips. Renders `null` when there are none.
-
 ### Cell
 
 Paint one field of one row exactly as the views paint it.

package/docs/components/dropdown-menu.md

@@ -294,6 +294,8 @@ function Example() {
 
 Tall menus scroll instead of overflowing off-screen. The surface caps at `maxHeight` (default `320`px) and never exceeds the space available after collision handling. Pass `maxHeight` to change the cap.
 
+The panel itself does not scroll — it clips, and an inner viewport inside it does the scrolling. That keeps the panel's 4px frosted gutter fixed instead of scrolling away with the rows. Submenus behave identically and take their own `maxHeight`.
+
 ```typescript
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from "@/components/DropdownMenu";
 import { Button } from "@/components/Button";
@@ -396,6 +398,7 @@ function LongMenu() {
 |------|------|---------|-------------|
 | `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant |
 | `autoGroup` | `boolean` | `true` | Auto-wrap loose items in boxed groups |
+| `maxHeight` | `number` | `320` | Max height (px) before the submenu scrolls. Same `min(maxHeight, available-height)` cap as `DropdownMenuContent` |
 | `className` | `string` | - | Additional CSS classes |
 
 ### DropdownMenuLabel

package/docs/components/form-builder.md

@@ -96,7 +96,33 @@ panel beside the form is `FormRenderer`'s `summary`.
 ## Field components
 
 Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
-`description`, `required`, `disabled`, `hidden`, `fullWidth`.
+`description`, `required`, `disabled`, `hidden`, `fullWidth`, `hints`.
+
+### Hints
+
+`hints` stacks alerts under a field — helper text, a caveat, a confirmation. Each entry mirrors
+`FieldHint`: `label`, an optional `state` of `info` (default) / `warning` / `error` / `success`, and
+an optional `icon`.
+
+```tsx
+<FormBuilder.Text
+  name="sku"
+  label="SKU"
+  required
+  hints={[
+    { state: "info", label: "Must be unique across the catalogue." },
+    { state: "warning", label: "Changing this breaks existing links." },
+  ]}
+/>
+```
+
+The validation error is not one of these — it is rendered automatically and always comes **first**,
+because it is the actionable message; your hints follow in the order given. A field with no `hints`
+renders exactly as before.
+
+Hints are ignored inside a `FormBuilder.Table` cell (and any other `bare` context): there errors
+surface as a tooltip on the control so a row stays one line tall, and stacking alerts would defeat
+that.
 
 | Component                                                                   | Input                                                                                 | Value                                                        |
 | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------ |

package/docs/components/header-bar.md

@@ -146,13 +146,14 @@ All standard `HTMLAttributes<HTMLDivElement>` (for example `id`, `aria-*`, `data
 |---------|-----------|-----------|------------------------|
 | `new` | `bg-blue-sparkle-alpha-50` | `text-blue-sparkle-200` | pill (`label`) → title |
 | `edit` | `bg-orange-alpha-50` | `text-orange-200` | pill (`label`) → title |
-| `detail` | `bg-white-alpha-30` | `text-white-00` | title → pill (`label`) — positions swapped |
+| `detail` | `bg-white-alpha-15` | `text-white-00` | title → pill (`label`) — positions swapped |
 
 ## Styling
 
 - **Fixed dark container**: `rounded-[14px]`, `border-black-600`, `bg-black-1000`, `p-1.5`, with a double soft shadow. The surface is always dark regardless of theme.
 - **Layout**: the root is `inline-flex`, so the chip hugs its content rather than stretching to fill its parent.
-- **Typography**: 28px, weight 510, uppercase, SF Pro with the `cv05` stylistic set. Both `label` and `title` render uppercase.
+- **Typography**: `typography-display-medium-medium` (28px, weight 510) with the `cv05` stylistic set. Both `label` and `title` render uppercase.
+- **Ordering**: `detail` swaps the two children in the DOM rather than reversing the row, so the pair stays correct under `dir="rtl"` and reads in order to assistive tech.
 - **Emphasis pill**: the colored badge background and text color are driven entirely by `variant` (see the Variants table). For `detail`, the pill also moves to the right side.
 
 ## TypeScript Types

package/docs/components/input-field.md

@@ -15,7 +15,7 @@ dependencies:
 
 # InputField
 
-> An enhanced input component that combines Input with integrated popover dropdowns, error tooltips, icons, and trailing actions. Perfect for complex form fields requiring additional UI elements.
+> An enhanced input component that combines Input with integrated popover dropdowns, error styling, icons, and trailing actions. Perfect for complex form fields requiring additional UI elements.
 
 ## Installation
 
@@ -206,9 +206,9 @@ function PasswordField() {
 | `icon` | `ReactNode` | - | Icon to display on the left side |
 | `childrenSide` | `ReactNode` | - | Content to display on the right side |
 | `popoverChildren` | `ReactNode` | - | Content for the dropdown popover |
-| `errorMessage` | `string` | - | Error message to display in tooltip |
+| `errorMessage` | `string` | - | Marks the field invalid — any non-undefined value turns on the negative border |
 | `onTable` | `boolean` | `false` | Optimized styling for table context |
-| `toolTipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | - | Tooltip position |
+| `toolTipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | - | **Deprecated, ignored.** The error tooltip was removed; an invalid field is shown by its border alone |
 | `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant |
 | `className` | `string` | - | Additional CSS classes |
 | `disabled` | `boolean` | `false` | Disables the input |

package/docs/components/select.md

@@ -241,7 +241,7 @@ function Uncontrolled() {
 |------|------|---------|-------------|
 | `size` | `'S' \| 'M' \| 'L' \| 'XL'` | `'M'` | Size of the trigger |
 | `variant` | `'PresentationStyle' \| 'SystemStyle'` | `'PresentationStyle'` | Visual variant |
-| `errors` | `string` | - | Error message (shows tooltip) |
+| `errors` | `string` | - | Marks the trigger invalid — any non-undefined value turns on the negative border |
 | `theme` | `Themes` | - | Theme override |
 | `icon` | `string` | - | Custom icon class |
 | `className` | `string` | - | Additional CSS classes |

package/docs/migration/changelog.md

@@ -26,6 +26,19 @@ npx torch-glare@latest add Button
 
 ## Release notes
 
+- **v2.5.5** — **breaking**: `DataViews.Filters.Summary` is removed with no shim; delete any
+  `<DataViews.Filters.Summary />` (render your own from `useDataViewsFilters()` if you want one).
+  Also, every `FormBuilder.*` field takes a `hints` array, so one field can
+  carry several alerts. The validation error renders first, your hints follow. See
+  [FormBuilder](../components/form-builder.md#hints). Dropdown panels (`Select`,
+  `SearchableSelect`, `SearchableTree`, `Popover`, `DropdownMenu`, `ContextMenu`) now cap to the
+  space actually on screen and scroll their list in an inner viewport instead of being clipped —
+  note `SearchableTree`'s `maxBodyHeight` default drops 320 → 200, and menu submenus gained a
+  `maxHeight` (they were previously uncapped). `InputField`, `BadgeField` and `Select` no longer
+  pop an error tooltip — an invalid control is shown by its negative border alone, and
+  `toolTipSide` is deprecated and ignored. Plus fixes to `TabSwitch` dividers,
+  `FieldSection` hint placement, the
+  `FormRenderer` stepper grid, `SlideDatePicker` theming and `PopoverItem`'s disabled state.
 - **v2.5.2** — **breaking**: `FormBuilder` now holds only the fields; the section cards, title
   header and stepper moved to `FormRenderer`. See
   [FormBuilder 2.5.2](./form-builder-2.5.2.md) for the rename table.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.5.4",
+  "version": "2.5.5",
   "type": "module",
   "license": "MIT",
   "description": "A copy-in React component library (TypeScript + Radix UI + Tailwind CSS). Its CLI copies component source directly into your project — you own the code.",

package/apps/lib/components/DataViews/filters/summary.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-import { cn } from "../../../utils/cn";
-import { formatPathLabel } from "../../../utils/dataViews/path";
-import type { FilterValue } from "../../../utils/dataViews/types";
-import { useDataViewsFilters, useDataViewsView } from "../context";
-
-/**
- * `DataViews.Filters.Summary` — the active filters as removable chips. Useful when the controls
- * themselves live in the panel and you still want the current query visible above the rows.
- *
- * Its labels come from the same descriptors `Filters` reads off its children — the **root** collects
- * those as well, so this works wherever it is rendered, including as `Filters`' sibling. A path no
- * control covers falls back to a label derived from the path.
- */
-export function Summary({ className }: { className?: string }) {
-  const { filters, setFilters, filterFields } = useDataViewsFilters();
-  const { search, setSearch } = useDataViewsView();
-  const entries = Object.entries(filters);
-
-  if (entries.length === 0 && !search) return null;
-
-  const chip = cn(
-    "typography-body-small-regular flex items-center gap-1 rounded-[6px] px-2 py-[2px]",
-    "bg-background-presentation-action-selected text-content-presentation-global-primary",
-  );
-
-  const describe = (path: string, value: FilterValue) => {
-    const label = filterFields.find((f) => f.path === path)?.label ?? formatPathLabel(path);
-    if (Array.isArray(value)) return `${label}: ${value.join(", ")}`;
-    if (value.kind === "number") return `${label}: ${value.min ?? "…"}–${value.max ?? "…"}`;
-    return `${label}: ${value.from ?? "…"} → ${value.to ?? "…"}`;
-  };
-
-  return (
-    <div className={cn("flex flex-wrap items-center gap-2", className)}>
-      {/* The search term narrows the result set exactly as a filter does, so it belongs in the
-          summary of what is currently narrowing it — and it has to be clearable from here too. */}
-      {search && (
-        <span className={chip}>
-          {`Search: ${search}`}
-          <button type="button" aria-label="Clear search" onClick={() => setSearch("")}>
-            <i className="ri-close-line text-[12px]" />
-          </button>
-        </span>
-      )}
-      {entries.map(([path, value]) => (
-        <span key={path} className={chip}>
-          {describe(path, value)}
-          <button
-            type="button"
-            aria-label={`Remove ${path} filter`}
-            onClick={() => {
-              const copy = { ...filters };
-              delete copy[path];
-              setFilters(copy);
-            }}
-          >
-            <i className="ri-close-line text-[12px]" />
-          </button>
-        </span>
-      ))}
-    </div>
-  );
-}