@usableapp/cardds 0.7.103 → 0.7.104

package/dist/layover/Snackbar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
-import { reducedMotion, useControlled, useLatest } from '../state.js';
+import { reducedMotion, sheetMs, useControlled, useLatest } from '../state.js';
 /**
  * Snackbar — a quick GOOD-NEWS line laid over the screen: something went well, said in passing: a check and the words on the soft tone. It slides in from the screen's top
  * (or `bottom`), stays `duration`, slides out, never takes the cursor and never stops the member. Not for a warning or a question —
@@ -24,7 +24,7 @@ export function Snackbar({ open, defaultOpen = true, onOpenChange, duration = 40
     useEffect(() => {
         if (shown || !entered)
             return;
-        const ms = reducedMotion() ? 0 : parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion-sheet')) * 1000 || 350;
+        const ms = reducedMotion() ? 0 : sheetMs();
         const t = setTimeout(() => closed.current?.(), ms);
         return () => clearTimeout(t);
     }, [shown, entered]);

package/dist/lists/Bubble.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
 export interface ThreadProps extends ComponentProps<'div'> {
 }
-/** Thread — a stack of Bubbles: a conversation. */
+/** Thread — a stack of Bubbles: a chat, a conversation turn by turn. */
 export declare function Thread({ className, ...rest }: ThreadProps): import("react").JSX.Element;
 export interface BubbleProps extends ComponentProps<'div'> {
     /** whose: theirs on the left (default), mine on the right */

package/dist/lists/Bubble.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../cx.js';
-/** Thread — a stack of Bubbles: a conversation. */
+/** Thread — a stack of Bubbles: a chat, a conversation turn by turn. */
 export function Thread({ className, ...rest }) {
     return _jsx("div", { className: cx('thread', className), ...rest });
 }

package/dist/lists/Row.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createElement, isValidElement, useId, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
-import { reducedMotion, setRefs, useDisclosure } from '../state.js';
+import { glide, reducedMotion, setRefs, stopMoves, useDisclosure } from '../state.js';
 /**
  * Row — a frameless row inside a card: lead · title + meta · end. 48px+ tall, a tap target.
  * Several go in Rows (hairlines between). A row that IS a card is `Card row`.
@@ -32,22 +32,20 @@ export function Rows({ heading, className, children, ref, ...rest }) {
         if (!box)
             return;
         const rows = [...box.children].filter((el) => el.id !== id);
-        rows.forEach((el) => el.getAnimations().forEach((a) => { if (a.id === 'rows-move')
-            a.cancel(); })); // read the resting places
+        stopMoves(rows, 'rows-move'); // read the resting places
         const at = new Map(rows.map((el) => [el, el.offsetTop]));
         const before = order.current, moved = before.length === rows.length && rows.some((el, i) => el !== before[i]) && rows.every((el) => was.current.has(el));
         if (moved && !reducedMotion()) {
-            const ms = (parseFloat(getComputedStyle(box).getPropertyValue('--motion-sheet')) || 0.35) * 1000;
+            const cs = getComputedStyle(box);
             for (const el of rows) {
                 const dy = (was.current.get(el) ?? 0) - (at.get(el) ?? 0);
                 if (!dy)
                     continue;
                 const up = dy > 0; // it goes UP: over the others, on the card's ground so they pass under it
-                const a = el.animate([{ translate: `0 ${dy}px` }, { translate: '0 0' }], { duration: ms, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' });
-                a.id = 'rows-move';
+                const a = glide(el, dy, cs, 'rows-move');
                 if (up) {
                     el.style.position = 'relative';
-                    el.style.zIndex = '1';
+                    el.style.zIndex = 'var(--z-over)';
                     const clear = () => { el.style.position = ''; el.style.zIndex = ''; };
                     a.finished.then(clear, clear);
                 }

package/dist/numbers/Picker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useLayoutEffect, useRef } from 'react';
-import { useControlled } from '../state.js';
+import { createContext, useContext, useLayoutEffect, useRef } from 'react';
+import { useControlled, useSettled } from '../state.js';
 import { cx } from '../cx.js';
 const PickerContext = createContext(null);
 /**
@@ -13,7 +13,6 @@ export function Picker({ value, defaultValue, onChange, unit, label, className,
     const [current, pick] = useControlled(value, defaultValue, onChange);
     const rail = useRef(null);
     const mounted = useRef(false);
-    const settle = useRef(null);
     const items = () => [...(rail.current?.querySelectorAll(':scope > .picker__item') ?? [])];
     const column = () => (rail.current ? rail.current.clientWidth / 3 : 0); // the rail is three columns wide; item i stands in the centre at i × one column
     /* the chosen value stands in the centre — at once on arrival, sliding after */
@@ -23,22 +22,16 @@ export function Picker({ value, defaultValue, onChange, unit, label, className,
             r.scrollTo({ left: i * column(), behavior: mounted.current ? 'smooth' : 'auto' });
         mounted.current = true;
     });
-    useEffect(() => () => { if (settle.current)
-        clearTimeout(settle.current); }, []);
     /* the rail came to rest: whatever stands in the centre is what the member chose */
-    const scrolled = () => {
-        if (settle.current)
-            clearTimeout(settle.current);
-        settle.current = setTimeout(() => {
-            const r = rail.current, col = column();
-            if (!r || !col)
-                return;
-            const at = items()[Math.round(r.scrollLeft / col)]?.dataset.value;
-            if (at !== undefined)
-                pick(at);
-        }, 120);
-    };
-    return (_jsx(PickerContext.Provider, { value: { value: current, pick }, children: _jsxs("div", { className: cx('picker', className), "aria-label": label, "data-value": current, ...rest, children: [_jsx("div", { className: "picker__rail", role: "listbox", ref: rail, onScroll: scrolled, children: children }), unit != null && _jsx("span", { className: "picker__unit", children: unit })] }) }));
+    const { settled } = useSettled(() => {
+        const r = rail.current, col = column();
+        if (!r || !col)
+            return;
+        const at = items()[Math.round(r.scrollLeft / col)]?.dataset.value;
+        if (at !== undefined)
+            pick(at);
+    });
+    return (_jsx(PickerContext.Provider, { value: { value: current, pick }, children: _jsxs("div", { className: cx('picker', className), "aria-label": label, "data-value": current, ...rest, children: [_jsx("div", { className: "picker__rail", role: "listbox", ref: rail, onScroll: settled, children: children }), unit != null && _jsx("span", { className: "picker__unit", children: unit })] }) }));
 }
 /** PickerItem — one value on the Picker rail; a tap brings it to the centre. */
 export function PickerItem({ value, className, children, onClick, ...rest }) {

package/dist/people/Avatar.d.ts

@@ -308,9 +308,9 @@ export declare function Avatar({ size, outline, add, on, halo, center, src, alt,
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    className: string;
     href: string | undefined;
     type: string | undefined;
-    className: string;
 }, HTMLSpanElement>;
 export interface AvatarStackProps extends ComponentProps<'span'> {
     /** the count that trails the stack ("+9"): plain text, no round, no fill, in title type — it reads at arm's length. Use it for a stack of Stamps or when the count is the point; a count that should look like one more head is `<Avatar size="sm" on>+7</Avatar>` as the last child */

package/dist/people/Avatar.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from 'react';
 import { cx } from '../cx.js';
+import { tagged } from '../pressable.js';
 import { Icon } from '../type/Icon.js';
 /** Avatar — initials by default, a photo or an Icon when there is one; sizes are the tokens. */
 export function Avatar({ size, outline, add, on, halo, center, src, alt = '', icon, as, href, className, children, ...rest }) {
-    const el = as ?? (href ? 'a' : 'span');
-    return createElement(el, { href, type: el === 'button' ? 'button' : undefined, className: cx('avatar', size && `avatar--${size}`, outline && 'avatar--outline', add && 'avatar--add', on && 'avatar--on', halo && 'avatar--halo', center && 'avatar--center', className), ...rest }, src ? _jsx("img", { src: src, alt: alt }) : icon ? _jsx(Icon, { name: icon }) : children);
+    const { el, props } = tagged(as, href);
+    return createElement(el, { ...props, className: cx('avatar', size && `avatar--${size}`, outline && 'avatar--outline', add && 'avatar--add', on && 'avatar--on', halo && 'avatar--halo', center && 'avatar--center', className), ...rest }, src ? _jsx("img", { src: src, alt: alt }) : icon ? _jsx(Icon, { name: icon }) : children);
 }
 /** AvatarStack — overlapping small Avatars, or small Stamps (`bare`), side by side; a trailing count is `more` (or an `on` Avatar as the last child). */
 export function AvatarStack({ more, className, children, ...rest }) {

package/dist/post/PostDesk.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from 'react';
 import { cx } from '../cx.js';
-import { reducedMotion, useControlled, useLatest, watchSize } from '../state.js';
-import { holdRoom } from '../room.js';
+import { reducedMotion, swipeOf, useControlled, useLatest } from '../state.js';
+import { holdRoomWhile } from '../room.js';
 import { word } from '../words.js';
 import { StampPlace } from '../stamp/Stamp.js';
 const STRIKE = 700; // ms the struck card is seen before it asks to leave
@@ -53,10 +53,7 @@ export function PostDesk({ half, defaultHalf = 'message', onHalfChange, message,
     useLayoutEffect(() => { measure(); room.current?.sync(); }, [text]);
     useEffect(() => {
         const ta = paper.current;
-        room.current = holdRoom(ta.parentElement, () => paper.current, () => ta.scrollHeight > ta.clientHeight + 1, (refused) => refused && full.current?.());
-        document.fonts?.ready.then(measure);
-        const stop = watchSize([ta], measure);
-        return () => { room.current?.stop(); room.current = null; stop(); };
+        return holdRoomWhile(room, [ta], measure, ta.parentElement, () => paper.current, () => ta.scrollHeight > ta.clientHeight + 1, (refused) => refused && full.current?.());
     }, []);
     useEffect(() => {
         if (at !== 'struck')
@@ -66,12 +63,12 @@ export function PostDesk({ half, defaultHalf = 'message', onHalfChange, message,
     }, [at, askState]);
     const from = useRef(null);
     const drop = (e) => {
-        const dx = from.current == null ? 0 : e.clientX - from.current;
+        const dx = from.current == null ? 0 : swipeOf(from.current, e, 'x', SWIPE);
         from.current = null;
-        if (writing && Math.abs(dx) >= SWIPE)
+        if (writing && dx)
             askSide(dx < 0 ? 'address' : 'message');
     };
-    return (_jsxs("div", { className: cx('post-desk', `post-desk--${side}`, `post-desk--${at}`, className), ...rest, children: [_jsxs("div", { className: "post-desk__window", onPointerDown: (e) => { from.current = e.clientX; }, onPointerUp: drop, children: [_jsxs("div", { className: "post-desk__card post-paper", children: [_jsx("section", { className: "post-desk__half post-desk__half--message", "aria-label": word('message'), inert: !writing || side !== 'message', children: _jsx("textarea", { ref: paper, className: "post-desk__write", "aria-label": word('message'), placeholder: placeholder, value: text, onChange: (e) => askText(e.currentTarget.value) }) }), _jsxs("section", { className: "post-desk__half post-desk__half--address", "aria-label": word('address'), inert: !writing || side !== 'address', children: [_jsx("div", { className: "post-desk__corner", children: _jsxs("div", { className: "post-corner", children: [!writing && postmark, _jsx("button", { className: "post-corner__stamp post-desk__slot", type: "button", "aria-pressed": chosen != null, "aria-label": word(chosen ? 'stampOff' : 'stampOn'), onClick: () => askStamp(chosen ? null : stamps[0]?.id ?? null), children: chosen ? chosen.stamp : _jsx(StampPlace, { "aria-hidden": "true", children: word('stampOn') }) })] }) }), _jsx("div", { className: "post-desk__lines", children: address })] })] }), writing && _jsx("button", { className: `post-desk__reach post-desk__reach--${side === 'message' ? 'address' : 'message'}`, type: "button", "aria-label": word(side === 'message' ? 'toAddress' : 'toMessage'), onClick: () => askSide(side === 'message' ? 'address' : 'message') }), at === 'sent' && _jsx("div", { className: "post-desk__gone", children: sent })] }), _jsx("p", { className: "post-desk__note", "aria-live": "polite", children: note }), writing && side === 'address' && stamps.length > 0 && (_jsx("div", { className: "post-desk__stamps", role: "group", "aria-label": word('stamps'), children: stamps.map((s) => (_jsx("button", { className: "post-desk__pick", type: "button", "aria-pressed": s.id === stuck, "aria-label": s.label, onClick: () => askStamp(s.id), children: s.stamp }, s.id))) }))] }));
+    return (_jsxs("div", { className: cx('post-desk', `post-desk--${side}`, `post-desk--${at}`, className), ...rest, children: [_jsxs("div", { className: "post-desk__window", onPointerDown: (e) => { from.current = { x: e.clientX, y: e.clientY }; }, onPointerUp: drop, children: [_jsxs("div", { className: "post-desk__card post-paper", children: [_jsx("section", { className: "post-desk__half post-desk__half--message", "aria-label": word('message'), inert: !writing || side !== 'message', children: _jsx("textarea", { ref: paper, className: "post-desk__write", "aria-label": word('message'), placeholder: placeholder, value: text, onChange: (e) => askText(e.currentTarget.value) }) }), _jsxs("section", { className: "post-desk__half post-desk__half--address", "aria-label": word('address'), inert: !writing || side !== 'address', children: [_jsx("div", { className: "post-desk__corner", children: _jsxs("div", { className: "post-corner", children: [!writing && postmark, _jsx("button", { className: "post-corner__stamp post-desk__slot", type: "button", "aria-pressed": chosen != null, "aria-label": word(chosen ? 'stampOff' : 'stampOn'), onClick: () => askStamp(chosen ? null : stamps[0]?.id ?? null), children: chosen ? chosen.stamp : _jsx(StampPlace, { "aria-hidden": "true", children: word('stampOn') }) })] }) }), _jsx("div", { className: "post-desk__lines", children: address })] })] }), writing && _jsx("button", { className: `post-desk__reach post-desk__reach--${side === 'message' ? 'address' : 'message'}`, type: "button", "aria-label": word(side === 'message' ? 'toAddress' : 'toMessage'), onClick: () => askSide(side === 'message' ? 'address' : 'message') }), at === 'sent' && _jsx("div", { className: "post-desk__gone", children: sent })] }), _jsx("p", { className: "post-desk__note", "aria-live": "polite", children: note }), writing && side === 'address' && stamps.length > 0 && (_jsx("div", { className: "post-desk__stamps", role: "group", "aria-label": word('stamps'), children: stamps.map((s) => (_jsx("button", { className: "post-desk__pick", type: "button", "aria-pressed": s.id === stuck, "aria-label": s.label, onClick: () => askStamp(s.id), children: s.stamp }, s.id))) }))] }));
 }
 /** PostDeskLine — one address line of a PostDesk (`address`): a small word and a bare input on a rule. The value is the app's, like any input's. */
 export function PostDeskLine({ label, type = 'text', autoComplete = 'off', className, ...rest }) {

package/dist/post/PostLetter.js

@@ -8,9 +8,9 @@ import { IconBtn } from '../actions/IconBtn.js';
 import { PostCorner } from './postCorner.js';
 const OTHER = { picture: 'back', back: 'picture' };
 /* half a turn: the sheet swings on its upright middle between flat (0) and edge-on (±90). `hold` keeps it edge-on until the other sheet is rendered */
-function swing(el, from, to, easing, hold = false) {
+function swing(el, from, to, ease, hold = false) {
     const lens = `perspective(${el.offsetWidth * 3}px)`;
-    const flip = parseFloat(getComputedStyle(el).getPropertyValue('--motion-flip')) || 0.45;
+    const cs = getComputedStyle(el), flip = parseFloat(cs.getPropertyValue('--motion-flip')) || 0.45, easing = cs.getPropertyValue(ease).trim() || 'ease';
     return el.animate([{ transform: `${lens} rotateY(${from}deg)` }, { transform: `${lens} rotateY(${to}deg)` }], { duration: flip * 500, easing, fill: hold ? 'forwards' : 'none' });
 }
 /**
@@ -35,7 +35,7 @@ export function PostLetter({ face, defaultFace = 'picture', onFaceChange, pictur
             setLying(asked);
             return;
         }
-        const out = swing(el, 0, 90, 'ease-in', true);
+        const out = swing(el, 0, 90, '--ease-in', true);
         out.onfinish = () => setLying(asked);
         return () => out.cancel();
     }, [asked, lying]);
@@ -45,7 +45,7 @@ export function PostLetter({ face, defaultFace = 'picture', onFaceChange, pictur
         landed.current = lying;
         const el = sheets.current[lying];
         if (el?.animate)
-            swing(el, -90, 0, 'ease-out');
+            swing(el, -90, 0, '--ease-out');
     }, [lying]);
     const turn = () => ask(OTHER[asked]);
     const [name, ...lines] = to;

package/dist/pressable.d.ts

@@ -6,3 +6,12 @@ export declare function pressable<E extends 'span' | 'div'>(onClick: (() => void
     Box: E;
     boxProps: ComponentProps<E>;
 };
+/** a tag-like part (`as` span · a · button): `as`, else a link when it has an `href`, else a span — with what the tag needs before the
+ *  part's own props: the `href`, and `type="button"` on a button so it never submits a form */
+export declare function tagged(as: 'span' | 'a' | 'button' | undefined, href: string | undefined): {
+    el: "a" | "button" | "span";
+    props: {
+        href: string | undefined;
+        type: string | undefined;
+    };
+};

package/dist/pressable.js

@@ -4,3 +4,9 @@ export function pressable(onClick, still, rest, extra) {
     const tap = onClick != null;
     return { tap, Box: (tap ? 'button' : still), boxProps: (tap ? { type: 'button', onClick, ...extra, ...rest } : rest) };
 }
+/** a tag-like part (`as` span · a · button): `as`, else a link when it has an `href`, else a span — with what the tag needs before the
+ *  part's own props: the `href`, and `type="button"` on a button so it never submits a form */
+export function tagged(as, href) {
+    const el = as ?? (href ? 'a' : 'span');
+    return { el, props: { href, type: el === 'button' ? 'button' : undefined } };
+}

package/dist/room.d.ts

@@ -10,3 +10,8 @@ export interface Room {
     stop(): void;
 }
 export declare function holdRoom(paper: HTMLElement, fieldOf: () => HTMLTextAreaElement | null, over: () => boolean, after?: (refused: boolean) => void): Room;
+/** an effect's room: held in `room` while the effect runs, `measure` again whenever `watched` change size and once the fonts are in;
+ *  returns the effect's cleanup */
+export declare function holdRoomWhile(room: {
+    current: Room | null;
+}, watched: Array<Element | null | undefined>, measure: () => void, ...hold: Parameters<typeof holdRoom>): () => void;

package/dist/room.js

@@ -1,3 +1,4 @@
+import { watchSize } from './state.js';
 export function holdRoom(paper, fieldOf, over, after = () => { }) {
     let last = fieldOf()?.value ?? '', composing = false;
     const refuse = (field, dropped) => {
@@ -36,3 +37,11 @@ export function holdRoom(paper, fieldOf, over, after = () => { }) {
         stop() { paper.removeEventListener('input', onInput); paper.removeEventListener('compositionstart', onComposing); paper.removeEventListener('compositionend', onComposed); },
     };
 }
+/** an effect's room: held in `room` while the effect runs, `measure` again whenever `watched` change size and once the fonts are in;
+ *  returns the effect's cleanup */
+export function holdRoomWhile(room, watched, measure, ...hold) {
+    room.current = holdRoom(...hold);
+    const stop = watchSize(watched, measure);
+    document.fonts?.ready.then(measure);
+    return () => { room.current?.stop(); room.current = null; stop(); };
+}

package/dist/scaffold/Panes.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useRef } from 'react';
-import { reducedMotion, useControlled, watchSize } from '../state.js';
+import { reducedMotion, useControlled, useSettled, watchSize } from '../state.js';
 import { cx } from '../cx.js';
 import { Pager } from './Pager.js';
 /**
@@ -13,7 +13,6 @@ export function Panes({ at, defaultAt = 0, onAtChange, dots = true, label, class
     const [current, request] = useControlled(at, defaultAt, onAtChange);
     const rail = useRef(null);
     const mounted = useRef(false);
-    const settle = useRef(null);
     const panes = Children.toArray(children).filter(isValidElement);
     /* the chosen pane stands in sight — at once on arrival, sliding after */
     const align = (smooth) => {
@@ -24,20 +23,15 @@ export function Panes({ at, defaultAt = 0, onAtChange, dots = true, label, class
     useLayoutEffect(() => { align(mounted.current); mounted.current = true; });
     useEffect(() => {
         const stop = watchSize([rail.current], () => align(false)); // the box changed width (a turn of the phone): the same pane stays in sight
-        return () => { stop(); if (settle.current)
-            clearTimeout(settle.current); };
+        return () => { stop(); atRest.cancel(); };
     });
     /* the rail came to rest: the pane standing in it is where the member went */
-    const scrolled = () => {
-        if (settle.current)
-            clearTimeout(settle.current);
-        settle.current = setTimeout(() => {
-            const r = rail.current;
-            if (r && r.clientWidth)
-                request(Math.min(panes.length - 1, Math.max(0, Math.round(r.scrollLeft / r.clientWidth))));
-        }, 120);
-    };
-    return (_jsxs("div", { className: cx('panes', className), role: "group", "aria-label": label, ...rest, children: [_jsx("div", { className: "panes__rail", ref: rail, onScroll: scrolled, children: panes.map((p, i) => cloneElement(p, { inert: i !== current || undefined })) }), dots && panes.length > 1 && _jsx(Pager, { at: current + 1, of: panes.length })] }));
+    const atRest = useSettled(() => {
+        const r = rail.current;
+        if (r && r.clientWidth)
+            request(Math.min(panes.length - 1, Math.max(0, Math.round(r.scrollLeft / r.clientWidth))));
+    });
+    return (_jsxs("div", { className: cx('panes', className), role: "group", "aria-label": label, ...rest, children: [_jsx("div", { className: "panes__rail", ref: rail, onScroll: atRest.settled, children: panes.map((p, i) => cloneElement(p, { inert: i !== current || undefined })) }), dots && panes.length > 1 && _jsx(Pager, { at: current + 1, of: panes.length })] }));
 }
 /** Pane — one pane of a `Panes`: components one after another, as in a card. */
 export function Pane({ className, ...rest }) {

package/dist/sheets/Sheet.d.ts

@@ -27,7 +27,7 @@ export interface SheetProps extends Omit<ComponentProps<'article'>, 'onChange'>
     refreshing?: boolean;
     /** the card tone slot, as `Card tone` — 2 and up add `card--N`. The head shows it; with `paper` the content does not */
     tone?: 1 | 2 | 3 | 4 | 5;
-    /** the content is white paper and the head keeps the sheet's colour. The same prop on a `StackSheet` or a `Card` in a stack. Omit it and the content is the same colour as the head */
+    /** the content is the theme's paper (`--action-bg`, the ground of its fields) and the head keeps the sheet's colour. The same prop on a `StackSheet` or a `Card` in a stack. Omit it and the content is the same colour as the head */
     paper?: boolean;
 }
 /**

package/dist/sheets/Sheet.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useCallback, useEffect, useRef, useState } from 'react';
-import { focusWhenActive, useControlled, watchSize } from '../state.js';
+import { focusWhenActive, useControlled, visibleBottom, watchSize } from '../state.js';
 import { CardHead } from '../cards/CardHead.js';
 import { SheetHead } from './SheetHead.js';
 import { cx } from '../cx.js';
@@ -81,9 +81,8 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
         const restTop = rect.top - slid(el);
         const bodyTop = (el.querySelector(':scope > .sheet__body') ?? el).getBoundingClientRect().top - rect.top;
         const box = el.parentElement.getBoundingClientRect(); // what clips it: the Step or the SheetStage
-        const vv = window.visualViewport;
         const edge = Math.min(box.bottom, restTop + rect.height); // the sheet's own bottom edge at rest — above the box's on a stage that gave the keyboard its room
-        const cut = Math.min(edge, vv ? vv.offsetTop + vv.height : Infinity);
+        const cut = Math.min(edge, visibleBottom());
         const button = el.querySelector(':scope > .card__foot')?.firstElementChild; // the foot's button stands on that edge at every state: the control has to clear its strip too
         const need = control.getBoundingClientRect().height + (button ? edge - button.getBoundingClientRect().top : 0);
         let to = list[list.length - 1];

package/dist/sheets/SheetSteps.js

@@ -1,6 +1,6 @@
 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 } from '../state.js';
+import { focusWhenActive, swipeOf, useControlled } from '../state.js';
 import { cx } from '../cx.js';
 import { Icon } from '../type/Icon.js';
 import { Link } from '../actions/Link.js';
@@ -130,8 +130,8 @@ export function SheetSteps({ at, reached, defaultAt = 0, onAtChange, reversible
         press.current = null;
         if (!p)
             return;
-        const dx = e.clientX - p.x, dy = e.clientY - p.y;
-        if (Math.abs(dy) < SWIPE_REM * parseFloat(getComputedStyle(document.documentElement).fontSize) || Math.abs(dy) < 2 * Math.abs(dx))
+        const dy = swipeOf(p, e, 'y', SWIPE_REM * parseFloat(getComputedStyle(document.documentElement).fontSize), 2);
+        if (!dy)
             return;
         const body = e.target.closest('.sheet-step__body');
         if (body && (dy < 0 ? body.scrollTop + body.clientHeight < body.scrollHeight - 1 : body.scrollTop > 0))

package/dist/sheets/StackSheet.d.ts

@@ -15,7 +15,7 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
     title: ReactNode;
     /** the tone slot — see `Tone`. The head shows it */
     tone?: Tone;
-    /** the content is white paper and the head keeps the sheet's colour. The same look as `Sheet paper`. Omit it and the content matches the head */
+    /** the content is the theme's paper (`--action-bg`, the ground of its fields) and the head keeps the sheet's colour. The same look as `Sheet paper`. Omit it and the content matches the head */
     paper?: boolean;
     /** the head's end when the sheet has no tabs: an Icon, an IconRow */
     icon?: ReactNode;

package/dist/sheets/sheetStepsPile.js

@@ -1,7 +1,7 @@
 /* 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';
+import { reducedMotion, visibleBottom } 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
@@ -26,8 +26,7 @@ export function usePile(ref, moving) {
            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 cut = Math.min(body.getBoundingClientRect().bottom - (parseFloat(getComputedStyle(body).scrollPaddingBottom) || 0), visibleBottom());
             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)