@usableapp/cardds 0.7.29 → 0.7.30

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 > 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.30 — 2026-09-29
+
+### Changed
+- `Sheet`: **the sheet comes up → its field has the cursor, always** (Lh 2026-09-29 — a habit of the Sheet, not of a screen). 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 the cursor goes to the field marked `data-autofocus` (SheetSteps marks its open step's first field), else the first field in its `SheetBody`. With no field, a sheet that came onto the screen gives it to its handle. A field that already has the cursor keeps it. Before: only an arrival from `away` (0.7.29: and a raise from peek) moved it, and only to a marked field. Nothing to change in a screen — remove any focus code of your own for a sheet's field.
+
 ## 0.7.29 — 2026-09-29
 
 ### Fixed

package/dist/sheets/Sheet.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { useControlled, useLatest, warnOnce, watchSize } from '../state.js';
 import { cx } from '../cx.js';
 const ORDER = ['peek', 'half', '3q', 'full']; // low → high; `away` is below them all and outside them
+const RANK = { away: 0, peek: 1, half: 2, '3q': 3, full: 4 };
 const TAP_REM = 0.5; // = --sp-2: a move shorter than this is a tap, not a drag
 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
 /**
@@ -26,7 +27,7 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
     const ref = useRef(null);
     const handleRef = useRef(null);
     const home = useRef(current !== 'peek' && current !== 'away' ? current : 'half'); // where a tap from peek returns to
-    const was = useRef(current);
+    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 shown = entered ? current : 'away';
@@ -77,31 +78,39 @@ export function Sheet({ state, defaultState = 'half', onStateChange, onSettled,
             });
         };
     }, [latest]);
+    /* 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
+       field), else the body's first field; with no field, a sheet that came onto the screen gives it to its handle. A field that already
+       has the cursor keeps it. */
     useEffect(() => {
         if (current !== 'peek' && current !== 'away')
             home.current = current;
-        const back = was.current === 'peek' && current !== 'peek' && current !== 'away' && !!ref.current?.querySelector('[data-autofocus]:not([inert] *)')
-            && (!ref.current?.contains(document.activeElement) || document.activeElement === handleRef.current); // raised from peek by the handle: the marked field takes the cursor again (timebank login, Lh 2026-09-29) — never taken from a field that has it
-        if ((was.current === 'away' && current !== 'away') || back) { // it just came onto the screen: the cursor goes to what is marked to take it first (`data-autofocus` — a SheetSteps marks its open step's first field), else the handle, for the keyboard user
-            // …once it has finished sliding in (Lh 2026-09-24): the keyboard must not come up while the sheet still moves
-            const el = ref.current;
-            let done = false;
-            const land = () => {
-                if (done)
-                    return;
-                done = true;
-                el?.removeEventListener('transitionend', onEnd);
-                const first = el?.querySelector('[data-autofocus]:not([inert] *)');
-                (first ?? handleRef.current)?.focus({ preventScroll: true });
-            };
-            const onEnd = (e) => { if (e.target === el && e.propertyName === 'translate')
-                land(); };
-            el?.addEventListener('transitionend', onEnd);
-            const t = setTimeout(land, 600); // no transition (reduced motion): land anyway
-            was.current = current;
-            return () => { clearTimeout(t); el?.removeEventListener('transitionend', onEnd); };
-        }
+        const rose = current !== 'peek' && current !== 'away' && RANK[current] > RANK[was.current];
+        const from = was.current;
         was.current = current;
+        if (!rose)
+            return;
+        const el = ref.current;
+        let done = false;
+        const land = () => {
+            if (done || !el)
+                return;
+            done = true;
+            el.removeEventListener('transitionend', onEnd);
+            const at = document.activeElement;
+            if (at && el.contains(at) && at !== handleRef.current && at.matches('input, textarea, select, [contenteditable]'))
+                return;
+            const field = el.querySelector('[data-autofocus]:not([inert] *)')
+                ?? el.querySelector(':scope > .sheet__body :is(input:not([type=checkbox], [type=radio], [type=hidden], [disabled]), textarea, select):not([inert] *)');
+            (field ?? (from === 'away' ? handleRef.current : null))?.focus({ preventScroll: true });
+        };
+        const onEnd = (e) => { if (e.target === el && e.propertyName === 'translate')
+            land(); };
+        el?.addEventListener('transitionend', onEnd);
+        const t = setTimeout(land, 600); // no transition (reduced motion): land anyway
+        return () => { clearTimeout(t); el?.removeEventListener('transitionend', onEnd); if (!done)
+            was.current = from; }; // cut short (StrictMode's trial run, or a new state mid-slide): the rise still counts from where it began
     }, [current]);
     /* 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) => {

package/package.json

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