# Step 4 — Compose: one mind, whole canvas Build the app — all surfaces in one continuous context, the chosen package's design.md in view throughout. **Never** decompose this step into per-surface handoffs with frozen intermediate artifacts; the composing mind holds the whole canvas. ## Chrome Per the primitives switch recorded in the project's `design.md`: - **`nurix`** — compose chrome from `@nurix/components`. The chrome recipes (`data/chrome/` — read only the recipes for surfaces in the structure doc) carry composition, states, and when-to-use; the component dictionary (`components/`) carries props, imports, and usage across both provenances — consult the index for what exists, and open the touched category's API reference on need. - **`native`** — the recipes are *specifications*: anatomy, the eight states, keyboard behavior, token reach — implement them with the incumbent stack's own components. The index's shadcn/fallback columns carry the composition; category API references never load. Recipes, generated files, and library compositions are starting points, not jails: restyle or extend them in place when the package demands it. ## Composition rules - **Every surface starts from a chosen layout blueprint** (`data/blueprints/.md`) — pick the shape reading the brief, record it in one line. Structural variety, not visual variety, is what reads as designed. - **Values come from the token artifact** — components consume the emitted custom properties and never invent raw values ([emission.md](emission.md) has the pipe rules). Switching packages must re-skin the whole app. - **Positive obligations apply** — load the surface's archetype checklist (`data/checklists/.md`); the checklists are ceilings: a sidebar ships with brand block, icons, and user context; a dashboard tile ships with number + comparison + trend + state + door; every surface ships its state matrix. - **The register scope holds**: the display face never touches cells, buttons, labels, or form chrome; data numerals run the mono face with `tabular-nums`. - **Motion follows the package's §7** and the frequency law: actions performed 100+ times a day, and any keyboard-initiated action, get no animation, ever; panel/drawer motion is interruptible; entrances never `ease-in`. - **A finishing pass with authority over everything is part of this step** — walk the whole canvas once at the end: rhythm, alignment, density, identity-consistency across surfaces, the one-accent discipline. ## Library reach — under `primitives: nurix` The library carries behavior stock shadcn does not, and each item below is reachable only when the composition routes to it; a hand-rolled equivalent is a defect, not a style choice. - **Density is the trait.** Control height and padding come from `personality.density` through `--density-control-*`; container padding and gaps on scanned surfaces (cards in a grid, list rows, panel bodies) read `--density-pad-xs|sm|md|lg` and `--density-gap-sm|md|lg` — `p-(--density-pad-md)`, `gap-(--density-gap-md)` — so one trait re-spaces the product. A `p-3` on a data surface is the per-surface mood foundations forbid; structural spacing (a divider, an icon's optical nudge) stays literal. - **Motion rides the seam.** A `transition-*` utility with no `duration-*` class inherits `--motion-duration-fast`, which `pace`, the reduced-motion block, and the inline clamp all reach; a `duration-200` opts that element out of all three. App-owned animation reads `var(--motion-duration-base)` and `var(--motion-ease-standard)`, never a literal; the library's `effect/*` primitives already read them, so an identity moment composes from those before a bespoke variant. - **Collections are inline.** Any container of repeated rows the operator scans — a table body, a list, a feed, a board column — carries `data-mode="inline"`: every DOM-descendant transition collapses to instant (portaled tooltips escape) while loaders keep breathing on the ambient duration. `` stamps it on the cell and `block/list` on each of its rows; `block/table` stamps nothing on its container, so the app stamps it on the collection — a table, and every collection it builds itself. - **Every time on screen is ``** (`element/timestamp`): it reads relative inside `relativeThreshold` and absolute beyond it (`format` takes the absolute label's Intl options), the full absolute stamp sits on the native `title` by default, and `isLive` (on by default) ticks on one shared interval. A custom live label subscribes through `useNow` (`lib/time`) — one ticker per interval, never a timer per row. - **Typing is not saving.** Input (Enter, blur), Textarea (blur, Cmd/Ctrl+Enter), NumberInput (blur, Enter, the steppers), Slider (release), Combobox (the pick; close for a multi-select), `DatePicker` and `DatePicker.Range` (the pick) carry `onValueChange(value, details)` for the draft and `onValueCommitted` for the commit, once per settled change; `InlineEdit` carries `onSave` alone. Mutations wire to `onValueCommitted`; `onValueChange` never reaches the server. A form with a Save button is the one exception — a transaction the button commits whole. - **Remote and long option lists are the Combobox's** (`compound/combobox`): hold the query with `searchValue` / `onSearchValueChange` (holding it turns the built-in filter off), pass the fetched rows as `options` with `loading`, page with `hasMore`, `loadingMore` and `onLoadMore()`, and cap a `multiple` select with `max`. Fetching and debouncing are the app's — `useSearchSource` (`hooks/use-search-source`) drops stale responses and debounces. A fetch-in-effect feeding a filtered `