@usableapp/cardds 0.7.7 → 0.7.9

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 > 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.9 — 2026-09-25
+
+### Changed
+- A `Screen` reads like a native app: words are no longer highlighted by a long press or a drag, no Copy / Web search
+  callout. Fields (input, textarea, contenteditable) stay selectable. The open sheet of a stack is not selectable any more
+  either (it was). `Text selectable` opens the few words a member may copy (a code, an address). Knob `--screen-select: text`
+  = the old way everywhere. Story `Text · Selectable`.
+
+### Added
+- `slideScreen(update, 'next' | 'back')` + `installScreenSlide()` — one screen to the next slides WHOLE (top · content ·
+  bottom), the way a walk's pages do; the default for every route change (Lh 2026-09-25). Before: a route change just
+  swapped the screen. Wrap every navigate in `slideScreen`; call `installScreenSlide()` once at start for the back button.
+  `data-slide="off"` on a Screen opts it out. Story `Step · WalksOn`.
+- `Pin secret` — a PIN: a dot per typed digit (`-webkit-text-security`), the number pad kept, no SMS autofill. An OTP stays
+  in sight (no `secret`). Story `Pin · Secret`; the PIN steps of the SheetSteps stories use it.
+
+## 0.7.8 — 2026-09-25
+
+### Changed
+- `Pin error` (the app's answer, a refused OTP): before — the red digits stayed until the next one was typed. After — the Pin
+  shakes red, then EMPTIES itself (`onChange('', false)`), the cursor in the first cell, on the same step — as a `match` miss.
+  Give a new `error` value per refusal (a counter) so a second one shakes again.
+
+### Added
+- `WaitLink` — a Link that waits: `until` (ms time) → counts down ("ขอรหัสใหม่ได้ใน 0:27", `waiting={(t) => …}`), takes no
+  tap until then. The app owns the rule (30 s, +30 s per ask) and sets the next `until` in its onClick. `Link disabled`
+  (muted, knob `--link-disabled-ink`). Stories `WaitLink · Resend`, `SheetSteps · Errors` (ask for a new code).
+- `SheetSteps reached` — controlled progress: how many steps are done. Before: the steps remembered the furthest step reached,
+  so after the app sent `at` back (the server refused the code at the end) the later steps still showed ✓ and their summary.
+  After: `reached={1}` with `at={1}` → the steps after it are "next" again. Once set the app owns it — keep
+  `reached = max(reached, at)` beside `at`. Without it: as before. Story `SheetSteps · Reached` (timebank card 142).
+
 ## 0.7.7 — 2026-09-25
 
 ### Changed (breaking for a confirm PIN)

package/README.md

@@ -322,6 +322,8 @@ between at 40% down the screen (see *Anatomy*, "Where the centre is"):
 - **Page that moves** (Lh 2026-09-20) — two ways, never both on one screen:
   - *Pages of words:* `.step > .pages > .page` (one `aria-current="step"`, the rest `inert`) — every page
     one height, the round pager turns them (`slideTo()`), the words slide like a page. No sheet there.
+    ONE SCREEN TO THE NEXT (a route change) slides the WHOLE screen the same way: `slideScreen(() => navigate(to), 'next' | 'back')`,
+    and `installScreenSlide()` once at app start for the back button (story `Step · WalksOn`). `data-slide="off"` on a Screen = no slide.
   - *Sheets the app calls:* the base offers WAYS IN — sign in · new phone · join — as buttons (`.cta-pack`); each
     way has a sheet that holds its WHOLE form and its own submit on its foot, starting `.sheet--away` (not on the
     screen: slid out, hidden once gone, `inert`). **The wiring is the app's, not cardds's**: a `useState` of which

package/css/base.css

@@ -107,6 +107,11 @@ button { font: inherit; cursor: pointer; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
+/* a screen reads like a native app (Lh 2026-09-25): words are not highlighted by a long press or a drag, no copy / web-search
+   callout — only what is typed into, and words marked selectable (`Text selectable` → .t-select: a code, an address).
+   Knob --screen-select: `text` = the web page's old way everywhere. */
+.screen { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none; }
+.screen :is(input, textarea, [contenteditable="true"]), .screen .t-select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
 .t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
 /* ---- base content: words straight on the base, no card around them — an

package/css/card.css

@@ -240,7 +240,8 @@
      <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
-::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) {
+::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+::view-transition-old(screen-out), ::view-transition-new(screen-in) { /* screen-*: slideScreen — one whole screen to the next (Lh 2026-09-25) */
   animation-duration: var(--motion-slide);
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
@@ -249,12 +250,17 @@
 :root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
 :root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
 :root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) { animation: none; }
+  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+  ::view-transition-old(screen-out), ::view-transition-new(screen-in) { animation: none; }
 }
 /* the page dots under the card sit centred under it — the indicator belongs
    with the page that changes, never in the bar (Lh, 2026-09-12) */

package/css/choice.css

@@ -210,6 +210,7 @@
    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 .pin__cell { caret-color: transparent; }
+.pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);

package/css/lists.css

@@ -206,4 +206,6 @@
 .link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
 .link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
+.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); }

package/css/stack.css

@@ -328,4 +328,4 @@
 /* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
    no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
 .sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
-.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
+.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */

package/dist/actions/Link.d.ts

@@ -9,9 +9,13 @@ export interface LinkProps extends ComponentProps<'a'> {
     sm?: boolean;
     /** without an href it renders as a button */
     href?: string;
+    /** a button link that takes no taps now (reads inactive: muted) — `WaitLink` while it counts down */
+    disabled?: boolean;
 }
 /** Link — an inline text action big enough to tap (40px): "See all ↗" in a card head, "Skip" between pager buttons. */
 export declare function Link({ muted, sm, icon, href, className, children, ...rest }: LinkProps): import("react").DetailedReactHTMLElement<{
+    /** a button link that takes no taps now (reads inactive: muted) — `WaitLink` while it counts down */
+    disabled?: boolean;
     ref?: import("react").Ref<HTMLAnchorElement> | undefined;
     key?: import("react").Key | null | undefined;
     download?: any;

package/dist/actions/WaitLink.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type LinkProps } from './Link.js';
+export interface WaitLinkProps extends Omit<LinkProps, 'href'> {
+    /** CONTROLLED: when it may be pressed again (a time in ms, `Date.now()` based). Before that it counts down and takes no taps;
+     *  null / past = ready. The APP owns the rule — 30 s, +30 s each time — and sets a new `until` in its onClick. */
+    until?: number | null;
+    /** the words while it waits, given the time left as "0:27" (default: the children, then the time) */
+    waiting?: (left: string) => ReactNode;
+}
+/**
+ * WaitLink — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
+ * A link, not a button: it is the step's second way, under its control; in a SheetStep it stands centred on its own row.
+ */
+export declare function WaitLink({ until, waiting, children, className, disabled, ...rest }: WaitLinkProps): import("react").JSX.Element;

package/dist/actions/WaitLink.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { cx } from '../cx.js';
+import { Link } from './Link.js';
+/**
+ * WaitLink — a Link that waits: "ขอรหัสใหม่ได้ใน 0:27", counting down each second, then "ขอรหัสใหม่" to press (a new OTP, a retry).
+ * A link, not a button: it is the step's second way, under its control; in a SheetStep it stands centred on its own row.
+ */
+export function WaitLink({ until, waiting, children, className, disabled, ...rest }) {
+    const [now, setNow] = useState(() => Date.now());
+    const left = until != null ? Math.ceil((until - now) / 1000) : 0;
+    useEffect(() => {
+        if (until == null || until <= Date.now())
+            return;
+        setNow(Date.now());
+        const t = setInterval(() => { setNow(Date.now()); if (Date.now() >= until)
+            clearInterval(t); }, 250);
+        return () => clearInterval(t);
+    }, [until]);
+    const time = `${Math.floor(Math.max(left, 0) / 60)}:${String(Math.max(left, 0) % 60).padStart(2, '0')}`;
+    return (_jsx(Link, { className: cx('link--wait', className), disabled: left > 0 || disabled, ...rest, children: left > 0 ? (waiting ? waiting(time) : _jsxs(_Fragment, { children: [children, " ", time] })) : children }));
+}

package/dist/cardds.css

@@ -488,6 +488,11 @@ button { font: inherit; cursor: pointer; }
 .grow    { flex: 1; min-width: 0; } /* the child that takes the remaining row space */
 /* read, not shown (Lh 2026-09-23): words a screen reader needs — a page's h1 the design leaves out — kept in the page, taking no room.
    The 1px is the one the platform needs to keep it in the accessibility tree, not a length of the design. */
+/* a screen reads like a native app (Lh 2026-09-25): words are not highlighted by a long press or a drag, no copy / web-search
+   callout — only what is typed into, and words marked selectable (`Text selectable` → .t-select: a code, an address).
+   Knob --screen-select: `text` = the web page's old way everywhere. */
+.screen { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); -webkit-touch-callout: none; }
+.screen :is(input, textarea, [contenteditable="true"]), .screen .t-select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
 .t-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
 /* ---- base content: words straight on the base, no card around them — an
@@ -773,7 +778,8 @@ button { font: inherit; cursor: pointer; }
      <section class="page" inert>…</section>
    </div></section> <div class="action-bar action-bar--pager">← →</div> */
 ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
-::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) {
+::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+::view-transition-old(screen-out), ::view-transition-new(screen-in) { /* screen-*: slideScreen — one whole screen to the next (Lh 2026-09-25) */
   animation-duration: var(--motion-slide);
   animation-timing-function: ease-out;
   mix-blend-mode: normal;
@@ -782,12 +788,17 @@ button { font: inherit; cursor: pointer; }
 :root[data-slide="next"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-right; }
 :root[data-slide="back"]::view-transition-old(centre-card-out) { animation-name: centre-card-out-right; }
 :root[data-slide="back"]::view-transition-new(centre-card-in) { animation-name: centre-card-in-left; }
+:root[data-slide="next"]::view-transition-old(screen-out) { animation-name: centre-card-out-left; }
+:root[data-slide="next"]::view-transition-new(screen-in) { animation-name: centre-card-in-right; }
+:root[data-slide="back"]::view-transition-old(screen-out) { animation-name: centre-card-out-right; }
+:root[data-slide="back"]::view-transition-new(screen-in) { animation-name: centre-card-in-left; }
 @keyframes centre-card-out-left  { to   { translate: -100% 0; opacity: 0; } }
 @keyframes centre-card-out-right { to   { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-right  { from { translate:  100% 0; opacity: 0; } }
 @keyframes centre-card-in-left   { from { translate: -100% 0; opacity: 0; } }
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in) { animation: none; }
+  ::view-transition-old(centre-card-out), ::view-transition-new(centre-card-in),
+  ::view-transition-old(screen-out), ::view-transition-new(screen-in) { animation: none; }
 }
 /* the page dots under the card sit centred under it — the indicator belongs
    with the page that changes, never in the bar (Lh, 2026-09-12) */
@@ -1172,7 +1183,7 @@ button { font: inherit; cursor: pointer; }
 /* a stacked sheet is a control until it is open — tapped, never read into: no text selection (a drag, a double tap, a long press),
    no grey flash, no iOS callout; its head stays one when open. Only the OPEN sheet's body is text to select (Lh 2026-09-23) */
 .sheet-stack--tap > .card, .sheet-stack > .card > .card__head { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
-.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
+.sheet-stack--tap > .card.is-open > :not(.card__head) { -webkit-user-select: var(--screen-select, none); user-select: var(--screen-select, none); } /* the open sheet reads as the rest of the screen: not selectable (Lh 2026-09-25; it was text) */
 
 /* ---- css/sheet.css — sheet single: .sheet — one card as a bottom sheet, peek / half / full ---- */
 /* ============================================================
@@ -2809,6 +2820,7 @@ button { font: inherit; cursor: pointer; }
    edge. The sign is INSIDE the pill: a full-ink border and a blinking bar drawn where the digit will land (the native caret
    is hidden — its height and place are the browser's; the pill's bar is one rule). A filled cell selects its digit instead. */
 .pin__cell { caret-color: transparent; }
+.pin--secret .pin__cell { -webkit-text-security: disc; text-security: disc; } /* a PIN: a dot per digit, the number pad kept (Lh 2026-09-25) */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);
@@ -3123,6 +3135,8 @@ button { font: inherit; cursor: pointer; }
 .link--sm { position: relative; font-size: var(--link-sm-font-size, var(--fs-2xs)); min-height: var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)); }
 .link--sm::after { content: ""; position: absolute; inset: calc((var(--link-sm-min-h, calc(var(--tap-base) * 7 / 12)) - var(--tap-sm)) / 2) 0; }
 .link--muted { color: var(--link-muted-ink, var(--card-muted)); }
+.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); }
 
 /* ---- css/media.css — cover card, quote, tile grid, fold, mosaic, wave ---- */

package/dist/forms/Pin.d.ts

@@ -10,8 +10,10 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
     label?: string;
     /** the code so far, after every change; `complete` once every cell holds a digit */
     onChange?: (code: string, complete: boolean) => void;
-    /** the code is wrong: the digits stay in sight in `--signal-error` (words, no fill) with red edges, the cursor goes back to the
-     *  first cell, and the next digit typed starts a new code. The words are the step's (`SheetStep error`). */
+    /** the code is wrong (the app's answer — an OTP the server refused): the Pin SHAKES with red edges and its digits in sight,
+     *  then empties itself (`onChange('', false)`) and the cursor waits in the first cell for a new try — the same as a `match`
+     *  miss (Lh 2026-09-25; the red digits used to stay until the next one was typed). Give a NEW value for each refusal (a
+     *  counter) so a second one shakes again. The words are the step's (`SheetStep error`): the app keeps them until it clears `error`. */
     error?: unknown;
     /** a FORMAT check on the client: the code it must equal (the first PIN, when this one confirms it). Once every cell is filled
      *  and it differs, the Pin SHAKES with red edges and its digits in sight, the step shows `formatError` under it, then the Pin
@@ -20,6 +22,9 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
     match?: string;
     /** the words when a check fails: the code does not match, or the step's button was pressed with cells still empty */
     formatError?: ReactNode;
+    /** a SECRET code (a PIN, not an OTP): each typed digit shows as a dot — `-webkit-text-security`, so the keyboard stays the
+     *  number pad (a password field brings a full keyboard on some phones); no SMS autofill, no password manager (Lh 2026-09-25) */
+    secret?: boolean;
     /** focus the first empty cell on mount */
     autoFocus?: boolean;
 }
@@ -29,4 +34,4 @@ export interface PinProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defa
  * arrows walk the cells, a pasted code fills them from the one it landed in; only digits stay. The first cell takes the SMS
  * one-time-code autofill. The code is a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`.
  */
-export declare function Pin({ length, value, defaultValue, label, onChange, autoFocus, error, match, formatError, className, onAnimationEnd, ...rest }: PinProps): import("react").JSX.Element;
+export declare function Pin({ length, value, defaultValue, label, onChange, autoFocus, error, match, formatError, secret, className, onAnimationEnd, ...rest }: PinProps): import("react").JSX.Element;

package/dist/forms/Pin.js

@@ -9,11 +9,28 @@ const RESET_MS = 900; // a code that does not match: red + shake this long, then
  * arrows walk the cells, a pasted code fills them from the one it landed in; only digits stay. The first cell takes the SMS
  * one-time-code autofill. The code is a VALUE, controlled like an input: `value` + `onChange`, or `defaultValue`.
  */
-export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onChange, autoFocus, error, match, formatError, className, onAnimationEnd, ...rest }) {
+export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onChange, autoFocus, error, match, formatError, secret, className, onAnimationEnd, ...rest }) {
     const ref = useRef(null);
     const [inner, setInner] = useState(defaultValue);
     const code = (value ?? inner).replace(/\D/g, '').slice(0, length);
     const cell = (i) => ref.current?.querySelectorAll('.pin__cell')[i];
+    /* a miss — a match that failed, or the app's error: shake, red, then the cells empty for a new try on the same step */
+    const latest = useRef({ value, onChange, error });
+    latest.current = { value, onChange, error };
+    const miss = () => {
+        restart.current = true;
+        setShake(true);
+        clearTimeout(reset.current);
+        reset.current = setTimeout(() => {
+            setBad(false);
+            setCleared(latest.current.error);
+            restart.current = false;
+            if (latest.current.value === undefined)
+                setInner('');
+            latest.current.onChange?.('', false);
+            cell(0)?.focus();
+        }, RESET_MS);
+    };
     const set = (next) => {
         next = next.slice(0, length);
         if (bad || said.current) {
@@ -22,20 +39,12 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
             said.current = false;
         }
         clearTimeout(reset.current);
+        setCleared(error); // typed before the cells emptied: the new try has begun, the red goes
         if (match != null && next.length === length && next !== match) {
             setBad(true);
             say(words);
             said.current = true;
-            restart.current = true;
-            setShake(true);
-            reset.current = setTimeout(() => {
-                setBad(false);
-                restart.current = false;
-                if (value === undefined)
-                    setInner('');
-                onChange?.('', false);
-                cell(0)?.focus();
-            }, RESET_MS);
+            miss();
         }
         if (value === undefined)
             setInner(next);
@@ -64,15 +73,21 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
         }
         return null;
     }, () => cell(Math.min(code.length, length - 1))?.focus());
-    const wrong = (error != null && error !== false && error !== '') || bad;
+    const errOn = error != null && error !== false && error !== '';
+    const [cleared, setCleared] = useState(undefined); // the app's error whose miss has played out (its cells emptied)
+    const wrong = (errOn && error !== cleared) || bad;
     const restart = useRef(false);
     useEffect(() => {
-        if (!wrong)
+        if (!errOn) {
+            setCleared(undefined);
+            return;
+        }
+        if (error === cleared)
             return;
-        restart.current = true; // the wrong code stays in sight (red); the next digit typed starts a new one from the first cell
         cell(0)?.focus();
+        miss(); // each new error, once
         // eslint-disable-next-line react-hooks/exhaustive-deps -- each new error, once
-    }, [wrong, error]);
+    }, [error]);
     /* the app emptied the code (a new try: it went back after a mismatch): the red goes with it */
     useEffect(() => {
         if (code || !bad)
@@ -131,10 +146,10 @@ export function Pin({ length = 6, value, defaultValue = '', label = 'Digit', onC
             cell(i + 1)?.focus();
         }
     };
-    return (_jsx("div", { ref: ref, className: cx('pin', wrong && 'pin--error', shake && 'pin--shake', className), ...rest, onAnimationEnd: (e) => { if (e.animationName === 'pin-shake')
+    return (_jsx("div", { ref: ref, className: cx('pin', secret && 'pin--secret', wrong && 'pin--error', shake && 'pin--shake', className), ...rest, onAnimationEnd: (e) => { if (e.animationName === 'pin-shake')
             setShake(false); onAnimationEnd?.(e); }, children: Array.from({ length }, (_, i) => (
         // no maxLength: the browser would cut a pasted code before this ever saw it. A cell holds one digit — typing into a full one
         // replaces it, so its digit is selected whenever the cell takes the focus
-        _jsx("input", { className: "pin__cell", inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", value: code[i] ?? '', "aria-label": `${label} ${i + 1}`, "aria-invalid": wrong || undefined, autoComplete: i === 0 ? 'one-time-code' : 'off', onChange: input(i), onPaste: paste, onKeyDown: key(i), onFocus: (e) => { if (!restart.current)
+        _jsx("input", { className: "pin__cell", inputMode: "numeric", pattern: "[0-9]*", placeholder: " ", value: code[i] ?? '', "aria-label": `${label} ${i + 1}`, "aria-invalid": wrong || undefined, autoComplete: i === 0 && !secret ? 'one-time-code' : 'off', onChange: input(i), onPaste: paste, onKeyDown: key(i), onFocus: (e) => { if (!restart.current)
                 e.currentTarget.select(); } }, i))) }));
 }

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './scaffold/FilterRow.js';
 export * from './scaffold/Page.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
+export * from './scaffold/slideScreen.js';
 export * from './cards/Card.js';
 export * from './cards/CardHead.js';
 export * from './cards/CardFoot.js';
@@ -38,6 +39,7 @@ export * from './actions/Segment.js';
 export * from './actions/Fab.js';
 export * from './actions/BtnRow.js';
 export * from './actions/Link.js';
+export * from './actions/WaitLink.js';
 export * from './forms/Field.js';
 export * from './forms/FileBtn.js';
 export * from './forms/AddRow.js';

package/dist/index.js

@@ -18,6 +18,7 @@ export * from './scaffold/FilterRow.js';
 export * from './scaffold/Page.js';
 export * from './scaffold/EmptyState.js';
 export * from './scaffold/Centre.js';
+export * from './scaffold/slideScreen.js';
 export * from './cards/Card.js';
 export * from './cards/CardHead.js';
 export * from './cards/CardFoot.js';
@@ -42,6 +43,7 @@ export * from './actions/Segment.js';
 export * from './actions/Fab.js';
 export * from './actions/BtnRow.js';
 export * from './actions/Link.js';
+export * from './actions/WaitLink.js';
 export * from './forms/Field.js';
 export * from './forms/FileBtn.js';
 export * from './forms/AddRow.js';

package/dist/scaffold/slideScreen.d.ts

@@ -0,0 +1,15 @@
+import type { SlideDirection } from './Centre.js';
+/**
+ * slideScreen — go to the NEXT SCREEN (a route change) with the whole screen sliding, as a walk's pages do. Wrap the app's
+ * navigate in it: `slideScreen(() => navigate('/download'))` — `back` for a way back: `slideScreen(() => navigate(-1), 'back')`.
+ * The update may render at once or later (a route's chunk loading): the slide waits for the new Screen (at most 0.8 s).
+ * A Screen with `data-slide="off"` (or none at all) is not slid. `scope`: where the one Screen is (default the document — an
+ * app has one). Without view transitions (the browser floor) it just runs the update.
+ */
+export declare function slideScreen(update: () => unknown, direction?: SlideDirection, scope?: ParentNode): void;
+/**
+ * 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.
+ */
+export declare function installScreenSlide(): () => void;

package/dist/scaffold/slideScreen.js

@@ -0,0 +1,65 @@
+/* ONE SCREEN TO THE NEXT (Lh 2026-09-25): the whole screen slides — top, content, bottom — the way a walk's pages do (`next`: the
+   old one out to the left, the new one in from the right; `back`: the reverse; `--motion-slide`, card.css). It is a view
+   transition named for the move only: the leaving `.screen` is `screen-out`, the arriving one `screen-in`. */
+const screenIn = (scope) => scope.querySelector('.screen:not(.screen .screen)');
+/** wait until the screen in `scope` CHANGED — another element, or new content in the same one (React may keep the element when
+    both routes render a Screen in the same place) — a route rendered, sync or not; at most `ms` */
+function newScreen(scope, old, ms = 800) {
+    return new Promise((done) => {
+        const now = screenIn(scope);
+        if (now !== old)
+            return done(now);
+        const root = scope instanceof Document ? scope.documentElement : scope;
+        const mo = new MutationObserver(() => { mo.disconnect(); clearTimeout(t); done(screenIn(scope)); });
+        mo.observe(root, { childList: true, subtree: true });
+        const t = setTimeout(() => { mo.disconnect(); done(screenIn(scope)); }, ms);
+    });
+}
+let running = false;
+/**
+ * slideScreen — go to the NEXT SCREEN (a route change) with the whole screen sliding, as a walk's pages do. Wrap the app's
+ * navigate in it: `slideScreen(() => navigate('/download'))` — `back` for a way back: `slideScreen(() => navigate(-1), 'back')`.
+ * The update may render at once or later (a route's chunk loading): the slide waits for the new Screen (at most 0.8 s).
+ * A Screen with `data-slide="off"` (or none at all) is not slid. `scope`: where the one Screen is (default the document — an
+ * app has one). Without view transitions (the browser floor) it just runs the update.
+ */
+export function slideScreen(update, direction = 'next', scope = document) {
+    const root = document.documentElement;
+    const before = screenIn(scope);
+    if (typeof document.startViewTransition !== 'function' || running || !before || before.dataset.slide === 'off') {
+        update();
+        return;
+    }
+    running = true;
+    before.style.viewTransitionName = 'screen-out';
+    root.dataset.slide = direction;
+    let after = null;
+    const t = document.startViewTransition(async () => {
+        await update();
+        after = await newScreen(scope, before);
+        before.style.viewTransitionName = '';
+        if (after && after.dataset.slide !== 'off')
+            after.style.viewTransitionName = 'screen-in'; // the same element too: out, then in
+    });
+    void t.finished.finally(() => { running = false; delete root.dataset.slide; if (after)
+        after.style.viewTransitionName = ''; });
+}
+/**
+ * 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.
+ */
+export function installScreenSlide() {
+    let idx = history.state?.idx;
+    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 pop = () => {
+        const to = history.state?.idx;
+        const dir = to != null && idx != null && to > idx ? 'next' : 'back';
+        idx = to;
+        slideScreen(() => undefined, dir); // the router renders on its own, right after this: the slide waits for its new Screen
+    };
+    addEventListener('popstate', pop, { capture: true });
+    return () => { removeEventListener('popstate', pop, { capture: true }); history.pushState = push; history.replaceState = replace; };
+}

package/dist/sheets/SheetSteps.d.ts

@@ -9,6 +9,12 @@ export interface SheetStepsProps extends ComponentProps<'div'> {
      *  work is really finished (the code checked by the server, the two PINs match), `setAt(at + 1)`; after the last step the app sends. `at = count` = every step done —
      *  the app then closes its Sheet (`state="away"`, a beat after the fold) and says so on the page: the steps never close it themselves. */
     at?: number;
+    /** CONTROLLED progress: how many steps are DONE (0-based: the steps before this one show ✓). Without it the steps remember the
+     *  furthest step reached — a step once passed stays done when `at` goes back. Set it when that progress is GONE: the server
+     *  refused the code at the end, the app sends `at` back to the code step and clears the PINs → `reached={1}`, and the steps
+     *  after it are "next" again, no ✓, no summary. Once set, the APP owns it: raise it as the member goes on (keep
+     *  `reached = max(reached, at)` beside `at`), or a tap back in a `reversible` walk forgets what is after. Read as at least `at`. Lh 2026-09-25 */
+    reached?: number;
     /** UNCONTROLLED: the step it starts on (default 0) */
     defaultAt?: number;
     /** the steps ASK to move — a tap on another step, a swipe, a skip. Controlled: set `at` to it (or don't). */
@@ -24,7 +30,7 @@ export interface SheetStepsProps extends ComponentProps<'div'> {
  * steps on the last one. Goes in a `SheetBody`.
  * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
  */
-export declare function SheetSteps({ at, defaultAt, onAtChange, reversible, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }: SheetStepsProps): import("react").JSX.Element;
+export declare function SheetSteps({ at, reached, defaultAt, onAtChange, reversible, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }: SheetStepsProps): import("react").JSX.Element;
 export interface SheetStepProps extends Omit<ComponentProps<'li'>, 'title'> {
     /** the step's name — always shown: over the open step, on the folded line of a done one */
     title: ReactNode;

package/dist/sheets/SheetSteps.js

@@ -16,7 +16,7 @@ const StepCtx = createContext(null);
  * steps on the last one. Goes in a `SheetBody`.
  * The sheet may be dragged down to peek and back — the body keeps where it was scrolled.
  */
-export function SheetSteps({ at, defaultAt = 0, onAtChange, reversible = false, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }) {
+export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible = false, finish, className, style, children, onFocus, onBlur, onPointerDown, onPointerUp, onPointerCancel, ...rest }) {
     const [inner, setInner] = useState(defaultAt);
     const current = at ?? inner;
     const steps = Children.toArray(children).filter(isValidElement);
@@ -25,7 +25,9 @@ export function SheetSteps({ at, defaultAt = 0, onAtChange, reversible = false,
     const [furthest, setFurthest] = useState(current);
     if (current > furthest)
         setFurthest(current);
-    const reach = Math.max(furthest, current);
+    if (reached != null && furthest !== Math.max(reached, current))
+        setFurthest(Math.max(reached, current)); // the app's word wins, and is remembered from there
+    const reach = reached != null ? Math.max(reached, current) : Math.max(furthest, current);
     const ref = useRef(null);
     const first = useRef(true);
     const holderRef = useRef(null);

package/dist/type/Text.d.ts

@@ -17,6 +17,9 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
     /** the element; defaults per level (h2 for display/h1/h2, p for title/body/stat, span for the rest) */
     /** READ, NOT SHOWN: the words stay in the page for a screen reader (a page's h1 that the design does not show), and take no room */
     sr?: boolean;
+    /** the member may select and copy these words (a code, an address, a reference number) — everything else in a Screen is not
+     *  selectable, like a native app (Lh 2026-09-25) */
+    selectable?: boolean;
     as?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'strong' | 'div';
 }
 /**
@@ -24,7 +27,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  * Headings inside a card head are h2 by default; a screen title in a TopBar is h1.
  * Everything scales from the root font-size, so there are no pixel sizes to pick.
  */
-export declare function Text({ level, xl, mono, muted, caps, grow, sr, as, className, ...rest }: TextProps): import("react").DetailedReactHTMLElement<{
+export declare function Text({ level, xl, mono, muted, caps, grow, sr, selectable, as, className, ...rest }: TextProps): import("react").DetailedReactHTMLElement<{
     /** the element it renders (React 19 passes `ref` as a prop) */
     ref?: React.Ref<HTMLElement>;
     defaultChecked?: boolean | undefined;

package/dist/type/Text.js

@@ -8,9 +8,9 @@ const DEFAULT_AS = {
  * Headings inside a card head are h2 by default; a screen title in a TopBar is h1.
  * Everything scales from the root font-size, so there are no pixel sizes to pick.
  */
-export function Text({ level, xl, mono, muted, caps, grow, sr, as, className, ...rest }) {
+export function Text({ level, xl, mono, muted, caps, grow, sr, selectable, as, className, ...rest }) {
     return createElement(as ?? DEFAULT_AS[level] ?? 'span', {
-        className: cx(`t-${level}`, level === 'stat' && xl && 't-stat--xl', level === 'stat' && mono && 't-stat--mono', muted && 't-muted', caps && 't-caps', grow && 'grow', sr && 't-sr', className),
+        className: cx(`t-${level}`, level === 'stat' && xl && 't-stat--xl', level === 'stat' && mono && 't-stat--mono', muted && 't-muted', caps && 't-caps', grow && 'grow', sr && 't-sr', selectable && 't-select', className),
         ...rest,
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "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.",