Dashboard widget

import {
  DashboardWidget,
  type DashboardWidgetConfig,
} from "@/components/blocks/dashboard-widget";

"use client";

import { DashboardWidget } from "@/components/blocks/dashboard-widget";
import type { FilterField } from "@/components/blocks/filter-builder";

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

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

export function Example() {
  return (
    <DashboardWidget
      records={TASKS}
      fields={FIELDS}
      defaultConfig={{ name: "My queue", content: "list" }}
    />
  );
}

DashboardWidget — one card, two faces

.t-flip (perspective box, height measured from the showing face, .t-resize tween)
└── .t-flip-inner (rotateY, data-flipped)
    ├── FRONT .t-flip-face
    │   ├── header — widget name · count pill · gear button → flips
    │   └── content — the records that pass `config.filters`
    │       ├── content: "list"  → ItemList    (listColumns)
    │       ├── content: "table" → DataGridV3  (tableColumns, read-only, no toolbar)
    │       └── emptyState when nothing passes
    └── BACK .t-flip-face.t-flip-back
        ├── header — back arrow · "Configure" · matched / total
        ├── TextField   — the widget's custom name
        ├── Select      — List / Table (only offered when tableColumns is given)
        ├── FilterBuilder inline — the shared nested AND/OR builder
        └── footer — Done → flips back

Config — the whole of a widget's state, one object to persist
DashboardWidgetConfig { name, content: "list" | "table", filters: FilterGroup }

Data flow
├── The widget never owns the records. It holds a FilterGroup and evaluates it
│   with `filterRecords(records, config.filters, fields)`, the same call a
│   board or a table makes — so a saved filter reads the same everywhere.
└── `config` / `onConfigChange` controlled, or `defaultConfig` uncontrolled.
    `flipped` / `onFlippedChange` does the same for the face, so a dashboard
    can put every widget into config mode at once.

Motion
├── .t-flip — rotateY(180deg) over --flip-dur / --flip-ease, backface hidden
├── .t-resize — the two faces rarely match height, so the box tweens between
│   them on the same curve rather than snapping
└── The hidden face is visibility:hidden, so it is out of the tab order and
    out of the accessibility tree — not just turned away from the viewer.