# The app screen, and which device answers which question

An app screen is **one register and the record its rows open**. `@lotics/app-runtime` composes it
from the entries below; a hand-written app uses the same. A job the register and the record cannot hold is a second app, or a
component inside the record — never a second register on one screen.

## The register

**One line of controls, then the rows.** `FilterBand` holds the search, the status as `StatusChips`
(each option with its count; past five chips, one chip), the
few `filters` read daily and `GroupByMenu` as one chip — at a desk none behind a press, each whole; on a
phone one "Filters" press, its sheet holding each whole. The readings above it are a `ReadingGrid form="band"`, each figure a quarter of its line, half on a phone;
the rows' count and total a `TotalsLine` over them. A screen scoped to one row of another entity names it above
its title as `FolderSwitcher`, whose menu leaves for the list of those rows.

**The first column is the row**, drawn by `Row`: its picture (a rounded square; only a person is a
disc), its title, and one supporting line under it. Then the status, the stated columns, and the one
figure at the right. Rows are at least 72px, centred. A column the width cannot seat folds onto the
row's line as its value, named only where the value cannot say what it is — a count, a day beside
another; never money, a meter or a status (`bare`) — `Table` does it, so a register never scrolls
sideways or drops a column; on a phone a figure, picture or status yields to the name. A column whose values order is `sortable`: its heading cycles `cycleSort(sort, key, "desc")`.

**The whole row is the door**, its words passing it the pointer. Its ⋯ holds the acts and the
delete; ticked rows take `SelectionBar`. `CardGrid` draws the rows by picture, `CalendarView` by day,
`StateMatrix` a roster, row by day.

## The record

**`RecordFrame` is the record, at a page or in a drawer** — it owns the layout, and no prop changes
it.

- **`RecordHeader`**: the picture (someone's initials, a thing's dashed tile, when there is none; where
  the app writes it, the mark is its press, `onPickImage`), the title alone on its line, and under it the status
  then the subtitle runs. At the right the one figure — a `Metric`, a meter against its limit, a
  countdown — and ⋯. No act is a button in a header.
- **`ChecksCallout`**, only while a check stands: each its words over a muted description — a block
  in the danger tone naming what it refuses, a warning in amber, a lock (edits and deletes) neutral —
  and its `resolve`, a `CalloutLink` to the act clearing it or the field it reads, never a button.
- **Sections**, stacked in the order of the work: each its title, one muted line of what it is for,
  its fields (label beside the control on a wide column, above it on a phone; an editable value rests
  as its control, a `readOnly` one as text — on a phone a read among reads is one line, label to value), its
  **`ActGroup`** under them — danger left, primary right, each act's gaps said over the row — then its
  blocks; one block alone under no field takes the section's own heading. What corrects the section's
  work is its `menu`, an `ActionMenu` in its heading.
- **Blocks** inside a section: child rows in the register's row anatomy, a `Timeline`, a
  `FilesEditor`, prose, or a component of the app's own — each with its title, count and add.

The `companions` (the thread, the history; tabs where two) stand sticky at the right from 1056px, the
last section under that. From three sections a rail at the left navigates — the way back, each section by
its name, a step marked done, now or waiting, a page of its own last with a
chevron — under 768px a strip pinned over the column that scrolls sideways; fewer just stack. A drawer
stacks the same sections, or from three shows them as tabs, the companions last — a tab's panel heads
its section only where the heading carries more than the tab's name; ◀ ▶ step the rows.

**A linked row reads as the register reads it.** A `Combobox` option, the field once chosen (a set's
every row inside it, each with its ×) and a read fact are one `LinkValue`: its picture, its title, at
most two subtitle runs, and a figure at the right.

## Which device answers the question

**Pick by the JOB, not the domain.** How loud each part is drawn is [hierarchy.md](./hierarchy.md).

| The reader must | Device | Not |
|---|---|---|
| Scan a set and search it | the register above | a card grid |
| Read one record whole | `RecordFrame` | a form |
| Read what happened, or what is planned, in time | `Timeline` — `group: "day"` heads the days, `rail` numbers a schedule | `Stepper` |
| Show progress through steps | `Stepper` | `Checklist` |
| Judge a set one row at a time | a register's `Drawer`, stepped ◀ ▶ | a surface of its own |
| See a set that must be COMPLETE | `Checklist` | a file list |
| Compare a figure with a reference | `ComparisonBar` | `Progress` |
| Read a level against a limit | `Progress` with `gate` | a bare number, a second meter column |
| Read a composition | `Breakdown`; ranked, `BarChart` `top` | `PieChart` |
| Read a figure's history or bound | `Metric` `series` / `max` | a chart per figure |
| Total a hierarchy | a rows block per level | `Accordion`s |
| Move work through states | the register's `StatusChips`, each move an act | a board |
| Read cash movements | a `Table`, totalled at its foot | `ChargeLines` |
| Scan a grid of instruments | `StateMatrix` | `Matrix` |
| Fill a value per subject and period | `Matrix` | a register per period |
| Scan a body of pictures | `CardGrid variant="tile"` | `FileThumbnailGrid` |
| Read a period of the business | charts over `trend_buckets` | a live board |
| Read planned against done | `LineChart` over `cumulativePoints` | two charts |
| Read an answer a machine gave | `ai_patterns.md`'s entries | a register |

## The one row

**Every row-shaped surface is ONE anatomy, `Row`** — lead, title over ONE line of whole statements
(more only for what `Row.Line kept` owes: hidden, a reading reads as absent), stage, figure, acts,
body — and states only its layout and data, so each gap is one number. `DetailRow` is not one: its
label names a FIELD, never a subject. **Flavour lives in VALUES, never in STRUCTURE**.

## Composition rules

1. **Static shape.** The page's shape is DATA-driven, never output-selection-driven; relevance is a
   callout, never a hidden section.
2. **Decision budget.** Every decision earns its place — derive it, default it, or render it
   conditionally; a placeholder states the honest fallback. **A status the system can WORK OUT is
   never asked for** — "overdue" is arithmetic; a LIFECYCLE is a person's statement.
3. **The header is identity and ONE figure.** The picture, the name, the status and the line under
   it, the figure, the menu — no other fact row.
4. **One fact, one place.** A field the header draws is not a fact as well, and a field no group,
   block or header names is not on the record.
5. **Create-then-refine.** One press creates the row, edited in place — never fake data.
6. **Optimistic feedback.** Every edit echoes, saves behind and reverts on error — no "saved" chrome.