@usableapp/cardds 0.7.83 → 0.7.84

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 > 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`

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`.
@@ -616,26 +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. On a note a stamp is 48 wide whatever the note's size (`--sticky-stamp-w`), and it may lie
-  over the words.
+  `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
@@ -671,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/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/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); }

package/css/sticky.css

@@ -94,9 +94,8 @@
   box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
 }
 /* things stuck ON the note (a stamp, placed by hand): a layer over the whole paper. A tap between them still reaches the words under it.
-   A stamp on a note is one width whatever the note's (48 × 60, the stamp of the album's strip), and may lie over the words. */
+   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css), and may lie over the words. */
 .sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
-.sticky__stuck > .stamp-on { width: var(--sticky-stamp-w, var(--stamp-on-w, var(--sp-12))); } /* the stamp's own knob still reaches it; the note's wins */
 .sticky--flat > .sticky__paper { clip-path: none; }
 .sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
 

package/dist/cardds.css

@@ -770,14 +770,14 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    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,
@@ -3186,9 +3186,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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; }
@@ -3860,9 +3861,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   box-shadow: calc(-1 * var(--sp-0)) calc(-1 * var(--sp-0)) var(--sp-1) rgb(0 0 0 / 0.08);
 }
 /* things stuck ON the note (a stamp, placed by hand): a layer over the whole paper. A tap between them still reaches the words under it.
-   A stamp on a note is one width whatever the note's (48 × 60, the stamp of the album's strip), and may lie over the words. */
+   A stamp on a note is the stamp's small size whatever the note's (48 × 60, --stamp-sm-size: stamp.css), and may lie over the words. */
 .sticky__stuck { position: absolute; inset: 0; pointer-events: none; }
-.sticky__stuck > .stamp-on { width: var(--sticky-stamp-w, var(--stamp-on-w, var(--sp-12))); } /* the stamp's own knob still reaches it; the note's wins */
 .sticky--flat > .sticky__paper { clip-path: none; }
 .sticky--flat > .sticky__paper > .sticky__foot { padding-inline-end: 0; }
 
@@ -4115,13 +4115,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    </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;
 }
@@ -4165,7 +4169,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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; }
@@ -4184,12 +4188,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* --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>
@@ -4237,6 +4237,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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>
@@ -4246,7 +4249,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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));
@@ -4254,6 +4257,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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;
@@ -4280,15 +4284,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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;
@@ -4297,7 +4299,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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>
@@ -4307,12 +4309,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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); }
@@ -4382,7 +4384,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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.
@@ -4565,9 +4567,21 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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);
@@ -4577,7 +4591,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   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 */