@usableapp/cardds 0.7.59 → 0.7.60

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 > 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.60 — 2026-10-06
+
+### Fixed
+- **A pull on a `paper` stack sheet follows the finger** (since 0.7.57 it did not): in a `SheetStack` / `Home` whose sheets are `paper`, the words came down late behind the finger during a pull to refresh. They move with it now, as on a sheet without `paper`. Nothing to change in a screen.
+- **`Pin`: a cell given the cursor by a script in the page's first moments does not look ready** — on a phone, a script's focus within the first 0.7 s after the page loaded showed the full border and the caret with no keyboard up. It rests until a tap, the keyboard, or a digit, as at any other moment.
+- **`SheetStack mark="line"`: the line is as thin as a single `Sheet`'s** — it was 4px in 0.7.59, the Sheet's is 2px. Same length, same place. Nothing to change in a screen.
+
 ## 0.7.59 — 2026-10-06
 
 ### Fixed

package/css/stack.css

@@ -211,15 +211,17 @@
 }
 @keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
 /* the grip as ONE LINE (`mark="line"`, Lh 2026-10-06): the single Sheet's line, at the same place and the same length. It reads the
-   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. A bar and two round ends; the resting
+   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. As thin as the Sheet's (--sp-0, half a
+   dot), from the dots' top, as the Sheet's line starts there too. A bar and two round ends; the resting
    ink is mixed into the card's own colour (opaque), so the ends do not show darker where they lie on the bar. */
 .stack-card--line {
   --_grip-w: calc(var(--sp-base) * 18);
   --_grip-ink: color-mix(in srgb, currentColor 30%, var(--card-bg));
   --_grip-bar: linear-gradient(var(--_grip-ink), var(--_grip-ink));
-  --_grip-end: calc((var(--_grip-w) - var(--_grip-dot)) / 2);
+  --_grip-h: var(--sp-0);
+  --_grip-end: calc((var(--_grip-w) - var(--_grip-h)) / 2);
   background-image: var(--_grip-img), var(--_grip-bar), var(--_grip-img);
-  background-size: var(--_grip-dot) var(--_grip-dot), calc(var(--_grip-w) - var(--_grip-dot)) var(--_grip-dot), var(--_grip-dot) var(--_grip-dot);
+  background-size: var(--_grip-h) var(--_grip-h), calc(var(--_grip-w) - var(--_grip-h)) var(--_grip-h), var(--_grip-h) var(--_grip-h);
   background-position: calc(50% - var(--_grip-end)) var(--_grip-y), 50% var(--_grip-y), calc(50% + var(--_grip-end)) var(--_grip-y);
 }
 @media (prefers-reduced-motion: reduce) {
@@ -337,6 +339,8 @@
   padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
   transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
 }
+/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
+.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
 .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
   background-color: transparent;
   transition:

package/dist/cardds.css

@@ -1212,15 +1212,17 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 }
 @keyframes stack-grip-dissolve { from { --_grip: 0; } to { --_grip: 1; } }
 /* the grip as ONE LINE (`mark="line"`, Lh 2026-10-06): the single Sheet's line, at the same place and the same length. It reads the
-   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. A bar and two round ends; the resting
+   same --_grip-ink, so while its sheet reloads it changes colour exactly as the dots do. As thin as the Sheet's (--sp-0, half a
+   dot), from the dots' top, as the Sheet's line starts there too. A bar and two round ends; the resting
    ink is mixed into the card's own colour (opaque), so the ends do not show darker where they lie on the bar. */
 .stack-card--line {
   --_grip-w: calc(var(--sp-base) * 18);
   --_grip-ink: color-mix(in srgb, currentColor 30%, var(--card-bg));
   --_grip-bar: linear-gradient(var(--_grip-ink), var(--_grip-ink));
-  --_grip-end: calc((var(--_grip-w) - var(--_grip-dot)) / 2);
+  --_grip-h: var(--sp-0);
+  --_grip-end: calc((var(--_grip-w) - var(--_grip-h)) / 2);
   background-image: var(--_grip-img), var(--_grip-bar), var(--_grip-img);
-  background-size: var(--_grip-dot) var(--_grip-dot), calc(var(--_grip-w) - var(--_grip-dot)) var(--_grip-dot), var(--_grip-dot) var(--_grip-dot);
+  background-size: var(--_grip-h) var(--_grip-h), calc(var(--_grip-w) - var(--_grip-h)) var(--_grip-h), var(--_grip-h) var(--_grip-h);
   background-position: calc(50% - var(--_grip-end)) var(--_grip-y), 50% var(--_grip-y), calc(50% + var(--_grip-end)) var(--_grip-y);
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1338,6 +1340,8 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
   padding-top: calc(var(--sp-6) + var(--_refresh, 0px));
   transition: padding-top var(--motion-sheet) ease, background-color 0s linear;
 }
+/* a pull follows the finger at once, on paper too: the rule above is as strong as the stack's own `is-refreshing` one and comes later */
+.sheet-stack > .card.sheet--paper > .sheet__body.is-refreshing { transition: none; }
 .sheet-stack > .card.sheet--paper:not(.is-open) > .sheet__body {
   background-color: transparent;
   transition:

package/dist/forms/Pin.js

@@ -79,7 +79,7 @@ export function Pin({ length = 6, value, defaultValue = '', label = word('digit'
        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 tapped = useRef(-Infinity); // no tap yet: a script's focus in the page's first moments is still a script's
     const keyboardUp = () => { const vv = window.visualViewport; return !!vv && window.innerHeight - vv.height > 120; };
     const wake = () => { tapped.current = performance.now(); setAsleep(false); };
     useEffect(() => {

package/package.json

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