@usableapp/cardds 0.7.82 → 0.7.84

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 > For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
 
+## 0.7.84 — 2026-10-11
+
+### Changed — breaking for a screen that draws a `Stamp`
+- **A stamp is one of two sizes, wherever it stands** (Lh 2026-10-11) — the standard size, `--stamp-size`, and the small size, `--stamp-sm-size`, for a stamp in a `StampOn` and in an `AvatarStack`. The stamp at a postcard's corner is neither: it keeps its own size, 72 × 90 (`--post-corner-stamp-w`), as before. Before → after for the standard size: a `Stamp` or a `StampPlace` filled its column up to a cap, so its size came from what held it → it is `--stamp-size` wide (two taps: 96 × 120; 90 × 112.5 on a screen 360 wide) in every holder, and the holder only places it. A holder narrower than a stamp shrinks it. Every screen that draws a stamp changes look. Measured at 375, before → after: in a `Centre` on a fill screen 192.08 × 240.09 → 96 × 120; in a sheet body or on a page 216 × 270 → 96 × 120; in a `Centre` inside a sheet body 210 × 262.5 → 96 × 120; in a `StampBook` on its ground 95.66 × 119.56 → 96 × 120; in a `StampBook bare` 109 × 136.25 → 96 × 120; in a `StampBook strip` 72 × 90 → 96 × 120; in a card's head 96 × 120, unchanged. To bring a screen up to date: look at each stamp screen again. For a larger or smaller stamp set `--stamp-size`, on `:root` for every stamp or on an element for the stamps inside it.
+- **Nine knobs are gone**: `--stamp-max-w`, `--stamp-centre-max-w`, `--card-head-stamp-w`, `--stamp-book-bare-gap`, `--stamp-book-strip-w`, `--stamp-on-w`, `--sticky-stamp-w`, `--avatar-stack-stamp-w`, `--post-desk-pick-w`. Setting one now does nothing. Use `--stamp-size` for a standing stamp (the first five, and `--post-desk-pick-w`) and `--stamp-sm-size` for a stamp in a `StampOn` or an `AvatarStack` (`--sticky-stamp-w`, `--stamp-on-w`, `--avatar-stack-stamp-w`). There is no knob per place: set `--stamp-size` on the element that holds the stamps to move only those.
+- **`StampBook bare` no longer makes its stamps fill their thirds** — before → after: no ground, the stamp's cap lifted, each stamp the whole width of its third (109 × 136.25 at 375) → no ground, no padding, no round, and nothing else: each stamp is its own size in the middle of its third, with the same gaps as on the ground.
+- **`--stamp-book-col-gap` defaults to `--sp-2`** — before → after: `--sp-3` → `--sp-2` (8), so three stamps of 96 keep their size on the ground in a 343 column (343 − 32 of padding − 16 of gaps = 295). In a holder narrower than that the three shrink alike (81.67 each at 320). The strip reads the same knob.
+- **A stamp in a `StampOn` is 48 × 60 on any surface** — before → after: 27% of the surface's width (54 × 67.5 on a 200 surface), or 48 on a note → 48 × 60 everywhere, `--stamp-sm-size` (one tap). On a note nothing moved.
+- **`Stamp words` is not drawn at the standard size** — before → after: the small line showed on a stamp wider than 96, which a centred stamp was (192 to 218) → a stamp is 96, where the small line is not drawn and `name` is larger. It shows again only where `--stamp-size` is set above 6rem (96).
+- **A stamp in an `AvatarStack` is the small size** (Lh 2026-10-11) — before → after: 32 × 40 (`--avatar-stack-stamp-w`) → 48 × 60 (`--stamp-sm-size`), the same size as a stamp in a `StampOn`. The lap between stamps is 8, unchanged. The stack is wider, so the words beside it have less room. Measured on a `Row` whose lead is three stamps and a count, with a title, a meta line and an end button: at 375 the meta line is on two lines and the row is 76.6 high (was 53.6); at 360 and 390 it stays on one line and the rows are 56.3 and 60 high. To bring a screen up to date: look at each row that leads with a stack of stamps, and shorten its meta line where it now breaks.
+- **The stamps in a `PostDesk`'s tray are the standard size** (Lh 2026-10-11, "ทำในรุ่นนี้เลย"; this release only, so the postcard set changes with the stamp's) — before → after: each stamp in the tray was 72 × 90 (`--post-desk-pick-w`) → `--stamp-size`, 96 × 120 (90 × 112.5 at 360, where the root is 15px). The tilt (`--post-corner-stamp-tilt`, 2deg) and the 4:5 ratio are as before. The tray row is 130 high at 375 (was 100), so on the address half of `PostScreens · Write` its bottom is at 698 on a screen 812 high (the bar starts at 720); on a screen 667 high the tray was already under the bar and the page scrolls, now 30 further. To bring a screen up to date: look at each `PostDesk` again. The corner's stamp, the desk's stamp box and the postmark are unchanged.
+- **The desk's tray scrolls sideways when its stamps outrun the screen** — before → after: a row that did not scroll (four stamps of 72 ran 25 past a column of 343) → one line that scrolls (`overflow-x: auto`, no scroll bar) and never shrinks a stamp. Three fit a column of 343 at 375 (3 × 104 + 2 × 12 = 336), four do not.
+- **`--post-desk-stamps-gap` defaults to `--sp-3`** — before → after: `--sp-4` (16) → `--sp-3` (12). Three stamps of 96 with the old gap are 344 wide, 1px more than the column at 375, and the tray would scroll for nothing.
+
+### Docs
+- **Mount a `Modal` only when it is to show.** A `Modal` first mounted with `open={false}` is drawn, leaves, and calls `onClosed` after about 700ms. Known fault, not fixed in this release: under React StrictMode `onClosed` is never called for a `Modal` mounted that way.
+- **`useLayer`: one layer per tick.** Two layers opened in the same handler lose the first (`a.open(1); b.open(2)` gives `a.value` null, `b.value` 2). Open the second in a later tick.
+
+## 0.7.83 — 2026-10-11
+
+### Changed — breaking for a screen that draws a `Sticky`
+- **Every `Sticky` is one square of one size** (Lh 2026-10-10) — before → after: a note hugged its words, was at least 211 tall, grew with more words, and had 4px round corners → every note is a square of 168 with square corners, whatever it says. Words it cannot hold are cut where their room ends, with no ellipsis. To bring a screen up to date: shorten what a note says, or open the note to show the rest. One knob sets the side: `--sticky-size` (on `:root` for every note, on an element for the notes inside it). `--sticky-radius` still rounds the corners; its default is now 0.
+- **`Sticky square` is gone** — before → after: `square` made a note 1:1 and as wide as its column → every note is the one square; delete the prop. No alias: a screen that still passes it fails its typecheck.
+- **Seven knobs are gone**: `--sticky-min-w`, `--sticky-max-w`, `--sticky-min-h`, `--sticky-square-max-w`, `--sticky-tilt-max-w`, `--sticky-post-max-w`, and `--sticky-field-min-h` (the field fills the note). Setting one now does nothing; use `--sticky-size`.
+- **The fold means unread** — before → after: the folded corner was a look, `flat` the plain square → a folded corner says the note has not been read, `flat` says it has. A folded note also carries a hidden word for a screen reader ("Unread" / "ยังไม่ได้อ่าน" by `<html lang>`; `unreadLabel` for the app's own; `setWords` for another language). To bring a screen up to date: pass `flat` on every note that is not new.
+- **A stamp on a note is 48 wide** — before → after: a `StampOn` in `Sticky stuck` was 27% of the note → 48, whatever the note's size (`--sticky-stamp-w`). `--stamp-on-w` still sets it; the note's own knob wins.
+- **A lone note stands in the middle** of a `Page` or a `Centre` (it used to be the `square` note's own doing).
+
+### Changed
+- **`npx cardds check` says how many files it read, and refuses to call nothing "clean"** (Lh 2026-10-10) — before → after: `cardds check docs` (a folder with no `.js .jsx .ts .tsx`) or `cardds check src scr` (a typo next to a real folder) printed `cardds check: clean` and exited 0, because a path that was not there was dropped and a folder with nothing in it had nothing to flag → the line ends with the count (`cardds check: clean (103 files read)`), a path that is not there is `…: no such folder or file` and exit 2 before any file is read, a folder with no source in it is exit 2, and a single file is a path too. Findings still exit 1. A script that ran `cardds check <dir>` on an empty or misspelt folder now fails where it passed.
+
+### Fixed
+- **A `BtnRow` in a `ModalAsk` fills the card** (Lh 2026-10-11) — before → after: the row was as wide as its buttons' words, so two word buttons were squeezed and their words wrapped (99 × 87 each at 375) → the row fills the ask, 24 under the question, and each button keeps its words on one line (146.5 × 60). A `Btn quiet` in a `ModalAsk` is edged in the ask's own ink at full strength (it was 35%): light on the dark end, dark on `ModalAsk light`. A `BtnTrio` is unchanged. Knobs: `--modal-drawer-answers-gap`, `--modal-drawer-quiet-border`. Story `Modal · WordAnswers`. A project that forced this from outside can delete its own rule.
+- **`cardds check` and the ESLint rule missed two cardds classes** — before → after: `raw-class` read the class list from `css/*.css` and lost every class that only ever stands second in a compound selector (`.field.field--error`), so `className="field--error"` and `className="pin--error"` were not flagged → both are in the list (494 of 494). A screen that wrote either by hand now gets the `raw-class` error: use `Field error` / `Pin error`.
+- **`cardds get <Name>` left out props and parameters** — before → after: `Countdown` showed none of the `Link` props it takes (`disabled`, `muted`, `icon`, `sm`) and `Home`, `Splash`, `Walkthrough`, `CallSheet` none of the `Screen` ones (`as`, `palette`, `ready`), because only the component's own interface was read; the ten functions an app calls (`slideTo`, `slideScreen`, `useLayer`, `useOptionalLayer`, `word`, `setWords`, `setTextScale`, `controlsFor`, `registerIcons`, `applyMask`) showed an empty `props` → inherited props are listed (`Omit<…>` taken off), and a function lists its `parameters` (`slideTo`: `direction`, `update`, `scope = document`; `--json` has `params`).
+- **`cardds get slideTo` showed no variation though three stories call it** — before → after: a story counted as using a component only when it rendered it as a tag, so `slideTo`, `slideScreen`, `useLayer` and `useLayers` were used by no story → a function a story calls counts (7 story–function pairs found), and `get` / `find` show those stories.
+- **The MCP server kept an old catalog after `package.json` or `gallery/vite.config.ts` changed** — both are read by the catalog build (the version; how the stories render), neither moved the stamp that makes the server load again.
+- **A line of `docs/roles.md` the reader could not parse was dropped** — the table is read line by line now and a line that is not a row names itself in the error (nothing in the table is wrong today).
+
+### Added
+- **`StickyBoard`** — notes stuck on a page: rows that wrap by the width (two on a phone, three on a wider screen), edge to edge, each turned by one of four angles in turn, the later note over the earlier where they cross. Knobs: `--sticky-board-lap`, `--sticky-board-turn-1` … `-4`, `--sticky-board-drop`, `--sticky-board-foot-inset`. A note's `foot` there lies over the note's foot and takes no room from the words.
+- **`StickyThread lapped`** — a chat with no head rows: theirs at the left, mine at the right, each turn lying over a corner of the one before, the time close under its note. `StickyPost who` is not drawn and `name` is only heard. Knobs: `--sticky-thread-lap` (76 down), `--sticky-thread-lap-x` (32 across), `--sticky-thread-same-gap`, `--sticky-thread-time-gap`, `--sticky-thread-tilt`. The head-row way and `rail` are unchanged.
+- **`StickyAnswer`** — the note you answer on, in its two places: waiting at the screen's foot, and at the top while written on, with `tools` and `tray` under it. `writing` + `onWritingChange(writing, 'focus' | 'outside' | 'escape')`, or `defaultWriting`. Knobs: `--sticky-answer-show`, `-end`, `-tilt`, `-top`, `-gap`, `-tools-gap`, `-tray-gap`, `-scrim-bg`.
+- **`Chip sm`** — a small label, low and tight (a name on a note). Before: a chip was 38 tall whatever its padding knobs said, because its height is the `--chip-h` token. Never a tap target. Knobs: `--chip-sm-pad-y`, `--chip-sm-pad-x`, `--chip-sm-gap`.
+- **A `Chip` in a note's `foot` or `head`** is a label on the paper: a pale ground (`--sticky-chip-bg`), no edge. In the foot it stands at the start and is cut with an ellipsis past `--sticky-foot-chip-max-w` (62%) of the row; what follows it stands at the end and is never cut.
+- Gallery: `StickyBoard`, `StickyAnswer`, `StickyThread · Lapped`, `Sticky · Unread / LongWords / Size`, `Chip · Small`, and the screens `StickyScreens · ChatPage`, `Chat` and `EmptyChat` (a chat with no note yet: an `EmptyState` on the ground, the answer note at the foot).
+
 ## 0.7.82 — 2026-10-10
 
 ### Changed

package/README.md

@@ -386,6 +386,10 @@ whose markup has rules, because the sheet's box is the step itself:
   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.
@@ -447,7 +451,9 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     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). The project hands its router over once:
+    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`.
@@ -569,6 +575,45 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 
 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 are cut where their room ends, with no ellipsis. 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.
+- **`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`.
+- **`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
@@ -577,25 +622,35 @@ it up. cardds draws the paper; the pictures, their words and which stamp a membe
 - **`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. It fills its column up to
-  `--stamp-max-w`, and every inner length follows its width, so one stamp reads in a tray and in a sheet.
+  `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. `strip` is one line
-  of small stamps that scrolls sideways, the tray a member picks from. 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 takes the screen's
-  size and the words and link under it centre. In a card's head — `<Card heading={name} caption={greeting}
+  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. 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,
-  as tall as both lines, `--card-head-stamp-w` wide (default two taps); the card's one button presses it whole. In an
-  `AvatarStack` it is a head (`more="+9"` for the count).
+  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.
+  `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.
 
 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
@@ -631,8 +686,13 @@ the older `Postcard` (a member's cover card that turns over) is another componen
   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 shows its pictures only (pass `bare`; the corner
-drops the words by itself too); in the desk's tray it keeps its words. `PostLetter` and `PostDesk` size themselves to the
+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.

package/bin/cardds.mjs

@@ -16,6 +16,7 @@ const cwd = process.cwd();
 const SKIP = new Set(['node_modules', 'dist', 'build', '.git', '.next', 'coverage']);
 
 function* sources(dir) {
+  if (statSync(dir).isFile()) { yield dir; return; }
   for (const name of readdirSync(dir)) {
     if (SKIP.has(name) || name.startsWith('.')) continue;
     const p = join(dir, name);
@@ -24,17 +25,26 @@ function* sources(dir) {
   }
 }
 
+// A check that read nothing has proved nothing: a path that is not there, or a folder with no source in it, is exit 2 — never "clean".
 function check(dirs) {
-  const roots = (dirs.length ? dirs : ['src']).map((d) => join(cwd, d)).filter((d) => existsSync(d));
-  if (!roots.length) { console.error('cardds check: no such folder — `npx cardds check <dir>`'); return 2; }
-  let errors = 0, warns = 0;
-  for (const root of roots) for (const file of sources(root)) {
-    for (const f of checkSource(readFileSync(file, 'utf8'), relative(cwd, file))) {
-      f.level === 'error' ? errors++ : warns++;
-      console.log(`${f.file}:${f.line}  ${f.level === 'error' ? 'error' : 'warn '}  [${f.rule}] ${f.message}`);
+  const roots = dirs.length ? dirs : ['src'];
+  const missing = roots.filter((d) => !existsSync(join(cwd, d)));
+  if (missing.length) { for (const d of missing) console.error(`cardds check: ${d}: no such folder or file — \`npx cardds check <dir>\``); return 2; }
+  let errors = 0, warns = 0, read = 0;
+  for (const dir of roots) {
+    let here = 0;
+    for (const file of sources(join(cwd, dir))) {
+      here++;
+      for (const f of checkSource(readFileSync(file, 'utf8'), relative(cwd, file))) {
+        f.level === 'error' ? errors++ : warns++;
+        console.log(`${f.file}:${f.line}  ${f.level === 'error' ? 'error' : 'warn '}  [${f.rule}] ${f.message}`);
+      }
     }
+    if (!here) { console.error(`cardds check: ${dir}: no .js .jsx .ts .tsx file to read (node_modules, dist, build and dot-folders are skipped)`); return 2; }
+    read += here;
   }
-  console.log(errors + warns ? `\ncardds check: ${errors} error(s), ${warns} warning(s)` : 'cardds check: clean');
+  const files = `${read} file${read === 1 ? '' : 's'} read`;
+  console.log(errors + warns ? `\ncardds check: ${errors} error(s), ${warns} warning(s) (${files})` : `cardds check: clean (${files})`);
   return errors ? 1 : 0;
 }
 
@@ -93,8 +103,9 @@ const asText = {
     `${c.name} (${c.group})${c.element ? ` — forwards the <${c.element}> attributes` : ''}`,
     one(c.description),
     ...(c.role ? [`role: represents ${[c.role.represents, c.role.count, c.role.density, c.role.job].flat().join(' · ')}${c.role.standsInFor.length ? `; stands in for: ${c.role.standsInFor.map((s) => (s.condition ? `${s.name} (${s.condition})` : s.name)).join('; ')}` : ''}`] : []),
-    '\nprops',
-    ...c.props.map((p) => `  ${p.name}${p.optional ? '?' : ''}: ${p.type}${p.slot ? '  [slot]' : ''}${p.description ? ` — ${one(p.description)}` : ''}`),
+    ...(c.params ? ['\nparameters', ...(c.params.length ? [] : ['  (none)']), ...c.params.map((p) => `  ${p.name}${p.optional && !p.default ? '?' : ''}: ${p.type}${p.default ? ` = ${p.default}` : ''}`)] : [
+      '\nprops',
+      ...c.props.map((p) => `  ${p.name}${p.optional ? '?' : ''}: ${p.type}${p.slot ? '  [slot]' : ''}${p.description ? ` — ${one(p.description)}` : ''}`)]),
     `\nvariations (${c.variations.length})`,
     ...c.variations.map((v) => `\n  ${v.id} — ${one(v.description)}\n${indent(v.tsx)}${html ? `\n    html:\n${indent(v.html, '      ')}` : ''}`),
     ...(c.alsoUsedIn ? [`\nalso used in: ${c.alsoUsedIn.join(' ')}\n(--all prints their code too)`] : []),

package/css/actions.css

@@ -195,6 +195,8 @@
 .dot--warn { background: var(--signal-warn); }
 .dot--error { background: var(--signal-error); }
 .dot--info { background: var(--signal-info); }
+/* --sm: a small LABEL (a name on a note, a tag in a tight head) — low and tight; never a tap target */
+.chip--sm { min-height: 0; gap: var(--chip-sm-gap, var(--sp-1)); padding: var(--chip-sm-pad-y, var(--sp-0)) var(--chip-sm-pad-x, var(--sp-2)); }
 .chip--on { background: var(--chip-on-bg, var(--accent)); color: var(--chip-on-ink, var(--on-accent)); border-color: transparent; }
 /* muted: an untouched default — the words wash out, the edge stays; emphasis is the difference from the neighbours (README 13) */
 .chip--muted { color: var(--chip-muted-ink, var(--card-muted)); }

package/css/card.css

@@ -84,14 +84,14 @@
    height, only the row gap. */
 .card__head :is(h1, h2, h3) { overflow-wrap: anywhere; }
 
-/* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right and AS TALL AS BOTH LINES — the heading and the
-   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. A stamp has no size of its own in a flex
-   row (a width of 100% of the head, up to its cap), so it takes --card-head-stamp-w here, as a stamp in an AvatarStack takes a width of its own.
+/* a Stamp in a card's head (`Card end={<Stamp …/>}`): the words stand at the left, the stamp at the right BESIDE BOTH LINES — the heading and the
+   caption pair up beside it, not the stamp beside the heading alone with the caption left under it. The stamp is its own size (--stamp-size,
+   stamp.css); the head only places it.
    <div class="card__head"><h2 class="t-h2">…</h2><span class="t-caption t-muted">…</span><span class="stamp">…</span></div> */
 .card__head:has(> .stamp) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
 .card__head:has(> .stamp) > :is(h1, h2, h3) { grid-column: 1; grid-row: 1; align-self: end; }
 .card__head:has(> .stamp) > :is(.t-caption, .t-body) { grid-column: 1; grid-row: 2; align-self: start; }
-.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; width: var(--card-head-stamp-w, calc(var(--tap) * 2)); margin-inline: 0; }
+.card__head > .stamp { grid-column: 2; grid-row: 1 / span 2; margin-inline: 0; }
 
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,

package/css/layover.css

@@ -83,6 +83,11 @@
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */
+/* the answers as WORD buttons (a BtnRow of Btns; Lh 2026-10-11): the row fills the ask with room over it and each button keeps its words on one
+   line — left to its words' width the row squeezed two buttons into round blobs, their words on two lines. A quiet button is an outline only,
+   so on the ask its edge is the ask's ink at full strength (light on the dark end, dark on --light). The BtnTrio of round buttons is not touched. */
+.modal__drawer > .btn-row { justify-self: stretch; margin-top: var(--modal-drawer-answers-gap, var(--sp-5)); white-space: nowrap; }
+.modal__drawer .btn--quiet { border-color: var(--modal-drawer-quiet-border, currentColor); }
 .modal__drawer .icon-btn { background: transparent; color: inherit; border-color: var(--ink-rail); }
 .modal__drawer .icon-btn--invert { background: var(--accent); color: var(--on-accent); border-color: transparent; width: var(--tap-lg); height: var(--tap-lg); }
 @media (prefers-reduced-motion: no-preference) {

package/css/people.css

@@ -50,9 +50,10 @@
 .avatar-stack { display: inline-flex; align-items: center; }
 .avatar-stack > .avatar { box-shadow: 0 0 0 var(--sp-1) var(--card-bg, var(--surface)); }
 .avatar-stack > .avatar + .avatar { margin-left: calc(-1 * var(--sp-3)); }
-/* stamps in the stack: a Stamp is as wide as its column, and an inline row has none — so it brings one, as tall as an sm head (4:5) and a little overlapped, like the heads
+/* a stamp in the stack is the stamp's small size, the one a stuck stamp is (--stamp-sm-size, stamp.css: 48 × 60), lapped like the heads. Measured 2026-10-11 in a Row's
+   lead with a title, a meta line and an end button: at 375 the meta line breaks in two, accepted by Lh (a lap of 16 would hold it; the lap stays 8)
    <span class="avatar-stack"><span class="stamp stamp--bare">…</span><span class="stamp stamp--bare">…</span><span class="avatar-stack__more">+9</span></span> */
-.avatar-stack > .stamp { --_stack-w: calc(var(--avatar-sm) * 4 / 5); flex: none; width: var(--avatar-stack-stamp-w, var(--_stack-w)); margin-inline: 0; }
+.avatar-stack > .stamp { flex: none; width: var(--stamp-sm-size, var(--tap)); margin-inline: 0; }
 .avatar-stack > .stamp + .stamp { margin-left: calc(-1 * var(--sp-2)); }
 /* more: the count that trails the stack — plain words on the ground, title size so it reads at arm's length (the accent "+7" avatar is the small, framed way) */
 .avatar-stack__more { margin-left: var(--avatar-stack-more-gap, var(--sp-3)); font: var(--avatar-stack-more-font, var(--type-title)); color: var(--avatar-stack-more-ink, inherit); white-space: nowrap; }

package/css/post.css

@@ -60,7 +60,7 @@
   aspect-ratio: 4 / 5;
   rotate: var(--post-corner-stamp-tilt, 2deg);
 }
-.post-corner__stamp > :is(.stamp, .stamp-place) { grid-area: 1 / 1; max-width: none; }
+.post-corner__stamp > :is(.stamp, .stamp-place) { grid-area: 1 / 1; width: 100%; max-width: none; } /* the corner is the postcard's own size (72 × 90), outside the stamp's two sizes, by the owner's decision (2026-10-11); its box sizes the stamp, which fills it */
 
 /* ============================================================
    post-letter — READING one that arrived. The written side stood upright: the address half over the message half.
@@ -243,9 +243,21 @@
 .post-desk__reach--address { inset-inline-end: calc(-1 * var(--screen-pad)); }
 .post-desk__reach--message { inset-inline-start: calc(-1 * var(--screen-pad)); }
 .post-desk__reach:focus-visible { outline: var(--focus); outline-offset: calc(-1 * var(--sp-1)); }
-/* the sender's stamps to choose from, under the card */
-.post-desk__stamps { display: flex; gap: var(--post-desk-stamps-gap, var(--sp-4)); align-items: center; }
+/* the sender's stamps to choose from, under the card: each the standard size (--stamp-size, stamp.css), in one line that scrolls sideways when
+   they outrun the screen — a stamp never shrinks to fit. Three fit a 343 column at 375 (3 × 104 + 2 × 12); with the gap at sp-4 they were 1px over. The padding (taken back by the margin) keeps the focus ring and the lean inside the scroller */
+.post-desk__stamps {
+  display: flex;
+  gap: var(--post-desk-stamps-gap, var(--sp-3));
+  align-items: center;
+  margin: calc(-1 * var(--sp-2));
+  padding: var(--sp-2);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.post-desk__stamps::-webkit-scrollbar { display: none; }
 .post-desk__pick {
+  flex: none;
   display: grid;
   place-items: center;
   min-width: var(--tap);
@@ -255,7 +267,7 @@
   border-block-end: var(--rule-w) solid transparent;
   background: transparent;
 }
-.post-desk__pick > .stamp { --_w: calc(var(--sp-2) * 9); width: var(--post-desk-pick-w, var(--_w)); max-width: none; rotate: var(--post-corner-stamp-tilt, 2deg); } /* in the tray a stamp keeps its words */
+.post-desk__pick > .stamp { rotate: var(--post-corner-stamp-tilt, 2deg); } /* in the tray a stamp keeps its words */
 .post-desk__pick[aria-pressed="true"] { border-block-end-color: var(--on-surface); }
 .post-desk__note { margin: 0; font: var(--type-caption); color: var(--post-desk-note-ink, var(--on-surface-muted)); min-height: 1.35em; }
 /* what stands where the card was, once it has left */

package/css/stamp.css

@@ -13,13 +13,17 @@
    </span>
    Two boxes, as the sticky note: the OUTER one holds the size and the shadow, the PAPER is the one whose edge is
    punched (a mask on the outer box would cut its own shadow off). The stamp is a size container: every inner length
-   is a share of its width (cqw), so it reads the same from a tray to a sheet. The ground wears a sticky tone class —
-   one list of tones (src/sticky/tones.ts), one set of tone knobs. */
+   is a share of its width (cqw). The ground wears a sticky tone class — one list of tones (src/sticky/tones.ts), one
+   set of tone knobs.
+   ONE SIZE (Lh 2026-10-11): a stamp, and the empty place for one, is --stamp-size wide wherever it stands — in a book, a tray,
+   a card's head, a centre, a sheet, a page. What holds it only PLACES it. There is ONE other size, the small one, --stamp-sm-size
+   (one tap: half the stamp), for a stamp stuck ON something (`.stamp-on`, below) and a stamp in an avatar stack (people.css): one knob for both.
+   ONE exception, by the owner's decision (Lh 2026-10-11): the stamp at a postcard's corner (post.css) is the postcard's own size, 72 × 90,
+   --post-corner-stamp-w, in neither. The desk's tray (post.css) holds stamps of the standard size. */
 .stamp, .stamp-place {
-  --_cap: calc(var(--tap) * 4.5);
   box-sizing: border-box;
-  width: 100%;                                  /* sized by its column… */
-  max-width: var(--stamp-max-w, var(--_cap));   /* …up to a cap */
+  width: var(--stamp-size, calc(var(--tap) * 2));
+  max-width: 100%;                              /* a holder narrower than a stamp still shows it whole */
   aspect-ratio: 4 / 5;
   margin-inline: auto;
 }
@@ -63,7 +67,7 @@
 .stamp__words, .stamp__name { display: block; min-width: 0; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; }
 .stamp__words { --_words: 4.8cqw; font: 500 var(--_words) / 1.3 var(--font-ui); font-size: var(--stamp-words-font-size, var(--_words)); }
 .stamp__name { --_name: 9.5cqw; font: 900 var(--_name) / 1.15 var(--font-display); font-size: var(--stamp-name-font-size, var(--_name)); }
-/* tiny (a tray, an album cell, a stamp stuck on a note): the small line goes, the name grows */
+/* at the stamp's own size and under (and stuck on a note): the small line goes, the name grows */
 /* --bare: the pictures alone, no words — a stamp stuck on something (a note, a postcard). The words belong to the album.
    The pictures take the foot's room: each sits a little lower, so the group stands in the middle of the frame. */
 .stamp--bare .stamp__cap, .stamp-on .stamp__cap, .post-corner .stamp__cap { display: none; }
@@ -82,12 +86,8 @@
 /* --tap: the whole stamp is the button (`onClick`); the press and the ring are the PRESS list's (actions.css) */
 .stamp--tap { appearance: none; border: 0; padding: 0; background: none; font: inherit; text-align: start; -webkit-tap-highlight-color: transparent; }
 
-/* a stamp — or the empty place for one — handed over in a Centre: sized by the SCREEN (a little over half its width inside the inset), its greeting centred under it */
+/* a stamp — or the empty place for one — handed over in a Centre: its greeting centred under it. The stamp is its own size here as everywhere */
 .screen__centre:has(> :is(.stamp, .stamp-place)) { justify-items: center; text-align: center; }
-.screen__centre > :is(.stamp, .stamp-place) { max-width: var(--stamp-centre-max-w, 56cqw); }
-/* in the room above a closed stack's heads the stamp is held by that room's HEIGHT too: its height at most 45% of it, so two lines of words under it
-   still fit on a short phone (320×568 left 253px for a group 314 tall — reported by timebank, 2026-10-07). cqh reads the base, a size container. */
-.sheet-stack__base > .screen__centre > :is(.stamp, .stamp-place) { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
 
 /* ---- stamp place: an empty place for a stamp — an album's gap, "make yours" ----
    <span class="stamp-place"><svg class="stamp-place__edge" aria-hidden="true"><rect/></svg>สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint">…</span>
@@ -135,6 +135,9 @@
 .stamp-place--faint { --_edge: var(--stamp-place-faint-border, var(--hairline)); }
 
 /* ---- stamp book: the album page — three stamps across on an album ground, who each is from under it ----
+   The book places its stamps, it does not size them: each stands in the middle of its third. The column gap is the one that lets
+   three stamps keep their size in a phone's column (343 − 2 × 16 of padding − 2 × 8 = 295 ≥ 3 × 96); in a holder narrower than
+   that the thirds, and the stamps with them, shrink alike.
    <div class="stamp-book">
      <button class="stamp-cell"><span class="stamp">…</span><span class="stamp-cell__label">ต้น</span></button>
      <span class="stamp-cell">…</span>
@@ -144,7 +147,7 @@
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: start;
-  gap: var(--stamp-book-row-gap, var(--sp-4)) var(--stamp-book-col-gap, var(--sp-3));
+  gap: var(--stamp-book-row-gap, var(--sp-4)) var(--stamp-book-col-gap, var(--sp-2));
   padding: var(--stamp-book-pad, var(--sp-4));
   border-radius: var(--stamp-book-radius, var(--r-media));
   background-color: var(--stamp-book-bg, var(--ink-tint));
@@ -152,6 +155,7 @@
 .stamp-cell {
   position: relative;
   display: grid;
+  grid-template-columns: minmax(0, 1fr);   /* the cell's one column is the cell, never its stamp: in a third narrower than a stamp the stamp gives way (its max-width) */
   gap: var(--stamp-cell-gap, var(--sp-2));
   min-width: 0;
   appearance: none;
@@ -178,15 +182,13 @@
   color: var(--stamp-cell-on-ink, var(--on-accent));
 }
 .stamp-cell__on > .icon { width: 70%; height: 70%; }
-/* --bare: no ground, no padding — the stamps lie on what holds the book and fill it: three across, each the whole width of its third (the Stamp's own cap is lifted), the gap the least that still keeps three apart (the shadow's room), the row gap the same. The name is the Stamp's own; free places still draw.
+/* --bare: no ground, no padding, no round — the stamps lie on what holds the book, three across as on the ground. The name is the Stamp's own; free places still draw.
    <div class="stamp-book stamp-book--bare"> */
-.stamp-book--bare { gap: var(--stamp-book-bare-gap, var(--sp-2)); padding: 0; border-radius: 0; background: none; }
-.stamp-book--bare :is(.stamp, .stamp-place) { max-width: none; }
-/* --strip: ONE line of small stamps that scrolls sideways — the tray a member picks from. No ground. */
+.stamp-book--bare { padding: 0; border-radius: 0; background: none; }
+/* --strip: ONE line of stamps that scrolls sideways — the tray a member picks from, each stamp its own size. No ground. */
 .stamp-book--strip {
-  --_strip: calc(var(--tap) * 1.5);
   display: flex;
-  gap: var(--stamp-book-col-gap, var(--sp-3));
+  gap: var(--stamp-book-col-gap, var(--sp-2));
   padding: var(--sp-2) 0;
   border-radius: 0;
   background: none;
@@ -195,7 +197,7 @@
   scrollbar-width: none;
 }
 .stamp-book--strip::-webkit-scrollbar { display: none; }
-.stamp-book--strip > * { flex: none; width: var(--stamp-book-strip-w, var(--_strip)); }
+.stamp-book--strip > * { flex: none; }
 
 /* ---- stamp on: a stamp stuck on a surface where the member put it ----
    <div class="sticky__stuck"><div class="stamp-on stamp-on--move" style="--stamp-on-x: 0.8; --stamp-on-y: 0.2; --stamp-on-turn: 6"><span class="stamp">…</span></div></div>
@@ -205,12 +207,12 @@
   position: absolute;
   left: calc(var(--stamp-on-x, 0.5) * 100%);
   top: calc(var(--stamp-on-y, 0.5) * 100%);
-  width: var(--stamp-on-w, 27%);
   translate: -50% -50%;
   rotate: calc(var(--stamp-on-turn, 0) * 1deg);
   pointer-events: auto; /* the layer it lies in lets a tap through to the surface; the stamp itself takes it */
 }
-.stamp-on > .stamp { max-width: none; }
+/* the SMALL stamp: stuck on a surface (a note). 48 × 60 whatever the surface's size. The stamp carries the size and the `.stamp-on` box is as wide as its stamp */
+.stamp-on > .stamp { width: var(--stamp-sm-size, var(--tap)); max-width: none; }
 .stamp-on--move { will-change: transform; } /* its own layer: Safari left the stamp's shadow behind as a trail along the drag when it was painted with the note (seen on the simulator, 2026-10-07) */
 .stamp-on--move { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; transition: scale var(--motion-press) ease-out; }
 .stamp-on--move:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }