@usableapp/cardds 0.7.75 → 0.7.76

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 > 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)

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
@@ -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

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/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/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) */

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 };
@@ -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/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;
+}