2026-09-23-the-bar-is-icons-and-the-sheet-is-a-journey

Decision

The demo navbar drops its breadcrumb and renders its five fixed controls as icons; the contact sheet shows one tile per screen, in journey order; and screen names stop qualifying themselves with a variant suffix.

Why

The bar was competing with the screen. Above a 390px frame it printed all routes · screenshots · back · next, then mobile · /group ›, then the screen names, then light / dark · mobile / web — four of those groups being the same words in every product on every page. The breadcrumb was the worst of it: mobile · /group › restated what the surface switch and the screen chips on either side of it already said, in the widest form available.

The five controls that never change between sets are learned once. The ones carrying this product's own words — the screen names and the state switcher — stay words, because those differ on every page and cannot be learned.

The sheet listed every screen up to four times. Balances appeared as default, empty and offline; Recurring as default, empty, locked and stopped. An inventory whose hardest task is telling three near-identical copies of one screen apart is not an inventory. The bar's state switcher is where a variant is reached, and the chart already collapsed them for exactly this reason.

The sheet was also in manifest order, which is the estate's reserved flow order — auth · onboarding · home · * · settings · store · states. That is right for a manifest and wrong for a page somebody reads top to bottom: it put the splash screen last. It now sorts by the same longest-path column the flow chart uses, so the two pages agree about what comes first instead of each having its own idea.

Balances · People read as a variant of Balances. So did Settle · you pay and Spending · Just me. They are separate screens, and the flow name already sits under every node and every tile — the qualifier was doing the flow's job, badly.

Impact

• _chrome.js draws its own inline SVG icons rather than using lucide, because index.html and screenshots.html never load lucide and a lucide-based bar would render empty boxes on two of the three page kinds. The path data is lucide's own.
• Every icon control keeps a title and an aria-label. An absent control is still struck through — a word can carry line-through, so an icon gets the line drawn for it.
• .chrome-label is deleted from CORE; .chrome-chip--icon, .seg-chip--icon and .chrome-ico are added.
• Eight screens renamed in routes.js. The files did not move.
• Three estate files now differ from charades and tic-tac-toe — _chrome.js, screenshots.html and the CORE chrome block of shared.css, plus the _gallery.js fix from 2026-09-23-design-set-migrated-to-the-estate-standard. All four are improvements rather than aakalan-specific needs, and the estate is only byte-identical again once they are propagated.

Addendum — clicking a node

Selecting a box now lights ONE HOP: the screens that lead to it, the screens it leads to, and the edges between. It used to light the whole transitive ancestry — "every route into it" — which is a fair question in a six-screen game and useless at thirty-four screens, because nearly everything reaches nearly everything. Clicking almost any box lit almost the whole chart, so the answer to "how do I get here" came back as "yes".

Hover-to-isolate is gone with it, and that was the flicker. Hover drove React state, so every mouse move re-rendered 34 nodes and 90 edges — and the label re-measure below carried no dependency list, so it also tore down and rebuilt two observers on each of those renders. .fnode:hover in CORE still gives the box its interactive cue, in CSS, at no render cost.

Status

Active

Sources

• ~/git/personal/STYLE-GUIDE.md
• .context/designs/mobile/_chrome.js
• .context/designs/mobile/screenshots.html