# Baby Checklist — ESM Refactor Notes

## What was split

### Shared JS modules (`public/js/`)

| Module | What it contains | Why |
|--------|-----------------|-----|
| `js/api.js` | `fetchState()`, `patchState()`, `API_BASE` | Was duplicated as `const API='/api/state'` + raw fetch calls in every HTML file. Now one canonical source. |
| `js/state.js` | `cycleStatus()`, `STATUS_EMOJI`, `STATUS_SEQ`, `setSync()`, `makePoller()` | Status cycling and sync-indicator logic was inline in each page. Extracted so all pages share the same state machine. |
| `js/data/checklist.js` | `CHECKLIST` array (16 items) | Was embedded as a ~100-line inline const in `index.html`. Now a separate module with named export. |
| `js/data/pediatras.js` | `PEDIATRAS` array (10 items) + `TIER_LABELS` map | Was embedded as a ~200-line inline const in `pediatras.html`. Now a separate module with named exports. |

### HTML files updated

- **`index.html`**: Replaced `<script>` with `<script type="module">`. Imports `CHECKLIST` from data module, `fetchState`/`patchState`/`API_BASE` from api, `setSync`/`cycleStatus`/`STATUS_EMOJI`/`makePoller` from state.
- **`panales.html`**: Same pattern — imports api + state, replaces inline cycle/save/load.
- **`camaras.html`**: Same pattern — imports api + state, replaces inline cycle/save/load.
- **`pediatras.html`**: Imports api + state + PEDIATRAS + TIER_LABELS from data module. `TIER_LABELS` replaces inline tier label map.

## Design decisions

- **Named exports only** — no `export default`. This enables tree-shaking if a bundler is ever added.
- **Relative import paths** — `./js/` from HTML in `public/`, `../js/` from HTML in subdirs. No path aliases.
- **`cycleStatus()`** — replaces 3 slightly different inline `seq` arrays across pages with one function from `js/state.js`.
- **`makePoller()`** — replaces `setInterval(poll, 3000)` pattern in `index.html` with a start/stop-controlled poller.
- **`setSync()`** — consolidates the 5-line sync-dot update pattern into one call.

## Intentionally left alone

- **`server.py`** — Python backend, no changes needed.
- **`panales.html`/`camaras.html` card data** — these pages have no persistent JS data (no PICK_KEY array), just inline HTML. No module extraction needed.
- **CSS** — all styles remain inline in `<style>` blocks (they're already split per file, not monolithic).
- **The `hevy-mockups/` image assets** — static files, no JS involvement.
- **`state.json`** — server-side state file, not part of the JS bundle.

## No new runtime dependencies

All ESM modules are plain JS with no npm packages. The `build.py` script uses only Python stdlib.