@usableapp/cardds 0.7.100 → 0.7.101

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 > 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. Each release section after 0.7.97 carries one `Components:` line, written by `node scripts/components-changed.mjs <previous tag>`: the components the release changed, or `all` when a file changed that any component can read (a token, the build), or `none`; check only the screens that import those.
 
+## 0.7.101 — 2026-10-19
+
+A list that keeps only a few past entries in sight, a cross that takes a row card off its list, and a postcard that keeps the caret where it was when its paper is full.
+
+Components: CallSheet, Card, CardBody, CardEnd, CardFeed, CardFoot, CardHead, CardList, CardMedia, CardThumb, Delta, FeedCard, Home, IconRow, NumberBand, NumberBandStack, Placeholder, PostDesk, PostDeskLine, Sheet, SheetStack, StackSheet, Stat, StatRow, Sticky, Walkthrough
+
+### Added
+- **`CardList show`: a short window of past entries that scrolls in itself** (Lh 2026-10-19, the past requests under a request form). Before → after: a `CardList` was as long as its rows and scrolled only with what held it, so a list of past requests under a form pushed the form's buttons away → `show={2.5}` keeps two whole rows and half of the third in sight (counted in rows, measured, so rows of any height work) and the rest scrolls inside the list. Knob `--card-list-window-pad` (the room inside the scroll box for the focus ring). Gallery `Card/CardListWindow`.
+- **`Card row onRemove` + `removeLabel`: a small cross at a row card's top right corner** that takes the row off its list. Smaller than a button (half `--tap-base`, 24, growing with the size of things), its touch target 44; a touch on it never picks the row, and a row card with only the cross is not pressed whole. The app removes the entry from its own list. Knobs `--card-remove-size` · `--card-remove-inset` · `--card-remove-ink` · `--card-remove-bg`.
+
+### Fixed
+- **`PostDesk` keeps the caret where it was when the paper refuses words** (the paper-is-full rule, now one with `Sticky`'s). Before → after: a line typed in the middle of a full message was refused but the caret jumped to the end of the message, and a Thai or Japanese composition that would not fit could slip in mid-composition → the addition is refused where it was typed, the caret stays, a composition that would not fit is put back whole when it ends (the app is told), `onMessageChange` never hears a refused input and `onFull` is still called. A `StickyField` on a `Sticky` now also refuses a same-length replacement that would overflow (it took it before). No prop, class or knob changes.
+
 ## 0.7.100 — 2026-10-19
 
 The check only (`cardds check` and the ESLint plugin); no component, prop, class or token changes. The line below reads `all` only because a script of the build changed (`scripts/ci.mjs`, the release's own check); no screen needs a new look.

package/css/card.css

@@ -302,6 +302,49 @@
 }
 .card--row .card__body { flex: 1; display: grid; gap: var(--sp-0); }
 
+/* ---- a short window of past entries (`CardList show`, Lh 2026-10-19): the list scrolls IN ITSELF, a few rows in sight and the next one cut
+   in half to say there is more. The height is counted in rows by the component (`--_card-list-h`, px: rows wrap to any height); the room
+   round the rows (`--card-list-window-pad`) keeps a picked row's focus ring and a card's shadow inside the scroll box, and the margin gives
+   that room back so the rows stand where an ordinary list's would. ---- */
+.card-list--window {
+  --_pad: var(--card-list-window-pad, var(--sp-2));
+  max-height: var(--_card-list-h, none);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  padding: var(--_pad);
+  margin: calc(-1 * var(--_pad));
+}
+
+/* ---- the cross that takes a row off the list (`Card row onRemove`): small, at the row's top right corner, inside it ----
+   <label class="card card--row"><input type="radio">…<div class="card__body">…</div><button class="card__remove" aria-label="Remove"><svg class="icon">x</svg></button></label>
+   Smaller than any button (a ring half a thing's size, `--tap-base` / 2 = 24) and it grows with the size of things; the touch target is an
+   unseen ring round it, never under --tap-floor (44). It stands in the row's flow, so the title wraps before it, tucked into the corner
+   by the row's own padding; it sits over the row's radio (which covers the whole card), so a touch on it removes and never picks. */
+.card__remove {
+  --_size: var(--card-remove-size, calc(var(--tap-base) / 2));
+  position: relative;
+  z-index: 1;
+  flex: none;
+  align-self: flex-start;
+  display: grid;
+  place-items: center;
+  width: var(--_size);
+  height: var(--_size);
+  margin-block-start: calc(var(--card-remove-inset, var(--sp-2)) - var(--card-row-pad, var(--sp-4)));
+  margin-inline-end: calc(var(--card-remove-inset, var(--sp-2)) - var(--card-row-pad, var(--sp-4)));
+  padding: 0;
+  border: var(--border-w) solid currentColor;
+  border-radius: 50%;
+  background: var(--card-remove-bg, transparent);
+  color: var(--card-remove-ink, currentColor);
+  font: inherit;
+  cursor: pointer;
+}
+.card__remove::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: max(var(--tap-floor), var(--_size)); aspect-ratio: 1; border-radius: 50%; }
+.card__remove > .icon { width: 62%; height: 62%; }
+.card__remove:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
+
 /* leading thumb/icon in a row */
 .card__thumb {
   width: var(--card-thumb-size, var(--tap-sm)); height: var(--card-thumb-size, var(--tap-sm));

package/dist/cardds.css

@@ -1008,6 +1008,49 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .card--row .card__body { flex: 1; display: grid; gap: var(--sp-0); }
 
+/* ---- a short window of past entries (`CardList show`, Lh 2026-10-19): the list scrolls IN ITSELF, a few rows in sight and the next one cut
+   in half to say there is more. The height is counted in rows by the component (`--_card-list-h`, px: rows wrap to any height); the room
+   round the rows (`--card-list-window-pad`) keeps a picked row's focus ring and a card's shadow inside the scroll box, and the margin gives
+   that room back so the rows stand where an ordinary list's would. ---- */
+.card-list--window {
+  --_pad: var(--card-list-window-pad, var(--sp-2));
+  max-height: var(--_card-list-h, none);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  padding: var(--_pad);
+  margin: calc(-1 * var(--_pad));
+}
+
+/* ---- the cross that takes a row off the list (`Card row onRemove`): small, at the row's top right corner, inside it ----
+   <label class="card card--row"><input type="radio">…<div class="card__body">…</div><button class="card__remove" aria-label="Remove"><svg class="icon">x</svg></button></label>
+   Smaller than any button (a ring half a thing's size, `--tap-base` / 2 = 24) and it grows with the size of things; the touch target is an
+   unseen ring round it, never under --tap-floor (44). It stands in the row's flow, so the title wraps before it, tucked into the corner
+   by the row's own padding; it sits over the row's radio (which covers the whole card), so a touch on it removes and never picks. */
+.card__remove {
+  --_size: var(--card-remove-size, calc(var(--tap-base) / 2));
+  position: relative;
+  z-index: 1;
+  flex: none;
+  align-self: flex-start;
+  display: grid;
+  place-items: center;
+  width: var(--_size);
+  height: var(--_size);
+  margin-block-start: calc(var(--card-remove-inset, var(--sp-2)) - var(--card-row-pad, var(--sp-4)));
+  margin-inline-end: calc(var(--card-remove-inset, var(--sp-2)) - var(--card-row-pad, var(--sp-4)));
+  padding: 0;
+  border: var(--border-w) solid currentColor;
+  border-radius: 50%;
+  background: var(--card-remove-bg, transparent);
+  color: var(--card-remove-ink, currentColor);
+  font: inherit;
+  cursor: pointer;
+}
+.card__remove::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: max(var(--tap-floor), var(--_size)); aspect-ratio: 1; border-radius: 50%; }
+.card__remove > .icon { width: 62%; height: 62%; }
+.card__remove:focus-visible { outline: var(--focus); outline-offset: var(--sp-0); }
+
 /* leading thumb/icon in a row */
 .card__thumb {
   width: var(--card-thumb-size, var(--tap-sm)); height: var(--card-thumb-size, var(--tap-sm));

package/dist/cards/Card.d.ts

@@ -49,6 +49,12 @@ export interface CardProps extends ComponentProps<'article'> {
     leave?: boolean;
     /** a card that was asked to `leave` HAS left (its motion ended; at once where motion is off, or when it has no motion) — the app does what follows: changes the page, closes. Once per leave */
     onLeft?: () => void;
+    /** a `row` card the member can take off its list: a small cross at the row's top right corner (smaller than a button, growing with the size of
+     *  things; its touch target stays 44). A touch on it calls this and never picks the row. The app takes the row out of its own list. Knobs
+     *  `--card-remove-size` · `--card-remove-inset` · `--card-remove-ink` · `--card-remove-bg` */
+    onRemove?: () => void;
+    /** the cross's spoken name (default: the words' `remove`) — name what goes: "Remove 'buy medicine'" */
+    removeLabel?: string;
 }
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
@@ -59,7 +65,7 @@ export interface CardProps extends ComponentProps<'article'> {
  * 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, leave, onLeft, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
+export declare function Card({ tone, paper, sm, row, cover, fold, centre, band, as, heading, caption, end, level, foot, footLink, stack, leave, onLeft, onRemove, removeLabel, className, style, children, onClick, ref, ...rest }: CardProps): import("react").DetailedReactHTMLElement<{
     onClick: (e: MouseEvent<HTMLElement>) => void;
     inert?: boolean | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;

package/dist/cards/Card.js

@@ -5,6 +5,8 @@ import { useLatest, warnOnce } from '../state.js';
 import { CardHead } from './CardHead.js';
 import { CardFoot } from './CardFoot.js';
 import { goControl } from './cardGo.js';
+import { Icon } from '../type/Icon.js';
+import { word } from '../words.js';
 import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '../sheets/stackCard.js';
 /**
  * Card — ONE boundary: head · content · foot. Cards are content the system offers (the words, the thing to read).
@@ -15,7 +17,9 @@ import { StackHeadCtx, StackPullCtx, ownHead, stackPaint, useStackCard } from '.
  * 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, leave, onLeft, className, style, children, onClick, ref, ...rest }) {
+export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'article', heading, caption, end, level, foot, footLink, stack, leave, onLeft, onRemove, removeLabel, className, style, children, onClick, ref, ...rest }) {
+    if (onRemove && !row)
+        warnOnce('card-remove-row', 'cardds Card: `onRemove` draws its cross on a `row` card only');
     const head = heading != null || caption != null || end != null;
     const tail = foot != null || footLink != null;
     if (head || tail) {
@@ -96,7 +100,8 @@ export function Card({ tone, paper, sm, row, cover, fold, centre, band, as = 'ar
         ...(away ? { inert: true } : {}),
         onClick: click,
     };
+    const cross = row && onRemove ? (_jsx("button", { type: "button", className: "card__remove", "aria-label": removeLabel ?? word('remove'), onClick: (e) => { e.preventDefault(); e.stopPropagation(); onRemove(); }, children: _jsx(Icon, { name: "x" }) }, "remove")) : null;
     if (!head && !tail)
-        return createElement(as, props, inner(children));
-    return createElement(as, props, inner(_jsxs(_Fragment, { children: [head && _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }, "head"), Children.toArray(children), tail && _jsx(CardFoot, { link: footLink, children: foot }, "foot")] })));
+        return createElement(as, props, inner(_jsxs(_Fragment, { children: [children, cross] })));
+    return createElement(as, props, inner(_jsxs(_Fragment, { children: [head && _jsx(CardHead, { heading: heading, caption: caption, end: end, level: level }, "head"), Children.toArray(children), tail && _jsx(CardFoot, { link: footLink, children: foot }, "foot"), cross] })));
 }

package/dist/cards/CardParts.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 export interface CardMediaProps extends ComponentProps<'div'> {
 }
 /** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
@@ -16,10 +16,16 @@ export interface CardEndProps extends ComponentProps<'div'> {
 /** CardEnd — the trailing value + caption, right-aligned (in a head or a row card). */
 export declare function CardEnd({ className, ...rest }: CardEndProps): import("react").JSX.Element;
 export interface CardListProps extends ComponentProps<'div'> {
+    /** how many rows show before the list scrolls IN ITSELF, counted in rows, not a height: `2.5` = two whole rows and half of the third, the cut row
+     *  saying there is more. The list measures its own rows (they wrap to any height) and keeps the window right when they change. Leave it out and the
+     *  list is as long as its rows and scrolls with what holds it */
+    show?: number;
 }
 /** CardList — a stack of `Card row`s, each its own boundary: a list of things to open or to pick (past requests to reuse). It stands on the base or straight in a sheet's
- *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`. */
-export declare function CardList({ className, ...rest }: CardListProps): import("react").JSX.Element;
+ *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`.
+ *  A SHORT WINDOW of past entries under a form (`show={2.5}`): the list scrolls in itself, a few rows in sight; each row a `Card row as="label"` round a radio
+ *  (pick one) with `onRemove` for its corner cross (take it off the list) — the app owns the list, the picked one and what a removal does. */
+export declare function CardList({ show, className, style, ref, ...rest }: CardListProps): import("react").JSX.Element;
 export interface IconRowProps extends ComponentProps<'span'> {
 }
 /** IconRow — a trailing cluster of Icons in a card or stack head. */

package/dist/cards/CardParts.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
 /** CardMedia — rounded media inside a card (a Placeholder or img); a corner JourneyBadge pins to it. */
 export function CardMedia({ className, ...rest }) {
@@ -17,9 +18,46 @@ export function CardEnd({ className, ...rest }) {
     return _jsx("div", { className: cx('card__end', className), ...rest });
 }
 /** CardList — a stack of `Card row`s, each its own boundary: a list of things to open or to pick (past requests to reuse). It stands on the base or straight in a sheet's
- *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`. */
-export function CardList({ className, ...rest }) {
-    return _jsx("div", { className: cx('card-list', className), ...rest });
+ *  body and scrolls with it; never inside a card (a card never wraps a card — `cardds check` rule `card-in-card`). Rows inside a card are `Rows`.
+ *  A SHORT WINDOW of past entries under a form (`show={2.5}`): the list scrolls in itself, a few rows in sight; each row a `Card row as="label"` round a radio
+ *  (pick one) with `onRemove` for its corner cross (take it off the list) — the app owns the list, the picked one and what a removal does. */
+export function CardList({ show, className, style, ref, ...rest }) {
+    const own = useRef(null);
+    useLayoutEffect(() => {
+        const list = own.current;
+        if (!list || show == null)
+            return;
+        const fit = () => {
+            const rows = [...list.children];
+            const whole = Math.floor(show);
+            const cut = rows[whole];
+            if (!cut) {
+                list.style.removeProperty('--_card-list-h');
+                return;
+            }
+            const box = cut.getBoundingClientRect();
+            const at = box.top - list.getBoundingClientRect().top + list.scrollTop; // from the list's top edge, wherever it is scrolled
+            list.style.setProperty('--_card-list-h', `${at + (show - whole) * box.height}px`);
+        };
+        fit();
+        const watch = new ResizeObserver(fit);
+        watch.observe(list);
+        for (const row of list.children)
+            watch.observe(row);
+        const rows = new MutationObserver(() => { for (const row of list.children)
+            watch.observe(row); fit(); });
+        rows.observe(list, { childList: true });
+        return () => { watch.disconnect(); rows.disconnect(); };
+    }, [show]);
+    const setRef = (node) => {
+        own.current = node;
+        const passed = ref;
+        if (typeof passed === 'function')
+            passed(node);
+        else if (passed)
+            passed.current = node;
+    };
+    return _jsx("div", { ref: setRef, className: cx('card-list', show != null && 'card-list--window', className), style: style, ...rest });
 }
 /** IconRow — a trailing cluster of Icons in a card or stack head. */
 export function IconRow({ className, ...rest }) {

package/dist/cards/cardGo.js

@@ -24,6 +24,6 @@ export function goControl(card) {
         return null;
     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;
+    const atRowEnd = card.matches('.card--row') && card.lastElementChild === control && !control.matches('.card__remove'); // a row's cross takes it off its list: never pressed by a touch elsewhere
     return inFoot || atRowEnd ? control : null;
 }