hollow-project

As a frontend developer, implement the CalcDisplay section for the Calculator page. This section renders the calculator's display panel using a `cd-shell > cd-card > cd-display` DOM structure. It accepts `expression` and `result` props and renders two animated areas: (1) `cd-expression` — a `motion.div` with `initial={{ opacity: 0.6, y: 4 }}` and `animate={{ opacity: 1, y: 0 }}` on key change, (2) `cd-result` — wrapped in `AnimatePresence mode='popLayout'` with scale+opacity enter/exit transitions (`initial={{ opacity: 0.7, scale: 0.98 }}`, `exit={{ opacity: 0.5, scale: 0.96 }}`). Includes a `cd-slot-spacer` div below the display area. Uses framer-motion for all animations. Apply CalcDisplay.css with the provided 2297-char stylesheet. Defaults: `displayExpression = expression || ''` and `displayResult = result || '0'`.

As a frontend developer, implement the CalcButtonGrid section for the Calculator page. This section renders the full 5-row button grid defined in the `BUTTON_ROWS` constant, covering digit, operator, util, and equals button types (AC, +/−, %, ÷, 7–9, ×, 4–6, −, 1–3, +, 0 [span2], ., =). Uses `useState(null)` for `activeBtn` to track pressed state, toggled via `handlePress(action)` / `handleRelease()` on `onPointerDown`, `onPointerUp`, `onPointerLeave` events. Each button is a `motion.button` with `whileTap={{ scale: 0.95, y: 2 }}` and a `springConfig` (`type: 'spring', stiffness: 500, damping: 25`). Dynamic class names use `cbg-btn`, `cbg-btn--{type}`, `cbg-btn--span2` (for the '0' key), and `cbg-btn--active-highlight` when active. Each button has `aria-label={btn.label}` for accessibility. Apply CalcButtonGrid.css with the provided 2344-char stylesheet.

As a Frontend Developer, configure the global design system and theme for the hollow-project calculator. Set up CSS custom properties (variables) based on the SRD color palette: primary (#4A90E2), primary_light (#A6C8FF), secondary (#F5A623), accent (#50E3C2), highlight (#F8E71C), bg (#FFFFFF), surface (rgba(255,255,255,0.9)), text (#333333), text_muted (#777777), border (rgba(0,0,0,0.1)). Create a global stylesheet or theme file that all components can reference. Ensure responsive design tokens are included for desktop and mobile layouts.

As a Frontend Developer, implement the core calculator logic as a custom React hook (e.g. useCalculator). This hook must manage state for the current expression and result, and expose handlers for: digit input, operator selection (+, -, ×, ÷), equals evaluation, clear (AC), sign toggle (+/−), and percentage (%). The hook should return `expression` and `result` values to be consumed by CalcDisplay, and an `onAction` handler to be consumed by CalcButtonGrid. Implements the full arithmetic evaluation logic client-side with no backend dependency, as per the SRD.