Spreadsheet Grid

Build a tiny spreadsheet: a grid of cells (columns A–D × rows 1–6) where a cell can hold a number, some text, or a formula like =A1+A2. A formula's value is computed from other cells, and editing a cell must recompute everything that depends on it. This is the core of any spreadsheet — a formula evaluator with dependency tracking — done as a single React component.

Task

The starter App.tsx renders each cell's raw string (so A3 literally shows =A1+A2). Make it a working sheet:

1. Evaluate formulas. Write evaluate(id, raw, seen): a non-formula cell returns its number (or text); a formula parses the expression after =, resolves each cell reference by recursively evaluating that cell, and computes + - * / and parentheses — without eval().
2. Show computed values. Render evaluate(id, ...) in each cell instead of the raw string. A parse/reference error shows #ERR.
3. Guard cycles. If a formula (directly or transitively) references its own cell, show #CYCLE instead of looping forever.
4. Select + edit. Clicking a cell selects it; the formula bar shows that cell's raw text. Committing the bar (Enter or blur) writes it back and the whole grid recomputes.

Examples

• With A1 = 10, A2 = 20, cell A3 = =A1+A2 displays 30. Editing A1 to 12 makes A3 show 32 and every dependent cell update.
• A cell holding Total shows Total; an empty cell shows nothing.
• If A1 = =B1 and B1 = =A1, both cells show #CYCLE. A formula like =A1+ shows #ERR.

Notes

• Raw vs. computed. Keep the raw strings in useState; derive the displayed values with useMemo so an edit to raw recomputes the grid.
• No eval(). Parse the arithmetic yourself (a small recursive-descent parser). eval() runs arbitrary code and can't see cross-cell references or cycles.
• Cells are A–D × 1–6. You don't need ranges (A1:A6) or functions like SUM — just refs and + - * / with parentheses.