@usableapp/cardds 0.7.74 → 0.7.76

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 > 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.76 — 2026-10-09
+
+### Changed
+- **A card with one button is pressed whole** (Lh 2026-10-09) — a `Card` whose ONLY control is its foot's button (`foot` / `CardFoot`), or the end button of a `Card row`, now answers a touch anywhere on it: the button's own action runs once (its `onClick`, its `href`, its `popoverTarget`), and the whole card dims while the finger is down. Before → after: only the button could be pressed, the rest of the card did nothing → the heading, the words and the empty room press the button. Nothing to write in an app, and no prop turns it off. A card `onClick` of your own still runs once per press. Unchanged: a card with two or more controls (a second button, a field, a choice, a button in a card inside it), a card whose one button is in its head or in its content, a disabled button, a `Sheet`, a sheet of a `SheetStack`, a `Modal`, a card that is a link or a label. If a screen relied on a touch beside the lone foot button doing nothing, that touch now presses it. Story `Card · PressedWhole`.
+
+- **Cards in a closed stack's base: room under the last one, and no shadow** (Lh 2026-10-09, from timebank's home) — loose things in `SheetStack base` / `Home base` rest against the heads. Before → after: the last one's bottom edge lay ON the first sheet's top edge → it keeps the same room under it as between two of them (20px at the defaults). A base that is one `Page` (reads from the top) or one `Centre` (stands in the middle) is unchanged. And a `Card` standing in the base is FLAT in a coloured theme (`data-palette`) and under `data-finish="lit"`: the base clips at its own edges, so a card's shadow ended in a straight line under the top bar and along the first sheet. Nothing to change in a project. New knob `--stack-base-gap` (the room between the base's things and under the last one; default the card gap, `--sp-5`). The room above the heads is shorter by that gap for loose content — on a short phone check what you put there still fits. Story `SheetStack · ClosedCards`.
+
+## 0.7.75 — 2026-10-09
+
+### Changed — ten names say what the component is for (BREAKING: the old names are gone)
+A name that said a shape now says a function (Lh 2026-10-08). The CSS classes and every knob are UNCHANGED, so a project's `theme.css` and its `--segment-*` / `--band-*` / `--wait-link-*` knobs keep working; only the import changes. Nothing of the old names is exported any more — update the import or the build fails (Lh 2026-10-09: a clean cut, no alias).
+
+| was | is | what it is for |
+|---|---|---|
+| `Segment`, `SegmentItem` | `BtnGroup`, `BtnGroupItem` | a panel of buttons, one on at a time (a grouped button; "segment" is kept for a divider of content) |
+| `WaitLink` | `Countdown` | a link that counts down and takes no tap until the time has passed |
+| `PagerAt` | `Pager` | the dots that say where one is in a walk (the bar is still `ActionBar variant="pager"`) |
+| `TileBadge` | `JourneyBadge` | the small badge on a journey's tile |
+| `Band`, `BandStack` | `NumberBand`, `NumberBandStack` | one number as a band; several stacked |
+| `Lift` | `ModalBody` | the part of a Modal that lifts: what is shown above the question |
+| `Drawer` | `ModalAsk` | the question and its answers at the Modal's foot (`ModalAsk light` as before) |
+| `ActionNote` | `BarNote` | words standing where the bar's button would be |
+
+Their Props types follow (`BtnGroupProps`, `ModalAskProps`…). `Centre`, `CtaPack`, `ActionBarTier`, `BtnTrio`, `IconBtnGroup` keep their names.
+
+### Changed — fewer stories, one per prop axis
+Ten gallery stories that differed from a sibling only by a tone, a side or an on/off are folded into that sibling (values of one axis stand side by side in one story): `Mood/Default` (was Picked + Unpicked), `Sticky/Looks` (was Tones + Flat + Tilt), `AvatarPick/Inset` (+ OnDark), `Modal/Confirm` (+ ConfirmLight), `Sheet/Half` (+ Look), `Field/Plain` (+ WithIcon); `StickyWelcome/WelcomeRight`, `SheetStack/ClosedOpened` and `SheetStack/StackBackBackOfStack` are gone. 419 → 409 stories; the catalog's `scaffold` ids change with them. The rendered html of every other story is byte-identical.
+
 ## 0.7.74 — 2026-10-08
 
 ### Added

package/README.md

@@ -205,6 +205,10 @@ the card is the material, the sheet is what it is in the stack.
   front one too, peeks at the stack's bottom; the headroom above is the base's.
   An optional `<div class="sheet-stack__base">` — written AFTER the sheets, so
   it takes no sheet slot — is what the base shows there, behind every sheet.
+  Loose things in it rest against the heads, with the same room under the
+  last one as between two of them (`--stack-base-gap`); one `Page` reads from
+  the top, one `Centre` stands in the middle. A card standing there is flat:
+  the base clips at its edges, so a shadow would end in a straight line.
   A tap, or a pull up, opens any sheet over it. The open title or its back
   button, tapped or pulled down, drops it home. A pull down in the open
   content, already at the top, asks `onRefresh` — omit it and that pull only
@@ -239,16 +243,16 @@ of `Screen`:
 |---|---|---|
 | **top** | `top` | `TopBar` · `AppBar` · `"lead"` (no bar: the content starts `--screen-lead`, 15% of the screen, down) |
 | **content** | children | a `Step` (`Pages` · `Page` · `Page` + `Sheet`) · `Centre` · `SheetStack` … |
-| **bottom** | `bottom` | `ActionBar` (rows: `controls` · the one `cta` row — the pager ← → or one wide button · a `ctaLink`) · `FloatBar` · nothing |
+| **bottom** | `bottom` | `ActionBar` (rows: `controls` · the one `cta` row — the pager bar ← → or one wide button · a `ctaLink`) · `FloatBar` · nothing |
 
 ```tsx
 <Screen fill top="lead" bottom={<ActionBar variant="pager">…</ActionBar>}>
-  <Step><Pages>…</Pages><PagerAt at={1} of={3} /></Step>
+  <Step><Pages>…</Pages><Pager at={1} of={3} /></Step>
 </Screen>
 ```
 
 - **Top and content are one flex column; the bottom is a LAYER** (Lh 2026-09-23). In `Screen fill` the content runs to the
-  screen's bottom edge; the bottom (`ActionBar`, with the walk's `PagerAt` as its first row) lies over it at the foot and
+  screen's bottom edge; the bottom (`ActionBar`, with the walk's `Pager` as its first row) lies over it at the foot and
   covers what is under it — on purpose, nothing is added to the content to make room. The keyboard lifts the layer (`--kb`).
 - **The bar is INSIDE the screen** — `bottom`, never a sibling after `</Screen>`, never pinned with a hand-set `position`.
   A `FloatBar` in `bottom` floats the same way.
@@ -339,7 +343,7 @@ whose markup has rules, because the sheet's box is the step itself:
   needs to: the body's bottom padding is the part that slid under (`--_cover`), so the last row comes up to
   the button at half and 3q as it does at full.
 - **Layers: the base, the sheet over it, the top bar** (Lh 2026-09-20). The `.action-bar` belongs to the
-  BASE — the move of a page of words (a pager, or one wide button). It is never in front of a sheet. A
+  BASE — the move of a page of words (a pager bar, or one wide button). It is never in front of a sheet. A
   screen with a sheet finishes ON the sheet: a `.card__foot`, the sheet's last child — ONE row, the page's
   conclusion. The foot stands on the screen's bottom edge at half, 3q and full alike (a layer as tall as
   the sheet, slid up by the share the sheet slid down — `sheet.css`), and is gone at peek. Nothing inside
@@ -404,19 +408,19 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
   above the centre (2 × (40% − the title bar)): a card taller than that is
   not a centred card — it is a plain scrolling `.screen` (the detail view).
 - **A small group at the same centre** — an empty state; a card with its quiet
-  second button and the pager dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
+  second button and the `Pager` dots under it — is `.screen__centre` (React: `Centre`), a block in the fill
   screen after the topbar. Same placement and cap; it runs edge to edge with
   the inset as padding, and stacks its children at the
   screen's gap. Never hand-lay `top: 40%` on a screen.
 - **The bar is the screen's bottom.** Plain `.action-bar` for one move; with a
   control that belongs to the screen (a slider), `.action-bar--tiers` stacks a
   control tier above the buttons (it publishes the taller `--bar-reserve` the centred card still reads for its cap).
-- **The round pager** is `.action-bar--pager` (or an `.action-bar__tier--pager`)
+- **The round pager bar** is `.action-bar--pager` (or an `.action-bar__tier--pager`)
   holding two `.icon-btn`s and nothing else: they stand at the two edges. The
   step that commits still goes back to one wide button (rule 3).
 - **Page that moves** (Lh 2026-09-20) — two ways, never both on one screen:
   - *Pages of words:* `.step > .pages > .page` (one `aria-current="step"`, the rest `inert`) — every page
-    one height, the round pager turns them (`slideTo()`), the words slide like a page. No sheet there.
+    one height, the round pager bar turns them (`slideTo()`), the words slide like a page. No sheet there.
     ONE SCREEN TO THE NEXT (a route change) slides the WHOLE screen the same way: `slideScreen(() => navigate(to), 'next' | 'back')`,
     and `installScreenSlide()` once at app start for the back button (story `Step · WalksOn`). `data-slide="off"` on a Screen = no slide.
     ONE OUTCOME, DRAWN ONCE (Lh 2026-10-01): a screen that can come out more than one way (signed in or not, a list or
@@ -449,7 +453,7 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     it scroll clear.
     **Never a form taken apart** — one sheet per field, a "send" left on the base: a form lives whole in ONE sheet.
     Fixture `tests/fixtures/calls.html`, tests `tests/calls.spec.js`, stories `Step · Walks` / `Step · Calls`.
-- **A pager turns pages of words, never a screen with a sheet** (Lh 2026-09-20). A
+- **A pager bar turns pages of words, never a screen with a sheet** (Lh 2026-09-20). A
   sheet means this screen has work that cannot be walked past: no ← →, no bar at all — the sheet's
   own foot finishes it. (Guidance — not enforced.)
 - A screen is **top · content · bottom** on the base (*Screen: top · content · bottom*). The base is the
@@ -476,6 +480,17 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     `<Card heading caption end foot footLink>` with the content as children —
     the card writes the order (head first, foot last). A head of its own shape
     is a `<CardHead>` child instead; never both (Lh 2026-09-27).
+  - **A card that goes on is pressed whole** (Lh 2026-10-09). A card whose ONLY
+    control is its foot's button, or the end button of a row card, is pressed
+    anywhere: a touch off the button runs that button's own action once, and the
+    whole card dims under the finger (`.card--go`, the card-wide press answer of
+    a row or a card link). `Card` does it by itself — the app wires the button
+    and nothing else, and there is no prop to turn it off. The keyboard and a
+    screen reader meet the button only. Every other card is only read: two or
+    more controls anywhere in it (a field, a choice, a nested card's button),
+    the one button in the head or in the content, a disabled button, a sheet, a
+    stack's sheet, a modal. A card that is itself a link or a label was pressed
+    whole already. Story `Card · PressedWhole`.
 - A 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
@@ -700,7 +715,7 @@ question and hunts for its answer. Rules 11–13 serve that:
     not filled with more content; a new edge is made instead (line the buttons
     up with the avatar).
 12. **Show, don't explain.** Where a known picture carries it — an avatar for a
-    person, an icon, a `Ring`/`Track`/`Band`, a `Chip` for a category — use it
+    person, an icon, a `Ring`/`Track`/`NumberBand`, a `Chip` for a category — use it
     instead of words. Never add a label, a caption line, a comparison or a
     tooltip to explain what the picture already says (the retired overline was
     that mistake). Long lists are differentiated, not spaced out: group them

package/css/actions.css

@@ -361,7 +361,10 @@
    press). Two answers, by size: GIVE — a control the size of a finger shrinks under it (--press-scale) and springs back; DIM —
    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. */
+   pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here.
+   .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. */
 :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) {
@@ -369,7 +372,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, .toggle-field, .post-box__edge) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -384,7 +387,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, .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, .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) */

package/css/layover.css

@@ -79,7 +79,7 @@
   --accent: var(--card-ink);
   --on-accent: var(--card-bg);
 }
-/* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
+/* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */

package/css/lists.css

@@ -201,7 +201,7 @@
 .link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
 .link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
-.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a WaitLink counting down) */
+.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a Countdown) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
 

package/css/stack.css

@@ -280,9 +280,10 @@
   z-index: 0;
   height: var(--_headroom, 0px);
   padding-inline: var(--screen-pad);
+  --_gap: var(--card-gap, var(--sp-5));
   display: grid;
   align-content: end;
-  gap: var(--card-gap, var(--sp-5));
+  gap: var(--stack-base-gap, var(--_gap));
   overflow: hidden;
   overscroll-behavior: none;
   touch-action: none;
@@ -295,6 +296,12 @@
    (Lh 2026-10-06). The base already keeps the screen's inset, so the centre block gives its own back. */
 .sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
 .sheet-stack__base > .screen__centre { padding-inline: 0; }
+/* loose things rest against the peeks, so the room under the last one is the room between two of them (Lh 2026-10-09: a card's
+   bottom edge lay on the first sheet's top edge). A lone Page reads from the top and a lone Centre stands in the middle: neither rests there. */
+.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) { padding-bottom: var(--stack-base-gap, var(--_gap)); }
+/* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
+   line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
+:is([data-palette], [data-finish="lit"]) .sheet-stack__base .card { box-shadow: none; }
 
 /* ============================================================
    .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen

package/dist/actions/{ActionNote.d.ts → BarNote.d.ts}

@@ -1,11 +1,11 @@
 import type { ComponentProps } from 'react';
-export interface ActionNoteProps extends ComponentProps<'div'> {
+export interface BarNoteProps extends ComponentProps<'div'> {
 }
 /**
- * ActionNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
+ * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
  * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
  * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
-export declare function ActionNote({ className, children, ...rest }: ActionNoteProps): import("react").JSX.Element;
+export declare function BarNote({ className, children, ...rest }: BarNoteProps): import("react").JSX.Element;

package/dist/actions/{ActionNote.js → BarNote.js}

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /**
- * ActionNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
+ * BarNote — the words that stand WHERE THE MAIN BUTTON WOULD BE when there is nothing to press: a block exactly the main button's
  * size (full width, `--btn-h` tall), lying on the ground — no fill, no border, no rounding — holding one line of muted words, an
  * inline `Icon` allowed ("กดที่ <Icon name="share" /> ด้านล่างนี้" — the member does the thing elsewhere). It does nothing on a tap.
  * A member of the BOTTOM: a `CardFoot`'s row or an `ActionBar`'s, in place of the button, never beside one; a `link` still goes under
  * it (CardFoot `link`, ActionBar `ctaLink`). One fixed shape — never styled per use (Lh 2026-09-24).
  */
-export function ActionNote({ className, children, ...rest }) {
+export function BarNote({ className, children, ...rest }) {
     return _jsx("div", { role: "note", className: cx('action-note', className), ...rest, children: _jsx("span", { className: "action-note__words", children: children }) });
 }

package/dist/actions/BtnGroup.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+export interface BtnGroupProps extends ComponentProps<'div'> {
+}
+/** BtnGroup — a panel of buttons, one on at a time (a tab strip, a day picker): its items share the width; children are BtnGroupItems. */
+export declare function BtnGroup({ className, ...rest }: BtnGroupProps): import("react").JSX.Element;
+export interface BtnGroupItemProps extends ComponentProps<'button'> {
+    /** the selected tab (filled) */
+    selected?: boolean;
+}
+/** BtnGroupItem — one tab in a BtnGroup. */
+export declare function BtnGroupItem({ selected, className, ...rest }: BtnGroupItemProps): import("react").JSX.Element;

package/dist/actions/{Segment.js → BtnGroup.js}

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** Segment — a tab strip / day picker whose items share the width; children are SegmentItems. */
-export function Segment({ className, ...rest }) {
+/** BtnGroup — a panel of buttons, one on at a time (a tab strip, a day picker): its items share the width; children are BtnGroupItems. */
+export function BtnGroup({ className, ...rest }) {
     return _jsx("div", { className: cx('segment', className), role: "tablist", ...rest });
 }
-/** SegmentItem — one tab in a Segment. */
-export function SegmentItem({ selected, className, ...rest }) {
+/** BtnGroupItem — one tab in a BtnGroup. */
+export function BtnGroupItem({ selected, className, ...rest }) {
     return _jsx("button", { type: "button", role: "tab", "aria-selected": selected ? 'true' : undefined, className: cx('segment__item', className), ...rest });
 }

package/dist/actions/{WaitLink.d.ts → Countdown.d.ts}

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import { type LinkProps } from './Link.js';
-export interface WaitLinkProps extends Omit<LinkProps, 'href'> {
+export interface CountdownProps extends Omit<LinkProps, 'href'> {
     /** CONTROLLED: when it may be pressed again (a time in ms, `Date.now()` based). Before that it counts down and takes no taps;
      *  null / past = ready. The APP owns the rule — 30 s, +30 s each time — and sets a new `until` in its onClick. */
     until?: number | null;
@@ -8,7 +8,7 @@ export interface WaitLinkProps extends Omit<LinkProps, 'href'> {
     waiting?: (left: string) => ReactNode;
 }
 /**
- * WaitLink — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
+ * Countdown — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
  * A link, not a button: it is the step's second way, under its control; in a SheetStep it stands centred on its own row.
  */
-export declare function WaitLink({ until, waiting, children, className, disabled, ...rest }: WaitLinkProps): import("react").JSX.Element;
+export declare function Countdown({ until, waiting, children, className, disabled, ...rest }: CountdownProps): import("react").JSX.Element;

package/dist/actions/{WaitLink.js → Countdown.js}

@@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
 import { cx } from '../cx.js';
 import { Link } from './Link.js';
 /**
- * WaitLink — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
+ * Countdown — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
  * A link, not a button: it is the step's second way, under its control; in a SheetStep it stands centred on its own row.
  */
-export function WaitLink({ until, waiting, children, className, disabled, ...rest }) {
+export function Countdown({ until, waiting, children, className, disabled, ...rest }) {
     const [now, setNow] = useState(() => Date.now());
     const left = until != null ? Math.ceil((until - now) / 1000) : 0;
     useEffect(() => {

package/dist/actions/Link.d.ts

@@ -9,12 +9,12 @@ export interface LinkProps extends ComponentProps<'a'> {
     sm?: boolean;
     /** without an href it renders as a button */
     href?: string;
-    /** a button link that takes no taps now (reads inactive: muted) — `WaitLink` while it counts down */
+    /** a button link that takes no taps now (reads inactive: muted) — `Countdown` while it counts down */
     disabled?: boolean;
 }
 /** Link — an inline text action big enough to tap (40px): "See all ↗" in a card head, "Skip" between pager buttons. */
 export declare function Link({ muted, sm, icon, href, className, children, ...rest }: LinkProps): import("react").DetailedReactHTMLElement<{
-    /** a button link that takes no taps now (reads inactive: muted) — `WaitLink` while it counts down */
+    /** a button link that takes no taps now (reads inactive: muted) — `Countdown` while it counts down */
     disabled?: boolean;
     ref?: import("react").Ref<HTMLAnchorElement> | undefined;
     key?: import("react").Key | null | undefined;

package/dist/cardds.css

@@ -1304,9 +1304,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   z-index: 0;
   height: var(--_headroom, 0px);
   padding-inline: var(--screen-pad);
+  --_gap: var(--card-gap, var(--sp-5));
   display: grid;
   align-content: end;
-  gap: var(--card-gap, var(--sp-5));
+  gap: var(--stack-base-gap, var(--_gap));
   overflow: hidden;
   overscroll-behavior: none;
   touch-action: none;
@@ -1319,6 +1320,12 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    (Lh 2026-10-06). The base already keeps the screen's inset, so the centre block gives its own back. */
 .sheet-stack__base:has(> .screen__centre:only-child) { align-content: center; }
 .sheet-stack__base > .screen__centre { padding-inline: 0; }
+/* loose things rest against the peeks, so the room under the last one is the room between two of them (Lh 2026-10-09: a card's
+   bottom edge lay on the first sheet's top edge). A lone Page reads from the top and a lone Centre stands in the middle: neither rests there. */
+.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) { padding-bottom: var(--stack-base-gap, var(--_gap)); }
+/* a card standing in this room is FLAT (Lh 2026-10-09): the room clips at its own edges, and a card's shadow cut there drew a straight
+   line under the bar and along the first sheet. Its ground and its radius are what say "card" here. */
+:is([data-palette], [data-finish="lit"]) .sheet-stack__base .card { box-shadow: none; }
 
 /* ============================================================
    .sheet-stack--flood — a closed stack whose open sheet FLOODS the screen: it rises over the top bar and fills the whole screen
@@ -2720,7 +2727,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    press). Two answers, by size: GIVE — a control the size of a finger shrinks under it (--press-scale) and springs back; DIM —
    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. */
+   pointer, no press, --off. Zero specificity everywhere: a component's own rule always wins. A NEW control joins a list here.
+   .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. */
 :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) {
@@ -2728,7 +2738,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, .toggle-field, .post-box__edge) {
+:where(a.row, button.row, label.row, .row-expand > summary, .banner__summary, a.card, label.card, .card--go, .toggle-field, .post-box__edge) {
   cursor: pointer;
   touch-action: manipulation;
   transition: opacity var(--motion-press) ease-out;
@@ -2743,7 +2753,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, .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, .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) */
@@ -3662,7 +3672,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
 .link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
-.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a WaitLink counting down) */
+.link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a Countdown) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
 
@@ -4785,7 +4795,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   --accent: var(--card-ink);
   --on-accent: var(--card-bg);
 }
-/* the CONFIRM: a Modal with no Lift — the drawer IS the card, as tall as its words (no fixed band, no second beat) */
+/* the CONFIRM: a Modal with no ModalBody: the ModalAsk IS the card, as tall as its words (no fixed band, no second beat) */
 .modal:not(:has(> .modal__lift)) > .modal__drawer { height: auto; padding-block: var(--modal-confirm-pad-y, var(--sp-6)); animation: none; }
 .modal__drawer .t-caption { opacity: var(--dim); }
 .modal__drawer > h2:focus { outline: none; } /* the question takes the cursor when the modal arrives (for a screen reader, the keyboard's way in) — it is not a control: no ring */

package/dist/cards/Card.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type ReactNode } from 'react';
+import { type ComponentProps, type MouseEvent, type ReactNode } from 'react';
 import { type CardHeadProps } from './CardHead.js';
 import { type StackPlace } from '../sheets/stackCard.js';
 export type { StackPlace };
@@ -19,7 +19,7 @@ export interface CardProps extends ComponentProps<'article'> {
     fold?: boolean;
     /** one card at the human centre of a `Screen fill` (the introduction screens) */
     centre?: boolean;
-    /** a data band: label · giant number · footnote — see Band */
+    /** a data band: label · giant number · footnote — see NumberBand */
     band?: boolean;
     /** the element: article (default), a when it links, label when it wraps an input, div/section */
     as?: 'article' | 'div' | 'a' | 'label' | 'section' | 'li';
@@ -47,9 +47,11 @@ export interface CardProps extends ComponentProps<'article'> {
  * (its CardFoot last); the children are the content between them (frameless rows, kv, a ring, a paragraph — never a second card
  * boundary). The order is the card's, never the writer's. A head of its own shape: write `<CardHead>` as the first child instead.
  * A page with one feature and one CTA may be a single card. Keep everything big.
+ * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
+ * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
  */
 export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, stack, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
-    onClick: import("react").MouseEventHandler<HTMLElement> | undefined;
+    onClick: (e: MouseEvent<HTMLElement>) => void;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
     ref: (node: HTMLElement | null) => void;
     className: string;

package/dist/cards/Card.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createElement, isValidElement, useRef } from 'react';
+import { Children, createElement, isValidElement, useLayoutEffect, useRef, useState } from 'react';
 import { cx } from '../cx.js';
 import { warnOnce } from '../state.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
+import { goControl } from './cardGo.js';
 import { StackHeadCtx, StackPullCtx, stackPaint, useStackCard } from '../sheets/stackCard.js';
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
@@ -11,6 +12,8 @@ import { StackHeadCtx, StackPullCtx, stackPaint, useStackCard } from '../sheets/
  * (its CardFoot last); the children are the content between them (frameless rows, kv, a ring, a paragraph — never a second card
  * boundary). The order is the card's, never the writer's. A head of its own shape: write `<CardHead>` as the first child instead.
  * A page with one feature and one CTA may be a single card. Keep everything big.
+ * PRESSED WHOLE: a card whose ONLY control is its foot's button, or a row card's end button, is pressed anywhere — a touch off the
+ * button runs that button's own action once, and the card dims under the finger. The app writes nothing; any other card is only read.
  */
 export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, stack, className, style, children, onClick, ref, ...rest }) {
     const head = heading != null || caption != null || end != null;
@@ -34,11 +37,30 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         else if (passed)
             passed.current = node;
     };
+    const [go, setGo] = useState(false);
+    useLayoutEffect(() => { setGo(own.current != null && goControl(own.current) != null); }); // every render: what the card holds is its children's
+    const pressing = useRef(false);
     const click = (e) => {
+        if (pressing.current)
+            return; // the control's click, pressed from here, coming back up: the app's onClick has run for this press
         onClick?.(e);
+        const target = e.target;
+        const card = own.current;
+        if (!e.defaultPrevented && card?.contains(target)) {
+            const control = goControl(card);
+            if (control && !control.contains(target)) {
+                pressing.current = true;
+                try {
+                    control.click();
+                }
+                finally {
+                    pressing.current = false;
+                }
+                return;
+            }
+        }
         if (!stack || e.defaultPrevented || swallow.current)
             return;
-        const target = e.target;
         if (target.closest('.sheet-stack__back')) {
             stack.onClose();
             return;
@@ -54,10 +76,10 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
     const props = {
         ...rest,
         ref: setRef,
-        className: cx('card', tone && tone !== 1 && `card--${tone}`, paper && 'sheet--paper', sm && 'card--sm', row && 'card--row', cover && 'card--cover', fold && 'card--fold', centre && 'card--centre', band && 'card--band', painted.className, className),
+        className: cx('card', tone && tone !== 1 && `card--${tone}`, paper && 'sheet--paper', sm && 'card--sm', row && 'card--row', cover && 'card--cover', fold && 'card--fold', centre && 'card--centre', band && 'card--band', go && 'card--go', painted.className, className),
         style: painted.style || style ? { ...painted.style, ...style } : undefined,
         ...(stack ? { 'aria-busy': painted.busy } : {}),
-        onClick: stack ? click : onClick,
+        onClick: click,
     };
     if (!head && !tail)
         return createElement(as, props, inner(children));

package/dist/cards/CardParts.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 export interface CardMediaProps extends ComponentProps<'div'> {
 }
-/** CardMedia — rounded media inside a card (a Placeholder or img); a corner TileBadge pins to it. */
+/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
 export declare function CardMedia({ className, ...rest }: CardMediaProps): import("react").JSX.Element;
 export interface CardBodyProps extends ComponentProps<'div'> {
 }

package/dist/cards/CardParts.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** CardMedia — rounded media inside a card (a Placeholder or img); a corner TileBadge pins to it. */
+/** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
 export function CardMedia({ className, ...rest }) {
     return _jsx("div", { className: cx('card__media', className), ...rest });
 }

package/dist/cards/cardGo.d.ts

@@ -0,0 +1,2 @@
+/** the control this card presses when it is touched off that control, or null: the card is only read */
+export declare function goControl(card: HTMLElement): HTMLElement | null;

package/dist/cards/cardGo.js

@@ -0,0 +1,27 @@
+/* THE RULE (Lh 2026-10-09): a card that holds exactly ONE control, standing where the card's own move sits (its foot, or the end of a
+   row card), is pressed whole — a touch anywhere on it is a press on that control. Asked by `Card` only, once for the class it
+   renders and once, fresh, for each click. */
+/** everything a member presses, types in or drags. One more of these anywhere in the card (a nested card's too) and the card is only read */
+const CONTROLS = [
+    'button', 'a[href]', 'input:not([type=hidden])', 'textarea', 'select', 'summary',
+    '[role=button]', '[role=link]', '[role=tab]', '[role=radio]', '[role=checkbox]', '[role=switch]', '[role=slider]', '[role=menuitem]',
+    '[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';
+/** 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);
+    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 atRowEnd = card.matches('.card--row') && card.lastElementChild === control;
+    return inFoot || atRowEnd ? control : null;
+}