Example 1 — Data Table Agent output ENGINEERING BRIEF Component: DataTable — Composite/Pattern Framework: Next.js (App Router) Component type: Pattern Architecture decision: Hybrid. Table shell, toolbar, and pagination are Server Components where possible, but sorting, filtering, selection state, and bulk actions require client interactivity. Client boundary is pushed as deep as possible — the interactive DataTable is a single Client Component subtree, accepting pre-fetched data as props so the parent page remains a Server Component. Design system: Minimal token system generated from Tailwind's design scale. All spacing, color, radius, and motion values map to Tailwind tokens — no arbitrary values. Pattern detected: Data Table (Admin/Dashboard pattern). Strategy: controlled sort/filter/pagination state colocated in a single reducer; row selection managed separately to avoid re-rendering the full table on selection changes; bulk actions as a derived action off selection state. --- DESIGN TOKENS ```ts // tokens.ts — consumed by the component, maps to Tailwind classes export const tokens = { // Typography text: { tableHeader: 'text-xs font-semibold uppercase tracking-wide', tableCell: 'text-sm', label: 'text-sm font-medium', caption: 'text-xs text-zinc-500 dark:text-zinc-400', placeholder: 'text-sm text-zinc-400 dark:text-zinc-500', }, // Color — semantic color: { surface: 'bg-white dark:bg-zinc-900', surfaceRaised: 'bg-zinc-50 dark:bg-zinc-800', border: 'border-zinc-200 dark:border-zinc-700', headerBg: 'bg-zinc-50 dark:bg-zinc-800', rowHover: 'hover:bg-zinc-50 dark:hover:bg-zinc-800/60', rowSelected: 'bg-blue-50 dark:bg-blue-950/40', textPrimary: 'text-zinc-900 dark:text-zinc-100', textMuted: 'text-zinc-500 dark:text-zinc-400', focusRing: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2', destructive: 'text-red-600 dark:text-red-400', destructiveBg: 'bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600', }, // Spacing spacing: { cellPadding: 'px-4 py-3', headerPadding: 'px-4 py-3', toolbarGap: 'gap-3', }, // Radius radius: { container: 'rounded-xl', input: 'rounded-lg', button: 'rounded-lg', badge: 'rounded-full', }, // Elevation elevation: { container: 'shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700', }, // Motion — always paired with motion-safe: motion: { row: 'motion-safe:transition-colors motion-safe:duration-150', toolbar: 'motion-safe:transition-all motion-safe:duration-200', fade: 'motion-safe:animate-in motion-safe:fade-in motion-safe:duration-200', }, } as const; ``` --- COMPONENT API ```ts // types.ts export type SortDirection = 'asc' | 'desc'; export interface SortState { column: string; direction: SortDirection; } export interface ColumnDef<TData> { /** Unique column identifier — used as sort key */ id: string; /** Column header label */ header: string; /** Accessor: keyof TData or a custom render function */ accessor: key