orbit-calculator

As a frontend developer, implement the CalculatorDisplay section for the Calculator page. This section renders a `<section className='cd-section'>` containing an animated calculator screen panel. Key implementation details: (1) Use `useState` for `index` (0–3) cycling through a `samples` array of 4 objects each with `history`, `buffer`, and `result` string fields. (2) `handleClear` increments `index` modulo 4 to cycle samples. (3) Render a `motion.div` with class `cd-panel` that animates `opacity: 0 → 1, y: 18 → 0` on viewport entry (`whileInView`, `once: true, amount: 0.4`), transition `duration: 0.55, ease: [0.22, 1, 0.36, 1]`. (4) Inside the screen: a top row with a `cd-mode-tag` (dot + 'Standard' text) and a 'Clear (AC)' button calling `handleClear`. (5) `AnimatePresence mode='wait'` wraps `motion.div` for `cd-history` and `cd-buffer` — both animate `opacity/x` in/out (`x: 14 → 0 / exit x: -14`). (6) Result area shows `=` symbol and splits `current.result` into individual `digits`, each rendered as `motion.span.cd-result-digit` inside `AnimatePresence mode='popLayout'` with staggered `y: 16 → 0` entrance and `delay: i * 0.035`. Import `AnimatePresence, motion` from framer-motion.

As a frontend developer, implement the CalculatorButtons section for the Calculator page. This section renders a `<section className='cb-section' aria-label='Calculator keypad'>` with a full button grid. Key implementation details: (1) Define a static `buttons` array of 20 button config objects with fields `id`, `label`, `kind` ('num'|'op'|'clear'|'equals'|'decimal'), `op` (for operators), and optional `extraClass` (`cb-tall` for equals, `cb-wide` for 0). (2) `kindClass` map converts kind to CSS class. (3) Use `useState` for `activeOp` (currently highlighted operator), `lastPressed` (string label of last button), and `ripples` (object keyed by button id). Use `useRef` for `rippleId` counter. (4) `handlePress(btn, e)` toggles `activeOp` for op buttons, clears it for equals/clear, sets `lastPressed` label, and creates a ripple entry with `{rid, x, y, size}` computed from click coordinates — auto-removed after 500ms via `window.setTimeout`. (5) Render a `motion.div.cb-grid` with stagger variant (`staggerChildren: 0.025`, `hidden/visible` states). (6) Each button is a `motion.button.cb-btn` with appropriate kind class, active state class when `btn.op === activeOp`, and an `AnimatePresence`-driven ripple span overlay. Import `motion, AnimatePresence` from framer-motion.

As a Frontend Developer, assemble the final Calculator single-page application by composing CalculatorContainer, CalculatorDisplay, and CalculatorButtons into a unified, working Calculator page. Wire up shared state (current expression, result, active operation, clear action) so that CalculatorDisplay reflects real-time input and CalculatorButtons drive actual arithmetic logic (addition, subtraction, multiplication, division). Implement the calculation engine (expression evaluation) with proper handling of edge cases (division by zero, chained operations). Ensure the component tree is correctly structured with CalculatorDisplay and CalculatorButtons slotted as children of CalculatorContainer. NOTE: This task depends on theme_setup (temp_theme_setup) and the three section tasks: 05487649-3252-4d3e-8b0a-87274bd8dc36, 2cc73fa6-aaf4-4067-bf60-66fe68057f49, 6d680e91-2f24-4e1d-ad60-a20bb64b6315.

As a Frontend Developer, ensure the Orbit-Calculator is fully responsive across all device sizes and meets web accessibility standards (WCAG 2.1 AA). Tasks include: (1) Add responsive CSS breakpoints so the calculator panel scales correctly on mobile, tablet, and desktop. (2) Ensure all calculator buttons have proper ARIA labels, roles, and keyboard navigation support. (3) Verify colour contrast ratios meet accessibility requirements. (4) Add focus-visible styles for keyboard users. (5) Test with screen reader semantics (aria-live regions for displaying result updates). NOTE: Depends on page assembly task (temp_calculator_assembly).