The Driver rejected v1, which added the hint as its own paragraph above the grid: "you dont have to add a SECOND HEADER to make this show up... it could be CENTRED on the same header where it says total 2107." So it now rides the bar that is already there, beside the live count. Centred by absolute positioning against the bar, not by flex spacers. The first attempt here used a spacer on each side and measured 55px off centre at both 1440px and 1280px, because spacers split the leftover space rather than the bar, and the left cluster (dock, title, count, selection controls) and right cluster (toast, Export CSV) differ in width. Absolute at left:50% with translateX(-50%) is relative to the bar itself, so the clusters cannot drag it, and being out of flow it adds no height by construction. The bar gains position:relative to be that containing block. pointer-events:none keeps the hint from intercepting a click meant for a control beneath it, and it hides below 1100px where the clusters leave no free middle. Measured against a pre-change baseline of 32px: 32px at all three viewports, one header bar, and centre offset 0 at 1440px and 1280px. |
||
|---|---|---|
| .. | ||
| architecture | ||
| assets | ||
| readme-images | ||
| screenshots | ||
| develop-a-plugin-and-see-it-live.md | ||
| explanation.md | ||
| how-to.md | ||
| README-embed-example.md | ||
| README-longform.md | ||
| README-SECTION-3-cli-commands.md | ||
| README.md | ||
| reference-capability-exemplars.md | ||
| reference-library-index.md | ||
| reference.md | ||
| slide-deck-outline.md | ||
| tutorial.md | ||
| why.md | ||
docs/ — pick your path
"what is this?" "teach me" "how do I …?" "look it up" "all the detail"
│ │ │ │ │
why.md ──────────► tutorial.md ────► how-to.md ────► reference.md ───► architecture/
(2 min, 1 diagram) (first map) (task recipes) (tables) (contracts)
- why.md — the problem and the "map islands" idea. Start here.
- tutorial.md — build your first map, no jargon.
- how-to.md — recipes: embed, iframe, SPA, colors, CDN, mobile, tokens.
- reference.md — config fields, build scripts, the
profile-configcontract. - explanation.md — the model in 15 lines.
- architecture/ — the deep end: full contracts, the per-file catalog.
- README-embed-example.md — the drop-in README used when this bundler is embedded inside a host repo.
Nothing on the simple path is longer than a few minutes; everything complex lives in
architecture/, linked from where you'd need it.