Stations and airports lacked the same chip bar, so FilterChips got built

⁠Build log series⁠: I give an AI that has never seen Gunjo (@gunjo/ui) nothing but the public npm package and the gunjo.jp docs, then ask for a real screen. ⁠Continuing the deeper passenger-facing air work from the passenger backlog⁠, this was an ⁠airport terminal map and facility guide⁠ for finding gates, lounges, duty-free shops, and restrooms. It is the airport counterpart of the station navigation screen in #120.

Result: 3.5/5, and the third FilterChips case fired

The screen passed tsc and fit a 375px mobile-first layout. The agent reported:

⁠ListCard was built for this, and on its own it is a reason to adopt the library.⁠ It maps one to one onto a facility row: icon, name, location (floor, nearest gate, airside or landside), an "open now" badge, and walking minutes. Sheet on the bottom, Badge, MetadataList, and Meter for lounge occupancy needed no hand-rolling either. ⁠But there is no way to navigate the facility categories. Nothing in the library scrolls a row of category chips sideways.⁠

The core observation: the same gap at a station and an airport, now three times

⁠The category filter bar is the biggest gap.⁠ ToggleGroup is a segmented control and wraps at eight categories, FilterButton is a popover dropdown built on a different model, and Badge and Tag have no selection state within a group. The agent forced ToggleGroup into a chip bar with overflow-x-auto. "⁠A horizontally scrolling single-select chip bar is universal navigation on every consumer discovery screen, from airports and stations to restaurant guides, retail, and food delivery. It is the single largest addition available.⁠"

⁠Three rounds in a row.⁠ Station navigation in #120, ticket purchase in #121, and the airport here. ⁠Three separate agents independently hand-rolled a category chip bar out of ToggleGroup and overflow-x-auto.⁠ That reached the rule of three, so I built it.

What I built: FilterChips

<FilterChips
  items={[{ value:"all", label:"All", count:24 }, { value:"gate", label:"Gates", count:8 }, ...]}
  value={category} onValueChange={setCategory} aria-label="Facility category" />

• Many categories, ⁠scrolling horizontally rather than wrapping⁠, a filled state for the current selection, role="group" with roving tabindex and arrow keys, a hidden scrollbar, and 36px chips.
• Single selection over items[] of {value, label, icon?, count?}.
• I added a table entry sending a horizontally scrolling single-select category bar to FilterChips, and drew the line between it and ToggleGroup (two or three options, equal width) or FilterButton (a multi-faceted popover).
• PR#372, verified on a real 375px render: eight chips scrolling on one line without wrapping, selection moving on both click and ArrowRight, the list narrowing from four items to one, no overflow, and no errors.

⁠What I built under src this round: FilterChips, on its third case and the eighth component to come out of this series.⁠ One more note: RouteStops leaks its delivery vocabulary into gate directions as well. Transit routes in #110, station directions in #120, and airport directions here all want a neutral variant of Steps (issue #358).

What I took away: running the same pattern in another industry collects the three cases reliably

Station navigation in #120 and the airport guide here are ⁠the same pattern: find a facility inside a place.⁠ That is why ListCard crossing industries and FilterChips being absent both showed up cleanly across the station, the ticket screen, and the airport. ⁠Going three to five screens deep in one industry is also a machine for collecting rule-of-three evidence on purpose⁠, by repeating one pattern in different contexts. FilterChips and RadioCard both reached their third case because I decided to work through the depth instead of skipping it.

📊 Component scoreboard (8 built)

AmountBreakdown / ActionQueue / ListCard / Gantt-segments / SeatMap / LoyaltySummaryCard / RadioCard / ⁠FilterChips⁠ In progress: SegmentedControl for two or three options, TicketStub, a success variant on StatusScreen, an hour axis on Gantt, and a neutral Steps.

Next up: build log #123

• More of the passenger backlog: air, with an international e-ticket for a second TicketStub case or baggage tracking, or the rest of rail, with in-station recommendations or refunds.

The run

• ⁠gunjo.jp⁠ / ⁠FilterChips⁠ / ⁠ListCard⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #121
• ⁠GunjoUI by UIXHERO⁠

The same gap at a station and an airport reached three cases, and the category chip bar became a component. Depth is how the evidence arrives on schedule.