Filter builder

import { FilterBuilder } from "@/components/blocks/filter-builder";

"use client";

import * as React from "react";
import { FilterBuilder } from "@/components/blocks/filter-builder";

const FIELDS = [
  { id: "title", label: "Title" },
  {
    id: "status",
    label: "Status",
    options: [
      { value: "queued", label: "Queued" },
      { value: "delivered", label: "Delivered" },
    ],
  },
];

const PROJECTS = [
  { id: "1", title: "Stewardship campaign brief", status: "queued" },
  { id: "2", title: "Annual report cover",        status: "delivered" },
];

export function Example() {
  const [rows, setRows] = React.useState(PROJECTS);

  return (
    <>
      <FilterBuilder fields={FIELDS} records={PROJECTS} onFilteredChange={setRows} />
      {rows.map((row) => <div key={row.id}>{row.title}</div>)}
    </>
  );
}

FilterBuilder
├── Filters button (default) — FunnelSimple icon + active-clause count badge
│   └── Popover → the panel
└── inline — the panel with no trigger

Panel (one group per nesting level)
├── "Where" lead on the first row
├── Conjunction <Select> on the SECOND row only — and / or, owned by the
│   group, echoed as plain text on every row after it
├── Clause row
│   ├── drag handle (reveals on hover — reorders within the group)
│   ├── field <Select>
│   ├── operator <Select>    is / is not / contains
│   ├── value <Select>       when the field has options or groups (given, or
│   │                        derived from `records`); `groups` draws a heading
│   │                        per group …
│   ├── value <TextField>    … otherwise a free-text value
│   └── remove ✕
├── Nested group row — one level, for `A and (B or C)`
└── Actions: Add filter · Add group (root only) · Clear all (destructive)

The popover panel tweens its height as rows come and go (transitions.dev card
resize), and with no clauses it shrinks to just the two buttons.

Data model
FilterGroup { id, conjunction: "and" | "or", children: FilterNode[] }
FilterNode  = FilterClause | FilterGroup
FilterClause { id, fieldId, operator?, value }

Evaluation (separate from the UI — the builder never touches your data)
├── filterRecords(records, group, fields)  → the rows that pass
├── matchesFilterGroup(record, group, fields) → one record
├── countFilters(group)  → the clauses that actually filter (the badge's number)
└── toFilterGroup(clauses | group | json) → normalizes any of them into a group

Persisting a view
├── filterToJson(group)  → the tree as a JSON string (URL, localStorage, a column)
├── parseFilterJson(json) → the tree back; anything malformed returns an empty group
└── `onJsonChange` / `defaultValue={json}` do both without the helpers

Matching rules
├── An array value tests membership; anything else compares as text.
├── A field with options accepts either the stored `value` or its `label`.
├── `contains` is case-insensitive substring.
└── An empty clause value and an empty group are no-ops, not walls.