Screens the definition cannot derive
Why board, calendar, timeline, billing, wizard and command-palette screens are designed by hand, shown with a renewal calendar for leaseclock.com.
A definition says what each record holds and which Verbs move it. It says nothing about layout or intent, so boards, calendars, timelines, billing screens, wizards and command palettes are designed by hand.
What the definition leaves out
The Lease Noun of The leaseclock.com sample declares two dates, startsOn and endsOn, and a status with three values. From those facts the Admin derives a list, a record page and two forms, because each one has a single obvious shape.
A calendar has no obvious shape. Nothing in the file says which date matters, how far ahead a property manager plans, or what a day's cell should show. Those are facts about the person and the job, and a Persona is not part of a Noun.
A renewal calendar for leaseclock.com
A property manager plans the month around the leases that end next. In the design, leaseclock.com replaces the manager's Lease list with a calendar, and every other screen keeps deriving.
---
title: Renewals
personas: [manager]
---
<RenewalCalendar date="endsOn" noticeDays={60} window="month" />Each prop is a decision the definition cannot make.
| Decision | Choice for the manager | Why the definition is silent |
|---|---|---|
| Which date places a lease | endsOn minus 60 days, the day a reminder goes out | two date properties, no rank between them |
| How much time one screen holds | one month | no property describes a planning horizon |
| What a day shows | residentName and the Property name | the representation names one record, not a cell of many |
| What a click does | opens the record page, with Renew ready | Verbs say what may happen, not what comes first |
| Which leases appear | active only | status lists values, not which ones need attention |
RenewalCalendar is a Component leaseclock.com writes itself, with typed props and a fixture per rendering. The landlord and the assistant keep the derived list.
Six screens designed by hand
Each kind below needs a fact about intent that no Noun file holds.
| Screen | What it needs beyond the definition | On leaseclock.com | Catalog help |
|---|---|---|---|
| board | which field groups the columns, and which moves are allowed | leases in active, renewed and terminated columns | Board |
| calendar | which date places a record, and the horizon | the renewal calendar above | none |
| timeline | which Events matter, in what order | a lease from signing to each renewal | Timeline |
| billing | the Offer, Subscription and invoices, laid out for a buyer | the manager's Offer, seats and invoices | InvoiceList, UsageMeter |
| wizard | the order of steps and which inputs each step takes | adding a building, then its first lease | VerbSheet |
| command palette | which records and Verbs to search, and how to rank them | "renew Maya Ortiz" from any screen | none |
A board comes closest to deriving. status gives the columns and Lease.renew the move, but whether terminated belongs on the board is still a choice.
Why each one costs a person
A derived screen is checked once against its rules. A hand-built screen multiplies: each Persona, each data state, light and dark, and each width is one more cell a person judges.
The renewal calendar for one Persona, with 4 data states, 2 modes and 2 widths, is 16 cells. Each needs a design pass for taste as well as for correctness, and no check on the definition can do either. What a screen costs: depth counts the cells for every row.
What stays derived inside a hand-built screen
In the design, a hand-built screen adds layout and nothing else. It reads records through the same API, and its buttons call the same Verbs, which refuse the same way they do on the CLI.
The calendar's Renew button calls Lease.renew, and a refused renewal shows the reason the Verb gives. Where one part of a derived screen needs a change, a slot replaces less than a whole screen: Slots.
Slots
Every named slot on a derived screen, what it binds, and which Components may fill it, with the leaseclock.com example for each.
What a screen costs: depth
Why each Interface adds one function checked by machine, while each screen multiplies Personas, field kinds, data states, Themes and widths that need judgment.