@usableapp/cardds 0.7.49 → 0.7.51

package/dist/sheets/SheetStack.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from 'react';
-import { focusWhenActive, useControlled } from '../state.js';
+import { flushSync } from 'react-dom';
+import { focusWhenActive, useControlled, useLatest } from '../state.js';
 import { cx } from '../cx.js';
 const PHASE = 380; // ms before the before-pack un-tucks on close, so the after-pack is clear first
 /* the stack's sheets, in slot order: its direct children — or, where a host wraps each child in one box of its own, the first .card in
@@ -9,6 +10,28 @@ const sheetsOf = (stack) => [...stack.children]
     .filter((c) => !c.classList.contains('sheet-stack__base'))
     .map((c) => (c.classList.contains('card') ? c : c.querySelector(':scope > .card')))
     .filter((c) => c instanceof HTMLElement);
+const SLOP_REM = 0.5;
+const COMMIT_REM = 4.5;
+const pxFromRem = (rem) => parseFloat(getComputedStyle(document.documentElement).fontSize) * rem;
+const restPullPx = (card, stack) => {
+    if (!stack.classList.contains('sheet-stack--closed'))
+        return card.offsetTop;
+    const sheets = sheetsOf(stack);
+    const step = sheets[1]?.offsetTop ?? 0;
+    return Math.max(0, stack.clientHeight - sheets.length * step) + card.offsetTop;
+};
+const readFrame = (card) => { card.getBoundingClientRect(); };
+const along = (dir, startY, y) => (dir === 'down' ? Math.max(0, y - startY) : Math.max(0, startY - y));
+const releaseProp = (card, prop) => {
+    card.classList.remove('is-dragging');
+    readFrame(card);
+    card.style.removeProperty(prop);
+};
+const pullsHead = (target, head) => {
+    if (!(target instanceof Element))
+        return false;
+    return target === head || !!target.closest('.sheet-stack__back') || !!target.closest('.card__head > :is(h1, h2, h3)');
+};
 /**
  * SheetStack — the MENU: sheets stacked like paper at the middle of the home screen, every one a main section.
  * Children are Cards, direct children only, at most five: first = the back of the stack, last = the front (open) sheet.
@@ -19,21 +42,31 @@ const sheetsOf = (stack) => [...stack.children]
  * with a picture over the menu); the `base` slot is rendered after the sheets, so it never takes a sheet's slot. This is the sheet STACK; a single bottom sheet is `Sheet`.
  *
  * A COMPONENT, not a wiring: WHICH sheet is open is the app's (`open` + `onOpenChange`, or `defaultOpen`) — so a button anywhere, a route or
- * the phone's back button can open and close a section. Its own behaviour stays inside and only asks: a tap on a peeked head, the open
- * sheet's StackBack or its title (folds it). How the sheets MOVE is its own too: sheets are rigid — the tapped one slides up, the ones after it leave below, the ones
+ * the phone's back button can open and close a section. Its own behaviour stays inside and only asks: a tap on a peeked head, or a pull up on
+ * that head (the title, the back button, or the head itself — not a tab), opens it. The open sheet's StackBack or its title, tapped or pulled
+ * down, folds it. A pull down in the content, already at the top, asks `onRefresh` and does not fold. How the sheets MOVE is its own too: sheets are rigid — the tapped one slides up, the ones after it leave below, the ones
  * before tuck under nearest-first; closing reverses in two beats. Only `translate` (stack.css); it sets classes, never a size.
  */
-export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChange, fanned, closed, base, className, children, onClick, onKeyDown, ...rest }) {
+export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChange, onRefresh, fanned, closed, base, className, children, onClick, onKeyDown, ...rest }) {
     const [current, request] = useControlled(open, defaultOpen, onOpenChange);
     const ref = useRef(null);
     const was = useRef(null);
     const untuck = useRef(null);
+    const headPull = useRef(null);
+    const bodyPull = useRef(null);
+    const swallow = useRef(false);
+    const refreshRef = useLatest(onRefresh);
     /* paint the state onto the sheets — after every render, so a re-rendered Card never loses its place */
     useLayoutEffect(() => {
         const stack = ref.current;
         if (!stack || mode !== 'tap')
             return;
         const sheets = sheetsOf(stack);
+        for (const c of sheets)
+            if (!c.classList.contains('is-dragging')) {
+                c.style.removeProperty('--_pull');
+                c.style.removeProperty('--_lift');
+            }
         // the keyboard's way in: a head's title takes the focus where a tap on it would do something — every title while none is
         // open (Enter opens that sheet), only the open one's while one is (Enter folds it)
         sheets.forEach((c, i) => {
@@ -74,8 +107,299 @@ export function SheetStack({ mode = 'tap', open, defaultOpen = null, onOpenChang
         const cancel = focusWhenActive(sheetsOf(ref.current)[current], { scope: ':scope > .sheet__body' });
         return () => { cancel(); };
     }, [current, mode]);
+    useEffect(() => {
+        const stack = ref.current;
+        if (!stack || mode !== 'tap' || current == null)
+            return;
+        const card = sheetsOf(stack)[current];
+        if (!card)
+            return;
+        const head = card.querySelector(':scope > .card__head');
+        const scroller = card.querySelector(':scope > .sheet__body') ?? card;
+        const index = current;
+        let stopDoc = () => { };
+        const listen = (move, up, cancel) => {
+            stopDoc();
+            document.addEventListener('pointermove', move, { passive: false });
+            document.addEventListener('pointerup', up);
+            document.addEventListener('pointercancel', cancel);
+            stopDoc = () => {
+                document.removeEventListener('pointermove', move);
+                document.removeEventListener('pointerup', up);
+                document.removeEventListener('pointercancel', cancel);
+                stopDoc = () => { };
+            };
+        };
+        const primary = (e) => e.isPrimary && e.button === 0;
+        const armSwallow = () => {
+            swallow.current = true;
+            requestAnimationFrame(() => { swallow.current = false; });
+        };
+        const onHeadDown = (e) => {
+            e.stopPropagation();
+            if (!head || !primary(e) || headPull.current || bodyPull.current)
+                return;
+            if (!pullsHead(e.target, head))
+                return;
+            const slop = pxFromRem(SLOP_REM);
+            const commit = pxFromRem(COMMIT_REM);
+            const pull = {
+                pointerId: e.pointerId, card, index, dir: 'down', startY: e.clientY, last: 0,
+                cap: Math.max(restPullPx(card, stack), commit), commit, slop, moved: false,
+            };
+            headPull.current = pull;
+            const onMove = (ev) => {
+                if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
+                    return;
+                const dy = along('down', pull.startY, ev.clientY);
+                pull.last = dy;
+                if (dy < pull.slop)
+                    return;
+                pull.moved = true;
+                ev.preventDefault();
+                try {
+                    if (head && !head.hasPointerCapture(ev.pointerId))
+                        head.setPointerCapture(ev.pointerId);
+                }
+                catch { /* the pointer is already gone */ }
+                card.classList.add('is-dragging');
+                card.style.setProperty('--_pull', `${Math.min(dy, pull.cap)}px`);
+            };
+            const onUp = (ev) => {
+                if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
+                    return;
+                const dy = Math.max(pull.last, along('down', pull.startY, ev.clientY));
+                const moved = pull.moved || dy >= pull.slop;
+                headPull.current = null;
+                stopDoc();
+                if (moved && dy >= pull.commit) {
+                    card.classList.remove('is-dragging');
+                    readFrame(card);
+                    flushSync(() => request(null));
+                    if (card.isConnected && card.classList.contains('is-open') && card.style.getPropertyValue('--_pull'))
+                        releaseProp(card, '--_pull');
+                }
+                else
+                    releaseProp(card, '--_pull');
+                if (moved)
+                    armSwallow();
+            };
+            const onCancel = (ev) => {
+                if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
+                    return;
+                headPull.current = null;
+                stopDoc();
+                releaseProp(card, '--_pull');
+            };
+            listen(onMove, onUp, onCancel);
+        };
+        const onBodyDown = (e) => {
+            if (!primary(e) || headPull.current || bodyPull.current || !refreshRef.current)
+                return;
+            if (scroller.scrollTop > 0)
+                return;
+            if (e.target instanceof Element && e.target.closest('.card__head'))
+                return;
+            const slop = pxFromRem(SLOP_REM);
+            const commit = pxFromRem(COMMIT_REM);
+            const pull = {
+                pointerId: e.pointerId, scroller, index, startX: e.clientX, startY: e.clientY,
+                lastDy: 0, commit, slop, moved: false, drop: false,
+            };
+            bodyPull.current = pull;
+            const onMove = (ev) => {
+                if (ev.pointerId !== pull.pointerId || bodyPull.current !== pull)
+                    return;
+                if (scroller.scrollTop > 0) {
+                    pull.drop = true;
+                    return;
+                }
+                if (pull.drop)
+                    return;
+                const dx = ev.clientX - pull.startX;
+                const dy = ev.clientY - pull.startY;
+                pull.lastDy = Math.max(0, dy);
+                if (!pull.moved && !pull.drop) {
+                    if (Math.max(Math.abs(dx), Math.abs(dy)) < pull.slop)
+                        return;
+                    if (Math.abs(dx) > dy || dy <= 0) {
+                        pull.drop = true;
+                        return;
+                    }
+                }
+                pull.moved = true;
+                ev.preventDefault();
+                try {
+                    if (!scroller.hasPointerCapture(ev.pointerId))
+                        scroller.setPointerCapture(ev.pointerId);
+                }
+                catch { /* the pointer is already gone */ }
+                scroller.classList.add('is-refreshing');
+                scroller.style.setProperty('--_refresh', `${Math.min(dy, pull.commit)}px`);
+            };
+            const onUp = (ev) => {
+                if (ev.pointerId !== pull.pointerId || bodyPull.current !== pull)
+                    return;
+                const dy = Math.max(pull.lastDy, Math.max(0, ev.clientY - pull.startY));
+                const ask = pull.moved && !pull.drop && scroller.scrollTop <= 0 && dy >= pull.commit;
+                bodyPull.current = null;
+                stopDoc();
+                scroller.classList.remove('is-refreshing');
+                readFrame(scroller);
+                scroller.style.removeProperty('--_refresh');
+                if (ask)
+                    refreshRef.current?.(pull.index);
+                if (pull.moved)
+                    armSwallow();
+            };
+            const onCancel = (ev) => {
+                if (ev.pointerId !== pull.pointerId || bodyPull.current !== pull)
+                    return;
+                bodyPull.current = null;
+                stopDoc();
+                scroller.classList.remove('is-refreshing');
+                scroller.style.removeProperty('--_refresh');
+            };
+            listen(onMove, onUp, onCancel);
+        };
+        head?.addEventListener('pointerdown', onHeadDown);
+        scroller.addEventListener('pointerdown', onBodyDown);
+        return () => {
+            stopDoc();
+            const held = headPull.current;
+            headPull.current = null;
+            bodyPull.current = null;
+            if (held?.card.classList.contains('is-dragging'))
+                releaseProp(held.card, '--_pull');
+            head?.removeEventListener('pointerdown', onHeadDown);
+            scroller.removeEventListener('pointerdown', onBodyDown);
+        };
+    }, [current, mode, request]);
+    /* none open: a pull UP on a peeked head (not a tab) follows the finger and, past the commit, opens that sheet */
+    useEffect(() => {
+        const stack = ref.current;
+        if (!stack || mode !== 'tap' || current != null)
+            return;
+        const sheets = sheetsOf(stack);
+        let stopDoc = () => { };
+        const listen = (move, up, cancel) => {
+            stopDoc();
+            document.addEventListener('pointermove', move, { passive: false });
+            document.addEventListener('pointerup', up);
+            document.addEventListener('pointercancel', cancel);
+            stopDoc = () => {
+                document.removeEventListener('pointermove', move);
+                document.removeEventListener('pointerup', up);
+                document.removeEventListener('pointercancel', cancel);
+                stopDoc = () => { };
+            };
+        };
+        const armSwallow = () => {
+            swallow.current = true;
+            requestAnimationFrame(() => { swallow.current = false; });
+        };
+        const cleanups = [];
+        sheets.forEach((card, index) => {
+            const head = card.querySelector(':scope > .card__head');
+            if (!head)
+                return;
+            const onDown = (e) => {
+                if (!e.isPrimary || e.button !== 0 || headPull.current)
+                    return;
+                if (!pullsHead(e.target, head)) {
+                    if (!(e.target instanceof Element) || !e.target.closest('button, a'))
+                        return;
+                    const startY = e.clientY;
+                    const id = e.pointerId;
+                    const slop = pxFromRem(SLOP_REM);
+                    const move = (ev) => {
+                        if (ev.pointerId !== id)
+                            return;
+                        if (Math.abs(ev.clientY - startY) >= slop)
+                            swallow.current = true;
+                    };
+                    const up = (ev) => {
+                        if (ev.pointerId !== id)
+                            return;
+                        document.removeEventListener('pointermove', move);
+                        document.removeEventListener('pointerup', up);
+                        if (swallow.current)
+                            requestAnimationFrame(() => { swallow.current = false; });
+                    };
+                    document.addEventListener('pointermove', move);
+                    document.addEventListener('pointerup', up);
+                    return;
+                }
+                e.stopPropagation();
+                const slop = pxFromRem(SLOP_REM);
+                const commit = pxFromRem(COMMIT_REM);
+                const travel = card.getBoundingClientRect().top - stack.getBoundingClientRect().top;
+                const pull = {
+                    pointerId: e.pointerId, card, index, dir: 'up', startY: e.clientY, last: 0,
+                    cap: Math.max(travel, commit), commit, slop, moved: false,
+                };
+                headPull.current = pull;
+                const onMove = (ev) => {
+                    if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
+                        return;
+                    const upPx = along('up', pull.startY, ev.clientY);
+                    pull.last = upPx;
+                    if (upPx < pull.slop)
+                        return;
+                    pull.moved = true;
+                    ev.preventDefault();
+                    try {
+                        if (!head.hasPointerCapture(ev.pointerId))
+                            head.setPointerCapture(ev.pointerId);
+                    }
+                    catch { /* the pointer is already gone */ }
+                    card.classList.add('is-dragging');
+                    card.style.setProperty('--_lift', `${Math.min(upPx, pull.cap)}px`);
+                };
+                const onUp = (ev) => {
+                    if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
+                        return;
+                    const upPx = Math.max(pull.last, along('up', pull.startY, ev.clientY));
+                    const moved = pull.moved || upPx >= pull.slop;
+                    headPull.current = null;
+                    stopDoc();
+                    if (moved && upPx >= pull.commit) {
+                        card.classList.remove('is-dragging');
+                        readFrame(card);
+                        flushSync(() => request(pull.index));
+                        if (card.isConnected && !card.classList.contains('is-open'))
+                            releaseProp(card, '--_lift');
+                    }
+                    else
+                        releaseProp(card, '--_lift');
+                    if (moved)
+                        armSwallow();
+                };
+                const onCancel = (ev) => {
+                    if (ev.pointerId !== pull.pointerId || headPull.current !== pull)
+                        return;
+                    headPull.current = null;
+                    stopDoc();
+                    releaseProp(card, '--_lift');
+                };
+                listen(onMove, onUp, onCancel);
+            };
+            head.addEventListener('pointerdown', onDown);
+            cleanups.push(() => head.removeEventListener('pointerdown', onDown));
+        });
+        return () => {
+            stopDoc();
+            const held = headPull.current;
+            headPull.current = null;
+            if (held?.dir === 'up' && held.card.classList.contains('is-dragging'))
+                releaseProp(held.card, '--_lift');
+            cleanups.forEach((fn) => fn());
+        };
+    }, [current, mode, request]);
     const click = (e) => {
         onClick?.(e);
+        if (swallow.current)
+            return;
         const stack = ref.current;
         if (!stack || mode !== 'tap')
             return;

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,30 +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) => {
-                    /* 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)
+    /* 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 */
@@ -221,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)
@@ -245,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;
+};