Scheduling interfaces—calendars, availability slots, on/off toggles across hours or days—demand a dense, scannable grid where clicking a cell (or dragging across cells) flips its state instantly. A naive grid breaks under touch, hidden columns become unaddressable, and agents can't find or toggle specific cells without DOM walking. A purpose-built primitive gives you drag-to-fill, row/column headers that toggle an entire strip, sparse labels that keep the UI legible at 20px cells, and stable data-* identifiers so agents can address cells directly.

TimeGrid is a controlled component rendering a rectangular table of toggleable cells. Pass rows (e.g., ["Sun","Mon",…]), cols (e.g., ["0","1",…,"23"]), and a value boolean matrix (rows.length × cols.length); every cell, row header, or column header click produces a new matrix via onChange. Customize the cell-on color via toneOn (eight Tailwind palette stops—violet, emerald, sky, rose, amber, indigo, blue, zinc), sizing via cellWidth and cellHeight, and set sparseColLabels to throttle top labels at small cells. Each cell emits data-react-fancy-timegrid-cell (defaulting to row:col, customizable via cellId); row/column headers carry data-react-fancy-timegrid-row and data-react-fancy-timegrid-col for MCP bridge addressability.

Import TimeGrid from @particle-academy/react-fancy, pass rows, cols, value (a 2D boolean array), and onChange: <TimeGrid rows={["Sun",…]} cols={["0",…]} value={matrix} onChange={setMatrix} />. Agents can toggle cells by cell ID without Playwright—use cellId to emit stable row-column addresses (e.g., cellId={(r,c) => `${row_name}:${col_name}`}), then call a bridge tool like timegrid_set_cell(id, true|false).