@usableapp/cardds 0.7.48 → 0.7.50

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 > 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.50 — 2026-10-04
+
+### Fixed
+- **With the keyboard up, the screen's top stays in sight** (Lh 2026-10-04, timebank on an iPhone): when its keyboard opens, an iPhone slides the whole page up to show the field — a sheet's title went over the clock, a `Track` under the camera. cardds now measures that slide (`--vv-top`) and adds it to the screen's top reserve (`--safe-top`), so the top of a fill screen, an `AppBar`, a `Track`, a `Snackbar` stay where they were. Nothing to change in a screen. If your own CSS reads `env(safe-area-inset-top)` directly for something at the top of a cardds screen, read `--safe-top` instead.
+- **`SheetSteps`: the phone's keyboard no longer drops when a step changes** (Lh 2026-10-04, timebank as a home-screen app on an iPhone): the pad went down at every step change and the member had to tap a cell to get it back. On a touch screen the cursor now waits in the steps' hidden holder from the moment the step's button is pressed, and no script moves it after that; the open step's first field shows the cursor (a `Pin`'s caret, a `Field`'s full border) and takes the first key typed. A desktop is unchanged. Nothing to change in a screen — but `document.activeElement` is the holder (`.sheet-steps__holder`) until the first key, not the field: do not test for the field's focus right after a step change on a phone. Arriving on a NEW screen (a route change) still shows no keyboard until a tap — an iPhone allows none.
+- **`Field`: the words keep 12px from the lead icon** — 0.7.49 took the browser's padding off inputs, and the words stood against the icon. The gap is the Field's own now (`--field-gap`, 12px; it was 8px plus the browser's padding: 2px on a desktop, about 13px on an iPhone). If your theme sets `--field-gap`, it still wins.
+
+## 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

package/cardds.js

@@ -11,12 +11,17 @@
    bar and the sheet's control disappear behind the keyboard unless they
    read this; Android with interactive-widget=resizes-content (set it in the
    viewport meta) shrinks the layout viewport, and this stays 0. A pinch zoom
-   also shrinks the visual viewport, and is not a keyboard — ignored. */
+   also shrinks the visual viewport, and is not a keyboard — ignored.
+   --vv-top: how far the phone has PANNED the page up to show a focused field (iOS does it when the keyboard opens, even on
+   a page that cannot scroll): everything on the screen slides up by that much, its top under the status bar and the camera
+   (timebank on an iPhone, Lh 2026-10-04 — a sheet's title over the clock, a Track under the island). The screen's top
+   reserve (--safe-top, tokens.css) adds it, so the top stays where the eye is; --kb already counts it out at the foot. */
 if (window.visualViewport) {
   const vv = window.visualViewport;
   const publish = () => {
     const covered = vv.scale > 1.01 ? 0 : Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop));
     document.documentElement.style.setProperty('--kb', covered + 'px');
+    document.documentElement.style.setProperty('--vv-top', (vv.scale > 1.01 ? 0 : Math.max(0, Math.round(vv.offsetTop))) + 'px');
   };
   vv.addEventListener('resize', publish);
   vv.addEventListener('scroll', publish);

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));
@@ -214,15 +218,20 @@
 .pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, 0.5s) steps(1); }
 @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); }
-.pin__cell:focus:placeholder-shown {
+.pin__cell:focus { outline: none; }
+.pin__cell:is(:focus, [data-cursor]) { border-color: var(--pin-cell-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this cell — it shows the cursor it is about to get */
+/* 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:is(:focus, [data-cursor]):placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);
   background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);
   background-position: center;
   background-repeat: no-repeat;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .pin__cell:focus:placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
+  .pin__cell:is(:focus, [data-cursor]):placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
   @keyframes pin-caret { 50% { background-size: 0 0; } }
 }
 

package/css/forms.css

@@ -7,7 +7,8 @@
 .field {
   display: flex;
   align-items: center;
-  gap: var(--field-gap, var(--sp-2));
+  gap: var(--field-gap, var(--sp-3)); /* 12 between the lead icon and the words: the field's OWN room (Lh 2026-10-04) — it was sp-2 plus whatever padding the
+    browser gave the input (2px on a desktop, 0.5em on an iPhone); with that padding taken off (base.css) the words stood against the icon */
   border: var(--border-w) solid var(--field-border, var(--action-border));
   border-radius: var(--field-radius, var(--r-control));
   background: var(--field-bg, var(--action-bg));
@@ -30,7 +31,7 @@
 }
 .field input::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
 /* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
-.field:has(:focus) { border-color: var(--field-active-border, currentColor); }
+.field:has(:focus, [data-cursor]) { border-color: var(--field-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this field */
 
 /* field with its action inside: date pick, send, go — the button sits flush right */
 .field--action { padding-right: var(--sp-1); min-height: var(--field-action-min-h, var(--tap-lg)); }

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/tokens.css

@@ -256,7 +256,7 @@
   --signal-error-soft: color-mix(in srgb, var(--signal-error) 14%, var(--surface));
   --signal-info-soft: color-mix(in srgb, var(--signal-info) 14%, var(--surface));
 }
-:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
+:root { --safe-top: calc(env(safe-area-inset-top, 0px) + var(--vv-top, 0px)); /* + the phone's pan while a keyboard is up (cardds.js) */ --safe-bottom: env(safe-area-inset-bottom, 0px); }
 * { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
 
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }

package/dist/cardds.css

@@ -297,7 +297,7 @@
   --signal-error-soft: color-mix(in srgb, var(--signal-error) 14%, var(--surface));
   --signal-info-soft: color-mix(in srgb, var(--signal-info) 14%, var(--surface));
 }
-:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
+:root { --safe-top: calc(env(safe-area-inset-top, 0px) + var(--vv-top, 0px)); /* + the phone's pan while a keyboard is up (cardds.js) */ --safe-bottom: env(safe-area-inset-bottom, 0px); }
 * { --_safe-b-open: max(0px, var(--safe-bottom) - var(--kb, 0px)); }
 
 @property --sheet-peek { syntax: "<length>"; inherits: true; initial-value: 0px; }
@@ -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);
@@ -1952,7 +1974,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .field {
   display: flex;
   align-items: center;
-  gap: var(--field-gap, var(--sp-2));
+  gap: var(--field-gap, var(--sp-3)); /* 12 between the lead icon and the words: the field's OWN room (Lh 2026-10-04) — it was sp-2 plus whatever padding the
+    browser gave the input (2px on a desktop, 0.5em on an iPhone); with that padding taken off (base.css) the words stood against the icon */
   border: var(--border-w) solid var(--field-border, var(--action-border));
   border-radius: var(--field-radius, var(--r-control));
   background: var(--field-bg, var(--action-bg));
@@ -1975,7 +1998,7 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 .field input::placeholder { color: inherit; opacity: 0.55; font-size: calc(1em * var(--_ph-fit, 1)); } /* --_ph-fit: Field's measure — a placeholder longer than the box shrinks to show whole (Lh 2026-09-25) */
 /* the field the cursor is in: its own border goes full ink, in every palette (the coloured ones fade it to 25% at rest) */
-.field:has(:focus) { border-color: var(--field-active-border, currentColor); }
+.field:has(:focus, [data-cursor]) { border-color: var(--field-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this field */
 
 /* field with its action inside: date pick, send, go — the button sits flush right */
 .field--action { padding-right: var(--sp-1); min-height: var(--field-action-min-h, var(--tap-lg)); }
@@ -3040,6 +3063,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));
@@ -3068,15 +3095,20 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 .pin--secret .pin__cell.is-fresh:not(:placeholder-shown) { animation: pin-flash var(--pin-flash-time, 0.5s) steps(1); }
 @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); }
-.pin__cell:focus:placeholder-shown {
+.pin__cell:focus { outline: none; }
+.pin__cell:is(:focus, [data-cursor]) { border-color: var(--pin-cell-active-border, currentColor); } /* [data-cursor]: SheetSteps holds the phone's keyboard for this cell — it shows the cursor it is about to get */
+/* 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:is(:focus, [data-cursor]):placeholder-shown {
   background-image: linear-gradient(currentColor, currentColor);
   background-size: var(--pin-caret-w, 2px) var(--pin-caret-h, 1em);
   background-position: center;
   background-repeat: no-repeat;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .pin__cell:focus:placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
+  .pin__cell:is(:focus, [data-cursor]):placeholder-shown { animation: pin-caret 1.1s steps(1) infinite; }
   @keyframes pin-caret { 50% { background-size: 0 0; } }
 }
 

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/sheets/Sheet.d.ts

@@ -1,10 +1,9 @@
 import type { ComponentProps } from 'react';
+import { type Resting } from './sheetMeasure.js';
 /** how far the sheet slid. `away` = not on the screen (slid out, inert) — a state the app sets, never one a drag or a tap lands on */
 export type SheetState = 'peek' | 'half' | '3q' | 'full' | 'away';
 /** what asked for the change: the handle's `tap`, a `drag` released, `focus` in a peeked sheet, the `keyboard` (or anything else) moving the cut */
 export type SheetChangeReason = 'tap' | 'drag' | 'focus' | 'keyboard';
-declare const ORDER: readonly ["peek", "half", "3q", "full"];
-type Resting = (typeof ORDER)[number];
 export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'> {
     /** CONTROLLED: where the sheet is. The app owns it — pair it with `onStateChange`, or the sheet cannot move (like `value` without `onChange`).
      *  `peek` (handle + title row) · `half` · `3q` · `full` (its top edge at the top bar) · `away` (not on the screen). A class, never a height. */
@@ -45,4 +44,3 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
  * 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

@@ -1,20 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { focusWhenActive, reducedMotion, useControlled, useLatest, warnOnce, watchSize } from '../state.js';
+import { useCallback, useEffect, useRef } from 'react';
+import { focusWhenActive, useControlled, watchSize } from '../state.js';
 import { cx } from '../cx.js';
 import { word } from '../words.js';
-const ORDER = ['peek', 'half', '3q', 'full']; // low → high; `away` is below them all and outside them
+import { ORDER, slid, stopsOf, useFootRoom, usePeekStrip, useTitleRun } from './sheetMeasure.js';
+import { useSheetSlide } from './sheetSlide.js';
+import { useSheetDrag } from './sheetDrag.js';
 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
-/* 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
  * box — a Step or a SheetStage — a state is only how far it slid (translate; the material never changes size).
@@ -42,90 +34,12 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
     const handleRef = useRef(null);
     const home = useRef(current !== 'peek' && current !== 'away' ? current : 'half'); // where a tap from peek returns to
     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 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));
         return list.length ? ORDER.filter((s) => list.includes(s)) : [...ORDER];
     }, [states]);
-    useLayoutEffect(() => {
-        void ref.current?.offsetHeight; // the browser styles the `away` frame first, or there is no transition to run
-        setEntered(true);
-    }, []);
-    /* it starts on its way out: said in the commit itself, before any sheet of the box decides to rise */
-    useLayoutEffect(() => {
-        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;
-        if (!box || !out.get(box)?.size) {
-            setHeld(false);
-            return;
-        }
-        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 */
-    useEffect(() => {
-        const el = ref.current, box = el?.parentElement;
-        if (!el || last.current === shown)
-            return;
-        last.current = shown;
-        const cs = getComputedStyle(el);
-        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' || 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); 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);
-    useEffect(() => {
-        alive.current = true;
-        const box = ref.current?.parentElement;
-        return () => {
-            alive.current = false;
-            setTimeout(() => {
-                if (!alive.current && box?.isConnected && latest.current.current !== 'away')
-                    warnOnce('sheet-unmount', 'cardds Sheet: unmounted while on the screen, so it vanished instead of sliding out. Set state="away" and unmount it in onSettled (state === "away").');
-            });
-        };
-    }, [latest]);
+    /* it arrives and leaves by sliding, with a rest after it went away — sheetSlide.ts */
+    const { shown, live, held } = useSheetSlide(ref, current, onSettled);
     /* THE SHEET COMES UP → ITS FIELD HAS THE CURSOR, always (Lh 2026-09-29): whenever it rises — onto the screen (mounted up, or from `away`),
        or from peek to any open state, by a button, the handle, a drag or the app — once it has finished sliding (Lh 2026-09-24: the keyboard
        must not come up while it still moves) the cursor goes to the field marked `data-autofocus` (a SheetSteps marks its open step's first
@@ -143,20 +57,6 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         return () => { if (!cancel())
             was.current = from; }; // cut short (StrictMode's trial run, or a new state mid-slide): the rise still counts from where it began
     }, [live]);
-    /* geometry, read once per gesture — never stored: how far it has slid, and where each state rests, in px from its top at full */
-    const slid = (el) => {
-        const box = (el.offsetParent ?? el.parentElement);
-        return el.getBoundingClientRect().top - (box.getBoundingClientRect().top + box.clientTop + el.offsetTop);
-    };
-    const stopsOf = (el) => {
-        const cs = getComputedStyle(el), height = el.getBoundingClientRect().height;
-        return {
-            full: 0,
-            half: height * (parseFloat(cs.getPropertyValue('--sheet-half')) || 0),
-            '3q': height * (parseFloat(cs.getPropertyValue('--sheet-3q')) || 0),
-            peek: height - (parseFloat(cs.getPropertyValue('--sheet-peek')) || 0), // registered in tokens.css: reads back resolved
-        };
-    };
     /* bring a control into the part of the body that shows — between the pinned head and the foot's strip on the cut. The sheet asks
        for the lowest of its states, from the current one (or `atLeast`) upward, that has room; if none has, its highest. */
     const reveal = useCallback((target, reason, atLeast) => {
@@ -201,45 +101,11 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
                 reveal(at, 'keyboard');
         });
     }, [reveal]);
-    /* the peek strip holds the handle and the WHOLE title row. CSS gives the box the strip for a one-line head (--sheet-peek in
-       sheet.css); when the head is taller than that floor — a title wrapped on a narrow phone at a large text size — the sheet
-       measures its head and publishes the real strip on its box, so nothing of the title is under the cut (2026-09-22, with the
-       22-base type scale). Removed when the head fits the floor again, so the CSS number is the one in force. */
-    useEffect(() => {
-        const el = ref.current, box = el?.parentElement, head = el?.querySelector(':scope > .card__head, :scope > .sheet__head');
-        if (!el || !box || !head)
-            return;
-        const publish = () => {
-            box.style.removeProperty('--sheet-peek'); // read the CSS strip, not our own
-            const cs = getComputedStyle(el);
-            const strip = parseFloat(cs.getPropertyValue('--sheet-peek')) || 0, floor = parseFloat(cs.getPropertyValue('--sheet-head-h')) || 0;
-            const over = head.getBoundingClientRect().height - floor;
-            if (over > 0.5)
-                box.style.setProperty('--sheet-peek', `${strip + over}px`);
-        };
-        const stop = watchSize([head], publish);
-        return () => { stop(); box.style.removeProperty('--sheet-peek'); };
-    }, []);
-    /* 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. */
-    useEffect(() => {
-        const el = ref.current, foot = el?.querySelector(':scope > .card__foot');
-        if (!el || !foot) {
-            el?.style.removeProperty('--sheet-foot-h');
-            return;
-        }
-        const publish = () => {
-            const rows = [...foot.children].map((c) => c.getBoundingClientRect()).filter((r) => r.height > 0);
-            if (!rows.length)
-                return el.style.removeProperty('--sheet-foot-h');
-            el.style.setProperty('--sheet-foot-h', `${Math.max(...rows.map((r) => r.bottom)) - Math.min(...rows.map((r) => r.top))}px`);
-        };
-        const stop = watchSize([...foot.children], publish);
-        const mo = new MutationObserver(publish);
-        mo.observe(foot, { childList: true });
-        return () => { stop(); mo.disconnect(); };
-    }); // every render: the foot's rows are the app's, they come and go
+    usePeekStrip(ref);
+    useTitleRun(ref);
+    useFootRoom(ref);
+    /* the handle held and moved: the sheet follows, and asks for the nearest state on release — sheetDrag.ts */
+    const { down, move, up, afterDrag } = useSheetDrag(ref, allowed, (to) => request(to, 'drag'));
     const focus = (e) => {
         onFocus?.(e);
         if (current !== 'peek' || e.target.closest('.sheet__handle'))
@@ -250,48 +116,9 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         reveal(e.target, 'focus', home.current);
     };
     const tap = () => {
-        if (skipClick.current) {
-            skipClick.current = false;
-            return;
-        } // the click that follows a drag is not a tap
+        if (afterDrag())
+            return; // the click that follows a drag is not a tap
         request(current === 'peek' ? (allowed().includes(home.current) ? home.current : allowed().find((s) => s !== 'peek') ?? 'half') : 'peek', 'tap');
     };
-    const down = (e) => {
-        const el = ref.current;
-        if (!el || !e.isPrimary || e.button !== 0)
-            return;
-        const list = allowed(), stops = stopsOf(el), y = slid(el); // where it is now — mid-slide too, so a grab never jumps
-        drag.current = { startY: e.clientY, y0: y, y, stops, allowed: list, moved: false,
-            min: Math.min(...list.map((s) => stops[s])), max: Math.max(...list.map((s) => stops[s])),
-            tap: TAP_REM * parseFloat(getComputedStyle(document.documentElement).fontSize) };
-        e.currentTarget.setPointerCapture(e.pointerId);
-    };
-    const move = (e) => {
-        const d = drag.current, el = ref.current;
-        if (!d || !el || !e.isPrimary)
-            return;
-        const dy = e.clientY - d.startY;
-        if (!d.moved) {
-            if (Math.abs(dy) < d.tap)
-                return;
-            d.moved = true;
-            el.classList.add('is-dragging');
-        }
-        d.y = Math.min(Math.max(d.y0 + dy, d.min), d.max); // never above full, never below its lowest state
-        el.style.setProperty('--_drag', `${d.y - d.y0}px`); // the one thing written while held — the CSS adds it to the state's translate
-    };
-    const up = () => {
-        const d = drag.current, el = ref.current;
-        drag.current = null;
-        if (!d || !el)
-            return;
-        el.classList.remove('is-dragging');
-        if (!d.moved)
-            return; // a tap: the click that follows toggles
-        el.style.removeProperty('--_drag'); // same state, or the app says no: it eases back on its own
-        request(d.allowed.reduce((a, b) => (Math.abs(d.stops[b] - d.y) < Math.abs(d.stops[a] - d.y) ? b : a)), 'drag');
-        skipClick.current = true;
-        requestAnimationFrame(() => { skipClick.current = false; });
-    };
     return (_jsxs("article", { ref: ref, className: cx('card sheet', `sheet--${shown}`, className), inert: current === 'away' || held || undefined, onFocus: focus, ...rest, children: [handle !== false && (_jsx("button", { ref: handleRef, className: "sheet__handle", type: "button", "aria-label": typeof handle === 'string' ? handle : word('resize'), onClick: tap, onPointerDown: down, onPointerMove: move, onPointerUp: up, onPointerCancel: up })), children] }));
 }

package/dist/sheets/SheetSteps.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { focusWhenActive, useControlled, reducedMotion } from '../state.js';
+import { focusWhenActive, useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { Link } from '../actions/Link.js';
 import { FormNote } from '../forms/FormNote.js';
 import { CheckContext } from '../forms/check.js';
 import { word } from '../words.js';
+import { usePile } from './sheetStepsPile.js';
 const MOVE_MS = 350; // = --motion-sheet: the accordion's beat
-const GLIDE_MS = 220; // the pile's slide out of the keyboard's way and back: quick, but the eye follows it
 const SWIPE_REM = 3; // an up/down move longer than this (and mostly up/down) is a swipe
+/* the open step's first field — the one that takes the cursor; NOW_INPUT: the one a typed character can be handed to */
+const NOW_FIELD = '.sheet-step--now .sheet-step__inner :is(input:not([type=checkbox], [type=radio], [type=hidden]), textarea)';
+const NOW_INPUT = '.sheet-step--now .sheet-step__inner input:not([type=checkbox], [type=radio], [type=hidden])';
+const coarse = () => typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches; // a phone: its keyboard follows a finger, not a script
 const StepCtx = createContext(null);
 /**
  * SheetSteps — one task taken in steps INSIDE one sheet (phone · code · PIN · PIN again · face · notices). The done steps pile up
@@ -39,40 +43,25 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         moving.current = performance.now() + MOVE_MS + 100;
     } // from the very render that changes it: the old field's blur and the keyboard's jump come in that same commit
     const press = useRef(null);
+    /* the pile: where the body is scrolled (the two latest done rows in sight), and the glide of its jumps — sheetStepsPile.ts */
+    const { settle, glideNow } = usePile(ref, moving);
     const go = (i, reason) => {
         if (i >= 0 && i <= count)
             request(i, reason);
     };
-    /* how far the body is scrolled when a step opens or a field in it takes the keyboard: the TWO latest done rows always show
-       above the open step, and half of the one before — older ones go up out of sight, one row at a time, so what was done never seems to vanish (Lh
-       2026-09-24: moving the pile further startled; with two rows or fewer nothing moves) */
-    const settle = () => {
-        const list = ref.current, body = list?.closest('.sheet__body'), now = list?.querySelector('.sheet-step--now');
-        if (!list || !body || !now)
-            return;
-        const above = [];
-        for (let el = now.previousElementSibling; el; el = el.previousElementSibling)
-            above.unshift(el);
-        const bTop = body.getBoundingClientRect().top, at = (el) => body.scrollTop + el.getBoundingClientRect().top - bTop;
-        const third = above.length > 2 ? above[above.length - 3] : null; // 2½ rows show (Lh 2026-09-24): the two latest whole, the one before cut in half — a sign there is more above
-        let to = third ? at(third) + third.getBoundingClientRect().height / 2 : 0;
-        /* …unless the field with the focus would still be under the cut (a short phone, a big text size): then up as far as it needs —
-           but never past the LATEST done row, which always stays in sight */
-        const focused = document.activeElement instanceof HTMLElement && now.contains(document.activeElement) ? document.activeElement : null;
-        if (focused) {
-            const vv = window.visualViewport;
-            const cut = Math.min(body.getBoundingClientRect().bottom - (parseFloat(getComputedStyle(body).scrollPaddingBottom) || 0), vv ? vv.offsetTop + vv.height : Infinity);
-            const under = (focused.closest('.field, .pin') ?? focused).getBoundingClientRect().bottom + (body.scrollTop - to) - cut; // where its bottom will be once scrolled to `to`
-            const most = above.length ? at(above[above.length - 1]) : 0;
-            if (under > 0)
-                to = Math.min(to + under, Math.max(most, to));
-        }
-        if (Math.abs(to - body.scrollTop) <= 1)
+    /* ON A PHONE THE KEYBOARD STAYS WITH ONE ELEMENT (Lh 2026-10-04, timebank as a home-screen app on an iPhone: the pad went down at
+       every step change — there a cursor moved by a SCRIPT, after the server's answer, does not take the keyboard along). So the
+       cursor is parked in the holder INSIDE the press on the step's button (a finger's own event, which every phone follows), and it
+       STAYS there through the step change — no script moves it again. The open step's first field only SHOWS the cursor
+       (`data-cursor`); the first key typed is handed to it, and the cursor with it, from inside that key's event (handOver). */
+    const [parked, setParked] = useState(false);
+    const park = () => {
+        const at = document.activeElement, holder = holderRef.current;
+        if (!coarse() || !holder || at === holder || !(at instanceof HTMLInputElement || at instanceof HTMLTextAreaElement) || !ref.current?.contains(at))
             return;
-        // the pile SCROLLS there, animated (Lh 2026-09-24) — the browser's own smooth scroll; its frames are not replayed as jumps
-        const smooth = !reducedMotion();
-        own.current = performance.now() + (smooth ? 700 : 0);
-        body.scrollTo({ top: to, behavior: smooth ? 'smooth' : 'auto' });
+        holder.inputMode = at.inputMode || 'text';
+        holder.value = '';
+        holder.focus({ preventScroll: true });
     };
     /* the step changed, in TWO beats one right after the other: (1) the old step folds while the new one unfolds — nothing else
        moves; (2) then the pile settles (the two latest done rows in sight), gliding. The cursor goes into the new step at once
@@ -80,7 +69,11 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
     /* the open step's first field is the one to take the cursor when the sheet comes onto the screen (Sheet reads `data-autofocus`) */
     useLayoutEffect(() => {
         ref.current?.querySelectorAll('[data-autofocus]').forEach((el) => el.removeAttribute('data-autofocus'));
-        ref.current?.querySelector('.sheet-step--now .sheet-step__inner :is(input:not([type=checkbox], [type=radio], [type=hidden]), textarea)')?.setAttribute('data-autofocus', '');
+        const field = ref.current?.querySelector(NOW_FIELD);
+        field?.setAttribute('data-autofocus', '');
+        ref.current?.querySelectorAll('[data-cursor]').forEach((el) => el.removeAttribute('data-cursor'));
+        if (parked && coarse())
+            field?.setAttribute('data-cursor', ''); // the keyboard is on the holder, for this field: it shows the cursor
     });
     useLayoutEffect(() => {
         if (first.current) {
@@ -93,7 +86,7 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         // The cursor waits in a HOLDER while the fold plays — an invisible text field of the steps' own: the phone's keyboard stays up
         // (a blur would drop it and the next focus bring it back — Lh 2026-09-24), and it takes the keyboard type of the field to come
         const at = document.activeElement, holder = holderRef.current;
-        const nextField = ref.current?.querySelector('.sheet-step--now .sheet-step__inner :is(input:not([type=checkbox], [type=radio], [type=hidden]), textarea)');
+        const nextField = ref.current?.querySelector(NOW_FIELD);
         if (at instanceof HTMLElement && ref.current?.contains(at)) {
             if (holder && nextField && at.matches('input, textarea')) {
                 holder.inputMode = nextField.inputMode || 'text';
@@ -105,44 +98,21 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         }
         // the cursor stands by: the step's first field takes the focus (the keyboard comes with it); a step with no field — its
         // title, so a screen reader hears where it is (the one rule of every part that becomes active: focusWhenActive)
+        if (coarse() && document.activeElement === holder) { // a phone, the keyboard up on the holder: it stays there — only the pile settles
+            const t = setTimeout(() => { glideNow(); settle(); }, MOVE_MS);
+            return () => clearTimeout(t);
+        }
         const cancel = focusWhenActive(ref.current, { wait: MOVE_MS, scope: '.sheet-step--now .sheet-step__inner',
             fallback: () => ref.current?.querySelector('.sheet-step--now .sheet-step__title'),
-            then: () => { glide.current = performance.now() + 900; settle(); } });
+            then: () => { glideNow(); settle(); } });
         return () => { cancel(); };
     }, [current]);
-    /* the keyboard comes and goes: the body's scroll JUMPS (the Sheet's reveal, the browser's own, ours below, the box growing back).
-       For a short while after a field in the steps gains or loses the focus, every such jump is played as a quick slide (FLIP: the steps
-       are set back by the jump, then eased to rest) so the eye can follow the pile moving out of the way and back. */
-    const glide = useRef(0), last = useRef(0), own = useRef(0); // own: our smooth scroll is playing — not a jump to replay
-    useEffect(() => {
-        const el = ref.current, body = el?.closest('.sheet__body');
-        if (!el || !body)
-            return;
-        last.current = body.scrollTop;
-        const onScroll = () => {
-            const d = body.scrollTop - last.current;
-            last.current = body.scrollTop;
-            if (!d || performance.now() > glide.current || performance.now() < own.current || reducedMotion())
-                return;
-            const from = parseFloat(el.style.translate.split(' ')[1] || '0') || 0;
-            el.style.transition = 'none';
-            el.style.translate = `0 ${from + d}px`;
-            void el.offsetHeight; // the set-back lands before the ease
-            const hold = Math.max(0, moving.current - 100 - performance.now()); // during a step change: held until the fold is done (beat 2)
-            el.style.transition = `translate ${GLIDE_MS}ms ease-out ${hold}ms`;
-            el.style.translate = '0 0';
-        };
-        const clean = () => { el.style.removeProperty('transition'); el.style.removeProperty('translate'); };
-        body.addEventListener('scroll', onScroll);
-        el.addEventListener('transitionend', clean);
-        return () => { body.removeEventListener('scroll', onScroll); el.removeEventListener('transitionend', clean); };
-    }, []);
     /* a field in the current step took the focus: once the keyboard is up (the Sheet has climbed), settle the pile — the two latest
        done rows in sight. When the focus leaves the fields (the keyboard goes), the pile comes back down. Both moves glide. */
     const typing = (t) => t instanceof HTMLElement && t.matches('input:not([type=checkbox], [type=radio], [type=range]), textarea');
     const focusIn = (e) => {
         onFocus?.(e);
-        glide.current = performance.now() + 900;
+        glideNow();
         const target = e.target;
         if (!target.closest('.sheet-step--now') || !typing(target) || performance.now() < moving.current - 100)
             return; // a step change settles on its own beat
@@ -152,7 +122,7 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         onBlur?.(e);
         if (!typing(e.target) || performance.now() < moving.current)
             return; // the old step's field losing the cursor to the new one
-        glide.current = performance.now() + 900;
+        glideNow();
         const body = ref.current?.closest('.sheet__body');
         setTimeout(() => { if (!typing(document.activeElement) && body)
             body.scrollTo({ top: 0 }); }, 0); // Tab to the next field keeps it up
@@ -180,17 +150,25 @@ 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)
+    /* typed while the cursor waits in the holder (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 handOver = (e) => {
+        const typed = e.currentTarget.value;
+        e.currentTarget.value = '';
+        const field = ref.current?.querySelector(NOW_INPUT);
+        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 }));
+    };
+    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", onFocus: () => setParked(true), onBlur: () => setParked(false), onInput: handOver }), _jsx("ol", { className: "sheet-steps__track", children: steps.map((step, i) => (_jsx(StepCtx.Provider, { value: { numbered, i, at: current, furthest: reach, count, reversible, go, park }, 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). */
-export function SheetStep({ title, summary, skippable, skipLabel = word('skip'), error, busy, className, children, ...rest }) {
-    const ctx = useContext(StepCtx);
-    if (!ctx)
-        throw new Error('SheetStep goes inside a SheetSteps');
-    const { numbered, i, at, furthest, count, reversible, go } = ctx;
-    const phase = i === at ? 'now' : i < furthest ? 'done' : 'next';
-    const off = phase !== 'now';
+/* the step's format checks, as one group — see SheetStep */
+function useStepChecks(off, park) {
     /* the step is the FORM GROUP of the format checks inside it (Field format/digits/required, Pin match): the words of the first
        control that fails show under the button; a press on a button of the step checks them all first and holds the press back
        when one fails (the app's onClick never hears it); a Pin that does not match shakes, shows its words and empties itself — the step stays */
@@ -208,13 +186,6 @@ export function SheetStep({ title, summary, skippable, skipLabel = word('skip'),
             checks.current.set(c, null);
         setNote(null);
     } }, [off]);
-    /* a press on the step's button or link keeps the cursor where it is: the button still clicks, but the field keeps the focus, so a
-       phone's keyboard does not drop and come back (the pile jumped up and down with it — Lh 2026-09-24) */
-    const keepCursor = (e) => {
-        const at = document.activeElement;
-        if (e.target.closest('.btn, .link') && at instanceof HTMLElement && at.matches('input, textarea') && e.currentTarget.contains(at))
-            e.preventDefault();
-    };
     const press = (e) => {
         const btn = e.target.closest('button.btn'); // a FileBtn is a label.btn: picking a file is not the step's press
         if (!btn || btn.disabled)
@@ -232,6 +203,26 @@ export function SheetStep({ title, summary, skippable, skipLabel = word('skip'),
             e.preventDefault();
             bad.focus();
         }
+        else
+            park(); // the press goes through: on a phone the cursor waits in the holder from HERE — inside the finger's own event
+    };
+    return { note, group, press };
+}
+/** SheetStep — one step of a SheetSteps: its title, then what the member does (a Field, a Pin, a Toggle, the step's own Btn). */
+export function SheetStep({ title, summary, skippable, skipLabel = word('skip'), error, busy, className, children, ...rest }) {
+    const ctx = useContext(StepCtx);
+    if (!ctx)
+        throw new Error('SheetStep goes inside a SheetSteps');
+    const { numbered, i, at, furthest, count, reversible, go, park } = ctx;
+    const phase = i === at ? 'now' : i < furthest ? 'done' : 'next';
+    const off = phase !== 'now';
+    const { note, group, press } = useStepChecks(off, park);
+    /* a press on the step's button or link keeps the cursor where it is: the button still clicks, but the field keeps the focus, so a
+       phone's keyboard does not drop and come back (the pile jumped up and down with it — Lh 2026-09-24) */
+    const keepCursor = (e) => {
+        const at = document.activeElement;
+        if (e.target.closest('.btn, .link') && at instanceof HTMLElement && at.matches('input, textarea') && e.currentTarget.contains(at))
+            e.preventDefault();
     };
     /* Enter on the keyboard in a field of the step = a press on the step's button (the phone's "go"/"next" key, a desktop's Enter);
        the press goes through the step's checks like a tap (Lh 2026-09-25) */

package/dist/sheets/sheetDrag.d.ts

@@ -0,0 +1,9 @@
+import { type PointerEvent as ReactPointerEvent, type RefObject } from 'react';
+import { type Resting } from './sheetMeasure.js';
+/** the handle's pointer handlers, and `afterDrag()` — true once for the click that follows a drag (it is not a tap) */
+export declare function useSheetDrag(ref: RefObject<HTMLElement | null>, allowed: () => Resting[], snap: (to: Resting) => void): {
+    down: (e: ReactPointerEvent<HTMLButtonElement>) => void;
+    move: (e: ReactPointerEvent<HTMLButtonElement>) => void;
+    up: () => void;
+    afterDrag: () => boolean;
+};

package/dist/sheets/sheetDrag.js

@@ -0,0 +1,49 @@
+/* the Sheet's handle held and moved — its own behaviour, not exported from the package: the sheet follows the finger (`--_drag`),
+   and on release asks for the nearest of its states. A move shorter than a tap is left to the click. */
+import { useRef } from 'react';
+import { slid, stopsOf } from './sheetMeasure.js';
+const TAP_REM = 0.5; // = --sp-2: a move shorter than this is a tap, not a drag
+/** the handle's pointer handlers, and `afterDrag()` — true once for the click that follows a drag (it is not a tap) */
+export function useSheetDrag(ref, allowed, snap) {
+    const skipClick = useRef(false);
+    const drag = useRef(null);
+    const down = (e) => {
+        const el = ref.current;
+        if (!el || !e.isPrimary || e.button !== 0)
+            return;
+        const list = allowed(), stops = stopsOf(el), y = slid(el); // where it is now — mid-slide too, so a grab never jumps
+        drag.current = { startY: e.clientY, y0: y, y, stops, allowed: list, moved: false,
+            min: Math.min(...list.map((s) => stops[s])), max: Math.max(...list.map((s) => stops[s])),
+            tap: TAP_REM * parseFloat(getComputedStyle(document.documentElement).fontSize) };
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const move = (e) => {
+        const d = drag.current, el = ref.current;
+        if (!d || !el || !e.isPrimary)
+            return;
+        const dy = e.clientY - d.startY;
+        if (!d.moved) {
+            if (Math.abs(dy) < d.tap)
+                return;
+            d.moved = true;
+            el.classList.add('is-dragging');
+        }
+        d.y = Math.min(Math.max(d.y0 + dy, d.min), d.max); // never above full, never below its lowest state
+        el.style.setProperty('--_drag', `${d.y - d.y0}px`); // the one thing written while held — the CSS adds it to the state's translate
+    };
+    const up = () => {
+        const d = drag.current, el = ref.current;
+        drag.current = null;
+        if (!d || !el)
+            return;
+        el.classList.remove('is-dragging');
+        if (!d.moved)
+            return; // a tap: the click that follows toggles
+        el.style.removeProperty('--_drag'); // same state, or the app says no: it eases back on its own
+        snap(d.allowed.reduce((a, b) => (Math.abs(d.stops[b] - d.y) < Math.abs(d.stops[a] - d.y) ? b : a)));
+        skipClick.current = true;
+        requestAnimationFrame(() => { skipClick.current = false; });
+    };
+    const afterDrag = () => { const skip = skipClick.current; skipClick.current = false; return skip; };
+    return { down, move, up, afterDrag };
+}

package/dist/sheets/sheetMeasure.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+export declare const ORDER: readonly ["peek", "half", "3q", "full"];
+export type Resting = (typeof ORDER)[number];
+type SheetRef = RefObject<HTMLElement | null>;
+export declare const slid: (el: HTMLElement) => number;
+export declare const stopsOf: (el: HTMLElement) => Record<Resting, number>;
+export declare function usePeekStrip(ref: SheetRef): void;
+export declare function useTitleRun(ref: SheetRef): void;
+export declare function useFootRoom(ref: SheetRef): void;
+export {};

package/dist/sheets/sheetMeasure.js

@@ -0,0 +1,84 @@
+/* what a Sheet MEASURES — its own behaviour, not exported from the package: where it is and where each state rests (read once per
+   gesture, never stored), and the three numbers it publishes for its CSS: the peek strip, the title's run, the foot's room. */
+import { useEffect } from 'react';
+import { watchSize } from '../state.js';
+export const ORDER = ['peek', 'half', '3q', 'full']; // low → high; `away` is below them all and outside them
+/* geometry, read once per gesture — never stored: how far it has slid, and where each state rests, in px from its top at full */
+export const slid = (el) => {
+    const box = (el.offsetParent ?? el.parentElement);
+    return el.getBoundingClientRect().top - (box.getBoundingClientRect().top + box.clientTop + el.offsetTop);
+};
+export const stopsOf = (el) => {
+    const cs = getComputedStyle(el), height = el.getBoundingClientRect().height;
+    return {
+        full: 0,
+        half: height * (parseFloat(cs.getPropertyValue('--sheet-half')) || 0),
+        '3q': height * (parseFloat(cs.getPropertyValue('--sheet-3q')) || 0),
+        peek: height - (parseFloat(cs.getPropertyValue('--sheet-peek')) || 0), // registered in tokens.css: reads back resolved
+    };
+};
+/* the peek strip holds the handle and the WHOLE title row. CSS gives the box the strip for a one-line head (--sheet-peek in
+   sheet.css); when the head is taller than that floor — a title wrapped on a narrow phone at a large text size — the sheet
+   measures its head and publishes the real strip on its box, so nothing of the title is under the cut (2026-09-22, with the
+   22-base type scale). Removed when the head fits the floor again, so the CSS number is the one in force. */
+export function usePeekStrip(ref) {
+    useEffect(() => {
+        const el = ref.current, box = el?.parentElement, head = el?.querySelector(':scope > .card__head, :scope > .sheet__head');
+        if (!el || !box || !head)
+            return;
+        const publish = () => {
+            box.style.removeProperty('--sheet-peek'); // read the CSS strip, not our own
+            const cs = getComputedStyle(el);
+            const strip = parseFloat(cs.getPropertyValue('--sheet-peek')) || 0, floor = parseFloat(cs.getPropertyValue('--sheet-head-h')) || 0;
+            const over = head.getBoundingClientRect().height - floor;
+            if (over > 0.5)
+                box.style.setProperty('--sheet-peek', `${strip + over}px`);
+        };
+        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. */
+export function useTitleRun(ref) {
+    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. */
+export function useFootRoom(ref) {
+    useEffect(() => {
+        const el = ref.current, foot = el?.querySelector(':scope > .card__foot');
+        if (!el || !foot) {
+            el?.style.removeProperty('--sheet-foot-h');
+            return;
+        }
+        const publish = () => {
+            const rows = [...foot.children].map((c) => c.getBoundingClientRect()).filter((r) => r.height > 0);
+            if (!rows.length)
+                return el.style.removeProperty('--sheet-foot-h');
+            el.style.setProperty('--sheet-foot-h', `${Math.max(...rows.map((r) => r.bottom)) - Math.min(...rows.map((r) => r.top))}px`);
+        };
+        const stop = watchSize([...foot.children], publish);
+        const mo = new MutationObserver(publish);
+        mo.observe(foot, { childList: true });
+        return () => { stop(); mo.disconnect(); };
+    }); // every render: the foot's rows are the app's, they come and go
+}

package/dist/sheets/sheetSlide.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+import type { SheetState } from './Sheet.js';
+/** `shown` = the state its class says · `live` = where it is as far as its own habits go (a held sheet has not come up yet) ·
+ *  `held` = it waits for the sheet going away before it to be settled */
+export declare function useSheetSlide(ref: RefObject<HTMLElement | null>, current: SheetState, onSettled?: (state: SheetState) => void): {
+    shown: SheetState;
+    live: SheetState;
+    held: boolean;
+};

package/dist/sheets/sheetSlide.js

@@ -0,0 +1,96 @@
+/* how a Sheet comes and goes — its own behaviour, not exported from the package: the first frame `away` (so it slides in), the rest
+   after it went away, the wait of a sheet asked up meanwhile, `onSettled`, and the warning when it is unmounted while up. */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { reducedMotion, useLatest, warnOnce } from '../state.js';
+/* 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
+/** `shown` = the state its class says · `live` = where it is as far as its own habits go (a held sheet has not come up yet) ·
+ *  `held` = it waits for the sheet going away before it to be settled */
+export function useSheetSlide(ref, current, onSettled) {
+    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 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)
+    useLayoutEffect(() => {
+        void ref.current?.offsetHeight; // the browser styles the `away` frame first, or there is no transition to run
+        setEntered(true);
+    }, []);
+    /* it starts on its way out: said in the commit itself, before any sheet of the box decides to rise */
+    useLayoutEffect(() => {
+        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;
+        if (!box || !out.get(box)?.size) {
+            setHeld(false);
+            return;
+        }
+        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 */
+    useEffect(() => {
+        const el = ref.current, box = el?.parentElement;
+        if (!el || last.current === shown)
+            return;
+        last.current = shown;
+        const cs = getComputedStyle(el);
+        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' || 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); 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);
+    useEffect(() => {
+        alive.current = true;
+        const box = ref.current?.parentElement;
+        return () => {
+            alive.current = false;
+            setTimeout(() => {
+                if (!alive.current && box?.isConnected && latest.current.current !== 'away')
+                    warnOnce('sheet-unmount', 'cardds Sheet: unmounted while on the screen, so it vanished instead of sliding out. Set state="away" and unmount it in onSettled (state === "away").');
+            });
+        };
+    }, [latest]);
+    return { shown, live, held };
+}

package/dist/sheets/sheetStepsPile.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+export declare const GLIDE_MS = 220;
+/** `settle()` scrolls the pile to its place · `glideNow()` = the next jumps are played as slides. `moving` = until when a step
+ *  change is playing its beats (the SheetSteps keeps it). */
+export declare function usePile(ref: RefObject<HTMLElement | null>, moving: RefObject<number>): {
+    settle: () => void;
+    glideNow: () => void;
+};

package/dist/sheets/sheetStepsPile.js

@@ -0,0 +1,70 @@
+/* the PILE of a SheetSteps — its own behaviour, not exported from the package: where the body is scrolled when a step opens or a
+   field takes the keyboard, and the quick slide that replays every jump of that scroll so the eye can follow it. */
+import { useEffect, useRef } from 'react';
+import { reducedMotion } from '../state.js';
+export const GLIDE_MS = 220; // the pile's slide out of the keyboard's way and back: quick, but the eye follows it
+const GLIDE_FOR = 900; // how long after a focus move (or a step change) a jump of the scroll is replayed as a slide
+/** `settle()` scrolls the pile to its place · `glideNow()` = the next jumps are played as slides. `moving` = until when a step
+ *  change is playing its beats (the SheetSteps keeps it). */
+export function usePile(ref, moving) {
+    const glide = useRef(0), last = useRef(0), own = useRef(0); // own: our smooth scroll is playing — not a jump to replay
+    const glideNow = () => { glide.current = performance.now() + GLIDE_FOR; };
+    /* how far the body is scrolled when a step opens or a field in it takes the keyboard: the TWO latest done rows always show
+       above the open step, and half of the one before — older ones go up out of sight, one row at a time, so what was done never seems to vanish (Lh
+       2026-09-24: moving the pile further startled; with two rows or fewer nothing moves) */
+    const settle = () => {
+        const list = ref.current, body = list?.closest('.sheet__body'), now = list?.querySelector('.sheet-step--now');
+        if (!list || !body || !now)
+            return;
+        const above = [];
+        for (let el = now.previousElementSibling; el; el = el.previousElementSibling)
+            above.unshift(el);
+        const bTop = body.getBoundingClientRect().top, at = (el) => body.scrollTop + el.getBoundingClientRect().top - bTop;
+        const third = above.length > 2 ? above[above.length - 3] : null; // 2½ rows show (Lh 2026-09-24): the two latest whole, the one before cut in half — a sign there is more above
+        let to = third ? at(third) + third.getBoundingClientRect().height / 2 : 0;
+        /* …unless the field with the focus would still be under the cut (a short phone, a big text size): then up as far as it needs —
+           but never past the LATEST done row, which always stays in sight */
+        const focused = document.activeElement instanceof HTMLElement && now.contains(document.activeElement) ? document.activeElement : null;
+        if (focused) {
+            const vv = window.visualViewport;
+            const cut = Math.min(body.getBoundingClientRect().bottom - (parseFloat(getComputedStyle(body).scrollPaddingBottom) || 0), vv ? vv.offsetTop + vv.height : Infinity);
+            const under = (focused.closest('.field, .pin') ?? focused).getBoundingClientRect().bottom + (body.scrollTop - to) - cut; // where its bottom will be once scrolled to `to`
+            const most = above.length ? at(above[above.length - 1]) : 0;
+            if (under > 0)
+                to = Math.min(to + under, Math.max(most, to));
+        }
+        if (Math.abs(to - body.scrollTop) <= 1)
+            return;
+        // the pile SCROLLS there, animated (Lh 2026-09-24) — the browser's own smooth scroll; its frames are not replayed as jumps
+        const smooth = !reducedMotion();
+        own.current = performance.now() + (smooth ? 700 : 0);
+        body.scrollTo({ top: to, behavior: smooth ? 'smooth' : 'auto' });
+    };
+    /* the keyboard comes and goes: the body's scroll JUMPS (the Sheet's reveal, the browser's own, ours below, the box growing back).
+       For a short while after a field in the steps gains or loses the focus, every such jump is played as a quick slide (FLIP: the steps
+       are set back by the jump, then eased to rest) so the eye can follow the pile moving out of the way and back. */
+    useEffect(() => {
+        const el = ref.current, body = el?.closest('.sheet__body');
+        if (!el || !body)
+            return;
+        last.current = body.scrollTop;
+        const onScroll = () => {
+            const d = body.scrollTop - last.current;
+            last.current = body.scrollTop;
+            if (!d || performance.now() > glide.current || performance.now() < own.current || reducedMotion())
+                return;
+            const from = parseFloat(el.style.translate.split(' ')[1] || '0') || 0;
+            el.style.transition = 'none';
+            el.style.translate = `0 ${from + d}px`;
+            void el.offsetHeight; // the set-back lands before the ease
+            const hold = Math.max(0, moving.current - 100 - performance.now()); // during a step change: held until the fold is done (beat 2)
+            el.style.transition = `translate ${GLIDE_MS}ms ease-out ${hold}ms`;
+            el.style.translate = '0 0';
+        };
+        const clean = () => { el.style.removeProperty('transition'); el.style.removeProperty('translate'); };
+        body.addEventListener('scroll', onScroll);
+        el.addEventListener('transitionend', clean);
+        return () => { body.removeEventListener('scroll', onScroll); el.removeEventListener('transitionend', clean); };
+    }, []);
+    return { settle, glideNow };
+}

package/package.json

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