@usableapp/cardds 0.7.77 → 0.7.78

package/CHANGELOG.md

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

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

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

@@ -309,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/dist/cardds.css

@@ -995,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 */
@@ -2737,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. */
@@ -2747,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;
@@ -2762,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) */
@@ -2773,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,

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;
 }