Settings picker lab — five property pickers, side by side
A staff-only lab page so Gera can click through five ways to pick the property a settings page edits, on a real company's buildings, and choose one.
30 Sept 2026 · branch settings-portfolio/picker-lab · captured against propflow-stage · at ea0d208565+local
Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.
1 · The lab — all five variations on one page
All five variations on one page, on the stage company Fairhaven Residential (TEST). Pick one; the sections below show each with its list open, in light and dark.
Where the data comes from
The lab is staff only (/admin/dev/settings-picker-lab, under the /admin gate). Every variation reads the same real building list the top bar holds, plus the roster read Organization Settings already makes for addresses and unit counts, and ends in the same readout and one sample Tour length row, so they are compared as a whole page. Nothing saves.
Asserted in the captured DOM — 1 · Search combobox · 2 · Breadcrumb scope · 3 · Side list · 4 · Recent chips · 5 · Polished current · Editing: Fairhaven Residential (TEST) / All properties
2 · 1 · Search combobox — light
The trigger names the column's property; the list opens with the search focused, recent picks on top and the rest A–Z, each row carrying its address and unit count where the roster has them. The row just picked by keyboard (↓, Enter) is lit and marked Editing.
Asserted in the captured DOM — 1 · Search combobox · Editing: Fairhaven Residential (TEST) / · Tour length · Recent · ALL PROPERTIES A–Z · Editing
3 · 2 · Breadcrumb scope — light
The scope reads as one line, company then property. The second crumb opens the same list with Company-wide pinned on top and selected, because nothing narrower is picked yet.
Asserted in the captured DOM — 2 · Breadcrumb scope · Editing: Fairhaven Residential (TEST) / · Tour length · Company-wide · Recent
4 · 3 · Side list — light
A slim building column beside the settings. Company-wide is pinned; clicking a building lights its row and renames the column header and the readout in the same beat.
Asserted in the captured DOM — 3 · Side list · Editing: Fairhaven Residential (TEST) / · Tour length · Company-wide
5 · 4 · Recent chips — light
Company is the first chip, then the last few buildings as one-click chips; the second chip is picked here, and More… opens the full search for anything else.
Asserted in the captured DOM — 4 · Recent chips · Editing: Fairhaven Residential (TEST) / · Tour length · Company · More
6 · 5 · Polished current — light
Today's Company | Property control, given an Editing label, a wider box, address hints on each option and a placeholder that says how many properties there are. The comparison point for the other four.
Asserted in the captured DOM — 5 · Polished current · Editing: Fairhaven Residential (TEST) / · Tour length · Company · Property
7 · 1 · Search combobox — dark
The same state in the dark theme: every colour comes from the theme tokens, so nothing here was styled twice.
Asserted in the captured DOM — 1 · Search combobox · Editing: Fairhaven Residential (TEST) / · Tour length · Recent · ALL PROPERTIES A–Z · Editing
8 · 2 · Breadcrumb scope — dark
The same state in the dark theme: every colour comes from the theme tokens, so nothing here was styled twice.
Asserted in the captured DOM — 2 · Breadcrumb scope · Editing: Fairhaven Residential (TEST) / · Tour length · Company-wide · Recent
9 · 3 · Side list — dark
The same state in the dark theme: every colour comes from the theme tokens, so nothing here was styled twice.
Asserted in the captured DOM — 3 · Side list · Editing: Fairhaven Residential (TEST) / · Tour length · Company-wide
10 · 4 · Recent chips — dark
The same state in the dark theme: every colour comes from the theme tokens, so nothing here was styled twice.
Asserted in the captured DOM — 4 · Recent chips · Editing: Fairhaven Residential (TEST) / · Tour length · Company · More
11 · 5 · Polished current — dark
The same state in the dark theme: every colour comes from the theme tokens, so nothing here was styled twice.
Asserted in the captured DOM — 5 · Polished current · Editing: Fairhaven Residential (TEST) / · Tour length · Company · Property
How to use it
Open /admin/dev/settings-picker-lab (Dev Tools → Settings Picker Lab) with one company picked in the top-left. Nothing on the page saves; the Tour length row edits local state only. “+ Compare” is visual only in the lab.