@usableapp/cardds 0.7.78 → 0.7.80

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 > 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.80 — 2026-10-10
+
+### Changed
+- **`Btn form` keeps its own width in a card's foot** (Lh 2026-10-10, from timebank's home feed: one button filling the card's foot read too big) — before → after: any `Btn` in `CardFoot` / `Card foot` / `FeedCard foot` was stretched over the row, `form` included → a `Btn form` there is as wide as its words (with its wide sides) and centred; a plain `Btn` still fills the foot, and several still share it. The card is still pressed whole. To use it: `foot={<Btn primary form>…</Btn>}`. Which button a card wears is the project's choice. Story `CardFoot · CardFootWordsWide`.
+- **The catalog knows the functions an app calls, and the MCP server serves it as it is now** (Lh 2026-10-10) — before → after: `list_components` / `get_component` / `find_components` did not know `slideScreen`, `installScreenSlide`, `setWords`, `word`, `setTextScale`, `controlsFor` (they live in `.ts` files the catalog did not read) → all six are in, with their docs. And a `cardds mcp` server loaded the catalog once and kept it for the life of its session, so a session opened before a release never learned what the release added → it now loads again whenever the sources (a live repo) or the package's catalog file changed. A session whose server was started before this change must be restarted once to get the new server.
+
+## 0.7.79 — 2026-10-10
+
+### Changed
+- **A closed stack's base too short for what rests in it scrolls** (Lh 2026-10-10) — before → after: loose things in `SheetStack base` / `Home base` stood on the heads, so on a short phone a content taller than the room ran out over the room's top, cut, and nothing scrolled (two feed cards at 320×568) → nothing is squeezed, the upper thing shows whole from the room's top, the rest lies under the sheet heads, and the member scrolls the room up until the last thing stands clear of the heads by `--stack-base-gap`. A base that holds its content is unchanged, to the pixel, and still takes no scroll and no pull. One `Page` and one `Centre` in a base are unchanged. Nothing to do in an app; a base no longer needs its own short-phone layout.
+- **`FeedCard foot` takes more than one button** — one button: the big card is pressed whole, as before. Two or more (a question: yes · no): only the buttons act. Small, the card hides them all. Story `CardFeed · Question`.
+
 ## 0.7.78 — 2026-10-10
 
 ### Added

package/README.md

@@ -83,7 +83,7 @@ lets anyone on the same network open the dev server: use it on a network you tru
 ### In another project
 
 **React (the main way, 2026-09-16):** the package is `@usableapp/cardds` on npm
-(published from a `v*` tag by `.github/workflows/publish.yml`, trusted publishing).
+(published from this machine: `npm run release` sends every `v*` tag the registry lacks, oldest first).
 
 ```bash
 npm i @usableapp/cardds
@@ -209,6 +209,13 @@ the card is the material, the sheet is what it is in the stack.
   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 room too short for the loose things in it squeezes nothing: the upper
+  thing shows whole from the room's top, the rest lies under the heads, and
+  the room scrolls up until the last thing stands clear of the heads by
+  `--stack-base-gap`. `SheetStack` measures this and renders `is-long` on the
+  base; only then does the base scroll and run under the first sheet's round
+  corners. A room that holds its content does not scroll, and a finger on it
+  moves nothing.
   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
@@ -511,7 +518,8 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
     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
+    sizes) · `tone` · `foot` (one `Btn`: the big card is pressed whole; two
+    or more: only the buttons act) · 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`.

package/bin/cardds.mjs

@@ -72,8 +72,9 @@ import them, never copy their markup: the behaviour lives in the component. Gall
   return 0;
 }
 
-// the exports beside the components that are not components (docs/roles.md rows `a function, not a component`…): shape `—` and nothing to tell them from a structural part, so they are named
-const HELPERS = new Set(['applyMask', 'slideTo', 'useLayer', 'useLayers', 'useOptionalLayer', 'registerIcons', 'LayerHistory']);
+// the exports beside the components that are not components (docs/roles.md rows `a function, not a component`…): shape `—` and nothing to tell them from a structural part, so they are named.
+// A new one joins here and in the list test of tests/catalog.spec.js, or it is listed as structure
+const HELPERS = new Set(['applyMask', 'slideTo', 'slideScreen', 'installScreenSlide', 'useLayer', 'useLayers', 'useOptionalLayer', 'registerIcons', 'LayerHistory', 'setWords', 'word', 'setTextScale', 'controlsFor']);
 const one = (text) => text.replace(/\s+/g, ' ').trim();
 const indent = (text, by = '    ') => text.replace(/^(?=.)/gm, by);
 

package/css/base.css

@@ -70,8 +70,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* scrollbar hidden, scroll kept: the track scrolls by touch/drag, never by a visible bar —
    .bleed (card.css) is the one exception, its bar is designed, not hidden */
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
 
 /* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
 .icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; }

package/css/card.css

@@ -136,6 +136,9 @@
    three on they drop their side padding so the labels keep the room. */
 .card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
+/* …unless the button says its own size: `Btn form` is as wide as its words in a foot too, centred (Lh 2026-10-10: one button filling
+   a card's foot read too big — which button a card wears is the project's choice, so the foot must not undo it) */
+.card__foot > .btn--form { flex: 0 1 auto; }
 .card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
 /* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
    whole short row of its own, centred — it never shares the buttons' line */

package/css/stack.css

@@ -278,7 +278,8 @@
   grid-area: 1 / 1;
   align-self: start;
   z-index: 0;
-  height: var(--_headroom, 0px);
+  --_under: 0px;
+  height: calc(var(--_headroom, 0px) + var(--_under));
   padding-inline: var(--screen-pad);
   --_gap: var(--card-gap, var(--sp-5));
   display: grid;
@@ -298,7 +299,26 @@
 .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)); }
+.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  padding-bottom: calc(var(--stack-base-gap, var(--_gap)) + var(--_under));
+  /* the first row takes the free room and its thing stands at that row's end: on the peeks while there is room, from the room's TOP when
+     there is none. `align-content: end` ran a long content out over the top, where no scroll reaches; the `safe` keyword is not relied
+     on, the floor is Safari 16.4. */
+  grid-template-rows: 1fr;
+  align-content: start;
+  align-items: end;
+}
+/* a room too short for what rests in it (Lh 2026-10-10; `is-long`, measured and rendered by SheetStack): nothing is squeezed, the upper
+   thing shows whole, the rest lies under the sheets and the room scrolls up to it. Only then: a room that holds its content keeps
+   touch-action: none, so a finger there pulls nothing. The box runs under the first sheet by its corner's radius, or a straight cut at
+   the sheet's top edge would show ground in the two round corners; the padding grows by the same, so the last thing still scrolls
+   clear of the heads by the gap, and the content box (cqh) is the one it was. */
+.sheet-stack__base.is-long:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  --_under: var(--card-radius, var(--r-card));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+}
 /* 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; }
@@ -333,7 +353,7 @@
 .sheet-stack--flood { --_bar: calc(var(--top-h, var(--header-h)) + var(--_bar-gap)); }
 .sheet-stack--flood > .sheet-stack__base {
   margin-top: var(--_bar);
-  height: calc(var(--_headroom, 0px) - var(--_bar));
+  height: calc(var(--_headroom, 0px) - var(--_bar) + var(--_under));
 }
 .screen--fill:has(> .sheet-stack--flood > .stack-card.is-open, > .sheet-stack--flood > :not(.stack-card) > .stack-card.is-open) > :is(.appbar, .topbar):first-child {
   visibility: hidden;

package/dist/actions/Btn.d.ts

@@ -7,7 +7,8 @@ export interface BtnProps extends Omit<ComponentProps<'button'>, 'form'> {
     /** full width */
     block?: boolean;
     /** a form's button: sized to its words with wide side padding, centred on its own row — it reads as part of the form above it,
-     *  not a page CTA (Lh 2026-09-25). Replaces the native `form` attribute (a button outside its <form> — not a cardds pattern). */
+     *  not a page CTA (Lh 2026-09-25). In a card's foot (`CardFoot`, `Card foot`, `FeedCard foot`) it keeps that size instead of
+     *  filling the row. Replaces the native `form` attribute (a button outside its <form> — not a cardds pattern). */
     form?: boolean;
     /** the one giant call to action in a tinted card ("Taxi!") */
     xl?: boolean;

package/dist/cardds.css

@@ -540,8 +540,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* scrollbar hidden, scroll kept: the track scrolls by touch/drag, never by a visible bar —
    .bleed (card.css) is the one exception, its bar is designed, not hidden */
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
-:where(html, .sheet-stack--tap > .card, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick) { scrollbar-width: none; }
+:where(html, .sheet-stack--tap > .card, .sheet-stack__base, .step > .pages, .picker__rail, .avatar-pick)::-webkit-scrollbar { display: none; }
 
 /* icon from icons.svg sprite: <svg class="icon"><use href="icons.svg#bell"/></svg> */
 .icon { width: var(--icon-size, var(--icon)); height: var(--icon-size, var(--icon)); flex: none; }
@@ -822,6 +822,9 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
    three on they drop their side padding so the labels keep the room. */
 .card__foot { display: flex; gap: var(--card-foot-gap, var(--sp-2)); align-items: center; }
 .card__foot > .btn { flex: 1 1 0; min-width: 0; }
+/* …unless the button says its own size: `Btn form` is as wide as its words in a foot too, centred (Lh 2026-10-10: one button filling
+   a card's foot read too big — which button a card wears is the project's choice, so the foot must not undo it) */
+.card__foot > .btn--form { flex: 0 1 auto; }
 .card__foot:has(> :nth-child(3)) > .btn { padding-inline: var(--sp-2); }
 /* a small link under the buttons (CardFoot link — Lh 2026-09-23, as the ActionBar's ctaLink): the row wraps, the link takes a
    whole short row of its own, centred — it never shares the buttons' line */
@@ -1341,7 +1344,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   grid-area: 1 / 1;
   align-self: start;
   z-index: 0;
-  height: var(--_headroom, 0px);
+  --_under: 0px;
+  height: calc(var(--_headroom, 0px) + var(--_under));
   padding-inline: var(--screen-pad);
   --_gap: var(--card-gap, var(--sp-5));
   display: grid;
@@ -1361,7 +1365,26 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .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)); }
+.sheet-stack__base:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  padding-bottom: calc(var(--stack-base-gap, var(--_gap)) + var(--_under));
+  /* the first row takes the free room and its thing stands at that row's end: on the peeks while there is room, from the room's TOP when
+     there is none. `align-content: end` ran a long content out over the top, where no scroll reaches; the `safe` keyword is not relied
+     on, the floor is Safari 16.4. */
+  grid-template-rows: 1fr;
+  align-content: start;
+  align-items: end;
+}
+/* a room too short for what rests in it (Lh 2026-10-10; `is-long`, measured and rendered by SheetStack): nothing is squeezed, the upper
+   thing shows whole, the rest lies under the sheets and the room scrolls up to it. Only then: a room that holds its content keeps
+   touch-action: none, so a finger there pulls nothing. The box runs under the first sheet by its corner's radius, or a straight cut at
+   the sheet's top edge would show ground in the two round corners; the padding grows by the same, so the last thing still scrolls
+   clear of the heads by the gap, and the content box (cqh) is the one it was. */
+.sheet-stack__base.is-long:not(:has(> .page:only-child, > .screen__centre:only-child)) {
+  --_under: var(--card-radius, var(--r-card));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+}
 /* 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; }
@@ -1396,7 +1419,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-stack--flood { --_bar: calc(var(--top-h, var(--header-h)) + var(--_bar-gap)); }
 .sheet-stack--flood > .sheet-stack__base {
   margin-top: var(--_bar);
-  height: calc(var(--_headroom, 0px) - var(--_bar));
+  height: calc(var(--_headroom, 0px) - var(--_bar) + var(--_under));
 }
 .screen--fill:has(> .sheet-stack--flood > .stack-card.is-open, > .sheet-stack--flood > :not(.stack-card) > .stack-card.is-open) > :is(.appbar, .topbar):first-child {
   visibility: hidden;

package/dist/cards/CardFeed.d.ts

@@ -32,7 +32,7 @@ export interface FeedCardProps extends Omit<ComponentProps<'article'>, 'id' | 'r
     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 */
+    /** the card's button, or its buttons — shown only while the card is big. ONE `Btn`: the big card is pressed whole, a touch anywhere on it runs that button. Two or more (a question: yes · no): only the buttons act, a touch elsewhere on the card does nothing */
     foot?: ReactNode;
     /** the content — words, a picture, a Stamp. Shown only while the card is big */
     children?: ReactNode;
@@ -41,6 +41,6 @@ export interface FeedCardProps extends Omit<ComponentProps<'article'>, 'id' | 'r
  * 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.
+ * plain card: with one button in its foot it is pressed whole; with two or more only the buttons act.
  */
 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

@@ -74,7 +74,7 @@ const onSmallKey = (e) => {
  * 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.
+ * plain card: with one button in its foot it is pressed whole; with two or more only the buttons act.
  */
 export function FeedCard({ id, heading, caption, icon, tone, foot, className, children, onClick, onKeyDown, ref, ...rest }) {
     const feed = useContext(FeedCtx);

package/dist/cards/CardFoot.d.ts

@@ -5,5 +5,6 @@ export interface CardFootProps extends ComponentProps<'div'> {
     link?: ReactNode;
 }
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
- *  link goes in `link`, under it. */
+ *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
+ *  should not fill the card. */
 export declare function CardFoot({ link, className, children, ...rest }: CardFootProps): import("react").JSX.Element;

package/dist/cards/CardFoot.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
 /** CardFoot — the card's action buttons on one line: one takes the width, up to four share it evenly. Btns only in the row; a small
- *  link goes in `link`, under it. */
+ *  link goes in `link`, under it. A `Btn form` keeps its own size here: as wide as its words, centred — for a foot whose one button
+ *  should not fill the card. */
 export function CardFoot({ link, className, children, ...rest }) {
     return (_jsxs("div", { className: cx('card__foot', link != null && 'card__foot--link', className), ...rest, children: [children, link != null && _jsx("div", { className: "card__foot-link", children: link })] }));
 }