An A-to-B header fixed the catalog's horizontal-vertical mix-up

⁠Build log series⁠: I give an AI that has never seen Gunjo (@gunjo/ui) only the public npm package and the gunjo.jp docs, then ask it to build a real screen. ⁠Catalog deep dive targeting OriginDestination⁠: a mobile reservation flow inspired by Japan Rail's booking sites, Ekinet and EX Reservation, covering routes, train results, seat maps, fares, and fees for limited express and Shinkansen services.

Result: 4/5. An A-to-B header became a component on its third appearance

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

⁠A library with genuine transport-domain knowledge.⁠ Nearly every component I needed already existed, and some felt purpose-built for Japanese rail booking. Seat states, window and aisle preferences, adult and child passenger types, and one-way and round-trip options are built into defaults and accessible names. The missing piece cost one star: there was no component for an A-to-B departure-and-arrival header, the defining element of this screen, and the catalog actively sent me in the wrong direction.

The core observation: horizontal A-to-B is not a vertical sequence

The A-to-B pattern became a component on its third appearance, after an axis mix-up.

Both the journey header, Tokyo to Shin-Osaka, and each train's departure and arrival, 06:00 to 08:27, revolve around the same A-to-B pattern.

The agent reported:

⁠I hand-built the departure-station to arrival-station header in a 90-line RouteHeader.tsx.⁠ There was no OriginDestination, RouteHeader, or other A-to-B component. I also hand-built each train's departure and arrival as DepArr, which is the same underlying pattern. The catalog recommended Itinerary, a vertical day-by-day timeline, and RouteStops, a vertical numbered delivery-stop list with a delay column. Both are sequences that flow down the page from A through Z, the exact opposite of an A-to-B header arranged horizontally at the top with a swap action. Following the catalog would produce the wrong UI. Instead of admitting that there was no match, it invented one from the nearest option, at the worst possible point in the screen. The most important addition is OriginDestination, with from, to, and via endpoints, an arrow, swapping, and a compact inline DepArr variant for result rows.

⁠The A-to-B header appeared for the third time: international shipping's POL to POD in #166, a route's origin to destination in #169, and this limited express flow's departure to arrival plus each train's times in #170. Three observations were enough, so I built it immediately:⁠

• ⁠OriginDestination⁠ lays out A-to-B horizontally. Each endpoint supports a label and secondary details such as a code, time, or platform, while the connector can show an arrow or duration. It also supports via points and a button that swaps origin and destination.
• The ⁠inline variant⁠ is a compact departure-to-arrival result row, such as 06:00 departure to 08:27 arrival.
• It is distinct from ⁠RouteStops and Itinerary⁠. Those components describe vertical sequences such as delivery stops or a day-by-day plan; this one is a horizontal A-to-B relationship.
• The catalog now sends A-to-B headers to OriginDestination and explicitly says that Itinerary and RouteStops use the opposite, vertical form.
• Browser checks covered the Tokyo to Shin-Osaka header and swap action, a Haneda to Fukuoka to Naha via example, the 06:00 to 08:27 inline example, and the swap button's aria-label. See PR #428, which closed #425. ⁠This was the twenty-third component promoted from repeated evidence.⁠

What I took away: layout form belongs in catalog grading

The catalog can confuse layout form as well as meaning.

I had already grouped catalog failures along five axes: hiding, substituting types, substituting accessibility semantics, self-identifying, and leaving an honest gap. Round #170 exposed another axis: ⁠confusing the layout's form⁠.

• A-to-B is ⁠horizontal⁠, used as a header across the top.
• Itinerary and RouteStops are ⁠vertical⁠, used as sequences that flow down the page.

The catalog matched on the semantic keyword route, even though the UI form was reversed. The agent summarized the failure: the catalog is useful as an inventory of what exists, but it invents the nearest match instead of saying that nothing fits, and it did so for the A-to-B pattern that defines this screen. The fix was to add OriginDestination and distinguish the horizontal A-to-B form from vertical RouteStops and Itinerary entries in the catalog. ⁠Catalog grading must cover layout form alongside types and accessibility semantics.⁠

What it flagged

• ✅ ⁠SeatMap was the best possible component.⁠ Its documentation names Shinkansen explicitly, and it handles aisle gaps, seat states, and accessible grid labels such as seat 8A, window seat, selected.
• ✅ AmountBreakdown for fares and express fees, SegmentedControl for round trips, seat types, and passenger types, LineChip for Nozomi and Hikari, and DatePicker with the Japanese locale all fit without modification.
• 🟡 ListCard's muted extra-small metadata was too quiet for departure and arrival times, so I placed them in the title. The names Stepper for a wizard and NumberInput layout="stepper" for quantity controls also collided.

⁠What changed under src this round: OriginDestination, tracked from #425 to PR #428.⁠ The result scored 4/5, promoted the A-to-B pattern into a component, and corrected the catalog's horizontal-vertical mix-up.

📊 Component scoreboard

⁠23 built or extended.⁠

Five of the ten components and extensions added this session: SectionList / multiday RouteStops / NavRow / Statistic with goodWhen / ⁠OriginDestination⁠.

In progress: report downloads at two of three and MatchCard at one of three.

📋 Mode progress

• ✈️ Air ✅ / 🚆 Rail ✅ / 🚕 Taxi ✅ / 🚌 Bus ✅ / 🚚 Trucking ✅
• Targeted follow-ups: goodWhen built in #169 and OriginDestination built in #170. Report downloads remain at two of three and MatchCard at one of three.

Next up: build log #171

• I'll decide whether to finish the catalog deep dive by observing report downloads for a third time and promoting the pattern, or move to a new industry before the next round.

The run

• ⁠gunjo.jp⁠ / ⁠OriginDestination⁠ / ⁠SeatMap⁠ / ⁠AmountBreakdown⁠ / npm @gunjo/ui / ⁠GitHub⁠ / previous rounds #1 through #169
• ⁠GunjoUI by UIXHERO⁠

The A-to-B header became a component, and the catalog gained a new failure mode to guard against: confusing horizontal and vertical forms. Semantic keywords can match while the UI's shape is wrong, so catalog grading must account for layout form.