The back-office calendar landed on a consumer listing page as-is

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. Real estate, screen three: a ⁠property detail page with viewing bookings⁠ (photo gallery, floor plan, rent and move-in costs, property facts, amenities, access and map, viewing booking, inquiry form).

Nothing like #60's operations view or #61's contract: this is a ⁠consumer page that shows and books⁠. The listing a prospective tenant reads on a rental portal: photos, the floor plan, rent, amenities, and a viewing booking. The first marketing-leaning screen in a series that has lived on business software.

Result: 4/5

tsc and build passed, the console stayed clear, ⁠375px phone-first with zero horizontal scrolling⁠, the gallery switched to the floor plan, the move-in cost total of ¥495,300 summed correctly, the property facts carried th scope, amenities rendered icon plus text plus available-or-not, the viewing booking offered dates and time slots (full slots disabled), and the page had one h1 over eight h2s.

The star this round: B2B-raised components stuck the landing on a consumer page

Components raised entirely on business screens (operations, contracts, medical, logistics) went onto a ⁠consumer marketing page⁠ for the first time. They stuck. The agent's read:

• ⁠Calendar: fits well across industries.⁠ Wraps react-day-picker v9, disabled conditions strike out past and fully booked days, getDisabledReason gives per-day tooltips (why a day is full), the ja locale and holidays are in. ⁠A calendar raised on B2B dropped straight into consumer viewing bookings.⁠
• ⁠Gallery: fit the property photos plus the floor plan.⁠ Controlled through value and onValueChange, thumbnails as a role=radiogroup, roving tabindex, arrow keys, aria-checked: switching to the floor plan came with accessibility and zero handwork.
• ⁠formatCurrency: perfect.⁠ Rent and every move-in cost in yen, the total checked out.
• ⁠Table with th scope=row⁠ (21 rows of property facts), ⁠Badge⁠ (available or application pending), the label and description on ⁠Input⁠ and ⁠Textarea⁠ (the inquiry form), and ⁠CardTitle as⁠ (no h1-to-h3 jump) all did their jobs.

Staff or consumer, the skeleton of a calendar, a gallery, and money formatting stays identical. The components crossed not just industry lines but ⁠the staff-versus-consumer line⁠.

What I fixed this round: the Gallery mobile overflow

A consumer page exposed a real bug in a component I ship:

• 🟠 ⁠Gallery's thumbnail strip overflows on mobile⁠: a non-wrapping fixed-width flex-row, so six property photos ran 32px past a 360px screen. I added horizontal scrolling (overflow-x-auto) (issue #262, PR #265). Listings normally carry six to twenty photos, so a consumer page was always going to be the place this surfaced.

Logged, not built (waiting for a second sighting in bookings and comparisons)

New gaps specific to consumer pages:

• 🟠 ⁠A TimeSlotPicker⁠ (issue #263). Calendar covers the date half, but "pick one open ⁠time slot⁠ for the chosen day (full slots unselectable) as a radiogroup" got hand-rolled. Restaurants, clinics, salons, and viewings all need it.
• 🟠 ⁠A FeatureList, the available-or-not amenities grid⁠ (issue #264). Badge and Tag are color chips that leave available-or-not to color alone; icon plus text plus state is what is needed. Reusable for amenities, spec sheets, and plan comparisons.
• 🟠 No map component (the agent hand-rolled a placeholder; low priority).

What I took away: the skeleton crosses even the staff-consumer line

B2B calendar (booking operations) to consumer viewing bookings (Calendar, as-is)
B2B gallery (assets and media)    to photos plus floor plan     (Gallery, one mobile fix)
finance money formatting          to rent and move-in costs     (formatCurrency, as-is)

In #60 I wrote that components crossing industries comes down to capturing the workflow's skeleton. This round showed the same skeleton carrying across ⁠staff versus consumer⁠. Picking a date, flipping through photos, formatting money: the moves are the same whether the person is a professional or a renter. The remaining gaps (time slots, the amenities grid) will recur in booking and comparison screens, so the rule of three gets them. Three real-estate screens down: operations, contract, consumer.

Next up: build log #63

• Real estate has covered three layers. ⁠Move to a new industry⁠ (manufacturing, education, public sector, travel), or one or two more real-estate screens (tenant screening, for an approval workflow).

The run

• ⁠gunjo.jp⁠ / npm @gunjo/ui / ⁠GitHub⁠
• Earlier rounds: #1 through #61
• ⁠GunjoUI by UIXHERO⁠

Gunjo was still in early alpha at the time; issues are welcome.