@usableapp/cardds 0.7.20 → 0.7.22

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 > 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.22 — 2026-09-29
+
+### Changed
+- `StackSheet` (so `Home`): the open sheet's back button now stands at the head's far END, after the tabs, with a chevron pointing DOWN because the sheet folds down (Lh 2026-09-29). Before: at the start, chevron left. `backAt="start"` brings back the old place.
+- `StackBack end`: the same for a head written by hand (`.sheet-stack__back--end`). Without `end` nothing changes.
+
+## 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/css/stack.css

@@ -311,7 +311,13 @@
 /* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
    tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
    (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
-.sheet-stack--tap > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+/* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
+   while open; the last tab then sits on the inset (no reach into the padding) */
+.sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
+.sheet-stack--tap .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) ease; }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
 .sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--_back-size) - var(--tap-sm)) / 2); }
 

package/dist/cardds.css

@@ -1268,7 +1268,13 @@ button:enabled { cursor: pointer; } /* a disabled one keeps the arrow */
 /* ---- the back button, SMALL (Lh 2026-09-23: "give the sheet head more room" — and then "a glyph alone does not read as
    tappable"): a SMALL DISC — its ring kept, 32px instead of 44, the chevron in it at 20 — so the head gives it 32px + a gap
    (was 56px). Its tap target stays 44px: an invisible ::after around the disc. ---- */
-.sheet-stack--tap > .card.is-open > .card__head { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back:not(.sheet-stack__back--end)) { padding-left: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+/* AT THE END (Lh 2026-09-29, the home): after the tabs, chevron down — the open sheet folds down. The head's end gives it its room
+   while open; the last tab then sits on the inset (no reach into the padding) */
+.sheet-stack--tap .sheet-stack__back--end { left: auto; right: 0; }
+.sheet-stack--tap .card__head:has(> .sheet-stack__back--end) { transition: padding-right var(--motion-sheet) ease; }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) { padding-right: var(--stack-back-room, calc(var(--_back-size) + var(--sp-2))); }
+.sheet-stack--tap > .card.is-open > .card__head:has(> .sheet-stack__back--end) > .stack-sheet__tabs { margin-right: 0; }
 .sheet-stack--tap .sheet-stack__back > .icon { width: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); height: var(--stack-back-icon, calc(var(--tap-base) * 13 / 24)); flex: none; } /* 26: the chevron fills the small disc (Lh 2026-09-23) */
 .sheet-stack--tap .sheet-stack__back::after { content: ""; position: absolute; inset: calc((var(--_back-size) - var(--tap-sm)) / 2); }
 

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/dist/sheets/StackBack.d.ts

@@ -2,7 +2,10 @@ import type { ComponentProps } from 'react';
 export interface StackBackProps extends ComponentProps<'button'> {
     /** accessible name */
     label?: string;
+    /** at the head's END (after its tabs / icons), chevron DOWN — the open sheet folds down (Lh 2026-09-29, the home);
+     *  default: at its start, chevron left */
+    end?: boolean;
 }
 /** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open.
  * A SMALL disc (Lh 2026-09-23): 32px with a chevron — the head keeps its room for the title and the tabs; the 44px tap target stays. */
-export declare function StackBack({ label, className, ...rest }: StackBackProps): import("react").JSX.Element;
+export declare function StackBack({ label, end, className, ...rest }: StackBackProps): import("react").JSX.Element;

package/dist/sheets/StackBack.js

@@ -4,6 +4,6 @@ import { Icon } from '../type/Icon.js';
 import { IconBtn } from '../actions/IconBtn.js';
 /** StackBack — the back button a tapped stack sheet reveals in its head; first child of that sheet's CardHead. Hidden until the sheet is open.
  * A SMALL disc (Lh 2026-09-23): 32px with a chevron — the head keeps its room for the title and the tabs; the 44px tap target stays. */
-export function StackBack({ label = 'Back', className, ...rest }) {
-    return _jsx(IconBtn, { sm: true, label: label, className: cx('sheet-stack__back', className), ...rest, children: _jsx(Icon, { name: "chevron-left" }) });
+export function StackBack({ label = 'Back', end, className, ...rest }) {
+    return _jsx(IconBtn, { sm: true, label: label, className: cx('sheet-stack__back', end && 'sheet-stack__back--end', className), ...rest, children: _jsx(Icon, { name: end ? 'chevron-down' : 'chevron-left' }) });
 }

package/dist/sheets/StackSheet.d.ts

@@ -26,6 +26,8 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
     foot?: ReactNode;
     /** the back button's label (shown once the sheet is open) */
     backLabel?: string;
+    /** where the back button stands: `end` (default — after the tabs, chevron DOWN: the sheet folds down, Lh 2026-09-29) or `start` (before the title, chevron left) */
+    backAt?: 'start' | 'end';
 }
 /**
  * StackSheet — ONE sheet of a `SheetStack`, in the one sheet shape: SHEET HEAD (back · title · tabs or an icon) pinned at the top ·
@@ -33,4 +35,4 @@ export interface StackSheetProps extends Omit<ComponentProps<'article'>, 'title'
  * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
  * is closed — see `Home`). A direct child of `SheetStack`.
  */
-export declare function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel, className, children, ...rest }: StackSheetProps): import("react").JSX.Element;
+export declare function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel, backAt, className, children, ...rest }: StackSheetProps): import("react").JSX.Element;

package/dist/sheets/StackSheet.js

@@ -17,7 +17,7 @@ import { Badge } from '../numbers/Badge.js';
  * a count shows as a small circle over its icon. The body is the app's: render the page of the chosen tab (and nothing while the sheet
  * is closed — see `Home`). A direct child of `SheetStack`.
  */
-export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = 'Back', className, children, ...rest }) {
+export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab, onTabChange, foot, backLabel = 'Back', backAt = 'end', className, children, ...rest }) {
     const [tab, pick] = useControlled(tabProp, defaultTab ?? tabs?.[0]?.id, onTabChange);
     // a title longer than its room does not wrap: it runs sideways, like a song title in a short slot — the room it overflows by
     // is measured here (the tabs may grow with the text size) and handed to the CSS as --_over
@@ -35,5 +35,5 @@ export function StackSheet({ title, tone, icon, tabs, tab: tabProp, defaultTab,
         measure();
         return watchSize([h, run], measure);
     }, [title]);
-    return (_jsxs(Card, { tone: tone, className: cx('stack-sheet', className), ...rest, children: [_jsxs(CardHead, { children: [_jsx(StackBack, { label: backLabel }), _jsx(Text, { level: "h2", ref: titleRef, className: "stack-sheet__title", children: _jsx("span", { className: "stack-sheet__run", children: title }) }), tabs?.length ? (_jsx("span", { className: "stack-sheet__tabs", role: "tablist", children: tabs.map((t) => (_jsxs(IconBtn, { sm: true, invert: t.id === tab, role: "tab", "aria-selected": t.id === tab, label: t.label, className: "stack-sheet__tab", onClick: () => pick(t.id), children: [_jsx(Icon, { name: t.icon }), t.count ? _jsx(Badge, { className: "stack-sheet__count", children: t.count > 99 ? '99+' : t.count }) : null] }, t.id))) })) : icon] }), _jsx(SheetBody, { role: tabs?.length ? 'tabpanel' : undefined, children: children }), foot != null && _jsx(CardFoot, { children: foot })] }));
+    return (_jsxs(Card, { tone: tone, className: cx('stack-sheet', className), ...rest, children: [_jsxs(CardHead, { children: [backAt === 'start' && _jsx(StackBack, { label: backLabel }), _jsx(Text, { level: "h2", ref: titleRef, className: "stack-sheet__title", children: _jsx("span", { className: "stack-sheet__run", children: title }) }), tabs?.length ? (_jsx("span", { className: "stack-sheet__tabs", role: "tablist", children: tabs.map((t) => (_jsxs(IconBtn, { sm: true, invert: t.id === tab, role: "tab", "aria-selected": t.id === tab, label: t.label, className: "stack-sheet__tab", onClick: () => pick(t.id), children: [_jsx(Icon, { name: t.icon }), t.count ? _jsx(Badge, { className: "stack-sheet__count", children: t.count > 99 ? '99+' : t.count }) : null] }, t.id))) })) : icon, backAt === 'end' && _jsx(StackBack, { end: true, label: backLabel })] }), _jsx(SheetBody, { role: tabs?.length ? 'tabpanel' : undefined, children: children }), foot != null && _jsx(CardFoot, { children: foot })] }));
 }

package/package.json

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