A medical safety banner turned out to be a rent-arrears component

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. A new industry, real estate, screen one: ⁠property management and the rent roll⁠ (portfolio, per-property occupancy, per-unit rent roll, arrears, upcoming renewals and move-outs, income and expenses).

With medical finished at seven screens, on to something entirely different: ⁠real estate⁠. The first screen is a leasing agency's rent roll, the operations view of managed properties: occupancy, each unit's rent, tenant, and status, arrears, and upcoming renewals and move-outs. The polar opposite of medicine, a world of money and tenant lifecycles.

Result: 4.5/5

tsc and build passed, the console stayed clear, at 375px the rent roll scrolled inside its card, occupancy meters covered each property and the whole portfolio, arrears of two months or more raised a warning banner, renewals and move-outs got their own list, the KPIs agreed across summary, property, and unit, and the page had a single h1.

The star this round: medical and logistics components crossed into real estate as-is

Until now the compounding stayed inside one industry (medical to medical). This round it ⁠jumped a big industry line⁠. Components built for commerce, finance, logistics, and medicine worked on a rent roll ⁠nearly without modification⁠. The clearest case, straight from the agent's writeup:

⁠SafetyBanner (built for medical allergies, contraindications, and panic values): reused for serious arrears (two months and up), a semantically perfect cross-industry counterpart.⁠ A large, assertive (role="alert") warning block at the top of the page for situations that must not be missed, with a slot for action buttons (logging a payment reminder). It fits well.

The abstraction inside SafetyBanner (⁠force acknowledgment of a danger that must not be missed, assertively⁠) is the same for a medical allergy warning and for rent arrears. The domains, a hospital ward and a leasing office, could hardly be further apart, yet the skeleton of the workflow matched. Also:

• ⁠formatCurrency (built for finance): perfect.⁠ Rent, fees, and deposits all render ¥1,234,567, and compact folds them into the Japanese ten-thousand notation.
• ⁠Meter (built for warehouse fill and truck load): exactly right for per-property and portfolio occupancy.⁠ size="inline" sits in a cell, and all six occupancy meters carry accessible names.
• ⁠Statistic, Table, Tabs, toCsv (Japanese CSV with the BOM), and Badge⁠ all worked as-is.

Medicine's safety component, logistics' capacity meter, finance's money formatting: ⁠when the skeleton of the workflow is the same, the same component works, whatever the industry⁠. That is the ultimate payoff of spreading the rounds across industries.

What I fixed this round: the TimelineDescription paragraph trap

One real composition bug, nothing real-estate specific:

• 🟡 ⁠TimelineDescription renders a fixed <p>⁠, so putting action buttons into a renewal or move-out Timeline item produced <div> inside <p> and ⁠crashed at runtime (a server and browser mismatch)⁠. I added an as?: "p" | "div" escape hatch (issue #253, PR #257, backward compatible). Kin to Badge (issue #233) and AlertTitle (issue #251), the element-nesting trap family.

Logged, not built (waiting for a second sighting in real estate or accounting)

Every real-estate-specific gap was a first sighting, so they went to the tracker:

• 🟠 ⁠Receivables aging⁠ (count-and-amount buckets for one month, two months, three months and up, issue #254). Arrears and receivables share the pattern. DistributionBar is a share bar, not labeled count-and-amount buckets.
• 🟠 ⁠A totals or footer row for DataTable⁠ (issue #255). A rent roll lives on "per-unit rows reconciling to a property total in the footer". EditableDataTable has renderFooterCell; DataTable does not, so the agent hand-rolled <table> with <tfoot>.
• 🟠 ⁠A date-axis timeline for expirations and renewals⁠ (issue #256). Timeline is a vertical event list, not a horizontal remaining-term bar showing "N days to expiry".
• 🟠 ⁠A higher-is-better direction for Meter⁠ (same issue #256 entry). Full occupancy is good, but Meter treats full as a warning (capacity thinking). The tone override works around it; a direction="higher-is-better" would fix it.

What I took away: a component that captures the skeleton crosses industries

medical safety alert     to real-estate arrears alert   (SafetyBanner, same skeleton)
warehouse fill meter     to occupancy meter             (Meter, direction differs)
finance money formatting to rent formatting             (formatCurrency, as-is)

A new industry's first screen scored 4.5/5, and only because components grown in medicine, logistics, and finance needed almost nothing changed to work in real estate. The key is that these components captured ⁠the skeleton of the workflow⁠ (force a danger acknowledgment, measure a fill, format money), not the look of one industry. Capture the skeleton, and the same component lands in a hospital ward or a leasing office alike. The remaining real-estate gaps (aging, footers, date axes) will resurface in accounting and elsewhere, so the rule of three gets to grow them.

Next up: build log #61

• ⁠Another real-estate screen⁠ (a lease contract with its disclosure, to see whether SignedRecord works for contract signing, or viewing bookings and listings). Three to five screens to give real estate its depth.

The run

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

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