@usableapp/cardds 0.7.20 → 0.7.21

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.21 — 2026-09-29
+
+### Fixed
+- `installScreenSlide()`: the phone's back slid the WHOLE screen on every history step, also on an entry of the same screen (an open `Home`/`SheetStack` sheet kept in `history.state` so back closes it) — the page slid while the stack closed. Now an entry with the same path + query goes back without a slide; the component moves itself. Nothing to change in an app (Lh 2026-09-29, timebank home).
+
 ## 0.7.20 — 2026-09-28
 
 Lh, from timebank on a real Android phone (card #153). Nothing to change in a screen.

package/dist/scaffold/slideScreen.d.ts

@@ -10,6 +10,7 @@ export declare function slideScreen(update: () => unknown, direction?: SlideDire
 /**
  * installScreenSlide — call ONCE when the app starts: the phone's / browser's BACK (and forward) buttons slide the screen too,
  * the way `back` (and `next`) does. It listens to `popstate` before the router renders; the direction is read from the history
- * entry's index (`history.state.idx`, which React Router keeps; without it: back). Returns the uninstall.
+ * entry's index (`history.state.idx`, which React Router keeps; without it: back). An entry of the SAME screen (same path and
+ * query, only its state differs — an open sheet pushed so the phone's back closes it) does not slide. Returns the uninstall.
  */
 export declare function installScreenSlide(): () => void;

package/dist/scaffold/slideScreen.js

@@ -47,17 +47,25 @@ export function slideScreen(update, direction = 'next', scope = document) {
 /**
  * installScreenSlide — call ONCE when the app starts: the phone's / browser's BACK (and forward) buttons slide the screen too,
  * the way `back` (and `next`) does. It listens to `popstate` before the router renders; the direction is read from the history
- * entry's index (`history.state.idx`, which React Router keeps; without it: back). Returns the uninstall.
+ * entry's index (`history.state.idx`, which React Router keeps; without it: back). An entry of the SAME screen (same path and
+ * query, only its state differs — an open sheet pushed so the phone's back closes it) does not slide. Returns the uninstall.
  */
 export function installScreenSlide() {
-    let idx = history.state?.idx;
+    const where = () => location.pathname + location.search;
+    let idx = history.state?.idx, at = where();
     const push = history.pushState.bind(history), replace = history.replaceState.bind(history);
-    history.pushState = (...a) => { push(...a); idx = history.state?.idx; };
-    history.replaceState = (...a) => { replace(...a); idx = history.state?.idx; };
+    const seen = () => { idx = history.state?.idx; at = where(); };
+    history.pushState = (...a) => { push(...a); seen(); };
+    history.replaceState = (...a) => { replace(...a); seen(); };
     const pop = () => {
-        const to = history.state?.idx;
+        const to = history.state?.idx, same = where() === at;
         const dir = to != null && idx != null && to > idx ? 'next' : 'back';
         idx = to;
+        at = where();
+        /* the SAME screen (path + query unchanged, only the entry's state — an open sheet, a tab): the screen stays, the
+           component moves itself (a SheetStack closes as a stack does). Lh 2026-09-29, timebank home. */
+        if (same)
+            return;
         slideScreen(() => undefined, dir); // the router renders on its own, right after this: the slide waits for its new Screen
     };
     addEventListener('popstate', pop, { capture: true });

package/package.json

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