torch-glare 2.4.4 → 2.5.0

package/apps/lib/components/DataViews/data-views.tsx

@@ -0,0 +1,383 @@
+"use client";
+
+import React, { Children, useCallback, useEffect, useMemo, useState } from "react";
+import { cn } from "../../utils/cn";
+import { defaultGetRowId } from "../../utils/dataViews/path";
+import { emptyQuery } from "../../utils/dataViews/query";
+import type {
+  ColumnState,
+  DataViewsQuery,
+  FieldConfig,
+  FilterState,
+  Sort,
+} from "../../utils/dataViews/types";
+import {
+  DataContext,
+  FiltersContext,
+  PanelContext,
+  ViewContext,
+  type RegisteredView,
+} from "./context";
+import { Actions, Header, PanelToggle, Search, ViewSwitch } from "./header";
+import {
+  isHeaderElement,
+  isPanelElement,
+  isViewElement,
+  viewMetaOf,
+} from "./slots";
+import { collectFilterFields, Filters } from "./filters";
+import { Panel } from "./panel";
+import { BoardView } from "./views/board-view";
+import { Detail, InboxView } from "./views/inbox-view";
+import { TableView } from "./views/table-view";
+import { TreeView } from "./views/tree-view";
+import { useControllable } from "./hooks/useControllable";
+import type { DataViewsRootProps } from "./types";
+
+/**
+ * A cheap identity for a node used only as a memo key. React elements have no stable identity
+ * across renders, so an inline `<i className="ri-table-line"/>` would look new every time; the
+ * element's props are what actually distinguish one icon from another.
+ */
+function iconKey(icon: React.ReactNode): string {
+  if (icon === null || icon === undefined || typeof icon === "boolean") return "";
+  if (React.isValidElement(icon)) return JSON.stringify(icon.props ?? {});
+  return String(icon);
+}
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Resolve which fields to paint and in what order.
+ *
+ * The old code sorted `visibleFields` at five call sites with subtly different tie-breaks. There
+ * is one rule now: if `columns` is supplied it decides both visibility and order; anything not
+ * mentioned in it keeps its declaration order at the end.
+ */
+function resolveVisibleFields(
+  fields: readonly FieldConfig[],
+  columns: readonly ColumnState[] | undefined,
+): FieldConfig[] {
+  if (!columns || columns.length === 0) {
+    return fields.filter((f) => f.visible !== false && f.type !== "hidden");
+  }
+  const byPath = new Map(fields.map((f) => [f.path, f]));
+  const ordered: FieldConfig[] = [];
+  for (const col of columns) {
+    const field = byPath.get(col.path);
+    if (field && col.visible) ordered.push(field);
+    byPath.delete(col.path);
+  }
+  for (const field of byPath.values()) {
+    if (field.visible !== false && field.type !== "hidden") ordered.push(field);
+  }
+  return ordered;
+}
+
+function DataViewsRoot({
+  rows,
+  fields,
+  children,
+  getRowId = defaultGetRowId,
+  total = 0,
+  loading = false,
+  onLoadMore,
+  loadingMore = false,
+  query,
+  onQueryChange,
+  defaultQuery,
+  defaultView,
+  defaultPanelOpen = false,
+  onViewChange,
+  onSelectionChange,
+  onActiveIdChange,
+  theme,
+  className,
+}: DataViewsRootProps) {
+  const childArray = Children.toArray(children);
+
+  // A view exists because you rendered it. `Children.toArray` drops `false`/`null`, so
+  // `{canSeeTree && <DataViews.Tree/>}` un-registers that view — which is the intent.
+  const viewElements = childArray.filter(isViewElement);
+  const headerEl = childArray.find(isHeaderElement);
+  const panelEl = childArray.find(isPanelElement);
+  // Anything the root does not position itself — a `Filters` bar, a toolbar of your own — sits
+  // between the header and the views, in the order you wrote it.
+  const extras = childArray.filter(
+    (n) =>
+      !isViewElement(n) && !isHeaderElement(n) && !isPanelElement(n),
+  );
+
+  // `viewElements` is a fresh array on every render, so memoising on its identity would never
+  // hit. Key on what actually matters instead: which views are rendered and how they present.
+  // `icon` is part of that — leave it out and swapping only an icon leaves a stale one showing.
+  const viewKey = viewElements
+    .map((el) => `${el.props.id}|${el.props.label}|${iconKey(el.props.icon)}`)
+    .join(",");
+  const registered = useMemo<RegisteredView[]>(
+    () =>
+      viewElements.map((el) => {
+        const meta = viewMetaOf(el)!;
+        return {
+          id: el.props.id ?? meta.defaultId,
+          label: el.props.label ?? meta.defaultLabel,
+          icon: el.props.icon,
+        };
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on `viewKey`, see above
+    [viewKey],
+  );
+
+  const firstId = registered[0]?.id ?? "";
+
+  // ── The query: the only state that leaves ──────────────────────────────────
+  const [currentQuery, setQuery] = useControllable<DataViewsQuery>(
+    query,
+    onQueryChange,
+    emptyQuery(defaultQuery),
+  );
+
+  /**
+   * Change part of the query.
+   *
+   * Anything that changes *which* rows match starts a new result set, so the page goes back to 1 —
+   * filter down to three rows while sitting on page 4 and there is no page 4 to stay on. Only the
+   * component can do this: by the time a caller sees the change, the two have already been
+   * conflated into one object.
+   */
+  const patchQuery = useCallback(
+    (patch: Partial<DataViewsQuery>) => {
+      setQuery((prev) => {
+        const changesResultSet =
+          ("search" in patch && patch.search !== prev.search) ||
+          ("filters" in patch && patch.filters !== prev.filters) ||
+          ("sort" in patch && patch.sort !== prev.sort) ||
+          ("pageSize" in patch && patch.pageSize !== prev.pageSize);
+        return { ...prev, ...patch, ...(changesResultSet ? { page: 1 } : null) };
+      });
+    },
+    [setQuery],
+  );
+
+  // ── UI state: never leaves, so it is held rather than passed ───────────────
+  const [currentView, setCurrentView] = useState(defaultView ?? firstId);
+  const [currentColumns, setColumns] = useState<readonly ColumnState[]>([]);
+  const [currentSelection, setSelectionState] = useState<readonly string[]>([]);
+  const [currentActiveId, setActiveIdState] = useState<string | null>(null);
+  const [isPanelOpen, setPanelOpen] = useState(defaultPanelOpen);
+
+  // The observers are told, not asked: they report what the component decided, so an app can act
+  // on a selection or follow the open row without owning either.
+  const setSelection = useCallback(
+    (ids: readonly string[]) => {
+      setSelectionState(ids);
+      onSelectionChange?.(ids);
+    },
+    [onSelectionChange],
+  );
+  const setActiveId = useCallback(
+    (id: string | null) => {
+      setActiveIdState(id);
+      onActiveIdChange?.(id);
+    },
+    [onActiveIdChange],
+  );
+  const setView = useCallback(
+    (id: string) => {
+      setCurrentView(id);
+      onViewChange?.(id);
+    },
+    [onViewChange],
+  );
+
+  // If the active view stops being rendered, converge on the first one — in an effect, never
+  // during render, so a controlled consumer's state actually catches up.
+  const known = registered.some((v) => v.id === currentView);
+  useEffect(() => {
+    if (!known && firstId) setView(firstId);
+  }, [known, firstId, setView]);
+
+  const activeView = known ? currentView : firstId;
+  const activeElement = viewElements.find(
+    (el) => (el.props.id ?? viewMetaOf(el)!.defaultId) === activeView,
+  );
+
+  const visibleFields = useMemo(
+    () => resolveVisibleFields(fields, currentColumns),
+    [fields, currentColumns],
+  );
+
+  const dataValue = useMemo(
+    () => ({
+      rows,
+      fields,
+      visibleFields,
+      getRowId,
+      loading,
+      loadingMore,
+      // Derived, never passed: the component has both halves already, and a `hasMore` prop that
+      // disagreed with the rows on screen would be a second source of truth for the same fact.
+      hasMore: rows.length < total,
+      onLoadMore,
+    }),
+    [rows, fields, visibleFields, getRowId, loading, loadingMore, total, onLoadMore],
+  );
+
+  const setSearch = useCallback((search: string) => patchQuery({ search }), [patchQuery]);
+  const setSort = useCallback((sort: Sort) => patchQuery({ sort }), [patchQuery]);
+
+  const viewValue = useMemo(
+    () => ({
+      view: activeView,
+      setView,
+      views: registered,
+      search: currentQuery.search,
+      setSearch,
+      sort: currentQuery.sort,
+      setSort,
+      selection: currentSelection,
+      setSelection,
+      activeId: currentActiveId,
+      setActiveId,
+      columns: currentColumns,
+      setColumns,
+    }),
+    [
+      activeView,
+      setView,
+      registered,
+      currentQuery.search,
+      setSearch,
+      currentQuery.sort,
+      setSort,
+      currentSelection,
+      setSelection,
+      currentActiveId,
+      setActiveId,
+      currentColumns,
+      setColumns,
+    ],
+  );
+
+  const panelValue = useMemo(
+    () => ({ open: isPanelOpen, setOpen: setPanelOpen }),
+    [isPanelOpen, setPanelOpen],
+  );
+
+  // The descriptors as well as the value: `Filters.Summary` needs labels for its chips, and it is
+  // routinely rendered outside `Filters` — above the table, in a toolbar — where it cannot reach
+  // the context `Filters` provides to its own children.
+  const filterFields = useMemo(() => collectFilterFields(children), [children]);
+
+  const setFilters = useCallback(
+    (filters: FilterState) => patchQuery({ filters }),
+    [patchQuery],
+  );
+
+  const filtersValue = useMemo(
+    () => ({ filters: currentQuery.filters, setFilters, filterFields }),
+    [currentQuery.filters, setFilters, filterFields],
+  );
+
+  // The active view is always what renders. Nothing to show is shown as nothing — the view keeps
+  // its chrome and paints no rows — and `loading` is answered by the view's own skeleton, so the
+  // layout never swaps out from under the user.
+  const body = activeElement;
+
+  return (
+    <DataContext.Provider value={dataValue}>
+      <ViewContext.Provider value={viewValue}>
+        <PanelContext.Provider value={panelValue}>
+          <FiltersContext.Provider value={filtersValue}>
+            <div
+              data-theme={theme}
+              className={cn(
+                // The shell is always black: the dark header and the config rail sit on it, and
+                // the Master Container is the light surface inside. `overflow-hidden` traps child
+                // overflow — without it a tall panel body escapes and adds a page-level scrollbar
+                // on top of the panel's own.
+                "flex h-full min-h-0 gap-2 overflow-hidden bg-black",
+                "text-content-presentation-global-primary",
+                className,
+              )}
+            >
+              {/* Left column: header + content. Shrinks as the panel expands. */}
+              <div className="flex min-w-0 flex-1 flex-col gap-2">
+                {headerEl}
+                <main className="flex min-h-0 flex-1 overflow-hidden">
+                  {/* Master Container. It carries the surface — a form base and a 16px radius —
+                      so views paint over it where they want a different colour (the board reads
+                      grey, the split views black) and anything the root positions around one
+                      inherits it rather than landing on the black shell.
+
+                      No border: Figma draws one, but every view already brings its own edge — the
+                      table its header rule, the split views their panel borders — so it only ever
+                      read as a second outline around the first. */}
+                  <div className="bg-background-presentation-form-base flex flex-1 overflow-hidden rounded-[16px]">
+                    {/* Clip the scrollable surface to the parent radius minus its 1px border
+                        (16 − 1). At the full 16px the opaque view background sits flush with the
+                        outer edge and bleeds past it as a hairline on the straight sides. */}
+                    <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[15px]">
+                      {/* Anything the root does not position itself — a `Filters` bar, a toolbar
+                          of your own — sits above the view and *inside* the light surface, since
+                          its controls are host-themed and would be stranded on the black shell. */}
+                      {extras.length > 0 && (
+                        <div className="bg-background-presentation-form-base shrink-0">{extras}</div>
+                      )}
+                      {/* A column, so the active view stretches to the full width. As a row it
+                          would size each view to its content and leave the shell showing beside
+                          a narrow one. */}
+                      <div className="flex min-h-0 flex-1 flex-col overflow-auto">{body}</div>
+                    </div>
+                  </div>
+                </main>
+              </div>
+
+              {/* The rail is a sibling of the content, not a layer over it, so opening it narrows
+                  the view rather than covering it. */}
+              {panelEl}
+            </div>
+          </FiltersContext.Provider>
+        </PanelContext.Provider>
+      </ViewContext.Provider>
+    </DataContext.Provider>
+  );
+}
+
+/**
+ * DataViews — a compound, composition-based multi-view data surface. Author a screen as JSX:
+ *
+ * ```tsx
+ * <DataViews rows={rows} fields={fields} total={total} onQueryChange={setQuery}>
+ *   <DataViews.Header title="Orders">
+ *     <DataViews.ViewSwitch />
+ *     <DataViews.Search />
+ *   </DataViews.Header>
+ *   <DataViews.Table />
+ *   <DataViews.Board groups={groups} />
+ * </DataViews>
+ * ```
+ *
+ * A view exists **iff you render it** — there is no visibility map. DataViews is pure UI: it
+ * never filters, searches, sorts, groups or mutates. Hand it rows and it paints them; it hands
+ * you back what the user did so you can go and query.
+ */
+export const DataViews = Object.assign(DataViewsRoot, {
+  // shell
+  Header,
+  ViewSwitch,
+  Search,
+  Actions,
+  PanelToggle,
+  // panels
+  Panel,
+  Filters,
+  // views
+  Table: TableView,
+  Board: BoardView,
+  Inbox: InboxView,
+  Tree: TreeView,
+  Detail,
+  // states
+  // paging
+});

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

@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import { fieldKindOf } from "../../FormBuilder";
+import type { FilterFieldDescriptor } from "../../../utils/dataViews/types";
+import { toName } from "./values";
+import { Labelled } from "./labelled";
+
+/** How a FormBuilder field's value becomes a filter. Fields not listed here are not filters. */
+const AS_FILTER = {
+  text: { kind: "text" } as const,
+  choice: { kind: "choice", single: true } as const,
+  multiChoice: { kind: "choice", single: false } as const,
+  date: { kind: "date" } as const,
+  slider: { kind: "number" } as const,
+};
+
+/**
+ * Walk the children and describe every FormBuilder field among them.
+ *
+ * This is what `fields` used to be, except it is read from the controls you wrote rather than
+ * declared twice. The walk follows `props.children`, so a field stays visible through a plain
+ * wrapper; it cannot see through a component that builds the element itself, which is the same
+ * limitation the layout markers have.
+ *
+ * `Checkbox`, `Number`, `File` and friends have no filter meaning — a boolean is not a query and a
+ * file is not a value you can filter by — so they render but contribute nothing. `Filters.Custom`
+ * is the way to drive a filter no FormBuilder field covers.
+ */
+export function collectFilterFields(children: React.ReactNode): FilterFieldDescriptor[] {
+  const out: FilterFieldDescriptor[] = [];
+  const seen = new Set<string>();
+
+  const walk = (node: React.ReactNode) => {
+    if (Array.isArray(node)) {
+      node.forEach(walk);
+      return;
+    }
+    if (!React.isValidElement(node)) return;
+
+    const props = node.props as {
+      name?: string;
+      label?: React.ReactNode;
+      min?: number;
+      max?: number;
+      children?: React.ReactNode;
+    };
+    const kind = fieldKindOf(node);
+    const as = kind ? AS_FILTER[kind as keyof typeof AS_FILTER] : undefined;
+
+    if (as && props.name && !seen.has(props.name)) {
+      seen.add(props.name);
+      out.push({
+        path: props.name,
+        label: typeof props.label === "string" ? props.label : undefined,
+        ...as,
+        ...(as.kind === "number" ? { min: props.min ?? 0, max: props.max ?? 100 } : null),
+      });
+    }
+
+    walk(props.children);
+  };
+
+  walk(children);
+  return out;
+}
+
+/**
+ * Render the children, with two changes to every field.
+ *
+ * The `name` is escaped, because RHF reads `customer.name` as object nesting — the author writes
+ * the real path and `FilterState` stays keyed by it. Anything calling `setValue` on a filter has
+ * to use `toName(path)` for the same reason.
+ *
+ * The `label` moves out of the field and into `Labelled` above it: `"bare"` mode exists precisely
+ * to drop `FieldSection`'s label row, so a label left on the field would simply vanish.
+ */
+export function renderFields(children: React.ReactNode): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+
+    const props = child.props as { name?: string; label?: React.ReactNode; children?: React.ReactNode };
+
+    if (fieldKindOf(child) && props.name) {
+      return (
+        <Labelled label={props.label}>
+          {React.cloneElement(child, { name: toName(props.name), label: undefined } as never)}
+        </Labelled>
+      );
+    }
+
+    // Not a field — recurse so a control inside a wrapper still gets its name escaped.
+    if (props.children) {
+      return React.cloneElement(child, {} as never, renderFields(props.children));
+    }
+    return child;
+  });
+}

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { formatPathLabel } from "../../../utils/dataViews/path";
+import type { FilterValue } from "../../../utils/dataViews/types";
+import { useDataViewsFilters } from "../context";
+import { Labelled } from "./labelled";
+import type { FilterCustomProps } from "../types";
+
+/**
+ * `Filters.Custom` — the escape hatch. Renders whatever you return against this filter's slot in
+ * `FilterState`, bypassing the form entirely.
+ *
+ * Use it when no FormBuilder field produces the value you need — a bucket picker, a map region, a
+ * tri-state toggle.
+ *
+ * ```tsx
+ * <DataViews.Filters.Custom path="tags" render={({ value, setValue }) => (
+ *   <MyTagPicker value={value as string[]} onChange={setValue} />
+ * )} />
+ * ```
+ */
+export function Custom({ path, label, render }: FilterCustomProps) {
+  const { filters, setFilters } = useDataViewsFilters();
+  const text = label ?? formatPathLabel(path);
+
+  const setValue = (next: FilterValue | undefined) => {
+    const copy = { ...filters };
+    if (next === undefined) delete copy[path];
+    else copy[path] = next;
+    setFilters(copy);
+  };
+
+  return <Labelled label={text}>{render({ value: filters[path], setValue })}</Labelled>;
+}

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

@@ -0,0 +1,163 @@
+"use client";
+
+import { useId, useMemo, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { ConclusionHeader } from "../../ConclusionHeader";
+import { FormBuilder } from "../../FormBuilder";
+import { CellContext } from "../../FormBuilder/context";
+import { FiltersContext, useDataViewsFilters } from "../context";
+import { collectFilterFields, renderFields } from "./children";
+import { Custom } from "./custom";
+import { Presets } from "./presets";
+import { Summary } from "./summary";
+import { Sync } from "./sync";
+import { toFormValues } from "./values";
+import type { FiltersProps } from "../types";
+
+/**
+ * `DataViews.Filters` — the filter controls, written as a form.
+ *
+ * Three things to be clear about.
+ *
+ * **It does not filter.** It collects what the user asked for and calls `onValueChange`. Going and
+ * fetching the matching rows is your job, almost certainly server-side. The rows on screen change
+ * when you hand back different `rows` — never before.
+ *
+ * **The children are FormBuilder fields.** Not a config array describing fields — the fields
+ * themselves, one JSX child each, exactly as any other form in this library is written. They
+ * render through `CellContext` in `"bare"` mode: no `FieldSection` label row, no table borders,
+ * errors as tooltips.
+ *
+ * **What each child means comes from the field, not from you.** `FormBuilder` stamps every field
+ * with a `FieldKind` — see `fieldKindOf` — so a `MultiSelect` becomes a list of values, a `Slider`
+ * a numeric range, a `DateRange` a date range. Nothing is inferred from the rows.
+ *
+ * There is no `value`/`onValueChange` here: the filters live in the root's query, and this reads
+ * and writes them through `useDataViewsFilters()`. What leaves the component is `onQueryChange`.
+ *
+ * ```tsx
+ * <DataViews.Filters>
+ *   <FormBuilder.MultiSelect name="status" label="Status" options={STATUS} />
+ *   <FormBuilder.Slider name="total" label="Total" range min={0} max={15000} step={100} />
+ *   <DataViews.Filters.Presets for="total" items={[{ label: "Under $500", max: 500 }]} />
+ * </DataViews.Filters>
+ * ```
+ */
+function FiltersRoot({
+  children,
+  title = "Filters",
+  description,
+  clearLabel = "Clear",
+  collapsible = true,
+  defaultOpen = true,
+  className,
+}: FiltersProps) {
+  const { filters, setFilters } = useDataViewsFilters();
+
+  const fields = useMemo(() => collectFilterFields(children), [children]);
+
+  const value = useMemo(
+    () => ({ filters, setFilters, filterFields: fields }),
+    [filters, setFilters, fields],
+  );
+
+  const values = useMemo(() => toFormValues(filters, fields), [filters, fields]);
+  const active = Object.keys(filters).length > 0;
+
+  const [open, setOpen] = useState(defaultOpen);
+  const bodyId = useId();
+  const isCollapsible = collapsible && title != null;
+  const shown = !isCollapsible || open;
+
+  return (
+    <FiltersContext.Provider value={value}>
+      <div
+        className={cn(
+          "flex shrink-0 flex-col gap-3 px-4 py-3",
+          "border-border-presentation-global-primary border-b",
+          className,
+        )}
+      >
+        {(title || active) && (
+          // `ConclusionHeader` renders a `<button>`, so Clear cannot live inside it — nesting a
+          // button in a button is invalid and swallows the inner click. They are siblings.
+          <div className="flex items-center gap-2">
+            {title != null &&
+              (isCollapsible ? (
+                <ConclusionHeader
+                  label={title}
+                  open={open}
+                  onOpenChange={setOpen}
+                  aria-controls={bodyId}
+                  className="flex-1"
+                />
+              ) : (
+                // Reading the colour from a token rather than a `text-white` literal is what lets
+                // the same controls sit in the dark rail and in the light content area.
+                <h3 className="text-content-presentation-global-primary text-[18px] font-[510] leading-[1.32] tracking-[-0.01em]">
+                  {title}
+                </h3>
+              ))}
+            {active && (
+              <Button size="S" variant="BorderStyle" className="ms-auto" onClick={() => setFilters({})}>
+                {clearLabel}
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Below the header *row*, not inside it — that row is a flex line holding the header and
+            Clear as siblings, and the description belongs to the section, not beside the button. */}
+        {description != null && (
+          <p className="typography-body-small-regular text-content-presentation-global-primary">
+            {description}
+          </p>
+        )}
+
+        {/* `onSubmit` is required by FormBuilder but never reached — there is no submit button and
+            no Enter target. Filters emit as you touch them. */}
+        {/* `layout="bare"` because this form is embedded, not a page: FormBuilder's default
+            centres the fields at 1100px behind 48px gutters, which in a 260px rail leaves the
+            controls less room than their own minimum width and overflows them. */}
+        <FormBuilder
+          onSubmit={() => {}}
+          values={values}
+          fieldDirection="vertical"
+          layout="bare"
+        >
+          <Sync fields={fields} />
+          <CellContext.Provider value="bare">
+            {/* Same fold as `Panel.Section`: a 0fr→1fr grid row, and `inert` so a collapsed
+                filter's control leaves the tab order rather than staying focusable. */}
+            <div
+              id={bodyId}
+              inert={!shown}
+              aria-hidden={!shown}
+              className={cn(
+                "grid transition-[grid-template-rows,opacity] duration-200 ease-in-out",
+                "motion-reduce:transition-none",
+                shown ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+              )}
+            >
+              <div className="overflow-hidden">
+                <div className="flex flex-wrap items-start gap-3">{renderFields(children)}</div>
+              </div>
+            </div>
+          </CellContext.Provider>
+        </FormBuilder>
+      </div>
+    </FiltersContext.Provider>
+  );
+}
+
+
+/**
+ * The filter surface, assembled in one place. `Presets` and `Custom` are ours because FormBuilder
+ * has no field for them; everything else you write is a FormBuilder field.
+ */
+export const Filters = Object.assign(FiltersRoot, {
+  Presets,
+  Custom,
+  Summary,
+});

package/apps/lib/components/DataViews/filters/index.ts

@@ -0,0 +1,4 @@
+// The filter surface. `filters.tsx` assembles the compound; `children.tsx` is the walk that reads
+// your FormBuilder fields; `values.ts` is the pure mapping between `FilterState` and form values.
+export { Filters } from "./filters";
+export { collectFilterFields } from "./children";