# Paint by Habits — Architecture

Everything lives in one file, `index.html`, organized into sections:

| Component | Responsibility |
|---|---|
| **State** | Single JSON document under localStorage key `bitbybit.v1`; load/save with corruption guards; versioned for future migration. |
| **Mechanics** | Habit check/uncheck logging for the selected day (today or a backfilled past day, bounded by the active image's start), daily rollover, per-habit streak math, seeded (mulberry32) reveal-order permutation, and log-derived reveal: each habit reveals pixels equal to its own current streak length (1 the first day, 2 the next consecutive day, and so on), independent of any other habit. Because reveal recomputes from the whole log, backfilling a missed day re-bridges that habit's streak automatically. |
| **Artwork** | Preset pixel-art definitions (palette + row strings); upload pipeline (offscreen canvas downsample → pixel grid); gallery of finished pieces. |
| **Rendering** | Canvas renderer for the artwork (revealed pixels, checkerboard for hidden, pop-in animation for deltas); DOM renderer for checklist, stats, settings. |
| **UI wiring** | Onboarding, day navigator on the Today card (backfill past days), settings dialog (habits / artwork / data / about / changelog), theme cycling (auto→light→dark via `data-theme` + CSS custom properties), export/import/wipe, confetti celebration, and a page footer disclosing authorship. |

Data flows one way: user action → mutate state → persist → re-render. The
reveal permutation is derived from a stored seed, never persisted, so exports
stay small and rendering is deterministic.

There is no server, no network I/O, and no build step. See `docs/DESIGN.md` for
the full specification.