@usableapp/cardds 0.7.96 → 0.7.97

package/README.md

@@ -1,1135 +1,7 @@
 # cardds
 
-> **cardds is a UI framework, not one project's design system.** A project takes it and puts its own values and
-> content into the UI — tokens (`theme.css`), props, slots, composition — without touching cardds. When a project
-> cannot get what it needs from outside, that is a gap in the framework: report it; it is closed here as a
-> GENERAL extension point, never as that project's special case. A consumer project never edits or releases cardds.
->
-> **For:** people and AI alike — this is the reference, the one place a rule of the system is written.
-> The other docs only point here: `CLAUDE.md` (AI working IN this repo — decisions and gotchas),
-> `docs/guides/building-with-cardds.md` (AI composing screens in React; shipped to Claude Design),
-> the `/cardds` skill (AI in another project — install + contract). To LOOK at the system: `npm run dev`.
->
-> **Accessibility:** [Ink follows its ground](#ink-follows-its-ground). Two ink sets, onlight and ondark; every ground declares
-> only its side, and every word and glyph on it follows. `inkGrounds()` checks your theme.
+A card-first UI framework for mobile web apps, in React. It is a set of components for phone-width screens: cards, bottom sheets, sheet stacks, steps, sticky notes, stamps and postcards. A project installs it as `@usableapp/cardds` and gives it its own look with a `theme.css`, without changing cardds itself. With no theme, it draws a grayscale wireframe.
 
-Card-first mobile design system, **React-first**: `src/` is the component
-library — one thin component per pattern, emitting exactly the markup the CSS
-documents. The CSS (`css/*.css`)
-stays the only truth: a component never styles anything, it only picks classes
-from props. The demo is the gallery (`npm run dev`):
-every component's stories, live, searchable.
+The rules of the system are in [`docs/reference.md`](docs/reference.md). The gallery shows every component (`npm run dev`).
 
-Repo: **https://github.com/everysundays/cardds** (private — this is the
-source of truth; every consuming project installs the npm package
-`@usableapp/cardds`, never the other way round).
-
-**Wireframe by default** — grayscale with visible outlines. Color is opt-in,
-lives only in one file, applied with one attribute. Two faces ship with it
-(`fonts/`, `css/fonts.css`): PK Nonthaburi for text, FC Pride for headings
-and big numbers — both Thai + Latin, both single-weight demo/non-commercial
-licences (`fonts/LICENSES.md`).
-
-## Use
-
-```bash
-npm install
-npm run dev          # the gallery on http://localhost:5174 — every story, searchable
-npm run build        # the library: icons → src/type/icons.ts · tsc → dist/ (ESM + .d.ts) · dist/cardds.css (flattened)
-npm test             # Playwright: the tokens and the step/sheet/centre geometry on tests/fixtures/, the gallery's stories and behaviours
-```
-
-```tsx
-import { Screen, TopBar, Step, Page, Sheet, SheetBody, CardHead, Field, Pin, ActionBar, Btn } from '@usableapp/cardds';
-import '@usableapp/cardds/dist/cardds.css';
-import './theme.css';   // the project's own look, after the system's — see "A project's theme"
-```
-
-**The viewport meta cardds expects** (one way for every app):
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
-```
-
-`viewport-fit=cover` = the app runs edge to edge under the phone's own bars; cardds publishes their room as
-`--safe-top` / `--safe-bottom` (from `env(safe-area-inset-*)`, 0 without cover) and keeps what the member reads or taps
-clear of them — the bottom bar's buttons, a sheet's peeked head, its foot and the end of its body, the float bar, the FAB,
-a stage's foot; a fill `Screen` starts under the status bar — while every ground still runs to the edge. A
-component of the app's own pinned to an edge reads the same two tokens. `interactive-widget=resizes-content` =
-Android shrinks the page for the keyboard (`--kb` stays 0 there; iOS publishes it).
-
-Every behaviour is the component's own React code — the `Sheet`'s handle (tap, drag,
-keyboard) with the focus and on-screen-keyboard raises, the `SheetStack` opening and
-closing, the `Pin` auto-advance, the `Modal`'s leaving — each controlled like an input
-(`x` + `onXChange`, or `defaultX`). `src/index.ts` imports `cardds.js` for the environment
-only: the keyboard's height (`--kb`) and `.bleed`'s scrollbar. `Icon` inlines the 61
-symbols of `icons.svg` at build time, so no sprite file ships.
-
-**The gallery** (`gallery/`, `npm run dev` → http://localhost:5174): Vite + React Router, `cardds`
-aliased to `src/`, so the gallery and the package share one truth with no build between them.
-`/` every story of every component, `/:Name` one component — each `.design-sync/previews/<Name>.tsx`
-story live in a 375×812 phone cell, grouped by `src/<group>/`, searchable; switches for the palette
-(`own` = a colour well per colour base), inspect (box outlines + dimensions), a mock keyboard (focus a field:
-it comes up over the phone cell and publishes `--kb` there — to SEE what a keyboard leaves of the screen; it
-types nothing), text size, and a slider per size base. Nothing is hand-listed: add a preview file or a story and it shows.
-
-**On a real phone** — the mock keyboard shows the room a keyboard takes; the REAL one (its kind by `inputMode`: `numeric` /
-`tel` = digits, `email`, `text`; its language is the member's own setting) only shows on a device. The gallery's server is
-open on the Wi-Fi (`server.host: true`): `npm run dev` prints a `Network:` address — open it on a phone on the same
-Wi-Fi. A project using cardds does the same in its own `vite.config` (`server: { host: true }`, or `vite --host`).
-The iOS Simulator's Safari shows the iOS keyboard too (⌘K if it hides); desktop device modes show none. Installing as a
-PWA needs https — a tunnel (`cloudflared tunnel --url http://localhost:<port>`), then Add to Home Screen. `host: true`
-lets anyone on the same network open the dev server: use it on a network you trust.
-
-`tests/fixtures/*.html` are the pages the geometry tests measure — not a demo. Nothing here is verified by eye.
-
-### In another project
-
-**React (the main way, 2026-09-16):** the package is `@usableapp/cardds` on npm
-(published from this machine: `npm run release` sends every `v*` tag the registry lacks, oldest first).
-
-```bash
-npm i @usableapp/cardds
-```
-
-```tsx
-import { Card, CardHead, Btn } from '@usableapp/cardds';
-import '@usableapp/cardds/dist/cardds.css';   // the CSS, fonts resolve from the package
-import './theme.css';                          // the project's look, after cardds.css
-```
-
-**One way in, one step** (2026-09-29): `npx cardds init` — writes the project's `theme.css` (a copy of the
-template), adds `npm run cardds:check`, and says what to import. Then a screen is a template (`Walkthrough` · `Home` ·
-`CallSheet` · `Splash`) or components composed — IMPORTED, never their markup copied: the behaviour lives in the
-component. `npx cardds check [dir]` runs the rules (`lint/rules.mjs`): a hand-written cardds class is an error; a
-`Sheet` that cannot move (`state` without `onStateChange`) or leaves by vanishing (on a condition without
-`onSettled`) is a warning; a bar after `</Screen>` or pinned by hand is an error. The same rules in ESLint (flat
-config): `import cardds from '@usableapp/cardds/eslint'` → `cardds.configs.recommended`. A deliberate exception:
-`// cardds-ignore-next-line`. Adjust from outside only: `theme.css` → knobs → props / slots.
-
-
-**เบราว์เซอร์** (เช็ก 2026-09-24): iPhone ตั้งแต่ **iOS 16.4** (มี.ค. 2023) ขึ้นไป
-
-| เบราว์เซอร์ | ขั้นต่ำ | ออกเมื่อ | เครื่องที่ใช้ได้ |
-|---|---|---|---|
-| Safari / iOS | 16.4 | มี.ค. 2023 | iPhone 8 / X (2017) ขึ้นไป ที่อัปเดตแล้ว |
-| Chrome | 114 | พ.ค. 2023 | Android ส่วนใหญ่ที่ Chrome อัปเดตอยู่ |
-| Firefox | 128 | ก.ค. 2024 | — |
-
-iOS 16.4–16.x ไม่มี popover ในตัว — cardds ใส่ `@oddbird/popover-polyfill` มาให้ (ทำงานเฉพาะเครื่องที่ไม่มี)
-เก่ากว่า 16.4: ระยะของ sheet และสีเพี้ยน (`@property`, `color-mix()`) ส่วนเบราว์เซอร์ที่ผ่านขั้นต่ำแต่ยังไม่ใช่รุ่นล่าสุด
-เมนูจะขึ้นกลางจอแทนที่จะอยู่ใต้ปุ่ม
-
-สำหรับโปรเจกต์ที่อยากเช็กเบราว์เซอร์ก่อนเริ่ม (เช่นหน้าติดตั้ง): เช็กเฉพาะฟีเจอร์ที่**จำเป็น**
-ตัวอื่น cardds มีตัวสำรองไว้แล้ว ไม่ต้องเช็ก
-
-| จำเป็น: ไม่มีแล้วหน้าจอพัง | วิธีเช็ก |
-|---|---|
-| `@property` | `'registerProperty' in CSS` |
-| `color-mix()` | `CSS.supports('color', 'color-mix(in srgb, red, blue)')` |
-| container queries | `CSS.supports('container-type: size') && CSS.supports('height: 1cqh')` |
-| `:has()` | `CSS.supports('selector(:has(a))')` |
-
-มีตัวสำรองแล้ว ไม่ต้องเช็ก: popover (polyfill), anchor positioning, view transitions, `@starting-style`, `text-wrap`
-iOS 16.4–18.2 เช็กผ่าน แต่ยังรองรับไม่เต็ม เมนูขึ้นกลางจอแทนใต้ปุ่ม
-
-Working with Claude in another project? The `/cardds` skill
-(`~/.claude/skills/cardds/`) carries the install and the contract, and points
-back here. It is deliberately thin — **this repo stays the source of truth**,
-so new components and rule changes go here, and the skill only gets updated
-if the contract itself changes.
-
-### For an AI session: the catalog
-
-A session asked for a prototype need not read `src/`: the package ships a catalog (`dist/catalog.json`, built by
-`npm run build`) of every component — props, slots — and every story with its code and its rendered HTML. Ask it first:
-
-```bash
-npx cardds find [words…] [--represents person] [--shape group] [--interact pick|none]
-                                # by the AXES first (docs/roles.md: what it stands for · one or a group · what the member can do), words second;
-                                # the screens already drawn, then components, then what is used with them (nothing → a hint, not a list)
-npx cardds scaffold <id>        # a whole file from a screen: tsx (the code) or --html (a static document linking cardds.css)
-npx cardds get <Name> [--html]  # one component: its role, props (a ReactNode prop is a slot), what it composes, its knobs + variations with code
-npx cardds list                 # every name by what it is for: one · group-brief · group-detail, the show-only first, then by what the member can do
-npx cardds check <dir>          # the rules, before a screen is called done
-npx cardds guide                # the few rules no checker sees, in one short text
-```
-
-`get` lists the component's **knobs** — each `--name` with its default, what it sets and the selector that reads it, joined by the classes the
-component emits, so a knob named for an old name (`--action-note-*`) is found under the component that has it now (`BarNote`). It says what the
-component **composes** (the catalog names its own source renders or calls: `Fab` → `IconBtn`, `Icon`) and what it is **composed by** (the inverse).
-`find` matches the role's note and what a component stands in for as well as its name and description, so a question by intention ("a setting
-turned on or off", "a code digit by digit") finds the piece (`Toggle`, `Pin`).
-
-`list` · `get` · `find` · `scaffold` take `--json` (the function's result) and `--root <path>` (a cardds checkout: rebuilt first, so never stale). The same
-five answers over MCP — `list_components` · `get_component` · `find_components` · `scaffold_screen` · `check_source`:
-
-```json
-{ "mcpServers": { "cardds": { "command": "npx", "args": ["cardds", "mcp"] } } }
-```
-
-The MCP server hands a session the same text as `npx cardds guide` as its instructions, when it starts.
-
-A scaffolded tsx may import `./_story` or `./_*Art`: story glue, not in the package — replace or drop it.
-
-### React adapter — how a component is written
-
-`src/<group>/<Name>.tsx`, one export per class family; sub-parts are their own
-components (`CardHead`, `KvRow`, `TrackStep`, `SheetBody`). A component
-chooses classes from props (`tone`, `state`, `primary`, `sm`…) and lays the
-contract's children in order. A component that has STATE is controlled like an input
-(`state` / `open` / `value` / `flipped` / `selected` + its `on…`, or a `default…` twin), keeps its own behaviour
-inside itself and only ever asks through that callback; it never knows another component — the app wires them
-(2026-09-21; `cardds.js` is down to `--kb`). Never fix a look in a wrapper: fix the CSS, the
-wrapper follows. **Claude Design** builds with these components through
-`/design-sync` (`.design-sync/`: the sync config, the authored preview
-stories, the conventions the design agent reads) — a new component needs a
-preview story there.
-
-## Sheet stack markup
-
-The sheet stack (`.sheet-stack`, `stack.css` — the menu, see *Anatomy*) is the
-one component whose markup has rules, since a sheet's place in the stack comes
-from its position among its siblings. A stacked sheet is written as a `.card`:
-the card is the material, the sheet is what it is in the stack.
-
-```html
-<div class="sheet-stack sheet-stack--tap">   <!-- drop --tap for a static stack -->
-  <article class="card card--2">
-    <div class="card__head">
-      <button class="icon-btn icon-btn--sm sheet-stack__back" aria-label="Back">…</button>
-      <h2 class="t-h2 t-caps">Shopping</h2>
-      <span class="icon-row">…</span>       <!-- optional trailing icons -->
-    </div>
-    …the sheet's own content…
-  </article>
-  <article class="card card--3">…</article>
-  <article class="card">…</article>        <!-- last = the front sheet -->
-</div>
-```
-
-- **Sheets must be direct children** of `.sheet-stack`. Order is the stack
-  order: first = back, last = the front sheet that shows its full content.
-- **`--closed`** (with `--tap`): nothing open on arrival — every sheet, the
-  front one too, peeks at the stack's bottom; the headroom above is the base's.
-  An optional `<div class="sheet-stack__base">` — written AFTER the sheets, so
-  it takes no sheet slot — is what the base shows there, behind every sheet.
-  Loose things in it rest against the heads, with the same room under the
-  last one as between two of them (`--stack-base-gap`); one `Page` reads from
-  the top, one `Centre` stands in the middle. A card standing there is flat:
-  the base clips at its edges, so a shadow would end in a straight line.
-  A room too short for the loose things in it squeezes nothing: the upper
-  thing shows whole from the room's top, the rest lies under the heads, and
-  the room scrolls up until the last thing stands clear of the heads by
-  `--stack-base-gap`. `SheetStack` measures this and renders `is-long` on the
-  base; only then does the base scroll and run under the first sheet's round
-  corners. A room that holds its content does not scroll, and a finger on it
-  moves nothing.
-  A tap, or a pull up, opens any sheet over it. The open title or its back
-  button, tapped or pulled down, drops it home. A pull down in the open
-  content, already at the top, asks `onRefresh` — omit it and that pull only
-  scrolls. A tab in the head stays a click. Every sheet wears a grip — four
-  small dots at the middle of its top edge, a mark that it slides, not a
-  control. `mark="line"` on the `SheetStack` (or `Home`) draws one line
-  there instead, as a single `Sheet`'s; while a sheet is `refreshing`, either
-  mark changes colour the same way. Right after a fold, while the
-  pile is still coming back, a tap is answered by where each head RESTS: the
-  head that will stand under the finger opens, whatever is passing there.
-  An open sheet stops under the top bar. `rise="flood"` on the `SheetStack` (or
-  `Home`) — `sheet-stack--flood` in markup — lets it rise over the bar and fill
-  the whole screen instead: the stack is then the whole screen, the bar a layer
-  under the sheets (hidden while one is open), nothing resizes. At the screen's
-  top the open sheet's top corners are square; folded, they are round again. It needs
-  `--closed` in a `Screen fill`.
-- **`Home` takes a sheet's tab from the app.** Each of `Home sheets` keeps its
-  own tab (`defaultTab`, else the first) unless the app gives it `tab` — then
-  that tab shows, and a tapped tab asks `onTabChange(tab)`. Something outside
-  the stack (a card in the base) brings a sheet up on a named tab by setting
-  that sheet's `tab` and the Home's `open` together. Story `Home · Feed`.
-- **Five sheets max.** Slots are declared per `:nth-child` in `stack.css`; a
-  sixth would render at slot 0, on top of the first.
-- **Every head needs its own `.sheet-stack__back`** if the stack is `--tap`. It stays
-  hidden until that sheet is open, then slides into a reserved header slot.
-- **No ids, no wiring.** `SheetStack` holds which sheet is open (`open` + `onOpenChange`, or `defaultOpen`). A pull down in the open content asks `onRefresh(index)`. The stack does not fetch: the app reloads (that sheet alone, or more — its call) and says so with `refreshing` (that index, then `null` when the data is in) — that sheet's grip dots dissolve white to black meanwhile, and a pull there does not ask again.
-- **`.card-stack` is gone.** That was this component's first name and the wrong
-  one — the members are sheets and the stack is the menu, not a list of cards.
-  Never bring it back, not even as an alias.
-
-## Screen: top · content · bottom
-
-**Every screen is three parts in ONE flex column** (Lh 2026-09-23) — the words used to ask for a screen, and the props
-of `Screen`:
-
-| Part | Prop | What fills it |
-|---|---|---|
-| **top** | `top` | `TopBar` · `AppBar` · `"lead"` (no bar: the content starts `--screen-lead`, 15% of the screen, down) |
-| **content** | children | a `Step` (`Pages` · `Page` · `Page` + `Sheet`) · `Centre` · `SheetStack` … |
-| **bottom** | `bottom` | `ActionBar` (rows: `controls` · the one `cta` row — the pager bar ← → or one wide button · a `ctaLink`) · `FloatBar` · nothing |
-
-```tsx
-<Screen fill top="lead" bottom={<ActionBar variant="pager">…</ActionBar>}>
-  <Step><Pages>…</Pages><Pager at={1} of={3} /></Step>
-</Screen>
-```
-
-- **Top and content are one flex column; the bottom is a LAYER** (Lh 2026-09-23). In `Screen fill` the content runs to the
-  screen's bottom edge; the bottom (`ActionBar`, with the walk's `Pager` as its first row) lies over it at the foot and
-  covers what is under it — on purpose, nothing is added to the content to make room. The keyboard lifts the layer (`--kb`).
-- **The bar is INSIDE the screen** — `bottom`, never a sibling after `</Screen>`, never pinned with a hand-set `position`.
-  A `FloatBar` in `bottom` floats the same way.
-- **A screen with a `Sheet` has no bottom.** The sheet finishes on its own `CardFoot`; `Screen` warns once when both
-  are there.
-- **Checked:** `validateScreen` (`scripts/validate.mjs`, run on every story and template by
-  `tests/composition.spec.js`) fails a bar after `</Screen>` or a pinned bar, warns on a Sheet + ActionBar.
-- **Templates** are `Screen`s with the three parts filled (`Walkthrough` = top `lead` · content `Pages` · bottom
-  `ActionBar`); the gallery draws those parts on a template's page. The gallery's nav groups a screen's
-  *top* and *bottom*, then each frame with the pieces that fill it: *card* (Card, its head, body and foot),
-  *sheet*, *stack*, *step*. A piece that also fits another frame says so on its page.
-
-## Step markup
-
-A step is one screen, one task (see *Anatomy*). It is the other component
-whose markup has rules, because the sheet's box is the step itself:
-
-```html
-<!-- reads: the words only -->
-<section class="step">
-  <section class="page">
-    <div class="card__head"><h2 class="t-h2">…</h2></div>
-    <p class="t-body">…</p>
-  </section>
-</section>
-<div class="action-bar action-bar--pager">…</div>   <!-- the screen's bottom: inside .screen, after the step -->
-
-<!-- acts: the words + a sheet -->
-<section class="step">
-  <section class="page">…the words…</section>
-  <article class="card sheet sheet--half">
-    <button class="sheet__handle" type="button" aria-label="ปรับความสูง"></button>
-    <div class="card__head"><h2 class="t-h2">…</h2><span class="chip">…</span></div>
-    <div class="sheet__body">
-      …cardds controls (.field / .pin / .composer / .rows + .check / .segment /
-      .chip-grid), or small content cards (.card--sm)…
-    </div>
-    <div class="card__foot"><button class="btn btn--primary btn--block">…the one button that finishes the sheet…</button></div>
-  </article>
-</section>
-<!-- no .action-bar: a bar is the base's, never in front of a sheet -->
-```
-
-- **`.step` needs a bounded column**: a direct child of `.screen--fill`, or
-  of an app section with a definite height. It is a flex child that fills the
-  column between the top bar's reserve and the bar's, and clips at its own
-  bottom edge — which is what makes the sheet stop above the bar. In a plain
-  scrolling `.screen` it has nothing to fill.
-- **The sheet is full-width; the card keeps the inset.** The step bleeds to
-  the screen's edges (reading `--screen-pad`, as `.sheet-stack` does) and the
-  card takes the inset back as its side margins — so the card and the bar's
-  buttons stand on the inset line, and the sheet runs edge to edge like the
-  bar and like a sheet in a `.sheet-stage`.
-- **`.page` first, `.sheet` last.** The block carries the step's words
-  ON THE BASE — no frame, no area colour (it was a `.card` until 2026-09-16;
-  Lh: a step reads like a page, not a card in a page). It keeps a card's
-  rhythm: a `.card__head`, `--card-gap` between things. The sheet is
-  **handle · head · body**: the handle, then a `.card__head` title row (that
-  row is what `peek` shows — heading left, the contextual thing right), then
-  `.sheet__body` with what the member acts on. The handle and the head are
-  pinned; the body is the one thing that scrolls, to the card's own edges. The
-  handle is a line, or four dots (`mark="dots"`): both sit in the card's top
-  padding, the same distance from the edge, so the title stays put. `refreshing`
-  (off unless the app sets it) changes the mark's colour while the app reloads
-  what the sheet shows, as a stack sheet's does; the sheet does not fetch. `paper` makes
-  the content white while the head keeps the sheet's colour (`tone`, as a card).
-  The same prop on a `StackSheet`, or on a `Card` in a stack: the head keeps the
-  tone, the body and the foot are white, and the gap under the head stays the tone.
-  While that sheet is closed, the corners the next sheet does not cover show the
-  card's colour. That colour fades in as the sheet returns, and is done when it stops.
-  A sheet with no head (the dim page sheet) is a body alone.
-- **The step follows its top bar directly, and touches it.** `full` means
-  the sheet's top edge at the bar's bottom edge — nothing above it but the
-  bar. So the room the screen would have left between the bar and the step
-  moves inside the step, above the card: `.topbar + .step` cancels the
-  screen's gap (`--screen-gap`), `.appbar + .step` cancels the reserve's
-  breathing (`--header-gap`), and the card takes that room as its lead. A
-  step that follows anything else keeps the screen's gap, and the sheet
-  stops under that thing.
-- **The bar is after the step, inside the screen** (the screen's bottom — *Screen: top · content · bottom*). In a
-  `.screen--fill` the bar is a layer over the content's foot. On a SCROLLING screen (not fill, 0.7.0) the screen is a
-  column at least one phone tall and the bar its last row, `position: sticky` at the viewport's foot (above `--kb`):
-  it stays in reach while the words scroll and sits under them when they end. Either way the bar is written INSIDE
-  the Screen (`bottom`) — a bar after `</Screen>` is an error (`validateScreen`).
-- **Every sheet has one shape** (Lh 2026-09-21): the handle and the head stay at the top and never scroll · the
-  foot's button stands at the bottom — above the keyboard when there is one (`--kb`: a step gives the keyboard
-  its room, a stage sheet gives it up itself as `--_lift`) · everything between them scrolls, as far as it
-  needs to: the body's bottom padding is the part that slid under (`--_cover`), so the last row comes up to
-  the button at half and 3q as it does at full.
-- **Layers: the base, the sheet over it, the top bar** (Lh 2026-09-20). The `.action-bar` belongs to the
-  BASE — the move of a page of words (a pager bar, or one wide button). It is never in front of a sheet. A
-  screen with a sheet finishes ON the sheet: a `.card__foot`, the sheet's last child — ONE row, the page's
-  conclusion. The foot stands on the screen's bottom edge at half, 3q and full alike (a layer as tall as
-  the sheet, slid up by the share the sheet slid down — `sheet.css`), and is gone at peek. Nothing inside
-  the sheet's body commits on its own (a `Composer` there takes no `send`). This is how cardds's own screens are
-  composed — guidance; the framework does not enforce it: a component never changes because another one is there.
-- **Never write a sheet's height, and never a `.sheet-stage` inside a step.**
-  State is a class (`sheet--peek` / `--half` / `--full`); the sheet is always
-  the step's full height and only slides. In React the APP owns it: `<Sheet state={s}
-  onStateChange={setS}>` (controlled) or `<Sheet defaultState="half">` (it keeps its own). The sheet's own behaviour —
-  the handle's tap and drag, the focus raise, the climb when the keyboard moves the cut — lives in the component and
-  only ever ASKS through `onStateChange(state, reason)`; nothing outside the sheet is touched.
-  A sheet always ARRIVES and LEAVES by sliding: mounted already up, it starts `away` for one frame and slides in. To
-  take it off the screen set `state="away"` and unmount it in `onSettled` (`s === 'away'`) — unmounting it while it is up
-  only makes it vanish (dev warning). Story: `Sheet · MountedOnDemand`.
-- **A part that becomes active has its field waiting with the cursor** (Lh 2026-09-29) — a `Sheet` come up, a `SheetStep`
-  opened, a `SheetStack` sheet opened, a `Modal` arrived. Once it has settled: the field marked `data-autofocus`, else its
-  first field, else its heading (a step's title, a modal's question) or, for a sheet come onto the screen, its handle. A field
-  that already has the cursor keeps it. One mechanic for all of them (`focusWhenActive`, src/state.ts); an app writes no focus code.
-  Another field than the first: `<Field data-autofocus … />`. Off: `data-standby="off"` on any box around the part — no field
-  is given the cursor (the heading or the handle still is). The gallery sets it on its stories; its Cursor button (C) turns it on.
-- **The signal set — four colours, four meanings, everywhere** (Lh 2026-10-02): `--signal-ok` green (it went right) ·
-  `--signal-warn` yellow (look out) · `--signal-error` red (it went wrong) · `--signal-info` blue (for your information).
-  The wireframe has them too. A theme may retune a shade, never a meaning. Each is dark enough for words and edges;
-  `--signal-*-soft` is its light ground (the signal washed 14% into the surface). Never the colour alone: an icon or
-  words say it too. Read by: `Field`/`Pin`/`FormNote` error, `Dot tone` / `Chip dot="ok|warn|error|info"`, `Snackbar` (ok).
-- **Good news is a `Snackbar`, a warning or a question is a `Modal`** (Lh 2026-10-02): a `Snackbar` is a quick line over the
-  screen — something went well, said in passing. A child of the `Screen`; it slides in from the top (or `bottom`, above the
-  bottom layer), stays `duration` (4 s), slides out, never takes the cursor, never stops the member. `open` +
-  `onOpenChange(open, reason)` or `defaultOpen`; unmount it in `onClosed`. One at a time: the queue and the notification
-  list are the app's — the app shows its newest notification in it, `onTap` opens that notification.
-- **Mount a `Modal` only when it is to show.** A `Modal` first mounted with `open={false}` is drawn in place, then leaves,
-  and calls `onClosed` after about 700ms. Known fault, not fixed: under React StrictMode (any dev build) `onClosed` is
-  never called for a `Modal` mounted that way. Keep the app's own `mounted` flag: set it when the question is asked,
-  clear it in `onClosed`.
-- **cardds names its own controls, in the page's language** (Lh 2026-09-29): a handle, a back button, a Pin's cells… read
-  their name from `src/words.ts` by `<html lang>` (en, th ship; `setWords(lang, {…})` adds one). An app passes no label that
-  only repeats these words; a prop still wins.
-
-## Centred card markup
-
-One card at the human centre — the introduction screens, and any screen with
-one thing to read and one move. The heading above, the bar below, the card
-between at 40% down the screen (see *Anatomy*, "Where the centre is"):
-
-```html
-<div class="screen screen--fill">
-  <header class="topbar"><h1 class="t-h1">ธนาคารเวลายินดีต้อนรับ</h1></header>
-  <article class="card card--centre">
-    <div class="card__head"><div><h2 class="t-h2">ปรับขนาดตัวหนังสือ</h2></div></div>
-    <p class="t-body">…</p>
-  </article>
-</div>
-<div class="action-bar action-bar--tiers">
-  <div class="action-bar__tier"><label class="slider"><input class="slider__range" type="range" min="100" max="160" step="15" aria-label="ขนาดตัวหนังสือ"></label></div>
-  <div class="action-bar__tier action-bar__tier--pager">
-    <button class="icon-btn" aria-label="ย้อนกลับ">…</button>
-    <button class="icon-btn icon-btn--invert" aria-label="ถัดไป">…</button>
-  </div>
-</div>
-```
-
-- **The card floats in the fill screen** (`.screen--fill` is its box), hugs its
-  words, keeps the screen's inset, and is capped so it never reaches the title
-  bar above it nor the bar's room below — past that it scrolls inside. Never
-  give it a height; never move it with a margin. The cap is twice the room
-  above the centre (2 × (40% − the title bar)): a card taller than that is
-  not a centred card — it is a plain scrolling `.screen` (the detail view).
-- **A small group at the same centre** — an empty state; a card with its quiet
-  second button and the `Pager` dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
-  screen after the topbar. Same placement and cap; it runs edge to edge with
-  the inset as padding, and stacks its children at the
-  screen's gap. Never hand-lay `top: 40%` on a screen.
-- **The bar is the screen's bottom.** Plain `.action-bar` for one move; with a
-  control that belongs to the screen (a slider), `.action-bar--tiers` stacks a
-  control tier above the buttons (it publishes the taller `--bar-reserve` the centred card still reads for its cap).
-- **The pager bar** is `.action-bar--pager` (or an `.action-bar__tier--pager`)
-  holding two peers at the two edges, a skip link between or nothing: two round
-  `.icon-btn`s, or two `.btn`s that name the step each leads to with the arrow at the
-  round pager's size ("← คำขอ" · "วันเวลา →", Lh 2026-10-17; the 2026-09-16 "never words" is lifted).
-  Worded, each hugs its edge at its own size with open ground between: left and right, never two halves. The names are steps; the step that
-  commits ("Done") still goes back to one wide button (rule 3).
-- **Page that moves** (Lh 2026-09-20) — two ways, never both on one screen:
-  - *Pages of words:* `.step > .pages > .page` (one `aria-current="step"`, the rest `inert`) — every page
-    one height, the round pager bar turns them (`slideTo()`), the words slide like a page. No sheet there.
-    ONE SCREEN TO THE NEXT (a route change) slides the WHOLE screen the same way: `slideScreen(() => navigate(to), 'next' | 'back')`,
-    and `installScreenSlide()` once at app start for the back button (story `Step · WalksOn`). `data-slide="off"` on a Screen = no slide.
-    ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way (signed in or not, a list or
-    its empty state, a redirect) is NOT drawn until the app knows which — `<Screen ready={known}>`. Not ready = nothing of it
-    is drawn; arrived at through `slideScreen` / the back button, the screen before stays until it is ready (at most 3 s), then
-    the right one slides in. Never one outcome first and another after (story `Step · ArrivesReady`). On a first load there is
-    no screen before: hold the `Splash` (`done`) until the first screen is known.
-    THE BACK STACK (Lh 2026-10-01): back takes ONE thing off — a screen (a route), or a LAYER: what lies over a screen, a whole
-    bottom sheet or a modal. A layer is one history entry, kept in the entry's STATE (the address stays the page's own, so the
-    screen behind does not slide): `const way = useLayer('way')` → `way.value` (null = not up) · `way.open(value)` (one entry;
-    already up = the same entry shows the new value) · `way.close()` (the part's own close: the handle, the scrim, a button —
-    back one entry, or, when it came with the page, the entry without it) · `way.arrive(value)` (a link straight to an open
-    sheet: read `?way=` once, no entry added, the query dropped). `useLayers().closeAll(then)` takes every layer off, then moves
-    (signing out). NOTHING INSIDE A LAYER TAKES AN ENTRY — a step, typed text, a sheet's rest, a tab: back at any step takes the
-    whole sheet down, and opened again it starts anew (a new `key` per opening). ONE LAYER PER TICK: two layers opened in
-    the same handler lose the first (`a.open(1); b.open(2)` gives `a.value` null and `b.value` 2). Open the second in a
-    later tick. The project hands its router over once:
-    `<LayerHistory state push replace back>` around its screens — react-router: `location = useLocation()`, `state = location.state`,
-    `push = (s, search) => navigate({ pathname: location.pathname, search: search === 'drop' ? '' : location.search }, { state: s })`, `replace = (s, search) => navigate({ pathname: location.pathname, search: search === 'drop' ? '' : location.search }, { replace: true, state: s })`,
-    `back = (n) => navigate(-n)`. cardds never calls the History API itself. Story `LayerHistory · Back`.
-    A FINISHED PROCESS IS NOT GONE BACK INTO: history cannot be deleted, so (a) inside a process every move on is a `replace`,
-    never a push — when it ends, back skips all of it; (b) a page that can no longer be returned to guards itself: it checks on
-    arrival (`Screen ready={false}` meanwhile) and, when its work is already done, replaces itself with the right screen — that
-    covers forward, an old link, and entries left ahead after `closeAll`.
-  - *Sheets the app calls:* the base offers WAYS IN — sign in · new phone · join — as buttons (`.cta-pack`); each
-    way has a sheet that holds its WHOLE form and its own submit on its foot, starting `.sheet--away` (not on the
-    screen: slid out, hidden once gone, `inert`). **The wiring is the app's, not cardds's**: a `useState` of which
-    sheet is on and where, each button sets it, each `<Sheet state onStateChange>` reads it — one at a time, the same
-    button raises a peeked sheet, the handle stops at peek (`states="peek full"`). Story `Step · Calls` is those few
-    lines; it could as well be a route, which is what makes the phone's back button close a sheet. CSS's only part:
-    behind a peeked sheet the words keep `--sheet-peek` of room (the box declares the token), so the buttons under
-    it scroll clear.
-    **Never a form taken apart** — one sheet per field, a "send" left on the base: a form lives whole in ONE sheet.
-    Fixture `tests/fixtures/calls.html`, tests `tests/calls.spec.js`, stories `Step · Walks` / `Step · Calls`.
-- **A pager bar turns pages of words, never a screen with a sheet** (Lh 2026-09-20). A
-  sheet means this screen has work that cannot be walked past: no ← →, no bar at all — the sheet's
-  own foot finishes it. (Guidance — not enforced.)
-- A screen is **top · content · bottom** on the base (*Screen: top · content · bottom*). The base is the
-  surface; top and bottom are the chrome above and below (`.topbar` / `.appbar`,
-  `.action-bar` / `.float-bar`); content is everything between.
-- Content has three homes: **on the base**, **in a card**, **in a bottom
-  sheet**. Content normally comes in cards; static data (a blurb, a legal
-  note, help steps) may sit on the base directly.
-- **A card is head · content · foot.**
-  - **Head** (`.card__head`): the heading on the left; hints, actions or a
-    more-menu — the contextual info — at the far right. With nothing at
-    the far right it runs all the way across. The heading wraps freely —
-    no line budget, no squeeze, no clamp (Lh 2026-09-16): a height rule on
-    words only distorts them. The head is FLAT markup — heading, then an
-    optional caption as a span, then the far-right thing; no
-    wrapper element, no `<p>`: the head wraps, the caption takes the row
-    below (`order`), the gap tokens do the rest (Lh 2026-09-16).
-  - **Content**: whatever the card frames — rows, key-values, a gauge, a
-    paragraph. Frameless, per rule 9.
-  - **Foot** (`.card__foot`): the card's action buttons on one line. One
-    button takes the width; up to four share it in even parts; from three
-    on they drop their side padding so the labels keep the room. A panel of
-    up to four icon buttons (`IconBtnGroup`) takes the foot the same way; with
-    `form` it is as wide as its buttons (one tap each) and stands in the middle,
-    as `Btn form` does — in a foot, a `Page`, a `Centre` or a `CtaPack` — and
-    with `form labelled` its `label` is SHOWN as words at its left, the two
-    centred as one line (Lh 2026-10-10).
-  - In React the head and the foot are the card's **slots**:
-    `<Card heading caption end foot footLink>` with the content as children —
-    the card writes the order (head first, foot last). A head of its own shape
-    is a `<CardHead>` child instead; never both (Lh 2026-09-27).
-  - **A card that goes on is pressed whole** (Lh 2026-10-09). A card whose ONLY
-    control is its foot's button, or the end button of a row card, is pressed
-    anywhere: a touch off the button runs that button's own action once, and the
-    whole card dims under the finger (`.card--go`, the card-wide press answer of
-    a row or a card link). `Card` does it by itself — the app wires the button
-    and nothing else, and there is no prop to turn it off. The keyboard and a
-    screen reader meet the button only. Every other card is only read: two or
-    more controls anywhere in it (a field, a choice, a nested card's button),
-    the one button in the head or in the content, a disabled button, a sheet, a
-    stack's sheet, a modal. A card that is itself a link or a label was pressed
-    whole already. Story `Card · PressedWhole`.
-  - **A feed is a queue of cards, all in sight** (Lh 2026-10-09; the whole
-    queue 2026-10-15). `CardFeed` takes the WHOLE queue as `FeedCard`
-    children, in the app's order, and draws every one: ONE is BIG (heading,
-    content, its button) and the rest are SMALL (the same card cut down to its
-    head — no content, no button). A touch anywhere on a small one makes it
-    the big one and the big one small; none changes place. The small card is
-    itself the button (named by its heading, Enter and Space) and what it does
-    not show cannot be pressed, focused or read; the big card is a plain card,
-    pressed whole by the rule above. The queue is the app's, and so is its
-    length (5, then 10…): near the end the feed asks for more with
-    `onMore()`, once per queue, when the card with `ahead` (default 2) cards
-    under it comes into view; the app appends, and the feed asks again at the
-    new queue's card. When the app says the queue is complete it passes `end`
-    (the words drawn after the last card) and the feed asks no more. When a
-    card LEAVES or the order changes, what is left slides up and the UPPER card
-    is big, whichever was big before; cards appended at the end fade in and ask
-    nothing, so a member who scrolled down stays there. One card alone is big;
-    no card, nothing is drawn. Which card is big is controlled like an input:
-    `big` (a card's `id`) + `onBigChange(id, 'tap' | 'queue')`, or
-    `defaultBig`. A `FeedCard` is `id` · `heading` · `caption` · `icon` (its
-    thumb, in both sizes) or `lead` (anything at the head's start instead: a
-    `Stamp` is the small stamp, 48 × 60, an `Avatar`; it wins over `icon`) ·
-    `tone` · `foot` (one `Btn`: the big card is pressed whole; two or more:
-    only the buttons act) · children (the content); its size is the feed's,
-    never a prop. Knobs `--card-feed-gap`, `--feed-card-head-h`. Reduced
-    motion: nothing slides or fades. Stories `CardFeed · Default`, `More`,
-    `StampLead`, `Home · Feed`.
-- A page with **one feature and one CTA** (an install page, a single
-  decision) may be contained in one card: head, the pitch, foot.
-- **A bottom sheet holds what the member acts on** — controls, or small
-  content cards to pick from or read more — and it opens to the full height
-  of its box. **Cards are content the system offers**: the words, the
-  explanation, the thing to read. Do not put the step's explanation in a
-  sheet.
-- **The sheet is the paper the member fills in** (Lh 2026-10-18). Every
-  control the member fills in or picks stands on a sheet: a `Sheet`'s
-  `SheetBody`, a `SheetStep`, or a stack sheet. That is `Field`, `Composer`
-  and `ComposerArea`, `Pin`, `Dropdown`, `Slider`, `Toggle`, `Check`,
-  `ChipPick`, `Calendar`, `DayStrip` and `Day`, `Picker`, `Mood`,
-  `AvatarPick`, `FileBtn`, `AddRow`, `MapPick`, a `Tile pick` and a
-  `Tile upload`. A card is for reading and pressing buttons only; never put
-  a form, or one control of it, in a card. `cardds check` rule
-  `field-in-card` (error) flags a control written inside a `<Card>`. A `Card`
-  that is a sheet of a `SheetStack` is that stack's sheet, so it may hold
-  them. Seen in timebank's help-ask prototype: a Composer, a Dropdown and a
-  map on white cards inside the help sheet, the cards the colour of the
-  ground.
-- **Two sheet systems, one material.** *Sheet single* (`.sheet`, `sheet.css`)
-  is ONE sheet the member acts in, whatever it holds: a short entry in front
-  of a step's card, a place on a map, a payment on a dim page — in a `.step`
-  or a `.sheet-stage`, and its state is how far it slid (peek / half / 3q / full).
-  *Sheet stack* (`.sheet-stack`, `stack.css`) is MANY sheets, each a main
-  section of the app, stacked like paper at the middle of the home screen:
-  the menu. Heads peek, a tap brings one sheet to the front, back returns it;
-  each sheet is the metaphor for the section it opens. Both are cut from the
-  same material — a stacked sheet is written as a `.card`, and the single
-  sheet is `.card.sheet` — and both obey rule 8: rigid, full height, moved
-  by `translate` only. (The stack was first named "card stack": wrong, and
-  retired.) See them live in the gallery: `Sheet`, `SheetStack`.
-- **A step is one screen, one task: `.step`.** What the member reads is
-  words on the base (`.page` — the same block as anywhere on the base; it was `.step__card` until 2026-09-16); what the member does, if the step asks for it, is a
-  `.sheet` in front of it; the screen's one move is `.action-bar`, the screen's
-  bottom, after the step. A step where the member only READS is the card alone.
-  A step where the member ACTS (types, picks, shoots a photo, records) adds
-  the sheet: peek shows its handle and title row, half shows half of it,
-  full slides up until its top edge touches the top bar — and at every one
-  of those it stops above the bottom bar, because the step is the box it
-  slides in: it starts where the top bar ends and ends where the bar's room
-  begins. Nobody lays a step out by hand and nobody writes a
-  sheet's height. In short: **member acts → card + sheet, member reads →
-  card.** Markup: *Step markup*. Live: the gallery's `Step` page.
-
-- **Where the centre is.** To the person holding a phone, the bottom fifth of
-  the screen is the thumb's — the bar, the controls — so what is meant to be
-  read sits at the middle of the four fifths above it: **the human centre is
-  40% down the screen, not 50%** (`--screen-centre`, Lh 2026-09-10). A screen
-  with one card and nothing else to read puts it there (`.card--centre`, the
-  introduction screens); a splash puts its mark there.
-
-Live: every screen in the gallery (`npm run dev`).
-
-## Sticky notes
-
-A sticky note is a square of paper with a few words on it. The family is in `src/sticky/`, its CSS in `css/sticky.css`.
-
-- **One note, one size.** Every `Sticky` is one square, 168 by default, with square corners. It never grows with its
-  words. Words it cannot hold at its size are written one size smaller (`--sticky-small-font`, the label size), and
-  the note then holds six lines instead of four and a half. Words longer than that are cut where their room ends, with
-  no ellipsis. A `StickyField` stops at that room: the note refuses the input that would not fit, and the app's
-  `onChange` is not called for it. One knob sets the side, `--sticky-size`; set it on an element to resize the notes
-  inside that element only.
-- **The fold says unread.** A folded bottom-right corner means the note has not been read. `flat` means it has. A
-  folded note also says so to a screen reader after its words: cardds's own word by the page's language, or
-  `unreadLabel`.
-- **`Sticky`** — `tone` is one of the nine papers in `STICKY_TONES`. `head`, `date`, `foot` are small rows above and
-  under the words. `onClick` makes the whole note a button. `stuck` holds what is stuck on the paper (`StampOn`).
-  `tilt` turns the one note a start screen hands over. A `Chip sm` in the `foot` is a name label on the paper: it
-  stands at the start, what follows it (a time) at the end, on one line.
-- **`StickyBoard`** — notes stuck on a page. Rows wrap by the width: two on a phone, three from 504 of room, a screen about 540 wide.
-  The notes stand edge to edge and each is turned by one of four angles in turn (`--sticky-board-turn-1` to `-4`), so
-  no two notes that touch lean alike. Later is on top, always: the right note over the left, the lower over the
-  upper. `--sticky-board-lap` (0) is how far each lies over the one before. Where two notes do not fit side by side,
-  each lies over the one before by what is missing, up to half the fold; past that there is one note in a row. A
-  note's `foot` is laid over the note's foot and takes no room from the words, so a note reads the same on the page
-  as where it is opened.
-- **`StickyThread`** — notes as a conversation, in two ways. With head rows: each `StickyPost` shows `who`, `name`
-  and `time` above its notes, and `rail` joins the avatars for a feed. `lapped`: a chat with no head rows. Theirs
-  stand at the left and mine (`side="right"`) at the right, each turn lying over a corner of the one before
-  (`--sticky-thread-lap` down, `--sticky-thread-lap-x` across), the time close under its note, the name only heard.
-  Two turns from one side stand `--sticky-thread-same-gap` apart.
-- **`StickyHeading`** — what a chat told in notes is about, for as long as that lasts: a `title` and a short `caption`
-  (when) written on what it stands on, a dotted rule under it; information only. It stands in two places and no other
-  component has a prop for it. In a `Sticky`'s `stuck` (the list) it lies across the top of that chat's note, and the
-  note's words start under it and show two lines at most. As the first child of a `StickyThread` (the room, with
-  `as="h2"`: the sub-heading under the screen's h1) it stays at the top while the notes run under it. The app stops
-  rendering it when the subject ends. Knobs: `--sticky-heading-title-font`, `-caption-font`, `-gap`, `-room`.
-- **`StickyAnswer`** — the note you answer on. Its child is a `Sticky flat` holding a `StickyField`. At rest it waits
-  at the screen's foot near the right, three quarters of it in sight (`--sticky-answer-show`). A touch on it puts the
-  cursor in the field and the holder asks to write: `writing` + `onWritingChange(writing, reason)`, or
-  `defaultWriting`. While writing, the note stands at the top, the screen behind is washed pale and takes no touch,
-  and `tools` (the paper chooser, the send button) and `tray` (the writer's stamp) stand under it. A touch outside or
-  Escape asks to stop. The words, the paper and the stamps on the note are the app's. It is a child of the `Screen`.
-- **`StickyPile`** — one to six notes lying one over another, as the newest notes of a feed do. It is a feed item of
-  its own, with no card frame. The first child is on top, so pass the newest first. Each note under it lies a step
-  right and down (`--sticky-pile-step-x`, 24, and `--sticky-pile-step-y`, 8), turned by the board's four angles by
-  its place, so the top note turns the same whatever the count. Only the top note draws its `foot`. At 375 a pile of
-  one is 184 × 184, of three 232 × 200, of six 304 × 224 (`--sticky-pile-pad`, 8, is the room round the notes for
-  their turn). The pile stands in the middle of its column and is never wider than it: a narrow column shortens the
-  steps. A seventh note is not drawn, and the console says so once. With `onClick` the whole pile is one button, and
-  `label` is its name (required with `onClick`): one Tab stop, a ring round the pile. Where the press goes is the
-  app's. A `StampOn` on the top note keeps its own touch; the stamps on the notes under it are inert. A pile's notes
-  all wear their stamp at one size.
-- **`StickyField`** is the bare textarea on a note. **`StickyPick`** is the paper chooser: `value` + `onChange`,
-  `tones` for the ones on offer.
-
-Whose colour a note wears is the app's rule. The gallery's `StickyScreens` shows one: a neighbour's note wears the
-ground of that neighbour's stamp, and my note wears the paper I picked while writing, from a writing set plus the
-ground of my own stamp.
-
-## Stamps
-
-A stamp is a small paper picture a member keeps and sticks on a note or a postcard for a neighbour. Sending never uses
-it up. cardds draws the paper; the pictures, their words and which stamp a member owns are the app's.
-
-- **`Stamp`** — a perforated 4:5 stamp. `pictures` is one to four nodes, the app's own art (an svg, an img), in placement
-  order: the stamp places, sizes and turns them by how many there are. `tone` is the ground, one of `STICKY_TONES` (the
-  same list and the same `--sticky-<tone>-bg` knobs as a note's paper). `name` is the big line on the picture's foot,
-  `words` the small line above it. `tilt` turns it, `onClick` makes the whole stamp a button. Every inner length follows
-  the stamp's width.
-- **A stamp is one size wherever it stands** (Lh 2026-10-11). A `Stamp` and a `StampPlace` are `--stamp-size` wide (two
-  taps: 96 × 120) in a `Centre`, a sheet, a page, a `StampBook` and a card's head. What holds a stamp only places it. A
-  holder narrower than a stamp shrinks it, and the stamp is still shown whole. Set `--stamp-size` on `:root` for every
-  stamp, or on an element for the stamps inside it. There is one other size, the small one: a stamp in a `StampOn` and a
-  stamp in an `AvatarStack` are `--stamp-sm-size` wide (one tap: 48 × 60), on any surface and in any row. The stamps in
-  a `PostDesk`'s tray are the standard size. One exception, by the owner's decision: the stamp at a postcard's corner is
-  the postcard's own size, 72 × 90 (`--post-corner-stamp-w`), in neither. `words` is not drawn on a stamp 96 wide or
-  narrower, so at the standard size only `name` shows, and it is larger.
-- **`StampPlace`** — an empty place the size of a stamp, its edge a ring of round dots: a word inside, `onClick` for "make
-  yours", `faint` for a gap nobody is asked to fill. The edge is a drawn stroke, so the dots are yours: `--stamp-place-dot`
-  is how wide each is (default `--rule-w`, 2px), `--stamp-place-gap` the distance from one dot's centre to the next
-  (default 6px), and a `--stamp-place-dash` above 0 stretches each dot into a round-ended dash. Its corner is
-  `--stamp-place-radius`. The dots' outer edge is the box's edge whatever their width.
-- **`StampBook`** + **`StampCell`** — the album page: cells three across on an album ground, a `label` under each stamp,
-  the free places drawn up to `places`. A cell with `onClick` is a button; `on` marks it pressed. Each stamp stands in
-  the middle of its third. `bare` is the page with no ground, no padding and no round. `strip` is one line of stamps
-  that scrolls sideways, the tray a member picks from. `fill` is the stamp's third size: each stamp as wide as
-  its third, 4:5, the gaps one `--screen-pad` both ways (`--stamp-book-fill-gap`), nothing at the row's sides; with `bare`
-  at 375 a stamp is 103.67 × 129.58. A `false` or `null` child holds no place.
-- A stamp stands for a person in three more places. In a `Centre` — a `Stamp` or a `StampPlace` — it stands in the
-  middle and the words and link under it centre. In a card's head — `<Card heading={name} caption={greeting}
-  end={<Stamp bare …/>} foot={<Btn primary block>…</Btn>} />` — the words stand at the left and the stamp at the right,
-  beside both lines; the card's one button presses it whole. In an `AvatarStack` it is a head, the small size
-  (`more="+9"` for the count).
-- **`StampOn`** — a stamp stuck on a surface. `at` is the stamp's middle as a share of the surface (`{ x, y }`, 0 to 1),
-  `turn` its angle in degrees. With `onAtChange` the member drags it (the arrow keys move it too) and it asks with the
-  new place when the finger lets go; without it the stamp is still. The surface is the nearest positioned box:
-  `Sticky stuck={…}` is one. The stamp is the small size, 48 × 60 whatever the surface's size (`--stamp-sm-size`), and
-  on a note it may lie over the words. With `arrive` the stamp sticks itself: as it comes onto the screen it is struck
-  onto its place, and `onArrived` tells the app when it has landed (at once where motion is off), so the app does what
-  follows. A `Card` and a `Sheet` are positioned boxes, so a `StampOn` written inside one lies on it.
-  `--stamp-on-arrive-time` sets how long the strike takes.
-  `main` makes it the stamp's main size, 96 × 120 (`--stamp-size`; 90 × 112.5 on a screen 360 wide), to cover what
-  it lies on. With `onRemove` the stamp can be taken off: when a drag ends or an arrow key moves it, a cross stands on
-  its top right corner for `removeFor` ms (default 3000). A press on the cross, or Delete / Backspace on the focused
-  stamp, asks, and the app takes the `StampOn` away. A stamp with `onRemove` and no `onAtChange` shows the cross on a
-  press. The cross is a 24 disc (`--stamp-on-remove-size`, `--stamp-on-remove-bg` #141414, `--stamp-on-remove-ink`
-  #ffffff) in a 44 target, centred on the corner and upright whatever the stamp's `turn`. Its name is cardds's word
-  ("Remove" / "เอาออก"), or `removeLabel`. A press or a drag on a removable stamp never reaches what lies under it.
-  A stamp that is still arriving cannot be taken off yet: its cross waits until it has landed.
-
-What an app stores for a stamp: the picture ids (1 to 4, in order), the ground tone, the name, the small line. Making
-one is the app's screen: `ChipPick` checkboxes that each show a picture, the app refuses a fifth, and the app draws
-ONE of the picked chips at random for the ground and keeps it, so the stamp renders the same every time. The gallery's
-`StampScreens` page has the four screens: the first stamp on a home, one from a neighbour, make your own, a note with
-stamps.
-
-**`Mark`** is a highlighter stroke over a word inside running text: `<Text level="body"><Mark>ธนาคารเวลา</Mark> ส่ง…</Text>`.
-Green (`--signal-ok`) unless `tone` names another signal; `--mark-bg` / `--mark-ink` retune it. It is information, never
-a control, and never a chip or a line of its own.
-
-## Postcards
-
-A postcard is the one piece of mail with no envelope: the written side is the card, and the corner (a stamp, the postmark
-struck over its edge) proves the trip. Three components, one for each thing a member does with one. None of them flips;
-the older `Postcard` (a member's cover card that turns over) is another component and shares nothing with these.
-
-- **`PostLetter`**: reading one that arrived. Two upright 2:3 sheets, one in front. The picture side is `picture` (the
-  app's img or svg) in a white margin with `caption` under it; the written side is the address (`kicker`, `to` lines) over
-  the message (`children`, set large, `sign` at its end), with `stamp` and `postmark` on the corner. The tab over the
-  card, or a tap on the card, turns it: the sheet in front swings to its edge and the other swings in. `face` +
-  `onFaceChange`, or `defaultFace`. `voice` is a voice note's time as the app words it; with it the picture side has a
-  play control (`playing` + `onPlayingChange`). cardds never plays sound: the control asks, the app plays and passes the
-  time. `journey` is one line under the card.
-- **`PostDesk`**: writing one. The paper is landscape and twice the screen, and the phone looks at one half (`half` +
-  `onHalfChange`): the message on ruled lines, then the address (`address`, a few `PostDeskLine`s) and the stamp box.
-  Typing stops when the half is full; `onLinesChange(left, fits)` and `onFull` let the app word its `note`. `stamps` is
-  the sender's own stamps (`{ id, stamp, label }`), shown under the card; `stamp` + `onStampChange` is the one in the
-  box. Sending is the screen's button, never the desk's: the app sets `state="struck"`, the `postmark` lands, the desk
-  asks for `sent`, the card leaves upward and `sent` stands in its place.
-- **`PostBox`** + **`PostBoxCard`**: keeping many. Cards whole and landscape, one behind another, each showing its top
-  edge (`from`, `when`, `stamp`, `postmark`). The last child stands in front, nearest the thumb. Pressing an edge parts
-  the box at that card (`open` is its `id`, `null` is the front card; `onOpenChange`).
-- **`Postmark`**: the round mark, `place` and `date`. Information, nothing to press.
-
-The stamp is always a `Stamp` the app hands over. On a card's corner it is the postcard's own size, 72 × 90
-(`--post-corner-stamp-w`; it is not one of the stamp's two sizes), and shows its pictures only (pass `bare`; the corner
-drops the words by itself too); the postmark is struck over it by 0.4 of its own size. The empty stamp box in a
-`PostDesk` is the same size and shows its word. In the desk's tray a stamp is the standard size, 96 × 120
-(`--stamp-size`), and keeps its words; the tray is one line that scrolls sideways when the stamps are wider than the
-screen (three fit a 343 column). `--post-desk-stamps-gap` is the space between them. `PostLetter` and `PostDesk` size
-themselves to the
-screen they are in, so they go in a `Step` > `Page bleed`. **`Page bleed`** runs the page to the screen's edges and keeps
-the inset as its own padding, so a card that leans, slides or casts a shadow is cut at the glass, not at the inset.
-The gallery's `PostScreens` page has the three finished screens (read, write, keep) to start from.
-
-## Rules of the system
-
-1. **One card = one boundary.** A card frames one thing: a category, a stat
-   group, a list row. Tone slots: `.card` (card-1), `.card--2`, `.card--3`.
-2. **Sections are not cards.** Page sections = frameless on-surface content
-   (`.page`) + a lone/packed CTA (`.cta-pack`).
-3. **Surrounding UI is separate.** `.topbar`, `.filter-row`, `.chip-row`,
-   `.action-bar` live outside cards, above/below. The bottom bar has two
-   arrangements and they mean different things: the default pack (one wide
-   CTA, optional round icon) is **one action** on this screen, and
-   `.action-bar--pager` (two equal buttons at the edges, indicator between)
-   is **a sequence you can walk both ways**. A wide button next to a small
-   round one reads as an action plus an afterthought — wrong whenever back
-   and next are peers. The step that commits goes back to the default pack.
-4. **Components reference role tokens only** (`--surface`, `--card-1-bg`,
-   `--accent`…), never hex. Derived tints are tokens too (`--outline`,
-   `--hairline`, `--ink-tint`, `--ink-rail`, `--accent-soft`, `--scrim`), and
-   masks use `currentColor` as "opaque". So palettes swap freely.
-5. **`.screen` carries the horizontal inset and nothing vertical.** The inset
-   is `--screen-pad`; cards and on-surface UI sit flush inside it, with no
-   per-component side padding. Top and bottom are zero: vertical room only
-   is taken by what is in the column. The bottom bar is always the screen's last child (0.7.1 — the bar fixed to
-   the viewport from outside and its reserves are gone): in a `.screen--fill` a layer over the content's foot, on a
-   scrolling screen a `sticky` last row. `--bar-reserve` stays published only for a `.card--centre`'s cap.
-   **Padding is published, not copied.** `.screen` sets `--screen-pad` and
-   `--screen-gap`, its appbar reserve sets `--header-gap`, and `.card` sets
-   `--card-pad` and `--card-gap`; anything that has to cancel a container's
-   padding or gap reads the token rather than repeating its value. `.sheet-stack` uses it to
-   break out full-bleed when the column touches the viewport edges (≤27em /
-   432px), and `.bleed` uses it for a scrolling track inside a card:
-
-   ```html
-   <div class="avatar-pick bleed">…</div>
-   ```
-
-   The track runs to the card's edges so it reads as scrollable, while the
-   first and last item stay on the same line as the heading. Works for any
-   horizontal strip — `.chip-row`, a tile grid — in any container that
-   publishes `--card-pad`.
-6. **The sheet stack is the menu, and a sheet is rigid material.**
-   `.sheet-stack` (`stack.css`) sheets are tall: heads peek (`--stack-step`,
-   up to 5 layers), each head = title + `.icon-row` functions (head text =
-   icon height, 28px). On a `.screen--fill` the stack stretches and bleeds
-   off the bottom edge — bottom corners square. Markup rules: see *Sheet
-   stack markup* above; the two sheet systems: *Anatomy*.
-
-   `.screen--fill` is exactly one phone height — a height, not a minimum, so
-   a `.step` inside it has a bound to fill and its card and sheet scroll inside
-   rather than growing the page — and it clips (`overflow: clip`, never
-   `hidden`): a clipped box is not a scroll container, so nothing, not even
-   the browser revealing a focused field, can shift the screen up.
-
-   In a `.sheet-stack--tap`, a sheet is rigid material — it moves in, moves
-   out, or is covered, but **never changes size**. Every sheet is the same
-   full height, set once; a peek is not a short sheet, it's a full sheet the
-   next one covers. So `translate` is the only animated property, and
-   **z-index is the resting `--level` order and is never touched** — because
-   whatever sits in front of the tapped card is exactly what has to leave.
-   Opening slides the tapped card up by its own `--slot` × `--stack-step`;
-   cards after it move out below (`.is-after`); cards before it tuck one
-   step down, staggered nearest-first via `--stagger` (`.is-before`), and
-   get covered. Closing reverses it in two phases: the after-pack returns
-   while the card drops into its slot, then the before-pack slides back up
-   from behind. Slots, offsets and paint order are all CSS `:nth-child`, so
-   a stack renders correctly with no script. The app owns which index is
-   open and whether that sheet's data is in. The card renders what those
-   mean (`is-open`, `is-before`, `is-after`, `is-loading`, the grip, the
-   pull) from the `stack` prop `SheetStack` passes it. Don't reintroduce
-   height, `display` or z-index switching here — every past bug in this
-   animation came from exactly that. Don't stamp those classes onto the
-   card after it has rendered.
-7. **Everything shrinks to 320px.** `.screen > *`, `.card` and `.card > *`
-   carry `min-width: 0`, so no child's min-content (an input, a fixed row)
-   can widen a card's grid track past its padding; topbar titles ellipsize;
-   segment items share width. Never give a component a fixed width that can
-   beat the viewport — let it `flex: 1` up to a `max-width` token instead.
-8. **A single sheet is rigid material, like a sheet in the stack.** It is always the full
-   height of the box that holds it (`inset: 0`, set once, never written
-   again) and a state is nothing but how far that full card slid:
-   `sheet--full` slid nowhere, `sheet--3q` slid down by `--sheet-3q` (a
-   quarter of itself — three quarters show), `sheet--half` by `--sheet-half`
-   (50%), `sheet--peek` slid down until only `--sheet-peek` shows — the
-   handle and the title row. A tap on the handle toggles between the sheet's
-   own state and peek (never a step-by-step climb, Lh 2026-09-16); a drag
-   snaps to any listed state, and where it lands is what a tap returns to. `translate` is the only animated property
-   (`--motion-sheet`), and nothing toggles height, display or z-index for a
-   state — the stack's rule, inherited. The box clips whatever slid below its
-   bottom edge, so a sheet at any height is still a card: rounded top, a
-   straight cut at the box's edge — and its shape is handle · head · body:
-   the handle and the title row are pinned, `.sheet__body` scrolls beneath
-   them, and the body's `scroll-padding-bottom` is the slid-under part (in
-   the sheet's own container units, `--_cover`), so a focused control is
-   revealed above the cut, not under it. `--sheet-half` is a share of the
-   sheet's height (`0.5`), one number serving both the translate and that
-   padding. Two boxes hold sheets and the states
-   mean the same in both: `.step` (an app screen — Anatomy)
-   and `.sheet-stage` (a page-level overlay: a sheet over a map, the dim page
-   stage `--dim` + `.modal` = `__lift` + `__drawer` — a sheet always stands on the floor, never raised).
-   A stage keeps the top bar's line free (`--_top`), so `--full` stops under
-   `--header-h` and keeps its corners. Both sheet tokens are published — a
-   sheet with a taller head retunes `--sheet-peek` — and registered in
-   `tokens.css`, which is how `Sheet` reads them to snap a drag. Live: the
-   gallery's `Sheet` page.
-9. **Elements inside a card are frameless.** Rows, key-values, pickers,
-   gauges and tiles never draw a second card boundary; hairlines
-   (`--hairline`) separate rows, `--outline` keeps controls legible on
-   colored palettes. Data goes in as unitless custom properties
-   (`--value`, `--done`, `--total`); the math lives in CSS.
-10. **The dark slot re-points the accent.** `.card--3` sets `--accent` /
-    `--on-accent` to its own ink and bg, so every accent consumer (buttons,
-    checks, toggles, rings, selected days) inverts without extra rules.
-
-**A screen is scanned, not read** (Lh 2026-09-24) — a member arrives with one
-question and hunts for its answer. Rules 11–13 serve that:
-
-11. **Everything holds to edges.** Every element touches at least two edges —
-    the card's, the column's, or a line made by the thing above it (a row, the
-    avatar + name line). Words to READ are aligned start, values end (the
-    receipt: items left, prices right; `.card__head`, `.kv`, `.row`); centred
-    only what is not read — dots, a lone number, an icon, a mark. Empty room is
-    not filled with more content; a new edge is made instead (line the buttons
-    up with the avatar). One exception: a small control with its own words
-    (`IconBtnGroup form labelled`) is one centred line — the words name the
-    control, they are not content to be read.
-12. **Show, don't explain.** Where a known picture carries it — an avatar for a
-    person, an icon, a `Ring`/`Track`/`NumberBand`, a `Chip` for a category — use it
-    instead of words. Never add a label, a caption line, a comparison or a
-    tooltip to explain what the picture already says (the retired overline was
-    that mistake). Long lists are differentiated, not spaced out: group them
-    (`Rows heading` per group), put the avatar where a person is named.
-13. **Emphasis is the difference from the neighbours.** An untouched default
-    is quiet (grey, thin border, no fill — `Chip muted`, `Dropdown muted`);
-    only what the member changed, or the one thing asked of them, takes the
-    accent. To make one thing stand out, calm what surrounds it — never
-    bolder, never a second colour.
-14. **A frame says "tap me".** Inside a card, only a control draws its own
-    edge (a chip, a field, a pick tile, a small `Card sm` to pick). What is
-    only READ never gets a frame — no card in a card: a stat tile stands on
-    the card's ground, a note is a `Banner` (a light band, a rule above and
-    below, edge to edge), a count is words (`Text caption muted`), never a
-    chip. A chip or tile that looks pressable and is not lies.
-
-## A project's theme
-
-A project retunes cardds from ONE file of its own, and nothing else. Copy
-`css/theme.template.css` into the project as `theme.css`, load it **after**
-`cardds.css`, change values:
-
-```css
-:root {
-  --sp-base: 0.3rem;   /* roomier */
-  --r-base: 0.5rem;    /* tighter corners */
-  --color-surface: #faf6ee;  --color-ink: #1f1b16;  --color-paper: #fff;
-  --color-brand: #c2410c;    --color-on-brand: #fff;
-}
-```
-
-```html
-<html data-palette="own">   <!-- colours of your own = coloured mode; any value no stock palette uses -->
-```
-
-That file is where a project's look lives. Bases and roles:
-
-| what | tokens | moves |
-|---|---|---|
-| room **between** things | `--sp-base` (0.25rem = 4) | every `--sp-N` = base × N → paddings, gaps, the screen's inset, the bar's reserve, the sheet's peek |
-| type | `--fs-base` (1.375rem = 22 — the body) | every `--fs-*`, `--badge`, `--icon-xs` |
-| corners | `--r-base` (1.3rem = 20.8) | every `--r-*`; `0` = square. `--r-chip` stays fully round. One card radius (`--r-card`) for every card, tile, menu, sheet, fab, but a small card keeps the big card's PROPORTION, not its size: a row card is `--r-card-row` (13) |
-| the size **of** things | `--tap-base` (3rem = 48) | `--tap*`, `--btn-h`, `--chip-h`, `--bar-h`, `--header-h`, `--fab`, `--icon*`, `--avatar*`, `--dot*`, `--ring*`, `--tile-*`. `--tap*` never under `--tap-floor` (44px) |
-| faces | `--font-ui`, `--font-display` | |
-| colour | `--color-surface`, `--color-ink`, `--color-paper`, `--color-brand`, `--color-on-brand` — no default: unset = the wireframe | every role: surface / words, the three card tones (paper · the brand washed 14% into the surface · the brand), the muted inks (the ink washed into their ground), accent, neutral actions, `--dot-a` |
-| colour roles (the escape hatch) | the ink sets `--ink-{onlight,ondark}(-muted)`; the sides `--surface-dark`, `--card-{1,2,3,4,5}-dark`, `--accent-dark`, `--action-dark`, `--neg-dark`; `--surface`, `--card-{1,2,3,4,5}-bg`, `--card-border`, `--accent`, `--action-{bg,border}`, `--pos`, `--neg`, `--dot-{a,b}`, `--signal-{ok,warn,error,info}-{onlight,ondark}` | a role set directly wins over its derivation; the tints derive from the roles |
-
-Rules:
-
-- **Three levels, widest first — use the widest that says what you mean.**
-  1. a **base** moves a whole family (`--sp-base`, `--fs-base`, `--r-base`, `--tap-base`, the five `--color-*`): the system keeps its proportions.
-  2. a **role / root token** moves one meaning everywhere (`--accent`, `--card-1-bg`, `--btn-h`, `--chip-h`, `--header-h`, `--screen-w`, `--motion-sheet`…).
-  3. a **knob** moves ONE component (`--btn-pad-x`, `--chip-bg`, `--icon-btn-size`, `--appbar-pad-x`…) — on `:root` for everywhere, or on any element for
-     the components inside it. A knob is declared nowhere; its default is the fallback in the rule. The full list is generated from the CSS:
-     [`docs/knobs.md`](docs/knobs.md) (`npm run knobs`). Missing the knob you need? That is a gap in cardds — report it; it is added as a knob, never as your special case.
-- **Never a multiplier, never a step of the scale** (`--sp-4`, `--fs-h1`, `--r-card` — retune the base, or the component's knob), never a private
-  (`--_*`) or a published value (`--card-pad`, `--bar-reserve`, `--sheet-*`: other rules do arithmetic with them).
-- **On `:root` only.** The derived tokens are computed where they are declared
-  (`:root`), so a base set on a subtree does not reach them.
-- **After `cardds.css`.** A stock palette's block and a project's `:root` weigh
-  the same; the later file wins.
-- **Coloured mode is the attribute.** `data-palette`, whatever its value, is what
-  trades the wireframe's borders for the card's shadow and the controls' soft
-  edge (`palette.css`, `forms.css`). Colours of your own → `<html data-palette="own">`.
-  Without it the colours still apply, on wireframe borders.
-- **cardds does not pick the colours; it measures two things about them.** A theme's
-  values are the project's call and the derivations are only starting points; any
-  role can be set outright. What cardds checks is that the member can see each card
-  ([`cardGrounds()`](#can-the-member-see-the-card) names a tone whose fill and edge both
-  sit under 3:1 on its ground) and read what stands on it
-  ([`inkGrounds()`](#ink-follows-its-ground) names a word or icon under 4.5:1 or 3:1).
-  Both name the tokens to move.
-- The member's text-size setting is the same `--fs-base`, written on `<html>`
-  at run time by `setTextScale(percent)` (a share of the theme's base; 100 = the
-  theme's own): the words grow, and the things grow HALF as much (`--tap-base`; `controlsFor(percent)` — 130% text → 115% controls, 160% → 130%), so a larger text still fits what holds it. (`--text-scale`, which multiplied the root and zoomed the UI too, is gone.)
-
-Try it live: the gallery's nav (`npm run dev`) has a slider per size base, and
-palette `own` shows a colour well per colour base.
-`tests/tokens.spec.js` holds the defaults to the px they always were and the
-template to the defaults; the step / centre geometry runs at two extreme
-themes (`tight`, `loose`).
-
-## Ink follows its ground
-
-The accessibility rule for colour (Lh 2026-10-18): "there are text colours ONLIGHT and ONDARK. When the ground is light, use
-onlight; when the ground is dark, use ondark." It holds for words and for glyphs: icons, marks and dots that carry meaning, a
-check's tick, a switch's knob, the pager's dots.
-
-1. **Two ink sets.** A palette (or your theme) sets `--ink-onlight` and `--ink-onlight-muted`, `--ink-ondark` and
-   `--ink-ondark-muted`. Each holds 4.5:1 on every ground of its side.
-2. **Every ground says only its side.** `--surface-dark`, `--card-1-dark` … `--card-5-dark`, `--accent-dark` (the brand fill),
-   `--action-dark` (the paper of buttons, chips and fields), `--neg-dark`: `1` is dark, `0` light. A surface turns its side into
-   the inks every piece on it reads: `--card-ink`, `--card-muted`, `--on-accent`, `--accent-ink` and the four signals.
-3. **A piece reads its ink only from the ground it stands on** (`currentColor`, `--card-ink`, `--card-muted`). It never names a
-   fixed colour, and a muted word or glyph is a shade, never an opacity.
-4. **4.5:1 for words, 3:1 for large words (24px, or 18.66px bold), icons and glyphs** (WCAG 2.2 SC 1.4.3, 1.4.11), on the ground
-   the piece is really drawn on. A tint that carries words (a banner, a step bar, today's day) is a ground of its card's side, so
-   a dark fill holds its ondark ink on its 12% tint too.
-5. **Signals** have an onlight and an ondark shade (`--signal-ok-onlight`, `--signal-ok-ondark`, …): no one shade of a hue holds
-   4.5:1 on both. The ondark one is the ondark ink unless a palette gives its own. The icon and the words carry the meaning.
-
-**Dark mode** is the sides turned to `1` with their fills darkened, and no rule per piece:
-
-```css
-:root[data-mode="dark"] {
-  --surface-dark: 1; --card-1-dark: 1; --card-2-dark: 1; --card-4-dark: 1; --action-dark: 1;
-  --surface: #121212; --color-paper: #1e1e1e; --card-1-bg: #1e1e1e; --card-2-bg: #2a2a2a; --card-4-bg: #333333; --action-bg: #262626;
-}
-```
-
-`tests/ink.spec.js` holds the gallery to exactly that block: every story, every tone, 0 pieces short.
-
-Check your own theme where it is loaded. `inkGrounds()` walks every visible word, field value, icon and glyph inside a root and
-returns one row per piece, with the side its ground declares and the ink set its colour is:
-
-```ts
-import { inkGrounds } from '@usableapp/cardds';
-console.table(inkGrounds().filter((r) => !r.pass));   // a dev page
-
-// a Playwright test on your app (Playwright sends the function to the page)
-const short = (await page.evaluate(inkGrounds)).filter((r) => !r.pass).map((r) => r.problem);
-expect(short).toEqual([]);
-// '.t-caption.t-muted "since May" on .card.card--3 (light side): #575757 (--card-muted = --ink-onlight-muted) on #141414 (--card-bg) is 2.55:1, words need 4.5:1'
-```
-
-A side and an ink set that disagree with the ground (`light side` on a dark fill) say the ground declared the wrong side. It
-reports and changes nothing. It does not measure a piece on a picture (a `url()` ground; a gradient counts as decoration unless it
-is one colour), a disabled control, a hidden one, words drawn by CSS `content`, decoration colours (`--dot-a`, `--dot-b`, the
-highlights), or what lies under a positioned element that is not its ancestor (a scrim drawn by `::after`). cardds holds itself to
-the same function: `tests/ink.spec.js` renders every gallery story in every stock palette and in the dark mode above, as written
-and with every card turned to each tone 1–5, about 27,000 pieces a pass, in `npm run ci`.
-
-## Can the member see the card?
-
-A card is one boundary, and a boundary the member cannot see is no boundary (WCAG 2.2 SC 1.4.11, non-text contrast: 3:1 against what is
-next to it). A card's boundary is its fill against the ground it stands on, or its edge (`--card-border`, or a finish's line).
-In coloured mode the edge is `--on-surface-muted`, the ground's muted words, which a palette holds to AA on its surface; the wireframe's
-is its black line. A light card on a light ground cannot reach 3:1 by its fill (a tone-1 card in a tone-1 sheet is 1:1), so the edge
-carries it.
-
-Your theme decides the colours, so run the check on your theme. `cardGrounds()` builds a card of each tone (1–5) on each ground a card
-stands on (the screen, a sheet's body, a `paper` sheet's body) where your theme is loaded, reads what the browser draws and returns one
-row per pair:
-
-```ts
-import { cardGrounds } from '@usableapp/cardds';
-console.table(cardGrounds());                    // a dev page: ground · tone · fill · edge · pass · problem
-
-// a Playwright test on your app (Playwright sends the function to the page)
-const rows = await page.evaluate(cardGrounds);
-expect(rows.filter((r) => !r.pass).map((r) => r.problem)).toEqual([]);
-```
-
-A failing row names the tokens and the shortfall, for example
-`tone 1 card on the screen: fill 1:1 (--card-1-bg #ffffff on --surface #ffffff), edge 1:1 (--card-border); one of them needs 3:1 — the fill is short by 2, or give --card-border a colour of 3:1 on #ffffff`.
-It reports and changes nothing: which knob you move is your call. It runs in a browser on purpose: your theme's `var()` aliases,
-`[data-palette]` blocks, finish and `color-mix()` are resolved by the same engine that draws the screen. A stock palette is held to the
-same check in every finish (`tests/card-grounds.spec.js`).
-
-## New palette
-
-Copy any block in `palette.css`, rename, retune:
-
-```css
-[data-palette="mine"] {
-  --surface: …;
-  --ink-onlight: …; --ink-onlight-muted: …;   /* words and glyphs on a light ground */
-  --ink-ondark: …;  --ink-ondark-muted: …;    /* on a dark ground */
-  --card-1-bg: …;   /* + card-2 … card-5; a tone whose side is not the default's says so: --card-5-dark: 0; */
-  --accent: …;
-  --action-bg: …;
-}
-```
-
-## Finish
-
-The finish of a card's paper — a style apart from colour, beside any palette or none:
-
-```html
-<html data-palette="orchard" data-finish="print">   <!-- or on any ancestor; no attribute = the flat look -->
-```
-
-Four values, one attribute (`css/finish.css`; the header names each and its knobs):
-
-| `data-finish` | the paper | knobs (set in `theme.css`, as any knob) |
-|---|---|---|
-| `lit` | lit from above: a lit top edge, a hairline ring, a layered shadow that grows with height; filled buttons stand up and go down under the finger; fields sunk | the shadows every component reads (`--shadow-card`, `--shadow-float`, `--shadow-sheet`) |
-| `print` | printed paper: an ink line in the card's own ink, a hard misregistered offset, grain over the card, a dotted rule under a lone card's head | `--print-off` (the offset, 3px) · `--print-grain` (the grain's opacity, 0.32) |
-| `sticker` | a die-cut sticker: a white cut line, a short hard drop, a lone card leans (never one in a stack, a list or a feed), buttons with a bottom edge that press down | `--sticker-cut` (5px) · `--sticker-tilt` (0.8deg; `0deg` = straight) |
-| `ink` | a poster / comic print: a thick line in the surface's ink round every boundary and control, a hard offset in the same ink | `--ink-w` (2.5px) · `--ink-off` (5px) |
-
-Under every finish the controls' wireframe border steps back (`--action-border`; ink puts its own line there) and the card keeps its edge (`--card-border`: lit's ring and sticker's cut do not reach 3:1 on a light ground, see [Can the member see the card?](#can-the-member-see-the-card)), a card in a closed stack's base stays flat, and the information inside a card stays flat — only a container or a control gets an edge. Colours are mixes of the roles, so a finish sits in any palette. The gallery's nav has a finish switch (key `f`); `Card · Finishes` shows the four side by side, `Home · Finish` a home under `print`.
-
-## Scale: everything is rem
-
-Every length token resolves to rem — a multiplier × one of four rem bases
-(`--sp-4` = `--sp-base` × 4 = 1rem, `--tap` = `--tap-base` = 3rem, `--r-card` =
-`--r-base` × 2, `--fs-h1` = `--fs-base` × 1.2; see "A project's theme") — so the
-whole system scales with the root font size. `base.css` keeps it at `100%` (the browser's setting, 16px by
-default) and steps narrow phones (≤360px) to `93.75%`, which keeps the
-column, its 48px taps and its type in proportion on 320–360 screens. Only
-`--border-w`, `--rule-w` and the focus ring stay in px, so edges stay crisp.
-An app with its own text-size setting calls `setTextScale(percent)`, which writes
-`--fs-base` on `<html>` from the theme's base (100% = the theme's; 160% = 2.2rem by default): the type and its holders (the count
-badge, the inline icon) grow, the controls grow half as much (`--tap-base`), spacing and radii keep their size.
-Components never write a raw length: spacing from `--sp-*`, control sizes from
-`--tap`, `--tap-lg`, `--btn-h`, `--bar-h`, `--header-h`, `--fab`, `--badge`, container
-padding from `--screen-pad` / `--card-pad`, radii from
-`--r-*`, type from `--fs-*` / `--type-*`. Data (progress, counts) enters as
-unitless custom properties. One measured length comes from script: `--kb`,
-the height an on-screen keyboard covers, published on `:root` by `cardds.js`
-from the visual viewport — as a px length, since only the browser knows it,
-so no component ever writes `px` to consume it (`.action-bar` rides up by it,
-`.step` grows its room by it). The narrow-phone step is an `em` breakpoint,
-so it follows the text size too: at 131% a 390px phone counts as narrow.
-
-## Icons & touch targets
-
-Icons come from `icons.svg` (Lucide, ISC — monochrome stroke, currentColor):
-
-```html
-<svg class="icon" aria-hidden="true"><use href="icons.svg#bell"/></svg>
-```
-
-`.icon` = `--icon` (1.75rem / 28px), `.icon--xs` = 1rem inside captions and chips,
-`.icon--lg` = 2rem for empty states. Never raw emoji/unicode glyphs — they
-render as colored emoji on phones. Add icons by appending `<symbol>`s
-(grab from lucide.dev, paste path data).
-
-Touch targets: `--tap` 3rem (`.icon-btn`), `--tap-sm` 2.75rem floor (`.icon-btn--sm`,
-selects, add-row), `--tap-lg` 3.5rem for hero controls. `.btn` ≥ `--btn-h` (3.25rem).
-Everything thumb-first.
-
-The two bars across the top of a screen — `.topbar` (screen title) and
-`.appbar` (app context) — share one rule and one floor, `--header-h` (3.75rem /
-60px), so a title-only bar stands as tall as one carrying an icon button, a
-dropdown or a `.btn`. `.screen` reserves its top padding from the same token.
-`.topbar__actions` takes at most TWO controls (Lh 2026-09-22): a third and beyond
-is not drawn (`TopBar` warns once) — more moves go in a `Menu` behind one button.
-
-## Typography levels
-
-`t-display` 34–42/800 · `t-h1` 28 · `t-h2` 22 · `t-title` 17 · `t-body` 15 ·
-`t-label` 13 · `t-caption` 12 · `t-stat` big tabular
-numbers (`t-stat--mono`, `t-stat--xl`). Pixel values are at the default root;
-each is an `--fs-*` rem token. Swap `--font-display` per app for character.
+Licence: none granted. The source is public to read, not to use. See [`LICENSE`](LICENSE).