Filters

import { Filters } from "@oration/canon/components/filters";export function Default() {    return (        <Filters size="default" fields={supplierFields} className="w-full" />    );}

import { Filters } from "@oration/canon/components/filters";import { createFilterQuery, createFilterRule } from "@oration/canon/components/filters/query";import type { FilterQuery } from "@oration/canon/components/filters/types";import * as React from "react";export function NestedAttributes() {    const [query, setQuery] = React.useState<FilterQuery>(() =>        createFilterQuery([            createFilterRule({                id: "tier",                path: ["supplier", "tier"],                operator: "is",                value: "preferred",            }),        ]),    );    return (        <Filters            fields={supplierFields}            query={query}            onQueryChange={setQuery}            showClear            className="w-full"        />    );}

import { Filters } from "@oration/canon/components/filters";import { createFilterQuery, createFilterRule } from "@oration/canon/components/filters/query";import type { FilterQuery } from "@oration/canon/components/filters/types";import { toast } from "@oration/canon/components/toast";import * as React from "react";export function Advanced() {    const [query, setQuery] = React.useState<FilterQuery>(() =>        createFilterQuery([            createFilterRule({                id: "amount",                path: ["invoice", "amount"],                operator: "gt",                value: 10000,            }),        ]),    );    return (        <Filters            variant="advanced"            fields={supplierFields}            query={query}            onQueryChange={(next, details) => {                setQuery(next);                if (details.reason === "clear") {                    toast.add({                        title: "Filters cleared",                        description: "Payment runs shows every invoice again.",                    });                }            }}        />    );}

import { Filters } from "@oration/canon/components/filters";import { createFilterRule } from "@oration/canon/components/filters/query";import type { FilterQuery } from "@oration/canon/components/filters/types";import * as React from "react";export function AdvancedInline() {    const [query, setQuery] = React.useState<FilterQuery>(() => ({        id: "root",        type: "group",        combinator: "and",        rules: [            createFilterRule({                id: "terms",                path: ["invoice", "terms"],                operator: "is",                value: "net60",            }),            {                id: "g1",                type: "group",                combinator: "or",                rules: [                    createFilterRule({                        id: "tier",                        path: ["supplier", "tier"],                        operator: "is",                        value: "probation",                    }),                    createFilterRule({                        id: "w9",                        path: ["supplier", "w9"],                        operator: "is",                        value: false,                    }),                ],            },        ],    }));    return (        <div className="w-full max-w-2xl rounded-xl bg-card p-4 text-left shadow-border">            <Filters                variant="advanced"                advancedMode="inline"                reorderable                fields={supplierFields}                query={query}                onQueryChange={setQuery}            />        </div>    );}

import { Filters } from "@oration/canon/components/filters";import { createFilterQuery, createFilterRule } from "@oration/canon/components/filters/query";export function ReadOnly() {    return (        <Filters            readOnly            fields={supplierFields}            defaultQuery={createFilterQuery<unknown>([                createFilterRule<unknown>({                    id: "tier",                    path: ["supplier", "tier"],                    operator: "is",                    value: "preferred",                }),                createFilterRule<unknown>({                    id: "due",                    path: ["due"],                    operator: "lt",                    value: 7,                }),            ])}            className="w-full"        />    );}

import {    Avatar,    AvatarFallback,    AvatarGroup,    AvatarImage,} from "@oration/canon/components/avatar";import { Filters } from "@oration/canon/components/filters";import {    createFilterQuery,    createFilterRule,} from "@oration/canon/components/filters/query";import type {    FilterField,    FilterOption,    FilterQuery,} from "@oration/canon/components/filters/types";import {    StatusDot,    type StatusTone,} from "@oration/canon/components/status-dot";import type { TagColor } from "@oration/canon/components/tag";import { cn } from "@oration/canon/lib/utils";import {    ArchiveIcon,    BookUserIcon,    Building2Icon,    CircleDotIcon,    GlobeIcon,    HashIcon,    StarIcon,    TypeIcon,    UserMinusIcon,    UserRoundCheckIcon,} from "lucide-react";import * as React from "react";/* --------------------------------- Data ---------------------------------- */// A semantic status reads on Canon's status ladder, so each status carries a// StatusTone rather than a raw palette colour.const STATUSES: { value: string; label: string; tone: StatusTone }[] = [    { value: "todo", label: "To Do", tone: "neutral" },    { value: "in-progress", label: "In Progress", tone: "warning" },    { value: "review", label: "In Review", tone: "info" },    { value: "done", label: "Done", tone: "success" },    { value: "cancelled", label: "Cancelled", tone: "danger" },];// Priority is a ramp. The star wears a categorical tag hue so the four ranks// read cool-to-hot without borrowing a status meaning.const PRIORITIES: { value: string; label: string; color: TagColor }[] = [    { value: "low", label: "Low", color: "green" },    { value: "medium", label: "Medium", color: "amber" },    { value: "high", label: "High", color: "orange" },    { value: "urgent", label: "Urgent", color: "red" },];// The categorical star fills, as literal class strings so Tailwind can scan// them. The deep `-fg` token keeps a small star legible.const starColor: Record<TagColor, string> = {    gray: "text-(--tag-gray-fg)",    blue: "text-(--tag-blue-fg)",    indigo: "text-(--tag-indigo-fg)",    violet: "text-(--tag-violet-fg)",    pink: "text-(--tag-pink-fg)",    red: "text-(--tag-red-fg)",    orange: "text-(--tag-orange-fg)",    amber: "text-(--tag-amber-fg)",    green: "text-(--tag-green-fg)",    teal: "text-(--tag-teal-fg)",};// Long enough that the menu scrolls, which is the point: this is the field that// opts into both the pinned stack and a taller panel.const TEAM = [    { value: "ada", label: "Ada Lovelace", img: "women/1" },    { value: "grace", label: "Grace Hopper", img: "women/2" },    { value: "alan", label: "Alan Turing", img: "men/3" },    { value: "katherine", label: "Katherine Johnson", img: "women/4" },    { value: "edsger", label: "Edsger Dijkstra", img: "men/5" },    { value: "barbara", label: "Barbara Liskov", img: "women/6" },    { value: "tim", label: "Tim Berners-Lee", img: "men/7" },    { value: "margaret", label: "Margaret Hamilton", img: "women/8" },    { value: "donald", label: "Donald Knuth", img: "men/9" },    { value: "radia", label: "Radia Perlman", img: "women/10" },    { value: "linus", label: "Linus Torvalds", img: "men/11" },    { value: "anita", label: "Anita Borg", img: "women/12" },    { value: "ken", label: "Ken Thompson", img: "men/13" },    { value: "frances", label: "Frances Allen", img: "women/14" },    { value: "dennis", label: "Dennis Ritchie", img: "men/15" },    { value: "shafi", label: "Shafi Goldwasser", img: "women/16" },    { value: "vint", label: "Vint Cerf", img: "men/17" },    { value: "carol", label: "Carol Shaw", img: "women/18" },    { value: "guido", label: "Guido van Rossum", img: "men/19" },    { value: "jean", label: "Jean Bartik", img: "women/20" },];// 120 rows, so the list genuinely searches and scrolls.const COUNTRIES: FilterOption[] = [    "Afghanistan",    "Albania",    "Algeria",    "Andorra",    "Angola",    "Argentina",    "Armenia",    "Australia",    "Austria",    "Azerbaijan",    "Bahamas",    "Bahrain",    "Bangladesh",    "Barbados",    "Belarus",    "Belgium",    "Belize",    "Benin",    "Bhutan",    "Bolivia",    "Botswana",    "Brazil",    "Brunei",    "Bulgaria",    "Burkina Faso",    "Burundi",    "Cambodia",    "Cameroon",    "Canada",    "Chad",    "Chile",    "China",    "Colombia",    "Comoros",    "Congo",    "Costa Rica",    "Croatia",    "Cuba",    "Cyprus",    "Czechia",    "Denmark",    "Djibouti",    "Dominica",    "Ecuador",    "Egypt",    "Estonia",    "Eswatini",    "Ethiopia",    "Fiji",    "Finland",    "France",    "Gabon",    "Gambia",    "Georgia",    "Germany",    "Ghana",    "Greece",    "Grenada",    "Guatemala",    "Guinea",    "Guyana",    "Haiti",    "Honduras",    "Hungary",    "Iceland",    "India",    "Indonesia",    "Iran",    "Iraq",    "Ireland",    "Israel",    "Italy",    "Jamaica",    "Japan",    "Jordan",    "Kazakhstan",    "Kenya",    "Kuwait",    "Kyrgyzstan",    "Laos",    "Latvia",    "Lebanon",    "Lesotho",    "Liberia",    "Libya",    "Lithuania",    "Luxembourg",    "Madagascar",    "Malawi",    "Malaysia",    "Maldives",    "Mali",    "Malta",    "Mexico",    "Moldova",    "Monaco",    "Mongolia",    "Morocco",    "Mozambique",    "Namibia",    "Nepal",    "Netherlands",    "New Zealand",    "Nicaragua",    "Nigeria",    "Norway",    "Oman",    "Pakistan",    "Panama",    "Paraguay",    "Peru",    "Philippines",    "Poland",    "Portugal",    "Qatar",    "Romania",    "Rwanda",    "Senegal",    "Serbia",    "Singapore",].map((name) => ({    value: name.toLowerCase().replace(/\s+/g, "-"),    label: name,}));// A directory too large to ship to the client, so it pages over the wire.const DIRECTORY: FilterOption[] = Array.from({ length: 4000 }, (_, index) => ({    value: `u-${index}`,    label: `Contact ${index + 1}`,}));function searchDirectory(query: string, signal: AbortSignal, cursor?: string) {    const needle = query.trim().toLowerCase();    const matches = DIRECTORY.filter((option) =>        option.label.toLowerCase().includes(needle),    );    const start = cursor ? Number(cursor) : 0;    const page = matches.slice(start, start + 25);    const next = start + 25;    return new Promise<{ items: FilterOption[]; nextCursor?: string }>(        (resolve, reject) => {            const timer = setTimeout(                () =>                    resolve({                        items: page,                        nextCursor:                            next < matches.length ? String(next) : undefined,                    }),                260,            );            signal.addEventListener("abort", () => {                clearTimeout(timer);                reject(new DOMException("Aborted", "AbortError"));            });        },    );}/* ---------------------------- Glyph primitives ---------------------------- */function Person({ img, name }: { img: string; name: string }) {    return (        <Avatar className="size-5">            <AvatarImage                src={`https://randomuser.me/api/portraits/${img}.jpg`}                alt={name}            />            <AvatarFallback className="text-[10px]">                {name                    .split(" ")                    .map((part) => part[0])                    .join("")}            </AvatarFallback>        </Avatar>    );}// Nobody, as a real Avatar rather than a lookalike span, so AvatarGroup rings// and overlaps it like the others.function Unassigned() {    return (        <Avatar className="size-5">            <AvatarFallback className="text-muted-foreground [&_svg]:size-3">                <UserMinusIcon aria-hidden="true" />            </AvatarFallback>        </Avatar>    );}/* -------------------------- Stacked value renderers ----------------------- */// Overlapping status dots plus a count, instead of "3 selected".function StackedDots({ options }: { options: FilterOption[] }) {    if (options.length === 0) return <>any status</>;    const [first] = options;    if (first && options.length === 1) {        const only = STATUSES.find((entry) => entry.value === first.value);        return (            <span className="flex items-center gap-1.5">                <StatusDot tone={only?.tone ?? "neutral"} />                {first.label}            </span>        );    }    return (        <span className="flex items-center gap-1.5">            <span className="flex items-center">                {options.slice(0, 4).map((option) => {                    const entry = STATUSES.find(                        (candidate) => candidate.value === option.value,                    );                    return (                        <span                            key={option.value}                            className={cn(                                "ring-background -ml-1 size-2.5 rounded-full ring-2 first:ml-0",                                entry                                    ? statusDotClass[entry.tone]                                    : "bg-subtle-foreground",                            )}                        />                    );                })}            </span>            <span className="text-muted-foreground text-xs tabular-nums">                {options.length}            </span>        </span>    );}// The StatusDot tone fills, as literal class strings for the collapsed stack.const statusDotClass: Record<StatusTone, string> = {    neutral: "bg-subtle-foreground",    primary: "bg-primary",    success: "bg-success",    warning: "bg-warning",    danger: "bg-destructive",    info: "bg-info",};// The same three branches as StackedDots, in the star language.function StackedStars({ options }: { options: FilterOption[] }) {    if (options.length === 0) return <>any priority</>;    const [first] = options;    if (first && options.length === 1) {        const only = PRIORITIES.find((entry) => entry.value === first.value);        return (            <span className="flex items-center gap-1.5">                <StarIcon                    aria-hidden="true"                    className={cn(                        "size-3.5",                        only ? starColor[only.color] : "text-muted-foreground",                    )}                />                {first.label}            </span>        );    }    return (        <span className="flex items-center gap-1.5">            <span className="flex items-center">                {options.slice(0, 4).map((option) => {                    const entry = PRIORITIES.find(                        (candidate) => candidate.value === option.value,                    );                    return (                        <StarIcon                            key={option.value}                            aria-hidden="true"                            className={cn(                                "-ml-0.5 size-3.5 first:ml-0",                                entry                                    ? starColor[entry.color]                                    : "text-muted-foreground",                            )}                        />                    );                })}            </span>            <span className="text-muted-foreground text-xs tabular-nums">                {options.length}            </span>        </span>    );}// A teammate's face, or the icon that stands in for nobody.function Face({ option }: { option: FilterOption }) {    const entry = TEAM.find((candidate) => candidate.value === option.value);    return entry ? (        <Person img={entry.img} name={entry.label} />    ) : (        <Unassigned />    );}// A real AvatarGroup, plus an overflow count.function StackedPeople({ options }: { options: FilterOption[] }) {    if (options.length === 0) return <>anyone</>;    const [first] = options;    if (first && options.length === 1) {        return (            <span className="flex items-center gap-1.5">                <Face option={first} />                {first.label}            </span>        );    }    const overflow = options.length - 3;    return (        <span className="flex items-center gap-1.5">            <AvatarGroup className="-space-x-1 *:data-[slot=avatar]:size-4">                {options.slice(0, 3).map((option) => (                    <Face key={String(option.value)} option={option} />                ))}            </AvatarGroup>            {overflow > 0 ? (                <span className="text-muted-foreground text-xs tabular-nums">                    +{overflow}                </span>            ) : null}        </span>    );}/* -------------------------------- Component ------------------------------- */const fields: FilterField[] = [    {        id: "description",        label: "Description",        type: "text",        icon: <TypeIcon aria-hidden="true" />,    },    {        id: "status",        label: "Status",        type: "select",        defaultOperator: "is_any_of",        icon: <CircleDotIcon aria-hidden="true" />,        options: STATUSES.map((entry) => ({            value: entry.value,            label: entry.label,            icon: <StatusDot tone={entry.tone} />,        })),        // The one field here that turns its search box off: still rendered, only        // visually hidden, so it keeps focus and typing still narrows.        searchable: false,        // Stack the picks at the top, with a rule under them.        pinSelected: true,        renderValue: ({ options }) => <StackedDots options={options} />,    },    {        id: "priority",        label: "Priority",        // A task has ONE priority, so `is` (the single-valued operator) is the        // default; `is any of` stays in the menu for filtering on several at once.        type: "select",        defaultOperator: "is",        placeholder: "Search priority...",        icon: <StarIcon aria-hidden="true" />,        options: PRIORITIES.map((entry) => ({            value: entry.value,            label: entry.label,            icon: (                <StarIcon                    aria-hidden="true"                    className={cn("size-3.5", starColor[entry.color])}                />            ),        })),        pinSelected: true,        renderValue: ({ options }) => <StackedStars options={options} />,    },    {        id: "assignee",        label: "Assignee",        type: "multiselect",        placeholder: "Search people...",        icon: <UserRoundCheckIcon aria-hidden="true" />,        options: [            ...TEAM.map((person) => ({                value: person.value,                label: person.label,                icon: <Person img={person.img} name={person.label} />,            })),            // "Nobody" is a real filter: `exclusive` clears the other picks and sits            // under a rule of its own below the people.            {                value: "unassigned",                label: "Unassigned",                icon: <Unassigned />,                exclusive: true,            },        ],        pinSelected: true,        // A list of people carries no semantic order, so this one opts into        // alphabetical. "Unassigned" is grouped by role, not by whether it is ticked.        sortSelected: "label",        // Bigger on both axes, because this is the field where the stack has to be        // readable and the rows are the widest the primitive draws.        className: "w-64 [--cascader-max-height:26rem]",        renderValue: ({ options }) => <StackedPeople options={options} />,    },    {        id: "country",        label: "Country",        type: "select",        defaultOperator: "is_any_of",        placeholder: "Search countries...",        // 120 options, so the editor shows its search box and the list scrolls.        options: COUNTRIES,        pinSelected: true,        icon: <GlobeIcon aria-hidden="true" />,    },    {        id: "contact",        label: "Contact",        type: "select",        defaultOperator: "is_any_of",        placeholder: "Search contacts...",        // Paged over the wire, with abort and a Load more row.        loadOptions: (query, { signal, cursor }) =>            searchDirectory(query, signal, cursor),        pinSelected: true,        icon: <BookUserIcon aria-hidden="true" />,    },    {        id: "company",        label: "Company",        icon: <Building2Icon aria-hidden="true" />,        // Nested. A branch NAVIGATES: pressing it opens its attributes and never        // commits a filter on itself.        fields: [            { id: "name", label: "Name", type: "text" },            { id: "domain", label: "Domain", type: "text" },            {                id: "team",                label: "Team",                count: 26,                fields: [                    { id: "lead", label: "Lead", type: "text" },                    { id: "size", label: "Size", type: "number" },                ],            },            {                id: "location",                label: "Primary location",                count: 3,                fields: [                    { id: "city", label: "City", type: "text" },                    { id: "country", label: "Country", type: "text" },                ],            },        ],    },    {        id: "score",        label: "Score",        type: "number",        icon: <HashIcon aria-hidden="true" />,    },    {        id: "archived",        label: "Archived",        type: "boolean",        icon: <ArchiveIcon aria-hidden="true" />,    },];export function EverythingBar() {    const [query, setQuery] = React.useState<FilterQuery>(() =>        createFilterQuery([            // Four assignees overflow the group and print "+1"; one urgent priority            // shows a single star, so both stacked languages are visible on the            // closed bar.            createFilterRule({                id: "seed-1",                path: ["assignee"],                operator: "has_any_of",                value: ["ada", "grace", "alan", "katherine"],            }),            createFilterRule({                id: "seed-2",                path: ["priority"],                operator: "is",                value: ["urgent"],            }),        ]),    );    return (        <div className="flex w-full flex-col gap-5">            <Filters                fields={fields}                query={query}                onQueryChange={setQuery}                showClear            />            <pre className="max-h-80 w-full overflow-auto rounded-md border border-border bg-muted p-3 text-xs">                {JSON.stringify(query, null, 2)}            </pre>        </div>    );}

import { Filters } from "@oration/canon/components/filters";import {    createFilterQuery,    createFilterRule,} from "@oration/canon/components/filters/query";import type {    FilterField,    FilterQuery,    FilterValueType,} from "@oration/canon/components/filters/types";import {    CheckSquareIcon,    HashIcon,    LayersIcon,    ListIcon,    MapPinIcon,    TagsIcon,    TypeIcon,    UserIcon,    UsersIcon,} from "lucide-react";import * as React from "react";/* ------------------------------- Type icons ------------------------------ */// One icon per value type, created once and shared by reference. A branch earns// a bespoke icon; a leaf carries its TYPE instead, because three rows into a// level of 250 the useful question is "number, word or choice".const TYPE_ICON: Partial<Record<FilterValueType, FilterField["icon"]>> = {    text: <TypeIcon aria-hidden="true" />,    number: <HashIcon aria-hidden="true" />,    select: <ListIcon aria-hidden="true" />,    multiselect: <TagsIcon aria-hidden="true" />,    boolean: <CheckSquareIcon aria-hidden="true" />,};// The compact form a generated attribute is written in.type Attribute = [label: string, type: FilterValueType, options?: string[]];const slugify = (label: string) =>    label.toLowerCase().replace(/[^a-z0-9]+/g, "-");// Option labels, slugged into the values a query is stored with.const toOptions = (labels: string[]) =>    labels.map((label) => ({ value: slugify(label), label }));// One leaf from its compact form. `copy` numbers the repeats past the first.function toField([label, type, options]: Attribute, copy = 1): FilterField {    const name = copy > 1 ? `${label} ${copy}` : label;    return {        id: slugify(name),        label: name,        type,        icon: TYPE_ICON[type],        options: options && toOptions(options),    };}/* -------------------------- A hand written level -------------------------- */// A field holding `fields` renders as a branch, and a branch always DRILLS IN.// `keywords` are matched by search alongside the label and never drawn, so they// absorb the words users actually type (postcode / zip).const CORE: FilterField[] = [    {        id: "record-id",        label: "Record ID",        type: "text",        keywords: ["uuid", "primary key", "identifier"],        placeholder: "8f14e45f",        icon: <HashIcon aria-hidden="true" />,    },    {        id: "name",        label: "Name",        icon: <UserIcon aria-hidden="true" />,        fields: [            { id: "first", label: "First", type: "text", icon: TYPE_ICON.text },            { id: "last", label: "Last", type: "text", icon: TYPE_ICON.text },            {                id: "full",                label: "Full",                type: "text",                icon: TYPE_ICON.text,                keywords: ["display name", "whole name"],            },        ],    },    {        id: "team",        label: "Team",        icon: <UsersIcon aria-hidden="true" />,        fields: [            {                id: "lead",                label: "Lead",                type: "text",                icon: TYPE_ICON.text,                keywords: ["manager", "owner", "reports to"],            },            {                id: "size",                label: "Size",                type: "number",                icon: TYPE_ICON.number,                keywords: ["headcount", "seats"],            },            {                id: "department",                label: "Department",                type: "select",                icon: TYPE_ICON.select,                keywords: ["function", "discipline"],                options: toOptions([                    "Engineering",                    "Design",                    "Sales",                    "Marketing",                    "Support",                    "Finance",                ]),            },            {                id: "region",                label: "Region",                type: "select",                icon: TYPE_ICON.select,                keywords: ["territory", "market"],                options: toOptions(["North America", "EMEA", "APAC", "LATAM"]),            },        ],    },    {        id: "location",        label: "Primary location",        icon: <MapPinIcon aria-hidden="true" />,        fields: [            {                id: "city",                label: "City",                type: "text",                icon: TYPE_ICON.text,                keywords: ["town"],            },            {                id: "country",                label: "Country",                type: "text",                icon: TYPE_ICON.text,                keywords: ["market"],            },            {                id: "postcode",                label: "Postcode",                type: "text",                icon: TYPE_ICON.text,                placeholder: "SW1A",                keywords: ["zip", "postal code", "zip code"],            },        ],    },];/* ------------------------- A workspace sized level ------------------------ */const ATTRIBUTES_PER_OBJECT = 250;// What every object carries, cycled to fill the level out.const GENERIC: Attribute[] = [    ["Owner", "text"],    ["Source", "select", ["Organic", "Paid", "Referral", "Event", "Outbound"]],    ["Health score", "number"],    ["Tags", "multiselect", ["Beta", "Churn risk", "Expansion", "VIP"]],    ["External ID", "text"],    ["Archived", "boolean"],];// What each object OPENS with: the attributes that only it has.const OBJECTS: Record<string, Attribute[]> = {    Person: [        [            "Lifecycle stage",            "select",            [                "Subscriber",                "Lead",                "Qualified",                "Opportunity",                "Customer",                "Churned",            ],        ],        ["Job title", "text"],        ["Lead score", "number"],        ["Email opt in", "boolean"],    ],    Company: [        [            "Industry",            "select",            ["Software", "Retail", "Finance", "Healthcare", "Manufacturing"],        ],        ["Employees", "number"],        ["Domain", "text"],        ["Publicly listed", "boolean"],    ],    Deal: [        [            "Stage",            "select",            ["Discovery", "Demo", "Proposal", "Negotiation", "Won", "Lost"],        ],        ["Amount", "number"],        ["Close quarter", "select", ["Q1", "Q2", "Q3", "Q4"]],        ["Forecast committed", "boolean"],    ],    Ticket: [        ["Severity", "select", ["Sev 1", "Sev 2", "Sev 3", "Sev 4"]],        ["Queue", "select", ["Billing", "Onboarding", "Bugs", "How to"]],        ["First response minutes", "number"],        ["Breached SLA", "boolean"],    ],    Invoice: [        ["Status", "select", ["Draft", "Open", "Paid", "Overdue", "Void"]],        ["Total", "number"],        ["Currency", "select", ["USD", "EUR", "GBP", "JPY"]],        ["Auto charge", "boolean"],    ],    Campaign: [        [            "Channel",            "select",            ["Email", "Paid search", "Paid social", "Webinar", "Field event"],        ],        ["Budget", "number"],        ["Audience", "multiselect", ["Trial", "Free", "Paid", "Partner"]],        ["Running", "boolean"],    ],    Product: [        ["Category", "select", ["Hardware", "Software", "Service", "Add on"]],        ["Price", "number"],        ["SKU", "text"],        ["In catalogue", "boolean"],    ],    Workspace: [        ["Plan", "select", ["Free", "Pro", "Business", "Enterprise"]],        ["Seats", "number"],        ["Data region", "select", ["US east", "EU west", "AP south"]],        ["SSO enforced", "boolean"],    ],};// Eight objects of 250 attributes each, 2,000 in all, under one branch. Each// object opens with the attributes that belong to it and pads out with the// generic ones. Both generated branches state their `count` rather than letting// the row count the children it was handed.function buildCustomFields(): FilterField {    const entries = Object.entries(OBJECTS);    return {        id: "custom",        label: "Custom fields",        count: entries.length * ATTRIBUTES_PER_OBJECT,        icon: <LayersIcon aria-hidden="true" />,        fields: entries.map(([object, own]) => ({            id: slugify(object),            label: object,            count: ATTRIBUTES_PER_OBJECT,            fields: Array.from(                { length: ATTRIBUTES_PER_OBJECT },                (_, index) => {                    const ownAttribute = own[index];                    if (index < own.length && ownAttribute)                        return toField(ownAttribute);                    const position = index - own.length;                    const generic: Attribute = GENERIC[                        position % GENERIC.length                    ] ?? ["Owner", "text"];                    return toField(                        generic,                        Math.floor(position / GENERIC.length) + 1,                    );                },            ),        })),    };}const FIELDS: FilterField[] = [...CORE, buildCustomFields()];/* -------------------------------- Component ------------------------------- */export function NestedWorkspace() {    // ONE seeded rule, three segments deep into the level holding 2,000    // attributes. A chip prints its whole chain, so the drill-down is legible    // without opening the picker.    const [query, setQuery] = React.useState<FilterQuery>(() =>        createFilterQuery([            createFilterRule({                id: "seed-1",                path: ["custom", "person", "lifecycle-stage"],                operator: "is",                value: "customer",            }),        ]),    );    return (        <Filters            fields={FIELDS}            query={query}            onQueryChange={setQuery}            showClear            className="w-full"        />    );}

import { Filters } from "@oration/canon/components/filters";import {    createFilterQuery,    createFilterRule,} from "@oration/canon/components/filters/query";import type {    FilterField,    FilterOption,    FilterQuery,} from "@oration/canon/components/filters/types";import { Tag, type TagColor } from "@oration/canon/components/tag";import { cn } from "@oration/canon/lib/utils";import { CircleDotIcon, FlagIcon, TypeIcon } from "lucide-react";import * as React from "react";/* --------------------------------- Tones --------------------------------- */interface Tone {    value: string;    label: string;    // A categorical tag hue from Canon's ten-hue family: a stable colour label    // with no ranking in it, used both for the chip badge and the collapsed stack.    color: TagColor;}// Six statuses, six hues, each spent once. The palette is settled by the// smallest place it appears: two hues that collapse to one at the 10px the// stack draws them must be split apart on the row too.const STATUSES: Tone[] = [    { value: "backlog", label: "Backlog", color: "gray" },    { value: "in-progress", label: "In progress", color: "amber" },    { value: "review", label: "In review", color: "blue" },    { value: "done", label: "Done", color: "green" },    { value: "shipped", label: "Shipped", color: "violet" },    { value: "cancelled", label: "Cancelled", color: "red" },];const PRIORITIES: Tone[] = [    { value: "low", label: "Low", color: "green" },    { value: "medium", label: "Medium", color: "amber" },    { value: "high", label: "High", color: "violet" },    { value: "urgent", label: "Urgent", color: "orange" },    { value: "critical", label: "Critical", color: "red" },];const TONES = new Map(    [...STATUSES, ...PRIORITIES].map((tone) => [tone.value, tone]),);// The categorical dot fills, as literal class strings so Tailwind can scan// them. The deep `-fg` token keeps a 10px dot reading at full weight.const tagDot: Record<TagColor, string> = {    gray: "bg-(--tag-gray-fg)",    blue: "bg-(--tag-blue-fg)",    indigo: "bg-(--tag-indigo-fg)",    violet: "bg-(--tag-violet-fg)",    pink: "bg-(--tag-pink-fg)",    red: "bg-(--tag-red-fg)",    orange: "bg-(--tag-orange-fg)",    amber: "bg-(--tag-amber-fg)",    green: "bg-(--tag-green-fg)",    teal: "bg-(--tag-teal-fg)",};// The option row's colour. A swatch rather than a full badge, because the row// already prints the word beside it. Round, and the size the collapsed stack// uses, so one status is one shape wherever it shows.function Swatch({ tone }: { tone: Tone }) {    return (        <span            aria-hidden="true"            className={cn("size-2.5 shrink-0 rounded-full", tagDot[tone.color])}        />    );}function toOptions(tones: Tone[]): FilterOption[] {    return tones.map((tone) => ({        value: tone.value,        label: tone.label,        icon: <Swatch tone={tone} />,    }));}/* ---------------------------- Value renderers ----------------------------- */// Where a chip stops being a chip. Two coloured words fit beside a field name// and an operator; a third wraps the chip, so past this the picks collapse to a// stack that is one width no matter how many are selected.const BADGE_LIMIT = 2;// Colour badges while they fit, a stack once they do not. `renderValue`// receives the RESOLVED options, so a display never looks a stored id up.function BadgesOrStack({    options,    fallback,}: {    options: FilterOption[];    fallback: string;}) {    if (options.length === 0) return <>{fallback}</>;    if (options.length > BADGE_LIMIT) return <StackedDots options={options} />;    return (        <span className="flex items-center gap-2">            {options.map((option) => (                <Tag                    key={option.value}                    color={TONES.get(option.value)?.color ?? "gray"}                >                    {option.label}                </Tag>            ))}        </span>    );}// Overlapping swatches plus a count. Four is the cap on the swatches, not on// the picks: the count is the honest number and the stack is only the palette// behind it.function StackedDots({ options }: { options: FilterOption[] }) {    return (        <span className="flex items-center gap-1.5">            <span className="flex items-center">                {options.slice(0, 4).map((option) => (                    <span                        key={option.value}                        className={cn(                            "ring-background -ml-1 size-2.5 rounded-full ring-2 first:ml-0",                            tagDot[TONES.get(option.value)?.color ?? "gray"],                        )}                    />                ))}            </span>            <span className="text-muted-foreground text-xs tabular-nums">                {options.length}            </span>        </span>    );}/* -------------------------------- Component ------------------------------- */const fields: FilterField[] = [    {        id: "status",        label: "Status",        type: "select",        // `is_any_of` has arity "many", so the single-valued field still opens a        // multi-select editor. Arity decides the editor, not the field's type.        defaultOperator: "is_any_of",        options: toOptions(STATUSES),        // Six rows read as colours, so a search box over them is chrome. Hidden        // rather than removed, so typing still narrows.        searchable: false,        renderValue: ({ options }) => (            <BadgesOrStack options={options} fallback="any status" />        ),        icon: <CircleDotIcon aria-hidden="true" />,    },    {        id: "priority",        label: "Priority",        type: "multiselect",        options: toOptions(PRIORITIES),        searchable: false,        renderValue: ({ options }) => (            <BadgesOrStack options={options} fallback="any priority" />        ),        icon: <FlagIcon aria-hidden="true" />,    },    {        id: "title",        label: "Title",        type: "text",        icon: <TypeIcon aria-hidden="true" />,    },];export function ColourBadges() {    const [query, setQuery] = React.useState<FilterQuery>(() =>        createFilterQuery([            // Five of the six statuses: everything not called off. Past the badge            // limit, so this chip opens on the stack.            createFilterRule({                id: "seed-1",                path: ["status"],                operator: "is_any_of",                value: ["backlog", "in-progress", "review", "done", "shipped"],            }),            // Two, so the same renderer opens on badges. Ticking a third switches the            // chip to the stack.            createFilterRule({                id: "seed-2",                path: ["priority"],                operator: "has_any_of",                value: ["urgent", "critical"],            }),            // "is not empty" carries arity "none", so this chip renders with no value            // segment at all.            createFilterRule({                id: "seed-3",                path: ["title"],                operator: "not_empty",            }),        ]),    );    return (        <Filters            fields={fields}            query={query}            onQueryChange={setQuery}            showClear        />    );}

import {    Avatar,    AvatarFallback,    AvatarGroup,    AvatarImage,} from "@oration/canon/components/avatar";import { Button } from "@oration/canon/components/button";import { Filters } from "@oration/canon/components/filters";import {    createFilterQuery,    createFilterRule,} from "@oration/canon/components/filters/query";import type {    FilterField,    FilterOption,    FilterQuery,} from "@oration/canon/components/filters/types";import { BookUserIcon, Building2Icon, UserRoundCheckIcon } from "lucide-react";import * as React from "react";/* -------------------------------------------------------------------------- *//*                                  Fixtures                                  *//* -------------------------------------------------------------------------- */interface Person {    value: string;    label: string;    img: string;}function Face({ img, name }: { img: string; name: string }) {    return (        <Avatar className="size-5">            <AvatarImage                src={`https://randomuser.me/api/portraits/${img}.jpg`}                alt={name}            />            <AvatarFallback className="text-[10px]">                {name                    .split(" ")                    .map((part) => part[0])                    .join("")}            </AvatarFallback>        </Avatar>    );}const TEAM = [    { value: "ada", label: "Ada Nowak", img: "women/1", role: "Engineering" },    {        value: "grace",        label: "Grace Mendez",        img: "women/2",        role: "Engineering",    },    { value: "alan", label: "Alan Pereira", img: "men/3", role: "Research" },    {        value: "katherine",        label: "Katherine Boyd",        img: "women/4",        role: "Research",    },    { value: "edsger", label: "Edsger Vos", img: "men/5", role: "Platform" },    {        value: "barbara",        label: "Barbara Quinn",        img: "women/6",        role: "Platform",    },    { value: "tim", label: "Tim Fletcher", img: "men/7", role: "Design" },    {        value: "margaret",        label: "Margaret Hale",        img: "women/8",        role: "Design",    },];/** A directory far too large to ship to the client, so it pages over the wire. */const DIRECTORY: Person[] = Array.from({ length: 5000 }, (_, index) => ({    value: `u-${index}`,    label: `Contact ${index + 1}`,    img: `${index % 2 === 0 ? "women" : "men"}/${index % 90}`,}));function toOption(person: Person): FilterOption {    return {        value: person.value,        label: person.label,        icon: <Face img={person.img} name={person.label} />,        // The whole person rides along, so `renderValue` can draw the face from        // the RESOLVED option rather than keeping a lookup of its own.        data: person,    };}/** * One page of the directory, over a fake wire. * * `loadOptions` receives an AbortSignal and an optional cursor. Debouncing the * search, aborting a superseded request, appending the next page and caching a * loaded value's label all come from the shared option service, so a field only * has to fetch. */function searchDirectory(query: string, signal: AbortSignal, cursor?: string) {    const needle = query.trim().toLowerCase();    const matches = DIRECTORY.filter((person) =>        person.label.toLowerCase().includes(needle),    );    const start = cursor ? Number(cursor) : 0;    const next = start + 25;    return new Promise<{ items: FilterOption[]; nextCursor?: string }>(        (resolve, reject) => {            const timer = setTimeout(                () =>                    resolve({                        items: matches.slice(start, next).map(toOption),                        nextCursor:                            next < matches.length ? String(next) : undefined,                    }),                280,            );            signal.addEventListener("abort", () => {                clearTimeout(timer);                reject(new DOMException("Aborted", "AbortError"));            });        },    );}/** Names for ids nobody has searched for. The saved-view half of the problem. */function fetchPeople(ids: string[]): Promise<Person[]> {    const wanted = new Set(ids);    return new Promise((resolve) => {        setTimeout(            () =>                resolve(DIRECTORY.filter((person) => wanted.has(person.value))),            240,        );    });}/* -------------------------------------------------------------------------- *//*                             Stacked avatars                                *//* -------------------------------------------------------------------------- *//** * Overlapping avatars plus a count, instead of "4 selected". The same treatment * the first example uses, on the faces this one already has. A real * `AvatarGroup`, so the overlap and the ring come from the part rather than * from a wrapper span pretending to be one. The count appears only on genuine * overflow, so three picks show three faces and no redundant "3" beside them. */function StackedFaces({ people }: { people: Person[] }) {    if (people.length === 0) return <>anyone</>;    const [first] = people;    if (people.length === 1 && first) {        return (            <span className="flex items-center gap-1.5">                <Face img={first.img} name={first.label} />                {first.label}            </span>        );    }    const overflow = people.length - 3;    return (        <span className="flex items-center gap-1.5">            <AvatarGroup className="-space-x-1 *:data-[slot=avatar]:size-4">                {people.slice(0, 3).map((person) => (                    <Face                        key={person.value}                        img={person.img}                        name={person.label}                    />                ))}            </AvatarGroup>            {overflow > 0 ? (                <span className="text-xs text-muted-foreground tabular-nums">                    +{overflow}                </span>            ) : null}        </span>    );}/* -------------------------------------------------------------------------- *//*                                  Queries                                   *//* -------------------------------------------------------------------------- *//** * What a persisted view actually looks like: ids only, no labels. * * Two rules, because the ids in them resolve by two different routes. The team * is closed, so its labels ship with the schema; the contacts are ids out of a * directory nobody has searched yet, and only the field's own `resolveValues` * can turn those into names. */const SAVED_VIEW: FilterQuery = createFilterQuery([    createFilterRule({        id: "saved-1",        path: ["assignee"],        operator: "has_any_of",        value: ["edsger", "barbara", "tim"],    }),    createFilterRule({        id: "saved-2",        path: ["contact"],        operator: "is_any_of",        value: ["u-41", "u-1200", "u-3311", "u-4802"],    }),]);const SEED: FilterQuery = createFilterQuery([    createFilterRule({        id: "seed-1",        path: ["assignee"],        operator: "has_any_of",        value: ["ada", "grace", "alan", "katherine"],    }),]);/* -------------------------------------------------------------------------- *//*                                   Schema                                   *//* -------------------------------------------------------------------------- */const fields: FilterField[] = [    {        id: "assignee",        label: "Assignee",        type: "multiselect",        // The option panel, widened by the field that needs it: these rows carry a        // 20px face, a full name and a role beneath it.        className: "w-56",        // A closed team: options ship with the schema, each row carrying a face        // and the person's group as its description.        options: TEAM.map((person) => ({            ...toOption(person),            description: person.role,        })),        renderValue: ({ options }) => (            <StackedFaces                people={options.map((option) => option.data as Person)}            />        ),        icon: <UserRoundCheckIcon aria-hidden="true" />,    },    {        id: "contact",        label: "Contact",        type: "select",        defaultOperator: "is_any_of",        placeholder: "Search 5,000 contacts...",        loadOptions: (search, { signal, cursor }) =>            searchDirectory(search, signal, cursor),        /**         * The saved-view half. A restored query holds ids the loader has never         * returned, so the primitive asks for exactly the values it is holding,         * caches what comes back, and every chip under this root reads the         * result: no app-level id cache, no effect watching the query.         */        resolveValues: (ids) =>            fetchPeople(ids).then((people) => people.map(toOption)),        renderValue: ({ values, options, labels }) => {            // Between restore and resolution there are values but no options yet;            // the count keeps the chip honest until the names land.            if (values.length > 0 && options.length === 0) {                return labels.valueCount(values.length);            }            return (                <StackedFaces                    people={options.map((option) => option.data as Person)}                />            );        },        icon: <BookUserIcon aria-hidden="true" />,    },    {        id: "company",        label: "Company",        type: "text",        icon: <Building2Icon aria-hidden="true" />,    },];export function AvatarsPaging() {    const [query, setQuery] = React.useState<FilterQuery>(SEED);    return (        <div className="flex w-full flex-col gap-4">            <Filters                fields={fields}                query={query}                onQueryChange={setQuery}                showClear            />            {/* Below the bar: these act ON the query the bar owns, so they read as          its footer rather than as a second toolbar above it. */}            <div className="flex flex-wrap items-center gap-2">                <Button variant="outline" onClick={() => setQuery(SAVED_VIEW)}>                    Restore saved view                </Button>                <Button variant="ghost" onClick={() => setQuery(SEED)}>                    Reset                </Button>            </div>        </div>    );}