# Epic 4: Modular Grid Layout & Provider Integration

## Goal
Replace the single full-screen XML structure with a flexible 6-pane grid that dynamically wraps external data.

## Context
Currently, the Provider sends an entire E-ink screen generated from a single massive LVGL XML string. For the MVP, we want a flexible grid: 2 large top canvases (Main Task, Weather) and 4 small bottom canvases (One per Family Member).
The user can assign distinct XML templates to any of these 6 panes.

## Scope & Technologies to Investigate
1. **Widget Architecture (Grid):**
   - Rework the LVGL rendering logic in the Provider. It should boot an LVGL display, split it into 6 designated Canvas areas, and parse smaller, independent user XML strings into each respective area using `LV_USE_XML`.
2. **Data Binding:**
   - Investigate how live data gets into the XML before parsing. E.g., if Canvas 2 is 'Weather', how does `{{TEMP}}` inside the user's XML become `22°C`? String replacement via standard C functions before passing to LVGL.
3. **OpenWeatherMap Integration:**
   - Create a backend polling task or direct fetch mechanism on the Provider to query the OpenWeatherMap API.
   - Expose the OpenWeatherMap API Key configuration in the Svelte dashboard.
4. **4-User Constraint:**
   - Enforce that the system tracks exactly 4 active users to match the 4 bottom E-ink panes.

## Next Steps to Start
1. Create a `tdd/modular_grid_layout.md`.
2. Prototype a basic HTTP GET to OpenWeatherMap using the `http_client` component and parse the resulting JSON.
3. Rework the Svelte `DeviceManager.svelte` to show 6 individual XML editors per Device instead of just 1.