@usableapp/cardds 0.7.76 → 0.7.78

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 > 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.78 — 2026-10-10
+
+### Added
+- **`CardFeed` + `FeedCard`: a queue of cards, two in sight** (Lh 2026-10-09) — before → after: a home that offers several things in turn had to lay out its own cards and decide by hand which one is open → `<CardFeed>` takes the WHOLE queue as `<FeedCard id heading caption icon tone foot>` children in the app's order and shows the first two, one big (heading, content, its button) and one small (the same card cut down to its head). A touch anywhere on the small one swaps the sizes, neither changes place. When the two cards shown change, what is left slides up, the next comes in as the lower card and the feed asks for the upper one to be big. One card alone is big; with none it draws nothing. The app owns the queue (stop rendering a card and it leaves) and may own the size: `big` + `onBigChange(id, 'tap' | 'queue')`, or `defaultBig`. Nothing to wire for the press: the big card is pressed whole (0.7.76), the small card is itself a button. Knobs `--card-feed-gap` (the card gap), `--feed-card-head-h` (`--tap`).
+- **`Home sheets[n].tab` + `onTabChange`** — before → after: a Home sheet's tab was the Home's own (`defaultTab` only), so nothing outside the stack could bring a sheet up on a chosen tab → give a sheet `tab` and it shows that tab; a tapped tab asks `onTabChange(tab)`. Set `tab` and `open` together to open a sheet on a named tab. A sheet without `tab` behaves as before.
+
+### Changed
+- **The pressed-whole rule reads a card more exactly** — a control inside an `inert` part of a card no longer counts as one of its controls; a card that is itself `role="button"` is never pressed whole; and the card's foot counts as its own when a part of the card holds it (not only as a direct child). No card of the gallery changed class.
+
+## 0.7.77 — 2026-10-10
+
+### Added
+- **A neighbour as one card: `Card heading caption end={<Stamp/>} foot`** (timebank, 2026-10-09) — the words at the left, a large stamp at the right, the one button in the foot. Before → after: a `CardHead` with a hand-written `<div>` of two `Text`s and a `Stamp` with `--stamp-max-w` in a `style` (the stamp had no width in a head: it takes the head's whole width up to its cap) → `<Card heading={name} caption={greeting} end={<Stamp bare {...art} />} foot={<Btn primary block>…</Btn>} />`, no markup and no `style`. The stamp is as tall as the heading and the caption together. New knob `--card-head-stamp-w` (the stamp's width in a head; default two taps). The card's only control is the foot's button, so a touch anywhere presses it; the stamp is a picture, not a button. The same goes for a `CardHead` of your own with a `Stamp` as a direct child. Story `StampScreens · Neighbours`.
+- **`StampPlace` in a `Centre`** — a neighbour with no stamp yet: `<Centre><StampPlace>…</StampPlace><Text>…</Text><Link>…</Link></Centre>`. Before → after: the frame was centred but the name and the link stood at the left, and its size was the plain cap → it takes the size a `Stamp` takes there (`--stamp-centre-max-w`) and the words and the link centre under it, as under a stamp. Story `StampScreens · NoStampYet`.
+- **`--stamp-place-dash`, `--stamp-place-gap`** — the dashes of a `StampPlace`'s edge: how long each dash is, and the gap between (defaults `--sp-2` and `--sp-3`).
+
+### Changed
+- **The dashes of a `StampPlace` stand further apart** (Lh 2026-10-09) — the edge was a CSS dashed border (the browser's dash and gap: 6px dash and 4px gap in Chrome, 6px and 6px in Safari, at 2px wide). Before → after: the same edge drawn as a stroke with a gap of 12px and a dash of 8px, still round at `--stamp-place-radius`, the same colours (`--stamp-place-border`, `--stamp-place-faint-border`, a card's muted ink), the same 4:5 size, the words and icon inside where they were. A project that drew the edge itself with `border-style` on `.stamp-place` sets `--stamp-place-border` or the two new knobs instead: its border is now clear. A `StampPlace` has an `<svg aria-hidden>` as its first child.
+
+### Fixed
+- **`StampBook places={9}` drew eight places when a child was `false` or `null`** (timebank, 2026-10-09) — `{owned && <StampCell/>}` that was `false` still counted as a place, so one empty place too few was drawn. Before → after: nine boxes (the cells that render, the rest empty). Story `StampBook · Conditional`.
+
 ## 0.7.76 — 2026-10-09
 
 ### Changed

package/README.md

@@ -225,6 +225,11 @@ the card is the material, the sheet is what it is in the stack.
   under the sheets (hidden while one is open), nothing resizes. At the screen's
   top the open sheet's top corners are square; folded, they are round again. It needs
   `--closed` in a `Screen fill`.
+- **`Home` takes a sheet's tab from the app.** Each of `Home sheets` keeps its
+  own tab (`defaultTab`, else the first) unless the app gives it `tab` — then
+  that tab shows, and a tapped tab asks `onTabChange(tab)`. Something outside
+  the stack (a card in the base) brings a sheet up on a named tab by setting
+  that sheet's `tab` and the Home's `open` together. Story `Home · Feed`.
 - **Five sheets max.** Slots are declared per `:nth-child` in `stack.css`; a
   sixth would render at slot 0, on top of the first.
 - **Every head needs its own `.sheet-stack__back`** if the stack is `--tap`. It stays
@@ -491,6 +496,25 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     the one button in the head or in the content, a disabled button, a sheet, a
     stack's sheet, a modal. A card that is itself a link or a label was pressed
     whole already. Story `Card · PressedWhole`.
+  - **A feed is a queue of cards, two in sight** (Lh 2026-10-09). `CardFeed`
+    takes the WHOLE queue as `FeedCard` children, in the app's order, and shows
+    the first two: one BIG (heading, content, its button) and one SMALL (the
+    same card cut down to its head — no content, no button). A touch anywhere
+    on the small one makes it the big one and the other the small one; neither
+    changes place. The small card is itself the button (named by its heading,
+    Enter and Space) and what it does not show cannot be pressed, focused or
+    read; the big card is a plain card, pressed whole by the rule above. When
+    the two cards shown change — a card left the queue, a new one came — what
+    is left slides up, the next comes in as the lower card, and the UPPER card
+    is big, whichever was big before. One card alone is big; no card, nothing
+    is drawn. The queue is the app's: a card leaves when the app stops
+    rendering it. Which card is big is controlled like an input: `big` (a
+    card's `id`) + `onBigChange(id, 'tap' | 'queue')`, or `defaultBig`. A
+    `FeedCard` is `id` · `heading` · `caption` · `icon` (its thumb, in both
+    sizes) · `tone` · `foot` (one `Btn`) · children (the content); its size is
+    the feed's, never a prop. Knobs `--card-feed-gap`, `--feed-card-head-h`.
+    Reduced motion: nothing slides or fades. Stories `CardFeed · Default`,
+    `Home · Feed`.
 - A page with **one feature and one CTA** (an install page, a single
   decision) may be contained in one card: head, the pitch, foot.
 - **A bottom sheet holds what the member acts on** — controls, or small
@@ -543,10 +567,16 @@ it up. cardds draws the paper; the pictures, their words and which stamp a membe
   `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.
 - **`StampPlace`** — an empty dashed place the size of a stamp: a word inside, `onClick` for "make yours", `faint` for a
-  gap nobody is asked to fill.
+  gap nobody is asked to fill. The edge is a drawn stroke, so its dashes are yours: `--stamp-place-dash` and
+  `--stamp-place-gap` (defaults 8px and 12px), its corner is `--stamp-place-radius`.
 - **`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.
+  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}
+  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).
 - **`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:

package/css/actions.css

@@ -362,6 +362,7 @@
    something as wide as its card (a row, a summary line, a card, a step bar, a peeked sheet) fades under the finger (--press-dim)
    instead, because a whole row shrinking reads as the card moving. A choice's fill fades in as it is picked. Disabled = no
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here.
+   .feed-card--small (Lh 2026-10-09) = the small card of a CardFeed: the card itself is the button that grows it, so it has the ring too.
    .card--go (Lh 2026-10-09) = a card pressed whole: `Card` renders it while its ONE control is its foot's button or a row card's end
    button (src/cards/cardGo.ts). It is in the DIM pointer and :active lists only — the focus ring and the disabled look stay the
    button's, the card itself is never focused or disabled. */
@@ -372,7 +373,7 @@
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
 }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -387,7 +388,7 @@
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
@@ -398,7 +399,7 @@
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,

package/css/card.css

@@ -84,6 +84,15 @@
    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.
+   <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; }
+
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
    a tile grid: the TRACK reaches the edges so it reads as scrollable, while
@@ -300,6 +309,36 @@
   opacity: 0.85;
 }
 
+/* ---- card feed: a queue of cards, two in sight — one big, one small (Lh 2026-10-09) ----
+   <div class="card-feed">
+     <article class="card feed-card"><div class="card__head feed-card__head">thumb · h2 · caption</div>
+       <div class="feed-card__more"><div class="feed-card__rest">content · <div class="card__foot">…</div></div></div></article>
+     <article class="card feed-card feed-card--small" role="button" tabindex="0">… <div class="feed-card__more" inert>…</div></article>
+   </div>
+   ONE markup in both sizes: the head always shows, the rest is a grid row that goes 1fr ↔ 0fr (never a height: Safari 16.4 has no
+   interpolate-size). The card's own row gap is 0 and the rest carries it as its first thing's margin, so a small card ends on its
+   head with nothing under it. The rest is clipped by clip-path while it shows: the clip runs out to the card's edges and a little
+   under the foot, so the button's focus ring is whole. Closed, it is `overflow: clip` as well — a clip-path alone leaves the
+   shut content in the scrollable overflow of whatever holds the feed — and hidden once the row has shut. */
+.card-feed { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-feed-gap, var(--card-gap-rest)); }
+.feed-card { row-gap: 0; }
+.feed-card__head { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: var(--feed-card-head-h, var(--tap)); }
+.feed-card__head:has(> .card__thumb) { grid-template-columns: auto minmax(0, 1fr); }
+.feed-card__head:has(> .t-caption) > .card__thumb { grid-row: span 2; }
+.feed-card__more { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
+.feed-card--small > .feed-card__more { grid-template-rows: 0fr; }
+.feed-card__rest {
+  min-height: 0;
+  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-gap);
+  clip-path: inset(0 calc(-1 * var(--card-pad)) calc(-1 * var(--sp-2)));
+}
+.feed-card__rest > :first-child { margin-top: var(--card-gap); }
+.feed-card--small .feed-card__rest { overflow: clip; visibility: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .feed-card__more { transition: grid-template-rows var(--motion-sheet) ease; }
+  .feed-card--small .feed-card__rest { transition: visibility 0s var(--motion-sheet); }
+}
+
 /* ---- inline stat block (revenue-style) ---- */
 .stat { display: grid; gap: var(--stat-gap, var(--sp-1)); }
 .stat--centre { text-align: center; justify-items: center; } /* the one number of a sheet or a stage, under a centred avatar */

package/css/stamp.css

@@ -82,29 +82,52 @@
 /* --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 handed over in a Centre: sized by the SCREEN (a little over half its width inside the inset), its greeting centred under it */
-.screen__centre:has(> .stamp) { justify-items: center; text-align: center; }
-.screen__centre > .stamp { max-width: var(--stamp-centre-max-w, 56cqw); }
+/* 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 */
+.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 > .stamp { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
+.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">สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint"></span> */
+   <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>
+   The dashed edge is a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose, a stroke's are two
+   knobs (--stamp-place-dash, --stamp-place-gap) and its corners still follow --stamp-place-radius. The element keeps a clear border
+   of the same width so what is inside sits where it did; the svg lies on that border, over it, and takes no part in the layout. */
 .stamp-place {
+  position: relative;
   display: grid;
   place-content: center;
   justify-items: center;
   padding: var(--sp-1);
-  border: var(--rule-w) dashed var(--stamp-place-border, var(--on-surface-muted));
+  border: var(--rule-w) solid transparent;
   border-radius: var(--stamp-place-radius, var(--sp-2));
   background: none;
   color: var(--stamp-place-ink, var(--on-surface-muted));
   font: var(--stamp-place-font, var(--type-caption));
   text-align: center;
+  --_edge: var(--stamp-place-border, var(--on-surface-muted));
+}
+.stamp-place__edge {
+  position: absolute;
+  inset: calc(var(--rule-w) / -2) auto auto calc(var(--rule-w) / -2);
+  width: calc(100% + var(--rule-w));
+  height: calc(100% + var(--rule-w));
+  max-width: none;                      /* base.css caps every svg at its box */
+  overflow: visible;                    /* the stroke is centred on the rect's own edge: half of it falls outside the svg */
+  pointer-events: none;
+}
+.stamp-place__edge > rect {
+  width: 100%;
+  height: 100%;
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--rule-w) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
+  fill: none;
+  stroke: var(--_edge);
+  stroke-width: var(--rule-w);
+  stroke-dasharray: var(--stamp-place-dash, var(--sp-2)) var(--stamp-place-gap, var(--sp-3));
 }
-.card .stamp-place, .post-paper .stamp-place { border-color: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
-.stamp-place--faint { border-color: var(--stamp-place-faint-border, var(--hairline)); }
+.card .stamp-place, .post-paper .stamp-place { --_edge: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
+.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 ----
    <div class="stamp-book">

package/dist/cardds.css

@@ -770,6 +770,15 @@ 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.
+   <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; }
+
 /* ---- bleed: a scrolling track that runs to the container's edges ----
    For a horizontal strip inside a padded container — .avatar-pick, .chip-row,
    a tile grid: the TRACK reaches the edges so it reads as scrollable, while
@@ -986,6 +995,36 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   opacity: 0.85;
 }
 
+/* ---- card feed: a queue of cards, two in sight — one big, one small (Lh 2026-10-09) ----
+   <div class="card-feed">
+     <article class="card feed-card"><div class="card__head feed-card__head">thumb · h2 · caption</div>
+       <div class="feed-card__more"><div class="feed-card__rest">content · <div class="card__foot">…</div></div></div></article>
+     <article class="card feed-card feed-card--small" role="button" tabindex="0">… <div class="feed-card__more" inert>…</div></article>
+   </div>
+   ONE markup in both sizes: the head always shows, the rest is a grid row that goes 1fr ↔ 0fr (never a height: Safari 16.4 has no
+   interpolate-size). The card's own row gap is 0 and the rest carries it as its first thing's margin, so a small card ends on its
+   head with nothing under it. The rest is clipped by clip-path while it shows: the clip runs out to the card's edges and a little
+   under the foot, so the button's focus ring is whole. Closed, it is `overflow: clip` as well — a clip-path alone leaves the
+   shut content in the scrollable overflow of whatever holds the feed — and hidden once the row has shut. */
+.card-feed { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-feed-gap, var(--card-gap-rest)); }
+.feed-card { row-gap: 0; }
+.feed-card__head { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: var(--feed-card-head-h, var(--tap)); }
+.feed-card__head:has(> .card__thumb) { grid-template-columns: auto minmax(0, 1fr); }
+.feed-card__head:has(> .t-caption) > .card__thumb { grid-row: span 2; }
+.feed-card__more { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
+.feed-card--small > .feed-card__more { grid-template-rows: 0fr; }
+.feed-card__rest {
+  min-height: 0;
+  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--card-gap);
+  clip-path: inset(0 calc(-1 * var(--card-pad)) calc(-1 * var(--sp-2)));
+}
+.feed-card__rest > :first-child { margin-top: var(--card-gap); }
+.feed-card--small .feed-card__rest { overflow: clip; visibility: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .feed-card__more { transition: grid-template-rows var(--motion-sheet) ease; }
+  .feed-card--small .feed-card__rest { transition: visibility 0s var(--motion-sheet); }
+}
+
 /* ---- inline stat block (revenue-style) ---- */
 .stat { display: grid; gap: var(--stat-gap, var(--sp-1)); }
 .stat--centre { text-align: center; justify-items: center; } /* the one number of a sheet or a stage, under a centred avatar */
@@ -2728,6 +2767,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    something as wide as its card (a row, a summary line, a card, a step bar, a peeked sheet) fades under the finger (--press-dim)
    instead, because a whole row shrinking reads as the card moving. A choice's fill fades in as it is picked. Disabled = no
    pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here.
+   .feed-card--small (Lh 2026-10-09) = the small card of a CardFeed: the card itself is the button that grows it, so it has the ring too.
    .card--go (Lh 2026-10-09) = a card pressed whole: `Card` renders it while its ONE control is its foot's button or a row card's end
    button (src/cards/cardGo.ts). It is in the DIM pointer and :active lists only — the focus ring and the disabled look stay the
    button's, the card itself is never focused or disabled. */
@@ -2738,7 +2778,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   touch-action: manipulation;
   transition: scale var(--motion-press) ease-out;
 }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -2753,7 +2793,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):active:not(:disabled, [aria-disabled="true"], :has(:disabled)) { scale: var(--press-scale); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .feed-card--small, .toggle-field, .post-box__edge):active:not([aria-disabled="true"], :has(:disabled)) { opacity: var(--press-dim); }
 .sheet-step:has(> .sheet-step__go:active) { opacity: var(--press-dim); } /* the step bar's button is invisible over it: the bar answers */
 /* SHADE — what has something BEHIND it (a peeked sheet over the pile, a postcard's face over its back, a post letter's sheet over the other) must not turn see-through:
    it darkens a touch instead (--press-shade) */
@@ -2764,7 +2804,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
   a.avatar, button.avatar, .menu__item, button.snackbar__body, .stamp--tap, button.stamp-cell, button.stamp-place, .post-letter__turn, .post-desk__slot, .post-desk__pick, .post-desk__reach):focus-visible,
 :where(.chip--pick, .tile--pick, label.btn, label.row, .toggle-field):has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
-:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .feed-card--small, .toggle-field, .post-box__edge):not(label, .toggle-field):focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
 /* disabled: no pointer anywhere; a control fades (a link and a row keep their own muted look) */
 :where(.btn, .icon-btn, .link, a.chip, button.chip, .chip--pick, a.tile, button.tile, .tile--pick, .day, .segment__item, .calendar__day,
   .float-bar__item, .avatar-pick__item, .add-row, .picker__item, .dropdown__btn, .appbar__who, .check, .toggle, .mood__opt, .sheet__handle,
@@ -3996,29 +4036,52 @@ 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 handed over in a Centre: sized by the SCREEN (a little over half its width inside the inset), its greeting centred under it */
-.screen__centre:has(> .stamp) { justify-items: center; text-align: center; }
-.screen__centre > .stamp { max-width: var(--stamp-centre-max-w, 56cqw); }
+/* 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 */
+.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 > .stamp { max-width: min(var(--stamp-centre-max-w, 56cqw), 36cqh); }
+.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">สร้าง</span> · <button class="stamp-place">…</button> · <span class="stamp-place stamp-place--faint"></span> */
+   <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>
+   The dashed edge is a <rect> of its own, not a border: a dashed border's dash and gap are the browser's to choose, a stroke's are two
+   knobs (--stamp-place-dash, --stamp-place-gap) and its corners still follow --stamp-place-radius. The element keeps a clear border
+   of the same width so what is inside sits where it did; the svg lies on that border, over it, and takes no part in the layout. */
 .stamp-place {
+  position: relative;
   display: grid;
   place-content: center;
   justify-items: center;
   padding: var(--sp-1);
-  border: var(--rule-w) dashed var(--stamp-place-border, var(--on-surface-muted));
+  border: var(--rule-w) solid transparent;
   border-radius: var(--stamp-place-radius, var(--sp-2));
   background: none;
   color: var(--stamp-place-ink, var(--on-surface-muted));
   font: var(--stamp-place-font, var(--type-caption));
   text-align: center;
+  --_edge: var(--stamp-place-border, var(--on-surface-muted));
+}
+.stamp-place__edge {
+  position: absolute;
+  inset: calc(var(--rule-w) / -2) auto auto calc(var(--rule-w) / -2);
+  width: calc(100% + var(--rule-w));
+  height: calc(100% + var(--rule-w));
+  max-width: none;                      /* base.css caps every svg at its box */
+  overflow: visible;                    /* the stroke is centred on the rect's own edge: half of it falls outside the svg */
+  pointer-events: none;
 }
-.card .stamp-place, .post-paper .stamp-place { border-color: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
-.stamp-place--faint { border-color: var(--stamp-place-faint-border, var(--hairline)); }
+.stamp-place__edge > rect {
+  width: 100%;
+  height: 100%;
+  rx: calc(var(--stamp-place-radius, var(--sp-2)) - var(--rule-w) / 2);   /* the corner of the stroke's middle, so its outer edge is the radius */
+  fill: none;
+  stroke: var(--_edge);
+  stroke-width: var(--rule-w);
+  stroke-dasharray: var(--stamp-place-dash, var(--sp-2)) var(--stamp-place-gap, var(--sp-3));
+}
+.card .stamp-place, .post-paper .stamp-place { --_edge: var(--stamp-place-border, var(--card-muted)); color: var(--stamp-place-ink, var(--card-muted)); }
+.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 ----
    <div class="stamp-book">

package/dist/cards/CardFeed.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type Tone } from './Card.js';
+import { type IconName } from '../type/Icon.js';
+/** why the feed asks for another big card: the member touched the small one · the two cards shown changed */
+export type CardFeedReason = 'tap' | 'queue';
+export interface CardFeedProps extends ComponentProps<'div'> {
+    /** CONTROLLED: the `id` of the card shown big — with `onBigChange`; or `defaultBig`. An id that is not one of the two cards shown reads as the upper one */
+    big?: string;
+    /** UNCONTROLLED: the card big on arrival (default: the upper one); the feed then keeps its own. Pair of `big` */
+    defaultBig?: string;
+    /** the feed asks for another big card: its `id`, and why — `tap` (the member touched the small card) · `queue` (the two cards shown changed: the upper one is asked for) */
+    onBigChange?: (id: string, reason: CardFeedReason) => void;
+    /** the WHOLE queue, in the app's order: one `FeedCard` each, as direct children. The feed draws the first two */
+    children?: ReactNode;
+}
+/**
+ * CardFeed — a QUEUE of cards the system hands the member one after another; at most two are on the screen: one BIG (heading, content,
+ * its button) and one SMALL (the same card cut down to its head). A touch anywhere on the small one makes it the big one and the other
+ * the small one; neither changes place. The queue is the app's: when it changes (a card left, a new one came) what is left slides up,
+ * the next comes in as the lower card, and the feed asks for the UPPER card to be big, whichever was big before. One card alone is big;
+ * no card, nothing is drawn. Which card is big is controlled like an input (`big` + `onBigChange`, or `defaultBig`).
+ */
+export declare function CardFeed({ big: bigProp, defaultBig, onBigChange, className, children, ref, ...rest }: CardFeedProps): import("react").JSX.Element | null;
+export interface FeedCardProps extends Omit<ComponentProps<'article'>, 'id' | 'role' | 'tabIndex'> {
+    /** which card of the queue this is — the app's own id for it, unique in the feed. `CardFeed big` / `onBigChange` speak in these */
+    id: string;
+    /** the card's heading — shown in both sizes; it names the small card */
+    heading: ReactNode;
+    /** the muted line under the heading, shown in both sizes */
+    caption?: ReactNode;
+    /** the card's thumb at the head's start: an icon by name, drawn in both sizes */
+    icon?: IconName;
+    /** the tone slot — see `Tone` */
+    tone?: Tone;
+    /** the card's button (one `Btn`) — shown only while the card is big, and then the card is pressed whole: a touch anywhere on it runs this button */
+    foot?: ReactNode;
+    /** the content — words, a picture, a Stamp. Shown only while the card is big */
+    children?: ReactNode;
+}
+/**
+ * FeedCard — ONE card of a `CardFeed`'s queue, the same markup in both sizes: its head (thumb · heading · caption) always shows, its
+ * content and its button are one part that opens while the card is big. The SIZE IS THE FEED'S, never a prop. Small, the card itself
+ * is the control (a button named by its heading; Enter and Space) and its closed part cannot be pressed, focused or read. Big, it is a
+ * plain card: its one control is its foot's button, so it is pressed whole.
+ */
+export declare function FeedCard({ id, heading, caption, icon, tone, foot, className, children, onClick, onKeyDown, ref, ...rest }: FeedCardProps): import("react").JSX.Element;

package/dist/cards/CardFeed.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef } from 'react';
+import { cx } from '../cx.js';
+import { reducedMotion, useControlled, warnOnce } from '../state.js';
+import { Card } from './Card.js';
+import { CardHead } from './CardHead.js';
+import { CardFoot } from './CardFoot.js';
+import { CardThumb } from './CardParts.js';
+import { Icon } from '../type/Icon.js';
+import { Text } from '../type/Text.js';
+const FeedCtx = createContext(null);
+/**
+ * CardFeed — a QUEUE of cards the system hands the member one after another; at most two are on the screen: one BIG (heading, content,
+ * its button) and one SMALL (the same card cut down to its head). A touch anywhere on the small one makes it the big one and the other
+ * the small one; neither changes place. The queue is the app's: when it changes (a card left, a new one came) what is left slides up,
+ * the next comes in as the lower card, and the feed asks for the UPPER card to be big, whichever was big before. One card alone is big;
+ * no card, nothing is drawn. Which card is big is controlled like an input (`big` + `onBigChange`, or `defaultBig`).
+ */
+export function CardFeed({ big: bigProp, defaultBig, onBigChange, className, children, ref, ...rest }) {
+    const queue = Children.toArray(children).filter((c) => isValidElement(c) && typeof c.props.id === 'string');
+    if (queue.length !== Children.count(children))
+        warnOnce('card-feed-child', 'cardds CardFeed: every child is a <FeedCard id="…"> — a child without a string `id` is not drawn');
+    const shown = queue.slice(0, 2);
+    const ids = shown.map((c) => c.props.id);
+    const [asked, request] = useControlled(bigProp, defaultBig, onBigChange);
+    const big = asked !== undefined && ids.includes(asked) ? asked : ids[0];
+    const own = useRef(null);
+    const tops = useRef(new Map());
+    const was = useRef(null);
+    const key = ids.join('\n');
+    useLayoutEffect(() => {
+        const box = own.current;
+        const cards = box ? [...box.children] : [];
+        const changed = was.current !== null && was.current !== key;
+        was.current = key;
+        if (changed) {
+            if (ids.length)
+                request(ids[0], 'queue');
+            cards.forEach((el) => el.getAnimations().forEach((a) => { if (a.id === 'feed-move')
+                a.cancel(); })); // read the resting places
+        }
+        const at = new Map(cards.map((el) => [el, el.offsetTop]));
+        if (changed && box && !reducedMotion()) {
+            const ms = (parseFloat(getComputedStyle(box).getPropertyValue('--motion-sheet')) || 0.35) * 1000;
+            for (const el of cards) {
+                const from = tops.current.get(el);
+                const move = from === undefined
+                    ? el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: 'ease-out' }) // it came in: no place to come from
+                    : from !== at.get(el) ? el.animate([{ translate: `0 ${from - (at.get(el) ?? 0)}px` }, { translate: '0 0' }], { duration: ms, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' }) : null;
+                if (move)
+                    move.id = 'feed-move';
+            }
+        }
+        tops.current = at;
+    });
+    const setRef = (node) => {
+        own.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    if (!shown.length)
+        return null;
+    return (_jsx(FeedCtx.Provider, { value: { big, grow: (id) => request(id, 'tap') }, children: _jsx("div", { ref: setRef, className: cx('card-feed', className), ...rest, children: shown }) }));
+}
+const onSmallKey = (e) => {
+    if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' '))
+        return;
+    e.preventDefault();
+    e.currentTarget.click();
+};
+/**
+ * FeedCard — ONE card of a `CardFeed`'s queue, the same markup in both sizes: its head (thumb · heading · caption) always shows, its
+ * content and its button are one part that opens while the card is big. The SIZE IS THE FEED'S, never a prop. Small, the card itself
+ * is the control (a button named by its heading; Enter and Space) and its closed part cannot be pressed, focused or read. Big, it is a
+ * plain card: its one control is its foot's button, so it is pressed whole.
+ */
+export function FeedCard({ id, heading, caption, icon, tone, foot, className, children, onClick, onKeyDown, ref, ...rest }) {
+    const feed = useContext(FeedCtx);
+    if (!feed)
+        warnOnce('feed-card-alone', 'cardds FeedCard: outside a <CardFeed> it has nobody to say its size — it is drawn big');
+    const small = feed != null && feed.big !== id;
+    const name = useId();
+    const own = useRef(null);
+    const byKey = useRef(false);
+    useLayoutEffect(() => {
+        // grown from the keyboard: the card stopped being a control under the cursor, so the cursor goes on to its button
+        if (!small && byKey.current)
+            own.current?.querySelector('.card__foot :is(button, a[href])')?.focus({ preventScroll: true });
+        byKey.current = false;
+    }, [small]);
+    const setRef = (node) => {
+        own.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    return (_jsxs(Card, { ref: setRef, tone: tone, className: cx('feed-card', small && 'feed-card--small', className), ...rest, ...(small ? { role: 'button', tabIndex: 0, 'aria-expanded': false, 'aria-labelledby': name } : {}), onClick: (e) => { onClick?.(e); if (small && !e.defaultPrevented) {
+            byKey.current = e.detail === 0;
+            feed.grow(id);
+        } }, onKeyDown: (e) => { onKeyDown?.(e); if (small && !e.defaultPrevented)
+            onSmallKey(e); }, children: [_jsxs(CardHead, { className: "feed-card__head", children: [icon && _jsx(CardThumb, { children: _jsx(Icon, { name: icon, size: "sm" }) }), _jsx(Text, { level: "h2", id: name, children: heading }), caption != null && _jsx(Text, { level: "caption", muted: true, children: caption })] }), _jsx("div", { className: "feed-card__more", inert: small, children: _jsxs("div", { className: "feed-card__rest", children: [children, foot != null && _jsx(CardFoot, { children: foot })] }) })] }));
+}

package/dist/cards/cardGo.js

@@ -8,20 +8,22 @@ const CONTROLS = [
     '[tabindex]:not([tabindex="-1"])', '[contenteditable]',
     '.stamp-on', // dragged
 ].join(', ');
-/** a card that is pressed whole already (a link, a label, a button), or where a touch means something else: a sheet is where the member
- *  acts, a modal asks, a touch on a stack's sheet opens it (`stack-card` is what `Card` renders from its `stack` prop) */
-const NOT_A_GO_CARD = 'a, label, button, .sheet, .modal, .stack-card';
+/** a card that is pressed whole already (a link, a label, a button, a card that is itself the control), or where a touch means
+ *  something else: a sheet is where the member acts, a modal asks, a touch on a stack's sheet opens it (`stack-card` is what `Card`
+ *  renders from its `stack` prop) */
+const NOT_A_GO_CARD = 'a, label, button, [role="button"], .sheet, .modal, .stack-card';
 /** the control this card presses when it is touched off that control, or null: the card is only read */
 export function goControl(card) {
     if (card.matches(NOT_A_GO_CARD))
         return null;
-    const controls = card.querySelectorAll(CONTROLS);
+    const controls = [...card.querySelectorAll(CONTROLS)].filter((c) => !c.closest('[inert]')); // an inert part cannot be pressed, focused or read: nothing in it is a control
     if (controls.length !== 1)
         return null;
     const control = controls[0];
     if (control.matches(':disabled, [aria-disabled="true"]'))
         return null;
-    const inFoot = control.parentElement?.matches('.card__foot') && control.parentElement.parentElement === card;
+    const foot = control.parentElement;
+    const inFoot = foot?.matches('.card__foot') && foot.parentElement?.closest('.card') === card; // the card's OWN foot, also when a part of the card holds it (a FeedCard's region)
     const atRowEnd = card.matches('.card--row') && card.lastElementChild === control;
     return inFoot || atRowEnd ? control : null;
 }