Filter Bar

Pick a status, then look at the address bar: ?status=active. Nothing is mirrored into component state — the bar derives from useSearchParams() and writes back with router.replace, so there is no second copy of the truth to drift. Copy the URL into a new tab and the same filter set comes back, which is the whole point: a filtered view is a link you can send someone. The dashed line under the bar prints the query string this bar owns.

The pairing this item exists for. The bar owns the URL; the table receives the resolved rows as a prop — parseFilters → your own matching → rows — and its own searchable is deliberately off, because two search boxes over the same rows is exactly how the two end up fighting. Sorting, pagination and selection stay the table's business: they are view state, not a shareable filter. Narrow the set while on page 2 and the pager clamps rather than showing an empty body.

One Facet shape covers all four kinds. select renders @automindz/combobox and multi renders @automindz/multi-select — neither is reimplemented here, which is the single-source rule and also dogfoods the registry. text debounces. date-range is two native <input type="date">: the platform already ships a keyboard-operable, localised date control, and a range filter is not worth a picker library. Owner fetches its options through loadOptions; the others are inline arrays.

One chip per active value — not per facet: two plans are two chips, and a date range is its two bounds, each removable on its own. The chip *is* the button — nothing interactive nests inside it, which is the invalid, keyboard-unreachable markup multi-select shipped with first. Load the example, then remove chips one at a time: the count follows, and the last removal returns to the bare path rather than leaving a dangling ?.

The text facet at debounceMs: 900, so the gap is visible. A keystroke lands in local state, the input goes aria-busy with a spinner, and only the settled value reaches the URL — that is what stops the address bar taking a write per character. Enter or blur flushes it early. Every write is a replace, so history.length does not move however long you type.

Owner's loadOptions has not resolved yet: the control keeps its slot at its real size, shows a spinner in place of the caret and says so when opened, so nothing jumps when the list lands. The other facets stay usable — one slow facet does not hold up the bar.

A rejected loadOptions renders in place, with the reason and a retry, rather than an empty dropdown that looks like “no owners exist”. The facet keeps its slot and goes blocked instead of vanishing — a filter that disappears makes people ask where it went. Announced through role="alert", and the failure is carried by text and an icon, never by the colour alone. Press “Try again”: this one succeeds.

Different from loading and different from failed: disabled plus disabledReason. The control is really disabled — no hover, no press — and the reason sits under it in the reading order, because a greyed-out control with no explanation is a support ticket.

A filter set with no rows behind it. The table's body renders @automindz/empty-state's search variant through FilterNoResults, which ships with this item so every consumer says the same thing — and its action actually clears the filters instead of telling you to. Distinct from “nothing created yet”, because the fix is different.

Held at 320px. Below the collapse width every facet folds into one “Filters” popover carrying the active count, and the chips stay outside it. A popover rather than a drawer: a drawer is a modal, and covering the rows while you filter them hides the only feedback the controls have — and it needs no dependency the controls did not already bring. It collapses on the bar's own container width, so a bar in a narrow column collapses on a wide screen too.