@usableapp/cardds 0.7.47 → 0.7.49

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 > 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.49 — 2026-10-03
+
+### Fixed
+- **`Pin` on an iPhone: the digits can be read** (Lh 2026-10-03, timebank): iOS gives a text field half an em of padding each side — more than a Pin cell is wide — so a typed digit had no room, started at the cell's middle and ran out of it (a few slivers of ink). The cell now has no padding and no platform look; it is also 2:3 on iOS as everywhere (it stood taller). Nothing to change in a screen.
+- **`Pin`: a cell that cannot be typed into yet does not look ready** — a phone opens its keyboard on a tap, not when a script sets the cursor (a sheet arriving, a step opening). On a touch screen, a cell that got the cursor that way with no keyboard up shows the resting border and no caret, until a finger taps a cell, the keyboard is up, or a digit arrives. A desktop is unchanged.
+- **`SheetSteps`: a digit typed while a step is opening is not lost** — it used to be dropped (the cursor waits in a hidden holder while the step folds, and on an iPhone the keyboard could stay there); it now lands in the open step's first field, and the cursor with it.
+
+### Changed
+- **One look on every phone** (Lh 2026-10-03): the browser's own padding, margin, corners, field look and button colour are taken off every `button`, text `input` and `textarea` once, at zero specificity — iOS, Android and a desktop each gave their own numbers (iOS: 0.5em a side on a field, 1em on a button, system-blue words on an unstyled button). cardds's own rules are untouched; on a desktop nothing changes size (the words in a `Field` start 2px further left). **If your app has its own `<button>` or `<input>` with no styling inside a cardds page, it loses the browser's padding and look too — give it a cardds component or its own rule.** `html` also gets `text-size-adjust: 100%` (an iPhone turned sideways no longer enlarges the words).
+- **A `Sheet`'s long title runs sideways** like a song title, instead of being cut with `…` (Lh 2026-10-03): still one line; it waits, runs to its end, waits, starts again. With reduced motion it is cut with `…` as before. Knob `--sheet-title-run-time`. Nothing to change in a screen. Story `Sheet · LongTitle`.
+
+## 0.7.48 — 2026-10-03
+
+### Changed
+- **A sheet going away has a rest of its own** (Lh 2026-10-03): when a `Sheet` slides to `away`, it is settled `--motion-sheet-rest` (0.2s) AFTER it landed — every time, whether or not another sheet follows. So `onSettled('away')` now fires 0.2s later than in 0.7.47 (slide 0.35s + rest 0.2s); an app that unmounts the sheet or moves on from `onSettled('away')` does so a beat later. A sheet asked up in the same box meanwhile waits until the one leaving is settled. What a member sees when one sheet follows another is as in 0.7.47 (down · the base · up); what changed is whose timeout it is — the sheet that slid out, not the one coming up. Only going away rests: peek ↔ full is as before. Nothing to change in a screen; add no timer of your own.
+
+### Added
+- **A `Track` as the top of a map screen**: `<Screen fill top={<Track>…</Track>}>` over a `SheetStage` — the track is a layer on the stage (the map shows around it, to the screen's top), and the sheet at full stops 16px under it. Story `MapArea · TrackOnTop`.
+
 ## 0.7.47 — 2026-10-03
 
 ### Changed

package/css/base.css

@@ -39,6 +39,16 @@ body {
 
 img, svg { display: block; max-width: 100%; }
 button { font: inherit; }
+/* ONE LOOK ON EVERY PHONE (Lh 2026-10-03, after the Pin on an iPhone): a browser dresses a button and a text field in its
+   platform's own clothes — iOS gives a field 0.5em of padding a side, rounded corners, its own ground; a button 1em a side and
+   the system's blue words; Android and a desktop give other numbers. cardds draws every control WHOLE, so none of that may show
+   through: the platform's padding, margin, corners, look and colour are taken off here, once, at zero specificity — a
+   component's own rule always wins, this only fills in where it says nothing. What a control looks like is then cardds's
+   alone, the same on iOS, Android and a desktop. (Checkboxes, radios, ranges and file inputs are drawn by their own rules.) */
+html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* an iPhone turned on its side must not blow the words up */
+:where(button, input, textarea, select) { margin: 0; border-radius: 0; }
+:where(button, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), textarea) { padding: 0; -webkit-appearance: none; appearance: none; }
+:where(button) { color: inherit; }
 button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* zero-specificity reset for controls that draw nothing of their own (2026-09-27 review):

package/css/choice.css

@@ -186,6 +186,10 @@
   min-width: 0;
   max-width: var(--pin-cell-max-w, var(--fab));
   aspect-ratio: 2 / 3;
+  padding: 0; /* iPhone (Lh 2026-10-03): WebKit on iOS gives a text field 0.5em of padding each side — of a 40px digit that is more
+    than the pill is wide, so the field had NO room for its text: the digit started at the pill's middle and ran out of it, a few
+    slivers of ink at the edge. The pill centres its digit itself; it needs no padding on any platform. */
+  -webkit-appearance: none; appearance: none; /* the pill is drawn here, whole — no platform field look under it */
   border: var(--border-w) solid var(--pin-cell-border, var(--outline));
   border-radius: var(--pin-cell-radius, var(--r-chip));
   background: var(--pin-cell-bg, var(--action-bg));
@@ -215,6 +219,10 @@
 @keyframes pin-flash { 0% { -webkit-text-fill-color: currentColor; background-size: 0 0; } }
 .pin--secret .pin__cell::selection { background: transparent; } /* its digit is selected when the cell takes the cursor: nothing to show of it */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
+/* asleep (Pin sets it): the cursor was put here by a script on a phone and no keyboard is up — nothing can be typed until a tap, so
+   the cell does not say "ready": the resting border, no caret */
+.pin--asleep .pin__cell:focus { border-color: var(--pin-cell-border, var(--outline)); }
+.pin--asleep .pin__cell:focus:placeholder-shown { background-image: none; animation: none; }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);
   background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);

package/css/sheet.css

@@ -211,10 +211,22 @@
      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 */
+/* a sheet's title is ONE line, always (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. A title too long for the line RUNS sideways
+   like a song title (Lh 2026-10-03, as the StackSheet's — it was cut with …, and the end of it could never be read): the Sheet
+   measures --_over, the width it overflows by, and sets .is-long; one way — it waits, runs to its end, waits, and starts again
+   from the first letter. The move is text-indent: the heading is the app's own element, there is no inner box to slide.
+   Before the Sheet has measured, and where motion is off, it is cut with …. */
 .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 > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; min-width: 0; } /* clip SIDEWAYS only: hidden cut the Thai tone marks over the line */
+.sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long {
+  text-overflow: clip;
+  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, 6s)) ease-in-out infinite; /* --_run: from the overflow, 30px a second + the pauses */
+}
+@keyframes sheet-title-run { 0%, 20% { text-indent: 0; } 85%, 100% { text-indent: calc(-1 * var(--_over)); } }
+@media (prefers-reduced-motion: reduce) {
+  .sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long { animation: none; text-overflow: ellipsis; }
+}
 .sheet__head {
   display: grid;
   grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);

package/css/step.css

@@ -150,6 +150,17 @@
   margin-top: var(--track-top-lead, var(--sp-4));
   margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
 }
+/* …and over a STAGE (a map behind a sheet, Lh 2026-10-03): the stage is the whole screen, so the track is a LAYER on it — the map
+   shows around the pill — and the stage keeps the track's line free itself: a sheet at full stops --track-top-gap under the
+   track, as in a step. --top-h is the track's own height, measured by Screen (a numbered track grows with the text). */
+.screen--fill > .track:first-child:has(+ .sheet-stage) {
+  position: absolute; z-index: 1;
+  inset: calc(var(--safe-top) + var(--track-top-lead, var(--sp-4))) var(--screen-pad) auto;
+  margin: 0;
+}
+.screen--fill > .track:first-child + .sheet-stage {
+  --_top: calc(var(--track-top-lead, var(--sp-4)) + var(--top-h, var(--header-h)) + var(--track-top-gap, var(--sp-4)));
+}
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
    the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }

package/dist/cardds.css

@@ -508,6 +508,16 @@ body {
 
 img, svg { display: block; max-width: 100%; }
 button { font: inherit; }
+/* ONE LOOK ON EVERY PHONE (Lh 2026-10-03, after the Pin on an iPhone): a browser dresses a button and a text field in its
+   platform's own clothes — iOS gives a field 0.5em of padding a side, rounded corners, its own ground; a button 1em a side and
+   the system's blue words; Android and a desktop give other numbers. cardds draws every control WHOLE, so none of that may show
+   through: the platform's padding, margin, corners, look and colour are taken off here, once, at zero specificity — a
+   component's own rule always wins, this only fills in where it says nothing. What a control looks like is then cardds's
+   alone, the same on iOS, Android and a desktop. (Checkboxes, radios, ranges and file inputs are drawn by their own rules.) */
+html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* an iPhone turned on its side must not blow the words up */
+:where(button, input, textarea, select) { margin: 0; border-radius: 0; }
+:where(button, input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), textarea) { padding: 0; -webkit-appearance: none; appearance: none; }
+:where(button) { color: inherit; }
 button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 
 /* zero-specificity reset for controls that draw nothing of their own (2026-09-27 review):
@@ -1536,10 +1546,22 @@ 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 */
+/* a sheet's title is ONE line, always (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. A title too long for the line RUNS sideways
+   like a song title (Lh 2026-10-03, as the StackSheet's — it was cut with …, and the end of it could never be read): the Sheet
+   measures --_over, the width it overflows by, and sets .is-long; one way — it waits, runs to its end, waits, and starts again
+   from the first letter. The move is text-indent: the heading is the app's own element, there is no inner box to slide.
+   Before the Sheet has measured, and where motion is off, it is cut with …. */
 .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 > .card__head > :is(h1, h2, h3):first-child, .sheet__title { white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; min-width: 0; } /* clip SIDEWAYS only: hidden cut the Thai tone marks over the line */
+.sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long {
+  text-overflow: clip;
+  animation: sheet-title-run var(--sheet-title-run-time, var(--_run, 6s)) ease-in-out infinite; /* --_run: from the overflow, 30px a second + the pauses */
+}
+@keyframes sheet-title-run { 0%, 20% { text-indent: 0; } 85%, 100% { text-indent: calc(-1 * var(--_over)); } }
+@media (prefers-reduced-motion: reduce) {
+  .sheet > .card__head > :is(h1, h2, h3):first-child.is-long, .sheet__title.is-long { animation: none; text-overflow: ellipsis; }
+}
 .sheet__head {
   display: grid;
   grid-template-columns: var(--tap-sm) 1fr var(--tap-sm);
@@ -1911,6 +1933,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   margin-top: var(--track-top-lead, var(--sp-4));
   margin-bottom: calc(var(--track-top-gap, var(--sp-4)) - var(--screen-gap));
 }
+/* …and over a STAGE (a map behind a sheet, Lh 2026-10-03): the stage is the whole screen, so the track is a LAYER on it — the map
+   shows around the pill — and the stage keeps the track's line free itself: a sheet at full stops --track-top-gap under the
+   track, as in a step. --top-h is the track's own height, measured by Screen (a numbered track grows with the text). */
+.screen--fill > .track:first-child:has(+ .sheet-stage) {
+  position: absolute; z-index: 1;
+  inset: calc(var(--safe-top) + var(--track-top-lead, var(--sp-4))) var(--screen-pad) auto;
+  margin: 0;
+}
+.screen--fill > .track:first-child + .sheet-stage {
+  --_top: calc(var(--track-top-lead, var(--sp-4)) + var(--top-h, var(--header-h)) + var(--track-top-gap, var(--sp-4)));
+}
 /* a walk page that OPENS on a picture (Lh 2026-09-23): the picture takes the lead's room — as wide as the content (edge to edge), from the top edge, as tall as
    the lead + the picture's own height (--page-media-h), square — so the words start where they always did */
 .step > .pages > .page:has(> :is(img, .ph):first-child) { margin-top: 0; }
@@ -3029,6 +3062,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   min-width: 0;
   max-width: var(--pin-cell-max-w, var(--fab));
   aspect-ratio: 2 / 3;
+  padding: 0; /* iPhone (Lh 2026-10-03): WebKit on iOS gives a text field 0.5em of padding each side — of a 40px digit that is more
+    than the pill is wide, so the field had NO room for its text: the digit started at the pill's middle and ran out of it, a few
+    slivers of ink at the edge. The pill centres its digit itself; it needs no padding on any platform. */
+  -webkit-appearance: none; appearance: none; /* the pill is drawn here, whole — no platform field look under it */
   border: var(--border-w) solid var(--pin-cell-border, var(--outline));
   border-radius: var(--pin-cell-radius, var(--r-chip));
   background: var(--pin-cell-bg, var(--action-bg));
@@ -3058,6 +3095,10 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 @keyframes pin-flash { 0% { -webkit-text-fill-color: currentColor; background-size: 0 0; } }
 .pin--secret .pin__cell::selection { background: transparent; } /* its digit is selected when the cell takes the cursor: nothing to show of it */
 .pin__cell:focus { outline: none; border-color: var(--pin-cell-active-border, currentColor); }
+/* asleep (Pin sets it): the cursor was put here by a script on a phone and no keyboard is up — nothing can be typed until a tap, so
+   the cell does not say "ready": the resting border, no caret */
+.pin--asleep .pin__cell:focus { border-color: var(--pin-cell-border, var(--outline)); }
+.pin--asleep .pin__cell:focus:placeholder-shown { background-image: none; animation: none; }
 .pin__cell:focus:placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);
   background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);

package/dist/forms/Pin.js

@@ -73,6 +73,21 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
     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);
+    /* ASLEEP (iPhone, Lh 2026-10-03): a phone opens its keyboard on a TAP, not when a script sets the cursor (a sheet arriving, a step
+       opening). A cell that got the cursor that way with no keyboard up cannot be typed into yet — it must not look ready: no full
+       border, no caret, until a finger taps a cell, the keyboard is up, or a digit arrives. Never on a desktop (a key is at hand). */
+    const [asleep, setAsleep] = useState(false);
+    const tapped = useRef(0);
+    const keyboardUp = () => { const vv = window.visualViewport; return !!vv && window.innerHeight - vv.height > 120; };
+    const wake = () => { tapped.current = performance.now(); setAsleep(false); };
+    useEffect(() => {
+        if (!asleep)
+            return;
+        const vv = window.visualViewport, check = () => { if (keyboardUp())
+            setAsleep(false); };
+        vv?.addEventListener('resize', check);
+        return () => vv?.removeEventListener('resize', check);
+    }, [asleep]);
     const [fresh, setFresh] = useState(null); // the cell whose digit was just typed: a secret Pin shows it for a moment
     useEffect(() => {
         if (!errOn) {
@@ -95,6 +110,7 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
         // eslint-disable-next-line react-hooks/exhaustive-deps -- when the code is emptied from outside
     }, [code]);
     const input = (i) => (e) => {
+        wake(); // a digit arrived: the keyboard is there — and the cell the Pin moves on to is ready too
         const digits = e.target.value.replace(/\D/g, '');
         if (restart.current) { // a new try after a wrong code: what arrives starts a new code from the first cell
             restart.current = false;
@@ -133,6 +149,7 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
         cell(Math.min(digits.length, length - 1))?.focus();
     };
     const key = (i) => (e) => {
+        wake();
         if (e.key === 'Backspace' && !e.currentTarget.value && i > 0) {
             e.preventDefault();
             setFresh(null);
@@ -148,11 +165,16 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
             cell(i + 1)?.focus();
         }
     };
-    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')
+    return (_jsx("div", { ref: ref, className: cx('pin', secret && 'pin--secret', wrong && 'pin--error', shake && 'pin--shake', asleep && 'pin--asleep', className), ...rest, onPointerDown: (e) => { wake(); rest.onPointerDown?.(e); }, onBlur: (e) => { if (!e.currentTarget.contains(e.relatedTarget))
+            setAsleep(false); rest.onBlur?.(e); }, onAnimationEnd: (e) => { if (e.animationName === 'pin-shake')
             setShake(false); if (e.animationName === 'pin-flash')
             setFresh(null); 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: cx('pin__cell', secret && fresh === i && 'is-fresh'), 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))) }));
+        _jsx("input", { className: cx('pin__cell', secret && fresh === i && 'is-fresh'), 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();
+                if (performance.now() - tapped.current > 700 && window.matchMedia('(pointer: coarse)').matches && !keyboardUp())
+                    setAsleep(true); // set by a script, on a phone, no keyboard: not ready
+            } }, i))) }));
 }

package/dist/scaffold/Screen.js

@@ -28,6 +28,15 @@ export function Screen({ fill, palette, as = 'div', top, bottom, ready = true, c
         }
         return watchSize([bar], () => el.style.setProperty('--bottom-h', `${bar.offsetHeight}px`));
     }, [bottom, ready]);
+    /* a TRACK as the top, over a stage: its height published as --top-h — the stage keeps that line free for it (step.css) */
+    useEffect(() => {
+        const el = own.current, track = el?.querySelector(':scope > .track:first-child');
+        if (!el || !track) {
+            el?.style.removeProperty('--top-h');
+            return;
+        }
+        return watchSize([track], () => el.style.setProperty('--top-h', `${track.offsetHeight}px`));
+    }, [top, ready]);
     const setRef = (node) => {
         own.current = node;
         if (typeof ref === 'function')

package/dist/sheets/Sheet.d.ts

@@ -14,7 +14,8 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
     /** the sheet ASKS to move — the handle was tapped or dragged, a field in a peeked sheet took focus, the keyboard moved the cut.
      *  Controlled: set your state to it (or don't — the sheet stays). This is where an app ties a sheet to its router / back button. */
     onStateChange?: (state: SheetState, reason: SheetChangeReason) => void;
-    /** the sheet has FINISHED sliding to `state` (its transition ended; at once where motion is off). To leave the screen: set `away`, and take the
+    /** the sheet has FINISHED its move to `state` (its transition ended; at once where motion is off). Going `away` it is finished a beat
+     *  AFTER it landed (`--motion-sheet-rest`) — its own timeout, every time. To leave the screen: set `away`, and take the
      *  sheet out of the tree here — `onSettled={(s) => s === 'away' && setMounted(false)}` — so it slides out instead of vanishing */
     onSettled?: (state: SheetState) => void;
     /** the states a drag snaps to and a reveal may climb through — "peek half full", or an array (default all four) */
@@ -38,10 +39,10 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
  * `{open && <Sheet state="full">}` slides in. Leaving is the app's beat: set `away`, and unmount on `onSettled('away')` — unmount it
  * while it is still up and it can only vanish (a dev warning says so).
  *
- * ONE FOLLOWS ANOTHER: a sheet that comes up while another sheet of the same box is on its way out waits — the leaving one goes
- * ALL the way down, the base is seen for a beat (`--motion-sheet-rest`), and only then it rises: "one left, another came", never two
- * sheets crossing and never one continuous move. It is the Sheet's own habit, whatever the app's wiring (both states set in one
- * render, or the next raised from the first's `onSettled`) — the app adds no timer.
+ * GOING AWAY HAS A REST: a sheet that slides out is settled a beat after it landed (`--motion-sheet-rest`, the base is seen) — a
+ * fixed habit of every sheet. A sheet asked up in the same box meanwhile waits for it: "one left, another came", never two sheets
+ * crossing and never one continuous move, whatever the app's wiring (both states set in one render, or the next raised from the
+ * first's `onSettled`) — the app adds no timer.
  */
 export declare function Sheet({ state, defaultState, onStateChange, onSettled, states, handle, className, children, onFocus, ...rest }: SheetProps): import("react").JSX.Element;
 export {};

package/dist/sheets/Sheet.js

@@ -6,8 +6,14 @@ import { word } from '../words.js';
 const ORDER = ['peek', 'half', '3q', 'full']; // low → high; `away` is below them all and outside them
 const RANK = { away: 0, peek: 1, half: 2, '3q': 3, full: 4 };
 const TAP_REM = 0.5; // = --sp-2: a move shorter than this is a tap, not a drag
-/* ONE SHEET FOLLOWS ANOTHER (Lh 2026-10-03): when a box's sheet landed away, per box — a sheet coming up reads it to give the base its beat */
-const landed = new WeakMap();
+/* A SHEET THAT GOES AWAY IS NOT DONE WHEN IT LANDS (Lh 2026-10-03): it holds its box for a beat more (--motion-sheet-rest) — the base
+   is seen — and only then is it settled. `out` = the sheets still on their way out, per box; a sheet asked up in that box waits for it to empty. */
+const out = new WeakMap();
+const waiting = new WeakMap();
+const leave = (box, key) => { if (!out.has(box))
+    out.set(box, new Set()); out.get(box).add(key); };
+const gone = (box, key) => { const set = out.get(box); if (set?.delete(key) && !set.size)
+    [...(waiting.get(box) ?? [])].forEach((go) => go()); };
 const ms = (t) => Math.max(0, ...t.split(',').map((v) => parseFloat(v) * (v.trim().endsWith('ms') ? 1 : 1000) || 0)); // a computed `0.35s, 0s` list → its longest, in ms
 /**
  * Sheet — the SINGLE sheet: one card as a bottom sheet holding what the member ACTS on. Always the full height of its
@@ -25,10 +31,10 @@ const ms = (t) => Math.max(0, ...t.split(',').map((v) => parseFloat(v) * (v.trim
  * `{open && <Sheet state="full">}` slides in. Leaving is the app's beat: set `away`, and unmount on `onSettled('away')` — unmount it
  * while it is still up and it can only vanish (a dev warning says so).
  *
- * ONE FOLLOWS ANOTHER: a sheet that comes up while another sheet of the same box is on its way out waits — the leaving one goes
- * ALL the way down, the base is seen for a beat (`--motion-sheet-rest`), and only then it rises: "one left, another came", never two
- * sheets crossing and never one continuous move. It is the Sheet's own habit, whatever the app's wiring (both states set in one
- * render, or the next raised from the first's `onSettled`) — the app adds no timer.
+ * GOING AWAY HAS A REST: a sheet that slides out is settled a beat after it landed (`--motion-sheet-rest`, the base is seen) — a
+ * fixed habit of every sheet. A sheet asked up in the same box meanwhile waits for it: "one left, another came", never two sheets
+ * crossing and never one continuous move, whatever the app's wiring (both states set in one render, or the next raised from the
+ * first's `onSettled`) — the app adds no timer.
  */
 export function Sheet({ state, defaultState = 'half', onStateChange, onSettled, states, handle = true, className, children, onFocus, ...rest }) {
     const [current, request] = useControlled(state, defaultState, onStateChange);
@@ -38,10 +44,17 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
     const was = useRef('away'); // mounted up = it came onto the screen: it rises from away like any arrival
     const skipClick = useRef(false);
     const [entered, setEntered] = useState(false); // false for the first frame: the class says `away`, so a sheet mounted up has somewhere to slide from
-    const [held, setHeld] = useState(false); // true while it waits for the sheet before it to land and the base to be seen
+    const me = useRef({}).current; // this sheet, in its box's list of sheets on their way out
+    const [held, setHeld] = useState(false); // true while it waits for the sheet going away before it to be settled
+    const [prev, setPrev] = useState('away'); // asked up from `away` (or mounted up): it holds first, and rises once its box is free
+    if (prev !== current) {
+        setPrev(current);
+        setHeld(prev === 'away' && current !== 'away');
+    }
     const shown = entered && !held ? current : 'away';
     const live = held ? 'away' : current; // where it is as far as its own habits go: a held sheet has not come up yet
     const latest = useLatest({ current, onSettled });
+    const last = useRef('away'); // where it was last SHOWN (the settle effect keeps it)
     const drag = useRef(null);
     const allowed = useCallback(() => {
         const list = (typeof states === 'string' ? states.split(/\s+/) : [...(states ?? [])]).filter((s) => ORDER.includes(s));
@@ -51,72 +64,54 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         void ref.current?.offsetHeight; // the browser styles the `away` frame first, or there is no transition to run
         setEntered(true);
     }, []);
-    /* ONE FOLLOWS ANOTHER: it is asked up from `away` (or mounted up) while a sibling sheet is still leaving — or landed less than the
-       rest ago: it holds at `away` until that one's slide has ended and the base has been seen for --motion-sheet-rest. Read from the
-       DOM in the commit itself (a leaving sibling already says `away` but still stands in the box), so the order of the two sheets
-       in the tree, and whether the app set both in one render or one after the other, make no difference. */
-    const before = useRef('away');
+    /* it starts on its way out: said in the commit itself, before any sheet of the box decides to rise */
     useLayoutEffect(() => {
-        const el = ref.current, box = el?.parentElement, from = before.current;
-        before.current = current;
-        if (!el || !box || from !== 'away' || current === 'away' || reducedMotion()) {
-            setHeld(false);
+        const box = ref.current?.parentElement;
+        if (box && current === 'away' && last.current !== 'away' && !reducedMotion())
+            leave(box, me);
+    }, [current, me]);
+    /* held: it rises when no sheet of its box is on its way out — at once if none is */
+    useEffect(() => {
+        const box = ref.current?.parentElement;
+        if (!held)
             return;
-        }
-        const rest = ms(getComputedStyle(el).getPropertyValue('--motion-sheet-rest') || '0s');
-        const floor = box.getBoundingClientRect().bottom - 1;
-        const leaving = [...box.querySelectorAll(':scope > .sheet--away')].filter((s) => s !== el && s.getBoundingClientRect().top < floor);
-        const since = performance.now() - (landed.get(box) ?? -Infinity);
-        if (!leaving.length && since >= rest) {
+        if (!box || !out.get(box)?.size) {
             setHeld(false);
             return;
         }
-        setHeld(true);
-        let timer = 0, left = leaving.length;
-        const go = (after) => { timer = window.setTimeout(() => setHeld(false), after); };
-        if (!left) {
-            go(rest - since);
-            return () => clearTimeout(timer);
-        }
-        const stops = leaving.map((s) => {
-            let done = false;
-            const end = () => { if (done)
-                return; done = true; clearTimeout(t); s.removeEventListener('transitionend', onEnd); if (--left === 0)
-                go(rest); };
-            const onEnd = (e) => { if (e.target === s && e.propertyName === 'translate')
-                end(); };
-            const cs = getComputedStyle(s);
-            s.addEventListener('transitionend', onEnd);
-            const t = setTimeout(end, ms(cs.transitionDuration) + ms(cs.transitionDelay) + 100);
-            return () => { done = true; clearTimeout(t); s.removeEventListener('transitionend', onEnd); };
-        });
-        return () => { stops.forEach((stop) => stop()); clearTimeout(timer); };
-    }, [current]);
+        const go = () => setHeld(false);
+        if (!waiting.has(box))
+            waiting.set(box, new Set());
+        waiting.get(box).add(go);
+        return () => { waiting.get(box)?.delete(go); };
+    }, [held]);
     /* it has finished moving: the transition ended (or at once where there is none) — say so once per move; a move cut short by another says nothing */
-    const last = useRef(shown);
     useEffect(() => {
-        const el = ref.current;
+        const el = ref.current, box = el?.parentElement;
         if (!el || last.current === shown)
             return;
         last.current = shown;
         const cs = getComputedStyle(el);
-        let done = false;
+        let done = false, rest = 0;
+        const settled = () => { if (box)
+            gone(box, me); latest.current.onSettled?.(latest.current.current); };
         const end = () => {
             if (done)
                 return;
             done = true;
             clearTimeout(t);
             el.removeEventListener('transitionend', onEnd);
-            if (shown === 'away' && el.parentElement)
-                landed.set(el.parentElement, performance.now()); // the sheet after it counts its rest from here
-            latest.current.onSettled?.(latest.current.current);
+            if (shown !== 'away' || reducedMotion())
+                return settled();
+            rest = window.setTimeout(settled, ms(cs.getPropertyValue('--motion-sheet-rest') || '0s')); // landed: the base is seen for the rest, THEN it is settled
         };
         const onEnd = (e) => { if (e.target === el && e.propertyName === 'translate')
             end(); };
         el.addEventListener('transitionend', onEnd);
         const t = setTimeout(end, ms(cs.transitionDuration) + ms(cs.transitionDelay) + 100); // no transition (motion off) or none came: settled anyway
-        return () => { done = true; clearTimeout(t); el.removeEventListener('transitionend', onEnd); };
-    }, [shown, latest]);
+        return () => { done = true; clearTimeout(t); clearTimeout(rest); el.removeEventListener('transitionend', onEnd); if (box && shown === 'away')
+            gone(box, me); }; // cut short on its way out (raised again, unmounted): the box is free
+    }, [shown, latest, me]);
     /* taken out of the tree while it is still up — the box stays, the sheet goes: nothing to slide, so it vanishes. Said once in dev.
        (A whole screen leaving takes the box too; StrictMode's trial unmount is over by the time the timer looks.) */
     const alive = useRef(false);
@@ -225,6 +220,26 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         const stop = watchSize([head], publish);
         return () => { stop(); box.style.removeProperty('--sheet-peek'); };
     }, []);
+    /* the TITLE is one line; too long for it, it runs sideways like a song title (Lh 2026-10-03): the sheet measures how far its
+       words overflow the line and hands it to the CSS (--_over, --_run, .is-long — sheet.css). Measured on the words themselves
+       (a range), so the running indent never feeds back into the number. */
+    useEffect(() => {
+        const el = ref.current, title = el?.querySelector(':scope > .card__head > :is(h1, h2, h3):first-child, :scope > .sheet__head .sheet__title');
+        if (!el || !title)
+            return;
+        const measure = () => {
+            const words = document.createRange();
+            words.selectNodeContents(title);
+            const over = Math.max(0, Math.ceil(words.getBoundingClientRect().width - title.clientWidth));
+            title.style.setProperty('--_over', `${over}px`);
+            title.style.setProperty('--_run', `${(over / 30 + 3).toFixed(1)}s`);
+            title.classList.toggle('is-long', over > 0);
+        };
+        const stop = watchSize([title], measure);
+        const mo = new MutationObserver(measure);
+        mo.observe(title, { childList: true, characterData: true, subtree: true }); // the app changed the words
+        return () => { stop(); mo.disconnect(); title.classList.remove('is-long'); title.style.removeProperty('--_over'); title.style.removeProperty('--_run'); };
+    });
     /* the FOOT's room follows what the foot really holds (timebank, Lh 2026-10-01): a button grows with the member's text size, a
        line may stand over it (an error) — the CSS strip was a fixed sum (--btn-h), so the body's words ran under the button. The
        sheet measures its foot's rows and publishes --sheet-foot-h; the strip, its ground and the body's stop all read it. */

package/dist/sheets/SheetSteps.js

@@ -180,7 +180,20 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         else if (dy < 0 && ref.current?.querySelector('.sheet-step--now[data-skippable]'))
             go(to, 'skip'); // forward only, and only past a step that may be skipped
     };
-    return (_jsxs("div", { ref: ref, className: cx('sheet-steps', !reversible && 'sheet-steps--locked', className), style: style, onFocus: focusIn, onBlur: focusOut, onPointerDown: down, onPointerUp: up, onPointerCancel: (e) => { onPointerCancel?.(e); press.current = null; }, ...rest, children: [_jsx("input", { ref: holderRef, className: "sheet-steps__holder", "aria-hidden": true, tabIndex: -1, autoComplete: "off", onInput: (e) => { e.currentTarget.value = ''; } }), _jsx("ol", { className: "sheet-steps__track", children: steps.map((step, i) => (_jsx(StepCtx.Provider, { value: { numbered, i, at: current, furthest: reach, count, reversible, go }, children: step }, step.key ?? i))) }), finish != null && ( // always in sight; it takes taps only once every step is done (or skipped)
+    return (_jsxs("div", { ref: ref, className: cx('sheet-steps', !reversible && 'sheet-steps--locked', className), style: style, onFocus: focusIn, onBlur: focusOut, onPointerDown: down, onPointerUp: up, onPointerCancel: (e) => { onPointerCancel?.(e); press.current = null; }, ...rest, children: [_jsx("input", { ref: holderRef, className: "sheet-steps__holder", "aria-hidden": true, tabIndex: -1, autoComplete: "off", onInput: (e) => {
+                    /* typed while the cursor waits here (the fold is playing — or, on an iPhone, the keyboard never followed the cursor into the
+                       new step: a focus set by script does not always take the keyboard with it, and every digit landed here and was dropped —
+                       timebank, Lh 2026-10-03): what was typed belongs to the open step's first field. Hand it over, and the cursor with it —
+                       from inside the key's own event, which the phone does follow. */
+                    const typed = e.currentTarget.value;
+                    e.currentTarget.value = '';
+                    const field = ref.current?.querySelector('.sheet-step--now .sheet-step__inner input:not([type=checkbox], [type=radio], [type=hidden])');
+                    if (!typed || !field)
+                        return;
+                    field.focus({ preventScroll: true });
+                    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(field, field.value + typed);
+                    field.dispatchEvent(new Event('input', { bubbles: true }));
+                } }), _jsx("ol", { className: "sheet-steps__track", children: steps.map((step, i) => (_jsx(StepCtx.Provider, { value: { numbered, i, at: current, furthest: reach, count, reversible, go }, children: step }, step.key ?? i))) }), finish != null && ( // always in sight; it takes taps only once every step is done (or skipped)
             _jsx("div", { className: "sheet-steps__finish", children: isValidElement(finish) ? cloneElement(finish, { disabled: reach < count || finish.props.disabled }) : finish }))] }));
 }
 /** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */

package/package.json

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