@usableapp/cardds 0.7.19 → 0.7.21

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 > 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.21 — 2026-09-29
+
+### Fixed
+- `installScreenSlide()`: the phone's back slid the WHOLE screen on every history step, also on an entry of the same screen (an open `Home`/`SheetStack` sheet kept in `history.state` so back closes it) — the page slid while the stack closed. Now an entry with the same path + query goes back without a slide; the component moves itself. Nothing to change in an app (Lh 2026-09-29, timebank home).
+
+## 0.7.20 — 2026-09-28
+
+Lh, from timebank on a real Android phone (card #153). Nothing to change in a screen.
+
+### Changed
+- A `Sheet`'s title is ONE line, cut with … when too long (was: wrapped to two lines). The thing at the head's end keeps its place; a caption still takes its own row. A wrapped title no longer makes a taller peek strip — there is none.
+- `SheetSteps`: the open step's content (words, `Field`, `Pin` cells…) sits inset to the step title's words — the bar's own inset (`--sheet-step-bar-pad-x`), or its own knob `--sheet-step-inner-pad-x`.
+- `SheetSteps`: room under the LAST step (`--sheet-steps-end`, default sp-6) — scrolled to the end it no longer touches the sheet's foot button.
+
+### Fixed
+- A folded `SheetStep`'s long `summary` ran past the sheet's right edge; it is cut with … inside its row now.
+
+### Added
+- `Bullets` + `Bullet` (lists): each item led by a small square picture one line tall (`1lh`), the words wrap beside it. `pic` = an image URL or any node, on the list (every item) or on an item (its own); none = the placeholder square. Knobs `--bullets-pic-size` · `--bullets-pic-gap` · `--bullets-pic-radius` · `--bullets-gap` · `--bullets-font`. Gallery: `/Bullets`.
+
 ## 0.7.19 — 2026-09-28
 
 ### Fixed

package/css/lists.css

@@ -204,3 +204,13 @@
 .link:disabled { color: var(--link-disabled-ink, var(--card-muted)); cursor: default; } /* inactive = muted (a WaitLink counting down) */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
+
+/* ---- bullets: a list, each item led by a small square picture as tall as a line of its words (Lh 2026-09-28, timebank #153) ----
+   <ul class="bullets"><li class="bullets__item"><img class="bullets__pic" alt=""><span class="bullets__text">…</span></li></ul>
+   The picture is the app's (an image or any node); none = the wireframe's crossed square. It sits on the item's FIRST line
+   (1lh — the line's own height, so it follows the text size), the words wrap beside it, never under it. */
+.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bullets-gap, var(--sp-3)); font: var(--bullets-font, var(--type-body)); }
+.bullets__item { display: flex; align-items: start; gap: var(--bullets-pic-gap, var(--sp-3)); min-width: 0; }
+.bullets__pic { flex: none; inline-size: var(--bullets-pic-size, 1lh); block-size: var(--bullets-pic-size, 1lh); min-height: 0; object-fit: contain; border-radius: var(--bullets-pic-radius, 0rem); display: grid; place-items: center; }
+.bullets__pic.ph { border-radius: var(--bullets-pic-radius, 0rem); }
+.bullets__text { flex: 1; min-width: 0; }

package/css/sheet.css

@@ -208,6 +208,10 @@
      whole ask is that switch: peek shows it (a row is --tap tall plus its own
      padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
 .sheet > .card__head { min-height: var(--sheet-head-h); }
+/* a sheet's title is ONE line, cut with … when the phone is too narrow (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน"
+   wrapped to two lines at 390px) — the thing at its end keeps its place beside it; a caption still takes its own row */
+.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { flex-wrap: nowrap; }
+.sheet > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .sheet__head {
   display: grid;
   grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
@@ -381,11 +385,11 @@
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
 .sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
 .sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
-.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0 0 var(--sheet-steps-end, var(--sp-6)); flex: 1; /* room under the LAST step: scrolled to the end it never touches the foot's button (Lh 2026-09-28, #153) */ display: flex; flex-direction: column; }
 
 .sheet-step {
   position: relative; min-width: 0;
-  display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
+  display: grid; grid-template-columns: minmax(0, 1fr); /* the column is the step's width, never its words' — a long summary is cut with …, it never pushes the row past the sheet's edge (Lh 2026-09-28, #153) */ grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
   --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
@@ -396,7 +400,7 @@
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
 .sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
-  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
@@ -410,7 +414,7 @@
 .sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
-.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }

package/dist/cardds.css

@@ -1490,6 +1490,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
      whole ask is that switch: peek shows it (a row is --tap tall plus its own
      padding; the strip cuts in that padding) — card #67's "ไม่อยู่บ้าน" */
 .sheet > .card__head { min-height: var(--sheet-head-h); }
+/* a sheet's title is ONE line, cut with … when the phone is too narrow (Lh 2026-09-28, timebank #153: "ข้อกำหนดและเงื่อนไขการใช้งาน"
+   wrapped to two lines at 390px) — the thing at its end keeps its place beside it; a caption still takes its own row */
+.sheet > .card__head:not(:has(> :is(.t-caption, .t-body))) { flex-wrap: nowrap; }
+.sheet > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .sheet__head {
   display: grid;
   grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
@@ -1663,11 +1667,11 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet__body:has(> .sheet-steps) { display: flex; flex-direction: column; }
 .sheet-steps { flex-shrink: 0; min-height: calc(100% + var(--kb, 0rem)); /* the keyboard's height more: the pile of next steps stays under the keyboard, it never rises with it */ display: flex; flex-direction: column; touch-action: pan-y; position: relative; }
 .sheet-steps__holder { position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 1rem; } /* holds the cursor (and the phone's keyboard) while a step folds; font 1rem = the browser's own size, so iOS does not zoom to it */
-.sheet-steps__track { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
+.sheet-steps__track { list-style: none; margin: 0; padding: 0 0 var(--sheet-steps-end, var(--sp-6)); flex: 1; /* room under the LAST step: scrolled to the end it never touches the foot's button (Lh 2026-09-28, #153) */ display: flex; flex-direction: column; }
 
 .sheet-step {
   position: relative; min-width: 0;
-  display: grid; grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
+  display: grid; grid-template-columns: minmax(0, 1fr); /* the column is the step's width, never its words' — a long summary is cut with …, it never pushes the row past the sheet's edge (Lh 2026-09-28, #153) */ grid-template-rows: auto 0fr; align-content: start; /* mid-fold the rows sum to less than the box: the spare room stays BELOW, never spread into the title row (Lh: it looked like a spring) */
   flex: 0 0 auto;
   transition: grid-template-rows var(--motion-sheet) ease, flex-grow var(--motion-sheet) ease;
   --_row-h: var(--sheet-steps-row-h, calc(var(--tap-base) * 2 / 3)); /* the bar's own floor, read once (__head and __go below share it) */
@@ -1678,7 +1682,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-step--now { grid-template-rows: auto 1fr; flex-grow: 1; }
 .sheet-step + .sheet-step { margin-top: var(--sheet-steps-gap, var(--sp-1)); } /* the folded bars read as a pile, a little ground between them (Lh 2026-09-25) */
 .sheet-step__head { /* every step's title line is a quiet BAR (a tint of the ink, not the brand — a brand bar read as a button, Lh 2026-09-25), the same height open or folded — opening shows the white room under it, never a taller bar (Lh 2026-09-25; was a thin rule on top) */
-  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
+  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
@@ -1692,7 +1696,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
-.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); }
+.sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */
 .sheet-step__inner > * { min-width: 0; }
 .sheet-step__inner > .link { justify-self: center; } /* a link of its own row in a step (skip, "change number", "set PIN again"): centred under the step, as the skip (Lh 2026-09-25) */
 .sheet-step:not(.sheet-step--now) > .sheet-step__body { visibility: hidden; transition: visibility 0s linear var(--motion-sheet); }
@@ -3244,6 +3248,16 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .link--wait { font-variant-numeric: tabular-nums; } /* the countdown's digits keep their width: the words do not jiggle each second */
 .card--3 .link--muted { color: var(--card-3-muted); }
 
+/* ---- bullets: a list, each item led by a small square picture as tall as a line of its words (Lh 2026-09-28, timebank #153) ----
+   <ul class="bullets"><li class="bullets__item"><img class="bullets__pic" alt=""><span class="bullets__text">…</span></li></ul>
+   The picture is the app's (an image or any node); none = the wireframe's crossed square. It sits on the item's FIRST line
+   (1lh — the line's own height, so it follows the text size), the words wrap beside it, never under it. */
+.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bullets-gap, var(--sp-3)); font: var(--bullets-font, var(--type-body)); }
+.bullets__item { display: flex; align-items: start; gap: var(--bullets-pic-gap, var(--sp-3)); min-width: 0; }
+.bullets__pic { flex: none; inline-size: var(--bullets-pic-size, 1lh); block-size: var(--bullets-pic-size, 1lh); min-height: 0; object-fit: contain; border-radius: var(--bullets-pic-radius, 0rem); display: grid; place-items: center; }
+.bullets__pic.ph { border-radius: var(--bullets-pic-radius, 0rem); }
+.bullets__text { flex: 1; min-width: 0; }
+
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */
 /* ============================================================
    cardds/media.css — media & display inside cards:

package/dist/index.d.ts

@@ -65,6 +65,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bullets.js';
 export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';

package/dist/index.js

@@ -69,6 +69,7 @@ export * from './lists/Row.js';
 export * from './lists/Kv.js';
 export * from './lists/Timeline.js';
 export * from './lists/Legend.js';
+export * from './lists/Bullets.js';
 export * from './lists/Bubble.js';
 export * from './media/Quote.js';
 export * from './media/Postcard.js';

package/dist/lists/Bullets.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/** a bullet's picture: an image URL, or any node (an Icon, an <img> of the app's own) */
+export type BulletPic = string | ReactNode;
+export interface BulletsProps extends ComponentProps<'ul'> {
+    /** the picture every item leads with, unless the item gives its own; none = a placeholder square */
+    pic?: BulletPic;
+}
+/** Bullets — a list whose items each lead with a small square PICTURE as tall as a line of their words (Lh 2026-09-28: an agreement's
+ *  short version, one point per item); children are Bullets. Pictures are decoration (alt=""), the words carry the meaning. */
+export declare function Bullets({ pic, className, ...rest }: BulletsProps): import("react").JSX.Element;
+export interface BulletProps extends ComponentProps<'li'> {
+    /** this item's own picture (wins over the list's) */
+    pic?: BulletPic;
+}
+/** Bullet — one item of Bullets: its picture, then its words. */
+export declare function Bullet({ pic, className, children, ...rest }: BulletProps): import("react").JSX.Element;

package/dist/lists/Bullets.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { cx } from '../cx.js';
+const PicOfList = createContext(undefined);
+/** Bullets — a list whose items each lead with a small square PICTURE as tall as a line of their words (Lh 2026-09-28: an agreement's
+ *  short version, one point per item); children are Bullets. Pictures are decoration (alt=""), the words carry the meaning. */
+export function Bullets({ pic, className, ...rest }) {
+    return (_jsx(PicOfList.Provider, { value: pic, children: _jsx("ul", { className: cx('bullets', className), ...rest }) }));
+}
+/** Bullet — one item of Bullets: its picture, then its words. */
+export function Bullet({ pic, className, children, ...rest }) {
+    const ofList = useContext(PicOfList);
+    const shown = pic ?? ofList;
+    return (_jsxs("li", { className: cx('bullets__item', className), ...rest, children: [shown == null ? _jsx("span", { className: "bullets__pic ph", "aria-hidden": "true" })
+                : typeof shown === 'string' ? _jsx("img", { className: "bullets__pic", src: shown, alt: "" })
+                    : _jsx("span", { className: "bullets__pic", "aria-hidden": "true", children: shown }), _jsx("span", { className: "bullets__text", children: children })] }));
+}

package/dist/scaffold/slideScreen.d.ts

@@ -10,6 +10,7 @@ export declare function slideScreen(update: () => unknown, direction?: SlideDire
 /**
  * installScreenSlide — call ONCE when the app starts: the phone's / browser's BACK (and forward) buttons slide the screen too,
  * the way `back` (and `next`) does. It listens to `popstate` before the router renders; the direction is read from the history
- * entry's index (`history.state.idx`, which React Router keeps; without it: back). Returns the uninstall.
+ * entry's index (`history.state.idx`, which React Router keeps; without it: back). An entry of the SAME screen (same path and
+ * query, only its state differs — an open sheet pushed so the phone's back closes it) does not slide. Returns the uninstall.
  */
 export declare function installScreenSlide(): () => void;

package/dist/scaffold/slideScreen.js

@@ -47,17 +47,25 @@ export function slideScreen(update, direction = 'next', scope = document) {
 /**
  * installScreenSlide — call ONCE when the app starts: the phone's / browser's BACK (and forward) buttons slide the screen too,
  * the way `back` (and `next`) does. It listens to `popstate` before the router renders; the direction is read from the history
- * entry's index (`history.state.idx`, which React Router keeps; without it: back). Returns the uninstall.
+ * entry's index (`history.state.idx`, which React Router keeps; without it: back). An entry of the SAME screen (same path and
+ * query, only its state differs — an open sheet pushed so the phone's back closes it) does not slide. Returns the uninstall.
  */
 export function installScreenSlide() {
-    let idx = history.state?.idx;
+    const where = () => location.pathname + location.search;
+    let idx = history.state?.idx, at = where();
     const push = history.pushState.bind(history), replace = history.replaceState.bind(history);
-    history.pushState = (...a) => { push(...a); idx = history.state?.idx; };
-    history.replaceState = (...a) => { replace(...a); idx = history.state?.idx; };
+    const seen = () => { idx = history.state?.idx; at = where(); };
+    history.pushState = (...a) => { push(...a); seen(); };
+    history.replaceState = (...a) => { replace(...a); seen(); };
     const pop = () => {
-        const to = history.state?.idx;
+        const to = history.state?.idx, same = where() === at;
         const dir = to != null && idx != null && to > idx ? 'next' : 'back';
         idx = to;
+        at = where();
+        /* the SAME screen (path + query unchanged, only the entry's state — an open sheet, a tab): the screen stays, the
+           component moves itself (a SheetStack closes as a stack does). Lh 2026-09-29, timebank home. */
+        if (same)
+            return;
         slideScreen(() => undefined, dir); // the router renders on its own, right after this: the slide waits for its new Screen
     };
     addEventListener('popstate', pop, { capture: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.19",
+  "version": "0.7.21",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",