af73dfb3f9
Driver: "the sidebar is supposed to look like Material UI, like what people are used to... people are used to the YouTube layout, Google layout is just way better. We do not need to create custom styles people are not used to." Measured before: app bar 51px, nav rows 44px with an 8px radius, collapsed rail 60px. Now app bar 64px desktop and 56px mobile, rows 48px, a full pill active row, and a 72px mini-variant rail. Nav width was already 256px and is unchanged. Nothing vendored. The card's law is to imitate the metrics in our own CSS rather than add Quasar or MUI, which is the same clone-don't-edit rule the library follows elsewhere. Two traps worth recording. box-sizing:border-box is load-bearing on the app bar: without it the element is content-box, so min-height:64px measured 81px live once padding and border were added. And the rail collapse is a translate rather than a width change, so four numbers are coupled — the nav translate, the content pane's left, and two padding compensations that keep icons inside the visible strip. Verified live: app bar 64 desktop and 56 mobile, rows 48 with a 999px radius, rail 256 expanded to 72 collapsed with the content pane starting at exactly 72. |
||
|---|---|---|
| .. | ||
| api | ||
| colors | ||
| components | ||
| composables | ||
| constants | ||
| data | ||
| i18n | ||
| layouts | ||
| scripts | ||
| stores | ||
| styles | ||
| utils | ||
| index.js | ||
| ProfileLoader.vue | ||
| README.md | ||
library/ (@map) — the shared map template
The other half of the architecture (see ../plugin-designs/README.md):
every map in plugin-designs/<your-map>/ composes the reusable, parameterized pieces that live here.
Fix something here and every map benefits on the next build; break something here and every map
breaks — read components/WARNING.md before touching shared pieces.
| Folder | What lives there |
|---|---|
ProfileLoader.vue |
The root of every bundle: parses profile-config, loads the profile, provides the stores + config |
components/ |
Shared UI — map, legends, controls, popup (PeopleGroupDetail), tables, charts, hints (README) |
composables/ |
Shared logic — map engine (useMapInstance), provider switch, shadow-DOM styles, theming |
stores/ |
Per-instance Pinia stores (ui / map / data) — provided by ProfileLoader, injected by children |
api/ |
Data-source registry (sources.json) + fetch layer — the JAMstack runtime wiring |
colors/ |
Color sets maps opt into via profile-config.colorSet |
i18n/ |
The shared string catalogs (all maps speak the same languages) |
data/ |
Small shared datasets baked at build time (big served data lives in ../data/) |
constants/ |
Shared constants |
scripts/ |
Maintainer pipelines (posters, research) — not part of any bundle |
The rule of thumb (same as WARNING.md): custom code in your app-profile, reusable code here — and things only move from the first to the second once they've earned it.