Selectable Cells

Requirements

• Render the supplied 5 × 5 grid. Layout, cell styles, and selection styles are provided.
• Primary-pointer down begins selection; dragging selects the inclusive rectangular range between the starting and current cells.
• Support forward and reverse drags, single-cell selection, and mouse, touch, or pen pointers.
• A normal drag replaces the previous selection. Ctrl or Cmd preserves the previous selection and adds the dragged rectangle.
• Keep tracking pointer movement and release outside the grid. Ignore unrelated pointers and non-primary mouse buttons.
• A pointer cancellation restores the selection that existed before the drag. Clear removes all selected cells.
• Show the selected count, set aria-selected on each cell, prevent unwanted text selection, and clean up document listeners on unmount.

Examples

Input: Drag from row 1, column 1 to row 3, column 3
Output: 9 cells selected